/* ============================================================================= Dashboard Caso Cerimedo - Bolivia Verifica Hoja de estilos minimalista. Sin frameworks, sin CDN. ESTRUCTURA: sigue el prototipo "SistemaFPP-RegistrosCasos-BD-Cerimedo2026" SEGMENTO 0 / BASE-N2 -> titulo + nav(4) + 5 bloques (2 izq, 2 der, centro) SEGMENTO 1 / BASE-N2 -> BLOCK 1 a todo el ancho (timeframes) SEGMENTO 2 / BASE-N3 -> BLOCK 1..8 en reticula 2 x 4 (rueda de 10.1 s) SEGMENTO 3 / BASE-N4 -> BLOCK 1 + BLOCK 2 - SG-VIEW SEGMENTO 4 / BASE-N5 -> BLOCK 1 (barra ancha) SEGMENTO 5 / BASE-N6 -> BLOCK 1 (barra ancha) SEGMENTO 6 / BASE-N7 -> BLOCK 1 (barra ancha) SEGMENTO 7 / BASE-N8 -> BLOCK 1 (barra ancha) TEMAS: claro por defecto, oscuro con ============================================================================= */ /* 1. Tokens - tema claro */ :root { /* Tipografias auto-hospedadas (ver assets/css/fonts.css) */ --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --bg: #fbfbfa; --surface: #ffffff; --surface-2: #f6f6f4; --line: #e7e7e2; --line-soft: #f0f0ec; --line-strong: #d5d5cd; --text: #17171b; --text-dim: #5d5d67; --text-mute: #92929c; --accent: #1f6feb; --accent-soft: rgba(31, 111, 235, .08); --ok: #0f9d58; --warn: #b46b00; --bad: #cf3a2b; --c1: #1f6feb; --c2: #0f9d58; --c3: #b46b00; --c4: #cf3a2b; --c5: #6d43d9; --c6: #0d7f8c; --c7: #a83277; --c8: #4a5bb5; /* SIN BORDES CURVOS: la reticula es ortogonal en toda la pagina */ --radius: 0px; --radius-sm: 0px; --gap: 14px; --seg-gap: 26px; /* Identidad del caso: naranja rojizo */ --brand: #e8451c; --brand-2: #ff6a3d; /* Superficies de cristal */ --glass: rgba(255, 255, 255, .82); --glass-line: rgba(255, 255, 255, .70); --glass-blur: 14px; --shadow: 0 1px 2px rgba(16, 18, 22, .04), 0 16px 40px -20px rgba(16, 18, 22, .22); --glow-1: rgba(232, 69, 28, .07); --glow-2: rgba(31, 111, 235, .06); --chart-axis: #92929c; --chart-line: #edede8; --tip-bg: #ffffff; --tip-line: #e7e7e2; --tip-text: #17171b; --track-h: 2px; /* Cristal plomo claro del bloque de titulo (SEGMENTO 0) */ --lead-a: rgba(255, 255, 255, .88); --lead-b: rgba(238, 239, 241, .80); --lead-c: rgba(219, 222, 227, .74); --lead-line: rgba(255, 255, 255, .72); --lead-text: #2b2d33; --lead-dim: #5f626b; } /* 2. Tokens - tema oscuro: plomo marengo */ [data-theme="dark"] { --bg: #0e0f12; --surface: #1a1b1f; --surface-2: #212228; --line: #2c2e34; --line-soft: #232429; --line-strong: #3b3e45; --text: #f2f2f4; --text-dim: #b0b2ba; --text-mute: #8a8c95; --accent: #5b9bff; --accent-soft: rgba(91, 155, 255, .14); --ok: #3ddc97; --warn: #ffc857; --bad: #ff6b5e; --brand: #ff5c2b; --brand-2: #ff8a5c; --glass: rgba(26, 27, 31, .78); --glass-line: rgba(255, 255, 255, .07); --glass-blur: 14px; --shadow: 0 1px 2px rgba(170, 160, 160, 0.4), 0 20px 48px -22px rgba(0, 0, 0, .70); --glow-1: rgba(255, 92, 43, .10); --glow-2: rgba(91, 155, 255, .07); --c1: #5b9bff; --c2: #3ddc97; --c3: #ffc857; --c4: #ff6b5e; --c5: #a98bff; --c6: #4dd0e1; --c7: #ff7ab8; --c8: #9aa7ff; --chart-axis: #8a8c95; --chart-line: #2a2c32; --tip-bg: #212228; --tip-line: #3b3e45; --tip-text: #f2f2f4; /* Cristal plomo marengo del bloque de titulo */ --lead-a: rgba(44, 46, 52, .90); --lead-b: rgba(33, 34, 40, .86); --lead-c: rgba(24, 25, 29, .82); --lead-line: rgba(255, 255, 255, .09); --lead-text: #f2f2f4; --lead-dim: #a8aab3; } /* 3. Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 74px; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 15px; color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Los halos del fondo van en una capa fija propia. Con background-attachment: fixed el navegador tiene que repintar todo el degradado en cada fotograma del scroll: era la causa principal de que la pagina se sintiera pesada. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 560px at 10% -6%, var(--glow-1), transparent 68%), radial-gradient(980px 500px at 96% 2%, var(--glow-2), transparent 70%); } body.is-busy { cursor: progress; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } code { font-family: var(--font-mono); font-size: .92em; } /* Cifras tabulares: los numeros no "bailan" al actualizarse los datos */ .kpi__value, .kpi__label, .badge, .index-card__t, .index-card__pct, .meta-pill strong, .tl-event__d { font-variant-numeric: tabular-nums; } /* Tope de ancho del tablero. En pantallas grandes los bloques tienen que poder crecer: antes se quedaba en 1460 px y sobraba margen a los lados. */ .wrap { width: min(1720px, 100% - 40px); margin-inline: auto; } .tag-mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); } /* 4. Barra superior */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); } .topbar__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding-block: 8px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; } .brand__logo { width: 42px; height: auto; flex: 0 0 auto; display: block; } .brand__name { font-size: 15px; font-weight: 600; letter-spacing: -.012em; } .brand__sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); margin-top: 1px; } .topbar__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .meta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-mute); background: var(--surface); white-space: nowrap; } .meta-pill strong { color: var(--text-dim); font-weight: 600; } a.meta-pill:hover { border-color: var(--line-strong); color: var(--text); } .ring { width: 14px; height: 14px; } .ring__bg { fill: none; stroke: var(--line); stroke-width: 2; } .ring__fg { fill: none; stroke: var(--accent); stroke-width: 2; } .theme-toggle { display: inline-flex; border: 1px solid var(--line); overflow: hidden; background: var(--surface); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 27px; color: var(--text-mute); } .theme-toggle .ico { display: block; width: 15px; height: 15px; } .theme-toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); } /* selector estilo ("Moderno") */ /* 5. NAV del SEGMENTO 0 (zonas del prototipo) */ .seg-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .seg-nav a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .15s, background .15s; } .seg-nav a:hover { border-color: var(--line-strong); background: var(--surface-2); } .seg-nav span:first-child { font-size: 12.5px; font-weight: 600; } .seg-nav span:last-child { font-size: 11px; color: var(--text-mute); } /* 6. Segmentos y bloques Cada SEGMENTO es una fila con su contenedor a ancho completo */ .seg { display: block; margin-block: var(--seg-gap); } /* El pie tecnico de la rueda ("gira en 10.1 s") se retiro: describia el mecanismo y no el dato. */ .blk { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--shadow); overflow: hidden; /* Acotar el alcance del repintado: los graficos se redibujan a menudo y sin esto el navegador revisa toda la pagina. */ contain: layout paint style; } .blk__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line-soft); } .blk__titles { min-width: 0; flex: 1; } .blk__title { font-size: 13px; font-weight: 600; } .blk__hint { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; } .blk__body { flex: 1; min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; } .blk__body--flush { padding: 4px 6px 8px; } /* El grafico ocupa todo el alto que sobre: asi crece con el bloque en vez de dejar hueco abajo y el area de dibujo se adapta al tamano de la pantalla. */ .blk__body > .chart { flex: 1 1 auto; } /* Nota que explica que significa cada grafica */ .blk__note { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.55; color: var(--text-mute); } /* Mapa del esquema 7. SEGMENTO 0 / BASE-N2 - BOCETO: [ ][ TITULO ][ ] [ BLOCK 1 ][ ][ BLOCK 3 ] [ BLOCK 2 ][ BLOCK 3][ BLOCK 3 ] <- el bloque central y el derecho abarcan 2 filas El antiguo BLOCK 4 ("Graficas y estudios de analisis") se movio al SEGMENTO 2, junto a la rueda de indicadores. */ .seg0 { display: grid; gap: var(--gap); /* Dos columnas: el grafico de barras necesita ancho para las categorias y el pastel agradece un area cuadrada. Las dos abarcan dos filas. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "left1 right1" "left1 right1"; } .seg0__head { grid-area: head; } .seg0__left1 { grid-area: left1; } .seg0__right1 { grid-area: right1; } /* Los envoltorios del SEGMENTO 0 son elementos de rejilla, asi que se estiran a lo alto de su fila; pero el bloque de dentro tiene alto automatico y se quedaba corto, dejando hueco bajo el grafico. Con el envoltorio en flex el bloque ocupa todo y el grafico crece con el. */ .seg0 > div { display: flex; min-width: 0; } .seg0 > div > .blk, .seg0 > div > .landing { flex: 1; min-width: 0; } /* SEGMENTO 2: rueda de indicadores a la izquierda, bloque de analisis a la derecha */ .reel-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: var(--gap); /* Los dos hijos se estiran a la misma altura: antes la rueda se quedaba corta y dejaba una franja vacia debajo. */ align-items: stretch; } /* Sin indicadores con dato la rueda no se pinta y el bloque ocupa todo el ancho */ .reel-wrap--solo { grid-template-columns: minmax(0, 1fr); } /* Los segmentos NO son cajas: los bloques flotan sobre el fondo */ .seg0, .reel { padding: 0; border: 0; background: none; } /* ---- BLOCK 0 - LANDING: cristal plomo claro sobre el fondo ---- Sin fotografia de fondo: el panel es un cristal neutro, gris plomo en claro y plomo marengo en oscuro. */ .landing { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--lead-line); background: linear-gradient(150deg, var(--lead-a) 0%, var(--lead-b) 54%, var(--lead-c) 100%); box-shadow: var(--shadow); } /* Filo superior de luz: da el efecto de cristal sin desenfocar el fondo */ .landing::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 300px at 8% 0%, rgba(232, 69, 28, .10), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, transparent 42%); } /* Panel de cristal */ .landing__glass { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 30px; align-items: center; min-height: 396px; padding: 34px 36px; } .landing__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); } .landing__title { margin-top: 12px; } .landing__title-a { display: block; font-size: 18px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--lead-dim); } .landing__title-b { display: block; margin-top: 2px; font-size: clamp(42px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: .96; background: linear-gradient(94deg, var(--brand-2) 0%, var(--brand) 60%, #ff9d63 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing__lead { font-size: 14px; line-height: 1.66; color: var(--lead-dim); max-width: 48ch; margin-top: 18px; } .landing__facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .landing__media { display: flex; min-width: 0; } .landing .carousel__dot.is-active { background: var(--brand); } @media (max-width: 900px) { .landing__glass { grid-template-columns: minmax(0, 1fr); padding: 24px; min-height: 0; } } /* ---- Encabezado de seccion ---- */ .head { margin-bottom: 24px; } .head__kicker { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); } .head__title { margin-top: 8px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.035em; } /* ---- Tira de totales: cifras sueltas, centradas, 3 x 2 ---- */ .totales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .total { padding: 22px 18px; text-align: center; border-left: 1px solid var(--line-soft); } .total:nth-child(3n + 1) { border-left: 0; } .total:nth-child(n + 4) { border-top: 1px solid var(--line-soft); } .total__v { display: block; font-size: clamp(26px, 2.6vw, 37px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; font-variant-numeric: tabular-nums; background: linear-gradient(122deg, var(--text) 30%, var(--brand) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; } .total__l { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-mute); } @media (max-width: 760px) { .totales { grid-template-columns: repeat(2, minmax(0, 1fr)); } .total:nth-child(3n + 1) { border-left: 1px solid var(--line-soft); } .total:nth-child(2n + 1) { border-left: 0; } .total:nth-child(n + 3) { border-top: 1px solid var(--line-soft); } .total:nth-child(3) { border-top: 1px solid var(--line-soft); } } /* ---- Reticula de analisis: bloques de distinto ancho ---- */ .analisis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); } .blk--s4 { grid-column: span 4; } .blk--s5 { grid-column: span 5; } .blk--s6 { grid-column: span 6; } .blk--s7 { grid-column: span 7; } .blk--s8 { grid-column: span 8; } .blk--s12 { grid-column: span 12; } /* La evolucion mensual va pegada al bloque de DTV (SEGMENTO 9): media fila cuando la reticula pasa a dos columnas, y ancho completo a partir de 1401 px, donde las tres cuentas ya llenan su fila y quedaria medio hueco al lado. */ .blk--evolucion { grid-column: span 6; } @media (min-width: 1401px) { .blk--evolucion { grid-column: span 12; } } @media (max-width: 1400px) { /* Tres bloques por fila necesitan ~400 px cada uno para que los graficos sigan siendo legibles: por debajo de este ancho pasan a dos. */ .blk--s4 { grid-column: span 6; } } @media (max-width: 1080px) { .blk--s4, .blk--s5, .blk--s6, .blk--s7, .blk--s8, .blk--s12, .blk--evolucion { grid-column: span 12; } } /* ---- Carrusel: una imagen a la vez ---- */ .carousel { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; } .carousel__viewport { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 10; } .carousel__track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .carousel__item { position: relative; flex: 0 0 100%; height: 100%; display: block; overflow: hidden; } .carousel__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .carousel__cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-start; gap: 8px; padding: 26px 12px 11px; background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, .38) 55%, transparent); color: #fff; } .carousel__title { font-size: 12px; line-height: 1.45; font-weight: 500; } .carousel__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .carousel__btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); font-size: 17px; line-height: 1; } .carousel__btn:hover { border-color: var(--line-strong); color: var(--text); } .carousel__dots { display: flex; align-items: center; gap: 6px; } .carousel__dot { width: 6px; height: 6px; padding: 0; background: var(--line-strong); } .carousel__dot.is-active { background: var(--accent); } /* ---- Distintivo de veredicto (sobre imagen) ---- */ .verdict { flex: 0 0 auto; padding: 2px 6px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #d6d6d6; background: rgba(0, 0, 0, .42); } .verdict--falso { color: #ff9184; } .verdict--real { color: #74e5ac; } .verdict--investigacion { color: #86b8ff; } .verdict--explicador { color: #ffd780; } /* La red de hechos verificados ("Volumen de grados e indices...") se retiro del SEGMENTO 0: el bloque central ya no existe. */ /* 8. SEGMENTO 1 / BASE-N2 -> timeframes */ .timeline { position: relative; padding: 14px 6px 4px; display: flex; flex-direction: column; flex: 1; min-height: 0; } .timeline__axis { position: absolute; left: 6px; right: 6px; top: 22px; height: 1px; background: var(--line); } .timeline__years { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text-mute); margin-bottom: 14px; } /* CUATRO columnas: con 12 publicaciones salen 3 filas. Las filas se reparten el alto disponible para que la linea de tiempo llene su bloque. */ .timeline__events { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px 14px; } .tl-event { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 12px; } .tl-event__d { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); } .tl-event__t { font-size: 12.5px; font-weight: 600; margin-top: 3px; line-height: 1.35; } .tl-event__s { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; } /* 9. SEGMENTO 2 / BASE-N3 -> rueda de 8 bloques (2 x 4) */ .reel { display: flex; flex-direction: column; gap: 12px; height: 100%; } /* El visor se queda con el alto que sobra, para que la rueda mida lo mismo que el bloque que tiene al lado. */ .reel__viewport { overflow: hidden; flex: 1; min-height: 0; } .reel__track { display: flex; gap: 18px; height: 100%; transition: transform .55s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .reel__col { flex: 0 0 auto; width: 300px; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; } /* Cuando todas las columnas caben no hay rueda que girar: se reparten el ancho disponible en vez de dejar una franja vacia a la derecha. */ .reel__track--fijo .reel__col { flex: 1 1 0; width: auto; min-width: 0; } .reel__foot { display: flex; align-items: center; gap: 14px; } .reel__bar { flex: 1; height: var(--track-h); background: var(--line); overflow: hidden; } .reel__bar i { display: block; height: 100%; width: 0; background: var(--accent); } .reel__dots { display: flex; gap: 6px; } .reel__dot { width: 7px; height: 7px; padding: 0; background: var(--line-strong); } .reel__dot.is-active { background: var(--accent); } .kpi { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .kpi__top { display: flex; align-items: center; gap: 7px; } .kpi__dot { width: 6px; height: 6px; } .kpi__label { font-size: 11px; color: var(--text-mute); } /* El nombre va ENTERO: antes se recortaba con puntos suspensivos (text-overflow: ellipsis) y se perdia el final del texto. Ahora se envuelve en varias lineas. */ .kpi__name { font-size: 12px; color: var(--text-dim); line-height: 1.3; overflow-wrap: anywhere; } .kpi__value { font-size: 25px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; } /* El minigrafico ocupa el alto que sobre dentro de la tarjeta: asi las tarjetas se estiran sin quedar con hueco y la linea se lee mejor. */ .kpi__spark { position: relative; flex: 1 1 auto; min-height: 30px; } .kpi__spark svg { display: block; width: 100%; height: 100%; } /* Referencia del minigrafico. El pico se marca siempre, asi la linea tiene un punto de comparacion sin pasar el puntero; la guia, el punto y la etiqueta aparecen al acercarse. */ .kpi__pico, .kpi__punto { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); } .kpi__pico { width: 6px; height: 6px; } .kpi__punto { width: 8px; height: 8px; display: none; box-shadow: 0 0 0 2px var(--surface); } .kpi__guia { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--line-strong); display: none; pointer-events: none; } .kpi__tip { position: absolute; top: 0; transform: translateX(-50%); padding: 3px 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tip-text); background: var(--tip-bg); border: 1px solid var(--tip-line); display: none; pointer-events: none; z-index: 2; } .kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line-soft); } .kpi__source { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mute); } .kpi__source i { font-style: normal; font-size: 10px; } .badge { font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1px solid var(--line); } .badge--up { color: var(--ok); border-color: var(--line-strong); } .badge--down { color: var(--bad); border-color: var(--line-strong); } .badge--flat { color: var(--text-mute); } /* 10. SEGMENTOS de una sola columna -> bloque ancho */ .seg-wide { display: grid; gap: var(--gap); } /* 12. Graficos Altura MINIMA. El alto real lo pone el bloque (.blk__body > .chart crece para llenarlo), de modo que los graficos se adaptan a la pantalla y no quedan ni apretados ni con espacio muerto debajo. */ .chart { width: 100%; min-height: 280px; } .chart--xs { min-height: 220px; } .chart--sm { min-height: 320px; } .chart--tall { min-height: 380px; } /* 13. Galeria de casos */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: var(--gap); } .fact { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .fact__img { aspect-ratio: 16 / 10; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); display: grid; place-items: center; overflow: hidden; } .fact__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fact__body { padding: 10px 12px 12px; } .fact__t { font-size: 12.5px; font-weight: 600; } .fact__s { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; } /* 15. Marcadores por pagina: retrato circular + anillo de porcentaje El anillo funciona como el de un estado: el arco recorre el perimetro en proporcion al peso de la cuenta sobre el total monitoreado. */ .index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; } .index-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .18s ease, background-color .18s ease; } .index-card:hover { border-color: var(--line-strong); } .avatar-ring { position: relative; flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; } .avatar-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%; overflow: visible; } .avatar-ring__svg .track { fill: none; stroke: var(--line); stroke-width: 4; } .avatar-ring__svg .arc { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); } /* Contenedor circular del retrato */ .avatar-ring__face { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--surface-2); } .avatar-ring__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Monograma: se ve cuando todavia no hay retrato descargado */ .avatar-ring__mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #ffffff; } .index-card__txt { min-width: 0; display: block; } .index-card__top { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } /* El nombre de la cuenta va completo: se envuelve en varias lineas antes que recortarlo con puntos suspensivos. */ .index-card__t { font-size: 12.5px; font-weight: 600; display: block; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; } a.index-card__t:hover { color: var(--brand); } .index-card__out { font-size: 9.5px; color: var(--brand); margin-left: 3px; opacity: .85; } /* Plataforma de la publicacion de referencia */ .index-card__plat { flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border: 1px solid var(--line); color: var(--text-mute); } /* Cantidad exacta: en grande, la proporcion queda en el anillo */ .index-card__num { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); } .index-card__unit { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--text-mute); } .index-card__pct { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .index-card__dot { width: 3px; height: 11px; flex: 0 0 auto; background: currentColor; } /* 16. Avisos y notas */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; margin-bottom: var(--gap); border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; color: var(--text-dim); } .alert--error { border-color: var(--bad); } /* 17. Pie */ .footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 34px; margin-top: 30px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-mute); } /* 18. Utilidades heredadas */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid--5 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid--gauge { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .card__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line-soft); } .card__title { font-size: 13px; font-weight: 600; } .card__hint { font-size: 11.5px; color: var(--text-mute); margin-left: auto; text-align: right; } .card__body { padding: 12px 14px 14px; } .section { margin-block: var(--seg-gap); } .section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .section__title { font-size: 15px; font-weight: 600; } .section__note { font-size: 11.5px; color: var(--text-mute); } .hero { padding: 26px 0 6px; } .hero__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-mute); } .hero__title { font-size: 26px; margin-top: 6px; } .hero__title span { color: var(--accent); } .hero__lead { font-size: 13px; color: var(--text-dim); margin-top: 8px; max-width: 78ch; } /* 19. Adaptacion */ @media (max-width: 1180px) { /* Nombres de area iguales que en la regla base .seg0: si aqui se usa un nombre que no existe, esa pieza del tablero cae al final del grid. Y el numero de columnas tiene que coincidir con el de las areas: si se declaran dos y las areas son de una, queda una columna vacia. */ .seg0 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "left1" "right1"; } .reel-wrap { grid-template-columns: minmax(0, 1fr); } .seg-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .wrap { width: calc(100% - 24px); } .seg0 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "left1" "right1"; } .timeline__events { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg-nav { grid-template-columns: minmax(0, 1fr); } .reel__col { width: 240px; } .titlebar__title { font-size: 18px; } .chart { min-height: 240px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reel__track { transition: none; } } @media print { .topbar, .seg-nav, .reel__foot { display: none; } .blk, .titlebar { break-inside: avoid; } }