/* Radar D&A — estilos base (sin framework; server-rendered + HTMX) */

/* Tipografía Cockpit (2c.3-bis): vendorizada en /static/fonts, nunca CDN.
   Space Grotesk es variable (300–700); IBM Plex Mono en 400/500/600. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
/* (T3) Par tipográfico del tema Softys: Outfit variable (200–700) + Space Mono 400/700,
   sacados del informe de referencia y vendorizados igual que los del Cockpit. */
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     CAPA DE TOKENS (T1, 15/08). Regla: un color nuevo = un token nuevo, nunca un
     hex suelto. Los componentes se escriben SOLO contra estos nombres; el tema
     (Cockpit hoy, Softys después) es un bloque que los redefine. Ver
     docs/plan/propuesta-tema-frontend.md §4 y el skill diseno-frontend.
     Valores por omisión = tema «Cockpit» (cálido), idéntico al aspecto anterior.
     ══════════════════════════════════════════════════════════════════════════ */
  /* Tipografía: cada tema lleva su par (Cockpit = Space Grotesk + IBM Plex Mono). */
  --sans: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  /* Jerarquía: el tema Softys afloja el h1 (26/300) y abre las versalitas; Cockpit no. */
  --h1-tam: 19px; --h1-peso: 600; --h1-esp: 0;
  --radio: 8px;
  /* Superficies y tinta */
  --papel: #efeee9;         /* fondo del contenido */
  --superficie: #ffffff;    /* tarjetas, tablas, modales */
  --superficie-2: #faf9f5;  /* zonas suaves dentro de una tarjeta: rieles, cabeceras sticky, hover de fila */
  --tinta: #14161a;
  --tinta-2: #6b6a63;       /* texto secundario (antes --sutil) */
  --tinta-3: #8a939c;       /* etiquetas, placeholders, deshabilitado */
  --linea: #dad8d0;         /* bordes (antes --borde) */
  --linea-suave: #e3e1d8;   /* filetes internos de rejillas */
  --pista: #e6ebf1;         /* fondo de barras de progreso/capacidad */
  --seleccion: #eef4fd;     /* filas/celdas resaltadas por selección o foco de columna */
  --resalte: #fdf6e3;       /* «hoy» en Gantt y celdas sobre capacidad */
  --sobre-solido: #ffffff;  /* texto sobre un fondo sólido de acento/semántico */
  --velo: rgba(30, 30, 30, .45);
  --sombra: 0 12px 40px rgba(0, 0, 0, .25);
  /* Acento (marca): botones primarios, enlaces, activo del segmentado */
  --acento: #1d5c96;
  --acento-2: #123a5f;
  --acento-suave: #e8edfb;
  /* Semántico: tono base (barras, bordes), fuerte (texto sobre suave, chips sólidos) y suave (fondo de chips) */
  --ok: #1e8a4c;         --ok-fuerte: #14532d;      --ok-suave: #e8efe9;
  --alerta: #d99a06;     --alerta-fuerte: #b45309;  --alerta-suave: #fdf3e3;
  --peligro: #c93434;    --peligro-fuerte: #b42318; --peligro-suave: #fdebe8;
  --info: #2563ae;       --info-fuerte: #1d4ed8;    --info-suave: #e8edfb;
  --pausa: #7c5cb0;      --pausa-fuerte: #4c1d95;   --pausa-suave: #f0eaf8;
  --neutro: #8a939c;     --neutro-fuerte: #6b6a63;  --neutro-suave: #efeee9;
  /* (T7) Papel de las series de los gráficos: real y línea de referencia. Cockpit y
     Softys los toman del semántico; Clásico los pinta en azul monocromo. */
  --graf-real: var(--ok);
  --graf-linea: var(--alerta);
  /* (T7) Acento claro: subtítulo/fecha sobre la barra de título sólida del Clásico. */
  --acento-claro: #a9c6e3;
  /* Categórica (gráficos, puntos de programa) */
  --cat-1: #1d5c96; --cat-2: #1e8a4c; --cat-3: #123a5f; --cat-4: #7c5cb0; --cat-5: #2f6f7a; --cat-6: #c93434;
  --cat-7: #8a6e3b; --cat-8: #6b7a3f; --cat-9: #9c5a3c; --cat-10: #4a5a6b; --cat-11: #c08a2e; --cat-12: #7a5c7a;
  /* Sidebar (Cockpit · oscura). La clara y las de Softys son bloques [data-sidebar]/[data-tema]. */
  --sb-fondo: #14161a;
  --sb-tinta: #b9bec7;
  --sb-tinta-fuerte: #ffffff;
  --sb-linea: #262a31;
  --sb-hover: #1e2128;
  --sb-activo-fondo: rgba(95, 167, 119, .14);
  --sb-activo-tinta: #ffffff;
  --sb-marcador: #5fa777;
  --sb-badge-fondo: #262a31;
  --sb-badge-tinta: #dbdfe5;
  --sb-badge-activo-fondo: #5fa777;
  --sb-badge-activo-tinta: #0d2416;
  --sb-input-fondo: #1e2128;
  --sb-input-borde: #2a2e36;
  --sb-placeholder: #7d838e;
  --sb-etiqueta: #8a919c;
  --sb-marca-sub: #8a919c;
  /* ══════════════════════════════════════════════════════════════════════════
     TOKENS DE FORMA (R-F1, 10/09). El color ya estaba tokenizado; la FORMA no, y por
     eso cada tema se escapaba a selectores `body[data-tema=…] .componente` (21 en
     Softys, 39 en Clásico). Regla nueva, hermana de la del color: **una forma que
     cambia entre temas = un token**. Un selector de tema que sobreviva tiene que
     justificarse en comentario como forma genuina, no como token que faltó.
     Los valores de aquí son los del Cockpit, que es el :root.
     ══════════════════════════════════════════════════════════════════════════ */
  /* Controles y chips (R-F1a) */
  --radio-control: 6px;        /* input, select, textarea, .boton, búsqueda de cabecera */
  --radio-chip: 999px;         /* .semaforo y .chip-estado: píldora o esquina recta */
  --campo-fondo: var(--superficie);
  --campo-fondo-foco: var(--superficie);
  --boton-primario-fondo: var(--acento);
  --boton-primario-borde: var(--acento);
  --boton-primario-hover: var(--acento-2);
  --boton-primario-hover-borde: var(--acento-2);
  /* Cabecera de vista (R-F1b). Los tres temas la resuelven distinto: banda blanca
     (Cockpit), titulo editorial sobre el papel con rotulo encima (Softys) y barra de
     titulo solida (Clasico). Todo eso son valores, no selectores. */
  --cab-fondo: var(--superficie);
  --cab-tinta: var(--tinta);
  --cab-borde-inf: 1px solid var(--linea);
  --cab-pad: 1rem 1.75rem .9rem;
  --cab-margen: -1.5rem -1.75rem 1.25rem;
  --cab-alineacion: flex-start;      /* Clasico centra: su barra es una sola linea */
  --cab-datos-display: block;        /* Clasico pone titulo y subtitulo en linea */
  --cab-rotulo: none;                /* `content` del rotulo sobre el h1 (Softys) */
  --cab-rotulo-tinta: var(--acento);
  --cab-sub-tinta: inherit;
  --cab-sub-margen: .15rem 0 0;
  --cab-badge-fondo: var(--papel);
  --cab-badge-tinta: var(--tinta-2);
  --cab-badge-borde: 1px solid var(--linea);
  --cab-busqueda-fondo: var(--superficie);
  --cab-busqueda-borde: var(--linea);
  --cab-busqueda-tinta: var(--tinta);
  --cab-busqueda-hueco: var(--tinta-3);   /* placeholder */
  --cab-fecha-tinta: var(--tinta-2);
  /* Tablas (R-F1c). Cockpit: encabezado sin fondo y filete gris. Softys: filete de
     tinta. Clasico: encabezado gris con filas alternas, como un ListView. */
  --th-fondo: transparent;
  --th-tinta: var(--tinta);
  --th-borde-sup: 0 solid transparent;
  --th-borde-inf: 1px solid var(--linea);
  --td-borde-inf: 1px solid var(--linea);
  --fila-par-fondo: transparent;
  --fila-hover-fondo: var(--superficie-2);
  /* KPIs (R-F1d). Cockpit y Clasico los pintan como tarjetas; Softys como una franja
     con separadores verticales y sin cajas. La diferencia entera son estos valores. */
  --kpis-gap: 12px;
  --kpis-borde-sup: 0 solid transparent;
  --kpis-borde-inf: 0 solid transparent;
  --kpi-fondo: var(--superficie);
  --kpi-borde: 1px solid var(--linea);
  --kpi-radio: var(--radio);
  --kpi-pad: .85rem 1rem;
  --kpi-pad-izq-sig: 1rem;      /* padding izquierdo del segundo KPI en adelante */
  --kpi-separador: 1px solid var(--linea);   /* en Cockpit es el borde derecho de la tarjeta */
  --kpi-nombre-tam: 9.5px;
  --kpi-nombre-esp: .12em;
  --kpi-valor-tinta: inherit;
  --kpi-valor-esp: -.02em;
  /* Barra lateral: FORMA (R-F1e). El color ya vivia en los --sb-*; lo que faltaba era
     la forma de la marca, del item y del badge de conteo. */
  --sb-borde-der: 0 solid transparent;      /* la barra clara se separa con un filete */
  --sb-input-tinta: var(--sb-tinta-fuerte);
  --marca-fondo: transparent;
  --marca-tinta: var(--sb-tinta-fuerte);
  --marca-borde-inf: 0 solid transparent;
  --marca-margen-inf: 0;
  --marca-pad: .8rem 1rem .7rem;
  --marca-sub-tinta: var(--sb-marca-sub);
  --nav-grupo-tam: 8.5px;
  --nav-grupo-esp: 2px;
  --nav-item-radio: 0;
  --nav-item-margen: 0;
  --nav-item-pad-izq: .65rem;
  --nav-marcador-ancho: 3px;                /* reserva del marcador del item activo */
  --nav-activo-sombra: none;
  --nav-activo-ico: currentColor;
  --badge-borde: 0 solid transparent;
  --badge-fuente: var(--mono);
  --badge-peso: 400;
  --badge-activo-borde: transparent;
  --badge-ambar-fondo: var(--alerta-fuerte);
  --badge-ambar-borde: transparent;
  --badge-ambar-tinta: var(--sobre-solido);
  /* Controles activos fuera de la barra */
  --seg-activo-fondo: var(--acento);
  --avatar-fondo: var(--acento-2);
  /* Escala de estado de la actividad (R-F1f). Las clases del HTML nombran un COLOR
     (`verde` = En Proceso, `azul` = Finalizada, `gris` = Pendiente) porque asi las
     afirman los tests; el SIGNIFICADO lo ponen estos tokens. Un tema que quiera otra
     escala los redefine y no toca un solo selector: Clasico, por ejemplo, pinta En
     Proceso de azul y Finalizada de verde. Solo afectan a `.semaforo.estado`; el
     semaforo RN-05 conserva sus colores. */
  --estado-proceso-fondo: var(--ok-suave);
  --estado-proceso-tinta: var(--ok-fuerte);
  --estado-proceso-solido: var(--ok);
  --estado-final-fondo: var(--info-suave);
  --estado-final-tinta: var(--info-fuerte);
  --estado-final-solido: var(--info);
  --estado-aprobada-fondo: var(--ok-fuerte);
  --estado-aprobada-tinta: var(--sobre-solido);
  --estado-aprobada-solido: var(--ok-fuerte);
  --estado-pendiente-fondo: var(--neutro-suave);
  --estado-pendiente-tinta: var(--neutro-fuerte);
  --estado-pendiente-borde: transparent;
  --estado-anulada-fondo: var(--neutro-suave);
  --estado-anulada-tinta: var(--neutro-fuerte);
  --estado-pausa-fondo: var(--pausa-suave);
  --estado-pausa-tinta: var(--pausa);
  --estado-pausa-borde: transparent;
  --estado-chip-borde: 0 solid transparent;
  --estado-pausa-glifo: none;               /* Clasico dibuja un doble filete antes */
  --cifras: normal;                         /* Clasico alinea todas las cifras */
  /* ── Alias históricos: siguen funcionando en plantillas y <style> de página, pero
        el CSS nuevo usa los tokens de arriba. No añadir alias nuevos. ── */
  --fondo: var(--papel);
  --blanco: var(--superficie);
  --sutil: var(--tinta-2);
  --borde: var(--linea);
  --azul: var(--acento);
  --azul-oscuro: var(--acento-2);
  --sem-verde: var(--ok);
  --sem-amarillo: var(--alerta);
  --sem-rojo: var(--peligro);
  --sem-gris: var(--neutro);
  --sem-azul: var(--info);
  --sem-pausa: var(--pausa);
  --acento-verde: var(--ok-fuerte);
  --acento-ambar: var(--alerta-fuerte);
  --acento-azul: var(--info-fuerte);
  --sidebar-fondo: var(--sb-fondo);
  --sidebar-tinta: var(--sb-tinta);
  --sidebar-hover: var(--sb-hover);
  --sidebar-activo: var(--sb-marcador);
  --contenido-fondo: var(--papel);
}

* { box-sizing: border-box; }

/* Cualquier display de autor (grid, flex…) le gana al [hidden] del navegador;
   sin esta regla el filtrado en cliente marca filas como hidden sin ocultarlas. */
[hidden] { display: none !important; }

/* (T2) Foco visible por teclado en todo control; los clics de ratón no lo pintan. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
a:focus-visible, .boton:focus-visible, .item-nav:focus-visible { outline-offset: 1px; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .boton, .item-nav, .sb-seg a, .selector-modo .modo, .fc-embudo, .boton-enlace, .enlace-fila,
  input, select, textarea { transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; }
}

/* (T2) Cabecera de sección: título a la izquierda, dato o control a la derecha, en
   una sola línea que puede plegarse. Sustituye a las variantes por página. */
.seccion-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 .6rem;
}
.seccion-cab h2 { margin: 0; }
.seccion-cab .meta { font-size: 10.5px; color: var(--tinta-3); }
.tarjeta > .seccion-cab:first-child { margin-top: 0; }

/* (2c.4-bis) Escala Cockpit: base 13px y tamaños derivados SIEMPRE en px —
   rem resuelve contra la raíz de 16px, no contra el body, y no encogería. */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: var(--cifras);
  color: var(--tinta);
  background: var(--fondo);
}

h1 { font-size: var(--h1-tam); font-weight: var(--h1-peso); letter-spacing: var(--h1-esp); margin: 0 0 .5rem; }
/* (T2) Un solo título de sección en toda la app: 15px/600 en tinta. El azul se reserva
   a las tarjetas-enlace del Admin; los <h2> en versalita mono del Dashboard se retiraron. */
h2 { font-size: 15px; font-weight: 600; margin: 1.2rem 0 .5rem; color: var(--tinta); }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
.sutil { color: var(--sutil); }

/* Disposición Cockpit (2b.1): sidebar fija oscura + main con scroll propio.
   Flex evita que las tablas anchas rompan el layout: el main tiene overflow propio. */
body.con-sidebar {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--papel);
}

/* Distintivo de entorno: franja fija arriba cuando la base NO es la del portafolio real.
   Fija y no en el flujo porque tiene que seguir ahí al bajar en una tabla larga, que es
   justo cuando uno se olvida de qué está mirando. El hueco se hace con padding en el
   <body>: con `* { box-sizing: border-box }` ese padding entra DENTRO del `height: 100vh`
   de la disposición con sidebar, así que el área de contenido encoge y nada se sale.
   z-index por encima de los modales (50): tapar la franja anularía su razón de ser. */
.tira-entorno {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--tira-entorno-alto);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--alerta-fuerte);
  color: var(--sobre-solido);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
body { --tira-entorno-alto: 22px; }
body.con-entorno { padding-top: var(--tira-entorno-alto); }
@media print { .tira-entorno { position: static; } body.con-entorno { padding-top: 0; } }

.sidebar {
  flex: 0 0 212px;
  width: 212px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--sb-fondo);
  color: var(--sb-tinta);
  border-right: var(--sb-borde-der);
}
/* (T3) Marca: logo + «Radar D&A» + «Softys · Data & Analytics ColEC» (_marca.html).
   Se llama .marca-radar y no .marca: `.marca` ya es el marcador del plan en las barras. */
.marca-radar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--marca-pad);
  margin-bottom: var(--marca-margen-inf);
  background: var(--marca-fondo);
  color: var(--marca-tinta);
  border-bottom: var(--marca-borde-inf);
  text-decoration: none;
}
.marca-radar:hover { text-decoration: none; }
.marca-logo { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sobre-solido); object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.marca-texto b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.marca-texto small {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--marca-sub-tinta);
}
/* (T7, 16/08) Secciones demarcadas (Hedi: «no logro ver una distinción»): filete de
   1 px entre bloques, aire arriba y separación clara entre el rótulo y su primer ítem. */
.nav-grupo {
  display: block;
  margin-top: .2rem;
  padding: .55rem .85rem .3rem;
  border-top: 1px solid var(--sb-linea);
  font-size: var(--nav-grupo-tam);
  font-weight: 600;
  letter-spacing: var(--nav-grupo-esp);
  text-transform: uppercase;
  color: var(--sb-etiqueta);
}
.nav-grupo:first-child { margin-top: 0; padding-top: .2rem; border-top: 0; }
.nav-grupo-admin { padding-top: .5rem; }
/* (T7) Icono por entrada: mismo set en los tres temas; toma el color del texto. */
/* (R-F3) El envoltorio existe solo para colgar el `title` que se lee al plegar. */
.nav-ico { display: inline-flex; flex: none; }
.item-nav .ico { width: 15px; height: 15px; margin-right: .55rem; opacity: .9; }
.item-nav .nav-etiqueta { flex: 1; }
.item-nav.activo .ico { opacity: 1; color: var(--nav-activo-ico); }
.sesion-acciones { display: flex; align-items: center; gap: .9rem; }
.sesion-acciones a, .sesion-acciones .boton-enlace { display: inline-flex; align-items: center; gap: .35rem; }
.sesion-acciones .ico { width: 14px; height: 14px; }
.powered {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .4px;
  color: var(--sb-etiqueta);
}
.powered b { font-weight: 700; color: var(--sb-tinta); }
.sidebar .powered { margin: 0 1rem; padding: .5rem 0 .6rem; border-top: 1px solid var(--sb-linea); }
.pie-contenido {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linea);
  font-size: 10.5px;
  color: var(--tinta-3);
}
.pie-contenido .powered { color: var(--tinta-3); }
.pie-contenido .powered b { color: var(--tinta-2); }
/* Login: la marca se pinta sobre tarjeta blanca, con la tinta del contenido. */
.tarjeta.acceso .marca-radar { padding: 0 0 .6rem; color: var(--tinta); }
.tarjeta.acceso .marca-texto b { font-size: 19px; }
.tarjeta.acceso .marca-texto small { color: var(--tinta-3); }
.tarjeta.acceso .acceso-lema { margin: 0 0 .4rem; font-size: 12.5px; }
body:not(.con-sidebar) .pie-contenido { max-width: 420px; margin: 1.2rem auto 0; border-top: 0; justify-content: center; }
body:not(.con-sidebar) .pie-contenido > span { display: none; }

