/* ═══════════════════════════════════════════════════════════════════════
   Quieren Data? — app.css
   El marco de aplicación del espacio privado de cada organización.

   Esto NO es el sitio público. Las páginas de `teatros/` cargan tokens.css,
   components.css y este archivo, y NO cargan sitio.css: el espacio de cada
   teatro tiene que sentirse una app, no una página más del sitio.

   Todos los colores y tipografías salen de tokens.css. Si hace falta un color
   nuevo, se agrega al design system, no acá.

   Cómo está pensado:
     · Celular  → barra arriba con la organización, pestañas fijas abajo.
     · Pantalla → columna lateral fija a la izquierda, contenido a la derecha.
   Es el mismo HTML: cambia solo el CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Medidas propias de la app ──────────────────────────────────────── */
:root {
  --qd-lateral: 268px;         /* ancho de la columna lateral en pantalla */
  --qd-barra-inf: 62px;        /* alto de las pestañas del celular */
  --qd-app-max: 1080px;        /* ancho máximo del contenido */
  --qd-borde: 1px solid var(--line);
}

/* ── Base ───────────────────────────────────────────────────────────── */
.qd-app,
.qd-app-simple {
  margin: 0;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.qd-app *,
.qd-app-simple * { box-sizing: border-box; }

.qd-app img,
.qd-app svg { max-width: 100%; }

.qd-saltar-app {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--surface);
  padding: var(--space-2) var(--space-3);
  z-index: 60;
}
.qd-saltar-app:focus { left: var(--space-3); top: var(--space-3); }

.qd-app a:focus-visible,
.qd-app button:focus-visible,
.qd-app select:focus-visible,
.qd-app input:focus-visible,
.qd-app-simple a:focus-visible,
.qd-app-simple button:focus-visible,
.qd-app-simple select:focus-visible,
.qd-app-simple input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── El armazón ─────────────────────────────────────────────────────── */
.qd-app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Sigla de la organización: el bloque de color de la marca ───────── */
.qd-sigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.qd-sigla--grande { width: 56px; height: 56px; font-size: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR: barra arriba, pestañas abajo
   ═══════════════════════════════════════════════════════════════════════ */

.qd-barra-sup {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: var(--qd-borde);
}

.qd-barra-sup-org {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.qd-barra-sup-nombre {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qd-barra-sup-acciones { margin-left: auto; display: flex; gap: var(--space-1); }

.qd-barra-inf {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: var(--qd-borde);
  padding-bottom: env(safe-area-inset-bottom);
}

.qd-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--qd-barra-inf);
  padding: var(--space-1);
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
}
.qd-tab svg { width: 22px; height: 22px; display: block; }
.qd-tab[aria-current="page"] { color: var(--ink); font-weight: 700; }
.qd-tab[aria-current="page"] svg { stroke-width: 2.4; }
.qd-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  margin-top: -1px;
  align-self: center;
  width: 26px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--brand);
  transform: translateY(calc(var(--qd-barra-inf) / -2 + 1px));
}

/* La columna lateral no existe en el celular. */
.qd-lateral { display: none; }

/* ── Contenido ──────────────────────────────────────────────────────── */
.qd-app-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-4) var(--space-3) calc(var(--qd-barra-inf) + var(--space-5));
}
.qd-app-contenido { max-width: var(--qd-app-max); margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLA GRANDE: columna lateral fija
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  .qd-app-shell { flex-direction: row; }

  .qd-barra-sup,
  .qd-barra-inf { display: none; }

  .qd-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: var(--qd-lateral);
    flex: 0 0 var(--qd-lateral);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-4) var(--space-3);
    border-right: var(--qd-borde);
    overflow-y: auto;
  }

  .qd-app-main {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
  .qd-app-contenido { margin: 0; }
}

.qd-lateral-marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qd-lateral-marca img { width: 28px; height: 28px; border-radius: var(--radius-sm); }

.qd-lateral-org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--qd-borde);
  border-bottom: var(--qd-borde);
}
.qd-lateral-org-nombre {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.qd-lateral-org-tipo {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.qd-nav-lateral { display: flex; flex-direction: column; gap: 2px; }
.qd-nav-lateral-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.4;
}
.qd-nav-lateral-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.qd-nav-lateral-item:hover { background: var(--line); color: var(--ink); }
.qd-nav-lateral-item[aria-current="page"] {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}

.qd-lateral-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--qd-borde);
  font-size: 12px;
}
.qd-lateral-pie p { margin: 0; overflow-wrap: anywhere; }
.qd-lateral-pie a { color: var(--link-strong); }

