/* =============================================================================
   styles.css - Sistema de Planeacion Estrategica
   Tema claro/oscuro con variables CSS sobre Bootstrap 5.
   Colores semanticos de prioridad:
     Nivel 3 Urgente -> rojo | Nivel 2 Alta -> naranja | Nivel 1 Normal -> amarillo
   ============================================================================= */

:root {
  --fondo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borde: #e2e8f0;
  --texto: #0f172a;
  --texto-suave: #64748b;
  --marca: #1668e3;
  --marca-suave: #e8f1fe;
  --marca-oscura: #0d1b4c;      /* azul marino del encabezado */
  --sidebar-fondo: #0d1b4c;
  --sidebar-texto: #aebbd6;
  --sidebar-activo: #1668e3;
  --barra-alto: 56px;

  --n3: #dc2626;   /* urgente */
  --n2: #ea580c;   /* alta    */
  --n1: #ca8a04;   /* normal  */
  --ok: #16a34a;
  --info: #2563eb;
  --objetivo: #7c3aed;

  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
  --radio: 12px;
}

[data-tema="oscuro"] {
  --fondo: #0b1120;
  --superficie: #131c31;
  --superficie-2: #0f1728;
  --borde: #243049;
  --texto: #e2e8f0;
  --texto-suave: #94a3b8;
  --marca: #4d90f0;
  --marca-suave: #16224a;
  --marca-oscura: #0a142f;
  --sidebar-fondo: #080d19;
  --sidebar-texto: #94a3b8;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ------------------------------- Base -------------------------------------- */
body {
  /* Explicito: la rejilla asume que el sidebar arranca en el borde de la
     ventana. Sin esto depende del reset de Bootstrap, y si esa hoja tarda o
     falla, todo el layout queda desplazado 8 px. */
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

a { color: var(--marca); }
hr { border-color: var(--borde); opacity: 1; }

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde);
}

.card {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}

.form-control, .form-select {
  background: var(--superficie-2);
  border-color: var(--borde);
  color: var(--texto);
}
.form-control:focus, .form-select:focus {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--marca);
  box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .18);
}
.form-control::placeholder { color: var(--texto-suave); }
.table { --bs-table-bg: transparent; color: var(--texto); }
.table > :not(caption) > * > * { border-color: var(--borde); }
.text-muted, .text-secondary { color: var(--texto-suave) !important; }

/* ------------------------------ Estructura --------------------------------- */
/*
 * Rejilla general. El sidebar ocupa toda la altura (el logo va dentro de el) y
 * la barra de sistemas se queda sobre la columna de contenido, igual que en el
 * panel de onboarding.
 */
.app {
  display: grid;
  /* minmax(0, 1fr): un tablero ancho se desplaza dentro de su caja en vez
     de estirar toda la pagina (en el celular quedaba de 1.500 px). */
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: var(--barra-alto) 1fr;
  grid-template-areas:
    "lateral barra"
    "lateral contenido";
  min-height: 100vh;
}

/*
 * Barra superior: navegacion ENTRE sistemas (Seleccion, Onboarding, este
 * modulo, Soporte). Fondo claro y botones tipo pildora.
 */
