/* ============================================================================
   TecnoconIA RRHH · Acceso (login) — sistema de diseño
   ============================================================================

   La puerta de entrada del producto: es lo primero que ve alguien que llega, y
   tiene que reconocerse como TecnoconIA antes de leer una palabra. Una sola
   hoja para las DOS puertas —panel de administración y portal del empleado—
   porque son el mismo producto: lo único que cambia entre ellas es el texto.

   Se carga DESPUÉS de ds.css, que es de donde salen las fuentes ya
   auto-alojadas (Plus Jakarta Sans, IBM Plex Mono). Aquí no se declara ninguna
   @font-face ni se pide nada a un CDN.

   La paleta se escribe fija a propósito: el login es anterior a la sesión, así
   que no hay empresa todavía y el color de marca del cliente no aplica. Lo que
   se ve aquí es TecnoconIA, siempre igual.
   ============================================================================ */

:root{
  --tca-bg:#FBF8F2;         /* arena clara del lado del formulario */
  --tca-surface:#FFFFFF;
  --tca-ink:#22271F;
  --tca-muted:#8A8574;
  --tca-hair:#EBE4D4;
  --tca-dark:#081A0E;
  --tca-lime:#A9CC5E;
  --tca-red:#C6483B;
  --tca-red-bg:#FBE4E1;
  --tca-green:#2F8F5B;
  --tca-green-bg:#E3F3EA;
}

.tca-body{
  margin:0; min-height:100dvh;
  background:var(--tca-bg); color:var(--tca-ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* El texto no se estira nunca a lo ancho de un portátil de 27". */
  overflow-x:hidden;
}
.tca-body *,.tca-body *::before,.tca-body *::after{box-sizing:border-box}

/* Saltar al formulario: quien navega con teclado no tiene por qué recorrer la
   marca y el reclamo en cada intento de acceso fallido. */
.tca-saltar{
  position:absolute; left:14px; top:-60px; z-index:20;
  background:var(--tca-dark); color:#F3F8EE; border-radius:0 0 10px 10px;
  padding:10px 16px; font-size:13px; font-weight:700; text-decoration:none;
  transition:top .14s;
}
.tca-saltar:focus{top:0}

/* ── Carcasa ──────────────────────────────────────────────────────────────
   Móvil primero: cabecera oscura con las partículas y una hoja clara que sube
   por encima. A partir de 900px las dos mitades se ponen una al lado de otra. */
.tca-shell{min-height:100dvh; display:flex; flex-direction:column}

/* ── Mitad oscura ─────────────────────────────────────────────────────── */
.tca-visual{
  position:relative; overflow:hidden; flex:none;
  background:var(--tca-dark);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 34px) 24px 40px;
  min-height:210px;
}
.tca-visual canvas{position:absolute; inset:0; width:100%; height:100%}
/* Halo lima desde abajo a la izquierda: da profundidad sin pedir una imagen. */
.tca-visual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 30% 100%,rgba(169,204,94,.16),transparent 60%);
}

/* ── La marca ─────────────────────────────────────────────────────────────
   `tecnoconia` y, debajo y alineado a la DERECHA, el rótulo «RRHH». Nunca
   centrado: la marca cuelga de su propio borde derecho. Mismas clases que el
   portal y el panel (partials/_tc-marca.blade.php) para que sea la misma
   marca, no una copia parecida. --------------------------------------------- */
