/* Diversa® Vision Studio — sistema de interfaz del CRM.
   Paleta de marca: Muted Black, Seashell, Lavender y Tea como base; Sky, Mustard, Tangerine, Pink Quartz y Red Passion como apoyos. */

:root{
  /* Paleta de marca */
  --muted-black:#1d1d1b;--seashell:#f7f4f1;--lavender:#808bc5;--tea:#245e55;--mustard:#eac119;
  --tangerine:#ed773c;--sky:#9ed6df;--pink-quartz:#eaa7c7;--red-passion:#c63f3e;
  /* Roles de color (derivados de la paleta; las variantes "-ink" aseguran contraste en texto chico) */
  --ink:var(--muted-black);--ink-2:#3a3936;--muted:#6b6762;--faint:#9b968f;
  --paper:var(--seashell);--surface:#fcfbf9;--white:#fff;--line:#e7e2dc;--line-2:#d6d0c8;--line-strong:#8f887f;--hover:#efebe6;--pend-ink:#55524d;
  --accent:var(--lavender);--accent-soft:#e6e8f4;--accent-ink:#4a5594;
  --primary:var(--tea);--primary-hover:#1a4a43;--primary-soft:#dce9e6;
  --sky-soft:#e1f2f5;--sky-ink:#1f5f69;--mustard-soft:#fbf1cf;--mustard-ink:#7a5d00;--tangerine-soft:#fde4d6;--tangerine-ink:#b4521f;
  --red:#a83433;--red-soft:#f8e2e1;--red-line:#efc3c2;
  --side-bg:var(--muted-black);--side-text:#d9d5cf;--side-muted:#9b968f;--side-hover:#2a2a27;--side-line:#33322f;
  /* Tipografía */
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:26px;--fs-2xl:clamp(28px,2.4vw,34px);
  /* Espacio, forma, movimiento */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r-sm:6px;--r:10px;--r-lg:14px;--r-pill:999px;
  --side:220px;--maxw:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);--fast:.15s;--med:.25s;
  --focus:0 0 0 2px var(--white),0 0 0 4px var(--accent-ink);
  --shadow-sm:0 1px 2px rgba(29,29,27,.12);
  /* Superficies: tinta cálida, desplazada y difusa (no halo). */
  --shadow-card:0 1px 2px rgba(29,29,27,.05),0 10px 28px -14px rgba(29,29,27,.18);
  --shadow-hover:0 2px 4px rgba(29,29,27,.06),0 16px 34px -16px rgba(29,29,27,.24);
  --tray:#efeae4;
  /* Íconos */
  --i-sm:14px;--i:18px;--i-lg:22px;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-md)/1.5 var(--font)}
a{color:inherit;text-decoration:none}
p{margin:0 0 var(--s3)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md)}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--ink)}
html{scrollbar-color:var(--line-strong) transparent}
input,textarea{caret-color:var(--accent-ink)}
.trow-date,.ev-time,.cell-n,.finance-table td.num,.agenda-mini time{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* Sobre fondos oscuros (barra lateral y menú móvil) el anillo usa Lavender */
.sidebar :focus-visible,.mobilebar :focus-visible{outline-color:var(--accent)}
/* Dentro de contenedores que recortan (overflow), el anillo va hacia adentro */
.finance-stat:focus-visible,.chips a:focus-visible,.seg a:focus-visible{outline-offset:-3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s3);top:-60px;z-index:20;background:var(--ink);color:var(--white);padding:var(--s2) var(--s4);border-radius:var(--r-sm);transition:top var(--fast)}
.skip:focus{top:var(--s3)}
.num{font-variant-numeric:tabular-nums}
.quiet{color:var(--muted);font-size:var(--fs-sm)}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.prose{max-width:72ch;color:var(--ink-2)}

/* Íconos: misma familia, trazo 1.75, se alinean con el texto */
.i{width:var(--i);height:var(--i);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r-sm);font:700 var(--fs-sm)/1 var(--font);cursor:pointer;white-space:nowrap;transition:background var(--fast),color var(--fast),border-color var(--fast),transform var(--fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-danger{background:var(--white);color:var(--red);border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn-sm{min-height:40px;padding:0 var(--s3);font-size:var(--fs-xs)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r);background:transparent;color:inherit;cursor:pointer;transition:background var(--fast)}
.more{display:inline-flex;align-items:center;gap:var(--s1);padding-block:10px;margin-block:-10px;font-size:var(--fs-sm);font-weight:700;color:var(--ink);white-space:nowrap}
.more .i{width:var(--i-sm);height:var(--i-sm);transition:transform var(--fast) var(--ease)}
.more:hover .i{transform:translate(2px,-2px)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
form.inline{display:inline}
button.more,.link-btn{background:none;border:0;padding-inline:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
button.more{font-size:var(--fs-sm)}
.link-btn{display:block;min-height:40px;padding-block:var(--s2)}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Barra lateral ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--side-bg);color:var(--side-text);display:flex;flex-direction:column;padding:var(--s5) var(--s3) var(--s4);z-index:5;overflow-y:auto}
.logo{display:block;padding:0 var(--s3);font-size:27px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--white)}
.logo sup{font-size:10px;font-weight:400;letter-spacing:0;margin-left:2px;vertical-align:top;position:relative;top:1px}
.logo span{display:block;margin-top:var(--s2);font-size:10px;font-weight:400;letter-spacing:.28em;color:var(--side-muted)}
.nav{margin-top:var(--s6);display:grid;gap:var(--s4)}
.nav-label{display:none;padding:0 var(--s3) var(--s2);font-size:var(--fs-2xs);font-weight:700;color:var(--side-muted)}
.nav ul{display:grid;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:var(--r);color:var(--side-text);font-size:var(--fs-md);transition:background var(--fast),color var(--fast)}
.nav a:hover{background:var(--side-hover);color:var(--white)}
.nav a.is-active{background:var(--side-hover);color:var(--white);font-weight:700}
.nav a.is-active .i{color:var(--accent)}
.count{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--ink);font-size:var(--fs-2xs);font-weight:700;display:grid;place-items:center}
.profile{margin-top:auto;display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s2) 0;border-top:1px solid var(--side-line)}
.profile-who{min-width:0;flex:1}
.profile-who[aria-current="page"] strong{color:var(--lavender);text-decoration:underline;text-underline-offset:4px}
.profile-who strong,.profile-who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-who strong{font-size:var(--fs-sm);color:var(--white)}
.profile-who small{font-size:var(--fs-xs);color:var(--side-muted)}
.profile .icon-btn{color:var(--side-text)}
.profile .avatar{width:40px;height:40px}
.profile .icon-btn:hover{background:var(--side-hover);color:var(--accent)}
.avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink-quartz);color:var(--ink);font-size:var(--fs-2xs);font-weight:700}
.mobilebar{display:none}

