@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..600,0..1,0&display=block");
/* Íconos con display=block (no swap): mientras la fuente llega el ícono queda en
   blanco, en vez de mostrar su nombre en texto ("logout", "pending_actions"). */

/*
   Rhodus OS — sistema de diseño Clean OS («La hoja») con la paleta de Rhodus.

   Fuente: artifact "Clean OS" (Design System). Se conservan tipografía,
   espaciado, radios, elevación, movimiento y reglas de composición; la
   paleta se reemplaza por la de Rhodus:
     - #006BFF  azul Rhodus: acento (relleno de primario, trazo, foco); 2026-11-06, antes #1466FA
     - #0200FF  azul profundo: marca (logo, panel del login)
     - blanco   la hoja (superficie de contenido)
     - blanco   también el campo (fondo de la aplicación); antes #F4F6FA
   A diferencia del turquesa original, el relleno azul lleva texto BLANCO.

   Estructura del archivo:
     1. Tokens          5. Bootstrap (capa de compatibilidad)
     2. Base            6. Radzen (variables + ajustes de componentes)
     3. Primitivas os-  7. Login
     4. Armazón (layout)

   Las clases propias llevan prefijo os- para no chocar con Bootstrap (.btn,
   .alert…) ni con Radzen (.rz-*). Este archivo se carga ÚLTIMO en App.razor.
*/

/* ====================================================================
   1. Tokens
   ==================================================================== */

:root {
    /* ---- Neutros: gris frío muy claro + blanco ---- */
    --background:        #FFFFFF;  /* el campo: blanco, igual que la hoja (las hojas se separan por su filete) */
    --surface:           #FFFFFF;  /* la hoja */
    --surface-secondary: #F7F8FB;  /* hundida: cabecera de tabla, sección */
    --surface-hover:     #F1F4FA;
    --surface-active:    #E6EBF5;
    --surface-inverse:   #131722;

    --border:        #E1E5EE;      /* filete de renglón */
    --border-input:  #CDD3DF;      /* borde de campo: un escalón más visible */
    --border-strong: #131722;      /* la tinta */

    --text-primary:   #131722;
    --text-secondary: #4B5265;     /* 7,9:1 sobre blanco */
    --text-tertiary:  #5F6678;     /* 5,9:1 sobre blanco */
    --text-inverse:   #FFFFFF;
    --heading-color:  var(--text-primary);

    /* ---- Acento: azul Rhodus #006BFF (elegido por el usuario 2026-11-06; antes #1466FA).
       Toda la familia sale del mismo tono; el texto usa una variante más profunda porque
       #006BFF queda en 4,6:1 y sobre el fondo tenue no llega a 4,5:1. ---- */
    --accent:              #006BFF;  /* trazo (4,6:1 sobre blanco) */
    --accent-hover:        #005FE6;
    --accent-press:        #004BB5;
    --accent-solid:        #006BFF;  /* relleno, con blanco encima (4,6:1) */
    --accent-solid-hover:  #005FE6;  /* un tono más profundo (5,6:1) */
    --accent-solid-press:  #004BB5;
    --accent-on-solid:     #FFFFFF;
    --accent-soft:         #E8F1FF;  /* fondo tenue: activo, seleccionado */
    --accent-soft-hover:   #D4E5FF;
    --accent-on-soft:      #0059D6;  /* texto sobre el fondo tenue (5,4:1): mismo azul que --text-link */
    --accent-ring:         rgba(0, 107, 255, .30);
    --text-link:           #0059D6;  /* 6,2:1 sobre blanco */
    --text-link-hover:     #004BB5;

    /* ---- Marca: azul profundo #0200FF ---- */
    --brand-deep:        #0200FF;    /* blanco encima: 8,6:1 */
    --brand-deep-text:   #FFFFFF;
    --brand-deep-soft:   rgba(255, 255, 255, .78);
    --brand-deep-muted:  rgba(255, 255, 255, .62);
    --brand-deep-hover:  rgba(255, 255, 255, .12);
    --brand-deep-active: rgba(255, 255, 255, .20);
    --brand-deep-rule:   rgba(255, 255, 255, .22);

    /* ---- Marco de la app: menú lateral claro + franja superior (2026-10-30) ----
       El contenido va en un panel blanco apoyado sobre este gris. Los íconos del
       menú usan --text-link, el mismo azul de todo el texto interactivo (2026-10-30:
       homologado con el sistema; antes eran --brand-deep, de otra familia de azul). */
    --marco:              #F1F3F8;
    --marco-hover:        rgba(255, 255, 255, .72);
    --marco-texto:        var(--text-tertiary);   /* etiquetas de grupo: 5,4:1 sobre --marco */
    --marco-sombra:       0 1px 2px rgba(19, 23, 34, .06), 0 4px 12px -4px rgba(19, 23, 34, .10);
    --panel-radio:        24px;

    /* ---- Semánticos (Clean OS) ---- */
    --danger:       #B3261E;
    --danger-soft:  #FCE8E6;
    --danger-text:  #B3261E;   /* un solo rojo de texto (6,5:1 blanco · 5,6:1 tenue) */
    --danger-solid: #B3261E;
    --warning:      #A84C07;
    --warning-soft: #FDF0DC;
    --warning-text: #A84C07;   /* un solo ámbar de texto (5,7:1 blanco · 5,0:1 tenue) */
    --success:      #17795E;
    --success-soft: #DDF3EB;
    --success-text: #17795E;   /* un solo verde de texto (5,3:1 blanco · 4,6:1 tenue) */
    --info:         #0B6E99;
    --info-soft:    #DCEEF7;
    --info-text:    #0B6E99;   /* un solo azul informativo (5,7:1 blanco · 4,8:1 tenue) */
    --vcto-vencido:          #DC2626;  /* «vcto N» del listado de tickets, ver .os-badge-celda */
    --vcto-por-vencer:       #F59E0B;
    --vcto-por-vencer-texto: #3B1D00;
    --urgente:      #FF0000;  /* texto de tickets urgentes en grillas (ver os-fila-urgente) */


    /* ---- Series de gráficos (Radzen): rampa azul monotonal ---- */
    --serie-1: #006BFF;
    --serie-2: #004BB5;  /* antes #0200FF puro, que vibraba junto al acento */
    --serie-3: #80B5FF;
    --serie-4: #0A2E8C;
    --serie-5: #BFD9FF;
    --serie-6: #4D97FF;
    /* Comparativo de gestión: los gráficos de actividades y de horas toman el tono de su bandeja
       (--info / --success); tono pleno = Incidentes, claro = Requerimientos (pedido 2026-11-05) */
    --serie-actividades-1: #0B6E99;
    --serie-actividades-2: #7DB8D3;
    --serie-horas-1: #17795E;
    --serie-horas-2: #82C2A9;
    --serie-resto: #98A2B8;

    /* ---- Escala compacta (2026-11-06, pedido del usuario: la app «como al 90 %» en todos los
       navegadores). Todos los tamaños bajan ~10 % desde aquí y desde la raíz (html 90 %, para lo que
       Bootstrap y Radzen miden en rem); NO se usa zoom CSS, que descuadra las posiciones calculadas
       de desplegables, gráficos y tooltips. La letra mínima se queda en 12 px (legibilidad, WCAG). ---- */

    /* ---- Tipografía (escala cerrada) ---- */
    --font-sans: "Instrument Sans", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    --text-h1-size: 29px; --text-h1-lh: 36px; --text-h1-ls: -0.02em;
    --text-h2-size: 25px; --text-h2-lh: 32px; --text-h2-ls: -0.018em;
    --text-h3-size: 22px; --text-h3-lh: 28px; --text-h3-ls: -0.014em;
    --text-h4-size: 18px; --text-h4-lh: 26px; --text-h4-ls: -0.01em;
    --text-body-size: 15px;  --text-body-lh: 22px;
    --text-small-size: 13px; --text-small-lh: 18px;
    --text-caption-size: 12px; --text-caption-lh: 16px;
    --text-overline-size: 12px; --text-overline-lh: 16px;
    --text-overline-ls: 0.06em;
    --text-kpi-size: 29px; --text-kpi-lh: 36px;
    --weight-regular: 400; --weight-medium: 500;
    --weight-semibold: 600; --weight-bold: 700;
    --icon-size-sm: 16px; --icon-size: 18px; --icon-size-lg: 22px;

    /* ---- Espaciado (NO continuo) ---- */
    --space-1: 4px;  --space-2: 7px;   --space-3: 11px;  --space-4: 14px;
    --space-6: 22px; --space-8: 29px;  --space-12: 43px; --space-16: 58px;
    --pad-page: 28px; --pad-card: 22px;
    --header-h: 50px; --sidebar-w-collapsed: 64px; --content-max: 1440px;
    --btn-h: 40px; --btn-h-sm: 32px; --btn-px: 18px;
    --input-h: 43px; --input-h-sm: 36px; --input-px: 14px; --input-py: 10px;

    /* ---- Radios, elevación, movimiento ---- */
    --radius: 11px; --radius-inner: 7px; --radius-xs: 6px; --radius-pill: 999px;
    --border-width: 1px; --border-width-strong: 2px;
    --shadow-md: 0 2px 8px -2px rgba(19,23,34,.10), 0 8px 24px -8px rgba(19,23,34,.14);
    --shadow-lg: 0 4px 12px -4px rgba(19,23,34,.12), 0 16px 40px -12px rgba(19,23,34,.16);
    --shadow-dialog: 0 8px 20px -6px rgba(19,23,34,.14), 0 32px 72px -16px rgba(19,23,34,.22);
    --overlay: rgba(19, 23, 34, .52);
    --focus-ring: 0 0 0 3px var(--accent-ring);
    --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;
    --ease-standard: cubic-bezier(.2, 0, .2, 1);
    --transition-control:
        background-color var(--dur-fast) var(--ease-standard),
        border-color     var(--dur-fast) var(--ease-standard),
        box-shadow       var(--dur-fast) var(--ease-standard),
        color            var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ====================================================================
   2. Base
   ==================================================================== */

:root {
    color-scheme: light;
    caret-color: var(--accent);
    scrollbar-width: thin;
    scrollbar-color: var(--border-input) transparent;
}

html, body {
    font-family: var(--font-sans);
}

/* Escala compacta: 1rem = 14,4 px (ver el bloque de tokens) */
html { font-size: 90%; }

body {
    font-size: var(--text-small-size);   /* 14 px es el tamaño de trabajo */
    line-height: var(--text-small-lh);
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); letter-spacing: var(--text-h4-ls); }
h5 { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
h6 { font-size: var(--text-small-size); line-height: var(--text-small-lh); }
h1:focus { outline: none; }

table td, table th, input[type="number"] { font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

::selection { background: var(--accent-soft-hover); color: var(--text-primary); }

/* ====================================================================
   3. Primitivas os-
   ==================================================================== */

.os-overline {
    margin: 0;
    font-size: var(--text-overline-size);
    line-height: var(--text-overline-lh);
    letter-spacing: var(--text-overline-ls);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.os-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal; font-style: normal;
    font-size: var(--icon-size); line-height: 1;
    letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

/* ---- Botón ---- */
.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h-sm);
    padding: 0 var(--btn-px);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--text-small-size);
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-control);
}
.os-btn-grande { height: var(--btn-h); }
.os-btn-bloque { width: 100%; }
.os-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-btn:disabled { opacity: .38; cursor: not-allowed; }
.os-btn .material-symbols-rounded { font-size: var(--icon-size-sm); }

.os-btn-primario { background: var(--accent-solid); color: var(--accent-on-solid); }
.os-btn-primario:hover  { background: var(--accent-solid-hover); color: var(--accent-on-solid); }
.os-btn-primario:active { background: var(--accent-solid-press); }

.os-btn-secundario {
    background: var(--surface);
    border-color: var(--border-input);
    color: var(--text-secondary);
}
.os-btn-secundario:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ---- Campo ---- */
.os-campo-grupo { margin-bottom: var(--space-4); }

.os-campo-etiqueta {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.os-campo {
    display: block;
    width: 100%;
    height: var(--input-h);
    padding: var(--input-py) var(--input-px);
    border: var(--border-width) solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-small-size);
    transition: var(--transition-control);
}
.os-campo::placeholder { color: var(--text-tertiary); opacity: 1; }
.os-campo:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.os-campo.invalid,
.os-campo[aria-invalid="true"] { outline: none; border-color: var(--danger); }

/* Campo con ícono al inicio (login): el ícono es decorativo y toma el color
   del acento cuando el campo tiene el foco. */
.os-campo-icono { position: relative; }
.os-campo-icono > .material-symbols-rounded {
    position: absolute;
    top: 50%;
    left: var(--input-px);
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: color var(--dur-fast) var(--ease-standard);
}
.os-campo-icono > .os-campo { padding-left: calc(var(--input-px) + 20px + var(--space-2)); }
.os-campo-icono:focus-within > .material-symbols-rounded { color: var(--text-link); }

/* Botón con flecha al final; la flecha avanza un poco al pasar el puntero */
.os-btn-flecha { gap: var(--space-2); }
.os-btn-flecha > .material-symbols-rounded { font-size: 20px; line-height: 1; transition: transform var(--dur-base) var(--ease-standard); }
.os-btn-flecha:hover > .material-symbols-rounded,
.os-btn-flecha:focus-visible > .material-symbols-rounded { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .os-btn-flecha > .material-symbols-rounded { transition: none; } }
.os-campo.valid.modified { outline: none; }

.os-campo-error,
.validation-message.os-campo-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--danger-text);
}

/* ---- Casilla ---- */
.os-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small-size);
    color: var(--text-secondary);
    cursor: pointer;
}
.os-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.os-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Aviso en línea ---- */
.os-aviso {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-inner);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
}
.os-aviso .material-symbols-rounded { font-size: var(--icon-size-sm); margin-top: 1px; }
.os-aviso-peligro { background: var(--danger-soft); color: var(--danger-text); }
.os-aviso-exito   { background: var(--success-soft); color: var(--success-text); }
.os-aviso-info    { background: var(--info-soft); color: var(--info-text); }
.os-pagina > .os-aviso { margin-bottom: 0; }