/* Los links sueltos de adentro de una tarjeta o de un aviso. Los que ya
   tienen su propio color (botones, acciones, navegación) quedan afuera. */
.qd-tarjeta a:not(.qd-btn-app):not(.qd-accion),
.qd-aviso a { color: var(--link-strong); }

/* ── Botón de claro/oscuro y salir ──────────────────────────────────── */
.qd-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 40px;
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: var(--qd-borde);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.qd-accion:hover { border-color: var(--ink); color: var(--ink); }
.qd-accion svg { width: 18px; height: 18px; }
.qd-accion--ancha { width: 100%; }

/* El interruptor de claro/oscuro trae los dos estados escritos y se muestra
   el que corresponde. Sin JavaScript de por medio: el atributo data-theme de
   la raíz decide, y es el mismo que usan los tokens. */
.qd-solo-claro,
.qd-solo-oscuro { display: inline-flex; align-items: center; gap: var(--space-2); }
[data-theme="dark"] .qd-solo-claro { display: none; }
[data-theme="light"] .qd-solo-oscuro { display: none; }

/* Los iconos son trazo, nunca relleno: así toman el color del texto. */
.qd-app svg[data-icono],
.qd-app-simple svg[data-icono] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA DE LA APP
   ═══════════════════════════════════════════════════════════════════════ */

.qd-app-kicker {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
}

.qd-app-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink);
}

.qd-app-subtitulo {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}

.qd-app-texto { margin: 0 0 var(--space-3); max-width: 62ch; }
.qd-app-texto a { color: var(--link-strong); text-decoration: underline; text-underline-offset: 3px; }

.qd-app-nota {
  margin: var(--space-3) 0 0;
  font-size: 12px;
  line-height: 1.6;
  max-width: 68ch;
}
.qd-app-nota a { color: var(--link-strong); }

.qd-app code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--line);
  color: var(--ink);
}
.qd-app-simple code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--line);
  color: var(--ink);
}

.qd-app-cabecera { margin-bottom: var(--space-4); }
.qd-app-seccion { margin-top: var(--space-5); }
.qd-app-seccion:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   TARJETAS, CIFRAS, AVISOS
   ═══════════════════════════════════════════════════════════════════════ */

.qd-tarjeta {
  background: var(--surface-card);
  border: var(--qd-borde);
  border-radius: var(--radius-block);
  padding: var(--space-4) var(--space-3);
  margin: 0 0 var(--space-3);
}
@media (min-width: 640px) {
  .qd-tarjeta { padding: var(--space-4); }
}

/* Cifras del tablero.
   El número manda: "$1.593.000" necesita su ancho. Por eso las columnas se
   acomodan solas a partir de un mínimo en vez de ser siempre cuatro — con
   cuatro fijas, en una pantalla mediana la recaudación quedaba cortada. */
.qd-cifras-app {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}
@media (min-width: 720px) {
  .qd-cifras-app { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
}

.qd-cifra-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-card);
  border: var(--qd-borde);
  border-radius: var(--radius-block);
}
.qd-cifra-app-etiqueta {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qd-cifra-app-valor {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(21px, 5vw, 26px);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* Red de seguridad: si algún día llega una cifra más larga que estas,
     que se parta en dos líneas y no que se salga de la tarjeta. */
  overflow-wrap: anywhere;
}
.qd-cifra-app-pie { font-size: 12px; line-height: 1.45; }

/* Chips: el color va de fondo, nunca de texto. Así cumplen contraste. */
.qd-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--line);
  color: var(--ink);
}
.qd-chip--bien  { background: var(--brand);         color: var(--on-brand); }
.qd-chip--mal   { background: var(--accent-red);    color: var(--on-accent); }
.qd-chip--medio { background: var(--accent-yellow); color: var(--on-accent); }
.qd-chip--info  { background: var(--accent-cyan);   color: var(--on-accent); }

/* Avisos: un filete de color a la izquierda, texto siempre legible. */
.qd-aviso {
  display: block;
  padding: var(--space-3);
  margin: 0 0 var(--space-2);
  background: var(--surface-card);
  border: var(--qd-borde);
  border-left: 4px solid var(--accent-yellow);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  text-decoration: none;
}
.qd-aviso b, .qd-aviso strong { color: var(--ink); }
.qd-aviso--alerta { border-left-color: var(--accent-red); }
.qd-aviso--bien   { border-left-color: var(--brand); }
.qd-aviso--info   { border-left-color: var(--accent-cyan); }
a.qd-aviso:hover { border-color: var(--ink); }
.qd-aviso-pie {
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
}