/* ---------- Contenido y cabecera ---------- */
.main{margin-left:var(--side);padding:var(--s6) max(clamp(var(--s5),3.3vw,var(--s7)),calc((100vw - var(--side) - var(--maxw)) / 2)) var(--s7);max-width:none;animation:none}
.pagehead{margin-bottom:var(--s5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s2)}
.crumbs li{display:flex;align-items:center;gap:var(--s2);min-width:0}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a{font-weight:700;color:var(--ink-2)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.pagehead-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.pagehead-title{display:flex;align-items:center;gap:var(--s4);min-width:0}
.pagehead h1{font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
.lede{margin:var(--s1) 0 0;color:var(--muted);font-size:var(--fs-md);margin-top:var(--s2);max-width:65ch;line-height:1.55}
.pagehead-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.cal-tools{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.cal-tools .filter-menu ul{left:auto;right:0}
.notice.is-error{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.notice{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent);font-size:var(--fs-sm);font-weight:700}
.foot{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0;color:var(--muted);text-transform:none}

/* ---------- Paneles y secciones ---------- */
/* Superficies: cada sección es una hoja blanca sobre el papel Seashell, con borde cálido y sombra suave. */
.panel{container-type:inline-size;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s4) var(--s5) var(--s5);margin-bottom:var(--s5)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:36px;margin-bottom:var(--s4)}
.sec-head h2{font-size:var(--fs-lg);display:flex;align-items:center;gap:var(--s2);overflow-wrap:anywhere}
.n{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--hover);color:var(--muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:0}
.layout-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:var(--s5);align-items:start}
.layout-split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.layout-split.is-board{grid-template-columns:minmax(0,1fr)}
.is-board .col-side{max-width:420px}
.col-main,.col-side{min-width:0}
.empty{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding:var(--s4);border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--muted);font-size:var(--fs-sm)}
.empty p{margin:0;max-width:60ch}
.fold{margin-top:var(--s3)}
.fold>summary,.fold-panel>summary{display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none;font-weight:700;font-size:var(--fs-sm)}
.fold>summary{color:var(--muted);padding:var(--s2) 0;min-height:40px}
.fold>summary:hover{color:var(--ink)}
summary::-webkit-details-marker{display:none}
.fold>summary::after,.fold-panel>summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--med) var(--ease)}
details[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
details[open]>.creator-body,details[open]>form,details[open]>p,details[open]>.tlist,details[open]>.day{animation:enter var(--med) var(--ease)}
.fold-panel>summary{font-size:var(--fs-md);min-height:40px}
.fold-panel[open]>summary{margin-bottom:var(--s3)}
.creator-body{padding-top:var(--s4)}

/* ---------- Resumen (Hoy y Finanzas) ---------- */
/* Hoy: renglón de datos personales (no tarjetas de cifra grande). */
.ledger{display:flex;flex-wrap:wrap;margin:0 0 var(--s2);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.ledger li{flex:1 1 180px;min-width:0}
.ledger li+li{border-left:1px solid var(--line)}
.ledger a{display:block;min-height:48px;padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--ink-2);transition:background var(--fast)}
.ledger a:hover{background:var(--hover)}
.ledger strong{font-size:var(--fs-lg);color:var(--ink);margin-right:var(--s1);font-variant-numeric:tabular-nums}
.ledger a.is-late,.ledger a.is-late strong{color:var(--red)}
.summary-scope{margin:0 0 var(--s6);font-size:var(--fs-xs);color:var(--muted)}
.summary-scope a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.scope-note{margin:0 0 var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.scope-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.brand-overview .late{color:var(--red)}
.fold-more{margin:var(--s3) 0 0}

/* ---------- Filas de tareas y trabajos ---------- */
.tlist>li+li{border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 170px 210px 112px;align-items:center;gap:var(--s4);min-height:72px;padding:var(--s2) var(--s3);margin:0 calc(var(--s3) * -1);border-radius:var(--r);transition:background var(--fast);padding-top:var(--s4);padding-bottom:var(--s4)}
.trow:hover{background:var(--hover)}
.trow-main{min-width:0}
.trow-main strong{display:block;font-size:var(--fs-md);line-height:1.35;overflow-wrap:anywhere}
.trow:hover .trow-main strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.trow-main small{display:block;font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:var(--s1)}
.trow-owner,.trow-date{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow-owner .i,.trow-date .i{width:var(--i-sm);height:var(--i-sm);color:var(--faint)}
.trow-status{justify-self:end}
.trow.is-late .trow-date{color:var(--red);font-weight:700}
.trow.is-late .trow-date .i{color:var(--red)}
.trow.is-done .trow-main strong{color:var(--muted)}
.trow.no-owner{grid-template-columns:minmax(0,1fr) 210px 112px}
/* Las filas se adaptan al ancho de su panel, no al de la ventana */
@container (max-width:800px){
  .trow,.trow.no-owner{grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);padding:var(--s4) var(--s3)}
  .trow-main{grid-row:1;grid-column:1}
  .trow-owner{grid-row:2;grid-column:1;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .trow-owner .i{flex:none}
  .trow-date{grid-row:3;grid-column:1;font-size:var(--fs-xs)}
  .trow-status{grid-row:1/4;grid-column:2}
  .trow.no-owner .trow-date{grid-row:2}
  .trow.no-owner .trow-status{grid-row:1/3}
}

/* Estados: siempre con texto; el color acompaña */
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;background:var(--hover);color:var(--ink-2)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-pend{background:var(--hover);color:var(--pend-ink)}
.s-curso{background:var(--sky-soft);color:var(--sky-ink)}
.s-rev{background:var(--accent-soft);color:var(--accent-ink)}
.s-fin{background:var(--primary-soft);color:var(--primary)}
.s-pausa{background:var(--mustard-soft);color:var(--mustard-ink)}
.s-cancel{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:line-through}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--white);font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);white-space:nowrap}
.badge .i{width:var(--i-sm);height:var(--i-sm)}
.b-warn{background:var(--mustard-soft);border-color:var(--mustard);color:var(--mustard-ink)}
.b-late{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.b-dark{background:var(--ink);border-color:var(--ink);color:var(--white)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:calc(var(--s3) * -1) 0 var(--s4);font-size:var(--fs-sm);color:var(--ink-2)}
.meta li{display:flex;align-items:center;gap:6px}
.meta>li>.i{color:var(--faint)}
.meta>li.late{color:var(--red);font-weight:700}
.meta>li.late>.i{color:currentColor}

/* ---------- Hoy: columna lateral ---------- */
.home-layout{grid-template-areas:"tasks agenda" "tasks notices"}
.home-layout>.home-tasks{grid-area:tasks}
.home-layout>.home-upcoming{grid-area:agenda;margin-bottom:0}
.home-upcoming.is-short{display:none}
.home-layout>.home-notices{grid-area:notices}
.agenda-short{display:none}
.agenda-day+.agenda-day{margin-top:var(--s4)}
.agenda-day h3{font-size:var(--fs-sm);margin-bottom:var(--s2)}
@media(max-width:960px){
  .home-layout{grid-template-areas:"tasks" "notices"}
  .home-upcoming.is-full{display:none}
  .home-upcoming.is-short{display:block}
  .home-upcoming .agenda-full,.home-upcoming .agenda-later{display:none}
  .home-upcoming .agenda-short{display:block}
  .home-mine .tlist>li:nth-child(n+4){display:none}

  
  .main{padding:var(--s5) var(--s5) var(--s6)}
  .finance-overview{grid-template-columns:minmax(0,1fr)}
}
.agenda-mini li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
.agenda-mini li:first-child{border-top:0}
.agenda-mini time{grid-row:1/3;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);padding-top:2px}
.agenda-mini a{font-size:var(--fs-sm);font-weight:700;overflow-wrap:anywhere}
.agenda-mini a:hover{text-decoration:underline;text-underline-offset:3px}
.agenda-mini small,.mini small{font-size:var(--fs-xs);color:var(--muted)}
.mini li{display:flex;flex-direction:column;gap:2px;padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.mini li:first-child{border-top:0}
.mini a:hover{text-decoration:underline;text-underline-offset:3px}
.mini.rules li{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s3)}
.mini.rules strong,.mini.rules small{display:block}

