/*
Archivo..: app/feria.css
Gestiona.: El aspecto común de las páginas de feria (feria.html y
           feria-programa.html), que comparten cabecera, tarjetas de acto,
           barra inferior y hoja de detalle.

Se sirve como estático desde /app/feria.css: el vhost atiende los .css por
extensión sin pasar por el router, así que esta URL sí puede llevar extensión
—al revés que /w/<ruta>/sw, que tiene que ir sin ella para llegar a w.php.

Los colores de marca los pisa feria.js con los de la web (window.WEB), así que
lo de aquí son sólo los valores por defecto: los de la Feria de Motril.
*/

:root{
  --noche:#101522; --noche-2:#171d2e; --noche-3:#222a40;
  --yeso:#F2EAD9; --yeso-dim:#9aa3b8;
  --marca:#123C7A; --acento:#E8B03A;
  --borde:rgba(255,255,255,.10);
  --radio:14px;
  /* Alto real de la barra inferior, para que el contenido no acabe debajo. */
  --tabbar:calc(56px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--noche);color:var(--yeso);
  font-family:'Karla',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:var(--tabbar);
  overscroll-behavior-y:none;
}
a{color:var(--acento)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:640;line-height:1.15}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.env{max-width:760px;margin:0 auto;padding:0 1rem}

/* ── Cabecera con cartel ──────────────────────────────────────────────────
   El cartel manda: se pinta a tamaño y además difuminado por detrás, que es lo
   que da color a la pantalla sin tener que elegir un degradado a mano. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--borde)}
.hero .velo{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(30px) saturate(150%);opacity:.30;transform:scale(1.25)}
.hero .velo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,21,34,.35),var(--noche))}
.hero-in{position:relative;max-width:760px;margin:0 auto;padding:.6rem 1rem 1.25rem}

.hero-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.marca{flex:1;min-width:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yeso-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid var(--borde);display:grid;place-items:center;font-size:1.05rem}
.ico:active{background:rgba(255,255,255,.14)}

.hero-caja{display:flex;gap:1rem;align-items:flex-start}
.cartel{width:112px;flex:none;border-radius:.6rem;display:block;
  box-shadow:0 .7rem 1.8rem rgba(0,0,0,.6)}
.hero h1{font-size:1.5rem;margin:0 0 .15rem}
.sub{color:var(--yeso-dim);font-size:.9rem;line-height:1.35}
.fechas{font-weight:700;color:var(--acento);font-size:1rem;margin-top:.45rem}
.lugar{color:var(--yeso-dim);font-size:.82rem;margin-top:.25rem;line-height:1.35}

/* ── Cuenta atrás ───────────────────────────────────────────────────────── */
.cuenta{display:flex;gap:.4rem;margin-top:.9rem;flex-wrap:wrap}
.cuenta div{background:rgba(255,255,255,.07);border:1px solid var(--borde);
  border-radius:.55rem;padding:.35rem .55rem;min-width:3.2rem;text-align:center}
.cuenta b{display:block;font-size:1.15rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cuenta span{font-size:.6rem;color:var(--yeso-dim);text-transform:uppercase;letter-spacing:.05em}
.enmarcha{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  background:var(--acento);color:#20160a;font-weight:700;border-radius:2rem;
  padding:.3rem .85rem;font-size:.82rem}
.enmarcha::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#20160a;
  animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

/* ── Botones de acción ──────────────────────────────────────────────────── */
.acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .25rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  background:var(--noche-2);border:1px solid var(--borde);color:var(--yeso);
  border-radius:.6rem;padding:.55rem .85rem;font-size:.87rem;line-height:1.2}
