/* ============================================================
   BASE — Variables, reset y tipografía global
   SevillaNoticias.com
============================================================ */

/* --- Variables --- */
:root {
  --carmesi: #E51A4C;
  --carmesi-dark: #B8143C;
  --carmesi-pale: #FCEEF2;
  --albero: #F39F18;
  --albero-light: #F7BE60;
  --albero-pale: #FEF6E4;
  --ink: #1C1008;
  --ink-mid: #3A2010;
  --ink-soft: #7A5C3A;
  --cream: #FAF7F2;
  --cream-dark: #F0E8D8;
  --paper: #FFFEFB;
  --border: rgba(243,159,24,0.2);
  --border-strong: rgba(243,159,24,0.45);
  --radius: 6px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  font-size: 16px;
  /* Espacio para barra de navegación inferior */
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Spinner --- */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--carmesi);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 0.4rem;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Estados vacío / carga --- */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.empty-state strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--ink-mid);
  margin-bottom: 0.4rem;
}
.loading-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* --- Slots de publicidad --- */
.ad-slot {
  background: var(--cream-dark);
  border: 1px dashed rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ad-banner { height: 60px; margin: 0.5rem 0; }
.ad-footer  { height: 60px; margin-top: 1rem; }
.ad-sidebar { height: 250px; margin-top: 1rem; }

@media (min-width: 768px) {
  .ad-banner { height: 90px; }
  .ad-footer  { height: 90px; }
}