/* =========================================================
   Ensino en Loita — Mapa de incumprimentos
   Folla de estilos da maqueta visual
   ========================================================= */

:root {
  --negro: #0A0A0A;
  --negro-suave: #1A1A1A;
  --branco: #FFFFFF;
  --branco-suave: #FAFAFA;
  --vermello: #D8232A;
  --vermello-escuro: #A8181E;
  --gris-claro: #F1F1F1;
  --gris-medio: #BBBBBB;
  --gris-escuro: #555555;
  --gris-borde: #E2E2E2;
  --sombra: 0 2px 12px rgba(0, 0, 0, 0.08);

  --fonte-titular: 'Archivo Black', 'Bebas Neue', 'Inter', system-ui, sans-serif;
  --fonte-texto: 'Inter', 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--branco);
  color: var(--negro);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Evita overflow horizontal (banda branca a dereita en mobil) */
  overflow-x: hidden;
  max-width: 100vw;
}
img { max-width: 100%; height: auto; }

a { color: var(--vermello); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- Banner de demo ---------- */
.banner-demo {
  background: repeating-linear-gradient(
    45deg,
    #FFD400, #FFD400 14px,
    #0A0A0A 14px, #0A0A0A 28px
  );
  padding: 0.55rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0A0A0A;
}
.banner-demo__contido {
  display: inline-block;
  background: #FFD400;
  padding: 0.25rem 0.85rem;
  border-radius: 2px;
  border: 2px solid #0A0A0A;
}
.banner-demo__contido strong { color: #0A0A0A; }

/* ---------- Cabeceira ---------- */
.cabeceira {
  background: var(--negro);
  color: var(--branco);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 4px solid var(--vermello);
}

.cabeceira__marca {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}
.cabeceira__marca:hover { text-decoration: none; }

.cabeceira__logo {
  height: 64px;
  width: auto;
  flex-shrink: 0;
}

.boton.activo {
  background: var(--branco);
  color: var(--negro) !important;
  border-color: var(--branco);
}
.boton--primario.activo { background: var(--branco); color: var(--negro) !important; }

.cabeceira__textos {
  display: flex;
  flex-direction: column;
}

.cabeceira__titulo {
  font-family: var(--fonte-titular);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.cabeceira__subtitulo {
  font-size: 1rem;
  color: var(--gris-medio);
  margin: 0.25rem 0 0;
  font-weight: 400;
}

.cabeceira__accions {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s;
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--vermello);
  color: var(--branco);
}
.boton--primario:hover {
  background: var(--vermello-escuro);
  text-decoration: none;
}

.boton--ghost {
  background: transparent;
  color: var(--branco);
  border: 1px solid var(--branco);
}
.boton--ghost:hover {
  background: var(--branco);
  color: var(--negro);
  text-decoration: none;
}

.boton--secundario {
  background: var(--negro);
  color: var(--branco);
}
.boton--secundario:hover { background: var(--negro-suave); text-decoration: none; }

/* ---------- Mapa ---------- */
#mapa {
  width: 100%;
  height: 540px;
  background: #ddd;
}

@media (max-width: 720px) {
  #mapa { height: 380px; }
}

/* Pop-up do mapa */
.popup-incumprimento {
  width: 260px;
}
.popup-incumprimento__foto {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}
.popup-incumprimento__centro {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.1rem;
}
.popup-incumprimento__concello {
  font-size: 0.85rem;
  color: var(--gris-escuro);
  margin: 0 0 0.5rem;
}
.popup-incumprimento__categoria {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--branco);
  border-radius: 2px;
  margin-bottom: 0.5rem;
}
.popup-incumprimento__contadores {
  font-size: 0.78rem;
  color: var(--gris-escuro);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.popup-incumprimento__contadores strong { color: var(--negro); }
.popup-incumprimento__ver-mais {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--vermello);
}

/* ---------- Sección de control ---------- */
.controis {
  background: var(--branco-suave);
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--gris-borde);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.controis__buscador {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  border-radius: 2px;
  padding: 0.55rem 0.75rem;
}
.controis__buscador input {
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
}
.controis__buscador svg {
  width: 18px;
  height: 18px;
  color: var(--gris-escuro);
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.controis__pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris-escuro);
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.pill:hover { border-color: var(--gris-medio); }
.pill.activa {
  background: var(--negro);
  color: var(--branco);
  border-color: var(--negro);
}
.pill__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.controis__select {
  border: 1px solid var(--gris-borde);
  border-radius: 2px;
  padding: 0.55rem 0.75rem;
  background: var(--branco);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--negro);
}

