/* ============ Potosí Conecta — base ============
   Réplica de The Rex. Tokens de marca intocables;
   los roles de superficie cambian con [data-tema]. */

:root {
  /* Tokens de marca — no cambian de valor */
  --primario: #111111;
  --tinta: #0B0B0B;
  --acento: #00D68F;
  --papel: #FFFFFF;
  --texto: #16150F;
  --texto-suave: #6E6A5E;

  /* Roles de superficie */
  --superficie: var(--papel);
  --superficie-alterna: #f7f7f5;
  --en-superficie: var(--texto);
  --en-superficie-suave: var(--texto-suave);
  --borde-suave: #e8e8e6;
  /* Verde apto para texto sobre claro; el puro #00D68F no pasa 3:1 */
  --acento-texto: #008F60;

  --fuente-display: 'Volkhov', Georgia, serif;
  --fuente-texto: 'Lato', -apple-system, sans-serif;
  --fuente-ui: 'Roboto', Arial, sans-serif;
}

[data-tema="oscuro"] {
  --superficie: var(--tinta);
  --superficie-alterna: #161616;
  --en-superficie: var(--papel);
  --en-superficie-suave: rgba(255, 255, 255, 0.65);
  --borde-suave: rgba(255, 255, 255, 0.14);
  --acento-texto: var(--acento);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 14px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.contenedor {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.estado-vacio {
  text-align: center;
  color: var(--en-superficie-suave);
  padding: 60px 0;
}

/* Accesibilidad: solo lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============ Topbar ============ */
.topbar {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.topbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}
.topbar__acciones { display: flex; align-items: center; gap: 14px; }
.topbar__red, .topbar__toggle {
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
}
.topbar__red:hover, .topbar__toggle:hover { color: var(--acento); opacity: 1; }
.topbar__toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
[data-tema="claro"] .icono-sol { display: none; }
[data-tema="oscuro"] .icono-luna { display: none; }

/* ============ Masthead ============ */
.masthead {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-suave);
}
.masthead__interior {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 82px;
}
.masthead__logo img { width: 170px; height: auto; }
[data-tema="oscuro"] .masthead__logo img { filter: invert(1) hue-rotate(180deg); }

.nav-principal { margin-left: auto; min-width: 0; }
.nav-principal__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.nav-principal__lista::-webkit-scrollbar { display: none; }
.nav-principal__lista a {
  font-family: var(--fuente-ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--en-superficie);
  padding: 8px 0;
  display: inline-block;
}
.nav-principal__lista a:hover {
  color: var(--en-superficie);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--acento);
  opacity: 1;
}

.masthead__lupa {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--en-superficie);
  flex-shrink: 0;
}
.masthead__lupa:hover { opacity: 0.85; }

.buscador { border-top: 1px solid var(--borde-suave); padding: 14px 0; }
.buscador form { display: flex; gap: 10px; }
.buscador input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--borde-suave);
  background: var(--superficie);
  color: var(--en-superficie);
  font-family: var(--fuente-texto);
  font-size: 14px;
}
.buscador button {
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 22px;
  background: var(--primario);
  color: var(--papel);
  border: 0;
  cursor: pointer;
}
.buscador button:hover { background: var(--acento); color: var(--primario); opacity: 1; }

