/* =========================================================
   LOGIN — SISTEMA RESTAURANTE
   Paleta: medianoche + latón/ámbar (anillo de hornilla)
   Tipos:  Space Grotesk (display) · Inter (texto)
   ========================================================= */

:root {
  --fondo:        #0A0F1C;
  --fondo-2:      #0E1526;
  --tarjeta:      rgba(18, 26, 44, 0.72);
  --borde:        rgba(148, 163, 184, 0.14);
  --texto:        #EAF0F7;
  --texto-suave:  #93A0B4;
  --ambar:        #D9A44A;   /* latón */
  --ember:        #E2703A;   /* brasa  */
  --exito:        #34D399;
  --error:        #F87171;
  --radio:        18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1100px 600px at 15% 20%, rgba(217,164,74,0.07), transparent 60%),
    radial-gradient(900px 500px at 90% 85%, rgba(226,112,58,0.06), transparent 55%),
    var(--fondo);
  color: var(--texto);
  min-height: 100vh;
}

/* rejilla sutil de fondo */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.escena {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
}

/* =============== PANEL DE MARCA =============== */
.panel-marca {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 6vh 8vw;
  gap: 28px;
}

/* --- Firma del diseño: anillo de hornilla --- */
.anillo-wrap {
  position: relative;
  width: 190px; height: 190px;
  display: grid; place-items: center;
}
.anillo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(217,164,74,0.15) 60deg,
    var(--ambar) 150deg,
    var(--ember) 210deg,
    rgba(226,112,58,0.15) 300deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), black calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), black calc(100% - 9px));
  animation: girar 7s linear infinite;
  filter: drop-shadow(0 0 18px rgba(217,164,74,0.35));
}
.anillo-nucleo {
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 38px;
  color: var(--ambar);
  background: radial-gradient(circle at 35% 30%, #16203A, #0C1222 70%);
  border: 1px solid var(--borde);
  box-shadow: inset 0 0 30px rgba(217,164,74,0.08);
}
@keyframes girar { to { transform: rotate(360deg); } }

.marca-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--texto) 55%, var(--ambar));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.marca-sub {
  color: var(--texto-suave);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.marca-pie {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem;
  color: var(--texto-suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(6px);
}
.punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--exito);
  box-shadow: 0 0 10px var(--exito);
  animation: latir 2.2s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: 0.45; } }

/* =============== PANEL DEL FORMULARIO =============== */
.panel-form {
  display: grid;
  place-items: center;
  padding: 5vh 6vw;
}

.tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 40px 36px 30px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.tarjeta-cab { margin-bottom: 26px; }
.eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
}
.tarjeta-cab h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin: 8px 0 4px;
}
.tarjeta-cab p { color: var(--texto-suave); font-size: 0.92rem; }

/* --- alerta --- */
.alerta {
  display: none;
  align-items: center; gap: 8px;
  font-size: 0.86rem;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 18px;
}
.alerta.visible { display: flex; animation: entrar 0.25s ease; }
.alerta.error { background: rgba(248,113,113,0.1); color: var(--error); border: 1px solid rgba(248,113,113,0.25); }
.alerta.aviso { background: rgba(217,164,74,0.1);  color: var(--ambar); border: 1px solid rgba(217,164,74,0.25); }
@keyframes entrar { from { opacity: 0; transform: translateY(-6px); } }

/* --- campos con label flotante --- */
.campo { position: relative; margin-bottom: 20px; }

.campo input {
  width: 100%;
  background: rgba(10, 16, 30, 0.6);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 17px 46px 17px 16px;
  font: 500 0.95rem 'Inter', sans-serif;
  color: var(--texto);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo input:focus {
  outline: none;
  border-color: var(--ambar);
  box-shadow: 0 0 0 3px rgba(217,164,74,0.16);
}

.campo label {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 0.93rem;
  pointer-events: none;
  transition: 0.18s ease;
  background: transparent;
  padding: 0 4px;
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 0.72rem;
  color: var(--ambar);
  background: linear-gradient(#121A2C, #121A2C);
  border-radius: 4px;
}

.campo .icono {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.ver-pass {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--texto-suave);
  font-size: 0.95rem;
  padding: 8px; cursor: pointer;
  border-radius: 8px;
  transition: color 0.2s;
}
.ver-pass:hover, .ver-pass:focus-visible { color: var(--ambar); }
.ver-pass:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* --- botón --- */
.btn-ingresar {
  width: 100%;
  position: relative;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font: 600 1rem 'Space Grotesk', sans-serif;
  letter-spacing: 0.03em;
  color: #14100A;
  background: linear-gradient(120deg, var(--ambar), var(--ember));
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
  box-shadow: 0 10px 26px rgba(217,164,74,0.25);
}
.btn-ingresar:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ingresar:active:not(:disabled) { transform: translateY(0); }
.btn-ingresar:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.btn-ingresar:disabled { cursor: not-allowed; opacity: 0.85; }

.btn-cargando { display: none; }
.btn-ingresar.cargando .btn-texto { display: none; }
.btn-ingresar.cargando .btn-cargando { display: inline-flex; align-items: center; gap: 8px; }
.btn-ingresar.exito { background: linear-gradient(120deg, var(--exito), #22B07D); color: #04150E; }

.tarjeta-pie {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.76rem;
  color: var(--texto-suave);
}
.tarjeta-pie i { color: var(--ambar); }

/* =============== RESPONSIVE =============== */
@media (max-width: 900px) {
  .escena { grid-template-columns: 1fr; }
  .panel-marca {
    align-items: center;
    text-align: center;
    padding: 7vh 8vw 2vh;
    gap: 18px;
  }
  .anillo-wrap { width: 130px; height: 130px; }
  .anillo-nucleo { width: 82px; height: 82px; font-size: 26px; }
  .marca-pie { display: none; }
  .panel-form { padding: 3vh 6vw 7vh; }
  .tarjeta { padding: 32px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .anillo, .punto { animation: none; }
  * { transition-duration: 0.01ms !important; }
}