.btn:active{background:var(--noche-3)}
.btn.pri{background:var(--acento);color:#20160a;border-color:transparent;font-weight:700}

/* ── Secciones ──────────────────────────────────────────────────────────── */
section{margin-top:1.8rem}
.tit{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.tit h2{font-size:1.1rem;flex:1}
.tit a{font-size:.8rem;text-decoration:none;white-space:nowrap}
.epigrafe{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);margin-bottom:.35rem;font-weight:700}

/* ── Tarjeta de acto ────────────────────────────────────────────────────── */
.acto{display:flex;gap:.85rem;width:100%;text-align:left;
  padding:.8rem 0;border-bottom:1px solid var(--borde)}
.acto:active{background:rgba(255,255,255,.03)}
.hora{flex:none;width:3.6rem;padding-top:.1rem}
.hora b{display:block;font-weight:700;color:var(--acento);font-size:.98rem;
  font-variant-numeric:tabular-nums;line-height:1.2}
.hora small{display:block;font-size:.62rem;color:var(--yeso-dim);line-height:1.3;margin-top:.1rem}
.acto-cuerpo{flex:1;min-width:0}
.acto h3{font-size:.99rem;font-weight:600;font-family:inherit;line-height:1.3}
.acto p{margin-top:.25rem;font-size:.84rem;color:var(--yeso-dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}
.tag{font-size:.67rem;background:rgba(255,255,255,.07);border:1px solid var(--borde);
  border-radius:1rem;padding:.12rem .5rem;color:var(--yeso-dim);white-space:nowrap}
.tag.sitio{color:var(--yeso)}
.tag.ahora{background:var(--acento);color:#20160a;border-color:transparent;font-weight:700}
.fav{flex:none;align-self:flex-start;width:2rem;height:2rem;font-size:1rem;
  display:grid;place-items:center;border-radius:50%;color:var(--yeso-dim);opacity:.55}
.fav[aria-pressed="true"]{color:var(--acento);opacity:1}

.vacio{color:var(--yeso-dim);padding:2rem 0;text-align:center;font-size:.9rem;line-height:1.5}

/* ── Programa: días y filtros, pegados arriba al hacer scroll ───────────── */
.barra{position:sticky;top:0;z-index:5;background:var(--noche);
  border-bottom:1px solid var(--borde);padding-top:.5rem}
.barra-in{max-width:760px;margin:0 auto;padding:0 1rem .55rem}
.tira{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding-bottom:.15rem;-webkit-overflow-scrolling:touch}
.tira::-webkit-scrollbar{display:none}
.dia{flex:none;background:var(--noche-2);border:1px solid var(--borde);
  border-radius:.6rem;padding:.35rem .6rem;text-align:center;line-height:1.25;min-width:3.1rem}
.dia small{display:block;font-size:.62rem;color:var(--yeso-dim);text-transform:uppercase}
.dia b{display:block;font-size:1.05rem}
.dia[aria-pressed="true"]{background:var(--acento);color:#20160a;border-color:transparent}
.dia[aria-pressed="true"] small{color:#4a3a12}
.dia[data-hoy="1"]:not([aria-pressed="true"]){border-color:var(--acento)}

.chip{flex:none;background:var(--noche-2);border:1px solid var(--borde);
  border-radius:2rem;padding:.28rem .7rem;font-size:.78rem;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--acento);color:#20160a;border-color:transparent;font-weight:700}
.chip .n{opacity:.6;font-size:.7rem;margin-left:.2rem}

.buscador{width:100%;background:var(--noche-2);color:var(--yeso);
  border:1px solid var(--borde);border-radius:.6rem;padding:.5rem .75rem;font-size:.88rem}
.buscador::placeholder{color:var(--yeso-dim)}
.resumen{font-size:.76rem;color:var(--yeso-dim);padding:.7rem 0 .1rem}

/* ── Barra inferior ─────────────────────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;background:rgba(16,21,34,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--borde);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.45rem 0 .4rem;text-decoration:none;color:var(--yeso-dim);font-size:.63rem}
.tabbar a i{font-style:normal;font-size:1.2rem;line-height:1.25}
.tabbar a[aria-current="page"]{color:var(--acento)}

/* ── Hoja de detalle ────────────────────────────────────────────────────── */
.hoja{position:fixed;inset:0;z-index:30;display:none}
.hoja.abierta{display:block}
.hoja .fondo{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.hoja .caja{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;
  background:var(--noche-2);border-radius:1rem 1rem 0 0;border-top:1px solid var(--borde);
  padding:.6rem 1.15rem calc(1.6rem + env(safe-area-inset-bottom));
  max-width:760px;margin:0 auto;animation:sube .22s ease-out}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
.hoja .asa{width:2.4rem;height:.25rem;border-radius:1rem;background:var(--noche-3);
  margin:.15rem auto 1rem}
.hoja h2{font-size:1.2rem;margin-bottom:.35rem}
.hoja .cuando{color:var(--acento);font-weight:700;font-size:.92rem}
.hoja .texto{margin-top:.9rem;font-size:.9rem;line-height:1.6;color:var(--yeso);
  white-space:pre-line}
.hoja .acciones{margin-top:1.2rem}

/* ── Distintivo de gestor ───────────────────────────────────────────────── */
.gestor{display:inline-flex;align-items:center;gap:.3rem;font-size:.67rem;
  border:1px dashed var(--acento);color:var(--acento);border-radius:1rem;
  padding:.1rem .5rem;text-decoration:none}

@media (min-width:640px){
  .cartel{width:150px}
  .hero h1{font-size:1.8rem}
}