/* Estilo "Sobrio" de LQ: herramienta de tesorería, no app de moda.
   - Una sola tipografía (IBM Plex Sans) con cifras tabulares.
   - Etiquetas en minúscula normal, sin mayúsculas espaciadas ni letra de máquina.
   - Verde oscuro como color principal; verde/rojo solo para lo que entra y sale.
   - Menos recuadros: una sola superficie y bordes suaves.
   Es el único estilo de LQ: todas las páginas llevan <html data-style="sobrio">. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

html[data-style="sobrio"]{
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Sans',system-ui,sans-serif;
  --bg:#171B19; --surface:#1F2421; --surface2:#262C29; --border:#333B37;
  --accent:#9CCBB4; --accent-rgb:156,203,180; --accent-fg:#0F1A15;
  --income:#6CC48E; --income-rgb:108,196,142;
  --expense:#E4847A; --expense-rgb:228,132,122;
  --text:#E6EAE8; --muted:#98A49E;
  --warn:#D9B45A;
}
html[data-style="sobrio"][data-theme="light"]{
  --bg:#F1F3F2; --surface:#FFFFFF; --surface2:#EDF0EE; --border:#D7DDD9;
  --accent:#1F5C47; --accent-rgb:31,92,71; --accent-fg:#FFFFFF;
  --income:#21804E; --income-rgb:33,128,78;
  --expense:#B0392D; --expense-rgb:176,57,45;
  --text:#17201C; --muted:#5C6964;
  --warn:#9A6B00;
}

/* Tipografía: una sola familia, sin mayúsculas espaciadas */
html[data-style="sobrio"] body,
html[data-style="sobrio"] body *{
  font-family:var(--font-body) !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-shadow:none !important;
}
html[data-style="sobrio"] body{background:var(--bg) !important;color:var(--text);font-size:14px;
  -webkit-font-smoothing:antialiased}
html[data-style="sobrio"] .main,html[data-style="sobrio"] main,html[data-style="sobrio"] .layout{background:var(--bg) !important}
html[data-style="sobrio"] td,html[data-style="sobrio"] th,html[data-style="sobrio"] input,
html[data-style="sobrio"] [class*="amount"],html[data-style="sobrio"] [class*="saldo"],
html[data-style="sobrio"] [class*="val"],html[data-style="sobrio"] [class*="kpi"] b{font-variant-numeric:tabular-nums}

/* Barra superior y menú */
html[data-style="sobrio"] .topbar,html[data-style="sobrio"] .barra{background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;box-shadow:none !important}
html[data-style="sobrio"] .logo,html[data-style="sobrio"] .logo span,html[data-style="sobrio"] .marca{color:var(--text) !important}
html[data-style="sobrio"] .logo span:first-child{color:var(--accent) !important}
html[data-style="sobrio"] .sidebar{background:var(--surface) !important;border-right:1px solid var(--border) !important}
html[data-style="sobrio"] .nav{font-size:13.5px !important;font-weight:400 !important;color:var(--text) !important;
  border-left:3px solid transparent !important;border-radius:0 !important}
html[data-style="sobrio"] .nav:hover{background:var(--surface2) !important}
html[data-style="sobrio"] .nav.active{background:rgba(var(--accent-rgb),.12) !important;color:var(--accent) !important;
  border-left-color:var(--accent) !important;font-weight:600 !important}
html[data-style="sobrio"] .nav-sep{font-size:12px !important;font-weight:600 !important;color:var(--muted) !important;
  border:none !important;padding-top:14px !important}

/* Títulos y etiquetas */
html[data-style="sobrio"] .ptitle,html[data-style="sobrio"] h1{font-size:24px !important;font-weight:600 !important;color:var(--text) !important}
html[data-style="sobrio"] .psub{font-size:13.5px !important;color:var(--muted) !important}
html[data-style="sobrio"] h2,html[data-style="sobrio"] h3,html[data-style="sobrio"] .tbl-head-title,
html[data-style="sobrio"] .cfg-section-title{font-size:15px !important;font-weight:600 !important;color:var(--text) !important}
html[data-style="sobrio"] .fl,html[data-style="sobrio"] label,html[data-style="sobrio"] .dash-eyebrow,
html[data-style="sobrio"] .kpi small,html[data-style="sobrio"] .kpi-label,html[data-style="sobrio"] small{
  font-size:12.5px !important;font-weight:500 !important;color:var(--muted) !important}
