/* APLEX · Estilos de auth y panel mínimo */

:root{
  --bg:        #0A0B0F;
  --bg-elev:   #14161C;
  --bg-elev-2: #1B1E27;
  --ink:       #F4F2EC;
  --ink-soft:  #B5B7BE;
  --muted:     #75787F;
  --line:      #2E323D;
  --accent:    #E0532A;
  --accent-dk: #B83E1A;
  --ok:        #2EA043;
  --radius:    14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Layout SOLO en páginas que no son admin/panel:
   flex column con auth-card centrada en el espacio disponible y footer abajo */
body:not(.admin){
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:24px;
}
body:not(.admin) main.auth-card{
  margin:auto;
}

/* ── Footer común (panel, admin, auth) ──────────────────────────── */
.app-footer{
  border-top:1px solid var(--line);
  padding:20px 28px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin-top:48px;
}
.app-footer .links a{
  color:var(--ink-soft);
  margin:0 10px;
  text-decoration:none;
}
.app-footer .links a:hover{ color:var(--accent); text-decoration:underline; }
.app-footer .copy{ margin-top:8px; }
@media (max-width:560px){
  .app-footer .links a{ display:inline-block; margin:4px 8px; }
}

.auth-card{
  width:100%;
  max-width:440px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px;
}
.auth-card h1{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:8px;
  text-align:center;
}
.auth-card .lead{
  color:var(--ink-soft);
  font-size:14.5px;
  margin-bottom:24px;
  text-align:center;
}

label{
  display:block;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:6px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:500;
}

input[type="email"],
input[type="text"]{
  width:100%;
  padding:13px 14px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(224,83,42,.15);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.btn:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

button, .btn{
  display:inline-block;
  margin-top:18px;
  width:100%;
  padding:13px 20px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:background .15s;
}
button:hover, .btn:hover{ background:var(--accent-dk); }
button:disabled,
.btn[aria-disabled="true"]{
  opacity:.62;
  cursor:wait;
  filter:saturate(.7);
}

button.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
}
button.ghost:hover{ background:var(--bg); color:var(--ink); }

.alert{
  padding:14px 16px;
  border-radius:8px;
  margin-bottom:22px;
  font-size:14px;
  line-height:1.4;
  border-left-width:4px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.alert.ok{
  background:rgba(46,160,67,.12);
  color:#7ed398;
  border:1px solid rgba(46,160,67,.35);
}
.alert.err{
  background:rgba(224,83,42,.12);
  color:#ffae93;
  border:1px solid rgba(224,83,42,.35);
}

.foot{
  margin-top:24px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}
.muted{ color:var(--muted); font-size:13px; }
strong{ color:var(--ink); }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Cabecera con marca */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:18px;
}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(224,83,42,.6);
}
.brand img{
  height:40px;
  width:auto;
  display:block;
}