/* Paleta y formas tomadas de anpa-web (src/styles.css y componentes de la home) */
:root {
  --surface-50: rgb(248, 250, 247);
  --surface-100: rgb(238, 243, 237);
  --surface-200: rgb(220, 229, 218);
  --surface-600: rgb(71, 85, 69);
  --surface-800: rgb(30, 39, 29);
  --surface-900: rgb(15, 23, 14);
  --primary: rgb(72, 159, 67);
  --primary-300: rgb(120, 205, 110);
  --primary-700: rgb(55, 125, 52);
  --primary-100: rgb(220, 239, 219);
  --rojo: rgb(185, 60, 60);
  --fondo: var(--surface-50);
  --texto: var(--surface-900);
  --texto-suave: var(--surface-600);
  --borde: var(--surface-100);
  color-scheme: light;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Cabecera con logotipo, como la web */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.nav-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texto);
  text-decoration: none;
  font-weight: 800;
}

/* Logotipo: pastilla blanca y nombre en dos líneas, como en la web */
.nav-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(15 23 14 / 0.06);
}

.nav-icono img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.nav-texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nav-texto strong {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.nav-texto small {
  margin-top: 0.3rem;
  color: var(--surface-900);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Portada oscura, sin fotografía */
.hero {
  position: relative;
  min-height: 34vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 5rem;
  text-align: center;
  color: #fff;
  background: var(--surface-900);
}

.hero-contido {
  max-width: 40rem;
}

.etiqueta {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgb(120 205 110 / 0.4);
  border-radius: 999px;
  background: rgb(72 159 67 / 0.15);
  color: var(--primary-300);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
}

.acento {
  background: linear-gradient(90deg, var(--primary-300), #6fbfa3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  color: var(--surface-200, rgb(220 229 218));
  font-size: 1.05rem;
  max-width: 34rem;
  margin: 1rem auto 0;
}

/* Contenido: tarjetas que suben sobre la portada */
main {
  width: 100%;
  max-width: 40rem;
  margin: -3.5rem auto 0;
  padding: 0 1rem 3rem;
  display: grid;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

/* El panel de la junta agrupa varias tarjetas: necesita el mismo espacio que la portada */
#panel {
  display: grid;
  gap: 1.5rem;
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px -20px rgb(15 23 14 / 0.25);
  padding: 1.5rem;
}

.tarjeta h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

/* Resumen de candidaturas */
.resumen-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.resumen-cabecera {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
}

.barra {
  height: 0.6rem;
  background: var(--surface-100);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0 0.25rem;
}

.barra > div {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-300));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.resumen-lista small,
.resumen-actualizado {
  color: var(--texto-suave);
  font-size: 0.8rem;
}

.resumen-conclusion {
  margin: 1.25rem 0 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--primary-100);
  color: var(--surface-900);
  font-weight: 700;
}

.resumen-conclusion.pendiente {
  background: var(--surface-100);
}

/* Formularios */
form {
  display: grid;
  gap: 1rem;
}

.campos {
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .campos.dos {
    grid-template-columns: 1fr 1fr;
  }
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--surface-800);
}

input, select, button {
  font: inherit;
  font-weight: 500;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--surface-200);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--texto);
  width: 100%;
}

input:focus, select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.consentimento {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.consentimento input {
  width: auto;
  margin-top: 0.25rem;
}

/* Botones en pastilla, como los de la web */
button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 25px -10px rgb(72 159 67 / 0.7);
  transition: background 0.2s, transform 0.1s;
}

button:hover { background: var(--primary-700); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.6; cursor: wait; }

button.secundario {
  background: transparent;
  color: var(--surface-800);
  border: 1px solid var(--surface-200);
  box-shadow: none;
  width: auto;
  font-weight: 700;
}

.trampa { position: absolute; left: -9999px; }

#estado-form, #estado-login, #estado-panel {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

