/* Shared application components. All colors inherit the active THL theme. */
@media screen {
  * { scrollbar-color:var(--fg2) var(--bg2); }
  ::-webkit-scrollbar { width:12px;height:12px; }
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner { background:var(--bg2); }
  ::-webkit-scrollbar-thumb { background:var(--fg2);border:3px solid var(--bg2);border-radius:12px; }
  ::-webkit-scrollbar-thumb:hover { background:var(--fg); }
}
/* Direction follows the sidebar state; theme remains an accessible icon control. */
#sidebarToggle i { display:inline-block;transition:transform .18s ease; }
#sidebarToggle.sidebar-is-expanded i { transform:scaleX(-1); }
.sidebar-footer #sidebarTheme { width:44px;height:44px;min-height:44px;margin-left:auto;margin-right:auto;padding:0;border:0;background:transparent;box-shadow:none;justify-content:center; }
.sidebar.expanded .sidebar-footer #sidebarTheme,.sidebar.open .sidebar-footer #sidebarTheme { margin-left:0;margin-right:auto; }
.sidebar-footer #sidebarTheme:hover { background:transparent;color:var(--ac); }
.sidebar-footer #sidebarTheme:focus-visible { outline:2px solid var(--ac);outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ #sidebarToggle i { transition:none; } }
@media screen {
  :root { --control-height: 2.75rem; --content-width: 100rem; --row-space: var(--ui-row-pad-lg); }
  .hamburger { display: inline-flex; flex-shrink: 0; width: var(--control-height); height: var(--control-height); }
  .sidebar-search { display:none; padding: .75rem .75rem .25rem; }
  .sidebar.expanded .sidebar-search,.sidebar.open .sidebar-search { display:block; }
  .sidebar-search input { width:100%; min-width:0; min-height:var(--control-height); border:1px solid var(--bo); border-radius:var(--rd); padding:.5rem .75rem; background:var(--bg2); color:var(--fg); font:inherit; font-size:.85rem; }
  .sidebar-nav .nav-filtered { display:none; }
  body:has(.sidebar.open) .pwa-banner { display: none; }
  .btn-p,.user-badge .avatar,.sidebar-footer .avatar,.user-avatar-sm { color: var(--on-ac); }
  .bdg { border-radius: .4rem; }
  .bdg-neutral { color:var(--fg2); background:var(--bg3); }
  #v-whatsapp-chat,#v-assistant,[data-theme="light"] #v-whatsapp-chat,[data-theme="light"] #v-assistant {
    --wa-side:var(--bg);--wa-head:var(--bg3);--wa-hover:var(--bgh);--wa-act:var(--acg);
    --wa-chat:var(--bg2);--wa-in:var(--bg);--wa-out:var(--acg);--wa-out-fg:var(--fg);--wa-in-fg:var(--fg);
    --wa-muted:var(--fg2);--wa-line:var(--bo);--wa-accent:var(--ac);--wa-tick:var(--bl);--wa-fail:var(--da);
    --wa-input:var(--bg);--wa-compose:var(--bg3);--wa-chip:var(--bg);
  }
  .act-menu { margin: 0; overflow-y: auto; max-width: calc(100vw - 1rem); }
  .act-menu:popover-open { display: flex; }
  .mc { min-width:var(--control-height); min-height:var(--control-height); }
  .m .mh { position:sticky; top:0; background:var(--bg); z-index:2; }
  .m > .mf { position:sticky; bottom:0; background:var(--bg); z-index:2; }
  .config-tabs button.act { color:var(--on-ac); }
  .app > .v { max-width: var(--content-width); margin-inline: auto; }
  #workspaceTitle { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-subtitle { display: none; }
  .cd.list-shell { padding: 1.5rem; box-shadow: none; }
  .list-shell > .ct { font-size: 1.15rem; color: var(--fg); letter-spacing: -.025em; border: 0; padding-bottom: .25rem; }
  .h-s { gap: .75rem; padding-bottom: .5rem; }
  .toolbar-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
  .h-s input { flex: 1 1 16rem; width: auto; min-width: 0; }
  .h-s input,.h-s select,.btn,.act-kebab,.list-pager-size select,.h-s .ui-field { min-height: var(--control-height); }
  .list-scroll { border: 1px solid var(--bo); border-radius: var(--rd); scrollbar-gutter: stable; }
  .list-scroll .tbl th { text-transform: none; letter-spacing: 0; font-size: .78rem; padding: .8rem 1rem; }
  .list-scroll .tbl td { padding: var(--row-space) 1rem; font-variant-numeric: tabular-nums; }
  .list-scroll .tbl tr:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
  .list-scroll .tbl td.col-act { padding-inline: .5rem; }
  .act-kebab { min-width: var(--control-height); border: 1px solid var(--bo); font-size:1.15rem; }
  .list-pager { padding-top: 1rem; }
  .tw.list-scroll { overscroll-behavior:contain; }
  .bdg-pagada,.bdg-aprobada { color: var(--ac); background: var(--acg); }
  .bdg-tipo-ambos { color: var(--bl); background: color-mix(in srgb,var(--bl) 15%,transparent); }
  .skip-link { position: fixed; top: -10rem; left: 1rem; z-index: 3000; background: var(--bg); color: var(--fg); padding: 1rem; }
  .skip-link:focus { top: 1rem; }
  @media (max-width: 1023px) {
    .msg-shell:not(.has-chat) > .chat-panel { display:none; }
    .msg-shell > .msg-sidebar { position:relative; inset:auto; width:100%; grid-area:1 / 1; }
    .msg-shell > .chat-panel { grid-area:1 / 1; }
    .msg-side-title { gap:.75rem; min-width:0; }
    #v-assistant .msg-side-title #aiNewThread { position:absolute; right:1rem; bottom:max(1rem,var(--safe-b)); z-index:3; width:3rem; min-width:3rem; height:3rem; padding:0; border-radius:50%; background:var(--ac); color:var(--on-ac); border:1px solid var(--bo); box-shadow:0 .2rem .6rem var(--bo); font-size:1.35rem; justify-content:center; }
    #aiNewThread .ai-new-label { display:none; }
    #aiThreadList { padding-bottom:5rem; }
  }
  @media (max-width: 767px) {
    :root,[data-theme="dark"],[data-theme="light"] { --mobile-gutter:.5rem; --mobile-panel-space:.5rem; --list-h:calc(100dvh - var(--header-h) - var(--safe-t) - var(--safe-b) - 1rem); }
    .toolbar-actions { margin-left: 0; width: 100%; }
    .toolbar-actions .btn { flex: 1; }
    .header-brand { display: none; }
    #workspaceTitle { font-size: .9rem; }
    #app-main:not(:has(#v-assistant.act,#v-whatsapp-chat.act)) { padding:calc(var(--header-h) + var(--safe-t) + var(--mobile-gutter)) max(var(--mobile-gutter),var(--safe-r)) max(var(--mobile-gutter),var(--safe-b)) max(var(--mobile-gutter),var(--safe-l))!important; }
    .cd:not(.msg-shell),.cd.list-shell { padding:var(--mobile-panel-space); margin-bottom:.75rem; }
    .list-shell > .ct { margin-bottom:.5rem; }
    .h-s { gap:.5rem; margin-bottom:.5rem; }
    .list-shell > p { margin-inline:0!important; }
    .list-frame,.tw.list-scroll { flex: 1 1 auto; min-height:0; }
    .list-frame { overflow:hidden; }
    .tw.list-scroll { overflow:auto; }
    .list-scroll { border: 0; scrollbar-gutter:auto; }
    /* Búsqueda y filtros comparten renglón. Antes la búsqueda ocupaba el ancho
       completo y el disparador de filtros bajaba a un segundo renglón: 104 px
       de cabecera en cada lista, sobre una pantalla de 820. */
    .h-s { flex-wrap: wrap; gap: .5rem; align-items: center; }
    .h-s > input:not([type="date"]):not([type="month"]),
    .h-s > .ui-field.has-search { flex: 1 1 0; width: auto; min-width: 0; font-size: 1rem; }
    .h-s > select,
    .h-s > .ui-field.has-chevron { width: 100%; flex-basis: 100%; font-size: 1rem; }
    .h-s > .filter-disclosure { flex: 0 0 auto; }
    .list-scroll .tbl,.list-scroll tbody { display: block; width: 100%; }
    .list-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    /* Listas en celular: hoja de cálculo, no fichas.
       La ficha por fila mostraba todo pero medía 121-179 px, así que en una
       pantalla entraban tres registros. Aquí la tabla sigue siendo una tabla:
       se desplaza en horizontal, la cabecera queda fija arriba y la primera
       columna fija a la izquierda, de modo que al mirar una cifra lejana se
       sigue sabiendo de quién es. Con filas de ~44 px entran doce. */
    .list-scroll { overflow: auto; overscroll-behavior: contain; }
    /* tbody debía volver a ser grupo de filas: quedándose en `block` la
       cabecera y el cuerpo dejaban de compartir columnas y los encabezados
       se iban fuera de la pantalla. */
    .list-scroll .tbl { display: table; width: max-content; min-width: 100%; }
    .list-scroll .tbl tbody { display: table-row-group; }
    .list-scroll .tbl thead { display: table-header-group; }
    .list-scroll thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .list-scroll .tbl thead th {
      position: sticky; top: 0; z-index: 3;
      padding: .5rem .7rem; font-size: .68rem; white-space: nowrap;
      background: var(--bg3); color: var(--fg2);
    }
    .list-scroll .tbl tbody tr { display: table-row; border: 0; margin: 0; background: transparent; }
    .list-scroll .tbl tbody tr + tr td { border-top: 1px solid var(--bo); }
    .list-scroll .tbl tbody td {
      display: table-cell; padding: var(--ui-row-pad) .7rem; border: 0;
      font-size: .8rem; line-height: 1.35; white-space: nowrap; max-width: 15rem;
      overflow: hidden; text-overflow: ellipsis; background: var(--bg);
    }
    /* La etiqueta de la ficha sobra: los encabezados vuelven a estar a la vista. */
    .list-scroll .tbl td::before { content: none; }
    /* Primera columna congelada, como el panel fijo de una hoja. */
    .list-scroll .tbl th:first-child,
    .list-scroll .tbl td:first-child {
      position: sticky; left: 0; z-index: 2;
      font-weight: 600; color: var(--fg);
      box-shadow: 1px 0 0 var(--bo);
    }
    .list-scroll .tbl thead th:first-child { z-index: 4; }
    .list-scroll .tbl td.col-act { width: 1%; padding: .15rem .35rem; text-align: right; }
    .list-scroll .tbl td.col-act::before { content: none; }
    /* El menú de fila se encoge para no marcar la altura de la fila. */
    .list-scroll .tbl td.col-act .act-kebab { width: 34px; height: 34px; min-width: 0; min-height: 0; font-size: var(--ui-icon); }
    .list-pager-nav { width: 100%; justify-content: space-between; }
    .fg input,.fg select,.fg textarea { font-size: 1rem; }
  }
}
/* Agenda en escritorio: el calendario va al lado, no encima.
   Apilados, un mes de seis semanas más el título, los filtros, las métricas y
   la paginación no caben en una pantalla de portátil y la lista quedaba en dos
   filas. A lo ancho sobra sitio, que es la composición de siempre en un
   calendario de escritorio: el periodo a la izquierda, lo que pasa ese periodo
   a la derecha. */
