/* OnYou · hoja de estilos de la app
   ──────────────────────────────────────────────────────────────────────────
   Vivía dentro de app/index.html. Se separó para poder trabajarla sin abrir un
   archivo de un mega, y para que el navegador la guarde aparte del armazón.

   OJO con url(#id): dentro de una hoja externa, un enlace de solo fragmento se
   resuelve contra la hoja, no contra el documento. Aquí hay uno —el degradado
   de la flecha del recorrido— y NO es un problema porque cada flecha se pinta
   con su propio degradado en un style= en línea, que gana por especificidad.
   Si algún día se agrega otro, hay que comprobarlo. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
:root{
  --navy:#0F2148;--gold:#F5A623; --gold-soft:#FDF1DA; --gold-600:#B87A0E;
  --bg:#F5F2E9;--bg2:#FFFFFF;--bg3:#F1EFE8;
  --text:#1A2440;--text2:#5F5E5A;--text3:#6E6D66; /* D1: 4.6:1 sobre blanco (antes #888780 = 3.6, fallaba WCAG) */
  --border:#E2E0D6;--border2:#D3D1C7;
  --joint:#7F77DD;--joint-ink:#5B52C0; /* morado de tarea conjunta: 6.1:1 sobre blanco */
  --success:#1D9E75;--success-bg:#E1F5EE;
  --warning:#C77F17;--warning-bg:#FAEEDA;
  --danger:#D8453F;--danger-bg:#FCEBEB;
  --info:#378ADD;--info-bg:#E6F1FB;
  --wa:#25D366;--radius:12px;--radius-sm:8px;--tf:.14s ease;
  /* Escala tipográfica (fundamento D1): piso de metadata 11px para legibilidad de campo */
  --fs-xs:11px;--fs-sm:12px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:19px;
  --rail-bg:#0F2148;--rail-icon:#A9B4C9;--rail-active-bg:#F5A623;--rail-active-icon:#0F2148;
  --accent:#F5A623;--accent-text:#0F2148;
  --sect-bg:#F0EEE8;--sect-head:#8A887E;
  --mnav-h:calc(60px + env(safe-area-inset-bottom,0px)); /* alto de la barra inferior móvil */
}
[data-theme="dark"]{
  --navy:#0B1834;--gold:#F7B84B; --gold-soft:rgba(245,166,35,.16); --gold-600:#F5C860;
  --bg:#0B1834;--bg2:#14264D;--bg3:#1B3059;
  --text:#F1EFE8;--text2:#A9B4C9;--text3:#6E7B96;
  --border:#24365E;--border2:#32456E;
  --joint:#7F77DD;--joint-ink:#A9A2F5; /* el morado oscuro daba 2.6:1 sobre el azul noche */
  --success:#3CBE92;--success-bg:#123A30;
  --warning:#F7B84B;--warning-bg:#3D2E0F;
  --danger:#F0736F;--danger-bg:#3A1A1A;
  --info:#5CA3E8;--info-bg:#12294D;
  --wa:#25D366;
  --rail-bg:#0F2148;--rail-icon:#6E7B96;--rail-active-bg:#F7B84B;--rail-active-icon:#0F2148;
  --accent:#F7B84B;--accent-text:#0F2148;
  --sect-bg:#0F2044;--sect-head:#6E7B96;
}
.app{display:flex;height:100vh;overflow:hidden}
.col-books{width:200px;min-width:200px;background:var(--navy);color:#E8ECF3;display:flex;flex-direction:column;overflow:hidden}
/* Las cabeceras de columna comparten altura fija: sus bordes inferiores deben leerse como una sola línea continua */
.col-books .head{display:flex;align-items:center;height:46px;padding:0 .85rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8593AE;border-bottom:1px solid rgba(255,255,255,.08)}
/* La línea separadora ya no la lleva este, sino .urgent-shortcut, que va debajo
   y cierra el grupo de atajos fijos antes de los libros normales. */
.mytasks-shortcut{padding-bottom:.35rem!important}
.mytasks-star{color:var(--gold);font-size:14px;flex-shrink:0}
.mytasks-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--accent-text);font-size:9.5px;font-weight:700;line-height:1;flex-shrink:0}
.book-item{display:flex;align-items:center;gap:8px;padding:.6rem .85rem;cursor:pointer;font-size:13px;border-left:3px solid transparent;transition:background var(--tf)}
.book-item:hover{background:rgba(255,255,255,.06)}
.book-item[draggable]:active,.sect-item[draggable]:active,.tree-page[draggable]:active{cursor:grabbing}
.book-item.active{background:rgba(245,166,35,.14);border-left-color:var(--gold);font-weight:600}
/* Punto de identidad del libro. Círculo de 8px con el material apenas insinuado:
   un gradiente vertical que aclara arriba y hunde abajo menos de lo que se nota,
   más un filo de luz interior. De cerca se ve terminado; de lejos es plano.
   El color sale de --bc, que la fila trae del dato del libro: aquí no se escribe
   ningún color. En reposo baja al 82% para que no pese; el seleccionado sube a
   pleno, pero la selección la siguen marcando la línea dorada y el fondo. */
.book-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bc,currentColor) 88%,#fff) 0%,
    var(--bc,currentColor) 55%,
    color-mix(in srgb,var(--bc,currentColor) 90%,#000) 100%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28),0 .5px 1px rgba(0,0,0,.10);
  opacity:.82;transition:opacity var(--tf)}
/* El aire hasta el nombre lo pone el punto, no el gap de la fila: mover el gap
   separaría también el nombre del contador y de los botones. */
