/* Reporte "Presencia digital" de Picart. Tokens del design system (docs/design-system-picart.md). */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fuentes/cormorant-garamond-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fuentes/cormorant-garamond-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fuentes/jost-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fuentes/jost-latin-wght-italic.woff2') format('woff2'); }

:root {
  --ivory: #fbf6f1; --blush: #f5e4e1; --ink: #2e1c23; --muted: #7a5f68; --pink: #ff3b77;
  --raspberry: #b0174c; --plum: #3a1d2a; --champagne: #c8a977; --sage: #8c9a85; --rule: #e6d3cf; --on-dark: #fbf6f1;
  --line: rgba(200, 169, 119, .35);
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  /* series de los gráficos */
  --s1: var(--raspberry); --s2: var(--plum); --s3: var(--champagne);
  /* nombres que usa graficos.js */
  --fg: var(--ink); --surface: var(--ivory);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1rem/1.6 var(--font-body); }
::selection { background: var(--blush); }
a { color: var(--raspberry); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--raspberry); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 500; margin: 1.4rem 0 .5rem; }
.versalitas, .etq { font-size: .78rem; font-weight: 450; letter-spacing: .2em; text-transform: uppercase; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.pagina { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }
@media (max-width: 600px) { .pagina { padding: 16px; } }

/* Cabecera: logo arriba a la izquierda */
.cabecera { display: flex; align-items: center; gap: 1.25rem; padding: .5rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.cabecera img { height: 56px; width: auto; flex: none; }
.cabecera h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); }
.cabecera p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

section { margin-top: 2.5rem; }
section > h2 { margin-bottom: 1rem; }