@media (min-width: 1024px) {
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    column-gap: 20px;
  }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .ct { grid-area: 1 / 1 / 2 / -1; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .h-s { grid-area: 2 / 1 / 3 / -1; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .agenda-overview { grid-area: 3 / 1 / 4 / -1; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .agenda-modes { grid-area: 4 / 1 / 5 / 2; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .agenda-calendar { grid-area: 5 / 1 / 7 / 2; align-self: start; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .emp { grid-area: 5 / 2 / 6 / 3; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .list-frame { grid-area: 4 / 2 / 6 / 3; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .list-pager { grid-area: 6 / 2 / 7 / 3; }
  /* En dos columnas la tabla es más estrecha y el texto largo partía las filas
     en tres líneas. Se mantiene una línea por registro y lo que no cabe se
     recorta: la fila completa sigue a un toque. */
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) .list-scroll { overflow: auto; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) .list-scroll .tbl { width: max-content; min-width: 100%; }
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) .list-scroll td,
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) .list-scroll th {
    white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis;
  }
  /* La leyenda no se va con el desplazamiento del calendario. */
  #v-agenda .list-shell:has(> .agenda-calendar:not([hidden])) > .agenda-calendar { overflow: visible; }
}

@media print { #workspaceTitle,.skip-link { display: none!important; } }

/* Shared chat composer, based on the THL workspace surfaces. */
@media screen {
  #v-assistant .assistant-main,#v-whatsapp-chat .chat-panel { min-width:0;min-height:0; }
  #v-assistant .assistant-messages { padding:24px max(20px,calc((100% - 860px)/2));gap:20px; }
  #v-assistant .bubble { max-width:100%;box-shadow:none;border:0;line-height:1.65; }
  #v-assistant .bubble.in { background:transparent;padding:8px 0;border-radius:0;align-self:stretch; }
  #v-assistant .bubble.out { max-width:85%;padding:12px 18px;border-radius:20px 20px 6px 20px; }
  #v-assistant .bubble .ai-copy { opacity:1;min-height:32px; }
  #v-assistant .assistant-compose,#v-whatsapp-chat .chat-compose { background:var(--wa-chat);border-top:0;padding:12px 20px max(12px,var(--safe-b));backdrop-filter:none; }
  #v-assistant .assistant-compose { padding-inline:max(20px,calc((100% - 900px)/2)); }
  .composer-surface { container-type:inline-size;position:relative;border:1px solid var(--bo2);border-radius:22px;background:var(--bg3);padding:6px;transition:border-color .18s; }
  .composer-surface:focus-within { border-color:var(--fg2); }
  #v-assistant #aiInput { display:block;width:100%;height:48px;min-height:48px;max-height:160px;padding:8px 10px;border:0;border-radius:0;background:transparent;color:var(--fg);font:inherit;font-size:16px;line-height:1.5;resize:none;overflow-y:auto;box-shadow:none; }
  #v-assistant #aiInput:focus { outline:none; }
  .composer-toolbar { display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0; }
  #v-assistant .compose-icon,#v-whatsapp-chat .compose-icon { width:44px;height:44px;flex:0 0 44px; }
  #v-assistant .composer-toolbar .compose-icon,#v-whatsapp-chat .composer-surface .compose-icon { border-radius:50%;background:var(--bgh);color:var(--fg2); }
  #v-assistant .composer-toolbar .compose-send,#v-whatsapp-chat .composer-surface .compose-send { background:var(--ac);color:var(--on-ac); }
  .composer-choice { display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;border-radius:10px;padding:0 8px;background:transparent;color:var(--fg2);font:inherit;font-size:.76rem;white-space:nowrap;flex-shrink:0;cursor:pointer; }
  .composer-choice:hover { background:var(--bgh);color:var(--fg); }
  .composer-choice select { max-width:150px;min-height:44px;border:0;appearance:none;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0 18px 0 4px; }
  .composer-choice option { background:var(--bg);color:var(--fg); }
  .composer-model { margin-left:auto;min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg2);font-size:.73rem; }
  .composer-toolbar button:focus-visible,.composer-choice select:focus-visible { outline:2px solid var(--ac);outline-offset:2px; }
  .composer-modules { position:absolute;bottom:calc(100% + 8px);left:0;width:min(420px,100%);max-height:min(360px,50dvh);overflow:auto;padding:18px;background:var(--bg);border:1px solid var(--bo2);border-radius:16px;box-shadow:0 8px 24px var(--bo);z-index:5; }
  .composer-modules[hidden] { display:none; }
  .composer-modules strong { font-size:.9rem; }
  .composer-modules p { color:var(--fg2);font-size:.78rem;line-height:1.5;margin:6px 0 12px; }
  .composer-module-options { display:grid;grid-template-columns:1fr 1fr;gap:4px; }
  .composer-module-options label { display:flex;align-items:center;gap:8px;min-height:44px;font-size:.8rem;cursor:pointer; }
  .composer-module-options input { width:18px;height:18px;accent-color:var(--ac); }
  #v-assistant .compose-note { padding:8px 8px 0;font-size:.7rem;line-height:1.4; }
  #v-assistant .compose-note .ai-shortcut { display:none; }
  #v-assistant .ai-empty { width:min(100%,720px);padding:32px 0;margin:auto; }
  #v-assistant .ai-empty-mark { background:transparent;border:0;width:40px;height:40px;justify-content:start;font-size:1.7rem; }
  .ai-empty-eyebrow { display:block;margin-top:20px;color:var(--fg2);font-size:.66rem;letter-spacing:.12em;font-weight:600; }
  #v-assistant .ai-empty h3 { margin-top:10px;font-size:clamp(1.55rem,3vw,2.25rem);font-weight:600;letter-spacing:-.04em; }
  #v-assistant .ai-starters { grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--bo); }
  #v-assistant .ai-starter { display:flex;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--bo);border-radius:0;min-height:64px;background:transparent; }
  #v-assistant .ai-starter i { margin:0; }
  #v-assistant .ai-starter:hover { background:var(--bgh);transform:none; }
  #v-whatsapp-chat .composer-surface { padding:6px;border-radius:22px; }
  #v-whatsapp-chat .compose-row { gap:6px;align-items:flex-end; }
  #v-whatsapp-chat #waChatInput { display:block;width:100%;border:0;background:transparent;color:var(--fg);font:inherit;resize:none;border-radius:0;font-size:16px;line-height:1.5;padding:8px 10px;height:48px;min-height:48px;max-height:160px;overflow-y:auto; }
  #v-whatsapp-chat #waChatInput:focus { outline:none; }
  .composer-channel { margin-left:auto;color:var(--fg2);font-size:.76rem;padding-inline:12px; }
  .composer-choice:has(select) { position:relative; }
  .composer-choice:has(select)::after { content:"⌄";position:absolute;right:10px;pointer-events:none; }
  .composer-surface .attach-preview { margin:0 4px 8px; }
  .composer-surface textarea::placeholder { color:var(--fg2);opacity:.85; }
  .composer-surface button:focus-visible { outline:2px solid var(--ac);outline-offset:2px; }
  #v-whatsapp-chat .chat-head,#v-assistant .chat-head { background:var(--bg);border-bottom:1px solid var(--bo); }
  .chat-messages { overflow-anchor:none;scrollbar-width:thin; }
  @media(max-width:1023px) {
    .app:has(#v-assistant.act),.app:has(#v-whatsapp-chat.act) { position:fixed;top:calc(var(--visual-top,0px) + var(--header-h) + var(--safe-t));left:0;right:0;height:calc(var(--visual-height,100dvh) - var(--header-h) - var(--safe-t));padding:0!important;overflow:hidden; }
    #v-assistant.act,#v-whatsapp-chat.act,#v-assistant .assistant-shell,#v-whatsapp-chat .msg-shell { height:100%;max-height:100%;min-height:0;margin:0; }
    #v-assistant .assistant-compose,#v-whatsapp-chat .chat-compose { padding:8px max(8px,var(--safe-r)) max(8px,var(--safe-b)) max(8px,var(--safe-l)); }
    #v-assistant .assistant-messages { padding:12px;gap:14px; }
    #v-assistant .composer-surface { border-radius:20px;padding:6px; }
    #v-assistant #aiInput { min-height:48px;height:48px;padding:6px 8px; }
    .composer-toolbar { gap:0; }
    .composer-choice { padding-inline:5px;font-size:.72rem; }
    .composer-choice select { max-width:125px;padding-inline:0; }
    .composer-model { display:none; }
    .composer-effort { margin-left:auto; }
    #aiModulesBtn { order:5;width:100%;justify-content:flex-start;min-height:32px;padding-left:10px; }
    #v-assistant .ai-empty { padding:16px 4px; }
    #v-assistant .ai-starters { grid-template-columns:1fr; }
    .chat-keyboard-open #v-assistant .compose-note { display:none; }
    .chat-keyboard-open #v-assistant .assistant-head { min-height:44px;padding-block:4px; }
    .chat-keyboard-open #aiModulesBtn { display:none; }
    .chat-keyboard-open #v-assistant #aiInput { min-height:44px;height:44px;max-height:90px; }
  }
  @media(prefers-reduced-motion:reduce) { .composer-surface { transition:none; } }
}
@media screen {
  #v-assistant .chat-messages { background-image:none; }
  #v-assistant .ai-empty { text-align:left; }
  #v-assistant .ai-empty-mark { margin-left:0;margin-right:0; }
  @media(max-width:1023px) {
    #v-assistant .composer-toolbar { display:grid;grid-template-columns:44px minmax(0,1fr) 90px 44px;align-items:center; }
    #v-assistant .composer-choice { min-width:0;gap:3px;padding-inline:3px; }
    #v-assistant .composer-choice select { min-width:0;width:100%;max-width:100%;font-size:12px; }
    #v-assistant .composer-effort { margin:0; }
    #v-assistant #aiModulesBtn { grid-column:1 / -1;order:5;min-height:36px; }
    #v-assistant .ai-empty h3 { font-size:1.65rem; }
  }
}
@media screen {
  .filter-date { display:flex;align-items:center;gap:6px;color:var(--fg2);font-size:.8rem; }
  .filter-date input { min-width:0;width:145px; }
  .payment-total-card { display:flex;align-items:center;gap:14px;width:min(100%,360px);margin:2px 0 16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--ac) 28%,var(--bo));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 12%,var(--bg)),var(--bg));box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
  .payment-total-icon { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--ac);color:var(--on-ac);font-size:1.15rem; }
  .payment-total-copy { display:grid;min-width:0;line-height:1.15; }
  .payment-total-copy small { color:var(--fg2);font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em; }
  .payment-total-copy strong { margin-top:4px;color:var(--fg);font-size:1.45rem;letter-spacing:-.035em;font-variant-numeric:tabular-nums; }
  .payment-total-copy span { margin-top:5px;color:var(--fg2);font-size:.72rem; }
  .agenda-overview { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:40rem;margin:2px 0 16px; }
  .agenda-overview .agenda-metric { display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;border:1px solid var(--bo);border-radius:12px;background:var(--bg3); }
  .agenda-metric-copy { display:flex;flex-direction:column;gap:4px;min-width:0;line-height:1.15; }
  .agenda-metric-copy small,.agenda-metric-copy strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .agenda-metric-copy small { color:var(--fg2);font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em; }
  .agenda-metric-copy strong { color:var(--fg);font-size:1.2rem;font-variant-numeric:tabular-nums; }
  .agenda-metric-icon { display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--ac) 14%,var(--bg));color:var(--ac);overflow:hidden; }
  .agenda-metric-icon i { font-size:1.05rem;line-height:1; }
  .agenda-overview .is-late .agenda-metric-icon { background:color-mix(in srgb,var(--da) 14%,var(--bg));color:var(--da); }
  .agenda-overview .is-done .agenda-metric-icon { background:var(--acg);color:var(--ac); }
  .agenda-priority-alta { color:var(--da);font-weight:650; }
  .agenda-priority-media { color:var(--fg); }
  .agenda-priority-baja { color:var(--fg2); }
  .agenda-row-late td:first-child { color:var(--da);font-weight:650; }
  .payment-reconcile { border-top:1px solid var(--bo);margin-top:16px;padding-top:16px; }
  .payment-reconcile h4 { margin:0 0 8px; }
  .payment-reconcile p { font-size:.8rem;line-height:1.5; }
  /* El detalle de una gestión se explaya cuando hay ancho. En celular ese
     tope de 48rem dejaba la columna en 764 px, empezando fuera de la pantalla:
     se veían la fecha y el cliente, y el texto del movimiento no aparecía. */
  @media (min-width:768px) {
    #regBody td:nth-child(4) { white-space:normal;overflow-wrap:anywhere;max-width:48rem; }
  }
  .sidebar:not(.expanded):not(.open) .sidebar-nav button { position:relative; }
  .sidebar:not(.expanded):not(.open) .sidebar-nav button:hover::after,
  .sidebar:not(.expanded):not(.open) .sidebar-nav button:focus-visible::after {
    content:attr(title);position:fixed;left:82px;padding:6px 9px;border:1px solid var(--bo);
    border-radius:7px;background:var(--bg);color:var(--fg);font-size:.75rem;box-shadow:var(--sh);z-index:2100;
  }
  @media(max-width:767px) {
    /* Resúmenes de módulo en celular: una tira, no tarjetas.
       Apiladas ocupaban unos 180 px en Agenda y 139 px en Pagos, sobre una
       cabecera que ya llevaba título y filtros: en Agenda quedaban 357 px de
       preámbulo y una fila y media de datos. La cifra es lo que se consulta;
       el marco, el degradado y la sombra no aportan nada en 390 px. Queda el
       icono, que distingue las tres de un vistazo, la cifra y su rótulo. */
    .agenda-overview,
    .payment-total-card {
      display:flex; align-items:center; gap:0; width:100%; max-width:none;
      margin:0 0 .5rem; padding:0;
      border:1px solid var(--bo); border-radius:var(--rd);
      background:var(--bg3); box-shadow:none;
    }
    .agenda-overview .agenda-metric,
    .payment-total-card {
      padding:.4rem .5rem;
    }
    .agenda-overview .agenda-metric {
      /* Reparto por contenido, no en tercios: «Completadas» es tres veces más
         largo que «Hoy» y con anchos iguales se cortaba justo el rótulo que
         nombra la tarjeta. */
      flex:1 1 auto; min-width:0; gap:.35rem;
      border:0; border-radius:0; background:transparent;
    }
    .agenda-overview .agenda-metric:first-child { flex-grow:0; }
    /* Separador fino en vez de tres marcos. */
    .agenda-overview .agenda-metric + .agenda-metric { border-left:1px solid var(--bo); }
    .agenda-metric-copy { flex:1 1 auto; flex-direction:row; align-items:baseline; gap:.35rem; min-width:0; }
    .agenda-metric-copy small { font-size:.58rem; letter-spacing:.02em; order:2; overflow:hidden; text-overflow:ellipsis; }
    .agenda-metric-copy strong { font-size:.95rem; order:1; flex:0 0 auto; }
    .agenda-metric-icon { flex-basis:24px; width:24px; height:24px; border-radius:7px; }
    .agenda-metric-icon i { font-size:var(--ui-icon-sm); }

    /* Agenda en celular: lo que se viene a ver es la lista.
       El mes ocupaba 235 px, los controles 86 en dos renglones y la paginación
       111, así que al scroller le quedaban 101: dos filas. Aquí los controles
       caben en un renglón, las casillas encogen y la lista tiene un mínimo por
       debajo del cual el calendario cede en vez de aplastarla. */
    .agenda-modes { margin-bottom:.4rem; gap:4px; flex-wrap:nowrap; }
    .agenda-modes > .ui-tool { width:34px; min-width:34px; height:34px; }
    .agenda-period { margin-left:auto; gap:4px; min-width:0; flex:1 1 auto; justify-content:flex-end; }
    .agenda-period .ui-tool { width:34px; min-width:34px; height:34px; }
    .agenda-period strong { min-width:0; flex:1 1 auto; text-align:center;
      font-size:.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .agenda-calendar { margin-bottom:.4rem; touch-action:pan-y; }
    .agenda-grid { gap:1px 0; }
    .agenda-grid-head { font-size:.58rem; padding-bottom:4px; }
    .agenda-day { padding:1px 0 3px; gap:2px; border-radius:10px; }
    /* El disco baja a 28 px: sigue por encima del mínimo cómodo porque la zona
       pulsable es la casilla entera, no solo el círculo. */
    .agenda-day-num { width:28px; height:28px; font-size:.78rem; }
    .agenda-dots { height:5px; gap:2px; }
    .agenda-dot { width:4px; height:4px; }
    .agenda-legend { gap:3px 10px; margin-top:6px; font-size:.62rem; }

    /* Paginación en un renglón: en esta vista cada píxel sale de la lista. */
    .list-pager { flex-wrap:nowrap; gap:8px; padding-top:.4rem; margin-top:.4rem; }
    /* El rango es el dato; «Filas» es un rótulo que el desplegable ya explica
       en su nombre accesible, así que cede el sitio primero. */
    .list-pager-size { flex:0 0 auto; }
    .list-pager-size .btn-label { display:none; }
    .list-pager-size select { min-height:34px; }
    .list-pager-range { flex:0 1 auto; white-space:nowrap; text-align:center; }
    .list-pager-nav .btn { width:34px; min-width:34px; min-height:34px; }

    /* Por debajo de 360 px la cifra y el rótulo no caben lado a lado: se apilan
       y cada uno recupera el ancho entero de su tarjeta. */
    @media (max-width: 360px) {
      .agenda-overview .agenda-metric { gap:.3rem; }
      .agenda-metric-copy { flex-direction:column; align-items:flex-start; gap:0; }
      .agenda-metric-copy strong { font-size:.88rem; line-height:1.15; }
      .agenda-metric-copy small { font-size:.55rem; }
      .agenda-metric-icon { flex-basis:20px; width:20px; height:20px; border-radius:6px; }
    }

    /* Pagos: icono, importe y contexto en un renglón. */
    .payment-total-card { gap:.5rem; }
    .payment-total-icon { flex-basis:30px; width:30px; height:30px; border-radius:9px; font-size:var(--ui-icon-sm); }
    .payment-total-copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .4rem; }
    .payment-total-copy small { font-size:.6rem; order:2; }
    .payment-total-copy strong { margin-top:0; font-size:1.05rem; order:1; }
    .payment-total-copy span { margin-top:0; width:100%; font-size:.66rem; }
    #v-agenda .filter-date { flex:1 1 100%;min-width:0; }
    #v-agenda .filter-date input { width:100%; }
    #agendaModal .m { width:100%;max-width:none; }
  }
}

