:root {
  --papel: #f6f3ec;
  --tarjeta: #fffdf8;
  --tinta: #16181d;
  --suave: #6a6f7a;
  --linea: #e4dfd3;
  --azul: #1b2a4a;
  --ambar: #e3a032;
  --sube: #2f7d4f;
  --baja: #b8432f;

  /* Tipos de medio */
  --c-escrita: #1b2a4a;
  --c-digital: #4f86b8;
  --c-radio: #e3a032;
  --c-tv: #c4553f;
  --c-partido: #5e8c6a;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--sans); }
a { color: inherit; }
main { max-width: 1240px; margin: 0 auto; padding: 0 24px 48px; }

/* ---------- Cabecera tipo periódico ---------- */
.cabecera { background: var(--tarjeta); border-bottom: 3px double var(--tinta); }
.cabecera-fila {
  max-width: 1240px; margin: 0 auto; padding: 18px 24px 10px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.antetitulo { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.cabecera-marca { font: 900 clamp(30px, 5vw, 46px)/1 var(--serif); text-decoration: none; letter-spacing: -.02em; }
.selector { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.selector select { font: 600 15px var(--sans); padding: 6px 10px; border: 1px solid var(--linea); border-radius: 6px; background: var(--papel); color: var(--tinta); }
.pestanas { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; }
.pestanas a {
  padding: 10px 14px; text-decoration: none; font-weight: 500; color: var(--suave);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activa { color: var(--tinta); border-bottom-color: var(--ambar); }
.pestanas .discreta { margin-left: auto; font-size: 13px; }

/* ---------- Portada de cada página ---------- */
.portada { padding: 32px 0 20px; }
.portada h1 { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--serif); margin: 0 0 8px; letter-spacing: -.01em; }
.entradilla { margin: 0; color: var(--suave); max-width: 70ch; }
.aviso { background: #fff3d6; border-left: 4px solid var(--ambar); padding: 10px 14px; margin: 14px 0 0; border-radius: 4px; font-size: 14px; }

/* ---------- Cifras clave ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.kpi { background: var(--tarjeta); padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.kpi.principal { background: var(--azul); color: #fff; }
.kpi-etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.kpi.principal .kpi-etiqueta { color: #b9c3d8; }
.kpi-cifra { font: 700 32px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.kpi-cifra small { font-size: 20px; margin-left: 2px; }
.kpi-pie { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.previo { color: var(--suave); }
.kpi.principal .previo { color: #b9c3d8; }
.var { font-weight: 600; }
.var.sube { color: var(--sube); }
.var.baja { color: var(--baja); }
.var.igual { color: var(--suave); }
.kpi.principal .var.sube { color: #8fd3a6; }
.kpi.principal .var.baja { color: #f3a08f; }
.spark { width: 100%; height: 30px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--ambar); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Bloques ---------- */
.bloque { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 20px 22px; margin-top: 20px; min-width: 0; }
.bloque-cabecera { margin-bottom: 14px; }
.bloque-cabecera.separado { margin-top: 28px; }
.bloque h2 { font: 700 20px/1.2 var(--serif); margin: 0; }
.bloque-cabecera p { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.lienzo { position: relative; height: 260px; }
.lienzo.alto { height: 340px; }
.mas { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--azul); }
.mas:hover { text-decoration: underline; }

/* ---------- Calendario ---------- */
.calendario-scroll { overflow-x: auto; padding-bottom: 6px; }
.calendario { display: grid; grid-template-columns: 18px auto; grid-template-rows: auto auto; gap: 4px; width: max-content; }
.cal-meses { grid-column: 2; display: grid; grid-template-columns: repeat(var(--semanas), 14px); gap: 3px; font-size: 11px; color: var(--suave); }
.cal-dias { grid-row: 2; display: grid; grid-template-rows: repeat(7, 14px); gap: 3px; font-size: 10px; color: var(--suave); }
.cal-rejilla { grid-row: 2; grid-column: 2; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 3px; }
.cal-celda { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: #ebe6da; }
.cal-celda.vacia { background: transparent; }
.cal-celda.n1 { background: #f6dca8; }
.cal-celda.n2 { background: #e9b45a; }
.cal-celda.n3 { background: #c47d1c; }
.cal-celda.n4 { background: #7a4a0c; }
.cal-celda.futuro { background: transparent; outline: 1px dashed var(--linea); outline-offset: -1px; }
.cal-celda.partido { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--azul); }
a.cal-celda:hover { outline: 2px solid var(--tinta); }
.cal-leyenda { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin-top: 10px; }
.cal-leyenda .partido { margin-left: 12px; }

/* ---------- Barras 100 % y leyendas ---------- */
.barra-100 { display: flex; height: 18px; border-radius: 4px; overflow: hidden; gap: 2px; }
.barra-100.mini { height: 10px; width: 120px; gap: 1px; }
.leyenda { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; font-size: 14px; }
.leyenda li { display: flex; align-items: center; gap: 8px; }
.leyenda b { margin-left: auto; font-variant-numeric: tabular-nums; }
.leyenda em { color: var(--suave); font-style: normal; width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.muestra { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.tipo-prensa-escrita { background: var(--c-escrita); --c: var(--c-escrita); }
.tipo-prensa-digital { background: var(--c-digital); --c: var(--c-digital); }
.tipo-radio { background: var(--c-radio); --c: var(--c-radio); }
.tipo-television { background: var(--c-tv); --c: var(--c-tv); }
.tipo-partido-televisado { background: var(--c-partido); --c: var(--c-partido); }
.contenido-liga-asobal { background: #1b2a4a; }
.contenido-copa-del-rey { background: #8a5a9e; }
.contenido-pretemporada-amistosos-equipo { background: #4f86b8; }
.contenido-fichajes-plantilla { background: #e3a032; }
.contenido-eventos-patrocinadores-rsc-abonados { background: #c4553f; }
.contenido-cantera { background: #5e8c6a; }
.contenido-sin-clasificar { background: #c9c3b5; }

/* ---------- Rankings ---------- */
.ranking { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.ranking li { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); counter-increment: r; }
.ranking li::before { content: counter(r); color: var(--suave); font-size: 13px; }
.ranking a { text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking a:hover { text-decoration: underline; }
.ranking-barra { display: inline-block; height: 8px; background: #ebe6da; border-radius: 4px; overflow: hidden; width: 100%; }
.ranking-barra span { display: block; height: 100%; background: var(--ambar); }
.ranking-cifra { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ranking-cifra small { display: block; font-weight: 400; color: var(--suave); font-size: 12px; }

/* ---------- Historias y partidos ---------- */
.historias { list-style: none; margin: 0; padding: 0; }
.historias li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.historia-n { font: 900 22px/1 var(--serif); color: var(--ambar); min-width: 42px; }
.historias a { font: 600 16px/1.3 var(--serif); text-decoration: none; }
.historias a:hover { text-decoration: underline; }
.historias small { display: block; color: var(--suave); margin-top: 3px; }
.partidos { list-style: none; margin: 0; padding: 0; }
.partidos li { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.partidos time { color: var(--suave); }
.partidos em { color: var(--suave); font-style: normal; font-size: 12px; }

/* ---------- Recortes (fichas de noticia) ---------- */
.recortes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.recortes.lista { grid-template-columns: 1fr; gap: 0; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; }
.recorte { background: var(--tarjeta); border: 1px solid var(--linea); border-top: 4px solid var(--c, var(--azul)); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background-image: none; }
.recortes .recorte { background: var(--tarjeta); }
.recortes.lista .recorte { border: 0; border-left: 4px solid var(--c); border-radius: 0; border-bottom: 1px solid var(--linea); padding: 16px 20px; }
.recorte-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--suave); }
.recorte-meta strong { color: var(--tinta); font-size: 13px; }
.recorte-meta time { margin-left: auto; }
.recorte .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.recorte h3 { margin: 0; font: 600 17px/1.3 var(--serif); }
.recorte h3 a { text-decoration: none; }
.recorte h3 a:hover { text-decoration: underline; }
.recorte p { margin: 0; color: #3d414a; font-size: 14px; }
.recorte-pie { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: auto; }
.etiqueta { color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.recorte-pie .valor { margin-left: auto; color: var(--suave); font-variant-numeric: tabular-nums; }
.enlace-pdf { font-weight: 600; color: var(--baja); text-decoration: none; border: 1px solid currentColor; padding: 1px 6px; border-radius: 4px; }

/* Los colores de tipo en las fichas solo marcan el borde, no el fondo */
.recorte.tipo-prensa-escrita, .recorte.tipo-prensa-digital, .recorte.tipo-radio,
.recorte.tipo-television, .recorte.tipo-partido-televisado { background: var(--tarjeta); }

/* ---------- Hemeroteca: filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 14px; }
.filtros input, .filtros select, .filtros button { font: 14px var(--sans); padding: 8px 10px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; color: var(--tinta); }
.filtros .buscador { flex: 1 1 280px; }
.filtros label { font-size: 13px; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.filtros button { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; cursor: pointer; }
.limpiar { font-size: 13px; color: var(--suave); }
.resultado { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.resultado p { margin: 0; }
.boton-secundario { text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--tinta); padding: 6px 12px; border-radius: 6px; }
.boton-secundario:hover { background: var(--tinta); color: var(--papel); }
.paginacion { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 14px; }
.paginacion a { font-weight: 600; text-decoration: none; color: var(--azul); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.tabla-medios { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-medios th { text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); border-bottom: 2px solid var(--tinta); padding: 8px; white-space: nowrap; }
.tabla-medios td { padding: 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-medios a { text-decoration: none; font-weight: 500; }
.tabla-medios a:hover { text-decoration: underline; }
.tabla-medios .cuota { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.tabla-medios .cuota .ranking-barra { width: 80px; }
.tabla-medios tr.en-curso td { background: #fff3d6; }
.tabla-medios em { color: var(--suave); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--suave); width: 2em; }

.pie { max-width: 1240px; margin: 0 auto; padding: 0 24px 32px; font-size: 12px; color: var(--suave); }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  main { padding: 0 16px 40px; }
  .cabecera-fila, .pestanas, .pie { padding-left: 16px; padding-right: 16px; }
  .dos-columnas { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-cifra { font-size: 26px; }
  .bloque { padding: 16px; }
  .ranking li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .ranking-barra { display: none; }
  .ranking li .ranking-barra { display: none; }
}

/* ---------- Ajustes ---------- */
.leyenda em { width: auto; min-width: 52px; white-space: nowrap; }
.leyenda li { min-width: 0; }
.programa-medio { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); white-space: nowrap; overflow: hidden; }
.partidos.columnas { columns: 2 320px; column-gap: 32px; }
.partidos.columnas li { break-inside: avoid; }
.historias .titular-ejemplo { font-style: italic; color: #3d414a; }
.historias a { display: inline-block; }
.historias a::first-letter { text-transform: uppercase; }
.var, .previo { white-space: nowrap; }
.kpi-pie { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }

/* ---------- Bandeja ---------- */
.bandeja { display: flex; flex-direction: column; gap: 12px; }
.candidata { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; background: var(--tarjeta); border: 1px solid var(--linea); border-left: 4px solid var(--ambar); border-radius: 8px; padding: 16px 18px; transition: opacity .3s, transform .3s; }
.candidata h3 { margin: 6px 0; font: 600 17px/1.3 var(--serif); }
.candidata h3 a { text-decoration: none; }
.candidata h3 a:hover { text-decoration: underline; }
.candidata p { margin: 0; color: #3d414a; font-size: 14px; }
.candidata .fuente { font-style: italic; }
.candidata-campos { display: flex; flex-direction: column; gap: 8px; }
.candidata-campos label { display: grid; grid-template-columns: 76px 1fr; align-items: center; font-size: 13px; color: var(--suave); }
.candidata-campos input, .candidata-campos select { font: 14px var(--sans); padding: 6px 8px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; min-width: 0; }
.candidata-campos input.nuevo { border-color: var(--ambar); background: #fff8e6; }
.candidata-botones { display: flex; gap: 8px; margin-top: 4px; }
.candidata-botones button { flex: 1; font: 600 14px var(--sans); padding: 8px; border-radius: 6px; cursor: pointer; border: 1px solid; }
.aceptar { background: var(--sube); border-color: var(--sube); color: #fff; }
.descartar { background: transparent; border-color: var(--linea); color: var(--suave); }
.descartar:hover { border-color: var(--baja); color: var(--baja); }
.candidata.enviando { opacity: .5; pointer-events: none; }
.candidata.hecha-aceptada { opacity: 0; transform: translateX(30px); }
.candidata.hecha-descartada { opacity: 0; transform: translateX(-30px); }
.vacia { color: var(--suave); padding: 24px; text-align: center; background: var(--tarjeta); border: 1px dashed var(--linea); border-radius: 10px; }
.contador-nav { background: var(--ambar); color: var(--tinta); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 600; margin-left: 4px; }
@media (max-width: 860px) { .candidata { grid-template-columns: 1fr; } }