.controis__exportar {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.controis__contador {
  font-size: 0.85rem;
  color: var(--gris-escuro);
  flex-basis: 100%;
}

/* ---------- Táboa ---------- */
.taboa-wrap {
  padding: 0 2rem 3rem;
  overflow-x: auto;
}

.taboa {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--branco);
}

.taboa thead th {
  text-align: left;
  padding: 0.85rem 0.75rem;
  background: var(--negro);
  color: var(--branco);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.taboa thead th .seta {
  display: inline-block;
  margin-left: 0.25rem;
  opacity: 0.45;
  font-size: 0.7rem;
}
.taboa thead th.ordenado .seta { opacity: 1; }

.taboa tbody td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--gris-borde);
  vertical-align: top;
}

.taboa tbody tr:hover { background: var(--branco-suave); }

.taboa__centro {
  font-weight: 600;
  color: var(--negro);
}
.taboa__centro a { color: var(--negro); border-bottom: 2px solid var(--vermello); }
.taboa__centro a:hover { text-decoration: none; color: var(--vermello); }

.taboa__concello { color: var(--gris-escuro); font-size: 0.85rem; }

.etiqueta-categoria {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--branco);
  border-radius: 2px;
  white-space: nowrap;
}

.contador-cifra {
  font-weight: 700;
  color: var(--negro);
}
.contador-baixo { color: var(--gris-medio); font-weight: 500; }

/* Sen resultados */
.sen-resultados {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gris-escuro);
}

/* ---------- Footer ---------- */
.rodape {
  background: var(--negro);
  color: var(--gris-medio);
  padding: 2rem;
  font-size: 0.85rem;
  text-align: center;
  border-top: 4px solid var(--vermello);
}
.rodape strong { color: var(--branco); }
.rodape a { color: var(--branco); }

/* =========================================================
   Páxina de ficha do incumprimento
   ========================================================= */

.ficha {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem;
}

.ficha__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gris-escuro);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.ficha__volver:hover { color: var(--vermello); text-decoration: none; }

.ficha__cabeceiro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
  .ficha__cabeceiro { grid-template-columns: 1fr; }
}

.ficha__centro {
  font-family: var(--fonte-titular);
  font-size: 2rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}
.ficha__concello {
  font-size: 1rem;
  color: var(--gris-escuro);
  margin: 0 0 0.75rem;
}
.ficha__foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 2px;
}

.ficha__contadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.contador {
  background: var(--branco-suave);
  border: 1px solid var(--gris-borde);
  padding: 1rem;
  border-radius: 2px;
}
.contador__cifra {
  font-family: var(--fonte-titular);
  font-size: 1.7rem;
  color: var(--negro);
  line-height: 1;
}
.contador__etiqueta {
  font-size: 0.78rem;
  color: var(--gris-escuro);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contador--destacado .contador__cifra { color: var(--vermello); }

.ficha__seccion {
  margin: 2rem 0;
}
.ficha__seccion h2 {
  font-family: var(--fonte-titular);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--negro);
}

