/* Fold · LA PRIMERA ENTRADA (13/10/2026, claude-a/entrada-visual).
   La pantalla que se ve antes de entrar: inicio de sesión, alta de la empresa y la contraseña del ordenador. Dos mitades:
   a la izquierda la marca (Fold, qué es, lo que se queda en el ordenador); a la derecha un FOLIO, la misma hoja de papel con
   la esquina doblada en cobalto que es el logo, y dentro el formulario. En un móvil o una ventana estrecha, la marca pasa a
   una línea y el folio ocupa el ancho.
   Reglas que se respetan (docs/context/interfaz-calma.md): un solo cobalto, nada de cristal ni de degradados de colores, el
   error en ámbar y en llano (no en rojo), todo objetivo de 44 px o más, y el contenido a la vista desde el primer instante:
   no hay pantalla de carga ni animación de entrada que lo tape. Sin recursos de fuera (ni fuentes, ni imágenes, ni CDN) y
   sin movimiento propio: lo único que se mueve es el componente de Fold (fold-animado.css), que ya respeta prefers-reduced-motion.
   Todo cuelga de #entrada-pantalla: las pantallas que reutilizan .entrada-caja (404, borrado pendiente) y los formularios de
   Cuenta que usan .entrada-form quedan como estaban. */

#entrada-pantalla[hidden] { display: none; }
#entrada-pantalla [hidden] { display: none !important; }
#entrada-pantalla {
  --lado-ancho: 380px;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; align-items: start;
  row-gap: 18px; padding: 18px 16px 28px;
  background: radial-gradient(120% 90% at 20% -10%, var(--grafito-alto) 0%, var(--grafito) 60%);
  --sombra-folio: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) drop-shadow(0 22px 30px rgba(0, 0, 0, .34));
}
:root[data-tema="claro"] #entrada-pantalla { --sombra-folio: drop-shadow(0 1px 1px rgba(16, 17, 20, .12)) drop-shadow(0 18px 28px rgba(16, 17, 20, .13)); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) #entrada-pantalla { --sombra-folio: drop-shadow(0 1px 1px rgba(16, 17, 20, .12)) drop-shadow(0 18px 28px rgba(16, 17, 20, .13)); }
}

/* ------------------------------------------------------------------ la marca (a la izquierda) */
#entrada-pantalla .entrada-lado { width: 100%; max-width: 480px; color: var(--papel); text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
#entrada-pantalla .entrada-lado-marca { display: flex; align-items: center; gap: 10px; }
#entrada-pantalla .entrada-fold { width: 60px; height: 52px; flex: none; }
#entrada-pantalla .entrada-lado-nombre { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'wdth' 118; }
#entrada-pantalla .entrada-lado-titulo { margin: 0; font-size: 1rem; font-weight: 500; color: var(--papel-apagado); }
#entrada-pantalla .entrada-lado-texto, #entrada-pantalla .entrada-lado-lista { display: none; }
#entrada-pantalla .entrada-lado-lista { list-style: none; margin: 0; padding: 0; }
/* Lo que depende del sitio (nube o este ordenador) solo se dice cuando se sabe cuál es (entrada.js pone data-modo). */
#entrada-pantalla .entrada-lado-lista [data-solo] { display: none; }
#entrada-pantalla[data-modo="nube"]:not([data-codigo]):is([data-caja="caja-entrada"], [data-caja="caja-registro"], [data-alta]) .entrada-lado-lista [data-solo="gratis"],
#entrada-pantalla[data-modo="nube"][data-instalador] .entrada-lado-lista [data-solo="instalador"],
#entrada-pantalla[data-modo="local"] .entrada-lado-lista [data-solo="local"] { display: list-item; }

