/* Capa responsive transversal, cargada tras los estilos propios de cada módulo. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.has-app-navigation,
body.has-app-navigation .shell,
body.has-app-navigation .page,
body.has-app-navigation .page-content,
body.has-app-navigation .page-content > *,
body.has-app-navigation .page-content section,
body.has-app-navigation .page-content article {
    min-width: 0;
}

.page-content img,
.page-content svg,
.page-content canvas,
.page-content video,
.page-content iframe {
    max-width: 100%;
}

.page-content :is(input, select, textarea, button) {
    max-width: 100%;
}

.page-content .cgb-responsive-chart {
    min-width: 0;
    max-width: 100%;
}

.page-content .cgb-responsive-chart > :is(canvas, svg) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

.page-content :is(.table-wrap, .data-table-wrap, .table-responsive, .nc-list, .bd-table-wrap, .et-table-wrap, .requests-table-wrap) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.page-content :is(.tabs, .module-tabs, .subnav, .section-tabs, .et-tabs, .ia-phase-nav, .op-tabs, .radar-tabs, [role="tablist"], .cgb-mobile-tab-strip) {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1100px) {
    html,
    body {
        overflow-x: clip;
    }

    body.has-app-navigation .page,
    body.has-app-navigation .page-content {
        width: 100%;
        max-width: 100vw;
    }

    .page-content :is(.nc, .bd-shell, .et-page, .pt-page, .tp-page, .op-shell, .oc-shell) {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .page-content .cgb-responsive-chart {
        width: 100%;
        overflow: hidden;
    }

    .page-content .cgb-responsive-chart > canvas {
        min-height: 220px;
    }

    .page-content {
        overflow-wrap: anywhere;
    }

    .page-content :is(.tabs, .module-tabs, .subnav, .section-tabs, .et-tabs, .ia-phase-nav, .op-tabs, .radar-tabs, [role="tablist"], .cgb-mobile-tab-strip) {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .page-content :is(.tabs, .module-tabs, .subnav, .section-tabs, .et-tabs, .ia-phase-nav, .op-tabs, .radar-tabs, [role="tablist"], .cgb-mobile-tab-strip) > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .cgb-responsive-table-wrap {
        overflow: visible !important;
    }

    table.cgb-responsive-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    table.cgb-responsive-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table.cgb-responsive-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    table.cgb-responsive-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        padding: 6px 14px;
        overflow: hidden;
        border: 1px solid #d8e4ed !important;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(15, 53, 76, 0.045);
    }

    table.cgb-responsive-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e7eef4 !important;
        text-align: right !important;
        white-space: normal !important;
    }

    table.cgb-responsive-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    table.cgb-responsive-table tbody td::before {
        content: attr(data-label);
        color: #62768a;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.055em;
        line-height: 1.35;
        text-align: left;
        text-transform: uppercase;
    }

    table.cgb-responsive-table tbody td:empty {
        display: none !important;
    }

    table.cgb-responsive-table tbody td > * {
        min-width: 0;
        max-width: 100%;
        justify-self: end;
    }

    table.cgb-responsive-table tbody td :is(a, button, strong, small, span, p) {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    table.cgb-responsive-table tbody td :is(input, select, textarea) {
        width: 100%;
    }

    table.cgb-responsive-table tbody tr.cgb-responsive-table__empty {
        display: block;
        padding: 20px;
    }

    table.cgb-responsive-table tbody tr.cgb-responsive-table__empty td {
        display: block !important;
        padding: 0 !important;
        text-align: center !important;
    }

    table.cgb-responsive-table tbody tr.cgb-responsive-table__empty td::before {
        display: none;
    }

    .page-content :is(.btn, .button, button, [role="button"]) {
        min-height: 42px;
        white-space: normal;
    }

    .page-content :is(.card, .panel, .panel-card, .module-card, .stat-card) {
        min-width: 0;
    }
}

/*
 * Cabecera móvil: conserva las tres acciones sin recortar la sesión ni
 * empujar el contenido fuera del viewport. En teléfonos estrechos las
 * acciones pasan a una segunda fila completa y siguen siendo táctiles.
 */