html[data-style="sobrio"] .dash-eyebrow-line{display:none !important}

/* Superficies: una sola, sin sombras ni brillos */
html[data-style="sobrio"] .card,html[data-style="sobrio"] [class*="-card"],html[data-style="sobrio"] .tbl-wrap,
html[data-style="sobrio"] .dash-hero,html[data-style="sobrio"] .kpi,html[data-style="sobrio"] .cfg-section,
html[data-style="sobrio"] .caja,html[data-style="sobrio"] .modal,html[data-style="sobrio"] .modal-box{
  background:var(--surface) !important;border:1px solid var(--border) !important;border-radius:10px !important;
  box-shadow:none !important;background-image:none !important}
html[data-style="sobrio"] .kpi::before,html[data-style="sobrio"] .card::before,html[data-style="sobrio"] .dash-hero::before,
html[data-style="sobrio"] .dash-hero::after{display:none !important}

/* El saldo grande: lo único que se destaca */
html[data-style="sobrio"] .dash-amount{font-size:46px !important;font-weight:600 !important;color:var(--text) !important;line-height:1.1}

/* Tablas */
html[data-style="sobrio"] table{border-collapse:collapse}
html[data-style="sobrio"] th{font-size:12.5px !important;font-weight:600 !important;color:var(--muted) !important;
  background:var(--surface) !important;border-bottom:1px solid var(--border) !important}
html[data-style="sobrio"] td{font-size:13.5px !important;border-bottom:1px solid var(--border) !important;background-image:none !important}
html[data-style="sobrio"] tbody tr:hover td{background:var(--surface2) !important}

/* Botones y campos */
html[data-style="sobrio"] .btn,html[data-style="sobrio"] button{border-radius:7px !important;font-size:13px !important;
  font-weight:500 !important;box-shadow:none !important;background-image:none !important}
html[data-style="sobrio"] .btn-p,html[data-style="sobrio"] .btn-primary,html[data-style="sobrio"] .dash-btn-primary{
  background:var(--accent) !important;color:var(--accent-fg) !important;border-color:var(--accent) !important}
html[data-style="sobrio"] input,html[data-style="sobrio"] select,html[data-style="sobrio"] textarea,
html[data-style="sobrio"] .finput{border-radius:7px !important;font-size:13.5px !important;background:var(--surface) !important;
  border:1px solid var(--border) !important;color:var(--text) !important}
html[data-style="sobrio"] input:focus,html[data-style="sobrio"] select:focus,html[data-style="sobrio"] textarea:focus{
  outline:2px solid rgba(var(--accent-rgb),.45) !important;outline-offset:1px;border-color:var(--accent) !important}

/* Etiquetas */
html[data-style="sobrio"] .tag,html[data-style="sobrio"] .badge{font-size:12px !important;font-weight:500 !important;border-radius:5px !important;
  background:var(--surface2) !important;color:var(--muted) !important;border:none !important}
html[data-style="sobrio"] .tag:empty{display:none !important}
html[data-style="sobrio"] .tag.ok{color:var(--income) !important;background:rgba(var(--income-rgb),.12) !important}
html[data-style="sobrio"] .tag.err{color:var(--expense) !important;background:rgba(var(--expense-rgb),.12) !important}
html[data-style="sobrio"] .tag.warn{color:var(--warn) !important;background:rgba(217,180,90,.14) !important}
html[data-style="sobrio"] .tag.com{color:var(--accent) !important;background:rgba(var(--accent-rgb),.12) !important}

