/* ──────────────────────────────────────────────────────────────────────
   Cementerio Parroquial · misma estética que la web de la parroquia
   (parroquiasingla.org): azul mariano, blanco, gris azulado y dorado;
   Poppins para títulos, Open Sans para el texto y una serif en cursiva.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --terracota: #1f4f96;
  --terracota-hondo: #163a72;
  --terracota-texto: #1f4f96;
  --terracota-suave: #e3ebf7;
  --dorado: #957e59;
  --crema: #edf1f7;
  --blanco: #ffffff;
  --tinta: #1f2a3a;
  --tinta-suave: #5a6577;
  --linea: #d6dde8;
  --pie-fondo: #8a97b8;
  --pie-texto: #141b26;
  --sombra: 0 1px 2px rgba(31, 42, 58, .05), 0 12px 30px rgba(31, 42, 58, .08);
  --radio: 20px;
  --titulo: "Poppins", "Segoe UI", sans-serif;
  --texto: "Open Sans", -apple-system, "Segoe UI", sans-serif;
  --serif: "EB Garamond", Georgia, serif;
  --ancho: 1160px;
  --alerta: #b3261e;
  --alerta-fondo: #fdecea;
  --privado: #edf2fa;
  --privado-texto: #1f3a66;
  /* nombres antiguos, por si alguna plantilla los usa */
  --rojo: var(--terracota); --fondo: var(--crema); --superficie: var(--blanco); --texto-color: var(--tinta);
  --tenue: var(--tinta-suave); --borde: var(--linea); --acento: var(--terracota); --acento-texto: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --terracota-texto: #8fb3ec; --terracota-suave: #1b2638;
    --crema: #111720; --blanco: #1b2431; --tinta: #edf1f7; --tinta-suave: #a6b1c3;
    --linea: #2b3546; --pie-fondo: #18202c; --pie-texto: #edf1f7; --dorado: #b39a6f;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
    --alerta: #f2a49c; --alerta-fondo: #3a1d1a; --privado: #1b2638; --privado-texto: #c7d7f0;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--crema); color: var(--tinta); font-family: var(--texto); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: var(--terracota-texto); text-decoration: none; }