/* Búsqueda global (GET /buscar) */
.sidebar .busqueda { margin: 0 .75rem .5rem; }
.sidebar .busqueda input {
  width: 100%;
  padding: .4rem .55rem;
  font-size: 11.5px;
  text-overflow: ellipsis;
  color: var(--sb-input-tinta);
  background: var(--sb-input-fondo);
  border: 1px solid var(--sb-input-borde);
  border-radius: var(--radio-control);
}
.sidebar .busqueda input::placeholder { color: var(--sb-placeholder); }
.sidebar .busqueda input:focus {
  outline: 2px solid var(--sb-marcador);
  outline-offset: -1px;
}

/* Lista de secciones; flex: 1 empuja el bloque de sesión al fondo */
.navegacion {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding-bottom: .4rem;
}
.item-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem .85rem .3rem var(--nav-item-pad-izq); /* (T7) compacto: cabe sin scroll a 900 px */
  margin: var(--nav-item-margen);
  border-left: var(--nav-marcador-ancho) solid transparent; /* reserva del marcador activo */
  border-radius: var(--nav-item-radio);
  color: var(--sb-tinta);
  font-size: 12.5px;
}
.item-nav:hover { color: var(--sb-tinta-fuerte); background: var(--sb-hover); text-decoration: none; }
.item-nav.activo {
  color: var(--sb-activo-tinta);
  border-left-color: var(--sb-marcador);
  background: var(--sb-activo-fondo);
  box-shadow: var(--nav-activo-sombra);
  font-weight: 600;
}

/* Badges de conteo vivo (fragmento /nav/conteos) */
.conteo {
  min-width: 1.6rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--sb-badge-fondo);
  color: var(--sb-badge-tinta);
  border: var(--badge-borde);
  font-family: var(--badge-fuente);
  font-weight: var(--badge-peso);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  text-align: center;
}
.item-nav.activo .conteo { background: var(--sb-badge-activo-fondo); color: var(--sb-badge-activo-tinta); border-color: var(--badge-activo-borde); }
.conteo.ambar { background: var(--badge-ambar-fondo); border-color: var(--badge-ambar-borde); color: var(--badge-ambar-tinta); }

/* Sesión al pie de la sidebar */
.sidebar .sesion {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .55rem 1rem .6rem;
  border-top: 1px solid var(--sb-linea);
  font-size: 12px;
}
.sidebar .sesion .sutil { color: var(--sb-etiqueta); }
.sidebar .sesion a { color: var(--sb-tinta); font-size: 12px; }
.sidebar .sesion a:hover { color: var(--sb-tinta-fuerte); }
.sidebar .sesion form { margin: 0; }
/* (R-F4) Apariencia. El selector dejo de ser dos `select` de 8,5 px en el pie de la
   barra: cada opcion es ahora una tarjeta con su radio, porque el nombre solo no basta
   para elegir entre tres temas — hace falta la linea que dice en que se nota. */
.apariencia { max-width: 760px; }
.opciones-apariencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: .4rem;
}
.opcion-apariencia {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  margin: 0;
  padding: .75rem .9rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-weight: 400;
  cursor: pointer;
}
.opcion-apariencia:hover { border-color: var(--tinta-3); }
/* `.elegida` la pinta el servidor al cargar; `:has` la sigue en vivo al pulsar otra. */
.opcion-apariencia.elegida,
.opcion-apariencia:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
/* El radio no es un campo de formulario a lo ancho: el `width: 100%` global no aplica. */
.opcion-apariencia input { width: auto; grid-row: span 2; margin: 2px 0 0; }
.opcion-nombre { font-size: 12.5px; font-weight: 600; }
.opcion-detalle { font-size: 11px; color: var(--tinta-2); }
.apariencia .ayuda { margin: .3rem 0 1.2rem; }

/* Sin sesión (login / cambiar clave) el main conserva el ancho de lectura centrado */
.contenido { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.25rem; }
body.con-sidebar .contenido {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 1.5rem 1.75rem 2.5rem;
  overflow: auto;
  background: var(--papel);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   (R-F3, 10/09) La barra lateral en pantallas estrechas. Hasta hoy eran 212 px fijos
   a cualquier ancho: ninguna media query la tocaba, así que por debajo de unos 900 px
   el contenido se quedaba sin sitio. Tres estados, sin una línea de JavaScript y sin
   cambiar el HTML (las entradas ya llevan `title`, que es el que se ve al plegarla):

     > 1100 px   completa, 212 px            (lo de siempre)
     760–1100    solo iconos, 52 px          (la etiqueta vive en el `title`)
     < 760 px    franja horizontal arriba    (el móvil no tiene columna que gastar)

   Se hace con el ancho de `.sidebar` y ocultando texto, nunca con `display: none` en
   la navegación: el menú tiene que seguir alcanzable en los tres estados.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sidebar { flex: 0 0 52px; width: 52px; }
  /* Lo que es texto se va; lo que es gesto se queda. */
  .sidebar .nav-etiqueta,
  .sidebar .conteo,
  .sidebar .nav-grupo,
  .sidebar .busqueda,
  .sidebar .marca-texto,
  .sidebar .sesion .sutil,
  .sidebar .sesion-acciones span,
  .sidebar .powered { display: none; }
  .marca-radar { justify-content: center; padding: .7rem .2rem; }
  .marca-logo { width: 28px; height: 28px; }
  .item-nav { justify-content: center; padding: .45rem 0; border-left-width: 0; margin: 0; }
  .item-nav .ico { margin-right: 0; }
  /* El marcador del activo no cabe como borde: pasa a ser el fondo entero. */
  .item-nav.activo { box-shadow: inset 2px 0 0 var(--sb-marcador); }
  .sidebar .sesion { align-items: center; padding: .55rem .2rem; }
  .sesion-acciones { justify-content: center; gap: .5rem; }
  body.con-sidebar .contenido { padding: 1.5rem 1.1rem 2.5rem; }
  .cabecera-tablero { margin-left: -1.1rem; margin-right: -1.1rem; }
}
@media (max-width: 760px) {
  /* La columna se convierte en franja: el scroll vuelve a ser el del documento. */
  body.con-sidebar { flex-direction: column; height: auto; overflow: visible; }
  .sidebar {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: .2rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--sb-linea);
  }
  .marca-radar { margin-bottom: 0; border-bottom: 0; }
  .navegacion { flex-direction: row; flex: 1; padding-bottom: 0; }
  .item-nav { padding: .5rem .55rem; }
  .sidebar .sesion { border-top: 0; border-left: 1px solid var(--sb-linea); }
  body.con-sidebar .contenido { overflow: visible; }
}


/* Tarjetas y formularios */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
}
.tarjeta.acceso { max-width: 420px; margin: 8vh auto 0; }

label { display: block; margin: .8rem 0 .2rem; font-weight: 600; font-size: 12px; }
input, select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font: inherit;
  background: var(--campo-fondo);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  background: var(--campo-fondo-foco);
}
/* (T2) Los cuatro estados del campo: normal, foco (arriba), error y deshabilitado. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .campo-error input, .campo-error select {
  border-color: var(--peligro);
  background: var(--peligro-suave);
}
.campo-error .ayuda, .ayuda-error { color: var(--peligro-fuerte); font-size: 10.5px; font-weight: 500; }
input:disabled, select:disabled, textarea:disabled, input[readonly] {
  color: var(--tinta-3);
  background: var(--superficie-2);
  border-style: dashed;
  cursor: not-allowed;
}
label .ayuda, .ayuda { display: block; font-weight: 400; font-size: 10.5px; color: var(--tinta-3); margin-top: .2rem; }

.boton {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.boton.primario { background: var(--boton-primario-fondo); border-color: var(--boton-primario-borde); color: var(--sobre-solido); }
.boton.primario:hover { background: var(--boton-primario-hover); border-color: var(--boton-primario-hover-borde); }
.boton-enlace {
  background: none;
  border: none;
  padding: 0;
  color: var(--sb-tinta);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.boton-enlace:hover { color: var(--sb-tinta-fuerte); text-decoration: underline; }

/* (2c.14.7) Botón que se lee como enlace dentro de una tabla. Es <button> y no <a>
   a propósito: abre un parcial que solo existe por HTMX y no tiene página propia,
   así que un href sería un enlace roto. */
.enlace-fila {
  background: none;
  border: none;
  padding: 0;
  color: var(--azul);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.enlace-fila:hover { text-decoration: underline; }

/* (2c.14.1) Título de sección con su control a la derecha (ventana de sprints). */
.metricas-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.metricas-encabezado h2 { margin: 0; }

/* Alertas */
.alerta { padding: .6rem .8rem; border-radius: 6px; font-size: 12.5px; }
.alerta.error { background: var(--peligro-suave); border: 1px solid var(--peligro); color: var(--peligro-fuerte); }
.alerta.aviso { background: var(--alerta-suave); border: 1px solid var(--alerta); color: var(--alerta-fuerte); }
.alerta.ok { background: var(--ok-suave); border: 1px solid var(--ok); color: var(--ok-fuerte); }

/* (D-C6) Aviso de que sí se escribió. Comparte la paleta de .alerta.ok, pero es otra
   pieza: se coloca sola arriba del contenido, entra deslizándose y se va sola. El
   `role="status"` lo lee el lector de pantalla sin robar el foco. */
.aviso-ok {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0 0 .9rem; padding: .6rem .8rem;
  background: var(--ok-suave); border: 1px solid var(--ok);
  border-left: 3px solid var(--ok-fuerte);
  border-radius: 6px; font-size: 12.5px; color: var(--ok-fuerte);
  animation: aviso-entra .18s ease-out;
}
.aviso-ok .aviso-icono { font-size: 14px; line-height: 1; }
.aviso-ok .aviso-texto { flex: 1; }
.aviso-ok .aviso-cerrar {
  border: 0; background: none; cursor: pointer; padding: 0 .2rem;
  color: var(--ok-fuerte); font-size: 13px; line-height: 1; opacity: .65;
}
.aviso-ok .aviso-cerrar:hover { opacity: 1; }
/* (PL-9) El mismo aviso, en tono de fallo: se queda hasta que alguien lo cierre. */
.aviso-ok.malo {
  background: var(--peligro-suave); border-color: var(--peligro);
  border-left-color: var(--peligro-fuerte); color: var(--peligro-fuerte);
}
.aviso-ok.malo .aviso-cerrar { color: var(--peligro-fuerte); }
/* La salida se dispara desde radar.js: la clase la pone él tras unos segundos. */
.aviso-ok.se-va { animation: aviso-sale .3s ease-in forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-4px); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(-4px); } }
/* Quien pidió menos movimiento no lo necesita para entender el mensaje. */
@media (prefers-reduced-motion: reduce) {
  .aviso-ok, .aviso-ok.se-va { animation: none; }
}

/* Tablas */
table { width: 100%; border-collapse: collapse; background: var(--blanco); }
th, td { padding: .45rem .6rem; text-align: left; }
td { border-bottom: var(--td-borde-inf); }
/* (R1.3, 17/08) Estándar de encabezado para los TRES temas (decisión de Hedi sobre el
   Clásico): negrita en minúscula, tinta plena; el cuerpo sin negrita. Nada de
   versalitas ni de gris apagado en los th. */
th {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--th-tinta);
  background: var(--th-fondo);
  border-top: var(--th-borde-sup);
  border-bottom: var(--th-borde-inf);
}
/* Filas alternas y hover. El hover va DESPUES y con el mismo peso que la alterna
   (ambas 0,1,3): declarado antes, la fila par se comia el hover — que es el fallo
   que tenia el tema Clasico. */
tbody tr:nth-child(even) td { background: var(--fila-par-fondo); }
tbody tr:hover td { background: var(--fila-hover-fondo); }

/* Semáforo (RN-05): badges reutilizables. Estilo Cockpit (2c.3-bis): fondo suave
   + texto en el acento, en vez de píldoras saturadas con texto blanco. */
.semaforo {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: var(--radio-chip);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.semaforo.verde { background: var(--ok-suave); color: var(--ok-fuerte); }
.semaforo.amarillo { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.semaforo.rojo { background: var(--peligro-suave); color: var(--peligro-fuerte); }
.semaforo.gris { background: var(--neutro-suave); color: var(--neutro-fuerte); }
.semaforo.azul { background: var(--info-suave); color: var(--info-fuerte); }
.semaforo.pausa { background: var(--pausa-suave); color: var(--pausa); }
/* Ciclo de la actividad (2c.4-septies): Aprobada cierra el ciclo -> chip sólido;
   Anulada sigue existiendo pero ya no cuenta -> gris tachado. */
.semaforo.aprobada { background: var(--ok-fuerte); color: var(--sobre-solido); }
.semaforo.anulada { background: var(--neutro-suave); color: var(--neutro-fuerte); text-decoration: line-through; }

/* (T7) `.semaforo.estado` marca los chips que son ESTADO de actividad/proyecto (no
   semáforo RN-05): así un tema puede darles su propia escala sin tocar el semáforo.
   (R-F1f) Esa escala se declara UNA vez, contra los tokens `--estado-*`. */
.semaforo.estado { border: var(--estado-chip-borde); }
.semaforo.estado.verde { background: var(--estado-proceso-fondo); color: var(--estado-proceso-tinta); }
.semaforo.estado.azul { background: var(--estado-final-fondo); color: var(--estado-final-tinta); }
.semaforo.estado.aprobada { background: var(--estado-aprobada-fondo); color: var(--estado-aprobada-tinta); }
.semaforo.estado.gris { background: var(--estado-pendiente-fondo); color: var(--estado-pendiente-tinta); border-color: var(--estado-pendiente-borde); }
.semaforo.estado.anulada { background: var(--estado-anulada-fondo); color: var(--estado-anulada-tinta); }
.semaforo.estado.pausa { background: var(--estado-pausa-fondo); color: var(--estado-pausa-tinta); border-color: var(--estado-pausa-borde); }
/* El doble filete de Pausada: se dibuja siempre y el tema lo enciende con el token. */
.semaforo.estado.pausa::before {
  content: "";
  display: var(--estado-pausa-glifo);
  width: 5px;
  height: 8px;
  margin-right: 5px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  vertical-align: -1px;
}
/* Estado visible RN-12 (2c.3-bis): chip suave por proyecto; la clase sale del
   estado en minúsculas con guiones (En Proceso -> estado-en-proceso). */
.chip-estado {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: var(--radio-chip);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-estado.estado-en-proceso { background: var(--info-suave); color: var(--info-fuerte); }
.chip-estado.estado-finalizado { background: var(--ok-suave); color: var(--ok-fuerte); }
.chip-estado.estado-no-iniciado { background: var(--neutro-suave); color: var(--neutro-fuerte); }
.chip-estado.estado-en-pausa { background: var(--pausa-suave); color: var(--pausa); }

/* Admin */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.tarjeta.enlace { display: block; color: inherit; text-decoration: none; }
.tarjeta.enlace:hover { border-color: var(--azul); }
.tarjeta h2 { margin-top: 0; }
.tarjeta.enlace h2 { color: var(--acento); }
.form-linea { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form-linea label { flex: 1 1 180px; margin: 0; }
.form-linea .boton { margin-top: 0; }
.casilla { display: flex; gap: .5rem; align-items: center; }
.casilla input { width: auto; }
/* (R4.3) Persona y cuenta en un solo modal: dos secciones, la segunda sobre superficie-2. */
.pc-seccion { padding: .2rem 0 .6rem; }
.pc-seccion + .pc-seccion, .pc-cuenta { border-top: 1px solid var(--linea); margin-top: .6rem; padding-top: .7rem; }
.pc-seccion h3 { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .5rem; }
.pc-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .9rem; }
.pc-rejilla label { margin: 0; }
.pc-rejilla .pc-ancho { grid-column: 1 / -1; }
.pc-datos { display: grid; grid-template-columns: 100px 1fr; gap: .35rem .8rem; font-size: 12.5px; margin: 0; align-items: center; }
.pc-datos dt { color: var(--tinta-3); }
.pc-datos dd { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pc-linea { display: inline-flex; gap: .4rem; align-items: center; }
.pc-linea select { width: auto; }
/* (R4.7) «Cuenta de acceso» con la anatomía de un formulario: rótulo arriba, valor y
   acción en una línea, dos columnas como la rejilla de Datos. */
.pc-cuenta-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; }
.pc-campo { margin: 0; min-width: 0; }
.pc-campo > label, .pc-rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin: 0 0 4px; }
.pc-valor { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; padding: 3px 8px 3px 10px; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie-2); font-size: 12.5px; }
.pc-valor select { width: auto; flex: 1 1 auto; min-width: 0; margin: 0; }
.pc-valor .boton { flex: 0 0 auto; white-space: nowrap; }
.pc-valor.sutil { border-style: dashed; background: transparent; }
.pc-crear { grid-column: 1 / -1; }
.pc-sin { margin: 0 0 .5rem; }
.pc-clave code.clave-temporal { font: 700 13px var(--mono); background: var(--superficie); padding: 2px 8px; border-radius: 4px; margin: 0 6px; }
.pc-pagina { max-width: 720px; }
@media (max-width: 600px) { .pc-rejilla, .pc-datos, .pc-cuenta-rejilla { grid-template-columns: 1fr; } }
.acciones { display: flex; gap: .5rem; align-items: center; }
.acciones form { margin: 0; display: inline-flex; gap: .5rem; }
.acciones select { width: auto; padding: .25rem .4rem; }
.boton.chico { padding: .25rem .6rem; font-size: 11px; margin-top: 0; }
/* (T2) Botón-icono: UN tamaño (24px) para 👁 ✎ ⑂ en todas las filas; el dibujo es el
   SVG de _iconos.html, que hereda currentColor. */
.boton.icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  color: var(--tinta-2);
  text-decoration: none;
}
.boton.icono:hover { color: var(--acento); border-color: var(--acento); }
.ico {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
  flex: none;
}
.boton .ico + *, .ico + span { margin-left: .3rem; }

