/*
 * Listas de actividades y entregables de la página del objetivo (App\Livewire\Objetivos\ActividadesEntregables, P2.12).
 * Hoja propia registrada con FilamentAsset (AppServiceProvider), como modificaciones.css: el CSS compilado de Filament no
 * trae las clases de Tailwind necesarias. Usa las variables de color del panel y tiene variantes de modo oscuro.
 * Todas las clases llevan el prefijo cron-.
 */

.cron { display: flex; flex-direction: column; gap: .75rem; }
.cron-titulo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

.cron-vacio,
.cron-resumen { margin: 0; font-size: .8125rem; color: rgb(var(--gray-500)); }

.cron-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.45; color: rgb(var(--gray-950)); }
.cron-tabla th,
.cron-tabla td { padding: .5rem .625rem; text-align: left; vertical-align: top; border-top: 1px solid rgb(var(--gray-200)); }
.cron-tabla thead th { border-top: 0; padding-top: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.cron-tabla tbody tr:hover { background: rgba(var(--gray-500), .04); }

.cron-col-num { width: 2.5rem; text-align: right !important; font-variant-numeric: tabular-nums; color: rgb(var(--gray-500)); }
.cron-col-fecha { width: 7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cron-col-acciones { width: 1%; white-space: nowrap; }
.cron-desc { overflow-wrap: anywhere; white-space: pre-line; }
.cron-acciones { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Modo oscuro */
.dark .cron-tabla { color: rgb(var(--gray-100)); }
.dark .cron-tabla th,
.dark .cron-tabla td { border-top-color: rgba(255, 255, 255, .1); }
.dark .cron-tabla thead th { border-top: 0; color: rgb(var(--gray-400)); }
.dark .cron-tabla tbody tr:hover { background: rgba(255, 255, 255, .03); }
.dark .cron-vacio,
.dark .cron-resumen,
.dark .cron-col-num { color: rgb(var(--gray-400)); }

/* Pantallas angostas: cada fila se apila con sus etiquetas */
@media (max-width: 640px) {
    .cron-tabla, .cron-tabla tbody, .cron-tabla tr, .cron-tabla td { display: block; width: 100%; }
    .cron-tabla thead { display: none; }
    .cron-tabla tr { border-top: 1px solid rgb(var(--gray-200)); padding: .375rem 0; }
    .dark .cron-tabla tr { border-top-color: rgba(255, 255, 255, .1); }
    .cron-tabla td { border-top: 0; padding: .125rem 0; text-align: left !important; }
    .cron-col-num, .cron-col-fecha, .cron-col-acciones { width: auto; }
    .cron-tabla td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; font-size: .6875rem; text-transform: uppercase; color: rgb(var(--gray-500)); }
    .cron-acciones { justify-content: flex-start; padding-top: .25rem; }
}

/* ---------- Página "Cronograma y avance" (docs/CRONOGRAMA.md); clases crg- ---------- */
.crg { display: flex; flex-direction: column; gap: 1.25rem; }
.crg-filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.crg-campo { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 500; color: rgb(var(--gray-600)); min-width: 12rem; }
.crg-crece { flex: 1 1 16rem; }
/* Los selects y la búsqueda son x-filament::input.*; aquí solo el ancho del selector de la carga mensual */
.crg-select-sm { min-width: 9.5rem; }
.crg-nota { margin: 0; font-size: .8rem; color: rgb(var(--gray-500)); }
.crg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .75rem; }
.crg-kpi { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid rgba(var(--gray-950), .06); }
.crg-kpi b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: rgb(var(--gray-950)); }
.crg-kpi-t { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--gray-500)); }
.crg-kpi-s { font-size: .8rem; color: rgb(var(--gray-600)); }
.crg-barra { height: .35rem; border-radius: 999px; background: rgba(var(--gray-500), .15); overflow: hidden; }
.crg-barra i { display: block; height: 100%; background: rgb(var(--primary-500)); border-radius: inherit; }
.crg-chip { align-self: flex-start; display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-700)); }
.crg-ok { background: rgba(var(--success-500), .14); color: rgb(var(--success-700)); }
.crg-mal { background: rgba(var(--danger-500), .14); color: rgb(var(--danger-700)); }
.crg-aviso { background: rgba(var(--warning-500), .16); color: rgb(var(--warning-700)); }
.crg-botones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.crg-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .75rem; color: rgb(var(--gray-600)); }
.crg-leyenda li { display: inline-flex; align-items: center; gap: .35rem; }
.crg-leyenda i { width: .8rem; height: .55rem; border-radius: .15rem; display: inline-block; }
.crg-leyenda i.crg-borde { background: transparent; border: 2px solid #dc2626; }
.crg-leyenda i.crg-rombo { width: .6rem; height: .6rem; transform: rotate(45deg); border-radius: 0; }
.crg-grafica { width: 100%; min-width: 0; }
.crg-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.25rem; }
.crg-venc { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.crg-venc-col ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .82rem; }
.crg-venc-col li { display: flex; flex-direction: column; gap: .05rem; min-width: 0; overflow-wrap: anywhere; }
.crg-venc-u { color: rgb(var(--gray-600)); }
.crg-venc-n { color: rgb(var(--gray-500)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crg-venc-t { margin: 0; font-weight: 600; font-size: .9rem; display: flex; gap: .4rem; align-items: center; }
.crg-venc-f { font-variant-numeric: tabular-nums; font-size: .75rem; color: rgb(var(--gray-500)); }
.crg-tabla-wrap { overflow-x: auto; margin-top: .75rem; }
.crg-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 52rem; }
.crg-tabla th, .crg-tabla td { padding: .45rem .6rem; text-align: left; vertical-align: top; border-top: 1px solid rgb(var(--gray-200)); }
.crg-tabla thead th { border-top: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--gray-500)); white-space: nowrap; }
.crg-tabla thead button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.crg-tabla thead button:focus-visible { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.crg-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.crg-tabla td:first-child { white-space: nowrap; }
.crg-desc { max-width: 28rem; }
.crg-punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; }
.crg-fila-atrasada td { background: rgba(var(--danger-500), .06); }
.crg-paginas { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.dark .crg-campo, .dark .crg-kpi-s, .dark .crg-leyenda { color: rgb(var(--gray-400)); }
.dark .crg-venc-u { color: rgb(var(--gray-400)); }
.dark .crg-kpi { background: rgb(var(--gray-900)); border-color: rgba(255,255,255,.08); }
.dark .crg-kpi b { color: rgb(var(--gray-100)); }
.dark .crg-chip { color: rgb(var(--gray-300)); }
.dark .crg-ok { color: rgb(var(--success-400)); }
.dark .crg-mal { color: rgb(var(--danger-400)); }
.dark .crg-aviso { color: rgb(var(--warning-400)); }
.dark .crg-tabla th, .dark .crg-tabla td { border-top-color: rgba(255,255,255,.08); }
.dark .crg-tabla thead th { border-top: 0; }