/*
 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.
*/

:root{
    --s-tinta: #1E293B;
    --s-tinta-2: #475569;
    --s-tinta-3: #64748B;
    --s-fondo: #F5F7FA;
    --s-superficie: #ffffff;
    --s-relleno: #EEF2F7;
    --s-relleno-2: #E2E8F0;
    --s-linea: #E2E8F0;
    --s-accion: #1E3A8A;
    --s-accion-hover: #172F6E;
    --s-foco: #3B82F6;
    --s-foco-suave: #DBEAFE;
    --s-marca: #1E3A8A;
    --s-ok: #137333;
    --s-ok-suave: #e6f4ea;
    --s-aviso: #a35a00;
    --s-aviso-suave: #fef3d6;
    --s-error: #c5221f;
    --s-error-suave: #fce8e6;
    --s-info: #1E3A8A;
    --s-info-suave: #DBEAFE;
    --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: #1E3A8A;
    --bs-link-color-rgb: 30, 58, 138;
    --bs-link-hover-color: #3B82F6;
    --bs-link-hover-color-rgb: 59, 130, 246;
    --bs-primary: #1E3A8A;
    --bs-primary-rgb: 30, 58, 138;
    --bs-focus-ring-color: rgba(59, 130, 246, .35);
}

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


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 ===== */


.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-foco);
}

/* ===== 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 ===== */


