/*
  deLiébana — site.css (UNIFICADO)
  Paleta orgánica + Layout + Componentes + Utilidades
  - Carga recomendada: tokens.css -> site.css -> (opcionales) news.css
*/

/* =========================================================
   0) ROOT TOKENS / MAPEOS (con fallbacks si falta tokens.css)
   ========================================================= */
:root{
  /* ---- Paleta orgánica (mapea a tokens.css si existe) ---- */
  --dl-brown:       var(--color-brown,       #8B4E34);
  --dl-brown-700:   var(--color-brown-700,   #6B3924);
  --dl-terracotta:  var(--color-terracotta,  #A47864);
  --dl-cta:         var(--color-cta,         #C75B35);
  --dl-mustard:     var(--color-mustard,     #DFAE5A);
  --dl-orange:      var(--color-orange,      #EB6A45);
  --dl-purple:      var(--color-purple,      #934A7A);
  --dl-cream:       var(--color-cream,       #F6EFE8);
  --dl-cream-soft:  var(--color-cream-soft,  #FCF7F0);
  --dl-surface:     var(--color-surface,     #FFFDF9);
  --dl-ink:         var(--color-ink,         #2A1D16);
  --dl-ink-2:       var(--color-ink-2,       #5B4B40);

  --border-soft:    var(--border-soft, #e8e1d8);

  /* Tipografías (tokens o fallbacks) */
  --font-sans:  var(--font-sans,  Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  --font-serif: var(--font-serif, 'Lora', 'Cormorant Garamond', Georgia, serif);

  /* Radio + sombras */
  --radius:    var(--radius, 14px);
  --shadow-sm: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06));
  --shadow-md: var(--shadow-md, 0 6px 18px rgba(0,0,0,.08));
  --shadow-lg: var(--shadow-lg, 0 12px 30px rgba(0,0,0,.12));

  /* Espacios base */
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Varios */
  --link: var(--dl-brown-700);
  --transition: all .25s ease;
}

/* =========================================================
   1) RESET / BASE
   ========================================================= */
html { box-sizing: border-box; scroll-behavior:smooth; }
*, *::before, *::after { box-sizing: inherit; }
body{
  margin:0; background: var(--dl-cream);
  color: var(--dl-ink);
  font-family: var(--font-sans);
  font-size: 16px; line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family: var(--font-serif);
  color: var(--dl-ink);
  margin: 0 0 var(--space-3);
}
h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); line-height:1.1; }
h2{ font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
h3{ font-size: clamp(1.25rem, 3vw, 1.5rem); }

.wrap,.container{ max-width:1100px; margin:0 auto; padding:0 var(--space-4); }
.section{ padding: clamp(1.5rem, 4vw, 3rem) 0; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; }

/* =========================================================
   2) ACCESIBILIDAD
   ========================================================= */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:10000}

/* =========================================================
   3) HEADER + NAV (incluye estado .scrolled)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: var(--dl-cream-soft);
  color: var(--dl-ink);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: var(--transition);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 1rem; transition: padding .2s ease;
}
.logo img{ display:block; height:34px; width:auto; transition: height .2s ease; }

/* Estado compacto al hacer scroll */
.site-header.scrolled{
  background: var(--dl-cream);
  border-bottom-color: rgba(0,0,0,.10);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.site-header.scrolled .wrap{ padding:.45rem 1rem; }
.site-header.scrolled .logo img{ height:30px; }

/* Toggle móvil */
.nav-toggle{
  display:none; background:none; border:0; width:44px; height:44px; border-radius:.5rem; cursor:pointer;
}
.nav-toggle .bar{ display:block; height:2px; margin:6px 8px; background: var(--dl-ink); border-radius:2px; }

/* Nav desktop */
.site-nav ul{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; }
.site-nav a{
  display:block; color: var(--dl-ink); font-weight:800; letter-spacing:.15px;
  padding:.55rem .85rem; border-radius:.6rem;
  transition: background .15s ease, color .15s ease;
}
.site-nav a:hover{ background: var(--dl-cream); text-decoration:none; color: var(--dl-brown-700); }
.site-nav a.is-active,.site-nav a.active{ background:#FFF; color: var(--dl-ink); box-shadow: var(--shadow-sm); }

/* CTA Publicar con animación sutil */
.site-nav .btn-publish{
  background: var(--dl-cta); color:#FFF; font-weight:900;
  border-radius:.6rem; box-shadow: var(--shadow-sm);
}
.site-nav .btn-publish:hover{ filter:brightness(1.05); color:#fff; }

/* Pulso sutil solo en >= 861px y respetando reduced-motion */
@keyframes dl-breathe { 0%{transform:translateY(0) scale(1); box-shadow:var(--shadow-sm)} 50%{transform:translateY(0) scale(1.03); box-shadow:0 8px 22px rgba(199,91,53,.25)} 100%{transform:translateY(0) scale(1); box-shadow:var(--shadow-sm)} }
@media (min-width: 861px){
  .site-nav .btn-publish{ animation: dl-breathe 2.8s ease-in-out infinite; }
  .site-nav .btn-publish:hover,.site-nav .btn-publish:focus{ animation:none; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce){ .site-nav .btn-publish{ animation:none!important } }

/* Nav móvil */
@media (max-width: 860px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed; left:0; right:0; top:64px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease;
    background: var(--dl-cream-soft); border-top:1px solid var(--border-soft); box-shadow: var(--shadow-md);
  }
  .site-nav.is-open{ opacity:1; pointer-events:auto; }
  .site-nav ul{ flex-direction:column; padding:.5rem .75rem; gap:.25rem }
  .site-nav li a{ display:block; padding:.7rem .9rem; border-radius:.7rem; }
  .site-nav li a:hover{ background: var(--dl-cream); color: var(--dl-brown-700); }
  .site-nav li a.is-active,.site-nav li a.active{ background:#FFF; color: var(--dl-ink); box-shadow: var(--shadow-sm); }
  body.nav-open{ overflow:hidden; }
}
.header-spacer{ height:0 }

/* =========================================================
   4) HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  background-image: var(--hero-img); /* definida en _inc/hero.php */
  background-size: cover; background-position: center;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(164,120,100,.38), rgba(164,120,100,.38));
  z-index:0;
}
.hero__inner{
  position:relative; z-index:1;
  min-height: 46vh;
  max-width:1100px; margin:0 auto; padding:clamp(1.6rem,4vw,3rem) 1rem;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero--sm .hero__inner{ min-height:26vh }
.hero__title{
  font-family: var(--font-serif); font-weight:700;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height:1.08;
  margin:0 0 .5rem; color:#F6EFE8; text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hero__sub{
  color:#F6EFE8; opacity:.98; font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  max-width: 65ch; margin:0 0 .75rem; text-shadow: 0 1px 5px rgba(0,0,0,.25);
}

/* =========================================================
   5) BOTONES / CHIPS / BADGES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:.8rem;
  background: var(--dl-brown-700); color:#fff; border:1px solid transparent;
  box-shadow: var(--shadow-sm); font-weight:700; transition: filter .15s ease, transform .06s ease;
}
.btn:hover{ filter:brightness(1.05); text-decoration:none; }
.btn:active{ transform: translateY(1px) }
.btn--accent{ background: var(--dl-mustard); color:#3A2C16; }
.btn.btn-ghost{ background: var(--dl-cream-soft); color: var(--dl-ink); border:1px solid var(--border-soft); }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:1.5rem; min-width:2.5rem; padding:0 .55rem;
  border-radius:999px; font-size:.8rem; font-weight:800;
  background:#fff; border:1px solid var(--border-soft); color: var(--dl-brown-700);
}
.chip{
  display:inline-block; font-size:.85rem; padding:.35rem .65rem;
  border-radius:999px; background:#fff; border:1px solid var(--border-soft); color: var(--dl-ink-2);
}
.pill{ border-radius:999px; padding:.2rem .55rem; }

/* =========================================================
   6) LAYOUTS / GRIDS / CARDS
   ========================================================= */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.tile{
  background: var(--dl-surface);
  border-radius: 18px; padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-md); border: 1px solid var(--border-soft);
  text-align:center;
}
.tile__icon{ font-size:2.2rem; margin-bottom:.5rem; display:inline-block; }
.tile--orange .tile__icon{ color: var(--dl-orange); }
.tile--purple .tile__icon{ color: var(--dl-purple); }
.tile h3{ font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.7rem); margin:.25rem 0 .35rem; }
.tile p{ margin:0; color: var(--dl-ink-2); }
@media (max-width: 900px){ .tiles{ grid-template-columns:1fr; } }

.card{
  background: var(--dl-surface);
  border:1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-media img{
  width:100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: #eef1f5 url("/assets/img/no-photo.webp") center/contain no-repeat;
}
.card-body{ padding: .95rem; display:grid; gap:.55rem }
.card-title{ margin:0; font-size:1.08rem; line-height:1.32 }
.card-text{ margin:0; color: var(--dl-ink-2) }

/* Grids reutilizables */
.grid-auto{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 900px){ .news-grid{ grid-template-columns:1fr } }

/* Noticias (cards rápidas) */
.news-card{ display:flex; flex-direction:column; gap:.5rem; }
.news-card__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; box-shadow: var(--shadow-sm); }
.news-card__body h3{ font-size:1.05rem; margin:.2rem 0; }
.news-card__body p{ margin:0 0 .25rem; color: var(--dl-ink-2); }

/* Empresas (1:1) */
.biz-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.biz-card{ background:#fff; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; box-shadow: var(--shadow-sm); }
.biz-card__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.biz-card__body{ padding:.85rem; }
.biz-card__body h3{ margin:.2rem 0; font-size:1.05rem; font-family:var(--font-serif); }
.biz-card__meta{ margin:0; color: var(--dl-ink-2); }
@media (max-width: 900px){ .biz-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .biz-grid{ grid-template-columns:1fr; } }

/* =========================================================
   7) BLOQUES ESPECÍFICOS (Teleprompter, Guardias, CTA)
   ========================================================= */
/* Teleprompter de avisos */
.dl-teleprompter {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1rem; display:flex; flex-direction:column;
}
.dl-teleprompter__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.dl-teleprompter__title { font-size:1.15rem; margin:0; }
.dl-teleprompter__tags { display:flex; gap:.4rem; }
.dl-teleprompter__tags span {
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
  background: var(--dl-cream-soft); border:1px solid var(--border-soft);
}
.dl-teleprompter__viewport {
  position:relative; height:52px; overflow:hidden;
  border:1px solid var(--border-soft); border-radius:10px;
  background: var(--dl-cream-soft); margin-top:.25rem;
}
.dl-teleprompter__item {
  position:absolute; inset:0; display:flex; align-items:center; gap:.6rem;
  padding:0 .65rem; text-decoration:none; color:inherit;
  transform:translateY(100%); opacity:0;
}
.dl-teleprompter__item .src {
  font-size:.7rem; text-transform:uppercase; background:#fff; padding:2px 6px;
  border:1px solid var(--border-soft); border-radius:6px;
}
.dl-teleprompter__item .msg { flex:1; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-teleprompter__item .when { font-size:.8rem; color: var(--dl-ink-2); }
.dl-teleprompter__item.is-skeleton{opacity:.6;transform:translateY(0)}
.dl-teleprompter__controls { display:flex; gap:6px; justify-content:flex-end; margin-top:.5rem; }
.dl-teleprompter__controls button {
  background:#fff; border:1px solid #d8cfc7; border-radius:8px; font-size:.8rem; padding:.35rem .6rem;
}
.dl-teleprompter__controls button:hover{background: var(--dl-cream-soft);}
.dl-teleprompter__item.is-in{animation:tp-in .3s ease forwards}
.dl-teleprompter__item.is-out{animation:tp-out .25s ease forwards}
@keyframes tp-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tp-out{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}

/* Farmacias de guardia */
.dl-guardias {
  background: var(--dl-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem; display:flex; flex-direction:column;
}
.dl-guardias__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.dl-guardias__title { font-size:1.15rem; margin:0; }
.dl-guardias__date { font-size:.9rem; color: var(--dl-ink-2); }
.dl-guardias__list { display:grid; gap:.75rem; }
.guardia-card {
  background:#fff; border-radius:12px; box-shadow: var(--shadow-sm);
  padding:.75rem 1rem; border:1px solid var(--border-soft);
}
.guardia-card h3 { font-size:1rem; margin:0 0 .35rem; }
.guardia-card .muted { color: var(--dl-ink-2); font-size:.9rem; margin:.25rem 0; }
.guardia-card .actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.item.skeleton { background: var(--dl-cream-soft); color: var(--dl-ink-2); padding:.6rem .8rem; border-radius:10px; }

/* CTA con fondo */
.home-cta{ position:relative; isolation:isolate; margin:2rem 0; }
.home-cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.78) saturate(1.02); }
.home-cta__inner{ position:relative; padding:3rem 0; }
.home-cta__content{ color:#fff; max-width:700px; }
.home-cta h2{ margin:0 0 .5rem; font-size:1.8rem; }

/* =========================================================
   8) FORMULARIOS / BUSCADOR
   ========================================================= */
.form-publish{
  display:grid; gap:1rem; max-width:700px; margin:0 auto;
  background:#FFFDF9; padding:2rem;
  border:1px solid var(--border-soft); border-radius:14px;
  box-shadow: var(--shadow-sm);
}
.form-publish label{ font-weight:700; display:block; margin-bottom:.3rem; }
.form-publish input[type="text"], .form-publish textarea, .form-publish select{
  width:100%; padding:.6rem .75rem; border:1px solid #d8cfc7; border-radius:8px;
  font-family:var(--font-sans); font-size:1rem;
}
.form-publish input[type="file"]{ margin-top:.3rem; }
.form-publish button{ justify-self:start; }

.search-card{
  background: var(--dl-surface);
  border:1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 1rem; margin: 1rem 0 2rem;
}
.search-card__form{ display:grid; gap:.75rem }
.search-card__filters{ margin:0; padding:0; border:0 }
.search-card__row{
  display:grid; grid-template-columns: auto 1fr auto; gap:.5rem; align-items:center;
}
.search-card__select{
  min-width: 11rem; padding:.75rem .9rem; border:1px solid #d8cfc7; border-radius:12px; background:#fff; font: inherit;
}
.search-card__row input[type="search"]{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid #d8cfc7; background:#fff; font: inherit;
}
.search-card__row .btn{ padding:.85rem 1rem }
@media (max-width:720px){
  .search-card__row{ grid-template-columns: 1fr; }
  .search-card__select,.search-card__row .btn{ width:100%; }
}

/* =========================================================
   9) AVISOS / CHIPS SUELTAS
   ========================================================= */
.home-alerts{
  background: var(--dl-cream-soft);
  padding:1rem 0; margin:2rem 0;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.alerts-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* =========================================================
   10) FOOTER
   ========================================================= */
.site-footer{
  background: var(--dl-brown); color:#F6EFE8; margin-top:3rem; border-top:4px solid var(--dl-terracotta);
}
.site-footer a{ color:#F6EFE8; }
.site-footer .wrap{ padding:2rem 1rem; }
.site-footer .grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.25rem; }
.site-footer h3,.site-footer h4{ color:#fff; margin-bottom:.5rem; font-family:var(--font-serif); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:.25rem 0; }
.site-footer .copy{ border-top:1px solid rgba(255,255,255,.25); padding:1rem; text-align:center; font-size:.9rem; color:#f3e9e1; }
@media (max-width: 860px){ .site-footer .grid{ grid-template-columns:1fr; } }

/* =========================================================
   11) UTILIDADES
   ========================================================= */
.muted{ color: var(--dl-ink-2) }
.center{ text-align:center }
.mt-0{ margin-top:0 } .mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:1rem }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:.25rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:1rem }
.pt-0{ padding-top:0 } .pb-0{ padding-bottom:0 }
.is-hidden{ display:none!important }
.is-disabled{ pointer-events:none; opacity:.6 }

/* Skeleton rápido */
.skeleton{
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200% 100%;
  animation: skel 1.2s ease-in-out infinite;
  border-radius: .6rem;
}
@keyframes skel{ 0%{background-position: 200% 0} 100%{background-position: -200% 0} }

/* Helpers de animación */
.fade-in{ animation: fadeIn .24s ease both; }
.slide-up{ animation: slideUp .28s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }

/* === Icono de usuario sutil (silueta sin fondo) === */
.nav-auth {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.nav-auth__icon,
.nav-auth__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  text-decoration: none;
  color: var(--text-color, #2a1f1a);
  opacity: .85;
  transition: opacity .2s ease;
}

.nav-auth__icon:hover,
.nav-auth__logout:hover {
  opacity: 1;
}

.nav-auth__icon .icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  filter: brightness(0.2);
}

/* En modo oscuro la silueta se aclara ligeramente */
@media (prefers-color-scheme: dark) {
  .nav-auth__icon, .nav-auth__logout {
    color: #f1f1f1;
    filter: brightness(1.2);
  }
}

/* =========================================================
   Estilo anuncios
   ========================================================= */

/* === Banners publicitarios === */
.dl-banner {
  display: block;
  width: 100%;
  margin: 1.5rem auto;
  max-width: 1200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dl-banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}