.qd-app-aviso {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--qd-borde);
  border-left: 4px solid var(--brand);
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.qd-app-aviso--bien { border-left-color: var(--brand); }
.qd-app-aviso--mal  { border-left-color: var(--accent-red); }

/* ═══════════════════════════════════════════════════════════════════════
   LISTA DE INFORMES
   ═══════════════════════════════════════════════════════════════════════ */

.qd-lista-informes { display: grid; gap: var(--space-2); }
@media (min-width: 720px) {
  .qd-lista-informes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

.qd-informe-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
  border: var(--qd-borde);
  border-radius: var(--radius-block);
  text-decoration: none;
  color: var(--text-body);
}
.qd-informe-app:hover { border-color: var(--ink); }
.qd-informe-app-alto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qd-informe-app-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
}
.qd-informe-app-bajada { margin: 0; font-size: 13px; line-height: 1.55; }
.qd-informe-app-pie {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 12px;
  color: var(--ink);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   VISOR DE INFORMES
   El informe es una página completa hecha aparte. Se muestra dentro del
   marco de la app, a pantalla entera, para que no se pierda la navegación.
   ═══════════════════════════════════════════════════════════════════════ */

/* El visor ocupa la pantalla exacta y el que hace scroll es el informe, no la
   página. Se reparte con flex en vez de restar alturas a mano: así funciona
   igual con la barra del celular, con la muesca y con la columna lateral. */
.qd-visor-shell { height: 100vh; height: 100dvh; overflow: hidden; }
.qd-visor-shell .qd-app-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}
.qd-visor-shell .qd-app-contenido {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
}

.qd-visor-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--qd-borde);
  background: var(--surface);
}
.qd-visor-titulo {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qd-visor-acciones { margin-left: auto; display: flex; gap: var(--space-1); flex: 0 0 auto; }

.qd-visor-marco {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════════════ */

.qd-login-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-4);
}

.qd-login-tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--surface-card);
  border: var(--qd-borde);
  border-radius: var(--radius-block);
  padding: var(--space-4) var(--space-3);
}
@media (min-width: 640px) {
  .qd-login-tarjeta { padding: var(--space-5) var(--space-4); }
}

.qd-login-app-org {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.qd-login-app-org p { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
/* Solo el span de adentro del párrafo: el bloque de la sigla también es un
   span y si esta regla lo alcanzara le rompería el centrado. */
.qd-login-app-org p span { display: block; font-weight: 400; font-size: 12px; }

.qd-login-app-marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qd-login-app-marca img { width: 32px; height: 32px; border-radius: var(--radius-sm); }

.qd-login-app-pie {
  width: 100%;
  max-width: 420px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.qd-login-app-pie a { color: var(--link-strong); }

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════════════════ */

.qd-campo-app { display: block; margin-bottom: var(--space-3); }
.qd-campo-app > span {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.qd-campo-app input,
.qd-campo-app select {
  width: 100%;
  /* 16px o más: menos que eso y el celular hace zoom solo al tocar el campo. */
  font-size: 16px;
  font-family: var(--font-mono);
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  min-height: 46px;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
}
.qd-campo-app small {
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.5;
}

.qd-btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--on-brand);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.qd-btn-app:disabled { opacity: 0.55; cursor: not-allowed; }

.qd-btn-texto {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--link-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.qd-bloque-codigo {
  margin: 0;
  padding: var(--space-3);
  background: var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERRAMIENTA DE CLAVES (solo corre en la máquina de Julián)
   ═══════════════════════════════════════════════════════════════════════ */

.qd-herramienta {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.qd-lista-estado { list-style: none; margin: 0; padding: 0; }
.qd-lista-estado li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--qd-borde);
}
.qd-lista-estado li:last-child { border-bottom: 0; }
.qd-lista-estado-nombre { font-weight: 700; color: var(--ink); }
.qd-lista-estado-usuario { font-size: 12px; margin-left: auto; }

/* ── Tabla simple, por si algún tablero la necesita ─────────────────── */
.qd-tabla-app { width: 100%; border-collapse: collapse; font-size: 13px; }
.qd-tabla-app th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: var(--qd-borde);
}
.qd-tabla-app td {
  padding: var(--space-2);
  border-bottom: var(--qd-borde);
  font-variant-numeric: tabular-nums;
}
.qd-tabla-app td:first-child { color: var(--ink); }
.qd-tabla-envoltorio { overflow-x: auto; }

/* ── Lo que no se imprime ───────────────────────────────────────────── */
@media print {
  .qd-lateral, .qd-barra-sup, .qd-barra-inf, .qd-visor-barra { display: none !important; }
  .qd-app-main { padding: 0 !important; }
}