@media (max-width: 767px) {
  .masthead__interior { flex-wrap: wrap; padding: 10px 15px; gap: 10px; }
  .masthead__logo img { width: 140px; }
  .nav-principal { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* ============ Pie ============ */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 60px;
  font-size: 13px;
}
.pie a { color: rgba(255, 255, 255, 0.85); }
.pie a:hover { color: var(--acento); opacity: 1; }
.pie__columnas {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding: 50px 15px;
}
.pie__marca img { width: 160px; margin-bottom: 16px; }
.pie__titulo {
  font-family: var(--fuente-display);
  font-size: 17px;
  color: var(--papel);
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  margin-bottom: 18px;
}
.pie__notas { list-style: none; margin: 0; padding: 0; }
.pie__notas li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pie__notas a {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.pie__notas time {
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pie__redes { list-style: none; margin: 0; padding: 0; }
.pie__redes li { margin-bottom: 10px; }
.pie__redes a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
}
.pie__legal-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}
.pie__legal p { margin: 0; }

@media (max-width: 767px) {
  .pie__columnas { grid-template-columns: 1fr; gap: 30px; }
  .pie__legal-interior { flex-direction: column; gap: 6px; padding: 12px 15px; }
}

/* ============ Chip de categoría ============ */
/* Blanco sobre #00D68F da 1.9:1 — el texto del chip SIEMPRE va en #111. */
.chip-categoria {
  display: inline-block;
  background: var(--acento);
  color: #111111;
  font-family: var(--fuente-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  line-height: 1.5;
}
.chip-categoria:hover { background: var(--primario); color: var(--papel); opacity: 1; }

.meta-fecha, .meta-autor {
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--en-superficie-suave);
}

/* ============ Título de sección ============ */
.titulo-seccion {
  text-align: center;
  margin: 55px 0 30px;
  position: relative;
}
.titulo-seccion__texto {
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 22px;
}
.titulo-seccion__texto::before,
.titulo-seccion__texto::after {
  content: "";
  flex: 1;
  height: 9px;
  background: repeating-linear-gradient(
    -45deg,
    var(--borde-suave) 0 2px,
    transparent 2px 5px
  );
}
.titulo-seccion__acento { color: var(--acento-texto); }
.titulo-seccion__subtitulo {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 15px;
  color: var(--en-superficie-suave);
  margin: 6px 0 0;
}

/* ============ Botón contorneado ============ */
.boton-contorno {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--borde-suave);
  color: var(--en-superficie);
  padding: 8px 22px;
}
.boton-contorno:hover {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--papel);
  opacity: 1;
}

/* ============ Tarjeta overlay ============ */
.tarjeta-overlay { position: relative; overflow: hidden; background: var(--tinta); }
.tarjeta-overlay__imagen { display: block; min-height: 250px; }
.tarjeta-overlay--grande .tarjeta-overlay__imagen { min-height: 440px; }
.tarjeta-overlay__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-overlay__contenido {
  position: absolute;
  inset: auto 0 0 0;
  padding: 55px 22px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}
.tarjeta-overlay__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tarjeta-overlay__meta .meta-fecha { color: rgba(255, 255, 255, 0.75); }
.tarjeta-overlay__titulo {
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.3;
}
.tarjeta-overlay__titulo a { color: var(--papel); }
.tarjeta-overlay__titulo a:hover { color: var(--acento); }
.tarjeta-overlay--grande .tarjeta-overlay__titulo { font-size: 30px; }
.tarjeta-overlay--grande .tarjeta-overlay__contenido { padding: 90px 28px 26px; }

/* ============ Tarjeta lista ============ */
.tarjeta-lista {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.tarjeta-lista__imagen img { width: 100%; height: auto; }
.tarjeta-lista__titulo { font-size: 21px; text-transform: uppercase; margin-bottom: 10px; }
.tarjeta-lista__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.tarjeta-lista__extracto { margin: 0 0 16px; color: var(--en-superficie-suave); }

/* ============ Tarjeta mini ============ */
.tarjeta-mini { padding: 16px 0; border-bottom: 1px solid var(--borde-suave); }
.tarjeta-mini__meta { margin-bottom: 8px; }
.tarjeta-mini__titulo { font-size: 16px; text-transform: uppercase; margin-bottom: 6px; }

/* ============ Tarjeta grilla ============ */
.tarjeta-grilla__media { position: relative; min-height: 60px; background: var(--superficie-alterna); }
.tarjeta-grilla__media .chip-categoria {
  position: absolute;
  left: 14px;
  bottom: 14px;
}
.tarjeta-grilla__cuerpo { padding: 14px 0; }
.tarjeta-grilla__titulo { font-size: 17px; text-transform: uppercase; margin-bottom: 6px; }
.tarjeta-grilla__extracto { margin: 10px 0 14px; color: var(--en-superficie-suave); }

/* ============ Lista del sidebar ============ */
.lista-sidebar { list-style: none; margin: 0; padding: 0; counter-reset: nota; }
.lista-sidebar__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.lista-sidebar__media { position: relative; }
.lista-sidebar__media img { width: 64px; height: 64px; object-fit: cover; }
.lista-sidebar__numero {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acento);
  color: #111111;
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 700;
}
.lista-sidebar__titulo { font-size: 14px; }

