/* Lucia, sistema visual "Mesa oscura" (propuesta 1 de ui/propuestas-notion, elegida el 19/10/2026).
   Base: estilo.css de la maqueta, tal cual (fuentes locales de app_ui/fonts). Al final, lo que la app real
   necesita y la maqueta no dibuja: menús, avisos, edición en línea, arrastre, ajustes, estados vacíos. */

@font-face { font-family: 'Schibsted Grotesk'; src: url(fonts/SchibstedGrotesk-Variable.ttf) format('truetype'); font-weight: 400 900; font-display: block; }
@font-face { font-family: 'IBM Plex Sans'; src: url(fonts/IBMPlexSans-Variable.ttf) format('truetype'); font-weight: 100 700; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url(fonts/IBMPlexMono-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }

:root {
  /* Marca B */
  --carbon: #141917;
  --grafito: #1C2321;
  --hueso: #EEF0EA;
  --ceniza: #A3ACA6;
  --musgo: #4F7A5E;
  --lima: #C8EB5F;
  --lima-h: #D3F07A;
  /* Derivados */
  --hondo: #101413;
  --control: #252E2B;
  --control-h: #2C3632;
  --linea: #36413D;
  --linea-s: #263029;
  --tenue: #8E9893;
  --hover: rgba(238, 240, 234, .045);
  --hover-2: rgba(238, 240, 234, .075);

  /* Etiquetas: siete tonos apagados, todos con el gris verdoso de la marca dentro */
  --gris-bg: #2A3330;   --gris-fg: #C9D0CB;   --gris-pt: #8E9893;
  --musgo-bg: #213429;  --musgo-fg: #A9D3B3;  --musgo-pt: #6C9E7B;
  --salvia-bg: #1D3332; --salvia-fg: #96D0C7; --salvia-pt: #4F9C91;
  --pizarra-bg: #212F3C; --pizarra-fg: #A6C0DD; --pizarra-pt: #6189B3;
  --ciruela-bg: #31283A; --ciruela-fg: #CFB8E1; --ciruela-pt: #9374AE;
  --ocre-bg: #382F1E;   --ocre-fg: #E3CA8F;   --ocre-pt: #BA984B;
  --arcilla-bg: #3C2723; --arcilla-fg: #ECAD9B; --arcilla-pt: #C46D57;

  --fh: 'Schibsted Grotesk', system-ui, sans-serif;
  --fb: 'IBM Plex Sans', system-ui, sans-serif;
  --fm: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 4px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--carbon); }
body { font: 400 14px/1.5 var(--fb); color: var(--hueso); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
::selection { background: var(--lima); color: var(--grafito); }
:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; border-radius: 3px; }
.num, time { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i.s { width: 14px; height: 14px; }
.i.l { width: 18px; height: 18px; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; height: 100vh; }

/* ---------- Barra lateral ---------- */
.side { background: var(--grafito); border-right: 1px solid var(--linea-s); display: flex; flex-direction: column; min-height: 0; }
.esp { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 10px 0 14px; }
.esp .iso { width: 18px; height: 18px; }
.esp b { font: 640 15px/1 var(--fh); letter-spacing: -.01em; }
.esp .sub { font-size: 12px; color: var(--tenue); margin-left: -2px; }
.esp .ib { margin-left: auto; }
.ib { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r); color: var(--tenue); }
.ib:hover { background: var(--hover-2); color: var(--hueso); }

.side-top { padding: 2px 8px 6px; display: grid; gap: 1px; }
.it { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--r); color: var(--ceniza); font-size: 13.5px; font-weight: 500; width: 100%; text-align: left; white-space: nowrap; }
.it:hover { background: var(--hover); color: var(--hueso); }
.it.on { background: var(--control); color: var(--hueso); }
.it .i { color: var(--tenue); }
.it.on .i, .it:hover .i { color: var(--ceniza); }
.it .cnt { margin-left: auto; font-size: 12px; color: var(--tenue); font-weight: 400; }
.it { overflow: hidden; }
.it .txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.it .txt + .cnt, .it .txt + .fecha-r, .it .txt + .marca-b { margin-left: 6px; }
.it kbd, .kb { margin-left: auto; font: 500 10.5px/1 var(--fb); color: var(--tenue); letter-spacing: .02em; }

.grabar { display: flex; align-items: center; gap: 10px; height: 38px; margin: 6px 0 4px; padding: 0 10px 0 12px; border-radius: var(--r); border: 1px solid rgba(200, 235, 95, .42); background: rgba(200, 235, 95, .07); color: var(--lima); font: 600 14px/1 var(--fh); letter-spacing: -.005em; width: 100%; }
.grabar:hover { background: rgba(200, 235, 95, .13); border-color: rgba(200, 235, 95, .6); }
.grabar .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px rgba(200, 235, 95, .16); }
.grabar kbd { margin-left: auto; color: rgba(200, 235, 95, .7); font: 500 10.5px/1 var(--fb); }

.side-scroll { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.grupo { margin-top: 14px; }
.grupo-t { display: flex; align-items: center; height: 26px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--tenue); }
.grupo-t .ib { margin-left: auto; width: 22px; height: 22px; opacity: 0; }
.grupo:hover .grupo-t .ib { opacity: 1; }
.tw { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; color: var(--tenue); margin-left: -4px; flex: none; }
.tw:hover { background: var(--hover-2); color: var(--hueso); }
.tw .i { transition: transform .15s var(--ease); }
.tw.ab .i { transform: rotate(90deg); }
.anid { display: grid; gap: 1px; }
.anid .it { padding-left: calc(8px + var(--n, 0) * 16px); }
.anid .fecha-r { margin-left: auto; font-size: 11.5px; color: var(--tenue); font-weight: 400; }
.marca-b { width: 6px; height: 6px; border-radius: 50%; background: var(--hueso); margin-left: auto; flex: none; }

