/* Vuelve AI — puerta de acceso. Marca: rosa, lila y dorado luminoso sobre
   mármol blanco; ciruela para el texto. Cormorant Garamond para titulares. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --ciruela: #4a2545;
  --ciruela-2: #6d3563;
  --rosa: #e8a0bf;
  --rosa-suave: #fbeef5;
  --lila: #c9a7eb;
  --dorado: #c9a227;
  --dorado-suave: #f3e5bb;
  --borde: #e9d5e5;
}

* { box-sizing: border-box; }

/* El atributo hidden SIEMPRE manda. Sin esta red, una regla propia como
   .gate-form{display:flex} lo anulaba y AMBOS formularios de la puerta
   (registro y login) quedaban visibles a la vez al cambiar de pestaña —
   fue exactamente lo que vio la dueña: «Ya tengo cuenta» seleccionado y
   el formulario de registro completo debajo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--ciruela);
  background:
    radial-gradient(1100px 500px at 15% -10%, #fbe3f0 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #efe4fb 0%, transparent 55%),
    linear-gradient(180deg, #fffafc 0%, #fdf3f9 100%);
  min-height: 100vh;
}

.gate {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px 48px;
}

.gate-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--borde);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(109, 53, 99, 0.14);
  padding: 30px 26px 26px;
  text-align: center;
}

.gate-logo {
  width: 118px; height: 118px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--dorado-suave);
  box-shadow: 0 0 0 5px #fff, 0 10px 26px rgba(201, 162, 39, 0.25);
}

.gate-brand {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 600;
  margin: 12px 0 0;
  color: var(--ciruela);
}

.gate-tag {
  margin: 2px 0 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: var(--dorado);
}

.gate-phrase {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 19px;
  margin: 10px 0 4px;
  color: var(--ciruela-2);
}

.gate-lang { margin: 14px 0 6px; display: flex; gap: 8px; justify-content: center; }
.lang-btn {
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--ciruela-2);
  border-radius: 999px;
  padding: 5px 14px;
  font: 600 12px "Montserrat", sans-serif;
  cursor: pointer;
}
.lang-btn.active {
  background: linear-gradient(135deg, var(--ciruela-2), var(--ciruela));
  color: #fff;
  border-color: transparent;
}

.gate-tabs {
  display: flex; gap: 8px; margin: 14px 0 18px;
  background: var(--rosa-suave);
  border-radius: 999px; padding: 5px;
}
.gate-tabs .tab {
  flex: 1; border: 0; border-radius: 999px; padding: 10px 6px;
  background: transparent; color: var(--ciruela-2);
  font: 600 13.5px "Montserrat", sans-serif; cursor: pointer;
}
.gate-tabs .tab.active {
  background: linear-gradient(135deg, var(--ciruela-2), var(--ciruela));
  color: #fff;
  box-shadow: 0 6px 16px rgba(74, 37, 69, 0.25);
}

.gate-form { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.gate-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ciruela-2); }
.gate-form input[type="text"],
.gate-form input[type="email"],
.gate-form input[type="tel"],
.gate-form input[type="password"] {
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 13px;
  font: 500 15px "Montserrat", sans-serif;
  color: var(--ciruela);
  background: #fff;
  outline: none;
}
.gate-form input:focus { border-color: var(--lila); box-shadow: 0 0 0 3px rgba(201, 167, 235, 0.25); }

.gate-entry { border: 1px dashed var(--borde); border-radius: 16px; padding: 12px; margin: 2px 0; }
.gate-entry legend { font-size: 12.5px; font-weight: 700; color: var(--ciruela-2); padding: 0 6px; }
.gate-entry .entry-card {
  flex-direction: row; align-items: flex-start; gap: 10px;
  background: var(--rosa-suave);
  border-radius: 12px; padding: 10px 12px; margin-top: 8px; cursor: pointer;
  font-weight: 500; color: var(--ciruela);
}
.gate-entry .entry-card input { margin-top: 3px; accent-color: var(--ciruela-2); }
.gate-entry .entry-card small { color: var(--ciruela-2); }

.gate-cta {
  display: block; width: 100%;
  border: 0; border-radius: 999px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #d6336c, var(--ciruela-2));
  color: #fff; text-align: center; text-decoration: none;
  font: 700 15.5px "Montserrat", sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(214, 51, 108, 0.28);
}
.gate-cta:hover { filter: brightness(1.05); }
.gate-pay { margin-top: 10px; }
.gate-pay.gold { background: linear-gradient(135deg, var(--dorado), #a8861c); box-shadow: 0 10px 22px rgba(201, 162, 39, 0.3); }

.gate-h2 { font-family: "Cormorant Garamond", serif; font-size: 28px; margin: 8px 0 4px; }
.gate-note { font-size: 13px; color: var(--ciruela-2); line-height: 1.55; margin: 8px 0; text-align: center; }
.gate-form .gate-note { text-align: center; }
.gate-error {
  background: #fdeef2; border: 1px solid #f3b8c6; color: #8f1d3f;
  border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0;
}
.gate-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.gate-mini {
  border: 1px solid var(--borde); background: #fff; color: var(--ciruela-2);
  border-radius: 999px; padding: 8px 14px;
  font: 600 12.5px "Montserrat", sans-serif; cursor: pointer;
}

.app-logout {
  /* Arriba a la derecha, bajo el área segura: abajo se encimaba con la barra
     de navegación y con los botones de acción de cada vista (Guardar,
     Agregar servicio…). Arriba todas las vistas tienen foto o fondo libre. */
  position: fixed; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 9999;
  border: 1px solid var(--dorado-suave);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ciruela-2);
  border-radius: 999px; padding: 8px 14px;
  font: 600 12.5px "Montserrat", sans-serif;
  box-shadow: 0 8px 20px rgba(74, 37, 69, 0.18);
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   Correcciones de presentación de la app (solo CSS, sin tocar el bundle):
   barra inferior, desborde horizontal en iPhone y encuadres de fotos hero.
   Las reglas de la app llevan prefijo #app-root (ID) para ganar en cascada
   a las utilidades compiladas del bundle, que gate.js inyecta después.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Desborde horizontal: que nada pueda correr la vista de lado ──
   La causa raíz en iPhone: los controles nativos (input type="time") tienen
   un ancho intrínseco mayor que su mitad de la rejilla y pintan fuera de su
   celda, ensanchando el área desplazable y corriendo TODA la vista (títulos
   y hasta la barra fija salían cortados a la izquierda). Se contiene el
   elemento y, como red estructural, se elimina el eje x desplazable: todo
   el contenido legítimo es fluido (w-full, max-w-xl), nada se recorta. */
