/* Lo propio de la web de OPS, encima del tema de Duralux: estados con icono y texto, tablas que pasan a tarjetas, esqueleto de carga. */
:root {
  --ops-ok: #0b6b35; --ops-aviso: #8a4a00; --ops-fallo: #b3261e; --ops-gris: #475569;
  --ops-ok-fondo: #e3f5ea; --ops-aviso-fondo: #fdf0dc; --ops-fallo-fondo: #fde8e6; --ops-gris-fondo: #eef1f5;
}
html.app-skin-dark {
  --ops-ok: #6fdc9a; --ops-aviso: #f5b45b; --ops-fallo: #ff8f86; --ops-gris: #b6c2d2;
  --ops-ok-fondo: #12301f; --ops-aviso-fondo: #3a2810; --ops-fallo-fondo: #3d1a17; --ops-gris-fondo: #1f2a3a;
}

/* El tema de Duralux saca el texto atenuado muy claro: se oscurece hasta 4,5:1 sobre blanco (y se aclara en oscuro). */
.text-muted, .ops-tenue { color: #566377 !important; }
html.app-skin-dark .text-muted, html.app-skin-dark .ops-tenue { color: #a9b6c7 !important; }

/* Una pastilla de estado: icono + texto, nunca solo color. */
.ops-estado { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 1rem; font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ops-estado i { font-size: 1rem; }
.ops-ok { color: var(--ops-ok); background: var(--ops-ok-fondo); }
.ops-aviso { color: var(--ops-aviso); background: var(--ops-aviso-fondo); }
.ops-fallo { color: var(--ops-fallo); background: var(--ops-fallo-fondo); }
.ops-gris { color: var(--ops-gris); background: var(--ops-gris-fondo); }
.ops-texto-ok { color: var(--ops-ok); } .ops-texto-aviso { color: var(--ops-aviso); } .ops-texto-fallo { color: var(--ops-fallo); }

/* Avisos de una fuente caída o vacía dentro de una tarjeta. */
.ops-nota { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: .5rem; background: var(--ops-gris-fondo); color: var(--ops-gris); }
.ops-nota.ops-fallo { background: var(--ops-fallo-fondo); color: var(--ops-fallo); }
.ops-nota.ops-aviso { background: var(--ops-aviso-fondo); color: var(--ops-aviso); }
.ops-nota i { margin-top: .15rem; flex: none; }
.ops-nota > div { min-width: 0; overflow-wrap: anywhere; }

/* El semáforo de «Choques». */
.ops-semaforo { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: .75rem; font-size: 1.125rem; font-weight: 600; }
.ops-semaforo i { font-size: 2.25rem; flex: none; }
.ops-semaforo > div { min-width: 0; overflow-wrap: anywhere; }

/* La barra superior: nunca más alta de 80 px; el indicador «en vivo» no se parte. */
.ops-vivo { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--ops-ok); white-space: nowrap; }
.ops-vivo.ops-vivo-no { color: var(--ops-fallo); }
.ops-correo-menu { overflow-wrap: anywhere; }
.ops-correo { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .ops-correo { display: none; } .ops-vivo-texto { max-width: 7.5rem; white-space: normal; line-height: 1.1; font-size: .75rem; } }

/* El «?» de la cabecera de página. */
.ops-ayuda { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
.nxl-content .page-header { flex-wrap: wrap; gap: .5rem; }

/* Cuadros de órdenes copiables y texto que nunca ensancha la página. */
.ops-orden { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ops-orden code { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; background: var(--ops-gris-fondo); color: inherit; padding: .2rem .45rem; border-radius: .35rem; }
pre.ops-bloque { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ops-gris-fondo); color: inherit; padding: .75rem 1rem; border-radius: .5rem; margin: 0; }
.nxl-content, .card-body { overflow-wrap: anywhere; }
.nxl-content img { max-width: 100%; height: auto; }

/* Carga: HTMX pone htmx-request en lo que se está recargando; el aviso solo se ve si pasa de 300 ms. */
.ops-cargando { display: none; }
.htmx-request .ops-cargando, .htmx-request.ops-cargando { display: inline-flex; align-items: center; gap: .5rem; opacity: 0; animation: ops-aparece .01s linear 300ms forwards; }
.htmx-request > :not(.ops-cargando) { transition: opacity .2s linear .3s; opacity: .55; }
@keyframes ops-aparece { to { opacity: 1; } }
.ops-esqueleto { height: .9rem; border-radius: .3rem; background: var(--ops-gris-fondo); margin-bottom: .6rem; }

/* Tablas que pasan a tarjetas por debajo de 576 px (WCAG 1.4.10: ningún scroll horizontal de página). */
.ops-tabla { width: 100%; margin: 0; }
.ops-tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: #475569; white-space: nowrap; }
html.app-skin-dark .ops-tabla th { color: #b6c2d2; }
.ops-tabla td { vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .ops-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ops-tabla, .ops-tabla tbody, .ops-tabla tr, .ops-tabla td { display: block; width: 100%; }
  .ops-tabla tr { border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; }
  .ops-tabla td { border: 0; padding: .25rem 0; display: flex; gap: .75rem; justify-content: space-between; text-align: right; }
  .ops-tabla td::before { content: attr(data-etiqueta); flex: none; font-weight: 600; text-align: left; color: #475569; }
  html.app-skin-dark .ops-tabla td::before { color: #b6c2d2; }
  .ops-tabla td > * { min-width: 0; }
}

/* El manual. */
.ops-articulo { max-width: 52rem; }
.ops-articulo img { border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: .5rem; }
.ops-articulo table { width: 100%; display: block; overflow-x: auto; }
.ops-articulo pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ops-gris-fondo); padding: .75rem 1rem; border-radius: .5rem; }
.ops-articulo code { overflow-wrap: anywhere; }
.ops-indice a.active { font-weight: 700; }

/* Foco visible para quien navega con teclado. */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #3454d1; outline-offset: 2px; }
html.app-skin-dark a:focus-visible, html.app-skin-dark button:focus-visible, html.app-skin-dark select:focus-visible, html.app-skin-dark summary:focus-visible { outline-color: #8fb0ff; }

/* La barra superior de Duralux pone el texto en gris muy claro y no centra lo que se le añade. */
.nxl-header .header-wrapper { display: flex; align-items: center; min-height: 80px; }


/* El nombre de una sesión no se parte; las demás columnas se ajustan. */
.ops-nombre { white-space: nowrap; overflow-wrap: normal; }

/* Contraste (WCAG 1.4.3, 4,5:1) medido sobre el fondo pintado: el gris base del tema (#6b7885) daba 4,10:1 sobre el fondo de la
   página, el rosa de `code` 4,09:1 y, en oscuro, el correo de la barra 2,36:1. */
body { color: #334155; }
code { color: #a3175f; }
html.app-skin-dark code { color: #ff9cc9; }
.nxl-header .ops-correo { color: #283c50; }
html.app-skin-dark .nxl-header .ops-correo { color: #e2e8f0; }
.ops-orden code, pre.ops-bloque { color: inherit; }

/* «Cambios» en el móvil: la ruta del repo (larga) y su pastilla de estado se reparten en líneas, no se salen de la tarjeta. */
.ops-repo-cabecera { flex-wrap: wrap; gap: .25rem .75rem; }
.ops-repo-cabecera .card-title { min-width: 0; max-width: 100%; }
.ops-repo-cabecera code { overflow-wrap: anywhere; word-break: break-all; }

/* Objetivos táctiles (WCAG 2.5.8; HIG 44 pt): el tema deja los .btn-sm en 9 px MAYÚSCULAS y 26 px de alto, el botón del menú en 20 × 20
   y los enlaces de cabecera de tarjeta en 19 px. Letra legible en todas las anchuras; en el móvil, 44 px de alto como mínimo. */
.btn-sm { font-size: .8125rem; text-transform: none; white-space: nowrap; }
@media (max-width: 767.98px) {
  .btn-sm, #mobile-collapse { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .card-header a, .ops-ayuda, .ops-tabla td a, .footer a, .b-brand, .nxl-navbar .nxl-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .nxl-navbar .nxl-link { display: flex; }
}

/* «Hoy» ya dice arriba qué sesiones pasan del 70 % (tarjeta «Contexto»): la línea roja de la tabla, que sirve en «Sesiones», no se repite. */
#hoy .ops-linea-contexto { display: none; }