/* Colores fijos escritos en el HTML → los del estilo */
html[data-style="sobrio"] [style*="color:#e8c547"],html[data-style="sobrio"] [style*="color: #e8c547"],
html[data-style="sobrio"] [style*="color:#c9a94f"]{color:var(--accent) !important}
html[data-style="sobrio"] [style*="color:#7ab3e0"],html[data-style="sobrio"] [style*="color: #7ab3e0"]{color:var(--muted) !important}
html[data-style="sobrio"] [style*="color:#4be0a0"],html[data-style="sobrio"] [style*="color: #4be0a0"],
html[data-style="sobrio"] [style*="color:#57b98e"]{color:var(--income) !important}
html[data-style="sobrio"] [style*="color:#f45b5b"],html[data-style="sobrio"] [style*="color: #f45b5b"],
html[data-style="sobrio"] [style*="color:#d97676"]{color:var(--expense) !important}
html[data-style="sobrio"] .saldo-top{color:var(--text) !important}


/* Pantalla de ingreso */
html[data-style="sobrio"] .label{font-size:13px !important;font-weight:500 !important;color:var(--muted) !important}
html[data-style="sobrio"] .bar{background:var(--accent) !important}
html[data-style="sobrio"] .sub,html[data-style="sobrio"] .footer{color:var(--muted) !important;font-size:12.5px !important}
html[data-style="sobrio"] body > .card > .btn{background:var(--accent) !important;color:var(--accent-fg) !important}  /* solo la pantalla de ingreso */

/* Ajustes finos */
html[data-style="sobrio"] [class*="label"],html[data-style="sobrio"] [class*="eyebrow"],
html[data-style="sobrio"] [class*="-lbl"],html[data-style="sobrio"] [class*="mini-title"]{font-size:12px !important;font-weight:500 !important;color:var(--muted) !important}
html[data-style="sobrio"] .per .kpi b{font-size:17px !important;white-space:nowrap}
html[data-style="sobrio"] .kpi-val{font-size:20px !important;font-weight:600 !important}
/* Personal: un solo botón lleno por bloque; el resto, contorno */
html[data-style="sobrio"] .per .card .fila button:not(.sec),
html[data-style="sobrio"] .per td button{background:transparent !important;color:var(--accent) !important;border:1px solid var(--accent) !important}
html[data-style="sobrio"] .per form#pagar button,html[data-style="sobrio"] .per h1 + .btn{background:var(--accent) !important;color:var(--accent-fg) !important}
html[data-style="sobrio"] .per a.btn,html[data-style="sobrio"] .per .btn.sec{background:transparent !important;color:var(--accent) !important;border:1px solid var(--border) !important}
html[data-style="sobrio"] .per a.btn:hover{border-color:var(--accent) !important}
html[data-style="sobrio"] .dash-chart-title{font-size:15px !important;font-weight:600 !important;color:var(--text) !important}
html[data-style="sobrio"] .dash-bank{background:var(--surface2) !important;border:none !important;border-left:3px solid var(--border) !important;border-radius:6px !important;padding:12px 14px !important}
html[data-style="sobrio"] .dash-bank.is-atrasada{border-left-color:var(--expense) !important}
html[data-style="sobrio"] .dash-bank-name{font-size:13px !important;font-weight:500 !important;color:var(--text) !important}
html[data-style="sobrio"] .dash-bank-val{font-size:18px !important;font-weight:600 !important}
html[data-style="sobrio"] .dash-bank-meta{font-size:12px !important}

/* ── Celular (≤600px) ─────────────────────────────────────────────────────
   1. El saldo grande del Dashboard se cortaba a la derecha.
   2. Los filtros de Caja Diaria quedaban con huecos enormes entre campo y campo
      (cada filtro heredaba un alto mínimo de 150px al apilarse).
   3. La tabla de Caja Diaria mostraba solo fecha y concepto: los importes quedaban
      fuera de pantalla. En celular cada movimiento pasa a ser una tarjeta. */