/* ---------- Trabajo: filtros ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);padding:0;background:transparent;border-radius:0}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s3);border-radius:8px;font-size:var(--fs-sm);font-weight:700;color:var(--muted);transition:background var(--fast),color var(--fast)}
.chips a:hover{color:var(--ink)}
.chips a:hover{background:var(--hover)}
.chips a.is-active{background:var(--ink);color:var(--paper);box-shadow:none}
.inline-filter{display:flex;gap:var(--s2);align-items:center}
.inline-filter select{min-height:40px;width:auto;max-width:240px;margin:0}
.seg{display:inline-flex;gap:2px;padding:0;background:transparent;border-radius:0}
.seg a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--s3);border-radius:8px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.seg a .i{width:var(--i-sm);height:var(--i-sm)}
.seg a:hover{color:var(--ink)}
.seg a.is-active{background:var(--hover);color:var(--ink);box-shadow:none}
/* Fila de categoría + vista (Trabajo): una sola regla inferior. */
.tabs-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);flex-wrap:wrap;border-bottom:1px solid var(--line-2);margin-bottom:var(--s4)}
.tabs-row>.page-tabs{border-bottom:0;margin-bottom:0}
.tabs-row>.seg{margin-left:auto}

/* ---------- Marcas ---------- */
.mono{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;background:var(--lavender);color:var(--ink)}
.mono-lg{width:56px;height:56px;font-size:var(--fs-lg);border-radius:var(--r-lg)}
.mono-sm{width:28px;height:28px;font-size:var(--fs-2xs);border-radius:var(--r-sm)}
.brand-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:var(--s2)}
.brand-colors .check{min-height:40px;margin:0;overflow-wrap:anywhere}
.color-swatch{width:18px;height:18px;border:1px solid var(--line-strong);border-radius:var(--r-pill);flex:none}
.mono-color-muted-black{background:var(--muted-black);color:var(--white)}
.mono-color-seashell{background:var(--seashell);color:var(--ink)}
.mono-color-lavender{background:var(--lavender);color:var(--ink)}
.mono-color-tea{background:var(--tea);color:var(--white)}
.mono-color-mustard{background:var(--mustard);color:var(--ink)}
.mono-color-tangerine{background:var(--tangerine);color:var(--ink)}
.mono-color-sky{background:var(--sky);color:var(--ink)}
.mono-color-pink-quartz{background:var(--pink-quartz);color:var(--ink)}
.mono-color-red-passion{background:var(--red-passion);color:var(--white)}
.m1{background:var(--ink);color:var(--white)}
.m2{background:var(--tangerine);color:var(--ink)}
.m3{background:var(--sky);color:var(--ink)}
.m4{background:var(--pink-quartz);color:var(--ink)}
.m5{background:var(--mustard);color:var(--ink)}
.m6{background:var(--tea);color:var(--white)}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5);margin-bottom:var(--s4)}
.brand-card{display:flex;flex-direction:column;gap:var(--s3);height:100%;padding:var(--s5);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);transition:box-shadow var(--med) var(--ease),border-color var(--fast)}
.brand-card:hover{box-shadow:var(--shadow-hover);border-color:var(--line-2)}
.brand-card:hover .brand-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.brand-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s1)}
.brand-go{color:var(--faint);transition:transform var(--fast) var(--ease),color var(--fast)}
.brand-card:hover .brand-go{color:var(--ink);transform:translate(2px,-2px)}
.brand-name{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.brand-notes{font-size:var(--fs-sm);color:var(--muted);flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-stats{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--fs-sm);color:var(--ink-2);padding-top:var(--s2);border-top:1px solid var(--line)}
.brand-stats b{font-weight:700}
.brand-stats .late{color:var(--red)}
.mini .late{color:var(--red)}
.brand-next{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--muted)}
.brand-next .i{width:var(--i-sm);height:var(--i-sm)}