@media (min-width: 900px) {
  #entrada-pantalla {
    grid-template-columns: minmax(300px, var(--lado-ancho)) minmax(0, 600px); justify-content: center; align-items: center; justify-items: start;
    column-gap: clamp(48px, 7vw, 112px); padding: 28px 48px;
  }
  #entrada-pantalla .entrada-lado { display: block; max-width: var(--lado-ancho); }
  #entrada-pantalla .entrada-lado-marca { gap: 16px; margin-bottom: 26px; align-items: flex-end; }
  #entrada-pantalla .entrada-fold { width: 112px; height: 98px; }
  #entrada-pantalla .entrada-lado-nombre { font-size: 3rem; padding-bottom: 6px; }
  #entrada-pantalla .entrada-lado-titulo { margin: 0 0 10px; font-size: 1.5rem; font-weight: 650; line-height: 1.22; letter-spacing: -.012em; color: var(--papel); }
  #entrada-pantalla .entrada-lado-texto { display: block; margin: 0 0 26px; font-size: 1.04rem; line-height: 1.55; color: var(--papel-apagado); max-width: 38ch; }
  #entrada-pantalla .entrada-lado-lista { display: grid; gap: 13px; }
  #entrada-pantalla .entrada-lado-lista li { position: relative; padding-left: 24px; font-size: .96rem; line-height: 1.45; font-weight: 500; color: var(--papel); }
  #entrada-pantalla .entrada-lado-lista li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; border-radius: 1px; background: var(--cobalto); }
}
@media (min-width: 900px) and (max-height: 700px) {
  #entrada-pantalla .entrada-lado-marca { margin-bottom: 18px; }
  #entrada-pantalla .entrada-lado-texto { margin-bottom: 18px; }
}

/* ------------------------------------------------------------------ el folio (a la derecha) */
#entrada-pantalla .entrada-caja {
  /* Dentro del folio todo es tinta sobre papel, en el tema que sea: se vuelven a poner los tonos que usan las reglas de siempre. */
  --papel: #15171B; --papel-apagado: #42454C; --papel-tenue: #595C63;
  /* pc-b/estructura (27/10): el folio de la entrada es papel claro en los dos temas (el de la paleta cambia con el tema), y sin blanco puro. */
  --superficie-papel: #F6F3EE; --grafito: #F2EEE6; --grafito-alto: #FBF9F5; --superficie: #FBF9F5; --superficie-hover: #F7F5EF;
  --costura: rgba(21, 23, 27, .14); --costura-fuerte: #8A8478;
  --cobalto-claro: #2440C4; --ambar-texto: #5C3600; --ambar-tenue: rgba(245, 165, 36, .17);
  --anillo-foco: 0 0 0 3px rgba(51, 88, 255, .30);
  color-scheme: light;   /* casillas, listas y barras nativas: claras, que es lo que hay dentro de un folio */
  position: relative; isolation: isolate; width: 100%; max-width: 480px; text-align: left; color: var(--papel);
  padding: 38px 40px 28px; background: transparent; filter: var(--sombra-folio);
}
#entrada-pantalla #caja-registro { max-width: 600px; }
/* La hoja: papel con la esquina de arriba a la derecha cortada, y la esquina doblada en cobalto (como el logo). */
#entrada-pantalla .entrada-caja::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--superficie-papel);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}
#entrada-pantalla .entrada-caja::after {
  content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px; border-bottom-left-radius: 4px;
  background: linear-gradient(225deg, transparent 50%, #2440C4 50%, #2440C4 calc(50% + 4px), #3358FF calc(50% + 4px));
}

#entrada-pantalla .entrada-marca { align-items: flex-start; text-align: left; gap: 8px; margin: 0 0 22px; }
#entrada-pantalla .entrada-marca .fold-vector { display: none; }
#entrada-pantalla .entrada-marca h1 { font-size: 1.65rem; line-height: 1.15; letter-spacing: -.022em; font-variation-settings: 'wdth' 112; color: var(--papel); padding-right: 30px; }
#entrada-pantalla .entrada-marca p { font-size: .98rem; line-height: 1.5; color: var(--papel-apagado); }

