@charset "UTF-8";
/* =============================================================================
   Sistema de Postventa INNOVA · HISENSE — taller CONECTA
   assets/css/estilos.css · Módulo M2 (núcleo)

   Hoja de estilos única del sistema. Sin frameworks, sin fuentes externas.
   Los nombres de clase son normativos (sección 8.4 del contrato): los usan
   los seis módulos. No se renombran ni se redefinen fuera de este archivo.

   Índice
     1. Variables            8. Formularios
     2. Base y tipografía    9. Alertas
     3. Layout              10. Badges y estados
     4. Barra lateral       11. Semáforo SLA
     5. Encabezado          12. Línea de tiempo
     6. Tarjetas y KPI      13. Filtros y paginación
     7. Tablas              14. Gráficos, consulta pública, login
                            15. Responsive e impresión
   ========================================================================== */

/* ============================ 1. VARIABLES ================================ */
:root {
    /* Marca */
    --azul-900: #0F2A43;   /* fondo de la barra lateral */
    --azul-800: #143A5A;
    --azul-700: #14507D;
    --azul-600: #1A62A0;
    --azul-500: #1E6FA8;   /* color primario de acción */
    --azul-300: #7FB3D6;
    --azul-100: #E3F0F9;   /* fondos suaves, filas resaltadas */

    /* Semánticos */
    --verde:   #1B9C6B;    --verde-claro: #E4F5EE;
    --ambar:   #E0A106;    --ambar-claro: #FDF3DA;
    --rojo:    #D14343;    --rojo-claro:  #FBE9E9;
    --violeta: #7f8d9c;    --violeta-claro: #f0f2f5;
    --negro-sla: #2B2B2B;

    /* Neutros */
    --gris-900: #1B2430;   /* texto principal */
    --gris-700: #38455A;
    --gris-600: #5A6875;   /* texto secundario */
    --gris-400: #98A5B3;
    --gris-300: #D7DEE6;   /* bordes */
    --gris-200: #E8EDF3;
    --gris-100: #F1F4F8;   /* fondo de la página */
    --blanco:   #FFFFFF;

    /* Serie de 8 colores para Chart.js (dashboard.js la lee con getComputedStyle) */
    --grafico-1: #1E6FA8;  --grafico-2: #1B9C6B;  --grafico-3: #E0A106;  --grafico-4: #D14343;
    --grafico-5: #7f8d9c;  --grafico-6: #3d5978;  --grafico-7: #E4713B;  --grafico-8: #6C7A89;

    /* Estructura */
    --radio: 8px;
    --radio-chico: 4px;
    --sombra: 0 1px 3px rgba(15, 42, 67, .08), 0 1px 2px rgba(15, 42, 67, .06);
    --sombra-alta: 0 4px 12px rgba(15, 42, 67, .12);
    --sidebar-ancho: 236px;
    --espacio: 16px;
    --transicion: .15s ease;

    /* Tipografía */
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

/* ========================= 2. BASE Y TIPOGRAFÍA =========================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.55;
    color: var(--gris-900);
    background: var(--gris-100);
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.3; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-500); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .texto-auxiliar { font-size: 13px; color: var(--gris-600); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--gris-300); margin: var(--espacio) 0; }

code, .mono, .numero {
    font-family: var(--fuente-mono);
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--azul-500);
    outline-offset: 2px;
    border-radius: var(--radio-chico);
}

/* Texto solo para lectores de pantalla */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================== 3. LAYOUT ================================= */
.contenido {
    margin-left: var(--sidebar-ancho);
    padding: 24px;
    max-width: 1440px;
}

.pie {
    margin-left: var(--sidebar-ancho);
    padding: 16px 24px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--gris-600);
}

.grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: var(--espacio);
    margin-bottom: var(--espacio);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =========================== 4. BARRA LATERAL ============================= */
.menu-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
}

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-ancho);
    background: var(--azul-900);
    color: #DCE7F1;
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow-y: auto;
}

.sidebar-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sidebar-marca-icono {
    font-size: 20px;
    color: var(--azul-300);
    line-height: 1;
}
.sidebar-marca-texto { display: flex; flex-direction: column; line-height: 1.25; }
.sidebar-marca-texto strong { color: var(--blanco); font-size: 16px; }
.sidebar-marca-texto small { color: var(--azul-300); font-size: 11.5px; letter-spacing: .04em; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 2px;
    flex: 1 1 auto;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radio-chico);
    color: #C9DAE8;
    font-size: 14.5px;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}
.sidebar-nav a .icono {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--azul-300);
}
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--blanco);
    text-decoration: none;
}
.sidebar-nav a.activo {
    background: var(--azul-700);
    color: var(--blanco);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--azul-300);
}
.sidebar-nav a.activo .icono { color: var(--blanco); }

.sidebar-pie {
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-usuario { display: flex; flex-direction: column; line-height: 1.3; }
.sidebar-usuario-nombre { color: var(--blanco); font-size: 14px; font-weight: 600; }
.sidebar-usuario-rol { color: var(--azul-300); font-size: 12px; }
.sidebar-salir { color: #C9DAE8; font-size: 13.5px; }
.sidebar-salir:hover { color: var(--blanco); }
.sidebar-version { color: rgba(220, 231, 241, .55); font-size: 11px; }

/* ============================ 5. ENCABEZADO =============================== */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-left: var(--sidebar-ancho);
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-300);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.barra-superior-titulo {
    font-weight: 600;
    font-size: 15px;
    color: var(--gris-700);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barra-superior-usuario { display: flex; align-items: center; gap: 12px; }
.barra-superior-nombre { font-size: 13.5px; color: var(--gris-600); }

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 34px;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-chico);
    background: var(--blanco);
    color: var(--gris-700);
    font-size: 17px;
    cursor: pointer;
}
.menu-toggle:hover { border-color: var(--azul-500); color: var(--azul-500); }
/* El foco del teclado recae en el checkbox oculto: se dibuja sobre la etiqueta. */
.menu-toggle-input:focus-visible ~ .barra-superior .menu-toggle {
    outline: 2px solid var(--azul-500);
    outline-offset: 2px;
}

.encabezado-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--espacio);
}
.encabezado-pagina h1 { margin: 0; }
.encabezado-pagina p { margin: 4px 0 0; color: var(--gris-600); font-size: 13.5px; }
.encabezado-pagina .acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ========================= 6. TARJETAS Y KPI ============================== */
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: var(--espacio);
    overflow: hidden;
}
.tarjeta-titulo {
    padding: 12px 18px;
    border-bottom: 1px solid var(--gris-200);
    font-size: 15px;
    font-weight: 600;
    color: var(--gris-700);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-pie {
    padding: 12px 18px;
    border-top: 1px solid var(--gris-200);
    background: var(--gris-100);
    font-size: 13px;
    color: var(--gris-600);
}

.kpi {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-left: 4px solid var(--azul-500);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.kpi-valor {
    font-family: var(--fuente-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(19px, 2vw, 26px);   /* los importes largos no rompen la tarjeta */
    font-weight: 600;
    line-height: 1.2;
    color: var(--gris-900);
    overflow-wrap: anywhere;
}
.kpi-etiqueta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gris-600);
}
.kpi-variacion { font-size: 12.5px; color: var(--gris-600); }
.kpi-variacion.sube { color: var(--verde); }
.kpi-variacion.baja { color: var(--rojo); }

/* Accesos directos del panel de inicio */
.accesos { display: grid; gap: var(--espacio); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.acceso {
    display: block;
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
    color: inherit;
    transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.acceso:hover {
    text-decoration: none;
    border-color: var(--azul-300);
    box-shadow: var(--sombra-alta);
    transform: translateY(-1px);
}
.acceso strong { display: block; color: var(--azul-700); margin-bottom: 2px; }
.acceso span { font-size: 13px; color: var(--gris-600); }

/* ============================== 7. TABLAS ================================= */
.tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    font-size: 14px;
}
.tabla th, .tabla td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--gris-200);
    vertical-align: middle;
}
.tabla th {
    background: var(--gris-100);
    color: var(--gris-600);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tabla th a { color: inherit; }
.tabla tbody tr:hover { background: var(--azul-100); }
.tabla td.numero, .tabla td.mono, .tabla th.numero { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }
.tabla td.derecha, .tabla th.derecha { text-align: right; }
.tabla td.centro, .tabla th.centro { text-align: center; }
.tabla .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.fila-total {
    background: var(--gris-100);
    font-weight: 600;
}
.fila-total td { border-top: 2px solid var(--gris-300); }
.fila-revisar { background: var(--ambar-claro); }
.fila-revisar:hover { background: #FBEBC8; }

.vacio {
    padding: 32px 18px;
    text-align: center;
    color: var(--gris-600);
    background: var(--blanco);
    border: 1px dashed var(--gris-300);
    border-radius: var(--radio);
}

/* ============================= 8. BOTONES ================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    background: var(--gris-200);
    color: var(--gris-900);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--azul-500); color: var(--blanco); }
.btn-primario:hover { background: var(--azul-600); }
.btn-secundario { background: var(--blanco); color: var(--azul-700); border-color: var(--gris-300); }
.btn-secundario:hover { border-color: var(--azul-500); color: var(--azul-600); }
.btn-peligro { background: var(--rojo); color: var(--blanco); }
.btn-peligro:hover { background: #B93A3A; }
.btn-fantasma { background: transparent; color: var(--gris-700); border-color: transparent; }
.btn-fantasma:hover { background: var(--gris-200); }
.btn-chico { padding: 5px 10px; font-size: 13px; }
.btn:disabled, .btn.deshabilitado {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================== 9. FORMULARIOS =============================== */
.formulario { display: block; }

.seccion {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
    margin: 0 0 var(--espacio);
}
.seccion legend {
    padding: 0 8px;
    margin-left: -8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--azul-700);
}

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; min-width: 0; }
.campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-600);
}
.campo .ayuda { font-size: 12.5px; color: var(--gris-600); }
.campo .error { font-size: 12.5px; color: var(--rojo); font-weight: 600; }
.campo .obligatorio { color: var(--rojo); }

.control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-chico);
    background: var(--blanco);
    color: var(--gris-900);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.control:hover { border-color: var(--gris-400); }
.control:focus {
    outline: none;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px rgba(30, 111, 168, .16);
}
.control:disabled, .control[readonly] { background: var(--gris-100); color: var(--gris-600); }
textarea.control { min-height: 90px; resize: vertical; }
select.control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris-600) 50%), linear-gradient(135deg, var(--gris-600) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

.campo-calculado {
    padding: 8px 10px;
    border: 1px dashed var(--gris-300);
    border-radius: var(--radio-chico);
    background: var(--gris-100);
    color: var(--gris-700);
    font-family: var(--fuente-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.campo-linea { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.campo-linea label { margin: 0; }
.campo-linea input[type="checkbox"], .campo-linea input[type="radio"] { width: 16px; height: 16px; accent-color: var(--azul-500); }

/* ============================ 10. ALERTAS ================================= */
.alerta {
    padding: 11px 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radio-chico);
    margin-bottom: var(--espacio);
    font-size: 14px;
}
.alerta ul { margin: 6px 0 0; padding-left: 20px; }
.alerta-exito { background: var(--verde-claro); border-color: var(--verde); color: #10583D; }
.alerta-error { background: var(--rojo-claro);  border-color: var(--rojo);  color: #8A2727; }
.alerta-aviso { background: var(--ambar-claro); border-color: var(--ambar); color: #8A6200; }
.alerta-info  { background: var(--azul-100);    border-color: var(--azul-500); color: var(--azul-700); }

/* ====================== 11. BADGES Y ESTADOS ============================== */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--gris-200);
    color: var(--gris-700);
}
.badge-exito  { background: var(--verde-claro); color: var(--verde); }
.badge-aviso  { background: var(--ambar-claro); color: #8A6200; }
.badge-error  { background: var(--rojo-claro);  color: var(--rojo); }
.badge-neutro { background: var(--gris-200);    color: var(--gris-700); }

.badge-estado-abierto        { background: var(--gris-200);      color: var(--gris-700); }
.badge-estado-agendado       { background: var(--azul-100);      color: var(--azul-700); }
.badge-estado-en-diagnostico { background: var(--violeta-claro); color: var(--violeta); }
.badge-estado-en-espera      { background: var(--ambar-claro);   color: #8A6200; }
.badge-estado-en-reparacion  { background: #DDF0FB;              color: var(--azul-600); }
.badge-estado-solucionado    { background: var(--verde-claro);   color: var(--verde); }
.badge-estado-cerrado        { background: var(--gris-100);      color: var(--gris-600); }
.badge-estado-anulado        { background: var(--rojo-claro);    color: var(--rojo); }

/* ========================= 12. SEMÁFORO SLA =============================== */
.sla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gris-700);
    white-space: nowrap;
}
.sla::before {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gris-400);
    flex: 0 0 auto;
}
.sla-verde::before { background: var(--verde); }
.sla-ambar::before { background: var(--ambar); }
.sla-rojo::before  { background: var(--rojo); }
.sla-negro::before { background: var(--negro-sla); }
.sla-gris::before  { background: var(--gris-400); }

/* ======================== 13. LÍNEA DE TIEMPO ============================= */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--gris-200);
}
.timeline-item {
    position: relative;
    padding: 0 0 18px 30px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-punto {
    position: absolute;
    left: 0; top: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--blanco);
    border: 3px solid var(--azul-500);
}
.timeline-punto.apertura      { border-color: var(--azul-700); }
.timeline-punto.cambio_estado { border-color: var(--azul-500); }
.timeline-punto.visita        { border-color: var(--violeta); }
.timeline-punto.repuesto      { border-color: var(--ambar); }
.timeline-punto.llamada       { border-color: var(--grafico-6); }
.timeline-punto.nota          { border-color: var(--gris-400); }
.timeline-punto.informe       { border-color: var(--gris-600); }
.timeline-punto.reclamo       { border-color: var(--rojo); }
.timeline-punto.reapertura    { border-color: var(--grafico-7); }
.timeline-punto.escudo        { border-color: var(--violeta); }
.timeline-punto.cierre        { border-color: var(--verde); }
.timeline-punto.sistema       { border-color: var(--gris-300); }

.timeline-cuerpo {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 10px 14px;
    box-shadow: var(--sombra);
}
.timeline-cuerpo p { margin: 0; white-space: pre-line; }
.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12.5px;
    color: var(--gris-600);
    margin-bottom: 4px;
}
.timeline-publico {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--verde-claro);
    color: var(--verde);
    font-size: 11.5px;
    font-weight: 600;
}

/* ==================== 14. FILTROS Y PAGINACIÓN ============================ */
.filtros {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 18px;
    margin-bottom: var(--espacio);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 14px;
    align-items: end;
}
.filtros .campo { margin-bottom: 0; }
.filtros .acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 1 / -1;
}

.paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: var(--espacio) 0;
}
.paginacion a, .paginacion .actual, .paginacion .deshabilitado {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-chico);
    background: var(--blanco);
    color: var(--azul-700);
    font-size: 13.5px;
    text-align: center;
    text-decoration: none;
}
.paginacion a:hover { border-color: var(--azul-500); background: var(--azul-100); text-decoration: none; }
.paginacion .actual { background: var(--azul-500); border-color: var(--azul-500); color: var(--blanco); font-weight: 600; }
.paginacion .deshabilitado { color: var(--gris-400); background: var(--gris-100); }

/* ============================ 15. GRÁFICOS =============================== */
.grafico-caja {
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 16px 18px;
    margin-bottom: var(--espacio);
    min-width: 0;
}
.grafico-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gris-700);
    margin: 0 0 10px;
}
.grafico-caja canvas {
    display: block;
    width: 100% !important;
    height: 280px !important;
    max-height: 280px;
}

/* ======================== 16. CONSULTA PÚBLICA ============================ */
.publico-caja {
    max-width: 780px;
    margin: 0 auto var(--espacio);
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
}
.publico-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 var(--espacio);
    padding: 0;
    counter-reset: paso;
}
.publico-paso {
    flex: 1 1 120px;
    padding: 10px 12px;
    border-radius: var(--radio-chico);
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
    border-top: 3px solid var(--gris-300);
    font-size: 13px;
    color: var(--gris-600);
    text-align: center;
}
.publico-paso.completado {
    background: var(--verde-claro);
    border-color: var(--verde);
    color: #10583D;
    font-weight: 600;
}
.publico-paso.actual {
    background: var(--azul-100);
    border-color: var(--azul-500);
    color: var(--azul-700);
    font-weight: 600;
    box-shadow: var(--sombra);
}

/* ============================== 17. LOGIN ================================ */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, var(--azul-900) 0%, var(--azul-700) 55%, var(--azul-600) 100%);
}
.login-caja {
    width: 100%;
    max-width: 390px;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: 30px 28px 26px;
}
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca-icono { font-size: 30px; color: var(--azul-500); line-height: 1; }
.login-marca h1 { font-size: 20px; margin: 8px 0 2px; }
.login-marca p { font-size: 13px; color: var(--gris-600); margin: 0; }
.login-caja .btn { width: 100%; padding: 10px 14px; }
.login-pie {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-200);
    text-align: center;
    font-size: 13px;
    color: var(--gris-600);
}

/* ============================ 18. RESPONSIVE ============================== */
/* Pantallas intermedias: las rejillas anchas pasan a dos columnas antes de
   colapsar del todo, para que las tarjetas KPI no aprieten las cifras. */
