/* Sana Tu Deuda · App nueva (/nuevo).
   Lenguaje: marco azul marino que sostiene una hoja de trabajo clara. Un solo acento cian-azul del símbolo.
   Movimiento: curvas de salida fuertes, 150–250 ms; nada animado en acciones de teclado. */

/* ───────── Tokens ───────── */
:root{
  --frame:#061529;            /* marco y menú */
  --frame-2:#0b2244;
  --frame-ink:#c3d1e4;
  --frame-ink-strong:#ffffff;
  --frame-muted:#7489a6;
  --frame-hover:rgba(255,255,255,.06);
  --frame-active:rgba(255,255,255,.10);
  --frame-line:rgba(255,255,255,.08);

  --sheet:#f6f7f9;            /* hoja de trabajo */
  --surface:#ffffff;
  --surface-2:#f9fafb;
  --surface-3:#f0f2f5;
  --line:#e6e9ee;
  --line-strong:#d3d9e1;

  --ink:#0d1726;
  --ink-2:#36435a;
  --muted:#667489;
  --faint:#99a4b5;

  --brand:#10294f;
  --brand-hover:#0a1f3d;
  --accent:#0a8fc7;
  --accent-strong:#06719f;
  --accent-soft:#e8f6fc;
  --accent-ring:rgba(10,143,199,.28);
  --gradient:linear-gradient(135deg,#22d3ee 0%,#1d8ff0 100%);

  --ok:#15803d;--ok-soft:#e8f6ed;
  --warn:#b45309;--warn-soft:#fdf3e4;
  --bad:#c62828;--bad-soft:#fdecec;
  --info:#2563eb;--info-soft:#eaf1fe;
  --violet:#6d28d9;--violet-soft:#f1ebfd;

  --font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Code",Consolas,monospace;

  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;
  --shadow-sm:0 1px 2px rgba(13,23,38,.05),0 1px 3px rgba(13,23,38,.04);
  --shadow-md:0 8px 24px -8px rgba(13,23,38,.16),0 2px 6px rgba(13,23,38,.04);
  --shadow-lg:0 28px 64px -16px rgba(6,21,41,.32),0 4px 12px rgba(6,21,41,.08);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-fast:150ms;--t-base:200ms;--t-slow:280ms;

  --rail-w:256px;
}

/* ───────── Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;background:var(--frame);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em;line-height:1.2;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.5}
svg{flex-shrink:0;width:18px;height:18px}
svg.flip{transform:scaleX(-1)}
.rail-search svg{width:15px;height:15px}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
*{scrollbar-width:thin;scrollbar-color:#c7cfda transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c7cfda;border-radius:10px;border:3px solid transparent;background-clip:padding-box}

/* ───────── Marco ───────── */
.frame{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100dvh;overflow:hidden}
.rail{display:flex;flex-direction:column;min-height:0;padding:14px 10px 12px;color:var(--frame-ink)}
.rail-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
.rail-brand img{width:30px;height:30px}
.rail-brand b{display:block;color:#fff;font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.rail-brand small{display:block;color:var(--frame-muted);font-size:11.5px}
.rail-search{display:flex;align-items:center;gap:8px;margin:0 2px 12px;padding:0 10px;height:34px;border-radius:var(--r-sm);background:var(--frame-2);color:var(--frame-muted);font-size:13px;border:1px solid var(--frame-line)}
.rail-search kbd{margin-left:auto;font-family:var(--font);font-size:11px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--frame-ink)}
.rail-nav{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:1px}
.rail-label{padding:14px 10px 6px;color:var(--frame-muted);font-size:11.5px;font-weight:550}
.rail-link{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-sm);color:var(--frame-ink);font-size:13.5px;font-weight:500;transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.rail-link svg{width:17px;height:17px;color:var(--frame-muted);transition:color var(--t-fast) ease}
.rail-link .count{margin-left:auto;min-width:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--frame-ink);font-size:11px;font-weight:600;text-align:center;line-height:18px}
.rail-link .count.hot{background:var(--accent);color:#fff}
@media(hover:hover) and (pointer:fine){.rail-link:hover{background:var(--frame-hover);color:#fff}.rail-link:hover svg{color:#dbe6f4}}
.rail-link[aria-current=page]{background:var(--frame-active);color:#fff;font-weight:600}
.rail-link[aria-current=page] svg{color:#5fd4f6}
/* Menú ramificado: cada área es una rama que se abre y cierra; sus módulos cuelgan de una guía vertical. */
.rail-tree{display:grid}
.rail-area{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:var(--r-sm);color:var(--frame-ink);font-size:13.5px;font-weight:600;text-align:left;transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.rail-area>svg:first-child{width:17px;height:17px;flex:none;color:var(--frame-muted);transition:color var(--t-fast) ease}
.rail-area>svg:last-child{width:15px;height:15px;flex:none;margin-left:auto;color:var(--frame-muted);transition:transform var(--t-base) var(--ease-out)}
.rail-area .area-count{margin-left:auto}
.rail-area .area-count:not([hidden])+svg{margin-left:6px}
.rail-area-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-tree[data-open=false] .rail-area>svg:last-child{transform:rotate(-90deg)}
.rail-tree[data-current] .rail-area{color:#fff}
.rail-tree[data-current] .rail-area>svg:first-child{color:#5fd4f6}
@media(hover:hover) and (pointer:fine){.rail-area:hover{background:var(--frame-hover);color:#fff}.rail-area:hover>svg{color:#dbe6f4}}
.rail-area:active{transform:scale(.985)}
.rail-branch{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.rail-tree[data-open=false] .rail-branch{grid-template-rows:0fr}
.rail-branch-inner{position:relative;min-height:0;overflow:hidden;display:grid;gap:1px;padding:0 0 0 19px;transition:opacity var(--t-base) ease}
.rail-branch-inner>:first-child{margin-top:2px}
.rail-branch-inner>:last-child{margin-bottom:8px}
.rail-tree[data-open=false] .rail-branch-inner{opacity:0}
.rail-branch-inner::before{content:"";position:absolute;left:18px;top:0;bottom:24px;width:1px;background:rgba(148,178,214,.24)}
.rail-leaf{position:relative;display:flex;align-items:center;gap:9px;height:32px;margin-left:12px;padding:0 8px;border-radius:var(--r-sm);color:var(--frame-ink);font-size:13px;font-weight:500;transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.rail-leaf::before{content:"";position:absolute;left:-12px;top:50%;width:9px;height:1px;background:rgba(148,178,214,.24);transition:background-color var(--t-fast) ease}
.rail-leaf svg{width:15px;height:15px;flex:none;color:var(--frame-muted);transition:color var(--t-fast) ease}
.rail-leaf-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-leaf .count{margin-left:auto;min-width:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--frame-ink);font-size:11px;font-weight:600;text-align:center;line-height:18px}
.rail-area .count{min-width:20px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--frame-ink);font-size:11px;font-weight:600;text-align:center;line-height:18px}
.rail-leaf .count.hot,.rail-area .count.hot{background:var(--accent);color:#fff}
@media(hover:hover) and (pointer:fine){.rail-leaf:hover{background:var(--frame-hover);color:#fff}.rail-leaf:hover svg{color:#dbe6f4}}
.rail-leaf:active{transform:scale(.985)}
.rail-leaf[aria-current=page]{background:var(--frame-active);color:#fff;font-weight:600}
.rail-leaf[aria-current=page]::before{background:#5fd4f6}
.rail-leaf[aria-current=page] svg{color:#5fd4f6}
.rail-empty{margin-left:12px;padding:7px 8px;color:var(--frame-muted);font-size:12.5px}
.rail-empty-all{margin:14px 2px 0;padding:10px;border:1px dashed var(--frame-line);border-radius:var(--r-sm);line-height:1.45}
.rail-leaf .nav-grip{position:static;margin-left:4px;padding:4px 2px;opacity:0}
.rail-leaf .count:not([hidden])~.nav-grip{margin-left:4px}
.rail-leaf .count[hidden]~.nav-grip{margin-left:auto}
.rail-leaf .nav-grip i{background:var(--frame-muted)}
@media(hover:hover) and (pointer:fine){.rail-leaf:hover .nav-grip{opacity:1}}
.rail-leaf.is-dragging{background:var(--frame-2);box-shadow:0 8px 20px -6px rgba(0,0,0,.5);z-index:1}
@media(prefers-reduced-motion:reduce){.rail-branch,.rail-branch-inner,.rail-area>svg:last-child{transition:none}}
.rail-foot{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--frame-line)}
.rail-user{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:var(--r-sm);text-align:left;color:#fff}
@media(hover:hover){.rail-user:hover{background:var(--frame-hover)}}
.rail-user small{display:block;color:var(--frame-muted);font-size:11.5px}
.rail-user b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hoja de trabajo */
.sheet{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin:8px 8px 8px 0;background:var(--sheet);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.top{display:flex;align-items:center;gap:12px;height:60px;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(246,247,249,.86);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:20}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:var(--muted)}
.crumbs b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{width:14px;height:14px;color:var(--faint)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.page{flex:1;min-height:0;overflow:auto;scroll-behavior:smooth}
.page-inner{max-width:1360px;margin:0 auto;padding:26px 28px 72px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:24px}
.page-head p{margin-top:4px;color:var(--muted)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Textos largos sin espacios (correos, folios, ligas) se parten en lugar de ensanchar la hoja en el celular.
   Las tablas conservan sus columnas y se desplazan dentro de su .table-wrap. */
.page-inner,.drawer,dialog{overflow-wrap:anywhere}
.page-inner table,.drawer table,dialog table{overflow-wrap:normal}

/* ───────── Controles ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:550;white-space:nowrap;box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) ease,border-color var(--t-fast) ease}
.btn svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:var(--surface-2);border-color:#bfc8d4}}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(10,31,61,.25),inset 0 1px 0 rgba(255,255,255,.1)}
@media(hover:hover) and (pointer:fine){.btn.primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover)}}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){.btn.ghost:hover:not(:disabled){background:var(--surface-3)}}
.btn.danger{color:var(--bad);border-color:#f0c6c6}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.icon{width:34px;padding:0}
.btn.sm.icon{width:30px}
.input,.select,textarea.input{height:36px;width:100%;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13.5px;outline:none;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
textarea.input{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
.input::placeholder{color:var(--muted)}
.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.select{appearance:none;padding-right:32px;background:var(--surface) no-repeat right 10px center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667489' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.field{display:grid;gap:6px}
.field>span{color:var(--ink-2);font-size:12.5px;font-weight:550}
.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search svg{position:absolute;left:11px;top:50%;width:16px;height:16px;translate:0 -50%;color:var(--faint)}
.search .input{padding-left:34px}
kbd{font-family:var(--font);font-size:11px;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--muted)}

/* Segmentos / pestañas */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--surface-3);border:1px solid var(--line)}
.seg button{height:28px;padding:0 11px;border-radius:7px;color:var(--muted);font-size:12.5px;font-weight:550;white-space:nowrap;transition:color var(--t-fast) ease,background-color var(--t-fast) ease}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs button{position:relative;height:40px;padding:0 12px;color:var(--muted);font-weight:550;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ink)}
.tabs button[aria-selected=true]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}

/* Insignias de estado */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);font-size:12px;font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.badge.plain::before{display:none}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.violet{background:var(--violet-soft);color:var(--violet)}

/* Avatares */
.avatar{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--surface-3);color:var(--ink-2);font-size:11.5px;font-weight:650;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:52px;height:52px;flex-basis:52px;border-radius:14px;font-size:17px}
.avatar.brand{background:var(--gradient);color:#fff}

/* ───────── Superficies ───────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-pad{padding:18px 20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:15px}
.card-head p{color:var(--muted);font-size:12.5px;margin-top:2px}
.grid{display:grid;gap:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.stat{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-align:left;transition:border-color var(--t-fast) ease,transform var(--t-fast) var(--ease-out)}
button.stat{width:100%}
@media(hover:hover) and (pointer:fine){button.stat:hover{border-color:var(--line-strong)}}
button.stat:active{transform:scale(.985)}
button.stat[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.stat .label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:550}
.stat .label svg{width:15px;height:15px}
.stat .value{margin-top:8px;font-size:26px;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
.stat .hint{margin-top:6px;font-size:12px;color:var(--muted)}
.stat.tone-warn .value{color:var(--warn)}
.stat.tone-bad .value{color:var(--bad)}
.stat.tone-ok .value{color:var(--ok)}

/* Tablas */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.t th{position:sticky;top:0;z-index:1;height:38px;padding:0 14px;background:var(--surface-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:550;text-align:left;white-space:nowrap}
.t th button{display:inline-flex;align-items:center;gap:4px;color:inherit;font-weight:inherit}
.t td{height:48px;padding:6px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.t tr:last-child td{border-bottom:0}
.t .r{text-align:right}
.t tbody tr{cursor:pointer;transition:background-color 120ms ease}
@media(hover:hover) and (pointer:fine){.t tbody tr:hover td{background:#f8fafc}}
.t tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who b{display:block;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.who small{display:block;color:var(--muted);font-size:12px}
.t-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}

/* Barra de herramientas */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}

/* Progreso */
.progress{position:relative;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.progress>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--gradient);transform-origin:left;transition:transform 600ms var(--ease-out)}

/* Lista de tareas (Hoy) */
.task-list{display:grid}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);text-align:left;width:100%}
.task:last-child{border-bottom:0}
@media(hover:hover) and (pointer:fine){.task:hover{background:#f8fafc}}
.task .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--surface-3);color:var(--ink-2)}
.task .ico svg{width:16px;height:16px}
.task .ico.warn{background:var(--warn-soft);color:var(--warn)}
.task .ico.bad{background:var(--bad-soft);color:var(--bad)}
.task .ico.ok{background:var(--ok-soft);color:var(--ok)}
.task .ico.info{background:var(--info-soft);color:var(--info)}
.task b{display:block;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Kanban (embudo comercial) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.col{display:flex;flex-direction:column;min-height:0;background:var(--surface-3);border-radius:var(--r-lg);border:1px solid var(--line)}
.col-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:600}
.col-head .dot{width:8px;height:8px;border-radius:50%}
.col-head .n{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:550}
.col-body{display:grid;align-content:start;gap:8px;padding:0 8px 10px;max-height:62dvh;overflow:auto}
.lead-card{display:grid;gap:8px;padding:12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:left;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) ease}
@media(hover:hover) and (pointer:fine){.lead-card:hover{box-shadow:var(--shadow-md)}}
.lead-card:active{transform:scale(.98)}
.lead-card b{color:var(--ink);font-weight:600}
.lead-card .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}

/* ───────── Página de cliente ───────── */
.profile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 24px;margin-bottom:18px}
.profile h1{font-size:22px}
.profile .sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:13px}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 24px}
.kv dt{color:var(--muted);font-size:12.5px;font-weight:550}
.kv dd{margin:4px 0 0;color:var(--ink);font-weight:550}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media(max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}}

/* ───────── Registrar pago ───────── */
.pay{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.pay-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line)}
.pay-step{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.pay-amount{display:flex;align-items:baseline;gap:4px;padding:6px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-strong);transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
.pay-amount:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.pay-amount i{font-style:normal;font-size:24px;font-weight:600;color:var(--faint)}
.pay-amount input{flex:1;width:0;min-width:0;height:52px;border:0;outline:0;background:transparent;font-size:34px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.pay-state{display:flex;gap:6px;flex-wrap:wrap;min-height:26px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font-size:12.5px;font-weight:550;
  animation:chipIn 180ms var(--ease-out) both}
.chip svg{width:14px;height:14px}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.info{background:var(--info-soft);color:var(--info)}
@keyframes chipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pay-grid>.field:first-child{max-width:220px}
.pay-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pay-method{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:36px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:550;cursor:pointer;
  transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--ease-out)}
.pay-method input{position:absolute;opacity:0;pointer-events:none}
.pay-method svg{width:16px;height:16px;color:var(--muted)}
.pay-method:active{transform:scale(.97)}
.pay-method:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
.pay-method:has(input:checked) svg{color:var(--accent)}
.pay-method:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* V12.1.54: mes que cubre el pago */
.pay-period{display:grid;gap:8px;font-size:13px;color:var(--ink-2)}
.pay-period:empty{display:none}
.pay-period-line,.pay-period-ask{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.pay-period-line svg,.pay-period-ask svg{width:16px;height:16px;flex:none;color:var(--muted)}
.pay-period-ask svg{color:var(--warn)}
.pay-period-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:6px}
.pay-period-opt{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;
  transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.pay-period-opt input{margin-top:2px;accent-color:var(--accent)}
.pay-period-opt span{display:grid;gap:2px}
.pay-period-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pay-period-other{justify-self:start;padding:0;border:0;background:none;color:var(--accent-strong);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pay-period-select{max-width:260px}
.pay-break{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pay-break div{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;font-size:13px}
.pay-break div+div{border-top:1px solid var(--line)}
.pay-break dt{color:var(--muted)}
.pay-break dd{margin:0;color:var(--ink);font-weight:550;text-align:right}
.pay-method span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Confirmación de pago: el círculo aparece y la palomita se dibuja (una vez por pago) */
.pay-done{display:grid;justify-items:center;gap:10px;padding:28px 8px 8px;text-align:center}
.pay-done h3{font-size:20px;margin-top:6px}
.pay-check{width:64px;height:64px}
.pay-check circle{fill:var(--ok-soft);stroke:var(--ok);stroke-width:2;transform-origin:center;animation:checkPop 320ms var(--ease-out) both}
.pay-check path{fill:none;stroke:var(--ok);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:checkDraw 300ms 140ms var(--ease-out) forwards}
@keyframes checkPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
.pay-send{display:grid;gap:10px;width:100%;margin-top:14px;padding:16px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line);animation:rise 260ms 220ms var(--ease-out) both}
.pay-send p{color:var(--ink-2);font-size:13.5px}
.pay-send>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form-grid .span2{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.subcard{padding:16px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line)}
.subcard>b{display:block;color:var(--ink)}
.subcard>p{margin-top:4px;font-size:12.5px}
.form-error{min-height:18px;color:var(--bad);font-size:13px;font-weight:550}
.form-error:empty{min-height:0}
.shake{animation:shake 320ms var(--ease-in-out)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.store-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.store-meta div{padding:12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.store-meta dt{color:var(--muted);font-size:12px;font-weight:550}
.store-meta dd{margin:4px 0 0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
@media(max-width:560px){.store-meta{grid-template-columns:minmax(0,1fr)}}
.banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin:-6px 0 18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  animation:rise 260ms var(--ease-out) both}
.banner>svg{margin-top:2px}
.banner>div:first-of-type{flex:1;min-width:0}
.banner b{color:var(--ink)}
.banner p{margin-top:2px;color:var(--ink-2);font-size:13px}
.banner-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:center}
.banner.warn-b{background:var(--warn-soft);border-color:#f3dcb8}.banner.warn-b>svg{color:var(--warn)}
.banner.bad-b{background:var(--bad-soft);border-color:#f4c9c9}.banner.bad-b>svg{color:var(--bad)}
.banner.muted-b{background:var(--surface-3)}.banner.muted-b>svg{color:var(--muted)}
@media(max-width:700px){.banner{flex-wrap:wrap}.banner-actions{width:100%;justify-content:flex-end}}
.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--warn-soft);color:#7a4108;font-size:13px;line-height:1.5}
.note svg{width:16px;height:16px;margin-top:2px;color:var(--warn)}
.receipt-pill{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-strong);font-size:13px}
.receipt-pill svg{width:16px;height:16px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin 600ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Comprobantes */
.receipts{display:grid}
.receipt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 20px}
.receipt-row+.receipt-row{border-top:1px solid var(--line)}
.receipt-row .ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-3);color:var(--ink-2)}
.receipt-row .ico svg{width:16px;height:16px}
.receipt-row .who b{display:block;color:var(--ink);font-weight:600}
.receipt-row .who small{color:var(--muted);font-size:12.5px}
.receipt-row strong{font-weight:600;color:var(--ink)}
.receipt-row .acts{display:flex;gap:2px}
.receipt-row.void{opacity:.55}
@media(max-width:700px){.receipt-row{grid-template-columns:auto minmax(0,1fr) auto}.receipt-row .acts{grid-column:1/-1;justify-content:flex-end}}

/* ───────── Capas ───────── */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(6,21,41,.42);opacity:1;transition:opacity var(--t-slow) ease}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;z-index:61;width:min(560px,calc(100vw - 16px));display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  transform:translateX(0);transition:transform 320ms var(--ease-drawer)}
@starting-style{.drawer{transform:translateX(calc(100% + 16px))}.scrim{opacity:0}}
.drawer.closing{transform:translateX(calc(100% + 16px));transition-duration:220ms}
.scrim.closing{opacity:0;transition-duration:200ms}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:17px}
.drawer-body{flex:1;min-height:0;overflow:auto;padding:20px}
.drawer-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl)}

/* Búsqueda global: abre y cierra sin animación (se usa con teclado decenas de veces al día) */
.cmdk-scrim{position:fixed;inset:0;z-index:80;background:rgba(6,21,41,.38)}
.cmdk{position:fixed;left:50%;top:12dvh;z-index:81;width:min(640px,calc(100vw - 24px));translate:-50% 0;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:0 16px;height:54px;border-bottom:1px solid var(--line)}
.cmdk-input svg{width:18px;height:18px;color:var(--faint)}
.cmdk-input input{flex:1;height:100%;border:0;outline:0;font-size:15px;background:transparent}
.cmdk-list{max-height:min(420px,56dvh);overflow:auto;padding:6px}
.cmdk-group{padding:10px 10px 4px;color:var(--muted);font-size:12px;font-weight:550}
.cmdk-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-sm);text-align:left}
.cmdk-item[aria-selected=true]{background:var(--surface-3)}
.cmdk-item small{margin-left:auto;color:var(--muted);font-size:12px}
.cmdk-empty{padding:28px;text-align:center;color:var(--muted)}

/* Menús emergentes: crecen desde su disparador */
.menu{position:fixed;z-index:70;min-width:200px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  transform-origin:var(--origin,top right);opacity:1;scale:1;transition:opacity 150ms var(--ease-out),scale 150ms var(--ease-out)}
@starting-style{.menu{opacity:0;scale:.96}}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:7px;text-align:left;color:var(--ink-2);font-size:13.5px}
.menu button svg{width:16px;height:16px;color:var(--muted)}
@media(hover:hover){.menu button:hover{background:var(--surface-3);color:var(--ink)}}
.menu hr{margin:5px 4px;border:0;border-top:1px solid var(--line)}
.menu button.danger,.menu button.danger svg{color:var(--bad)}
@media(hover:hover){.menu button.danger:hover{background:var(--bad-soft);color:var(--bad)}}
.drawer.wide{width:min(860px,calc(100vw - 16px))}

