/* ============================================================================
   VigIA · F1 «Mi día» — hoja de estilos (modo claro, según diseño aprobado)
   Paleta: crema #FAFAF7 · navy #0D1B2A · teal #21B498 · acento #F37422
   Tipografía: Heebo AUTOALOJADA (static/fonts/heebo-{400,600,800}.woff2 —
   vienen en el paquete F1) con respaldo system-ui.
   CSP self: cero recursos externos (font-src 'self'; nada de Google Fonts).
   ========================================================================== */

/* Heebo local: los .woff2 viajan en static/fonts/ del paquete. Si alguno
   faltara, el navegador cae a system-ui sin romper nada (font-display swap). */
@font-face {
  font-family: "Heebo";
  src: url("/static/fonts/heebo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("/static/fonts/heebo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("/static/fonts/heebo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* superficie */
  --crema: #FAFAF7;
  --blanco: #FFFFFF;
  --chip-claro: #F5F4EF;
  --chip-claro-2: #F4F3ED;
  --borde: #E8E6DE;
  --borde-suave: #EDEBE3;
  --borde-panel: #F0EEE7;
  /* navy (sección oscura + menú) */
  --navy: #0D1B2A;
  --navy-2: #16293C;
  --navy-3: #22364C;
  --navy-linea: #1B3149;
  --navy-texto: #A9BDCE;
  --navy-muted: #8CA3B8;
  --navy-claro: #C6D6E3;
  --navy-hielo: #EAF1F7;
  /* marca */
  --teal: #21B498;
  --teal-oscuro: #12735F;
  --teal-tinta: #06231C;
  --teal-bg: #E6F7F3;
  --acento: #F37422;
  /* texto */
  --tinta: #16212B;
  --tinta-2: #3A4A58;
  --gris: #5C6B7A;
  --gris-2: #7C8794;
  --gris-3: #8B95A1;
  --gris-4: #B9BDB6;
  /* semáforo (borde / texto / fondo) */
  --rojo: #D9483B;   --rojo-texto: #B4362A;   --rojo-bg: #FCE9E7;
  --ambar: #E8A33D;  --ambar-texto: #9A6510;  --ambar-bg: #FDF1DF;
  --verde: #3FAF7D;  --verde-texto: #16794F;  --verde-bg: #E8F6EE;
  --azul: #5B7BD5;
  /* sombras */
  --sombra-1: 0 1px 2px rgba(13,27,42,.05), 0 6px 18px rgba(13,27,42,.05);
  --sombra-2: 0 2px 4px rgba(13,27,42,.06), 0 14px 30px rgba(13,27,42,.10);
  --sombra-modal: 0 20px 60px rgba(13,27,42,.30);
  /* medidas */
  --ancho-menu: 236px;
  --ancho-menu-retraido: 72px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--crema);
  color: var(--tinta);
  font-family: "Heebo", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
}
a { color: var(--teal-oscuro); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Pantallas centradas (carga y entrada)
   ========================================================================== */
.pantalla-centrada {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px;
}
.faro-carga {
  width: 60px; height: 60px; border-radius: 18px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33,180,152,.35); }
  50%      { box-shadow: 0 0 0 16px rgba(33,180,152,0); }
}
.carga-texto { font-size: 14px; font-weight: 600; color: var(--gris-2); }

