/* =====================================================================
   Reembolsos Médicos — estilo inspirado en Skydash (MIT, BootstrapDash),
   adaptado a la paleta y logo de la aplicación, con tema claro y oscuro.
   El tema lo define data-bs-theme="light|dark" en <html> (Bootstrap 5.3).
   ===================================================================== */

/* ---------- Tokens: tema claro ---------- */
:root, [data-bs-theme="light"] {
  --tinta: #17323c;            /* texto principal */
  --petroleo: #1d6e7a;         /* acción principal / marca */
  --petroleo-oscuro: #155560;
  --petroleo-fuerte: #1d6e7a;  /* fondos con texto blanco (botones, menú activo) */
  --marca-oscura: #17323c;     /* superficies oscuras fijas (barra de lote, bitácora, login) */
  --fondo: #f3f6f7;            /* fondo del contenido */
  --superficie: #ffffff;       /* tarjetas, menú y barra superior */
  --superficie-2: #f6f9f9;     /* zonas internas (calculado, hover) */
  --linea: #dde6e7;
  --tenue: #5d7179;
  --ambar: #b7791f;            /* nos toca actuar */
  --cielo: #2f6fa8;            /* esperando a la institución */
  --salvia: #3d7a55;           /* resuelto */
  --rojo: #a8443a;             /* rechazo / error */
  --sombra: 0 4px 18px rgba(23, 50, 60, .06);
  --sombra-barra: 0 2px 10px rgba(23, 50, 60, .06);

  /* Tarjetas de indicadores (estilo Skydash con la paleta propia) */
  --tarjeta-1: #1d6e7a;
  --tarjeta-2: #17323c;
  --tarjeta-3: #2f6fa8;
  --tarjeta-4: #c47e2b;
}

/* ---------- Tokens: tema oscuro ---------- */
[data-bs-theme="dark"] {
  --tinta: #e2edef;
  --petroleo: #2fa3b2;
  --petroleo-oscuro: #26899a;
  --petroleo-fuerte: #187682;
  --marca-oscura: #0b1518;
  --fondo: #0e181b;
  --superficie: #152328;
  --superficie-2: #1b2d33;
  --linea: #2a3e44;
  --tenue: #96adb3;
  --ambar: #e0a63f;
  --cielo: #6ea9e2;
  --salvia: #6dbb8a;
  --rojo: #e58276;
  --sombra: 0 4px 18px rgba(0, 0, 0, .35);
  --sombra-barra: 0 2px 10px rgba(0, 0, 0, .4);
  --tarjeta-1: #1f7f8c;
  --tarjeta-2: #23434e;
  --tarjeta-3: #2d68a0;
  --tarjeta-4: #a96d24;
  color-scheme: dark;
}

/* Fondos suaves de los estados, calculados para que funcionen en ambos temas */
:root {
  --ambar-suave: color-mix(in srgb, var(--ambar) 13%, var(--superficie));
  --cielo-suave: color-mix(in srgb, var(--cielo) 13%, var(--superficie));
  --salvia-suave: color-mix(in srgb, var(--salvia) 13%, var(--superficie));
  --rojo-suave: color-mix(in srgb, var(--rojo) 13%, var(--superficie));
  --petroleo-suave: color-mix(in srgb, var(--petroleo) 12%, var(--superficie));

  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --alto-barra: 64px;
  --ancho-menu: 240px;
  --ancho-menu-mini: 72px;
  --radio: 1.1rem;
}
:root, [data-bs-theme] {
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--fondo);
  --bs-emphasis-color: var(--tinta);
  --bs-secondary-color: var(--tenue);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-link-color: var(--petroleo);
  --bs-link-color-rgb: 29, 110, 122;
  --bs-link-hover-color: var(--petroleo-oscuro);
  --bs-border-color: var(--linea);
  --bs-border-radius: .55rem;
  --bs-primary-rgb: 29, 110, 122;
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 47, 163, 178; --bs-primary-rgb: 47, 163, 178; }

body { font-size: .95rem; line-height: 1.5; background: var(--fondo); color: var(--tinta); }
/* Enlaces sin subrayado; se subrayan al pasar el mouse (salvo botones, menú y tarjetas) */
a { text-decoration: none; }
.app-contenido a:not(.btn):not(.indicador):not(.paso):not(.dropdown-item):not(.list-group-item):hover { text-decoration: underline; }
.num, td.num, th.num, .monto { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
h1, .h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; }
h2, .h2 { font-size: 1.12rem; font-weight: 800; }
h3, .h3 { font-size: .98rem; font-weight: 700; }
.text-tenue { color: var(--tenue) !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--petroleo) 55%, transparent); outline-offset: 2px; }