/* Lista de clientes: selección y acciones por fila */
.t th.sel,.t td.sel{width:40px;padding-right:0}
.cb{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;vertical-align:middle}
.t tr.is-sel td{background:var(--accent-soft)}
.t .acts-col{width:1%;white-space:nowrap;text-align:right}
.row-acts{display:flex;justify-content:flex-end;gap:4px}
@media(hover:hover) and (pointer:fine){
  .row-acts{opacity:0;transition:opacity var(--t-fast) ease}
  .t tr:hover .row-acts,.t tr:focus-within .row-acts{opacity:1}
}
.bulk{position:fixed;left:calc(50% + var(--rail-w) / 2);bottom:22px;z-index:40;translate:-50% 0;width:min(720px,calc(100vw - var(--rail-w) - 48px));display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r-lg);background:var(--frame);color:#fff;box-shadow:var(--shadow-md);
  animation:rise 200ms var(--ease-out) both}
.bulk b{font-weight:600}
.field-inline{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--frame-ink)}
.field-inline .select{width:auto;min-width:200px;height:32px}
.bulk .btn.ghost{color:#fff}
@media(max-width:900px){.bulk{left:50%;width:calc(100vw - 24px);bottom:12px}.field-inline{margin-left:0;width:100%}.field-inline .select{flex:1;min-width:0}}
@media(hover:hover) and (pointer:fine){.bulk .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.08)}}