.tarjeta-entrada {
  width: min(400px, 100%);
  background: var(--blanco); border-radius: 22px; padding: 40px 36px 32px;
  box-shadow: var(--sombra-2); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.entrada-faro {
  width: 58px; height: 58px; border-radius: 17px; background: var(--teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.entrada-marca { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.entrada-lema { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-top: 4px; }
.entrada-descripcion { font-size: 13.5px; color: var(--gris); line-height: 1.55; margin: 16px 0 22px; text-wrap: pretty; }
.boton-google {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px; background: var(--navy); color: var(--blanco);
  font-size: 14px; font-weight: 700; transition: background .15s;
}
.boton-google:hover { background: var(--navy-2); color: var(--blanco); }
.entrada-nota { font-size: 11.5px; color: var(--gris-3); margin-top: 18px; line-height: 1.5; }

/* ============================================================================
   Estructura general de la app
   ========================================================================== */
#app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ── Menú lateral ── */
#menu {
  flex: 0 0 var(--ancho-menu); width: var(--ancho-menu);
  background: var(--navy);
  display: flex; flex-direction: column; padding: 18px 0;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  scrollbar-width: none;
  transition: flex-basis .18s ease, width .18s ease;
}
#menu::-webkit-scrollbar { display: none; }

.menu-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 18px; }
.menu-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.marca-faro {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.marca-nombre { font-size: 15px; font-weight: 700; color: var(--blanco); letter-spacing: -.01em; }
.boton-hamburguesa {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--navy-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.boton-hamburguesa:hover { background: var(--navy-linea); }
.boton-hamburguesa span { width: 12px; height: 1.5px; background: var(--navy-muted); display: block; }

.menu-identidad { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 18px 20px; }
.avatar-grande {
  width: 70px; height: 70px; border-radius: 999px; border: 2.5px solid var(--teal);
  background: var(--navy-3); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; overflow: hidden; flex: 0 0 auto;
}
.avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.identidad-textos { text-align: center; min-width: 0; max-width: 100%; }
.identidad-nombre { font-size: 14px; font-weight: 700; color: var(--blanco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identidad-cargo { font-size: 11.5px; font-weight: 500; color: var(--navy-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-sync {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--navy-2); max-width: 100%;
}
.punto-sync { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px; background: var(--verde); }
.punto-sync.sync-ambar { background: var(--ambar); }
.punto-sync.sync-rojo { background: var(--rojo); }
#chip-frescura-texto { font-size: 11px; font-weight: 600; color: var(--navy-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-items { display: flex; flex-direction: column; gap: 3px; }
.menu-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px; margin: 0 12px;
  border-radius: 12px; color: var(--navy-texto); min-width: 0;
}
.menu-item svg { flex: 0 0 auto; }
.item-texto { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item.activo { background: var(--navy-2); }
.menu-item.activo .item-texto { color: var(--blanco); font-weight: 700; }
.menu-item.deshabilitado { cursor: not-allowed; opacity: .82; }
.menu-item:not(.deshabilitado):not(.activo):hover { background: var(--navy-2); }
.badge {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  background: var(--navy-3); font-size: 11px; font-weight: 800; color: var(--navy-claro);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.badge-activo { background: var(--teal); color: var(--teal-tinta); }

.menu-relleno { flex: 1; min-height: 24px; }

.menu-pie { margin: 0 12px; padding: 13px 14px; border-radius: 14px; background: var(--navy-2); }
.pie-texto { font-size: 12px; font-weight: 600; color: var(--navy-muted); line-height: 1.4; }
.pie-lineas { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.pie-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pie-fuente { font-size: 11px; font-weight: 700; color: var(--navy-muted); }
.pie-sello { font-size: 11px; font-weight: 600; color: var(--navy-claro); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* menú retraído */
body.menu-retraido #menu { flex-basis: var(--ancho-menu-retraido); width: var(--ancho-menu-retraido); }
body.menu-retraido .marca-nombre,
body.menu-retraido .identidad-textos,
body.menu-retraido .chip-sync,
body.menu-retraido .item-texto,
body.menu-retraido .badge,
body.menu-retraido .menu-pie { display: none; }
body.menu-retraido .menu-cabecera { flex-direction: column; gap: 14px; padding: 0 0 14px; align-items: center; }
body.menu-retraido .menu-marca { justify-content: center; }
body.menu-retraido .menu-identidad { padding: 0 0 16px; }
body.menu-retraido .avatar-grande { width: 38px; height: 38px; border-width: 2px; font-size: 14px; }
body.menu-retraido .menu-item { justify-content: center; margin: 0 12px; padding: 10px 0; }

/* ── Principal ── */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.banner-reconectar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--rojo-bg); border-bottom: 1px solid #F3C9C4;
  padding: 12px 24px;
}
.banner-texto { flex: 1; min-width: 220px; font-size: 13px; color: var(--rojo-texto); line-height: 1.45; }
.banner-boton {
  flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; background: var(--rojo-texto);
  color: var(--blanco); font-size: 13px; font-weight: 700;
}
.banner-boton:hover { background: #93291F; color: var(--blanco); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; background: var(--blanco); border-bottom: 1px solid var(--borde-suave);
  position: sticky; top: 0; z-index: 30;
}
.miga { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--gris-3); min-width: 0; flex: 0 1 auto; overflow: hidden; }
/* La miga se RECORTA en vez de empujar: con «Cuentas de la empresa» la barra
   superior crecía 55 px más que la ventana y el avatar quedaba fuera de la
   pantalla. El caso que de verdad importa no era ese rótulo (que además se
   acortó) sino el nombre de un proyecto, que puede traer 80 caracteres
   puestos por el usuario. */
.miga-actual { color: var(--navy); font-weight: 700; font-size: 14px;
               min-width: 0; flex: 0 1 auto; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.topbar-acciones { flex: 0 0 auto; }
.miga-sep { color: #D5D2C8; }
.miga-fecha { font-variant-numeric: tabular-nums; white-space: nowrap; }
.topbar-acciones { display: flex; align-items: center; gap: 12px; min-width: 0; }

.buscador {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px;
  background: var(--chip-claro-2); width: 250px; height: 34px;
}
.buscador:focus-within { outline: 2px solid var(--teal); outline-offset: 1px; }
.buscador input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--tinta);
}
.buscador input::placeholder { color: var(--gris-3); }
.atajo-tecla {
  flex: 0 0 auto; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--gris-3);
  border: 1px solid var(--borde); border-radius: 5px; padding: 0 5px; background: var(--blanco);
}
.boton-campana {
  position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--chip-claro-2);
  display: flex; align-items: center; justify-content: center;
}
.conmutador-tema { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip-claro-2); }
.tema-opcion { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--gris-3); }
.tema-activa { background: var(--blanco); font-weight: 700; color: var(--navy); box-shadow: 0 1px 2px rgba(13,27,42,.08); }
.tema-inerte { cursor: not-allowed; }
.avatar-mini {
  width: 32px; height: 32px; border-radius: 999px; background: var(--navy-3); color: var(--blanco);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  overflow: hidden; flex: 0 0 auto;
}
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

.contenido { padding: 26px 60px 80px; }
.columna-util { max-width: 1040px; display: flex; flex-direction: column; gap: 26px; }

/* ============================================================================
   Saludo + chips de resumen
   ========================================================================== */
.fila-saludo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.saludo h1 { font-size: 29px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; margin: 0; }
.saludo-fecha { font-size: 15px; color: var(--gris-2); margin-top: 5px; }
.chips-resumen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip-resumen {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: var(--blanco); border: 1px solid var(--borde);
}
.chip-resumen b { font-size: 15px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.chip-resumen span { font-size: 13px; font-weight: 600; color: var(--gris); }
.chip-resumen.chip-rojo { background: var(--rojo-bg); border-color: transparent; }
.chip-resumen.chip-rojo b, .chip-resumen.chip-rojo span { color: var(--rojo-texto); }
.chip-resumen.chip-ambar { background: var(--ambar-bg); border-color: transparent; }
.chip-resumen.chip-ambar b, .chip-resumen.chip-ambar span { color: var(--ambar-texto); }

/* ============================================================================
   Tarjetas KPI
   ========================================================================== */
.fila-kpis { display: flex; gap: 12px; }
.kpi {
  flex: 1; min-width: 0; background: var(--blanco); border-radius: 16px; padding: 15px 17px;
  box-shadow: var(--sombra-1);
}
.kpi-cabecera { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.kpi-rotulo-grupo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kpi-punto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; }
.kpi-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-valor-fila { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }
.kpi-valor { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-extra { font-size: 12px; font-weight: 600; color: var(--gris-2); white-space: nowrap; }
.kpi-extra.extra-rojo { font-weight: 700; color: var(--rojo-texto); }
.kpi-extra.extra-teal { font-weight: 700; color: var(--teal); }
.kpi-pie { font-size: 11.5px; color: var(--gris-3); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kpi-oscuro { flex: 1.35; background: var(--navy); }
.kpi-oscuro .kpi-rotulo { color: var(--navy-muted); }
.kpi-oscuro .kpi-valor { color: var(--blanco); }
.kpi-oscuro .kpi-pie { color: var(--navy-muted); }
.kpi-barra { position: relative; height: 5px; border-radius: 999px; background: var(--navy-3); margin-top: 11px; }
.kpi-barra-relleno { height: 5px; border-radius: 999px; background: var(--teal); max-width: 100%; }
.kpi-barra-meta { position: absolute; top: -3px; width: 2px; height: 11px; border-radius: 1px; background: var(--acento); }
.kpi-barra-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--navy-muted); margin-top: 6px; }
.kpi-barra-pie .meta { color: var(--acento); font-weight: 600; }

/* ⓘ — capa explicativa */
.info {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 999px; border: 1px solid #D5D2C8;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--gris-3); font-style: normal; cursor: help;
}
.info-oscuro { border-color: #4A6377; color: var(--navy-muted); width: 14px; height: 14px; font-size: 9px; }
.popover-info {
  position: fixed; z-index: 300; max-width: 300px;
  background: var(--navy); color: var(--navy-hielo); border-radius: 12px;
  padding: 11px 13px; font-size: 12px; line-height: 1.5; box-shadow: var(--sombra-modal);
}

/* ============================================================================
   Por triar (sección oscura)
   ========================================================================== */
.seccion-portriar { background: var(--navy); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.portriar-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portriar-titulo-grupo { display: flex; align-items: center; gap: 10px; }
.portriar-titulo { font-size: 16px; font-weight: 700; color: var(--blanco); }
.badge-portriar { padding: 2px 9px; border-radius: 999px; background: var(--teal); font-size: 12px; font-weight: 800; color: var(--teal-tinta); font-variant-numeric: tabular-nums; }
.portriar-subtitulo { font-size: 13px; font-weight: 500; color: var(--navy-muted); }
.lista-portriar { display: flex; flex-direction: column; gap: 8px; }

.item-portriar {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--navy-2); border-radius: 12px; min-width: 0;
}
.item-portriar:hover { background: var(--navy-linea); }
.item-portriar.enfocada { outline: 2px solid var(--teal); outline-offset: 1px; }
.portriar-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.portriar-asunto { font-size: 14px; font-weight: 600; color: var(--navy-hielo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portriar-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--navy-muted); min-width: 0; }
.portriar-meta .origen-captura { color: var(--acento); font-weight: 600; }
.portriar-meta .sep { color: #4A6377; }
.portriar-meta .cuando { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* flex-wrap (10-09, a4): con la quinta píldora («Abrir en Calendar ↗») la
   hilera suma ~480 px; sin wrap, en móvil desborda la sección y aparece
   scroll horizontal. En escritorio no cambia nada (basis max-content). */
.portriar-acciones { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.pill-teal { padding: 6px 12px; border-radius: 999px; background: var(--teal); font-size: 12px; font-weight: 700; color: var(--teal-tinta); }
.pill-teal:hover { background: #1CA085; }
.pill-navy { padding: 6px 12px; border-radius: 999px; background: var(--navy-3); font-size: 12px; font-weight: 600; color: var(--navy-claro); }
.pill-navy:hover { background: #2A415A; }
.pill-navy-tenue { padding: 6px 12px; border-radius: 999px; background: var(--navy-3); font-size: 12px; font-weight: 600; color: var(--navy-muted); }
.pill-navy-tenue:hover { background: #2A415A; }

.portriar-vacio { display: flex; align-items: center; gap: 10px; padding: 6px 2px 2px; }
.portriar-vacio .visto { width: 22px; height: 22px; border-radius: 999px; background: rgba(33,180,152,.18); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.portriar-vacio span { font-size: 13px; font-weight: 600; color: var(--navy-muted); }

/* ============================================================================
   Filas de tarjetas (Requieren / Esperando)
   ========================================================================== */
.cuerpo-dos-columnas { display: flex; gap: 32px; align-items: flex-start; }
.col-tarjetas { flex: 1 1 688px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.titulo-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.titulo-fila h2 { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; margin: 0; }
.badge-conteo { padding: 2px 9px; border-radius: 999px; background: #E9E7DF; font-size: 12px; font-weight: 800; color: var(--gris); font-variant-numeric: tabular-nums; }
.titulo-nota { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lista-tarjetas { display: flex; flex-direction: column; gap: 10px; }

.tarjeta {
  display: flex; background: var(--blanco); border-radius: 16px; overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow .18s, transform .18s;
}
.tarjeta:hover, .tarjeta.enfocada { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.tarjeta.enfocada { outline: 2px solid var(--teal); outline-offset: 1px; }
.tarjeta-borde { flex: 0 0 6px; }
.borde-rojo { background: var(--rojo); }
.borde-ambar { background: var(--ambar); }
.borde-verde { background: var(--verde); }
.tarjeta-cuerpo { flex: 1; min-width: 0; padding: 15px 18px; }

.tarjeta-linea1 { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tarjeta-asunto { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-vence { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--gris-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarjeta-vence.vence-rojo { font-weight: 700; color: var(--rojo-texto); }
.chip-edad { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.edad-rojo { background: var(--rojo-bg); color: var(--rojo-texto); }
.edad-ambar { background: var(--ambar-bg); color: var(--ambar-texto); }
.edad-verde { background: var(--verde-bg); color: var(--verde-texto); }

.tarjeta-linea2 { display: flex; align-items: center; gap: 12px; margin-top: 11px; min-width: 0; }
.remitente { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.avatar-iniciales {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--blanco);
}
.remitente-texto { min-width: 0; font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remitente-texto b { font-weight: 600; color: var(--tinta-2); }
.chip-estado {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--chip-claro);
}
.chip-estado i { width: 6px; height: 6px; border-radius: 999px; font-style: normal; }
.chip-estado span { font-size: 12px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }

.tarjeta-acciones {
  display: none; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--borde-panel);
}
.tarjeta:hover .tarjeta-acciones, .tarjeta.enfocada .tarjeta-acciones { display: flex; }
.accion-verde { padding: 7px 14px; border-radius: 999px; background: var(--teal-bg); font-size: 12px; font-weight: 700; color: var(--teal-oscuro); }
.accion-verde:hover { background: var(--teal); color: var(--blanco); }
.accion-gris { padding: 7px 14px; border-radius: 999px; background: var(--chip-claro); font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.accion-gris:hover { background: #E9E7DF; }
.accion-relleno { flex: 1; }
.accion-atajos { font-size: 11px; font-weight: 600; color: var(--gris-4); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

.fila-vacia {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1);
}
.fila-vacia .visto { width: 22px; height: 22px; border-radius: 999px; background: var(--verde-bg); color: var(--verde-texto); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.fila-vacia span { font-size: 13px; font-weight: 600; color: var(--gris-3); }

/* ⓘ en el título de una fila + pie «y N más: busca con /» (10-09) */
.titulo-info { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fila-pie { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--gris-3); }

/* ── a2 · «Se van de la fila»: bloque compacto al pie de la fila principal ─
   Filas de una línea (chip · asunto · remitente · edad · acciones), sin la
   tarjeta completa: es una rampa de decisión, no otra bandeja. ──────────── */
.bloque-sevan {
  margin-top: 14px; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--chip-claro-2); border: 1px dashed var(--borde);
}
.sevan-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.sevan-titulo { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.sevan-nota { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-sevan { display: flex; flex-direction: column; gap: 6px; }
.sevan-fila {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0;
  background: var(--blanco); border-radius: 12px; box-shadow: var(--sombra-1);
}
.sevan-fila:hover, .sevan-fila.enfocada { box-shadow: var(--sombra-2); }
.sevan-fila.enfocada { outline: 2px solid var(--teal); outline-offset: 1px; }
.chip-seva { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.chip-seva-1 { background: var(--rojo-bg); color: var(--rojo-texto); }     /* mañana */
.chip-seva-2 { background: var(--ambar-bg); color: var(--ambar-texto); }   /* pasado mañana */
.sevan-datos { flex: 1; min-width: 0; }
.sevan-asunto { font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sevan-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; font-size: 11.5px; color: var(--gris-2); }
.sevan-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sevan-meta .sep { color: var(--gris-4); }
.edad-texto-rojo { color: var(--rojo-texto); font-weight: 700; }
.edad-texto-ambar { color: var(--ambar-texto); font-weight: 700; }
.edad-texto-verde { color: var(--verde-texto); font-weight: 700; }
.sevan-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sevan-acciones .accion-gris, .sevan-acciones .accion-verde { padding: 5px 11px; font-size: 11.5px; }
.sevan-vacia { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.sevan-vacia .visto { width: 22px; height: 22px; border-radius: 999px; background: var(--verde-bg); color: var(--verde-texto); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.sevan-vacia span { font-size: 13px; font-weight: 600; color: var(--gris-3); }

/* ============================================================================
   Columna lateral: mini calendario + agenda
   ========================================================================== */
.col-lateral { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 86px; }
.panel { background: var(--blanco); border-radius: 18px; padding: 18px 20px 16px; box-shadow: var(--sombra-1); }
.panel-cabecera { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.panel-titulo { font-size: 15px; font-weight: 700; color: var(--navy); }
.panel-fecha { font-size: 12px; font-weight: 600; color: var(--gris-3); font-variant-numeric: tabular-nums; }

.minical-cabecera { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.minical-mes { font-size: 14px; font-weight: 700; color: var(--navy); }
.minical-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.minical-dias-semana div { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--gris-4); }
.minical-grilla { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.minical-dia { height: 31px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.minical-num { font-size: 12px; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.minical-num.finde { color: #C4C8C0; }
.minical-hoy {
  width: 23px; height: 23px; border-radius: 999px; background: var(--navy); color: var(--blanco);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.minical-pto { width: 4px; height: 4px; border-radius: 999px; }
.minical-leyenda { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--borde-panel); }
.minical-leyenda span { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--gris-3); }
.pto { width: 5px; height: 5px; border-radius: 999px; display: inline-block; font-style: normal; }
.pto-teal { background: var(--teal); }
.pto-ambar { background: var(--ambar); }
.pto-gris { background: #E4E2DA; }

.lista-agenda { display: flex; flex-direction: column; }
.agenda-item { display: flex; gap: 12px; min-width: 0; }
.agenda-hora { flex: 0 0 42px; font-size: 12px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; padding-top: 1px; }
.agenda-riel { flex: 0 0 9px; display: flex; flex-direction: column; align-items: center; }
.agenda-punto { width: 9px; height: 9px; border-radius: 999px; background: var(--navy); margin-top: 4px; flex: 0 0 auto; }
.agenda-punto.punto-hueco { background: var(--blanco); border: 2.5px solid var(--teal); width: 9px; height: 9px; box-sizing: border-box; }
.agenda-linea { flex: 1; width: 2px; background: var(--borde-suave); }
.agenda-datos { flex: 1; min-width: 0; padding-bottom: 18px; }
.agenda-titulo { font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-origen { font-size: 11px; color: var(--gris-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-divisor { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.agenda-divisor span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-4); white-space: nowrap; }
.agenda-divisor i { flex: 1; height: 1px; background: var(--borde-suave); }
.agenda-invitacion { background: var(--teal-bg); border-radius: 12px; padding: 12px 13px; }
.agenda-invitacion .agenda-titulo { font-weight: 700; color: var(--navy); }
.invitacion-rotulo { font-size: 11px; font-weight: 600; color: var(--teal-oscuro); margin-top: 3px; }
.invitacion-enlace {
  display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--teal); color: var(--blanco); font-size: 12px; font-weight: 700;
}
.invitacion-enlace:hover { background: #1CA085; color: var(--blanco); }
.agenda-vacia { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.agenda-vacia .visto { width: 22px; height: 22px; border-radius: 999px; background: var(--verde-bg); color: var(--verde-texto); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.agenda-vacia span { font-size: 12px; font-weight: 600; color: var(--gris-3); }

/* ============================================================================
   Botones de captura
   ========================================================================== */
.boton-captura-flotante {
  position: fixed; right: 28px; bottom: 26px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; background: var(--navy); color: var(--blanco);
  font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(13,27,42,.28);
}
.boton-captura-flotante:hover { background: var(--navy-2); }
.boton-captura-flotante span[aria-hidden] { font-size: 20px; font-weight: 300; line-height: 1; }

.barra-movil { display: none; }

/* ============================================================================
   Velos y modales
   ========================================================================== */
.velo {
  position: fixed; inset: 0; z-index: 200; background: rgba(13,27,42,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  width: min(520px, 100%); background: var(--blanco); border-radius: 20px;
  padding: 26px 28px 22px; box-shadow: var(--sombra-modal);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-titulo-grupo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mini-mas {
  width: 22px; height: 22px; border-radius: 7px; background: var(--navy); color: var(--blanco);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 300;
}
.modal-titulo { font-size: 14px; font-weight: 700; color: var(--navy); }
.modal-pista { font-size: 12px; font-weight: 600; color: var(--gris-4); white-space: nowrap; }
.asa-hoja { display: none; }

.captura-entrada {
  width: 100%; border: 0; border-bottom: 2px solid var(--teal); outline: none;
  font: inherit; font-size: 22px; font-weight: 600; color: var(--tinta); letter-spacing: -.01em;
  line-height: 1.3; padding: 0 0 12px; background: none;
}
.captura-entrada::placeholder { color: var(--gris-4); }

.modal-seccion { margin-top: 20px; }
.modal-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-4); margin-bottom: 8px; }
.chips-fecha { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-fecha {
  padding: 8px 15px; border-radius: 999px; background: var(--chip-claro);
  font-size: 13px; font-weight: 600; color: var(--tinta-2); position: relative;
}
.chip-fecha:hover { background: var(--teal-bg); color: var(--teal-oscuro); }
.chip-fecha.seleccionado { background: var(--teal); color: var(--blanco); font-weight: 700; }
.chip-fecha-elegir { cursor: pointer; display: inline-flex; align-items: center; }
.chip-fecha-elegir input[type="date"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.chips-estado { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-estado-opcion {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: var(--chip-claro); font-size: 13px; font-weight: 600; color: var(--tinta-2);
}
.chip-estado-opcion i { width: 6px; height: 6px; border-radius: 999px; font-style: normal; flex: 0 0 auto; }
.chip-estado-opcion:hover { background: #E9E7DF; }
.chip-estado-opcion.seleccionado { background: var(--navy); color: var(--blanco); font-weight: 700; }

.triar-asunto {
  font-size: 15px; font-weight: 600; color: var(--tinta); line-height: 1.4;
  padding-bottom: 12px; border-bottom: 1px solid var(--borde-panel);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.entrada-nota {
  width: 100%; border: 0; border-radius: 12px; background: var(--chip-claro);
  font: inherit; font-size: 13px; color: var(--tinta); padding: 10px 14px; outline: none;
}
.entrada-nota:focus { outline: 2px solid var(--teal); }
.area-nota {
  width: 100%; border: 0; border-radius: 12px; background: var(--chip-claro); resize: vertical;
  font: inherit; font-size: 13px; color: var(--tinta); padding: 12px 14px; outline: none;
  margin-top: 16px; min-height: 90px;
}
.area-nota:focus { outline: 2px solid var(--teal); }

/* ── a3 · historial de notas en los modales (solo lectura, arriba) ──────── */
.nota-historial {
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--chip-claro-2); border: 1px solid var(--borde-panel);
}
.nota-historial-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris-4); margin-bottom: 6px; }
.nota-historial-texto {
  white-space: pre-wrap; overflow-wrap: anywhere;   /* los sellos [DD-MM-YYYY HH:MM] van en su línea */
  max-height: 160px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta-2);
}

/* flex-wrap: con dos botones (Guardar · Guardar y abrir en Calendar ↗) el
   pie del modal de captura tiene que poder bajar una línea, no desbordar */
.modal-pie { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde-panel); flex-wrap: wrap; }
.pie-izquierda { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.chip-nace { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--teal-bg); font-size: 11px; font-weight: 700; color: var(--teal-oscuro); }
.pie-ayuda { font-size: 12px; color: var(--gris-3); }
.boton-primario {
  padding: 10px 22px; border-radius: 999px; background: var(--navy); color: var(--blanco);
  font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.boton-primario:hover { background: var(--navy-2); }
.boton-primario:disabled { opacity: .45; cursor: not-allowed; }
/* a4 · botón secundario del modal («Guardar y abrir en Calendar ↗») */
.boton-secundario {
  padding: 10px 16px; border-radius: 999px; background: var(--chip-claro); color: var(--tinta-2);
  font-size: 13px; font-weight: 700; flex: 0 0 auto; white-space: nowrap;
}
.boton-secundario:hover { background: #E9E7DF; }
.boton-secundario:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 400;
  background: var(--navy); color: var(--navy-hielo); border-radius: 999px;
  padding: 11px 22px; font-size: 13px; font-weight: 600; box-shadow: var(--sombra-modal);
  max-width: min(90vw, 480px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast.toast-error { background: var(--rojo-texto); color: var(--blanco); }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .contenido { padding: 26px 28px 80px; }
  .cuerpo-dos-columnas { flex-wrap: wrap; }
  .col-lateral { flex: 1 1 100%; width: auto; position: static; flex-direction: row; }
  .col-lateral .panel { flex: 1; min-width: 0; }
}

@media (max-width: 900px) {
  .fila-kpis { flex-wrap: wrap; }
  .kpi { flex: 1 1 44%; }
  .kpi-oscuro { flex: 1 1 100%; }
  .col-lateral { flex-direction: column; }
  .buscador { width: 170px; }
  /* Tablet: las cinco píldoras de «Por triar» pueden encoger y bajar de
     línea, para no dejarle 100 px al título (10-09, a4). */
  .portriar-acciones { flex: 0 1 auto; }
}

/* ── Móvil: artboard 02 ── */
@media (max-width: 767px) {
  #menu { display: none; }
  .topbar { padding: 10px 16px; }
  .buscador { display: none; }
  .conmutador-tema { display: none; }
  .miga { display: none; }
  .topbar { justify-content: flex-end; }

  .contenido { padding: 14px 18px calc(96px + env(safe-area-inset-bottom)); }
  .columna-util { gap: 18px; }

  .fila-saludo { align-items: center; flex-wrap: nowrap; }
  .saludo h1 { font-size: 23px; line-height: 1.15; }
  .saludo-fecha { font-size: 13px; margin-top: 3px; }
  .chips-resumen { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; max-width: 100%; }
  .chips-resumen::-webkit-scrollbar { display: none; }
  .chip-resumen { flex: 0 0 auto; }

  .fila-kpis { display: none; }

  .seccion-portriar { border-radius: 16px; padding: 15px 16px; }
  .item-portriar { flex-direction: column; align-items: stretch; gap: 10px; }
  .portriar-acciones { display: flex; }
  .portriar-acciones .pill-teal, .portriar-acciones .pill-navy,
  .portriar-acciones .pill-navy-tenue { flex: 1 1 auto; text-align: center; }

  .titulo-fila h2 { font-size: 16px; }
  .titulo-nota { display: none; }
  .tarjeta-linea1 { flex-wrap: wrap; gap: 8px; }
  .tarjeta-asunto { flex: 1 1 100%; font-size: 14px; }
  .tarjeta-acciones { display: flex; flex-wrap: wrap; }
  .accion-atajos { display: none; }

  /* «Se van de la fila» en móvil: las acciones bajan a su propia línea */
  .sevan-nota { display: none; }
  .sevan-fila { flex-wrap: wrap; }
  .sevan-acciones { width: 100%; justify-content: flex-end; }
  .boton-secundario { flex: 1 1 auto; text-align: center; }

  /* nowrap es clave: un flexbox columna CON wrap dimensiona la línea por el
     max-content del ítem y desborda la pantalla (gotcha visto en QA) */
  .cuerpo-dos-columnas { flex-direction: column; flex-wrap: nowrap; gap: 18px; }
  .col-tarjetas { flex: none; width: 100%; }
  .col-lateral { flex: none; width: 100%; }
  .panel { padding: 16px; }

  .boton-captura-flotante { display: none; }

  .barra-movil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: calc(76px + env(safe-area-inset-bottom));
    padding: 9px 14px env(safe-area-inset-bottom);
    background: rgba(250,250,247,.94); border-top: 1px solid var(--borde-suave);
    backdrop-filter: blur(8px);
    align-items: flex-start; justify-content: space-between;
  }
  .movil-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: var(--gris-3);
  }
  .movil-activo { color: var(--navy); font-weight: 700; }
  .movil-inerte { cursor: not-allowed; }
  .movil-captura { flex: 1; display: flex; flex-direction: column; align-items: center; }
  .captura-circulo {
    width: 52px; height: 52px; border-radius: 999px; background: var(--navy); color: var(--blanco);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 300; margin-top: -14px;
    box-shadow: 0 6px 18px rgba(13,27,42,.28);
  }
  .captura-texto { font-size: 10px; font-weight: 700; color: var(--navy); margin-top: 3px; }

  /* modales como hoja inferior */
  .velo { align-items: flex-end; padding: 0; }
  .modal { width: 100%; border-radius: 24px 24px 0 0; padding: 16px 20px calc(22px + env(safe-area-inset-bottom)); }
  .asa-hoja { display: block; width: 38px; height: 4px; border-radius: 999px; background: #E4E2DA; margin: 0 auto 14px; }
  .modal-cabecera { margin-bottom: 12px; }
  .modal-pista { display: none; }
  .captura-entrada { font-size: 19px; padding-bottom: 10px; }
}

/* ── Resultados de búsqueda del servidor (/api/buscar) ──────────────────── */
.seccion-buscar { margin-bottom: 26px; }
.lista-buscar { display: flex; flex-direction: column; gap: 8px; }
.resultado {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: var(--blanco); border-radius: 12px; padding: 10px 14px 10px 10px;
  box-shadow: var(--sombra-1);
}
.resultado-borde { flex: 0 0 4px; align-self: stretch; border-radius: 999px; }
.resultado-datos { flex: 1; min-width: 0; }
.resultado-titulo {
  font-size: 13.5px; font-weight: 700; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resultado-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--gris-2);
}
.resultado-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-tipo {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: var(--chip-claro); font-size: 11px; font-weight: 700; color: var(--gris);
}
.resultado-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.resultado-acciones .pill-navy-tenue { background: var(--chip-claro); color: var(--gris); }
.resultado-acciones .pill-navy-tenue:hover { background: #E9E7DF; }

/* ── Seguimientos que vencen (panel lateral) ────────────────────────────── */
.lista-seguimientos { display: flex; flex-direction: column; gap: 10px; }
.seguimiento-item { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.seguimiento-pto { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; }
.seg-rojo { background: var(--rojo); }
.seg-ambar { background: var(--ambar); }
.seg-verde { background: var(--verde); }
.seguimiento-datos { flex: 1; min-width: 0; }
.seguimiento-titulo {
  font-size: 12.5px; font-weight: 700; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seguimiento-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0;
  font-size: 11.5px; font-weight: 600; color: var(--gris-3);
}
.seguimiento-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-vence-rojo { color: var(--rojo-texto); font-weight: 700; }
.seguimiento-triar {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: var(--chip-claro); font-size: 11px; font-weight: 700; color: var(--gris);
}
.seguimiento-triar:hover { background: #E9E7DF; }

@media (max-width: 760px) {
  .resultado { flex-wrap: wrap; }
  .resultado-acciones { width: 100%; justify-content: flex-end; }
}

/* ============================================================================
   F3 · ESPACIOS
   Misma paleta y mismas medidas del resto del módulo (--navy, --teal,
   --acento, --rojo, --ambar): un espacio no es otra aplicación, es otra
   pantalla de la misma. El color propio del espacio entra por la variable
   --color-espacio, que se fija por tarjeta desde el JS.
   Reglas de la casa que este bloque respeta: cero scroll horizontal de
   página, asuntos truncados con elipsis, y todo cabe en 1400 y en 375 px.
   ========================================================================== */

/* El ícono del menú sigue al ítem activo. Las clases de F1 pintaban el
   stroke a mano en el SVG; una regla CSS gana siempre a un atributo de
   presentación, así que Mi día se apaga al entrar a Espacios y al revés. */
#menu .menu-item .bi { color: var(--navy-muted); }
#menu .menu-item.activo .bi { color: var(--teal); }
.barra-movil .movil-item .bi { color: var(--gris-3); }
.barra-movil .movil-item.movil-activo .bi { color: var(--teal); }

.sep { color: var(--gris-4); }
.titulo-enlace { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--teal-oscuro); white-space: nowrap; }
.titulo-enlace:hover { text-decoration: underline; }
.fila-vacia-tenue { font-size: 12.5px; font-weight: 600; color: var(--gris-3); padding: 4px 0; }

/* ── Tira «Mis espacios» dentro de Mi día ───────────────────────────────── */
.seccion-tira { display: block; }
.tira-espacios { display: flex; gap: 10px; flex-wrap: wrap; }
.tira-tarjeta {
  flex: 1 1 190px; max-width: 260px; min-width: 0;
  background: var(--blanco); border-radius: 14px; padding: 12px 14px 11px;
  box-shadow: var(--sombra-1); border-left: 4px solid var(--color-espacio, var(--teal));
  transition: transform .15s, box-shadow .15s;
}
.tira-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.tira-nombre {
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tira-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; min-width: 0; }
.tira-badge {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--teal-bg); font-size: 11px; font-weight: 800; color: var(--teal-oscuro);
}
.tira-badge-quieto { background: var(--chip-claro); color: var(--gris-3); font-weight: 700; }
.tira-cuando { font-size: 11.5px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tira-mas { border-left-color: var(--borde); }
.tira-mas .tira-meta { font-size: 11.5px; font-weight: 600; color: var(--teal-oscuro); }
.tira-invita {
  flex: 1 1 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--blanco); border-radius: 14px; padding: 13px 16px; box-shadow: var(--sombra-1);
  font-size: 13px; color: var(--gris);
}
.tira-invita > span { flex: 1; min-width: 220px; }

/* ── Vista: lista de espacios ───────────────────────────────────────────── */
.espacios-acciones-cabecera { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.espacios-barra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.espacios-capturado { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-verde-suave { background: var(--verde-bg); border-color: transparent; }
.chip-verde-suave, .chip-verde-suave span { color: var(--verde-texto); }
.espacios-frescura {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--gris-2); white-space: nowrap;
}

.espacios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.esp-tarjeta {
  display: flex; min-width: 0; cursor: pointer;
  background: var(--blanco); border-radius: 14px; overflow: hidden;
  box-shadow: var(--sombra-1); transition: transform .15s, box-shadow .15s;
}
.esp-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.esp-tarjeta:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.esp-tarjeta-color { flex: 0 0 6px; background: var(--color-espacio, var(--teal)); }
.esp-tarjeta-cuerpo { flex: 1; min-width: 0; padding: 14px 16px 13px; }
.esp-tarjeta-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.esp-tarjeta-nombre {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-tarjeta-proposito {
  font-size: 12.5px; color: var(--gris); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-tarjeta-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; min-width: 0; }
.esp-tarjeta-regla { font-size: 11.5px; font-weight: 600; color: var(--gris-3); white-space: nowrap; }
.esp-tarjeta-pie { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--gris-3); min-width: 0; }
.esp-tarjeta-pie > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-tarjeta-aviso {
  margin-top: 9px; padding: 7px 10px; border-radius: 10px;
  background: var(--ambar-bg); font-size: 11.5px; font-weight: 600; color: var(--ambar-texto); line-height: 1.45;
}

.espacios-vacio {
  /* Ocupa la grilla entera: metido en una sola columna de 310 px, el texto que
     explica qué es un espacio queda en una tarjeta angosta al costado. */
  grid-column: 1 / -1;
  background: var(--blanco); border-radius: 18px; padding: 28px 26px; box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.espacios-vacio-titulo { font-size: 17px; font-weight: 800; color: var(--navy); }
.espacios-vacio-texto { font-size: 13.5px; color: var(--gris); line-height: 1.6; max-width: 620px; text-wrap: pretty; }

/* ── Chips y números del espacio ────────────────────────────────────────── */
.esp-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--chip-claro); font-size: 11px; font-weight: 700; color: var(--gris);
  white-space: nowrap;
}
.esp-chip-fijado { background: var(--navy); color: var(--blanco); }
.esp-estado-activo { background: var(--verde-bg); color: var(--verde-texto); }
.esp-estado-pausa { background: var(--ambar-bg); color: var(--ambar-texto); }
.esp-estado-cerrado { background: #E9E7DF; color: var(--gris-2); }
.esp-chip-apagada { background: #E9E7DF; color: var(--gris-2); }
.esp-chip-nuevo { background: var(--teal); color: var(--teal-tinta); }
.esp-chip-mano { background: #FDEBDD; color: #A2510F; }
.esp-chip-pelota { background: var(--rojo-bg); color: var(--rojo-texto); }
/* Un espacio cuya regla ya no se puede evaluar deja de capturar en silencio:
   el chip ámbar lo saca del log y lo pone en la pantalla. */
.esp-chip-alerta { background: var(--ambar-bg); color: var(--ambar-texto); }

/* Nota del editor de condiciones cuando se está CORRIGIENDO una que ya existe:
   dice por qué el tipo de condición queda bloqueado. */
.condicion-nota {
  margin-top: 8px; padding: 8px 11px; border-radius: 10px;
  background: var(--ambar-bg); color: var(--ambar-texto);
  font-size: 12.5px; line-height: 1.5;
}

.esp-num {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--gris); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.esp-num-teal { color: var(--teal-oscuro); font-weight: 800; }
.esp-num-tenue { color: var(--gris-3); }
.esp-num-acento { color: #A2510F; font-weight: 700; }

/* ── Portada de un espacio ──────────────────────────────────────────────── */
.esp-cabecera {
  display: flex; gap: 16px; align-items: flex-start; min-width: 0;
  background: var(--blanco); border-radius: 18px; padding: 18px 22px 18px 0; box-shadow: var(--sombra-1);
  overflow: hidden;
}
.esp-color-barra { flex: 0 0 8px; align-self: stretch; background: var(--teal); }
.esp-cabecera-datos { flex: 1; min-width: 0; padding-left: 4px; }
.esp-volver {
  font-size: 12px; font-weight: 700; color: var(--gris-2); padding: 3px 0; margin-bottom: 4px;
}
.esp-volver:hover { color: var(--teal-oscuro); }
.esp-nombre {
  font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-proposito {
  font-size: 13.5px; color: var(--gris); margin-top: 4px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.esp-acciones { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
.pill-clara {
  padding: 6px 12px; border-radius: 999px; background: var(--chip-claro);
  font-size: 12px; font-weight: 600; color: var(--tinta-2); white-space: nowrap;
}
.pill-clara:hover { background: #E9E7DF; }
.pill-peligro { padding: 6px 12px; border-radius: 999px; background: var(--rojo-bg); font-size: 12px; font-weight: 600; color: var(--rojo-texto); white-space: nowrap; }
.pill-peligro:hover { background: #F8D7D2; }
.esp-aviso {
  background: var(--ambar-bg); border-radius: 14px; padding: 12px 16px;
  font-size: 13px; font-weight: 600; color: var(--ambar-texto); line-height: 1.5;
}

/* Tarjeta de hilo dentro del espacio: la de Mi día, con las acciones SIEMPRE
   a la vista (acá no hay navegación con flechas que las revele). */
.tarjeta-acciones-esp { display: flex; flex-wrap: wrap; }
.accion-sacar {
  padding: 7px 14px; border-radius: 999px; background: var(--chip-claro);
  font-size: 12px; font-weight: 600; color: var(--gris-2); white-space: nowrap;
}
.accion-sacar:hover { background: var(--rojo-bg); color: var(--rojo-texto); }

/* ── La regla, en el panel lateral ──────────────────────────────────────── */
.esp-regla-combinacion {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--gris); margin-bottom: 12px;
  padding-bottom: 11px; border-bottom: 1px solid var(--borde-panel);
}
.esp-regla-cambiar {
  margin-left: auto; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: var(--chip-claro); font-size: 11px; font-weight: 700; color: var(--gris); white-space: nowrap;
}
.esp-regla-cambiar:hover { background: #E9E7DF; }
.esp-regla-lista { display: flex; flex-direction: column; gap: 10px; }
.esp-regla-vacia { font-size: 12.5px; color: var(--gris-3); line-height: 1.55; }
.esp-regla-fila { display: flex; flex-direction: column; gap: 6px; }
.esp-regla-apagada { opacity: .6; }
.esp-regla-rotulo {
  font-size: 12.5px; font-weight: 600; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-regla-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esp-regla-boton {
  padding: 3px 9px; border-radius: 999px; background: var(--chip-claro);
  font-size: 11px; font-weight: 700; color: var(--gris); white-space: nowrap;
}
.esp-regla-boton:hover { background: #E9E7DF; }
.esp-regla-boton-rojo:hover { background: var(--rojo-bg); color: var(--rojo-texto); }
.esp-limitaciones { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.esp-limitaciones li { font-size: 12px; color: var(--gris-2); line-height: 1.5; }

/* ── Bitácora ───────────────────────────────────────────────────────────── */
.esp-bitacora { display: flex; flex-direction: column; gap: 8px; }
.esp-bitacora-fila {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--blanco); border-radius: 12px; padding: 9px 14px; box-shadow: var(--sombra-1);
}
.esp-bitacora-quien {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: var(--chip-claro); font-size: 11px; font-weight: 700; color: var(--gris);
}
.esp-bitacora-tu { background: var(--teal-bg); color: var(--teal-oscuro); }
.esp-bitacora-texto {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.esp-bitacora-cuando { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--gris-3); white-space: nowrap; }

/* ── Modal ancho: editor de espacio y de condición ──────────────────────── */
.modal-espacio {
  width: min(760px, 100%); display: flex; flex-direction: column;
  overflow: hidden; padding-bottom: 0;
}
.modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
.modal-seccion-primera { margin-top: 0; }
.modal-espacio .modal-pie { flex: 0 0 auto; margin-bottom: 0; padding-bottom: 18px; }
.boton-ancho { width: 100%; margin-top: 8px; text-align: center; }
.entrada-select {
  border: 0; border-radius: 12px; background: var(--chip-claro);
  font: inherit; font-size: 13px; color: var(--tinta); padding: 10px 12px; outline: none;
  max-width: 100%;
}
.entrada-select:focus { outline: 2px solid var(--teal); }
.casilla { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; cursor: pointer; }
.casilla input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--teal); }
.casilla span { font-size: 12.5px; color: var(--gris); line-height: 1.5; }
.casilla b { color: var(--tinta-2); }

.espacio-colores { display: flex; gap: 8px; flex-wrap: wrap; }
.muestra-color {
  width: 28px; height: 28px; border-radius: 999px; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(13,27,42,.08);
}
.muestra-color.seleccionado { border-color: var(--navy); transform: scale(1.06); }
.muestra-color-defecto { position: relative; }
.muestra-color-defecto::after {
  content: "·"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--blanco); font-size: 20px; font-weight: 800;
}

.lista-condiciones { display: flex; flex-direction: column; gap: 12px; }
.condicion { background: var(--chip-claro-2); border-radius: 14px; padding: 11px 12px; }
.condicion-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.condicion-linea .entrada-select { flex: 1 1 230px; min-width: 0; }
.condicion-entrada { flex: 2 1 200px; min-width: 0; background: var(--blanco); }
.chip-no {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: var(--blanco);
  font-size: 11.5px; font-weight: 800; color: var(--gris-2); letter-spacing: .04em;
}
.chip-no:hover { background: #E9E7DF; }
.chip-no.seleccionado { background: var(--rojo-texto); color: var(--blanco); }
.condicion-quitar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--blanco);
  font-size: 17px; font-weight: 400; color: var(--gris-3); line-height: 1;
}
.condicion-quitar:hover { background: var(--rojo-bg); color: var(--rojo-texto); }
.condicion-ayuda { font-size: 11.5px; color: var(--gris-2); line-height: 1.5; margin-top: 8px; text-wrap: pretty; }

/* ── La vista previa: el número que frena la regla de 5.870 ─────────────── */
.previa { background: var(--chip-claro-2); border-radius: 14px; padding: 14px 16px; }
.previa-vacia { font-size: 12.5px; color: var(--gris-3); line-height: 1.55; text-wrap: pretty; }
.previa-cabecera { display: flex; align-items: center; gap: 14px; min-width: 0; }
.previa-cifra { font-size: 34px; font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1; flex: 0 0 auto; }
.previa-textos { min-width: 0; }
.previa-rotulo { font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.previa-detalle { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: 11.5px; color: var(--gris-3); }
.previa-linea { font-size: 12.5px; color: var(--gris); margin-top: 10px; line-height: 1.5; }
.previa-aviso {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; text-wrap: pretty;
}
.previa-aviso-rojo { background: var(--rojo-bg); color: var(--rojo-texto); }
.previa-aviso-ambar { background: var(--ambar-bg); color: var(--ambar-texto); }
.previa-bloque { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.previa-bloque-salen { border-top-color: var(--rojo); }
.previa-bloque-titulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-3); margin-bottom: 9px; }
.previa-desglose { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 0; }
.previa-desglose-rotulo { flex: 1; min-width: 0; font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-desglose-num { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--navy); }
.previa-resta { color: var(--rojo-texto); }
.previa-muestra-fila { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 0; }
.previa-pto { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 999px; }
.previa-muestra-asunto { flex: 2 1 0; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-muestra-de { flex: 1 1 0; min-width: 0; font-size: 11.5px; color: var(--gris-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-muestra-cuando { flex: 0 0 auto; font-size: 11.5px; color: var(--gris-3); white-space: nowrap; }

/* ── Modal de borrado ───────────────────────────────────────────────────── */
.modal-borrar .borrar-texto { font-size: 13px; color: var(--gris); line-height: 1.6; margin: 0; text-wrap: pretty; }
.borrar-nombre {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700; color: var(--navy);
  background: var(--chip-claro); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.boton-peligro {
  padding: 10px 20px; border-radius: 999px; background: var(--rojo-texto); color: var(--blanco);
  font-size: 13px; font-weight: 700;
}
.boton-peligro:hover { background: #93291F; }
.boton-peligro:disabled { opacity: .45; cursor: not-allowed; }

/* ── Responsive de F3 ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .esp-cabecera { flex-wrap: wrap; }
  .esp-acciones { max-width: none; width: 100%; justify-content: flex-start; padding-left: 4px; }
}

@media (max-width: 767px) {
  /* La tira de espacios se desliza de lado, como los chips del saludo: seis
     tarjetas apiladas empujarían el día entero fuera de la primera pantalla.
     El que se desliza es el contenedor, nunca la página. */
  .tira-espacios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tira-espacios::-webkit-scrollbar { display: none; }
  .tira-tarjeta { flex: 0 0 190px; }
  .tira-invita { flex: 0 0 100%; }

  .espacios-lista { grid-template-columns: 1fr; }
  .espacios-acciones-cabecera { width: 100%; justify-content: flex-start; }
  .espacios-frescura { margin-left: 0; white-space: normal; }
  .esp-nombre { font-size: 20px; white-space: normal; }
  .esp-proposito { white-space: normal; }
  .esp-cabecera { padding: 14px 16px 14px 0; }
  .esp-acciones .boton-primario, .esp-acciones .pill-clara, .esp-acciones .pill-peligro { flex: 1 1 auto; text-align: center; }
  .tarjeta-acciones-esp .accion-relleno { display: none; }
  .condicion-linea .entrada-select, .condicion-entrada { flex: 1 1 100%; }
  .previa-muestra-de { display: none; }
  .modal-espacio { max-height: calc(100dvh - 24px); }
  .modal-espacio .modal-pie { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   F4 · BITÁCORA · REFERENCIAS · CUENTAS

   Casi todo reutiliza lo que ya existe (.tarjeta, .esp-tarjeta, .chips-estado,
   .sevan-fila, .modal-espacio). Acá va solo lo que no tenía dónde apoyarse.
   ========================================================================== */

/* Los dos bordes de tarjeta que faltaban. El semáforo de Mi día mide EDAD de
   un correo; acá mide otra cosa: si la persona puso un día y ya pasó. Por eso
   una anotación abierta sin fecha NO es verde ni ámbar ni roja — es gris. No
   está atrasada: simplemente todavía no toca, y pintarla de color sería
   fabricar urgencia, que es justo lo que se mandó a apagar el 08-09. */
.borde-abierto { background: #D8D5CB; }
.borde-cerrado { background: #EDEBE3; }

/* La línea de contexto de una anotación: tipo · proyecto · con quién · cuándo */
.anota-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 7px; min-width: 0; font-size: 12.5px; color: var(--gris-2);
}
.anota-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anota-meta .cuando { font-variant-numeric: tabular-nums; }
.anota-tipo { font-weight: 700; color: var(--tinta-2); }
/* En el bloque oscuro de «lo que dejaste para hoy», lo vencido tiene que
   leerse distinto de lo de hoy: sobre el fondo navy los dos salían del
   mismo gris y la fila con doce días encima pasaba desapercibida. */
.portriar-meta .cuando-vencida { color: #FF9B8F; font-weight: 700; }
/* En el teléfono, «con Flavio García · Codelco Andina» se partía en cuatro
   renglones dentro de una columna de 90 px y la tarjeta quedaba tres veces
   más alta de lo necesario: los elementos de la línea de contexto bajan de
   línea enteros, no se parten por dentro. */
#bit-hoy-lista .portriar-meta { flex-wrap: wrap; row-gap: 2px; }
#bit-hoy-lista .portriar-meta > span { white-space: nowrap; overflow: hidden;
                                       text-overflow: ellipsis; max-width: 100%; }
.anota-proyecto { font-weight: 600; color: var(--teal-oscuro); }

/* El detalle: dos líneas y elipsis. La tarjeta tiene que caber en la pantalla;
   el texto completo viaja en el title y entero en el editor. */
.anota-detalle {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--gris);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: pretty;
}

/* La sigla del proyecto («M6»), como una chapita delante del nombre. */
.pro-sigla {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px;
  background: var(--navy); color: var(--blanco);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  vertical-align: 1px;
}

/* Buscadores de Referencias y Cuentas: el mismo componente de la barra
   superior, pero ocupando el ancho que le sobra a la fila. */
.buscador-ancho { flex: 1 1 260px; min-width: 200px; }
.buscador-ancho input { width: 100%; }

/* La bitácora en el teléfono: las acciones de una fila no caben al lado del
   texto, así que bajan y se alinean a la derecha en vez de aplastar el título
   a dos caracteres. (Regla de la casa: las pantallas se prueban con los datos
   reales más largos, y los títulos reales de sus notas son largos.) */
@media (max-width: 720px) {
  .sevan-fila { flex-wrap: wrap; }
  .sevan-acciones { width: 100%; justify-content: flex-end; }
  .anota-detalle { -webkit-line-clamp: 3; }
  .pro-sigla { margin-right: 6px; }
}

/* ============================================================================
   F5 corte 1a · «📌 Trabajar este hilo» y el visor de la copia
   ========================================================================== */
.accion-trabajar { white-space: nowrap; }
.accion-trabajar:disabled { opacity: .6; cursor: progress; }

/* Ancho de lectura: un correo se lee cómodo a ~80 caracteres por línea; más
   ancho cansa. En el teléfono es una hoja a pantalla completa. */
.modal-copia { width: min(860px, 100%); height: min(860px, calc(100vh - 40px)); }
/* El modal es una columna flexible de alto fijo: sin esto, el asunto de dos
   líneas se aplasta para hacerle lugar a la lista (lo atrapó el QA visual). */
.modal-copia > .modal-cabecera, .modal-copia > .triar-asunto, .modal-copia > .copia-sello { flex: 0 0 auto; }
/* El recorte a 2 líneas corta en el borde del RELLENO: con relleno abajo, un
   asunto de 3 líneas asomaba media tercera línea (QA a 375 px). La raya pasa
   al sello. */
.modal-copia > .triar-asunto { padding-bottom: 0; border-bottom: 0; }
.copia-sello {
  margin: 8px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde-panel);
  font-size: 12px; font-weight: 600; color: var(--gris-3);
}
.copia-correos { display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.copia-correo {
  border: 1px solid var(--borde-panel); border-radius: 14px; padding: 12px 16px 12px;
  background: var(--blanco);
}
/* Lo que escribió uno mismo se distingue sin gritar: borde izquierdo teal. */
.copia-correo.propio { border-left: 3px solid var(--teal); }
.copia-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.copia-de { font-size: 13px; color: var(--navy); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copia-cuando { font-size: 11.5px; font-weight: 600; color: var(--gris-3); white-space: nowrap; }
/* El texto del correo: tal cual llegó (saltos de línea incluidos), sin
   desbordar a lo ancho aunque traiga una URL de 300 caracteres. */
.copia-texto {
  font-size: 13.5px; line-height: 1.55; color: var(--tinta);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.copia-texto-vacio { color: var(--gris-3); font-style: italic; }
.copia-firma { margin-top: 8px; }
.copia-firma summary { cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--gris-3); }
.copia-firma .copia-texto { margin-top: 6px; font-size: 12px; color: var(--gris); }
.copia-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.copia-adjunto {
  padding: 3px 10px; border-radius: 999px; background: var(--chip-claro);
  font-size: 11.5px; font-weight: 600; color: var(--tinta-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copia-adjunto-firma { font-size: 11.5px; font-weight: 600; color: var(--gris-3); align-self: center; }
.copia-ver-completo { margin-top: 10px; }
.modal-copia .modal-pie { flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  .modal-copia { height: calc(100vh - 24px); }
  .copia-correo { padding: 10px 12px; }
  .copia-texto { font-size: 13px; }
}

/* ============================================================================
   v3 · «Seleccionar correos» (maqueta 07)
   ========================================================================== */
.columna-ancha { max-width: 1240px; }
.sel-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sel-cuerpo { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.sel-izq { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.sel-cal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sel-cal-cabecera h2 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0; }
.sel-cal-cabecera h2.sel-titulo-mes { text-transform: capitalize; }
.sel-cal-nav { display: flex; align-items: center; gap: 6px; }
.sel-flecha { width: 28px; height: 28px; border-radius: 8px; background: var(--chip-claro); font-size: 15px; color: var(--tinta-2); }
.sel-flecha:hover { background: #E9E7DF; }
.sel-modos { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--chip-claro); }
.sel-modos button { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gris); }
.sel-modos button.activo { background: var(--blanco); color: var(--navy); box-shadow: var(--sombra-1); }
.sel-cal-sub { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--gris-3); margin-bottom: 12px; }
.sel-leyenda { display: inline-flex; gap: 10px; }
.sel-leyenda span { display: inline-flex; align-items: center; gap: 4px; }

.sel-cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.sel-dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px;
  border-radius: 12px; background: var(--chip-claro); border: 2px solid transparent; min-width: 0;
}
.sel-dia:hover { background: var(--teal-bg); }
.sel-dia-nombre { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--gris-3); }
.sel-dia-numero { font-size: 20px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.sel-dia-puntos { display: flex; gap: 3px; min-height: 7px; }
.sel-finde .sel-dia-numero { color: var(--gris-3); }
.sel-futuro { opacity: .7; }
.sel-fuera { opacity: .35; }
.sel-hoy { border-color: var(--teal); background: var(--blanco); }
.sel-hoy .sel-dia-nombre { color: var(--teal-oscuro); }
.sel-elegido, .sel-elegido:hover { background: var(--navy); border-color: var(--navy); }
.sel-elegido .sel-dia-nombre, .sel-elegido .sel-dia-numero { color: var(--blanco); }
.sel-cal-mes { gap: 5px; }
.sel-cal-mes .sel-dia { padding: 5px 2px; }
.sel-cal-mes .sel-dia-nombre { display: none; }
.sel-cal-mes .sel-dia-numero { font-size: 15px; }

.pto-sel { display: inline-block; width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; }
.pto-reunion { background: var(--teal); }
.pto-vence { background: var(--acento); }
.pto-paso { background: #6D4FC7; }

.sel-tuyo h3, .sel-puerta h3 { font-size: 14px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.sel-tuyo-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; min-width: 0; }
.sel-tuyo-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); font-weight: 600; }
.sel-tuyo-detalle { flex: 0 0 auto; font-size: 12px; color: var(--gris-3); }
.sel-tuyo-detalle.cumplido { color: var(--verde-texto); }
.sel-tuyo-vacio, .sel-nota-pie { font-size: 12px; color: var(--gris-3); line-height: 1.45; }
.sel-nota-pie { margin-top: 8px; }

.sel-puerta p { font-size: 13px; color: var(--tinta-2); line-height: 1.45; margin: 0 0 10px; }
.sel-puerta-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.chip-etiqueta {
  --chip-color: var(--gris); --chip-fondo: #EEF0F2;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--chip-fondo); color: var(--chip-color); font-size: 12px; font-weight: 700; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--chip-color); flex: 0 0 auto; }
button.chip-etiqueta:hover { filter: brightness(.96); }
.chip-etiqueta-nueva { --chip-color: var(--gris); --chip-fondo: var(--blanco); border: 1px dashed var(--gris-4); }
.chip-etiqueta-nueva::before { display: none; }

/* La lista del día */
.sel-der { padding: 18px 0 8px; min-width: 0; }
.sel-der-cabecera { display: flex; align-items: center; gap: 10px; padding: 0 20px 12px; flex-wrap: wrap; }
.sel-der-cabecera h2 { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-der-nota { font-size: 12px; color: var(--gris-3); }
.sel-sello { margin-left: auto; font-size: 11px; color: var(--gris-3); white-space: nowrap; }
.sel-buscador {
  display: flex; align-items: center; gap: 8px; margin: 0 20px 10px; padding: 8px 12px;
  border-radius: 12px; background: var(--chip-claro);
}
.sel-buscador input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 13px; color: var(--tinta); }
.sel-volver-dia { font-size: 12px; font-weight: 700; color: var(--teal-oscuro); white-space: nowrap; }

.sel-grupo { border-top: 1px solid var(--borde-panel); position: relative; }
.sel-grupo-cabecera { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 44px 11px 20px; text-align: left; min-width: 0; }
.sel-grupo-cabecera:hover { background: #FBFAF6; }
.sel-grupo-flecha { width: 12px; color: var(--gris-3); font-size: 12px; }
.sel-grupo-titulo { font-size: 13px; font-weight: 800; color: var(--navy); flex: 0 0 auto; }
.sel-grupo-detalle { font-size: 12px; color: var(--gris-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-grupo > .info { position: absolute; right: 20px; top: 11px; }

.sel-correo {
  display: flex; align-items: center; gap: 12px; padding: 9px 20px; cursor: pointer; min-width: 0;
  border-top: 1px solid #F6F4EE;
}
.sel-correo:hover { background: #FBFAF6; }
.sel-correo.sel-marcado { background: var(--teal-bg); }
.sel-correo.sel-ya { cursor: default; opacity: .78; }
.sel-caja { width: 17px; height: 17px; accent-color: var(--teal); flex: 0 0 auto; cursor: pointer; }
.sel-caja-ya { width: 17px; text-align: center; font-size: 13px; font-weight: 800; color: var(--teal-oscuro); flex: 0 0 auto; }
.sel-correo-cuerpo { flex: 1; min-width: 0; }
.sel-correo-l1 { display: flex; gap: 8px; min-width: 0; align-items: baseline; }
.sel-de { flex: 0 1 auto; max-width: 42%; font-size: 13px; font-weight: 800; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-asunto { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-snippet { font-size: 12px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sel-correo-der { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sel-hora { font-size: 12px; color: var(--gris-3); }
.sel-varios { font-size: 11px; font-weight: 700; color: var(--gris); background: var(--chip-claro); padding: 2px 7px; border-radius: 999px; }
.sel-chip-ya { font-size: 11px; font-weight: 700; color: var(--teal-oscuro); background: var(--teal-bg); padding: 3px 9px; border-radius: 999px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-gmail { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gris-3); text-decoration: none; }
.sel-gmail:hover { background: var(--chip-claro); color: var(--navy); }
.sel-vacio, .sel-faltan { padding: 18px 20px; font-size: 13px; color: var(--gris-3); }
.sel-faltan { padding: 10px 20px 14px; font-size: 12px; }
.sel-pie { padding: 12px 20px 4px; font-size: 12px; color: var(--gris-3); border-top: 1px solid var(--borde-panel); }

/* La barra de lo elegido: fija abajo, en UNA línea (corrección del 26-10) */
.sel-barra {
  position: sticky; bottom: 18px; z-index: 30; align-self: flex-end;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 9px 10px 9px 18px; border-radius: 16px; background: var(--navy); color: var(--blanco);
  box-shadow: var(--sombra-2); max-width: 100%;
}
.sel-cuantos { font-size: 13px; font-weight: 800; white-space: nowrap; }
.sel-barra-boton {
  height: 34px; padding: 0 13px; border-radius: 10px; background: var(--navy-3); color: var(--blanco);
  font-size: 13px; font-weight: 700; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.sel-barra-boton:hover { background: var(--navy-linea); }
.sel-barra-boton.con-destino, #sel-agregar-a { background: var(--teal); color: var(--teal-tinta); }
.sel-barra-select { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--navy-texto); white-space: nowrap; }
.sel-barra-select select { height: 34px; width: auto; max-width: 200px; border-radius: 10px; border: 0; background: var(--navy-3); color: var(--blanco); font: inherit; font-size: 13px; font-weight: 700; padding: 0 8px; }
/* Con lo elegido a la vista, el botón flotante de captura se esconde: taparía
   «Listo», que es justo lo que se va a apretar. */
body.sel-con-barra #boton-captura { display: none; }
.sel-barra .boton-primario { background: var(--blanco); color: var(--navy); }
.sel-barra .boton-primario:hover { background: var(--navy-hielo); }
.sel-limpiar { font-size: 12px; color: var(--navy-texto); padding: 0 6px; white-space: nowrap; }
.sel-limpiar:hover { color: var(--blanco); }
.sel-menu-ancla { position: relative; }
.sel-menu, .sel-menu-volver {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 40; width: 300px; max-height: 420px; overflow-y: auto;
  background: var(--blanco); color: var(--tinta); border-radius: 14px; box-shadow: var(--sombra-modal); padding: 10px;
}
.sel-menu-volver { width: auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 260px; }
.sel-menu-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-3); padding: 8px 6px 6px; }
.sel-menu-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; }
.sel-menu-campo { width: 100%; border: 1px solid var(--borde); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; }
.sel-menu-opcion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border-radius: 9px; text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta); }
.sel-menu-opcion:hover { background: var(--chip-claro); }
.sel-menu-icono { width: 14px; color: var(--gris-3); }
.sel-menu-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-menu-suelta { margin-top: 6px; border-top: 1px solid var(--borde-panel); border-radius: 0 0 9px 9px; }
.sel-menu-cargando { padding: 10px; font-size: 13px; color: var(--gris-3); }

/* Modal: conectar etiquetas de Gmail */
.modal-importar { width: min(600px, 100%); }
.importar-lista { max-height: 46vh; overflow-y: auto; border: 1px solid var(--borde-panel); border-radius: 12px; }
.importar-fila { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #F6F4EE; cursor: pointer; }
.importar-fila:first-child { border-top: 0; }
.importar-fila.importada { opacity: .6; cursor: default; }
.importar-fila input { accent-color: var(--teal); width: 16px; height: 16px; }
.importar-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.importar-nombre { font-size: 13px; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importar-corto { font-size: 12px; color: var(--gris-3); }
.importar-hilos { font-size: 12px; color: var(--gris); white-space: nowrap; }
.importar-opcion { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tinta-2); line-height: 1.4; cursor: pointer; }
.importar-opcion input { accent-color: var(--teal); margin-top: 2px; }
.importar-nota { font-size: 12px; color: var(--gris-3); line-height: 1.45; margin-top: 10px; }

@media (max-width: 1100px) {
  .sel-cuerpo { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sel-barra { flex-wrap: wrap; bottom: 84px; }
  /* En columna, «baseline» deja a cada línea con su ancho natural y un asunto
     largo ensanchaba la página entera (QA del 26-10): se estiran al ancho. */
  .sel-correo-l1 { flex-direction: column; align-items: stretch; gap: 0; }
  .sel-correo-cuerpo { overflow: hidden; }
  .sel-de { max-width: 100%; }
  .sel-correo { padding: 9px 14px; gap: 10px; }
  .sel-chip-ya { max-width: 110px; }
  .sel-varios { display: none; }
  .sel-menu, .sel-menu-volver { position: fixed; left: 12px; right: 12px; bottom: 150px; width: auto; }
}

/* ============================================================================
   v3 · La FICHA COMPLETA (maquetas 02 y 03) — patrón de la ficha del M10
   ========================================================================== */
.velo-ficha {
  position: fixed; inset: 0; z-index: 150; background: rgba(13,27,42,.42);
  display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px; overflow-y: auto;
}
body.ficha-abierta { overflow: hidden; }
.ficha {
  --ficha-color: #5C6B7A; --ficha-fondo: #EEF0F2;
  width: min(1120px, 100%); background: var(--crema); border-radius: 20px; box-shadow: var(--sombra-modal);
  overflow: hidden; display: flex; flex-direction: column;
}
.ficha-cargando { padding: 60px; text-align: center; color: var(--gris-3); font-size: 14px; }

.ficha-cabecera { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; background: var(--blanco); }
.ficha-icono {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--ficha-fondo); color: var(--ficha-color);
}
.ficha-titulos { flex: 1; min-width: 0; }
.ficha-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ficha-codigo { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--gris); letter-spacing: .02em; }
.ficha-chip-tipo { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); background: var(--chip-claro); padding: 3px 9px; border-radius: 999px; }
.ficha-chip-privado { font-size: 11px; font-weight: 700; color: var(--gris-3); }
.ficha-titulo { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.25; margin: 0; word-break: break-word; cursor: text; }
.ficha-titulo-campo { width: 100%; font: inherit; font-size: 20px; font-weight: 800; color: var(--navy); border: 0; border-bottom: 2px solid var(--teal); outline: none; background: none; padding: 2px 0; }
.ficha-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.boton-ficha {
  height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--blanco);
  font-size: 13px; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
}
.boton-ficha:hover { background: var(--chip-claro); }
.boton-ficha-primario { background: var(--teal); border-color: var(--teal); color: var(--teal-tinta); }
.boton-ficha-primario:hover { background: #1CA68B; }
.ficha-cerrar { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; color: var(--gris); }
.ficha-cerrar:hover { background: var(--chip-claro); color: var(--navy); }
.ficha-ancla .sel-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }
.ficha-menu-fechas { display: flex; flex-wrap: wrap; gap: 6px; width: 300px; }

/* La franja: el color del estado, de lado a lado */
.ficha-franja {
  display: flex; align-items: stretch; flex-wrap: wrap; background: var(--ficha-color); color: var(--blanco);
  padding: 0 22px;
}
.franja-dato { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px 10px 0; margin-right: 16px; border-right: 1px solid rgba(255,255,255,.28); font-size: 13px; min-width: 0; }
.franja-dato:last-child { border-right: 0; margin-left: auto; margin-right: 0; padding-right: 0; }
.franja-rotulo { font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .8; }
.franja-valor { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-roja .franja-valor { text-decoration: underline; text-decoration-thickness: 2px; }

.ficha-pestanas { display: none; }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; padding: 18px 22px 22px; align-items: start; }
.ficha-izq { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.ficha-tarjeta { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1); overflow: hidden; }
.ficha-tarjeta-principal { box-shadow: inset 0 0 0 2px var(--ficha-color), var(--sombra-1); }
.ficha-tarjeta-cab { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 16px; text-align: left; }
button.ficha-tarjeta-cab:hover { background: #FBFAF6; }
.ficha-tarjeta-icono { width: 26px; height: 26px; border-radius: 8px; background: var(--ficha-fondo); color: var(--ficha-color); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.ficha-tarjeta-titulo { font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.ficha-tarjeta-resumen { margin-left: auto; font-size: 12px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ficha-tarjeta-flecha { color: var(--gris-3); font-size: 12px; margin-left: 6px; }
.ficha-tarjeta-cuerpo { padding: 0 16px 14px; }
.ficha-vacio { font-size: 13px; color: var(--gris-3); padding: 2px 0 4px; line-height: 1.45; }

.ficha-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ficha-mini { background: var(--crema); border-radius: 12px; padding: 9px 11px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ficha-mini-rotulo { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--gris-3); }
.ficha-mini-valor { font-size: 14px; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-select, .ficha-fecha { width: 100%; height: 32px; border: 1px solid var(--borde); border-radius: 9px; background: var(--blanco); font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta); padding: 0 8px; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.chip-quitar { margin-left: 2px; font-size: 13px; line-height: 1; color: inherit; opacity: .6; padding: 0 2px; }
.chip-quitar:hover { opacity: 1; }
.ficha-elegir-etiqueta { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }

.ficha-nota { border-top: 1px solid var(--borde-panel); padding: 9px 0; }
.ficha-nota:first-child { border-top: 0; padding-top: 0; }
.ficha-nota.destacada { background: #FFF8E6; margin: 0 -16px; padding: 9px 16px; border-top: 0; }
.ficha-nota-cab { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gris-3); }
.ficha-estrella { font-size: 15px; color: var(--gris-4); line-height: 1; }
.ficha-estrella.activa, .ficha-estrella:hover { color: #E8A33D; }
.ficha-nota-tipo { font-weight: 800; color: var(--tinta-2); }
.ficha-nota-cuando { margin-left: auto; }
.ficha-nota-texto { font-size: 13px; color: var(--tinta); line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin-top: 4px; }

.ficha-check { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.ficha-check input { accent-color: var(--teal); width: 16px; height: 16px; }
.ficha-check.hecho .ficha-check-texto { text-decoration: line-through; color: var(--gris-3); }
.ficha-check-texto { flex: 1; min-width: 0; }
.ficha-check-nuevo { width: 100%; margin-top: 6px; border: 1px dashed var(--gris-4); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: none; }

.ficha-mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ficha-mosaico { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1.5px dashed var(--borde); border-radius: 12px; text-decoration: none; min-width: 0; }
.ficha-mosaico:hover { border-color: var(--teal); }
.ficha-mosaico-nombre { font-size: 13px; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-mosaico-meta { font-size: 11px; color: var(--gris-3); }

.ficha-correo { display: flex; gap: 10px; padding: 6px 0; font-size: 12px; border-top: 1px solid #F6F4EE; min-width: 0; }
.ficha-correo:first-child { border-top: 0; }
.ficha-correo-cuando { flex: 0 0 auto; color: var(--gris-3); }
.ficha-correo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.ficha-leer { margin-top: 10px; }
.ficha-persona { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; min-width: 0; }
.ficha-persona .avatar-iniciales { width: 26px; height: 26px; font-size: 10px; flex: 0 0 auto; }
.ficha-persona-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.ficha-persona-meta { font-size: 11px; color: var(--gris-3); white-space: nowrap; }

/* Línea de tiempo */
.ficha-der { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1); padding: 14px 16px 16px; position: sticky; top: 0; min-width: 0; }
.ficha-der-titulo { font-size: 14px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.ficha-escribir { border: 1px solid var(--borde); border-radius: 14px; padding: 10px; margin-bottom: 14px; }
.ficha-tipos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ficha-tipo { padding: 4px 10px; border-radius: 999px; background: var(--chip-claro); font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.ficha-tipo.activo { background: var(--navy); color: var(--blanco); }
.ficha-texto { width: 100%; border: 0; outline: none; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; color: var(--tinta); min-height: 60px; }
.ficha-escribir-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ficha-boton-chico { padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--gris); }
.ficha-boton-chico:hover, .ficha-boton-chico.activo { background: var(--chip-claro); color: var(--navy); }
.ficha-boton-chico.activo { color: #9A6510; background: #FFF4D9; }
.ficha-relleno { flex: 1; }
.ficha-guardar { height: 32px; padding: 0 14px; }

.ficha-linea { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
.ficha-item { display: grid; grid-template-columns: 44px 10px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid #F6F4EE; }
.ficha-item:first-child { border-top: 0; }
.ficha-item-cuando { display: flex; flex-direction: column; font-size: 11px; color: var(--gris); line-height: 1.3; }
.ficha-item-dia { color: var(--gris-3); }
.ficha-punto { width: 9px; height: 9px; border-radius: 999px; margin-top: 4px; background: var(--gris-4); }
.punto-tu { background: var(--navy); }
.punto-otro { background: var(--acento); }
.punto-sistema { background: var(--gris-4); }
.punto-futuro { background: transparent; border: 2px dashed var(--gris-4); }
.ficha-item-titulo { font-size: 13px; color: var(--tinta); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.ficha-item-autor { font-size: 11px; color: var(--gris-3); }
.ficha-item-detalle, .ficha-item-cambio { font-size: 12px; color: var(--tinta-2); line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.ficha-item-correo .ficha-item-detalle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-item-cambio s { color: var(--gris-3); }
.ficha-viene { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--gris-3); padding: 12px 0 4px; }
.ficha-item.futuro .ficha-item-titulo, .ficha-item.futuro .ficha-item-detalle { color: var(--gris-3); }
.ficha-barra-movil { display: none; }

@media (max-width: 960px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .ficha-der { position: static; }
  .ficha-linea { max-height: none; }
}
/* Teléfono (maqueta 03): pantalla completa, pestañas y barra de acciones abajo */
@media (max-width: 767px) {
  .velo-ficha { padding: 0; }
  .ficha { border-radius: 0; min-height: 100%; }
  .ficha-cabecera { flex-wrap: wrap; padding: 14px 14px 10px; }
  .ficha-acciones .boton-ficha, .ficha-acciones .ficha-ancla { display: none; }
  .ficha-acciones { position: absolute; right: 10px; top: 10px; }
  .ficha-titulo { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ficha-icono { display: none; }
  .ficha-franja { padding: 0 14px; }
  .franja-sec { display: none; }
  .franja-dato:last-child { margin-left: 0; }
  .ficha-pestanas { display: flex; gap: 4px; padding: 10px 14px 0; background: var(--crema); }
  .ficha-pestana { flex: 1; padding: 9px 4px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--gris); }
  .ficha-pestana.activa { background: var(--blanco); color: var(--navy); box-shadow: var(--sombra-1); }
  .ficha-cuerpo { padding: 12px 14px 90px; }
  .ficha[data-pestana="resumen"] .ficha-solo-historial,
  .ficha[data-pestana="resumen"] .ficha-solo-archivos,
  .ficha[data-pestana="historial"] .ficha-izq,
  .ficha[data-pestana="archivos"] .ficha-solo-resumen,
  .ficha[data-pestana="archivos"] .ficha-solo-historial { display: none; }
  .ficha-grilla { grid-template-columns: 1fr; }
  .ficha-barra-movil {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--blanco); box-shadow: 0 -4px 18px rgba(13,27,42,.10);
  }
  .ficha-barra-movil .boton-ficha { flex: 1; justify-content: center; }
  .ficha-barra-movil .ficha-ancla { flex: 1; display: flex; }
  .ficha-barra-movil .ficha-ancla:last-child { flex: 0 0 auto; }
  .ficha-barra-movil .sel-menu { position: fixed; left: 12px; right: 12px; bottom: 70px; top: auto; width: auto; }
}

.enlace-ficha { cursor: pointer; }
.enlace-ficha:hover { text-decoration: underline; }

/* ============================================================================
   v3 · Configuración › Estados y etiquetas (maqueta 05)
   ========================================================================== */
.menu-config { margin: 0 12px 6px; }
.cfg-pestanas { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--chip-claro); align-self: flex-start; }
.cfg-pestana { padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gris); }
.cfg-pestana.activa { background: var(--blanco); color: var(--navy); box-shadow: var(--sombra-1); }
.cfg-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.cfg-cuerpo:has(.cfg-editor[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cfg-lista { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cfg-grupo { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1); padding: 6px 0; }
.cfg-grupo-cab { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; flex-wrap: wrap; }
.cfg-grupo .cfg-grupo-cab { padding: 8px 18px 6px; }
.cfg-grupo-nombre { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--navy); }
.cfg-grupo-nota { font-size: 12px; color: var(--gris-3); }
.cfg-mas { margin-left: auto; padding: 5px 11px; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--teal-oscuro); }
.cfg-mas + .cfg-mas { margin-left: 0; }
.cfg-mas:hover { background: var(--teal-bg); }
.cfg-fila { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-top: 1px solid #F6F4EE; min-width: 0; background: var(--blanco); }
.cfg-fila.editando { background: var(--teal-bg); }
.cfg-fila.arrastrando { opacity: .4; }
.cfg-tirador { cursor: grab; color: var(--gris-4); font-size: 13px; letter-spacing: -2px; user-select: none; }
.cfg-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.cfg-nombre { font-size: 14px; font-weight: 700; color: var(--tinta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-tag { font-size: 11px; font-weight: 700; color: var(--gris); background: var(--chip-claro); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cfg-tag-sistema { background: #FFF4D9; color: #8A5C00; }
.cfg-cuenta { margin-left: auto; font-size: 12px; color: var(--gris-3); white-space: nowrap; }
.cfg-accion { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--gris); }
.cfg-accion:hover { background: var(--chip-claro); color: var(--navy); }
.cfg-pie { font-size: 12px; color: var(--gris-3); padding: 0 6px; }
.cfg-archivados { font-size: 13px; color: var(--gris); padding: 0 6px; }
.cfg-archivados summary { cursor: pointer; font-weight: 700; margin-bottom: 6px; }
.cfg-fila-archivada { border-radius: 12px; opacity: .8; }

.cfg-editor { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 8px; }
.cfg-editor-cab { display: flex; align-items: center; justify-content: space-between; }
.cfg-editor-cab h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--navy); }
.cfg-campo { width: 100%; }
.cfg-paleta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cfg-color { height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.0); }
.cfg-color.elegido { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--navy); }
.cfg-previa { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px 0 4px; }
.cfg-franja { width: 100%; border-radius: 10px; color: var(--blanco); font-size: 12px; font-weight: 800; padding: 9px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-familia, .cfg-interruptor { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--borde); cursor: pointer; }
.cfg-familia.elegida { border-color: var(--teal); background: var(--teal-bg); }
.cfg-familia input, .cfg-interruptor input { accent-color: var(--teal); margin-top: 3px; }
.cfg-familia-textos { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tinta); }
.cfg-familia-textos span { font-size: 12px; color: var(--gris-3); }
.cfg-editor-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.archivar-select { width: 100%; height: 38px; border: 1px solid var(--borde); border-radius: 10px; font: inherit; font-size: 14px; padding: 0 10px; }

@media (max-width: 1000px) {
  .cfg-cuerpo { grid-template-columns: 1fr; }
  .cfg-editor { position: static; }
}

/* ============================================================================
   v3 · MI DÍA (maqueta 06) — solo lo que elegiste y te toca
   ========================================================================== */
.hoy-cabecera { align-items: flex-end; }
.hoy-frentes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--chip-claro); flex-wrap: wrap; }
.hoy-frente { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gris); }
.hoy-frente.activo { background: var(--navy); color: var(--blanco); }
.hoy-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.hoy-principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hoy-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hoy-lista { display: flex; flex-direction: column; gap: 9px; }

.hoy-tarjeta {
  --ficha-color: var(--gris); display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
  background: var(--blanco); border-radius: 14px; padding: 12px 16px 12px 18px; box-shadow: var(--sombra-1);
  border-left: 4px solid var(--ficha-color); min-width: 0;
}
.hoy-tarjeta:hover { box-shadow: var(--sombra-2); }
.hoy-l1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hoy-titulo { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-frente-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--gris); background: var(--chip-claro); padding: 2px 9px; border-radius: 999px; }
.hoy-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.hoy-l2 .chip-etiqueta { flex: 0 0 auto; }
.hoy-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-vence { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gris); }
.hoy-vence.vencida, .hoy-paso-dia.vencida { color: var(--rojo-texto); }
.hoy-destacada { font-size: 12px; color: #8A5C00; background: #FFF8E6; border-radius: 8px; padding: 5px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-mas { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--teal-oscuro); padding: 4px 6px; }

.hoy-nuevas { background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra-1); padding: 4px 6px; }
.hoy-nuevas-cab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: left; font-size: 13px; font-weight: 800; color: var(--navy); flex-wrap: wrap; }
.hoy-nuevas-nota { font-size: 12px; font-weight: 600; color: var(--gris-3); }
.hoy-nuevas .hoy-lista { padding: 4px 4px 10px; }

.hoy-esperando { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra-1); padding: 12px 14px; min-width: 0; }
.hoy-esperando .avatar-iniciales { flex: 0 0 auto; }
.hoy-esperando-texto { flex: 1; min-width: 0; }
.hoy-esperando-frase { font-size: 14px; font-weight: 700; color: var(--tinta); }
.hoy-boton { height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }

.hoy-pasos { padding: 6px 16px; }
.hoy-paso { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F6F4EE; font-size: 13px; cursor: pointer; min-width: 0; }
.hoy-paso:first-child { border-top: 0; }
.hoy-paso input { accent-color: var(--teal); width: 17px; height: 17px; flex: 0 0 auto; }
.hoy-paso-titulo { flex: 1; min-width: 0; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-paso-proyecto { font-size: 12px; color: var(--gris); white-space: nowrap; }
.hoy-paso-dia { font-size: 12px; font-weight: 700; color: var(--gris); white-space: nowrap; }

.hoy-anotado { background: #FFF8E6; border-radius: 10px; padding: 9px 11px; margin-top: 8px; }
.hoy-anotado-titulo { font-size: 13px; font-weight: 700; color: var(--tinta); }
.hoy-anotado-meta { font-size: 11px; color: #8A5C00; margin-top: 2px; }

.hoy-vacio { text-align: center; padding: 34px 20px; background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-1); }
.hoy-vacio h3 { margin: 10px 0 6px; font-size: 18px; color: var(--navy); }
.hoy-vacio p { margin: 0 0 14px; font-size: 13px; color: var(--gris-3); }

@media (max-width: 1000px) {
  .hoy-cuerpo { grid-template-columns: 1fr; }
  .hoy-lateral { order: -1; }      /* teléfono: la agenda arriba (maqueta 06) */
}
@media (max-width: 767px) {
  .hoy-cabecera { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hoy-esperando { flex-wrap: wrap; }
  .hoy-paso-proyecto { display: none; }
}

/* ============================================================================
   v3 · El ESPACIO con vista rápida (maqueta 01) y Configurar espacio (11)
   ========================================================================== */
#vista-espacio { max-width: 1240px; }
.esp3-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 22px; align-items: start; }
.esp3-lista { min-width: 0; }
.esp3-filtro { margin-left: auto; height: 32px; border: 1px solid var(--borde); border-radius: 9px; background: var(--blanco); font: inherit; font-size: 12px; font-weight: 700; color: var(--tinta-2); padding: 0 8px; }
.esp3-fichas { display: flex; flex-direction: column; gap: 9px; }
.esp3-tarjeta {
  --ficha-color: var(--gris); display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; min-width: 0;
  background: var(--blanco); border-radius: 14px; padding: 12px 16px 12px 18px; box-shadow: var(--sombra-1); border-left: 4px solid var(--ficha-color);
}
.esp3-tarjeta:hover { box-shadow: var(--sombra-2); }
.esp3-tarjeta.elegida { box-shadow: inset 0 0 0 2px var(--teal), var(--sombra-1); }
.esp3-l1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.esp3-asunto { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp3-cuando { flex: 0 0 auto; font-size: 12px; color: var(--gris-3); }
.esp3-l2 { font-size: 12px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp3-l2 b { color: var(--tinta-2); }
.esp3-l3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esp3-marcas { font-size: 12px; color: var(--gris); }
.esp3-lateral { position: sticky; top: 80px; min-width: 0; }
.esp3-rapida { border-top: 4px solid var(--ficha-color); display: flex; flex-direction: column; gap: 8px; }
.esp3-rapida-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esp3-rapida-cab .boton-ficha { margin-left: auto; height: 32px; }
.esp3-rapida-titulo { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--navy); line-height: 1.3; word-break: break-word; }
.esp3-rapida-franja { display: flex; justify-content: space-between; gap: 10px; background: var(--ficha-color); color: var(--blanco); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.esp3-nota { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--borde); border-radius: 12px; padding: 10px; margin-top: 6px; }
.esp3-nota .ficha-guardar { align-self: flex-end; }
.esp3-resumen { display: flex; flex-direction: column; gap: 6px; }
.esp3-resumen-titulo { font-size: 12px; font-weight: 800; color: var(--navy); margin-top: 10px; }
.esp3-resumen-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.esp3-resumen-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.esp3-destacada { text-align: left; border: 0; cursor: pointer; }

.espcfg-cabecera { display: flex; flex-direction: column; gap: 6px; }
.espcfg-sub { color: var(--gris-3); font-weight: 700; }
.espcfg-reglas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.espcfg-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--borde-panel); }
.espcfg-fila:first-child { border-top: 0; }
.espcfg-texto { font-size: 14px; color: var(--tinta); }
.espcfg-select { max-width: 220px; }
.espcfg-borrar { margin-left: 12px; }

@media (max-width: 1100px) {
  .esp3-cuerpo, .espcfg-reglas { grid-template-columns: 1fr; }
  .esp3-lateral { position: static; order: -1; }
}

/* ============================================================================
   v3 · La ficha del PROYECTO (maqueta 08)
   ========================================================================== */
.pro3 { --ficha-color: #13806B; --ficha-fondo: #E1F5F1; background: var(--crema); border-radius: 20px; box-shadow: var(--sombra-1); overflow: hidden; }
.pro3-cabecera .esp-volver { margin-bottom: 6px; }
.pro3-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pro3-frente { width: auto; height: 36px; }
.franja-editable { background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.franja-editable:hover .franja-valor { text-decoration: underline; }
.pro3-modos { margin-left: auto; }
.pro3-modos button { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gris); }
.pro3-modos button.activo { background: var(--blanco); color: var(--navy); box-shadow: var(--sombra-1); }

.pro3-paso { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #F6F4EE; min-width: 0; background: var(--blanco); }
.pro3-paso:first-child { border-top: 0; }
.pro3-paso.arrastrando { opacity: .4; }
.pro3-paso input[type="checkbox"] { accent-color: var(--teal); width: 17px; height: 17px; flex: 0 0 auto; }
.pro3-paso.hecho .pro3-paso-titulo { text-decoration: line-through; color: var(--gris-3); }
.pro3-flechas { display: inline-flex; flex-direction: column; }
.pro3-flecha { font-size: 10px; line-height: 1; color: var(--gris-4); padding: 0 3px; }
.pro3-flecha:hover { color: var(--navy); }
.pro3-paso-titulo { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.pro3-quien { font-size: 12px; font-weight: 700; color: var(--gris); background: var(--chip-claro); border-radius: 999px; padding: 3px 9px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.pro3-fecha { height: 28px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 12px; padding: 0 6px; color: var(--tinta-2); }
.pro3-fecha.vencida { border-color: var(--rojo); color: var(--rojo-texto); }
.pro3-etapa { height: 28px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; padding: 0 8px; background: var(--chip-claro); color: var(--tinta-2); }
.pro3-etapa.etapa-en_curso { background: #E7EFFC; color: #2459B8; }
.pro3-etapa.etapa-por_aprobar { background: #FFF4D9; color: #8A5C00; }
.pro3-etapa.etapa-hecho { background: var(--verde-bg); color: var(--verde-texto); }
/* 26-10: el «🗑» al 50 % no se veía; ahora es un botón con borde y rojo al pasar el mouse */
.pro3-borrar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--borde); background: var(--blanco); color: var(--gris); }
.pro3-borrar:hover, .pro3-borrar:focus-visible { color: var(--rojo-texto); border-color: var(--rojo); background: #FDECEC; }

.pro3-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pro3-columna { background: var(--crema); border-radius: 12px; padding: 8px; min-height: 120px; display: flex; flex-direction: column; gap: 7px; }
.pro3-columna.sobre { box-shadow: inset 0 0 0 2px var(--teal); }
.pro3-columna-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; color: var(--navy); padding: 2px 4px; }
.pro3-tarjeta { background: var(--blanco); border-radius: 10px; padding: 8px 10px; box-shadow: var(--sombra-1); cursor: grab; display: flex; flex-direction: column; gap: 3px; }
.pro3-tarjeta-titulo { font-size: 12px; font-weight: 700; color: var(--tinta); }
.pro3-tarjeta-meta { font-size: 11px; color: var(--gris-3); }
.pro3-enviar { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--teal-oscuro); padding: 2px 0; }

.pro3-etapas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pro3-etapa-punto { font-size: 12px; font-weight: 700; color: var(--gris-3); background: var(--chip-claro); border-radius: 999px; padding: 4px 11px; }
.pro3-etapa-punto.hecha { background: var(--teal-bg); color: var(--teal-oscuro); }
.pro3-aprobar-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #F6F4EE; }
.pro3-aprobar-texto { flex: 1; min-width: 160px; font-size: 13px; font-weight: 700; color: var(--tinta); }
.pro3-frena { font-size: 13px; color: #8A5C00; background: #FFF4D9; border: 1.5px dashed #E8A33D; border-radius: 10px; padding: 8px 10px; margin-top: 6px; }

.pro3-ficha { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.pro3-ficha:first-child { border-top: 0; }
.pro3-ficha-titulo { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro3-referencia { display: block; font-size: 13px; color: var(--teal-oscuro); padding: 4px 0; }
.pro3-mensajes { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; margin-bottom: 12px; }
.pro3-mensaje { background: var(--crema); border-radius: 12px; padding: 9px 11px; }
.pro3-mensaje-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gris-3); }
.pro3-mensaje-cab b { color: var(--tinta); }
.pro3-mensaje-texto { font-size: 13px; color: var(--tinta); line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
@media (max-width: 960px) { .pro3-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pro3-paso { flex-wrap: wrap; }
  .pro3-flechas, .cfg-tirador { display: none; }
  .ficha-acciones .pro3-frente { display: none; }
}

/* ============================================================================
   v3 · CONTACTOS (maqueta 10)
   ========================================================================== */
.con3-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.con3-buscar { flex: 1; min-width: 200px; max-width: 420px; height: 40px; border: 1px solid var(--borde); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14px; background: var(--blanco); color: var(--tinta); }
.con3-importar-ancla { margin-left: auto; }
.con3-importar-ancla .sel-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; width: 320px; }
.con3-opcion { align-items: flex-start; }
.con3-opcion-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.con3-opcion-texto small { font-size: 11px; font-weight: 600; color: var(--gris-3); }
.con3-opcion.deshabilitada { opacity: .55; cursor: not-allowed; }
.con3-opcion.deshabilitada:hover { background: none; }

.con3 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.con3.con-ficha { grid-template-columns: 210px minmax(0, 1fr) 360px; }
.con3-filtros { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.con3-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-3); padding: 14px 8px 6px; }
.con3-filtro { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.con3-filtro:hover { background: var(--chip-claro); }
.con3-filtro.activo { background: var(--blanco); color: var(--navy); font-weight: 800; box-shadow: var(--sombra-1); }
.con3-filtro-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-filtro-n { font-size: 12px; color: var(--gris-3); }
.con3-ver { color: var(--teal-oscuro); font-weight: 700; }
.con3-filtro-vacio { font-size: 12px; color: var(--gris-3); padding: 4px 10px; line-height: 1.4; }

.con3-centro { min-width: 0; }
.con3-lista-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.con3-lista-cab h2 { font-size: 16px; font-weight: 800; color: var(--navy); margin: 0; }
.con3-columnas, .con3-fila { display: grid; grid-template-columns: 30px minmax(0, 1fr) 110px 110px 50px; gap: 10px; align-items: center; }
.con3-columnas { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-3); padding: 0 12px 6px; }
.con3-columnas span:first-child { grid-column: 1 / 3; }
.con3-lista { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1); overflow: hidden; }
.con3-fila { width: 100%; text-align: left; padding: 10px 12px; border-top: 1px solid #F6F4EE; min-width: 0; }
.con3-fila:first-child { border-top: 0; }
.con3-fila:hover { background: #FBFAF6; }
.con3-fila.activa { background: var(--teal-bg); }
.con3-avatar { width: 30px; height: 30px; font-size: 11px; }
.con3-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.con3-nombre-linea { display: flex; align-items: center; gap: 6px; min-width: 0; }
.con3-nombre { font-size: 14px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.con3-seg { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; color: #6D4FC7; background: #EFEAFB; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.con3-seg-nuevo { color: var(--teal-oscuro); background: var(--teal-bg); }
.con3-sub { font-size: 12px; color: var(--gris-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.con3-col { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-col.sin { color: var(--gris-4); }
.con3-fichas { text-align: right; font-weight: 700; }
.con3-vacio { padding: 28px 20px; text-align: center; font-size: 13px; color: var(--gris); display: flex; flex-direction: column; gap: 6px; }
.con3-vacio b { color: var(--navy); font-size: 14px; }
.con3-info { font-size: 12px; color: var(--gris-3); margin-top: 10px; }

.con3-ficha { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-1); padding: 16px 18px 72px; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.con3-ficha-cab { display: flex; align-items: flex-start; gap: 12px; }
.con3-avatar-grande { width: 44px; height: 44px; font-size: 15px; }
.con3-ficha-titulos { flex: 1; min-width: 0; }
.con3-ficha-nombre { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 2px; overflow-wrap: anywhere; }
.con3-ficha-titulos .con3-sub { white-space: normal; }
.con3-cerrar { font-size: 15px; color: var(--gris-3); padding: 2px 6px; border-radius: 8px; }
.con3-cerrar:hover { background: var(--chip-claro); color: var(--navy); }
.con3-datos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.con3-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.con3-dato-rotulo { font-size: 11px; font-weight: 700; color: var(--gris-3); }
.con3-dato-valor { font-size: 13px; color: var(--tinta); overflow-wrap: anywhere; }
.con3-correo { color: var(--teal-oscuro); text-decoration: none; }
.con3-agregar { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--teal-oscuro); padding: 0; }
.con3-editar { margin-top: 12px; height: 32px; }
.con3-form { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.con3-campo { display: flex; flex-direction: column; gap: 3px; }
.con3-segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.con3-chip-seg { --chip-color: #6D4FC7; --chip-fondo: #EFEAFB; padding-right: 6px; }
.con3-quitar { font-size: 10px; color: inherit; opacity: .6; padding: 0 2px; }
.con3-quitar:hover { opacity: 1; }
.con3-enque { display: flex; flex-direction: column; }
.con3-enque-fila { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.con3-enque-fila:first-child { border-top: 0; }
.con3-enque-fila.cerrada .con3-enque-titulo { color: var(--gris-3); }
.con3-enque-titulo { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-enque-flecha { color: var(--gris-4); }
.con3-hvr { font-size: 12px; color: var(--gris-3); background: var(--crema); border-radius: 10px; padding: 8px 10px; margin-top: 8px; line-height: 1.4; }
.con3-notas { width: 100%; }
.con3-pie { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.con3-archivar { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gris-3); }
.con3-archivar:hover { color: var(--rojo-texto); }

/* Con la ficha abierta, la lista se queda con lo esencial: industria y
   actividad ya están en la ficha, y el nombre necesita el ancho. */
.con3.con-ficha .con3-columnas, .con3.con-ficha .con3-fila { grid-template-columns: 30px minmax(0, 1fr) 44px; }
.con3.con-ficha .con3-industria, .con3.con-ficha .con3-ultima,
.con3.con-ficha .con3-columnas span:nth-child(2), .con3.con-ficha .con3-columnas span:nth-child(3) { display: none; }
@media (max-width: 1180px) {
  .con3.con-ficha { grid-template-columns: minmax(0, 1fr) 340px; }
  .con3.con-ficha .con3-filtros { display: none; }
}
@media (max-width: 960px) {
  .con3, .con3.con-ficha { grid-template-columns: minmax(0, 1fr); }
  .con3-filtros { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .con3-filtros .con3-rotulo { display: none; }
  .con3-filtro { width: auto; background: var(--blanco); box-shadow: var(--sombra-1); border-radius: 999px; padding: 6px 12px; }
  .con3-filtro-vacio { display: none; }
  .con3-ficha { position: fixed; inset: 0; z-index: 60; border-radius: 0; max-height: none; padding: 18px 16px calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  .con3-columnas { display: none; }
  .con3-fila { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .con3-industria, .con3-ultima { display: none; }
  .con3-importar-ancla { margin-left: 0; }
  .con3-buscar { max-width: none; }
}

/* ============================================================================
   v3 · EQUIPO — vista de gerencia (maqueta 09)
   ========================================================================== */
.eq3-barra-sup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.eq3-areas { display: flex; gap: 6px; flex-wrap: wrap; }
.eq3-area { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gris); background: var(--blanco); box-shadow: var(--sombra-1); }
.eq3-area.activa { background: var(--navy); color: var(--blanco); }
.eq3-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.eq3-panel-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.eq3-panel-cab h2 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0; }
.eq3-leyenda { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.eq3-franja { overflow-x: auto; position: relative; }
.eq3-grilla { min-width: 620px; display: flex; flex-direction: column; }
.eq3-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: stretch; border-top: 1px solid #F6F4EE; padding: 8px 0; }
.eq3-fila.eq3-cab { border-top: 0; padding: 0 0 6px; }
.eq3-dias { display: grid; grid-template-columns: repeat(var(--eq-dias, 14), minmax(0, 1fr)); gap: 4px 2px; }
.eq3-dia { font-size: 10px; font-weight: 700; color: var(--gris-3); text-align: center; white-space: nowrap; overflow: hidden; }
.eq3-dia.finde { color: var(--gris-4); }
.eq3-dia.hoy { color: var(--blanco); background: var(--teal); border-radius: 999px; }
.eq3-persona { display: flex; align-items: center; gap: 9px; min-width: 0; }
.eq3-avatar { width: 30px; height: 30px; font-size: 11px; }
.eq3-persona-txt { display: flex; flex-direction: column; min-width: 0; }
.eq3-nombre { font-size: 13px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq3-area-persona { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--gris-3); padding: 0; }
.eq3-area-persona.vacia { color: var(--teal-oscuro); }
.eq3-area-persona:hover { text-decoration: underline; }
.eq3-carril { position: relative; grid-auto-flow: row dense; align-content: center; min-height: 34px; }
.eq3-linea-hoy { position: absolute; top: -8px; bottom: -8px; left: calc(var(--col) * 100% / var(--eq-dias, 14)); width: calc(100% / var(--eq-dias, 14)); background: rgba(33, 180, 152, .08); pointer-events: none; }
.eq3-barra { position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left; padding: 4px 8px; border-radius: 8px; background: var(--barra-fondo); border-left: 3px solid var(--barra-color); }
.eq3-barra:hover { box-shadow: var(--sombra-1); }
.eq3-barra-titulo { font-size: 12px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq3-barra-meta { font-size: 11px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq3-barra.hecho { opacity: .6; }
.eq3-barra.atrasado { border-left-color: var(--rojo); }
.eq3-barra.atrasado .eq3-barra-meta { color: var(--rojo-texto); font-weight: 700; }
.eq3-barra.sin-fecha { border-left-style: dashed; }
.eq3-nota { font-size: 12px; color: var(--gris-3); margin-top: 10px; line-height: 1.5; }
.eq3-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.eq3-aprobar-item { padding: 10px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.eq3-aprobar-item:first-child { border-top: 0; padding-top: 0; }
.eq3-aprobar-titulo { display: block; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq3-aprobar-pie { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.eq3-aprobar-ok { height: 30px; color: var(--verde-texto); border-color: var(--verde-texto); }
.eq3-proyecto { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.eq3-proyecto:first-child { border-top: 0; }
.eq3-punto { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; }
.eq3-proyecto-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eq3-proyecto-nombre { font-size: 13px; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq3-quieto { color: #8A5C00; font-weight: 700; }
.eq3-avance { font-size: 13px; font-weight: 800; color: var(--navy); }
@media (max-width: 1180px) { .eq3-cuerpo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .eq3-fila { grid-template-columns: 120px minmax(0, 1fr); } }

/* ============================================================================
   v3 · CAPTURA RÁPIDA en lenguaje natural (maqueta 04)
   ========================================================================== */
.modal-captura.cap3 { width: min(640px, calc(100vw - 32px)); }
.cap3 .modal-cabecera { gap: 10px; }
.cap3 .modal-pista { margin-left: auto; }
.cap3-entrada-fila { display: flex; align-items: center; gap: 8px; }
.cap3-entrada-fila .captura-entrada { flex: 1; min-width: 0; }
.cap3-microfono { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; background: var(--chip-claro); font-size: 18px; }
.cap3-microfono.activo { background: var(--rojo); }
.cap3-dictando { font-size: 12px; font-weight: 700; color: var(--rojo-texto); margin-top: 6px; }
.cap3-bloque { margin-top: 14px; }
.cap3-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-3); margin-bottom: 8px; }
.cap3-pista { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.cap3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cap3-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--teal-bg); color: var(--teal-oscuro); font-size: 13px; font-weight: 700; max-width: 100%; }
.cap3-chip > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap3-chip.vacio { background: var(--blanco); color: var(--gris); border: 1px dashed var(--gris-4); font-weight: 600; }
.cap3-chip-flecha { font-size: 10px; opacity: .7; }
.cap3-editor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cap3-editor .sel-menu-campo { width: auto; }
.cap3-explica { font-size: 12px; color: var(--gris); background: var(--crema); border-radius: 10px; padding: 8px 10px; margin-top: 8px; line-height: 1.45; }
.cap3-accion { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #F6F4EE; cursor: pointer; }
.cap3-accion:first-of-type { border-top: 0; }
.cap3-accion input[type="checkbox"] { accent-color: var(--teal); width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.cap3-accion input[type="checkbox"]:disabled + .cap3-accion-txt { opacity: .55; }
.cap3-accion-icono { width: 17px; text-align: center; flex: 0 0 auto; }
.cap3-accion-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cap3-accion-txt b { font-size: 13px; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
.cap3-accion-txt small { font-size: 12px; color: var(--gris-3); }
.cap3-editar { font-size: 14px; color: var(--gris-3); padding: 0 4px; }
.cap3-editar:hover { color: var(--navy); }
.cap3-proyecto { width: 100%; max-width: 100%; height: 34px; }
.cap3 .modal-pie { flex-wrap: wrap; }
@media (max-width: 767px) {
  .cap3 .modal-pista { display: none; }
  .cap3 .modal-pie .pie-izquierda { flex: 1 0 100%; }
  .cap3 .modal-pie .boton-secundario, .cap3 .modal-pie .boton-primario { flex: 1 1 auto; }
}

/* ============================================================================
   v3 · PREGÚNTALE A VIGIA ✨ (maqueta 12)
   ========================================================================== */
.pr3-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.pr3-principal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pr3-apagada { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #8A5C00; background: #FFF4D9; border: 1.5px dashed #E8A33D; }
.pr3-apagada b { color: #6B4700; font-size: 14px; }
.pr3-conversacion { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pr3-vacio { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-1); padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pr3-vacio-icono { font-size: 30px; }
.pr3-vacio-texto { font-size: 15px; font-weight: 700; color: var(--navy); }
.pr3-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pr3-sugerencias .eq3-area:disabled { opacity: .5; cursor: not-allowed; }
.pr3-burbuja { align-self: flex-end; max-width: 80%; background: var(--navy); color: var(--blanco); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14px; overflow-wrap: anywhere; }
.pr3-respuesta { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-1); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr3-cargando { color: var(--gris); font-size: 13px; font-style: italic; }
.pr3-firma { font-size: 12px; font-weight: 700; color: #6D4FC7; }
.pr3-texto-respuesta { font-size: 14px; line-height: 1.55; color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.pr3-ficha { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--crema); min-width: 0; flex-wrap: wrap; }
.pr3-ficha-txt { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pr3-ficha-txt b { font-size: 13px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr3-abrir { height: 30px; }
.pr3-consulto { font-size: 12px; color: var(--gris-3); line-height: 1.45; }
.pr3-form { display: flex; gap: 10px; align-items: flex-end; background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-1); padding: 10px; }
.pr3-form textarea { flex: 1; min-width: 0; resize: none; border: 0; font: inherit; font-size: 14px; color: var(--tinta); padding: 6px 8px; background: transparent; outline: none; }
.pr3-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pr3-lateral h2 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.pr3-dia { width: 100%; justify-content: center; margin-bottom: 10px; }
.pr3-credito-txt { font-size: 14px; font-weight: 800; color: var(--navy); }
.pr3-barra { height: 8px; background: var(--chip-claro); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.pr3-barra span { display: block; height: 100%; background: #6D4FC7; border-radius: 999px; }
@media (max-width: 1180px) { .pr3-cuerpo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .pr3-burbuja { max-width: 92%; }
  .pr3-form { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Contactos › Buscar en tus correos (26-10)
   ========================================================================== */
.modal.con3-bq { width: min(640px, 100%); display: flex; flex-direction: column; }
.con3-bq-form { display: flex; gap: 8px; }
.con3-bq-form .con3-buscar { flex: 1; max-width: none; }
.con3-bq-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 10px 0 4px; }
.con3-bq-lista { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; border-top: 1px solid var(--borde-panel); }
.con3-bq-fila { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid #F6F4EE; cursor: pointer; min-width: 0; }
.con3-bq-fila:hover { background: #FBFAF6; }
.con3-bq-fila input { accent-color: var(--teal); width: 17px; height: 17px; }
.con3-bq-fila.ya { cursor: default; opacity: .6; }
.con3-bq-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
@media (max-width: 767px) {
  .con3-bq-fila { grid-template-columns: 18px 30px minmax(0, 1fr); }
  .con3-bq-meta { grid-column: 3; align-items: flex-start; }
}

/* ============================================================================
   Proyecto · línea de tiempo y tablero configurables (26-10)
   ========================================================================== */
.pro3-linea { position: relative; background: var(--blanco); border-bottom: 1px solid var(--borde-panel); padding: 16px 52px 12px 24px; }
.pro3-linea-vacia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--gris-3); }
.pro3-linea-pista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.pro3-hito { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
/* El tramo que une un punto con el siguiente */
.pro3-hito:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 3px; border-radius: 3px; background: var(--chip-claro); }
.pro3-hito.tramo-hecho:not(:last-child)::after { background: var(--navy); }
.pro3-hito-punto { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--gris-4); background: var(--blanco); color: var(--blanco); font-size: 13px; font-weight: 800; cursor: pointer; }
.pro3-hito-punto:hover { border-color: var(--navy); }
.pro3-hito.hecha .pro3-hito-punto { background: var(--navy); border-color: var(--navy); }
.pro3-hito.actual .pro3-hito-punto { border: 3px solid var(--navy); box-shadow: 0 0 0 4px var(--chip-claro); cursor: default; }
.pro3-hito.actual .pro3-hito-punto::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--navy); }
.pro3-hito-nombre { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.pro3-hito.actual .pro3-hito-nombre { color: var(--navy); font-weight: 800; }
.pro3-hito.hecha .pro3-hito-nombre { color: var(--tinta-2); }
.pro3-hito-fecha { font-size: 11px; color: var(--gris-3); min-height: 14px; }
.pro3-linea-cfg { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 8px; color: var(--gris); font-size: 15px; }
.pro3-linea-cfg:hover { background: var(--chip-claro); color: var(--navy); }

/* Tablero: tantas columnas como el usuario quiera (desliza si no caben) */
.pro3-tablero { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; padding-bottom: 6px; }
.pro3-columna-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro3-columna.tipo-hecho { background: #F1F7F2; }
.pro3-columna.tipo-por_aprobar { background: #FFF8E8; }

/* Modal ⚙ Etapas y tablero */
.modal.pro3-config { width: min(680px, 100%); }
.pro3-config-sec { padding: 12px 0; border-top: 1px solid var(--borde-panel); }
.pro3-config-sec:first-of-type { border-top: 0; padding-top: 0; }
.pro3-config-plantilla { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pro3-config-plantilla .ficha-select { flex: 1; min-width: 200px; height: 36px; }
.pro3-config-info { margin-top: 6px; white-space: normal; }
.pro3-config-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pro3-cfg-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pro3-cfg-num { flex: 0 0 auto; width: 20px; font-size: 12px; font-weight: 700; color: var(--gris-3); text-align: right; }
.pro3-cfg-nombre { flex: 1; min-width: 0; height: 34px; }
.pro3-cfg-tipo { flex: 0 0 auto; width: 160px; height: 34px; }
.pro3-cfg-mover { width: 26px; height: 30px; font-size: 14px; border-radius: 8px; }
.pro3-cfg-mover:disabled { opacity: .25; cursor: default; }

@media (max-width: 960px) { .pro3-tablero { grid-template-columns: none; } }
@media (max-width: 767px) {
  .pro3-linea { padding: 14px 44px 10px 12px; overflow-x: auto; }
  .pro3-linea-pista { min-width: calc(var(--n, 4) * 76px); }
  .pro3-cfg-tipo { width: 120px; }
  .pro3-cfg-mover { display: none; }
}

/* ============================================================================
   Proyecto · 📎 Archivos (26-10): en el Drive de quien sube
   ========================================================================== */
.pro3-subir { cursor: pointer; }
.pro3-archivos-tarjeta.soltando { box-shadow: inset 0 0 0 2px var(--teal); background: var(--teal-bg); }
.pro3-archivo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.pro3-archivo:first-child { border-top: 0; }
.pro3-archivo-icono { flex: 0 0 auto; font-size: 20px; width: 26px; text-align: center; }
.pro3-archivo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pro3-archivo-nombre { font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro3-archivo-nombre:hover { text-decoration: underline; }
.pro3-archivo-boton { height: 30px; padding: 0 10px; font-size: 12px; }
.pro3-subiendo { font-size: 12px; font-weight: 700; color: var(--teal-oscuro); background: var(--teal-bg); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
@media (max-width: 767px) { .pro3-archivo-boton:not([target]) { display: none; } }

/* ============================================================================
   Proyecto · 👥 Equipo e invitados (26-10)
   ========================================================================== */
.pro3-miembro { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #F6F4EE; min-width: 0; }
.pro3-miembro:first-child { border-top: 0; }
.pro3-miembro-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pro3-miembro-txt b { font-size: 13px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal.pro3-inv { width: min(520px, 100%); }
.pro3-inv-form { display: flex; flex-direction: column; gap: 10px; }
.pro3-inv-sugerencias { display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; }
.pro3-inv-sugerencia { flex-direction: column; align-items: flex-start; gap: 1px; }
.pro3-inv-resultado { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pro3-inv-enlace { font-size: 12px; }
.pro3-compartidos-rotulo { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-3); padding: 12px 2px 2px; }
.pro3-linea-pista.solo-ver .pro3-hito-punto { cursor: default; }
.pro3-linea-pista.solo-ver .pro3-hito-punto:hover { border-color: inherit; }
.entrada-invitado { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--teal-oscuro); text-decoration: none; }
.entrada-invitado:hover { text-decoration: underline; }

/* Invitado (usuario tipo «proyectos»): VigIA muestra solo Proyectos. */
body.solo-proyectos .menu-items .menu-item:not(#nav-bitacora),
body.solo-proyectos #nav-configuracion,
body.solo-proyectos .movil-item:not(#movil-bitacora),
body.solo-proyectos #boton-captura,
body.solo-proyectos #boton-captura-movil,
body.solo-proyectos #chip-frescura,
body.solo-proyectos #banner-desconectado,
body.solo-proyectos .menu-pie,
body.solo-proyectos .buscador { display: none !important; }

/* Contactos › buscar: dos fuentes (26-10) */
.con3-bq-fuentes { align-self: flex-start; margin-bottom: 10px; }
.con3-bq-fuentes button { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--gris); }
.con3-bq-fuentes button.activo { background: var(--blanco); color: var(--navy); box-shadow: var(--sombra-1); }

/* ── Íconos (27-10): Bootstrap Icons 1.13.1, un solo set para todo VigIA ──── */
.bi { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; vertical-align: -0.125em; overflow: visible; }
.bi + .bi-texto { margin-left: .45em; }
.bi-texto + .bi { margin-left: .4em; }
.chip-etiqueta > .bi + .bi-texto, .con3-filtro > .bi + .bi-texto { margin-left: 0; }
.bi-entre { margin: 0 .35em; color: var(--gris-3); }
.info { border: 0; }
.info .bi { width: 100%; height: 100%; }
.info:hover, .info:focus-visible { color: var(--navy); }
.menu-icono { width: 17px; height: 17px; }
.movil-icono { width: 20px; height: 20px; }
.buscador .bi, .sel-buscador .bi { width: 14px; height: 14px; color: #8B95A1; }
.boton-campana .bi { width: 16px; height: 16px; color: #5C6B7A; }
.captura-circulo .bi, .boton-captura-flotante .bi { width: 18px; height: 18px; }
.mini-mas .bi { width: 12px; height: 12px; }
.ficha-icono .bi { width: 20px; height: 20px; }
.ficha-tarjeta-icono .bi { width: 14px; height: 14px; }
.sel-menu-icono { display: inline-flex; justify-content: center; flex: 0 0 auto; }
.chip-quitar .bi, .con3-quitar .bi, .condicion-quitar .bi { width: 1.1em; height: 1.1em; }
.cfg-tirador { letter-spacing: 0; display: inline-flex; }
.cfg-tirador .bi, .cfg-pie .bi { width: 13px; height: 13px; color: var(--gris-4); }
.pro3-flecha .bi { width: 11px; height: 11px; }
.pro3-hito-check { width: 13px; height: 13px; }
.sel-flecha .bi { width: 13px; height: 13px; }
.ficha-boton-chico.activo .bi { color: #E8A33D; }
.hoy-destacada .bi, .hoy-anotado-titulo .bi { color: #E8A33D; }
.pr3-vacio-icono .bi { width: 30px; height: 30px; color: var(--teal); }
.pr3-titulo-icono { color: var(--teal); width: .8em; height: .8em; vertical-align: .02em; }
.pr3-cargando .bi, .pr3-firma .bi { color: var(--teal); }
.eq3-quieto .bi, .pro3-frena .bi { color: #C2902C; }
.faro-carga svg { display: block; }
.cap3-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.esp3-marcas > span + span { margin-left: .9em; }
.franja-estado .franja-valor::before, .cfg-franja-estado::before {
  content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 999px;
  background: currentColor; margin-right: .45em; vertical-align: .08em;
}
.cfg-franja-estado { margin-left: 1.4em; }
/* La lupa de los buscadores (antes era un ⌕ dentro del texto de ayuda) */
.con3-buscar { padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B95A1'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px 50%; background-size: 14px 14px; }

/* ── Archivos del proyecto: miniatura por archivo (27-10) ───────────────────── */
.pro3-tipo-pdf { --tipo: #C8382F; }
.pro3-tipo-excel { --tipo: #1D7044; }
.pro3-tipo-word { --tipo: #2B5BB0; }
.pro3-tipo-ppt { --tipo: #C25224; }
.pro3-tipo-imagen { --tipo: #7448A8; }
.pro3-tipo-zip { --tipo: #7A6744; }
.pro3-tipo-video { --tipo: #B03C74; }
.pro3-tipo-audio { --tipo: #1F7F80; }
.pro3-tipo-texto, .pro3-tipo-otro { --tipo: #5B6470; }
.pro3-mini {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 10px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in; color: var(--tipo);
  background: #F6F4EE; background: color-mix(in srgb, var(--tipo) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--tipo) 20%, transparent);
}
.pro3-mini .bi { width: 20px; height: 20px; }
.pro3-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; opacity: 0; transition: opacity .2s ease; }
.pro3-mini img.lista { opacity: 1; }
.pro3-mini:hover, .pro3-mini:focus-visible { box-shadow: 0 0 0 2px var(--teal); outline: none; }

/* ── Visor de archivos (27-10) ─────────────────────────────────────────────── */
.modal.pro3-vista { width: min(1000px, 100%); display: flex; flex-direction: column; padding: 20px 22px 16px; }
.pro3-vista-cab { gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pro3-vista-cab .modal-titulo-grupo { flex: 1; min-width: 0; }
.pro3-vista-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pro3-vista-titulos .modal-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro3-vista-icono, .pro3-vista-sin-icono {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--tipo);
  background: #F6F4EE; background: color-mix(in srgb, var(--tipo) 11%, #fff);
}
.pro3-vista-icono { width: 38px; height: 38px; border-radius: 10px; }
.pro3-vista-icono .bi { width: 19px; height: 19px; }
.pro3-vista-acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pro3-vista-acciones .boton-ficha { height: 34px; padding: 0 12px; }
.pro3-vista-cuerpo { display: flex; align-items: center; gap: 10px; min-height: 0; }
.pro3-vista-lienzo {
  position: relative; flex: 1; min-width: 0; height: min(70vh, 740px); border-radius: 12px; background: #F2F0EA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 14px;
}
.pro3-vista-lienzo.cargando::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 999px; border: 3px solid var(--teal-bg); border-top-color: var(--teal); animation: pro3-gira .8s linear infinite;
}
@keyframes pro3-gira { to { transform: rotate(360deg); } }
.pro3-vista-imagen { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.pro3-vista-pagina { max-width: 100%; max-height: calc(100% - 34px); object-fit: contain; display: block; background: #fff; box-shadow: 0 6px 22px rgba(16,24,40,.16); }
.pro3-vista-video { max-width: 100%; max-height: 100%; }
.pro3-vista-lienzo.es-texto { align-items: stretch; justify-content: flex-start; padding: 0; }
.pro3-vista-texto { margin: 0; padding: 16px 18px; min-height: 100%; background: #fff; color: var(--tinta); white-space: pre-wrap; word-break: break-word; font: 12.5px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.pro3-vista-nota { margin-top: 10px; font-size: 12px; color: var(--gris-3); text-align: center; }
.pro3-vista-sin { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; text-align: center; color: var(--tinta-2); font-size: 14px; }
.pro3-vista-sin-icono { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 4px; }
.pro3-vista-sin-icono .bi { width: 30px; height: 30px; }
.pro3-vista-nav {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco);
  color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
}
.pro3-vista-nav:hover:not(:disabled) { background: var(--chip-claro); }
.pro3-vista-nav:disabled { opacity: .35; cursor: default; }
.pro3-vista-pie { min-height: 16px; margin-top: 8px; text-align: center; font-size: 12px; color: var(--gris-3); }
@media (max-width: 767px) {
  .modal.pro3-vista { padding: 16px 14px 12px; }
  .pro3-vista-acciones .bi-texto { display: none; }
  .pro3-vista-acciones .bi + .bi-texto { margin: 0; }
  .pro3-vista-lienzo { height: 62vh; }
  .pro3-vista-nav { position: absolute; z-index: 2; top: 50%; margin-top: -19px; box-shadow: var(--sombra-1); }
  .pro3-vista-nav.anterior { left: 20px; }
  .pro3-vista-nav.siguiente { right: 20px; }
}

/* ── Etiquetas de la ficha: la × siempre visible (27-10) ───────────────────── */
.chip-quitable { overflow: visible; }
.chip-etiqueta-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-quitable .chip-quitar { flex: 0 0 auto; opacity: .75; }

/* ── Ficha: objetivo y copia del hilo en camino (27-10) ───────────────────── */
.ficha-mini-ancha { grid-column: 1 / -1; }
.ficha-objetivo { display: block; width: 100%; padding: 0; text-align: left; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--tinta); white-space: pre-wrap; }
.ficha-objetivo.vacio { font-weight: 500; color: var(--gris-3); }
.ficha-objetivo:hover { color: var(--teal-oscuro); }
.ficha-objetivo-campo { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--teal); border-radius: 10px; background: var(--blanco); color: var(--tinta); font: inherit; font-size: 14px; resize: vertical; }
.ficha-trayendo .bi { color: var(--teal); animation: latido 1.6s ease-in-out infinite; }

/* ── «Cerrar» en lugar de «esc para cerrar» (27-10) ───────────────────────── */
.modal-cerrar {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--blanco); color: var(--navy); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.modal-cerrar:hover { background: var(--chip-claro); }
.modal-cerrar .bi { width: 13px; height: 13px; }
.cap3 .modal-cerrar { margin-left: auto; }

/* ── Enviar la ficha por correo (27-10) ───────────────────────────────────── */
.modal.fc3 { width: min(620px, 100%); }
.fc3 .modal-titulo .bi { color: var(--teal); }
.fc3-permiso { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #FFF8E6; font-size: 13px; line-height: 1.45; color: var(--tinta); }
.fc3-form { display: flex; flex-direction: column; gap: 9px; }
.fc3-personas { display: flex; flex-direction: column; max-height: 184px; overflow-y: auto; border: 1px solid var(--borde-panel); border-radius: 12px; }
.fc3-sin-personas { padding: 12px; }
.fc3-persona { display: grid; grid-template-columns: 18px 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #F6F4EE; cursor: pointer; }
.fc3-persona:last-child { border-bottom: 0; }
.fc3-persona:hover { background: #FBFAF6; }
.fc3-persona.marcada { background: var(--teal-bg); }
.fc3-persona input { width: 17px; height: 17px; accent-color: var(--teal); }
.fc3-persona-txt { display: flex; flex-direction: column; min-width: 0; }
.fc3-persona-txt b, .fc3-persona-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc3-persona-txt b { font-size: 13px; color: var(--tinta); }
.fc3-persona-txt small { font-size: 12px; color: var(--gris-3); }
.fc3-agregar { display: flex; gap: 8px; }
.fc3-agregar input { flex: 1; min-width: 0; }
.fc3-texto { resize: vertical; min-height: 52px; font: inherit; }
.fc3-incluir { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-2); }
.fc3-incluir label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fc3-incluir input { accent-color: var(--teal); }
.fc3-ver-pdf { display: inline-flex; align-items: center; margin-left: 6px; font-weight: 700; color: var(--teal-oscuro); text-decoration: none; white-space: nowrap; }
.fc3-ver-pdf:hover { text-decoration: underline; }
.fc3-ver-pdf .bi { color: #C8382F; }
.fc3-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fc3-cuantos { font-size: 12px; font-weight: 700; color: var(--gris-3); }
.fc3-pie .boton-primario { display: inline-flex; align-items: center; }

/* ── Espacio: seleccionar varias (27-10) ──────────────────────────────────── */
.esp3-seleccionar { display: inline-flex; align-items: center; }
.esp3-lista > .titulo-fila { flex-wrap: wrap; row-gap: 8px; }
.esp3-barra {
  position: sticky; top: 76px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: var(--navy); color: var(--blanco); box-shadow: var(--sombra-2);
}
.esp3-barra-cuantas { font-size: 13px; font-weight: 800; margin-right: 4px; }
.esp3-barra-pista { font-size: 12px; color: #B8C4CF; }
.esp3-barra .pill-clara { display: inline-flex; align-items: center; background: rgba(255,255,255,.12); color: var(--blanco); }
.esp3-barra .pill-clara:hover { background: rgba(255,255,255,.2); }
.esp3-barra .pill-clara.activa { background: var(--teal); }
.esp3-barra .boton-ficha { height: 32px; padding: 0 12px; }
.esp3-barra-mover { height: 32px; max-width: 200px; padding: 0 10px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; color: var(--navy); }
.esp3-eliminar { color: var(--rojo-texto); }
.esp3-tarjeta.seleccionable { position: relative; padding-left: 46px; }
.esp3-caja { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; color: var(--gris-4); }
.esp3-tarjeta.marcada { box-shadow: inset 0 0 0 2px var(--teal), var(--sombra-1); }
.esp3-tarjeta.marcada .esp3-caja { color: var(--teal); }
@media (max-width: 767px) {
  .esp3-barra { top: 8px; }
  .esp3-barra .ficha-relleno { display: none; }
}

/* ── Aviso de versión nueva (28-10) ───────────────────────────────────────── */
.banner-version { background: var(--teal-bg); border-bottom-color: #BFE8DD; }
.banner-version .banner-texto { color: var(--teal-oscuro); }
.banner-version .banner-boton { display: inline-flex; align-items: center; background: var(--teal-oscuro); }
.banner-version .banner-boton:hover { background: var(--navy); }

/* ── «Elegir…»: el chip de fecha (28-10) ──────────────────────────────────── */
.chip-fecha-elegir .bi { width: 13px; height: 13px; }
.chip-fecha-elegir.sin-picker input[type="date"] { position: static; opacity: 1; width: auto; height: auto; margin-left: 8px; font: inherit; }

/* ── 28-10 · Novedades y avisos de los proyectos (avisos.js) ──────────────── */
.badge-novedad { background: var(--acento); color: var(--blanco); }
#badge-bitacora:not([hidden]) + .badge-novedad { margin-left: 6px; }
.menu-item { position: relative; }
body.menu-retraido #nav-bitacora.con-novedad::after {
  content: ""; position: absolute; top: 7px; right: 16px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 2px var(--navy);
}
.movil-item { position: relative; }
.movil-punto { position: absolute; top: 4px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--blanco); }

.nov-zona { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.nov-panel { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-1); border: 1px solid #F8D9C4; padding: 14px 16px 8px; }
.nov-panel-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.nov-panel-cab h2 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0; }
.nov-campana { color: var(--acento); width: 17px; height: 17px; flex: 0 0 auto; }
.nov-cuenta { padding: 1px 8px; border-radius: 999px; background: var(--acento); color: var(--blanco); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nov-panel-nota { font-size: 12px; color: var(--gris-3); flex-basis: 100%; }
.nov-fila { display: flex; align-items: stretch; gap: 8px; border-top: 1px solid #F6F4EE; min-width: 0; }
.nov-fila-abrir { flex: 1; display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; text-align: left; min-width: 0; border-radius: 10px; }
.nov-fila-abrir:hover { background: #FFF6EF; }
.nov-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--nov-color, var(--acento)); margin-top: 5px; flex: 0 0 auto; box-shadow: 0 0 0 3px #FDE6D6; animation: nov-pulso 1.8s ease-in-out infinite; }
.nov-fila-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nov-fila-nombre { font-size: 13px; font-weight: 800; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nov-fila-codigo { font-size: 11px; font-weight: 700; color: var(--gris-3); margin-right: 6px; }
.nov-fila-frase { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.nov-fila-detalle { font-size: 12.5px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.nov-fila-cuando { font-size: 12px; color: var(--gris-3); white-space: nowrap; padding-top: 1px; }
.nov-fila-visto { align-self: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde); font-size: 12px; font-weight: 700; color: var(--tinta-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nov-fila-visto:hover { background: var(--chip-claro); }
@keyframes nov-pulso { 0%, 100% { box-shadow: 0 0 0 3px #FDE6D6; } 50% { box-shadow: 0 0 0 6px rgba(243,116,34,.12); } }

.nov-avisos { display: flex; gap: 14px; align-items: flex-start; background: var(--navy-hielo); border-radius: 16px; padding: 14px 16px; }
.nov-avisos-icono { width: 22px; height: 22px; color: var(--navy); flex: 0 0 auto; margin-top: 2px; }
.nov-avisos-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.nov-avisos-titulo { font-size: 14px; font-weight: 800; color: var(--navy); }
.nov-avisos-texto { font-size: 13px; color: var(--tinta-2); line-height: 1.45; }
.nov-avisos-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nov-avisos-config { background: transparent; padding: 0; flex-wrap: wrap; }
.nov-avisos-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); padding: 0 4px; }
.nov-avisos-linea .bi { color: var(--teal-oscuro); }
.nov-enlace { font-size: 12.5px; font-weight: 700; color: var(--teal-oscuro); text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; }
.nov-enlace:disabled { opacity: .45; }
.cfg-avisos { margin: 0 0 18px; }
.cfg-avisos-titulo { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.nov-equipos { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde-suave); }
.nov-equipos-titulo { font-size: 12px; font-weight: 700; color: var(--gris-3); margin-bottom: 4px; }
.nov-equipo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--tinta); padding: 4px 0; }
.nov-equipo-nombre { font-weight: 700; }
.nov-equipo-sub { font-size: 12px; color: var(--gris-3); flex: 1; min-width: 160px; }

.nov-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: #FFF3EA; border: 1px solid #F8D2B6; }
.nov-banner-txt { flex: 1; min-width: 220px; font-size: 13.5px; color: var(--tinta); line-height: 1.45; }
.nov-banner-txt b { color: #B5530F; }
.nov-banner-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.nov-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--acento); color: var(--blanco); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; margin-left: 6px; vertical-align: middle; }
.nov-pill-cab { text-transform: none; font-size: 11px; letter-spacing: 0; }
.pro3-mensaje.nov-nuevo { background: #FFF3EA; box-shadow: inset 3px 0 0 var(--acento); }
.pro3-mensaje.nov-nuevo .pro3-mensaje-cab .nov-pill { margin-left: auto; }
.pro3-archivo.nov-nuevo { background: #FFF8F2; box-shadow: inset 3px 0 0 var(--acento); padding-left: 8px; border-radius: 8px; }
.pro3-archivo-txt .nov-pill { align-self: flex-start; margin: 3px 0 0; }
.esp-tarjeta.con-novedad { box-shadow: 0 0 0 2px var(--acento), var(--sombra-1); }
.nov-tarjeta-fila { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 4px 0 2px; }
.nov-tarjeta-fila .nov-pill { margin-left: 0; flex: 0 0 auto; }
.nov-tarjeta-frase { font-size: 12.5px; font-weight: 600; color: #B5530F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pro3-paso .nov-pill { flex: 0 0 auto; margin-left: 0; }
.pro3-paso.nov-nuevo { background: #FFF8F2; box-shadow: inset 3px 0 0 var(--acento); }
.pro3-tarjeta.nov-nuevo { box-shadow: 0 0 0 2px var(--acento), var(--sombra-1); }
.nov-latido { animation: nov-latido 1.2s ease-out 2; }
@keyframes nov-latido { 0% { outline: 3px solid rgba(243,116,34,.55); outline-offset: 2px; } 100% { outline: 3px solid rgba(243,116,34,0); outline-offset: 8px; } }

.nov-flotante {
  position: fixed; right: 24px; bottom: 96px; z-index: 140; width: min(400px, calc(100vw - 32px));   /* bajo los modales (150+) */
  display: flex; gap: 12px; align-items: flex-start; background: var(--blanco); border-radius: 16px;
  box-shadow: var(--sombra-modal); border-left: 5px solid var(--nov-color, var(--acento)); padding: 14px 14px 14px 16px;
}
.nov-flotante.entrando { animation: nov-entra .35s ease-out; }
@keyframes nov-entra { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.nov-flotante .nov-campana { width: 20px; height: 20px; margin-top: 2px; }
.nov-flotante-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nov-flotante-titulo { font-size: 13.5px; font-weight: 800; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nov-flotante-frase { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.nov-flotante-detalle { font-size: 12.5px; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.nov-flotante-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.nov-flotante-acciones .boton-primario { padding: 8px 14px; }
.nov-flotante-cerrar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); order: -1; }
.nov-flotante-cerrar:hover { background: var(--chip-claro); }

.chip-latido { animation: nov-latido 1.2s ease-out 3; }

.boton-campana.con-novedad { background: #FDE6D6; }
.boton-campana.con-novedad .bi { color: var(--acento); animation: nov-campaneo 2.4s ease-in-out 3; transform-origin: 50% 10%; }
@keyframes nov-campaneo { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.campana-cuenta { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acento); color: var(--blanco); font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--blanco); font-variant-numeric: tabular-nums; }
.campana-menu {
  position: fixed; top: 60px; right: 24px; z-index: 380; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-modal); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px;
}
.campana-menu-cab { display: flex; align-items: center; gap: 8px; }
.campana-menu-cab b { flex: 1; font-size: 14px; color: var(--navy); }
.campana-menu-cab .nov-flotante-cerrar { order: 0; }
.campana-vacio { font-size: 13px; color: var(--gris); line-height: 1.45; padding: 4px 2px 6px; }
.campana-menu .nov-fila:first-of-type { border-top: 0; }
.campana-config { align-self: flex-start; }

@media (max-width: 767px) {
  .nov-flotante { right: 16px; left: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .nov-fila-cuando { display: none; }
  .nov-fila-visto .bi-texto { display: none; }
  .nov-fila-visto { padding: 0 10px; }
}

/* ── 28-10 · Tu cuenta, arriba a la derecha (usuario.js) ─────────────────── */
.usuario-boton { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--chip-claro-2); color: var(--navy); max-width: 230px; }
.usuario-boton:hover { background: var(--chip-claro); }
.usuario-boton .avatar-mini { flex: 0 0 auto; }
.usuario-nombre-top { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.usuario-flecha { width: 12px; height: 12px; color: var(--gris-3); flex: 0 0 auto; }
.avatar-mini.con-foto { background: transparent; overflow: hidden; }
.avatar-grande.con-foto { overflow: hidden; }
.usuario-menu {
  position: fixed; top: 60px; right: 24px; z-index: 380; width: min(320px, calc(100vw - 32px));
  background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-modal); padding: 14px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--borde-suave);
}
.usuario-menu-cab { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; }
.usuario-menu-avatar { width: 48px; height: 48px; font-size: 16px; flex: 0 0 auto; }
.usuario-menu-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.usuario-menu-textos b { font-size: 15px; color: var(--navy); }
.usuario-menu-rol { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--ambar-texto); background: var(--ambar-bg); padding: 2px 9px; border-radius: 999px; }
.usuario-menu-correo { font-size: 12.5px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-menu-sep { height: 1px; background: var(--borde-suave); margin: 6px 2px; }
.usuario-menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-align: left; color: var(--tinta); font-size: 14px; font-weight: 600; }
.usuario-menu-item:hover { background: var(--chip-claro); }
.usuario-menu-item .bi { width: 16px; height: 16px; color: var(--gris); flex: 0 0 auto; }
.usuario-menu-item-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usuario-menu-item-texto small { font-size: 11.5px; font-weight: 500; color: var(--gris-3); }
.usuario-menu-salir, .usuario-menu-salir .bi { color: var(--rojo-texto); }
.usuario-menu-tema { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.usuario-menu-tema-rotulo { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.usuario-menu-tema-rotulo .bi { width: 16px; height: 16px; color: var(--gris); }
.usuario-menu-temas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip-claro); }
.usuario-menu-tema-op { width: 34px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); }
.usuario-menu-tema-op .bi { width: 15px; height: 15px; }
.usuario-menu-tema-op.activo { background: var(--blanco); color: var(--navy); box-shadow: 0 1px 3px rgba(13,27,42,.12); }
@media (max-width: 767px) {
  .usuario-nombre-top, .usuario-flecha { display: none; }
  .usuario-boton { padding: 0 4px; background: transparent; }
  .usuario-menu { right: 16px; left: 16px; width: auto; top: 58px; }
}

/* ── 28-10 · Contactos: segmentos con color, en bloque, selector (contactos2.js) ── */
/* Más ancho para las tarjetas de segmento, solo donde la columna izquierda se ve. */
@media (min-width: 961px) { .con3 { grid-template-columns: 236px minmax(0, 1fr); } }
@media (min-width: 1181px) { .con3.con-ficha { grid-template-columns: 236px minmax(0, 1fr) 360px; } }
.con3-todos { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra-1); text-align: left; color: var(--tinta); border: 2px solid transparent; }
.con3-todos .bi { width: 17px; height: 17px; color: var(--teal-oscuro); }
.con3-todos-texto { flex: 1; font-size: 13.5px; font-weight: 800; }
.con3-todos-n { font-size: 14px; font-weight: 800; color: var(--navy); }
.con3-todos.activo { border-color: var(--teal); }
.con3-rotulo-accion { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.con3-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--teal-oscuro); padding: 2px 8px; border-radius: 999px; }
.con3-mini:hover { background: var(--teal-bg); }
.con3-mini .bi { width: 11px; height: 11px; }
.con3-segs { display: flex; flex-direction: column; gap: 6px; }
.con3-segcard { --seg-color: #6D4FC7; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 9px 12px 10px; border-radius: 12px; text-align: left;
  background: color-mix(in srgb, var(--seg-color) 7%, var(--blanco)); border: 1px solid color-mix(in srgb, var(--seg-color) 22%, transparent); }
.con3-segcard:hover { background: color-mix(in srgb, var(--seg-color) 13%, var(--blanco)); }
.con3-segcard.activo { background: color-mix(in srgb, var(--seg-color) 18%, var(--blanco)); border-color: var(--seg-color); box-shadow: 0 0 0 1px var(--seg-color); }
.con3-segcard-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.con3-segcard-punto { width: 10px; height: 10px; border-radius: 999px; background: var(--seg-color); flex: 0 0 auto; }
.con3-segcard-nombre { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-segcard-n { font-size: 13px; font-weight: 800; color: var(--seg-color); }
.con3-segcard-barra { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--seg-color) 14%, transparent); overflow: hidden; }
.con3-segcard-lleno { display: block; height: 100%; border-radius: 999px; background: var(--seg-color); }
.con3-filtro-punto { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.con3-seg { --seg-color: #6D4FC7; color: var(--seg-color); background: color-mix(in srgb, var(--seg-color) 12%, var(--blanco)); }
.con3-seg-mas { --seg-color: var(--gris); }
.con3-seg-nuevo { --seg-color: var(--teal-oscuro); }
.con3-columnas, .con3-fila { grid-template-columns: 18px 30px minmax(0, 1fr) 110px 110px 50px; }
.con3-columnas span:first-of-type { grid-column: 2 / 4; }
.con3.con-ficha .con3-columnas, .con3.con-ficha .con3-fila { grid-template-columns: 18px 30px minmax(0, 1fr) 44px; }
.con3-lista-cab { align-items: center; }
.con3-lista-cab .con3-check-todos { margin-right: 4px; }
.con3-fila { cursor: pointer; }
.con3-fila.marcada { background: color-mix(in srgb, var(--teal) 9%, var(--blanco)); }
.con3-check { width: 16px; height: 16px; accent-color: var(--teal); margin: 0; cursor: pointer; }
.con3-sub-linea { display: flex; align-items: center; gap: 6px; min-width: 0; }
.con3-pro { --pro-color: var(--teal); display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 45%; font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--pro-color) 75%, var(--tinta)); background: color-mix(in srgb, var(--pro-color) 12%, var(--blanco)); border-radius: 6px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-pro .bi { width: 11px; height: 11px; flex: 0 0 auto; }
.con3-tope { padding: 10px 14px; border-top: 1px solid var(--borde-suave); }
.con3-lote {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 8px 10px 8px 16px; border-radius: 16px; background: var(--navy); color: var(--blanco); box-shadow: var(--sombra-modal);
}
.con3-lote-n { font-size: 13px; font-weight: 800; margin-right: 8px; white-space: nowrap; }
.con3-lote-boton { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: inherit; white-space: nowrap; }
.con3-lote-boton:hover { background: rgba(255,255,255,.12); }
.con3-lote-boton .bi { width: 14px; height: 14px; }
.con3-lote-peligro { color: #FFB4AA; }
.con3-lote-quitar { opacity: .75; }
.con3-selector {
  position: fixed; z-index: 400; background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra-modal); border: 1px solid var(--borde-suave);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: min(440px, calc(100vh - 24px));
}
.con3-selector-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.con3-selector-cab b { font-size: 13.5px; color: var(--navy); }
.con3-selector-campo { max-width: none; width: 100%; height: 38px; }
.con3-selector-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.con3-selector-opcion { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta); }
.con3-selector-opcion:hover { background: var(--chip-claro); }
.con3-selector-opcion.marcada { background: var(--teal-bg); }
.con3-selector-ck { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--gris-4); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--blanco); }
.con3-selector-opcion.marcada .con3-selector-ck { background: var(--teal); border-color: var(--teal); }
.con3-selector-ck .bi { width: 12px; height: 12px; }
.con3-selector-crear { color: var(--teal-oscuro); font-weight: 800; }
.con3-selector-crear .bi { width: 13px; height: 13px; }
.con3-vinculos { display: flex; flex-direction: column; gap: 4px; }
.con3-vinculo { --pro-color: var(--teal); display: flex; align-items: center; gap: 4px; border-radius: 10px; background: color-mix(in srgb, var(--pro-color) 8%, var(--blanco)); border-left: 3px solid var(--pro-color); }
.con3-vinculo-ir { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; text-align: left; font-size: 13px; font-weight: 700; color: var(--tinta); }
.con3-vinculo-ir .bi { width: 13px; height: 13px; color: var(--pro-color); flex: 0 0 auto; }
.con3-vinculo-rol { font-size: 11px; font-weight: 800; color: var(--gris); background: var(--chip-claro); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pro3-contacto { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borde-suave); min-width: 0; }
.pro3-contacto:first-child { border-top: 0; }
.pro3-contacto-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pro3-contacto-nombre { align-self: flex-start; font-size: 13.5px; font-weight: 800; color: var(--tinta); text-align: left; padding: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pro3-contacto-nombre:hover { color: var(--teal-oscuro); text-decoration: underline; }
.pro3-contacto-datos { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.pro3-contacto-rol { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--navy); background: var(--chip-claro); border-radius: 999px; padding: 4px 10px; }
.pro3-contacto-rol.vacio { color: var(--gris-3); border: 1px dashed var(--gris-4); background: transparent; }
/* Pantallas medianas (notebook): el nombre necesita el ancho; «Últ. actividad» queda en la ficha. */
@media (max-width: 1366px) {
  .con3-columnas, .con3-fila { grid-template-columns: 18px 30px minmax(0, 1fr) 100px 44px; }
  .con3-ultima, .con3-columnas span:nth-child(3) { display: none; }
}
/* Celular/tablet: la ficha tapa la lista (pantalla completa); la barra en bloque espera. */
@media (max-width: 960px) { .con3.con-ficha ~ .con3-lote { display: none; } }
@media (max-width: 767px) {
  .con3-fila { grid-template-columns: 18px 30px minmax(0, 1fr) 40px; }
  .con3-lote { bottom: calc(82px + env(safe-area-inset-bottom)); border-radius: 14px; }
  .con3-lote-boton .bi-texto { display: none; }
}
.banner-subir { background: var(--teal-bg); border-bottom-color: color-mix(in srgb, var(--teal) 35%, transparent); }
.banner-subir .banner-boton { background: var(--teal); color: #06231C; }
/* Invitado (solo Proyectos): crear proyectos es de quien usa VigIA completo. */
body.solo-proyectos #bit-nuevo-proyecto { display: none !important; }
/* Tarjetas del proyecto angostas (notebook): el título cede con «…» y el botón
   (Vincular, Invitar) siempre se ve completo. */
.ficha-tarjeta-cab { min-width: 0; }
.ficha-tarjeta-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ficha-tarjeta-cab .cfg-mas { flex: 0 0 auto; white-space: nowrap; }

/* ============================================================================
   28-10 · MODO OSCURO (tema.js pone html[data-tema="oscuro"])
   1) La paleta: las mismas variables con valores oscuros (el 85 % de la hoja ya
      las usa). 2) Las «islas» que ya eran oscuras (menú lateral) conservan su
      paleta original. 3) Al final, las reglas GENERADAS (generar_oscuro.py) para
      los colores escritos a fuego.
   ========================================================================== */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --crema: #0E141B;
  --blanco: #161F29;
  --chip-claro: #1D2733;
  --chip-claro-2: #1D2733;
  --borde: #2A3644;
  --borde-suave: #243040;
  --borde-panel: #212C38;
  --navy: #E3EAF1;
  --navy-2: #C8D3DE;
  --navy-3: #AEBBC8;
  --navy-linea: #2A3644;
  --navy-hielo: #172636;
  --teal-oscuro: #3CCFAE;
  --teal-bg: #0F2E28;
  --tinta: #E6ECF2;
  --tinta-2: #C2CDD8;
  --gris: #9AA7B4;
  --gris-2: #8794A1;
  --gris-3: #7F8C99;
  --gris-4: #4D5966;
  --rojo: #E5675B;   --rojo-texto: #F19A90;   --rojo-bg: #3A1D1B;
  --ambar: #E8A33D;  --ambar-texto: #F2C46B;  --ambar-bg: #382B14;
  --verde: #3FAF7D;  --verde-texto: #6FD3A3;  --verde-bg: #14302A;
  --azul: #7C97E3;
  --sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.22);
  --sombra-2: 0 2px 4px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.32);
  --sombra-modal: 0 20px 60px rgba(0,0,0,.6);
}
html[data-tema="oscuro"] body { background: var(--crema); color: var(--tinta); }
/* El menú lateral y los bloques que ya eran oscuros (barras de selección y en
   bloque) conservan SU paleta: fondo navy oscuro, texto blanco. */
html[data-tema="oscuro"] :is(#menu, .kpi-oscuro, .seccion-portriar, .sel-barra, .esp3-barra, .con3-lote) {
  --navy: #0A1017; --navy-2: #142231; --navy-3: #1F3044; --navy-linea: #1B3149;
  --navy-hielo: #EAF1F7; --blanco: #FFFFFF; --tinta: #16212B;
}
html[data-tema="oscuro"] #menu { border-right: 1px solid #1B2633; }
/* Campos nativos (fecha, selector, texto) con el fondo de la superficie. */
html[data-tema="oscuro"] :is(input, select, textarea) { background-color: var(--blanco); color: var(--tinta); border-color: var(--borde); }
html[data-tema="oscuro"] ::placeholder { color: var(--gris-3); }
/* Imágenes transparentes del visor: sobre blanco, como se ven en el archivo. */
html[data-tema="oscuro"] .pro3-vista-lienzo img { background: #fff; }
/* Botón primario: en oscuro va claro con texto oscuro; su hover, apenas más oscuro. */
html[data-tema="oscuro"] .boton-primario:hover { background: var(--navy-2); }
/* Avisos de VigIA (v3v) con tintes cálidos: sus equivalentes oscuros. */
html[data-tema="oscuro"] .nov-panel { border-color: #4A2A16; }
html[data-tema="oscuro"] .nov-banner { background: #2A1A10; border-color: #4A2A16; }
html[data-tema="oscuro"] .nov-banner-txt b { color: #F5A46B; }
html[data-tema="oscuro"] .nov-fila-abrir:hover { background: #22180F; }
html[data-tema="oscuro"] .nov-tarjeta-frase { color: #F5A46B; }
html[data-tema="oscuro"] :is(.pro3-mensaje, .pro3-archivo, .pro3-paso).nov-nuevo { background: #2A1A10; }
html[data-tema="oscuro"] .boton-campana.con-novedad { background: #3A2210; }
html[data-tema="oscuro"] .campana-cuenta { box-shadow: 0 0 0 2px var(--blanco); }
html[data-tema="oscuro"] .usuario-menu-tema-op.activo { background: #2A3644; color: #fff; }
html[data-tema="oscuro"] .con3-fila:hover { background: #1B2530; }

/* ── Modo oscuro: GENERADO por generar_oscuro.py desde las reglas con colores fijos ── */
:where(html[data-tema="oscuro"]) .banner-reconectar { border-bottom: 1px solid #41221E; }
:where(html[data-tema="oscuro"]) .tema-activa { box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
:where(html[data-tema="oscuro"]) .info { border: 1px solid #2A3644; }
:where(html[data-tema="oscuro"]) .badge-conteo { background: #2A3644; }
:where(html[data-tema="oscuro"]) .accion-gris:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .pto-gris { background: #2A3644; }
:where(html[data-tema="oscuro"]) .boton-captura-flotante { box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
:where(html[data-tema="oscuro"]) .velo { background: rgba(0,0,0,0.6); }
:where(html[data-tema="oscuro"]) .chip-estado-opcion:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .boton-secundario:hover { background: #2A3644; }
@media (max-width: 767px) {
  :where(html[data-tema="oscuro"]) .captura-circulo { box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
  :where(html[data-tema="oscuro"]) .asa-hoja { background: #2A3644; }
}
:where(html[data-tema="oscuro"]) .resultado-acciones .pill-navy-tenue:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .seguimiento-triar:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .esp-estado-cerrado { background: #2A3644; }
:where(html[data-tema="oscuro"]) .esp-chip-apagada { background: #2A3644; }
:where(html[data-tema="oscuro"]) .esp-chip-mano { background: #392413; color: #F2CEB1; }
:where(html[data-tema="oscuro"]) .esp-num-acento { color: #F2CEB1; }
:where(html[data-tema="oscuro"]) .pill-clara:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .pill-peligro:hover { background: #3B1E19; }
:where(html[data-tema="oscuro"]) .esp-regla-cambiar:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .esp-regla-boton:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .muestra-color { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
:where(html[data-tema="oscuro"]) .chip-no:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .borde-abierto { background: #2A3644; }
:where(html[data-tema="oscuro"]) .borde-cerrado { background: #2A3644; }
:where(html[data-tema="oscuro"]) .sel-flecha:hover { background: #2A3644; }
:where(html[data-tema="oscuro"]) .chip-etiqueta { --chip-fondo: #243040; background: color-mix(in srgb, var(--chip-color) 22%, var(--blanco)); color: color-mix(in srgb, var(--chip-color) 55%, #FFFFFF); }
:where(html[data-tema="oscuro"]) .sel-grupo-cabecera:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .sel-correo { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .sel-correo:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .importar-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .velo-ficha { background: rgba(0,0,0,0.6); }
:where(html[data-tema="oscuro"]) .ficha { --ficha-fondo: #243040; }
:where(html[data-tema="oscuro"]) .ficha-icono { background: color-mix(in srgb, var(--ficha-color) 22%, var(--blanco)); color: color-mix(in srgb, var(--ficha-color) 55%, #FFFFFF); }
:where(html[data-tema="oscuro"]) button.ficha-tarjeta-cab:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .ficha-tarjeta-icono { background: color-mix(in srgb, var(--ficha-color) 22%, var(--blanco)); color: color-mix(in srgb, var(--ficha-color) 55%, #FFFFFF); }
:where(html[data-tema="oscuro"]) .ficha-nota.destacada { background: #362B10; }
:where(html[data-tema="oscuro"]) .ficha-correo { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .ficha-boton-chico.activo { color: #F1DAB4; background: #3C2F11; }
:where(html[data-tema="oscuro"]) .ficha-item { border-top: 1px solid #243040; }
@media (max-width: 767px) {
  :where(html[data-tema="oscuro"]) .ficha-barra-movil { box-shadow: 0 -4px 18px rgba(0,0,0,0.25); }
}
:where(html[data-tema="oscuro"]) .cfg-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .cfg-tag-sistema { background: #3C2F11; color: #F9E2B5; }
:where(html[data-tema="oscuro"]) .hoy-destacada { color: #F9E2B5; background: #362B10; }
:where(html[data-tema="oscuro"]) .hoy-paso { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .hoy-anotado { background: #362B10; }
:where(html[data-tema="oscuro"]) .hoy-anotado-meta { color: #F9E2B5; }
:where(html[data-tema="oscuro"]) .pro3 { --ficha-color: #BCF0E6; --ficha-fondo: #1C322D; }
:where(html[data-tema="oscuro"]) .pro3-paso { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .pro3-etapa.etapa-en_curso { background: #142033; }
:where(html[data-tema="oscuro"]) .pro3-etapa.etapa-por_aprobar { background: #3C2F11; color: #F9E2B5; }
:where(html[data-tema="oscuro"]) .pro3-borrar:hover,
:where(html[data-tema="oscuro"]) .pro3-borrar:focus-visible { background: #311313; }
:where(html[data-tema="oscuro"]) .pro3-aprobar-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .pro3-frena { color: #F9E2B5; background: #3C2F11; }
:where(html[data-tema="oscuro"]) .pro3-ficha { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .con3-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .con3-fila:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .con3-seg { background: #1E1630; }
:where(html[data-tema="oscuro"]) .con3-chip-seg { --chip-fondo: #1E1630; }
:where(html[data-tema="oscuro"]) .con3-enque-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .eq3-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .eq3-barra { background: color-mix(in srgb, var(--barra-color) 24%, var(--blanco)); }
:where(html[data-tema="oscuro"]) .eq3-aprobar-item { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .eq3-proyecto { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .eq3-quieto { color: #F9E2B5; }
:where(html[data-tema="oscuro"]) .cap3-accion { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .pr3-apagada { color: #F9E2B5; background: #3C2F11; }
:where(html[data-tema="oscuro"]) .pr3-apagada b { color: #FAE6BE; }
:where(html[data-tema="oscuro"]) .con3-bq-fila { border-bottom: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .con3-bq-fila:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .pro3-columna.tipo-hecho { background: #243040; }
:where(html[data-tema="oscuro"]) .pro3-columna.tipo-por_aprobar { background: #352A0F; }
:where(html[data-tema="oscuro"]) .pro3-archivo { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .pro3-miembro { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .pro3-tipo-excel { --tipo: #C3EBD6; }
:where(html[data-tema="oscuro"]) .pro3-tipo-audio { --tipo: #BEEAEA; }
:where(html[data-tema="oscuro"]) .pro3-mini { background: #243040; background: color-mix(in srgb, var(--tipo) 9%, var(--blanco)); }
:where(html[data-tema="oscuro"]) .pro3-mini img { background: var(--blanco); }
:where(html[data-tema="oscuro"]) .pro3-vista-icono,
:where(html[data-tema="oscuro"]) .pro3-vista-sin-icono { background: #243040; background: color-mix(in srgb, var(--tipo) 11%, var(--blanco)); }
:where(html[data-tema="oscuro"]) .pro3-vista-lienzo { background: #243040; }
:where(html[data-tema="oscuro"]) .pro3-vista-pagina { background: var(--blanco); }
:where(html[data-tema="oscuro"]) .pro3-vista-texto { background: var(--blanco); }
:where(html[data-tema="oscuro"]) .fc3-permiso { background: #362B10; }
:where(html[data-tema="oscuro"]) .fc3-persona { border-bottom: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .fc3-persona:hover { background: #262419; }
:where(html[data-tema="oscuro"]) .nov-panel { border: 1px solid #422A1A; }
:where(html[data-tema="oscuro"]) .nov-fila { border-top: 1px solid #243040; }
:where(html[data-tema="oscuro"]) .nov-fila-abrir:hover { background: #321E0F; }
:where(html[data-tema="oscuro"]) .nov-punto { box-shadow: 0 0 0 3px #3C2414; }
:where(html[data-tema="oscuro"]) .nov-banner { background: #341F0F; border: 1px solid #492F1B; }
:where(html[data-tema="oscuro"]) .pro3-mensaje.nov-nuevo { background: #341F0F; }
:where(html[data-tema="oscuro"]) .pro3-archivo.nov-nuevo { background: #311E0E; }
:where(html[data-tema="oscuro"]) .pro3-paso.nov-nuevo { background: #311E0E; }
:where(html[data-tema="oscuro"]) .boton-campana.con-novedad { background: #3C2414; }
:where(html[data-tema="oscuro"]) .usuario-menu-tema-op.activo { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
:where(html[data-tema="oscuro"]) .banner-subir .banner-boton { color: #D7F5EE; }

/* ── 28-10 · Modo oscuro: lo que va DESPUÉS de lo generado (le gana) ─────── */
/* Chips de segmento: su propio color (lo generado los dejaba todos morados). */
html[data-tema="oscuro"] .con3-seg { color: color-mix(in srgb, var(--seg-color) 55%, #fff); background: color-mix(in srgb, var(--seg-color) 24%, var(--blanco)); }
html[data-tema="oscuro"] .con3-seg-nuevo { color: var(--teal-oscuro); background: var(--teal-bg); }
/* La franja de color de la ficha lleva texto blanco en los dos temas. */
html[data-tema="oscuro"] .ficha-franja { color: #fff; }
/* Botón del aviso «Conecta tu correo»: texto oscuro sobre el verde. */
html[data-tema="oscuro"] .banner-subir .banner-boton { color: #06231C; }
/* Las barras oscuras flotando sobre el fondo oscuro: un borde para que se despeguen. */
html[data-tema="oscuro"] :is(.con3-lote, .sel-barra, .esp3-barra) { border: 1px solid #2E3B4A; }

/* ── 29-10 · Contactos: LÍNEA DE TIEMPO en la ficha del contacto (contactos3.js) ──
   Solo variables y color-mix: los mismos colores sirven en claro y en oscuro
   (no hay hex escritos a fuego que el modo oscuro tenga que corregir). */
.con3-tl { min-width: 0; margin-top: 4px; }
.con3-tl .con3-rotulo-accion { padding-right: 0; }
.con3-tl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.con3-tl-mes { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-3); padding: 12px 0 4px 36px; }
.con3-tl-mes:first-child { padding-top: 4px; }
.con3-tl-item { min-width: 0; }
.con3-tl-fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; min-width: 0; padding: 7px 6px; text-align: left; font-size: 13px; line-height: 1.35; color: var(--tinta); border-radius: 10px; }
button.con3-tl-fila { cursor: pointer; }
button.con3-tl-fila:hover { background: var(--chip-claro); }
button.con3-tl-fila:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.con3-tl-icono { --tl-color: var(--gris); width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--tl-color); background: color-mix(in srgb, var(--tl-color) 14%, var(--blanco)); }
.con3-tl-icono .bi { width: 13px; height: 13px; }
.con3-tl-c-correos .con3-tl-icono { --tl-color: var(--azul); }
.con3-tl-c-fichas .con3-tl-icono { --tl-color: var(--teal-oscuro); }
.con3-tl-c-proyectos .con3-tl-icono { --tl-color: var(--acento); }
.con3-tl-c-reuniones .con3-tl-icono { --tl-color: var(--verde-texto); }
.con3-tl-c-anotaciones .con3-tl-icono { --tl-color: var(--ambar-texto); }
.con3-tl-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.con3-tl-titulo { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); }
.con3-tl-que { color: var(--gris); }
.con3-tl-asunto { font-weight: 700; color: var(--tinta); margin-left: 4px; }
.con3-tl-detalle { font-size: 12px; color: var(--gris); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.con3-tl-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 12px; color: var(--tinta-2); overflow-wrap: anywhere; }
.con3-tl-cambio s { color: var(--gris-3); }
.con3-tl-cuando { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--gris-3); white-space: nowrap; padding-top: 5px; }
.con3-tl-vacio { font-size: 12.5px; color: var(--gris-3); padding: 6px 2px; line-height: 1.45; }
.con3-tl-error { color: var(--rojo-texto); }
.con3-tl-reintentar { font-size: 12.5px; font-weight: 700; color: var(--teal-oscuro); text-decoration: underline; padding: 0; }
.con3-tl-mas { margin: 8px 0 0 36px; height: 32px; }

/* «Lo que viene»: lo que tiene fecha por delante, en una caja suave arriba. */
.con3-tl-viene { background: var(--crema); border: 1px solid var(--borde-panel); border-radius: 12px; padding: 6px 4px 4px; margin: 2px 0 8px; }
.con3-tl-viene-rotulo { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-3); padding: 2px 8px 2px; }
.con3-tl-futuro .con3-tl-icono { background: var(--blanco); border: 1.5px dashed color-mix(in srgb, var(--tl-color) 60%, var(--blanco)); }
.con3-tl-futuro .con3-tl-cuando { color: var(--tinta-2); font-weight: 600; }

/* Filtros: Todo · Correos · Fichas · Proyectos · Reuniones · Anotado */
.con3-tl-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.con3-tl-filtro { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font-size: 12px; font-weight: 600; color: var(--gris); }
.con3-tl-filtro:hover { background: var(--chip-claro); color: var(--tinta); }
.con3-tl-filtro.activo { background: var(--navy); border-color: var(--navy); color: var(--blanco); }

/* Anotar: llamada · reunión · WhatsApp · visita · nota */
.con3-tl-form { display: flex; flex-direction: column; gap: 8px; background: var(--crema); border: 1px solid var(--borde); border-radius: 12px; padding: 10px; margin: 2px 0 10px; }
.con3-tl-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.con3-tl-tipo { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font-size: 12px; font-weight: 600; color: var(--gris); }
.con3-tl-tipo .bi { width: 13px; height: 13px; }
.con3-tl-tipo:hover { color: var(--tinta); }
.con3-tl-tipo.activo { border-color: var(--teal); background: var(--teal-bg); color: var(--teal-oscuro); }
.con3-tl-texto { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; min-height: 56px; }
.con3-tl-texto:focus { border-color: var(--teal); }
.con3-tl-form-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.con3-tl-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gris); }
.con3-tl-fecha input { height: 32px; border: 1px solid var(--borde); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; color: var(--tinta); background: var(--blanco); }
.con3-tl-form-acciones { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.con3-tl-form-acciones .boton-ficha { height: 32px; padding: 0 12px; }
.con3-tl-borrar { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--gris); }
.con3-tl-borrar:hover { color: var(--rojo-texto); background: var(--rojo-bg); }
.con3-tl-borrar .bi { width: 15px; height: 15px; }
.con3-tl-ayuda { font-size: 11.5px; color: var(--gris-3); }
.con3-tl-form-titulo { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.con3-tl-c-proyectos .con3-tl-fila .bi, .con3-tl-c-anotaciones .con3-tl-fila .bi { flex: none; }

/* ── 29-10 · Contactos: Escribir · Llamar · WhatsApp · Copiar (contactos3.js, v3y) ──
   Solo variables: sirve en claro y en oscuro. */
.con3-acciones-caja { margin: 12px 0 2px; }
.con3-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.con3-accion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 54px; padding: 0 4px; border-radius: 12px; background: var(--chip-claro); color: var(--tinta); font-size: 12px; font-weight: 600; cursor: pointer; }
.con3-accion .bi { width: 17px; height: 17px; }
.con3-accion-texto { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con3-accion:hover { background: var(--borde-suave); }
.con3-accion:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.con3-accion-principal { background: var(--navy); color: var(--blanco); font-weight: 700; }
.con3-accion-principal:hover { background: var(--navy-2); }
.con3-accion.sin-dato { color: var(--gris-3); background: transparent; border: 1.5px dashed var(--borde); }
.con3-accion.sin-dato:hover { color: var(--teal-oscuro); border-color: var(--teal); background: transparent; }
.con3-acciones-nota { font-size: 11.5px; color: var(--gris-3); margin-top: 6px; }

/* ── 29-10 · «Nuevo» en naranjo (v3z): el naranjo es SOLO para lo nuevo y las novedades.
   Un contacto que llegó de un correo y todavía no está clasificado lleva «Nuevo». ── */
:root { --nuevo: #C4560A; --nuevo-bg: #FDEEE3; }
html[data-tema="oscuro"] { --nuevo: #F59A5B; --nuevo-bg: #45260F; }
.con3-seg.con3-seg-nuevo,
html[data-tema="oscuro"] .con3-seg.con3-seg-nuevo { --seg-color: var(--nuevo); color: var(--nuevo); background: var(--nuevo-bg); flex: none; max-width: none; }

/* ============================================================================
   v3zb (29-10) · BIBLIOTECA TÉCNICA + materiales de la licitación + archivos
   de la ficha (biblioteca.js). Solo variables: el tema oscuro las redefine.
   ========================================================================== */
.bib-tarjeta .ficha-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.bib-lic, .bib-cotis, .bib-barra, .bib-equivalencias, .bib-antes, .bib-prod, .bib-res-ofrecido, .bib-para {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0;
}
.bib-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; max-width: 100%;
  background: var(--chip-claro); color: var(--tinta-2); font-size: 12px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere;
}
.bib-chip-fuerte { background: var(--teal-bg); color: var(--teal-oscuro); font-weight: 800; letter-spacing: .02em; }
.bib-chip-rojo { background: var(--rojo-bg); color: var(--rojo-texto); }
.bib-chip-ambar { background: var(--ambar-bg); color: var(--ambar-texto); }
.bib-chip-gris { background: var(--chip-claro-2); color: var(--gris); font-weight: 600; }
.bib-chip-boton { cursor: pointer; border: 1px solid var(--borde); background: var(--blanco); }
.bib-chip-boton:hover { border-color: var(--teal); color: var(--tinta); }
.bib-eq-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-2); }

.bib-cierre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  background: var(--ambar-bg); color: var(--ambar-texto);
}
.bib-cierre.paso { background: var(--rojo-bg); color: var(--rojo-texto); }
.bib-cierre > .bi { flex: 0 0 auto; width: 18px; height: 18px; }
.bib-cierre-txt { flex: 1 1 220px; min-width: 0; }
.bib-cierre-linea { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--tinta); font-size: 13px; }
.bib-cierre .con3-sub { color: inherit; white-space: normal; }

.bib-campo-chico { max-width: 340px; margin: 0; padding: 7px 12px; }
.bib-campo-folio { width: 170px; margin: 0; padding: 5px 10px; }
.bib-seg { display: inline-flex; background: var(--chip-claro); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.bib-seg-b { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.bib-seg-b.activo { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-1); }
.bib-boton { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.bib-boton .bi { width: 14px; height: 14px; }
.bib-boton-usar { border-color: var(--teal); color: var(--teal-oscuro); }
.bib-link { color: var(--teal-oscuro); font-weight: 700; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }

.bib-mats { display: flex; flex-direction: column; gap: 6px; }
.bib-mat { border: 1px solid var(--borde-suave); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.bib-mat.cotiza { border-color: color-mix(in srgb, var(--teal) 45%, var(--borde)); background: color-mix(in srgb, var(--teal-bg) 55%, transparent); }
.bib-mat-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bib-mat-l1 input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.bib-sap { flex: 0 0 auto; font-size: 13px; }
.bib-mat-desc { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.bib-mat-l2 { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px 24px; min-width: 0; }
.bib-prod .con3-sub, .bib-res-ofrecido .con3-sub { white-space: normal; }
.bib-mat-ft { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }

/* El texto pide al menos 200 px; si no caben los botones al lado, bajan a su propia línea. */
.bib-ft { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; padding: 6px 0; min-width: 0; }
.bib-ft + .bib-ft { border-top: 1px solid var(--borde-panel); }
.bib-ft-icono {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--tipo); background: color-mix(in srgb, var(--tipo) 12%, var(--blanco));
}
.bib-ft-icono .bi { width: 18px; height: 18px; }
.bib-ft-txt { flex: 1 1 200px; min-width: 0; }
.bib-ft-titulo { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; color: var(--tinta); }
.bib-ft-desc { font-size: 12.5px; color: var(--tinta-2); overflow-wrap: anywhere; }
.bib-ft-txt .con3-sub { white-space: normal; }
.bib-ft-acciones { flex: 0 1 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.bib-extra { display: inline-flex; align-items: center; gap: 8px; }
.bib-ft-vieja { opacity: .72; }
.bib-ft-grande { background: var(--blanco); border-radius: 14px; padding: 10px 14px; box-shadow: var(--sombra-1); }
.bib-ft-grande + .bib-ft-grande { border-top: 0; }
.bib-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bib-barra-vista { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bib-versiones { margin: -4px 0 4px 44px; padding: 2px 12px; border-left: 2px solid var(--borde); }

.bib-selector { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--chip-claro-2); }
.bib-selector .entrada-nota { background: var(--blanco); margin-top: 4px; }
.bib-opcion { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--tinta); }
.bib-opcion:hover, .bib-opcion:focus-visible { background: var(--blanco); }
.bib-opcion .con3-sub { white-space: normal; }
.bib-resultados-prod { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }

.bib-agregar { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--chip-claro-2); }
.bib-agregar .entrada-nota, .bib-agregar .area-nota { margin: 0; background: var(--blanco); }
.bib-area { min-height: 72px; }
.bib-agregar-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bib-aviso {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2);
  padding: 6px 10px; border-radius: 10px; background: var(--chip-claro);
}
.bib-aviso-ambar { font-size: 12.5px; color: var(--ambar-texto); margin-top: 4px; }
.bib-soltar { outline: 2px dashed var(--teal); outline-offset: -4px; }

/* El modal de subida */
.bib-modal { max-width: 640px; }
.bib-modal .con3-sub { white-space: normal; }
.bib-zona {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 74px; padding: 14px;
  border: 1.5px dashed var(--borde); border-radius: 14px; cursor: pointer; color: var(--gris); font-size: 13px; overflow-wrap: anywhere;
}
.bib-zona input[type="file"] { display: none; }
.bib-zona:hover { border-color: var(--teal); }
.bib-zona:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
.bib-zona.lista { border-style: solid; border-color: var(--teal); color: var(--tinta); background: color-mix(in srgb, var(--teal-bg) 50%, transparent); }
.bib-variantes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 4px; }
.bib-variante { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.bib-variante input { accent-color: var(--teal); }
.bib-previa { background: var(--chip-claro-2); border-radius: 12px; padding: 10px 12px; }
.bib-previa .modal-rotulo { margin-bottom: 4px; }
.bib-previa .con3-sub { white-space: normal; }
.bib-previa-nombre { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; color: var(--tinta); }
.bib-para { font-size: 13px; margin-top: 8px; }

/* Los resultados del buscador de arriba */
.bib-res { display: flex; flex-direction: column; }
.bib-borde { background: var(--teal); }
.bib-res-fila .resultado-datos { min-width: 0; flex: 1 1 auto; }
.bib-res-fila .resultado-titulo { white-space: normal; overflow-wrap: anywhere; }
.bib-res-lic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.bib-res-lic .bi { width: 13px; height: 13px; flex: 0 0 auto; }

/* Un invitado solo a proyectos también ve la Biblioteca técnica en el menú */
body.solo-proyectos .menu-items .menu-item#nav-biblioteca { display: flex !important; }
body.solo-proyectos #vista-biblioteca .buscador { display: flex !important; }

@media (max-width: 760px) {
  .bib-ft { flex-wrap: wrap; }
  .bib-ft-acciones { width: 100%; justify-content: flex-start; padding-left: 44px; }
  .bib-mat-l2 { margin-left: 0; }
  .bib-campo-chico, .bib-campo-folio { max-width: none; width: 100%; }
  .bib-versiones { margin-left: 12px; }
}
/* v3zc (30-10): «visto en Ariba» junto a la descripción del material */
.bib-mat-ariba { margin-left: 4px; font-size: 11.5px; vertical-align: 1px; user-select: none; -webkit-user-select: none; }
/* v3zd (30-10): un hilo ligado a una importación o SC del M7 («Datos del caso › Ligado a» y la ventana para ligar) */
.vinc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.vinc-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.vinc-chip-enlace { color: var(--teal-oscuro, var(--tinta)); font-weight: 700; text-decoration: none; }
.vinc-chip-enlace:hover { text-decoration: underline; }
.vinc-chip-borrado { background: var(--chip-claro-2); }
.vinc-chip-borrado .vinc-chip-enlace { color: var(--gris); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.vinc-quitar { border: 0; background: transparent; color: var(--gris); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; line-height: 0; }
.vinc-quitar:hover { color: var(--rojo-texto, var(--tinta)); background: var(--rojo-bg, transparent); }
.vinc-quitar .bi { width: 11px; height: 11px; }
.vinc-agregar { display: inline-flex; align-items: center; gap: 5px; }
.vinc-agregar .bi { width: 12px; height: 12px; }
.vinc-texto { font-size: 13px; color: var(--gris); line-height: 1.5; margin-top: 4px; }
.vinc-asunto { font-size: 13px; font-weight: 700; color: var(--tinta); margin-top: 8px; overflow-wrap: anywhere; }
.vinc-buscar { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: 14px; }
.vinc-buscar:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.vinc-lista { display: flex; flex-direction: column; gap: 0; }
.vinc-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); min-width: 0; }
.vinc-item:first-of-type { border-top: 0; }
.vinc-item-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vinc-item-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--tinta); min-width: 0; }
.vinc-item-l2 { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.vinc-asunto-hilo { font-weight: 700; overflow-wrap: anywhere; }
.vinc-ligar { flex: 0 0 auto; }
.vinc-item-acc { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .vinc-item { flex-wrap: wrap; }
  .vinc-ligar { width: 100%; justify-content: center; }
  .vinc-item-acc { width: 100%; }
  .vinc-item-acc .vinc-ligar { flex: 1 1 auto; width: auto; }
}

/* 02-11 (v3zl) · Modo oscuro: los menús que se abren DESDE la barra de abajo («Agregar a», «Volver el día»)
   heredaban la paleta clara de la barra a medias (fondo blanco con el resaltado oscuro: la fila elegida
   desaparecía). Vuelven a la paleta oscura completa. Y la lista «Estado inicial» deja de salir blanca. */
html[data-tema="oscuro"] :is(.sel-barra, .esp3-barra, .con3-lote) :is(.sel-menu, .sel-menu-volver) {
  --blanco: #161F29; --tinta: #E6ECF2; --tinta-2: #C2CDD8; --crema: #0E141B; --chip-claro: #1D2733; --chip-claro-2: #1D2733;
  --borde: #2A3644; --borde-suave: #243040; --borde-panel: #212C38; --gris: #9AA7B4; --gris-2: #8794A1; --gris-3: #7F8C99;
  --navy: #E3EAF1; --navy-2: #C8D3DE; --navy-3: #AEBBC8; --navy-hielo: #172636;
  background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde);
}
html[data-tema="oscuro"] .sel-barra-select select { background: #1F3044; color: #FFFFFF; border: 1px solid #2E3B4A; }
html[data-tema="oscuro"] .sel-barra-select select option { background: #161F29; color: #E6ECF2; }
html[data-tema="oscuro"] .sel-barra-select select option:disabled { color: #8794A1; }