@media screen {
  @container (max-width:680px) {
    #aiModulesBtn { width:44px;padding:0;justify-content:center; }
    #aiModulesLabel,#aiModulesBtn > i:last-child { display:none; }
    .composer-model { max-width:140px; }
  }
  @media(max-width:1023px) {
    #v-assistant #aiModulesBtn { width:100%;justify-content:flex-start;padding-inline:10px; }
    #aiModulesLabel,#aiModulesBtn > i:last-child { display:inline; }
  }
}

@media screen {
  #v-assistant .compose-icon[hidden],#v-whatsapp-chat .compose-icon[hidden] { display:none; }
  #v-assistant .composer-toolbar .compose-stop { background:var(--fg);color:var(--bg);font-size:1rem; }
  #v-assistant .composer-toolbar .compose-stop:disabled { opacity:.45;cursor:wait; }
  #v-assistant .composer-choice { font-size:.73rem;padding-inline:5px; }
  #v-assistant .composer-model { font-size:.73rem; }
}

/* ═══════ Menú de adjuntar del compositor ═══════ */
@media screen {
  .composer-anchor { position:relative;display:inline-flex;flex:0 0 auto; }
  .composer-menu {
    position:absolute;bottom:calc(100% + 10px);left:0;z-index:6;
    width:min(300px,calc(100vw - 32px));max-height:min(62dvh,460px);overflow:auto;overscroll-behavior:contain;padding:8px;
    border:1px solid var(--bo2);border-radius:18px;background:var(--bg);
    box-shadow:var(--sh2);
  }
  .composer-menu[hidden] { display:none; }
  .composer-menu > strong { display:block;padding:6px 10px 8px;color:var(--fg2);font-size:.68rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase; }
  .composer-menu button {
    display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;
    border:0;border-radius:12px;background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer;
    transition:background .14s ease;
  }
  .composer-menu button:hover { background:var(--bgh); }
  .composer-menu button:focus-visible { outline:2px solid var(--ac);outline-offset:-2px; }
  .composer-menu-icon { display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:var(--bg3);color:var(--ac);font-size:1.2rem; }
  .composer-menu-copy { display:grid;gap:1px;min-width:0;font-size:.87rem;font-weight:600;letter-spacing:-.01em; }
  .composer-menu-copy small { color:var(--fg2);font-size:.71rem;font-weight:400; }
  /* Misma especificidad que `.composer-menu button`, o la cámara nunca se ocultaría. */
  .composer-menu button.composer-menu-touch { display:none; }
  @media (pointer:coarse) { .composer-menu button.composer-menu-touch { display:flex; } }
  @media (max-width:1023px) { .composer-menu { width:min(300px,calc(100vw - 24px)); } }
  @media (prefers-reduced-motion:reduce) { .composer-menu button { transition:none; } }
}