html, body { overflow-x: hidden; overflow-x: clip; }
#app-root { overflow-x: hidden; overflow-x: clip; }
#app-root input, #app-root select, #app-root textarea { max-width: 100%; min-width: 0; }
#app-root .grid > * { min-width: 0; }
#pf-start, #pf-end { min-width: 0; }

/* ── Barra de navegación inferior: más grande y sobre el área segura ──
   Antes: botones de 60px, íconos de 21px y rótulos de 12px, con el único
   colchón del pb-safe del bundle. Ahora respira: aire arriba, colchón bajo
   los rótulos además del área segura del teléfono, y blancos cómodos. */
#app-root nav {
  padding-top: 8px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}
#app-root nav button {
  min-height: 72px;
  gap: 3px;
  padding-top: 6px;
  padding-bottom: 6px;
}
#app-root nav button svg { width: 26px; height: 26px; }
#app-root nav button span { font-size: 13px; }
/* El contenido nunca queda escondido tras la barra nueva (más alta). */
#app-root main { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }

/* ── Fotos principales (hero): encuadre centrado y completo ──
   Regla de marca: el sujeto principal entero dentro del marco; las caras
   siempre completas, jamás «mochas». Encuadres validados por recorte
   simulado a 390px sobre cada foto fuente. El selector [class*="w-full"]
   distingue la foto hero de la miniatura redonda de Negocio (w-12), que
   usa la misma mariposa y no se toca. */
/* Mi perfil — la estilista: su cara manda arriba; la clienta queda fuera
   de cuadro (en la foto fuente su cara ya nace cortada por el borde). */
#app-root img[src*="estilista-"][class*="w-full"] { object-position: 50% 5%; }
/* Tu día — la mariposa de cristal completa, alas enteras en su tarjeta. */
#app-root img[src*="mariposa-"][class*="w-full"] { height: 208px; object-position: 50% 46%; }
/* Agenda — encuadre más bajo y marco más alto: agenda, vela y el abanico
   de mechas completos, sin rebanar arriba ni abajo. */
#app-root img[src*="agenda-"][class*="w-full"] { height: 240px; object-position: 50% 82%; }
/* Tu día (voz) — el teléfono completo dentro del marco. */
#app-root img[src*="voz-"][class*="w-full"] { object-position: 50% 55%; }
/* Ficha de clienta — el bol de tinte con su brocha, enteros. */
#app-root img[src*="color-"][class*="w-full"] { height: 208px; object-position: 50% 42%; }

/* ════════════════════════════════════════════════════════════════════════
   Ronda de seguridad: enlace «¿Olvidaste tu contraseña?», notas de éxito
   (verde suave, espejo de .gate-error), pie de la tarjeta y el cuerpo del
   aviso «Privacidad y seguridad». Solo presentación.
   ════════════════════════════════════════════════════════════════════════ */
.gate-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ciruela-2); text-decoration: underline; text-underline-offset: 3px;
  font: 600 13px "Montserrat", sans-serif;
}
.gate-link:hover { color: var(--ciruela); }
.gate-success {
  background: #eefaf0; border: 1px solid #bfe3c8; color: #1d5c2e;
  border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0;
  text-align: center;
}
.gate-foot { margin-top: 16px; text-align: center; }
.gate-privacy { text-align: left; font-size: 13.5px; line-height: 1.6; color: var(--ciruela); }
.gate-privacy h3 {
  font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600;
  color: var(--ciruela-2); margin: 16px 0 4px;
}
.gate-privacy h3:first-child { margin-top: 6px; }
.gate-privacy p { margin: 0 0 6px; }