.book-item .book-dot{margin-right:3px}
.book-item:hover .book-dot{opacity:.92}
.book-item.active .book-dot{opacity:1}
.add-book{margin:.6rem .85rem;padding:.45rem;border:1px dashed rgba(255,255,255,.2);border-radius:var(--radius-sm);background:none;color:#8593AE;font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:background var(--tf),color var(--tf),border-color var(--tf)}
.add-book:hover{background:rgba(255,255,255,.06);color:#fff}
.col-sections{width:250px;min-width:250px;background:var(--sect-bg);color:var(--text);display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
#section-list{flex:1;overflow-y:auto;min-height:0}
.collapse-all-btn{background:none;border:1px solid var(--border);border-radius:7px;font-size:10px;padding:.25rem .55rem;cursor:pointer;color:var(--sect-head);white-space:nowrap;font-weight:600;letter-spacing:0;text-transform:none;transition:background var(--tf),color var(--tf)}
.collapse-all-btn:hover{background:var(--bg2);color:var(--text2)}
.col-sections .head{display:flex;align-items:center;height:46px;padding:0 .85rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--sect-head);border-bottom:1px solid var(--border)}
.tree-sect{border-bottom:1px solid var(--border)}
/* Grilla del árbol: la sangría mueve solo el nombre. Progreso y alerta viven en
   columnas fijas, y las acciones (✎ ✕) ocupan una franja reservada igual en todos
   los niveles —antes las secciones llevaban dos botones y las hojas uno, y ese
   desnivel invisible era lo que partía los badges rojos en dos ejes. */
.sect-item{position:relative;--tree-act:48px;padding:.6rem var(--tree-act) .6rem .7rem;cursor:pointer;font-size:12.5px;line-height:1.3;color:var(--text);font-weight:600;display:flex;align-items:center;gap:7px;transition:background var(--tf)}
.sect-item:hover{background:rgba(15,33,72,.04)}
/* Sección abierta: énfasis tipográfico (navy 700) + caret dorado. El nombre en
   dorado sobre el panel claro no pasaba de 2:1 de contraste. */
.sect-item.active .tree-sect-name{color:var(--text);font-weight:700}
.sect-item.active .tree-caret{color:var(--gold)}
.tree-caret{color:var(--navy);flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:4px}
[data-theme="dark"] .tree-caret{color:var(--text)}
.sect-item:hover .tree-caret{background:rgba(0,0,0,.08)}
.tree-sect-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-meta{display:grid;grid-template-columns:36px 20px;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.tree-meta .tree-count,.tree-meta .tree-page-prog{flex-shrink:0;justify-self:end}
.ov-slot{width:20px;display:flex;justify-content:center;flex-shrink:0}
.tree-acts{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px}
.overdue-dot{display:inline-flex!important;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;border-radius:999px;background:var(--danger)!important;color:#fff!important;font-size:9.5px;font-weight:700;line-height:1;flex-shrink:0;box-sizing:border-box}
.overdue-dot.on-dark{box-shadow:0 0 0 1.5px rgba(255,255,255,.15)}
.tools-shell{display:flex;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;max-width:820px;min-height:340px;background:var(--bg2)}
.tools-nav{width:190px;flex-shrink:0;background:var(--bg3);border-right:1px solid var(--border);padding:.5rem;display:flex;flex-direction:column;gap:2px}
.tools-nav-item{display:flex;align-items:center;gap:9px;padding:.55rem .65rem;border-radius:7px;border:none;background:none;cursor:pointer;font-size:12.5px;color:var(--text2);text-align:left;font-weight:500;font-family:inherit;transition:background var(--tf),color var(--tf)}
.tools-nav-item:hover{background:var(--bg2)}
.tools-nav-item.on{background:var(--gold);color:var(--accent-text);font-weight:700}
.tools-nav-ic{display:flex;flex-shrink:0}
.tools-nav-ic svg{width:15px;height:15px}
.tools-content{flex:1;padding:1rem 1.1rem;min-width:0}
.tools-content-head{font-size:13px;font-weight:700;color:var(--text);margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.tools-opt{display:flex;align-items:center;gap:12px;padding:.7rem .3rem;cursor:pointer;border-radius:8px;transition:background var(--tf)}
.tools-opt:hover{background:var(--bg3)}
.tools-opt-ic{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center}
.tools-opt:hover .tools-opt-ic{background:var(--bg2)}
.tools-opt-ic.on{background:var(--gold);color:var(--accent-text)}
.tools-opt-ic svg{width:17px;height:17px}
.tools-opt-title{font-weight:600;font-size:12.5px}
.tools-opt-desc{font-size:10.5px;color:var(--text3);margin-top:1px;line-height:1.35}
.tools-opt-arrow{color:var(--text3);flex-shrink:0;opacity:.4}
.tools-opt:hover .tools-opt-arrow{opacity:1}
.tools-back{background:none;border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem;font-size:12px;cursor:pointer;color:var(--text2);margin-bottom:1rem;font-family:inherit}
.tools-back:hover{background:var(--bg3)}
.tools-pane-full{padding:1rem 1.1rem;flex:1}
.rem-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 1rem}
.rem-chip{display:inline-flex;align-items:center;gap:6px;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;font-size:12px;font-weight:600;color:var(--text2);font-family:inherit;transition:background var(--tf),border-color var(--tf),color var(--tf)}
.rem-chip:hover{border-color:var(--gold)}
.rem-chip.on{background:var(--gold);border-color:var(--gold);color:var(--accent-text)}
.rem-chip-n{font-size:10px;background:rgba(0,0,0,.12);border-radius:9px;padding:0 6px;min-width:16px;text-align:center}
.rem-chip.on .rem-chip-n{background:rgba(0,0,0,.18)}
.mine-chapter .ch-head{background:linear-gradient(90deg,rgba(212,150,30,.08),transparent)}
.notif-photo-btn{flex-shrink:0;width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--success)}
.notif-photo-btn:hover{background:var(--success-bg);border-color:var(--success)}
.notif-photo-btn svg{width:15px;height:15px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gal-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--bg2);transition:transform .1s,box-shadow .12s,border-color .12s}
.gal-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.09);border-color:var(--gold)}
.gal-thumb{aspect-ratio:4/3;background:var(--bg3);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-meta{padding:.6rem .7rem}
.gal-name{font-weight:600;font-size:12.5px;line-height:1.3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-sub{font-size:11px;color:var(--text2);margin-bottom:1px}
.gal-path{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Calendario */
/* Mes */
/* Semana (7 días legibles con colores, como el mes) */
/* Agenda Hoy por horas */
.tree-count{display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--text2);background:var(--border2,#d8d4c8);border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:0 7px;height:16px;line-height:1;flex-shrink:0;font-weight:700;min-width:20px}
.tree-pages{padding:.15rem 0 .3rem}
.tree-page{display:flex;align-items:center;gap:6px;--tree-act:48px;padding:.42rem var(--tree-act) .42rem 2.1rem!important;font-size:12px;border-bottom:none!important;border-left:3px solid transparent;background:transparent;color:var(--text2);position:relative;transition:background var(--tf),color var(--tf)}
.tree-page::before{content:'';position:absolute;left:1.3rem;top:0;bottom:0;width:1px;background:var(--border2);opacity:.5}
.tree-page:hover{background:rgba(15,33,72,.035);color:var(--text)}
.tree-pages .tree-page.active{background:var(--bg2)!important;border-left-color:var(--gold);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(15,33,72,.08)}
.tree-page-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-page-prog{font-size:10px;color:var(--text3);flex-shrink:0;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.tree-empty{padding:.4rem .7rem .4rem 2.1rem;font-size:11px;color:var(--text3);font-style:italic}
.tree-addpage{margin:.15rem .7rem .25rem 2.1rem;padding:.3rem .6rem;font-size:10.5px;font-weight:600;text-align:left;background:none;border:1px dashed var(--border2);border-radius:var(--radius-sm);color:var(--text3);cursor:pointer;display:inline-block;transition:background var(--tf),color var(--tf),border-color var(--tf)}
.tree-addpage:hover{background:var(--bg2);color:var(--text)}
.add-sect{margin:.6rem .85rem;padding:.4rem;border:1px dashed var(--border2);border-radius:var(--radius-sm);background:none;color:var(--text3);font-size:11px;font-weight:600;cursor:pointer;text-align:center;transition:background var(--tf),color var(--tf),border-color var(--tf)}
.add-sect:hover{background:var(--bg2);color:var(--text)}
.col-pages{width:200px;min-width:200px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.col-pages .head{display:flex;align-items:center;height:46px;padding:0 .85rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);border-bottom:1px solid var(--border)}
.page-item{padding:.6rem .85rem;cursor:pointer;font-size:12.5px;border-left:3px solid transparent;color:var(--text2);border-bottom:1px solid var(--bg3);transition:background var(--tf)}
.page-item:hover{background:var(--bg3)}
.page-item.active{background:var(--bg3);border-left-color:var(--gold);font-weight:600;color:var(--text)}
.page-prog{font-size:10px;color:var(--text3);margin-top:2px}
.add-page{margin:.6rem .85rem;padding:.4rem;border:1px dashed var(--border2);border-radius:var(--radius-sm);background:none;color:var(--text3);font-size:11px;cursor:pointer;text-align:center}
.add-page:hover{background:var(--bg3)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:.75rem 1.25rem;display:flex;align-items:center;gap:10px;flex-shrink:0;container-type:inline-size}
.topbar h2{font-size:16px;font-weight:600;letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El título manda: cuando el ancho no alcanza para todo, Importar/Exportar/
   Duplicar sueltan su etiqueta (queda el icono + title) antes de que el nombre
   de la hoja se trunque. Generar con IA conserva la suya hasta el final. */
@container (max-width:1120px){
  .topbar-btns .icon-btn:not(.icon-btn-ai) span{display:none}
  .topbar-btns .icon-btn:not(.icon-btn-ai)[data-tip]::after{content:attr(data-tip)}
}
@container (max-width:800px){
  .topbar-btns .icon-btn-ai span{display:none}
  .topbar-btns .icon-btn-ai[data-tip]::after{content:attr(data-tip)}
}
/* Tooltip del sistema (mismo material que .rail-tip), solo cuando el botón está
   plegado a icono: el ::after nace sin content y el @container se lo pone. */
.icon-btn{position:relative}
.icon-btn[data-tip]::after{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#2b2b2e;color:#fff;font-size:11px;font-weight:500;padding:.3rem .6rem;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:60;border:1px solid #4a4a4e}
.icon-btn[data-tip]:hover::after,.icon-btn[data-tip]:focus-visible::after{opacity:1}
.breadcrumb{font-size:11px;color:var(--text3);margin-bottom:1px}
.tab-bar{display:flex;align-items:center;gap:3px;background:var(--bg3);border-radius:var(--radius-sm);padding:3px}
.tab{font-size:12px;height:26px;display:inline-flex;align-items:center;padding:0 .8rem;border-radius:6px;cursor:pointer;color:var(--text2);border:none;background:none;font-weight:500;font-family:inherit;transition:color var(--tf),background var(--tf)}
.tab:hover:not(.active){color:var(--text)}
.tab.active{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(15,33,72,.12)}
.topbar-btns{display:flex;gap:6px}
/* Barra lateral izquierda estilo Outlook */
/* Sin logo arriba (la marca ya vive en la cabecera): el avatar abre la columna
   con aire y una separación clara antes de la navegación. */
.rail{width:52px;min-width:52px;background:var(--rail-bg);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;padding:.85rem 0 .6rem;gap:4px}
.rail-btn{width:40px;height:40px;border-radius:9px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;color:var(--rail-icon);transition:background var(--tf),color var(--tf),transform .12s ease}
/* Selector de panel: solo aparece si perteneces a más de uno. La inicial hace de
   marca del panel activo, como en Slack o Notion. */
/* ── Tarea conjunta (v74): el padre se distingue del resto de un vistazo ──
   Color propio (índigo) para que no se confunda con el dorado de "creadas por
   mí" ni con el rojo de vencidas; las partes van indentadas bajo su padre. */
.joint-wrap{border:1px solid color-mix(in srgb,#7F77DD 35%,var(--border));border-radius:10px;
  background:color-mix(in srgb,#7F77DD 5%,transparent);margin:3px 0}
.joint-wrap .task-row{border:none;background:none}
.task-name.joint-name{color:var(--joint-ink);font-weight:650}
.joint-badge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;
  background:color-mix(in srgb,var(--joint) 18%,transparent);color:var(--joint-ink);border-radius:999px;
  padding:1px 7px;white-space:nowrap;cursor:pointer;flex-shrink:0}
.joint-body{padding:0 .6rem .5rem 2.1rem;display:flex;flex-direction:column;gap:3px}
.joint-bar{height:4px;border-radius:3px;background:color-mix(in srgb,#7F77DD 18%,transparent);overflow:hidden;margin-bottom:3px}
.joint-bar i{display:block;height:100%;background:#7F77DD;border-radius:3px;transition:width .25s}
.joint-part{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:11.5px}
.joint-part.done{opacity:.55}
.joint-part-info{flex:1;min-width:0}
/* El nombre de cada parte se edita en la misma fila, igual que el de la tarea
   padre: cambiar "Pasar a analista Rutero Sierra" no debería obligar a abrir
   el editor de la conjunta. */
.joint-part-name{font-weight:550;width:100%;background:none;border:none;outline:none;
  padding:0;margin:0;font-size:11.5px;font-family:inherit;color:var(--text);
  text-overflow:ellipsis;border-radius:4px}
.joint-part-name:hover{background:color-mix(in srgb,#7F77DD 8%,transparent)}
.joint-part-name:focus{background:var(--bg2);box-shadow:0 0 0 2px color-mix(in srgb,#7F77DD 35%,transparent)}
.joint-part-name.done{color:var(--text3);text-decoration:line-through}
.joint-part-meta{font-size:9.5px;color:var(--text3)}
.joint-seq{width:15px;height:15px;border-radius:50%;background:#7F77DD;color:#fff;font-size:9px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.task-check.sm{width:16px;height:16px;flex-shrink:0}
.task-check.blocked{opacity:.35;cursor:not-allowed}
/* Aviso en la tarjeta del colaborador: por qué su check está apagado, o cómo va
   la conjunta si ya le toca. Va en la tarjeta, no en un tooltip: el que trabaja
   por link está en el celular y no hay hover que valga. */
.joint-wait{margin:0 .9rem .7rem;padding:.5rem .6rem;border-radius:8px;font-size:11.5px;
  line-height:1.45;background:color-mix(in srgb,var(--joint) 10%,transparent);color:var(--joint-ink);font-weight:550}
.joint-wait.block{background:var(--warning-bg);color:var(--warning);font-weight:650}
/* El triángulo de "cerrada fuera de turno". Se queda puesto: es el registro de
   que alguien decidió no esperar, y el motivo vive en su title. */
.joint-forced-mark{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;flex-shrink:0;margin-right:4px;border-radius:5px;
  background:var(--warning-bg);color:var(--warning);font-size:11px;cursor:help}
/* Las tres salidas cuando alguien intenta cerrar antes de tiempo. */
.jf-opts{display:flex;flex-direction:column;gap:8px}
.jf-opt{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;
  border:1px solid var(--border2);border-radius:10px;padding:.7rem .8rem;background:var(--bg2);
  cursor:pointer;transition:border-color .12s,background .12s}
.jf-opt:hover{border-color:#7F77DD;background:color-mix(in srgb,#7F77DD 6%,var(--bg2))}
.jf-opt b{font-size:12.5px;color:var(--text)}
.jf-opt span{font-size:11px;color:var(--text3);line-height:1.4}
.jf-opt.cancel{border-style:dashed;text-align:center;align-items:center}
.jf-nudge{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-bottom:6px;
  border:1px solid var(--border2);border-radius:10px;padding:.6rem .7rem;background:var(--bg2);cursor:pointer}
.jf-nudge:hover{border-color:var(--success)}
.jf-nudge-who{font-size:12.5px;font-weight:600;flex-shrink:0}
.jf-nudge-wa{font-size:10.5px;color:var(--text3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jf-nudge-go{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--success);flex-shrink:0}
.jf-nudge-go svg{width:13px;height:13px}
/* Mensajes de WhatsApp: 38 textos agrupados por momento del flujo. Pestañas
   arriba y una sola columna scrolleable, que en el celular es lo único que
   funciona; el punto en la pestaña dice cuántos tocó el usuario. */
.modal.msg-modal{width:640px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.msg-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:.6rem 0 .3rem;flex-shrink:0}
.msg-tab{border:1px solid var(--border2);background:var(--bg2);color:var(--text2);
  border-radius:999px;padding:.32rem .7rem;font-size:11px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.msg-tab:hover{border-color:var(--gold)}
.msg-tab.on{background:var(--gold);border-color:var(--gold);color:var(--accent-text)}
.msg-dot{background:rgba(0,0,0,.16);border-radius:999px;padding:0 5px;font-size:9.5px;line-height:15px}
.msg-tab.on .msg-dot{background:rgba(255,255,255,.3)}
.msg-body{flex:1;overflow-y:auto;padding:.2rem 2px .2rem 0;min-height:0}
.msg-desc{font-size:11.5px;color:var(--text3);margin:.35rem 0 .7rem;line-height:1.45}
.msg-nums{display:flex;gap:8px;margin-bottom:.9rem}
.msg-nums>div{flex:1}
.msg-nums input{margin:0}
.msg-item{border:1px solid var(--border);border-radius:10px;padding:.6rem .65rem;margin-bottom:.6rem;background:var(--bg2)}
.msg-item-head{display:flex;align-items:center;gap:7px;margin-bottom:.4rem}
.msg-item-head b{font-size:12px;flex:1;min-width:0}
.msg-own{font-size:9.5px;font-weight:700;color:var(--gold);background:var(--warning-bg);border-radius:999px;padding:1px 7px}
.msg-reset{border:none;background:none;color:var(--text3);font-size:10.5px;cursor:pointer;text-decoration:underline;padding:0}
.msg-reset:hover{color:var(--danger)}
.msg-item textarea{width:100%;font-size:11.5px;font-family:inherit;line-height:1.55;margin:0;
  border:1px solid var(--border);border-radius:8px;padding:.5rem;background:var(--bg);color:var(--text);resize:vertical}
.msg-vars{margin-top:.4rem;font-size:10px;line-height:1.9}
.msg-vars code{background:var(--bg3);border-radius:5px;padding:1px 5px;cursor:pointer;color:var(--info)}
.msg-vars code:hover{background:var(--info-bg)}
.msg-fmt{font-size:10.5px;color:var(--text3);line-height:1.5;padding:.2rem 0 .4rem}
.msg-fmt code{background:var(--bg3);border-radius:4px;padding:0 4px}
@media(max-width:600px){.msg-nums{flex-direction:column;gap:4px}}
.joint-empty,.joint-forced{font-size:10.5px;color:var(--text3)}
.joint-empty span,.joint-forced span{color:var(--joint-ink);cursor:pointer;text-decoration:underline}
/* Editor de tarea conjunta: a la izquierda quiénes van (en orden), a la derecha
   la libreta para irlos agregando. En móvil se apilan. */
.modal.jt-modal{width:660px}
.jt-modo{display:flex;gap:6px;margin-bottom:.45rem}
.jt-modo .btn{flex:1;justify-content:center;font-size:11.5px}
.jt-hint{font-size:11px;color:var(--text2);background:var(--bg3);border-radius:8px;padding:.45rem .6rem;margin-bottom:.7rem}
.jt-ord{margin-bottom:.8rem}
.jt-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.jt-col{min-width:0}
.jt-count{font-weight:600;color:var(--text3)}
.jt-empty{font-size:11.5px;color:var(--text3);border:1px dashed var(--border2);border-radius:8px;
  padding:1.1rem .6rem;text-align:center;line-height:1.6}
.jt-pick{border:1px solid var(--border);border-radius:8px;padding:.45rem .5rem;margin-bottom:.4rem;background:var(--bg2)}
.jt-pick.is-done{border-color:color-mix(in srgb,var(--success) 45%,var(--border));background:var(--success-bg)}
.jt-pick-top{display:flex;align-items:center;gap:6px}
.jt-ava{width:24px;height:24px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jt-pick-info{flex:1;min-width:0}
.jt-pick-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt-pick-wa{font-size:9.5px;color:var(--text3)}
.jt-ord-btns{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.jt-arrow{width:28px;height:21px;padding:0;border:1px solid var(--border2);border-radius:6px;
  background:var(--bg3);color:var(--text2);font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s}
.jt-arrow:hover:not([disabled]){background:#7F77DD;border-color:#7F77DD;color:#fff}
.jt-arrow[disabled]{opacity:.28;cursor:default}
.jt-x{width:26px;height:26px;padding:0;border:none;background:none;color:var(--text3);
  font-size:15px;line-height:1;cursor:pointer;border-radius:6px;flex-shrink:0}
.jt-x:hover{background:var(--danger-bg);color:var(--danger)}
/* Enlace entre dos personas: o comparten turno, o el de abajo espera. */
.jt-link{display:block;width:calc(100% - 26px);margin:-1px 0 .35rem auto;padding:.2rem .5rem;
  border:1px dashed var(--border2);border-left:none;border-right:none;border-radius:0;
  background:none;color:var(--text3);font-size:10px;font-weight:600;text-align:left;
  cursor:pointer;letter-spacing:.02em}
.jt-link:hover{color:var(--joint-ink);border-color:#7F77DD}
.jt-link.par{color:var(--joint-ink);border-style:solid;border-color:color-mix(in srgb,#7F77DD 40%,transparent)}
.jt-ord-help{font-size:10.5px;color:var(--text3);line-height:1.5;margin:-.4rem 0 .8rem;padding-left:1.35rem}
.jt-ord-help b{color:var(--joint-ink)}
.joint-part-in{width:100%;margin:.35rem 0 0;font-size:12px}
@media(max-width:700px){.jt-cols{grid-template-columns:1fr}}
.rail-ws{background:var(--gold);color:#fff;font-weight:700;font-size:15px;margin-bottom:12px;flex-shrink:0}
.rail-me{font-weight:700;font-size:15px;margin-bottom:12px;flex-shrink:0}
.rail-me .rail-me-dot{position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--rail-bg)}
.my-add{display:flex;gap:8px;margin-bottom:1rem;max-width:760px}
.my-add input{margin:0;flex:1}
.my-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;max-width:760px;overflow:hidden}
.my-card.is-done{opacity:.58}
/* Tarea delegada desde otro tablero: el borde de la izquierda es la señal de
   "esta no es tuya". Sin él la lista miente, porque los botones que faltan se
   notan menos que un color. */
/* Onboarding: las dos formas de empezar, como tarjetas y no como un select.
   La decisión se toma una sola vez y conviene que se lea entera. */
.ob-opts{display:flex;flex-direction:column;gap:8px;margin:.2rem 0 .3rem}
.ob-opt{display:block;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:.65rem .75rem;cursor:pointer;font:inherit;color:var(--text)}
.ob-opt:hover{border-color:var(--accent);background:var(--bg3)}
.ob-opt b{display:block;font-size:13px;margin-bottom:2px}
.ob-opt span{display:block;font-size:11px;color:var(--text3);line-height:1.45}
.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.35rem 0}
.ob-ind{display:flex;align-items:center;gap:10px;text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:.5rem .6rem;cursor:pointer;font:inherit;color:var(--text)}
.ob-ind:hover{border-color:var(--accent);background:var(--bg3)}
/* El icono va en la misma teja de 34px de Herramientas (.tools-opt-ic): es la
   MISMA cosa —una opción con dibujo— así que se ve igual. Emojis fuera: cada
   sistema operativo los pinta distinto y ninguno combina con la app. */
.ob-ind-ico{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center;transition:color var(--tf),background var(--tf)}
.ob-ind:hover .ob-ind-ico{color:var(--accent);background:var(--bg2)}
.ob-ind-name{font-size:12.5px;font-weight:600;line-height:1.25}
@media(max-width:520px){.ob-grid{grid-template-columns:1fr}}
/* ── Mi plan: tarjeta de estado, lista de lo que incluye y precios ── */
.plan-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.7rem .85rem;margin:.65rem 0;font-size:13px;line-height:1.5}
.plan-feats-t{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:.8rem 0 .4rem}
.plan-feats{list-style:none;margin:0 0 .85rem;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-feats li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text2);line-height:1.45}
.plan-feats svg{flex-shrink:0;margin-top:2px;color:var(--success)}
.plan-precios{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:.2rem 0 .7rem}
.plan-precio{text-align:left;background:var(--bg);border:1.5px solid var(--border2);border-radius:10px;padding:.55rem .7rem;cursor:pointer;font:inherit;color:var(--text);transition:border-color var(--tf),background var(--tf)}
.plan-precio:hover{border-color:var(--accent)}
.plan-precio.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.pp-tipo{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:2px}
.pp-cifra{font-size:17px;font-weight:700;color:var(--text)}
.pp-cifra small{font-size:11px;font-weight:600;color:var(--text3)}
.pp-linea{font-size:10.5px;color:var(--text3);margin-top:1px}
.plan-save{display:inline-block;vertical-align:2px;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--success);background:var(--success-bg);border-radius:999px;padding:1px 7px;margin-left:6px}
/* El lienzo animado del onboarding (WebGL, con degradado de respaldo) */
.ob-hero{position:relative;height:110px;margin:-1.5rem -1.5rem .9rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:linear-gradient(120deg,#1a2036,#2b3a67 55%,#B8860B)}
.ob-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ob-hero .ob-hero-t{position:absolute;left:18px;bottom:12px;color:#fff;font-weight:800;font-size:19px;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
/* Libros sembrados como ejemplo: se distinguen hasta que se borran */
.book-item.es-ejemplo{border:1px dashed rgba(245,166,35,.55);background:rgba(245,166,35,.07)}
.ej-pill{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#B8860B;background:rgba(245,166,35,.18);border-radius:999px;padding:1px 7px;flex-shrink:0}
[data-theme="dark"] .ej-pill{color:#F5C860}
/* ── La guía: telón con recorte, halo pulsante, tarjeta y flecha ── */
#tour-root{position:fixed;inset:0;z-index:300;pointer-events:none}
.tour-halo{position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px var(--gold),0 0 26px 6px rgba(245,166,35,.55),0 0 0 9999px rgba(10,12,20,.62);
  transition:top .45s cubic-bezier(.22,1,.36,1),left .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1)}
.tour-halo::after{content:'';position:absolute;inset:-7px;border:2px solid rgba(245,166,35,.7);border-radius:16px;animation:tourPulse 1.6s ease-out infinite}
@keyframes tourPulse{0%{transform:scale(.96);opacity:.9}70%{transform:scale(1.06);opacity:0}100%{opacity:0}}
.tour-card{position:fixed;width:320px;max-width:calc(100vw - 28px);background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:1rem 1.1rem .8rem;pointer-events:auto;box-shadow:0 18px 50px rgba(0,0,0,.4);
  transition:top .45s cubic-bezier(.22,1,.36,1),left .45s cubic-bezier(.22,1,.36,1);animation:tourIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes tourIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.tour-kicker{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--gold);text-transform:uppercase;margin-bottom:.3rem}
.tour-card h4{margin:0 0 .35rem;font-size:15.5px}
/* Demos en vivo: filas fantasma sobre la lista real + capa de efectos WebGL */
#tour-fx{position:fixed;inset:0;z-index:301;pointer-events:none}
.tour-ghost{animation:tgIn .4s ease-out;transition:opacity .6s}
@keyframes tgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tour-ghost .gname{flex:1;font-size:12px;min-height:15px}
#tg-name::after{content:'';border-right:1.5px solid var(--gold);margin-left:1px;animation:tgCaret 1s step-end infinite}
@keyframes tgCaret{50%{border-color:transparent}}
.demo-parte{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:11.5px;color:var(--text2)}
.demo-pulse{animation:demoPulse .9s ease-in-out 2}
@keyframes demoPulse{50%{box-shadow:0 0 0 5px rgba(245,166,35,.30);border-color:var(--gold);color:var(--gold)}}
.demo-ava{width:20px;height:20px;border-radius:50%;background:#7F77DD;color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;animation:demoPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes demoPop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.demo-fecha{font-size:10px;color:var(--text3);white-space:nowrap}
.demo-wa{font-size:10px;font-weight:700;color:#fff;background:var(--success);border-radius:999px;padding:2px 8px;white-space:nowrap}
.demo-fade{opacity:0!important}
.tour-fly{position:fixed;z-index:302;pointer-events:none;background:var(--bg2);border:1px solid var(--gold);border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.4);padding:.4rem .7rem;font-size:12px;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap}
.tour-card p{margin:0 0 .75rem;font-size:12.5px;line-height:1.55;color:var(--text2)}
.tour-dots{display:flex;gap:5px;margin-bottom:.7rem}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all .3s}
.tour-dot.on{background:var(--gold);width:18px;border-radius:4px}
.tour-acts{display:flex;align-items:center;gap:8px}
.tour-skip{background:none;border:none;color:var(--text3);font:inherit;font-size:11.5px;cursor:pointer;margin-right:auto;padding:.3rem 0}
.tour-skip:hover{color:var(--text2);text-decoration:underline}
.tour-arrow{position:fixed;pointer-events:none;overflow:visible}
/* La flecha se DIBUJA (una vez, con ease-out), no marcha como guiones de
   PowerPoint: cometa con degradado —cola transparente, cabeza sólida—,
   doble trazo (halo blando + línea fina) y punta que aterriza al final. */
.tour-arrow .t-glow{fill:none;stroke:rgba(245,166,35,.28);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:tourDraw .6s cubic-bezier(.55,0,.15,1) .12s forwards;filter:blur(3px)}
.tour-arrow .t-line{fill:none;stroke:url(#t-grad);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:tourDraw .6s cubic-bezier(.55,0,.15,1) .12s forwards}
@keyframes tourDraw{to{stroke-dashoffset:0}}
.tour-arrow .t-head{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:tourHead .3s cubic-bezier(.34,1.56,.64,1) .58s forwards;filter:drop-shadow(0 0 7px rgba(245,166,35,.7))}
@keyframes tourHead{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.tour-arrow .t-spark{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:tourSpark .5s ease-out .62s forwards}
@keyframes tourSpark{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
/* Aviso de función nueva: un globito anclado, una sola vez */
.coach-pop{position:fixed;z-index:290;width:270px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--gold);border-radius:12px;
  padding:.75rem .85rem .6rem;box-shadow:0 12px 34px rgba(0,0,0,.35);animation:tourIn .35s cubic-bezier(.22,1,.36,1)}
.coach-pop::before{content:'';position:absolute;width:10px;height:10px;background:var(--bg2);border-left:1px solid var(--gold);border-top:1px solid var(--gold);transform:rotate(45deg);top:-6px;left:24px}
.coach-pop.abajo::before{top:auto;bottom:-6px;transform:rotate(225deg)}
.coach-nuevo{font-size:9px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--gold);border-radius:7px;padding:1px 6px;text-transform:uppercase}
.coach-pop h5{margin:.35rem 0 .25rem;font-size:13px}
.coach-pop p{margin:0 0 .55rem;font-size:11.5px;line-height:1.5;color:var(--text2)}
.my-card.recv{border-left:3px solid var(--info)}
.recv-badge{font-size:10px;font-weight:600;color:var(--info);background:var(--info-bg);border-radius:999px;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.recv-note{font-size:11px;color:var(--text2);background:var(--bg3);border-radius:6px;margin:0 .75rem .6rem 2.6rem;padding:.35rem .5rem}
.my-head{display:flex;align-items:center;gap:9px;padding:.6rem .75rem}
.my-head .task-name{flex:1;border:none;background:none;font-size:13px;color:var(--text);padding:0}
.my-head .task-name.done{text-decoration:line-through;color:var(--text3)}
.my-date{margin:0!important;width:auto!important;font-size:10.5px!important;padding:.25rem .4rem!important;border-radius:6px!important;color:var(--text3)}
.cap-pill{font-size:10px;font-weight:600;color:var(--gold);background:rgba(245,166,35,.14);border-radius:999px;padding:2px 8px;flex-shrink:0;white-space:nowrap}
.cap-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin:.9rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.exec-pill{font-size:10px;font-weight:600;color:var(--info);background:var(--info-bg);border-radius:999px;padding:2px 8px;flex-shrink:0;white-space:nowrap}
.dep-pill{font-size:10px;font-weight:700;color:var(--warning);background:var(--warning-bg);border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.dep-pill svg{width:11px;height:11px}
.my-path{font-size:11px;color:var(--text3);padding:0 .75rem .5rem 2.6rem;display:flex;align-items:center;gap:5px}
.my-path svg{width:11px;height:11px}
.dep-list{border-top:1px solid var(--border);background:var(--bg3);padding:.25rem 0}
.dep-row{display:flex;align-items:center;gap:8px;padding:.4rem .75rem .4rem 2.1rem;position:relative}
.dep-row::before{content:'';position:absolute;left:1.35rem;top:0;bottom:0;width:1px;background:var(--border2);opacity:.6}
.prop-box{border:1px solid color-mix(in srgb,var(--info) 28%,transparent);background:color-mix(in srgb,var(--info-bg) 55%,var(--bg2));border-radius:var(--radius);padding:.75rem .85rem;margin-bottom:1.1rem;max-width:760px}
.prop-title{font-size:12px;font-weight:700;color:var(--info);margin-bottom:.55rem;display:flex;align-items:center;gap:6px}
.prop-title svg{width:15px;height:15px}
.prop-cap{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin:.5rem 0 .3rem}
.prop-item{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:8px;padding:.55rem .65rem;margin-bottom:6px}
.prop-item:last-child{margin-bottom:0}
.rec-arch-head{display:flex;align-items:center;gap:6px;margin-top:.8rem;padding:.5rem .6rem;border-top:1px dashed var(--border);font-size:11.5px;font-weight:600;color:var(--text2);cursor:pointer;background:var(--bg2);border-radius:6px}
.rec-arch-head:hover{background:var(--bg3)}
.rec-arch-head svg{width:13px;height:13px;color:#8A94A6}
.chapter-archive{background:var(--bg2);border:1px dashed var(--border);opacity:.9}
.chapter-archive .ch-head:hover{background:var(--bg3)}
.dash-urgent{font-size:11px;padding:.35rem .6rem;border-radius:6px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;white-space:nowrap}
.dash-urgent.on{background:var(--danger-bg);border-color:var(--danger);color:var(--danger);font-weight:600}
.dash-applied{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--border)}
.dash-applied-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.dash-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:var(--info-bg);color:var(--info);border-radius:999px;padding:.2rem .6rem;font-weight:500}
.dash-pill.fixed{background:var(--bg3);color:var(--text2)}
.dash-pill b{font-weight:700}
.dash-pill button{background:none;border:none;color:inherit;cursor:pointer;font-size:12px;line-height:1;padding:0;opacity:.7}
.dash-pill button:hover{opacity:1}
.dash-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.6rem .7rem;margin-bottom:1rem}
.dash-chips{display:inline-flex;background:var(--bg3);border-radius:9px;padding:3px;gap:2px}
.dash-chip{font-size:11px;padding:.35rem .75rem;border-radius:7px;border:none;background:none;color:var(--text2);font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap}
.dash-chip:hover{color:var(--text)}
.dash-chip.on{background:var(--bg2);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(15,33,72,.12)}
.dash-range{display:inline-flex;align-items:center;gap:6px}
.dash-range input{margin:0;font-size:11px;padding:.35rem .5rem;width:auto;border-radius:7px}
.dash-selects{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.dash-selects select{margin:0;font-size:11px;padding:.38rem .5rem;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--text);max-width:170px;cursor:pointer}
.dash-clear{font-size:10px;padding:.35rem .6rem;border-radius:7px;border:1px solid var(--border);background:none;color:var(--text3);cursor:pointer}
.dash-clear:hover{color:var(--danger);border-color:var(--danger)}
@media(max-width:820px){.dash-selects{margin-left:0;width:100%}.dash-selects select{flex:1}}
.rail-btn svg{width:20px;height:20px}
.bi{display:inline-flex;vertical-align:middle}
.bi svg{width:12px;height:12px}
.tool-ic svg{width:20px;height:20px}
.rail-btn:hover{background:rgba(255,255,255,.08)}
.rail-btn:active{transform:scale(.92)}
.rail-btn.accent{background:rgba(255,255,255,.1)}
.rail-btn .rail-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:0 4px;min-width:15px;text-align:center;line-height:15px}
.rail-btn .rail-tip{position:absolute;left:50px;top:50%;transform:translateY(-50%);background:#2b2b2e;color:#fff;font-size:11px;padding:.3rem .6rem;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:50;border:1px solid #4a4a4e}
.rail-btn:hover .rail-tip{opacity:1}
.rail-btn.active-view{background:var(--rail-active-bg);color:var(--rail-active-icon)}
.rail-btn.active-view:hover{background:var(--rail-active-bg)}
.rail-sep{width:28px;height:1px;background:rgba(255,255,255,.12);margin:4px 0}
/* ── Barra de navegación inferior (solo móvil) ── */
.mnav{display:none}
.mtoday{display:none}
.mtoday-mini{display:none}
.mbd{display:none}
.mob-caret{display:none}
.mob-addbook{display:none}
/* (El botón "‹ Inicio" de las vistas de panel se eliminó: en escritorio el rail
   y en móvil la barra inferior ya tienen Inicio a un toque, siempre visible.
   El botón solo repetía ese camino y robaba la primera línea de la pantalla.) */
/* Proporciones estilo Spotify: icono grande protagonista, etiqueta legible,
   sin pastilla de fondo — el estado activo lo dice el color */
.mnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--rail-icon);font-size:11.5px;font-weight:600;font-family:inherit;padding:0;position:relative;min-height:54px;-webkit-tap-highlight-color:transparent;transition:color var(--tf),opacity var(--tf)}
.mnav-ic{width:60px;height:30px;display:flex;align-items:center;justify-content:center}
.mnav-btn svg{width:27px;height:27px}
.mnav-label{line-height:1;letter-spacing:.1px}
.mnav-btn.active{color:var(--gold)}
.mnav-btn:active{opacity:.75}
.mnav-badge{position:absolute;top:-3px;left:calc(50% + 8px);background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:0 5px;min-width:17px;text-align:center;line-height:17px;box-shadow:0 0 0 2px var(--rail-bg)}
/* ── Hoja inferior (bottom sheet) ── */
.sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain}
.sheet{background:var(--bg2);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:0 0 calc(8px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto;animation:sheetup .38s cubic-bezier(.34,1.18,.42,1);overscroll-behavior:contain}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:38px;height:4px;background:var(--border2);border-radius:3px;margin:8px auto 6px}
.sheet-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;padding:6px 20px 8px}
.sheet-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--text);font-family:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.sheet-item:active{background:var(--bg3)}
.sheet-item svg{width:22px;height:22px;color:var(--text2);flex-shrink:0}
.sheet-item>span{flex:1}
.sheet-item.danger{color:var(--danger)}
.sheet-item.danger svg{color:var(--danger)}
.sheet-item .sheet-badge{background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;flex:0 0 auto}
.sheet-sep{height:1px;background:var(--border);margin:6px 20px}
.panel-view{flex:1;overflow-y:auto;background:var(--bg);min-width:0;animation:panelIn .13s ease-out}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
.pv-header{background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 1.5rem;position:sticky;top:0;z-index:20}
.pv-header h2{font-size:18px;font-weight:700;margin:0}
.pv-header p{font-size:12px;color:var(--text3);margin:.2rem 0 0}
.pv-body{padding:1.5rem;max-width:1100px}
.pv-body-wide{max-width:none}
.pv-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:8px;padding:3px;margin-top:.75rem;width:fit-content}
.pv-tab{font-size:12px;padding:.4rem .9rem;border-radius:6px;cursor:pointer;border:none;background:none;color:var(--text2);font-weight:600}
.pv-tab.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 3px rgba(15,33,72,.12)}
.item-del{opacity:0;font-size:13px;background:none;border:none;cursor:pointer;padding:0 3px;flex-shrink:0;color:inherit;transition:opacity .12s}
.item-edit{opacity:0;background:none;border:none;cursor:pointer;padding:0 3px;flex-shrink:0;color:inherit;transition:opacity .12s;display:inline-flex;align-items:center}
.item-edit svg{width:13px;height:13px}
.book-item:hover .item-del,.sect-item:hover .item-del,.page-item:hover .item-del{opacity:.55}
.book-item:hover .item-edit,.sect-item:hover .item-edit{opacity:.55}
.item-del:hover{opacity:1!important;color:var(--danger)}
.item-edit:hover{opacity:1!important;color:var(--gold)}
.sect-item,.page-item{display:flex;align-items:center;gap:6px}
.sect-item>.tree-sect-name,.page-item>.pg-info{flex:1;min-width:0}
/* Redimensionar y colapsar columnas */
.task-row{position:relative}
.task-row .drag-handle{opacity:0;cursor:grab;color:var(--text3);font-size:13px;letter-spacing:-2px;flex-shrink:0;user-select:none;line-height:1;width:12px}
.task-row:hover .drag-handle{opacity:.55}
.task-row .drag-handle:active{cursor:grabbing}
.task-row.dragging{opacity:.4}
.task-row.drop-before{box-shadow:inset 0 2px 0 0 var(--gold)}
.task-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--gold)}
.task-list.drop-into{background:var(--warning-bg);border-radius:6px}
.drop-empty{font-size:11px;color:var(--text3);text-align:center;padding:.7rem;border:1px dashed var(--border);border-radius:6px;margin:.3rem .5rem}
.pro-tag{font-size:8px;font-weight:700;background:var(--gold);color:var(--accent-text);padding:.05rem .3rem;border-radius:4px;letter-spacing:.5px;margin-left:2px}
.btn-ia-locked{border-color:var(--gold);color:var(--gold)}
.back-bar{margin-bottom:.5rem}
.back-bar button{background:var(--info-bg);color:var(--info);border:none;border-radius:8px;padding:.4rem .7rem;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.back-bar button:hover{background:var(--info);color:#fff}
.byuser-task{display:flex;align-items:center;gap:8px;padding:.5rem;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;border-radius:6px}
.byuser-task:hover{background:var(--bg3)}
.byuser-task:last-child{border-bottom:none}
/* Seguimiento: las tareas van sobre tarjeta (blanca en claro, navy en oscuro) y el
   fondo crema de la app queda solo de lienzo. Antes las dos zonas compartían fondo
   y la lista de tareas no se leía como una superficie propia. */
.seg-detail{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.seg-side{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 10px 12px}
/* Mismo criterio para las pestañas "Por fecha" y "Por libro/hoja": ahí las filas
   caían sueltas sobre el crema. Cada grupo es ahora una tarjeta blanca; el título
   del grupo (VENCIDAS, etc.) se queda afuera, sobre el lienzo. */
.rem-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.rem-row{display:flex;align-items:center;gap:10px;padding:.5rem .6rem;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer}
/* hover solo donde HAY hover: en táctil quedaba pintado tras el toque
   (la "fila beige" fantasma de Seguimiento y Recordatorios) */
@media(hover:hover){.rem-row:hover{background:var(--bg3)}}
.rem-card>div:last-child{border-bottom:none}
/* ── Campos de texto: base moderna global (v43) ──────────────────────────────
   :where() = especificidad CERO: cualquier estilo puntual existente le gana.
   El anillo de foco vive al final de la hoja para ganar los empates. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){
  font-family:inherit;font-size:13px;color:var(--text);background:var(--bg2);
  border:1.5px solid var(--border2);border-radius:10px;padding:.55rem .85rem;
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
:where(input)::placeholder,:where(textarea)::placeholder{color:var(--text3)}
:where(select){cursor:pointer}
.rem-search{width:100%;max-width:560px;margin-bottom:.75rem;display:block}
.rem-search::placeholder{color:var(--text3)}
/* Vista de Urgentes */
.urg-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:.75rem}
.urg-chip{font-size:11px;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-family:inherit;cursor:pointer;white-space:nowrap}
.urg-chip b{font-weight:700}
.urg-chip:hover{background:var(--bg3)}
.urg-chip.on{font-weight:700;border-color:var(--text2);color:var(--text)}
.urg-aviso{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;background:color-mix(in srgb,var(--warning-bg) 55%,var(--bg2));color:var(--text);border:1px solid color-mix(in srgb,var(--warning) 28%,transparent);border-radius:var(--radius);padding:.6rem .75rem;margin-bottom:.5rem}
.urg-aviso button{background:none;border:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--warning);cursor:pointer;padding:0}
/* Urgentes va pegado a Mis pendientes: los dos son atajos fijos, y la línea que
   los separa de los libros normales baja a este, que ahora cierra el grupo. */
.urgent-shortcut{border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.35rem;padding-bottom:.55rem!important}
.urgent-tri{color:var(--danger);font-size:11px;line-height:1;flex-shrink:0}
.urgent-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;line-height:1;flex-shrink:0}
.byuser-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.mini-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;padding:.1rem .35rem;border-radius:4px;white-space:nowrap}
.mini-badge svg{width:9px;height:9px}
.rem-sent{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--success);font-weight:600;flex-shrink:0;white-space:nowrap}
.rem-sent svg{width:12px;height:12px}
.alert-remind{background:none;border:1px solid var(--warning);color:var(--warning);border-radius:7px;font-size:10px;padding:.12rem .45rem;cursor:pointer;flex-shrink:0;font-weight:600;transition:background var(--tf),color var(--tf)}
.alert-remind:hover{background:var(--warning);color:#fff}
.alert-row{display:flex;align-items:center;gap:8px}
.alert-sent-head{display:flex;align-items:center;gap:5px;margin-top:.45rem;padding-top:.4rem;border-top:1px dashed var(--warning);font-size:11px;font-weight:600;color:var(--success);cursor:pointer}
.alert-sent-head svg{width:13px;height:13px}
.alert-row-sent{color:var(--text3);text-decoration:line-through;opacity:.8}
.loc-tree{border:1px solid var(--border);border-radius:8px;max-height:260px;overflow:auto;padding:4px}
.loc-row{display:flex;align-items:center;gap:7px;padding:.4rem .5rem;border-radius:6px;cursor:pointer;font-size:12.5px}
.loc-row:hover{background:var(--bg3)}
.loc-row.sel{background:var(--gold);color:var(--accent-text);font-weight:600}
.loc-row.sel svg{color:var(--accent-text)}
.loc-row.lvl2{padding-left:1.3rem}
.loc-row.lvl3{padding-left:2.4rem}
.loc-caret{display:inline-block;width:14px;transition:transform .12s;color:var(--text3);font-size:14px}
.loc-caret.open{transform:rotate(90deg)}
.loc-book{width:9px;height:14px;border-radius:2px;flex-shrink:0}
.cap-pick{display:flex;align-items:center;gap:9px;padding:.6rem .7rem;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;font-size:13px}
.cap-pick:hover{background:var(--bg3)}
.cap-pick input{margin:0;width:auto;cursor:pointer}
.cap-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.mobile-bar{display:none}
.resize-handle{width:5px;min-width:5px;cursor:col-resize;background:transparent;position:relative;z-index:10;transition:background .15s}
.resize-handle:hover,.resize-handle.dragging{background:var(--info)}
.col-collapse-btn{position:absolute;top:8px;right:6px;width:20px;height:20px;border:none;background:none;cursor:pointer;font-size:10px;color:inherit;opacity:.5;border-radius:4px;display:flex;align-items:center;justify-content:center}
.col-collapse-btn:hover{opacity:1;background:rgba(255,255,255,.1)}
.col-books,.col-sections,.col-pages{position:relative}
.col-collapsed{width:34px!important;min-width:34px!important;overflow:hidden}
/* !important: algunas cabeceras traen display inline que le ganaba a esta regla (letras cortadas al colapsar) */
.col-collapsed .head,.col-collapsed .book-item,.col-collapsed .sect-item,.col-collapsed .page-item,.col-collapsed .add-book,.col-collapsed .add-sect,.col-collapsed .add-page,.col-collapsed #book-list,.col-collapsed #section-list,.col-collapsed #page-list,.col-collapsed .mobile-bar{display:none!important}
.col-collapsed-label{display:none;writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.4rem 0 0;white-space:nowrap;opacity:.7}
.col-collapsed .col-collapsed-label{display:block}
.icon-btn{font-size:12px;height:32px;padding:0 .8rem;display:flex;align-items:center;gap:6px;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-weight:500;transition:background var(--tf),border-color var(--tf),color var(--tf)}
.icon-btn svg{width:16px;height:16px;flex-shrink:0}
.icon-btn:hover{background:var(--bg3);border-color:var(--border2);color:var(--text)}
.icon-btn-ai{background:var(--navy);color:#fff;border-color:var(--navy)}
.icon-btn-ai svg{color:var(--gold)}
.icon-btn-ai:hover{background:#1a3161;color:#fff;border-color:#1a3161}
.alert-bar{margin:.75rem 1.25rem 0;background:color-mix(in srgb,var(--warning-bg) 55%,var(--bg2));border:1px solid color-mix(in srgb,var(--warning) 28%,transparent);border-radius:var(--radius);padding:.6rem .85rem;font-size:12px}
.alert-x{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.55;font-size:13px;line-height:1;padding:3px 6px;border-radius:6px;transition:opacity var(--tf),background var(--tf)}
.alert-x:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.alert-title{font-weight:600;color:var(--warning);display:flex;align-items:center;gap:6px;margin-bottom:.3rem}
.alert-row{color:var(--warning);padding:2px 0;font-size:11px}
.content{flex:1;overflow-y:auto;padding:1rem 1.25rem}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem}
.stat-label{font-size:11px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.stat-val{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.stat-sub{font-size:10px;color:var(--text3);margin-top:2px}
.chapter{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.ch-head{padding:.6rem 1rem;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background var(--tf)}
.ch-head:hover{background:var(--bg3)}
.ch-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.ch-title{font-size:12px;font-weight:600;flex:1}
.ch-title input{border:none;background:none;font-size:12px;font-weight:600;width:100%;outline:none;color:var(--text)}
/* El nombre de un grupo es un TÍTULO, no un campo de texto: un input siempre
   abierto se lee como formulario a medio llenar. Lleva el color de su grupo, y
   el lápiz lo vuelve editable en el sitio (y al soltarlo vuelve a ser título). */
/* El lápiz va PEGADO al nombre (si se va al borde derecho parece de otra cosa):
   el título ocupa lo suyo y el contador se empuja solo hacia la derecha. */
.ch-name{flex:0 1 auto;min-width:0;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-head .ch-name~.ch-prog{margin-left:auto}
.ch-edit{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:7px;background:none;color:var(--text3);cursor:pointer;opacity:.45;transition:opacity .12s,color .12s,background .12s}
.ch-edit svg{width:13px;height:13px}
.ch-head:hover .ch-edit{opacity:1}
.ch-edit:hover{color:var(--text);background:var(--bg3)}
.ch-name-edit{flex:1;min-width:0;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);background:var(--bg2);border:1px solid var(--gold);border-radius:8px;padding:.16rem .45rem;outline:none;box-shadow:0 0 0 3px rgba(245,166,35,.16)}
/* En táctil no hay hover: el lápiz se ve siempre y con el pulgar cómodo. */
body.mobile .ch-edit{opacity:.75;width:32px;height:32px}
body.mobile .ch-edit svg{width:15px;height:15px}
.ch-prog{font-size:11px;color:var(--text3)}
.ch-del{font-size:14px;color:var(--text3);cursor:pointer;padding:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:none;border:none;transition:background var(--tf),color var(--tf)}
.ch-del:hover{color:var(--danger);background:var(--danger-bg)}
.prog-bar{height:2px;background:var(--bg3);margin:0 1rem .4rem;border-radius:2px}
.prog-fill{height:100%;border-radius:2px;transition:width .4s}
.task-list{border-top:1px solid var(--border)}
.task-row{display:flex;align-items:center;gap:8px;padding:.45rem 1rem;border-bottom:1px solid var(--border);font-size:12px;transition:background var(--tf)}
.task-row:last-child{border-bottom:none}
.task-row:hover{background:var(--bg3)}
.task-check{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--border2);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color var(--tf),background var(--tf),transform .12s ease}
.task-check:hover:not(.done):not(.blocked){border-color:var(--success)}
.task-check:active{transform:scale(.88)}
.task-check.done{background:var(--success);border-color:var(--success)}
.task-name{flex:1;color:var(--text);line-height:1.3;background:none;border:none;outline:none;font-size:12px}
.task-name.done{color:var(--text3);text-decoration:line-through}
.city-pill{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:600;flex-shrink:0;white-space:nowrap}
.cm{background:var(--info-bg);color:var(--info)}.cg{background:#eeedfe;color:#4a42b0}.cb{background:var(--bg3);color:var(--text3);border:1px solid var(--border)}
.task-date{font-size:10px;color:var(--text3);flex-shrink:0;white-space:nowrap;border:none;background:none;width:78px}
.task-date.ov{color:var(--danger);font-weight:600}
.task-date.soon{color:var(--warning);font-weight:600}
.assign-chip{font-size:10px;padding:2px 8px;border-radius:999px;cursor:pointer;border:1px dashed var(--border2);color:var(--text3);background:none;white-space:nowrap;flex-shrink:0;transition:border-color var(--tf),color var(--tf),background var(--tf)}
.assign-chip:hover{border-color:var(--success);color:var(--success)}
.assign-chip.has{border-style:solid;border-color:color-mix(in srgb,var(--success) 45%,transparent);color:var(--success);background:var(--success-bg)}
/* Responsable como avatar: se lee de un vistazo mejor que 4 dígitos sueltos */
.assign-ava{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--success) 45%,transparent);background:var(--success-bg);color:var(--success);font-size:10px;font-weight:700;letter-spacing:.02em;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--tf),border-color var(--tf)}
.assign-ava:hover{background:color-mix(in srgb,var(--success) 16%,var(--success-bg));border-color:var(--success)}
/* Aviso de "esto espera tu decisión" dentro del panel de notificaciones */
.notif-pend{background:var(--warning-bg);color:var(--warning);font-size:11px;font-weight:600;padding:.45rem .6rem;border-radius:var(--radius-sm);margin-bottom:.7rem;line-height:1.4}
.notif-grab{width:38px;height:4px;border-radius:3px;background:var(--border);margin:2px auto 10px;flex-shrink:0}
/* Nada nuevo pero algo espera decisión: punto discreto, sin número que grite */
.rail-btn.has-pend::after{content:'';position:absolute;top:7px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--warning)}
/* WhatsApp en reposo bajito (fondo verde suave, icono verde) y sólido al pasar:
   el verde lleno en cada fila dominaba la lista entera. Mismo patrón que .cal-wa. */
.wa-circle{width:24px;height:24px;border-radius:8px;background:var(--success-bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--success);transition:background var(--tf),color var(--tf)}
.wa-circle:hover{background:var(--wa);color:#fff}
/* Acciones de fila: el icono queda de 13-15px pero el área tocable sube a 26px
   (margen negativo para no engordar la fila). El color inline de cada botón
   (comentarios, compartir…) le gana al hover rojo, que queda solo para los ✕. */
.task-del{font-size:13px;color:var(--text3);cursor:pointer;background:none;border:none;padding:0;width:28px;height:28px;margin:-4px 0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;flex-shrink:0;transition:background var(--tf),color var(--tf)}
.task-del:hover{color:var(--danger);background:var(--bg3)}
.add-row{display:flex;align-items:center;gap:7px;padding:.4rem 1rem;border-top:1px solid var(--border)}
.add-row input{flex:1;font-size:12px;border:none;background:none;color:var(--text2);outline:none}
.add-chapter-row{padding:.5rem 1rem;text-align:center}
.add-chapter-row button{font-size:12px;color:var(--text3);border:1px dashed var(--border2);border-radius:var(--radius-sm);padding:.4rem .8rem;background:none;cursor:pointer}
.add-chapter-row button:hover{background:var(--bg3)}
.field-wrap{max-width:480px;margin:0 auto}
.field-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:7px;display:flex;align-items:center;gap:10px;cursor:pointer}
.field-card:hover{background:var(--bg3)}
.field-section{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin:.85rem 0 .35rem;font-weight:600}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem;animation:backdropIn .12s ease-out;overscroll-behavior:contain}
.modal{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem;width:340px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.15);animation:modalIn .17s cubic-bezier(.22,1,.36,1);overscroll-behavior:contain}
.modal h3{font-size:15px;font-weight:700;margin-bottom:.25rem}
.modal p{font-size:12px;color:var(--text2);margin-bottom:1rem;line-height:1.5}
.modal label{font-size:11px;color:var(--text3);display:block;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.modal input,.modal select{width:100%;font-size:13px;padding:.55rem .85rem;border:1.5px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);outline:none;margin-bottom:.75rem;transition:border-color .15s,box-shadow .15s}
/* Las casillas/radios NO son campos de texto: el width:100% de arriba los
   estiraba a todo el ancho y empujaba el contenido de la fila fuera de vista
   (bug del selector de contactos, 2026-07-28). Vuelven a su tamaño natural. */
.modal input[type=checkbox],.modal input[type=radio]{width:auto;margin:0}
.modal-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:.5rem}
.btn{font-size:12px;padding:.4rem .9rem;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border2);background:var(--bg);color:var(--text2);font-weight:500;transition:background var(--tf),border-color var(--tf),color var(--tf),filter var(--tf)}
.btn:hover{background:var(--bg3)}
/* El hover genérico gris le ganaba a los botones de color por especificidad */
.btn-primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(.95)}
.btn-wa:hover{background:var(--wa);border-color:var(--wa);filter:brightness(.95)}
.btn-wa.reminded:hover{background:var(--success-bg);border-color:var(--success-bg);filter:none}
.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa);display:flex;align-items:center;gap:5px}
.btn-wa.reminded{background:var(--success-bg);color:var(--success);border-color:var(--success-bg)}
/* "hace 2 h": constancia del último recordatorio enviado */
.rem-ago{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:600;color:var(--text3);background:var(--bg3);border-radius:999px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.rem-ago.today{color:var(--success);background:var(--success-bg)}
/* Escalamiento: recordada varias veces y sigue vencida */
.esc-badge{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--danger);background:var(--danger-bg);border-radius:999px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.rem-group-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:.75rem 0 .3rem;color:var(--text3)}
.rem-item{display:flex;align-items:center;gap:8px;padding:.5rem .75rem;border-radius:var(--radius-sm);margin-bottom:4px;font-size:12px}
.rem-danger{background:var(--danger-bg);color:var(--danger)}.rem-warning{background:var(--warning-bg);color:var(--warning)}.rem-info{background:var(--info-bg);color:var(--info)}
/* Modal estilo Outlook */
.ol-modal{width:460px}
.ol-row{display:flex;align-items:center;gap:10px;margin-bottom:.7rem}
.ol-row label{width:80px;flex-shrink:0;margin:0;text-transform:none;font-size:12px;color:var(--text2);font-weight:500;letter-spacing:0}
.ol-row .fields{flex:1;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ol-row input,.ol-row select{margin:0}
.ol-row input[type=date]{width:150px}
.ol-row input[type=time]{width:100px}
.ol-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);cursor:pointer;white-space:nowrap}
.ol-check input{width:auto;margin:0}
/* Etiquetas largas dentro de ventanas: sin nowrap se desbordaban a lo ancho */
.ol-check.wrap{white-space:normal;align-items:flex-start;line-height:1.4}
.ol-check.wrap input{margin-top:2px;flex-shrink:0}
.ol-divider{height:1px;background:var(--border);margin:.6rem 0}
.ol-textarea{width:100%;font-size:13px;padding:.5rem .75rem;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);outline:none;min-height:60px;font-family:inherit;resize:vertical}
.ol-recur-box{background:var(--bg3);border-radius:var(--radius-sm);padding:.6rem;margin-bottom:.7rem;display:none}
.ol-recur-box.show{display:block}
.task-cfg-btn{font-size:12px;color:var(--text3);cursor:pointer;background:none;border:none;padding:0;width:28px;height:28px;margin:-4px 0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;flex-shrink:0;transition:background var(--tf),color var(--tf)}
.task-cfg-btn:hover{color:var(--info);background:var(--bg3)}
.label-pill{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:600;flex-shrink:0;white-space:nowrap;background:var(--bg3);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:border-color var(--tf),color var(--tf)}
.label-pill:hover{border-color:var(--border2);color:var(--text)}
/* Base de TODAS las insignias de fila (las variantes solo pisan fondo/color) */
.recur-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 8px;border-radius:999px;background:var(--info-bg);color:var(--info);font-weight:600;flex-shrink:0;white-space:nowrap;line-height:1.3}
.autodel-badge{font-size:10px;padding:2px 8px;border-radius:999px;background:var(--danger-bg);color:var(--danger);font-weight:600;flex-shrink:0;white-space:nowrap}
.contact-search-wrap{position:relative;margin-bottom:.75rem}
.contact-search-list{border:1px solid var(--border2);border-radius:var(--radius-sm);max-height:180px;overflow-y:auto;margin-top:4px;background:var(--bg2)}
.contact-opt{padding:.5rem .6rem;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.contact-opt:last-child{border-bottom:none}
.contact-opt:hover{background:var(--bg3)}
.contact-opt.sel{background:var(--info-bg)}
.contact-opt .ava{width:24px;height:24px;border-radius:50%;background:var(--info-bg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--info);flex-shrink:0}
.contact-opt-empty{padding:.6rem;font-size:11px;color:var(--text3);text-align:center}
.empty{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:13px}
.loader{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:13px;flex-direction:column;gap:10px}
.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--text2);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sup-topbar{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10}
.sup-topbar-inner{max-width:900px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:10px}
.origin-tabs{display:inline-flex;background:var(--bg3);border-radius:9px;padding:3px;gap:2px;margin-bottom:.85rem}
.origin-tab{font-size:11.5px;padding:.4rem .85rem;border-radius:7px;border:none;background:none;color:var(--text2);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.origin-tab.on{background:var(--bg2);color:var(--text);font-weight:700;box-shadow:0 1px 3px rgba(15,33,72,.12)}
.origin-n{font-size:9.5px;background:var(--gold);color:var(--accent-text);border-radius:999px;padding:1px 6px;font-weight:700}
.from-pill{font-size:10px;font-weight:600;color:var(--info);background:var(--info-bg);border-radius:999px;padding:2px 8px;flex-shrink:0;white-space:nowrap}
.share-opt{display:flex;align-items:stretch;gap:10px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--bg2);cursor:pointer;overflow:hidden;transition:border-color .12s,transform .06s}
.share-opt:hover{border-color:var(--gold);transform:translateY(-1px)}
.share-opt-bar{width:4px;flex-shrink:0}
.share-opt-title{font-size:13px;font-weight:600;color:var(--text);padding:.7rem 0 .15rem}
.share-opt-desc{font-size:11.5px;color:var(--text2);line-height:1.45;padding-bottom:.7rem;padding-right:.7rem}
.share-upgrade{font-size:10.5px;color:var(--gold);background:rgba(245,166,35,.12);border-radius:6px;padding:.35rem .5rem;margin:0 .7rem .7rem 0;display:inline-block;font-weight:600}
.sup-shell .task-list{font-size:0}
.sup-shell .task-list>*{font-size:12px}
.sup-shell .task-row{min-height:36px;padding:.4rem .85rem;line-height:1.25}
.sup-shell .add-row{min-height:34px;padding:.35rem .85rem}
.sup-shell .chapter{margin-bottom:.85rem}
.sup-shell .ch-head{padding:.55rem .85rem}
.task-date{font-size:11px;color:var(--text3);cursor:pointer;padding:2px 6px;border-radius:5px;flex-shrink:0;white-space:nowrap}
.task-date:hover{background:var(--bg3)}
.task-date.ov{color:var(--danger);font-weight:600}
.task-date.soon{color:var(--warning);font-weight:600}
.task-date.empty{opacity:.6}
.sup-shell{padding:1.25rem;max-width:520px;margin:0 auto}
.sup-shell.wide{max-width:1000px}
/* Aviso de varios tableros (v77): banner informativo, fórmula del sistema */
.sup-multi{display:flex;align-items:flex-start;gap:11px;margin-bottom:.85rem;padding:.85rem .95rem;background:color-mix(in srgb,var(--info-bg) 55%,var(--bg2));border:1px solid color-mix(in srgb,var(--info) 28%,transparent);border-radius:var(--radius)}
.sup-multi-ic{flex-shrink:0;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}
.sup-multi-tx{flex:1;min-width:0}
.sup-multi-t{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.sup-multi-s{display:block;font-size:11.5px;color:var(--text2);line-height:1.45}
/* Mismo botón que el "Crear mi cuenta gratis" del pie del panel: es la misma
   acción, y en oro sobre navy el contraste aguanta (blanco sobre --info no). */
.sup-multi-cta{display:inline-flex;align-items:center;min-height:36px;margin-top:.65rem;font-size:11.5px;font-weight:700;padding:.42rem 1rem;border-radius:var(--radius-sm);border:none;background:var(--gold);color:var(--accent-text);cursor:pointer;transition:opacity var(--tf)}
.sup-multi-cta:hover{opacity:.88}
.sup-multi-x{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px -6px 0 0;background:none;border:none;color:var(--text3);font-size:13px;line-height:1;cursor:pointer;transition:color var(--tf)}
.sup-multi-x:hover{color:var(--text2)}
/* El aviso de privacidad del panel del ejecutor. El tono más bajo de la
   pantalla a propósito: tiene que estar y poder tocarse, no llamar la atención.
   El enlace se subraya —si no, a este tamaño y color nadie sabría que lo es. */
.sup-legal{margin-top:1.4rem;text-align:center;font-size:10.5px;line-height:1.55;color:var(--text3)}
/* El padding no se ve —el texto sigue midiendo 10.5px— pero sube el área
   táctil de 14 a 26px. Un aviso legal que en el teléfono cuesta acertar con el
   pulgar está puesto para cumplir, no para que alguien lo lea. */
.sup-legal a{display:inline-block;padding:6px 2px;color:var(--text3);text-decoration:underline;text-underline-offset:2px;transition:color var(--tf)}
.sup-legal a:hover{color:var(--text2)}
@media(min-width:820px){
  .sup-shell{max-width:760px;padding:1.75rem 1.25rem}
  .sup-shell .field-section{margin-top:1.4rem}
}
@media(min-width:1100px){
  .sup-shell{max-width:900px}
}
.sup-header{background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 1.25rem;display:flex;align-items:center;gap:10px}
.sup-header h1{font-size:15px;font-weight:700;flex:1}
.sup-badge{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600}
.big-check{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .12s;cursor:pointer}
.big-check:active{transform:scale(.85)}
.big-check.done{background:var(--success);border-color:var(--success);animation:pop .25s ease}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes toastIn{0%{transform:translateX(40px);opacity:0}100%{transform:translateX(0);opacity:1}}
/* ── D1: foco de teclado visible en TODA la app ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
/* ── Fase B: pantalla de login del coordinador ── */
@keyframes loginIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1.5rem}
.login-card{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.7rem 1.6rem 1.6rem;animation:loginIn .14s ease-out}
.login-sub{text-align:center;font-size:13px;color:var(--text2);margin-bottom:1.2rem}
/* Título único del acceso (refinamiento 2026-08-21): sustituye al subtítulo
   "Acceso de coordinadores"; el logo queda de firma, no de protagonista. */
.login-title{margin:0 0 1.1rem;text-align:center;font-size:17px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.3}
.login-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin:.75rem 0 .3rem}
.login-input{width:100%;height:44px;padding:0 .8rem;font-size:14px;font-family:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);transition:border-color var(--tf),box-shadow var(--tf)}
.login-input::placeholder{color:var(--text3)}
.login-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.login-btn{width:100%;height:44px;margin-top:1rem;background:var(--gold);color:var(--accent-text);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:filter var(--tf)}
.login-btn:hover{filter:brightness(.95)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);border-radius:8px;padding:.55rem .75rem;font-size:12.5px;margin-top:1rem;line-height:1.4}
.login-foot{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--border);font-size:12px;color:var(--text2);text-align:center;line-height:1.5}
.login-legal{margin-top:.7rem;text-align:center;font-size:11.5px;color:var(--text3)}
.login-legal a{color:var(--text2);text-decoration:none}
.login-legal a:hover{text-decoration:underline}
.oauth-btns{display:flex;flex-direction:column;gap:.5rem}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;height:44px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background var(--tf),border-color var(--tf)}
.oauth-btn:hover{background:var(--bg);border-color:var(--text3)}
.oauth-btn:disabled{opacity:.6;cursor:default}
.oauth-btn svg{width:18px;height:18px;display:block;flex:none}
/* Código de acceso. Un solo campo, no varias casillas: así se puede pegar el
   código de una vez y el autocompletado del teléfono lo rellena solo. */
.otp-input{width:100%;height:58px;text-align:center;font-size:26px;font-weight:700;letter-spacing:.4em;text-indent:.4em;font-family:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:10px}
.login-link{background:none;border:none;color:var(--gold);font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;padding:0}
.login-link:hover{text-decoration:underline}
.login-link:disabled{opacity:.5;cursor:default;text-decoration:none}
.oauth-div{display:flex;align-items:center;gap:.7rem;margin:.95rem 0 .1rem;color:var(--text3);font-size:11.5px;font-weight:500;letter-spacing:0}
.oauth-div::before,.oauth-div::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--border) 70%,transparent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Chips de días de la semana (recurrencia por días específicos) */
.dia-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;user-select:none;transition:all .1s}
.dia-chip:hover{border-color:var(--gold)}
.dia-chip.on{background:var(--gold);border-color:var(--gold);color:var(--accent-text)}
.dia-chip input{position:absolute;opacity:0;width:0;height:0}
/* Botón ⋯ de fila (oculto en desktop, visible en móvil) y su menú de acciones */
.my-more{display:none}
.mymenu{display:flex;flex-direction:column;gap:2px;margin:.4rem 0 .2rem}
.mymenu-item{display:flex;align-items:center;gap:11px;padding:.7rem .6rem;border:none;background:none;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text);text-align:left;font-family:inherit}
.mymenu-item:hover{background:var(--bg3)}
.mymenu-item.danger{color:var(--danger)}
.mymenu-item .bi svg{width:17px;height:17px}
/* ── Dashboard v2 (dv-*) ── */
.dv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:1rem}
.dv-tile{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.85rem .95rem;display:flex;align-items:center;gap:12px;min-width:0}
.dv-tile-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv-tile-ic svg{width:17px;height:17px}
.dv-tile-n{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.dv-tile-l{font-size:10.5px;color:var(--text2);font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1rem;min-width:0}
.dv-card-h{display:flex;align-items:baseline;gap:10px;margin-bottom:.75rem;flex-wrap:wrap}
.dv-card-t{font-size:13px;font-weight:700;color:var(--text)}
.dv-card-s{font-size:10.5px;color:var(--text3)}
.dv-chip{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;color:var(--text2);background:var(--bg3);border-radius:12px;padding:.2rem .6rem;font-weight:600}
.dv-chip b{font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.dv-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.dv-2col{grid-template-columns:1fr}}
.dv-rank-row{display:flex;align-items:center;gap:9px;padding:.5rem .15rem;border-bottom:1px solid var(--border)}
.dv-rank-row:last-child{border-bottom:none}
.dv-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.dv-bar>div{height:100%;border-radius:3px}
.dv-col .dv-hit{fill:transparent}
.dv-col:hover .dv-hit{fill:rgba(245,166,35,.08)}
.dv-col .dv-guide{opacity:0;transition:opacity .1s}
.dv-col:hover .dv-guide{opacity:.55}
#dv-tip{position:fixed;display:none;background:var(--navy);color:#fff;font-size:11px;line-height:1.5;padding:.4rem .65rem;border-radius:7px;pointer-events:none;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap}
#dv-tip b{color:var(--gold)}
.feed-bar{margin:.75rem 1.25rem 0;background:color-mix(in srgb,var(--success-bg) 55%,var(--bg2));border:1px solid color-mix(in srgb,var(--success) 28%,transparent);border-radius:var(--radius);padding:.6rem .85rem;font-size:12px}
.feed-title{font-weight:600;color:var(--success);display:flex;align-items:center;gap:6px;margin-bottom:.3rem;cursor:pointer}
.feed-row{color:var(--success);padding:2px 0;font-size:11px;display:flex;justify-content:space-between;gap:8px}
.feed-time{opacity:.7;flex-shrink:0}
.field-info{flex:1;min-width:0}
.field-name{font-size:14px;font-weight:600;color:var(--text)}
.field-meta{font-size:11px;color:var(--text3);margin-top:3px}
@media(max-width:900px){.col-books,.col-sections{width:130px;min-width:130px}.col-pages{width:160px;min-width:160px}}
@media(max-width:768px){
  .app{position:relative}
  /* En móvil, mostrar una columna a la vez según S.mobileView */
  .mobile-nav{display:none}
  body.mobile .rail{display:none!important}
  /* Barra inferior EN el layout (no fixed): en iOS PWA los elementos fijos al
     viewport se descuadran con rebotes/teclado. Como último hijo flex del .app
     siempre queda pegada al fondo real; auto-ocultar = deslizarla fuera con
     margen negativo (el contenido crece solo). */
  body.mobile .mnav{display:flex;position:static;order:99;flex-shrink:0;background:rgba(15,33,72,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid rgba(255,255,255,.08);padding:9px 2px calc(2px + min(env(safe-area-inset-bottom,0px),30px));box-shadow:0 -3px 14px rgba(0,0,0,.22);transition:margin-bottom .32s cubic-bezier(.32,1.2,.35,1)}
  body.mobile.nav-hidden .mnav{margin-bottom:calc(-72px - env(safe-area-inset-bottom,0px))}
  /* Sin hover-reveal en móvil: los ✕/editar ocultos por hover hacían que iOS pidiera DOS taps */
  body.mobile .item-edit,body.mobile .item-del{display:none!important}
  /* Sin botones no hay nada que reservar: la franja de acciones se recoge */
  body.mobile .sect-item,body.mobile .tree-page{--tree-act:.7rem}
}
/* ↑ Cierra el @media de móvil. Lo de abajo es GLOBAL: estaba cayendo dentro del
   media query por un cierre que faltaba, así que el panel Equipo se quedaba sin
   estilos en escritorio y el modificador veía los ✕ de borrar fuera de móvil. */
/* El modificador no borra estructura: se le ocultan los botones (la RLS lo bloquea igual) */
body.role-mod .item-del,body.role-mod .ch-del{display:none!important}
/* Panel Equipo / Accesos */
.team-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px}
.team-row{display:flex;align-items:center;gap:12px;padding:11px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;transition:border-color .15s}
.team-row:hover{border-color:var(--border2)}
.team-row .ava{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.team-info{flex:1;min-width:0}
.team-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-name .you{color:var(--text3);font-weight:500}
.team-meta{display:flex;align-items:center;gap:7px;margin-top:4px}
.team-meta .txt{font-size:11.5px;color:var(--text3)}
.role-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.role-pill.admin{background:var(--gold);color:#fff}
.role-pill.mod{background:var(--info-bg);color:var(--info)}
.btn-mini{background:none;border:none;cursor:pointer;font-size:15px;color:var(--text3);padding:5px 8px;border-radius:8px;line-height:1;flex-shrink:0}
.btn-mini.danger:hover{color:#fff;background:var(--danger)}
.btn-mini svg{width:16px;height:16px}
.btn-mini:not(.danger):hover{color:var(--text);background:var(--bg3)}
/* Identidad del panel (Herramientas). Mismas tarjetas que Equipo y accesos:
   antes era un modal reciclado, con <label> sueltos y estilos en línea. */
.set-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:10px}
.set-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.set-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.set-row input{flex:1;min-width:150px;margin:0}
.set-hint{font-size:11.5px;color:var(--text3);line-height:1.5;margin-top:9px}
.set-ok{font-size:11.5px;color:var(--success);font-weight:700;margin-top:8px;display:none}
.set-wa{display:flex;align-items:center;gap:10px;background:var(--success-bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.set-wa .n{flex:1;font-size:14px;font-weight:700;color:var(--success);letter-spacing:.02em}
/* Historial de actividad */
.hist-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin:0 0 14px}
.hist-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.hist-kpi .n{font-size:22px;font-weight:700;line-height:1.1;color:var(--text)}
.hist-kpi .l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;font-weight:700}
.hist-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.hist-chip{font-size:11px;padding:5px 12px;border-radius:999px;cursor:pointer;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);white-space:nowrap;font-weight:600;font-family:inherit}
.hist-chip:hover{border-color:var(--text3)}
.hist-chip.on{background:var(--text);border-color:var(--text);color:var(--bg2)}
.hist-day{font-size:11px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px;display:flex;align-items:center;gap:9px}
.hist-day::after{content:"";flex:1;height:1px;background:var(--border)}
.hist-row{display:flex;gap:11px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--ev,var(--border2));margin-bottom:7px;transition:border-color .15s}
@media(hover:hover){.hist-row:hover{border-color:var(--border2)}}
.hist-ava{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:.02em}
.hist-main{flex:1;min-width:0}
.hist-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hist-ev{display:inline-block;padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.hist-task{font-size:13px;font-weight:600;color:var(--text);word-break:break-word}
.hist-meta{font-size:11px;color:var(--text3);margin-top:3px}
.hist-meta b{color:var(--text2);font-weight:600}
.hist-detail{font-size:11.5px;color:var(--text2);margin-top:3px}
.hist-time{font-size:10.5px;color:var(--text3);flex-shrink:0;white-space:nowrap}
/* Columna derecha: la hora arriba y las acciones debajo. Antes la hora iba
   suelta; ahora comparte sitio con Devolver y Comentarios. */
.hist-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.hist-acts{display:flex;gap:4px}
.hist-act{display:inline-flex;align-items:center;gap:3px;padding:.24rem .42rem;border-radius:7px;
  border:1px solid var(--border);background:var(--bg);color:var(--text3);cursor:pointer;line-height:1}
.hist-act:hover{border-color:var(--border2);color:var(--text2)}
.hist-act.danger{color:var(--danger);border-color:var(--danger)}
.hist-act .bi{width:13px;height:13px}
.hist-act-n{font-size:9px;font-weight:700}
/* La tarea abre su ficha, así que se comporta como enlace. Solo cuando la
   tarea sigue existiendo: hay eventos de tareas ya borradas. */
.hist-task.link{cursor:pointer}
.hist-task.link:hover{text-decoration:underline;text-underline-offset:2px}
/* Etiquetas de contexto. margin-left:auto las manda al hueco que quedaba
   vacío entre el nombre de la tarea y la hora. */
.hist-tags{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.hist-tag{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;background:var(--bg3);color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
.hist-tag.late{background:var(--danger-bg);color:var(--danger)}
.hist-tag.ontime{background:var(--success-bg);color:var(--success)}
.hist-tag.warn{background:var(--warning-bg);color:var(--warning)}
/* Nombre completo al pasar por encima de unas iniciales. Sale a la derecha y
   centrado (mismo patrón que .rail-tip): arriba o abajo lo recortarían los
   contenedores con overflow del historial. Con mouse basta :hover; en la app
   táctil no hay hover, así que el toque enciende .tip-on (ver tapTip). */
.ini-tip{position:relative}
.ini-tip::after{content:attr(data-name);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#2b2b2e;color:#fff;font-size:11px;font-weight:600;text-transform:none;letter-spacing:normal;padding:.3rem .6rem;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:60;border:1px solid #4a4a4e}
.ini-tip:hover::after,.ini-tip.tip-on::after{opacity:1}
@media(max-width:768px){
  /* App CLAVADA al viewport (como una app nativa): el documento jamás scrollea —
     scrollean los contenedores internos. Evita que todo se deslice bajo el status
     bar en la PWA standalone y que asome el fondo beige arriba/abajo. */
  html{-webkit-text-size-adjust:100%}
  body.mobile{position:fixed;inset:0;width:100%;overflow:hidden;background:var(--navy)}
  /* Cadena de alturas 100%: el body ya está clavado al viewport (position:fixed;
     inset:0), así que 100% ES la pantalla exacta. (100dvh miente en PWA standalone
     de iOS y dejaba la barra flotando a media pantalla.) */
  body.mobile #root{height:100%}
  /* Altura = área visible real (--vvh) → en Safari la barra inferior queda
     SOBRE la barra del navegador, no debajo. En standalone iOS 18 queda un
     margen que la web no puede eliminar (se corrige en la app nativa/Capacitor).
     Diagnóstico: triple-tap sobre el título "Hoy". */
  body.mobile .app{position:fixed;top:0;left:0;right:0;height:var(--vvh,100vh);flex-direction:column;min-height:0;padding-bottom:0;padding-top:env(safe-area-inset-top,0px)}
  body.mobile .col-books,body.mobile .col-sections,body.mobile .col-pages,body.mobile .main{width:100%;min-width:0;max-height:none;display:none}
  body.mobile .resize-handle{display:none}
  /* La home scrollea ENTERA en un solo carril: la columna es el scroller y la
     lista de libros deja de ser un scroller interno (regla más abajo). */
  body.mobile.mv-books .col-books{display:flex;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Ningún hijo se comprime para "caber": si no cabe, la columna scrollea.
     (El drill .mbd no se afecta: usa height:100% y llena exacto.) */
  body.mobile.mv-books .col-books>*{flex-shrink:0}
  body.mobile.mv-sections .col-sections{display:flex;flex:1;min-height:0}
  body.mobile.mv-pages .col-pages{display:flex;flex:1;min-height:0}
  body.mobile.mv-main .main{display:flex;flex:1;min-height:0}
  /* Dentro de una hoja: fondo "amarillo bajito" tras las tarjetas, como escritorio */
  body.mobile .main{background:var(--bg)}
  body.mobile .main .content{background:var(--bg)}
  body.mobile .col-collapse-btn,body.mobile .col-collapsed-label{display:none!important}
  body.mobile .panel-view{width:100%;flex:1;min-height:0;max-height:none;overflow-x:hidden}
  body.mobile .pv-body{padding:1rem;box-sizing:border-box;max-width:100%}
  /* Encabezado alineado con el cuerpo (mismo margen izq/der) para que no se vea descuadrado */
  body.mobile .pv-header{padding:.85rem 1rem}
  /* Filas de Seguimiento: que el botón nunca se salga; si aprieta, baja de línea */
  body.mobile .rem-row{flex-wrap:wrap}
  body.mobile .rem-row>div{min-width:0}
  body.mobile .rem-card{max-width:100%;box-sizing:border-box}
  /* ── Home móvil "Hoy primero" ── */
  body.mobile .mytasks-shortcut{display:none} /* redundante con la pestaña Pendientes */
  /* max-height 1600: es SOLO el techo de la animación del pliegue, no layout —
     va muy por encima de cualquier contenido posible (el código acota a 3+2
     previews). El 640 anterior sí recortaba: "Asignadas a mí" quedaba cortada.
     flex-shrink:0: la columna flex jamás comprime este bloque; si no cabe, la
     columna scrollea. */
  body.mobile .mtoday{display:block;padding:10px 16px 4px;flex-shrink:0;max-height:1600px;transition:max-height .32s cubic-bezier(.25,.8,.35,1),opacity .25s,padding .32s cubic-bezier(.25,.8,.35,1);overflow:hidden}
  /* Hoy colapsado (la clase la pone el motor de gestos al soltar el dedo) */
  body.mobile .col-books.hoy-collapsed .mtoday{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
  /* Mini-barra "Hoy" cuando está colapsado: el tope queda ocupado y con salida */
  body.mobile .mtoday-mini{display:none;align-items:center;gap:8px;padding:12px 18px 10px;color:#E8ECF3;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;border-bottom:1px solid rgba(255,255,255,.06)}
  /* Con la columna como scroller único, la mini-barra y su "+ Agregar" quedan
     fijados arriba (sticky) igual que cuando vivían fuera del scroller interno. */
  body.mobile .col-books.hoy-collapsed .mtoday-mini{display:flex;animation:mviewIn .2s cubic-bezier(.2,.7,.3,1);position:sticky;top:0;z-index:4;background:var(--navy)}
  /* top 42px = alto medido de la mini-barra (43) menos 1 de solape: sin ranura
     entre las dos superficies navy al scrollear debajo. */
  body.mobile .col-books.hoy-collapsed .hq-mini{position:sticky;top:42px;z-index:4;background:var(--navy)}
  body.mobile .mtoday-mini-t{letter-spacing:-.01em}
  body.mobile .mtoday-mini-chip{min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 6px}
  body.mobile .mtoday-mini-chip.venc{background:rgba(240,115,111,.2);color:#F0736F}
  body.mobile .mtoday-mini-chip.hoy{background:rgba(245,166,35,.2);color:var(--gold)}
  body.mobile .mtoday-mini-ok{font-size:12px;font-weight:600;color:var(--success)}
  body.mobile .mtoday-mini-caret{margin-left:auto;color:#8593AE;display:inline-flex}
  /* (safe-area superior: la maneja body.mobile .app arriba — layout clavado al viewport) */
  /* Volver al inicio desde cualquier vista de panel (Historial, Dashboard, etc.) */
  /* Ajustes móvil (2026-09-01): la banda horizontal de pestañas desapareció —
     esas categorías nunca fueron vistas hermanas, eran destinos de configuración.
     La raíz es un mapa jerárquico agrupado (aj-*); el shell apilado se conserva
     para los sub-paneles embebidos (tools-pane-full). */
  body.mobile .tools-shell{flex-direction:column;max-width:none;min-height:0;border:none;background:none;border-radius:0}
  body.mobile .tools-pane-full{padding:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
  body.mobile .tools-pane-full .tools-pane{padding:1rem}
  body.mobile .tools-opt{padding:.85rem .5rem}
  /* Renglón-invitación al cajón de Pendientes (también funciona con tap) */
  body.mobile .mtoday-pendhint{display:flex;align-items:center;justify-content:center;gap:7px;width:fit-content;margin:0 auto 12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:700;font-family:inherit;padding:8px 18px;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:.01em}
  body.mobile .mtoday-pendhint:active{background:rgba(255,255,255,.16)}
  /* Header compacto estilo Spotify: avatar + título + buscar, sin saludo ni fecha */
  body.mobile .mtoday-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  /* padding 9px: 26px de icono + 18 = área táctil de 44px sin agrandar el dibujo */
  body.mobile .mtoday-search{margin-left:auto;background:none;border:none;color:#E8ECF3;padding:9px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-flex}
  body.mobile .mtoday-search svg{width:26px;height:26px}
  body.mobile .mtoday-search:active{opacity:.7}
  /* La campana va pegada a buscar: solo la primera empuja hacia la derecha */
  body.mobile .mtoday-bell{margin-left:0;position:relative}
  body.mobile .mtoday-bell-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
  body.mobile .mtoday-bell.has-pend::after{content:'';position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--warning)}
  /* Línea activa para capturar un pendiente al vuelo (también dispara el cajón) */
  /* #C6CFDF (antes #A9B4C9): seguía leyéndose apagado sobre el navy; sube un
     paso de luminancia sin volverse botón ni amarillo. */
  body.mobile .mtoday-quickadd{display:block;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.22);color:#C6CFDF;font-size:14.5px;font-weight:600;font-family:inherit;text-align:left;padding:8px 2px 11px;margin:0 0 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--tf)}
  body.mobile .mtoday-quickadd:active{color:#E8ECF3}
  /* ＋ Nuevo libro vive en el encabezado LIBROS (el botón grande sobraba aquí) */
  body.mobile .add-book{display:none}
  /* 34px visibles con margen negativo: target más cómodo sin engordar la fila */
  body.mobile .mob-addbook{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);border:none;color:#E8ECF3;font-size:18px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;margin:-2px 10px -2px 0;flex-shrink:0;transition:background var(--tf)}
  body.mobile .mob-addbook:active{background:rgba(255,255,255,.2)}
  body.mobile .mtoday-ava{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--accent-text);font-size:15px;font-weight:700;border:none;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
  body.mobile .mtoday-ava:active{opacity:.85}
  /* Puntito solo cuando perteneces a más de un tablero: es la única pista de que
     ese avatar hace algo más que abrir el menú. Sin él, el cambiador vivía
     enterrado en Herramientas › Equipo y nadie lo encontraba. */
  body.mobile .mtoday-ava{position:relative}
  body.mobile .mtoday-ava-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
    border-radius:50%;background:var(--info,#378ADD);border:2px solid var(--navy,#0F2148)}
  body.mobile .mtoday-title{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.1}
  /* "Mis pendientes" ocupa el lugar del título (entre el avatar y buscar) y abre
     el panel de pendientes al tocarlo. */
  body.mobile .mtoday-pendbtn{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:none;border:none;color:#fff;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-family:inherit;padding:0;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
  body.mobile .mtoday-pendbtn-c{display:inline-flex;color:#8593AE}
  body.mobile .mtoday-pendbtn-c svg{width:17px;height:17px}
  body.mobile .mtoday-pendbtn-n{background:var(--gold);color:var(--accent-text);border-radius:999px;font-size:12px;font-weight:700;padding:1px 8px}
  body.mobile .mtoday-chips{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
  body.mobile .mtoday-chip{border:none;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
  body.mobile .mtoday-chip:active{opacity:.7}
  body.mobile .mtoday-chip.venc{background:rgba(240,115,111,.16);color:#F0736F}
  body.mobile .mtoday-chip.hoy{background:rgba(245,166,35,.16);color:var(--gold)}
  body.mobile .mtoday-chip.prox{background:rgba(255,255,255,.08);color:#A9B4C9}
  /* Tarjeta del Hoy en "amarillo bajito" (superficie de trabajo, como escritorio) */
  /* Marco amarillo bajito alrededor; cada tarea es una tarjeta BLANCA dentro */
  /* "Requieren seguimiento" y "Asignadas a mí" son módulos HERMANOS (2026-08-31):
     misma caja blanca, mismo header, mismas filas, mismo CTA. La urgencia ya no
     tiñe la tarjeta entera — vive en el icono ámbar, el resumen y los badges.
     Dos responsabilidades distintas, una sola gramática visual. */
  body.mobile .mtoday-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
  /* Las vencidas son filas del contenedor (no tarjetas): separador suave entre ellas.
     El header ya no es un rótulo en versalitas: usa la MISMA anatomía .mtoday-recv
     que "Asignadas a mí" (icono + título + resumen + chevron), con el icono en
     ámbar (.seg) en vez de violeta. */
  body.mobile .mtoday-row{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
  body.mobile .mtoday-card .mtoday-row{border-top:1px solid var(--border)}
  body.mobile .mtoday-card .mtoday-row:active{background:var(--bg3)}
  body.mobile .mtoday-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  body.mobile .mtoday-name{font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* La metadata es flex: el texto se trunca, pero la pill "sin respuesta" nunca se recorta */
  body.mobile .mtoday-meta{display:flex;align-items:center;gap:5px;min-width:0;font-size:11.5px;color:var(--text2);line-height:16px}
  body.mobile .mtoday-meta-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  /* La pill "sin respuesta" es la excepción (recordatorios ignorados); el punto ya
     dice "vencida" — baja a 600 y se ciñe a la línea (16px) para que las filas
     con y sin pill midan exactamente igual */
  body.mobile .mtoday-meta .esc-badge{font-weight:600;height:16px;padding:0 7px;vertical-align:top}
  body.mobile .mtoday-chev{color:var(--text3);font-size:18px;flex-shrink:0}
  /* El color era var(--warning) puro y en tema claro daba 2.94:1 sobre el fondo
     del bloque —por debajo del 4.5 que pide WCAG para 12.5px—. Mezclarlo con
     --text lo arregla en los DOS temas a la vez, porque --text es oscuro en
     claro y claro en oscuro: 2.94→5.09 y 7.85→9.06. Es la misma fórmula que ya
     usa .mtoday-card-head ahí arriba, no un invento aparte. */
  body.mobile .mtoday-more{display:block;width:100%;padding:14px;background:none;border:none;border-top:1px solid var(--border);color:var(--text2);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
  body.mobile .mtoday-more:active{opacity:.65}
  /* Acceso "Asignadas a mí" en la home: secundario frente al card de Seguimiento */
  body.mobile .mtoday-recv-block{margin-top:10px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;overflow:hidden}
  body.mobile .mtoday-recv{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:inherit;text-align:left}
  body.mobile .mtoday-recv:active{background:var(--bg3)}
  body.mobile .mtoday-recv-block .mtoday-row{border-top:1px solid var(--border)}
  body.mobile .mtoday-recv-block .mtoday-row:active{background:var(--bg3)}
  body.mobile .mtoday-recv-more{display:block;width:100%;padding:14px;background:none;border:none;border-top:1px solid var(--border);color:var(--text2);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
  body.mobile .mtoday-recv-more:active{opacity:.65}
  body.mobile .mtoday-recv-ic{width:34px;height:34px;border-radius:10px;background:#7F77DD;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  /* El gemelo ámbar: "Requieren seguimiento". Hex fijo como el violeta, elegido
     para que el icono blanco conserve contraste también sobre el tema oscuro. */
  body.mobile .mtoday-recv-ic.seg{background:#B4700F}
  body.mobile .mtoday-recv-ic .bi svg{width:17px;height:17px}
  body.mobile .mtoday-recv-txt{display:flex;flex-direction:column;flex:1;min-width:0}
  body.mobile .mtoday-recv-t{font-size:14px;font-weight:700;color:var(--text)}
  body.mobile .mtoday-recv-s{font-size:11.5px;color:var(--text3);margin-top:1px}
  body.mobile .mtoday-clear{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px}
  body.mobile .mtoday-clear-ic{width:34px;height:34px;border-radius:50%;background:var(--success-bg);color:var(--success);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  body.mobile .mtoday-clear-t{font-size:15px;font-weight:700;color:var(--text)}
  body.mobile .mtoday-clear-s{font-size:12px;color:var(--text3);margin-top:1px}
  /* Libro desplegado en la home (drill-down): ocultar Hoy/lista y mostrar el libro */
  body.mobile .col-books.mob-drilled .head,body.mobile .col-books.mob-drilled #book-list,body.mobile .col-books.mob-drilled .add-book{display:none!important}
  /* Mismo lenguaje que la vista de escritorio: fondo claro, TARJETAS blancas
     (var(--bg2), borde, radio, sombra), encabezados de grupo en GRIS, texto
     azul, dorado solo de acento. Idéntico a .field-card / .stat-card. */
  body.mobile .mbd{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg)}
  body.mobile .mbd-top{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 0}
  body.mobile .mbd-back{background:none;border:none;border-radius:10px;color:var(--navy);font-size:16px;font-weight:700;font-family:inherit;min-height:44px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:4px}
  body.mobile .mbd-back:active{opacity:.85}
  body.mobile .mbd-urgent{display:inline-flex;align-items:center;gap:6px;background:none;color:var(--danger);border:none;border-radius:8px;margin:0 12px;padding:6px 6px 10px;font-size:12.5px;text-align:left;min-height:40px;font-weight:700;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  body.mobile .mbd-urgent svg{width:14px;height:14px}
  body.mobile .mbd-title{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text);padding:2px 16px 0}
  body.mobile .mbd-title .book-dot{width:12px;height:12px}
  /* En la lista del móvil el punto baja un pixel: la fila es más ancha y el
     mismo 8px pesaba más de lo que debe pesar una señal de identidad. */
  body.mobile .book-item .book-dot{width:7px;height:7px}
  body.mobile .mbd-title-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.mobile .mbd-menu{background:none;border:none;color:var(--text3);font-size:24px;line-height:1;padding:4px 8px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;flex-shrink:0}
  body.mobile .mbd-body{flex:1;overflow-y:auto;padding:4px 16px 16px}
  /* Encabezado de grupo (sección): gris como VENCIDAS/COMPLETADAS del escritorio */
  body.mobile .mbd-sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);padding:14px 2px 6px;display:flex;align-items:center;gap:8px}
  body.mobile .mbd-sec:before{content:'';width:3px;height:12px;border-radius:3px;background:var(--gold);flex-shrink:0}
  /* Hoja = tarjeta blanca (idéntica a .field-card) */
  body.mobile .mbd-group{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
  body.mobile .mbd-group .mbd-page+.mbd-page{border-top:1px solid var(--border)}
  body.mobile .mbd-page{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px;background:none;border:none;border-radius:0;margin-bottom:0;min-height:52px;color:var(--text);font-size:15.5px;font-weight:600;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(15,33,72,.05)}
  body.mobile .mbd-page:active{background:var(--bg3)}
  body.mobile .mbd-page-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.mobile .mbd-page-meta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text3);font-weight:600;flex-shrink:0}
  body.mobile .mbd-page-meta .mtoday-chev{color:var(--text3);font-size:18px}
  body.mobile .mbd-page-meta .overdue-dot{box-shadow:none}
  body.mobile .mbd-empty{font-size:12.5px;color:var(--text3);padding:4px 4px 8px}
  body.mobile .mbd-addpage{background:none;border:none;color:var(--text2);font-size:13px;font-weight:600;font-family:inherit;padding:10px 4px;min-height:44px;text-align:left;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent}
  body.mobile .mbd-addsec{margin:16px 4px 4px;padding:12px;border:1px dashed var(--border2);border-radius:10px;background:none;color:var(--text2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* Libros replegables bajo el Hoy */
  body.mobile .col-books .head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:auto;padding:.8rem 1.1rem .6rem;-webkit-tap-highlight-color:transparent}
  body.mobile .mob-caret{display:inline-flex;color:#8593AE;transition:transform .18s}
  body.mobile .col-books.mob-closed .mob-caret{transform:rotate(-90deg)}
  body.mobile .col-books.mob-closed #book-list,body.mobile .col-books.mob-closed .add-book{display:none}
  /* Colapsado, "Gestionar libros" tampoco: quedaba flotando solo bajo el
     encabezado. Vive al final de la lista, solo cuando la lista está abierta. */
  body.mobile .col-books.mob-closed .mob-manage{display:none}
  /* Un solo scroll: anular el scroller interno que el template pone inline */
  body.mobile.mv-books #book-list{flex:0 0 auto!important;overflow:visible!important;min-height:auto!important}
  /* Despliegue de Libros: fundido muy discreto, solo en el toque (clase
     transitoria books-anim, sin re-render) y nunca con reduced-motion */
  @media (prefers-reduced-motion:no-preference){
    body.mobile .col-books.books-anim #book-list{animation:mviewIn .16s ease-out}
  }
  body.mobile .book-item{padding:.85rem 1.1rem;font-size:16.5px;font-weight:600}
  /* iOS: inputs bajo 16px disparan auto-zoom al enfocar */
  body.mobile input,body.mobile select,body.mobile textarea{font-size:16px}
  /* Transiciones de vista (la clase solo se pone cuando la vista cambia):
     - view-anim: fundido (cambio de pestaña, sin jerarquía)
     - view-anim-push: entra desde la derecha (bajar un nivel — NavigationStack)
     - view-anim-pop: entra desde la izquierda (volver un nivel) */
  body.mobile .app.view-anim .col-books,body.mobile .app.view-anim .col-sections,body.mobile .app.view-anim .col-pages,body.mobile .app.view-anim .main,body.mobile .app.view-anim .panel-view,body.mobile .app.view-anim .mbd{animation:mviewIn .42s cubic-bezier(.16,1,.3,1)}
  body.mobile .app.view-anim-push .col-books,body.mobile .app.view-anim-push .col-sections,body.mobile .app.view-anim-push .col-pages,body.mobile .app.view-anim-push .main,body.mobile .app.view-anim-push .panel-view,body.mobile .app.view-anim-push .mbd{animation:mpushIn .52s cubic-bezier(.16,1,.3,1)}
  body.mobile .app.view-anim-pop .col-books,body.mobile .app.view-anim-pop .col-sections,body.mobile .app.view-anim-pop .col-pages,body.mobile .app.view-anim-pop .main,body.mobile .app.view-anim-pop .panel-view,body.mobile .app.view-anim-pop .mbd{animation:mpopIn .52s cubic-bezier(.16,1,.3,1)}
  body.mobile .app.view-anim-down .col-books,body.mobile .app.view-anim-down .col-sections,body.mobile .app.view-anim-down .col-pages,body.mobile .app.view-anim-down .main,body.mobile .app.view-anim-down .panel-view,body.mobile .app.view-anim-down .mbd{animation:mdownIn .5s cubic-bezier(.16,1,.3,1)}
  body.mobile .app.view-anim-up .col-books,body.mobile .app.view-anim-up .col-sections,body.mobile .app.view-anim-up .col-pages,body.mobile .app.view-anim-up .main,body.mobile .app.view-anim-up .panel-view,body.mobile .app.view-anim-up .mbd{animation:mupIn .5s cubic-bezier(.16,1,.3,1)}
  @keyframes mviewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes mpushIn{from{opacity:.3;transform:translateX(72px)}to{opacity:1;transform:none}}
  @keyframes mpopIn{from{opacity:.3;transform:translateX(-72px)}to{opacity:1;transform:none}}
  @keyframes mdownIn{from{opacity:.3;transform:translateY(-52px)}to{opacity:1;transform:none}}
  @keyframes mupIn{from{opacity:.3;transform:translateY(52px)}to{opacity:1;transform:none}}
  /* Apertura de Mis pendientes: el panel baja 1:1 desde el borde superior (espejo
     exacto del cierre por gesto). Solo el panel se mueve — el resto queda quieto. */
  body.mobile .app.view-anim-downfull .panel-view{animation:mfulldown .48s cubic-bezier(.16,1,.3,1)}
  @keyframes mfulldown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
  /* Asomo de Mis pendientes (cajón que baja con el dedo desde el borde superior) */
  #pend-peek{position:fixed;top:0;left:0;right:0;z-index:95;height:calc(78px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);transform:translateY(-100%);background:var(--bg);border-bottom:1px solid var(--border);border-radius:0 0 18px 18px;box-shadow:0 10px 26px rgba(0,0,0,.28);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;will-change:transform}
  #pend-peek .pp-in{display:flex;align-items:center;gap:8px;padding:0 0 15px;font-size:14.5px;font-weight:700;color:var(--text)}
  #pend-peek .pp-star{color:var(--gold)}
  #pend-peek .pp-count{background:var(--gold);color:var(--accent-text);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
  /* Indicador de pull-to-refresh */
  #ptr{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:300;opacity:0;pointer-events:none}
  #ptr .ptr-dot{width:30px;height:30px;border-radius:50%;background:var(--bg2);box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;border:2.5px solid var(--gold);border-top-color:transparent}
  #ptr.spin .ptr-dot{animation:ptrspin .7s linear infinite}
  @keyframes ptrspin{to{transform:rotate(360deg)}}
  /* Seguimiento en móvil: filas y CTA de recordar protagonistas */
  body.mobile .rem-row{padding:.8rem .55rem!important;font-size:14px!important;gap:12px!important}
  body.mobile .rem-row .rem-name{font-size:15px}
  body.mobile .rem-row .rem-meta{font-size:11.5px!important;margin-top:2px}
  /* Recordar dejó de ser un botón verde sólido por fila (verde = éxito, no
     seguimiento): acción textual con el acento de marca; "Recordada ✓" queda
     verde como ESTADO. El target táctil lo expande el ::before de .remx. */
  body.mobile .rem-wa{background:none!important;border:none!important;color:color-mix(in srgb,var(--gold) 55%,var(--text))!important;font-size:13px!important;font-weight:650;padding:4px 2px!important;min-height:0;border-radius:0;flex-shrink:0}
  body.mobile .rem-wa.reminded{color:var(--success)!important;font-weight:600}
  body.mobile .rem-wa:active{opacity:.55}
  body.mobile .rem-ago{font-size:10.5px}
  /* Fila de la hoja: botón WhatsApp grande y tocable */
  body.mobile .task-list .task-row .wa-circle{width:38px;height:38px}
  /* Ventanas (modales) como hoja inferior en móvil: nunca se cortan y el botón siempre queda a la vista */
  body.mobile .modal-ov{align-items:flex-end;padding:0}
  /* El héroe del onboarding sangra hasta el borde compensando el relleno del
     modal con margen negativo. En móvil el relleno es otro (1.15/1.05rem, no
     1.5) y el radio también (18px de hoja), así que compensa lo suyo. */
  /* El botón de contratar no vive en .modal-acts (va pegado a las tarjetas de
     precio), así que la regla de 48px de la hoja móvil no lo alcanzaba: quedaba
     de 29px, imposible para el dedo, justo el botón que cobra. */
  body.mobile .plan-cta{min-height:48px;font-size:15px}
  body.mobile .ob-hero{margin:-1.15rem -1.05rem .9rem;border-radius:18px 18px 0 0}
  body.mobile .modal{width:100%!important;max-width:100%!important;max-height:calc(82dvh - env(safe-area-inset-top,0px));border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;padding:1.15rem 1.05rem calc(1.05rem + env(safe-area-inset-bottom,0px));animation:sheetup .38s cubic-bezier(.34,1.18,.42,1)}
  /* Feedback táctil orgánico: las tarjetas ceden ligeramente al presionar */
  body.mobile .mbd-page:active,body.mobile .mtoday-row:active,body.mobile .sheet-item:active,body.mobile .book-item:active,body.mobile .mtoday-recv:active{transform:scale(.982)}
  body.mobile .mbd-page,body.mobile .mtoday-row,body.mobile .sheet-item,body.mobile .book-item,body.mobile .mtoday-recv{transition:transform .12s ease,background .12s ease}
  body.mobile .modal .modal-acts{position:sticky;bottom:calc(-1.05rem - env(safe-area-inset-bottom,0px));background:var(--bg2);padding:.7rem 0 0;margin-top:.6rem;box-shadow:0 -8px 12px -8px rgba(0,0,0,.12);gap:10px}
  /* Botones de acción de ventanas: tocables de verdad (44px+) y a lo ancho */
  body.mobile .modal .modal-acts .btn{flex:1;min-height:48px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem}
  .mobile-bar{display:none}
  /* Barra de la hoja: material navy difuminado (el gris #2b2b2e no era de la paleta) */
  body.mobile .mobile-bar{display:flex;align-items:center;gap:8px;padding:.5rem .6rem;background:rgba(15,33,72,.85);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);color:#fff;position:sticky;top:0;z-index:70;font-size:14px}
  body.mobile .mobile-bar button{background:rgba(255,255,255,.1);border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;font-family:inherit;-webkit-tap-highlight-color:transparent;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.mobile .mobile-bar button:active{background:rgba(255,255,255,.2)}
  body.mobile .stats-row{grid-template-columns:repeat(2,1fr)}
  /* Seguimiento: en móvil apila supervisores arriba y el detalle abajo (no lado a lado) */
  body.mobile .seg-split{flex-direction:column;max-height:none!important}
  body.mobile .seg-side{width:100%!important;max-height:200px}
  /* Ya no hay que anular el borde izquierdo: ahora las dos zonas son tarjetas,
     así que en móvil basta con separarlas al apilarse. */
  body.mobile .seg-detail{margin-top:10px}
  /* Mis pendientes en móvil: fila que respira, nada cortado, targets táctiles */
  body.mobile .my-card{max-width:none}
  body.mobile .my-head{flex-wrap:wrap;row-gap:8px;padding:.75rem .85rem;align-items:center}
  /* El nombre (div en móvil) ocupa la 1ª línea completa y ENVUELVE — nada se corta;
     los chips/fecha/acciones caen ordenados a la 2ª línea. */
  body.mobile .my-head .task-name{flex:1 1 auto;min-width:calc(100% - 40px);font-size:15px;line-height:1.35;padding:.1rem 0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  body.mobile .my-head .task-date{width:auto;min-height:30px;display:inline-flex;align-items:center}
  body.mobile .my-head .assign-chip{min-height:30px;display:inline-flex;align-items:center;font-size:11px}
  body.mobile .my-head .task-del{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center}
  body.mobile .my-head .task-check{width:26px;height:26px}
  body.mobile .my-path{padding-left:.8rem;padding-right:.8rem}
  body.mobile .recv-note{margin-left:.8rem;margin-right:.8rem}
  body.mobile .msec-body{padding-left:16px}
  body.mobile .msec-body:before{left:6px}
  /* En móvil: acciones sueltas → menú ⋯ */
  body.mobile .my-act{display:none!important}
  body.mobile .my-more{display:inline-flex!important;align-items:center;justify-content:center;min-width:34px;min-height:34px}
  /* Fila del ejecutor (Mis pendientes): que respire y nada se corte */
  body.mobile .sup-mytask-row{flex-wrap:wrap;row-gap:8px;padding:.7rem .8rem}
  body.mobile .sup-mytask-row .task-name{flex:1 1 62%;font-size:15px}
  body.mobile .sup-mytask-row .task-check{width:26px;height:26px}
  body.mobile .sup-mytask-row .assign-chip,body.mobile .sup-mytask-row .task-date{min-height:30px;display:inline-flex;align-items:center}
  /* Fila de la hoja (coordinador): envolver para que insignias/fecha no se corten */
  body.mobile .task-list .task-row{flex-wrap:wrap;row-gap:6px;padding:.6rem .7rem}
  body.mobile .task-list .task-row .task-name{flex:1 1 60%;font-size:15px}
  body.mobile .task-list .task-row .task-check{width:26px;height:26px}
  body.mobile .task-list .task-row .task-date{min-height:32px;display:inline-flex;align-items:center}
  body.mobile .task-list .task-row .drag-handle{display:none}
  body.mobile .topbar{flex-wrap:wrap;gap:6px}
  body.mobile .topbar-btns{width:100%;overflow-x:auto}
}
@media(max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr)}}

/* Scrollbars sutiles, uno por columna según su fondo */
#book-list::-webkit-scrollbar,#section-list::-webkit-scrollbar,#page-list::-webkit-scrollbar,.main::-webkit-scrollbar,.task-list::-webkit-scrollbar{width:6px;height:6px}
#book-list::-webkit-scrollbar-track,#section-list::-webkit-scrollbar-track,#page-list::-webkit-scrollbar-track{background:transparent}
#book-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
#book-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
#section-list::-webkit-scrollbar-thumb,#page-list::-webkit-scrollbar-thumb{background:rgba(120,120,120,.28);border-radius:10px}
#section-list::-webkit-scrollbar-thumb:hover,#page-list::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.45)}
.main::-webkit-scrollbar-thumb,.task-list::-webkit-scrollbar-thumb{background:rgba(120,120,120,.25);border-radius:10px}
.main::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.4)}
/* Firefox */
#book-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
#section-list,#page-list{scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.32) transparent}

/* ── v43: anillo de foco global (al FINAL para ganar los empates de cascada) ── */
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent)}
/* El buscador móvil entra a las excepciones: su anillo lo pinta UNA sola vez
   el contenedor .gs-field (focus-within); el halo global aquí duplicaba borde. */
.ch-title input:focus,.add-row input:focus,.gs-field input:focus{border-color:transparent;box-shadow:none}

/* ── v43: Contactos ── */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;max-width:980px}
.ct-card{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem .9rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.ct-card:hover{border-color:var(--border2);box-shadow:0 4px 14px rgba(0,0,0,.07);transform:translateY(-1px)}
.ct-ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}
.ct-name{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-wa{font-size:11px;color:var(--text3);margin-top:1px}
.ct-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ct-chip{font-size:10px;color:var(--text2);background:var(--bg3);border-radius:999px;padding:.12rem .55rem;font-weight:600}
.ct-acts{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex-shrink:0}
.ct-card:hover .ct-acts,body.mobile .ct-acts{opacity:1}
.ct-act{width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ct-act:hover{background:var(--bg3);color:var(--text)}
.ct-act.danger:hover{background:var(--danger-bg);color:var(--danger)}
.ct-act .bi svg{width:15px;height:15px}
/* Lista de contactos (reemplaza las tarjetas): fila con nombre, celular, correo
   y acciones. Más densa que las cards y más fácil de escanear en equipo. */
.clist{max-width:900px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)}
.clist-row{display:flex;align-items:center;gap:12px;padding:.6rem .8rem;border-bottom:1px solid var(--border)}
.clist-row:last-child{border-bottom:none}
.clist-row:hover{background:var(--bg3)}
.clist-ava{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.clist-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clist-sub{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.clist-acts{display:flex;gap:2px;flex-shrink:0}
/* Los botones de acción de la fila van agrupados, no sueltos: así se pueden
   bajar como bloque a su propia línea en pantalla angosta en vez de ir
   aplastando el nombre hasta dejarlo en tres letras y puntos suspensivos. */
.clist-btns{display:flex;gap:6px;flex-shrink:0}
.clist-btns .btn{font-size:11px;padding:.4rem .7rem;white-space:nowrap}
@media(max-width:600px){
  .clist-row{flex-wrap:wrap;row-gap:8px}
  .clist-acts{order:2}
  /* 46px = avatar (34) + gap (12): los botones quedan alineados bajo el nombre. */
  .clist-btns{order:3;width:100%;margin-left:46px}
  .clist-btns .btn{flex:1;justify-content:center}
}

/* ── v43: Configurar actividad (bench: Teams) ── */
.cfg-modal{width:560px;max-width:95vw}
.cfg-title-in{width:100%;border:none;border-bottom:2px solid var(--border);border-radius:0;background:none;font-size:17px;font-weight:700;color:var(--text);outline:none;padding:.35rem 2px;margin-bottom:.35rem;font-family:inherit;transition:border-color .15s}
.cfg-title-in:focus{border-color:var(--gold);box-shadow:none}
.cfg-row{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;padding:.55rem 0}
.cfg-ico{color:var(--text3);display:flex;justify-content:center;padding-top:.5rem}
.cfg-ico svg{width:17px;height:17px}
.cfg-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cfg-fields input,.cfg-fields select{margin-bottom:0}
.cfg-fields input[type=date]{width:150px}
.cfg-fields input[type=time]{width:104px}
.cfg-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);cursor:pointer;user-select:none}
.cfg-check input{width:auto;margin:0;accent-color:var(--gold)}
.cfg-sep{border-top:1px solid var(--border);margin:.4rem 0}
.cfg-sub{background:var(--bg3);border-radius:10px;padding:.6rem .75rem;margin-top:.5rem;width:100%}
.cfg-sub label{text-transform:none;font-size:11px;color:var(--text2)}
.cfg-hint{font-size:10.5px;color:var(--text3);margin-top:3px;line-height:1.45}

/* ── Configurar actividad · escritorio (2026-08-25) ──────────────────────────
   La clase .cfgd la pone SOLO la plantilla de escritorio (openTaskConfig
   bifurca por isMobile()), así que nada de esto puede tocar el móvil.
   Dos columnas: izquierda qué-es-y-cuándo, derecha opciones y seguimiento.
   El modal es flex en columna y quien hace scroll son las COLUMNAS, no el
   modal: por eso el pie con Guardar queda siempre a la vista sin sticky. */
.cfgd{width:940px;max-width:min(96vw,940px);max-height:calc(100vh - 32px);padding-bottom:0;display:flex;flex-direction:column}
.cfgd .cfgd-cols{display:grid;grid-template-columns:1.12fr 1fr;column-gap:36px;align-items:start;flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 2px 0}
.cfgd .cfgd-sec,.asgd .cfgd-sec{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:.7rem 0 .3rem}
.cfgd .cfgd-cols>div>.cfgd-sec:first-child{margin-top:.55rem}
.cfgd .cfgd-lbl,.asgd .cfgd-lbl{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:none;letter-spacing:0;margin-bottom:4px}
.cfgd .cfg-check{text-transform:none;letter-spacing:0;font-weight:500}
.cfgd .cfgd-field{margin-bottom:.5rem}
.cfgd .cfgd-field input,.cfgd .cfgd-field select,.cfgd .cfgd-field textarea{margin-bottom:0}
/* La caja gris de recurrencia sobra con dos columnas: el label ya agrupa. */
.cfgd .ol-recur-box{background:none;padding:0;margin:0}
.cfgd #cfg-recur{width:100%;max-width:300px}
.cfgd .ol-textarea{min-height:46px}
/* Fila de opción: icono · título+subtexto · check a la derecha. El subtexto
   sustituye a los labels-párrafo en mayúsculas. Checkbox y no switch: el
   sistema visual de OnYou no tiene switches, e inventarlos solo aquí sería
   la inconsistencia que se quiere evitar. */
.cfgd .cfgo{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:start;padding:.32rem 2px;margin:0;cursor:pointer;border-radius:8px;transition:background .12s;text-transform:none;letter-spacing:0}
.cfgd .cfgo:hover{background:var(--bg3)}
.cfgd .cfgo .cfg-ico{padding-top:1px}
.cfgd .cfgo .cfg-ico svg{width:15px;height:15px}
.cfgd .cfgo-t{display:block;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3}
.cfgd .cfgo-d{display:block;font-size:10.5px;color:var(--text3);line-height:1.4;margin-top:1px}
.cfgd .cfgo input[type=checkbox]{width:15px;height:15px;margin:1px 0 0;accent-color:var(--gold)}
/* Los desplegables (programar envío, recordarme) se alinean bajo el texto. */
.cfgd .cfg-sub{margin:.15rem 0 .5rem 28px;width:auto}
/* Pie fijo: primarias a la derecha, Mover/Duplicar discretos a la izquierda. */
.cfgd .cfgd-foot,.asgd .cfgd-foot{flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--bg2);border-top:1px solid var(--border);margin:.45rem -1.5rem 0;padding:.55rem 1.5rem .7rem;border-radius:0 0 var(--radius) var(--radius)}
.cfgd .cfgd-foot .btn,.asgd .cfgd-foot .btn{font-size:12px}
.cfgd .cfgd-foot .btn-primary,.asgd .cfgd-foot .btn-primary{font-size:13px}
/* Si la ventana se angosta con el modal abierto, cae a una columna. */
@media (max-width:920px){ .cfgd .cfgd-cols{grid-template-columns:1fr} }

/* ── Asignar responsable · escritorio (2026-08-25) ───────────────────────────
   Mismo contrato que .cfgd: la clase la pone SOLO la plantilla de escritorio.
   Izquierda ENCONTRAR (búsqueda, lista con su propio scroll, crear, grupos);
   derecha CONFIRMAR (ficha de identidad + campos). El único scroll del estado
   normal es el de la lista: el modal es flex y el pie no se mueve. */
.asgd{width:880px;max-width:min(96vw,880px);max-height:calc(100vh - 32px);padding-bottom:0;display:flex;flex-direction:column}
.asgd .asgd-cols{display:grid;grid-template-columns:1.05fr 1fr;column-gap:34px;align-items:stretch;flex:1 1 auto;min-height:0;padding:2px 2px 0;margin-top:.3rem}
.asgd .asgd-izq{display:flex;flex-direction:column;min-height:0;min-width:0}
.asgd .asgd-izq>input{margin-bottom:0}
/* La lista toma toda la altura sobrante y scrollea sola (5–7 filas típicas). */
.asgd .asgd-izq .contact-search-list{flex:1 1 auto;min-height:150px;max-height:238px;margin-top:6px;border-color:var(--border);scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
/* Tope ≈5½ filas: la media fila cortada avisa que hay más, y el modal no crece
   con la libreta — con pocas se encoge, con muchas scrollea la lista. */
.asgd .contact-search-list::-webkit-scrollbar{width:8px}
.asgd .contact-search-list::-webkit-scrollbar-track{background:transparent}
.asgd .contact-search-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;border:2px solid var(--bg2)}
.asgd .contact-search-list::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* Inputs más ligeros: blanco, 1px, foco dorado fino. Sin sombras. */
.asgd input{background:var(--bg2);border-width:1px;transition:border-color .14s,box-shadow .14s}
.asgd input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.14)}
.asgd .asgd-der input{margin-bottom:.55rem}
/* Secciones en frase: 12.5px/600 gris — nada de versalitas administrativas. */
.asgd .asgd-sec{font-size:12.5px;font-weight:600;color:var(--text2);margin:0 0 .4rem}
.asgd .asgd-envio{margin:.35rem 0 .4rem}
.asgd .contact-opt{padding:.42rem .55rem}
.asgd .contact-opt.sel{background:var(--warning-bg)}
.asgd .contact-opt.sel::after{content:'✓';color:var(--warning);font-weight:700;font-size:12px;flex-shrink:0}
.asgd .asgd-acciones{display:flex;gap:6px;margin-top:8px}
.asgd .asgd-acciones .btn{flex:1;font-size:11px;padding:.34rem .5rem;color:var(--text2);border-color:var(--border)}
.asgd .asgd-grow{font-size:11.5px;padding:.34rem .65rem;color:var(--text2);border-color:var(--border)}
.asgd .asgd-grupos{margin-top:.7rem}
.asgd .asgd-grupos .cfg-hint{margin-top:4px}
.asgd .asgd-suave{font-weight:400;color:var(--text3)}
.asgd .asgd-der{min-width:0;overflow-y:auto}
/* La ficha: confirmar a quién ANTES de mirar campos. Altura fija para que el
   panel no salte entre vacío y elegido. */
.asgd .asgd-ident{display:flex;align-items:center;gap:10px;background:var(--bg3);border:none;border-radius:10px;padding:.45rem .65rem;margin-bottom:.55rem;min-height:46px}
.asgd .asgd-ava{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.asgd .asgd-quien{display:flex;flex-direction:column;min-width:0}
.asgd .asgd-quien b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asgd .asgd-quien span{font-size:11px;color:var(--text3)}
.asgd .asgd-vacio{font-size:11.5px;color:var(--text3);line-height:1.45}
.asgd .ol-check{text-transform:none;letter-spacing:0;font-weight:500}
@media (max-width:920px){ .asgd .asgd-cols{grid-template-columns:1fr} .asgd .asgd-izq .contact-search-list{max-height:200px} }

/* ── v43: Nombres de la estructura ── */
.lvl-row{display:flex;gap:12px;align-items:flex-start;padding:.55rem 0}
.lvl-num{width:26px;height:26px;border-radius:8px;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.35rem}
.lvl-body{flex:1}
.lvl-lbl{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px}
.lvl-arrow{color:var(--text3);font-size:11px;margin-left:12px;padding:2px 0}

/* ── v44: Mis pendientes PRO — secciones maestras + delegadores ── */
.msec{margin:0 0 1.1rem;max-width:760px}
.msec-head{display:flex;align-items:center;gap:12px;padding:.7rem .9rem;border-radius:12px;cursor:pointer;user-select:none;background:var(--bg2);border:1px solid var(--border2);box-shadow:0 1px 3px rgba(0,0,0,.05);transition:background .12s}
.msec-head:hover{background:var(--bg3)}
.msec-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:#fff}
.msec-ic .bi svg{width:16px;height:16px}
.msec-title{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.msec-sub{font-size:10.5px;color:var(--text3);margin-top:1px}
.msec-n{background:var(--bg3);color:var(--text2);border-radius:999px;font-size:10px;font-weight:700;padding:.08rem .5rem}
.msec-caret{margin-left:auto;color:var(--text3);flex-shrink:0;transition:transform .15s}
.msec.open>.msec-head .msec-caret{transform:rotate(180deg)}
/* El cuerpo va INDENTADO y con guía vertical: lo de adentro es hijo de la
   sección, no un tercer menú al mismo nivel. */
.msec-body{padding:.55rem 0 0 30px;position:relative}
.msec-body:before{content:'';position:absolute;left:15px;top:0;bottom:10px;width:2px;border-radius:2px;background:var(--border2);opacity:.55}
.msec-body>.chapter,.msec-body>.dg-block{margin-bottom:.55rem}
.dg-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:0 0 .35rem 2px}
/* ── v44d: detalle abierto de una tarea (mismo bloque en el panel del
   ejecutor y en Asignadas a mí). Capas: la TARJETA es el plano elevado y se
   mantiene blanca al abrirse; los DATOS se hunden en un panel gris; los
   BOTONES vuelven al plano de la tarjeta, que es donde se toca. Antes el
   cuerpo abierto usaba --bg3 (#F1EFE8) y los botones --bg (#F5F2E9): dos
   tonos a 4 puntos de distancia, así que el botón no tenía superficie. */
.tk-open{background:var(--bg2);border-top:1px solid var(--border);padding:.8rem .9rem;border-radius:0 0 var(--radius) var(--radius)}
/* Abierta, la tarjeta deja de teñirse al pasar el mouse: ya no es un botón
   entero, es un contenedor con cosas adentro. */
.field-card:has(>.tk-open):hover{background:var(--bg2)}
.tk-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:.4rem}
.tk-facts{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;font-size:12px;color:var(--text2);line-height:1.55}
.tk-facts b{color:var(--text);font-weight:600}
.tk-note{border-radius:8px;padding:.5rem .65rem;font-size:11px;line-height:1.45;margin-top:.55rem}
.tk-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:.65rem}
.tk-acts .btn{flex:1;min-width:118px;font-size:11.5px;padding:.45rem .6rem}
.tk-acts .btn.wide{flex-basis:100%}
/* La acción de salida (devolver / cancelar solicitud) va última y en texto:
   sigue a un clic, pero deja de competir con las que se usan a diario. */
.tk-exit{display:flex;justify-content:flex-end;border-top:1px solid var(--border);margin-top:.65rem;padding-top:.5rem}
.btn-soft-danger{border-color:transparent;background:none;color:var(--danger);font-weight:600}
.btn-soft-danger:hover{background:var(--danger-bg)}

/* ── v44e: elegir persona BUSCANDO (antes: un <select> con toda la libreta) ── */
.dlg-modal{width:440px;max-width:95vw}
.dlg-task{font-size:13px;font-weight:600;color:var(--text);margin:-.35rem 0 .5rem}
.dlg-note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--text2);background:var(--bg3);border-radius:8px;padding:.5rem .6rem;margin-bottom:.8rem;line-height:1.45}
.dlg-note .bi{flex-shrink:0;margin-top:1px;color:var(--text3)}
.dlg-note .bi svg{width:14px;height:14px}
.dlg-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border2);border-radius:10px;padding:0 .65rem;background:var(--bg2);transition:border-color .15s,box-shadow .15s}
.dlg-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent)}
.dlg-search .bi{color:var(--text3);flex-shrink:0;display:flex}
.dlg-search .bi svg{width:15px;height:15px}
.dlg-search input{flex:1;border:none!important;background:none;margin:0;padding:.55rem 0;box-shadow:none!important;font-size:13px}
.dlg-results{max-height:216px;overflow-y:auto;margin-top:.35rem}
.dlg-row{display:flex;align-items:center;gap:10px;padding:.4rem .45rem;border-radius:9px;cursor:pointer;border:1px solid transparent}
.dlg-row:hover{background:var(--bg3)}
.dlg-row.nuevo{border-color:var(--border2);border-style:dashed;margin-bottom:.3rem}
.dlg-ava{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0}
.dlg-nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg-wa{font-size:10.5px;color:var(--text3)}
.dlg-picked{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:.5rem .6rem}
.dlg-picked input{border:none!important;background:none;margin:0;padding:0;box-shadow:none!important;font-size:12.5px;font-weight:600;width:100%}
.dlg-empty{font-size:11.5px;color:var(--text3);padding:.7rem .5rem;text-align:center;line-height:1.5}
.dg-block{border:1px solid var(--border);border-radius:10px;background:var(--bg2);margin-bottom:.55rem;overflow:hidden}
.dg-head{display:flex;align-items:center;gap:9px;padding:.45rem .65rem;cursor:pointer;user-select:none;transition:background .12s}
.dg-head:hover{background:var(--bg3)}
.dg-ava{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex-shrink:0;letter-spacing:.02em}
.dg-name{font-size:12.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--joint-ink)}
.dg-meta{font-size:10.5px;color:var(--text3);margin-top:1px}
.dg-kpis{display:flex;gap:5px;flex-wrap:wrap;align-items:center;flex-shrink:0;margin-left:auto}
.dg-kpi{font-size:10px;font-weight:700;border-radius:999px;padding:.2rem .55rem;background:var(--bg3);color:var(--text2);white-space:nowrap}
.dg-kpi.good{background:var(--success-bg);color:var(--success)}
.dg-kpi.warn{background:var(--warning-bg);color:var(--warning)}
.dg-kpi.bad{background:var(--danger-bg);color:var(--danger)}
.dg-wa{width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dg-wa:hover{background:var(--bg3);color:var(--success)}
.dg-wa .bi svg{width:15px;height:15px}
.dg-body{padding:.55rem .65rem .65rem;border-top:1px solid var(--border);background:var(--bg)}
.dg-body .field-card{margin-bottom:6px}
/* v45 · Paridad con el panel del ejecutor: las mismas tarjetas de indicadores
   (chips arriba solo cuando el bloque está cerrado) y los mismos cortes de
   lectura. Quien ya trabajó por link reconoce la pantalla en la app. */
.rk-cards{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 .65rem}
/* Mostrar/ocultar las tarjetas de indicadores. Discreto a propósito: es un
   ajuste de sitio, no una acción — no compite con "Recordar". */
.dg-kpi-toggle{background:none;border:none;color:var(--text3);font-family:inherit;font-size:10.5px;
  padding:.15rem 0 .45rem;cursor:pointer;display:block}
.dg-kpi-toggle:hover{color:var(--text2);text-decoration:underline}
.rk-card{flex:1;min-width:102px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.5rem .65rem}
.rk-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:700;line-height:1.3}
.rk-v{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.rk-s{font-size:9.5px;color:var(--text3);line-height:1.35}
.rg-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 .6rem}
.rg-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
.rg-chip{font-size:11px;padding:.3rem .7rem;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s}
.rg-chip:hover{border-color:var(--border2);color:var(--text)}
.rg-chip.on{border-color:var(--gold);background:var(--gold);color:var(--accent-text);font-weight:700}
.rsec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:.7rem 0 .4rem 2px}
.rsec:first-child{margin-top:0}
.rsec-sub{font-size:9.5px;color:var(--text3);font-weight:600;margin:-.25rem 0 .4rem 2px}
.scope-bar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text2);background:var(--bg2);border:1px dashed var(--border2);border-radius:10px;padding:.45rem .75rem;margin-bottom:.7rem;max-width:760px}
.scope-bar b{color:var(--text)}
.scope-bar button{margin-left:auto;border:none;background:none;color:var(--gold);font-weight:700;font-size:11px;cursor:pointer;padding:2px 4px}
/* ★ Mis pendientes: tu espacio personal (solo escritorio).
   Va en un bloque propio — el fondo apenas levantado sobre el navy y una línea
   dorada fina por dentro del borde izquierdo — para que se lea "esto es mío"
   sin gritar más que el libro activo. Sin sombra: no es una tarjeta flotante. */
.mt-block{position:relative;margin:.2rem .5rem .5rem;padding:.1rem 0 .15rem;background:rgba(255,255,255,.04);border-radius:9px;overflow:hidden}
.mt-block::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:0 2px 2px 0;background:var(--gold);opacity:.8}
/* La barra dorada del bloque ya marca el grupo: la del ítem activo sobraría
   justo encima. El activo se distingue por el fondo ámbar, como antes. */
.mt-block .book-item{border-left-color:transparent!important;border-radius:7px}
.mt-block .mytasks-shortcut{padding-top:.45rem;padding-bottom:.3rem!important}
.mt-title{flex:1;font-weight:600;color:#fff}
.mt-caret{margin-left:2px;color:rgba(255,255,255,.45);flex-shrink:0;padding:2px;border-radius:5px;transition:transform .15s;display:flex}
.mt-caret:hover{background:rgba(255,255,255,.1);color:#fff}
.mt-caret.open{transform:rotate(180deg)}
.mt-sub{display:flex;align-items:center;gap:6px;padding:.32rem .6rem .32rem 1.85rem;font-size:12px;cursor:pointer;color:inherit;border-radius:7px;transition:background .15s ease}
/* El nombre de la bandeja va SIEMPRE en una línea: si el idioma lo alarga,
   se recorta con … (el title trae el texto completo) y la pastilla no se mueve. */
.mt-sub-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-sub:hover{background:rgba(255,255,255,.06)}
.mt-sub.active{background:rgba(245,166,35,.14);font-weight:600}
/* Iconos de trazo, en lila apagado: dicen qué es cada bandeja sin pelearle el
   protagonismo al dorado. */
.mt-sub-ic{display:flex;flex-shrink:0;color:#A8AFE8;opacity:.9}
.mt-sub-ic svg{width:13px;height:13px;stroke-width:1.9}
.mt-sub.active .mt-sub-ic{opacity:1}
.mt-sub-n{min-width:24px;text-align:center;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;font-size:9.5px;font-weight:700;padding:.12rem .42rem;flex-shrink:0;transition:background .15s ease}
.mt-sub:hover .mt-sub-n{background:rgba(255,255,255,.2)}
.mt-subwrap{padding:0 .25rem}
body.mobile .mt-block{display:none}
/* Links de acceso del equipo (Herramientas › Equipo) */
.xl-list{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow-y:auto;margin:.4rem 0 .2rem}
.xl-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;flex-wrap:wrap}
.xl-ava{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.xl-mid{flex:1 1 170px;min-width:0}
.xl-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.xl-sub{font-size:11px;color:var(--text3);margin-top:1px}
.xl-chip{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid;border-radius:999px;padding:.05rem .4rem;white-space:nowrap}
.xl-acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.xl-acts .btn{font-size:11px;padding:.28rem .55rem}
body.mobile .xl-acts{margin-left:0;width:100%}
/* Suscripción de calendario (.ics) */

/* ── Transición uniforme (--tf) para los interactivos de todas las vistas que
   aún no la declaraban: mismo tacto en paneles, calendario, historial,
   contactos, mensajes, herramientas y ventanas. Solo añade transition — cada
   regla conserva sus colores de hover. ── */
.tools-back,.notif-photo-btn,
.jt-link,.ob-opt,.ob-ind,.tour-skip,.rec-arch-head,.dash-clear,.back-bar button,
.byuser-task,.rem-row,.urg-chip,.loc-row,.cap-pick,.col-collapse-btn,
.add-chapter-row button,.field-card,.contact-opt,.task-date,.mymenu-item,.hist-chip,
.hist-act,.ct-act,.dlg-row,.dg-wa,.dg-kpi-toggle,.cal-url,.item-edit,.item-del,
.btn-mini,.sheet-item,.origin-tab,.pv-tab,.tab-bar .tab,.dash-chip,.dia-chip,
.login-link,.dash-urgent{
  transition:background var(--tf),color var(--tf),border-color var(--tf),opacity var(--tf)}

/* ── Asignadas a mí · refinamiento de jerarquía y densidad (2026-08-20) ──────
   Regla de la pasada: menos color en superficies, más jerarquía en la
   información. La identidad de cada persona vive en su avatar; el estado, en
   texto semántico. Las tareas dentro de un delegador son FILAS con divisores,
   no tarjetas dentro de tarjetas. */

/* Agrupar por: segmented control contenido — superficie neutra, activo con
   acento ámbar abajo, nada de bloque naranja. */
.rg-seg{display:inline-flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.rg-seg .rg-chip{border:none;background:transparent;border-radius:6px;padding:.26rem .7rem;color:var(--text2);font-weight:600;position:relative;transition:background .14s,color .14s}
.rg-seg .rg-chip:hover{color:var(--text)}
.rg-seg .rg-chip.on{background:var(--bg2);color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.rg-seg .rg-chip.on::after{content:'';position:absolute;left:9px;right:9px;bottom:2px;height:2px;border-radius:2px;background:var(--gold)}

/* Fila de tarea dentro de un delegador: fila premium, no tarjeta. */
.rcv-row{display:flex;align-items:center;gap:10px;padding:.55rem .6rem;transition:background .14s}
body.mobile .rcv-row{padding:.75rem .8rem}

/* ── "Asignadas a mí" móvil (2026-08-31): quitar interfaz para revelar contenido.
   La pantalla se reduce a título → agrupación → persona → tareas. Un solo nivel
   de contenedor (el grupo por persona); todo lo demás es tipografía y ritmo. */
body.mobile .mx-scope{display:flex;align-items:flex-end;gap:10px;margin:2px 2px 10px}
body.mobile .mx-scope-t{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
body.mobile .mx-scope-s{font-size:12px;color:var(--text2);margin-top:2px}
body.mobile .mx-scope-all{background:none;border:none;color:var(--gold);font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;padding:8px 2px;flex-shrink:0;-webkit-tap-highlight-color:transparent}
body.mobile .mx-scope-all:active{opacity:.6}
body.mobile .mx-scope~.rg-bar{margin:0 0 .45rem}
body.mobile .mx-scope~.dg-lbl{margin:.15rem 0 .4rem 2px}
/* Persona: cabecera compacta, cuerpo pegado a sus tareas */
body.mobile .dg-block{border-radius:14px}
body.mobile .dg-head{padding:.55rem .7rem}
body.mobile .dg-body{padding:.1rem .35rem .3rem}
body.mobile .dg-chips{display:inline-flex;gap:5px;align-items:center;padding:5px 0 5px 5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .dg-body .rsec{margin:.4rem 2px .15rem}
/* Filas: dos líneas, metadata en UNA sola, sin hora ni ruta (viven al abrir) */
body.mobile .dg-body .rcv-row{padding:.5rem .45rem}
body.mobile .dg-body .rcv-row .field-name{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* !important porque el markup trae flex-wrap:wrap inline (correcto en escritorio,
   donde la metadata puede respirar en dos líneas). Aquí la fila es de dos líneas
   exactas: título + una sola línea de metadata. */
body.mobile .dg-body .rcv-row .field-meta{flex-wrap:nowrap!important;overflow:hidden;white-space:nowrap;font-size:11px;margin-top:1px}
body.mobile .dg-body .rcv-row .field-meta>span{flex-shrink:0}
body.mobile .dg-body .rcv-row .field-meta>span:last-child{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.mobile .dg-body .rcv-ruta,body.mobile .dg-body .rcv-hora{display:none}
body.mobile .dg-body .rcv-caret svg{width:12px;height:12px}
body.mobile .dg-body .rcv-carbtn{padding:12px 8px}
/* El círculo se ve de 24px pero se toca como 44: zona de impacto extendida */
body.mobile .dg-body .rcv-row .big-check{width:24px;height:24px;position:relative}
body.mobile .dg-body .rcv-row .big-check::before{content:'';position:absolute;inset:-11px}

/* ── "Creadas por mí" móvil (2026-08-31): contenido primero, herramientas
   cuando hacen falta. El composer permanente se vuelve la fila del Home;
   asignación y fecha pasan de botones a ESTADOS tocables en una sublínea;
   cada grupo es una lista continua, no tarjetas apiladas. */
body.mobile .my-add-trigger{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;padding:13px 4px;margin-bottom:.35rem;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .my-add-trigger:active{opacity:.6}
body.mobile .my-add-close{background:none;border:none;color:var(--text3);font-size:16px;font-family:inherit;padding:0 10px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Cabecera de sección más ligera: sin el subtítulo de relleno */
body.mobile .msec[data-tour="bandeja-mias"] .msec-head{padding:.5rem .65rem}
body.mobile .msec[data-tour="bandeja-mias"] .msec-sub{display:none}
/* Grupo = section header; sus tareas, lista continua con divisores */
body.mobile .msec-body .chapter .ch-head{padding:.4rem .55rem}
body.mobile .msec-body .my-card{border:none;border-radius:0;margin-bottom:0;background:transparent}
body.mobile .msec-body .my-card+.my-card{border-top:1px solid var(--border)}
body.mobile .msec-body .add-row{padding:.45rem .6rem;border-top:1px solid var(--border)}
/* La fila nueva: dos líneas, sin envolver chips */
body.mobile .my-head.mx-own{flex-wrap:nowrap;row-gap:0;gap:9px;padding:.55rem .55rem;align-items:flex-start}
body.mobile .mx-own .task-check{width:24px;height:24px;margin-top:2px;position:relative;flex-shrink:0}
body.mobile .mx-own .task-check::before{content:'';position:absolute;inset:-10px}
body.mobile .mx-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body.mobile .mx-own .task-name{min-width:0;flex:0 0 auto;font-size:15px;line-height:1.3;padding:0}
body.mobile .mx-sub{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;font-size:11.5px;color:var(--text2)}
body.mobile .mx-st{background:none;border:none;padding:5px 0;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}
body.mobile .mx-st:active{opacity:.6}
/* "Sin asignar" / "Sin fecha": estado vacío pero claramente tocable — mismo
   dorado que las acciones de texto de la casa (Ver todo). */
/* Neutro, no ámbar: no tener responsable o fecha NO es una advertencia — el
   color semántico se reserva para estados reales (.ov vencida, urgente, etc). */
body.mobile .mx-st.empty{color:var(--text3)}
/* Target ≥44px sin agrandar el dibujo: el ::before expande el área tocable
   (mismo patrón que las listas de Papelera). El check queda en 24px visuales. */
body.mobile .mx-own .task-check,body.mobile .mx-own .my-more{position:relative}
body.mobile .mx-own .task-check::before,body.mobile .mx-own .my-more::before{content:'';position:absolute;inset:-10px}
body.mobile .mx-st.ov{color:var(--danger)}
body.mobile .mx-dot{color:var(--text3);flex-shrink:0}
body.mobile .mx-flag{color:var(--warning);font-weight:600;flex-shrink:0}
body.mobile .mx-sub .dep-pill,body.mobile .mx-sub .rem-ago{flex-shrink:0}

/* ── Buscador global móvil (2026-08-31): capa casi completa, no un input en una
   bandeja. Lupa dentro del campo, "Cancelar" en vez de lenguaje de teclado, y
   contenido útil antes de escribir. */
/* ── Buscar en OnYou móvil (segunda pasada 2026-09-04): el flow sheet de casa,
   cabecera + campo fijos, resultados = único scroll, filas <button> sin cards.
   Subida 180 ms sin rebote (más corta que los flujos largos); pressed 120 ms. */
body.mobile .modal.flow.gs-sheet.flow-anim{animation:sheetup .18s cubic-bezier(.22,1,.36,1)}
body.mobile .gs-sheet .flow-head{padding-bottom:.45rem}
body.mobile .gs-field{display:flex;align-items:center;gap:8px;margin:0 1.05rem 4px;background:var(--bg3);border:1px solid transparent;border-radius:12px;padding:0 4px 0 12px;min-height:46px;flex-shrink:0;transition:border-color .15s}
body.mobile .gs-field:focus-within{border-color:var(--gold)}
body.mobile .gs-field .bi{color:var(--text3);flex-shrink:0;display:inline-flex}
body.mobile .gs-field input{flex:1;min-width:0;margin:0;border:none;background:none;outline:none;font-size:16px;color:var(--text);min-height:44px;padding:0;box-shadow:none}
body.mobile .gs-field input:focus{border:none;box-shadow:none;outline:none}
body.mobile .gs-clear{width:40px;height:40px;border:none;background:none;color:var(--text3);font-size:15px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .gs-clear:active{background:var(--border)}
body.mobile .gs-clear[hidden]{display:none}
body.mobile .gs-results{padding-top:2px}
body.mobile .gs-grupo{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;padding:.9rem 2px .3rem;display:flex;align-items:center;gap:6px}
body.mobile .gs-grupo-n{background:var(--bg3);border-radius:999px;padding:0 7px;font-size:10.5px;color:var(--text2);letter-spacing:0}
body.mobile .gs-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:.5rem 2px;border:none;border-bottom:1px solid var(--border);background:none;text-align:left;font:inherit;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s;border-radius:0}
body.mobile .gs-row:active{background:var(--bg3)}
body.mobile .gs-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}
body.mobile .gs-row:last-child{border-bottom:none}
body.mobile .gs-dot{width:8px;height:8px;border-radius:50%;flex:none;margin:0 8px}
body.mobile .gs-ico{width:24px;height:24px;border-radius:7px;background:var(--bg3);color:var(--text2);display:inline-flex;align-items:center;justify-content:center;flex:none}
body.mobile .gs-ico svg{width:14px;height:14px}
body.mobile .gs-ico .book-dot{margin:0}
body.mobile .gs-ava{width:28px;height:28px;border-radius:50%;background:var(--info-bg);color:var(--info);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.mobile .gs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body.mobile .gs-name{font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
body.mobile .gs-name.done{text-decoration:line-through;color:var(--text3)}
body.mobile .gs-meta{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .gs-meta b{font-weight:600;color:var(--text2)}
body.mobile .gs-hint{display:flex;align-items:center;gap:10px;padding:.65rem 2px;min-height:52px;border-bottom:1px solid var(--border)}
body.mobile .gs-hint:last-child{border-bottom:none}
body.mobile .gs-hint-t{font-size:14px;font-weight:600;color:var(--text)}
body.mobile .gs-hint-s{font-size:12px;color:var(--text3)}
body.mobile .gs-nada{padding:2rem .5rem;text-align:center}
body.mobile .gs-nada-t{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
body.mobile .gs-nada-s{font-size:12px;color:var(--text3);margin-top:4px}
body.gs-guard .app{pointer-events:none}
.gs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){body.mobile .modal.flow.gs-sheet.flow-anim{animation:none}body.mobile .gs-row{transition:none}}

/* ── Notificaciones móvil (2026-08-31): el viewport es de los eventos, no del
   chrome. Hoja al 90%, "Hecho" arriba, sin footer; el verde queda en el icono
   y el estado, no en tarjetas; actividad agrupada por día. */
/* ── Notificaciones móvil (segunda pasada 2026-09-04): el flow sheet de casa.
   Cabecera fija con Hecho, feed = ÚNICO dueño del scroll (min-height:0 +
   overflow-y:auto + contain), filas sin cards, acciones de 44 px, subida 180 ms. */
body.mobile .modal.flow.ntf-sheet.flow-anim{animation:sheetup .18s cubic-bezier(.22,1,.36,1)}
body.mobile .ntf-sheet{overflow:hidden}
body.mobile .ntf-sheet .flow-head{padding-bottom:.4rem}
body.mobile .ntf-sheet .flow-head p{margin:2px 0 0;font-size:11.5px;color:var(--text3)}
/* min-height:0 es LA corrección del scroll: sin ella el hijo flex no encoge
   por debajo de su contenido y el sheet (overflow:hidden) lo recorta, dejando
   la hoja sorda al gesto. overscroll contain: el gesto muere aquí, no encadena. */
body.mobile .ntf-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 1.05rem calc(env(safe-area-inset-bottom,0px) + 12px)}
body.mobile .ntf-scroll .rem-group-title{margin:.8rem 2px .2rem;font-size:11px;letter-spacing:.05em}
body.mobile .ntf-scroll .notif-pend{margin:.4rem 0 .2rem;font-size:12px;line-height:1.35}
body.mobile .ntf-day{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:.6rem 2px .1rem}
body.mobile .ntf-row{display:flex;gap:10px;align-items:flex-start;padding:.15rem 0;border-bottom:1px solid var(--border)}
body.mobile .ntf-row:last-child{border-bottom:none}
body.mobile .ntf-ic{margin-top:14px;flex-shrink:0;display:inline-flex}
body.mobile .ntf-ic svg{width:15px;height:15px}
body.mobile .ntf-main{flex:1;min-width:0;display:block;min-height:44px;padding:.45rem 0;background:none;border:none;text-align:left;font:inherit;color:var(--text);border-radius:8px;-webkit-tap-highlight-color:transparent;transition:background .12s}
body.mobile button.ntf-main{cursor:pointer}
body.mobile button.ntf-main:active{background:var(--bg3)}
body.mobile button.ntf-main:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
body.mobile .ntf-t{font-size:13.5px;line-height:1.35;font-weight:500;overflow-wrap:anywhere}
body.mobile .ntf-t b{font-weight:700}
body.mobile .ntf-s{font-size:11.5px;color:var(--text3);margin-top:2px;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.mobile .ntf-s .ntf-k{font-weight:600}
body.mobile .ntf-nuevo .ntf-t::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin:0 6px 1px 0;vertical-align:middle}
body.mobile .ntf-side{display:flex;align-items:center;gap:2px;flex-shrink:0;align-self:center}
body.mobile .ntf-ev,body.mobile .ntf-dev{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;min-height:44px;min-width:44px;padding:0 8px;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .ntf-ev{color:var(--info)}
body.mobile .ntf-dev{color:var(--danger)}
body.mobile .ntf-ev:active,body.mobile .ntf-dev:active{background:var(--bg3)}
body.mobile .ntf-item{padding:.55rem 0;border-bottom:1px solid var(--border)}
body.mobile .ntf-item:last-child{border-bottom:none}
body.mobile .ntf-item-top{display:flex;gap:10px;align-items:flex-start}
body.mobile .ntf-item .ntf-ic{margin-top:3px}
body.mobile .ntf-item-nota{font-size:12px;color:var(--text2);margin-top:3px;overflow-wrap:anywhere}
body.mobile .ntf-acts{display:flex;gap:8px;margin:.5rem 0 0 25px}
body.mobile .ntf-acts .btn{flex:1;min-height:44px;font-size:13.5px;font-weight:600;padding:0 10px;border-radius:10px;margin:0}
body.mobile .ntf-acts .btn.ok{background:var(--success);color:#fff;border-color:var(--success)}
body.mobile .ntf-acts .btn.no{color:var(--danger);border-color:var(--danger);background:var(--bg2)}
body.mobile .ntf-acts .btn.ver{flex:0 0 auto;min-width:44px;background:var(--bg3);border-color:transparent}
body.mobile .ntf-vacio{padding:2.2rem 1rem;text-align:center}
body.mobile .ntf-vacio-t{font-size:14.5px;font-weight:700;color:var(--text)}
body.mobile .ntf-vacio-s{font-size:12px;color:var(--text3);margin-top:4px}
body.mobile .ntf-vacio .btn{margin-top:.9rem;min-height:44px}
body.mobile .ntf-callout{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:10px;padding:.45rem .6rem;font-size:12px;color:var(--text2);margin:1rem 0 .2rem}
body.mobile .ntf-callout .bi{color:var(--text3);flex-shrink:0}
body.mobile .ntf-callout button{margin-left:auto;background:none;border:none;color:color-mix(in srgb,var(--gold) 55%,var(--text));font-family:inherit;font-size:12.5px;font-weight:700;min-height:44px;padding:0 6px;cursor:pointer}
body.mobile .ntf-scroll .aw-campana{margin:.4rem 0}
@media (prefers-reduced-motion:reduce){body.mobile .modal.flow.ntf-sheet.flow-anim{animation:none}body.mobile .ntf-main{transition:none}}

/* ── "Agregar pendiente" de la home (2026-08-31): primero capturo la idea,
   después configuro si quiero. El botón se transforma en composer inline; al
   crear, la fila recién nacida se señala con un tinte dorado que se apaga. */
body.mobile .hq-box{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
body.mobile .hq-box input{flex:1;min-width:0;margin:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:11px 12px;font-size:15px;color:var(--text);outline:none}
body.mobile .hq-box input:focus{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
body.mobile .hq-go{background:var(--gold);border:none;border-radius:10px;color:var(--accent-text);font-family:inherit;font-size:13px;font-weight:700;padding:11px 14px;min-height:44px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
body.mobile .hq-go:disabled{opacity:.6}
body.mobile .hq-x{background:none;border:none;color:var(--text3);font-size:15px;font-family:inherit;padding:10px 4px;min-height:44px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
body.mobile .hq-err{font-size:11.5px;color:var(--danger);margin:-4px 2px 8px;min-height:0}
body.mobile .hq-err:empty{display:none}
/* La tarea recién creada: tinte dorado tenue que se desvanece (~.9s) */
@keyframes hqNueva{from{background:color-mix(in srgb,var(--gold) 16%,transparent)}to{background:transparent}}
body.mobile .my-card.hq-nueva{animation:hqNueva .9s ease-out both}
@media(prefers-reduced-motion:reduce){body.mobile .my-card.hq-nueva{animation:none}}

/* ── Navegador de Libros móvil (2026-08-31): reducir el chrome hasta que el
   contenido se sienta suficiente. Los elementos mob-* viven ocultos en
   escritorio: el sidebar no cambia. */
.mob-nbooks,.mob-manage,.mob-books-empty,.hq-mini{display:none}
/* Resumen legible en vez de badges mudos: "28 vencidas · 20 para hoy" */
body.mobile .mtoday-mini-chip{min-width:0;height:20px;padding:0 8px;font-size:11px;font-weight:700}
/* "+ Agregar pendiente…" también desde esta vista: expande Hoy con el MISMO
   composer del Home ya abierto y enfocado (un solo flujo, un solo id). */
body.mobile .col-books.hoy-collapsed .hq-mini{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:#A9B4C9;font-family:inherit;font-size:14px;font-weight:600;padding:4px 18px 12px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .hq-mini:active{opacity:.6}
/* Header LIBROS: conteo visible, controles más callados */
body.mobile .mob-nbooks{display:inline;color:#8593AE;font-weight:600}
body.mobile .mob-addbook{background:none;width:40px;height:40px}
body.mobile .mob-caret{opacity:.55}
/* Filas ~20% más compactas, nombre truncado, identidad intacta */
body.mobile .book-item{padding:.62rem 1.1rem;font-size:15.5px;font-weight:600;min-height:52px}
body.mobile .book-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Seleccionado: DOS señales (línea dorada + tinte leve), no un bloque resaltado */
body.mobile .book-item.active{background:rgba(255,255,255,.05);border-left-color:var(--gold)}
body.mobile .book-item:active{background:rgba(255,255,255,.08)}
/* Gestionar libros: acción secundaria con aire, va a Herramientas › Estructura */
body.mobile .mob-manage{display:block;background:none;border:none;color:#8593AE;font-family:inherit;font-size:13px;font-weight:600;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));margin-top:6px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .mob-manage:active{opacity:.6}
body.mobile .mob-books-empty{display:block;padding:1.1rem 18px;color:#8593AE;font-size:13px;line-height:1.6}
body.mobile .mob-books-empty button{background:none;border:none;color:var(--gold);font-family:inherit;font-size:13.5px;font-weight:700;padding:8px 0;cursor:pointer}

/* ── Hoja / checklist móvil (2026-08-31): la hoja existe para trabajar sobre
   tareas; todo lo que retrase llegar a ellas debe justificar su espacio.
   Los elementos tb-more/ch-more/stats-line nacen ocultos: escritorio intacto. */
.tb-more,.ch-more,.stats-line{display:none}
/* Navegación superior ligera: solo "‹ Libro", sin repetir la hoja */
body.mobile .mobile-bar{background:none;padding:.35rem .5rem 0}
body.mobile .mobile-bar button{background:none;color:var(--navy);font-weight:700}
body.mobile .mobile-bar .mb-page{display:none}
/* Header: título protagonista, contexto debajo, sin logo, sin toolbar */
body.mobile .tb-logo{display:none}
body.mobile .topbar{flex-wrap:wrap;gap:6px;padding-top:.15rem;padding-bottom:.3rem}
body.mobile .tb-id{display:flex;flex-direction:column}
body.mobile .tb-id h2{order:1;font-size:21px;margin:0}
body.mobile .tb-id .breadcrumb{order:2;margin:1px 0 0}
body.mobile .topbar-btns{display:none}
body.mobile .tb-more{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text3);font-size:22px;line-height:1;min-width:44px;min-height:44px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;align-self:flex-start}
body.mobile .topbar .tab-bar{flex-basis:100%;padding:2px}
body.mobile .topbar .tab-bar .tab{flex:1;text-align:center}
body.mobile .tab-bar .tab{padding:.35rem .8rem;font-size:12.5px}
/* KPIs: de 4 tarjetas a una línea con barra */
body.mobile .stats-row{display:none}
body.mobile .stats-line{display:block;margin:.15rem .1rem .7rem}
body.mobile .stats-line-t{font-size:12.5px;color:var(--text2)}
body.mobile .stats-line-bar{height:3px;border-radius:2px;background:var(--bg3);margin-top:6px;overflow:hidden}
body.mobile .stats-line-bar i{display:block;height:100%;border-radius:2px;background:var(--navy)}
/* Capítulo: la ✕ destructiva pasa al ⋯; el lápiz se queda */
body.mobile .content .chapter .ch-del{display:none}
body.mobile .content .chapter .ch-more{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text3);font-size:17px;min-width:38px;min-height:38px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
/* ── Configurar actividad móvil (2026-08-31): mostrar el estado, no todos los
   controles. Filas-resumen; los controles originales expanden en su sitio. */
body.mobile .cfgm .cfg-title-in{font-size:15.5px;margin-bottom:.5rem}
body.mobile .cfgm-list{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
body.mobile .cfgm-row{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:.55rem .7rem;background:none;border:none;font-family:inherit;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
body.mobile .cfgm-row+.cfgm-row,body.mobile .cfgm-sec+.cfgm-row{border-top:1px solid var(--border)}
body.mobile .cfgm-row:active{background:var(--bg3)}
body.mobile .cfgm-l{font-weight:600;flex-shrink:0}
body.mobile .cfgm-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--text2);font-size:12.5px}
body.mobile .cfgm-row.open .cfgm-v{visibility:hidden}
body.mobile .cfgm-ch{color:var(--text3);flex-shrink:0;transition:transform .15s}
body.mobile .cfgm-row.open .cfgm-ch{transform:rotate(90deg)}
body.mobile .cfgm-sec{display:none;padding:.15rem .7rem .7rem;border-top:1px dashed var(--border)}
body.mobile .cfgm-sec.open{display:block}
body.mobile .cfgm-grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:.85rem 2px .3rem}
/* Los binarios como switches (el checkbox cuadrado se queda en escritorio) */
body.mobile .cfgm .cfgo{display:flex;align-items:center;gap:9px;min-height:46px;padding:.35rem 2px}
body.mobile .cfgm .cfgo-txt{flex:1;min-width:0}
body.mobile .cfgm .cfgo-t{display:block;font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0}
body.mobile .cfgm .cfgo-d{display:block;font-size:11px;color:var(--text3);margin-top:1px;text-transform:none;letter-spacing:0}
body.mobile .cfgm .cfgo input[type=checkbox]{appearance:none;-webkit-appearance:none;width:42px;height:25px;border-radius:999px;background:var(--border2);position:relative;flex-shrink:0;cursor:pointer;transition:background .15s;margin:0}
body.mobile .cfgm .cfgo input[type=checkbox]::after{content:'';position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.mobile .cfgm .cfgo input[type=checkbox]:checked{background:var(--gold)}
body.mobile .cfgm .cfgo input[type=checkbox]:checked::after{left:19.5px}
@media(prefers-reduced-motion:reduce){body.mobile .cfgm .cfgo input[type=checkbox],body.mobile .cfgm .cfgo input[type=checkbox]::after,body.mobile .cfgm-ch{transition:none}}
/* ── Asignar responsable móvil (2026-08-31): elegir quién se encarga, no
   administrar contactos. Tres superficies, una gramática. */
body.mobile .asgm-sub{font-size:11.5px;color:var(--text3);margin:-2px 0 .5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.mobile .asgm-modo{display:flex;background:var(--bg3);border-radius:10px;padding:2px;margin-bottom:.45rem}
body.mobile .asgm-modo button{flex:1;min-height:36px;border:none;border-radius:8px;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .asgm-modo button.on{background:var(--bg2);color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
body.mobile .asgm-forma{margin-bottom:.4rem}
body.mobile .asgm-buscar{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid transparent;border-radius:11px;padding:0 11px;min-height:44px;transition:border-color .15s}
body.mobile .asgm-buscar:focus-within{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
body.mobile .asgm-buscar .bi{color:var(--text3);flex-shrink:0}
body.mobile .asgm-buscar input{flex:1;min-width:0;margin:0;border:none;background:none;outline:none;font-size:14.5px}
body.mobile .asgm .contact-search-list{border:none;border-radius:0;margin-top:2px}
body.mobile .asgm .contact-opt{padding:.55rem .35rem;min-height:48px;font-size:13px;border-bottom:1px solid var(--border)}
body.mobile .asgm .contact-opt.sel{background:color-mix(in srgb,var(--gold) 8%,transparent)}
body.mobile .asgm-nuevo{display:block;width:100%;background:none;border:none;color:var(--text2);font-family:inherit;font-size:13.5px;font-weight:600;padding:11px 4px;min-height:44px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .asgm-nuevo:active{opacity:.6}
body.mobile .asgm-secl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:.3rem 2px .2rem}
body.mobile .asgm-sel{display:flex;align-items:center;gap:8px}
body.mobile .asgm-ident{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
body.mobile .asgm-ident .asgd-ava{width:32px;height:32px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
body.mobile .asgm-ident .asgd-quien{min-width:0;display:flex;flex-direction:column;font-size:13px}
body.mobile .asgm-ident .asgd-quien span{font-size:11px;color:var(--text3)}
body.mobile .asgm-ident .asgd-vacio{font-size:12px;color:var(--text3)}
body.mobile .asgm-editar{background:none;border:none;color:color-mix(in srgb,var(--gold) 55%,var(--text));font-family:inherit;font-size:12.5px;font-weight:700;padding:10px 4px;min-height:44px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
body.mobile .asgm-editor{display:none;margin-top:.2rem}
body.mobile .asgm-editor.open{display:block}
body.mobile .asgm .ol-check{text-transform:none;letter-spacing:0;font-size:12px}
/* Nuevo contacto móvil: dos campos y el resto bajo demanda */
body.mobile .ncm-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;border-top:1px solid var(--border);color:var(--text2);font-family:inherit;font-size:13.5px;font-weight:600;padding:12px 2px;min-height:46px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .ncm-fila:active{opacity:.6}
body.mobile .ncm-mas{display:none}
body.mobile .ncm-mas.open{display:block}
/* Varias personas: el checkbox de orden cede su sitio al segmented; la pantalla
   existe para seleccionar gente — todo lo demás ocupa lo mínimo. */
body.mobile .jt-ord-desk{display:none!important}
body.mobile .jt-modal{height:calc(90dvh - env(safe-area-inset-top,0px));max-height:none!important;display:flex;flex-direction:column;overflow-y:auto}
body.mobile .jt-modo{display:flex;gap:5px}
body.mobile .jt-modo .btn{flex:1;font-size:12px;min-height:34px;justify-content:center}
/* El helper del modo: una línea, no una caja beige */
body.mobile .jt-hint{background:none;border:none;padding:2px 2px 0;margin:0;font-size:11px;color:var(--text3);border-radius:0}
body.mobile .jt-empty{display:none}
body.mobile .jt-min{font-size:11.5px;color:var(--text3);padding:2px 2px 6px}
body.mobile .jt-cols{display:flex;flex-direction:column;gap:.35rem}
body.mobile .jt-col>label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3)}
body.mobile .jt-count{font-weight:700;color:var(--text2);text-transform:none}
/* Un solo scroll: el del sheet (la lista interna deja de recortarse) */
body.mobile .jt-modal #jt-list{max-height:none!important}
body.mobile .jt-modal .contact-opt{padding:.55rem .35rem;min-height:48px;font-size:13px}
body.mobile .jt-modal .contact-opt.sel{background:color-mix(in srgb,var(--gold) 8%,transparent)}
/* Filas de participantes: compactas, con la ✕ tocable de verdad */
body.mobile .jt-pick{padding:.45rem .5rem}
body.mobile .jt-pick-name{font-size:13.5px}
body.mobile .jt-x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
body.mobile .jt-arrow{min-width:36px;min-height:36px}
/* "Crear contacto nuevo": acción silenciosa, no otro botón grande */
body.mobile .jt-modal #jt-find>.btn{background:none;border:none;color:var(--text2);font-weight:600;font-size:13px;justify-content:flex-start;padding:11px 2px;min-height:44px}
body.mobile .jt-modal .modal-acts .btn:not(.btn-primary):not(.btn-soft-danger){background:none;border:none;color:var(--text2);font-weight:600}
body.mobile .jt-modal .modal-acts .btn-primary{flex:1}
body.mobile .jt-modal .modal-acts .btn-soft-danger{font-size:11.5px}

/* ── Comentarios móvil (segunda pasada 2026-09-04): conversación contextual
   dentro de la tarea, en el flow sheet de casa. Hilo = único scroll, composer
   fijo en el pie (sigue al teclado vía --vvh), subida 180 ms. */
body.mobile .modal.flow.cmx.flow-anim{animation:sheetup .18s cubic-bezier(.22,1,.36,1)}
body.mobile .cmx .flow-head{padding-bottom:.45rem}
body.mobile .flow-sub.cmx-ctx{display:flex;flex-direction:column;gap:1px;-webkit-line-clamp:unset;overflow:hidden;min-width:0}
body.mobile .cmx-ctx-t,body.mobile .cmx-ctx-s{display:block;min-width:0;max-width:100%}
body.mobile .cmx-ctx-t{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mobile .cmx-ctx-s{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mobile .cmx-hilo{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 1.05rem 10px}
body.mobile .cmx-fila{display:flex;gap:9px;padding:.5rem 0;align-items:flex-start}
body.mobile .cmx-fila+.cmx-fila{border-top:1px solid var(--border)}
body.mobile .cmx-ava{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px}
body.mobile .cmx-cuerpo{flex:1;min-width:0}
body.mobile .cmx-meta{font-size:11px;color:var(--text3);margin-bottom:2px}
body.mobile .cmx-meta b{color:var(--text2);font-weight:600}
body.mobile .cmx-texto{font-size:14px;line-height:1.45;color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap}
body.mobile .cmx-vacio{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2.2rem 1rem;text-align:center}
body.mobile .cmx-vacio b{font-size:14px;color:var(--text)}
body.mobile .cmx-vacio span{font-size:12px;color:var(--text3)}
body.mobile .cmx-vacio .plan-btn2{margin-top:.6rem;min-height:44px}
/* Composer fijo: superficie suave, foco dorado, envío circular de 44 px */
body.mobile .cmx .flow-foot{padding:.5rem 1.05rem calc(.5rem + env(safe-area-inset-bottom,0px))}
body.mobile .cmx-composer{display:flex;gap:8px;align-items:flex-end;flex:1;min-width:0}
body.mobile .cmx-composer textarea{flex:1;min-width:0;margin:0;background:var(--bg3);border:1px solid transparent;border-radius:14px;padding:11px 13px;font-family:inherit;font-size:16px;line-height:1.35;color:var(--text);outline:none;resize:none;min-height:44px;max-height:120px;transition:border-color .15s}
body.mobile .cmx-composer textarea:focus{border-color:var(--gold);box-shadow:none}
body.mobile .cmx-composer textarea:disabled{opacity:.55}
body.mobile .cmx-go{width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:var(--accent-text);font-size:18px;font-weight:700;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;transition:opacity .12s}
body.mobile .cmx-go:disabled{background:var(--border2);color:#fff;cursor:default}
body.mobile .cmx-go[aria-busy="true"]{opacity:.6}
body.mobile .cmx-go:active:not(:disabled){opacity:.75}
body.mobile .cmx-go:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media (prefers-reduced-motion:reduce){body.mobile .modal.flow.cmx.flow-anim{animation:none}}

/* ── Galería y detalle de foto móvil (2026-08-31): la foto domina, la interfaz
   se retira. */
.gal-lupa{display:none}
body.mobile .gal-buscar{position:relative}
body.mobile .gal-buscar .gal-lupa{display:inline-flex;position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
body.mobile .gal-buscar input{padding-left:38px;background:var(--bg3);border:1px solid transparent;border-radius:11px;min-height:44px}
body.mobile .gal-buscar input:focus{border-color:color-mix(in srgb,var(--gold) 35%,transparent);box-shadow:none;outline:none}
/* La card se retira detrás de la fotografía */
body.mobile .gal-card{box-shadow:none;border:1px solid var(--border);border-radius:12px}
body.mobile .gal-meta{padding:.55rem .7rem .65rem}
body.mobile .gal-name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.mobile .gal-sub{font-size:11.5px;color:var(--text2)}
body.mobile .gal-path{font-size:10.5px;color:var(--text3);margin-top:1px}
/* Detalle: hoja al 90%, foto protagonista, Cambiar foto como texto */
body.mobile .vpx{height:calc(90dvh - env(safe-area-inset-top,0px));max-height:none!important;display:flex;flex-direction:column;overflow:hidden}
body.mobile .vpx .ntf-head{padding-bottom:6px}
body.mobile .vpx-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.mobile .vpx-img img{max-width:100%;max-height:100%}
body.mobile .vpx-meta{font-size:11.5px;color:var(--text2);padding:8px 2px 0;flex-shrink:0}
body.mobile .vpx-meta .vpx-ruta{display:block;font-size:10.5px;color:var(--text3);margin-top:1px}
body.mobile .vpx-cambiar{background:none;border:none;color:color-mix(in srgb,var(--gold) 55%,var(--text));font-family:inherit;font-size:13.5px;font-weight:700;padding:12px 2px calc(10px + env(safe-area-inset-bottom,0px));min-height:44px;text-align:left;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
body.mobile .vpx-cambiar:active{opacity:.6}

/* ── Historial móvil (segunda pasada 2026-09-04): registro escaneable, sin cards ── */
body.mobile .hx-resumen{font-size:12.5px;color:var(--text2);margin:2px 2px 8px}
body.mobile .hx-fila{display:flex;gap:8px;margin-bottom:.5rem}
body.mobile .hx-buscar{flex:1;min-width:0}
body.mobile .hx-buscar input{font-size:16px;padding-right:44px}
body.mobile .hx-clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:none;color:var(--text3);font-size:15px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .hx-clear[hidden]{display:none}
body.mobile .hx-fbtn{min-height:44px;flex-shrink:0;border-radius:11px}
body.mobile .hx-tipos{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:.35rem}
body.mobile .hx-tipos::-webkit-scrollbar{display:none}
body.mobile .hx-tipos .rg-chip{min-height:36px;white-space:nowrap}
body.mobile .hx-chips{margin:.2rem 0 .5rem}
body.mobile .hx-dia{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:.4rem}
body.mobile .hx-row{display:flex;gap:10px;align-items:flex-start;padding:.15rem .6rem .15rem .7rem;border-bottom:1px solid var(--border)}
body.mobile .hx-row:last-child{border-bottom:none}
body.mobile .hx-ava{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;color:#fff;flex-shrink:0;margin-top:11px;letter-spacing:.02em}
body.mobile .hx-main{flex:1;min-width:0;display:block;min-height:52px;padding:.55rem 0;background:none;border:none;text-align:left;font:inherit;color:var(--text);border-radius:8px;-webkit-tap-highlight-color:transparent;transition:background .12s}
body.mobile button.hx-main{cursor:pointer}
body.mobile button.hx-main:active{background:var(--bg3)}
body.mobile button.hx-main:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
body.mobile .hx-l1{font-size:14px;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.mobile .hx-verbo{font-weight:600}
body.mobile .hx-tarea{font-weight:600;color:var(--text)}
body.mobile .hx-l2{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .hx-l2 b{font-weight:600;color:var(--text2)}
body.mobile .hx-l3{font-size:11.5px;color:var(--text3);margin-top:2px}
body.mobile .hx-tag{font-weight:600}
body.mobile .hx-tag.late{color:var(--danger)}
body.mobile .hx-tag.ontime{color:var(--success)}
body.mobile .hx-tag.warn{color:var(--warning)}
body.mobile .hx-det{font-size:12px;color:var(--text2);margin-top:3px;overflow-wrap:anywhere}
body.mobile .hx-foto{display:block;max-width:96px;max-height:72px;border-radius:8px;margin-top:6px;border:1px solid var(--border);cursor:pointer}
body.mobile .hx-side{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex-shrink:0;padding-top:.55rem}
body.mobile .hx-time{font-size:11px;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.5}
body.mobile .hx-mas{width:44px;height:40px;margin:-4px -10px 0 0;border:none;background:none;color:var(--text3);font-size:18px;letter-spacing:1px;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
body.mobile .hx-mas:active{background:var(--bg3);color:var(--text)}
body.mobile .hx-vacio{padding:2rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}
body.mobile .hx-vacio-t{font-size:14.5px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
body.mobile .hx-vacio-s{font-size:12px;color:var(--text3)}
body.mobile .hx-vacio .btn,body.mobile .hx-vacio .plan-btn2{min-height:44px}
body.mobile .hx-mas-wrap{text-align:center;padding:.6rem 0 1rem}
body.mobile .hx-mas-wrap .plan-btn2{min-height:44px}
body.mobile .hx-sheet-meta{font-size:12px;color:var(--text2);padding:0 20px 8px}
/* Sheet de Filtros: chips de casa (Planificación) dentro del flow sheet */
body.mobile .hxf .flow-body.plan-fbody{max-height:none;padding:2px 1.05rem 14px}
body.mobile .hxf .plan-fpie{margin:0;padding:.6rem 1.05rem calc(.6rem + env(safe-area-inset-bottom,0px))}
body.mobile .hx-rango{display:flex;gap:8px;margin-top:.5rem}
body.mobile .hx-rango label{flex:1;display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text3)}
body.mobile .hx-rango input{margin:0;min-height:44px;font-size:16px;border:1px solid var(--border);border-radius:10px;padding:0 10px;background:var(--bg2);color:var(--text)}
body.mobile .hx-fn{font-weight:600;color:var(--text3);font-size:11px}
body.mobile .hx-fnada{font-size:12px;color:var(--text3)}
@media (prefers-reduced-motion:reduce){body.mobile .hx-main{transition:none}}
/* Devolver a pendiente: helper de una línea, rojo solo en el CTA */
body.mobile .rjx-aviso{font-size:12px;color:var(--text2);line-height:1.5;margin:.15rem 0 .6rem}
body.mobile .rjx-motivo{width:100%;background:var(--bg3);border:1px solid transparent;border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--text);outline:none;resize:none;min-height:84px}
body.mobile .rjx-motivo:focus{border-color:color-mix(in srgb,var(--gold) 35%,transparent);box-shadow:none}
body.mobile .rjx .cfgo input[type=checkbox]{appearance:none;-webkit-appearance:none;width:42px;height:25px;border-radius:999px;background:var(--border2);position:relative;flex-shrink:0;cursor:pointer;transition:background .15s;margin:0}
body.mobile .rjx .cfgo input[type=checkbox]::after{content:'';position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
body.mobile .rjx .cfgo input[type=checkbox]:checked{background:var(--gold)}
body.mobile .rjx .cfgo input[type=checkbox]:checked::after{left:19.5px}

/* ── Contactos móvil (2026-09-01): directorio operativo, no CRM de entrada.
   Una fila es una persona; el amarillo aparece cuando hay UNA decisión. */
.ctx-lupa{display:none}
/* Tabs: 3 iguales a lo ancho, activo por superficie y no solo por rayita */
body.mobile .ctx-tabs{display:flex;width:100%;background:var(--bg3);border-radius:11px;padding:2px;gap:0}
body.mobile .ctx-tabs .pv-tab{flex:1;min-height:40px;border:none;border-radius:9px;background:none;font-size:12.5px;font-weight:600;color:var(--text2);padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .ctx-tabs .pv-tab.active{background:var(--bg2);color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08);border-bottom:2px solid var(--gold)}
/* Toolbar: Crear manda, Importar acompaña, búsqueda con lupa dentro */
body.mobile .ct-toolbar{display:flex;flex-wrap:wrap;gap:8px}
body.mobile .ctx-buscar{position:relative;flex-basis:100%}
body.mobile .ctx-buscar .ctx-lupa{display:inline-flex;position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
body.mobile .ctx-buscar input{width:100%;padding-left:38px;background:var(--bg3);border:1px solid transparent;border-radius:11px;min-height:44px;margin:0}
body.mobile .ctx-buscar input:focus{border-color:color-mix(in srgb,var(--gold) 35%,transparent);box-shadow:none;outline:none}
/* La fila: persona compacta; la pared de botones amarillos se retira */
body.mobile .clist-row{padding:.55rem .5rem;gap:9px;min-height:56px;cursor:pointer}
body.mobile .clist-row .clist-btns{display:none}
body.mobile .clist-name{font-size:14px}
body.mobile .clist-sub{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mobile .clist-ava{width:32px;height:32px;font-size:12px}
body.mobile .clist-acts .ct-act{background:none;border:none;box-shadow:none;min-width:40px;min-height:40px}
/* Estados vacíos con jerarquía (Outlook, Grupos) */
body.mobile .ctx-vacio{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2.2rem 1.2rem;text-align:center}
body.mobile .ctx-vacio b{font-size:14.5px;color:var(--text)}
body.mobile .ctx-vacio span{font-size:12px;color:var(--text3);line-height:1.5;max-width:300px}
body.mobile .ctx-vacio .btn{margin-top:6px}
body.mobile .ctx-sheet-sub{font-size:11.5px;color:var(--text3);margin:-4px 0 8px}
/* Grupos: filas ligeras, no tarjetas enormes */
body.mobile .ct-card{box-shadow:none;padding:.6rem .65rem}
/* Asignar tarea a contacto: acordeón compartido con Configurar */
body.mobile .atx .cfgm-sec input[type=date],body.mobile .atx .cfgm-sec select{margin-top:4px}

/* Footer: Guardar manda; Cancelar es texto */
body.mobile .cfgm-foot{gap:10px}
body.mobile .cfgm-foot .cfgm-cancel,body.mobile .tsh-conf-acts .cfgm-cancel{background:none;border:none;color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;padding:10px 14px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .cfgm-foot .btn-primary{flex:1}

/* La fila: dos líneas exactas gracias a .tr-tail (display:contents en
   escritorio = layout idéntico al de siempre; aquí, la línea de metadata). */
body.mobile .content .task-row{display:grid;grid-template-columns:26px 1fr 34px;column-gap:9px;row-gap:1px;align-items:start;padding:.5rem .6rem}
body.mobile .content .task-row .drag-handle{display:none}
body.mobile .content .task-row .task-check{grid-row:1/span 2;margin-top:3px;width:24px;height:24px;position:relative}
body.mobile .content .task-row .task-check::before{content:'';position:absolute;inset:-10px}
body.mobile .content .task-row .task-name{grid-column:2;grid-row:1;font-size:15px;min-width:0;width:100%;padding:1px 0;height:auto;line-height:1.3}
body.mobile .content .task-row .my-more{grid-column:3;grid-row:1;justify-self:end}
body.mobile .content .task-row .tr-tail{display:flex!important;grid-column:2/4;grid-row:2;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;font-size:11px;padding:0;min-height:26px}
body.mobile .content .task-row .tr-tail::-webkit-scrollbar{display:none}
body.mobile .content .task-row .tr-tail>*{flex-shrink:0}
body.mobile .content .task-row .task-date{min-height:0;padding:2px 0;font-size:11.5px;width:auto}
/* WhatsApp sigue siendo EL call to action del coordinador — pero de 28px */
body.mobile .content .task-row .wa-circle{width:24px;height:24px}
body.mobile .content .task-row .wa-circle svg{width:13px;height:13px}
body.mobile .content .task-row .rem-ago.vacio{display:none}
.rcv-carbtn{cursor:pointer;color:var(--text3);padding:6px 4px;display:flex;align-items:center;flex-shrink:0}
.rcv-caret{display:flex;transition:transform .15s}
.rcv-caret svg{width:14px;height:14px}
.dg-body{background:var(--bg2)}
.dg-body .field-card{background:transparent;border:none;border-radius:8px;box-shadow:none;margin-bottom:0}
.dg-body .field-card+.field-card{border-top:1px solid var(--border);border-radius:0}
/* Solo con puntero real: en táctil el :hover se quedaba pegado tras el toque y
   una fila entera parecía "seleccionada" en gris sin estarlo (visto 2026-08-31). */
@media(hover:hover){ .dg-body .field-card:hover{background:var(--bg3)} }
/* La metadata de la fila se lee como UNA línea con interpuntos. */
.dg-body .rcv-row .field-meta>span+span::before{content:'·';color:var(--text3);font-weight:400;margin-right:6px}
.dg-body .rcv-row .big-check{width:24px;height:24px;border-width:2px}
.dg-body .rcv-row .field-name{font-size:13px}

/* Rótulos de sección (Vencidas · 4): pequeños, el color solo en el texto. */
.dg-body .rsec{font-size:9.5px;letter-spacing:.07em;margin:.6rem 2px .25rem;opacity:.95}

/* Indicadores del delegador: metadata pareja, sin gritar. */
.dg-kpi{font-size:9.5px;padding:.16rem .5rem}
.dg-kpi-toggle{margin:.05rem 0 .25rem;padding:2px}
.dg-wa{width:26px;height:26px}
.dg-wa .bi svg{width:14px;height:14px}

/* Densidad de escritorio: misma legibilidad, menos aire muerto. */
body:not(.mobile) .dg-head{padding:.4rem .6rem}
body:not(.mobile) .dg-body{padding:.4rem .5rem .5rem}
body:not(.mobile) .msec-head{padding:.55rem .8rem}
body:not(.mobile) .msec-body>.dg-block{margin-bottom:.45rem}
/* Jerarquía vertical de "Mis pendientes" (2026-08-31): el cambio de SECCIÓN
   pide más aire que la relación encabezado↔contenido, que ya está en ~9px y no
   se toca. Solo escritorio; móvil conserva sus valores base. */
body:not(.mobile) .msec{margin-bottom:1.4rem}         /* entre secciones: 17.6px → ~22px */
body:not(.mobile) .dg-body .rsec{margin-top:.35rem}   /* "ver indicadores" → "Vencidas": 9.6px → ~5.6px */
body:not(.mobile) .msec-ic{width:28px;height:28px;border-radius:8px}
body:not(.mobile) .msec-ic .bi svg{width:15px;height:15px}

/* ── Mis pendientes · sistema ESPEJO (2026-08-20) ────────────────────────────
   "Creadas por mí" y "Asignadas a mí" son dos caras del mismo módulo: misma
   geometría, densidad y anatomía; cambia el contenido, no el idioma visual.
   Todo va scoped a .msec-body: los .chapter del tablero y del panel del
   ejecutor NO se tocan. Cero cambios de lógica. */

/* Contenedor de grupo (capítulo propio ↔ delegador): misma caja. */
.msec-body>.chapter{border-radius:10px;margin-bottom:.55rem}
body:not(.mobile) .msec-body>.chapter{margin-bottom:.45rem}
.msec-body .ch-head{padding:.45rem .65rem;transition:background .14s}
body:not(.mobile) .msec-body .ch-head{padding:.4rem .6rem}
/* Fuera el degradado dorado de la bandeja: el acento vive en la estrella. */
.msec-body .mine-chapter .ch-head{background:none}
.msec-body .mine-chapter .ch-head:hover{background:var(--bg3)}
/* La ficha de identidad del grupo: mismo diámetro que el avatar de persona. */
.msec-body .ch-num{width:26px;height:26px;font-size:11px}

/* Fila de tarea propia: fila con divisores, igual que las recibidas. */
.msec-body .my-card{background:transparent;border:none;border-radius:8px;box-shadow:none;margin-bottom:0;max-width:none}
.msec-body .my-card+.my-card{border-top:1px solid var(--border);border-radius:0}
.msec-body .my-card:hover{background:var(--bg3)}
.msec-body .my-head{padding:.55rem .6rem;transition:background .14s}
body.mobile .msec-body .my-head{padding:.75rem .8rem}
/* La señal de "esta no es tuya" (borde izquierdo info) sigue siendo semántica. */
.msec-body .my-card.recv{border-left:3px solid var(--info)}
.msec-body .add-row{padding:.4rem .6rem}

/* El checkbox es EL MISMO componente en las dos caras: completar. */
.msec-body .task-check{width:20px;height:20px;border-width:2px}
.dg-body .rcv-row .big-check{width:20px;height:20px}

/* ── Historial de actividad · refinamiento (2026-08-20) ──────────────────────
   Misma pasada que Mis pendientes: menos tarjetas y color redundante, más
   grilla y densidad. Cada día es una caja; el evento es una FILA con divisor.
   El avatar es la persona; el estado vive en su insignia, una sola vez. */

/* Métricas: resumen compacto, no KPIs ejecutivos. */
.hist-kpis{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin:0 0 12px}
.hist-kpi{border-radius:9px;padding:7px 11px}
.hist-kpi .n{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.hist-kpi .l{text-transform:none;letter-spacing:0;font-weight:600;font-size:10.5px;margin-top:1px}

/* Búsqueda + filtros (2026-08-25): una sola caja, en filas, con el mismo
   vocabulario de la barra del dashboard —chips de periodo, selects, pills de
   lo aplicado— para que filtrar se vea igual en toda la app. Van apilados y no
   en una sola línea porque búsqueda, periodo y selects se peleaban el ancho. */
.hist-filtros{display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.6rem .7rem;margin-bottom:1rem}
.hist-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hist-fila>input{flex:1 1 220px;min-width:0;margin:0}
.hist-filtros .dash-applied{margin-top:0}
/* De qué universo se está filtrando: sin esta línea, mirar los últimos 200
   eventos se confunde con mirar todo el historial. */
.hist-nota{font-size:11px;color:var(--text3);line-height:1.45}
body.mobile .hist-fila>input{flex:1 1 100%}
body.mobile .hist-fila .rg-seg{width:100%;overflow-x:auto}
body.mobile .hist-fila .dash-chips{width:100%;overflow-x:auto}

/* Divisor de día: integrado, sin uppercase a gritos (la raya ya existía). */
.hist-day{text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text2);margin:14px 0 6px}

/* La caja del día contiene filas; fuera la tarjeta por evento y su raya lateral. */
.hist-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.hist-row{background:transparent;border:none;border-radius:0;margin-bottom:0;padding:9px 11px;transition:background .14s}
.hist-row+.hist-row{border-top:1px solid var(--border)}
/* hover solo con hover real: en táctil quedaba una fila beige pintada tras el
   toque (mismo fantasma ya corregido en Papelera y Seguimiento) */
@media(hover:hover){.hist-row:hover{background:var(--bg3)}}

/* Avatar = persona: 26px, como la ficha de identidad de todo el módulo. */
.hist-ava{width:26px;height:26px;font-size:10.5px}

/* Estados: insignias solo las semánticas; lo derivado es metadata en línea. */
.hist-tag{background:transparent;color:var(--text3);text-transform:none;letter-spacing:0;padding:0 2px;font-size:10px}
.hist-tag.late{background:var(--danger-bg);color:var(--danger);padding:2px 7px}
.hist-tag.ontime{background:var(--success-bg);color:var(--success);padding:2px 7px}
.hist-tag.warn{background:var(--warning-bg);color:var(--warning);padding:2px 7px}
/* Recordatorios: en escritorio se ve como warn (sin cambio); en móvil baja a
   metadata compacta con warning suave — estado y atraso conservan su insignia,
   tres píldoras iguales parecían tres botones. */
.hist-tag.rem{background:var(--warning-bg);color:var(--warning);padding:2px 7px}
body.mobile .hist-tag.rem{background:transparent;padding:0 2px;font-weight:600;color:color-mix(in srgb,var(--warning) 72%,var(--text))}
/* Target ≥44px de ↺ y 💬 sin agrandar el icono (patrón ::before de la casa) */
body.mobile .hist-act{position:relative}
body.mobile .hist-act::before{content:'';position:absolute;inset:-4px}

/* Hora: columna estable con números tabulares. */
.hist-time{font-variant-numeric:tabular-nums;min-width:48px;text-align:right}

/* Acciones: neutras por defecto; el color, al pasar (Devolver no es borrar). */
.hist-act:hover{background:var(--bg3)}
.hist-act.danger{color:var(--text3);border-color:var(--border)}
.hist-act.danger:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}

/* Densidad de escritorio. */
body:not(.mobile) .hist-row{padding:7px 11px}
body:not(.mobile) .hist-kpi{padding:6px 10px}

/* ── Contactos · refinamiento (2026-08-20) ───────────────────────────────────
   Lista operacional: un solo botón textual por fila (Asignar tarea), WhatsApp
   como icon action con el verde solo en el glifo, y editar/eliminar dentro de
   ···. Toolbar única con la búsqueda a la derecha. */
.ct-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:.85rem;max-width:900px}
.ct-toolbar input{flex:1 1 220px;min-width:0;max-width:420px;margin:0 0 0 auto}

/* Tabs del panel: misma familia que el segmented de Agrupar por (subrayado ámbar). */
.pv-tab{position:relative}
.pv-tab.active::after{content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--gold)}

/* Ficha de identidad pareja con el resto del sistema; densidad de escritorio. */
.clist-ava{width:28px;height:28px;font-size:11.5px}
body:not(.mobile) .clist-row{padding:.5rem .75rem}
.ct-act.wa{color:var(--wa)}
.ct-act.wa:hover{background:var(--success-bg);color:var(--wa)}
.ct-act.wa svg{width:15px;height:15px}

/* Formulario de contacto: dos columnas en escritorio, labels sin gritar,
   campos claros sobre el modal blanco. */
.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.nc-grid label{text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text2)}
.nc-grid input{background:var(--bg2);margin-bottom:.8rem}
body.mobile .nc-grid{grid-template-columns:1fr}

/* Selector de proveedor de importación: filas con logo oficial + chevron. */
.prov-list{display:flex;flex-direction:column;gap:8px;margin:.5rem 0 .3rem}
.prov-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:.6rem .8rem;background:var(--bg2);border:1px solid var(--border);border-radius:9px;cursor:pointer;font:inherit;color:var(--text);text-align:left;transition:background .14s,border-color .14s}
.prov-row:hover{background:var(--bg3);border-color:var(--border2)}
.prov-logo{display:flex;width:22px;align-items:center;justify-content:center;flex-shrink:0}
.prov-logo svg{height:20px;width:auto;max-width:20px;display:block}
.prov-name{flex:1;font-size:13.5px;font-weight:600}
.prov-chev{display:flex;color:var(--text3);transform:rotate(-90deg)}
.prov-help{font-size:11.5px;color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;margin-bottom:.75rem;line-height:1.5}


/* ══ Login · mundo de puntos (2026-08-20) ═══════════════════════════════════
   Bench Cloudflare: arte a la izquierda (globo de partículas que se condensa
   en el glifo OnYou, ver mundoOnYou en la pieza 04), formulario a la derecha.
   El panel del arte es navy de MARCA (Daniel lo aprobó así). El lado del
   formulario va TODO blanco (pedido 2026-08-20: "o beige o blanco, no los
   2"): la columna toma el color de la tarjeta (--bg2) y la tarjeta pierde su
   borde para fundirse. En pantallas angostas el arte no existe (display:none)
   y el login queda centrado sobre el fondo de siempre. */
.login-arte{display:none}
@media (min-width:1000px){
  .login-wrap:has(.login-arte){display:grid;grid-template-columns:1.12fr minmax(430px,1fr);align-items:stretch;justify-items:stretch;padding:0;gap:0;background:var(--bg2)}
  .login-wrap:has(.login-arte) .login-card{place-self:center;margin:1.5rem;width:380px;border-color:transparent;box-shadow:none}
  .login-arte{display:block;position:relative;overflow:hidden;min-height:100vh;
    background:
      radial-gradient(120% 90% at 82% -10%, rgba(245,166,35,.16), transparent 55%),
      radial-gradient(90% 80% at 0% 100%, rgba(37,211,102,.08), transparent 50%),
      linear-gradient(180deg,#0F2148,#0A1730)}
  .login-arte canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .arte-frase{position:absolute;left:24px;right:24px;bottom:42px;text-align:center;
    color:#EAE7DC;font-size:15.5px;font-weight:600;letter-spacing:.01em;opacity:.92;
    text-shadow:0 1px 12px rgba(8,15,36,.6)}
}


/* ══ Home escritorio · polish final (2026-08-21) ══════════════════════════════
   Tres toques quirúrgicos pedidos por Daniel, todo en escritorio
   (body:not(.mobile)); el móvil no cambia:
   1) "+ Agregar capítulo" deja de flotar: es una ranura punteada del mismo
      ancho que los capítulos, pegada al último — lee como "siguiente capítulo".
   2) "Tareas próximas" pasa de alerta a barra contextual: menos alto, fondo y
      borde más suaves; el ✕ conserva su área tocable.
   3) Jerarquía dentro de la fila: estado principal (URGENTE / devuelta / sin
      respuesta) con fondo semántico suave y peso 600 + punto en vez de emoji;
      metadata ("48h", "hace 7 min", fecha) en neutro y peso 500; acciones ✕/⋯
      atenuadas hasta el hover. Columnas estables: la fecha tiene ancho mínimo y
      el hueco de "hace X" se reserva aunque no haya recordatorio. */
.st-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0;margin-right:1px}
body:not(.mobile) .add-chapter-row{padding:0;margin:-2px 0 .25rem;text-align:left}
body:not(.mobile) .add-chapter-row button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:.5rem .9rem;font-size:12px;font-weight:500;color:var(--text3);background:transparent;border:1px dashed var(--border2);border-radius:var(--radius);transition:background var(--tf),color var(--tf),border-color var(--tf)}
body:not(.mobile) .add-chapter-row button:hover{background:var(--bg3);color:var(--text2);border-color:var(--text3)}
body:not(.mobile) .alert-bar{padding:.38rem .75rem;background:color-mix(in srgb,var(--warning-bg) 42%,var(--bg2));border-color:color-mix(in srgb,var(--warning) 20%,transparent);font-size:11.5px}
body:not(.mobile) .alert-title{margin-bottom:0;min-height:24px}
body:not(.mobile) .alert-title>span:first-child{font-size:9px!important;opacity:.8}
body:not(.mobile) .alert-title+*{margin-top:.3rem}
body:not(.mobile) .alert-x{font-size:12px;padding:4px 7px}
body:not(.mobile) .task-row .st-badge{font-weight:600;letter-spacing:.02em}
body:not(.mobile) .task-row .esc-badge{font-weight:600}
body:not(.mobile) .task-row .recur-badge:not(.st-badge),body:not(.mobile) .task-row .label-pill,body:not(.mobile) .task-row .from-pill{font-weight:500}
body:not(.mobile) .task-row .autodel-badge{background:transparent;color:var(--text3);font-weight:500;padding:2px 3px;border-radius:0}
body:not(.mobile) .task-row .rem-ago{font-weight:500;min-width:74px;justify-content:center}
body:not(.mobile) .task-row .rem-ago.vacio{visibility:hidden}
body:not(.mobile) .task-row .task-date{min-width:84px}
body:not(.mobile) .task-row .task-del:not(:has(.bi)){opacity:.65}
body:not(.mobile) .task-row:hover .task-del:not(:has(.bi)),body:not(.mobile) .task-row .task-del:not(:has(.bi)):hover,body:not(.mobile) .task-row .task-del:not(:has(.bi)):focus-visible{opacity:1}


/* ══ Aviso "OnYou para Windows" (campaña 2026-08-21) ══════════════════════════
   Tarjeta del sistema (bg2 + borde + radio 12) con teja navy de marca e icono
   dorado. ✕ = por ahora; la casilla = nunca más. En móvil se apila. */
.aviso-win{display:flex;align-items:center;gap:14px;margin:.75rem 1.25rem 0;padding:.8rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.content .aviso-win,.sup-shell .aviso-win,.my-wrap .aviso-win{margin-left:0;margin-right:0}
.sup-shell .aviso-win{margin:0 0 .85rem}
.aw-ico{width:40px;height:40px;border-radius:10px;background:var(--navy,#0F2148);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aw-txt{flex:1;min-width:0}
.aw-t{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.3}
.aw-p{font-size:12px;color:var(--text2);line-height:1.5;margin-top:2px}
.aw-p a{color:var(--text2);text-decoration:underline;text-underline-offset:2px}
.aw-p a:hover{color:var(--text)}
.aw-check{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--text3);cursor:pointer;user-select:none}
.aw-check input{width:14px;height:14px;margin:0;accent-color:var(--gold)}
.aw-acts{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.aw-btn{font-size:12px;padding:.5rem .85rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.aw-btn .bi{display:inline-flex}
.aw-btn .bi svg{width:14px;height:14px}
.aw-x{margin-left:0;color:var(--text3);align-self:flex-start}
.aw-campana{background:var(--bg3)}
.aw-ico-mini{color:var(--gold);background:var(--navy,#0F2148);border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.aw-campana a{color:var(--info);text-decoration:underline}
body.mobile .aviso-win{flex-wrap:wrap;margin:.75rem .85rem 0;padding:.8rem .85rem;gap:10px}
body.mobile .aw-txt{flex:1 1 60%}
body.mobile .aw-acts{flex:1 1 100%;justify-content:stretch;flex-direction:column;align-items:stretch}
body.mobile .aw-btn{justify-content:center;min-height:44px}
body.mobile .aw-x{order:-1;margin-left:auto}

/* ── Papelera móvil (2026-09-01): restaurar fácil, destruir con intención ──
   Lista continua propia (tsh-*): la fila deja de cargar dos botones — Restaurar
   queda como acción textual con acento de marca y lo irreversible se muda al ⋯
   (sheet + confirmación con CTA rojo). Sin :hover pegajoso: estas filas no usan
   .rem-row, cuyo hover quedaba pintado tras el toque. Solo móvil. */
body.mobile .tsh-lista{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.mobile .tsh-fila{padding:11px 14px 0;border-bottom:1px solid var(--border)}
body.mobile .tsh-fila:last-child{border-bottom:none}
body.mobile .tsh-tit{font-size:15px;font-weight:600;line-height:1.32;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.mobile .tsh-ruta{font-size:11.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .tsh-meta{font-size:11.5px;color:var(--text3);margin-top:2px}
body.mobile .tsh-alerta{color:color-mix(in srgb,var(--warning) 72%,var(--text));font-weight:650}
body.mobile .tsh-acts{display:flex;align-items:center;justify-content:space-between;margin-top:1px}
/* Touch target ≥44px sin pagar 44px de layout: el ::before expande el área
   tocable hacia el aire de la fila (patrón de listas iOS). */
body.mobile .tsh-rest,body.mobile .tsh-more{position:relative;background:none;border:none;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
body.mobile .tsh-rest::before,body.mobile .tsh-more::before{content:'';position:absolute;left:-8px;right:-8px;top:-8px;bottom:-9px}
body.mobile .tsh-rest{font-size:13.5px;font-weight:650;color:color-mix(in srgb,var(--gold) 55%,var(--text));padding:5px 2px 9px}
body.mobile .tsh-rest:active{opacity:.55}
body.mobile .tsh-more{font-size:19px;letter-spacing:1px;line-height:1;color:var(--text3);padding:2px 6px 12px 20px}
body.mobile .tsh-more:active{opacity:.55}
body.mobile .tsh-vacio{text-align:center;padding:3.2rem 1.6rem;color:var(--text2);font-size:14.5px;font-weight:600}
body.mobile .tsh-vacio span{display:block;margin-top:7px;color:var(--text3);font-size:12.5px;font-weight:400;line-height:1.5}
body.mobile .tsh-conf{padding:0 20px calc(16px + env(safe-area-inset-bottom,0px))}
body.mobile .tsh-conf h3{font-size:17px;font-weight:700;color:var(--text);margin:8px 0 6px}
body.mobile .tsh-conf p{font-size:13.5px;color:var(--text2);line-height:1.5;margin:0 0 16px;overflow-wrap:anywhere}
body.mobile .tsh-conf-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px}
body.mobile .tsh-conf-del{background:var(--danger);color:#fff;border:none;border-radius:11px;font-family:inherit;font-size:14px;font-weight:650;padding:12px 18px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
body.mobile .tsh-conf-del:active{opacity:.75}

/* ── Ajustes móvil (2026-09-01): raíz jerárquica agrupada ──
   Grupos con encabezado de sección + tarjeta de filas divididas, reutilizando la
   anatomía .tools-opt. Lo destructivo (cerrar sesión / borrar cuenta) va al
   final como texto rojo discreto, sin tarjeta. Solo móvil. */
body.mobile .aj-shell{max-width:560px}
body.mobile .aj-sec{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);margin:1.15rem 2px .45rem}
body.mobile .aj-shell .aj-sec:first-child{margin-top:.1rem}
body.mobile .aj-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.mobile .aj-card .tools-opt{padding:.68rem .8rem;border-bottom:1px solid var(--border);border-radius:0;min-height:52px;box-sizing:border-box}
body.mobile .aj-card .tools-opt:last-child{border-bottom:none}
body.mobile .aj-card .tools-opt-title{font-size:14px}
body.mobile .aj-card .tools-opt-desc{font-size:11.5px}
body.mobile .aj-estado{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .aj-back{background:none;border:none;color:var(--text2);font-size:14px;font-weight:650;padding:2px 4px 12px 0;margin:0;-webkit-tap-highlight-color:transparent}
body.mobile .aj-salida{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:1.5rem 2px 0}
body.mobile .aj-salida button{background:none;border:none;font-family:inherit;font-size:14px;font-weight:650;color:var(--danger);padding:11px 4px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
body.mobile .aj-salida button:active{opacity:.55}
body.mobile .aj-salida .aj-borrar{font-size:12.5px;font-weight:500;opacity:.8}

/* ── Seguimiento móvil (2026-09-01): centro de control de lo delegado ──
   Vencidas dominan; programadas plegadas en una fila-resumen; persona y estado
   relativo escaneables; acciones de texto (nada de paredes de botones verdes o
   amarillos); encabezados de grupo en sentence case con su color de microacento.
   Solo móvil — escritorio conserva su plantilla completa. */
body.mobile .remx-tabs{width:100%;display:flex}
body.mobile .remx-tabs .pv-tab{flex:1;min-height:44px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
body.mobile .remx-buscar{margin-bottom:.8rem}
body.mobile .remx-buscar .rem-search{margin-bottom:0;max-width:none}
body.mobile .remx-sec{font-size:13px;font-weight:700;margin:1.05rem 2px .35rem}
body.mobile .remx-sec-nota{font-weight:500;font-size:11px;color:var(--text3)}
body.mobile .remx-ok{font-size:13px;font-weight:600;color:var(--success);margin:.9rem 2px .2rem}
body.mobile .rem-row.remx{align-items:flex-start;padding:.55rem .7rem .4rem;gap:10px;cursor:pointer}
body.mobile .remx-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:7px}
body.mobile .remx-tit{font-size:14.5px;font-weight:600;line-height:1.32;color:var(--text)}
body.mobile .remx-tit.done{text-decoration:line-through;color:var(--text3);font-weight:500}
body.mobile .remx-sub{font-size:12px;color:var(--text2);margin-top:1px}
body.mobile .remx-sub b{color:var(--text)}
body.mobile .remx-ruta{font-size:11px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .remx-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;min-height:26px}
body.mobile .remx-senales{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
body.mobile .remx-hecha{font-size:12px;color:var(--success);font-weight:600;flex-shrink:0}
/* Target ≥44px del Recordar sin pagar layout (patrón ::before de la casa) */
body.mobile .remx .rem-wa{position:relative}
body.mobile .remx .rem-wa::before{content:'';position:absolute;left:-12px;right:-12px;top:-11px;bottom:-11px}
/* Programadas: fila-resumen neutra, plegada; el ámbar solo como microaviso */
body.mobile .remx-prog{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.9rem;overflow:hidden}
body.mobile .remx-prog-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;font-family:inherit;padding:.7rem .8rem;min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
body.mobile .remx-prog-t{font-size:13.5px;font-weight:700;color:var(--text)}
body.mobile .remx-prog-hoy{font-size:11px;font-weight:700;color:var(--warning);background:var(--warning-bg);border-radius:999px;padding:2px 8px}
body.mobile .remx-prog-head .msec-caret{margin-left:auto;color:var(--text3);display:inline-flex;transition:transform .18s}
body.mobile .remx-prog-body{padding:0 .8rem .5rem}
body.mobile .remx-prog-sub{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 .15rem}
/* "Enviar ahora" textual: el amarillo de marca como acento, no como pared */
body.mobile .rem-enviar{background:none!important;border:none!important;color:color-mix(in srgb,var(--gold) 55%,var(--text))!important;font-weight:650;padding:10px 2px!important;min-height:44px}
body.mobile .rem-enviar:active{opacity:.55}
/* La insignia de escalada, suave y pequeña (ya venía tenue; fijar tamaño) */
body.mobile .remx .esc-badge{font-size:10.5px}
body.mobile .remx .rem-ago{font-size:10.5px}

/* ── Viewport con teclado (2026-09-02) ──
   La app fija y los overlays fijos SIGUEN al visual viewport: --vvt es su
   desplazamiento (WebKit lo mueve para revelar el input enfocado) y --vvh su
   altura. Sin esto la app quedaba medio fuera de pantalla con un hueco vacío
   debajo al editar un título (la "pantalla azul"). La barra inferior se retira
   mientras el teclado esté abierto: no compite con el campo ni con el sheet. */
body.mobile .app{top:var(--vvt,0px)}
body.mobile .modal-ov{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100vh)}
body.mobile.kb-open .mnav{display:none}

/* ── Flow sheet móvil (2026-09-02): un solo sheet, varios pasos ──
   handle + cabecera fija (‹ atrás, título, contexto) + cuerpo = ÚNICO scroll +
   pie fijo. Alto = 92% del visual viewport: con teclado el cuerpo se encoge y
   el pie sigue a la vista. La subida se anima solo al abrir el flujo
   (flow-anim); cambiar de paso funde el cuerpo (flow-step), no re-abre. */
body.mobile .modal.flow{height:calc((var(--vvh,100vh) - env(safe-area-inset-top,0px)) * .92);max-height:none!important;display:flex;flex-direction:column;overflow:hidden;padding:0!important;border-radius:18px 18px 0 0;animation:none}
body.mobile .modal.flow.flow-anim{animation:sheetup .38s cubic-bezier(.34,1.18,.42,1)}
body.mobile .flow .notif-grab{margin:8px auto 6px}
body.mobile .flow-head{flex-shrink:0;padding:0 1.05rem .55rem}
body.mobile .flow-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
body.mobile .flow-sub{font-size:11.5px;color:var(--text3);margin:2px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body.mobile .flow-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--text2);font-family:inherit;font-size:13.5px;font-weight:650;padding:6px 0 8px;min-height:40px;cursor:pointer;-webkit-tap-highlight-color:transparent;margin-left:-2px}
body.mobile .flow-back span[aria-hidden]{font-size:20px;line-height:1;margin-top:-2px}
body.mobile .flow-back:active{opacity:.6}
body.mobile .flow-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 1.05rem 14px}
@media (prefers-reduced-motion:no-preference){ body.mobile .flow-body.flow-step{animation:mviewIn .16s ease-out} }
body.mobile .flow-foot{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:.65rem 1.05rem calc(.65rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--bg2)}
body.mobile .flow-foot .cfgm-cancel{background:none;border:none;color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;padding:10px 14px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .flow-foot .btn-primary{flex:1;min-height:48px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
body.mobile .flow-foot .btn-soft-danger{font-size:11.5px;margin-right:auto}
/* Dentro del flujo ninguna lista tiene scroll propio: el cuerpo es el dueño */
body.mobile .flow .contact-search-list{max-height:none!important;overflow:visible!important;border:none;border-radius:0}
body.mobile .flow .asgm-editor label,body.mobile .flow label{font-size:11px;color:var(--text3)}
/* Varias personas dentro del shell: el jt-modal deja de ser scroller propio */
body.mobile .modal.flow.jt-modal{height:calc((var(--vvh,100vh) - env(safe-area-inset-top,0px)) * .92);overflow:hidden}
/* Equipo · "Enviar link": secundario neutro con el glifo de WhatsApp en verde
   (verde = éxito; la acción no lo es). Lógica intacta. */
body.mobile .eq-link{background:var(--bg2);color:var(--text);border-color:var(--border);font-weight:600}
body.mobile .eq-link svg{color:var(--wa);fill:currentColor}
body.mobile .eq-link:active{background:var(--bg3)}
/* Varias personas: .jt-cols hereda align-items:start del grid de escritorio y
   en columna eso encogía búsqueda y lista al ancho de su contenido (~60%).
   A lo ancho, como todo el cuerpo del flujo. */
body.mobile .jt-cols{align-items:stretch}
body.mobile .jt-col{width:100%}

/* ── iOS auto-zoom (2026-09-02) ──
   Todo campo de texto en móvil va a 16px: por debajo, iOS amplía la página al
   enfocar y, con la app fija, el zoom no vuelve (pantalla corrida y cortada).
   Estas reglas rematan a las que se escapaban de la regla general de 16px por
   venir después o con más especificidad; los tres con font-size inline llevan
   !important porque es lo único que le gana a un style=. Contrato en
   .docs/probar-asignadas-a-mi.js. */
body.mobile .dlg-search input,body.mobile .dlg-picked input,body.mobile .gs-field input,body.mobile .hq-box input,body.mobile .asgm-buscar input,body.mobile .cmx-composer textarea,body.mobile .hx-buscar input{font-size:16px}
body.mobile #gc-search,body.mobile #gsearch,body.mobile #ai-prompt{font-size:16px!important}

/* ── "Asignadas a mí" móvil (2026-09-02): la lista navega, el detalle actúa ──
   Fila = encontrar (check + título + estado + ›). Detalle = flow sheet (rdx)
   con hechos en filas agrupadas, notas de estado y filas de navegación hacia
   Comentarios / Pedir más plazo / Delegar; Rechazar vive en el ··· . Prórroga,
   Delegar, Nuevo contacto, Rechazar y Comentarios son pasos del mismo sheet. */
body.mobile .rcv-chev{font-size:22px;line-height:1;color:var(--text3);opacity:.55;display:block;margin-top:-2px}
body.mobile .dg-body .rcv-carbtn{padding:10px 4px 10px 10px}
body.mobile .dg-body .rcv-row{-webkit-tap-highlight-color:transparent}
body.mobile .dg-body .rcv-row:active{background:var(--bg3)}
/* Objetivos táctiles ≥44px sin mover el layout (patrón ::before de la casa) */
body.mobile .dg-wa,body.mobile .mx-scope-all{position:relative}
body.mobile .dg-wa::before{content:'';position:absolute;inset:-9px}
body.mobile .mx-scope-all::before{content:'';position:absolute;inset:-6px -8px}
body.mobile .flow #dlg-find>.btn{min-height:44px;font-size:13.5px!important;border-radius:12px}
/* Porcentaje de cumplimiento como metadata tocable (abre los indicadores) */
body.mobile .dg-cump{font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
body.mobile .dg-cump::before{content:'';position:absolute;inset:-10px -6px}
body.mobile .dg-cump.good{color:var(--success)}
body.mobile .dg-cump.warn{color:color-mix(in srgb,var(--warning) 72%,var(--text))}
body.mobile .dg-cump.bad{color:var(--danger)}
/* Shell: ··· en la cabecera y ‹ que se corta con elipsis cuando el título es largo */
body.mobile .modal.flow{position:relative}
body.mobile .flow-more{position:absolute;top:4px;right:6px;z-index:2;background:none;border:none;color:var(--text2);font-size:22px;letter-spacing:1px;line-height:1;padding:8px 10px 12px;min-width:44px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .flow-more:active{opacity:.55}
body.mobile .flow-head:has(.flow-more){padding-right:52px}
body.mobile .flow-back{max-width:100%}
body.mobile .flow-back>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body.mobile .rdx-estado{font-weight:700;font-size:12.5px}
/* Menú del ···: popover dentro del sheet, no otra capa modal */
body.mobile .rdx-menu-bg{position:absolute;inset:0;z-index:3}
body.mobile .rdx-menu{position:absolute;top:46px;right:12px;z-index:4;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:4px;min-width:200px;animation:mviewIn .14s ease-out}
body.mobile .rdx-menu .mymenu-item{padding:.75rem .8rem;min-height:44px}
/* Hechos: filas agrupadas con divisores suaves, sin tarjetas por dato */
body.mobile .rdx-facts{display:flex;flex-direction:column;margin-top:4px}
body.mobile .rdx-fact{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;line-height:1.4}
body.mobile .rdx-fact:last-child{border-bottom:none}
body.mobile .rdx-k{flex:0 0 104px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding-top:2px}
body.mobile .rdx-v{flex:1;min-width:0;color:var(--text);overflow-wrap:anywhere}
body.mobile .rdx-v.vacio{color:var(--text3)}
body.mobile .rdx-desc{flex-direction:column;gap:3px;align-items:stretch}
body.mobile .rdx-desc .rdx-k{flex:none;padding-top:0}
body.mobile .rdx-suave{color:var(--text3)}
body.mobile .rdx-foto-req{display:inline-flex;align-items:center;gap:6px;color:var(--info);font-weight:600}
body.mobile .rdx-foto-req svg{width:15px;height:15px}
/* Notas de estado (prórroga pendiente, devuelta, rechazada) */
body.mobile .rdx-note{border-radius:10px;padding:.6rem .75rem;font-size:12.5px;line-height:1.45;margin-top:12px}
body.mobile .rdx-note.warn{background:var(--warning-bg);color:color-mix(in srgb,var(--warning) 72%,var(--text))}
body.mobile .rdx-note.danger{background:var(--danger-bg);color:var(--danger)}
body.mobile .rdx-note span{opacity:.85}
body.mobile .rdx-foto{margin-top:14px}
body.mobile .rdx-foto .rdx-k{display:block;margin-bottom:6px}
body.mobile .rdx-foto img{display:block;max-width:100%;border-radius:10px;border:1px solid var(--border)}
body.mobile .rdx-link{background:none;border:none;color:color-mix(in srgb,var(--gold) 55%,var(--text));font-family:inherit;font-size:13.5px;font-weight:650;padding:10px 2px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Filas de navegación: abren otro nivel, no son CTAs finales */
body.mobile .rdx-nav{margin-top:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.mobile .rdx-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 12px 0 14px;background:none;border:none;border-bottom:1px solid var(--border);font-family:inherit;font-size:15px;font-weight:600;color:var(--text);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .rdx-row:last-child{border-bottom:none}
body.mobile .rdx-row:active{background:var(--bg3)}
body.mobile .rdx-row-t{flex:1;min-width:0}
body.mobile .rdx-row.danger{color:var(--danger)}
body.mobile .rdx-cnt{font-size:12px;font-weight:700;color:var(--text2);background:var(--bg3);border-radius:999px;padding:2px 8px}
body.mobile .rdx-chev{font-size:22px;line-height:1;color:var(--text3);opacity:.55;margin-top:-2px}
/* Formularios de los pasos (prórroga, rechazo, delegar, nuevo contacto) */
body.mobile .rdx-form{padding-top:4px}
body.mobile .rdx-lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin:0 0 6px}
body.mobile .rdx-lbl-sep{margin-top:16px}
body.mobile .rdx-form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:11px 13px;outline:none;resize:none;min-height:96px;line-height:1.4;transition:border-color var(--tf)}
body.mobile .rdx-form textarea:focus{border-color:var(--gold);box-shadow:none}
body.mobile .rdx-form .ol-textarea{min-height:72px}
body.mobile .rdx-hint{font-size:12px;color:var(--text3);margin-top:6px}
/* Nueva fecha como fila (no un input web enorme): el input nativo sigue siendo el objetivo del toque */
body.mobile .rdx-date{display:flex;align-items:center;gap:10px;min-height:52px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px 0 14px;margin:0 0 16px;cursor:pointer;text-transform:none;letter-spacing:0}
body.mobile .rdx-date .rdx-k{flex:1;padding:0;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text)}
body.mobile .rdx-date input{flex:0 1 auto;width:auto;min-width:0;margin:0;border:none;background:none;padding:12px 0;font-size:16px;color:var(--text);text-align:right;outline:none;-webkit-appearance:none;appearance:none;font-family:inherit;box-shadow:none}
body.mobile .rdx-date input::-webkit-date-and-time-value{text-align:right}
body.mobile .rdx-date input::-webkit-calendar-picker-indicator{display:none}
/* Delegar dentro del flujo: la lista de contactos es parte del único scroll */
body.mobile .flow .dlg-results{max-height:none;overflow:visible;margin-top:6px}
body.mobile .flow .dlg-row{padding:.55rem .45rem;min-height:48px}
body.mobile .flow .dlg-search{min-height:46px;border-radius:12px}
body.mobile .flow .dlg-newc label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);display:block;margin:10px 0 4px}
body.mobile .flow .dlg-newc input{width:100%;font-size:16px;padding:.6rem .85rem;border:1.5px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);outline:none;margin-bottom:.4rem}
body.mobile .flow .dlg-newc input:focus{border-color:var(--gold)}
/* Comentarios dentro del flujo: hilo en el cuerpo, composer en el pie */
body.mobile .rdx .cmx-hilo{flex:none;overflow:visible;padding:2px 0 8px} /* paso dentro del detalle de Asignadas a mí: el scroller es el flow-body */
body.mobile .rdx-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}

/* ── Ecosistema de la hoja, segunda pasada (2026-09-02): tres patrones ──
   pantalla normal · action sheet corto (···) · high flow sheet (flowShell).
   Aquí solo lo que faltaba para que Configurar, Asignar/Editar y Varias
   personas obedezcan las mismas reglas de cabecera, scroll y pie. */
/* Action sheet: el nombre de la actividad como título normal, máximo 2 líneas */
.sheet-title.sheet-title-n{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--text);line-height:1.3;padding:6px 20px 0;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* El título editable de cada fila de la hoja también va a 16px (iOS auto-zoom) */
body.mobile .content .task-row input.task-name,body.mobile .task-row input.task-name{font-size:16px}
/* Configurar actividad dentro del flow: el título es un campo de título (no un
   input web), crece con el texto y solo marca el borde al enfocar */
body.mobile .cfgm .cfgm-title{display:block;width:100%;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--text);background:none;border:none;border-bottom:1.5px solid transparent;border-radius:0;padding:4px 0 6px;margin:0 0 .6rem;resize:none;overflow:hidden;font-family:inherit;outline:none;box-shadow:none;transition:border-color var(--tf)}
body.mobile .cfgm .cfgm-title:focus{border-bottom-color:var(--gold);box-shadow:none}
body.mobile .cfgm .flow-body{padding-bottom:28px}
body.mobile .cfgm .cfgm-sec,body.mobile .cfgm .cfg-sub{overflow:visible;max-height:none}
/* Asignar: los datos de envío nunca se despliegan debajo de la lista (son un paso) */
body.mobile .asgm-editor,body.mobile .asgm-editor.open{display:none!important}
/* Buscadores dentro del flow: una sola superficie, un solo anillo de foco */
body.mobile .flow .dlg-search{background:var(--bg3);border:1px solid transparent;border-radius:12px;min-height:46px;padding:0 12px;box-shadow:none}
body.mobile .flow .dlg-search:focus-within{border-color:var(--gold);box-shadow:none}
body.mobile .flow .dlg-search input{font-size:16px;padding:.6rem 0}
/* Varias personas: filas en grupo (no tarjeta dentro de tarjeta) */
body.mobile .flow .jt-pick{border:none;border-radius:0;background:none;padding:.55rem 0;margin:0;border-bottom:1px solid var(--border)}
body.mobile .flow .jt-pick.is-done{background:none;border-bottom-color:var(--border)}
body.mobile .flow #jt-left{margin-bottom:6px}
body.mobile .flow .jt-pick-name{font-size:14.5px}
body.mobile .flow .jt-pick-wa{font-size:11.5px}
body.mobile .flow .jt-ava{width:30px;height:30px;font-size:11px}
body.mobile .flow .joint-seq{width:20px;height:20px;font-size:11px}
/* Por orden: flechas discretas en línea, no dos botones apilados */
body.mobile .flow .jt-ord-btns{flex-direction:row;gap:0}
body.mobile .flow .jt-arrow{min-width:36px;min-height:40px;width:36px;height:40px;border:none;background:none;color:var(--text2);font-size:17px;border-radius:8px}
body.mobile .flow .jt-arrow:active:not([disabled]){background:var(--bg3)}
body.mobile .flow .jt-x{min-width:40px;min-height:40px}
/* "A la vez" como conmutador pequeño dentro de la fila */
body.mobile .jt-junto{display:inline-flex;align-items:center;min-height:36px;margin:2px 0 0 50px;padding:4px 10px;border-radius:999px;border:1px dashed var(--border2);background:none;color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative}
body.mobile .jt-junto::before{content:'';position:absolute;inset:-4px 0}
body.mobile .jt-junto.par{border-style:solid;border-color:color-mix(in srgb,var(--joint-ink) 45%,transparent);background:color-mix(in srgb,var(--joint-ink) 10%,transparent);color:var(--joint-ink)}
body.mobile .jt-orden-hint{margin:-2px 2px 8px}
/* Tarea concreta: el campo de cada persona, a lo ancho y en la misma superficie */
body.mobile .flow .joint-part-in{width:100%;margin:6px 0 2px;font-size:16px;background:var(--bg3);border:1px solid transparent;border-radius:10px;padding:10px 12px}
body.mobile .flow .joint-part-in:focus{border-color:var(--gold);box-shadow:none}
/* Tareas próximas / Actividad reciente: mismo contenido, menos chrome
   (antes 45 + 42 px con márgenes de 12: 111 px en total) */
body.mobile .alert-bar,body.mobile .feed-bar{margin:.5rem 1rem 0;padding:.4rem .7rem;font-size:12.5px}
body.mobile .alert-bar+.feed-bar,body.mobile .feed-bar+.alert-bar{margin-top:.35rem}
body.mobile .feed-title{margin-bottom:0}
body.mobile .feed-bar .feed-row{margin-top:.35rem}

/* ── Visor de evidencias móvil (2026-09-02) ──
   Un solo sheet (flowShell al 92%): cabecera con "Hecho", pista de 3 fotos
   sobre fondo neutro oscuro, metadata y "Cambiar foto" como fila. La imagen
   manda: contain, sin deformar; la interfaz se retira. */
body.mobile .flow-done{position:absolute;top:6px;right:8px;z-index:2;background:none;border:none;color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;padding:10px 10px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .flow-done:active{opacity:.6}
body.mobile .flow-head:has(.flow-done){padding-right:74px}
body.mobile .vpx .flow-body{padding:0 0 16px}
body.mobile .vpx-track{position:relative;width:100%;height:calc((var(--vvh,100vh) - env(safe-area-inset-top,0px)) * .92 - 250px);min-height:260px;overflow:hidden;background:#15181d;touch-action:pan-y;user-select:none;-webkit-user-select:none}
body.mobile .vpx-strip{display:flex;width:300%;height:100%;transform:translateX(-33.3333%);will-change:transform}
body.mobile .vpx-strip.anim{transition:transform .18s ease-out}
@media (prefers-reduced-motion:reduce){ body.mobile .vpx-strip.anim{transition:none} }
body.mobile .vpx-slot{width:33.3333%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.mobile .vpx-slot img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;-webkit-user-drag:none;transition:transform .12s ease-out}
body.mobile .vpx-slot img[src=""],body.mobile .vpx-slot img:not([src]){width:40%;opacity:.15}
body.mobile .vpx-meta{padding:12px 1.05rem 0;font-size:13.5px;color:var(--text2)}
body.mobile .vpx-meta .vpx-ruta{display:block;font-size:11.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile .vpx .rdx-nav{margin:12px 1.05rem 0}
body.mobile .vpx .rdx-row .bi{display:inline-flex;color:var(--text2)}
body.mobile .vpx .rdx-row .bi svg{width:18px;height:18px}
body.mobile .vpx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Galería: toda la tarjeta es el objetivo; presionada, apenas cede */
body.mobile .gal-card{-webkit-tap-highlight-color:transparent;transition:opacity var(--tf)}
body.mobile .gal-card:active{opacity:.9}
body.mobile .gal-card:hover{transform:none;box-shadow:none;border-color:var(--border)}
body.mobile .gal-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Contactos móvil, segunda pasada (2026-09-02): Agenda + flujos en el shell ── */
body.mobile .ag-intro{display:flex;flex-direction:column;gap:4px;margin:2px 2px 12px}
body.mobile .ag-intro b{font-size:15px;color:var(--text)}
body.mobile .ag-intro span{font-size:12.5px;color:var(--text3);line-height:1.5}
body.mobile .ag-list{margin:0}
body.mobile .ag-list .prov-row{min-height:60px}
body.mobile .prov-sub{display:block;font-size:11px;font-weight:500;color:var(--text3);margin-top:2px;line-height:1.35}
body.mobile .ag-otras{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
body.mobile .ag-otras b{font-size:13.5px;color:var(--text)}
body.mobile .ag-otras span{font-size:12px;color:var(--text3);line-height:1.5}
body.mobile .ag-otras .rdx-link{align-self:flex-start;padding-left:0;margin-top:2px}
body.mobile .ag-estado{display:flex;align-items:center;gap:10px;margin:0 0 10px}
body.mobile .ag-estado .prov-logo{display:flex;width:22px;flex-shrink:0}
body.mobile .ag-estado b{display:block;font-size:14px;color:var(--text)}
body.mobile .ag-estado>div>span{font-size:11.5px;color:var(--text3)}
body.mobile .ag-recargar{margin-left:auto;background:none;border:none;color:var(--text2);font-family:inherit;font-size:17px;min-width:44px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .ag-recargar:active{opacity:.6}
/* Formularios de contacto en el flow: campos a lo ancho, mismo look que el resto del shell */
body.mobile .ncm-form input{width:100%;min-height:44px;font-size:16px;padding:.6rem .85rem;border:1.5px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);outline:none;margin:0}
body.mobile .ncm-form input:focus{border-color:var(--gold);box-shadow:none}
body.mobile .atx .flow-body{padding-bottom:24px}
body.mobile .atx .cfgm-sec .atx-fecha{margin:8px 0 4px;background:var(--bg);border-color:var(--border2)}
body.mobile .atx .cfgm-sec .atx-fecha input{margin:0}

/* ── Papelera móvil, segunda pasada (2026-09-02): buscador + sheet compacto ── */
body.mobile .tsh-buscar{margin-bottom:12px}
body.mobile .tsh-buscar input{padding-right:44px}
body.mobile .tsh-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0}
body.mobile .tsh-clear[hidden]{display:none}
body.mobile .tsh-res{font-size:12px;color:var(--text3);margin:0 2px 8px}
body.mobile .tsh-sinres{padding:2rem 1.4rem;font-size:14px;font-weight:500;color:var(--text2)}
/* El sheet del ··· se ajusta a su contenido: nombre, metadata, una acción */
body.mobile .tsh-sheet .ctx-sheet-sub{padding:0 20px 8px}
body.mobile .tsh-sheet .sheet-item{margin-top:2px}
body.mobile .tsh-conf h3{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.mobile .tsh-conf-del:disabled{opacity:.6}

/* ── Mensajes móvil (2026-09-02): índice por momentos + editor con vista previa ── */
body.mobile .msg-idx-t{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--text);margin:2px 2px 2px}
body.mobile .msg-idx-s{font-size:13px;color:var(--text2);line-height:1.5;margin:0 2px 6px}
body.mobile .msg-ed-t{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--text);margin:2px 2px 2px}
body.mobile .msg-ed-s{font-size:12.5px;color:var(--text3);margin:0 2px 4px;line-height:1.45}
/* La burbuja: reconocible, neutral, sin copiar WhatsApp */
body.mobile .msg-prev{padding:14px 12px;background:color-mix(in srgb,var(--navy) 6%,var(--bg2));border:1px solid var(--border);border-radius:var(--radius)}
body.mobile .msg-burbuja{max-width:92%;background:color-mix(in srgb,var(--success) 9%,var(--bg2));border:1px solid color-mix(in srgb,var(--success) 22%,var(--border));border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:14px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
body.mobile .msg-burbuja b{font-weight:700}
/* El texto editable, secundario respecto a la preview; crece con el contenido */
body.mobile .msg-ed-ta{width:100%;font-family:inherit;font-size:16px;line-height:1.45;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:11px 13px;outline:none;resize:none;min-height:120px;max-height:320px;overflow-y:auto;transition:border-color var(--tf)}
body.mobile .msg-ed-ta:focus{border-color:var(--gold);box-shadow:none}
/* Variables como herramientas del usuario (el token real vive dentro) */
body.mobile .msg-ed-vars{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body.mobile .msg-var{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:999px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);padding:8px 12px;min-height:38px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--tf)}
body.mobile .msg-var::before{content:'';position:absolute;inset:-4px -2px}
body.mobile .msg-var:active{background:var(--bg3)}
body.mobile .msg-ed-fmt{font-size:11.5px;color:var(--text3);margin:10px 2px 0}
body.mobile .msg-ed-err{font-size:12.5px;color:var(--danger);margin:8px 2px 0;line-height:1.45}
body.mobile .msg-ed-err:empty{display:none}
body.mobile .msg-ed-reset{display:block;margin:10px 0 0;padding-left:2px}
/* Pie pegado al fondo del scroller de Ajustes: Cancelar | Guardar */
body.mobile .msg-ed-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;margin:16px -1rem 0;padding:10px 1rem calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--border)}
body.mobile .msg-ed-foot .cfgm-cancel{background:none;border:none;color:var(--text2);font-family:inherit;font-size:14px;font-weight:600;padding:10px 14px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .msg-ed-foot .btn-primary{flex:1;min-height:48px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
body.mobile .msg-ed-foot .btn-primary:disabled{opacity:.45}
/* Ajustes → Calendario (suscripción externa): conserva su estilo aunque el calendario interno se fue */
.cal-primary{display:flex;width:100%;justify-content:center;text-decoration:none;margin-bottom:.6rem}
.cal-more{margin-bottom:.7rem}
.cal-more>summary{cursor:pointer;font-size:12.5px;color:var(--text2);padding:.35rem 0;user-select:none;list-style:none}
.cal-more>summary::-webkit-details-marker{display:none}
.cal-more>summary:before{content:'▸ ';color:var(--text3)}
.cal-more[open]>summary:before{content:'▾ '}
.cal-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;word-break:break-all;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;color:var(--text2);cursor:pointer;margin:.2rem 0 .6rem}
.cal-url:hover{border-color:var(--accent)}
.cal-sub-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.7rem}
.cal-sub-btns .btn{flex:1;min-width:120px;text-align:center;text-decoration:none;font-size:12.5px}
.cal-help{font-size:11.5px;color:var(--text3);line-height:1.6;background:var(--bg3);border-radius:8px;padding:.6rem .7rem;margin-bottom:.7rem}
.cal-help b{color:var(--text2)}
.cal-sub-manage{display:flex;gap:6px;justify-content:flex-end}
.cal-sub-manage .btn{font-size:12px}
/* ── Planificación (2026-09-03): sustituye al calendario interno (.cal-*) ──
   Intensidad = volumen relativo (tinta navy en claro, dorado en oscuro).
   Rojo solo para vencidas; dorado para hoy/selección/pico. */
:root{--plan-ink:var(--navy)}
[data-theme="dark"]{--plan-ink:var(--gold)}
.plan-danger{color:var(--danger);font-weight:600}
.plan-wrap{display:flex;gap:1.25rem;align-items:flex-start}
.plan-main{flex:1;min-width:0}
.plan-side{width:380px;flex:none;position:sticky;top:6px;max-height:calc(100vh - 150px);display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.plan-side-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:.85rem 1rem .7rem;border-bottom:1px solid var(--border)}
.plan-side-title{font-size:14px;font-weight:700}
.plan-side-sub{font-size:12px;color:var(--text2);margin-top:2px}
.plan-side-close{width:32px;height:32px;flex:none;border:none;background:var(--bg3);border-radius:8px;font-size:18px;line-height:1;cursor:pointer;color:var(--text2)}
.plan-side-close:hover{color:var(--text)}
.plan-side-body{overflow-y:auto;padding:.5rem .6rem;flex:1;min-height:0}
.plan-nav{display:flex;align-items:center;gap:8px;margin:.25rem 0 .75rem}
.plan-nav-btn{width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);cursor:pointer;font-size:16px;color:var(--text)}
.plan-nav-btn:hover{background:var(--bg3)}
.plan-rango{font-size:15px;font-weight:700;min-width:150px;text-align:center}
.plan-encurso{font-size:11.5px;font-weight:600;color:var(--gold-600);background:var(--gold-soft);border-radius:999px;padding:3px 10px}
.plan-hoy{font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--bg2);border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--text2)}
.plan-hoy:hover{border-color:var(--gold);color:var(--text)}
.plan-fbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:.75rem}
.plan-fbtn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--border);background:var(--bg2);border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text)}
.plan-fbtn.on{border-color:var(--gold);background:var(--gold-soft)}
.plan-fbadge{background:var(--gold);color:var(--navy);border-radius:999px;font-size:11px;padding:0 6px;font-weight:700}
.plan-chip{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 4px 0 10px;background:var(--bg3);border-radius:999px;font-size:12px;font-weight:600}
.plan-chip button{width:26px;height:26px;border:none;background:none;cursor:pointer;font-size:15px;color:var(--text2);border-radius:50%}
.plan-chip button:hover{background:var(--border);color:var(--text)}
.plan-limpiar{border:none;background:none;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;text-decoration:underline;text-underline-offset:3px}
.plan-limpiar:hover{color:var(--text)}
.plan-btn2{font-size:12px;padding:.4rem .9rem;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-weight:600}
.plan-btn2:hover{background:var(--bg3)}
.plan-btn2[disabled]{opacity:.5;cursor:default}
.plan-resumen{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:13px;color:var(--text2);margin-bottom:.6rem}
.plan-res-item{border:none;background:none;padding:2px 0;font:inherit;color:var(--text2)}
button.plan-res-item{cursor:pointer}
button.plan-res-item:hover{color:var(--text)}
.plan-res-item b{color:var(--text);font-size:15px;font-variant-numeric:tabular-nums}
.plan-res-item.danger b{color:var(--danger)}
.plan-insights{display:flex;flex-direction:column;gap:4px;margin:0 0 1rem}
.plan-insight{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:.55rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);cursor:pointer;font:inherit;font-size:12.5px;color:var(--text)}
.plan-insight:hover{border-color:var(--gold)}
.plan-insight-ir{color:var(--text3);font-size:16px}
.plan-matriz-wrap{overflow-x:auto;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.plan-matriz{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums}
.plan-matriz th,.plan-matriz td{padding:0;text-align:center;border-bottom:1px solid var(--border)}
.plan-matriz tbody tr:last-child th,.plan-matriz tbody tr:last-child td{border-bottom:none}
.plan-matriz thead th{padding:.55rem .4rem;font-size:11px;color:var(--text3);font-weight:700;background:var(--bg3)}
.plan-th-resp,.plan-th-nombre,.plan-tr-total th,.plan-tr-sin th{text-align:left!important;padding:0 .9rem!important;min-width:170px;max-width:240px;font-weight:600}
.plan-th-dow{display:block;text-transform:uppercase;letter-spacing:.04em}
.plan-th-num{display:block;font-size:15px;color:var(--text);font-weight:700}
.plan-th-dia.today .plan-th-num{color:var(--gold-600)}
.plan-th-dia.pico{box-shadow:inset 0 -3px 0 var(--gold)}
.plan-td{padding:3px!important}
.plan-cell{width:100%;min-width:56px;height:40px;border:none;border-radius:8px;background:color-mix(in srgb,var(--plan-ink) calc(var(--i)*22%),var(--bg2));color:var(--text);font-weight:700;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.plan-cell.cero{background:none;color:var(--text3);font-weight:400;cursor:default}
.plan-cell:not(.cero):hover,.plan-cell:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.plan-tr-total th,.plan-tr-total td{background:var(--bg3);font-weight:700}
.plan-tr-total .plan-cell{background:color-mix(in srgb,var(--plan-ink) calc(var(--i)*30%),var(--bg3))}
.plan-td-tot{font-weight:700;color:var(--text2);padding:0 .8rem!important;min-width:56px}
.plan-tr-sin th{color:var(--text2);font-style:italic}
.plan-resp-btn{border:none;background:none;font:inherit;color:inherit;cursor:pointer;padding:.55rem 0;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}
.plan-resp-btn:hover{color:var(--gold-600)}
.plan-tr-mas td{text-align:left;padding:.3rem .9rem!important}
.plan-nota{font-size:11.5px;color:var(--text3);margin:.5rem 0 0}
.plan-grupo{margin-bottom:.6rem}
.plan-grupo-t{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:.4rem .4rem .25rem;display:flex;gap:6px;align-items:center}
.plan-grupo-n{background:var(--bg3);border-radius:999px;padding:0 7px;font-size:10.5px;color:var(--text2)}
.plan-lista{display:flex;flex-direction:column}
.plan-row{display:flex;align-items:center;gap:9px;padding:.45rem .4rem;border-bottom:1px solid var(--border);font-size:12.5px}
.plan-row:last-child{border-bottom:none}
.plan-row.sel{background:var(--gold-soft)}
.plan-chk{width:16px;height:16px;flex:none;margin:0;accent-color:var(--gold-600)}
.plan-dot{width:8px;height:8px;border-radius:50%;flex:none}
.plan-row-main{flex:1;min-width:0}
.plan-row-name{border:none;background:none;font:inherit;font-weight:600;color:var(--text);cursor:pointer;padding:0;text-align:left;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-row-name:hover{color:var(--gold-600);text-decoration:underline;text-underline-offset:3px}
.plan-row.done .plan-row-name{text-decoration:line-through;color:var(--text3)}
.plan-row-meta{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-row-resp{color:var(--text2);font-weight:600}
.plan-sinresp{color:var(--warning);font-weight:600}
.plan-row-rec{color:var(--text3)}
.plan-row-acts{display:flex;gap:2px;flex:none}
.plan-act{width:30px;height:30px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;color:var(--text2);display:inline-flex;align-items:center;justify-content:center}
.plan-act svg{width:15px;height:15px}
.plan-act:hover{border-color:var(--border);background:var(--bg3);color:var(--text)}
.plan-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:.6rem .8rem;border-top:1px solid var(--border);background:var(--gold-soft);font-size:12.5px}
.plan-bulk[hidden]{display:none}
.plan-bulk-n{font-weight:700}
.plan-bulk-fecha{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.plan-bulk-fecha input{margin:0;padding:.3rem .4rem;font-size:12.5px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text)}
.plan-vacio{padding:2rem 1rem;text-align:center;color:var(--text2);font-size:13px;display:flex;flex-direction:column;gap:.75rem;align-items:center}
.plan-vacio p{margin:0}
.plan-vacio-p{font-size:12.5px;color:var(--text3);padding:1rem .4rem;margin:0;text-align:center}
.plan-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:.25rem 0 .75rem}
.plan-sec-t{font-size:14px;font-weight:700}
.plan-sec-sub{font-size:12px;color:var(--text3);margin-top:2px}
.plan-per{display:inline-flex;background:var(--bg3);border-radius:8px;padding:3px;gap:2px}
.plan-per-btn{border:none;background:none;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer}
.plan-per-btn.on{background:var(--bg2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.plan-carga{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.plan-carga-row{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;border-bottom:1px solid var(--border)}
.plan-carga-row:last-child{border-bottom:none}
.plan-carga-row.sin .plan-carga-nombre{font-style:italic;color:var(--text2)}
.plan-carga-main{flex:1;min-width:0}
.plan-carga-nombre{border:none;background:none;font:inherit;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;padding:0;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.plan-carga-nombre:hover{color:var(--gold-600)}
.plan-carga-sub{font-size:11.5px;color:var(--text2);margin-top:2px}
.plan-mini{display:flex;align-items:flex-end;gap:3px;height:28px;flex:none}
.plan-mini-bar{width:9px;height:calc(4px + var(--h)*24px);border-radius:2px;background:color-mix(in srgb,var(--plan-ink) calc(30% + var(--h)*60%),var(--bg3))}
.plan-carga-n{font-size:16px;font-weight:700;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.plan-rec-total{font-size:12.5px;color:var(--text2);margin-bottom:.5rem}
.plan-rec{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.plan-rec-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:.65rem 1rem;border:none;border-bottom:1px solid var(--border);background:none;cursor:pointer;font:inherit;color:var(--text)}
.plan-rec-row:last-child{border-bottom:none}
.plan-rec-row:hover{background:var(--bg3)}
.plan-rec-main{flex:1;min-width:0;display:flex;flex-direction:column}
.plan-rec-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-rec-sub{font-size:11.5px;color:var(--text2);margin-top:2px}
.plan-rec-right{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-size:12px}
.plan-rec-n{font-weight:700}
.plan-rec-next{color:var(--text3);font-size:11.5px;margin-top:2px}
.plan-mes-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;font-size:10.5px;font-weight:700;color:var(--text3);text-align:center;text-transform:uppercase;letter-spacing:.04em}
.plan-mes-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.plan-mcell{min-height:72px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--plan-ink) calc(var(--i)*18%),var(--bg2));display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;cursor:pointer;font:inherit;color:var(--text);text-align:left}
.plan-mcell.vacia{border:none;background:none;cursor:default}
.plan-mcell.cero{cursor:default}
.plan-mcell.today{border-color:var(--gold);border-width:2px}
.plan-mcell.sel{outline:2px solid var(--gold);outline-offset:-2px}
.plan-mcell:not(.cero):not(.vacia):hover{border-color:var(--gold)}
.plan-mnum{font-size:12px;font-weight:700;color:var(--text2)}
.plan-mcount{font-size:12px;font-weight:600}
.plan-mov{font-size:11px;color:var(--danger);font-weight:600}
.plan-fmodal{width:460px}
.plan-fbody{display:flex;flex-direction:column;gap:.9rem;max-height:60vh;overflow-y:auto}
.plan-fsec-t{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
.plan-fchips{display:flex;flex-wrap:wrap;gap:6px}
.plan-fchip{min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer}
.plan-fchip.on{border-color:var(--gold);background:var(--gold-soft);color:var(--text)}
.plan-fpie{display:flex;justify-content:flex-end;gap:8px;margin-top:1rem}
/* móvil: lectura rápida + intervención */
body.mobile .plan-tabs{margin-top:.6rem}
body.mobile .plan-m-sum{font-size:13px;color:var(--text2);margin:.25rem 0 .5rem}
body.mobile .plan-nav{margin:.25rem 0 .6rem}
body.mobile .plan-nav-btn{width:44px;height:44px;flex:none}
body.mobile .plan-rango{flex:1;min-width:0;font-size:14px}
body.mobile .plan-hoy{min-height:32px}
body.mobile .plan-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:.6rem}
body.mobile .plan-dia{min-height:64px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 0;cursor:pointer;font:inherit;color:var(--text)}
body.mobile .plan-dia.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
body.mobile .plan-dia.today:not(.on){border-color:var(--gold)}
body.mobile .plan-dia.pico:not(.on) .plan-dia-n{color:var(--gold-600)}
body.mobile .plan-dia-l{font-size:10px;font-weight:700;opacity:.7}
body.mobile .plan-dia-n{font-size:15px;font-weight:700;line-height:1.1}
body.mobile .plan-dia-c{font-size:11px;font-weight:700;min-height:16px;min-width:20px;border-radius:999px;padding:0 5px;background:color-mix(in srgb,var(--plan-ink) calc(var(--i)*22%),transparent);font-variant-numeric:tabular-nums}
body.mobile .plan-dia.on .plan-dia-c{background:rgba(15,33,72,.14)}
body.mobile .plan-fbar{margin-bottom:.6rem}
body.mobile .plan-fbtn{min-height:40px}
body.mobile .plan-chip{min-height:36px}
body.mobile .plan-chip button{width:32px;height:32px}
body.mobile .plan-dia-head{margin:.4rem 0 .35rem}
body.mobile .plan-dia-tit{font-size:15px;font-weight:700}
body.mobile .plan-dia-sub{font-size:12px;color:var(--text2)}
body.mobile .plan-grupo{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:.6rem}
body.mobile .plan-grupo-t{padding:.5rem .8rem .25rem}
body.mobile .plan-lista{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.mobile .plan-row{width:100%;min-height:56px;padding:.55rem .8rem;border:none;border-bottom:1px solid var(--border);background:none;text-align:left;font:inherit;color:var(--text);cursor:pointer;align-items:center}
body.mobile .plan-row:last-child{border-bottom:none}
body.mobile .plan-row-main{display:flex;flex-direction:column;gap:2px}
body.mobile .plan-row-name{font-weight:600;font-size:14px;white-space:normal;overflow:visible;display:block}
body.mobile .plan-row-meta{font-size:12px;white-space:normal}
body.mobile .plan-row-chev{color:var(--text3);font-size:18px;flex:none}
body.mobile .plan-m-res{margin-top:1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
body.mobile .plan-m-res-t{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:.6rem .8rem .2rem}
body.mobile .plan-m-row{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:.5rem .8rem;border:none;border-top:1px solid var(--border);background:none;font:inherit;color:var(--text);cursor:pointer;text-align:left}
body.mobile .plan-m-row-l{flex:1;font-size:13px;color:var(--text2)}
body.mobile .plan-m-row-v{font-size:13.5px;font-weight:700}
body.mobile .plan-mes-grid{gap:3px}
body.mobile .plan-mcell{min-height:52px;padding:4px 3px;align-items:center;gap:3px}
body.mobile .plan-mcount{font-size:11px;font-weight:700;min-width:20px;text-align:center;border-radius:999px;padding:0 5px;background:var(--bg3)}
body.mobile .plan-mcount.ov{background:var(--danger);color:#fff}
body.mobile .plan-fsheet .plan-fbody{padding:0 20px;max-height:calc(var(--vvh,100vh)*.55)}
body.mobile .plan-fpie{padding:1rem 20px 0}
body.mobile .plan-fpie .btn,body.mobile .plan-fpie .plan-btn2{min-height:44px;flex:1}
body.mobile .plan-fchip{min-height:40px}
body.mobile .plan-tsheet-meta{font-size:12px;color:var(--text2);padding:0 20px 8px}
body.mobile .plan-vacio{padding:1.5rem 1rem}
body.mobile .plan-bulk-fecha input{font-size:16px}
body.mobile .plan-dia-c.vacio{background:none}
/* ── Ajustes móvil · subpantallas (segunda pasada 2026-09-04): páginas con la
   misma gramática — ‹ padre arriba, título, filas/grupos, pie solo si se edita. */
body.mobile .aj-pag .aj-back{margin-bottom:.2rem}
body.mobile .aj-h{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:.2rem 0 .15rem}
body.mobile .aj-p{font-size:12.5px;color:var(--text3);margin:0 0 .6rem;line-height:1.45}
body.mobile .aj-nota{font-size:12px;color:var(--text3);line-height:1.45;padding:.45rem .8rem .55rem}
body.mobile .aj-card .aj-nota{border-top:1px solid var(--border)}
body.mobile .aj-kv{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:.55rem .8rem;background:none;border:none;border-bottom:1px solid var(--border);text-align:left;font:inherit;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
body.mobile .aj-kv.static{cursor:default}
body.mobile .aj-kv:last-child{border-bottom:none}
body.mobile button.aj-kv:active{background:var(--bg3)}
body.mobile .aj-kv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body.mobile .aj-kv-v{font-size:15px;font-weight:600;overflow-wrap:anywhere}
body.mobile .aj-kv-s{font-size:12px;color:var(--text3);line-height:1.4;font-weight:400}
body.mobile .aj-kv-s.ok{color:var(--success);font-weight:600}
body.mobile .aj-kv-s.warn{color:var(--warning);font-weight:600}
body.mobile .aj-kv-act{font-size:13px;font-weight:600;color:var(--text2);flex-shrink:0}
body.mobile .aj-estado-ic{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
body.mobile .aj-estado-ic.on{background:var(--success-bg);color:var(--success)}
body.mobile .aj-estado-ic.off{background:var(--bg3);color:var(--text3)}
body.mobile .aj-estado-ic svg{width:18px;height:18px}
body.mobile .aj-cta{margin:.75rem 0 .25rem}
body.mobile .aj-cta .btn{display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;font-size:15px;text-decoration:none;margin:0}
body.mobile .aj-field{display:flex;align-items:center;gap:10px;padding:.5rem .8rem;border-bottom:1px solid var(--border)}
body.mobile .aj-field:last-child{border-bottom:none}
body.mobile .aj-field-l{flex:0 0 42%;display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:600}
body.mobile .aj-field-d{font-size:11.5px;color:var(--text3);font-weight:400}
body.mobile .aj-field input{flex:1;min-width:0;margin:0;min-height:44px;font-size:16px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text)}
body.mobile .aj-field input:focus{border-color:var(--gold);outline:none;box-shadow:none}
body.mobile .aj-num-row{display:flex;align-items:center;gap:10px;padding:.55rem .8rem;border-bottom:1px solid var(--border)}
body.mobile .aj-num-row:last-child{border-bottom:none}
body.mobile .aj-num-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body.mobile .aj-num-c{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
body.mobile .aj-num{width:64px;min-height:44px;margin:0;text-align:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);padding:0 4px;-moz-appearance:textfield}
body.mobile .aj-num::-webkit-outer-spin-button,body.mobile .aj-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.mobile .aj-num:focus{border-color:var(--gold);outline:none;box-shadow:none}
body.mobile .aj-num-u{font-size:12.5px;color:var(--text2);white-space:nowrap;min-width:82px}
body.mobile .aj-opt{display:flex;align-items:center;gap:10px;min-height:52px;padding:.5rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;position:relative}
body.mobile .aj-opt:last-child{border-bottom:none}
body.mobile .aj-opt input{position:absolute;opacity:0;width:1px;height:1px}
body.mobile .aj-opt-check{width:24px;text-align:center;color:var(--gold-600);font-weight:700;font-size:16px;visibility:hidden}
body.mobile .aj-opt input:checked~.aj-opt-check{visibility:visible}
body.mobile .aj-opt input:checked~.aj-kv-main .aj-kv-v{color:var(--text)}
body.mobile .aj-opt input:focus-visible~.aj-kv-main{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
body.mobile .aj-pag .rdx-nav{margin-top:12px}
body.mobile .aj-pag .rdx-row{text-decoration:none;color:var(--text);font-weight:600;font-size:15px}
body.mobile .aj-pag .rdx-row .aj-kv-s{display:block;margin-top:2px}
body.mobile .aj-pag .rdx-row.danger .aj-kv-s{color:var(--text3)}
body.mobile .aj-foot{margin-top:18px}
/* Índice de Ajustes: el icono neutral; el estado lo dice el texto (Activado) */
body.mobile .aj-card .tools-opt-ic.on{background:var(--bg3);color:var(--text2)}
/* Panes capturados de escritorio (Plan, links): botones del pie a 44 px y sin tarjeta dentro de tarjeta */
body.mobile .tools-pane .modal-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:1rem}
body.mobile .tools-pane .modal-acts .btn{min-height:44px;font-size:14px}
body.mobile .tools-pane .modal-acts:empty{display:none}
/* Idioma: filas neutrales, el elegido con check y microacento */
body.mobile .sheet-item.lang-item{justify-content:space-between}
body.mobile .sheet-item.lang-item.on{background:var(--gold-soft);font-weight:700}
body.mobile .lang-check{color:var(--gold-600);font-weight:700;font-size:16px}
body.mobile .aj-back{min-height:44px;display:inline-flex;align-items:center;padding:0 6px 0 2px}
/* ── Pantalla de carga (2026-09-04) ──
   Fondo navy de la marca, propio y fijo: no hereda el tema (en claro salía
   crema) y no depende de que #root tenga altura (en escritorio no la tiene, y
   el logo quedaba pegado al borde de arriba en vez de centrado).
   El navy es el que trae HORNEADO el PNG del logotipo (#031C42, medido en el
   archivo): con el navy del tema se recortaba la caja del logo contra el fondo. */
.boot{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#031C42;padding:24px}
.boot-logo{display:block;width:190px;max-width:60vw;height:auto;border-radius:12px}
.boot-orbe{width:150px;height:150px}
.boot-orbe canvas{width:100%;height:100%;display:block}
/* Respaldo sin WebGL: el spinner de siempre, vestido para el navy */
.boot-spin{border-color:rgba(255,255,255,.18);border-top-color:#F5A623}
.boot [hidden]{display:none!important}

/* ── Teléfonos (2026-09-07): selector de país + número nacional, un solo campo ── */
.tel-campo{display:flex;gap:8px;align-items:stretch;min-width:0}
.tel-campo .tel-cc{flex:0 1 44%;max-width:46%;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.tel-campo input{flex:1 1 auto;min-width:0;margin:0}
.modal .tel-campo{margin-bottom:.75rem}
.modal .tel-campo select,.modal .tel-campo input{width:auto;margin-bottom:0}
.tel-nota{font-size:10.5px;min-height:14px;margin:-.5rem 0 .6rem;color:var(--text3)}
.tel-nota.ok{color:var(--text2)}.tel-nota.mal{color:var(--warning)}
.set-row{flex-wrap:wrap}.set-row .tel-campo{flex:1 1 220px}
/* El país tiene que leerse aunque el campo comparta línea con un botón */
.tel-campo .tel-cc{min-width:96px}
.nc-grid .tel-campo{margin-bottom:.75rem}
body.mobile .tel-campo{gap:8px}
body.mobile .tel-campo select.tel-cc,body.mobile .ncm-form select.tel-cc,body.mobile .rdx-form select.tel-cc{min-height:44px;font-size:16px;padding:.6rem .5rem;border:1.5px solid var(--border2);border-radius:10px;background:var(--bg);color:var(--text);outline:none}
body.mobile .tel-campo select.tel-cc:focus{border-color:var(--gold);box-shadow:none}
body.mobile .rdx-form .tel-nota,body.mobile .ncm-form .tel-nota{margin:6px 0 0}