/* =====================================================================
   VetUy · ajustes 3c.1 (pedido de Jorge, 25/10/2026). Se carga DESPUÉS de ajustes_3b10.css (templates/_v3_head.html).
   Puntos 1 y 2: solo el Panel (templates/menu_panel.html); punto 3: toda la app del personal en la PC.
   Solo medidas: vale igual en modo día y en modo noche.
   1. Accesos directos de arriba (.panel-accesos: buscador, Nuevo socio, Historia clínica, Venta, Turnos de hoy,
      Orden por turno, Videoconsulta, Fotos subidas, Instalar app): en la PC van en UNA sola fila.
      - botones compactos: letra de 12 px, 9 px de costado, 40 px de alto, ícono y texto a 5 px; los números rojos
        (turnos pedidos, fotos sin revisar) siguen, un poco más chicos. El buscador se achica primero (de 320 px
        hasta 96 px).
      - con el lugar de una pantalla de 1480 px o más (con la lateral abierta): todos con ícono y texto.
      - más angosta (por ejemplo 1280, 1366 o 1440 px): los cuatro menos usados (Orden por turno, Videoconsulta,
        Fotos subidas e Instalar app, clase .panel-acc-sec) quedan solo con el ícono, en un botón de 40 x 40; el
        nombre sale al pasar el mouse (title) y el lector de pantalla lo sigue leyendo (el texto queda, con letra 0).
      - si ni así entran (menos de 1150 px de pantalla, por ejemplo una tablet acostada), todos vuelven a tener su
        nombre y siguen en una segunda fila (compactos); nunca hay barra de desplazamiento al costado.
      En el celular y en la tablet sin lateral (menos de 1000 px) no cambia nada.
      (Con la escala del punto 3, una PC de 1200 px o más ya tiene lugar de 1790 px o más: todos con ícono y texto.
      Los escalones de arriba quedan para cuando no hay escala: "texto grande", pantalla táctil o 1000 a 1199 px.)
   2. Números grandes de las tarjetas del Panel (.kpi: Cobrado en <mes>, Por cobrar, Socios nuevos, Consultas): el
      número siempre entra en su tarjeta, en una sola línea, hasta "$9.999.999,99". La letra es la de siempre, salvo
      que la tarjeta sea angosta: entonces es como mucho el 14 % del ancho de la tarjeta (14cqi; ese número mide
      6,9 veces la letra, así que ocupa el 97 %). Las cuatro tarjetas de una fila quedan con la misma letra.
      En el celular (dos columnas) la fila de abajo (Socios nuevos, Consultas: números cortos) puede ir hasta el 24 %.
   ===================================================================== */
@container app (min-width: 1000px) {
  .panel-accesos { flex-wrap: nowrap !important; gap: 6px !important; }
  .panel-accesos > .position-relative { flex: 1 1 160px; min-width: 96px !important; max-width: 320px !important; }
  .panel-accesos > .btn { flex: 0 0 auto; gap: 5px; min-height: 40px; padding: 0 9px; font-size: .75rem; letter-spacing: 0; }
  .panel-accesos > .btn > i { margin: 0 !important; font-size: .95rem; }
  .panel-accesos > .btn > .badge { margin: 0 !important; font-size: .68rem; padding: .3em .5em; letter-spacing: 0; }
}
@container app (min-width: 1150px) and (max-width: 1479.98px) {
  .panel-accesos > .btn.panel-acc-sec { font-size: 0; gap: 0; min-width: 40px; padding: 0 12px; }
  .panel-accesos > .btn.panel-acc-sec > .badge { margin-left: 4px !important; }
}
@container app (min-width: 1000px) and (max-width: 1149.98px) {
  .panel-accesos { flex-wrap: wrap !important; }
}

.kpis[data-kpis] > .kpi { container-type: inline-size; }
.kpis[data-kpis] > .kpi > b { white-space: nowrap; font-size: min(clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem), 14cqi); }
@container app (max-width: 719.98px) {
  .kpis[data-kpis] > .kpi:nth-last-child(-n+2) > b { font-size: min(clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem), 24cqi); }
}

/* 3. Escala de densidad del personal en la PC (pedido de Jorge con su captura al 67 %): en pantallas anchas con mouse,
      toda la app del personal se achica como si el navegador estuviera con menos zoom, para que se vea como en un
      ancho de unos 1880 px (una sola fila de accesos, los 4 números enteros, la agenda y "Requiere atención" lado a
      lado). Escalones (ancho de la ventana -> escala; nunca menos de 0,67):
        1200 a 1365 px -> 0,67 · 1366 a 1535 -> 0,75 · 1536 a 1719 -> 0,85 · 1720 a 1879 -> 0,93 · 1880 o más -> 1.
      Sin escala: en el celular y la tablet (sin mouse o menos de 1200 px), en la app del socio y en el ingreso (no
      tienen data-tema ni .app--personal) y con "texto grande" de Accesibilidad (.a11y-fs). Las alturas de pantalla
      (100vh, 100vw) de la app, de la lateral y del fondo oscuro de las ventanas (modales) se compensan para que sigan llenando la ventana. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html[data-tema]:not(.a11y-fs):has(.app--personal) { --dens: .67; }
  html[data-tema]:not(.a11y-fs) .app--personal { zoom: var(--dens); }
  html[data-tema]:not(.a11y-fs):has(.app--personal) :is(.app--personal, .app--personal .app__shell) { min-height: calc(100dvh / var(--dens)); }
  html[data-tema]:not(.a11y-fs):has(.app--personal) .nav-lat__in { max-height: calc(100vh / var(--dens)); }
}
@media (min-width: 1366px) and (hover: hover) and (pointer: fine) { html[data-tema]:not(.a11y-fs):has(.app--personal) { --dens: .75; } }
@media (min-width: 1536px) and (hover: hover) and (pointer: fine) { html[data-tema]:not(.a11y-fs):has(.app--personal) { --dens: .85; } }
@media (min-width: 1720px) and (hover: hover) and (pointer: fine) { html[data-tema]:not(.a11y-fs):has(.app--personal) { --dens: .93; } }
@media (min-width: 1880px) and (hover: hover) and (pointer: fine) { html[data-tema]:not(.a11y-fs):has(.app--personal) { --dens: 1; } }