/* ═══════ Desplegables y campos de configuración ═══════ */
@media screen {
  .select-shell { position:relative;display:block; }
  .select-shell select {
    appearance:none;-webkit-appearance:none;width:100%;padding-right:40px;cursor:pointer;
    background:var(--bg3);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .select-shell.has-side select { padding-right:78px; }
  .select-shell > i {
    position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;
    color:var(--fg2);font-size:.95rem;transition:color .16s ease,transform .18s ease;
  }
  .select-shell.has-side > i { right:51px; }
  .select-shell:hover select { background:var(--bgh);border-color:var(--bo2); }
  .select-shell:hover > i { color:var(--fg); }
  .select-shell:focus-within > i { color:var(--ac);transform:translateY(-50%) rotate(180deg); }
  .select-shell select:disabled { opacity:.55;cursor:not-allowed; }
  .select-shell select option { background:var(--bg);color:var(--fg);padding:8px; }
  .field-side {
    position:absolute;right:5px;top:50%;transform:translateY(-50%);
    display:grid;place-items:center;width:34px;height:34px;padding:0;
    border:0;border-radius:9px;background:transparent;color:var(--fg2);font-size:1rem;cursor:pointer;
    transition:background .16s ease,color .16s ease;
  }
  .field-side::before { content:'';position:absolute;left:-5px;top:6px;bottom:6px;width:1px;background:var(--bo); }
  .field-side:hover { background:var(--bgh);color:var(--ac); }
  .field-side:disabled { opacity:.4;cursor:wait; }
  .field-side:focus-visible { outline:2px solid var(--ac);outline-offset:1px; }
  .field-hint { display:block;margin-top:5px;color:var(--fg2);font-size:.7rem;line-height:1.4; }
  .field-hint:empty { display:none; }
  .field-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:4px; }
  .fg[hidden],.field-actions [hidden] { display:none!important; }
}