.side-pie { border-top: 1px solid var(--linea-s); padding: 8px; display: grid; gap: 1px; }
.yo { display: flex; align-items: center; gap: 9px; padding: 6px 8px; font-size: 13px; color: var(--ceniza); }
.yo .local { margin-left: auto; font-size: 11.5px; color: var(--tenue); display: flex; align-items: center; gap: 5px; }
.yo .local i { width: 6px; height: 6px; border-radius: 50%; background: var(--musgo-pt); }

/* ---------- Principal ---------- */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--carbon); }
.top { height: 44px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 16px; }
.migas { display: flex; align-items: center; gap: 2px; font-size: 13.5px; color: var(--ceniza); min-width: 0; }
.migas a { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--r); cursor: pointer; white-space: nowrap; }
.migas a:hover { background: var(--hover-2); color: var(--hueso); }
.migas a:last-child { color: var(--hueso); }
.migas .sep { color: var(--linea); }
.top .der { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.top .ed { font-size: 12.5px; color: var(--tenue); margin-right: 8px; }
.ib.fav { color: var(--ocre-fg); }

.lienzo { flex: 1; overflow: auto; min-height: 0; }

/* ---------- Cabecera de base de datos ---------- */
.bd { padding: 26px 40px 40px; }
.bd-h { display: flex; align-items: center; gap: 12px; }
.bd-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--control); color: var(--hueso); }
.bd-ico .i { width: 20px; height: 20px; }
.bd-h h1 { font: 700 32px/1.1 var(--fh); letter-spacing: -.02em; }
.bd-desc { margin: 8px 0 0 48px; color: var(--ceniza); font-size: 14px; max-width: 96ch; }
.bd-desc b { color: var(--hueso); font-weight: 600; }

.vistas { display: flex; align-items: flex-end; gap: 2px; margin-top: 22px; border-bottom: 1px solid var(--linea-s); }
.vt { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px; color: var(--tenue); font-size: 13.5px; font-weight: 500; border-radius: var(--r) var(--r) 0 0; position: relative; }
.vt:hover { color: var(--hueso); background: var(--hover); }
.vt.on { color: var(--hueso); }
.vt.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--hueso); border-radius: 2px; }
.vistas .acc { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-bottom: 5px; }
.btn-t { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--r); color: var(--ceniza); font-size: 13px; font-weight: 500; }
.btn-t:hover { background: var(--hover-2); color: var(--hueso); }
.nueva { display: flex; align-items: stretch; height: 28px; margin-left: 8px; border-radius: var(--r); background: var(--lima); color: var(--grafito); font-weight: 600; font-size: 13px; overflow: hidden; }
.nueva span { display: flex; align-items: center; gap: 5px; padding: 0 10px 0 9px; }
.nueva em { display: grid; place-items: center; width: 24px; border-left: 1px solid rgba(28, 35, 33, .25); font-style: normal; }
.nueva:hover { background: var(--lima-h); }
.nueva .i { stroke-width: 2; }

.filtros { display: flex; align-items: center; gap: 6px; padding: 10px 0; flex-wrap: wrap; }
.fc { display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid var(--linea); color: var(--ceniza); font-size: 12.5px; }
.fc b { color: var(--hueso); font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.fc:hover { background: var(--hover); border-color: var(--tenue); }
.fc.fon { border-color: rgba(166, 192, 221, .45); background: var(--pizarra-bg); color: var(--pizarra-fg); }
.fc.fon b { color: var(--hueso); }
.fc .x { margin-right: -3px; }
.fc-mas { color: var(--tenue); font-size: 12.5px; display: flex; align-items: center; gap: 4px; padding: 0 6px; height: 26px; border-radius: var(--r); }
.fc-mas:hover { color: var(--hueso); background: var(--hover); }
.filtros .sep-v { width: 1px; height: 16px; background: var(--linea); margin: 0 4px; }

/* ---------- Chips de propiedad ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 3px; font-size: 12.5px; font-weight: 500; white-space: nowrap; line-height: 1; background: var(--c-bg); color: var(--c-fg); }
.chip .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--c-pt); flex: none; }
.chip.estado { border-radius: 11px; padding: 0 9px 0 8px; }
.chip.tachado { text-decoration: line-through; color: var(--tenue); }
.c-gris { --c-bg: var(--gris-bg); --c-fg: var(--gris-fg); --c-pt: var(--gris-pt); }
.c-musgo { --c-bg: var(--musgo-bg); --c-fg: var(--musgo-fg); --c-pt: var(--musgo-pt); }
.c-salvia { --c-bg: var(--salvia-bg); --c-fg: var(--salvia-fg); --c-pt: var(--salvia-pt); }
.c-pizarra { --c-bg: var(--pizarra-bg); --c-fg: var(--pizarra-fg); --c-pt: var(--pizarra-pt); }
.c-ciruela { --c-bg: var(--ciruela-bg); --c-fg: var(--ciruela-fg); --c-pt: var(--ciruela-pt); }
.c-ocre { --c-bg: var(--ocre-bg); --c-fg: var(--ocre-fg); --c-pt: var(--ocre-pt); }
.c-arcilla { --c-bg: var(--arcilla-bg); --c-fg: var(--arcilla-fg); --c-pt: var(--arcilla-pt); }

/* Prioridad: tres barras del compás (la marca), llenas según el nivel */
.prio { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ceniza); white-space: nowrap; }
.prio svg { width: 14px; height: 12px; flex: none; }
.prio rect { fill: var(--linea); }
.prio.alta rect { fill: var(--arcilla-fg); }
.prio.media rect:nth-child(-n+2) { fill: var(--ocre-fg); }
.prio.baja rect:first-child { fill: var(--gris-fg); }

