/* ManuelOS — el escritorio.
 *
 * Inspirado en CasaOS: riel de apps, rejilla de tarjetas, esquinas redondas,
 * mucho aire. PERO sin una sola gota de `backdrop-filter`.
 *
 * Eso último no es preferencia estética: esta máquina tiene una UHD 620, y el
 * blur a pantalla completa ya la puso de rodillas antes. La profundidad se
 * consigue apilando colores sólidos (fondo → superficie → superficie alta) y
 * bordes de 1px, que es gratis y se ve igual de limpio.
 *
 * Las transiciones son solo de `transform`, `opacity`, `background` y `border`:
 * las tres primeras las resuelve la GPU sin repintar el documento.
 */

:root {
  /* La paleta viene del panel de Telegram, para que sea el mismo producto */
  --fondo: #141c25;
  --superficie: #1b2733;
  --superficie-alta: #223141;
  --linea: #2b3b4b;
  --linea-suave: #223040;
  --txt: #e9edf1;
  --suave: #8a9aa9;
  --tenue: #5d6f7f;

  --azul: #7aa7f2;
  --verde: #6fcf97;
  --rojo: #f2777a;
  --ambar: #f2c57a;
  --violeta: #b79df2;
  --gris: #8a9aa9;

  --radio: 16px;
  --radio-chico: 10px;
  --riel: 60px;
  --barra: 52px;

  --sombra: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 16px rgba(0, 0, 0, .22);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #eef1f5;
    --superficie: #ffffff;
    --superficie-alta: #f7f9fb;
    --linea: #dde3ea;
    --linea-suave: #e6ebf1;
    --txt: #1a2632;
    --suave: #64757f;
    --tenue: #97a5b0;

    --azul: #2f6fd0;
    --verde: #1f9d57;
    --rojo: #d6454a;
    --ambar: #c98a12;
    --violeta: #7d55d6;
    --gris: #64757f;

    --sombra: 0 1px 2px rgba(16, 30, 45, .06), 0 6px 16px rgba(16, 30, 45, .07);
    --sombra-alta: 0 2px 4px rgba(16, 30, 45, .08), 0 12px 28px rgba(16, 30, 45, .12);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--txt);
  font: 14.5px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  height: 100vh;
  overflow: hidden;             /* el escritorio no scrollea; sus paneles sí */
  display: grid;
  grid-template-columns: var(--riel) 1fr;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ─────────────────────────────── El riel ─────────────────────────────── */

/* `min-height: 0` en TODA la cadena hasta el que scrollea, y no es opcional:
 * un ítem de grid trae `min-height: auto`, o sea que crece con su contenido en
 * vez de recortarlo. Sin esto, `overflow: auto` no scrollea nada — el hijo
 * simplemente se estira, y con el `overflow: hidden` del body todo lo que pase
 * del alto de la ventana queda INALCANZABLE. */
#riel {
  background: var(--superficie);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
#riel::-webkit-scrollbar { display: none; }

.riel-btn {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 19px;
  transition: background .12s, transform .12s, border-color .12s;
  position: relative;
}
.riel-btn:hover { background: var(--superficie-alta); transform: translateY(-1px); }
.riel-btn[aria-current="true"] {
  background: var(--superficie-alta);
  border-color: var(--linea);
}
/* la marca del activo: una barrita a la izquierda, como CasaOS */
.riel-btn[aria-current="true"]::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--azul);
}
.riel-sep { width: 26px; height: 1px; background: var(--linea); margin: 6px 0; }

/* ──────────────────────────── Marco derecho ──────────────────────────── */

#marco {
  display: grid;
  grid-template-rows: var(--barra) 1fr;
  min-width: 0;
  min-height: 0;        /* ver la nota de arriba: sin esto no scrollea nada */
}

#barra {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
  min-width: 0;
}
#titulo { font-weight: 650; font-size: 15px; white-space: nowrap; }
#migaja { color: var(--suave); font-size: 13px; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }

#buscar {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 5px 13px;
  min-width: 150px;
  transition: border-color .12s;
}
#buscar:focus-within { border-color: var(--azul); }
#buscar input {
  background: none; border: 0; outline: 0; color: inherit;
  font: inherit; width: 100%; min-width: 0;
}
#buscar input::placeholder { color: var(--tenue); }
#reloj { color: var(--suave); font-size: 13px; font-variant-numeric: tabular-nums;
         white-space: nowrap; }

#lienzo {
  overflow: auto;
  padding: 22px;
  min-width: 0;
  min-height: 0;        /* el que de verdad scrollea */
  /* que el scroll del lienzo no arrastre el de la lista de adentro */
  overscroll-behavior: contain;
}

/* ───────────────────────────── Inicio: apps ───────────────────────────── */

.seccion-titulo {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--suave); font-weight: 650; margin: 0 0 14px;
}

/* La rejilla de apps es un springboard de iPhone: ícono grande y redondo,
 * nombre debajo, todo centrado y con aire. La tarjeta desaparece — lo que se
 * toca es el ícono, no una caja. */
#apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 6px;
  margin: 0 0 28px;
}

.app {
  background: none; border: 0;
  border-radius: var(--radio);
  padding: 14px 8px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: background .13s;
}
.app:hover { background: var(--superficie); }
.app:hover .app-icono { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.app:active .app-icono { transform: translateY(-1px) scale(.97); }

.app-icono {
  width: 62px; height: 62px;
  /* 30% es el redondeo del squircle de iOS; sin SVG es lo más cerca que se
   * llega, y a este tamaño el ojo no distingue la diferencia. */
  border-radius: 30%;
  display: grid; place-items: center; font-size: 30px;
  box-shadow: var(--sombra);
  transition: transform .14s, box-shadow .14s;
  /* el tinte lo pone cada app con --tinte; el degradado da el volumen que en
   * iOS hace el ícono, sin costar nada de GPU */
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--tinte) 34%, var(--superficie)),
      color-mix(in srgb, var(--tinte) 16%, var(--superficie)));
  border: 1px solid color-mix(in srgb, var(--tinte) 26%, transparent);
}

.app-nombre { font-weight: 570; font-size: 13.5px; line-height: 1.25; }
.app-cifra { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums;
             line-height: 1.3; }
.app-unidad { color: var(--suave); font-size: 11.5px; }
.app-cifra.vacio { color: var(--tenue); font-weight: 500; font-size: 12.5px; }

/* El explorador usa la misma rejilla, más apretada: son 138 carpetas, no 8
 * apps, y a tamaño de springboard no entra ninguna en pantalla. */
#apps.chico, #carpetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 4px;
  margin: 0 0 26px;
}
#apps.chico .app-icono, #carpetas .app-icono {
  width: 46px; height: 46px; font-size: 22px;
}
#apps.chico .app, #carpetas .app { padding: 11px 6px 13px; gap: 8px; }
#apps.chico .app-nombre, #carpetas .app-nombre {
  font-size: 12.5px;
  /* los nombres largos se cortan en dos renglones y no estiran la celda */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}

#filtro-carpetas {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 999px; padding: 7px 15px; margin-bottom: 20px;
  max-width: 340px; transition: border-color .12s;
}
#filtro-carpetas:focus-within { border-color: var(--azul); }
#filtro-carpetas input {
  background: none; border: 0; outline: 0; color: inherit;
  font: inherit; width: 100%; min-width: 0;
}
#filtro-carpetas input::placeholder { color: var(--tenue); }

/* Dónde estoy parado dentro de Registros */
.donde {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 5px 6px 5px 13px; font-size: 13px;
}
.donde strong { font-weight: 600; }
.quitar {
  margin-left: auto; background: none; border: 0; color: var(--suave);
  border-radius: 50%; width: 22px; height: 22px; line-height: 1;
  transition: background .12s, color .12s;
}
.quitar:hover { background: var(--superficie-alta); color: var(--txt); }

.t-azul    { --tinte: var(--azul); }
.t-verde   { --tinte: var(--verde); }
.t-rojo    { --tinte: var(--rojo); }
.t-ambar   { --tinte: var(--ambar); }
.t-violeta { --tinte: var(--violeta); }
.t-gris    { --tinte: var(--gris); }

