:root{
  --al-brown:  #80492C;
  --al-gold:   #B4967A;
  --al-cocoa:  #7D5D4C;

  --bg:   #0F0E0D;
  --bg-2: #171513;
  --card:#1E1B19;
  --text:#EEEAE7;
  --muted:#C9C2BD;
  --line: rgba(180,150,122,.22);
  --input-bg: rgba(255,255,255,.06);
  --input-bd: rgba(180,150,122,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Tema claro */
html[data-theme="light"]{
  --bg:   #FAF9F7;
  --bg-2: #F1EEEA;
  --card:#FFFFFF;
  --text:#2B241F;
  --muted:#7D5D4C;
  --line: rgba(125,93,76,.25);
  --input-bg: #FFFFFF;
  --input-bd: rgba(125,93,76,.35);
  --shadow: 0 10px 24px rgba(125,93,76,.15);
}

*{box-sizing:border-box}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background:
    radial-gradient(1000px 500px at 10% 10%, rgba(180,150,122,.18), transparent 50%),
    radial-gradient(1000px 500px at 90% 90%, rgba(125,93,76,.18), transparent 50%),
    linear-gradient(160deg, var(--bg), var(--bg-2));
  min-height: 100vh;
}

.login-shell{
  max-width: 980px;
  margin: 4rem auto;
  padding: clamp(12px,2vw,24px);
}

.card-ly{
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Panel branding */
.brand-side{
  position: relative;
  min-height: 460px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)),
    url('../assets/img/png/alyer_monograma_blanco.png') center/cover no-repeat;
}
html[data-theme="light"] .brand-side{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.45)),
    url('../assets/img/png/alyer_monograma_negro.png') center/cover no-repeat;
}
.brand-wrap{
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 32px;
}
.brand-card{
  text-align: center;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
}
html[data-theme="light"] .brand-card{
  background: rgba(255,255,255,.35);
  border-color: rgba(0,0,0,.08);
}
.logo{
  width: 20rem !important;  /* puedes probar 120px, 100px, etc */
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
  display: block;
  margin: 0 auto; /* lo centra */
}
.brand-title{font-weight: 800; letter-spacing:.2px; margin-top: 12px}
.chip{
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: .8rem;
  background: linear-gradient(180deg, var(--al-gold), var(--al-cocoa));
  color: #1f1a17;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, .05);
}

/* Panel formulario */
.form-side{ padding: clamp(20px, 3.5vw, 42px); }
.title{ font-weight: 800; margin-bottom: 4px; }
.subtitle{ color: var(--muted); margin-bottom: 24px; }

.input-lg{
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  color: var(--text);
  height: 52px;
  border-radius: 12px;
  padding: 10px 14px;
}
.input-lg::placeholder{ color: color-mix(in srgb, var(--muted) 70%, transparent); }
.input-lg:focus{
  outline: none;
  border-color: var(--al-gold);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--al-gold) 25%, transparent);
}

.btn-primary-al{
  background: linear-gradient(135deg, var(--al-brown), var(--al-cocoa));
  border: none; color: #fff;
  border-radius: 12px; height: 48px; font-weight: 800;
  letter-spacing: .2px;
  transition: transform .08s ease, filter .2s ease;
}
.btn-primary-al:hover{ filter: brightness(1.06); transform: translateY(-1px);}
.btn-primary-al:active{ transform: translateY(0);}

.muted-link{ color: var(--muted); text-decoration: none; font-size: .9rem;}
.muted-link:hover{ color: var(--al-gold); }

/* Toggle tema */
.theme-toggle{
  position: fixed; top: 16px; right: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer; user-select: none;
}
.theme-toggle svg{ display:block }

/* Logos dinámicos */
.theme-logo { content: url("../assets/img/png/alyer_blanco.png"); }
html[data-theme="light"] .theme-logo { content: url("../assets/img/png/alyer_negro.png"); }

/* Responsive */
@media (max-width: 991.98px){
  .brand-side{ display: none; }
}

/* ==== SweetAlert2 personalizado para ALYER ==== */
.swal2-popup {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  border-radius: 16px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.swal2-title { color: var(--al-gold) !important; font-weight: 800 !important; }
.swal2-html-container { color: var(--text) !important; }

.swal2-confirm {
  background: linear-gradient(135deg, var(--al-brown), var(--al-cocoa)) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.swal2-confirm:hover { filter: brightness(1.08); }

.swal2-cancel {
  background: var(--input-bg) !important;
  color: var(--muted) !important;
  border-radius: 10px !important;
  border: 1px solid var(--input-bd) !important;
  padding: 10px 24px !important;
}
.swal2-cancel:hover {
  background: var(--line) !important;
  color: var(--al-gold) !important;
}