a:hover { color: var(--terracota-hondo); }
h1, h2, h3, h4 { font-family: var(--titulo); line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .9rem; text-transform: uppercase; letter-spacing: .02em; color: var(--terracota-texto); }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 1em; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.antetitulo { font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dorado); font-weight: 700; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 10px; }
.antetitulo::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.emblema-claro { display: none !important; }
@media (prefers-color-scheme: dark) { .emblema-oscuro { display: none !important; } .emblema-claro { display: block !important; } }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 1000; backdrop-filter: saturate(1.3) blur(14px);
  background: color-mix(in srgb, var(--crema) 88%, transparent); border-bottom: 3px solid var(--dorado);
}
.barra .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 78px; gap: 10px 20px; padding-top: 8px; padding-bottom: 8px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca img { display: block; height: 52px; width: auto; }
.marca span { display: flex; flex-direction: column; line-height: 1.12; }
.marca strong { font-family: var(--titulo); font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
.marca small { font-family: var(--titulo); font-size: .82rem; font-weight: 400; color: var(--tinta-suave); margin-top: 2px; }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.barra nav a, .barra .enlace {
  color: var(--tinta); font-family: var(--texto); font-size: .93rem; font-weight: 600; padding: 8px 14px;
  border-radius: 999px; transition: background .15s, color .15s;
}
.barra nav a:hover, .barra nav a[aria-current="page"], .barra .enlace:hover { background: var(--terracota-suave); color: var(--terracota-texto); }
.barra nav a.acceso { background: var(--terracota); color: #fff; margin-left: 8px; }
.barra nav a.acceso:hover { background: var(--terracota-hondo); color: #fff; }

.en-linea { display: inline; margin: 0; }
.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.aviso-ejemplo { background: var(--alerta-fondo); color: var(--alerta); padding: .5rem 24px; font-size: .9rem; text-align: center; border-bottom: 1px solid var(--linea); }
.aviso-privado { background: var(--privado); color: var(--privado-texto); padding: .5rem 24px; font-size: .9rem; text-align: center; border-bottom: 1px solid var(--linea); }

/* ── Cabecera de página (como las páginas interiores de la parroquia) ── */
.titular { padding: 56px 0 40px; border-bottom: 3px solid var(--dorado); background: radial-gradient(800px 260px at 90% 0%, rgba(149, 126, 89, .18), transparent 60%); }
.titular h1 { color: var(--tinta); }
.titular p { font-size: 1.08rem; color: var(--tinta-suave); max-width: 640px; margin: 0; }
.titular .buscador { max-width: 680px; margin: 26px 0 0; }

/* ── Contenido ───────────────────────────────────────────────────────── */
.contenido { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 40px 24px 80px; }
.ayuda, .tenue { color: var(--tinta-suave); }
.tenue { font-size: .92rem; }

/* Buscador */
.buscador { display: flex; gap: 10px; margin: 1rem 0 1.5rem; }
.buscador input { flex: 1; min-width: 0; }
input[type=search], input[type=text], input[type=password] {
  font: inherit; padding: 13px 18px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco);
  color: var(--tinta); width: 100%;
}
input:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 4px rgba(31, 79, 150, .12); }
button, .boton {
  font-family: var(--titulo); font-weight: 600; font-size: .93rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; border: 2px solid var(--terracota); background: var(--terracota); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: all .18s;
}
button:hover, .boton:hover { background: var(--terracota-hondo); border-color: var(--terracota-hondo); color: #fff; }
.buscador button { box-shadow: 0 8px 22px rgba(31, 79, 150, .22); padding: 13px 28px; }
.boton.secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton.secundario:hover { background: var(--terracota-suave); border-color: var(--terracota); color: var(--terracota-texto); }
.barra button.enlace { border: 0; background: none; box-shadow: none; }

.resultados { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.resultados li {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 16px 22px;
  transition: border-color .18s;
}
.resultados li:hover { border-color: var(--dorado); }
.resultados strong { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.3rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.etiqueta {
  display: inline-block; font-size: .76rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px;
  background: var(--crema); border: 1px solid var(--linea); color: var(--tinta-suave); vertical-align: middle;
}
.estado-libre { background: #e3f1e4; color: #1b5e20; border-color: transparent; }
.estado-ocupada { background: #e5e8f6; color: #283593; border-color: transparent; }
.estado-reservada { background: #fdeedd; color: #a64b00; border-color: transparent; }
.estado-clausurada { background: #eee; color: #424242; border-color: transparent; }
.alerta { color: var(--alerta); background: var(--alerta-fondo); padding: .45rem .75rem; border-radius: 10px; font-weight: 600; }

.mensaje, .exito { background: #e8f3ea; color: #1b5e20; padding: .6rem .9rem; border-radius: 12px; }
@media (prefers-color-scheme: dark) { .mensaje, .exito { background: #1d2e20; color: #b9e3bf; } }
.exito { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.plantillas { list-style: none; padding: 0; margin: 0 0 .75rem; }
.plantillas li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.plantillas form { margin: 0; }

/* ── Mapa ────────────────────────────────────────────────────────────── */
.contenido-mapa { display: flex; flex-direction: column; height: 0; min-height: 420px; }
#mapa { flex: 1; min-height: 360px; background: #e9e5da; }
.leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; padding: .7rem 24px; font-size: .9rem; background: var(--blanco); border-top: 3px solid var(--dorado); }
.punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; border: 1px solid #1b1b1b; }
.punto.libre { background: #4caf50; } .punto.ocupada { background: #42a5f5; }
.punto.reservada { background: #ff9800; } .punto.clausurada { background: #bdbdbd; }
.punto.publico { background: #ffca28; }
.popup { font-family: var(--texto); }
.popup img { display: block; width: 100%; border-radius: 8px; margin: .5rem 0; }
.popup ul { margin: .4rem 0; padding-left: 1.1rem; }
.popup p { margin: .4rem 0; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-container a { color: var(--terracota); }

/* ── Ficha ───────────────────────────────────────────────────────────── */
.cabecera-ficha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 3px solid var(--dorado); }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--sombra); }
.tarjeta.privado { background: var(--privado); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0 0 .75rem; }
.datos dt { color: var(--tinta-suave); font-size: .92rem; }
.datos dd { margin: 0; }
.concesion { border-top: 1px solid var(--linea); padding-top: .9rem; margin-top: .9rem; }
.concesion:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.concesion:not(.vigente) { opacity: .75; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { color: var(--tinta-suave); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.pendiente td { background: var(--alerta-fondo); }

.documentos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.documentos a { display: block; text-decoration: none; }
.documentos img, .icono-doc {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--crema); color: var(--tinta-suave); font-weight: 700; margin-bottom: .3rem;
}

/* ── Acceso ──────────────────────────────────────────────────────────── */
.caja-acceso { max-width: 420px; margin: 2rem auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 32px; box-shadow: var(--sombra); }
.caja-acceso img { display: block; height: 96px; margin: 0 auto 1rem; }
.caja-acceso h1 { text-align: center; font-size: 1.8rem; }
.caja-acceso label { display: block; margin-bottom: 1rem; font-weight: 700; font-size: .88rem; }
.caja-acceso input { margin-top: .35rem; font-weight: 400; font-size: 1rem; }
.caja-acceso button { width: 100%; margin-top: .4rem; padding: 13px; }

/* ── Pie (igual que la web de la parroquia) ──────────────────────────── */
.pie { background: var(--pie-fondo); color: var(--pie-texto); padding: 52px 0 24px; border-top: 3px solid var(--dorado); }
.pie a { color: var(--pie-texto); }
.pie a:hover { color: var(--pie-texto); text-decoration: underline; text-underline-offset: 4px; }
.pie .columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pie .marca strong, .pie .marca small { color: var(--pie-texto); }
.pie .marca { margin-bottom: 14px; }
.pie .marca img { height: 46px; }
.pie address { font-style: normal; font-size: .94rem; line-height: 1.6; }
.pie h4 { font-size: 1rem; font-weight: 700; margin: 0 0 14px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .94rem; }
.pie .legal { border-top: 1px solid rgba(20, 27, 38, .25); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; font-size: .84rem; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .pie .legal { border-top-color: rgba(239, 234, 227, .15); } }

@media (max-width: 720px) {
  .contenedor { padding: 0 16px; }
  .contenido { padding: 28px 16px 60px; }
  .barra .contenedor { min-height: 64px; }
  .marca strong { font-size: 1.02rem; }
  .marca img { height: 42px; }
  .barra nav a, .barra .enlace { padding: 6px 10px; font-size: .88rem; }
  .barra nav a.acceso { margin-left: 0; }
  .titular { padding: 36px 0 28px; }
  .buscador { flex-direction: column; }
  .pie .columnas { grid-template-columns: 1fr; gap: 26px; }
  .datos { grid-template-columns: 1fr; }
  .datos dd { margin-bottom: .4rem; }
  .tarjeta { padding: 18px; }
}

/* Accesos de la portada del buscador */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.acceso-tarjeta {
  padding: 26px 24px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea);
  color: var(--tinta); display: flex; flex-direction: column; gap: 8px; transition: border-color .18s, background .18s;
}
.acceso-tarjeta:hover { border-color: var(--terracota); background: var(--terracota-suave); color: var(--tinta); }
.acceso-tarjeta svg { width: 30px; height: 30px; color: var(--terracota-texto); }
.acceso-tarjeta h3, .acceso-tarjeta p { margin: 0; }

/* ── Consultas ───────────────────────────────────────────────────────── */
.consultas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.formulario .ancho { grid-column: 1 / -1; }
.campo label { display: block; font-family: var(--titulo); font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.campo label span[aria-hidden] { color: var(--terracota-texto); }
.formulario input[type=email], .formulario input[type=tel], .formulario select, .formulario textarea {
  font: inherit; padding: 13px 18px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco);
  color: var(--tinta); width: 100%;
}
.formulario input[type=text] { border-radius: 14px; }
.formulario textarea { resize: vertical; min-height: 140px; }
.formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 4px rgba(31, 79, 150, .12); }
.campo .error { display: block; color: var(--alerta); margin-top: 4px; font-weight: 600; }
.con-error input, .con-error select, .con-error textarea { border-color: var(--alerta); }
.casilla label { display: flex; gap: 10px; align-items: flex-start; font-family: var(--texto); font-weight: 400; font-size: .92rem; }
.casilla input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--terracota); flex: none; }
.formulario .ancho:last-child { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lateral ul { padding-left: 1.1rem; margin: 0 0 1.2rem; display: grid; gap: 8px; }
.enviada { max-width: 640px; text-align: center; margin: 0 auto; }
.enviada .referencia { font-family: var(--titulo); font-size: 2rem; font-weight: 700; color: var(--terracota-texto); letter-spacing: .04em; }
.enviada .acciones { justify-content: center; }
.texto-legal { max-width: 820px; }
.texto-legal h2 { margin-top: 1.4rem; }
.texto-legal h2:first-child { margin-top: 0; }
@media (max-width: 800px) {
  .consultas, .formulario { grid-template-columns: 1fr; }
}
.barra nav a.aviso-consultas { background: var(--privado); color: var(--privado-texto); font-weight: 600; }

/* Rótulos del mapa: recintos (Cementerio viejo / nuevo) y calles */
.rotulo { pointer-events: none; }
.rotulo span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--titulo);
  color: #fff; text-shadow: 0 0 3px #000, 0 0 8px rgba(0,0,0,.85); }
.rotulo-recinto span { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rotulo-calle span { font-size: 13px; font-weight: 600; }