/* ============================================================
   Diseño Premium · CSS reutilizable (tokens + componentes)
   Pega este archivo en el proyecto y enlázalo, o copia los
   bloques que necesites. Cambia --pc-accent por proyecto.
   ============================================================ */

:root {
  --pc-accent: #4f46e5;
  --pc-accent-soft: #eef0ff;
  --pc-bg: #f3f4f8;
  --pc-surface: #ffffff;
  --pc-text: #1f2235;
  --pc-text-muted: #6b7280;
  --pc-border: #e5e7eb;
  --pc-radius-card: 20px;
  --pc-radius: 12px;
  --pc-shadow: 0 24px 60px -20px rgba(31,27,90,.35);
  --pc-focus: 0 0 0 4px rgba(79,70,229,.12); /* ajusta el RGB al acento */
}

/* ---------- Pantalla split-screen (acceso) ---------- */
.pc-login-body {
  margin: 0; min-height: 100vh; background: var(--pc-bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pc-login-card {
  width: 100%; max-width: 920px; background: var(--pc-surface);
  border-radius: var(--pc-radius-card); overflow: hidden;
  display: flex; box-shadow: var(--pc-shadow); min-height: 540px;
}
.pc-login-brand {
  flex: 0 0 42%; background: var(--pc-accent); color: #fff;
  padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between;
}
.pc-login-brand .pc-brand-top { display: flex; align-items: center; gap: 12px; }
.pc-login-brand .pc-brand-chip {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.pc-login-brand .pc-brand-name { font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.pc-login-brand h1 { color: #fff; font-size: 27px; line-height: 1.25; font-weight: 600; margin: 0 0 12px; }
.pc-login-brand p.lead { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.pc-login-brand .pc-points { display: flex; flex-direction: column; gap: 14px; }
.pc-login-brand .pc-points span { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.92); }
.pc-login-brand .pc-points i { font-size: 19px; opacity: .95; }
.pc-login-brand .pc-foot { font-size: 12.5px; color: rgba(255,255,255,.65); }

.pc-login-form { flex: 1; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.pc-login-form h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--pc-text); }
.pc-login-form .sub { font-size: 14px; color: var(--pc-text-muted); margin: 0 0 26px; }

/* ---------- Inputs con icono ---------- */
.pc-login-form label, .pc-field label { font-size: 13px; color: #4b5563; font-weight: 500; margin: 0 0 6px; display: block; }
.pc-input {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-radius); padding: 0 14px; height: 48px; margin: 0 0 18px;
  background: var(--pc-surface); transition: border-color .15s, box-shadow .15s;
}
.pc-input:focus-within { border-color: var(--pc-accent); box-shadow: var(--pc-focus); }
.pc-input i.lead-ico { font-size: 18px; color: #9ca3af; }
.pc-input:focus-within i.lead-ico { color: var(--pc-accent); }
.pc-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--pc-text); height: 100%; }
.pc-input input:-webkit-autofill,
.pc-input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--pc-text); transition: background-color 9999s ease-in-out 0s;
}
.pc-eye { background: 0; border: 0; color: #9ca3af; cursor: pointer; font-size: 18px; display: flex; padding: 4px; }
.pc-eye:hover { color: var(--pc-accent); }

/* ---------- Botones ---------- */
.pc-btn {
  width: 100%; height: 50px; border: 0; border-radius: var(--pc-radius);
  background: var(--pc-accent); color: #fff; font-size: 15.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter .15s, transform .05s;
}
.pc-btn:hover { filter: brightness(1.07); }
.pc-btn:active { transform: scale(.99); }
.pc-btn-ghost { background: transparent; color: var(--pc-text); border: 1px solid var(--pc-border); }

.pc-links { text-align: center; margin-top: 18px; }
.pc-links a { font-size: 13.5px; color: var(--pc-accent); text-decoration: none; }
.pc-links a:hover { text-decoration: underline; }
.pc-links .muted { color: #9ca3af; }

/* ---------- Tarjeta genérica ---------- */
.pc-card { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-card); padding: 1.25rem 1.5rem; }
.pc-card-elevated { background: var(--pc-surface); border-radius: var(--pc-radius-card); padding: 1.25rem 1.5rem; box-shadow: var(--pc-shadow); }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .pc-login-card { flex-direction: column; min-height: 0; max-width: 460px; }
  .pc-login-brand { flex: none; padding: 26px 24px; }
  .pc-login-brand .pc-points, .pc-login-brand .pc-foot { display: none; }
  .pc-login-brand h1 { font-size: 21px; margin: 16px 0 6px; }
  .pc-login-brand p.lead { margin: 0; font-size: 13.5px; }
  .pc-login-form { padding: 30px 26px 36px; }
}