/* ====================================================================
   3b. Composición de página

   Regla única: UN nivel de contenedor. La página vive sobre el campo
   (gris); el encabezado no lleva caja; cada bloque de contenido es una
   sola hoja (blanca, filete de 1 px, radio 12). Nunca hoja dentro de hoja:
   la grilla de Radzen ya es una hoja, el fieldset de un formulario también.

     <div class="os-pagina">
       <header class="os-encabezado">
         <div><h1>Título</h1><p>Descripción</p></div>
         <div class="os-encabezado-acciones">…</div>
       </header>
       <RadzenDataGrid …/>            ← listado: la grilla es la hoja
       <RadzenFieldset Text="…">       ← formulario: cada fieldset es una hoja
         … <div class="os-acciones">…</div>
       </RadzenFieldset>
     </div>
   ==================================================================== */

.os-pagina {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}
.os-pagina > * { min-width: 0; }
.os-pagina > form:not(.os-filtros),
.os-pagina > .rz-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---- Encabezado: título + descripción a la izquierda, acciones a la derecha ---- */
.os-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}
.os-encabezado h1 {
    margin: 0;
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
    text-wrap: balance;
    /* Título del módulo en el azul de la app (pedido del usuario 2026-11-05): solo el de la
       página y el de las modales; los títulos de sección siguen en --heading-color */
    color: var(--text-link);
}
.rz-dialog-title { color: var(--text-link); }
.os-encabezado h1 .os-num,
.rz-dialog-title .os-num { color: var(--text-secondary); font-weight: var(--weight-medium); }
.os-encabezado p {
    margin: var(--space-1) 0 0;
    max-width: 72ch;
    color: var(--text-secondary);
}
.os-encabezado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.os-encabezado-acciones .os-btn,
.os-encabezado-acciones .rz-button { height: var(--btn-h-sm); }
a.os-btn:hover { text-decoration: none; }

/* ---- Hoja: el único contenedor ---- */
.os-hoja {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad-card);
    min-width: 0;
}
.os-hoja-titulo {
    margin: 0 0 var(--space-4);
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}
.os-hoja-titulo small {
    font-size: var(--text-small-size);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}
.os-hoja-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.os-hoja-cabecera .os-hoja-titulo { margin: 0; }

.os-hoja-cabecera .os-nota { margin: 0; }

/* Bloques dentro de una hoja: separados por espacio y un subtítulo, sin caja propia */
.os-bloques { display: flex; flex-direction: column; gap: var(--space-8); }
.os-bloque { min-width: 0; }
.os-bloque-titulo {
    margin: 0 0 var(--space-3);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}
.os-celda-grupo { color: var(--accent-on-soft); font-weight: var(--weight-semibold); }

/* Barras horizontales de porcentaje (distribución por departamento) */
.os-barras-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--text-caption-size);
    color: var(--text-secondary);
}
.os-barras { list-style: none; margin: 0; padding: 0; }
.os-barras li {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 56px minmax(0, 3fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--border);
}
.os-barras li:last-child { border-bottom: 0; }
.os-barras-nombre { color: var(--text-secondary); overflow-wrap: anywhere; }
.os-barras-valor { text-align: right; font-weight: var(--weight-semibold); color: var(--accent-on-soft); font-variant-numeric: tabular-nums; }
.os-barras-pista { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: hidden; }
.os-barras-relleno { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); }

/* Sección sin caja: título + contenido que ya trae su propia hoja (grilla) */
.os-seccion { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.os-seccion > .os-hoja-cabecera { margin: 0; }
.os-seccion > .rz-alert { margin: 0; }
.os-seccion > .os-hoja-titulo { margin: 0; }

/* Ficha de datos de solo lectura: etiqueta arriba, valor abajo, en columnas */
.os-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--space-6);
    margin: 0;
}
.os-datos > div { min-width: 0; }
.os-datos dt {
    margin-bottom: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.os-datos dd {
    margin: 0;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.os-datos-ancho { grid-column: 1 / -1; }
.os-texto-libre { white-space: pre-wrap; font-weight: var(--weight-regular) !important; max-width: 72ch; }

/* Campo + botón en la misma línea (p. ej. Motivo + guardar) */
.os-campo-con-accion { display: flex; gap: var(--space-2); align-items: center; max-width: 560px; }

/* Insignia junto al título de página */
.os-encabezado h1 .rz-badge { vertical-align: middle; margin-left: var(--space-2); }
/* Detalle de ticket: el título del caso es el h1 (azul, 24 px) y encima va la referencia
   «Ticket #N» con el número en negrita (pedido del usuario 2026-11-06) */
.os-encabezado-ticket .os-ticket-ref {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    margin: 0 0 var(--space-1);
    /* 19 px (pedido del usuario 2026-11-06): un poco más grande que el texto, sin competir con el h1 de 24 px */
    font-size: 17px; line-height: 24px;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.os-encabezado-ticket .os-ticket-ref strong { font-weight: var(--weight-bold, 700); color: var(--text-primary); }
.os-encabezado-ticket .os-ticket-ref .rz-badge { margin-left: var(--space-1); }
.os-encabezado-ticket h1 { max-width: 60ch; }
/* Total de horas del ticket, al lado de Ayuda (y horas de la actividad en su detalle): ficha tenue
   con ícono, cifra grande en hh:mm —mismo formato que el listado de tickets— y rótulo */
.os-ticket-horas {
    /* Una sola línea a la altura del botón Ayuda (pedido del usuario 2026-11-06: la ficha de dos
       renglones se veía muy grande a su lado): reloj · 65:25 · «h registradas» */
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--btn-h-sm);
    padding: 0 var(--space-3);
    border: var(--border-width) solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: var(--radius);  /* mismo radio y alto (36 px) que el botón Ayuda */
    background: var(--accent-soft);
    color: var(--text-link);
    white-space: nowrap;
}
.os-ticket-horas > .material-symbols-rounded { font-size: var(--icon-size-sm); }
.os-ticket-horas-texto { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.os-ticket-horas-valor {
    font-size: var(--text-body-size); line-height: var(--text-body-lh);
    font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.os-ticket-horas-rotulo { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: var(--weight-medium); color: var(--text-secondary); }
/* Editar Ticket: el título del caso a la vista, sobre el formulario */
.os-ticket-titulo-editar {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-inner);
    background: var(--surface-secondary);
    border-left: 3px solid var(--accent);
}
.os-ticket-titulo-rotulo {
    font-size: var(--text-caption-size); line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold); letter-spacing: var(--text-overline-ls);
    text-transform: uppercase; color: var(--text-secondary);
}
.os-ticket-titulo-editar p {
    margin: 0;
    font-size: var(--text-h4-size); line-height: var(--text-h4-lh); letter-spacing: var(--text-h4-ls);
    font-weight: var(--weight-semibold); color: var(--text-primary);
    text-wrap: balance;
}

/* Rejilla de bloques hermanos (gráfico + tabla, dos fieldsets lado a lado) */
.os-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--space-4);
    align-items: start;
}
/* Variante de a dos por fila como máximo (p. ej. los cuatro bloques de Configuración de Correo) */
.os-rejilla.os-rejilla-dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }

/* ---- Formulario dividido: datos a la izquierda (40 %), texto largo a la derecha (60 %) ----
   Para altas cuyo campo principal es un editor (Crear Ticket). Desde 1200 px
   las dos columnas llenan el alto de la ventana y el editor se estira con
   ella, con un mínimo; por debajo de ese alto la página desplaza lo justo.
   En pantallas más angostas todo vuelve a una sola columna.
     <div class="os-form-dividido">
       <div class="os-form-dividido-lateral"> fieldsets de datos </div>
       <RadzenFieldset class="os-form-dividido-principal"> editor .os-editor-elastico
   --dividido-reserva = margen superior del panel + relleno de .content + encabezado +
   barra de acciones + los dos gaps de .os-pagina (medido, no adivinado; sin barra
   superior desde 2026-11-03: eran 252 px con ella). */
.content:has(.os-form-dividido) { padding-bottom: var(--space-6); }
.os-form-dividido {
    --dividido-reserva: 201px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}
.os-form-dividido-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    container-type: inline-size;
}
.os-pagina .os-form-dividido .rz-fieldset-legend { margin-bottom: var(--space-4); }
.os-form-dividido .os-ayuda { margin: var(--space-2) 0 0; }
/* El expander de Radzen recorta: el «Requerido» bajo el último campo quedaba oculto */
.os-form-dividido .rz-fieldset .rz-fieldset-content-wrapper,
.os-form-dividido .rz-fieldset .rz-expander-content { overflow: visible; }
.os-form-dividido-principal { display: flex; flex-direction: column; }
/* Radzen anida el contenido en wrapper > expander > content: los tres en la cadena flex */
.os-form-dividido-principal .rz-fieldset-content-wrapper,
.os-form-dividido-principal .rz-expander-content,
.os-form-dividido-principal .rz-fieldset-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
.os-editor-elastico { height: 324px; }
/* Campo sobre el editor dentro del fieldset principal (Título en Crear Ticket): su validador va en
   posición absoluta, así que el margen deja sitio al mensaje «Requerido» */
.os-form-dividido-principal .os-campo-encabezado { position: relative; flex: none; margin-bottom: var(--space-6); }
@media (min-width: 1200px) {
    .os-form-dividido {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        min-height: max(420px, calc(100dvh - var(--dividido-reserva)));
    }
    /* El último bloque de la izquierda absorbe el sobrante: las dos columnas cierran a la misma altura */
    .os-form-dividido-lateral > :last-child { flex: 1; }
    /* Menos relleno vertical en las hojas: lo que se gana va al editor */
    .os-pagina .os-form-dividido .rz-fieldset { padding-block: var(--space-4); }
    .os-editor-elastico { flex: 1; height: auto; min-height: 270px; }
    /* El texto largo no agranda el bloque: la columna de la descripción no aporta altura
       a la fila (height: 0) y se estira hasta la de la izquierda (min-height: 100%); el
       sobrante se desplaza dentro del área de texto del editor. */
    .os-form-dividido-principal { height: 0; min-height: 100%; }
    .os-editor-elastico .rz-html-editor-content { min-height: 0; }
    /* Variante natural (detalle de ticket): la fila mide lo que la columna de
       datos; el editor la iguala y nunca baja de 360 px */
    .os-form-dividido-natural { min-height: 0; }
    .os-form-dividido-natural .os-editor-elastico { min-height: 324px; }
}

/* Campos de formulario apilados con ritmo fijo; .os-campos-fila reparte una
   fila entre varios campos (el último puede ser un interruptor, a su ancho) */
.os-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}
.os-campos > *, .os-campos-fila > * { position: relative; min-width: 0; }
/* Desplegables y listas en bloque: Radzen los dibuja en línea y el «Requerido»
   (absoluto) quedaba a la derecha del control, fuera de la vista. */
.os-campos .rz-dropdown, .os-campos .rz-listbox, .os-org-repr-lista .rz-listbox { display: flex; }
.os-campos-fila {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
    gap: var(--space-4);
}
/* Variante de dos campos iguales (p. ej. Fecha | Horas) */
.os-campos-fila.os-campos-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (max-width: 400px) {
    .os-campos-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
}

/* Formulario en dos bloques: datos (3) + lista de selección (2), p. ej. Avisos programados
   (datos | destinatarios). Una sola columna en pantallas angostas. */
.os-form-columnas {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 767.98px) {
    .os-form-columnas { grid-template-columns: minmax(0, 1fr); }
    .os-campos-fila.os-campos-par { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
}
/* Grupo de casillas en línea (días de la semana, reglas de copia): casilla + su etiqueta */
.os-casillas { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.os-casilla { display: inline-flex; align-items: center; gap: var(--space-2); }
.os-pagina .os-casilla > label,
.rz-dialog-content .os-casilla > label {
    margin: 0;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-primary);
    cursor: pointer;
}
/* Casilla como campo (etiqueta arriba), igual que un interruptor */
.os-interruptor > .rz-chkbox { align-self: flex-start; margin-block: auto; }
.os-campos > .os-aviso { margin: 0; }

/* Marca de campo obligatorio junto a la etiqueta. Va con aria-hidden y un
   «(obligatorio)» en os-solo-lector: el asterisco solo no lo anuncia bien un lector. */
.os-obligatorio {
    margin-left: 2px;
    color: var(--danger);
    font-weight: var(--weight-semibold);
}
.os-encabezado p .os-obligatorio { margin-left: 0; }

/* Interruptor como campo: etiqueta arriba, control a la altura de un input */
.os-interruptor { display: flex; flex-direction: column; }
.os-pagina .rz-fieldset .os-interruptor > .rz-label {
    margin-bottom: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
}
.os-interruptor > .rz-switch { align-self: flex-start; margin-block: auto; }
/* Interruptor con su etiqueta al lado, como opción de un campo (p. ej. «Mostrar todos los
   consultores» bajo «Asignado» en Editar Ticket) */
.os-interruptor-linea { display: flex; align-items: center; gap: var(--space-2); }
.os-pagina .rz-fieldset .os-interruptor-linea > .rz-label {
    margin: 0;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-secondary);
    cursor: pointer;
}

/* ---- Formularios: el fieldset ES la hoja; su leyenda es el título de sección ---- */
.os-pagina .rz-fieldset {
    margin: 0;
    min-width: 0;
    padding: var(--pad-card);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
}
.os-pagina .rz-fieldset-legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-6);
    padding: 0 0 var(--space-3);
    border-bottom: var(--border-width) solid var(--border);
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-primary);
}
.os-pagina .rz-fieldset-legend + * { clear: both; }
/* Título de paso de un formulario (Crear Ticket): ícono en ficha tenue + título + una línea que dice
   qué va en el bloque. Va en el HeaderTemplate del RadzenFieldset. */
.os-titulo-paso { display: flex; align-items: center; gap: var(--space-3); white-space: normal; }
.os-titulo-paso-icono {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    background: var(--accent-soft);
    color: var(--text-link);
    font-size: 20px;
}
.os-titulo-paso-texto { display: flex; flex-direction: column; min-width: 0; }
.os-titulo-paso-texto small {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}
.os-titulo-paso-opcional { font-weight: var(--weight-regular); color: var(--text-secondary); }
/* En una columna (< 1200 px) los pasos siguen el orden de llenado: Clasificación → Describa la
   solicitud → Adjunto; sin esto el Adjunto (columna lateral) quedaba antes de la descripción. */
