.encabezado {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 20px;
}
.encabezado h1 { margin-right: auto; }
.encabezado__sub { width: 100%; margin-top: -8px; color: var(--color-texto-suave); }
.migas { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12.5px; color: var(--color-texto-suave); }
.migas .icono { width: 14px; height: 14px; }

.tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio-grande);
    box-shadow: var(--sombra);
    padding: 20px;
}
.tarjeta + .tarjeta { margin-top: 18px; }
.tarjeta__cabecera {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: -4px 0 16px;
}
.tarjeta__cabecera h2 { margin-right: auto; }
.tarjeta--sin-relleno { padding: 0; overflow: hidden; }
.tarjeta--sin-relleno .tarjeta__cabecera { padding: 16px 20px 0; margin-bottom: 12px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; background: var(--color-superficie);
    border-radius: var(--radio-grande); box-shadow: var(--sombra);
}
.kpi__icono {
    display: grid; place-items: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--color-primario-claro); color: var(--color-primario);
}
.kpi__icono--info { background: var(--color-info-fondo); color: var(--color-info); }
.kpi__icono--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.kpi__icono--peligro { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.kpi__icono--morado { background: var(--color-morado-fondo); color: var(--color-morado); }
.kpi__icono .icono { width: 22px; height: 22px; }
.kpi__etiqueta { font-size: 12.5px; color: var(--color-texto-suave); }
.kpi__valor { font-size: 22px; font-weight: 600; color: var(--color-texto); line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi__detalle { font-size: 12px; color: var(--color-texto-tenue); }
.kpi--destacado { background: var(--color-primario); }
.kpi--destacado .kpi__etiqueta, .kpi--destacado .kpi__detalle { color: rgba(255, 255, 255, .82); }
.kpi--destacado .kpi__valor { color: #fff; }
.kpi--destacado .kpi__icono { background: rgba(255, 255, 255, .18); color: #fff; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 12px; color: var(--color-texto-suave); }
.datos dd { margin: 2px 0 0; color: var(--color-texto); font-weight: 500; overflow-wrap: anywhere; }
.datos dd.grande { font-size: 18px; font-weight: 600; }

.columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.columnas--mitad { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .columnas, .columnas--mitad { grid-template-columns: minmax(0, 1fr); } }

.lista-docs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.lista-docs li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio);
}
.lista-docs .icono { color: var(--color-primario); }
.lista-docs__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-docs__tipo { display: block; font-size: 12px; color: var(--color-texto-suave); }

.progreso { height: 8px; border-radius: 999px; background: var(--color-primario-claro); overflow: hidden; }
.progreso__barra { height: 100%; border-radius: 999px; background: var(--color-primario); }
/* Anchos en pasos de 5 % (sin style inline) */
.progreso__barra--p0 { width: 0%; }
.progreso__barra--p5 { width: 5%; }
.progreso__barra--p10 { width: 10%; }
.progreso__barra--p15 { width: 15%; }
.progreso__barra--p20 { width: 20%; }
.progreso__barra--p25 { width: 25%; }
.progreso__barra--p30 { width: 30%; }
.progreso__barra--p35 { width: 35%; }
.progreso__barra--p40 { width: 40%; }
.progreso__barra--p45 { width: 45%; }
.progreso__barra--p50 { width: 50%; }
.progreso__barra--p55 { width: 55%; }
.progreso__barra--p60 { width: 60%; }
.progreso__barra--p65 { width: 65%; }
.progreso__barra--p70 { width: 70%; }
.progreso__barra--p75 { width: 75%; }
.progreso__barra--p80 { width: 80%; }
.progreso__barra--p85 { width: 85%; }
.progreso__barra--p90 { width: 90%; }
.progreso__barra--p95 { width: 95%; }
.progreso__barra--p100 { width: 100%; }

.linea-tiempo { margin: 0; padding: 0; list-style: none; }
.linea-tiempo li { position: relative; padding: 0 0 16px 22px; }
.linea-tiempo li::before {
    content: ''; position: absolute; left: 4px; top: 6px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--color-primario);
}
.linea-tiempo li::after {
    content: ''; position: absolute; left: 8px; top: 18px; bottom: 0;
    width: 1px; background: var(--color-borde);
}
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo__titulo { font-weight: 500; color: var(--color-texto); }
.linea-tiempo__meta { font-size: 12px; color: var(--color-texto-suave); }
.linea-tiempo__comentario { font-size: 12.5px; color: var(--color-texto-suave); margin-top: 2px; }