.barra-sistemas {
  grid-area: barra;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.barra-sistemas .sistema {
  color: var(--texto-suave);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.barra-sistemas .sistema:hover { border-color: var(--marca); color: var(--marca); }
.barra-sistemas .sistema.actual {
  background: var(--marca); border-color: var(--marca); color: #fff;
}
.barra-sistemas .engrane {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-suave);
  width: 36px; height: 36px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
}
.barra-sistemas .engrane:hover { border-color: var(--marca); color: var(--marca); }
.barra-sistemas .usuario {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  color: var(--texto-suave); font-size: .78rem; text-align: right;
}
.barra-sistemas .usuario .correo { font-weight: 600; color: var(--texto); display: block; }
.barra-sistemas .usuario .rol {
  background: #f0b429; color: #1f2937; font-size: .6rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 991px) {
  .barra-sistemas .usuario .correo, .barra-sistemas .sistema span.texto { display: none; }
}

.sidebar {
  grid-area: lateral;
  background: var(--sidebar-fondo);
  color: var(--sidebar-texto);
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Cabecera del sidebar: ocupa el alto de la barra y lleva el logo */
.sidebar .marca {
  padding: 16px 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin: 0 -14px 14px;
  padding-left: 18px;
  padding-right: 18px;
}
.sidebar .marca img { width: 100%; max-width: 172px; height: auto; display: block; }
.sidebar .marca .modulo {
  color: #7f95c4; font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-top: 9px;
}

/* Los SVG heredan el color del texto: blancos en el sidebar, grises en la barra */
.icono { flex-shrink: 0; vertical-align: -3px; }
.sidebar .icono { opacity: .85; }
.sidebar a.nav-item.activo .icono { opacity: 1; }

.sidebar a.nav-item {
  color: var(--sidebar-texto);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .93rem;
  transition: background .15s ease, color .15s ease;
}
.sidebar a.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.nav-item.activo {
  background: var(--sidebar-activo); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(22, 104, 227, .35);
}
.sidebar .separador { margin: 12px 10px 6px; font-size: .7rem; letter-spacing: .08em;
                      text-transform: uppercase; color: #64748b; }
.sidebar .pie {
  margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 14px; display: flex; flex-direction: column; gap: 8px;
}
.sidebar .pie .btn-pie {
  border: 0; border-radius: 9px; padding: 10px; font-size: .85rem; font-weight: 600;
  line-height: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}
.sidebar .pie .btn-pie.principal { background: var(--marca); color: #fff; }
.sidebar .pie .btn-pie.principal:hover { background: #0f56c4; color: #fff; }
.sidebar .pie .btn-pie.secundario {
  background: transparent; color: var(--sidebar-texto); border: 1px solid rgba(255, 255, 255, .16);
}
.sidebar .pie .btn-pie.secundario:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar .pie .quien { padding: 0 4px 4px; }
.sidebar .pie .quien .nombre { color: #fff; font-weight: 600; font-size: .85rem; }
.sidebar .pie .quien .cargo { font-size: .72rem; color: #7f95c4; }

/* Sin tope de ancho: en un monitor de 27" el limite de 1500 px dejaba media
   pantalla vacia. El contenido se reparte en mas columnas (ver .row de cada
   pagina) en lugar de quedarse centrado en una franja. */
.contenido { grid-area: contenido; padding: 22px 28px 60px; width: 100%; }
@media (min-width: 1800px) {
  .contenido { padding: 26px 40px 70px; }
}

.barra-superior {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.barra-superior .titulos { margin-right: 4px; }
.barra-superior h1 { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; }
.barra-superior .subtitulo { font-size: .82rem; color: var(--texto-suave); margin-top: 2px; }
.barra-superior .buscador { flex: 1 1 260px; max-width: 420px; position: relative; }

/* ------------------------------ Migas de pan ------------------------------- */
.migas {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .8rem; color: var(--texto-suave); margin-bottom: 10px;
}
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--marca); text-decoration: underline; }
.migas .sep { opacity: .5; }
.migas .actual { color: var(--texto); font-weight: 600; }

/* ------------------------- Botones y estados de carga ---------------------- */
.btn { transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: scale(.96); }
.nav-item, .sistema, .tarea, .kpi { transition: transform .1s ease, box-shadow .15s ease; }
.sistema:active { transform: scale(.97); }

/* Barra de progreso superior mientras hay peticiones en curso */
#progreso-global {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--marca), #7c3aed);
  z-index: 2000; transition: width .25s ease, opacity .3s ease;
  box-shadow: 0 0 8px rgba(22, 104, 227, .6);
}

/* Boton ocupado: spinner y bloqueo mientras dura la operacion */
.btn.ocupado { position: relative; color: transparent !important; pointer-events: none; }
.btn.ocupado::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: girar .6s linear infinite;
}
.btn-outline-secondary.ocupado::after, .btn-outline-primary.ocupado::after {
  border-color: rgba(0, 0, 0, .25); border-top-color: var(--marca);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Contenido que se esta refrescando */
.recargando { opacity: .55; transition: opacity .2s ease; pointer-events: none; }

/* --------------------------- Prioridad / estado ---------------------------- */
.badge-n3, .badge-n2, .badge-n1 {
  color: #fff; font-weight: 600; font-size: .7rem; padding: .3em .6em; border-radius: 999px;
}
.badge-n3 { background: var(--n3); }
.badge-n2 { background: var(--n2); }
.badge-n1 { background: var(--n1); }

.borde-n3 { border-left: 4px solid var(--n3) !important; }
.borde-n2 { border-left: 4px solid var(--n2) !important; }
.borde-n1 { border-left: 4px solid var(--n1) !important; }

/* Horizonte del roadmap tactico: Now / Next / Later */
.badge-horizonte {
  color: #fff; font-weight: 700; font-size: .66rem; letter-spacing: .04em;
  padding: .25em .6em; border-radius: 6px; text-transform: uppercase;
}

/* Columnas del tablero Now/Next/Later */
.tablero-horizonte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tablero-horizonte .columna { display: flex; flex-direction: column; gap: 10px; }
.tablero-horizonte .cabecera {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--borde); padding-bottom: 8px; margin-bottom: 4px;
}
@media (max-width: 767px) { .tablero-horizonte { grid-template-columns: 1fr; } }

/* Bloque de inbox GTD: se distingue del resto para invitar a vaciarlo */
.bloque-inbox {
  border: 1px dashed var(--marca); background: var(--marca-suave); border-radius: var(--radio); padding: 14px;
}

.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.punto-n3 { background: var(--n3); }
.punto-n2 { background: var(--n2); }
.punto-n1 { background: var(--n1); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto-suave); border-radius: 999px; padding: 2px 9px; font-size: .72rem;
}

/* ------------------------------ Tarjetas KPI ------------------------------- */
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  height: 100%;
}
.kpi .valor { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi .etiqueta { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------- Tareas ------------------------------------ */
.tarea {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 9px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tarea:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.tarea .titulo { font-weight: 600; margin: 0; }
.tarea.completada .titulo { text-decoration: line-through; color: var(--texto-suave); }
.tarea .meta { font-size: .78rem; color: var(--texto-suave); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tarea .acciones { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.seccion-urgencia { margin-bottom: 26px; }
.seccion-urgencia h2 {
  font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.seccion-urgencia h2 .conteo {
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-suave);
  border-radius: 999px; font-size: .72rem; padding: 1px 9px; font-weight: 600;
}

/* ---------------------------- Mini calendario ------------------------------ */
.mini-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.mini-dia {
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 9px;
  padding: 8px 5px; text-align: center; min-height: 74px; cursor: pointer;
}
.mini-dia .dia-num { font-weight: 700; font-size: 1.05rem; }
.mini-dia .dia-nom { font-size: .66rem; color: var(--texto-suave); text-transform: uppercase; }
.mini-dia.hoy { border-color: var(--marca); background: var(--marca-suave); }
.mini-dia .puntos { display: flex; gap: 3px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }

/* -------------------------------- Roadmap ---------------------------------- */
.roadmap-grid { overflow-x: auto; padding-bottom: 10px; }
.roadmap-fila { display: grid; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 760px; }
.roadmap-celda {
  height: 30px; border-radius: 6px; background: var(--superficie-2);
  border: 1px dashed var(--borde);
}
.roadmap-barra {
  height: 30px; border-radius: 6px; color: #fff; font-size: .74rem; font-weight: 600;
  display: flex; align-items: center; padding: 0 9px; overflow: hidden; white-space: nowrap;
}
.roadmap-encabezado { font-size: .72rem; color: var(--texto-suave); text-align: center; font-weight: 600; }
.roadmap-titulo { font-size: .84rem; font-weight: 600; padding-right: 10px; }

/* ------------------------------ Kanban listas ------------------------------ */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.kanban-col { min-width: 290px; flex: 0 0 290px; }
.kanban-col .encabezado {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: .88rem; margin-bottom: 10px;
}

/* ------------------------------ Utilidades --------------------------------- */
.progreso { height: 7px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--marca); }

.vacio { text-align: center; color: var(--texto-suave); padding: 26px 12px; font-size: .9rem; }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); padding: 18px; }

.resultados-busqueda {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--sombra); max-height: 360px; overflow-y: auto;
}
.resultados-busqueda a {
  display: block; padding: 9px 12px; color: var(--texto); text-decoration: none; font-size: .86rem;
  border-bottom: 1px solid var(--borde);
}
.resultados-busqueda a:hover { background: var(--superficie-2); }

/* ------------------------------ Centro de ayuda ---------------------------- */
/*
 * El manual puede quedarse ACOPLADO como tercera columna, para leerlo mientras
 * se usa el sistema sin abrir y cerrar a cada paso. En pantallas estrechas
 * vuelve a comportarse como panel flotante, que ahi si tapa todo.
 */
#ayuda-acoplada {
  grid-area: ayuda;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: none;
}
body.ayuda-acoplada #ayuda-acoplada { display: block; }
body.ayuda-acoplada .app {
  grid-template-columns: 250px minmax(0, 1fr) 420px;
  grid-template-areas:
    "lateral barra    ayuda"
    "lateral contenido ayuda";
}
@media (max-width: 1399px) {
  /* Sin espacio para tres columnas: el panel vuelve a ser flotante */
  body.ayuda-acoplada .app {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas: "lateral barra" "lateral contenido";
  }
  body.ayuda-acoplada #ayuda-acoplada { display: none; }
}

.ayuda-panel { width: min(560px, 100%) !important; }
.ayuda-panel .offcanvas-body { padding-top: 0; }
.ayuda-seccion { margin-bottom: 26px; }
.ayuda-seccion h4 {
  font-size: .95rem; font-weight: 700; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.ayuda-seccion .para-que {
  background: var(--marca-suave); border-left: 3px solid var(--marca);
  padding: 9px 12px; border-radius: 0 8px 8px 0; font-size: .84rem; margin-bottom: 12px;
}
.ayuda-pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.ayuda-pasos li {
  counter-increment: paso; position: relative; padding: 0 0 12px 34px; font-size: .86rem;
}
.ayuda-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--marca); color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ayuda-tabla { width: 100%; font-size: .82rem; margin-bottom: 12px; }
.ayuda-tabla th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--borde); }
.ayuda-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.ayuda-tip {
  background: #fff7e6; border: 1px solid #ffe0a3; color: #7a4f01;
  padding: 9px 12px; border-radius: 8px; font-size: .82rem; margin: 10px 0;
}
[data-tema="oscuro"] .ayuda-tip { background: #2a2312; border-color: #5c4a1a; color: #f3d99b; }
.ayuda-indice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.ayuda-indice a {
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 9px;
  padding: 9px 11px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--texto);
}
.ayuda-indice a:hover { border-color: var(--marca); }