@media (max-width: 1199.98px) {
    .os-form-pasos .os-form-dividido-lateral { display: contents; }
    /* display: contents anula el contenedor de la columna: cada bloque pasa a serlo, para que
       la fila Departamento / Asunto / Urgente siga partiéndose en pantallas angostas */
    .os-form-pasos .os-form-dividido-lateral > * { container-type: inline-size; }
    .os-form-pasos .os-form-dividido-lateral > :last-child { order: 2; }
    .os-form-pasos .os-form-dividido-principal { order: 1; }
}
/* Hoja destacada: el bloque principal de un formulario, con el filete en azul tenue */
.os-pagina .rz-fieldset.os-hoja-destacada,
.os-hoja.os-hoja-destacada {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--surface));
}
/* El contenido arranca alineado con el título de la sección */
.os-pagina .rz-fieldset .rz-fieldset-content,
.rz-dialog-content .rz-fieldset .rz-fieldset-content { padding: 0; }
/* Fieldset dentro de otro fieldset (sub-sección): solo un filete arriba */
.os-pagina .rz-fieldset .rz-fieldset {
    padding: var(--space-6) 0 0;
    border: 0;
    border-top: var(--border-width) solid var(--border);
    border-radius: 0;
    background: none;
}
.os-pagina .rz-fieldset .rz-fieldset .rz-fieldset-legend { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-4); }

/* Dentro de un diálogo el diálogo ya es la hoja: el fieldset se aplana. */
.rz-dialog-content .rz-fieldset,
.rz-dialog-content .os-pagina .rz-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.rz-dialog-content .rz-fieldset-legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-primary);
}
.rz-dialog-content .rz-fieldset-legend + * { clear: both; }
.rz-dialog-content .os-pagina { gap: var(--space-4); }
/* Nota al lado del título del diálogo (Editar Ticket: «* Creado el …») */
.os-dialogo-nota {
    margin-left: var(--space-3);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-regular);
    color: var(--text-secondary);
}
@media (max-width: 640px) {
    .os-dialogo-nota { display: block; margin: var(--space-1) 0 0; }
}
/* Cerrar del diálogo: área de clic de 32 px (era 20 × 25, bajo el mínimo de WCAG 2.5.8) */
.rz-dialog-titlebar-close {
    flex: none;
    justify-content: center;
    width: 32px;
    height: 32px;
    align-self: flex-start;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
}
.rz-dialog-titlebar-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.rz-dialog-titlebar-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Formulario dividido dentro de un diálogo (Editar Ticket): dos columnas desde 900 px y no
   desde 1200 — la modal mide hasta 1100 px, y en una columna los campos quedaban a todo el
   ancho y «Actualizar» fuera de vista. La descripción iguala el alto de la columna de datos. */
@media (min-width: 900px) {
    .rz-dialog-content .os-form-dividido { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .rz-dialog-content .os-form-dividido-lateral > :last-child { flex: 1; }
    .rz-dialog-content .os-form-dividido-principal { height: 0; min-height: 100%; }
    .rz-dialog-content .os-editor-elastico { flex: 1; height: auto; min-height: 270px; }
    .rz-dialog-content .os-editor-elastico .rz-html-editor-content { min-height: 0; }
}
/* Barra de acciones sin botones visibles (p. ej. detalle de una actividad cerrada): sin el filete vacío */
.rz-dialog-content .os-acciones:not(:has(> *)) { display: none; }
.os-cargando.os-cargando-dialogo {
    min-height: min(527px, 70dvh);
    align-items: center;
    justify-content: center;
}
/* Sus acciones quedan fijas al pie del diálogo mientras el contenido se desplaza */
.rz-dialog-content .os-pagina:has(.os-form-dividido) > .os-acciones:last-child {
    position: sticky;
    bottom: calc(-1 * var(--rz-dialog-content-padding));
    z-index: 1;
    margin-bottom: calc(-1 * var(--rz-dialog-content-padding));
    padding-bottom: var(--rz-dialog-content-padding);
    background: var(--surface);
}
.rz-dialog-content .os-encabezado h1 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); }

/* Etiquetas de campo sueltas (<label for=""> antes del control). Las
   etiquetas con for="chk…" acompañan a una casilla y quedan en línea. */
.rz-dialog-content label:not(.rz-label):not(.os-check):not(.form-check-label):is(:not([for]), [for=""]),
.os-pagina .rz-fieldset label:not(.rz-label):not(.os-check):not(.form-check-label):is(:not([for]), [for=""]),
.os-filtro > label,
.os-campo-etiqueta {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.os-pagina .rz-fieldset .row > [class*="col"] { position: relative; }
/* Campo de solo lectura: RadzenLabel (etiqueta) + RadzenText (valor) */
.os-pagina .rz-fieldset [class*="col"] > .rz-label:first-child {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.os-pagina .rz-fieldset [class*="col"] > .rz-label:first-child + .rz-text {
    margin: 0;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-primary);
}

/* La casilla de Radzen con class="form-control" heredaba el marco de un
   campo de texto: una caja vacía alrededor del check. */
.rz-chkbox.form-control {
    display: inline-block;
    width: var(--rz-checkbox-width);
    height: var(--rz-checkbox-height);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* ---- Barra de acciones al pie de un formulario ---- */
.os-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border);
}
.os-acciones .rz-button { min-width: 120px; margin: 0; }
/* Barra como columna Bootstrap (col-12): el filete no debe invadir el gutter */
.row > .os-acciones[class*="col"] {
    padding-inline: 0;
    margin-inline: calc(var(--bs-gutter-x) * .5);
    width: calc(100% - var(--bs-gutter-x));
}
/* Al pie de la página, fuera de una hoja: sin filete (el gap ya separa) */
.os-acciones-pie { margin-top: 0; padding-top: 0; border-top: 0; }
.os-acciones-fin { margin-left: auto; }

/* ---- Barra de filtros: una tira, no una tarjeta con tarjetas ---- */
.os-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    padding: var(--space-4) var(--pad-card);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
}
.os-filtros-plano { padding: 0; border: 0; background: none; }
.os-filtros-plano:not(:last-child) { margin-bottom: var(--space-4); }
.os-filtro-ancho { width: min(100%, 320px); }
/* Nota al pie de la tira de filtros: ocupa su propia línea */
.os-filtros-nota { flex-basis: 100%; margin: 0; }
.os-filtro {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.os-filtros .os-check,
.os-filtros .rz-selectbar { min-height: var(--btn-h-sm); align-items: center; }
.os-filtros-fin { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
/* Filtro sobre el resultado ya cargado (no vuelve a consultar): al final de la fila, separado por un
   filete de lo que ejecuta la consulta (fechas + Buscar/Cargar). Auditoría de horas, dashboard del
   Representante (2026-11-06). En pantallas angostas pasa a su propia línea, sin filete. */
.os-filtros-vista {
    margin-left: auto;
    display: flex; align-items: flex-end; gap: var(--space-4);
    padding-left: var(--space-4);
    border-left: var(--border-width) solid var(--border);
    min-height: var(--btn-h-sm);
}
@media (max-width: 767.98px) {
    .os-filtros-vista { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}
/* Casilla suelta en la tira (p. ej. «Solo asignados a mí»): centrada con el alto de los controles */
.os-filtros .os-filtros-casilla { min-height: var(--input-h-sm); }

/* ---- Indicadores (KPI): ícono + etiqueta + valor en el tono del indicador ---- */
.os-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-4);
}
.os-kpi {
    --tono: var(--accent);
    --tono-soft: var(--accent-soft);
    --tono-text: var(--accent-on-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-control);
}
.os-kpi-icono {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-inner);
    background: var(--tono-soft);
    color: var(--tono-text);
}
.os-kpi-icono .material-symbols-rounded {
    font-size: var(--icon-size-lg);
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}
.os-kpi-etiqueta {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}
.os-kpi-valor {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
    letter-spacing: var(--text-h2-ls);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--tono);
}
.os-kpi-valor small {
    font-size: var(--text-small-size);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    color: var(--text-secondary);
}
a.os-kpi:hover {
    text-decoration: none;
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: var(--border-input);
}
a.os-kpi:focus-visible { box-shadow: var(--focus-ring); }

.os-tono-acento  { --tono: var(--accent);  --tono-soft: var(--accent-soft);  --tono-text: var(--accent-on-soft); }
.os-tono-exito   { --tono: var(--success); --tono-soft: var(--success-soft); --tono-text: var(--success-text); }
.os-tono-info    { --tono: var(--info);    --tono-soft: var(--info-soft);    --tono-text: var(--info-text); }
.os-tono-aviso   { --tono: var(--warning); --tono-soft: var(--warning-soft); --tono-text: var(--warning-text); }
.os-tono-peligro { --tono: var(--danger);  --tono-soft: var(--danger-soft);  --tono-text: var(--danger-text); }
.os-tono-neutro  { --tono: var(--text-primary); --tono-soft: var(--surface-secondary); --tono-text: var(--text-secondary); }
.os-txt-exito   { color: var(--success-text); }
.os-txt-peligro { color: var(--danger-text); }

/* Dato breve al lado del título de una hoja (p. ej. "Vencidas 3") */
.os-dato-pie {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small-size);
    color: var(--text-secondary);
}
.os-dato-pie .material-symbols-rounded { font-size: var(--icon-size-sm); color: var(--text-tertiary); }

/* ---- Pestañas como navegación de página ----
   Sin caja alrededor: el contenido de cada pestaña ya trae sus hojas.
   La barra de pestañas se apoya sobre el campo con un filete inferior. */
.os-tabs-pagina.rz-tabview,
.os-tabs-pagina .rz-tabview {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.os-tabs-pagina > .rz-tabview-nav,
.os-tabs-pagina .rz-tabview-nav {
    background: transparent;
    border-bottom: var(--border-width) solid var(--border);
    gap: var(--space-1);
}
.os-tabs-pagina > .rz-tabview-panels,
.os-tabs-pagina > .rz-tabview-panels > .rz-tabview-panel {
    padding: var(--space-6) 0 0;
    background: transparent;
    border: 0;
}
/* En pantallas angostas la barra de pestañas se desplaza sola, sin empujar la página */
.rz-tabview.rz-tabview-top > .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.rz-tabview-nav::-webkit-scrollbar { display: none; }
.rz-tabview-nav li { flex: 0 0 auto; }
.rz-tabview { min-width: 0; max-width: 100%; }
/* Pestañas de página: se reparten todo el ancho en partes iguales (solo las del primer nivel,
   no las anidadas). Nunca más angostas que su texto: en pantallas chicas la barra se desplaza. */
.os-tabs-pagina > .rz-tabview-nav > li { flex: 1 1 0; min-width: max-content; }
.os-tabs-pagina > .rz-tabview-nav > li > a { justify-content: center; width: 100%; }

.rz-tabview-nav li .rz-tab-icon,
.rz-tabview-nav li .rzi { font-size: var(--icon-size-sm); }

/* Pestañas dentro de una hoja (dashboard de Representante/Consultor): el
   panel no suma marco propio, la hoja ya lo es. */
.os-hoja > .rz-tabview { background: transparent; border: 0; box-shadow: none; }
.os-hoja > .rz-tabview > .rz-tabview-panels { padding: var(--space-6) 0 0; background: transparent; }

/* ---- Alta de organización (página y modal) ----
   Datos de la organización a la izquierda, representantes a la derecha. En la
   modal los fieldsets van planos (ver .rz-dialog-content .rz-fieldset) y un
   filete vertical separa las dos columnas. */
.os-org-form {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}
/* Más aire entre filas: el «Requerido» (absoluto, bajo el campo) no debe tocar la etiqueta siguiente */
.os-org-form .os-campos { row-gap: var(--space-8); }
.os-org-form .os-campos-fila { row-gap: var(--space-8); }
.os-org-form .os-org-ayuda { margin: var(--space-6) 0 0; }
/* Ayuda al lado de un campo corto (Días de vencimiento): centrada con el control, no con la etiqueta */
.os-org-form .os-org-ayuda-campo { margin: 0; align-self: end; min-height: var(--input-h); display: flex; align-items: center; }
/* En una columna va justo debajo del campo, no a una fila de distancia */
@media (max-width: 767.98px) {
    .os-org-form .os-org-ayuda-campo { min-height: 0; margin-top: calc(var(--space-2) - var(--space-8)); }
}
.os-org-repr-cabecera {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.os-org-repr-cabecera .os-ayuda { margin: 0; }
.os-org-repr-cabecera .rz-button { flex: none; }
.os-org-repr-lista { position: relative; padding-bottom: var(--space-6); }
.os-org-repr-lista .rz-listbox { width: 100%; height: 272px; }
.rz-dialog-content .os-org-form .os-org-repr { padding-left: var(--space-6); border-left: var(--border-width) solid var(--border); }
@media (max-width: 767.98px) {
    .os-org-form { grid-template-columns: minmax(0, 1fr); }
    .rz-dialog-content .os-org-form .os-org-repr { padding: var(--space-6) 0 0; border-left: 0; border-top: var(--border-width) solid var(--border); }
}

/* ---- Módulos (índices de Configuración y Reportes) ----
   Tarjetas sueltas en rejilla: ícono sobre un fondo tintado, título,
   descripción y flecha al pie. Al pasar el puntero (o con el foco de
   teclado) la tarjeta se rellena con el azul de marca, como la tarjeta
   activa de la referencia. Cada tarjeta toma un tinte del ícono por
   posición (--modulo-tinta), solo decorativo: el texto no depende de él. */
.os-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
    gap: var(--space-6);
}
.os-modulo {
    --modulo-tinta: var(--accent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 232px;
    padding: var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgb(19 23 34 / .04), 0 12px 28px -18px rgb(19 23 34 / .16);
    color: var(--text-primary);
    text-decoration: none;
    transition:
        background-color var(--dur-base) var(--ease-standard),
        border-color     var(--dur-base) var(--ease-standard),
        box-shadow       var(--dur-base) var(--ease-standard),
        transform        var(--dur-base) var(--ease-standard);
}
.os-modulo:nth-child(4n+2) { --modulo-tinta: #0E8A8A; }
.os-modulo:nth-child(4n+3) { --modulo-tinta: #D4502F; }
.os-modulo:nth-child(4n+4) { --modulo-tinta: #6B4FD8; }
.os-modulo-icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-inner);
    background: color-mix(in srgb, var(--modulo-tinta) 12%, var(--surface));
    color: var(--modulo-tinta);
    transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.os-modulo-icono > .material-symbols-rounded { font-size: 22px; line-height: 1; }
.os-modulo-nombre {
    font-size: var(--text-h4-size, 18px);
    line-height: 1.3;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--accent) 60%, var(--text-primary));
    text-wrap: balance;
}
.os-modulo-desc {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-secondary);
}
.os-modulo-flecha {
    align-self: flex-end;
    margin-top: auto;
    font-size: 24px;
    line-height: 1;
    color: color-mix(in srgb, var(--accent) 60%, var(--text-primary));
    transition: transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.os-modulo:hover,
.os-modulo:focus-visible {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
    box-shadow: 0 2px 4px rgb(0 107 255 / .12), 0 18px 36px -16px rgb(0 107 255 / .55);
    color: var(--accent-on-solid);
    text-decoration: none;
    transform: translateY(-2px);
}
.os-modulo:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.os-modulo:hover .os-modulo-icono,
.os-modulo:focus-visible .os-modulo-icono { background: rgb(255 255 255 / .18); color: var(--accent-on-solid); }
.os-modulo:hover .os-modulo-nombre,
.os-modulo:focus-visible .os-modulo-nombre,
.os-modulo:hover .os-modulo-flecha,
.os-modulo:focus-visible .os-modulo-flecha { color: var(--accent-on-solid); }
.os-modulo:hover .os-modulo-desc,
.os-modulo:focus-visible .os-modulo-desc { color: var(--accent-on-solid); }
.os-modulo:hover .os-modulo-flecha,
.os-modulo:focus-visible .os-modulo-flecha { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .os-modulo, .os-modulo-flecha { transition: none; }
    .os-modulo:hover, .os-modulo:focus-visible { transform: none; }
    .os-modulo:hover .os-modulo-flecha, .os-modulo:focus-visible .os-modulo-flecha { transform: none; }
}

/* ---- Ayuda (página /Ayuda, panel lateral y botón «Ayuda») ----
   Contenido en Helpers/AyudaCatalogo.cs. En la página cada tema es un <details>
   dentro de una hoja partida por filetes; el cuerpo (pasos + «Tenga en cuenta»)
   va a dos columnas en escritorio y apilado en el panel lateral. */
.os-btn-ayuda > .material-symbols-rounded { font-size: 18px; line-height: 1; }
.os-ayuda-buscador { max-width: 640px; }
.os-ayuda-seccion { display: flex; flex-direction: column; gap: var(--space-3); }
.os-ayuda-seccion > .os-hoja-titulo { margin: 0; }
.os-ayuda-lista {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.os-ayuda-tema { --modulo-tinta: var(--accent); }
.os-ayuda-tema + .os-ayuda-tema { border-top: var(--border-width) solid var(--border); }
.os-ayuda-tema > summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.os-ayuda-tema > summary::-webkit-details-marker { display: none; }
.os-ayuda-tema > summary:hover { background: var(--surface-hover); }
.os-ayuda-tema > summary:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
.os-ayuda-tema .os-modulo-icono { margin: 0; }
.os-ayuda-tema-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.os-ayuda-tema-titulo { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-ayuda-tema-resumen { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--text-secondary); }
.os-ayuda-chevron { color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-standard); }
.os-ayuda-tema[open] > summary .os-ayuda-chevron { transform: rotate(180deg); }
.os-ayuda-tema[open] > summary { background: var(--surface-secondary); }
.os-ayuda-tema-contenido {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-6) calc(var(--space-6) + 40px + var(--space-4));
}
.os-ayuda-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-6);
}
.os-ayuda-panel .os-ayuda-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.os-ayuda-subtitulo {
    margin: 0 0 var(--space-3);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.os-ayuda-pasos, .os-ayuda-reglas {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-primary);
}
.os-ayuda-pasos { counter-reset: paso; }
.os-ayuda-pasos > li { position: relative; padding-left: 32px; counter-increment: paso; }
.os-ayuda-pasos > li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--text-link);
    font-size: var(--text-caption-size);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.os-ayuda-reglas > li { position: relative; padding-left: 18px; }