/* ═══ (T8, 16/08) UN ICONO POR GESTO — desplegar · ordenar · filtrar · anterior/siguiente.
   Máscaras SVG en currentColor con tamaño FIJO de 10 px (decisión de Hedi sobre el mock
   docs/mock-controles-tabla.html: 10 px, chevron para desplegar, flechas para ordenar):
   así el icono no cambia con la fuente del tema, y sirven en ::before/::after donde el
   estado lo pone JS (th[data-dir]) o el servidor (col-ordenada). Los glifos de texto
   (triángulos y flechas) quedan retirados. ═══ */
:root {
  --gesto-tam: 10px;
  --gesto-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  --gesto-orden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5l3-3 3 3M5 9.5l3 3 3-3'/%3E%3C/svg%3E");
  --gesto-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3M4 7l4-4 4 4'/%3E%3C/svg%3E");
  --gesto-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4'/%3E%3C/svg%3E");
  --gesto-embudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h12L9.5 8.5V13l-3 1.5V8.5z'/%3E%3C/svg%3E");
}
/* Receta: cualquier pseudo .gesto-* pinta la máscara con su propio color. */
.gesto-desplegar::before, .gesto-orden::after, .gesto-embudo::before {
  content: "";
  display: inline-block;
  width: var(--gesto-tam);
  height: var(--gesto-tam);
  flex: none;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--gesto-chevron) center / contain no-repeat;
  mask: var(--gesto-chevron) center / contain no-repeat;
}
/* Desplegar: chevron a la izquierda que rota al abrir; marcador nativo fuera. */
.gesto-desplegar { list-style: none; cursor: pointer; }
.gesto-desplegar::-webkit-details-marker { display: none; }
.gesto-desplegar::before { margin-right: .4rem; color: var(--tinta-3); }
details[open] > .gesto-desplegar::before { transform: rotate(90deg); }
/* Ordenar: doble chevron tenue en reposo; flecha en acento en la columna activa. */
.gesto-orden::after { margin-left: .3rem; color: var(--tinta-3); opacity: .55; -webkit-mask-image: var(--gesto-orden); mask-image: var(--gesto-orden); }
.gesto-orden[data-dir="asc"]::after, .gesto-orden[data-dir="desc"]::after,
[data-dir="asc"] > .gesto-orden::after, [data-dir="desc"] > .gesto-orden::after { color: var(--acento); opacity: 1; }
.gesto-orden[data-dir="asc"]::after, [data-dir="asc"] > .gesto-orden::after { -webkit-mask-image: var(--gesto-asc); mask-image: var(--gesto-asc); }
.gesto-orden[data-dir="desc"]::after, [data-dir="desc"] > .gesto-orden::after { -webkit-mask-image: var(--gesto-desc); mask-image: var(--gesto-desc); }
/* Filtrar: cajita con embudo; azul cuando la columna tiene filtro. */
.gesto-embudo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  padding: 0;
  background: var(--superficie);
  color: var(--tinta-3);
  border: 1px solid var(--linea);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.gesto-embudo::before { width: 8px; height: 8px; -webkit-mask-image: var(--gesto-embudo); mask-image: var(--gesto-embudo); }
.gesto-embudo:hover { color: var(--tinta); border-color: var(--tinta-3); }
.gesto-embudo.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-solido); }
/* Anterior / siguiente: el mismo chevron como SVG inline (icono chev-izq / chev-der) a 10 px. */
.ico.gesto { width: var(--gesto-tam); height: var(--gesto-tam); }
@media (prefers-reduced-motion: no-preference) { .gesto-desplegar::before { transition: transform .12s ease; } }
.acciones-fila { white-space: nowrap; }
.acciones-fila .boton { margin-top: 0; }
code.clave-temporal { background: var(--neutro-suave); padding: .15rem .4rem; border-radius: 4px; }

/* Proyectos (frente B) */
.acciones-pagina { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.acciones-pagina form { margin: 0; }
.ficha-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem 1.2rem;
  margin: 0;
}
.ficha-rejilla dt {
  color: var(--sutil);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}
.ficha-rejilla dd { margin: 0; }
.form-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .2rem 1.2rem;
}
.form-rejilla label { margin: .4rem 0 0; }
.form-rejilla .ancho-completo { grid-column: 1 / -1; }

/* Torre de control (frente D) */
/* minmax(140px) y no 170: con 7 KPIs (Backlog, Programas) a 170 quedaba uno huérfano
   en la segunda fila a 1200 px de ancho. */
.rejilla-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--kpis-gap);
  margin-bottom: 1rem;
  border-top: var(--kpis-borde-sup);
  border-bottom: var(--kpis-borde-inf);
}
/* (T2) UNA receta de KPI para las 13 vistas: etiqueta en versalita arriba, valor mono
   abajo, detalle al pie. El markup de cada vista trae los tres spans en el orden que
   tuviera (los tests afirman esos strings): el orden visual lo impone `order`. */
.tarjeta.kpi {
  display: flex;
  flex-direction: column;
  padding: var(--kpi-pad);
  background: var(--kpi-fondo);
  border: var(--kpi-borde);
  border-right: var(--kpi-separador);
  border-radius: var(--kpi-radio);
}
.rejilla-kpis > .tarjeta.kpi + .tarjeta.kpi { padding-left: var(--kpi-pad-izq-sig); }
/* El ultimo no lleva separador. Fijo y no token: ningun tema quiere cerrar la franja. */
.rejilla-kpis > .tarjeta.kpi:last-child { border-right: var(--kpi-borde); }
.kpi-nombre {
  display: block;
  order: 1;
  margin-bottom: .3rem;
  color: var(--tinta-3);
  font-size: var(--kpi-nombre-tam);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--kpi-nombre-esp);
}
.kpi-valor {
  display: block;
  order: 2;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--kpi-valor-esp);
  color: var(--kpi-valor-tinta);
}
.kpi-valor.verde { color: var(--ok-fuerte); }
.kpi-valor.ambar { color: var(--alerta-fuerte); }
.kpi-valor.rojo, .kpi-valor.alerta { color: var(--peligro-fuerte); }
.kpi-detalle { display: block; order: 3; color: var(--tinta-2); font-size: 11px; margin-top: .3rem; }
/* Lo que no es nombre ni detalle (chips, barras) ocupa el sitio del valor. */
.tarjeta.kpi > :not(.kpi-nombre):not(.kpi-detalle) { order: 2; }
/* El enlace dentro del nombre o del detalle no grita (2c.8): hereda y se subraya al pasar. */
.kpi-nombre a, .kpi-detalle a { color: inherit; }
.filtros { padding: .9rem 1.1rem; margin-bottom: 1rem; }
.filtros .boton { margin-top: 0; }
.barra-avance {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 140px;
  height: 10px;
  margin-right: .45rem;
  background: var(--pista);
  border-radius: 999px;
  overflow: visible;
}
.barra-avance .relleno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  background: var(--azul);
  border-radius: 999px;
}
.barra-avance .marca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--tinta);
}

/* Acciones inline en celdas de tabla */
td.acciones form {
  display: inline-block;
  margin: 0 .15rem 0 0;
}

/* Capacidad RN-10 y gráficos del sprint */
.tabla-capacidad {
  font-size: 11.5px;
}
.tabla-capacidad td,
.tabla-capacidad th {
  padding: .3rem .5rem;
}
.tabla-capacidad tr.sobrecupo td {
  background: var(--peligro-suave);
  color: var(--peligro-fuerte);
  font-weight: 600;
}
.grafico-burndown,
.grafico-velocidad {
  position: relative;
  height: 220px;
}
.capacidad-backlog {
  margin-top: 1rem;
  max-width: 560px;
}

/* ── Edición fluida (actividad 2b.2) ─────────────────────────────── */
.explicacion {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin: 0 0 1rem;
}
.explicacion summary { cursor: pointer; font-weight: 600; color: var(--acento-azul); }
.explicacion summary.gesto-desplegar::before { color: var(--acento-azul); }
.explicacion p { margin: .6rem 0 .2rem; max-width: 72ch; }
.celda-toggle { white-space: nowrap; }
/* (R4.8, D-S5) El paso rápido es un BOTÓN con el verbo escrito: recto, con borde e
   icono propio. El estado es un CHIP redondo y suave: no se parecen ni en forma, ni en
   sitio, ni en contenido. Unas veces es <button> y otras <a> (H-04: «Finalizar» abre
   el cierre), de ahí el inline-flex y la decoración apagada. */
.accion-rapida {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 7px;
  border: 1px solid var(--acento);
  border-radius: 4px;
  background: var(--superficie);
  color: var(--acento-2);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
}
.accion-rapida .ico { width: 10px; height: 10px; }
.accion-rapida:hover { background: var(--acento-suave); text-decoration: none; }
.accion-rapida.finalizar { border-color: var(--ok); color: var(--ok-fuerte); }
.accion-rapida.finalizar:hover { background: var(--ok-suave); }
.accion-rapida.reabrir { border-color: var(--linea); color: var(--tinta-2); }
.accion-rapida.reabrir:hover { background: var(--superficie-2); }
/* Con entregable obligatorio y sin enlace el paso no se puede dar a ciegas: el
   control es un enlace al modal, no un POST que fallaría. */
.pide-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--acento-ambar);
  border-color: var(--acento-ambar);
  font-size: 10px;
  text-decoration: none;
}
.pide-enlace:hover {
  background: var(--acento-ambar);
  border-color: var(--acento-ambar);
  color: var(--sobre-solido);
}
.fecha-inline {
  font-size: 11px;
  padding: .1rem .25rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  margin-left: .35rem;
  vertical-align: middle;
}

/* Tarjetas flotantes: detalle en solo lectura (actividad 2b.2) y modal de edición
   (actividad 2c.3). Desde 2c.3-sexies comparten la misma receta —velo y tarjeta
   centrada— para que ver y editar se sientan igual; el detalle conserva sus clases
   históricas «overlay-drawer» y «panel-drawer», ya sin anclaje al costado. */
.overlay-drawer,
.overlay-modal,
.overlay-confirma {
  position: fixed;
  inset: 0;
  background: var(--velo);
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 4vh 16px;
}
.panel-drawer,
.panel-modal,
.panel-confirma {
  background: var(--superficie);
  border-radius: 10px;
  width: min(720px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
}

/* (2c.4-octies) Diálogo de confirmación de la propia app: reemplaza a window.confirm
   y al aviso nativo de hx-confirm, para que toda pregunta se vea dentro de Radar.
   Se apila por encima del modal de la actividad (z-index 50) y lo pinta radar.js. */
.overlay-confirma { z-index: 50; align-items: center; }
.panel-confirma { width: min(430px, 92vw); padding: 1.1rem 1.25rem; }
.panel-confirma h2 { margin: 0 0 .45rem; font-size: 15px; }
.panel-confirma p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sutil); }
.panel-confirma .acciones { justify-content: flex-end; margin-top: 1.1rem; }
.panel-confirma .boton { margin-top: 0; }

/* (D-C1/D-C3, 17/08) Los tres tonos de la confirmación. La pregunta que decide cuál es
   siempre la misma: ¿qué pasa si me equivoco? Nada → info; le complico el día a otro →
   aviso; no hay vuelta atrás → peligro. «Error» y «éxito» NO están aquí: son
   resultados, se informan después y viven en `.alerta`, no en un diálogo. */
.panel-confirma { border-top: 3px solid var(--info); }
.panel-confirma.tono-aviso { border-top-color: var(--alerta); }
.panel-confirma.tono-peligro { border-top-color: var(--peligro); }
.panel-confirma h2 { display: flex; align-items: baseline; gap: .45rem; }
.confirma-icono { font-size: 15px; line-height: 1; color: var(--info-fuerte); }
.panel-confirma.tono-aviso .confirma-icono { color: var(--alerta-fuerte); }
.panel-confirma.tono-peligro .confirma-icono { color: var(--peligro-fuerte); }
/* El ámbar necesita su propio botón: hasta ahora solo había primario y peligro. */
.boton.aviso { background: var(--alerta-fuerte); border-color: var(--alerta-fuerte); color: var(--sobre-solido); }
.boton.aviso:hover { filter: brightness(.9); }

/* (D-C2) Qué estás cambiando, campo por campo. Rejilla de tres columnas para que las
   flechas queden alineadas aunque los rótulos midan distinto. */
.confirma-cambios {
  list-style: none;
  margin: .7rem 0 0;
  padding: .55rem .7rem;
  background: var(--superficie-2);
  border-radius: 6px;
  font-size: 12px;
}
.confirma-cambios li {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto 1fr;
  align-items: baseline;
  gap: .1rem .5rem;
  padding: .15rem 0;
}
.confirma-cambios .cc-rotulo { color: var(--sutil); }
.confirma-cambios .cc-antes { color: var(--tinta-3); text-decoration: line-through; }
.confirma-cambios .cc-flecha { color: var(--sutil); }
.confirma-cambios .cc-ahora { font-weight: 600; }
.boton.peligro { background: var(--peligro-fuerte); border-color: var(--peligro-fuerte); color: var(--sobre-solido); }
.boton.peligro:hover { filter: brightness(.85); }
.drawer-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}
.drawer-cabecera h2 { margin: 0 0 .25rem; }
.cerrar-drawer {
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--sutil);
  padding: .2rem .4rem;
}
.cerrar-drawer:hover { color: var(--azul-oscuro); }
.drawer-datos {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: .3rem 1rem;
  margin: 0 0 1rem;
  font-size: 12.5px;
}
.drawer-datos dt { font-weight: 600; color: var(--sutil); }
.drawer-datos dd { margin: 0; }
/* (2c.3-sexies) Cifras del detalle: mono + tabular-nums, como en el resto del Cockpit. */
.drawer-datos dd.numero {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* (2c.4-septies) Cabecera y pie del formulario de la actividad —modal y ficha
   completa comparten estas clases—: quién la tiene asignada, cuántas veces se
   reprogramó, el entregable y el historial de solo lectura. */
.linea-responsable {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  font-size: 12.5px;
}
.chip-repro {
  display: inline-block;
  padding: .05rem .35rem;
  border-radius: 8px;
  background: var(--alerta-suave);
  color: var(--alerta-fuerte);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
}
/* Deuda: la actividad sigue abierta y ya arrastra sprints. Se lee en su propia fila
   —nunca en una zona aparte— y usa el rojo del semáforo para separarse del ámbar
   histórico de una reprogramación ya cerrada. */
.chip-repro.deuda {
  background: var(--peligro-suave);
  color: var(--peligro-fuerte);
}
/* (R2.e) Bloqueo abierto en la bitácora. Vive al lado del ↻ y del ⏰ porque es el
   mismo tipo de aviso: se lee en la propia fila de la actividad, nunca aparte. */
.chip-bloqueo {
  display: inline-block;
  padding: .05rem .3rem;
  border-radius: 8px;
  background: var(--peligro-suave);
  font-size: 10.5px;
  vertical-align: middle;
}
/* (R2.f · §10-bis P6) Chip «↻ rutina»: dice que la actividad nació de una plantilla y
   lleva de vuelta a ella. Azul y no ámbar: es información, no una alerta. */
.chip-rutina {
  display: inline-block;
  padding: .05rem .3rem;
  border-radius: 8px;
  background: var(--azul-suave, var(--suave));
  color: var(--azul);
  font-size: 10.5px;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.chip-rutina:hover { text-decoration: underline; }
/* (R4.2) El origen de una ejecución de rutina en el detalle 👁. */
.origen-rutina { background: var(--acento-suave); border-radius: 6px; padding: .4rem .7rem; font-size: 12px; margin: .2rem 0 .6rem; }
.origen-rutina .numero { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.bloque-entregable {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: .2rem 1.2rem;
  padding: .5rem .75rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--superficie-2);
}
.titulo-historial {
  margin: 1.25rem 0 .4rem;
  font-size: 13px;
}
.tabla-historial {
  font-size: 11.5px;
}
.tabla-historial th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sutil);
}
.tabla-historial td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Picker de sprint con carga (actividad 2b.3) */
.overlay-picker {
  position: fixed;
  inset: 0;
  background: var(--velo);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-picker {
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 1rem 1.25rem;
}
.picker-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.picker-cabecera h3 { margin: 0 0 .25rem; }
.filas-picker { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.fila-picker {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie);
  padding: .45rem .7rem;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
button.fila-picker { cursor: pointer; }
button.fila-picker:hover { border-color: var(--acento-azul); }
.fila-picker.es-actual { border-color: var(--acento-azul); font-weight: 600; }
.fila-picker.carga-ambar { color: var(--acento-ambar); border-color: var(--acento-ambar); }
.fila-picker.quitar-sprint { color: var(--sutil); }

/* Cabecera compartida de las vistas de navegación (_cabecera.html, estilo Cockpit):
   título + subtítulo a la izquierda; búsqueda y fecha a la derecha.
   2c.3-bis: banda blanca a todo lo ancho del main — los márgenes negativos anulan
   el padding de .contenido (1.5rem arriba, 1.75rem a los lados). */
.cabecera-tablero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: var(--cab-alineacion);
  margin: var(--cab-margen);
  padding: var(--cab-pad);
  background: var(--cab-fondo);
  color: var(--cab-tinta);
  border-bottom: var(--cab-borde-inf);
}
/* El bloque del titulo: en Clasico se vuelve una linea con el subtitulo al lado. */
.cabecera-tablero > div:first-child { display: var(--cab-datos-display); align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; }
.cabecera-tablero h1 { font-size: var(--h1-tam); font-weight: var(--h1-peso); letter-spacing: var(--h1-esp); margin: 0; }
/* Rotulo sobre el titulo: `content: none` lo apaga en los temas que no lo usan. */
.cabecera-tablero h1::before {
  content: var(--cab-rotulo);
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cab-rotulo-tinta);
}
.cabecera-tablero .subtitulo { margin: var(--cab-sub-margen); font-size: 12.5px; color: var(--cab-sub-tinta); }
.acciones-cabecera { display: flex; align-items: center; gap: .8rem; }
.acciones-cabecera form { margin: 0; }
.acciones-cabecera input[type="search"] {
  width: 280px;
  padding: .38rem .6rem;
  font-size: 12.5px;
  border: 1px solid var(--cab-busqueda-borde);
  border-radius: var(--radio-control);
  background: var(--cab-busqueda-fondo);
  color: var(--cab-busqueda-tinta);
}
.acciones-cabecera input[type="search"]::placeholder { color: var(--cab-busqueda-hueco); }
.fecha-hoy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cab-fecha-tinta);
  white-space: nowrap;
}