/* ═══════ Llamada en tiempo real ═══════ */
@media screen {
  .voice-config { margin-top:24px;padding-top:20px;border-top:1px solid var(--bo); }
  .voice-config h3 { font-size:1rem;font-weight:600;margin:0 0 8px; }
  .voice-config p { color:var(--fg2);font-size:.78rem;line-height:1.5; }

  /* El teléfono del compositor descuelga y cuelga: en rojo mientras hay línea. */
  #v-assistant #aiVoiceBtn.is-live { background:var(--da);color:#fff;animation:voice-halo 2.2s ease-out infinite; }
  #v-assistant #aiVoiceBtn.is-live:hover { background:color-mix(in srgb,var(--da) 84%,#000);color:#fff; }

  /* El micrófono flota sobre el compositor en lugar de empujar la conversación. */
  #v-assistant .assistant-compose { position:relative; }
  .voice-float {
    position:absolute;right:max(20px,calc((100% - 900px)/2));bottom:100%;margin-bottom:12px;z-index:4;
    display:grid;place-items:center;width:52px;height:52px;padding:0;
    /* Azul con el micrófono abierto; rojo (aria-pressed) cuando está silenciado. */
    border:1px solid var(--bl);border-radius:50%;
    background:var(--bl);color:#fff;font-size:1.25rem;cursor:pointer;
    box-shadow:
      0 14px 34px -16px rgba(0,0,0,.55),
      0 0 0 calc(2px + var(--level,0) * 9px) color-mix(in srgb,var(--bl) 26%,transparent);
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .1s ease-out;
  }
  .voice-float[hidden] { display:none; }
  .voice-float:hover { transform:translateY(-2px); }
  .voice-float:active { transform:scale(.94); }
  .voice-float:focus-visible { outline:2px solid var(--ac);outline-offset:3px; }
  .voice-float[aria-pressed="true"] {
    background:var(--da);border-color:var(--da);color:#fff;
    box-shadow:0 14px 34px -16px var(--da);
  }

  /* Fuera del asistente la llamada sigue viva: el micrófono flota en la esquina
     para silenciar. Azul abierto, rojo silenciado, igual que dentro del asistente. */
  .voice-mic-float {
    position:fixed;right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));z-index:2500;
    display:grid;place-items:center;width:56px;height:56px;padding:0;
    border:1px solid var(--bl);border-radius:50%;
    background:var(--bl);color:#fff;font-size:1.35rem;cursor:pointer;
    box-shadow:
      0 14px 34px -16px rgba(0,0,0,.55),
      0 0 0 calc(2px + var(--level,0) * 9px) color-mix(in srgb,var(--bl) 26%,transparent);
    transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .1s ease-out;
  }
  .voice-mic-float[hidden] { display:none; }
  .voice-mic-float:hover { transform:translateY(-2px); }
  .voice-mic-float:active { transform:scale(.94); }
  .voice-mic-float:focus-visible { outline:2px solid var(--bl);outline-offset:3px; }
  .voice-mic-float[aria-pressed="true"] {
    background:var(--da);border-color:var(--da);
    box-shadow:0 14px 34px -16px var(--da);
  }

  @keyframes voice-halo { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--da) 55%,transparent); } 70%,100% { box-shadow:0 0 0 13px transparent; } }

  @media(max-width:1023px) {
    #v-assistant .composer-toolbar { grid-template-columns:44px minmax(0,1fr) 78px 44px 44px; }
    .voice-float { right:16px;width:48px;height:48px;font-size:1.15rem;margin-bottom:10px; }
  }
  @media(prefers-reduced-motion:reduce) {
    .voice-float,.voice-mic-float { transition:none; }
    #v-assistant #aiVoiceBtn.is-live { animation:none; }
  }
}
.pending-detail { width:min(560px,calc(100vw - 32px));max-height:80dvh;overflow:auto;padding:24px;border:1px solid var(--bo);border-radius:var(--rd);background:var(--bg);color:var(--fg); }
.pending-detail::backdrop { background:rgba(0,0,0,.5); }
.filter-disclosure-panel { display:contents; }
.filter-disclosure-panel[hidden],.filter-disclosure[hidden] { display:none!important; }
@media(max-width:1023px){
 .filter-disclosure-panel { display:flex;flex-wrap:wrap;gap:8px;width:100%; }
 .filter-disclosure-panel > select,.filter-disclosure-panel > input,
 .filter-disclosure-panel > .ui-field { flex:1 1 180px;min-width:0; }
 .filter-disclosure-panel .filter-date { flex:1 1 180px; }
 .filter-disclosure-panel .filter-date input { flex:1;min-width:0; }
}
/* Native detail dialogs must override the application-wide margin reset. */
dialog.pending-detail { position:fixed;inset:0;margin:auto;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid var(--bo2);border-radius:20px;box-shadow:var(--sh2);overflow:auto; }
dialog.pending-detail h3 { margin:0 0 20px;font-size:1.2rem;letter-spacing:-.02em; }
dialog.pending-detail > p { margin:0;padding:12px 0;border-bottom:1px solid var(--bo);line-height:1.6;overflow-wrap:anywhere; }
dialog.pending-detail > p strong { color:var(--fg2);font-weight:500; }
dialog.pending-detail > div p { padding:12px;background:var(--bg3);border-radius:10px;margin:10px 0;line-height:1.6;overflow-wrap:anywhere; }
dialog.pending-detail h4 { margin:20px 0 12px; }
.detail-actions { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;position:sticky;bottom:-24px;background:var(--bg);padding:16px 0;margin-top:16px;border-top:1px solid var(--bo); }
dialog.pending-detail > form { display:none; }
@media(max-width:767px){dialog.pending-detail { padding:18px;width:calc(100vw - 20px);max-height:calc(100dvh - 24px); }.detail-actions{bottom:-18px;}.detail-actions .btn{flex:1 1 auto;}}

