/* Estilo 2 — shared visual system for /medios and /informe. * * Extracted verbatim from the two approved mockups: * - docs/mockup-propuesta-b.html (base: hero, panels, items, table, side) * - docs/mockup-propuesta-d-detalle.html (the .fx-* right slide-over "ficha") * Only additions beyond those two files: the --web/--web-bg tokens + .mark.w * (the mockups only had L/S), the --clase-* palette + .clase-* pill classes * (new requirement: a colour per medio classification, spec §3), a handful * of small classes ficha2.js/grafica.js need that neither static mockup * needed (an actual chart, a toggle button, a tooltip), and the motion * block for the slide-over open/close (the mockups were static screenshots, * not real dialogs). Everything new is clearly marked below. * * Spanish stays in the UI copy; this file has none — it is markup-agnostic. */ :root { --navy: #0f1b2d; --navy-2: #16243a; --surface: #f5f7fa; --card: #ffffff; --ink: #0f172a; --ink-2: #334155; --mut: #64748b; --line: #e2e8f0; --line-2: #cbd5e1; --accent: #0ea5a4; /* teal: acción y barras */ --accent-2: #0f8584; /* hover de --accent (mockup.html), Task 11: .btn.primario:hover */ --leo: #c2410c; --leo-bg: #ffedd5; /* Leolytics · naranja */ --sem: #1d4ed8; --sem-bg: #dbeafe; /* Semrush · azul */ --web: #1f6f5f; --web-bg: #e6f2ee; /* Web revisada · verde — nuevo respecto a los mockups */ --ok: #15803d; --ok-bg: #dcfce7; --warn: #a16207; --warn-bg: #fef9c3; --no: #b91c1c; --no-bg: #fee2e2; --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Paleta de --clase-* (spec §3): un color por clasificación derivada. * Seis tonos distintos — Crecimiento fuerte y Crecimiento comparten el * verde (misma dirección, distinta intensidad de la métrica, no de color); * "Sin tendencia" no suma un séptimo tono: usa el neutro --mut/--line ya * definido arriba, coherente con "clase = null" siendo también neutro. */ --clase-crecimiento: #15803d; --clase-crecimiento-bg: #dcfce7; /* verde, reutiliza --ok */ --clase-estable: #475569; --clase-estable-bg: #e2e8f0; /* gris */ --clase-descenso: #a16207; --clase-descenso-bg: #fef9c3; /* ámbar, reutiliza --warn */ --clase-caida: #b91c1c; --clase-caida-bg: #fee2e2; /* rojo, reutiliza --no */ --clase-nuevo: #1d4ed8; --clase-nuevo-bg: #dbeafe; /* azul, reutiliza --sem */ --clase-muerto: #7f1d1d; --clase-muerto-bg: #fecaca; /* rojo oscuro, más saturado que --clase-caida */ } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--surface); color: var(--ink); font: 14.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } /* [hidden] must win over every author `display` rule (e.g. .wrap's * display:grid, .foot's display:flex) — without !important, the first * class selector below beats the user-agent stylesheet's [hidden] rule * and the "hidden" element stays visible. See .barra-seleccion[hidden] * further down for the same bug fixed locally before this global rule. */ [hidden] { display: none !important; } .num { font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } /* banda superior */ .hero { background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: #fff; padding: 0 0 28px; } .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #b6c2d6; } .nav b { color: #fff; font-weight: 600; letter-spacing: -.01em; } .nav a { margin-left: 18px; } .nav a:hover { color: #fff; } .hero-in { max-width: 1180px; margin: 0 auto; padding: 28px 32px 0; } .crumb { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8fa1bb; margin: 0 0 10px; } h1 { font: 600 30px/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 6px; } .tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; } .tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: #dbe4f0; } /* repeat(6,1fr): matches medios.html's actual six cards (the mismatched * repeat(5,1fr) this replaces is why they wrapped onto two rows — a real * dashboard needs them in one). informe.html's #kpis sets its own * grid-template-columns inline (auto-fit,minmax(150px,1fr)), which always * wins over this class rule, so its variable-count KPI row is unaffected. * Padding/font here are also tightened (spec: "smaller numbers, less * vertical padding") — shared safely across both pages' cards. */ .kpis { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; } .kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; } .kpi .v { font: 600 20px/1 var(--sans); letter-spacing: -.02em; } .kpi .v small { font-size: 13px; color: #9fb0c8; margin-left: 2px; font-weight: 500; } .kpi .l { font-size: 11.5px; color: #9fb0c8; margin-top: 5px; } .kpi.accent { border-color: rgba(14,165,164,.6); background: rgba(14,165,164,.12); } .kpi.accent .v { color: #5eead4; } /* cuerpo */ /* minmax(0, 1fr), never a bare 1fr: a grid track's implicit min-width is * auto, so the left column refuses to shrink below its content's min-content * width and the whole page ends up wider than the viewport (measured: 499 px * of horizontal overflow at 1374 px, with .wrap itself 1404 px wide despite * its own max-width of 1180 px). Every grid ancestor of wide content needs * this plus min-width: 0 on the child. */ .wrap { max-width: 1180px; margin: -16px auto 0; padding: 0 32px 64px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .wrap > * { min-width: 0; } /* .wrap-ancho — page-scoped modifier, /medios only (dashboard: use the whole * window, not the 1180px reading width /informe and friends still want). * Only max-width changes; grid columns/gap/padding stay inherited from * .wrap so this never has to duplicate them. .panel-oculto (set on the same * element by the segmentation-panel toggle below) drops the 320px aside * track entirely so the table gets the full row, not just a wider left * track next to an empty-ish sidebar. */ .wrap-ancho { max-width: none; } .wrap-ancho.panel-oculto { grid-template-columns: 1fr; } /* min-width: 0 here too: a panel is a grid item in the explorer's left * column, and a grid track's automatic minimum is the item's min-content * width — driven by the wide table inside. Without this the panel grows to * 1404 px inside a 776 px track and the body scrolls sideways, even though * the table already lives in its own overflow-x container. */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); min-width: 0; } /* flex-wrap: a header with a heading + button/legend must wrap onto a * second line on a narrow viewport, never force the row (and everything * below it in the same block-formatting context) wider than the viewport. */ .ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .ph h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .legend, .fx-legend { display: flex; gap: 12px; font-size: 12px; color: var(--mut); flex-wrap: wrap; } .fx-legend { margin: 0 0 14px; } .mark { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: 700 10px/1 var(--sans); margin-right: 4px; vertical-align: 1px; font-style: normal; } .mark.l { background: var(--leo-bg); color: var(--leo); } .mark.s { background: var(--sem-bg); color: var(--sem); } .mark.w { background: var(--web-bg); color: var(--web); } /* nuevo: fuente "Web revisada" */ .criterio { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.6; } .criterio b { color: var(--ink); font-weight: 600; } /* ===== .filtros-grid — barra de filtros del explorador (nuevo: ningún * mockup tenía un formulario de filtros, solo un párrafo .criterio). * auto-fit/minmax en vez de columnas fijas: cada campo declara el ancho * mínimo que necesita y la rejilla decide cuántos caben por fila (4, 2, 1…) * sin que ninguna combinación de ancho de viewport llegue a desbordar — * la alternativa (columnas fijas + flex-wrap con min-width en cada campo) * es la que producía el desborde horizontal que este bloque reemplaza. * min-width:0 en .campo invalida el mínimo automático "no encoger por * debajo del contenido" que grid aplica por defecto a sus items. */ .filtros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; padding: 16px 18px; min-width: 0; } /* .campo is dual-purpose: the filter-row field above (unused today — no * page renders class="campo" yet, .filtros-grid predates .fila-filtro/ * .grupo-filtro) AND, from Task 11, a modal form field (mockup.html's * .campo, used by abrirModal() callers building forms with escapeHtml() + *