/* ============================================================================
   Zapatería Porvenir 2026 — Pantalla de acceso ("Cuero y Crema")
   Se carga DESPUÉS de auth.css y lo reemplaza por cascada. Autocontenido:
   el login no carga porvenir-brand.css, así que los tokens van aquí.
   ========================================================================== */
:root{
  --pv-brand:#9E4A26;  --pv-brand-strong:#75311A;  --pv-brand-soft:#F6E7DC;
  --pv-action:#2E1E15; --pv-action-hover:#462E20;  --pv-action-ink:#FFF8F2;
  --pv-bg:#F4F0EA;     --pv-card:#FFFFFF;          --pv-elev:#FBF7F1;
  --pv-line:#E2D8CB;   --pv-ink:#241A14;           --pv-muted:#6E5C50;
  --pv-bad:#B4231F;
  --pv-r-card:16px;    --pv-r-control:10px;
  --pv-shadow-lg:0 8px 16px -10px rgba(43,27,17,.12), 0 28px 56px -20px rgba(43,27,17,.28);
  --pv-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
}

/* El "Welcome Header" de auth.css era un ::after absoluto con el texto
   ¡Bienvenido! que caía ENCIMA del campo de usuario. Fuera. */
.login-page .form-inner::after,
.register-page .form-inner::after{ content:none !important; display:none !important; }

/* ---- Lienzo ---------------------------------------------------------- */
body{ font-family:var(--pv-sans); }
.login-page, .register-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #FFFFFF 0%, transparent 60%),
    linear-gradient(160deg, var(--pv-bg) 0%, #EDE5DA 55%, var(--pv-brand-soft) 100%) !important;
}
.login-page::before, .register-page::before,
.login-page .page::before{ background:none !important; opacity:1 !important; }

.login-page .form-outer, .register-page .form-outer{
  background:transparent !important; min-height:100vh;
}

/* ---- Tarjeta --------------------------------------------------------- */
.login-page .form-inner, .register-page .form-inner{
  background:var(--pv-card) !important;
  border:1px solid var(--pv-line) !important;
  border-radius:var(--pv-r-card) !important;
  box-shadow:var(--pv-shadow-lg) !important;
  backdrop-filter:none !important;
  padding:44px 40px 36px !important;
  max-width:400px; width:100%;
  position:relative;
}
/* Filete de cuero superior, en vez del borde amarillo del tema viejo */
.login-page .form-inner::before, .register-page .form-inner::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--pv-brand), var(--pv-brand-strong));
  border-radius:var(--pv-r-card) var(--pv-r-card) 0 0;
  opacity:1 !important;
}

.login-page .logo, .register-page .logo{ margin-bottom:26px; }
.login-page .logo img, .register-page .logo img{ max-width:150px; height:auto; }
/* Respaldo cuando el archivo del logo no está: el nombre en tipografía de marca */
.login-page .logo span, .register-page .logo span{
  display:block; color:var(--pv-brand); font-size:19px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
}

/* ---- Campos con etiqueta flotante ------------------------------------ */
.login-page .form-group-material, .register-page .form-group-material{
  position:relative; margin-bottom:22px; text-align:left;
}
.login-page .input-material, .register-page .input-material{
  width:100%; height:50px; padding:16px 14px 4px;
  background:var(--pv-elev) !important;
  border:1px solid var(--pv-line) !important;
  border-radius:var(--pv-r-control) !important;
  color:var(--pv-ink) !important;
  font-size:15px; font-weight:500;
  box-shadow:none !important; transition:border-color .15s, box-shadow .15s;
}
.login-page .input-material:focus, .register-page .input-material:focus{
  outline:none;
  border-color:var(--pv-brand) !important;
  box-shadow:0 0 0 3px rgba(158,74,38,.14) !important;
  background:var(--pv-card) !important;
}
/* Rótulo SIEMPRE arriba y visible (no flotante): mismo criterio que los
   filtros del resto del sistema — la vendedora siempre sabe qué va en cada
   campo, sin depender de que el campo esté vacío o enfocado. */
.login-page .label-material, .register-page .label-material{
  position:absolute; left:15px; top:8px;
  background:transparent !important; color:var(--pv-muted) !important;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:0 !important; border-radius:0 !important;
  pointer-events:none; transition:color .15s ease;
}
.login-page .input-material:focus ~ .label-material,
.register-page .input-material:focus ~ .label-material{ color:var(--pv-brand) !important; }
#togglePassword{ color:var(--pv-muted); right:14px !important; }
#togglePassword:hover{ color:var(--pv-brand); }

/* ---- Botón de acceso -------------------------------------------------- */
.login-page .btn-primary, .register-page .btn-primary{
  width:100%; height:50px; margin-top:6px;
  background:var(--pv-action) !important;
  border:1px solid var(--pv-action) !important;
  color:var(--pv-action-ink) !important;
  border-radius:var(--pv-r-control) !important;
  font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:none !important; transition:background .15s, transform .06s;
}
.login-page .btn-primary:hover, .register-page .btn-primary:hover{
  background:var(--pv-action-hover) !important; border-color:var(--pv-action-hover) !important;
}
.login-page .btn-primary:active{ transform:translateY(1px); }

/* ---- Enlaces y pie ---------------------------------------------------- */
.login-page .forgot-pass, .register-page .forgot-pass{
  display:inline-block; margin-top:18px;
  color:var(--pv-muted) !important; font-size:13px; text-decoration:none;
}
.login-page .forgot-pass:hover{ color:var(--pv-brand) !important; text-decoration:underline; }
.login-page .register-section, .register-page .register-section{
  margin-top:12px; color:var(--pv-muted) !important; font-size:13px;
}
.login-page .register-section a, .register-page .register-section a{
  color:var(--pv-brand) !important; font-weight:600; text-decoration:none;
}
.login-page .register-section a:hover{ text-decoration:underline; }
.login-page .copyrights, .register-page .copyrights{
  color:var(--pv-muted) !important; font-size:12px; margin-top:24px;
}
.login-page .copyrights .external{ color:var(--pv-brand) !important; }

/* ---- Avisos ----------------------------------------------------------- */
.login-page .alert, .register-page .alert{
  border-radius:var(--pv-r-control); border:1px solid var(--pv-line);
  font-size:13.5px; text-align:left;
}
.login-page .alert-danger{ background:#FBEAE9; border-color:#F0C9C7; color:var(--pv-bad); }
.login-page .alert-success{ background:#E8F3EE; border-color:#C3E0D3; color:#0E7350; }
.login-page .form-group-material p strong{ color:var(--pv-bad); font-size:13px; font-weight:600; }

/* ---- Móvil ------------------------------------------------------------ */
@media (max-width:575.98px){
  .login-page .form-inner, .register-page .form-inner{ padding:34px 24px 28px !important; margin:16px; }
}