/* =====================================================================
   Estructura: barra superior fija + menú lateral (contraíble)
   ===================================================================== */
.app-barra {
  position: fixed; inset: 0 0 auto 0; height: var(--alto-barra); z-index: 1030;
  display: flex; align-items: center; gap: .75rem; padding: 0 1rem 0 0;
  background: var(--superficie); box-shadow: var(--sombra-barra);
}
.app-marca { width: var(--ancho-menu); flex: none; display: flex; align-items: center; gap: .55rem; padding-left: 1.25rem;
  font-weight: 800; font-size: 1.15rem; color: var(--tinta); text-decoration: none; letter-spacing: -.01em; transition: width .2s; }
.app-marca .marca { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  background: var(--petroleo-fuerte); color: #fff; font-size: 1rem; }
.app-marca:hover { color: var(--tinta); }
.btn-icono { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; border: 0;
  background: transparent; color: var(--tenue); font-size: 1.2rem; position: relative; text-decoration: none; }
.btn-icono:hover, .btn-icono[aria-expanded="true"] { background: var(--superficie-2); color: var(--tinta); }
.btn-icono .badge { position: absolute; top: .15rem; right: .05rem; font-size: .62rem; background: var(--ambar); }
.app-buscar { flex: 1; max-width: 420px; position: relative; }
.app-buscar i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--tenue); }
.app-buscar input { padding-left: 2.3rem; border-radius: 2rem; background: var(--superficie-2); border-color: transparent; }
.app-buscar input:focus { background: var(--superficie); }
.app-usuario { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--tinta); padding: .25rem .4rem; border-radius: .8rem; }
.app-usuario:hover { background: var(--superficie-2); }
.avatar { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--petroleo-suave); color: var(--petroleo); font-weight: 800; font-size: .85rem; }

.app-menu {
  position: fixed; top: var(--alto-barra); bottom: 0; left: 0; width: var(--ancho-menu); z-index: 1020;
  background: var(--superficie); padding: 1rem .75rem 2rem; overflow-y: auto; transition: width .2s, transform .2s;
  box-shadow: var(--sombra-barra);
}
.app-menu .titulo-grupo { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); padding: 1rem .9rem .35rem; }
.app-menu .titulo-grupo:first-child { padding-top: .2rem; }
.app-menu .item { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem; border-radius: .75rem;
  color: var(--tenue); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; border: 0;
  background: transparent; width: 100%; text-align: left; }
.app-menu .item > i:first-child { font-size: 1.1rem; width: 1.2rem; text-align: center; flex: none; }
.app-menu .item .flecha { margin-left: auto; font-size: .7rem; transition: transform .2s; }
.app-menu .item[aria-expanded="true"] .flecha { transform: rotate(90deg); }
.app-menu .item:hover { background: var(--petroleo-suave); color: var(--petroleo); }
.app-menu .item.active { background: var(--petroleo-fuerte); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--petroleo) 35%, transparent); }
.app-menu .item .badge { margin-left: auto; background: var(--ambar); }
.app-menu .sub { list-style: none; margin: .1rem 0 .3rem; padding: 0 0 0 2.65rem; }
.app-menu .sub a { display: block; padding: .38rem .6rem; border-radius: .5rem; color: var(--tenue); text-decoration: none; font-size: .86rem; }
.app-menu .sub a:hover, .app-menu .sub a.active { color: var(--petroleo); background: var(--petroleo-suave); }

.app-contenido { margin-left: var(--ancho-menu); padding: calc(var(--alto-barra) + 1.75rem) 2rem 2rem; min-height: 100vh; transition: margin-left .2s; }
.app-contenido > .contenedor { max-width: 1400px; margin: 0 auto; }
.app-pie { color: var(--tenue); font-size: .8rem; text-align: center; padding: 1.5rem 0 0; }

/* Menú contraído a solo íconos (escritorio) */
@media (min-width: 992px) {
  .menu-mini .app-menu { width: var(--ancho-menu-mini); padding-inline: .6rem; overflow: visible; }
  .menu-mini .app-marca { width: var(--ancho-menu-mini); padding-left: 1.2rem; }
  .menu-mini .app-marca .texto, .menu-mini .app-menu .titulo-grupo, .menu-mini .app-menu .item > span,
  .menu-mini .app-menu .item .flecha, .menu-mini .app-menu .item .badge { display: none; }
  .menu-mini .app-menu .item { justify-content: center; padding-inline: 0; position: relative; }
  .menu-mini .app-menu .grupo { position: relative; }
  .menu-mini .app-menu .sub { display: none !important; }
  /* En modo mini, el submenú aparece al pasar el mouse */
  .menu-mini .app-menu .grupo:hover .sub, .menu-mini .app-menu .grupo:focus-within .sub {
    display: block !important; position: absolute; left: calc(100% + .4rem); top: 0; width: 220px; padding: .5rem;
    background: var(--superficie); border-radius: .8rem; box-shadow: var(--sombra); border: 1px solid var(--linea); z-index: 10; }
  .menu-mini .app-contenido { margin-left: var(--ancho-menu-mini); }
}