.av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; font: 600 10px/1 var(--fb); letter-spacing: .02em; background: var(--c-bg); color: var(--c-fg); flex: none; }
.av.m { width: 24px; height: 24px; font-size: 10.5px; }
.persona { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.sin { color: var(--tenue); font-size: 13px; }
.sin-resp { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px dashed var(--ceniza); border-radius: 3px; color: var(--ceniza); font-size: 12.5px; }
.fecha { font-size: 13px; color: var(--hueso); white-space: nowrap; }
.fecha.vence { color: var(--arcilla-fg); }
.fecha.pronto { color: var(--ocre-fg); }
.clave { font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reu { display: inline-flex; align-items: center; gap: 6px; color: var(--ceniza); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reu span { overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--linea); }
.reu:hover { color: var(--hueso); }

/* ---------- Tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabla th { height: 34px; text-align: left; font-weight: 500; font-size: 12.5px; color: var(--tenue); padding: 0 10px; border-bottom: 1px solid var(--linea-s); white-space: nowrap; }
.tabla th .h { display: flex; align-items: center; gap: 6px; }
.tabla th .i { width: 14px; height: 14px; }
.tabla td { height: 38px; padding: 0 10px; border-bottom: 1px solid var(--linea-s); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabla th + th, .tabla td + td { border-left: 1px solid var(--linea-s); }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla tr.sel td { background: var(--hover-2); }
.nom { display: flex; align-items: center; gap: 8px; min-width: 0; position: relative; }
.nom .i { color: var(--tenue); }
.nom .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.nom .t.tachado { text-decoration: line-through; color: var(--tenue); }
.abrir { position: absolute; right: 0; display: none; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 3px; background: var(--control); border: 1px solid var(--linea); font-size: 11.5px; font-weight: 600; color: var(--ceniza); letter-spacing: .03em; }
.abrir:hover { color: var(--hueso); background: var(--control-h); }
tr:hover .abrir, .tarj:hover .abrir { display: flex; }
.fila-nueva td { color: var(--tenue); cursor: pointer; }
.fila-nueva td:hover { color: var(--hueso); }
.pie-t { display: flex; justify-content: flex-end; gap: 22px; padding: 8px 10px; font-size: 12px; color: var(--tenue); }
.pie-t b { color: var(--ceniza); font-weight: 500; }
.grp-h { display: flex; align-items: center; gap: 8px; padding: 22px 0 8px; }
.grp-h .cnt { font-size: 12.5px; color: var(--tenue); }

/* ---------- Tablero ---------- */
.tablero { display: flex; gap: 12px; align-items: flex-start; padding-top: 12px; }
/* las columnas se reparten el ancho: caben a 1120 px (~174 px) y a 1440 px quedan como la maqueta (262 px) */
.col { flex: 1 1 0; min-width: 160px; max-width: 262px; border-radius: 6px; padding: 8px; background: color-mix(in srgb, var(--c-bg) 42%, transparent); }
.col-h { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; margin-bottom: 6px; }
.col-h .cnt { font-size: 12.5px; color: var(--c-fg); opacity: .75; }
.col-h .ib { margin-left: auto; width: 24px; height: 24px; }
.col-h .ib + .ib { margin-left: 0; }
.tarjs { display: grid; gap: 8px; }
.tarj { position: relative; background: var(--grafito); border: 1px solid var(--linea-s); border-radius: var(--r); padding: 11px 12px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: background .15s var(--ease), border-color .15s var(--ease); }
.tarj:hover { background: #212A27; border-color: var(--linea); }
.tarj .abrir { top: 8px; right: 8px; }
.tarj .clave { display: block; margin-bottom: 4px; font-size: 12px; }
.tarj .t { font-weight: 500; line-height: 1.38; font-size: 14px; padding-right: 8px; }
.tarj .t.tachado { text-decoration: line-through; color: var(--tenue); }
.tarj .props { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.tarj .meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea-s); }
.tarj .meta .persona { font-size: 12.5px; color: var(--ceniza); }
.tarj .meta .fecha { font-size: 12.5px; margin-left: auto; display: flex; align-items: center; gap: 5px; }
.col-nueva { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; margin-top: 4px; color: var(--tenue); font-size: 13px; width: 100%; border-radius: var(--r); }
.col-nueva:hover { background: var(--hover); color: var(--hueso); }
.col.oculta { flex: none; min-width: 0; width: 44px; padding: 8px 4px; background: transparent; border: 1px dashed var(--linea-s); }

/* ---------- Calendario ---------- */
.cal-bar { display: flex; align-items: center; gap: 8px; padding: 12px 0 10px; }
.cal-bar h2 { font: 600 18px/1 var(--fh); letter-spacing: -.01em; }
.cal-bar h2 span { color: var(--tenue); font-weight: 500; }
.cal-bar .der { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.btn-s { height: 28px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--linea); font-size: 13px; font-weight: 500; color: var(--hueso); }
.btn-s:hover { background: var(--hover-2); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--linea-s); border-left: 1px solid var(--linea-s); }
.cal .dsem { height: 30px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: var(--tenue); border-right: 1px solid var(--linea-s); border-bottom: 1px solid var(--linea-s); }
.dia { min-height: 118px; padding: 6px 6px 8px; border-right: 1px solid var(--linea-s); border-bottom: 1px solid var(--linea-s); display: flex; flex-direction: column; gap: 4px; }
.dia.finde { background: rgba(0, 0, 0, .16); }
.dia.fuera .dn { color: var(--linea); }
.dn { align-self: flex-end; font-size: 12.5px; color: var(--ceniza); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.dia.hoy .dn { background: var(--lima); color: var(--grafito); font-weight: 600; }
.ev { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 7px; border-radius: 3px; background: var(--grafito); border: 1px solid var(--linea-s); font-size: 12.5px; font-weight: 500; cursor: pointer; overflow: hidden; white-space: nowrap; }
.ev:hover { background: var(--control); border-color: var(--linea); }
.ev .pt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c-pt); }
.ev span { overflow: hidden; text-overflow: ellipsis; }
.ev.hecha span { color: var(--tenue); text-decoration: line-through; }
.ev .av { width: 16px; height: 16px; font-size: 8.5px; margin-left: auto; }
.mas-ev { font-size: 12px; color: var(--tenue); padding: 0 7px; }