/* «Paso 2 de 3 · Tu correo»: tres rayitas (las hechas, en cobalto) y el texto, que es lo que lee quien no ve las rayas. */
#entrada-pantalla .entrada-paso { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: .8rem; font-weight: 650; letter-spacing: .01em; color: var(--papel-apagado); }
#entrada-pantalla .entrada-paso-barras { display: inline-flex; gap: 4px; flex: none; }
#entrada-pantalla .entrada-paso-barras i { display: block; width: 22px; height: 4px; border-radius: 2px; background: rgba(21, 23, 27, .17); }
#entrada-pantalla .entrada-paso[data-n="1"] i:nth-child(1),
#entrada-pantalla .entrada-paso[data-n="2"] i:nth-child(-n+2),
#entrada-pantalla .entrada-paso[data-n="3"] i { background: #3358FF; }

/* Campos */
#entrada-pantalla .entrada-form { gap: 12px; }
#entrada-pantalla .entrada-campo { gap: 5px; }
#entrada-pantalla .entrada-campo label { font-size: .86rem; font-weight: 600; color: var(--papel); }
#entrada-pantalla .entrada-campo input, #entrada-pantalla .entrada-campo select {
  height: 46px; min-height: 44px; padding: 0 14px; font-size: 1rem; color: var(--papel); background-color: #FFFFFF;
  border: 1px solid var(--costura-fuerte); border-radius: 8px; transition: border-color .15s, box-shadow .15s;
}
#entrada-pantalla .entrada-campo input:hover, #entrada-pantalla .entrada-campo select:hover { border-color: #5E5A51; }
#entrada-pantalla .entrada-campo input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: #3358FF; box-shadow: var(--anillo-foco); }
#entrada-pantalla .entrada-campo select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #15171B 50%), linear-gradient(135deg, #15171B 50%, transparent 50%);
  background-position: calc(100% - 21px) 20px, calc(100% - 16px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#entrada-pantalla .entrada-campo input:-webkit-autofill { -webkit-text-fill-color: #15171B; -webkit-box-shadow: 0 0 0 40px #FFFFFF inset; }
#entrada-pantalla .letra-pequena, #entrada-pantalla .letra-pequena-clara { font-size: .82rem; line-height: 1.45; color: var(--papel-apagado); }
#entrada-pantalla .entrada-form .pulsador { margin-top: 4px; height: 48px; border-radius: 8px; font-size: 1rem; box-shadow: none; }
#entrada-pantalla .entrada-form .pulsador:hover:not(:disabled) { background: #2D4DE0; }

/* El aviso: ámbar suave y en llano. Nada de rojo ni de ventanas. */
#entrada-pantalla .entrada-error { margin: 0; padding: 10px 12px; border-left: 3px solid #F5A524; border-radius: 0 6px 6px 0; background: var(--ambar-tenue); font-size: .92rem; line-height: 1.45; color: var(--ambar-texto); }
#entrada-pantalla .entrada-error:empty { display: none; }
/* «Ya existe» (27/10/2026): no es un error, es un aviso con salida. En cobalto suave, con sus botones debajo. */
#entrada-pantalla .registro-ya-existe { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border-left: 3px solid #3358FF; border-radius: 0 6px 6px 0; background: #EEF1FF; }
#entrada-pantalla .registro-ya-existe p { margin: 0; font-size: .95rem; line-height: 1.45; font-weight: 600; color: var(--papel); }
#entrada-pantalla .registro-ya-existe-botones { display: flex; flex-wrap: wrap; gap: 8px; }
#entrada-pantalla .entrada-form .registro-ya-existe-botones > * { flex: 1 1 200px; width: auto; margin-top: 0; }
/* Con el aviso a la vista, lo que se hace es lo del aviso: «Crear cuenta» pasa a segundo plano (sigue ahí por si se cambia el correo). */
#entrada-pantalla .registro-ya-existe:not([hidden]) ~ #registro-enviar { color: var(--papel); background: #FFFFFF; border: 1px solid var(--costura-fuerte); }

#entrada-pantalla .entrada-check { align-items: center; gap: 10px; font-size: .88rem; color: var(--papel); }
#entrada-pantalla .entrada-check input { margin-top: 0; }
#entrada-pantalla .entrada-check a { color: #2440C4; text-underline-offset: 2px; }

/* Los otros caminos */
#entrada-pantalla .metodo-boton { height: 46px; font-size: .95rem; color: var(--papel); background: #FFFFFF; border: 1px solid var(--costura-fuerte); border-radius: 8px; transition: border-color .15s, background-color .15s; }
#entrada-pantalla .metodo-boton:hover { border-color: #3358FF; background: #F7F8FF; }
#entrada-pantalla .entrada-enlace { margin-top: 6px; font-size: .9rem; text-align: center; color: #2440C4; text-underline-offset: 3px; }
#entrada-pantalla .entrada-enlace:hover { text-decoration: underline; }
#entrada-pantalla .separador-metodos { margin: 18px 0 12px; font-size: .8rem; color: var(--papel-tenue); }
#entrada-pantalla .separador-metodos::before, #entrada-pantalla .separador-metodos::after { background: var(--costura); }
#entrada-pantalla .entrada-pie { margin: 14px 0 0; text-align: center; font-size: .76rem; color: var(--papel-tenue); }
#entrada-pantalla .tarjeta-empresa { background: #FFFFFF; border-color: var(--costura-fuerte); }

/* La entrada con todas sus formas de entrar (en la nube): Google y Microsoft lado a lado, la llave debajo, y los enlaces en renglón, para que quepa en 768 px. */
#entrada-pantalla #caja-entrada { text-align: center; }
#entrada-pantalla #caja-entrada .entrada-marca { text-align: left; }
#entrada-pantalla #caja-entrada .metodos-entrada { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#entrada-pantalla #caja-entrada .metodos-entrada #entrar-llave { grid-column: 1 / -1; }
#entrada-pantalla #caja-entrada .metodos-entrada .metodo-boton { padding: 0 8px; font-size: .9rem; white-space: nowrap; }
#entrada-pantalla #caja-entrada .entrada-enlace { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 2px 4px 0; padding: 0 8px; }
#entrada-pantalla #caja-entrada #ir-a-sso { display: flex; width: 100%; margin: 6px 0 0; }
#entrada-pantalla #caja-entrada #ir-a-registro { margin-top: 0; }
#entrada-pantalla .entrada-pie { display: none; }
/* En un Fold instalado, lo que dice cómo recuperar la entrada (un párrafo suelto debajo del botón). */
#entrada-pantalla #fold-olvido-local { margin: 16px 0 0; font-size: .84rem; line-height: 1.5; text-align: center; }

/* El alta en una pantalla de portátil: dos columnas de campos, para que se vea entera sin bajar. */
@media (min-width: 640px) {
  #entrada-pantalla #form-registro { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 11px; }
  #entrada-pantalla #form-registro > * { grid-column: 1 / -1; }
  #entrada-pantalla #form-registro > .entrada-campo:nth-child(-n+4), #entrada-pantalla #form-registro > .entrada-check { grid-column: auto; }
  #entrada-pantalla #form-registro .entrada-check { font-size: .84rem; }
  #entrada-pantalla #form-registro #reg-invitacion-ayuda { font-size: .76rem; line-height: 1.35; }
  #entrada-pantalla #form-registro > .letra-pequena-clara { font-size: .8rem; margin-top: -2px; }
  #entrada-pantalla #caja-registro { padding: 28px 40px 14px; }
  #entrada-pantalla #caja-registro .entrada-paso { margin-bottom: 12px; }
  #entrada-pantalla #caja-registro .entrada-marca { margin-bottom: 16px; gap: 6px; }
  #entrada-pantalla #caja-registro .entrada-enlace { margin-top: 0; }
}
@media (max-width: 560px) {
  #entrada-pantalla .entrada-caja { padding: 30px 20px 22px; }
  #entrada-pantalla .entrada-marca h1 { font-size: 1.45rem; }
}
@media (max-width: 380px) {
  #entrada-pantalla .entrada-lado-titulo { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ «Ver» la contraseña (22/10/2026, ver-contrasena.js) y «Entrar sin contraseña» junto a «Entrar» */
#entrada-pantalla .campo-con-ver { position: relative; display: block; width: 100%; }
#entrada-pantalla .campo-con-ver input { width: 100%; box-sizing: border-box; padding-right: 84px; }
#entrada-pantalla .boton-ver-contrasena {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-width: 44px; min-height: 38px; padding: 0 12px;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--papel-apagado); background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
#entrada-pantalla .boton-ver-contrasena:hover { color: var(--papel); background: #F1F2F4; }
#entrada-pantalla .boton-ver-contrasena:focus-visible { outline: 2px solid #3358FF; outline-offset: 1px; }
#entrada-pantalla .entrada-sin-clave { width: 100%; margin-top: 8px; }

/* ------------------------------------------------------------------ Entrar en dos pasos (22/10/2026, entrada-pasos.js)
   Paso 1 (data-paso="correo"): el correo y «Continuar». El campo de la contraseña queda PLEGADO (no quitado: sigue en el formulario
   para los gestores de contraseñas, y al recibir el foco pasa al paso 2). Paso 2 (data-paso="clave"): quién entra y la contraseña. */
#entrada-pantalla #caja-entrada[data-paso="correo"] .pasos-clave,
#entrada-pantalla #caja-entrada[data-paso="clave"] .entrada-campo:has(> #entrada-correo) {
  height: 0; min-height: 0; margin: 0; padding: 0; gap: 0; border: 0; overflow: hidden; pointer-events: none;
}
#entrada-pantalla #caja-entrada[data-paso="correo"] #entrada-enviar,
#entrada-pantalla #caja-entrada[data-paso="correo"] #ir-a-enlace,
#entrada-pantalla #caja-entrada[data-paso="correo"] .pasos-compartido,
#entrada-pantalla #caja-entrada[data-paso="correo"] .pasos-compartido-ayuda,
#entrada-pantalla #caja-entrada[data-paso="correo"] .pasos-quien,
#entrada-pantalla #caja-entrada[data-paso="clave"] .pasos-continuar,
#entrada-pantalla #caja-entrada[data-paso="clave"] .pasos-recordadas { display: none; }
#entrada-pantalla .pasos-continuar { width: 100%; }
#entrada-pantalla .pasos-quien { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 2px; }
#entrada-pantalla .pasos-hola { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--papel); overflow-wrap: anywhere; }
#entrada-pantalla .pasos-no-soy { margin: 0; padding: 0; min-height: 32px; }
#entrada-pantalla .pasos-recordadas { display: grid; gap: 8px; margin: 0 0 16px; }
#entrada-pantalla .pasos-recordadas p { margin: 0; }
#entrada-pantalla .pasos-recordada { height: auto; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 14px; text-align: left; }
#entrada-pantalla .pasos-recordada-nombre { font-weight: 650; }
#entrada-pantalla .pasos-recordada-correo { font-size: .82rem; color: var(--papel-apagado); overflow-wrap: anywhere; }
#entrada-pantalla .pasos-compartido-ayuda { margin: -4px 0 4px; }

@media (prefers-reduced-motion: reduce) {
  #entrada-pantalla *, #entrada-pantalla *::before, #entrada-pantalla *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  #entrada-pantalla .entrada-caja { filter: none; border: 1px solid CanvasText; }
  #entrada-pantalla .entrada-caja::before, #entrada-pantalla .entrada-caja::after { display: none; }
}