/* ============================================================
   APP CEO — Estilo "cuaderno hecho a mano" (papel + tinta + serif)
   Temas conmutables vía [data-skin]: ac (defecto) · a · b · c
   ============================================================ */
:root {
  /* Paleta base "papel + tinta índigo" (skin 'ac' por defecto) */
  --primary:#44508a; --primary-d:#353f70; --primary-lt:#6b76ad; --primary-glow:rgba(68,80,136,.13);
  --accent:#b6592f; /* terracota */
  --bg:#f3ecdd; --bg-surface:#fbf6ea; --bg-elevated:#fdf9f0; --bg-hover:#ece2cd;
  --border:#ddd0b6; --border-strong:#c7b795;
  --text:#2f2a22; --text-sec:#5b5346; --text-muted:#928873;
  --success:#4a7c59; --success-bg:#dde8db; --warning:#a9772a; --warning-bg:#f1e6cb;
  --danger:#a83b2c; --danger-bg:#efd9d2; --neutral-bg:#e7dcc6;
  --shadow:0 1px 2px rgba(70,55,30,.08),0 6px 18px rgba(70,55,30,.09);
  --shadow-lg:0 16px 46px rgba(60,45,25,.24);
  --radius:12px; --radius-sm:9px;
  --paper-grain:0.05; --tape:0; --stitch:1; --tilt:0deg;
  --font-body:'Literata',Georgia,'Times New Roman',serif;
  --font-hand:'Caveat','Literata',cursive;
}
/* Skin A — minimalista artesanal (limpio, sin cinta ni costura) */
[data-skin="a"] { --bg:#f6f1e7; --bg-surface:#fffdf8; --bg-hover:#efe8d9;
  --border:#e6dcc8; --tape:0; --stitch:0; --paper-grain:0.03; --tilt:0deg; }
/* Skin B — scrapbook (color, inclinación, cinta y parches) */
[data-skin="b"] { --primary:#2f6b6b; --primary-d:#245252; --primary-lt:#5a9a9a; --primary-glow:rgba(47,107,107,.15);
  --accent:#c76b1f; --bg:#eadfc7; --bg-surface:#fbf4e2; --bg-hover:#e3d6b8;
  --border:#d8c4a0; --border-strong:#b89a6a; --paper-grain:0.07; --tape:1; --stitch:1; --tilt:0.5deg; }
/* Skin C — lino & tinta (tela, costura verde, botánico) */
[data-skin="c"] { --primary:#3f5b46; --primary-d:#324a39; --primary-lt:#6b8770; --primary-glow:rgba(63,91,70,.14);
  --accent:#a15b52; --bg:#e7ddc9; --bg-surface:#f4eee0; --bg-elevated:#f7f2e6; --bg-hover:#ded2b9;
  --border:#cdbfa0; --border-strong:#b6a480; --paper-grain:0.06; --tape:0; --stitch:1; --tilt:0deg; }

[data-theme="dark"] {
  /* Noche: papel kraft/cuero oscuro */
  --bg:#211c16; --bg-surface:#2b251d; --bg-elevated:#332c22; --bg-hover:#3a3227;
  --border:#463c2e; --border-strong:#5c4f3c;
  --text:#efe7d6; --text-sec:#c9bda6; --text-muted:#948872;
  --primary:#8f9bd6; --primary-d:#7683c4; --primary-lt:#aab4e2; --primary-glow:rgba(143,155,214,.16);
  --accent:#d98a5a;
  --success:#7fb08a; --success-bg:#20301f; --warning:#d0a44e; --warning-bg:#38290f;
  --danger:#d98072; --danger-bg:#3a1c16; --neutral-bg:#3a3227;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.45);
  --shadow-lg:0 20px 60px rgba(0,0,0,.65);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-body);
  background-color:var(--bg);
  /* Líneas de cuaderno muy tenues */
  background-image:
    repeating-linear-gradient(transparent 0, transparent 33px, rgba(120,105,75,.045) 34px);
  color:var(--text); font-size:0.94rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Grano de papel en capa aparte (opacidad controlable con --paper-grain) */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--paper-grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a { color:var(--primary); text-decoration:none; }
::selection { background:var(--primary-glow); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid var(--bg); }

/* --- Botones --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:.86rem; font-weight:600; padding:9px 16px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-d); }
.btn-secondary { background:var(--bg-elevated); color:var(--text-sec); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.btn-ghost { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text); }
.btn-danger { background:var(--danger-bg); color:var(--danger); }
.btn-danger:hover { filter:brightness(.95); }
.btn-sm { padding:6px 11px; font-size:.8rem; }
.btn-icon { width:38px; height:38px; padding:0; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center; background:var(--bg-elevated);
  border:1px solid var(--border); color:var(--text-sec); cursor:pointer; transition:.15s; }
.btn-icon:hover { background:var(--bg-hover); color:var(--text); border-color:var(--border-strong); }
.btn-icon.active { background:var(--primary-glow); color:var(--primary); border-color:var(--primary); }

/* --- Inputs --- */
.label { display:block; font-size:.76rem; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.input, textarea.input, select.input {
  width:100%; font-family:inherit; font-size:.9rem; padding:10px 13px; color:var(--text);
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:.15s; outline:none; }
.input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
textarea.input { resize:vertical; min-height:64px; }
.field { margin-bottom:15px; }

/* --- Card --- */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); }
.card-p { padding:20px; }

/* --- Badges --- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  padding:3px 9px; border-radius:99px; white-space:nowrap; }
.badge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-sin_iniciar { background:var(--neutral-bg); color:var(--text-sec); }
.st-en_desarrollo { background:var(--warning-bg); color:var(--warning); }
.st-terminado { background:var(--success-bg); color:var(--success); }
.st-terminado_retomar { background:#e0e7ff; color:#4338ca; }
.pr-alta { background:var(--danger-bg); color:var(--danger); }
.pr-media { background:var(--warning-bg); color:var(--warning); }
.pr-baja { background:var(--neutral-bg); color:var(--text-muted); }
.text-overdue { color:var(--danger)!important; font-weight:600; }

/* --- Topbar --- */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; }
.brand-mark { height:36px; width:auto; flex-shrink:0; }
.brand-wordmark { height:auto; width:150px; max-width:40vw; flex-shrink:0; display:block; }
[data-theme="dark"] .brand-wordmark, [data-theme="dark"] .brand-wordmark-login { filter:brightness(0) invert(1); opacity:.92; }
.brand-logo { width:30px; height:30px; border-radius:9px; background:var(--primary);
  display:grid; place-items:center; color:#fff; }
.searchbox { flex:0 1 520px; min-width:0; display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 12px; cursor:text; }
/* Empuja el grupo de acciones (+Nuevo, campana, avatar) a la esquina derecha en todas las pantallas */
#tb-new { margin-left:auto; }
/* Solo la búsqueda se encoge; la marca y las acciones mantienen su tamaño (evita que el avatar se achique en tablets) */
.brand, .topbar .btn, .topbar .btn-icon, .topbar .avatar { flex-shrink:0; }
.searchbox input { flex:1; border:none; background:transparent; outline:none; color:var(--text);
  font-family:inherit; font-size:.88rem; padding:9px 0; }
.kbd { font-size:.68rem; font-weight:600; color:var(--text-muted); background:var(--bg-surface);
  border:1px solid var(--border); border-radius:6px; padding:2px 6px; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:.8rem; cursor:pointer; }

/* --- Layout --- */
.wrap { max-width:1180px; margin:0 auto; padding:24px 22px 60px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:820px){ .grid-2 { grid-template-columns:1fr; } .wrap{padding:16px 14px 50px;} }
.section-title { font-size:.78rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; }
.count-pill { background:var(--primary-glow); color:var(--primary); font-size:.7rem; font-weight:700;
  padding:1px 8px; border-radius:99px; }

/* --- Item rows --- */
.row { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:var(--radius-sm);
  cursor:pointer; transition:.12s; border:1px solid transparent; }
.row:hover { background:var(--bg-hover); }
.row + .row { margin-top:2px; }
.row-name { flex:1; font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
.dot-user { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:.64rem; font-weight:700; flex-shrink:0; }

/* --- Checkbox tarea --- */
.checkbox { width:20px; height:20px; border-radius:6px; border:2px solid var(--border-strong);
  flex-shrink:0; cursor:pointer; display:grid; place-items:center; transition:.15s; background:var(--bg-surface); }
.checkbox:hover { border-color:var(--primary); }
.checkbox.done { background:var(--success); border-color:var(--success); }
.checkbox.done::after { content:'✓'; color:#fff; font-size:.72rem; font-weight:800; }
.task-done .row-name { text-decoration:line-through; color:var(--text-muted); }
/* Reuniones: color según estén hechas o pendientes (borde de acento, gana a los skins) */
.note-card.note-pending { border-left:5px solid #3498db !important; }
.note-card.note-done { border-left:5px solid #22c55e !important; }
.note-card.note-done .note-badge, .note-done-dot { color:#22c55e; }
/* Lista "Todos los proyectos": boxes con subproyectos plegables */
/* #3: boxes más pequeñas, 3 por línea (auto-fill), subproyectos plegables (contraídos por defecto). */
.pl-boxes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:start; }
.pl-box { padding:11px 13px; }
.pl-box-head { display:flex; align-items:flex-start; gap:8px; }
@media (max-width:820px){ .pl-boxes { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pl-boxes { grid-template-columns:1fr; } }
.pl-toggle { flex:none; transition:transform .15s; }
.pl-toggle.on { transform:rotate(0deg); }
.pl-subs { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:8px; }
.pl-subs[hidden] { display:none; }
.pl-sub { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; background:var(--bg-hover); border-radius:9px; cursor:pointer; }
.pl-sub:hover { background:var(--bg-surface); }
.pl-sub-arrow { color:var(--text-muted); flex:none; }

/* --- Modal --- */
.overlay { position:fixed; inset:0; background:rgba(10,12,20,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; z-index:100; padding:6vh 16px; overflow-y:auto; }
.overlay.open { display:flex; }
.modal { position:relative; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg); width:100%; max-width:520px; padding:26px; animation:pop .18s ease; }
.modal-lg { max-width:760px; }
@keyframes pop { from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1;} }
.modal-title { font-size:1.15rem; font-weight:700; margin:0 0 4px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.x-btn { background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; line-height:1; }

/* --- Tabs --- */
.tabs { display:flex; gap:4px; background:var(--bg); padding:4px; border-radius:var(--radius-sm);
  border:1px solid var(--border); width:fit-content; }
.tab { padding:7px 16px; border-radius:8px; font-size:.85rem; font-weight:600; color:var(--text-muted);
  cursor:pointer; border:none; background:none; transition:.12s; }
.tab.active { background:var(--bg-surface); color:var(--text); box-shadow:var(--shadow); }

/* --- Chips filtro --- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:500;
  padding:6px 11px; border-radius:99px; border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text-sec); cursor:pointer; transition:.12s; }
.chip:hover { border-color:var(--border-strong); }
.chip.on { background:var(--primary-glow); color:var(--primary); border-color:var(--primary); }

/* --- Toast --- */
#toasts { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { padding:11px 18px; border-radius:var(--radius-sm); font-size:.86rem; font-weight:500;
  box-shadow:var(--shadow-lg); background:var(--bg-elevated); border:1px solid var(--border);
  animation:slideup .2s ease; }
.toast.success { border-left:3px solid var(--success); }
.toast.error { border-left:3px solid var(--danger); }
.toast.info { border-left:3px solid var(--primary); }
@keyframes slideup { from{opacity:0; transform:translateY(12px);} }

/* --- Command palette --- */
.cmd-overlay { position:fixed; inset:0; background:rgba(10,12,20,.5); backdrop-filter:blur(4px);
  display:none; justify-content:center; align-items:flex-start; padding-top:14vh; z-index:200; }
.cmd-overlay.open { display:flex; }
.cmd { width:100%; max-width:560px; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.cmd-input { width:100%; border:none; outline:none; background:transparent; color:var(--text);
  font-size:1.05rem; padding:18px 20px; border-bottom:1px solid var(--border); font-family:inherit; }
.cmd-list { max-height:340px; overflow-y:auto; padding:8px; }
.cmd-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; cursor:pointer; }
.cmd-item.sel, .cmd-item:hover { background:var(--bg-hover); }
.cmd-item .ic { width:26px; text-align:center; opacity:.7; }

/* --- Historial media --- */
.hist-item { border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px;
  background:var(--bg-surface); }
.hist-media img, .hist-media video { max-width:100%; border-radius:var(--radius-sm); max-height:360px; }
.hist-media audio { width:100%; }
.hist-meta { display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-muted); margin-top:8px; flex-wrap:wrap; }
.quote { border-left:3px solid var(--border-strong); padding-left:12px; margin:8px 0; color:var(--text-muted); font-size:.85rem; }
.hm-swatch { width:34px; height:34px; border-radius:8px; border:1px solid var(--border-strong); cursor:pointer; display:grid; place-items:center; color:var(--text-muted); font-size:.9rem; }
.hm-swatch.on { outline:2px solid var(--primary); outline-offset:1px; }

/* --- Login --- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%,var(--primary-glow),transparent); }
.spin { animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.hidden { display:none!important; }
.empty { text-align:center; padding:26px; color:var(--text-muted); font-size:.86rem; }
/* position:fixed (antes absolute) → los desplegables se sobreponen a la página
   actual sin importar cuánto scroll haya (antes aparecían solo arriba del todo y
   había que subir para verlos). Todos los que lo crean usan coordenadas de
   viewport (getBoundingClientRect), coherentes con fixed. z-index alto para
   quedar por encima del rail lateral y el dock de chat. */
.dropdown { position:fixed; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:6px; z-index:200; min-width:190px; }
.dd-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; cursor:pointer; font-size:.86rem; }
.dd-item:hover { background:var(--bg-hover); }
.divider { height:1px; background:var(--border); margin:6px 0; }
.progress { height:6px; background:var(--neutral-bg); border-radius:99px; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--success); transition:width .3s; }

/* --- Kanban vertical (etapas apiladas, tarjetas en grilla) --- */
.kstages { display:flex; flex-direction:column; gap:16px; }
.kstage { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.kstage-head { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border);
  background:var(--bg); }
.kstage-title { font-weight:700; font-size:.95rem; }
.kstage-body { padding:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px;
  min-height:64px; transition:.15s; }
.kstage-body.kdrop { background:var(--primary-glow); }
.kstage-empty { grid-column:1/-1; color:var(--text-muted); font-size:.82rem; padding:14px; text-align:center;
  border:2px dashed var(--border); border-radius:10px; }
.kcard { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px; cursor:pointer; box-shadow:var(--shadow); transition:.12s; }
.kcard:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.kcard.dragging { opacity:.4; }

/* --- Menú de navegación --- */
.nav-dd { right:12px; top:58px; left:auto !important; max-width:250px; }
.nav-dd .dd-item { padding:10px 12px; }

/* --- Calendario --- */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; min-width:680px; }
.cal-dow { font-size:.72rem; font-weight:700; color:var(--text-muted); text-align:center; padding:4px; text-transform:uppercase; }
.cal-cell { min-height:98px; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; padding:5px; background:var(--bg-surface); }
.cal-empty { background:transparent; border-color:transparent; }
.cal-today { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.cal-num { font-size:.75rem; font-weight:700; color:var(--text-muted); margin-bottom:3px; }
.cal-items { display:flex; flex-direction:column; }
.cal-item { max-width:100%; font-size:.7rem; padding:2px 5px; border-radius:6px; background:var(--bg-hover); margin-bottom:3px;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.cal-item.over { color:var(--danger); font-weight:600; }
.cal-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.cal-cell[data-day] { cursor:pointer; }
.cal-cell.cal-sel { border-color:var(--primary); background:var(--primary-glow); }
.cal-more { font-size:.64rem; color:var(--text-muted); padding:1px 4px; }

.tb-new-short { display:none; }

/* --- Chat acoplado (estilo Messenger) --- */
.chat-fab { position:fixed; bottom:18px; right:18px; width:56px; height:56px; border-radius:50%;
  background:var(--primary,#6366f1); color:#fff; border:none; cursor:pointer; z-index:210;
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28); }
.chat-fab svg { width:26px; height:26px; }
.chat-fab .fab-badge { top:-3px; right:-3px; }
.chat-launcher { position:fixed; bottom:84px; right:18px; width:300px; max-width:calc(100vw - 36px);
  max-height:62vh; overflow-y:auto; background:var(--bg-surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.24); z-index:210; padding:8px; }
.chat-dock { position:fixed; bottom:16px; right:86px; display:flex; flex-direction:row-reverse;
  align-items:flex-end; gap:12px; z-index:200; pointer-events:none; }
.dock-win { pointer-events:auto; width:328px; height:430px; background:var(--bg-surface);
  border:1px solid var(--border); border-radius:12px 12px 0 0; box-shadow:0 12px 30px rgba(0,0,0,.26);
  display:flex; flex-direction:column; overflow:hidden; }
.dock-win.min { height:auto; }
.dock-win.min .dock-body { display:none; }
.dock-head { display:flex; align-items:center; gap:8px; padding:9px 10px;
  background:var(--primary,#6366f1); color:#fff; cursor:pointer; }
.dock-title { flex:1; font-weight:600; font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dock-head .dock-badge { position:static; border-color:var(--primary,#6366f1); }
.dock-head button { background:none; border:none; color:#fff; cursor:pointer; font-size:1rem; line-height:1; opacity:.9; padding:2px 4px; }
.dock-head button:hover { opacity:1; }
.dock-body { flex:1; display:flex; flex-direction:column; min-height:0; }
.dock-list { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
.dock-input { display:flex; gap:6px; padding:8px; border-top:1px solid var(--border); }
.dock-input input { flex:1; min-width:0; border:1px solid var(--border); border-radius:20px; padding:8px 12px;
  background:var(--bg); color:var(--text); outline:none; font-family:inherit; font-size:.85rem; }
.dock-input button { border:none; background:var(--primary,#6366f1); color:#fff; border-radius:50%;
  width:36px; height:36px; cursor:pointer; flex-shrink:0; font-size:.95rem; }
@media (max-width:640px) {
  .chat-fab { bottom:14px; right:14px; width:52px; height:52px; }
  .chat-launcher { bottom:74px; right:12px; left:12px; width:auto; max-width:none; }
  .chat-dock { right:0; left:0; bottom:0; gap:0; }
  .dock-win { width:100vw; height:82vh; border-radius:16px 16px 0 0; }
  .dock-win.min { height:auto; }
  body.dock-open .chat-fab { display:none; }   /* en móvil, el FAB no estorba mientras el chat está abierto */
}

/* --- Badges de notificación --- */
.notif-badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  background:var(--danger); color:#fff; font-size:.62rem; font-weight:700; border-radius:99px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-surface); }
.notif-item { display:flex; gap:10px; padding:11px 12px; border-radius:10px; cursor:pointer; align-items:flex-start; }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:var(--primary-glow); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:5px; }
.notif-ic { font-size:1.1rem; flex-shrink:0; }

/* --- Reacciones --- */
.rx-bar { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.rx-chip { display:inline-flex; align-items:center; gap:4px; font-size:.8rem; padding:2px 8px; border-radius:99px;
  border:1px solid var(--border); background:var(--bg-surface); cursor:pointer; transition:.12s; }
.rx-chip:hover { border-color:var(--border-strong); }
.rx-chip.mine { background:var(--primary-glow); border-color:var(--primary); color:var(--primary); }
.rx-add { width:26px; height:24px; border-radius:99px; border:1px dashed var(--border-strong); background:transparent;
  color:var(--text-muted); cursor:pointer; font-size:.85rem; }
.rx-picker { display:flex; gap:4px; flex-wrap:wrap; }
.rx-picker button { font-size:1.05rem; background:none; border:none; cursor:pointer; padding:2px 4px; border-radius:6px; }
.rx-picker button:hover { background:var(--bg-hover); }

/* --- Chat / mensajería --- */
.chat-wrap { display:flex; flex-direction:column; height:100%; }
.chat-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:4px; }
.msg { max-width:78%; padding:9px 13px; border-radius:14px; font-size:.9rem; line-height:1.45; word-break:break-word; }
.msg.mine { align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.msg.theirs { align-self:flex-start; background:var(--bg-hover); color:var(--text); border-bottom-left-radius:4px; }
.msg-meta { font-size:.66rem; opacity:.7; margin-top:3px; }
/* Chat v2: cita de respuesta, acciones, escribiendo… */
.msg-reply { font-size:.74rem; opacity:.8; border-left:3px solid currentColor; padding:3px 7px; margin-bottom:5px;
  border-radius:5px; background:rgba(0,0,0,.10); white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.theirs .msg-reply { background:rgba(0,0,0,.06); }
.msg-act { background:none; border:0; cursor:pointer; opacity:.55; font-size:.82rem; margin-left:5px; color:inherit; }
.msg-act:hover { opacity:1; }
.dock-typing, .chat-typing { font-size:.72rem; color:var(--text-muted); font-style:italic; padding:2px 12px 4px; }
.dock-reply { display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--bg-hover);
  border-top:1px solid var(--border); font-size:.78rem; }
.dock-reply button { background:none; border:0; cursor:pointer; color:var(--text-muted); font-size:.9rem; }

/* #6 Barra lateral de íconos (desktop) + panel superpuesto */
/* Solo íconos, sin fondo sólido, centrados verticalmente y por debajo del logo/topbar. */
#side-rail { display:none; position:fixed; left:0; top:58px; bottom:0; width:56px; z-index:82;
  background:transparent; border:0; pointer-events:none;
  flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:10px 0; }
.rail-btn { width:40px; height:40px; border:0; background:none; border-radius:11px; font-size:1.35rem; cursor:pointer; line-height:1;
  pointer-events:auto; transition:transform .13s ease; display:inline-flex; align-items:center; justify-content:center; }
.rail-btn:hover { transform:scale(1.45); }
.rail-btn.on { transform:scale(1.25); filter:drop-shadow(0 0 3px var(--primary)); }
#side-drawer { display:flex; flex-direction:column; position:fixed; left:56px; top:56px; bottom:0; width:min(380px,86vw); z-index:81;
  background:var(--bg-surface); border-right:1px solid var(--border); box-shadow:8px 0 34px rgba(0,0,0,.20);
  transform:translateX(-118%); transition:transform .22s ease, width .18s ease; }
#side-drawer.wide { width:min(760px,94vw); }
#side-drawer.open { transform:translateX(0); }
.sd-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border); }
.sd-title { font-weight:700; }
.sd-close { background:none; border:0; cursor:pointer; font-size:1.1rem; color:var(--text-muted); }
.sd-body { flex:1; overflow-y:auto; padding:14px; }
@media (min-width:900px){ #side-rail { display:flex; } .wrap { padding-left:70px; } }
.chat-input { display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--border); margin-top:8px; }
.conv-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; }
.conv-item:hover, .conv-item.active { background:var(--bg-hover); }

/* --- Autocompletar menciones --- */
.mention-pop { position:fixed; z-index:2500; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:5px; min-width:190px; max-height:220px; overflow-y:auto; }
.mention-pop .dd-item { gap:7px; }
.mention-pop .dd-item.sel { background:var(--bg-hover); }

/* --- Tabla de actividad --- */
.act-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.act-table th { text-align:left; color:var(--text-muted); font-weight:600; padding:8px; border-bottom:2px solid var(--border); white-space:nowrap; }
.act-table td { padding:8px; border-bottom:1px solid var(--border); vertical-align:top; }

/* ============================================================
   RESPONSIVE / MÓVIL
   ============================================================ */
@media (max-width:640px) {
  body { font-size:14px; }
  .topbar { padding:9px 10px; gap:8px; }                /* mismo gap que la marca → márgenes parejos */
  .brand-mark { height:30px; }
  .brand-wordmark { width:118px; max-width:31vw; }      /* logo + wordmark también en móvil */
  .searchbox { flex:0 0 auto; width:40px; justify-content:center; padding:0; }
  .tb-search-label, .tb-kbd { display:none; }
  #tb-new { display:none; }                     /* en móvil se crea desde las secciones/menú */
  #tb-bell { margin-left:auto; }                 /* empuja campana, chat y avatar a la esquina derecha */
  .wrap { padding:14px 12px 70px; }
  .grid-2 { grid-template-columns:1fr; gap:14px; }
  .card-p { padding:15px; }

  /* Modales a pantalla casi completa y campos en una columna.
     El scroll lo hace SOLO el .modal: si además scrollea el .overlay, con
     align-items:flex-end el borde superior del modal queda fuera de alcance
     (no se puede volver arriba) — bug clásico de flex + overflow. */
  .overlay { padding:0; align-items:flex-end; overflow:hidden; }
  .modal { max-width:100%; border-radius:18px 18px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height:94vh; max-height:94dvh; overflow-y:auto; animation:sheet .22s ease; }
  @keyframes sheet { from{ transform:translateY(100%);} to{ transform:translateY(0);} }
  .modal div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .modal-lg { max-width:100%; }

  /* Command palette */
  .cmd-overlay { padding-top:8vh; align-items:flex-start; }
  .cmd { max-width:100%; margin:0 10px; }

  /* Kanban: columnas más angostas, scroll horizontal */
  .kcol { flex:0 0 78vw; }
  /* Calendario: celdas compactas */
  /* Calendario que cabe en el ancho: eventos como puntitos, detalle en el panel del día */
  .cal-grid { gap:2px; min-width:0; }
  .cal-dow { font-size:.55rem; padding:2px 0; }
  .cal-cell { min-height:46px; padding:2px 1px; border-radius:6px; }
  .cal-num { font-size:.6rem; margin-bottom:1px; }
  .cal-items { flex-direction:row; flex-wrap:wrap; gap:2px; justify-content:center; }
  .cal-item { width:7px; height:7px; padding:0; margin:0; border-radius:50%; background:var(--primary);
    overflow:hidden; text-indent:-999px; white-space:nowrap; }
  .cal-item.over { background:var(--danger); }
  .cal-item .cal-dot { display:none; }
  .cal-more { display:none; }

  /* Filas y tabs */
  .tabs { flex-wrap:wrap; }
  .row { padding:10px 8px; }
  h1 { font-size:1.2rem !important; }

  /* Dropdowns de filtro ocupan bien el ancho */
  .dropdown { max-width:calc(100vw - 24px); }
  .nav-dd { right:10px; left:auto !important; }
}

/* Pantallas pequeñas y teléfonos actuales (390–430px). Antes esto era ≤380px,
   pero la mayoría de teléfonos miden 390–430px y con el layout de ≤640 (íconos
   38px + wordmark 118px) la fila del topbar sumaba ~397px y la campana/reloj/
   chat/avatar se salían por la derecha. Con estas reglas compactas la fila cabe
   (~332px). Por encima de 480px se usa el layout de ≤640, que cabe de sobra. */
@media (max-width:480px) {
  .kcol { flex:0 0 84vw; }
  /* Barra superior compacta para que el wordmark no quede pegado a la búsqueda */
  .topbar { gap:6px; padding:9px 8px; }
  .brand { gap:6px; }
  .brand-mark { height:26px; }
  .brand-wordmark { width:88px; max-width:27vw; }
  .searchbox { width:34px; }
  #tb-new { width:34px; height:34px; }
  .topbar .btn-icon { min-width:34px; min-height:34px; width:34px; height:34px; }
  .avatar { width:30px; height:30px; }
}

/* Táctil: áreas de toque más cómodas */
@media (hover:none) {
  .btn-icon { min-width:38px; min-height:38px; }
  .checkbox { width:24px; height:24px; }
}

/* --- Impresión / PDF --- */
@media print {
  .topbar, #toasts, .btn, .btn-icon, .chip, .searchbox, .tabs, .checkbox, [id^="f-"] { display:none!important; }
  body, .card { background:#fff!important; color:#000!important; box-shadow:none!important; border-color:#ccc!important; }
  .wrap { max-width:100%; padding:0; }
  .kboard { flex-wrap:wrap; }
  .kcol { flex:1 1 30%; page-break-inside:avoid; }
  a { color:#000!important; }
}

/* ============================================================
   CAPA "HECHA A MANO" — adornos sensibles al skin
   ============================================================ */
h1, h2, h3, .modal-title, .brand, .section-title, .col-title {
  font-family: var(--font-body); letter-spacing: .005em;
}
h1, .modal-title { font-weight: 700; }
.brand { letter-spacing: .01em; }

/* Tarjetas = notas de papel con costura punteada opcional */
.card { position: relative; border-color: var(--border); }
.card::after {
  content: ''; position: absolute; inset: 6px; border: 1px dashed var(--border-strong);
  border-radius: inherit; pointer-events: none; opacity: calc(var(--stitch) * 0.5);
}
.kstage, .modal, .hist-item, .kcard { position: relative; }

/* Cinta washi sobre tarjetas del tablero e historial (si el skin la usa) */
.kcard::before, .hist-item::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 62px; height: 18px;
  transform: translateX(-50%) rotate(-2deg); background: var(--primary-glow);
  border: 1px solid var(--border-strong); border-radius: 2px;
  opacity: calc(var(--tape) * 0.7); box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Inclinación de collage (solo skin B) */
[data-skin="b"] .kcard:nth-child(odd)  { transform: rotate(-0.7deg); }
[data-skin="b"] .kcard:nth-child(even) { transform: rotate(0.7deg); }
[data-skin="b"] .kcard:hover { transform: rotate(0deg) translateY(-1px); }

/* Textura de tela para skin C (lino) */
[data-skin="c"] body, body[data-skin]  { }
[data-skin="c"] .card, [data-skin="c"] .kcard {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='6' height='6' fill='none'/><path d='M0 3h6M3 0v6' stroke='%23000' stroke-opacity='0.03' stroke-width='1'/></svg>");
}

/* Checkbox estilo tinta dibujada */
.checkbox { border-color: var(--border-strong); border-radius: 5px 6px 5px 7px; }
.checkbox.done { background: var(--success); border-color: var(--success); }

/* Marca de sección con subrayado de acuarela */
.section-title { position: relative; padding-bottom: 3px; }
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 26px; height: 3px;
  background: var(--accent); border-radius: 3px; opacity: .8;
}

/* Barra superior como cabecera de cuaderno */
.topbar { border-bottom: 2px solid var(--border-strong);
  box-shadow: 0 2px 0 var(--border); }
.brand-logo { background: var(--primary); border-radius: 8px 9px 8px 10px; }

/* Botón primario con borde "entintado" */
.btn-primary { border: 1px solid var(--primary-d); box-shadow: 0 1px 0 var(--primary-d); }
.btn-primary:active { box-shadow: none; }

/* Insignias de estado un poco irregulares (acuarela) */
.badge { border-radius: 99px 8px 99px 8px; }

/* Enlaces de acento */
.count-pill { background: var(--primary-glow); color: var(--primary); }

/* Login: tarjeta de papel */
.login-wrap { background:
  radial-gradient(900px 500px at 50% -10%, var(--primary-glow), transparent),
  var(--bg); }

/* ============================================================
   PULIDO HANDMADE (detalles finos)
   ============================================================ */
/* Avatares como sello de papel */
.avatar, .dot-user { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px rgba(60,45,25,.10); }

/* Trazo a mano en el check de tarea */
.checkbox.done::after { font-family: var(--font-hand); font-size: 1rem; line-height: 1; }

/* Chips como etiquetas de tela */
.chip { border-radius: 99px 7px 99px 7px; }

/* Empty states en cursiva serif */
.empty { font-style: italic; }

/* Calendario tipo agenda: día de hoy "circulado" a mano */
.cal-dow { font-family: var(--font-body); letter-spacing: .04em; }
.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-today .cal-num { color: var(--accent); font-weight: 700; }

/* Encabezados de etapa del tablero con acento */
.kstage-head { background: var(--bg); }
.kstage-title { font-weight: 700; }

/* Burbujas de chat: las del otro con borde de papel */
.msg.theirs { border: 1px solid var(--border); }

/* Login como portada de cuaderno con cinta marcadora */
.login-card { position: relative; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.login-card::after { content: ''; position: absolute; inset: 8px; border: 1px dashed var(--border-strong);
  border-radius: inherit; pointer-events: none; opacity: .5; }
.login-card::before { content: ''; position: absolute; top: -2px; right: 26px; width: 15px; height: 46px;
  background: var(--accent); opacity: .9; border-radius: 0 0 4px 4px; box-shadow: 0 2px 4px rgba(0,0,0,.18); }

/* Notificaciones sin leer con puntito de acento */
.notif-item.unread { position: relative; }
.notif-item.unread::before { content: ''; position: absolute; left: 3px; top: 14px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); }

/* --- Adornos extra SOLO en skin scrapbook (b) --- */
[data-skin="b"] .modal { position: relative; }
[data-skin="b"] .modal::before { content: ''; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg); width: 96px; height: 20px; background: var(--primary-glow);
  border: 1px solid var(--border-strong); border-radius: 2px; opacity: .55; }
[data-skin="b"] #toasts .toast { position: relative; }
[data-skin="b"] .toast::before { content: ''; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%) rotate(-3deg); width: 42px; height: 12px; background: var(--primary-glow);
  border: 1px solid var(--border-strong); opacity: .6; }
[data-skin="b"] .badge { transform: rotate(-1deg); }
[data-skin="b"] .brand-logo { transform: rotate(-3deg); }

/* Encabezado de etapa con barra de acento pintada */
.kstage-head { position: relative; padding-left: 20px; }
.kstage-head::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px;
  background: var(--accent); border-radius: 4px; opacity: .85; }
/* Título de página con subrayado sutil de acuarela */
.wrap h1 { position: relative; }

/* ============================================================
   RESULTADO FINAL — pulido integral handmade
   ============================================================ */
/* Animación suave de "pasar página" al renderizar tarjetas */
@keyframes pageturn { from { opacity: 0; transform: translateY(7px) rotate(-.2deg); } to { opacity: 1; transform: none; } }
.card { animation: pageturn .32s ease both; }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

/* Insignias como manchas de acuarela (borde irregular + tinte translúcido) */
.badge { border-radius: 12px 9px 14px 8px / 9px 13px 8px 12px;
  box-shadow: inset 0 0 0 1px rgba(120,90,50,.06); }
.st-en_desarrollo { box-shadow: inset 0 0 8px rgba(169,119,42,.12); }
.st-terminado { box-shadow: inset 0 0 8px rgba(74,124,89,.12); }
.pr-alta { box-shadow: inset 0 0 8px rgba(168,59,44,.12); }

/* Tarjetas del tablero = nota de papel con esquina doblada */
.kcard { border-radius: 6px 8px 6px 9px; }
.kcard::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 15px 15px; border-style: solid;
  border-color: transparent transparent var(--bg-hover) transparent;
  filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.06));
}

/* Modales con costura de papel */
.modal { position: relative; }
.modal::after { content: ''; position: absolute; inset: 8px; border: 1px dashed var(--border-strong);
  border-radius: 12px; pointer-events: none; opacity: calc(var(--stitch) * 0.4); }

/* Command palette con papel */
.cmd { border: 1px solid var(--border-strong); }
.cmd-input { font-family: var(--font-body); }

/* Inputs con leve hundido de papel */
.input, textarea.input, select.input { box-shadow: inset 0 1px 2px rgba(90,70,40,.05); }

/* Chat: burbujas como notas */
.msg { box-shadow: var(--shadow); }
.msg.mine { border: 1px solid var(--primary-d); }
.msg.theirs { background: var(--bg-elevated); border-radius: 4px 14px 14px 14px; }

/* Filas del historial con textura de nota */
.hist-item { border-radius: 5px 7px 6px 8px; }

/* Barra de progreso como trazo pintado (extremos redondeados) */
.progress { border-radius: 99px; }
.progress > i { border-radius: 99px; }

/* Toasts como papelito */
.toast { border-radius: 4px 6px 4px 7px; font-family: var(--font-body); }

/* Píldora de conteo un poco irregular */
.count-pill { border-radius: 99px 7px 99px 7px; }

/* Dropdown/menús con papel */
.dropdown { border-color: var(--border-strong); }

/* Encabezado de sección: subrayado de acuarela más pintado */
.section-title::after { height: 4px; border-radius: 4px 4px 3px 5px; }

/* Reacciones con estética de sticker */
.rx-chip { border-radius: 99px 7px 99px 7px; }

/* Kanban: separación entre etapas con línea pintada tenue */
.kstages .kstage + .kstage { position: relative; }

/* ============================================================
   INICIO — orden móvil (vencimientos→tareas→proyectos) y desktop
   ============================================================ */
.home { display:flex; flex-direction:column; gap:16px; }
@media (min-width:821px){
  .home { display:grid; grid-template-columns:1fr 1fr; gap:18px;
    grid-template-areas:"proj tasks" "dl dl"; align-items:start; }
  .home-projects{ grid-area:proj; } .home-tasks{ grid-area:tasks; } .home-deadlines{ grid-area:dl; }
}
.sec-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.ver-mas { display:block; width:100%; margin-top:10px; padding:8px; background:transparent;
  border:1px dashed var(--border-strong); border-radius:9px; color:var(--primary);
  font-family:inherit; font-weight:600; font-size:.82rem; cursor:pointer; }
.ver-mas:hover { background:var(--bg-hover); }

/* ============================================================
   SALVAGUARDAS DE OVERFLOW (X) — desktop y móvil
   ============================================================ */
/* overflow-x:hidden en <html> convierte al documento en un contenedor de scroll
   propio: en el WebView de Android eso deja el scroll trabado y sin poder volver
   arriba en las vistas largas. `clip` recorta igual pero NO crea scrollport.
   Se deja `hidden` antes como respaldo para WebViews viejos que no soportan clip. */
/* overscroll-behavior-y:none desactiva el "pull-to-refresh" del navegador/WebView
   (arrastrar hacia abajo estando arriba recargaba la página; al querer subir en
   un modal, el gesto se interpretaba como recarga). Es la causa real del problema
   de "no puedo deslizar hacia arriba" — se resuelve por CSS, sin tocar el APK. */
html { max-width:100%; overflow-x:hidden; overflow-x:clip; overscroll-behavior-y:none; }
body { max-width:100%; overflow-x:hidden; overflow-x:clip; overscroll-behavior-y:none; }
.wrap, #view, .home, .card, .modal { max-width:100%; }
.row { min-width:0; }
.row > .row-name, .row-name { min-width:0; }
img, video { max-width:100%; height:auto; }
input[type=range], input[type=color] { max-width:100%; }
.badge { max-width:100%; }
.msg, .notif-item, .cmd-item, .dd-item, .hist-item, .kcard { overflow-wrap:anywhere; word-break:break-word; }
.section-title { overflow:hidden; text-overflow:ellipsis; }
/* En móvil, cualquier grid inline de 2/3 columnas se apila */
@media (max-width:640px){
  #view div[style*="grid-template-columns"], .modal div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
  .filter-bar, .sec-head { flex-wrap:wrap; }
  .topbar { gap:6px; padding:9px 10px; }
  .avatar { flex-shrink:0; }
  /* Nada de cajas/celdas que excedan el eje X: texto largo trunca, filas flex envuelven cuando sobra */
  #view [style*="display:flex"] { flex-wrap:wrap; min-width:0; }
  #view input, #view select, #view textarea, #view .searchbox { max-width:100%; min-width:0; box-sizing:border-box; }
  #view .row-sub { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  #view .fpost, #view .fpost-main, #view .fpost-head, #view .fpost-body { min-width:0; }
  #view .fpost-head, #view .fpost-foot { flex-wrap:wrap; }
  #view .fpost-body > *, #view .fp-text, #view .fp-quote { max-width:100%; overflow-wrap:anywhere; }
  #view .card, #view .card-p, .fpost { max-width:100%; min-width:0; }
  /* Items de grid: sin min-width:0 el contenido ensancha la pista (blowout) */
  #view .grid-2 > *, #view [style*="grid-template-columns"] > * { min-width:0; }
}

/* ============================================================
   SKIN C (lino & tinta) — enriquecido, estilo de la referencia
   ============================================================ */
[data-skin="c"] body {
  background-image:
    repeating-linear-gradient(transparent 0, transparent 33px, rgba(90,80,55,.05) 34px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 2h8M0 6h8' stroke='%23000' stroke-opacity='0.045' stroke-width='1'/><path d='M2 0v8M6 0v8' stroke='%23000' stroke-opacity='0.035' stroke-width='1'/></svg>");
}
/* Tarjetas: papel crema cosido con hilo verde, sombra suave de tela */
[data-skin="c"] .card {
  border:1px solid var(--border-strong);
  box-shadow:0 2px 0 rgba(90,80,55,.08), 0 10px 26px rgba(70,60,40,.10);
}
[data-skin="c"] .card::after { border-color:var(--primary); opacity:.45; inset:7px; }
/* Insignias como parches de tela bordados */
[data-skin="c"] .badge {
  border:1px dashed var(--primary); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.06);
  padding:3px 10px;
}
/* Botones primarios como etiqueta cosida */
[data-skin="c"] .btn-primary { border:1px dashed rgba(255,255,255,.5); box-shadow:0 1px 0 var(--primary-d); }
/* Barra superior con costura inferior verde */
[data-skin="c"] .topbar { border-bottom:1px dashed var(--primary); box-shadow:0 2px 0 var(--border); }
/* Checkbox como casilla bordada */
[data-skin="c"] .checkbox { border-style:dashed; }
/* Etapas del tablero con hilo verde */
[data-skin="c"] .kstage { border-color:var(--border-strong); }
[data-skin="c"] .kcard { box-shadow:0 1px 0 rgba(90,80,55,.1), var(--shadow); }
/* Login: marco cosido más marcado */
[data-skin="c"] .login-card::after { border-color:var(--primary); opacity:.5; }

/* ============================================================
   SKIN C — ASSETS REALES (lino, marco bordado, botánica, íconos)
   ============================================================ */
[data-skin="c"] body {
  background-color:#e7ddc9;
  background-image:url("../assets/linen.jpg");
  background-size:440px auto; background-repeat:repeat;
}
[data-skin="c"] body::before { opacity:0; }
/* Cajas con perímetro bordado (costura verde CSS, fiable) */
[data-skin="c"] .card { border:2px dashed var(--primary); border-radius:4px; }
[data-skin="c"] .card::after {
  content:''; display:block; position:absolute; inset:4px; border:1px dashed var(--primary);
  border-radius:3px; opacity:.35; pointer-events:none; background:none;
}

/* Íconos de imagen (bordados) */
.ico { width:1.2em; height:1.2em; object-fit:contain; vertical-align:-.24em; flex-shrink:0; }
.dd-item .ico { width:1.35em; height:1.35em; margin-right:2px; }
.btn-icon .ico { width:20px; height:20px; }

/* Tarjetas del skin C: papel crema limpio (el borde punteado hace de costura) */
[data-skin="c"] .card { background-color:var(--bg-surface); background-image:none; }
[data-skin="c"] .kcard { background-image:none; }

/* Descripciones/hints en párrafo: que envuelvan (row-sub inline sigue en nowrap) */
p.row-sub { white-space:normal; }
/* Pestañas de Configuración: centradas y ordenadas */
.cfg-tabs { justify-content:center; gap:6px !important; row-gap:6px; }
.cfg-tabs .tab { border:1px solid var(--border); border-radius:8px; }
.cfg-tabs .tab.active { border-color:var(--primary); }
/* Contenido de Configuración sin desbordes */
#cfg-body, #cfg-body * { min-width:0; }
#cfg-body .input { max-width:100%; }

/* ============================================================ */
/* Añadidos: subrayado de tareas, home apilado, novedades, assets */
/* ============================================================ */

/* Subrayado por estado temporal de la tarea */
.task-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.task-name.task-u-overdue { text-decoration-color: var(--danger, #dc2626); }
.task-name.task-u-active  { text-decoration-color: #eab308; }
.task-name.task-u-pending { text-decoration-color: #16a34a; }
.task-done .task-name { text-decoration-line: line-through; text-decoration-color: var(--text-muted); }

/* Inicio apilado (Novedades → Tareas → Calendario → Proyectos) */
.home-stack { display:flex; flex-direction:column; gap:16px; }
.home-cal .cal-grid { min-width:0; }

/* Calendario: punto de fecha de desarrollo */
.cal-item.dev { background:#fef9c3; }
@media (max-width:640px){ .cal-item.dev { background:#eab308; } }

/* Novedades (carrusel auto-rotativo) */
.news-carousel { position:relative; display:flex; align-items:center; gap:8px; min-height:56px; padding-bottom:8px; }
.news-item { flex:1; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--bg-hover); cursor:pointer; min-width:0; transition:background .15s; }
.news-item:hover { background:var(--border); }
.news-ic { font-size:1.3rem; flex-shrink:0; }
.news-body { flex:1; min-width:0; }
.news-title { font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-nav { border:0; background:transparent; font-size:1.5rem; cursor:pointer; color:var(--text-muted); padding:0 4px; line-height:1; flex-shrink:0; }
.news-nav:hover { color:var(--text); }
.news-rm { border:0; background:transparent; cursor:pointer; color:var(--text-muted); font-size:.9rem; flex-shrink:0; }
.news-rm:hover { color:var(--danger); }
.news-dots { position:absolute; bottom:-2px; left:0; right:0; display:flex; gap:4px; justify-content:center; }
.news-dots span { width:6px; height:6px; border-radius:50%; background:var(--border); }
.news-dots span.on { background:var(--primary,#6366f1); }

/* Banner "¿agregar a novedades?" */
.news-offer { position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:1200;
  display:flex; gap:10px; align-items:center; background:var(--bg-surface,#fff); border:1px solid var(--border);
  border-radius:14px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.18); max-width:calc(100vw - 24px);
  flex-wrap:wrap; transition:opacity .3s; }

/* Proyectos coloreados por estado de sus tareas (sección Proyectos del inicio) */
.row.proj-state-overdue { border-left:4px solid var(--danger,#dc2626); padding-left:8px; }
.row.proj-state-active  { border-left:4px solid #16a34a; padding-left:8px; }
.row.proj-state-idle    { border-left:4px solid #eab308; padding-left:8px; }

/* ---- Tanda 1: visibilidad en modo oscuro ---- */
/* Íconos del menú/topbar más claros en oscuro */
[data-theme="dark"] .ico { filter: brightness(1.9) saturate(1.05); }
/* Día de HOY en el calendario: anillo verde bien visible en oscuro */
[data-theme="dark"] .cal-today { border-color:#86d29a; box-shadow: inset 0 0 0 2px #86d29a; }
[data-theme="dark"] .cal-today .cal-num { color:#86d29a; }
/* Día seleccionado un poco más marcado en oscuro */
[data-theme="dark"] .cal-cell.cal-sel { background:rgba(143,155,214,.22); border-color:var(--primary-lt); }

/* ---- Tanda 2: barra de accesos rápidos (scroll horizontal en mobile) ---- */
.quick-bar { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:2px; scrollbar-width:thin; }
.quick-bar::-webkit-scrollbar { height:6px; }
.quick-bar::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:6px; }
.quick-btn { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:66px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg-surface);
  cursor:pointer; font-size:.68rem; color:var(--text-sec); white-space:nowrap; }
.quick-btn:hover { background:var(--bg-hover); color:var(--text); }
.quick-ic { font-size:1.35rem; line-height:1; }
.quick-edit { border-style:dashed; }

/* ---- Fix móvil: modales (textos de ayuda que envuelven, botones que se ajustan) ---- */
.field .row-sub { white-space:normal; }                 /* textos de ayuda de formularios */
body.modal-open .chat-fab { display:none; }             /* el FAB no tapa los botones del modal */
@media (max-width:640px){
  .modal { overflow-x:hidden; }
  .modal .row-sub { white-space:normal; }
  /* filas de botones del pie: que envuelvan en vez de salirse */
  .modal > div[style*="justify-content:space-between"],
  .modal > div[style*="justify-content:flex-end"] { flex-wrap:wrap; row-gap:8px; }
}

/* ---- Fila de tarea del inicio: título a todo el ancho (envuelve) ---- */
.row-name.row-name-wrap { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }

/* ---- Barra de filtros del inicio: una sola línea en móvil (el botón de paneles queda con los filtros) ---- */
@media (max-width:640px){
  .filter-label { display:none; }                 /* el texto "Filtros:" estorba en móvil */
  .filter-bar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter-bar > * { flex:0 0 auto; }               /* que los botones no se compriman */
}

/* ---- Visor de imagen/video (lightbox) ---- */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.86); z-index:3000; display:flex; align-items:center; justify-content:center; padding:16px; }
.lightbox .lb-inner { max-width:96vw; max-height:92vh; display:flex; }
.lightbox img, .lightbox video { max-width:96vw; max-height:92vh; display:block; border-radius:8px; box-shadow:0 12px 44px rgba(0,0,0,.55); }
.lb-close { position:fixed; top:14px; right:16px; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.2rem; z-index:3001; }
.lb-close:hover { background:rgba(255,255,255,.3); }
/* Video del historial/adjuntos: miniatura clicable con ▶ */
.lb-video { position:relative; display:inline-block; cursor:zoom-in; border-radius:10px; overflow:hidden; max-width:100%; }
.lb-video video { display:block; max-width:100%; pointer-events:none; }
.lb-video .lb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); background:rgba(0,0,0,.12); }
/* Zona de arrastre resaltada al soltar archivos */
.drop-hover { outline:2px dashed var(--primary,#6366f1); outline-offset:-4px; background:var(--primary-glow,rgba(99,102,241,.08)); }

/* ============================================================ */
/* Historial estilo FORO */
/* ============================================================ */
.fpost { display:flex; gap:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:14px; background:var(--bg-surface); }
.fpost-side { flex:0 0 96px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--bg); border-right:1px solid var(--border); text-align:center; }
.fpost-side .dot-user { width:46px !important; height:46px !important; font-size:1rem; }
.fpost-author { font-size:.74rem; font-weight:700; color:var(--primary); line-height:1.15; overflow-wrap:anywhere; }
.fpost-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.fpost-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.fpost-date { font-size:.74rem; color:var(--text-muted); }
.fpost-badges { display:flex; gap:6px; flex-wrap:wrap; }
.fpost-body { padding:14px; font-size:.92rem; line-height:1.5; min-width:0; }
.fpost-body .hist-media { margin-top:10px; }
.fp-title { font-weight:700; font-size:1.05rem; line-height:1.3; margin-bottom:6px; overflow-wrap:anywhere; }
.fp-text { white-space:normal; overflow-wrap:anywhere; }
/* Entradas del editor enriquecido: respetar saltos de línea/espacios igual que el editor (WYSIWYG) */
.fp-text.fp-rich { white-space:pre-wrap; }
/* Contenido enriquecido renderizado en una entrada del historial */
.fp-text img { max-width:100%; height:auto; border-radius:10px; margin:6px 0; display:block; }
.fp-text h1 { font-size:1.35rem; }
.fp-text h2 { font-size:1.18rem; }
.fp-text h3 { font-size:1.05rem; }
.fp-text h1, .fp-text h2, .fp-text h3 { margin:.45em 0 .25em; line-height:1.25; }
.fp-text p { margin:.4em 0; }
.fp-text ul, .fp-text ol { margin:.35em 0 .35em 1.25em; }
.fp-text blockquote { border-left:3px solid var(--border-strong); margin:.5em 0; padding:.1em 0 .1em .8em; color:var(--text-sec); }
.fp-text a { color:var(--primary); }

/* Editor de texto enriquecido (modal de historial) */
.rte-toolbar { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; background:var(--bg-hover);
  border:1px solid var(--border); border-bottom:0; border-radius:10px 10px 0 0; }
.rte-btn { min-width:30px; height:30px; padding:0 8px; border:1px solid var(--border); background:var(--bg-elevated);
  color:var(--text); border-radius:7px; cursor:pointer; font-size:.9rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; }
.rte-btn:hover { background:var(--bg-hover); }
.rte-sep { width:1px; height:20px; background:var(--border); margin:0 3px; }
.rte-size { height:30px; border:1px solid var(--border); border-radius:7px; background:var(--bg-elevated);
  color:var(--text); font-size:.82rem; padding:0 4px; cursor:pointer; }
.rte { border-top:0; border-radius:0 0 10px 10px; min-height:120px; padding:10px 12px;
  overflow-wrap:anywhere; white-space:pre-wrap; }
.rte:focus { outline:none; border-color:var(--primary); }
.rte:empty:before { content:attr(data-ph); color:var(--text-muted); pointer-events:none; }
.rte img { max-width:100%; height:auto; border-radius:8px; margin:4px 0; }
.rte h1, .rte h2, .rte h3 { margin:.4em 0; }
.rte ul, .rte ol { margin:.3em 0 .3em 1.25em; }
.fp-link { color:var(--primary); text-decoration:none; word-break:break-all; }
.fp-link:hover { text-decoration:underline; }

/* ---- Anotación / corrección de imágenes ---- */
.annot-target { position:relative; }
.annot-open { position:absolute; right:8px; bottom:8px; background:rgba(20,20,25,.72); color:#fff; border:0;
  border-radius:8px; padding:5px 10px; font-size:.78rem; cursor:pointer; opacity:.85; }
.annot-open:hover { background:rgba(20,20,25,.95); opacity:1; }
/* Editor (modal) */
.annot-toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rte-btn.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.an-swatch { width:24px; height:24px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0; }
.an-swatch.on { box-shadow:0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--text); }
.annot-editor { position:relative; display:inline-block; max-width:100%; border:1px solid var(--border);
  border-radius:10px; overflow:hidden; touch-action:none; line-height:0; }
.annot-editor img { display:block; max-width:100%; max-height:66vh; width:auto; height:auto; }
.annot-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.annot-pins { position:absolute; inset:0; pointer-events:none; }
.annot-pin { position:absolute; transform:translate(-50%,-50%); min-width:22px; height:22px; padding:0 5px;
  border-radius:11px; border:2px solid #fff; background:var(--danger,#e11d48); color:#fff; font-size:.72rem;
  font-weight:700; line-height:1; cursor:pointer; pointer-events:auto; box-shadow:0 1px 5px rgba(0,0,0,.45);
  display:inline-flex; align-items:center; justify-content:center; }
.annot-pin.on { outline:2px solid var(--primary); outline-offset:1px; }
/* Vista en el feed */
.annot-view .annot-canvas-wrap { position:relative; display:block; max-width:100%; border-radius:10px; overflow:hidden; line-height:0; }
.annot-view .annot-canvas-wrap img { display:block; width:100%; height:auto; }
.annot-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.annot-cmt-list { margin:8px 0 0; padding-left:1.3em; font-size:.86rem; color:var(--text-sec); line-height:1.4; }
.annot-cmt-list li { white-space:pre-wrap; overflow-wrap:anywhere; }
/* Globo con el comentario de un pin (vista), respeta espacios/saltos de párrafo */
.annot-cmt-view { position:fixed; z-index:2600; max-width:280px; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:9px 11px; display:flex; gap:8px; align-items:flex-start; font-size:.87rem; }
.annot-cmt-view-num { flex:none; min-width:20px; height:20px; border-radius:50%; background:var(--danger,#e11d48); color:#fff;
  font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.annot-cmt-view-txt { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); line-height:1.4; }
/* Popover para escribir/editar un comentario (editor) */
.annot-cmt-pop { position:fixed; z-index:3000; width:250px; max-width:92vw; background:var(--bg-elevated);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); padding:10px; }
.annot-cmt-pop textarea { width:100%; resize:vertical; min-height:56px; }
.annot-cmt-pop-actions { display:flex; justify-content:space-between; gap:8px; margin-top:8px; }
/* Lista editable de comentarios bajo el editor */
.annot-cmt-editlist { margin-top:10px; display:flex; flex-direction:column; gap:5px; max-height:150px; overflow-y:auto; }
.annot-cmt-row { display:flex; gap:8px; align-items:flex-start; padding:5px 8px; border:1px solid var(--border);
  border-radius:8px; cursor:pointer; font-size:.85rem; }
.annot-cmt-row:hover { background:var(--bg-hover); }
.annot-cmt-num { flex:none; min-width:20px; height:20px; border-radius:50%; background:var(--danger,#e11d48); color:#fff;
  font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.annot-cmt-txt { flex:1; min-width:0; overflow-wrap:anywhere; }
.annot-pdf-ctrl { display:inline-flex; gap:4px; align-items:center; }
.rte-btn:disabled { opacity:.4; cursor:default; }
.fp-mention { color:var(--primary); font-weight:600; background:var(--primary-glow); border-radius:5px; padding:0 3px; }
.fp-quote { border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:8px;
  background:var(--bg); margin:0 0 12px; overflow:hidden; }
.fp-quote-head { font-size:.76rem; font-weight:700; color:var(--text-sec); padding:6px 12px; background:var(--bg-hover);
  border-bottom:1px solid var(--border); }
.fp-quote-body { padding:8px 12px; font-size:.85rem; color:var(--text-sec); }
/* Banner de acuso de recibo (entrada donde te citaron/etiquetaron) */
.ack-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 14px 0; padding:9px 12px;
  background:var(--primary-glow,rgba(99,102,241,.12)); border:1px solid var(--primary,#6366f1); border-radius:10px;
  font-size:.84rem; font-weight:600; color:var(--text); }
.ack-bar button { flex:none; }
.fp-embed { margin-top:10px; }
.fp-embed iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:10px; background:#0000000f; }
.fpost-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  padding:6px 14px 10px; border-top:1px dashed var(--border); }
.fpost-foot .rx-bar { margin-top:0; }
.fpost-actions { display:flex; gap:4px; margin-left:auto; }
.fpost-actions button { border:0; background:none; color:var(--text-muted); cursor:pointer; font-size:.78rem;
  padding:3px 8px; border-radius:7px; }
.fpost-actions button:hover { background:var(--bg-hover); color:var(--primary); }
/* Botón "marcar como leída" en notificaciones */
.notif-read { border:1px solid var(--border); background:transparent; color:var(--success,#16a34a); cursor:pointer;
  width:26px; height:26px; border-radius:50%; flex-shrink:0; align-self:center; font-size:.85rem; line-height:1; }
.notif-read:hover { background:var(--success-bg,rgba(22,163,74,.12)); border-color:var(--success,#16a34a); }
@media (max-width:640px){
  .fpost-side { flex-basis:64px; padding:10px 4px; }
  .fpost-side .dot-user { width:38px !important; height:38px !important; }
  .fpost-body, .fpost-head { padding-left:10px; padding-right:10px; }
}

/* Ocurrencia proyectada de tarea recurrente en el calendario (aún no creada) */
.cal-item.recur { border:1px dashed var(--border-strong); opacity:.9; }
@media (max-width:640px){ .cal-item.recur { background:var(--text-muted); } }

/* Ítems HECHOS en el calendario (tareas, proyectos y citas completadas) */
.cal-item.cal-done { text-decoration:line-through; opacity:.6; }
.row.cal-done { opacity:.7; }
.row.cal-done .row-name { text-decoration:line-through; text-decoration-color:var(--text-muted); }
@media (max-width:640px){ .cal-item.cal-done { background:var(--ok,#22c55e); } }

/* ============================================================
   SCROLL EN MÓVIL (v34)
   Tres problemas que impedían volver hacia arriba en listas largas:
   1. overflow-x:hidden en <html> (arreglado arriba con clip)
   2. el gesto se "encadenaba" entre el panel y la página de atrás
   3. el fondo seguía scrolleando con un modal abierto
   ============================================================ */

/* El gesto se queda en el contenedor que se está tocando (no se encadena al
   fondo). NO se usa -webkit-overflow-scrolling:touch: es una propiedad legacy de
   iOS que en varias versiones de Android WebView provoca justamente el bug de
   "scrollea hacia abajo pero no hacia arriba" en contenedores largos. */
.modal, .overlay, .sd-body, .dock-list, .chat-list, .cmd-list,
.chat-launcher, .mention-pop, .annot-cmt-editlist, .quick-bar,
.filter-bar, .kboard, .lightbox {
  overscroll-behavior: contain;
}
/* El scroll interno de estos contenedores debe fluir libre en ambos sentidos. */
.modal, .sd-body, .dock-list, .chat-list, .cmd-list { touch-action: pan-y; }

/* Con un modal abierto se bloquea el scroll del fondo. IMPORTANTE: NO se usa
   `position:fixed` sobre el <body>. Reposicionar el body a fixed+top negativo
   rompe, en Android WebView, el rango de scroll del modal interno (deja arrastrar
   hacia abajo pero se resiste hacia arriba) — era la causa del bug persistente.
   Con overscroll-behavior:contain el gesto ya no se encadena al fondo, así que
   basta overflow:hidden, que NO mueve el body ni altera el scroll interno. */
@media (max-width: 899px) {
  html.modal-open, body.modal-open {
    overflow: hidden;
    height: 100%;
    touch-action: none;   /* toques directos sobre el fondo no lo desplazan */
  }
}

/* Botón "volver arriba": red de seguridad en vistas largas del móvil. */
#to-top {
  position: fixed; right: 16px; bottom: 84px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 1.15rem; line-height: 1;
  box-shadow: var(--shadow-lg); cursor: pointer; display: none;
  align-items: center; justify-content: center;
  padding: 0; opacity: 0; transition: opacity .18s ease;
}
#to-top.show { display: flex; opacity: .92; }
#to-top:active { transform: scale(.94); }
body.modal-open #to-top { display: none; }
@media (min-width: 900px) { #to-top { right: 24px; bottom: 24px; } }

/* ============================================================
   SKELETON (v34) — la estructura se pinta antes que los datos
   ============================================================ */
.sk { padding: 4px 0; }
.sk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-row .sk-box { flex: 1; min-width: 120px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .sk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sk-grid { grid-template-columns: 1fr; } }
.sk-box, .sk-line {
  border-radius: 10px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--neutral-bg) 25%, var(--bg-hover) 37%, var(--neutral-bg) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk-line { border-radius: 6px; margin-bottom: 0; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk-box, .sk-line { animation: none; } }

/* Si el sistema pide menos movimiento (o el WebView no anima), el modal debe
   aparecer igual en su sitio: la animación nunca puede dejarlo fuera de pantalla. */
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none !important; }
}

/* v35 — Resaltado temporal de una entrada del historial al llegar desde una
   notificación de acuse/cita (item 16). */
.hist-flash { animation: histFlash 2.2s ease; }
@keyframes histFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15% { box-shadow: 0 0 0 3px var(--primary, #6366f1); background: var(--primary-glow, rgba(99,102,241,.08)); }
}
/* Descripción enriquecida de un recurso (item 7): imágenes y embeds bien contenidos. */
.resource-desc { white-space: normal; overflow-wrap: anywhere; }
.resource-desc img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }
.resource-desc a { color: var(--primary); text-decoration: underline; overflow-wrap: anywhere; }

/* Botón de refrescar del topbar (reemplaza al pull-to-refresh). */
#tb-refresh.spinning span { display:inline-block; animation: tb-spin .7s linear infinite; }
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* v36 — Visor de "Mis sitios" (iframe a pantalla completa dentro de la app). */
.site-viewer { position:fixed; inset:0; z-index:2900; background:var(--bg); display:flex; flex-direction:column; }
.sv-bar { display:flex; align-items:center; gap:8px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--bg-elevated); border-bottom:1px solid var(--border); flex-shrink:0; }
.sv-title { font-weight:700; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--bg-surface);
  color:var(--text); font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.sv-btn:hover { background:var(--bg-hover); }
.sv-frame-wrap { flex:1; position:relative; min-height:0; }
.sv-frame { width:100%; height:100%; border:0; background:#fff; }
.sv-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px; color:var(--text-sec); }
.site-box:hover { border-color:var(--primary); }

/* Con el botón 🔄 el topbar tiene 7 íconos; en pantallas muy angostas se oculta
   el wordmark (queda el logo) para que campana/reloj/chat/perfil no se salgan. */
@media (max-width:385px) { .topbar .brand-wordmark { display:none; } }

/* v37 — Migas de navegación (madre › hijo › nieto › …) */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 2px; font-size:.82rem; }
.crumb { color:var(--text-sec); text-decoration:none; padding:2px 6px; border-radius:6px; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
a.crumb:hover { background:var(--bg-hover); color:var(--text); }
.crumb-cur { color:var(--text); font-weight:700; }
.crumb-sep { color:var(--text-muted); }

/* v37 — Vista de rama (árbol de subproyectos) */
.proj-tree { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--bg-surface); overflow-x:auto; }
.tree-node { display:flex; align-items:center; gap:8px; padding:4px 0; white-space:nowrap; }
.tree-branch { color:var(--text-muted); font-family:monospace; }
.tree-name { text-decoration:none; color:var(--primary); font-weight:600; }
.tree-name.cur { color:var(--text); background:var(--primary-glow,rgba(99,102,241,.1)); padding:1px 6px; border-radius:6px; }
.tree-name:hover { text-decoration:underline; }

/* v37 — Árbol de tareas vinculadas */
.tasktree-node { display:flex; align-items:center; gap:8px; padding:6px 0; white-space:nowrap; }
.tasktree-node .tt-name { font-weight:600; cursor:pointer; }
.tasktree-node .tt-name:hover { text-decoration:underline; }

/* ============================================================
   v38 — ESTILO MODERNO (data-skin="m"), el nuevo estilo por defecto.
   Los estilos anteriores siguen disponibles; este bloque solo los neutraliza
   bajo [data-skin="w"]. La estructura nueva (pestañas, tarjetas de proyecto,
   barras de herramientas) funciona con cualquier estilo.
   ============================================================ */
[data-skin="w"] {
  --primary:#4f46e5; --primary-d:#4338ca; --primary-lt:#818cf8; --primary-glow:rgba(79,70,229,.12);
  --accent:#ea7c32;
  --bg:#f5f6f8; --bg-surface:#ffffff; --bg-elevated:#ffffff; --bg-hover:#f1f2f5;
  --border:#e4e6eb; --border-strong:#cdd1d9;
  --text:#1a1d23; --text-sec:#454c5a; --text-muted:#666d7b;
  --success:#15803d; --success-bg:#dcfce7; --warning:#a16207; --warning-bg:#fef3c7;
  --danger:#b91c1c; --danger-bg:#fee2e2; --neutral-bg:#eef0f3;
  --info:#4338ca; --info-bg:#e0e7ff;
  --shadow:0 1px 2px rgba(16,24,40,.05); --shadow-lg:0 12px 32px rgba(16,24,40,.16);
  --radius:12px; --radius-sm:8px;
  --paper-grain:0; --tape:0; --stitch:0; --tilt:0deg;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-hand:var(--font-body);
}
[data-skin="w"][data-theme="dark"] {
  --primary:#818cf8; --primary-d:#6366f1; --primary-lt:#a5b4fc; --primary-glow:rgba(129,140,248,.16);
  --accent:#f59e63;
  --bg:#0f1115; --bg-surface:#171a20; --bg-elevated:#1d2129; --bg-hover:#252a33;
  --border:#2a2f39; --border-strong:#3b414d;
  --text:#e8eaee; --text-sec:#b7bdc9; --text-muted:#8e95a3;
  --success:#4ade80; --success-bg:#14301f; --warning:#fbbf24; --warning-bg:#33270a;
  --danger:#f87171; --danger-bg:#3a1a1a; --neutral-bg:#252a33;
  --info:#a5b4fc; --info-bg:#262a4d;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}
.st-terminado_retomar { background:var(--info-bg,#e0e7ff); color:var(--info,#4338ca); }

/* --- Se apagan los adornos "hechos a mano" --- */
[data-skin="w"] body { background-image:none; font-size:.9rem; line-height:1.5; }
[data-skin="w"] body::before { display:none; }
[data-skin="w"] .card { box-shadow:var(--shadow); animation:none; }
[data-skin="w"] .card::after, [data-skin="w"] .modal::after, [data-skin="w"] .section-title::after,
[data-skin="w"] .kcard::before, [data-skin="w"] .kcard::after, [data-skin="w"] .hist-item::before,
[data-skin="w"] .kstage-head::before, [data-skin="w"] .login-card::after, [data-skin="w"] .login-card::before { display:none; }
[data-skin="w"] .badge, [data-skin="w"] .chip, [data-skin="w"] .count-pill, [data-skin="w"] .rx-chip { border-radius:99px; box-shadow:none; }
[data-skin="w"] .kcard, [data-skin="w"] .hist-item, [data-skin="w"] .toast { border-radius:var(--radius-sm); font-family:inherit; }
[data-skin="w"] .btn-primary { border-color:transparent; box-shadow:none; }
[data-skin="w"] .input, [data-skin="w"] textarea.input, [data-skin="w"] select.input { box-shadow:none; background:var(--bg-surface); }
[data-skin="w"] .empty { font-style:normal; color:var(--text-muted); }
[data-skin="w"] .checkbox { border-radius:6px; }
[data-skin="w"] .avatar, [data-skin="w"] .dot-user { box-shadow:none; }
[data-skin="w"] .msg { box-shadow:none; }
[data-skin="w"] .msg.theirs { border-radius:12px; }
[data-skin="w"] .cmd { border-color:var(--border); }
[data-skin="w"] .cmd-input { font-family:inherit; }
[data-skin="w"] .dropdown { border-color:var(--border); }
[data-skin="w"] .cal-today { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
[data-skin="w"] .cal-today .cal-num { color:var(--primary); }
[data-skin="w"] .kstage-head { padding-left:14px; background:transparent; }
[data-skin="w"] .section-title { font-size:.74rem; letter-spacing:.05em; padding-bottom:0; }
[data-skin="w"] .ico { filter:none; }
[data-skin="w"] h1, [data-skin="w"] h2, [data-skin="w"] h3, [data-skin="w"] .modal-title { letter-spacing:-.01em; }
[data-skin="w"] h1 { font-size:1.3rem; font-weight:650; }
/* La navegación lateral/inferior ya cumple lo que hacían los "← Inicio" de cada vista. */
[data-skin="w"] #view a.btn-ghost[href="#/inicio"] { display:none; }
::-webkit-scrollbar-thumb { border-color:transparent; background-clip:padding-box; }

/* --- Barra superior --- */
[data-skin="w"] .topbar { height:56px; padding:0 16px; gap:8px; border-bottom:1px solid var(--border); box-shadow:none; background:var(--bg-surface); }
[data-skin="w"] .brand-mark { height:32px; }
[data-skin="w"] .brand-wordmark { width:128px; }
[data-skin="w"] .searchbox { background:var(--bg); height:36px; border-radius:var(--radius-sm); }
[data-skin="w"] .topbar .btn-icon { background:transparent; border-color:transparent; color:var(--text-sec); }
[data-skin="w"] .topbar .btn-icon:hover { background:var(--bg-hover); color:var(--text); }
#tb-refresh.spinning .tb-spin { display:inline-flex; animation:tb-spin .7s linear infinite; }
.tb-spin { display:inline-flex; }

/* --- Navegación lateral (escritorio) --- */
.rail-lb { display:none; }
.rail-ic { display:inline-flex; }
.rail-ic .ico { width:20px; height:20px; }
:root { --rail:0px; }
@media (min-width:900px) { :root { --rail:60px; } }
@media (min-width:1180px) { :root { --rail:212px; } }
@media (min-width:900px) {
  [data-skin="w"] #side-rail { display:flex; top:56px; width:var(--rail); padding:12px 8px; gap:2px; align-items:stretch; justify-content:flex-start;
    background:var(--bg-surface); border-right:1px solid var(--border); pointer-events:auto; overflow-y:auto; z-index:45; }
  [data-skin="w"] .rail-btn { width:100%; height:38px; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 10px; border-radius:var(--radius-sm);
    font:500 .86rem var(--font-body); color:var(--text-sec); text-align:left; transform:none !important; filter:none !important; }
  [data-skin="w"] .rail-btn:hover { background:var(--bg-hover); color:var(--text); }
  [data-skin="w"] .rail-btn.cur, [data-skin="w"] .rail-btn.on { background:var(--primary-glow); color:var(--primary); }
  [data-skin="w"] .rail-cfg { margin-top:auto; color:var(--text-muted); }
  [data-skin="w"] #side-drawer { left:var(--rail); top:56px; z-index:44; box-shadow:var(--shadow-lg); }
  [data-skin="w"] .wrap { max-width:none; margin:0 0 0 var(--rail); padding:24px 28px 64px; }
  [data-skin="w"] #view { max-width:1120px; margin:0 auto; }
}
@media (min-width:1180px) {
  [data-skin="w"] .rail-btn { justify-content:flex-start; }
  [data-skin="w"] .rail-lb { display:inline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* --- Navegación inferior (móvil) --- */
#bottom-nav { display:none; }
@media (max-width:899px) {
  #bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--bg-surface); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); }
  #bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:54px; padding:6px 2px; border:0; background:none;
    color:var(--text-muted); font:500 .66rem var(--font-body); cursor:pointer; }
  #bottom-nav button .ico { width:21px; height:21px; }
  #bottom-nav button.cur { color:var(--primary); }
  body:has(#view input:focus, #view textarea:focus) #bottom-nav { display:none; }
  .wrap { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .chat-fab { bottom:calc(66px + env(safe-area-inset-bottom)); }
  #to-top { bottom:calc(128px + env(safe-area-inset-bottom)); }
  #toasts { bottom:calc(66px + env(safe-area-inset-bottom)); }
  .dock-win { position:relative; z-index:70; }
  .chat-dock { z-index:70; }
}

/* --- Menú del perfil: siempre alcanzable, con scroll propio --- */
.nav-dd { max-height:calc(100dvh - 70px); overflow-y:auto; overscroll-behavior:contain; width:272px; max-width:calc(100vw - 16px); }
.nav-dd-me { display:flex; gap:10px; align-items:center; padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.nav-dd-label { padding:10px 11px 3px; font-size:.68rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.nav-dd .dd-item { padding:8px 11px; }
.nav-dd .dd-item .ico { width:18px; height:18px; color:var(--text-muted); }
@media (max-width:899px) {
  .nav-dd { top:auto !important; right:8px !important; left:8px !important; width:auto; max-width:none;
    bottom:calc(60px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 130px); }
}

/* --- Encabezado de página --- */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.page-head h1 { margin:0; }
.page-sub { color:var(--text-muted); font-size:.84rem; margin-top:2px; }
.page-sub::first-letter { text-transform:uppercase; }
.page-actions { display:flex; gap:6px; flex-shrink:0; }

/* --- Pestañas segmentadas (inicio y proyecto) --- */
.seg-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:14px 0 16px; overflow-x:auto; scrollbar-width:none; }
.seg-tabs::-webkit-scrollbar { display:none; }
.seg-tab { display:inline-flex; align-items:center; gap:7px; padding:10px 12px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none;
  color:var(--text-sec); font:550 .88rem var(--font-body); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.seg-tab .ico { width:17px; height:17px; }
.seg-tab:hover { color:var(--text); }
.seg-tab.on { color:var(--primary); border-bottom-color:var(--primary); }
.seg-count { display:inline-block; min-width:20px; padding:0 6px; border-radius:99px; background:var(--neutral-bg); color:var(--text-sec); font-size:.7rem; font-weight:650; line-height:18px; text-align:center; }
.seg-tab.on .seg-count { background:var(--primary-glow); color:var(--primary); }
@media (max-width:560px) {
  .seg-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; }
  .seg-tab { justify-content:center; padding:10px 4px; font-size:.8rem; gap:5px; }
  #p-tabs { grid-auto-columns:auto; display:flex; }
  #p-tabs .seg-tab { padding:10px 10px; }
  .seg-tabs:not(#p-tabs) .seg-tab .ico { display:none; }
}

/* --- Barras de herramientas --- */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.toolbar-end { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.chip-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.input-sm { padding:6px 9px; font-size:.82rem; width:auto; }
.filter-bar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fbtn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:99px; background:var(--bg-surface);
  color:var(--text-sec); font:500 .78rem var(--font-body); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.fbtn .ico { width:15px; height:15px; }
.fbtn:hover { background:var(--bg-hover); color:var(--text); }
.fbtn.active { background:var(--primary-glow); border-color:transparent; color:var(--primary); }
@media (max-width:640px) {
  .filter-bar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; padding-bottom:2px; }
  .filter-bar::-webkit-scrollbar { display:none; }
  .toolbar-end { margin-left:0; width:100%; }
}

/* --- Tareas agrupadas --- */
.tgroup { margin-bottom:16px; }
.tgroup-head { display:flex; align-items:center; gap:8px; margin:0 2px 6px; font-size:.78rem; font-weight:650; color:var(--text-sec); }
.tgroup-head.danger { color:var(--danger); }
.tgroup-head.danger .seg-count { background:var(--danger-bg); color:var(--danger); }
.tgroup-list { padding:4px; }
.tgroup-list .row { padding:10px; }
.tgroup-list .row + .row { margin-top:0; border-top:1px solid var(--border); border-radius:0; }
.tgroup-list .row-sub .ico { width:13px; height:13px; }

/* --- Módulo de proyectos --- */
.pj-search { flex:1 1 240px; max-width:380px; height:36px; }
.pj-search .ico { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.pj-group { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-muted); }
.seg-mini { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-surface); }
.seg-mini button { width:32px; height:31px; display:grid; place-items:center; border:0; background:none; color:var(--text-muted); cursor:pointer; }
.seg-mini button .ico { width:16px; height:16px; }
.seg-mini button.on { background:var(--primary-glow); color:var(--primary); }
.pgroup { margin-bottom:18px; }
.pgroup-head { display:flex; align-items:center; gap:6px; padding:4px 2px; margin-bottom:8px; border:0; background:none; color:var(--text-sec); font:650 .8rem var(--font-body); cursor:pointer; }
.pgroup-head .ico { width:15px; height:15px; transition:transform .12s; }
.pgroup-head .ico.rot { transform:rotate(90deg); }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; align-items:start; }
.pgrid.list { grid-template-columns:1fr; gap:6px; }
.pcard { display:flex; flex-direction:column; gap:9px; padding:14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; min-width:0; transition:border-color .12s; }
.pcard:hover { border-color:var(--border-strong); }
.pcard-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.pcard-name { font-weight:620; line-height:1.3; min-width:0; overflow-wrap:anywhere; }
.pcard-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.78rem; color:var(--text-muted); }
.pcard-meta .ico { width:13px; height:13px; vertical-align:-2px; }
.pcard-prog { display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--text-muted); }
.pcard-prog .progress { flex:1; height:5px; }
.pcard-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; }
.pcard-subs { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 8px; border:1px solid var(--border); border-radius:99px; background:none; color:var(--text-sec); font:550 .74rem var(--font-body); cursor:pointer; }
.pcard-subs .ico { width:14px; height:14px; }
.pcard-subs.on, .pcard-subs:hover { background:var(--primary-glow); border-color:transparent; color:var(--primary); }
.ptree { border-top:1px solid var(--border); padding-top:6px; display:flex; flex-direction:column; gap:1px; }
.ptree-row { display:flex; align-items:center; gap:7px; padding:6px; border-radius:6px; font-size:.82rem; }
.ptree-row:hover { background:var(--bg-hover); }
.ptree-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptree-lvl { font-size:.68rem; color:var(--text-muted); flex-shrink:0; }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-dot.st-sin_iniciar { background:var(--text-muted); }
.status-dot.st-en_desarrollo { background:var(--warning); }
.status-dot.st-terminado { background:var(--success); }
.status-dot.st-terminado_retomar { background:var(--info,#4338ca); }
@media (min-width:700px) {
  .pgrid.list .pcard { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr) auto; align-items:center; gap:4px 14px; padding:10px 14px; }
  .pgrid.list .ptree { grid-column:1 / -1; }
}
@media (max-width:640px) { .pj-search { max-width:none; flex-basis:100%; } .pgrid { grid-template-columns:1fr; } }

/* --- Ventana de proyecto --- */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px 2px; font-size:.8rem; margin-bottom:10px; }
.crumb { max-width:none; white-space:normal; padding:2px 5px; }
.crumb small { color:var(--text-muted); font-size:.92em; font-weight:400; }
.p-head { padding:18px 20px; }
.p-head-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.p-title { margin:0; font-size:1.3rem; font-weight:650; overflow-wrap:anywhere; }
.p-desc { color:var(--text-sec); margin:6px 0 0; white-space:pre-wrap; font-size:.87rem; }
.p-head-actions { display:flex; gap:4px; flex-shrink:0; }
.p-head-actions .btn-icon { background:transparent; border-color:transparent; }
.p-head-actions .btn-icon:hover { background:var(--bg-hover); }
.p-facts { display:flex; flex-wrap:wrap; gap:12px 26px; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--border); }
.p-facts dt { font-size:.68rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.p-facts dd { margin:0; font-size:.86rem; min-height:30px; display:flex; align-items:center; }
.p-facts select { min-width:130px; }
#p-guide-wrap { margin-top:14px; }
#p-guide-wrap:has(#p-guide-card[style*="none"]) { display:none; }
.ptab-pane[hidden] { display:none; }
@media (max-width:640px) {
  .p-head { padding:14px; }
  .p-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  .p-facts select { min-width:0; width:100%; }
}

/* --- Avisos del inicio: compactos --- */
[data-skin="w"] .home-news { padding:10px 14px; margin-bottom:0; }
[data-skin="w"] .home-news .sec-head { margin-bottom:4px; }
#home-notif[hidden] { display:none; }

/* --- Menciones --- */
.mention-pop { max-height:240px; }
.mention-pop .dd-item.sel { background:var(--primary-glow); }
.fp-mention { color:var(--primary); font-weight:600; }

/* --- Telegram --- */
.tg-examples, .tg-steps { margin:8px 0 14px; padding-left:20px; font-size:.86rem; color:var(--text-sec); }
.tg-examples li, .tg-steps li { margin-bottom:5px; }
.tg-examples li { font-family:ui-monospace,Consolas,monospace; font-size:.8rem; }
.login-tenant { text-align:center; font-weight:650; margin-bottom:12px; }
.login-tenant[hidden] { display:none; }

/* --- Mis sitios --- */
.sv-hint { position:absolute; left:0; right:0; bottom:0; padding:6px 12px; background:var(--bg-elevated); border-top:1px solid var(--border); font-size:.75rem; color:var(--text-muted); text-align:center; }
.sv-frame-wrap .sv-frame { height:calc(100% - 30px); }

/* --- Ajustes tras revisar cada módulo en pantalla --- */
/* Tablero: columnas reales en pantallas anchas; en el celular, apilado (se lee mejor) */
@media (min-width:900px) {
  [data-skin="w"] .kstages { flex-direction:row; align-items:flex-start; overflow-x:auto; padding-bottom:10px; }
  [data-skin="w"] .kstage { flex:0 0 268px; background:var(--neutral-bg); border-color:transparent; box-shadow:none; }
  [data-skin="w"] .kstage-body { display:flex; flex-direction:column; gap:8px; padding:0 8px 8px; min-height:80px; }
  [data-skin="w"] .kstage-head { border-bottom:0; }
}
[data-skin="w"] .kcard { background:var(--bg-surface); border:1px solid var(--border); box-shadow:var(--shadow); transform:none !important; }
[data-skin="w"] .kstage-empty { font-style:normal; color:var(--text-muted); font-size:.78rem; }
/* El color de la tarea (vencida / en desarrollo) pasa de subrayado a un punto discreto */
[data-skin="w"] .task-name { text-decoration:none; }
[data-skin="w"] .task-done .task-name { text-decoration:line-through; text-decoration-color:var(--text-muted); }
[data-skin="w"] .task-name.task-u-overdue::before, [data-skin="w"] .task-name.task-u-active::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 7px 1px 0; vertical-align:middle; }
[data-skin="w"] .task-name.task-u-overdue::before { background:var(--danger); }
[data-skin="w"] .task-name.task-u-active::before { background:#eab308; }
/* Configuración: pestañas alineadas y sin bordes */
[data-skin="w"] .tabs.cfg-tabs { justify-content:flex-start; background:transparent; padding:0; }
[data-skin="w"] .cfg-tabs .tab { border-radius:99px; padding:6px 12px; font-size:.8rem; background:var(--bg-surface); }
[data-skin="w"] .cfg-tabs .tab.active { background:var(--primary-glow); color:var(--primary); border-color:transparent; box-shadow:none; }
[data-skin="w"] .tabs { background:var(--neutral-bg); }
#p-guide-wrap[hidden] { display:none; }
/* Avisos del inicio: en el celular, una sola línea de contenido */
@media (max-width:640px) {
  [data-skin="w"] .home-news .news-item .row-sub:last-child, [data-skin="w"] .home-news .news-dots { display:none; }
  [data-skin="w"] .home-news .news-item { padding:6px 8px; }
  [data-skin="w"] .page-head { margin-bottom:10px; }
  [data-skin="w"] .page-head h1 { font-size:1.15rem; }
  [data-skin="w"] .wrap { padding-left:14px; padding-right:14px; }
}
@media (max-width:640px) {
  [data-skin="w"] .topbar { padding:0 10px; gap:4px; }
  [data-skin="w"] .brand-wordmark { display:none; }
  [data-skin="w"] .searchbox { width:36px; flex:0 0 36px; background:transparent; border-color:transparent; }
  [data-skin="w"] .topbar .btn-icon { width:36px; height:36px; min-width:36px; min-height:36px; }
}
body:has(#nav-menu) .chat-fab { display:none; }

/* --- v39: asistente con IA --- */
.ai-card { margin-top:14px; max-width:640px; }
.ai-title { margin:0; font-size:1rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-note { margin:12px 0; padding:10px 12px; border-radius:10px; background:var(--neutral-bg); font-size:.84rem; line-height:1.45; color:var(--text-sec); }
.tg-toggle { display:flex; gap:8px; align-items:flex-start; margin:12px 0; font-size:.88rem; cursor:pointer; }
.tg-toggle input { margin-top:3px; flex:none; }
.ai-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ai-usage { margin-top:14px; }
.ai-bar { height:6px; border-radius:99px; background:var(--neutral-bg); overflow:hidden; margin-top:6px; }
.ai-bar i { display:block; height:100%; background:var(--primary); }
.ai-test { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.ai-test-row { display:flex; gap:8px; }
.ai-test-row .input { flex:1; min-width:0; }
.ai-out { margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--neutral-bg); font-size:.78rem; white-space:pre-wrap; word-break:break-word; max-height:280px; overflow:auto; }

/* ============================================================
   v40 — ACUARELA (data-skin="w"): el único diseño de la app.
   Papel de algodón, lavados de pigmento transparentes (assets/wc) y tinta índigo.
   Títulos en Fraunces; texto en Source Sans 3. Los lavados tienen fondo transparente
   y se estiran sobre la caja: el borde irregular es parte del pigmento.
   ============================================================ */
[data-skin="w"] {
  --primary:#1f3a56; --primary-d:#16293e; --primary-lt:#4f7f86; --primary-glow:rgba(79,127,134,.16);
  --accent:#c0573d;
  --bg:#f6eedf; --bg-surface:#fdf8ee; --bg-elevated:#fffbf3; --bg-hover:#f1e6d2;
  --border:#e4d8c1; --border-strong:#cfbf9f;
  --text:#22303f; --text-sec:#46525f; --text-muted:#626a73;
  --success:#3f6e4c; --success-bg:#e2ebd9; --warning:#80590e; --warning-bg:#f8e9c6;
  --danger:#a13c26; --danger-bg:#f7ddd2; --neutral-bg:#efe5d2;
  --info:#2d6068; --info-bg:#dceae9;
  --shadow:0 1px 1px rgba(92,72,40,.05),0 3px 10px rgba(92,72,40,.06); --shadow-lg:0 14px 40px rgba(50,42,28,.2);
  --radius:12px; --radius-sm:9px;
  --font-body:'Source Sans 3','Source Sans Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-head:'Fraunces',Georgia,'Times New Roman',serif;
  --font-hand:var(--font-body);
  --wash-indigo:url(../assets/wc/wash-indigo.webp); --wash-teal:url(../assets/wc/wash-teal.webp); --wash-terra:url(../assets/wc/wash-terra.webp);
  --wash-ochre:url(../assets/wc/wash-ochre.webp); --wash-sage:url(../assets/wc/wash-sage.webp); --wash-peach:url(../assets/wc/wash-peach.webp); --wash-sky:url(../assets/wc/wash-sky.webp);
  --paper:url(../assets/wc/paper.webp);
}
[data-skin="w"][data-theme="dark"] {
  --primary:#9cc3c9; --primary-d:#b5d5da; --primary-lt:#c9e0e3; --primary-glow:rgba(156,195,201,.16);
  --accent:#e3926f;
  --bg:#171f2a; --bg-surface:#1f2935; --bg-elevated:#26313f; --bg-hover:#2d3a49;
  --border:#35434f; --border-strong:#4a5a68;
  --text:#f0e9db; --text-sec:#cbc6b8; --text-muted:#a3a79f;
  --success:#9cc7a3; --success-bg:#25382c; --warning:#e7c168; --warning-bg:#3b3118;
  --danger:#eea48c; --danger-bg:#43261d; --neutral-bg:#2d3a49;
  --info:#a6d3d6; --info-bg:#203a3f;
  --shadow:0 1px 3px rgba(0,0,0,.35); --shadow-lg:0 16px 44px rgba(0,0,0,.55);
}

/* --- Papel --- */
[data-skin="w"] body { font-family:var(--font-body); font-size:.95rem; line-height:1.5; background-color:var(--bg); background-image:var(--paper); background-size:420px; }
[data-skin="w"][data-theme="dark"] body { background-blend-mode:multiply; }
[data-skin="w"] .ico { width:1.15em; height:1.15em; vertical-align:-.2em; flex-shrink:0; }
[data-skin="w"] h1, [data-skin="w"] h2, [data-skin="w"] h3, [data-skin="w"] .modal-title, [data-skin="w"] .p-title, [data-skin="w"] .kstage-title, [data-skin="w"] .tk-case, [data-skin="w"] .ai-title, [data-skin="w"] .sd-title {
  font-family:var(--font-head); font-weight:500; letter-spacing:-.005em; color:var(--text); }
[data-skin="w"] h1 { font-size:1.55rem; line-height:1.2; font-weight:500; }
[data-skin="w"] .modal-title { font-size:1.22rem; }
[data-skin="w"] .section-title { font-family:var(--font-head); font-size:1rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text); }
[data-skin="w"] .label, [data-skin="w"] .p-facts dt, [data-skin="w"] .nav-dd-label { letter-spacing:.05em; font-weight:600; color:var(--text-muted); }
[data-skin="w"] a { color:var(--primary-lt); }
[data-skin="w"][data-theme="light"] a, [data-skin="w"]:not([data-theme]) a { color:#2d6068; }
[data-skin="w"] .btn, [data-skin="w"] a.btn { color:inherit; }
[data-skin="w"] .row-name, [data-skin="w"] .pcard-name { font-weight:600; }
[data-skin="w"] .text-overdue { color:var(--danger); }
[data-skin="w"] ::selection { background:rgba(79,127,134,.28); }

/* --- Tarjetas: hoja de papel apenas elevada --- */
[data-skin="w"] .card, [data-skin="w"] .pcard, [data-skin="w"] .kcard, [data-skin="w"] .hist-item {
  background-color:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
[data-skin="w"] .pcard { position:relative; overflow:hidden; padding-top:18px; }
[data-skin="w"] .pcard::before { content:''; position:absolute; left:0; right:0; top:0; height:9px; background:var(--wash-sky) center/100% 100% no-repeat; }
[data-skin="w"] .pcard:has(.st-en_desarrollo)::before { background-image:var(--wash-ochre); }
[data-skin="w"] .pcard:has(.st-terminado)::before { background-image:var(--wash-sage); }
[data-skin="w"] .pcard:has(.st-terminado_retomar)::before { background-image:var(--wash-peach); }
[data-skin="w"] .pcard:has(.st-sin_iniciar)::before { background-image:var(--wash-sky); }
[data-skin="w"] .pcard:hover, [data-skin="w"] .kcard:hover, [data-skin="w"] .tk-row:hover { border-color:var(--border-strong); box-shadow:0 2px 3px rgba(92,72,40,.07),0 6px 16px rgba(92,72,40,.09); }

/* --- Barra superior: papel con una pincelada de tinta --- */
[data-skin="w"] .topbar { background-color:var(--bg-surface); background-image:var(--paper); background-size:420px; border-bottom:0; position:sticky; }
[data-skin="w"][data-theme="dark"] .topbar { background-blend-mode:multiply; }
[data-skin="w"] .topbar::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:5px; background:var(--wash-teal) center/100% 100% no-repeat; opacity:.75; pointer-events:none; }
[data-skin="w"] .searchbox { background:var(--bg-elevated); border-color:var(--border); }
[data-skin="w"] .topbar .btn-icon:hover { background:var(--bg-hover); }
[data-skin="w"] .avatar, [data-skin="w"] .dot-user { filter:saturate(.72) brightness(.97); font-family:var(--font-body); }

/* --- Navegación --- */
@media (min-width:900px) {
  [data-skin="w"] #side-rail { background-color:var(--bg); background-image:var(--paper); background-size:420px; border-right:1px solid var(--border); padding-top:16px; }
  [data-skin="w"][data-theme="dark"] #side-rail { background-blend-mode:multiply; }
  [data-skin="w"] .rail-btn { position:relative; font:500 .92rem var(--font-body); background:transparent; isolation:isolate; }
  [data-skin="w"] .rail-btn:hover { background:var(--bg-hover); }
  [data-skin="w"] .rail-btn.cur, [data-skin="w"] .rail-btn.on { background:transparent; color:var(--text); font-weight:600; }
  [data-skin="w"] .rail-btn.cur::before, [data-skin="w"] .rail-btn.on::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--wash-sky) center/100% 100% no-repeat; }
  [data-skin="w"][data-theme="dark"] .rail-btn.cur::before, [data-skin="w"][data-theme="dark"] .rail-btn.on::before { background-image:var(--wash-teal); opacity:.75; }
}
@media (max-width:899px) {
  [data-skin="w"] #bottom-nav { background-color:var(--bg-surface); background-image:var(--paper); background-size:420px; border-top:0; box-shadow:0 -2px 12px rgba(92,72,40,.1); }
  [data-skin="w"][data-theme="dark"] #bottom-nav { background-blend-mode:multiply; }
  [data-skin="w"] #bottom-nav button { font:500 .72rem var(--font-body); color:var(--text-muted); position:relative; isolation:isolate; }
  [data-skin="w"] #bottom-nav button.cur { color:var(--text); font-weight:600; }
  [data-skin="w"] #bottom-nav button.cur::before { content:''; position:absolute; z-index:-1; left:50%; top:4px; width:48px; height:30px; transform:translateX(-50%); background:var(--wash-sky) center/100% 100% no-repeat; }
  [data-skin="w"][data-theme="dark"] #bottom-nav button.cur::before { background-image:var(--wash-teal); opacity:.75; }
}
[data-skin="w"] .dropdown, [data-skin="w"] .chat-launcher, [data-skin="w"] #side-drawer { background-color:var(--bg-elevated); background-image:var(--paper); background-size:420px; border-color:var(--border); box-shadow:var(--shadow-lg); }
[data-skin="w"][data-theme="dark"] .dropdown, [data-skin="w"][data-theme="dark"] .chat-launcher, [data-skin="w"][data-theme="dark"] #side-drawer { background-blend-mode:multiply; }
[data-skin="w"] .dd-item:hover { background:var(--bg-hover); }

/* --- Botones: pigmento sobre el papel --- */
[data-skin="w"] .btn { font-family:var(--font-body); font-weight:600; font-size:.9rem; border-radius:var(--radius-sm); }
[data-skin="w"] .btn-sm { font-size:.84rem; }
[data-skin="w"] .btn-primary, [data-skin="w"] a.btn-primary { background:var(--wash-indigo) center/104% 112% no-repeat, #1f3a56; color:#fdf8ee; border-color:transparent; }
[data-skin="w"] .btn-primary:hover { background:var(--wash-indigo) center/104% 112% no-repeat, #16293e; filter:brightness(.92); }
[data-skin="w"][data-theme="dark"] .btn-primary, [data-skin="w"][data-theme="dark"] a.btn-primary { background:var(--wash-teal) center/104% 112% no-repeat, #3f6d74; color:#fff; }
[data-skin="w"] .btn-secondary, [data-skin="w"] a.btn-secondary { background:var(--bg-elevated); color:var(--text); border-color:var(--border-strong); }
[data-skin="w"] .btn-secondary:hover { background:var(--bg-hover); }
[data-skin="w"] .btn-ghost { color:var(--text-sec); }
[data-skin="w"] .btn-danger { background:var(--wash-terra) center/104% 112% no-repeat, #c0573d; color:#fff; }
[data-skin="w"] .btn:disabled { opacity:.55; cursor:default; }
[data-skin="w"] .btn:focus-visible, [data-skin="w"] .btn-icon:focus-visible, [data-skin="w"] .fbtn:focus-visible, [data-skin="w"] .seg-tab:focus-visible, [data-skin="w"] .tk-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[data-skin="w"] .btn-icon { background:var(--bg-elevated); color:var(--text-sec); border-color:var(--border); }
[data-skin="w"] .btn-icon.active { background:var(--primary-glow); color:var(--text); border-color:var(--border-strong); }
[data-skin="w"] .fbtn { background:var(--bg-elevated); border-color:var(--border); color:var(--text-sec); font:500 .84rem var(--font-body); }
[data-skin="w"] .fbtn.active { background:var(--primary-glow); color:var(--text); border-color:var(--border-strong); }
[data-skin="w"] .chip { background:var(--bg-elevated); color:var(--text-sec); border-color:var(--border); font-size:.84rem; }
[data-skin="w"] .chip.on { background:var(--primary-glow); color:var(--text); border-color:var(--primary-lt); }
[data-skin="w"] .x-btn { color:var(--text-muted); border-radius:50%; width:32px; height:32px; display:grid; place-items:center; flex-shrink:0; }
[data-skin="w"] .x-btn:hover { background:var(--bg-hover); color:var(--text); }

/* --- Campos --- */
[data-skin="w"] .input, [data-skin="w"] textarea.input, [data-skin="w"] select.input { background:var(--bg-elevated); border-color:var(--border-strong); color:var(--text); font-size:.95rem; }
[data-skin="w"] .input:focus { border-color:var(--primary-lt); box-shadow:0 0 0 3px var(--primary-glow); }
[data-skin="w"] .input::placeholder, [data-skin="w"] textarea::placeholder { color:var(--text-muted); opacity:.85; }
[data-skin="w"] .checkbox { background:var(--bg-elevated); border-color:var(--border-strong); }
[data-skin="w"] .checkbox.done { background:var(--wash-sage) center/120% 120% no-repeat, #5f8a68; border-color:#6d8b70; }
[data-skin="w"] input[type="checkbox"], [data-skin="w"] input[type="range"], [data-skin="w"] input[type="radio"] { accent-color:#2d6068; }

/* --- Insignias --- */
[data-skin="w"] .badge { border-radius:99px; font-weight:600; font-size:.74rem; }
[data-skin="w"] .st-terminado_retomar { background:var(--info-bg); color:var(--info); }
[data-skin="w"] .count-pill, [data-skin="w"] .seg-count { background:var(--neutral-bg); color:var(--text-sec); }
[data-skin="w"] .seg-tab.on .seg-count { background:var(--primary-glow); color:var(--text); }
[data-skin="w"] .notif-badge { background:#c0573d; border-color:var(--bg-surface); font-family:var(--font-body); }

/* --- Pestañas --- */
[data-skin="w"] .seg-tabs { border-bottom:1px solid var(--border-strong); }
[data-skin="w"] .seg-tab { font:600 .92rem var(--font-body); color:var(--text-muted); position:relative; border-bottom:0; }
[data-skin="w"] .seg-tab.on { color:var(--text); }
[data-skin="w"] .seg-tab.on::after { content:''; position:absolute; left:6%; right:6%; bottom:-2px; height:6px; background:var(--wash-terra) center/100% 100% no-repeat; }
[data-skin="w"] .tabs { background:var(--neutral-bg); border-color:transparent; max-width:100%; flex-wrap:wrap; }
[data-skin="w"] .tab { color:var(--text-sec); font-size:.88rem; }
[data-skin="w"] .tab.active { background:var(--bg-elevated); color:var(--text); }
[data-skin="w"] .tabs.cfg-tabs { background:transparent; gap:6px; border:0; }
[data-skin="w"] .cfg-tabs .tab { background:var(--bg-elevated); border:1px solid var(--border); font-size:.84rem; }
[data-skin="w"] .cfg-tabs .tab.active { background:var(--primary-glow); color:var(--text); border-color:var(--primary-lt); }

/* --- Filas --- */
[data-skin="w"] .row:hover { background:var(--bg-hover); }
[data-skin="w"] .row-sub { color:var(--text-muted); font-size:.82rem; }
[data-skin="w"] .progress { background:var(--neutral-bg); border-radius:99px; overflow:hidden; }
[data-skin="w"] .progress > *, [data-skin="w"] .progress i { background:var(--wash-teal) center/100% 100% no-repeat, #4f7f86; }
[data-skin="w"] .status-dot.st-en_desarrollo { background:#d29a2e; }
[data-skin="w"] .status-dot.st-terminado { background:#6d8b70; }
[data-skin="w"] .status-dot.st-terminado_retomar { background:#4f7f86; }
[data-skin="w"] .task-name.task-u-active::before { background:#d29a2e; }
[data-skin="w"] .task-name.task-u-overdue::before { background:#c0573d; }

/* --- Inicio: paisaje detrás del saludo --- */
[data-skin="w"] .home-hero { position:relative; align-items:center; min-height:112px; padding:16px 18px; margin-bottom:12px; isolation:isolate; overflow:hidden; border-radius:var(--radius); background:rgba(255,251,243,.55); border:1px solid var(--border); }
[data-skin="w"][data-theme="dark"] .home-hero { background:rgba(38,49,63,.6); }
[data-skin="w"] .home-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:url(../assets/wc/hero.webp) right bottom/auto 118% no-repeat; }
[data-skin="w"] .home-hero .fbtn { background:rgba(255,251,243,.86); }
[data-skin="w"][data-theme="dark"] .home-hero .fbtn { background:rgba(38,49,63,.86); }
@media (max-width:640px) { [data-skin="w"] .home-hero { min-height:0; padding:12px 14px; } [data-skin="w"] .home-hero::before { opacity:.5; background-size:auto 130%; } }

/* --- Estados vacíos --- */
[data-skin="w"] .empty { color:var(--text-muted); font-style:normal; }
.empty-art { display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 18px; grid-column:1/-1; }
.empty-art img { width:96px; height:96px; object-fit:contain; opacity:.95; }
[data-theme="dark"] .empty-art img { opacity:.8; }
.empty-art span { max-width:44ch; text-wrap:balance; }
.modal .empty-art img, .dropdown .empty-art img { width:64px; height:64px; }

/* --- Ventanas --- */
[data-skin="w"] .overlay, [data-skin="w"] .cmd-overlay { background:rgba(34,48,63,.42); backdrop-filter:blur(2px); }
[data-skin="w"] .modal { background-color:var(--bg-elevated); background-image:var(--paper); background-size:420px; border-color:var(--border); border-radius:14px; }
[data-skin="w"][data-theme="dark"] .modal { background-blend-mode:multiply; }
[data-skin="w"] .modal-head { position:relative; margin:-26px -26px 18px; padding:20px 22px 16px 26px; align-items:center; gap:10px; border-radius:14px 14px 0 0; isolation:isolate; overflow:hidden; }
[data-skin="w"] .modal-head::before { content:''; position:absolute; inset:-4px; z-index:-1; background:var(--wash-sky) center/100% 100% no-repeat; opacity:.72; }
[data-skin="w"][data-theme="dark"] .modal-head::before { background-image:var(--wash-teal); opacity:.45; }
[data-skin="w"] .modal-title { margin:0; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width:640px) {
  [data-skin="w"] .overlay { padding:0; align-items:flex-end; }
  [data-skin="w"] .modal { max-width:none; min-height:0; max-height:94dvh; overflow-y:auto; border-radius:16px 16px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
  [data-skin="w"] .modal-head { margin:-20px -16px 14px; padding:16px; position:sticky; top:-20px; z-index:3; background-color:var(--bg-elevated); }
}
[data-skin="w"] .cmd { background-color:var(--bg-elevated); border-color:var(--border); border-radius:14px; }
[data-skin="w"] .cmd-input { font-family:var(--font-body); }
[data-skin="w"] .cmd-item .ic .ico { width:18px; height:18px; }
[data-skin="w"] .toast { background:var(--bg-elevated); color:var(--text); border-color:var(--border-strong); font-family:var(--font-body); font-size:.9rem; }
[data-skin="w"] .toast.success { border-left:4px solid #6d8b70; }
[data-skin="w"] .toast.error { border-left:4px solid #c0573d; }
[data-skin="w"] .toast.info { border-left:4px solid #4f7f86; }

/* --- Tablero: cada etapa, un pigmento --- */
[data-skin="w"] .kstage { background:rgba(255,251,243,.5); border:1px solid var(--border); box-shadow:none; overflow:hidden; }
[data-skin="w"][data-theme="dark"] .kstage { background:rgba(38,49,63,.5); }
[data-skin="w"] .kstage-head { position:relative; isolation:isolate; padding:12px 16px; border:0; overflow:hidden; background:transparent; }
[data-skin="w"] .kstage-head::before { display:block; content:''; position:absolute; inset:-3px; z-index:-1; background:var(--wash-teal) center/100% 100% no-repeat; }
[data-skin="w"] .kstage-title, [data-skin="w"] .kstage-head .count-pill, [data-skin="w"] .kstage-head .seg-count { color:#fff; }
[data-skin="w"] .kstage-head .count-pill, [data-skin="w"] .kstage-head .seg-count, [data-skin="w"] .kstage-head .badge { background:rgba(255,255,255,.24); color:#fff; }
[data-skin="w"] .kstage:nth-child(6n+2) .kstage-head::before { background-image:var(--wash-terra); }
[data-skin="w"] .kstage:nth-child(6n+3) .kstage-head::before { background-image:var(--wash-ochre); }
[data-skin="w"] .kstage:nth-child(6n+4) .kstage-head::before { background-image:var(--wash-sage); }
[data-skin="w"] .kstage:nth-child(6n+5) .kstage-head::before { background-image:var(--wash-indigo); }
[data-skin="w"] .kstage:nth-child(6n+6) .kstage-head::before { background-image:var(--wash-terra); filter:hue-rotate(-14deg) saturate(.8); }
[data-skin="w"] .kstage:nth-child(6n+3) .kstage-title { color:#2f2410; }
[data-skin="w"] .kstage:nth-child(6n+3) .kstage-head .count-pill, [data-skin="w"] .kstage:nth-child(6n+3) .kstage-head .seg-count { color:#2f2410; background:rgba(255,255,255,.4); }
[data-skin="w"] .kstage-body { padding:10px; }
[data-skin="w"] .kstage-empty { border-color:var(--border); }
@media (min-width:900px) { [data-skin="w"] .kstage { background:rgba(255,251,243,.5); } [data-skin="w"][data-theme="dark"] .kstage { background:rgba(38,49,63,.5); } }

/* --- Calendario --- */
[data-skin="w"] .cal-cell { background:var(--bg-surface); border-color:var(--border); border-radius:8px; }
[data-skin="w"] .cal-empty { background:transparent; border-color:transparent; }
[data-skin="w"] .cal-today { border-color:var(--border-strong); box-shadow:none; background:var(--wash-peach) center/110% 110% no-repeat, var(--bg-surface); }
[data-skin="w"] .cal-today .cal-num { color:var(--text); }
[data-skin="w"] .cal-cell.cal-sel { background:var(--wash-sky) center/110% 110% no-repeat, var(--bg-surface); border-color:var(--primary-lt); }
[data-skin="w"] .cal-item { background:var(--neutral-bg); color:var(--text); font-size:.74rem; }
[data-skin="w"] .cal-item .ico { width:11px; height:11px; }
[data-skin="w"] .cal-num { font-family:var(--font-head); font-weight:500; font-size:.86rem; }
[data-skin="w"] .cal-dow { font-family:var(--font-body); letter-spacing:.04em; }

/* --- Historial --- */
[data-skin="w"] .hist-item { overflow:hidden; }
[data-skin="w"] .ack-bar { background:var(--wash-peach) center/100% 100% no-repeat, var(--warning-bg); color:var(--text); border-color:var(--border); }
[data-skin="w"] .fp-mention { color:#2d6068; background:var(--info-bg); padding:0 4px; border-radius:4px; }
[data-skin="w"][data-theme="dark"] .fp-mention { color:var(--info); }

/* --- Mensajes --- */
[data-skin="w"] .chat-fab, [data-skin="w"] .agent-fab { box-shadow:0 5px 16px rgba(34,48,63,.32); }
[data-skin="w"] .chat-fab { background:var(--wash-indigo) center/135% 135% no-repeat, #1f3a56; color:#fdf8ee; }
[data-skin="w"][data-theme="dark"] .chat-fab { background:var(--wash-teal) center/135% 135% no-repeat, #3f6d74; }
[data-skin="w"] .msg { font-size:.94rem; }
[data-skin="w"] .msg.mine { background:var(--wash-indigo) center/104% 112% no-repeat, #1f3a56; color:#fdf8ee; }
[data-skin="w"][data-theme="dark"] .msg.mine { background:var(--wash-teal) center/104% 112% no-repeat, #3f6d74; }
[data-skin="w"] .msg.theirs { background:var(--bg-hover); }
[data-skin="w"] .msg.mine a { color:#fdf8ee; text-decoration:underline; }
[data-skin="w"] .dock-win { background:var(--bg-elevated); border-color:var(--border-strong); }
[data-skin="w"] .dock-head { background:var(--wash-indigo) center/104% 120% no-repeat, #1f3a56; color:#fdf8ee; }
[data-skin="w"][data-theme="dark"] .dock-head { background:var(--wash-teal) center/104% 120% no-repeat, #3f6d74; }
[data-skin="w"] .dock-head .ico { color:#fdf8ee; }
[data-skin="w"] .dock-input button { background:var(--wash-indigo) center/135% 135% no-repeat, #1f3a56; color:#fdf8ee; }
[data-skin="w"] .dock-input input { background:var(--bg-elevated); border-color:var(--border-strong); }
[data-skin="w"] .notif-item.unread { background:var(--primary-glow); }
[data-skin="w"] .home-news { background-color:var(--bg-surface); }

/* --- Acceso --- */
[data-skin="w"] .login-wrap { background:none; position:relative; overflow:hidden; }
[data-skin="w"] .login-wrap::before { content:''; position:absolute; left:max(-60px,calc(50% - 720px)); bottom:-30px; width:min(46vw,620px); aspect-ratio:640/712; background:url(../assets/wc/login.webp) left bottom/contain no-repeat; pointer-events:none; }
[data-skin="w"] .login-wrap::after { content:''; position:absolute; right:-30px; top:-20px; width:min(36vw,440px); aspect-ratio:609/340; background:url(../assets/wc/wave.webp) center/contain no-repeat; opacity:.55; transform:rotate(-4deg); pointer-events:none; }
[data-skin="w"] .login-wrap > * { position:relative; z-index:1; }
[data-skin="w"] .login-card { background:rgba(255,251,243,.92); border-color:var(--border); }
[data-skin="w"][data-theme="dark"] .login-card { background:rgba(38,49,63,.92); }
[data-skin="w"] .login-tenant { font-family:var(--font-head); font-weight:500; font-size:1.05rem; }
@media (max-width:860px) {
  [data-skin="w"] .login-wrap::before { left:50%; bottom:-40px; width:300px; transform:translateX(-50%); opacity:.3; }
  [data-skin="w"] .login-wrap::after { width:240px; right:-40px; top:-10px; }
}

/* --- Avisos de la app --- */
.wc-notice { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; margin-bottom:14px; border-radius:10px; background:var(--warning-bg); color:var(--text); font-size:.9rem; line-height:1.4; }
.wc-notice .ico { margin-top:2px; }

/* --- Tickets --- */
.tk-tabs { margin-top:6px; }
.tk-list { display:flex; flex-direction:column; gap:10px; }
.tk-row { position:relative; padding:13px 16px 12px 20px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; overflow:hidden; min-width:0; }
.tk-row::before, .tk-head::before { content:''; position:absolute; left:0; top:0; bottom:0; width:9px; background:var(--wash-sky) center/100% 100% no-repeat; }
.tk-p-baja::before { background-image:var(--wash-sage); }
.tk-p-normal::before { background-image:var(--wash-sky); }
.tk-p-urgente::before { background-image:var(--wash-ochre); }
.tk-p-muy_urgente::before { background-image:var(--wash-terra); }
.tk-row-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tk-case { font-size:1.02rem; font-weight:500; margin-right:2px; }
.tk-due { font-size:.82rem; color:var(--text-muted); margin-left:auto; white-space:nowrap; }
.tk-row-name { font-weight:600; margin-top:6px; overflow-wrap:anywhere; }
.tk-row-body { color:var(--text-sec); font-size:.9rem; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.tk-row-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
.tk-avs { display:inline-flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; }
.tk-st-recibida { background:var(--info-bg); color:var(--info); }
.tk-st-acusada { background:var(--neutral-bg); color:var(--text-sec); }
.tk-st-en_desarrollo { background:var(--warning-bg); color:var(--warning); }
.tk-st-info_requerida { background:#f9e2d0; color:#8f4a1d; }
[data-theme="dark"] .tk-st-info_requerida { background:#43301d; color:#f0bf8c; }
.tk-st-resuelta { background:var(--success-bg); color:var(--success); }
.tk-st-reabierta { background:var(--danger-bg); color:var(--danger); }
.tk-st-descartada { background:var(--neutral-bg); color:var(--text-muted); }
.tk-pr-baja { background:var(--success-bg); color:var(--success); }
.tk-pr-normal { background:var(--info-bg); color:var(--info); }
.tk-pr-urgente { background:var(--warning-bg); color:var(--warning); }
.tk-pr-muy_urgente { background:var(--danger-bg); color:var(--danger); }
.tk-int { background:var(--neutral-bg); color:var(--text-sec); }
.tk-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.tk-main, .tk-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
.tk-head { position:relative; padding:18px 20px 18px 24px; overflow:hidden; }
.tk-title { margin:0; font-size:1.35rem; margin-right:4px; }
.tk-from { margin-top:8px; font-size:.9rem; color:var(--text-sec); overflow-wrap:anywhere; }
.tk-body { margin-top:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.tk-why { margin-top:12px; padding:10px 12px; border-radius:9px; background:var(--warning-bg); font-size:.92rem; overflow-wrap:anywhere; }
.tk-sub { margin:0 0 10px; font-size:1rem; }
.tk-compose .seg-tabs { margin-bottom:10px; }
.tk-actions { display:flex; flex-direction:column; gap:7px; }
.tk-actions .btn { width:100%; white-space:normal; }
.tk-inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.tk-checks { display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; }
.tk-check { display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:7px; font-size:.9rem; cursor:pointer; min-width:0; }
.tk-check:hover { background:var(--bg-hover); }
.tk-check span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-check input { flex:none; }
.tk-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tk-ev { display:flex; gap:10px; min-width:0; }
.tk-ev-ic { flex:none; width:30px; height:30px; display:grid; place-items:center; background:var(--wash-sky) center/100% 100% no-repeat; color:var(--text); }
.tk-ev.from-req .tk-ev-ic { background-image:var(--wash-peach); }
.tk-ev.internal .tk-ev-ic { background-image:var(--wash-ochre); }
.tk-ev-main { flex:1; min-width:0; }
.tk-ev-head { display:flex; gap:4px 8px; flex-wrap:wrap; align-items:baseline; font-size:.92rem; }
.tk-ev-head .row-sub { white-space:normal; }
.tk-ev-dates { font-size:.9rem; margin-top:2px; }
.tk-ev-msg { margin-top:5px; padding:8px 11px; border-radius:9px; background:var(--bg-hover); white-space:pre-wrap; overflow-wrap:anywhere; font-size:.93rem; }
.tk-ev.internal .tk-ev-msg { background:var(--warning-bg); }
.tk-mail { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px; font-size:.78rem; color:var(--text-muted); }
.tk-mail.ok { color:var(--success); }
.tk-mail.bad { color:var(--danger); }
.tk-cfg { max-width:720px; margin-bottom:14px; }
.tc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 14px; }
.tf-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.tf-row:first-child { border-top:0; }
.tf-row.off { opacity:.7; }
.tf-main { min-width:0; flex:1 1 240px; }
.tf-url { font-size:.76rem; color:var(--text-muted); overflow-wrap:anywhere; }
.tf-acts { display:flex; gap:6px; flex-shrink:0; }
.tf-foot { margin-top:6px; }
@media (max-width:980px) { .tk-layout { grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px) {
  .tk-tabs { display:flex; grid-auto-flow:unset; }
  .tk-tabs .seg-tab { flex:0 0 auto; padding:10px 9px; }
  .tk-row { padding-right:13px; }
  .tk-due { margin-left:0; width:100%; }
  .page-actions .btn span { display:none; }
  .tk-head { padding:15px 14px 15px 20px; }
}

/* --- Agente de IA --- */
.agent-fab { position:fixed; right:18px; bottom:84px; z-index:210; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:var(--wash-terra) center/135% 135% no-repeat, #c0573d; color:#fff; }
.agent-fab .ico { width:23px; height:23px; }
body.modal-open .agent-fab, body.agent-open .agent-fab, body:has(#nav-menu) .agent-fab { display:none; }
.agent-win { position:fixed; right:18px; bottom:18px; z-index:220; width:392px; height:min(620px,calc(100dvh - 90px)); display:flex; flex-direction:column; background-color:var(--bg-elevated); background-image:var(--paper); background-size:420px; border:1px solid var(--border-strong); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; }
[data-theme="dark"] .agent-win { background-blend-mode:multiply; }
.agent-win[hidden] { display:none; }
.ag-head { display:flex; align-items:center; gap:6px; padding:11px 10px 11px 16px; background:var(--wash-terra) center/104% 120% no-repeat, #c0573d; color:#fff; flex-shrink:0; }
.ag-title { flex:1; font-family:var(--font-head); font-size:1.05rem; font-weight:500; display:flex; align-items:center; gap:7px; }
.ag-btn { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; }
.ag-btn:hover { background:rgba(255,255,255,.18); }
.ag-list { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; overscroll-behavior:contain; }
.ag-msg { max-width:86%; padding:9px 13px; border-radius:13px; font-size:.94rem; line-height:1.42; white-space:pre-wrap; overflow-wrap:anywhere; }
.ag-msg.mine { align-self:flex-end; background:var(--wash-indigo) center/104% 112% no-repeat, #1f3a56; color:#fdf8ee; border-bottom-right-radius:4px; }
[data-theme="dark"] .ag-msg.mine { background:var(--wash-teal) center/104% 112% no-repeat, #3f6d74; }
.ag-msg.theirs { align-self:flex-start; background:var(--bg-hover); color:var(--text); border-bottom-left-radius:4px; }
.ag-msg.err { background:var(--danger-bg); color:var(--danger); }
.ag-hello { text-align:center; margin:auto 0; padding:6px; color:var(--text-sec); font-size:.93rem; }
.ag-hello img { width:88px; height:auto; }
.ag-hello p { margin:8px 0 12px; text-wrap:balance; }
.ag-tips { display:flex; flex-direction:column; gap:6px; }
.ag-tips button { padding:8px 11px; border:1px solid var(--border-strong); border-radius:9px; background:var(--bg-elevated); color:var(--text); font:500 .88rem var(--font-body); cursor:pointer; text-align:left; }
.ag-tips button:hover { background:var(--bg-hover); }
.ag-typing { align-self:flex-start; display:flex; gap:4px; padding:12px 14px; border-radius:13px; background:var(--bg-hover); }
.ag-typing i { width:7px; height:7px; border-radius:50%; background:var(--text-muted); animation:ag-dot 1s infinite; }
.ag-typing i:nth-child(2) { animation-delay:.15s; } .ag-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes ag-dot { 0%,60%,100% { opacity:.3; } 30% { opacity:1; } }
.ag-pending { align-self:stretch; padding:11px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--bg-elevated); font-size:.91rem; }
.ag-pending ul { margin:0 0 10px; padding-left:18px; overflow-wrap:anywhere; }
.ag-pend-btns { display:flex; justify-content:flex-end; gap:6px; }
.ag-form { display:flex; gap:7px; align-items:flex-end; padding:10px; border-top:1px solid var(--border); flex-shrink:0; background:var(--bg-elevated); }
.ag-form textarea { flex:1; min-width:0; resize:none; max-height:120px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:11px; background:var(--bg-surface); color:var(--text); font:400 .95rem/1.35 var(--font-body); outline:none; }
.ag-form textarea:focus { border-color:var(--primary-lt); box-shadow:0 0 0 3px var(--primary-glow); }
.ag-send { flex:none; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:var(--wash-indigo) center/135% 135% no-repeat, #1f3a56; color:#fdf8ee; }
[data-theme="dark"] .ag-send { background:var(--wash-teal) center/135% 135% no-repeat, #3f6d74; }
@media (max-width:899px) { .agent-fab { bottom:calc(128px + env(safe-area-inset-bottom)); right:16px; } #to-top { bottom:calc(186px + env(safe-area-inset-bottom)); } }
@media (max-width:640px) {
  .agent-win { inset:0; width:auto; height:100dvh; border:0; border-radius:0; z-index:330; }
  .ag-head { padding-top:calc(11px + env(safe-area-inset-top)); }
  .ag-form { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .ag-form textarea { font-size:16px; }
}

/* --- Lo que se ve en cualquier ancho --- */
[data-skin="w"] #to-top { background:var(--bg-elevated); color:var(--text-sec); border:1px solid var(--border-strong); }
[data-skin="w"] .sk-box, [data-skin="w"] .sk-line { background:var(--neutral-bg); }
[data-skin="w"] .sv-hint { background:var(--bg-elevated); }
@media print { [data-skin="w"] body { background-image:none; } .agent-fab, .agent-win { display:none !important; } }

/* --- Ajustes tras revisar en pantalla: más pigmento, papel más fino --- */
[data-skin="w"] body, [data-skin="w"] .topbar, [data-skin="w"] #side-rail, [data-skin="w"] #bottom-nav, [data-skin="w"] .modal, [data-skin="w"] .dropdown, [data-skin="w"] .chat-launcher, [data-skin="w"] #side-drawer, .agent-win { background-size:300px; }
[data-skin="w"] .btn-primary, [data-skin="w"] a.btn-primary, [data-skin="w"] .chat-fab, .ag-send, [data-skin="w"] .msg.mine, .ag-msg.mine, [data-skin="w"] .dock-head, [data-skin="w"] .dock-input button { background-color:#2b4a68; }
[data-skin="w"] .home-hero { background:rgba(255,251,243,.5); min-height:128px; }
[data-skin="w"] .home-hero::before { background:url(../assets/wc/hero.webp) right 58%/78% auto no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 62%); mask-image:linear-gradient(90deg,transparent 24%,#000 62%); }
[data-skin="w"] .home-news .news-item, [data-skin="w"] .news-item { background:var(--wash-peach) center/102% 108% no-repeat; }
[data-skin="w"][data-theme="dark"] .news-item { background:var(--bg-hover); }
[data-skin="w"] .tgroup-head { font-family:var(--font-head); font-size:.98rem; font-weight:500; color:var(--text); }
[data-skin="w"] .tgroup-head.danger { color:var(--danger); }
[data-skin="w"] .chip.on, [data-skin="w"] .fbtn.active { background:var(--wash-sky) center/108% 125% no-repeat, var(--bg-elevated); border-color:transparent; }
[data-skin="w"][data-theme="dark"] .chip.on, [data-skin="w"][data-theme="dark"] .fbtn.active { background:var(--primary-glow); border-color:var(--border-strong); }
[data-skin="w"] .pcard { padding-top:24px; }
[data-skin="w"] .pcard::before { height:15px; top:-1px; left:-1px; right:-1px; }
[data-skin="w"] .pgroup-head { font-family:var(--font-head); font-size:1rem; font-weight:500; }
@media (min-width:1180px) {
  [data-skin="w"] #side-rail::after { content:''; position:absolute; left:0; right:0; bottom:44px; height:120px; background:url(../assets/wc/corner.webp) left bottom/contain no-repeat; opacity:.62; pointer-events:none; z-index:-1; }
  [data-skin="w"] #side-rail { isolation:isolate; }
  [data-skin="w"][data-theme="dark"] #side-rail::after { opacity:.3; }
}
[data-skin="w"] .sk-box { border-radius:10px; }
[data-skin="w"] .rte-btn .ico, [data-skin="w"] .btn-icon .ico { width:17px; height:17px; }
[data-skin="w"] .msg-meta { opacity:.82; }

/* --- Correcciones tras la revisión en pantalla --- */
[data-skin="w"] .kstage-head::before { width:auto; height:auto; left:-3px; right:-3px; top:-3px; bottom:-3px; border-radius:0; }
[data-skin="w"] .kstage-head { min-height:46px; }
@media (max-width:640px) {
  [data-skin="w"] .searchbox { width:auto; flex:1 1 auto; background:var(--bg-elevated); border-color:var(--border); }
  [data-skin="w"] .topbar .searchbox { width:36px; flex:0 0 36px; background:transparent; border-color:transparent; }
  [data-skin="w"] .home-hero::before { opacity:.32; }
  [data-skin="w"] .news-nav { min-width:32px; min-height:32px; }
  [data-skin="w"] .pj-search { flex:1 1 100%; max-width:none; }
}
@media (max-width:640px) { [data-skin="w"] .news-rm { min-width:30px; min-height:30px; } }

/* ============================================================
   v41 — ESTUDIO: la app como un taller de arte. Hojas de algodón sobre una pared de yeso,
   clavadas con tachuelas, con obra de acuarela y trazo de lápiz. Mucho aire, pocos elementos.
   ============================================================ */
[data-skin="w"] {
  --graphite:rgba(58,60,62,.42); --graphite-soft:rgba(58,60,62,.22);
  --sk:13px 16px 12px 15px/15px 12px 16px 13px; --sk-sm:9px 11px 8px 10px/10px 8px 11px 9px;
  --text-muted:#585f68; --bg-hover:#f4ead8;
  --wall:url(../assets/wc/wall.webp);
  --pencil-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.3C70 2 150 4.3 240 3.1S430 2.2 520 3.6 590 3 599 3.2' fill='none' stroke='%233a3c3e' stroke-opacity='.55' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pencil-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 600' preserveAspectRatio='none'%3E%3Cpath d='M3.2 1C2 80 4.2 170 3 260S2.2 440 3.6 520 3 590 3.2 599' fill='none' stroke='%233a3c3e' stroke-opacity='.5' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
[data-skin="w"][data-theme="dark"] {
  --graphite:rgba(232,226,212,.34); --graphite-soft:rgba(232,226,212,.16); --text-muted:#aeb2aa; --bg-hover:#2d3a49;
  --pencil-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.3C70 2 150 4.3 240 3.1S430 2.2 520 3.6 590 3 599 3.2' fill='none' stroke='%23e8e2d4' stroke-opacity='.4' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pencil-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 600' preserveAspectRatio='none'%3E%3Cpath d='M3.2 1C2 80 4.2 170 3 260S2.2 440 3.6 520 3 590 3.2 599' fill='none' stroke='%23e8e2d4' stroke-opacity='.36' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* --- La pared --- */
[data-skin="w"] body { background-color:#e7dbc6; background-image:var(--wall); background-size:400px; }
[data-skin="w"][data-theme="dark"] body { background-color:#141b25; background-blend-mode:multiply; }
[data-skin="w"] .ico { stroke-width:1.4; }
[data-skin="w"] #view { animation:st-in .28s ease-out; }
@keyframes st-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { [data-skin="w"] #view, [data-skin="w"] .modal { animation:none; } [data-skin="w"] * { transition:none !important; } }

/* --- Hojas: papel con contorno de lápiz --- */
[data-skin="w"] .card, [data-skin="w"] .pcard, [data-skin="w"] .kcard, [data-skin="w"] .hist-item, .tk-row {
  background-color:var(--bg-surface); border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 1px 1px rgba(70,54,28,.06),0 8px 22px -12px rgba(70,54,28,.28); }
[data-skin="w"] .pcard, [data-skin="w"] .kcard, .tk-row { transition:transform .16s ease, box-shadow .16s ease; }
[data-skin="w"] .pcard:hover, [data-skin="w"] .kcard:hover, .tk-row:hover { transform:translateY(-2px); border-color:var(--graphite); box-shadow:0 2px 3px rgba(70,54,28,.08),0 14px 26px -12px rgba(70,54,28,.36); }
[data-skin="w"] .kcard:hover { transform:translateY(-2px) !important; }

/* --- Tachuela: el único adorno --- */
.st-pin::after, [data-skin="w"] .modal::before, [data-skin="w"] .login-card::before, .tp-sheet::before {
  content:''; display:block !important; position:absolute; left:50%; top:-7px; width:15px; height:15px; margin-left:-7px; border:0; border-radius:50%; z-index:4; pointer-events:none; transform:none;
  background:radial-gradient(circle at 36% 32%,#f0d6a4 0 12%,#c79a55 34%,#8d6429 72%,#6d4b1c 100%); box-shadow:1px 3px 4px rgba(40,30,12,.42); }
.st-pin.pin-copper::after { background:radial-gradient(circle at 36% 32%,#f2bfa2 0 12%,#c9704d 36%,#94472a 74%,#6f3219 100%); }
.st-pin.pin-coal::after { background:radial-gradient(circle at 36% 32%,#8b8f96 0 10%,#4b4f55 36%,#2b2e33 76%,#1b1d21 100%); }

/* --- Barra superior y lateral: tiras de papel con línea de lápiz --- */
[data-skin="w"] .topbar { background-color:var(--bg-surface); background-image:var(--paper); background-size:300px; box-shadow:0 2px 10px -4px rgba(70,54,28,.22); }
[data-skin="w"] .topbar::after { height:6px; bottom:-3px; background:var(--pencil-h) center/100% 100% no-repeat; opacity:1; }
[data-skin="w"] .searchbox { border:1.1px solid var(--graphite-soft); border-radius:var(--sk-sm); }
[data-skin="w"] .topbar .btn-icon .ico { width:21px; height:21px; }
[data-skin="w"] .topbar #tb-new { border-radius:var(--sk-sm); }
@media (min-width:900px) {
  [data-skin="w"] #side-rail { background-color:var(--bg-surface); background-image:var(--paper); background-size:300px; border-right:0; padding:18px 10px; gap:5px; box-shadow:2px 0 10px -5px rgba(70,54,28,.22); }
  [data-skin="w"] #side-rail::before { content:''; position:absolute; top:0; bottom:0; right:-3px; width:6px; background:var(--pencil-v) center/100% 100% no-repeat; pointer-events:none; }
  [data-skin="w"] .rail-btn { height:42px; border:1.1px solid transparent; border-radius:var(--sk-sm); }
  [data-skin="w"] .rail-btn .rail-ic .ico { width:22px; height:22px; }
  [data-skin="w"] .rail-btn:hover { background:transparent; border-color:var(--graphite-soft); }
  [data-skin="w"] .rail-btn.cur, [data-skin="w"] .rail-btn.on { border-color:var(--graphite); }
  [data-skin="w"] .rail-btn.cur::before, [data-skin="w"] .rail-btn.on::before { inset:2px; opacity:.8; }
  [data-skin="w"] #side-rail::after { bottom:50px; height:128px; opacity:.72; }
  [data-skin="w"] .wrap { padding:28px 34px 72px; }
  [data-skin="w"] #view { max-width:1160px; }
}
@media (max-width:899px) {
  [data-skin="w"] #bottom-nav { background-color:var(--bg-surface); background-image:var(--paper); background-size:300px; box-shadow:0 -3px 12px -5px rgba(70,54,28,.25); }
  [data-skin="w"] #bottom-nav::before { content:''; position:absolute; left:0; right:0; top:-3px; height:6px; background:var(--pencil-h) center/100% 100% no-repeat; pointer-events:none; }
  [data-skin="w"] #bottom-nav button .ico { width:23px; height:23px; }
}

/* --- Portada de cada sección: una obra en la pared --- */
.wc-banner { position:relative; display:flex !important; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; min-height:150px; padding:30px 34px !important; margin-bottom:22px !important; background-color:var(--bg-surface); border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 1px 1px rgba(70,54,28,.06),0 10px 26px -14px rgba(70,54,28,.34); isolation:isolate; }
.wc-banner::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-repeat:no-repeat; background-position:right center; background-size:auto 104%; }
.wc-banner[data-art="sun"]::before { background-image:url(../assets/wc/bn-sun.webp); background-size:100% 100%; background-position:center; }
.wc-banner[data-art="mist"]::before { background-image:url(../assets/wc/bn-mist.webp); }
.wc-banner[data-art="dune"]::before { background-image:url(../assets/wc/bn-dune.webp); background-size:100% 100%; }
.wc-banner[data-art="hills"]::before { background-image:url(../assets/wc/bn-hills.webp); background-position:right bottom; }
.wc-banner[data-art="moon"]::before { background-image:url(../assets/wc/bn-moon.webp); }
.wc-banner[data-art="branch"]::before { background-image:url(../assets/wc/bn-branch.webp); }
.wc-banner[data-art="rings"]::before { background-image:url(../assets/wc/bn-rings.webp); }
.wc-banner > * { position:relative; min-width:0; }
.wc-banner h1 { margin:0 !important; font-size:2.15rem !important; line-height:1.12; font-weight:400; letter-spacing:-.012em; }
.wc-banner .page-sub, .wc-banner .row-sub { font-size:.95rem; margin-top:5px; white-space:normal; color:var(--text-sec); }
.wc-banner[data-art="sun"] h1, .wc-banner[data-art="sun"] .page-sub, .wc-banner[data-art="sun"] .row-sub { color:#fffaf2; text-shadow:0 1px 8px rgba(120,50,28,.4); }
.wc-banner a.btn-ghost[href="#/inicio"] { display:none; }
.wc-banner .btn, .wc-banner .fbtn { position:relative; }
.wc-banner .fbtn { background:rgba(255,251,243,.88); }
[data-theme="dark"] .wc-banner .fbtn { background:rgba(38,49,63,.88); }
[data-skin="w"] .home-hero { background:var(--bg-surface); }
[data-skin="w"] .home-hero::before { -webkit-mask-image:none; mask-image:none; }
@media (max-width:760px) {
  .wc-banner { min-height:104px; padding:20px 18px !important; margin-bottom:16px !important; }
  .wc-banner h1 { font-size:1.6rem !important; }
  .wc-banner::before { opacity:.62; background-size:auto 92%; }
  .wc-banner[data-art="sun"]::before, .wc-banner[data-art="dune"]::before { opacity:1; background-size:100% 100%; }
}

/* --- Puntos de color del inicio --- */
.home-dabs { display:flex; gap:14px; margin:0 0 22px; flex-wrap:wrap; }
.home-dab { display:flex; align-items:center; gap:10px; border:0; background:none; padding:0; cursor:pointer; color:var(--text); font:500 .92rem var(--font-body); }
.home-dab b { display:grid; place-items:center; width:54px; height:54px; border-radius:48% 52% 50% 50%/52% 48% 52% 48%; font:400 1.4rem var(--font-head); background-size:165%; background-position:center; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .16s ease; }
.home-dab:hover b { transform:scale(1.06); }
.home-dab.d-terra b { background-image:var(--wash-terra); background-color:#c9674b; }
.home-dab.d-ochre b { background-image:var(--wash-ochre); background-color:#dda63a; color:#2f2410; }
.home-dab.d-teal b { background-image:var(--wash-teal); background-color:#4f7f86; }
.home-dab.d-indigo b { background-image:var(--wash-indigo); background-color:#1f3a56; }
@media (max-width:560px) { .home-dabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; } .home-dab { flex-direction:column; gap:5px; font-size:.78rem; text-align:center; } .home-dab b { width:50px; height:50px; font-size:1.25rem; } }

/* --- Proyectos: una pequeña galería --- */
[data-skin="w"] .pcard { padding:0 0 14px; overflow:hidden; gap:10px; }
[data-skin="w"] .pcard::before { display:none; }
[data-skin="w"] .pcard > *:not(.pcard-art) { margin-left:15px; margin-right:15px; }
.pcard-art { height:92px; background-size:cover; background-position:center; border-bottom:1.1px solid var(--graphite-soft); }
[data-theme="dark"] .pcard-art { filter:brightness(.82); }
[data-skin="w"] .pcard-name { font-family:var(--font-head); font-size:1.08rem; font-weight:500; line-height:1.22; }
[data-skin="w"] .pgrid { gap:18px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
[data-skin="w"] .pgrid.list { gap:8px; grid-template-columns:1fr; }
[data-skin="w"] .pgrid.list .pcard { padding:10px 14px; gap:8px; }
[data-skin="w"] .pgrid.list .pcard > * { margin-left:0; margin-right:0; }
[data-skin="w"] .pgrid.list .pcard-art { display:none; }
@media (max-width:640px) { .pcard-art { height:76px; } [data-skin="w"] .pgrid { grid-template-columns:1fr; } }

/* --- Ventana de proyecto: portada con obra --- */
[data-skin="w"] .p-head { position:relative; padding:26px 28px 20px; isolation:isolate; overflow:visible; }
[data-skin="w"] .p-head::before { content:''; position:absolute; left:0; right:0; top:0; height:150px; z-index:-1; border-radius:inherit; background-repeat:no-repeat; background-position:right top; background-size:auto 100%; }
[data-skin="w"] .p-head[data-art="sun"]::before { background-image:url(../assets/wc/bn-rings.webp); }
[data-skin="w"] .p-head[data-art="mist"]::before { background-image:url(../assets/wc/bn-mist.webp); }
[data-skin="w"] .p-head[data-art="dune"]::before { background-image:url(../assets/wc/bn-dune.webp); opacity:.8; background-size:100% 100%; }
[data-skin="w"] .p-head[data-art="hills"]::before { background-image:url(../assets/wc/bn-hills.webp); }
[data-skin="w"] .p-head[data-art="moon"]::before { background-image:url(../assets/wc/bn-moon.webp); }
[data-skin="w"] .p-head[data-art="branch"]::before { background-image:url(../assets/wc/bn-branch.webp); }
[data-skin="w"] .p-head[data-art="rings"]::before { background-image:url(../assets/wc/bn-rings.webp); }
[data-skin="w"] .p-title { font-size:2rem; font-weight:400; line-height:1.14; letter-spacing:-.012em; }
[data-skin="w"] .p-head-actions .btn-icon { background:rgba(255,251,243,.85); border:1.1px solid var(--graphite-soft); }
[data-theme="dark"] .p-head-actions .btn-icon { background:rgba(38,49,63,.85); }
[data-skin="w"] .p-facts { margin-top:44px; border-top:0; position:relative; }
[data-skin="w"] .p-facts::before { content:''; position:absolute; left:0; right:0; top:-3px; height:6px; background:var(--pencil-h) center/100% 100% no-repeat; }
@media (max-width:640px) { [data-skin="w"] .p-head { padding:20px 16px 16px; } [data-skin="w"] .p-title { font-size:1.5rem; } [data-skin="w"] .p-facts { margin-top:22px; } [data-skin="w"] .p-head::before { opacity:.55; height:110px; } }

/* --- Trazo de lápiz en lo que separa --- */
[data-skin="w"] .seg-tabs { border-bottom:0; position:relative; padding-bottom:3px; overflow-y:hidden; }
[data-skin="w"] .seg-tabs { background:var(--pencil-h) left bottom/100% 5px no-repeat; }
[data-skin="w"] .seg-tab { font-size:.95rem; }
[data-skin="w"] .seg-tab.on::after { bottom:0; height:7px; }
[data-skin="w"] .divider { height:6px; border:0; background:var(--pencil-h) center/100% 100% no-repeat; }
[data-skin="w"] .tgroup-head { font-size:1.05rem; }
[data-skin="w"] .tgroup-list { padding:2px 4px; }
[data-skin="w"] .tgroup-list .row + .row { border-top:0; background:var(--pencil-h) top/100% 4px no-repeat; }
[data-skin="w"] .tgroup-list .row:hover { background-color:var(--bg-hover); }
[data-skin="w"] .tk-sub, [data-skin="w"] .section-title { font-size:1.08rem; }

/* --- Controles dibujados --- */
[data-skin="w"] .btn { border-radius:var(--sk-sm); }
[data-skin="w"] .btn-primary, [data-skin="w"] a.btn-primary { box-shadow:0 2px 6px -2px rgba(20,36,54,.5); background-size:112% 150%; }
[data-skin="w"] .btn-primary:hover { transform:translateY(-1px); }
[data-skin="w"] .btn-secondary, [data-skin="w"] a.btn-secondary { background:var(--bg-elevated); border:1.1px solid var(--graphite); }
[data-skin="w"] .btn-secondary:hover { background:var(--bg-hover); }
[data-skin="w"] .btn-icon { border:1.1px solid var(--graphite-soft); border-radius:var(--sk-sm); }
[data-skin="w"] .topbar .btn-icon { border-color:transparent; }
[data-skin="w"] .topbar .btn-icon:hover { border-color:var(--graphite-soft); background:transparent; }
[data-skin="w"] .fbtn, [data-skin="w"] .chip { border:1.1px solid var(--graphite-soft); border-radius:var(--sk-sm); }
[data-skin="w"] .chip.on, [data-skin="w"] .fbtn.active { border-color:var(--graphite); }
[data-skin="w"] .input, [data-skin="w"] textarea.input, [data-skin="w"] select.input, .ag-form textarea, [data-skin="w"] .dock-input input { border:1.1px solid var(--graphite); border-radius:var(--sk-sm); }
[data-skin="w"] .input:focus { border-color:rgba(58,60,62,.8); box-shadow:0 0 0 3px rgba(79,127,134,.16); }
[data-skin="w"] .checkbox { width:22px; height:22px; border:1.4px solid rgba(58,60,62,.6); border-radius:7px 5px 8px 6px/6px 8px 5px 7px; }
[data-skin="w"][data-theme="dark"] .checkbox { border-color:rgba(232,226,212,.5); }
[data-skin="w"] .checkbox:hover { background:var(--wash-sky) center/130% no-repeat, var(--bg-elevated); }
[data-skin="w"] .badge { border-radius:9px 11px 8px 10px/10px 8px 11px 9px; }
[data-skin="w"] .avatar, [data-skin="w"] .dot-user { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }

/* --- Ventanas: una hoja clavada --- */
[data-skin="w"] .modal { position:relative; border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 26px 60px -20px rgba(40,30,12,.55); overflow:visible; animation:st-pop .2s ease-out; }
@keyframes st-pop { from { opacity:0; transform:translateY(10px) rotate(-.4deg); } to { opacity:1; transform:none; } }
[data-skin="w"] .overlay { background:rgba(40,36,28,.44); }
[data-skin="w"] .modal-head { padding-top:24px; overflow:hidden; border-radius:var(--sk) var(--sk) 0 0; }
[data-skin="w"] .modal-head::before { opacity:.55; inset:0 -8px -5px; background-size:100% 100%; }
[data-skin="w"] .modal-title { font-size:1.4rem; font-weight:400; }
[data-skin="w"] .dropdown { border:1.1px solid var(--graphite); border-radius:var(--sk); }
[data-skin="w"] .cmd { border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 26px 60px -20px rgba(40,30,12,.55); }
[data-skin="w"] .toast { border-radius:var(--sk-sm); }
@media (max-width:640px) {
  [data-skin="w"] .modal { overflow-y:auto; border-radius:18px 18px 0 0; }
  [data-skin="w"] .modal::before { display:none !important; }
  [data-skin="w"] .modal-head { border-radius:18px 18px 0 0; }
}

/* --- Tablero --- */
[data-skin="w"] .kstage { border:1.1px solid var(--graphite-soft); border-radius:var(--sk); background:rgba(253,248,238,.42); }
[data-skin="w"][data-theme="dark"] .kstage { background:rgba(31,41,53,.5); }
@media (min-width:900px) { [data-skin="w"] .kstage { background:rgba(253,248,238,.42); } }
[data-skin="w"] .kstage-head { min-height:54px; padding:14px 16px; }
[data-skin="w"] .kstage-title { font-size:1.08rem; font-weight:500; }
[data-skin="w"] .kcard .row-name, [data-skin="w"] .kcard b { font-family:var(--font-head); font-weight:500; }

/* --- Calendario: hoy, una gota de color --- */
[data-skin="w"] .cal-cell { background:rgba(253,248,238,.82); border:1px solid var(--graphite-soft); border-radius:9px 11px 8px 10px/10px 8px 11px 9px; }
[data-skin="w"] .cal-empty { background:transparent; border-color:transparent; }
[data-skin="w"] .cal-today { background:rgba(253,248,238,.95); border-color:var(--graphite); }
[data-skin="w"] .cal-today .cal-num { display:inline-grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:var(--wash-terra) center/170% no-repeat, #c9674b; color:#fff; }
[data-skin="w"] .cal-num { font-size:.95rem; }

/* --- Tickets --- */
.tk-row { border-radius:var(--sk); }
.tk-head { border-radius:var(--sk); }
.tk-case { font-size:1.15rem; }
.tk-ev-ic { border-radius:48% 52% 50% 50%/52% 48% 52% 48%; background-size:150%; background-position:center; }
.tk-title { font-size:1.75rem !important; font-weight:400 !important; }

/* --- Agente --- */
.agent-fab { box-shadow:0 8px 20px -6px rgba(120,50,28,.6); border-radius:48% 52% 50% 50%/52% 48% 52% 48%; width:52px; height:52px; }
.agent-win { border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 26px 60px -20px rgba(40,30,12,.6); }
.ag-title { font-size:1.15rem; font-weight:400; }
.ag-msg { border-radius:12px 14px 11px 13px/13px 11px 14px 12px; }
[data-skin="w"] .chat-fab { border-radius:48% 52% 50% 50%/52% 48% 52% 48%; }
[data-skin="w"] .chat-fab svg, [data-skin="w"] .chat-fab .ico { width:25px; height:25px; }

/* --- Acceso: dos hojas en la pared --- */
[data-skin="w"] .login-wrap { background:none; display:flex; align-items:center; justify-content:center; gap:clamp(30px,6vw,84px); padding:32px 20px; }
[data-skin="w"] .login-wrap::before, [data-skin="w"] .login-wrap::after { display:none; }
.login-art { position:relative; flex:0 0 auto; width:min(38vw,430px); aspect-ratio:4/5; padding:26px; background:var(--bg-elevated); border:1.1px solid var(--graphite); border-radius:var(--sk); transform:rotate(-1.4deg); box-shadow:0 2px 2px rgba(70,54,28,.08),0 24px 44px -22px rgba(70,54,28,.55); }
.login-art i { display:block; width:100%; height:100%; background:url(../assets/wc/login.webp) center/contain no-repeat; }
[data-skin="w"] .login-card { position:relative; border:1.1px solid var(--graphite); border-radius:var(--sk); background:var(--bg-elevated); box-shadow:0 2px 2px rgba(70,54,28,.08),0 24px 44px -22px rgba(70,54,28,.55); }
[data-skin="w"] .login-card::after { display:block !important; content:''; position:absolute; inset:7px; border:1.1px dashed var(--graphite-soft); border-radius:var(--sk-sm); pointer-events:none; }
[data-skin="w"] .login-card > * { position:relative; z-index:1; }
@media (max-width:860px) { .login-art { display:none; } }

/* --- Consola y páginas públicas --- */
.tp-sheet { position:relative; }
.tp-cover { position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:center; padding:26px 28px; margin-bottom:18px; background-color:var(--bg-surface); border:1.1px solid var(--graphite); border-radius:var(--sk); box-shadow:0 10px 26px -14px rgba(70,54,28,.34); isolation:isolate; }
.tp-cover::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:url(../assets/wc/bn-sun.webp) center/100% 100% no-repeat; }
.tp-cover .tp-co, .tp-cover .tp-title, .tp-cover .tp-intro { color:#fffaf2; text-shadow:0 1px 8px rgba(120,50,28,.4); margin:0; }
.tp-cover .tp-title { font-size:2rem; font-weight:400; margin-top:2px; }
.tp-cover .tp-intro { margin-top:6px; max-width:62%; }
@media (max-width:560px) { .tp-cover { padding:20px 18px; min-height:118px; } .tp-cover .tp-title { font-size:1.55rem; } .tp-cover .tp-intro { max-width:none; } }

/* --- Ajustes tras mirar en pantalla --- */
.pcard-art { height:auto; aspect-ratio:2/1; }
.wc-banner:not([data-art="sun"]):not([data-art="dune"])::before, [data-skin="w"] .p-head:not([data-art="dune"])::before { -webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 62%); mask-image:linear-gradient(90deg,transparent 28%,#000 62%); }
[data-theme="dark"] .wc-banner[data-art="dune"]::before, [data-theme="dark"] .p-head[data-art="dune"]::before { filter:brightness(.42); }
[data-theme="dark"] .wc-banner[data-art="sun"]::before { filter:brightness(.82); }
[data-skin="w"] .home-news .news-item, [data-skin="w"] .news-item { background:transparent; }
[data-skin="w"] .news-ic { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:48% 52% 50% 50%/52% 48% 52% 48%; background:var(--wash-sky) center/150% no-repeat; color:var(--text); font-size:1rem; }

/* --- v42: miniaturas de proyecto --- */
.pcard-art.has-thumb, .kcard-art.has-thumb { background:var(--neutral-bg); overflow:hidden; }
.pcard-art img, .kcard-art img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
[data-theme="dark"] .pcard-art.has-thumb { filter:none; }
.kcard-art { aspect-ratio:2/1; margin:-13px -13px 10px; background-size:cover; background-position:center; border-bottom:1.1px solid var(--graphite-soft); border-radius:var(--sk) var(--sk) 0 0; overflow:hidden; }
[data-skin="w"] .kcard-pic { overflow:hidden; }
.pm-thumb { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.pm-thumb-view { flex:none; width:160px; aspect-ratio:2/1; display:grid; place-items:center; overflow:hidden; color:var(--text-muted); background:var(--bg-surface); border:1.1px dashed var(--graphite); border-radius:var(--sk-sm); }
.pm-thumb-view img { display:block; width:100%; height:100%; object-fit:cover; }
.pm-thumb-view .ico { width:26px; height:26px; }
.pm-thumb-side { flex:1 1 170px; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pm-thumb-side .row-sub { flex:1 1 100%; }
.pm-thumb-side label.btn { text-transform:none; letter-spacing:0; margin:0; cursor:pointer; color:var(--text); font-size:.84rem; font-weight:600; }
@media (max-width:420px) { .pm-thumb-view { width:100%; } }

/* --- v42: buscador --- */
[data-skin="w"] .cmd-overlay { padding-top:9vh; z-index:2000; }
[data-skin="w"] .cmd { max-width:680px; display:flex; flex-direction:column; max-height:78vh; }
.cmd-top { display:flex; align-items:center; gap:10px; padding:4px 10px 4px 18px; flex:none; background:var(--pencil-h) left bottom/100% 5px no-repeat; }
.cmd-top > .ico { width:21px; height:21px; color:var(--text-muted); }
[data-skin="w"] .cmd-input { flex:1; min-width:0; width:auto; border:0; padding:16px 0; font-size:1.08rem; background:none; }
.cmd-x { flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--text-muted); cursor:pointer; }
.cmd-x:hover { background:var(--bg-hover); color:var(--text); }
.cmd-chips { display:flex; gap:6px; padding:10px 14px 2px; overflow-x:auto; scrollbar-width:none; flex:none; }
.cmd-chips:empty { display:none; }
.cmd-chips::-webkit-scrollbar { display:none; }
.cmd-chip { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:34px; padding:0 11px; border:1.1px solid var(--graphite-soft); border-radius:var(--sk-sm); background:var(--bg-surface); color:var(--text-sec); font:500 .86rem var(--font-body); cursor:pointer; }
.cmd-chip .ico { width:15px; height:15px; }
.cmd-chip b { font-weight:600; font-size:.74rem; color:var(--text-muted); }
.cmd-chip:disabled { opacity:.5; cursor:default; }
.cmd-chip.on { background:var(--wash-sky) center/110% 130% no-repeat, var(--bg-surface); border-color:var(--graphite); color:var(--text); }
[data-theme="dark"] .cmd-chip.on { background:var(--primary-glow); }
[data-skin="w"] .cmd-list { flex:1; min-height:0; max-height:none; padding:6px 8px 10px; overscroll-behavior:contain; }
.cmd-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 8px 4px; font:500 .95rem var(--font-head); color:var(--text); }
.cmd-more { border:0; background:none; padding:2px 4px; color:#2d6068; font:600 .8rem var(--font-body); cursor:pointer; }
[data-theme="dark"] .cmd-more { color:var(--info); }
[data-skin="w"] .cmd-item { align-items:flex-start; gap:11px; padding:8px; border-radius:var(--sk-sm); }
[data-skin="w"] .cmd-item .ic { flex:none; width:44px; height:30px; display:grid; place-items:center; opacity:1; color:var(--text-sec); }
.cmd-item .ic .ico { width:19px; height:19px; }
.cmd-thumb { display:block; width:44px; height:22px; margin-top:4px; object-fit:cover; border-radius:5px; }
.cmd-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cmd-t { font-weight:600; overflow-wrap:anywhere; line-height:1.3; }
.cmd-s { font-size:.86rem; color:var(--text-sec); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; line-height:1.35; }
.cmd-m { font-size:.78rem; color:var(--text-muted); overflow-wrap:anywhere; }
.cmd-body mark { background:rgba(221,166,58,.34); color:inherit; border-radius:3px; padding:0 1px; }
[data-theme="dark"] .cmd-body mark { background:rgba(231,193,104,.28); }
.cmd-hint { padding:12px 10px 4px; font-size:.86rem; color:var(--text-muted); }
.cmd-foot { flex:none; display:flex; gap:14px; flex-wrap:wrap; padding:8px 16px; font-size:.76rem; color:var(--text-muted); background:var(--pencil-h) left top/100% 5px no-repeat; }
.cmd-foot kbd { font:600 .7rem var(--font-body); padding:1px 5px; border:1px solid var(--graphite-soft); border-radius:4px; background:var(--bg-surface); }
@media (max-width:640px) {
  [data-skin="w"] .cmd-overlay { padding:0; align-items:stretch; }
  [data-skin="w"] .cmd { margin:0; max-width:none; max-height:none; width:100%; height:100dvh; border:0; border-radius:0; }
  .cmd-top { padding-top:env(safe-area-inset-top); }
  [data-skin="w"] .cmd-input { font-size:16px; }
  .cmd-foot { display:none; }
  [data-skin="w"] .cmd-list { padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* --- v43: audio y resumen de reuniones --- */
.btn[hidden] { display:none !important; }   /* .btn fija display y anularía el atributo hidden */
.nm-ai { margin:0 0 14px; padding:12px 14px; border:1.1px solid var(--graphite-soft); border-radius:var(--sk-sm); background:var(--bg-surface); }
.nm-ai[hidden] { display:none; }
.nm-ai-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.nm-ai-head h3 { margin:0; font:500 1rem var(--font-head); }
.nm-ai .field { margin-bottom:8px; }
.nm-ai details summary { cursor:pointer; min-height:34px; display:flex; align-items:center; font-size:.88rem; font-weight:600; color:var(--text-sec); }
.nm-ai details textarea { margin-top:4px; }
.nm-ai-foot { display:flex; justify-content:flex-end; margin-top:6px; }
.nm-ai-off { font-size:.84rem; color:var(--text-muted); margin:0 0 14px; }
.note-ai-tag { display:inline-block; margin-top:8px; font-size:.76rem; font-weight:600; color:var(--text-sec); }
.na-files { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.na-files:empty { display:none; }
.na-file { display:flex; align-items:center; gap:8px; min-width:0; font-size:.88rem; }
.na-file .ico { flex:none; width:17px; height:17px; }
.na-file span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.na-file b { flex:none; font-weight:500; color:var(--text-muted); font-size:.8rem; }
.na-warn { margin-top:12px; padding:8px 10px; border-left:3px solid var(--warning, #c98a1b); background:var(--neutral-bg); font-size:.86rem; }
.na-bar { height:10px; overflow:hidden; border:1.1px solid var(--graphite-soft); border-radius:6px; background:var(--bg-surface); }
.na-bar i { display:block; width:0; height:100%; background:var(--primary, #2d6068); transition:width .4s ease; }
.na-msg { margin-top:10px; font-weight:600; font-size:.92rem; overflow-wrap:anywhere; }
.na-msg.na-err { color:var(--danger, #b4382a); font-weight:500; }

/* --- v45: iconos en los botones que antes usaban un símbolo de texto --- */
.x-btn .ico, .sd-close .ico { width:20px; height:20px; vertical-align:middle; }
.x-btn, .sd-close { display:inline-grid; place-items:center; }
.lb-close .ico { width:22px; height:22px; }
.sv-btn .ico { width:19px; height:19px; }
.lb-video .lb-play .ico { width:44px; height:44px; }
.btn-sm.btn-icon .ico, .btn-icon.btn-sm .ico { width:17px; height:17px; }
#to-top .ico { width:22px; height:22px; }
.news-rm .ico { width:15px; height:15px; }