.tca-visual .tc-logo{position:relative; z-index:2; text-decoration:none; display:inline-block}
.tca-visual .tc-logo-inner{display:inline-flex; flex-direction:column; align-items:flex-end; width:max-content}
.tca-visual .tc-logo-word{
  font-size:19px; font-weight:600; letter-spacing:-.045em; line-height:1;
  text-shadow:0 0 20px rgba(220,239,212,.85),0 0 46px rgba(220,239,212,.5),0 0 90px rgba(169,204,94,.55);
}
.tca-visual .tc-logo-word .t{color:#DCEFD4}
.tca-visual .tc-logo-word .c{color:#A0C860; font-weight:500; text-shadow:0 0 20px rgba(160,200,96,.9),0 0 48px rgba(160,200,96,.6)}
.tca-visual .tc-logo-word .i{
  color:var(--tca-lime); font-weight:800;
  text-shadow:0 0 14px rgba(169,204,94,1),0 0 40px rgba(169,204,94,1),0 0 80px rgba(169,204,94,.75);
}
.tca-visual .tc-logo-sub-row{display:flex; align-items:center; gap:8px; margin-top:6px}
.tca-visual .tc-logo-tick{width:14px; height:2px; background:var(--tca-lime)}
.tca-visual .tc-logo-sub{font-size:10.5px; letter-spacing:.22em; font-weight:700; color:#F2F8EF}

/* El reclamo. En móvil no se enseña: la pantalla es para entrar, no para leer. */
.tca-claim{position:relative; z-index:2; max-width:380px; display:none}
.tca-claim h2{font-size:26px; font-weight:700; color:#F6FAF3; letter-spacing:-.01em; line-height:1.25; margin:0}
.tca-claim p{font-size:14px; color:rgba(241,247,236,.55); margin:10px 0 0; line-height:1.5}

/* ── Mitad clara ──────────────────────────────────────────────────────── */
.tca-form-side{
  flex:1; background:var(--tca-bg);
  display:flex; align-items:flex-start; justify-content:center;
  border-radius:22px 22px 0 0; margin-top:-16px; position:relative; z-index:2;
  padding:28px 22px calc(34px + env(safe-area-inset-bottom));
}
.tca-box{width:100%; max-width:360px}
.tca-box h1{font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0}
.tca-lead{font-size:13.5px; color:var(--tca-muted); font-weight:600; margin:6px 0 0}

/* Logo de la empresa, cuando lo hay: el portal es lo que el trabajador ve DE
   SU EMPRESA, así que si la empresa tiene logo se enseña sobre el formulario. */
.tca-logo-empresa{margin:0 0 18px}
.tca-logo-empresa img{max-height:56px; max-width:180px; width:auto; height:auto; display:block}

/* ── Campos ───────────────────────────────────────────────────────────── */
.tca-campo{margin-top:20px; display:flex; flex-direction:column; gap:6px}
.tca-campo label{font-size:12px; font-weight:700; color:var(--tca-muted)}
.tca-campo input{
  width:100%; min-height:50px;
  border:1px solid var(--tca-hair); border-radius:10px;
  padding:12px 14px;
  /* 16px: por debajo de eso, iOS hace zoom al enfocar y descoloca la pantalla. */
  font-size:16px; font-family:inherit; font-weight:600;
  background:var(--tca-surface); color:var(--tca-ink);
}
.tca-campo input::placeholder{color:#A39C88; font-weight:500}
.tca-campo input:focus-visible{outline:2px solid var(--tca-lime); outline-offset:1px; border-color:#7FA43F}
.tca-campo input[aria-invalid="true"]{border-color:var(--tca-red)}

.tca-pw{position:relative}
.tca-pw input{padding-right:86px}
.tca-pw-ver{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  /* 44px de alto real: es un botón que se pulsa con el pulgar, no un enlace. */
  min-height:44px; min-width:70px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:12px; font-weight:700; color:var(--tca-muted);
  background:none; border:0; border-radius:8px; cursor:pointer;
}
.tca-pw-ver:hover{color:var(--tca-ink)}
.tca-pw-ver:focus-visible{outline:2px solid var(--tca-lime); outline-offset:1px}

.tca-fila{display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:14px}
.tca-enlace{
  font-size:12.5px; font-weight:700; color:var(--tca-muted);
  text-decoration:none; border-bottom:1px solid rgba(138,133,116,.4);
  min-height:24px; display:inline-flex; align-items:center;
}
.tca-enlace:hover{color:var(--tca-ink); border-bottom-color:currentColor}
.tca-enlace:focus-visible{outline:2px solid var(--tca-lime); outline-offset:2px; border-radius:4px}

/* ── Botón ────────────────────────────────────────────────────────────── */
.tca-btn{
  width:100%; min-height:52px; margin-top:22px;
  border-radius:10px; border:1.5px solid var(--tca-dark);
  background:var(--tca-dark); color:#F3F8EE;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.01em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
}
.tca-btn:hover{background:#0C2413}
.tca-btn:focus-visible{outline:3px solid var(--tca-lime); outline-offset:3px}
.tca-btn:disabled{opacity:.6; cursor:not-allowed}

/* ── Avisos ───────────────────────────────────────────────────────────────
   El error no depende del color para entenderse: lleva su propio icono y su
   texto. Sobre un fondo claro y en rojo bajo, no en un rojo de alarma. */
.tca-aviso{
  display:flex; align-items:flex-start; gap:9px;
  margin-top:16px; padding:11px 13px; border-radius:9px;
  font-size:12.5px; font-weight:600; line-height:1.45;
}
.tca-aviso svg{flex:none; margin-top:1px}
.tca-aviso--error{background:var(--tca-red-bg); color:#8C2F24}
.tca-aviso--ok{background:var(--tca-green-bg); color:#1E5C39}

.tca-pie{
  font-size:11.5px; color:var(--tca-muted); font-weight:500;
  margin-top:26px; text-align:center; line-height:1.6;
}
.tca-pie a{color:var(--tca-muted); text-decoration:underline}
.tca-pie a:focus-visible{outline:2px solid var(--tca-lime); outline-offset:2px; border-radius:3px}

/* ── Escritorio ───────────────────────────────────────────────────────────
   Dos mitades. La oscura pesa un poco más (1.15) para que la marca respire y
   el formulario quede a la derecha, donde va la mano. ---------------------- */
@media (min-width:900px){
  .tca-shell{flex-direction:row; height:100dvh}

  .tca-visual{
    flex:1.15; min-height:0;
    padding:56px;
    justify-content:space-between;
  }
  .tca-visual .tc-logo-word{font-size:22px}
  .tca-claim{display:block}

  .tca-form-side{
    flex:1; align-items:center;
    border-radius:0; margin-top:0; padding:40px;
    overflow-y:auto;
  }
  .tca-box{max-width:340px}
  .tca-box h1{font-size:24px}
}

/* Pantallas bajas en horizontal: la mitad oscura no puede comerse el
   formulario, así que se recorta y el conjunto vuelve a poder hacer scroll. */
@media (min-width:900px) and (max-height:560px){
  .tca-shell{height:auto; min-height:100dvh}
  .tca-claim h2{font-size:20px}
}

/* 320px: el ancho real de un móvil viejo que sigue en un taller. */
@media (max-width:360px){
  .tca-visual{padding:calc(env(safe-area-inset-top) + 26px) 18px 32px; min-height:180px}
  .tca-form-side{padding:24px 16px calc(28px + env(safe-area-inset-bottom))}
  .tca-pw input{padding-right:78px}
  .tca-pw-ver{min-width:64px; font-size:11.5px}
}

/* Quien ha pedido que nada se mueva: las partículas se quedan quietas (lo
   resuelve tc-particulas.js) y aquí se apaga cualquier transición. */
@media (prefers-reduced-motion:reduce){
  .tca-body *,.tca-body *::before,.tca-body *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Contraste alto: los pelos de 1px desaparecen en algunas pantallas. */
@media (prefers-contrast:more){
  .tca-campo input{border-color:#8A8574}
}