/* Sistema de Gestión de Proyectos · Universidad de Cartagena

   Criterio del diseño (el mismo del sistema documental)
   -----------------------------------------------------
   Nada de cajas por defecto: sin tarjetas con sombra, sin esquinas muy
   redondeadas, sin pastillas rellenas. Las cifras van en línea como texto, las
   secciones se separan con líneas finas y espacio, los estados se leen con un
   punto de color y la palabra. Solo dos cosas se rellenan de color: la franja
   superior y el botón principal de cada vista. El color lo da la paleta del
   proyecto (empresa) que se está viendo, o la general del sitio. */

:root{
  --azul:#1447c7;         /* color de marca: franja, botón principal, enlaces */
  --azul-hover:#0f389f;
  --marino:#0f2b57;       /* cabecera de las tablas */
  --titulo:#0d1b33;
  --texto:#2b3445;
  --tenue:#6b7486;
  --linea:#dde3ec;
  --linea-suave:#eef1f6;
  --cebra:#f3f6fb;
  --fondo:#ffffff;
  --verde:#2e9e5b;
  --ambar:#e0a200;
  --rojo:#d93f45;
  --dorado:#9a6a0b;       /* hitos */
  --radio:4px;
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Nombres que usa el código de antes. Apuntan a los de arriba para que
     ninguna vista cambie de color por su cuenta. */
  --azul-medio:var(--azul);
  --azul-claro:var(--cebra);
  --gris-900:var(--titulo);
  --gris-700:var(--texto);
  --gris-500:var(--tenue);
  --gris-300:var(--linea);
  --gris-100:var(--linea-suave);
  --gris-50:var(--cebra);
  --blanco:#fff;
  --sombra:none;
}

/* Paletas por proyecto o empresa: redefinen solo los colores de marca. */
:root[data-paleta="verde"],   .muestra[data-paleta="verde"]   {--azul:#1f7a47;--azul-hover:#165c35;--marino:#123d27}
:root[data-paleta="vino"],    .muestra[data-paleta="vino"]    {--azul:#8a1e3c;--azul-hover:#6d162f;--marino:#4a1022}
:root[data-paleta="pizarra"], .muestra[data-paleta="pizarra"] {--azul:#3d4f66;--azul-hover:#2c3a4d;--marino:#1f2a38}
:root[data-paleta="ocre"],    .muestra[data-paleta="ocre"]    {--azul:#9a6a0b;--azul-hover:#7a5408;--marino:#4f3706}
:root[data-paleta="morado"],  .muestra[data-paleta="morado"]  {--azul:#5b3fa6;--azul-hover:#47317f;--marino:#2f2157}
:root[data-paleta="turquesa"],.muestra[data-paleta="turquesa"]{--azul:#0f7c8c;--azul-hover:#0b606c;--marino:#0a4048}
.muestra[data-paleta="azul"]{--azul:#1447c7;--marino:#0f2b57}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--fuente);font-size:14.5px;line-height:1.5;color:var(--texto);background:var(--fondo);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(20,71,199,.12)}
.oculto{display:none !important}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
code{font-size:.92em}

/* ---------- carga ---------- */
.pantalla-carga{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;z-index:900;color:var(--tenue)}
.giro{width:34px;height:34px;border:3px solid var(--linea);border-top-color:var(--azul);border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- estructura: franja arriba, panel a la izquierda, contenido ---------- */
.aplicacion{display:grid;grid-template-columns:236px 1fr;grid-template-rows:auto 1fr;height:100vh}
@supports (height:100dvh){.aplicacion{height:100dvh}}

/* Franja superior: es lo único con color de fondo. */
.franja{grid-column:1/-1;background:var(--azul);color:#fff;padding-top:env(safe-area-inset-top)}
.franja-inner{display:flex;align-items:center;gap:18px;min-height:52px;padding:0 20px}
.marca-franja{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto;min-width:0}
.marca-franja strong{font-size:15px;font-weight:700;color:#fff;white-space:nowrap}
.marca-franja span{font-size:11.5px;color:#c3d1f5}

/* Selector del proyecto (empresa) en la franja. */
.selector-repo{position:relative;min-width:0;display:flex;align-items:center;margin-left:6px}
.repo-etiqueta{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#c3d1f5;font-weight:500;line-height:1.2}
.selector-foco{width:auto;max-width:34vw;padding:2px 26px 2px 0;border:0;background:transparent;color:#fff;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;border-radius:var(--radio)}
.selector-foco:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.selector-foco option{color:var(--titulo);font-weight:400;background:#fff}
.repo-actual{display:flex;flex-direction:column;line-height:1.15;color:#fff}
.repo-actual strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}

/* Menú de la sesión, arriba a la derecha. */
.menu-usuario{position:relative;margin-left:auto;flex:0 0 auto}
.menu-boton{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font-size:15px;font-weight:500;padding:8px 2px}
.menu-nombre{white-space:nowrap}
.menu-perfil{font-size:12.5px;color:#c3d1f5;font-weight:400}
.menu-boton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:760;min-width:230px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:0 6px 20px rgba(13,27,51,.12);padding:6px 0;color:var(--texto)}
.menu-quien{font-size:12.5px;color:var(--tenue);padding:6px 16px 8px;border-bottom:1px solid var(--linea-suave);margin:0 0 4px;overflow-wrap:anywhere}
.menu-lista button,.menu-lista a{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 16px;color:var(--texto);font-size:14.5px;text-decoration:none}
.menu-lista button:hover,.menu-lista a:hover{background:var(--cebra);color:var(--azul);text-decoration:none}
.menu-lista [hidden]{display:none}

/* Panel lateral: blanco, con una línea a la derecha. La opción activa se
   marca con el color de la paleta y un filete a la izquierda, sin caja. */
.lateral{background:#fff;border-right:1px solid var(--linea);display:flex;flex-direction:column;overflow:hidden}
.menu{display:flex;flex-direction:column;padding:14px 0 10px;gap:1px;overflow-y:auto;flex:1}
.menu-item{display:flex;align-items:center;gap:10px;padding:9px 18px 9px 17px;background:none;border:0;border-left:3px solid transparent;
  color:var(--texto);text-align:left;font-size:14.5px;transition:background .12s,color .12s}
.menu-item:hover{background:var(--cebra);color:var(--azul)}
.menu-item.activo{border-left-color:var(--azul);color:var(--azul);font-weight:600;background:var(--cebra)}
.menu-item .ico{width:18px;text-align:center;color:var(--tenue);font-size:13px}
.menu-item.activo .ico,.menu-item:hover .ico{color:var(--azul)}
.lateral-pie{padding:12px 18px 16px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--tenue);line-height:1.6}
.lateral-pie b{color:var(--titulo);font-weight:600}

.menu-grupo{display:flex;align-items:center;gap:10px;width:100%;padding:9px 18px 9px 17px;background:none;border:0;border-left:3px solid transparent;
  color:var(--texto);text-align:left;font:inherit;font-size:14.5px;transition:background .12s,color .12s;margin-top:6px}
.menu-grupo:hover{background:var(--cebra);color:var(--azul)}
.menu-grupo.activo{color:var(--azul);font-weight:600}
.menu-grupo .ico{width:18px;text-align:center;color:var(--tenue);font-size:13px}
.menu-grupo .flecha{margin-left:auto;font-size:11px;color:var(--tenue);transition:transform .18s}
.menu-grupo.desplegado .flecha{transform:rotate(90deg)}
.menu-grupo.oculto{display:none}
.submenu{display:flex;flex-direction:column;gap:1px;margin:0 0 4px 0}
.submenu[hidden]{display:none}
.submenu .menu-item{font-size:13.5px;padding-left:34px}

/* Contenido */
.contenido{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.barra-superior{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:26px 28px 14px;background:#fff;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.barra-titulo{min-width:0;flex:1}
.barra-superior h1{margin:0;font-size:30px;line-height:1.1;font-weight:800;color:var(--titulo);letter-spacing:-.02em;overflow-wrap:anywhere}
.sutil{margin:4px 0 0;color:var(--tenue);font-size:13.5px}
.barra-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vista{padding:22px 28px 48px;overflow-y:auto;flex:1}

/* ---------- controles ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--linea);background:#fff;color:var(--texto);
  padding:9px 16px;border-radius:var(--radio);font-weight:600;font-size:14px;white-space:nowrap;line-height:1.2;text-decoration:none;transition:.12s}
.boton:hover{border-color:var(--azul);color:var(--azul);text-decoration:none}
.boton.primario{background:var(--azul);border-color:var(--azul);color:#fff}
.boton.primario:hover{background:var(--azul-hover);border-color:var(--azul-hover);color:#fff}
.boton.peligro{color:var(--rojo);border-color:#f0c3c5}
.boton.peligro:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.boton.pequeno{padding:5px 10px;font-size:13px;font-weight:500}
.icono-boton{background:none;border:0;font-size:16px;color:var(--tenue);padding:4px 7px;border-radius:var(--radio);line-height:1.2}
.icono-boton:hover{background:var(--cebra);color:var(--azul)}

input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--radio);font-family:inherit;font-size:14.5px;background:#fff;color:var(--titulo)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(20,71,199,.12)}
textarea{min-height:78px;resize:vertical}
label{display:block;font-size:13px;font-weight:600;color:var(--texto);margin-bottom:5px}
.campo{margin-bottom:14px}
.rejilla-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rejilla-campos .ancho{grid-column:1 / -1}

/* ---------- secciones (antes tarjetas): sin caja, con título y una línea ---------- */
.tarjeta{background:transparent;border:0;border-top:1px solid var(--linea);border-radius:0;box-shadow:none;padding:16px 0 6px;margin-bottom:22px}
.tarjeta h2{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--titulo);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tarjeta h3{margin:0 0 10px;font-size:12.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tarjeta h2 .boton.pequeno{font-weight:500;margin-left:auto}

/* Cifras en línea, como texto: sin cajas de colores. Solo las que significan
   algo (bien, atención, mal) llevan color en el número. */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 24px;margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--linea)}
.kpi{display:flex;flex-direction:column-reverse;background:none;border:0;border-radius:0;padding:0;box-shadow:none;min-width:0}
.kpi .valor{font-size:24px;font-weight:700;color:var(--titulo);line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .etiqueta{font-size:11.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:0 0 2px}

.columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 36px;align-items:start}

/* ---------- tablas ---------- */
.tabla-caja{overflow:auto;border:1px solid var(--linea);border-radius:0;background:#fff;box-shadow:none;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th{background:var(--marino);color:#fff;text-align:left;padding:11px 12px;font-weight:600;position:sticky;top:0;z-index:2;border-bottom:0;white-space:nowrap;cursor:pointer;user-select:none;font-size:13.5px}
th.no-orden{cursor:default}
td{padding:10px 12px;border-bottom:1px solid var(--linea-suave);vertical-align:middle}
tbody tr:nth-child(even){background:#f8f9fb}
tbody tr:hover{background:#eef2f9}
tr.fila-fase{background:var(--cebra);font-weight:600}
tr.fila-fase td{border-bottom:1px solid var(--linea)}
tr.fila-fase:hover{background:#e8edf6}
tr.fila-hito td:first-child{color:var(--dorado);font-weight:600}
tr.fila-grupo td{background:#fff;color:var(--tenue);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px 4px 26px;border-bottom:1px solid var(--linea)}
tr.fila-grupo:hover td{background:#fff}
.acciones-fila{display:flex;gap:2px;justify-content:flex-end}
.vacio{padding:40px 12px;text-align:center;color:var(--tenue);font-size:15px}

/* ---------- estados y prioridades: un punto y la palabra ---------- */
.pastilla{display:inline-flex;align-items:center;gap:7px;padding:0;border-radius:0;font-size:13.5px;font-weight:500;white-space:nowrap;border:0;background:none;color:var(--titulo)}
.pastilla::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tenue);flex:0 0 auto}
.e-Pendiente::before{background:var(--tenue)}
.e-EnProgreso::before,.e-EnTratamiento::before{background:var(--ambar)}
.e-Completada::before,.e-Completado::before,.e-Mitigado::before,.e-Entregado::before{background:var(--verde)}
.e-Bloqueada::before,.e-Materializado::before{background:var(--rojo)}
.e-Cancelada::before,.e-Cerrado::before,.e-Inactivo::before{background:#b4bccb}
.e-Cancelada,.e-Cerrado,.e-Inactivo{color:var(--tenue)}
.e-Identificado::before,.e-Activo::before{background:var(--azul)}
.p-Alta::before,.p-Critica::before,.p-Urgente::before{background:var(--rojo)}
.p-Media::before{background:var(--ambar)}
.p-Baja::before{background:#8fa3c4}

.marca-tipo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:3px;margin-right:6px;vertical-align:middle;border:1px solid var(--linea);color:var(--tenue);background:#fff}
.t-FASE{border-color:var(--azul);color:var(--azul)}
.t-HITO{border-color:var(--dorado);color:var(--dorado)}
.t-TAREA{border-color:var(--linea);color:var(--tenue)}

.barra-progreso{position:relative;height:8px;background:var(--linea-suave);border-radius:4px;overflow:hidden;min-width:80px}
.barra-progreso span{position:absolute;inset:0 auto 0 0;background:var(--azul);border-radius:4px}
.barra-progreso b{position:absolute;left:0;top:10px;font-size:11px;line-height:1;color:var(--tenue);font-weight:500}
td .barra-progreso,.avance-editable .barra-progreso{margin-bottom:12px}

.avance-editable{display:flex;align-items:center;gap:8px}
.avance-editable .barra-progreso{flex:1;min-width:70px}
.avance-editable input{width:62px;padding:3px 5px;font-size:12.5px;text-align:center;flex:0 0 auto}

/* ---------- filtros: una fila con línea debajo, sin caja ---------- */
.filtros{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;background:none;border:0;border-bottom:1px solid var(--linea);border-radius:0;padding:0 0 16px;box-shadow:none}
.filtros .campo{margin:0;min-width:150px;flex:1 1 150px}
.filtros .campo.ancho{flex:2 1 240px}
.filtros label{font-size:12.5px;color:var(--tenue)}

/* ---------- panel ---------- */
.lista-avance{list-style:none;margin:0;padding:0}
.lista-avance li{padding:9px 0;border-bottom:1px solid var(--linea-suave)}
.lista-avance li:last-child{border-bottom:0}
.lista-avance .fila{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:5px}
.lista-avance .fila b{color:var(--titulo);font-weight:600}
.lista-avance .fila span{color:var(--tenue);font-size:12.5px}

.alerta{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border:0;border-bottom:1px solid var(--linea-suave);border-radius:0;margin:0;font-size:14px;background:none}
.alerta:last-child{border-bottom:0}
.alerta::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--tenue)}
.alerta.roja::before{background:var(--rojo)}
.alerta.ambar::before{background:var(--ambar)}
.alerta.azul::before{background:var(--azul)}
.alerta > div:first-of-type{flex:1 1 0;min-width:0}
.alerta .cuando{margin-left:auto;color:var(--tenue);font-size:12px;white-space:nowrap}

.linea-tiempo{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linea);max-height:430px;overflow:auto}
.linea-tiempo li{position:relative;padding:0 0 14px 12px;font-size:14px}
.linea-tiempo li::before{content:"";position:absolute;left:-21px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--azul);border:2px solid #fff}
.linea-tiempo .meta{color:var(--tenue);font-size:12px;margin-top:2px}

.panel-plazo{margin-bottom:16px}
.panel-plazo h3{margin:0 0 12px;font-size:12.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em}
.plazo-barras{display:grid;gap:14px}
.plazo-linea .fila{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.plazo-linea .fila span{font-variant-numeric:tabular-nums;font-weight:600}
.panel-plazo .barra{height:8px;background:var(--linea-suave);border-radius:4px;overflow:hidden}
.panel-plazo .relleno.tiempo{display:block;height:100%;background:var(--tenue);border-radius:4px}
.plazo-detalle{margin:12px 0 0;font-size:13px;color:var(--tenue)}
.plazo-detalle b{color:var(--titulo);font-variant-numeric:tabular-nums}
.plazo-veredicto{margin:6px 0 0;font-size:14px;font-weight:600}
.plazo-veredicto.bueno{color:var(--verde)}
.plazo-veredicto.regular{color:var(--ambar)}
.plazo-veredicto.malo{color:var(--rojo)}

.lista-proximos li{padding:7px 8px;border-radius:var(--radio);transition:background .12s}
.lista-proximos li:hover{background:var(--cebra)}
.lista-proximos li .sutil{font-size:12.5px}

/* ---------- Gantt ---------- */
.gantt-caja{background:#fff;border:1px solid var(--linea);border-radius:0;box-shadow:none;overflow:auto;max-height:calc(100vh - 260px);-webkit-overflow-scrolling:touch}
@supports (height:100dvh){.gantt-caja{max-height:calc(100dvh - 260px)}}
.gantt-leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--tenue);margin:10px 2px 0}
.gantt-leyenda i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---------- equipo ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px}
.persona{background:none;border:0;border-bottom:1px solid var(--linea);border-radius:0;box-shadow:none;padding:16px 0 18px}
.persona-cab{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--cebra);color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;font-size:14px}
.persona-cab b{display:block;font-size:15px;color:var(--titulo)}
.persona-cab span{font-size:12.5px;color:var(--tenue)}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-top:12px;border-top:1px solid var(--linea-suave);padding-top:10px}
.mini-stats div{background:none;border-radius:0;padding:2px}
.mini-stats b{display:block;font-size:17px;color:var(--titulo);font-variant-numeric:tabular-nums}
.mini-stats span{font-size:11px;color:var(--tenue)}

/* ---------- matriz de riesgos (mapa de calor: aquí el color sí informa) ---------- */
.matriz{border-collapse:collapse;width:auto}
.matriz td,.matriz th{border:1px solid var(--linea);text-align:center;padding:0;width:62px;height:46px;font-size:12.5px;cursor:default;position:static}
.matriz th{background:#fff;color:var(--tenue);font-weight:600;padding:6px;font-size:12px}
.matriz td b{display:block;font-size:15px;color:var(--titulo)}
.n1{background:#e6f4ea} .n2{background:#eef6dc} .n3{background:#fff4d1} .n4{background:#ffe0c7} .n5{background:#f9d0cc}
.matriz-ejes{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--tenue);margin-top:8px}

/* ---------- modal ---------- */
.capa-modal{position:fixed;inset:0;background:rgba(13,27,51,.45);display:flex;align-items:center;justify-content:center;z-index:800;padding:20px}
.modal{background:#fff;border-radius:6px;width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(13,27,51,.25)}
.modal.ancho{width:min(1040px,100%)}
.modal-cabecera{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--linea)}
.modal-cabecera h2{margin:0;font-size:19px;font-weight:700;color:var(--titulo)}
.modal-cuerpo{padding:20px 24px;overflow-y:auto}
.modal-pie{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 18px;border-top:1px solid var(--linea);background:#fff;border-radius:0 0 6px 6px}

.lista-check{border:1px solid var(--linea);border-radius:var(--radio);max-height:170px;overflow:auto;padding:6px}
.lista-check label{display:flex;gap:8px;align-items:center;font-weight:400;font-size:14px;padding:4px 6px;margin:0;border-radius:var(--radio);cursor:pointer}
.lista-check label:hover{background:var(--cebra)}
.lista-check input{width:auto;margin:0}

/* Selector de paleta (Apariencia): muestras con su nombre. */
.paletas{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.paleta-opcion{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--texto);cursor:pointer;
  border:1px solid var(--linea);border-radius:var(--radio);padding:6px 10px 6px 8px;margin:0}
.paleta-opcion:has(input:checked){border-color:var(--azul);box-shadow:0 0 0 2px rgba(20,71,199,.15);font-weight:600}
.paleta-opcion input{width:auto;margin:0}
.muestra{display:inline-block;width:22px;height:22px;border-radius:4px;flex:0 0 auto;background:linear-gradient(135deg,var(--azul) 50%,var(--marino) 50%)}
.muestra-mini{width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.muestra-heredada{background:repeating-linear-gradient(135deg,#dde3ec 0 4px,#fff 4px 8px);border:1px solid var(--linea)}
.bloque-paleta{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px}
.bloque-paleta > label{margin-bottom:8px}
.pista{font-size:13px;color:var(--tenue);margin:6px 0 0}
.casilla{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:400;color:var(--texto);margin-top:10px;cursor:pointer}
.casilla input{width:auto;margin:3px 0 0}
.nota-aviso{border:0;padding:0;margin:10px 0 0;font-size:14px;color:var(--texto)}
.nota-aviso strong{color:var(--titulo)}

/* ---------- ingreso ---------- */
.cuerpo-acceso{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f3f6fb;padding:20px}
.acceso{display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border:1px solid var(--linea);border-radius:6px;overflow:hidden;max-width:900px;width:100%}
.acceso-marca{background:var(--marino);color:#dbe4fb;padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.marca-escudo{width:40px;height:40px;border-radius:6px;background:#fff;color:var(--marino);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px;flex:0 0 auto}
.marca-escudo.grande{width:56px;height:56px;border-radius:8px;font-size:16px;margin-bottom:18px}
.acceso-marca h1{font-size:22px;color:#fff;margin:0 0 4px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.acceso-marca p{margin:0 0 22px;color:#b9c8e8;font-size:13.5px}
.acceso-marca ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.9;color:#dbe4fb}
.acceso-formulario{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.acceso-formulario h2{margin:0 0 4px;font-size:20px;color:var(--titulo);font-weight:700}
.acceso-formulario .sutil{margin-bottom:20px}
.ancho-total{width:100%;padding:12px;font-size:15px}
.mensaje-acceso{padding:8px 0;border-radius:0;font-size:13.5px;margin-bottom:14px;border:0;font-weight:500}
.mensaje-acceso.error{border-color:var(--rojo);color:#96271b}
.mensaje-acceso.ok{border-color:var(--verde);color:#1c6b41}
.mensaje-acceso.aviso{border-color:var(--ambar);color:#8a5a00}
.pie-acceso{margin-top:20px;font-size:12px;line-height:1.6}
@media (max-width:760px){.acceso{grid-template-columns:1fr}.acceso-marca{display:none}}

.campo-clave{position:relative;display:block}
.campo-clave input{width:100%;padding-right:42px}
.campo-clave .ojo{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:34px;height:30px;padding:0;border:0;border-radius:var(--radio);
  background:transparent;font-size:1rem;line-height:1;cursor:pointer;opacity:.65}
.campo-clave .ojo:hover{opacity:1;background:var(--cebra)}
.campo-clave .ojo:focus-visible{outline:2px solid var(--azul);opacity:1}

/* ---------- adjuntos ---------- */
.lista-adjuntos{list-style:none;margin:0;padding:0}
.lista-adjuntos li{display:flex;gap:10px;align-items:center;padding:8px 0;border:0;border-bottom:1px solid var(--linea-suave);border-radius:0;margin:0;background:none}
.lista-adjuntos .nombre{flex:1;min-width:0;font-size:14px}
.lista-adjuntos .nombre b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--titulo)}
.lista-adjuntos .nombre span{font-size:12px;color:var(--tenue)}
.zona-carga{border:1px dashed var(--linea);border-radius:var(--radio);padding:16px;text-align:center;color:var(--tenue);font-size:13.5px;cursor:pointer;transition:.15s;background:#fff;margin-top:10px}
.zona-carga:hover,.zona-carga.encima{border-color:var(--azul);color:var(--azul);background:var(--cebra)}

/* ---------- avisos ---------- */
.avisos{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:950}
.aviso{background:var(--titulo);color:#fff;padding:11px 16px;border-radius:var(--radio);box-shadow:0 6px 20px rgba(13,27,51,.2);font-size:14px;animation:entrar .2s ease-out;max-width:360px}
.aviso.ok{background:#1f7a47} .aviso.error{background:var(--rojo)}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}}
.aviso-suave{margin:10px 0 0;padding:0;border:0;background:none;font-size:13.5px;color:var(--tenue)}

/* ---------- reporte imprimible ---------- */
.hoja{background:#fff;border:1px solid var(--linea);border-radius:0;box-shadow:none;padding:34px 40px;max-width:900px;margin:0 auto;font-size:13.5px;line-height:1.55}
.hoja h1{font-size:20px;text-align:center;color:var(--titulo);margin:0 0 2px;letter-spacing:-.01em}
.hoja .institucional{text-align:center;color:var(--tenue);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase}
.hoja h2{font-size:14.5px;color:var(--titulo);border-bottom:2px solid var(--azul);padding-bottom:4px;margin:26px 0 12px}
.hoja table{font-size:12.5px}
.hoja th{position:static;background:var(--cebra);color:var(--titulo);cursor:default}
.hoja .dato{display:flex;gap:8px;padding:3px 0;border-bottom:1px dotted var(--linea)}
.hoja .dato b{min-width:170px;color:var(--texto)}

/* ---------- quién está en línea (franja) ---------- */
.en-linea{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.en-linea-cuenta,.en-linea-solo{display:inline-flex;align-items:center;gap:5px;margin-right:8px;font-size:12.5px;color:#dbe4fb;white-space:nowrap}
.punto-vivo{width:7px;height:7px;border-radius:50%;background:#5ee39a;flex:none;box-shadow:0 0 0 2px rgba(94,227,154,.25)}
.ficha-persona{position:relative;display:inline-flex;outline:none}
.circulo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.3px;border:2px solid rgba(255,255,255,.85);margin-left:-6px;user-select:none;cursor:default}
.circulo.mas{background:rgba(255,255,255,.25);color:#fff}
.ficha-persona:first-of-type .circulo{margin-left:0}
.tarjeta-persona{position:absolute;top:calc(100% + 8px);right:0;z-index:780;display:none;flex-direction:column;gap:2px;background:var(--titulo);color:#fff;
  padding:8px 11px;border-radius:var(--radio);box-shadow:0 4px 16px rgba(12,24,36,.28);white-space:nowrap;font-size:12.5px;font-weight:400;text-align:left}
.tarjeta-persona b{font-size:13px}
.tarjeta-persona .sutil{color:#b9c8d6;font-size:11.5px;margin:0}
.ficha-persona:hover .tarjeta-persona,.ficha-persona:focus .tarjeta-persona,.ficha-persona:focus-within .tarjeta-persona{display:flex}

/* ---------- filas destacadas ---------- */
.fila-en-foco > td{background:var(--cebra)}
.fila-en-foco > td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.acceso-fallido > td{background:#fdf3f2}
.acceso-fallido > td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}

/* ---------- asignación de proyectos a un usuario ---------- */
.lista-proyectos{max-height:190px;overflow-y:auto;border:1px solid var(--linea);border-radius:var(--radio);padding:6px 8px;background:#fff}
.lista-proyectos .fila-proyecto{display:flex;align-items:center;gap:8px;padding:6px 2px;font-weight:400;cursor:pointer}
.lista-proyectos .fila-proyecto + .fila-proyecto{border-top:1px solid var(--linea-suave)}
.lista-proyectos .fila-proyecto input{width:auto;margin:0;flex:none}
.lista-proyectos .fila-proyecto span{overflow-wrap:anywhere}

.alerta-acciones{display:flex;align-items:center;gap:8px;flex:none}
.alerta-acciones .cuando{white-space:nowrap}
@media (max-width:620px){
  .alerta{flex-wrap:wrap}
  .alerta-acciones{width:100%;justify-content:space-between;margin-top:6px}
}

/* ---------- impresión ---------- */
@media print{
  body{background:#fff}
  .lateral,.franja,.barra-superior,.filtros,.avisos,.no-imprimir{display:none !important}
  .aplicacion{display:block;height:auto}
  .vista{padding:0;overflow:visible}
  .hoja{border:0;padding:0;max-width:none}
  .tarjeta,.tabla-caja,.gantt-caja{border-color:#bbb;break-inside:avoid;max-height:none}
  th{background:#eee !important;color:#000 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h2{break-after:avoid}
  tr{break-inside:avoid}
  @page{size:A4;margin:14mm}
  .hoja table{display:table;overflow:visible;white-space:normal}
  .gantt-caja{display:none !important}
  #gantt-impreso{display:block !important;margin:0}
  .hoja-gantt{break-after:page;break-inside:avoid}
  .hoja-gantt:last-child{break-after:auto}
  .hoja-gantt:first-child{margin-top:0}
  .hoja-gantt svg{width:100% !important;height:auto !important;max-width:100%}
  .pie-hoja{margin:4px 0 0;font-size:9.5px;color:#7B8794;text-align:right}
  .gantt-leyenda{margin-top:6px;font-size:10px}
  .solo-imprimir{display:block !important}
  .encabezado-gantt{display:flex !important;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:4px;margin:0 0 6px;gap:12px}
  .encabezado-gantt b{font-size:13px}
  .encabezado-gantt span{font-size:10.5px;color:#5A6B7B}
}
.solo-imprimir{display:none}

/* ----------------------------------------------------------------- TELÉFONO
   El panel lateral es un cajón que se abre con el botón de la franja. */
.boton-menu{display:none}
.velo-lateral{display:none}

@media (max-width:900px){
  .aplicacion{grid-template-columns:1fr}
  .franja-inner{padding:0 12px;gap:10px;min-height:50px}
  .marca-franja{display:none}
  .selector-repo{margin-left:0;min-width:0;flex:1 1 auto}
  .selector-foco{max-width:100%;font-size:14.5px}
  .repo-actual strong{max-width:100%;font-size:14.5px}
  .menu-perfil{display:none}
  .menu-nombre{max-width:32vw;overflow:hidden;text-overflow:ellipsis}
  .lateral{position:fixed;left:0;top:0;bottom:0;width:min(86vw,290px);z-index:700;transform:translateX(-100%);transition:transform .22s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);box-shadow:2px 0 18px rgba(8,20,33,.22);border-right:0}
  .lateral.abierto{transform:none}
  .velo-lateral{display:block;position:fixed;inset:0;z-index:690;background:rgba(14,26,38,.48);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
  .velo-lateral[hidden]{display:none}
  .boton-menu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;background:rgba(255,255,255,.14);
    border:0;border-radius:var(--radio);color:#fff;font-size:20px;line-height:1;cursor:pointer}
  .boton-menu:active{background:rgba(255,255,255,.28)}
  .barra-superior{padding:16px 16px 12px;gap:10px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));position:sticky;top:0;z-index:60}
  .barra-superior h1{font-size:24px}
  .barra-acciones{width:100%;flex-wrap:wrap;gap:8px}
  .vista{padding:16px 16px calc(34px + env(safe-area-inset-bottom));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));-webkit-overflow-scrolling:touch}
  .menu-item,.menu-grupo{padding-top:12px;padding-bottom:12px;min-height:44px}
  .submenu .menu-item{min-height:44px}
  .rejilla-campos{grid-template-columns:1fr}
  .kpis{gap:6px 22px}
  .kpi .valor{font-size:22px}
  .en-linea{order:0;margin-left:auto}
  .en-linea-cuenta span:not(.punto-vivo),.en-linea-solo{font-size:0}
  .en-linea-solo .punto-vivo{margin-right:0}
  .circulo{width:27px;height:27px;font-size:10.5px}
  .tarjeta-persona{white-space:normal;max-width:62vw}
  .matriz-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;max-width:100%}
  .matriz td,.matriz th{width:54px;height:44px}
  .hoja{padding:18px 14px}
  .hoja table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;white-space:nowrap}
  .hoja .dato{flex-wrap:wrap}
  .hoja .dato b{min-width:0;flex:1 0 100%}
  .columnas{gap:0}
}

@media (pointer:coarse){
  input,select,textarea{font-size:16px}
  .selector-foco{font-size:16px}
  .boton,.menu-item,.icono-boton{touch-action:manipulation}
  .boton{min-height:40px}
  .icono-boton{min-width:40px;min-height:40px}
  table{font-size:14px}
}
.menu-item,.boton,.icono-boton,.boton-menu,.menu-grupo{-webkit-user-select:none;user-select:none}
@media (display-mode:standalone){
  .acceso-panel{padding-top:calc(24px + env(safe-area-inset-top))}
}

/* ------------------------------------------------------ teléfono: tablas
   Por debajo de 760 px cada fila es una ficha: la etiqueta de la columna a la
   izquierda y el valor a la derecha. El JS pone la etiqueta en data-etiqueta
   (App.etiquetarTablas). La primera celda hace de título de la ficha. */
@media (max-width:760px){
  .tabla-caja{border-left:0;border-right:0;overflow:visible}
  .tabla-movil thead{display:none}
  .tabla-movil,.tabla-movil tbody{display:block;width:100%}
  .tabla-movil tbody tr{display:block;padding:12px 2px 10px;border-bottom:1px solid var(--linea);background:#fff !important}
  .tabla-movil tbody tr:hover{background:#fff}
  .tabla-movil td{display:flex;align-items:baseline;gap:10px;padding:3px 0;border:0;font-size:14px;min-width:0}
  .tabla-movil td::before{content:attr(data-etiqueta);flex:0 0 36%;max-width:36%;font-size:11.5px;color:var(--tenue);
    text-transform:uppercase;letter-spacing:.05em;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
  .tabla-movil td > *{min-width:0}
  .tabla-movil td:first-child{display:block;font-size:15.5px;font-weight:600;color:var(--titulo);margin-bottom:4px;line-height:1.35}
  .tabla-movil td:first-child::before{display:none}
  .tabla-movil td.celda-vacia{display:none}
  .tabla-movil td[data-etiqueta=""]::before{content:none}
  .tabla-movil td .acciones-fila{justify-content:flex-start;gap:8px;margin-top:4px}
  .tabla-movil td:has(> .acciones-fila)::before{content:none}
  .tabla-movil td:has(> .acciones-fila){display:block}
  .tabla-movil tr.fila-entera td{display:block;padding:4px 0}
  .tabla-movil tr.fila-entera td::before{content:none}
  .tabla-movil tr.fila-grupo{padding:14px 2px 4px;border-bottom:0}
  .tabla-movil tr.fila-grupo td{font-size:11.5px;color:var(--tenue);padding:0;border:0}
  .tabla-movil tr.fila-fase{background:var(--cebra) !important;margin:0 -16px;padding:12px 18px 10px;border-top:1px solid var(--linea)}
  .tabla-movil tr.fila-en-foco > td:first-child{box-shadow:none;border-left:3px solid var(--azul);padding-left:8px}
  .tabla-movil .barra-progreso{flex:1 1 auto;margin-bottom:0}
  .tabla-movil .avance-editable{flex:1 1 auto}
  .tabla-movil td:has(> .barra-progreso)::before,.tabla-movil td:has(> .avance-editable)::before{align-self:center}
  .tabla-movil .barra-progreso b{display:none}
  .tabla-movil td input,.tabla-movil td select{width:auto;flex:1 1 auto}

  /* Cabecera de la vista: compacta, no fija, y los botones se deslizan en
     una sola fila para no comerse media pantalla. */
  .barra-superior{position:static;padding:14px 16px 10px;gap:10px;flex-direction:column;align-items:stretch}
  .barra-titulo{width:100%;flex:none}
  .barra-superior h1{font-size:22px}
  .sutil{font-size:12.5px}
  .barra-acciones{width:calc(100% + 32px);flex:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px;padding:0 16px 2px}
  .barra-acciones::-webkit-scrollbar{display:none}
  .barra-acciones .boton{flex:0 0 auto;padding:9px 13px;font-size:13.5px}
  .vista{padding-top:12px}

  /* Filtros: dos por fila y un campo de búsqueda a lo ancho. */
  .filtros{gap:8px 10px;padding-bottom:12px}
  .filtros .campo{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .filtros .campo.ancho{flex:1 1 100%}
  .filtros .boton{flex:1 1 100%}

  /* Cifras: tres por fila. */
  .kpis{grid-template-columns:repeat(2,1fr);gap:12px 16px}
  .kpi .valor{font-size:21px}
  .kpi .etiqueta{font-size:11px}

  /* Equipo: el nombre a lo ancho y los botones debajo. */
  .persona-cab{flex-wrap:wrap}
  .persona-cab > div{flex:1 1 auto;min-width:0}
  .persona-cab .acciones-fila{flex-basis:100%;justify-content:flex-start;margin-top:2px}
  .mini-stats b{font-size:15px}

  /* Modal a pantalla casi completa. */
  .capa-modal{padding:8px}
  .modal{max-height:96vh;border-radius:4px}
  .modal-cabecera{padding:14px 16px 10px}
  .modal-cabecera h2{font-size:17px}
  .modal-cuerpo{padding:14px 16px}
  .modal-pie{padding:10px 16px 12px;flex-wrap:wrap}
  .modal-pie .boton{flex:1 1 auto}
}

/* Documentos del sistema documental enlazados a un entregable. */
.enlace-documental{display:inline-block;font-weight:600;color:var(--azul)}
.enlace-documental::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--azul);margin-right:6px}