/* ---------- Lista ---------- */
.lista { padding-top: 4px; }
.lf { display: grid; grid-template-columns: 20px 52px 1fr auto auto 76px; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: var(--r); cursor: pointer; }
.lf + .lf { box-shadow: 0 -1px 0 var(--linea-s); }
.lf:hover { background: var(--hover); box-shadow: none; }
.lf:hover + .lf { box-shadow: none; }
.lf .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf .t small { color: var(--tenue); font-weight: 400; font-size: 12.5px; margin-left: 8px; }
.lf .fecha { text-align: right; font-size: 12.5px; }
.est-ic { width: 16px; height: 16px; }
.lista .grp-h { padding: 18px 10px 6px; }

/* ---------- Cronología ---------- */
.crono { display: grid; grid-template-columns: 300px 1fr; margin-top: 12px; border-top: 1px solid var(--linea-s); }
.crono-izq { border-right: 1px solid var(--linea-s); }
.crono-izq .h, .crono-der .h { height: 52px; border-bottom: 1px solid var(--linea-s); }
.crono-izq .h { display: flex; align-items: flex-end; padding: 0 10px 8px; font-size: 12.5px; color: var(--tenue); }
.cr-f { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-bottom: 1px solid var(--linea-s); cursor: pointer; font-size: 13.5px; }
.cr-f:hover { background: var(--hover); }
.cr-f .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.crono-der { position: relative; overflow: hidden; }
.cr-grid { display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); }
.cr-sem { display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); height: 26px; }
.cr-sem div { grid-column: span 7; display: flex; align-items: center; padding: 0 8px; font-size: 12px; color: var(--ceniza); font-weight: 500; border-left: 1px solid var(--linea-s); }
.cr-sem div span { color: var(--tenue); font-weight: 400; margin-left: 6px; white-space: nowrap; }
.cr-sem div { white-space: nowrap; overflow: hidden; }
.cr-dias { display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); height: 26px; border-bottom: 1px solid var(--linea-s); }
.cr-dias div { display: grid; place-items: center; font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.cr-dias div.hoy { color: var(--grafito); }
.cr-dias div.hoy span { background: var(--lima); border-radius: 3px; padding: 2px 3px; font-weight: 600; }
.cr-cuerpo { position: relative; }
.cr-fondo { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); pointer-events: none; }
.cr-fondo div.finde { background: rgba(0, 0, 0, .18); }
.cr-fondo div.lun { box-shadow: inset 1px 0 0 var(--linea-s); }
.cr-hoy { position: absolute; top: -26px; bottom: 0; width: 1px; background: var(--lima); pointer-events: none; z-index: 2; }
.cr-fila { position: relative; height: 40px; display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--linea-s); }
.barra { height: 26px; border-radius: var(--r); background: var(--c-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-pt) 55%, transparent); color: var(--c-fg); display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 12.5px; font-weight: 500; overflow: hidden; white-space: nowrap; cursor: pointer; z-index: 1; position: relative; }
.barra:hover { box-shadow: inset 0 0 0 1px var(--c-pt); }
.barra .av { width: 16px; height: 16px; font-size: 8.5px; background: rgba(0,0,0,.25); color: var(--c-fg); }
.barra span { overflow: hidden; text-overflow: ellipsis; }
.barra.corta { overflow: visible; padding: 0 4px; }
.barra.corta .av { display: none; }
.barra.corta span { position: absolute; left: calc(100% + 8px); color: var(--ceniza); font-weight: 500; overflow: visible; }

/* ---------- Peek ---------- */
.peek { position: absolute; top: 0; right: 0; bottom: 0; width: 640px; background: var(--grafito); border-left: 1px solid var(--linea); box-shadow: -24px 0 48px -12px rgba(0, 0, 0, .55), -2px 0 6px rgba(0, 0, 0, .25); z-index: 20; display: flex; flex-direction: column; animation: entra .22s var(--ease); }
@keyframes entra { from { transform: translateX(24px); opacity: 0; } }
.peek-top { height: 44px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--linea-s); }
.peek-top .clave { margin-left: 8px; }
.peek-top .der { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.peek-cuerpo { flex: 1; overflow-y: auto; padding: 36px 56px 64px; }

/* ---------- Página (tarea, documento, acta) ---------- */
.pag { max-width: 820px; margin: 0 auto; padding: 48px 56px 96px; }
.pag.ancha { max-width: 980px; padding-bottom: 200px; }
.pag-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 6px; background: var(--control); color: var(--hueso); margin-bottom: 18px; }
.pag-ico .i { width: 30px; height: 30px; stroke-width: 1.3; }
.peek .pag-ico { width: 44px; height: 44px; margin-bottom: 14px; }
.peek .pag-ico .i { width: 24px; height: 24px; }
.pag h1 { font: 700 38px/1.12 var(--fh); letter-spacing: -.022em; text-wrap: balance; }
.peek h1 { font: 700 28px/1.18 var(--fh); letter-spacing: -.018em; text-wrap: balance; }
.pag-meta { margin-top: 10px; font-size: 13px; color: var(--tenue); display: flex; gap: 6px; align-items: center; }
.pag-meta .pt3 { width: 3px; height: 3px; border-radius: 50%; background: var(--linea); }