#estado-form[data-tipo="ok"], #estado-panel[data-tipo="ok"] { color: var(--primary-700); }
#estado-form[data-tipo="error"], #estado-login[data-tipo="error"] { color: var(--rojo); }

/* Errores de validación junto a cada campo */
.erro-campo {
  display: block;
  margin-top: 0.25rem;
  color: var(--rojo);
  font-size: 0.85rem;
  font-weight: 600;
}

.campo-erroneo input,
.campo-erroneo select {
  border-color: var(--rojo);
}

/* Panel de la junta */
.barra-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.tabla-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--borde);
}

th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

td input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Estación de la mesa: código grande y QR para escanear desde el móvil */
.codigo-grande {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.qr {
  display: grid;
  justify-items: center;
  margin: 1rem 0;
}

.qr svg {
  width: min(260px, 80vw);
  height: auto;
  background: #fff;
  padding: 8px;
  border-radius: 0.75rem;
}

/* Pie */
.pie {
  background: var(--surface-900);
  color: var(--surface-200, rgb(220 229 218));
  font-size: 0.85rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.pie a {
  color: var(--primary-300);
  font-weight: 700;
}

/* ---------- Avisos: los mensajes de estado se ven como cajas, no como texto suelto ---------- */
:root {
  --ambar: rgb(150, 95, 10);
}

p[role="status"] {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

p[role="status"]:empty,
.aviso:empty { display: none; }

p[role="status"][data-tipo="error"],
p[role="status"][data-tipo="ok"],
p[role="status"][data-tipo="aviso"],
.aviso {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid;
  font-weight: 600;
}

p[role="status"][data-tipo="error"] {
  background: rgb(185 60 60 / 0.07);
  border-color: rgb(185 60 60 / 0.35);
  color: var(--rojo);
}

p[role="status"][data-tipo="ok"],
.aviso.ok {
  background: var(--primary-100);
  border-color: rgb(72 159 67 / 0.4);
  color: var(--primary-700);
}

p[role="status"][data-tipo="aviso"],
.aviso.info {
  background: rgb(240 170 40 / 0.12);
  border-color: rgb(200 140 30 / 0.45);
  color: var(--ambar);
}

p[role="status"][data-tipo="error"]::before { content: "⚠"; }
p[role="status"][data-tipo="aviso"]::before { content: "ℹ"; }
p[role="status"][data-tipo="ok"]::before { content: "✓"; }

/* ---------- Cabecera: usuario y botón de salir ---------- */
.nav-usuario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
  min-width: 0;
}

.nav-usuario span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

button.pequeno {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

@media (max-width: 520px) {
  .nav-usuario span { display: none; }
}

/* ---------- Pasos del proceso de votación ---------- */
.pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  counter-reset: paso;
}

.pasos li {
  counter-increment: paso;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--surface-100);
  color: var(--surface-600);
  font-weight: 900;
}

.pasos li.feito::before {
  content: "✓";
  background: var(--primary-100);
  color: var(--primary-700);
}

.pasos li.actual { color: var(--texto); }

.pasos li.actual::before {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--primary-100);
}

/* Tarjeta de un paso que aún no está disponible */
.tarjeta.bloqueada {
  opacity: 0.55;
  box-shadow: none;
}

.tarjeta .explicacion {
  margin: 0 0 1rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.botons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.botons button { width: auto; flex: 1 1 12rem; }

/* Contador grande y progreso de la votación en directo */
.contador {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.contador strong {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.contador span {
  color: var(--texto-suave);
  font-weight: 600;
}

.barra.grande { height: 1.1rem; }

.completo {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--primary-100);
  color: var(--primary-700);
  font-weight: 800;
  font-size: 0.85rem;
}

/* ---------- Papeleta de votación ---------- */
.papeleta-bloque {
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1rem;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.papeleta-bloque legend {
  padding: 0 0.4rem;
  font-weight: 900;
  font-size: 1.05rem;
}

.papeleta-bloque .axuda {
  margin: 0 0 0.25rem;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

/* Cada opción es una fila grande y fácil de pulsar, con una casilla cuadrada como en una papeleta en papel */
.opcion-voto {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--surface-100);
  border-radius: 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opcion-voto:hover { border-color: var(--surface-200); }

.opcion-voto input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opcion-voto .marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--surface-600);
  border-radius: 0.35rem;
  font-weight: 900;
  color: transparent;
}

.opcion-voto:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-100);
}