/* ── Sprint board (2c.4 / 2c.4-bis): banda del sprint, grupos y filas ────
   Estética Cockpit: ver .claude/skills/diseno-frontend/SKILL.md */
.sb-banda { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.sb-banda-norte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--tinta);
}
.sb-flecha:hover { border-color: var(--azul); text-decoration: none; }
.sb-flecha.off { opacity: .35; pointer-events: none; }
.sb-flecha .ico, .pg-pasos .ico, .gantt-ventana .ico, .boton.chico .ico { width: var(--gesto-tam); height: var(--gesto-tam); }
.sb-selector { margin: 0; }
.sb-selector select {
  width: auto;
  padding: .2rem .4rem;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
}
.sb-fechas { font-family: var(--mono); font-size: 11px; color: var(--sutil); white-space: nowrap; }
.sb-chip {
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--acento-verde);
  color: var(--blanco);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
/* (2c.4-octies) Un sprint cerrado es histórico, no actividad viva: gris y en hueco,
   para que no compita con el verde de «Sprint actual» cuando ambos coinciden. */
.sb-chip.cerrado {
  background: transparent;
  color: var(--sutil);
  border: 1px solid var(--borde);
}
.sb-kpis { display: flex; gap: 18px; }
.sb-kpi { display: inline-block; }
.sb-kpi-etiqueta {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--sutil);
}
.sb-kpi-valor {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
}
.sb-seg {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--borde);
  border-radius: 7px;
  overflow: hidden;
}
/* El primer segmentado empuja el bloque a la derecha; el segundo se pega a él
   (dos margin-left:auto se repartirían el hueco y los separarían). */
.sb-seg + .sb-seg { margin-left: 0; }
.sb-seg a { padding: 3px 10px; font-size: 11px; color: var(--tinta); }
.sb-seg a + a { border-left: 1px solid var(--borde); }
.sb-seg a:hover { text-decoration: none; background: var(--seleccion); }
.sb-seg a.activo { background: var(--seg-activo-fondo); color: var(--sobre-solido); font-weight: 600; }
.sb-banda .boton { margin-top: 0; }
/* Fila sur (2c.4-quinquies): la salud del sprint, separada de los datos por un filete */
.sb-banda-salud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}
.sb-avance { min-width: 210px; }
.sb-avance-medida { display: flex; align-items: center; gap: 8px; }
.sb-avance-medida .barra-avance { width: 96px; margin: 0; }
.sb-avance-medida .sb-kpi-valor { font-size: 12.5px; }
.sb-avance-plan {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  white-space: nowrap;
}
.sb-frase { font-size: 11.5px; margin-left: auto; }
.sb-ayuda summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  font-size: 10px;
  color: var(--sutil);
  cursor: pointer;
  list-style: none;
}
.sb-ayuda summary::-webkit-details-marker { display: none; }
.sb-ayuda p { margin: .4rem 0 0; max-width: 72ch; font-size: 11.5px; }

/* Paneles por grupo (2c.4-ter): riel del responsable a la izquierda, actividades a la derecha */
.sb-grupos { display: grid; gap: 8px; margin-top: 12px; }
.sb-grupo,
.sb-burndown {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}
.sb-grupo { display: grid; grid-template-columns: 220px 1fr; }
.sb-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-right: 1px solid var(--borde);
  background: var(--superficie-2);
}
.sb-rail-cab { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sb-rail .sutil { font-size: 11px; }
.sb-rail .sb-cap { width: 100%; }
.sb-rail-horas {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sutil);
}
/* (2c.4-septies) Cumplimiento y puntualidad de la persona: dos pares etiqueta/valor en
   una sola línea del riel, un punto por debajo de los KPIs de la banda. */
.sb-rail-metrica { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; }
.sb-rail-metrica .sb-kpi-etiqueta { display: inline; font-size: 9px; }
.sb-rail-metrica .sb-kpi-valor { font-size: 11px; }
.sb-titulo { font-size: 12.5px; font-weight: 600; color: inherit; }
.sb-grupo.destacado { border-color: var(--acento-ambar); }
.sb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--avatar-fondo);
  color: var(--sobre-solido);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.sb-grupo.destacado .sb-avatar { background: var(--acento-ambar); }
.sb-cap {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 5px;
  border-radius: 999px;
  background: var(--pista);
  overflow: hidden;
}
.sb-cap .relleno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--sem-verde);
  border-radius: 999px;
}
.sb-cap .relleno.excede { background: var(--sem-rojo); }
.sb-cap .relleno.ajustado { background: var(--sem-amarillo); }
/* (8/08) Medidas del riel: cada grupo lleva su propia estadística, así que la barra
   dejó de ser una sola —Carga— y necesita nombre y valor. Etiqueta y cifra en un
   renglón, barra debajo, todo al ancho del riel. El azul distingue el avance (cierre)
   de la carga (ocupación), que antes se veían idénticas; las s-* siguen el semáforo
   del proyecto para que el riel diga lo mismo que la Torre. */
.sb-medida { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.sb-medida-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.sb-medida-et {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sutil);
}
.sb-medida-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--tinta);
}
.sb-cap .relleno.azul { background: var(--azul); }
.sb-cap .relleno.s-verde { background: var(--sem-verde); }
.sb-cap .relleno.s-amarillo { background: var(--sem-amarillo); }
.sb-cap .relleno.s-rojo { background: var(--sem-rojo); }
.sb-cap .relleno.s-gris { background: var(--sem-gris); }
.sb-cap .relleno.s-azul { background: var(--sem-azul); }
.sb-cap .relleno.s-pausa { background: var(--sem-pausa); }
/* La marca del plan sobresale de la barra: sin el overflow visible se recortaría. */
.sb-medida .sb-cap { overflow: visible; }
.sb-cap .marca {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--tinta);
}

/* Panel de actividades: tarjetas (vista por defecto) o lista con edición completa */
.sb-actividades { min-width: 0; padding: 10px 12px; }
.sb-actividades.modo-lista { padding: 0; }
.sb-actividades.modo-lista .sb-fila:first-child { border-top: 0; }
.sb-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.sb-carta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-top: 3px solid var(--sem-gris);
  border-radius: 8px;
  background: var(--blanco);
}
.sb-carta.e-gris { border-top-color: var(--sem-gris); }
.sb-carta.e-verde { border-top-color: var(--estado-proceso-solido); }
.sb-carta.e-azul { border-top-color: var(--estado-final-solido); }
.carta-cab { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.sb-carta .accion-rapida { flex: none; margin-left: auto; }
.carta-nombre {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carta-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.carta-origen {
  font-size: 10.5px;
  /* Crece para empujar las horas al extremo derecho aunque el chip ↻ ocupe el pie. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .sb-grupo { grid-template-columns: 1fr; }
  .sb-rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
    padding: 8px 14px;
  }
  .sb-rail .sb-cap { width: 90px; }
  .sb-fila-indicadores { padding-left: 0; }
}

/* Filas de tarea (2c.4-ter): dos líneas —contenido e indicadores— con columnas fijas */
.sb-fila {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 14px 8px 11px;
  border-top: 1px solid var(--borde);
  border-left: 3px solid transparent;
}
.sb-fila.e-gris { border-left-color: var(--sem-gris); }
.sb-fila.e-verde { border-left-color: var(--estado-proceso-solido); }
.sb-fila.e-azul { border-left-color: var(--estado-final-solido); }
.sb-fila-contenido {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 64px;
  align-items: start;
  column-gap: 8px;
}
.sb-fila-contenido .accion-rapida { grid-column: 1; }
.sb-nombre {
  grid-column: 2;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-fila-contenido .sb-horas { grid-column: 3; }
.sb-fila-indicadores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-left: 34px; /* casilla (26px) + separación: alinea con el título */
}
.sb-fila-indicadores > .semaforo {
  min-width: 78px;
  text-align: center;
  font-size: 9px;
  padding: .1rem .45rem;
}
.sb-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--sutil);
  font-variant-numeric: tabular-nums;
}
.sb-meta .semaforo { font-size: 9px; padding: .1rem .45rem; }
.sb-horas {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  white-space: nowrap;
}
.sb-acciones {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.sb-acciones .boton.chico { font-size: 10px; }
.sb-vacio { margin: 0; }
.sb-actividades.modo-lista .sb-vacio { padding: 10px 14px; }
.sb-finalizadas { border-top: 1px solid var(--borde); margin-top: 8px; }
.sb-finalizadas > summary {
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--sutil);
}
.sb-actividades.modo-lista .sb-finalizadas { margin-top: 0; }
.sb-actividades.modo-lista .sb-finalizadas > summary { padding: 6px 14px; }
.sb-finalizadas > summary::-webkit-details-marker { display: none; }
/* Burn-down principal (feedback 2c.4-ter), colapsable desde su título (2c.4-quinquies) */
.sb-burndown { margin-top: 12px; padding: 10px 14px 12px; }
.sb-burndown > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  margin-bottom: 6px;
}
.sb-burndown > summary::-webkit-details-marker { display: none; }
/* Triángulo propio: apunta a la derecha plegado y abajo desplegado */
/* (T8) El chevron lo pone .gesto-desplegar en la plantilla. */
.sb-burndown > summary:hover .sb-titulo { color: var(--azul); }
.sb-burndown .sb-titulo { margin-bottom: 0; }
.sb-burndown:not([open]) { padding-bottom: 10px; }

/* (16/08) Id del proyecto en el portafolio: monoespaciado y estrecho, para que se lea
   como identificador y no como una cifra que se pueda sumar. */
.td-id {
  width: 3.5rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--sutil);
}

/* (R2.f) Franja de rutinas: el trabajo recurrente que toca en las fechas de ESTE
   sprint y todavía no existe como actividad. Vive aquí —y no solo en /rutinas—
   porque el único momento en que estas horas pueden competir por la capacidad es
   la planificación; generadas fuera, vuelven a ser invisibles. Se pinta en ámbar
   por lo mismo: es un aviso, no una tabla más. */
.sb-rutinas {
  margin-top: 12px;
  padding: 10px 14px 12px;
  border-left: 4px solid var(--alerta-fuerte);
  background: var(--alerta-suave);
}
.sb-rutinas .sb-titulo { margin-bottom: 0; }
.sb-rutinas-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sb-rutinas-cab .sutil { color: var(--alerta-fuerte); }
.sb-rutinas-horas {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--alerta-fuerte);
}
.sb-rutinas table { width: 100%; margin: 0; background: var(--superficie); }
.sb-rutinas td, .sb-rutinas th { vertical-align: middle; }
.sb-rutinas .rt-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.sb-rutinas .rt-periodo { font-family: var(--mono); font-size: 11px; }
.sb-rutinas .rt-pie { margin: .6rem 0 0; text-align: right; }

/* (2c.5) «Movimiento del sprint»: mismo lenguaje plegable que el burn-down, porque es
   otra lectura del sprint y no una vista aparte. Tres cubos en columnas que caen a una
   sola cuando no hay ancho. El de «Rodaron» se destaca: es la conversación difícil de
   la review, no un dato más. */
.sb-movimiento {
  margin-top: 12px;
  padding: 10px 14px 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.sb-movimiento > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.sb-movimiento > summary::-webkit-details-marker { display: none; }
/* (T8) El chevron lo pone .gesto-desplegar en la plantilla. */
.sb-movimiento > summary:hover .sb-titulo { color: var(--azul); }
.sb-movimiento .sb-titulo { margin-bottom: 0; }
.sb-mov-resumen { font-size: 11.5px; }
.sb-mov-cubos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.sb-mov-cubo {
  min-width: 0;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.sb-mov-cubo.destacado { border-color: var(--acento-ambar); }
.sb-mov-cubo h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
}
.sb-mov-lista { margin: 0; padding: 0; list-style: none; }
.sb-mov-lista li {
  padding: 4px 0;
  border-top: 1px solid var(--borde);
  font-size: 12px;
  line-height: 1.35;
}
.sb-mov-lista li:first-child { border-top: 0; }
.sb-mov-lista .sutil { display: block; font-size: 10.5px; }

/* (2c.9) Subtareas en la ficha del proyecto: la única vista donde una madre se ve, así
   que el parentesco tiene que leerse sin explicación. La madre se marca con un filete
   azul a la izquierda y la hija se indenta con su flecha. Sin árboles plegables: son
   dos niveles como máximo y el ruido no compensa. */
.fila-agrupadora > td:first-child { box-shadow: inset 3px 0 0 var(--azul); }
/* (H-10, CP-3c) La fila madre se distingue por el FONDO, no por la negrita. Dentro
   de una tabla la negrita es del encabezado: repartida por las celdas deja de señalar
   nada y solo hace más denso el bloque de texto. */
.fila-agrupadora > td { background: var(--seleccion); }
.fila-subtarea > td:nth-child(2) { padding-left: 22px; }
.marca-subtarea { margin-left: -14px; margin-right: 4px; color: var(--sutil); }

/* (2d.9) Selección múltiple y barra de planificación. La barra solo existe cuando hay
   algo marcado, así que puede permitirse destacar: es una zona de acción, no un filtro. */
.celda-sel { width: 28px; text-align: center; }
.act-seleccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--seleccion);
  border: 1px solid var(--acento);
  border-radius: 8px;
}
.sel-conteo { font-size: 12px; }
.sel-conteo strong { font-family: var(--mono); font-size: 14px; }
.act-seleccion .sel-campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  color: var(--sutil);
}
.act-seleccion select { font-size: 12px; }
/* El reparto de efectos del modal: la línea de reprogramadas tiene que saltar a la
   vista, porque es la única que avisa de que se está rompiendo un compromiso. */
.plan-efectos { margin: 0 0 4px; padding: 0; list-style: none; }
.plan-efectos > li {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  border-left: 3px solid var(--borde);
  font-size: 13px;
}
.plan-efectos .sutil { display: block; font-size: 11.5px; }
.plan-ok { background: var(--ok-suave); border-left-color: var(--ok); }
.plan-alerta { background: var(--alerta-suave); border-left-color: var(--alerta-fuerte); }
.plan-detalle {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--tinta);
}
.plan-detalle .sutil { display: inline; }
.sb-cierre { margin-top: 12px; }

/* Vista Lista (2c.4-quinquies): el sprint completo en una tabla plana y ordenable */
.sb-lista { margin-top: 12px; padding: 0; overflow-x: auto; }
.tabla-lista { margin: 0; }
.tabla-lista th { white-space: nowrap; }
.tabla-lista td { vertical-align: middle; }
.tabla-lista td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* (2c.4-sexies) El código («Id Backlog») es identificador, no cifra: mono pero alineado
   a la izquierda para que la columna se lea como una lista de códigos. */
.tabla-lista td.sb-codigo { text-align: left; color: var(--sutil); }
/* El estado se lee por el borde izquierdo, igual que en las tarjetas y las filas */
.tabla-lista tbody tr { border-left: 3px solid transparent; }
.tabla-lista tbody tr.e-gris { border-left-color: var(--sem-gris); }
.tabla-lista tbody tr.e-verde { border-left-color: var(--estado-proceso-solido); }
.tabla-lista tbody tr.e-azul { border-left-color: var(--estado-final-solido); }
.tabla-lista .sb-nombre { display: block; max-width: 34ch; }
.tabla-lista .fecha-inline { width: 118px; }
.tabla-lista .sb-acciones { flex-wrap: nowrap; }

/* ---- Orden y filtro en cliente (2c.3-ter, static/js/radar.js) ---- */

/* Tablas: th con data-orden se vuelve clickeable y muestra la dirección */
table[data-ordenable] th[data-orden] { cursor: pointer; user-select: none; }
table[data-ordenable] th[data-orden]:hover { color: var(--tinta); }
/* (T8) La flecha la pinta la misma receta que Programas y Backlog (.gesto-orden). */
table[data-ordenable] th[data-orden]::after {
  content: ""; display: inline-block; width: var(--gesto-tam); height: var(--gesto-tam); margin-left: .3rem; vertical-align: -1px;
  background: currentColor; color: var(--tinta-3); opacity: .55;
  -webkit-mask: var(--gesto-orden) center / contain no-repeat; mask: var(--gesto-orden) center / contain no-repeat;
}
table[data-ordenable] th[data-dir="asc"]::after, table[data-ordenable] th[data-dir="desc"]::after { color: var(--acento); opacity: 1; }
table[data-ordenable] th[data-dir="asc"]::after { -webkit-mask-image: var(--gesto-asc); mask-image: var(--gesto-asc); }
table[data-ordenable] th[data-dir="desc"]::after { -webkit-mask-image: var(--gesto-desc); mask-image: var(--gesto-desc); }
table[data-ordenable] th[data-dir] { color: var(--tinta); }

/* (2d.4b) El embudo de Programas, reusado dentro del <th>: el menú se posiciona
   absoluto, así que la celda tiene que ser su marco de referencia. */
table[data-ordenable] th[data-filtro] { position: relative; white-space: nowrap; }
table[data-ordenable] th[data-filtro] .fc-embudo { margin-left: .3rem; vertical-align: middle; }

/* Aviso vivo: las tarjetas KPI las calcula el servidor sobre el recorte de la URL,
   de modo que un filtro de columna las dejaría aparentemente descuadradas. */
.filtro-eco {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--sutil);
}
.filtro-eco button {
  font: inherit;
  color: var(--acento-azul);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Celda de encabezado de tarjeta (Programas): botón de orden + embudo de filtro */
.fc { position: relative; display: inline-flex; align-items: center; gap: .15rem; }
.fc-orden {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.fc-orden:hover { color: var(--tinta); }
/* (T8) .fc-orden lleva la clase gesto-orden en la plantilla; el estado va en el .fc padre. */
.fc[data-dir] .fc-orden { color: var(--tinta); }
/* (T8) .fc-embudo = .gesto-embudo (la clase se conserva porque radar.js la busca). */
.fc-embudo { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none; padding: 0; background: var(--superficie); color: var(--tinta-3); border: 1px solid var(--linea); border-radius: 4px; cursor: pointer; line-height: 1; }
.fc-embudo::before { content: ""; display: inline-block; width: 8px; height: 8px; background: currentColor; -webkit-mask: var(--gesto-embudo) center / contain no-repeat; mask: var(--gesto-embudo) center / contain no-repeat; }
.fc-embudo:hover { color: var(--tinta); border-color: var(--tinta-3); }
.fc-embudo.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-solido); }

