/* ============================================================
   SCAE · Pantalla de entrada y estado de sesion
   ------------------------------------------------------------
   Hereda marca/scae-design-system.css y css/tablero.css. NO
   redefine colores ni tipografias: todo sale de las variables.

   Es la unica hoja del proyecto que da por buenos los haces
   animados (.fondo-lineas), porque es la unica pantalla sin datos
   detras. El fondo verde animado es el escenario; la tarjeta es
   clara y ahi vive todo lo que hay que leer.

   Tambien vive aqui el velo de sesion vencida y el pie de cuenta
   del lateral, para no ensuciar tablero.css con algo que solo
   existe cuando hay autenticacion.
   ============================================================ */

/* ============ ESCENARIO ============ */

/* La cascara del tablero es un grid de dos columnas. En la
   entrada no hay lateral, asi que se desarma. */
body.scae-entrada #app.app{
  display:block;
  min-height:100dvh;
}
body.scae-entrada{overflow-x:hidden}

.entrada-envoltura{position:relative;min-height:100dvh}

/* Dos filas: el bloque central se lleva el espacio libre y se
   centra dentro de el; el pie queda pegado abajo. */
.entrada{
  position:relative;z-index:1;
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  gap:20px;
  padding:40px 20px 28px;
}
.entrada-centro{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:26px;width:100%;
}

/* ============ MARCA ============ */

.entrada-marca{text-align:center;margin-bottom:2px}
.entrada-marca h1{
  font-size:46px;line-height:1;margin:0 0 12px;
  letter-spacing:6px;font-weight:600;
}
.entrada-marca .kicker{font-size:11px;letter-spacing:2.5px}

/* ============ LA TARJETA ============
   400px, padding 40px, radio 12px. Sobre la version compacta de
   .tarjeta del tablero hay que reponer el margen negativo del
   hilo de oro o se descuadra. */

.entrada-caja{
  width:400px;max-width:100%;
  padding:40px 36px 34px;
  border-radius:var(--r-card);
  box-shadow:var(--s-3), 0 0 0 1px rgba(200,160,59,.10);
  overflow:hidden;
  display:block;
}
.entrada-caja::before{margin:-40px -36px 24px}

.entrada-caja h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:30px;line-height:1.15;margin:0 0 6px;color:var(--verde);
}
.entrada-caja > p.mini{margin:0 0 18px}
.entrada-caja .sep{margin:20px 0 14px}

.entrada-legal{
  display:block;font-size:11.5px;line-height:1.5;color:var(--gris);
}
.entrada-quien{
  margin-top:10px;color:var(--gris);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}

/* ---- Campos: 48px de alto y 16px de cuerpo ----
   Los 16px no son estetica. Por debajo de eso Safari en iPhone
   hace zoom al enfocar el campo y descoloca la pantalla. El
   abogado entra desde el celular entre audiencias: ese es el caso
   principal, no el excepcional. */
.entrada-caja .campo{margin-bottom:14px}
.entrada-caja .campo label{font-size:13px;margin-bottom:6px;color:var(--verde)}
.entrada-caja .campo input{
  height:48px;
  font-size:16px;
  padding:12px 14px;
  border-radius:var(--r-box);
  background:#fff;
  border:1px solid #D6D6CC;
  color:var(--verde);
  width:100%;
  font-family:'Inter',system-ui,sans-serif;
  box-shadow:inset 0 1px 2px rgba(15,46,37,.05);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.entrada-caja .campo input:focus{
  outline:none;border-color:var(--oro);box-shadow:0 0 0 4px rgba(200,160,59,.16);
}
.entrada-caja .campo input[readonly]{
  background:var(--lienzo);color:var(--gris);cursor:default;
}

/* ---- El unico boton dorado de la pantalla ---- */
.entrada-caja .btn-oro{
  width:100%;margin-top:6px;padding:14px 24px;font-size:15.5px;
}

/* ---- Enlace de texto, no boton ---- */
.entrada-enlace{
  display:block;width:100%;margin-top:14px;
  background:none;border:none;padding:0;
  color:var(--oro-texto);font-family:'Inter',system-ui,sans-serif;
  font-weight:600;text-align:center;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(126,97,26,.35);
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease);
}
.entrada-enlace:hover{color:var(--verde);text-decoration-color:rgba(15,46,37,.5)}

/* ---- Avisos dentro de la tarjeta ---- */
.entrada-caja .aviso{margin:0 0 14px;font-size:13px;line-height:1.45}
.entrada-nota{
  margin:0 0 14px;padding:10px 12px;border-radius:var(--r-box);
  background:rgba(200,160,59,.10);
  border:1px solid rgba(200,160,59,.30);
  color:var(--oro-texto);line-height:1.45;
}