.verificacion {
  border-bottom: 1px solid var(--gris-borde);
  padding: 0.85rem 0;
}
.verificacion__cabeceira {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.verificacion__nome { font-weight: 600; }
.verificacion__tipo {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.verificacion__tipo--docente { background: var(--negro); color: var(--branco); }
.verificacion__tipo--comunidade { background: var(--gris-claro); color: var(--negro); }
.verificacion__data { font-size: 0.78rem; color: var(--gris-medio); margin-left: auto; }
.verificacion__comentario { color: var(--gris-escuro); margin: 0; font-size: 0.95rem; }

.ficha__accion {
  margin: 2rem 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Personalización dos popups Leaflet */
.leaflet-popup-content { margin: 0.75rem !important; }
.leaflet-popup-content-wrapper { border-radius: 2px !important; }

/* =========================================================
   Compoñentes compartidos: tarxeta de formulario, modal, alertas
   ========================================================= */

.tarxeta-form {
  max-width: 480px;
  margin: 2rem auto;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  padding: 2rem;
  border-radius: 2px;
  box-shadow: var(--sombra);
}
.tarxeta-form--ancha { max-width: 720px; }
.tarxeta-form h1 {
  font-family: var(--fonte-titular);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.tarxeta-form .sub {
  color: var(--gris-escuro);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}
.tarxeta-form .pestanas {
  display: flex;
  border-bottom: 2px solid var(--gris-borde);
  margin-bottom: 1.5rem;
}
.tarxeta-form .pestana {
  flex: 1;
  padding: 0.6rem;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--gris-escuro);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
}
.pestana.activa { color: var(--negro); border-bottom-color: var(--vermello); }

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.campo > label {
  font-size: 0.85rem;
  color: var(--gris-escuro);
  font-weight: 600;
}
.campo input,
.campo select,
.campo textarea {
  border: 1px solid var(--gris-borde);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--branco);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--vermello);
  outline-offset: 1px;
  border-color: var(--vermello);
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo .axuda {
  font-size: 0.78rem;
  color: var(--gris-escuro);
  margin-top: 0.15rem;
}

.alerta {
  padding: 0.7rem 0.9rem;
  border-radius: 2px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alerta--erro {
  background: #FFE8E9; color: #8B0E13; border-color: #F4B4B7;
}
.alerta--ok {
  background: #E5F7E9; color: #1F5F2A; border-color: #BFE7C8;
}
.alerta--info {
  background: #FFF8DC; color: #4A3700; border-color: #FFE08A;
}

/* Modal xenérico */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  z-index: 9000;
}
.modal[hidden] { display: none; }
.modal__caixa {
  background: var(--branco);
  max-width: 480px; width: 100%;
  padding: 1.75rem;
  border-radius: 2px;
}
.modal__titulo {
  font-family: var(--fonte-titular);
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}
.modal__sub {
  color: var(--gris-escuro);
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.modal__opcions {
  border: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.opcion {
  display: flex; gap: 0.6rem;
  background: var(--branco-suave);
  border: 1px solid var(--gris-borde);
  padding: 0.7rem 0.85rem;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.93rem;
}
.opcion input { margin-top: 0.25rem; }
.opcion:has(input:checked) {
  border-color: var(--vermello);
  background: #FFF6F6;
}
.modal__label {
  display: flex; flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem; color: var(--gris-escuro); font-weight: 600;
  margin-bottom: 1rem;
}
.modal__label textarea {
  border: 1px solid var(--gris-borde);
  border-radius: 2px; padding: 0.6rem;
  font-family: inherit; font-size: 0.95rem;
  resize: vertical;
}
.modal__accions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
}

.boton--ghost-escuro {
  background: transparent;
  border: 1px solid var(--gris-borde);
  color: var(--gris-escuro);
  padding: 0.65rem 1.1rem;
  border-radius: 2px;
  font-weight: 600;
}
.boton--ghost-escuro:hover { background: var(--gris-claro); }
.boton[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Páxinas de listado tipo perfil/admin */
.contedor-paxina {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem;
}
.contedor-paxina h1 {
  font-family: var(--fonte-titular);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.7rem;
  margin: 0 0 1rem;
}
.contedor-paxina h2 {
  font-family: var(--fonte-titular);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--negro);
}

.miña-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gris-borde);
  gap: 1rem;
}
.miña-fila__info { flex: 1; }
.miña-fila__info strong { display: block; }
.miña-fila__info small { color: var(--gris-escuro); }
.miña-fila__accions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Paxinación dinámica da táboa principal */
.paxinacion {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.5rem;
}
.paxinacion__btn {
  min-width: 2.25rem;
  padding: 0.45rem 0.65rem;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  color: var(--negro);
  font-family: inherit;
  font-size: 0.92rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.paxinacion__btn:hover:not(:disabled) {
  background: var(--gris-claro);
  border-color: var(--negro);
}
.paxinacion__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.paxinacion__btn--actual {
  background: var(--negro);
  color: var(--branco);
  border-color: var(--negro);
  font-weight: 700;
}
.paxinacion__btn--actual:hover:not(:disabled) {
  background: var(--negro);
  color: var(--branco);
}
.paxinacion__elipse {
  padding: 0 0.25rem;
  color: var(--gris-medio);
}

/* Metodoloxía: páxina narrow para boa lexibilidade */
.contedor-paxina--narrow { max-width: 760px; }
.metodoloxia__seccion {
  margin: 1.5rem 0;
}
.metodoloxia__seccion h2 {
  font-family: var(--fonte-titular);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--negro);
  padding-bottom: 0.35rem;
  margin: 1.5rem 0 0.6rem;
}
.lead { font-size: 1.05rem; color: var(--gris-escuro); }

/* SSO Google + aviso conta @edu.xunta.gal */
.zona-google {
  margin-bottom: 1rem;
}
.aviso-xunta {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  background: #FFF7CC;
  border-left: 4px solid #E0C53D;
  border-radius: 2px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--negro);
}
.aviso-xunta strong { display: block; margin-bottom: 0.15rem; }
.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  border-radius: 2px;
  color: var(--negro);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.boton-google:hover {
  background: var(--gris-claro);
  border-color: var(--negro);
}
.boton-google__logo {
  display: inline-flex;
  align-items: center;
}
.separador-ou {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.85rem 0 0.35rem;
  color: var(--gris-medio);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.separador-ou::before,
.separador-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-borde);
}