/* Menú desplegable del embudo */
.menu-filtro {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 140px;
  margin-top: .25rem;
  padding: .25rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.menu-filtro button {
  display: block;
  width: 100%;
  padding: .3rem .5rem;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
}
.menu-filtro button:hover { background: var(--fondo); }
.menu-filtro button.activo { background: var(--info-suave); color: var(--info-fuerte); font-weight: 600; }

/* Badge de la cabecera compartida («P3» antes del título de programa) */
.cab-badge {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--cab-badge-tinta);
  background: var(--cab-badge-fondo);
  border: var(--cab-badge-borde);
  border-radius: 5px;
  padding: .1rem .4rem;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Personal (2c.12): banda compartida + modo Equipo + matriz personas × sprints.
   Las reglas venían de un <style> dentro de personal.html; al subirlas aquí se
   escriben en el lenguaje del Cockpit (px, tokens, mono con tabular-nums) y se
   ACOTAN las clases de nombre genérico (.horas, .punto, .modo, .pagina): tres
   páginas más usan .punto con su propio significado en sus <style> locales.
   ───────────────────────────────────────────────────────────────────────────── */

/* Toda tabla ancha scrollea dentro de su tarjeta; la página nunca en horizontal. */
.envoltura-tabla,
.act-envoltura { overflow-x: auto; }
/* (R4.8) Con el verbo escrito en el paso rápido, la columna Acciones del Backlog no cabe
   en una línea a 1 400 px: se deja envolver en dos en vez de desbordar la tarjeta. */
.act-envoltura td.acciones-fila { white-space: normal; min-width: 190px; }
.act-envoltura td.acciones-fila > * { margin: 2px 0; }

/* Código del sprint mirado, entre las flechas ◂ ▸ de la banda */
.sb-titulo-sprint {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Modo Equipo — hereda de .tabla-lista; solo ajusta lo propio de la persona */
.tabla-equipo td { vertical-align: middle; }
.tabla-equipo .sb-avatar { margin-right: 6px; vertical-align: middle; }
.eq-cargo {
  display: block;
  margin-left: 30px;
  font-size: 10.5px;
  color: var(--sutil);
}
.eq-horas {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sutil);
  white-space: nowrap;
}
/* Los sprints por venir son compromiso, no ejecución: se apartan con fondo propio. */
.tabla-equipo th.col-proximo { color: var(--acento-azul); }
.tabla-equipo td.col-proximo { background: var(--seleccion); white-space: nowrap; }
.tabla-equipo td.col-proximo .eq-excede { color: var(--acento-ambar); font-weight: 700; }

/* Matriz personas × sprints (2b.4, repintada en 2c.12) */
.cabecera-personal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 10px 0 12px;
}
.selector-modo {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: 7px;
  overflow: hidden;
}
.selector-modo .modo { padding: 3px 10px; font-size: 11px; color: var(--tinta); }
.selector-modo .modo + .modo { border-left: 1px solid var(--borde); }
.selector-modo .modo:hover { background: var(--seleccion); text-decoration: none; }
.selector-modo .modo.activo { background: var(--seg-activo-fondo); color: var(--sobre-solido); font-weight: 600; }
/* (10/09) Tira de pestañas de Planeación: la misma píldora del selector de modo, con el
   aire que la despega de la cabecera. El Calendario dejó de ser una entrada del menú y es
   una vista de Planeación; esta tira es el único sitio donde se ve esa relación. */
.pestanas-planeacion { margin: 0 0 14px; }
/* (10/09, Hedi) Un punto más grandes que el selector de modo del que heredan: aquí no son un
   filtro dentro de la página, son las DOS caras de Planeación, y se tocan tanto como el menú. */
.pestanas-planeacion .modo { padding: 5px 15px; font-size: 12.5px; }
.paginador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.paginador .pagina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--azul);
  font-weight: 700;
  line-height: 1;
}
.paginador .pagina:hover { border-color: var(--azul); text-decoration: none; }
.cabecera-personal .leyenda {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--sutil);
}
.cabecera-personal .leyenda .punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
}
.matriz th.col-sprint { white-space: nowrap; }
.matriz th.col-sprint.en-curso {
  color: var(--acento-azul);
  border-bottom: 2px solid var(--acento-azul);
}
.matriz td.col-persona { font-weight: 600; white-space: nowrap; }
/* La celda entera es el enlace al drill-down: el padding vive en el <a>, no en el <td>. */
.matriz td.celda { min-width: 104px; padding: 0; vertical-align: middle; }
.matriz td.celda.en-curso { background: var(--seleccion); }
.matriz td.celda.sobre { background: var(--resalte); }
.celda-enlace { display: block; padding: .45rem .6rem; color: inherit; }
.celda-enlace:hover { background: var(--seleccion); text-decoration: none; }
.mini-barra {
  display: flex;
  height: 6px;
  margin-bottom: 4px;
  border-radius: 3px;
  background: var(--pista);
  overflow: hidden;
}
.mini-barra .seg.cerrado { background: var(--acento-verde); }
.mini-barra .seg.pendiente { background: var(--acento-azul); }
.celda.sobre .mini-barra .seg.pendiente { background: var(--acento-ambar); }
.matriz .horas {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sutil);
  white-space: nowrap;
}
.matriz .horas.ambar { color: var(--acento-ambar); font-weight: 700; }
.matriz td.col-resumen { min-width: 260px; font-size: 11px; color: var(--sutil); }

/* ─────────────────────────────────────────────────────────────────────────────
   Ficha de persona (2c.12 §5): /personas/{id}. Cuatro bloques apilados —
   Identidad, Resultados, Carga y Trabajo— que reusan la rejilla de KPIs, la
   barra .sb-cap y la tabla .tabla-lista; aquí solo vive lo propio de la ficha.
   ───────────────────────────────────────────────────────────────────────────── */
.fp-identidad {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.fp-identidad h1 { margin: 0; font-size: 19px; }
/* Avatar grande: mismo círculo del board, a escala de portada. */
.sb-avatar.grande { width: 44px; height: 44px; flex: 0 0 44px; font-size: 15px; }
.fp-datos { min-width: 0; flex: 1; }
.fp-atributos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--sutil);
}
/* Separador entre atributos: un punto medio, sin marcado extra. */
.fp-atributos span + span::before { content: "·"; margin-right: 10px; }
.fp-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-seccion {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fp-seccion .sutil { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Carga por sprint: la barra manda el ancho de su columna y la cifra no salta. */
.fp-carga td { vertical-align: middle; }
.fp-carga .sb-cap { width: 120px; margin-right: 8px; vertical-align: middle; }
.fp-carga .eq-excede { font-size: 10.5px; color: var(--acento-ambar); font-weight: 700; }
.fp-trabajo td { vertical-align: middle; }
.fp-trabajo td.sb-codigo { text-align: left; color: var(--sutil); }

/* ─────────────────────────────────────────────────────────────────────────────
   Panel de carga de la vista Personal (2c.12 §4.4 y §4.5): el drill-down que se
   abre al pinchar una celda. Es el modal de siempre, más ancho porque lleva una
   tabla, con el control de reasignar en la última columna (solo Coordinador).
   ───────────────────────────────────────────────────────────────────────────── */
.panel-modal.ancho { width: min(920px, 96vw); }
.pn-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pn-identidad h2 { margin: 0; font-size: 16px; }
.pn-identidad p { margin: 3px 0 0; font-size: 11.5px; }
.pn-carga { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.pn-carga .sb-cap { width: 140px; flex: 0 0 140px; }
.pn-carga .horas {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--sutil);
}
.pn-carga .horas.ambar { color: var(--acento-ambar); font-weight: 700; }
.pn-actividades td { vertical-align: middle; }
.pn-actividades td.sb-codigo { text-align: left; color: var(--sutil); }
.pn-reasignar { display: flex; align-items: center; gap: 6px; }
.pn-reasignar select { font-size: 11.5px; padding: .2rem .3rem; max-width: 150px; }
.pn-reasignar .boton { margin-top: 0; }
/* (R2.e) Bitácora de la actividad: se pinta dentro del drawer de detalle y también
   suelta en /actividades/{id}/apuntes, así que vive aquí y no en un extra_css. */
.apuntes-actividad { margin: 14px 0 4px; }
.apuntes-actividad h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sutil);
}
.lista-apuntes { margin: 0; padding: 0; list-style: none; }
.lista-apuntes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 11.5px;
}
.lista-apuntes li:last-child { border-bottom: 0; }
.ap-fecha { font-family: var(--mono); font-size: 10.5px; color: var(--sutil); }
.ap-autor { font-weight: 600; }
.ap-nota { flex: 1 1 200px; }
.ap-bloqueo { color: var(--alerta-fuerte); font-weight: 700; }
/* Un chip por origen: leer la trazabilidad sin el origen es leerla a medias. */
.ap-origen {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--neutro-suave);
  color: var(--neutro-fuerte);
}
.ap-origen.en_sprint { background: var(--info-suave); color: var(--info-fuerte); }
.ap-origen.fuera_sprint { background: var(--ok-suave); color: var(--ok-fuerte); }
.ap-origen.spot { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.ap-origen.gestion { background: var(--pausa-suave); color: var(--pausa-fuerte); }

/* Etiqueta solo para lectores de pantalla: el select ya se explica solo en pantalla. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- (R3 · 3.4) Gantt: rejilla CSS, no canvas ------------------------------------
   Una columna por sprint (`--gantt-cols`) y la barra como un elemento con
   `grid-column: inicio / fin+1`. Las celdas de fondo y la barra viven en la MISMA
   celda del grid, así que se apilan: el fondo pinta la columna de hoy y la barra
   queda encima sin necesidad de posicionamiento absoluto. */
.gantt-caja { margin-top: 18px; }
.gantt-caja > summary { cursor: pointer; list-style: none; }
.gantt-caja > summary::-webkit-details-marker { display: none; }
.gantt-caja > summary h2 { display: inline-block; margin: 0; }
/* (T8) El chevron lo pone .gesto-desplegar en la plantilla. */
.gantt {
  margin-top: 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--blanco);
  overflow-x: auto;
}
.gantt-fila {
  display: grid;
  grid-template-columns: 220px minmax(360px, 1fr);
  align-items: center;
  border-top: 1px solid var(--borde);
  min-height: 30px;
}
.gantt-fila:first-child { border-top: 0; }
.gantt-et {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  /* El nombre no puede empujar la rejilla: se recorta y el título completo va en `title`. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gantt-et.n1 { padding-left: 24px; color: var(--sutil); }
.gantt-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--gantt-cols), minmax(52px, 1fr));
  align-items: center;
  min-height: 26px;
}
.gantt-col {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  font-size: 10.5px;
  border-left: 1px solid var(--borde);
}
.gantt-col a { color: var(--tinta); text-decoration: none; font-family: var(--mono); }
.gantt-col small { color: var(--sutil); font-size: 9.5px; }
.gantt-celda { grid-row: 1; height: 100%; border-left: 1px solid var(--linea-suave); }
/* La columna de hoy: el mismo ancla temporal que usa `sprint_actual()`. */
.gantt-col.hoy, .gantt-celda.hoy { background: var(--resalte); }
.gantt-col.hoy a { font-weight: 600; }
.gantt-cabecera { background: var(--superficie-2); }
.gantt-barra {
  grid-row: 1;
  height: 15px;
  margin: 0 2px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  /* El estado va dentro de la barra pero solo se lee si cabe: en una barra de una sola
     columna estorbaría, y el dato ya está en el color y en el `title`. */
  font-size: 0;
  color: transparent;
  background: var(--sem-gris);
}
.gantt-barra:hover { outline: 2px solid var(--azul); outline-offset: 1px; }
.gantt-barra.e-gris { background: var(--linea); }
.gantt-barra.e-verde { background: var(--estado-proceso-solido); }
.gantt-barra.e-azul { background: var(--estado-final-solido); }
.gantt-barra.e-aprobada { background: var(--estado-aprobada-solido); }
.gantt-barra.e-anulada { background: repeating-linear-gradient(45deg, var(--linea-suave), var(--linea-suave) 3px, var(--superficie-2) 3px, var(--superficie-2) 6px); }
/* La madre no es trabajo: es el corchete que abarca a sus hijas, y se dibuja como tal. */
.gantt-barra.agrupadora {
  height: 8px;
  background: transparent;
  border: 2px solid var(--sutil);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.gantt-fila.es-madre .gantt-et { font-weight: 600; }
.gantt-plan { height: 10px; border-radius: 5px; opacity: 0.55; }
.gantt-plan.s-verde { background: var(--sem-verde); }
.gantt-plan.s-amarillo { background: var(--sem-amarillo); }
.gantt-plan.s-rojo { background: var(--sem-rojo); }
.gantt-plan.s-gris { background: var(--sem-gris); }
.gantt-plan.s-azul { background: var(--sem-azul); }
.gantt-plan.s-pausa { background: var(--sem-pausa); }
.gantt-plan-et { font-weight: 600; }
.gantt-sin-barra {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-left: 6px;
  font-size: 10.5px;
  color: var(--sutil);
}
.gantt-ventana { display: flex; gap: 4px; }
.gantt-ventana a {
  padding: 0 6px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  color: var(--sutil);
  text-decoration: none;
  font-size: 12px;
}
.gantt-ventana a:hover { background: var(--fondo); color: var(--tinta); }
.gantt-banda {
  padding: 4px 10px;
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  font-size: 11px;
  color: var(--sutil);
}
.gantt-suelta .gantt-et { color: var(--sutil); }
.gantt-suelta-txt { grid-column: 1 / -1; padding-left: 6px; font-size: 11px; color: var(--sutil); }

/* ---- (R3 · 3.4) Curva S ------------------------------------------------------------ */
.curva-caja { margin-top: 14px; }
.curva-cab { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.curva-lienzo { height: 260px; }
.curva-pie { margin-top: 8px; font-size: 11.5px; }
.curva-unidad a { cursor: pointer; }
/* Barra de mandos del Gantt: zoom de columnas y agrupación de filas. */
.gantt-mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--sutil);
}
.gantt-grupo-et {
  grid-column: 1 / -1;
  padding: 3px 10px;
  background: var(--superficie-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--sutil);
}
/* Barra de proyecto en el Gantt del frente: el tramo lo dice la barra y cuánto de ese
   tramo está hecho, el relleno (RN-02). */
.gantt-barra.gantt-frente { height: 13px; opacity: 1; overflow: hidden; background: var(--pista); }
.gantt-frente .gantt-relleno { display: block; height: 100%; }
.gantt-frente.s-verde .gantt-relleno { background: var(--sem-verde); }
.gantt-frente.s-amarillo .gantt-relleno { background: var(--sem-amarillo); }
.gantt-frente.s-rojo .gantt-relleno { background: var(--sem-rojo); }
.gantt-frente.s-gris .gantt-relleno { background: var(--sem-gris); }
.gantt-frente.s-azul .gantt-relleno { background: var(--sem-azul); }
.gantt-frente.s-pausa .gantt-relleno { background: var(--sem-pausa); }
.frente-lt { border-top: 1px solid var(--borde); padding: 6px 10px 10px; }
.frente-lt > summary { cursor: pointer; font-size: 12px; color: var(--sutil); }
.frente-linea-tiempo { margin-top: 6px; }
/* «⤢ Ampliar» (3.4.8): el mismo contenido de la ficha, a ancho completo. */
.panel-modal.ancho { width: 1100px; max-width: 96vw; }
.gantt-caja > summary { display: flex; align-items: center; gap: 10px; }
.gantt-ampliar { margin-left: auto; }

/* ---- (3.5-bis) Paginación del Backlog ---------------------------------------------- */
.paginador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 12px;
}
.pg-pasos { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pg-pasos a, .pg-actual, .pg-inerte, .pg-hueco {
  min-width: 26px;
  padding: 3px 6px;
  text-align: center;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
}
.pg-pasos a { color: var(--azul); text-decoration: none; border: 1px solid var(--borde); }
.pg-pasos a:hover { background: var(--fondo); }
.pg-actual { border: 1px solid var(--acento); background: var(--acento); color: var(--sobre-solido); }
.pg-inerte, .pg-hueco { color: var(--tinta-3); }
.pg-tamano a { color: var(--azul); }
/* Cabecera que ordena: el enlace ocupa la celda para que el objetivo de clic sea grande. */
.col-orden { color: inherit; text-decoration: none; }
.col-orden:hover { text-decoration: underline; }
.col-orden { color: inherit; text-decoration: none; }
th.col-ordenada { background: var(--papel); }
th.col-ordenada .col-orden { color: var(--tinta); }
/* Embudo servido por el servidor: <details> nativo, sin JS. */
.col-embudo { display: inline-block; position: relative; }
.col-embudo > summary { list-style: none; margin-left: .3rem; vertical-align: middle; }
.col-embudo > summary::-webkit-details-marker { display: none; }
.col-embudo[open] > summary { color: var(--tinta); border-color: var(--tinta-3); }
.col-menu {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  min-width: 190px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  font-weight: 400;
}
.col-menu a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--tinta);
  text-decoration: none;
  /* (R1.3) El menú cuelga del <th> y heredaba su tipografía: aquí se pone la del cuerpo. */
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.col-menu a:hover { background: var(--fondo); }
.col-menu a.activo { background: var(--info-suave); color: var(--info-fuerte); font-weight: 600; }
.col-menu a.vacio { color: var(--tinta-2); font-style: italic; }
.col-menu a.col-quitar { color: var(--acento); font-weight: 600; border-bottom: 1px solid var(--linea); border-radius: 4px 4px 0 0; margin-bottom: 3px; }
/* (3.5-bis) La ficha de proyecto no pagina: parte en páginas las actividades de UN
   proyecto rompería su lectura como unidad. Se le pone techo y scroll propio. */
.tabla-alta { max-height: 60vh; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; }
.tabla-alta thead th { position: sticky; top: 0; z-index: 2; background: var(--blanco); }
.gantt { max-height: 60vh; overflow: auto; }
.gantt-cabecera { position: sticky; top: 0; z-index: 3; background: var(--superficie-2); }

/* (2d.8) Columna del arrastre. Nacio con 46 px fijos «porque casi siempre esta vacia»,
   y desde entonces el include se lleno: ahora puede traer ⏰↻N, 🚩, 💬N y «↻ rutina».
   Con el ancho fijo los chips se apretaban unos contra otros y se veian deformados.
   `width: 1%` + `nowrap` es el modo de decirle a una tabla «lo justo para el contenido». */
.celda-repro {
  width: 1%;
  white-space: nowrap;
  line-height: 1.9;
}
.celda-repro > * { margin-right: .2rem; }
.celda-repro > *:last-child { margin-right: 0; }

/* (2c.8) KPI enlazado: el enlace no debe gritar. Hereda el color de la tarjeta y solo
   se subraya al pasar por encima, para que la rejilla siga leyendose como cifras y no
   como una lista de enlaces azules. */
