/* ═══════════════════════════════════════════════════════════════════════════
   acceso.css — el cartel de acceso.

   Aparte de admin.css y del CSS de la tienda a proposito: los dos estan
   detras de la puerta que esta misma pagina abre. Son treinta reglas y usan
   los mismos colores que el resto del sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #F7F5F0; --papel: #FFFFFF; --tinta: #203132; --oscuro: #1E2A2B;
  --suave: #658081; --tenue: #93A3A2; --linea: #E7E2D9;
  --acento: #86D2D0; --acento-tinta: #1F6F6D; --problema: #B4403A;
  --problema-suave: #F9E6E4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

.ac-body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  padding: 24px; background: var(--bg); color: var(--tinta);
  font: 15px/1.55 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ac-caja {
  width: 100%; max-width: 380px; padding: 34px 30px 26px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 16px;
  box-shadow: 0 18px 38px rgba(30, 42, 43, .08); text-align: center;
}
.ac-logo { height: auto; margin-bottom: 14px; }
.ac-caja h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--oscuro); }
.ac-baja { margin: 6px 0 22px; font-size: 13.5px; color: var(--suave); }

.ac-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.ac-campo { display: flex; flex-direction: column; gap: 5px; }
.ac-campo span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tenue);
}
.ac-campo input {
  width: 100%; padding: 11px 13px; font: inherit; color: inherit;
  border: 1px solid var(--linea); border-radius: 10px; background: #FBFAF7;
}
.ac-campo input:focus {
  outline: 0; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(134, 210, 208, .3); background: var(--papel);
}
.ac-btn {
  margin-top: 4px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: var(--oscuro); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
}
.ac-btn:hover:not(:disabled) { background: #16211f; }
.ac-btn:disabled { opacity: .6; cursor: default; }

.ac-error {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: var(--problema-suave); color: var(--problema); font-size: 13.5px;
}
.ac-pie { margin: 20px 0 0; font-size: 12.5px; color: var(--tenue); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }