/* ═══════════════════════════════════════════════════════
   MÓDULO DE TAREAS (plantilla común) — copia de apps/portfolio-ia/css/views/tareas.css
   Portado del prototipo. Colores por tokens; sin estilos inline
   (la CSP de prod descarta style=""): los valores dinámicos van por
   clase / el.style (JS) / data-* + DYNAMIC_CSS_VAR_MAP.
   ═══════════════════════════════════════════════════════ */
/* Colores de estado (pastel) compartidos por todas las vistas y tipologías.
   --sc = color de relleno pastel · --si = tinta legible sobre ese relleno.
   Deben COINCIDIR con GANTT_STATE_ARGB (Excel). */
.st-pend{--sc:var(--task-st-pend);--si:var(--task-st-pend-ink)}
.st-prog{--sc:var(--task-st-prog);--si:var(--task-st-prog-ink)}
.st-done{--sc:var(--task-st-done);--si:var(--task-st-done-ink)}
.st-block{--sc:var(--task-st-block);--si:var(--task-st-block-ink)}

/* Ocultar utilitario CSP-safe (sustituye a los style="display:none" inline).
   .tv-hidden: oculto permanente (!important). .tv-none: oculto conmutable por JS
   (classList.toggle) sin !important, para grupos del modal que se muestran/ocultan. */
/* KANBAN */
/* Icono de tipo de tarea (SSOT): glifo monocromo coloreado por tipo.
   Presente en todas las visualizaciones (Lista, Kanban, Cronograma, Calendario). */
/* Iconos de las vistas dentro de los toggles */
/* Toggle ocultar completadas */
/* Toggle solo-épicas (morado) y modo edición (azul) */
/* Punto de color de iniciativa (Kanban, cabeceras de grupo) */
/* Tarjeta Kanban en modo edición */
/* LISTA *//* Filas de la Lista (épica con fondo; el resto, sin fondo): estilo común en
   shared/css/components/task-rows.css. */
/* Cabecera de tabla: DOS filas tokenizadas y theme-aware (adaptan a claro/oscuro).
   Fila 1 = banda de grupo (superficie más profunda), fila 2 = nombres de columna.
   Los grupos se distinguen por el texto y los separadores .col-group-start; sin
   hues semánticos ni hex fijos, siguiendo la estética de la app. */
/* Tinte MUY ligero por bloque (Información/Personas/Fechas/Esfuerzo), theme-aware:
   el hue neutro/desaturado se mezcla sobre las superficies (var(--bgX)), así que
   adapta a claro/oscuro. Fila 1 (banda) algo más marcada; fila 2 (nombres) más suave. *//* La cabecera de iniciativa (banda a ancho completo) deja fluir su fondo, pero su
   contenido (caret + nombre + conteo) queda FIJO a la izquierda en scroll horizontal,
   igual que la columna de nombres de tarea. */
/* CRONOGRAMA (Gantt propio con columna de nombres fija) */
/* CALENDARIO (FullCalendar 5 — CSS vendorizado en assets/css/vendor/) */
.fc-event.st-pend,.fc-event.st-prog,.fc-event.st-done,.fc-event.st-block{background:var(--sc);border-color:var(--sc);color:var(--si)}
.fc-event.st-pend .fc-list-event-dot,.fc-event.st-prog .fc-list-event-dot,.fc-event.st-done .fc-list-event-dot,.fc-event.st-block .fc-list-event-dot{border-color:var(--sc)}
/* MODAL de tarea (reutiliza el overlay/modal de la app) *//* Clip del header coloreado a las esquinas redondeadas del modal (si no, el
   fondo del header se sale del border-radius y parece un recuadro superpuesto). */
/* Comentarios */
/* Árbol de relaciones Épica › Tarea › Subtarea */
/* Progreso del popup: un único slider con aspecto de barra rellena.
   El % de relleno se pasa por --p (el.style.setProperty en JS, CSP-safe). */
/* Aviso de solo lectura (elemento completado) */
/* Avisos de cálculo automático */
/* Botones Exportar / Importar */
/* Altura uniforme de los campos de una sola línea del popup de tareas.
   Los <select> (Tipo, Épica, Estado, Prioridad, Desarrollador) tienen una
   altura intrínseca nativa distinta de los <input> según el navegador y
   quedaban más bajos que Responsable o las Fechas. Fijamos una altura común
   para todos los controles de una línea (texto, fecha, número y select); el
   textarea de Descripción/comentarios se excluye a propósito. */
/* Dates 3 columns (modal) */

/* Responsive: en móvil las columnas fijadas (Lista: 1ª columna; Cronograma:
   columna de nombres de 250px) restan demasiado ancho a la pantalla y
   dificultan la lectura del resto de la tabla al hacer scroll horizontal.
   Se desactiva el sticky para que se desplacen con el resto del contenido. */

/* Aviso crítico: tarea fuera del rango de su fase (domain/fases.js). Rojo = riesgo. */
.phase-warn-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;color:var(--red);font-size:12px;font-style:normal;font-weight:700;line-height:1;cursor:help}
.kcard .ktitle .phase-warn-ico{margin:0 6px 0 0}
.kcard.has-phase-warn{border-color:color-mix(in srgb,var(--red) 70%,var(--border2))}
.g2-bar.is-phase-warn,.g2-mile.is-phase-warn{outline:2px solid var(--red);outline-offset:1px}
.phase-warn-note{display:flex;flex-direction:column;gap:4px;margin:12px 0;font-size:12px;color:var(--text);background:var(--red-soft);border:1px solid var(--red);border-radius:var(--radius-sm);padding:9px 12px}
.phase-warn-note b{color:color-mix(in srgb,var(--red) 80%,var(--text))}
.phase-warn-note-help{color:var(--text2);margin-top:2px}
.phase-warn-note.tv-none{display:none}
.phase-warn-actions{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.phase-warn-list{margin:4px 0 6px 18px;padding:0}
.phase-warn-note .btn-primary { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; background:var(--granate); border-color:var(--granate-border); color:var(--surface-white); font-weight:600; cursor:pointer; border-radius:var(--radius-sm); }
.phase-warn-note .btn-primary:hover { background:var(--granate-hover); border-color:var(--granate-border-hover); }
.phase-warn-note .btn-primary svg { width:14px; height:14px; flex:0 0 auto; }
.phase-warn-note .btn-secondary { display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 10px; background:color-mix(in srgb, var(--red) 22%, var(--bg2)); border-color:color-mix(in srgb, var(--red) 55%, var(--border2)); color:var(--granate); font-weight:600; cursor:pointer; border-radius:var(--radius-sm); }
.phase-warn-note .btn-secondary:hover { background:color-mix(in srgb, var(--red) 35%, var(--bg2)); border-color:var(--red); color:var(--granate-border); }
body[data-theme="dark"] .phase-warn-note .btn-secondary { color:color-mix(in srgb, var(--granate) 35%, var(--granate-light-text)); }
body[data-theme="dark"] .phase-warn-note .btn-secondary:hover { color:var(--granate-light-hover); }

/* Ficha de una iniciativa: el «+» de Tareas está en la fila de pestañas (junto a favoritos). */
#tv-host-detail #tv-new { display: none; }

/* Ficha · Tareas por fase: una sección plegable por fase con la tríada de horas
   (Estimadas de la evaluación · Planificadas · Reales · Disponibles). La fase en curso
   abre desplegada; el cuerpo se anima con dcAlternarPanel (.open / .is-closing). */
.tv-fases { display: flex; flex-direction: column; gap: 12px; }
.tv-fase { padding: 0; overflow: visible; }
.tv-fase-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 12px 16px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); }
.tv-fase-cabecera:hover { background: var(--bg3); }
.tv-fase-cabecera:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tv-fase-titulo { font-size: 14px; font-weight: 600; }
.tv-fase-cuenta { margin-left: auto; font-size: 12px; color: var(--text2); }
.tv-fase-chevron { width: 16px; height: 16px; color: var(--text2); transition: transform 200ms ease; }
.tv-fase-cabecera.is-open .tv-fase-chevron { transform: rotate(180deg); }
.tv-fase-barra { display: grid; grid-template-columns: 96px minmax(120px, 1fr) auto; gap: 12px; align-items: center; font-size: 12px; }
.tv-fase-barra-etq { color: var(--text2); }
.tv-fase-barra-cifra { color: var(--text2); white-space: nowrap; }
.tv-fase-cuerpo { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.tv-fase-cuerpo.open, .tv-fase-cuerpo.is-closing { display: block; }
.kcard .khoras { font-size: 11px; color: var(--text2); margin-bottom: 6px; }
@media (max-width: 768px) {
  .tv-fase-barra { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tv-fase-cuenta { margin-left: 0; }
}

/* Fase plegada: también se ocultan sus tarjetas (el resumen va dentro del cuerpo). */
.tv-fase-resumen { padding: 16px 0 4px; }
.tv-fase-resumen .stat-grid { margin-bottom: 18px; }
.tv-fase-barras { display: flex; flex-direction: column; gap: 12px; }
.tv-fase-barra .progress { height: 10px; border-radius: 999px; }
.tv-fase-barra .progress-fill { border-radius: 999px; }
.tv-fase-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tv-fase-nota { font-size: 12px; color: var(--text2); margin-top: 14px; }
.tv-fase-vista > .kanban, .tv-fase-vista > .table-wrap, .tv-fase-vista > .gantt2, .tv-fase-vista > .kanban-edit-hint { margin-top: 16px; }
/* Desvíos de la fase: protagonistas (cifra grande en el tono del aviso). */
.tv-desvio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid; font-size: 13px; }
.tv-desvio.is-warning { background: var(--warning-soft); border-color: var(--warning); }
.tv-desvio.is-risk { background: var(--red-soft); border-color: var(--red); }
.tv-desvio-que { font-weight: 600; color: var(--text); }
.tv-desvio-cifra { font-family: var(--font-display); font-size: 20px; line-height: 1; }
.tv-desvio.is-warning .tv-desvio-cifra { color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
.tv-desvio.is-risk .tv-desvio-cifra { color: var(--red); }
.tv-desvio-pct { font-size: 12px; color: var(--text2); }
/* Kanban: el cuerpo de cada columna, teñido muy suave del color de su estado (--sc). */
.kcol.st-pend, .kcol.st-prog, .kcol.st-done, .kcol.st-block { background: color-mix(in srgb, var(--sc) 7%, var(--bg2)); }
/* Aviso de bolsa en el popup de tarea: cifras en negrita y rojo. */
#mBolsaNote b { color: var(--red); }
/* Ficha · Tareas: mismo aire entre el aviso de alertas, los selectores de vista y las fases (14 px). */
#tv-host-detail .tareas-head { margin-bottom: 14px; }
#tv-host-detail .filter-chip-row:empty { display: none; }
/* Barras de la tríada: etiqueta y cifra de ancho fijo para que todas las barras midan lo
   mismo; la etiqueta en negrita y del color de su barra. */
.tv-fase-barra { grid-template-columns: 110px minmax(120px, 1fr) 190px; }
.tv-fase-barra-etq { font-weight: 700; }
.tv-fase-barra.is-ok .tv-fase-barra-etq { color: var(--green); }
.tv-fase-barra.is-delivery .tv-fase-barra-etq { color: var(--accent); }
.tv-fase-barra.is-warning .tv-fase-barra-etq { color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
.tv-fase-barra.is-danger .tv-fase-barra-etq { color: var(--red); }
.tv-fase-barra.is-muted .tv-fase-barra-etq { color: var(--text3); }
.tv-fase-barra-cifra { text-align: right; }
/* Desvíos: mismo aire por encima (barras) que por debajo (tabla / tablero). */
.tv-fase-chips { margin: 18px 0 0; }
.tv-fase-resumen { padding-bottom: 0; }
.tv-fase-vista > .kanban, .tv-fase-vista > .table-wrap, .tv-fase-vista > .gantt2, .tv-fase-vista > .kanban-edit-hint, .tv-fase-vista > .empty-note { margin-top: 18px; }
@media (max-width: 768px) { .tv-fase-barra { grid-template-columns: minmax(0, 1fr); } .tv-fase-barra-cifra { text-align: left; } }

/* ── Recuadro «Desvío de planificación» (tvAvisosHtml): todos los avisos de las fases,
   a todo lo ancho como el de alertas y en amarillo de aviso. ── */
.tv-avisos-banner { border-color: var(--warning); background: var(--warning-soft); }
.tv-avisos-banner .pcb-title { color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
.tv-avisos-lista { list-style: none; padding-left: 0; gap: 8px; }
.tv-avisos-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.tv-aviso-fase {
  flex: none; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--warning) 70%, var(--text)); background: color-mix(in srgb, var(--warning) 22%, transparent);
}
.tv-aviso-que { font-weight: 600; color: var(--text); }
.tv-aviso-cifra { font-weight: 700; color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
.tv-avisos-lista li.is-riesgo .tv-aviso-cifra { color: var(--red); }
.tv-aviso-texto { flex: 1 1 260px; min-width: 0; color: var(--text2); }

/* ── Informe de seguimiento (PowerPoint): selector de iniciativas del popup ── */
#modal-seguimiento .modal-body { padding: 20px 24px; }
.seg-intro { margin: 0 0 14px; color: var(--text2); font-size: 13px; line-height: 1.5; }
.seg-list { max-height: min(46vh, 380px); overflow-y: auto; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.seg-option { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition-fast); }
.seg-option:last-child { border-bottom: none; }
.seg-option:hover { background: var(--bg3); }
.seg-option input[type="checkbox"] { grid-row: span 2; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.seg-option-main { min-width: 0; color: var(--text); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.seg-option-id { margin-right: 8px; color: var(--text3); font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; }
.seg-option-meta { grid-column: 2; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text3); font-size: 11.5px; }
.seg-option-tareas { margin-left: 2px; }
/* PPT Seguimiento: fondo morado (token de acciones de gobierno) y la altura de control del resto de botones, también en móvil. */
.btn-ppt-seguimiento { min-height: var(--control-h); padding: 0 14px; background: var(--accion-gobierno); border: 1px solid var(--accion-gobierno); color: color-mix(in srgb, var(--accion-gobierno) 15%, black); font-weight: 500; }
.btn-ppt-seguimiento:hover:not(:disabled) { background: color-mix(in srgb, var(--accion-gobierno) 86%, var(--text)); color: color-mix(in srgb, var(--accion-gobierno) 15%, black); }
/* Modo claro: texto e icono en blanco sobre el morado. */
:root[data-theme="light"] .btn-ppt-seguimiento,
:root[data-theme="light"] .btn-ppt-seguimiento:hover:not(:disabled) { color: var(--on-accent); }
.seg-option-all { border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--bg3); }
.seg-option-all .seg-option-main { font-weight: 600; }
.seg-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px dashed var(--border2); border-radius: var(--radius-sm); color: var(--text2); font-size: 13px; }
.seg-empty strong { color: var(--text); }
.seg-counter { align-self: center; margin-right: auto; color: var(--text2); font-size: 12.5px; }
#seguimiento-generate-btn:disabled:not([aria-busy="true"]) { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { #modal-seguimiento .modal-footer { flex-wrap: wrap; } .seg-counter { width: 100%; margin-bottom: 4px; } }