:root{
  --topbar-a:#8a633b;   /* café claro */
  --topbar-b:#765433;   /* café oscuro */
  --cream:#efe3cf;      /* fondo crema */
  --stroke:#6b5b4b;     /* línea taza */
  --pill-bg:#ffffff;    /* campos */
  --pill-br:#a7d4bf;    /* borde verdoso */
  --accent:#4aa36c;     /* verde botón */
  --accent-hover:#5bb07b;
  --text:#1f1f1f;
}

/* ========== Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:var(--cream);
}

/* ========== Topbar ========== */
.topbar {
  width: 100%;
  background: linear-gradient(180deg, var(--topbar-a), var(--topbar-b));
  color: #fff;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}

.topbar h1 {
  margin: 0;
  letter-spacing: .06em;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
}

/* ========== Escenario central ========== */
.stage{
  position:relative;
  min-height:calc(100vh - 64px);
  padding:24px;
  /* Usamos Flexbox para controlar mejor el apilamiento en móvil */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Taza SVG */
.cup{
  width:min(760px,90vw);
  height:auto;
  opacity:.85;
  display:block;
  /* Animación sutil de entrada (opcional) */
  transition: width 0.3s ease;
}

/* ========== Formulario (Estilo Base / Desktop) ========== */
.login {
  /* Por defecto (Desktop) posición absoluta sobre la taza */
  position: absolute;
  
  /* --- CORRECCIÓN DE CENTRADO --- */
  top: 60%;      /* Antes era 55%. 50% es el centro exacto vertical */
  left: 48%;     /* Mantenemos 48% para compensar visualmente el asa de la taza a la derecha */
  transform: translate(-50%, -50%); /* Esto centra el propio formulario sobre el punto elegido */
  /* ------------------------------ */
  
  display: grid;
  gap: 12px;
  width: min(200px, 70vw);
  text-align: center;
  z-index: 10;
}

.login input,
.login .btn{
  height:30px; /* Aumenté un poco la altura para mejor clic */
  border-radius:10px;
  border:1.5px solid var(--pill-br);
  background:var(--pill-bg);
  padding:0 10px;
  font-weight:700;
  letter-spacing:.02em;
  width: 100%; /* Asegura que llenen el contenedor */
  box-shadow:0 1px 2px rgba(0,0,0,.08),
             inset 0 1px 0 rgba(255,255,255,.9);
}

/* Placeholder en mayúsculas */
::placeholder{ color:#6b6b6b; font-weight:700; font-size: 0.85rem; }

/* Enfoque */
.login input:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(74,163,108,.18),
             0 1px 2px rgba(0,0,0,.08);
}

/* Botón */
.btn{
  background:#ffffff;
  color:#0e3a23;
  cursor:pointer;
  transition:transform .12s ease,
             background .2s ease,
             border-color .2s ease;
}
.btn:hover{
  background:#eef7f1;
  transform:translateY(-1px);
  border-color:#79c3a3;
}

.btn:active{
  transform:translateY(0);
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ========== RESPONSIVO (Móvil y Tablets Pequeñas) ========== */
/* Se activa cuando la pantalla es menor a 768px */
@media (max-width: 768px){
  
  .topbar h1{ font-size:22px; }

  /* 1. La taza deja de ser el contenedor. Se vuelve un logo decorativo arriba */
  .cup {
    width: 180px; /* Tamaño fijo más pequeño */
    margin-bottom: 30px; /* Empuja el formulario hacia abajo */
  }

  /* 2. El formulario deja de flotar y se apila debajo de la taza */
  .login {
    position: static; /* Ya no es absoluto */
    transform: none;  /* Quitamos el centrado forzado */
    width: 100%;
    max-width: 320px; /* Ancho cómodo para celular */
    
    /* Opcional: darle un fondo suave tipo tarjeta para que resalte */
    background: rgba(255, 255, 255, 0.4);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(107, 91, 75, 0.1);
  }

  /* Inputs más grandes para dedos táctiles */
  .login input, .login .btn {
    height: 45px; 
    font-size: 16px; /* Evita que el iPhone haga zoom al escribir */
  }
}