/* =====================================================================
   GRUPO QBK · Plataforma de gestión de pagos
   public/assets/css/qbk.css

   Base tomada del prototipo aprobado (qbk-plataforma-pagos.jsx) y
   refinada: jerarquía tipográfica, profundidad medida, estados de foco
   consistentes y transiciones cortas.

   Criterios de la pasada de diseño:
   · La sombra se usa para separar planos, no para decorar. Casi todo el
     relieve viene del borde de 1px; la sombra solo aparece donde algo
     flota de verdad (modal, toast, barra fija, tarjeta de ingreso).
   · Un solo color de acento, el verde azulado del grupo. Los demás son
     semáforo: ámbar advierte, rojo bloquea, verde confirma.
   · Las cifras siempre en monoespaciada con cifras tabulares, alineadas
     a la derecha. Una columna de pesos que baila es una columna que no
     se puede sumar con la vista.
   · Sin CDN ni fuentes remotas: debe abrir igual en un equipo sin salida
     a internet.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.q-app {
  /* --- tinta y superficies --- */
  --ink:#1D2C33; --ink2:#2A3D45; --ink3:#3A5058;
  --paper:#F4F8F8; --surface:#FFFFFF; --surface2:#FBFDFD;
  --rule:#D3E1E0; --rule2:#E4EDEC; --rule3:#EDF4F4;
  --muted:#5A6B72; --muted2:#84A0A6;

  /* --- semáforo --- */
  --teal:#01717F; --teal-hi:#0A8A99; --teal-dark:#015865;
  --tealsoft:#E0F0F0; --tealline:#8FC8CB;
  --mint:#02A984; --mint-d:#02795F;
  --amber:#A96A12; --ambersoft:#FDF3E6; --amberline:#E0C87A;
  --green:#15654A; --greensoft:#E0F0E8; --greenline:#96C6B2;
  --red:#B3261E; --redsoft:#FBEAE8; --redline:#E0A79F;
  --violet:#4A3A7A; --violetsoft:#EAE6F5; --violetline:#C4B9E4;

  /* aliases usados por el módulo Caja Menor */
  --rojo: var(--red); --verde: var(--green);
  --linea: var(--rule2); --fondo: var(--surface2);
  --marca: var(--teal); --marca-claro: #5FD3DC;
  --sobre-fuerte: #E3F2F3; --sobre-suave: #84B4BA;

  /* --- profundidad --- */
  --sh-1: 0 1px 3px rgba(15,32,39,.06);
  --sh-2: 0 2px 8px rgba(15,32,39,.08), 0 1px 2px rgba(15,32,39,.05);
  --sh-3: 0 10px 28px rgba(15,32,39,.14), 0 2px 6px rgba(15,32,39,.07);
  --sh-4: 0 22px 60px rgba(15,32,39,.30);
  --ring: 0 0 0 3px rgba(1,113,127,.18);

  /* --- ritmo --- */
  --r: 13px; --r-sm: 8px;
  --t: 140ms cubic-bezier(.2,.6,.3,1);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --titulo: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.q-app button { font-family: inherit; font-size: inherit; cursor: pointer; }
.q-app input, .q-app select, .q-app textarea { font-family: inherit; font-size: 14px; color: var(--ink); }
.q-app a { color: inherit; text-decoration: none; }
.q-app h1, .q-app h2, .q-app h3 { text-wrap: balance; }

/* Foco único en toda la aplicación: anillo verde azulado, nunca el
   contorno azul del navegador, que se pierde sobre la barra oscura. */
.q-app :focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.q-ic { flex: 0 0 auto; vertical-align: -2px; }

/* Barras de desplazamiento discretas: la aplicación tiene tablas anchas
   y la barra gruesa del sistema roba altura visual en cada una. */
.q-app * { scrollbar-width: thin; scrollbar-color: #B8D0CE transparent; }
.q-app *::-webkit-scrollbar { width: 10px; height: 10px; }
.q-app *::-webkit-scrollbar-thumb { background: #B8D0CE; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
.q-app *::-webkit-scrollbar-thumb:hover { background: #96B8B6; background-clip: content-box; }
.q-app *::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   ESTRUCTURA
   ===================================================================== */

.q-shell { display: flex; min-height: 100vh; }

.q-side {
  width: 260px; flex: 0 0 260px;
  background: linear-gradient(160deg, #0F2027 0%, #0A3540 50%, #015865 100%);
  color: #DCEFEC;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-radius: 0 16px 16px 0;
  box-shadow: 2px 0 20px rgba(15,32,39,.12), inset -1px 0 0 rgba(255,255,255,.06);
}

.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-content { padding: 22px 28px 72px; max-width: 1320px; width: 100%; }

/* =====================================================================
   MARCA Y SESIÓN
   ===================================================================== */

.q-brand { padding: 18px 18px 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.q-brand-name { font-size: 15px; font-weight: 700; letter-spacing: .17em; color: #fff; }
.q-brand-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-suave); margin-top: 4px; }

.q-session { padding: 14px 14px 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.q-session-lbl { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sobre-suave); margin-bottom: 9px; }
.q-session-who { display: flex; gap: 10px; align-items: center; }

/* Iniciales en lugar de foto: no hay banco de imágenes que mantener y
   siguen sirviendo para saber de un vistazo con qué cuenta se está. */
.q-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sobre-fuerte);
  color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center;
}
.q-session-name { font-size: 13.5px; color: var(--sobre-fuerte); font-weight: 700; line-height: 1.25; }
.q-session-role { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sobre-suave); margin-top: 2px; }
.q-session-cargo { font-size: 10.5px; color: var(--sobre-suave); margin-top: 8px; padding-left: 44px; }

/* =====================================================================
   NAVEGACIÓN
   ===================================================================== */

.q-nav { padding: 8px 10px 14px; flex: 1; overflow-y: auto; }

.q-nav-item {
  position: relative;
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 11px; border-radius: var(--r-sm);
  background: transparent; border: none; color: var(--sobre-suave);
  text-align: left; font-size: 13px; margin-bottom: 2px;
  transition: background var(--t), color var(--t);
  border-radius: 9px;
}
.q-nav-item:hover { background: rgba(255,255,255,.10); color: #fff; }

.q-nav-item.on {
  background: rgba(255,255,255,.14);
  color: #fff; font-weight: 600;
}
/* Barra de acento a la izquierda del ítem activo: se lee incluso de
   reojo, sin depender solo del cambio de color de fondo. */
.q-nav-item.on::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--marca-claro);
}

