/*
 * Pestaña "Resumen" del panel de control de un proyecto (App\Livewire\Proyectos\ResumenProyecto, docs/RESUMEN_PROYECTO.md).
 * Hoja propia registrada con FilamentAsset (el CSS compilado de Filament no trae las clases de Tailwind necesarias).
 * Usa las variables de color del panel; variantes de modo oscuro al final. Todas las clases llevan el prefijo rsm-.
 */
.rsm { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.rsm-cargando { display: flex; align-items: center; gap: .6rem; padding: 2rem 1rem; color: rgb(var(--gray-500)); font-size: .9rem; }
.rsm-tarjeta { background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid rgba(var(--gray-950), .06); }
.rsm-tenue { color: rgb(var(--gray-500)); }
.rsm-rojo { color: rgb(var(--danger-600)); }
.rsm-vacio { margin: 0; font-size: .875rem; color: rgb(var(--gray-500)); }
.rsm-subtitulo { margin: .75rem 0 .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.rsm-subtitulo:first-child { margin-top: 0; }
.rsm-chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-700)); white-space: nowrap; }
.rsm-chip-primario { background: rgba(var(--primary-500), .15); color: rgb(var(--primary-700)); margin-left: .35rem; }
.rsm-grafica { width: 100%; min-width: 0; }

/* Rejillas */
.rsm-rejilla { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .rsm-rejilla-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
    .rsm-rejilla-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1. Cabecera: estado, flujo, datos clave y plazo */
.rsm-cabecera { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.rsm-cab-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.rsm-cab-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.rsm-cab-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.rsm-aviso { margin: 0; font-size: .85rem; padding: .4rem .75rem; border-radius: .5rem; background: rgba(var(--warning-500), .12); color: rgb(var(--warning-800)); }

.rsm-flujo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); counter-reset: etapa; }
.rsm-etapa { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 0 .25rem; font-size: .75rem; color: rgb(var(--gray-500)); }
.rsm-etapa::before { content: ""; position: absolute; top: .45rem; left: -50%; width: 100%; height: 2px; background: rgb(var(--gray-200)); z-index: 0; }
.rsm-etapa:first-child::before { display: none; }
.rsm-etapa-punto { position: relative; z-index: 1; width: .95rem; height: .95rem; border-radius: 50%; background: #fff; border: 2px solid rgb(var(--gray-300)); }
.rsm-etapa-hecha { color: rgb(var(--gray-700)); }
.rsm-etapa-hecha::before, .rsm-etapa-actual::before { background: rgb(var(--primary-500)); }
.rsm-etapa-hecha .rsm-etapa-punto { background: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); }
.rsm-etapa-actual { color: rgb(var(--primary-700)); font-weight: 600; }
.rsm-etapa-actual .rsm-etapa-punto { border-color: rgb(var(--primary-500)); box-shadow: 0 0 0 4px rgba(var(--primary-500), .2); background: rgb(var(--primary-500)); }
.rsm-etapa-nombre { line-height: 1.2; }
.rsm-etapa-fecha { font-size: .68rem; font-variant-numeric: tabular-nums; color: rgb(var(--gray-400)); min-height: 1em; }

.rsm-datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem 1.25rem; }
.rsm-datos dt, .rsm-ficha dt { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.rsm-datos dd, .rsm-ficha dd { margin: .1rem 0 0; font-size: .875rem; color: rgb(var(--gray-950)); overflow-wrap: anywhere; }
.rsm-ficha dd small { display: block; font-size: .75rem; color: rgb(var(--gray-500)); }

.rsm-plazo { display: flex; flex-direction: column; gap: .35rem; }
.rsm-plazo-textos { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; font-size: .8rem; color: rgb(var(--gray-600)); }
.rsm-centro { text-align: center; }
.rsm-derecha { text-align: right; }
.rsm-plazo-barra { height: .5rem; border-radius: 999px; background: rgba(var(--gray-500), .15); overflow: hidden; }
.rsm-plazo-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--primary-500), .55), rgb(var(--primary-500))); }