.props { margin-top: 22px; display: grid; gap: 1px; }
.prop { display: grid; grid-template-columns: 156px 1fr; align-items: center; min-height: 34px; }
.prop .k { display: flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 13.5px; height: 30px; padding: 0 6px; margin-left: -6px; border-radius: var(--r); }
.prop .v { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px; border-radius: var(--r); font-size: 13.5px; flex-wrap: wrap; }
.prop .v:hover { background: var(--hover); }
.prop .v .mono { font: 400 12.5px/1.4 var(--fm); color: var(--ceniza); }
.prop .alerta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.prop-mas { display: flex; align-items: center; gap: 8px; height: 30px; color: var(--tenue); font-size: 13.5px; padding: 0 6px; margin-left: -6px; border-radius: var(--r); width: max-content; }
.prop-mas:hover { background: var(--hover); color: var(--ceniza); }

.regla { height: 1px; background: var(--linea-s); margin: 22px 0 26px; border: 0; }

/* Bloques del editor */
.blq { position: relative; }
.blq-asa { position: absolute; left: -46px; top: 3px; display: flex; gap: 0; opacity: 0; color: var(--tenue); }
.blq-asa span { width: 22px; height: 24px; display: grid; place-items: center; border-radius: 3px; }
.blq-asa span:hover { background: var(--hover-2); color: var(--hueso); }
.blq:hover > .blq-asa { opacity: 1; }
.ed-cuerpo { font-size: 15px; line-height: 1.62; color: var(--hueso); }
.ed-cuerpo p { margin: 2px 0 8px; max-width: 68ch; }
.ed-cuerpo p.tenue { color: var(--ceniza); }
.ed-cuerpo h2 { font: 650 22px/1.3 var(--fh); letter-spacing: -.012em; margin: 30px 0 8px; }
.ed-cuerpo h3 { font: 600 17px/1.35 var(--fh); letter-spacing: -.01em; margin: 22px 0 6px; }
.ed-cuerpo ul, .ed-cuerpo ol { padding-left: 24px; margin: 2px 0 10px; }
.ed-cuerpo li { padding: 2px 0 2px 4px; }
.ed-cuerpo ul li::marker { color: var(--ceniza); }
.ed-cuerpo ol li::marker { color: var(--tenue); font-variant-numeric: tabular-nums; }
.ed-cuerpo b { font-weight: 600; }
.casilla { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; }
.casilla .cb { width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--ceniza); border-radius: 3px; flex: none; display: grid; place-items: center; cursor: pointer; }
.casilla.ok .cb { background: var(--ceniza); border-color: var(--ceniza); }
.casilla.ok .cb .i { color: var(--grafito); stroke-width: 2.4; width: 12px; height: 12px; }
.casilla.ok .tx { color: var(--tenue); text-decoration: line-through; text-decoration-color: var(--linea); }
.cita { padding: 2px 0 2px 16px; margin: 10px 0 12px; box-shadow: inset 2px 0 0 var(--hueso); color: var(--hueso); font-size: 15.5px; max-width: 64ch; }
.cita small { display: block; margin-top: 4px; font-size: 13px; color: var(--tenue); }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--c-bg, var(--control)); margin: 12px 0 14px; }
.callout > .i { margin-top: 4px; color: var(--c-fg, var(--ceniza)); }
.callout div { font-size: 14.5px; line-height: 1.58; }
.callout.c-ocre div, .callout.c-salvia div { color: var(--hueso); }
.toggle { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-weight: 500; }
.toggle .i { color: var(--tenue); width: 14px; height: 14px; }
.subpag { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 6px; margin-left: -6px; border-radius: var(--r); cursor: pointer; width: max-content; max-width: 100%; }
.subpag:hover { background: var(--hover); }
.subpag .i { color: var(--ceniza); }
.subpag span { font-weight: 500; border-bottom: 1px solid var(--linea); }
.subpag small { color: var(--tenue); font-size: 12.5px; }
.mencion { display: inline; padding: 1px 5px 1px 3px; border-radius: 3px; cursor: pointer; color: var(--hueso); font-weight: 500; }
.mencion:hover { background: var(--hover-2); }
.mencion .i { color: var(--ceniza); width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.mencion span { border-bottom: 1px solid var(--tenue); }

.sec-t { display: flex; align-items: center; gap: 10px; margin: 36px 0 10px; }
.sec-t h2 { font: 650 18px/1.3 var(--fh); letter-spacing: -.01em; margin: 0; }
.sec-t .cnt { color: var(--tenue); font-size: 13px; }
.sec-t .der { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Actividad */
.act { display: grid; gap: 0; }
.act-f { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; font-size: 13.5px; color: var(--ceniza); }
.act-f + .act-f { border-top: 1px solid var(--linea-s); }
.act-f b { color: var(--hueso); font-weight: 600; }
.act-f time { font-size: 12px; color: var(--tenue); padding-top: 2px; }
.act-f .chip { height: 20px; font-size: 12px; vertical-align: 1px; }
.act-f .flecha { color: var(--tenue); margin: 0 4px; }
.act-f.coment .burbuja { margin-top: 6px; color: var(--hueso); font-size: 14px; }
.comentar { display: flex; align-items: center; gap: 10px; margin-top: 10px; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--linea); color: var(--tenue); font-size: 13.5px; }
.comentar .kb { margin-left: auto; }

/* Base incrustada (vista enlazada) */
.bd-inc { margin: 16px 0 20px; }
.bd-inc-h { display: flex; align-items: center; gap: 8px; }
.bd-inc-h .t { font: 600 16px/1.2 var(--fh); display: flex; align-items: center; gap: 6px; }
.bd-inc-h .t .i { color: var(--tenue); }
.bd-inc .vistas { margin-top: 8px; }
.bd-inc .vt { height: 30px; font-size: 13px; }
.bd-inc .tabla td { height: 36px; }

/* Acta: borrador */
.borr { margin: 14px -20px 0; border: 1px solid var(--linea); border-radius: 6px; background: var(--grafito); }
.borr-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--linea-s); }
.borr-h h2 { font: 650 17px/1.2 var(--fh); letter-spacing: -.01em; }
.borr-h .chip { height: 20px; font-size: 11.5px; }
.borr-h .der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-p { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r); background: var(--lima); color: var(--grafito); font-weight: 600; font-size: 13.5px; }
.btn-p:hover { background: var(--lima-h); }
.btn-p kbd { font: 500 10.5px/1 var(--fb); padding: 3px 4px 2px; border-radius: 3px; border: 1px solid rgba(28, 35, 33, .35); }
.btn-p .i { stroke-width: 2; }
.btn-2 { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--control); font-size: 13.5px; font-weight: 500; }
.btn-2:hover { background: var(--control-h); }
.bf { display: grid; grid-template-columns: 22px 1fr 128px 104px 96px 28px; align-items: center; gap: 12px; padding: 0 16px 0 20px; min-height: 46px; }
.bf + .bf, .bf + .parecida + .bf { border-top: 1px solid var(--linea-s); }
.bf.hdr { min-height: 32px; font-size: 12px; color: var(--tenue); }
.bf.hdr + .bf { border-top: 0; }
.bf .t { font-weight: 500; padding: 4px 6px; margin-left: -6px; border-radius: var(--r); border: 1px solid transparent; }
.bf .t:hover { border-color: var(--linea); background: var(--carbon); }
.bf .t.edit { border-color: var(--ceniza); background: var(--carbon); }
.bf .cel { display: flex; align-items: center; padding: 4px 6px; margin-left: -6px; border-radius: var(--r); min-height: 30px; }
.bf .cel:hover { background: var(--hover-2); }
.bf .quitar { color: var(--tenue); }
.bf .marca { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--ceniza); }
.parecida { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px 54px; margin-top: -6px; font-size: 12.5px; color: var(--ceniza); }
.parecida .i { color: var(--ocre-fg); }
.parecida b { color: var(--hueso); font-weight: 500; }
.parecida a { color: var(--hueso); font-weight: 600; border-bottom: 1px solid var(--tenue); cursor: pointer; margin-left: 4px; }
.borr-pie { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px 20px; border-top: 1px solid var(--linea-s); font-size: 12.5px; color: var(--tenue); }
.borr-pie .an { display: flex; align-items: center; gap: 6px; color: var(--ceniza); font-size: 13px; padding: 4px 6px; margin-left: -6px; border-radius: var(--r); }
.borr-pie .an:hover { background: var(--hover-2); color: var(--hueso); }
.borr-pie .der { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.borr-pie .i { width: 14px; height: 14px; }
.cambiada { font-size: 11.5px; color: var(--ceniza); display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.cambiada::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hueso); }
.dec { counter-reset: d; list-style: none; padding: 0 !important; }
.dec li { counter-increment: d; display: grid; grid-template-columns: 28px 1fr; padding: 9px 0 !important; border-top: 1px solid var(--linea-s); }
.dec li:first-child { border-top: 0; }
.dec li::before { content: counter(d); color: var(--tenue); font-variant-numeric: tabular-nums; font-size: 14px; }
.asis { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 2px; border-radius: 3px; background: var(--control); font-size: 13px; }
.asis .av { width: 20px; height: 20px; }