.opcion-voto:has(input:checked) .marca {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.opcion-voto:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.opcion-voto.en-branco {
  font-weight: 500;
  font-style: italic;
  color: var(--texto-suave);
}

.contador-vocales {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-700);
}

/* Resumen del voto antes de enviarlo */
.resumo-voto {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}

.resumo-voto li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--surface-50);
  border: 1px solid var(--borde);
}

.resumo-voto li span:first-child { color: var(--texto-suave); font-weight: 600; }
.resumo-voto li span:last-child { font-weight: 800; text-align: right; }

/* Código de voto: grande y legible */
.campo-codigo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

/* Enlace con aspecto de botón secundario (p. ej. abrir la pantalla de proyección) */
.boton-enlace {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--surface-200);
  border-radius: 999px;
  color: var(--surface-800);
  font-weight: 700;
  text-decoration: none;
}

.boton-enlace:hover { background: var(--surface-100); }

/* ---------- Pestañas del panel de la junta ---------- */
.pestanas {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  box-shadow: 0 20px 40px -20px rgb(15 23 14 / 0.25);
}

.pestanas button {
  flex: 1;
  background: transparent;
  color: var(--surface-800);
  box-shadow: none;
  font-weight: 800;
  padding: 0.6rem 1rem;
}

.pestanas button[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}

.vista {
  display: grid;
  gap: 1.5rem;
}

/* Botón que se lee como un enlace dentro del texto */
button.ligazon {
  display: inline;
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--primary-700);
  font-weight: 800;
  text-decoration: underline;
}

button.ligazon:hover { background: none; }

/* Datos del curso activo */
.datos {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

@media (min-width: 560px) {
  .datos { grid-template-columns: repeat(3, 1fr); }
}

.datos div {
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--surface-50);
  border: 1px solid var(--borde);
}

.datos dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.datos dd {
  margin: 0.2rem 0 0;
  font-weight: 800;
}

.pasos-texto {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.tarjeta h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }

/* Lista de cursos con sus marcas */
.lista-cursos {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}

.lista-cursos li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid var(--borde);
  font-weight: 800;
}

.lista-cursos li button { margin-left: auto; }

.marca-estado {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-100);
  color: var(--surface-800);
  font-size: 0.75rem;
  font-weight: 700;
}

.marca-estado.activo { background: var(--primary-100); color: var(--primary-700); }
.marca-estado.alerta { background: rgb(240 170 40 / 0.18); color: var(--ambar); }

.accions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.accions button { width: auto; }

/* Los elementos de una rejilla no encogen por debajo de su contenido: sin esto, una tabla ancha
   ensancha la tarjeta entera en el móvil en vez de desplazarse dentro de .tabla-scroll */
main > *,
#panel > *,
.vista > * {
  min-width: 0;
}

/* Los pasos se reparten en tantas columnas como haya */
.pasos {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* Lista de candidaturas por cargo (mesa y proyección) */
.cargo-candidaturas {
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid var(--borde);
  background: var(--surface-50);
}

.cargo-candidaturas .nomes {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.cargo-candidaturas small { color: var(--ambar); font-weight: 700; }
.cumpre { color: var(--primary-700); }
.non-cumpre { color: var(--ambar); }

/* Pantalla de proyección: números y textos grandes para leer desde lejos */
.proxeccion { max-width: 56rem; }
.proxeccion #mensaxe { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.proxeccion .contador strong { font-size: clamp(3rem, 8vw, 5.5rem); }
.proxeccion .contador span { font-size: 1.15rem; }
.proxeccion .cargo-candidaturas .nomes { font-size: 1.1rem; }