/* ===== 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(59, 130, 246, .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: #172F6E;
    --bs-btn-active-border-color: #172F6E;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #94A3B8;
    --bs-btn-disabled-border-color: #94A3B8;
}

.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: #CBD5E1;
    --bs-btn-active-border-color: #CBD5E1;
    --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: #1E3A8A;
    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"],
.btn-check:checked + .chip{
    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: #1E3A8A; }
.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: #E2E8F0;
}

.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: #CBD5E1;
}

.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(59, 130, 246, .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(59, 130, 246, .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) {
    

    .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) {
     [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;
    }

     [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 */
     [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: #3B82F6;
    --tb-foraneo: #eb6834;
    --tb-vacio: #CBD5E1;
    --tb-serie: #3B82F6;
    --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: #1E3A8A; background: #DBEAFE; }
.tb-chip-local::before{ background: #3B82F6; }
.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: #94A3B8; }

.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: #3B82F6;
    --tb-foraneo: #129eaf;
    --tb-vacio: #E2E8F0;
    --tb-serie: #3B82F6;
    --tb-aviso: #e37400;
    --tb-pista: #F1F5F9;
}

.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: #3B82F6; background: #DBEAFE; }
.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: #1E3A8A; background: #DBEAFE; }
.tb-chip-local::before{ background: #3B82F6; }
.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: #1E3A8A; }
.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: #CBD5E1;
}

/* 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: #3B82F6;
    background: #DBEAFE;
    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: #DBEAFE;
}

.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: #1E3A8A; background: #DBEAFE; }

.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: #DBEAFE; }
.csv-cifra-cambio b{ color: #1E3A8A; }
.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: #1E3A8A;
}

.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: #1E3A8A; background: #DBEAFE; }

.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: #1E3A8A; }

.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: #1E3A8A;
    background: #DBEAFE;
    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);
}


/* ===== 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: #F1F5F9;
    background: #1E293B;
    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: #CBD5E1;
    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: #1E293B;
}

.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: #1E3A8A; background: #DBEAFE; }
.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;
}


.bz-ayuda > span:last-child{
    flex: none;
    white-space: nowrap;
    font-family: var(--s-dato);
}


/* Punto amarillo del icono Quejas: hay respuestas sin ver (mismo color y anillo que la bolita del lapiz) */


/* 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; }


/* La lista de sesiones reutiliza usuarios_equiposXusuario.php: aqui va sin su encabezado de tarjeta */


/* Titulos de seccion mas fuertes, como en apps */


/* Fecha del transporte como pastilla */


/* Tarjeta del transporte */


/* Tarjeta de domicilio */


/* Con la franja, la primera seccion no necesita tanto aire arriba */


/* El encabezado de la app queda blanco; la franja va justo debajo */


/* ===== 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: #3B82F6; background: #DBEAFE; }
.rs-icono-entrada{ color: #137333; background: #e6f4ea; }
.rs-icono-salida{ color: #b06000; background: #fef3d6; }
.rs-icono-unidad{ color: #475569; 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(15, 23, 42, .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: #E2E8F0; }
.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(15, 23, 42, .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: #1E3A8A;
    --rd-tono-suave: #DBEAFE;
    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 #EEF2F7;
}

.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(15, 23, 42, .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: #1E3A8A; background: #DBEAFE; 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(15, 23, 42, .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, #1E293B); }
.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: #F1F5F9; }
.rd-menu-item .bi-magic{ color: #3B82F6; }
.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, #E2E8F0 0 3px, #fff 3px 6px); }
.rd-resumen em.rd-tray-manual{ color: #334155; background: #F1F5F9; }

/* 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(15, 23, 42, .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: #DBEAFE; color: #1E3A8A; font-size: 14px; }
.rd-tray-chip-manual > i{ background: #F1F5F9; color: #334155; }
.rd-tray-chip span{ display: grid; min-width: 0; line-height: 1.25; }
.rd-tray-chip b{ color: var(--s-tinta-1, #1E293B); 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: #1E293B; color: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .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: #CBD5E1; 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 #93C5FD; outline-offset: 2px; }
.rd-trazo-texto{ font-size: 13px; }
.rd-trazo-guardar{ background: #3B82F6; }
.rd-trazo-guardar:hover:not(:disabled){ background: #3B82F6; }


.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, #3B82F6);
    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: #1E293B;
    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, #E2E8F0 3px 5px) !important; box-shadow: inset 0 0 0 1px #CBD5E1; }

@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(15, 23, 42, .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, #475569);
    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: #475569; }
    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: #E2E8F0; }

.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: #CBD5E1;
    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: #3B82F6; }
.mg-switch:checked::after{ transform: translateX(16px); }
.mg-switch:indeterminate{ background: #93C5FD; }
.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 #64748B;
    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: #3B82F6; background: #3B82F6; }
.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: #DBEAFE; }
.mg-turnos{ padding-left: 46px; }

/* Turno apagado: contorno gris; encendido: relleno (verde entrada, ambar salida) */
.mg-turno[aria-pressed="false"]{ border-color: #E2E8F0; 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: #DBEAFE; }
.mg-cerca-icono{ display: grid; place-items: center; flex: none; width: 12px; color: #3B82F6; font-size: 14px; }

/* El mapa general ocupa todo el ancho: no aplica el limite de 1480 px de pantallas grandes (barras grises) */


/* 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: #3B82F6;
    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(15, 23, 42, .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, #3B82F6);
    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(15, 23, 42, .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 #EEF2F7; }

.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: #DBEAFE;
    color: #3B82F6;
}

.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 #EEF2F7; }
.dt-parada:hover{ background: var(--s-fondo); }
.dt-parada.activa{ background: #DBEAFE; }
.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 #EEF2F7; }
.pp-modulo-icono{ display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #DBEAFE; color: #3B82F6; }
.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 #EEF2F7; }
.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: #3B82F6; }
.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: #1E3A8A; }
.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: #3B82F6; }
.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: #1E293B; 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(59, 130, 246, .55) 0%, rgba(59, 130, 246, 0) 55%), radial-gradient(90% 120% at 0% 100%, rgba(30, 58, 138, .35) 0%, rgba(30, 58, 138, 0) 60%), #0F172A;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .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: #0F172A; }
.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: #0F172A; 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: #CBD5E1; }
.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(15, 23, 42, .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(15, 23, 42, .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 #EEF2F7; 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: #EEF2F7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kq-linea{ fill: none; stroke: #3B82F6; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kq-cruz{ stroke: #1E293B; 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: #3B82F6; box-shadow: 0 0 0 1px rgba(59, 130, 246, .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: #1E293B; 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: #DBEAFE; color: #3B82F6; font-weight: 800; }
.kq-avatar.trab{ background: #DBEAFE; color: #1E3A8A; }

/* 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: #0F172A; 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, #93C5FD, #3B82F6); }
.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: #F1F5F9; font-size: 11px; font-weight: 700; color: #fff; }
.kq-celda.con{ background: rgba(59, 130, 246, 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: #0F172A; 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: #E2E8F0; } .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: #475569; --f: #F1F5F9; 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(15, 23, 42, .08); }
.db-a-error{ --c: #d93025; --f: #fce8e6; } .db-a-aviso{ --c: #e37400; --f: #fef3d6; } .db-a-info{ --c: #3B82F6; --f: #DBEAFE; }
.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 #EEF2F7; }
.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: #3B82F6; } .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, #E2E8F0); 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, #334155); font-size: 14px; cursor: pointer;
}
.ev-fecha-btn:hover:not(:disabled){ background: #F1F5F9; }
.ev-fecha-btn:disabled{ opacity: .35; cursor: default; }
.ev-fecha-btn:focus-visible{ outline: 2px solid #3B82F6; 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, #1E293B);
    white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer;
}
.ev-fecha-etq:hover{ background: #F1F5F9; }
.ev-fecha-etq:focus-within{ outline: 2px solid #3B82F6; outline-offset: 1px; }
.ev-fecha-etq > i{ color: #3B82F6; 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: #BFDBFE; background: #DBEAFE; }
/* 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: #DBEAFE !important; color: #1E3A8A !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: #DBEAFE; color: #1E3A8A; 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: #EEF2F7; }
.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, #334155); 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 #3B82F6; 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(15, 23, 42, .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: #E2E8F0; }
.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(15, 23, 42, .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%, #3B82F6 0 75%, #1E3A8A 0); }
.spm-linea{ flex: none; width: 14px; border-top: 2px dashed #475569; }
.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: #1E3A8A; font-size: 12.5px; }
.spm-enfoque-x{ border: 0; background: none; color: #1E3A8A; 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: #DBEAFE; color: #1E3A8A; 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: #EEF2F7; }
.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 #3B82F6; outline-offset: 1px; }
.nu-cuenta{ min-width: 20px; padding: 0 6px; border-radius: 999px; background: #DBEAFE; color: #1E3A8A; 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: #BFDBFE; background: #F8FAFC; }
.nu-tono{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3B82F6; }
.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: #3B82F6; }
.ce-nat-ok i, i.ce-nat-ok{ background: #1e8e3e; }
.ce-nat-info i, i.ce-nat-info{ background: #3B82F6; }
.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: #CBD5E1; }
.ce-avisa .ce-on{ color: #1E3A8A; }
.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: #DBEAFE; color: #1E3A8A; 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: #3B82F6; background: #DBEAFE; box-shadow: inset 0 0 0 1px #3B82F6; }
.cef-nat input:focus-visible + span{ outline: 2px solid #3B82F6; 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: #3B82F6; }
.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: #3B82F6; --notif-f: #DBEAFE;
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 14px 14px;
    border-radius: 16px; background: #fff; border: 1px solid var(--s-linea, #E2E8F0);
    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, #475569); }
.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, #1E293B); line-height: 1.3; }
.notif-detalle{ margin: 0; font-size: 13px; color: var(--s-tinta-2, #334155); 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, #475569); }
.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, #475569); }
.notif-cerrar:hover{ background: #F1F5F9; }
.notif-ver{ padding: 5px 14px; border: 0; border-radius: 999px; background: #1E293B; color: #fff; font-size: 13px; font-weight: 600; }
.notif-ver:hover{ background: #1E293B; }
@media (max-width: 575.98px) { .notif-pila{ right: 16px; left: 16px; bottom: 76px; width: auto; } }

/* ===== Marca CRMAX (2026-11-12) ===== */
.acceso-marca{ margin-bottom: 48px; }
.acceso-logo{
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}
.brand-logo.crmax-logo{
    width: auto;
    height: 34px;
    max-width: 160px;
    border-radius: 0;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .acceso-logo{ width: 170px; }
    .acceso-marca{ margin-bottom: 36px; }
    .brand-logo.crmax-logo{ height: 28px; max-width: 130px; }
}

/* Splash del login (2026-11-12): la persona queda al centro aunque el panel se angoste; capa azul marino corporativo abajo para leer el texto */
.acceso-splash-foto{ background-position: 42% center; }
.acceso-splash-capa{
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, .55) 68%, rgba(15, 23, 42, .9) 100%),
        linear-gradient(90deg, rgba(30, 58, 138, .28) 0%, rgba(30, 58, 138, 0) 55%);
}

/* Splash del login (2026-11-12): la persona queda al centro aunque el panel se angoste; capa azul marino corporativo abajo para leer el texto */
.acceso-splash-foto{ background-position: 42% center; }
.acceso-splash-capa{
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, .55) 68%, rgba(15, 23, 42, .9) 100%),
        linear-gradient(90deg, rgba(30, 58, 138, .28) 0%, rgba(30, 58, 138, 0) 55%);
}

