/*
 Sistema visual unificado (2026-11-08). Superficies planas y negro para la accion, al estilo de Uber;
 estados, chips y campos con relleno, al estilo de Material de Google.
 Se carga despues de moderno.css: quitar su enlace en system/addons/add_js.php devuelve el diseno anterior.
 El perfil 4 conserva su propio estilo (.p4-* en moderno.css).
*/

:root {
    --s-tinta: #0b0b0c;
    --s-tinta-2: #4b4f56;
    --s-tinta-3: #7c818a;
    --s-fondo: #f6f6f7;
    --s-superficie: #ffffff;
    --s-relleno: #eeeff1;
    --s-relleno-2: #e2e4e7;
    --s-linea: #e6e7ea;
    --s-accion: #000000;
    --s-accion-hover: #2a2b2e;
    --s-foco: #1a73e8;
    --s-foco-suave: #e8f0fe;
    --s-marca: #c3002f;
    --s-ok: #137333;
    --s-ok-suave: #e6f4ea;
    --s-aviso: #a35a00;
    --s-aviso-suave: #fef3d6;
    --s-error: #c5221f;
    --s-error-suave: #fce8e6;
    --s-info: #1967d2;
    --s-info-suave: #e8f0fe;
    --s-r-control: 10px;
    --s-r-tarjeta: 16px;
    --s-letra: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --s-dato: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Se reutilizan los nombres que ya leen general.css y moderno.css */
    --app-acento: var(--s-tinta);
    --app-tinta: var(--s-tinta);
    --app-tenue: var(--s-tinta-2);
    --app-borde: var(--s-linea);
    --app-fondo: var(--s-fondo);
    --app-superficie: var(--s-superficie);
    --app-radio: var(--s-r-tarjeta);
    --app-sombra: none;
    --app-sombra-alta: 0 24px 64px rgba(0, 0, 0, .22);
    --sidebar-bg: var(--s-superficie);
    --sidebar-active: var(--s-relleno);
    --page-bg: var(--s-fondo);
    --text-color: var(--s-tinta);

    --bs-body-font-family: var(--s-letra);
    --bs-body-color: var(--s-tinta);
    --bs-body-bg: var(--s-fondo);
    --bs-border-color: var(--s-linea);
    --bs-border-radius: var(--s-r-control);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-link-color: var(--s-foco);
    --bs-link-color-rgb: 26, 115, 232;
    --bs-link-hover-color: #1557b0;
    --bs-link-hover-color-rgb: 21, 87, 176;
    --bs-primary: #000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-focus-ring-color: rgba(26, 115, 232, .35);
}

body,
.modalWin,
.notifyjs-corner {
    font-family: var(--s-letra);
    font-size: 14.5px;
}

body:not(.perfil4) {
    background: var(--s-fondo);
    color: var(--s-tinta);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--s-letra);
    letter-spacing: -.015em;
    text-wrap: balance;
}

::selection {
    background: var(--s-foco-suave);
}

:focus-visible {
    outline: 3px solid var(--s-foco);
    outline-offset: 2px;
}

/* ===== Barra superior ===== */

body:not(.perfil4) .app-topbar {
    background: var(--s-superficie);
    border-bottom: 1px solid var(--s-linea);
    box-shadow: none;
}

.brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--s-tinta);
}

.user-area .user-name,
.user-area {
    font-weight: 600;
}

.boton-notif {
    background: var(--s-relleno) !important;
    border: 0 !important;
}

.notif-badge {
    background: var(--s-marca);
}

/* ===== Menu lateral claro ===== */

.app-sidebar,
.mobile-sidebar {
    background: var(--s-superficie) !important;
    border-right: 1px solid var(--s-linea);
    scrollbar-color: var(--s-relleno-2) transparent;
}


.app-sidebar .nav-link,
.mobile-sidebar .nav-link,
.app-sidebar .menu-toggle,
.mobile-sidebar .menu-toggle {
    color: var(--s-tinta-2);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
}

.app-sidebar .nav-link i,
.mobile-sidebar .nav-link i,
.app-sidebar .menu-toggle > i:first-child,
.mobile-sidebar .menu-toggle > i:first-child {
    color: var(--s-tinta-2);
}

.app-sidebar .nav-link:hover,
.mobile-sidebar .nav-link:hover,
.app-sidebar .menu-toggle:hover,
.mobile-sidebar .menu-toggle:hover,
.app-sidebar .submenu .nav-link:hover,
.mobile-sidebar .submenu .nav-link:hover {
    background: var(--s-fondo);
    color: var(--s-tinta);
}

.app-sidebar .nav-link.active,
.mobile-sidebar .nav-link.active,
.app-sidebar .submenu .nav-link.active,
.mobile-sidebar .submenu .nav-link.active {
    background: var(--s-relleno);
    color: var(--s-tinta);
    font-weight: 700;
}

.app-sidebar .nav-link.active i,
.mobile-sidebar .nav-link.active i {
    color: var(--s-tinta);
}

.app-sidebar .nav-link.active::after,
.mobile-sidebar .nav-link.active::after {
    display: none;
}

.app-sidebar .menu-toggle[aria-expanded="true"],
.mobile-sidebar .menu-toggle[aria-expanded="true"] {
    color: var(--s-tinta);
    font-weight: 600;
}

.app-sidebar .submenu .nav-link,
.mobile-sidebar .submenu .nav-link {
    color: var(--s-tinta-2);
    font-size: 13.5px;
}

.app-sidebar .submenu .nav-link::before,
.mobile-sidebar .submenu .nav-link::before {
    background: var(--s-relleno-2);
}

.app-sidebar .submenu .nav-link.active::before,
.mobile-sidebar .submenu .nav-link.active::before {
    background: var(--s-tinta);
}

.mobile-sidebar .btn-close {
    filter: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .app-sidebar.abierto,
    .app-sidebar:has(:focus-visible) {
        box-shadow: 12px 0 32px rgba(0, 0, 0, .12);
    }

    @media (hover: hover) {
        .app-sidebar:hover {
            box-shadow: 12px 0 32px rgba(0, 0, 0, .12);
        }
    }
}

/* ===== Area de contenido ===== */

body:not(.perfil4) .app-main {
    background: var(--s-fondo);
    padding: 28px 32px 40px;
}

@media (min-width: 1600px) {
    body:not(.perfil4) .app-main > * {
        max-width: 1480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== Encabezado de pantalla ===== */

.pagina-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 20px;
}

.modalWinContent .pagina-encabezado {
    padding: 4px 4px 0;
}

.pagina-encabezado-texto {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 320px;
    max-width: 72ch;
}

.pagina-migas {
    font-size: 13px;
    font-weight: 500;
    color: var(--s-tinta-3);
}

.pagina-titulo {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--s-tinta);
}

.modalWinContent .pagina-titulo {
    font-size: 24px;
}

.pagina-descripcion {
    margin: 0;
    font-size: 14.5px;
    color: var(--s-tinta-2);
}

.pagina-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.seccion-titulo {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--s-tinta);
}

.seccion-descripcion {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--s-tinta-2);
}

/* Encabezados anteriores: se igualan al nuevo aunque una vista no se haya migrado */
.page-title,
.titulo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--s-tinta);
}

.titulo2,
.titulo4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--s-tinta);
}


.page-subtitle,
.lbltxt {
    color: var(--s-tinta-2);
}

.lbltxt {
    font-size: 12.5px;
}

.bloque_titulo {
    padding: 14px 4px 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--s-tinta);
    border-bottom: 1px solid var(--s-linea);
}

/* ===== Superficies ===== */

.bloque2,
.dashboard-card,
.card {
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    box-shadow: none;
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--s-linea);
}

.dashboard-card {
    transition: border-color .15s ease, transform .15s ease;
}

@media (hover: hover) {
    .dashboard-card:hover {
        border-color: var(--s-relleno-2);
        box-shadow: none;
    }
}

.bloque3 {
    border-bottom-color: var(--s-linea);
}

.bloque3-seleccion:hover {
    background: var(--s-fondo);
}


hr {
    border-color: var(--s-linea);
    opacity: 1;
}

/* Tarjetas de cifras */


/* Rotulo pequeno en mayusculas. No se llama .etiqueta porque esa clase ya existe en general.css para las pastillas de color */
.rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.dato-mono {
    font-family: var(--s-dato);
    font-size: .92em;
}

/* ===== Botones: principal negro, secundario gris, texto, peligro ===== */

.btn {
    --bs-btn-font-family: var(--s-letra);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--s-r-control);
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(26, 115, 232, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}

.btn:active {
    transform: scale(.98);
}

.btn-sm {
    --bs-btn-padding-y: .38rem;
    --bs-btn-padding-x: .8rem;
    --bs-btn-font-size: .86rem;
    --bs-btn-border-radius: 9px;
    min-height: 34px;
}

.btn.btn-solo-icono {
    min-width: 38px;
    padding-left: 0;
    padding-right: 0;
}

.btn-sm.btn-solo-icono {
    min-width: 34px;
}

.btn {
    white-space: nowrap;
}

.btn > i.p-1 {
    padding: 0 !important;
}

.btn-primary,
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--s-accion);
    --bs-btn-border-color: var(--s-accion);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--s-accion-hover);
    --bs-btn-hover-border-color: var(--s-accion-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9aa0a8;
    --bs-btn-disabled-border-color: #9aa0a8;
}

.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-light {
    --bs-btn-color: var(--s-tinta);
    --bs-btn-bg: var(--s-relleno);
    --bs-btn-border-color: var(--s-relleno);
    --bs-btn-hover-color: var(--s-tinta);
    --bs-btn-hover-bg: var(--s-relleno-2);
    --bs-btn-hover-border-color: var(--s-relleno-2);
    --bs-btn-active-color: var(--s-tinta);
    --bs-btn-active-bg: #d5d8dc;
    --bs-btn-active-border-color: #d5d8dc;
    --bs-btn-disabled-color: var(--s-tinta-3);
    --bs-btn-disabled-bg: var(--s-relleno);
    --bs-btn-disabled-border-color: var(--s-relleno);
}

.btn-link {
    --bs-btn-color: var(--s-foco);
    --bs-btn-hover-color: #1557b0;
    text-decoration: none;
    font-weight: 600;
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--s-error);
    --bs-btn-bg: var(--s-error-suave);
    --bs-btn-border-color: var(--s-error-suave);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--s-error);
    --bs-btn-hover-border-color: var(--s-error);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a50e0e;
    --bs-btn-active-border-color: #a50e0e;
}

.btn-success,
.btn-outline-success {
    --bs-btn-color: var(--s-ok);
    --bs-btn-bg: var(--s-ok-suave);
    --bs-btn-border-color: var(--s-ok-suave);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--s-ok);
    --bs-btn-hover-border-color: var(--s-ok);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d5226;
    --bs-btn-active-border-color: #0d5226;
}

.btn-warning,
.btn-outline-warning {
    --bs-btn-color: var(--s-aviso);
    --bs-btn-bg: var(--s-aviso-suave);
    --bs-btn-border-color: var(--s-aviso-suave);
    --bs-btn-hover-color: var(--s-tinta);
    --bs-btn-hover-bg: #fbe3a6;
    --bs-btn-hover-border-color: #fbe3a6;
}

.btn-info,
.btn-outline-info {
    --bs-btn-color: var(--s-info);
    --bs-btn-bg: var(--s-info-suave);
    --bs-btn-border-color: var(--s-info-suave);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--s-info);
    --bs-btn-hover-border-color: var(--s-info);
}

.btn-group > .btn {
    transform: none;
}

/* Grupos de opciones tipo chip (Google) */
.btn-check + .btn,
.btn-group .btn-check + .btn {
    --bs-btn-bg: var(--s-superficie);
    --bs-btn-border-color: var(--s-linea);
    --bs-btn-color: var(--s-tinta);
}

.btn-check:checked + .btn {
    --bs-btn-active-bg: var(--s-accion);
    --bs-btn-active-border-color: var(--s-accion);
    --bs-btn-active-color: #fff;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-tinta);
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 999px;
}

.chip.activo,
.chip[aria-pressed="true"] {
    color: #fff;
    background: var(--s-accion);
    border-color: var(--s-accion);
}

/* ===== Estados ===== */

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .7em;
    --bs-badge-padding-y: .38em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.badge.bg-success, .badge.text-bg-success { background: var(--s-ok-suave) !important; color: var(--s-ok) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--s-aviso-suave) !important; color: var(--s-aviso) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--s-error-suave) !important; color: var(--s-error) !important; }
.badge.bg-primary, .badge.text-bg-primary,
.badge.bg-info, .badge.text-bg-info { background: var(--s-info-suave) !important; color: var(--s-info) !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-light, .badge.text-bg-light { background: var(--s-relleno) !important; color: var(--s-tinta-2) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--s-accion) !important; color: #fff !important; }

.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

.estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.estado-ok { background: var(--s-ok-suave); color: var(--s-ok); }
.estado-aviso { background: var(--s-aviso-suave); color: var(--s-aviso); }
.estado-error { background: var(--s-error-suave); color: var(--s-error); }
.estado-neutro { background: var(--s-relleno); color: var(--s-tinta-2); }

.alert {
    --bs-alert-border-radius: 12px;
    border: 0;
    font-weight: 500;
}

.alert-primary, .alert-info { --bs-alert-bg: var(--s-info-suave); --bs-alert-color: #174ea6; }
.alert-success { --bs-alert-bg: var(--s-ok-suave); --bs-alert-color: #0d5226; }
.alert-warning { --bs-alert-bg: var(--s-aviso-suave); --bs-alert-color: #7a4300; }
.alert-danger { --bs-alert-bg: var(--s-error-suave); --bs-alert-color: #a50e0e; }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: var(--s-relleno); --bs-alert-color: var(--s-tinta); }

/* ===== Campos con relleno ===== */

.form-control,
.form-select {
    background-color: var(--s-relleno);
    border: 2px solid transparent;
    border-radius: var(--s-r-control);
    color: var(--s-tinta);
    font-family: var(--s-letra);
}

.form-control::placeholder {
    color: var(--s-tinta-3);
}

.form-control:hover,
.form-select:hover {
    background-color: #e7e8eb;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--s-superficie);
    border-color: var(--s-foco);
    box-shadow: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--s-fondo);
    color: var(--s-tinta-2);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
input.error,
select.error,
textarea.error {
    background-color: var(--s-error-suave);
    border-color: var(--s-error) !important;
}

label.error,
.invalid-feedback {
    color: var(--s-error);
    font-size: 12.5px;
    font-weight: 500;
}

.form-label,
.col-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--s-tinta);
}

.form-text {
    color: var(--s-tinta-3);
}

.form-floating > label {
    color: var(--s-tinta-3);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--s-tinta-2);
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: transparent;
}

.form-check-input {
    border-color: #b8bcc3;
}

.form-check-input:checked {
    background-color: var(--s-accion);
    border-color: var(--s-accion);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, .3);
    border-color: var(--s-foco);
}

.input-group-text {
    background: var(--s-relleno);
    border: 2px solid transparent;
    color: var(--s-tinta-2);
}

.input-group > .form-control + .btn,
.input-group > .btn {
    border-width: 2px;
}

/* ===== Listas y tablas ===== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--s-tinta);
    --bs-table-border-color: var(--s-linea);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--s-fondo);
    --bs-table-hover-color: var(--s-tinta);
    font-size: 14px;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
    vertical-align: middle;
}

.table-sm > :not(caption) > * > * {
    padding: .55rem .6rem;
}

.table > thead,
.table > thead.table-dark,
.table-dark > thead,
.table > thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--s-tinta-3);
    --bs-table-border-color: var(--s-linea);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--s-tinta-3);
}

.table > thead > tr > th,
.table > thead > tr > td,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
.td_cabecera {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s-tinta-3) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--s-linea) !important;
    white-space: nowrap;
}

.table > tbody > tr {
    border-bottom-color: var(--s-linea) !important;
    border-bottom-width: 1px !important;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
}

.table-hover > tbody > tr:hover > *,
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
    --bs-table-bg-state: var(--s-fondo);
    box-shadow: none !important;
}

.td_cuerpo {
    border-color: var(--s-linea);
}

/* Las celdas con solo botones quedan pegadas a la derecha y sin estirarse */
.table td:has(> .btn:only-child),
.table td:has(> .btn + .btn) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table .btn-sm.btn-solo-icono {
    min-height: 32px;
    min-width: 32px;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
}

.table .btn-sm.btn-solo-icono:hover {
    --bs-btn-hover-bg: var(--s-relleno);
}

.table .btn-sm .bi-trash,
.table .btn-sm .bi-trash3,
.table .btn-sm .bi-x-lg {
    color: var(--s-error);
}

/* DataTables */
div.dataTables_wrapper {
    font-size: 14px;
}

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_info {
    color: var(--s-tinta-2);
    font-size: 13px;
    font-weight: 500;
}

div.dataTables_wrapper div.dataTables_filter label {
    position: relative;
    font-size: 0;
}

div.dataTables_wrapper div.dataTables_filter label::before {
    content: "\F52A";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "bootstrap-icons";
    font-size: 14px;
    color: var(--s-tinta-3);
    pointer-events: none;
}

div.dataTables_wrapper div.dataTables_filter input {
    height: 40px;
    padding: 6px 14px 6px 38px;
    font-size: 14px;
    background: var(--s-relleno);
    border: 2px solid transparent;
    border-radius: 999px;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    background: var(--s-superficie);
    border-color: var(--s-foco);
    box-shadow: none;
}

div.dataTables_wrapper div.dataTables_length select {
    background-color: var(--s-relleno);
    border: 2px solid transparent;
    border-radius: 9px;
}

div.dt-buttons {
    display: inline-flex;
    gap: 6px;
}

div.dt-buttons > .btn,
div.dt-buttons > .dt-button,
div.dt-buttons .btn-group > .btn {
    --bs-btn-color: var(--s-tinta);
    --bs-btn-bg: var(--s-relleno);
    --bs-btn-border-color: var(--s-relleno);
    --bs-btn-hover-bg: var(--s-relleno-2);
    --bs-btn-hover-border-color: var(--s-relleno-2);
    --bs-btn-hover-color: var(--s-tinta);
    font-size: 13px;
    border-radius: 999px !important;
    padding: 6px 14px;
    margin: 0;
}

div.dt-buttons.btn-group {
    gap: 6px;
}

.pagination {
    --bs-pagination-color: var(--s-tinta);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--s-tinta);
    --bs-pagination-hover-bg: var(--s-relleno);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--s-tinta);
    --bs-pagination-focus-bg: var(--s-relleno);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(26, 115, 232, .3);
    --bs-pagination-active-bg: var(--s-accion);
    --bs-pagination-active-border-color: var(--s-accion);
    --bs-pagination-disabled-color: var(--s-tinta-3);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
}

.pagination .page-link {
    border-radius: 9px !important;
    min-width: 36px;
    text-align: center;
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after {
    opacity: .35;
}

/* Listas con filas (list-group) */
.list-group {
    --bs-list-group-border-color: var(--s-linea);
    --bs-list-group-border-radius: var(--s-r-tarjeta);
    --bs-list-group-action-hover-bg: var(--s-fondo);
    --bs-list-group-active-bg: var(--s-accion);
    --bs-list-group-active-border-color: var(--s-accion);
}

/* Estado vacio */
.vacio-estado {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 40px 16px;
    text-align: center;
    color: var(--s-tinta-2);
}

.vacio-estado > i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    font-size: 24px;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 50%;
}

.vacio-estado b {
    color: var(--s-tinta);
    font-size: 15px;
}

/* ===== Pestanas tipo Google ===== */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--s-linea);
    --bs-nav-tabs-link-active-color: var(--s-tinta);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    gap: 4px;
}

.nav-tabs .nav-link {
    color: var(--s-tinta-2);
    font-weight: 600;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--s-tinta);
}

.nav-pills {
    --bs-nav-pills-border-radius: 999px;
    --bs-nav-pills-link-active-bg: var(--s-accion);
    --bs-nav-pills-link-active-color: #fff;
    gap: 6px;
}

.nav-pills .nav-link {
    color: var(--s-tinta);
    font-weight: 600;
    background: var(--s-relleno);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--s-relleno);
    --bs-dropdown-link-active-color: var(--s-tinta);
    --bs-dropdown-link-hover-bg: var(--s-fondo);
    padding: 6px;
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.dropdown-item {
    border-radius: 8px;
    font-weight: 500;
}

.progress {
    --bs-progress-bg: var(--s-relleno);
    --bs-progress-bar-bg: var(--s-accion);
    border-radius: 999px;
}

/* ===== Modales del sistema ===== */

.modalSplashWin {
    background: rgba(0, 0, 0, .45);
}

.modalWin {
    border-radius: 20px;
}

.modalWinTitle {
    height: 52px;
}

.modalWinContent {
    top: 52px;
}

.modalWinCloseBtn {
    top: 10px;
    right: 12px;
    color: var(--s-tinta);
    background: var(--s-relleno);
}

.modalWinCloseBtn:hover {
    background: var(--s-relleno-2);
}

.modalWinContent .bloque2 {
    border-color: var(--s-linea);
}

.box_confirm {
    border-radius: 20px;
    font-family: var(--s-letra);
}

.modal-content {
    border: 0;
    border-radius: 20px;
}

.modal-header,
.modal-footer {
    border-color: var(--s-linea);
}

.modal-title {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ===== Barra inferior ===== */

.app-bottombar button {
    color: var(--s-tinta-3);
    font-weight: 600;
}

.app-bottombar button:active,
.app-bottombar button.activo {
    color: var(--s-tinta);
}

/* ===== Celular ===== */

@media (max-width: 767.98px) {
    body:not(.perfil4) .app-main {
        padding: 18px 14px calc(var(--app-barra-inferior) + var(--seguro-abajo) + 18px);
    }

    .pagina-encabezado {
        align-items: stretch;
        margin-bottom: 16px;
    }

    .pagina-titulo {
        font-size: 24px;
    }

    .pagina-acciones {
        width: 100%;
    }

    .pagina-acciones .btn-primary,
    .pagina-acciones .btn-dark {
        flex: 1 1 auto;
    }

    .modalWinTitle {
        height: calc(52px + var(--seguro-arriba));
    }

    .modalWinContent {
        top: calc(52px + var(--seguro-arriba));
    }

    .modalWin {
        border-radius: 0;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        max-width: none;
    }

    /* Listas convertidas en tarjetas: las arma interfaz.js con el texto de cada encabezado */
    table.tabla-tarjetas,
    table.tabla-tarjetas > tbody,
    table.tabla-tarjetas > tbody > tr,
    table.tabla-tarjetas > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    table.tabla-tarjetas {
        min-width: 0 !important;
        border: 0;
    }

    table.tabla-tarjetas > thead {
        display: none;
    }

    /* Primera linea: titulo y acciones; debajo, cada dato con su etiqueta */
    table.tabla-tarjetas > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 8px;
        margin: 0 0 10px;
        padding: 12px 14px;
        background: var(--s-superficie);
        border: 1px solid var(--s-linea) !important;
        border-radius: 14px;
    }

    table.tabla-tarjetas > tbody > tr > td {
        order: 2;
        flex: 1 1 100%;
        display: flex;
        gap: 10px;
        align-items: baseline;
        justify-content: space-between;
        padding: 3px 0 !important;
        border: 0 !important;
        text-align: right !important;
        overflow-wrap: anywhere;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.tabla-tarjetas > tbody > tr > td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        flex: none;
        max-width: 45%;
        font-size: 12px;
        font-weight: 600;
        color: var(--s-tinta-3);
        text-align: left;
    }

    /* La primera columna con texto hace de titulo de la tarjeta */
    table.tabla-tarjetas > tbody > tr > td.tarjeta-titulo {
        order: 0;
        flex: 1 1 0;
        min-width: 0;
        display: block;
        padding-bottom: 6px !important;
        font-size: 15.5px;
        font-weight: 700;
        text-align: left !important;
    }

    table.tabla-tarjetas > tbody > tr > td.tarjeta-titulo::before {
        display: none;
    }

    table.tabla-tarjetas > tbody > tr > td.tarjeta-vacia {
        display: none;
    }

    table.tabla-tarjetas > tbody > tr > td.tarjeta-acciones {
        order: 1;
        flex: 0 0 auto;
        justify-content: flex-end;
        width: auto !important;
        gap: 4px;
        padding: 0 !important;
    }

    table.tabla-tarjetas > tbody > tr > td.tarjeta-acciones::before {
        display: none;
    }

    table.tabla-tarjetas > tbody > tr > td.dataTables_empty {
        justify-content: center;
        color: var(--s-tinta-2);
    }

    /* DataTables con desplazamiento separa el encabezado en otra tabla: en tarjetas sobra */
    .dataTables_scroll:has(table.tabla-tarjetas) .dataTables_scrollHead,
    .dataTables_scroll:has(table.tabla-tarjetas) .dataTables_scrollFoot {
        display: none !important;
    }

    .dataTables_scroll:has(table.tabla-tarjetas) .dataTables_scrollBody {
        overflow: visible !important;
        border: 0 !important;
    }

    .dataTables_scroll:has(table.tabla-tarjetas) .dataTables_scrollBody > table > thead {
        display: none;
    }

    .tabla-tarjetas-contenedor,
    .tabla-tarjetas-contenedor.table-responsive {
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active {
        transform: none;
    }
}

/* ===== Ajustes tras la primera revision ===== */

/* Sin rejilla vertical: solo separadores entre filas */
.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0 !important;
}

