/* Hoja de estilos del Sistema Contable.
   Extraida byte a byte de templates/base.html el 17/09/2026 (rediseno
   de la interfaz). Las 21 variables de :root conservan su nombre a
   proposito: son el contrato con los bloques <style> que todavia viven
   dentro de algunas plantillas, y renombrarlas las romperia en silencio.
   El navegador la cachea; al tocarla hay que subir VERSION_CSS en web.py. */
  :root {
    /* Paleta (05/09/2026, rediseño visual pedido por el usuario --
       "SaaS financiero moderno": azul reservado para acciones y
       selección, no repartido por toda la pantalla). */
    /* Paleta doble complementaria (19/09/2026): azul petróleo = estructura,
       turquesa = acción y selección, ámbar = pendiente/advertencia, coral =
       error/cancelado/destructivo, verde = éxito. Fondos y celdas neutros.
       Ámbar, coral y verde solo comunican estado, nunca adorno. */
    --fondo: #F5F7F7;
    --blanco: #FFFFFF;
    --texto: #25363E;
    --texto-secundario: #607077;
    --borde: #CFDBDE;

    /* Estructura y navegación */
    --sidebar-bg: #123845;
    --sidebar-hover: #1A4A59;
    --sidebar-activo: #245767;
    --lateral: #1F485B;
    --lateral-hover: #27586C;
    --lateral-activo: #2A6176;
    --titulo: #1F485B;

    /* Acción y selección (turquesa) */
    --azul: #2D7E9C;
    --azul-hover: #256A84;
    --azul-suave: #EAF4F5;
    /* El turquesa sobre el petróleo del lateral no tiene contraste: para
       iconos y foco DENTRO del lateral se usa esta variante clara. */
    --azul-claro: #8CCBDD;

    /* Estados */
    --exito: #34785F;
    --exito-suave: #E1F1E9;
    --advertencia: #BD8531;
    --advertencia-suave: #FFF2DC;
    --error: #B25C56;
    --error-suave: #FBE9E7;

    /* Datos y formularios */
    --tabla-cabecera: #D8E0E1;
    --tabla-cebra: #FAFBFB;
    --tabla-total: #EDF3F3;
    --campo-borde: #B6C9CC;
    --radio: 8px;
    --radio-chico: 6px;
    --sombra: 0 1px 2px rgba(31,72,91,0.06);
    --sombra-flotante: 0 12px 32px rgba(31,72,91,0.18);

    /* Marca NADKOR (23/09/2026): la paleta de la guía del kit
       (marca/kit_20260923/GUIA_MARCA_NADKOR.md). FIJOS -- nunca se redefinen
       en "sol alto": la identidad no cambia con el tema. El logotipo NO se
       dibuja con estas variables: se usan los archivos del kit tal cual
       (static/marca/). Sirven para acentos de interfaz que acompañan la
       marca; el ocre es acento exclusivo de marca, nunca un color de estado. */
    --marca-petroleo-profundo: #0C2F3D;
    --marca-navy: #123F50;
    --marca-teal: #278F91;
    --marca-ocre: #D6A445;
  }
  /* "Sol alto": conserva todos los nombres del contrato de :root, pero
     aumenta luminosidad y contraste sobre fondos casi blancos. */
  html[data-theme="sol-alto"] {
    --fondo: #FFFFFF;
    --blanco: #FFFFFF;
    --texto: #142D37;
    --texto-secundario: #435C65;
    --borde: #B9CED3;
    --sidebar-bg: #123845;
    --sidebar-hover: #1A4A59;
    --sidebar-activo: #245767;
    --lateral: #174555;
    --lateral-hover: #21586A;
    --lateral-activo: #29687A;
    --titulo: #123845;
    --azul: #167E99;
    --azul-hover: #0D637B;
    --azul-suave: #DDF4F6;
    --azul-claro: #A9DFE8;
    --exito: #216B52;
    --exito-suave: #DDF4E7;
    --advertencia: #9A681A;
    --advertencia-suave: #FFF4D8;
    --error: #A94E49;
    --error-suave: #FDE9E6;
    --tabla-cabecera: #E1ECEE;
    --tabla-cebra: #FBFDFD;
    --tabla-total: #EAF3F4;
    --campo-borde: #9FBCC2;
    --radio: 8px;
    --radio-chico: 6px;
    --sombra: 0 1px 2px rgba(18,56,69,0.08);
    --sombra-flotante: 0 12px 32px rgba(18,56,69,0.14);
  }
  * { box-sizing: border-box; }
  /* Default de tamaño para TODO ícono del sprite (<svg><use .../></svg>)
     -- sin esto, un <svg> sin width/height propios crece al tamaño de su
     contenedor (se vio con el botón "Importar XML", que quedaba del
     tamaño de la tarjeta entera). El sprite host (el <svg> de arriba con
     los <symbol>) no lo sufre: vive con style="display:none". Un
     contexto puntual puede sobreescribir con más especificidad
     (p. ej. los iconos del riel). */
  svg:not(:root) { width: 1.05rem; height: 1.05rem; flex: none; vertical-align: -0.15em; }
  html, body { height: 100%; }
  body { font-family: "Inter", system-ui, -apple-system, sans-serif; margin: 0;
         color: var(--texto); background: var(--fondo); font-size: 14px;
         -webkit-font-smoothing: antialiased; overflow: hidden; }
  /* App-shell de altura fija (05/09/2026): sidebar y header quedan
     SIEMPRE a la vista -- solo <main> scrollea. Antes toda la columna
     .app scrolleaba con la página, lo que en Chromium desincronizaba el
     repintado del fondo oscuro del sidebar contra el resto en páginas
     largas (probado: el color de fondo aparecía "cortado" a medio
     scroll aunque el layout/DOM ya median lo correcto) -- con scroll
     contenido a un solo elemento interior, ese repintado ya no aplica. */
  .app { display: flex; height: 100vh; }

  /* --- Sidebar: ver el bloque «Sidebar NADKOR» al final del archivo. --- */
  .zona { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; }

  /* --- Header ----------------------------------------------------------- */
  header { background: var(--blanco); border-bottom: 1px solid var(--borde); padding: 0 1.5rem;
           height: 56px; display: flex; justify-content: space-between; align-items: center;
           flex: none; }
  .migas { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; min-width: 0;
            white-space: nowrap; flex-shrink: 1; }
  .migas .miga, .migas .empresa-rfc { overflow: hidden; text-overflow: ellipsis; }
  .migas a { color: var(--texto); text-decoration: none; font-weight: 600; }
  .migas a:hover { color: var(--azul); }
  .migas .separador { color: #D1D5DB; }
  .migas .miga { color: var(--texto-secundario); }
  .migas .miga.actual { color: var(--texto); font-weight: 500; }
  .migas .empresa-rfc { color: var(--texto-secundario); font-weight: 400; }
  header .cuenta { display: flex; align-items: center; gap: 0.85rem; font-size: 0.82rem;
                    color: var(--texto-secundario); flex: none; white-space: nowrap; }
  header a.periodo-vigente { color: var(--texto-secundario); text-decoration: none; font-weight: 500;
                              padding: 0.3rem 0.6rem; border: 1px solid var(--borde); border-radius: 999px; }
  header a.periodo-vigente:hover { border-color: var(--azul); color: var(--azul); }
  header a.salir, header button.salir { color: var(--texto-secundario); text-decoration: none; }
  header a.salir:hover, header button.salir:hover { color: var(--error); }
  /* "salir" es un formulario POST (cerrar sesion no puede ser un GET) pero se ve como enlace. */
  header .salir-form { display: inline; margin: 0; }
  header button.salir { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; box-shadow: none; }
  .avatar { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--azul);
            color: white; display: flex; align-items: center; justify-content: center;
            font-size: 0.78rem; font-weight: 600; flex: none; }

  main { padding: 1.75rem 2rem; max-width: 1280px; width: 100%; margin: 0 auto;
         flex: 1; overflow-y: auto; }

  h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--titulo); }
  h2, h1.titulo-pagina { font-size: 1.4rem; margin: 0 0 0.3rem; }

  /* --- Tablas ------------------------------------------------------------ */
  table { border-collapse: collapse; width: 100%; background: var(--blanco); font-size: 0.86rem; }
  th, td { border-bottom: 1px solid var(--borde); padding: 0.65rem 0.75rem; text-align: left; }
  th { background: var(--tabla-cabecera); color: #354C53; font-size: 0.72rem; font-weight: 600;
       text-transform: uppercase; letter-spacing: 0.03em; border-top: 1px solid var(--borde); }
  tbody tr:nth-child(even) { background: var(--tabla-cebra); }
  tbody tr:hover { background: var(--azul-suave); }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  .ok { color: var(--exito); font-weight: 600; }
  .descuadre { color: var(--error); font-weight: 600; }
  .sin_dato { color: var(--texto-secundario); }
  /* Texto de ayuda bajo un campo de formulario -- estaba duplicado igual en
     aplicar.css/banco_movimiento_form.css/banco_movimiento_editar.css
     (22/09/2026, rediseño de banco/aplicar a formato documento). */
  .campo-ayuda { font-size: 0.78rem; color: var(--texto-secundario); }
  form.linea { display: inline; }

  /* --- Botones y controles ------------------------------------------------ */
  button, .boton { cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 600;
                    border-radius: var(--radio-chico); padding: 0.5rem 0.9rem; border: 1px solid transparent;
                    background: var(--azul); color: white; transition: background 0.1s ease; line-height: 1.1; }
  button:hover, .boton:hover { background: var(--azul-hover); }
  button:disabled { background: #B9CDD4; cursor: not-allowed; }
  button.secundario, .boton.secundario { background: var(--blanco); color: var(--texto);
                                          border-color: var(--borde); }
  button.secundario:hover, .boton.secundario:hover { border-color: var(--campo-borde); background: var(--tabla-cebra); }
  button.peligro, .boton.peligro { background: var(--error); }
  button.peligro:hover, .boton.peligro:hover { background: #984843; }
  a.boton { text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
  select, input:not([type]), input[type=text], input[type=search], input[type=date], input[type=number],
  input[type=month], input[type=tel], input[type=url],
  input[type=password], input[type=email], input[type=file], textarea {
    font-family: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border: 1px solid var(--campo-borde);
    border-radius: var(--radio-chico); background: var(--blanco); color: var(--texto);
  }
  select:focus, input:focus, textarea:focus { outline: none; border-color: var(--azul);
    box-shadow: 0 0 0 3px var(--azul-suave); }
  input { width: 100%; }
  /* Los de marcar quedan fuera del 100%: un checkbox estirado a todo el
     ancho se pinta centrado y su texto cae en otro renglón -- así se veía
     "Periodo extraordinario" en nomina_periodo_nuevo (17/09/2026). */
  input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
  /* El botón que Chromium mete dentro del <input type=file> no hereda la
     tipografía de la página -- queda gris de sistema al lado de todo lo
     demás (se vio en Conciliación IMSS/INFONAVIT, 17/09/2026). */
  input[type=file] { padding: 0.35rem 0.6rem; }
  input[type=file]::file-selector-button {
    font-family: inherit; font-size: 0.82rem; margin-right: 0.6rem;
    padding: 0.25rem 0.6rem; border: 1px solid var(--borde);
    border-radius: var(--radio-chico); background: var(--fondo);
    color: var(--texto); cursor: pointer; }
  input[type=file]::file-selector-button:hover { border-color: var(--campo-borde); background: var(--tabla-cebra); }
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
    display: flex; align-items: center; gap: 0.45rem; color: var(--texto); }

  .tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
             box-shadow: var(--sombra); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }

  /* --- Encabezado de página, métricas y filtros -- compartido por toda
     pantalla de listado (visor, documentos, bandeja): nació en el visor
     de CFDI (05/09/2026) y se movió aquí al replicarse (05/09/2026) para
     no repetir la misma regla en cada plantilla. --- */
  .pagina-header { display: flex; justify-content: space-between; align-items: flex-start;
                    gap: 1rem; margin-bottom: 1.25rem; }
  .pagina-header h2, .pagina-header h1 { margin-bottom: 0.2rem; }
  .pagina-subtitulo { margin: 0; color: var(--texto-secundario); font-size: 0.88rem; }

  .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 0.9rem; margin-bottom: 1.25rem; }
  .metrica { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
             box-shadow: var(--sombra); padding: 0.9rem 1.1rem; display: flex; flex-direction: column;
             gap: 0.15rem; }
  .metrica-valor { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em;
                    font-variant-numeric: tabular-nums; }
  .metrica-etiqueta { font-size: 0.78rem; color: var(--texto-secundario); }

  .filtros-titulo { display: flex; align-items: center; gap: 0.4rem; font-weight: 600;
                     font-size: 0.9rem; margin-bottom: 0.9rem; }
  .filtros-titulo svg { width: 1rem; height: 1rem; stroke: var(--texto-secundario); }
  .filtros-fila { display: flex; flex-wrap: wrap; align-items: end; gap: 0.85rem; }
  .filtros-fila label { display: flex; flex-direction: column; font-size: 0.78rem;
                          color: var(--texto-secundario); gap: 0.25rem; }
  .filtros-buscar { flex: 1; min-width: 14rem; }
  .filtros-buscar input { width: 100%; }
  .filtros-botones { display: flex; gap: 0.5rem; }

  /* Renglón "nombre en negritas + RFC secundario debajo" -- misma
     contraparte que muestran el visor, documentos y la bandeja. */
  .col-contraparte { max-width: 260px; }
  .contraparte-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .contraparte-rfc { font-size: 0.78rem; color: var(--texto-secundario); }
  .total-destacado { font-weight: 700; }
  .error { background: var(--error-suave); color: #7A3531; padding: 0.7rem 1rem;
           border-left: 4px solid var(--error); border-radius: var(--radio-chico); margin-bottom: 1.25rem; font-size: 0.85rem; }
  .aviso { background: var(--azul-suave); color: var(--titulo); padding: 0.7rem 1rem;
           border-left: 4px solid var(--azul); border-radius: var(--radio-chico); margin-bottom: 1.25rem; font-size: 0.85rem; }
  .campo { margin-bottom: 0.8rem; }
  label { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; color: var(--texto-secundario); }

  .formulario { display: flex; flex-direction: column; gap: 0.75rem; max-width: 34rem; }
  .formulario label { display: flex; flex-direction: column; gap: 0.25rem;
                       font-size: 0.82rem; color: var(--texto-secundario); }

  /* Badges de estado -- recoloreados a la paleta nueva. */
  .badge-pago { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px;
                font-size: 0.68rem; font-weight: 600; }
  .badge-pagado { background: var(--exito-suave); color: #245A47; }
  .badge-parcial, .badge-pendiente { background: var(--advertencia-suave); color: #6E4A0E; }
  /* Error, cancelado, falló, descuadre: coral. Antes 'pendiente' compartía este color. */
  .badge-error, .badge-cancelado { background: var(--error-suave); color: #7A3531; }

  .buscador { width: 100%; max-width: 24rem; padding: 0.5rem 0.75rem; margin: 0.75rem 0; }

  .accesos-rapidos { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .acceso { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem;
            border: 1px solid var(--borde); border-radius: var(--radio-chico); text-decoration: none;
            color: var(--texto); font-size: 0.85rem; font-weight: 500; background: var(--blanco); }
  .acceso svg { stroke: var(--texto-secundario); }
  .acceso:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-suave); }
  .acceso:hover svg { stroke: var(--azul); }

  .visor-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--borde); }
  .visor-tabs a { padding: 0.55rem 1rem; text-decoration: none; color: var(--texto-secundario);
                  border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.85rem;
                  font-weight: 500; }
  .visor-tabs a.activo { color: var(--texto); font-weight: 600; border-bottom-color: var(--azul); }

  code { background: #EDF3F3; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; }

  /* Notificación flotante ("toast"). */
  /* top = altura del header (56px) + margen -- si no, el toast se monta
     encima del periodo/usuario/avatar de la esquina superior derecha. */
  .toast-caja { position: fixed; top: calc(56px + 1rem); right: 1rem; z-index: 100;
                display: flex; flex-direction: column; gap: 0.5rem; max-width: 340px; }
  .toast { box-shadow: var(--sombra-flotante); border-radius: var(--radio-chico);
           padding: 0.7rem 1rem; font-size: 0.85rem; opacity: 0;
           transform: translateX(12px); transition: opacity 0.25s, transform 0.25s; }
  .toast.mostrar { opacity: 1; transform: translateX(0); }
  .toast.ok { background: var(--exito-suave); color: #245A47; border: 1px solid #B7DCCB; }
  .toast.err { background: var(--error-suave); color: #7A3531; border: 1px solid #EBC3BF; }

  /* ---------------------------------------------------------------------
     Componentes del rediseno del 17/09/2026 (ver templates/componentes.html).
     Se AGREGAN: ni una regla de arriba se toco, para que la migracion no
     pudiera romper una pantalla a medio camino.
     --------------------------------------------------------------------- */

  /* Accion de renglon de tabla: solo el icono. Discreto en reposo para que
     una tabla de 40 renglones no se vuelva una parrilla de colores, y con
     color hasta el hover -- el "azul reservado para acciones" del 05/09. */
  .boton-icono { display: inline-flex; align-items: center; justify-content: center;
                 width: 1.9rem; height: 1.9rem; border-radius: var(--radio-chico);
                 border: 1px solid transparent; background: none; cursor: pointer;
                 color: var(--texto-secundario); text-decoration: none;
                 position: relative; transition: background 0.12s ease, color 0.12s ease; }
  .boton-icono svg { width: 1rem; height: 1rem; stroke: currentColor; }
  .boton-icono:hover { background: var(--azul-suave); color: var(--azul); }
  .boton-icono:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
  .boton-icono.peligro:hover { background: var(--error-suave); color: var(--error); }
  .acciones-fila { display: flex; gap: 0.15rem; justify-content: flex-end; }
  td.acciones-fila, td .acciones-fila { white-space: nowrap; }

  /* Tooltip propio en vez de `title`: el del navegador tarda casi un segundo
     y en pantalla tactil no aparece nunca. El nombre accesible real es el
     aria-label del macro, no esto. */
  [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%;
                          left: 50%; transform: translateX(-50%) translateY(-0.25rem);
                          background: var(--lateral); color: #fff; font-size: 0.72rem;
                          font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--radio-chico);
                          white-space: nowrap; opacity: 0; pointer-events: none;
                          transition: opacity 0.12s ease; z-index: 30; }
  [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

  /* El enlace de regreso: se queda enlace a proposito (regla 2 de
     componentes.html), pero deja de ser azul suelto y gana su chevron. */
  .volver { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem;
            color: var(--texto-secundario); text-decoration: none; margin-bottom: 0.9rem; }
  .volver svg { width: 0.95rem; height: 0.95rem; stroke: currentColor; }
  .volver:hover { color: var(--texto); }

  /* Barra de filtros -- reemplaza el `style=` suelto que cada bandeja
     repetia por su cuenta. */
  .barra-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
  .barra-filtros .campo { margin-bottom: 0; }
  .barra-filtros label { display: block; font-size: 0.75rem; color: var(--texto-secundario);
                         margin-bottom: 0.2rem; }
  .barra-filtros input, .barra-filtros select { width: auto; min-width: 9rem; }

  /* Grupo de acciones al pie de un formulario o en la cabecera de pantalla. */
  .acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

  /* htmx: mientras vuela la peticion. `.htmx-request` la pone htmx sola
     sobre el elemento que dispara (o sobre su hx-indicator). Sin esto, un
     boton que tarda parece un boton que no hizo nada. */
  .htmx-indicator { opacity: 0; transition: opacity 0.15s ease; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
  button.htmx-request, .boton.htmx-request { opacity: 0.65; pointer-events: none; }
  #contenido.htmx-request { opacity: 0.55; transition: opacity 0.12s ease; }

/* Campo de contraseña con botón mostrar/ocultar (login) */
.campo-contrasena { position: relative; display: flex; }
.campo-contrasena input { flex: 1; padding-right: 4.5rem; }
.campo-contrasena .ver-contrasena {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: inherit; font-size: .8rem;
  padding: .25rem .5rem; cursor: pointer; text-decoration: underline;
}

/* --- Navegación responsiva (P2, 19/09/2026) ---------------------------------
   Por debajo de 900px el menú lateral deja de ocupar columna: es un cajón que
   se abre con el botón de la cabecera, con fondo que lo cierra al tocar fuera.
   La preferencia de "colapsado" de escritorio se ignora aquí. */
.menu-movil { display: none; background: none; border: 0; box-shadow: none; padding: 0.35rem;
              color: var(--texto); cursor: pointer; border-radius: 6px; flex: none; }
.menu-movil svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; }
.menu-movil:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.lateral-fondo { display: none; }

.subnavegacion { flex: none; min-height: 3.3rem; background: var(--blanco); border-bottom: 1px solid var(--borde);
                  padding: 0.5rem 1.5rem; overflow-x: auto; overflow-y: hidden; }
.subnavegacion > div { display: flex; align-items: center; gap: 0.35rem; min-width: max-content; }
.subnavegacion a { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid transparent;
                    border-radius: var(--radio-chico); color: var(--texto-secundario); padding: 0.4rem 0.6rem;
                    font-size: 0.82rem; font-weight: 500; text-decoration: none; }
.subnavegacion a:hover { background: var(--azul-suave); color: var(--azul-hover); }
.subnavegacion a.activo { background: var(--azul-suave); border-color: var(--campo-borde); color: var(--titulo); }
.subnavegacion a:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

@media (max-width: 767px) {
  .lateral, html.sc-lateral-colapsado .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 17rem; max-width: 85vw;
    overflow: visible; border: none; transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s; }
  html.sc-menu-abierto .lateral { transform: none; visibility: visible; }
  html.sc-menu-abierto .lateral-fondo { display: block; position: fixed; inset: 0; z-index: 19;
                                        background: rgba(31, 72, 91, 0.5); }
  .lateral-toggle, .lateral-expandir, html.sc-lateral-colapsado .lateral-expandir { display: none; }
  .menu-movil { display: inline-flex; }
  header { padding: 0 0.75rem; gap: 0.5rem; }
  .subnavegacion { padding: 0.45rem 0.75rem; }
  header .cuenta { gap: 0.5rem; }
  header .cuenta .nombre-usuario { display: none; }
  main { padding: 1rem; }
  .pagina-header { flex-wrap: wrap; gap: 0.5rem; }
  .formulario { max-width: 100%; }
  input, select, textarea { max-width: 100%; }
}

@media (max-width: 480px) {
  header a.periodo-vigente { display: none; }
  h2, h1.titulo-pagina { font-size: 1.2rem; }
}

/* Indicadores de carga de htmx (sustituyen el <style> que htmx inyectaba solo,
   prohibido por la CSP sin 'unsafe-inline'). */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Chips de filtros activos (visor, 19/09/2026) */
.chips-filtros { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; }
.chip { background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px;
        padding: 0.15rem 0.65rem; font-size: 0.78rem; color: var(--texto-secundario); }
.chip a { margin-left: 0.3rem; color: inherit; text-decoration: none; font-weight: 700; }
.chip a:hover { color: var(--error); }

/* Estado vacío con salidas (bandejas y listados, 19/09/2026) */
.vacio { background: var(--blanco); border: 1px dashed var(--borde); border-radius: var(--radio);
         padding: 1rem 1.25rem; margin-top: 1rem; }
.vacio ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }

/* Bancos: diferencias pendientes resaltadas (19/09/2026) */
.alerta-pendiente { background: var(--advertencia-suave); color: #6E4A0E; border-left: 4px solid var(--advertencia);
                    border-radius: var(--radio); padding: 0.6rem 1rem; margin: 0.75rem 0; }
.alerta-error { background: var(--error-suave); color: #7A3531; border-left: 4px solid var(--error);
                border-radius: var(--radio); padding: 0.6rem 1rem; margin: 0.75rem 0; }
.ok-pendiente { background: var(--exito-suave); color: #245A47; border-radius: var(--radio);
                padding: 0.6rem 1rem; margin: 0.75rem 0; }
tr.fila-pendiente td { background: var(--advertencia-suave); }
.filtros-fila .casilla { flex-direction: row; align-items: center; gap: 0.4rem; }
/* Radio o casilla DENTRO de un formulario: el control a la izquierda de su texto,
   no apilado y centrado encima (así se perdía la opción «El correo del ERP»). */
.formulario label.casilla { display: block; text-align: left; color: var(--texto); line-height: 1.45; }
.formulario label.casilla input { margin: 0 0.4rem 0 0; vertical-align: -0.1rem; }
.formulario label.casilla .sin_dato { display: block; margin-left: 1.3rem; }
.saldo-enlace { font-weight: 600; text-decoration: underline dotted; }

/* Encabezados fijos en listados largos (P3-7). Solo surten efecto si ningun
   contenedor intermedio corta el desplazamiento vertical. */
table.visor-tabla thead th, table.documentos-tabla thead th, table.libro-diario thead th {
  position: sticky; top: 0; z-index: 2; background: var(--tabla-cabecera); }

.badge-pago.badge-convertido { background: var(--azul-suave); color: var(--titulo); border: 1px solid var(--azul); }
.badge-pago.badge-asociado { background: var(--tabla-total); color: #354C53; border: 1px solid var(--campo-borde); }

.banner-modo { padding: 0.5rem 0.8rem; border-radius: 6px; margin: 0.6rem 0; font-size: 0.9rem; }
.banner-oficial { background: var(--exito-suave); color: #245A47; }
.banner-preliminar { background: var(--advertencia-suave); color: #6E4A0E; border: 1px solid var(--advertencia); }

/* Totales y subtotales: fondo neutro de alto contraste (no ámbar ni coral) */
tr.fila-resumen td, tr.fila-resumen th { background: var(--tabla-total); }
/* Encabezado de grupo en un reporte (relación/departamento de la lista de
   raya, tipo de concepto del resumen): solo el nombre, en negritas, con el
   total DEBAJO de lo que suma (22/09/2026 -- reemplaza la lista de raya de
   dos renglones por empleado, que se leía peor). */
tr.fila-grupo td { font-weight: 700; color: var(--titulo); background: var(--blanco);
                   border-top: 1px solid var(--borde); }
/* Leyenda de marca ajena junto a una exportación compatible (23/09/2026). */
.aviso-marca { font-size: 0.75rem; color: var(--texto-secundario); margin: 0.3rem 0 0; }
/* Identidad que no se parte en el reporte genérico: nombre, código, RFC,
   NSS -- la tabla se desplaza a lo ancho antes que apretarlos. */
.reporte-tabla td.col-empleado, .reporte-tabla td.col-codigo, .reporte-tabla td.col-rfc,
.reporte-tabla td.col-nss, .reporte-tabla td.col-curp { white-space: nowrap; }
/* Foco de teclado visible en controles y enlaces */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Enlaces de acción del contenido en turquesa; los de datos en tablas conservan el texto */
main a { color: var(--azul-hover); }
main table a { color: inherit; text-decoration: underline; text-decoration-color: var(--campo-borde); }
main a.boton, main a.boton:hover { color: white; }
main a.boton.secundario { color: var(--texto); }

/* Pestañas de relación laboral: tarjetas blancas como las métricas; la activa
   lleva el borde de acción. */
.pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0 0 1.25rem; }
.pestanas a.metrica { text-decoration: none; color: inherit; }
.pestanas a.metrica:hover { border-color: var(--azul); }
.pestanas a.metrica[aria-current="page"] { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.pestanas a.metrica[aria-current="page"] .metrica-etiqueta { color: var(--titulo); font-weight: 600; }
.pestanas-guia { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--texto-secundario); }
.pestanas a.metrica { cursor: pointer; }
.pestana-accion { font-size: 0.78rem; color: var(--azul); font-weight: 600; margin-top: 0.3rem; }
.pestanas a.metrica[aria-current="page"] .pestana-accion { color: var(--texto-secundario); font-weight: 500; }
.una-linea { white-space: nowrap; }
/* Botones de cabecera en columnas iguales, todos del mismo ancho y alto. */
.acciones-cabecera { display: grid; grid-template-columns: repeat(3, 11rem); gap: 0.5rem; }
.acciones-cabecera .boton { justify-content: center; width: 100%; box-sizing: border-box; white-space: nowrap; }
dialog.modal { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem;
  background: var(--blanco); box-shadow: var(--sombra); max-width: 26rem; width: 90vw; }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.35); }
.campo-con-mas { display: flex; gap: 0.5rem; align-items: center; }
.campo-con-mas > input, .campo-con-mas > select { flex: 1; }
tr.cancelada td { color: var(--texto-secundario); text-decoration: line-through; }

/* Facturas (interfaz de captura) */
.factura-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; }
.factura-principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.factura-resumen { position: sticky; top: 1rem; }
.factura-resumen form { margin-top: 0.6rem; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.campos-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.formulario-ancho { max-width: 46rem; }
.resumen-totales { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; margin: 0 0 1rem; }
.resumen-totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.resumen-totales .total { font-weight: 700; border-top: 1px solid var(--campo-borde); padding-top: 0.3rem; }
.pendiente-lista { margin: 0.3rem 0 0.8rem; padding-left: 1.1rem; }
form.en-linea { display: inline; }
@media (max-width: 60rem) { .factura-grid { grid-template-columns: minmax(0, 1fr); } .factura-resumen { position: static; } }
/* CRM (contexto/crm.md) -- etiquetas de color de lista cerrada, línea de tiempo, kanban */
.etiqueta { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.8rem; border: 1px solid transparent; background: #ECEFF0; color: #3D4B50; }
.etiqueta-azul { background: #E3EEF7; color: #1F4E79; } .etiqueta-verde { background: #E1F1E9; color: #245A47; }
.etiqueta-amarillo { background: #FBF3D5; color: #6B5510; } .etiqueta-naranja { background: #FCE9D9; color: #7A4115; }
.etiqueta-rojo { background: #FBE9E7; color: #7A3531; } .etiqueta-morado { background: #EFE7F6; color: #52316E; }
.etiqueta form { display: inline; } .etiqueta button { padding: 0 0.2rem; background: none; color: inherit; border: 0; min-height: 0; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { border-left: 2px solid var(--campo-borde); padding: 0.2rem 0 0.8rem 0.9rem; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: -6px; top: 0.45rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--azul-suave); border: 2px solid var(--campo-borde); }
.linea-tiempo li.origen-erp::before { background: var(--exito-suave); }
.linea-tiempo .meta { font-size: 0.8rem; color: #5B6B70; }
.linea-tiempo .cuerpo { white-space: pre-wrap; margin: 0.2rem 0 0; }
.vencida { color: var(--error); font-weight: 600; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 0.8rem; overflow-x: auto;
  padding-bottom: 0.5rem; }
.kanban-columna { background: #F4F6F7; border-radius: 8px; padding: 0.6rem; min-height: 12rem; }
.kanban-columna.sobre { outline: 2px dashed var(--campo-borde); }
.kanban-columna h3 { font-size: 0.95rem; margin: 0 0 0.4rem; display: flex; justify-content: space-between; }
.kanban-tarjeta { background: #fff; border: 1px solid var(--campo-borde); border-radius: 6px; padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem; cursor: grab; }
.kanban-tarjeta .monto { font-variant-numeric: tabular-nums; font-weight: 600; }

/* CRM C6 -- aviso persistente sobre el proveedor (no es toast: no se desvanece). */
.aviso.advertencia { background: var(--advertencia-suave); border-left-color: var(--advertencia, #B7791F); color: #6E4A0E; }
.comparativo td.mejor { background: var(--exito-suave); font-weight: 600; }

/* CRM C8 -- la campana de avisos del encabezado. */
.campana-crm { position: relative; display: inline-flex; align-items: center; color: var(--texto-secundario); margin-right: 0.5rem; }
.campana-crm svg { width: 20px; height: 20px; }
.campana-cuenta { position: absolute; top: -6px; right: -8px; min-width: 18px; padding: 0 4px; border-radius: 999px;
                  background: var(--error); color: #fff; font-size: 0.68rem; font-weight: 700; text-align: center; line-height: 18px; }
.notificacion-nueva { font-weight: 600; }

/* =========================================================================
   Sidebar NADKOR (22/09/2026, rediseño pedido por el usuario).
   - Riel de 76px con SOLO los iconos; al pasar el mouse (o con foco de
     teclado) la caja se abre a 264px ENCIMA del contenido, sin reacomodarlo.
     "Fijar menú abierto" (sc-lateral-fijado) sí le da los 264px en el flujo.
   - Cada módulo es un círculo de color con relieve (degradado radial + brillo
     + sombra). El color es del MÓDULO, no del icono: sale de las variables
     --c1/--c2/--c3 de [data-navegacion-modulo] y lo heredan también los
     submódulos, así se lee a qué módulo pertenece cada pantalla.
   - El texto es `.nav-texto`, NO `.etiqueta`: esa clase es la píldora gris de
     las etiquetas del CRM, y al compartir nombre asomaba como bolitas grises
     con la primera letra en el riel minimizado.
   ========================================================================= */

.lateral { position: relative; flex: none; width: 76px; min-width: 76px; height: 100vh; z-index: 30;
  --c1: #8CCBDD; --c2: #2D7E9C; --c3: #184E61; }
html.sc-lateral-fijado .lateral { width: 264px; min-width: 264px; }
.lateral-caja { position: absolute; top: 0; left: 0; bottom: 0; width: 76px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #164A5C 0%, var(--marca-navy) 42%, var(--marca-petroleo-profundo) 100%); color: #CFE0E6;
  overflow: hidden; transition: width 0.2s ease, box-shadow 0.2s ease; }
.lateral:hover .lateral-caja, .lateral:has(:focus-visible) .lateral-caja,
html.sc-lateral-fijado .lateral-caja { width: 264px; }
.lateral:hover .lateral-caja, .lateral:has(:focus-visible) .lateral-caja { box-shadow: 12px 0 32px -10px rgba(6, 24, 31, 0.55); }
html.sc-lateral-fijado .lateral .lateral-caja { box-shadow: none; }

.lateral .nav-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s ease; }
.lateral:hover .nav-texto, .lateral:has(:focus-visible) .nav-texto,
html.sc-lateral-fijado .lateral .nav-texto { opacity: 1; transition-delay: 0.05s; }

/* Marca arriba (23/09/2026): los archivos del kit sin tocar. Riel cerrado:
   el icono de app (07, 40 px -- la guía pide el icono entre 32 y 96 px). Riel
   abierto: el logo inverso (03, para fondo petróleo). Se cruzan por opacidad
   con el mismo ritmo que los textos del menú. */
.lateral .marca { flex: none; position: relative; display: flex; align-items: center; height: 76px; padding: 0 18px;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.lateral .marca-icono { flex: none; display: block; width: 40px; height: 40px;
  transition: opacity 0.12s ease; }
.lateral .marca-logo { position: absolute; left: 8px; top: 12px; display: block; width: 212px; height: 52px;
  max-width: none; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.lateral:hover .marca-logo, .lateral:has(:focus-visible) .marca-logo,
html.sc-lateral-fijado .lateral .marca-logo { opacity: 1; transition-delay: 0.05s; }
.lateral:hover .marca-icono, .lateral:has(:focus-visible) .marca-icono,
html.sc-lateral-fijado .lateral .marca-icono { opacity: 0; }

/* Los módulos */
.lateral .navegacion-acordeon { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px;
  padding: 14px 22px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.lateral .navegacion-acordeon::-webkit-scrollbar { display: none; }
.modulo-acordeon { flex: none; min-width: 0; }
.modulo-disparador { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 2px 0;
  margin: 0; background: none; border: 0; border-radius: 22px; box-shadow: none; color: #D9E7EC; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 600; text-align: left; white-space: nowrap; }
.modulo-disparador:hover, .modulo-disparador:focus, .modulo-disparador[aria-expanded="true"] { background: none; color: #FFFFFF; }
.modulo-disparador:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.modulo-disparador::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 8px 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  opacity: 0; transition: transform 0.15s ease, opacity 0.12s ease; }
.modulo-disparador[aria-expanded="true"]::after { transform: rotate(45deg); }
.lateral:hover .modulo-disparador::after, .lateral:has(:focus-visible) .modulo-disparador::after,
html.sc-lateral-fijado .modulo-disparador::after { opacity: 0.65; }

/* El icono circular con relieve. */
.nav-icono { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF;
  background: radial-gradient(circle at 32% 26%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.38),
              0 4px 7px -2px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nav-icono::before { content: ""; position: absolute; top: 7%; left: 20%; width: 60%; height: 40%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
.nav-icono svg { position: relative; width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.modulo-disparador:hover .nav-icono { transform: translateY(-1px) scale(1.05); }
.modulo-disparador[aria-expanded="true"] .nav-icono {
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.38),
              0 4px 7px -2px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.24); }
.nav-icono-chico { width: 21px; height: 21px;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.35),
              0 2px 4px -1px rgba(0, 0, 0, 0.5); }
.nav-icono-chico svg { width: 12px; height: 12px; }

/* Un color por módulo (claro / base / sombra). */
[data-navegacion-modulo="inicio"]         { --c1: #86E3D6; --c2: #22A89A; --c3: #0D6A61; }
[data-navegacion-modulo="cfdi"]           { --c1: #95C8FF; --c2: #2F7FE0; --c3: #1A4C96; }
[data-navegacion-modulo="crm"]            { --c1: #C7B6FF; --c2: #7F5DEB; --c3: #4A2EA6; }
[data-navegacion-modulo="ventas"]         { --c1: #FFCB8E; --c2: #EE8A2F; --c3: #A55213; }
[data-navegacion-modulo="bancos"]         { --c1: #93E4B9; --c2: #2FAE70; --c3: #156E48; }
[data-navegacion-modulo="contabilidad"]   { --c1: #AEBAFF; --c2: #5566E0; --c3: #2D399C; }
[data-navegacion-modulo="fiscal"]         { --c1: #FFB0A8; --c2: #E0625A; --c3: #9E322C; }
[data-navegacion-modulo="compras"]        { --c1: #FFE08E; --c2: #E0AA28; --c3: #976B0B; }
[data-navegacion-modulo="nomina"]         { --c1: #FFB4D8; --c2: #DA5B9D; --c3: #95275E; }
[data-navegacion-modulo="configuracion"]  { --c1: #C8D5DE; --c2: #7B93A5; --c3: #455C6E; }

/* Submódulos: una línea guía que baja del centro del círculo del módulo. */
.panel-submodulos { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 15px;
  padding: 2px 0 2px 12px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.panel-submodulos[hidden] { display: none; }
html:not(.sc-lateral-fijado) .lateral:not(:hover):not(:has(:focus-visible)) .panel-submodulos { display: none; }
.panel-submodulos a { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border-radius: 10px;
  color: #C3D7DE; font-size: 0.83rem; font-weight: 500; text-decoration: none; }
.panel-submodulos a:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }
.panel-submodulos a.activo { background: rgba(255, 255, 255, 0.13); color: #FFFFFF; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c1); }
.panel-submodulos a:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 1px; }

/* Fijar / contraer, abajo y centrado igual que los módulos. */
.lateral .lateral-toggle { flex: none; position: static; display: flex; align-items: center; gap: 14px;
  width: auto; height: 40px; margin: 6px 18px 18px; padding: 0 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); box-shadow: none;
  color: #CFE0E6; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transform: none; }
.lateral .lateral-toggle:hover { background: rgba(255, 255, 255, 0.11); color: #FFFFFF; }
.lateral .lateral-toggle:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.lateral .lateral-toggle svg { flex: none; width: 18px; height: 18px; transform: rotate(180deg); transition: transform 0.2s ease; }
html.sc-lateral-fijado .lateral .lateral-toggle svg { transform: none; }
.lateral .solo-fijado, html.sc-lateral-fijado .lateral .solo-sin-fijar { display: none; }
html.sc-lateral-fijado .lateral .solo-fijado { display: inline; }

/* Botón de tema: en el encabezado de la app; flotante solo sin sesión (login). */
.tema-sol-alto { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 0; padding: 0.3rem 0.65rem;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto-secundario);
  box-shadow: none; font-size: 0.75rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tema-sol-alto:hover { color: var(--azul-hover); border-color: var(--azul); background: var(--azul-suave); }
html[data-theme="sol-alto"] .tema-sol-alto { background: #FFF8E9; color: #775116; border-color: #E7C87C; }
.tema-flotante { position: fixed; top: 0.9rem; right: 1rem; z-index: 40; box-shadow: var(--sombra); }

/* Pantalla de acceso: el logo principal del kit (01), sobre fondo claro. */
.acceso-marca { display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  margin: 4rem auto 1.6rem; text-align: center; }
.acceso-logo { display: block; width: min(26.5rem, 100%); height: auto; }
.acceso-lema { margin: 0; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--texto-secundario); }
.acceso-tarjeta { max-width: 360px; margin: 0 auto 3rem; }
.acceso-tarjeta h2 { margin-top: 0; }

@media (max-width: 767px) {
  .lateral, html.sc-lateral-fijado .lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 17rem; min-width: 0;
    max-width: 85vw; z-index: 50; transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s; }
  html.sc-menu-abierto .lateral { transform: none; visibility: visible; }
  .lateral-caja, .lateral:hover .lateral-caja, .lateral:has(:focus-visible) .lateral-caja,
  html.sc-lateral-fijado .lateral-caja { width: 100%; box-shadow: none; }
  .lateral .nav-texto { opacity: 1; }
  .lateral .modulo-disparador::after { opacity: 0.65; }
  html:not(.sc-lateral-fijado) .lateral:not(:hover):not(:has(:focus-visible)) .panel-submodulos:not([hidden]) { display: flex; }
  .lateral .lateral-toggle { display: none; }
  header .tema-sol-alto span { display: none; }
}