/* ============================================================
   Panel de Accounts — Opus
   Sistema «Papel operativo» (docs/diseno.md, 25-08-2026).
   Claro-primero: papel gris frío, tarjetas blancas con sombra
   real, Plus Jakarta Sans, y una sola pieza de identidad: la
   barra lateral azul marino, constante en los dos temas.
   El oscuro es el override, no al revés.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html, body { margin:0; padding:0; background:#07130D; }
html[data-tema="oscuro"], html[data-tema="oscuro"] body { background:#07130D; }
html[data-tema="oscuro"] body { color:#EAF2EC; }

/* ── Los dos temas ─────────────────────────────────────────────────────────
   `--velo` y `--sombra` permiten el giro: todo el panel está escrito con
   velos —`rgba(var(--velo),.06)` para un borde, una píldora, una fila—.
   En claro el velo es tinta; en oscuro, blanco. */
.pa, .ov {
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M16 15l-4 4-4-4'/%3E%3C/svg%3E");
  --velo:13,31,23; --sombra:10,25,18;
  --bg:#EAF2EC; --bg2:#F6FAF7; --card:#FFFFFF; --card2:#EFF6F1;
  --line:rgba(var(--velo), .08); --line2:rgba(var(--velo), .16);
  --tx:#0F1F18; --soft:#43584C; --faint:#576B5F;
  --vio:#0C7F57; --vio2:#096142;
  --ok:#0E8A62; --amber:#A16207; --pendiente:#EAB308; --risk:#D9303E; --grey:#64748B;
  --sh1:0 1px 2px rgba(10,25,18,.05), 0 2px 8px -2px rgba(10,25,18,.06);
  --sh2:0 4px 10px -2px rgba(10,25,18,.08), 0 16px 32px -12px rgba(10,25,18,.16);
  --sh3:0 24px 60px -16px rgba(10,25,18,.28);
  --r:16px;
}
[data-tema="oscuro"] .pa, [data-tema="oscuro"] .ov {
  --velo:255,255,255; --sombra:0,0,0;
  --bg:#0E1511; --bg2:#121A15; --card:#1A251E; --card2:#202E25;
  --line:rgba(var(--velo), .09); --line2:rgba(var(--velo), .17);
  --tx:#ECF3EE; --soft:#ABBFB2; --faint:#95A99C;
  --vio:#0C7F57; --vio2:#63DDAD;
  --ok:#3DDC97; --amber:#F2C14E; --pendiente:#FACC15; --risk:#FF7A8A; --grey:#7D8AA6;
  --sh1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px -2px rgba(0,0,0,.3);
  --sh2:0 10px 26px -8px rgba(0,0,0,.5);
  --sh3:0 30px 70px -18px rgba(0,0,0,.6);
}

.pa *, .ov * { box-sizing:border-box; margin:0; }
/* El marco: el verde-negro de la barra envuelve la app entera —igual en los
   dos temas— y el contenido flota dentro como una hoja. El scroll es de la
   hoja: el marco no se mueve nunca. */