/* ---------- Tablero ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2);margin-top:var(--s2)}
.board-col{background:var(--tray);border:0;border-radius:var(--r-lg);padding:var(--s3);min-height:120px}
.board-col h3{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-md);margin-bottom:var(--s2)}
.board-card{display:grid;gap:var(--s2);padding:var(--s3);margin:0 0 var(--s2);background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);font-size:var(--fs-sm);transition:box-shadow var(--med) var(--ease),border-color var(--fast)}
.board-card:hover{box-shadow:var(--shadow-hover);border-color:var(--line-2)}
.board-card:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.board-card strong{line-height:1.3;overflow-wrap:anywhere;font-size:var(--fs-md)}
.board-card small{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere;color:var(--muted);font-size:var(--fs-xs)}
.board-card small .i{width:var(--i-sm);height:var(--i-sm);flex:none}
.board-card.is-late small:last-child{color:var(--red);font-weight:700}
.board-empty{font-size:var(--fs-xs);color:var(--muted);margin:0}
.board[data-move] .board-card[draggable=true]{cursor:grab}
.board.is-dragging .board-col{transition:background var(--fast),box-shadow var(--fast)}
.board.is-dragging .board-col:not(.can-drop){opacity:.55}
.board-col.can-drop{box-shadow:inset 0 0 0 2px var(--line-strong)}
.board-col.is-over{box-shadow:inset 0 0 0 2px var(--ink);background:var(--hover)}
.board-card.is-moving{opacity:.4}
.board.is-saving{pointer-events:none;opacity:.7}

/* ---------- Tarea ---------- */
.progress{height:6px;border-radius:var(--r-pill);background:var(--hover);overflow:hidden;margin:var(--s1) 0 var(--s3)}
.progress span{display:block;height:100%;background:var(--ink);border-radius:inherit;transform-origin:left;transition:transform var(--med) var(--ease)}
.p0{transform:scaleX(0)}.p1{transform:scaleX(.1)}.p2{transform:scaleX(.2)}.p3{transform:scaleX(.3)}.p4{transform:scaleX(.4)}.p5{transform:scaleX(.5)}.p6{transform:scaleX(.6)}.p7{transform:scaleX(.7)}.p8{transform:scaleX(.8)}.p9{transform:scaleX(.9)}.p10{transform:none;background:var(--tea)}
.checklist li+li{border-top:1px solid var(--line)}
.check-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px}
.check.is-done{color:var(--muted);text-decoration:line-through}
.thread{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
.comment{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s3)}
.comment-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);margin:0 0 2px;font-size:var(--fs-sm)}
.comment-head time{font-size:var(--fs-xs);color:var(--muted)}
.comment .prose{font-size:var(--fs-sm);margin:0}
.comment-form{border-top:1px solid var(--line);padding-top:var(--s3)}
.facts{display:grid;gap:0;margin:0 0 var(--s2);margin-bottom:var(--s4)}
.facts div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.facts div:first-child{border-top:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.facts .late{color:var(--red)}
.action-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s4);margin:0 0 var(--s5);padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.action-bar>.i{color:var(--ink-2)}
.action-bar p{flex:1 1 280px;margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.action-bar p strong{color:var(--ink)}
.action-bar-buttons{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hint-box{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border-radius:var(--r);background:var(--mustard-soft);color:var(--mustard-ink);font-size:var(--fs-sm)}
.files li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.files li:first-child{border-top:0}
.files a{display:flex;align-items:center;gap:var(--s2);min-width:0;font-weight:700}
.files a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files a:hover span{text-decoration:underline;text-underline-offset:3px}
.files small{flex:none;font-size:var(--fs-xs);color:var(--muted)}
/* Archivo: nombre y datos a la izquierda, Quitar a la derecha. */
.files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3)}
.files li>a,.files li>small{grid-column:1}
.files small{overflow-wrap:anywhere}
.file-remove{grid-column:2;grid-row:1 / span 2;align-self:center}
.upload{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.state-form{display:grid;gap:var(--s3)}
.state-form .field{margin:0}

/* ---------- Calendario ---------- */
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:calc(var(--s2) * -1) 0 var(--s4);font-size:var(--fs-sm);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.day+.day{margin-top:var(--s4)}
.day-head{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm);font-weight:700;padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.day-head span:last-child::first-letter{text-transform:uppercase}
.day-n{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--hover);font-size:var(--fs-md)}
.day.is-today .day-n{background:var(--accent)}
.day-list li+li{border-top:1px solid var(--line)}
.ev{display:grid;grid-template-columns:52px 132px minmax(0,1fr) auto;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s2) var(--s3);margin:0 calc(var(--s3) * -1);border-radius:var(--r);transition:background var(--fast)}
.ev:hover{background:var(--hover)}
.ev-time{font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ev-type{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.ev-type .i{width:var(--i-sm);height:var(--i-sm)}
.ev-main{min-width:0}
.ev-main strong{display:block;font-size:var(--fs-sm);overflow-wrap:anywhere}
.ev:hover .ev-main strong{text-decoration:underline;text-underline-offset:3px}
.ev-main small{display:block;font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.is-late .ev-time,.ev.is-late .ev-type{color:var(--red)}
@container (max-width:600px){
  .ev{grid-template-columns:44px minmax(0,1fr);gap:2px var(--s3)}
  .ev-time{grid-row:1/4}
  .ev-type,.ev-main,.ev-status{grid-column:2}
}

.flip{transform:scaleX(-1)}
.lg-entrega .i{color:var(--ink)}.lg-pub .i{color:var(--accent-ink)}.lg-trabajo .i{color:var(--tangerine-ink)}.lg-venc .i{color:var(--tea)}.lg-gcal .i{color:var(--muted)}

/* Vista mensual */
.month-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.month-head h2{font-size:var(--fs-xl);letter-spacing:-.03em}
.month-nav{display:flex;gap:var(--s1)}
.month-head .legend{flex:1;justify-content:center;margin:0}
@media(max-width:1280px){.month-head .legend{order:3;flex-basis:100%;justify-content:flex-start}}
.month-list,.month-toggle{display:none}
@media(max-width:768px){
  .month .month-scroll{display:none}
  .month .month-list{display:block;margin-top:var(--s4)}
  .month .month-toggle{display:inline-flex;margin-bottom:var(--s3)}
  .month.show-grid .month-scroll{display:block}
  .month.show-grid .month-list{display:none}
}
.month-scroll{overflow-x:auto;margin:0 calc(var(--s2) * -1);padding:0 var(--s2) var(--s1);position:relative;max-width:100%}
.month-grid{min-width:720px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-card)}
.month-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.month-row+.month-row{border-top:1px solid var(--line)}
.month-days span{padding:var(--s2) var(--s3);font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--paper)}
.cell{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:116px;padding:6px;background:var(--white)}
.cell+.cell{border-left:1px solid var(--line)}
.cell.is-out{background:var(--surface)}
.cell.is-out .cell-n{color:var(--muted)}
.cell-n{position:relative}
.cell-n::after{content:"";position:absolute;inset:-6px}
.agenda-mini a,.mini a,.finance-activity a,.row-link,.files li>a,.cell-more{padding-block:10px;margin-block:-10px}
.finance-activity a{display:block}
.cell-n{align-self:flex-start;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;transition:background var(--fast)}
.cell-n:hover{background:var(--hover)}
.cell.is-today .cell-n{background:var(--accent)}
.chip-ev{display:block;padding:5px 4px;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:var(--fs-2xs);line-height:1.3;white-space:normal;overflow:hidden;flex:none;transition:background var(--fast)}
.chip-ev-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.chip-ev b{font-weight:700}
.chip-ev:hover{text-decoration:underline;text-underline-offset:2px}
.chip-ev .i{width:var(--i-sm);height:var(--i-sm);vertical-align:-2px;margin-right:3px;color:var(--ink-2)}
.chip-ev:hover{background:var(--hover)}
.chip-ev.k-pub .i{color:var(--accent-ink)}
.chip-ev.k-trabajo .i{color:var(--tangerine-ink)}
.chip-ev.k-venc .i{color:var(--primary)}
.chip-ev.k-gcal{color:var(--muted)}
.chip-ev.is-late,.chip-ev.is-late .i{color:var(--red)}
.cell-more{padding:11px 6px;margin-block:-11px;font-size:var(--fs-2xs);font-weight:700;color:var(--muted)}
.cell-more:hover{color:var(--ink);text-decoration:underline}

/* ---------- Notificaciones ---------- */
.comment .prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.mention{color:var(--accent-ink)}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.notes-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:start;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.notes-list li:first-child{border-top:0}
.note-kind{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);background:var(--tray);color:var(--muted)}
.note-kind .i{width:var(--i);height:var(--i)}
.is-new .note-kind{color:var(--ink)}
.notes-list form.note-form{display:contents}
.note-main{display:block;min-width:0;width:100%;padding:var(--s1) 0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.note-main:hover .note-body{text-decoration:underline;text-underline-offset:3px}
.note-body{display:block;font-size:var(--fs-md);line-height:1.5;color:var(--ink-2)}
.is-new .note-body{color:var(--ink);font-weight:700}
.note-text small{display:block}
.notes-list p{margin:0;font-size:var(--fs-md);color:var(--ink-2);max-width:80ch;line-height:1.6}
.notes-list .is-new p{color:var(--ink);font-weight:700}
.notes-list small{font-size:var(--fs-xs);color:var(--muted)}
.notes-list small b{color:var(--tangerine-ink)}

/* ---------- Equipo ---------- */
.people>li+li{border-top:1px solid var(--line)}
.person>summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:var(--s3);min-height:78px;padding:var(--s2) var(--s3);margin:0 calc(var(--s3) * -1);border-radius:var(--r);cursor:pointer;list-style:none;transition:background var(--fast)}
.person>summary:hover{background:var(--hover)}
.person-who{min-width:0}
.person-who strong,.person-who small{display:block;overflow-wrap:anywhere}
.person-who small{font-size:var(--fs-xs);color:var(--muted)}
.person-tags{display:flex;flex-wrap:wrap;gap:var(--s1);justify-content:flex-end}
.person-edit{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.person[open] .person-edit{color:var(--ink)}
.person .if-open,.person[open] .if-closed{display:none}
.person[open] .if-open{display:inline}
.person-status{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s4) 0 0}
.person-status .quiet{margin:0}
.person-form{padding:var(--s2) 0 var(--s4) 46px}
.role-base{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.role-av{background:var(--lavender);border-radius:var(--r-sm)}
form.role-delete{display:block;padding:0 0 var(--s4) 46px}
.delete-zone{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--line)}
.delete-zone>summary{font-weight:400}
.delete-zone[open]>summary{color:var(--red)}
form.delete-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.pagehead-actions .btn-ghost{background:transparent}

