/* Tema visual compartido por las páginas de autenticación (login, olvidé mi
   contraseña, verificar código, verificar 2FA). Cualquier ajuste de marca se
   hace en un solo lugar.
   Rebranding 2026 — paleta y tipografías del Manual de Marca TGC.
   Fondo: /static/img/bg_login_2026.png. Logo sin efectos 3D. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root{
  /* Paleta TGC 2026 */
  --tgc-cream:#f7ebdc;
  --tgc-beige:#debf8e;
  --tgc-sage:#c5cea2;
  --tgc-olive:#636a5a;
  --tgc-olive-dark:#454b3e;

  /* Alias usados por las demás páginas de auth (no renombrar) */
  --gold:var(--tgc-beige);
  --gold2:var(--tgc-cream);
  --card-bg:rgba(69,75,62,0.94);
  --border:rgba(222,191,142,0.32);
  --input-bg:rgba(247,235,220,0.07);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;overflow:hidden;
  font-family:'Outfit','Segoe UI',system-ui,sans-serif;
}

/* ── Fondo de marca 2026 ── */
.bg{
  position:fixed;inset:0;z-index:0;
  background:#454b3e url('/static/img/bg_login_2026.png') center center / cover no-repeat;
}
#bg-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ── Escena ── */
.scene{
  position:relative;z-index:2;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:8vw;
}

/* ── Panel de acceso ── */
.login-card{
  width:400px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 40px 32px;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(247,235,220,0.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
}
/* Franja superior en beige de marca */
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--tgc-beige);
}

/* Logo (sin efectos 3D) */
.logo-scene{
  display:flex;flex-direction:column;align-items:center;
  margin:6px 0 22px;
}
.logo-tilt{transform:none !important}
.logo-img{
  width:210px;height:auto;max-height:150px;
  object-fit:contain;
  display:block;
}
.logo-shadow-3d{display:none}

/* Títulos: el logo ya incluye el nombre y "Sistema de logística" */
.brand-name,.brand-sub{display:none}

/* Separador */
.sep{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--border)}
.sep i{font-size:7px;color:var(--tgc-beige)}

/* Mensajes flash (colores funcionales, legibles sobre olive) */
.flash{
  padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.flash-danger{background:rgba(220,53,69,0.20);border:1px solid rgba(240,128,144,0.45);color:#ffc2cb}
.flash-success{background:rgba(25,135,84,0.22);border:1px solid rgba(134,239,172,0.40);color:#c9f7d8}
.flash-info{background:rgba(13,110,253,0.20);border:1px solid rgba(143,192,255,0.40);color:#cfe2ff}
.flash-warning{background:rgba(222,191,142,0.20);border:1px solid rgba(222,191,142,0.50);color:var(--tgc-cream)}

/* Labels */
.field-label{
  font-size:12px;letter-spacing:.04em;
  color:var(--tgc-sage);margin-bottom:7px;font-weight:500;
}

/* Inputs */
.input-wrap{
  display:flex;align-items:center;
  background:var(--input-bg);
  border:1px solid rgba(222,191,142,0.25);
  border-radius:10px;
  margin-bottom:20px;
  transition:border-color .2s,box-shadow .2s,background .2s;
  overflow:hidden;
}
.input-wrap:focus-within{
  border-color:var(--tgc-beige);
  background:rgba(247,235,220,0.11);
  box-shadow:0 0 0 3px rgba(222,191,142,0.18);
}
.ic{padding:0 13px;font-size:15px;color:rgba(222,191,142,0.65);flex-shrink:0;pointer-events:none}
.ic-r{pointer-events:all;cursor:pointer;transition:color .15s;color:rgba(222,191,142,0.55)}
.ic-r:hover{color:var(--tgc-beige)}
.input-wrap input{
  flex:1;background:transparent;border:none;outline:none;
  padding:13px 4px;font-family:inherit;font-size:14px;color:var(--tgc-cream);
}
.input-wrap input::placeholder{color:rgba(247,235,220,0.38)}

/* Autocompletado de Chrome: evita el fondo azul claro */
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tgc-cream);
  -webkit-box-shadow:0 0 0 1000px #565c4d inset;
  box-shadow:0 0 0 1000px #565c4d inset;
  caret-color:var(--tgc-cream);
  transition:background-color 9999s ease-out 0s;
}

/* Remember */
.rem-row{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:rgba(247,235,220,0.72);
  margin-bottom:24px;cursor:pointer;
  user-select:none;
}
.rem-row input[type=checkbox]{accent-color:var(--tgc-beige);width:15px;height:15px;cursor:pointer}

/* Botón principal: beige plano de marca */
.btn-login{
  width:100%;padding:15px;
  background:var(--tgc-beige);
  border:none;border-radius:11px;
  font-family:inherit;
  font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--tgc-olive-dark);
  cursor:pointer;
  transition:background-color .2s,box-shadow .2s,transform .15s;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.btn-login:hover{
  background:var(--tgc-cream);
  box-shadow:0 8px 22px rgba(0,0,0,0.30);
  transform:translateY(-1px);
}
.btn-login:active{transform:translateY(0)}
.btn-login:focus-visible{outline:2px solid var(--tgc-cream);outline-offset:3px}

/* Link secundario (olvidé contraseña, volver, reenviar código, etc.) */
.link-row{
  text-align:center;font-size:13px;margin-top:14px;margin-bottom:6px;
}
.link-row a{
  color:var(--tgc-sage);text-decoration:none;
  transition:color .15s;
}
.link-row a:hover{color:var(--tgc-cream);text-decoration:underline}

/* Pie del panel */
.card-foot{
  text-align:center;font-size:10.5px;letter-spacing:.03em;
  color:rgba(247,235,220,0.40);margin-top:20px;
}
.card-foot b{font-weight:600;color:rgba(247,235,220,0.55)}

/* Marca inferior pantalla (se oculta: duplicaba el pie del panel) */
.screen-foot{display:none}

/* Pantallas pequeñas */
@media (max-width:640px){
  .scene{justify-content:center;padding:0 16px}
  .login-card{width:100%;max-width:400px;padding:34px 26px 26px}
}

/* Sin particulas animadas sobre el fondo */
#bg-canvas{display:none}