.os-ayuda-reglas > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.os-ayuda-enlace {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-1);
    font-size: var(--text-small-size);
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    text-decoration: none;
}
.os-ayuda-enlace > .material-symbols-rounded { font-size: 18px; transition: transform var(--dur-fast) var(--ease-standard); }
.os-ayuda-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.os-ayuda-enlace:hover > .material-symbols-rounded { transform: translateX(3px); }
.os-ayuda-panel { display: flex; flex-direction: column; gap: var(--space-6); }
.os-ayuda-resumen { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-secondary); }
.os-ayuda-lateral .rz-dialog-side-content { padding: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
    .os-ayuda-chevron, .os-ayuda-enlace > .material-symbols-rounded { transition: none; }
}
@media (max-width: 767.98px) {
    .os-ayuda-tema > summary { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
    .os-ayuda-tema-contenido { padding: var(--space-3) var(--space-4) var(--space-4); }
}

/* ---- Indicadores de gestión (Reports/Indicadores) ----
   Subnavegación entre los tres reportes, tarjetas de indicador con variación
   frente al período anterior y tooltip «i» (qué mide + fórmula). */
.os-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--border);
}
.os-subnav-enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: calc(var(--border-width) * -1);
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 2px solid transparent;
    font-size: var(--text-small-size);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    text-decoration: none;
}
.os-subnav-enlace > .material-symbols-rounded { font-size: 20px; }
.os-subnav-enlace:hover { color: var(--text-primary); text-decoration: none; }
.os-subnav-enlace.active { color: var(--text-link); border-bottom-color: var(--accent); }
.os-subnav-enlace:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; border-radius: var(--radius-xs); }

.os-indicadores-seccion { display: flex; flex-direction: column; gap: var(--space-3); }
.os-indicadores-seccion > .os-hoja-titulo { margin: 0; }
.os-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: var(--space-4);
}
.os-indicador {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
}
.os-indicador-cabecera { display: flex; align-items: center; gap: var(--space-1); }
.os-indicador-nombre { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: var(--weight-medium); color: var(--text-secondary); }
.os-indicador-valor {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
    letter-spacing: var(--text-h2-ls);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.os-indicador-valor small { margin-left: 0.25em; font-size: var(--text-small-size); font-weight: var(--weight-medium); letter-spacing: normal; color: var(--text-secondary); }
.os-indicador-variacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.os-indicador-variacion > .material-symbols-rounded { font-size: 18px; }
.os-indicador-anterior { font-weight: var(--weight-regular); color: var(--text-secondary); }
.os-variacion-mejora { color: var(--success-text); }
.os-variacion-empeora { color: var(--danger-text); }
.os-variacion-neutro { color: var(--text-secondary); }
.os-variacion-sube { color: var(--text-primary); }
.os-variacion-baja { color: var(--text-secondary); }

/* Título de hoja con su «i» al lado */
.os-hoja-cabecera-indicador { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
.os-hoja-cabecera-indicador > .os-hoja-titulo { margin: 0; }

/* Tooltip «i»: visible al pasar el puntero o con el foco del teclado */
.os-info { position: relative; display: inline-flex; vertical-align: middle; }
.os-info-boton {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-tertiary);
    cursor: help;
}
.os-info-boton > .material-symbols-rounded { font-size: 17px; }
.os-info-boton:hover, .os-info-boton:focus-visible { color: var(--text-link); background: var(--accent-soft); }
.os-info-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.os-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: -8px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: max-content;
    max-width: min(320px, 80vw);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-inner);
    background: var(--surface-inverse);
    box-shadow: var(--shadow-md);
    color: var(--text-inverse);
    font-size: var(--text-caption-size);
    line-height: 1.45;
    font-weight: var(--weight-regular);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    pointer-events: none;
}
/* Oculto con display:none y no con visibility: un tooltip invisible fuera del borde
   seguía contando para el ancho de la página y provocaba scroll horizontal en móvil */
.os-info:not(:hover):not(:focus-within) .os-tooltip { display: none; }
.os-info-derecha .os-tooltip { left: auto; right: -8px; }
.os-info:hover .os-tooltip, .os-info:focus-within .os-tooltip { animation: os-tooltip-entrar var(--dur-fast) var(--ease-standard); }
@keyframes os-tooltip-entrar { from { opacity: 0; transform: translateY(-2px); } }
.os-tooltip-formula {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: rgb(255 255 255 / .1);
    font-weight: var(--weight-medium);
}
.os-tooltip-formula::before { content: "Cálculo: "; color: rgb(255 255 255 / .7); font-weight: var(--weight-regular); }
.rz-grid-table thead th .os-info { margin-left: 2px; }

/* Antigüedad de abiertos: barra proporcional por tramo */
.os-antiguedad { display: flex; flex-direction: column; gap: var(--space-3); }
.os-antiguedad-tramo { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; align-items: center; gap: var(--space-4); font-size: var(--text-small-size); }
.os-antiguedad-etiqueta { color: var(--text-secondary); }
.os-antiguedad-barra { height: 10px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: hidden; }
.os-antiguedad-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--serie-3); }
.os-antiguedad-1 .os-antiguedad-barra > span { background: var(--serie-1); }
.os-antiguedad-2 .os-antiguedad-barra > span { background: var(--warning); }
.os-antiguedad-3 .os-antiguedad-barra > span { background: var(--danger); }
.os-antiguedad-valor { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.os-antiguedad-valor small { font-weight: var(--weight-regular); color: var(--text-secondary); }

/* Participación (% del total) y consumo de contrato en tablas */
.os-participacion { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.os-participacion-barra { width: 56px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-secondary); overflow: hidden; }
.os-participacion-barra > span { display: block; height: 100%; background: var(--accent); }
.os-consumo { font-size: var(--text-caption-size); font-weight: var(--weight-semibold); color: var(--success-text); }
.os-consumo-alerta { color: var(--warning-text); }
.os-consumo-excedido { color: var(--danger-text); }

/* Reparto del tiempo de resolución */
.os-reparto { display: flex; height: 16px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-secondary); }
.os-reparto > span { min-width: 0; flex-basis: 0; }
.os-reparto-acsys { background: var(--accent); }
.os-reparto-cliente { background: var(--warning); }
.os-reparto-pausa { background: var(--serie-resto); }
.os-reparto-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--text-small-size); }
.os-reparto-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.os-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
/* ---- Comparativo mensual (Reports/Indicadores/Comparativo) ---- */
.os-comparado { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.os-comparado-valor { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.os-comparado-anterior { font-size: var(--text-caption-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-fila-total > td { font-weight: var(--weight-semibold); background: var(--surface-hover); }
/* Pensado para 1440×900: el resumen (3 franjas de tarjetas) y la tendencia, lado a lado,
   entran en la primera pantalla; las tablas de detalle van debajo. */
/* Cada sección del resumen es una bandeja con un tono tenue de la paleta (decisión del usuario):
   Tickets = acento azul, Actividades = info (celeste), Horas = éxito (verde). Las tarjetas siguen
   blancas encima; el tono solo agrupa, no indica estado (la variación conserva sus colores). */
.os-comparativo .os-indicadores-seccion {
    --seccion-tono: var(--accent);
    --seccion-fondo: var(--accent-soft);
    --seccion-texto: var(--accent-on-soft);   /* tono legible sobre la bandeja (≥4,5:1) */
    padding: var(--space-2) var(--space-4) var(--space-3);
    background: color-mix(in srgb, var(--seccion-fondo) 70%, var(--surface));
    border: var(--border-width) solid color-mix(in srgb, var(--seccion-tono) 18%, var(--surface));
    border-radius: var(--radius);
}
.os-comparativo .os-seccion-actividades { --seccion-tono: var(--info); --seccion-fondo: var(--info-soft); --seccion-texto: var(--info); }
.os-comparativo .os-seccion-horas { --seccion-tono: var(--success); --seccion-fondo: var(--success-soft); --seccion-texto: var(--success); }
.os-comparativo .os-indicadores-seccion > .os-hoja-titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-body-size, 15px);
    line-height: 24px;
    font-weight: var(--weight-semibold);
    color: var(--seccion-texto);
}
/* Ícono de línea, sin recuadro: solo el trazo en el color de la sección */
.os-seccion-icono {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    color: var(--seccion-texto);
}
.os-comparativo .os-indicadores-seccion .os-indicador { border-color: color-mix(in srgb, var(--seccion-tono) 14%, var(--border)); }
.os-comparativo .os-indicadores-seccion { gap: var(--space-2); }
.os-comparativo .os-indicadores { gap: var(--space-3); }
.os-comparativo .os-indicador { gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.os-comparativo .os-indicador-valor { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); }
.os-comparativo .os-indicador-variacion { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.os-comparativo .os-indicador-anterior { overflow: hidden; text-overflow: ellipsis; }
/* Dos columnas (pedido del usuario 2026-11-03): indicadores a la izquierda, uno bajo el otro;
   los gráficos de tendencia a la derecha. Cada tabla y su gráfico van en la misma fila de la
   grilla y se estiran al más alto de los dos, así coinciden en alto (pedido 2026-11-04).
   Bajo 1100 px se apilan: cada tabla queda seguida de su gráfico. */
.os-comparativo-columnas {
    display: grid;
    /* Izquierda 40 % / derecha 60 % (tablas más angostas, pedido del usuario 2026-11-04) */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3) var(--space-4);
    align-items: stretch;
}
@media (max-width: 1100px) {
    .os-comparativo-columnas { grid-template-columns: minmax(0, 1fr); }
}
/* Bandejas de la columna izquierda: título compacto sobre su tabla */
.os-comparativo-columnas .os-indicadores-seccion { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3); gap: var(--space-2); }
/* La tabla ocupa el alto sobrante de la bandeja: sus filas se reparten el espacio */
.os-comparativo-columnas .os-tabla-indicadores { flex: 1 1 auto; }
.os-comparativo-columnas .os-indicadores-seccion > .os-hoja-titulo { font-size: var(--text-small-size); line-height: 22px; }
.os-comparativo-columnas .os-seccion-icono { font-size: 18px; }
/* Indicadores en tabla (TablaIndicadores, pedido del usuario 2026-11-03): hoja blanca dentro de la
   bandeja; nombre a la izquierda, cifras alineadas a la derecha en números tabulares */
.os-tabla-indicadores {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: var(--border-width) solid color-mix(in srgb, var(--seccion-tono, var(--accent)) 14%, var(--border));
    border-radius: var(--radius-inner);
    font-size: var(--text-small-size);
    font-variant-numeric: tabular-nums;
}
.os-tabla-indicadores th,
.os-tabla-indicadores td { padding: 5px var(--space-3); text-align: left; vertical-align: middle; }
.os-tabla-indicadores .os-num { text-align: right; white-space: nowrap; }
.os-tabla-indicadores { table-layout: fixed; }
.os-tabla-indicadores-col { width: 92px; }
/* Fechas exactas bajo el nombre de cada columna («01/01–30/09») */
.os-tabla-indicadores thead th small { display: block; font-weight: var(--weight-regular); color: var(--text-tertiary, var(--text-secondary)); white-space: nowrap; }
/* Celular: columnas numéricas más angostas y el nombre puede partirse */
@media (max-width: 640px) {
    .os-tabla-indicadores-col { width: 72px; }
    .os-tabla-indicadores th, .os-tabla-indicadores td { padding-inline: var(--space-2); }
    .os-tabla-indicadores-nombre { display: inline; }
}
.os-tabla-indicadores thead th {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    border-bottom: var(--border-width) solid var(--border);
}
.os-tabla-indicadores tbody tr + tr > * { border-top: var(--border-width) solid var(--border-subtle, var(--border)); }
.os-tabla-indicadores tbody th { font-weight: var(--weight-medium); color: var(--text-primary); }
.os-tabla-indicadores-nombre { display: inline-flex; align-items: center; gap: 2px; }
.os-tabla-indicadores tbody th small { display: block; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); font-weight: var(--weight-regular); color: var(--text-secondary); }
.os-tabla-indicadores-valor { font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-tabla-indicadores-anterior { color: var(--text-secondary); }
.os-tabla-indicadores-var { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-caption-size); font-weight: var(--weight-semibold); }
.os-tabla-indicadores-var > .material-symbols-rounded { font-size: 16px; }
.os-tabla-indicadores .os-info-boton { width: 20px; height: 20px; }
.os-tabla-indicadores .os-info-boton > .material-symbols-rounded { font-size: 15px; }
/* Gráfico de la derecha: crece hasta el alto de su tabla (graficos.js lo redimensiona solo) */
.os-comparativo-grafico { display: flex; flex-direction: column; min-width: 0; padding-block: var(--space-3); }
.os-comparativo-grafico .os-hoja-cabecera-indicador { margin-bottom: var(--space-2); }
/* Casilla «Valores» de cada gráfico, a la derecha de su título */
.os-grafico-valores { margin-left: auto; font-size: var(--text-caption-size); }
/* Subtítulo con las fechas que usa cada tabla, bajo su título */
.os-hoja-cabecera-indicador .os-nota { margin: 2px 0 0; }
/* 200 px: desde 2026-11-05 los tres llevan leyenda (series por tipo), que se come ~36 px; con 140 el
   eje de actividades se encimaba. La bandeja de la izquierda se estira a ese alto. */