/* ---------- Finanzas ---------- */
.table-wrap{overflow-x:auto;margin:0 calc(var(--s5) * -1);padding:0 var(--s5)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{padding:var(--s2) var(--s3);text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.table td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr{transition:background var(--fast)}
.table tbody tr:hover{background:var(--hover)}
.table .r{text-align:right}
.table .strong{font-weight:700}

/* ---------- Formularios ---------- */
.form{max-width:720px}
.field{display:grid;align-content:start;gap:6px;margin:0 0 var(--s4);font-size:var(--fs-sm)}
.field>span{font-weight:700}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field>legend{padding:0;margin-bottom:var(--s2);font-weight:700}
fieldset.field>legend em{font-style:normal;font-weight:400;color:var(--muted)}
.field em{font-style:normal;font-weight:400;color:var(--muted)}
.field small{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
input,textarea,select{width:100%;min-height:42px;max-width:100%;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--white);color:var(--ink);font:var(--fs-sm)/1.4 var(--font);transition:border-color var(--fast),box-shadow var(--fast)}
input:hover,textarea:hover,select:hover{border-color:var(--ink-2)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus)}
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
textarea{min-height:110px;resize:vertical}
select[multiple]{min-height:110px;padding:6px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select:not([multiple]){height:42px}
.person-form .grid-2,.creator .grid-2{max-width:720px}
input[type=file]{padding:8px;background:var(--surface)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--ink);flex:none}
.check{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);font-size:var(--fs-sm);cursor:pointer}
.check small{color:var(--muted);font-size:var(--fs-xs)}
.check-row .check{margin:0}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:0 var(--s4);margin-bottom:var(--s2)}
.checks .check{min-width:0;overflow-wrap:anywhere}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.grid-2 .span-2{grid-column:1/-1}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s3)}