/* Móvil: el menú se abre como panel lateral */
@media (max-width: 991.98px) {
  .app-marca { width: auto; padding-left: .75rem; }
  .app-buscar { display: none; }
  .app-menu { transform: translateX(-105%); width: min(280px, 85vw); }
  .menu-abierto .app-menu { transform: none; }
  .menu-abierto .app-velo { position: fixed; inset: var(--alto-barra) 0 0 0; background: rgba(5, 15, 18, .45); z-index: 1010; }
  .app-contenido { margin-left: 0; padding: calc(var(--alto-barra) + 1.25rem) 1rem 1.5rem; }
}

/* =====================================================================
   Componentes
   ===================================================================== */
.btn { border-radius: .6rem; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--petroleo-fuerte); --bs-btn-border-color: var(--petroleo-fuerte); --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--petroleo-fuerte) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--petroleo-fuerte) 85%, #000);
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--petroleo-fuerte) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--petroleo-fuerte) 78%, #000);
  --bs-btn-disabled-bg: var(--petroleo-fuerte); --bs-btn-disabled-border-color: var(--petroleo-fuerte); }
.btn-outline-primary { --bs-btn-color: var(--petroleo); --bs-btn-border-color: var(--petroleo);
  --bs-btn-hover-bg: var(--petroleo-fuerte); --bs-btn-hover-border-color: var(--petroleo-fuerte); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--petroleo-oscuro); --bs-btn-active-color: #fff; }

/* Paneles = tarjetas Skydash: sin borde, muy redondeadas, sombra suave */
.panel { background: var(--superficie); border: 0; border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra); }
[data-bs-theme="dark"] .panel { border: 1px solid var(--linea); }
.panel + .panel { margin-top: 1.25rem; }
.panel-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; margin-bottom: 1rem; }
.panel-titulo h2 { margin: 0; }
.encabezado { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.encabezado h1 { margin: 0; }
.encabezado p { margin: .15rem 0 0; color: var(--tenue); }
.dropdown-menu { border-radius: .8rem; border-color: var(--linea); box-shadow: var(--sombra); --bs-dropdown-bg: var(--superficie);
  --bs-dropdown-link-active-bg: var(--petroleo); }
.form-control, .form-select { border-radius: .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--petroleo); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--petroleo) 22%, transparent); }
.form-check-input:checked { background-color: var(--petroleo); border-color: var(--petroleo); }
.alert { border-radius: .8rem; }
.progress { --bs-progress-bg: var(--superficie-2); }

/* Tablas al estilo Skydash: encabezado en mayúsculas tenues, sin bordes verticales */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--superficie-2); --bs-table-color: var(--tinta);
  --bs-table-hover-color: var(--tinta); margin-bottom: 0; }
.table > thead th { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue);
  border-bottom-width: 1px; white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem; }
.table > tbody td { vertical-align: middle; padding-top: .65rem; padding-bottom: .65rem; }
.table tfoot td { font-weight: 800; border-top: 2px solid var(--tinta); }
.id-interno { font-weight: 700; letter-spacing: .01em; }
.fila-link { cursor: pointer; }