.pa {
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; color:var(--tx);
  background:
    radial-gradient(420px 300px at 15% -80px, rgba(34,197,132,.24), transparent 62%),
    radial-gradient(360px 280px at -60px 105%, rgba(23,143,96,.20), transparent 60%),
    linear-gradient(180deg,#0D2118 0%,#07130D 100%);
  height:100vh; overflow:hidden; display:flex; -webkit-font-smoothing:antialiased;
}
/* Los ajustes de todo botón, en `:where()` para que no pesen. */
.pa :where(button), .ov :where(button) { font-family:inherit; font-size:inherit; cursor:pointer; color:inherit; }
.pa input, .pa textarea, .pa select, .ov input {
  font-family:inherit; font-size:15px; color:var(--tx); background:var(--card);
  border:1px solid var(--line2); border-radius:10px; padding:10px 13px; width:100%; }
.pa input::placeholder, .pa textarea::placeholder { color:var(--faint); }
.pa textarea { resize:vertical; line-height:1.55; }
.pa :focus-visible, .ov :focus-visible { outline:2px solid var(--vio); outline-offset:2px; }
.pa svg { width:18px; height:18px; }

/* ── La barra lateral ──────────────────────────────────────────────────────
   Azul marino SIEMPRE: es la pieza de identidad de Opus y no gira con el
   tema. Dentro de ella los tokens son propios (velo blanco), así el resto de
   reglas —hover, líneas, focos— funcionan sin tocarlas. */
.rail {
  --velo:255,255,255; --sombra:2,14,9;
  --tx:#F2FBF6; --soft:rgba(228,248,238,.85); --faint:rgba(206,235,220,.74);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  width:228px; flex:0 0 228px; color:var(--tx);
  background:transparent;
  padding:18px 0 14px 12px; display:flex; flex-direction:column; gap:2px;
  position:relative; height:100vh;
  transition:width .24s ease, flex-basis .24s ease, padding .24s ease;
}
@media (prefers-reduced-motion:reduce){ .rail{transition:none} }

/* Plegado: sólo iconos. Las etiquetas no se esconden con display —eso corta la
   animación a saco— sino con ancho y opacidad, y el botón de plegar es el
   mismo que despliega. */
.rail.plegado { width:66px; flex:0 0 66px; padding-left:8px; }
.rail.plegado .grupo { visibility:hidden; height:0; margin:0; padding:0; }
.rail.plegado :is(.brandmark .wm, .brandmark .chev, .ico span, .temabtn span,
  .plegarbtn span, .rail .yo .yo-t), .rail.plegado .yo .yo-t { display:none; }
.rail.plegado :is(.brandmark, .ico) { width:100%; margin-left:0; margin-right:0;
  justify-content:center; gap:0; }
.rail.plegado .pie { flex-direction:column; align-items:center; gap:4px; margin-right:0; }
.rail.plegado .pie-hueco { display:none; }


/* El plegado, en el pie: la fila de controles pequeños (tema + plegar),
   ordenada, con la cuenta debajo. En la costura molestaba. */
.rail { overflow:visible; }
.plegarbtn svg { transition:transform .24s ease; }
.rail.plegado .plegarbtn svg { transform:rotate(180deg); }
.plegarbtn span { display:none; }
.rail.plegado .ico svg { width:22px; height:22px; }
.rail.plegado .plegarbtn svg { width:20px; height:20px; }
.rail.plegado .ico { padding-top:12px; padding-bottom:12px; }
.rail.plegado .yo .av { width:34px; height:34px; }

/* La marca no es un adorno: es la puerta a las otras apps de la suite. */
.brandmark { display:flex; align-items:center; gap:10px; width:calc(100% - 12px); padding:7px 8px; margin-bottom:16px;
  border:0; border-radius:11px; background:transparent; cursor:pointer; color:var(--tx);
  transition:background .15s; text-align:left; }
.brandmark img { width:30px; height:30px; border-radius:9px; display:block; flex:none;
  box-shadow:0 3px 10px rgba(0,0,0,.35); }
.brandmark .wm { font-size:16px; font-weight:700; letter-spacing:-.015em; flex:1; min-width:0; }
.brandmark .chev { width:14px; height:14px; flex:none; opacity:.5;
  background:currentColor; -webkit-mask:var(--chev) center/14px no-repeat; mask:var(--chev) center/14px no-repeat; }
.brandmark:hover { background:rgba(255,255,255,.08); }
.brandmark:hover .chev { opacity:.85; }
.brandmark:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* El nombre de la sección: lo que separa una lista de botones de un menú. */
.rail .grupo { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:700; padding:0 12px; margin:2px 0 7px; }

.ico { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:12px 0 0 12px;
  border:0; background:transparent; color:var(--soft); font-size:13.5px; font-weight:600;
  position:relative; transition:background .15s, color .15s; text-align:left; cursor:pointer; }
.ico svg { width:17px; height:17px; flex:none; }
.ico:hover { background:rgba(255,255,255,.08); color:var(--tx); }
.ico[aria-current="true"] { color:var(--hoja-tx, #096142); background:var(--hoja, #F2F6F3); }
.ico[aria-current="true"]:before, .ico[aria-current="true"]:after {
  content:''; position:absolute; right:0; width:14px; height:14px; pointer-events:none; }
.ico[aria-current="true"]:before { top:-14px;
  background:radial-gradient(circle 14px at 0 0, transparent 13.5px, var(--hoja, #F2F6F3) 14px); }
.ico[aria-current="true"]:after { bottom:-14px;
  background:radial-gradient(circle 14px at 0 100%, transparent 13.5px, var(--hoja, #F2F6F3) 14px); }
.ico:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* El color de la hoja, visto desde el rail: es el mismo --bg del panel, pero
   el rail tiene sus propios tokens y hay que dárselo con otro nombre. */
.rail { --hoja:#EAF2EC; --hoja-tx:#096142; }
[data-tema="oscuro"] .rail { --hoja:#0E1511; --hoja-tx:#63DDAD; }

/* El pie unificado de la suite: una fila avatar · plegar · soporte ·
   ajustes · tema. La misma en SmartHub, Opus y Finanzas. */
.rail .pie { margin-top:auto; padding-top:10px; margin-right:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:2px; }
.pie-hueco { flex:1; }
.piebtn { width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  color:var(--soft); flex:none; transition:background .15s, color .15s; }
.piebtn:hover { background:rgba(255,255,255,.08); color:var(--tx); }
.piebtn svg { width:16px; height:16px; }
.piebtn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.temapill { display:flex; align-items:center; flex:none; gap:0;
  border:1px solid var(--line2); border-radius:999px; padding:2px;
  background:rgba(255,255,255,.05); }
.temapill button { width:24px; height:20px; border:0; border-radius:999px; background:transparent;
  color:var(--faint); display:grid; place-items:center; cursor:pointer;
  transition:background .15s, color .15s; padding:0; }
.temapill button svg { width:12px; height:12px; }
.temapill button.on { background:rgba(255,255,255,.16); color:var(--tx); }
.temapill button:focus-visible { outline:2px solid #fff; outline-offset:1px; }
/* El mismo control que en SmartHub: un icono suelto en el pie —sol en oscuro,
   luna en claro— sin etiqueta. Quien lo aprende en una app lo sabe en las dos. */
.temabtn { width:32px; height:32px; border:0; border-radius:9px; background:transparent;
  color:var(--soft); cursor:pointer; display:grid; place-items:center; flex:none;
  transition:background .15s, color .15s; }
.temabtn svg { width:17px; height:17px; }
.temabtn:hover { background:rgba(255,255,255,.08); color:var(--tx); }
.temabtn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* La cuenta, al fondo del rail. */
.rail .yo { width:auto; padding:3px; border-radius:999px; border:0; background:none;
  display:flex; align-items:center; flex:none; cursor:pointer; transition:background .15s; }
.rail .yo:hover { background:rgba(255,255,255,.08); }
.rail .yo:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.rail .yo .av { width:30px; height:30px; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.16); }
.rail .yo .yo-t { min-width:0; flex:1; display:flex; flex-direction:column; }
.rail .yo .n { font-size:13px; font-weight:700; color:var(--tx); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail .yo .r { font-size:11px; color:var(--faint); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* El conmutador de la suite. Mismo panel en SmartHub, Opus y Finanzas. */
.menu-suite { position:fixed; left:14px; top:64px; z-index:90; width:292px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:7px; box-shadow:var(--sh3); }
.menu-suite h6 { margin:5px 8px 7px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); font-weight:700; }
.menu-suite a, .menu-suite span.act { display:flex; gap:10px; align-items:center; padding:8px;
  border-radius:10px; text-decoration:none; color:var(--tx); }
.menu-suite a:hover { background:rgba(var(--velo), .05); }
.menu-suite span.act { background:rgba(var(--velo), .04); cursor:default; }
.menu-suite img { width:30px; height:30px; border-radius:9px; flex:none; }
.menu-suite a > div, .menu-suite span.act > div { flex:1; min-width:0; }
.menu-suite .t { font-size:13.5px; font-weight:700; line-height:1.25; }
.menu-suite .d { font-size:11.5px; line-height:1.3;
  color:color-mix(in oklab, currentColor 58%, transparent); }
.menu-suite .punto { margin-left:auto; flex:none; width:13px; height:13px; background:currentColor; opacity:.55;
  -webkit-mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E");
          mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E"); }
.menu-suite .fuera { margin-left:auto; flex:none; width:12px; height:12px; opacity:0; transition:opacity .15s;
  background:currentColor; color:var(--faint);
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
          mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.menu-suite a:hover .fuera { opacity:.75; }
.menu-suite .t, .menu-suite .d { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pa:has(.rail.plegado) .menu-suite { left:76px; top:14px; }
.pa:has(.rail.plegado) .menu-yo { left:76px; }
@media (max-width:760px){ .menu-suite { left:12px; top:auto; bottom:76px; } }

.menu-yo { position:fixed; left:14px; bottom:76px; z-index:90; min-width:232px; background:var(--card);
  border:1px solid var(--line); border-radius:13px; padding:12px 14px; box-shadow:var(--sh3); }
.menu-yo .n { font-size:14px; font-weight:700; }
.menu-yo .r { font-size:12.5px; color:var(--faint); margin-top:2px; }
.menu-yo button { margin-top:11px; width:100%; }

/* ── Arriba ────────────────────────────────────────────────────────────────*/
.main { flex:1; min-width:0; margin:10px 10px 10px 0; border-radius:20px;
  background:var(--bg); overflow-y:auto; overscroll-behavior:contain; position:relative; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:13px 28px;
  background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.cmdk { flex:1; max-width:380px; display:flex; align-items:center; gap:9px; background:var(--card);
  border:1px solid var(--line); border-radius:11px; padding:9px 13px; color:var(--faint);
  font-size:14px; box-shadow:var(--sh1); }
.cmdk:hover { border-color:var(--line2); color:var(--soft); }
.kbd { margin-left:auto; font-size:11px; border:1px solid var(--line2); border-radius:6px; padding:1px 6px; }
.spacer { flex:1; }
.who { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--soft); }
.av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#0C7F57,#31B583); flex:0 0 auto; }

/* El ancho lo pone la pantalla; el tope evita líneas ilegibles, no huecos. */
.page { padding:26px 32px 120px; max-width:1760px; }

.hd { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.hd h1 { font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.hd p { color:var(--soft); font-size:15px; margin-top:5px; }

/* KPI: número grande, etiqueta debajo, tarjeta blanca. Como en las
   referencias: el dato manda y la caja calla. */
.kpis { display:flex; gap:12px; margin-bottom:20px; }
.kpi { background:var(--card); border:1px solid var(--line); box-shadow:var(--sh1);
  border-radius:14px; padding:13px 18px 11px; min-width:128px; }
.kpi .n { font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.2;
  font-variant-numeric:tabular-nums; }
.kpi .l { font-size:12px; color:var(--faint); font-weight:600; margin-top:1px; }
.kpi.risk .n { color:var(--risk); }
.infobtn { width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--sh1); color:var(--soft); display:grid; place-items:center;
  cursor:pointer; transition:color .15s, border-color .15s; flex:0 0 auto; }
.infobtn svg { width:20px; height:20px; }
.infobtn:hover, .infobtn[aria-expanded="true"] { color:var(--vio2); border-color:var(--line2); }
.info-pop { max-width:420px; padding:16px 18px; }
.info-pop h5 { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vio2); margin-bottom:10px; }
.info-sec + .info-sec { margin-top:11px; }
.info-sec b { display:block; font-size:13px; font-weight:700; margin-bottom:2px; color:var(--tx); }
/* Doble clase a propósito: la regla genérica `.pop p` pinta en rojo (avisos)
   y va después en el fichero — sin esta especificidad, la ayuda salía roja. */
.pop .info-sec p, .info-sec p { font-size:12.5px; color:var(--soft); line-height:1.55; }

/* ── El tablero ────────────────────────────────────────────────────────────
   Tres carriles con cuerpo propio: el carril es un lavado del papel, la
   tarjeta es blanca y con sombra — la figura sobre el fondo, no borde
   contra borde. */
.board { display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding-bottom:8px; }
.col { flex:1 0 300px; min-width:300px; border-radius:16px; padding:12px 11px 8px;
  background:rgba(var(--velo), .035); border:1px solid transparent;
  transition:background .18s, border-color .18s; }

/* Cada columna lleva un lavado de SU color —gris, amarillo, verde—: el
   tablero gana carácter y el estado se lee antes que la etiqueta. La cabecera
   acompaña con el nombre teñido y el contador sobre su tinte. */
.col[data-col="noRev"] { background:color-mix(in oklab, var(--grey) 5%, rgba(var(--velo), .025)); }
.col[data-col="pendiente"] { background:color-mix(in oklab, var(--pendiente) 6%, rgba(var(--velo), .02)); }
.col[data-col="revisado"] { background:color-mix(in oklab, var(--ok) 6%, rgba(var(--velo), .02)); }
.col[data-col="noRev"] .colhead .t { color:var(--soft); }
.col[data-col="pendiente"] .colhead .t { color:var(--amber); }
.col[data-col="revisado"] .colhead .t { color:var(--ok); }
.col[data-col="pendiente"] .colhead .n { background:color-mix(in oklab, var(--pendiente) 14%, var(--card)); border-color:transparent; }
.col[data-col="revisado"] .colhead .n { background:color-mix(in oklab, var(--ok) 12%, var(--card)); border-color:transparent; }
.col.soltar { background:color-mix(in oklab, var(--vio) 10%, transparent);
  border-color:color-mix(in oklab, var(--vio) 38%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--vio) 20%, transparent); }
.colhead { display:flex; align-items:center; gap:8px; padding:3px 6px 12px; }
.colhead .d { width:7px; height:7px; border-radius:50%; }
.colhead .t { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--soft); }
.colhead .n { font-size:11.5px; font-weight:600; color:var(--faint); background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:1px 8px;
  font-variant-numeric:tabular-nums; }
.colempty { font-size:12.5px; color:var(--faint); padding:22px 12px; text-align:center; }

/* ── La tarjeta ────────────────────────────────────────────────────────────
   Todas el mismo papel: en una cartera el color es la señal de alerta, así
   que teñir por cliente gastaba el único recurso que sirve para avisar. */
.tile { --mx:50%; --my:0%; position:relative; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; padding:13px 14px 12px; margin-bottom:10px;
  overflow:hidden; isolation:isolate; background:var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--sh1);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
[data-tema="oscuro"] .tile { background:#000;
  border-color:rgba(47,191,138,.16); }
[data-tema="oscuro"] .tile:hover { border-color:rgba(47,191,138,.38); }
.tile:hover { transform:translateY(-2px); border-color:color-mix(in oklab, var(--vio) 35%, var(--line));
  box-shadow:var(--sh2); }
.tile.arrastrando { border-style:dashed; border-color:var(--line2); background:transparent;
  box-shadow:none; transform:none; }
.tile.arrastrando > * { opacity:.25; }

/* La tarjeta «en la mano»: girada un pelo y con sombra de vuelo. Vive fuera
   de pantalla; el navegador la usa como imagen del arrastre. */
.drag-fantasma { position:fixed; top:-2000px; left:0; margin:0; transform:rotate(2.5deg) scale(1.03);
  background:var(--card); color:var(--tx); border:1px solid color-mix(in oklab, var(--vio) 35%, var(--line));
  border-radius:14px;
  box-shadow:0 18px 40px -10px rgba(var(--sombra), .45), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none; z-index:-1; }
@media (prefers-reduced-motion:reduce){ .tile{transition:none} .tile:hover{transform:none} }

.tile .head { display:flex; align-items:center; gap:11px; position:relative; }
.logo { width:38px; height:38px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; font-size:13.5px; font-weight:800; color:#fff; overflow:hidden; }
.logo.lg { width:52px; height:52px; border-radius:16px; font-size:17px; }
.logo img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
/* La foto manda: es lo que se reconoce antes que ningún nombre. */
.tile .logo { width:48px; height:48px; border-radius:14px;
  box-shadow:0 0 0 1px rgba(var(--velo), .08), 0 3px 8px rgba(var(--sombra), .16); }
.tile .head { gap:13px; }
.tile .nombres { min-width:0; flex:1; }
.nm { font-size:14.5px; font-weight:700; line-height:1.3; display:block; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Una línea y sólo una: la tarjeta es un vistazo. */
.st { font-size:12.5px; color:var(--soft); display:block; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .nm { font-size:14.5px; }
.tile .st { font-size:12.5px; margin-top:3px; }

/* La columna derecha de la tarjeta: la alerta arriba, el estado debajo. */
.tile .lado-der { margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:5px; justify-content:center; }
.tile .lado-der .alertbtn { margin-left:0; }

/* Un cliente parado sigue en la cartera, y se ve sin abrirlo. Gris: es un
   estado, no una alarma. */
.parado { padding:1px 8px; border-radius:6px; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--faint); background:rgba(var(--velo), .07); }

/* La señal de alerta: un punto delante del nombre. Como sólo salta por cosas
   adeudadas, aparece poco, y por eso puede ser discreta. */
.alertbtn { position:relative; z-index:2; width:22px; height:22px; flex:0 0 auto; margin-left:auto;
  border:0; background:none; padding:0; display:grid; place-items:center; cursor:pointer; border-radius:50%; }
.alertbtn:before { content:''; width:8px; height:8px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--amber) 22%, transparent); transition:box-shadow .16s; }
.alertbtn.grave:before { background:var(--risk); box-shadow:0 0 0 3px color-mix(in oklab, var(--risk) 22%, transparent); }
.alertbtn:hover:before { box-shadow:0 0 0 5px color-mix(in oklab, var(--amber) 28%, transparent); }
.alertbtn.grave:hover:before { box-shadow:0 0 0 5px color-mix(in oklab, var(--risk) 28%, transparent); }
.alertbtn svg { display:none; }

/* El popover de la alerta, en la capa de arriba. */
.popcapa { position:fixed; inset:0; z-index:80; }
.pop.flota { position:fixed; right:auto; max-width:min(360px, calc(100vw - 24px)); }
.pop { position:absolute; z-index:5; top:52px; right:12px; left:12px; background:var(--card);
  border:1px solid var(--line); border-radius:13px; padding:13px 14px; text-align:left; cursor:default;
  box-shadow:var(--sh3); animation:pop .16s cubic-bezier(.2,.8,.2,1); }
.pop p { font-size:13.5px; color:var(--risk); }
.pop p + p { margin-top:7px; }
.pop .acts { display:flex; gap:7px; margin-top:11px; }
.pop-aviso + .pop-aviso { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.pop-aviso .btn { margin-top:8px; }
.faces { display:flex; }
.face { width:24px; height:24px; border-radius:50%; border:2px solid var(--card); margin-left:-8px; color:#101E3F;
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; flex:0 0 auto; }
.face:first-child { margin-left:0; }

/* Segmentado: el indicador es la pastilla blanca con sombra, no un relleno
   de color — como en cualquier control iOS/SaaS moderno. */
.seg { position:relative; display:flex; background:rgba(var(--velo), .06); border:1px solid var(--line);
  border-radius:11px; padding:3px; gap:2px; }
.seg .ind { position:absolute; top:3px; bottom:3px; left:3px; border-radius:8px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--sh1); will-change:transform;
  transition:transform .22s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion:reduce){ .seg .ind{transition:none} }
.seg button { position:relative; flex:1; border:0; background:none; padding:6px 12px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--faint); white-space:nowrap; }
.seg button[aria-pressed="true"] { color:var(--tx); }

/* ── Ficha ─────────────────────────────────────────────────────────────────*/
.back { background:none; border:0; padding:0; color:var(--soft); margin-bottom:16px; display:flex; align-items:center; gap:7px; }
.fhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* La foto se cambia pulsándola: al pasar por encima, el velo con la cámara lo
   dice sin rótulos. */
.fotobtn { position:relative; border:0; background:none; padding:0; cursor:pointer; border-radius:16px; }
.fotobtn .velo-foto { position:absolute; inset:0; border-radius:16px; display:grid; place-items:center;
  background:rgba(7,19,13,.55); color:#fff; opacity:0; transition:opacity .15s; }
.fotobtn .velo-foto svg { width:19px; height:19px; }
.fotobtn:hover .velo-foto, .fotobtn:focus-visible .velo-foto { opacity:1; }
.fotobtn:focus-visible { outline:2px solid var(--vio); outline-offset:2px; }
.fhead h1 { font-size:23px; font-weight:800; letter-spacing:-.03em; }
.fhead .sub { font-size:13.5px; color:var(--faint); margin-top:2px; }
/* Estado de revisión. Era un <select> del sistema: en macOS pinta su propio
   desplegable y se come los colores, así que el gris/ámbar/verde no se veía.
   Ahora es un menú propio, con el mismo punto de color en el botón y en cada
   opción. Mismo patrón que las demás píldoras de la cabecera. */
.state-sel-wrap { margin-left:auto; position:relative; }
.state-sel { cursor:pointer; padding-right:8px; }
.state-sel .state-lbl { color:var(--tx); }
.state-dot { width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.state-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:186px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--sh2); padding:4px; display:grid; gap:2px; }
.state-opt { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px;
  border:0; border-radius:7px; background:transparent; cursor:pointer; text-align:left;
  font:600 13.5px/1.2 inherit; color:var(--tx); }
.state-opt:hover { background:rgba(var(--velo), .05); }
.state-opt.sel { background:rgba(var(--velo), .07); }

/* Un solo sistema de píldora en la cabecera: mismo alto, mismo radio.
   La única variación permitida es de color, y sólo la usa el aviso grave. */
.pildora, .acc, .state-sel {
  height:34px; padding:0 12px; border-radius:10px; font-size:13px; font-weight:600;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--sh1);
  display:inline-flex; align-items:center; gap:8px; color:var(--soft); }
.pildora:hover, .acc:hover, .state-sel:hover { border-color:var(--line2); color:var(--tx); }
.acc { color:var(--tx); text-decoration:none; transition:border-color .15s, color .15s; }
.acc svg, .pildora svg { width:15px; height:15px; opacity:.7; }

.pildora.grave { border-color:color-mix(in oklab, var(--risk) 32%, transparent);
  background:color-mix(in oklab, var(--risk) 8%, var(--card)); color:var(--risk); }
.pildora.grave svg { color:var(--risk); opacity:1; }
.pildora .chev { transition:transform .16s; opacity:.7; }
.pildora[aria-expanded="true"] .chev, .state-sel[aria-expanded="true"] .chev { transform:rotate(90deg); }
.state-sel .chev { transition:transform .16s; opacity:.7; }
@media (prefers-reduced-motion:reduce){ .pildora .chev{transition:none} }

.avisos-panel { margin-top:13px; display:grid; gap:9px; }
.aviso { border:1px solid var(--line); border-radius:14px; padding:12px 15px;
  background:var(--card); box-shadow:var(--sh1); }
.aviso.alta { border-color:color-mix(in oklab, var(--risk) 28%, transparent);
  background:color-mix(in oklab, var(--risk) 5%, var(--card)); }
.aviso-cab { display:flex; align-items:flex-start; gap:12px; }
.aviso-tit { flex:1; min-width:0; border:0; background:none; padding:0; text-align:left; display:flex;
  align-items:flex-start; gap:9px; }
.aviso-tit .tt { display:block; font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.35; }
.aviso.alta .aviso-tit .tt { color:var(--risk); }
.aviso-tit .chev { font-size:11px; color:var(--faint); flex:0 0 auto; transition:transform .16s; margin-top:4px; }
.aviso-tit[aria-expanded="true"] .chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .aviso-tit .chev{transition:none} }
.aviso .rs { display:block; font-size:13.5px; color:var(--soft); margin-top:2px; line-height:1.45; }
.aviso .cuantas { display:block; font-size:12.5px; font-weight:600; color:var(--vio2); margin-top:5px; }

/* Los mensajes que provocan el aviso. */
.pruebas-aviso { margin-top:11px; border-top:1px solid var(--line); padding-top:9px; display:grid; gap:2px; }
.pr { display:grid; grid-template-columns:74px minmax(0,1fr); gap:11px; padding:7px 0 7px 9px;
  border-left:1px solid var(--line2); }
.pr.cliente { border-left-color:var(--ok); }
.pr.agencia { border-left-color:var(--grey); }
.pr .cuando { font-size:12.5px; color:var(--faint); line-height:1.45; }
.pr .cuando b { display:block; color:var(--soft); font-weight:600; }
.pr .quien { font-size:12.5px; color:var(--faint); }
.pr .txt { font-size:14px; color:var(--tx); white-space:pre-wrap; margin-top:1px; }
.pr .txt a { color:var(--vio2); }
.pr .mas { font-size:12.5px; color:var(--faint); }
.recorte { font-size:12.5px; color:var(--faint); padding:6px 0 6px 11px; }
.porque { font-size:14px; color:var(--soft); }

.access { display:flex; gap:7px; margin-top:14px; flex-wrap:wrap; }
.equipo { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.miembro { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:30px; padding:4px 12px 4px 4px; font-size:13.5px; }
.miembro .rol { color:var(--faint); font-size:12.5px; }
.miembro.yo { border-color:color-mix(in oklab, var(--vio) 38%, transparent);
  background:color-mix(in oklab, var(--vio) 7%, var(--card)); }

.ajustesbtn { gap:9px; }
.ajustesbtn .faces .face { width:21px; height:21px; font-size:9px; }
.ajustesbtn .chev { font-size:11px; color:var(--faint); transition:transform .16s; }
.ajustesbtn[aria-expanded="true"] .chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .ajustesbtn .chev{transition:none} }
.ajustes-panel { margin-top:11px; border:1px solid var(--line); border-radius:14px; padding:15px 17px;
  background:var(--card); box-shadow:var(--sh1); display:grid; gap:9px; }
.ajustes-panel h4 { font-size:11px; color:var(--faint); font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.ajustes-panel h4 + * { margin-top:-2px; }
.ajustes-panel hr { border:0; border-top:1px solid var(--line); margin:5px 0; }

/* La lista de tareas espejada, encabezando su bloque. */
.lista-linea { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:-4px 0 12px; padding-bottom:11px; border-bottom:1px solid var(--line); font-size:13.5px; }
.lista-linea .que { flex:1; min-width:0; color:var(--faint); }
.lista-linea .que b { color:var(--tx); font-weight:700; }
.lista-linea .empty { font-size:13.5px; }
.lista-linea .btn { flex:none; display:inline-flex; align-items:center; gap:5px; }
.lista-linea .chev { font-size:11px; color:var(--faint); transition:transform .16s; }
.lista-linea .btn[aria-expanded="true"] .chev { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce){ .lista-linea .chev{transition:none} }
.listas-panel { margin:0 0 13px; }
.lista-actual { font-size:14.5px; }
.lista-actual b { font-weight:700; }
.lista-actual .de { color:var(--faint); font-size:12.5px; display:block; margin-top:2px; }
.lista-sel { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.lista-sel select { flex:1; min-width:180px; }

/* La columna de tareas no crece con la pantalla; el hueco es del diario. */
.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,440px); gap:20px;
  margin-top:18px; align-items:start; }
.block { background:var(--bloque-bg, var(--card)); border:1px solid var(--line); box-shadow:var(--sh1);
  border-radius:var(--r); padding:19px 21px; margin-bottom:16px; }
.block h3 { font-size:14.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:13px;
  display:flex; align-items:center; gap:8px; }
.block h3 svg { color:var(--vio2); }
[data-tema="oscuro"] .colhead .d { box-shadow:0 0 8px currentColor; }
.daysep .hoy { background:color-mix(in oklab, var(--vio2) 12%, transparent); border-radius:5px; padding:1px 7px; }
[data-tema="oscuro"] .kpi { border-color:color-mix(in oklab, var(--vio) 16%, var(--line)); }
.block h3 .c { font-size:12.5px; color:var(--faint); font-weight:500; }
.block h3 .grow { flex:1; }

/* composer */
.comp { border:1px solid color-mix(in oklab, var(--vio) 18%, var(--line2)); border-radius:13px;
  padding:11px 13px; background:color-mix(in oklab, var(--vio) 4%, var(--card2));
  display:flex; gap:10px; align-items:flex-start; }
.comp textarea { border:0; background:transparent; padding:2px 0; min-height:26px; font-size:15px; box-shadow:none; }
.comp textarea:focus { outline:none; }
.comp .tools { display:flex; gap:7px; align-items:center; }
.comp-hint { font-size:12.5px; color:var(--faint); margin-top:7px; }
.comp-hint.err { color:var(--risk); }

/* El micro es el único sitio del panel donde hablas y un modelo interpreta, y
   se viste como tal: el degradado del logo de Opus, un filo de luz arriba y
   un destello que BARRE el botón sólo al pasar por encima — el efecto existe
   cuando lo miras, no todo el rato. */
.micbtn { position:relative; height:38px; padding:0 13px 0 11px; border-radius:19px; border:0; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:12px; font-weight:800;
  letter-spacing:.04em; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#2FBF8A 0%,#0C7F57 52%,#095B3F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px -4px rgba(12,127,87,.65); }
.micbtn svg { width:16px; height:16px; }
.micbtn:before { content:''; position:absolute; top:-40%; bottom:-40%; left:-70%; width:45%;
  transform:skewX(-18deg) translateX(0); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.micbtn:hover:before { animation:barrido .8s ease; }
@keyframes barrido { to { transform:skewX(-18deg) translateX(420%); } }
.micbtn:hover { filter:brightness(1.06); }
.micbtn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.micbtn.rec { animation:rec 1.4s ease-in-out infinite; }
@keyframes rec { 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 0 rgba(47,191,138,.55) }
                 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 12px transparent } }
@media (prefers-reduced-motion:reduce){ .micbtn.rec, .micbtn:hover:before{animation:none} }

/* Grabando. Mientras el micro escucha, el hueco de escribir se aparta: no se
   puede teclear y dictar a la vez, así que enseñar los dos confunde. Queda una
   barra con el punto vivo, el tiempo, y las dos únicas salidas. */
.grabbar { display:flex; align-items:center; gap:11px; padding:9px 10px 9px 14px;
  border:1px solid color-mix(in oklab, var(--ok) 34%, transparent); border-radius:14px;
  background:color-mix(in oklab, var(--ok) 7%, var(--card)); box-shadow:var(--sh1); }
.grab-dot { width:9px; height:9px; border-radius:50%; background:var(--risk); flex:none;
  animation:latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%,100%{ opacity:1; box-shadow:0 0 0 0 color-mix(in oklab, var(--risk) 55%, transparent) }
                    50%{ opacity:.55; box-shadow:0 0 0 6px transparent } }
.grab-lbl { font-size:13px; font-weight:700; color:var(--tx); }
.grab-t { font-size:13px; font-weight:600; color:var(--soft); font-variant-numeric:tabular-nums;
  min-width:34px; }
.grab-onda { display:flex; align-items:center; gap:2px; height:26px; flex:1;
  min-width:0; overflow:hidden; margin:0 12px; justify-content:center; }
.grab-onda i { width:3px; height:5px; flex:none; border-radius:3px;
  background:linear-gradient(180deg,#2FBF8A 0%,#0C7F57 55%,#095B3F 100%);
  box-shadow:0 0 6px rgba(47,191,138,.5); }  50%{ height:12px; opacity:.95 } }
.grab-onda i { width:3px; flex:none; border-radius:2px;
  background:color-mix(in oklab, var(--ok) 55%, transparent);
  animation:onda 1.1s ease-in-out infinite; }
.grab-onda i:nth-child(6n+1){ animation-delay:0s }  .grab-onda i:nth-child(6n+2){ animation-delay:.14s }
.grab-onda i:nth-child(6n+3){ animation-delay:.28s }.grab-onda i:nth-child(6n+4){ animation-delay:.42s }
.grab-onda i:nth-child(6n+5){ animation-delay:.56s }.grab-onda i:nth-child(6n){ animation-delay:.7s }
@keyframes onda { 0%,100%{ height:5px } 50%{ height:18px } }
.grab-x { width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--soft); cursor:pointer; display:grid; place-items:center; flex:none; }
.grab-x:hover { color:var(--risk); border-color:color-mix(in oklab, var(--risk) 40%, transparent); }
.grab-x svg { width:15px; height:15px; }
.grab-ok { height:34px; padding:0 13px; border-radius:10px; border:0; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:12.5px; font-weight:700;
  background:linear-gradient(135deg,#2FBF8A 0%,#0C7F57 52%,#095B3F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(12,127,87,.6); }
.grab-ok:hover { filter:brightness(1.06); }
.grab-ok svg { width:13px; height:13px; }
@media (prefers-reduced-motion:reduce){ .grab-dot, .grab-onda i { animation:none } }
@media (max-width:640px){ .grab-onda, .grab-ok span { display:none } }

/* propuesta del agente */
/* v2: la propuesta pesaba más que la frase que la origina. Se estrecha el
   marco, la etiqueta pasa a ser un renglón y los campos dejan de ser un
   formulario con columnas anchas. Sigue siendo editable, sólo ocupa menos. */
.prop { border:1px solid color-mix(in oklab, var(--vio) 26%, transparent);
  background:color-mix(in oklab, var(--vio) 5%, var(--card));
  border-radius:12px; padding:10px 12px; margin-top:9px; }
.prop .k { font-size:11.5px; font-weight:700; color:var(--vio2); display:flex; align-items:center;
  gap:6px; margin-bottom:7px; }
.prop .k svg { width:13px; height:13px; }
.prop .actions { margin-top:9px; }
.prop .actions .btn { height:30px; padding:0 12px; font-size:12.5px; }
.prop .dicho { font-size:13.5px; color:var(--soft); font-style:italic; margin-bottom:10px; }
.ruta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13.5px; color:var(--soft);
  background:rgba(var(--velo), .05); border-radius:10px; padding:8px 11px; margin-bottom:11px; }
.ruta b { color:var(--tx); font-weight:600; }
.ruta .sep { color:var(--faint); }
.campos { display:grid; gap:6px; }
.campo { display:grid; grid-template-columns:92px minmax(0,1fr); gap:9px; align-items:center; }
.campo label { font-size:12px; color:var(--faint); }
.campo input, .campo select, .campo textarea { padding:6px 10px; font-size:13.5px; }
.campo textarea { resize:none; overflow-y:auto; min-height:34px; line-height:1.5; }
#comp-texto { overflow-y:auto; }
.campo select { width:100%; background:var(--card); border:1px solid var(--line2); border-radius:10px; }
.campo input[readonly] { opacity:.75; }
.origen { font-size:11.5px; color:var(--faint); white-space:nowrap; }
.origen.duda { color:var(--amber); }
.avisos { margin-top:11px; font-size:12.5px; color:var(--soft); display:grid; gap:5px;
  background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--vio);
  border-radius:10px; padding:9px 12px; }

/* ── El día ────────────────────────────────────────────────────────────────
   El parte se lee como una ficha: cabecera con etiqueta, párrafo, y «Falta»
   y «Hoy» como campos con su etiqueta. */
.parte { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:0 0 4px;
  background:var(--card); box-shadow:var(--sh1); }
.parte .k { display:flex; align-items:center; gap:10px; padding:10px 15px;
  border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--vio) 5%, transparent); }
.parte .k .et { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vio2); background:color-mix(in oklab, var(--vio) 10%, transparent);
  border-radius:6px; padding:3px 8px; }
.parte .k .titular { font-size:13px; color:var(--soft); margin-left:auto; }
.parte .k .titular + .grow { display:none; }
.parte .k .grow { flex:1; }
.parte .k .btn { margin-left:12px; }
.parte .k .aviso { color:var(--amber); }
.parte > p { font-size:15px; line-height:1.6; margin:0; padding:15px; max-width:72ch; }
.parte .desfase, .parte .fallo { margin:0; padding:11px 15px; border-top:1px solid var(--line); font-size:13px; }
.parte .desfase { color:var(--amber); }
.parte.viejo { border-style:dashed; box-shadow:none; background:var(--card2); }
.parte details { margin-top:9px; padding:0 15px 12px; }
.parte summary { font-size:12.5px; color:var(--faint); cursor:pointer; }
.parte details[open] summary { margin-bottom:7px; }
.parte pre { font-size:14px; color:var(--tx); white-space:pre-wrap; font-family:inherit; }
.parte .empty { padding:13px 15px; }

/* ── Por arreglar ──────────────────────────────────────────────────────────
   La lista viva de la cuenta, UNA vez —no repetida en cada día—. Marcar es
   decirle al agente «esto ya está»: mañana no lo vuelve a listar. */
.temas-card { border:1px solid color-mix(in oklab, var(--vio) 28%, var(--line));
  background:color-mix(in oklab, var(--vio) 8%, var(--card)); border-radius:14px;
  margin:14px 0 4px; box-shadow:var(--sh1); overflow:hidden; }
.temas-card .k { display:flex; align-items:center; gap:9px; padding:10px 15px;
  border-bottom:1px solid color-mix(in oklab, var(--vio) 14%, var(--line)); }
.temas-card .k .et { font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vio2); }
.temas-card .k .c { font-size:11.5px; font-weight:700; color:var(--vio2);
  background:color-mix(in oklab, var(--vio) 12%, transparent); border-radius:20px; padding:0 8px;
  font-variant-numeric:tabular-nums; }
.temas-card .k .grow { flex:1; }
.temas-card .k .de { font-size:12px; color:var(--faint); }
.temas-card ul { margin:0; padding:5px 8px 7px; list-style:none; }
.tema { display:flex; align-items:flex-start; gap:10px; padding:7px 7px; border-radius:9px; }
.tema:hover { background:rgba(var(--velo), .03); }
.tema .tx { font-size:14px; line-height:1.5; padding-top:1px; max-width:68ch; }
.tema-ck { flex:none; width:21px; height:21px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--line2); background:var(--card); padding:0; cursor:pointer;
  display:grid; place-items:center; transition:border-color .15s, background .15s; }
.tema-ck svg { width:12px; height:12px; opacity:0; transition:opacity .15s; color:#fff; }
.tema-ck:hover { border-color:var(--ok); }
.tema-ck:hover svg { opacity:.5; color:var(--ok); }
.tema.hecho .tema-ck { background:var(--ok); border-color:var(--ok); }
.tema.hecho .tema-ck svg { opacity:1; color:#fff; }
.tema.hecho .tx { color:var(--faint); text-decoration:line-through; text-decoration-color:rgba(var(--velo), .35); }

/* ── La cronología de días ─────────────────────────────────────────────────
   Un carril continuo une los días; cada día cuelga de su nodo. Hoy lleva el
   nodo lleno de cobalto; los anteriores, hueco. La fecha se queda pegada
   arriba mientras recorres su día y la empuja la del siguiente. */
.dias { position:relative; margin-top:16px; padding-left:24px; }
.dias:before { content:''; position:absolute; left:5px; top:16px; bottom:12px; width:2px;
  border-radius:2px; background:rgba(var(--velo), .09); }
details.dia { position:relative; }
details.dia + details.dia { margin-top:6px; }
details.dia[open] { margin-bottom:30px; }
details.dia:after { content:''; position:absolute; left:-24px; top:13px; width:8px; height:8px;
  border-radius:50%; background:var(--card); border:2px solid var(--faint); z-index:7; }
details.dia:first-of-type:after { background:var(--vio); border-color:var(--vio);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--vio) 18%, transparent); }
.dias .masdias { margin-top:16px; }

/* La fecha se queda pegada mientras recorres el día — DEBAJO de la topbar,
   que también es pegajosa: con top:0 se metía bajo su cristal y al hacer
   scroll no se sabía en qué día estabas. */
details.dia > summary { position:sticky; top:74px; z-index:7; }
.daysep { display:flex; align-items:baseline; gap:10px;
  padding:10px 15px; margin:26px 0 10px; border-radius:11px;
  background:var(--card); border:1px solid var(--line2); box-shadow:var(--sh1); }
.daysep .f { font-size:14px; font-weight:800; letter-spacing:-.015em; }
.daysep .hoy { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--vio2); }
.daysep .c { margin-left:auto; font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }

/* ── Días plegados ─────────────────────────────────────────────────────────*/
details.dia > summary { list-style:none; cursor:pointer; }
details.dia > summary::-webkit-details-marker { display:none; }
details.dia > summary .daysep { margin-bottom:0; }
details.dia:not([open]) > summary { margin-bottom:10px; }
details.dia:not([open]) > summary:hover .daysep { border-color:var(--line2); }
.ojeada { display:block; padding:8px 15px 11px; font-size:13px; line-height:1.5; color:var(--soft);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
details.dia[open] > summary .daysep { margin-bottom:10px; }
details.dia[open] > summary .ojeada { display:none; }
details.dia > summary .daysep::after { content:'›'; margin-left:8px; color:var(--faint);
  transition:transform .18s; display:inline-block; }
details.dia[open] > summary .daysep::after { transform:rotate(90deg); }

/* ── La cronología ─────────────────────────────────────────────────────────*/
.crono { margin-top:2px; }
.ev { display:grid; grid-template-columns:50px 14px minmax(0,1fr); gap:10px; padding:7px 0; align-items:start; }
.ev .w { font-size:12px; color:var(--faint); padding-top:3px; font-variant-numeric:tabular-nums; }
.ev .m { position:relative; display:flex; justify-content:center; align-self:stretch; padding-top:8px; }
.ev .m:before { content:''; position:absolute; top:0; bottom:-14px; width:1px; background:rgba(var(--velo), .14); }
.ev:last-child .m:before { bottom:auto; height:12px; }
.ev .m i { width:7px; height:7px; border-radius:50%; background:var(--faint); z-index:1; }
.ev .m i.cliente { background:var(--ok); } .ev .m i.interno { background:var(--grey); }
.ev .m i.nota { background:var(--vio); } .ev .m i.tarea { background:var(--amber); }
.ev .t { white-space:pre-line; }
.ev .m i.llamada { background:#58A6D6; box-shadow:0 0 0 3px color-mix(in oklab, #58A6D6 18%, transparent); }
.ev .t { font-size:14.5px; }
.ev .q { font-size:12.5px; color:var(--faint); }
.ev .l { font-size:12.5px; color:var(--vio2); margin-top:4px; }
.ev.mine .t { color:var(--tx); }
.masdias { margin-top:16px; }

/* Autor de una línea: icono del canal sin color de marca; el único color
   permitido aquí es el del lado. */
.ev .q .canal { display:inline-flex; vertical-align:-2px; margin-right:5px; }
.ev .q .canal svg { width:13px; height:13px; opacity:.55; }
.ev .q .autor { color:var(--soft); }
.ev .q .lado { display:inline-block; margin-left:7px; padding:0 6px; border-radius:5px;
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }
.ev .q .lado.cli { color:var(--ok); background:color-mix(in oklab, var(--ok) 14%, transparent); }
.ev .q .lado.team { color:var(--faint); background:rgba(var(--velo), .07); }
.ev .q .prueba { margin-left:8px; }

/* la prueba: los mensajes en bruto detrás de cada línea */
.prueba { border:0; background:none; padding:0; color:var(--vio2); font-size:12.5px; text-decoration:underline;
  text-underline-offset:2px; }
.pruebas { margin-top:7px; border-left:2px solid color-mix(in oklab, var(--vio) 35%, transparent);
  padding-left:11px; display:grid; gap:8px; }
.bruto { font-size:13.5px; color:var(--soft); }
.bruto .cab { display:block; font-size:11.5px; color:var(--faint); }
.bruto .txt { display:block; white-space:pre-wrap; }
.brutos { margin:10px 0 4px; }

.editar-nota { margin-top:6px; background:none; border:0; padding:0; font-size:12px; color:var(--faint);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.editar-nota:hover { color:var(--vio2); }

/* ── Tareas: una tarea, una línea ──────────────────────────────────────────*/
.tgroup { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 4px; }
.tgroup:first-of-type { margin-top:2px; }
.task { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center;
  gap:11px; width:100%; text-align:left; padding:9px 10px; border-radius:10px;
  background:none; border:0; border-bottom:1px solid var(--line); }
.task:last-of-type { border-bottom:0; }
.task:hover { background:rgba(var(--velo), .035); }
.task .tt { font-size:13.5px; font-weight:500; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task .quien { position:relative; display:flex; }
.task .quien .face { margin:0; }
.task .quien .face.sin { background:rgba(var(--velo), .07); color:var(--faint); }
.task .badge { flex:0 0 auto; white-space:nowrap; }
.task .due { font-size:12px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums;
  min-width:86px; text-align:right; }
.task .due.late { color:var(--risk); font-weight:600; }
.task .grow { flex:1; min-width:0; }
.lst { background:rgba(var(--velo), .05); border-radius:6px; padding:1px 7px; }
.due { font-size:13px; color:var(--soft); white-space:nowrap; }
.due.late { color:var(--risk); }

.ficha-persona { position:absolute; left:0; bottom:calc(100% + 8px); z-index:30; display:none;
  min-width:190px; padding:10px 12px; border-radius:11px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--sh3); }
.task .quien:hover .ficha-persona, .task .quien:focus-within .ficha-persona { display:block; }
.ficha-persona b { display:block; font-size:13px; font-weight:700; }
.acc-persona { display:block; margin-top:7px; font-size:12px; color:var(--vio2); cursor:pointer; }
.acc-persona:hover { text-decoration:underline; }

/* Todas las etiquetas miden lo mismo: ocho anchos distintos hacen saltar la
   vista de fila en fila. */
.badge { display:inline-flex; align-items:center; justify-content:center; height:20px;
  min-width:92px; padding:0 9px; border-radius:6px; font-size:11px; font-weight:600; white-space:nowrap; }
.b-pendiente { background:rgba(var(--velo), .07); color:var(--soft); }
.b-curso { background:color-mix(in oklab, var(--vio) 13%, transparent); color:var(--vio2); }
.b-revision { background:color-mix(in oklab, var(--amber) 15%, transparent); color:var(--amber); }
.b-bloqueada { background:color-mix(in oklab, var(--risk) 13%, transparent); color:var(--risk); }
.badge.p-urg  { color:var(--risk); background:color-mix(in oklab, var(--risk) 13%, transparent); }
.badge.p-alta { color:var(--amber); background:color-mix(in oklab, var(--amber) 14%, transparent); }
.badge.p-norm { color:var(--soft); background:rgba(var(--velo), .06); }
.badge.p-baja { color:var(--faint); background:rgba(var(--velo), .04); }

.expand { border:1px solid var(--line2); background:var(--card); border-radius:10px; padding:5px 11px;
  color:var(--soft); font-size:13px; display:flex; align-items:center; gap:6px; }
.expand:hover { color:var(--tx); border-color:var(--soft); }
.ring { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ── Sheet (Ampliar tareas) ────────────────────────────────────────────────*/
.ov { position:fixed; inset:0; z-index:60; background:rgba(9,16,36,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:2.5vh 2vw;
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  color:var(--tx); line-height:1.55; animation:fade .18s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.sheet { width:100%; height:95vh; background:var(--bg2); border:1px solid var(--line); border-radius:20px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sh3);
  animation:pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .ov,.sheet{animation:none} }
.sheet-top { display:flex; align-items:center; gap:13px; padding:15px 20px; border-bottom:1px solid var(--line); }
.sheet-top h2 { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.sheet-top .sub { font-size:12.5px; color:var(--faint); }
.close { margin-left:auto; border:1px solid var(--line2); background:var(--card); color:var(--soft);
  border-radius:10px; padding:7px 12px; font-size:14px; }
.sheet-bar { display:flex; gap:9px; align-items:center; padding:11px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.sheet-bar input { max-width:240px; padding:7px 12px; font-size:14px; }
.sheet-body { flex:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:0; }
.list { overflow-y:auto; border-right:1px solid var(--line); padding:10px 20px 30px; }
.detail { overflow-y:auto; padding:20px 22px 40px; }
.detail h3 { font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.35; }
.kv { display:grid; grid-template-columns:116px minmax(0,1fr); gap:9px 12px; margin-top:15px; font-size:14.5px; align-items:center; }
.kv .k { color:var(--faint); font-size:13px; }
.sec { margin-top:20px; }
.sec h4 { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin-bottom:9px; }
.desc { font-size:15px; color:var(--tx); white-space:pre-line; }
.sub-item { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14.5px; }
.sub-item + .sub-item { border-top:1px solid var(--line); }
.ck { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line2); flex:0 0 auto; }
.ck.on { background:var(--ok); border-color:var(--ok); }
.cmt { padding:10px 0; } .cmt + .cmt { border-top:1px solid var(--line); }
.cmt .m { font-size:12.5px; color:var(--faint); margin-top:3px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { font-size:12px; background:rgba(var(--velo), .05); border-radius:7px; padding:2px 9px; color:var(--soft); }
.pick { background:color-mix(in oklab, var(--vio) 8%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--vio) 28%, transparent); border-radius:11px; }
.pick .task, .pick .task + .task { box-shadow:none; }

/* ── Command palette ───────────────────────────────────────────────────────*/
.cp { position:fixed; inset:0; z-index:70; background:rgba(9,16,36,.5); backdrop-filter:blur(4px);
  display:flex; justify-content:center; padding:12vh 16px; animation:fade .16s ease; }
.cpbox { width:100%; max-width:540px; height:max-content; max-height:64vh; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sh3); animation:pop .2s cubic-bezier(.2,.8,.2,1); }
.cpbox input { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:15px 18px;
  font-size:16px; background:transparent; box-shadow:none; }
.cplist { overflow-y:auto; padding:8px; }
.cpi { display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px; border:0; background:none; border-radius:10px; text-align:left; }
.cpi:hover, .cpi[data-sel="1"] { background:color-mix(in oklab, var(--vio) 10%, transparent); }
.cpi .s { font-size:12.5px; color:var(--faint); }

/* ── Piezas comunes ────────────────────────────────────────────────────────*/
.row { display:flex; gap:12px; align-items:baseline; padding:10px 0; }
.row + .row { border-top:1px solid var(--line); }
.row .grow { flex:1; }
.row .aside { font-size:13.5px; color:var(--soft); white-space:nowrap; }
.row .q { font-size:12.5px; color:var(--faint); margin-top:3px; }
.row[role="button"] { cursor:pointer; }
.row[role="button"]:hover .grow { color:var(--vio2); }
.empty { font-size:14px; color:var(--faint); }

.btn { border:1px solid var(--line2); background:var(--card); box-shadow:var(--sh1);
  border-radius:10px; padding:9px 15px; font-size:14px; font-weight:600; color:var(--tx); }
.btn:hover { border-color:var(--soft); }
.btn.v { background:var(--vio); border-color:transparent; color:#fff;
  box-shadow:0 4px 12px -3px color-mix(in oklab, var(--vio) 50%, transparent); }
.btn.v:hover { background:color-mix(in oklab, var(--vio) 88%, #000); border-color:transparent; }
.btn.ghost { background:transparent; border-color:var(--line); color:var(--soft); box-shadow:none; }
.btn.ghost:hover { color:var(--tx); border-color:var(--line2); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.sm { padding:6px 12px; font-size:13px; border-radius:9px; }
.actions { display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; }
.note { font-size:12.5px; color:var(--faint); margin-top:28px; }
.cargando { font-size:14px; color:var(--faint); padding:22px 0; }
.fallo { font-size:14px; color:var(--risk); border:1px solid color-mix(in oklab, var(--risk) 25%, transparent);
  background:color-mix(in oklab, var(--risk) 6%, var(--card)); border-radius:13px; padding:12px 15px; }

/* El botón de actualizar avisa cuando toca, y calla cuando no. */
.btn.actualizar { display:inline-flex; align-items:center; gap:7px; }
.btn.actualizar .punto { width:7px; height:7px; border-radius:50%; background:var(--amber);
  animation:late 2s ease-out infinite; }
.btn.actualizar.toca { border-color:color-mix(in oklab, var(--amber) 45%, var(--line2)); color:var(--amber); }
@keyframes late { 0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--amber) 55%, transparent)}
                  70%,100%{box-shadow:0 0 0 7px transparent} }
@media (prefers-reduced-motion:reduce){ .btn.actualizar .punto{animation:none} }
.acc-parte { background:none; border:0; color:var(--faint); font-size:12.5px; cursor:pointer;
  padding:0 4px; text-decoration:underline; text-underline-offset:2px; }
.acc-parte:hover { color:var(--tx); }

/* Sesión caducada: se dice una vez, encima de todo. */
.caducada { position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(9,16,36,.6); backdrop-filter:blur(4px); }
.caducada > div { background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sh3); padding:24px 26px; max-width:340px; text-align:center; }
.caducada b { font-size:16px; font-weight:800; }
.caducada p { font-size:13.5px; color:var(--soft); margin:8px 0 16px; }

/* El selector de tema, en el menú de la cuenta. */
.tema-fila { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; font-size:12.5px; color:var(--faint); }
.tema-sw { display:flex; gap:2px; padding:2px; background:rgba(var(--velo),.06); border-radius:9px; }
.tema-sw button { border:0; background:none; color:var(--faint); font-size:11.5px; font-weight:600;
  padding:4px 8px; border-radius:7px; }
.tema-sw button[aria-pressed="true"] { background:var(--card); color:var(--tx); box-shadow:var(--sh1); }

/* ── Corregir a mano, dentro del panel ─────────────────────────────────────*/
.parte.editando { border-color:color-mix(in oklab, var(--vio) 40%, var(--line)); }
.edit-area { width:100%; margin-top:11px; min-height:120px; resize:vertical;
  background:var(--card2); border:1px solid var(--line2); border-radius:11px;
  padding:12px 13px; color:var(--tx); font:inherit; font-size:14.5px; line-height:1.62;
  font-family:inherit; }
.edit-area:focus { outline:2px solid var(--vio); outline-offset:1px; border-color:transparent; }
.parte.editando .edit-area { margin:11px 15px; width:calc(100% - 30px); }
.edit-pie { margin:0; padding:0 15px 13px; font-size:12.5px; color:var(--faint); line-height:1.55; }
.edit-pie b { color:var(--soft); font-weight:700; }
.edit-nota { margin:2px 0 4px; }
.edit-nota .edit-area { min-height:72px; margin-top:0; font-size:14px; }
.edit-bots { display:flex; justify-content:flex-end; gap:7px; margin-top:8px; }

/* ── La columna del diario se desplaza sola ────────────────────────────────*/
@media (min-width: 1100px) {
  .cols { align-items:start; }
  .cols > :last-child { position:sticky; top:68px; max-height:calc(100vh - 84px); overflow-y:auto; }
  .cols > :last-child::-webkit-scrollbar { width:6px; }
}

/* ── Responsive ────────────────────────────────────────────────────────────*/
.tabbar { display:none; }
@media (max-width:1100px){ .cols { grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px){
  .sheet-body { grid-template-columns:minmax(0,1fr); }
  .list { border-right:0; }
  .sheet-body[data-view="detail"] .list { display:none; }
  .sheet-body[data-view="list"] .detail { display:none; }
}
@media (max-width:760px){
  .rail { display:none; }
  .pa { background:var(--bg); height:auto; min-height:100vh; overflow:visible; }
  .main { margin:0; border-radius:0; box-shadow:none; overflow:visible; }
  html, body { background:#EAF2EC; }
  html[data-tema="oscuro"], html[data-tema="oscuro"] body { background:#0E1511; }
  .topbar { padding:11px 15px; } .cmdk { max-width:none; } .who span:first-child { display:none; }
  .page { padding:18px 15px 96px; }
  .hd h1 { font-size:22px; }
  /* En un teléfono no hay ⌘K, y el chip partía el placeholder en dos líneas. */
  .kbd { display:none; }
  .cmdk { white-space:nowrap; }
  .kpis { width:100%; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .kpis::-webkit-scrollbar { display:none; }
  .board { display:block; overflow:visible; } .col { min-width:0; } .colhead { display:none; }
  .fhead h1 { font-size:21px; }
  .state-sel { margin-left:0; width:100%; justify-content:space-between; }
  .aviso-cab { flex-wrap:wrap; }
  .aviso-cab .btn { margin-left:auto; }
  .aviso-tit .chev { display:none; }
  .access .ajustesbtn { flex-basis:100%; }
  .pr { grid-template-columns:minmax(0,1fr); gap:2px; }
  .pr .cuando b { display:inline; }
  .pr .cuando b:after { content:' · '; color:var(--faint); }
  .acc { flex:1 0 calc(50% - 4px); justify-content:center; }
  .campo { grid-template-columns:minmax(0,1fr); gap:4px; }
  .campo .origen { display:none; }
  .ov { padding:0; } .sheet { height:100dvh; border-radius:0; border:0; }
  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter:blur(14px); border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .tabbar button { flex:1; border:0; background:none; display:flex; flex-direction:column; align-items:center;
    gap:3px; padding:5px 0; font-size:10.5px; font-weight:600; color:var(--faint); }
  .tabbar button[aria-current="true"] { color:var(--vio2); }
}

/* ── Avisos dentro de «Por arreglar» ─────────────────────────────────────────
   Fila roja: el punto de la gravedad, el asunto en negrita y su botón de
   siempre. Sin casilla: un aviso no se tacha, se marca arreglado. */
.tema.avr .avr-dot { flex:none; width:8px; height:8px; border-radius:50%; margin-top:8px;
  background:var(--amber); box-shadow:0 0 0 3px color-mix(in oklab, var(--amber) 18%, transparent); }
.tema.avr.grave .avr-dot { background:var(--risk); box-shadow:0 0 0 3px color-mix(in oklab, var(--risk) 18%, transparent); }

/* ── La propuesta de nota, en limpio ─────────────────────────────────────────
   Un solo campo no necesita la rejilla de tres columnas: el campo va a todo
   el ancho, la etiqueta sobra (el título ya lo dice) y el origen baja a una
   línea pequeña debajo, donde no desordena. */
.nota-sola .campo { grid-template-columns:minmax(0,1fr); gap:4px; }
.nota-sola .campo label { display:none; }
.nota-sola .campo .origen { order:3; padding-left:2px; }

/* ── IA en acción: cerebro con pulso neuronal + texto con brillo ──────────
   Aparece bajo el composer mientras la IA transcribe/interpreta/crea.
   Sin librerías (la app no carga nada externo): SVG inline + keyframes.
   Se adapta a claro/oscuro vía var(--ok). */
.comp-ia { display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12.5px; }
.comp-ia svg {
  width:19px; height:19px; flex:none; color:var(--ok);
  filter: drop-shadow(0 0 7px rgba(14,138,98,.5));
  animation: iaPulso 2.2s ease-in-out infinite;
}
.comp-ia svg .ia-base { opacity:.4; }
.comp-ia svg .ia-flujo {
  stroke-dasharray: 12 34;               /* un impulso corto que recorre el contorno */
  animation: iaNeuro 1.6s linear infinite;
}
@keyframes iaNeuro { to { stroke-dashoffset: -46; } }
@keyframes iaPulso { 0%,100% { transform:scale(1); opacity:.92 } 50% { transform:scale(1.14); opacity:1 } }
.ia-txt {
  font-weight:600;
  background: linear-gradient(90deg, var(--ok) 0%, var(--ok) 32%, #8CF5CD 50%, var(--ok) 68%, var(--ok) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: iaBrillo 1.7s linear infinite;
}
@keyframes iaBrillo { from { background-position: 115% 0 } to { background-position: -115% 0 } }
.ia-dots { display:inline-flex; align-items:center; }
.ia-dots i { width:3.5px; height:3.5px; border-radius:50%; background:var(--ok); margin-left:3px; animation: iaDot 1.15s ease-in-out infinite; }
.ia-dots i:nth-child(2) { animation-delay:.15s } .ia-dots i:nth-child(3) { animation-delay:.3s }
@keyframes iaDot { 0%,60%,100% { transform:translateY(0); opacity:.45 } 30% { transform:translateY(-3px); opacity:1 } }
.comp-hint.ok { color:var(--ok); }
@media (prefers-reduced-motion: reduce) {
  .comp-ia svg, .comp-ia svg path, .ia-txt, .ia-dots i { animation:none; }
  .ia-txt { -webkit-text-fill-color: currentColor; color:var(--ok); background:none; }
}

/* ── Caras con foto real ─────────────────────────────────────────────────────
   ClickUp tiene la foto de 23 de los 30: se usa; el resto, iniciales con su
   color de ClickUp. En tareas, un punto más grandes: es donde se miran. */
.face.con-foto { background:var(--card2); overflow:hidden; }
.face img, .av img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.task .quien .face { width:28px; height:28px; font-size:10px; }
.rail .yo .av { overflow:hidden; }

/* ── Ajustes: los enlaces a mano ─────────────────────────────────────────────*/
.link-campos { display:grid; gap:9px; }
.link-campo { display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; align-items:center;
  font-size:13px; color:var(--faint); }
.link-campo input { font-size:13.5px; padding:8px 11px; }

/* ── Uso del diario ──────────────────────────────────────────────────────────
   El mes entero por account: una casilla por día, con su número arriba. El
   finde va lavado —no revisar un domingo no es un incumplimiento— y el aro
   ámbar marca los revisados en frío. */
.uso-nav { display:flex; align-items:center; gap:10px; }
.uso-mes { font-size:14px; font-weight:700; min-width:130px; text-align:center; text-transform:capitalize; }
.uso-tabla { overflow-x:auto; }
.uso-fila { display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line); min-width:720px; }
.uso-fila:last-child { border-bottom:0; }
.uso-fila.uso-cab { padding:2px 6px 8px; border-bottom:1px solid var(--line2); }
.uso-quien { display:flex; align-items:center; gap:10px; width:190px; flex:none; }
.uso-fila .face { width:30px; height:30px; margin:0; font-size:11px; flex:none; }
.uso-nombre { min-width:0; font-size:13.5px; font-weight:600; display:flex; flex-direction:column; line-height:1.25; }
.uso-sub { font-size:11px; color:var(--faint); font-weight:500; }
.uso-serie { display:flex; gap:3px; flex:1; }
.uso-dia { width:16px; flex:none; text-align:center; font-size:10px; color:var(--faint);
  font-variant-numeric:tabular-nums; display:flex; flex-direction:column; line-height:1.2; }
.uso-dia i { font-style:normal; font-size:8px; opacity:.65; }
.uso-dia.finde { opacity:.55; }
.uso-dia.hoydia { color:var(--vio2); font-weight:800; }
.uso-celda { width:16px; height:16px; flex:none; border-radius:4px; background:rgba(var(--velo), .08); position:relative; }
.uso-celda.finde { background:rgba(var(--velo), .035); }
.uso-celda.futuro { background:transparent; border:1px dashed rgba(var(--velo), .1); }
.uso-celda.parte { background:color-mix(in oklab, var(--ok) 40%, transparent); }
.uso-celda.todo { background:var(--ok); }
.uso-celda.frio:after { content:''; position:absolute; inset:-2px; border:2px solid var(--amber); border-radius:6px; }
.uso-hoy { font-size:12.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums;
  white-space:nowrap; width:52px; text-align:right; flex:none; }
.uso-hoy.ok { color:var(--ok); }
.uso-frio { font-size:10.5px; font-weight:700; color:var(--amber); flex:none;
  background:color-mix(in oklab, var(--amber) 14%, transparent); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.uso-leyenda { display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--faint); flex-wrap:wrap; }
.uso-leyenda span { display:inline-flex; align-items:center; gap:6px; }
.uso-leyenda .uso-celda { width:13px; height:13px; }

/* El asentado tras el vuelo: la sombra de la tarjeta levantada se exhala
   hasta la de reposo. Sin tocar el borde: el flash de borde leía raro. */
.tile.aterriza { animation:asentar .55s cubic-bezier(.25,.7,.3,1) both; }
@keyframes asentar {
  from { box-shadow:0 14px 32px -8px rgba(var(--sombra), .35), inset 0 1px 0 rgba(255,255,255,.06); }
  to   { box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--sh1); }
}
@media (prefers-reduced-motion:reduce){ .tile.aterriza{animation:none} }

/* ── Las señales de arriba: anchas, explicadas y desplegables ────────────────*/
.kpis.senales { gap:12px; }
.kpi.senal { flex:1; max-width:340px; display:flex; align-items:center; gap:14px; text-align:left;
  cursor:pointer; border:1px solid var(--line); transition:border-color .15s, transform .15s; }
.kpi.senal:hover { border-color:color-mix(in oklab, var(--vio) 35%, var(--line)); transform:translateY(-1px); }
.kpi.senal.abierta { border-color:color-mix(in oklab, var(--vio) 45%, var(--line)); }
.kpi.senal .n { font-size:26px; }
.kpi.senal.risk .n { color:var(--risk); }
.kpi.senal .tx { min-width:0; flex:1; display:flex; flex-direction:column; }
.kpi.senal .l { font-size:13px; font-weight:700; color:var(--tx); }
.kpi.senal .d { font-size:11.5px; color:var(--faint); font-weight:500; }
.kpi.senal .chev { color:var(--faint); font-size:14px; transition:transform .18s; }
.kpi.senal.abierta .chev { transform:rotate(90deg); }

.senal-pop { position:fixed; z-index:85; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh3);
  animation:senal-abre .18s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
@keyframes senal-abre { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .senal-pop{animation:none} }
.senal-pop-cab { display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:12.5px;
  font-weight:800; border-bottom:1px solid var(--line); }
.senal-pop-cab .c { font-size:11px; color:var(--vio2); background:color-mix(in oklab, var(--vio) 12%, transparent);
  border-radius:20px; padding:0 8px; font-variant-numeric:tabular-nums; }
.senal-pop-lista { overflow-y:auto; padding:5px 6px 7px; }
[data-tema="oscuro"] .senal-pop { background:#0B120E; border-color:rgba(47,191,138,.2); }
.senal-cli { display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:10px; cursor:pointer; }
.senal-cli:hover { background:rgba(var(--velo), .04); }
.senal-cli .logo { width:34px; height:34px; border-radius:11px; }
.senal-cli-tx { min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.3; }
.senal-cli-tx b { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.senal-cli-tx span { font-size:12px; color:var(--faint); }
.senal-accion { flex:none; display:inline-flex; align-items:center; gap:5px; font-size:12px;
  text-decoration:none; }
.senal-accion svg { width:13px; height:13px; }
[data-tema="oscuro"] .kpi.senal { background:#000; border-color:rgba(47,191,138,.16); }
[data-tema="oscuro"] .kpi.senal:hover, [data-tema="oscuro"] .kpi.senal.abierta { border-color:rgba(47,191,138,.4); }
@media (max-width:760px){ .kpis.senales { flex-direction:column; } .kpi.senal { max-width:none; } }

/* ── Afinador de bloques (herramienta de dirección) ──────────────────────────*/
.afinador { display:grid; gap:9px; }
.afinador .fila { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--soft); }
.afinador input[type="color"] { width:44px; height:30px; padding:2px; border-radius:8px; cursor:pointer; }
.afinador input[type="range"] { flex:1; accent-color:var(--vio); }
.afinador .valor { font-family:ui-monospace, monospace; font-size:12px; color:var(--faint);
  background:rgba(var(--velo), .05); border-radius:7px; padding:3px 8px; user-select:all; }

/* ── Modos del composer ──────────────────────────────────────────────────────*/
.modos { display:flex; gap:2px; margin-bottom:7px; background:rgba(var(--velo), .05);
  border:1px solid var(--line); border-radius:10px; padding:3px; width:max-content; }
.modos button { border:0; background:none; padding:5px 12px; border-radius:7px; font-size:12.5px;
  font-weight:600; color:var(--faint); display:inline-flex; align-items:center; gap:6px; }
.modos button svg { width:13px; height:13px; }
.modos button[aria-pressed="true"] { background:var(--card); color:var(--tx); box-shadow:var(--sh1); }
.comp-llamada textarea { min-height:150px; }

/* ── Sub-página de la llamada ────────────────────────────────────────────────*/
.ll-sheet { max-width:980px; margin:0 auto; height:auto; max-height:95vh; }
.ll-ico { width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center;
  color:var(--vio2); background:color-mix(in oklab, var(--vio) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--vio) 22%, transparent); }
.ll-cuerpo { overflow-y:auto; padding:18px 22px 30px; }
.ll-resumen { font-size:15px; line-height:1.6; max-width:75ch; }
.ll-h { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin:20px 0 9px; display:flex; align-items:center; gap:8px; }
.ll-h .c { font-size:11px; color:var(--ok); background:color-mix(in oklab, var(--ok) 12%, transparent);
  border-radius:20px; padding:0 8px; text-transform:none; letter-spacing:0; }
.ll-tarea { display:grid; grid-template-columns:auto minmax(0,2fr) minmax(170px,1fr) 150px auto auto;
  gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); }
.ll-tarea:last-of-type { border-bottom:0; }
.ll-tarea.ok { opacity:.65; }
.ll-tarea .tema-ck { margin:0; }
.ll-tarea .tema-ck.on { background:var(--vio); border-color:var(--vio); }
.ll-tarea .tema-ck.on svg { opacity:1; color:#fff; }
.ll-tarea input, .ll-tarea select { font-size:13.5px; padding:7px 10px; }
.ll-estado { font-size:12px; font-weight:700; color:var(--vio2); white-space:nowrap; min-width:64px; }
.ll-estado .err { color:var(--risk); }
.ll-aviso { grid-column:2 / -1; font-size:12px; color:var(--amber); }
.ll-recaps { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ll-recap { border:1px solid var(--line); border-radius:13px; background:var(--card2); padding:12px 14px; }
.ll-recap .k { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; }
.ll-recap .k .grow { flex:1; }
.ll-recap textarea { font-size:13px; line-height:1.55; background:var(--card); resize:vertical; }
.ll-trans { margin-top:20px; }
.ll-trans summary { font-size:12.5px; color:var(--faint); cursor:pointer; }
.ll-trans pre { margin-top:9px; font-size:13px; line-height:1.6; white-space:pre-wrap;
  font-family:inherit; color:var(--soft); background:rgba(var(--velo), .04);
  border-radius:11px; padding:13px 15px; max-height:340px; overflow-y:auto; }
@media (max-width:820px){
  .ll-recaps { grid-template-columns:1fr; }
  .ll-tarea { grid-template-columns:auto minmax(0,1fr); }
  .ll-tarea .ll-quien, .ll-tarea input[type="date"], .ll-estado, .ll-tarea .ll-quitar { grid-column:2; justify-self:start; }
}

/* ── Adjuntos en la cronología ───────────────────────────────────────────────*/
.adj-mini { display:inline-block; margin-top:8px; border-radius:11px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh1); max-width:280px; }
.adj-mini img { display:block; max-width:100%; max-height:180px; object-fit:cover; }
.adj-card { display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:9px 13px;
  border:1px solid var(--line); border-radius:11px; background:var(--card2); text-decoration:none;
  color:var(--tx); box-shadow:var(--sh1); max-width:340px; transition:border-color .15s; }
.adj-card:hover { border-color:color-mix(in oklab, var(--vio) 35%, var(--line)); }
.adj-ico { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#58A6D6,#2C6FA3); }
.adj-ico svg { width:15px; height:15px; }
.adj-tx { min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.adj-tx b { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adj-tx span { font-size:11.5px; color:var(--faint); }

/* ── La guía de bienvenida (tour de onboarding) ──────────────────────────── */
.tour-capa { position:fixed; inset:0; z-index:75; }
.tour-capa.centrada { display:grid; place-items:center; background:rgba(4,10,7,.62); padding:16px; }
.tour-foco { position:fixed; pointer-events:none; border-radius:14px; transition:all .25s ease;
  border:2px solid var(--vio); box-shadow:0 0 0 9999px rgba(4,10,7,.62); }
.tour-tarjeta { position:fixed; width:min(400px, calc(100vw - 24px)); background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--sh3);
  animation:pop .16s cubic-bezier(.2,.8,.2,1); }
.tour-capa.centrada .tour-tarjeta { position:static; }
.tour-tarjeta h5 { font-size:15px; font-weight:800; color:var(--tx); margin:0 0 6px; }
.tour-tarjeta p { font-size:13.5px; line-height:1.55; color:var(--soft); margin:0 0 14px; }
.tour-pie { display:flex; align-items:center; gap:8px; }
.tour-pie .grow { flex:1; }
.tour-n { font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.tour-saltar { display:block; margin:12px 0 0; padding:0; background:none; border:none;
  font:inherit; font-size:12px; color:var(--faint); text-decoration:underline; cursor:pointer; }
.tour-saltar:hover { color:var(--tx); }
@media (prefers-reduced-motion:reduce){ .tour-foco{transition:none} .tour-tarjeta{animation:none} }
@media (max-width:760px){
  .tour-foco { display:none; }
  .tour-capa, .tour-capa.centrada { display:grid; place-items:end center; background:rgba(4,10,7,.62);
    padding:12px 12px calc(76px + env(safe-area-inset-bottom)); }
  .tour-tarjeta { position:static; width:100%; max-width:400px; }
}

/* ── La ficha flotante de una tarea ──────────────────────────────────────────
   Al pasar por la fila: el nombre entero, estado, responsable, fecha y el
   salto a ClickUp. Con un respiro de retardo para no parpadear al recorrer
   la lista. */
.task { position:relative; }
.task .ficha-tarea { position:fixed; left:var(--ft-x, 0px); top:var(--ft-y, 0px); z-index:60;
  display:flex; flex-direction:column; gap:7px; min-width:250px; max-width:330px;
  padding:12px 14px; border-radius:12px; background:var(--card); text-align:left;
  border:1px solid var(--line); box-shadow:var(--sh3);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease .35s, visibility 0s linear .5s, transform .15s ease .35s; pointer-events:none; }
.task:hover .ficha-tarea { opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition-delay:.35s, .35s, .35s; }
.ficha-tarea b { font-size:13px; font-weight:700; line-height:1.4; white-space:normal; }
.ficha-tarea .ft-fila { display:flex; gap:6px; flex-wrap:wrap; }
.ficha-tarea .ft-dato { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--soft); }
.ficha-tarea .ft-dato.late { color:var(--risk); font-weight:600; }
.ficha-tarea .face { width:20px; height:20px; font-size:8px; }
.ficha-tarea .acc-persona { margin-top:2px; }
@media (hover:none){ .task .ficha-tarea { display:none; } }

/* ── El menú de un adjunto: tres puntitos, Abrir, Eliminar ───────────────────*/
.adj-envuelto { position:relative; display:inline-block; }
.adj-puntos { position:absolute; right:6px; bottom:6px; z-index:5;
  border:0; background:rgba(10,18,14,.72); color:#fff; backdrop-filter:blur(6px);
  width:30px; height:24px; border-radius:12px; cursor:pointer; font-size:16px; line-height:1;
  display:grid; place-items:center; transition:background .15s; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.adj-puntos:hover, .adj-puntos[aria-expanded="true"] { background:rgba(10,18,14,.92); }
.adj-opciones { position:absolute; bottom:34px; right:6px; z-index:40; min-width:130px;
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:11px; box-shadow:var(--sh3); padding:5px; }
.adj-opciones a, .adj-opciones button { border:0; background:none; text-align:left; cursor:pointer;
  font-size:13px; color:var(--tx); text-decoration:none; padding:7px 10px; border-radius:8px; }
.adj-opciones a:hover, .adj-opciones button:hover { background:rgba(var(--velo), .05); }
.adj-opciones button[data-act="adj-borrar"] { color:var(--risk); }

/* El engranaje de la ficha: arriba a la derecha, junto al estado. */
.ficha-gear { margin-left:auto; }
.ficha-gear[aria-expanded="true"] { color:var(--vio2); border-color:color-mix(in oklab, var(--vio) 40%, var(--line)); }
.fhead .state-sel-wrap { margin-left:0; }
.fhead .state-sel { margin-left:0; }

/* ── Página de Ajustes del cliente ──────────────────────────────────────── */
.cfg-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; margin-top: 4px; }
.cfg-grid .block { margin: 0 0 16px; }
.cfg-grid > .block:first-child { grid-column: 1; }
.cfg-grid > .block:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.cfg-grid > .block:nth-child(3) { grid-column: 1; }
@media (max-width: 900px) { .cfg-grid { grid-template-columns: minmax(0, 1fr); } .cfg-grid > .block { grid-column: 1 !important; grid-row: auto !important; } }
.cfg-enlaces { display: flex; flex-direction: column; }
.cfg-enlace { display: grid; grid-template-columns: 22px minmax(120px, 170px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cfg-enlace:last-child { border-bottom: 0; }
.cfg-ico { display: grid; place-items: center; color: var(--vio2); }
.cfg-ico svg { width: 17px; height: 17px; }
.cfg-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-tx b { font-size: 13.5px; }
.cfg-tx span { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-enlace input { width: 100%; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; color: var(--tx); font: inherit; font-size: 12.5px; padding: 7px 9px; }
.cfg-enlace input:focus { outline: none; border-color: var(--vio2); }
@media (max-width: 640px) {
  .cfg-enlace { grid-template-columns: 22px minmax(0, 1fr); }
  .cfg-enlace input { grid-column: 1 / -1; }
}

/* ── Tarjeta de llamada en la cronología ────────────────────────────────── */
.ev-call { display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit; padding:11px 13px; border-radius:12px;
  background:var(--card2); border:1px solid var(--line2);
  transition:background .15s ease, border-color .15s ease; }
.ev-call:hover { border-color:color-mix(in oklab, var(--vio) 45%, transparent); }
.ev-call .ll-ico { width:34px; height:34px; border-radius:10px; }
.ev-call .ll-ico svg { width:16px; height:16px; }
.ev-call-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ev-call-tx b { font-size:13px; }
.ev-call-tx .t { color:var(--soft); }
.ev-call-link { font-size:12.5px; font-weight:650; color:var(--vio2); margin-top:3px; }

/* Temas de la llamada (estilo resumen de reunión) */
.ll-temas { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:6px; max-width:75ch; }
.ll-tema { background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.ll-tema b { font-size:13.5px; display:block; margin-bottom:6px; }
.ll-tema ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.ll-tema li { font-size:13px; color:var(--soft); line-height:1.5; }

/* Filas de tarea de la llamada: notas + quitar */
.ll-tarea .ll-quitar { border:0; background:none; color:var(--faint); font-size:14px; padding:4px 7px; border-radius:8px; }
.ll-tarea .ll-quitar:hover { color:var(--risk); background:color-mix(in oklab, var(--risk) 10%, transparent); }
.ll-tarea .ll-notas { grid-column:2 / -1; resize:none; overflow-y:auto; min-height:30px; padding:6px 10px; font-size:12.5px; line-height:1.5; background:var(--bg2); }
.ll-estado a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }

/* Recap formateado (lectura) */
.ll-rec-view { background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:12px 16px; font-size:13.5px; line-height:1.6; }
.ll-rec-view h5 { font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin:12px 0 4px; color:var(--tx); }
.ll-rec-view h5:first-child { margin-top:0; }
.ll-rec-view p { margin:4px 0; color:var(--soft); }
.ll-rec-view li { list-style:disc; margin-left:18px; color:var(--soft); }


/* ── Selector múltiple de personas (estilo ClickUp) ─────────────────────── */
.pk { position:relative; display:inline-flex; min-width:0; }
.pk-btn { display:flex; align-items:center; gap:5px; max-width:100%; padding:5px 10px; border-radius:10px;
  border:1px solid var(--line2); background:var(--card); font-size:12.5px; }
.pk-btn .face { width:22px; height:22px; font-size:9px; margin:0 -4px 0 0; }
.pk-nombres { margin-left:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-vacio { color:var(--faint); }
.pk-panel { position:absolute; z-index:40; top:calc(100% + 5px); left:0; min-width:230px; max-height:280px; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px; padding:6px; border-radius:12px;
  background:var(--card); border:1px solid var(--line2); box-shadow:var(--sh2); }
.pk-panel.arriba { top:auto; bottom:calc(100% + 5px); }
.pk-p { display:flex; align-items:center; gap:9px; text-align:left; padding:6px 9px; border-radius:9px;
  border:1.5px solid transparent; background:none; font-size:13px; }
.pk-p:hover { background:var(--card2); }
.pk-p.sel { border-color:var(--vio); background:color-mix(in oklab, var(--vio) 7%, transparent); }
.pk-p .face { width:26px; height:26px; font-size:10px; }
.pk-n { display:flex; flex-direction:column; min-width:0; }
.pk-n i { font-style:normal; font-size:11px; color:var(--faint); }
.pk-check { margin-left:auto; color:var(--vio2); opacity:0; font-weight:700; }
.pk-p.sel .pk-check { opacity:1; }
.ll-quien { display:flex; align-items:center; min-width:0; }

/* ── Paralizado / Finalizado plegados al final del tablero ──────────────── */
.board-extra { margin-top:18px; }
.board-extra > summary { list-style:none; cursor:pointer; display:inline-flex; gap:16px; align-items:center;
  position:fixed; bottom:18px; left:254px; z-index:26;
  background:var(--card); box-shadow:var(--sh2); border:1px solid var(--line2);
  border-radius:999px; padding:9px 16px; font-size:13px; color:var(--soft); }
body:has(.rail.plegado) .board-extra > summary { left:92px; }
@media (max-width:920px) { .board-extra > summary { left:24px; } }
.board-extra > summary::-webkit-details-marker { display:none; }
.board-extra > summary:hover { border-color:color-mix(in oklab, var(--vio) 40%, transparent); background:var(--card); }
.board-extra .bx { display:inline-flex; gap:7px; align-items:center; }
.board-extra .bx .d { width:8px; height:8px; border-radius:50%; }
.board-extra .bx b { font-weight:700; }
.board-extra .board { margin-top:12px; }

/* Tareas de la ficha desplegadas on-page: scroll interno, nunca columna infinita */
.tareas-lista.desplegada { max-height:60vh; overflow-y:auto; padding-right:4px; overscroll-behavior:contain; }

/* ── Carteras compartidas (vacaciones) ──────────────────────────────────── */
.cartera-sel { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.cchip { display:inline-flex; gap:7px; align-items:center; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line2); background:var(--card); color:var(--soft); font:inherit;
  font-size:13px; cursor:pointer; }
.cchip.sel { border-color:var(--vio); color:var(--vio2); font-weight:700;
  background:color-mix(in oklab, var(--vio) 8%, var(--card)); }
.cchip.ghost { border-style:dashed; }
.cchip .c { font-size:11px; color:var(--faint); font-weight:400; }
.comp-nota { font-size:12px; color:var(--faint); }
.compartir-sheet { max-width:520px; margin:auto; }
.comp-fila { display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.comp-fila:last-of-type { border-bottom:0; }
.comp-form { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.comp-form select, .comp-form input { padding:8px 10px; font-size:13.5px; }


/* Los <input type=date> siguen el tema: sin esto el calendario nativo sale blanco en oscuro */
.pa input[type="date"], .ov input[type="date"] { color-scheme: light; accent-color: var(--vio); }
[data-tema="oscuro"] .pa input[type="date"], [data-tema="oscuro"] .ov input[type="date"] { color-scheme: dark; }
.pa input[type="date"]::-webkit-calendar-picker-indicator { opacity:.6; cursor:pointer; }
.pa input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity:1; }

/* Bandera de prioridad (estilo ClickUp) */
.prio-flag { display:inline-grid; place-items:center; flex:none; }
.prio-flag svg { width:13px; height:13px; }
.prio-flag.p-urg { color:var(--risk); } .prio-flag.p-alta { color:var(--amber); }
.prio-flag.p-norm { color:#5B8DEF; } .prio-flag.p-baja { color:var(--faint); }
.ll-prio { font-size:12px; padding:6px 8px; width:auto; background:var(--card); border:1px solid var(--line2); border-radius:8px; color:var(--soft); }
.pk-buscar { display:block; width:calc(100% - 16px); margin:8px; padding:7px 10px; font-size:12.5px; }
.pk-sep { display:block; padding:7px 12px 3px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }

/* ── Overview del cliente ───────────────────────────────────────────────── */
.ov-dot { width:8px; height:8px; border-radius:50%; background:var(--line2); flex:none; }
.ov-dot.on { background:var(--ok); }
.overview-panel h4 { margin:0 0 6px; }
.overview-panel h4 + h4, .overview-panel .ov-texto + h4 { margin-top:14px; }
.overview-panel .ov-texto { font-size:13.5px; line-height:1.55; color:var(--soft); max-width:75ch; white-space:pre-line; margin:0; }
.overview-panel .ov-estado-frase { font-size:14.5px; color:var(--tx); font-weight:600; }
.overview-panel textarea { resize:none; overflow-y:auto; font-size:13.5px; margin-bottom:4px; }

/* ── Aviso de administración: clientes sin Account Manager ──────────────── */
.aviso-admin { margin-bottom:14px; border-radius:14px; border:1px solid color-mix(in oklab, var(--amber) 38%, transparent);
  background:color-mix(in oklab, var(--amber) 8%, var(--card)); overflow:hidden; }
.aviso-admin-cab { display:flex; align-items:center; gap:11px; width:100%; padding:12px 15px;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:var(--tx); }
.aviso-admin-cab svg { width:17px; height:17px; color:var(--amber); flex:none; }
.aviso-admin-cab > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; }
.aviso-admin-cab b { font-size:13.5px; }
.aviso-admin-cab .c { font-size:12px; color:var(--soft); }
.aviso-admin.abierto .aviso-admin-cab svg:last-child { transform:rotate(180deg); }
.aviso-admin-lista { padding:2px 15px 14px; display:flex; flex-direction:column; gap:2px; }
.huerfano { display:grid; grid-template-columns:minmax(120px,1.2fr) 150px minmax(0,1.6fr) auto; gap:12px;
  align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px; }
.huerfano .hf-n { font-weight:650; }
.huerfano .hf-m { font-size:12px; color:var(--faint); }
.huerfano .hf-m.vivo { color:var(--amber); font-weight:650; }
.huerfano .hf-o { font-size:12px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px) { .huerfano { grid-template-columns:1fr; gap:3px; } }