.table-bordered > :not(caption) > * {
    border-width: 0 !important;
}

.table .btn-sm > i:only-child {
    color: var(--s-tinta);
}

.table .btn-sm > i.bi-trash:only-child,
.table .btn-sm > i.bi-trash3:only-child,
.table .btn-sm > i.bi-trash-fill:only-child,
.table .btn-sm > i.bi-x-lg:only-child {
    color: var(--s-error);
}

/* Lectura de izquierda a derecha, como en las listas de Uber y Google */
.app-main .table > thead > tr > .text-center,
.app-main .table > tbody > tr > .text-center,
.app-main .table > thead > tr > [align="center"],
.app-main .table > tbody > tr > [align="center"],
.modalWinContent .table > thead > tr > .text-center,
.modalWinContent .table > tbody > tr > .text-center {
    text-align: left !important;
}

.app-main .table > tbody > tr > td:has(> .btn:only-child),
.modalWinContent .table > tbody > tr > td:has(> .btn:only-child) {
    text-align: right !important;
}

/* ===== Panel principal ===== */

.inicio-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    font-size: 22px;
    color: var(--s-tinta);
    background: var(--s-relleno);
    border-radius: 14px;
}

.inicio-mapa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 20px 22px;
}

.inicio-mapa .inicio-texto {
    flex: 1 1 260px;
    min-width: 0;
}

.inicio-acceso {
    display: grid;
    gap: 6px;
    justify-items: start;
    width: 100%;
    height: 100%;
    padding: 20px 22px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.inicio-acceso .inicio-icono {
    margin-bottom: 8px;
}

.inicio-ir {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--s-tinta);
}

.inicio-ir i {
    transition: transform .15s ease;
}

@media (hover: hover) {
    .inicio-acceso:hover {
        border-color: var(--s-tinta) !important;
    }

    .inicio-acceso:hover .inicio-ir i {
        transform: translateX(3px);
    }
}

/* Tamano de letra uniforme en listas: varias vistas lo reducian en linea hasta 0.7em */
.app-main table.table,
.modalWinContent table.table {
    font-size: 13.5px !important;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dt-buttons,
    div.dataTables_wrapper div.dt-buttons.btn-group {
        display: inline-flex;
        width: auto;
        margin-bottom: 8px;
    }

    div.dataTables_wrapper div.dt-buttons > .btn {
        flex: 0 0 auto;
    }

    div.dataTables_wrapper .row > [class*="col-"]:has(> .dt-buttons) {
        text-align: left !important;
    }
}


/* ===== Encabezados de formularios y modales: titulo a la izquierda, acciones a la derecha, en una sola linea ===== */

.bloque_titulo > .container-fluid > .row:has(> :nth-child(2):last-child) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.bloque_titulo > .container-fluid > .row:has(> :nth-child(2):last-child) > [class*="col"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

.bloque_titulo > .container-fluid > .row:has(> :nth-child(2):last-child) > :first-child {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.bloque_titulo > .container-fluid > .row:has(> :nth-child(2):last-child) > :last-child {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.bloque_titulo > .container-fluid {
    padding: 0;
}

.modalWinContent .bloque_titulo {
    padding: 14px 20px;
}

/* Formularios: mismas separaciones y alturas en todos los campos */
.modalWinContent form .container-fluid > .row {
    row-gap: 4px;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: 56px;
    min-height: 56px;
}

.form-floating > textarea.form-control {
    height: auto;
    min-height: 96px;
}

.form-floating > label {
    padding-top: 1rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modalWinContent .bloque2.m-2,
.modalWinContent .bloque2.m-3 {
    margin: 12px 16px !important;
}

/* Nada se sale de su caja: textos largos se parten y los botones conservan su texto */
.app-main .bloque2,
.modalWinContent .bloque2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-main .bloque2 table,
.modalWinContent .bloque2 table {
    overflow-wrap: normal;
}

/* ===== Modales con encabezado propio: sin franja vacia, titulo alineado con la X y fijo al desplazarse ===== */

.modalWin:has(> .modalWinContent > form > div.bloque_titulo:first-of-type),
.modalWin:has(> .modalWinContent > div.bloque_titulo:first-of-type),
.modalWin:has(> .modalWinContent > form > .pagina-encabezado:first-of-type),
.modalWin:has(> .modalWinContent > .pagina-encabezado:first-of-type) {
    --modal-con-encabezado: 1;
}

.modalWin:has(> .modalWinContent > form > div.bloque_titulo:first-of-type) > .modalWinTitle,
.modalWin:has(> .modalWinContent > div.bloque_titulo:first-of-type) > .modalWinTitle,
.modalWin:has(> .modalWinContent > form > .pagina-encabezado:first-of-type) > .modalWinTitle,
.modalWin:has(> .modalWinContent > .pagina-encabezado:first-of-type) > .modalWinTitle {
    height: 0 !important;
    background: transparent !important;
    z-index: 3;
}

.modalWin:has(> .modalWinContent > form > div.bloque_titulo:first-of-type) > .modalWinContent,
.modalWin:has(> .modalWinContent > div.bloque_titulo:first-of-type) > .modalWinContent,
.modalWin:has(> .modalWinContent > form > .pagina-encabezado:first-of-type) > .modalWinContent,
.modalWin:has(> .modalWinContent > .pagina-encabezado:first-of-type) > .modalWinContent {
    top: var(--seguro-arriba, 0px) !important;
}

.modalWinContent > form > div.bloque_titulo:first-of-type,
.modalWinContent > div.bloque_titulo:first-of-type,
.modalWinContent > form > .pagina-encabezado:first-of-type,
.modalWinContent > .pagina-encabezado:first-of-type {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 60px;
    margin: 0;
    padding: 12px 64px 12px 20px;
    background: var(--s-superficie);
    border-bottom: 1px solid var(--s-linea);
}

.modalWinContent > form > .pagina-encabezado:first-of-type,
.modalWinContent > .pagina-encabezado:first-of-type {
    padding-top: 16px;
    padding-bottom: 16px;
}

.modalWinCloseBtn {
    top: 12px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
}

@media (max-width: 767.98px) {
    .modalWinCloseBtn {
        top: calc(12px + var(--seguro-arriba)) !important;
    }
}

/* Titulos de seccion dentro de un formulario */
.modalWinContent .bloque2 > .titulo,
.modalWinContent .titulo.p-3 {
    font-size: 17px;
    font-weight: 700;
    padding: 4px 0 12px !important;
    margin: 0 !important;
}

.modalWinContent .bloque2 {
    padding: 16px 20px !important;
}

/* Campos: todos alineados por su base, misma altura y la misma separacion */
.modalWinContent form .row {
    align-items: flex-end;
}

.modalWinContent form .row > [class*="col"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.modalWinContent form .form-floating,
.modalWinContent form .row > [class*="col"] > .form-control,
.modalWinContent form .row > [class*="col"] > .form-select,
.modalWinContent form .row > [class*="col"] > .input-group {
    margin-bottom: 16px !important;
}

.modalWinContent form .row > [class*="col"] > .form-control:not(textarea),
.modalWinContent form .row > [class*="col"] > .form-select {
    min-height: 56px;
}

.modalWinContent form .row > [class*="col"] > label:not(.error),
.modalWinContent form .row > [class*="col"] > .form-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-tinta-2);
}

.modalWinContent form > div:not(.bloque_titulo):not(.bloque2)[style*="padding"] {
    padding: 20px !important;
}

/* Tarjetas dentro de un modal: siempre con el mismo margen lateral */
.modalWinContent > form > .bloque2,
.modalWinContent > .bloque2 {
    margin: 16px !important;
}

@media (max-width: 767.98px) {
    /* Paginacion compacta en una sola linea: anterior, pagina actual y siguiente */
    div.dataTables_wrapper ul.pagination .paginate_button.page-item:not(.active):not(.previous):not(.next) {
        display: none;
    }

    div.dataTables_wrapper ul.pagination {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    table.tabla-tarjetas > tbody > tr > td.tarjeta-acciones i {
        font-size: 17px;
        padding: 4px;
    }
}

/* Pastillas de color existentes (.etiqueta en general.css): misma forma que los estados, conservan su color */
.etiqueta {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
}

/* ===== Buscador: campo y boton en una sola capsula, misma altura ===== */

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 460px;
    height: 44px;
    padding: 4px 4px 4px 14px;
    background: var(--s-relleno);
    border: 2px solid transparent;
    border-radius: 999px;
    transition: border-color .12s ease, background-color .12s ease;
}

.buscador:focus-within {
    background: var(--s-superficie);
    border-color: var(--s-foco);
}

.buscador > i {
    color: var(--s-tinta-3);
    font-size: 15px;
}

.buscador > input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: inherit;
    font-size: 14.5px;
    color: var(--s-tinta);
    background: transparent;
    border: 0;
    outline: 0;
}

.buscador > .btn {
    height: 32px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
}

/* ===== Directorio de usuarios ===== */

.usr-grupo {
    margin-bottom: 20px;
}

.usr-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.usr-cuenta {
    padding: 1px 8px;
    font-size: 11.5px;
    letter-spacing: 0;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 999px;
}

.usr-punto {
    width: 8px;
    height: 8px;
    background: #1e8e3e;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(30, 142, 62, .18);
}

.usr-lista {
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    overflow: hidden;
    background: var(--s-superficie);
}

.usr-lista:empty {
    display: none;
}

.usr-grupo .usr-lista {
    border-color: rgba(30, 142, 62, .35);
}

.usr-fila {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 190px 150px 16px;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--s-linea);
    cursor: pointer;
    transition: background-color .12s ease;
}

.usr-fila:last-child {
    border-bottom: 0;
}

.usr-fila:hover,
.usr-fila:focus-visible {
    background: var(--s-fondo);
}

.usr-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--s-relleno);
    border-radius: 50%;
}

.usr-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.usr-iniciales {
    font-size: 13px;
    font-weight: 700;
    color: var(--s-tinta-2);
}

.usr-avatar-enlinea::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    background: #1e8e3e;
    border: 2px solid var(--s-superficie);
    border-radius: 50%;
}

.usr-datos {
    min-width: 0;
}

.usr-nombre {
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--s-tinta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.usr-correo {
    overflow: hidden;
    font-size: 13px;
    color: var(--s-tinta-2);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.usr-cliente {
    margin-left: 6px;
    color: var(--s-tinta-3);
}

.usr-rol .etiqueta {
    font-size: 11.5px;
}

.usr-actividad {
    font-size: 12.5px;
    color: var(--s-tinta-3);
    text-align: right;
    white-space: nowrap;
}

.usr-activo {
    font-weight: 600;
    color: #1e8e3e;
}

.usr-nunca {
    color: var(--s-tinta-3);
}

.usr-flecha {
    font-size: 13px;
    color: var(--s-tinta-3);
}

@media (max-width: 991.98px) {
    .usr-fila {
        grid-template-columns: 40px minmax(0, 1fr) auto 16px;
        grid-template-areas: "foto datos actividad flecha" "foto rol rol flecha";
        row-gap: 4px;
    }

    .usr-avatar { grid-area: foto; }
    .usr-datos { grid-area: datos; }
    .usr-rol { grid-area: rol; }
    .usr-actividad { grid-area: actividad; }
    .usr-flecha { grid-area: flecha; }
}

@media (max-width: 575.98px) {
    .usr-fila {
        grid-template-columns: 40px minmax(0, 1fr) 12px;
        grid-template-areas: "foto datos flecha" "foto rol flecha" "foto actividad flecha";
        gap: 2px 12px;
        padding: 12px 14px;
    }

    .usr-actividad {
        text-align: left;
    }
}

/* ===== Buscador de DataTables convertido a capsula (lo arma interfaz.js) ===== */

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter label.buscador-dt {
    display: flex;
    width: 100%;
    max-width: 460px;
    margin: 0 0 12px;
    font-size: 14.5px;
}

div.dataTables_wrapper div.dataTables_filter label.buscador-dt::before {
    content: none;
}

div.dataTables_wrapper div.dataTables_filter label.buscador-dt input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
}

div.dataTables_wrapper div.dataTables_filter label.buscador-dt input:focus {
    background: transparent;
    border: 0;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_filter label.buscador-dt {
        max-width: none;
    }
}

/* ===== Usuarios en DataTables con el mismo aspecto del directorio ===== */

.usr-lista-tabla {
    overflow: visible;
}

.usr-lista-tabla div.dataTables_wrapper .dt-row > [class*="col-"] {
    overflow: visible;
}

table.usr-tabla {
    margin: 0 !important;
    font-size: 14px !important;
}

table.usr-tabla > thead > tr > th {
    padding: 10px 16px !important;
    background: var(--s-fondo) !important;
}

table.usr-tabla > tbody > tr > td {
    padding: 10px 16px !important;
    vertical-align: middle;
    text-align: left !important;
}

table.usr-tabla > tbody > tr {
    cursor: pointer;
}

table.usr-tabla > tbody > tr:hover > td {
    background: var(--s-fondo) !important;
}

.usr-celda {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.usr-celda .usr-avatar {
    flex: none;
}

.usr-celda .usr-datos {
    flex: 1 1 auto;
}

.usr-col-rol {
    width: 210px;
}

.usr-col-actividad {
    width: 170px;
    color: var(--s-tinta-3);
    white-space: nowrap;
    text-align: right !important;
}

table.usr-tabla > thead > tr > th.usr-col-actividad {
    text-align: right !important;
}

.usr-col-flecha {
    width: 32px;
}

.usr-rol-movil {
    display: none;
}


@media (max-width: 767.98px) {
    .usr-col-rol,
    .usr-col-actividad,
    .usr-col-flecha {
        display: none;
    }

    .usr-rol-movil {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 6px 0 0 54px;
        font-size: 12.5px;
        color: var(--s-tinta-3);
    }

    table.usr-tabla > tbody > tr > td {
        padding: 12px 14px !important;
    }
}

/* Ajustes de la tabla de usuarios */
table.usr-tabla > tbody > tr > td.usr-col-actividad,
table.usr-tabla > thead > tr > th.usr-col-actividad {
    text-align: right !important;
}

table.usr-tabla > thead > tr > th.sorting,
table.usr-tabla > thead > tr > th.sorting_asc,
table.usr-tabla > thead > tr > th.sorting_desc {
    padding-right: 30px !important;
}

/* DataTables con Bootstrap envuelve la tabla en filas con margen negativo: dentro de la tarjeta se anulan */
.usr-lista-tabla .dataTables_wrapper > .row,
.usr-lista-tabla .dataTables_wrapper > .dt-row {
    margin: 0;
}

.usr-lista-tabla .dataTables_wrapper > .row > [class*="col"] {
    padding: 0;
}


/* Ancho fijo de columnas: el correo largo se recorta con puntos en lugar de ensanchar la tabla */
table.usr-tabla {
    table-layout: fixed;
    width: 100% !important;
}

table.usr-tabla .usr-datos {
    min-width: 0;
    overflow: hidden;
}

/* ===== DataTables uniforme: sin rayado gris, barra superior y pie con contador y paginador ===== */

table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
table.table-striped > tbody > tr:nth-of-type(odd) > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > *,
table.dataTable > tbody > tr.odd > .sorting_1,
table.dataTable > tbody > tr.even > .sorting_1,
table.dataTable > tbody > tr > .sorting_1 {
    --bs-table-bg-type: transparent !important;
    box-shadow: none !important;
    background-color: transparent;
}

table.dataTable.table-hover > tbody > tr:hover > *,
table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--s-fondo) !important;
    box-shadow: none !important;
    background-color: var(--s-fondo) !important;
}

.dt-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.dt-barra:empty {
    display: none;
}

.dt-barra .dataTables_filter {
    flex: 1 1 280px;
    min-width: 0;
}

.dt-barra .dataTables_filter label.buscador-dt {
    margin: 0;
}

.dt-barra .dt-buttons {
    margin: 0 0 0 auto !important;
}

.dt-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--s-linea);
}

.dt-pie .dataTables_info {
    padding: 0 !important;
    font-size: 13px;
    color: var(--s-tinta-2);
}

.dt-pie .dataTables_paginate {
    margin: 0 !important;
}

.dt-pie ul.pagination {
    margin: 0 !important;
}

.usr-lista-tabla .dt-pie {
    margin: 0;
    padding: 10px 16px;
}

@media (max-width: 767.98px) {
    .dt-barra .dt-buttons {
        margin-left: 0 !important;
    }

    .dt-pie {
        justify-content: center;
        text-align: center;
    }
}

/* ===== Indicador de "sin resultados" ===== */

.vacio-estado {
    max-width: 440px;
    margin: 0 auto;
}

.vacio-estado > span {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--s-tinta-2);
}

table.dataTable td.dataTables_empty {
    padding: 8px 0 !important;
    text-align: center !important;
    white-space: normal;
    background: transparent !important;
}

table.dataTable td.dataTables_empty .vacio-estado {
    padding: 28px 16px;
}

.prov-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    font-size: 17px;
    color: #fff;
    border-radius: 12px;
}

/* ===== Medida unica de controles: 40 px de alto en barras de acciones, filtros y buscadores ===== */

:root {
    --s-control: 40px;
}

.pagina-acciones > .btn,
.pagina-acciones > .dropdown-center > .btn,
.pagina-acciones > span > .btn,
.pagina-acciones .d-inline-flex > .btn,
.dt-barra .dt-buttons > .btn,
.dt-barra .dt-buttons .btn {
    height: var(--s-control);
    min-height: var(--s-control);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    border-radius: 10px !important;
}

.pagina-acciones > .btn.btn-solo-icono,
.pagina-acciones > .dropdown-center > .btn.btn-solo-icono,
.pagina-acciones > span > .btn.btn-solo-icono,
.pagina-acciones .d-inline-flex > .btn.btn-solo-icono {
    width: var(--s-control);
    min-width: var(--s-control);
    padding: 0;
}

.pagina-acciones .form-control,
.pagina-acciones .form-select {
    height: var(--s-control);
    min-height: var(--s-control);
    padding-top: 0;
    padding-bottom: 0;
}

.pagina-acciones .d-inline-flex > span {
    display: inline-flex;
    align-items: center;
    height: var(--s-control);
    padding: 0 6px;
}

/* Campo compacto con icono (fechas y selectores en encabezados) */
.campo-compacto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--s-control);
    margin: 0;
    padding: 0 12px;
    font-size: 14px;
    color: var(--s-tinta);
    background: var(--s-relleno);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

.campo-compacto:focus-within {
    background: var(--s-superficie);
    border-color: var(--s-foco);
}

.campo-compacto > i {
    color: var(--s-tinta-2);
}

.campo-compacto > input,
.campo-compacto > select {
    height: 100%;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--s-tinta);
    background: transparent;
    border: 0;
    outline: 0;
}

/* Buscador a la misma altura que los botones */
.buscador,
div.dataTables_wrapper div.dataTables_filter label.buscador-dt {
    height: var(--s-control);
    padding: 3px 3px 3px 14px;
}

.buscador > .btn,
div.dataTables_wrapper div.dataTables_filter label.buscador-dt > .btn {
    height: 30px;
    min-height: 30px;
}

@media (max-width: 767.98px) {
    .pagina-acciones .campo-compacto {
        flex: 1 1 auto;
    }

    .pagina-acciones .campo-compacto > input {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Botones del encabezado de un modal: misma altura que la X de cerrar */
.bloque_titulo > .container-fluid > .row:has(> :nth-child(2):last-child) > :last-child .btn {
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== Modales a la medida de su contenido (escritorio y tableta) =====
   Antes cada pantalla fijaba un alto (300px, 98%...) y sobraba espacio en blanco.
   Ahora el modal crece con su contenido, con tope en el alto de la ventana y desplazamiento interno.
   Se excluyen los modales con mapa: el mapa se dibuja al 100% de un alto fijo. */
@media (min-width: 768px) {
    body:not(.perfil4) .modalWin:not(:has([id*="map" i], [class*="map" i], .leaflet-container, iframe, canvas)) {
        display: flex;
        flex-direction: column;
        height: fit-content !important;
        min-height: 140px;
        max-height: calc(100dvh - 32px) !important;
    }

    body:not(.perfil4) .modalWin:not(:has([id*="map" i], [class*="map" i], .leaflet-container, iframe, canvas)) > .modalWinContent {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100dvh - 32px - 52px);
        margin-top: 52px;
        padding-bottom: 8px;
    }

    /* Con encabezado propio la franja de la X no ocupa lugar */
    body:not(.perfil4) .modalWin:not(:has([id*="map" i], [class*="map" i], .leaflet-container, iframe, canvas)):has(> .modalWinContent > form > div.bloque_titulo:first-of-type, > .modalWinContent > div.bloque_titulo:first-of-type, > .modalWinContent > form > .pagina-encabezado:first-of-type, > .modalWinContent > .pagina-encabezado:first-of-type) > .modalWinContent {
        margin-top: 0;
        max-height: calc(100dvh - 32px);
    }
}

/* Grupos de campo en formularios de modal: misma altura que los demas campos */
.modalWinContent form .input-group > .form-control,
.modalWinContent form .input-group > .form-select,
.modalWinContent form .input-group > .input-group-text,
.modalWinContent form .input-group > .btn {
    min-height: 56px;
}

.modalWinContent form textarea.form-control {
    min-height: 96px;
}

/* Pie de envio de un formulario: aviso a la izquierda, accion principal a la derecha */
.form-envio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 8px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--s-linea);
}

.form-envio > .lbltxt {
    flex: 1 1 260px;
    margin: 0;
}

@media (max-width: 575.98px) {
    .form-envio > .btn {
        width: 100%;
    }
}

/* Separacion bajo los titulos de formulario que usaban la clase inexistente mb-8 */
.bloque_titulo.mb-8 {
    margin-bottom: 16px !important;
}

/* ===== Tablero de trabajadores ===== */

.tb {
    --tb-local: #2a78d6;
    --tb-foraneo: #eb6834;
    --tb-vacio: #c4c8ce;
    --tb-serie: #2a78d6;
    --tb-aviso: #d08700;
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.tb-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tb-tile {
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    color: var(--s-tinta);
    text-decoration: none;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
}

.tb-tile-etq {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-tinta-2);
}