/* Pestañas de sección (Ajustes, Dinero, Reportes…) */
.section-tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;color:var(--muted);font-weight:550;white-space:nowrap}
.section-tabs a svg{width:15px;height:15px}
.section-tabs a[aria-selected=true]{color:var(--ink)}
.section-tabs a[aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
@media(hover:hover) and (pointer:fine){.section-tabs a:hover{color:var(--ink)}}

/* Interruptor */
.sw{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:#cbd3dd;transition:background-color 180ms var(--ease-out)}
.sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(13,23,38,.25);transition:translate 200ms var(--ease-out)}
.sw[aria-checked=true]{background:var(--accent)}
.sw[aria-checked=true] i{translate:16px 0}
.sw:active:not(:disabled) i{scale:1.08}
.sw:disabled{opacity:.45}

/* Modo consulta */
.preview-bar{display:flex;align-items:center;gap:10px;padding:8px 22px;background:var(--warn-soft);color:#7a4108;font-size:13px;border-bottom:1px solid #f3dcb8}
.preview-bar svg{width:16px;height:16px;color:var(--warn)}
.preview-bar span{flex:1}

/* Usuarios y permisos */
.users-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.users-list{position:sticky;top:0;max-height:calc(100dvh - 190px);display:flex;flex-direction:column;overflow:hidden}
.users-list-head{display:grid;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.users-list-head .search{max-width:none;min-width:0}
.users-create{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.users-create .btn{justify-content:center;padding-inline:8px}
.users-items{overflow:auto;padding:6px}
.user-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-sm);text-align:left;transition:background-color var(--t-fast) ease}
.user-item b{display:block;font-weight:600;color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-item small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-item>span:nth-child(2){flex:1;min-width:0}
.user-item[aria-current=true]{background:var(--accent-soft)}
@media(hover:hover){.user-item:hover:not([aria-current=true]){background:var(--surface-3)}}
.dot{width:8px;height:8px;border-radius:50%;background:#c7cfda;flex:none}
.dot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.dot.wait{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.user-pending{margin:14px 0 0}
.user-pending svg{width:16px;height:16px;margin-top:2px;flex:none}
.users-detail{display:grid;gap:14px;min-width:0}
.user-card{padding:20px}
.user-card-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.user-card-id{min-width:0}
.user-card-id h2{overflow-wrap:anywhere}
.user-card-top h2{font-size:19px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.user-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.user-actions .btn.primary{margin-left:auto}
.user-hint{margin-top:14px;font-size:12.5px}
.area-seg-wrap{overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
.area-seg-wrap::-webkit-scrollbar{display:none}
.area-seg{justify-self:start;flex-wrap:nowrap;white-space:nowrap}
.area-seg .count-pill.off{opacity:.55}
.perm-area{overflow:hidden}
.perm-area-head,.perm-module>header{display:flex;align-items:center;gap:12px}
.perm-area-head{padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.perm-area-head b,.perm-module header b{display:block;color:var(--ink)}
.perm-area-head small,.perm-module header small{display:block;color:var(--muted);font-size:12.5px}
.perm-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px;padding:14px;align-items:start}
.perm-module{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;transition:border-color var(--t-base) ease,background-color var(--t-base) ease}
.perm-module.is-on{border-color:#bfe3f3;background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70px)}
.perm-module>header>div{flex:1;min-width:0}
.perm-bulk{display:flex;gap:2px}
.perm-scope{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px dashed var(--line-strong);font-size:12.5px;color:var(--ink-2)}
.perm-scope span{display:inline-flex;align-items:center;gap:6px}
.perm-scope svg{width:14px;height:14px;color:var(--accent)}
.perm-items{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.perm-items li{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.perm-items li .sw{margin-top:1px}
.perm-items li b{display:block;font-size:13px;font-weight:550;color:var(--ink)}
.perm-items li small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.perm-items li.blocked{opacity:.5}
.choice-list{display:grid;gap:6px}
.choice{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{accent-color:var(--accent)}
.user-picks{display:grid;gap:4px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin:0;max-height:340px;overflow:auto}
.user-picks legend{padding:0 6px;color:var(--muted);font-size:12px}
.user-picks:disabled{opacity:.5}
.user-picks .check{padding:4px}
.avatar-pick{display:flex;align-items:center;gap:10px}
/* Árbol de permisos (V12.1.49): ramas por módulo que se abren y cierran */
.perm-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.perm-tools .search{flex:1 1 240px;max-width:360px}
.perm-tools .spacer{flex:1}
.perm-tree{position:relative;display:grid;gap:6px;padding:12px 14px 16px 14px}
.perm-node{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.perm-node.is-on{border-color:#bfe3f3}
.perm-node.is-open{box-shadow:var(--shadow-sm)}
.perm-node-head{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 6px;min-height:52px}
.perm-node-toggle{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:var(--r-sm);color:var(--muted);transition:background-color var(--t-fast) ease}
.perm-node-toggle svg{width:16px;height:16px;transform:rotate(-90deg);transition:transform var(--t-base) var(--ease-out)}
.perm-node.is-open .perm-node-toggle svg{transform:none}
.perm-node-toggle:disabled{visibility:hidden}
@media(hover:hover) and (pointer:fine){.perm-node-toggle:not(:disabled):hover{background:var(--surface-3)}}
.perm-node-title{flex:1;min-width:0;display:grid;text-align:left;padding:2px 0}
.perm-node-title:disabled{cursor:default}
.perm-node-title b{color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perm-node-title small{color:var(--muted);font-size:12px}
.perm-meter{width:64px;height:5px;flex:none;border-radius:999px;background:var(--surface-3);overflow:hidden}
.perm-meter i{display:block;height:100%;border-radius:inherit;background:var(--faint);transition:width var(--t-base) var(--ease-out)}
.perm-meter.has i{background:var(--accent)}
.perm-node .perm-bulk{opacity:0;pointer-events:none;transition:opacity var(--t-fast) ease}
.perm-node.is-open .perm-bulk{opacity:1;pointer-events:auto}
.perm-node-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.perm-node.is-open .perm-node-body{grid-template-rows:1fr}
.perm-node-inner{min-height:0;overflow:hidden;padding:0 14px 0 44px;position:relative}
.perm-node-inner::before{content:"";position:absolute;left:19px;top:0;bottom:18px;width:1px;background:var(--line-strong)}
.perm-node-inner>:last-child{margin-bottom:12px}
.perm-node .perm-scope{margin-top:4px}
.perm-node .perm-items{margin-top:4px}
.perm-node .perm-items li{position:relative}
.perm-node .perm-items li::before{content:"";position:absolute;left:-25px;top:19px;width:16px;height:1px;background:var(--line-strong)}
.perm-empty{padding:12px 4px}
@media(prefers-reduced-motion:reduce){.perm-node-body,.perm-node-toggle svg{transition:none}}
/* Contraseña maestra */
.mp-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.mp-status b{display:block}
.mp-dot{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:none}
.mp-status.is-on .mp-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.mp-secret{font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.mp-how{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.mp-how ol{margin:0;padding-left:20px;display:grid;gap:4px}
.mp-how p{font-size:12.5px}
.mp-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1000px){.users-layout{grid-template-columns:minmax(0,1fr)}.users-list{position:static;max-height:300px}}
@media(max-width:640px){
  .user-card{padding:16px}
  .user-actions .btn{flex:1 1 calc(50% - 6px);justify-content:center}
  .user-actions .btn.primary{margin-left:0}
  .perm-node-head{flex-wrap:wrap;padding-right:8px}
  .perm-meter{display:none}
  .perm-node .perm-bulk{width:100%;justify-content:flex-end;display:none}
  .perm-node.is-open .perm-bulk{display:flex}
  .perm-node-inner{padding-left:34px;padding-right:10px}
  .perm-node-inner::before{left:19px}
  .perm-node .perm-items li::before{left:-15px;width:8px}
  .perm-tools .search{max-width:none}
}

/* Dinero */
.mode-seg{margin-bottom:18px;flex-wrap:wrap}
.count-pill{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font-size:11.5px;font-weight:600;line-height:18px;text-align:center}
.tabs [aria-selected=true] .count-pill{background:var(--accent-soft);color:var(--accent-strong)}
.bad-txt{color:var(--bad)}.ok-txt{color:var(--ok)}
.t tr.sel-row{cursor:pointer;user-select:none}
.t tr.is-disabled{opacity:.6;cursor:default}
.t tr.is-sel td{background:var(--accent-soft)}
.capital-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:14px;align-items:end}
@media(max-width:800px){.capital-form{grid-template-columns:minmax(0,1fr)}}
.alloc{display:flex;align-items:center;gap:6px}
.alloc .select{width:auto;height:32px}
.alloc .input{width:90px;height:32px}
.ledger-filters .input,.ledger-filters .select{width:auto;height:32px}

/* Plantillas / correos: lista + editor */
.tpl-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.tpl-groups{padding:6px;display:grid;gap:2px;position:sticky;top:0}
.tpl-group{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);text-align:left;transition:background-color var(--t-fast) ease}
.tpl-group .ico{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:var(--surface-3);color:var(--ink-2)}
.tpl-group .ico svg{width:16px;height:16px}
.tpl-group b{display:block;color:var(--ink);font-weight:600;font-size:13.5px}
.tpl-group small{display:block;color:var(--muted);font-size:12px}
.tpl-group[aria-current=true]{background:var(--accent-soft)}
.tpl-group[aria-current=true] .ico{background:var(--accent);color:#fff}
@media(hover:hover){.tpl-group:hover:not([aria-current=true]){background:var(--surface-3)}}
.tpl-editor{padding:20px}
.tpl-editor>header,.tpl-editor form>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tpl-editor h2{font-size:17px}
.tpl-editor footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tpl-tags{display:grid;gap:8px;margin-bottom:14px}
.tpl-tags b{font-size:12.5px;color:var(--ink-2)}
.tpl-tags>div{display:flex;gap:6px;flex-wrap:wrap}
.tpl-tags .chip{cursor:grab;font-family:var(--mono);font-size:12px;animation:none}
@media(hover:hover){.tpl-tags .chip:hover{background:var(--accent-soft);color:var(--accent-strong)}}
.mail-fields{border:0;margin:0;padding:0;min-width:0}
.mail-fields:disabled{opacity:.5}
.mail-result{min-height:20px;margin-top:10px;font-size:13px;color:var(--ok)}
.mail-result.bad{color:var(--bad)}
@media(max-width:900px){.tpl-layout{grid-template-columns:minmax(0,1fr)}.tpl-groups{position:static}}

/* Parámetros generales */
.settings-card{overflow:hidden}
.settings-card>h2{font-size:15px;padding:14px 20px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.setting{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,.8fr);gap:20px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:0}
.setting.wide{grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr)}
.setting label{display:block;font-weight:600;color:var(--ink)}
.setting p{margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.45}
.setting code{font-family:var(--mono);font-size:11px;color:var(--faint)}
.setting .restart{color:var(--bad);font-weight:550}
.setting-input{display:flex;align-items:center;gap:8px;min-width:0}
.setting-input.changed .input,.setting-input.changed .select{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.json-ed{display:grid;gap:8px;width:100%;min-width:0}
.json-ed.factors{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.t.compact th,.t.compact td{padding:6px 8px}
.t.compact .input{height:32px;min-width:90px}
@media(max-width:800px){.setting,.setting.wide{grid-template-columns:minmax(0,1fr)}}

/* App móvil */
.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px}
.device-card{padding:18px}
.device-card header{display:flex;align-items:flex-start;gap:10px}
.device-card header>div{flex:1}
.device-card header .ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.device-card small{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.device-card h3{font-size:15px;margin-top:2px}
.device-card footer{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.access-code{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);font-family:var(--mono);font-size:12px;letter-spacing:.05em}
.inline-form{align-items:end}
@media(max-width:560px){.device-grid{grid-template-columns:minmax(0,1fr)}}

/* Visor de documentos */
.viewer{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(6,21,41,.55);opacity:1;transition:opacity 200ms ease}
@starting-style{.viewer{opacity:0}}
.viewer.closing{opacity:0;transition-duration:160ms}
.viewer-card{display:flex;flex-direction:column;width:min(1000px,100%);height:min(92dvh,1100px);background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  scale:1;transition:scale 240ms var(--ease-out)}
@starting-style{.viewer-card{scale:.97}}
.viewer-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.viewer-body{flex:1;min-height:0;background:var(--surface-3);display:grid;place-items:center;overflow:auto}
.viewer-body iframe{width:100%;height:100%;border:0;background:#fff}
.viewer-body img{max-width:100%;max-height:100%;object-fit:contain}
svg.flip-v{transform:scaleY(-1)}

/* Alta manual */
.manual{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.m-sec{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.m-sec>header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.m-sec>header>div{flex:1;min-width:0}
.m-sec h3{font-size:14.5px}
.m-sec header p{margin-top:3px;color:var(--muted);font-size:12.5px;max-width:62ch}
.m-step{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:650}
.form-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.form-grid.g3{grid-template-columns:minmax(0,1fr)}}
.check{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.m-rows{display:grid;gap:8px}
.m-empty{padding:14px;border-radius:var(--r-md);background:var(--surface-2);color:var(--muted);font-size:13px;text-align:center}
.m-cred{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:10px;align-items:end}
.m-search{position:relative}
.m-ok{position:absolute;right:10px;bottom:9px;color:var(--ok)}
.m-ok svg{width:16px;height:16px}
.m-sugg{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:4px;max-height:260px;overflow:auto;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  transform-origin:top center;transition:opacity 150ms var(--ease-out),scale 150ms var(--ease-out)}
@starting-style{.m-sugg{opacity:0;scale:.98}}
.m-sugg button{display:block;width:100%;padding:8px 10px;border-radius:7px;text-align:left}
.m-sugg button b{display:block;font-weight:550;color:var(--ink)}
.m-sugg button small{color:var(--muted);font-size:12px}
@media(hover:hover){.m-sugg button:hover{background:var(--surface-3)}}
.m-pay{display:grid;grid-template-columns:110px repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2)}
.m-pay>b{align-self:center;color:var(--ink);font-weight:600;font-size:13px}
.m-pay.amended{background:var(--info-soft)}
@media(max-width:700px){.m-cred{grid-template-columns:minmax(0,1fr) auto}.m-cred>label{grid-column:1}.m-pay{grid-template-columns:minmax(0,1fr)}}

/* Confirmación */
dialog.confirm{width:min(440px,calc(100vw - 32px));padding:24px;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);
  opacity:1;scale:1;transition:opacity 200ms var(--ease-out),scale 200ms var(--ease-out),overlay 200ms allow-discrete,display 200ms allow-discrete}
@starting-style{dialog.confirm[open]{opacity:0;scale:.97}}
dialog.confirm::backdrop{background:rgba(6,21,41,.45)}
dialog.confirm h2{font-size:18px}
dialog.confirm p{margin-top:8px;color:var(--muted);line-height:1.55}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}

/* Avisos */
.toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:grid;gap:8px;width:min(380px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--frame);color:#fff;box-shadow:var(--shadow-lg);font-size:13.5px;
  opacity:1;transform:translateY(0);transition:opacity 260ms ease,transform 260ms var(--ease-out)}
@starting-style{.toast{opacity:0;transform:translateY(12px)}}
.toast.leaving{opacity:0;transform:translateY(8px);transition-duration:160ms}
.toast svg{width:18px;height:18px;margin-top:1px}
.toast.ok svg{color:#4ade80}.toast.bad svg{color:#f87171}

/* Esqueletos y vacíos */
.sk{display:block;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 0%,#f7f8fa 45%,var(--surface-3) 90%);background-size:220% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{from{background-position:120% 0}to{background-position:-120% 0}}
.empty{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;padding:48px 20px;text-align:center;color:var(--muted)}
.empty p{max-width:100%;overflow-wrap:anywhere}
.empty .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-3);color:var(--ink-2)}
.empty b{color:var(--ink);font-size:15px}

/* ───────── Movimiento ───────── */
/* Entrada de vista: corta, desde ya visible (opacidad .4), sin bloquear interacción */
.view-in{animation:viewIn 220ms var(--ease-out) backwards}
@keyframes viewIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Cascada solo en la primera carga de una lista; tope de 8 elementos */
.stagger>*{animation:rise 260ms var(--ease-out) both}
.stagger>*:nth-child(2){animation-delay:30ms}.stagger>*:nth-child(3){animation-delay:60ms}.stagger>*:nth-child(4){animation-delay:90ms}
.stagger>*:nth-child(5){animation-delay:120ms}.stagger>*:nth-child(6){animation-delay:150ms}.stagger>*:nth-child(7){animation-delay:180ms}.stagger>*:nth-child(n+8){animation-delay:210ms}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease-out)}
/* Entrada de pantalla (core/fx.js pone .entering ~1.4 s al montar la vista; filtros y datos en vivo ya no animan):
   indicadores en cascada, primeras filas de tablas en micro-cascada y bloques principales escalonados. */
.entering .stats>.stat{animation:rise 340ms var(--ease-out) both}
.entering .stats>.stat:nth-child(2){animation-delay:45ms}.entering .stats>.stat:nth-child(3){animation-delay:90ms}.entering .stats>.stat:nth-child(4){animation-delay:135ms}.entering .stats>.stat:nth-child(5){animation-delay:180ms}.entering .stats>.stat:nth-child(n+6){animation-delay:220ms}
.entering table.t tbody tr:nth-child(-n+14){animation:rowIn 300ms calc(80ms + var(--r,0)*22ms) var(--ease-out) both}
.entering table.t tbody tr:nth-child(2){--r:1}.entering table.t tbody tr:nth-child(3){--r:2}.entering table.t tbody tr:nth-child(4){--r:3}.entering table.t tbody tr:nth-child(5){--r:4}.entering table.t tbody tr:nth-child(6){--r:5}.entering table.t tbody tr:nth-child(7){--r:6}
.entering table.t tbody tr:nth-child(8){--r:7}.entering table.t tbody tr:nth-child(9){--r:8}.entering table.t tbody tr:nth-child(10){--r:9}.entering table.t tbody tr:nth-child(11){--r:10}.entering table.t tbody tr:nth-child(12){--r:11}.entering table.t tbody tr:nth-child(13){--r:12}.entering table.t tbody tr:nth-child(14){--r:13}
.entering>.card,.entering>.table-wrap,.entering>section{animation:rise 360ms 60ms var(--ease-out) both}
.entering>.card~.card,.entering>section~section{animation-delay:120ms}
.entering .lead-card,.entering .center-item{animation:rise 300ms calc(var(--i,0)*30ms + 60ms) var(--ease-out) backwards}
@keyframes rowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* Pestañas: el subrayado crece hacia la pestaña elegida */
.tabs button::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform 240ms var(--ease-out)}
.tabs button[aria-selected=true]::after{transform:scaleX(1)}
/* Contadores del menú: pulso cuando sube el número; el módulo activo se ilumina al llegar */
.count.bump{animation:countBump 460ms var(--ease-out)}
@keyframes countBump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.rail-leaf[aria-current=page]::before{animation:leafIn 260ms var(--ease-out)}
@keyframes leafIn{from{transform:scaleX(0);transform-origin:left}}
/* Tarjetas que se abren: se levantan un poco al pasar el cursor */
@media(hover:hover) and (pointer:fine){
  button.stat{transition:border-color var(--t-fast) ease,transform 200ms var(--ease-out),box-shadow 200ms ease}
  button.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  button.stat:active{transform:scale(.985)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sk{animation:none}
}

/* ───────── Acceso (pantalla completa) ─────────
   Escena de marca que llena la pantalla: auroras que derivan despacio, retícula tenue, partículas que suben y la ruta
   ascendente; la mascota (símbolo) flota con su halo. Se ve una vez por sesión: aquí sí cabe movimiento ambiental.
   Sólo transform/opacity; con prefers-reduced-motion todo queda quieto. */
.auth{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,440px);align-items:center;gap:clamp(28px,5vw,88px);min-height:100dvh;padding:clamp(24px,5vw,80px);background:#04101f;color:#fff;isolation:isolate}
.auth-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 22% 32%,#10305f 0%,#071a35 45%,#030b17 100%)}
.auth-aurora{position:absolute;border-radius:50%;will-change:transform}
.auth-aurora.a1{width:64vmax;height:64vmax;left:-20vmax;top:-24vmax;background:radial-gradient(closest-side,rgba(34,211,238,.34),transparent 70%);animation:authDrift1 22s ease-in-out infinite alternate}
.auth-aurora.a2{width:56vmax;height:56vmax;right:-22vmax;bottom:-26vmax;background:radial-gradient(closest-side,rgba(29,143,240,.40),transparent 70%);animation:authDrift2 26s ease-in-out infinite alternate}
.auth-aurora.a3{width:40vmax;height:40vmax;left:36%;top:28%;background:radial-gradient(closest-side,rgba(95,212,246,.16),transparent 70%);animation:authDrift3 18s ease-in-out infinite alternate}
.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(148,178,214,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,178,214,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 32% 45%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 32% 45%,#000 25%,transparent 80%)}
.auth-dots i{position:absolute;bottom:-14px;left:calc(3% + var(--i) * 7%);width:6px;height:6px;border-radius:50%;background:#5fd4f6;box-shadow:0 0 12px rgba(95,212,246,.75);opacity:0;animation:authRise calc(10s + var(--i) * .6s) linear calc(var(--i) * -1.4s) infinite}
.auth-dots i:nth-child(3n){width:4px;height:4px;background:#1d8ff0}
.auth-dots i:nth-child(4n+1){width:8px;height:8px}
.auth-route{position:absolute;left:0;bottom:0;width:100%;height:72%}
.auth-route path{stroke-dasharray:1;stroke-dashoffset:0}
.auth-hero{display:grid;justify-items:center;text-align:center;min-width:0}
.auth-mascot{position:relative;display:grid;place-items:center;animation:authFloat 6s ease-in-out infinite}
.auth-halo{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(closest-side,rgba(34,211,238,.34),rgba(29,143,240,.12) 60%,transparent);animation:authHalo 5s ease-in-out infinite alternate}
.auth-hero .mark{position:relative;width:clamp(150px,17vw,240px);height:auto;filter:drop-shadow(0 24px 40px rgba(29,143,240,.45))}
.auth-shadow{position:absolute;bottom:-30px;left:50%;width:54%;height:14px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);animation:authShadow 6s ease-in-out infinite}
.auth-word{margin-top:44px;color:#fff;font-size:clamp(28px,3.4vw,48px);font-weight:750;line-height:1.05;letter-spacing:.015em;text-transform:uppercase}
.auth-tag{display:flex;align-items:center;gap:12px;margin-top:14px;color:#5fd4f6;font-size:clamp(11.5px,1vw,14px);font-weight:650;letter-spacing:.26em;text-transform:uppercase}
.auth-tag i{display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,#5fd4f6)}
.auth-tag i:last-child{transform:scaleX(-1)}
.auth-note{margin-top:22px;max-width:38ch;color:var(--frame-ink);font-size:14px;line-height:1.55}
.auth-card{position:relative;width:100%;min-width:0;border-radius:22px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
/* Entrada (una vez): la mascota aparece, el nombre y el lema suben, la ruta se dibuja y llega la tarjeta. */
.auth-enter .auth-hero .mark{animation:authMark 820ms 120ms var(--ease-out) both}
.auth-enter .auth-word{animation:rise 460ms 320ms var(--ease-out) both}
.auth-enter .auth-tag{animation:rise 460ms 400ms var(--ease-out) both}
.auth-enter .auth-tag i{animation:authLine 560ms 560ms var(--ease-out) both}
.auth-enter .auth-note{animation:rise 460ms 480ms var(--ease-out) both}
.auth-enter .auth-route path{animation:authDraw 1900ms 300ms var(--ease-in-out) both}
.auth-enter .auth-card{animation:authCard 560ms 160ms var(--ease-out) both}
.auth-enter .auth-form>*{animation:rise 360ms var(--ease-out) both}
.auth-enter .auth-form>*:nth-child(1){animation-delay:260ms}.auth-enter .auth-form>*:nth-child(2){animation-delay:310ms}.auth-enter .auth-form>*:nth-child(3){animation-delay:360ms}.auth-enter .auth-form>*:nth-child(4){animation-delay:410ms}.auth-enter .auth-form>*:nth-child(n+5){animation-delay:460ms}
@keyframes authCard{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes authMark{0%{opacity:0;transform:scale(.78) rotate(-8deg)}70%{opacity:1;transform:scale(1.03) rotate(.5deg)}100%{opacity:1;transform:none}}
@keyframes authLine{from{opacity:0;transform:scaleX(0)}}
@keyframes authDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes authHalo{from{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1.08)}}
@keyframes authFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}
@keyframes authShadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.8);opacity:.5}}
@keyframes authDrift1{to{transform:translate(12vmax,8vmax) scale(1.12)}}
@keyframes authDrift2{to{transform:translate(-10vmax,-7vmax) scale(1.08)}}
@keyframes authDrift3{to{transform:translate(-9vmax,7vmax) scale(.88)}}
@keyframes authRise{0%{opacity:0;transform:translateY(0)}12%{opacity:.85}75%{opacity:.45}100%{opacity:0;transform:translateY(-108vh)}}
@media(prefers-reduced-motion:reduce){.auth-aurora,.auth-dots i,.auth-mascot,.auth-halo,.auth-shadow{animation:none}.auth-dots{display:none}}
@media(max-width:900px){
  .auth{grid-template-columns:minmax(0,1fr);align-content:start;gap:22px;padding:28px 16px 32px}
  .auth-hero .mark{width:112px}
  .auth-word{margin-top:26px;font-size:26px}
  .auth-tag{font-size:11px;letter-spacing:.2em}
  .auth-note{margin-top:12px;font-size:13px}
  .auth-card{max-width:440px;justify-self:center}
  .auth-route{height:45%}
}
.auth-form{display:grid;align-content:center;gap:14px;padding:40px}
.auth-form h1{font-size:24px}
.auth-form .btn{height:42px}
.auth-msg{min-height:20px;color:var(--bad);font-size:13px}
/* Alta por invitación (views/invitacion.js) */
.invite-form{display:grid;gap:14px}
.invite-form .field small{font-size:12px;margin-top:2px}
.invite-form .ok-text{color:var(--ok)}
.invite-loading{display:grid;gap:14px}
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:44px}
.pw-wrap .btn{position:absolute;right:4px;top:50%;translate:0 -50%;height:32px!important;width:32px}
.invite-state{display:grid;gap:18px;justify-items:start}
.invite-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bad-soft);color:var(--bad)}
.invite-state.ok .invite-ico{background:var(--ok-soft);color:var(--ok)}
.invite-ico svg{width:22px;height:22px}
.invite-state.ok .invite-ico{animation:invite-pop 360ms var(--ease-out) both}
@keyframes invite-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.invite-state.ok .invite-ico{animation:none}}
/* Invitaciones en Usuarios (views/ajustes_usuarios.js) */
.note.ok{background:var(--ok-soft);color:#14532d}
.note.ok>svg{color:var(--ok)}
.invite-link{display:flex;gap:8px;align-items:center}
.invite-link .input{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px}
.invite-list{display:grid;gap:8px}
.invite-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.invite-row>div{min-width:0;flex:1}
.invite-row b{display:block;font-size:13.5px}
.invite-row small{display:block;color:var(--muted);font-size:12px}
@media(max-width:600px){.auth-form{padding:26px 20px 28px}}

/* ───────── Responsivo ───────── */
/* Utilidades compartidas */
.flip{transform:scaleX(-1)}
.avatar.sm{width:26px;height:26px;flex-basis:26px;border-radius:8px;font-size:10.5px}
.danger-txt{color:var(--bad)}
.t-static tbody tr{cursor:default}
.t-static tbody tr[data-open]{cursor:pointer}
.t td.wrap{white-space:normal;min-width:180px}
.mini-bar{position:relative;display:inline-block;width:64px;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;vertical-align:middle}
.mini-bar>i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--w,0));animation:barGrow 640ms calc(var(--i,0)*30ms) var(--ease-out) backwards}
@keyframes barGrow{from{transform:scaleX(0)}}

/* Reportes */
.rep-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rep-field{display:grid;gap:4px;font-size:12px;color:var(--muted);font-weight:550}
.rep-field .select{width:auto;min-width:190px;height:34px}
.rep-period{display:flex;align-items:center;gap:4px;padding:3px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.rep-period .select{width:auto;height:30px;border-color:transparent;background:transparent;font-weight:600;padding:0 8px}
.rep-period .select:focus{border-color:var(--accent)}
.rep-stats .stat .value{font-size:24px}
.rep-in>*{animation:rise 300ms var(--ease-out) backwards}
.rep-in>*:nth-child(2){animation-delay:60ms}.rep-in>*:nth-child(3){animation-delay:120ms}.rep-in>*:nth-child(4){animation-delay:180ms}
.rep-in .stat{animation:rise 280ms calc(var(--k,0)*40ms) var(--ease-out) backwards}
.rep-stats .stat:nth-child(2){--k:1}.rep-stats .stat:nth-child(3){--k:2}.rep-stats .stat:nth-child(4){--k:3}.rep-stats .stat:nth-child(5){--k:4}.rep-stats .stat:nth-child(6){--k:5}
.no-anim *{animation:none!important}
.rep-panel{margin-bottom:16px;overflow:hidden}
.rep-panel-body{padding:18px 20px}
.rep-panel.flush .rep-panel-body{padding:0}
.rep-panel.flush .rep-table{border:0;border-radius:0}
.rep-title{display:flex;align-items:center;gap:10px}
.rep-ico{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent-strong)}
.rep-ico svg{width:15px;height:15px}
.rep-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-actions .rep-field{grid-auto-flow:column;align-items:center;gap:8px}
.rep-empty{padding:26px 20px;color:var(--muted);text-align:center}
.rep-foot{margin:0;padding:10px 14px;font-size:12px;color:var(--muted);white-space:normal}
.rep-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.rep-split .rep-panel{margin-bottom:16px}
.conv{display:flex;align-items:center;gap:10px}
.conv .num{min-width:48px;text-align:right;color:var(--ink-2)}
.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:minmax(90px,180px) minmax(0,1fr) auto;align-items:center;gap:14px}
.hbar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-weight:550}
.hbar-track{position:relative;height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.hbar-track>i{position:absolute;inset:0;border-radius:inherit;background:var(--gradient);transform-origin:left;transform:scaleX(var(--w));animation:barGrow 720ms calc(var(--i)*45ms + 120ms) var(--ease-out) backwards}
.hbar>b{min-width:44px;text-align:right;color:var(--ink)}
.funnel{display:grid;gap:10px}
.fstep{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(140px,220px);align-items:center;gap:16px}
.fstep-meta{display:flex;align-items:center;gap:10px;color:var(--ink)}
.fstep-bar{height:38px;display:flex;justify-content:center;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.fstep-bar>i{display:block;height:100%;width:calc(var(--w)*100%);border-radius:10px;background:var(--gradient);opacity:calc(1 - var(--i)*.14);animation:funnelIn 700ms calc(var(--i)*90ms + 120ms) var(--ease-out) backwards}
@keyframes funnelIn{from{transform:scaleX(.2);opacity:0}}
.fstep-val b{display:block;font-size:18px;color:var(--ink)}
.fstep-val small{color:var(--muted);font-size:12px}
.ledger-head p{color:var(--muted);font-size:12.5px;margin-top:2px}
.ledger-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ledger-total{display:grid;justify-items:end;line-height:1.2}
.ledger-total span{color:var(--muted);font-size:12px}
.ledger-total b{font-size:20px;color:var(--ink);letter-spacing:-.02em}
.ledger-total small{color:var(--muted);font-size:12px}
.seg [aria-pressed=true] .count-pill{background:var(--accent-soft);color:var(--accent-strong)}
@media(max-width:1000px){.rep-split{grid-template-columns:minmax(0,1fr)}.fstep{grid-template-columns:minmax(0,1fr);gap:6px}.fstep-bar{justify-content:flex-start}}
@media(max-width:640px){.hbar{grid-template-columns:minmax(0,1fr) auto}.hbar-track{grid-column:1/-1;grid-row:2}.rep-field .select{min-width:0;width:100%}.rep-filters{width:100%}.rep-filters>*{flex:1 1 auto}.ledger-total{justify-items:start}}

/* Gastos */
.cat-row{display:flex;gap:8px}
.cat-row .select{flex:1}
.cat-manager{margin-top:8px;padding:12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cat-chips .chip button{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:-4px;border-radius:50%;color:var(--muted)}
.cat-chips .chip button svg{width:12px;height:12px}
.cat-chips .chip button:disabled{opacity:.35}
@media(hover:hover){.cat-chips .chip button:not(:disabled):hover{background:var(--bad-soft);color:var(--bad)}}
.cat-add{display:flex;gap:8px}
.tax-box{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.tax-box legend{padding:0 6px;color:var(--ink-2);font-size:12.5px;font-weight:600}
.tax-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tax-controls .seg button:disabled{opacity:.45}
.tax-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.tax-sum>div{padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.tax-sum span{display:block;color:var(--muted);font-size:12px}
.tax-sum b{display:block;margin-top:2px;color:var(--ink);font-size:15px}
.tax-sum .total{border-color:var(--accent);background:var(--accent-soft)}
.tax-sum.novat>div:nth-child(2){opacity:.45}
.fixed-list{display:grid;gap:8px}
.fixed-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.fixed-item .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--surface-3);color:var(--ink-2)}
.fixed-item .ico svg{width:16px;height:16px}
.fixed-item small{display:block;color:var(--muted);font-size:12px}
.fixed-item .confirming{background:var(--bad);color:#fff}

/* Equipo / presencia */
.team-btn{position:relative;gap:6px}
.team-btn .p-dot{position:absolute;left:21px;top:7px;box-shadow:0 0 0 2px var(--surface)}
.p-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.p-dot.on,.team-btn[data-state=on] .p-dot{background:var(--ok)}
.p-dot.away,.team-btn[data-state=away] .p-dot{background:var(--warn)}
.p-dot.off,.team-btn[data-state=off] .p-dot{background:var(--line-strong)}
.seg .p-dot{margin-right:6px}
.presence-self{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.presence-self>div:nth-child(2){flex:1}
.presence-self b{display:block;color:var(--ink)}
.presence-self small{color:var(--muted);font-size:12px}
.presence-list{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.presence-list article{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--line)}
.presence-list article>div{flex:1;min-width:0}
.presence-list b,.presence-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-list b{display:block;color:var(--ink);font-weight:600}
.presence-list small{color:var(--muted);font-size:12px}
.p-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.p-badge.on{color:var(--ok)}.p-badge.away{color:var(--warn)}.p-badge.off{color:var(--muted)}
.act-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.act-head p{max-width:72ch;font-size:12.5px;line-height:1.5}
.act-head+.table-wrap td .mini-bar,.table-wrap td .mini-bar{margin-right:8px}

@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .stat{padding:12px 14px}
  .stat .value,.rep-stats .stat .value{font-size:19px}
  .stat .label{font-size:12px}
}

/* Cartera (CRM / Cobranza) y ficha */
.cart-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat-action{border-style:dashed;background:var(--surface-2)}
.stat-action .value{color:var(--accent-strong)}
.cart-sort{margin-left:0;width:auto;color:var(--muted);font-weight:550}
.cart-sort .select{min-width:220px;flex:none;width:auto}
.cart-table td{height:56px;vertical-align:middle}
.cart-table th[draggable=true]{cursor:grab}
.cart-table th.is-dragging{opacity:.55}
.cart-table th.is-drop{box-shadow:inset 2px 0 0 var(--accent)}
.cart-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.cart-last{display:flex;align-items:flex-start;gap:8px;min-width:0}
.cart-last .p-dot{margin-top:6px}
.cart-last b{display:block;color:var(--ink);font-weight:550}
.cart-last small{display:block;color:var(--muted);font-size:12px}
.p-dot.bad{background:var(--bad)}.p-dot.info{background:var(--info)}
.cart-date{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.cart-date svg{width:14px;height:14px;color:var(--muted)}
.cart-acts{justify-content:flex-start}
.mov-groups{display:grid;gap:12px}
.mov-group{display:grid;gap:6px}
.mov-group>span{color:var(--muted);font-size:12px;font-weight:600}
.mov-group>div{display:flex;gap:6px;flex-wrap:wrap}
.day-input{width:88px;height:32px}
.creditor.is-done{background:linear-gradient(180deg,var(--ok-soft),var(--surface) 70%);border-color:#cfe9d8}
.page-head .seg button{display:inline-flex;align-items:center;gap:6px}
.page-head .seg svg{width:15px;height:15px}

/* Centros de pendientes (Hoy) */
.centers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;margin-bottom:16px}
.centers:empty{display:none}
.center .card-head h2{display:flex;align-items:center;gap:10px}
.center-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent-strong)}
.center-ico svg{width:15px;height:15px}
.center-body{max-height:420px;overflow:auto}
.center-list{display:grid}
.center-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background-color 120ms ease;animation:rise 240ms calc(var(--i,0)*35ms) var(--ease-out) backwards}
.center-item:last-child{border-bottom:0}
@media(hover:hover){.center-item:hover{background:var(--surface-2)}}
.center-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.center-item .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--surface-3);color:var(--ink-2)}
.center-item .ico svg{width:16px;height:16px}
.center-item .ico.warn{background:var(--warn-soft);color:var(--warn)}.center-item .ico.bad{background:var(--bad-soft);color:var(--bad)}.center-item .ico.ok{background:var(--ok-soft);color:var(--ok)}.center-item .ico.info{background:var(--info-soft);color:var(--info)}.center-item .ico.violet{background:var(--violet-soft);color:var(--violet)}
.center-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.center-top b{color:var(--ink);font-weight:600}
.center-main p{margin-top:2px;color:var(--ink-2);font-size:13px;line-height:1.45}
.center-acts{display:flex;align-items:center;gap:4px}
.center-empty{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:14px 20px;color:var(--muted);font-size:13px}
.center-empty span{grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.center-empty span svg{width:16px;height:16px}
.center-empty b{color:var(--ink)}
@media(max-width:640px){.center-item{grid-template-columns:auto minmax(0,1fr);padding:12px 14px}.center-acts{grid-column:2}}

/* Controles adicionales */
.btn.danger-ghost{color:var(--bad);border-color:transparent;background:var(--bad-soft);box-shadow:none}
.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-color:#fff #fff transparent transparent;animation:spin 700ms linear infinite}
.btn:not(.primary).loading::after{border-color:var(--ink-2) var(--ink-2) transparent transparent}
.select.sm{height:30px;font-size:12.5px;padding-left:10px}
.link-btn{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600;text-align:left}
@media(hover:hover){.link-btn:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}}
.chip.link{cursor:pointer;background:var(--accent-soft);color:var(--accent-strong)}
.count-pill.hot{background:var(--bad);color:#fff}
em.req{color:var(--bad);font-style:normal}
.is-invalid,.input.is-invalid,.select.is-invalid{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(198,40,40,.14)!important}

/* Columnas redimensionables */
.t.resizable{table-layout:fixed;width:100%}
.t.resizable th{position:sticky;overflow:hidden}
.t.resizable td{overflow:hidden;text-overflow:ellipsis}
.t.resizable td.wrap{white-space:normal}
.col-resize{position:absolute;top:8px;right:0;bottom:8px;width:7px;cursor:col-resize;border-right:2px solid transparent;transition:border-color var(--t-fast) ease}
@media(hover:hover){.t.resizable th:hover .col-resize{border-color:var(--line-strong)}.col-resize:hover{border-color:var(--accent)!important}}
body.col-resizing,body.col-resizing *{cursor:col-resize!important;user-select:none}

/* Zona de archivos */
.dz-field{display:grid;gap:6px}
.dz-title{color:var(--ink-2);font-size:12.5px;font-weight:550}
.dz{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 14px;padding:14px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-2);cursor:pointer;transition:border-color var(--t-fast) ease,background-color var(--t-fast) ease,transform var(--t-fast) var(--ease-out)}
.dz:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.dz-ico{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--accent-strong);transition:transform var(--t-base) var(--ease-out)}
.dz-ico svg{width:18px;height:18px}
.dz-text b{color:var(--ink);font-weight:600}
.dz-text span{display:block;color:var(--muted);font-size:12.5px}
.dz-text u{color:var(--accent-strong);text-underline-offset:2px}
.dz-name{grid-column:2;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz.is-dragging{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}
.dz.is-dragging .dz-ico{transform:translateY(-2px)}
.dz.has-file{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.dz.has-file .dz-ico{color:var(--ok)}
.dz.has-file .dz-name{color:var(--ok);font-weight:550}
@media(hover:hover){.dz:hover{border-color:var(--accent)}}

/* Liquidaciones */
.liq-tabs{margin-bottom:16px}
.liq-tabs button{display:inline-flex;align-items:center;gap:7px;height:32px}
.liq-tabs svg{width:15px;height:15px}
.liq-filters .select{width:auto}
.liq-table td{height:56px}
.liq-prog{display:flex;align-items:center;gap:10px}
.liq-prog .mini-bar{width:52px}
.liq-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.liq-summary.sm{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.liq-summary>div{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);min-width:0}
.liq-summary small{color:var(--muted);font-size:12px;font-weight:550}
.liq-summary b{color:var(--ink);font-size:15px;overflow:hidden;text-overflow:ellipsis}
.liq-summary .select{height:32px}
.liq-accounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.liq-acc{display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);animation:rise 260ms calc(var(--i,0)*45ms) var(--ease-out) backwards}
.liq-acc.is-done{background:linear-gradient(180deg,var(--ok-soft),var(--surface) 70%);border-color:#cfe9d8}
.liq-acc header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.liq-acc h3{font-size:14.5px;color:var(--ink)}
.liq-acc footer{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.liq-acc footer .btn{margin-top:10px}
.liq-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:0}
.liq-data dt{color:var(--muted);font-size:11.5px;font-weight:550}
.liq-data dd{margin:2px 0 0;color:var(--ink);font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.liq-data.req{padding:10px 12px;border-radius:var(--r-md);background:var(--info-soft)}
.liq-data.paid{padding:10px 12px;border-radius:var(--r-md);background:var(--surface)}
.liq-support{display:grid;gap:10px;margin-top:18px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.liq-support h3{font-size:14px}
.liq-cond{padding:0 0 6px 25px}
@media(max-width:700px){.liq-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.liq-cond{padding-left:0}}

.rail-toggle{display:none}
@media(max-width:900px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:0 auto 0 0;z-index:65;width:min(300px,86vw);background:var(--frame);transform:translateX(-102%);transition:transform 300ms var(--ease-drawer)}
  .frame.rail-open .rail{transform:none}
  .frame.rail-open::after{content:"";position:fixed;inset:0;z-index:64;background:rgba(6,21,41,.42)}
  .sheet{margin:0;border-radius:0}
  .rail-toggle{display:inline-flex}
  .top{padding:0 12px}
  .page-inner{padding:18px 14px 64px}
  .split{grid-template-columns:minmax(0,1fr)}
  .profile{grid-template-columns:auto minmax(0,1fr)}
  .profile .actions{grid-column:1/-1}
  .hide-sm{display:none!important}
}

/* Ajustes de auditoría transversal */
/* Campana con contador de no leídas (notifications_center.js:53-55) */
.bell-btn{position:relative}
.bell-count{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:650;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--sheet);pointer-events:none}
/* Avisos en tiempo real (stdNotify97) */
.toast.note{align-items:flex-start;padding:12px 10px 12px 14px}
.toast.note.actionable{cursor:pointer}
@media(hover:hover) and (pointer:fine){.toast.note.actionable:hover{background:#0b2342}}
.toast.note .note-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);flex-shrink:0}
.toast.note .note-ico svg{width:16px;height:16px;margin:0;color:#5fd4f6}
.toast.note .note-copy{min-width:0;flex:1}
.toast.note .note-copy b{display:block;font-weight:600}
.toast.note .note-copy p{margin-top:2px;color:rgba(255,255,255,.72);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.toast.note .note-x{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:rgba(255,255,255,.62);flex-shrink:0}
.toast.note .note-x svg{width:14px;height:14px;margin:0;color:inherit}
@media(hover:hover) and (pointer:fine){.toast.note .note-x:hover{background:rgba(255,255,255,.1);color:#fff}}
/* Centro de notificaciones: fila con botón para descartar */
.task.note-row{grid-template-columns:auto minmax(0,1fr) auto auto;cursor:pointer}
.task.note-row.is-unread b{font-weight:650}
/* Mensajes de confirmación con varias líneas (pago al equipo) */
dialog.confirm p{white-space:pre-line}
/* Menú lateral ocultable en escritorio */
@media(min-width:901px){
  .rail-toggle{display:inline-flex}
  .frame.rail-collapsed{grid-template-columns:0 minmax(0,1fr)}
  .frame.rail-collapsed .rail{visibility:hidden;overflow:hidden;padding:0}
  .frame.rail-collapsed .sheet{margin-left:8px}
}
/* "Jalar para recargar" desactivado en móvil (recargar cierra la sesión) */
@media(max-width:900px){html,body,.page{overscroll-behavior-y:none}}
/* iPhone acerca la página al enfocar un campo con letra menor a 16px y la deja con scroll lateral: en pantallas táctiles los campos usan 16px */
@media(max-width:900px) and (pointer:coarse){.input,.select,.select.sm,textarea.input,.cmdk-input input{font-size:16px}}
/* Botón para limpiar buscadores */
.search .search-x{position:absolute;right:6px;top:50%;translate:0 -50%;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--faint)}
.search .search-x svg{position:static;translate:none;width:14px;height:14px;color:inherit}
@media(hover:hover) and (pointer:fine){.search .search-x:hover{background:var(--surface-3);color:var(--ink-2)}}
.search .input{padding-right:32px}
/* Recuadros de visibilidad en Usuarios y permisos */
.perm-scope span>span{display:grid;gap:1px}
.perm-scope button:disabled{cursor:not-allowed}
/* Reportes: acomodar pestañas, tarjetas y paneles (asas sólo en escritorio) */
.section-tabs a[role=tab],.rep-stats>.stat,.rep-split>.rep-panel{position:relative}
.sort-grip{position:absolute;display:grid;grid-template-columns:repeat(3,3px);gap:2px;padding:5px;border-radius:5px;cursor:grab;opacity:0;transition:opacity var(--t-fast) ease;touch-action:none}
.sort-grip i{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.sort-grip-card{top:6px;right:6px}
.sort-grip-tab{top:50%;right:2px;translate:0 -50%;padding:3px}
@media(hover:hover) and (pointer:fine){.rep-stats>.stat:hover .sort-grip,.rep-split>.rep-panel:hover .sort-grip,.section-tabs a[role=tab]:hover .sort-grip{opacity:1}}
.sort-grip:focus-visible{opacity:1}
.is-dragging{opacity:.6}
body.sorting,body.sorting *{cursor:grabbing!important;user-select:none}
/* V12.1.54: tablas de datos a pantalla completa (core/table_layout.js · fitTable).
   La .table-wrap es su propio contenedor de scroll: encabezado fijo, barra horizontal siempre a la vista y columnas
   fijas en las orillas (pin-start: la primera; pin-end: Acciones). En escritorio la tabla toma el alto que queda en
   la página; en celular o ventanas bajas sólo se limita al alto de la ventana y la página baja como siempre. */
.page-inner.wide{max-width:none}
.table-fit{max-height:calc(100dvh - 92px);overscroll-behavior-x:contain}
@media(min-width:901px) and (min-height:620px){
  .page-inner.wide{height:100%;display:flex;flex-direction:column;padding-bottom:20px}
  .page-inner.wide:has(.bulk){padding-bottom:84px}
  .fit-col{display:flex;flex-direction:column;min-height:0}
  .table-fit{min-height:160px;max-height:none}
}
.table-fit .t th{z-index:3}
.table-fit th.pin-start,.table-fit th.pin-end{z-index:4;background:var(--surface-2)}
.table-fit .row-acts{opacity:1}
/* Primera columna fija sólo en escritorio; Acciones fija hasta tableta: en el celular no se comen la pantalla. */
@media(min-width:901px){
  .table-fit .pin-start{position:sticky;left:0;z-index:2;background:var(--surface)}
  .table-fit.scroll-l .pin-start{box-shadow:inset -1px 0 0 var(--line),10px 0 12px -10px rgba(13,23,38,.28)}
}
@media(min-width:601px){
  .table-fit .pin-end{position:sticky;right:0;z-index:2;background:var(--surface)}
  .table-fit.scroll-r .pin-end{box-shadow:inset 1px 0 0 var(--line),-10px 0 12px -10px rgba(13,23,38,.28)}
}
/* Diálogo "Columnas" */
dialog.cols-dlg{width:min(420px,calc(100vw - 32px))}
.cols-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.cols-list{display:grid;gap:4px;max-height:min(52dvh,440px);margin:10px 0 0;padding:0;overflow:auto;list-style:none}
.col-pick{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:6px 36px 6px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.col-pick .check{flex:1;min-width:0}
.col-pick.is-fixed{background:var(--surface-2)}
.col-pick.is-fixed .check{cursor:default}
.col-pick small{font-size:12px;white-space:nowrap}
.col-pick.is-dragging{box-shadow:var(--shadow-md)}
.sort-grip-row{top:50%;right:8px;translate:0 -50%;opacity:.7}
@media(hover:hover) and (pointer:fine){.col-pick:hover .sort-grip{opacity:1}}