/* /css/login.css — Tema FerRios (rojo-naranja-amarillo + negro) */

/* ======================== Paleta y tokens ======================== */
:root{
  /* Colores del logo FerRios */
  --fr-red:#d7261e;      /* rojo principal */
  --fr-red-dark:#a11915; /* rojo oscuro */
  --fr-orange:#f26522;   /* naranja */
  --fr-yellow:#ffc32b;   /* amarillo */
  --fr-ink:#111213;      /* casi negro */
  --fr-white:#ffffff;

  /* Tokens UI */
  --brand:var(--fr-red);
  --brand-2:var(--fr-orange);
  --accent:var(--fr-yellow);
  --surface:#ffffff;
  --surface-2:#fafafa;
  --text:#0f172a;
  --muted:#475569;
  --bg:#fff6f2;          /* fondo cálido */
  --ring:var(--fr-orange);
  --border:#e5e7eb;
  --border-strong:#cbd5e1;
}

@media (prefers-color-scheme: dark){
  :root{
    --surface:#0b0f16;
    --surface-2:#0f172a;
    --text:#f8fafc;
    --muted:#cbd5e1;
    --bg:#0a0b0c;
    --border:#242b38;
    --border-strong:#344256;
  }
}

/* Reduce animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Mejoras de contraste cuando el usuario lo pide */
@media (prefers-contrast: more){
  :root {
    --border: #9aa4b2;
    --border-strong:#6b7280;
  }
  .btn-brand { box-shadow: none; }
}

/* Modo alto contraste del SO (Windows/Forced Colors) */
@media (forced-colors: active){
  .btn-brand, .input-group-text, .form-control { forced-color-adjust: auto; }
  .auth-card { border: 1px solid CanvasText; }
}

/* ======================== Layout de fondo ======================== */
html,body{height:100%;}
.login-body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tema FerRios: fondo con rayos suaves y gradientes cálidos */
.theme-ferrios{
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,195,43,.20) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(242,101,34,.15) 0%, transparent 65%),
    radial-gradient(70% 60% at 0% 100%, rgba(215,38,30,.18) 0%, transparent 65%),
    linear-gradient(180deg, #fff 0%, #fff8f4 35%, #fff3ea 100%);
}

/* ======================== Card ======================== */
.auth-card{
  max-width: 480px; width: 100%;
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(215,38,30,.20);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}

/* Header con gradiente rojo→naranja y una franja inferior de acento */
.auth-header{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; padding: 1.4rem 1.6rem;
  position: relative;
}
.auth-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:4px; background: var(--accent);
}

/* Variante con “sunburst” detrás del logo */
.auth-header--ferrios .logo-wrap{
  position: relative;
}
.auth-header--ferrios .logo-wrap::before{
  content:"";
  position:absolute; inset:-12px 0 0 0; margin:auto;
  width:160px; height:160px; border-radius:999px;
  background:
    /* rayos */
    repeating-conic-gradient(from -8deg,
      rgba(255,195,43,.95) 0 14deg,
      rgba(242,101,34,.95) 14deg 28deg),
    /* disco */
    radial-gradient(circle at 50% 55%, rgba(0,0,0,.20), transparent 55%);
  filter: blur(.4px);
  opacity:.25;
}

/* ======================== Logo y títulos ======================== */
.logo-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  text-align:center; position: relative;
}
.logo-badge{
  display:inline-grid; place-items:center;
  width:96px; height:96px; border-radius:9999px;
  background: radial-gradient(circle at 30% 30%, #fff 0 35%, #ffe9b6 36% 100%);
  border: 3px solid color-mix(in oklab, var(--accent) 60%, var(--brand) 40%);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.65);
}
.logo-badge img{
  width:82px; height:auto; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  padding:.2rem;
}
.logo-title{
  font-weight:800; letter-spacing:.2px; font-size:1.08rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.logo-sub{ opacity:.96; font-size:.95rem; }
.auth-body{ padding:1.6rem; background:var(--surface); }

/* ======================== Controles ======================== */
.form-label{ font-weight:700; color:var(--fr-ink); }
@media (prefers-color-scheme: dark){ .form-label{ color:var(--text); } }

/* Alineación y curvatura coherente del input-group */
.input-group-text{
  background:var(--surface-2); color:var(--fr-ink);
  border:1px solid var(--border);
  border-right:0;
  border-radius:.95rem 0 0 .95rem;
}
.form-control{
  border-radius:0 .95rem .95rem 0;   /* ← corrige doble redondeo junto al addon */
  border:1px solid var(--border); box-shadow:none;
  color:var(--text); background-color:#fff;
}
@media (prefers-color-scheme: dark){
  .form-control{ background-color:#0f172a; color:var(--text); border-color:var(--border); }
}
.form-control:focus{
  border-color: var(--ring);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 70%, #ffffff 30%);
}

/* Estados de validación */
.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color:#ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.form-control.is-valid, .was-validated .form-control:valid {
  border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(255,195,43,.25);
}

/* Botón icono (mostrar/ocultar) */
.btn-icon{
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--fr-ink); border-radius:0 .95rem .95rem 0;
}
.btn-icon:hover{ background:color-mix(in oklab, var(--surface-2) 70%, #000 2%); color:var(--fr-ink); }
.btn-icon:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.btn-icon[aria-pressed="true"]{
  background: color-mix(in oklab, var(--surface-2) 85%, var(--accent) 15%);
  border-color: color-mix(in oklab, var(--border) 80%, var(--accent) 20%);
}

/* Foco visual del grupo al interactuar con el toggle (seguro cross-browser) */
.input-group:focus-within .form-control {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 70%, #ffffff 30%);
  border-color: var(--ring);
}

/* Botón principal (rojo FerRios) */
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff; border-radius:.95rem; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 10px 24px rgba(215,38,30,.25);
}
.btn-brand:hover{ background:var(--fr-red-dark); border-color:var(--fr-red-dark); color:#fff; }
.btn-brand:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.btn-brand:disabled{
  opacity:.9; cursor:not-allowed;
  background: color-mix(in oklab, var(--brand) 80%, #999 20%);
  border-color: color-mix(in oklab, var(--brand) 80%, #999 20%);
}

/* Placeholders */
::placeholder{ color: color-mix(in oklab, var(--muted) 80%, #6b7280 20%); opacity:1; }

/* Autofill (Chrome/WebKit) */
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  border-radius:0 .95rem .95rem 0; /* respeta curvatura del input */
}
@media (prefers-color-scheme: dark){
  input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
  }
}

/* ======================== Tipografía secundaria ======================== */
.small-muted{ color:var(--muted); }
.footer-note{ font-size:.9rem; color:var(--muted); }

/* ======================== Alert moderna ======================== */
.alert-elevated{ border:0; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.alert .btn-close{ filter: invert(0); opacity:.8; }
@media (prefers-color-scheme: dark){ .alert .btn-close{ filter: invert(1) brightness(1.4); } }

/* ======================== Responsive ======================== */
@media (max-width: 420px){
  .auth-body{ padding:1.2rem; }
  .auth-header{ padding:1.1rem 1.2rem; }
  .logo-badge{ width:86px; height:86px; }
  .logo-badge img{ width:74px; }
}

/* ======================== Focus global (fallback) ======================== */
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }