/* =========================================================
   Login / registro / recuperar contraseña.
   Mismo lenguaje visual que el panel de administración:
   superficie clara, tarjeta blanca con borde fino, acento
   verde, una sola tipografía (Inter). Los tokens se repiten
   acá (en vez de importar panel.css) porque esta pantalla no
   necesita nada del resto del panel — mismo criterio que ya
   usan carta.css y panel.css, cada uno con su propia paleta.
   ========================================================= */

:root{
  --adm-bg:        #eaf1f4;
  --adm-surface:   #ffffff;
  --adm-surface-2: #f8fafb;
  --adm-line:      #d5e1e7;
  --adm-line-soft: #e7eef2;

  --adm-ink:       #183244;
  --adm-ink-2:     #405b6b;
  --adm-muted:     #6b8290;

  --adm-accent:    #c65e43;
  --adm-accent-ink:#a84932;
  --adm-accent-bg: #fae9e3;

  --adm-ok-bg:     #e2f0eb;
  --adm-danger:    #a8321f;
  --adm-danger-bg: #fbeae6;

  --adm-shadow:    0 1px 2px rgba(17,24,32,.05);
  --adm-r-lg: 14px;
}

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adm-bg);
  font-family: var(--f-body);
  padding: 1.5rem;
  box-sizing: border-box;
}

.auth-box{
  position: relative;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  box-shadow: var(--adm-shadow);
  padding: 2rem 1.9rem 1.9rem;
  border-radius: var(--adm-r-lg);
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

/* ---------- marca + título ---------- */
/* Mismo lockup que la barra lateral del panel: monograma
   cuadrado con la inicial + nombre de la app. */

.auth-box h1{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.5rem;
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--adm-ink);
}
.auth-box h1::before{
  content: "C";
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--adm-ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.auth-box h2{
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--adm-line);
  font-family: var(--f-body);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--adm-ink);
}

/* ---------- formulario ---------- */

.auth-box label{
  display: block;
  margin-top: 1.05rem;
  margin-bottom: .35rem;
  font-size: .855rem;
  font-weight: 600;
  color: var(--adm-ink-2);
}
.auth-box > form > label:first-of-type{ margin-top: 0; }

.auth-box input{
  width: 100%;
  padding: .58rem .7rem;
  font-family: inherit;
  font-size: .9rem;
  color: var(--adm-ink);
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  border-radius: 9px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(17,24,32,.03);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-box input::placeholder{ color: #9aa4b1; }
.auth-box input:focus{
  outline: none;
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(20,106,84,.14);
}

.auth-box button{
  width: 100%;
  margin-top: 1.7rem;
  padding: .68rem;
  background: var(--adm-ink);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  transition: background-color .12s ease, transform .12s ease;
}
.auth-box button:hover{ background: #000; }
.auth-box button:active{ transform: translateY(.5px); }
.auth-box button:focus-visible{ outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* ---------- avisos ---------- */
/* Mismo patrón que las alertas del panel: franja de color +
   ícono trazado, en vez de un simple párrafo de texto. */

.auth-error, .auth-ok{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .65rem .8rem;
  margin: 0 0 .3rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.45;
}
.auth-error::before, .auth-ok::before{
  content: "";
  width: 16px; height: 16px;
  flex: none;
  margin-top: .12rem;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.auth-error{
  --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7.6v5M12 16.2v.2%22/%3E%3C/svg%3E");
  background: var(--adm-danger-bg);
  color: var(--adm-danger);
  border-color: rgba(168,50,31,.16);
}
.auth-ok{
  --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m8.5 12.2 2.4 2.4 4.6-4.9%22/%3E%3C/svg%3E");
  background: var(--adm-ok-bg);
  color: var(--adm-accent-ink);
  border-color: rgba(20,106,84,.16);
}

/* ---------- registro ---------- */

.auth-box-registro{ max-width: 400px; }

.auth-subtitulo{
  margin: -1rem 0 1.3rem;
  font-size: .87rem;
  color: var(--adm-muted);
  line-height: 1.45;
}

.auth-ayuda{
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--adm-muted);
  line-height: 1.4;
}

.campo-slug{
  display: flex;
  align-items: stretch;
  border: 1px solid var(--adm-line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--adm-surface);
  box-shadow: inset 0 1px 1px rgba(17,24,32,.03);
}
.campo-slug:focus-within{
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(20,106,84,.14);
}
.campo-slug-prefijo{
  display: flex;
  align-items: center;
  padding: 0 .5rem 0 .8rem;
  font-size: .8rem;
  color: var(--adm-muted);
  background: var(--adm-surface-2);
  border-right: 1px solid var(--adm-line);
  white-space: nowrap;
  flex: none;
}
.campo-slug input{
  border: none;
  border-radius: 0;
  min-width: 0;
  box-shadow: none;
  background: transparent;
}
.campo-slug input:focus{ box-shadow: none; background: transparent; }

/* Honeypot: existe en el DOM para engañar bots de formularios, pero
   nunca debe ser visible ni alcanzable con teclado para una persona. */
.campo-trampa{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-link-secundario{
  margin: 1.3rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--adm-muted);
}
.auth-link-secundario a{
  color: var(--adm-accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.auth-link-secundario a:hover{ text-decoration: underline; }

/* ---------- foco visible, coherente con el resto de la app ---------- */

.auth-box a:focus-visible{
  outline: 2px solid var(--adm-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- responsive ---------- */

@media (max-width: 400px){
  body{ padding: 1rem; }
  .auth-box{ padding: 1.6rem 1.35rem 1.5rem; border-radius: 12px; }
  .auth-box h2{ font-size: 1.15rem; }
}

@media (min-width: 640px){
  .auth-box{ padding: 2.3rem 2.2rem 2rem; }
}

/* pantallas muy bajas (teclado on-screen abierto): evita que la
   tarjeta se corte, permite scroll dentro del viewport */
@media (max-height: 560px){
  body{ align-items: flex-start; padding-top: 2rem; }
}