/* ===== Archivos adjuntos (public/upload/views/upload_archivos.php) ===== */
.archivos{
    padding: 18px 20px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 18px;
}
.archivos-cab{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}
.archivos-acciones,
.archivo-acciones{
    display: flex;
    gap: 8px;
    flex: none;
}
.archivo{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--s-linea);
}
.archivo-icono{
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    font-size: 20px;
    color: var(--s-accion);
    background: var(--s-foco-suave);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}
.archivo-icono img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.archivo-icono:focus-visible{
    outline: 2px solid var(--s-foco);
    outline-offset: 2px;
}
.archivo-datos{
    display: grid;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
}
.archivo-datos b{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archivo-datos span{
    font-size: 12.5px;
    color: var(--s-tinta-3);
}

/* ===== Boton "Mas opciones" (⋯) con menu desplegable; se usa en cualquier encabezado o tarjeta =====
   Marcado: <div class="dropdown"><button class="menu-mas" data-bs-toggle="dropdown" ...><i class="bi bi-three-dots"></i></button>
   <ul class="dropdown-menu dropdown-menu-end">...</ul></div>. Agrega .menu-mas-esquina al .dropdown para fijarlo arriba a la derecha. */
.menu-mas{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.menu-mas:hover,
.menu-mas[aria-expanded="true"]{
    color: var(--s-accion);
    background: var(--s-relleno-2);
}
.menu-mas:focus-visible{
    outline: 2px solid var(--s-foco);
    outline-offset: 2px;
}
.menu-mas + .dropdown-menu .dropdown-item{
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-mas + .dropdown-menu .dropdown-item i{
    color: var(--s-tinta-3);
}
.menu-mas + .dropdown-menu .menu-mas-peligro,
.menu-mas + .dropdown-menu .menu-mas-peligro i{
    color: var(--s-error);
}
/* En una tarjeta: arriba a la derecha, en la misma columna que el del encabezado de la ventana */
.menu-mas-esquina{
    position: absolute;
    top: 14px;
    right: 37px;
}
/* En el encabezado de una ventana: a la altura de la X de cerrar (top 12px, right 14px, 36px) y 8px a su izquierda */
.modalWinContent > .pagina-encabezado .menu-mas-encabezado{
    position: absolute;
    top: 12px;
    right: 58px;
}
.modalWinContent > .pagina-encabezado:has(.menu-mas-encabezado){
    padding-right: 108px;
}
.perfil-tarjeta{
    position: relative;
}
.perfil-tarjeta .perfil-datos{
    padding-right: 40px;
}

/* ===== Clientes (public/clientes/views) ===== */
.cli-lista {
    display: grid;
}
.cli-fila {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 8px;
    text-align: left;
    color: var(--s-tinta);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--s-linea);
    border-radius: 0;
    cursor: pointer;
}
.cli-fila:hover {
    background: var(--s-fondo);
}
.cli-fila:focus-visible {
    outline: 2px solid var(--s-foco);
    outline-offset: -2px;
}
.cli-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--cli-color, var(--s-accion));
    border-radius: 12px;
}
.cli-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.cli-datos {
    display: grid;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
}
.cli-datos b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cli-datos span {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}
.cli-flecha {
    color: var(--s-tinta-3);
}
/* Ficha: el color corporativo marca el borde del logo y las iniciales */
.cli-tarjeta .perfil-foto img.cli-logo-grande {
    object-fit: contain;
    background: #fff;
    cursor: pointer;
}
.cli-iniciales {
    color: #fff !important;
    background: var(--cli-color, var(--s-accion)) !important;
}
.cli-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 3px 10px 3px 4px;
    font: 500 12px var(--s-dato);
    color: var(--s-tinta-2);
    background: var(--s-relleno);
    border-radius: 999px;
}
.cli-color-chip i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.cli-notas {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--s-tinta-2);
    white-space: normal;
}
/* Campo de color del formulario, a la altura de los campos flotantes */
.cli-campo-color {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 12px;
    background: var(--s-relleno);
    border-radius: var(--s-r-control);
    cursor: pointer;
}
.cli-campo-color input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}
.cli-campo-color span {
    display: grid;
    line-height: 1.2;
}
.cli-campo-color small {
    font-size: 12px;
    color: var(--s-tinta-3);
}
.cli-campo-color b {
    font: 500 14px var(--s-dato);
    color: var(--s-tinta);
}