/* En 30 segundos */
.treinta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cifra { background: var(--blush); padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.cifra .etq { color: var(--muted); display: block; }
.cifra .valor { font: 400 3rem/1.1 var(--font-display); display: block; margin: .2rem 0 .15rem; font-variant-numeric: lining-nums tabular-nums; }
.cifra .antes { color: var(--muted); font-size: .85rem; }
.flecha { font-weight: 500; margin-left: .3rem; }
.flecha.sube { color: var(--ink); } .flecha.baja { color: var(--raspberry); } .flecha.igual { color: var(--muted); }
@media (max-width: 960px) { .treinta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 961px) and (max-width: 1200px) { .treinta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .cifra .valor { font-size: 2.5rem; } }

/* Semáforo: símbolo + palabra, nunca solo color */
.semaforo { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin-top: 1rem; }
.estado { display: flex; align-items: baseline; gap: .55rem; padding: .7rem .9rem; border: 1px solid var(--line); background: var(--ivory); }
.estado b { font-weight: 500; }
.st { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 500; letter-spacing: .04em; padding: .1rem .5rem; white-space: nowrap; }
.st i { font-style: normal; font-weight: 600; }
.st-ok { background: #e1e7dc; color: var(--ink); }
.st-warn { background: #f1e2c6; color: var(--ink); }
.st-bad { background: var(--raspberry); color: var(--on-dark); }
.st-grey { background: #ece3e0; color: var(--ink); }
.st-nuevo { background: var(--blush); color: var(--ink); border: 1px dashed var(--muted); }

/* Frases y lectura */
.frases { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.frases li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; }
.lectura { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; max-width: 46rem; }
.lectura li::marker { color: var(--raspberry); }

/* Tarjetas */
.tarjeta { background: var(--ivory); border: 1px solid var(--line); padding: 1.4rem 1.5rem 1.2rem; min-width: 0; }
.tarjeta + .tarjeta { margin-top: 1.25rem; }
.tarjeta > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.tarjeta .frase { margin: 0 0 1rem; max-width: 46rem; }
@media (max-width: 600px) { .tarjeta { padding: 1.1rem 1rem 1rem; } }
.gemelas { display: grid; gap: 1.25rem; }
.gemelas .tarjeta + .tarjeta { margin-top: 0; }
@media (min-width: 960px) { .gemelas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cuatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: .75rem 1rem; margin: .5rem 0 1rem; }
.cuatro div { border-top: 1px solid var(--rule); padding-top: .45rem; min-width: 0; }
.cuatro .etq { color: var(--muted); display: block; font-size: .7rem; }
.cuatro .v { font: 400 1.9rem/1.15 var(--font-display); display: block; font-variant-numeric: lining-nums tabular-nums; }
.cuatro .antes { color: var(--muted); font-size: .8rem; }

.confianza { color: var(--muted); font-size: .8rem; }
.etiqueta-nueva { display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--raspberry); border: 1px solid currentColor; padding: 0 .3rem; margin-left: .35rem; vertical-align: 1px; }

/* Tablas */
.tabla { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.datos th { text-align: left; font-weight: 450; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--champagne); padding: .35rem .5rem .35rem 0; }
table.datos td { border-bottom: 1px solid var(--rule); padding: .4rem .5rem .4rem 0; vertical-align: top; overflow-wrap: anywhere; }
table.datos .n, table.datos th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.datos td.url { font-size: .85rem; }

/* Barras horizontales (países, canales) */
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; }
.barras li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr 3rem; gap: .6rem; align-items: center; }
.barras .b { height: .6rem; background: var(--blush); position: relative; }
.barras .b span { position: absolute; inset: 0 auto 0 0; background: var(--raspberry); }
.barras .n { text-align: right; font-variant-numeric: tabular-nums; }

.columnas { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.nota { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }
.fuente { color: var(--muted); font-size: .8rem; margin: 1.2rem 0 0; padding-top: .6rem; border-top: 1px solid var(--rule); }
.fuente a { color: var(--muted); }

.recomendaciones { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; }
.recomendaciones li { overflow-wrap: anywhere; }
.recomendaciones li::marker { color: var(--raspberry); }
.guia { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); font-size: .92rem; }
.guia h3 { margin-top: 0; }
.guia p { margin: .2rem 0; }
.fallos { background: var(--blush); border-left: 3px solid var(--raspberry); padding: .7rem 1rem; margin-top: 1.5rem; font-size: .9rem; overflow-wrap: anywhere; }

/* Pie en bloque ciruela, como la web */
.pie { background: var(--plum); color: var(--on-dark); margin-top: 3rem; }
.pie .pagina { padding-top: 1.6rem; padding-bottom: 1.6rem; font-size: .85rem; }
.pie a { color: var(--champagne); }

/* Gráficos (motor de graficos.js) */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 18px 20px; margin-top: 1rem; }
figure.chart { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.charts > figure.chart:only-child { max-width: 36rem; }
.tip { position: absolute; display: none; pointer-events: none; z-index: 2; background: var(--ink); color: var(--ivory); padding: 6px 10px; font-size: .8rem; line-height: 1.45; white-space: nowrap; }
.tip b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
.tip .row { display: flex; justify-content: space-between; gap: 14px; color: var(--rule); }
.tip .row .num { color: var(--ivory); font-weight: 500; }
.tip .row.tot { border-top: 1px solid var(--muted); margin-top: 3px; padding-top: 3px; }
.tip .k { display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: var(--c); }
.tip .k.s1 { --c: var(--pink); } /* sobre fondo tinta, la frambuesa no se ve */
figure.chart figcaption { font-size: .9rem; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
figure.chart figcaption b { font-weight: 500; }
figure.chart figcaption span { color: var(--muted); font-size: .8rem; }
figure.chart .lg { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .78rem; color: var(--muted); }
figure.chart .lg .k { display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: var(--c); }
.s1 { --c: var(--s1); } .s2 { --c: var(--s2); } .s3 { --c: var(--s3); }
svg.ch { width: 100%; height: auto; display: block; overflow: visible; cursor: crosshair; touch-action: pan-y; }
svg.ch text { fill: var(--muted); font: 11px var(--font-body); }
svg.ch .grid { stroke: var(--line); stroke-width: 1; }
svg.ch .b { fill: var(--c); }
svg.ch .b.part { opacity: .55; }
svg.ch .ln { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
svg.ch .dot { fill: var(--c); stroke: var(--c); stroke-width: 1.6; }
svg.ch .dot.hollow { fill: var(--ivory); }
svg.ch .medl, svg.ch .annl { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
svg.ch text.medt { fill: var(--muted); font-size: 10px; }
svg.ch text.annt { fill: var(--ink); font-size: 10px; }
svg.ch text.lastv { fill: var(--ink); font-weight: 500; font-size: 11px; }
svg.ch .hovl { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
svg.ch .hovb { fill: var(--ink); opacity: .05; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .pie { background: none; color: var(--ink); } .tarjeta { break-inside: avoid; } }

/* desplegables */
details.fold { margin: .5rem 0 1rem; border: 1px solid var(--rule); background: var(--blush); padding: .5rem .9rem; }
details.fold summary { cursor: pointer; font-family: var(--font-body); font-size: .95rem; list-style: none; display: flex; gap: .5rem; align-items: baseline; }
details.fold summary::before { content: '+'; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--raspberry); }
details.fold[open] summary::before { content: '–'; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold .tabla { margin-top: .6rem; }