/* Check obrigatorio "Lin a metodoloxía" */
.check-metodoloxia {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--gris-escuro);
  cursor: pointer;
  line-height: 1.35;
}
.check-metodoloxia input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.check-metodoloxia a { color: var(--vermello); }

/* Honeypot antispam: invisible para humanos, atráe bots */
.honey {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Avatar nas verificacions publicas */
.verificacion__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gris-borde);
  flex-shrink: 0;
}
.verificacion__cabeceira {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Badge para estados non-publicado nas listaxes */
.badge-estado {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gris-claro);
  color: var(--gris-escuro);
  border-radius: 2px;
}

/* Barra de moderación nas fichas */
.barra-moderacion {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.25rem;
  padding: 0.65rem 0.9rem;
  background: #FFF7CC;
  border: 1px solid #E0C53D;
  border-radius: 2px;
}
.barra-moderacion__etiqueta {
  font-family: var(--fonte-titular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--negro);
}
.barra-moderacion__estado {
  font-size: 0.85rem;
  color: var(--gris-escuro);
}
.barra-moderacion__accions {
  margin-left: auto;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .barra-moderacion__accions { margin-left: 0; width: 100%; }
}

.foto-preview {
  width: 100%; max-width: 320px;
  height: 200px; object-fit: cover;
  border: 1px dashed var(--gris-borde);
  border-radius: 2px;
}
.foto-placeholder {
  width: 100%; max-width: 320px;
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris-medio);
  background: var(--gris-claro);
  border: 1px dashed var(--gris-borde);
  border-radius: 2px;
  font-size: 0.85rem;
  text-align: center;
}

/* Táboa admin */
.taboa-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-top: 0.5rem;
}
.taboa-admin th {
  background: var(--gris-claro);
  text-align: left;
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--gris-borde);
}
.taboa-admin td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--gris-borde);
  vertical-align: top;
}
.taboa-admin select, .taboa-admin input { padding: 0.3rem 0.45rem; font-size: 0.85rem; }

/* Suxestions de autocompletar */
.suxestions {
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  border-top: none;
  margin-top: -2px;
  border-radius: 0 0 2px 2px;
  max-height: 240px;
  overflow-y: auto;
}
.suxestion {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  background: var(--branco);
  border-bottom: 1px solid var(--gris-borde);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
}
.suxestion:hover { background: var(--branco-suave); }
.suxestion small { color: var(--gris-escuro); margin-left: 0.4rem; font-size: 0.85rem; }
.suxestion:last-child { border-bottom: none; }

/* =========================================================
   Responsividade movil
   ========================================================= */