/* Reuniones */
.estado-acta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.estado-acta.alerta { font-weight: 600; color: var(--hueso); }

/* Buscar */
.velo { position: fixed; inset: 0; background: rgba(8, 10, 9, .55); z-index: 50; display: grid; justify-items: center; align-items: start; padding-top: 110px; }
.buscar { width: 640px; background: var(--grafito); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .7); overflow: hidden; }
.buscar-in { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--linea-s); }
.buscar-in input { flex: 1; outline: 0; font-size: 16px; }
.buscar-in input::placeholder { color: var(--tenue); }
.buscar-l { padding: 8px; max-height: 420px; overflow: auto; }
.buscar-l .grupo-t { padding: 6px 8px 4px; height: auto; }
.res { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r); font-size: 14px; cursor: pointer; }
.res:hover, .res.on { background: var(--control); }
.res .i { color: var(--ceniza); }
.res small { margin-left: auto; color: var(--tenue); font-size: 12px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.borr, .bd-inc { scroll-margin-top: 28px; }

/* =====================================================================================================
   App real: añadidos a la maqueta (mismos tokens, sin colores nuevos)
   ===================================================================================================== */
textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
kbd { font: 500 10.5px/1 var(--fb); color: var(--tenue); letter-spacing: .02em; }
[hidden] { display: none !important; }

/* Shell: el contenedor de la ruta ocupa todo el principal; el peek va encima */
.vista { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.app.plegada { grid-template-columns: 0 1fr; }
.app.plegada .side { overflow: hidden; border-right: 0; }
.reabrir { position: absolute; top: 9px; left: 8px; z-index: 5; }
.app.plegada .top { padding-left: 44px; }

/* Barra lateral: documentos con acción al pasar y destinos de arrastre */
.it .acc-h { margin-left: auto; width: 20px; height: 20px; display: none; place-items: center; border-radius: 3px; color: var(--tenue); flex: none; }
.it:hover .acc-h { display: grid; }
.it .acc-h:hover { background: var(--hover-2); color: var(--hueso); }
.it .ico-txt { width: 16px; text-align: center; font-size: 13px; line-height: 1; flex: none; }
.it.arrastrando { opacity: .45; }
.it.soltar-dentro { background: var(--hover-2); box-shadow: inset 0 0 0 1px var(--linea); }
.it.soltar-antes { box-shadow: inset 0 2px 0 var(--ceniza); }
.it.soltar-despues { box-shadow: inset 0 -2px 0 var(--ceniza); }
.grupo-t.soltar-dentro { color: var(--hueso); box-shadow: inset 0 -2px 0 var(--ceniza); }
.it.vacio-l { color: var(--tenue); font-weight: 400; font-size: 13px; }
.grabar.activa .pt { animation: late 1.6s var(--ease) infinite; }
@keyframes late { 50% { opacity: .55; } }

/* Menú flotante (estado, responsable, vistas, orden...) */
.menu { position: fixed; z-index: 60; min-width: 220px; max-width: 340px; max-height: min(420px, calc(100vh - 24px)); overflow-y: auto; padding: 4px; background: var(--grafito); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3); }
.menu-in { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 4px; padding: 0 8px; border-bottom: 1px solid var(--linea-s); }
.menu-in input { flex: 1; outline: 0; font-size: 13.5px; min-width: 0; }
.menu-in input::placeholder { color: var(--tenue); }
.menu-op { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 0 8px; border-radius: var(--r); font-size: 13.5px; color: var(--hueso); text-align: left; }
.menu-op .i { color: var(--ceniza); }
.menu-op.on, .menu-op:hover { background: var(--control); }
.menu-op .marca-a { margin-left: auto; color: var(--ceniza); }
.menu-op kbd { margin-left: auto; }
.menu-op.peligro { color: var(--arcilla-fg); }
.menu-op.peligro .i { color: var(--arcilla-fg); }
.menu-op[disabled] { color: var(--tenue); cursor: default; background: none; }
.menu-op .txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sep { height: 1px; background: var(--linea-s); margin: 4px 0; }
.menu-t { padding: 6px 8px 4px; font-size: 12px; color: var(--tenue); font-weight: 500; }
.menu-vacio { padding: 8px; font-size: 13px; color: var(--tenue); }

/* Aviso (toast) */
.avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.aviso-t { display: flex; align-items: center; gap: 10px; min-height: 40px; max-width: 560px; padding: 8px 14px; background: var(--control); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .7); font-size: 13.5px; color: var(--hueso); pointer-events: auto; animation: sube .22s var(--ease); }
.aviso-t.error { background: var(--arcilla-bg); border-color: color-mix(in srgb, var(--arcilla-pt) 55%, transparent); }
.aviso-t.error .i { color: var(--arcilla-fg); }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } }

/* Pestañas de vistas: renombrar en línea */
.vt input { width: 120px; outline: 0; border-bottom: 1px solid var(--ceniza); font-size: 13.5px; font-weight: 500; }
.nueva span:hover, .nueva em:hover { background: var(--lima-h); }

/* Edición en línea en las tablas */
.tabla td.ed { cursor: pointer; }
.tabla td.ed:hover { box-shadow: inset 0 0 0 1px var(--linea); }
.tabla td.editando { box-shadow: inset 0 0 0 1px var(--ceniza); background: var(--carbon) !important; }
.nom .t[contenteditable] { outline: 0; text-overflow: clip; cursor: text; }
.celda-fecha { width: 100%; height: 28px; outline: 0; color-scheme: dark; font-size: 13px; }
.tabla tbody tr { cursor: pointer; }
.tabla .nom .t { cursor: text; }
.fila-nueva td:hover { background: var(--hover); }
.pie-t { align-items: center; }
.pie-t .teclas { margin-right: auto; display: flex; align-items: center; gap: 14px; }
.teclas kbd { display: inline-block; min-width: 18px; padding: 3px 5px 2px; border: 1px solid var(--linea); border-radius: 3px; text-align: center; color: var(--ceniza); margin-right: 5px; }

/* Arrastre: tablero y calendario */
.tarj[draggable="true"] { cursor: grab; }
.tarj.arrastrando, .ev.arrastrando { opacity: .4; }
.col.sobre { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-pt) 60%, transparent); }
.col.oculta { cursor: pointer; }
.col.oculta:hover { border-color: var(--linea); }
.dia { position: relative; }
.dia.sobre { background: var(--hover-2); }
.dia-mas { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; display: none; place-items: center; border-radius: var(--r); color: var(--tenue); }
.dia:hover .dia-mas { display: grid; }
.dia-mas:hover { background: var(--hover-2); color: var(--hueso); }
.mas-ev { cursor: pointer; }
.mas-ev:hover { color: var(--hueso); }
.cal-bar .sin-f { font-size: 12.5px; color: var(--tenue); margin-left: 10px; }