/* ---------- Ingreso y páginas de aviso ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin:0}
.auth-art{position:relative;min-height:100vh;background:var(--ink) url("login-oficina.webp") center 62%/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:44px;color:var(--paper);overflow:hidden}
.auth-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,29,27,.4),rgba(29,29,27,0) 18%,rgba(29,29,27,0) 50%,rgba(29,29,27,.72));pointer-events:none}
.auth-mark{position:relative;font-size:clamp(56px,8.5vw,140px);font-weight:700;letter-spacing:-.05em;line-height:.85;animation:rise .8s .1s var(--ease) both}
.auth-mark sup{font-size:.22em;font-weight:400;vertical-align:top;position:relative;top:.15em;margin-left:.04em}
.auth-mark small{display:block;font-size:clamp(14px,1.6vw,24px);font-weight:300;letter-spacing:.32em;margin-top:.9em}
.auth-tag{position:absolute;top:40px;left:44px;font-size:11px;font-weight:700;letter-spacing:.2em}
.auth{width:100%;max-width:480px;margin:auto;padding:56px 40px;animation:rise .6s .15s var(--ease) both}
.auth h1{margin:20px 0 12px;font-size:clamp(34px,3.6vw,48px);line-height:1.02;letter-spacing:-.045em}
.auth p{color:var(--muted)}
.auth label{display:grid;gap:6px;margin:0 0 var(--s4);font-size:var(--fs-sm);font-weight:700}
.auth button{width:100%;min-height:48px;margin:var(--s2) 0 var(--s4);border:0;border-radius:var(--r);background:var(--primary);color:var(--white);font:700 14px var(--font);cursor:pointer;transition:background var(--fast),box-shadow var(--fast)}
.auth button:hover{background:var(--primary-hover)}
.auth small{font-size:var(--fs-xs);color:var(--muted)}
.auth .notice{font-weight:400}
.auth .button{display:inline-flex;align-items:center;min-height:42px;padding:0 var(--s4);border-radius:var(--r);background:var(--ink);color:var(--white);font-weight:700;font-size:var(--fs-sm)}
.solo{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.solo .auth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}

/* ---------- Movimiento ---------- */
@keyframes enter{from{opacity:.001;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drawer{from{transform:translateX(-100%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .layout-split{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:960px){
  .sidebar{display:none}
  .mobilebar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:56px;padding:0 var(--s4) 0 var(--s2);background:var(--ink);color:var(--white)}
  .mobilebar>.logo{padding:9px 0;font-size:22px}
  .mnav>summary{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);cursor:pointer;list-style:none;color:var(--white)}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav>summary:hover{background:var(--side-hover)}
  .mnav>summary .i{width:24px;height:24px}
  .mnav-dot{position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--ink)}
  .mnav .i-close,.mnav[open] .i-open,.mnav[open] .mnav-dot{display:none}
  /* Abierto: el summary es el fondo (tocar afuera cierra) con la X arriba a la derecha; el panel entra desde la izquierda. */
  .mnav[open]>summary{position:fixed;inset:0;z-index:20;width:auto;height:auto;border-radius:0;place-items:start end;padding:6px var(--s2);background:rgb(0 0 0 / .5);animation:fade var(--med) var(--ease)}
  .mnav[open]>summary:hover{background:rgb(0 0 0 / .5)}
  .mnav[open] .i-close{display:block;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--side-bg)}
  .mnav-panel{position:fixed;inset:0 auto 0 0;z-index:21;display:flex;flex-direction:column;width:min(300px,82vw);padding:var(--s4) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--side-bg);color:var(--side-text);box-shadow:8px 0 32px rgb(0 0 0 / .3);animation:drawer var(--med) var(--ease)}
  .mnav-panel>.logo{padding:6px var(--s3);font-size:24px}
  .mnav-panel .nav{margin-top:var(--s5);gap:var(--s4)}
  .mnav-panel .nav-label{display:block}
  .mnav-panel .profile{margin-top:auto;padding-top:var(--s4)}
  body:has(.mnav[open]){overflow:hidden}
  .mobilebar:has(.mnav[open]){z-index:40}
  .main{margin-left:0;padding:var(--s4) var(--s4) var(--s5)}
  .layout-split,.layout-split.even{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .panel{padding:var(--s4);border-radius:var(--r-lg)}
  .table-wrap{margin:0 calc(var(--s4) * -1);padding:0 var(--s4)}
  .grid-2{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .chips{overflow-x:auto;flex-wrap:nowrap}
  .chips a{flex:none}
  .inline-filter select{max-width:none;flex:1}
  .person>summary{grid-template-columns:34px minmax(0,1fr) auto}
  .person-tags{grid-column:2;justify-content:flex-start}
  .person-edit{grid-row:1;grid-column:3}
  .person-form{padding-left:0}
  .pagehead-actions{width:100%}
  .pagehead-actions .btn{flex:1}
  .foot span:last-child{display:none}
  .login{grid-template-columns:1fr}
  .auth-art{min-height:40vh;padding:28px}
  .auth-tag{top:24px;left:28px}
  .auth{padding:32px 24px 48px}
}

/* Perfil privado y finanzas por marca */
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.avatar-large{width:96px;height:96px;font-size:var(--fs-xl);margin-bottom:var(--s4)}

/* ---------- Claridad: navegación, jerarquía y operaciones separadas ---------- */
body.app{line-height:1.55}

h1{overflow-wrap:anywhere;line-height:1.2}

.crumbs{margin-bottom:var(--s4)}

.nav-group:last-child:not(:first-child){border-top:1px solid var(--side-line);padding-top:var(--s4)}

.col-main>:last-child,.col-side>:last-child{margin-bottom:0}

.trow-date,.trow-owner{font-size:var(--fs-sm)}
.status,.badge{font-size:var(--fs-2xs);border-radius:var(--r-sm);height:auto;min-height:24px;padding:var(--s1) var(--s2);max-width:max-content}
.status{border-radius:var(--r-pill)}

.b-pending{background:var(--hover);border-color:var(--hover);color:var(--pend-ink)}
.b-success{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--tea)}

.form-screen{max-width:850px}
.form-screen h2{font-size:var(--fs-lg)}
.form-screen input:not([type=checkbox]):not([type=radio]):not([type=file]),.form-screen select:not([multiple]){height:46px}
.brand-colors input[type=radio],.form-screen .brand-colors input[type=radio]{width:18px;height:18px;min-height:0;padding:0;flex:none;margin:0;accent-color:var(--primary)}
input,select,textarea{font-size:var(--fs-md)}

.form-actions .btn{white-space:normal}

/* Las cifras se alinean con el borde de la columna: sin sangría en los extremos. */

.page-tabs{display:flex;align-items:stretch;gap:var(--s5);flex-wrap:wrap;border-bottom:1px solid var(--line-2);margin-bottom:var(--s5)}
.page-tabs>a{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 0 var(--s3);color:var(--muted);font-size:var(--fs-md);border-bottom:3px solid transparent}
.page-tabs>a:hover{color:var(--ink)}
.page-tabs>a.is-active{font-weight:700;color:var(--ink);border-bottom-color:var(--tea)}
.page-tabs .n{background:var(--hover);font-size:var(--fs-2xs);padding:1px 6px;border-radius:var(--r-sm)}
.work-filter{margin-bottom:var(--s5);flex-wrap:wrap}
.brand-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--line-2);margin-bottom:var(--s5)}
.brand-overview small{display:block;color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s2)}
.brand-overview strong{font-size:var(--fs-xl)}
.brand-overview .next-date{font-size:var(--fs-lg)}
.brand-pending{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--s4)}