/* ===== Solicitudes de tareas (public/tareas/views/tareas_solicitud_detalle.php) ===== */
/* Barra de pasos: hecho (azul con palomita), actual (marino) y pendiente (gris) */
.sol-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sol-pasos li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    color: var(--s-tinta-3);
}
.sol-pasos li span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    background: var(--s-relleno);
    border-radius: 50%;
}
.sol-pasos li.hecho span {
    color: #fff;
    background: var(--s-foco);
}
.sol-pasos li.actual {
    color: var(--s-accion);
}
.sol-pasos li.actual span {
    color: #fff;
    background: var(--s-accion);
    box-shadow: 0 0 0 4px #DBEAFE;
}

/* ===== Columna de cliente en la lista de proyectos: burbuja teñida con el color del cliente, con su logo redondo
   (o sus iniciales) y su nombre ===== */
.pry-cliente {
    align-items: center;
    flex: 0 0 26%;
    min-width: 0;
}
/* Columna con la foto del team líder (avatar de usuarios), centrada entre los datos y el cliente */
.pry-lider {
    justify-content: center;
    flex: 0 0 12%;
}
/* La foto mide lo mismo que la burbuja del cliente (36 px de alto) */
.pry-lider .usr-avatar {
    width: 36px;
    height: 36px;
}
.pry-burbuja {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 3px 14px 3px 3px;
    background: color-mix(in srgb, var(--cli-color, var(--s-accion)) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--cli-color, var(--s-accion)) 35%, #fff);
    border-radius: 999px;
}
.pry-cliente-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--cli-color, var(--s-accion));
    border-radius: 50%;
}
.pry-cliente-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
}
.pry-cliente-nombre {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-tinta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Comentarios de tareas (tareas_comentarios.php): conversacion; los propios a la derecha en azul claro ===== */
.tar-conversacion {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}
.tar-mensaje {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.tar-mensaje.mio {
    flex-direction: row-reverse;
}
.tar-mensaje .usr-avatar {
    flex: none;
    width: 32px;
    height: 32px;
}
.tar-globo {
    max-width: 78%;
    padding: 8px 12px;
    background: var(--s-relleno);
    border-radius: 14px 14px 14px 4px;
}
.tar-mensaje.mio .tar-globo {
    background: #DBEAFE;
    border-radius: 14px 14px 4px 14px;
}
.tar-globo small {
    font-size: 12px;
    color: var(--s-tinta-3);
}
.tar-globo p {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--s-tinta);
    overflow-wrap: anywhere;
}
.tar-escribir {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 14px;
}
/* Fotos y archivos dentro de un comentario, y los que esperan a enviarse */
.tar-adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.tar-foto {
    width: 84px;
    height: 84px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--s-linea);
    border-radius: 10px;
    cursor: pointer;
}
.tar-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tar-archivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--s-tinta);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--s-linea);
    border-radius: 10px;
}
.tar-archivo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tar-pendientes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.tar-pendientes:empty {
    display: none;
}
.tar-pendientes .btn-close {
    width: 8px;
    height: 8px;
    padding: 2px;
}