.os-comparativo-grafico > .os-grafico { flex: 1 1 auto; height: auto !important; min-height: 200px; }
/* Títulos de columna completos en dos líneas en vez de cortados con «…» */
.os-comparativo .rz-grid-table thead th .rz-column-title,
.os-comparativo .rz-grid-table thead th .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}
/* Grupos de columnas Tickets / Actividades / Horas (pedido del usuario 2026-11-05): cada uno en el
   tono de su bandeja del panel de arriba, para que el ojo una la columna con su bloque. Banda tenue
   con filete de 2 px en el grupo; subcolumnas en el mismo tono, más claro; un divisor fino abre cada
   grupo en el cuerpo. El texto usa el tono «-text» del grupo (≥4,5:1 sobre su fondo). */
.os-col-tickets     { --grupo-tono: var(--accent);  --grupo-fondo: var(--accent-soft);  --grupo-texto: var(--accent-on-soft); }
.os-col-actividades { --grupo-tono: var(--info);    --grupo-fondo: var(--info-soft);    --grupo-texto: var(--info-text); }
.os-col-horas       { --grupo-tono: var(--success); --grupo-fondo: var(--success-soft); --grupo-texto: var(--success-text); }
.rz-grid-table thead th.os-col-grupo {
    padding-block: 7px;
    background: var(--grupo-fondo);
    border-left: 4px solid var(--surface);          /* respiro entre bandas */
    border-bottom: 2px solid var(--grupo-tono) !important;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.rz-grid-table thead th.os-col-grupo .rz-column-title-content {
    color: var(--grupo-texto);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--text-overline-ls);
}
.rz-grid-table thead th.os-col-sub { background: color-mix(in srgb, var(--grupo-fondo) 38%, var(--surface)); }
.rz-grid-table thead th.os-col-sub .rz-column-title-content { color: var(--grupo-texto); font-weight: var(--weight-medium); }
.rz-grid-table thead th.os-col-sub .rz-sortable-column-icon { color: var(--grupo-texto); opacity: .6; }
.rz-grid-table th.os-col-inicio,
.rz-grid-table td.os-col-inicio { border-left: 1px solid color-mix(in srgb, var(--grupo-tono) 30%, var(--border)); }
/* Celular: las subcolumnas (≈70 px) cortaban «TRABAJADOS»; más ancho (la grilla ya se desplaza de
   costado) y sin el ícono de orden mientras la columna no esté ordenada */
@media (max-width: 767.98px) {
    .os-comparativo .rz-data-grid .rz-grid-table { min-width: 980px; }
    .os-comparativo .rz-grid-table thead th.os-col-sub .rz-sortable-column-icon.rzi-sort { display: none; }
}

/* ---- Encabezado del listado de tickets (TicketList, pedido del usuario 2026-11-05) ----
   Franja tenue que separa títulos + filtros de las filas; títulos completos en dos líneas en vez de
   abreviados o cortados; las columnas sin filtro llevan un guion tenue en vez de un hueco; un filete
   fino cierra el encabezado. El aspecto de los filtros en sí es común a todas las grillas (abajo). */
.os-listado-tickets .rz-grid-table thead th { background: var(--surface-secondary); vertical-align: bottom; }
.os-listado-tickets .rz-grid-table thead tr:first-child th { padding-top: var(--space-3); padding-bottom: var(--space-1); }
.os-listado-tickets .rz-grid-table thead th .rz-column-title,
.os-listado-tickets .rz-grid-table thead th .rz-column-title-content {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}
.os-listado-tickets .rz-grid-table thead tr:last-child th {
    padding-top: var(--space-1);
    padding-bottom: var(--space-3);
    vertical-align: middle;
    border-bottom: var(--border-width) solid var(--border-strong) !important;
}
/* Filtros de columna de TODAS las grillas (pedido del usuario 2026-11-05): lupa y «Filtrar…»
   (FilterPlaceholder en cada columna filtrable), más bajos que un campo de formulario. Una columna
   nueva con filtro debe llevar FilterPlaceholder="Filtrar…" para el texto; la lupa es automática. */
.rz-cell-filter-label { height: auto !important; }
.rz-cell-filter .rz-textbox,
.rz-cell-filter .rz-numeric,
.rz-cell-filter .rz-dropdown {
    height: 34px;
    min-height: 34px;
    border-radius: var(--radius-xs);
    background-color: var(--surface);
    font-size: var(--text-small-size);
}
.rz-cell-filter .rz-textbox,
.rz-cell-filter .rz-numeric-input {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7489' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 15px;
}
.rz-cell-filter .rz-numeric { padding: 0; }
/* Radzen fija su propio relleno en el campo numérico: sin !important la lupa tapaba el texto */
.rz-cell-filter .rz-numeric-input { height: 100%; background-color: transparent; padding-left: 30px !important; }
/* Los números se escriben: sin flechas de subir / bajar en el filtro */
.rz-cell-filter .rz-numeric-button { display: none; }
.rz-cell-filter input::placeholder { color: var(--text-tertiary, var(--text-secondary)); }
/* Columna sin filtro: un guion tenue alineado con los campos, no un hueco */
.os-listado-tickets .rz-grid-table thead tr:last-child th:empty:not(:last-child)::after {
    content: "–" / "";
    display: block;
    padding-left: var(--space-2);
    color: var(--border-strong);
}

/* ---- Gráficos (Apache ECharts, Components/Shared/GraficoECharts) ---- */
.os-grafico { width: 100%; min-width: 0; }

/* ---- Panel de control (admin) ---- */
/* Tarjeta con «i»: si es enlace, el ::after del <a> cubre la tarjeta y el «i» queda encima */
/* El «i» siempre al borde derecho, alineado con la flecha de las tarjetas enlazadas */
.os-kpi-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: 22px; }
.os-kpi-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.os-kpi-enlazable { position: relative; }
.os-kpi-enlace { color: var(--text-secondary); text-decoration: none; }
.os-kpi-enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.os-kpi-enlace:hover { color: var(--text-secondary); text-decoration: none; }
.os-kpi-enlace:focus-visible { outline: none; }
.os-kpi-enlazable .os-info { z-index: 1; }
.os-kpi-enlazable:hover { background: var(--surface-hover); border-color: var(--border-input); }
.os-kpi-enlazable:has(.os-kpi-enlace:focus-visible) { box-shadow: var(--focus-ring); }
.os-kpi-flecha { font-size: var(--icon-size-sm); color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.os-kpi-enlazable:hover .os-kpi-flecha { color: var(--text-link); transform: translateX(2px); }
.os-titulo-nota { font-size: var(--text-small-size); font-weight: var(--weight-regular); color: var(--text-secondary); }

/* Requiere atención: listas cortas de casos */
.os-atencion > .os-hoja-titulo { margin-bottom: var(--space-2); }
.os-atencion > .rz-tabview > .rz-tabview-panels { padding-top: var(--space-2); }
.os-atencion .rz-tabview-panel { padding: 0; }
.os-atencion .os-nota { margin: var(--space-3) 0 var(--space-2); }
.os-atencion-lista { margin: 0; padding: 0; list-style: none; }
.os-atencion-lista > li + li { border-top: var(--border-width) solid var(--border); }
.os-atencion-fila {
    display: grid;
    grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 64px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-inner);
    color: var(--text-primary);
    font-size: var(--text-small-size);
    text-decoration: none;
}
.os-atencion-fila:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.os-atencion-fila:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-atencion-ref { color: var(--text-link); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.os-atencion-titulo, .os-atencion-dato { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-atencion-titulo { font-weight: var(--weight-medium); }
.os-atencion-dato { color: var(--text-secondary); }
.os-atencion-dias { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.os-atencion-dias small { font-weight: var(--weight-regular); color: var(--text-secondary); }
.os-atencion-dias.os-dias-peligro { color: var(--danger-text); }
.os-atencion-dias.os-dias-aviso { color: var(--warning-text); }
.os-atencion-mas {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
    border: 0; border-radius: var(--radius-inner); background: none;
    color: var(--text-link); font-size: var(--text-small-size); font-weight: var(--weight-semibold);
}
.os-atencion-mas:hover { background: var(--accent-soft); }
.os-atencion-mas:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-atencion-mas .material-symbols-rounded { font-size: var(--icon-size-sm); }

/* Barras apiladas por estatus (casos abiertos por grupo), en la escala del mayor */
.os-estatus-1 { background: var(--serie-3); }
.os-estatus-2 { background: var(--serie-1); }
.os-estatus-3 { background: var(--serie-4); }
.os-estatus-6 { background: var(--warning); }
.os-apilado-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--text-small-size); color: var(--text-secondary); }
.os-apilado-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.os-apilado { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.os-apilado-fila { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 40px; align-items: center; gap: var(--space-4); font-size: var(--text-small-size); }
.os-apilado-etiqueta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.os-apilado-pista { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-secondary); }
.os-apilado-pista > span { height: 100%; flex: none; }
.os-apilado-pista > span + span { box-shadow: inset 2px 0 0 var(--surface); }
.os-apilado-total { text-align: right; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* Panel de control del admin: lo que espera acción a la izquierda (más ancho), el reparto de lo
   abierto apilado a la derecha; en horas, los tres totales en paralelo y debajo los dos gráficos
   lado a lado (pedido del usuario 2026-11-06). Un solo intervalo (--space-4) entre todos los
   contenedores del panel, también entre el título de sección, los totales y los gráficos. */
.os-panel-dos {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: var(--space-4);
    align-items: start;
}
.os-panel-lateral { display: flex; flex-direction: column; gap: var(--space-4); }
/* Cabecera del panel: misma rejilla que .os-panel-dos, pero las tarjetas se estiran a la misma altura */
.os-panel-dos.os-panel-cabecera { align-items: stretch; }
.os-kpis.os-kpis-tickets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* Encuestas: dos cifras lado a lado y una barra que las compara (verde | rojo) */
.os-kpi-encuestas { justify-content: flex-start; }
.os-encuestas-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.os-encuestas-dato { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.os-encuestas-rotulo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--text-secondary);
}
.os-encuestas-rotulo .os-punto { background: var(--success); }
.os-encuestas-rotulo .os-punto.os-punto-peligro { background: var(--danger); }
.os-encuestas-rotulo small { font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.os-encuestas-barra {
    display: flex; height: 10px; margin-top: auto;
    border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-secondary);
}
.os-encuestas-barra > span { height: 100%; flex: none; }
.os-encuestas-barra > span + span { box-shadow: inset 2px 0 0 var(--surface); }
.os-encuestas-si { background: var(--success); }
.os-encuestas-no { background: var(--danger); }
.os-panel-horas-totales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.os-panel-horas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}
.os-panel-horas > .os-hoja { min-width: 0; }
.os-panel-admin .os-indicadores-seccion { gap: var(--space-4); }
.os-panel-admin .os-alerta-enlace { margin-top: var(--space-4); }
@media (max-width: 1099.98px) {
    .os-panel-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .os-panel-horas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559.98px) {
    .os-panel-horas-totales { grid-template-columns: minmax(0, 1fr); }
}

/* Aviso enlazado al pie de una hoja (p. ej. actividades vencidas) */
.os-alerta-enlace {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-6); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-inner); background: var(--danger-soft);
    color: var(--danger-text); font-size: var(--text-small-size); font-weight: var(--weight-semibold);
    text-decoration: none;
}
.os-alerta-enlace:hover { color: var(--danger-text); text-decoration: underline; }
.os-alerta-enlace:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.os-alerta-enlace .material-symbols-rounded { font-size: var(--icon-size-sm); }