.tb-tile-num {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tb-tile-sub {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.tb-tile-aviso {
    background: var(--s-aviso-suave);
    border-color: #f5dfa6;
}

.tb-tile-aviso .tb-tile-etq,
.tb-icono-aviso {
    color: var(--s-aviso);
}

@media (hover: hover) {
    .tb-tile-aviso:hover {
        border-color: var(--s-aviso);
    }
}

.tb-tarjeta {
    min-width: 0;
    padding: 18px 20px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
}

.tb-cab {
    margin-bottom: 14px;
}

.tb-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tb-punto {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.tb-c-local { background: var(--tb-local); }
.tb-c-foraneo { background: var(--tb-foraneo); }
.tb-c-vacio { background: var(--tb-vacio); }

/* Barra segmentada: separacion de 2 px entre partes */
.tb-segmentos {
    display: flex;
    gap: 2px;
    height: 18px;
    overflow: hidden;
    border-radius: 6px;
}

.tb-seg {
    flex-basis: 0;
    min-width: 3px;
}

.tb-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--s-tinta-2);
}

.tb-leyenda > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tb-leyenda b {
    color: var(--s-tinta);
    font-variant-numeric: tabular-nums;
}

/* Barras horizontales: etiqueta, pista y valor */
.tb-barras {
    display: grid;
    gap: 6px;
}

.tb-fila {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 12px;
    padding: 3px 4px;
    border-radius: 8px;
}

@media (hover: hover) {
    .tb-fila:hover {
        background: var(--s-fondo);
    }
}

.tb-etq {
    overflow: hidden;
    font-size: 13.5px;
    color: var(--s-tinta);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tb-pista {
    display: block;
    height: 14px;
}

.tb-relleno {
    display: block;
    height: 100%;
    background: var(--tb-serie);
    border-radius: 0 4px 4px 0;
}

.tb-otros .tb-relleno {
    background: var(--tb-vacio);
}

.tb-otros .tb-etq {
    color: var(--s-tinta-2);
}

.tb-val {
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    color: var(--s-tinta);
    font-variant-numeric: tabular-nums;
}

.tb-nota {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
    border-top: 1px solid var(--s-linea);
}

/* Datos por corregir */
.tb-atencion .tb-fila {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) 4.5rem;
    padding: 6px 4px;
}

.tb-atencion .tb-etq {
    white-space: normal;
    font-weight: 600;
}

.tb-atencion .tb-etq small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--s-tinta-3);
}

.tb-fila-aviso .tb-relleno {
    background: var(--tb-aviso);
}

.tb-titulo-lista {
    margin: 4px 0 10px;
    font-size: 17px;
    font-weight: 700;
}

/* Tabla de trabajadores */
.tb-tabla .tb-celda-principal {
    font-weight: 600;
    color: var(--s-tinta);
}

.tb-tabla .tb-celda-secundaria {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.tb-falta {
    font-weight: 500;
    color: var(--s-aviso);
}

.tb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
}

.tb-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.tb-chip-local { color: #1d5aa5; background: #e7f0fb; }
.tb-chip-local::before { background: #2a78d6; }
.tb-chip-foraneo { color: #b4441a; background: #fdece4; }
.tb-chip-foraneo::before { background: #eb6834; }
.tb-chip-vacio { color: var(--s-tinta-2); background: var(--s-relleno); }
.tb-chip-vacio::before { background: #9aa0a8; }

.tb-gps-si { color: #1e8e3e; font-size: 16px; }
.tb-gps-no { color: var(--s-tinta-3); font-size: 16px; }

@media (max-width: 1199.98px) {
    .tb-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tb-rejilla {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tb-tiles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .tb-tile {
        padding: 12px 14px;
    }

    .tb-tile-num {
        font-size: 24px;
    }

    .tb-fila,
    .tb-atencion .tb-fila {
        grid-template-columns: minmax(0, 1fr) 3.8rem;
        row-gap: 4px;
    }

    .tb-pista {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .tb-tarjeta {
        padding: 14px 16px;
    }
}

.tb-nota {
    flex-wrap: wrap;
    gap: 6px 18px;
}

.tb-nota > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Tablero de trabajadores v2: paleta sobria Google, tarjeta principal Uber ===== */

.tb {
    --tb-local: #1a73e8;
    --tb-foraneo: #129eaf;
    --tb-vacio: #dadce0;
    --tb-serie: #1a73e8;
    --tb-aviso: #e37400;
    --tb-pista: #f1f3f4;
}

.tb-tiles {
    grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
}

.tb-tile {
    position: relative;
    align-content: start;
    gap: 4px;
    padding: 18px 20px;
    transition: border-color .15s ease, transform .15s ease;
}

.tb-tile-icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    font-size: 17px;
    border-radius: 10px;
}

.tb-icono-local { color: #1a73e8; background: #e8f0fe; }
.tb-icono-foraneo { color: #0f7f8c; background: #e4f7fb; }
.tb-icono-app { color: #137333; background: #e6f4ea; }
.tb-icono-aviso { color: #b06000; background: #fef7e0; }

.tb-tile-etq {
    font-size: 13px;
    color: var(--s-tinta-2);
}

.tb-tile-num {
    font-size: 30px;
}

/* Tarjeta principal en negro */


.tb-tile-aviso {
    background: var(--s-superficie);
    border-color: var(--s-linea);
}

.tb-tile-aviso .tb-tile-etq {
    color: var(--s-tinta-2);
}

@media (hover: hover) {
    .tb-tile-aviso:hover {
        border-color: #e37400;
        transform: translateY(-1px);
    }
}

/* Barras sobre una pista gris, al estilo de Google */
.tb-pista {
    background: var(--tb-pista);
    border-radius: 0 4px 4px 0;
}

.tb-relleno {
    background: var(--tb-serie);
}

.tb-fila-aviso .tb-relleno {
    background: var(--tb-aviso);
}

.tb-tarjeta {
    padding: 20px 22px;
}

/* Datos por corregir plegable */
.tb-atencion {
    padding: 0;
}

.tb-atencion-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--s-r-tarjeta);
}

.tb-atencion-cab::-webkit-details-marker {
    display: none;
}

.tb-atencion-cab .tb-tile-icono {
    flex: none;
    margin: 0;
}

@media (hover: hover) {
    .tb-atencion-cab:hover {
        background: var(--s-fondo);
    }
}

.tb-atencion-texto {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.tb-atencion-num {
    font-size: 24px;
    font-weight: 800;
    color: #b06000;
    font-variant-numeric: tabular-nums;
}

.tb-atencion-flecha {
    color: var(--s-tinta-3);
    transition: transform .2s ease;
}

.tb-atencion[open] .tb-atencion-flecha {
    transform: rotate(180deg);
}

.tb-atencion[open] .tb-atencion-cab {
    border-bottom: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta) var(--s-r-tarjeta) 0 0;
}

.tb-atencion-cuerpo {
    padding: 16px 22px 20px;
}

/* Region en la tabla con la paleta nueva */
.tb-chip-local { color: #1967d2; background: #e8f0fe; }
.tb-chip-local::before { background: #1a73e8; }
.tb-chip-foraneo { color: #0b6b76; background: #e4f7fb; }
.tb-chip-foraneo::before { background: #129eaf; }

/* Acceso a la app */
.tb-acceso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.tb-acceso-pin { color: #137333; }
.tb-acceso-codigo { color: #1967d2; }
.tb-acceso-sinpin { color: #b06000; }
.tb-acceso-nunca { color: var(--s-tinta-3); font-weight: 500; }

/* Boton de ubicacion */
.tb-gps {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
    border-radius: 50%;
}

button.tb-gps-si {
    color: #137333;
    background: transparent;
    border: 0;
}

button.tb-gps-si:hover {
    background: #e6f4ea;
}

.tb-gps-no {
    color: #bdc1c6;
}

/* Menu de acciones de la fila */
.tb-tabla .dropdown-menu {
    min-width: 220px;
    font-size: 14px;
}

.tb-tabla .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

/* Modal del codigo de acceso */
.pin-codigo {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 8px 28px 24px;
    text-align: center;
}

.pin-codigo > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 24px;
    color: #1a73e8;
    background: #e8f0fe;
    border-radius: 50%;
}

.pin-codigo-numero {
    margin: 8px 0 4px;
    padding: 12px 22px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .18em;
    background: var(--s-relleno);
    border-radius: 12px;
    user-select: all;
}

/* Modal del mapa del trabajador */
.mapa-trabajador {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mapa-trabajador-cab {
    padding: 0 64px 14px 22px;
}

.mapa-trabajador-cab .pagina-titulo {
    font-size: 22px;
}

.mapa-trabajador-mapa {
    flex: 1 1 auto;
    min-height: 320px;
    margin: 0 16px;
    border-radius: 14px;
    overflow: hidden;
}

.mapa-trabajador-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 18px;
    font-size: 14px;
}

@media (max-width: 1399.98px) {
    .tb-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


}

@media (max-width: 767.98px) {
    .tb-tiles {
        grid-template-columns: 1fr 1fr;
    }


    .tb-tile-aviso {
        grid-column: span 2;
    }

    .tb-atencion-cab {
        padding: 14px 16px;
    }

    .tb-atencion-cuerpo {
        padding: 14px 16px 16px;
    }
}

/* Acomodo de tarjetas: la principal ocupa la fila completa y las otras cuatro quedan parejas */
@media (max-width: 1399.98px) {
    .tb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}

@media (max-width: 991.98px) {
    .tb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .tb-tile-aviso { grid-column: auto; }
}

.tb-tabla button.tb-gps-si {
    --bs-btn-color: #137333;
    --bs-btn-hover-color: #137333;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: #e6f4ea;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    color: #137333 !important;
}

.tb-tabla button.tb-gps-si > i {
    color: #137333 !important;
}

/* Tarjetas de trabajadores en celular: dato principal y secundario uno debajo del otro */
@media (max-width: 767.98px) {
    table.tabla-tarjetas.tb-tabla > tbody > tr > td:has(> .tb-celda-principal) {
        flex-wrap: wrap;
        row-gap: 0;
    }

    table.tabla-tarjetas.tb-tabla > tbody > tr > td:has(> .tb-celda-principal)::before {
        flex: 0 0 auto;
    }

    table.tabla-tarjetas.tb-tabla .tb-celda-principal {
        flex: 1 1 50%;
        text-align: right;
    }

    table.tabla-tarjetas.tb-tabla .tb-celda-secundaria {
        flex: 1 0 100%;
        text-align: right;
    }

    table.tabla-tarjetas.tb-tabla > tbody > tr > td.tarjeta-titulo .tb-celda-principal,
    table.tabla-tarjetas.tb-tabla > tbody > tr > td.tarjeta-titulo .tb-celda-secundaria {
        text-align: left;
    }
}

/* Sin tarjeta negra: el total vive en el bloque de region y las cuatro tarjetas van en una fila */
.tb-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .tb-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tb-cab-total {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
}

.tb-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tb-total b {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tb-total span {
    font-size: 13px;
    color: var(--s-tinta-2);
}

/* ===== Filtro "por corregir" del listado de trabajadores ===== */

.tb-lista-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 4px 0 12px;
    scroll-margin-top: 16px;
}

.tb-lista-cab .tb-titulo-lista {
    margin: 0;
}

.tb-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.tb-filtros .chip {
    height: 36px;
    padding: 0 14px;
    cursor: pointer;
}

.tb-filtros .chip i {
    font-size: 14px;
}

.tb-filtro-num {
    padding: 1px 8px;
    font-size: 12px;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.tb-filtros .chip.activo .tb-filtro-num {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

.tb-chip-regla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px !important;
    cursor: default !important;
}

.tb-chip-regla[hidden] {
    display: none !important;
}

.tb-chip-quitar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: inherit;
    background: rgba(255, 255, 255, .2);
    border: 0;
    border-radius: 50%;
}


.tb-fila-filtro {
    cursor: pointer;
}

@media (hover: hover) {
    .tb-fila-filtro:hover .tb-etq {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 575.98px) {
    .tb-atencion-cab {
        flex-wrap: wrap;
    }

    .tb-atencion-num {
        font-size: 20px;
    }


}

.tb-corregir {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #b06000;
}

@media (max-width: 767.98px) {
    table.tabla-tarjetas.tb-tabla .tb-corregir {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}

/* Chip "Por corregir" con el ambar suave del icono de advertencia */
.tb-filtros .chip[data-calidad="todas"] {
    color: #b06000;
    background: #fef7e0;
    border-color: #f6e2a8;
}

.tb-filtros .chip[data-calidad="todas"] .tb-filtro-num {
    color: #b06000;
    background: rgba(227, 116, 0, .12);
}

@media (hover: hover) {
    .tb-filtros .chip[data-calidad="todas"]:hover {
        border-color: #e37400;
    }
}

.tb-filtros .chip[data-calidad="todas"].activo {
    color: #8a4b00;
    background: #fde9b8;
    border-color: #e37400;
    box-shadow: inset 0 0 0 1px #e37400;
}

.tb-filtros .chip[data-calidad="todas"].activo .tb-filtro-num {
    color: #8a4b00;
    background: rgba(227, 116, 0, .18);
}

/* ===== Autorizar cambios de domicilio ===== */

.dom-autorizar {
    padding: 4px 20px 20px;
}

.dom-autorizar > .pagina-encabezado {
    padding: 8px 48px 0 0;
}

.dom-solicitud {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px 18px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 14px;
}

.dom-solicitud-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dom-comparar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.dom-caja {
    padding: 10px 12px;
    font-size: 13px;
    background: var(--s-fondo);
    border-radius: 10px;
}

.dom-caja p {
    margin: 4px 0 0;
    color: var(--s-tinta);
}

.dom-caja-nuevo {
    background: #e8f0fe;
}

.etiqueta-dom {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.dom-flecha {
    align-self: center;
    color: var(--s-tinta-3);
}

.dom-ubicacion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.dom-ubicacion-si {
    color: #137333;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .dom-comparar {
        grid-template-columns: 1fr;
    }

    .dom-flecha {
        transform: rotate(90deg);
        justify-self: center;
    }
}

.notif-detalle {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--s-tinta-3);
    white-space: normal;
}

/* ===== Tablero: cambios de domicilio ===== */

.tb-dom-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tb-dom-cifra {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    background: var(--s-fondo);
    border-radius: 12px;
}

.tb-dom-cifra span {
    font-size: 13px;
    color: var(--s-tinta-2);
}

.tb-dom-cifra b {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tb-dom-cifra small {
    font-size: 12px;
    color: var(--s-tinta-3);
}

.tb-dom-pendiente {
    background: #fef7e0;
}

.tb-dom-pendiente b {
    color: #b06000;
}

.tb-dom-detalle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
}

.tb-subtitulo {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.tb-dom-vacio {
    margin: 0;
    font-size: 13.5px;
    color: var(--s-tinta-3);
}

.tb-dom-lista {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-dom-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tb-dom-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-radius: 50%;
}

.tb-dom-icono-ok { color: #137333; background: #e6f4ea; }
.tb-dom-icono-sol { color: #1967d2; background: #e8f0fe; }

.tb-dom-texto {
    display: grid;
    min-width: 0;
    font-size: 13.5px;
}

.tb-dom-texto small {
    font-size: 12px;
    color: var(--s-tinta-3);
}

@media (max-width: 767.98px) {
    .tb-dom-cifras,
    .tb-dom-detalle {
        grid-template-columns: 1fr;
    }
}

/* ===== Carga de trabajadores por CSV: vista previa ===== */

.csv-previa,
.guia-csv {
    padding: 4px 22px 22px;
}

.csv-previa > .pagina-encabezado,
.guia-csv > .pagina-encabezado {
    padding: 8px 48px 0 0;
}

.csv-cifras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.csv-cifra {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    background: var(--s-fondo);
    border-radius: 12px;
}

.csv-cifra span {
    font-size: 13px;
    color: var(--s-tinta-2);
}

.csv-cifra b {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.csv-cifra-nuevo { background: #e6f4ea; }
.csv-cifra-nuevo b { color: #137333; }
.csv-cifra-cambio { background: #e8f0fe; }
.csv-cifra-cambio b { color: #1967d2; }
.csv-cifra-aviso { background: #fef7e0; }
.csv-cifra-aviso b { color: #b06000; }

.csv-sub {
    margin: 18px 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.csv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.csv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    background: var(--s-relleno);
    border-radius: 999px;
}

.csv-chip b {
    font-family: var(--s-dato);
}

.csv-chip span {
    font-weight: 700;
    color: #1967d2;
}

.csv-muestra {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.csv-muestra li {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--s-linea);
    border-radius: 12px;
}

.csv-quien {
    display: grid;
    font-size: 13.5px;
}

.csv-quien small {
    color: var(--s-tinta-3);
}

.csv-cambio {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    font-size: 13px;
}

.csv-col {
    font-weight: 600;
    color: var(--s-tinta-2);
}

.csv-antes {
    color: var(--s-tinta-3);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

.csv-despues {
    font-weight: 600;
    color: var(--s-tinta);
    overflow-wrap: anywhere;
}

.csv-alta {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #137333;
    background: #e6f4ea;
    border-radius: 999px;
}

.csv-avisos {
    margin-top: 16px;
    padding: 10px 14px;
    background: #fef7e0;
    border-radius: 12px;
}

.csv-avisos summary {
    font-size: 13.5px;
    font-weight: 600;
    color: #8a4b00;
    cursor: pointer;
}

.csv-avisos ul {
    max-height: 220px;
    margin: 10px 0 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    font-size: 13px;
}

.csv-avisos li {
    padding: 4px 0;
    border-top: 1px solid rgba(176, 96, 0, .15);
}

.csv-avisos li span {
    display: inline-block;
    min-width: 72px;
    font-weight: 600;
}

.csv-notas {
    margin: 16px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--s-tinta-2);
}

.csv-pie,
.guia-pie {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--s-linea);
}

/* ===== Guia del formato CSV ===== */

.guia-bloque {
    margin-top: 22px;
}

.guia-bloque > .seccion-titulo {
    margin-bottom: 10px;
}

.guia-pasos {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.guia-pasos li {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 2px 0 2px 44px;
    counter-increment: paso;
    font-size: 14px;
}

.guia-pasos li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--s-accion);
    border-radius: 50%;
}

.guia-pasos li span {
    color: var(--s-tinta-2);
}

.guia-reglas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.guia-regla {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    border: 1px solid var(--s-linea);
    border-radius: 12px;
}

.guia-regla > i {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 10px;
}

.guia-regla div {
    display: grid;
    gap: 2px;
}

.guia-regla span {
    color: var(--s-tinta-2);
}

.guia-si > i { color: #137333; background: #e6f4ea; }
.guia-no > i { color: #1967d2; background: #e8f0fe; }

.guia-tabla {
    font-size: 13px !important;
}

.guia-tabla td {
    vertical-align: top !important;
}

.guia-letra {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-family: var(--s-dato);
    font-weight: 600;
    background: var(--s-relleno);
    border-radius: 7px;
}

.guia-req {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--s-tinta-3);
}

.guia-req-obligatoria { color: #c5221f; }
.guia-req-para-altas { color: #b06000; }
.guia-req-recomendada { color: #1967d2; }

.guia-nota {
    min-width: 200px;
    color: var(--s-tinta-2);
}

.guia-errores {
    display: grid;
    gap: 4px;
    margin: 0;
    font-size: 13.5px;
}

.guia-errores dt {
    margin-top: 8px;
    font-weight: 700;
}

.guia-errores dd {
    margin: 0;
    color: var(--s-tinta-2);
}

@media (max-width: 767.98px) {
    .csv-cifras { grid-template-columns: 1fr 1fr; }
    .csv-muestra li, .guia-reglas { grid-template-columns: 1fr; }
    .csv-cambio { grid-template-columns: 1fr; gap: 0; }
    .csv-cambio .bi-arrow-right { display: none; }
}

/* ===== Rechazo de domicilios y nominas repetidas ===== */

.dom-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-dom-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tb-dom-icono-no { color: #c5221f; background: #fce8e6; }

.tb-rep-grupos {
    display: grid;
    gap: 12px;
}

.tb-rep-grupo {
    border: 1px solid var(--s-linea);
    border-radius: 12px;
    overflow: hidden;
}

.tb-rep-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13.5px;
    background: var(--s-fondo);
}

.tb-rep-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--s-linea);
}

.tb-rep-datos {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 320px;
    font-size: 13.5px;
}

.tb-rep-datos small {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.tb-rep-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tb-rep-id {
    margin-right: 4px;
    font-family: var(--s-dato);
    font-size: 12px;
    color: var(--s-tinta-3);
}

@media (max-width: 991.98px) {
    .tb-dom-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tb-rep-nota {
    margin: 0;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #8a4b00;
    background: #fef7e0;
    border-top: 1px solid var(--s-linea);
}

/* Fecha de la solicitud de domicilio */
.dom-fecha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1967d2;
    background: #e8f0fe;
    border-radius: 999px;
}

.dom-fecha-vieja {
    color: #b06000;
    background: #fef7e0;
}

.dom-fecha-sin {
    font-weight: 500;
    color: var(--s-tinta-3);
    background: var(--s-relleno);
}

/* Perfil 4: cambio de domicilio en espera, como segunda fila del bloque "Mi domicilio" */
.p4-fila-pendiente {
    align-items: flex-start;
    background: #fef7e0;
    border-top: 1px solid #f6e2a8;
}

.p4-fila-pendiente .p4-fila-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #8a4b00;
}

.p4-fila-pendiente .p4-fila-sub {
    font-size: 13.5px;
    color: #6b4a12;
}

.p4-pendiente-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: #b06000;
    background: #fde9b8;
    border-radius: 50%;
}

/* ===== Avisos flotantes al estilo de Google (reemplazan a notify) ===== */

.avisos-pila {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--seguro-abajo, 0px));
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(560px, calc(100vw - 24px));
    transform: translateX(-50%);
    pointer-events: none;
}

.aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 8px 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #f1f3f4;
    background: #202124;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.aviso.visible {
    opacity: 1;
    transform: none;
}

.aviso-icono {
    flex: none;
    font-size: 18px;
}

.aviso-exito .aviso-icono { color: #81c995; }
.aviso-alerta .aviso-icono { color: #fdd663; }
.aviso-error .aviso-icono { color: #f28b82; }

.aviso-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.aviso-cerrar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 14px;
    color: #bdc1c6;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.aviso-cerrar:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

@media (max-width: 767.98px) {
    body:has(.app-bottombar) .avisos-pila {
        bottom: calc(var(--app-barra-inferior, 62px) + var(--seguro-abajo, 0px) + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aviso { transition: none; }
}

/* Error dentro del formulario de acceso */
.login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 2px 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #c5221f;
}

.login-error i {
    margin-top: 2px;
}

#pass.is-invalid {
    background-color: #fce8e6 !important;
    border-color: #c5221f !important;
    background-image: none;
}

/* Conteo en las tarjetas del panel principal */
.inicio-cifra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 999px;
}

.inicio-cifra b {
    font-size: 18px;
    font-weight: 800;
}

.inicio-cifra-pendiente {
    color: #8a4b00;
    background: #fef7e0;
}

.inicio-cifra-pendiente b {
    color: #b06000;
}

/* ===== Accesos bloqueados ===== */
.acc-bloqueos { padding: 4px 22px 22px; }
.acc-bloqueos > .pagina-encabezado { padding: 8px 48px 0 0; }

.acc-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid var(--s-linea);
    border-radius: 14px;
}

.acc-bloqueada { border-color: #f4c7c3; background: #fffafa; }

.acc-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #b06000;
    background: #fef7e0;
    border-radius: 12px;
}

.acc-bloqueada .acc-icono { color: #c5221f; background: #fce8e6; }

.acc-datos { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 14px; }
.acc-datos small { color: var(--s-tinta-3); font-size: 12.5px; overflow-wrap: anywhere; }
.acc-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.acc-intentos { font-size: 12.5px; color: var(--s-tinta-2); }

@media (max-width: 575.98px) {
    .acc-fila { flex-wrap: wrap; }
    .acc-fila > .btn { width: 100%; }
}

/* ===== Pantalla de acceso (login.php), estilo Uber / Google ===== */

.acceso {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    min-height: 100dvh;
    font-family: var(--s-letra);
    background: var(--s-superficie);
}

.acceso-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px max(24px, env(safe-area-inset-left, 0px)) 32px;
    background: var(--s-superficie);
}

.acceso-contenido {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    min-height: min(640px, calc(100dvh - 72px));
}

.acceso-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 56px;
}

.acceso-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.acceso-marca-texto {
    font-size: 15px;
    font-weight: 700;
    color: var(--s-tinta);
}

.acceso-paso {
    display: flex;
    flex-direction: column;
}

.acceso-titulo {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--s-tinta);
}

.acceso-subtitulo {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--s-tinta-2);
}

.acceso-campo {
    margin-bottom: 4px;
}

.acceso-campo > .form-control {
    height: 58px !important;
    font-size: 16px;
    border-radius: 12px;
}

.acceso-boton {
    width: 100%;
    height: 52px;
    margin-top: 20px;
    font-size: 16px;
    border-radius: 12px !important;
}

.acceso-ayuda {
    margin: 20px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--s-tinta-3);
}

.acceso-cuenta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 24px;
    padding: 10px 12px;
    background: var(--s-fondo);
    border: 1px solid var(--s-linea);
    border-radius: 999px;
}

.acceso-cuenta-foto {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--s-relleno);
}

.acceso-cuenta-foto img {
    width: 40px !important;
    height: 40px;
    object-fit: cover;
    border-radius: 50% !important;
}

.acceso-cuenta-datos {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
}

.acceso-cuenta-datos b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.acceso-cuenta-datos small {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.acceso-cambiar,
.acceso-enlace {
    flex: none;
    padding: 6px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--s-foco);
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.acceso-cambiar:hover,
.acceso-enlace:hover {
    background: var(--s-foco-suave);
}

.acceso-entrar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.acceso-enlace {
    margin-top: 12px;
}

/* La vista de cuentas solo hace falta por su script, que elige la cuenta; la tarjeta ya la muestra */
.acceso #_login_ec_ {
    display: none;
}

.acceso-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 40px;
    font-size: 12px;
    color: var(--s-tinta-3);
}

.acceso-pie i {
    margin-right: 2px;
}

#user_email.is-invalid {
    background-color: #fce8e6 !important;
    border-color: #c5221f !important;
    background-image: none;
}

/* Panel de imagen */
.acceso-splash {
    position: relative;
    overflow: hidden;
    background: #0b0b0c;
}

.acceso-splash-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.acceso-splash-capa {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .78) 100%);
}

.acceso-splash-texto {
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 56px;
    max-width: 560px;
    color: #fff;
}

.acceso-splash-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.acceso-splash-texto h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: #fff;
}

.acceso-splash-texto p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
}

.acceso-splash-texto ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acceso-splash-texto li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@media (max-width: 991.98px) {
    .acceso {
        grid-template-columns: 1fr;
    }

    .acceso-splash {
        display: none;
    }

    .acceso-panel {
        align-items: flex-start;
        padding-top: calc(32px + env(safe-area-inset-top, 0px));
    }

    .acceso-marca {
        margin-bottom: 40px;
    }
}

/* La pagina de acceso puede desplazarse en celulares chicos */
#__dashboardMain__:has(.acceso) {
    overflow-y: auto;
}


/* Login: cambio de paso (cuenta -> contrasena) con desvanecido corto; solo opacidad y posicion, casi sin costo */
.acceso #usuario_campo,
.acceso #pass_campo {
    animation: acceso-paso .25s ease-out both;
}

@keyframes acceso-paso {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .acceso #usuario_campo,
    .acceso #pass_campo {
        animation: none;
    }
}

/* ===== Bitacora de eventos ===== */

.ev-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ev-filtros .chip {
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
}

.ev-lista {
    display: grid;
}

.ev-fila {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 10px;
    text-align: left;
    font: inherit;
    color: var(--s-tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--s-linea);
    border-radius: 0;
    cursor: pointer;
    transition: background-color .12s ease;
}

.ev-fila:last-child {
    border-bottom: 0;
}

.ev-fila:hover {
    background: var(--s-fondo);
}

.ev-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    font-size: 17px;
    border-radius: 12px;
}

.ev-ok { color: #137333; background: #e6f4ea; }
.ev-aviso { color: #b06000; background: #fef7e0; }
.ev-error { color: #c5221f; background: #fce8e6; }
.ev-info { color: #1967d2; background: #e8f0fe; }
.ev-neutro { color: var(--s-tinta-2); background: var(--s-relleno); }

.ev-cuerpo {
    display: grid;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.ev-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
}

.ev-veces {
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 999px;
}

.ev-detalle {
    font-size: 13.5px;
    color: var(--s-tinta-2);
    overflow-wrap: anywhere;
}

.ev-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.ev-area {
    padding: 1px 8px;
    font-weight: 600;
    background: var(--s-relleno);
    border-radius: 6px;
}

.ev-lado {
    display: grid;
    justify-items: end;
    gap: 6px;
    flex: none;
}

.ev-hora {
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ev-dia {
    font-size: 12px;
    color: var(--s-tinta-3);
}

/* ===== Perfil del usuario ===== */

.perfil-cuerpo {
    display: grid;
    gap: 16px;
    padding: 16px 20px 22px;
}

.perfil-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
    padding: 20px 22px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 18px;
}

.perfil-foto {
    display: grid;
    justify-items: center;
    gap: 8px;
    flex: none;
}

.perfil-foto img,
.perfil-iniciales {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    box-shadow: 0 0 0 4px var(--s-superficie), 0 0 0 5px var(--s-linea);
}

.perfil-iniciales {
    display: grid;
    place-items: center;
    font-size: 36px;
    font-weight: 800;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    cursor: default;
}

.perfil-foto-cambiar {
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--s-foco);
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.perfil-foto-cambiar:hover {
    background: var(--s-foco-suave);
}

.perfil-datos {
    display: grid;
    justify-items: start;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}

.perfil-nombre {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.perfil-contacto {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--s-tinta-2);
}

.perfil-contacto i {
    margin-right: 6px;
    color: var(--s-tinta-3);
}

.perfil-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* Sesiones */
.perfil-sesiones {
    padding: 18px 20px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 18px;
}

.perfil-sesiones-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.perfil-sesiones-acciones {
    display: flex;
    gap: 8px;
}

.perfil-sesiones-lista {
    display: grid;
}

.sesion {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--s-linea);
}

.sesion-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    font-size: 19px;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 12px;
}

.sesion-activa {
    color: #137333;
    background: #e6f4ea;
}

.sesion-datos {
    display: grid;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
}

.sesion-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.sesion-mapa {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--s-foco);
    text-decoration: none;
}

.sesion-cerrar {
    flex: none;
}

@media (max-width: 575.98px) {
    .perfil-tarjeta { justify-content: center; text-align: center; }
    .perfil-datos { justify-items: center; }
    .perfil-acciones { justify-content: center; }
    .sesion { flex-wrap: wrap; }
    .sesion-cerrar { width: 100%; }
}

/* Sesion: el texto toma el espacio libre y no empuja el icono a otro renglon */
.sesion-datos {
    flex: 1 1 0;
}

@media (max-width: 575.98px) {
    .sesion-cerrar {
        flex: 1 0 100%;
    }
}

/* ===== Subir archivo (public/upload/views/upload_nuevo.php) ===== */

.modalWinContent > .subir-encabezado {
    margin: 0;
    padding: 20px 56px 4px 24px;
}

.subir-encabezado .pagina-titulo {
    font-size: 22px;
}

.subir {
    display: grid;
    gap: 14px;
    padding: 12px 24px 20px;
}

.subir-zona {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 168px;
    margin: 0;
    padding: 24px 16px;
    border: 1.5px dashed var(--s-relleno-2);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-fondo);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.subir-zona:hover,
.subir-zona-encima,
.subir-zona:focus-within {
    border-color: var(--s-foco);
    background: var(--s-foco-suave);
}

/* El input cubre toda la zona: recibe el clic y el archivo arrastrado */
.subir-zona input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.subir-zona-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--s-superficie);
    color: var(--s-foco);
    font-size: 24px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .15);
}

.subir-zona-texto {
    display: grid;
    gap: 2px;
    font-size: 14px;
    color: var(--s-tinta-2);
}

.subir-zona-texto b {
    font-size: 15px;
    font-weight: 700;
    color: var(--s-tinta);
}

.subir-zona-texto u {
    color: var(--s-foco);
    text-decoration: none;
    font-weight: 600;
}

/* Con un archivo elegido la zona se reduce a una franja para cambiarlo */
.subir-zona-compacta {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 0;
    padding: 12px 16px;
    text-align: left;
}

.subir-zona-compacta .subir-zona-icono {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

.subir-lista {
    display: grid;
    gap: 8px;
}

.subir-lista:empty {
    display: none;
}

.subir-archivo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-control);
    background: var(--s-superficie);
}

.subir-archivo-icono {
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--s-relleno);
    color: var(--s-tinta-2);
    font-size: 20px;
}

.subir-archivo-icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subir-archivo-datos {
    flex: 1 1 auto;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.subir-archivo-linea {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.subir-archivo-nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--s-tinta);
}

.subir-archivo-peso {
    flex: 0 0 auto;
    font-family: var(--s-dato);
    font-size: 12px;
    color: var(--s-tinta-3);
}

.subir-archivo-barra,
.subir-barra.progresoMain {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--s-relleno);
}

.subir-archivo-barra > span,
.subir-barra .progresoChild {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--s-foco);
    transition: width .2s ease;
}

.subir-archivo-estado {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.subir-listo .subir-archivo-barra > span {
    background: var(--s-ok);
}

.subir-listo .subir-archivo-estado {
    color: var(--s-ok);
    font-weight: 600;
}

.subir-error {
    border-color: #f4c7c3;
    background: var(--s-error-suave);
}

.subir-error .subir-archivo-barra {
    display: none;
}

.subir-error .subir-archivo-estado {
    color: var(--s-error);
    font-weight: 500;
}

.subir-resumen {
    display: grid;
    gap: 6px;
}

.subir-resumen[hidden] {
    display: none;
}

.subir-resumen-texto {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--s-tinta-2);
}

.subir-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.subir-seguro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.subir-seguro .bi {
    color: var(--s-ok);
}

.subir-botones {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .modalWinContent > .subir-encabezado {
        padding: 16px 52px 4px 16px;
    }

    .subir {
        padding: 12px 16px 16px;
    }

    .subir-botones {
        flex: 1 0 100%;
    }

    .subir-botones .btn {
        flex: 1 1 0;
    }
}

/* ===== Vista previa de imagen (public/upload/views/upload_vista_previa.php) ===== */

.vprevia {
    display: grid;
    gap: 14px;
    padding: 12px 24px 20px;
}

.vprevia-marco {
    display: grid;
    place-items: center;
    margin: 0;
    min-height: 220px;
    max-height: min(62dvh, 560px);
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-fondo);
}