/* ===== Ficha de tarea y solicitud al estilo de Jira: contenido a la izquierda, panel de detalles a la derecha ===== */
.tar-vista {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    align-items: start;
    padding: 4px 20px 20px;
}
.tar-principal {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.tar-titulo small {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}
.tar-titulo h2 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--s-tinta);
}
.tar-seccion {
    padding: 16px 20px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 16px;
}
.tar-seccion h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--s-tinta);
}
/* Marca de origen: deja claro que la descripcion es lo que pidio el cliente */
.tar-origen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
}
.tar-lateral {
    padding: 14px 16px;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 16px;
}
.tar-lateral h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--s-tinta);
}
.tar-campo {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--s-tinta);
    border-top: 1px solid var(--s-linea);
}
.tar-campo > span:first-child {
    font-size: 12.5px;
    color: var(--s-tinta-3);
}
.tar-campo small {
    display: block;
    font-size: 12px;
    color: var(--s-tinta-3);
}
.tar-personas {
    display: grid;
    gap: 6px;
}
.tar-personas > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.tar-personas .usr-avatar {
    flex: none;
    width: 26px;
    height: 26px;
}
.tar-personas .usr-iniciales {
    font-size: 10px;
}
.tar-vacio {
    color: var(--s-tinta-3);
}
@media (max-width: 860px) {
    .tar-vista {
        grid-template-columns: 1fr;
        padding: 4px 12px 16px;
    }
}