@media (max-width: 600px){
  html .dash-amount,
  html[data-style="sobrio"] .dash-amount{
    font-size:clamp(18px, 6.2vw, 36px) !important;
    white-space:normal; overflow-wrap:normal; letter-spacing:-.5px !important;
  }

  html .filters{flex-direction:column !important; align-items:stretch !important}
  html .filters .fg{
    flex:0 0 auto !important; width:100% !important;
    border-right:none !important; border-bottom:1px solid var(--border-soft, var(--border)) !important;
  }
  html .filters .fg:last-child{border-bottom:none !important}

  #page-caja .tbl-wrap > div{overflow-x:visible !important}
  #page-caja .tbl-wrap table{width:100% !important; min-width:0 !important}
  #page-caja .tbl-wrap thead{display:none}
  #page-caja .tbl-wrap table, #page-caja #tbody{display:block; box-sizing:border-box}
  #page-caja #tbody tr{box-sizing:border-box; width:100%}
  #page-caja #tbody tr{
    display:grid; grid-template-columns:26px minmax(0,1fr) auto; column-gap:8px; row-gap:3px;
    padding:10px 10px 10px 4px; border-bottom:1px solid var(--border);
  }
  #page-caja #tbody td{display:block; padding:0 !important; border:none !important; width:auto !important;
                       max-width:none !important; white-space:normal !important; overflow:visible !important}
  #page-caja #tbody td:nth-child(1){grid-column:1; grid-row:1 / span 3; padding-top:2px !important}
  #page-caja #tbody td:nth-child(2){grid-column:2; grid-row:1; font-size:12px; color:var(--muted); white-space:nowrap !important}
  #page-caja #tbody td:nth-child(4),
  #page-caja #tbody td:nth-child(5){grid-column:3; grid-row:1; text-align:right; font-weight:700}
  #page-caja #tbody td:nth-child(4):empty,
  #page-caja #tbody td:nth-child(5):empty{display:none}
  #page-caja #tbody td:nth-child(3){grid-column:2 / 4; grid-row:2; font-size:14px; text-overflow:clip !important; overflow-wrap:anywhere; min-width:0}
  #page-caja #tbody td .tag{white-space:normal; overflow-wrap:anywhere; max-width:100%}
  #page-caja #tbody td:nth-child(7),
  #page-caja #tbody td:nth-child(8){grid-row:3; grid-column:2; display:inline-block}
  #page-caja #tbody td:nth-child(8){grid-row:4}
  #page-caja #tbody td:nth-child(6){grid-column:3; grid-row:3; text-align:right; font-size:11px; color:var(--muted)}
  #page-caja #tbody td:nth-child(6)::before{content:"saldo "}
  #page-caja #tbody td:nth-child(9){grid-column:3; grid-row:4; text-align:right}
  #page-caja #tbody td[colspan]{grid-column:1 / -1; grid-row:auto}
  #page-caja #tbody td, #page-caja #tbody td .tag{background:transparent !important}
  #page-caja #tbody td .tag{padding:0 !important; border:none !important; font-size:11px; color:var(--muted)}
  #page-caja #tbody td:nth-child(6){white-space:nowrap !important}

  /* barra de herramientas de Caja Diaria: que baje de renglón en vez de cortarse */
  #page-caja div:has(> #caja-rep-desde){flex-wrap:wrap; width:100%}
  #page-caja #caja-rep-desde, #page-caja #caja-rep-hasta{flex:1 1 120px; min-width:0}
  #page-caja .btn-d{white-space:normal; max-width:100%}
}

