/**
 * ARK-IA · Ajustes responsive para toda la plataforma (celular, tablet, escritorio)
 * Se carga al final, después de ark-global.css.
 */

/* ---------- Títulos de los encabezados verdes siempre en blanco ---------- */
html body .main-content .dash-hero h3, html body .main-content .ct-hero h3,
html body .main-content .tpl-hero h3, html body .main-content .ark-hero h3,
html body .main-content .dash-hero h3 *, html body .main-content .ct-hero h3 *,
html body .main-content .tpl-hero h3 *, html body .main-content .ark-hero h3 * {
    color: #fff !important;
}

/* ---------- Barra superior ---------- */
html body .header .header-content { gap: 10px; flex-wrap: nowrap !important; }
html body .header .header-left { min-width: 0; flex: 1 1 0; }
html body .header .page-title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: 'Poppins', sans-serif; font-weight: 600;
}
html body .header .header-right { flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 767.98px) {
    html body .header .page-title { font-size: 15px !important; }
    html body .header .header-right { gap: 4px !important; }
    html body .header .header-right .header-item .btn { padding: .3rem .45rem; }
}
@media (max-width: 1199.98px) {
    /* En tablet los botones de la barra muestran solo su ícono */
    html body .header .header-right .d-md-inline { display: none !important; }
}

/* ---------- Tablas: deslizar horizontalmente en pantallas pequeñas ---------- */
html body .main-content .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body .main-content .table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Imágenes y medios ---------- */
html body .main-content img, html body .main-content video, html body .main-content iframe { max-width: 100%; }

/* ---------- Tablet (≤ 991px) ---------- */
@media (max-width: 991.98px) {
    html body .main-content .ark-hero, html body .main-content .dash-hero,
    html body .main-content .ct-hero, html body .main-content .tpl-hero { padding: 22px 22px; }
    html body .main-content .dash-usage { width: 100%; min-width: 0; }
    html body .main-content .card-header { flex-wrap: wrap; gap: 8px; }
    html body .main-content .dash-card-head, html body .main-content .ct-head,
    html body .main-content .cp-toolbar { flex-wrap: wrap; }
    html body .modal .modal-xl { max-width: calc(100% - 1rem); }
}

/* ---------- Celular (≤ 767px) ---------- */
@media (max-width: 767.98px) {
    html body .main-content > .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* Encabezados verdes */
    html body .main-content .ark-hero, html body .main-content .dash-hero,
    html body .main-content .ct-hero, html body .main-content .tpl-hero {
        padding: 18px 16px; border-radius: 16px; margin-bottom: 16px !important;
    }
    html body .main-content .ark-hero h3, html body .main-content .dash-hero h3,
    html body .main-content .ct-hero h3, html body .main-content .tpl-hero h3 { font-size: 1.25rem !important; line-height: 1.3; }
    html body .main-content .ark-hero p, html body .main-content .dash-hero .sub,
    html body .main-content .ct-hero p, html body .main-content .tpl-hero p { font-size: 13px; }
    html body .main-content .ark-hero .btn, html body .main-content .dash-hero .btn,
    html body .main-content .ct-hero .btn, html body .main-content .tpl-hero .btn {
        flex: 1 1 auto; justify-content: center; font-size: .86rem; padding: .5rem .8rem;
    }
    html body .main-content .ark-hero .dropdown, html body .main-content .tpl-hero .dropdown { flex: 1 1 auto; }
    html body .main-content .ark-hero .dropdown .btn, html body .main-content .tpl-hero .dropdown .btn { width: 100%; }
    html body .main-content .ark-chip { font-size: 11px; }

    /* Indicadores: etiquetas en dos líneas si hace falta */
    html body .main-content .dash-kpi .lbl, html body .main-content .ct-kpi .lbl,
    html body .main-content .cp-kpi .lbl { white-space: normal !important; line-height: 1.2; }
    html body .main-content .dash-kpi, html body .main-content .ct-kpi, html body .main-content .cp-kpi { padding: 12px; gap: 10px; }
    html body .main-content .dash-kpi .num, html body .main-content .ct-kpi .num, html body .main-content .cp-kpi .num { font-size: 18px; }

    /* Tarjetas y encabezados de tarjetas */
    html body .main-content .dash-card, html body .main-content .ct-card { padding: 14px; }
    html body .main-content .dash-card-head > div:first-child { flex: 1 1 100%; }
    html body .main-content .dash-chip { white-space: normal; }
    html body .main-content .dash-chart { height: 220px; }
    html body .main-content .dash-chart.lg { height: 240px; }
    html body .main-content .card-body { padding: 14px; }
    html body .main-content .card-header { padding: 12px 14px !important; }

    /* Buscadores y filtros ocupan todo el ancho */
    html body .main-content .cp-search, html body .main-content .tpl-search { min-width: 0; width: 100%; }
    html body .main-content .tpl-chips, html body .main-content .cp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }

    /* DataTables: controles apilados */
    html body .main-content .dataTables_wrapper .row > div { text-align: left !important; }
    html body .main-content .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
    html body .main-content .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; }
    html body .main-content .table > thead th, html body .main-content .table > tbody td { padding: 10px; font-size: 13px; }

    /* Grupos de botones */
    html body .main-content .btn-group { flex-wrap: wrap; }
    html body .main-content .d-flex.gap-2 { flex-wrap: wrap; }

    /* Modales a casi pantalla completa */
    html body .modal .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    html body .modal .modal-body { padding: 16px; }
    html body .modal .modal-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    html body .modal .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
    html body .modal iframe { max-height: 65vh; }
    html body #previewModal .tpl-preview-stage, html body .pv-stage { padding: 8px; }
}

/* ---------- Celular pequeño (≤ 400px) ---------- */
@media (max-width: 400px) {
    html body .main-content .dash-kpis, html body .main-content .ct-kpis, html body .main-content .cp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    html body .main-content .dash-kpi .ico, html body .main-content .ct-kpi .ico, html body .main-content .cp-kpi .ico { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
}

/* ---------- Retoques finales ---------- */
@media (max-width: 767.98px) {
    /* El botón de menú (☰) es flotante en celular: dejar espacio para no tapar el título */
    html body .header .header-left { padding-left: 46px; }
}
/* Tarjeta "Nueva plantilla" con los colores de la plataforma */
html body .main-content .tpl-new-card { border-color: #a7f3d0; background: linear-gradient(180deg, #f7fefb, #ecfdf5); color: #047857; }
html body .main-content .tpl-new-card:hover { border-color: #10b981; color: #065f46; }
html body .main-content .tpl-new-card .ico { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 18px rgba(16,185,129,.3); }