/* ═══════════════════════════════════════════════════════════
   RCD Producciones — Inicio de sesión (diseño moderno)
   Prefijo rcd- para no colisionar con Materialize / styles.css
   Paleta alineada con listas_modern.css
   ═══════════════════════════════════════════════════════════ */
:root{
  --rcd-primario: #253f71;
  --rcd-primario-2: #035CAD;
  --rcd-primario-oscuro: #1b2f57;
  --rcd-acento: #a4070e;
  --rcd-acento-2: #7d0509;
  --rcd-grafito: #4b4b4b;
  --rcd-fondo: #f4f6f9;
  --rcd-superficie: #ffffff;
  --rcd-borde: #e6e9ef;
  --rcd-texto: #1f2a3a;
  --rcd-texto-suave: #6b7280;
  --rcd-sombra: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --rcd-sombra-lg: 0 18px 45px rgba(16,24,40,.18);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--rcd-fondo);
  color: var(--rcd-texto);
  -webkit-font-smoothing: antialiased;
}

/* ── Contenedor split ─────────────────────────────────────── */
.rcd-login{
  display:flex; min-height:100vh;
}

/* ══ Panel izquierdo: branding ═══════════════════════════════ */
.rcd-login-brand{
  flex:0 0 50%; position:relative; overflow:hidden;
  background:linear-gradient(160deg, #14264a 0%, var(--rcd-primario) 52%, #1b2f57 100%);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:56px 48px;
  animation:rcdBrandIn .9s ease both;
}
/* franja de acento superior */
.rcd-login-brand::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--rcd-acento);
}
/* brillo decorativo */
.rcd-login-brand::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(164,7,14,.18) 0%, rgba(164,7,14,0) 70%);
  top:-140px; right:-160px; pointer-events:none;
}

.rcd-logo{
  width:160px; height:auto; display:block; margin:0 auto 30px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

.rcd-brand-nombre{
  font-size:2rem; font-weight:800; letter-spacing:-.5px;
}
.rcd-brand-lema{
  margin-top:12px; font-size:1.05rem; font-weight:500; line-height:1.5;
  color:rgba(255,255,255,.82); max-width:380px;
}
.rcd-brand-tags{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:22px;
}
.rcd-brand-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.85);
}
.rcd-brand-foot{
  position:absolute; bottom:26px; left:0; right:0;
  font-size:.72rem; color:rgba(255,255,255,.45); letter-spacing:.4px;
}

/* ══ Panel derecho: formulario ═══════════════════════════════ */
.rcd-login-form{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
}
.rcd-card-login{
  width:100%; max-width:400px;
  animation:rcdFormIn .9s ease .12s both;
}
.rcd-card-login h1{
  font-size:1.6rem; font-weight:800; letter-spacing:-.5px; color:var(--rcd-texto);
}
.rcd-card-login .rcd-sub{
  color:var(--rcd-texto-suave); font-size:.92rem; margin:6px 0 28px;
}

/* mensaje de error */
.rcd-alerta{
  display:flex; align-items:flex-start; gap:10px;
  background:#fdecec; border:1px solid #f3c4c6; color:var(--rcd-acento-2);
  padding:12px 14px; border-radius:10px; font-size:.84rem; font-weight:600;
  margin-bottom:20px;
}
.rcd-alerta i{ font-size:1.1rem; }
.rcd-alerta.hidden{ display:none; }

/* campos */
.rcd-campo{ margin-bottom:18px; }
.rcd-campo label{
  display:block; font-size:.8rem; font-weight:700; color:var(--rcd-texto);
  margin-bottom:7px;
}
.rcd-input-wrap{
  position:relative; display:flex; align-items:center;
}
.rcd-input-wrap .material-icons{
  position:absolute; left:14px; color:var(--rcd-texto-suave); font-size:1.25rem;
  pointer-events:none;
}
.rcd-input-wrap input{
  width:100%; padding:14px 46px 14px 46px; border:1px solid var(--rcd-borde);
  border-radius:12px; font-family:inherit; font-size:.95rem; background:#fafbfc;
  transition:border-color .15s, box-shadow .15s, background .15s; color:var(--rcd-texto);
}
.rcd-input-wrap input:focus{
  outline:none; border-color:var(--rcd-primario-2); background:#fff;
  box-shadow:0 0 0 3px rgba(3,92,173,.13);
}
.rcd-input-wrap .rcd-eye{
  position:absolute; right:8px; cursor:pointer; color:var(--rcd-texto-suave);
  border:none; background:transparent; width:36px; height:36px; border-radius:8px;
  display:grid; place-items:center; transition:.15s;
}
.rcd-input-wrap .rcd-eye:hover{ background:#eef1f5; color:var(--rcd-texto); }
.rcd-input-wrap .rcd-eye .material-icons{ position:static; font-size:1.2rem; }

/* botón */
.rcd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:.95rem; border-radius:999px; padding:15px 22px; transition:.18s;
  line-height:1; letter-spacing:.2px;
}
.rcd-btn-primary{
  background:var(--rcd-acento); color:#fff;
  box-shadow:0 6px 18px rgba(164,7,14,.32);
}
.rcd-btn-primary:hover{ background:var(--rcd-acento-2); transform:translateY(-1px); }
.rcd-btn-primary .material-icons{ font-size:1.2rem; }

/* enlace pie */
.rcd-volver{
  display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  color:var(--rcd-grafito); text-decoration:none; font-size:.85rem; font-weight:600;
  transition:.15s;
}
.rcd-volver:hover{ color:var(--rcd-acento); }
.rcd-volver .material-icons{ font-size:1.1rem; }

/* ── Animaciones ──────────────────────────────────────────── */
@keyframes rcdBrandIn{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
@keyframes rcdFormIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:860px){
  .rcd-login{ flex-direction:column; }
  .rcd-login-brand{
    flex:0 0 auto; padding:44px 24px 36px;
    animation:rcdBrandIn .7s ease both;
  }
  .rcd-logo{ width:120px; margin-bottom:20px; }
  .rcd-brand-nombre{ font-size:1.5rem; }
  .rcd-brand-lema{ font-size:.92rem; }
  .rcd-brand-foot{ position:static; margin-top:24px; }
  .rcd-login-form{ padding:30px 20px 44px; }
  .rcd-card-login{ animation:rcdFormIn .7s ease .08s both; }
}