.vprevia-marco img {
    display: block;
    max-width: 100%;
    max-height: min(62dvh, 560px);
    object-fit: contain;
}

.vprevia-sin {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 32px 16px;
    font-size: 14px;
    color: var(--s-tinta-3);
}

.vprevia-sin .bi {
    font-size: 32px;
}

.vprevia-medida {
    font-family: var(--s-dato);
    font-size: 12px;
}

.vprevia-borrar {
    color: var(--s-error);
}

@media (max-width: 575.98px) {
    .vprevia {
        padding: 12px 16px 16px;
    }

    .vprevia-marco,
    .vprevia-marco img {
        max-height: 56dvh;
    }
}

/* ===== Buzón de quejas (public/sugerencias/views/*) ===== */

.bz-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.bz-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
    color: var(--s-tinta);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bz-tile:hover {
    border-color: var(--s-relleno-2);
    box-shadow: 0 1px 3px rgba(60, 64, 67, .12);
}

.bz-tile.activo {
    border-color: var(--s-tinta);
    box-shadow: inset 0 0 0 1px var(--s-tinta);
}

.bz-tile-icono {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    background: var(--s-relleno);
    color: var(--s-tinta-2);
}

.bz-pend .bz-tile-icono { background: var(--s-aviso-suave); color: var(--s-aviso); }
.bz-ok .bz-tile-icono { background: var(--s-ok-suave); color: var(--s-ok); }
.bz-no .bz-tile-icono { background: var(--s-error-suave); color: var(--s-error); }

.bz-tile-etq {
    font-size: 13px;
    color: var(--s-tinta-2);
}

.bz-tile-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Tabla */
.bz-fila {
    cursor: pointer;
}

.bz-folio {
    font-family: var(--s-dato);
    font-size: 12.5px;
    color: var(--s-tinta-3);
    white-space: nowrap;
}

.bz-queja {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bz-queja b {
    font-weight: 600;
}

.bz-queja small,
.bz-quien small,
.bz-respondida {
    display: block;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.bz-tabla td {
    vertical-align: middle;
}

.bz-unidad {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--s-relleno);
    font-family: var(--s-dato);
    font-size: 12.5px;
    font-weight: 600;
}

.bz-proveedor {
    white-space: nowrap;
}

.bz-proveedor .bi,
.bz-datos .bi-circle-fill {
    font-size: 9px;
    vertical-align: 1px;
}

.bz-respondida {
    margin-top: 4px;
}

/* Detalle */
.modalWinContent > .bz-encabezado {
    margin: 0;
    padding: 20px 56px 4px 24px;
}

.bz-encabezado .pagina-titulo {
    font-size: 22px;
}

.bz-encabezado .pagina-descripcion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.modalWinContent > .bz-encabezado .pagina-acciones {
    align-self: flex-start;
}

.bz-detalle,
.bz-formulario {
    display: grid;
    gap: 12px;
    padding: 12px 24px 24px;
}

.bz-tarjeta {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
}

.bz-tarjeta-cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bz-tarjeta-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.bz-tarjeta-desc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--s-tinta-3);
}

.bz-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0;
}

.bz-datos dt {
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--s-tinta-3);
}

.bz-datos dd {
    margin: 0;
    font-size: 14px;
    color: var(--s-tinta);
}

.bz-persona {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bz-persona img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.bz-persona small {
    display: block;
    font-size: 12px;
    color: var(--s-tinta-3);
}

.bz-descripcion {
    padding-top: 12px;
    border-top: 1px solid var(--s-linea);
}

.bz-subtitulo {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--s-tinta-3);
}

.bz-descripcion p {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bz-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.bz-miniatura {
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: 10px;
    background: var(--s-fondo);
}

.bz-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.bz-miniatura:hover img {
    transform: scale(1.04);
}

/* Seguimiento */
.bz-linea {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.bz-linea::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--s-linea);
}

.bz-linea li {
    position: relative;
    display: grid;
    gap: 2px;
}

.bz-linea li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--s-ok);
    box-shadow: 0 0 0 3px var(--s-superficie);
}

.bz-linea li.actual::before { background: var(--s-aviso); }
.bz-linea li.rechazo::before { background: var(--s-error); }

.bz-linea b {
    font-size: 14px;
}