@media (max-width: 560px) {
    body.has-app-navigation .topbar {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        min-height: 0;
        padding: 10px 14px 11px;
    }

    body.has-app-navigation .topbar > div:not(.topbar-account-actions) {
        min-width: 0;
    }

    body.has-app-navigation .topbar h1 {
        width: 100%;
        max-width: none;
        font-size: 18px;
    }

    body.has-app-navigation .topbar-account-actions {
        grid-column: 3;
        display: flex;
        width: auto;
        margin: 0;
        gap: 6px;
    }

    body.has-app-navigation .topbar-account-actions form {
        width: auto;
        min-width: 0;
    }

    body.has-app-navigation .topbar-account-actions .btn {
        width: auto;
        min-height: 40px;
        padding: 7px 9px;
        font-size: 11px;
        white-space: normal;
    }

    body.has-app-navigation .topbar-account-actions .topbar-logout {
        min-width: 48px;
        font-size: 0 !important;
    }

    body.has-app-navigation .topbar-account-actions .topbar-logout::after {
        content: "Salir";
        font-size: 11px;
    }
}

/* Las tarjetas con decoración desplazada no deben falsear el ancho útil. */
@media (max-width: 860px) {
    .page-content :is(
        .portal-simple-card,
        .op2-kpi,
        .dirx-hero,
        .cdb-hero,
        .bd-hero,
        .budget-hero,
        .meet-hero
    ) {
        max-width: 100%;
    }

    .page-content :is(.op2-kpi, .portal-simple-card) {
        overflow: clip;
    }

    .page-content :is(.dirx-hero, .cdb-hero, .bd-hero, .budget-hero, .meet-hero) {
        background-clip: padding-box;
    }
}

/*
 * En 320–390 px una tabla tradicional no es operable. Esta capa gana a los
 * min-width propios de cada módulo y presenta cada registro como ficha.
 */