/* ============ Paginación ============ */
.paginacion ul {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.paginacion .page-numbers {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid var(--borde-suave);
  padding: 8px 14px;
  color: var(--en-superficie);
}
.paginacion .page-numbers.current,
.paginacion .page-numbers:hover {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--papel);
  opacity: 1;
}

/* ============ Portada: destacada ============ */
.seccion-destacada__grilla {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}
.seccion-destacada__principal .tarjeta-overlay--grande { min-height: 440px; }
.seccion-destacada__principal .tarjeta-overlay__imagen img { min-height: 440px; }

/* ============ Portada: grilla overlay ============ */
.grilla-overlay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.grilla-overlay .tarjeta-overlay { min-height: 250px; }
.grilla-overlay .tarjeta-overlay__imagen img { min-height: 250px; }

@media (max-width: 767px) {
  .seccion-destacada__grilla { grid-template-columns: 1fr; }
  .grilla-overlay { grid-template-columns: 1fr; }
  .titulo-seccion__texto { font-size: 24px; }
}

/* ============ Portada: columna + sidebar ============ */
.portada__con-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start; /* sin esto la columna se estira a la altura del sidebar */
}
.grilla-notas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.grilla-notas--dos { grid-template-columns: repeat(2, 1fr); }
.grilla-minis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
}

/* ============ Sidebar (widgets estilo The Rex) ============ */
.widget {
  border-top: 4px solid var(--en-superficie);
  margin-bottom: 40px;
}
.widget__titulo {
  font-size: 19px;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: 6px;
}

@media (max-width: 991px) {
  .portada__con-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .grilla-notas, .grilla-notas--dos, .grilla-minis { grid-template-columns: 1fr; }
  .tarjeta-lista { grid-template-columns: 1fr; }
}

/* ============ Nota interna ============ */
.nota { max-width: 790px; padding-top: 40px; }
.nota__cabecera { margin-bottom: 26px; }
/* Calibrado contra el demo real (Step 0, /tmp/therex-single.png): el titular del
   single va en mayusculas — igual que .titulo-seccion__texto y .widget__titulo en
   este mismo tema — no sin-uppercase como asumia el plan original. */
.nota__titulo {
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 14px 0 12px;
}
.nota__meta { display: flex; gap: 14px; align-items: center; }
.nota__imagen { margin: 0 0 26px; }
.nota__cuerpo {
  font-size: 16px;
  line-height: 1.75;
}
.nota__cuerpo p { margin: 0 0 1.4em; }
.nota__cuerpo a {
  color: var(--en-superficie);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-underline-offset: 2px;
}
.nota__cuerpo a:hover { opacity: 1; text-decoration-thickness: 2px; }
.nota__cuerpo blockquote {
  border-left: 3px solid var(--acento);
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 18px;
}
.nota__navegacion {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0;
  padding-top: 20px;
  border-top: 1px solid var(--borde-suave);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 14px;
}
.nota__nav-item--der { text-align: right; margin-left: auto; }

@media (max-width: 767px) {
  .nota__titulo { font-size: 27px; }
}

/* ============ Archivo ============ */
.seccion-archivo { padding-top: 10px; }
.seccion-archivo .titulo-seccion { margin-top: 35px; }

/* ============ Búsqueda / 404 ============ */
.seccion-archivo--angosta { max-width: 900px; }
.estado-vacio .boton-contorno { margin-top: 16px; }

/* ============ Feed de Facebook ============ */
.feed-facebook { list-style: none; margin: 0; padding: 0; }
.feed-facebook__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--borde-suave);
}
.feed-facebook__item img { margin-bottom: 8px; }
.feed-facebook__item p { margin: 0 0 6px; font-size: 13px; }
.feed-facebook__item time {
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--en-superficie-suave);
}
.widget--facebook .boton-contorno { margin-top: 14px; }

/* ============ Pie: cotización del dólar ============ */
.pie__dolar { list-style: none; margin: 0; padding: 0; }
.pie__dolar li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pie__dolar-etiqueta {
  font-family: var(--fuente-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.pie__dolar-valor {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--acento); /* verde sobre tinta: 10:1, pasa */
}
.pie__dolar-nota {
  font-family: var(--fuente-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  margin: 10px 0 0;
}