/* ---- Cambios sin enviar ---- */
.entrada-pendientes{
  margin:0 0 16px;padding:12px 14px;border-radius:var(--r-box);
  background:rgba(184,121,28,.10);
  border:1px solid rgba(184,121,28,.32);
  color:var(--alerta);font-size:13px;line-height:1.45;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.entrada-pendientes .btn{padding:7px 14px;font-size:12.5px}

/* ============ LOS CUATRO ESTADOS ============
   reposo · enviando · error · exito */

/* Enviando: barra de 4px pegada bajo el borde superior. Es el
   unico lugar del tablero donde el barrido dorado del design
   system aporta algo, porque aqui si hay una espera de red real. */
.entrada-progreso{
  position:absolute;top:0;left:0;right:0;
  opacity:0;transition:opacity .2s var(--ease);
  pointer-events:none;
}
.entrada-caja.enviando .entrada-progreso{opacity:1}
.entrada-progreso .prog-bar{border-radius:0;background:rgba(15,46,37,.08)}
.entrada-progreso .prog-fill{border-radius:0}

/* Error: 240ms con la curva unica del sistema. */
.entrada-caja.sacude{animation:scae-sacude .24s var(--ease)}
@keyframes scae-sacude{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-7px)}
  55%{transform:translateX(6px)}
  80%{transform:translateX(-3px)}
}

/* Exito: sale antes de que se pinte la cascara. */
.entrada-caja.entrada-salida{
  animation:scae-salida .26s var(--ease) forwards;
  pointer-events:none;
}
@keyframes scae-salida{to{opacity:0;transform:translateY(-8px)}}

/* ============ PIE ============ */
.entrada-pie{
  color:rgba(231,234,228,.52);
  text-align:center;max-width:420px;
  line-height:1.5;
}

/* ============ SESION VENCIDA ============
   No se redirige: el tablero se ve detras, borroso, y se entiende
   que sigue ahi. Un admin a mitad de un formulario de tuberia no
   pierde el trabajo. */

.velado-sesion{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}
.velo-sesion{
  position:fixed;inset:0;z-index:160;
  background:rgba(11,31,25,.55);
  -webkit-backdrop-filter:saturate(.9);backdrop-filter:saturate(.9);
  display:grid;place-items:center;
  padding:24px 20px;overflow:auto;
}
.velo-sesion .entrada-caja{margin:auto}

/* ============ PIE DE CUENTA DEL LATERAL ============
   Nombre, estudio y salida. El modo se ve, no se adivina. */

.cuenta-lateral{
  margin-top:auto;
  padding:14px 20px 0;
  border-top:1px solid rgba(200,160,59,.14);
  display:flex;flex-direction:column;gap:7px;
}
.cuenta-lateral .quien{
  font-size:13px;font-weight:600;color:#E7EAE4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cuenta-lateral .donde{
  font-size:11px;color:rgba(231,234,228,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cuenta-lateral .salir{
  align-self:flex-start;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:600;
  color:rgba(227,197,104,.78);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(227,197,104,.3);
  transition:color .2s var(--ease);
}
.cuenta-lateral .salir:hover{color:var(--champan)}

/* Pildora de modo. NO se usa .chip metalico: en este sistema el
   metal lee como accion, y esto es una etiqueta de estado. */
.modo-pill{
  align-self:flex-start;
  display:inline-block;
  font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;font-weight:700;
  padding:4px 12px;border-radius:var(--r-pill);
  color:var(--oro-claro);
  border:1px solid rgba(200,160,59,.35);
  background:rgba(200,160,59,.07);
}
.modo-pill.alerta{
  color:#F0C27A;
  border-color:rgba(184,121,28,.5);
  background:rgba(184,121,28,.12);
}

/* Bajo 900px tablero.css convierte el lateral en una tira
   horizontal con scroll. El bloque de cuenta tiene que acompanar:
   en columna, con borde superior y margin-top:auto, empujaria la
   navegacion y se veria como un error. */
@media (max-width:900px){
  .cuenta-lateral{
    margin-top:0;margin-left:auto;
    flex:0 0 auto;
    flex-direction:row;align-items:center;gap:10px;
    padding:0 4px 0 12px;
    border-top:none;
    border-left:1px solid rgba(200,160,59,.14);
  }
  .cuenta-lateral .quien{max-width:130px;font-size:12.5px}
  .cuenta-lateral .donde{display:none}
  .cuenta-lateral .salir,
  .cuenta-lateral .modo-pill{align-self:center;white-space:nowrap}
}

/* ============ MOVIL (<=480px) ============
   La tarjeta se ancla arriba para que el teclado no la empuje
   fuera de la vista. */
@media (max-width:480px){
  .entrada{
    padding:8vh 10px 24px;
    gap:18px;
  }
  /* Anclada arriba: si se centra, el teclado del celular la
     empuja fuera de la vista al enfocar el campo. */
  .entrada-centro{justify-content:flex-start;gap:20px}
  .entrada-marca h1{font-size:34px;letter-spacing:4px}
  .entrada-marca .kicker{font-size:10px;letter-spacing:2.2px}
  .entrada-caja{
    width:100%;
    padding:28px 22px 24px;
  }
  .entrada-caja::before{margin:-28px -22px 20px}
  .entrada-caja h2{font-size:26px}
  .entrada-pie{align-self:center;margin-top:6px}
  .velo-sesion{align-items:start;padding:16px 10px}
}

/* ============ MOVIMIENTO REDUCIDO ============
   El design system ya apaga .fondo-lineas y acorta transiciones.
   Aqui se quitan ademas el temblor y la salida, que sin duracion
   quedarian como un salto seco. */
@media (prefers-reduced-motion:reduce){
  .entrada-caja.sacude{animation:none}
  .entrada-caja.entrada-salida{animation:none;opacity:0}
  .velado-sesion{filter:none;opacity:.35}
}