/* ═══ Contabilidad ═══════════════════════════════════════════════════════
   Nueve pestañas planas ocupaban tres filas en 390 px. Cinco áreas con
   icono caben en una sola tira desplazable, y la lista concreta aparece
   debajo solo cuando el área reúne más de una. */
.acct-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tab {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 0 auto; min-width: 5.2rem; padding: 8px 12px; scroll-snap-align: start;
  border: 1px solid var(--bo); border-radius: var(--ui-soft);
  background: var(--bg3); color: var(--fg2);
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; transition: background var(--ui-speed), color var(--ui-speed), border-color var(--ui-speed);
}
.acct-tab i { font-size: var(--ui-icon-lg); }
.acct-tab:hover { background: var(--bgh); color: var(--fg); }
.acct-tab.is-on { background: var(--acg); border-color: var(--ac); color: var(--ac); }
.acct-tab:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.acct-subnav { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.acct-subnav::-webkit-scrollbar { display: none; }
#accountingNav { margin-bottom: 14px; }

/* La explicación y los filtros se consultan de vez en cuando: plegados
   dejan la lista arriba, que es lo que se viene a mirar. La pastilla de
   ayuda la usan todas las listas del SaaS, no solo Contabilidad. */
.acct-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 14px 10px; }
.list-help, .acct-filters { margin: 0; }
.cd.list-shell > .list-help { margin: 0 14px 10px; }
.list-help[open], .acct-filters[open] { flex: 1 1 100%; }
.list-help > summary, .acct-filters > summary {
  display: flex; align-items: center; gap: 8px; width: fit-content;
  padding: 6px 12px; border: 1px solid var(--bo); border-radius: var(--ui-pill);
  background: var(--bg3); color: var(--fg2);
  font-size: .76rem; font-weight: 600; cursor: pointer; list-style: none;
}
.list-help > summary::-webkit-details-marker, .acct-filters > summary::-webkit-details-marker { display: none; }
.list-help > summary:hover, .acct-filters > summary:hover { background: var(--bgh); color: var(--fg); }
.list-help > summary i, .acct-filters > summary i { font-size: var(--ui-icon); }
.list-help > p { margin: 10px 2px 0; color: var(--fg2); font-size: .78rem; line-height: 1.55; }
.acct-filters > .h-s { margin-top: 10px; padding: 0; }

