/* Sistema de diseno Aurox: estructura y vidrio del handoff «Aurox Contable»,
   color de la marca de Ger (diseno/marca/tokens.json).
   GENERADO por tools/portar_vistas.mjs desde el prototipo del handoff.
   No editar a mano: se regenera. Lo que se escribe a mano va en aurox.js. */

@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
x-dc { display: none !important; }
.scp0:hover { border-color: var(--accent2) !important; color: var(--accent2) !important; }
.scp1:hover { background: var(--chip) !important; color: var(--head) !important; }
.scp2:hover { box-shadow: color-mix(in srgb, var(--accent) 40%, transparent) 0px 14px 34px !important; transform: translateY(-1px) !important; }
.scp3:hover { box-shadow: color-mix(in srgb, var(--accent) 45%, transparent) 0px 22px 50px !important; transform: translateY(-2px) !important; }
.scp4:hover { color: var(--accent2) !important; }
.scp5:hover { transform: scale(1.04) !important; }
.scp6:hover { transform: scale(1.04) !important; box-shadow: var(--glass) !important; }
.scp7:hover { border-color: var(--accent) !important; transform: translateY(-3px) !important; }
.scp8:hover { transform: scale(1.05) !important; box-shadow: var(--glass) !important; }
.scp9:hover { box-shadow: color-mix(in srgb, var(--accent) 40%, transparent) 0px 16px 40px !important; }
.scpa:hover { transform: translateY(-4px) !important; border-color: var(--accent2) !important; }
.scpb:hover { border-color: var(--accent2) !important; color: var(--head) !important; }
.scpc:hover { transform: translateY(-5px) !important; border-color: var(--accent2) !important; }
.scpd:hover { border-color: var(--accent2) !important; }
.scpe:hover { opacity: 0.85 !important; }
.scpf:hover { border-color: var(--line2) !important; color: var(--text) !important; }
:root:not([data-tema]), [data-tema="oscuro"] { --bg: #162230; --panel: rgba(255,255,255,.045); --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.18); --chip: rgba(255,255,255,.08); --head: #f8fafd; --text: #e5eaf0; --text2: #c6cfd8; --muted: #a6b3c1; --faint: #9aa6b3; --accent: #7aacd9; --accentFg: #162230; --accent2: #b1d7f2; --invBg: #f8fafd; --invFg: #162230; --orb1: rgba(122,172,217,0.18); --orb2: rgba(46,133,166,0.22); --accOpen: rgba(1,102,130,0.3); --numStroke: rgba(255,255,255,.55); --grid: rgba(255,255,255,.05); --stripe1: rgba(255,255,255,.07); --stripe2: rgba(255,255,255,.02); --glass: inset 0 1px 1px rgba(255,255,255,.12), 0 20px 44px rgba(0,0,0,.36); --ok: #5fd39f; --okBg: rgba(95,211,159,0.14); --warn: #fcbf26; --warnBg: rgba(252,191,38,0.14); --bad: #f87172; --badBg: rgba(248,113,114,0.14); --pendBg: rgba(251,146,60,.09); --pendLine: rgba(251,146,60,.24); --pendFg: #fbbf8f; --wordmark: #bebebe; --isotipo: #7aacd9; --serie1: #7aacd9; --serie2: #2e85a6; --serie3: #fcbf26; }
[data-tema="claro"] { --bg: #eff3f6; --panel: rgba(255,255,255,.42); --line: rgba(255,255,255,.85); --line2: rgba(22,34,48,0.14); --chip: rgba(22,34,48,0.06); --head: #162230; --text: #232f3e; --text2: #344153; --muted: #566477; --faint: #586475; --accent: #016682; --accentFg: #fafcfe; --accent2: #0e5471; --invBg: #162230; --invFg: #ffffff; --orb1: rgba(1,102,130,0.2); --orb2: rgba(122,172,217,0.3); --accOpen: #eaf2f9; --numStroke: rgba(22,34,48,0.38); --grid: rgba(22,34,48,0.05); --stripe1: rgba(22,34,48,0.06); --stripe2: rgba(22,34,48,0.015); --glass: inset 0 1px 1px #ffffff, inset 0 -1px 1px rgba(255,255,255,.5), 0 18px 44px rgba(22,34,48,0.14); --ok: #267252; --okBg: rgba(38,114,82,0.12); --warn: #905200; --warnBg: rgba(251,191,36,.18); --bad: #b91c1c; --badBg: rgba(185,28,28,0.12); --pendBg: rgba(251,146,60,.1); --pendLine: rgba(251,146,60,.35); --pendFg: #9a3412; --wordmark: #162230; --isotipo: #016682; --serie1: #016682; --serie2: #548cb9; --serie3: #905200; }
html { overflow-x: hidden; }
body { margin: 0px; background: #162230; }
a { color: inherit; text-decoration: none; }
@keyframes floatOrb { 
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(30px, 50px) scale(1.05); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes pulseDot { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0px); }
}

/* ── Anadidos del portal, no del prototipo ───────────────────────────────────
   Van aparte a proposito: arriba es la replica, aqui lo que se agrego y por que.

   1. Sol y luna. El prototipo pinta un icono u otro segun el estado; la replica
      lleva los dos en el HTML y esconde uno con CSS, para que el cambio de tema
      no dependa de que el JS reconstruya un <svg>. */
[data-tema="oscuro"] [data-icono-luna] { display: none; }
[data-tema="claro"] [data-icono-sol] { display: none; }

/* Lo mismo para el conmutador del area de cliente, que usa .dia/.noche.
   Nunca tuvo la regla: el boton mostraba "Modo dia" Y "Modo noche" al mismo
   tiempo, asi que no decia que iba a pasar al picarle. Se muestra SIEMPRE el
   modo al que se va, no el que se tiene. */
[data-tema="oscuro"] .noche { display: none; }
[data-tema="claro"]  .dia   { display: none; }

/* 2. Fondo del <body>. El prototipo lo deja fijo en el azul del modo oscuro.
      En modo claro eso no se ve nunca... salvo al rebotar el scroll en los
      extremos, donde asoma una franja oscura. Se corrige solo ahi. */
html[data-tema-inicial="claro"] body { background: #eff3f6; }

/* 3. Foco visible. Los controles del prototipo son <a> y <article> sin href:
      con el teclado no se ven ni se activan. El JS los activa, esto los hace
      visibles. Sin esto no es entregable. */
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 4px; }

/* 4. WhatsApp flotante. Crece al pasar encima, y en pantalla chica se queda
      redondo: en un telefono la etiqueta se come el ancho justo donde hay
      menos. El :hover se declara aqui y no en el style inline porque un
      atributo style no puede llevar pseudo-clases. */
[data-wpp-flotante]:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px rgba(37,211,102,.4) !important; }
/* El !important no es pereza: el boton lleva su tamano en un atributo style
   (viene armado desde el conversor) y un atributo style le gana a cualquier
   hoja externa. Sin esto el media query solo lograba esconder el texto y el
   boton quedaba ovalado, 58x50, en vez de redondo. */
@media (max-width: 640px) {
  [data-wpp-flotante] { right: 16px !important; bottom: 16px !important; padding: 14px !important; }
  [data-wpp-texto] { display: none; }
}

/* 6. La pantalla de entrar, en telefono.
      Jose, 2026-09-09: "falta que la pagina donde iniciamos sesion este a doc
      con la version movil, ya que se corta a la mitad el inicio de sesion".

      El prototipo se diseno a 1440 y pone la reja de dos columnas en un atributo
      style inline. En un telefono la tarjeta no desborda —lleva
      overflow hidden— asi que la mitad derecha, que es el formulario entero,
      se RECORTA y desaparece. Medido con tools/ver_acceso.mjs: a 360, 390 y 430
      el campo del correo cae fuera de la pantalla; a 768 y 1280 se ve.

      Todo va con !important porque compite contra atributos style inline, y
      un atributo style le gana a cualquier hoja externa. No es pereza: es la
      unica forma de ajustar markup que viene con el estilo pegado.

      El formulario se pone PRIMERO (order: -1): quien abre /entrar viene a
      entrar, no a leer que hay dentro. La lista queda debajo, para el que
      llegue de curioso. */
@media (max-width: 767px) {
  .acc-centro {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 36px !important;
    min-height: 100dvh !important;
    align-items: flex-start !important;
  }
  .acc-tarjeta { grid-template-columns: 1fr !important; }
  .acc-form {
    order: -1;
    padding: 26px 20px 28px !important;
  }
  .acc-lado {
    padding: 22px 20px 26px !important;
    border-right: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  /* El titulo de la izquierda es un display de 34px pensado para media pantalla
     de escritorio; en 360px se come cuatro renglones antes de lo demas. */
  .acc-lado h1, .acc-lado h2 { font-size: 26px !important; }
}

/* 7. Lo que se toca con el DEDO, en el sitio publico.
      Hasta 1024px, que es el corte que ya usa el portal: cubre el telefono y la
      tablet en vertical, donde a 768 seguian ocho blancos del nav entre 32 y
      37px de alto.

      Se probo antes con hover:none, que describe mejor la intencion —"esto se
      toca"— y se retiro: Chrome headless no cambia esa media feature al emular
      un telefono, asi que la regla no se podia MEDIR. Quedaba escrita y sin
      comprobar, que es peor que no estar. El ancho se mide con la sonda que ya
      existe, y su control a 1280 sigue limpio.

      AQUI NO VA el nav. Se probo darle 44px de alto a sus ocho enlaces —miden
      entre 32 y 37— y se midio el precio con tools/ver_publico_movil.mjs: el
      nav va fijo y CRECIA 63px en telefono (de 189 a 252, un tercio de la
      pantalla) y 51 en tablet, y ahi pasaba de limpio a taparle el primer
      renglon a /, /plataformas y /empresas. El defecto que arreglaba era menor
      que el que metia, y el nav sale en todas las paginas publicas, que no es
      lo que se pidio. Queda declarado como pendiente del sitio publico: para
      subirlos hay que compactar el nav en telefono, no estirarlo. */
@media (max-width: 1024px) {
  /* Sitio para el nav. Los 150px de arriba del prototipo eran para el nav de
     escritorio, que termina en y=102; en una tablet de 768 termina en y=198 y
     en un telefono de 390 en y=252, porque se parte en tres filas. La tarjeta
     empezaba por encima de eso y el nav se le encimaba.

     El alto NO se escribe a mano: lo publica el propio nav en --nav-alto
     (aurox.js), y se vuelve a medir al girar el aparato. Un numero fijo se
     rompe el dia que el nav cambie de filas y no avisa. Los 252px del respaldo
     son los medidos en un telefono de 390, para que la pantalla siga sirviendo
     si el JS no llega a correr. */
  .acc-centro { padding-top: calc(var(--nav-alto, 252px) + 20px) !important; }

  /* Un campo por debajo de 16px hace que el telefono acerque la pagina al
     enfocarlo y la deje descuadrada. Y lo que se toca, a 46px. */
  .acc-form input:not([type="checkbox"]),
  .acc-form button {
    font-size: 16px !important;
    min-height: 46px !important;
  }
  .acc-form input[type="checkbox"] { width: 20px !important; height: 20px !important; }
  /* La casilla de "mantener la sesion": lo que se toca es la ETIQUETA entera,
     no el cuadrito. Se le da alto de dedo para que el blanco real llegue a 44. */
  .acc-form label { min-height: 44px !important; }
  /* Un enlace suelto dentro del texto ("escribenos") medía 16px de alto. Va por
     el contenedor y no por "p a": ahi el enlace cuelga de un <span>, y el
     selector mas bonito no casaba nada. */
  .acc-form a, .acc-lado a { display: inline-block; padding-block: 14px; }
}

/* 5. Menos movimiento para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
}