@media (max-width: 767.98px) {
    .os-atencion-fila { grid-template-columns: 56px minmax(0, 1fr) 48px; row-gap: var(--space-1); }
    .os-atencion-dato { grid-column: 2; font-size: var(--text-caption-size); }
    .os-atencion-dias { grid-column: 3; grid-row: 1; }
    .os-apilado-fila { grid-template-columns: 96px minmax(0, 1fr) 32px; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .os-kpi-flecha { transition: none; } }

@media (prefers-reduced-motion: reduce) { .os-info .os-tooltip { animation: none; } }
@media (max-width: 767.98px) {
    .os-antiguedad-tramo { grid-template-columns: 96px minmax(0, 1fr) 84px; gap: var(--space-3); }
}

/* ---- Estados de carga y vacío ---- */
.os-cargando {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-6) 0;
    color: var(--text-secondary);
}
.os-cargando::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid var(--accent-soft-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: os-girar 700ms linear infinite;
}
@keyframes os-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .os-cargando::before { animation: none; } }

.os-vacio {
    margin: 0;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}

/* ---- Texto de apoyo bajo una pestaña o sobre una grilla ---- */
.os-nota {
    margin: 0 0 var(--space-4);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-secondary);
}

/* Selector de archivo nativo (InputFile) con el botón del sistema */
input[type="file"] {
    display: block;
    max-width: 100%;
    font-size: var(--text-small-size);
    color: var(--text-secondary);
}
input[type="file"]::file-selector-button {
    height: var(--btn-h-sm);
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-small-size);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: var(--transition-control);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
input[type="file"]:focus-visible { box-shadow: none; }
input[type="file"]:focus-visible::file-selector-button { box-shadow: var(--focus-ring); }

/* Ayuda bajo un campo (formatos permitidos, límites): informa, no alarma */
.os-ayuda,
.rz-text.os-ayuda {
    display: block;
    margin: var(--space-2) 0 0;
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--text-secondary);
}

/* ---- Celda doble (vistas compactas de grilla) ----
   Dato principal arriba, dato secundario debajo, más chico y en gris. */
.os-celda-doble { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
.os-celda-doble > :first-child { font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.os-celda-doble > strong { font-weight: var(--weight-semibold); }
.os-celda-sub {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* Celda de ticket (Nº / Título): el número (#16821, bold, enlazado) encabeza
   como ancla para recorrer la lista; el título es el texto que se lee. */
.os-celda-ticket { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
.os-celda-ticket .os-enlace-id {
    align-self: flex-start;
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    font-weight: var(--weight-bold);
    letter-spacing: 0.01em;
}
.os-celda-ticket > span { font-size: var(--text-small-size); line-height: var(--text-small-lh); overflow-wrap: anywhere; }

/* Fila urgente (RowRender): todo el texto en el rojo de urgencia. Es el rojo vivo
   que la app usó siempre (#FF0000), restaurado a pedido del usuario el 2026-10-23
   frente a --danger (#B3261E), que se percibía apagado. OJO: #FF0000 da 4,0:1 sobre
   blanco y no alcanza WCAG AA (4,5:1, requisito en PRODUCT.md); si hay que cumplir,
   el rojo vivo más cercano que pasa es #E00000 (5,0:1). Los datos secundarios
   (os-celda-sub) conservan su gris. */
.rz-data-grid tr.os-fila-urgente > td,
.rz-data-grid tr.os-fila-urgente > td .rz-cell-data,
.rz-data-grid tr.os-fila-urgente > td a { color: var(--urgente); }
.rz-data-grid tr.os-fila-urgente > td .os-celda-sub { color: var(--text-secondary); }

/* Texto de celda que baja de renglón en vez de cortarse con "…" (títulos,
   nombres): la celda de Radzen trae white-space: nowrap + ellipsis. */
.os-celda-texto { display: block; white-space: normal; overflow-wrap: anywhere; }

/* Renglón de actividad (listado de actividades y detalle del ticket):
   caso (organización · título, en gris y una sola línea) → actividad
   (#ticket-actividad · fecha) → su texto, el contenido principal, recortado a
   2 líneas (os-recortado) con «Ver más» → respuesta → adjuntos. */
.os-actividad { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; white-space: normal; }
.os-actividad-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--text-secondary);
}
.os-actividad-meta > * + *::before { content: "·"; margin-right: var(--space-2); color: var(--text-tertiary); }
.os-actividad-meta .os-enlace-id { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: var(--weight-bold); }
.os-actividad-caso {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--text-secondary);
}
.os-actividad-caso > span + span::before { content: "·"; margin: 0 var(--space-2); color: var(--text-tertiary); }
.os-actividad-caso > span:first-child:not(:last-child) { font-weight: var(--weight-medium); }
.os-actividad-texto {
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    color: var(--text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.os-actividad-principal { color: var(--text-primary); }
.os-recortado {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* La respuesta es un bloque propio: fondo de acento tenue, cabecera con
   ícono + «Respuesta» + fecha, y el texto en el color principal. */
.os-actividad-respuesta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-inner, 8px);
    background: var(--accent-soft);
}
.os-actividad-respuesta-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--text-secondary);
}
.os-actividad-respuesta-cabecera > .material-symbols-rounded { font-size: 16px; line-height: 1; color: var(--text-link); }
.os-actividad-respuesta-cabecera > strong { font-weight: var(--weight-semibold); color: var(--text-link); }
.os-actividad-respuesta-cabecera > strong + span::before { content: "·"; margin-right: var(--space-1); }
.os-actividad-respuesta > .os-actividad-texto { color: var(--text-primary); }
.os-ver-mas {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    cursor: pointer;
}
.os-ver-mas:hover { text-decoration: underline; text-underline-offset: 2px; }
.os-ver-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.os-actividad-archivos { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.os-actividad-archivos .rz-button { padding-inline: 0; }
.os-actividad-horas { display: inline-flex; align-items: center; gap: var(--space-2); }
.os-actividad-horas .rz-dropdown { width: 92px; }
/* Angosto: la tabla conserva un ancho legible y desplaza dentro de su hoja */
@media (max-width: 767.98px) { .rz-data-grid table:has(.os-actividad) { min-width: 760px; } }

/* Radzen 12 marca la casilla nativa del RadzenSwitch con rz-hidden-accessible (en la 7 era
   rz-helper-hidden-accessible) y el tema no la oculta: se veía un cuadrito de 13 px en la
   esquina de cada switch. Mismo patrón que os-solo-lector: oculta a la vista, no al lector. */
.rz-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Texto solo para lectores de pantalla */
.os-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Filtro que absorbe el espacio libre de la tira (p. ej. Título) */
.os-filtro-flexible { flex: 1 1 240px; }

/* Insignia dentro de una celda doble: no se estira a lo ancho */
.os-badge-celda { align-self: flex-start; }
/* Vencimiento en el listado de tickets (pedido del usuario 2026-11-06: el rojo vino y el marrón
   del sistema se veían apagados). Rojo vivo con blanco (4,8:1) y ámbar con texto casi negro (7,2:1):
   el ámbar no admite texto blanco (2,1:1). Solo aquí; el resto de insignias sigue con --danger/--warning. */
.os-badge-celda.rz-badge-danger  { background-color: var(--vcto-vencido); color: #FFFFFF; }
.os-badge-celda.rz-badge-warning { background-color: var(--vcto-por-vencer); color: var(--vcto-por-vencer-texto); }

/* Selector de vista: al final de la tira de filtros */
.os-filtro-vista { margin-left: auto; }

/* ---- Enlace de número de caso/actividad en grillas ---- */
.os-enlace-id,
.os-enlace-id.rz-link {
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    font-variant-numeric: tabular-nums;
}

/* ====================================================================
   4. Armazón (MainLayout / NavMenu viven en sus .razor.css; acá solo lo
      que tiene que alcanzar a contenido de las páginas)
   ==================================================================== */

/* El spinner de carga de página: el sistema prefiere esqueletos, pero
   mientras existan, que hablen en la paleta. */
.spinner {
    border: 4px solid var(--accent-soft);
    border-top: 4px solid var(--accent);
    width: 48px;
    height: 48px;
}

#blazor-error-ui {
    background: var(--warning-soft);
    color: var(--warning-text);
    box-shadow: none;
    border-top: var(--border-width) solid var(--warning);
    font-size: var(--text-small-size);
}

/* ====================================================================
   5. Bootstrap (capa de compatibilidad)
   ==================================================================== */

.btn {
    border-radius: var(--radius);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small-size);
    transition: var(--transition-control);
}
.btn:focus-visible, .btn:focus { box-shadow: var(--focus-ring); }

.btn-primary,
.btn-primary:focus {
    color: var(--accent-on-solid);
    background-color: var(--accent-solid) !important;
    border-color: var(--accent-solid);
}
.btn-primary:hover { background-color: var(--accent-solid-hover) !important; border-color: var(--accent-solid-hover); color: var(--accent-on-solid); }
.btn-primary:active { background-color: var(--accent-solid-press) !important; }

.btn-light,
.btn-light:focus {
    color: var(--accent-on-soft);
    background-color: var(--accent-soft) !important;
    border-color: transparent;
}
.btn-light:hover {
    color: var(--accent-on-soft);
    background-color: var(--accent-soft-hover) !important;
    border-color: transparent !important;
}

.btn-secondary, .btn-outline-secondary {
    color: var(--text-secondary);
    background-color: var(--surface);
    border-color: var(--border-input);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    color: var(--text-primary);
    background-color: var(--surface-hover);
    border-color: var(--border-strong);
}

.form-control, .form-select {
    border-color: var(--border-input);
    border-radius: var(--radius);
    font-size: var(--text-small-size);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.card {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--surface);
}
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

.table { --bs-table-bg: transparent; color: var(--text-primary); }
.table > thead > tr > th {
    background: var(--surface-secondary);
    font-size: var(--text-overline-size);
    letter-spacing: var(--text-overline-ls);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    border-bottom: var(--border-width-strong) solid var(--border-strong);
}
.table > :not(caption) > * > * { border-bottom-color: var(--border); }

.alert { border-radius: var(--radius-inner); border: 0; }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-text); }
.alert-success { background: var(--success-soft); color: var(--success-text); }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); }
.alert-info    { background: var(--info-soft);    color: var(--info-text); }

.text-muted { color: var(--text-secondary) !important; }
.text-primary { color: var(--text-link) !important; }
.bg-light { background-color: var(--surface-secondary) !important; }

.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { outline: none; border-color: var(--danger) !important; }
.validation-message {
    color: var(--danger-text);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    margin-top: var(--space-1);
}

/* ====================================================================
   6. Radzen (tema base: standard-base.css)
   ==================================================================== */

:root {
    --rz-text-font-family: var(--font-sans);
    --rz-body-font-size: var(--text-small-size);
    --rz-body-background-color: var(--background);
    --rz-base-background-color: var(--surface);

    /* Grises de Radzen -> neutros fríos del sistema */
    --rz-base-50:  #FAFBFD;
    --rz-base-100: var(--surface-secondary);
    --rz-base-200: var(--border);
    --rz-base-300: var(--border-input);
    --rz-base-400: #AEB5C4;
    --rz-base-500: #8A92A5;
    --rz-base-600: var(--text-tertiary);
    --rz-base-700: var(--text-secondary);
    --rz-base-800: #2A2F3D;
    --rz-base-900: var(--text-primary);

    --rz-text-title-color: var(--text-primary);
    --rz-text-color: var(--text-primary);
    --rz-text-secondary-color: var(--text-secondary);
    --rz-text-tertiary-color: var(--text-tertiary);

    /* Primario = acento */
    --rz-primary:          var(--accent-solid);
    --rz-primary-light:    #4D97FF;
    --rz-primary-lighter:  var(--accent-soft);
    --rz-primary-dark:     var(--accent-solid-hover);
    --rz-primary-darker:   var(--accent-solid-press);
    --rz-on-primary:         var(--accent-on-solid);
    --rz-on-primary-light:   var(--accent-on-solid);
    --rz-on-primary-lighter: var(--accent-on-soft);
    --rz-on-primary-dark:    var(--accent-on-solid);
    --rz-on-primary-darker:  var(--accent-on-solid);

    /* Secundario = el par tenue (fondo azul claro + texto azul) que la app
       ya usaba a mano en los botones "Cancelar"/"Volver". */
    --rz-secondary:          var(--accent-soft);
    --rz-secondary-light:    var(--accent-soft-hover);
    --rz-secondary-lighter:  var(--accent-soft);
    --rz-secondary-dark:     var(--accent-soft-hover);
    --rz-secondary-darker:   var(--accent-soft-hover);
    --rz-on-secondary:         var(--accent-on-soft);
    --rz-on-secondary-light:   var(--accent-on-soft);
    --rz-on-secondary-lighter: var(--accent-on-soft);
    --rz-on-secondary-dark:    var(--accent-on-soft);
    --rz-on-secondary-darker:  var(--accent-on-soft);

    /* Semánticos */
    --rz-danger: var(--danger-solid);  --rz-danger-light: #C9453D;
    --rz-danger-lighter: var(--danger-soft); --rz-danger-dark: #96201A; --rz-danger-darker: var(--danger-text);
    --rz-on-danger-lighter: var(--danger-text);
    --rz-success: var(--success);      --rz-success-light: #2A8C70;
    --rz-success-lighter: var(--success-soft); --rz-success-dark: var(--success-text); --rz-success-darker: var(--success-text);
    --rz-on-success-lighter: var(--success-text);
    --rz-warning: var(--warning);      --rz-warning-light: #C9661A;
    --rz-warning-lighter: var(--warning-soft); --rz-warning-dark: var(--warning-text); --rz-warning-darker: var(--warning-text);
    --rz-on-warning-lighter: var(--warning-text);
    --rz-info: var(--info);            --rz-info-light: #2683AD;
    --rz-info-lighter: var(--info-soft); --rz-info-dark: var(--info-text); --rz-info-darker: var(--info-text);
    --rz-on-info-lighter: var(--info-text);

    /* Series de gráficos */
    --rz-series-1: var(--serie-1);  --rz-series-2: var(--serie-2);
    --rz-series-3: var(--serie-3);  --rz-series-4: var(--serie-4);
    --rz-series-5: var(--serie-5);  --rz-series-6: var(--serie-6);
    --rz-series-7: var(--serie-resto); --rz-series-8: #C7CEDC;
    --rz-series-9: var(--serie-1);  --rz-series-10: var(--serie-2);
    --rz-series-11: var(--serie-3); --rz-series-12: var(--serie-4);

    /* Forma */
    --rz-border-radius: var(--radius-inner);
    --rz-button-border-radius: var(--radius);
    --rz-button-shadow: none;
    --rz-input-border-radius: var(--radius);
    --rz-card-border-radius: var(--radius);
    --rz-card-shadow: none;
    --rz-card-border: var(--border-width) solid var(--border);
    --rz-card-padding: var(--pad-card);
    --rz-panel-border-radius: var(--radius);
    --rz-fieldset-border-radius: var(--radius);
    --rz-fieldset-border: var(--border-width) solid var(--border);
    --rz-dialog-border-radius: var(--radius);
    --rz-dialog-shadow: var(--shadow-dialog);
    --rz-dialog-title-font-size: var(--text-h4-size);
    --rz-dialog-title-font-weight: var(--weight-semibold);
    --rz-notification-border-radius: var(--radius);
    --rz-badge-border-radius: var(--radius-pill);

    /* Tabla: cabecera overline sobre la superficie hundida */
    --rz-grid-header-background-color: var(--surface);
    --rz-grid-header-color: var(--text-secondary);
    --rz-grid-header-font-size: var(--text-overline-size);
    --rz-grid-header-font-weight: var(--weight-semibold);
    --rz-grid-header-text-transform: uppercase;
    /* Hoja con filetes de renglón: solo líneas horizontales finas, sin bandas
       alternas ni filetes verticales (la cuadrícula completa competía con el
       contenido y el gris azulado de las bandas se leía como "sucio"). */
    --rz-grid-cell-border: none;
    --rz-grid-right-cell-border: none;
    --rz-grid-bottom-cell-border: var(--border-width) solid var(--border);
    --rz-grid-header-cell-border: none;
    --rz-grid-stripe-background-color: var(--surface);
    --rz-grid-stripe-odd-background-color: var(--surface);
    --rz-grid-hover-background-color: var(--surface-hover);
    --rz-grid-selected-background-color: var(--accent-soft);
    --rz-grid-selected-color: var(--text-primary);
    --rz-grid-border: var(--border-width) solid var(--border);
    --rz-grid-border-radius: var(--radius);
    --rz-grid-shadow: none;

    /* Pestañas */
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: normal;
    --rz-tabs-tab-font-weight: var(--weight-semibold);
    --rz-tabs-tab-font-size: var(--text-small-size);
    --rz-tabs-tab-color: var(--text-secondary);
    --rz-tabs-tab-selected-color: var(--text-link);

    --rz-link-color: var(--text-link);
    --rz-link-hover-color: var(--text-link-hover);

    /* Iconografía única: Radzen trae Material Symbols Outlined; el sistema usa
       la variante Rounded (cargada arriba) en menú, indicadores y botones. */
    --rz-icon-font-family: "Material Symbols Rounded";
}