/* Totales por moneda: cada rótulo pegado a su cifra. */
.fin-totals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 14px 12px; flex: 0 0 auto; }
.fin-totals-card {
  flex: 1 1 15rem; min-width: 0; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ac) 26%, var(--bo));
  border-radius: var(--ui-soft); background: var(--bg3);
}
.fin-totals-card h4 {
  margin: 0 0 8px; color: var(--fg2);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fin-totals-grid {
  display: grid; gap: 8px 14px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.fin-total { min-width: 0; }
.fin-total dt { color: var(--fg2); font-size: .7rem; line-height: 1.3; }
.fin-total dd {
  margin: 2px 0 0; color: var(--fg); font-size: .98rem; font-weight: 650;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.fin-total dd[data-tone=danger] { color: var(--da); }

@media (min-width: 768px) {
  .acct-tab { flex: 0 0 auto; flex-direction: row; min-width: 0; font-size: .8rem; padding: 8px 16px; }
  .acct-tab i { font-size: var(--ui-icon); }
}

@media (max-width: 767px) {
  /* Los totales por moneda son referencia, no el contenido: apilados en
     tarjetas empujaban la lista fuera de la pantalla. En celular quedan en
     una rejilla compacta de dos columnas, sin marco ni relleno de tarjeta. */
  .fin-totals { margin: 0 14px 10px; gap: 8px; }
  .fin-totals-card { flex: 1 1 100%; padding: 8px 10px; border-radius: var(--rd); }
  .fin-totals-card h4 { margin-bottom: 6px; font-size: .62rem; }
  .fin-totals-grid { gap: 6px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-total dt { font-size: .64rem; }
  .fin-total dd { font-size: .84rem; }
  /* Una línea por área: partidas en dos renglones, «Documentos» quedaba
     cortada a media palabra y las cinco no se leían de un vistazo. */
  .acct-tab { min-width: 0; padding: 7px 10px; font-size: .68rem; white-space: nowrap; }
  .acct-bar { margin-inline: 12px; }
}

.ct-count {
  margin-left: 8px; padding: 2px 9px; border-radius: var(--ui-pill);
  background: var(--bg3); color: var(--fg2);
  font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* Un panel de filtros plegado sigue diciendo cuántos hay puestos. */
.acct-filters > summary .filter-count {
  min-width: 1.1rem; padding: 1px 5px; border-radius: var(--ui-pill);
  background: var(--ac); color: var(--on-ac);
  font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
.acct-filters.is-on > summary { border-color: var(--ac); color: var(--ac); }

/* Una tabla que sigue a la derecha tiene que decirlo. En celular las listas se
   desplazan en horizontal a propósito, pero el corte era a hueso: «Llamar para
   re…» terminaba en el borde sin nada que sugiriera que había más. Un
   degradado sobre el lado que continúa lo insinúa y desaparece al llegar al
   final. La clase la pone `workspace.js`, una vez, para cualquier lista. */
.list-frame { position: relative; }
.list-frame::after {
  content: ''; position: absolute; inset-block: 0; right: 0; width: 32px;
  background: linear-gradient(to left, var(--bg), transparent);
  opacity: 0; transition: opacity var(--ui-speed); pointer-events: none; z-index: 4;
}
.list-frame.has-more-right::after { opacity: 1; }

.ct-note { margin-left: 8px; color: var(--fg2); font-size: .74rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ═══════ Visor de hojas de cálculo (Cloud y adjuntos del chat) ═══════
   Pantalla completa y siempre claro, como Excel: una planilla se lee mejor
   sobre blanco aunque la aplicación esté en tema oscuro. Los tokens se
   redefinen dentro del visor para que botones y textos hereden la paleta. */
@media screen {
  .m.m-wide,#chatLightbox.is-sheet {
    --bg:#fff;--bg2:#f7f7f7;--bg3:#f3f3f3;--bgh:#e9e9e9;--fg:#1f1f1f;--fg2:#5c5c5c;--bo:#e1e1e1;--bo2:#cfcfcf;
    --xl-green:#107c41;--xl-grid:#e1e1e1;--xl-head:#f3f3f3;--xl-head-line:#c8c8c8;--app-accent:var(--xl-green);
    color-scheme:light;
  }
  /* Cloud: el modal pasa a ocupar toda la pantalla. */
  .mo:has(.m.m-wide) { padding:0;align-items:stretch;justify-content:stretch;background:#fff; }
  .m.m-wide { max-width:none;width:100%;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;animation:none;background:var(--bg);color:var(--fg);overflow:hidden;padding-bottom:0; }
  .m.m-wide > form { display:flex;flex-direction:column;height:100%; }
  .m.m-wide .mh { flex:0 0 auto;padding:max(10px,var(--safe-t)) 16px 10px;background:var(--app-accent);border-bottom:0;color:#fff; }
  .m.m-wide .mh h3 { color:#fff;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .m.m-wide .mh .btn { background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff; }
  .m.m-wide .mh .btn:hover { background:rgba(255,255,255,.26); }
  .m.m-wide #cloudModalBody { flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0; }
  .m.m-wide #cloudModalError:empty,.m.m-wide .mf { display:none; }
  .m.m-wide .sheet-actions { flex:0 0 auto;display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--xl-head-line);background:var(--bg2); }
  .m.m-wide .sheet-actions .btn { min-height:34px;background:#fff;border-color:var(--bo2);color:var(--fg); }

  /* Chat: el lightbox se vuelve una ventana de planilla. */
  #chatLightbox.is-sheet { padding:0;background:#fff;place-items:stretch;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr); }
  #chatLightbox.is-sheet .chat-lightbox-close { top:max(6px,var(--safe-t));right:10px;z-index:2;background:rgba(255,255,255,.16);color:#fff; }
  .chat-lightbox-title { order:-1;display:block;padding:max(14px,calc(var(--safe-t) + 4px)) 64px 14px 16px;background:var(--app-accent);color:#fff;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .chat-lightbox-title[hidden],#chatLightboxSheet[hidden],#chatLightboxDoc[hidden] { display:none; }
  #chatLightboxSheet,#chatLightboxDoc { min-height:0;min-width:0; }

  /* La planilla. */
  .sheet-view { flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#fff;color:#1f1f1f;font-family:Aptos,Calibri,'Segoe UI',Arial,sans-serif; }
  .sheet-stage { flex:1 1 auto;min-height:0;display:flex;flex-direction:column; }
  .sheet-scroll { flex:1 1 auto;min-height:0;overflow:auto;background:#fff; }
  .sheet-table { border-collapse:separate;border-spacing:0;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums;color:#000; }
  .sheet-table td { min-width:72px;max-width:340px;height:22px;padding:2px 6px;border-right:1px solid var(--xl-grid);border-bottom:1px solid var(--xl-grid);background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left; }
  .sheet-table td.is-num { text-align:right; }
  .sheet-table th { padding:2px 6px;background:var(--xl-head);color:#444;font-size:12px;font-weight:400;border-right:1px solid var(--xl-head-line);border-bottom:1px solid var(--xl-head-line);white-space:nowrap; }
  .sheet-table thead th { position:sticky;top:0;z-index:3;height:22px;text-align:center; }
  .sheet-table tbody th { position:sticky;left:0;z-index:2;min-width:40px;text-align:center; }
  .sheet-table thead .sheet-corner { left:0;z-index:4; }
  /* Las gráficas flotan sobre las celdas pero debajo de las cabeceras fijas, como en Excel. */
  .sheet-layer { position:relative;display:inline-block;min-width:100%;vertical-align:top; }
  .sheet-chart { position:absolute;z-index:1;margin:0;padding:10px;box-sizing:border-box;background:#fff;border:1px solid #d9d9d9;box-shadow:0 1px 4px rgba(0,0,0,.12); }
  .sheet-chart canvas { width:100%!important;height:100%!important; }
  .sheet-table tbody tr:hover td { background:#f2f8f5; }
  .sheet-empty { margin:0;padding:16px;color:#5c5c5c;font-size:.85rem; }
  .sheet-bar { flex:0 0 auto;display:flex;align-items:stretch;gap:12px;min-height:34px;padding-bottom:var(--safe-b);background:var(--xl-head);border-top:1px solid var(--xl-head-line); }
  .sheet-tabs { display:flex;min-width:0;overflow-x:auto;padding-left:8px; }
  .sheet-tab { flex:0 0 auto;min-height:34px;padding:0 16px;border:0;border-right:1px solid var(--xl-head-line);border-radius:0;background:transparent;color:#444;font:inherit;font-size:13px;cursor:pointer; }
  .sheet-tab:hover { background:#e6e6e6; }
  .sheet-tab[aria-selected="true"] { background:#fff;color:var(--xl-green);font-weight:600;box-shadow:inset 0 -3px 0 var(--xl-green); }
  .sheet-tab:focus-visible,.sheet-scroll:focus-visible { outline:2px solid var(--xl-green);outline-offset:-2px; }
  .sheet-note { margin-left:auto;align-self:center;padding:0 16px;color:#5c5c5c;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .file-card.is-sheet { display:flex;align-items:center;gap:10px; }
  .file-card.is-sheet > span { flex:1 1 auto;min-width:0; }
  @media(max-width:640px) {
    .sheet-bar { flex-wrap:wrap;gap:0; }
    .sheet-tabs { flex:1 1 100%; }
    .sheet-note { margin-left:0;padding:4px 12px 6px;white-space:normal; }
  }
}

/* ═══════ Visor de documentos (doc, docx, txt) ═══════
   Mismo marco que las hojas de cálculo, con la estética de Word: barra azul,
   lienzo gris y la página blanca centrada. */
@media screen {
  .m.m-wide.is-doc,#chatLightbox.is-doc { --app-accent:#185abd; }
  .doc-view { flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#e6e6e6;color:#1f1f1f; }
  .doc-canvas { flex:1 1 auto;min-height:0;overflow:auto;padding:28px 16px 40px; }
  .doc-canvas:focus-visible { outline:2px solid var(--app-accent);outline-offset:-2px; }
  .doc-page {
    box-sizing:border-box;width:100%;max-width:816px;min-height:min(1056px,100%);margin:0 auto;padding:72px 88px;
    background:#fff;color:#1f1f1f;box-shadow:0 1px 3px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.08);
    font-family:Aptos,Calibri,'Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.55;overflow-wrap:anywhere;
  }
  .doc-page.is-plain { white-space:pre-wrap;font-family:Consolas,'Cascadia Mono','Courier New',monospace;font-size:13.5px;line-height:1.5; }
  .doc-page p { margin:0 0 .8em;white-space:pre-wrap; }
  .doc-page h1 { margin:0 0 .6em;font-size:1.75em;font-weight:600;color:#1f3864;line-height:1.25; }
  .doc-page h2 { margin:1.1em 0 .45em;font-size:1.3em;font-weight:600;color:#2f5496; }
  .doc-page h3,.doc-page h4 { margin:1em 0 .4em;font-size:1.1em;font-weight:600;color:#2f5496; }
  .doc-page ul,.doc-page ol { margin:0 0 .8em;padding-left:1.6em; }
  .doc-page table { border-collapse:collapse;margin:.4em 0 1em;max-width:100%; }
  .doc-page td,.doc-page th { border:1px solid #bfbfbf;padding:4px 8px;vertical-align:top; }
  .doc-page th { background:#f2f2f2;font-weight:600; }
  .doc-page td > p:last-child,.doc-page th > p:last-child { margin-bottom:0; }
  .doc-page img { max-width:100%;height:auto; }
  .doc-page a { color:#0563c1; }
  .doc-empty { margin:0;padding:16px;color:#5c5c5c;font-size:.85rem; }
  .doc-bar { flex:0 0 auto;display:flex;align-items:center;gap:16px;min-height:30px;padding:0 16px var(--safe-b);background:#f3f3f3;border-top:1px solid #c8c8c8;color:#444;font-size:12px; }
  .doc-note { margin-left:auto; }
  @media(max-width:640px) {
    .doc-canvas { padding:10px 8px 20px; }
    .doc-page { padding:24px 18px;min-height:0;font-size:15px; }
  }
}

/* ═══════ Cloud: selección, menú contextual, portapapeles y arrastre ═══════ */
@media screen {
  .cloud-item { cursor:default; }
  .cloud-open { cursor:inherit; }
  .cloud-open:hover .cloud-item-name { text-decoration:none; }
  .cloud-item.is-picked { background:color-mix(in srgb,var(--ac) 16%,transparent);box-shadow:inset 3px 0 0 var(--ac); }
  /* Como en Google Drive, la barra de selección cubre la barra superior en vez
     de empujar la lista: si la desplazara, el segundo clic de un doble clic
     caería sobre otra fila. */
  .cloud-shell > .cloud-selection { position:absolute;top:0;left:0;right:0;z-index:6;min-height:44px;background:color-mix(in srgb,var(--ac) 18%,var(--bg));box-shadow:0 6px 18px -10px rgba(0,0,0,.45); }
  .cloud-item.is-cut { opacity:.5; }
  .cloud-item.is-dragged { opacity:.45; }
  .cloud-item.is-drop-target,.cloud-crumb.is-drop-target { background:color-mix(in srgb,var(--ac) 24%,transparent);outline:2px solid var(--ac);outline-offset:-2px;border-radius:8px; }
  .cloud-drag-ghost { position:fixed;top:-100px;left:-100px;padding:6px 12px;border-radius:999px;background:var(--ac);color:var(--on-ac);font-size:.8rem;font-weight:600; }
  @media (pointer:coarse) {
    /* Mantener presionado selecciona: sin menú nativo ni selección de texto encima. */
    .cloud-item { -webkit-touch-callout:none;-webkit-user-select:none;user-select:none; }
  }

  .cloud-context {
    position:fixed;z-index:10000;min-width:230px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;
    padding:6px;border:1px solid var(--bo2);border-radius:12px;background:var(--bg);color:var(--fg);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.12);
  }
  .cloud-context[hidden] { display:none; }
  .cloud-context-item { display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-size:.85rem;text-align:left;cursor:pointer; }
  .cloud-context-item i { font-size:1.05rem;color:var(--fg2); }
  .cloud-context-item span { flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .cloud-context-item kbd { font:inherit;font-size:.72rem;color:var(--fg2); }
  .cloud-context-item:hover:not([disabled]),.cloud-context-item:focus-visible { background:var(--bgh);outline:none; }
  .cloud-context-item[disabled] { opacity:.45;cursor:default; }
  .cloud-context-item.is-danger,.cloud-context-item.is-danger i { color:var(--da); }
  .cloud-context-sep { height:1px;margin:5px 4px;background:var(--bo); }

  .cloud-clip { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px solid color-mix(in srgb,var(--ac) 40%,var(--bo));border-radius:var(--rd2);background:color-mix(in srgb,var(--ac) 10%,var(--bg));font-size:.85rem; }
  .cloud-clip[hidden] { display:none; }
  .cloud-clip > i { color:var(--ac);font-size:1.1rem; }
  .cloud-clip > span { margin-right:auto; }

  /* Sin casillas: la fila marcada se resalta y su icono cambia por un ✓, como
     en Drive y en los exploradores actuales. */
  .cloud-listhead,.cloud-item { grid-template-columns:var(--ui-tile) minmax(0,1fr) 150px 110px 170px var(--ui-tap); }
  .cloud-listhead .cloud-listhead-name { grid-column:1 / 3; }
  .cloud-item.is-picked .cloud-thumb { position:relative;background:var(--ac);color:var(--on-ac); }
  .cloud-item.is-picked .cloud-thumb i { visibility:hidden; }
  .cloud-item.is-picked .cloud-thumb::after { content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:1.2rem;font-weight:700; }
  .cloud-shell.is-grid .cloud-item { grid-template-areas:"thumb more" "open open"; }
  .cloud-shell.is-grid .cloud-thumb { justify-self:start; }
  @media (max-width:1023px) {
    .cloud-listhead,.cloud-item { grid-template-columns:var(--ui-tile) minmax(0,1fr) var(--ui-tap); }
    .cloud-shell > .cloud-selection { overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap; }
    .cloud-selection .ui-tool { flex:0 0 var(--ui-tap);width:var(--ui-tap);padding:0;justify-content:center; }
    .cloud-selection .ui-tool span { display:none; }
    .cloud-selection strong { white-space:nowrap; }
  }
  .cloud-props { display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0 0 16px;font-size:.88rem; }
  .cloud-props dt { color:var(--fg2); }
  .cloud-props dd { margin:0;overflow-wrap:anywhere; }
}

/* ═══════ Visor de PDF a pantalla completa ═══════ */
@media screen {
  .m.m-wide.is-pdf,#chatLightbox.is-pdf { --app-accent:#b3261e; }
  .pdf-host,#chatLightbox.is-pdf #chatLightboxPdf { flex:1 1 auto;min-height:0;display:flex;flex-direction:column; }
  #chatLightbox.is-pdf #chatLightboxPdf { width:auto;height:auto;border-radius:0; }
  .pdf-view { flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:#e6e6e6;color:#1f1f1f; }
  .pdf-toolbar { flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;min-height:44px;padding:4px 12px;background:#f3f3f3;border-bottom:1px solid #c8c8c8;font-size:13px; }
  .pdf-pages,.pdf-zoom { display:inline-flex;align-items:center;gap:6px; }
  .pdf-page-input { width:56px;min-height:32px;padding:0 6px;border:1px solid #bdbdbd;border-radius:6px;background:#fff;color:#1f1f1f;font:inherit;text-align:center; }
  .pdf-page-total { color:#555; }
  .pdf-tool { display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #bdbdbd;border-radius:6px;background:#fff;color:#1f1f1f;font:inherit;font-size:18px;line-height:1;cursor:pointer; }
  .pdf-tool:hover { background:#ebebeb; }
  .pdf-zoom-select { min-height:32px;padding:0 8px;border:1px solid #bdbdbd;border-radius:6px;background:#fff;color:#1f1f1f;font:inherit; }
  .pdf-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
  .pdf-canvas { flex:1 1 auto;min-height:0;overflow:auto;padding:20px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:16px; }
  .pdf-canvas:focus-visible { outline:2px solid var(--app-accent);outline-offset:-2px; }
  .pdf-sheet { position:relative;flex:0 0 auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.08); }
  .pdf-sheet canvas { display:block; }
  .pdf-view .pdf-status { margin:auto;color:#555;font-size:.9rem; }
  .pdf-bar { flex:0 0 auto;display:flex;align-items:center;gap:16px;min-height:30px;padding:0 16px var(--safe-b);background:#f3f3f3;border-top:1px solid #c8c8c8;color:#444;font-size:12px; }
  .pdf-note { margin-left:auto; }
  @media(max-width:640px) {
    .pdf-canvas { padding:10px 8px 20px;gap:10px; }
    .pdf-toolbar { gap:10px; }
    .pdf-zoom-select { max-width:120px; }
  }
  /* Capa de texto de pdf.js (web/pdf_viewer.css): permite seleccionar y buscar. */
  .pdf-sheet .textLayer { color-scheme:only light;position:absolute;text-align:initial;inset:0;overflow:clip;opacity:1;line-height:1;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;
    --min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size)); }
  .pdf-sheet .textLayer :is(span,br) { color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%;-webkit-user-select:text;user-select:text; }
  .pdf-sheet .textLayer > :not(.markedContent),.pdf-sheet .textLayer .markedContent span:not(.markedContent) { z-index:1;--font-height:0;font-size:calc(var(--text-scale-factor) * var(--font-height));--scale-x:1;--rotate:0deg;transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
  .pdf-sheet .textLayer .markedContent { display:contents; }
  .pdf-sheet .textLayer ::selection { background:color-mix(in srgb,AccentColor,transparent 50%);color:transparent; }
  .pdf-sheet .textLayer br::selection { background:transparent; }
  .pdf-sheet .textLayer .endOfContent { display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;-webkit-user-select:none;user-select:none; }
  .pdf-sheet .textLayer.selecting .endOfContent { top:0; }
}