/* Fuentes servidas por qConta (no se pide nada a Google): Geist y Geist Mono, licencia OFL */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fuentes/geist-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ═══════════════════════════════════════════════════════════════════════
   qCONTA 2 — hoja de estilo

   Estructura de Holded (raíl de iconos · submenú del módulo · barra
   superior · contenido en tarjetas · documento como papel con panel a la
   derecha), con la identidad de qConta: verde bosque, el logo de cuatro
   cuadraditos y los estados en píldora con puntito.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --rail: #12291f;
  --rail-txt: #e8f1eb;
  --rail-tenue: rgb(232 241 235 / .55);
  --verde-claro: #79c67f;

  --fondo: #f4f5f2;
  --sub: #fafbf8;
  --card: #ffffff;
  --texto: #16201a;
  --tenue: #66716a;
  --linea: #e4e7e1;
  --linea-suave: #eef0ec;
  --hover: #f1f4f0;
  --marca: #1f6b4a;
  --marca-fg: #ffffff;
  --marca-suave: #e6f1ea;
  --ring: rgb(31 107 74 / .28);

  --ok-bg: #dff0e0;   --ok-fg: #2c7a3f;
  --av-bg: #faeec9;   --av-fg: #8a6a15;
  --no-bg: #fbe1de;   --no-fg: #c0392b;
  --gris-bg: #ebecef; --gris-fg: #6b6b75;
  --azul-bg: #e2ebfa; --azul-fg: #1b4f9c;
  --lila-bg: #efe6f8; --lila-fg: #6c3aa0;

  /* Plano (decisión 13-10): nada de sombra para separar bloques, eso lo hace
     la línea. La sombra se reserva para lo que de verdad flota encima:
     menús, diálogos y avisos. */
  --sombra-xs: none;
  --sombra-sm: none;
  --sombra-md: 0 4px 14px -6px rgb(16 40 30 / .16);
  --sombra-lg: 0 16px 36px -12px rgb(16 40 30 / .28);

  --fuente: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 8px;
  --r-sm: 6px;

  /* Altura de fila de las tablas. La intermedia es la de fábrica; cada
     persona la cambia en su menú y se guarda en su navegador. */
  --fila: 36px;
}

html[data-densidad="comoda"]   { --fila: 44px; }
html[data-densidad="compacta"] { --fila: 30px; }

html.oscuro {
  --rail: #0b1a13;
  --fondo: #0f1713;
  --sub: #121c17;
  --card: #16211b;
  --texto: #e8f0ea;
  --tenue: #98a69d;
  --linea: rgb(255 255 255 / .1);
  --linea-suave: rgb(255 255 255 / .06);
  --hover: rgb(255 255 255 / .05);
  --marca: #79c67f;
  --marca-fg: #0d1a14;
  --marca-suave: rgb(121 198 127 / .14);
  --ring: rgb(121 198 127 / .35);
  --ok-bg: rgb(121 198 127 / .16);   --ok-fg: #8fd694;
  --av-bg: rgb(227 194 100 / .16);   --av-fg: #e3c264;
  --no-bg: rgb(240 138 125 / .16);   --no-fg: #f08a7d;
  --gris-bg: rgb(255 255 255 / .08); --gris-fg: #a3aca7;
  --azul-bg: rgb(120 160 230 / .16); --azul-fg: #9db8ee;
  --lila-bg: rgb(180 140 230 / .16); --lila-fg: #c9a8f0;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 14px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.app { display: grid; grid-template-columns: 68px 236px minmax(0, 1fr); height: 100vh; }
/* En el editor de documentos el submenú se aparta: el papel necesita sitio */
.app.enfoque { grid-template-columns: 68px minmax(0, 1fr); }
.app.enfoque .sub { display: none; }

/* ══════════════════════════════════════════════════════════ raíl ══ */
.rail { background: var(--rail); color: var(--rail-txt); display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; gap: 4px; }
.iso { width: 28px; height: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 14px; }
.iso i { display: block; background: var(--verde-claro); border-radius: 3px; }
.rail a, .rail button.r {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--rail-tenue);
  background: transparent; border: 0; cursor: pointer; position: relative; padding: 0;
}
.rail a:hover, .rail button.r:hover { background: rgb(255 255 255 / .07); color: var(--rail-txt); }
.rail a.activo { background: rgb(255 255 255 / .12); color: var(--verde-claro); }
.rail svg { width: 21px; height: 21px; }
.rail .hueco { flex: 1; }
.rail .punto { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 9px; background: #f0a64b; box-shadow: 0 0 0 2px var(--rail); }
.rail a[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 54px; top: 50%; transform: translateY(-50%); z-index: 40;
  background: #0d1712; color: #fff; font-size: 12.5px; padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════ submenú ══ */
.sub { background: var(--sub); border-right: 1px solid var(--linea); padding: 18px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sub h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; padding: 2px 10px 12px; }
.sub .cta { margin: 0 4px 14px; width: calc(100% - 8px); }
.sub .grupo { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); padding: 14px 10px 6px; }
.sub a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; color: var(--texto); }
.sub a:hover { background: var(--hover); }
.sub a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 500; }
.sub a svg { width: 16px; height: 16px; color: var(--tenue); flex: none; }
.sub a.activo svg { color: var(--marca); }
.sub a .n { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--tenue); background: var(--linea-suave); border-radius: 20px; padding: 0 7px; line-height: 19px; }
.sub a .n.av { background: var(--av-bg); color: var(--av-fg); }
.sub .pie-sub { margin-top: auto; padding: 14px 10px 0; font-size: 12px; color: var(--tenue); border-top: 1px solid var(--linea); }

/* ══════════════════════════════════════════════════════════ principal ══ */
.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.barra { height: 60px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 22px; background: var(--card); border-bottom: 1px solid var(--linea); }
.migas { font-size: 13.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.migas b { color: var(--texto); font-weight: 500; }
.buscar { margin-left: auto; position: relative; width: min(340px, 34vw); }
.buscar input { padding-left: 34px; height: 36px; border-radius: 10px; background: var(--fondo); border-color: transparent; box-shadow: none; }
.buscar svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--tenue); }
.buscar .res { position: absolute; top: 42px; left: 0; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; display: none; max-height: 60vh; overflow: auto; }
.buscar .res.abierto { display: block; }
.buscar .res .g { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); padding: 8px 10px 4px; }
.buscar .res a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.buscar .res a:hover { background: var(--hover); }
.empresa-sel { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 6px; border-radius: 10px; border: 1px solid var(--linea); background: var(--card); cursor: pointer; font-size: 13.5px; max-width: 250px; color: var(--texto); }
.empresa-sel:hover { background: var(--hover); opacity: 1; }
.avatar { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.empresa-sel span.nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.contenido { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 40px; }
.contenido.ancho { padding: 0; }

.menu { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra-lg); padding: 6px; min-width: 230px; }
.menu button, .menu a { display: flex; width: 100%; height: auto; padding: 8px 10px; justify-content: flex-start; gap: 10px; background: transparent; color: var(--texto); border-radius: 8px; font-weight: 400; font-size: 13.5px; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--hover); opacity: 1; }
.menu .sep { height: 1px; background: var(--linea); margin: 6px 4px; }
.menu .tit { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); padding: 6px 10px 4px; }
.menu svg { width: 16px; height: 16px; color: var(--tenue); flex: none; }

