/* Inicio de cada plataforma (Taste + impeccable + ux). Mismo contenido y mismas seis tarjetas tipo Real Trends; sólo
   la vista: se leen mejor de lejos y el color vuelve a decir algo. */

/* Etiquetas legibles para gente grande (antes 12.5 px) y cifras parejas con números tabulares. */
html body:not(.modo-general) #app-shell #content .in-tablero .in-cifra > span { font-size:14px !important; font-weight:500 !important; color:var(--sp-tenue, #5f6b7a) !important; line-height:1.35; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-cifra strong { font-variant-numeric:tabular-nums; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-rejilla { row-gap:22px; }

/* El color con significado (antes el tema lo pintaba todo de negro): rojo lo que urge, ámbar lo que hay que vigilar. */
html body:not(.modo-general) #app-shell #content .in-cifra.rojo strong { color:#b42318 !important; }
html body:not(.modo-general) #app-shell #content .in-cifra.ambar strong { color:#a15c07 !important; }
html body:not(.modo-general) #app-shell #content .in-punto { width:8px; height:8px; margin-top:5px; background:#d92d20; box-shadow:0 0 0 3px rgba(217,45,32,.15); }

/* Cambio contra el periodo anterior: con su color (verde sube, rojo baja) y del tamaño de una etiqueta, no 11 px. */
html body:not(.modo-general) #app-shell #content .in-cifra .delta { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; margin-top:6px; font-size:14px; }
html body:not(.modo-general) #app-shell #content .in-cifra .delta b { font-weight:700; }
html body:not(.modo-general) #app-shell #content .in-cifra .delta.up b { color:#1f7a4d; }
html body:not(.modo-general) #app-shell #content .in-cifra .delta.down b { color:#b42318; }
html body:not(.modo-general) #app-shell #content .in-cifra .delta span { color:var(--sp-tenue, #5f6b7a); }

/* Cada cifra lleva a su página: se nota al pasar el mouse y con el teclado. */
html body:not(.modo-general) #app-shell #content .in-cifra.in-link { margin:-6px -8px; padding:6px 8px; border-radius:10px; cursor:pointer; transition:background-color var(--duration-quick, 150ms) ease-out; }
html body:not(.modo-general) #app-shell #content .in-cifra.in-link:hover { background:#f5f6f8; }
html body:not(.modo-general) #app-shell #content .in-cifra.in-link:focus-visible { outline:2px solid #c2410c; outline-offset:0; }

/* Los avisos de cada tarjeta (fuera de plazo, en camino, tiempo de respuesta) van al pie, a la misma altura en la fila. */
html body:not(.modo-general) #app-shell #content .in-tablero .in-tarjeta > .in-pie { margin-top:auto !important; padding-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
html body:not(.modo-general) #app-shell #content .in-semaforo { font-size:14px !important; }

/* Reputación: el nivel junto al termómetro, con los segmentos apagados menos lavados. */
html body:not(.modo-general) #app-shell #content .in-termo { gap:6px; margin-bottom:14px; }
html body:not(.modo-general) #app-shell #content .in-termo i { height:8px; border-radius:4px; opacity:.32; }
html body:not(.modo-general) #app-shell #content .in-termo i.activo { height:12px; margin-top:-2px; opacity:1; box-shadow:none; }

/* Una tarjeta que se queda sola en su fila (Tráfico, la séptima) ocupa todo el ancho y pone sus cifras en un renglón. */
@media (min-width:1101px) {
  html body:not(.modo-general) #app-shell #content .in-tablero:not(.uno):not(.dos) > .in-tarjeta:last-child:nth-child(3n+1) { grid-column:1 / -1; min-height:0; }
  html body:not(.modo-general) #app-shell #content .in-tablero:not(.uno):not(.dos) > .in-tarjeta:last-child:nth-child(3n+1) .in-rejilla { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { html body:not(.modo-general) #app-shell #content .in-cifra.in-link { transition:none; } }
html body:not(.modo-general) #app-shell #content .in-cifra .delta.up b { color:#1f7a4d !important; }
html body:not(.modo-general) #app-shell #content .in-cifra .delta.down b { color:#b42318 !important; }
html body:not(.modo-general) #app-shell #content .in-rejilla.tres .in-cifra > span { overflow-wrap:normal !important; word-break:normal !important; hyphens:manual; }
@media (max-width:480px) { html body:not(.modo-general) #app-shell #content .in-rejilla.tres { gap:12px 10px; } html body:not(.modo-general) #app-shell #content .in-rejilla.tres .in-cifra > span { font-size:13px !important; } }

/* Tarjetas más compactas: sin alto mínimo de 230 px, menos relleno y cifras un poco más chicas (siguen grandes). */
html body:not(.modo-general) #app-shell #content .in-tablero { gap:16px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .section.in-tarjeta { min-height:0 !important; padding:18px 22px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-cab { margin-bottom:12px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-rejilla { row-gap:16px !important; column-gap:18px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-cifra strong { font-size:26px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-rejilla.tres .in-cifra strong { font-size:22px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-nivel b { font-size:26px !important; }
html body:not(.modo-general) #app-shell #content .in-tablero .in-tarjeta > .in-pie { padding-top:12px; gap:6px; }
html body:not(.modo-general) #app-shell #content .in-semaforo { padding:4px 10px !important; }