.q-nav-count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,.14); padding: 1px 7px; border-radius: 9px; color: #fff;
  min-width: 22px; text-align: center;
}
.q-nav-item.on .q-nav-count { background: rgba(255,255,255,.26); }
/* El contador de lo que espera acción va en ámbar: es una cifra que
   pide reaccionar, no un dato más. */
.q-nav-count.pide { background: #E8A33C; color: #2B1B02; }
.q-nav-item.on .q-nav-count.pide { background: #F2B858; color: #2B1B02; }

.q-nav-sec {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--sobre-suave); padding: 18px 11px 8px; font-weight: 700;
}

.q-nav-item.futuro { opacity: .38; cursor: default; }
.q-nav-item.futuro:hover { background: transparent; color: var(--sobre-suave); }
.q-nav-item.futuro .q-nav-count { background: rgba(255,255,255,.09); font-size: 9.5px; }

.q-side-foot {
  padding: 13px 16px 16px; font-size: 10.5px; color: var(--sobre-suave);
  border-top: 1px solid rgba(255,255,255,.08); line-height: 1.55;
}
.q-side-foot a { color: var(--sobre-suave); text-decoration: underline; text-underline-offset: 2px; }
.q-side-foot a:hover { color: #fff; }

/* =====================================================================
   RAIL DE LA SEMANA
   ===================================================================== */

.q-rail {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  padding: 12px 28px 0; box-shadow: var(--sh-1);
  position: sticky; top: 0; z-index: 30;
}
.q-rail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.q-rail-title { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.q-rail-cut {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11.5px; color: var(--amber);
  background: var(--ambersoft); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--amberline);
}
/* Cuando falta poco para el corte, el aviso pasa a rojo: es el dato que
   decide si una solicitud entra a esta semana o a la siguiente. */
.q-rail-cut.urge { color: var(--red); background: var(--redsoft); border-color: var(--redline); }

.q-rail-track { display: flex; gap: 4px; padding-bottom: 12px; }
.q-rail-seg {
  flex: 1; min-width: 0; padding-top: 9px; position: relative;
  border-top: 3px solid var(--rule3);
  transition: border-color var(--t);
}
.q-rail-seg.done { border-top-color: var(--tealline); }
.q-rail-seg.now  { border-top-color: var(--teal); }
/* Punto sobre el segmento en curso: marca "estamos aquí" sin recurrir a
   otro color más en una barra que ya tiene tres estados. */
.q-rail-seg.now::before {
  content: ""; position: absolute; top: -6px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(11,94,99,.18);
}
.q-rail-day { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; color: var(--muted2); text-transform: uppercase; }
.q-rail-seg.now .q-rail-day { color: var(--teal); font-weight: 700; }
.q-rail-what { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.q-rail-seg.now .q-rail-what { color: var(--ink); font-weight: 600; }

/* =====================================================================
   ENCABEZADO DE PÁGINA
   ===================================================================== */

.q-h { display: flex; align-items: flex-start; gap: 18px; margin: 6px 0 20px; flex-wrap: wrap; }
.q-h h1 { font-family: var(--titulo); font-size: 22px; margin: 0; letter-spacing: -.015em; font-weight: 650; line-height: 1.2; }
.q-h p { margin: 5px 0 0; color: var(--muted); font-size: 13px; max-width: 66ch; }
.q-h-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-h-cifra { text-align: right; }
.q-h-cifra .v { font-family: var(--mono); font-size: 25px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1; }

.q-migas { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.q-migas a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   BOTONES
   ===================================================================== */

.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.q-btn:hover { background: var(--surface2); border-color: #C2CCD5; }
/* El botón cede un pixel al pulsarlo. Es la única animación de la
   interfaz y confirma que el clic llegó, sobre todo en formularios
   largos donde el resultado tarda en verse. */
.q-btn:active { transform: translateY(1px); box-shadow: none; }

.q-btn.pri { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(11,94,99,.28); }
.q-btn.pri:hover { background: var(--teal-hi); border-color: var(--teal-hi); }
.q-btn.go { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(21,101,74,.28); }
.q-btn.go:hover { background: #187a58; border-color: #187a58; }
.q-btn.warn { background: var(--surface); border-color: var(--amberline); color: var(--amber); }
.q-btn.warn:hover { background: var(--ambersoft); }
.q-btn.dang { background: var(--surface); border-color: var(--redline); color: var(--red); }
.q-btn.dang:hover { background: var(--redsoft); }
.q-btn.plano { box-shadow: none; border-color: transparent; background: transparent; }
.q-btn.plano:hover { background: var(--rule3); border-color: var(--rule2); }

.q-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; transform: none; }
.q-btn.sm { padding: 4px 9px; font-size: 12px; gap: 5px; }
.q-btn.lg { padding: 10px 18px; font-size: 14px; }
.q-btn.full { width: 100%; }

/* =====================================================================
   TARJETAS
   ===================================================================== */

.q-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); box-shadow: var(--sh-1);
}
.q-card-h {
  padding: 11px 15px; border-bottom: 1px solid var(--rule2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(180deg, #FCFDFE, var(--surface));
  border-radius: var(--r) var(--r) 0 0;
}
.q-card-t { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.q-card-b { padding: 16px; }
.q-card.destacada { border-color: var(--tealline); box-shadow: 0 0 0 3px rgba(11,94,99,.06), var(--sh-1); }

/* =====================================================================
   TABLAS
   ===================================================================== */

.q-tabla-wrap { overflow-x: auto; border-radius: var(--r); }
.q-table { width: 100%; border-collapse: collapse; }

.q-table th {
  text-align: left; font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted2); font-weight: 700; padding: 10px 13px;
  border-bottom: 1px solid var(--rule); background: var(--surface2);
  white-space: nowrap;
  /* Encabezado fijo: en el histórico completo del grupo la tabla pasa de
     una pantalla y sin esto se pierde qué columna es cuál. */
  position: sticky; top: 0; z-index: 2;
}
.q-table td { padding: 12px 13px; border-bottom: 1px solid var(--rule2); vertical-align: middle; }
.q-table tbody tr:last-child td { border-bottom: none; }
.q-table tbody tr { transition: background var(--t); }
.q-table tbody tr:hover { background: var(--rule3); }

.q-table tbody tr.click { cursor: pointer; }
/* Acento a la izquierda al pasar por encima: indica que la fila entera
   es un enlace, sin subrayar seis celdas. */
.q-table tbody tr.click td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--t); }
.q-table tbody tr.click:hover td:first-child { box-shadow: inset 3px 0 0 var(--tealline); }

.q-table tr.marcada { background: var(--tealsoft) !important; }
.q-table .col-mini { width: 1%; white-space: nowrap; }

.q-num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; letter-spacing: -.02em; }
.q-code { font-family: var(--mono); font-size: 12px; letter-spacing: -.02em; }
.q-fuerte { font-weight: 600; }

.q-empty { padding: 52px 24px; text-align: center; color: var(--muted); }
.q-empty .q-ic { color: var(--muted2); opacity: .55; margin-bottom: 12px; }
.q-empty strong { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 5px; font-weight: 600; }
.q-empty p { margin: 0 auto; max-width: 46ch; font-size: 13px; }

/* =====================================================================
   PÍLDORAS
   ===================================================================== */

.q-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; line-height: 1.35;
}
.q-pill.gray   { background: #EEF1F4; color: var(--muted); border-color: var(--rule); }
.q-pill.teal   { background: var(--tealsoft); color: var(--teal); border-color: var(--tealline); }
.q-pill.amber  { background: var(--ambersoft); color: var(--amber); border-color: var(--amberline); }
.q-pill.green  { background: var(--greensoft); color: var(--green); border-color: var(--greenline); }
.q-pill.red    { background: var(--redsoft); color: var(--red); border-color: var(--redline); }
.q-pill.violet { background: var(--violetsoft); color: var(--violet); border-color: var(--violetline); }
.q-pill.solida { background: var(--teal); color: #fff; border-color: var(--teal); }

/* =====================================================================
   ESCALERA DE COMPUERTAS Y PASOS
   ===================================================================== */

.q-lad { display: inline-flex; gap: 2px; align-items: center; }
.q-lad-s { width: 16px; height: 5px; border-radius: 2px; background: var(--rule); }
.q-lad-s.done { background: var(--tealline); }
.q-lad-s.now  { background: var(--teal); box-shadow: 0 0 0 2px rgba(11,94,99,.15); }
.q-lad-s.paid { background: var(--green); }
.q-lad-s.bad  { background: var(--red); }
.q-lad-lbl { font-size: 10.5px; color: var(--muted); margin-left: 8px; white-space: nowrap; }

.q-steps {
  display: flex; margin: 0 0 20px; border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--sh-1);
}
.q-step { flex: 1; padding: 11px 14px; border-right: 1px solid var(--rule2); position: relative; min-width: 0; }
.q-step:last-child { border-right: none; }
.q-step-n { font-family: var(--mono); font-size: 9.5px; color: var(--muted2); letter-spacing: .06em; }
.q-step-l { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.q-step-d { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 3px; letter-spacing: .02em; }
.q-step.done { background: #F5FAFA; }
.q-step.done .q-step-l { color: var(--teal); }
.q-step.now { background: linear-gradient(180deg, var(--teal-hi), var(--teal)); }
.q-step.now .q-step-l, .q-step.now .q-step-n, .q-step.now .q-step-d { color: #fff; }
.q-step.now .q-step-d { opacity: .85; }
.q-step.bad { background: var(--redsoft); }
.q-step.bad .q-step-l { color: var(--red); }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */

.q-grid  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.q-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }

.q-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-f.full { grid-column: 1 / -1; }
.q-f label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.q-f input, .q-f select, .q-f textarea {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 9px 11px; background: var(--surface); width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.q-f input:hover:not(:disabled), .q-f select:hover:not(:disabled), .q-f textarea:hover { border-color: #BFCAD4; }
.q-f input:focus, .q-f select:focus, .q-f textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: var(--ring);
}
.q-f input:disabled, .q-f select:disabled, .q-f textarea:disabled {
  background: var(--rule3); color: var(--muted); cursor: not-allowed;
}
.q-f textarea { resize: vertical; min-height: 62px; line-height: 1.5; }

/* Flecha propia en los desplegables: la del sistema cambia de forma en
   cada navegador y desalinea la fila de campos. */
.q-f select, select.q-btn {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 32px;
}
select.q-btn { background-color: var(--surface); }

.q-f input.mal, .q-f select.mal, .q-f textarea.mal { border-color: var(--redline); background: #FFFCFC; }
.q-f input.mal:focus, .q-f select.mal:focus, .q-f textarea.mal:focus { box-shadow: 0 0 0 3px rgba(158,46,35,.14); }

.q-f .hint { font-size: 11.5px; color: var(--muted); }
.q-f .err { font-size: 11.5px; color: var(--red); font-weight: 500; display: flex; gap: 5px; align-items: flex-start; }
.q-req::after { content: " *"; color: var(--red); }

/* Campo de dinero: el signo vive en el borde del campo, no dentro del
   valor, para que lo escrito sea solo la cifra. */
.q-money { position: relative; }
.q-money::before {
  content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); color: var(--muted2); font-size: 13px; pointer-events: none;
}
.q-money input { padding-left: 24px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.q-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.q-check input[type=checkbox] { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--teal); cursor: pointer; }

/* Zona para adjuntar: rectángulo punteado que se enciende al arrastrar. */
.q-drop {
  border: 1.5px dashed var(--rule); border-radius: var(--r);
  padding: 22px 18px; text-align: center; background: var(--surface2);
  transition: border-color var(--t), background var(--t);
}
.q-drop:hover, .q-drop.encima { border-color: var(--teal); background: var(--tealsoft); }
.q-drop .q-ic { color: var(--muted2); margin-bottom: 8px; }
.q-drop .t { font-size: 13px; font-weight: 600; }
.q-drop .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* =====================================================================
   AVISOS
   ===================================================================== */

.q-note {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.55; border: 1px solid; border-left-width: 3px;
}
.q-note.info { background: var(--tealsoft); border-color: var(--tealline); border-left-color: var(--teal); color: #0A4A4E; }
.q-note.warn { background: var(--ambersoft); border-color: var(--amberline); border-left-color: var(--amber); color: #6E4805; }
.q-note.dang { background: var(--redsoft); border-color: var(--redline); border-left-color: var(--red); color: #7C231A; }
.q-note.ok   { background: var(--greensoft); border-color: var(--greenline); border-left-color: var(--green); color: #0D4B36; }
.q-note .q-ic { margin-top: 1px; }
.q-note strong { display: block; margin-bottom: 3px; font-size: 13px; }
.q-note ul { margin: 5px 0 0; padding-left: 18px; }
.q-note li { margin-bottom: 2px; }

/* =====================================================================
   MÉTRICAS
   ===================================================================== */

.q-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px,1fr)); gap: 11px; margin-bottom: 20px; }
.q-kpi {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 13px 15px; box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
/* Filete superior de color: identifica el tono de la cifra antes de
   leerla. Neutro por defecto, para no pintar de rojo un tablero entero. */
.q-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rule); }
.q-kpi.ok::before   { background: var(--green); }
.q-kpi.mal::before  { background: var(--red); }
.q-kpi.ojo::before  { background: var(--amber); }
.q-kpi.foco::before { background: var(--teal); }

.q-kpi-l { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.q-kpi-v { font-family: var(--mono); font-size: 23px; font-weight: 600; margin-top: 5px; letter-spacing: -.04em; line-height: 1.1; }
.q-kpi-v.chica { font-size: 17px; }
.q-kpi-s { font-size: 11px; color: var(--muted); margin-top: 3px; }
.q-kpi a { display: block; }
.q-kpi.enlace { transition: border-color var(--t), box-shadow var(--t); }
.q-kpi.enlace:hover { border-color: var(--tealline); box-shadow: var(--sh-2); }

/* =====================================================================
   DETALLE
   ===================================================================== */

.q-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; flex-wrap: wrap; }
.q-tab {
  padding: 9px 15px; border: none; background: none; color: var(--muted);
  font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.q-tab:hover { color: var(--ink); background: var(--rule3); }
.q-tab.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 650; background: transparent; }
.q-tab .n { font-family: var(--mono); font-size: 11px; color: var(--muted2); margin-left: 4px; }

.q-dl { display: grid; grid-template-columns: 176px 1fr; margin: 0; }
.q-dl dt {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; padding: 10px 0; border-bottom: 1px solid var(--rule2);
}
.q-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule2); min-width: 0; }
.q-dl dt:last-of-type, .q-dl dd:last-of-type { border-bottom: none; }

.q-file {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); margin-bottom: 8px;
  background: var(--surface); transition: border-color var(--t), box-shadow var(--t);
}
.q-file:hover { border-color: var(--tealline); box-shadow: var(--sh-1); }
.q-file .q-ic { color: var(--muted2); }
.q-file-n { font-size: 12.5px; font-weight: 500; word-break: break-word; }
.q-file-m { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 1px; }

/* --- línea de tiempo --- */
.q-time { position: relative; padding-left: 24px; }
.q-time::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.q-ev { position: relative; padding: 0 0 18px 0; }
.q-ev::before {
  content: ""; position: absolute; left: -23px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--tealline);
}
.q-ev.hi::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 3px rgba(11,94,99,.15); }
.q-ev.bad::before { border-color: var(--red); background: var(--red); }
.q-ev-h { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.q-ev-a { font-size: 13px; font-weight: 600; }
.q-ev-m { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.q-ev-d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.q-diff {
  font-family: var(--mono); font-size: 11.5px; background: var(--surface2);
  border: 1px solid var(--rule2); border-radius: var(--r-sm); padding: 7px 10px; margin-top: 7px;
}
.q-diff s { color: var(--red); text-decoration: line-through; }
.q-diff b { color: var(--green); font-weight: 600; }

/* =====================================================================
   MODAL
   ===================================================================== */

.q-ov {
  position: fixed; inset: 0; background: rgba(15,32,39,.58);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 44px 16px; z-index: 60; overflow-y: auto;
  animation: q-fade 140ms ease-out;
}
.q-modal {
  background: var(--surface); border-radius: var(--r); width: 100%; max-width: 580px;
  box-shadow: var(--sh-4); animation: q-sube 160ms cubic-bezier(.2,.7,.3,1);
}
.q-modal.ancho { max-width: 760px; }
.q-modal-h { padding: 16px 19px; border-bottom: 1px solid var(--rule2); display: flex; align-items: center; gap: 10px; }
.q-modal-h h3 { margin: 0; font-size: 16px; font-weight: 650; }
.q-modal-b { padding: 19px; }
.q-modal-f {
  padding: 14px 19px; border-top: 1px solid var(--rule2); display: flex; gap: 8px;
  justify-content: flex-end; background: var(--surface2); border-radius: 0 0 var(--r) var(--r);
}

@keyframes q-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes q-sube { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
@keyframes q-entra { from { opacity: 0; transform: translate(-50%, 14px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* =====================================================================
   BARRA FIJA DE ACCIONES
   Se usa en el lote de gerencia: el total seleccionado tiene que estar
   siempre visible, aunque la lista sea larga.
   ===================================================================== */

.q-barra {
  position: sticky; bottom: 14px; z-index: 20;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 12px 16px;
}

/* =====================================================================
   COMPONENTES DEL v2
   ===================================================================== */

/* --- Tarjeta seleccionable (tipo de solicitud, casillas grandes) ---
   Un radio suelto con una etiqueta al lado se pierde entre tres
   opciones; la tarjeta entera es el área de clic y el borde muestra
   cuál quedó elegida. */
.q-cbx {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--r);
  cursor: pointer; background: var(--surface); box-shadow: var(--sh-1);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.q-cbx:hover { border-color: var(--tealline); }
.q-cbx.on { border-color: var(--teal); background: var(--tealsoft); box-shadow: 0 0 0 3px rgba(11,94,99,.10); }
.q-cbx input { margin-top: 2px; accent-color: var(--teal); flex: 0 0 auto; }
.q-cbx .t { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.q-cbx .q-mini { margin-top: 2px; }

/* --- Barra de avance ---
   Se usa para el porcentaje girado de una solicitud y para comparar
   gasto por empresa. Sin números encima: la cifra exacta va al lado. */
.q-bar { height: 7px; background: var(--rule2); border-radius: 999px; overflow: hidden; min-width: 90px; }
.q-bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width var(--t); }

/* --- Campos dentro de una tabla (documentos de la solicitud) --- */
.q-inline {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 7px 9px; background: var(--surface); width: 100%; min-width: 96px;
  transition: border-color var(--t), box-shadow var(--t);
}
.q-inline:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.q-inline.q-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.q-table td .q-inline { margin: 0; }

/* --- Totales de tabla --- */
.q-table tfoot td {
  padding: 12px 13px; border-top: 2px solid var(--rule); font-weight: 650;
  background: var(--surface2);
}

/* --- Campana de avisos ---
   Vive en la barra lateral oscura, encima de la navegación: es lo
   primero que se mira al volver al puesto. */
.q-avisos { position: relative; padding: 10px 10px 0; }
.q-avisos-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: #C9D6E0; font-size: 13px; text-align: left;
  transition: background var(--t), color var(--t);
}
.q-avisos-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.q-avisos-btn .q-nav-count { margin-left: auto; }

.q-avisos-caja {
  position: absolute; left: 10px; right: 10px; top: calc(100% + 4px);
  z-index: 90; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--sh-3); max-height: 62vh; overflow-y: auto;
  animation: q-sube 140ms cubic-bezier(.2,.7,.3,1);
}
.q-avisos-cab {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: 1px solid var(--rule2); position: sticky; top: 0; background: var(--surface);
}
.q-avisos-cab .q-btn { margin-left: auto; }

.q-aviso {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; border-bottom: 1px solid var(--rule3);
  border-left: 3px solid var(--teal); background: var(--surface);
  transition: background var(--t);
}
.q-aviso:hover { background: var(--surface2); }
.q-aviso.devuelta { border-left-color: var(--red); }
.q-aviso.pagada, .q-aviso.abono { border-left-color: var(--green); }
.q-aviso-t { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.q-aviso-m { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.q-aviso-c { font-size: 10.5px; color: var(--muted2); font-family: var(--mono); margin-top: 4px; }

.q-avisos-vacio { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 12.5px; }
.q-avisos-pie {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 11px 13px; border-top: 1px solid var(--rule2);
  background: var(--tealsoft); font-size: 11.5px; color: #0A4A4E;
}
.q-avisos-pie .q-btn { margin-left: auto; }

/* --- Fila de recordatorio ---
   La hora va en un bloque aparte a la izquierda, grande y monoespaciada:
   la pantalla se recorre buscando "¿a qué hora?", no el título. */
.q-rec { display: flex; gap: 16px; align-items: flex-start; padding: 15px 16px; }
.q-rec.con-borde { border-top: 1px solid var(--rule2); }
.q-rec-cuando {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface2); border: 1px solid var(--rule2);
}
.q-rec-cuando .d {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted2);
}
.q-rec-cuando .h {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  letter-spacing: -.03em; margin-top: 1px;
}

/* --- Bloques desplegables (devolver, rechazar, legalizar, movimiento) ---
   <details> nativo: se abre sin JavaScript y no pierde lo escrito. */
details.q-card > summary {
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--t);
}
details.q-card > summary::-webkit-details-marker { display: none; }
details.q-card > summary:hover { background: var(--surface2); }
details.q-card[open] > summary { border-bottom: 1px solid var(--rule2); }
details.q-card[open] > summary .q-mini:last-child { visibility: hidden; }

/* =====================================================================
   MISCELÁNEOS
   ===================================================================== */

.q-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r);
  font-size: 13px; z-index: 80; box-shadow: var(--sh-3);
  display: flex; gap: 10px; align-items: center;
  animation: q-entra 200ms cubic-bezier(.2,.7,.3,1);
}
.q-toast.dang { background: var(--red); }
.q-toast.warn { background: var(--amber); }

.q-search {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 6px 11px; background: var(--surface);
  box-shadow: var(--sh-1); transition: border-color var(--t), box-shadow var(--t);
}
.q-search:focus-within { border-color: var(--teal); box-shadow: var(--ring); }
.q-search .q-ic { color: var(--muted2); }
.q-search input { border: none; outline: none; width: 210px; background: transparent; }

.q-chk { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13px; }
.q-chk .q-ic { margin-top: 2px; }
.q-chk + .q-chk { border-top: 1px solid var(--rule3); }

.q-mini { font-size: 11px; color: var(--muted); }
.q-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.q-sep { height: 1px; background: var(--rule2); margin: 20px 0; }
.q-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.q-ok { color: var(--green); }
.q-bad { color: var(--red); }
.q-warn { color: var(--amber); }
.q-teal { color: var(--teal); }

/* =====================================================================
   CAJA MENOR — clases del módulo
   ===================================================================== */

.q-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; flex-wrap: wrap; }
.q-head h1 { font-size: 22px; margin: 0; letter-spacing: -.015em; font-weight: 650; line-height: 1.2; }
.q-head .q-btn { margin-left: auto; }