/* RadzenText: la escala de Material/Standard es de "display"; se baja a la
   escala cerrada del sistema. */
:root {
    --rz-text-h1-font-size: var(--text-h1-size); --rz-text-h1-font-weight: 600; --rz-text-h1-letter-spacing: var(--text-h1-ls); --rz-text-h1-line-height: var(--text-h1-lh);
    --rz-text-h2-font-size: var(--text-h2-size); --rz-text-h2-font-weight: 600; --rz-text-h2-letter-spacing: var(--text-h2-ls); --rz-text-h2-line-height: var(--text-h2-lh);
    --rz-text-h3-font-size: var(--text-h3-size); --rz-text-h3-font-weight: 600; --rz-text-h3-letter-spacing: var(--text-h3-ls); --rz-text-h3-line-height: var(--text-h3-lh);
    --rz-text-h4-font-size: var(--text-h4-size); --rz-text-h4-font-weight: 600; --rz-text-h4-letter-spacing: var(--text-h4-ls); --rz-text-h4-line-height: var(--text-h4-lh);
    --rz-text-h5-font-size: var(--text-body-size); --rz-text-h5-font-weight: 600; --rz-text-h5-line-height: var(--text-body-lh);
    --rz-text-h6-font-size: var(--text-small-size); --rz-text-h6-font-weight: 600; --rz-text-h6-line-height: var(--text-small-lh);
}

/* ---- Botones: sentence case, sin sombra, foco por fuera ---- */
.rz-button {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transition: var(--transition-control);
}
.rz-button:focus-visible { box-shadow: var(--focus-ring) !important; outline: none; }
.rz-button.rz-light {
    background-color: var(--surface);
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-input);
}
.rz-button.rz-light:not(.rz-state-disabled):hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
/* Borrar/rechazar: el par tenue, no el relleno pleno, como ya usaba la app */
.rz-button.rz-danger {
    background-color: var(--danger-soft);
    color: var(--danger-text);
}
.rz-button.rz-danger:not(.rz-state-disabled):hover {
    background-color: #F9D6D2;
    color: var(--danger-text);
}

/* Botones de fila (editar / eliminar en grillas): ícono sin relleno; el
   tono aparece al pasar el puntero. Menos ruido que un botón lleno por fila. */
.rz-button.rz-variant-text,
.rz-button.rz-variant-text.rz-danger,
.rz-button.rz-variant-text.rz-light {
    background-color: transparent;
    border-color: transparent;
}
.rz-button.rz-variant-text.rz-primary,
.rz-button.rz-variant-text.rz-primary.rz-shade-default { color: var(--text-link); }
.rz-button.rz-variant-text.rz-danger,
.rz-button.rz-variant-text.rz-danger.rz-shade-default { color: var(--danger-text); }
.rz-button.rz-variant-text.rz-light   { color: var(--text-secondary); }
.rz-button.rz-variant-text.rz-primary:not(.rz-state-disabled):hover { background-color: var(--accent-soft); color: var(--accent-on-soft); }
.rz-button.rz-variant-text.rz-danger:not(.rz-state-disabled):hover  { background-color: var(--danger-soft); color: var(--danger-text); }
.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover   { background-color: var(--surface-hover); color: var(--text-primary); }

/* ---- Campos: borde 1 px, radio 12, anillo de foco por fuera ---- */
.rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-datepicker > .rz-inputtext,
.rz-calendar > .rz-inputtext, .rz-multiselect, .rz-autocomplete, .rz-password, .rz-mask {
    border: var(--border-width) solid var(--border-input);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--text-small-size);
    transition: var(--transition-control);
}
.rz-textbox:hover, .rz-textarea:hover, .rz-dropdown:hover, .rz-numeric:hover,
.rz-multiselect:hover, .rz-autocomplete:hover {
    border-color: var(--text-tertiary);
}
.rz-textbox:focus, .rz-textarea:focus, .rz-dropdown.rz-state-focus, .rz-dropdown:focus-within,
.rz-numeric:focus-within, .rz-multiselect:focus-within, .rz-autocomplete:focus-within,
.rz-datepicker > .rz-inputtext:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
}
.rz-textbox.invalid, .rz-textarea.invalid { border-color: var(--danger) !important; }

.rz-label, .rz-form-field-label {
    font-size: var(--text-caption-size);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.rz-message-popup, .rz-messages-error, .rz-message.rz-messages-error {
    color: var(--danger-text);
    font-size: var(--text-caption-size);
}

.rz-chkbox-box.rz-state-active, .rz-radiobutton-box.rz-state-active {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ---- Placas: radio 12, borde 1 px, sin sombra ---- */
.rz-card, .rz-panel, .rz-fieldset {
    box-shadow: none;
}
.rz-card { border: var(--border-width) solid var(--border); }
.rz-fieldset-legend {
    font-size: var(--text-overline-size);
    letter-spacing: var(--text-overline-ls);
    text-transform: uppercase;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
}

/* ---- Tabla: la cabecera se cierra con filete de 2 px en tinta ---- */
.rz-data-grid, .rz-datatable { box-shadow: none; }
.rz-grid-table thead th {
    letter-spacing: var(--text-overline-ls);
    border-bottom: 0 !important;
}
/* Un solo cierre en tinta al final de la cabecera (debajo de los filtros si hay
   fila de filtros; antes había dos filetes gruesos seguidos). */
.rz-grid-table thead tr:last-child th {
    border-bottom: var(--border-width-strong) solid var(--border-strong) !important;
}
/* Fila de filtros: pegada a los títulos, con su aire abajo */
.rz-grid-table thead tr + tr th { padding-bottom: var(--space-2); }
.rz-grid-table thead th .rz-column-title,
.rz-grid-table thead th .rz-column-title-content { font-weight: var(--weight-semibold); }
.rz-grid-table td { font-variant-numeric: tabular-nums; }
.rz-pager { background: var(--surface); border-top: var(--border-width) solid var(--border); }
.rz-pager .rz-pager-page.rz-state-active,
.rz-pager-element.rz-state-active {
    background-color: var(--accent-soft);
    color: var(--accent-on-soft);
}

/* El h1 recibe el foco al navegar (FocusOnNavigate): no lleva anillo */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }

/* ---- Pestañas: subrayado de 2 px en el acento, sin fondo por pestaña ---- */
:root {
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-hover-background-color: var(--surface-hover);
    --rz-tabs-tab-selected-background-color: transparent;
    --rz-tabs-border: none;
}
.rz-tabview-nav { border-bottom: var(--border-width) solid var(--border); }
.rz-tabview-nav li.rz-tabview-selected { box-shadow: inset 0 -2px 0 var(--accent); }
.rz-tabview-nav li.rz-tabview-selected a, .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title { color: var(--text-link); }

/* ---- Insignias y selector segmentado ---- */
.rz-badge { font-weight: var(--weight-semibold); text-transform: none; letter-spacing: normal; }
.rz-selectbar .rz-button { border-color: var(--border-input); }
.rz-selectbar .rz-button.rz-state-active {
    background-color: var(--accent-soft);
    color: var(--accent-on-soft);
    border-color: var(--accent);
}

/* ---- Superposiciones: lo único que lleva sombra ---- */
.rz-dialog { box-shadow: var(--shadow-dialog); }
.rz-dialog-mask { background-color: var(--overlay); }
.rz-dialog-titlebar { border-bottom: var(--border-width) solid var(--border); }
.rz-dropdown-panel, .rz-popup, .rz-datepicker-popup, .rz-menu {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.rz-notification-item-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.rz-tooltip .rz-tooltip-content {
    background: var(--surface-inverse);
    color: var(--text-inverse);
    border-radius: var(--radius-inner);
    font-size: var(--text-caption-size);
}

/* ---- Editor HTML ---- */
.rz-html-editor {
    border: var(--border-width) solid var(--border-input);
    border-radius: var(--radius);
    box-shadow: none;
}
.rz-html-editor-toolbar { background: var(--surface-secondary); border-bottom: var(--border-width) solid var(--border); }
/* Sin esto el área de texto (flex: 1) se estira con el contenido en lugar de desplazarse:
   todo editor con alto fijo o elástico muestra scroll interno y no crece. */
.rz-html-editor-content { min-height: 0; }
/* Editor de solo lectura dentro de una hoja (descripción en el detalle del
   ticket): sin marco ni barra, el filete de la hoja ya lo enmarca y el texto
   arranca alineado con el título de la sección. */
.rz-html-editor.os-editor-lectura { border: 0; border-radius: 0; background: none; box-shadow: none; }
.os-editor-lectura .rz-html-editor-toolbar { display: none; }
.os-editor-lectura .rz-html-editor-content { padding: 0; background: none; }

/* ---- Gráficos: ejes y grilla en los filetes del sistema ---- */
.rz-chart { font-family: var(--font-sans); }
.rz-chart .rz-grid-line, .rz-chart .rz-axis line, .rz-chart .rz-tick line { stroke: var(--border); }
.rz-chart text { fill: var(--text-secondary); }

/* ====================================================================
   7. Login (GuestLayout + Account/Login)
   ==================================================================== */

.os-guest {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background: var(--background);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-small-size);
    line-height: var(--text-small-lh);
    -webkit-font-smoothing: antialiased;
}

/* La placa: radio 12, borde 1 px, sin sombra. Dos mitades: marca y hoja. */
.os-login {
    width: 100%;
    min-width: 0;
    max-width: 960px;
    display: grid;
    /* minmax(0, …): sin esto el ancho intrínseco de los <input> fija el
       mínimo de la columna y la placa desborda en pantallas angostas. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.os-login-marca {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    position: relative;
    isolation: isolate;
    /* Imagen de marca (BlueGlow); el color de fondo queda de respaldo mientras carga */
    background: url("../Image/LOGIN_PANEL_ONDAS.jpg") center / cover no-repeat, var(--brand-deep);
    color: var(--brand-deep-text);
}
/* Velo de arriba hacia abajo, muy tenue: oscurece apenas la zona del logo y
   del lema y se desvanece hacia el centro. Va DEBAJO del contenido (z-index -1
   dentro del isolate), así logo y textos quedan encima. */
.os-login-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(0 6 60 / .5) 0%, rgb(0 6 60 / .22) 30%, rgb(0 6 60 / 0) 60%),
        /* la base de la imagen es casi blanca: sin este velo el pie no se lee */
        linear-gradient(0deg, rgb(0 6 60 / .6) 0%, rgb(0 6 60 / .3) 18%, rgb(0 6 60 / 0) 38%);
    pointer-events: none;
}

/* Logotipo completo (isotipo + RHODUS) en blanco sobre el azul de marca */
.os-login-logo {
    display: block;
    width: 232px;
    max-width: 100%;
    height: auto;
}

.os-login-lema {
    margin: var(--space-4) 0 0;
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    color: var(--brand-deep-soft);
}

.os-login-pie {
    margin: auto 0 0;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--brand-deep-rule);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    color: var(--brand-deep-soft);
}
.os-login-pie strong { color: var(--brand-deep-text); font-weight: var(--weight-semibold); }

.os-login-hoja {
    padding: var(--space-12);
}

.os-login-hoja h1 {
    margin: var(--space-2) 0 var(--space-2);
}

.os-login-ayuda {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
}

.os-login-recordar { margin: var(--space-2) 0 var(--space-6); }