@media (max-width: 860px) {
    .page-content table.cgb-responsive-table tbody tr {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .page-content table.cgb-responsive-table tbody :is(th, td) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .page-content table.cgb-responsive-table tbody td::before {
        overflow-wrap: anywhere;
    }

    .page-content table.cgb-responsive-table tbody td > :is(div, form, fieldset) {
        width: 100%;
    }

    .page-content table.cgb-responsive-table tbody :is(.table-sub, small, .pill, .table-link) {
        font-size: 10px !important;
        line-height: 1.4;
    }

    .page-content table.cgb-responsive-table tbody td :is(a, button) {
        min-height: 40px;
        padding-block: 9px;
    }
}

@media (max-width: 860px) {
    .page-content :is(.nc-field > span, .nc label > span, .nc-info span) {
        font-size: 10px !important;
        line-height: 1.4;
    }

    .page-content :is(.plain-status, .plain-status.missing) {
        font-size: 10px !important;
        line-height: 1.4;
    }

    .page-content .requests-center__origin,
    .page-content .requests-center__actions > a {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Revisión documental: el filtro de diez campos necesitaba una sola columna. */
@media (max-width: 560px) {
    .page-content .cr {
        width: 100%;
        max-width: 100%;
    }

    .page-content .cr-head {
        width: 100%;
        padding: 20px 18px;
        gap: 14px;
    }

    .page-content .cr-head > div,
    .page-content .cr-engine {
        width: 100%;
        min-width: 0;
    }

    .page-content .cr-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        padding: 12px;
    }

    .page-content .cr-toolbar > *,
    .page-content .cr-field {
        grid-column: auto !important;
        width: 100%;
        min-width: 0;
    }

    .page-content .cr-toolbar :is(.cr-btn, button, a) {
        width: 100%;
    }

    .page-content .cr-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Los mapas desplazan teselas por diseño; su lienzo sí debe quedar contenido. */
@media (max-width: 860px) {
    .page-content .leaflet-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* Métricas y gráficas: una columna real en teléfonos compactos. */
@media (max-width: 380px) {
    .page-content .op2-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .page-content .op2-kpi {
        min-height: 118px;
    }

    .page-content .op2-chart-wrap {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .page-content .op2-chart-labels {
        min-width: 520px;
        gap: 0;
    }

    .page-content .op2-line-chart {
        min-width: 520px;
    }

    .page-content .global-request-alert {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
    }
}

/* No se debe medir ni reservar la fila de cabecera una vez convertida a fichas. */
@media (max-width: 860px) {
    .page-content table.cgb-responsive-table thead,
    .page-content table.cgb-responsive-table thead tr,
    .page-content table.cgb-responsive-table thead th {
        max-width: 1px !important;
        min-width: 0 !important;
    }
}

/*
 * Mobile legibility for the two densest operational workspaces.
 * Their desktop views deliberately use compact 7–9 px metadata; on touch
 * screens that density becomes illegible, so only the supporting labels are
 * enlarged while titles, values and the desktop composition remain intact.
 */
@media (max-width: 860px) {
  .op2-shell :is(
    .op2-average-journey > div:first-child > span,
    .op2-average-journey > small,
    .op2-average-time-values span,
    .op2-average-time-legend span,
    .op2-comparable-metrics span,
    .op2-comparable-metrics small,
    .op2-tech-stats span,
    .op2-table-wrap th,
    .op2-review-priorities-head p,
    .op2-review-priorities-head > b,
    .op2-review-column-head span,
    .op2-review-technicians p,
    .op2-review-technicians small,
    .op2-review-technicians > div > span,
    .op2-review-routes > div > span b,
    .op2-review-routes > div > span small,
    .op2-review-routes strong,
    .op2-review-routes em,
    .op2-route-incidents-head > div:first-child > span,
    .op2-route-incidents-head p,
    .op2-route-incidents-head > div:last-child span,
    .op2-incident-route-list > div > span b,
    .op2-incident-route-list > div > span small,
    .op2-incident-route-list > div > small,
    .op2-route-method-note,
    .op2-executive-reading header > div:first-child > span,
    .op2-executive-reading header > div:last-child span,
    .op2-executive-evidence span,
    .op2-executive-priorities > article > span,
    .op2-executive-reading footer,
    .op2-reading-evidence span,
    .op2-reading-detail > span,
    .op2-team-comparison > header > div:first-child > span,
    .op2-team-comparison-controls label > span,
    .op2-team-comparison-summary span,
    .op2-team-comparison-summary b,
    .op2-team-comparison-list article > b,
    .op2-team-comparison-list .op2-comparison-technician small,
    .op2-team-comparison > footer,
    .op2-analysis-state
  ) {
    font-size: 10px !important;
    line-height: 1.4;
  }

  .op2-shell :is(
    .op2-health-interpretation > div > span,
    .op2-health-interpretation li,
    .op2-chart-metrics button,
    .op2-chart-labels,
    .op2-chart-stats span,
    .op2-chart-stats small,
    .op2-capacity-gauge span,
    .op2-capacity-formula span,
    .op2-capacity-formula small,
    .op2-capacity-scale span,
    .op2-capacity-scale strong
  ) {
    font-size: 10px !important;
    line-height: 1.4;
  }

  .op2-shell small {
    font-size: 10px;
    line-height: 1.45;
  }

  .op2-shell :is(
    .op2-review-technicians p,
    .op2-review-technicians small,
    .op2-route-incidents-head p,
    .op2-route-method-note,
    .op2-executive-reading footer,
    .op2-team-comparison > footer
  ) {
    line-height: 1.55;
  }

  .cr :is(
    .cr-field > span,
    .cr-bulk label > span,
    .cr-table th,
    .cr-data span
  ) {
    font-size: 10px !important;
    line-height: 1.4;
  }

  .cr :is(.cr-field, .cr-bulk label) {
    gap: 7px;
  }

  /*
   * Administrative inline editors are 260 px wide on desktop. Inside a
   * stacked table card they must use the card's available width instead.
   */
  .page-content .edit-inline-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-content .edit-inline-form :is(label, input, select, textarea, button) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .page-content .edit-inline-form input[type="checkbox"],
  .page-content .edit-inline-form input[type="radio"] {
    width: auto;
  }
}