.kpi a { color: inherit; text-decoration: none; }
.kpi a:hover,
.kpi a:focus-visible { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }

/* (2c.7) Secciones complementarias de la ficha: plegadas por omision. El <h2> vive
   DENTRO del <summary> para que el titulo siga siendo el titulo de la seccion y no
   un texto suelto al lado del triangulo. */
.caja-plegable { margin: 1.4rem 0; }
.caja-plegable > summary { cursor: pointer; }
.caja-plegable > summary > h2 { display: inline; margin: 0; }
.caja-plegable > summary:hover > h2 { color: var(--acento); }
.caja-plegable > table,
.caja-plegable > p { margin-top: .7rem; }


/* (H-21) Estimacion de tres puntos. El bloque se separa del resto del formulario
   porque es una decision, no un campo: quien lo mira tiene que ver los tres numeros
   juntos y el resultado debajo. */
.estimacion { border: 1px solid var(--linea); border-radius: 6px; padding: .7rem .9rem 1rem; }
.estimacion > legend { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
                       color: var(--sutil); padding: 0 .4rem; }
.estimacion-campos { display: grid; grid-template-columns: 10rem 1fr; gap: .8rem; align-items: end; }
.estimacion-campos input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.estimacion-guia { margin: 0 0 .35rem; font-size: 11.5px; }
@media (max-width: 640px) { .estimacion-campos { grid-template-columns: 1fr; } }

/* ---- (R2.g) Mensajes sobre la actividad — docs/plan/propuesta-mensajes.md ------------
   Mismo lenguaje que la bitácora (.apuntes-actividad): lista fechada con autor. Lo
   que añade es el destinatario («→ Ana»), el estado pendiente/atendido y las dos
   acciones en la propia línea. Vive aquí porque el fragmento se pinta dentro del
   drawer, del modal y de la página de edición. */
.mensajes-actividad { margin: 14px 0 4px; }
.mensajes-actividad h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sutil);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lista-mensajes { margin: 0; padding: 0; list-style: none; }
.lista-mensajes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0 4px 6px;
  border-bottom: 1px solid var(--linea);
  border-left: 3px solid transparent;
  font-size: 11.5px;
}
.lista-mensajes li:last-child { border-bottom: 0; }
/* Lo que me pidieron a MÍ y sigue abierto se distingue de un vistazo: borde ámbar. */
.lista-mensajes li.para-mi { border-left-color: var(--alerta); background: var(--alerta-suave); }
.lista-mensajes li.respuesta { padding-left: 18px; }
.msj-para { color: var(--sutil); }
.msj-estado.pendiente { font-size: 10px; color: var(--alerta-fuerte); font-weight: 700; }
.msj-acciones { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.msj-acciones form { display: inline; margin: 0; }
.msj-responder summary { list-style: none; cursor: pointer; }
.msj-responder summary::-webkit-details-marker { display: none; }
.msj-responder form { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.msj-responder textarea, .msj-nuevo textarea { width: 100%; min-width: 220px; font: inherit; }
.msj-nuevo { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.msj-nuevo-pie { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.msj-nuevo-pie label { font-size: 11px; color: var(--sutil); display: flex; gap: 6px; align-items: center; }
.msj-error { margin: 0 0 6px; }
/* Chips de origen sobre el .ap-origen de la bitácora: devuelta en rojo, aprobada en
   verde, anulada en gris. Es la etiqueta del verbo que dejó el mensaje. */
.ap-origen.msj-devolver { background: var(--peligro-suave); color: var(--peligro-fuerte); }
.ap-origen.msj-aprobar { background: var(--ok-suave); color: var(--ok-fuerte); }
.ap-origen.msj-anular { background: var(--neutro-suave); color: var(--neutro-fuerte); }
/* Chip 💬 N en la fila (Backlog, sprint) y en el título del bloque: solo cuenta lo
   pendiente PARA LA PERSONA EN SESIÓN. Ámbar como el ↻: es un aviso, no una alerta. */
.chip-msj {
  display: inline-block;
  padding: .05rem .35rem;
  border-radius: 8px;
  background: var(--alerta-suave);
  color: var(--alerta-fuerte);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Alta de proyecto en dos pasos (A-4, mock-alta-wbs-y-actividad) ---------------------- */
.pasos { display: flex; gap: .6rem; align-items: center; font-size: 12px; color: var(--tinta-3); margin: -.25rem 0 .9rem; }
.pasos .p { display: inline-flex; align-items: center; gap: .4rem; }
.pasos .n { width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center;
  font: 600 10.5px var(--mono); border: 1px solid var(--linea); background: var(--superficie); }
.pasos .p.act { color: var(--tinta); font-weight: 600; }
.pasos .p.act .n { background: var(--acento); color: var(--sobre-solido); border-color: var(--acento); }
.pasos .p.hecho .n { background: var(--ok-suave); color: var(--ok-fuerte); border-color: var(--ok); }
fieldset.estandar, fieldset.equipo-alta { border: 1px solid var(--linea); border-radius: 8px; padding: .75rem .9rem; margin: 1rem 0; }
fieldset.estandar legend, fieldset.equipo-alta legend { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-3); padding: 0 .4rem; }
.alcance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0 .75rem; }
.alcance .preset { display: grid; gap: .2rem; border: 1px solid var(--linea); border-radius: 8px; padding: .55rem .7rem;
  cursor: pointer; background: var(--superficie); font-size: 12.5px; }
.alcance .preset:has(input:checked), .alcance .preset.sel { border-color: var(--acento); background: var(--acento-suave); }
.alcance .preset input { width: auto; margin: 0 .35rem 0 0; }
.alcance .preset b { font-weight: 600; }
.equipo { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .75rem; }
.chip-persona { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--linea); border-radius: 999px;
  padding: .2rem .65rem .2rem .45rem; font-size: 12px; cursor: pointer; background: var(--superficie); }
.chip-persona:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-2); }
.chip-persona input { width: auto; margin: 0; }
label.capacidad { display: inline-flex; align-items: center; gap: .6rem; font-size: 12px; color: var(--tinta-2); }
label.capacidad input { width: 9rem; font-family: var(--mono); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .dos { grid-template-columns: 1fr; } }
.h2-sub { font-weight: 400; font-size: 12px; }
.wbs { overflow-x: auto; }
.wbs table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wbs th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); text-align: left;
  padding: .35rem .5rem; border-bottom: 1px solid var(--linea); }
.wbs td { padding: .3rem .5rem; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.wbs .c { width: 2.2rem; text-align: center; }
.wbs .c input { width: auto; margin: 0; }
.wbs td.num, .wbs th.num { text-align: right; }
.wbs td.num input { width: 5rem; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wbs select { max-width: 11rem; }
.wbs .cod { display: inline-block; min-width: 2.4rem; font-family: var(--mono); font-size: 11px; color: var(--tinta-3); margin-right: .4rem; }
.wbs tr.fase td { background: var(--pista); font-weight: 600; font-size: 12px; padding: .45rem .5rem; }
.wbs tr.fase .cnt { font-weight: 400; color: var(--tinta-3); margin-left: .5rem; font-family: var(--mono); font-size: 11px; }
.wbs tr.fase .hito { float: right; font-weight: 400; color: var(--acento-2); font-family: var(--mono); font-size: 11px; }
.wbs tr.no td { color: var(--tinta-3); }
.wbs tr.no .da { opacity: .55; }
.wbs tr.propia td { background: var(--resalte); }
.wbs tr.propia input[type=text] { width: 100%; box-sizing: border-box; }
.wbs tr.propia .dod-propio { margin-top: .25rem; font-size: 11px; }
.wbs tr.propia .quitar { width: 22px; height: 22px; padding: 0; font-size: 11px; }
.wbs tr.mas td { padding: .35rem .5rem .6rem; font-size: 12px; }
.wbs tr.mas a { font-weight: 600; }
.da { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.da.a { background: var(--info-suave); color: var(--info-fuerte); }
.da.b { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.da.c { background: var(--ok-suave); color: var(--ok-fuerte); }
.da.auto { background: var(--neutro-suave); color: var(--neutro-fuerte); }
.lb { position: sticky; top: .75rem; }
.lb .barra-fases { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--pista); margin: .5rem 0 .75rem; }
.lb .barra-fases i { display: block; background: var(--acento); border-right: 1px solid var(--superficie); }
.lb .fila { display: grid; grid-template-columns: 2rem 1fr 3.5rem 8.6rem; gap: .5rem; align-items: center;
  font-size: 12px; padding: .25rem 0; border-bottom: 1px solid var(--linea-suave); }
.lb .fila .f { font-family: var(--mono); font-weight: 600; color: var(--tinta-3); }
.lb .fila .h { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--tinta-2); }
.lb .fila input[type=date] { font-family: var(--mono); font-size: 11.5px; padding: .15rem .3rem; }
.lb .total { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-size: 12.5px; font-weight: 600; }
.lb .total b { font-family: var(--mono); font-size: 14px; }
.nota { font-size: 11.5px; color: var(--tinta-2); margin: .5rem 0; }
.nota.alerta { background: var(--alerta-suave); color: var(--alerta-fuerte); border: 1px solid var(--alerta); padding: .45rem .6rem; border-radius: 6px; }
.lb .acciones-pagina { margin-top: .5rem; }
.lb .acciones-pagina .boton { width: 100%; text-align: center; }

/* --- Formularios de actividad con fase y entregable (A-5, mock-alta-wbs-y-actividad) ----- */
.chip-fase { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; background: var(--info-suave); color: var(--info-fuerte); vertical-align: middle; }
.chip-fase.espera { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.chip-fase.bloqueada { background: var(--neutro-suave); color: var(--neutro-fuerte); }
.bloque-fase { margin: .25rem 0; }
.rejilla-anidada { margin: 0; }
.bloque-fase .sin-borde { border: 0; padding: 0; margin: .35rem 0 0; }
.bloque-fase .apagado { display: none; }
.bloque-ent { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; display: grid; gap: .5rem; }
.bloque-ent .cab { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bloque-ent .cab .titulo { font-weight: 600; font-size: 12.5px; }
.bloque-ent .cab .prog { color: var(--tinta-3); font-size: 11.5px; margin-left: auto; font-family: var(--mono); }
.bloque-ent label { font-size: 12px; }
.bloque-ent .exigencia { color: var(--alerta-fuerte); }
.da.cumplido { background: var(--ok-suave); color: var(--ok-fuerte); }
.dod { border-left: 3px solid var(--acento); padding: .35rem .7rem; background: var(--pista); border-radius: 0 6px 6px 0; }
.dod .eti { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin-bottom: .25rem; }
.dod ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.dod li { padding: .15rem 0; }
.dod .mk { display: inline-block; width: 1.2rem; font-family: var(--mono); color: var(--acento-2); }
.dod .casilla { font-size: 12.5px; }
.sec-titulo { font-size: 12px; font-weight: 600; margin: .6rem 0 .25rem; color: var(--tinta-2); }
.rej { overflow-x: auto; }
.rej table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rej th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); text-align: left; padding: .3rem .45rem; border-bottom: 1px solid var(--linea); }
.rej td { padding: .3rem .45rem; border-bottom: 1px solid var(--linea-suave); }

/* --- Formulario del entregable A en el drawer (A-6, mock-admin-estandar-formularios-a) --- */
.panel-modal.panel-ancho { width: min(1100px, 96vw); max-width: 96vw; }
#modal-destino.en-pagina .overlay-modal { position: static; background: none; padding: 0; }
#modal-destino.en-pagina .panel-modal { max-height: none; }
.tag { display: inline-flex; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.tag.ok { background: var(--ok-suave); color: var(--ok-fuerte); }
.tag.gris { background: var(--neutro-suave); color: var(--tinta-3); }
.tag.aviso { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.prog { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: .5rem 0; }
.prog .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prog .barra { flex: 1; height: 8px; background: var(--pista); border-radius: 999px; position: relative; overflow: hidden; }
.prog .barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); border-radius: 999px; }
.seccion-form { margin-top: 12px; }
.seccion-form h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin: 0 0 .35rem; }
.seccion-form h3 .tipo { font-weight: 400; font-size: 11.5px; }
.form-col table { width: 100%; border-collapse: collapse; font-size: 12px; }
.form-col th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); text-align: left; padding: .3rem .45rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.form-col td { padding: .3rem .45rem; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.form-col td.falta { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.form-col td.acc { width: 1.6rem; text-align: center; }
.form-col td.acc a { font-family: var(--mono); font-weight: 600; text-decoration: none; }
.form-col tr.mas td { padding: .4rem .45rem .6rem; }
.form-col tr.mas a { font-weight: 600; font-size: 12px; }
.ob { color: var(--alerta-fuerte); }
label.falta input, label.falta select, label.falta textarea { border-color: var(--alerta); background: var(--alerta-suave); }
dd.falta { color: var(--alerta-fuerte); }
.fila-editor:not(:empty) { margin: .5rem 0; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie-2); }
.fila-form .form-linea { margin-top: .4rem; }
.boton.peligro { color: var(--peligro-fuerte); border-color: var(--peligro); }
.libre { border: 1px dashed var(--linea); border-radius: 8px; padding: .5rem .8rem; font-size: 12.5px; margin-bottom: .4rem; }
.libre p { margin: .2rem 0; }
.dod-ver li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.dod-ver .estado { font-family: var(--mono); font-size: 11px; }
.dod-ver .estado.ok { color: var(--ok-fuerte); }
.dod-ver .estado.no { color: var(--alerta-fuerte); }
.control-doc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 11.5px; margin-top: 10px; }
.control-doc div { background: var(--superficie-2); border-radius: 6px; padding: 5px 8px; }
.control-doc span:first-child { display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.esquema-propio { margin-top: .6rem; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie-2); }
.constructor { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .3rem 0 .5rem; }
.constructor .opcion { display: grid; gap: .15rem; border: 1px solid var(--linea); border-radius: 8px; padding: .45rem .6rem; font-size: 12px; cursor: pointer; background: var(--superficie); }
.constructor .opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.constructor .opcion input { width: auto; margin: 0 .3rem 0 0; }
.constructor .opcion span { color: var(--tinta-3); font-size: 11px; }
.esquema-propio .linea { display: inline-flex; gap: .5rem; align-items: center; font-size: 12px; margin-bottom: .4rem; }
.esquema-propio .corto { width: 4.5rem; }
table.esq { width: 100%; border-collapse: collapse; font-size: 12px; }
table.esq th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); text-align: left; padding: .3rem .4rem; }
table.esq td { padding: .2rem .4rem; }
table.esq td.c, table.esq th.c { text-align: center; }
table.esq input[type=text] { width: 100%; box-sizing: border-box; }
@media (max-width: 800px) { .control-doc { grid-template-columns: 1fr 1fr; } .constructor { grid-template-columns: 1fr; } }

/* --- Ficha v5 con fase-gate (A-7, mock-ficha-fase-gate) ---------------------------------- */
.meta-ficha { font-size: 11px; font-weight: 400; }
.zona { margin: 1.1rem 0 0; }
.zona-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: .5rem; flex-wrap: wrap; }
.zona-cab .eti { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-3); }
.zona-cab .sub { font-size: 11px; }
.zona-cab .boton { margin-left: auto; margin-top: 0; }
.rejilla-kpis.tres { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-kpis.compacta { margin: .2rem 0 .8rem; }
.tarjeta.kpi.oficial { border-color: var(--acento); }
.kpi-valor > span + .semaforo { margin-left: 8px; vertical-align: middle; }
.kpi-valor.pauta { color: var(--tinta-2); }
.semaforo .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 4px; }
.barra-avance.secundaria .relleno { background: var(--tinta-3); }
.kpi-detalle .semaforo { vertical-align: middle; }

/* tira de fases: círculos unidos por una línea (U-2) */
.tl { list-style: none; margin: 4px 0 8px; padding: 10px 6px 6px; display: flex; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); overflow-x: auto; }
.tl li { flex: 1; min-width: 96px; position: relative; }
.tl li button { width: 100%; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: flex;
  flex-direction: column; align-items: center; padding: 0 4px 4px; position: relative; margin: 0; }
.tl-linea { position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: var(--pista); z-index: 0; }
.tl li:first-child .tl-linea { display: none; }
.tl li.hecha .tl-linea { background: var(--ok); }
.tl li.curso .tl-linea { background: linear-gradient(90deg, var(--ok), var(--acento)); }
.tl-punto { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--mono); font-size: 9px; font-weight: 600; background: var(--superficie);
  border: 2px solid var(--linea); color: var(--tinta-3); }
.tl li.hecha .tl-punto { background: var(--ok); border-color: var(--ok); color: var(--sobre-solido); font-size: 11px; }
.tl li.curso .tl-punto { background: var(--acento); border-color: var(--acento); color: var(--sobre-solido); box-shadow: 0 0 0 4px var(--acento-suave); }
.tl li.futura .tl-punto { font-size: 10px; }
.tl li.siguiente { opacity: .85; }
.tl li.siguiente .tl-punto { border-style: dashed; border-color: var(--acento); color: var(--acento-2); }
.tl-cod { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--tinta-3); }
.tl-nom { font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.tl-dr { font-family: var(--mono); font-size: 9px; color: var(--tinta-2); margin-top: 2px; white-space: nowrap; }
.tl li.hecha .tl-dr { color: var(--ok-fuerte); }
.tl li.curso .tl-nom, .tl li.curso .tl-cod { color: var(--acento-2); }
.tl li.curso .tl-dr { color: var(--peligro-fuerte); font-weight: 600; }
.tl li.futura .tl-nom, .tl li.futura .tl-dr { color: var(--tinta-3); }

/* backlog por fase: un <details> por fase (P-4) */
.fase-grupo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra);
  margin-top: 8px; overflow: hidden; }
.fase-grupo > summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); background: var(--superficie-2); }
.fase-grupo[open] > summary { border-bottom: 1px solid var(--linea); }
.fase-grupo.curso > summary { color: var(--acento-2); background: var(--seleccion); }
.fase-grupo.futura > summary, .fase-grupo.siguiente > summary { color: var(--tinta-3); }
.fase-grupo > summary .cnt { font-weight: 500; letter-spacing: 0; }
.fase-grupo > summary .resumen { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--tinta-2); }
.dr-chip { margin-left: auto; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0; padding: 2px 7px;
  border-radius: 999px; text-transform: none; white-space: nowrap; }