/* ── Revisión de diseño (oct 2026): color y legibilidad ─────────────── */
@media screen{
  /* Importes: los colores de ingreso/egreso del tema (antes menta y rojo neón que no se leían) */
  html[data-style="sobrio"] .inc{color:var(--income) !important}
  html[data-style="sobrio"] .exp{color:var(--expense) !important}
  /* Sin teñir las filas: el color del importe ya dice si entra o sale */
  html[data-style="sobrio"]{--inc-bg:transparent; --exp-bg:transparent}

  /* Piso de tamaño: nada por debajo de 12 px en pantalla (las hojas para imprimir no cambian) */
  html[data-style="sobrio"] [style*="font-size:9px"],html[data-style="sobrio"] [style*="font-size:9.5px"],
  html[data-style="sobrio"] [style*="font-size:10px"],html[data-style="sobrio"] [style*="font-size:10.5px"],
  html[data-style="sobrio"] [style*="font-size:11px"]{font-size:12px !important;letter-spacing:0 !important}
  html[data-style="sobrio"] .kpi-sub,html[data-style="sobrio"] .fhint,html[data-style="sobrio"] .kpi-grupo,
  html[data-style="sobrio"] .btn-xs,html[data-style="sobrio"] .mini,html[data-style="sobrio"] .marca span{font-size:12px !important}
  html[data-style="sobrio"] td{font-size:13px}

  /* Texto de ejemplo de los campos con contraste suficiente */
  html[data-style="sobrio"] ::placeholder{color:var(--muted) !important;opacity:1}

  /* Restos del estilo anterior: Syne, fondo oscuro fijo del dólar, dorado */
  html[data-style="sobrio"] [style*="Syne"]{font-family:var(--font-body) !important}
  html[data-style="sobrio"] #dolar-widget{background:var(--surface2) !important;border-color:var(--border) !important}

  /* Tarjetas de bancos: con aire adentro; la cuenta atrasada se marca con el texto en rojo,
     no con una barra de color al costado */
  html[data-style="sobrio"] #dash-bancos-grid > .dash-bank{padding:14px 16px !important}
  html[data-style="sobrio"] .dash-bank.is-atrasada{border-left:1px solid var(--border) !important}
  html[data-style="sobrio"] .dash-bank-meta{font-size:12px !important}
}
@media screen and (max-width:700px){
  /* En celular la barra superior no se parte en renglones: "by edurost" en una línea y sin el año */
  html[data-style="sobrio"] .topbar [style*="font-size:9px"]{white-space:nowrap}
  html[data-style="sobrio"] .topbar > div > [style*="font-size:10px"]{display:none !important}
}

/* ── Movimiento (criterio Emil Kowalski) ───────────────────────────────────────
   Curvas fuertes, duraciones cortas, solo transform/opacity, salida más rápida que la entrada.
   Lo que se usa decenas de veces por día (cambiar de sección) casi no se anima. */
html[data-style="sobrio"]{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
}

/* Botones: respuesta al apretar, sin "transition: all" */
html[data-style="sobrio"] :is(.btn,.tbtn,.pbtn,.cbtn,.dash-btn-primary,.dash-btn-secondary,.ag-cal-nav,.ag-btn-done,.ag-btn-edit,.ag-btn-del,.theme-switch button,#lq-nav-toggle){
  transition:transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
}
html[data-style="sobrio"] :is(.btn,.tbtn,.pbtn,.cbtn,.dash-btn-primary,.dash-btn-secondary,.ag-cal-nav,.ag-btn-done,.ag-btn-edit,.ag-btn-del,.theme-switch button,#lq-nav-toggle):not(:disabled):active{
  transform:scale(.97) !important;
}
html[data-style="sobrio"] .nav{transition:background-color 120ms ease, color 120ms ease, border-color 120ms ease !important}

/* Botones desactivados: se ven apagados y no responden */
html[data-style="sobrio"] .btn:disabled{opacity:.45;cursor:not-allowed}

/* Cambio de sección: sin deslizamiento, apenas un fundido */
html[data-style="sobrio"] .page{animation:lqSobrioPage 90ms linear !important}
@keyframes lqSobrioPage{from{opacity:.6}to{opacity:1}}

/* Aviso "✓ Guardado": entra rápido con ease-out, sale más rápido todavía */
html[data-style="sobrio"] .toast{
  transform:translateY(12px) scale(.98);
  transition:opacity 150ms ease, transform 150ms ease !important;
}
html[data-style="sobrio"] .toast.show{
  transform:none;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out) !important;
}