/* ══════════════════════════════════════════════════════════ cabecera de página ══ */
.cab { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cab h1 { font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.cab p { color: var(--tenue); font-size: 14px; margin-top: 3px; }
.cab .acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════════════════ tarjetas y rejillas ══ */
.card { background: var(--card); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-xs); min-width: 0; }
.card > .ct { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.card > .ct h3 { font-size: 14px; font-weight: 600; }
.card > .ct .mas { margin-left: auto; font-size: 13px; color: var(--marca); font-weight: 500; cursor: pointer; }
.card > .cc { padding: 16px 18px 18px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mb { margin-bottom: 16px; }

.kpi { padding: 16px 18px; }
.kpi .k { font-size: 12.5px; color: var(--tenue); display: flex; align-items: center; gap: 7px; }
.kpi .k i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.025em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12.5px; color: var(--tenue); margin-top: 2px; }
.kpi .s b { font-weight: 500; }
.kpi.oscuro { background: var(--rail); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.kpi.oscuro .k, .kpi.oscuro .s { color: rgb(255 255 255 / .65); }
.kpi.oscuro svg.spark { position: absolute; right: 14px; bottom: 12px; width: 130px; height: 46px; }
.pos { color: var(--ok-fg); } .neg { color: var(--no-fg); }

/* avisos de inicio */
.tareas { display: grid; gap: 8px; }
.tarea { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--linea); border-radius: 11px; font-size: 13.5px; background: var(--card); }
.tarea:hover { background: var(--hover); }
.tarea .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.tarea .ic.av { background: var(--av-bg); color: var(--av-fg); }
.tarea .ic.no { background: var(--no-bg); color: var(--no-fg); }
.tarea .ic.sec { background: var(--gris-bg); color: var(--gris-fg); }
.tarea .fl { margin-left: auto; color: var(--tenue); }

/* ══════════════════════════════════════════════════════════ tablas ══ */
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--card); position: sticky; top: 0; z-index: 1; }
/* la altura manda sobre el relleno: así la densidad se nota de verdad */
.tabla td { height: var(--fila); padding: 4px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover td { background: var(--hover); }
.tabla tfoot td { padding: 11px 14px; font-weight: 600; border-top: 1px solid var(--linea); background: var(--sub); }
.tabla .n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .doc { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.tabla .sub2 { font-size: 12px; color: var(--tenue); margin-top: 1px; }
.tabla td.chk, .tabla th.chk { width: 40px; padding-right: 0; }
.caja-tabla { overflow: auto; border-radius: var(--r); }
.vacio { text-align: center; padding: 46px 20px; color: var(--tenue); }
.vacio b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.vacio svg { width: 34px; height: 34px; color: var(--linea); margin-bottom: 10px; }

/* pestañas de estado (Todos · Borrador · Pendiente…) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); padding: 0 8px; overflow-x: auto; }
.tabs a { padding: 12px 12px 11px; font-size: 13.5px; color: var(--tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: 7px; align-items: center; cursor: pointer; }
.tabs a:hover { color: var(--texto); }
.tabs a.activo { color: var(--texto); border-bottom-color: var(--marca); font-weight: 500; }
.tabs a .n { font-size: 11.5px; background: var(--linea-suave); border-radius: 20px; padding: 0 7px; line-height: 18px; color: var(--tenue); }
.filtros { display: flex; gap: 8px; align-items: center; padding: 12px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); }
.filtros input, .filtros select { width: auto; min-width: 150px; height: 34px; }
.filtros .total { margin-left: auto; font-size: 13px; color: var(--tenue); }
.filtros .total b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════ píldoras ══ */
.eti { display: inline-flex; width: fit-content; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid transparent; padding: 2px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 18px; }
.eti::before { content: ""; width: 6px; height: 6px; border-radius: 9px; background: currentColor; flex: none; }
.eti.sin::before { display: none; }
.eti.ok { background: var(--ok-bg); color: var(--ok-fg); }
.eti.av { background: var(--av-bg); color: var(--av-fg); }
.eti.no { background: var(--no-bg); color: var(--no-fg); }
.eti.gris { background: var(--gris-bg); color: var(--gris-fg); }
.eti.azul { background: var(--azul-bg); color: var(--azul-fg); }
.eti.lila { background: var(--lila-bg); color: var(--lila-fg); }
.eti.borde { border-color: var(--linea); color: var(--tenue); }

/* ══════════════════════════════════════════════════════════ botones ══ */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px;
  border-radius: 10px; border: 1px solid transparent; font: 500 13.5px var(--fuente); cursor: pointer; white-space: nowrap;
  background: var(--marca); color: var(--marca-fg); transition: background-color .15s, opacity .15s, box-shadow .15s;
}
button:hover, .btn:hover { opacity: .92; }
button:focus-visible, a:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
button.sec, .btn.sec { background: var(--card); color: var(--texto); border-color: var(--linea); box-shadow: var(--sombra-xs); }
button.sec:hover, .btn.sec:hover { background: var(--hover); opacity: 1; }
button.fan { background: transparent; color: var(--texto); }
button.fan:hover { background: var(--hover); opacity: 1; }
button.peligro { background: var(--card); color: var(--no-fg); border-color: var(--linea); }
button.peligro:hover { background: var(--no-bg); opacity: 1; }
button.sm, .btn.sm { height: 31px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
button.xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
button.ico { width: 36px; padding: 0; }
button.sm.ico { width: 31px; }
button svg, .btn svg { width: 16px; height: 16px; flex: none; }
button[disabled] { pointer-events: none; opacity: .45; }
.ancho-total { width: 100%; }

/* ══════════════════════════════════════════════════════════ formularios ══ */
input, select, textarea {
  width: 100%; min-height: 36px; padding: 7px 11px; background: var(--card); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 9px; font: 13.5px var(--fuente); box-shadow: var(--sombra-xs);
}
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox], input[type=radio] { width: auto; min-height: auto; box-shadow: none; accent-color: var(--marca); cursor: pointer; }
input[type=color] { padding: 2px; height: 36px; width: 56px; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.campo { margin-bottom: 14px; min-width: 0; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.campos .todo { grid-column: 1 / -1; }
.pista { font-size: 12px; color: var(--tenue); margin-top: 5px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: 13.5px; margin: 0; cursor: pointer; }

.nota { border: 1px solid var(--linea); border-radius: 11px; padding: 11px 14px; font-size: 13px; background: var(--card); }
.nota b { display: block; margin-bottom: 2px; }
.nota.av { border-color: color-mix(in oklab, var(--av-fg) 30%, transparent); background: var(--av-bg); }
.nota.no { border-color: color-mix(in oklab, var(--no-fg) 30%, transparent); background: var(--no-bg); }
.nota.ok { border-color: color-mix(in oklab, var(--ok-fg) 30%, transparent); background: var(--ok-bg); }
.nota.azul { border-color: color-mix(in oklab, var(--azul-fg) 30%, transparent); background: var(--azul-bg); }

/* ══════════════════════════════════════════════════════════ editor de documento ══ */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 100%; }
.mesa { padding: 26px 30px 60px; background: var(--fondo); min-width: 0; }
.papel { background: var(--card); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-sm); padding: 32px 34px; max-width: 900px; margin: 0 auto; }
.papel .pc { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.papel .emisor b { font-size: 17px; letter-spacing: -.015em; }
.papel .emisor div { font-size: 12.5px; color: var(--tenue); }
.papel .tipo { text-align: right; }
.papel .tipo h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.papel .tipo .num { font: 500 14px var(--mono); color: var(--tenue); }
.bloques { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; }
.bloque { background: var(--fondo); border-radius: 12px; padding: 14px 16px; }
.bloque .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin-bottom: 6px; }
.bloque .cli b { font-size: 15px; }
.bloque .cli div { font-size: 12.5px; color: var(--tenue); }
.bloque .mini { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 13px; }
.bloque .mini input, .bloque .mini select { min-height: 32px; height: 32px; padding: 4px 9px; }
.lineas { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lineas th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 500; padding: 0 6px 8px; border-bottom: 1.5px solid var(--texto); }
.lineas th.n { text-align: right; }
.lineas td { padding: 6px 4px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.lineas td input { border-color: transparent; box-shadow: none; background: transparent; padding: 6px 7px; min-height: 34px; }
.lineas td input:hover { border-color: var(--linea); }
.lineas td input:focus { border-color: var(--marca); background: var(--card); }
.lineas td input.n { text-align: right; font-variant-numeric: tabular-nums; }
.lineas td.imp { text-align: right; padding: 13px 8px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineas td.x { width: 34px; }
.lineas .det { font-size: 12.5px; color: var(--tenue); }
.lineas tr:hover .quitar { opacity: 1; }
.quitar { opacity: 0; width: 28px; height: 28px; padding: 0; background: transparent; color: var(--tenue); border-radius: 8px; margin-top: 3px; }
.quitar:hover { background: var(--no-bg); color: var(--no-fg); }
.anadir { display: inline-flex; align-items: center; gap: 6px; color: var(--marca); font-weight: 500; font-size: 13.5px; margin: 12px 4px; cursor: pointer; background: none; border: 0; height: auto; padding: 4px; }
.pie-doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 18px; align-items: start; }
.totales { display: grid; gap: 6px; font-size: 13.5px; }
.totales .f { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totales .f span:first-child { color: var(--tenue); }
.totales .f.t { border-top: 1.5px solid var(--texto); padding-top: 10px; margin-top: 4px; font-size: 19px; font-weight: 600; }
.totales .f.t span:first-child { color: var(--texto); }
.totales .f input { width: 72px; min-height: 28px; height: 28px; padding: 2px 6px; text-align: right; }
.papel.bloqueado .lineas td input, .papel.bloqueado .lineas td select, .papel.bloqueado .bloque input, .papel.bloqueado .bloque select, .papel.bloqueado textarea, .papel.bloqueado .totales input { pointer-events: none; border-color: transparent; background: transparent; box-shadow: none; appearance: none; }
.papel.bloqueado input::-webkit-calendar-picker-indicator { display: none; }
.papel.bloqueado textarea:placeholder-shown { display: none; }

.lateral { background: var(--card); border-left: 1px solid var(--linea); padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.lateral .estado-gr { display: flex; justify-content: space-between; align-items: center; }
.lateral .grande { font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lateral .acciones { display: grid; gap: 8px; }
.lateral .acciones .fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lateral h4 { font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); margin-bottom: 8px; }
.progreso { height: 8px; border-radius: 8px; background: var(--linea-suave); overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--ok-fg); border-radius: 8px; }
.cadena { display: flex; align-items: flex-start; gap: 0; }
.cadena .paso { flex: 1; text-align: center; font-size: 11.5px; color: var(--tenue); position: relative; }
.cadena .paso .bola { width: 24px; height: 24px; border-radius: 30px; border: 2px solid var(--linea); background: var(--card); display: grid; place-items: center; margin: 0 auto 5px; font-size: 12px; position: relative; z-index: 1; }
.cadena .paso.hecho .bola { background: var(--marca); border-color: var(--marca); color: var(--marca-fg); }
.cadena .paso.hecho { color: var(--texto); }
.cadena .paso:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--linea); }
.cadena .paso.hecho:not(:last-child)::after { background: var(--marca); }
.linea-t { display: grid; gap: 12px; position: relative; padding-left: 16px; }
.linea-t::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1.5px; background: var(--linea); }
.linea-t .ev { position: relative; font-size: 13px; }
.linea-t .ev::before { content: ""; position: absolute; left: -15.5px; top: 6px; width: 8px; height: 8px; border-radius: 9px; background: var(--marca); box-shadow: 0 0 0 3px var(--card); }
.linea-t .ev span { display: block; font-size: 12px; color: var(--tenue); }
.lista-mini { display: grid; gap: 6px; }
.lista-mini .it { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: var(--fondo); align-items: center; }
.lista-mini .it .t { min-width: 0; }
.lista-mini .it .t span { display: block; font-size: 12px; color: var(--tenue); }
.huella { font: 11px var(--mono); color: var(--tenue); word-break: break-all; }