.bz-linea small {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.bz-respuesta {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: var(--s-r-control);
    background: var(--s-fondo);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.bz-contestar {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--s-linea);
}

.bz-contestar .form-label {
    margin: 0;
    font-weight: 600;
}

.bz-contestar-pie,
.bz-envio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bz-contestar-botones {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.bz-nota {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.bz-cuenta {
    font-family: var(--s-dato);
}

.bz-envio .btn {
    margin-left: auto;
}

.btn.bz-peligro {
    color: var(--s-error);
}

/* Formulario */
.bz-formulario textarea.form-control {
    min-height: 110px;
}

.bz-ayuda {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}


.bz-proveedor-fijo {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-control);
    background: var(--s-fondo);
}

.bz-proveedor-fijo small {
    color: var(--s-tinta-3);
}

/* Detalle del proveedor */
.bz-lista {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.bz-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-control);
    background: var(--s-superficie);
    text-align: left;
}

.bz-item:hover {
    background: var(--s-fondo);
}

/* Panel principal */
.bz-inicio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bz-inicio-dato {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    background: var(--s-relleno);
    color: var(--s-tinta-2);
}

.bz-inicio-dato b {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.bz-inicio-dato.bz-pend { background: var(--s-aviso-suave); color: var(--s-aviso); }
.bz-inicio-dato.bz-ok { background: var(--s-ok-suave); color: var(--s-ok); }
.bz-inicio-dato.bz-no { background: var(--s-error-suave); color: var(--s-error); }

@media (max-width: 767.98px) {
    .bz-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .modalWinContent > .bz-encabezado {
        padding: 16px 52px 4px 16px;
    }

    .bz-detalle,
    .bz-formulario {
        padding: 12px 16px 16px;
    }

    .bz-datos {
        grid-template-columns: minmax(0, 1fr);
    }

    .bz-contestar-botones {
        flex: 1 0 100%;
    }

    .bz-contestar-botones .btn {
        flex: 1 1 0;
    }
}

/* Respuesta y motivo de rechazo en el detalle de la queja */
.bz-respuesta p {
    margin: 0;
}

.bz-respuesta .bz-subtitulo {
    display: block;
    margin-bottom: 2px;
}

.bz-motivo {
    background: var(--s-error-suave);
}

.bz-motivo .bz-subtitulo {
    color: var(--s-error);
}

.btn.btn-primary.bz-boton-rechazo {
    background: var(--s-error);
    border-color: var(--s-error);
}

.btn.btn-primary.bz-boton-rechazo:hover {
    background: #a50e0e;
    border-color: #a50e0e;
}

.bz-formulario > .form-floating > textarea.form-control {
    min-height: 120px;
}

/* ===== Perfil 4: Mis quejas ===== */

.p4-quejas-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px 4px;
}

.p4-q-dato {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.p4-q-dato b {
    font-size: 15px;
}

.p4-q-espera { background: #fef7e0; color: #b06000; }
.p4-q-ok { background: #e6f4ea; color: #137333; }
.p4-q-no { background: #fce8e6; color: #c5221f; }

.p4-queja + .p4-queja,
.p4-quejas-resumen + .p4-queja {
    border-top: 1px solid #ececf0;
}

.p4-queja > summary {
    list-style: none;
    cursor: pointer;
}

.p4-queja > summary::-webkit-details-marker {
    display: none;
}

.p4-queja > summary .p4-fila-titulo,
.p4-queja > summary .p4-fila-sub {
    display: block;
}

.p4-q-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 16px;
}

.p4-q-estado {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.p4-queja[open] > summary {
    background: #f7f7f9;
}

.p4-queja-detalle {
    display: grid;
    gap: 10px;
    padding: 4px 14px 14px 60px;
    background: #f7f7f9;
}

.p4-q-bloque p {
    margin: 2px 0 0;
    font-size: 14.5px;
    line-height: 1.4;
    color: #111;
    overflow-wrap: anywhere;
}

.p4-q-rotulo {
    font-size: 12.5px;
    font-weight: 600;
    color: #6c6c70;
}

.p4-q-respuesta,
.p4-q-motivo {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
}

.p4-q-respuesta .p4-q-rotulo { color: #137333; }
.p4-q-motivo .p4-q-rotulo { color: #c5221f; }

.p4-q-espera-texto {
    display: flex;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #8a4b00;
}

.p4-q-fecha {
    font-size: 12.5px;
    color: #8e8e93;
}

.p4-quejas .p4-grupo-accion {
    padding-top: 12px;
    border-top: 1px solid #ececf0;
}

.p4-quejas .p4-vacio + .p4-grupo-accion {
    border-top: 0;
    padding-top: 0;
}

.bz-ayuda > span:last-child {
    flex: none;
    white-space: nowrap;
    font-family: var(--s-dato);
}

/* ===== Perfil 4: icono Quejas de la barra inferior y su pantalla ===== */

.p4-tab-icono {
    position: relative;
    display: inline-flex;
}


/* Punto amarillo del icono Quejas: hay respuestas sin ver (mismo color y anillo que la bolita del lapiz) */
.p4-punto {
    position: absolute;
    top: -3px;
    right: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f9ab00;
    box-shadow: 0 0 0 2px #fff;
}

.p4-punto[hidden] {
    display: none;
}

/* La pestaña activa la marca sugerencias.p4_tab; Inicio deja de verse activo cuando se abre Quejas */
body.perfil4 .app-bottombar.tab-quejas button:first-child {
    color: var(--s-tinta-3);
    font-weight: 600;
}

body.perfil4 .app-bottombar button.activo {
    color: #111;
}

.p4-cabecera {
    padding: 24px 20px 6px;
}

.p4-cabecera-titulo {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #111;
}

.p4-cabecera-texto {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: #6c6c70;
}

.p4-pantalla > .p4-quejas-resumen {
    padding: 10px 16px 12px;
}

.p4-quejas-accion {
    padding: 16px;
}

.p4-q-nueva {
    color: #1a73e8;
    font-weight: 700;
}

.p4-queja-nueva > summary {
    box-shadow: inset 3px 0 0 #1a73e8;
}

/* ===== Perfil 4: lapiz con solicitud de domicilio en espera ===== */

.p4-editar.p4-editar-pendiente {
    position: relative;
}

.p4-editar.p4-editar-pendiente::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f9ab00; /* amarillo de aviso, de la familia del icono de reloj del aviso de solicitud en espera */
    box-shadow: 0 0 0 2px #fff;
}

/* Leyenda en el formulario de cambio de domicilio */
.dom-pendiente {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fef7e0;
    color: #6b4a12;
    font-size: 13.5px;
    line-height: 1.4;
}

.dom-pendiente > div {
    display: grid;
    gap: 3px;
}

.dom-pendiente b {
    font-size: 15px;
    color: #8a4b00;
}

.dom-pendiente-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fde9b8;
    color: #b06000;
}

/* Respuesta nueva a la solicitud de domicilio (se muestra una vez al trabajador) */
.dom-pendiente.dom-respuesta-ok { background: #e6f4ea; color: #1e4620; }
.dom-pendiente.dom-respuesta-ok b { color: #137333; }
.dom-pendiente.dom-respuesta-ok .dom-pendiente-icono { background: #ceead6; color: #137333; }
.dom-pendiente.dom-respuesta-no { background: #fce8e6; color: #5f1d18; }
.dom-pendiente.dom-respuesta-no b { color: #b3261e; }
.dom-pendiente.dom-respuesta-no .dom-pendiente-icono { background: #fad2cf; color: #b3261e; }

/* ===== Perfil 4: pantalla Quejas (estilo app) ===== */

.p4q {
    padding-bottom: 24px;
}

.p4q-cabecera {
    padding: 28px 20px 16px;
}

.p4q-cabecera h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #000;
}

.p4q-cabecera p {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: #5e5e5e;
}

.p4q-nueva {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: #000;
    color: #fff;
    text-align: left;
    transition: transform .12s ease;
}

.p4q-nueva:active {
    transform: scale(.98);
}

.p4q-nueva-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 19px;
}

.p4q-nueva-texto {
    display: grid;
    flex: 1;
    gap: 2px;
}

.p4q-nueva-texto b {
    font-size: 16px;
    font-weight: 700;
}

.p4q-nueva-texto small {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
}

.p4q-flecha {
    font-size: 18px;
    opacity: .7;
}

.p4q-segmentos {
    display: flex;
    gap: 4px;
    margin: 24px 16px 12px;
    padding: 4px;
    border-radius: 999px;
    background: #e8e8ed;
}

.p4q-segmentos button {
    flex: 1;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3c3c43;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.p4q-segmentos button span {
    margin-left: 2px;
    color: #8e8e93;
    font-weight: 500;
}

.p4q-segmentos button.activo {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.p4q-lista {
    display: grid;
    gap: 10px;
    margin: 0 16px;
}

.p4q-tarjeta {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.p4q-tarjeta[hidden] {
    display: none;
}

.p4q-tarjeta > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    list-style: none;
    cursor: pointer;
}

.p4q-tarjeta > summary::-webkit-details-marker {
    display: none;
}

.p4q-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 17px;
}

.p4q-espera .p4q-icono { background: #fef7e0; color: #b06000; }
.p4q-ok .p4q-icono { background: #e6f4ea; color: #137333; }
.p4q-no .p4q-icono { background: #fce8e6; color: #c5221f; }

.p4q-resumen {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.p4q-resumen b {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
    overflow-wrap: anywhere;
}

.p4q-tarjeta > summary {
    align-items: flex-start;
}

.p4q-tarjeta > summary .p4q-estado {
    margin-top: 2px;
}

.p4q-resumen small {
    font-size: 13.5px;
    color: #6b6b6b;
}

.p4q-estado {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3c3c43;
}

.p4q-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e37400;
}

.p4q-ok .p4q-punto { background: #1e8e3e; }
.p4q-no .p4q-punto { background: #d93025; }

.p4q-nueva-etq {
    padding: 2px 7px;
    border-radius: 999px;
    background: #1a73e8;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.p4q-con-nueva {
    box-shadow: 0 0 0 2px #1a73e8;
}

.p4q-detalle {
    padding: 0 16px 16px 66px;
}

.p4q-reporte {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.45;
    color: #222;
    overflow-wrap: anywhere;
}

.p4q-pasos {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.p4q-pasos::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e5e5ea;
}

.p4q-pasos li {
    position: relative;
    display: grid;
    gap: 1px;
}

.p4q-pasos li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e8e3e;
    box-shadow: 0 0 0 3px #fff;
}

.p4q-pasos li.actual::before { background: #e37400; }
.p4q-pasos li.rechazo::before { background: #d93025; }

.p4q-pasos b {
    font-size: 14.5px;
    color: #000;
}

.p4q-pasos small {
    font-size: 13px;
    color: #6b6b6b;
}

.p4q-burbuja {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 4px 14px 14px 14px;
    background: #f2f2f7;
    font-size: 14.5px;
    line-height: 1.4;
    color: #111;
    overflow-wrap: anywhere;
}

.p4q-burbuja > span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #6b6b6b;
}

.p4q-burbuja-motivo {
    background: #fce8e6;
}

.p4q-burbuja-motivo > span {
    color: #c5221f;
}

.p4q-sin-filtro {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    color: #6b6b6b;
}

.p4q-vacio {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 40px 32px 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.4;
    color: #6b6b6b;
}

.p4q-vacio b {
    font-size: 18px;
    color: #000;
}

.p4q-vacio-icono {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fff;
    color: #1a73e8;
    font-size: 30px;
}

/* ===== Perfil 4: pantalla Mi perfil (estilo app) ===== */

.p4p {
    padding-bottom: 28px;
}

.p4p-tarjeta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 16px;
    padding: 18px 16px;
    border-radius: 16px;
    background: #fff;
}

.p4p-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .02em;
}

.p4p-datos {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.p4p-datos b {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    overflow-wrap: anywhere;
}

.p4p-datos span {
    font-size: 14.5px;
    color: #3c3c43;
}

.p4p-datos small {
    font-size: 13px;
    color: #8e8e93;
}

.p4p-titulo {
    padding: 24px 20px 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6c6c70;
}

.p4p-grupo {
    margin: 0 16px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}

.p4p-grupo-salir {
    margin-top: 16px;
}

.p4p-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border: 0;
    background: #fff;
    text-align: left;
    transition: background-color .12s ease;
}

.p4p-fila + .p4p-fila {
    border-top: 1px solid #ececf0;
}

.p4p-fila:active {
    background: #f2f2f7;
}

.p4p-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2f2f7;
    color: #111;
    font-size: 17px;
}

.p4p-texto {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.p4p-texto b {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.p4p-texto small {
    font-size: 13.5px;
    color: #6b6b6b;
}

.p4p-flecha {
    font-size: 16px;
    color: #c7c7cc;
}

.p4p-salir .p4p-icono {
    background: #fce8e6;
    color: #c5221f;
}

.p4p-salir .p4p-texto b {
    color: #c5221f;
}


/* La lista de sesiones reutiliza usuarios_equiposXusuario.php: aqui va sin su encabezado de tarjeta */


.p4p-pie {
    margin: 28px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: #aeaeb2;
}


/* ===== Perfil 4: Inicio estilo app (plataform_tablero_inicio_p4.php, .p4i) ===== */

.p4i {
    padding-bottom: 28px;
}

.p4i-saludo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 20px 8px;
}

.p4i-saludo-texto {
    min-width: 0;
}

.p4i-hola {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #6b6b6b;
}

.p4i .p4-nombre {
    margin-top: 2px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #000;
}

.p4i .p4-datos {
    justify-content: flex-start;
    margin-top: 8px;
}

.p4i .p4i-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    margin: 2px 0 0;
    border: 0;
    font-size: 19px;
    transition: transform .12s ease;
}

.p4i .p4i-avatar:active {
    transform: scale(.94);
}

/* Titulos de seccion mas fuertes, como en apps */
.p4i .p4-seccion {
    padding: 26px 20px 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #000;
}

.p4i .p4-seccion-doble {
    padding-top: 22px;
    padding-bottom: 8px;
    padding-right: 16px;
}

/* Fecha del transporte como pastilla */
.p4i .p4-fechas {
    padding: 0 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.p4i .p4-flecha {
    width: 34px;
    height: 36px;
    font-size: 15px;
}

.p4i .p4-fecha,
.p4i .p4-fecha-boton {
    min-height: 36px;
    font-size: 13.5px;
    font-weight: 600;
    color: #111;
}

.p4i .p4-grupo {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* Tarjeta del transporte */
.p4i .p4-horario {
    padding: 18px 18px 14px;
}

.p4i .p4-hora {
    margin-top: 4px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.p4i .p4-hora-pendiente {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
}

.p4i .p4-dato {
    margin-left: 18px;
    padding: 12px 18px 12px 0;
}

.p4i .p4-grupo-accion {
    padding: 8px 16px 16px;
}

.p4i .p4-nota {
    padding: 10px 22px 0;
}

.p4i .p4-vacio {
    padding: 30px 24px;
}

.p4i .p4-vacio > .bi {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f2f2f7;
    font-size: 26px;
    color: #6b6b6b;
}

.p4i .p4-vacio-titulo {
    margin-top: 12px;
    font-size: 17px;
}

/* Tarjeta de domicilio */
.p4i .p4i-casa .p4-fila {
    gap: 14px;
    padding: 16px;
}

.p4i-casa-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 19px;
}

.p4i .p4i-casa .p4-fila-titulo {
    font-size: 17px;
    font-weight: 600;
}

.p4i .p4-editar {
    width: 42px;
    height: 42px;
    font-size: 16px;
}

.p4i .p4-fecha,
.p4i .p4-fecha-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    white-space: nowrap;
}

.p4i .p4-tipo {
    background: #e5e5ea;
    color: #1c1c1e;
}

/* Tarjeta de cuenta del inicio del perfil 4 (reemplaza el saludo grande) */
.p4i-cuenta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    margin: 20px 16px 0;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    text-align: left;
    transition: transform .12s ease, background-color .12s ease;
}

.p4i-cuenta:active {
    transform: scale(.985);
    background: #f7f7f9;
}

.p4i .p4i-cuenta .p4i-avatar {
    width: 52px;
    height: 52px;
    margin: 0;
    font-size: 19px;
}

.p4i-cuenta-texto {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.p4i-cuenta .p4i-hola {
    font-size: 13px;
    font-weight: 500;
    color: #6b6b6b;
}

.p4i .p4i-cuenta .p4-nombre {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #000;
}

.p4i-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.p4i-chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: #f2f2f7;
    color: #3c3c43;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.p4i-cuenta-flecha {
    flex: none;
    font-size: 16px;
    color: #c7c7cc;
}

/* Encabezado con franja de color y tarjeta encimada (inicio del perfil 4) */
.p4i-banda {
    padding: 22px 16px 58px;
    background: linear-gradient(165deg, #f7f7f8 0%, #d6d6d8 55%, #9c9ca0 100%);
}

.p4i-banda-perfil {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    text-align: left;
}

.p4i-banda-perfil > .bi {
    flex: none;
    font-size: 16px;
    color: #fff;
    opacity: .9;
}

.p4i-banda-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 58px;
    height: 58px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d5d5d7;
    color: #5f6368;
    font-size: 20px;
    font-weight: 700;
}

.p4i-banda-texto {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.p4i-banda .p4i-hola {
    font-size: 13.5px;
    font-weight: 500;
    color: #3c4043;
}

.p4i .p4i-banda .p4-nombre {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #000;
}

.p4i-resumen {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -40px 16px 0;
    padding: 14px 4px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .10);
}

.p4i-resumen > div,
.p4i-resumen > button {
    display: grid;
    gap: 2px;
    padding: 2px 12px;
    border: 0;
    background: none;
    text-align: left;
}

.p4i-resumen > * + * {
    border-left: 1px solid #ececf0 !important;
}

.p4i-resumen span {
    font-size: 12.5px;
    color: #6b6b6b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p4i-resumen b {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

/* Con la franja, la primera seccion no necesita tanto aire arriba */
.p4i-resumen + #p4_transporte .p4-seccion {
    padding-top: 22px;
}

/* El encabezado de la app queda blanco; la franja va justo debajo */
body.perfil4 .app-main > .p4i {
    padding-top: 0;
}

.p4i-resumen b small {
    font-size: 12.5px;
    font-weight: 500;
    color: #6b6b6b;
}

/* ===== Rutas de servicio (servicios_listar_work.php), rediseño 2026-11-09 ===== */
.rs-nota-ocultas {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

.rs-icono-rutas { color: #1a73e8; background: #e8f0fe; }
.rs-icono-entrada { color: #137333; background: #e6f4ea; }
.rs-icono-salida { color: #b06000; background: #fef3d6; }
.rs-icono-unidad { color: #4b4f56; background: var(--s-relleno); }

.rs-bloque {
    padding: 18px 20px;
    border-radius: var(--s-r-tarjeta);
}

.rs-bloque-cab { margin-bottom: 12px; }

.rs-provs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.rs-prov {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 6px 12px;
    padding: 14px 16px;
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    background: var(--s-superficie);
    color: var(--s-tinta);
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

@media (hover: hover) {
    .rs-prov:not(:disabled):hover { border-color: var(--s-relleno-2); box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
}

.rs-prov[aria-pressed="true"] {
    border-color: var(--s-tinta);
    box-shadow: 0 0 0 1px var(--s-tinta);
}

.rs-prov-vacio { opacity: .62; cursor: default; }

.rs-prov-color {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.rs-prov-texto { display: grid; gap: 2px; min-width: 0; }

.rs-prov-nombre { font-size: 15px; font-weight: 700; }

.rs-prov-clave {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--s-relleno);
    color: var(--s-tinta-2);
    font-family: var(--s-dato);
    font-size: 11.5px;
    font-weight: 500;
}

.rs-prov-dir {
    overflow: hidden;
    font-size: 12.5px;
    color: var(--s-tinta-3);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rs-prov-cifras,
.rs-prov-barra,
.rs-prov-sin,
.rs-prov-falta { grid-column: 2; }

.rs-prov-sin,
.rs-prov-falta { justify-self: start; }

.rs-prov-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--s-tinta-2);
}

.rs-prov-cifras b {
    font-size: 15px;
    color: var(--s-tinta);
    font-variant-numeric: tabular-nums;
}

/* Barra: verde = entradas, ambar = salidas */
.rs-prov-barra {
    display: block;
    height: 6px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #f9ab00;
}

.rs-prov-barra i { display: block; height: 100%; background: #1e8e3e; }

.rs-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rs-filtros .chip { cursor: pointer; }

.rs-cuenta {
    font-size: 12px;
    font-weight: 600;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

.rs-tabla { font-size: 13.5px; }

.rs-tabla > thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--s-tinta-3);
    white-space: nowrap;
}

.rs-tabla > tbody td { vertical-align: middle; }

.rs-pr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 180px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rs-pr > span {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.rs-clave {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--s-dato);
    font-weight: 600;
}

.rs-color {
    flex: none;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.rs-turno {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    font-family: var(--s-dato);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.rs-turno-entrada { background: var(--s-ok-suave); color: var(--s-ok); }
.rs-turno-salida { background: var(--s-aviso-suave); color: var(--s-aviso); }


.rs-nombre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--s-tinta);
    font-weight: 600;
    text-align: left;
}

.rs-nombre .bi { font-size: 11px; color: var(--s-tinta-3); transition: transform .15s; }

@media (hover: hover) {
    .rs-nombre:hover { color: var(--s-foco); }
    .rs-nombre:hover .bi { color: var(--s-foco); transform: translateX(2px); }
}

.rs-num,
.rs-asig {
    font-family: var(--s-dato);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rs-asig { display: inline-flex; align-items: center; gap: 6px; }
.rs-asig .bi { color: var(--s-tinta-3); }

.rs-falta-txt { font-size: 12.5px; color: var(--s-tinta-3); }

/* Estado de la ruta (2026-11-11): 4 segmentos = inicio, destino, paradas y trayecto */
.rs-est { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rs-est-pasos { display: inline-flex; gap: 2px; }
.rs-est-pasos i { width: 8px; height: 8px; border-radius: 2px; background: #e0e0e3; }
.rs-est-ok { color: #137333; }
.rs-est-ok .rs-est-pasos i { background: #1e8e3e; }
.rs-est-falta { color: var(--s-aviso); }
.rs-est-falta .rs-est-pasos i.ok { background: #f9ab00; }

.rs-acciones { white-space: nowrap; text-align: right; }

.rs-accion {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--s-tinta-2);
}

@media (hover: hover) {
    .rs-accion:hover { background: var(--s-relleno); color: var(--s-tinta); }
    .rs-accion-borrar:hover { background: var(--s-error-suave); color: var(--s-error); }
}

@media (max-width: 575.98px) {
    .rs-bloque { padding: 14px; }
    .rs-provs { grid-template-columns: 1fr; }
}

/* En tarjetas (celular) la barrita de color movia la linea base: se centra cada fila */
@media (max-width: 767.98px) {
    table.tabla-tarjetas.rs-tabla > tbody > tr > td { align-items: center; }
    .rs-color { height: 16px; }
}

/* ===== Detalles de ruta (servicios_listar_paradas.php), rediseño 2026-11-09 ===== */
.rd { display: grid; gap: 14px; padding: 14px 16px 16px; }

/* Detalles de ruta trae encabezado propio: sin la franja vacia de 52 px del modal (2026-11-09) */
.modalWin:has(> .modalWinContent > .rd) > .modalWinTitle {
    height: 0 !important;
    background: transparent !important;
    z-index: 3;
}

.modalWin:has(> .modalWinContent > .rd) > .modalWinContent {
    top: var(--seguro-arriba, 0px) !important;
}
.rd-sin-tipo { color: var(--s-tinta-3); }

.rd-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-right: 52px; /* espacio para la X del modal */
}

.rd-cab-texto { display: grid; gap: 4px; min-width: 0; flex: 1 1 420px; }

.rd-proveedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13.5px;
    color: var(--s-tinta-2);
}

.rd-proveedor-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rd-prov) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-prov) 30%, #fff);
}

.rd-proveedor-color {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rd-prov);
}

.rd-proveedor-nombre { font-weight: 700; color: var(--s-tinta); }

.rd-proveedor-dato { font-size: 12px; color: var(--s-tinta-3); }

.rd-proveedor-dato::before { content: "·"; margin-right: 8px; font-family: var(--s-letra); }

.rd-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}


.rd-titulo .rs-turno { height: 28px; font-size: 13.5px; }

.rd-nombre { min-width: 0; font-size: 17px; font-weight: 700; color: var(--s-tinta-2); }


.rd-cab-acciones { display: flex; gap: 8px; }


.rd-sin { font-size: 14px; font-weight: 600; color: var(--s-tinta-3); }

.rd-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.rd-mapa-caja {
    position: sticky;
    top: 0;
}

.rd-mapa {
    width: 100%;
    height: 68vh;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-relleno);
}

.rd-leyenda {
    position: absolute;
    left: 12px;
    bottom: 26px;
    z-index: 500;
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
    font-size: 12px;
    color: var(--s-tinta-2);
    pointer-events: none;
}

.rd-leyenda span { display: inline-flex; align-items: center; gap: 6px; }

.rd-ley-punto { width: 10px; height: 10px; border-radius: 50%; }

.rd-lista {
    padding: 16px 18px 8px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
}

.rd-lista-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }


.rd-vacio {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 32px 12px;
    color: var(--s-tinta-3);
    text-align: center;
}

.rd-vacio .bi { font-size: 28px; }
.rd-vacio b { color: var(--s-tinta); }

/* Ruta incompleta (2026-11-11): reemplaza al mapa cuando falta inicio o destino */
.rd-chip-incompleta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--s-aviso-suave); color: var(--s-aviso);
    font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: middle;
}
.rd-incompleta {
    display: grid; justify-items: center; align-content: center; gap: 10px;
    min-height: 360px; padding: 32px 24px;
    border: 1px dashed var(--s-linea); border-radius: var(--s-r-tarjeta);
    background: var(--s-fondo); text-align: center; color: var(--s-tinta-3);
}
.rd-incompleta > b { font-size: 18px; color: var(--s-tinta); }
.rd-incompleta p { max-width: 380px; margin: 0; }
.rd-incompleta p b { color: var(--s-tinta); }
.rd-incompleta-icono {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--s-aviso-suave); color: var(--s-aviso); font-size: 26px;
}
.rd-req { display: grid; gap: 8px; width: 100%; max-width: 340px; margin: 6px 0; padding: 0; list-style: none; text-align: left; }
.rd-req li {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: 12px; background: #fff; border: 1px solid var(--s-linea);
}
.rd-req li .bi { font-size: 20px; }
.rd-req li span { display: grid; line-height: 1.25; }
.rd-req li b { color: var(--s-tinta); }
.rd-req li small { color: var(--s-tinta-3); }
.rd-req-ok .bi { color: #1e8e3e; }
.rd-req-falta .bi { color: #d93025; }
.rd-incompleta-nota { max-width: 360px; font-size: 12px; }

/* Linea de tiempo */
.rd-paradas { margin: 0; padding: 0; list-style: none; }

.rd-parada {
    --rd-tono: #0066cc;
    --rd-tono-suave: #e5f0fb;
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 12px;
}

.rd-tipo-inicio { --rd-tono: #1b910e; --rd-tono-suave: #e6f4e3; }
.rd-tipo-destino { --rd-tono: #d93025; --rd-tono-suave: #fce8e6; }

/* Linea que une los puntos */
.rd-parada::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: var(--s-linea);
}

.rd-parada:last-child::before { display: none; }

.rd-marca {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rd-tono-suave);
    color: var(--rd-tono);
    font-size: 14px;
    box-shadow: 0 0 0 3px var(--s-superficie);
}

.rd-parada-cuerpo {
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f1f3;
}

.rd-parada:last-child .rd-parada-cuerpo { border-bottom: 0; }

.rd-parada-fila { display: flex; align-items: flex-start; gap: 14px; }

.rd-hora {
    flex: none;
    min-width: 54px;
    font-family: var(--s-dato);
    font-size: 19px;
    font-weight: 700;
    line-height: 32px;
    font-variant-numeric: tabular-nums;
}

.rd-parada-texto { display: grid; gap: 1px; min-width: 0; padding-top: 2px; }

.rd-parada-tipo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rd-tono);
}

.rd-parada-nombre { font-size: 14.5px; font-weight: 600; }

.rd-parada-dir { font-size: 12.5px; color: var(--s-tinta-3); }

.rd-parada-acciones {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.rd-parada-acciones .rs-accion { width: 30px; height: 30px; font-size: 14px; color: var(--s-tinta-3); }

/* Resumen: una tarjeta segmentada (como la del inicio del perfil 4) */
.rd-resumen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 4px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.rd-resumen > div { display: grid; gap: 2px; padding: 2px 20px; min-width: 0; }
.rd-resumen > div + div { border-left: 1px solid var(--s-linea); }
.rd-resumen span { font-size: 12.5px; font-weight: 600; color: var(--s-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-resumen b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rd-resumen small { font-size: 14px; font-weight: 600; color: var(--s-tinta-2); }
/* Trayecto generado con Google (2026-11-10) */
.rd-resumen em.rd-tray-auto,
.rd-resumen em.rd-tray-sin { font-style: normal; font-size: 12px; font-weight: 600; justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-resumen em.rd-tray-auto { color: #1967d2; background: #e8f0fe; border-radius: 999px; padding: 2px 9px; }
.rd-resumen em.rd-tray-sin { color: var(--s-tinta-3); }
/* Menu Opciones de Detalles de ruta (2026-11-10) */
.rd-menu { min-width: 340px; padding: 6px; border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(16, 24, 40, .18); }
.rd-menu .dropdown-header { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-tinta-3); }
.rd-menu .dropdown-divider { margin: 6px 4px; }
.rd-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px; white-space: normal; }
.rd-menu-item > i { flex: none; width: 20px; margin-top: 1px; font-size: 16px; color: var(--s-tinta-2); text-align: center; }
.rd-menu-item span { display: grid; gap: 1px; min-width: 0; }
.rd-menu-item b { font-size: 13.5px; font-weight: 600; color: var(--s-tinta-1, #202124); }
.rd-menu-item small { font-size: 12px; line-height: 1.35; color: var(--s-tinta-3); }
.rd-menu-item:hover, .rd-menu-item:focus-visible { background: #f1f3f4; }
.rd-menu-item .bi-magic { color: #1a73e8; }
.rd-menu-peligro > i, .rd-menu-peligro b { color: #c5221f; }
.rd-menu-peligro:hover { background: #fce8e6; }
i.rd-menu-color { width: 18px; height: 18px; margin: 1px 1px 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
i.rd-menu-color-vacio { background: repeating-linear-gradient(45deg, #dadce0 0 3px, #fff 3px 6px); }
.rd-resumen em.rd-tray-manual { color: #3c4043; background: #f1f3f4; }

/* Origen del trayecto sobre el mapa (sugerencia de Google o trazo a mano), arriba al centro */
.rd-tray-chip {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500;
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 140px);
    padding: 7px 8px 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .16); font-size: 12.5px; color: var(--s-tinta-2);
}
.rd-tray-chip > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8f0fe; color: #1967d2; font-size: 14px; }
.rd-tray-chip-manual > i { background: #f1f3f4; color: #3c4043; }
.rd-tray-chip span { display: grid; min-width: 0; line-height: 1.25; }
.rd-tray-chip b { color: var(--s-tinta-1, #202124); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tray-chip small { font-size: 11.5px; color: var(--s-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tray-quitar {
    flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px;
    padding: 6px 11px; background: #fce8e6; color: #c5221f; font-weight: 700; font-size: 12px; cursor: pointer;
}
.rd-tray-quitar:hover { background: #fad2cf; }
.rd-tray-quitar:focus-visible { outline: 2px solid #c5221f; outline-offset: 2px; }

/* Trazo a mano: barra flotante arriba al centro, cursor de precision y marcas del mapa sin clic */
.rd-trazando .rd-opciones { display: none; }
.mp-trazando, .mp-trazando .leaflet-interactive { cursor: crosshair !important; }
.mp-trazando .leaflet-marker-icon, .mp-trazando .leaflet-tooltip, .mp-trazando canvas { pointer-events: none !important; }
.rd-trazo {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600;
    display: flex; align-items: center; gap: 14px; max-width: calc(100% - 140px);
    padding: 8px 8px 8px 16px; border-radius: 16px; background: #202124; color: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .28); font-size: 13px;
}
.rd-trazo-info { display: grid; min-width: 0; line-height: 1.25; }
.rd-trazo-info b { font-weight: 700; white-space: nowrap; }
.rd-trazo-info small { color: #bdc1c6; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rd-trazo-acciones { display: flex; gap: 6px; flex: none; }
.rd-trazo-btn {
    display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.rd-trazo-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.rd-trazo-btn:disabled { opacity: .4; cursor: default; }
.rd-trazo-btn:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.rd-trazo-texto { font-size: 13px; }
.rd-trazo-guardar { background: #1a73e8; }
.rd-trazo-guardar:hover:not(:disabled) { background: #1765cc; }


.rd-cerca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    margin-top: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--s-relleno);
    color: var(--s-tinta);
    font-size: 12.5px;
    font-weight: 600;
}

.rd-cerca .bi-chevron-down,
.rd-cerca .bi-chevron-up { font-size: 11px; }

.rd-cerca-cero { background: none; padding-left: 0; color: var(--s-tinta-3); font-weight: 500; cursor: default; }

@media (hover: hover) {
    .rd-cerca:not(:disabled):hover { background: var(--s-relleno-2); }
}

.rd-cercanos {
    margin: 10px 0 0 68px;
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--s-fondo);
}

.rd-cercanos-vacio { margin: 6px 0; font-size: 12.5px; color: var(--s-tinta-3); }

.rd-cercanos-tabla { width: 100%; font-size: 12.5px; }

.rd-cercanos-tabla th {
    padding: 6px 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--s-tinta-3);
    border-bottom: 1px solid var(--s-linea);
}

.rd-cercanos-tabla td { padding: 6px; border-bottom: 1px solid var(--s-linea); vertical-align: middle; }
.rd-cercanos-tabla tr:last-child td { border-bottom: 0; }
.rd-cercanos-tabla .estado { margin-left: 4px; padding: 1px 8px; font-size: 11px; }
.rd-programado td { background: var(--s-ok-suave); }

.rd-mono { font-family: var(--s-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }


@media (max-width: 991.98px) {
    .rd-cuerpo { grid-template-columns: 1fr; }
    .rd-mapa-caja { position: static; }
    .rd-mapa { height: 45vh; min-height: 280px; }
    .rd-leyenda { position: static; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; padding: 0 4px; background: none; box-shadow: none; }
}

@media (max-width: 575.98px) {

    .rd-resumen > div { padding: 2px 12px; }
    .rd-resumen b { font-size: 20px; }
    .rd-cab { padding-right: 0; }
    .rd-cab-texto { padding-right: 48px; }
    .rd-cab-acciones { width: 100%; }
    .rd-cab-acciones .btn-primary { flex: 1; }
    .rd-cab-acciones { flex-wrap: wrap; }
    .rd-menu { min-width: 0; width: calc(100vw - 32px); max-width: 360px; }
    .rd-tray-chip, .rd-trazo { left: 56px; right: 62px; top: 10px; transform: none; max-width: none; }
    .rd-trazo { flex-wrap: wrap; gap: 8px; padding: 10px; }
    .rd-trazo-acciones { width: 100%; }
    .rd-trazo-guardar { flex: 1; }
    .rd-resumen em.rd-tray-auto { white-space: normal; }
    .rd-lista { padding: 14px 12px 4px; }
    .rd-cercanos { margin-left: 0; }
    .rd-hora { font-size: 17px; min-width: 48px; }
}

/* ===== Mapa de rutas estilo Uber/Google (servicios.render_servicio), 2026-11-09 ===== */
.mp-icono { background: none !important; border: 0 !important; }

/* Parada: punto blanco con anillo del color de la ruta */
.mp-parada {
    display: block;
    width: 16px;
    height: 16px;
    border: 4px solid var(--mp-color, #1a73e8);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .12s;
}

.mp-parada:hover { transform: scale(1.25); }

/* Inicio: circulo verde con icono */
.mp-inicio {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #1e8e3e;
    color: #fff;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Destino: alfiler rojo tipo Google Maps */
.mp-destino {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #d93025;
    color: #fff;
    font-size: 12px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.mp-destino .bi { transform: rotate(45deg); }

/* Etiquetas de hora: pildora blanca con sombra */
.leaflet-tooltip.mp-etq {
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #202124;
    font-family: var(--s-dato);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    white-space: nowrap;
}

.leaflet-tooltip.mp-etq::before { display: none; }

.leaflet-tooltip.mp-etq b { font-family: var(--s-letra); font-weight: 700; margin-right: 2px; }
.leaflet-tooltip.mp-etq-inicio b { color: #1e8e3e; }
.leaflet-tooltip.mp-etq-destino b { color: #d93025; }

/* Al alejar el mapa solo quedan las horas de inicio y destino */
.mp-lejos .leaflet-tooltip.mp-etq:not(.mp-etq-fija) { display: none; }

/* Simbologia de Detalles de ruta con las mismas marcas */
.rd-ley-anillo { box-sizing: border-box; border: 3px solid var(--c); background: #fff; }
.rd-ley-borde { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, .12); }

/* Parada elegida en la lista: marca mas grande y hora en etiqueta negra (2026-11-09) */
.mp-activa .mp-parada {
    transform: scale(1.45);
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .4);
}

.mp-activa .mp-inicio,
.mp-activa .mp-destino { box-shadow: 0 0 0 4px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .4); }

.leaflet-tooltip.mp-etq.mp-etq-activa {
    display: block !important;
    z-index: 1000;
    background: #000;
    color: #fff;
    font-size: 12.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.leaflet-tooltip.mp-etq.mp-etq-activa b { color: #fff; }

/* En la lista */
.rd-parada { cursor: pointer; }

.rd-parada .rd-parada-cuerpo { transition: background .15s; border-radius: 12px; }

@media (hover: hover) {
    .rd-parada:hover .rd-parada-nombre { color: var(--s-foco); }
}

.rd-parada.rd-activa .rd-parada-cuerpo {
    margin-left: -8px;
    padding-left: 8px;
    background: var(--s-relleno);
}

.rd-parada.rd-activa .rd-marca { background: #000; color: #fff; }
.rd-cerca { white-space: nowrap; }

/* ===== Color por ruta (2026-11-09) ===== */
button.rs-color { padding: 0; border: 0; cursor: pointer; }
.rs-color { width: 10px; height: 24px; border-radius: 4px; }
.rs-color-vacio { background: repeating-linear-gradient(45deg, #fff 0 3px, #dadce0 3px 5px) !important; box-shadow: inset 0 0 0 1px #c4c7c5; }

@media (hover: hover) {
    button.rs-color:hover { transform: scaleX(1.5); box-shadow: 0 0 0 2px var(--s-superficie), 0 0 0 3px var(--s-tinta-3); }
}

.rc-pop {
    position: fixed;
    z-index: 3000;
    width: 252px;
    padding: 14px;
    border-radius: 16px;
    background: var(--s-superficie);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .22);
}

.rc-pop-tit { font-size: 14px; font-weight: 600; }
.rc-pop-sub { margin-bottom: 10px; font-size: 12px; color: var(--s-tinta-3); }

.rc-pop-paleta { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }

.rc-pop-c {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .1s;
}

.rc-pop-c:hover { transform: scale(1.15); }
.rc-pop-c.activo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--s-tinta); }

.rc-pop-otro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rc-pop-otro input { width: 32px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Identificador de la ruta en Detalles: la clave sobre el color de la ruta */
.rd-id {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--rd-id, #5f6368);
    color: var(--rd-id-txt, #fff);
    font-family: var(--s-dato);
    font-size: 20px;
    font-weight: 800;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.rd-id-sin { background: var(--s-relleno); color: var(--s-tinta); box-shadow: inset 0 0 0 1px var(--s-linea); }

.rd-solo-impresion { display: none; }

/* Impresion del trayecto: hoja horizontal con encabezado, identificador y mapa en su color */
body.rd-imprimiendo .rd-mapa { width: 1000px !important; height: 600px !important; max-width: none; }

@media print {
    @page { size: landscape; margin: 10mm; }

    body.rd-imprimiendo { background: #fff !important; }
    body.rd-imprimiendo > *:not(#listarServiciosparadas) { display: none !important; }
    body.rd-imprimiendo #listarServiciosparadas {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }
    body.rd-imprimiendo .modalWinTitle,
    body.rd-imprimiendo .modalWinCloseBtn,
    body.rd-imprimiendo .rd-tray-quitar,
    body.rd-imprimiendo .rd-trazo,
    body.rd-imprimiendo .rd-cab-acciones,
    body.rd-imprimiendo .rd-lista,
    body.rd-imprimiendo .rd-ley-trab,
    body.rd-imprimiendo .leaflet-control-container,
    body.rd-imprimiendo #map3 canvas { display: none !important; }
    body.rd-imprimiendo .modalWinContent { position: static !important; overflow: visible !important; }
    body.rd-imprimiendo .rd { padding: 0; gap: 10px; }
    body.rd-imprimiendo .rd-cab { padding-right: 0; }
    body.rd-imprimiendo .rd-cuerpo { display: block; }
    body.rd-imprimiendo .rd-mapa-caja { position: relative; }
    body.rd-imprimiendo .rd-mapa { border-radius: 8px; }
    body.rd-imprimiendo .rd-resumen { box-shadow: none; padding: 8px 4px; }
    body.rd-imprimiendo .rd-solo-impresion { display: block; font-size: 11px; color: #5f6368; }
    body.rd-imprimiendo * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Mapa general con panel de capas (mapa_general.php), estilo Google Maps, 2026-11-09 ===== */
.mg { position: absolute; inset: 0; overflow: hidden; }
.mg-mapa { position: absolute; inset: 0; background: #e8eaed; }

.mg-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    bottom: 12px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    width: 340px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--s-superficie);
    box-shadow: 0 2px 6px rgba(60, 64, 67, .15), 0 8px 24px rgba(60, 64, 67, .18);
}

.mg-panel.abierto { display: flex; }

/* Con el panel abierto, el zoom de Leaflet se recorre a su derecha */
.mg:has(.mg-panel.abierto) .leaflet-top.leaflet-left { left: 352px; }

.mg-panel-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 10px 12px;
    border-bottom: 1px solid var(--s-linea);
}

.mg-buscar {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--s-relleno);
    color: var(--s-tinta-3);
}

.mg-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--s-tinta); font-size: 14.5px; }

.mg-cerrar,
.mg-link { border: 0; background: none; }

.mg-cerrar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--s-tinta-2);
}

.mg-cerrar:hover { background: var(--s-relleno); }

.mg-panel-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }

.mg-seccion { padding: 12px 6px 4px; }
.mg-seccion + .mg-seccion { border-top: 1px solid var(--s-linea); }

.mg-titulo {
    margin: 0 0 4px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--s-tinta-3);
}

.mg-titulo-fila { display: flex; align-items: baseline; gap: 8px; padding-right: 10px; }
.mg-titulo-fila .mg-titulo { margin-right: auto; }
.mg-visibles { font-size: 12px; color: var(--s-tinta-3); }
.mg-link { padding: 0; color: var(--s-foco); font-size: 12.5px; font-weight: 600; }

.mg-fila,
.mg-prov-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
}

.mg-fila:hover,
.mg-prov-cab:hover { background: var(--s-fondo); }

.mg-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .1); }

.mg-fila-texto { display: grid; flex: 1; min-width: 0; font-size: 14.5px; }
.mg-fila-texto small { font-size: 12px; color: var(--s-tinta-3); }

.mg-cuenta { font-size: 12.5px; color: var(--s-tinta-3); font-variant-numeric: tabular-nums; }

/* Interruptor estilo Material */
.mg-switch {
    flex: none;
    position: relative;
    width: 36px;
    height: 20px;
    margin: 0;
    border-radius: 999px;
    background: #bdc1c6;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background .15s;
}

.mg-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s;
}

.mg-switch:checked { background: #1a73e8; }
.mg-switch:checked::after { transform: translateX(16px); }
.mg-switch:indeterminate { background: #8ab4f8; }
.mg-switch:indeterminate::after { transform: translateX(8px); }
.mg-switch:focus-visible { outline: 2px solid var(--s-foco); outline-offset: 2px; }

.mg-prov-abrir {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--s-tinta);
    text-align: left;
}

.mg-prov-abrir .bi { color: var(--s-tinta-3); transition: transform .15s; }
.mg-prov.desplegado .mg-prov-abrir .bi { transform: rotate(180deg); }

.mg-claves { padding: 2px 4px 8px 20px; }

.mg-clave {
    display: grid;
    gap: 4px;
    padding: 8px 8px 8px 10px;
    border-radius: 12px;
}

.mg-clave + .mg-clave { margin-top: 2px; }
.mg-clave.activa { background: var(--s-fondo); }

.mg-clave-sel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--s-tinta);
    text-align: left;
}

.mg-clave-color { flex: none; width: 6px; height: 28px; border-radius: 3px; }
.mg-clave-texto { display: grid; min-width: 0; }
.mg-clave-texto b { font-family: var(--s-dato); font-size: 14px; }
.mg-clave-texto small { overflow: hidden; font-size: 12px; color: var(--s-tinta-3); white-space: nowrap; text-overflow: ellipsis; }

.mg-turnos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 16px; }

.mg-turno {
    min-width: 36px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--s-linea);
    border-radius: 8px;
    background: var(--s-superficie);
    color: var(--s-tinta-2);
    font-family: var(--s-dato);
    font-size: 12px;
    font-weight: 700;
    transition: background .12s, color .12s, border-color .12s;
}

.mg-turno:hover { border-color: var(--s-tinta-3); }
.mg-turno-entrada[aria-pressed="true"] { border-color: transparent; background: var(--s-ok-suave); color: var(--s-ok); }
.mg-turno-salida[aria-pressed="true"] { border-color: transparent; background: var(--s-aviso-suave); color: var(--s-aviso); }
.mg-turno.cargando { opacity: .55; }

.mg-acercar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--s-tinta-2);
}

.mg-acercar:hover { background: var(--s-relleno); color: var(--s-foco); }

.mg-vacio { padding: 8px 10px; font-size: 13px; color: var(--s-tinta-3); }

.mg-abrir {
    position: absolute;
    top: 12px;
    left: 56px;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--s-superficie);
    color: var(--s-tinta);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(60, 64, 67, .25);
}

/* Celular: el panel es una hoja que sube desde abajo */
@media (max-width: 767.98px) {
    /* El mapa termina arriba de la barra inferior de la app */
    body:has(.app-bottombar) .mg { bottom: calc(var(--app-barra-inferior, 62px) + var(--seguro-abajo, 0px)); }
    .mg-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 72%; }
    .mg:has(.mg-panel.abierto) .leaflet-top.leaflet-left { left: 0; }
    .mg-abrir { top: 12px; left: 56px; }
}

.mg-pista { margin: 6px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--s-info-suave); color: var(--s-info); font-size: 13px; }

/* Seleccion visible de rutas en el panel (2026-11-09) */
.mg-ayuda { margin: 2px 8px 6px; font-size: 12px; color: var(--s-tinta-3); }

.mg-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid #80868b;
    border-radius: 5px;
    background: #fff;
    color: #fff;
    font-size: 13px;
    transition: background .12s, border-color .12s;
}

.mg-check .bi { display: none; grid-area: 1 / 1; }
.mg-clave.activa .mg-check { border-color: #1a73e8; background: #1a73e8; }
.mg-clave.activa:not(.parcial) .mg-check .bi-check-lg { display: block; }
.mg-clave.parcial .mg-check .bi-dash-lg { display: block; }

.mg-clave { cursor: default; }
.mg-clave-sel { cursor: pointer; width: 100%; }
.mg-clave:not(.activa):hover { background: var(--s-fondo); }
.mg-clave.activa { background: #e8f0fe; }
.mg-turnos { padding-left: 46px; }

/* Turno apagado: contorno gris; encendido: relleno (verde entrada, ambar salida) */
.mg-turno[aria-pressed="false"] { border-color: #dadce0; background: #fff; color: var(--s-tinta-3); }
.mg-turno-entrada[aria-pressed="true"] { border-color: #188038; background: #188038; color: #fff; }
.mg-turno-salida[aria-pressed="true"] { border-color: #e37400; background: #e37400; color: #fff; }

/* Filtro "Solo cerca de las rutas visibles" (2026-11-09) */
.mg-fila-cerca { margin-top: 4px; }
.mg-fila-cerca.activa { background: #e8f0fe; }
.mg-cerca-icono { display: grid; place-items: center; flex: none; width: 12px; color: #1a73e8; font-size: 14px; }

/* El mapa general ocupa todo el ancho: no aplica el limite de 1480 px de pantallas grandes (barras grises) */
body:not(.perfil4) .app-main > .mg { max-width: none; margin: 0; }
body:not(.perfil4) .app-main:has(> .mg) { overflow: hidden !important; scrollbar-gutter: auto !important; }

/* Resultados de busqueda de trabajadores en el panel del mapa (2026-11-09) */
.mg-resultados { padding-bottom: 8px; }

.mg-res {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--s-tinta);
    text-align: left;
}

.mg-res:hover,
.mg-res:focus-visible { background: var(--s-fondo); }
.mg-res > .bi { color: var(--s-tinta-3); }

.mg-res-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
}

.mg-res-vacio { display: flex; gap: 8px; margin: 4px 10px; font-size: 13px; color: var(--s-tinta-3); }

/* Alfiler del trabajador buscado en el mapa general (se queda hasta borrar la busqueda) */
.mg-alfiler {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #1a73e8;
    color: #fff;
    font-size: 15px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.mg-alfiler .bi { transform: rotate(45deg); }

/* ===== Detalles de parada (mapa_detalles_parada.php), rediseño 2026-11-09 ===== */
.pd-tipo { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-tinta-3); }
.pd-titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pd-dir { margin: 0; font-size: 14px; color: var(--s-tinta-2); }

.pd-ruta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
    color: var(--s-tinta);
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

@media (hover: hover) {
    .pd-ruta:hover { border-color: var(--s-relleno-2); box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
}

.pd-ruta .rd-id { height: 34px; min-width: 40px; font-size: 17px; }
.pd-ruta-texto { display: grid; flex: 1; min-width: 0; }
.pd-ruta-texto b { font-size: 14.5px; font-weight: 700; }
.pd-ruta-texto small { font-size: 12.5px; color: var(--s-tinta-3); }
.pd-ruta-ver { flex: none; font-size: 13px; font-weight: 600; color: var(--s-foco); white-space: nowrap; }

.pd-mapa-caja { position: relative; }
.pd .rd-mapa.pd-mapa { height: 320px; min-height: 0; }

.pd-alfiler {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: var(--c, #1a73e8);
    color: #fff;
    font-size: 13px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.pd-alfiler .bi { transform: rotate(45deg); }

.pd-listas {
    padding: 8px 8px 6px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
}

.pd-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 4px 4px 8px;
    padding: 4px;
    border-radius: 999px;
    background: var(--s-relleno);
}

.pd-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--s-tinta-2);
    font-size: 13.5px;
    font-weight: 600;
}

.pd-tab span { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.pd-tab.activo { background: var(--s-superficie); color: var(--s-tinta); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

.pd-persona {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--s-tinta);
    text-align: left;
}

button.pd-persona:hover { background: var(--s-fondo); }
.pd-persona + .pd-persona { border-top: 1px solid #f0f1f3; }

.pd-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.pd-persona-texto { display: grid; flex: 1; min-width: 0; gap: 1px; }
.pd-persona-texto b { font-size: 14.5px; font-weight: 600; }
.pd-persona-texto small { font-size: 12.5px; color: var(--s-tinta-3); }
.pd-persona-dir { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.pd-dist {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--s-dato);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pd-cerca { background: var(--s-ok-suave); color: var(--s-ok); }
.pd-media { background: #feefe3; color: #b35a00; }
.pd-prog { background: var(--s-info-suave); color: var(--s-info); }

@media (max-width: 575.98px) {
    .pd-titulo { font-size: 20px; }
    .pd-ruta { flex-wrap: wrap; }
    .pd-ruta-ver { margin-left: auto; }
    .pd .rd-mapa.pd-mapa { height: 260px; }
}

/* ===== Detalles de trabajador (mapa_detalles_persona.php), rediseño 2026-11-09 ===== */
.dt-persona { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 420px; }

.dt-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 16%, #fff);
    color: var(--c);
    font-size: 22px;
    font-weight: 800;
}

.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--s-relleno);
    color: var(--s-tinta-2);
    font-size: 12.5px;
    font-weight: 600;
}

.dt-chip-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.dt-domicilio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--s-linea);
    border-radius: var(--s-r-tarjeta);
    background: var(--s-superficie);
}

.dt-domicilio > div { display: grid; gap: 2px; min-width: 0; }
.dt-domicilio small { font-size: 12.5px; color: var(--s-tinta-3); }
.dt-domicilio b { font-size: 15px; font-weight: 600; }

.dt-casa {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1a73e8;
}

.dt-lista-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px 6px; }
.dt-lista-cab span { font-size: 12.5px; color: var(--s-tinta-3); }

.dt-parada {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    cursor: pointer;
}

.dt-parada + .dt-parada { border-top: 1px solid #f0f1f3; }
.dt-parada:hover { background: var(--s-fondo); }
.dt-parada.activa { background: #e8f0fe; }
.dt-parada .rd-hora { line-height: 24px; }

.dt-parada-texto { display: grid; flex: 1; gap: 3px; min-width: 0; }
.dt-parada-texto > b { font-size: 14.5px; font-weight: 600; }
.dt-parada-texto > small { font-size: 12.5px; color: var(--s-tinta-3); }

.dt-ruta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    max-width: 100%;
    margin-top: 4px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--s-linea);
    border-radius: 12px;
    background: var(--s-superficie);
    color: var(--s-tinta);
    text-align: left;
}

.dt-ruta:hover:not(:disabled) { border-color: var(--s-tinta-3); }
.dt-ruta .rd-id { height: 26px; min-width: 34px; font-size: 13px; border-radius: 8px; }
.dt-ruta .rs-turno { height: 22px; min-width: 28px; font-size: 11px; }
.dt-ruta-nombre { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dt-ruta .bi { font-size: 11px; color: var(--s-tinta-3); }

.dt-prov { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; }
.dt-prov i { width: 8px; height: 8px; border-radius: 50%; }

@media (max-width: 575.98px) {
    .dt-avatar { width: 52px; height: 52px; font-size: 18px; }
    .dt-parada { gap: 10px; padding: 12px 6px; }
    .dt-parada .rd-hora { min-width: 44px; font-size: 15px; }
    .dt-parada .pd-dist { padding: 2px 8px; font-size: 11.5px; }
}

/* La cuadricula de Detalles (ruta, parada, trabajador) no debe crecer mas que la pantalla */
.rd { grid-template-columns: minmax(0, 1fr); }
.dt-persona { flex: 1 1 280px; }
.dt .dt-persona .rd-cab-texto { flex: 1 1 auto; }
.dt-parada-texto { grid-template-columns: minmax(0, 1fr); }
.dt-ruta { min-width: 0; }
.dt-ruta-nombre { min-width: 0; }
.dt-ruta .rd-id,
.dt-ruta .rs-turno { flex: none; }

/* ===== Pantalla de permisos (usuarios_permisos_nuevo.php), 2026-11-09 ===== */
.pp-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pp-buscar { flex: 1 1 260px; height: 40px; }
.pp-plantillas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-plantillas .chip { cursor: pointer; }
.pp-copiar { width: auto; max-width: 260px; border-radius: 999px; }

.pp-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }

.pp-modulo { border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); background: var(--s-superficie); overflow: hidden; }
.pp-modulo-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f0f1f3; }
.pp-modulo-icono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #e8f0fe; color: #1a73e8; }
.pp-modulo-nombre { display: grid; flex: 1; min-width: 0; }
.pp-modulo-nombre b { font-size: 14.5px; }
.pp-modulo-nombre small { font-size: 12px; color: var(--s-tinta-3); }

.pp-lista { padding: 4px 6px 6px; }
.pp-permiso { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 8px; border-radius: 10px; cursor: pointer; }
.pp-permiso:hover { background: var(--s-fondo); }
.pp-permiso.fijo { cursor: not-allowed; opacity: .55; }
.pp-permiso-texto { flex: 1; min-width: 0; font-size: 13.5px; }
.pp-codigo { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--s-relleno); color: var(--s-tinta-3); font-family: var(--s-dato); font-size: 11px; }
.pp-aviso { color: #e37400; font-size: 12px; }
.pp-permiso .mg-switch:disabled { cursor: not-allowed; }

.pp-faltan { padding: 12px 14px; border: 1px solid #f5dfa6; border-radius: var(--s-r-tarjeta); background: var(--s-aviso-suave); }
.pp-faltan-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; color: var(--s-aviso); }
.pp-faltan-cab span { font-size: 12px; color: var(--s-tinta-2); }
.pp-faltan-lista { display: grid; gap: 4px; margin-top: 8px; }
.pp-faltan-fila { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .7); }
.pp-faltan-fila.hecho { opacity: .45; }
.pp-faltan-fila.hecho .btn { display: none; }
.pp-faltan-texto { flex: 1; min-width: 0; font-size: 13px; }
.pp-faltan-texto small { color: var(--s-tinta-3); }
.pp-no { color: var(--s-tinta-3); font-size: 12px; }
.pp-link { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--s-foco); font-size: 13px; font-weight: 600; }

@media (max-width: 575.98px) {
    .pp-modulos { grid-template-columns: 1fr; }
    .pp-copiar { max-width: 100%; flex: 1 1 100%; }
}

/* ===== Configuración del sistema (configuraciones_nuevo.php), 2026-11-09 ===== */
.cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.cf-tarjeta { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); background: var(--s-superficie); }
.cf-cab { display: flex; align-items: flex-start; gap: 12px; }
.cf-cab h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cf-cab p { margin: 2px 0 0; font-size: 13px; color: var(--s-tinta-3); }
.cf-icono { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: 18px; }
.cf-datos { display: grid; gap: 8px; margin: 0; }
.cf-datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f1f3; }
.cf-datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cf-datos dt { font-size: 12.5px; font-weight: 600; color: var(--s-tinta-3); }
.cf-datos dd { margin: 0; font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
.cf-datos small { color: var(--s-tinta-3); }
.cf-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-cifras > div { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--s-fondo); }
.cf-cifras b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cf-cifras span { font-size: 12.5px; color: var(--s-tinta-3); }
.cf-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-nota { margin: 0; font-size: 12.5px; color: var(--s-tinta-2); }
.cf-alerta { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--s-aviso-suave); color: var(--s-aviso); font-size: 12.5px; }
.cf-pie { margin: 0; font-size: 12px; color: var(--s-tinta-3); }
.cf-resultado:empty { display: none; }
@media (max-width: 575.98px) { .cf-grid { grid-template-columns: 1fr; } }

/* ===== Indicadores de quejas (sugerencias_kpi.php), 2026-11-09 ===== */
.kq { display: grid; gap: 14px; }
.kq-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kq-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.kq-atajos .chip { cursor: pointer; }
.kq-rango { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kq-rango label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--s-tinta-3); }
.kq-rango input { width: 150px; }
.kq-periodo { margin: -4px 0 0; font-size: 13px; color: var(--s-tinta-2); }

.kq-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kq-tile { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); background: var(--s-superficie); }
.kq-tile-etq { font-size: 12.5px; font-weight: 600; color: var(--s-tinta-3); }
.kq-tile b { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kq-tile b small { font-size: 14px; font-weight: 600; color: var(--s-tinta-2); }
.kq-tile-sub { font-size: 12px; color: var(--s-tinta-3); }
.kq-tile-aviso { background: var(--s-aviso-suave); border-color: #f5dfa6; }
.kq-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--s-tinta-2); }
.kq-delta.sube { color: var(--s-error); }
.kq-delta.baja { color: var(--s-ok); }

.kq-graficas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.kq-tarjeta { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); background: var(--s-superficie); min-width: 0; }
.kq-tarjeta .seccion-descripcion { margin-bottom: 8px; }
.kq-vacio { display: flex; align-items: center; gap: 8px; padding: 24px 0; color: var(--s-tinta-3); }

/* Barras horizontales: un solo tono, extremo redondeado, valor a la derecha en tinta */
.kq-barras { display: grid; gap: 6px; }
.kq-barra-fila { display: grid; grid-template-columns: minmax(110px, 30%) 1fr 48px; align-items: center; gap: 10px; min-height: 30px; padding: 2px 4px; border-radius: 8px; }
.kq-barra-fila:hover { background: var(--s-fondo); }
.kq-barra-etq { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.kq-barra-etq-ancha { white-space: normal; }
.kq-barra-pista { height: 14px; }
.kq-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #1a73e8; }
.kq-barra-val { font-family: var(--s-dato); font-size: 13px; font-weight: 700; text-align: right; }
.kq-barra-val small { font-weight: 500; color: var(--s-tinta-3); }
.kq-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.kq-grav { padding: 1px 8px; font-size: 11px; }

/* Columnas de tendencia */
.kq-columnas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 2px; height: 200px; padding-top: 16px; border-bottom: 1px solid var(--s-linea); }
.kq-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.kq-col:hover .kq-col-barra { background: #1557b0; }
.kq-col-val { font-family: var(--s-dato); font-size: 11px; font-weight: 700; color: var(--s-tinta-2); }
.kq-col-barra { width: min(70%, 28px); border-radius: 4px 4px 0 0; background: #1a73e8; }
.kq-col-etq { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--s-tinta-3); white-space: nowrap; }
.kq-graficas .kq-tarjeta:last-child { padding-bottom: 30px; }

/* Evaluacion */
.kq-eval-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kq-como { margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--s-fondo); font-size: 13px; color: var(--s-tinta-2); }
.kq-como ul { margin: 6px 0; padding-left: 18px; }
.kq-como p { margin: 0; }
.kq-tabla { font-size: 13.5px; }
.kq-tabla th { font-size: 12px; font-weight: 600; color: var(--s-tinta-3); white-space: nowrap; }
.kq-tabla td { vertical-align: middle; }
.kq-prov { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.kq-gris { color: var(--s-tinta-3); }
.kq-calif { display: flex; align-items: center; gap: 10px; }
.kq-calif-num { min-width: 34px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kq-calif-pista { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--s-relleno); overflow: hidden; }
.kq-calif-barra { display: block; height: 100%; border-radius: 999px; }
.kq-ok { background: var(--s-ok); }
.kq-aviso { background: #e37400; }
.kq-error { background: var(--s-error); }

.kq-tip { position: fixed; z-index: 4000; max-width: 300px; padding: 6px 10px; border-radius: 8px; background: #202124; color: #fff; font-size: 12.5px; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

@media (max-width: 1199.98px) { .kq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .kq-graficas { grid-template-columns: 1fr; }
    .kq-tiles { grid-template-columns: 1fr 1fr; }
    .kq-barra-fila { grid-template-columns: minmax(90px, 38%) 1fr 40px; }
}
.kq-calif .estado::before { display: none; }

/* ===== Indicadores de quejas v2 (2026-11-09) ===== */
.kq2 { gap: 16px; }
.kq-hero {
    position: relative; overflow: hidden; display: grid; gap: 22px; padding: 22px 26px 26px; border-radius: 24px; color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, rgba(26, 115, 232, .55) 0%, rgba(26, 115, 232, 0) 55%), radial-gradient(90% 120% at 0% 100%, rgba(147, 52, 230, .35) 0%, rgba(147, 52, 230, 0) 60%), #0b0f19;
    box-shadow: 0 10px 30px rgba(11, 15, 25, .25);
}
.kq-hero-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; }
.kq-hero h2 { margin: 4px 0 2px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.kq-hero p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .72); }
.kq-hero p b { color: #fff; }
.kq-hero-migas button { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 600; }
.kq-hero-migas button:hover { color: #fff; }
.kq-hero-filtros { display: grid; justify-items: end; gap: 8px; }
.kq-chip { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kq-chip:hover { background: rgba(255, 255, 255, .14); }
.kq-chip.activo { border-color: #fff; background: #fff; color: #0b0f19; }
.kq-hero .kq-rango { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.kq-hero .kq-rango input { width: 140px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; color-scheme: dark; font-size: 12.5px; }
.kq-hero .kq-rango span { font-size: 12px; color: rgba(255, 255, 255, .6); }
.kq-hero .kq-rango button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #0b0f19; font-size: 12.5px; font-weight: 700; }

.kq-hero-cuerpo { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; align-items: center; }
.kq-hero-score { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.kq-hero-score p { margin-top: 6px; font-size: 12px; }
.kq-hero-anillo { position: relative; flex: none; width: 116px; height: 116px; }
.kq-hero-anillo-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.kq-hero-anillo-txt b { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.kq-hero-anillo-txt span { font-size: 11px; color: rgba(255, 255, 255, .6); }
.kq-hero-etq { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); }
.kq-hero-nivel { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 20px; font-weight: 800; }
.kq-hero-nivel.kq-n-ok { color: #81c995; } .kq-hero-nivel.kq-n-aviso { color: #fdd663; } .kq-hero-nivel.kq-n-error { color: #f28b82; } .kq-hero-nivel.kq-n-neutro { color: #bdc1c6; }
.kq-hero-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kq-hero-cifras > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.kq-hero-cifras span { font-size: 12.5px; color: rgba(255, 255, 255, .68); }
.kq-hero-cifras b { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kq-hero-cifras b i { font-style: normal; font-size: 16px; margin-left: 2px; color: rgba(255, 255, 255, .7); }
.kq-hero-cifras small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.kq-dh { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 12px; color: var(--s-tinta-3); }
.kq-dh.sube { color: #d93025; } .kq-dh.baja { color: #188038; }
.kq-hero .kq-dh.sube { color: #f28b82; } .kq-hero .kq-dh.baja { color: #81c995; } .kq-hero .kq-dh { color: rgba(255, 255, 255, .6); }

/* Anillos */
.kq-anillo { width: 100%; height: 100%; }
.kq-anillo circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.kq-anillo-pista { stroke: var(--s-relleno); }
.kq-anillo-hero .kq-anillo-pista { stroke: rgba(255, 255, 255, .12); }
.kq-anillo-valor { transition: stroke-dasharray .8s ease; }
.kq-t-ok .kq-anillo-valor { stroke: #1e8e3e; } .kq-t-aviso .kq-anillo-valor { stroke: #e37400; } .kq-t-error .kq-anillo-valor { stroke: #d93025; } .kq-t-neutro .kq-anillo-valor { stroke: transparent; }
.kq-anillo-hero.kq-t-ok .kq-anillo-valor { stroke: #81c995; } .kq-anillo-hero.kq-t-aviso .kq-anillo-valor { stroke: #fdd663; } .kq-anillo-hero.kq-t-error .kq-anillo-valor { stroke: #f28b82; }

.kq-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px -6px; }
.kq-sec-cab h3 { margin: 0; font-size: 18px; font-weight: 800; }
.kq2 .kq-como { margin: 0; }

/* Tarjetas por proveedor */
.kq-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kq-prov-card { position: relative; display: grid; gap: 12px; padding: 16px 16px 14px; overflow: hidden; border: 1px solid var(--s-linea); border-radius: 20px; background: var(--s-superficie); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .15s, box-shadow .15s; }
.kq-prov-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pc); }
.kq-prov-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .1); }
.kq-prov-card.sin { opacity: .7; }
.kq-prov-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kq-prov-nombre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; }
.kq-prov-nombre .kq-punto { background: var(--pc); }
.kq-prov-cuerpo { display: flex; align-items: center; gap: 16px; }
.kq-prov-anillo { position: relative; flex: none; width: 92px; height: 92px; }
.kq-prov-anillo-txt { position: absolute; inset: 0; display: grid; place-content: center; }
.kq-prov-anillo-txt b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.kq-prov-card dl { display: grid; flex: 1; gap: 6px; margin: 0; }
.kq-prov-card dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.kq-prov-card dt { font-weight: 500; color: var(--s-tinta-3); }
.kq-prov-card dd { margin: 0; font-family: var(--s-dato); font-weight: 700; }
.kq-prov-card footer { padding-top: 10px; border-top: 1px solid #f0f1f3; font-size: 12px; color: var(--s-tinta-3); }
.kq-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kq-pill.kq-n-ok { background: var(--s-ok-suave); color: var(--s-ok); }
.kq-pill.kq-n-aviso { background: var(--s-aviso-suave); color: var(--s-aviso); }
.kq-pill.kq-n-error { background: var(--s-error-suave); color: var(--s-error); }
.kq-pill.kq-n-neutro { background: var(--s-relleno); color: var(--s-tinta-2); }
.kq-pill.kq-n-info { background: var(--s-info-suave); color: var(--s-info); }

/* Tarjetas de graficas */
.kq2 .kq-tarjeta { border-radius: 20px; padding: 18px 20px; }
.kq-tarjeta-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; }
.kq-tarjeta-cab h3 { margin: 0; font-size: 16px; font-weight: 800; }
.kq-tarjeta-cab span { font-size: 12.5px; color: var(--s-tinta-3); }
.kq-rojo { color: var(--s-error); } .kq-azul { color: var(--s-info); }

/* Area de tendencia */
.kq-area { position: relative; height: 220px; margin: 6px 0 24px; cursor: crosshair; }
.kq-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kq-grid { stroke: #eef0f2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kq-linea { fill: none; stroke: #1a73e8; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kq-cruz { stroke: #202124; stroke-width: 1; stroke-dasharray: 3 3; }
.kq-area-punto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #fff; border-radius: 50%; background: #1a73e8; box-shadow: 0 0 0 1px rgba(26, 115, 232, .3); pointer-events: none; }
.kq-area-max { position: absolute; top: 4px; left: 0; font-size: 11px; color: var(--s-tinta-3); }
.kq-area-ejes { position: absolute; left: 0; right: 0; bottom: -22px; height: 16px; }
.kq-area-ejes span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--s-tinta-3); white-space: nowrap; }
.kq-area-ejes span:first-child { transform: none; }
.kq-area-ejes span:last-child { transform: translateX(-100%); }

/* Estado de las quejas */
.kq-estado-num { display: flex; align-items: baseline; gap: 8px; }
.kq-estado-num b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.kq-estado-num span { color: var(--s-tinta-3); }
.kq-segmentos { display: flex; gap: 2px; height: 16px; margin: 8px 0 14px; overflow: hidden; border-radius: 999px; }
.kq-segmentos span { min-width: 6px; }
.kq-leyenda { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kq-leyenda li { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; font-size: 13.5px; }
.kq-leyenda i { width: 12px; height: 12px; border-radius: 4px; }
.kq-leyenda b { font-family: var(--s-dato); }
.kq-leyenda span { font-size: 12px; color: var(--s-tinta-3); text-align: right; }

/* Listas de unidades y personas */
.kq-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kq-lista li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; }
.kq-lista li:hover { background: var(--s-fondo); }
.kq-lista li.rein { background: #fef6f5; }
.kq-lista-txt { display: grid; flex: 1; min-width: 0; }
.kq-lista-txt b { font-size: 14px; font-weight: 600; }
.kq-lista-txt small { overflow: hidden; font-size: 12px; color: var(--s-tinta-3); white-space: nowrap; text-overflow: ellipsis; }
.kq-lista-n { display: grid; place-items: center; flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 12px; background: var(--s-relleno); font-family: var(--s-dato); font-size: 15px; font-weight: 800; }
.kq-unidad { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 78px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 14%, #fff); color: #202124; font-family: var(--s-dato); font-size: 14px; font-weight: 800; }
.kq-unidad .bi { color: var(--pc); font-size: 15px; }
.kq-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #e8f0fe; color: #1a73e8; font-weight: 800; }
.kq-avatar.trab { background: #f3e8fd; color: #9334e6; }

/* Ranking de problemas */
.kq-rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kq-rank li { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(60px, 1fr) 30px 54px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.kq-rank li:hover { background: var(--s-fondo); }
.kq-rank-pos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--s-relleno); font-size: 12px; font-weight: 800; }
.kq-rank li:first-child .kq-rank-pos { background: #0b0f19; color: #fff; }
.kq-rank-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kq-rank-txt b { font-size: 13.5px; font-weight: 600; }
.kq-rank-barra { height: 10px; border-radius: 999px; background: var(--s-relleno); overflow: hidden; }
.kq-rank-barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8ab4f8, #1a73e8); }
.kq-rank-n { font-family: var(--s-dato); font-size: 15px; font-weight: 800; text-align: right; }
.kq-rank .kq-dh { justify-content: flex-end; }
.kq-bajaron { margin: 10px 0 0; font-size: 12.5px; color: var(--s-ok); }

/* Mapa de calor (secuencial, un tono) */
.kq-calor { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; align-items: center; gap: 4px 10px; }
.kq-calor-etq { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.kq-calor-fila, .kq-calor-ejes { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.kq-celda { display: grid; place-items: center; height: 26px; border-radius: 4px; background: #f1f3f4; font-size: 11px; font-weight: 700; color: #fff; }
.kq-celda.con { background: rgba(26, 115, 232, var(--a)); }
.kq-calor-ejes span { overflow: visible; font-size: 10.5px; color: var(--s-tinta-3); white-space: nowrap; }

@media (max-width: 1199.98px) { .kq-hero-cuerpo { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .kq-hero { padding: 18px; border-radius: 20px; }
    .kq-hero h2 { font-size: 22px; }
    .kq-hero-filtros { justify-items: start; }
    .kq-hero-cifras { grid-template-columns: 1fr 1fr; }
    .kq-hero-cifras b { font-size: 26px; }
    .kq-hero .kq-rango input { width: 118px; }
    .kq-rank li { grid-template-columns: 26px minmax(0, 1fr) 30px 48px; }
    .kq-rank-barra { display: none; }
}
.kq-prov-card header { min-height: 44px; } .kq-prov-nombre { line-height: 1.25; }
/* Unidades con el color de su proveedor y fotos de quien reporta (2026-11-09) */
.kq-uni-fila { box-shadow: inset 4px 0 0 var(--pc); }
.kq-unidad { background: var(--pc) !important; color: var(--pt) !important; }
.kq-unidad .bi { color: var(--pt) !important; opacity: .9; }
.kq-uni-prov { display: inline-flex; align-items: center; gap: 6px; }
.kq-uni-prov .kq-punto { background: var(--pc); }
.kq-lista li.kq-uni-fila.rein { background: #fef6f5; }
.kq-avatar { position: relative; overflow: hidden; }
.kq-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Panel principal del administrador (plataform_tablero_inicio_p1.php), 2026-11-09 ===== */
.db { display: grid; gap: 16px; }
.db-hero h2 { font-size: 30px; }
.db-fecha { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .7); }
.db-hero-acciones { display: flex; gap: 8px; }
.db-btn-blanco { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #0b0f19; font-weight: 700; }
.db-btn-vidrio { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; }
.db-btn-blanco:hover { background: #e8eaed; } .db-btn-vidrio:hover { background: rgba(255, 255, 255, .16); }
.db-hero-grande { display: block; margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.db-hero-grande small { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.kq-hero-anillo-txt b small { font-size: 16px; }

/* Requiere atencion */
.db-atencion { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.db-alerta { --c: #5f6368; --f: #f1f3f4; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); border-radius: 16px; background: color-mix(in srgb, var(--f) 70%, #fff); color: var(--s-tinta); text-align: left; transition: transform .12s, box-shadow .12s; }
.db-alerta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
.db-a-error { --c: #d93025; --f: #fce8e6; } .db-a-aviso { --c: #e37400; --f: #fef3d6; } .db-a-info { --c: #1a73e8; --f: #e8f0fe; }
.db-alerta-icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--c); color: #fff; }
.db-alerta-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.db-alerta-txt b { font-size: 16px; font-weight: 800; }
.db-alerta-ir { color: var(--c); }

/* Rejilla */
.db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.db-span-2 { grid-column: span 2; } .db-span-3 { grid-column: span 3; }
.db .kq-tarjeta { border-radius: 20px; padding: 18px 20px; }
.db-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--s-tinta-3); }

.db-cobertura { display: grid; gap: 14px; margin-top: 4px; }
.db-cob-fila { display: grid; grid-template-columns: 110px 1fr 140px; align-items: center; gap: 14px; }
.db-cob-etq { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.db-cob-etq i { width: 10px; height: 10px; border-radius: 50%; }
.db-cob-barra { height: 14px; border-radius: 999px; background: var(--s-relleno); overflow: hidden; }
.db-cob-barra span { display: block; height: 100%; border-radius: 999px; }
.db-cob-n { text-align: right; }
.db-cob-n b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.db-cob-n small { font-family: var(--s-dato); font-size: 11.5px; color: var(--s-tinta-3); }

.db-calif-cuerpo { display: flex; align-items: center; gap: 16px; }
.db-mini { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #f0f1f3; }
.db-mini li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.db-mini li span { display: inline-flex; align-items: center; gap: 8px; color: var(--s-tinta-2); }
.db-mini li b { font-family: var(--s-dato); font-weight: 800; }
.db-c-ok { color: var(--s-ok); } .db-c-aviso { color: var(--s-aviso); } .db-c-error { color: var(--s-error); }

.db-rutas { display: grid; gap: 10px; }
.db-ruta-fila { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 14px; }
.db-ruta-prov { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.db-ruta-prov .kq-punto { background: var(--pc); }
.db-ruta-barra { height: 14px; border-radius: 999px; background: var(--s-relleno); overflow: hidden; }
.db-ruta-barra span { display: block; height: 100%; border-radius: 999px; background: var(--pc); }
.db-ruta-n { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.db-ruta-n b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.db-ruta-n small { font-size: 11.5px; color: var(--s-tinta-3); }

.db-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--s-ok) !important; font-weight: 600; }
.db-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #1e8e3e; box-shadow: 0 0 0 0 rgba(30, 142, 62, .5); animation: db-pulso 2s infinite; }
@keyframes db-pulso { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 62, .5); } 70% { box-shadow: 0 0 0 8px rgba(30, 142, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 142, 62, 0); } }
.db-sistema { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.db-sistema > div { display: grid; padding: 12px; border-radius: 14px; background: var(--s-fondo); }
.db-sistema b { font-size: 28px; font-weight: 800; line-height: 1.1; }
.db-sistema span { font-size: 12px; color: var(--s-tinta-3); }

/* Linea de tiempo */
.db-linea { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.db-linea li { position: relative; display: grid; grid-template-columns: 46px 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 4px; }
.db-linea li + li::before { content: ""; position: absolute; left: 76px; top: -8px; height: 16px; width: 2px; background: var(--s-linea); }
.db-linea-hora { font-family: var(--s-dato); font-size: 12.5px; color: var(--s-tinta-3); text-align: right; }
.db-linea-punto { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; color: #fff; }
.db-p-ok { background: #1e8e3e; } .db-p-info { background: #1a73e8; } .db-p-aviso { background: #e37400; } .db-p-error { background: #d93025; }
.db-linea-txt { display: grid; min-width: 0; }
.db-linea-txt b { font-size: 14px; font-weight: 600; }
.db-linea-txt small { overflow: hidden; font-size: 12.5px; color: var(--s-tinta-3); white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 1199.98px) { .db-grid { grid-template-columns: 1fr 1fr; } .db-span-2, .db-span-3 { grid-column: span 2; } }
@media (max-width: 767.98px) {
    .db-grid { grid-template-columns: 1fr; } .db-span-2, .db-span-3 { grid-column: auto; }
    .db-hero h2 { font-size: 24px; }
    .db-cob-fila { grid-template-columns: 80px 1fr 92px; gap: 8px; }
    .db-ruta-fila { grid-template-columns: 110px 1fr 70px; gap: 8px; }
    .db-linea li { grid-template-columns: 40px 28px minmax(0, 1fr); }
    .db-linea li .kq-pill { display: none; }
    .db-linea li + li::before { left: 66px; }
}

/* ===== Eventos y notificaciones: selector de fecha estilo Google (2026-11-10) ===== */
.ev-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-fecha {
    display: inline-flex; align-items: center; height: 40px; padding: 0 4px;
    border: 1px solid var(--s-linea, #dadce0); border-radius: 999px; background: #fff;
}
.ev-fecha-btn {
    display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: transparent; color: var(--s-tinta-2, #3c4043); font-size: 14px; cursor: pointer;
}
.ev-fecha-btn:hover:not(:disabled) { background: #f1f3f4; }
.ev-fecha-btn:disabled { opacity: .35; cursor: default; }
.ev-fecha-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
.ev-fecha-etq {
    position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px;
    border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--s-tinta-1, #202124);
    white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer;
}
.ev-fecha-etq:hover { background: #f1f3f4; }
.ev-fecha-etq:focus-within { outline: 2px solid #1a73e8; outline-offset: 1px; }
.ev-fecha-etq > i { color: #1a73e8; font-size: 15px; }
.ev-fecha-rango .ev-fecha-etq { cursor: default; padding-left: 10px; }
.ev-fecha-rango .ev-fecha-etq:hover { background: transparent; }
.ev-fecha-rango { border-color: #aecbfa; background: #e8f0fe; }
/* El input de fecha cubre la etiqueta, invisible: abre el calendario nativo */
.ev-fecha-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.ev-fecha-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ev-filtro-activo { background: #e8f0fe !important; color: #1967d2 !important; }

/* Filtros activos sobre la lista de eventos (2026-11-11) */
.ev-filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.ev-filtros-etq { font-size: 12.5px; color: var(--s-tinta-3); }
.ev-filtro-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px;
    border-radius: 999px; background: #e8f0fe; color: #1967d2; font-size: 13px; font-weight: 600;
}
.ev-filtro-chip button {
    display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit;
}
.ev-filtro-chip button:hover { background: rgba(25, 103, 210, .14); }
.ev-filtros-quitar { border: 0; background: none; padding: 2px 6px; font-size: 13px; color: var(--s-tinta-3); text-decoration: underline; }

/* Ventana "Filtrar eventos" (2026-11-11): periodo, prioridad, tipo y usuario */
.evf { display: flex; flex-direction: column; min-height: 100%; }
.evf-cab { padding: 20px 24px 12px; border-bottom: 1px solid var(--s-linea); }
.evf-titulo { margin: 0; font-size: 20px; font-weight: 700; color: var(--s-tinta); }
.evf-desc { margin: 4px 0 0; font-size: 13px; color: var(--s-tinta-3); }
.evf-cuerpo { display: grid; gap: 22px; padding: 20px 24px; }
.evf-grupo h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--s-tinta); text-transform: none; letter-spacing: 0; }
.evf-grupo h4 label { margin: 0; }
.evf-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.evf-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.evf-fechas label { display: grid; gap: 4px; margin: 0; }
.evf-fechas label span { font-size: 12px; color: var(--s-tinta-3); }
.evf-error { margin: 8px 0 0; font-size: 13px; color: #c5221f; }
.evf-ayuda { display: block; margin-top: 6px; font-size: 12px; color: var(--s-tinta-3); }
.evf-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #efeff1; }
.evf-seg label { margin: 0; }
.evf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.evf-seg span {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
    border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--s-tinta-2, #3c4043); cursor: pointer;
}
.evf-seg input:checked + span { background: #fff; color: var(--s-tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.evf-seg input:focus-visible + span { outline: 2px solid #1a73e8; outline-offset: 1px; }
.evf-punto { width: 8px; height: 8px; border-radius: 50%; }
.evf-punto-urgente { background: #d93025; }
.evf-punto-normal { background: #1e8e3e; }
.evf-pie {
    position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px;
    margin-top: auto; padding: 14px 24px; border-top: 1px solid var(--s-linea); background: #fff;
}
@media (max-width: 575.98px) {
    .evf-fechas { grid-template-columns: 1fr; }
    .evf-seg { display: flex; }
    .evf-seg label { flex: 1; }
    .evf-seg span { justify-content: center; width: 100%; padding: 6px 8px; }
    .evf-pie .btn { flex: 1; }
}

@media (max-width: 575.98px) {
    .ev-acciones { width: 100%; }
    .ev-fecha { flex: 1; justify-content: space-between; }
    .ev-fecha-etq { font-size: 13.5px; padding: 0 8px; }
}

/* ===== Servicios programados (2026-11-10) ===== */
.sp { display: grid; gap: 14px; }
.sp-resumen {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px;
    border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); background: var(--s-superficie);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sp-cifra {
    display: grid; gap: 2px; align-content: start; min-width: 0; padding: 10px 16px; text-align: left;
    border: 0; border-radius: 12px; background: transparent; color: var(--s-tinta); cursor: pointer;
}
.sp-cifra + .sp-cifra { box-shadow: -1px 0 0 var(--s-linea); }
.sp-cifra:hover { background: var(--s-fondo); }
.sp-cifra:focus-visible { outline: 2px solid var(--s-foco); outline-offset: -2px; }
.sp-cifra span { font-size: 12.5px; font-weight: 600; color: var(--s-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cifra b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sp-cifra small { font-size: 12px; color: var(--s-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cifra-ok b { color: var(--s-ok); }
.sp-cifra-error b { color: var(--s-error); }
.sp-cifra-error span { color: var(--s-error); }
.sp-cifra-aviso b { color: var(--s-aviso); }

.sp-cobertura { display: flex; align-items: center; gap: 12px; padding: 0 4px; font-size: 13px; color: var(--s-tinta-2); }
.sp-cobertura .sp-barra { flex: 0 0 240px; height: 8px; background: var(--s-error-suave); }
.sp-cobertura .sp-barra i { background: var(--s-ok); }
.sp-barra { position: relative; height: 8px; border-radius: 999px; background: var(--s-relleno); overflow: hidden; }
.sp-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--s-ok); }

.sp-alerta {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px;
    background: var(--s-error-suave); color: var(--s-error); font-size: 13px; line-height: 1.45;
}
.sp-alerta > i { margin-top: 1px; }
.sp-alerta .rd-mono { font-weight: 700; }

.sp-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tabs .chip { cursor: pointer; }
.sp-panel { padding: 14px 16px; }
.sp-panel[hidden] { display: none !important; }
.sp-nota { margin: 0 0 6px; font-size: 13px; color: var(--s-tinta-3); }
.sp-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.sp-tabla { font-size: 13.5px; }
.sp-tabla > tbody td { vertical-align: middle; }
.sp-fila-click { cursor: pointer; }
.sp-ruta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-ruta-nombre { display: grid; min-width: 0; font-weight: 600; line-height: 1.3; }
.sp-ruta-nombre small { font-size: 11.5px; font-weight: 500; color: var(--s-tinta-3); }
.sp-sub { display: block; font-size: 11.5px; color: var(--s-tinta-3); line-height: 1.3; }
.sp-tenue { color: var(--s-tinta-3); }
.sp-rojo { color: var(--s-error); }
.sp-depto { display: inline-block; min-width: 34px; color: var(--s-tinta-3); }

.sp-ocup { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.sp-ocup .sp-barra { flex: 1; }
.sp-ocup span { width: 44px; font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sp-ocup-aviso .sp-barra i { background: #f9ab00; }
.sp-ocup-aviso span { color: var(--s-aviso); }
.sp-ocup-error .sp-barra i { background: var(--s-error); }
.sp-ocup-error span { color: var(--s-error); }
.sp-cob .sp-barra { background: var(--s-error-suave); }

@media (max-width: 991.98px) {
    .sp-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-cifra:nth-child(4) { box-shadow: none; }
}
@media (max-width: 575.98px) {
    .sp-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-cifra { padding: 8px 10px; box-shadow: none !important; }
    .sp-cifra b { font-size: 22px; }
    .sp-cobertura { flex-wrap: wrap; }
    .sp-cobertura .sp-barra { flex: 1 1 100%; }
    .sp-panel { padding: 10px; }
}
#sp_trab > tbody td { white-space: nowrap; }
#sp_trab > tbody td small.sp-tenue { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* Servicios programados: "Ver en mapa" en ventana de tamano completo (2026-11-10) */
.modalWin:has(> .modalWinContent > .spmv) > .modalWinTitle { height: 0 !important; background: transparent !important; z-index: 3; }
.modalWin:has(> .modalWinContent > .spmv) > .modalWinContent { top: var(--seguro-arriba, 0px) !important; }
.spmv { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: calc(100vh - 40px); padding: 16px 20px 20px; }
.spmv-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; padding-right: 56px; }
.spmv-titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.spmv-titulo span { margin-left: 6px; font-size: 16px; font-weight: 600; color: var(--s-tinta-3); }
.spmv-cifras { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--s-tinta-2); }
.spmv-cifras > span { display: inline-flex; align-items: center; gap: 7px; }
.spmv-cifras b { font-variant-numeric: tabular-nums; color: var(--s-tinta); }
.spmv-cifras b.sp-rojo { color: var(--s-error); }
.spmv-cuerpo { position: relative; flex: 1; min-height: 420px; }
.spmv-mapa { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #e8eaed; }
.spm-capas {
    position: absolute; top: 12px; left: 56px; z-index: 500; width: 290px; max-height: calc(100% - 24px);
    display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 12px rgba(16, 24, 40, .18); font-size: 13px;
}
.spm-tit { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-tinta-3); }
.spm-tit-rutas { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--s-linea); }
.spm-todas { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.spm-fila { display: flex; align-items: center; gap: 9px; margin: 0; padding: 5px 4px; border-radius: 8px; cursor: pointer; }
.spm-fila:hover { background: var(--s-fondo); }
.spm-fila .form-check-input, .spm-todas .form-check-input { flex: none; margin: 0; }
.spm-fila span { flex: 1; min-width: 0; line-height: 1.25; }
.spm-fila small { display: block; font-size: 11.5px; color: var(--s-tinta-3); }
.spm-fila b { font-variant-numeric: tabular-nums; }
.spm-punto { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, .12); vertical-align: -1px; }
.spm-punto-ruta { background: conic-gradient(#f4511e 0 25%, #43a047 0 50%, #1a73e8 0 75%, #9334e6 0); }
.spm-linea { flex: none; width: 14px; border-top: 2px dashed #5f6368; }
.spm-nota { margin: 4px 4px 0; font-size: 11.5px; color: var(--s-tinta-3); }
.spm-enfoque { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 6px 8px; border-radius: 10px; background: var(--s-foco-suave); color: #1967d2; font-size: 12.5px; }
.spm-enfoque-x { border: 0; background: none; color: #1967d2; font-weight: 700; cursor: pointer; padding: 0; }
.spm-lista { overflow: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.spm-ruta { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.spm-ruta:hover { background: var(--s-fondo); }
.spm-ruta.activa { background: var(--s-relleno); box-shadow: inset 0 0 0 1.5px var(--s-tinta); }
.spm-ruta .rs-color { height: 28px; }
.spm-ruta-txt { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.spm-ruta-txt b { font-size: 12.5px; }
.spm-ruta-txt small { font-size: 11.5px; color: var(--s-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spm-ruta-n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spm-ruta-n small { font-weight: 500; color: var(--s-tinta-3); }
.spm-pop { display: grid; gap: 3px; min-width: 210px; font-size: 12.5px; line-height: 1.35; }
.spm-pop > b { font-size: 13.5px; }
.spm-pop .rd-mono { color: var(--s-tinta-3); font-size: 11.5px; }
.spm-pop a { margin-top: 4px; font-weight: 700; }

@media (max-width: 767.98px) {
    .spmv { padding: 12px; height: auto; }
    .spmv-cuerpo { flex: none; min-height: 0; }
    .spmv-mapa { position: relative; height: 62vh; }
    .spm-capas { position: static; width: auto; max-height: none; margin-top: 10px; box-shadow: none; border: 1px solid var(--s-linea); }
    .spm-lista { max-height: 320px; }
}
/* Servicios programados: clave de ancho fijo para que turno y nombre queden alineados (2026-11-10) */
.sp-ruta .rs-clave { flex: none; min-width: 64px; }
/* La regla global ".app-main .table ... .text-center { text-align:left !important }" alinea todo a la izquierda;
   en estas tablas los numeros y horas van centrados bajo su encabezado */
.app-main .table.sp-tabla > thead > tr > .text-center,
.app-main .table.sp-tabla > tbody > tr > .text-center,
.modalWinContent .table.sp-tabla > thead > tr > .text-center,
.modalWinContent .table.sp-tabla > tbody > tr > .text-center { text-align: center !important; }
.sp-tabla > tbody td { font-variant-numeric: tabular-nums; }

/* ===== Detalle de evento (2026-11-10) ===== */
.modalWin:has(> .modalWinContent > .evd) > .modalWinTitle { height: 0 !important; background: transparent !important; z-index: 3; }
.modalWin:has(> .modalWinContent > .evd) > .modalWinContent { top: var(--seguro-arriba, 0px) !important; }
.evd { display: grid; align-content: start; gap: 16px; padding: 24px 28px 28px; background: var(--s-superficie); min-height: 100%; }
.evd-cab { display: flex; align-items: flex-start; gap: 16px; padding-right: 48px; }
.evd-icono { width: 52px !important; height: 52px !important; flex: none; font-size: 24px !important; border-radius: 16px !important; }
.evd-cab-txt { display: grid; gap: 6px; min-width: 0; }
.evd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.evd-titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.evd-desc { margin: 0; font-size: 14.5px; color: var(--s-tinta-2); }
.evd-etq { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-tinta-3); }
.evd-detalle { padding: 14px 16px; border-radius: 14px; background: var(--s-fondo); }
.evd-detalle p { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.evd-datos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0;
    border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); overflow: hidden;
}
.evd-datos > div { padding: 12px 16px; border-right: 1px solid var(--s-linea); border-bottom: 1px solid var(--s-linea); margin: -0 -1px -1px 0; }
.evd-datos dt { font-size: 12px; font-weight: 600; color: var(--s-tinta-3); }
.evd-datos dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.evd-quien { display: flex; align-items: center; gap: 8px; }
.evd-quien img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.evd-unidad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.evd-mapa { position: relative; height: 260px; border-radius: 14px; overflow: hidden; background: var(--s-relleno); }
.evd-mapa-vacio { display: grid; place-items: center; height: 100%; color: var(--s-tinta-3); font-size: 13px; }
.evd-fichas { display: grid; gap: 12px; align-content: start; }
.evd-ficha { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--s-linea); border-radius: 14px; }
.evd-ficha > img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--s-relleno); }
.evd-ficha > div { display: grid; gap: 3px; min-width: 0; }
.evd-ficha b { font-size: 14.5px; }
.evd-ficha small { font-size: 12.5px; color: var(--s-tinta-2); }
.evd-enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; font-weight: 600; }
/* Emergencias: franja de color en la cabecera */

@media (max-width: 767.98px) {
    .evd { padding: 16px; }
    .evd-cab { padding-right: 44px; gap: 12px; }
    .evd-icono { width: 44px !important; height: 44px !important; font-size: 20px !important; }
    .evd-titulo { font-size: 20px; }
    .evd-unidad { grid-template-columns: 1fr; }
}

/* ===== Proveedores de transporte (2026-11-10) ===== */
.pv-fila { cursor: pointer; }
.pv-prov { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pv-prov-txt { display: grid; gap: 3px; min-width: 0; }
.pv-prov-txt b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.pv-prov-txt > span { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--s-tinta-3); }
.pv-prov-txt a { color: var(--s-tinta-2); text-decoration: none; }
.pv-prov-txt a:hover { color: var(--s-foco); text-decoration: underline; }
.pv-prov-txt i { margin-right: 2px; }
.pv-dato-raro { color: var(--s-aviso); }
.pv-tabla > tbody td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.pv-tabla b { font-weight: 700; }
.pv-de { color: var(--s-tinta-3); font-size: 12px; }
.pv-cero { color: var(--s-tinta-3); }
.app-main .table.pv-tabla > thead > tr > .text-center,
.app-main .table.pv-tabla > tbody > tr > .text-center { text-align: center !important; }
.pv-num { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
@media (max-width: 767.98px) { .pv-tabla td.pv-flecha { display: none !important; } }

/* ===== Detalle de proveedor (2026-11-10) ===== */
.modalWin:has(> .modalWinContent > .pd) > .modalWinTitle { height: 0 !important; background: transparent !important; z-index: 3; }
.modalWin:has(> .modalWinContent > .pd) > .modalWinContent { top: var(--seguro-arriba, 0px) !important; }
.pd { display: grid; align-content: start; gap: 16px; padding: 24px 28px 28px; background: var(--s-superficie); min-height: 100%; }
.pd-cab { display: flex; align-items: center; gap: 16px; padding-right: 52px; }
.pd-logo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pd-color); color: #fff; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.pd-cab-txt { flex: 1; min-width: 0; }
.pd-titulo { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.pd-acciones { display: flex; gap: 8px; flex: none; }
.pd-contacto {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .8fr); margin: 0;
    border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); overflow: hidden;
}
.pd-contacto > div { display: grid; gap: 3px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--s-linea); border-bottom: 1px solid var(--s-linea); margin: 0 -1px -1px 0; font-size: 14px; }
.pd-contacto > .pd-dir { grid-column: 1 / -1; }
.pd-contacto span { font-size: 12px; font-weight: 600; color: var(--s-tinta-3); }
.pd-contacto a { color: var(--s-tinta); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-contacto a:hover { color: var(--s-foco); text-decoration: underline; }
.pd-contacto .pd-dir a { white-space: normal; font-weight: 500; }
.pd-contacto em { font-style: normal; color: var(--s-tinta-3); }
.pd-contacto em.pd-raro { color: var(--s-aviso); font-weight: 600; }
.pd-catalogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-cat { display: grid; gap: 12px; align-content: space-between; padding: 16px; border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); }
.pd-cat-cab { display: flex; align-items: center; gap: 12px; }
.pd-cat-cab > div { flex: 1; min-width: 0; }
.pd-cat-cab h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pd-cat-cab p { margin: 1px 0 0; font-size: 12.5px; color: var(--s-tinta-3); }
.pd-cat-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--s-relleno); color: var(--s-tinta-2); font-size: 18px; }
.pd-cat-n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-cat-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-ayuda { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--s-tinta-3); font-size: 16px; cursor: pointer; }
.pd-ayuda:hover { background: var(--s-relleno); color: var(--s-tinta); }
.pd-cat-nota { font-size: 12px; color: var(--s-tinta-3); }
.pd-quejas { padding: 16px; border: 1px solid var(--s-linea); border-radius: var(--s-r-tarjeta); }

@media (max-width: 767.98px) {
    .pd { padding: 16px; }
    .pd-cab { flex-wrap: wrap; padding-right: 44px; gap: 12px; }
    .pd-logo { width: 46px; height: 46px; font-size: 22px; }
    .pd-titulo { font-size: 22px; }
    .pd-acciones { width: 100%; }
    .pd-contacto { grid-template-columns: 1fr; }
    .pd-catalogos { grid-template-columns: 1fr; }
}

/* ===== Pie del menu lateral: Manual de usuario y Aviso de privacidad al fondo (2026-11-10) ===== */
/* Solo de 768 px en adelante: en celular general.css oculta .app-sidebar y aqui se volvia a mostrar encima del contenido (corregido 2026-11-10) */
@media (min-width: 768px) {
    .app-sidebar { display: flex; flex-direction: column; }
}
.app-sidebar > ul.nav:first-of-type { flex: none; }
.app-sidebar > .menu-pie, .mobile-sidebar > .menu-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--s-linea); }
.menu-pie .nav-link { font-size: 13px !important; color: var(--s-tinta-2) !important; }
.menu-pie .nav-link:hover { color: var(--s-tinta) !important; }

/* ===== Avisos por correo del usuario (2026-11-11) ===== */
.nu { padding: 20px 24px 24px; }
.nu-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.nu-icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #e8f0fe; color: #1967d2; font-size: 22px; }
.nu-titulo { margin: 0; font-size: 20px; font-weight: 700; color: var(--s-tinta); }
.nu-desc { margin: 2px 0 0; font-size: 13px; color: var(--s-tinta-3); }
.nu-desc b { color: var(--s-tinta); font-weight: 600; }
.nu-alerta { display: flex; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--s-aviso-suave); color: var(--s-aviso); font-size: 13px; }
.nu-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nu-vista { display: inline-flex; padding: 3px; border-radius: 999px; background: #efeff1; }
.nu-vista label { margin: 0; }
.nu-vista input { position: absolute; opacity: 0; pointer-events: none; }
.nu-vista span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--s-tinta-3); cursor: pointer; }
.nu-vista input:checked + span { background: #fff; color: var(--s-tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.nu-vista input:focus-visible + span { outline: 2px solid #1a73e8; outline-offset: 1px; }
.nu-cuenta { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #e8f0fe; color: #1967d2; font-size: 12px; text-align: center; }
.nu-buscar { flex: 1 1 180px; max-width: 240px; }
.nu-vacio { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 32px 12px; text-align: center; color: var(--s-tinta-3); }
.nu-vacio .bi { font-size: 28px; }
.nu-vacio b { color: var(--s-tinta); }
.nu-lista { display: grid; gap: 16px; }
.nu-grupo h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--s-tinta-3); }
.nu-fila { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--s-linea); border-radius: 12px; background: #fff; cursor: pointer; }
.nu-fila + .nu-fila { margin-top: 6px; }
.nu-fila.activo { border-color: #c6dafc; background: #f8fbff; }
.nu-tono { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1a73e8; }
.nu-tono-ok { background: #1e8e3e; }
.nu-tono-aviso { background: #f9ab00; }
.nu-tono-error { background: #d93025; }
.nu-texto { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.nu-texto b { font-size: 14px; font-weight: 600; color: var(--s-tinta); }
.nu-texto small { font-size: 12.5px; color: var(--s-tinta-3); }
.nu-fila .form-switch .form-check-input { width: 2.4em; height: 1.3em; margin: 0; cursor: pointer; }
@media (max-width: 575.98px) {
    .nu { padding: 16px; }
    .nu-buscar { max-width: none; }
}

/* ===== Catálogo de eventos (2026-11-11) ===== */
.ce { padding: 8px 8px 16px; }
.ce-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ce-bloque { padding: 8px 16px; }
.ce-ev { display: grid; line-height: 1.3; }
.ce-ev b { font-weight: 600; color: var(--s-tinta); }
.ce-ev small { font-size: 12.5px; color: var(--s-tinta-3); }
.ce-id { font-family: var(--s-dato); font-size: 11.5px; color: var(--s-tinta-3); }
.ce-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--s-tinta-3); white-space: nowrap; }
.ce-nat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ce-nat i, .cef-nat span > i { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1a73e8; }
.ce-nat-ok i, i.ce-nat-ok { background: #1e8e3e; }
.ce-nat-info i, i.ce-nat-info { background: #1a73e8; }
.ce-nat-aviso i, i.ce-nat-aviso { background: #f9ab00; }
.ce-nat-error i, i.ce-nat-error { background: #d93025; }
.ce-avisa { display: inline-flex; gap: 10px; font-size: 16px; color: #c4c7c5; }
.ce-avisa .ce-on { color: #1967d2; }
.ce-tabla .estado { white-space: nowrap; }
.ce-acc { white-space: nowrap; text-align: right; }
.rs-accion[disabled] { opacity: .35; cursor: not-allowed; }

.cef { display: flex; flex-direction: column; min-height: 100%; }
.cef-cab { padding: 20px 24px 12px; border-bottom: 1px solid var(--s-linea); }
.cef-titulo { margin: 0; font-size: 20px; font-weight: 700; color: var(--s-tinta); }
.cef-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--s-tinta-3); }
.cef-nota { display: flex; gap: 8px; margin: 14px 24px 0; padding: 10px 12px; border-radius: 10px; background: #e8f0fe; color: #174ea6; font-size: 13px; }
.cef-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 24px; }
.cef-campo { display: grid; gap: 6px; margin: 0; }
.cef-campo > span { font-size: 13px; font-weight: 600; color: var(--s-tinta); }
.cef-ancho { grid-column: 1 / -1; }
.cef-nat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cef-nat label { margin: 0; }
.cef-nat input { position: absolute; opacity: 0; pointer-events: none; }
.cef-nat span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 1px solid var(--s-linea); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--s-tinta); cursor: pointer; text-align: center; }
.cef-nat span small { font-size: 11px; font-weight: 500; color: var(--s-tinta-3); }
.cef-nat input:checked + span { border-color: #1a73e8; background: #e8f0fe; box-shadow: inset 0 0 0 1px #1a73e8; }
.cef-nat input:focus-visible + span { outline: 2px solid #1a73e8; outline-offset: 1px; }
.cef-switches { gap: 8px; }
.cef-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--s-linea); border-radius: 12px; cursor: pointer; }
.cef-sw > span:first-child { display: grid; line-height: 1.3; }
.cef-sw b { font-size: 14px; font-weight: 600; color: var(--s-tinta); }
.cef-sw small { font-size: 12.5px; color: var(--s-tinta-3); }
.cef-sw .form-check-input { width: 2.4em; height: 1.3em; margin: 0; cursor: pointer; }
.cef-pie { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding: 14px 24px; border-top: 1px solid var(--s-linea); background: #fff; }
@media (max-width: 575.98px) {
    .cef-cuerpo { grid-template-columns: 1fr; }
    .cef-nat { grid-template-columns: repeat(3, 1fr); }
    .cef-pie .btn { flex: 1; }
}
.cef-nat span > i.ce-nat-ok { background: #1e8e3e; }
.cef-nat span > i.ce-nat-info { background: #1a73e8; }
.cef-nat span > i.ce-nat-aviso { background: #f9ab00; }
.cef-nat span > i.ce-nat-error { background: #d93025; }

/* ===== Aviso emergente de eventos (2026-11-12) ===== */
.notif-pila { position: fixed; right: 20px; bottom: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.notif {
    --notif-c: #1a73e8; --notif-f: #e8f0fe;
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 14px 14px;
    border-radius: 16px; background: #fff; border: 1px solid var(--s-linea, #e3e3e3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
    opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s, transform .2s; pointer-events: auto;
}
.notif.visible { opacity: 1; transform: none; }
.notif-ok { --notif-c: #1e8e3e; --notif-f: #e6f4ea; }
.notif-aviso { --notif-c: #b06000; --notif-f: #fef7e0; }
.notif-error { --notif-c: #d93025; --notif-f: #fce8e6; }
.notif-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--notif-f); color: var(--notif-c); font-size: 19px; }
.notif-cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.notif-meta { font-size: 12px; color: var(--s-tinta-3, #5f6368); }
.notif-area { font-weight: 600; color: var(--notif-c); }
.notif-hora { margin-left: 4px; }
.notif-titulo { font-size: 14.5px; font-weight: 700; color: var(--s-tinta, #202124); line-height: 1.3; }
.notif-detalle { margin: 0; font-size: 13px; color: var(--s-tinta-2, #3c4043); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-quien { font-size: 12px; color: var(--s-tinta-3, #5f6368); }
.notif-acciones { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; align-self: stretch; }
.notif-cerrar { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--s-tinta-3, #5f6368); }
.notif-cerrar:hover { background: #f1f3f4; }
.notif-ver { padding: 5px 14px; border: 0; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 600; }
.notif-ver:hover { background: #333; }
@media (max-width: 575.98px) { .notif-pila { right: 16px; left: 16px; bottom: 76px; width: auto; } }