/* Etiquetas de estado */
.estado { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 1rem;
  font-size: .76rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.estado::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.estado-pend-isapre, .estado-pend-seguro { color: var(--ambar); background: var(--ambar-suave); }
/* Faltan documentos: también nos toca, pero antes de poder hacer el trámite (borde punteado = incompleto) */
.estado-pend-docs { color: var(--ambar); background: var(--ambar-suave); border: 1px dashed var(--ambar); }
.estado-ing-isapre, .estado-ing-seguro { color: var(--cielo); background: var(--cielo-suave); }
.estado-fin { color: var(--salvia); background: var(--salvia-suave); }
.estado-rechazo { color: var(--rojo); background: var(--rojo-suave); }

/* =====================================================================
   Inicio: tarjetas de indicadores (estilo Skydash) y recorrido
   ===================================================================== */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.indicador { border-radius: var(--radio); padding: 1.35rem 1.5rem; color: #fff; text-decoration: none; display: block;
  position: relative; overflow: hidden; box-shadow: var(--sombra); transition: transform .15s; }
.indicador:hover { color: #fff; transform: translateY(-2px); }
.indicador::after { content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 7rem; height: 7rem; border-radius: 50%;
  background: rgba(255, 255, 255, .09); }
.indicador .etiqueta { font-size: .85rem; font-weight: 700; opacity: .92; }
.indicador .valor { display: block; font-size: 1.85rem; font-weight: 800; line-height: 1.15; margin: .55rem 0 .2rem; font-variant-numeric: tabular-nums; }
.indicador .detalle { font-size: .8rem; opacity: .85; }
.indicador i { position: absolute; right: 1.25rem; bottom: 1rem; font-size: 1.6rem; opacity: .35; }
.indicador.i1 { background: var(--tarjeta-1); } .indicador.i2 { background: var(--tarjeta-2); }
.indicador.i3 { background: var(--tarjeta-3); } .indicador.i4 { background: var(--tarjeta-4); }

/* Recorrido: Atención → Isapre → Seguro → Finalizado. Ámbar = nos toca; azul = esperando. */
.recorrido { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: paso; }
.recorrido .paso { position: relative; padding: .9rem .75rem .8rem 0; text-decoration: none; color: inherit; }
.recorrido .paso::before { content: ""; position: absolute; top: 1.35rem; left: 1.9rem; right: 0; height: 3px; background: var(--linea); }
.recorrido .paso:last-child::before { display: none; }
.recorrido .punto { position: relative; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; border: 3px solid var(--linea); background: var(--superficie); font-weight: 800; font-size: .9rem; }
.recorrido .nombre { display: block; margin-top: .45rem; font-weight: 700; font-size: .9rem; }
.recorrido .detalle { display: block; color: var(--tenue); font-size: .8rem; }
.recorrido .cifra { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.recorrido .hecho .punto { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.recorrido .hecho::before { background: var(--salvia); }
.recorrido .actuar .punto { border-color: var(--ambar); color: var(--ambar); }
.recorrido .esperar .punto { border-color: var(--cielo); color: var(--cielo); }
.recorrido a.paso:hover .nombre { text-decoration: underline; }
.recorrido .actuar .cifra { color: var(--ambar); }
.recorrido .esperar .cifra { color: var(--cielo); }
.recorrido .hecho .cifra { color: var(--salvia); }
@media (max-width: 767.98px) {
  .recorrido { grid-template-columns: 1fr; }
  .recorrido .paso { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; padding: .5rem 0; }
  .recorrido .paso::before { top: 2.6rem; bottom: -.5rem; left: 1rem; right: auto; width: 3px; height: auto; }
  .recorrido .nombre { margin: 0; }
  .recorrido .cifra { margin: 0; font-size: 1.4rem; }
}

/* Cifras del año */
.cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.cuentas dt { font-size: .72rem; font-weight: 800; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.cuentas dd { margin: 0; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--petroleo); }
.cuentas .menos { color: var(--salvia); }
.barra-recuperado { height: .6rem; border-radius: 1rem; background: var(--superficie-2); overflow: hidden; display: flex; }
.barra-recuperado span { display: block; height: 100%; }
.barra-recuperado .isapre { background: var(--petroleo); }
.barra-recuperado .seguro { background: var(--salvia); }

/* =====================================================================
   Formularios, filtros y archivos
   ===================================================================== */
.form-label { font-weight: 700; font-size: .84rem; margin-bottom: .25rem; }
.seccion-form { border-top: 1px solid var(--linea); padding-top: 1.1rem; margin-top: 1.1rem; }
.seccion-form:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.seccion-form > h2 { margin-bottom: .75rem; }
.calculado { background: var(--superficie-2); border-radius: .6rem; padding: .45rem .75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.filtros { background: var(--superficie); border: 0; border-radius: var(--radio); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--sombra); }
[data-bs-theme="dark"] .filtros { border: 1px solid var(--linea); }

.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.archivo { border: 1px solid var(--linea); border-radius: .8rem; overflow: hidden; background: var(--superficie); display: flex; flex-direction: column; }
.archivo .vista { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--superficie-2); overflow: hidden; }
.archivo .vista img { width: 100%; height: 100%; object-fit: cover; }
.archivo .vista i { font-size: 2.4rem; color: var(--tenue); }
.archivo .info { padding: .45rem .55rem; font-size: .78rem; flex: 1; }
.archivo .info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-subida { border: 2px dashed var(--linea); border-radius: .8rem; padding: 1rem; text-align: center; transition: border-color .15s, background .15s; }
.zona-subida.encima { border-color: var(--petroleo); background: var(--petroleo-suave); }
.tabla-archivos select { min-width: 12rem; }

/* =====================================================================
   Login (estilo Skydash: tarjeta centrada sobre fondo con la marca)
   ===================================================================== */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(160deg, var(--marca-oscura) 0 42%, var(--fondo) 42% 100%); }
.login .panel { width: 100%; max-width: 420px; padding: 2.25rem; box-shadow: 0 14px 40px rgba(10, 30, 36, .22); }
.login h1 { font-size: 1.35rem; }
.login .app-marca { width: auto; padding: 0; margin-bottom: 1.25rem; }
.login .selector-tema { position: fixed; top: 1rem; right: 1rem; }
.login .selector-tema .btn-icono { color: #fff; } .login .selector-tema .btn-icono:hover { background: rgba(255,255,255,.12); color: #fff; }

.alerta-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 420px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .app-barra, .app-menu, .filtros, .no-imprimir { display: none !important; }
  .app-contenido { margin: 0 !important; padding: 0 !important; }
  body { background: #fff; } .panel { box-shadow: none; border: 1px solid #ccc; }
}

/* =====================================================================
   Portales, automatizaciones, sesiones e historial
   ===================================================================== */
.portal-acciones { display: grid; gap: .5rem; }
.portal-fila { display: grid; grid-template-columns: minmax(180px, 240px) auto 1fr; align-items: center; gap: .5rem 1rem;
  padding: .6rem 0; border-top: 1px solid var(--linea); }
.portal-fila:first-child { border-top: 0; padding-top: 0; }
.portal-nombre { font-weight: 700; }
.portal-nombre i { color: var(--tenue); margin-right: .25rem; }
.portal-motivo { font-size: .8rem; color: var(--tenue); }
.portal-sin-rutina { background: var(--superficie-2); border-radius: .6rem; padding: .45rem .6rem; }
@media (max-width: 767.98px) { .portal-fila { grid-template-columns: 1fr; } }
.bitacora { background: var(--marca-oscura); color: #e3eef0; border-radius: .8rem; padding: 1rem; font-size: .8rem;
  max-height: 480px; overflow: auto; white-space: pre-wrap; }
.captura { max-width: 100%; border: 1px solid var(--linea); border-radius: .8rem; }

.contador-sesion { display: inline-block; padding: .05rem .45rem; border-radius: .4rem; font-size: .75rem; font-weight: 800;
  font-variant-numeric: tabular-nums; background: var(--cielo-suave); color: var(--cielo); text-decoration: none; white-space: nowrap; }
.contador-sesion.por-agotar { background: var(--ambar-suave); color: var(--ambar); }
.contador-sesion.excedida { background: var(--rojo-suave); color: var(--rojo); }
.sesiones { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 .25rem; }
.sesiones span { width: 1.6rem; height: 1.6rem; border-radius: .4rem; display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  border: 2px solid var(--linea); color: var(--tenue); font-variant-numeric: tabular-nums; }
.sesiones span.usada { background: var(--petroleo-fuerte); border-color: var(--petroleo-fuerte); color: #fff; }
.sesiones span.extra { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.rutina { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem; background: var(--superficie); }
.pasos-grabados { max-height: 420px; overflow: auto; }
.pasos-grabados li { padding: .3rem 0; border-bottom: 1px solid var(--linea); font-size: .85rem; }
.var { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; background: var(--cielo-suave); color: var(--cielo); padding: 0 .3rem; border-radius: .3rem; }
.paso-envio { background: var(--ambar-suave); }
.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--linea); font-size: .85rem; }
.historial li:first-child { border-top: 0; }
.fila-devuelta td { color: var(--tenue); }
.reglas { font-size: .8rem; }
.reglas dt { font-weight: 700; } .reglas dd { margin-bottom: .35rem; }

.barra-lote { position: sticky; top: calc(var(--alto-barra) + .5rem); z-index: 5; display: flex; gap: .75rem; align-items: center;
  background: var(--marca-oscura); color: #fff; border-radius: var(--radio); padding: .65rem 1rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.barra-lote input { max-width: 28rem; }

.visor { width: min(1000px, 95vw); height: min(90vh, 900px); border: 0; border-radius: var(--radio); padding: 0;
  background: var(--superficie); color: var(--tinta); }
.visor::backdrop { background: rgba(5, 15, 18, .6); }
.visor .barra { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .9rem; border-bottom: 1px solid var(--linea); }
.visor .contenido { height: calc(100% - 3.1rem); display: grid; place-items: center; background: var(--superficie-2); }
.visor iframe, .visor img { width: 100%; height: 100%; border: 0; object-fit: contain; }