@media (max-width: 767.98px) {
    .os-login { grid-template-columns: minmax(0, 1fr); }
    .os-login-marca {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-6);
    }
    .os-login-logo { width: 148px; }
    .os-login-lema { margin-top: 0; font-size: var(--text-small-size); line-height: var(--text-small-lh); }
    .os-login-pie { display: none; }
    .os-login-hoja { padding: var(--space-6); }
}

/* ====================================================================
   8. Resumen de caso (diálogo desde el dashboard de Representante)
   ==================================================================== */
.os-resumen-caso { display: flex; flex-direction: column; gap: var(--space-6); min-width: min(100%, 560px); }
.os-resumen-caso header .os-hoja-titulo { margin-bottom: var(--space-1); }
.os-resumen-caso header .os-nota { margin: 0; }
.os-resumen-descripcion { max-height: 220px; overflow-y: auto; }
.os-resumen-caso .os-acciones { margin-top: 0; justify-content: flex-end; }

/* ====================================================================
   9. Responsive
   Escritorio primero (PRODUCT.md), pero todo módulo debe poder usarse
   en tableta y teléfono: se reacomoda, no se encoge.
     ≤ 767  teléfono  · una columna, filtros a dos por fila, grillas con
                         desplazamiento horizontal propio
     ≤ 479  teléfono angosto · filtros a una por fila
     coarse puntero táctil · áreas de toque de 40 px como mínimo
   ==================================================================== */

/* La grilla nunca empuja la página: desplaza dentro de su hoja */
.rz-data-grid, .rz-datatable { max-width: 100%; }
.rz-data-grid-data { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rz-html-editor { max-width: 100%; }
.rz-chart { max-width: 100%; }

@media (max-width: 767.98px) {
    .os-pagina { gap: var(--space-4); }
    .os-pagina > form:not(.os-filtros), .os-pagina > .rz-form { gap: var(--space-4); }

    /* Encabezado: la acción principal pasa abajo, a lo ancho */
    .os-encabezado { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .os-encabezado h1 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); }
    .os-encabezado-acciones > .os-btn,
    .os-encabezado-acciones > .rz-button { flex: 1 1 auto; height: var(--btn-h); }

    /* Hojas y secciones con menos relleno */
    .os-hoja,
    .os-pagina .rz-fieldset { padding: var(--space-4); }
    .os-pagina .rz-fieldset-legend { margin-bottom: var(--space-4); }
    .os-pagina .rz-fieldset .row > [class*="col"]:not(.os-acciones) { margin-bottom: var(--space-4); }

    /* Filtros: dos por fila; controles a lo ancho de su celda */
    .os-filtros { padding: var(--space-4); gap: var(--space-3); }
    .os-filtros > .os-filtro { flex: 1 1 calc(50% - var(--space-3)); min-width: 0; width: auto; }
    .os-filtros .os-filtro > .rz-datepicker,
    .os-filtros .os-filtro > .rz-dropdown,
    .os-filtros .os-filtro > .rz-numeric,
    .os-filtros .os-filtro > .rz-textbox,
    .os-filtros .os-filtro > .rz-selectbar { width: 100% !important; }
    .os-filtros .rz-selectbar { display: flex; }
    .os-filtros .rz-selectbar .rz-button { flex: 1 1 0; }
    .os-filtros > .rz-button { flex: 1 1 100%; height: var(--btn-h); }
    .os-filtros-fin { margin-left: 0; flex: 1 1 100%; }
    .os-filtros-fin > .rz-button { flex: 1 1 auto; }

    /* Barra de acciones: botones a lo ancho, el principal primero */
    .os-acciones > .rz-button { flex: 1 1 auto; min-height: var(--btn-h); }

    /* Indicadores: dos por fila, número un escalón más chico */
    .os-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .os-kpi { padding: var(--space-3) var(--space-4); }
    .os-kpi-valor { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }

    .os-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .os-modulos { gap: var(--space-4); }
    .os-modulo { min-height: 0; padding: var(--space-4) var(--space-4) var(--space-3); }

    /* Grillas: ancho mínimo legible + desplazamiento horizontal, en vez de
       aplastar las columnas hasta "SAP M…" */
    .rz-data-grid .rz-grid-table { min-width: 720px; }
    .rz-pager { flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
    .rz-pager-summary { flex-basis: 100%; text-align: center; }

    /* Diálogos: nunca más anchos que la pantalla */
    .rz-dialog {
        max-width: calc(100vw - var(--space-4)) !important;
        max-height: calc(100dvh - var(--space-4));
        overflow: auto;
    }
    .rz-dialog-content .row > [class*="col"] { margin-bottom: var(--space-3); }

    /* Editores de texto enriquecido: alto acotado a la pantalla */
    .rz-html-editor { max-height: 60vh; }

    .os-resumen-caso { min-width: 0; }
}

@media (max-width: 479.98px) {
    .os-filtros > .os-filtro { flex-basis: 100%; }
    .os-datos { grid-template-columns: minmax(0, 1fr); }
}

/* Entrada táctil: áreas de toque suficientes aunque el ícono sea chico */
@media (pointer: coarse) {
    .rz-button.rz-button-sm.rz-button-icon-only,
    .rz-button.rz-variant-text.rz-button-sm { min-width: 40px; min-height: 40px; }
    .rz-chkbox { min-width: 24px; min-height: 24px; }
}

/* Editor HTML: desplegable «Tamaño de letra» (pedido del usuario 2026-11-06). Radzen muestra cada
   opción con su propio tamaño (10–48 px) pero con un alto de renglón fijo de 20 px, y las grandes
   se montaban unas sobre otras. Cada fila toma ahora el alto de su texto, con las dos muestras mayores
   reducidas (32 → 27 px, 48 → 30 px, siguen creciendo) para que el panel no crezca de más; el disparador muestra «Tamaño» completo (venía a 70 px). */
.rz-editor-dropdown-panel { min-width: 120px; padding-block: var(--space-1); }
.rz-editor-dropdown-panel .rz-dropdown-item {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    line-height: 1.2;
    white-space: nowrap;
}
.rz-editor-dropdown-panel .rz-dropdown-item[style*="font-size: xx-large"] { font-size: 27px !important; }
.rz-editor-dropdown-panel .rz-dropdown-item[style*="font-size: xxx-large"] { font-size: 30px !important; }
.rz-html-editor-toolbar .rz-dropdown { width: auto !important; min-width: 104px; }
.rz-html-editor-toolbar .rz-dropdown-label { overflow: visible; text-overflow: clip; }

/* ---- Detalle de actividad (rediseño 2026-11-06, pedido del usuario) ----
   La actividad es una hoja: datos en franja, descripción a todo el ancho y adjuntos en lista.
   La respuesta va aparte: fondo tenue y filete izquierdo de color (verde = enviada,
   azul = escribiéndose), para leerse como la otra mitad de la conversación. */
.os-actividad-bloque { display: flex; flex-direction: column; gap: var(--space-6); }
.os-actividad-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.os-actividad-cabecera > .os-hoja-titulo,
.os-actividad-bloque > .os-hoja-titulo { margin: 0; }
/* Ficha de horas dentro de la franja de datos: más baja, para no descuadrar la fila */
.os-ticket-horas.os-ticket-horas-dato { min-height: 28px; }
/* Celda de la franja sin rótulo visible: la ficha se centra en la altura de las demás celdas */
.os-datos .os-datos-ficha { display: flex; align-items: center; height: 100%; }
.os-datos.os-datos-tira {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: var(--space-4) var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-inner);
    background: var(--surface-secondary);
}
.os-datos-tira .os-datos-doble { grid-column: span 2; }
.os-actividad-parte { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; position: relative; }
.os-actividad-rotulo {
    margin: 0;
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--text-overline-ls);
    text-transform: uppercase;
    color: var(--text-secondary);
}
/* Editor de solo lectura: alto según el texto, con tope y desplazamiento propio si es muy largo */
.rz-html-editor.os-editor-auto { height: auto; }
.os-editor-auto .rz-html-editor-content { min-height: 0; max-height: 420px; overflow: auto; font-size: var(--text-body-size); line-height: var(--text-body-lh); }
/* Editor editable dentro del detalle: alto fijo cómodo */
.rz-html-editor.os-editor-bloque { height: 252px; }

.os-adjuntos { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.os-adjuntos > li {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-small-size);
}
.os-adjuntos > li + li { border-top: var(--border-width) solid var(--border); }
.os-adjuntos > li > .material-symbols-rounded { font-size: var(--icon-size-sm); color: var(--text-tertiary); }
.os-adjuntos-nombre { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.os-adjuntos-vacio { margin: 0; font-size: var(--text-small-size); color: var(--text-tertiary); }

.os-respuesta {
    --respuesta-tono: var(--accent);
    --respuesta-tono-soft: var(--accent-soft);
    --respuesta-tono-texto: var(--text-link);
    display: flex; flex-direction: column; gap: var(--space-6);
    padding: var(--space-6);
    border: var(--border-width) solid var(--border);
    border-left: 4px solid var(--respuesta-tono);
    border-radius: var(--radius);
    background: var(--surface-secondary);
}
.os-respuesta-enviada { --respuesta-tono: var(--success); --respuesta-tono-soft: var(--success-soft); --respuesta-tono-texto: var(--success-text); }
.os-respuesta-cabecera { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.os-respuesta-icono {
    flex: none; display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: var(--radius-xs);
    background: var(--respuesta-tono-soft); color: var(--respuesta-tono-texto); font-size: 20px;
}
.os-respuesta-titulos { flex: 1; min-width: 180px; }
.os-respuesta-titulos h2 { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--weight-semibold); color: var(--text-primary); }
.os-respuesta-titulos p { margin: 0; font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--text-secondary); }
.os-respuesta-horas { width: 200px; max-width: 100%; }
.os-respuesta-texto {
    position: relative;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-inner);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
}
.os-respuesta-borrador .os-respuesta-texto { padding: 0; border: 0; background: none; }
.os-respuesta > .os-acciones:not(:has(> *)) { display: none; }
.os-respuesta > .os-acciones { margin: 0; padding: 0; border: 0; position: static; background: none; }
@media (max-width: 640px) {
    .os-respuesta { padding: var(--space-4); }
    .os-datos-tira .os-datos-doble { grid-column: 1 / -1; }
    .os-datos.os-datos-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-4); }
}

/* ---- Crear Actividad (pedido del usuario 2026-11-06) ----
   Tipo · Estatus · Fecha · Horas · «¿Requiere ayuda?» en una fila; el Departamento, debajo y solo
   si se pide ayuda. La fila se reparte sola: con las horas ocultas, los demás campos crecen. */
.os-actividad-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4) var(--space-4);
    align-items: end;
}
.os-actividad-campo { position: relative; display: flex; flex-direction: column; min-width: 0; }
.os-actividad-campo-fecha { min-width: 190px; }
.os-actividad-ayuda-control { display: flex; align-items: center; gap: var(--space-2); min-height: var(--btn-h-sm, 36px); font-size: var(--text-small-size); color: var(--text-secondary); }
.os-actividad-ayuda > label { white-space: normal; }
.os-actividad-departamento {
    position: relative;
    display: flex; flex-direction: column;
    max-width: 420px;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-inner);
    background: var(--accent-soft);
}
.os-actividad-departamento .os-ayuda { margin: var(--space-2) 0 0; }

/* Etiqueta flotante del menú lateral (la crea wwwroot/js/site.js) */
.os-nav-tip {
    position: fixed;
    z-index: 3000;
    transform: translateY(-50%);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-inner);
    background: var(--surface-inverse);
    color: var(--text-inverse);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}
.os-nav-tip[hidden] { display: none; }

/* Modales en pantallas angostas: el ancho fijo de DialogoFormulario (640–1100 px) se salía de la
   pantalla del teléfono; ahí ocupan el ancho disponible con 8 px de margen (2026-11-06) */
@media (max-width: 767.98px) {
    .rz-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px); left: 8px !important; }
}

.os-ticket-horas-rotulo strong { font-weight: var(--weight-bold); color: var(--text-primary); }

/* ---- Tira de búsqueda de los listados (Components/Shared/TiraBusqueda, 2026-11-06) ----
   Tres grupos en una fila: izquierda (estatus, fechas…) · centro (Buscar + «Filtros») · derecha
   (vista, totales). space-between reparte el espacio libre por igual, así que el centro queda a la
   misma distancia de los dos lados. «Filtros» abre una segunda línea separada por un filete. */
.os-tira-busqueda > .os-tira-fila {
    flex-basis: 100%;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}
.os-tira-lado { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); min-width: 0; }
.os-tira-lado:empty { display: none; }
.os-tira-centro { display: flex; align-items: flex-end; gap: var(--space-2); flex: 0 1 460px; min-width: 260px; }
.os-tira-centro .os-filtro-busqueda { flex: 1; min-width: 0; }
.os-tira-busqueda input.rz-textbox {
    height: var(--btn-h-sm);
    width: 100%;
    min-width: 0;
    padding: 0 var(--space-3);
    font-size: var(--text-small-size);
}
.os-tira-busqueda input.os-campo-busqueda {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7489' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 16px;
}
.os-tira-busqueda input::placeholder { color: var(--text-tertiary); }
.os-tira-busqueda .os-boton-filtros { flex: none; }
.os-tira-busqueda .os-boton-filtros-abierto { background: var(--accent-soft); color: var(--text-link); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.os-tira-busqueda .os-filtros-nota { margin-top: calc(-1 * var(--space-1)); }
.os-filtros-mas {
    flex-basis: 100%;
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) dashed var(--border);
}
.os-filtros-mas > .os-filtro { flex: 1 1 160px; max-width: 260px; }
.os-filtros-mas > .rz-button { margin-left: auto; }
.os-tira-total { align-self: center; font-size: var(--text-small-size); color: var(--text-secondary); white-space: nowrap; }
.os-tira-total strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 1099.98px) {
    .os-tira-busqueda > .os-tira-fila { flex-wrap: wrap; }
    .os-tira-centro { order: 3; flex: 1 1 100%; }
}
@media (max-width: 767.98px) {
    .os-tira-lado { flex: 1 1 100%; }
    /* En el teléfono el buscador va primero: es la acción principal de la tira */
    .os-tira-centro { min-width: 0; order: -1; }
    .os-filtros-mas > .os-filtro { flex-basis: calc(50% - var(--space-2)); max-width: none; }
}