@media (max-width: 720px) {
  .cabeceira {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  .cabeceira__marca { gap: 0.6rem; }
  .cabeceira__logo { height: 44px; }
  .cabeceira__titulo { font-size: 1.1rem; }
  .cabeceira__subtitulo { font-size: 0.78rem; }
  .cabeceira__accions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .boton {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }

  .banner-demo { font-size: 0.7rem; padding: 0.4rem 0.5rem; }
  .banner-demo__contido { padding: 0.2rem 0.6rem; }

  .controis {
    padding: 0.85rem 1rem;
    gap: 0.6rem;
  }
  .controis__buscador { flex: 1 1 100%; }
  .controis__select { flex: 1 1 100%; }
  .controis__pills { flex: 1 1 100%; }
  .controis__exportar {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .taboa-wrap { padding: 0 1rem 2rem; }
  .taboa { font-size: 0.82rem; min-width: 720px; }
  .taboa thead th { padding: 0.65rem 0.5rem; font-size: 0.7rem; }
  .taboa tbody td { padding: 0.6rem 0.5rem; }

  .rodape { padding: 1.25rem 1rem; font-size: 0.78rem; }

  /* Ficha */
  .ficha { padding: 1.25rem 1rem; }
  .ficha__centro { font-size: 1.5rem; }
  .ficha__contadores { grid-template-columns: 1fr; gap: 0.5rem; }
  .ficha__foto { height: 160px; }

  /* Formularios */
  .tarxeta-form { margin: 1rem; padding: 1.25rem; }
  .tarxeta-form--ancha { margin: 1rem; }
  /* Forzar que o grid centro+concello se apile */
  #form-engadir > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Modal */
  .modal { padding: 0.75rem; }
  .modal__caixa { padding: 1.25rem; }

  /* Páxina contenedor (perfil, admin) */
  .contedor-paxina { padding: 1.25rem 1rem; }
  .contedor-paxina h1 { font-size: 1.3rem; }

  /* Filas de perfil/admin: stack vertical */
  .miña-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .miña-fila__accions { width: 100%; }

  /* Pestañas no admin: scroll horizontal */
  .pestanas {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .pestana {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }

  /* Táboa admin: scroll horizontal */
  .taboa-admin { font-size: 0.82rem; min-width: 600px; }
  .taboa-admin th, .taboa-admin td { padding: 0.45rem 0.5rem; }
  section[data-painel] { overflow-x: auto; }

  /* Popup do mapa: máis estreito */
  .popup-incumprimento { width: 220px; }
  .popup-incumprimento__foto { height: 110px; }
}

@media (max-width: 480px) {
  .cabeceira__titulo { font-size: 1rem; }
  .cabeceira__subtitulo { display: none; }
  .cabeceira__logo { height: 38px; }
  .boton {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
  }

  #mapa { height: 320px; }

  .ficha__centro { font-size: 1.25rem; }
  .controis__pills { gap: 0.3rem; }
  .pill { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
}

/* Mellorar accesibilidade táctil: áreas de toque mínimas */
@media (hover: none) and (pointer: coarse) {
  .pill, .pestana, .boton, .seta, .miña-fila__accions button {
    min-height: 36px;
  }
}

/* Autocompletado inline tipo "ghost" */
.ac-wrap {
  position: relative;
}
.ac-wrap input {
  position: relative;
  background: transparent;
  width: 100%;
  z-index: 2;
  font-family: inherit;
}
.ac-ghost {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid transparent;
  color: var(--gris-medio);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  pointer-events: none;
  white-space: pre;
  overflow: hidden;
  z-index: 1;
}
.ac-info {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--gris-escuro);
  min-height: 1.1em;
}
.ac-info strong { color: var(--negro); }
.ac-info kbd {
  background: var(--gris-claro);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  font-size: 0.75rem;
  font-family: inherit;
  border: 1px solid var(--gris-borde);
}

/* Lista de coincidencias do typeahead */
.ac-lista {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.ac-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--branco);
  border: 1px solid var(--gris-borde);
  border-radius: 2px;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.ac-item:hover { background: var(--branco-suave); border-color: var(--gris-medio); }
.ac-item.activo {
  border-color: var(--vermello);
  background: #FFF6F6;
}
.ac-item strong { font-size: 0.92rem; font-weight: 600; }
.ac-item small { color: var(--gris-escuro); font-size: 0.8rem; margin-top: 0.1rem; }
.ac-item mark { background: #FFE89A; color: var(--negro); padding: 0 1px; }
.ac-cod { margin-left: 0.4rem; color: var(--gris-medio); font-size: 0.78rem; }

/* Banda CTA principal sobre o mapa */
.cta-home {
  background: var(--negro);
  color: var(--branco);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 4px solid var(--vermello);
  flex-wrap: wrap;
}
.cta-home__textos h2 {
  font-family: var(--fonte-titular);
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cta-home__textos p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gris-medio);
}
.cta-home__botons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.boton--xl {
  padding: 0.85rem 1.5rem;
  font-size: 1.02rem;
}
@media (max-width: 720px) {
  .cta-home { padding: 1.1rem 1rem; }
  .cta-home__textos h2 { font-size: 1.1rem; }
  .cta-home__botons { width: 100%; }
  .boton--xl { flex: 1; justify-content: center; padding: 0.75rem 1rem; font-size: 0.95rem; }
}

/* Modal de "comprobar email" tras enviar magic link */
.email-sent {
  text-align: center;
  padding: 2rem 1rem;
}
.email-sent__icona {
  font-size: 3rem;
  margin-bottom: 0.6rem;
}
.email-sent h2 {
  font-family: var(--fonte-titular);
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.email-sent p { color: var(--gris-escuro); margin: 0.4rem 0; }
.email-sent strong { color: var(--negro); }

/* Buscador de incumprimentos para verificar (modal) */
.verifica-buscador {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Cabeceira: botoes mais discretos e quitar liña vermella se hai banda CTA */
.cabeceira__accions .boton {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.cabeceira__accions .enlace-texto {
  color: var(--branco);
  padding: 0.35rem 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.cabeceira__accions .enlace-texto:hover {
  border-bottom-color: var(--branco);
  text-decoration: none;
}
/* Continuidade visual: se hai banda CTA debaixo, a cabeceira non leva a liña vermella */
body:has(.cta-home) header.cabeceira {
  border-bottom: none;
}

/* Cabeceira nova: claim nunha soa liña, sen h1 grande */
.cabeceira__claim {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gris-medio);
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .cabeceira__claim { font-size: 0.78rem; }
  .cabeceira__logo { height: 40px; }
}

/* Titular do CTA: o unico h1 visual da home */
.cta-home__titulo {
  font-family: var(--fonte-titular);
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.3rem;
  line-height: 1.05;
  color: var(--branco);
}
@media (max-width: 720px) {
  .cta-home__titulo { font-size: 1.15rem; }
}

/* =========================================================
   Cabeceira unificada da home (logo + CTA + lateral)
   ========================================================= */
.cabeceira-home {
  background: var(--negro);
  color: var(--branco);
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2rem;
  align-items: center;
  border-bottom: 4px solid var(--vermello);
}
.cabeceira-home__logo {
  height: 110px;
  width: auto;
  flex-shrink: 0;
}
.cabeceira-home__cta {
  align-self: center;
}
.cabeceira-home__cta h1 {
  font-family: var(--fonte-titular);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 0.35rem;
  color: var(--branco);
}
.cabeceira-home__cta .descricion {
  margin: 0 0 0.85rem;
  color: var(--gris-medio);
  font-size: 0.92rem;
  max-width: 540px;
}
.cabeceira-home__botons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cabeceira-home__lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.4rem;
  align-self: start;
}
.cabeceira-home__claim {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gris-medio);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .cabeceira-home {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo lateral"
      "cta cta";
  }
  .cabeceira-home__logo { grid-area: logo; height: 70px; }
  .cabeceira-home__lateral { grid-area: lateral; }
  .cabeceira-home__cta { grid-area: cta; }
}
@media (max-width: 480px) {
  .cabeceira-home { padding: 1rem; gap: 0.85rem; }
  .cabeceira-home__logo { height: 50px; }
  .cabeceira-home__cta h1 {
    font-size: 1.15rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cabeceira-home__claim {
    font-size: 0.78rem;
    white-space: normal;   /* permite romper en varias liñas no movil */
  }
  .cabeceira-home__botons .boton--xl {
    flex: 1 1 100%;
    justify-content: center;
    padding: 0.7rem 0.75rem;
    font-size: 0.9rem;
    min-width: 0;
  }
}