.q-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; line-height: 1.35;
}
.q-badge.neutro { background: #EEF1F4; color: var(--muted); border-color: var(--rule); }
.q-badge.teal   { background: var(--tealsoft); color: var(--teal); border-color: var(--tealline); }
.q-badge.amber  { background: var(--ambersoft); color: var(--amber); border-color: var(--amberline); }
.q-badge.green  { background: var(--greensoft); color: var(--green); border-color: var(--greenline); }
.q-badge.red    { background: var(--redsoft); color: var(--red); border-color: var(--redline); }
.q-badge.violet { background: var(--violetsoft); color: var(--violet); border-color: var(--violetline); }

.q-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: -1px; flex: 0 0 auto;
}

.q-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 11px; }
.q-card-sm {
  padding: 13px 15px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--sh-1);
}
.q-card-lbl { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.q-card-val { font-family: var(--mono); font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -.03em; line-height: 1.1; }

.q-bar-track {
  position: relative; height: 10px; background: var(--rule2);
  border-radius: 999px; overflow: hidden;
}
.q-bar-fill { height: 100%; border-radius: 999px; transition: width var(--t); }
.q-bar-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--ink); letter-spacing: .03em;
}

.q-form { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.q-form-pie { display: flex; gap: 8px; padding-top: 8px; align-items: center; }

.q-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.q-input {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 9px 11px; background: var(--surface); width: 100%;
  font-family: inherit; font-size: 14px; color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}
.q-input:hover:not(:disabled) { border-color: #BFCAD4; }
.q-input:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.q-input:disabled { background: var(--rule3); color: var(--muted); cursor: not-allowed; }

.q-hint { font-size: 11.5px; color: var(--muted); }

.q-btn.sec { background: var(--surface); border-color: var(--tealline); color: var(--teal); }
.q-btn.sec:hover { background: var(--tealsoft); }

.q-table th.num, .q-table td.num { text-align: right; }
.q-table td.cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.q-table td.muted, .q-table .muted { color: var(--muted); }

/* =====================================================================
   PANTALLA DE INGRESO
   ===================================================================== */

.q-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(1,113,127,.40), transparent 62%),
    linear-gradient(160deg, #0F2027, #0A3540);
}
.q-login-box { width: 100%; max-width: 392px; }
.q-login-brand { text-align: center; margin-bottom: 24px; }
.q-login-brand .n { font-size: 20px; font-weight: 700; letter-spacing: .19em; color: #fff; }
.q-login-brand .s { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--sobre-suave); margin-top: 6px; }
.q-login-card { background: var(--surface); border-radius: 14px; padding: 28px 26px; box-shadow: var(--sh-4); }
.q-login-card h1 { font-family: var(--titulo); font-size: 18px; margin: 0 0 5px; font-weight: 650; }
.q-login-card p.sub { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); }
.q-login-foot { text-align: center; margin-top: 18px; font-size: 11px; color: var(--sobre-suave); line-height: 1.65; }