.dr-chip.ok { background: var(--ok-suave); color: var(--ok-fuerte); }
.dr-chip.pend { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.dr-chip.bloq { background: var(--peligro-suave); color: var(--peligro-fuerte); }
.tabla-fase { max-height: 60vh; overflow: auto; }
.tabla-fase table { width: 100%; border-collapse: collapse; margin: 0; }
.tabla-fase thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); }
.tabla-fase td { white-space: nowrap; }
.tabla-fase td.nombre { white-space: normal; min-width: 220px; }
tr.est-aprobada td:first-child { border-left: 3px solid var(--ok); }
tr.est-proceso td:first-child { border-left: 3px solid var(--acento); }
tr.est-pend td:first-child { border-left: 3px solid var(--linea); }
tr.bloqueada td { opacity: .6; }
.fila-subtarea td { color: var(--tinta-2); }
.fila-subtarea td.nombre { padding-left: 24px; }
.fila-agrupadora td.nombre { font-weight: 600; }
.bloq-nota { font-size: 9px; color: var(--alerta-fuerte); font-family: var(--mono); white-space: nowrap; }
.sutil.chico { font-size: 10.5px; }
.da .estado { font-size: 8.5px; font-weight: 500; }
a.da:hover { text-decoration: none; filter: brightness(.95); }
tr.dr-acto td { background: var(--superficie-2); padding: 8px 12px; white-space: normal; border-top: 1px solid var(--linea); }
tr.dr-acto td > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-acto .txt { font-size: 10.5px; color: var(--tinta-2); }
.dr-acto .txt b { color: var(--tinta); }
.boton-dr { margin-left: auto; font: inherit; font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 7px;
  border: 1px solid var(--acento); background: var(--acento); color: var(--sobre-solido); cursor: pointer; white-space: nowrap; text-decoration: none; }
.boton-dr:hover { text-decoration: none; background: var(--acento-2); }
.boton-dr.espera { background: var(--pista); color: var(--tinta-3); border-color: var(--linea); }
.boton-dr.espera:hover { background: var(--pista); }
span.boton-dr.espera { cursor: default; }

/* consulta plegada (P-1) */
details.consulta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px;
  box-shadow: var(--sombra); margin: 8px 0 0; }
details.consulta > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
details.consulta > summary h2 { font-size: 13.5px; margin: 0; display: inline; }
details.consulta > summary .cifra { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--tinta-2); }
details.consulta > summary .gantt-ampliar { margin-left: 0; }
details.consulta[open] > summary { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--linea-suave); }
details.consulta.caja-plegable { margin: 8px 0 0; }
details.consulta .ficha-rejilla { margin-top: .2rem; }
.ficha-rejilla dd small { font-size: 10.5px; color: var(--tinta-2); font-weight: 400; display: block; }
@media (max-width: 800px) { .rejilla-kpis.tres { grid-template-columns: 1fr; } .tl li { min-width: 78px; } }

/* --- Backlog v4 con fase-gate (A-8, mock-backlog-fase-gate) ------------------------------ */
.act-modo .n { font-family: var(--mono); font-size: 10px; color: var(--tinta-3); margin-left: 4px; }
.act-modo.activo .n { color: var(--sobre-solido); opacity: .8; }
.act-busca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; }
.act-busca input[type=search] { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--linea);
  border-radius: 8px; width: min(340px, 100%); background: var(--superficie); color: var(--tinta); }
.act-busca .sutil { font-size: 11px; }
.sub-th { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-3); font-size: 10px; }
.sub-th a { color: inherit; }
.sub-th a[data-dir] { color: var(--acento); font-weight: 600; }
td .sub { display: block; font-size: 10.5px; color: var(--tinta-3); margin-top: 2px; }
td.act { max-width: 340px; }
td.act .cod { font-family: var(--mono); font-size: 10.5px; color: var(--tinta-3); margin-right: 6px; }
.chip-fase.hecha { background: var(--ok-suave); color: var(--ok-fuerte); }
.chip-fase.curso { background: var(--acento-suave); color: var(--acento-2); }
.chip-fase.siguiente { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.chip-fase.futura { background: var(--neutro-suave); color: var(--tinta-3); }
.chip-fase small { font-family: var(--sans); font-weight: 500; font-size: 10.5px; display: inline-block; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; margin-left: 3px; }
.da.listo { background: var(--ok); color: var(--sobre-solido); }
.chip-mini { display: inline-flex; gap: 4px; align-items: center; font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  background: var(--alerta-suave); color: var(--alerta-fuerte); white-space: nowrap; font-family: var(--mono); }
.chip-mini.candado { background: var(--neutro-suave); color: var(--tinta-2); }
.accion-rapida[disabled], .accion-rapida[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.accion-rapida.entregable, .accion-rapida.pide-enlace { border-color: var(--alerta); color: var(--alerta-fuerte); background: var(--alerta-suave); }
.tabla-lista tbody tr.e-aprobada { border-left-color: var(--estado-aprobada-solido); }
.tabla-lista tbody tr.bloqueada td { color: var(--tinta-3); }
.plan-fuera { color: var(--peligro-fuerte); }
.plan-espera { color: var(--alerta-fuerte); }

/* --- Línea base por fase en el Gantt (A-9, RN-15) ---------------------------------------- */
.gantt-base { grid-row: 1; height: 14px; margin: 0 1px; border-radius: 3px; font-family: var(--mono); font-size: 9px;
  font-weight: 600; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  color: var(--tinta-2); background: var(--pista); border: 1px dashed var(--tinta-3); }
.gantt-base.hecha { background: var(--ok-suave); border-style: solid; border-color: var(--ok); color: var(--ok-fuerte); }
.gantt-base.curso { background: var(--seleccion); border-style: solid; border-color: var(--acento); color: var(--acento-2); }
.gantt-base-et { font-weight: 600; }
.gantt-base-et small { font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.gantt-fila.grupo { border-top: 2px solid var(--linea); background: var(--superficie-2); }
.gantt-et.fase { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.gantt-et.fase.hecha { color: var(--ok-fuerte); }
.gantt-et.fase.curso { color: var(--acento-2); }
.gantt-barra.e-bloq { height: 10px; background: repeating-linear-gradient(45deg, var(--linea-suave), var(--linea-suave) 3px, var(--superficie-2) 3px, var(--superficie-2) 6px);
  border: 1px dashed var(--linea); }
.gantt-barra.e-bloq:hover { outline: none; }
details.consulta .gantt-mandos { margin-bottom: .4rem; }

/* --- Admin del estándar (A-10: C-1, C-6, C-7, W-2, K-4, X-4) ------------------------------- */
.catalogo-herr { justify-content: flex-start; }
.catalogo-herr .der { margin-left: auto; display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.catalogo-herr .act-busca input { min-width: 240px; }
.catalogo .wbs { padding: 0; overflow: hidden; }
.catalogo td.num input { width: 4.4rem; padding: .15rem .3rem; }
.catalogo .presets label { display: inline-flex; align-items: center; gap: 2px; margin: 0 .25rem; font-family: var(--mono); font-size: 10.5px; }
.catalogo .presets input, .catalogo td.c input { width: auto; margin: 0; }
.catalogo th.presets { width: 9.5rem; }
.catalogo tr.inactiva td { opacity: .55; }
.catalogo td.acc { width: 2rem; text-align: right; }
.catalogo-pie { justify-content: flex-start; }
.historial-catalogo td { font-size: 12px; }
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.presets-campo { border: 1px solid var(--linea); border-radius: 8px; padding: .4rem .8rem; margin: .5rem 0; }
.presets-campo legend { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; }
.presets-campo .casilla { display: inline-flex; margin-right: 1rem; }
.editor-entregable .tres2 { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .editor-entregable .tres2 { grid-template-columns: 1fr; } }
.editor-entregable fieldset { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .8rem; margin: 0 0 12px; background: var(--superficie); }
.editor-entregable legend { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; padding: 0 .3rem; }
.editor-entregable .campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .7rem; }
.editor-entregable .campos label { margin: 0; font-size: 11px; }
.editor-entregable .campos .dos { grid-column: span 2; }
.editor-entregable .boton.mini { width: 20px; height: 20px; min-width: 0; padding: 0; font-size: 10px; line-height: 1; margin-left: 2px; }
.editor-entregable .boton.mini[title^="Añadir"] { width: auto; padding: 0 .5rem; font-size: 11px; }
.editor-entregable .mas { font-size: 12px; margin: .4rem 0 0; }
.esq .sec { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; padding: .4rem .5rem; background: var(--pista); border-radius: 6px; margin: .6rem 0 .3rem; font-size: 12px; }
.esq .sec input, .esq .sec select { width: auto; padding: .15rem .3rem; font-size: 11.5px; margin: 0; }
.esq .sec .titulo { width: 11rem; font-weight: 600; }
.esq .sec .cl { width: 8rem; font-family: var(--mono); }
.esq .sec .mini { width: 3.2rem; }
.esq .sec .acc { margin-left: auto; white-space: nowrap; }
.esq .sec .ayuda-sec { flex: 1 1 12rem; font-size: 11px; }
.esq .sec .oblig { display: inline-flex; gap: 3px; align-items: center; margin: 0; font-size: 11px; }
.esq .sec .oblig input { width: auto; }
.esq table { font-size: 12px; }
.esq td, .esq th { padding: .2rem .3rem; }
.esq td input, .esq td select { width: 100%; box-sizing: border-box; padding: .15rem .3rem; font-size: 11.5px; margin: 0; }
.esq td.chk, .esq th.chk { width: 2.5rem; text-align: center; }
.esq td.chk input { width: auto; }
.esq td.acc { white-space: nowrap; text-align: right; }
.esq tr.mas td { padding: .3rem .3rem .5rem; }
.dod-ed { list-style: none; margin: 0; padding: 0; }
.dod-ed li { display: grid; grid-template-columns: 1fr auto; gap: .3rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--linea-suave); }
.dod-ed li input[type=text], .dod-ed li select { margin: 0; padding: .15rem .3rem; font-size: 11.5px; }
.dod-ed .acc { white-space: nowrap; }
.dod-ed .regla { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--tinta-2); grid-column: 1 / -1; }
.dod-ed .regla input { width: 9rem; }
.dod-ed .regla input.corto { width: 5.5rem; }
.dod-ed .regla select { width: auto; }
.arbol { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.arbol ul { list-style: none; margin: .2rem 0 .4rem 1rem; padding: 0; }
.arbol li { padding: .12rem 0; }
.arbol .tipo { font-family: var(--mono); font-size: 10px; color: var(--tinta-3); background: var(--pista); border-radius: 4px; padding: 0 .3rem; }
.arbol .ob { font-size: 10px; color: var(--alerta-fuerte); }
.recalibrar td.num, .recalibrar th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.recalibrar .sube { color: var(--peligro-fuerte); }
.recalibrar .baja { color: var(--ok-fuerte); }

/* --- Asignar estándar a un proyecto en curso (A-11, R-1…R-5) ---------------------------- */
.aviso-est { display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; margin: .5rem 0 .75rem; border-radius: 8px;
  background: var(--alerta-suave); border: 1px solid var(--alerta); color: var(--alerta-fuerte); font-size: 12.5px; }
.aviso-est > span:first-child { font-size: 16px; }
.aviso-est .boton { margin-left: auto; white-space: nowrap; }
.asignar fieldset { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .8rem; margin: 0 0 12px; }
.asignar legend { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; padding: 0 .3rem; }
.asignar .acciones { margin-top: .75rem; }
.asignar .acciones .izq { margin-right: auto; }
.equipo-asignar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .25rem .8rem; }
.equipo-asignar .casilla { margin: 0; font-size: 12.5px; }
.equipo-asignar .casilla input { width: auto; margin-right: .35rem; }
.resumen-casar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .5rem 0 .75rem; }
.resumen-casar div { border: 1px solid var(--linea); border-radius: 8px; padding: .45rem .7rem; display: flex; flex-direction: column; gap: 2px; }
.resumen-casar span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); font-weight: 600; }
.resumen-casar b { font-size: 18px; }
.resumen-casar b.ok { color: var(--ok-fuerte); } .resumen-casar b.acento { color: var(--acento-2); } .resumen-casar b.alerta { color: var(--alerta-fuerte); }
.casar select { max-width: 100%; width: 100%; font-size: 11.5px; padding: .15rem .3rem; margin: 0; }
.casar .sug, .casar .sub { display: block; font-size: 10.5px; color: var(--tinta-3); margin-top: 2px; }
.casar .tag.casada { background: var(--ok-suave); color: var(--ok-fuerte); }
.casar .tag.nueva { background: var(--info-suave); color: var(--info-fuerte); }
.casar .tag.noaplica { background: var(--neutro-suave); color: var(--tinta-3); }
.casar .tag.poraprobar { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.casar .tag.propia { background: var(--acento-suave); color: var(--acento-2); }
.wbs tr.fase .res { float: right; font-weight: 400; color: var(--tinta-2); font-size: 11px; }
.wbs tr.fase.propias td { color: var(--alerta-fuerte); }
.tl.estatica li { display: flex; flex-direction: column; align-items: center; padding: 0 4px 4px; }
.dos-col { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; margin-top: .5rem; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.dos-col h3 { font-size: 12px; font-weight: 600; margin: .5rem 0 .4rem; }
.dr-retro .fila, .lb .fila { display: grid; grid-template-columns: 3rem 1fr auto auto; gap: .5rem; align-items: center; padding: .3rem 0;
  border-bottom: 1px solid var(--linea-suave); font-size: 12.5px; }
.dr-retro .f, .lb .f { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--tinta-2); }
.dr-retro input[type=date] { width: auto; margin: 0; padding: .15rem .3rem; font-size: 11.5px; }
.lb .fila.hecha { color: var(--ok-fuerte); }
.lb .h { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }
.lb .total { display: flex; justify-content: space-between; padding: .5rem 0 0; font-size: 12.5px; font-weight: 600; }
.pendientes-asignar { margin: 0; padding-left: 18px; font-size: 12.5px; }
.pendientes-asignar li { margin: .2rem 0; }

/* --- Portafolio, Dashboard y Programas con el % oficial (A-12, O-1…O-7) --------------------- */
.fuente { font-family: var(--mono); font-size: 9px; opacity: .85; margin-left: 1px; }
.semaforo .fuente { font-weight: 400; }
.chip-fase .n { font-weight: 400; color: var(--tinta-2); margin-left: 2px; }
.chip-fase.sin { background: var(--neutro-suave); color: var(--tinta-3); font-family: var(--sans); font-weight: 500; }
.chip-fase.fin { background: var(--ok-suave); color: var(--ok-fuerte); }
a.chip-fase.aviso, .chip-fase.aviso { background: var(--resalte); color: var(--alerta-fuerte); border: 1px solid var(--alerta);
  font-family: var(--sans); font-weight: 600; text-decoration: none; }
a.chip-fase.aviso:hover { background: var(--alerta-suave); }
.barra-avance.oficial .relleno { background: var(--ok); }
.barra-avance.h .relleno { background: var(--acento); }
.barra-txt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; vertical-align: middle; white-space: nowrap; }
.rejilla-kpis.cinco { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .rejilla-kpis.cinco { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.tarjeta.kpi.destacado { background: var(--seleccion); }
.kpi-valor.pauta { color: var(--tinta-2); font-size: 16px; }
.kpi-valor.rojo { color: var(--peligro-fuerte); }
.filtros-activos { margin: -.35rem 0 .6rem; font-size: 11.5px; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.chip-filtro { display: inline-block; background: var(--acento-suave); color: var(--acento-2); border-radius: 999px; padding: .1rem .55rem; font-size: 10.5px; font-weight: 600; }
.portafolio td .sub { display: block; font-size: 10.5px; color: var(--tinta-3); font-weight: 400; }
.portafolio tr.sin td { color: var(--tinta-2); }
.portafolio .leyenda { font-size: 11px; margin: .5rem 0 0; }
.portafolio .leyenda b { font-family: var(--mono); }
.frente-proyecto.en-horas > a, .frente-proyecto.en-horas .fp-resp { color: var(--tinta-2); }

/* --- Línea base editable y re-baseline (A-14, 07/09) ---------------------------------------- */
.lb-editor .lb { position: static; }
.lb-editor .lb .fila { grid-template-columns: 2.4rem 1fr 4rem 6.4rem 12rem; }
.lb-editor .lb .fila.cab { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); font-weight: 600; border-bottom: 1px solid var(--linea); }
.lb-editor .lb .fila.hecha { color: var(--ok-fuerte); }
.lb-editor .lb .fila.ajustada input[type=date] { border-color: var(--acento); }
.lb-editor .lb-nota { display: block; margin: .75rem 0 0; font-size: 12.5px; }
.lb-editor .lb-nota textarea { width: 100%; margin-top: .25rem; }
.lb-editor .acciones { margin-top: .75rem; }
.lb-editor .acciones .izq { margin-right: auto; }

/* --- ▶ Gestionar ≠ ✎ Editar (A-15, 07/09) --------------------------------------------------- */
.boton.icono.gestionar { color: var(--acento-2); border-color: var(--acento); background: var(--acento-suave); }
.nota-gestion { margin: 0 0 .6rem; font-size: 12px; color: var(--tinta-2); }
.nota-gestion a { font-weight: 600; }
.gestion .seccion { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .9rem .75rem; margin: 0 0 .6rem; }
.gestion .eti { display: flex; align-items: center; gap: .5rem; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-bottom: .5rem; }
.gestion .eti .der { margin-left: auto; font-family: var(--mono); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinta-2); }
.gestion .estado-linea { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 12.5px; }
.gestion .estado-linea .flecha { color: var(--tinta-3); }
.gestion .verbos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.gestion .boton.verbo { border-radius: 999px; padding: .35rem .9rem; margin-top: 0; }
.gestion .boton.verbo.ok { background: var(--ok); border-color: var(--ok); color: var(--sobre-solido); }
.gestion .boton.verbo.aviso { border-color: var(--alerta); color: var(--alerta-fuerte); background: var(--alerta-suave); }
.gestion .boton.verbo.peligro { border-color: var(--peligro); color: var(--peligro-fuerte); background: var(--peligro-suave); margin-left: auto; }
.gestion .boton.verbo[disabled] { opacity: .5; cursor: not-allowed; }
.gestion .porque { margin: .5rem 0 0; font-size: 11.5px; color: var(--alerta-fuerte); background: var(--alerta-suave); border-radius: 6px; padding: .2rem .6rem; display: inline-block; }
.gestion .porque.dura { color: var(--tinta-2); background: var(--neutro-suave); }
.gestion label.motivo { display: block; margin-top: .6rem; font-size: 12px; }
.gestion label.motivo input { width: 100%; margin-top: .2rem; }
.gestion label.motivo .plegar { float: right; margin-top: 0; }
.gestion .bloque-ent, .gestion .bloque-entregable { margin: 0; }
.gestion .ejecucion { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.gestion .ejecucion label { display: flex; flex-direction: column; gap: .2rem; font-size: 11.5px; color: var(--tinta-2); font-weight: 500; }
.gestion .ejecucion input.corto { width: 6rem; text-align: right; font-family: var(--mono); }
.gestion .ejecucion .valor { font-size: 13px; color: var(--tinta); padding: .3rem 0; }
.gestion .bitacora .apuntes-actividad h3 { margin-top: 0; }
.gestion .bitacora label { display: block; font-size: 11.5px; color: var(--tinta-2); margin-top: .5rem; }
.gestion .bitacora textarea { width: 100%; margin-top: .2rem; }
.gestion .acciones .izq { margin-right: auto; font-size: 11.5px; color: var(--tinta-2); }
.panel-modal.gestionar .drawer-cabecera h2 .ico { width: 15px; height: 15px; color: var(--acento-2); }
@media (max-width: 640px) { .gestion .ejecucion { grid-template-columns: 1fr; } }

/* (A-15b) El formulario A con el chrome de ▶ Gestionar: secciones con marco y rótulo. */
.formulario-a .seccion-form { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .9rem .75rem; margin: .6rem 0 0; }
.formulario-a .seccion-form h3 { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-bottom: .5rem; }
.formulario-a .seccion-form h3 .tipo { font-family: var(--mono); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 11px; color: var(--tinta-2); margin-left: auto; }
.formulario-a .prog { margin: .6rem 0 .2rem; }
.formulario-a .control-doc { margin-top: .6rem; }
.formulario-a .drawer-cabecera .ico, .formulario-a .acciones .ico { width: 13px; height: 13px; color: var(--acento-2); }
/* (A-15b, Hedi 07/09: «ajusta el ancho y el color de los campos») Los campos del formulario A
   no se estiran a los 1100 px del panel: ~72 caracteres de ancho, que es lo que se lee de un
   tirón. Y lo faltante se señala con el borde (filete ámbar a la izquierda), no rellenando el
   campo: un formulario vacío con cuatro cajas naranjas grita más de lo que informa. */
/* (07/09, Hedi) …y el espacio que sobra a la derecha se aprovecha: dos columnas, y los campos
   largos ocupan una celda cada uno —cuatro campos = dos filas—, con lo que el formulario mide
   la mitad de alto. Un solo campo largo sí ocupa las dos columnas. */
.formulario-a .form-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.4rem; }
.formulario-a .form-rejilla .ancho-completo { grid-column: auto; }
.formulario-a .form-rejilla .ancho-completo:only-of-type { grid-column: 1 / -1; }
.formulario-a .form-rejilla textarea { width: 100%; min-height: 4.2em; resize: vertical; }
.formulario-a .form-rejilla input[type=text], .formulario-a .form-rejilla input[type=url], .formulario-a .form-rejilla select { max-width: 36ch; }
@media (max-width: 760px) { .formulario-a .form-rejilla { grid-template-columns: 1fr; } }
.formulario-a label.falta input, .formulario-a label.falta select, .formulario-a label.falta textarea { background: var(--superficie); border-color: var(--linea); border-left: 3px solid var(--alerta); }
.formulario-a label.falta:focus-within input, .formulario-a label.falta:focus-within select, .formulario-a label.falta:focus-within textarea { border-color: var(--acento); border-left-color: var(--alerta); }

/* (PL-1, 08/09) Planeación del sprint: cabecera compacta, backlog candidato y quién carga con
   qué. propuesta-planeacion.md v0.3 §3; mock-planeacion.html v3, pantalla 2. */
.pl-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; }
.pl-cab .pl-cod { font-size: 15px; font-weight: 700; }
.pl-estado { font-size: 9.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--neutro-suave); color: var(--tinta-2); }
.pl-estado.abierto { background: var(--alerta-suave); color: var(--alerta-fuerte); }
.pl-estado.en_curso { background: var(--acento-suave); color: var(--acento-2); }
.pl-estado.cerrado { background: var(--ok-suave); color: var(--ok-fuerte); }
.pl-estado.vencido { background: var(--peligro-suave); color: var(--peligro-fuerte); }
.pl-kpi { display: inline-flex; flex-direction: column; }
.pl-kpi small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.pl-kpi b { font-size: 13.5px; font-weight: 600; }
.pl-kpi .pl-pend { color: var(--alerta-fuerte); }
.pl-cab .pl-der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.pl-mesa { display: grid; grid-template-columns: 7fr 5fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .pl-mesa { grid-template-columns: 1fr; } }
.pl-panel { padding: 10px 12px; }
.pl-eti { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pl-eti .der { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinta-2); }
.pl-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.pl-filtros select, .pl-filtros input { font: inherit; font-size: 11.5px; padding: 4px 8px; border: 1px solid var(--linea); border-radius: 7px; background: var(--superficie); color: var(--tinta); }
.pl-filtros .pl-busca { flex: 1; min-width: 160px; }
.pl-filtros .pl-ocultar { font-size: 11px; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; }
.pl-grupo { border: 1px solid var(--linea-suave); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.pl-grupo > summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--superficie-2); font-weight: 600; font-size: 12.5px; }
.pl-grupo > summary a { color: var(--tinta); }
.pl-pri { font-size: 9.5px; background: var(--tinta); color: var(--sobre-solido); border-radius: 4px; padding: 0 5px; }
.pl-prog { font-size: 10.5px; font-weight: 400; }
.pl-meta { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--tinta-2); }
.pl-tabla { width: 100%; border-collapse: collapse; margin: 0; }
.pl-tabla th { text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); padding: 4px 8px; font-weight: 700; }
.pl-tabla th.num { text-align: right; }
.pl-tabla td { padding: 5px 8px; border-top: 1px solid var(--linea-suave); font-size: 12px; vertical-align: middle; }
.pl-tabla td.num { text-align: right; white-space: nowrap; }
.pl-tabla td.cod { font-size: 10.5px; color: var(--tinta-3); width: 1%; white-space: nowrap; }
.pl-tabla tr.bloq td { color: var(--tinta-3); }
.pl-tabla tr.venc td:first-child { border-left: 3px solid var(--alerta); }
.pl-tabla tr.marcada td { background: var(--seleccion); }
.pl-tabla .chip-repro { font-family: var(--mono); font-size: 9.5px; background: var(--alerta-suave); color: var(--alerta-fuerte); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.pl-tabla .act-chip-vencida { font-size: 9.5px; background: var(--alerta-suave); color: var(--alerta-fuerte); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.pl-sin { color: var(--peligro-fuerte); font-size: 11.5px; }
.pl-ayuda { font-size: 11px; margin: 6px 0 0; }
.pl-barra-sel { position: sticky; bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--tinta); color: var(--sobre-solido); border-radius: 10px; padding: 8px 14px; margin-top: 10px; font-size: 12.5px; z-index: 5; }
.pl-barra-sel .pl-barra-der { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.pl-barra-sel .boton { border-color: var(--sobre-solido); color: var(--sobre-solido); background: transparent; }
.pl-barra-sel .boton.primario { background: var(--sobre-solido); color: var(--tinta); }
.pl-barra-sel .boton[disabled] { opacity: .4; cursor: not-allowed; }
.pl-barra-sel .pl-por-persona span.rojo { color: var(--alerta); font-weight: 700; }
.pl-persona { border: 1px solid var(--linea-suave); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.pl-persona.activa { border-color: var(--acento); background: var(--seleccion); }
.pl-persona.filtrando { box-shadow: 0 0 0 2px var(--acento-suave); }
.pl-persona.sin { border-style: dashed; border-color: var(--peligro); }
.pl-persona.sin .sb-avatar { background: var(--peligro); }
.pl-persona .pl-fila { display: flex; align-items: center; gap: 8px; }
.pl-persona .pl-nombre { font-weight: 600; font-size: 12.5px; }
.pl-persona .pl-cifras { margin-left: auto; font-size: 11px; color: var(--tinta-2); text-align: right; }
.pl-persona .pl-cifras .rojo { color: var(--peligro-fuerte); font-weight: 700; }
.pl-persona .pl-mas { display: block; color: var(--alerta-fuerte); }
.pl-persona .pl-mas.rojo { color: var(--peligro-fuerte); font-weight: 700; }
.pl-barra { height: 7px; background: var(--pista); border-radius: 999px; margin-top: 6px; position: relative; overflow: hidden; }
.pl-barra .tramo { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ok); }
.pl-barra .tramo.base.rojo { background: var(--peligro); }
.pl-barra .tramo.pend { background: repeating-linear-gradient(135deg, var(--alerta) 0 3px, var(--superficie) 3px 5px); }
.pl-barra .tramo.pend.rojo { background: repeating-linear-gradient(135deg, var(--peligro) 0 3px, var(--superficie) 3px 5px); }
.pl-lista { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11.5px; }
.pl-lista:empty { margin: 0; }
.pl-lista li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.pl-lista li .cod { color: var(--tinta-3); font-size: 10.5px; }
.pl-lista li .h { margin-left: auto; color: var(--tinta-2); }
.pl-lista li.fantasma { color: var(--alerta-fuerte); border-left: 2px dashed var(--alerta); padding-left: 6px; }
.pl-lista li.fantasma .h { color: var(--alerta-fuerte); }
.pl-lista li.fantasma .tag { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* (PL-2) El selector de responsable asoma al marcar; «← backlog» en la tarjeta. */
.pl-tabla .pl-resp { display: none; font: inherit; font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--acento); border-radius: 6px; background: var(--superficie); color: var(--tinta); max-width: 160px; }
.pl-tabla .pl-resp.sin { border-color: var(--peligro); }
.pl-tabla tr.marcada .pl-resp { display: inline-block; }
.pl-tabla tr.marcada .pl-resp + .pl-resp-nombre, .pl-tabla tr.marcada .pl-resp-nombre:has(+ .pl-resp) { display: none; }
.pl-lista li .pl-dev { font: inherit; font-size: 10px; color: var(--tinta-3); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.pl-lista li .pl-dev:hover { color: var(--acento); }
/* (PL-2b) El sprint sugerido por la línea base: color del calendario; punteado si es este
   sprint; ámbar si el que tocaba ya pasó. */
.pl-precarga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--resalte); border: 1px solid var(--alerta); border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; font-size: 11.5px; color: var(--alerta-fuerte); }
.pl-sug { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; white-space: nowrap; color: var(--sobre-solido); background: var(--c); }
.pl-sug.aqui { outline: 1.5px dashed var(--c); outline-offset: 1px; }
.pl-sug.atras { background: var(--alerta-suave); color: var(--alerta-fuerte); }
/* (PL-3) Objetivo del sprint por proyecto, al pie de «quién carga con qué». */
.pl-objetivos { border-top: 1px solid var(--linea-suave); margin-top: 10px; padding-top: 10px; }
.pl-objetivo { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 6px; }
.pl-objetivo label { flex: 1; margin: 0; font-size: 11.5px; }
.pl-obj-cab { display: flex; gap: 6px; align-items: baseline; font-weight: 600; }
.pl-obj-cab .sutil { font-size: 10.5px; font-weight: 400; margin-left: auto; }
.pl-objetivo input[type=text] { width: 100%; font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--linea); border-radius: 7px; margin-top: 2px; }