/* 2. Semáforos */
.rsm-salud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.rsm-indicador { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; border-top: 4px solid rgb(var(--gray-300)); }
.rsm-indicador header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.rsm-indicador-t { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.rsm-indicador-v { font-size: 1.55rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: rgb(var(--gray-950)); }
.rsm-indicador-d { font-size: .8rem; color: rgb(var(--gray-700)); }
.rsm-indicador-x { font-size: .75rem; color: rgb(var(--gray-500)); }
.rsm-brecha { font-size: .75rem; font-weight: 600; color: rgb(var(--gray-600)); }
.rsm-borde-verde { border-top-color: rgb(var(--success-500)); }
.rsm-borde-amarillo { border-top-color: rgb(var(--warning-500)); }
.rsm-borde-rojo { border-top-color: rgb(var(--danger-500)); }
.rsm-semaforo { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; white-space: nowrap; padding: .05rem .45rem; border-radius: 999px; }
.rsm-semaforo i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.rsm-sem-verde { background: rgba(var(--success-500), .14); color: rgb(var(--success-700)); }
.rsm-sem-amarillo { background: rgba(var(--warning-500), .18); color: rgb(var(--warning-700)); }
.rsm-sem-rojo { background: rgba(var(--danger-500), .14); color: rgb(var(--danger-700)); }
.rsm-sem-gris { background: rgba(var(--gray-500), .12); color: rgb(var(--gray-600)); }

.rsm-medidor { position: relative; height: .45rem; border-radius: 999px; background: rgba(var(--gray-500), .15); margin: .2rem 0; }
.rsm-medidor > i { display: block; height: 100%; border-radius: inherit; }
.rsm-medidor-sm { height: .35rem; width: 100%; max-width: 9rem; display: inline-block; vertical-align: middle; margin: 0; }
.rsm-medidor-marca { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; background: rgb(var(--gray-700)); transform: translateX(-1px); }
.rsm-fondo-verde { background: rgb(var(--success-500)); }
.rsm-fondo-amarillo { background: rgb(var(--warning-500)); }
.rsm-fondo-rojo { background: rgb(var(--danger-500)); }
.rsm-fondo-gris, .rsm-fondo-financiero { background: #2563eb; }

/* 3. Matriz de riesgos */
.rsm-matriz { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; }
.rsm-matriz-fila { display: grid; grid-template-columns: 5.2rem repeat(5, minmax(0, 1fr)); gap: 3px; }
.rsm-matriz-eje { display: flex; align-items: center; color: rgb(var(--gray-500)); line-height: 1.1; overflow-wrap: anywhere; }
.rsm-matriz-pie .rsm-matriz-eje { justify-content: center; text-align: center; padding-top: .2rem; overflow-wrap: normal; white-space: nowrap; overflow: hidden; }
.rsm-celda { display: flex; align-items: center; justify-content: center; min-height: 2rem; border-radius: .3rem; font-size: .85rem; font-weight: 700; color: rgba(0,0,0,.75); cursor: default; }
.rsm-celda-mat { box-shadow: inset 0 0 0 3px #7f1d1d; }
.rsm-riesgo-bajo { background: #bbf7d0; }
.rsm-riesgo-moderado { background: #fef08a; }
.rsm-riesgo-alto { background: #fdba74; }
.rsm-riesgo-extremo { background: #fca5a5; }
.rsm-chip.rsm-riesgo-bajo, .rsm-chip.rsm-riesgo-moderado, .rsm-chip.rsm-riesgo-alto, .rsm-chip.rsm-riesgo-extremo { color: rgba(0,0,0,.75); }
.rsm-matriz-titulos { display: flex; justify-content: space-between; margin: .2rem 0 0; color: rgb(var(--gray-500)); }
.rsm-lista-riesgos { margin-top: .75rem !important; }
.rsm-lista-riesgos li { display: flex; gap: .5rem; align-items: baseline; }
.rsm-recorte-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Listas */
.rsm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .84rem; }
.rsm-lista-puntos { list-style: disc; padding-left: 1.2rem; }
.rsm-fila-lista { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.rsm-evento { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; }
.rsm-evento-f { font-variant-numeric: tabular-nums; font-size: .78rem; color: rgb(var(--gray-500)); }
.rsm-evento-t { min-width: 0; }
.rsm-recorte { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: rgb(var(--gray-500)); font-size: .8rem; }

/* Línea de tiempo */
.rsm-linea { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid rgb(var(--gray-200)); display: flex; flex-direction: column; gap: .6rem; font-size: .84rem; }
.rsm-linea li { position: relative; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; }
.rsm-linea li::before { content: ""; position: absolute; left: calc(-.9rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--gray-400)); border: 2px solid #fff; }
.rsm-linea-estado::before { background: rgb(var(--primary-500)) !important; }
.rsm-linea-modificacion::before { background: #9333ea !important; }
.rsm-linea-informe::before { background: #16a34a !important; }
.rsm-linea-plan::before { background: #2563eb !important; }

/* 4. Tabla de unidades */
/* width 0 + min-width 100 %: la tabla ancha no agranda la página en pantallas angostas (se desplaza dentro de su caja) */
.rsm-tabla-wrap { overflow-x: auto; width: 0; min-width: 100%; }
.rsm-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 56rem; }
.rsm-tabla th, .rsm-tabla td { padding: .55rem .6rem; text-align: left; vertical-align: middle; border-top: 1px solid rgb(var(--gray-200)); }
.rsm-tabla thead th { border-top: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--gray-500)); white-space: nowrap; }
.rsm-tabla tbody th { font-weight: 600; }
.rsm-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsm-mia td, .rsm-mia th { background: rgba(var(--primary-500), .07); }
.rsm-mini { display: block; font-size: .72rem; color: rgb(var(--gray-500)); white-space: nowrap; }
.rsm-doble { display: flex; flex-direction: column; gap: 2px; width: 9rem; }
.rsm-doble-barra { height: .3rem; border-radius: 999px; background: rgba(var(--gray-500), .13); overflow: hidden; }
.rsm-doble-barra i { display: block; height: 100%; border-radius: inherit; }
.rsm-plan { background: #d97706; }
.rsm-rep { background: #16a34a; }
.rsm-leyenda-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .6rem 0 0; font-size: .72rem; color: rgb(var(--gray-500)); }
.rsm-leyenda-mini i { display: inline-block; width: .8rem; height: .35rem; border-radius: 999px; margin-right: -.45rem; }
.rsm-medidor-marca-ley { display: inline-block; width: 2px; height: .8rem; background: rgb(var(--gray-700)); margin-right: -.45rem; }

/* 5. Objetivos */
.rsm-objetivos { display: flex; flex-direction: column; gap: .4rem; }
.rsm-objetivo { border: 1px solid rgb(var(--gray-200)); border-radius: .5rem; }
.rsm-objetivo summary { cursor: pointer; padding: .5rem .7rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .5rem; list-style: none; }
.rsm-objetivo summary::-webkit-details-marker { display: none; }
.rsm-objetivo summary::before { content: "▶"; font-size: .6rem; color: rgb(var(--gray-400)); grid-row: span 2; padding-top: .3rem; transition: transform .15s; }
.rsm-objetivo[open] summary::before { transform: rotate(90deg); }
.rsm-objetivo-cod { font-weight: 600; font-size: .84rem; }
.rsm-objetivo-nom { grid-column: 2; font-size: .8rem; color: rgb(var(--gray-600)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rsm-objetivo[open] .rsm-objetivo-nom { -webkit-line-clamp: unset; }
.rsm-objetivo-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .72rem; color: rgb(var(--gray-500)); }
.rsm-objetivo .rsm-lista { padding: .2rem .7rem .7rem 1.6rem; }
.rsm-ind { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.rsm-ind-cod { font-size: .74rem; font-variant-numeric: tabular-nums; color: rgb(var(--gray-500)); }
.rsm-ind-nom small { display: block; font-size: .72rem; color: rgb(var(--gray-500)); }
.rsm-ind-val { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsm-ind-val .rsm-medidor-sm { width: 4rem; }

/* 9. Ficha */
.rsm-ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem 1.5rem; }
.rsm-ficha-ancho { grid-column: 1 / -1; }

/* Pantallas angostas */
@media (max-width: 640px) {
    .rsm-flujo { grid-template-columns: 1fr; gap: .35rem; }
    .rsm-etapa { flex-direction: row; text-align: left; gap: .5rem; }
    .rsm-etapa::before { display: none; }
    .rsm-plazo-textos { grid-template-columns: 1fr; }
    .rsm-centro, .rsm-derecha { text-align: left; }
    .rsm-matriz-fila { grid-template-columns: 3.8rem repeat(5, minmax(0, 1fr)); }
}

/* Modo oscuro */
.dark .rsm-tarjeta { background: rgb(var(--gray-900)); border-color: rgba(255,255,255,.08); }
.dark .rsm-datos dd, .dark .rsm-ficha dd, .dark .rsm-indicador-v { color: rgb(var(--gray-100)); }
.dark .rsm-indicador-d { color: rgb(var(--gray-300)); }
.dark .rsm-chip { color: rgb(var(--gray-300)); }
.dark .rsm-chip-primario { color: rgb(var(--primary-300)); }
.dark .rsm-sem-verde { color: rgb(var(--success-400)); }
.dark .rsm-sem-amarillo { color: rgb(var(--warning-400)); }
.dark .rsm-sem-rojo { color: rgb(var(--danger-400)); }
.dark .rsm-etapa-punto { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-600)); }
.dark .rsm-etapa::before { background: rgb(var(--gray-700)); }
.dark .rsm-etapa-hecha::before, .dark .rsm-etapa-actual::before { background: rgb(var(--primary-500)); }
.dark .rsm-etapa-hecha .rsm-etapa-punto, .dark .rsm-etapa-actual .rsm-etapa-punto { background: rgb(var(--primary-500)); border-color: rgb(var(--primary-500)); }
.dark .rsm-etapa-hecha { color: rgb(var(--gray-300)); }
.dark .rsm-etapa-actual { color: rgb(var(--primary-400)); }
.dark .rsm-tabla th, .dark .rsm-tabla td { border-top-color: rgba(255,255,255,.08); }
.dark .rsm-tabla thead th { border-top: 0; }
.dark .rsm-objetivo { border-color: rgba(255,255,255,.1); }
.dark .rsm-objetivo-nom { color: rgb(var(--gray-400)); }
.dark .rsm-linea { border-left-color: rgba(255,255,255,.12); }
.dark .rsm-linea li::before { border-color: rgb(var(--gray-900)); }
.dark .rsm-medidor-marca, .dark .rsm-medidor-marca-ley { background: rgb(var(--gray-200)); }
.dark .rsm-aviso { color: rgb(var(--warning-300)); }
.dark .rsm-chip.rsm-riesgo-bajo, .dark .rsm-chip.rsm-riesgo-moderado, .dark .rsm-chip.rsm-riesgo-alto, .dark .rsm-chip.rsm-riesgo-extremo { color: rgba(0,0,0,.8); }