.brand-top .badge{margin-left:auto}
.brand-top .badge+.brand-go{margin-left:var(--s2)}
.page-tabs>.tab-out{margin-left:auto;display:flex;align-items:center;gap:var(--s1);min-height:48px;padding:0 0 var(--s3);color:var(--ink-2);font-size:var(--fs-sm);font-weight:700}
.page-tabs>.tab-out .i{width:var(--i-sm);height:var(--i-sm)}
.finance-scope{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);font-size:var(--fs-sm)}
.finance-scope>span{color:var(--muted)}
.finance-scope select{min-height:40px;height:40px;max-width:300px;width:auto;font-size:var(--fs-sm)}
.finance-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:var(--s5)}
.finance-stat{padding:var(--s5);min-width:0;display:grid;gap:var(--s2);color:var(--ink)}
.finance-stat+.finance-stat{border-left:1px solid var(--line)}
.finance-stat>span{font-size:var(--fs-md);font-weight:700}
.finance-stat strong{font-size:var(--fs-xl);line-height:1.2;letter-spacing:-1px}
.finance-stat small{font-size:var(--fs-xs);color:var(--muted)}
.finance-stat.result strong{color:var(--tea)}
.finance-stat:hover{background:var(--hover)}
.finance-overview{grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr)}
.next-payment{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4);background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s5)}
.next-payment h3{font-size:var(--fs-md);margin:var(--s2) 0 var(--s1);overflow-wrap:anywhere}
.next-payment p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.payment-action{text-align:right}
.payment-action>strong{display:block;font-size:var(--fs-xl);margin-bottom:var(--s3)}
.recent-section{margin-top:var(--s5)}
.finance-activity li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.finance-activity strong{font-size:var(--fs-sm);display:block;overflow-wrap:anywhere}
.finance-activity small{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:var(--s1)}
.finance-activity .num{font-size:var(--fs-sm)}
.activity-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hover);color:var(--muted)}
.activity-icon .i{width:var(--i-sm);height:var(--i-sm)}
.finance-brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.finance-brand>span:not(.mono){flex:1;min-width:0}
.finance-brand strong{font-size:var(--fs-md);display:block;overflow-wrap:anywhere}
.finance-brand small{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:var(--s1)}
.finance-brand b{font-weight:400;color:var(--ink)}
.finance-note{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s4);line-height:1.55}
.detail-amount{font-size:var(--fs-2xl);letter-spacing:-1px;line-height:1.25;font-weight:700;margin:var(--s4) 0}
.finance-table-wrap{overflow-x:auto}
.finance-table{font-size:var(--fs-sm)}
.finance-table th{background:var(--surface);font-weight:400;border-color:var(--line);padding:var(--s3) var(--s4);font-size:var(--fs-xs)}
.finance-table td{padding:var(--s4)}
.finance-table td strong,.finance-table td small{display:block}
.finance-table td small{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s1)}
.finance-table .row-title{min-width:160px;overflow-wrap:anywhere}
.finance-table td.num{white-space:nowrap}
.row-link:hover{text-decoration:underline;text-underline-offset:3px}

.facts dt,.facts dd{font-size:var(--fs-sm)}
.agenda-mini a,.mini li{font-size:var(--fs-sm)}

:target{scroll-margin-top:80px}

