/*
 * Pestaña "Evolución de los informes" del panel de control (App\Livewire\InformesAvance\EvolucionAvance,
 * docs/INFORMES_AVANCE.md §11.2.1). Hoja propia registrada con FilamentAsset (el CSS compilado de Filament no trae las
 * clases de Tailwind necesarias). Usa las variables de color del panel; modo oscuro al final. Prefijo evo-.
 *
 * Colores con significado: real = verde y esperado = ámbar (como "Resumen"); semáforos y cambios llevan siempre icono y
 * texto, nunca solo color.
 */
.evo { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; --evo-real: #16a34a; --evo-esperado: #d97706; }
.evo-cuerpo { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; transition: opacity .15s; }
.evo-atenuado { opacity: .55; pointer-events: none; }
.evo-tarjeta { background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid rgba(var(--gray-950), .06); }
.evo-tenue { color: rgb(var(--gray-500)); font-size: .8rem; }
.evo-vacio { margin: 0; padding: 1rem; font-size: .875rem; color: rgb(var(--gray-500)); }
.evo-enlace { color: rgb(var(--primary-600)); font-size: .8rem; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.evo-enlace:hover { text-decoration: underline; }
.evo-chip { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-700)); vertical-align: middle; }
.evo-seccion { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.evo-seccion h3 { margin: 0; font-size: .95rem; font-weight: 600; color: rgb(var(--gray-950)); }
.evo-seccion header p { margin: .15rem 0 0; }
.evo-grafica { width: 100%; min-width: 0; min-height: 8rem; }
.evo-desplazable { overflow-x: auto; min-width: 0; }
/* Filas filtradas o plegadas y el aviso sin resultados (los maneja Alpine con x-bind:class) */
.evo .evo-oculto { display: none !important; }

/* 1. Filtros */
.evo-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
.evo-campo { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; color: rgb(var(--gray-600)); }
.evo-campo select { min-width: 9rem; max-width: 22rem; padding: .4rem 2rem .4rem .65rem; border-radius: .5rem; border: 1px solid rgb(var(--gray-300)); background-color: #fff; font-size: .875rem; font-weight: 400; color: rgb(var(--gray-950)); }
.evo-campo-fijo { margin: 0; font-size: .875rem; }
.evo-campo-fijo span { font-size: .75rem; font-weight: 600; color: rgb(var(--gray-600)); margin-right: .35rem; }
.evo-flecha { padding-bottom: .45rem; color: rgb(var(--gray-500)); }
.evo-cargando { align-items: center; gap: .35rem; padding-bottom: .45rem; font-size: .8rem; color: rgb(var(--gray-500)); }

/* 2. Línea de tiempo de los informes */
.evo-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: 0; overflow-x: auto; }
.evo-hito-linea { position: relative; display: flex; gap: .6rem; padding: .25rem .75rem .5rem 0; }
.evo-hito-linea::before { content: ""; position: absolute; top: .55rem; left: 1rem; right: 0; height: 2px; background: rgb(var(--gray-200)); }
.evo-hito-linea:last-child::before { display: none; }
.evo-punto { position: relative; z-index: 1; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(var(--gray-300)); background: rgb(var(--gray-400)); }
.evo-punto.evo-tono-bien { background: #0ca30c; }
.evo-punto.evo-tono-atencion { background: #fab219; }
.evo-punto.evo-tono-critico { background: #d03b3b; }
.evo-linea-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .6rem; border-radius: .5rem; }
.evo-linea-texto p { margin: 0; }
.evo-rol-base .evo-linea-texto, .evo-rol-comparado .evo-linea-texto { background: rgba(var(--primary-500), .07); }
.evo-linea-periodo { font-weight: 600; font-size: .95rem; color: rgb(var(--gray-950)); }
.evo-etiqueta-rol { margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; font-size: .68rem; font-weight: 600; background: rgba(var(--primary-500), .18); color: rgb(var(--primary-700)); }
.evo-estado { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 500; }
.evo-estado.evo-tono-bien { color: #067a06; }
.evo-estado.evo-tono-atencion { color: rgb(var(--warning-700)); }
.evo-estado.evo-tono-critico { color: rgb(var(--danger-600)); }
.evo-estado.evo-tono-proceso { color: rgb(var(--gray-600)); }

.evo-aviso { margin: 0; display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .85rem; border-radius: .5rem; font-size: .85rem; background: rgba(var(--info-500, 59 130 246), .1); color: rgb(var(--gray-800)); }

/* 3. Indicadores clave */
.evo-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.evo-kpi { padding: .85rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.evo-kpi-ancho { grid-column: span 2; }
@media (max-width: 640px) { .evo-kpi-ancho { grid-column: auto; } }
.evo-kpi p { margin: 0; }
.evo-kpi-titulo { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.evo-kpi-valor { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: rgb(var(--gray-950)); }
.evo-kpi-nota { font-size: .82rem; color: rgb(var(--gray-600)); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.evo-cambios { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.evo-cambios button { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: .5rem; border: 1px solid rgb(var(--gray-200)); background: transparent; font-size: .82rem; color: rgb(var(--gray-700)); cursor: pointer; }
.evo-cambios button[aria-pressed="true"] { border-color: rgb(var(--primary-500)); background: rgba(var(--primary-500), .08); }

.evo-delta { font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--gray-600)); }
.evo-sube { color: #067a06; }
.evo-baja { color: rgb(var(--danger-600)); }
.evo-semaforo { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.evo-sem-verde { color: #067a06; }
.evo-sem-amarillo { color: rgb(var(--warning-700)); }
.evo-sem-rojo { color: rgb(var(--danger-600)); }

/* 4. Rejillas de gráficas */
.evo-rejilla { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .evo-rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.evo-tabla-alterna summary { cursor: pointer; font-size: .8rem; color: rgb(var(--primary-600)); width: fit-content; }
.evo-tabla { width: 100%; margin-top: .5rem; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.evo-tabla th, .evo-tabla td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid rgb(var(--gray-100)); vertical-align: top; }
.evo-tabla th { font-weight: 600; color: rgb(var(--gray-600)); }
.evo-fila-elegida td { background: rgba(var(--primary-500), .07); }

/* 5. Matriz de elementos */
.evo-matriz-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.evo-matriz-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.evo-matriz-herramientas input[type="search"] { padding: .35rem .6rem; border-radius: .5rem; border: 1px solid rgb(var(--gray-300)); font-size: .85rem; min-width: 12rem; background: #fff; }
.evo-segmentos { display: inline-flex; flex-wrap: wrap; border: 1px solid rgb(var(--gray-200)); border-radius: .5rem; overflow: hidden; }
.evo-segmentos button { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; font-size: .8rem; background: transparent; border: 0; border-right: 1px solid rgb(var(--gray-200)); color: rgb(var(--gray-700)); cursor: pointer; }
.evo-segmentos button:last-child { border-right: 0; }
.evo-segmentos button[aria-pressed="true"] { background: rgb(var(--primary-600)); color: #fff; }

.evo-matriz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.evo-matriz th, .evo-matriz td { padding: .5rem .6rem; border-bottom: 1px solid rgb(var(--gray-100)); vertical-align: top; text-align: left; }
.evo-matriz thead th { position: sticky; top: 0; z-index: 2; background: #fff; font-size: .78rem; font-weight: 600; color: rgb(var(--gray-600)); white-space: nowrap; }
.evo-matriz thead th .evo-tenue { display: block; font-weight: 400; font-size: .72rem; }
.evo-col-elemento { min-width: 18rem; max-width: 30rem; font-weight: 400; }
.evo-col-periodo, .evo-celda { min-width: 9rem; }
.evo-col-comparado { background: rgba(var(--primary-500), .05); }
.evo-matriz thead th.evo-col-comparado { background: rgb(255 251 245); }
.evo-nivel-0 > th, .evo-nivel-0 > td { background-color: rgba(var(--gray-500), .05); }
.evo-nivel-0 .evo-codigo { font-weight: 700; }
.evo-elemento { display: flex; gap: .35rem; align-items: flex-start; }
.evo-plegar { flex: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: .35rem; background: transparent; color: rgb(var(--gray-500)); cursor: pointer; }
.evo-plegar:hover { background: rgba(var(--gray-500), .12); }
.evo-plegar-espacio { flex: none; width: 1.5rem; }
.evo-codigo { font-weight: 600; color: rgb(var(--gray-950)); text-decoration: none; }
.evo-codigo:hover { color: rgb(var(--primary-600)); text-decoration: underline; }
.evo-nombre { margin: .1rem 0 0; color: rgb(var(--gray-600)); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.evo-medidor { position: relative; height: .5rem; border-radius: 999px; background: rgb(var(--gray-200)); margin: .3rem 0 .25rem; }
.evo-medidor-relleno { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--evo-real); }
.evo-medidor-esperado { position: absolute; top: -.2rem; width: 2px; height: .9rem; margin-left: -1px; background: var(--evo-esperado); box-shadow: 0 0 0 1px #fff; }
.evo-valor { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: rgb(var(--gray-900)); white-space: nowrap; }
.evo-arrastre { margin-left: .2rem; font-weight: 400; color: rgb(var(--gray-500)); cursor: help; }
.evo-estado-hito { display: inline-block; margin-top: .2rem; padding: 0 .4rem; border-radius: .35rem; font-size: .7rem; line-height: 1.5; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-700)); }
.evo-eh-1 { background: rgba(12, 163, 12, .14); color: #067a06; }
.evo-eh-2 { background: rgba(250, 178, 25, .2); color: rgb(var(--warning-800)); }
.evo-eh-3 { background: rgba(42, 120, 214, .14); color: #1c5cab; }
.evo-eh-4 { background: rgba(236, 131, 90, .2); color: #a3431c; }
.evo-eh-5 { background: rgba(208, 59, 59, .14); color: rgb(var(--danger-700)); }
.evo-celda-cambio { white-space: nowrap; }
.evo-sin-salto { display: block; white-space: nowrap; }
.evo-celda-cambio .evo-delta { display: block; }
.evo-insignia { display: inline-flex; align-items: center; gap: .2rem; margin-top: .2rem; padding: 0 .4rem; border-radius: .35rem; font-size: .72rem; font-weight: 600; line-height: 1.6; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-700)); }
.evo-insignia.evo-cambio-completado { background: rgba(12, 163, 12, .14); color: #067a06; }
.evo-insignia.evo-cambio-avanzo { background: rgba(22, 163, 74, .1); color: #067a06; }
.evo-insignia.evo-cambio-bajo { background: rgba(208, 59, 59, .12); color: rgb(var(--danger-700)); }
.evo-insignia.evo-cambio-nuevo { background: rgba(42, 120, 214, .12); color: #1c5cab; }

/* Modo oscuro */
.dark .evo-tarjeta { background: rgb(var(--gray-900)); border-color: rgba(255,255,255,.1); }
.dark .evo-seccion h3, .dark .evo-kpi-valor, .dark .evo-linea-periodo, .dark .evo-codigo, .dark .evo-valor { color: #fff; }
.dark .evo-campo select, .dark .evo-matriz-herramientas input[type="search"] { background-color: rgb(var(--gray-800)); border-color: rgb(var(--gray-700)); color: #fff; }
.dark .evo-matriz thead th { background: rgb(var(--gray-900)); }
.dark .evo-matriz thead th.evo-col-comparado { background: rgb(36 30 24); }
.dark .evo-matriz th, .dark .evo-matriz td, .dark .evo-tabla th, .dark .evo-tabla td { border-color: rgba(255,255,255,.06); }
.dark .evo-medidor { background: rgb(var(--gray-700)); }
.dark .evo-medidor-esperado { box-shadow: 0 0 0 1px rgb(var(--gray-900)); }
.dark .evo-punto { border-color: rgb(var(--gray-900)); }
.dark .evo-hito-linea::before { background: rgb(var(--gray-700)); }
.dark .evo-nombre, .dark .evo-kpi-nota { color: rgb(var(--gray-400)); }
.dark .evo-aviso { color: rgb(var(--gray-200)); }
.dark .evo-sube, .dark .evo-sem-verde, .dark .evo-estado.evo-tono-bien, .dark .evo-insignia.evo-cambio-completado, .dark .evo-insignia.evo-cambio-avanzo, .dark .evo-eh-1 { color: #4ade80; }
.dark .evo-baja, .dark .evo-sem-rojo, .dark .evo-estado.evo-tono-critico, .dark .evo-insignia.evo-cambio-bajo, .dark .evo-eh-5 { color: #f87171; }
.dark .evo-sem-amarillo, .dark .evo-estado.evo-tono-atencion, .dark .evo-eh-2 { color: #fbbf24; }
.dark .evo-eh-3, .dark .evo-insignia.evo-cambio-nuevo { color: #93c5fd; }
.dark .evo-eh-4 { color: #fdba74; }
.dark .evo-chip, .dark .evo-estado-hito, .dark .evo-insignia { color: rgb(var(--gray-200)); }
.dark .evo-cambios button, .dark .evo-segmentos, .dark .evo-segmentos button { border-color: rgb(var(--gray-700)); color: rgb(var(--gray-200)); }