/* -------------------------------- Login ------------------------------------ */
.pantalla-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(135deg, #0d1b4c 0%, #123a86 55%, #1668e3 100%);
}
.caja-login { width: 100%; max-width: 430px; }
.caja-login .logo-marca { display: block; width: 100%; max-width: 280px; margin: 0 auto 26px; }

/* ------------------------------ Responsive --------------------------------- */
@media (max-width: 991px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "barra" "contenido";
  }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 1045;
    height: 100vh; transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.abierto { transform: translateX(0); }
  .contenido { padding: 16px 14px 70px; }
  .velo-sidebar { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1040; }
}
@media (min-width: 992px) { .btn-menu, .velo-sidebar { display: none !important; } }

@media print {
  .sidebar, .barra-sistemas, .barra-superior .btn, .btn-menu, .no-imprimir { display: none !important; }
  .app { grid-template-columns: 1fr; grid-template-areas: "contenido"; }
  body { background: #fff; }
}

/* ------------------------- Por validar (propuestas) ------------------------ */
/* Una tarea propuesta: casilla, texto y a quien le toca, en una fila. */
.propuesta-tarea {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); margin-bottom: 6px;
}
.propuesta-tarea:has(.chk-tarea:not(:checked)) { opacity: .5; }
.propuesta-tarea .descripcion {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.propuesta-tarea .descripcion:hover { -webkit-line-clamp: unset; }
.propuesta-tarea .meta {
  font-size: .76rem; color: var(--texto-suave); display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; margin-top: 4px;
}
.propuesta-tarea .responsable { flex: 0 0 250px; }
/* Asa para arrastrar: solo desde aqui, para que en el celular se pueda bajar
   por la pagina tocando la tarea. */
.asa-arrastre {
  cursor: grab; touch-action: none; user-select: none; color: var(--texto-suave);
  padding: 0 2px; font-size: 1.05rem; line-height: 1.3;
}
.asa-arrastre:hover { color: var(--texto); }
.arrastre-copia {
  position: fixed; z-index: 2000; pointer-events: none; margin: 0 !important;
  box-shadow: var(--sombra); opacity: .95; transform: rotate(1deg);
}
.arrastre-origen { opacity: .35; border-style: dashed !important; }
body.arrastrando, body.arrastrando * { cursor: grabbing !important; user-select: none; }
/* Lo fijo (la barra de validar) no tapa la lista donde se quiere soltar. */
body.arrastrando .barra-validar { pointer-events: none; opacity: .4; }

/* ------------------------------- Asistente --------------------------------- */
.panel-asistente { width: 440px !important; max-width: 100vw; }
.panel-asistente .offcanvas-body { display: flex; flex-direction: column; gap: 10px; }
.asistente-msg { border-radius: 12px; padding: 9px 12px; font-size: .9rem; max-width: 92%; }
.asistente-msg.persona { align-self: flex-end; background: var(--marca); color: #fff; }
.asistente-msg.asistente { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borde); }
.asistente-ejemplo {
  display: block; width: 100%; text-align: left; font-size: .85rem; margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px; padding: 7px 10px;
  color: var(--texto);
}
.asistente-ejemplo:hover { border-color: var(--marca); }
.asistente-previa { margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 8px; }
.asistente-cambio {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; cursor: pointer;
  border-bottom: 1px dashed var(--borde); font-size: .85rem;
}
.asistente-cambio:last-of-type { border-bottom: 0; }
.asistente-entrada { display: flex; gap: 8px; padding: 10px 12px; align-items: flex-end; }
.asistente-entrada textarea { resize: none; }
/* En el celular la barra de arriba no cabe con todo: el rol se ve en el menu. */
@media (max-width: 480px) { .barra-sistemas .usuario { display: none; } }

/* Seleccionar varias tareas de un proyecto para borrarlas. */
.modo-seleccion .tarea { cursor: pointer; position: relative; }
.modo-seleccion .tarea > .form-check-input,
.modo-seleccion .tarea .acciones { visibility: hidden; }
.modo-seleccion .tarea::after {
  content: ''; position: absolute; top: 8px; left: 8px; width: 18px; height: 18px;
  border: 2px solid var(--borde); border-radius: 5px; background: var(--superficie);
}
.modo-seleccion .tarea.seleccionada { outline: 2px solid #dc3545; background: rgba(220, 53, 69, .06); }
.modo-seleccion .tarea.seleccionada::after {
  content: '\2713'; background: #dc3545; border-color: #dc3545; color: #fff;
  font-size: 12px; line-height: 14px; text-align: center; font-weight: 700;
}
.barra-seleccion { position: fixed; left: 12px; right: 12px; bottom: 14px; margin: 0 auto;
  max-width: 760px; z-index: 1040; }
@media (min-width: 992px) { .barra-seleccion { left: 262px; } }   /* sin tapar el menu */

/* Una lista de la propuesta: sus tareas y donde soltar las que se arrastren. */
.fase-propuesta { border-left: 3px solid var(--borde); padding-left: 10px; margin-top: 12px; }
.fase-propuesta .zona-tareas { min-height: 38px; }
.zona-tareas .zona-vacia {
  font-size: .8rem; color: var(--texto-suave); border: 1px dashed var(--borde);
  border-radius: 9px; padding: 8px 10px; margin-bottom: 6px;
}
.zona-tareas:has(.propuesta-tarea) .zona-vacia { display: none; }
.propuesta-tarea .acciones-tarea { flex: 0 0 auto; }
.chip-nuevo { background: #dcfce7; border-color: #86efac; color: #166534; }
[data-tema="oscuro"] .chip-nuevo { background: #14532d; border-color: #166534; color: #bbf7d0; }

/* Barra fija con los botones de validar: siempre a la vista en planes largos. */
.barra-validar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 10px 14px; margin-top: 8px;
}
@media (max-width: 767px) {
  .propuesta-tarea { flex-wrap: wrap; }
  /* El titulo se queda junto a la casilla aunque sus etiquetas sean largas. */
  .propuesta-tarea > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
  .propuesta-tarea .responsable { flex: 1 1 100%; }
}

/* Tarjeta para crear un proyecto: la primera del listado, a la vista de todos. */
.tarjeta-nuevo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 150px; text-align: center; cursor: pointer;
  border: 2px dashed var(--borde) !important; background: transparent; color: var(--texto);
}
.tarjeta-nuevo:hover { border-color: var(--marca) !important; color: var(--marca); }
.tarjeta-nuevo .mas { font-size: 2rem; line-height: 1; font-weight: 300; }

/* Casillas de departamentos en el formulario de objetivo. */
.lista-departamentos { display: flex; flex-wrap: wrap; gap: 4px 16px; }