/* Ventanas: el fondo se funde y la ventana entra desde 96 %; al cerrar sale en 150 ms (ver sobrio.js) */
html[data-style="sobrio"] [id$="-bg"]{animation:lqSobrioFondo 200ms var(--ease-out)}
html[data-style="sobrio"] [id$="-bg"] > div{animation:lqSobrioVentana 220ms var(--ease-out) !important}
@keyframes lqSobrioFondo{from{opacity:0}to{opacity:1}}
@keyframes lqSobrioVentana{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
html[data-style="sobrio"] [id$="-bg"].lq-saliendo{opacity:0;transition:opacity 150ms ease;pointer-events:none}
html[data-style="sobrio"] [id$="-bg"].lq-saliendo > div{opacity:0;transform:scale(.96);transition:opacity 150ms ease, transform 150ms ease}

/* La Calculadora flotante no tapa lo último de cada pantalla */
html[data-style="sobrio"] .main{padding-bottom:84px}

/* Quien pide menos movimiento en su sistema: nada se desplaza ni escala, solo fundidos */
@media (prefers-reduced-motion: reduce){
  html[data-style="sobrio"] *{transform:none !important}
  html[data-style="sobrio"] .page{animation:none !important}
}

/* Eco de los campos de monto (estilo/montos.js): repite el monto con formato y escala */
.lq-monto-eco{min-height:16px;margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lq-monto-eco.is-ingreso{color:var(--income)}
.lq-monto-eco.is-egreso{color:var(--expense)}
.lq-monto-eco.is-error{color:var(--expense)}

/* Diálogo de confirmación propio (estilo/dialogo.js) */
.lq-dialogo-bg{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.lq-dialogo{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 24px;width:480px;max-width:100%;box-shadow:0 16px 48px rgba(0,0,0,.35)}
.lq-dialogo-titulo{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.lq-dialogo-cuerpo{font-size:14px;line-height:1.5;color:var(--text);white-space:pre-line}
.lq-dialogo-cuerpo .lq-dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:12px 0 4px;font-variant-numeric:tabular-nums;white-space:normal}
.lq-dialogo-cuerpo .lq-dl dt{color:var(--muted)}
.lq-dialogo-cuerpo .lq-dl dd{margin:0;text-align:right;font-weight:600}
.lq-dialogo-cuerpo .lq-dl .sep{grid-column:1/-1;border-top:1px solid var(--border);margin:4px 0}
.lq-dialogo-cuerpo .nota{color:var(--muted);font-size:13px;margin-top:8px}
.lq-dialogo-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.lq-dialogo-pie .btn{min-height:36px;padding:8px 16px;font-size:13px}
.lq-btn-peligro{background:var(--expense) !important;color:#fff !important;border-color:var(--expense) !important}

/* Carga rápida en Caja: una fila arriba de la tabla */
.q-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.q-tipo{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;align-self:flex-end}
.q-tipo-btn{background:var(--surface2);color:var(--muted);border:none;padding:0 14px;height:38px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.q-tipo-btn+.q-tipo-btn{border-left:1px solid var(--border)}
.q-tipo-btn[aria-pressed="true"]#q-i{background:rgba(var(--income-rgb),.14);color:var(--income)}
.q-tipo-btn[aria-pressed="true"]#q-e{background:rgba(var(--expense-rgb),.14);color:var(--expense)}
.q-campo{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.q-campo .finput{height:38px;padding:0 10px;font-size:14px}
.q-fecha{width:140px}.q-monto{width:150px;position:relative}.q-conc{flex:1 1 140px}
.q-campo select{width:150px;max-width:150px}
.q-fb{order:9}
.q-monto .lq-monto-eco{position:absolute;top:100%;left:0;white-space:nowrap;margin-top:2px}
.q-guardar{height:38px;padding:0 16px;font-size:13px}
.q-guardar kbd{font:inherit;font-size:11px;opacity:.7;margin-left:6px;border:1px solid currentColor;border-radius:4px;padding:0 4px}
.q-fb{flex-basis:100%;min-height:16px;font-size:12px;margin-top:6px}
.q-fb.is-ok{color:var(--income)}.q-fb.is-error{color:var(--expense)}
@media (max-width:700px){.q-form{display:grid;grid-template-columns:1fr 1fr}.q-tipo,.q-conc,.q-guardar,.q-fb{grid-column:1/-1}.q-fecha,.q-monto{width:auto}.q-campo select{max-width:none}.q-tipo-btn{flex:1}}

/* Aviso de cuentas sin movimientos: una sola línea en ámbar (no 8 elementos en rojo) */
html[data-style="sobrio"] .lq-aviso{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:8px 12px;border-radius:8px;
  border:1px solid rgba(217,180,90,.35) !important;background:rgba(217,180,90,.08) !important;color:var(--warn) !important;font-size:13px !important}
html[data-style="sobrio"] .lq-aviso::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:6px}
html[data-style="sobrio"] .lq-aviso-accion{color:var(--warn);font-weight:600;text-decoration:underline;text-underline-offset:2px}
html[data-style="sobrio"] .dash-bank.is-atrasada{border-color:var(--border) !important}
html[data-style="sobrio"] .dash-bank-meta.is-atrasada{color:var(--muted) !important}

/* Acciones sobre la selección: ocultas hasta que haya filas tildadas (sobrio.js) */
html[data-style="sobrio"] .lq-sin-seleccion{display:none !important}
html[data-style="sobrio"] .lq-sel-pista{font-size:12px;color:var(--muted);align-self:center;white-space:nowrap}
html[data-style="sobrio"] .lq-sel-pista.is-activa{color:var(--text);font-weight:600}
html[data-style="sobrio"] div:has(> .lq-sel-pista){justify-content:flex-end !important;gap:8px;flex-wrap:wrap}
html[data-style="sobrio"] div:has(> .lq-sel-pista) > [id^="count-"]{margin-right:auto}

/* ── Celular (≤ 700 px) ──────────────────────────────────────────────────────── */
html[data-style="sobrio"] .lq-solo-celular{display:none}
@media screen and (max-width:700px){
  /* Barra superior: entra todo, "Salir" incluido */
  html[data-style="sobrio"] #hist-btn{font-size:0 !important;padding:0 10px !important}
  html[data-style="sobrio"] #hist-btn::after{content:"Años ant.";font-size:13px}
  html[data-style="sobrio"] .topbar > div:last-child{gap:6px !important;flex-shrink:0}

  /* Encabezados de página: los botones bajan de renglón en vez de salirse */
  html[data-style="sobrio"] .page > div:first-child{flex-wrap:wrap !important}
  html[data-style="sobrio"] .page > div:first-child > div{flex-wrap:wrap !important;max-width:100%}

  /* Tarjetas de resumen de a dos, más bajas */
  html[data-style="sobrio"] .kpi-row{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important}
  html[data-style="sobrio"] .kpi-row .kpi{padding:12px !important;min-width:0}
  html[data-style="sobrio"] .kpi-row .kpi-val{font-size:16px !important;overflow-wrap:anywhere}
  html[data-style="sobrio"] #page-gest-dashboard > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}

  /* Caja: filtros detrás de un botón, así los movimientos se ven antes */
  html[data-style="sobrio"] .lq-solo-celular{display:inline-flex}
  html[data-style="sobrio"] .lq-filtros-toggle{margin:0 0 10px;min-height:40px}
  html[data-style="sobrio"] #caja-filtros:not(.abierto){display:none !important}

  /* Objetivos táctiles: casillas y botones chicos de las filas */
  html[data-style="sobrio"] td input[type="checkbox"],html[data-style="sobrio"] th input[type="checkbox"]{width:22px;height:22px}
  html[data-style="sobrio"] td .btn,html[data-style="sobrio"] .btn-xs{min-height:36px;padding:6px 12px !important}
  html[data-style="sobrio"] .btn{min-height:40px}

  /* El aviso de bancos en una sola pieza */
  html[data-style="sobrio"] .lq-aviso{display:block}
  html[data-style="sobrio"] .lq-aviso::before{display:inline-block;vertical-align:middle}

  html[data-style="sobrio"] .topbar .btn{padding:0 10px !important}
  html[data-style="sobrio"] .topbar{padding-right:8px !important;gap:6px !important}
  html[data-style="sobrio"] .topbar > div:last-child{margin-left:auto}
  html[data-style="sobrio"] .topbar #save-ok{display:none !important}
  html[data-style="sobrio"] .page > div:first-child .btn-p{order:-1}
  /* Barras con período y acciones sobre la selección: bajan de renglón */
  html[data-style="sobrio"] .page div:has(> input[type="date"] + input[type="date"]){flex-wrap:wrap !important;max-width:100%}
  html[data-style="sobrio"] .page div:has(> input[type="date"] + input[type="date"]) input[type="date"]{flex:1 1 130px;min-width:0}
  html[data-style="sobrio"] .page div:has(> div:has(> input[type="date"] + input[type="date"])){flex-wrap:wrap !important}
  html[data-style="sobrio"] .lq-sel-pista{white-space:normal}

  /* La Calculadora no tapa el campo que se está completando */
  html[data-style="sobrio"] body:has(input:focus, select:focus, textarea:focus) #lqc-lanzar{display:none !important}
}

/* ── Limpieza de restos del estilo anterior ─────────────────────────────────── */
/* Rótulos: el estilo viejo los forzaba a 8,5 px, mono y en mayúsculas */
html[data-style="sobrio"] :is(.kpi-label,.card-title,.fl,.ag-cal-dow,label,.dash-chart-title,.dash-mini-label){
  font-family:var(--font-body) !important;font-size:12px !important;letter-spacing:0 !important;text-transform:none !important}
html[data-style="sobrio"] .card-title{font-size:13px !important;font-weight:600 !important;color:var(--text) !important;margin-bottom:10px}
html[data-style="sobrio"] .flabel{text-transform:none !important;letter-spacing:0 !important;font-size:12px !important}
html[data-style="sobrio"] .tbtn{text-transform:none !important;letter-spacing:0 !important;font-size:13px !important}
html[data-style="sobrio"] :is(.gastos-kpi .lbl,.gastos-table th,.dash-chart-badge,.pag,.ag-widget-title,.ag-ev-tipo,#dash-fecha-hero){font-size:12px !important}
/* Osvaldo celeste y Matías dorado: un solo color de acento */
html[data-style="sobrio"] .kpi.o::before,html[data-style="sobrio"] .kpi.m::before{background:var(--border) !important}
html[data-style="sobrio"] .kpi.o .kpi-val,html[data-style="sobrio"] .kpi.m .kpi-val{color:var(--text) !important}
html[data-style="sobrio"] .card[style*="border-top:2px solid #e8c547"],html[data-style="sobrio"] .card[style*="border-top:2px solid #7ab3e0"]{border-top:1px solid var(--border) !important}
html[data-style="sobrio"] [style*="background:#7ab3e0"],html[data-style="sobrio"] [style*="background:#e8c547"]{background:var(--accent) !important;color:var(--accent-fg) !important}
/* Separadores de día del Reporte Diario: sin azul marino */
html[data-style="sobrio"] tr.day-sep td{background:var(--surface2) !important;color:var(--text) !important;font-size:12px !important}
/* Nuevo movimiento: sin línea de acento ni brillo */
html[data-style="sobrio"] .fcard{box-shadow:none !important;border-top:1px solid var(--border) !important}
html[data-style="sobrio"] .fcard::before{display:none !important}

/* ── Menú ────────────────────────────────────────────────────────────────────── */
/* Sin los números 01–28 */
html[data-style="sobrio"] .sidebar .nav::before{content:none !important;display:none !important}
/* Foco visible al navegar con teclado */
html[data-style="sobrio"] .sidebar .nav:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Pantalla grande: el menú queda fijo al costado (se oculta con el botón Menú; se recuerda) */
@media screen and (min-width:1280px){
  html[data-style="sobrio"][data-nav-fijo="1"] .sidebar{transform:none !important;transition:none}
  /* Solo en la app principal, donde el menú es un cajón fijo (#lq-velo). En los módulos
     (Pagos, Personal, Cobranzas) el menú ya ocupa su lugar y esto dejaba 236 px vacíos. */
  html[data-style="sobrio"][data-nav-fijo="1"]:has(#lq-velo) .main{margin-left:236px !important;width:calc(100% - 236px) !important}
  html[data-style="sobrio"][data-nav-fijo="1"] #lq-velo{display:none !important}
  html[data-style="sobrio"][data-nav-fijo="1"] #lq-nav-toggle .lq-ico{color:var(--accent)}
}