/* ══════════════════════════════════════════════════════════ gastos: la hoja ══ */
.soltar { border: 1.5px dashed var(--linea); border-radius: 14px; padding: 20px; text-align: center; background: var(--card); cursor: pointer; transition: border-color .15s, background-color .15s; display: flex; align-items: center; justify-content: center; gap: 14px; }
.soltar:hover, .soltar.encima { border-color: var(--marca); background: var(--marca-suave); }
.soltar svg { width: 26px; height: 26px; color: var(--marca); }
.soltar b { font-size: 15px; }
.soltar span { color: var(--tenue); font-size: 13px; display: block; }
.hoja-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.hoja-tabla th, .hoja-tabla td { border-right: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.hoja-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--sub); color: var(--tenue); font: 500 11.5px var(--fuente); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 9px 10px; white-space: nowrap; }
.hoja-tabla td { height: calc(var(--fila) - 6px); padding: 2px 10px; white-space: nowrap; }
.hoja-tabla .nfila { width: 38px; text-align: center; color: var(--tenue); font: 11px var(--mono); background: var(--sub); }
.hoja-tabla tbody tr { cursor: pointer; }
.hoja-tabla tbody tr:hover td { background: var(--hover); }
.hoja-tabla tfoot td { position: sticky; bottom: 0; background: var(--sub); font-weight: 600; padding: 9px 10px; border-top: 2px solid var(--tenue); }
tr.v-dup td:not(.nfila) { opacity: .5; }
tr.v-dup td.n { text-decoration: line-through; }
tr.v-nocuadra td.total { color: var(--no-fg); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.tenue { color: var(--tenue); }

/* Importes con significado. El color acompaña a la palabra, no la sustituye:
   con daltonismo o impreso en blanco y negro se sigue entendiendo. */
.imp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp .pal { font-size: .85em; font-weight: 500; letter-spacing: .01em; }
.imp.bueno { color: var(--ok-fg); }
.imp.malo  { color: var(--no-fg); }
.imp.cero  { color: var(--tenue); }
.ticket-papel { background: #fbfaf7; color: #1a1a1a; border: 1px solid #d8d8d2; border-radius: 4px; box-shadow: var(--sombra-lg); padding: 15px 17px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; transform: rotate(-.5deg); }
.ticket-papel .cent { text-align: center; }
.ticket-papel .corte { border-top: 1px dashed #b4b4ae; margin: 8px 0; }
.ticket-papel .lin { display: flex; justify-content: space-between; gap: 10px; }
.ticket-papel .tot { font-weight: 600; font-size: 13px; }
.foto-ticket { width: 100%; border-radius: 10px; border: 1px solid var(--linea); background: var(--fondo); max-height: 62vh; object-fit: contain; }
.revision { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; }
.conf { font-size: 11px; font-weight: 500; color: var(--ok-fg); margin-left: 6px; }
.conf.baja { color: var(--av-fg); }
.dudoso input { border-color: color-mix(in oklab, var(--av-fg) 55%, transparent); }

/* correo */
.correo { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cola-item { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 10px 12px; text-align: left; border: 1px solid var(--linea); border-radius: 11px; background: var(--card); color: var(--texto); font-weight: 400; margin-bottom: 6px; }
.cola-item:hover { background: var(--hover); opacity: 1; }
.cola-item.activo { border-color: var(--marca); background: var(--marca-suave); }
.cola-item .t3 { min-width: 0; flex: 1; }
.cola-item .t3 b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cola-item .t3 span { font-size: 12px; color: var(--tenue); }
.sobre .cab-mail { padding: 14px 18px; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; font-size: 13px; }
.sobre .cab-mail .l { display: flex; gap: 8px; }
.sobre .cab-mail .k { color: var(--tenue); min-width: 58px; }
.sobre .cuerpo-mail { padding: 16px 18px; font-size: 13.5px; line-height: 1.62; white-space: pre-wrap; max-height: 46vh; overflow: auto; }
.sobre .tabla-mini { display: block; margin: 8px 0 10px; font-family: var(--mono); font-size: 12px; background: var(--fondo); border-radius: 8px; padding: 10px 12px; white-space: pre; overflow-x: auto; }
.sobre .pie-mail { padding: 12px 18px; border-top: 1px solid var(--linea); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════════════════ tesorería ══ */
.cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cuenta { padding: 16px 18px; cursor: pointer; border-left: 4px solid var(--c, var(--marca)); }
.cuenta:hover { box-shadow: var(--sombra-md); }
.cuenta.activa { outline: 2px solid var(--marca); }
.cuenta .b { font-size: 12.5px; color: var(--tenue); }
.cuenta .s { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.cuenta .iban { font: 11.5px var(--mono); color: var(--tenue); }
.conc { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--linea-suave); }
.conc:last-child { border-bottom: 0; }
.conc > div { padding: 12px 14px; min-width: 0; }
.conc .mov { display: flex; gap: 11px; align-items: center; }
.conc .flecha { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.conc .flecha.e { background: var(--ok-bg); color: var(--ok-fg); }
.conc .flecha.s { background: var(--gris-bg); color: var(--gris-fg); }
.conc .flecha svg { width: 16px; height: 16px; }
.conc .imp { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conc .enlace { display: grid; place-items: center; color: var(--tenue); }
.conc .enlace svg { width: 18px; height: 18px; }
.conc .enlace.ok { color: var(--ok-fg); }
.conc .lado { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conc .sug { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px dashed var(--linea); border-radius: 10px; width: 100%; background: transparent; color: var(--texto); height: auto; font-weight: 400; justify-content: flex-start; text-align: left; }
.conc .sug:hover { border-style: solid; border-color: var(--marca); background: var(--marca-suave); opacity: 1; }
.conc .sug .pt { margin-left: auto; font-size: 11.5px; color: var(--ok-fg); font-weight: 600; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ══════════════════════════════════════════════════════════ impuestos ══ */
.trims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trim { padding: 16px 18px; }
.trim.actual { outline: 2px solid var(--marca); }
.trim h3 { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.trim .plazo { font-size: 12px; color: var(--tenue); margin: 2px 0 12px; }
.trim .m { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--linea-suave); font-size: 13.5px; cursor: pointer; }
.trim .m:hover b { color: var(--marca); }
.trim .m span { color: var(--tenue); }
.trim .m b { font-variant-numeric: tabular-nums; font-weight: 600; }
.casillas td.cas { font-family: var(--mono); font-size: 12.5px; color: var(--tenue); width: 60px; }

/* ══════════════════════════════════════════════════════════ gráficas ══ */
.grafica { width: 100%; height: 230px; display: block; }
.grafica text { fill: var(--tenue); font: 11px var(--fuente); }
.grafica .eje { stroke: var(--linea); }
.leyenda { display: flex; gap: 16px; font-size: 12.5px; color: var(--tenue); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.barra-h { height: 10px; border-radius: 10px; background: var(--linea-suave); overflow: hidden; }
.barra-h i { display: block; height: 100%; border-radius: 10px; }

/* ══════════════════════════════════════════════════════════ modal y avisos ══ */
.velo { position: fixed; inset: 0; z-index: 80; background: rgb(8 18 13 / .5); display: none; place-items: center; padding: 20px; }
.velo.abierto { display: grid; }
.modal { background: var(--card); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-lg); width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.modal.grande { width: min(940px, 100%); }
.modal > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 8px; }
.modal > header h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal > header p { font-size: 13px; color: var(--tenue); margin-top: 3px; }
.modal .cuerpo { padding: 10px 22px 18px; }
.modal > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linea); position: sticky; bottom: 0; background: var(--card); }
.modal > footer .izq { margin-right: auto; }
#avisos { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.aviso { background: var(--texto); color: var(--card); border-radius: 11px; box-shadow: var(--sombra-lg); padding: 11px 14px; font-size: 13.5px; animation: entra .18s ease-out; }
.aviso.ok { background: var(--marca); color: var(--marca-fg); }
.aviso.no { background: var(--no-fg); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crece { flex: 1; }
.der { text-align: right; }
.b { font-weight: 600; }
.chico { font-size: 12.5px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1200px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .lateral { border-left: 0; border-top: 1px solid var(--linea); }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 60px minmax(0, 1fr); }
  .sub { display: none; }
  .g3, .g-21 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .g2, .g4, .trims, .campos, .bloques, .pie-doc, .revision, .correo { grid-template-columns: minmax(0, 1fr); }
  .contenido { padding: 18px 16px 30px; }
  .buscar { display: none; }
  .barra { padding: 0 12px; gap: 8px; }
  .migas { display: none; }
  .empresa-sel { margin-left: auto; }
  .empresa-sel span.nom, .empresa-sel svg { display: none; }
  .cab .acc { margin-left: 0; }
  .mesa { padding: 14px; }
  .papel { padding: 20px 16px; }
}
@media print {
  .rail, .sub, .barra, .lateral { display: none !important; }
  .app { display: block; }
}

/* ── acceso ─────────────────────────────────────────────────────────── */
.acceso { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--marca) 16%, transparent), transparent), var(--fondo); }
.acceso-caja { width: min(400px, 100%); padding: 28px 26px; display: grid; gap: 4px; }
.acceso-caja h1 { font-size: 26px; letter-spacing: -.02em; margin-top: 6px; }
.acceso-caja .iso.grande { width: 40px; height: 40px; }
.acceso-caja .campo { margin-top: 10px; }
.usuario-sel { background: transparent; border: 0; padding: 0; height: auto; box-shadow: none; }
.usuario-sel .avatar { width: 30px; height: 30px; font-size: 11px; }
/* ── el cliente (visor): solo consulta ───────────────────────────────── */
.visor #btn-nuevo, .visor #empresa-sel svg { display: none !important; }
.visor #empresa-sel { pointer-events: none; }
.visor [data-a]:not([data-a=menu-usuario]):not([data-a=salir]):not([data-a=cambiar-clave]):not([data-a=clave-ok]):not([data-a=subir-tickets]):not([data-a=tema]) { display: none !important; }
.visor #f-ticket input, .visor #f-ticket select, .visor #f-ticket textarea { pointer-events: none; background: transparent; }
.visor .soltar[data-a=subir-tickets] { display: flex !important; }