/* 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);
  }
  * { 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
     (`.marca-icono svg`, ya abajo). */
  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 -------------------------------------------------------- */
  .lateral { background: var(--sidebar-bg); color: #B7CDD4; width: 240px; flex: none;
             height: 100vh; display: flex; flex-direction: column; position: relative;
             transition: width 0.15s ease; }
  /* La clase vive en <html>, no en .app, para que un script en <head>
     (más abajo) pueda aplicarla ANTES del primer paint y evitar el
     parpadeo de "se ve, luego desaparece". */
  html.sc-lateral-colapsado .lateral { width: 0; min-width: 0; overflow: hidden; border: none; }
  .lateral-toggle { position: absolute; top: 0.9rem; right: -0.8rem; width: 1.6rem; height: 1.6rem;
                     border-radius: 50%; border: 1px solid var(--sidebar-activo); background: var(--sidebar-hover);
                     color: #B7CDD4; font-size: 0.8rem; line-height: 1; z-index: 5; padding: 0; }
  .lateral-toggle:hover { background: var(--sidebar-activo); color: white; }
  .lateral-expandir { display: none; position: fixed; top: 0.8rem; left: 0.8rem; z-index: 6;
                       width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--borde);
                       background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-flotante);
                       font-size: 0.85rem; padding: 0; align-items: center; justify-content: center; }
  html.sc-lateral-colapsado .lateral-expandir { display: flex; }
  .lateral .marca { color: white; font-weight: 700; font-size: 0.95rem; padding: 1.1rem 1.25rem;
                     text-decoration: none; display: flex; align-items: center; gap: 0.55rem; }
  /* El logo real es azul marino -- sobre el sidebar oscuro necesita una
     chapa clara detrás para no perder contraste (11/09/2026). */
  .lateral .marca .marca-icono { background: var(--blanco); border-radius: 6px; padding: 0.2rem 0.4rem;
                                  display: flex; align-items: center; justify-content: center; flex: none; }
  .lateral .marca .marca-icono img { display: block; height: 0.95rem; width: auto; }
  .lateral nav { padding: 0.4rem 0.7rem; overflow-y: auto; flex: 1; }
  .lateral .grupo { margin-top: 1.15rem; }
  .lateral .grupo:first-child { margin-top: 0; }
  .lateral .grupo h3 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
                        color: #8FB3BF; margin: 0 0 0.3rem 0.6rem; font-weight: 600; }
  .lateral a { display: flex; align-items: center; gap: 0.65rem; color: #DCE9ED; text-decoration: none;
               padding: 0.5rem 0.6rem; font-size: 0.85rem; font-weight: 500; border-radius: var(--radio-chico);
               border-left: 3px solid transparent; margin-bottom: 0.05rem; position: relative; }
  .lateral a svg { width: 1.05rem; height: 1.05rem; flex: none; stroke: #9DBDC7; }
  .lateral a:hover { background: var(--sidebar-hover); color: white; }
  .lateral a:hover svg { stroke: white; }
  .lateral a.activo { background: var(--sidebar-activo); color: white; border-left-color: var(--azul); }
  .lateral a.activo svg { stroke: var(--azul-claro); }
  .lateral a:focus-visible, .lateral-toggle:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
  .lateral a .etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .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;
            overflow: hidden; 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 { 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); }
  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[type=text], input[type=search], input[type=date], input[type=number],
  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 { 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; }

/* Navegación de dos niveles: la columna solo aloja categorías para que nunca
   requiera scroll; el inventario de destinos vive en la barra de tareas. */
.lateral > nav:not(.navegacion-principal) { display: none; }
.lateral .navegacion-principal { display: flex; flex: none; flex-direction: column; gap: 0.15rem;
                                 overflow: visible; padding: 0.35rem 0.7rem 1rem; }
.lateral .marca { order: 1; }
.lateral .navegacion-principal { order: 2; }
.lateral .navegacion-principal a { margin: 0; }
.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 { 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; }
.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); }
/* 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; }

/* Riel de iconos y acordeón: el ancho de 64px permanece en el flujo; la
   versión ancha se superpone al contenido para que éste no se reacomode. */
.lateral { width: 64px; overflow: visible; z-index: 10; transition: none; }
.lateral .marca, .lateral .navegacion-acordeon { width: 64px; box-sizing: border-box;
  background: var(--sidebar-bg); transition: width 0.18s ease; overflow: hidden; }
.lateral .marca { flex: none; padding: 1.1rem 1rem; min-height: 3.9rem; white-space: nowrap; }
.lateral .navegacion-acordeon { display: flex !important; flex: 1; flex-direction: column; gap: 0.1rem;
  padding: 0.35rem 0.45rem 0.75rem; overflow: hidden; }
.lateral:hover .marca, .lateral:focus-within .marca,
.lateral:hover .navegacion-acordeon, .lateral:focus-within .navegacion-acordeon,
html.sc-lateral-fijado .lateral .marca, html.sc-lateral-fijado .lateral .navegacion-acordeon { width: 240px; }
.lateral .marca .etiqueta { opacity: 0; transition: opacity 0.12s ease; }
.lateral:hover .marca .etiqueta, .lateral:focus-within .marca .etiqueta,
html.sc-lateral-fijado .lateral .marca .etiqueta { opacity: 1; }
.lateral-toggle { right: -0.8rem; }
.modulo-acordeon { flex: none; min-width: 0; }
.modulo-disparador { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 2.5rem;
  padding: 0.5rem 0.55rem; background: transparent; color: #DCE9ED; border: 0; border-radius: var(--radio-chico);
  box-shadow: none; text-align: left; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.modulo-disparador:hover, .modulo-disparador[aria-expanded="true"] { background: var(--sidebar-hover); color: white; }
.modulo-disparador svg { width: 1.15rem; height: 1.15rem; flex: none; stroke: #9DBDC7; }
.modulo-disparador:hover svg, .modulo-disparador[aria-expanded="true"] svg { stroke: white; }
.modulo-disparador .etiqueta { overflow: hidden; text-overflow: ellipsis; }
.panel-submodulos { max-height: min(45vh, 20rem); overflow-y: auto; padding: 0.1rem 0 0.35rem 0.45rem; }
.panel-submodulos[hidden] { display: none !important; }
html:not(.sc-lateral-fijado) .lateral:not(:hover):not(:focus-within) .panel-submodulos { display: none !important; }
.panel-submodulos a { padding-top: 0.4rem; padding-bottom: 0.4rem; }
html.sc-lateral-fijado .lateral-toggle { transform: rotate(180deg); }
html.sc-lateral-fijado .lateral, html.sc-lateral-colapsado .lateral { width: 64px; min-width: 64px; overflow: visible; border: none; }
html.sc-lateral-colapsado .lateral-expandir { display: none; }

@media (max-width: 767px) {
  .lateral, html.sc-lateral-fijado .lateral, html.sc-lateral-colapsado .lateral { width: 17rem; min-width: 0; }
  .lateral .marca, .lateral .navegacion-acordeon,
  .lateral:hover .marca, .lateral:focus-within .marca,
  .lateral:hover .navegacion-acordeon, .lateral:focus-within .navegacion-acordeon,
  html.sc-lateral-fijado .lateral .marca, html.sc-lateral-fijado .lateral .navegacion-acordeon { width: 17rem; }
  .lateral .marca .etiqueta { opacity: 1; }
  html:not(.sc-lateral-fijado) .lateral:not(:hover):not(:focus-within) .panel-submodulos:not([hidden]) { display: block !important; }
}

/* 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; } }