/* ===== Encabezado de la ficha de tarea y solicitud: titulo, proyecto con su logo y cliente en burbuja ===== */
.tar-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.tar-encabezado .pagina-titulo {
    margin-right: 4px;
}
.tar-proyecto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 3px 14px 3px 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--s-tinta);
    white-space: nowrap;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 999px;
}
.tar-proyecto-logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--s-accion);
    border-radius: 8px;
}
.tar-proyecto-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

/* ===== Fotos de colaboradores encimadas (como Jira): lista y tablero de tareas ===== */
.tar-avatares {
    display: flex;
    padding-left: 8px;
}
.tar-avatares .usr-avatar {
    width: 34px;
    height: 34px;
    margin-left: -8px;
    border: 2px solid var(--s-superficie);
}
.tar-avatares .usr-iniciales {
    font-size: 11px;
}

/* ===== Tablero de tareas en atencion (Kanban, tareas_tablero.php): una columna por sub-estado con su color arriba ===== */
.kb-tablero {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.kb-columna {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    padding: 12px;
    background: var(--s-relleno);
    border-top: 4px solid var(--kb-color, var(--s-linea));
    border-radius: 16px;
    transition: box-shadow .15s;
}
.kb-por_hacer { --kb-color: #94A3B8; }
.kb-en_curso  { --kb-color: var(--s-foco); }
.kb-pruebas   { --kb-color: var(--s-aviso); }
.kb-hecho     { --kb-color: var(--s-ok); }
/* La columna sobre la que se esta soltando una tarjeta */
.kb-columna.kb-encima {
    box-shadow: inset 0 0 0 2px var(--s-foco);
}
.kb-columna-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 2px;
}
.kb-columna-cab b {
    font-size: 14px;
    color: var(--s-tinta);
}
.kb-columna-cab small {
    font-weight: 700;
    color: var(--s-tinta-3);
}
.kb-tarjeta {
    position: relative;
    background: var(--s-superficie);
    border: 1px solid var(--s-linea);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.kb-tarjeta[draggable="true"] {
    cursor: grab;
}
.kb-tarjeta:hover {
    border-color: #BFDBFE;
}
.kb-tarjeta-cuerpo {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
}
.kb-tarjeta-cuerpo:focus-visible {
    outline: 2px solid var(--s-foco);
    outline-offset: -2px;
    border-radius: 14px;
}
.kb-tarjeta-cuerpo > b {
    padding-right: 28px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--s-tinta);
}
.kb-tarjeta .menu-mas-esquina {
    top: 6px;
    right: 6px;
}
.kb-tarjeta .menu-mas {
    width: 30px;
    height: 30px;
    font-size: 16px;
}
.kb-proyecto {
    font-size: 12px;
    color: var(--s-tinta-3);
}
.kb-tarjeta .pry-burbuja {
    justify-self: start;
}
.kb-avance {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kb-avance .progress {
    flex: 1;
    height: 6px;
}
.kb-avance small {
    font-size: 12px;
    color: var(--s-tinta-3);
}
.kb-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kb-pie .tar-avatares .usr-avatar {
    width: 28px;
    height: 28px;
}
.kb-fechas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.kb-fechas small {
    font-size: 12px;
    color: var(--s-tinta-3);
    white-space: nowrap;
}
.kb-vacia {
    margin: 0;
    padding: 18px 8px;
    font-size: 13px;
    text-align: center;
    color: var(--s-tinta-3);
    border: 2px dashed var(--s-linea);
    border-radius: 12px;
}

/* ===== Lista de tareas como tabla (tareas_listar.php): mismas columnas en cada fila para que todo quede alineado.
   En celular solo quedan logo, datos, estatus y flecha; lo demas va en el subtitulo. ===== */
.tar-tabla {
    display: grid;
}
.tar-fila {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    gap: 6px 14px;
    align-items: center;
    padding: 12px 8px;
    border-top: 1px solid var(--s-linea);
    cursor: pointer;
}
.tar-fila:hover {
    background: var(--s-fondo);
}
.tar-fila:focus-visible {
    outline: 2px solid var(--s-foco);
    outline-offset: -2px;
}
.tar-fila-cab {
    padding-top: 4px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--s-tinta-3);
    text-transform: uppercase;
    border-top: 0;
    cursor: default;
}
.tar-fila-cab:hover {
    background: transparent;
}
.tar-celda-cliente {
    min-width: 0;
}
.tar-celda-avance {
    align-items: center;
    gap: 8px;
}
.tar-celda-avance .progress {
    flex: 1;
    height: 6px;
}
.tar-celda-avance small {
    width: 34px;
    font-size: 12px;
    text-align: right;
    color: var(--s-tinta-3);
}
.tar-celda-estatus {
    display: flex;
    justify-content: flex-start;
}
/* El estatus en atencion es un boton con menu para cambiar el sub-estado */
.tar-estatus-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
}
.tar-estatus-btn:hover {
    filter: brightness(.96);
    box-shadow: 0 0 0 2px #FDE68A;
}
.tar-estatus-btn .bi {
    font-size: 10px;
}
/* Celular: el estatus va debajo del titulo; logo y flecha ocupan las dos lineas */
@media (max-width: 767.98px) {
    .tar-fila > .cli-logo { grid-row: 1 / span 2; }
    .tar-fila > .tar-celda-estatus { grid-column: 2; }
    .tar-fila > .cli-flecha { grid-column: 3; grid-row: 1 / span 2; }
}
/* Mediano: sin avance ni prioridad. Ancho: todas las columnas */
@media (min-width: 768px) {
    .tar-fila {
        grid-template-columns: 48px minmax(0, 1fr) 84px 180px 190px 20px;
    }
}
@media (min-width: 1200px) {
    .tar-fila {
        grid-template-columns: 48px minmax(0, 1fr) 84px 180px 110px 92px 190px 20px;
    }
}