.c-azul    { color: var(--azul); }
.c-verde   { color: var(--verde); }
.c-rojo    { color: var(--rojo); }
.c-ambar   { color: var(--ambar); }
.c-violeta { color: var(--violeta); }
.c-gris    { color: var(--gris); }

/* ───────────────────── Banco de trabajo: lista + ficha ───────────────────── */

.banco {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 820px) {
  .banco { grid-template-columns: 1fr; }
  .banco > .ficha:not(.abierta) { display: none; }
}

.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  overflow: hidden;
}
.panel-cabeza {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linea);
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
}
.panel-cuerpo { overflow: auto; padding: 8px; flex: 1; min-height: 0; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }

/* Los filtros se acotan a TRES renglones completos y scrollean. El tope está
 * calculado a la altura exacta de las filas: un tope arbitrario cortaba la
 * tercera fila por la mitad y se veía roto. */
.filtros.acotado {
  /* 3 filas de chips (~33px) + 2 huecos (8px) + aire del scroll */
  max-height: 118px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
  padding-bottom: 2px;
}
.filtros.acotado::-webkit-scrollbar { width: 6px; }
.filtros.acotado::-webkit-scrollbar-thumb {
  background: var(--linea); border-radius: 3px;
}
.chip {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 6px 14px; font-size: 13.5px;
  transition: background .12s, border-color .12s;
}
.chip:hover { background: var(--superficie-alta); }
.chip[aria-pressed="true"] { background: var(--azul); border-color: transparent; color: #fff; }
@media (prefers-color-scheme: light) { .chip[aria-pressed="true"] { color: #fff; } }
.chip .n { opacity: .65; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* Chips con tinte de categoría: --c llega puesto desde vistas.js con un color
 * de la paleta, así que sigue solo al modo claro/oscuro. Apagado = tinte
 * suave; encendido = el color pleno. */
.chip.tinte {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 13%, var(--fondo));
}
.chip.tinte:hover { background: color-mix(in srgb, var(--c) 26%, var(--fondo)); }
.chip.tinte[aria-pressed="true"] {
  background: var(--c); border-color: transparent;
  color: #10161d; font-weight: 600;
}
@media (prefers-color-scheme: light) {
  /* en claro la paleta es oscura: el texto del chip encendido va blanco */
  .chip.tinte[aria-pressed="true"] { color: #fff; }
}

/* El tipo en la línea gris de cada registro, con su mismo color: la lista se
 * escanea por categoría sin leer palabra por palabra. */
.reg-tipo { color: var(--c); }

.reg {
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--radio-chico);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .1s;
}
.reg:hover { background: var(--superficie-alta); }
.reg[aria-current="true"] { background: var(--superficie-alta); }
.reg-titulo { font-weight: 550; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.reg-meta { color: var(--suave); font-size: 12px; display: flex; gap: 7px; }
.reg-punto { color: var(--ambar); }

.ficha-cuerpo { padding: 18px 20px; overflow: auto; flex: 1; min-height: 0; }
.ficha h2 { margin: 0 0 3px; font-size: 20px; }
.ficha .sub { color: var(--suave); font-size: 13px; margin-bottom: 18px; }
.bloque { margin-bottom: 20px; }
.bloque > h3 {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 8px; font-weight: 650;
}
.contenido {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio-chico); padding: 12px 14px;
  white-space: pre-wrap; word-break: break-word;
}
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px;
}

/* ─────────────────────── Editar en el sitio ─────────────────────── */

/* Un campo editable no se disfraza de caja de texto: se marca con un subrayado
 * apenas visible que se enciende al pasar por encima. Llenar la ficha de
 * recuadros la convertiría en un formulario, y esto es un documento. */
.ed {
  border-radius: 5px;
  padding: 1px 4px; margin: -1px -4px;
  outline: none;
  box-decoration-break: clone;
  transition: background .12s, box-shadow .12s;
  cursor: text;
}
.ed:hover { background: var(--superficie-alta); }
.ed:focus {
  background: var(--superficie-alta);
  box-shadow: inset 0 0 0 1px var(--azul);
}
.ed.vacio::before {
  content: attr(data-vacio);
  color: var(--tenue); font-style: italic;
}
.ed.guardando { opacity: .55; }
.ed.guardado { box-shadow: inset 0 0 0 1px var(--verde); }

.ficha h2 { display: flex; align-items: baseline; gap: 8px; }
.ficha h2 .emoji { flex: 0 0 auto; }
.ficha h2 .ed.h { flex: 1; min-width: 0; }

.ficha-barra {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ficha-barra .sub { margin: 0; }
.mini-btn {
  margin-left: auto;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
  transition: background .12s, border-color .12s;
}
.mini-btn:hover { background: var(--superficie-alta); }
.mini-btn.primario { background: var(--azul); border-color: transparent; color: #fff; }
.mini-btn.primario:hover { filter: brightness(1.08); }

.tipos-fila { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.chip-ed {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px;
}

.etiqueta.agregar { color: var(--suave); cursor: pointer; }
.etiqueta.agregar:hover { color: var(--txt); border-color: var(--azul); }
.etiqueta.nueva {
  background: var(--fondo); border: 1px solid var(--azul); color: inherit;
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px;
  outline: none; width: 130px;
}
.etiqueta.fija { opacity: .8; }
.quita-etiqueta {
  background: none; border: 0; color: var(--tenue); padding: 0 0 0 5px;
  font-size: 11px; line-height: 1;
}
.quita-etiqueta:hover { color: var(--rojo); }

/* Movimientos editables */
.editable-mov { align-items: flex-start; }
.mov-que { flex: 1; min-width: 0; }
.mov-cuanto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
              justify-content: flex-end; }
select.mini {
  background: var(--fondo); color: inherit;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 2px 7px; font-size: 11.5px;
}

/* ─────────────────── Arrastrar para fusionar ─────────────────── */

.reg[draggable="true"] { cursor: grab; }
.reg.arrastrando { opacity: .4; }
.reg.encima {
  background: var(--superficie-alta);
  box-shadow: inset 0 0 0 2px var(--azul);
}

.confirmar { cursor: default; }
.dialogo {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 22px 24px;
  max-width: 430px; box-shadow: var(--sombra-alta);
}
.dialogo h3 { margin: 0 0 16px; font-size: 16.5px; }
.dialogo p { margin: 0 0 8px; }
.fus-flecha { color: var(--suave); font-size: 12px; text-align: center;
              margin: 10px 0; }
.fus-nota { color: var(--suave); font-size: 12.5px; margin-top: 16px; }
.dialogo .det { color: var(--suave); font-size: 12px; }
.dialogo-botones { display: flex; gap: 9px; justify-content: flex-end;
                   margin-top: 20px; }
.dialogo-botones .mini-btn { margin-left: 0; }

/* El aviso de abajo: lo que no merece frenar el trabajo */
.brindis {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 14px;
  background: var(--superficie-alta); border: 1px solid var(--linea);
  border-radius: 999px; padding: 9px 10px 9px 18px;
  box-shadow: var(--sombra-alta); font-size: 13.5px;
  animation: subir .18s ease-out;
}
.brindis.error { border-color: var(--rojo); color: var(--rojo); }
.brindis button {
  background: var(--azul); border: 0; color: #fff;
  border-radius: 999px; padding: 5px 14px; font-size: 12.5px;
}
@keyframes subir { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ────────────────────────────── Adjuntos ────────────────────────────── */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.arch {
  margin: 0; border-radius: var(--radio-chico); overflow: hidden;
  background: var(--fondo); border: 1px solid var(--linea);
  min-height: 54px;
  display: flex; flex-direction: column; justify-content: center;
}
.arch.img { aspect-ratio: 4 / 3; cursor: zoom-in; }
.arch.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch.img:hover img { opacity: .88; }

/* audio y video ocupan el ancho completo: un reproductor de 150 px no se toca */
.arch.audio, .arch.video { grid-column: 1 / -1; padding: 10px 12px; gap: 7px; }
.arch.audio audio { width: 100%; height: 34px; }
.arch.video video { width: 100%; max-height: 340px; border-radius: 8px; background: #000; }

.arch-espera { color: var(--suave); font-size: 13px; padding: 6px 0; }
.arch-pie { color: var(--suave); font-size: 11.5px; padding: 0 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-pie.error { color: var(--rojo); padding: 10px 12px; }

.arch.doc { grid-column: 1 / -1; border: 0; background: none; }
.arch-abrir {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio-chico); padding: 11px 14px;
  transition: background .12s, border-color .12s;
}
.arch-abrir:hover { background: var(--superficie-alta); border-color: var(--linea-suave); }
.arch-abrir .det { margin-left: auto; color: var(--suave); font-size: 12px; }

/* La lupa: fondo oscuro sólido, NADA de blur — es pantalla completa y ahí es
 * donde el filtro se cobra caro en esta máquina. */
.lupa {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 10, 14, .93);
  display: grid; place-items: center; padding: 26px;
  cursor: zoom-out;
}
.lupa img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radio-chico); box-shadow: var(--sombra-alta);
}
.lupa-x {
  position: absolute; top: 16px; right: 20px;
  background: none; border: 0; color: #e9edf1; font-size: 24px; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%;
  transition: background .12s;
}
.lupa-x:hover { background: rgba(255, 255, 255, .12); }

.mov {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px dashed var(--linea);
}
.mov:first-of-type { border-top: 0; }
.mov .det { color: var(--suave); font-size: 12px; }
.monto { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.gasto { color: var(--rojo); } .ingreso { color: var(--verde); }
.transferencia { color: var(--azul); }

/* ─────────────────────────── Árbol de gastos ─────────────────────────── */

.totales { display: grid; gap: 11px;
           grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
           margin-bottom: 20px; }
.moneda {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.moneda h2 { font-size: 12px; margin: 0 0 9px; color: var(--suave);
             font-weight: 650; letter-spacing: .05em; }
.fila { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.fila + .fila { margin-top: 4px; }
.balance { border-top: 1px solid var(--linea); margin-top: 9px; padding-top: 9px;
           font-weight: 650; }

.rama > h3 {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--suave); margin: 22px 0 8px; font-weight: 650;
}
details { border-bottom: 1px solid var(--linea); }
details > summary {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 10px 4px; cursor: pointer; list-style: none;
  border-radius: var(--radio-chico);
  transition: background .1s;
}
details > summary:hover { background: var(--superficie-alta); }
summary::-webkit-details-marker { display: none; }
summary .n { color: var(--suave); font-size: 12px; }
.hijos { padding-left: 15px; border-left: 2px solid var(--linea); margin-left: 5px; }
.hoja {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 4px; font-size: 13.5px; border-top: 1px dashed var(--linea);
}
.hoja .det { color: var(--suave); font-size: 12px; }

/* ────────────────────────────── Estados ────────────────────────────── */

.aviso { color: var(--suave); padding: 44px 16px; text-align: center; }
.aviso.error { color: var(--rojo); }
.aviso h3 { color: var(--txt); margin: 0 0 6px; font-size: 16px; }
.aviso code {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 6px; padding: 2px 7px; font-size: 13px;
}

/* Esqueleto de carga: late suave, sin mover nada de sitio */
.cargando { animation: latir 1.1s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ───────────────────────────── Plan de cuentas ──────────────────────────── */

.pc-arbol { display: flex; flex-direction: column; gap: 2px; max-width: 860px; }
.pc-nodo  { margin: 0; }
.pc-nodo > .pc-hijos { margin-left: 22px; border-left: 1px solid var(--linea-suave);
                       padding-left: 8px; }
.pc-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radio-chico);
  cursor: pointer; list-style: none; user-select: none;
}
.pc-fila::-webkit-details-marker { display: none; }
.pc-fila::before { content: "▸"; color: var(--tenue); font-size: 11px;
                   transition: transform .12s; }
details[open] > .pc-fila::before { transform: rotate(90deg); }
.pc-nodo.hoja > .pc-fila::before { visibility: hidden; }
.pc-fila:hover { background: var(--superficie); }
.pc-emoji  { font-size: 15px; }
.pc-nombre { font-weight: 570; font-size: 14px; }
.pc-nombre.raiz { text-transform: uppercase; letter-spacing: 1px;
                  font-size: 12.5px; color: var(--suave); }
.pc-meta   { margin-left: auto; font-size: 12.5px; color: var(--suave);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-meta .n { color: var(--tenue); }
.pc-acciones { display: flex; gap: 2px; }
.pc-acciones button {
  background: none; border: 0; border-radius: 7px;
  font-size: 13px; padding: 3px 6px; opacity: .35;
  transition: opacity .12s, background .12s;
}
.pc-fila:hover .pc-acciones button { opacity: 1; }
.pc-acciones button:hover { background: var(--superficie-alta); }
@media (hover: none) { .pc-acciones button { opacity: .8; } }

.pc-campo { padding: 4px 0 6px 40px; }
.pc-campo input {
  background: var(--fondo); border: 1px solid var(--azul);
  border-radius: var(--radio-chico); color: var(--txt);
  font: inherit; font-size: 13.5px; padding: 6px 10px; width: min(320px, 90%);
  outline: none;
}

.pc-banner {
  background: color-mix(in srgb, var(--azul) 16%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--azul) 45%, transparent);
  border-radius: var(--radio-chico);
  padding: 9px 13px; margin-bottom: 10px; font-size: 13.5px;
}
.pc-banner button {
  margin-left: 10px; background: none; border: 1px solid var(--linea);
  border-radius: 999px; color: var(--txt); font-size: 12px; padding: 3px 11px;
}
.pc-arbol.eligiendo .pc-nombre:not(.raiz),
.pc-arbol.eligiendo .pc-nombre.raiz { outline: 1px dashed var(--azul);
  outline-offset: 3px; border-radius: 4px; }
.pc-pie { font-size: 12px; }

/* ─────────────── Secciones nuevas: lo común ─────────────── */

/* Las pantallas de lista (pendientes, biblioteca, préstamos) no ganan nada
 * ocupando un monitor entero: a todo lo ancho, el ojo pierde la fila. */
.angosto { max-width: 720px; }

/* ────────────────────────────── Pendientes ────────────────────────────── */

#pen-nuevo {
  display: flex; gap: 8px; margin-bottom: 16px;
}
#pen-nuevo input {
  flex: 1; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 999px; padding: 8px 16px;
  color: inherit; font: inherit; outline: none;
  transition: border-color .12s;
}
#pen-nuevo input:focus { border-color: var(--azul); }
#pen-nuevo input::placeholder { color: var(--tenue); }
#pen-nuevo .mini-btn { margin-left: 0; }

.pen-fila {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radio-chico);
  transition: background .1s;
}
.pen-fila:hover { background: var(--superficie); }
.pen-texto { flex: 1; min-width: 0; word-break: break-word; }
.pen-fecha { color: var(--tenue); font-size: 12px; white-space: nowrap; }
.pen-fila.hecha .pen-texto { color: var(--suave); text-decoration: line-through; }

/* El check es un círculo vacío que se llena: el gesto de una lista de papel. */
.pen-check {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 2px solid var(--tenue); border-radius: 50%;
  background: none; padding: 0;
  transition: border-color .12s, background .12s;
}
.pen-check:hover { border-color: var(--verde); }
.pen-check.llena { border-color: var(--verde); background: var(--verde); }
.pen-check.llena:hover { background: none; }   /* reabrir: se vacía al pasar */

.pen-resueltos { margin-top: 20px; border-bottom: 0; }
.pen-resueltos > summary {
  color: var(--suave); font-size: 13px; padding: 8px 10px;
}

/* ────────────────────────────── Biblioteca ────────────────────────────── */

.lib-estante { margin-bottom: 26px; }
.lib-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: var(--radio-chico);
  transition: background .1s;
}
.lib-fila:hover { background: var(--superficie); }
.lib-titulo {
  background: none; border: 0; padding: 0;
  text-align: left; font-weight: 550;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .12s;
}
.lib-titulo:hover { color: var(--azul); }
/* el resto del comportamiento (hover, foco, vacío, guardado) lo trae .ed */
.lib-autor {
  color: var(--suave); font-size: 13px;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* ────────────────────────────── Préstamos ────────────────────────────── */

.pre-lado { margin-bottom: 30px; }
.pre-total {
  font-size: 17px; font-weight: 650; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.pre-limpio { color: var(--suave); font-weight: 500; font-size: 14px; }

.pre-persona {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-chico); margin-bottom: 6px;
  overflow: hidden;
}
.pre-cabeza {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; cursor: pointer; list-style: none;
}
.pre-cabeza::-webkit-details-marker { display: none; }
.pre-cabeza:hover { background: var(--superficie-alta); }
.pre-nombre { font-weight: 570; flex: 1; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-saldos { font-size: 14px; }
.pre-cero { color: var(--suave); font-weight: 500; }
.pre-cero::after { content: " · saldado"; font-size: 12px; }

.pre-cuerpo { padding: 4px 14px 12px; border-top: 1px solid var(--linea-suave); }
.pre-mov {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 13.5px;
  border-top: 1px dashed var(--linea-suave);
}
.pre-mov:first-child { border-top: 0; }
.pre-movs .aviso { padding: 14px; }

.pre-acciones {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.pre-abono { display: flex; gap: 6px; align-items: center; }
.pre-abono input {
  width: 110px;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 5px 12px;
  color: inherit; font: inherit; font-size: 13px; outline: none;
}
.pre-abono input:focus { border-color: var(--azul); }
.pre-abono select {
  background: var(--fondo); color: inherit;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 4px 8px; font-size: 12.5px;
}
.pre-acciones .mini-btn { margin-left: 0; }

/* ────────────────────────────── Finanzas ────────────────────────────── */

.fin-bloque { margin-top: 26px; }

/* Barras a lo ancho, HTML puro. El color acompaña pero NUNCA va solo: cada
 * barra lleva su etiqueta (gastos/ingresos) y su monto escrito, porque el par
 * verde/rojo no se distingue con daltonismo rojo-verde. */
.fin-mes {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 6px 0; border-top: 1px dashed var(--linea-suave);
}
.fin-mes:first-child { border-top: 0; }
.fin-eti {
  flex: 0 0 46px; color: var(--suave); font-size: 12px;
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.fin-barras { flex: 1; min-width: 0; display: flex;
              flex-direction: column; gap: 3px; }
.fin-linea { display: flex; align-items: center; gap: 8px; }
.fin-serie { flex: 0 0 56px; color: var(--tenue); font-size: 11px;
             text-align: right; }

/* La pista es quien manda en el ancho: la barra adentro mide su % contra
 * ella. Una barra suelta en el flex se encogería según el espacio que sobre,
 * y dos meses iguales se verían distintos. */
.fin-pista { flex: 1; min-width: 0; }
.fin-barra, .fin-cat-barra {
  display: block; height: 8px; border-radius: 4px; min-width: 2px;
}
.fin-barra.gasto { background: var(--rojo); }
.fin-barra.ingreso { background: var(--verde); }
.fin-num { color: var(--suave); font-size: 12px; white-space: nowrap;
           font-variant-numeric: tabular-nums;
           flex: 0 0 90px; text-align: right; }

/* Categorías: magnitud pura, un solo tono — acá el color no distingue nada,
 * solo acompaña al largo. */
.fin-cats { display: flex; flex-direction: column; gap: 7px; max-width: 720px; }
.fin-cat { display: flex; align-items: center; gap: 10px; }
.fin-cat-nombre {
  flex: 0 0 180px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px;
}
.fin-cat-barra {
  height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--rojo) 65%, var(--superficie));
}
.fin-cat .monto { font-size: 13px; color: var(--suave); font-weight: 500;
                  flex: 0 0 auto; }

.fin-ultimos { display: flex; flex-direction: column; }
.fin-ult {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--radio-chico);
  padding: 9px 11px;
  transition: background .1s;
}
.fin-ult:hover { background: var(--superficie); }
.fin-ult-que { min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.fin-ult .det, .pre-mov .det, .fin-cat .det { color: var(--suave); font-size: 12px; }