/* Cronología: barras posicionadas por día, asas para cambiar inicio y fecha */
.cr-fila { display: block; }
.cr-fila .barra { position: absolute; top: 7px; }
.barra { touch-action: none; user-select: none; }
.barra .asa { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
.barra .asa.i { left: 0; }
.barra .asa.d { right: 0; }
.barra .asa:hover { background: color-mix(in srgb, var(--c-pt) 35%, transparent); }
.barra.moviendo { box-shadow: inset 0 0 0 1px var(--c-fg); cursor: grabbing; }
.crono-izq .h { justify-content: space-between; gap: 6px; }
.cr-nav { display: flex; align-items: center; gap: 2px; }
.cr-nav .btn-s { height: 24px; padding: 0 8px; font-size: 12.5px; }
.cr-nav .ib { width: 24px; height: 24px; }
.cr-vacio { padding: 18px 10px; color: var(--tenue); font-size: 13px; }

/* Lista: icono de estado como botón */
.lf .est-b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; }
.lf .est-b:hover { background: var(--hover-2); }
.lf.sel { background: var(--hover-2); }
.cr-f.sel, .tarj.sel { background: var(--hover-2); }

/* Peek y página de tarea: propiedades editables */
.ib.fav { color: var(--ocre-fg); }
.ib.fav .i { fill: currentColor; }
h1.tit { outline: 0; cursor: text; }
h1.tit:empty::before { content: "Sin título"; color: var(--tenue); }
.prop .v { cursor: pointer; }
.prop .v.fija { cursor: default; }
.prop .v.fija:hover { background: none; }
.prop .v input[type="date"] { height: 28px; outline: 0; color-scheme: dark; font-size: 13.5px; border-bottom: 1px solid var(--ceniza); }
.cuerpo-txt { width: 100%; min-height: 180px; resize: vertical; background: transparent; border: 0; outline: 0; font: 400 15px/1.62 var(--fb); color: var(--hueso); }
.cuerpo-txt::placeholder { color: var(--tenue); }
.act-f .av .i { width: 13px; height: 13px; }
.act-vacia { font-size: 13px; color: var(--tenue); padding: 6px 0; }
.peek-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12px; color: var(--tenue); }
.peek-nav kbd { padding: 2px 4px; border: 1px solid var(--linea); border-radius: 3px; }
.pag-cargando { color: var(--tenue); font-size: 13.5px; padding: 8px 0; }

/* Estados vacíos y de carga dentro de una base */
.bd-vacio { padding: 40px 0 32px; max-width: 56ch; }
.bd-vacio h2 { font: 600 18px/1.3 var(--fh); letter-spacing: -.01em; }
.bd-vacio p { margin-top: 6px; color: var(--ceniza); font-size: 14px; }
.bd-cargando { padding: 24px 10px; color: var(--tenue); font-size: 13.5px; }
.bd-inc .bd-inc-h .t { cursor: pointer; }
.bd-inc .bd-inc-h .t:hover { color: var(--hueso); }

/* Paleta Ctrl K */
.res .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscar-pie { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--linea-s); font-size: 12px; color: var(--tenue); }
.buscar-pie kbd { padding: 2px 4px; border: 1px solid var(--linea); border-radius: 3px; margin-right: 4px; }

/* Página sin contenido (ruta desconocida o módulo aún no cargado) */
.nada { max-width: 56ch; margin: 18vh auto 0; padding: 0 40px; }
.nada h1 { font: 700 28px/1.2 var(--fh); letter-spacing: -.018em; }
.nada p { margin-top: 8px; color: var(--ceniza); }
.nada .btn-2 { margin-top: 18px; display: inline-flex; }

/* Ajustes: personas */
.aj-desc { color: var(--ceniza); font-size: 14px; max-width: 72ch; margin: 8px 0 0; }
.aj-cuenta { margin: 8px 0 28px; display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }
.aj-login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aj-login input { height: 34px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--carbon); min-width: 220px; flex: 1 1 220px; }
.aj-login input:focus { border-color: var(--ceniza); outline: 0; }
.aj-quien { margin: 0; font-size: 14px; color: var(--ceniza); }
.aj-quien b { color: var(--hueso); font-weight: 600; }
.aj-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.aj-f { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 170px; align-items: center; gap: 12px; min-height: 46px; padding: 0 6px; }
.aj-f + .aj-f { border-top: 1px solid var(--linea-s); }
.aj-f.hdr { min-height: 32px; font-size: 12px; color: var(--tenue); }
.aj-f input { height: 30px; padding: 0 6px; margin-left: -6px; border-radius: var(--r); border: 1px solid transparent; font-weight: 500; outline: 0; width: 100%; }
.aj-f input:hover { border-color: var(--linea); }
.aj-f input:focus { border-color: var(--ceniza); background: var(--carbon); }
.aj-f .n { font-size: 13px; color: var(--ceniza); }
.aj-f .btn-t { justify-self: end; }
.confirmar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; padding: 12px 14px; background: var(--control); border: 1px solid var(--linea); border-radius: 6px; font-size: 13.5px; }
.confirmar b { font-weight: 600; }
.confirmar .der { margin-left: auto; display: flex; gap: 8px; }
.confirmar .btn-2 { height: 30px; }
.btn-2.peligro { border-color: color-mix(in srgb, var(--arcilla-pt) 55%, transparent); background: var(--arcilla-bg); color: var(--arcilla-fg); }
.lf.lf-r { grid-template-columns: 20px minmax(0, 1fr) auto 120px 170px; }
.lf.lf-r .i { color: var(--tenue); }
.bd-cab .vistas .vt-n { white-space: nowrap; }