/* (PL-4) Confirmar el compromiso: chip de la cabecera, barra del pie y modal. */
.pl-estado.confirmado { background: var(--ok-suave); color: var(--ok-fuerte); }
.pl-confirmar { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--linea-suave); margin-top: 10px; padding-top: 10px; }
.pl-confirmar .sutil { font-size: 11.5px; margin-right: auto; }
.pl-conf-intro { font-size: 13px; margin: 0 0 10px; }
.pl-conf-cifras { display: grid; gap: 8px; margin-bottom: 10px; }
.pl-conf-cifras > div { display: grid; gap: 1px; border-left: 3px solid var(--linea); padding-left: 10px; font-size: 11.5px; color: var(--tinta-2); }
.pl-conf-cifras span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.pl-conf-cifras b { font-size: 14px; font-weight: 600; color: var(--tinta); }
.pl-conf-cifras .rojo { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--peligro); }
.pl-conf-ayuda { font-size: 11.5px; color: var(--tinta-2); background: var(--superficie-2); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.pl-conf-avisar { display: block; font-size: 12px; margin-bottom: 10px; }
.pl-conf-motivo { display: block; font-size: 11.5px; margin-bottom: 10px; }
.pl-conf-motivo input { display: block; width: 100%; font: inherit; font-size: 12px; padding: 5px 9px; border: 1px solid var(--linea); border-radius: 7px; margin-top: 3px; }

/* (PL-7) La barra del Backlog dice, además de qué hace, dónde se hace lo que ya no hace. */
.sel-nota { font-size: 11px; margin-left: 4px; }
.pl-llegada { font-size: 11.5px; color: var(--tinta-2); background: var(--resalte); border-radius: 8px; padding: 7px 10px; margin: 0 0 8px; }
.pl-traida { font-family: var(--mono); font-size: 9.5px; font-weight: 700; background: var(--alerta-suave); color: var(--alerta-fuerte); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* (PL-8) Mesa recortada a lo que llegó del Backlog, y el porqué de un «Comprometer» apagado. */
.pl-recorte { font-size: 11.5px; color: var(--tinta-2); margin: 0 0 8px; }
.pl-barra-motivo { font-size: 11.5px; color: var(--alerta); font-weight: 600; }
/* El botón principal se lee como botón incluso apagado: atenuarlo hasta desaparecer es
   quitar la opción sin decirlo. */
.pl-barra-sel .boton.primario[disabled] { opacity: .75; border-style: dashed; }

/* ───────────────────────── R4.4 · Equipo: familias, comparar y ficha ───────────────────── */
.eq-familias th { border-bottom: 0; padding-bottom: 0; }
.eq-fam {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  border-left: 1px solid var(--linea-suave); text-align: center;
}
/* (R4.7) Toda la tabla centrada, encabezados y celdas; solo la columna «Persona» sigue a
   la izquierda, con los nombres. */
.tabla-equipo th, .tabla-equipo td, .tabla-equipo td.num,
.tabla-comparar th, .tabla-comparar td, .tabla-comparar td.num { text-align: center; }
.tabla-equipo tr > :first-child, .tabla-comparar tr > :first-child { text-align: left; }
.tabla-equipo thead tr:not(.eq-familias) th:nth-child(3),
.tabla-equipo thead tr:not(.eq-familias) th:nth-child(5),
.tabla-equipo thead tr:not(.eq-familias) th:nth-child(8),
.tabla-equipo tbody td:nth-child(3), .tabla-equipo tbody td:nth-child(5), .tabla-equipo tbody td:nth-child(8) {
  border-left: 1px solid var(--linea-suave);
}
.sb-seg .sb-seg-rotulo {
  padding: 3px 8px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); background: var(--pista);
}
/* (R4.8) Con «Tabla» activa la agrupación no aplica: se atenúa, y sus enlaces vuelven a
   Tarjetas con esa agrupación. En la tarjeta el estado se lee, como en la fila. */
.sb-ejes { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sb-ejes .sb-seg { margin-left: 0; }
.sb-seg.apagado a { color: var(--tinta-3); opacity: .6; }
.sb-seg.apagado a.activo { background: var(--pista); color: var(--tinta-3); font-weight: 500; }
.carta-pie .semaforo.estado { font-size: 9px; padding: 0 6px; flex: none; }
.sb-lista .tabla-lista th { text-align: center; }
.eq-mini, .fp-ind-serie {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 6px;
  vertical-align: baseline;
}
.eq-mini i, .fp-ind-serie i {
  display: block; width: 4px; min-height: 1px; background: var(--info); border-radius: 1px;
}
.eq-mini i.hoy, .fp-ind-serie i.hoy { background: var(--acento); }
.eq-mini i.vacia, .fp-ind-serie i.vacia { background: var(--linea); }
.tabla-comparar td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla-comparar .v { font-weight: 600; }
.tabla-comparar .v.mejor { color: var(--ok-fuerte); }
.tabla-comparar .v.atender { color: var(--alerta-fuerte); }
.tabla-comparar tr.fuera td { color: var(--tinta-3); }
.tabla-comparar tr.fuera .sb-avatar { background: var(--tinta-3); }
.tabla-comparar tfoot td {
  border-top: 2px solid var(--linea); color: var(--tinta-2); font-weight: 600; font-size: 12px;
}
.eq-comparar-nota { margin: 0 0 8px; font-size: 11px; }
.fp-cuenta { margin: 4px 0 0; font-size: 11px; color: var(--tinta-2); display: flex; gap: 6px; align-items: center; }
.fp-indicadores {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px;
}
.fp-fam {
  grid-column: 1 / -1; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 700; margin-top: 4px;
}
.fp-fam small { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10.5px; margin-left: 6px; }
.fp-ind { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.fp-ind-nombre { font-size: 11.5px; font-weight: 600; }
.fp-ind-nombre .sutil { font-weight: 400; font-size: 10.5px; }
.fp-ind-valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; }
.fp-ind-valor.mejor { color: var(--ok-fuerte); }
.fp-ind-valor.atender { color: var(--alerta-fuerte); }
.fp-ind-detalle { font-size: 10.5px; color: var(--tinta-2); }
.fp-ind-vs { font-size: 10.5px; color: var(--tinta-3); }
.fp-ind-vs b { font-family: var(--mono); color: var(--tinta-2); }
.fp-ind .fp-ind-serie { position: absolute; right: 12px; top: 12px; height: 22px; margin: 0; }
.fp-ind .fp-ind-serie i { width: 6px; }
@media (max-width: 1100px) { .fp-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fp-indicadores { grid-template-columns: 1fr; } }

/* ───────────────────────── R4.5 · Métricas en cuatro bloques ───────────────────────── */
.metricas-encabezado .pregunta { font-size: 11.5px; color: var(--tinta-3); }
.metricas-encabezado .rotulo { margin-left: auto; font-size: 12px; color: var(--tinta-2); }
.metricas-encabezado .rotulo b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta); }
.grafico-series { position: relative; height: 180px; }
.grafico-series.bajo { height: 150px; }
.metricas-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.metricas-dos h3 { font-size: 12.5px; margin: 0 0 6px; }
.kpi-linea { font-size: 12px; color: var(--tinta-2); margin: 0 0 6px; }
.kpi-linea b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; color: var(--tinta); margin-right: 4px; }
.kpi-linea b.alerta { color: var(--alerta-fuerte); }
.tabla-ruedan td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 800px) { .metricas-dos { grid-template-columns: 1fr; } }