@media (max-width: 1200px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .menu-toggle-input { order: 0; }
    .barra-superior    { order: 1; margin-left: 0; padding: 10px 16px; }
    .sidebar           { order: 2; }
    .contenido         { order: 3; margin-left: 0; padding: 16px; }
    .pie               { order: 4; margin-left: 0; padding: 16px; }

    .menu-toggle { display: inline-flex; }

    .sidebar {
        position: static;
        width: auto;
        max-height: 0;
        overflow: hidden;
        border-bottom: 1px solid var(--azul-800);
        transition: max-height var(--transicion);
    }
    .menu-toggle-input:checked ~ .sidebar {
        max-height: 640px;
        overflow: auto;
    }
    .sidebar-marca { display: none; }
    .sidebar-nav { padding: 10px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .filtros { grid-template-columns: 1fr 1fr; }
    .encabezado-pagina { flex-direction: column; align-items: stretch; }
    .barra-superior-nombre { display: none; }
    .tabla th { position: static; }
    .grafico-caja canvas { height: 240px !important; }
}

@media (max-width: 560px) {
    .filtros { grid-template-columns: 1fr; }
    .kpi-valor { font-size: 22px; }
    .contenido { padding: 12px; }
}

/* ============================ 19. IMPRESIÓN =============================== */
@media print {
    .sidebar, .barra-superior, .menu-toggle, .menu-toggle-input,
    .acciones, .paginacion, .filtros, .pie { display: none !important; }
    body { background: var(--blanco); font-size: 12px; }
    .contenido { margin-left: 0; padding: 0; max-width: none; }
    .tarjeta, .seccion, .grafico-caja, .kpi { box-shadow: none; border-color: var(--gris-400); break-inside: avoid; }
    .tabla th { background: var(--gris-100) !important; }
    a { color: inherit; text-decoration: none; }
}

/* ===================== 20. IDENTIDAD VISUAL · INNOVA CARE =============== */
/* Capa de evolución visual: conserva los contratos de clases de los módulos. */
:root {
    --azul-900: #102b45;
    --azul-800: #163c5c;
    --azul-700: #1d5876;
    --azul-600: #3b4d62;
    --azul-500: #344961;
    --azul-300: #a3b1c1;
    --azul-100: #e9ecef;
    --gris-900: #182d3d;
    --gris-700: #385060;
    --gris-600: #65757f;
    --gris-400: #a5b2b8;
    --gris-300: #d8e0df;
    --gris-200: #e8eeeb;
    --gris-100: #f4f7f4;
    --verde: #354557;
    --ambar: #d58c35;
    --rojo: #cc5d55;
    --violeta: #7d8691;
    --grafico-1: #344961; --grafico-2: #354557; --grafico-3: #d58c35; --grafico-4: #cc5d55;
    --grafico-5: #7d8691; --grafico-6: #647588; --grafico-7: #cf744b; --grafico-8: #65757f;
    --radio: 14px;
    --radio-chico: 8px;
    --sombra: 0 1px 2px rgba(32, 40, 50, .03), 0 8px 24px rgba(32, 40, 50, .055);
    --sombra-alta: 0 18px 50px rgba(11, 38, 57, .18);
    --sidebar-ancho: 258px;
    --fuente: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { background: #f4f7f4; letter-spacing: -.01em; }
h1, h2 { letter-spacing: -.035em; }
h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 750; }
h2 { font-size: 1.2rem; }
.sobrelinea { display: block; color: var(--azul-600); font-size: .68rem; font-weight: 800; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }

.sidebar {
    background: radial-gradient(circle at 15% 0%, #313e4c 0, #102b45 43%, #0b2238 100%);
    box-shadow: 8px 0 28px rgba(11, 34, 56, .08);
}
.sidebar::after { content: ""; height: 145px; width: 145px; border: 1px solid rgba(163, 177, 193, .18); border-radius: 50%; position: absolute; bottom: -78px; left: -68px; pointer-events: none; }
.sidebar-marca { padding: 25px 21px 20px; border-bottom-color: rgba(255,255,255,.12); }
.sidebar-marca-icono, .login-marca-icono { display: inline-flex; align-items: center; gap: 3px; width: 27px; height: 27px; padding: 5px; border: 1px solid rgba(163, 177, 193, .55); border-radius: 50%; }
.sidebar-marca-icono i, .login-marca-icono i { display: block; width: 3px; border-radius: 99px; background: #c5cdd7; }
.sidebar-marca-icono i:nth-child(1), .login-marca-icono i:nth-child(1) { height: 7px; }
.sidebar-marca-icono i:nth-child(2), .login-marca-icono i:nth-child(2) { height: 13px; }
.sidebar-marca-icono i:nth-child(3), .login-marca-icono i:nth-child(3) { height: 9px; }
.sidebar-marca-texto strong { font-size: 17px; letter-spacing: -.035em; }
.sidebar-marca-texto em { color: #a3b1c1; font-style: normal; font-weight: 500; }
.sidebar-marca-texto small { color: #b4bcc5; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; margin-top: 3px; }
.sidebar-nav { padding: 20px 12px; gap: 5px; }
.sidebar-nav a { padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.sidebar-nav a .icono { color: #a3b1c1; opacity: .9; }
.sidebar-nav a.activo { background: rgba(163, 177, 193, .16); box-shadow: inset 2px 0 #a3b1c1; }
.sidebar-pie { padding: 17px 20px 22px; border-top-color: rgba(255,255,255,.12); }

.barra-superior { min-height: 66px; padding: 9px 28px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom-color: rgba(216,224,223,.8); }
.barra-superior-titulo { display: flex; flex-direction: column; gap: 1px; color: var(--gris-900); font-size: 16px; letter-spacing: -.02em; }
.barra-superior-titulo small { color: var(--gris-600); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contenido { padding: 31px 32px 28px; }
.pie { padding: 14px 32px 28px; }

.btn { min-height: 37px; border-radius: 9px; padding: 9px 14px; font-size: 13px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primario { background: #344961; box-shadow: 0 6px 15px rgba(52, 73, 97,.18); }
.btn-primario:hover { background: #2b3d51; box-shadow: 0 9px 20px rgba(52, 73, 97,.24); }
.btn-secundario { background: rgba(255,255,255,.75); border-color: #d6d9dc; }

.bienvenida { position: relative; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; min-height: 180px; margin: -3px 0 24px; padding: 27px 31px; color: #fff; background: linear-gradient(118deg, #102b45 0%, #253241 64%, #3c4c5e 100%); border-radius: 18px; box-shadow: 0 16px 32px rgba(16,43,69,.17); }
.bienvenida::before, .bienvenida::after { content: ""; position: absolute; border: 1px solid rgba(178, 191, 205,.25); border-radius: 50%; pointer-events: none; }
.bienvenida::before { width: 340px; height: 340px; right: 12%; bottom: -260px; }
.bienvenida::after { width: 470px; height: 470px; right: -180px; top: -320px; }
.bienvenida-trama { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 24px, rgba(255,255,255,.04) 25px 26px); opacity: .7; }
.bienvenida-contenido, .bienvenida-acciones { position: relative; z-index: 1; }
.bienvenida .sobrelinea { color: #c5cdd7; margin-bottom: 8px; }
.bienvenida h1 { margin: 0 0 6px; color: #fff; }
.bienvenida p { max-width: 570px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; }
.bienvenida-acciones { flex: 0 0 auto; }
.bienvenida .btn-primario { color: #12374d; background: #c5cdd7; box-shadow: none; }
.bienvenida .btn-primario:hover { background: #cdd6e1; }
.bienvenida .btn-secundario { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }

.panel-kpis { margin-bottom: 30px; }
.kpi { position: relative; min-height: 132px; overflow: hidden; border: 0; border-left: 0; border-radius: 14px; padding: 19px; box-shadow: var(--sombra); }
.kpi::after { content: ""; width: 50px; height: 50px; position: absolute; right: -18px; top: -18px; border: 8px solid #e7eaed; border-radius: 50%; }
.kpi:nth-child(2)::after { border-color: #eaedf1; }.kpi:nth-child(3)::after { border-color: #faf0df; }.kpi:nth-child(4)::after { border-color: #eff0f2; }
/* Tarjeta destacada del panel de inicio: el backlog abierto manda sobre el resto. */
.kpi-prioridad { background: linear-gradient(160deg, #f5f6f8 0%, var(--blanco) 62%); box-shadow: var(--sombra-alta); }
.kpi-prioridad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--verde); }
.kpi-prioridad .kpi-valor { color: #263443; }
.kpi-valor { color: #183e55; font-size: clamp(1.65rem, 2.6vw, 2.2rem); font-weight: 750; letter-spacing: -.055em; }
.kpi-etiqueta { color: var(--gris-700); font-size: 10px; letter-spacing: .1em; }
.kpi-variacion { margin-top: auto; font-size: 12px; }
.seccion-cabecera { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 1px 13px; }
.seccion-cabecera h2 { margin: 3px 0 0; }.seccion-cabecera p { margin: 0; color: var(--gris-600); font-size: 13px; }
.accesos { gap: 13px; }
.acceso { position: relative; min-height: 120px; padding: 18px 19px; border: 1px solid #e4ebe8; border-radius: 13px; box-shadow: none; }
.acceso::after { content: "→"; position: absolute; right: 18px; bottom: 14px; color: #788594; font-size: 18px; transition: transform .18s ease; }
.acceso:hover { border-color: #a9b2bc; box-shadow: 0 12px 23px rgba(42, 53, 66,.08); transform: translateY(-3px); }.acceso:hover::after { transform: translateX(4px); }
.acceso strong { color: #2b3847; font-size: 15px; }.acceso span { display: block; max-width: 92%; line-height: 1.45; }

.tarjeta, .seccion, .filtros, .grafico-caja { border-color: #e2e9e6; border-radius: 13px; box-shadow: var(--sombra); }
.tarjeta-titulo { padding: 14px 19px; color: #26495b; }.tarjeta-cuerpo { padding: 19px; }
.tabla th { background: #f4f7f4; color: #61737a; font-size: 10.5px; letter-spacing: .075em; }.tabla th, .tabla td { padding: 11px 12px; }.tabla tbody tr:hover { background: #f0f2f4; }
.control { border-radius: 8px; border-color: #d7d9dc; padding: 9px 10px; }.control:focus { border-color: #344961; box-shadow: 0 0 0 3px rgba(52, 73, 97,.13); }
.filtros { padding: 18px; gap: 12px 15px; }.badge { font-size: 11px; letter-spacing: .01em; }

.pagina-login { position: relative; justify-content: flex-end; overflow: hidden; padding: 42px clamp(24px, 10vw, 13%); background: linear-gradient(90deg, rgba(9,31,48,.94) 0%, rgba(11,41,61,.8) 44%, rgba(10,43,61,.16) 72%), url('../img/login-service-studio.png') center/cover no-repeat #102b45; }
.login-contexto { position: absolute; left: clamp(24px, 10vw, 13%); bottom: 11%; max-width: 380px; color: #fff; }.login-contexto .sobrelinea { color: #c5cdd7; margin-bottom: 9px; }.login-contexto p { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.login-caja { position: relative; max-width: 412px; border: 1px solid rgba(255,255,255,.56); border-radius: 17px; padding: 33px 32px 27px; box-shadow: 0 22px 60px rgba(3,22,37,.28); }.login-marca { text-align: left; }.login-marca-icono { margin-bottom: 15px; width: 34px; height: 34px; padding: 7px; border-color: #8997a7; }.login-marca-icono i { background: #344961; }.login-marca h1 { margin: 8px 0 4px; font-size: 1.68rem; }.login-marca p { font-size: 12px; }.login-caja .sobrelinea { color: #506073; }

@media (max-width: 900px) { .contenido { padding: 22px 18px; }.barra-superior { padding: 9px 18px; }.pie { padding: 15px 18px 24px; }.bienvenida { min-height: 0; align-items: flex-start; flex-direction: column; padding: 23px; }.bienvenida-acciones { margin-top: 18px; }.pagina-login { justify-content: center; background: linear-gradient(135deg, rgba(9,31,48,.92), rgba(38, 51, 65,.76)), url('../img/login-service-studio.png') center/cover; }.login-contexto { display: none; } }
@media (max-width: 560px) { .bienvenida p { font-size: 13px; }.seccion-cabecera { align-items: flex-start; flex-direction: column; }.bienvenida-acciones { width: 100%; }.bienvenida-acciones .btn { flex: 1; }.login-caja { padding: 28px 23px 24px; } }

/* ==================== 21. ACCESO RÁPIDO Y MENÚ INTELIGENTE ============== */
.menu-busqueda { position: relative; display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 0 8px 8px; border-bottom: 1px solid rgba(255,255,255,.1); color: #a3b1c1; }
.menu-busqueda > span { font-size: 18px; line-height: 1; }.menu-busqueda input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 7px 0; background: transparent; color: #fff; font: inherit; font-size: 12px; }.menu-busqueda input::placeholder { color: #a9b0b9; }.menu-busqueda kbd { color: #b2b8bf; border-color: rgba(163, 177, 193,.23); background: rgba(255,255,255,.05); font-size: 9px; white-space: nowrap; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; min-height: 19px; padding: 1px 5px; border: 1px solid #d7d9dc; border-radius: 5px; background: #f9f9fa; color: #61737a; font-family: var(--fuente-mono); font-size: 10px; line-height: 1; box-shadow: 0 1px 0 rgba(15,42,67,.04); }
.abrir-comandos { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 10px; border: 1px solid #dee0e2; border-radius: 8px; background: rgba(249, 249, 250,.8); color: #656b71; font: inherit; font-size: 12px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, color .18s ease; }.abrir-comandos > span:first-child { color: #344961; font-size: 17px; line-height: 1; }.abrir-comandos:hover { border-color: #a4adb7; color: #1d5876; box-shadow: 0 4px 10px rgba(33, 45, 58,.07); }.abrir-comandos kbd { font-size: 9px; }
.comandos-abiertos { overflow: hidden; }.paleta-comandos[hidden] { display: none; }.paleta-comandos { position: fixed; z-index: 100; inset: 0; display: grid; place-items: start center; padding: min(14vh, 120px) 20px 20px; }.paleta-fondo { position: absolute; inset: 0; background: rgba(8,30,44,.54); backdrop-filter: blur(7px); animation: fundido .16s ease-out; }.paleta-dialogo { position: relative; width: min(100%, 620px); overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 17px; background: rgba(255,255,255,.97); box-shadow: 0 26px 75px rgba(1,23,38,.33); animation: paleta-entra .18s cubic-bezier(.2,.8,.2,1); }.paleta-campo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e3ebe8; color: #344961; }.paleta-campo > span { font-size: 24px; line-height: 1; }.paleta-campo input { width: 100%; border: 0; outline: 0; background: transparent; color: #183e55; font: inherit; font-size: 16px; letter-spacing: -.02em; }.paleta-campo input::placeholder { color: #9da1a6; }.paleta-contenido { padding: 15px 10px 10px; min-height: 200px; }.paleta-contenido .sobrelinea { margin: 0 8px 8px; font-size: 9px; }.paleta-resultados { display: grid; gap: 2px; }.paleta-resultado { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 47px; padding: 8px; border-radius: 9px; color: #324d5c; font-size: 14px; text-decoration: none; }.paleta-resultado:hover, .paleta-resultado.activo { background: #eceff2; color: #2c3b4d; text-decoration: none; }.paleta-icono { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: #dde2e7; color: #344961; font-weight: 800; }.paleta-atajo { color: #8a9aa0; font-size: 11px; }.paleta-atajo b { font-weight: 500; }.paleta-vacio { margin: 45px 8px 0; color: #6d7e85; text-align: center; font-size: 13px; }.paleta-pie { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid #e3ebe8; color: #75868b; font-size: 10px; }.paleta-pie kbd { margin-right: 3px; transform: translateY(-1px); }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } } @keyframes paleta-entra { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 640px) { .abrir-comandos-texto, .abrir-comandos kbd { display: none; }.abrir-comandos { width: 34px; justify-content: center; padding: 0; }.paleta-comandos { padding: 72px 12px 12px; }.paleta-dialogo { border-radius: 14px; }.paleta-pie { display: none; }.paleta-atajo { display: none; }.paleta-contenido { min-height: 170px; } }

/* ======================== 22. FLUJOS Y FICHAS DE SERVICIO =============== */
.encabezado-pagina { position: relative; align-items: center; min-height: 72px; margin-bottom: 22px; padding-bottom: 17px; border-bottom: 1px solid #e2e3e5; }.encabezado-pagina::before { content: ""; position: absolute; bottom: -1px; left: 0; width: 48px; height: 2px; background: #647588; }.encabezado-pagina h1 { margin: 0; color: #183e55; }.encabezado-pagina p { max-width: 680px; margin-top: 5px; }.encabezado-pagina .sobrelinea { margin-bottom: 4px; }
.encabezado-caso { align-items: flex-end; }.encabezado-caso h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.encabezado-caso .badge { transform: translateY(1px); }.encabezado-formulario { align-items: flex-end; }

.ficha-indicadores { gap: 12px; margin-bottom: 12px; }.ficha-indicadores .kpi { min-height: 108px; padding: 15px 17px; }.ficha-indicadores .kpi-valor { font-size: clamp(1.2rem, 2vw, 1.65rem); }.ficha-indicadores .kpi-etiqueta { line-height: 1.35; text-transform: none; letter-spacing: 0; font-size: 11.5px; }.ficha-indicadores .sla { font-family: var(--fuente); font-size: .78em; font-weight: 650; }.ficha-indicadores .sla::before { width: 12px; height: 12px; }

.formulario-flujo { counter-reset: pasos-formulario; max-width: 1340px; }.formulario-flujo .seccion { position: relative; overflow: visible; margin-bottom: 19px; padding: 25px 22px 16px; border-color: #e4e5e7; }.formulario-flujo .seccion legend { display: flex; align-items: center; gap: 9px; width: auto; padding: 0 8px; color: #293645; font-size: 15px; letter-spacing: -.015em; }.formulario-flujo .seccion legend::before { counter-increment: pasos-formulario; content: counter(pasos-formulario, decimal-leading-zero); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e4e7eb; color: #344961; font-family: var(--fuente-mono); font-size: 10px; letter-spacing: 0; }.formulario-flujo .seccion:focus-within { border-color: #a8b1bc; box-shadow: 0 0 0 3px rgba(52, 73, 97,.08), var(--sombra); }.formulario-flujo .campo { margin-bottom: 16px; }.formulario-flujo .campo label { color: #555c63; }.formulario-flujo .campo-calculado { min-height: 39px; display: flex; align-items: center; border-style: solid; border-color: #e4ece9; background: #f7f9f8; }.formulario-flujo .acciones { position: sticky; bottom: 12px; z-index: 8; display: flex; width: fit-content; margin: 20px 0 0 auto; padding: 9px; border: 1px solid #dee1e4; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 9px 24px rgba(29, 38, 50,.13); backdrop-filter: blur(9px); }

.filtros { position: relative; overflow: visible; }.filtros::before { content: "Refina la vista"; position: absolute; top: -9px; left: 13px; padding: 0 6px; background: #fff; color: #69727c; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.filtros details { grid-column: 1 / -1; padding-top: 3px; }.filtros summary { width: fit-content; color: #344251; font-size: 12px; font-weight: 700; cursor: pointer; }.filtros details[open] summary { margin-bottom: 13px; }.filtros .acciones { padding-top: 3px; border-top: 1px solid #edf1ef; }

.tarjeta > .tarjeta-titulo { min-height: 51px; background: linear-gradient(90deg, rgba(244,247,244,.95), rgba(255,255,255,.9)); }.tarjeta > .tarjeta-titulo::before { content: ""; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: #8693a2; box-shadow: 0 0 0 4px #eaedf0; }.tarjeta > .tarjeta-titulo > * { margin: 0; }.timeline-cuerpo { border-radius: 10px; }.timeline-punto { box-shadow: 0 0 0 4px #f4f7f4; }.timeline::before { background: linear-gradient(#c1c8cf, #e6e8ea); }
.vacio { padding: 44px 22px; border-color: #c4c9cf; background: linear-gradient(135deg, #fbfdfc, #f1f2f4); color: #61686f; }.vacio::before { content: "⌕"; display: grid; place-items: center; width: 35px; height: 35px; margin: 0 auto 10px; border-radius: 50%; background: #e2e5e9; color: #3b4c5f; font-size: 20px; }

@media (max-width: 900px) { .encabezado-pagina { min-height: 0; margin-bottom: 18px; }.formulario-flujo .seccion { padding: 21px 15px 12px; }.formulario-flujo .acciones { position: static; width: 100%; margin-top: 14px; }.formulario-flujo .acciones .btn { flex: 1; }.filtros::before { background: #fff; } }

/* ====================== 23. TABLERO, DATOS Y EXPORTACIÓN ================= */
.encabezado-dashboard { margin-bottom: 20px; }.encabezado-dashboard > div:first-child { max-width: 620px; }.panel-dashboard { position: relative; }.panel-dashboard > #dashboard-periodo { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 7px 11px; border: 1px solid #dfe2e5; border-radius: 999px; background: #f0f2f4; color: #575e67; font-size: 12px; }.panel-dashboard > #dashboard-periodo strong { color: #283341; }.panel-dashboard .grid-3 { gap: 12px; }.panel-dashboard .kpi { min-height: 119px; }.tarjeta-grafico { break-inside: avoid; }.tarjeta-grafico .tarjeta-titulo { align-items: center; }.tarjeta-grafico .grafico-titulo { flex: 1; }.grafico-descargar { flex: 0 0 auto; padding: 4px 7px; border: 1px solid #d7dade; border-radius: 6px; background: #f8f9fa; color: #535e6a; font: 700 10px var(--fuente); letter-spacing: .04em; cursor: pointer; transition: border-color .18s ease, background .18s ease; }.grafico-descargar:hover { border-color: #959fab; background: #eceef1; }.tarjeta-grafico .tarjeta-cuerpo { padding: 14px 17px 17px; }.tarjeta-grafico .grafico-caja { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.dashboard-hero { position: relative; min-height: 208px; overflow: hidden; margin: 0 0 22px; padding: 28px 31px; border-radius: 17px; background: linear-gradient(90deg, rgba(8,31,49,.98) 0%, rgba(9,38,58,.88) 43%, rgba(9,39,58,.14) 80%), url('../img/dashboard-operations-hero.png') center/cover no-repeat #0c2a42; box-shadow: 0 16px 32px rgba(12,44,65,.16); }.dashboard-hero-contenido { position: relative; z-index: 1; max-width: 550px; }.dashboard-hero .sobrelinea { color: #b0bdcb; margin-bottom: 7px; }.dashboard-hero h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.045em; }.dashboard-hero p { max-width: 480px; margin: 0; color: rgba(255,255,255,.78); font-size: 13px; }.dashboard-hero-pistas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }.dashboard-hero-pistas span { padding: 4px 9px; border: 1px solid rgba(176, 189, 203,.3); border-radius: 999px; background: rgba(163, 177, 193,.1); color: #e1e7ee; font-size: 10px; font-weight: 700; letter-spacing: .04em; }

@media print { @page { size: landscape; margin: 11mm; } .encabezado-dashboard { display: block; border-bottom-color: #bdc0c3; }.encabezado-dashboard .acciones, #dashboard-filtros, .grafico-descargar, #dashboard-actualizar, #dashboard-pdf, .abrir-comandos, .sidebar, .barra-superior, .pie { display: none !important; }.contenido { margin: 0 !important; max-width: none !important; padding: 0 !important; }.panel-dashboard > #dashboard-periodo { border-color: #d0d2d5; background: #fff; }.panel-dashboard .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }.panel-dashboard .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }.panel-dashboard .kpi { min-height: 74px; padding: 10px; }.panel-dashboard .kpi::after { display: none; }.panel-dashboard .kpi-valor { font-size: 19px; }.tarjeta-grafico { box-shadow: none; }.grafico-caja canvas { height: 190px !important; } }
@media print { .dashboard-hero { min-height: 95px; padding: 15px; background: #102b45 !important; box-shadow: none; }.dashboard-hero p { font-size: 11px; }.dashboard-hero-pistas { margin-top: 8px; } }
@media (max-width: 700px) { .dashboard-hero { min-height: 185px; padding: 23px; background-position: 66% center; }.dashboard-hero h2 { max-width: 330px; }.dashboard-hero p { max-width: 310px; } }

/* ======================= 24. AJUSTE DE PORTADA DE ACCESO ================= */
.pagina-login { isolation: isolate; background: #102b45; }.pagina-login::before, .pagina-login::after { content: ""; position: absolute; inset: 0; pointer-events: none; }.pagina-login::before { z-index: -2; background: url('../img/login-service-studio.png') center/cover no-repeat; transform: scaleX(-1); }.pagina-login::after { z-index: -1; background: linear-gradient(90deg, rgba(9,31,48,.9) 0%, rgba(10,40,59,.67) 45%, rgba(10,43,61,.2) 74%, rgba(10,43,61,.1) 100%); }.login-contexto, .login-caja { z-index: 1; }.login-caja .login-marca h1 { margin-top: 0; }
@media (max-width: 900px) { .pagina-login::after { background: linear-gradient(135deg, rgba(9,31,48,.91), rgba(38, 51, 65,.68)); } }

/* ======================== 25. CONSTRUCTOR DE REPORTES =================== */
.encabezado-reportes { align-items: flex-end; }.constructor-reportes { margin: 0 0 20px; padding: 20px; border: 1px solid #e0e2e5; border-radius: 16px; background: linear-gradient(135deg, #f9fcfb, #f0f1f3); box-shadow: 0 10px 28px rgba(39, 50, 62,.06); }.constructor-cabecera { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid #dfe2e5; }.constructor-cabecera h2 { margin: 3px 0 0; color: #333f4c; }.constructor-cabecera p { max-width: 330px; margin: 0; color: #6a7077; font-size: 12px; }.constructor-cuerpo { display: grid; grid-template-columns: 1.35fr 1fr .8fr; gap: 14px; padding-top: 16px; }.constructor-etiqueta { display: block; margin: 0 0 8px; color: #666c73; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.constructor-dimensiones { display: flex; flex-wrap: wrap; gap: 6px; }.dimension-arrastre { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #dbdee1; border-radius: 7px; background: #fff; color: #545c66; font: 600 11px var(--fuente); cursor: grab; transition: transform .16s ease, border-color .16s ease, background .16s ease; }.dimension-arrastre:hover { transform: translateY(-1px); border-color: #949fac; }.dimension-arrastre.activo { border-color: #384a5d; background: #e4e8ec; color: #253342; }.dimension-arrastre.arrastrando { opacity: .45; }.constructor-lienzo { display: flex; flex-direction: column; justify-content: center; min-height: 105px; padding: 15px; border: 1px dashed #8f9aa7; border-radius: 11px; background: rgba(255,255,255,.73); cursor: pointer; }.constructor-lienzo.sobre { border-color: #30445a; background: #e5e8ec; box-shadow: inset 0 0 0 2px rgba(48, 68, 90,.1); }.constructor-lienzo strong { margin: 5px 0 2px; color: #293645; font-size: 16px; letter-spacing: -.025em; }.constructor-lienzo > span:last-child { color: #74888e; font-size: 11px; }.constructor-metricas > div { display: flex; flex-wrap: wrap; gap: 6px; }.constructor-metricas span:not(.constructor-etiqueta) { padding: 6px 8px; border-radius: 7px; background: #153e59; color: #e8ecf0; font-size: 10px; font-weight: 700; }

/* ======================== 26. ESCUDOS: LISTA Y DETALLE ================== */
.tarjeta-escudos .tarjeta-cuerpo { padding-top: 12px; }.tabla-ayuda-scroll { display: flex; justify-content: flex-end; gap: 7px; margin: 0 0 6px; color: #6f767d; font-size: 11px; }.tabla-ayuda-scroll span { color: #31445a; font-size: 15px; line-height: .7; }.tabla-scroll-visible { border: 1px solid #dfe2e5; border-radius: 10px; scrollbar-color: #606f80 #eaebed; scrollbar-width: auto; }.tabla-scroll-visible::-webkit-scrollbar { height: 12px; }.tabla-scroll-visible::-webkit-scrollbar-track { background: #eaebed; border-radius: 99px; }.tabla-scroll-visible::-webkit-scrollbar-thumb { border: 3px solid #eaebed; border-radius: 99px; background: #606f80; }.tabla-escudos { min-width: 820px; }.tabla-escudos th:first-child, .tabla-escudos td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 8px 0 10px -11px rgba(31, 40, 51,.42); }.tabla-escudos th:first-child { background: #f4f7f4; z-index: 3; }.escudo-codigo { padding: 0; border: 0; background: none; color: #2f4054; font: 750 14px var(--fuente-mono); white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: #b3bbc5; text-underline-offset: 3px; }.escudo-codigo:hover { color: #28394c; text-decoration-color: currentColor; }
.modal-escudo { width: min(790px, calc(100% - 28px)); max-height: min(84vh, 780px); padding: 0; overflow: auto; border: 0; border-radius: 17px; color: #223e4d; box-shadow: 0 25px 75px rgba(3,26,40,.35); }.modal-escudo::backdrop { background: rgba(6,31,45,.58); backdrop-filter: blur(5px); }.modal-escudo-cabecera { display: flex; justify-content: space-between; gap: 14px; padding: 23px 24px 14px; background: linear-gradient(110deg, #123c58, #2a3a4c); color: #fff; }.modal-escudo-cabecera .sobrelinea { color: #becad8; }.modal-escudo-cabecera h2 { margin: 4px 0 0; color: #fff; font-family: var(--fuente-mono); font-size: 25px; }.modal-cerrar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 23px; line-height: 1; cursor: pointer; }.modal-escudo-estado { margin: 16px 24px 0; color: #283747; font-size: 13px; font-weight: 750; }.modal-escudo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 16px 24px; }.modal-escudo-grid > div { min-width: 0; padding: 10px; border: 1px solid #e3e4e6; border-radius: 9px; background: #f9f9fa; }.modal-escudo-grid span { display: block; margin-bottom: 3px; color: #71848a; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.modal-escudo-grid strong { display: block; overflow-wrap: anywhere; color: #36404c; font-size: 12px; line-height: 1.35; }.modal-escudo-notas { margin: 0 24px; padding: 14px; border-left: 3px solid #8694a3; background: #f1f3f5; }.modal-escudo-notas p { margin: 5px 0 0; color: #565d66; font-size: 13px; white-space: pre-line; }.modal-escudo > .acciones { justify-content: flex-end; padding: 16px 24px 22px; }

/* Paleta de comandos: tamaño de trabajo, no un tooltip. */
.paleta-comandos { padding-top: min(10vh, 86px); }.paleta-dialogo { width: min(100%, 780px); }.paleta-campo { padding: 20px 22px; }.paleta-campo input { font-size: 18px; }.paleta-contenido { min-height: 315px; padding: 19px 14px 14px; }.paleta-resultado { min-height: 57px; grid-template-columns: 37px 1fr auto; padding: 10px; font-size: 15px; }.paleta-icono { width: 35px; height: 35px; font-size: 15px; }.paleta-pie { padding: 13px 22px; font-size: 11px; }
@media (max-width: 900px) { .constructor-cuerpo { grid-template-columns: 1fr; }.constructor-cabecera { flex-direction: column; gap: 5px; }.constructor-cabecera p { max-width: none; }.modal-escudo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.tabla-escudos { min-width: 690px; } }
@media (max-width: 560px) { .constructor-reportes { padding: 15px; }.modal-escudo-cabecera { padding: 19px 17px 13px; }.modal-escudo-grid { grid-template-columns: 1fr; padding: 14px 17px; }.modal-escudo-estado, .modal-escudo-notas { margin-left: 17px; margin-right: 17px; }.modal-escudo > .acciones { padding: 14px 17px 18px; }.tabla-ayuda-scroll { justify-content: flex-start; }.paleta-comandos { padding-top: 45px; }.paleta-contenido { min-height: 260px; }.paleta-resultado { min-height: 52px; } }

/* ====================== 27. ESTUDIO PIVOTE DE REPORTES ================== */
.estudio-reportes { display: grid; grid-template-columns: 275px minmax(0, 1fr); overflow: hidden; margin: 0 0 21px; border: 1px solid #dce5e2; border-radius: 17px; background: #fff; box-shadow: 0 15px 34px rgba(31, 39, 49, .07); }
.estudio-lateral { min-width: 0; padding: 16px; border-right: 1px solid #e3ebe8; background: linear-gradient(180deg, #f5f7f2, #fff 31%); }
.estudio-fuente { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border: 2px solid #d59b39; border-radius: 13px; background: #fff; color: #8c6428; box-shadow: 0 6px 16px rgba(131, 94, 31, .08); font-size: 16px; }.estudio-fuente span { color: #d89327; font-size: 21px; }.estudio-fuente strong { letter-spacing: -.025em; }
.estudio-cambiar { width: 100%; margin: 9px 0 13px; padding: 0 6px; border: 0; background: transparent; color: #596674; font: 800 11px var(--fuente); letter-spacing: .06em; text-align: left; text-transform: uppercase; cursor: pointer; }.estudio-cambiar span { display: inline-block; margin-right: 5px; font-size: 16px; transform: translateY(1px); }
.estudio-buscador { display: flex; align-items: center; gap: 8px; min-height: 43px; margin-bottom: 16px; padding: 0 11px; border: 1px solid #d8dfdc; border-radius: 10px; background: #fff; color: #63727c; }.estudio-buscador span { font-size: 21px; }.estudio-buscador input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #343c45; font: 13px var(--fuente); }.estudio-buscador input::placeholder { color: #89969c; }
.estudio-grupo { padding: 0 5px 16px; border-bottom: 1px dashed #d8d7ca; }.estudio-grupo + .estudio-grupo { padding-top: 15px; border-bottom: 0; }.estudio-grupo h3 { margin: 0 0 10px; color: #5b6071; font-size: 11px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }.estudio-grupo h3 span { margin-right: 5px; color: #687084; font-size: 15px; }
.estudio-campos { display: flex; flex-wrap: wrap; gap: 7px; }.campo-pivote { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 31px; padding: 5px 9px; border: 2px solid #35354c; border-radius: 999px; background: #faf8ef; color: #34354a; font: 700 11.5px var(--fuente); line-height: 1.1; cursor: grab; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }.campo-pivote > span { color: #596078; }.campo-pivote:hover, .campo-pivote:focus-visible { outline: 0; transform: translateY(-1px); background: #fff; box-shadow: 0 5px 11px rgba(25, 39, 54, .1); }.campo-pivote.activo { background: #eceef1; border-color: #344557; color: #2d3d50; }.medida-pivote { border-color: #cf902e; background: #fff8e9; color: #936523; }.medida-pivote.activo { background: #fff0d2; }.campo-pivote.arrastrando { opacity: .42; }
.estudio-lienzo { min-width: 0; padding: 20px; background-color: #fcfdfb; background-image: radial-gradient(#dce6e1 1px, transparent 1px); background-size: 16px 16px; }.estudio-encabezado { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 2px 15px; }.estudio-encabezado h2 { margin: 3px 0 0; color: #292a40; font-size: 21px; }.estudio-encabezado p { max-width: 360px; margin: 0; color: #7e818b; font-size: 12px; line-height: 1.45; text-align: right; }
.plantillas-reportes { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 2px 13px; }.plantillas-reportes > span { margin-right: 3px; color: #686b79; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.plantillas-reportes button { min-height: 29px; padding: 5px 9px; border: 1px solid #dbd8ca; border-radius: 999px; background: rgba(255,255,255,.85); color: #6d613f; font: 700 10.5px var(--fuente); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.plantillas-reportes button:hover { transform: translateY(-1px); border-color: #c99a4c; background: #fff8e9; color: #805716; }
.zonas-pivote { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 10px; }.zona-pivote { min-height: 115px; padding: 14px; border: 2px dashed #ddd9cd; border-radius: 14px; background: rgba(255,255,255,.92); cursor: pointer; transition: border-color .17s ease, background .17s ease, box-shadow .17s ease; }.zona-pivote:hover, .zona-pivote:focus-visible, .zona-pivote.sobre { outline: 0; border-color: #828c98; background: #f4f5f7; box-shadow: 0 6px 13px rgba(60, 72, 86,.08); }.zona-pivote strong { display: block; color: #5a5b71; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }.zona-pivote strong span { margin-right: 5px; font-size: 16px; }.zona-contenido { display: flex; flex-wrap: wrap; gap: 5px; min-height: 25px; margin: 12px 0 3px; }.zona-pivote em { color: #aaa9a3; font-size: 11px; }.chip-pivote { display: inline-flex; align-items: center; padding: 5px 7px; border-radius: 6px; font-size: 10.5px; font-style: normal; font-weight: 750; line-height: 1; }.chip-dimension { background: #e9ebee; color: #2a3847; }.chip-medida { background: #fff0d3; color: #8d621f; }.zona-valores { border-color: #e5c180; }
.visor-pivote { min-height: 264px; margin-top: 16px; overflow: hidden; border: 1px solid #dedfd9; border-radius: 14px; background: #fff; }.visor-pivote-barra { display: flex; align-items: center; gap: 7px; min-height: 61px; padding: 10px 13px; border-bottom: 1px solid #e2e4de; }.vista-pivote, .visor-filtros { display: inline-flex; align-items: center; gap: 6px; min-height: 33px; padding: 6px 11px; border: 1px solid #ddd9ce; border-radius: 999px; background: #fff; color: #636477; font: 750 12px var(--fuente); cursor: pointer; }.vista-pivote.activa { border-color: #292941; background: #292941; color: #fff; }.visor-filtros { margin-left: auto; color: #5f666d; }.visor-filtros:hover { border-color: #9aa3ad; background: #f3f4f6; }.visor-pivote-contenido { display: grid; min-height: 201px; place-items: center; padding: 24px; }.vista-lista { max-width: 550px; color: #6e7380; text-align: center; }.vista-lista > span { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 10px; background: #fff4df; color: #bb7e25; font-size: 20px; }.vista-lista h3 { margin: 0 0 8px; color: #292a40; font-size: 19px; letter-spacing: -.035em; }.vista-lista p { margin: 0 auto 13px; font-size: 14px; line-height: 1.5; }.vista-lista button, .vista-lista a { padding: 0; border: 0; background: none; color: #98702e; font: 800 13px var(--fuente); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Filtros secundarios fuera del flujo: la pantalla conserva la lectura principal. */
.modal-filtros { width: min(1040px, calc(100% - 28px)); max-height: min(86vh, 820px); overflow: auto; padding: 0; border: 0; border-radius: 17px; background: #fff; color: #263d4b; box-shadow: 0 25px 75px rgba(3,26,40,.35); }.modal-filtros::backdrop { background: rgba(8, 31, 45, .58); backdrop-filter: blur(5px); }.modal-filtros-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 21px 24px 17px; background: linear-gradient(110deg, #163c5c, #344558); color: #fff; }.modal-filtros-cabecera .sobrelinea { color: #c6d1dd; }.modal-filtros-cabecera h2 { margin: 4px 0 0; color: #fff; }.modal-filtros .filtros { display: grid; margin: 0; border: 0; border-radius: 0; box-shadow: none; }.modal-filtros .filtros::before { display: none; }

@media (max-width: 1100px) { .zonas-pivote { grid-template-columns: repeat(2, minmax(0, 1fr)); }.estudio-reportes { grid-template-columns: 245px minmax(0, 1fr); } }
@media (max-width: 760px) { .estudio-reportes { grid-template-columns: 1fr; }.estudio-lateral { border-right: 0; border-bottom: 1px solid #e3ebe8; }.estudio-lienzo { padding: 15px; }.estudio-encabezado { align-items: flex-start; flex-direction: column; gap: 5px; }.estudio-encabezado p { text-align: left; }.plantillas-reportes { align-items: flex-start; flex-direction: column; }.visor-pivote-barra { flex-wrap: wrap; }.visor-filtros { margin-left: 0; }.modal-filtros-cabecera { padding: 18px 17px 14px; }.modal-filtros .filtros { padding: 17px; } }
@media (max-width: 480px) { .zonas-pivote { grid-template-columns: 1fr; }.vista-pivote, .visor-filtros { font-size: 11px; }.estudio-lateral { padding: 13px; }.visor-pivote-contenido { min-height: 180px; } }

.zona-contenido button.chip-pivote { border: 0; font-family: var(--fuente); cursor: pointer; }.zona-contenido button.chip-pivote span { margin-left: 5px; font-size: 14px; line-height: 8px; opacity: .65; }.zona-contenido button.chip-pivote:hover span { opacity: 1; }

/* ================== 28. DIRECCIÓN VIOLETA · PORTAL DE SERVICIO ========= */
:root { --violeta-ui: #6a88aa; --violeta-profundo: #4b5e74; --lavanda-ui: #f4f6f9; --lavanda-suave: #fafbfc; --coral-ui: #f05a75; --ambar-ui: #ffb64d; --tinta-ui: #2d3136; }
body { background: #f2f4f6; color: #494d51; }
.sidebar { width: 112px; background: linear-gradient(180deg, #6685a7, #556c85 74%, #48596d); box-shadow: 9px 0 27px rgba(59, 71, 85, .14); }.sidebar::after { display: none; }.sidebar-marca { display: grid; place-items: center; min-height: 100px; padding: 17px 8px; border-bottom-color: rgba(255,255,255,.28); }.sidebar-marca-icono { width: 38px; height: 38px; padding: 8px; border-color: rgba(255,255,255,.7); }.sidebar-marca-icono i { background: #fff; }.sidebar-marca-texto { display: none; }.sidebar-nav { padding: 17px 10px; gap: 7px; }.sidebar-nav a { display: grid; place-items: center; gap: 3px; min-height: 63px; padding: 8px 4px; border-radius: 12px; color: rgba(255,255,255,.8); text-align: center; font-size: 9px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }.sidebar-nav a .icono { color: #fff; font-size: 25px; line-height: 1; }.sidebar-nav a.activo { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); color: #fff; }.sidebar-nav a:hover { background: rgba(255,255,255,.1); }.menu-busqueda { display: none; }.sidebar-pie { display: grid; place-items: center; padding: 15px 6px; border-top-color: rgba(255,255,255,.24); }.sidebar-usuario, .sidebar-salir { display: none; }.sidebar-version { color: rgba(255,255,255,.65); font-size: 8px; }
.sidebar-nav a .icono { display: grid; place-items: center; width: 27px; height: 27px; }.sidebar-nav a .icono img { display: block; width: 25px; height: 25px; object-fit: contain; }
.barra-superior { min-height: 78px; margin-left: 112px; padding: 12px 31px; border: 0; background: rgba(250, 251, 252,.9); box-shadow: 0 1px 0 rgba(95, 108, 122,.08); }.barra-superior-titulo { color: var(--tinta-ui); font-size: 18px; font-weight: 760; }.barra-superior-titulo small { color: var(--violeta-ui); }.barra-superior-usuario { gap: 11px; }.abrir-comandos { border-color: #e3e7eb; background: #fff; color: #656b71; }.abrir-comandos > span:first-child { color: var(--violeta-ui); }.btn { border-radius: 11px; font-weight: 720; }.btn-primario { background: var(--violeta-ui); box-shadow: 0 8px 17px rgba(106, 136, 170,.2); }.btn-primario:hover { background: #5b738d; }.btn-secundario { border-color: #e3e6ea; background: #fff; color: #5d646b; }.contenido { margin-left: 112px; max-width: none; padding: 27px 32px 32px; }.pie { margin-left: 112px; padding: 14px 32px 26px; }
.encabezado-pagina { border-bottom-color: #e1e4e7; }.encabezado-pagina::before { width: 52px; background: var(--violeta-ui); }.encabezado-pagina h1, .seccion-cabecera h2 { color: var(--tinta-ui); }.sobrelinea { color: var(--violeta-ui); }.tarjeta, .seccion, .filtros, .grafico-caja { border: 0; border-radius: 16px; box-shadow: 0 10px 24px rgba(74, 85, 98,.075); }.tarjeta > .tarjeta-titulo { background: #fff; color: #4f5761; }.tarjeta > .tarjeta-titulo::before { background: var(--violeta-ui); box-shadow: 0 0 0 4px #f1f4f8; }.tabla th { background: #f7f8fa; color: #767b81; }.tabla tbody tr:hover { background: #f5f7f9; }.control { border-color: #dfe3e7; background: #fff; }.control:focus { border-color: var(--violeta-ui); box-shadow: 0 0 0 3px rgba(106, 136, 170,.13); }
.bienvenida { min-height: 226px; align-items: center; padding: 28px 31px; background-image: linear-gradient(90deg, rgba(92, 116, 143,.98) 0%, rgba(102, 132, 165,.9) 49%, rgba(106, 136, 170,.12) 100%), url('../img/admin-violet-service-hero.png'); background-position: center, right center; background-size: cover, auto 135%; background-repeat: no-repeat; background-color: #6a88aa; border-radius: 20px; box-shadow: 0 18px 34px rgba(83, 103, 127,.2); }.bienvenida::before, .bienvenida::after { display: none; }.bienvenida-trama { background: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 13px 13px; width: 31%; }.bienvenida .sobrelinea { color: #e8edf3; }.bienvenida h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }.bienvenida p { max-width: 500px; }.bienvenida .btn-primario { background: #fff; color: #617d9d; }.bienvenida .btn-secundario { border-color: rgba(255,255,255,.45); }.dashboard-hero { min-height: 230px; border-radius: 20px; background-image: linear-gradient(90deg, rgba(92, 116, 143,.98) 0%, rgba(102, 132, 165,.86) 49%, rgba(106, 136, 170,.08) 100%), url('../img/admin-violet-service-hero.png'); background-position: center, right center; background-size: cover, auto 135%; background-repeat: no-repeat; background-color: #6a88aa; }.dashboard-hero .sobrelinea { color: #ebeff4; }
.kpi { border-radius: 16px; background: #fff; box-shadow: 0 10px 22px rgba(74, 85, 98,.07); }.kpi::after { border-color: #f1f4f8; }.kpi-prioridad { background: linear-gradient(150deg, #f9fafc, #fff 70%); }.kpi-prioridad::before { background: var(--violeta-ui); }.kpi-valor { color: #485360; }.kpi-etiqueta { color: #74787d; }.acceso { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 9px 20px rgba(74, 85, 98,.06); }.acceso strong { color: #516274; }.acceso::after { color: var(--violeta-ui); }.acceso:hover { border: 0; box-shadow: 0 16px 27px rgba(79, 96, 114,.15); }
@media (max-width: 760px) { .sidebar { width: 100%; height: auto; bottom: 0; top: auto; z-index: 30; display: flex; overflow-x: auto; }.sidebar-marca, .sidebar-pie { display: none; }.sidebar-nav { display: flex; width: 100%; padding: 5px; gap: 2px; }.sidebar-nav a { min-width: 72px; min-height: 56px; }.barra-superior, .contenido, .pie { margin-left: 0; }.barra-superior { padding: 10px 15px; }.contenido { padding: 20px 15px 83px; }.pie { padding-bottom: 84px; }.barra-superior-nombre { display: none; }.bienvenida { min-height: 205px; background-position: center, right center; background-size: cover, auto 110%; }.dashboard-hero { background-position: center, right center; background-size: cover, auto 110%; }.bienvenida p { max-width: 60%; } }

/* ================= 29. DIRECCIÓN CYAN · OPERACIÓN CLARA ================ */
:root { --cyan-500: #344a63; --cyan-600: #2d4157; --azul-cyan: #2f6fb2; --fondo-cyan: #f3f4f6; --tinta-cyan: #334554; --muted-cyan: #7d8d94; }
body { background: var(--fondo-cyan); color: #5a5e63; }.sidebar { width: 94px; background: #fff; box-shadow: 1px 0 0 #e3e5e7; }.sidebar-marca { min-height: 82px; border-bottom-color: #eeeff1; }.sidebar-marca-icono { border-color: #b9c7c8; }.sidebar-marca-icono i { background: var(--cyan-500); }.sidebar-nav { padding: 15px 9px; gap: 9px; }.sidebar-nav a { position: relative; min-height: 57px; border-radius: 10px; color: #839094; font-size: 8px; font-weight: 780; }.sidebar-nav a .icono { color: #859398; }.sidebar-nav a .icono img { opacity: .8; filter: brightness(.72); }.sidebar-nav a.activo { color: var(--cyan-600); background: #f4f6f8; box-shadow: none; }.sidebar-nav a.activo::before { content: ''; position: absolute; left: -9px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 4px 4px 0; background: var(--cyan-500); }.sidebar-nav a.activo .icono img { opacity: 1; filter: invert(59%) sepia(83%) saturate(570%) hue-rotate(126deg) brightness(88%) contrast(91%); }.sidebar-nav a:hover { background: #f6f7f8; }.sidebar-pie { border-top-color: #e9eaec; }.sidebar-version { color: #9ba8ac; }
.barra-superior { min-height: 72px; margin-left: 94px; background: #fff; box-shadow: 0 1px 0 #e7e8ea; }.barra-superior-titulo { color: var(--tinta-cyan); }.barra-superior-titulo small, .sobrelinea { color: var(--cyan-600); }.contenido, .pie { margin-left: 94px; }.abrir-comandos { border-color: #e2e4e7; border-radius: 999px; box-shadow: none; }.abrir-comandos > span:first-child { color: var(--cyan-600); }.btn { border-radius: 999px; }.btn-primario { background: var(--cyan-500); box-shadow: 0 7px 15px rgba(55, 84, 117,.18); }.btn-primario:hover { background: var(--cyan-600); }.btn-secundario { border-color: #dfe2e5; color: #64696f; }
.encabezado-pagina { border-bottom-color: #e2e4e7; }.encabezado-pagina::before { background: var(--cyan-500); }.encabezado-pagina h1, .seccion-cabecera h2 { color: var(--tinta-cyan); }.tarjeta, .seccion, .filtros, .grafico-caja { border: 1px solid #eeeff1; border-radius: 12px; box-shadow: 0 7px 18px rgba(66, 72, 79,.055); }.tarjeta > .tarjeta-titulo { color: #474d54; }.tarjeta > .tarjeta-titulo::before { background: var(--cyan-500); box-shadow: 0 0 0 4px #ebeff3; }.tabla th { background: #f6f7f8; color: #78888e; }.tabla tbody tr:hover { background: #f4f6f8; }.control { border-color: #dfe2e5; }.control:focus { border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(52, 74, 99,.14); }
.bienvenida { min-height: 228px; color: var(--tinta-cyan); background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 49%, rgba(255,255,255,.12) 76%), url('../img/admin-teal-service-hero.png'); background-position: center, right center; background-size: cover, auto 129%; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 10px 25px rgba(68, 75, 84,.08); }.bienvenida .sobrelinea { color: var(--cyan-600); }.bienvenida h1 { color: var(--tinta-cyan); }.bienvenida p { color: #65777c; }.bienvenida .btn-primario { background: var(--cyan-500); color: #fff; }.bienvenida .btn-secundario { border-color: #dde0e4; color: #595f66; background: #fff; }.bienvenida-trama { background: radial-gradient(rgba(52, 74, 99,.13) 1px, transparent 1px); }
.dashboard-hero { color: var(--tinta-cyan); background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 49%, rgba(255,255,255,.12) 76%), url('../img/admin-teal-service-hero.png'); background-position: center, right center; background-size: cover, auto 129%; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 10px 25px rgba(68, 75, 84,.08); }.dashboard-hero .sobrelinea { color: var(--cyan-600); }.dashboard-hero h2 { color: var(--tinta-cyan); }.dashboard-hero p { color: #65777c; }.dashboard-hero-pistas span { border-color: #d4dae1; background: #f5f6f8; color: #4c5967; }
.kpi { border: 1px solid #eeeff1; border-radius: 12px; box-shadow: 0 7px 17px rgba(66, 72, 79,.045); }.kpi::after { border-color: #ebeef1; }.kpi-prioridad { background: #fff; }.kpi-prioridad::before { background: var(--cyan-500); }.kpi-valor { color: #3e454e; }.kpi-etiqueta { color: #718188; }.acceso { border: 1px solid #eeeff1; border-radius: 12px; box-shadow: 0 7px 17px rgba(66, 72, 79,.045); }.acceso strong { color: #414952; }.acceso::after { color: var(--cyan-500); }.acceso:hover { box-shadow: 0 13px 22px rgba(66, 72, 79,.1); border-color: #dce0e5; }
@media (max-width: 760px) { .sidebar { background: #fff; }.sidebar-nav a { color: #7f8f95; }.sidebar-nav a.activo::before { display: none; }.barra-superior, .contenido, .pie { margin-left: 0; }.bienvenida, .dashboard-hero { background-position: center, right center; background-size: cover, auto 108%; }.bienvenida p { max-width: 58%; } }

/* Contraste y lectura de datos. Los estados del menú no dependen del color heredado. */
:root { --grafico-1: #344a63; --grafico-2: #2f6fb2; --grafico-3: #4c6074; --grafico-4: #f06b7b; --grafico-5: #27394e; --grafico-6: #9fadbe; --grafico-7: #e4a23d; --grafico-8: #8a989e; }
.sidebar-marca-icono { display: grid; place-items: center; padding: 5px; }.sidebar-marca-icono img { display: block; width: 31px; height: 31px; }.sidebar-nav a, .sidebar-nav a:visited, .sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: #60656b !important; text-decoration: none; }.sidebar-nav a:hover, .sidebar-nav a:focus-visible { background: #eceff3; color: #2f3b49 !important; outline: 0; }.sidebar-nav a:hover .icono img, .sidebar-nav a:focus-visible .icono img { opacity: 1; filter: invert(46%) sepia(88%) saturate(504%) hue-rotate(126deg) brightness(89%) contrast(91%); }.sidebar-nav a.activo, .sidebar-nav a.activo:hover, .sidebar-nav a.activo:focus-visible { color: #293b4f !important; background: #e6ebf0; font-weight: 800; }
.login-marca-icono { display: grid; place-items: center; border: 0; background: transparent; }.login-marca-icono img { display: block; width: 36px; height: 36px; }

/* Dos caminos, explicados sin ambigüedad en el acceso. */
.login-consulta { display: flex; gap: 12px; align-items: flex-start; margin-top: 19px; padding: 15px; border: 1px solid #d5dbe2; border-radius: 12px; background: #f5f7f9; color: #50575f; }.login-consulta-icono { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #e1e7ed; color: #263a51; font-size: 22px; font-weight: 700; line-height: 1; }.login-consulta strong { display: block; color: #3c444e; font-size: 13px; }.login-consulta p { margin: 4px 0 8px; color: #6b7178; font-size: 11.5px; line-height: 1.45; }.login-consulta a { color: #293b4f; font-size: 12px; font-weight: 800; text-decoration: none; }.login-consulta a:hover { color: #24374c; text-decoration: underline; }.login-pie { margin-top: 14px; color: #7b8e93; }

/* Modelo: búsqueda asistida, sin bloquear los modelos nuevos. */
.modelo-autocompletar-contenedor { position: relative; }.modelo-sugerencias { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; left: 0; overflow: auto; max-height: 272px; padding: 5px; border: 1px solid #d6dadf; border-radius: 10px; background: #fff; box-shadow: 0 15px 30px rgba(51, 58, 67,.16); }.modelo-sugerencia { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #424951; font: inherit; text-align: left; cursor: pointer; }.modelo-sugerencia strong { font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .01em; }.modelo-sugerencia span { margin-top: 2px; color: #7c8e93; font-size: 10.5px; }.modelo-sugerencia:hover, .modelo-sugerencia.activo { background: #eef1f5; color: #243242; }.modelo-sugerencia.activo span { color: #4d5a69; }

/* Cierre de accesibilidad táctil, foco y capas superpuestas. */
button, a, input, select, textarea { touch-action: manipulation; }.control:focus-visible, .publico-control:focus-visible { outline: 2px solid transparent; border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(52, 74, 99,.18); }.modelo-sugerencia:focus-visible, .btn:focus-visible, .sidebar-nav a:focus-visible { outline: 3px solid rgba(52, 74, 99,.34); outline-offset: 2px; }.modal-escudo, .modal-filtros, .paleta-dialogo { overscroll-behavior: contain; }.tabla td, .tabla th { font-variant-numeric: tabular-nums; }
.tarjeta-grafico { overflow: hidden; }.tarjeta-grafico .tarjeta-titulo { min-height: 57px; border-bottom: 1px solid #eff0f1; }.tarjeta-grafico .tarjeta-cuerpo { padding: 17px 19px 19px; }.tarjeta-grafico .grafico-caja { min-height: 280px; padding: 4px 0 0; background: linear-gradient(180deg, rgba(245, 246, 248,.58), #fff 50%); }.grafico-descargar { border-color: #dee1e5; border-radius: 999px; color: #293b4f; }.grafico-descargar:hover { border-color: #a5b3c4; background: #f0f3f6; }.panel-dashboard .kpi { border-top: 3px solid transparent; }.panel-dashboard .kpi:nth-child(3n+1) { border-top-color: var(--grafico-1); }.panel-dashboard .kpi:nth-child(3n+2) { border-top-color: var(--grafico-2); }.panel-dashboard .kpi:nth-child(3n) { border-top-color: var(--grafico-3); }
/* 30. MODALES INFORMATIVOS · CONTEXTO BAJO DEMANDA */
.modal-informacion {
    width: min(560px, calc(100vw - 28px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #222930;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(29, 38, 50, .25);
}
.modal-informacion::backdrop { background: rgba(22, 28, 35, .58); backdrop-filter: blur(3px); }
.modal-informacion-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 20px; color: #fff; background: linear-gradient(135deg, #385576, #2d4560); }
.modal-informacion-cabecera .sobrelinea { color: rgba(255,255,255,.74); }
.modal-informacion-cabecera h2 { margin: 5px 0 0; color: #fff; font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.15; }
.modal-informacion-cuerpo { padding: 26px; }
.modal-informacion-cuerpo p { max-width: 60ch; margin: 0; color: #565c62; font-size: 1rem; line-height: 1.65; }
.modal-informacion-pie { display: flex; justify-content: flex-end; padding: 0 26px 24px; }
.modal-cerrar, .boton-informacion { display: inline-grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; padding: 0; font-family: inherit; font-weight: 800; line-height: 1; cursor: pointer; border: 1px solid #c2cad3; border-radius: 999px; }
.modal-cerrar { color: #293b4f; background: #fff; font-size: 1.35rem; border-color: rgba(255,255,255,.7); }
.boton-informacion { color: #293b4f; background: #f2f5f8; font-size: .88rem; }
.boton-informacion:hover, .boton-informacion:focus-visible { color: #fff; background: #293b4f; border-color: #293b4f; outline: 3px solid rgba(41, 59, 79,.18); outline-offset: 2px; }
.kpi .boton-informacion { position: absolute; right: 14px; bottom: 14px; }
.tarjeta-titulo .boton-informacion { margin-left: auto; }
.tarjeta-titulo .boton-informacion + .grafico-descargar { margin-left: 8px; }
@media (max-width: 560px) {
    .modal-informacion-cabecera { padding: 21px 20px 17px; }
    .modal-informacion-cuerpo { padding: 22px 20px; }
    .modal-informacion-pie { padding: 0 20px 20px; }
}

/* Flechas de orden: el dato sigue legible y cada tabla recibe el mismo control. */
.tabla th { white-space: nowrap; }
.tabla-ordenar { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 5px; padding: 0; vertical-align: middle; color: #5a616a; background: #fff; border: 1px solid #d5dadf; border-radius: 999px; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.tabla-ordenar:hover, .tabla-ordenar:focus-visible { color: #fff; background: #293b4f; border-color: #293b4f; outline: 3px solid rgba(41, 59, 79,.18); outline-offset: 2px; transform: translateY(-1px); }
.tabla th[aria-sort="ascending"] .tabla-ordenar, .tabla th[aria-sort="descending"] .tabla-ordenar { color: #fff; background: #2d4157; border-color: #2d4157; }

/* El visor del constructor siempre reserva un área legible para gráficos y KPI. */
.visor-pivote-contenido canvas { width: min(100%, 760px) !important; height: 230px !important; }
.visor-kpi-valor { display: block; margin: 8px 0; color: #293b4f; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.05em; }
.visor-tabla-reporte { width: 100%; max-height: 335px; overflow: auto; border: 1px solid #e7e9ec; border-radius: 10px; background: #fff; }
.visor-tabla-reporte .tabla { min-width: 560px; margin: 0; }
.visor-tabla-reporte .tabla th { position: sticky; top: 0; z-index: 1; background: #f7f8f9; }

/* Detalle bajo demanda de una categoría elegida en un gráfico. */
.modal-detalle-resumen { width: min(920px, calc(100vw - 28px)); max-height: min(85vh, 780px); padding: 0; overflow: hidden auto; color: #222930; background: #fff; border: 0; border-radius: 18px; box-shadow: 0 24px 70px rgba(29, 38, 50,.25); }
.modal-detalle-resumen::backdrop { background: rgba(22, 28, 35,.58); backdrop-filter: blur(3px); }
.modal-detalle-resumen-cuerpo { padding: 24px 26px; }
.detalle-resumen-intro { margin: 0 0 17px; color: #63686e; line-height: 1.55; }
.detalle-resumen-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-bottom: 20px; }
.detalle-resumen-metrica { padding: 12px 14px; border: 1px solid #e1e4e7; border-radius: 10px; background: #f7f8fa; }
.detalle-resumen-metrica span { display: block; color: #71858a; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }.detalle-resumen-metrica strong { display: block; margin-top: 4px; color: #243343; font-size: 18px; }
.modal-detalle-resumen .tabla-scroll { max-height: 330px; border: 1px solid #e5e7e9; border-radius: 10px; }.modal-detalle-resumen .tabla { margin: 0; }.modal-detalle-resumen .tabla th { position: sticky; top: 0; z-index: 1; }
.visor-pivote-contenido canvas { cursor: pointer; }
.tarjeta-grafico canvas { cursor: pointer; }
@media (max-width: 560px) { .modal-detalle-resumen-cuerpo { padding: 20px; } }

/* Visor analítico: índice de categorías a la izquierda y lectura amplia a la derecha. */
.visor-grafico-layout { display: grid; grid-template-columns: minmax(225px, 290px) minmax(0, 1fr); width: 100%; min-height: 340px; overflow: hidden; border: 1px solid #e8eaec; border-radius: 12px; background: #fff; }
.visor-categorias { overflow: auto; max-height: 382px; padding: 15px 12px; border-right: 1px solid #e8eaec; background: linear-gradient(180deg, #f9f9fa, #fff); }
.visor-categorias-titulo { display: block; margin: 0 6px 9px; color: #708287; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visor-categoria { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 7px; border: 0; border-radius: 8px; color: #51585f; background: transparent; font: 650 11.5px var(--fuente); text-align: left; cursor: pointer; }
.visor-categoria:hover, .visor-categoria:focus-visible { color: #22303f; background: #eceef1; outline: 2px solid rgba(52, 74, 99,.22); outline-offset: 1px; }.visor-categoria-punto { width: 9px; height: 9px; border-radius: 999px; }.visor-categoria-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.visor-categoria strong { color: #293b4f; font-size: 11px; font-variant-numeric: tabular-nums; }
.visor-canvas { display: grid; min-width: 0; min-height: 340px; place-items: center; padding: 15px 18px; }.visor-canvas canvas { width: 100% !important; max-width: none !important; height: 325px !important; }
@media (max-width: 760px) { .visor-grafico-layout { grid-template-columns: 1fr; }.visor-categorias { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 180px; border-right: 0; border-bottom: 1px solid #e8eaec; }.visor-categorias-titulo { grid-column: 1 / -1; }.visor-canvas { min-height: 295px; }.visor-canvas canvas { height: 280px !important; } }

/* 31. SHELL ADMINISTRATIVO · NAVEGACIÓN TRANQUILA Y DATOS AL FRENTE */
:root {
    --shell-linea: #e3e5e8;
    --shell-panel: #ffffff;
    --shell-suave: #f8f9fa;
    --shell-tinta: #333a43;
    --shell-muteda: #71858a;
    --shell-acento: #27394e;
    --shell-acento-profundo: #293b4f;
}
body { background: linear-gradient(135deg, #f6f7f9 0%, #f9f9fa 48%, #f4f5f6 100%); }
.sidebar {
    width: 104px;
    border-right: 1px solid var(--shell-linea);
    background: rgba(255, 255, 255, .97);
    box-shadow: 8px 0 28px rgba(46, 54, 64, .035);
}
.sidebar-marca { min-height: 92px; border-bottom: 1px solid #eff0f1; }
.sidebar-marca-icono { width: 42px; height: 42px; padding: 6px; border-color: #d1d7dd; background: #f4f6f8; box-shadow: 0 6px 16px rgba(39, 57, 78, .1); }
.sidebar-marca-icono img { width: 33px; height: 33px; }
.sidebar-nav { gap: 6px; padding: 16px 10px; }
.sidebar-nav a {
    min-height: 66px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #64777d !important;
    letter-spacing: .02em;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.sidebar-nav a .icono { width: 29px; height: 29px; }
.sidebar-nav a .icono img { width: 26px; height: 26px; opacity: .82; }
.sidebar-nav a:hover, .sidebar-nav a:focus-visible {
    color: #22303f !important;
    border-color: #dbe0e6;
    background: #f1f2f4;
    transform: translateY(-1px);
}
.sidebar-nav a.activo, .sidebar-nav a.activo:hover, .sidebar-nav a.activo:focus-visible {
    color: #293b4f !important;
    border-color: #cfd6df;
    background: linear-gradient(145deg, #e8ebef, #f7f8fa);
    box-shadow: 0 8px 16px rgba(39, 57, 78, .11);
}
.sidebar-nav a.activo::before { left: -11px; top: 14px; bottom: 14px; width: 4px; background: var(--shell-acento); box-shadow: 0 0 0 3px rgba(39, 57, 78,.11); }
.sidebar-pie { padding: 14px 7px 16px; border-top-color: #eff0f1; }
.sidebar-version { color: #9aabad; font-size: 8px; letter-spacing: .03em; }
.barra-superior, .contenido, .pie { margin-left: 104px; }
.barra-superior {
    min-height: 76px;
    padding: 12px 32px;
    border-bottom: 1px solid rgba(223, 226, 229, .86);
    background: rgba(255, 255, 255, .88);
    box-shadow: none;
    backdrop-filter: blur(16px);
}
.barra-superior-titulo { font-size: 18px; letter-spacing: -.025em; }
.barra-superior-titulo small { color: #81878e; font-size: 9px; letter-spacing: .11em; }
.barra-superior-usuario { gap: 10px; }
.barra-busqueda-menu {
    display: flex;
    align-items: center;
    width: clamp(170px, 18vw, 245px);
    height: 38px;
    gap: 7px;
    padding: 0 7px 0 12px;
    border: 1px solid #dde0e4;
    border-radius: 999px;
    background: #fafafb;
    color: #556577;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.barra-busqueda-menu:focus-within { border-color: #9fadbe; background: #fff; box-shadow: 0 0 0 4px rgba(52, 74, 99,.11); }
.barra-busqueda-menu > span { font-size: 18px; line-height: 1; }
.barra-busqueda-menu input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; color: var(--shell-tinta); background: transparent; font: 650 12px var(--fuente); }
.barra-busqueda-menu input::placeholder { color: #8da0a3; }
.limpiar-busqueda-menu { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; color: #5d646d; background: #e6e9ed; font: 700 16px/1 var(--fuente); cursor: pointer; }
.limpiar-busqueda-menu:hover, .limpiar-busqueda-menu:focus-visible { color: #fff; background: var(--shell-acento-profundo); outline: 3px solid rgba(41, 59, 79,.15); outline-offset: 1px; }
.abrir-comandos { min-height: 38px; padding: 0 12px; border-color: #d3d9e0; background: #fff; color: #4e565f; box-shadow: 0 2px 7px rgba(46, 54, 64,.04); }
.abrir-comandos:hover, .abrir-comandos:focus-visible { border-color: #9aabbe; color: #293b4f; background: #f4f6f8; outline: 3px solid rgba(52, 74, 99,.13); outline-offset: 2px; }
.abrir-comandos kbd { color: #70777f; background: #f2f3f4; border-color: #dce0e4; }
.contenido { padding-top: 30px; }
.pie { color: #829498; border-top: 1px solid #e8e9eb; }

/* La búsqueda rápida funciona como un centro de control, no como un listado plano. */
.paleta-comandos { z-index: 180; padding-top: min(12vh, 108px); }
.paleta-fondo { background: rgba(26, 33, 41, .52); backdrop-filter: blur(10px) saturate(.86); }
.paleta-dialogo { width: min(100%, 820px); border-color: rgba(214, 219, 224,.95); border-radius: 20px; box-shadow: 0 30px 90px rgba(26, 33, 42,.3); }
.paleta-campo { gap: 14px; padding: 20px 22px; background: linear-gradient(90deg, #fff, #f7f8f9); }
.paleta-campo > span { color: var(--shell-acento-profundo); font-size: 26px; }
.paleta-campo input { color: var(--shell-tinta); font-size: 18px; font-weight: 650; }
.paleta-campo kbd { color: #636970; border-color: #dbdfe3; background: #fff; }
.paleta-contenido { min-height: 302px; padding: 19px 14px 14px; }
.paleta-contenido .sobrelinea { color: #757b82; }
.paleta-resultados { gap: 4px; }
.paleta-resultado { min-height: 58px; padding: 10px 12px; border: 1px solid transparent; border-radius: 11px; color: #434a52; font-size: 15px; font-weight: 680; }
.paleta-resultado:hover, .paleta-resultado.activo { border-color: #d2d9e1; background: #f1f2f4; color: #27394e; }
.paleta-icono { width: 36px; height: 36px; border: 1px solid #d5dbe1; border-radius: 10px; background: #eaeef2; color: #293b4f; }
.paleta-atajo { color: #80878e; font-size: 11px; }
.paleta-pie { padding: 13px 22px; background: #f9f9fa; color: #758d91; }

/* Tablas: jerarquía de lectura, estados de orden visibles y filas cómodas. */
.tabla { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #e4e6e9; border-radius: 12px; background: #fff; }
.tabla th { position: sticky; top: 0; z-index: 1; padding-top: 12px; padding-bottom: 12px; color: #656b71; background: #f5f6f8; font-size: 10.5px; letter-spacing: .055em; }
.tabla td { border-bottom-color: #eff0f1; color: #4d5359; }
.tabla tbody tr:nth-child(even) { background: #fcfcfc; }
.tabla tbody tr:hover { background: #f1f2f4; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla-ordenar { width: 25px; height: 25px; color: #636a73; background: #fff; border-color: #d6dbe0; }
.tabla th[aria-sort="ascending"], .tabla th[aria-sort="descending"] { color: #293b4f; background: #eceef1; }
.tabla th[aria-sort="ascending"] .tabla-ordenar, .tabla th[aria-sort="descending"] .tabla-ordenar { background: #27394e; border-color: #27394e; }

/* Modales ligeros, con encabezado reconocible y contenido fácil de explorar. */
.modal-informacion, .modal-detalle-resumen { border: 1px solid rgba(224, 227, 231,.95); border-radius: 20px; box-shadow: 0 28px 82px rgba(29, 38, 50,.27); }
.modal-informacion-cabecera { padding: 25px 28px 22px; background: linear-gradient(120deg, #283d55, #3b597b); }
.modal-informacion-cuerpo, .modal-detalle-resumen-cuerpo { padding: 27px 28px; }
.modal-informacion-pie { padding: 0 28px 26px; border-top: 1px solid #f0f1f2; padding-top: 16px; }
.modal-cerrar { width: 33px; height: 33px; transition: transform .16s ease, background .16s ease; }
.modal-cerrar:hover, .modal-cerrar:focus-visible { color: #293b4f; background: #edf0f4; transform: rotate(90deg); outline: 3px solid rgba(255,255,255,.26); outline-offset: 2px; }
.modal-detalle-resumen-cuerpo { background: linear-gradient(180deg, #fff, #fcfcfc); }
@media (max-width: 860px) { .barra-busqueda-menu { display: none; }.barra-superior, .contenido, .pie { margin-left: 94px; }.sidebar { width: 94px; } }
@media (max-width: 760px) {
    .sidebar { width: 100%; }.barra-superior, .contenido, .pie { margin-left: 0; }
    .sidebar-nav a { min-height: 56px; border-radius: 10px; }.sidebar-nav a:hover { transform: none; }
    .paleta-comandos { padding: 48px 12px 12px; }.paleta-dialogo { border-radius: 16px; }.paleta-campo { padding: 17px; }.paleta-contenido { min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-nav a, .modal-cerrar, .abrir-comandos { transition: none; } }

/* ============== 32. VERSIÓN 5 · SISTEMA DE DISEÑO PROFESIONAL ============== */
/* Paleta sobria (azul pizarra desde la 5.2), una sola escala de neutros y los
   componentes del flujo cliente → ticket. Esta capa va al final a propósito:
   redefine las variables de las capas anteriores y tiene la última palabra. */
:root {
    /* Paleta 5.2: azul pizarra con neutros fríos; colores de estado atenuados. */
    --pv-marca-900: #0f1f2e;
    --pv-marca-800: #172c40;
    --pv-marca-700: #1f3a53;
    --pv-marca-600: #2a4a66;
    --pv-marca-500: #3f6283;
    --pv-marca-300: #a3b5c7;
    --pv-marca-200: #cfd9e3;
    --pv-marca-100: #e6ebf1;
    --pv-marca-50:  #f3f5f8;

    --pv-tinta-900: #18222d;
    --pv-tinta-800: #243140;
    --pv-tinta-700: #384554;
    --pv-tinta-600: #525e6c;
    --pv-tinta-500: #69747f;
    --pv-tinta-400: #909aa5;
    --pv-tinta-300: #bfc6ce;
    --pv-linea: #dde2e8;
    --pv-linea-suave: #ebeef2;
    --pv-fondo: #f4f5f7;
    --pv-panel: #ffffff;
    --pv-panel-2: #f8f9fb;

    --pv-exito: #2e6b4f;  --pv-exito-fondo: #e9f1ec;  --pv-exito-borde: #c6dacd;
    --pv-aviso: #875a14;  --pv-aviso-fondo: #f7f0e3;  --pv-aviso-borde: #e5d2aa;
    --pv-error: #a13a31;  --pv-error-fondo: #f7ebea;  --pv-error-borde: #e8c7c3;
    --pv-info:  #2e5985;  --pv-info-fondo:  #e9eff6;  --pv-info-borde:  #c7d6e6;
    --pv-indigo: #4a5089; --pv-indigo-fondo: #edeef5;
    --pv-violeta: #5e4d86; --pv-violeta-fondo: #f0edf5;

    --pv-radio-control: 8px;
    --pv-radio-tarjeta: 12px;
    --pv-sombra-1: 0 1px 2px rgba(24, 34, 45, .05);
    --pv-sombra-2: 0 1px 2px rgba(24, 34, 45, .04), 0 6px 18px rgba(24, 34, 45, .06);
    --pv-sombra-3: 0 18px 48px rgba(24, 34, 45, .18);
    --pv-foco: 0 0 0 3px rgba(63, 98, 131, .28);

    /* Remapeo de las variables de las capas 1–31 */
    --azul-900: #0f1f2e; --azul-800: #172c40; --azul-700: var(--pv-marca-800); --azul-600: var(--pv-marca-700);
    --azul-500: var(--pv-marca-700); --azul-300: var(--pv-marca-300); --azul-100: var(--pv-marca-100);
    --gris-900: var(--pv-tinta-900); --gris-700: var(--pv-tinta-700); --gris-600: var(--pv-tinta-500);
    --gris-400: var(--pv-tinta-400); --gris-300: var(--pv-linea); --gris-200: var(--pv-linea-suave); --gris-100: var(--pv-fondo);
    --verde: var(--pv-exito); --verde-claro: var(--pv-exito-fondo); --ambar: #c98a1b; --ambar-claro: var(--pv-aviso-fondo);
    --rojo: var(--pv-error); --rojo-claro: var(--pv-error-fondo); --violeta: var(--pv-violeta); --violeta-claro: var(--pv-violeta-fondo);
    --cyan-500: var(--pv-marca-500); --cyan-600: var(--pv-marca-700); --azul-cyan: #2f6fb2; --fondo-cyan: var(--pv-fondo);
    --tinta-cyan: var(--pv-tinta-900); --muted-cyan: var(--pv-tinta-500);
    --violeta-ui: var(--pv-marca-700); --violeta-profundo: var(--pv-marca-800); --lavanda-ui: var(--pv-marca-100);
    --lavanda-suave: var(--pv-marca-50); --tinta-ui: var(--pv-tinta-900); --coral-ui: #d4574e; --ambar-ui: #e3a33b;
    --shell-linea: var(--pv-linea); --shell-panel: #fff; --shell-suave: var(--pv-panel-2); --shell-tinta: var(--pv-tinta-800);
    --shell-muteda: var(--pv-tinta-500); --shell-acento: var(--pv-marca-600); --shell-acento-profundo: var(--pv-marca-700);
    --grafico-1: #1f3a53; --grafico-2: #5d7c9b; --grafico-3: #b3893d; --grafico-4: #a5544b;
    --grafico-5: #6c6a9a; --grafico-6: #4f8577; --grafico-7: #bf7a4c; --grafico-8: #8793a0;
    --radio: 12px;
    --radio-chico: 8px;
    --fuente: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
[hidden] { display: none !important; }
body { background: var(--pv-fondo); color: var(--pv-tinta-700); }
::selection { background: var(--pv-marca-200); color: var(--pv-tinta-900); }
h1, h2, h3 { color: var(--pv-tinta-900); }
a { color: var(--pv-marca-700); }
a:hover { color: var(--pv-marca-800); }
.sobrelinea { color: var(--pv-marca-700); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mono { font-family: var(--fuente-mono); font-size: .95em; letter-spacing: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.solo-lectores { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pendiente, .vacio-dato { color: var(--pv-tinta-400); font-weight: 500; }

/* ---------- Estructura ---------- */
.sidebar-nav a.activo, .sidebar-nav a.activo:hover, .sidebar-nav a.activo:focus-visible {
    color: var(--pv-marca-800) !important;
    border-color: var(--pv-marca-200);
    background: var(--pv-marca-50);
    box-shadow: none;
}
.sidebar-nav a.activo::before { background: var(--pv-marca-600); box-shadow: none; }
.sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: var(--pv-marca-800) !important; border-color: var(--pv-linea); background: var(--pv-panel-2); transform: none; }
.sidebar-usuario-empresa { display: block; margin-top: 2px; color: var(--pv-tinta-500); font-size: 9.5px; line-height: 1.25; overflow-wrap: anywhere; }
.sidebar-clave { display: block; margin-bottom: 6px; color: var(--pv-tinta-500); font-size: 10px; font-weight: 600; text-align: center; text-decoration: none; }
.sidebar-clave:hover { color: var(--pv-marca-700); text-decoration: underline; }
.barra-superior { border-bottom: 1px solid var(--pv-linea); box-shadow: none; }
.barra-superior-nombre { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.barra-superior-nombre small { color: var(--pv-tinta-500); font-size: 11px; font-weight: 500; }

/* ---------- Encabezados de página ---------- */
.encabezado-pagina { gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--pv-linea); }
.encabezado-pagina::before { display: none; }
.encabezado-pagina h1 { margin: 2px 0 4px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 750; letter-spacing: -.02em; color: var(--pv-tinta-900); }
.encabezado-pagina h1 .badge { vertical-align: middle; margin-left: 6px; font-size: 12px; }
.encabezado-pagina p { margin: 0; color: var(--pv-tinta-500); font-size: 14px; }
.encabezado-compacto { margin-bottom: 18px; }
.linea-sla { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; color: var(--pv-tinta-600) !important; font-size: 13px !important; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--pv-radio-control);
    font: 650 13.5px/1 var(--fuente); letter-spacing: 0; text-decoration: none; white-space: nowrap;
    background-image: none; box-shadow: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primario, .bienvenida .btn-primario { background: var(--pv-marca-700); border-color: var(--pv-marca-700); color: #fff; box-shadow: 0 1px 2px rgba(41, 59, 79, .24); }
.btn-primario:hover, .bienvenida .btn-primario:hover { background: var(--pv-marca-800); border-color: var(--pv-marca-800); color: #fff; }
.btn-secundario, .bienvenida .btn-secundario { background: #fff; border-color: var(--pv-linea); color: var(--pv-tinta-800); }
.btn-secundario:hover, .bienvenida .btn-secundario:hover { background: var(--pv-marca-50); border-color: var(--pv-marca-300); color: var(--pv-marca-800); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--pv-tinta-600); }
.btn-fantasma:hover { background: var(--pv-linea-suave); color: var(--pv-tinta-900); }
.btn-peligro { background: #fff; border-color: var(--pv-error-borde); color: var(--pv-error); }
.btn-peligro:hover { background: var(--pv-error-fondo); }
.btn-chico { min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; }
.btn-bloque { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: var(--pv-foco); }
.btn.ocupado, .btn[aria-disabled="true"] { opacity: .65; pointer-events: none; }

/* ---------- Tarjetas ---------- */
.tarjeta, .seccion, .filtros, .grafico-caja {
    border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-tarjeta);
    background: var(--pv-panel); box-shadow: var(--pv-sombra-1);
}
.tarjeta { margin-bottom: 18px; overflow: visible; }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--pv-linea-suave); }
.tarjeta-cabecera .tarjeta-titulo { margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 700; color: var(--pv-tinta-900); }
.tarjeta-cabecera .tarjeta-titulo::before { display: none; }
.tarjeta-cuerpo { padding: 16px 18px; }
.contador { color: var(--pv-tinta-500); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.campo label, .campo legend, fieldset.campo > legend {
    padding: 0; color: var(--pv-tinta-700); font-size: 12.5px; font-weight: 650; letter-spacing: 0; text-transform: none;
}
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label small { color: var(--pv-tinta-500); font-weight: 500; }
.obligatorio { color: var(--pv-error); font-weight: 700; }
.control, .campo input.control, .campo select.control, .campo textarea.control {
    width: 100%; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-control);
    background-color: #fff; color: var(--pv-tinta-900); font: 500 14px/1.35 var(--fuente);
    box-shadow: inset 0 1px 1px rgba(27, 33, 39, .03);
    transition: border-color .15s ease, box-shadow .15s ease;
}
select.control { padding-right: 34px; background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; }
textarea.control { min-height: 84px; resize: vertical; line-height: 1.5; }
.control::placeholder { color: var(--pv-tinta-400); }
.control:hover { border-color: var(--pv-tinta-300); }
.control:focus, .control:focus-visible { outline: none; border-color: var(--pv-marca-500); box-shadow: var(--pv-foco); }
.ayuda { color: var(--pv-tinta-500); font-size: 12px; line-height: 1.4; }
.ayuda-ok { color: var(--pv-exito); font-weight: 600; }
.ayuda-error { color: var(--pv-error); font-weight: 600; }
.campo-error { color: var(--pv-error); font-size: 12px; font-weight: 600; line-height: 1.35; }
.con-error > .control, .con-error .control, .con-error .selector-cliente, .con-error .segmentado, .con-error .opciones-tarjeta { border-color: var(--pv-error) !important; }
.con-error .control:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }
.campo-ancho { grid-column: 1 / -1; }
.campo-alineado { justify-content: flex-end; }
.grid-2, .grid-3, .grid-4 { gap: 14px 16px; margin-bottom: 14px; }
.grid-direccion { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.formulario-compacto .campo { margin-bottom: 12px; }
.pie-formulario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--pv-linea-suave); background: var(--pv-panel-2); border-radius: 0 0 var(--pv-radio-tarjeta) var(--pv-radio-tarjeta); }
.pie-formulario .acciones { margin: 0; }
.lista-errores { margin: 6px 0 0; padding-left: 18px; }

.control-prefijo { position: relative; }
.control-prefijo > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pv-tinta-400); font-weight: 600; pointer-events: none; }
.control-prefijo .control { padding-left: 26px; font-variant-numeric: tabular-nums; }

/* Control segmentado (tipo de identificación, prioridad) */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--pv-linea); border-radius: 12px; background: var(--pv-panel-2); }
.segmentado label { position: relative; margin: 0; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 8px; color: var(--pv-tinta-600); font-size: 13px; font-weight: 650; transition: background-color .15s ease, color .15s ease; }
.segmentado label:hover span { color: var(--pv-tinta-900); }
.segmentado input:checked + span { background: #fff; color: var(--pv-marca-800); box-shadow: 0 1px 2px rgba(27, 33, 39, .12), 0 0 0 1px var(--pv-marca-200); }
.segmentado input:focus-visible + span { box-shadow: var(--pv-foco); }
.segmentado-chico span { min-height: 30px; padding: 0 11px; font-size: 12.5px; }

/* Opciones en tarjeta (tipo de servicio) */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.opcion-tarjeta { position: relative; display: block; margin: 0; cursor: pointer; }
.opcion-tarjeta input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-tarjeta > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.opcion-tarjeta > span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border: 2px solid var(--pv-tinta-300); border-radius: 50%; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.opcion-tarjeta strong { color: var(--pv-tinta-900); font-size: 13.5px; }
.opcion-tarjeta small { color: var(--pv-tinta-500); font-size: 12px; line-height: 1.35; }
.opcion-tarjeta:hover > span { border-color: var(--pv-tinta-300); }
.opcion-tarjeta input:checked + span { border-color: var(--pv-marca-500); background: var(--pv-marca-50); box-shadow: 0 0 0 1px var(--pv-marca-500) inset; }
.opcion-tarjeta input:checked + span::before { border-color: var(--pv-marca-600); box-shadow: inset 0 0 0 3px #fff; background: var(--pv-marca-600); }
.opcion-tarjeta input:focus-visible + span { box-shadow: var(--pv-foco); }

/* Interruptores */
.interruptor-campo { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; cursor: pointer; }
.interruptor-campo input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor-pista { position: relative; flex: 0 0 36px; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--pv-tinta-300); transition: background-color .15s ease; }
.interruptor-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(27, 33, 39, .25); transition: transform .15s ease; }
.interruptor-campo input:checked + .interruptor-pista { background: var(--pv-marca-600); }
.interruptor-campo input:checked + .interruptor-pista::after { transform: translateX(16px); }
.interruptor-campo input:focus-visible + .interruptor-pista { box-shadow: var(--pv-foco); }
.interruptor-texto { display: flex; flex-direction: column; gap: 2px; }
.interruptor-texto strong { color: var(--pv-tinta-900); font-size: 13px; font-weight: 650; }
.interruptor-texto small { color: var(--pv-tinta-500); font-size: 12px; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-control); background: #fff; color: var(--pv-tinta-700); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--pv-marca-600); }
.casilla { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; color: var(--pv-tinta-700); font-size: 13px; cursor: pointer; }
.casilla input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--pv-marca-600); }

/* ---------- Tablas ---------- */
.tabla th { color: var(--pv-tinta-500); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--pv-panel-2); border-bottom: 1px solid var(--pv-linea); }
.tabla th a { color: inherit; text-decoration: none; }
.tabla th a:hover { color: var(--pv-marca-700); }
.tabla td { color: var(--pv-tinta-700); border-bottom: 1px solid var(--pv-linea-suave); vertical-align: middle; }
.tabla tbody tr:hover td { background: var(--pv-panel-2); }
.tabla-compacta th, .tabla-compacta td { padding: 8px 12px; }
.acciones-fila { white-space: nowrap; text-align: right; }
.acciones-fila .btn + .btn { margin-left: 4px; }
.enlace-fuerte { color: var(--pv-marca-700); font-weight: 700; text-decoration: none; }
.enlace-fuerte:hover { text-decoration: underline; }
.enlace-discreto { color: var(--pv-tinta-800); text-decoration: none; }
.enlace-discreto:hover { color: var(--pv-marca-700); text-decoration: underline; }
.celda-doble { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.celda-doble strong { color: var(--pv-tinta-900); font-size: 13px; font-weight: 650; }
.celda-doble small { color: var(--pv-tinta-500); font-size: 12px; }
.marcas-fila { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.plazo { display: inline-flex; align-items: center; gap: 6px; color: var(--pv-tinta-600); font-size: 12.5px; white-space: nowrap; }
.dato-tipo { display: block; color: var(--pv-tinta-500); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.celda-persona { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.celda-persona strong { display: block; color: var(--pv-tinta-900); font-size: 13.5px; }
.celda-persona:hover strong { color: var(--pv-marca-700); }
.etiqueta-suave { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; color: var(--pv-tinta-400); font-size: 11px; font-weight: 600; }
.etiqueta-suave::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d9a441; }

/* ---------- Estados, roles y chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.35; white-space: nowrap; }
.badge-estado-abierto        { background: var(--pv-info-fondo);    color: var(--pv-info); }
.badge-estado-agendado       { background: var(--pv-indigo-fondo);  color: var(--pv-indigo); }
.badge-estado-en-diagnostico { background: var(--pv-violeta-fondo); color: var(--pv-violeta); }
.badge-estado-en-espera      { background: var(--pv-aviso-fondo);   color: var(--pv-aviso); }
.badge-estado-en-reparacion  { background: var(--pv-marca-100);     color: var(--pv-marca-800); }
.badge-estado-solucionado    { background: var(--pv-exito-fondo);   color: var(--pv-exito); }
.badge-estado-cerrado        { background: #eff0f1;                 color: var(--pv-tinta-600); }
.badge-estado-anulado        { background: #f8e7e5;                 color: #8e2a24; }
.badge-exito  { background: var(--pv-exito-fondo); color: var(--pv-exito); }
.badge-aviso  { background: var(--pv-aviso-fondo); color: var(--pv-aviso); }
.badge-error  { background: var(--pv-error-fondo); color: var(--pv-error); }
.badge-neutro { background: #eff0f1; color: var(--pv-tinta-600); }
.badge-rol-admin    { background: var(--pv-tinta-800); color: #fff; }
.badge-rol-operador { background: var(--pv-marca-100); color: var(--pv-marca-800); }
.badge-rol-aliado   { background: var(--pv-indigo-fondo); color: var(--pv-indigo); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--pv-linea); border-radius: 999px; background: #fff; color: var(--pv-tinta-600); font-size: 12.5px; }
.chip strong { color: var(--pv-tinta-900); font-weight: 650; }
.chip-aviso { border-color: var(--pv-aviso-borde); background: var(--pv-aviso-fondo); color: var(--pv-aviso); }

/* ---------- Alertas ---------- */
.alerta { border-radius: 12px; border: 1px solid transparent; }
.alerta-exito { background: var(--pv-exito-fondo); border-color: var(--pv-exito-borde); color: #145c3e; }
.alerta-aviso { background: var(--pv-aviso-fondo); border-color: var(--pv-aviso-borde); color: #6e4206; }
.alerta-error { background: var(--pv-error-fondo); border-color: var(--pv-error-borde); color: #8a1d17; }
.alerta-info  { background: var(--pv-info-fondo);  border-color: var(--pv-info-borde);  color: #184a7c; }
.aviso-accion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--pv-info-borde); border-radius: var(--pv-radio-tarjeta); background: var(--pv-info-fondo); }
.aviso-accion strong { color: #184a7c; }
.aviso-accion p { margin: 4px 0 0; max-width: 780px; color: #2c5a86; font-size: 13px; }

/* ---------- Barra de filtros y búsqueda ---------- */
.barra-filtros, .filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.barra-filtros { margin-bottom: 16px; }
.barra-filtros .control, .filtros-fila .control { width: auto; min-width: 180px; }
.campo-busqueda { position: relative; display: flex; flex: 1 1 280px; align-items: center; min-width: 220px; margin: 0; }
.campo-busqueda input { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px; border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-control); background: #fff; color: var(--pv-tinta-900); font: 500 14px var(--fuente); }
.campo-busqueda input:focus { outline: none; border-color: var(--pv-marca-500); box-shadow: var(--pv-foco); }
.campo-busqueda-icono { position: absolute; left: 12px; color: var(--pv-tinta-400); font-size: 17px; line-height: 1; pointer-events: none; }
.filtros.filtros-compactos { display: block; margin-bottom: 16px; padding: 12px; }
.filtros-mas { margin-top: 10px; border-top: 1px dashed var(--pv-linea); padding-top: 10px; }
.filtros-mas > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--pv-marca-700); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.filtros-mas > summary::-webkit-details-marker { display: none; }
.filtros-mas > summary::before { content: "▸"; transition: transform .15s ease; }
.filtros-mas[open] > summary::before { transform: rotate(90deg); }
.filtros-mas .grid-4 { margin-top: 12px; }
.filtros-mas .acciones { margin: 4px 0 0; }

/* ---------- Estado vacío ---------- */
.estado-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.estado-vacio-icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; background: var(--pv-marca-50); color: var(--pv-marca-600); font-size: 22px; }
.estado-vacio h3 { margin: 0; font-size: 16px; }
.estado-vacio p { margin: 0 0 8px; color: var(--pv-tinta-500); font-size: 13.5px; }

/* ---------- Clientes ---------- */
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pv-marca-100); color: var(--pv-marca-800); font-size: 13px; font-weight: 750; letter-spacing: .02em; }
.avatar-grande { width: 56px; height: 56px; font-size: 19px; }
.cabecera-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-tarjeta); background: #fff; box-shadow: var(--pv-sombra-1); }
.cabecera-ficha-texto { flex: 1 1 320px; min-width: 0; }
.cabecera-ficha h1 { margin: 2px 0 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 750; letter-spacing: -.02em; }
.cabecera-ficha .acciones { margin: 0; }
.ficha-cliente { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.contacto-cliente .tarjeta-titulo { padding: 16px 18px 0; margin: 0; border: 0; color: var(--pv-tinta-900); font-size: 15px; font-weight: 700; }
.contacto-cliente .tarjeta-titulo::before { display: none; }
.contacto-cliente .lista-datos { padding: 12px 18px; }
.contacto-cliente .ayuda { display: block; padding: 0 18px 16px; }
.columna-principal { min-width: 0; }
.lista-datos { display: grid; gap: 12px; margin: 0; }
.lista-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-datos dt { color: var(--pv-tinta-500); font-size: 11.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.lista-datos dd { margin: 0; color: var(--pv-tinta-900); font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.rejilla-datos { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; }
.lista-datos-compacta { gap: 0; }
.lista-datos-compacta > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--pv-linea-suave); }
.lista-datos-compacta > div:last-child { border-bottom: 0; }
.lista-datos-compacta dd { text-align: right; font-size: 13.5px; }
.kpis-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis-mini-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-mini { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; box-shadow: var(--pv-sombra-1); color: inherit; text-decoration: none; }
.kpi-mini span { color: var(--pv-tinta-500); font-size: 12px; font-weight: 600; }
.kpi-mini strong { color: var(--pv-tinta-900); font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-enlace:hover { border-color: var(--pv-marca-300); box-shadow: var(--pv-sombra-2); }
.tarjeta-duplicado { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--pv-aviso-borde); border-radius: var(--pv-radio-tarjeta); background: var(--pv-aviso-fondo); }
.tarjeta-duplicado > div { flex: 1 1 260px; }
.tarjeta-duplicado h2 { margin: 2px 0; font-size: 17px; }
.tarjeta-duplicado p { margin: 0; color: var(--pv-tinta-600); font-size: 13px; }
.tarjeta-duplicado .acciones { margin: 0; }
.tarjeta-duplicado-compacta { margin: 0 0 14px; padding: 12px 14px; }
.tarjeta-duplicado-compacta > div { display: flex; flex-direction: column; gap: 1px; }
.tarjeta-duplicado-compacta strong { color: var(--pv-tinta-900); }
.tarjeta-duplicado-compacta span:last-child { color: var(--pv-tinta-600); font-size: 12.5px; }
.formulario-compacto .campos-cliente .grid-2 { margin-bottom: 0; }
.campos-cliente { display: flex; flex-direction: column; gap: 16px; }
.campos-cliente .grid-2 { margin: 0; }

/* ---------- Ticket: estructura del formulario ---------- */
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ticket-principal { min-width: 0; }
.ticket-lateral { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.ticket-lateral .tarjeta { margin: 0; }
.ticket-lateral .tarjeta-titulo { margin: 0; padding: 16px 18px 6px; border: 0; color: var(--pv-tinta-900); font-size: 14px; font-weight: 700; }
.ticket-lateral .tarjeta-titulo::before { display: none; }
.ticket-lateral .lista-datos { padding: 4px 18px 6px; }
.ticket-lateral .ayuda { display: block; padding: 0 18px 16px; }
.panel-ticket { margin-bottom: 16px; padding: 20px; border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-tarjeta); background: #fff; box-shadow: var(--pv-sombra-1); }
.panel-ticket-cabecera { margin-bottom: 16px; }
.panel-ticket-cabecera h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.01em; outline: none; }
.panel-ticket-cabecera p { margin: 4px 0 0; color: var(--pv-tinta-500); font-size: 13.5px; }
.panel-ticket > .campo { margin-bottom: 16px; }
.subtitulo-panel { margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--pv-linea-suave); color: var(--pv-tinta-800); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.grupo-costos .subtitulo-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.grid-costos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 8px; }
.total-vivo { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--pv-marca-50); border: 1px solid var(--pv-marca-200); }
.total-vivo span { color: var(--pv-marca-800); font-size: 12px; font-weight: 650; }
.total-vivo strong { color: var(--pv-marca-900); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.total-vivo small { color: var(--pv-tinta-500); font-size: 11.5px; }
.modelo-info { min-height: 18px; color: var(--pv-marca-700); font-size: 12.5px; font-weight: 650; }
.modelo-info-aviso { color: var(--pv-aviso); }
.nota-empresa { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--pv-indigo-fondo); color: #2f3478; font-size: 13px; }
.nota-empresa > span { color: var(--pv-indigo); font-size: 16px; }
.bloque-avanzado { margin-top: 8px; border: 1px solid var(--pv-linea); border-radius: 12px; background: var(--pv-panel-2); }
.bloque-avanzado > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.bloque-avanzado > summary::-webkit-details-marker { display: none; }
.bloque-avanzado > summary span { color: var(--pv-tinta-900); font-size: 13.5px; font-weight: 700; }
.bloque-avanzado > summary span::before { content: "▸ "; color: var(--pv-marca-600); }
.bloque-avanzado[open] > summary span::before { content: "▾ "; }
.bloque-avanzado > summary small { color: var(--pv-tinta-500); font-size: 12px; }
.bloque-avanzado > .grid-3, .bloque-avanzado > .interruptor-campo { margin: 0 14px 14px; }

/* Pasos del asistente */
.pasos { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.pasos li { position: relative; display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; color: var(--pv-tinta-500); }
.pasos-numero { display: grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pv-linea-suave); color: var(--pv-tinta-600); font-size: 12.5px; font-weight: 750; }
.pasos-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pasos-texto strong { overflow: hidden; color: var(--pv-tinta-700); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pasos-texto small { color: var(--pv-tinta-400); font-size: 11.5px; }
.pasos li.activo { border-color: var(--pv-marca-500); background: var(--pv-marca-50); box-shadow: 0 0 0 1px var(--pv-marca-500) inset; }
.pasos li.activo .pasos-numero { background: var(--pv-marca-700); color: #fff; }
.pasos li.activo .pasos-texto strong { color: var(--pv-marca-900); }
.pasos li.hecho { cursor: pointer; }
.pasos li.hecho .pasos-numero { background: var(--pv-marca-100); color: var(--pv-marca-800); font-size: 0; }
.pasos li.hecho .pasos-numero::after { content: "✓"; font-size: 13px; }
.pasos li.hecho:hover { border-color: var(--pv-marca-300); }
.navegacion-pasos { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; }
.navegacion-pasos-espacio { flex: 1; }
form:not(.js-asistente) .pasos, form:not(.js-asistente) [data-paso-siguiente] { display: none; }

/* Pestañas de edición */
.pestanas { display: flex; gap: 2px; margin: 0 0 16px; padding: 4px; overflow-x: auto; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; scrollbar-width: thin; }
.pestanas [role="tab"] { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--pv-tinta-600); font: 650 13px var(--fuente); cursor: pointer; white-space: nowrap; }
.pestanas [role="tab"]:hover { background: var(--pv-panel-2); color: var(--pv-tinta-900); }
.pestanas [role="tab"][aria-selected="true"] { background: var(--pv-marca-700); color: #fff; }
.pestanas [role="tab"]:focus-visible { outline: none; box-shadow: var(--pv-foco); }
.pestanas [role="tab"].con-error { color: var(--pv-error); }
.pestanas [role="tab"].con-error::after { content: " •"; }
.pestanas [role="tab"][aria-selected="true"].con-error { background: var(--pv-error); color: #fff; }

/* Selector de cliente */
.selector-cliente { border-radius: 12px; }
.cliente-elegido { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pv-marca-200); border-radius: 12px; background: var(--pv-marca-50); }
.cliente-elegido-datos { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.cliente-elegido-datos strong { color: var(--pv-tinta-900); font-size: 15px; }
.cliente-elegido-datos span { overflow: hidden; color: var(--pv-tinta-600); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.buscador-cliente { position: relative; display: flex; flex-direction: column; gap: 6px; }
.buscador-cliente > label { color: var(--pv-tinta-700); font-size: 12.5px; font-weight: 650; }
.buscador-cliente-campo { position: relative; }
.buscador-cliente-campo > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pv-tinta-400); font-size: 18px; pointer-events: none; }
.buscador-cliente-campo .control { min-height: 46px; padding-left: 38px; font-size: 15px; }
.resultados-cliente { position: absolute; z-index: 30; top: 76px; left: 0; right: 0; max-height: 340px; overflow-y: auto; padding: 6px; border: 1px solid var(--pv-linea); border-radius: 12px; background: #fff; box-shadow: var(--pv-sombra-3); }
.resultado-cliente { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.resultado-cliente:hover, .resultado-cliente.activo, .resultado-cliente:focus-visible { outline: none; background: var(--pv-marca-50); }
.resultado-cliente-datos { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.resultado-cliente-datos strong { color: var(--pv-tinta-900); font-size: 14px; }
.resultado-cliente-datos small { overflow: hidden; color: var(--pv-tinta-500); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.resultado-cliente-meta { color: var(--pv-tinta-400); font-size: 11.5px; white-space: nowrap; }
.resultados-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; color: var(--pv-tinta-500); font-size: 13px; }
.buscador-cliente-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--pv-tinta-500); font-size: 13px; }

/* Resumen e indicadores laterales */
.panel-resumen dd { max-width: 60%; font-weight: 600; }
.panel-resumen .lista-datos-compacta > div { align-items: flex-start; }
.lista-cierres { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 18px 12px; padding: 0; list-style: none; }
.tarjeta-cuerpo .lista-cierres { margin: 0 0 14px; }
.lista-cierres li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.lista-cierres .cumple { background: var(--pv-exito-fondo); color: var(--pv-exito); }
.lista-cierres .no-cumple { background: #eff0f1; color: var(--pv-tinta-500); }
.panel-indicadores .chip { margin: 0 18px 12px; }

/* Barra fija de guardado */
.barra-guardar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--pv-linea); border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: var(--pv-sombra-3); backdrop-filter: blur(8px); }
.barra-guardar-estado { margin-right: auto; padding-left: 6px; color: var(--pv-aviso); font-size: 13px; font-weight: 650; }
.barra-guardar-estado::before { content: "● "; }

/* Modal de alta rápida de cliente */
.modal-cliente { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--pv-tinta-700); box-shadow: var(--pv-sombra-3); }
.modal-cliente::backdrop { background: rgba(18, 24, 30, .45); backdrop-filter: blur(2px); }
.modal-cliente-marco { display: flex; flex-direction: column; max-height: calc(100vh - 48px); margin: 0; }
.modal-cliente-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--pv-linea-suave); }
.modal-cliente-cabecera h2 { margin: 2px 0 0; font-size: 19px; }
.modal-cliente-cuerpo { overflow-y: auto; padding: 18px 20px; }
.modal-cliente-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--pv-linea-suave); background: var(--pv-panel-2); border-radius: 0 0 16px 16px; }
.modal-cerrar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--pv-linea); border-radius: 10px; background: #fff; color: var(--pv-tinta-600); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-cerrar:hover { background: var(--pv-linea-suave); color: var(--pv-tinta-900); }

/* ---------- Ficha del ticket ---------- */
.ficha-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ficha-ticket-principal, .ficha-ticket-lateral { min-width: 0; }
.ficha-ticket-lateral .tarjeta { margin-bottom: 16px; }
.progreso-hitos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 16px; padding: 16px 18px; list-style: none; border: 1px solid var(--pv-linea); border-radius: var(--pv-radio-tarjeta); background: #fff; box-shadow: var(--pv-sombra-1); }
.progreso-hitos li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 22px; }
.progreso-hitos li::before { content: ""; position: absolute; top: 6px; left: 12px; right: 0; height: 2px; background: var(--pv-linea); }
.progreso-hitos li:last-child::before { display: none; }
.progreso-hitos li.hecho::before { background: var(--pv-marca-300); }
.progreso-hitos-punto { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border: 2px solid var(--pv-tinta-300); border-radius: 50%; background: #fff; }
.progreso-hitos li.hecho .progreso-hitos-punto { border-color: var(--pv-marca-600); background: var(--pv-marca-600); box-shadow: 0 0 0 3px var(--pv-marca-100); }
.progreso-hitos strong { color: var(--pv-tinta-800); font-size: 12.5px; }
.progreso-hitos small { color: var(--pv-tinta-500); font-size: 12px; }
.progreso-hitos li:not(.hecho) strong { color: var(--pv-tinta-500); }
.seccion-plegable { padding: 0; }
.seccion-plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.seccion-plegable > summary::-webkit-details-marker { display: none; }
.seccion-plegable > summary .tarjeta-titulo { margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 700; }
.seccion-plegable > summary .tarjeta-titulo::before { content: "▸"; display: inline-block; width: auto; height: auto; margin-right: 8px; border: 0; background: none; box-shadow: none; color: var(--pv-marca-600); transition: transform .15s ease; }
.seccion-plegable[open] > summary .tarjeta-titulo::before { transform: rotate(90deg); }
.seccion-plegable[open] > summary { border-bottom: 1px solid var(--pv-linea-suave); }
.resumen-plegable { color: var(--pv-tinta-500); font-size: 13px; font-weight: 600; }
.bloque-texto { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--pv-panel-2); }
.bloque-texto h3 { margin: 0 0 6px; font-size: 12.5px; color: var(--pv-tinta-600); text-transform: uppercase; letter-spacing: .04em; }
.bloque-texto p { margin: 0; color: var(--pv-tinta-800); line-height: 1.6; }
.aviso-exito-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--pv-exito-borde); border-radius: var(--pv-radio-tarjeta); background: var(--pv-exito-fondo); }
.aviso-exito-ticket > div { flex: 1 1 320px; }
.aviso-exito-ticket h2 { margin: 0 0 2px; color: #145c3e; font-size: 17px; }
.aviso-exito-ticket p { margin: 0; color: #2a6a4c; font-size: 13px; }
.aviso-exito-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pv-exito); color: #fff; font-size: 18px; font-weight: 700; }
.timeline-punto { width: 12px; height: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pv-linea); }
.timeline-punto-marca   { background: var(--pv-marca-600); }
.timeline-punto-violeta { background: var(--pv-violeta); }
.timeline-punto-ambar   { background: #c98a1b; }
.timeline-punto-rojo    { background: var(--pv-error); }
.timeline-punto-verde   { background: var(--pv-exito); }
.timeline-punto-neutro  { background: var(--pv-tinta-400); }
.timeline-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.timeline-meta strong { color: var(--pv-tinta-900); font-size: 13px; }
.timeline-meta time { color: var(--pv-tinta-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline-estados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.timeline-cuerpo p { margin: 4px 0 0; color: var(--pv-tinta-700); font-size: 13.5px; line-height: 1.5; }
.timeline-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--pv-tinta-500) !important; font-size: 12px !important; }

/* ---------- Inicio del aliado ---------- */
.bienvenida-aliado { min-height: 0; background-image: none !important; background: linear-gradient(135deg, #fff 0%, var(--pv-marca-50) 100%); border: 1px solid var(--pv-linea); }
.bienvenida-aliado p { max-width: 640px; }
.lista-recientes { margin: 0; padding: 6px; list-style: none; }
.lista-recientes a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.lista-recientes a:hover { background: var(--pv-panel-2); }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1180px) {
    .ticket-layout, .ficha-ticket { grid-template-columns: minmax(0, 1fr); }
    .ticket-lateral { position: static; }
    .ficha-cliente { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .kpis-mini-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-costos { grid-template-columns: minmax(0, 1fr); }
    .progreso-hitos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .progreso-hitos li:nth-child(2)::before { display: none; }
}
@media (max-width: 760px) {
    .encabezado-pagina { align-items: flex-start; }
    .encabezado-pagina > div:first-child { width: 100%; }
    .encabezado-pagina .acciones { justify-content: flex-start; flex-wrap: wrap; }
    .barra-superior-nombre { display: none; }
    .grid-direccion { grid-template-columns: minmax(0, 1fr); }
    .pasos { gap: 6px; }
    .pasos li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px; }
    .pasos-texto small { display: none; }
    .pasos-texto strong { font-size: 12px; white-space: normal; }
    .panel-ticket { padding: 16px; }
    .opciones-tarjeta { grid-template-columns: minmax(0, 1fr); }
    .kpis-mini { grid-template-columns: minmax(0, 1fr); }
    .kpis-mini-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .barra-filtros .control, .filtros-fila .control { flex: 1 1 100%; min-width: 0; }
    .barra-guardar { bottom: 8px; }
    .lista-recientes a { grid-template-columns: minmax(0, 1fr) auto; }
    .lista-recientes a > .mono { grid-column: 1 / -1; }
    .navegacion-pasos .btn { flex: 1 1 auto; }
    .navegacion-pasos-espacio { display: none; }
    .cliente-elegido { flex-wrap: wrap; }
}
@media print {
    .pasos, .pestanas, .navegacion-pasos, .barra-guardar, .ficha-ticket-lateral form { display: none !important; }
    .ficha-ticket, .ticket-layout { grid-template-columns: 1fr; }
}

/* ============== 33. VERSIÓN 5.1 · NAVEGACIÓN, TEXTOS Y ESCUDO ============== */

/* ---------- Migas de pan en la barra superior ---------- */
.barra-superior-titulo { min-width: 0; }
.migas { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; color: var(--pv-tinta-500); font-size: 11px; font-weight: 650; letter-spacing: .02em; line-height: 1.25; white-space: nowrap; }
.migas a { overflow: hidden; max-width: 24ch; color: var(--pv-tinta-500); text-decoration: none; text-overflow: ellipsis; }
.migas a:hover, .migas a:focus-visible { color: var(--pv-marca-700); text-decoration: underline; }
.migas span { color: var(--pv-tinta-300); }

/* ---------- Paleta Ctrl+K: grupos y resultados de la búsqueda global ---------- */
.paleta-grupo { margin: 12px 8px 4px; color: var(--pv-tinta-500); font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.paleta-grupo:first-child { margin-top: 2px; }
.paleta-cargando { color: var(--pv-tinta-400); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.paleta-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paleta-texto > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-texto small { overflow: hidden; color: var(--pv-tinta-500); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Calidad de datos ---------- */
.reglas-formato { display: grid; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; }
.reglas-formato li { position: relative; padding: 10px 12px 10px 40px; border: 1px solid var(--pv-linea-suave); border-radius: 10px; background: var(--pv-panel-2); color: var(--pv-tinta-700); font-size: 13.5px; line-height: 1.45; }
.reglas-formato li::before { content: "Aa"; position: absolute; left: 12px; top: 11px; color: var(--pv-marca-700); font-size: 11px; font-weight: 800; }
.reglas-formato strong { color: var(--pv-tinta-900); }
.texto-antes { color: var(--pv-tinta-500); }
.texto-despues { color: var(--pv-tinta-900); font-weight: 650; }
.texto-despues::before { content: "→ "; color: var(--pv-marca-600); font-weight: 700; }

/* ---------- ESCUDO: insignias por etapa ---------- */
.badge-escudo-solicitado    { background: var(--pv-info-fondo);    color: var(--pv-info); }
.badge-escudo-en-validacion { background: var(--pv-violeta-fondo); color: var(--pv-violeta); }
.badge-escudo-aprobado      { background: var(--pv-indigo-fondo);  color: var(--pv-indigo); }
.badge-escudo-notificado    { background: var(--pv-aviso-fondo);   color: var(--pv-aviso); }
.badge-escudo-pagado        { background: var(--pv-marca-100);     color: var(--pv-marca-800); }
.badge-escudo-entregado     { background: var(--pv-exito-fondo);   color: var(--pv-exito); }
.badge-escudo-cerrado       { background: #eff0f1;                 color: var(--pv-tinta-600); }
.badge-escudo-rechazado     { background: var(--pv-error-fondo);   color: var(--pv-error); }

/* ---------- ESCUDO: pestañas del flujo en el listado ---------- */
.pipeline-escudo { display: flex; align-items: stretch; gap: 4px; margin: 0 0 14px; padding: 6px; overflow-x: auto; border: 1px solid var(--pv-linea); border-radius: 14px; background: #fff; box-shadow: var(--pv-sombra-1); scrollbar-width: thin; }
.pipeline-etapa { display: flex; flex: 1 0 auto; flex-direction: column; gap: 1px; min-width: 88px; padding: 8px 12px; border-radius: 10px; color: var(--pv-tinta-600); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.pipeline-etapa span { font-size: 12px; font-weight: 650; white-space: nowrap; }
.pipeline-etapa strong { color: var(--pv-tinta-900); font-size: 18px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pipeline-etapa:hover { background: var(--pv-panel-2); color: var(--pv-tinta-900); text-decoration: none; }
.pipeline-etapa:focus-visible { outline: none; box-shadow: var(--pv-foco); }
.pipeline-etapa.vacia strong { color: var(--pv-tinta-300); }
.pipeline-en-curso { background: var(--pv-marca-50); color: var(--pv-marca-800); }
.pipeline-etapa.activa, .pipeline-etapa.activa:hover { background: var(--pv-marca-700); color: #fff; }
.pipeline-etapa.activa strong { color: #fff; }
.pipeline-rechazado.activa, .pipeline-rechazado.activa:hover { background: var(--pv-error); }
.pipeline-separador { flex: 0 0 1px; margin: 6px 2px; background: var(--pv-linea); }

/* ---------- ESCUDO: indicadores y filtros ---------- */
.kpis-extra { margin: -6px 0 18px; }
.kpis-extra > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--pv-marca-700); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
.kpis-extra > summary::-webkit-details-marker { display: none; }
.kpis-extra > summary::before { content: "▸"; transition: transform .15s ease; }
.kpis-extra[open] > summary::before { transform: rotate(90deg); }
.kpis-extra dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; }
.kpis-extra dl > div { padding: 10px 14px; border: 1px dashed var(--pv-linea); border-radius: 12px; background: var(--pv-panel-2); }
.kpis-extra dt { color: var(--pv-tinta-500); font-size: 12px; font-weight: 600; }
.kpis-extra dd { margin: 2px 0 0; color: var(--pv-tinta-900); font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.filtro-cliente { align-items: center; margin: 10px 0 0; }
.chip-quitar { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; color: var(--pv-tinta-500); font-size: 15px; line-height: 1; text-decoration: none; }
.chip-quitar:hover { background: var(--pv-error-fondo); color: var(--pv-error); text-decoration: none; }

/* ---------- ESCUDO: tabla y detalle rápido ---------- */
.tarjeta-escudos .tabla-scroll { margin: 0; }
.tabla-escudos { min-width: 940px; }
.tabla-escudos th:first-child, .tabla-escudos td:first-child { background: #fff; }
.tabla-escudos th:first-child { background: var(--pv-panel-2); }
.tabla-escudos tbody tr:hover td:first-child { background: var(--pv-panel-2); }
.tabla-escudos tr.fila-revisar { background: transparent; }
.tabla-escudos tr.fila-revisar td:first-child { box-shadow: inset 3px 0 0 #d9a441, 8px 0 10px -11px rgba(31, 40, 51, .42); }
.tabla-escudos .celda-doble small.mono { font-size: 11.5px; }
.escudo-codigo { color: var(--pv-marca-700); font: 750 13.5px var(--fuente-mono); text-decoration-color: var(--pv-marca-300); }
.escudo-codigo:hover { color: var(--pv-marca-900); }
.dato-orden { display: block; margin-top: 3px; color: var(--pv-tinta-500); font-size: 11.5px; }
.dato-orden a { color: var(--pv-tinta-700); }
.modal-escudo { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 16px; background: #fff; color: var(--pv-tinta-700); box-shadow: var(--pv-sombra-3); }
.modal-escudo::backdrop { background: rgba(18, 24, 30, .45); backdrop-filter: blur(2px); }
.modal-escudo-cabecera { align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid var(--pv-linea-suave); background: #fff; color: var(--pv-tinta-900); }
.modal-escudo-cabecera .sobrelinea { color: var(--pv-marca-700); }
.modal-escudo-cabecera h2 { margin: 2px 0 0; color: var(--pv-tinta-900); font-size: 22px; }
.modal-escudo-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 20px 0; }
.modal-escudo-estado small { color: var(--pv-tinta-600); font-size: 13px; font-weight: 600; }
.modal-escudo-grid { gap: 8px; padding: 6px 20px 14px; }
.modal-escudo-grupo { grid-column: 1 / -1; margin: 10px 0 0; color: var(--pv-tinta-500); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.modal-escudo-grid > div { padding: 8px 10px; border: 1px solid var(--pv-linea-suave); border-radius: 10px; background: var(--pv-panel-2); }
.modal-escudo-grid span { color: var(--pv-tinta-500); font-size: 10.5px; }
.modal-escudo-grid strong { color: var(--pv-tinta-900); font-size: 13px; font-weight: 600; }
.modal-escudo-notas { margin: 0 20px 14px; border-left-color: var(--pv-marca-300); border-radius: 0 10px 10px 0; background: var(--pv-marca-50); }
.modal-escudo > .modal-escudo-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--pv-linea-suave); background: var(--pv-panel-2); border-radius: 0 0 16px 16px; }

/* ---------- ESCUDO: formulario del caso ---------- */
.flujo-escudo { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--pv-linea); border-radius: 14px; background: #fff; box-shadow: var(--pv-sombra-1); }
.flujo-escudo.con-error { border-color: var(--pv-error); }
.flujo-escudo-pasos { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 0 2px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.flujo-escudo-pasos li { position: relative; flex: 1 0 86px; min-width: 86px; }
.flujo-escudo-pasos li::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 2px; border-radius: 2px; background: var(--pv-linea); }
.flujo-escudo-pasos li:first-child::before { display: none; }
.flujo-escudo-pasos li.hecho::before, .flujo-escudo-pasos li.actual::before { background: var(--pv-marca-300); }
.flujo-escudo-pasos label { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0 4px; text-align: center; cursor: pointer; }
.flujo-escudo-pasos input, .flujo-escudo-rechazo input { position: absolute; opacity: 0; pointer-events: none; }
.flujo-escudo-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--pv-tinta-300); border-radius: 50%; background: #fff; color: var(--pv-tinta-500); font-size: 12.5px; font-weight: 750; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.flujo-escudo-texto { color: var(--pv-tinta-500); font-size: 12px; font-weight: 650; line-height: 1.2; }
.flujo-escudo-pasos label:hover .flujo-escudo-punto { border-color: var(--pv-marca-500); }
.flujo-escudo-pasos li.hecho .flujo-escudo-punto { border-color: var(--pv-marca-600); background: var(--pv-marca-100); color: var(--pv-marca-800); font-size: 0; }
.flujo-escudo-pasos li.hecho .flujo-escudo-punto::after { content: "✓"; font-size: 14px; }
.flujo-escudo-pasos li.hecho .flujo-escudo-texto { color: var(--pv-tinta-700); }
.flujo-escudo-pasos li.actual .flujo-escudo-punto { border-color: var(--pv-marca-700); background: var(--pv-marca-700); color: #fff; box-shadow: 0 0 0 4px var(--pv-marca-100); }
.flujo-escudo-pasos li.actual .flujo-escudo-texto { color: var(--pv-marca-900); font-weight: 750; }
.flujo-escudo-pasos input:focus-visible + .flujo-escudo-punto { box-shadow: var(--pv-foco); }
.flujo-escudo-rechazo { flex: 0 0 auto; margin: 0; padding-left: 12px; border-left: 1px solid var(--pv-linea); cursor: pointer; }
.flujo-escudo-rechazo > span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--pv-error-borde); border-radius: 999px; background: #fff; color: var(--pv-error); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.flujo-escudo-rechazo:hover > span { background: var(--pv-error-fondo); }
.flujo-escudo-rechazo input:checked + span { border-color: var(--pv-error); background: var(--pv-error); color: #fff; }
.flujo-escudo-rechazo input:focus-visible + span { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2); }
.flujo-escudo-rechazado .flujo-escudo-pasos { opacity: .5; }
.flujo-escudo[disabled] label, .flujo-escudo[disabled] .flujo-escudo-rechazo { cursor: not-allowed; }
.flujo-escudo-ayuda { margin: 0 0 16px; padding: 0 4px; color: var(--pv-tinta-600); font-size: 13px; }
.flujo-escudo-ayuda strong { color: var(--pv-tinta-900); }
.flujo-escudo + .flujo-escudo-ayuda + .campo-error { display: block; margin: -10px 0 14px; }
.etiqueta-campo { color: var(--pv-tinta-700); font-size: 12.5px; font-weight: 650; }
.campo-calculado { display: flex; align-items: center; gap: 6px; min-height: 40px; border-color: var(--pv-linea); border-radius: var(--pv-radio-control); background: var(--pv-panel-2); color: var(--pv-tinta-800); }
.campo-calculado small { color: var(--pv-tinta-500); font-family: var(--fuente); font-size: 12px; }
.estado-orden { color: var(--pv-tinta-500); font-size: 12px; line-height: 1.45; }
.estado-orden a { font-weight: 700; }
.estado-orden-ok { color: var(--pv-exito); font-weight: 600; }
.estado-orden-ok::before { content: "✓ "; }
.estado-orden-aviso { color: var(--pv-aviso); font-weight: 600; }
.estado-orden-cargando { color: var(--pv-tinta-400); }
.fechas-flujo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 4px; }
.campo-requerido-etapa .control { border-color: var(--pv-marca-500); box-shadow: 0 0 0 3px rgba(52, 74, 99, .12); }
.marca-requerida { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--pv-marca-100); color: var(--pv-marca-800); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }
.fecha-fuera-orden .control { border-color: var(--pv-error); }
.control-sufijo { position: relative; }
.control-sufijo > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pv-tinta-400); font-weight: 600; pointer-events: none; }
.control-sufijo .control { padding-right: 30px; font-variant-numeric: tabular-nums; }
/* «.campo input.control» fija el relleno con más especificidad: el prefijo «$» y el sufijo «%» lo recuperan. */
.campo .control-prefijo input.control { padding-left: 26px; }
.campo .control-sufijo input.control { padding-right: 30px; }
[data-sugerencia-deducible] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
[data-sugerencia-deducible] .btn { min-height: 26px; padding: 0 8px; }
.panel-resumen dd small { color: var(--pv-tinta-500); font-size: 11.5px; font-weight: 500; }
.meta-registro { margin: 0; padding: 0 6px; color: var(--pv-tinta-500); font-size: 12px; line-height: 1.55; }
.tarjeta-escudo-ticket > .tarjeta-cuerpo.ayuda { display: block; margin: 0; }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1100px) {
    .fechas-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .kpis-extra dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .migas a { max-width: 14ch; }
    .flujo-escudo { flex-direction: column; align-items: stretch; gap: 10px; }
    .flujo-escudo-rechazo { padding: 10px 0 0; border-top: 1px solid var(--pv-linea); border-left: 0; }
    .pipeline-etapa { flex: 0 0 auto; min-width: 84px; }
    .modal-escudo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .fechas-flujo { grid-template-columns: minmax(0, 1fr); }
    .kpis-extra dl { grid-template-columns: minmax(0, 1fr); }
    .modal-escudo-acciones .btn { flex: 1 1 auto; }
    .modal-escudo-acciones .navegacion-pasos-espacio { display: none; }
}
@media print {
    .pipeline-escudo, .flujo-escudo-rechazo, .kpis-extra > summary { display: none !important; }
}

/* ============== 34. VERSIÓN 5.2 · PALETA SOBRIA Y MENÚ COMPACTO ============== */
/* Los tokens de color viven en la sección 32 (:root). Aquí: menú lateral
   compacto, íconos que toman el color del texto, cabeceras con ilustración
   atenuada y correcciones de campos con ícono. */

/* ---------- Campos con ícono dentro de .campo ---------- */
/* «.campo input.control» fija el relleno con más especificidad que las reglas
   de cada componente: el buscador de clientes recupera su espacio para la lupa. */
.campo .buscador-cliente-campo input.control { min-height: 46px; padding-left: 40px; font-size: 15px; }
.buscador-cliente-campo > span { left: 14px; font-size: 17px; line-height: 1; }

/* ---------- Íconos del menú: máscara con el color del texto ---------- */
/* La capa 4 pinta de blanco el ícono activo (menú oscuro antiguo): aquí sigue al texto. */
.sidebar-nav a .icono, .sidebar-nav a.activo .icono, .sidebar-nav a:hover .icono { color: inherit; opacity: 1; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .sidebar-nav a .icono[style] {
        background-color: currentColor;
        -webkit-mask: var(--icono) center / 20px 20px no-repeat;
        mask: var(--icono) center / 20px 20px no-repeat;
    }
    .sidebar-nav a .icono[style] img { visibility: hidden; }
}

/* ---------- Menú lateral compacto (escritorio) ---------- */
@media (min-width: 901px) {
    :root { --pv-riel: 84px; }
    .sidebar {
        width: var(--pv-riel);
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid var(--pv-linea);
        background: #fff;
        box-shadow: none;
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { width: 0; height: 0; }
    .barra-superior, .contenido, .pie { margin-left: var(--pv-riel); }
    .barra-superior { min-height: 64px; padding: 8px 28px; }

    .sidebar-marca { display: grid; place-items: center; min-height: 64px; padding: 0; border-bottom: 1px solid var(--pv-linea-suave); }
    .sidebar-marca-icono { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; }
    .sidebar-marca-icono img { width: 32px; height: 32px; }

    .sidebar-nav { gap: 2px; padding: 8px; }
    .sidebar-nav a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 50px;
        padding: 6px 2px 5px;
        border: 0;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 650;
        letter-spacing: .04em;
        line-height: 1.15;
        text-transform: uppercase;
        box-shadow: none;
        transform: none;
    }
    .sidebar-nav a > span:not(.icono) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-nav a .icono { display: block; width: 20px; height: 20px; }
    .sidebar-nav a .icono img { display: block; width: 20px; height: 20px; }
    .sidebar-nav a.activo::before { content: ""; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pv-marca-700); box-shadow: none; }

    .sidebar-pie { display: grid; place-items: center; gap: 2px; padding: 8px 4px 10px; border-top: 1px solid var(--pv-linea-suave); }
    .sidebar-clave { margin: 0; font-size: 9.5px; }
    .sidebar-version { color: var(--pv-tinta-400); font-size: 7.5px; letter-spacing: .03em; }
}

/* Colores del menú (todas las pantallas). Las capas antiguas usan !important. */
.sidebar-nav a, .sidebar-nav a:visited { color: var(--pv-tinta-500) !important; background: transparent; border-color: transparent; }
.sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: var(--pv-tinta-900) !important; background: var(--pv-panel-2); border-color: transparent; transform: none; box-shadow: none; }
.sidebar-nav a.activo, .sidebar-nav a.activo:hover, .sidebar-nav a.activo:focus-visible { color: var(--pv-marca-800) !important; background: var(--pv-marca-100); border-color: transparent; box-shadow: none; font-weight: 750; }
.sidebar-nav a:focus-visible { outline: none; box-shadow: var(--pv-foco); }

/* ---------- Tabletas y teléfonos: menú desplegable en cuadrícula ---------- */
@media (max-width: 900px) {
    .barra-superior, .contenido, .pie { margin-left: 0; }
    .barra-superior { min-height: 60px; }
    .sidebar { width: auto; border-bottom: 1px solid var(--pv-linea); background: #fff; box-shadow: none; }
    .menu-toggle-input:checked ~ .sidebar { max-height: 80vh; overflow-y: auto; }
    .sidebar-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; width: auto; padding: 10px 12px 6px; }
    .sidebar-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 60px; padding: 8px 4px; border: 0; border-radius: 10px; font-size: 10px; font-weight: 650; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
    .sidebar-nav a.activo::before { display: none; }
    .sidebar-nav a .icono { width: 22px; height: 22px; }
    .sidebar-nav a .icono img { width: 22px; height: 22px; }
    .sidebar-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 14px 12px; border-top: 1px solid var(--pv-linea-suave); }
    .sidebar-clave { margin: 0; }
    .encabezado-pagina { align-items: flex-start; }
    .encabezado-pagina > div:first-child { width: 100%; }
    .encabezado-pagina .acciones { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .contenido { padding-bottom: 24px; }
    .pie { padding-bottom: 20px; }
}

/* ---------- Cabeceras con ilustración: tono azul pizarra ---------- */
/* Una capa de color con fusión «color» tiñe la ilustración y deja el blanco intacto. */
.bienvenida:not(.bienvenida-aliado), .dashboard-hero {
    background-image: linear-gradient(rgba(31, 58, 83, .82), rgba(31, 58, 83, .82)),
                      linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 49%, rgba(255, 255, 255, .12) 76%),
                      url('../img/admin-teal-service-hero.png');
    background-position: center, center, right center;
    background-size: cover, cover, auto 129%;
    background-repeat: no-repeat;
    background-blend-mode: color, normal, normal;
    box-shadow: var(--pv-sombra-1);
}
@media (max-width: 760px) {
    .bienvenida:not(.bienvenida-aliado), .dashboard-hero { background-position: center, center, right center; background-size: cover, cover, auto 108%; }
}

/* ---------- Detalles de acabado ---------- */
.btn-primario { box-shadow: none; }
.btn { border-radius: var(--pv-radio-control); }
.chip, .badge { letter-spacing: .01em; }
.kpi-mini strong { letter-spacing: -.01em; }

/* Enlaces dentro de datos y avisos: con el azul pizarra se distinguen por el subrayado. */
.lista-datos dd a, .estado-orden a, .alerta a, .ayuda a, .celda-doble a strong, .dato-orden a {
    color: var(--pv-marca-600);
    text-decoration: underline;
    text-decoration-color: var(--pv-marca-300);
    text-underline-offset: 2px;
}
.lista-datos dd a:hover, .estado-orden a:hover, .alerta a:hover, .ayuda a:hover, .dato-orden a:hover { color: var(--pv-marca-800); text-decoration-color: currentColor; }
.celda-doble a.enlace-discreto { text-decoration: none; }
.celda-doble a.enlace-discreto strong { text-decoration: none; }
.celda-doble a.enlace-discreto:hover strong { color: var(--pv-marca-600); text-decoration: underline; }