/* Cartelera (web): tarjetas del objetivo y gráficos SVG. Usa los colores de la marca de estilo.css. */
.car-periodo { gap: 8px; }
.car-periodo .form-control { flex: 0 1 280px; }
.car-no { opacity: .35; pointer-events: none; }

.car-principal { display: grid; grid-template-columns: minmax(280px, 1.1fr) 2fr; gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 900px) { .car-principal { grid-template-columns: 1fr; } }
.car-principal .seccion { margin-bottom: 0; }
.car-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.car-parte { border-top: 4px solid var(--car-color, var(--azul)); }
.car-cifra { font: 800 clamp(40px, 5vw, 76px)/1 var(--f-marca, sans-serif); color: var(--azul); font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.car-cifra small { font-size: .42em; color: var(--texto-2); font-weight: 600; }
.car-cifra--chica { font-size: clamp(26px, 2.4vw, 38px); margin-bottom: 4px; }
.car-total--atras .car-cifra { color: var(--rojo); }
.car-total--ok .car-cifra { color: var(--verde); }
.car-avance { height: 12px; background: #e8e6f8; border-radius: 6px; position: relative; overflow: visible; margin-bottom: 12px; }
.car-avance i { display: block; height: 100%; border-radius: 6px; background: var(--azul); }
.car-total--ok .car-avance i { background: var(--verde); }
.car-total--atras .car-avance i { background: var(--rojo); }
.car-avance b { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--texto); }
.car-datos { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 15px; }
.car-datos dt { color: var(--texto-2); }
.car-datos dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.car-grafico { overflow: hidden; }
.car-svg { display: block; width: 100%; max-width: 1180px; height: auto; overflow: visible; margin: 0 auto; }
.car-svg--barras { max-width: 520px; margin: 0; }
.car-svg text { font-family: var(--f-texto, sans-serif); }
.car-eje { font-size: 12px; fill: #5c5a6b; }
.car-eje--hoy { fill: #10069F; font-weight: 700; }
.car-eje--fila { font-size: 13px; fill: #1c1b29; }
.car-rotulo { font-size: 13px; fill: #5c5a6b; font-weight: 600; }
.car-rotulo--suave { fill: #10069F; font-weight: 500; }
.car-rotulo--fuerte { fill: #10069F; font-weight: 800; font-size: 14px; }
.car-valor { font-size: 12.5px; fill: #1c1b29; font-weight: 700; }
.car-valor--mal, .car-rotulo--mal { fill: #d6361c; }
.car-hover { fill: transparent; }
.car-hover:hover { fill: rgba(16, 6, 159, .06); }
.car-svg path:hover, .car-svg rect[rx]:hover { opacity: .8; }
.car-leyenda { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--texto); }
.car-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.car-tabla { margin-top: 8px; }
.car-tabla summary { cursor: pointer; color: var(--azul); font-weight: 600; font-size: 14px; }
.car-tabla .tabla-scroll { margin-top: 8px; max-height: 50vh; }

.car-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.car-mal { color: var(--rojo) !important; }
.car-cerca { color: #c25e00 !important; }
.car-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.car-tres .seccion { margin-bottom: 0; }
@media (max-width: 1100px) { .car-tres { grid-template-columns: 1fr; } }

.car-gantt__barra { width: 40%; white-space: nowrap; }
.car-gantt__dias { display: inline-block; height: 14px; border-radius: 4px; background: var(--azul); vertical-align: middle; margin-right: 8px; }
.car-gantt tr.cerca .car-gantt__dias { background: #e8701a; }
.car-gantt tr.vencida .car-gantt__dias { background: var(--rojo); }
.car-gantt tr.vencida td b { color: var(--rojo); }