/* Mismo lenguaje visual que el resto de restree (ver src/styles/global.css):
   Montserrat, layout centrado a 480px, botones píldora, fadeIn de entrada.
   Curvas y timings alineados con restree-admin (ver global.css --ease-out). */

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

:root {
  --color-bg: #fff;
  --color-primary: #111;
  --color-accent: #F08D41;
  --color-accent-dark: #d97a2f;
  --font-main: 'Montserrat', Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wrap {
  width: 100%;
  max-width: 480px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.25rem 2rem;
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.5s var(--ease-out) forwards;
}

.logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 20px;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

h1 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin-bottom: 0.3rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.desc {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 1.6rem;
}

.msg {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
  margin-top: 1rem;
}

.msg.error { color: #c0392b; }

/* ── Loading: spinner en vez de solo texto ── */
#loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}
#loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #e5e5e5;
  border-top-color: var(--color-accent);
  animation: spin 700ms linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Botón píldora: relleno (acción primaria), igual lenguaje que el resto de restree ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(240, 141, 65, 0.28);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  margin-top: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(240, 141, 65, 0.34);
  }
}
.btn:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(240, 141, 65, 0.24); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.btn .icon { flex-shrink: 0; }

/* Secundaria: contorno, sin relleno — para acciones de menor jerarquía */
.btn-outline {
  background: transparent;
  border-color: #e5e5e5;
  color: #777;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    background: transparent;
    border-color: #ccc;
    color: #444;
    transform: none;
    box-shadow: none;
  }
}
.btn-outline:active { transform: scale(0.97); }

.or {
  color: #999;
  font-size: 0.8rem;
  margin: 1.1rem 0 0.3rem;
}

#email-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

#email-input {
  width: 100%;
  padding: 0.8rem 1.1rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  border-radius: 999px;
  border: 2px solid #e5e5e5;
  color: var(--color-primary);
  transition: border-color 160ms var(--ease-out);
}
#email-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.g-container { display: none; }
#qr-reader {
  margin-top: 1.25rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.turnstile-container {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

section[hidden] { display: none; }

/* Entrada de pantalla (login → scan → gracias): evita el "salto" instantáneo */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
section.screen-enter {
  animation: screenIn 350ms var(--ease-out);
}

.lang-toggle {
  align-self: flex-end;
  border: 1.5px solid #e5e5e5;
  background: transparent;
  color: #999;
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
}
.lang-toggle:active { transform: scale(0.94); }

.vote-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #555;
  margin: 0.4rem 0 1.2rem;
}
.vote-count strong {
  font-size: 1.1rem;
  color: var(--color-primary);
}
.vote-count .bump {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
}
.vote-count .bump.show {
  animation: bumpIn 900ms var(--ease-out) forwards;
}
@keyframes bumpIn {
  0%   { opacity: 0; transform: translateY(4px) scale(0.8); }
  30%  { opacity: 1; transform: translateY(-2px) scale(1.15); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

.my-votes {
  width: 100%;
  text-align: left;
  margin: 0.4rem 0 1.2rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #f9f9f9;
}
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin-bottom: 0.5rem;
}
.my-votes ul { list-style: none; }
.my-votes li {
  font-size: 0.85rem;
  color: #333;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee;
}
.my-votes li:last-child { border-bottom: none; }
.my-votes li strong { color: var(--color-primary); }

.thanks-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.thanks-ctas a.btn { text-decoration: none; }