@media(max-width:1150px){
  .finance-overview{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:641px) and (max-width:1280px){
  .finance-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finance-stat:nth-child(odd){border-left:0}
  .finance-stat:nth-child(n+3){border-top:1px solid var(--line)}
}

@media(max-width:640px){
  .main{padding:var(--s5) var(--s4) var(--s6)}
  .pagehead-row{align-items:flex-start}
  .pagehead-actions{width:100%;display:flex;flex-wrap:wrap}
  .cal-tools{width:100%;align-items:flex-start}
  .pagehead-actions .btn{white-space:normal}
  .panel{padding:var(--s4);margin-bottom:var(--s4)}
  .sec-head h2{font-size:var(--fs-lg)}
  .page-tabs{gap:0 var(--s4);margin-bottom:var(--s5)}
  .page-tabs>a{font-size:var(--fs-sm);min-height:44px;padding-bottom:var(--s2)}
  .finance-stats{grid-template-columns:1fr}
  .finance-stat{grid-template-columns:minmax(0,1fr) auto;padding:var(--s4);gap:var(--s1) var(--s2)}
  .finance-stat+.finance-stat{border-left:0;border-top:1px solid var(--line)}
  .finance-stat strong{grid-column:2;grid-row:1 / span 2;font-size:var(--fs-lg);align-self:center;letter-spacing:-.5px}
  .finance-stat>span{font-size:var(--fs-sm)}
  .finance-stat small{font-size:var(--fs-2xs)}
  .next-payment{grid-template-columns:1fr;padding:var(--s4);gap:var(--s4)}
  .payment-action{text-align:left;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
  .payment-action>strong{font-size:var(--fs-xl);margin:0}
  .finance-activity{max-width:100%}
  .finance-activity li{grid-template-columns:26px minmax(0,1fr);gap:var(--s2)}
  .finance-activity li>.num{grid-column:2;overflow-wrap:anywhere;white-space:normal}
  .finance-table-wrap{overflow:visible}
  .finance-table,.finance-table tbody{display:block}
  .finance-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .finance-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
  .finance-table tr:last-child{border:0}
  .finance-table td{display:block;padding:0;border:0;min-width:0}
  .finance-table .row-title{grid-column:1 / -1;min-width:0}
  .finance-table .row-title strong{font-size:var(--fs-md)}
  .finance-table td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-size:var(--fs-2xs);font-weight:400;margin-bottom:var(--s1)}
  .finance-table .row-action{grid-column:1 / -1;text-align:left}
  .finance-table .row-action .btn{width:100%}
  /* Movimientos: concepto + importe arriba, fecha y estado abajo; toda la fila abre el detalle. */
  .movement-table tr{position:relative;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);padding:var(--s3) 0}
  .movement-table .row-title{grid-column:1;grid-row:1}
  .movement-table td.num{grid-column:2;grid-row:1;font-weight:700;text-align:right}
  .movement-table td.num::before{content:none}
  .movement-table td[data-label]:not(.num){grid-row:2;font-size:var(--fs-xs);color:var(--muted)}
  .movement-table td[data-label]:not(.num)::before{display:inline;margin:0 var(--s1) 0 0}
  .movement-table td[data-label="Estado"]{grid-column:2;justify-self:end}
  .movement-table td[data-label="Estado"]::before{content:none}
  .movement-table .row-action{display:none}
  .movement-table .row-link::after{content:"";position:absolute;inset:0}
  .finance-scope>span{flex-basis:100%}
  .finance-scope label{flex:1}
  .finance-scope select{max-width:none;width:100%}
  .ledger{flex-wrap:nowrap}
  .ledger li{flex:1 1 0}
  .ledger a{padding:var(--s3) var(--s2);font-size:var(--fs-xs);line-height:1.35}
  .ledger strong{display:block;margin:0 0 2px}
  .brand-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);padding:0 0 var(--s4);margin-bottom:var(--s4)}
  .brand-overview small{font-size:var(--fs-2xs);margin-bottom:var(--s1)}
  .brand-overview strong{font-size:var(--fs-lg)}
  .brand-overview .next-date{font-size:var(--fs-sm)}
  .brand-card{padding:var(--s4);gap:var(--s2)}
  .page-tabs>.tab-out{min-height:44px;padding-bottom:var(--s2)}
  .trow-date{font-size:var(--fs-xs)}
  .toolbar .chips{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tabs-row{flex-wrap:nowrap}
  .tabs-row>.page-tabs{flex-wrap:nowrap}
  .toolbar{overflow:visible}
  .inline-filter{flex-wrap:wrap;max-width:100%}
  .inline-filter select{max-width:210px}
}

/* ---------- Rediseño editorial: detalles ---------- */
.meta .jump-state{display:none}
.meta .jump-state.is-on{display:flex}
.movement-table tr{position:relative}
.movement-table tbody tr:hover{background:var(--hover)}
.movement-table .row-link::after{content:"";position:absolute;inset:0}
.foot{letter-spacing:0;font-weight:400}
@media(max-width:960px){
  .meta .jump-state{display:flex}
}
@media(max-width:640px){
  .page-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .page-tabs>a{flex:none}
}

/* ---------- Filtro instantáneo (menú de enlaces, sin JavaScript) ---------- */
.filter-menu{position:relative}
.filter-menu>summary{display:inline-flex;align-items:center;gap:var(--s1);min-height:40px;padding:0 var(--s3);background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r);font-size:var(--fs-sm);cursor:pointer;list-style:none}
.filter-menu>summary::-webkit-details-marker{display:none}
.filter-menu>summary::after{content:"";width:7px;height:7px;margin-left:var(--s2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.filter-menu .fm-label{color:var(--muted)}
.filter-menu[open]>summary{border-color:var(--ink)}
.filter-menu ul{position:absolute;z-index:20;top:calc(100% + 4px);left:0;min-width:100%;max-width:min(320px,90vw);max-height:320px;overflow:auto;padding:var(--s1);background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-hover)}
.filter-menu li a{display:block;min-height:40px;padding:10px var(--s3);border-radius:var(--r-sm);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filter-menu li a:hover{background:var(--hover)}
.filter-menu li a[aria-current]{font-weight:700;background:var(--hover)}
@media(max-width:640px){
  .filter-menu,.filter-menu>summary{width:100%}
  .filter-menu ul{right:0;max-width:none}
}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}

/* Validación del servidor: texto asociado al control, sin depender solo del color. */
[aria-invalid=true]{border-color:var(--red)}
.field-error{color:var(--red);font-weight:700}
/* Ficha de rol: permisos con explicación */
.perm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s2)}
.perm{align-items:flex-start;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.perm span{display:grid;gap:2px}
.perm small{color:var(--muted);font-size:var(--fs-xs);font-weight:400}
.auth-link{display:inline-block;margin-top:var(--s3);padding-block:10px;font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.copy-field{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-xs)}
.steps{margin:var(--s2) 0 0;padding-left:var(--s5);display:grid;gap:var(--s2);font-size:var(--fs-sm)}
.steps li{list-style:decimal}