/* =====================================================================
   PANTALLAS ANGOSTAS
   ===================================================================== */

.q-burger { display: none; }

@media (max-width: 980px) {
  .q-side { position: fixed; left: -250px; z-index: 70; transition: left 200ms ease; box-shadow: var(--sh-4); }
  .q-side.open { left: 0; }
  .q-burger {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 75;
    background: #0F2027; color: #fff; border: none; border-radius: var(--r-sm);
    padding: 9px 11px; box-shadow: var(--sh-2);
  }
  .q-grid, .q-grid3 { grid-template-columns: 1fr; }
  .q-steps { flex-wrap: wrap; }
  .q-step { flex: 1 1 33%; }
  .q-dl { grid-template-columns: 1fr; }
  .q-dl dt { border-bottom: none; padding-bottom: 0; }
  .q-content { padding: 54px 14px 72px; }
  .q-rail { padding: 12px 14px 0; position: static; }
  .q-rail-track { overflow-x: auto; }
  .q-rail-seg { min-width: 124px; }
  .q-h-actions { margin-left: 0; width: 100%; }
  .q-table th { position: static; }
}

/* =====================================================================
   MODO OSCURO
   Activado por el usuario con data-tema="oscuro" en <html>.
   ===================================================================== */

html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"] .q-app {
  --ink: #E6EFF0; --ink2: #D0DEE0; --ink3: #B8CDD0;
  --paper: #0E1518; --surface: #182327; --surface2: #1E2C31;
  --rule: #2D3E44; --rule2: #243438; --rule3: #1C2B30;
  --muted: #9AAFB4; --muted2: #6E878E;
  --teal: #5FD3DC; --teal-hi: #7DE4EC; --teal-dark: #5FD3DC;
  --tealsoft: #123037; --tealline: #1E5C66;
  --mint: #6FE0BC; --mint-d: #6FE0BC;
  --amber: #F0C070; --ambersoft: #33280F; --amberline: #5A4517;
  --green: #6FE0BC; --greensoft: #0F3128; --greenline: #1E5545;
  --red: #FF9C93; --redsoft: #3A1714; --redline: #67241F;
  --violet: #C3A8F0; --violetsoft: #2A1F42; --violetline: #4A3870;
  --marca: #5FD3DC; --marca-claro: #5FD3DC;
  --sobre-fuerte: #E3F2F3; --sobre-suave: #84B4BA;
  --sh-1: 0 1px 3px rgba(0,0,0,.30);
  --sh-2: 0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --sh-3: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --sh-4: 0 22px 60px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(95,211,220,.22);
  background: var(--paper); color: var(--ink);
}
html[data-tema="oscuro"] .q-side {
  background: linear-gradient(160deg, #0A1013, #141F23);
}
html[data-tema="oscuro"] .q-card {
  background: var(--surface); border-color: var(--rule);
}
html[data-tema="oscuro"] .q-h h1,
html[data-tema="oscuro"] .q-head h1,
html[data-tema="oscuro"] .q-card h2,
html[data-tema="oscuro"] .q-card h3,
html[data-tema="oscuro"] .q-kpi-v { color: #F2F8F8; }
html[data-tema="oscuro"] .q-kpi-v { color: var(--marca-claro); }
html[data-tema="oscuro"] .q-kpi { border-color: var(--rule); }
html[data-tema="oscuro"] .q-table tbody tr:hover { background: #1E2C31; }
html[data-tema="oscuro"] .q-toast { background: #1E2C31; }
html[data-tema="oscuro"] .q-btn.pri { background: var(--marca-claro); color: #0B1215; }
html[data-tema="oscuro"] .q-btn.dang { background: #3D1B18; color: #FF9C93; border-color: #67241F; }
html[data-tema="oscuro"] .q-f input,
html[data-tema="oscuro"] .q-f select,
html[data-tema="oscuro"] .q-f textarea,
html[data-tema="oscuro"] .q-input,
html[data-tema="oscuro"] .q-inline { background: #111B1F; border-color: var(--rule); color: var(--ink); }
html[data-tema="oscuro"] .q-f input::placeholder,
html[data-tema="oscuro"] .q-f textarea::placeholder { color: #7B9096; }
html[data-tema="oscuro"] .q-login {
  background: radial-gradient(900px 500px at 50% -10%, rgba(95,211,220,.15), transparent 62%),
              linear-gradient(160deg, #080E11, #0E1518);
}
html[data-tema="oscuro"] .q-login-card { background: var(--surface); }
html[data-tema="oscuro"] .q-ov { background: rgba(0,0,0,.65); }
html[data-tema="oscuro"] .q-pill.gray { background: #1E2C31; color: var(--muted); border-color: var(--rule); }
html[data-tema="oscuro"] .q-badge.neutro { background: #1E2C31; color: var(--muted); border-color: var(--rule); }
html[data-tema="oscuro"] .q-avisos-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
html[data-tema="oscuro"] .q-search { background: #111B1F; border-color: var(--rule); }
html[data-tema="oscuro"] .q-drop { background: #152227; border-color: var(--rule); }
html[data-tema="oscuro"] .q-note.info { background: #123037; border-color: #1E5C66; color: #B8E8EC; }
html[data-tema="oscuro"] .q-note.warn { background: #33280F; border-color: #5A4517; color: #F0C070; }
html[data-tema="oscuro"] .q-note.dang { background: #3A1714; border-color: #67241F; color: #FF9C93; }
html[data-tema="oscuro"] .q-note.ok { background: #0F3128; border-color: #1E5545; color: #6FE0BC; }
html[data-tema="oscuro"] .q-btn.sec { background: #1E2C31; border-color: #1E5C66; color: var(--marca-claro); }
html[data-tema="oscuro"] .q-btn.sec:hover { background: #123037; }

@media (prefers-reduced-motion: reduce) {
  .q-app *, .q-app *::before, .q-app *::after {
    transition: none !important; animation: none !important;
  }
}

/* =====================================================================
   IMPRESIÓN
   Una solicitud aprobada se imprime para archivarla con el soporte
   físico: fuera la navegación y los botones, que no aportan en papel.
   ===================================================================== */

@media print {
  .q-side, .q-rail, .q-h-actions, .q-burger, .q-toast, .q-tabs, .q-barra, .q-no-imprimir { display: none !important; }
  .q-app { background: #fff; font-size: 11.5px; }
  .q-content { padding: 0; max-width: none; }
  .q-card { break-inside: avoid; box-shadow: none; border-color: #BBB; }
  .q-table th { position: static; }
  a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------------
   Accesibilidad: saltar al contenido y textos solo para lectores
   El enlace vive fuera de la pantalla hasta que alguien lo enfoca con el
   teclado. Quien navega con tabulador no tiene que recorrer todo el menu
   en cada pagina para llegar a lo que vino a hacer.
   --------------------------------------------------------------------- */
.qbk-saltar{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:#0F2027;color:#fff;padding:10px 16px;border-radius:0 0 4px 0;
  font:600 14px/1 ui-sans-serif,"Segoe UI",system-ui,sans-serif;text-decoration:none;
}

/* --- Botón de tema claro/oscuro --- */
.q-tema-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.10); border: none; border-radius: 9px;
  color: var(--sobre-fuerte); padding: 9px 13px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; font-family: inherit; width: 100%;
  justify-content: center; margin-top: 12px;
  transition: background var(--t);
}
.q-tema-btn:hover { background: rgba(255,255,255,.16); }
.qbk-saltar:focus{left:0;}
.qbk-solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =====================================================================
   GRÁFICA DE TENDENCIA
   Una sola serie, del color de la marca. La rejilla y los rótulos van
   en tinta apagada: quien mira busca la forma de la línea, no la
   cuadrícula. El SVG se estira con la tarjeta y conserva el alto.
   ===================================================================== */

.q-graf { position: relative; padding: 16px 17px 6px; }
/* Escala uniforme: con height auto el círculo sigue siendo un círculo */
.q-graf svg { display: block; width: 100%; height: auto; overflow: visible; }

.q-graf-rejilla { stroke: var(--rule2); stroke-width: 1; }
.q-graf-eje {
  fill: var(--muted); font-family: var(--sans);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.q-graf-linea {
  fill: none; stroke: var(--teal); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* El aro del color del papel despega el punto del relleno */
.q-graf-punto { fill: var(--teal); stroke: var(--surface); stroke-width: 2; }
.q-graf-zona  { fill: transparent; cursor: crosshair; }
.q-graf-cruz  { stroke: var(--tealline); stroke-width: 1; stroke-dasharray: 3 3; }

.q-graf-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-sm); box-shadow: var(--sh-3);
  padding: 8px 11px; min-width: 128px;
  transform: translate(-50%, -100%); margin-top: -9px;
}
.q-graf-tip-m {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.q-graf-tip-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 3px;
}
.q-graf-tip-n { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* =====================================================================
   BUSCADOR (Ctrl+K)
   Una sola caja para llegar a cualquier cosa sin recorrer el menú:
   consecutivo, tercero, gasto de caja o persona. Se abre sobre lo que
   haya en pantalla y se cierra con Escape.
   ===================================================================== */

.q-buscador-ov {
  position: fixed; inset: 0; background: rgba(15,32,39,.58);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 74px 16px 24px; z-index: 90; overflow-y: auto;
  animation: q-fade 120ms ease-out;
}
.q-buscador {
  background: var(--surface); border-radius: var(--r); width: 100%; max-width: 620px;
  box-shadow: var(--sh-4); animation: q-sube 140ms cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
.q-buscador-caja {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px; border-bottom: 1px solid var(--rule2);
}
.q-buscador-caja svg { color: var(--muted2); flex: 0 0 auto; }
.q-buscador-caja input {
  flex: 1; border: none; background: none; outline: none;
  font: 500 16px/1.3 var(--sans); color: var(--ink);
}
.q-buscador-caja input::placeholder { color: var(--muted2); font-weight: 400; }
.q-buscador-esc {
  flex: 0 0 auto; font: 600 10px/1 var(--mono); color: var(--muted);
  background: var(--rule3); border: 1px solid var(--rule2);
  border-radius: 5px; padding: 5px 7px;
}

.q-buscador-res { max-height: 58vh; overflow-y: auto; }
.q-buscador-grupo {
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  padding: 13px 17px 6px;
}
.q-buscador-item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 17px; cursor: pointer; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.q-buscador-item:hover,
.q-buscador-item.sel { background: var(--tealsoft); border-left-color: var(--teal); }
.q-buscador-item-txt { flex: 1; min-width: 0; }
.q-buscador-item-t {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-buscador-item-d {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-buscador-item-r { flex: 0 0 auto; text-align: right; }
.q-buscador-item-c {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600; color: var(--ink2);
}
.q-buscador-item-e { font-size: 10px; color: var(--muted); margin-top: 2px; }

.q-buscador-vacio { padding: 34px 17px; text-align: center; color: var(--muted); font-size: 13px; }
.q-buscador-pie {
  display: flex; align-items: center; gap: 15px;
  padding: 9px 17px; border-top: 1px solid var(--rule2);
  background: var(--surface2); font-size: 10.5px; color: var(--muted);
}
.q-buscador-pie kbd {
  font: 600 9.5px/1 var(--mono); background: var(--surface);
  border: 1px solid var(--rule2); border-radius: 4px; padding: 3px 5px;
  margin-right: 4px;
}

/* El atajo vive en el menú: quien no sabe que existe, lo descubre ahí */
.q-buscar-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px; padding: 9px 12px; margin-bottom: 12px;
  color: var(--sobre-suave); font: 500 12.5px/1 var(--sans);
  cursor: pointer; text-align: left; transition: background var(--t);
}
.q-buscar-btn:hover { background: rgba(255,255,255,.14); color: var(--sobre-fuerte); }
.q-buscar-btn span { flex: 1; }
.q-buscar-btn kbd {
  font: 600 9.5px/1 var(--mono); background: rgba(255,255,255,.12);
  border-radius: 4px; padding: 4px 5px; color: inherit;
}

html[data-tema="oscuro"] .q-buscador-item:hover,
html[data-tema="oscuro"] .q-buscador-item.sel { background: #123037; }
html[data-tema="oscuro"] .q-buscador-esc,
html[data-tema="oscuro"] .q-buscador-pie kbd { background: #111B1F; border-color: var(--rule); }

/* =====================================================================
   TELÉFONO
   Una tabla de ocho columnas no cabe en 375px y el desplazamiento
   horizontal esconde justo lo que se vino a mirar. Debajo de 640px las
   filas dejan de ser filas: cada una pasa a ser una tarjeta con su
   etiqueta al lado del dato. Las tablas que lo quieran piden el cambio
   con la clase .card-movil; las demás siguen desplazándose.
   ===================================================================== */

@media (max-width: 640px) {

  /* --- Tabla que se vuelve lista de tarjetas --- */
  .q-table.card-movil thead { display: none; }

  .q-table.card-movil,
  .q-table.card-movil tbody,
  .q-table.card-movil tr,
  .q-table.card-movil td { display: block; width: 100%; }

  .q-tabla-wrap:has(.card-movil) { overflow-x: visible; }

  .q-table.card-movil tr {
    border: 1px solid var(--rule2);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    padding: 3px 0;
    background: var(--surface);
  }
  .q-table.card-movil tr:last-child { margin-bottom: 0; }
  .q-table.card-movil tbody tr.click:hover td:first-child { box-shadow: none; }

  .q-table.card-movil td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 13px;
    border-bottom: none;
    text-align: right;
    max-width: none !important;
  }

  /* La etiqueta la pone el dato: así el marcado no repite texto */
  .q-table.card-movil td[data-l]::before {
    content: attr(data-l);
    flex: 0 0 auto;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
  }

  /* La primera celda es el titular de la tarjeta, no un dato más */
  .q-table.card-movil td:first-child {
    background: var(--rule3);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 9px 13px;
    margin-bottom: 3px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .q-table.card-movil td:first-child::before { display: none; }

  /* El galón de "ver detalle" no aporta cuando la fila entera es tocable */
  .q-table.card-movil td.col-mini { display: none; }

  /* --- Objetivos táctiles --- */
  .q-btn { min-height: 42px; padding-inline: 15px; }
  .q-btn.sm { min-height: 36px; }
  .q-nav-item { padding-block: 12px; }
  .q-f input, .q-f select, .q-f textarea { min-height: 44px; font-size: 16px; }

  /* --- Gráfica ---
     Encogida a 375px el rótulo del eje caería a 5px y no se leería.
     Conserva un ancho mínimo y se recorre con el dedo. */
  .q-graf { overflow-x: auto; padding: 14px 13px 6px; }
  .q-graf svg { min-width: 580px; }

  /* --- Respiro y ritmo --- */
  .q-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .q-kpi-v { font-size: 19px; }
  .q-kpi-v.chica { font-size: 15px; }
  .q-content { padding: 54px 11px 80px; }
  .q-h h1, .q-head h1 { font-size: 21px; }
  .q-h-actions { flex-wrap: wrap; }
  .q-h-actions .q-btn { flex: 1 1 auto; justify-content: center; }
}

/* Debajo de 380px el KPI de dos columnas aprieta demasiado la cifra */
@media (max-width: 380px) {
  .q-kpis { grid-template-columns: 1fr; }
}