:root{
    --bg: #0f1013;
    --bg-panel: #16181c;
    --bg-panel-2: #1c1f24;
    --line: #2c2f36;
    --text: #ececec;
    --text-dim: #9a9fa8;
    --accent: #c98a3e;
    --accent-soft: #4a3a24;
    --ok: #5bab6f;
    --ok-soft: #22301f;
    /* Verde "vívido": para fondos sólidos de botón con texto oscuro fijo (ver --accent-vivido, mismo criterio) — --ok ya es vívido en oscuro, así que acá es igual. */
    --ok-vivido: var(--ok);
    --warn: #c9573e;
    --warn-soft: #331f1a;
    /* Variable propia (antes hardcodeada) porque también la usa la franja de estado+pago de turno-compacto (ver franjaEstadoTurno en app.js). */
    --pendiente: #d9a441;
    /* Color propio para fiado (no --danger ni --warn) — pasó por varios tonos hasta este rojo fuerte, con peso visual acorde a ser una deuda pendiente. */
    --fiado: #d6394a;
    --fiado-soft: #3a1c20;
    --danger: #e5484d;
    --info: #5b8fab;
    --info-soft: #1f2a30;
    /* Tripletes RGB de los mismos colores de arriba, para usar en rgba(var(--x-rgb), alfa) en brillos/sombras de color — sin esto, esos rgba() quedaban con el tono hardcodeado del modo oscuro y no cambiaban en modo claro (ver bloque [data-theme="light"]). */
    --accent-rgb: 201,138,62;
    --ok-rgb: 91,171,111;
    --warn-rgb: 201,87,62;
    --info-rgb: 91,143,171;
    /* Variante "vívida" de accent/ok/warn para gráficos (línea/relleno de renderGraficoLineas en app.js): a diferencia del texto, una línea de 2-3px no necesita 4.5:1 de contraste WCAG (alcanza con 3:1 de gráfico), así que acá no se oscurece igual que el texto — en oscuro son iguales a la versión de texto, en modo claro se redefinen más abajo. */
    --accent-grafico: var(--accent);
    --ok-grafico: var(--ok);
    --warn-grafico: var(--warn);
    /* Dorado "decorativo": para todo lo que no sea texto (bordes, fondos de botón/badge con texto oscuro fijo, íconos svg, accent-color de checkboxes, glows) — no necesita 4.5:1 de contraste como el texto (alcanza con ~3:1 de componente UI), así que en modo oscuro es igual a --accent (ya es vívido) y en modo claro se redefine más abajo con el mismo tono vívido que --accent-grafico, en vez del dorado oscurecido que sí hace falta para el texto. */
    --accent-vivido: var(--accent);
    /* Sombras: 1 = intensidad normal (pensada para fondo oscuro); modo claro la baja (ver más abajo) porque una sombra negra fuerte se ve como una mancha gris pesada sobre fondo claro. */
    --shadow-strength: 1;
    --card-lift: none;
    /* Brillo/línea blanca tipo "filo" en la parte de arriba de tarjetas oscuras (inset con rgba(255,255,255,x)) — no tiene sentido sobre una tarjeta ya clara, se apaga del todo en modo claro. */
    --highlight-strength: 1;
    --radius: 12px;
    /* Paleta automática para diferenciar servicios (franja de turno-compacto) — placeholder hasta que cada uno tenga color propio editable. */
    --serv-1: #c98a3e;
    --serv-2: #5b8fab;
    --serv-3: #5bab6f;
    --serv-4: #a35bc9;
    --serv-5: #c95b8f;
    --serv-6: #4fb3a8;
    --serv-7: #c9573e;
    --serv-8: #8f9ec9;
    /* Zona segura del notch/barra de estado — el menú flotante la lee en JS (abrirMenuFlotante) porque calcula su posición ahí, no solo por CSS. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* Ancho máximo del contenido — se agranda en el media query de "pantallas grandes" de acá abajo sin repetir el número en cada regla que lo usa. */
    --wrap-max: 720px;
    /* Ancho de la sidebar de navegación en compu (reemplaza la barra de tabs de abajo, ver media query "Nav en compu" junto a .tabs). */
    --sidebar-w: 220px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  }

  /* Congela toda transition de color/fondo/borde mientras se cambia de tema (ver cambiarTemaConCirculo
     en app.js): sin esto, cada elemento con su propia transition (paneles, botones, switches, tabs...)
     se anima por su cuenta al mismo tiempo que crece el agujero circular del switch, y lo que asoma
     por el agujero es un tono a medio camino entre el tema viejo y el nuevo, no el color final. Con
     esto el cambio de TODO el contenido es instantáneo y la única animación visible es la del círculo. */
  html.tema-cambiando, html.tema-cambiando *{ transition: none !important; }

  /* Modo claro, activado con data-theme="light" en <html> (ver aplicarTema en app.js) — mismos nombres de variable que :root, no requiere cambios en el resto del CSS. */
  html[data-theme="light"]{
    /* Paleta v3 — revolución completa (v1 y v2 quedaban todas "cremita": bg/bg-panel-2 y accent/
       ok/warn/pendiente eran todos variantes de un mismo tono tostado, con muy poco salto de matiz
       entre sí, así que aunque el contraste de texto ya daba bien, todo se leía como una sola masa
       beige sin variedad). Cambios de fondo:
       - Base neutra fría (gris, no beige) en vez de tostada: bg/bg-panel-2/line ya no comparten
         familia de color con el acento dorado, así que el dorado vuelve a resaltar en vez de
         camuflarse contra un fondo del mismo tono.
       - Cada color de estado (ok/warn/fiado/info) pasa a un matiz claramente distinto entre sí
         (verde, naranja-rojizo, rosa-vino, azul) en vez de variaciones de marrón/tostado — antes
         "SIN STOCK", "STOCK BAJO" y los precios en dorado quedaban todos en la misma familia de
         color y costaba diferenciarlos de un vistazo.
       Todos los pares color/-soft siguen midiendo ≥4.5:1 de contraste real (WCAG), igual que v2. */
    --bg: #f3f4f6;
    --bg-panel: #ffffff;
    --bg-panel-2: #e5e7eb;
    --line: #c3c8d1;
    --text: #1f2328;
    --text-dim: #5c6472;
    --accent: #8f5710;
    --accent-soft: #f5e2b8;
    /* Verde/rojo/warn/fiado más vívidos que la v3 original — esa tanda daba de sobra el 4.5:1 de contraste (hasta 9:1 en --fiado) pero a costa de tonos muy oscurecidos/amarronados que en pantalla se leían apagados o "sucios" en vez de vivos. Estos suben brillo y saturación manteniendo ≥4.5:1 contra --bg-panel blanco y ~4:1 contra --bg-panel-2 (de sobra para textos grandes/negrita como montos y badges, que es donde se usan).
       v4 (retoque puntual, mismo criterio de contraste): --ok sube de luminosidad manteniendo el mismo matiz/saturación (era el límite real contra blanco con 4.5:1 — no da para aclarar mucho más sin bajar del piso); --fiado se corre de matiz (de rosa-vino/magenta a rojo-vino real, ya no se confunde con rosa) y --fiado-soft lo acompaña; --danger pasa a un rojo puro (matiz 0°) en vez del rojo-magenta anterior; --pendiente sube saturación a full y corre el matiz de marrón-anaranjado a dorado real. */
    --ok: #16873f;
    --ok-soft: #cdeed9;
    /* Verde vívido para fondos sólidos de botón (Marcar pagado, checkbox tildado) con texto oscuro fijo — --ok de acá arriba está oscurecido a propósito para dar 4.5:1 como texto, y usado como relleno se ve apagado/sucio contra blanco (mismo problema que --accent, resuelto con --accent-vivido). Mismo tono que --ok-grafico, que ya probó dar buen contraste sobre --bg-panel blanco. */
    --ok-vivido: #2f9c56;
    --warn: #c2410c;
    --warn-soft: #fad4bf;
    --pendiente: #8a6a00;
    --fiado: #bd0f2c;
    --fiado-soft: #f7d4da;
    --danger: #dc2626;
    --info: #124f8a;
    --info-soft: #cde3f7;
    --accent-rgb: 143,87,16;
    --ok-rgb: 22,135,63;
    --warn-rgb: 194,65,12;
    --info-rgb: 18,79,138;
    /* Vívidas para gráficos (ver comentario en :root): mismos tonos que el modo oscuro, que ya dan ≥3:1 contra el bg blanco de acá — no hace falta oscurecerlos como a --accent/--ok/--warn de texto. */
    --accent-grafico: #c98a3e;
    --ok-grafico: #2f9c56;
    /* Antes #c9573e (mismo tono que --warn de texto): quedaba desaturado/"pastel" para una línea de gráfico. Este tono es más rojo y más saturado, sigue dando >4.5:1 contra el fondo blanco. */
    --warn-grafico: #d6341a;
    /* Dorado decorativo (ver comentario en :root): mismo tono vívido que --accent-grafico, para bordes, íconos, fondos de botón/badge con texto oscuro fijo y demás elementos que no son texto — el --accent de acá (#8f5710) está oscurecido a propósito para dar 4.5:1 como texto y se ve apagado en esos otros usos. */
    --accent-vivido: #c98a3e;
    /* 0.4 (v1) le sacaba demasiado peso a todo lo que dependía de sombra para destacarse — 0.65 da
       volumen real sin quedar tan pesado como el modo oscuro. */
    --shadow-strength: 0.65;
    --highlight-strength: 0;
    /* Elevación propia para tarjetas que en el CSS base no tienen box-shadow (ej. .producto-card:
       solo borde + degradé bg-panel-2→bg-panel, que en modo oscuro ya se distingue solo pero en
       claro necesita una sombra chica para no perderse contra la página). "none" en :root porque
       el modo oscuro no la necesita. */
    --card-lift: 0 1px 2px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.07);
  }

  /* touch-action: manipulation heredado por todo — fix del delay de ~300ms de iOS (double-tap-to-zoom) en cualquier botón; selectores de clase más específicos (drag-and-drop, charts) lo siguen pisando. */
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  html{ -webkit-text-size-adjust: 100%; }

  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    min-height:100vh;
    padding: env(safe-area-inset-top) 12px calc(92px + env(safe-area-inset-bottom));
    font-size: 16px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Excepción: números/montos y lo que el usuario escribe sí se pueden seleccionar, el resto de los textos de la app no. */
  input, textarea, [contenteditable="true"]{
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
  .num, .detalle, .monto, .precio, .cant,
  .info-chip.precio-chip, .income-entry-amount,
  .cliente-sug-meta{
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  .wrap{ max-width: var(--wrap-max); margin: 0 auto; }

  /* ---- Responsive para pantallas grandes: desde 860px cambia solo --wrap-max (ver :root), el resto del archivo queda intacto para celular. ---- */
  @media (min-width: 860px){
    :root{ --wrap-max: 900px; }
    /* :has() necesario porque .tabs vive fuera de #appContenido: sin él, el padding quedaba puesto igual sin sesión y el login se veía descentrado. */
    body:has(.tabs:not(.oculto)){ padding: 24px 24px 24px calc(var(--sidebar-w) + 24px); }
  }

  /* ---- Pantallas ultra anchas (monitores grandes): a partir de 900px de contenido ya queda cómodo,
     pero en un monitor de 1600px+ sigue sobrando muchísimo aire a los costados y la sidebar de 220px
     se ve chica al lado de tanto contenido. Sube un poco las dos cosas juntas, sin tocar nada de lo
     que ya está pensado para 860-1400px. ---- */
  @media (min-width: 1400px){
    :root{ --wrap-max: 1100px; --sidebar-w: 260px; }
  }
  @media (min-width: 1800px){
    :root{ --wrap-max: 1280px; --sidebar-w: 280px; }
  }

  header{
    display:flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(16px + env(safe-area-inset-top)) 12px 14px;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    margin: 0 -12px;
    border-bottom: 1px solid var(--line);
  }
  .header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .header-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
  /* Botón invisible que envuelve el h1: clickear el título/logo del header
     lleva a Inicio (mismo comportamiento en cualquier pestaña). Sin fondo,
     sin borde, sin padding propio — visualmente sigue siendo el título de
     siempre, solo que ahora es clickeable. */
  .header-titulo-btn{
    border: none; background: transparent; padding:0; margin:0; min-height:auto;
    display:flex; align-items:center; min-width:0; text-align:left;
    color: var(--text);
    transition: opacity 0.15s ease;
  }
  .header-titulo-btn:active{ opacity:0.6; }
  header h1{ font-size: 1.15rem; margin:0; letter-spacing: 0.3px; font-weight: 700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  header h1 .accent-mark{ color: var(--accent); }
  header h1 .header-version{ font-size: 0.62rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 6px; vertical-align: middle; }
  .header-saludo-row{ display:none; flex-direction:column; gap:2px; }
  /* La fila de saludo + fecha ahora es exclusiva de Inicio (2.2): en el resto
     de las pestañas el header global se mantiene fijo pero sin esta fila. */
  .wrap:has(#tab-inicio.active) .header-saludo-row{ display:flex; }
  .header-saludo{ font-size: 1.02rem; font-weight: 700; color: var(--text); }
  header .today{ color: var(--text-dim); font-size: 0.8rem; text-transform: capitalize; }

  /* ---- Botón de menú (hamburguesa) y notas en el header ---- */
  .hamburguesa-btn{
    width:32px; height:32px; min-height:auto; padding:0; border: none; background: transparent;
    color: var(--text); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .hamburguesa-btn svg{ width:22px; height:22px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; }
  .hamburguesa-btn:active{ color: var(--accent); }
  .header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .notas-btn{
    position:relative; width:36px; height:36px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .notas-btn svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .notas-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .notas-badge{
    position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; background: var(--accent-vivido); color:#16181c; font-size:0.62rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }

  /* ---- Tabs (bottom nav bar) ---- */
  .tabs{
    display:flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 30;
    max-width: var(--wrap-max);
    margin: 0 auto;
    box-shadow: 0 -4px 16px rgba(0,0,0,calc(0.25 * var(--shadow-strength)));
  }
  .tab-btn{
    flex: 1 1 0;
    min-width: 58px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 3px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 6px 2px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.1;
    min-height: 50px;
  }
  .tab-btn svg{ width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .tab-btn span{ white-space: nowrap; }
  .tab-btn.active{
    color: var(--accent);
  }
  .tab-btn.active svg{ stroke-width: 2.1; }

  /* ---- Nav inferior: botón "+" central elevado (1.5) ---- */
  .tab-fab-wrap{
    flex: 1 1 0;
    min-width: 58px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  .tab-fab{
    width: 52px; height: 52px;
    margin-top: -26px;
    border-radius: 50%;
    background: linear-gradient(155deg, #e0a55c, var(--accent-vivido) 65%);
    color: #16181c;
    display:flex; align-items:center; justify-content:center;
    border: 3px solid var(--bg-panel);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.45), 0 2px 4px rgba(0,0,0,calc(0.3 * var(--shadow-strength)));
    flex-shrink:0;
    transition: transform 0.2s ease;
  }
  .tab-fab svg{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap:round; transition: transform 0.2s ease; }
  .tab-fab:active{ transform: scale(0.94); }
  .tab-fab.abierto svg{ transform: rotate(45deg); }

  /* ---- Nav en compu (2.1.0): lista de "Más" desplegada + perfil anclado abajo, ocultos por default acá y stylados recién adentro del @media 860px. ---- */
  .sidebar-mas-lista{ display:none; }
  /* Ocultas acá por default (evita el flash sin estilo antes de que el JS las mueva a su lugar);
     .mas-footer-movil las vuelve a mostrar en celular y el @media 860px las muestra en compu. */
  .sidebar-link-reservas{ display:none; }
  .sidebar-perfil-footer{ display:none; }

  /* #perfilBtn (el ítem "Perfil" de la lista de "Más") queda siempre oculto: tanto en celular como en
     compu, Perfil se muestra con el botón aparte de más abajo (#sidebarPerfilBtn), anclado al fondo. */
  #perfilBtn{ display:none; }

  /* "Ver perfil" + flecha del botón de Perfil: ocultos acá por default, se muestran solo en celular
     (adentro de .mas-footer-movil) para que se note que la fila se puede tocar; en compu no hacen falta
     porque ya hay hover. */
  .sidebar-perfil-ver, .sidebar-perfil-chevron{ display:none; }

  /* Link de reservas + Perfil en celular: acomodarFooterSegunAncho() (app.js) mueve #sidebarLinkReservas
     y #sidebarPerfilBtn adentro de este contenedor, al fondo de la pantalla "Más". En compu quedan vacío
     (se van a la sidebar), por eso el :empty saca el margen/borde para que no deje un espacio suelto. */
  .mas-footer-movil{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
  .mas-footer-movil:empty{ margin:0; padding:0; border:none; }

  .mas-footer-movil .sidebar-link-reservas{ display:block; position:relative; }
  .mas-footer-movil .sidebar-link-reservas-label{
    display:block; font-size:0.72rem; font-weight:700; color: var(--text-dim);
    text-transform:uppercase; letter-spacing:.03em; margin: 0 2px 7px;
  }
  .mas-footer-movil .sidebar-link-reservas-wrap{
    display:flex; align-items:stretch;
    background: var(--bg-panel-2); border: 1px solid var(--line);
    border-radius: 10px; overflow:hidden;
  }
  .mas-footer-movil .sidebar-link-reservas-texto{
    flex:1; min-width:0; text-align:left;
    background: transparent; border: none; color: var(--text);
    font: inherit; font-size:0.85rem; font-weight:600;
    padding: 12px 13px; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mas-footer-movil .sidebar-link-reservas-texto:active{ background: var(--bg-panel); }
  .mas-footer-movil .sidebar-link-reservas-abrir{
    flex-shrink:0; width:44px;
    display:flex; align-items:center; justify-content:center;
    background: transparent; border: none; border-left:1px solid var(--line);
    color: var(--text-dim);
  }
  .mas-footer-movil .sidebar-link-reservas-abrir:active{ background: var(--bg-panel); color: var(--text); }
  .mas-footer-movil .sidebar-link-reservas-abrir svg{
    width:17px; height:17px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  }

  /* Popover "Ver y copiar el link": mismo lenguaje que .filtro-popover, anclado ABAJO del pill (en vez de
     arriba como en compu) porque acá el bloque no vive pegado al piso de la pantalla, sino en medio del
     contenido con scroll de "Más". */
  .mas-footer-movil .sidebar-link-reservas-popover{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding:14px; box-shadow: 0 14px 32px rgba(0,0,0,calc(0.45 * var(--shadow-strength)));
  }
  .mas-footer-movil .sidebar-link-reservas-popover.open{ display:block; }
  .mas-footer-movil .sidebar-link-reservas-popover-hint{
    font-size:0.78rem; color: var(--text-dim); line-height:1.45; margin: 0 0 11px;
  }
  .mas-footer-movil .sidebar-link-reservas-popover-fila{ display:flex; gap:7px; }
  .mas-footer-movil .sidebar-link-reservas-popover-fila input{
    flex:1; min-width:0; background: var(--bg-panel-2); border: 1px solid var(--line);
    border-radius:8px; padding:0 10px; height:38px; color: var(--text); font-size:0.82rem;
  }
  .mas-footer-movil .sidebar-link-reservas-popover-fila input:focus{ outline:none; border-color: var(--accent-vivido); }
  .mas-footer-movil .sidebar-link-reservas-popover-fila .btn-ghost{ flex-shrink:0; margin-top:0; }

  .mas-footer-movil .sidebar-perfil-footer{
    display:flex; align-items:center; gap:12px; text-align:left;
    margin-top:6px; padding: 13px 2px; background:none; border:none;
  }
  .mas-footer-movil .sidebar-perfil-footer:active{ opacity:0.7; }
  .mas-footer-movil .sidebar-perfil-avatar{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background: var(--accent-soft); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:0.82rem;
  }
  .mas-footer-movil .sidebar-perfil-nombre{
    flex:1; font-size:0.92rem; font-weight:700; color: var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  .mas-footer-movil .sidebar-perfil-ver{
    display:block; font-size:0.78rem; font-weight:600; color: var(--text-dim); flex-shrink:0;
  }
  .mas-footer-movil .sidebar-perfil-chevron{
    display:block; width:18px; height:18px; flex-shrink:0;
    stroke: var(--text-dim); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }

  /* ---- Nav en compu: la misma barra de abajo pasa a ser sidebar fija ---- No se toca HTML ni JS: mismos .tab-btn/data-tab de siempre, solo cambia pinta y posición. */
  @media (min-width: 860px){
    .tabs{
      left: 0; right: auto; top: 0; bottom: 0;
      width: var(--sidebar-w);
      max-width: none;
      margin: 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 4px;
      padding: 24px 12px;
      border-top: none;
      border-right: 1px solid var(--line);
      box-shadow: none;
    }

    .tab-btn{
      flex: none;
      flex-direction: row;
      justify-content: flex-start;
      gap: 12px;
      min-height: 44px;
      padding: 10px 12px;
      font-size: 0.85rem;
      border-radius: 9px;
    }
    .tab-btn:hover{ background: var(--bg-panel-2); }
    .tab-btn.active{ background: var(--accent-soft); }
    .tab-btn svg{ width: 20px; height: 20px; }

    /* En compu no hace falta el "+" de nav: no queda bien como ítem de sidebar y cada pantalla ya tiene su propio botón de agregar. */
    .tab-fab-wrap{ display: none; }

    /* El menú hamburguesa ya no hace falta: en compu su contenido queda siempre desplegado en la sidebar, no hay nada escondido detrás de "Más". */
    .hamburguesa-btn{ display: none; }

    /* 2.1.0 — "Más" deja de existir como botón propio: se oculta, su contenido se despliega abajo en #sidebarMasLista. */
    .tab-btn[data-tab="config"]{ display: none; }

    /* Inicio / Turnos / Ventas resaltan más que la lista secundaria de abajo (antes escondida detrás de "Más"). */
    .tab-btn[data-tab="inicio"],
    .tab-btn[data-tab="historial"],
    .tab-btn[data-tab="ventas"]{
      font-size: 0.9rem;
      font-weight: 800;
      min-height: 48px;
    }
    .tab-btn[data-tab="inicio"] svg,
    .tab-btn[data-tab="historial"] svg,
    .tab-btn[data-tab="ventas"] svg{ width: 21px; height: 21px; }

    /* Lista secundaria (antes "Más"): mismo #masLista movido acá por app.js (acomodarMasSegunAncho) — no se duplican ids/listeners, solo cambia estilo. */
    .sidebar-mas-lista{
      display:flex; flex-direction:column;
      margin-top: 8px; padding-top: 12px;
      border-top: 1px solid var(--line);
      gap: 2px;
    }
    .sidebar-mas-lista .mas-lista{ display:flex; flex-direction:column; gap:2px; }
    .sidebar-mas-lista .mas-lista-item{
      min-height:auto; padding: 8px 10px; border-bottom: none;
      border-radius: 9px; gap: 10px;
    }
    .sidebar-mas-lista .mas-lista-item:hover{ background: var(--bg-panel-2); }
    .sidebar-mas-lista .mas-lista-icon{ width:28px; height:28px; background: transparent; color: var(--text-dim); }
    .sidebar-mas-lista .mas-lista-icon svg{ width:18px; height:18px; }
    .sidebar-mas-lista .mas-lista-titulo{ font-size: 0.82rem; }
    .sidebar-mas-lista .mas-lista-chevron{ display:none; }
    .sidebar-mas-lista .mas-lista-badge{ font-size: 0.58rem; padding: 2px 6px; }
    /* #perfilBtn sigue viviendo adentro de #masLista para que celular quede
       intacto — acá se oculta nomás, porque el perfil ya tiene su propio
       botón aparte (#sidebarPerfilBtn, justo abajo). */
    .sidebar-mas-lista #perfilBtn{ display:none; }

    /* Link público de reservas, empujado al fondo de la sidebar junto con Perfil (margin-top:auto
       acá en vez de en .sidebar-perfil-footer, que ahora solo tiene un margen chico para separarse
       de este bloque). El "pill" de adentro reusa el mismo lenguaje visual que .reservas-slug-wrap
       de Config › Reservas online (fondo + borde + bordes redondeados), no una tarjeta con
       ícono/título/descripción — para que se vea como parte de la misma app, no un agregado.
       position:relative porque el popover de abajo se ancla a este contenedor, no a toda la sidebar. */
    .sidebar-link-reservas{ display:block; margin-top:auto; position:relative; }
    .sidebar-link-reservas-label{
      display:block; font-size:0.68rem; font-weight:700; color: var(--text-dim);
      text-transform:uppercase; letter-spacing:.03em; margin: 0 1px 6px;
    }
    .sidebar-link-reservas-wrap{
      display:flex; align-items:stretch;
      background: var(--bg-panel-2); border: 1px solid var(--line);
      border-radius: 9px; overflow:hidden;
    }
    .sidebar-link-reservas-texto{
      flex:1; min-width:0; text-align:left;
      background: transparent; border: none; color: var(--text);
      font: inherit; font-size:0.78rem; font-weight:600;
      padding: 10px 11px; cursor:pointer;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .sidebar-link-reservas-texto:hover{ background: var(--bg-panel); }
    .sidebar-link-reservas-abrir{
      flex-shrink:0; width:38px;
      display:flex; align-items:center; justify-content:center;
      background: transparent; border: none; border-left:1px solid var(--line);
      color: var(--text-dim); cursor:pointer;
    }
    .sidebar-link-reservas-abrir:hover{ background: var(--bg-panel); color: var(--text); }
    .sidebar-link-reservas-abrir svg{
      width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
    }

    /* Popover que abre "Ver y copiar el link": mismo lenguaje visual que .filtro-popover (fondo,
       borde, radius, sombra), anclado ARRIBA del pill (bottom:100%) porque este bloque vive pegado
       al piso de la sidebar y abajo no hay lugar. */
    .sidebar-link-reservas-popover{
      display:none; position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:40;
      background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
      padding:12px; box-shadow: 0 14px 32px rgba(0,0,0,calc(0.45 * var(--shadow-strength)));
    }
    .sidebar-link-reservas-popover.open{ display:block; }
    .sidebar-link-reservas-popover-hint{
      font-size:0.72rem; color: var(--text-dim); line-height:1.4; margin: 0 0 10px;
    }
    .sidebar-link-reservas-popover-fila{ display:flex; gap:6px; }
    .sidebar-link-reservas-popover-fila input{
      flex:1; min-width:0; background: var(--bg-panel-2); border: 1px solid var(--line);
      border-radius:8px; padding:0 9px; height:34px; color: var(--text); font-size:0.76rem;
    }
    .sidebar-link-reservas-popover-fila input:focus{ outline:none; border-color: var(--accent-vivido); }
    .sidebar-link-reservas-popover-fila .btn-ghost{ flex-shrink:0; margin-top:0; }

    /* Perfil anclado abajo a la izquierda de la sidebar, como en cualquier app de escritorio — pegado justo debajo del link de reservas (que es quien ahora tiene el margin-top:auto que empuja a los dos al piso). */
    .sidebar-perfil-footer{
      display:flex; align-items:center; gap:10px;
      margin-top: 10px; padding: 10px;
      border-top: 1px solid var(--line);
      border-radius: 9px;
      background: transparent; text-align:left;
    }
    .sidebar-perfil-footer:hover{ background: var(--bg-panel-2); }
    .sidebar-perfil-avatar{
      width:34px; height:34px; border-radius:50%; flex-shrink:0;
      background: var(--accent-soft); color: var(--accent);
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:0.76rem;
    }
    .sidebar-perfil-nombre{
      font-size:0.82rem; font-weight:700; color: var(--text);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
    }
  }

  /* ---- Turnos en compu: agenda + panel lateral lado a lado ----
     En celular .historial-desktop-grid no hace nada (es solo un div de agrupación) y el panel
     lateral queda oculto — la agenda del día ya cumple esa función en una pantalla chica, mostrar
     la misma info dos veces sería ruido. En compu (>=860px) se abre en 2 columnas: la agenda/semana
     queda como columna principal (usa el espacio que --wrap-max liberó) y aparece un panel lateral
     fijo con la lista compacta del día que se está mirando (turnosDiaLista, poblado por
     renderAgendaListaLateral() en app.js — se actualiza solo, mismo punto que renderAgenda()). */
  .historial-lateral-panel{ display:none; }

  @media (min-width: 860px){
    .historial-desktop-grid{
      display:grid;
      grid-template-columns: minmax(0,1fr) 320px;
      gap:16px;
      align-items:start;
    }
    /* Modo búsqueda (#turnosBuscarWrap) reemplaza todo el contenido de la columna principal, no
       tiene panel lateral propio — insight/detalle de un turno puntual no aplica a una lista de
       resultados de cualquier fecha. */
    .historial-lateral-panel{
      display:flex; flex-direction:column; gap:10px;
      position: sticky; top: 24px;
    }
    .historial-lateral-panel h2{ margin-bottom:2px; }
    .historial-lateral-panel .today-list{
      max-height: calc(100vh - 220px); overflow-y:auto; overflow-x:hidden;
      padding-inline: 2px; margin-inline: -2px; scrollbar-width:none; -ms-overflow-style:none;
    }
    .historial-lateral-panel .today-list::-webkit-scrollbar{ display:none; }
  }

  @media (min-width: 1400px){
    .historial-desktop-grid{ grid-template-columns: minmax(0,1fr) 360px; }
  }

  /* ---- Ventas en compu: catálogo + resumen/fiados lado a lado ----
     Mismo criterio que Turnos: en celular .ventas-desktop-grid no hace nada (el resumen y los fiados
     quedan arriba del buscador, como siempre) — el reordenamiento a 2 columnas es solo cosmético y
     pasa a partir de 860px. No se tocó ningún id ni la lógica de renderVentas()/renderVentasHoy(),
     solo se re-agruparon los mismos elementos en 2 columnas nuevas (ventas-lateral-panel /
     ventas-col-principal) para que el resumen quede fijo mientras se scrollea el catálogo. */
  @media (min-width: 860px){
    .ventas-desktop-grid{
      display:grid;
      grid-template-columns: 300px minmax(0,1fr);
      gap:16px;
      align-items:start;
    }
    .ventas-lateral-panel{ grid-column:1; position:sticky; top:24px; display:flex; flex-direction:column; gap:14px; }
    .ventas-col-principal{ grid-column:2; min-width:0; }
    /* La tarjeta grande de Ventas de hoy tenía hueco reservado a la derecha para el botón "Ver categorías"
       porque compartía fila con el h2 ancho de siempre; en la columna angosta lateral (300px) ya no hace
       falta ese hueco — el botón entra cómodo arriba de la tarjeta sin superponerse a nada. */
    .ventas-lateral-panel .ventas-resumen-card{ padding-right:16px; }
    .ventas-lateral-panel .resumen-card-accion{ position:static; margin-bottom:8px; }
    .ventas-lateral-panel .resumen-card-accion-grande{ width:auto; height:auto; }
    .ventas-lateral-panel .resumen-card-categorias-btn{ padding:0; }
  }
  @media (min-width: 1400px){
    .ventas-desktop-grid{ grid-template-columns: 340px minmax(0,1fr); }
  }

  /* ---- Inicio en compu: resumen + acciones rápidas a la izquierda, "Turnos de hoy" fijo a la
     derecha ---- Mismo criterio que Turnos/Ventas: en celular es un div de agrupación sin efecto,
     todo sigue en una sola columna en el orden de siempre. */
  @media (min-width: 860px){
    .inicio-desktop-grid{
      display:grid;
      grid-template-columns: minmax(0,1fr) 360px;
      gap:16px;
      align-items:start;
    }
    .inicio-col-lateral{ position:sticky; top:24px; }
    .inicio-col-lateral .today-list{
      max-height: calc(100vh - 260px); overflow-y:auto; overflow-x:hidden;
      padding-inline: 2px; margin-inline: -2px; scrollbar-width:none; -ms-overflow-style:none;
    }
    .inicio-col-lateral .today-list::-webkit-scrollbar{ display:none; }
  }
  @media (min-width: 1400px){
    .inicio-desktop-grid{ grid-template-columns: minmax(0,1fr) 420px; }
  }

  /* ---- Clientes en compu: lista + tarjeta resumen lado a lado ---- Mismo criterio que Turnos/Inicio:
     en celular .clientes-desktop-grid no hace nada (es solo un div de agrupación), la lista y el
     resumen siguen apilados en una sola columna, resumen al pie como siempre. A partir de 860px el
     resumen pasa a un panel lateral fijo a la derecha mientras la lista scrollea — no se tocó ningún
     id ni la lógica de renderClientesList(), solo se reagruparon los mismos elementos. */
  @media (min-width: 860px){
    .clientes-desktop-grid{
      display:grid;
      grid-template-columns: minmax(0,1fr) 300px;
      gap:16px;
      align-items:start;
    }
    .clientes-lateral-panel{ position:sticky; top:24px; }
    .clientes-resumen-card{ margin-top:0; }
  }
  @media (min-width: 1400px){
    .clientes-desktop-grid{ grid-template-columns: minmax(0,1fr) 340px; }
  }

  /* ---- Estadísticas en compu: mismo patrón en las 4 pestañas (Balance/Ingresos/Gastos/Resumen
     general), cada una con su propio .estad-grid adentro del panel — la tarjeta grande/resumen del
     período actual queda como columna principal, y lo que es más "de referencia" (desglose, detalle
     histórico, ranking, formulario de alta) pasa a un panel lateral sticky a la derecha. En celular
     .estad-grid no hace nada, todo sigue apilado en el mismo orden de siempre. */
  @media (min-width: 860px){
    .estad-grid{
      display:grid;
      grid-template-columns: minmax(0,1fr) 320px;
      gap:16px;
      align-items:start;
    }
    .estad-col-lateral{
      position:sticky; top:24px;
      display:flex; flex-direction:column; gap:14px;
    }
    /* Los bloques que caen en la columna lateral traían su propio margin-top (pensado para apilarse
       solos en una sola columna); acá el gap del flex ya separa, así que se anula para no duplicar aire. */
    .estad-col-lateral > *{ margin-top:0 !important; }
  }
  @media (min-width: 1400px){
    .estad-grid{ grid-template-columns: minmax(0,1fr) 360px; }
  }

  /* ---- Nav inferior: sheet de acciones rápidas del botón "+" (1.5) ---- */
  .acciones-rapidas-overlay{
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,0.55);
    opacity:0; pointer-events:none;
    transition: opacity 0.2s ease;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .acciones-rapidas-overlay.show{ opacity:1; pointer-events:auto; }
  .acciones-rapidas-sheet{
    width:100%; max-width: var(--wrap-max);
    background: var(--bg-panel);
    border-radius: 20px 20px 0 0;
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .acciones-rapidas-overlay.show .acciones-rapidas-sheet{ transform: translateY(0); }
  .acciones-rapidas-handle{ width:36px; height:4px; border-radius:3px; background: var(--line); margin: 4px auto 14px; }
  .acciones-rapidas-titulo{ font-size:0.9rem; font-weight:700; color: var(--text); text-align:center; margin-bottom:14px; }
  .acciones-rapidas-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }

  /* ---- Turnos (Agenda): botón "+" del header y bordes siguen ahora el mismo patrón .panel/h2 que Ventas y Configuración (ver tab-historial en index.html) ---- */
  .turnos-header-add{
    width:36px; height:36px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0;
    background: var(--accent-vivido); border: none; color:#16181c;
    display:flex; align-items:center; justify-content:center;
  }
  .turnos-header-add svg{ width:20px; height:20px; stroke: currentColor; fill: none; stroke-width:2.4; stroke-linecap:round; }
  .turnos-header-add:active{ opacity:0.85; }
  .turnos-header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .turnos-dia-grilla{ margin-bottom:14px; }

  /* ---- Turnos: ícono de buscar/filtrar en el header (2.5.B) ---- Pasa de círculo con lupa a píldora con etiqueta fija "Ver turnos", para que se entienda sin depender del title (no hay hover en mobile). */
  .turnos-header-buscar{
    width:auto; min-height:auto; padding:8px 14px 8px 10px; border-radius:20px; flex-shrink:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; gap:6px;
    font-size:0.74rem; font-weight:700; white-space:nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .turnos-header-buscar svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .turnos-header-buscar:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .turnos-header-buscar.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }

  .turnos-buscar-panel{
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; display:flex; flex-direction:column; gap:12px; margin-bottom:12px;
  }
  .turnos-buscar-panel .buscar-filtro-row{ margin-bottom:0; }
  .turnos-buscar-input-wrap input{ padding-left:42px; }
  /* 5 etiquetas de estado no entran cómodas con el padding/tamaño default de .filtro-chip — mismo ajuste que .estad-tabs/.ventas-estado-tabs. */
  #turnosBuscarEstadoFiltros .filtro-chip{ padding:8px 4px; font-size:0.68rem; }
  /* Mismo ajuste que .today-list (ver esa nota para el porqué del margin-inline negativo en el contenedor en vez de en la tarjeta). */
  .turnos-buscar-resultados{ display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; overflow-x:hidden; padding-inline: 12px; margin-inline: -12px; scrollbar-width:none; -ms-overflow-style:none; }
  .turnos-buscar-resultados::-webkit-scrollbar{ display:none; }

  .tab-content{ display: none; flex-direction: column; gap: 16px; margin-top: 12px; }
  .tab-content.active{ display: flex; }

  .panel{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
  }

  /* ---- Inicio: tarjetas resumen (1.2) ---- */
  .inicio-resumen-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .resumen-card{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: 4px;
    min-width: 0;
    box-shadow: var(--card-lift);
  }
  .resumen-card-grande{
    grid-column: 1 / -1;
    position: relative;
    padding-bottom: 6px;
    overflow: hidden;
  }
  .resumen-card-label{ font-size: 0.72rem; color: var(--text-dim); font-weight: 600; }
  .resumen-card-valor{ font-size: 1.55rem; font-weight: 800; color: var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .resumen-card-grande .resumen-card-valor{ font-size: 1.7rem; }
  .resumen-card-delta{ display:flex; align-items:center; gap:2px; font-size: 0.74rem; font-weight:700; color: var(--ok); }
  .resumen-card-delta svg{ width:13px; height:13px; stroke: currentColor; fill: none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .resumen-card-delta.down{ color: var(--danger); }
  .resumen-card-sub{ font-size: 0.74rem; color: var(--text-dim); }
  /* "Ingresos de hoy" reusa el gráfico detallado de Estadísticas fijo en "Hoy" (ver renderResumenInicio/renderGraficoLineas en app.js), solo achica el margen superior. */
  .resumen-card-grande .stat-chart{ margin-top:6px; }

  /* ---- Clientes: tarjeta resumen al pie de la lista (3.4), reusa .resumen-card ---- */
  .clientes-resumen-card{ margin-top: 14px; }

  /* ---- Ventas: tarjeta resumen "Ventas de hoy" (4.1), reusa .resumen-card-grande ---- overflow:visible pisa el hidden de esa clase porque el botón de categorías usa padding para agrandar el área clickeable. */
  .ventas-resumen-card{ margin-bottom: 14px; padding-right: 150px; overflow: visible; }
  .resumen-card-accion{ position: absolute; top: 3px; right: 3px; }
  .resumen-card-categorias-btn{
    display:flex; align-items:center; gap:8px;
    background: transparent; border: none; padding:7px; min-height:auto;
    color: var(--text-dim);
  }
  .resumen-card-categorias-label{ font-size:0.72rem; font-weight:600; white-space:nowrap; }
  .resumen-card-categorias-btn:active .resumen-card-categorias-label{ color: var(--accent); }
  .resumen-card-accion-grande{ width:56px; height:56px; }
  .resumen-card-accion-grande svg{ width:28px; height:28px; }
  /* En compu (>=860px) el botón queda chico al lado de una tarjeta más
     ancha, así que en ese media query pasa a ser todavía más grande. */
  @media (min-width: 860px){
    .ventas-resumen-card{ padding-right: 190px; }
    .resumen-card-accion{ top: 4px; right: 4px; }
    .resumen-card-categorias-btn{ padding: 10px; }
    .resumen-card-categorias-label{ font-size:0.85rem; }
    .resumen-card-accion-grande{ width:72px; height:72px; }
    .resumen-card-accion-grande svg{ width:36px; height:36px; }
  }

  /* ---- Ventas: buscador de productos (4.2), reusa .ff-input-wrap — ahora
       siempre visible junto al filtro (.ventas-buscar-filtro-row), en vez
       de escondido detrás de una lupa del header. ---- */
  .ventas-buscar-filtro-row{ margin-bottom:14px; }

  /* ---- Ventas: tabs de categoría raíz (4.3), reusa .notas-filtros/.filtro-chip ---- */
  .ventas-categoria-tabs{ margin-bottom: 10px; }

  /* ---- Ventas: filtro por estado de stock, ahora dentro de #ventasFiltroPopover ---- 5 etiquetas (alguna larga) no entran cómodas con el padding/tamaño default de .filtro-chip — mismo ajuste que .estad-tabs. */
  .ventas-estado-tabs .filtro-chip{ padding:8px 4px; font-size:0.68rem; }

  /* ---- Ventas: sub-tabs de la categoría elegida (4.3) — fila más chica y liviana, sin el fondo de .notas-filtros, para marcar que es un segundo nivel de filtro. ---- */
  .ventas-subcategoria-tabs{
    display:flex; gap:6px; margin: 0 0 12px; overflow-x:auto;
  }
  .filtro-chip-sub{
    flex:none; min-height:auto; padding:6px 13px; border-radius:20px;
    font-size:0.72rem; font-weight:700; white-space:nowrap;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .filtro-chip-sub.active{ background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); }

  /* ---- Inicio: acciones rápidas (1.4) ---- */
  .inicio-acciones-rapidas{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0;
  }
  .accion-rapida-btn{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius:14px;
    padding: 13px 8px 11px;
    color: var(--text);
    text-transform:none; letter-spacing:normal; font-weight:400;
  }
  .accion-rapida-btn:active{ border-color: var(--accent-vivido); }
  .accion-rapida-icono{
    position:relative;
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background: var(--accent-soft); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .accion-rapida-icono svg{ width:19px; height:19px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .accion-rapida-icono::after{
    content:'+';
    position:absolute; top:-4px; right:-4px;
    width:16px; height:16px; border-radius:50%;
    background: var(--accent-vivido); color:#16181c;
    font-size:0.72rem; font-weight:800; line-height:16px; text-align:center;
    border: 2px solid var(--bg-panel);
  }
  .accion-rapida-label{ font-size:0.76rem; font-weight:700; color: var(--text); }

  /* ---- Inicio: próximos turnos compactos (1.3) ---- */
  .ver-agenda-btn{
    width:auto; height:auto; min-height:auto; border-radius:8px; padding:6px 13px;
    font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.4px;
    background: linear-gradient(155deg, #f0c179, var(--accent-vivido) 65%);
    color:#16181c; border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,calc(0.25 * var(--shadow-strength)));
    flex-shrink:0;
  }
  .ver-agenda-btn:active{ transform: scale(0.96); box-shadow: 0 1px 3px rgba(0,0,0,calc(0.2 * var(--shadow-strength))); }
  .turno-compacto{
    display:flex; align-items:stretch; gap:10px;
    background: var(--bg-panel-2); border-radius:10px; padding:10px 12px;
    min-width:0; cursor:pointer;
    position:relative; z-index:1;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  /* Efecto "seleccionado": scale() en vez de resaltar en color, pero el contenedor tiene overflow-y:auto que clipea overflow-x también — el aire para que no se corte sale del padding del .panel (margin-inline negativo + padding-inline propio), no de padding/margin cancelados en la tarjeta misma (eso dejaba cero aire de sobra). */
  /* inset en vez de box-shadow hacia afuera: uno hacia afuera se sale del aire reservado y su difuminado se corta de golpe (línea fija + tembleque al animar el scale()); un inset nunca sale de la tarjeta. */
  .turno-compacto.turno-compacto-tocado{
    transform: scale(1.025);
    z-index:2;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(0.14 * var(--highlight-strength))), inset 0 0 12px rgba(0,0,0,calc(0.25 * var(--shadow-strength)));
  }
  .turno-compacto-franja{ width:4px; border-radius:3px; overflow:hidden; flex-shrink:0; }
  .turno-compacto-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .turno-compacto-top{ display:flex; align-items:baseline; gap:8px; }
  .turno-compacto-hora{ font-size:0.78rem; font-weight:700; color: var(--accent); flex-shrink:0; }
  .turno-compacto-cliente{ font-weight:700; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .turno-compacto-servicios{ font-size:0.75rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .turno-compacto-precio{ font-size:0.75rem; font-weight:600; color: var(--text-dim); }
  .turno-compacto-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; flex-shrink:0; }
  .turno-compacto-estado{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .turno-compacto-estado svg{ width:13px; height:13px; stroke: currentColor; fill: none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .turno-compacto-estado.completado{ background: var(--ok-soft); color: var(--ok); }
  .turno-compacto-estado.pendiente{ background: var(--warn-soft); color: var(--pendiente); }
  .turno-compacto-estado.cancelado{ background: var(--danger); color: #fff; opacity:0.85; }
  .panel h2{
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .icon-btn-round{
    width:28px; height:28px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    text-transform:none; letter-spacing:normal; font-weight:400;
  }
  .icon-btn-round svg{ width:14px; height:14px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .icon-btn-round:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .icon-btn-round.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }

  /* ---- Reminder / today section ---- */
  /* margin-inline negativo + padding-inline en el CONTENEDOR (no en la tarjeta): le da aire al scale() de .turno-compacto-tocado sin mover nada en reposo. */
  /* scrollbar-width/-webkit-scrollbar ocultan la barra (el scroll sigue andando) — sin esto el navegador reserva su ancho solo del lado derecho, comiéndose el aire del scale() y cortando ese lado. */
  .today-list{ display:flex; flex-direction:column; gap:8px; max-height: 420px; overflow-y:auto; overflow-x:hidden; padding-inline: 12px; margin-inline: -12px; scrollbar-width:none; -ms-overflow-style:none; }
  .today-list::-webkit-scrollbar{ display:none; }
  .empty-msg{ color: var(--text-dim); font-size:0.85rem; padding: 8px 2px; }

  /* ---- Listas permanentes que pueden acumular muchas filas con el tiempo
     (ingresos manuales, gastos): scroll interno con altura tope en vez de
     empujar el resto del panel hacia abajo a medida que crecen. */
  .lista-scroll{ max-height: 420px; overflow-y:auto; padding-right:2px; }

  /* ---- Listas plegables: mismo header/chevron que .categoria-grupo (Ventas),
     pero para plegar la lista completa, no un subgrupo dentro de ella. */
  .lista-plegable .categoria-header{ padding: 6px 4px; }
  .lista-plegable .lista-scroll{ margin-top: 6px; }
  .lista-plegable.colapsado .categoria-chevron{ transform: rotate(-90deg); }
  .lista-plegable.colapsado .lista-scroll{ display:none; }

  /* ---- Report cards ---- */
  .report-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
  .report-row.stats-row{ grid-template-columns: repeat(2,1fr); }
  .report-row > *{ min-width:0; }
  .report-card.static{ cursor: default; }
  .report-card.static .num{ font-size: 1.4rem; }
  .report-card{ background: var(--bg-panel-2); border-radius: 9px; padding: 12px 6px; text-align:center; cursor:pointer; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; }
  .report-card.active{ background: var(--accent-soft); border-color: var(--accent-vivido); }
  .report-card .num{ font-size: 1.1rem; font-weight: 700; color: var(--accent); display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .report-card .lbl{ font-size: 0.63rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

  /* ---- Resumen general: tarjetas con ícono ---- */
  .stat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 14px; }
  .stat-grid > *{ min-width:0; }
  @media (min-width: 860px){
    .stat-grid{ grid-template-columns: repeat(4,1fr); }
  }
  /* Resumen general quedó partido en 2 grillas de 2 tarjetas cada una (la
     de arriba con selector de período propio, ver #resumenGeneralPeriodo)
     en vez de 1 sola de 4 — así el selector queda pegado solo a las 2
     tarjetas que afecta. Estas siempre quedan en 2 columnas, sin expandir
     a 4 en pantallas anchas como el resto de .stat-grid (si expandiera,
     con solo 2 tarjetas cada fila quedaría con la mitad del ancho vacío). */
  .stat-grid.stat-grid-split{ grid-template-columns: repeat(2,1fr); }
  @media (min-width: 860px){
    .stat-grid.stat-grid-split{ grid-template-columns: repeat(2,1fr); }
  }
  .stat-tile{
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 14px 12px;
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
  .stat-tile::after{
    content:"";
    position:absolute;
    top:-26px; right:-26px;
    width:68px; height:68px;
    border-radius:50%;
    background: var(--tile-color, var(--accent-vivido));
    opacity: 0.12;
  }
  .stat-tile .stat-icon{
    position:relative; z-index:1;
    width: 32px; height: 32px;
    border-radius: 9px;
    display:flex; align-items:center; justify-content:center;
    background: var(--accent-soft);
    background: color-mix(in srgb, var(--tile-color, var(--accent-vivido)) 18%, var(--bg-panel-2));
    color: var(--tile-color, var(--accent));
  }
  .stat-tile .stat-icon svg{ width:17px; height:17px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .stat-tile .num{ position:relative; z-index:1; font-size: 1.4rem; font-weight: 800; color: var(--text); line-height:1.1; display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stat-tile .lbl{ position:relative; z-index:1; font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
  .stat-tile.tile-accent{ --tile-color: var(--accent-vivido); }
  .stat-tile.tile-info{ --tile-color: var(--info); }
  .stat-tile.tile-warn{ --tile-color: var(--warn); }
  .stat-tile.tile-ok{ --tile-color: var(--ok); }

  .income-detail{ display:none; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top: 1px solid var(--line); }
  .income-detail.show{ display:flex; }
  .income-entry{ display:flex; justify-content:space-between; align-items:center; gap:10px; background: var(--bg-panel-2); border-radius:9px; padding:10px 12px; }
  .income-entry-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .income-entry-title{ font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:7px; }
  .income-entry-title .tipo-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .income-entry.turno .tipo-dot{ background: var(--accent-vivido); }
  .income-entry.producto .tipo-dot{ background: var(--info); }
  .income-entry.manual .tipo-dot{ background: var(--ok); }
  .income-entry-sub{ font-size:0.71rem; color:var(--text-dim); padding-left: 14px; }
  .income-entry-nota{ font-size:0.68rem; color:var(--ok); padding-left: 14px; margin-top:1px; }
  .income-entry-cliente{ display:inline-flex; align-items:center; gap:3px; color: var(--accent); font-weight:600; }
  .income-entry-cliente svg{ width:11px; height:11px; stroke: currentColor; fill: none; stroke-width:2; flex-shrink:0; }
  .income-entry-amount{ font-weight:700; color:var(--accent); font-size:0.85rem; white-space:nowrap; max-width:40%; overflow:hidden; text-overflow:ellipsis; min-width:0; flex-shrink:1; }
  /* Botón "Deshacer" de una fila de Ingresos del carrito multi-producto (4.5) — mismo .icon-btn-round, más chico para no competir con el monto. */
  .income-entry-deshacer{ width:24px; height:24px; }
  .income-entry-deshacer svg{ width:12px; height:12px; }
  /* ---- Fila "fundida" de un carrito con varios productos (agrupado por grupoId en itemsDeIngresos) — clickeable, abre el modal de detalle en vez del botón deshacer. ---- */
  .income-entry.es-carrito{ cursor:pointer; }
  .income-entry.es-carrito:active{ background: var(--bg-panel); }
  .income-entry-chevron{
    width:18px; height:18px; flex-shrink:0; stroke: var(--text-dim); fill: none;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .income-detail-empty{ color: var(--text-dim); font-size:0.82rem; padding: 6px 2px; }
  .income-entry.gasto .tipo-dot{ background: var(--warn); }
  .balance-entry .income-entry-amount{ font-size:0.92rem; }
  .balance-desglose{ display:flex; gap:6px; margin-top:4px; padding-left:14px; flex-wrap:wrap; }
  .desglose-chip{ font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:20px; }
  .desglose-chip.desglose-plus{ background: var(--ok-soft); color: var(--ok); }
  .desglose-chip.desglose-minus{ background: var(--warn-soft); color: var(--warn); }

  /* ---- Gastos por categoría ---- */
  .gpc-block{ margin-top:16px; padding-top:14px; border-top: 1px solid var(--line); }
  .gpc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .gpc-title{ font-size:0.85rem; font-weight:700; color:var(--text); margin:0; }
  .gpc-periodo{ display:flex; gap:4px; background: var(--bg-panel-2); border-radius:8px; padding:3px; }
  .gpc-periodo-btn{ border: none; background: transparent; color:var(--text-dim); font-size:0.7rem; font-weight:700; padding:5px 9px; border-radius:6px; cursor:pointer; text-transform:uppercase; letter-spacing:0.3px; }
  .gpc-periodo-btn.active{ background: var(--accent-soft); color: var(--accent); }
  /* Selector con 5 opciones: letra y padding más chicos para que "Histórico" no desborde en pantallas angostas. */
  .gastos-total-periodo.periodo-5 .gpc-periodo-btn{ font-size:0.6rem; padding:5px 2px; letter-spacing:0.1px; }

  /* ---- Gráfico de línea (Ingresos/Gastos/Balance): un punto por hora/día/mes; el último punto es siempre "ahora", destacado, y el gráfico arranca scrolleado a la derecha para mostrarlo (ver renderGraficoLineas). Sin librerías externas: un solo SVG por tarjeta. ---- */
  .stat-chart{ margin-top:12px; }
  /* overflow-x:auto necesario para scrollear el gráfico, pero dibuja una barra nativa que en varios navegadores mobile flota fea sobre el gráfico — esto solo la oculta, el scroll sigue andando. */
  .stat-chart-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:0 2px;
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style:none; /* Edge/IE viejos */
  }
  .stat-chart-scroll::-webkit-scrollbar{ display:none; height:0; } /* Chrome/Safari/WebView */
  .stat-chart-inner{ position:relative; min-width:100%; }
  .stat-chart-svg-el{ display:block; width:100%; height:var(--alto-grafico, 120px); overflow:visible; }
  .stat-chart-labels{ position:relative; height:14px; margin-top:2px; }
  .stat-chart-labels span{ position:absolute; top:0; transform:translateX(-50%); font-size:0.58rem; color:var(--text-dim); white-space:nowrap; }
  .stat-chart-labels span.es-ahora{ color:var(--text); font-weight:800; }
  .stat-chart-labels span.es-ahora::before{ content:'●'; font-size:0.6em; margin-right:2px; color:currentColor; vertical-align:middle; }
  /* Halo del punto de "ahora" (puntoHoySvg en app.js): late para distinguirse del resto. transform-box:fill-box evita que el scale() lo corra de lugar. */
  .stat-chart-ahora-halo{
    transform-box: fill-box; transform-origin: center;
    animation: stat-chart-halo-pulso 2.2s ease-in-out infinite;
  }
  @keyframes stat-chart-halo-pulso{
    0%, 100%{ opacity: 0.16; transform: scale(1); }
    50%{ opacity: 0.05; transform: scale(1.4); }
  }
  /* Interacción tipo "Coco Capital": mantener presionado y arrastrar muestra hora/monto del punto exacto, reemplazando la fila fija de etiquetas por exploración bajo demanda. */
  .stat-chart{ position:relative; }
  /* 6.0: antes "pan-x" a secas, y un deslizamiento vertical que arrancaba sobre el gráfico no bajaba la página. */
  .stat-chart-inner{ touch-action: pan-x pan-y; }
  .stat-chart-crosshair{ position:absolute; top:0; width:1px; height:var(--alto-grafico, 120px); background: var(--line); pointer-events:none; opacity:0; }
  .stat-chart-crosshair.activo{ opacity:1; }
  /* OJO: el tooltip cuelga de .stat-chart (overflow visible), no de .stat-chart-inner — ese tiene overflow-x:auto que también recorta el eje Y, cortaría un tooltip que sobresale arriba (ver configurarInteraccionGrafico). */
  .stat-chart-tooltip{
    position:absolute; top:0; transform:translate(-50%,-100%); margin-top:-8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:8px;
    padding:5px 9px; white-space:nowrap; pointer-events:none; opacity:0;
    box-shadow: 0 4px 12px rgba(0,0,0,calc(0.35 * var(--shadow-strength))); z-index:2;
  }
  .stat-chart-tooltip.activo{ opacity:1; }
  .stat-chart-tooltip-hora{ font-size:0.58rem; color:var(--text-dim); }
  .stat-chart-tooltip-monto{ font-size:0.74rem; font-weight:800; color:var(--text); }
  .gpc-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  @media (min-width: 860px){
    .gpc-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  }
  .gpc-row{ display:flex; align-items:center; gap:10px; }
  .gpc-row-icon{ flex-shrink:0; width:30px; height:30px; border-radius:9px; background: var(--warn-soft); color: var(--warn); display:flex; align-items:center; justify-content:center; }
  .gpc-row-icon svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .gpc-row-body{ flex:1; min-width:0; }
  .gpc-row-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
  .gpc-row-nombre{ font-size:0.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gpc-row-monto{ font-size:0.8rem; font-weight:700; color:var(--warn); white-space:nowrap; flex-shrink:0; }
  .gpc-bar-track{ height:7px; border-radius:5px; background: var(--bg-panel-2); overflow:hidden; }
  .gpc-bar-fill{ height:100%; border-radius:5px; background: var(--warn); }

  .report-card.efectivo{ border: 1px solid rgba(var(--ok-rgb),0.3); }
  .report-card.efectivo .num{ color: var(--ok); }
  .report-card.transferencia{ border: 1px solid rgba(var(--info-rgb),0.3); }
  .report-card.transferencia .num{ color: var(--info); }

  /* ---- Stats: servicio más pedido ---- */
  .top-servicio-card{ display:flex; align-items:center; gap:12px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 14px; }
  .top-servicio-icon{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; }
  .top-servicio-icon svg{ width:20px; height:20px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .top-servicio-info{ flex:1; min-width:0; }
  .top-servicio-card .nombre{ font-weight:700; font-size: 0.95rem; }
  .top-servicio-card .veces{ color: var(--text-dim); font-size: 0.74rem; margin-top:2px; }
  .top-servicio-card .num{ font-size: 1.3rem; font-weight:700; color: var(--accent); flex-shrink:1; min-width:0; max-width:35%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---- Stats: productos ganadores (top 5 por defecto, desplegable) ---- Mismo fondo/borde que .venta-hist-row pero cada fila es UN producto, no una venta puntual; clickeable salvo con 5 o menos (.sin-desplegable). */
  .productos-ganadores-card{ background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 14px; cursor:pointer; user-select:none; }
  .productos-ganadores-card.sin-desplegable{ cursor:default; }
  .productos-ganadores-titulo{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; font-size: 0.95rem; margin-bottom: 10px; }
  .pg-chevron{ width:16px; height:16px; flex-shrink:0; stroke: var(--text-dim); fill: none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition: transform .2s ease; }
  .productos-ganadores-card.expandido .pg-chevron{ transform: rotate(180deg); }
  .productos-ganadores-card.sin-desplegable .pg-chevron{ display:none; }
  .pg-row{ display:flex; align-items:center; gap:10px; padding: 8px 0; }
  .pg-row + .pg-row{ border-top: 1px solid var(--line); }
  /* Filas más allá del top 5: entrada suave para que no aparezcan "de golpe" al desplegar. */
  .pg-row-extra{ animation: pgFilaAparece .15s ease; }
  @keyframes pgFilaAparece{ from{ opacity:0; } to{ opacity:1; } }
  .pg-puesto{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-size:0.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
  /* Foto/inicial del producto: mismo patrón que .producto-fila-icono, más chica — acá es dato de apoyo del ranking, no el protagonista. */
  .pg-foto{
    flex-shrink:0; width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:0.74rem; font-weight:800;
    background: color-mix(in srgb, var(--tile-color, var(--accent-vivido)) 18%, var(--bg-panel-2));
    color: var(--tile-color, var(--accent));
    overflow:hidden;
  }
  .pg-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pg-info{ flex:1; min-width:0; }
  .pg-nombre{ font-size:0.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Categoría chica y apagada, sin competir con el nombre del producto — si no tiene categoría, la línea no se imprime (ver renderProductosGanadores). */
  .pg-categoria{ font-size:0.68rem; color: var(--text-dim); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pg-ventas{ font-size:0.72rem; color: var(--text-dim); margin-top:1px; }
  .pg-unidades{ flex-shrink:0; font-size:1rem; font-weight:700; color: var(--accent); }
  .productos-ganadores-vacio{ color: var(--text-dim); font-size: 0.82rem; text-align:center; padding: 6px 0; }

  /* ---- Stats: detalle histórico colapsable ---- */
  .stats-details{ margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
  .stats-details summary{
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
  }
  .stats-details summary::-webkit-details-marker{ display:none; }
  .stats-details summary::before{
    content: '▸';
    font-size: 0.7rem;
    transition: transform 0.15s ease;
  }
  .stats-details[open] summary::before{ transform: rotate(90deg); }
  .stats-details-body{ margin-top: 10px; }

  /* ---- Form ---- */
  form.turno-form{ display:flex; flex-direction:column; gap: 12px; }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-row > *{ min-width:0; }

  /* ---- Turno (Nuevo/Editar): rediseño de estética ---- Antes era una lista plana sin separación entre "quién/qué/cuándo"; ahora agrupado en secciones (Cliente → Servicio → Fecha y hora → Notas), separadas por filo superior en vez de cajas apiladas. */
  form.turno-form.tf-v2{ gap: 22px; }
  .tf-section{ display:flex; flex-direction:column; gap: 10px; }
  .tf-section + .tf-section{ padding-top: 18px; border-top: 1px solid var(--line); }
  .tf-section-title{
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-dim);
  }
  /* El contacto (WhatsApp/Instagram) es secundario dentro de "Cliente" — más chico, sin competir con el nombre. */
  /* Se apilan (WhatsApp ancho completo) en vez de compartir fila 1fr 1fr: el selector de país le deja muy poco ancho al número — mismo criterio que r-tel-wrap en reserva.css. */
  .tf-contacto-row{ grid-template-columns: 1fr; margin-top: 2px; gap: 14px; }
  .tf-contacto-row input{ font-size: 0.92rem; min-height: 42px; }
  /* Notas: una sola línea suelta, sin título de sección propio — el label del input ya alcanza. */
  .tf-section-notas{ gap: 5px; }
  /* Total dentro de "Servicio": versión liviana de .total-row (sin fondo), solo un filo superior — cierre de sección, no otra tarjeta. */
  .total-row.tf-total{
    background: none; border-radius: 0; padding: 10px 0 0;
    border-top: 1px solid var(--line);
  }

  /* ---- Cliente: buscador rápido + autocompletado ---- */
  .cliente-field-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
  .cliente-field-head label{ margin-bottom:0; }
  .cliente-buscar-btn{
    width:auto; min-height:auto; padding:5px 10px 5px 8px; border-radius:20px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    font-size:0.72rem; font-weight:700; display:flex; align-items:center; gap:4px; flex-shrink:0;
  }
  .cliente-buscar-btn svg{ width:13px; height:13px; stroke: currentColor; fill: none; stroke-width:2; }
  .cliente-buscar-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .cliente-autocomplete-wrap{ position:relative; }
  .cliente-sugerencias{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:35;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:10px;
    /* 230px es el máximo — ajustarAlturaSugerencias() en app.js lo recorta al espacio real disponible debajo del input, para que nunca quede cortado. */
    max-height:230px; overflow-y:auto; box-shadow: 0 10px 24px rgba(0,0,0,calc(0.4 * var(--shadow-strength)));
  }
  .cliente-sugerencias.show{ display:block; }
  .cliente-sug-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom: 1px solid var(--line); }
  .cliente-sug-item:last-child{ border-bottom: none; }
  .cliente-sug-item:active{ background: var(--bg-panel); }
  .cliente-sug-avatar{
    width:30px; height:30px; border-radius:50%; background: var(--accent-soft); color: var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; flex-shrink:0;
  }
  .cliente-sug-info{ min-width:0; flex:1; }
  .cliente-sug-nombre{ font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cliente-sug-meta{ font-size:0.68rem; color: var(--text-dim); margin-top:1px; }

  /* ---- Directorio de clientes (pantalla aparte) ---- */
  /* .clientes-search-box es ahora el propio .ff-input-wrap del buscador (siempre visible, ya no colapsable), junto al filtro (ver .buscar-filtro-row). */
  .clientes-buscar-filtro-row{ margin-bottom:14px; }
  /* 3.3: tarjeta compacta (mockup) — antes era una tarjeta densa con
     teléfono/instagram en texto y 4 botones de acción. Ahora es una sola
     fila: avatar + nombre + meta, con el ícono de WhatsApp a la derecha.
     Instagram, "Ver historial" y "Nuevo turno" pasaron a la ficha de
     detalle (.cliente-detalle-acciones), que abre con tap en el resto
     de la fila (.cliente-top). */
  .cliente-item{
    display:flex; align-items:center; gap:10px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius:10px; padding:10px 12px;
  }
  .cliente-top{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; }
  .cliente-avatar{
    width:42px; height:42px; border-radius:50%; background: var(--accent-soft); color: var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:0.92rem; font-weight:800; flex-shrink:0;
  }
  .cliente-body{ flex:1; min-width:0; }
  .cliente-nombre{ font-weight:700; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cliente-meta{ color: var(--text-dim); font-size:0.76rem; margin-top:2px; }
  .cliente-icon-btn{
    width:36px; height:36px; min-height:auto; padding:0; border-radius:9px; flex-shrink:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .cliente-icon-btn svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:1.8; }
  .cliente-icon-btn.wsp{ color:#3fd16a; border-color: rgba(63,209,106,0.35); }
  .cliente-icon-btn.wsp svg{ fill: currentColor; stroke: none; }
  .cliente-icon-btn.wsp:active{ background: rgba(63,209,106,0.12); }
  .cliente-icon-btn.ig{ color:#e1306c; border-color: rgba(225,48,108,0.35); }
  .cliente-icon-btn.ig svg{ stroke: currentColor; stroke-width:1.8; fill: none; }
  .cliente-icon-btn.ig:active{ background: rgba(225,48,108,0.12); }
  .cliente-top:active{ opacity:0.75; }

  /* ---- Ficha de cliente (resumen + acciones) ---- */
  .cliente-detalle-overlay{
    position: fixed; inset: 0; background: rgba(10,11,13,0.72);
    display:flex; align-items:center; justify-content:center;
    z-index: 210; opacity:0; pointer-events:none; transition: opacity 0.2s ease;
    padding: 20px;
  }
  .cliente-detalle-overlay.show{ opacity:1; pointer-events:auto; }
  .cliente-detalle-box{
    width:100%; max-width: 420px; max-height: 86vh; overflow-y:auto;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: 18px;
    padding: 26px 20px 20px; position:relative;
    transform: scale(0.94); opacity:0; transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,calc(0.45 * var(--shadow-strength)));
  }
  .cliente-detalle-overlay.show .cliente-detalle-box{ transform: scale(1); opacity:1; }
  /* En compu la nav es sidebar fija, no algo que "se navega lejos" — este backdrop no debe taparla o un click en la sidebar con un modal abierto no llega a tocarla (igual que .notas-page-overlay). */
  @media (min-width: 860px){
    .cliente-detalle-overlay{ left: var(--sidebar-w); }
  }
  /* Un poco más ancha para modales de edición (turno/producto), que tienen más campos por fila que la ficha de cliente. */
  .cliente-detalle-box-ancho{ max-width: 480px; }
  .cliente-detalle-cerrar{
    position:absolute; top:14px; right:14px; width:32px; height:32px; min-height:auto; padding:0;
    border-radius:50%; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .cliente-detalle-cerrar svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2; }
  .cliente-detalle-header{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin-bottom:18px; }
  .cliente-detalle-avatar{ width:58px; height:58px; font-size:1.2rem; margin-bottom:4px; }
  .cliente-detalle-nombre{ font-size:1.1rem; font-weight:800; }
  .cliente-detalle-meta{ font-size:0.8rem; color: var(--text-dim); }

  /* ---- Modal de detalle de una venta con varios productos (carrito de "Nueva venta", ver mostrarDetalleVentaCarrito) — reusa el mismo .cliente-detalle-overlay/box de arriba. ---- */
  .detalle-venta-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .detalle-venta-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:10px; padding:10px 12px;
  }
  .detalle-venta-item-info{ min-width:0; }
  .detalle-venta-item-nombre{ font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detalle-venta-item-cantidad{ font-size:0.74rem; color: var(--text-dim); margin-top:1px; }
  .detalle-venta-item-monto{ font-weight:800; font-size:0.88rem; flex-shrink:0; white-space:nowrap; }
  .detalle-venta-total{
    display:flex; justify-content:space-between; align-items:center;
    font-weight:800; font-size:1.05rem; color: var(--text);
    border-top: 1px solid var(--line); padding-top:12px; margin-bottom:16px;
  }
  .detalle-venta-deshacer{ width:100%; color: var(--warn); border-color: var(--warn); }
  .detalle-venta-deshacer:active{ background: var(--warn-soft); }

  /* ---- Acciones del modal de fiado fundido (varios productos, mismo grupoId — ver mostrarDetalleFiadoCarrito) ---- Mismo reparto que .fiados-pendientes-acciones pero "Marcar pagado" pesa más por ser lo que se usa casi siempre. ---- */
  .detalle-fiado-acciones{ display:flex; align-items:center; gap:10px; }
  .detalle-fiado-cobrar{
    flex:2; padding:11px; border-radius:10px; border: none;
    background: var(--ok-vivido); color:#16181c; font-weight:800; font-size:0.85rem;
  }
  .detalle-fiado-cobrar:active{ filter:brightness(0.94); }
  .detalle-fiado-cancelar{
    flex:1; padding:11px; border-radius:10px; background: none;
    color: var(--text-dim); border: 1px solid var(--line); font-weight:700; font-size:0.85rem;
  }
  .detalle-fiado-cancelar:active{ background: var(--bg-panel-2); }

  /* ---- Acciones individuales por producto en el modal de fiado fundido (ver mostrarDetalleFiadoCarrito) ---- Cada ítem suma su fila de cobrar/cancelar (reusa los botones de .fiados-pendientes-*) para actuar sobre un solo producto sin tocar el resto; específico de #detalleFiadoItems, no afecta #detalleVentaItems. ---- */
  #detalleFiadoItems .detalle-venta-item{ flex-direction:column; align-items:stretch; gap:8px; }
  #detalleFiadoItems .detalle-venta-item-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  #detalleFiadoItems .fiados-pendientes-acciones{ border-top: 1px solid var(--line); padding-top:8px; }
  .cliente-detalle-contacto{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; }
  .cliente-detalle-contacto .cliente-icon-btn{ width:40px; height:40px; }
  .cliente-detalle-contacto .cliente-icon-btn svg{ width:17px; height:17px; }
  .cliente-detalle-stats{
    display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:16px;
  }
  .cliente-detalle-stat{
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:10px;
    padding:10px 8px; text-align:center; min-width:0;
  }
  .cliente-detalle-stat .num{ font-size:1.05rem; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cliente-detalle-stat .lbl{ font-size:0.68rem; color: var(--text-dim); margin-top:2px; }
  .cliente-detalle-seccion{ margin-bottom:16px; }
  .cliente-detalle-seccion h4{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--text-dim); margin:0 0 8px; }
  .cliente-detalle-productos{ display:flex; flex-direction:column; gap:6px; }
  .cliente-detalle-producto-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:9px; padding:8px 10px;
    font-size:0.82rem;
  }
  .cliente-detalle-producto-row .cant{ color: var(--text-dim); font-size:0.74rem; }
  /* Fila de "Productos reservados": segunda línea con el estado de pago en --fiado, igual que el resto de la app — deja de listarse al entregar/cancelar la reserva (ver reservasPorCliente en app.js). */
  .cliente-detalle-producto-row.reserva-row{ flex-direction:column; align-items:stretch; gap:3px; }
  .cliente-detalle-producto-row.reserva-row .reserva-row-top{ display:flex; align-items:center; gap:8px; }
  .cliente-detalle-producto-row.reserva-row .reserva-row-top > span:first-child{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cliente-detalle-producto-row.reserva-row .reserva-row-top .cant{ flex-shrink:0; }
  .cliente-detalle-producto-row.reserva-row .reserva-row-top .kebab-btn{ flex-shrink:0; }
  .cliente-detalle-reserva-estado{ font-size:0.72rem; color: var(--text-dim); }
  .cliente-detalle-reserva-estado.pendiente{ color: var(--fiado); font-weight:600; }

  /* ---- Modal "Ver servicios" de un turno ---- */
  .ver-servicios-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; max-height:50vh; overflow-y:auto; text-align:left; }
  .ver-servicio-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:10px; padding:10px 12px;
  }
  .ver-servicio-info{ min-width:0; }
  .ver-servicio-nombre{ font-size:0.88rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ver-servicio-precio{ font-size:0.78rem; color: var(--text-dim); margin-top:2px; }
  .ver-servicio-acciones{ display:flex; gap:6px; flex-shrink:0; }
  .ver-servicio-btn{
    width:34px; height:34px; min-height:auto; padding:0; border-radius:9px;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .ver-servicio-btn svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:2; }
  .ver-servicio-btn.editar:active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }
  .ver-servicio-btn.borrar:active{ background: rgba(224,95,95,0.14); color:#e05f5f; border-color: rgba(224,95,95,0.4); }
  .cliente-detalle-acciones{ display:flex; flex-direction:column; gap:8px; }
  .cliente-detalle-accion{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius:10px; padding:12px 10px; font-size:0.86rem; font-weight:700; min-height:auto; width:100%;
  }
  .cliente-detalle-accion.primary{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }
  .cliente-detalle-accion.warn{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
  .cliente-detalle-accion:active{ filter: brightness(0.95); }
  label{ font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; display:block; margin-bottom: 5px; }
  input, select{
    width:100%;
    min-width:0;
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 12px 12px;
    font-size: 1rem;
    min-height: 46px;
  }
  input:focus, select:focus{ outline: none; border-color: var(--accent-vivido); }
  button{ cursor:pointer; font-weight:600; border-radius: 8px; border: none; padding: 12px 14px; font-size: 0.92rem; min-height: 44px; transition: transform 0.08s ease, filter 0.15s ease, opacity 0.15s ease, background 0.15s ease; }
  button:active{ transform: scale(0.96); }
  .btn-primary{ background: var(--accent-vivido); color: #201400; margin-top: 4px; width: 100%; }
  .btn-primary:active{ filter: brightness(0.95); }
  .btn-primary:disabled{ opacity:0.5; }
  .btn-ghost{ background: transparent; border: 1px solid var(--line); color: var(--text-dim); }
  .btn-ghost:active{ color: var(--text); border-color: var(--text-dim); }
  .btn-small{ padding: 8px 10px; font-size: 0.76rem; min-height: 38px; }
  .btn-ok{ background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
  .btn-info{ background: var(--info-soft); color: var(--info); border: 1px solid var(--info); }

  /* ---- Config ---- */
  /* El ícono ancla visualmente cada fila (antes era puro texto contra el switch, se sentía como
     un renglón más de una lista larga en vez de un control con identidad propia). */
  .config-toggle-row{ display:flex; align-items:center; gap: 12px; }
  .config-toggle-icon{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background: var(--bg-panel-2); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .config-toggle-icon svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .config-toggle-text{ flex:1; min-width:0; }
  .config-toggle-label{ font-size: 0.92rem; font-weight: 600; }
  .config-toggle-sub{ font-size: 0.76rem; color: var(--text-dim); margin-top: 3px; line-height:1.35; }

  /* Texto largo de explicación, plegado por default: antes cada panel de Configuración era una
     pared de párrafos aunque el control en sí fuera un toggle o un select de una línea. Ahora el
     hint corto queda siempre visible y el resto (ejemplos, casos borde) se abre solo si hace falta. */
  .config-mas{ margin: 0 0 14px; }
  .config-mas summary{
    list-style:none; cursor:pointer; user-select:none;
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.78rem; font-weight:700; color: var(--accent);
    padding: 2px 0;
  }
  .config-mas summary::-webkit-details-marker{ display:none; }
  .config-mas summary::before{
    content:''; width:6px; height:6px; flex-shrink:0;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform: rotate(-45deg); transition: transform 0.15s ease; margin-top:-2px;
  }
  .config-mas[open] summary::before{ transform: rotate(45deg); margin-top:1px; }
  .config-mas p{ font-size:0.8rem; color: var(--text-dim); line-height:1.45; margin: 8px 0 0; }
  .switch{ position: relative; display:inline-block; width: 50px; height: 30px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .slider{ position:absolute; cursor:pointer; inset:0; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 30px; transition: background 0.15s ease, border-color 0.15s ease; }
  .switch .slider::before{ content:""; position:absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: var(--text-dim); border-radius:50%; transition: transform 0.15s ease, background 0.15s ease; }
  .switch input:checked + .slider{ background: var(--accent-soft); border-color: var(--accent-vivido); }
  .switch input:checked + .slider::before{ transform: translateX(20px); background: var(--accent-vivido); }
  .switch input:disabled + .slider{ opacity:.4; cursor:not-allowed; }
  .switch input:disabled + .slider::before{ cursor:not-allowed; }

  /* Config › Reservas online › Categorías: cada categoría es su propia tarjeta (antes filas apiladas sin separación) — mismo bg-panel-2+borde que .nueva-venta-resumen. */
  .cat-online-card{
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:14px;
    padding:14px;
  }
  /* Selector "Solo online"/"Todos": control segmentado en vez de dos botones sueltos. Aflojado (paso 1/3): sin fondo/borde propios, texto más chico — el tamaño de acá es el "grande" (categoría raíz), .cat-online-hijos lo achica más. */
  /* Sexta vuelta: sin flex:1 en los botones (antes el relleno del activo se estiraba a la mitad del selector, repitiéndose pesado en 6 categorías) — ahora cada uno mide su propio texto + padding chico. */
  .cat-online-modo{
    display:flex; gap:14px; margin-top:10px; padding-top:8px;
    border-top: 1px solid var(--line);
  }
  .cat-online-modo-btn{
    flex:none; padding:4px 9px; border-radius:6px; border: none; background: transparent;
    color: var(--text-dim); font-weight:500; font-size:0.7rem; line-height:1.2;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cat-online-modo-btn.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
  .cat-online-modo-btn:not(.active):not(:disabled):active{ background: var(--bg-panel); }
  .cat-online-modo-btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* Agrupamiento raíz/subcategoría (ver grupoArbolCategoriasOnline en app.js) — quinta vuelta: árbol simple con una sola señal de jerarquía (línea guía fina de ancho fijo 18px), .cat-online-hijos sin fondo/borde propio, y cada subcategoría en su .cat-online-card del mismo tamaño en cualquier nivel (antes se achicaba con la profundidad). */
  .cat-online-grupo{ margin-bottom:16px; }
  .cat-online-grupo:last-child{ margin-bottom:0; }
  /* Separación entre la tarjeta de una categoría y el panel de sus hijos — sin fondo propio en .cat-online-hijos, alcanza con un margin normal. */
  .cat-online-grupo:has(> .cat-online-hijos) > .cat-online-card{
    margin-bottom:10px;
  }
  .cat-online-hijos{
    margin:0;
    padding:0 0 0 18px;
    border-left:2px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  /* Categoría deshabilitada porque un ancestro está apagado (ver grupoArbolCategoriasOnline en app.js): toda la fila se atenúa para notarse de un vistazo. */
  .cat-online-grupo-deshabilitado > .cat-online-card{ opacity:.55; transition: opacity 0.15s ease; }
  /* Cada subcategoría es un .cat-online-grupo completo (soporta sub-subcategorías sin cambios de JS) — solo hace falta sacarle el margin propio, el gap del padre ya separa a las hermanas. */
  .cat-online-hijos > .cat-online-grupo{ margin-bottom:0; }
  /* Tarjeta de subcategoría: mismo lenguaje que la de nivel raíz, ahora del MISMO tamaño en cualquier profundidad — la jerarquía ya la comunica la línea guía + indent fijo. */
  .cat-online-hijos .cat-online-card{
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
  }
  /* Séptima vuelta: cuatro reglas quedaron pisadas de un diseño anterior (achicaba switch a 40×24 y etiqueta a 0.85rem en subcategorías) y nunca se sacaron — sacadas del todo, ahora miden exactamente lo mismo en cualquier nivel. */

  .config-limite-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); transition: opacity 0.15s ease; }
  .config-limite-fields.disabled{ opacity: 0.4; pointer-events: none; }
  .config-limite-fields.una-col{ grid-template-columns: 1fr; }
  .cfg-intervalo-ejemplo{ background: var(--bg-panel-2, rgba(255,255,255,0.03)); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; display:flex; flex-direction:column; gap:8px; }
  .cfg-intervalo-ejemplo-paso{ display:flex; align-items:baseline; gap:10px; font-size: 0.85rem; }
  .cfg-intervalo-ejemplo-num{ flex-shrink:0; width:18px; height:18px; border-radius:50%; background: var(--accent-vivido); color:#1a1409; font-size:0.7rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
  .cfg-intervalo-ejemplo-paso strong{ color: var(--accent); }
  .config-hint{ font-size: 0.8rem; color: var(--text-dim); margin: 0 0 12px; line-height: 1.4; }

  /* ---- Config › Reservas online (link público, anticipación, logo) ---- */
  .reservas-slug-fila{ display:flex; align-items:stretch; gap:8px; }
  .reservas-slug-fila .reservas-slug-wrap{ flex:1; min-width:0; }
  .reservas-slug-fila .btn-primary{ width:auto; flex-shrink:0; margin-top:0; }
  .reservas-slug-wrap{
    display:flex; align-items:stretch; background: var(--bg-panel-2);
    border: 1px solid var(--line); border-radius: 8px; overflow:hidden;
  }
  .reservas-slug-prefijo{
    display:flex; align-items:center; padding: 0 0 0 12px;
    font-size: 0.82rem; color: var(--text-dim); white-space:nowrap; flex-shrink:0;
  }
  .reservas-slug-wrap input{ border: none; background: transparent; min-height:44px; padding-left:4px; }
  .reservas-slug-wrap input:focus{ outline:none; }
  .reservas-slug-msg{ font-size: 0.76rem; margin-top: 6px; min-height: 1em; color: var(--text-dim); }
  .reservas-slug-msg.error{ color: #e05f5f; }
  .reservas-slug-msg.ok{ color: var(--ok); }
  .reservas-link-acciones{ display:flex; gap:8px; margin-top:12px; }
  .reservas-link-acciones .reservas-copiar-btn{ margin-top:0; flex:1; }

  /* WhatsApp de "Contacto para cancelaciones": mismo selector de código de
     país "cuadrito + lista desplegable" que usa la página pública de
     reservas (ver r-tel-grupo/r-pais-panel en reserva.css) — clases sin el
     "r-" porque son las de este archivo, no las de reserva.css, pero
     mismos nombres de partes para que sea fácil reconocer el mismo patrón
     entre los dos. */
  .tel-wrap{ position:relative; margin-bottom:0; }
  .tel-grupo{
    position:relative; display:flex; align-items:stretch;
    border-radius: 8px; border: 1px solid var(--line); background: var(--bg-panel-2);
    overflow:hidden;
  }
  .tel-grupo:focus-within{ border-color: var(--accent-vivido); }
  .tel-prefijo{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    padding:0 10px; border: none; border-right:1px solid var(--line);
    background: transparent; color: var(--text); font-size:0.92rem; font-weight:600;
    font-family:inherit; cursor:pointer; min-height:auto;
  }
  .pais-bandera{
    width:20px; height:14px; object-fit:cover; border-radius:2px; flex-shrink:0;
    box-shadow: 0 0 0 1px rgba(255,255,255,calc(0.08 * var(--highlight-strength)));
  }
  .pais-codigo{ color: var(--text); }
  .pais-flecha{
    width:12px; height:12px; stroke: var(--text-dim); fill: none; stroke-width:2;
    flex-shrink:0; margin-left:1px; transition: transform .15s;
  }
  .tel-grupo.abierto .pais-flecha{ transform: rotate(180deg); }
  .tel-num{
    flex:1; min-width:0; border: none; background: transparent; color: var(--text);
    font-size:1rem; font-family:inherit; padding:12px 12px; min-height:44px;
  }
  .tel-num:focus{ outline:none; border: none; }
  .pais-panel{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
    max-height:260px; overflow-y:auto; padding:6px; border-radius: var(--radius);
    background: var(--bg-panel-2); border: 1px solid var(--line);
    box-shadow: 0 16px 40px -10px rgba(0,0,0,calc(0.6 * var(--shadow-strength)));
  }
  .pais-opcion{
    display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px;
    cursor:pointer; font-size:0.9rem;
  }
  .pais-opcion:hover, .pais-opcion.activa{ background: var(--accent-soft); }
  .pais-opcion img{ width:22px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0; }
  .pais-opcion-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pais-opcion-codigo{ color: var(--text-dim); font-size:0.82rem; flex-shrink:0; }

  /* Mensaje al aprobar un turno: chips para insertar cada dato del turno
     (en vez de que el usuario tenga que escribir a mano algo como
     "{nombre}", que para alguien sin experiencia técnica lee como código)
     y una vista previa con datos de ejemplo, para que quede claro qué va a
     recibir el cliente antes de guardar. */
  /* Sin estilo propio antes: quedaba con la apariencia nativa del navegador (recuadro blanco),
     fuera de lugar en el tema oscuro, y con la manija de resize libre en la esquina. Auto-expandible
     con el mismo criterio que Notas y Ayuda y soporte (resize:none + overflow:hidden + JS en
     ajustarAlturaTextareaAuto de app.js): arranca en un tamaño fijo y crece con el texto hasta max-height. */
  #cfgReservasMensajeAprobacion{
    width:100%; resize:none; overflow:hidden;
    min-height:80px; max-height:260px; padding:12px 14px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    font-size:0.9rem; font-family:inherit; line-height:1.4; border-radius:10px;
  }
  #cfgReservasMensajeAprobacion:focus{ outline:none; border-color: var(--accent-vivido); }
  .mensaje-datos-chips{ display:flex; flex-wrap:wrap; gap:8px; margin: 2px 0 14px; }
  .mensaje-dato-chip{
    flex-shrink:0; background: var(--bg-panel-2, rgba(255,255,255,0.03)); border: 1px solid var(--line);
    color: var(--accent); border-radius: 20px; padding: 7px 12px; font-size: 0.78rem; font-weight:600;
  }
  .mensaje-dato-chip:active{ background: var(--accent-soft, var(--accent-vivido)); color:#1a1409; border-color: var(--accent-vivido); }
  .mensaje-preview{
    background: var(--bg-panel-2, rgba(255,255,255,0.03)); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin: 0 0 14px;
  }
  .mensaje-preview-label{ font-size: 0.72rem; text-transform:uppercase; letter-spacing:.03em; color: var(--text-dim); margin: 0 0 6px; }
  .mensaje-preview-texto{ font-size: 0.85rem; line-height:1.4; margin:0; white-space: pre-wrap; }

  .logo-picker{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .logo-picker-preview{
    width:84px; height:84px; border-radius:50%; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--accent-vivido) 12%, var(--bg-panel));
    color: var(--accent); border: 2px solid var(--accent-vivido);
  }
  .logo-picker-preview svg{ width:34px; height:34px; fill: none; stroke: currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .logo-picker-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
  .logo-picker-hint{ margin: 14px 0 10px; text-align:center; text-transform:uppercase; font-size:0.7rem; letter-spacing:0.5px; }
  .logo-icono-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
  .logo-icono-opt{
    aspect-ratio: 1; border-radius:12px; background: var(--bg-panel-2);
    border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; min-height:auto;
  }
  .logo-icono-opt svg{ width:22px; height:22px; fill: none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .logo-icono-opt.active{ background: var(--accent-vivido); border-color: var(--accent-vivido); color:#201400; }

  /* ---- Menú lateral del header (1.6) ---- Panel que entra deslizando desde la izquierda, mismo patrón de fondo que el sheet de acciones rápidas pero por el costado; #masLista se mueve adentro por JS al abrir. ---- */
  .menu-lateral-overlay{
    position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,0.55);
    opacity:0; pointer-events:none;
    transition: opacity 0.2s ease;
  }
  .menu-lateral-overlay.show{ opacity:1; pointer-events:auto; }
  .menu-lateral-panel{
    position:absolute; top:0; left:0; bottom:0;
    width: 78%; max-width: 300px;
    background: var(--bg-panel);
    border-right: 1px solid var(--line);
    padding: calc(18px + env(safe-area-inset-top)) 18px 18px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    display:flex; flex-direction:column;
  }
  .menu-lateral-overlay.show .menu-lateral-panel{ transform: translateX(0); }
  .menu-lateral-header{ display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
  .menu-lateral-header h2{ flex:1; font-size:1.05rem; font-weight:800; margin:0; color: var(--text); }
  .menu-lateral-body{ flex:1; }

  /* ---- Lista principal de "Más" ---- Reemplaza la vieja grilla de tarjetas por una lista de una columna, íconos todos del mismo tono en vez de un color por ítem — Configuración también se actualizó a este patrón (ver .config-hub-card). ---- */
  .mas-lista{ display:flex; flex-direction:column; }
  .mas-lista-item{
    display:flex; align-items:center; gap:12px; text-align:left;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 13px 2px; transition: opacity 0.15s ease;
  }
  .mas-lista-item:last-child{ border-bottom: none; }
  .mas-lista-item:active{ opacity: 0.7; }
  .mas-lista-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background: var(--bg-panel-2); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .mas-lista-icon svg{ width:19px; height:19px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .mas-lista-titulo{ flex:1; font-size:0.92rem; font-weight:700; color: var(--text); }
  .mas-lista-chevron{ width:18px; height:18px; stroke: var(--text-dim); fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

  /* Ítems "Próximamente": <button disabled> ya bloquea el click solo, no hace falta desactivar el :active — solo se atenúan y cambian la flecha por un badge. */
  .mas-lista-item-proximamente{ opacity: 0.55; }
  .mas-lista-badge{ flex-shrink:0; }

  /* ---- Hub de Configuración ---- Antes tarjetas con color propio por ítem en grilla de 2 columnas; ahora sigue el mismo patrón que .mas-lista (una columna, ícono neutro). Nombres de clase sin cambios porque app.js los usa para delegación de clicks. ---- */
  .config-hub-grid{ display:flex; flex-direction:column; }
  .config-hub-card{
    display:flex; align-items:center; gap:12px; text-align:left;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 13px 2px; transition: opacity 0.15s ease;
  }
  .config-hub-card:last-child{ border-bottom: none; }
  .config-hub-card:active{ opacity: 0.7; }
  .config-hub-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background: var(--bg-panel-2); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .config-hub-icon svg{ width:19px; height:19px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .config-hub-icon-vista,
  .config-hub-icon-horarios,
  .config-hub-icon-notif,
  .config-hub-icon-reservas,
  .config-hub-icon-novedades{ background: var(--bg-panel-2); color: var(--accent); }
  .config-hub-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .config-hub-titulo{ font-size:0.92rem; font-weight:700; color: var(--text); }
  .config-hub-desc{ font-size:0.75rem; color: var(--text-dim); line-height:1.35; }
  .config-hub-chevron{ width:18px; height:18px; stroke: var(--text-dim); fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

  /* ---- Contenido de cada pantalla de Config (.notas-page ya es flex-column): separación entre los paneles agrupados de ese tema. ---- */
  .config-seccion-body{ display:flex; flex-direction:column; gap:16px; }

  /* ---- Config en compu ---- El hub "Más" ya no necesita nada acá: acomodarMasSegunAncho() (app.js)
     mueve #masLista adentro de la sidebar en compu, así que #tab-config queda vacío ahí — no hay
     hueco que llenar. Lo que sí queda como pantalla propia ancha es cada pantalla de Configuración
     (Vista/Horarios/Notificaciones/Reservas online/etc, todas .notas-page-overlay con el mismo
     .config-seccion-body adentro): antes una sola columna larga estiraba cada tarjeta al ancho
     completo de --wrap-max (900-1280px), dejando toggles y forms cortos con un montón de aire muerto
     a los costados. Dos arreglos, sin tocar el HTML de ninguna pantalla (mismos ids/clases de siempre).
     OJO: este bloque tiene que ir DESPUÉS de las reglas base de arriba (mismos selectores,
     .config-hub-grid/.config-hub-card/.config-seccion-body) — puesto antes, la cascada CSS (misma
     especificidad, gana lo último en el archivo) las pisaba y esto no se veía en compu.

     1) El hub de Configuración (.config-hub-grid, la lista de tarjetas "Vista/Horarios/Notif./..."
        dentro de #masConfiguracionOverlay) pasa de lista de 1 columna a grilla de 2-3 columnas. */
  @media (min-width: 860px){
    .config-hub-grid{
      display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
      gap:8px 14px;
    }
    .config-hub-card{
      border: 1px solid var(--line); border-radius:12px; padding:14px;
      background: var(--bg-panel-2); border-bottom: 1px solid var(--line);
    }
    /* La regla de celular (.config-hub-card:last-child{border-bottom:none}) le sacaba el borde de
       abajo al último ítem de la lista de 1 columna; en la grilla de 2-3 columnas cada tarjeta es su
       propio recuadro cerrado, así que ese último ítem también necesita el borde completo. */
    .config-hub-card:last-child{ border-bottom: 1px solid var(--line); }
  }
  @media (min-width: 1400px){
    .config-hub-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  }

  /* 2) Cada .panel adentro de .config-seccion-body (una tarjeta de ajustes: "Apariencia", "Horario
        disponible", "Notificaciones", etc.) deja de estirarse a todo el ancho: se acomoda junto a la
        siguiente si entran las dos lado a lado (ej. Horarios: "Horario disponible" + "Sugerencia de
        próximo horario" quedan de a par) y si no entra, baja de línea sola — mismo criterio que una
        fila que se arma sola según lo que quepa, sin reordenar nada. El resto de los elementos sueltos
        de estas pantallas (textos .config-hint, formularios, el propio .config-hub-grid, etc.) siguen
        ocupando la fila entera como siempre, así no quedan textos angostos partidos en 2 líneas de más.
        align-items:flex-start evita que un panel corto se estire para igualar la altura del que tiene
        al lado (ej. "Horario disponible" corto al lado de "Días y horarios no disponibles", que es
        mucho más largo). */
  @media (min-width: 860px){
    .config-seccion-body{
      flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px;
    }
    .config-seccion-body > *{ flex: 1 1 100%; }
    .config-seccion-body > .panel{ flex: 1 1 420px; max-width: 620px; }
  }

  /* ---- Config › Reservas online, en compu: acá el flex-wrap de arriba se ve mal. La pantalla junta
     paneles muy chicos ("Anticipación", un solo input; "Apariencia de la página", un solo switch) con
     paneles largos ("Mensaje al aprobar un turno", "Horarios de turnos") — el panel chico queda
     emparejado con uno alto y la fila siguiente no puede arrancar hasta la altura del más alto de la
     fila anterior, dejando un bloque de aire muerto enorme debajo del panel chico (se ve la fila,
     literal, "desordenada": paneles a mitad de pantalla que no llegan ni cerca de alinearse). Un
     layout de columnas (column-count, no grid ni flex) acomoda cada panel apenas termina el anterior
     DENTRO de su misma columna, sin esperar a la otra — como una repisa de libros de distinto alto,
     no una tabla. break-inside:avoid evita que un panel se corte a la mitad entre una columna y la
     siguiente. Reemplaza (por especificidad de ID, sin tocar la regla de arriba) el flex-wrap de
     .config-seccion-body solo para esta pantalla. */
  @media (min-width: 860px){
    #configReservasOverlay .config-seccion-body{
      display: block; column-count: 2; column-gap: 16px;
    }
    #configReservasOverlay .config-seccion-body > *{
      break-inside: avoid; -webkit-column-break-inside: avoid;
      max-width: none; margin: 0 0 16px;
    }
    #configReservasOverlay .config-seccion-body > *:last-child{ margin-bottom: 0; }
  }

  /* ---- Pestañas de arriba en Config › Horarios ---- Reemplaza 5 paneles apilados por 2 tarjetas-pestaña (ícono+título+subtítulo) para ver de un vistazo qué hay adentro antes de entrar; solo un panel visible a la vez. ---- */
  .horarios-tabs{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:16px; }
  .horarios-tab-card{
    display:flex; align-items:center; gap:10px; text-align:left;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:14px;
    padding:10px 12px; min-height:auto;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .horarios-tab-card:active{ transform: scale(0.97); }
  .horarios-tab-icon{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background: var(--bg-panel); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .horarios-tab-icon svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .horarios-tab-info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .horarios-tab-titulo{ font-size:0.8rem; font-weight:800; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition: color 0.2s ease; }
  .horarios-tab-sub{ font-size:0.66rem; color: var(--text-dim); opacity:0.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .horarios-tab-card.active{ background: var(--accent-soft); border-color: var(--accent-vivido); }
  .horarios-tab-card.active .horarios-tab-icon{ background: var(--accent-vivido); color:#201400; }
  .horarios-tab-card.active .horarios-tab-titulo{ color: var(--accent); }
  .horarios-tab-panel{ display:none; }
  .horarios-tab-panel.active{ display:block; animation: subtabIn 0.15s ease; }

  /* ---- Horas recomendadas (config) ---- */
  .horas-recomendadas-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 14px; }
  .hora-recomendada-chip{
    display:flex; align-items:center; gap:8px; background: var(--bg-panel-2);
    border: 1px solid var(--line); border-radius:20px; padding:6px 6px 6px 14px;
    font-size:0.85rem; font-weight:600;
  }
  /* Ícono en vez del carácter "✕" suelto — mismo criterio que el resto de la
     app (trazo SVG, no glifo de texto), sobre el mismo círculo warn de antes. */
  .hora-recomendada-chip button{
    background: var(--warn-soft); color:var(--warn); border: none; border-radius:50%;
    width:22px; height:22px; min-height:auto; padding:0;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .hora-recomendada-chip button svg{ width:11px; height:11px; stroke: currentColor; fill: none; stroke-width:2.4; stroke-linecap:round; }
  .add-hora-row{ display:flex; gap:8px; }
  .add-hora-row .date-trigger{ flex:1; width:auto; min-width:0; }
  .add-hora-row input{ flex:1; }
  .add-hora-row button{ flex-shrink:0; }

  /* ---- Bloqueos por día y días puntuales bloqueados (config) ----
     Rediseño de estética (mismo criterio que .servicio-item/.cliente-item):
     el botón de quitar pasa del círculo warn suelto con "✕" de texto a un
     ícono cuadrado bg-panel + borde (como .servicio-icon-btn), con el trazo
     de tacho de basura en vez del glifo, y solo se pone en rojo al tocarlo. */
  .bloqueos-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: 14px; }
  .bloqueo-row{ display:flex; align-items:center; gap:10px; background: var(--bg-panel-2); border-radius: 10px; padding: 10px 12px; }
  .bloqueo-row .bloqueo-dia{ background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 4px 8px; border-radius: 6px; flex-shrink:0; }
  .bloqueo-row .bloqueo-rango{ flex:1; font-size: 0.88rem; font-weight: 600; }
  .bloqueo-row .bloqueo-quitar-btn{
    width:32px; height:32px; min-height:auto; padding:0; border-radius:9px; flex-shrink:0;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .bloqueo-row .bloqueo-quitar-btn svg{ width:14px; height:14px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .bloqueo-row .bloqueo-quitar-btn:active{ background: rgba(224,95,95,0.14); color:#e05f5f; border-color: rgba(224,95,95,0.4); }
  .empty-bloqueos{ color: var(--text-dim); font-size:0.82rem; background: var(--bg-panel-2); padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; }
  .add-bloqueo-form{ display:flex; flex-direction:column; gap:8px; }
  .add-bloqueo-form select{ width:100%; }
  .add-bloqueo-row2{ display:grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items:end; }
  .add-bloqueo-row2 button{ height: 46px; }

  /* ---- Búsqueda rápida de huecos libres ---- */
  .btn-buscar-hueco{ color: var(--info); border-color: var(--info); margin: 10px 0 4px; }
  .btn-buscar-hueco:active{ background: var(--info-soft); }
  #modalHuecosOverlay .modal-icon{ font-size: 1.3rem; }
  .huecos-list{ display:flex; flex-direction:column; gap:16px; margin: 4px 0 6px; max-height: 340px; overflow-y:auto; padding-right:2px; }
  .hueco-dia-grupo + .hueco-dia-grupo{ padding-top:14px; border-top: 1px solid var(--line); }
  .hueco-dia-header{
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    color: var(--info); margin-bottom:8px;
  }
  .hueco-horas-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .hueco-hora-btn{
    min-height:auto; padding:9px 16px; font-size:0.88rem; font-weight:700; border-radius:20px;
    background: var(--info-soft); border: 1px solid var(--info); color: var(--info);
  }
  .hueco-hora-btn:active{ background: var(--info); color: var(--bg-panel); }
  .huecos-empty{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
    background: var(--bg-panel-2); border-radius: 12px; padding: 24px 16px;
  }
  .huecos-empty-icon{ font-size:1.8rem; margin-bottom:4px; }
  .huecos-empty-titulo{ font-size:0.92rem; font-weight:700; color: var(--text); }
  .huecos-empty-sub{ font-size:0.8rem; color: var(--text-dim); line-height:1.45; }

  /* ---- Ventana con sub-pestañas dentro de un panel de config ---- */
  .subtabs{
    display:flex; gap:4px; background: var(--bg-panel-2); border-radius: 10px;
    padding: 4px; margin-bottom: 14px;
  }
  .subtab-btn{
    flex:1; background: transparent; border: none; color: var(--text-dim);
    font-size: 0.78rem; font-weight:700; padding: 9px 6px; border-radius: 7px;
    min-height:auto; white-space:nowrap;
  }
  .subtab-btn.active{ background: var(--accent-vivido); color:#201400; }
  .subtab-panel{ display:none; }
  .subtab-panel.active{ display:block; animation: subtabIn 0.15s ease; }
  @keyframes subtabIn{ from{ opacity:0; transform: translateY(2px); } to{ opacity:1; transform: translateY(0); } }

  /* ---- Días fijos no laborables (config) ---- Mismo lenguaje que .prio-chip (pill + punto currentColor con halo), en vez del cuadrado con punto verde fijo — punto y color cambian juntos a warn al marcar el día. ---- */
  .dias-fijos-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .dia-fijo-chip{
    display:flex; align-items:center; justify-content:center; gap:5px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    border-radius: 20px; padding: 10px 2px; min-height:auto; font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.3px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .dia-fijo-chip .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; opacity:0.7; flex-shrink:0; }
  .dia-fijo-chip.active{ color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
  .dia-fijo-chip.active .dot{ opacity:1; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

  /* ---- Servicios (catálogo) ---- Mismo patrón que .cliente-item (fila con fondo+borde, sin .panel envolviendo) y botones editar/borrar como íconos cuadrados, en vez del ✕ circular suelto de antes. ---- */
  .servicios-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: 14px; }
  @media (min-width: 860px){
    .servicios-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  }
  .servicio-item{
    display:flex; align-items:center; gap:10px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius:10px; padding:10px 12px;
  }
  .servicio-info{ flex:1; min-width:0; }
  .servicio-nombre{ font-weight:700; font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .servicio-meta{ color: var(--text-dim); font-size:0.78rem; margin-top:2px; }
  .servicio-meta .precio{ color: var(--accent); font-weight:700; }
  .servicio-icon-btn{
    width:36px; height:36px; min-height:auto; padding:0; border-radius:9px; flex-shrink:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .servicio-icon-btn svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .servicio-icon-btn.editar:active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }
  .servicio-icon-btn.borrar:active{ background: rgba(224,95,95,0.14); color:#e05f5f; border-color: rgba(224,95,95,0.4); }
  .add-servicio-form{ display:flex; flex-direction:column; gap:8px; }
  .add-servicio-row2{ display:grid; grid-template-columns: 1fr 1fr auto auto auto; gap: 8px; align-items:center; }
  /* Sin esto, un <select> con opción larga no se achica para entrar en su columna del grid (ancho mínimo por defecto = el de su contenido), empujando la fila más ancha que el formulario. */
  .add-servicio-row2 > *{ min-width:0; }
  .servicio-indefinido-check{ display:flex; align-items:center; gap:6px; font-size:0.78rem; color: var(--text-dim); white-space:nowrap; cursor:pointer; user-select:none; }
  .servicio-indefinido-check input{ width:16px; height:16px; accent-color: var(--accent-vivido); margin:0; }

  /* Paso 1 del plan de reserva pública: checkbox "Reservable online" + badge que lo señala en la lista de Servicios. */
  .servicio-reservable-check{ display:flex; align-items:flex-start; gap:8px; font-size:0.78rem; color: var(--text-dim); cursor:pointer; user-select:none; margin-top:10px; }
  .servicio-reservable-check input{ width:16px; height:16px; accent-color: var(--accent-vivido); margin:2px 0 0; flex-shrink:0; }
  .servicio-reservable-check input:disabled{ opacity:0.4; cursor:not-allowed; }
  .servicio-reservable-check input:disabled + span{ opacity:0.5; }
  .servicio-reservable-check small{ display:block; color: var(--text-dim); opacity:0.75; font-size:0.72rem; margin-top:1px; }
  .servicio-badge-online{ color: var(--accent); font-weight:700; }
  #fServicioDuracion:disabled{ opacity:0.45; }
  .empty-servicios{ color: var(--warn); font-size:0.82rem; background: var(--warn-soft); padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }

  /* ---- Modo edición: se distingue de "crear nuevo" ---- */
  .form-editando-badge{
    display:none;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid var(--info);
    font-size:0.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.4px;
    padding:5px 10px;
    border-radius:7px;
  }
  .add-servicio-form.form-editando{
    border: 1px solid var(--info);
    background: color-mix(in srgb, var(--info) 10%, var(--bg-panel));
    border-radius: var(--radius);
    padding: 12px;
    margin: 0 -4px;
  }
  .add-servicio-form.form-editando .form-editando-badge{ display:flex; }

  /* ---- Formulario de producto (Ventas): campos con etiqueta fija + ícono ---- Antes solo mostraba el nombre como placeholder (desaparecía al escribir); ahora la etiqueta queda siempre visible arriba. ---- */
  .producto-form-v2{ gap: 16px; }
  .ff-field{ display:flex; flex-direction:column; }
  .ff-field label{ margin-bottom: 6px; }
  .ff-opt{ text-transform:none; letter-spacing:0; font-weight:400; opacity:0.7; }
  /* "Stock actual ya pagado" al tope (ver actualizarEtiquetaStockPagadoEdit en app.js): mismo verde que el resto de los estados "ok" de la app, para que se note sin tener que leer el número. */
  .ff-opt-ok{ color: var(--ok); opacity:1; font-weight:600; }
  .ff-row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ff-input-wrap{ position:relative; display:flex; align-items:center; }
  .ff-input-wrap input{
    padding-left: 42px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ff-input-wrap:focus-within input{ box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16); }
  .ff-icon{
    position:absolute; left:13px; z-index:1;
    width:18px; height:18px;
    fill: none; stroke: var(--text-dim); stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;
    pointer-events:none;
    transition: stroke 0.15s ease;
  }
  .ff-icon-text{
    font-size:0.95rem; font-weight:700; color: var(--text-dim); line-height:1;
    transition: color 0.15s ease;
  }
  .ff-input-wrap:focus-within .ff-icon{ stroke: var(--accent-vivido); }
  .ff-input-wrap:focus-within .ff-icon-text{ color: var(--accent); }

  /* ---- Descuento de producto: selector de tipo + valor + preview ---- Mismo criterio visual que .nueva-venta-metodo-btn (grid de botones "chip"), pero de a 3 en vez de 2. */
  .producto-descuento-tipo{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:10px; }
  .producto-descuento-tipo-btn{
    padding:10px 6px; border-radius:10px; border: 1px solid var(--line); background: var(--bg-panel-2);
    color: var(--text-dim); font-weight:700; font-size:0.78rem;
  }
  .producto-descuento-tipo-btn.active{ background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); }
  /* Descuentos por cantidad (paso-1-descuentos-por-cantidad.md, Paso 3): mismos botones "chip" de arriba, pero de a 2 en vez de 3. */
  .dcant-tipo-2{ grid-template-columns:1fr 1fr; }
  .producto-descuento-preview{
    margin-top:10px; font-size:0.82rem; color: var(--text-dim);
    background: var(--bg-panel-2); border-radius:8px; padding:8px 10px;
  }
  .producto-descuento-preview strong{ color: var(--accent); }
  .producto-descuento-preview-antes{ text-decoration:line-through; opacity:0.6; margin-left:4px; }

  .panel.panel-editando{
    border-color: var(--info);
    background: color-mix(in srgb, var(--info) 6%, var(--bg-panel));
  }
  .panel.panel-editando > h2{ color: var(--info); }
  .panel.panel-editando #btnAgregarTurno{ background: var(--info); color:#0e1a20; }

  /* ---- Selección de servicios en el form de turno ---- */
  .servicios-check{ display:flex; flex-direction:column; gap:8px; }
  .servicio-check-item{ display:flex; align-items:center; gap:10px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; cursor:pointer; }
  .servicio-check-item input[type="checkbox"]{ width: 20px; height:20px; min-height:auto; flex-shrink:0; accent-color: var(--accent-vivido); }
  .servicio-check-item .nombre{ flex:1; font-size:0.92rem; }
  .servicio-check-item .detalle{ color: var(--accent); font-weight:700; font-size:0.82rem; text-align:right; }
  .servicio-check-item .detalle small{ display:block; color: var(--text-dim); font-weight:400; font-size:0.72rem; }

  .total-row{ display:flex; justify-content:space-between; align-items:center; background: var(--bg-panel-2); border-radius: 8px; padding: 12px; font-size:0.92rem; gap:10px; }
  .total-row span:first-child{ flex-shrink:1; min-width:0; }
  .total-row .num{ font-weight:700; color: var(--accent); font-size:1rem; flex-shrink:1; min-width:0; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }

  .badge{ font-size: 0.66rem; font-weight:700; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; white-space:nowrap; }
  .badge.pendiente{ background: var(--accent-soft); color: var(--accent); }
  .badge.completado{ background: var(--ok-soft); color: var(--ok); }
  .badge.cancelado{ background: var(--warn-soft); color: var(--warn); }
  .badge.pagado{ background: var(--ok-soft); color: var(--ok); }
  .badge.no-pagado{ background: var(--warn-soft); color: var(--warn); }
  .badge.info{ background: var(--info-soft); color: var(--info); }

  /* ---- Encabezado de tarjeta + botón de opciones (menú flotante) ---- */
  .kebab-btn{
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim);
    width: 34px; height: 34px; min-height:auto; padding:0; border-radius: 8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .kebab-btn:active{ color: var(--text); border-color: var(--text-dim); }
  .kebab-btn svg{ width:18px; height:18px; fill: currentColor; stroke: none; }

  /* z-index por encima de CUALQUIER modal (el más alto es .modal-overlay en 220): este menú se abre desde adentro de otros modales y quedaba tapado detrás. */
  .action-menu-backdrop{ position:fixed; inset:0; z-index:230; background: transparent; }
  /* Menú flotante (⋮ de turnos, productos, etc.). Estilo de menú contextual de escritorio: filas finas,
     ícono suelto (sin cajita de color), hover marcado y el color solo en el ícono — el texto de las
     acciones queda neutro salvo las destructivas. */
  .action-menu{
    position:fixed; z-index:231; min-width:232px; max-width: 280px;
    background: color-mix(in srgb, var(--bg-panel-2) 92%, var(--text) 3%);
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--text) 10%); border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 40px rgba(0,0,0,calc(0.45 * var(--shadow-strength))), 0 2px 8px rgba(0,0,0,calc(0.25 * var(--shadow-strength)));
    overflow:hidden; overflow-y:auto;
    /* Resta también la zona segura de arriba/abajo, si no un menú largo podía terminar con su límite de alto metido bajo el notch. */
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 32px);
    opacity:0; transform: scale(0.97) translateY(-3px); transform-origin: top right;
    transition: opacity 0.12s ease, transform 0.12s ease;
    padding: 5px;
  }
  .action-menu.show{ opacity:1; transform: scale(1) translateY(0); }
  .action-menu-item{
    display:flex; width:100%; align-items:center; gap:10px; text-align:left;
    background: transparent; border: none; cursor:pointer;
    color: var(--text); padding: 6px 10px; font-size: 0.86rem; font-weight:500;
    border-radius:8px; min-height: 32px; transition: background .1s ease;
  }
  /* ---- Fila de una opción del menú: el botón principal + (opcional) un botoncito 🗑 aparte, para poder borrar sin disparar la acción principal (ej. categorías de gasto creadas a mano). ---- */
  .action-menu-row{ display:flex; align-items:stretch; gap:2px; }
  .action-menu-row .action-menu-item{ flex:1; min-width:0; }
  .action-menu-delete-btn{
    flex-shrink:0; width:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
    background: transparent; border: none; border-radius:8px; color: var(--text-dim); padding:0;
  }
  .action-menu-delete-btn:hover, .action-menu-delete-btn:active{ background: var(--warn-soft); color: var(--warn); }
  .action-menu-delete-btn svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .action-menu-item.action-menu-sep{ margin-top:9px; position:relative; }
  .action-menu-item.action-menu-sep::before{
    content:''; position:absolute; top:-5px; left:6px; right:6px; height:1px; background: var(--line);
  }
  /* ---- Secciones del menú (turno: Turno / Servicios / Estado / Pago / Zona de peligro): todas a la vista, con un título chico. ---- */
  .action-menu-group.con-separador{ margin-top:5px; padding-top:5px; position:relative; }
  .action-menu-group.con-separador::before{
    content:''; position:absolute; top:0; left:6px; right:6px; height:1px; background: var(--line);
  }
  .action-menu-group-label{
    padding: 6px 10px 2px; font-size:0.68rem; font-weight:600; letter-spacing:0.02em;
    color: color-mix(in srgb, var(--text-dim) 85%, transparent);
  }
  .action-menu-item:hover, .action-menu-item:focus-visible{ background: color-mix(in srgb, var(--text) 7%, transparent); outline:none; }
  .action-menu-item:active{ background: color-mix(in srgb, var(--text) 11%, transparent); }
  .action-menu-icon{
    width:18px; height:18px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-dim);
  }
  .action-menu-icon svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .action-menu-label{ flex:1; min-width:0; }

  .action-menu-item.ok .action-menu-icon{ color: var(--ok); }
  .action-menu-item.info .action-menu-icon{ color: var(--info); }
  .action-menu-item.accent .action-menu-icon{ color: var(--accent); }

  .action-menu-item.warn{ color: var(--warn); }
  .action-menu-item.warn .action-menu-icon{ color: var(--warn); }
  .action-menu-item.warn:hover, .action-menu-item.warn:focus-visible{ background: var(--warn-soft); }
  .action-menu-item.warn:active{ background: color-mix(in srgb, var(--warn) 22%, transparent); }

  /* ---- Check de la opción seleccionada (ej. selector de categoría de gasto) ---- */
  .action-menu-check{ color: var(--accent); font-weight:800; font-size:0.9rem; flex-shrink:0; margin-left:4px; }

  /* ---- Botón que reemplaza al <select> nativo de categoría (ver Gastos): mismo tamaño/look que un input, pero con ícono + nombre de la categoría y una flecha, y abre el menú flotante de categorías en vez del picker feo del sistema operativo. ---- */
  .categoria-trigger{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius: 8px; padding: 8px 10px; font-size: 0.95rem; min-height: 46px; font-family: inherit; font-weight:600;
  }
  .categoria-trigger:active{ border-color: var(--accent-vivido); }
  .categoria-trigger-icon{
    width:26px; height:26px; border-radius:7px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: var(--bg-panel); color: var(--text-dim);
  }
  .categoria-trigger-icon svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .categoria-trigger-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .categoria-trigger-chevron{ width:18px; height:18px; flex-shrink:0; stroke: var(--text-dim); fill: none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }

  .toolbar{ display:flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
  /* Dentro de "Respaldo y sincronización" (7.2): acá .toolbar es el único contenido de la pantalla, así que no hace falta el margen/borde superior — un divisor con nada que separar arriba se veía como un hueco vacío de más. */
  .config-seccion-body .toolbar{ margin-top:0; padding-top:0; border-top: none; }
  .novedad-item{ padding: 12px 0; border-bottom: 1px solid var(--line); }
  .novedad-item:last-child{ border-bottom: none; }
  .novedad-item-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
  .novedad-item-version{ font-weight:700; font-size:0.9rem; color: var(--accent); }
  .novedad-item-fecha{ font-size:0.72rem; color: var(--text-dim); }
  .novedad-item ul{ margin:0; padding-left:18px; }
  .novedad-item li{ font-size:0.84rem; color: var(--text-dim); line-height:1.5; }
  .version-footer{ text-align:center; font-size:0.72rem; color: var(--text-dim); padding-top:12px; }
  .toolbar-left{ display:flex; gap:8px; }
  .toolbar-left button{ flex:1; }

  /* Barra de guardado flotante (Config › Reservas online, ver marcarConfigReservasSucio/
     ocultarBarraGuardarReservas en app.js): reemplaza al botón "Guardar" fijo al final del
     scroll — aparece sola apenas se toca algo, así no hace falta bajar hasta el final para
     guardar, y desaparece si no hay ningún cambio pendiente. Mismo patrón fixed+transform que
     #toast (ver más abajo), pero con dos botones en vez de un mensaje, y sin tapar el resto de
     la pantalla (no es un overlay de fondo, solo la franja de abajo). Entra con un pop suave
     (leve scale + overshoot) en vez de solo deslizarse, y el scroll de atrás (.notas-page, ver
     regla #configReservasOverlay:has(...) ahí) gana padding-bottom mientras está visible para
     que nunca quede tapando el último panel de contenido. */
  .config-guardar-flotante{
    position: fixed; left:12px; right:12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 95; display:flex; gap:8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 14px;
    padding: 10px; box-shadow: 0 10px 30px -8px rgba(0,0,0,calc(0.45 * var(--shadow-strength)));
    opacity:0; transform: translateY(28px) scale(0.96); pointer-events:none;
    transition: opacity .16s ease, transform .22s cubic-bezier(.22,.9,.32,1.16);
  }
  .config-guardar-flotante.visible{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
  .config-guardar-flotante .btn-ghost, .config-guardar-flotante .btn-primary{ margin:0; flex:1; }
  .config-guardar-flotante .btn-primary{ flex:2; }
  @media (min-width: 860px){
    .config-guardar-flotante{ left: calc(var(--sidebar-w) + 12px); }
  }

  #toast{
    position: fixed; bottom: calc(78px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
    background: var(--bg-panel-2); border: 1px solid var(--accent-vivido); color: var(--text);
    padding: 12px 16px; border-radius: 10px; font-size: 0.85rem;
    opacity: 0; transform: translateY(20px); transition: all 0.25s ease;
    pointer-events:none; text-align:center;
    /* Por encima de CUALQUIER overlay/modal (notas, ficha de cliente, perfil, confirmación) — un toast es un aviso momentáneo y siempre tiene que verse. */
    z-index: 300;
  }
  #toast.show{ opacity:1; transform: translateY(0); }
  /* Toast con botón de acción (ej: "Deshacer" al cobrar el carrito, 4.5) — a diferencia del toast normal, este sí necesita recibir toques. */
  #toast.con-accion{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    text-align:left; pointer-events:auto;
  }
  #toast .toast-msg{ flex:1; min-width:0; }
  #toast .toast-accion-btn{
    flex-shrink:0; background: none; border: none; color: var(--accent);
    font-weight:700; font-size:0.85rem; padding:4px 6px; cursor:pointer;
  }

  ::-webkit-scrollbar{ width: 8px; }
  ::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 8px; }

  /* ---- Modal de confirmación ---- */
  .modal-overlay{
    position: fixed; inset: 0; background: rgba(10,11,13,0.72);
    display:flex; align-items:flex-end; justify-content:center;
    /* Tiene que quedar por encima de la ficha de cliente / perfil (z-index 210): la confirmación de "Cerrar sesión" se dispara desde ahí y antes quedaba tapada por ese panel. */
    z-index: 220; opacity:0; pointer-events:none; transition: opacity 0.2s ease;
    padding: 0;
  }
  .modal-overlay.show{ opacity:1; pointer-events:auto; }
  /* modalCategoriaDescuentoOverlay reusa el estilo genérico de .cliente-detalle-overlay (z-index 210), pero se abre desde ADENTRO del árbol de categorías (z-index 220), por eso necesita un z-index propio por encima de ese 220. */
  #modalCategoriaDescuentoOverlay{ z-index: 221; }
  .modal-box{
    width:100%; max-width: 480px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: 16px 16px 0 0;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(16px); transition: transform 0.2s ease;
    box-shadow: 0 -8px 30px rgba(0,0,0,calc(0.4 * var(--shadow-strength)));
    /* Si el contenido (ej: varias versiones juntas en "Novedades") es más alto que la pantalla, se frena a los 85% del alto visible y es .modal-msg quien scrollea puertas adentro. */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }
  .modal-overlay.show .modal-box{ transform: translateY(0); }
  /* Mismo motivo que en .cliente-detalle-overlay (ver esa nota, más arriba): en compu la sidebar tiene que quedar siempre clickeable. */
  @media (min-width: 860px){
    .modal-overlay{ left: var(--sidebar-w); }
  }
  .modal-icon{
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--warn-soft); color: var(--warn);
    display:flex; align-items:center; justify-content:center;
    font-size: 1.1rem; font-weight:800; margin-bottom: 10px;
    flex: 0 0 auto;
  }
  .modal-title{ font-size: 1rem; font-weight:700; margin: 0 0 6px; flex: 0 0 auto; }
  .modal-msg{
    font-size: 0.88rem; color: var(--text-dim); line-height:1.45; margin: 0 0 18px;
    /* flex:1 1 auto + min-height:0 es lo que le permite a este bloque (y no a toda la caja) quedarse con el espacio sobrante y scrollear ahí adentro. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-msg strong{ color: var(--text); font-weight:600; }
  .modal-actions{ display:flex; gap:10px; flex: 0 0 auto; }
  .modal-actions button{ flex:1; }
  .modal-actions-col{ flex-direction: column; gap:8px; }

  /* ---- Checkbox dentro de un modal (ej: "Repone el stock" en Devoluciones) ---- */
  .modal-check-row{
    display:flex; align-items:flex-start; gap:10px;
    background: var(--bg-panel-2); border-radius:10px; padding:12px;
    cursor:pointer; user-select:none;
  }
  .modal-check-row input[type="checkbox"]{ width:20px; height:20px; min-height:auto; flex-shrink:0; accent-color: var(--accent-vivido); margin:1px 0 0; }
  .modal-check-row span{ font-size:0.85rem; color: var(--text); line-height:1.35; }

  /* ---- Buscador dentro de un modal (ej: filtrar por cliente en Devoluciones) ---- */
  .modal-search-field{ margin: 0 0 12px; flex: 0 0 auto; }
  .modal-search-field input{ text-align:left; font-size:0.88rem; font-weight:500; }

  /* ---- Selector en árbol de categorías (Paso 2, modal #modalCategoriaArbolOverlay) ---- Tamaño y scroll del breadcrumb y la lista, copiado del mismo patrón que .modal-search-field y .huecos-list / .devoluciones-ventas-list. El contenido lo arma el JS (ver renderCategoriaArbol en app.js). */
  .categoria-arbol-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin: 0 0 12px; flex: 0 0 auto; }
  .categoria-arbol-hint{ color: var(--text-dim); font-size:0.74rem; line-height:1.35; margin: -6px 0 10px; flex: 0 0 auto; }
  .categoria-arbol-list{ margin: 4px 0 6px; max-height: 360px; overflow-y:auto; padding-right:2px; flex: 1 1 auto; min-height:0; }
  /* El contenido real (filas o empty-msg) va DENTRO de este wrapper en vez de directo en .categoria-arbol-list. Motivo: ver MARGEN_AUTOSCROLL_DRAG en app.js — durante el arrastre, el auto-scroll mueve este wrapper con `transform: translateY(...)` en vez del scrollTop real, porque eso sí se pinta en vivo durante un touch capturado. */

  /* Migas de pan: cada nivel del camino hasta la categoría actual. La última (donde se está parado) queda fija en vez de ser un botón — no tiene sentido "volver" al lugar en el que ya se está. */
  .categoria-arbol-crumb{
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; font-weight:600;
    min-height:auto; white-space:nowrap; max-width: 140px; overflow:hidden; text-overflow:ellipsis;
  }
  .categoria-arbol-crumb:active{ border-color: var(--accent-vivido); color: var(--accent); }
  .categoria-arbol-crumb.active,
  .categoria-arbol-crumb:disabled{
    background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); cursor:default;
  }
  .categoria-arbol-crumb-sep{ color: var(--text-dim); font-size:0.78rem; flex-shrink:0; }

  /* Filas de la lista: cada una es una categoría del nivel actual, con dos botones hermanos — el principal entra a ver sus subcategorías (ver onClickLista en app.js) y el kebab (⋮) abre renombrar/borrar (ver onClickOpciones). */
  .categoria-arbol-row{
    display:flex; align-items:stretch; gap:8px; width:100%; border-radius:10px;
    transition: box-shadow 0.12s ease;
  }
  .categoria-arbol-row-main{
    display:flex; align-items:center; gap:10px; width:100%; flex:1; min-width:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 12px; min-height:auto; text-align:left;
    /* Antes era "pan-y" y recién se ponía en "none" desde JS al activar el arrastre, pero el navegador fija touch-action en el toque inicial y no lo reevalúa después, así que cambiarlo 380ms más tarde no tenía efecto y el scroll cancelaba el arrastre a mitad de camino. Con "none" fijo desde el vamos, el scroll de un toque corto lo hace a mano el JS (ver el pointermove en app.js). */
    touch-action: none; user-select:none; -webkit-user-select:none;
    -webkit-touch-callout: none;
    transition: border-color 0.12s ease, background-color 0.12s ease;
  }
  /* transform:none: mismo motivo que .categoria-header:active en Ventas — sin esto, la regla genérica `button:active{transform:scale(0.96)}` competía con el `transform` que le pone JS a la fila mientras se arrastra. */
  .categoria-arbol-row-main:active{ border-color: var(--accent-vivido); transform:none; }
  .categoria-arbol-row .kebab-btn{ flex-shrink:0; align-self:center; }
  .categoria-arbol-row-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.9rem; font-weight:600; color: var(--text); }
  .categoria-arbol-row-count{
    flex-shrink:0; background: var(--accent-soft); color: var(--accent);
    border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; font-weight:700;
  }
  /* Badge de "esta categoría tiene un descuento simple cargado" (ver tieneDescuentoCategoria en app.js) — mismo lenguaje visual que .categoria-arbol-row-count, en verde (--ok) para distinguirlo de un dato neutral. */
  .categoria-arbol-row-descuento{
    flex-shrink:0; background: rgba(var(--ok-rgb),0.14); color: var(--ok);
    border-radius: 20px; padding: 2px 8px; font-size: 0.7rem; font-weight:700;
  }
  .categoria-arbol-row-chevron{ flex-shrink:0; width:18px; height:18px; stroke: var(--text-dim); fill: none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }

  /* ---- Arrastre de una fila del árbol (reordenar / anidar) ---- .arrastrando: la fila sujetada, se levanta con sombra y sigue al dedo con `transform` desde JS. .drag-sobre-antes/-despues: línea de inserción arriba/abajo. .drag-sobre-dentro: resalta la fila si soltar ahí la convierte en subcategoría en vez de reordenar. */
  .categoria-arbol-row.arrastrando{ position:relative; z-index:5; }
  .categoria-arbol-row.arrastrando .categoria-arbol-row-main{
    border-color: var(--accent-vivido); box-shadow: 0 8px 20px rgba(0,0,0,calc(0.35 * var(--shadow-strength))); opacity:0.97;
  }
  .categoria-arbol-row.drag-sobre-antes{ box-shadow: inset 0 2px 0 0 var(--accent-vivido); }
  .categoria-arbol-row.drag-sobre-despues{ box-shadow: inset 0 -2px 0 0 var(--accent-vivido); }
  .categoria-arbol-row.drag-sobre-dentro .categoria-arbol-row-main{
    border-color: var(--accent-vivido); background: var(--accent-soft);
  }

  /* Input inline para crear una subcategoría dentro del nivel actual, sin salir del modal (aparece al tocar "+ Nueva subcategoría acá adentro"). */
  .categoria-arbol-nueva-row{ display:flex; gap:8px; margin: 0 0 10px; flex: 0 0 auto; }
  .categoria-arbol-nueva-row input{ flex:1; text-align:left; font-size:0.88rem; font-weight:500; }
  .categoria-arbol-nueva-row .btn-primary{ flex-shrink:0; width:auto; }

  /* ---- Devoluciones: historial de ventas de un producto, con acción de devolver ---- */
  .devoluciones-ventas-list{ display:flex; flex-direction:column; margin: 4px 0 6px; max-height: 360px; overflow-y:auto; padding-right:2px; flex: 1 1 auto; min-height:0; }
  .venta-hist-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: var(--bg-panel-2); border-radius: 10px; padding: 10px 12px; margin-bottom:8px; }
  .venta-hist-info{ flex:1; min-width:0; }
  .venta-hist-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .venta-hist-cant{ font-size:0.86rem; font-weight:700; color: var(--text); }
  .venta-hist-monto{ font-size:0.86rem; font-weight:700; color: var(--ok); white-space:nowrap; }
  .venta-hist-meta{ font-size:0.72rem; color: var(--text-dim); margin-top:2px; }
  .venta-hist-row .btn-small{ flex-shrink:0; }

  /* Filas del buscador de "Fusionar producto": reusa .pg-row/.pg-foto/.pg-info, pero cada fila es un <button> clickeable entero, no solo texto — se resetean los estilos nativos y se agrega el fondo/hover de .venta-hist-row. */
  .fusionar-row{
    width:100%; text-align:left; background: var(--bg-panel-2); border: none;
    border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer;
    font-family:inherit; color:inherit;
  }
  .fusionar-row:active{ opacity:.8; }
  /* Aviso en un candidato "huérfano" del buscador de fusión: un producto ya borrado del catálogo pero con ventas viejas con su id (ver renderListaFusionarProducto). Mismo tamaño/posición que .pg-categoria, en itálica para diferenciarse de una categoría real. */
  .pg-categoria-huerfano{ font-style:italic; }

  /* ---- Modal de "cerrar caja" ---- */
  .cierre-caja-fecha{ font-size:0.78rem; color: var(--text-dim); text-transform: capitalize; margin: 0 0 10px; flex: 0 0 auto; }
  .cierre-caja-row{ display:flex; justify-content:space-between; align-items:center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size:0.86rem; }
  .cierre-caja-row:last-child{ border-bottom: none; }
  .cierre-caja-row .ccj-lbl{ color: var(--text-dim); }
  .cierre-caja-row .ccj-val{ font-weight:700; color: var(--text); white-space:nowrap; }
  .cierre-caja-row-total{ margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); border-bottom: none; }
  .cierre-caja-row-total .ccj-lbl{ color: var(--text); font-weight:600; }
  .cierre-caja-row-total .ccj-val{ font-size:0.95rem; }

  @media (min-width: 480px){
    .modal-overlay{ align-items:center; }
    .modal-box{ border-radius: 16px; }
  }

  /* ---- Página de notas y tareas pendientes (pantalla aparte) ---- Tema "libreta/agenda": la franja de ancladas imita notitas con alfiler (rotación por nota, como en un corcho), y el resto se agrupa en secciones (Vencidas / Hoy / Próximas / Sin fecha / Completadas) para ver de un vistazo qué es urgente. */
  .notas-page-overlay{
    position: fixed; inset: 0; background: var(--bg);
    z-index: 90; transform: translateX(100%); transition: transform 0.25s ease;
    display:flex; flex-direction:column; visibility:hidden;
  }
  .notas-page-overlay.show{ transform: translateX(0); visibility:visible; }
  @media (min-width: 860px){
    .notas-page-overlay{ left: var(--sidebar-w); }
  }
  .notas-page{
    flex:1; overflow-y:auto; width:100%; max-width:var(--wrap-max); margin:0 auto;
    padding: calc(16px + env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column;
    transition: padding-bottom .2s ease;
  }
  /* Config › Reservas online: cuando la barra flotante de Guardar/Descartar está visible, el scroll
     gana el mismo aire extra abajo (transición suave por el padding-bottom de arriba) para que la
     barra nunca tape el último panel — antes el padding de abajo era fijo y en celular la barra quedaba
     flotando encima del último bloque de contenido sin dejar ver (ni tocar) lo que hubiera detrás. */
  #configReservasOverlay:has(.config-guardar-flotante.visible) .notas-page{
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  .notas-page-header{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .notas-page-header h2{ flex:1; font-size:1.05rem; font-weight:800; margin:0; color: var(--text); }
  .notas-back-btn, .notas-clear-btn{
    width:36px; height:36px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .notas-back-btn svg, .notas-clear-btn svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.8; }
  .notas-back-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .notas-clear-btn:active{ color: var(--warn); border-color: var(--warn); }

  .notas-resumen{ color: var(--text-dim); font-size:0.8rem; margin: 0 0 14px 2px; min-height: 1em; }

  .notas-add-form{
    position: relative; overflow:hidden; flex-shrink:0;
    background: linear-gradient(165deg, var(--bg-panel), var(--bg-panel-2));
    border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
    padding:14px; margin-bottom:18px; display:flex; flex-direction:column; gap:11px;
    box-shadow: 0 6px 18px -12px rgba(0,0,0,calc(0.5 * var(--shadow-strength)));
    transition: border-color 0.15s ease;
  }
  /* Filito dorado arriba, como el canto de una libreta forrada */
  .notas-add-form::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent, var(--accent-vivido), transparent);
    opacity:0.55;
  }
  .notas-add-form:focus-within{ border-color: color-mix(in srgb, var(--accent-vivido) 45%, var(--line)); }
  .notas-add-input-wrap textarea{
    margin:0; width:100%; resize:none; overflow:hidden;
    min-height:44px; max-height:220px; padding:10px 12px;
    font-family:inherit; font-size:0.92rem; line-height:1.4; color: var(--text);
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:12px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .notas-add-input-wrap textarea::placeholder{ color: var(--text-dim); }
  .notas-add-input-wrap textarea:focus{
    outline:none; border-color: var(--accent-vivido); background: var(--bg-panel);
  }
  .notas-add-opciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
  .notas-prioridad-chips{ display:flex; gap:6px; }
  .prio-chip{
    display:inline-flex; align-items:center; gap:6px;
    min-height:auto; padding:6px 11px 6px 9px; border-radius: 20px; font-size:0.72rem; font-weight:700;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .prio-chip .prio-dot{ width:7px; height:7px; border-radius:50%; background: currentColor; flex-shrink:0; opacity:0.8; }
  .prio-chip.normal .prio-dot{ background: var(--text-dim); }
  .prio-chip.importante .prio-dot{ background: var(--info); }
  .prio-chip.urgente .prio-dot{ background: var(--warn); }
  .prio-chip.active{ border-color: currentColor; }
  .prio-chip.normal.active{ color: var(--text); background: var(--bg-panel); border-color: var(--text-dim); }
  .prio-chip.importante.active{ color: var(--info); background: var(--info-soft); }
  .prio-chip.urgente.active{ color: var(--warn); background: var(--warn-soft); }
  .prio-chip.active .prio-dot{ opacity:1; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

  .notas-fecha-btn{
    display:inline-flex; align-items:center; gap:6px;
    width:auto; min-height:auto; padding:6px 12px 6px 10px; font-size:0.75rem; margin:0;
    border-radius:20px; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .notas-fecha-btn svg{ width:14px; height:14px; stroke: currentColor; fill: none; stroke-width:1.8; flex-shrink:0; }
  .notas-fecha-btn.set{ color: var(--accent); background: var(--accent-soft); border-color: var(--accent-vivido); }

  .notas-filtros{ display:flex; gap:6px; margin-bottom:14px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius:12px; padding:4px; }
  .filtro-chip{
    flex:1; min-height:auto; padding:8px 6px; border-radius:9px; font-size:0.75rem; font-weight:700;
    background: transparent; border: 1px solid transparent; color: var(--text-dim);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .filtro-chip.active{ background: var(--accent-vivido); border-color: transparent; color:#201400; }

  /* ---- Orden de notas nuevas (arriba/abajo) ---- Un solo ícono chico al lado de los filtros de Notas
     en vez de un selector propio: ocupa lo mismo que un chip más, no una fila/sección aparte. La flecha
     apunta para arriba por default (nuevas arriba, el orden de siempre) y gira 180° cuando el dueño
     prefiere que las nuevas caigan abajo — así el estado se lee de un vistazo sin texto. Wrapper propio
     (.notas-filtros-row) en vez de meter el botón adentro de .notas-filtros, que esa clase la reusan
     Ventas/Estadísticas y no deberían heredar este botón. */
  .notas-filtros-row{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }
  .notas-filtros-row .notas-filtros{ flex:1; margin-bottom:0; }
  .notas-orden-btn{
    flex-shrink:0; width:38px; height:38px; min-height:auto; padding:0; border-radius:10px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .notas-orden-btn svg{ width:17px; height:17px; stroke: currentColor; fill: none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition: transform 0.18s ease; }
  .notas-orden-btn.abajo svg{ transform: rotate(180deg); }
  .notas-orden-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }

  /* ---- Filtro típico al lado del buscador (Turnos/Ventas/Clientes) ---- Reemplaza el sistema viejo donde .notas-filtros/.filtro-chip vivían siempre visibles en su propia fila; ahora el buscador queda solo y el filtro es un ícono de embudo que despliega un popover con esas mismas opciones. */
  .buscar-filtro-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .buscar-filtro-row .ff-input-wrap{ flex:1; min-width:0; margin-bottom:0; }
  .buscar-filtro-row .ff-input-wrap input{ min-height:44px; }

  .filtro-dropdown{ position:relative; flex-shrink:0; }
  .filtro-btn{
    width:44px; height:44px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; position:relative;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .filtro-btn svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .filtro-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .filtro-btn.active{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent-vivido); }
  /* Puntito que marca que hay un filtro puesto (algo distinto de "Todos"), aunque el popover esté cerrado — para que un filtro activo nunca quede escondido sin que se note desde afuera. */
  .filtro-btn.con-filtro::after{
    content:''; position:absolute; top:1px; right:1px; width:10px; height:10px;
    border-radius:50%; background: var(--accent-vivido); border: 2px solid var(--bg-panel-2);
  }

  .filtro-popover{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:40;
    width:min(300px, 85vw); max-height:70vh; overflow-y:auto;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding:14px; box-shadow: 0 14px 32px rgba(0,0,0,calc(0.45 * var(--shadow-strength)));
  }
  .filtro-popover.open{ display:block; }
  .filtro-popover-header{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
    font-size:0.82rem; font-weight:700; color: var(--text);
  }
  .filtro-popover-cerrar{
    width:26px; height:26px; min-height:auto; padding:0; border-radius:50%;
    background: transparent; border: none; color: var(--text-dim); display:flex; align-items:center; justify-content:center;
  }
  .filtro-popover-cerrar svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2.2; stroke-linecap:round; }
  .filtro-popover-titulo{
    font-size:0.68rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px;
    margin: 12px 0 6px;
  }
  .filtro-popover-titulo:first-of-type{ margin-top:0; }
  .filtro-popover .notas-filtros{ flex-wrap:wrap; margin-bottom:0; }
  .filtro-popover .notas-filtros .filtro-chip{ flex: 1 1 auto; min-width:84px; }
  .filtro-popover-mes{ width:100%; justify-content:center; margin-bottom:10px; }
  .filtro-popover-limpiar{ width:100%; margin-top:12px; }

  /* ---- Estadísticas: selector de pestañas (Balance/Ingresos/Gastos/Resumen general), reusa .notas-filtros/.filtro-chip. "Resumen general" es más largo que el resto, así que acá el chip baja el padding/tamaño de letra para que las 4 entren en una fila. ---- */
  .estad-tabs .filtro-chip{ padding:8px 4px; font-size:0.68rem; }

  .notas-list{ display:flex; flex-direction:column; gap:8px; flex:1; }

  /* ---- Reservas pendientes (badge de header + página, ver reservasPendientesOverlay en index.html). La página reusa .notas-page-overlay/.notas-page — acá solo van la lista de tarjetas y el estado vacío, propios de esta pantalla. ---- */
  .reserva-pend-list{ display:flex; flex-direction:column; gap:8px; }
  .reserva-pend-vacio{ color: var(--text-dim); font-size:0.85rem; text-align:center; padding: 40px 10px; }
  .reserva-pend-item{
    display:flex; flex-direction:column; gap:10px; background: var(--bg-panel);
    border: 1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; padding:12px 14px;
  }
  /* Pedido de producto (pestaña Catálogo, distinto de un turno): mismo patrón de tarjeta, pero con el borde/etiqueta en var(--info) para que de un vistazo se note que no es un turno. */
  .reserva-pend-item.tipo-producto{ border-left-color: var(--info); }
  .reserva-pend-tipo{
    display:inline-block; font-size:0.68rem; font-weight:800; text-transform:uppercase;
    letter-spacing:0.03em; padding:2px 7px; border-radius:6px; margin-bottom:2px;
    background: var(--info-soft); color: var(--info);
  }
  .reserva-pend-nombre{ font-weight:700; font-size:0.95rem; }
  .reserva-pend-meta{ color: var(--text-dim); font-size:0.8rem; margin-top:2px; }
  .reserva-pend-contacto{ color: var(--text-dim); font-size:0.78rem; margin-top:4px; }
  .reserva-pend-nota{
    color: var(--text); font-size:0.8rem; margin-top:6px; padding:8px 10px;
    background: var(--bg-panel-2); border-radius:8px; line-height:1.35;
    white-space:pre-wrap; word-break:break-word;
  }
  /* Grupo de reservas vinculadas (ver reservasVinculadas/htmlReservaPendItem en app.js): turno + pedido de catálogo agregados desde reserva.js, antes se mostraban como dos tarjetas sueltas con un aviso de texto; ahora se pintan en un mismo marco punteado con una placa dorada de "eslabón" en la costura, para que se entienda que vienen juntas sin leer nada. */
  .reserva-pend-grupo{
    display:flex; flex-direction:column; gap:4px;
    border: 1px dashed color-mix(in srgb, var(--accent-vivido) 55%, transparent);
    border-radius:14px; padding:8px;
    background: color-mix(in srgb, var(--accent-vivido) 8%, var(--bg-panel-2));
  }
  .reserva-pend-grupo .reserva-pend-item{ background: var(--bg-panel); }
  .reserva-pend-nexo{
    align-self:center; display:flex; align-items:center; gap:5px;
    margin:-11px 0; z-index:1; position:relative;
    padding:3px 11px; border-radius:20px;
    background: var(--accent-vivido); color:#16181c;
    font-size:0.66rem; font-weight:800; letter-spacing:0.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,calc(0.35 * var(--shadow-strength)));
    white-space:nowrap;
  }
  .reserva-pend-nexo-icono{ font-size:0.75rem; }
  .reserva-pend-acciones{ display:flex; gap:8px; }
  .reserva-pend-btn{
    flex:1; padding:9px 10px; border-radius:9px; font-size:0.85rem; font-weight:700;
    border: 1px solid var(--line); background: var(--bg-panel-2); color: var(--text); cursor:pointer;
  }
  .reserva-pend-btn.aprobar{ background: var(--ok-soft); border-color: rgba(var(--ok-rgb),0.4); color: var(--ok); }
  .reserva-pend-btn.rechazar{ background: var(--warn-soft); border-color: rgba(var(--warn-rgb),0.4); color: var(--warn); }
  .reserva-pend-btn:active{ opacity:0.75; }

  /* ---- Pestaña "Aprobadas" de Reservas online: una tarjeta por pedido, con una fila tocable por turno y otra por productos (ver htmlPedidoAprobado en app.js). Cada fila lleva a donde se gestiona de verdad (agenda / Ventas) y muestra el estado como chip. ---- */
  .pedido-aprob-card{
    display:flex; flex-direction:column; gap:10px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius:12px; padding:12px;
  }
  .pedido-aprob-header{ padding: 0 2px; }
  .pedido-aprob-filas{ display:flex; flex-direction:column; gap:6px; }
  .pedido-fila{
    display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 10px;
    border: 1px solid var(--line); border-radius:10px; background: var(--bg-panel-2);
    color: var(--text); font: inherit; text-align:left; cursor:pointer; touch-action:manipulation;
  }
  .pedido-fila:active{ transform:none; filter:brightness(0.96); }
  .pedido-fila-icono{
    flex:0 0 32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--accent-vivido) 16%, transparent); color: var(--accent);
  }
  .pedido-fila-icono.producto{ background: var(--info-soft); color: var(--info); }
  .pedido-fila-icono svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .pedido-fila-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .pedido-fila-titulo{ font-weight:700; font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pedido-fila-sub{ font-size:0.74rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pedido-fila-flecha{ color: var(--text-dim); font-size:1.1rem; line-height:1; }
  .pedido-chip{
    flex-shrink:0; font-size:0.68rem; font-weight:800; padding:4px 9px; border-radius:20px;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  }
  .pedido-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
  .pedido-chip.ok{ background: var(--ok-soft); color: var(--ok); }
  .pedido-chip.pend{ background: var(--warn-soft); color: var(--warn); }
  .pedido-chip.info{ background: var(--info-soft); color: var(--info); }
  .pedido-chip.cancelado{ background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--line); }
  .pedido-aprob-cancelar{
    align-self:flex-end; padding:6px 2px; border:none; background:none; font: inherit;
    color: var(--text-dim); font-weight:600; font-size:0.76rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  }
  .reserva-pend-aprobar-todo{ margin-top:6px; flex:none; width:100%; }
  .reserva-pend-btn:disabled{ opacity:0.55; cursor:default; }

  /* Ventas › "Reservas online por entregar": misma tarjeta que Fiado pendiente, en celeste de "info" para no confundirlas. */
  .pedidos-online-card{ border-left-color: var(--info); }
  .pedidos-online-count{ color: var(--info); background: var(--info-soft); }
  .pedido-online-monto{ color: var(--info); }
  .fiados-pendientes-card.colapsado #pedidosOnlineList{ display:none; }
  #pedidosOnlineList{ padding:0 12px 12px 14px; max-height:360px; overflow-y:auto; }

  /* Recuadro amarillo titilando: al llegar a un turno o pedido desde Reservas online, para saber cuál es de esa persona. */
  @keyframes destacadoTitila{
    0%, 100%{ box-shadow: 0 0 0 2px #ffd400, 0 0 14px 2px rgba(255,212,0,0.55); }
    50%{ box-shadow: 0 0 0 2px rgba(255,212,0,0.25), 0 0 0 0 rgba(255,212,0,0); }
  }
  /* Turno elegido desde Reservas online: se ilumina brevemente (dos destellos del color de acento) al llegar a la agenda. */
  @keyframes turnoDestacadoBrillo{
    0%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); transform: scale(1); }
    25%{ box-shadow: 0 0 0 3px var(--accent-vivido), 0 0 22px 4px rgba(var(--accent-rgb),0.55); transform: scale(1.025); }
    60%{ box-shadow: 0 0 0 2px var(--accent-vivido), 0 0 10px 1px rgba(var(--accent-rgb),0.3); transform: scale(1); }
    100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); transform: scale(1); }
  }
  .agenda-block.turno-destacado{ animation: turnoDestacadoBrillo 1.3s ease-out 2; z-index:7; outline: none; }
  .pedido-online-item.pedido-destacado{ animation: destacadoTitila 0.9s ease-in-out infinite; border-radius:10px; padding-left:8px; padding-right:8px; }

  /* ---- Franja de ancladas: notitas "prendidas" con un leve giro, como en un corcho ---- */
  .notas-pin-strip-wrap{ margin-bottom: 4px; }
  .notas-pin-strip-titulo{
    display:flex; align-items:center; gap:6px; font-size:0.7rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.5px; color: var(--accent); margin: 0 2px 10px;
  }
  .notas-pin-strip-titulo svg{ width:13px; height:13px; fill: var(--accent-vivido); stroke: none; }
  .notas-pin-strip{
    display:flex; gap:12px; overflow-x:auto; padding: 4px 4px 12px; margin: 0 -4px 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling:touch;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .notas-pin-strip::-webkit-scrollbar{ display:none; }
  /* Arrastre con mouse en desktop (ver actualizarFadeNotasPin/arrastre en app.js): cursor "agarrar" en reposo, "agarrando" + sin scroll-snap ni selección de texto mientras se arrastra, para que no trabe el gesto. */
  .notas-pin-strip{ cursor: grab; }
  .notas-pin-strip.arrastrando{
    cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto;
  }
  .notas-pin-strip.arrastrando, .notas-pin-strip.arrastrando *{
    user-select: none; -webkit-user-select: none;
  }
  .notas-pin-strip .nota-item{
    flex: 0 0 auto; width: 176px; scroll-snap-align:start;
    flex-direction:column; align-items:stretch; gap:8px; padding:12px 12px 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,calc(0.28 * var(--shadow-strength)));
  }
  .notas-pin-strip .nota-item:nth-child(3n+1){ transform: rotate(-1.6deg); }
  .notas-pin-strip .nota-item:nth-child(3n+2){ transform: rotate(1.3deg); }
  .notas-pin-strip .nota-item:nth-child(3n){ transform: rotate(-0.7deg); }
  .notas-pin-strip .nota-item:active{ transform: rotate(0deg) scale(0.97); }
  /* Mismo criterio que :active de arriba (destuerce y achica), para que el efecto "hundida" agregado
     por JS también se note en las tarjetas fijadas, que de otro modo pierden el scale porque las reglas
     de rotación por nth-child pesan más que ".nota-item.nota-item-presionada" sola. */
  .notas-pin-strip .nota-item.nota-item-presionada{ transform: rotate(0deg) scale(0.965); }
  .notas-pin-strip .nota-check-wrap{ margin:-4px 0 0 -4px; padding:4px; }
  .notas-pin-strip .nota-texto{ -webkit-line-clamp:4; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .notas-pin-strip .nota-acciones{ position:absolute; top:6px; right:6px; }

  /* ---- Secciones agrupadas (Vencidas / Hoy / Próximas / Sin fecha / Completadas) ---- */
  .notas-grupo{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .notas-grupo-items{ display:flex; flex-direction:column; gap:8px; }
  .notas-grupo:last-child{ margin-bottom:0; }
  .notas-grupo-titulo{
    display:flex; align-items:center; gap:8px; font-size:0.7rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.5px; color: var(--text-dim); margin: 0 2px 2px;
  }
  .notas-grupo-titulo::after{ content:''; flex:1; height:1px; background: var(--line); }
  .notas-grupo-titulo .cant{ font-weight:700; opacity:0.7; }
  .notas-grupo.vencidas .notas-grupo-titulo{ color: var(--warn); }
  .notas-grupo.hoy .notas-grupo-titulo{ color: var(--accent); }
  .notas-grupo.completadas{ opacity:0.75; }
  .notas-grupo.completadas .notas-grupo-titulo{ color: var(--ok); }
  /* "Completadas" plegable: mismo lenguaje que .categoria-header/.categoria-chevron de Ventas — el
     título pasa de <div> a <button>, se resetean sus estilos de botón nativo y se le suma el chevron. */
  .notas-grupo-titulo-colapsable{
    background:none; border:none; padding:0; margin: 0 2px 2px; width:100%;
    font-family:inherit; cursor:pointer; text-align:left;
  }
  .notas-grupo-titulo-colapsable:active{ transform:none; opacity:0.7; }
  .notas-grupo-chevron{ display:inline-block; font-size:0.85em; transition: transform 0.15s ease; }
  .notas-grupo.completadas.colapsado .notas-grupo-chevron{ transform: rotate(-90deg); }
  .notas-grupo.completadas.colapsado .notas-grupo-items{ display:none; }

  .nota-item{
    position:relative;
    display:flex; align-items:flex-start; gap:6px; background: var(--bg-panel);
    border: 1px solid var(--line); border-left: 3px solid var(--line);
    border-radius:10px; padding:9px 10px 9px 12px;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease, transform 0.15s ease;
  }
  .nota-item.prio-importante{ border-left-color: var(--info); }
  .nota-item.prio-urgente{ border-left-color: var(--warn); }
  .nota-item.hecho{ opacity:0.58; }
  .nota-item.seleccionada{ background: var(--accent-soft); border-color: var(--accent-vivido); }
  .nota-check-wrap{ display:flex; align-items:flex-start; padding:8px 6px 8px 0; margin:-8px 0 -8px -8px; flex-shrink:0; }

  /* Checkbox "de completar" a medida, en vez del tilde nativo del navegador. El tilde es un SVG centrado con background-position (antes era un truco de dos bordes rotados -45deg que nunca terminaba de quedar centrado). */
  .nota-checkbox{
    appearance:none; -webkit-appearance:none; width:24px; height:24px; min-height:24px; flex-shrink:0; margin:0; padding:0;
    border-radius:50%; border: 2px solid var(--line); background-color: var(--bg-panel-2);
    background-repeat:no-repeat; background-position:center; background-size:13px 13px;
    display:inline-block; position:relative; cursor:pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .nota-checkbox:checked{
    background-color: var(--ok-vivido); border-color: var(--ok-vivido);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>");
  }

  .nota-select-checkbox{
    display:none; width:24px; height:24px; margin: 2px 4px 0 -2px; flex-shrink:0; accent-color: var(--accent-vivido);
  }
  .nota-cuerpo{ flex:1; min-width:0; }
  .nota-texto{ font-size:0.9rem; line-height:1.35; word-break:break-word; }
  /* Evita el menú nativo de copiar/seleccionar del celular al mantener presionado el texto en la lista. Dentro de la nota "aumentada" (hoja de detalle) esto NO aplica: ahí se puede seleccionar y copiar normal. */
  .nota-texto{
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  .nota-item.hecho .nota-texto{ text-decoration: line-through; color: var(--text-dim); }
  .nota-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
  .nota-fecha-chip{
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.66rem; font-weight:700; padding:2px 7px; border-radius:8px; background: var(--bg-panel-2); color: var(--text-dim);
  }
  .nota-fecha-chip.vencida{ background: var(--warn-soft); color: var(--warn); }
  /* Fecha límite editable desde el detalle de la nota (ver renderMetaDetalleNota). */
  #notaDetalleMeta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .nota-fecha-editable{ border:none; font: inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:32px; }
  #notaDetalleMeta .nota-fecha-chip{ font-size:0.8rem; padding:6px 11px; border-radius:10px; }
  .nota-fecha-lapiz{ opacity:0.6; font-size:0.85em; }
  .nota-fecha-vacia{ background: none; border: 1px dashed var(--line); color: var(--text-dim); }
  .nota-fecha-quitar{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:none;
    color: var(--text-dim); font-size:1.05rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  }
  .nota-prio-chip{ font-size:0.66rem; font-weight:800; padding:2px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:0.3px; }
  .nota-prio-chip.importante{ background: var(--info-soft); color: var(--info); }
  .nota-prio-chip.urgente{ background: var(--warn-soft); color: var(--warn); }
  .nota-acciones{
    display:flex; flex-direction:column; align-items:center; gap:0; flex-shrink:0;
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation;
  }
  .nota-pin{
    background: none; border: none; color: var(--text-dim); font-size:1.3rem; line-height:1;
    padding:8px; flex-shrink:0; min-height:44px; min-width:44px;
    display:flex; align-items:center; justify-content:center;
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .nota-pin{ font-size:1.5rem; }
  .nota-pin.pinned{ color: var(--accent); transform: rotate(0deg); }
  .nota-pin:active{ color: var(--accent); }

  .notas-empty{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; color: var(--text-dim); font-size:0.85rem; padding:44px 20px;
  }
  .notas-empty svg{ width:34px; height:34px; stroke: var(--line); fill: none; stroke-width:1.4; }
  .notas-empty strong{ color: var(--text); font-size:0.9rem; font-weight:700; }

  /* ---- Selección múltiple estilo Gmail (mantener pulsado) ----
     El header de arriba (título/back/borrar-completadas) ya NO se toca al entrar en este modo — se
     esconde solo "Borrar completadas" (no tiene sentido con notas ya seleccionadas) y aparece
     .notas-seleccion-bar en el lugar de los filtros. La lista mantiene su agrupado normal (franja de
     ancladas + secciones Vencidas/Hoy/Próximas/...): antes se aplanaba y reordenaba todo al entrar en
     selección, lo que hacía que la nota recién tocada "saltara" a otra posición de la pantalla; ahora
     cada nota se queda donde está y solo se le suma el checkbox. */
  .notas-page.seleccionando .notas-add-form,
  .notas-page.seleccionando .notas-filtros-row,
  .notas-page.seleccionando .notas-clear-btn{ display:none; }
  .notas-page.seleccionando .nota-check-wrap{ display:none; }
  .notas-page.seleccionando .nota-select-checkbox{ display:block; pointer-events:none; }
  .notas-page.seleccionando .nota-acciones{ display:none; }
  .notas-page.seleccionando .nota-item:not(.nota-item-presionada){
    cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
    min-height:52px; padding:14px 12px 14px 12px; touch-action: pan-y;
    transform:none !important;
  }
  .notas-page.seleccionando .nota-item{
    cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
    min-height:52px; padding:14px 12px 14px 12px; touch-action: pan-y;
  }
  .notas-page.seleccionando .nota-item:active{ background: var(--bg-panel-2); }

  /* Efecto "hundido" al tocar/mantener pulsada una nota (JS en el IIFE de pointerdown/pointerup de
     notasList le agrega y saca esta clase): achica un toque y baja levemente la sombra/opacidad del
     borde para que se sienta que la tarjeta está siendo apretada, tanto en la lista normal (antes de
     que dispare el long-press) como ya adentro del seleccionador (tap para tildar/destildar). Reusa la
     transition de transform/background ya declarada arriba en .nota-item. */
  .nota-item.nota-item-presionada{
    transform: scale(0.965);
    background: var(--bg-panel-2);
  }

  /* Animación de entrada al pasar del modo normal al seleccionador: cada tarjeta aparece con un
     pop+fade leve y escalonado (animation-delay puesto por JS en actualizarHeaderNotas), en vez de
     saltar de golpe al layout compacto de selección. Va en una clase aparte (.notas-anim-entrada,
     agregada y sacada sola por JS) y NO en la regla ".seleccionando .nota-item" de siempre — si
     estuviera ahí, cada toggle de una nota (que reconstruye la lista entera vía innerHTML) volvería a
     disparar la animación en TODAS las tarjetas y titilaría sin parar. */
  .notas-page.notas-anim-entrada .nota-item{
    animation: nota-item-entra-seleccion 0.26s cubic-bezier(.22,.85,.32,1) both;
  }
  @keyframes nota-item-entra-seleccion{
    from{ opacity:0; transform: scale(0.95) translateX(-5px); }
    to{ opacity:1; transform:none; }
  }

  /* Barra de acciones de selección múltiple: mismo alto y radio que .notas-filtros-row (ocupa su lugar
     exacto, cero salto de layout), con la cuenta de seleccionadas al medio y las dos acciones (elegir
     todas / borrar) agrupadas a la derecha, bien diferenciadas por color de las de completar/anclar de
     cada nota (que se ocultan mientras tanto). */
  .notas-seleccion-bar{
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
    background: var(--bg-panel-2); border: 1px solid var(--accent-vivido); border-radius:12px;
    padding:6px 6px 6px 8px; animation: notas-sel-bar-in 0.16s ease;
  }
  @keyframes notas-sel-bar-in{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform:none; } }
  .notas-sel-cancelar{
    flex-shrink:0; width:32px; height:32px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .notas-sel-cancelar svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:2; }
  .notas-sel-cancelar:active{ color: var(--text); border-color: var(--text-dim); }
  .notas-sel-contador{ flex:1; min-width:0; font-size:0.82rem; font-weight:700; color: var(--text); }
  .notas-sel-btn{
    flex-shrink:0; width:36px; height:36px; min-height:auto; padding:0; border-radius:10px;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .notas-sel-btn svg{ width:17px; height:17px; stroke: currentColor; fill: none; stroke-width:2; }
  .notas-sel-btn.activo{ color: var(--accent); border-color: var(--accent-vivido); background: var(--accent-soft); }
  .notas-sel-btn:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .notas-sel-borrar{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
  .notas-sel-borrar:active{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
  /* Alcanzable ahora que deseleccionar la última nota ya no cierra el seleccionador solo. */
  .notas-sel-borrar:disabled{ opacity:0.4; color: var(--text-dim); border-color: var(--line); cursor:default; }

  /* ---- Vista completa de una nota (hoja) ---- */
  .nota-detalle-overlay{
    position: fixed; inset: 0; background: rgba(10,11,13,0.72);
    display:flex; align-items:flex-end; justify-content:center;
    z-index: 110; opacity:0; pointer-events:none; transition: opacity 0.2s ease;
  }
  .nota-detalle-overlay.show{ opacity:1; pointer-events:auto; }
  .nota-detalle-sheet{
    width:100%; max-width:520px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius:18px 18px 0 0;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(24px); transition: transform 0.22s ease;
    max-height: 82vh; display:flex; flex-direction:column;
    box-shadow: 0 -8px 30px rgba(0,0,0,calc(0.4 * var(--shadow-strength)));
  }
  .nota-detalle-overlay.show .nota-detalle-sheet{ transform: translateY(0); }
  .nota-detalle-sheet.dragging{ transition:none; }
  .nota-detalle-handle{
    width:36px; height:4px; border-radius:3px; background: var(--line); margin: 4px auto 14px;
    cursor:grab; touch-action:none;
  }
  .nota-detalle-top{
    display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .nota-detalle-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.68rem; font-weight:800; padding:4px 12px 4px 10px; border-radius:20px; min-height:auto;
    background: var(--bg-panel-2); color: var(--text-dim); text-transform:uppercase; letter-spacing:0.02em;
  }
  .nota-detalle-chip .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }
  .nota-detalle-chip:active{ filter: brightness(0.9); }
  .nota-detalle-chip.prio-importante{ background: var(--info-soft); color: var(--info); }
  .nota-detalle-chip.prio-urgente{ background: var(--warn-soft); color: var(--warn); }
  .nota-detalle-cerrar{
    width:34px; height:34px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .nota-detalle-cerrar svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:2; }
  .nota-detalle-cerrar:active{ color: var(--accent); border-color: var(--accent-vivido); }
  .nota-detalle-texto{
    font-size:1.02rem; line-height:1.55; color: var(--text); overflow-y:auto;
    padding-bottom:4px; word-break:break-word; white-space:pre-wrap;
  }
  .nota-detalle-texto.hecho{ text-decoration: line-through; color: var(--text-dim); }

  /* ---- Modo edición: reemplaza el texto por un textarea real con su propia barra de acciones (Cancelar / Guardar), en vez de editar in-place con contenteditable y mezclar "Guardar" como un botón más del grid de abajo. ---- */
  .nota-detalle-textarea{
    display:none; width:100%; box-sizing:border-box; font-family:inherit;
    font-size:1.02rem; line-height:1.55; color: var(--text);
    background: var(--bg-panel-2); border: 1.5px solid var(--accent-vivido); border-radius:12px;
    padding:12px 14px; resize:vertical; min-height:120px; max-height:42vh;
  }
  .nota-detalle-textarea:focus{ outline:none; }
  .nota-detalle-sheet.editando .nota-detalle-texto{ display:none; }
  .nota-detalle-sheet.editando .nota-detalle-textarea{ display:block; }
  .nota-detalle-sheet.editando .nota-detalle-meta,
  .nota-detalle-sheet.editando .nota-detalle-acciones,
  .nota-detalle-sheet.editando .nota-detalle-borrar-full{ display:none; }
  .nota-detalle-edit-bar{ display:none; gap:10px; margin-top:16px; }
  .nota-detalle-sheet.editando .nota-detalle-edit-bar{ display:flex; }
  .nota-detalle-edit-cancelar, .nota-detalle-edit-guardar{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    border-radius:12px; padding:14px 10px; font-size:0.92rem; font-weight:700;
    min-height:auto; transition: background 0.15s ease, filter 0.15s ease;
  }
  .nota-detalle-edit-cancelar{ background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); }
  .nota-detalle-edit-cancelar:active{ background: var(--bg); }
  .nota-detalle-edit-guardar{ background: var(--accent-vivido); border: 1px solid transparent; color:#201400; }
  .nota-detalle-edit-guardar:active{ filter: brightness(0.93); }
  .nota-detalle-edit-guardar svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:2.4; }

  .nota-detalle-meta{ display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 2px; min-height:1px; }
  .nota-detalle-acciones{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top: 18px; }
  .nota-detalle-accion{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius:12px; padding:14px 10px; font-size:0.88rem; font-weight:700; min-height:auto;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .nota-detalle-accion:active{ background: var(--bg); }
  .nota-detalle-accion.on{ color: var(--accent); border-color: var(--accent-vivido); background: var(--accent-soft); }
  .nota-detalle-accion.warn{ color: var(--warn); }
  .nota-detalle-accion.warn:active{ background: var(--warn-soft); }
  .nota-detalle-accion-ico{ font-size:1.1rem; line-height:1; display:inline-flex; }
  .nota-detalle-accion-ico svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:1.8; }
  .nota-detalle-accion-ico .ico-on{ display:none; }
  .nota-detalle-accion.on .nota-detalle-accion-ico .ico-off{ display:none; }
  .nota-detalle-accion.on .nota-detalle-accion-ico .ico-on{ display:inline-flex; }
  .nota-detalle-accion.on .nota-detalle-accion-ico .ico-on[fill="currentColor"]{ color: var(--accent); }
  .nota-detalle-borrar-full{ width:100%; margin-top:8px; border-color: var(--warn-soft); }
  .nota-detalle-borrar-full .nota-detalle-accion-ico svg{ width:16px; height:16px; }

  @media (min-width: 480px){
    .nota-detalle-overlay{ align-items:center; }
    .nota-detalle-sheet{ border-radius: 18px; }
  }

  /* ---- Ventas / productos ---- */
  .categoria-grupo{ margin-bottom: 4px; }
  .categoria-header{
    display:flex; align-items:center; gap:8px; padding: 10px 4px 6px;
    width:100%; background: none; border: none; border-radius:8px; font-family:inherit; cursor:pointer;
    /* Antes era "manipulation"; pasa a "none" fijo porque ahora este header se puede arrastrar para reordenar/anidar (ver el bloque de arrastre junto a renderVentas en app.js) — el navegador fija touch-action en el toque inicial, así que tiene que arrancar en "none" para que el pulsado largo tenga chance de cumplirse sin que el navegador lo tome como scroll. user-select/-webkit-touch-callout evitan que ese mismo pulsado dispare el menú de copiar/seleccionar. */
    touch-action: none; user-select:none; -webkit-user-select:none;
    -webkit-touch-callout: none;
    transition: background-color 0.12s ease;
  }
  /* Sin esto, el header se "aplastaba" apenas se lo mantenía presionado — no por el arrastre, sino por la regla genérica `button:active{ transform:scale(0.96) }` que se le aplica a cualquier <button>. El feedback de "presionado" pasa a darlo el fondo en vez de un scale. */
  .categoria-header:active{ transform:none; background: var(--bg-panel-2); }
  .categoria-nombre{ flex:1; text-align:left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); }
  .categoria-count{ font-size: 0.66rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 20px; padding: 2px 8px; min-width: 20px; text-align:center; }
  .categoria-chevron{ color: var(--accent); font-size:1.15rem; font-weight:800; line-height:1; transition: transform 0.15s ease; flex-shrink:0; }
  .categoria-grupo.colapsado .categoria-chevron{ transform: rotate(-90deg); }
  .categoria-grupo.colapsado .categoria-items{ display:none; }
  /* Subcategorías (agrupamiento recursivo, Paso 4): cada nivel de `.categoria-subgrupos` va anidado dentro de `.categoria-items` del nivel padre, así que el padding-left y margin-left se van sumando solos, sin que el JS calcule ningún número de nivel. */
  .categoria-subgrupos{
    padding-left: 14px; margin-left: 7px; margin-top: 2px;
    border-left: 1px dashed var(--line);
  }
  /* Encabezados de subcategorías un poco más chicos que el de su padre, para que la jerarquía también se note por tamaño y no solo por indentación. */
  .categoria-subgrupos .categoria-header{ padding: 7px 4px 5px; }
  .categoria-subgrupos .categoria-nombre{ font-size: 0.68rem; }
  .categoria-subgrupos .categoria-chevron{ font-size: 1rem; }

  /* ---- Arrastre de un header de categoría en Ventas (reordenar / anidar) ---- Mismos tres estados que .categoria-arbol-row del selector en árbol: .arrastrando es el header sujetado (se levanta con sombra y sigue al dedo/mouse con `transform` desde JS). .drag-sobre-antes/-despues son la línea de inserción entre hermanos. .drag-sobre-dentro resalta el header cuando soltar ahí anidaría la categoría como su subcategoría. */
  .categoria-header.arrastrando{
    position:relative; z-index:5; background: var(--bg-panel-2);
    box-shadow: 0 8px 20px rgba(0,0,0,calc(0.35 * var(--shadow-strength))); opacity:0.97;
  }
  .categoria-header.drag-sobre-antes{ box-shadow: inset 0 2px 0 0 var(--accent-vivido); }
  .categoria-header.drag-sobre-despues{ box-shadow: inset 0 -2px 0 0 var(--accent-vivido); }
  .categoria-header.drag-sobre-dentro{ background: var(--accent-soft); }
  /* Tarjeta única por producto: antes esta info vivía partida entre Catálogo (nombre/precio) y Stock (cantidades) en dos sub-pestañas separadas — ahora es una sola tarjeta con todo. */
  .producto-card{
    background: linear-gradient(165deg, var(--bg-panel-2), var(--bg-panel));
    border: 1px solid var(--line); border-radius: 14px;
    padding: 14px; margin-bottom: 10px; display:flex; flex-direction: column; gap: 10px;
    transition: border-color 0.15s ease, transform 0.1s ease;
    box-shadow: var(--card-lift);
  }
  .producto-card:active{ transform: scale(0.994); }
  .producto-card .nombre{ font-weight:700; font-size:1rem; letter-spacing: 0.1px; }
  .producto-card .precio{ color: var(--accent); font-weight:800; font-size:0.92rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top: 2px; }
  .badge.vendido{ background: var(--ok-soft); color: var(--ok); }
  .badge.sin-stock{ background: var(--warn-soft); color: var(--warn); }
  .badge.stock-bajo{ background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
  .badge.ganancia{ background: var(--ok-soft); color: var(--ok); }

  /* ---- 4.4: fila compacta de producto (rediseño) — reemplaza el cuerpo denso de .producto-card por una sola fila: ícono cuadrado + nombre + precio + estado de stock, más el menú ⋮. .producto-card se mantiene como wrapper (así no rompe el delegado de clicks en #ventasList), pero acá pisa su padding/dirección. ---- */
  .producto-fila-compacta{ flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 4px 0 0; gap: 0; }
  /* Arreglo: la fila compacta no mostraba ninguna reserva activa de forma clara — el aviso de seña vivía suelto arriba de la tarjeta y la lista de reservas por cliente no se pintaba. Ahora ambas van en este bloque, que ocupa el 100% del ancho para aparecer siempre como segunda línea dentro de la tarjeta a la que pertenecen. */
  .producto-fila-extra{
    width:100%; display:flex; flex-direction:column; gap:8px;
    padding: 0 10px 10px 14px; margin-top: -2px;
  }
  .producto-fila-extra .aviso-senas-activas{ margin-bottom:0; }
  .producto-fila-top{
    flex:1; min-width:0; display:flex; align-items:center; gap:10px;
    padding: 12px 10px 12px 14px;
  }
  .producto-fila-icono{
    width:56px; height:56px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:800; letter-spacing:0.2px;
    background: color-mix(in srgb, var(--tile-color, var(--accent-vivido)) 18%, var(--bg-panel-2));
    color: var(--tile-color, var(--accent));
    overflow:hidden;
  }
  .producto-fila-icono img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* En compu se mantiene el tamaño de antes (72px); el achique de acá arriba es solo para celular. */
  @media (min-width: 860px){
    .producto-fila-icono{ width:72px; height:72px; border-radius:14px; }
  }

  /* ---- Selector de foto en el form de producto ---- */
  .producto-foto-picker{ display:flex; align-items:center; gap:12px; }
  .producto-foto-picker-preview{
    width:56px; height:56px; border-radius:12px; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--accent-vivido) 12%, var(--bg-panel));
    color: var(--text-dim);
  }
  .producto-foto-picker-preview svg{ width:24px; height:24px; fill: none; stroke: currentColor; stroke-width:1.6; }
  .producto-foto-picker-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
  .producto-foto-picker-botones{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .producto-fila-body{ flex:1; min-width:0; }
  /* Antes: white-space:nowrap + ellipsis en una línea — con la columna de stock a la derecha, un nombre largo quedaba cortado muy rápido. Ahora ocupa hasta 2 líneas (line-clamp) antes de cortar. */
  .producto-fila-nombre{
    font-weight:700; font-size:0.92rem;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.25;
  }
  /* Segunda línea del cuerpo: precio + estado de stock, separados del nombre (antes el stock vivía a esta misma altura pero afuera de .producto-fila-body, robándole ancho al nombre). */
  .producto-fila-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:2px; }
  .producto-fila-precio{ font-size:0.78rem; color: var(--text-dim); display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
  /* ---- Descuento de producto: precio tachado + final en el catálogo (ver precioProductoConDescuentoHtml) ---- */
  .producto-precio-final{ font-size:0.78rem; color: var(--text-dim); }
  .producto-precio-final.producto-precio-con-descuento{ color: var(--accent); font-weight:800; }
  .producto-precio-antes{ text-decoration:line-through; opacity:0.6; }
  .producto-descuento-badge{
    font-size:0.68rem; font-weight:800; color: var(--warn);
    background: var(--warn-soft); border-radius:6px; padding:1px 5px; line-height:1.4;
  }
  .producto-fila-stock{ font-size:0.86rem; font-weight:800; text-align:right; flex-shrink:0; white-space:nowrap; margin-left:auto; letter-spacing:0.1px; }
  .producto-fila-stock.stock-sin{ color: var(--danger); }
  .producto-fila-stock.stock-bajo-txt{ color: var(--warn); }
  .producto-fila-stock.stock-ok{ color: var(--text-dim); font-weight:700; }
  .producto-fila-stock-dospuntos{ font-weight:400; font-size:1.25em; margin:0 1px 0 1px; position:relative; top:-0.25px; }
  .producto-fila-stock-alerta{ font-size:1.15em; margin-right:2px; position:relative; top:1px; }
  .producto-fila-kebab{
    width:34px; height:34px; min-height:auto; padding:0; flex-shrink:0; border-radius:9px;
    background: transparent; border: none; color: var(--text-dim);
    display:flex; align-items:center; justify-content:center;
  }
  .producto-fila-kebab svg{ width:18px; height:18px; fill: currentColor; stroke: none; }
  .producto-fila-kebab:active{ color: var(--text); }

  /* ---- 4.5: pantalla "Nueva venta" (carrito multi-producto) ---- .nueva-venta-page reusa .notas-page (mismo padding/scroll que Clientes). El buscador y el campo Cliente reusan .cliente-autocomplete-wrap/.cliente-sugerencias (mismo dropdown que ya usaba Cliente en Nuevo turno/Vender). */
  .nueva-venta-buscar-wrap{ margin-bottom:14px; }
  .nueva-venta-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .nueva-venta-empty{
    text-align:center; color: var(--text-dim); font-size:0.85rem;
    padding:22px 12px; border: 1px dashed var(--line); border-radius:12px;
  }
  .nueva-venta-item{
    display:flex; align-items:center; gap:10px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;
  }
  .nueva-venta-item-info{ flex:1; min-width:0; }
  .nueva-venta-item-nombre{ font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nueva-venta-item-detalle{ font-size:0.74rem; color: var(--text-dim); margin-top:1px; }
  .nueva-venta-item-precio-antes{ text-decoration:line-through; opacity:0.6; margin-right:2px; }
  .nueva-venta-item-subtotal{ font-weight:800; font-size:0.88rem; flex-shrink:0; white-space:nowrap; }
  .nueva-venta-item-quitar{
    width:26px; height:26px; min-height:auto; padding:0; flex-shrink:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
    display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  }
  .nueva-venta-item-quitar:active{ color: var(--danger); border-color: var(--danger); }
  .nueva-venta-cliente-field{ margin-bottom:16px; }
  .nueva-venta-resumen{
    background: var(--bg-panel); border: 1px solid var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:14px;
  }
  .nueva-venta-resumen-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color: var(--text-dim); padding:3px 0; }
  .nueva-venta-resumen-row.nueva-venta-total{
    color: var(--text); font-weight:800; font-size:1.08rem;
    border-top: 1px solid var(--line); margin-top:4px; padding-top:9px;
  }
  .nueva-venta-metodo-pago{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
  .nueva-venta-metodo-btn{
    padding:11px; border-radius:10px; border: 1px solid var(--line); background: var(--bg-panel-2);
    color: var(--text-dim); font-weight:700; font-size:0.86rem;
  }
  .nueva-venta-metodo-btn.active{ background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); }
  /* Botón de entrega SIN cobrar (fiado) — separado de los dos de método de pago (grid propio, ancho completo) y con su propio color (--fiado, no --warn) para que no se confunda con una forma de pago: no es "cómo se cobró" sino "todavía no se cobró". */
  .nueva-venta-fiado-pago{ display:grid; margin-bottom:14px; }
  .nueva-venta-fiado-btn{
    padding:11px; border-radius:10px; border: 1px dashed var(--line); background: transparent;
    color: var(--text-dim); font-weight:700; font-size:0.86rem;
  }
  .nueva-venta-fiado-btn.active{ background: var(--fiado-soft); border-color: var(--fiado); border-style:solid; color: var(--fiado); }
  .nueva-venta-cobrar-btn{ margin-top:0; margin-bottom:6px; }
  .nueva-venta-cobrar-btn:disabled{ opacity:0.5; }
  .nueva-venta-cobrar-btn.fiado-activo{ background: var(--fiado); border-color: var(--fiado); }

  /* ---- Fiados pendientes: tarjeta en Ventas con lo entregado sin cobrar todavía (ver marcarVentaFiadaPagada/cancelarVentaFiada en app.js), oculta cuando no hay ninguno. Antes tenía toda la tarjeta rellena de --accent-soft y botón verde plano (receta típica de UI genérica hecha por IA); ahora usa el panel oscuro normal con un filo lateral en --fiado, como seña puntual. El header ocupa todo el ancho de la tarjeta para que el área de plegar/desplegar sea de punta a punta. ---- */
  .fiados-pendientes-card{
    background: var(--bg-panel); border: 1px solid var(--line); border-left:3px solid var(--fiado);
    border-radius:12px; margin-bottom:14px; overflow:hidden;
    box-shadow: var(--card-lift);
  }
  .fiados-pendientes-header{
    display:flex; align-items:center; gap:8px; width:100%; padding:11px 14px;
    background: none; border: none; font-family:inherit; cursor:pointer; touch-action:manipulation;
    /* Sin esto, el texto de los extremos (chevron, cantidad, monto) queda seleccionable en celular y el tap dispara selección de texto en vez del click. Mismo remedio que ya usa .categoria-header para su propio pulsado largo. */
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  .fiados-pendientes-header:active{
    /* Sin este transform:none, el scale(0.96) genérico de cualquier <button> al presionarlo achica la caja y en los extremos (ícono, contador, monto) el toque queda "afuera" y el click nunca se completa. Mismo remedio que .categoria-header: el feedback lo da solo el fondo, sin scale. */
    transform:none; background: rgba(0,0,0,0.05);
  }
  .fiados-pendientes-chevron{ color: var(--text-dim); font-size:0.85rem; font-weight:800; line-height:1; transition: transform 0.15s ease; flex-shrink:0; }
  .fiados-pendientes-card.colapsado .fiados-pendientes-chevron{ transform: rotate(-90deg); }
  .fiados-pendientes-card.colapsado #fiadosPendientesList{ display:none; }
  #fiadosPendientesList{ padding:0 12px 12px 14px; max-height:360px; overflow-y:auto; }
  .fiados-pendientes-titulo{ font-weight:800; font-size:0.76rem; color: var(--text); flex:1; text-align:left; }
  .fiados-pendientes-count{ font-size:0.64rem; font-weight:700; color: var(--fiado); background: var(--fiado-soft); border-radius:20px; padding:1px 7px; min-width:16px; text-align:center; }
  .fiados-pendientes-total{ font-weight:800; font-size:0.82rem; color: var(--fiado); }
  .fiados-pendientes-item{
    display:flex; flex-direction:column; gap:6px; padding:8px 0; border-top: 1px solid var(--line);
  }
  .fiados-pendientes-item:first-child{ border-top: none; padding-top:0; }
  .fiados-pendientes-top{ display:flex; align-items:center; gap:8px; }
  .fiados-pendientes-info{ flex:1; min-width:0; }
  /* A quién se le fio es lo primero que se busca con la vista, así que va de línea principal; el producto queda en segunda línea pero con más peso/contraste (antes era demasiado tenue). */
  .fiados-pendientes-cliente{ font-weight:800; font-size:0.85rem; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Cliente y producto quedaban los dos en el mismo blanco: sin leer el tamaño no se distinguía cuál era cuál. El producto pasa a usar el dorado de acento de la tarjeta, así el color también dice "esto es lo que se entregó". */
  .fiados-pendientes-sub{ margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fiados-pendientes-producto{ font-size:0.77rem; font-weight:700; color: var(--accent); }
  .fiados-pendientes-fecha{ font-size:0.68rem; font-weight:500; color: var(--text-dim); }
  /* El monto por ítem estaba en blanco (--text) mientras el contador y el total de la cabecera ya usaban --fiado. Pasa a --fiado también, así el color queda reservado para "esto es lo que falta cobrar" en toda la tarjeta. */
  .fiados-pendientes-monto{ font-weight:800; font-size:0.78rem; color: var(--fiado); flex-shrink:0; }
  /* Las dos acciones ya NO pesan lo mismo: "Marcar pagado" es la principal (se usa en la enorme mayoría de los casos), "Cancelar entrega" queda como link discreto en gris (no rojo: no es "peligroso" como borrar). El botón pasó por verde sólido plano (relleno macizo, chocaba con el resto de la tarjeta que solo usa pastillas suaves para chips/badges — el "6" y el total ya son así) y ahora es una pastilla en el mismo lenguaje: fondo suave + borde + texto en el verde de "efectivo" (--ok), mismo trato que ya usa "Aprobar" en reservas pendientes. */
  .fiados-pendientes-acciones{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
  .fiados-pendientes-cobrar{
    flex:0 0 auto; padding:6px 13px; border-radius:20px;
    border: 1px solid rgba(var(--ok-rgb),0.4);
    background: var(--ok-soft); color: var(--ok); font-weight:800; font-size:0.68rem;
  }
  .fiados-pendientes-cobrar:active{ background: rgba(var(--ok-rgb),0.22); }
  .fiados-pendientes-cancelar{
    flex:0 0 auto; padding:6px 2px; border: none; background: none;
    color: var(--text-dim); font-weight:600; font-size:0.68rem;
    text-decoration:underline; text-underline-offset:2px;
  }
  /* Fila fundida de un fiado con varios productos (mismo grupoId, ver renderFiadosPendientes): no tiene botones propios, toda la fila es el "botón" que abre el modal de detalle — ver mostrarDetalleFiadoCarrito. Antes terminaba en la línea de cliente/monto y quedaba visiblemente más baja que las filas individuales (que suman la línea de acciones); ahora suma su propia segunda línea ("Ver detalle ›") en el mismo lugar donde las otras filas tienen los botones, así todas las filas de la lista guardan el mismo ritmo vertical y de paso queda más claro que se puede tocar. */
  .fiados-pendientes-item-fundida{ cursor:pointer; touch-action:manipulation; }
  .fiados-pendientes-item-fundida:active{ background: rgba(0,0,0,0.05); }
  .fiados-pendientes-abrir{
    display:flex; align-items:center; justify-content:flex-end; gap:3px;
    font-size:0.68rem; font-weight:700; color: var(--text-dim);
  }
  .fiados-pendientes-abrir-flecha{ font-size:0.85rem; line-height:1; }


  /* Medidor de stock: reemplaza los badges de texto "Stock" + "Reservado" por una sola barra con la proporción real (disponible vs reservado), de un vistazo. El segmento libre usa el celeste de "info"; el reservado, el dorado de acento. */
  /* Lista de reservas activas de un producto: puede haber varias a la vez (una por cliente), cada una con su propio menú ⋮ para venderla, señarla, entregarla o cancelarla sin afectar a las demás. */
  .reservas-list{ display:flex; flex-direction:column; gap:6px; }
  .reserva-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 7px 8px 7px 12px;
  }
  .reserva-info{ font-size:0.76rem; color: var(--text-dim); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Reserva ya pagada del todo (seña == precio completo) y sin entregar — mismo color "ok" que un turno cobrado, para notar de un vistazo cuál está lista sin abrir el ⋮. */
  .reserva-item-pagada{ background: var(--ok-soft); border-color: var(--ok); }
  .reserva-item-pagada .reserva-info{ color: var(--ok); }
  .kebab-btn-sm{ width:26px; height:26px; border-radius:7px; }
  .kebab-btn-sm svg{ width:15px; height:15px; }

  /* Botón de acción principal (Vender / Cargar stock): a todo lo ancho, siempre en el mismo lugar, para no abrir el menú ⋮ en el caso de uso más común. El resto de las acciones quedan en ese menú, ya que se usan mucho menos. */
  .aviso-senas-activas{
    background: var(--info-soft); color: var(--info); border: 1px solid var(--info);
    border-radius:10px; padding:10px 12px; font-size:0.82rem; font-weight:600;
    margin-bottom:12px; line-height:1.4;
  }

  /* ---- Selector de fecha (estilo calendario) ---- */
  .date-trigger{
    width:100%; text-align:left; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius: 8px; padding: 12px 12px; font-size: 0.95rem; min-height: 46px; font-family: inherit; font-weight:400;
  }
  .date-trigger:active{ border-color: var(--accent-vivido); }
  .date-trigger:disabled{ opacity:0.5; }
  .calendar-box{ max-width: 380px; }
  .calendar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; gap:8px; }
  .calendar-header .cal-title{ font-size: 1rem; font-weight:700; text-transform: capitalize; flex:1; text-align:center; }
  .calendar-nav-btn{
    width:34px; height:34px; min-height:auto; padding:0; border-radius:50%;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); font-size:1rem;
  }
  .calendar-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; margin-bottom:4px; }
  .calendar-weekdays span{ text-align:center; font-size:0.66rem; color: var(--text-dim); text-transform: uppercase; font-weight:700; }
  .calendar-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; }
  .calendar-day{
    aspect-ratio: 1; display:flex; align-items:center; justify-content:center; border-radius:50%;
    background: none; border: none; color:var(--text); font-size:0.9rem; font-weight:600; min-height:auto; padding:0;
  }
  .calendar-day.other-month{ color: var(--text-dim); opacity:0.32; }
  .calendar-day.today{ border: 2px solid var(--accent-vivido); color: var(--accent); }
  .calendar-day.selected{ background: var(--accent-vivido); color:#201400; }
  .calendar-footer{ display:flex; gap:10px; margin-top:16px; }
  .calendar-footer button{ flex:1; }

  /* ---- Atajos de fecha (próximos días, dentro del selector de fecha) ---- */
  .fecha-atajos-label{ font-size:0.68rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; margin-bottom:8px; }
  .fecha-atajos{
    display:flex; gap:6px; overflow-x:auto; padding-bottom:12px; margin-bottom:12px;
    border-bottom: 1px solid var(--line); scrollbar-width:none;
  }
  .fecha-atajos::-webkit-scrollbar{ display:none; }
  .fecha-atajo-chip{
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:56px; padding:8px 6px; border-radius:12px; background: var(--bg-panel-2);
    border: 1px solid var(--line); color:var(--text); min-height:auto;
  }
  .fecha-atajo-chip .fa-dia{ font-size:0.62rem; text-transform:uppercase; font-weight:700; color:var(--text-dim); letter-spacing:0.3px; }
  .fecha-atajo-chip .fa-num{ font-size:0.86rem; font-weight:700; white-space:nowrap; }
  .fecha-atajo-chip.today{ border-color: var(--accent-vivido); }
  .fecha-atajo-chip.today .fa-dia{ color: var(--accent); }
  .fecha-atajo-chip.selected{ background: var(--accent-vivido); border-color: var(--accent-vivido); }
  .fecha-atajo-chip.selected .fa-dia, .fecha-atajo-chip.selected .fa-num{ color:#201400; }
  .fecha-atajo-chip.day-blocked{ opacity:0.45; }
  .fecha-atajo-chip.day-blocked .fa-num{ text-decoration: line-through; }
  .calendar-day.day-blocked{ opacity:0.4; text-decoration: line-through; }

  /* ---- Selector de hora (estilo rueda) ---- */
  .hora-wheel-wrap{
    position: relative; display:flex; align-items:center; justify-content:center;
    gap: 4px; margin: 6px 0 4px; user-select: none;
  }
  .hora-wheel-highlight{
    position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%);
    height:44px; border-top: 1px solid var(--accent-vivido); border-bottom: 1px solid var(--accent-vivido);
    background: var(--accent-soft); opacity:0.45; border-radius:10px; pointer-events:none;
  }
  .hora-wheel{
    height: 220px; width: 84px; overflow-y:auto; scroll-snap-type: y mandatory;
    -ms-overflow-style:none; scrollbar-width:none; position:relative;
  }
  .hora-wheel::-webkit-scrollbar{ display:none; }
  .hora-wheel-item{
    height:44px; display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; color: var(--text-dim); font-weight:600; scroll-snap-align:center;
    transition: color 0.1s, font-size 0.1s; font-variant-numeric: tabular-nums;
  }
  .hora-wheel-item.active{ color: var(--text); font-size:1.4rem; font-weight:700; }
  .hora-wheel-sep{ font-size:1.5rem; font-weight:800; color: var(--accent); align-self:center; margin-top:-2px; }
  .hora-wheel-label{ text-align:center; font-size:0.7rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; margin-top:2px; }
  .hora-wheel-cols{ display:flex; flex-direction:column; align-items:center; }
  .hora-atajos{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; min-height: 20px; }
  .hora-atajos .empty-msg{ text-align:center; width:100%; padding: 2px; font-size:0.78rem; }
  .hora-atajos button{
    min-height:auto; padding:7px 12px; font-size:0.78rem; border-radius:20px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim); font-weight:600;
  }
  .hora-atajos button:active{ border-color: var(--accent-vivido); color: var(--accent); }

  /* ---- Modal de cantidad / venta ---- */
  .modal-field{ margin-bottom: 16px; }
  .modal-field label{ margin-bottom: 6px; }
  .modal-field input{ text-align:center; font-size: 1.1rem; font-weight:700; }
  .modal-field input#modalCantidadCliente{ text-align:left; font-size: 0.95rem; font-weight:500; }
  /* Motivo de rechazo (modalRechazarReservaOverlay): a diferencia del resto de .modal-field (pensado para un número centrado), acá es texto libre de varias líneas, así que va alineado a la izquierda y sin negrita. */
  .modal-field textarea{
    width:100%; padding:12px 14px; border-radius:10px; resize:vertical;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    font-size:0.9rem; font-family:inherit;
  }
  .modal-field textarea:focus{ outline:none; border-color: var(--accent-vivido); }

  /* Ayuda y soporte (plan-feedback-soporte.md): mismo look que .modal-field textarea (texto
     libre de varias líneas), reusado tal cual acá porque no está dentro de un modal sino de
     config-seccion-body. Auto-expandible (resize:none + overflow:hidden + JS en
     ajustarAlturaTextareaAuto de app.js) con el mismo criterio que el textarea de Notas: arranca
     en un tamaño fijo y crece con el texto hasta max-height en vez de dejar agrandarlo a mano. */
  #ayudaSoporteTexto{
    width:100%; padding:12px 14px; border-radius:10px; resize:none; overflow:hidden;
    min-height:120px; max-height:260px;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    font-size:0.9rem; font-family:inherit; line-height:1.4; margin: 12px 0 14px;
  }
  #ayudaSoporteTexto:focus{ outline:none; border-color: var(--accent-vivido); }

  /* Monto fijo (no editable) del modal de señas, ej. "cobrar el resto": se muestra como número grande en vez de input, para dejar claro que ya está calculado y no se puede tocar a mano. */
  .modal-monto-fijo{
    text-align:center; font-size:1.6rem; font-weight:800; color: var(--ok);
    background: var(--ok-soft); border-radius:10px; padding:14px; margin-bottom:16px;
  }

  /* ---- Selector de mes (estilo calendario, para filtro de turnos y stats) ---- */
  .meses-grid{ grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 4px; }
  .meses-grid .calendar-day{ aspect-ratio: auto; height: 46px; border-radius: 10px; background: var(--bg-panel-2); border: 1px solid var(--line); font-size: 0.85rem; text-transform: capitalize; font-weight:600; }
  .meses-grid .calendar-day.today{ border-color: var(--accent-vivido); color: var(--accent); }
  .meses-grid .calendar-day.selected{ background: var(--accent-vivido); color:#201400; border-color: var(--accent-vivido); }

  /* ---- Stats: ver mes anterior ---- */
  .mes-anterior-box{ margin-top:12px; padding-top:12px; border-top: 1px solid var(--line); }
  .mes-anterior-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .mes-anterior-titulo{ font-weight:700; font-size:0.92rem; text-transform:capitalize; }
  .mes-anterior-head button{ width:30px; height:30px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0; }

  /* ---- Stats: gastos ---- */

  /* ---- Gastos: tarjeta grande "Gastos de [período]" (8.1), reusa .resumen-card-grande. El valor se pinta en tono de alerta (--warn) para distinguirlo de las tarjetas de ingresos. El selector reusa .gpc-periodo pero con los 4 botones repartidos a lo ancho. ---- */
  .gastos-resumen-card{ padding-bottom: 14px; }
  .gastos-resumen-card .resumen-card-valor{ color: var(--warn); }
  .gastos-total-periodo{ width:100%; margin-top:12px; }
  .gastos-total-periodo .gpc-periodo-btn{ flex:1; text-align:center; }

  /* ---- Ingresos: tarjeta grande "Ingresos de [período]" (8.2.1), mismo patrón que Gastos (8.1) pero con el valor en tono positivo (--ok) en vez de --warn. ---- */
  .ingresos-resumen-card{ padding-bottom: 14px; }
  .ingresos-resumen-card .resumen-card-valor{ color: var(--ok); }

  /* ---- Balance: tarjeta grande "Balance de [período]" (8.3), mismo patrón que Gastos/Ingresos. A diferencia de esas dos, NO se le fija color al valor: se pinta verde o rojo según el balance (mismo criterio que coloreaBalance() en JS). "Balance histórico total" reusa .total-row tal cual. ---- */
  .balance-resumen-card{ padding-bottom: 14px; }
  .balance-resumen-card .total-row{ margin-top: 12px; }

  /* ---- Gastos por categoría: envuelta en tarjeta propia (8.1) para que combine con el resto de la pantalla rediseñada, en vez de ser solo una sección separada por una línea. ---- */
  .gpc-card{
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .gpc-block.gpc-card{ border-top: none; padding-top:0; }

  .income-entry.gasto-entry .tipo-dot{ background: var(--warn); }
  .gasto-row{ display:flex; align-items:center; gap:10px; background: var(--bg-panel-2); border-radius: 8px; padding: 10px 12px; margin-bottom:8px; }
  .gasto-row .nombre{ font-size:0.9rem; font-weight:600; }
  .gasto-row .fecha{ color: var(--text-dim); font-size:0.7rem; margin-top:2px; }
  .gasto-row .monto{ color: var(--warn); font-weight:700; font-size:0.85rem; white-space:nowrap; max-width:38%; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0; }
  .gasto-row button{ background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn); font-size: 0.95rem; padding: 0; min-height: 30px; width: 30px; border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  /* ---- Gastos: tarjetas con ícono según categoría + menú (⋮) con Editar/Borrar, en vez de una fila con un único botón "✕". (.gasto-row sigue en pie para ingresos manuales e intercambios.) ---- */
  .gasto-card{ display:flex; align-items:center; gap:10px; background: var(--bg-panel-2); border-radius: 10px; padding: 10px 12px; margin-bottom:8px; }
  .gasto-card-icon{
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: var(--warn-soft); color: var(--warn);
  }
  .gasto-card-icon svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .gasto-card-info{ flex:1; min-width:0; }
  .gasto-card-nombre{ font-size:0.9rem; font-weight:600; }
  .gasto-card-meta{ color: var(--text-dim); font-size:0.72rem; margin-top:2px; }
  .gasto-card-monto{ color: var(--warn); font-weight:700; font-size:0.85rem; white-space:nowrap; max-width:34%; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0; }

  /* ---- Gasto automático por costo de venta (ver registrarVenta en app.js): va ligado 1 a 1 a una venta de Ventas, así que en vez del menú (⋮) muestra un candado fijo. El borde punteado marca que esta tarjeta se comporta distinto, sin texto extra permanente. ---- */
  .gasto-card-auto{ border: 1px dashed var(--line); background: transparent; }
  .gasto-card-lock{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-dim); cursor: help;
  }
  .gasto-card-lock svg{ width:16px; height:16px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* Filas con muchos campos usan flex-wrap en vez de grid-template-columns: un @media a 380px fijos no reflejaba el ancho real disponible (el modal recorta más por su padding) y seguía rompiéndose en otras pantallas. */
  .add-servicio-row2-servicio{ display:flex; flex-wrap:wrap; }
  .add-servicio-row2-servicio > input{ flex: 1 1 92px; min-width:0; }
  .add-servicio-row2-servicio > button{ flex: 1 1 130px; }
  .add-servicio-row2-servicio .servicio-indefinido-check{ flex: 1 1 100%; }
  .ingreso-row .monto{ color: var(--ok); }
  .intercambio-row .monto{ color: var(--info); }

  /* ---- Stats: balance ---- */
  .stats-row.stats-row-3{ grid-template-columns: repeat(3,1fr); }

  /* ---- Intercambio Efectivo ⇄ Transferencia ---- */
  .dot.efectivo{ background: var(--ok); }
  .dot.transferencia{ background: var(--info); }

  .intercambio-swap-card{
    display:flex; align-items:stretch; gap:8px; margin-top:14px;
  }
  .intercambio-lado{
    flex:1; min-width:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color: var(--text);
  }
  .intercambio-lado .dot{ width:9px; height:9px; border-radius:50%; }
  .intercambio-lado .lado-label{ font-weight:700; font-size:0.86rem; margin-top:2px; }
  .intercambio-lado .lado-saldo{ font-size:0.68rem; color: var(--text-dim); }
  #intercambioDestino{ cursor: default; }

  /* ---- Estadísticas · Balance: saldo actual, reusa .intercambio-swap-card/.intercambio-lado pero acá el monto es el dato principal, así que se invierte el énfasis (etiqueta chica arriba, monto grande abajo). ---- */
  .saldo-actual .lado-label{ font-size:0.72rem; font-weight:600; color: var(--text-dim); margin-top:2px; }
  .saldo-actual .lado-saldo{ font-size:1.15rem; font-weight:800; color: var(--text); }

  /* (Resaltado ".active" sobre Balance se borró: Intercambio pasó a ser un modal propio (Paso 8.b), ya no se ve mientras el modal está abierto.) */

  /* ---- Estadísticas · Ingresos: desglose por método, mismo patrón que .saldo-actual de Balance pero con menos énfasis tipográfico porque acá el dato es secundario al gráfico de arriba. ---- */
  .cobrado-metodo{ margin-top:12px; }
  .cobrado-metodo .lado-label{ font-size:0.7rem; font-weight:600; color: var(--text-dim); margin-top:2px; }
  .cobrado-metodo .lado-saldo{ font-size:0.95rem; font-weight:700; color: var(--text); }
  /* Separación contra la tarjeta de Ingresos de abajo; solo este ID, para no tocar el otro uso de .cobrado-metodo (ingresoDesgloseRow) que ya tiene separación propia. */
  #ingresoNetoTipoRow{ margin-bottom:14px; }
  .intercambio-swap-btn{
    flex-shrink:0; width:40px; min-height:auto; padding:0; align-self:center;
    height:40px; border-radius:50%;
    background: var(--accent-soft); border: 1px solid var(--accent-vivido); color: var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .intercambio-swap-btn svg{ width:18px; height:18px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .intercambio-swap-btn:active{ transform: rotate(180deg); transition: transform 0.2s ease; }

  .intercambio-chips{ display:flex; gap:8px; margin-top:10px; }
  .chip-monto{
    flex:1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius: 9px; padding: 9px 4px; font-size:0.8rem; font-weight:700; min-height:38px;
  }
  .chip-monto:active{ background: var(--accent-soft); border-color: var(--accent-vivido); color: var(--accent); }
  .chip-monto:disabled{ opacity:0.4; }

  .intercambio-row-icon{
    flex-shrink:0; display:flex; align-items:center; gap:4px; color: var(--text-dim);
  }
  .intercambio-row-icon .dot{ width:8px; height:8px; border-radius:50%; }
  .intercambio-row-icon svg{ width:15px; height:15px; stroke: currentColor; fill: none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* ---- Vista de agenda (grilla horaria) ---- */
  .agenda-header{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .agenda-fecha-btn{
    flex:1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
    border-radius:8px; padding:10px 12px; font-size:0.88rem; font-weight:700;
    text-transform:capitalize; text-align:center; min-height:44px;
  }
  .agenda-nav-btn{
    width:38px; height:38px; min-height:auto; padding:0; border-radius:50%; flex-shrink:0;
    background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text); font-size:1.15rem;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .agenda-hoy-btn{ width:100%; margin-bottom:14px; }
  .agenda-grid-scroll{ max-height:64vh; overflow-y:auto; border: 1px solid var(--line); border-radius:12px; background: var(--bg-panel-2); cursor:pointer; }

  /* Resaltado momentáneo al llegar a un turno puntual (ej: desde el historial de un cliente), para ubicarlo rápido entre los demás. */
  @keyframes turnoResaltadoPulso{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
    25%, 75%{ box-shadow: 0 0 0 3px var(--accent-vivido); }
  }
  .agenda-block.turno-resaltado{
    animation: turnoResaltadoPulso 1.1s ease-in-out 2;
  }
  .agenda-grid{ position:relative; margin: 8px 0 12px; padding-left: 46px; }
  /* La línea de hora arranca donde arranca el track, y la etiqueta vive en el margen fijo a la izquierda (padding-left de .agenda-grid) para nunca quedar debajo de un turno. */
  .agenda-hora-line{ position:absolute; left:0; right:12px; border-top: 1px solid var(--line); }
  .agenda-hora-label{
    position:absolute; left:0; top:-8px; width:40px; text-align:right; padding-right:6px;
    font-size:0.66rem; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight:700;
  }
  .agenda-ahora-line{ position:absolute; left:46px; right:12px; height:2px; background: var(--warn); z-index:6; border-radius:2px; }
  .agenda-ahora-line::before{
    content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px;
    border-radius:50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft);
  }
  /* OJO: para un hijo position:absolute, "left" se mide desde el padding-box del ancestro (#agendaGrid), antes del padding-left — por eso hay que sumar los 46px acá explícitamente, o el track tapaba los números. */
  .agenda-track{ position:absolute; left:46px; right:12px; top:0; bottom:0; }
  .agenda-block{
    position:absolute; box-sizing:border-box; overflow:hidden; cursor:pointer; z-index:2;
    background: var(--accent-soft); border-radius:8px;
    padding: 4px 10px; transition: filter 0.1s ease, transform 0.08s ease;
    box-shadow: inset 0 0 0 1.5px var(--danger);
  }
  .agenda-block:active{ filter: brightness(1.22); transform: scale(0.99); }
  .agenda-block.completado{ background: rgba(var(--ok-rgb),0.28); }
  .agenda-block.pagado{ box-shadow: inset 0 0 0 1.5px var(--ok); }
  .agenda-block-inner{ display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; height:100%; }
  .agenda-block-cliente{
    font-size:0.82rem; font-weight:700; color: var(--text); line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .agenda-block-hora{
    font-size:0.68rem; font-weight:700; color: var(--accent); line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .agenda-block.completado .agenda-block-hora{ color: var(--ok); }
  .agenda-block-detalle{
    font-size:0.68rem; color: var(--text-dim); line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .agenda-block.compacto .agenda-block-cliente{ font-size:0.76rem; }
  .agenda-block.compacto{ padding: 3px 8px; }
  .agenda-empty{ padding: 52px 10px; text-align:center; }

  /* ---- Franjas y días no laborables, en rojo ---- */
  .agenda-bloqueo-band{
    position:absolute; left:0; right:0; box-sizing:border-box; z-index:1; overflow:hidden;
    background: repeating-linear-gradient(135deg, rgba(220,60,60,0.16), rgba(220,60,60,0.16) 8px, rgba(220,60,60,0.09) 8px, rgba(220,60,60,0.09) 16px);
    border-top: 1px solid rgba(220,60,60,0.35); border-bottom: 1px solid rgba(220,60,60,0.35);
    display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  .agenda-bloqueo-label{
    font-size:0.66rem; font-weight:700; color:#e07a7a; letter-spacing:0.02em;
    text-transform:uppercase; text-align:center; padding:0 6px;
  }
  .agenda-dia-bloqueado{
    position:absolute; top:0; left:-46px; right:0; bottom:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; border-radius:12px;
    background: repeating-linear-gradient(135deg, rgba(220,60,60,0.14), rgba(220,60,60,0.14) 10px, rgba(220,60,60,0.07) 10px, rgba(220,60,60,0.07) 20px);
  }
  .agenda-dia-bloqueado-icono{ font-size:1.6rem; opacity:0.85; }
  .agenda-dia-bloqueado-texto{ font-size:0.95rem; font-weight:800; color:#e07a7a; letter-spacing:0.01em; }

  /* ---- Vista de agenda: Semana (2.4) ----
     Mismo lenguaje visual que la grilla diaria de arriba (franjas horarias,
     bloqueos, línea de "ahora"), pero con los 7 días en columnas. El scroll
     es de los dos ejes en un solo contenedor (.semana-grid-scroll):
     position:sticky alcanza para fijar la columna de horas a la izquierda y
     la fila de nombres de día arriba, sin sincronizar scroll a mano por JS
     — no comparten eje entre sí (la columna de horas es sticky en x, las
     cabeceras de día son sticky en y), así que nunca se pisan.
     Reusa .agenda-header/.agenda-nav-btn/.agenda-fecha-btn/.agenda-hoy-btn
     (ya existían) para la barra de navegación de semana. */
  .semana-grid-scroll{
    max-height:64vh; overflow:auto; border: 1px solid var(--line); border-radius:12px;
    background: var(--bg-panel-2); cursor:pointer;
  }
  .semana-grid{ display:flex; width:max-content; }
  .semana-hora-gutter{
    position:sticky; left:0; z-index:3; flex-shrink:0; width:40px;
    background: var(--bg-panel-2); border-right:1px solid var(--line);
  }
  .semana-hora-gutter-track{ position:relative; margin-top:40px; }
  .semana-hora-label{
    position:absolute; left:0; right:6px; top:-8px; text-align:right;
    font-size:0.62rem; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight:700;
  }
  .semana-dias-cont{ display:flex; }
  .semana-dia-col{ width:104px; flex-shrink:0; border-right:1px solid var(--line); }
  .semana-dia-col:last-child{ border-right:none; }
  .semana-dia-header-cell{
    position:sticky; top:0; z-index:2; height:40px; box-sizing:border-box;
    background: var(--bg-panel-2); border-bottom: 1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  }
  .semana-dia-header-nombre{ font-size:0.64rem; color: var(--text-dim); text-transform:uppercase; font-weight:700; letter-spacing:0.02em; }
  .semana-dia-header-num{ font-size:0.85rem; font-weight:800; color: var(--text); }
  .semana-dia-header-cell.hoy .semana-dia-header-num{
    color:#201400; background: var(--accent-vivido); border-radius:50%;
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  }
  .semana-dia-track{ position:relative; }
  .semana-hora-line{ position:absolute; left:0; right:0; border-top: 1px solid var(--line); }
  .semana-ahora-line{ position:absolute; left:0; right:0; height:2px; background: var(--warn); z-index:1; border-radius:2px; }
  .semana-bloqueo-band{
    position:absolute; left:0; right:0; box-sizing:border-box; pointer-events:none;
    background: repeating-linear-gradient(135deg, rgba(220,60,60,0.16), rgba(220,60,60,0.16) 8px, rgba(220,60,60,0.09) 8px, rgba(220,60,60,0.09) 16px);
    border-top: 1px solid rgba(220,60,60,0.35); border-bottom: 1px solid rgba(220,60,60,0.35);
  }
  .semana-dia-bloqueado{
    display:flex; align-items:center; justify-content:center; padding:8px 2px;
    background: repeating-linear-gradient(135deg, rgba(220,60,60,0.14), rgba(220,60,60,0.14) 10px, rgba(220,60,60,0.07) 10px, rgba(220,60,60,0.07) 20px);
  }
  .semana-dia-bloqueado span{
    font-size:0.64rem; font-weight:800; color:#e07a7a; text-align:center;
    writing-mode:vertical-rl; text-orientation:mixed;
  }
  /* .semana-block no define color/fondo propio: hereda de agenda-block (agenda del día) y acá solo se ajusta tamaño/posición para la columna angosta de la vista semanal. */
  .agenda-block.semana-block{
    z-index:1; padding:2px 5px; border-radius:5px;
  }
  .semana-block .agenda-block-cliente{ font-size:0.66rem; line-height:1.2; }
  .semana-block .agenda-block-hora{ font-size:0.6rem; line-height:1.15; }
  .semana-block .agenda-block-inner{ gap:0; }

  /* ---- Turnos (agenda diaria/semanal): overlay a pantalla completa, mismo lenguaje que .menu-lateral-overlay; panel de 95vw/88vh deliberadamente no cubre todo. Clases genéricas ".agenda-expandida-*" porque semana y día comparten el mismo look pese a ser overlays distintos. z-index 100: por encima del menú lateral (95) pero debajo del menú de acciones de un turno (120/121). ---- */
  .agenda-expandida-overlay{
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.6);
    opacity:0; pointer-events:none;
    transition: opacity 0.2s ease;
    display:flex; align-items:center; justify-content:center;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  }
  .agenda-expandida-overlay.show{ opacity:1; pointer-events:auto; }
  /* Mismo motivo que .cliente-detalle-overlay/.modal-overlay: en compu la sidebar tiene que quedar siempre clickeable. */
  @media (min-width: 860px){
    .agenda-expandida-overlay{ left: var(--sidebar-w); }
  }
  .agenda-expandida-panel{
    width:95vw; max-width:900px; height:88vh; max-height:88vh;
    background: var(--bg-panel); border: 1px solid var(--line); border-radius:16px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,calc(0.4 * var(--shadow-strength)));
    transform: scale(0.96); opacity:0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .agenda-expandida-overlay.show .agenda-expandida-panel{ transform:scale(1); opacity:1; }
  .agenda-expandida-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 14px 10px; flex-shrink:0; border-bottom: 1px solid var(--line);
  }
  .agenda-expandida-titulo{ font-size:0.95rem; font-weight:800; color: var(--text); }
  .agenda-expandida-slot{
    flex:1; min-height:0; padding:12px; display:flex; flex-direction:column;
  }
  /* El contenido movible (nav + grilla) ocupa todo el alto disponible: la grilla crece con flex en vez de topearse a 64vh como en la vista normal. */
  .agenda-expandida-slot #semanaContenidoMovible,
  .agenda-expandida-slot #turnosDiaMovible{ display:flex; flex-direction:column; height:100%; min-height:0; }
  .agenda-expandida-slot .semana-grid-scroll,
  .agenda-expandida-slot .agenda-grid-scroll{ max-height:none; flex:1; min-height:0; cursor:default; }

/* ---------------- Pantalla de login / registro ---------------- */
.oculto{ display:none !important; }

.app-loading-overlay{
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg-panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.app-loading-spinner{
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--bg-panel-2); border-top-color: var(--accent-vivido);
  animation: app-loading-girar 0.75s linear infinite;
}
.app-loading-texto{ color: var(--text-dim); font-size: 0.86rem; font-weight:600; }
@keyframes app-loading-girar{ to{ transform: rotate(360deg); } }

/* (estilos del login: ver bloque "Login" al final del archivo) */

/* ---------------- Animación de círculo al cambiar de tema (ver cambiarTemaConCirculo en app.js) ----------------
   Por default, la View Transitions API cruza ::view-transition-old(root) y ::view-transition-new(root) con un
   fade + el navegador puede animar cada una con su propio timing. Acá se desactiva esa animación default (el
   `animation: none`) para que lo ÚNICO que se vea sea el clip-path circular que arma app.js a mano sobre
   ::view-transition-new(root); y se fuerza mix-blend-mode normal (el default del navegador es "plus-lighter",
   pensado para cross-fades, que acá pisaría los colores reales del tema nuevo mientras crece el círculo). */
::view-transition-old(root),
::view-transition-new(root){
  animation: none;
  mix-blend-mode: normal;
}

/* ============================================================
   Indicador de guardado + error de carga sin conexión
   ============================================================ */
.estado-guardado{
  position: fixed; left: 50%; top: calc(var(--safe-top) + 10px); z-index: 9000;
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,calc(0.35 * var(--shadow-strength)));
  font-size: 0.8rem; font-weight: 600; color: var(--text);
  transition: opacity .2s ease, transform .2s ease;
}
.estado-guardado.visible{ opacity: 1; transform: translate(-50%, 0); }
.estado-guardado-punto{ width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.estado-guardado[data-estado="guardando"] .estado-guardado-punto{ background: var(--accent-vivido); animation: estado-guardado-pulso 1s ease-in-out infinite; }
.estado-guardado[data-estado="offline"] .estado-guardado-punto,
.estado-guardado[data-estado="error"] .estado-guardado-punto{ background: var(--warn); }
.estado-guardado[data-estado="offline"], .estado-guardado[data-estado="error"]{ border-color: rgba(var(--warn-rgb), .5); pointer-events: auto; }
@keyframes estado-guardado-pulso{ 50%{ opacity: .35; } }

.app-loading-error{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; max-width: 300px; padding: 0 16px; }
.app-loading-error.oculto{ display:none; }
.app-loading-error svg{ width: 44px; height: 44px; fill: none; stroke: var(--text-dim); stroke-width: 1.8; stroke-linecap: round; }
.app-loading-error-titulo{ font-size: 1.1rem; font-weight: 700; color: var(--text); }
.app-loading-error-texto{ font-size: 0.9rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 6px; }
.app-loading-error .btn-primary{ width: auto; padding: 12px 28px; }

/* Teléfono con país dentro de los modales: el input genérico de .modal-box va centrado y grande (pensado para montos). */
.modal-field .tel-num{ text-align:left; font-size:0.95rem; font-weight:500; }

/* ---- Gráficos estilo "app de inversiones" (ver renderGraficoLineas): delta arriba, línea gruesa con área, período restante apagado, referencia punteada y pastillas de período abajo. ---- */
.stat-chart-delta{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-height:18px; margin: 2px 0 6px; font-size:0.78rem; }
.stat-chart-delta:empty{ display:none; }
.stat-chart-delta-valor{ font-weight:800; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.stat-chart-delta.sube .stat-chart-delta-valor{ color: var(--ok); }
.stat-chart-delta.baja .stat-chart-delta-valor{ color: var(--warn); }
.stat-chart-delta-vs{ color: var(--text-dim); font-size:0.72rem; }
.stat-chart-labels{ height:16px; margin-top:4px; }
.stat-chart-labels span{ font-size:0.64rem; font-variant-numeric: tabular-nums; }
.stat-chart-labels .stat-chart-label-ini{ left:0; transform:none; }
.stat-chart-labels .stat-chart-label-fin{ right:0; left:auto; transform:none; }
.stat-chart-labels .stat-chart-label-ahora{ color: var(--text); font-weight:800; }
.stat-chart-ref-wrap{ position:absolute; inset:0 0 auto 0; height:var(--alto-grafico, 150px); pointer-events:none; }
.stat-chart-ref-label{
  position:absolute; right:2px; font-size:0.62rem; font-weight:700; color: var(--text-dim);
  background: color-mix(in srgb, var(--bg-panel) 85%, transparent); padding:1px 6px; border-radius:6px; white-space:nowrap;
}
.gastos-total-periodo.periodo-pills{ background:none; padding:0; gap:6px; margin-top:12px; justify-content:space-between; }
.gastos-total-periodo.periodo-pills .gpc-periodo-btn{
  flex:1; max-width:64px; padding:7px 0; border-radius:999px; font-size:0.72rem; letter-spacing:0.2px;
  color: var(--text-dim); background:none; min-height:32px;
}
.gastos-total-periodo.periodo-pills .gpc-periodo-btn.active{ background: var(--bg-panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
/* En Inicio la tarjeta ya muestra su propio "% vs ayer" arriba: no se repite. */
#inicioIngresosChart .stat-chart-delta{ display:none; }

/* Base: los controles de formulario no heredan la tipografía por defecto del navegador (por eso algunos botones salían en otra letra). */
button, input, select, textarea{ font-family: inherit; }
/* Anillo de foco solo con teclado (no al tocar). */
:focus-visible{ outline: 2px solid var(--accent-vivido); outline-offset: 2px; }


/* ---- Config › Reservas online compacta: tarjeta del link arriba y el resto en filas plegables con su valor a la derecha (antes eran 9 paneles con párrafos de ayuda en cada uno). ---- */
.cfg-reservas{ display:flex; flex-direction:column; gap:14px; }
.cfg-link-card{ text-align:center; }
.cfg-link-label{ margin:0; font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color: var(--text-dim); }
.cfg-link-url{ margin:6px 0 14px; font-size:1.05rem; font-weight:800; color: var(--text); word-break:break-all; }
.cfg-link-acciones{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap:8px; }
.cfg-link-acciones .btn-small{ margin:0; min-height:42px; }
.cfg-link-editar{ margin-top:12px; text-align:left; }
.cfg-link-editar > summary{ cursor:pointer; color: var(--text-dim); font-size:0.82rem; font-weight:700; text-align:center; list-style:none; padding:6px; }
.cfg-link-editar > summary::-webkit-details-marker{ display:none; }
.cfg-link-editar[open] > summary{ color: var(--text); }
.cfg-lista{ padding:4px 0; overflow:hidden; }
.cfg-acordeon{ border-top:1px solid var(--line); }
.cfg-acordeon:first-child{ border-top:none; }
.cfg-fila{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 16px;
  list-style:none; cursor:pointer; background:none; border:none; border-radius:0; color: var(--text); font: inherit; text-align:left;
}
.cfg-fila::-webkit-details-marker{ display:none; }
.cfg-fila:active{ transform:none; background: var(--bg-panel-2); }
.cfg-fila-link{ border-top:1px solid var(--line); }
.cfg-fila-ico{
  flex:0 0 32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background: var(--bg-panel-2); color: var(--accent);
}
.cfg-fila-ico svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cfg-fila-titulo{ flex:1; min-width:0; font-weight:700; font-size:0.92rem; }
.cfg-fila-valor{ color: var(--text-dim); font-size:0.82rem; font-weight:600; white-space:nowrap; }
.cfg-fila-valor.alerta{ color: var(--warn); }
.cfg-fila-chevron{ width:16px; height:16px; fill:none; stroke: var(--text-dim); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition: transform 0.15s ease; flex-shrink:0; }
.cfg-acordeon[open] > .cfg-fila .cfg-fila-chevron{ transform: rotate(90deg); }
.cfg-acordeon-cuerpo{ padding: 4px 16px 18px 60px; display:flex; flex-direction:column; gap:10px; }
.cfg-acordeon-cuerpo label{ margin-bottom:-4px; }
.cfg-acordeon-cuerpo .config-toggle-row{ padding:0; border:none; }
.cfg-acordeon-cuerpo .btn-small{ margin:0; }
@media (max-width: 420px){ .cfg-acordeon-cuerpo{ padding-left:16px; } }

/* Anuncio del plan gratis (planes.js): caja discreta con la etiqueta "Publicidad" que exige AdSense. */

/* ============================================================
   Login: sobrio, sin caja flotante ni brillos. En celular es una
   pantalla de formulario; en compu, formulario a la izquierda y
   una presentación de la app a la derecha.
   ============================================================ */
.login-pantalla{ min-height:100vh; min-height:100dvh; background: var(--bg); }
.login-pantalla.oculto{ display:none; }
.login-layout{ min-height:inherit; display:flex; }
.login-lado-form{
  flex:1; display:flex; flex-direction:column;
  padding: calc(var(--safe-top, 0px) + 22px) 22px calc(var(--safe-bottom, 0px) + 28px);
}
.login-marca{ display:flex; align-items:center; gap:10px; }
.login-marca-icono{ width:30px; height:30px; border-radius:8px; }
.login-marca-nombre{ font-weight:700; font-size:0.95rem; color: var(--text); letter-spacing:-0.1px; }
.login-cuerpo{ width:100%; max-width:380px; margin: 44px auto 0; }
.login-titulo{ font-size:1.6rem; line-height:1.2; font-weight:700; letter-spacing:-0.4px; color: var(--text); margin:0 0 8px; }
.login-bajada{ font-size:0.92rem; line-height:1.5; color: var(--text-dim); margin:0 0 26px; }

.login-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.login-tab{
  background:none; border:none; padding:0 0 11px; margin-bottom:-1px; min-height:auto;
  font: inherit; font-size:0.92rem; font-weight:600; color: var(--text-dim); cursor:pointer;
  border-bottom:2px solid transparent; border-radius:0;
}
.login-tab.active{ color: var(--text); border-bottom-color: var(--accent-vivido); }
.login-tab:active{ transform:none; }

.login-form{ display:flex; flex-direction:column; gap:18px; }
.login-field label{ display:block; font-size:0.85rem; font-weight:600; color: var(--text); margin-bottom:7px; text-transform:none; letter-spacing:0; }
.login-ayuda-rubro{ font-size:0.78rem; color: var(--text-dim); margin:7px 2px 0; line-height:1.4; }
.login-label-fila{ display:flex; justify-content:space-between; align-items:baseline; }
.login-forgot-btn{
  background:none; border:none; padding:0; min-height:auto; font: inherit; font-size:0.82rem; font-weight:600;
  color: var(--accent); cursor:pointer;
}
.login-input-wrap{ position:relative; display:flex; align-items:center; }
.login-input-wrap input, .login-input-wrap select{
  width:100%; min-height:48px; padding: 0 14px; font-size:1rem; color: var(--text);
  background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  transition: border-color .15s ease;
}
.login-input-wrap input::placeholder{ color: color-mix(in srgb, var(--text-dim) 75%, transparent); }
.login-input-wrap input:focus, .login-input-wrap select:focus{ outline:none; border-color: var(--accent-vivido); }
.login-input-wrap select{ appearance:none; -webkit-appearance:none; padding-right:36px; }
.login-select-wrap::after{
  content:''; position:absolute; right:16px; top:50%; width:7px; height:7px; pointer-events:none;
  border-right:1.6px solid var(--text-dim); border-bottom:1.6px solid var(--text-dim); transform: translateY(-70%) rotate(45deg);
}
#loginPassword{ padding-right:50px; }
.login-toggle-pass{
  position:absolute; right:2px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color: var(--text-dim); cursor:pointer; min-height:auto; border-radius:8px;
}
.login-toggle-pass.activo{ color: var(--text); }
.login-toggle-pass svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.login-pass-reqs{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:0.78rem; color: var(--text-dim); }
.login-pass-reqs.oculto{ display:none; }
.login-pass-reqs li{ display:inline-flex; align-items:center; gap:5px; }
.login-pass-reqs li::before{ content:''; width:5px; height:5px; border-radius:50%; background: currentColor; opacity:.5; }
.login-pass-reqs li.ok{ color: var(--ok); }
.login-pass-reqs li.ok::before{ opacity:1; }

.login-submit-btn{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:4px;
  border:none; border-radius:10px; background: var(--accent-vivido); color:#17120b;
  font: inherit; font-size:0.98rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.login-submit-btn:hover{ filter: brightness(1.06); }
.login-submit-btn:disabled{ opacity:.6; cursor:default; }
.login-separador{ display:none; }
.login-link-mail{
  align-self:center; background:none; border:none; padding:6px 4px; min-height:auto; cursor:pointer;
  font: inherit; font-size:0.88rem; font-weight:600; color: var(--text-dim); text-decoration:underline; text-underline-offset:3px;
}
.login-link-mail:hover{ color: var(--text); }
.login-link-mail:disabled{ opacity:.55; cursor:default; }
.login-boton-secundario{
  width:100%; min-height:46px; border-radius:10px; border:1px solid var(--line); background:none; color: var(--text);
  font: inherit; font-weight:600; font-size:0.92rem; cursor:pointer;
}
.login-boton-secundario:disabled{ opacity:.55; cursor:default; }

.login-msg{ font-size:0.86rem; line-height:1.45; padding:10px 12px; border-radius:8px; border-left:3px solid; }
.login-msg-error{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.login-msg-info{ background: var(--info-soft); color: var(--info); border-color: var(--info); }
.login-msg-accion{
  margin-top:6px; padding:0; border:none; background:none; min-height:auto; cursor:pointer;
  font: inherit; font-weight:700; color: inherit; text-decoration:underline; text-underline-offset:2px;
}

.login-back-btn{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 22px; padding:0; min-height:auto;
  background:none; border:none; color: var(--text-dim); font: inherit; font-size:0.88rem; font-weight:600; cursor:pointer;
}
.login-back-btn svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#loginOlvidoSection .login-field{ margin-bottom:18px; }
#loginOlvidoSection .login-msg{ margin-bottom:14px; }
#loginRevisaSection{ display:flex; flex-direction:column; gap:12px; }
#loginRevisaSection.oculto, #loginOlvidoSection.oculto, #loginAuthSection.oculto{ display:none; }
#loginRevisaSection .login-bajada{ margin-bottom:10px; }
.login-revisa-ayuda{ font-size:0.82rem; color: var(--text-dim); line-height:1.5; margin:4px 0 0; }
.login-revisa-volver{ margin:6px 0 0; align-self:flex-start; text-decoration:underline; text-underline-offset:3px; }

.login-lado-muestra{ display:none; }
@media (min-width: 960px){
  .login-lado-form{ flex: 0 0 min(520px, 46%); padding: 32px 56px; }
  .login-cuerpo{ margin: auto 0; max-width:380px; }
  .login-lado-muestra{
    display:flex; flex-direction:column; justify-content:center; flex:1; padding: 48px clamp(40px, 6vw, 96px);
    background: var(--bg-panel); border-left:1px solid var(--line);
  }
  .lm-contenido{ max-width:460px; }
  .lm-grilla{ display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; margin-bottom:40px; max-width:340px; }
  .lm-celda{ height:32px; border-radius:7px; border:1px solid var(--line); background: var(--bg); }
  .lm-celda.alta{ grid-row: span 2; height:auto; }
  .lm-celda.c1{ background: color-mix(in srgb, var(--accent-vivido) 22%, var(--bg)); border-color: color-mix(in srgb, var(--accent-vivido) 50%, var(--line)); }
  .lm-celda.c2{ background: color-mix(in srgb, var(--serv-2) 20%, var(--bg)); border-color: color-mix(in srgb, var(--serv-2) 45%, var(--line)); }
  .lm-celda.c3{ background: color-mix(in srgb, var(--serv-3) 20%, var(--bg)); border-color: color-mix(in srgb, var(--serv-3) 45%, var(--line)); }
  .lm-titulo{ font-size:2rem; line-height:1.15; font-weight:700; letter-spacing:-0.8px; color: var(--text); margin:0 0 10px; }
  .lm-bajada{ font-size:1rem; line-height:1.5; color: var(--text-dim); margin:0 0 30px; }
  .lm-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
  .lm-items li{ display:flex; gap:14px; align-items:flex-start; font-size:0.88rem; line-height:1.45; color: var(--text-dim); }
  .lm-items b{ display:block; font-size:0.95rem; font-weight:600; color: var(--text); margin-bottom:2px; }
  .lm-ico{ flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: var(--bg); border:1px solid var(--line); color: var(--accent); }
  .lm-ico svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
}

/* ============================================================
   Rediseño 2026-10 — capa visual general del panel del dueño.
   Va al final a propósito: pisa lo de arriba sin tocar HTML/JS que
   dependen de esas clases. Criterios: títulos en minúscula normal
   (nada de MAYÚSCULAS pesadas), sin caja grande envolviendo cada
   pantalla, listas agrupadas con divisores (mismo lenguaje que
   Config › Reservas online), menos brillos y degradés.
   ============================================================ */
:root{ font-family: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif; }
body{ font-feature-settings: "tnum" 0; }

/* Títulos */
.panel h2{
  text-transform:none; letter-spacing:-0.01em; font-weight:700; font-size:1.05rem; margin-bottom:14px;
}
.notas-page-header h2{ font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; }
header .today{ text-transform:none; }
header .today::first-letter{ text-transform:uppercase; }
.header-saludo{ font-size:1.15rem; letter-spacing:-0.01em; }

/* Pantallas principales: la caja grande que envolvía cada pestaña se va; el título queda como
   título de página. Los .panel internos (secciones de Config, etc.) siguen siendo tarjetas. */
#tab-ventas > .panel,
#tab-historial > .panel{
  background:transparent; border:0; padding:0; box-shadow:none;
}
#tab-ventas > .panel > h2,
#tab-historial > .panel > h2{ font-size:1.5rem; margin: 4px 0 16px; }

/* Botón "Ver agenda" y similares: sin degradé ni mayúsculas. */
.ver-agenda-btn{
  background: transparent !important; color: var(--accent) !important; box-shadow:none !important;
  border: 1px solid var(--line) !important; text-transform:none; letter-spacing:0; font-size:0.8rem; font-weight:600;
  padding: 6px 12px;
}
.ver-agenda-btn:hover{ border-color: var(--accent-vivido) !important; }

/* Acciones rápidas de Inicio: fila de botones, sin el "+" flotante. */
.accion-rapida-icono::after{ display:none; }
.accion-rapida-btn{
  flex-direction:row; justify-content:center; gap:8px; padding: 12px 10px; border-radius:12px;
  background: var(--bg-panel); box-shadow:none;
}
.accion-rapida-icono{ width:28px; height:28px; border-radius:8px; }
.accion-rapida-icono svg{ width:16px; height:16px; }
.accion-rapida-label{ font-size:0.88rem; font-weight:600; }
@media (max-width: 420px){
  .inicio-acciones-rapidas .accion-rapida-btn{ flex-direction:column; gap:6px; }
  .accion-rapida-label{ font-size:0.8rem; }
}

/* Tarjetas resumen: más aire, sin sombras de "tarjeta flotando". */
.resumen-card{ box-shadow:none; border-color: var(--line); border-radius:14px; padding:16px; }
.resumen-card-label{ font-size:0.8rem; font-weight:500; }
.resumen-card-valor{ font-weight:700; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Ventas ---------- */
.ventas-resumen-card{ padding:16px 18px; }
.ventas-resumen-card .resumen-card-valor{ font-size:2rem; }
.resumen-card-categorias-btn .resumen-card-categorias-label{ font-size:0.8rem; font-weight:600; }

/* Categorías: encabezado discreto (antes dorado en mayúsculas). */
.categoria-header{ padding: 14px 2px 8px; }
.categoria-nombre{
  font-size:0.86rem; font-weight:600; text-transform:none; letter-spacing:0; color: var(--text);
}
.categoria-subgrupos .categoria-nombre{ font-size:0.82rem; color: var(--text-dim); }
.categoria-count{ background:transparent; color: var(--text-dim); font-weight:600; font-size:0.78rem; padding:0; }
.categoria-chevron{ display:inline-flex; color: var(--text-dim); transition: transform .15s ease; }
.categoria-chevron svg{ width:15px; height:15px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.fiados-pendientes-chevron, .notas-grupo-chevron{ display:inline-flex; }
.fiados-pendientes-chevron svg, .notas-grupo-chevron svg{ width:14px; height:14px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition: transform .15s ease; }

/* Productos: lista agrupada con divisores en vez de una tarjeta grande por producto. */
#tab-ventas .categoria-items{
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
#tab-ventas .categoria-items:empty{ display:none; }
#tab-ventas .categoria-items > .producto-card{
  background:none; border:0; border-radius:0; margin:0; box-shadow:none;
  border-top:1px solid var(--line);
}
#tab-ventas .categoria-items > .producto-card:first-child{ border-top:0; }
#tab-ventas .categoria-items > .producto-card:hover{ background: color-mix(in srgb, var(--bg-panel-2) 55%, transparent); }
#tab-ventas .categoria-items > .producto-card:active{ transform:none; }
/* Subcategorías dentro de la lista: sin caja dentro de caja. */
#tab-ventas .categoria-items .categoria-subgrupos{ border-top:1px solid var(--line); padding: 0 0 0 0; margin:0; border-left:0; }
#tab-ventas .categoria-items .categoria-subgrupos .categoria-header{ padding: 12px 14px 6px; }
#tab-ventas .categoria-items .categoria-subgrupos .categoria-items{ border:0; border-radius:0; background:none; }
#tab-ventas .categoria-items .categoria-subgrupos .producto-card{ border-top:1px solid var(--line); }
#tab-ventas .categoria-items .categoria-subgrupos .categoria-items > .producto-card:first-child{ border-top:1px solid var(--line); }

.producto-fila-top{ padding: 10px 8px 10px 12px; gap:12px; }
.producto-fila-icono{ width:44px !important; height:44px !important; border-radius:10px !important; font-size:0.85rem; font-weight:700; }
.producto-fila-nombre{ font-weight:600; font-size:0.95rem; }
.producto-fila-meta{ margin-top:3px; align-items:center; }
.producto-fila-precio{ font-size:0.86rem; color: var(--text); font-weight:500; gap:8px; align-items:center; }
.producto-precio-final{ font-size:0.86rem; color: var(--text); }
.producto-tag-online{
  font-size:0.7rem; font-weight:600; color: var(--accent); background: var(--accent-soft);
  padding: 1px 7px; border-radius: 20px; line-height:1.5;
}
.producto-fila-stock{ font-size:0.82rem; font-weight:500; letter-spacing:0; }
.producto-fila-stock.stock-ok{ color: var(--text-dim); font-weight:500; }
.producto-fila-stock.stock-sin, .producto-fila-stock.stock-bajo-txt{ font-weight:600; }
.producto-fila-extra{ padding: 0 12px 10px 68px; }
.reserva-item{ background: transparent; border:0; padding: 2px 0; min-height:auto; }
.reserva-info{ display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; color: var(--text-dim); font-weight:500; }
.reserva-info-punto{ width:6px; height:6px; border-radius:50%; background: var(--accent-vivido); flex-shrink:0; }

/* Ventas como listado de productos estilo AutoDS: pestañas de estado con contador arriba, tabla con
   columnas en compu (Producto · Precio · Ganancia · Stock · Estado) y etiquetas de estado con punto. */
#ventasEstadoTabs{
  display:flex; gap:2px; margin: 2px 0 14px; padding:0; overflow-x:auto; scrollbar-width:none;
  background:none; border:0; border-bottom:1px solid var(--line); border-radius:0;
}
#ventasEstadoTabs::-webkit-scrollbar{ display:none; }
#ventasEstadoTabs .filtro-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:auto;
  padding: 10px 12px 11px; margin-bottom:-1px; font-size:0.84rem; font-weight:600; color: var(--text-dim);
  background:none; border:0; border-bottom:2px solid transparent; border-radius:0; box-shadow:none;
}
#ventasEstadoTabs .filtro-chip:hover{ color: var(--text); }
#ventasEstadoTabs .filtro-chip.active{ color: var(--text); border-bottom-color: var(--accent-vivido); background:none; }
#ventasEstadoTabs .filtro-chip:active{ transform:none; }
.ventas-tab-count{
  font-size:0.72rem; font-weight:600; font-variant-numeric: tabular-nums; color: var(--text-dim);
  background: var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding: 0 7px; line-height:1.6;
}
#ventasEstadoTabs .filtro-chip.active .ventas-tab-count{ color: var(--accent); border-color: color-mix(in srgb, var(--accent-vivido) 40%, var(--line)); background: var(--accent-soft); }

.estado-pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:0.75rem; font-weight:600; line-height:1; padding: 5px 9px; border-radius:999px;
  background: var(--ok-soft); color: var(--ok);
}
.estado-pill i{ width:6px; height:6px; border-radius:50%; background: currentColor; flex-shrink:0; }
.estado-pill-bajo{ background: color-mix(in srgb, var(--pendiente) 16%, transparent); color: var(--pendiente); }
.estado-pill-sin{ background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.estado-pill-largo{ display:none; }
.pcol{ display:none; }
.producto-fila-tags{ display:none; }
.producto-fila-tabla .producto-fila-top{ gap:12px; }
.producto-fila-tabla .pcol-estado{ display:block; flex-shrink:0; }
.producto-fila-kebab{ cursor:pointer; transition: background .1s ease, color .1s ease; }
.producto-fila-kebab:hover{ background: var(--bg-panel-2); color: var(--text); }
.ventas-tabla-head{ display:none; }

.ventas-col-principal{ container: ventaslista / inline-size; }
@container ventaslista (min-width: 620px){
  .ventas-tabla-head{
    display:grid; grid-template-columns: minmax(0,1fr) 96px 90px 52px 108px 30px; gap:12px;
    padding: 0 4px 8px 12px; font-size:0.72rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
    color: var(--text-dim);
  }
  .ventas-tabla-head span:nth-child(n+2):nth-child(-n+4){ text-align:right; }
  .producto-fila-tabla .producto-fila-top{
    display:grid; grid-template-columns: 44px minmax(0,1fr) 96px 90px 52px 108px; gap:12px; align-items:center;
    padding: 10px 8px 10px 12px; cursor:pointer;
  }
  .producto-fila-tabla .producto-fila-meta{ display:none; }
  .producto-fila-tabla .producto-fila-tags{ display:flex; gap:6px; margin-top:4px; }
  .producto-fila-tabla .producto-fila-tags:empty{ display:none; }
  .producto-fila-tabla .pcol{ display:block; font-size:0.88rem; font-variant-numeric: tabular-nums; color: var(--text); }
  .producto-fila-tabla .pcol-precio, .producto-fila-tabla .pcol-ganancia, .producto-fila-tabla .pcol-stock{ text-align:right; }
  .producto-fila-tabla .pcol-precio{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .producto-fila-tabla .pcol-precio .producto-descuento-badge{ display:none; }
  .producto-fila-tabla .pcol-ganancia{ color: var(--ok); }
  .producto-fila-tabla .pcol-ganancia small{ display:block; font-size:0.72rem; color: var(--text-dim); }
  .producto-fila-tabla .pcol-ganancia .ganancia-neg{ color: var(--danger); }
  .producto-fila-tabla .pcol-vacio{ color: var(--text-dim); }
  .producto-fila-tabla .pcol-stock{ font-weight:600; }
  .estado-pill-largo{ display:inline; }
  .estado-pill-corto{ display:none; }
}
/* Más angosto (lista entre 500 y 620px): misma tabla sin la columna de ganancia. */
@container ventaslista (min-width: 500px) and (max-width: 619.98px){
  .ventas-tabla-head{
    display:grid; grid-template-columns: minmax(0,1fr) 96px 52px 108px 30px; gap:12px;
    padding: 0 4px 8px 12px; font-size:0.72rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: var(--text-dim);
  }
  .ventas-tabla-head span:nth-child(3){ display:none; }
  .ventas-tabla-head span:nth-child(2), .ventas-tabla-head span:nth-child(4){ text-align:right; }
  .producto-fila-tabla .producto-fila-top{
    display:grid; grid-template-columns: 44px minmax(0,1fr) 96px 52px 108px; gap:12px; align-items:center; padding: 10px 8px 10px 12px; cursor:pointer;
  }
  .producto-fila-tabla .producto-fila-meta{ display:none; }
  .producto-fila-tabla .producto-fila-tags{ display:flex; gap:6px; margin-top:4px; }
  .producto-fila-tabla .producto-fila-tags:empty{ display:none; }
  .producto-fila-tabla .pcol{ display:block; font-size:0.88rem; font-variant-numeric: tabular-nums; color: var(--text); }
  .producto-fila-tabla .pcol-ganancia{ display:none; }
  .producto-fila-tabla .pcol-precio, .producto-fila-tabla .pcol-stock{ text-align:right; }
  .producto-fila-tabla .pcol-precio{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .producto-fila-tabla .pcol-precio .producto-descuento-badge{ display:none; }
  .producto-fila-tabla .pcol-stock{ font-weight:600; }
  .estado-pill-largo{ display:inline; }
  .estado-pill-corto{ display:none; }
}

/* Fiado / pedidos online: fila simple con borde, sin franja roja gruesa. */
.fiados-pendientes-card{ border-left-width:1px !important; border-radius:12px; box-shadow:none; }
.fiados-pendientes-titulo{ font-weight:600; }

/* ---------- Turnos ---------- */
.turnos-vista-toggle .active, .turnos-toggle .active{ box-shadow:none; }

/* ---------- Configuración: hub como lista agrupada (como Reservas online) ---------- */
.config-hub-grid{
  display:flex !important; flex-direction:column !important; gap:0 !important;
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; max-width:640px;
}
.config-hub-card{
  border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  border-top:1px solid var(--line) !important; min-height:60px; padding: 12px 16px !important;
}
.config-hub-card:first-child{ border-top:0 !important; }
.config-hub-card:hover{ background: var(--bg-panel-2) !important; }
.config-hub-icon{ width:32px !important; height:32px !important; border-radius:9px !important; background: var(--bg-panel-2) !important; }

/* Secciones de Config (Horarios, Notificaciones, etc.): título chico y gris, sin mayúsculas. */
.notas-page .config-seccion-body > .panel{ border-radius:14px; box-shadow:none; }
.notas-page .config-seccion-body > .panel > h2{
  font-size:0.82rem; font-weight:600; color: var(--text-dim); margin:0 0 12px;
}
.config-limite-fields label{
  text-transform:none !important; letter-spacing:0 !important; font-size:0.8rem !important; font-weight:500 !important; color: var(--text-dim);
}
.config-toggle-icon{ width:32px; height:32px; border-radius:9px; }
.config-toggle-label{ font-weight:600; }
.config-toggle-sub{ font-size:0.8rem; }

/* Horarios: pestañas como control segmentado en vez de dos tarjetas grandes. */
.horarios-tabs{
  display:inline-flex !important; align-self:flex-start; justify-self:start; gap:2px !important; padding:3px; border-radius:11px;
  background: var(--bg-panel-2); margin-bottom:14px; width:auto !important; grid-template-columns:none !important;
}
.horarios-tab-card{
  background:none !important; border:0 !important; box-shadow:none !important; padding: 8px 16px !important;
  border-radius:9px !important; min-height:auto !important; gap:0 !important;
}
.horarios-tab-card.active{ background: var(--bg-panel) !important; box-shadow: 0 1px 3px rgba(0,0,0,.18) !important; }
.horarios-tab-icon, .horarios-tab-sub{ display:none !important; }
.horarios-tab-titulo{ font-size:0.88rem; font-weight:600; color: var(--text-dim) !important; }
.horarios-tab-card.active .horarios-tab-titulo{ color: var(--text) !important; }

/* Novedades: línea de tiempo con cada versión plegable (<details>); la última versión destacada y abierta. */
#novedadesHistorial{ padding: 6px 18px 0; }
.novedad-item{ position:relative; padding: 4px 0 4px 22px; border-bottom:0; }
.novedad-item::before{ content:''; position:absolute; left:4px; top:22px; bottom:-8px; width:1px; background: var(--line); }
.novedad-item:last-child::before{ display:none; }
.novedad-item::after{ content:''; position:absolute; left:0; top:16px; width:9px; height:9px; border-radius:50%; background: var(--bg-panel); border:2px solid var(--line); }
.novedad-item:first-child::after{ border-color: var(--accent-vivido); background: var(--accent-vivido); }
.novedad-item-head{
  display:flex; gap:10px; margin:0; align-items:center; padding: 8px 6px; border-radius:8px;
  cursor:pointer; list-style:none; user-select:none; -webkit-user-select:none;
}
.novedad-item-head::-webkit-details-marker{ display:none; }
.novedad-item-head:hover{ background: var(--bg-panel-2); }
.novedad-item-version{ font-size:0.95rem; color: var(--text); font-weight:700; }
.novedad-item:first-child .novedad-item-head::after{
  content:'Actual'; order:3; font-size:0.7rem; font-weight:600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius:20px;
}
.novedad-item-fecha{ font-size:0.78rem; color: var(--text-dim); }
.novedad-item-cant{ order:4; margin-left:auto; font-size:0.76rem; color: var(--text-dim); }
.novedad-item-chevron{ order:5; width:15px; height:15px; flex-shrink:0; fill:none; stroke: var(--text-dim); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform: rotate(-90deg); transition: transform .15s ease; }
.novedad-item[open] .novedad-item-chevron{ transform: rotate(0deg); }
.novedad-item ul{ padding: 2px 6px 10px 22px; margin:0; }
.novedad-item li{ font-size:0.88rem; color: var(--text); opacity:.86; margin: 3px 0; line-height:1.5; }
#modalNovedadesBody{ max-height: min(60vh, 520px); overflow-y:auto; text-align:left; }
.version-footer{ padding: 8px 18px 16px; }
#configNovedadesOverlay .config-seccion-body > .panel{ max-width:720px; }

/* Inicio y Turnos: la lista del día como filas con divisores dentro de su panel. */
.today-list{ gap:0; }
.today-list .turno-compacto{ background:none; border-radius:0; border-top:1px solid var(--line); padding: 12px 4px; }
.today-list .turno-compacto:first-child{ border-top:0; }
.today-list .turno-compacto:hover{ background: color-mix(in srgb, var(--bg-panel-2) 50%, transparent); }
/* Etiqueta "ahora" del gráfico de Inicio: no se pisa con "24h". */
.stat-chart-labels .stat-chart-label-ahora{ transform: translateX(-100%); padding-right:6px; }

/* Turnos: sin caja grande alrededor, control Hoy/Semana neutro y bloques de agenda más limpios. */
#tab-historial .historial-col-principal.panel{ background:transparent; border:0; padding:0; box-shadow:none; }
#tab-historial .historial-col-principal > h2{ font-size:1.5rem; margin: 4px 0 16px; }
.subtabs{ padding:3px; border-radius:11px; }
.subtab-btn{ font-size:0.86rem; font-weight:600; padding:8px 6px; border-radius:9px; }
.subtab-btn.active{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,calc(.18 * var(--shadow-strength))); }
.agenda-fecha-btn{ font-weight:600; }
.agenda-grid-scroll{ background: var(--bg-panel); }
.agenda-block{
  background: color-mix(in srgb, var(--accent-vivido) 14%, var(--bg-panel));
  box-shadow: inset 3px 0 0 var(--warn); border-radius:6px; padding-left:12px;
}
.agenda-block.pagado{ box-shadow: inset 3px 0 0 var(--ok); }
.agenda-block.completado{ background: color-mix(in srgb, var(--ok) 16%, var(--bg-panel)); }
.agenda-block-cliente{ font-weight:600; }
.agenda-block-hora{ font-weight:600; }
.agenda-bloqueo-label{ text-transform:none; letter-spacing:0; font-weight:600; }

/* ---------- Tu perfil: panel lateral (compu) / pantalla completa (celu) ---------- */
.perfil-overlay{ padding:0; justify-content:flex-end; align-items:stretch; }
.perfil-hoja{
  width:100%; max-width:440px; height:100%; overflow-y:auto; background: var(--bg);
  border-left:1px solid var(--line); padding: 0 20px calc(28px + var(--safe-bottom));
  transform: translateX(24px); opacity:0; transition: transform .22s ease, opacity .22s ease;
}
.perfil-overlay.show .perfil-hoja{ transform:none; opacity:1; }
@media (max-width: 600px){ .perfil-hoja{ max-width:none; border-left:0; } }
.perfil-barra{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  height:56px; margin: 0 -20px; padding: var(--safe-top) 12px 0 20px; background: var(--bg);
}
.perfil-barra-titulo{ font-weight:600; color: var(--text-dim); font-size:0.9rem; }
.perfil-cerrar{
  width:38px; height:38px; min-height:auto; padding:0; border-radius:10px; border:0; background:none; color: var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.perfil-cerrar:hover{ background: var(--bg-panel-2); color: var(--text); }
.perfil-cerrar svg{ width:20px; height:20px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; }
.perfil-cab{ display:flex; align-items:center; gap:16px; margin: 6px 0 26px; }
.perfil-avatar{
  width:64px; height:64px; border-radius:18px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color: var(--accent); font-weight:700; font-size:1.3rem;
}
.perfil-avatar img{ width:100%; height:100%; object-fit:cover; }
.perfil-avatar svg{ width:30px; height:30px; fill:none; stroke: currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.perfil-cab-texto{ min-width:0; }
.perfil-nombre{ font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; line-height:1.2; color: var(--text); overflow-wrap:anywhere; }
.perfil-rubro{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:3px; color: var(--text-dim); font-size:0.88rem; }
.perfil-plan:empty{ display:none; }
.perfil-plan{ font-size:0.72rem; font-weight:600; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius:20px; }
.perfil-seccion{ margin-bottom:22px; }
.perfil-seccion-titulo{ font-size:0.8rem; font-weight:600; color: var(--text-dim); margin: 0 0 8px 2px; }
.perfil-grupo{ background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.perfil-campo{ display:flex; flex-direction:column; gap:4px; padding: 10px 14px; border-top:1px solid var(--line); margin:0; }
.perfil-campo:first-child{ border-top:0; }
.perfil-campo > span{ font-size:0.76rem; font-weight:500; color: var(--text-dim); text-transform:none; letter-spacing:0; }
.perfil-campo input, .perfil-campo select{
  border:0 !important; background:transparent !important; padding:2px 0 !important; min-height:30px !important;
  font-size:1rem; font-weight:500; color: var(--text); box-shadow:none !important; width:100%;
}
.perfil-campo input:focus, .perfil-campo select:focus{ outline:none; }
.perfil-campo:focus-within{ background: color-mix(in srgb, var(--bg-panel-2) 45%, transparent); }
.perfil-ayuda{ font-size:0.8rem; color: var(--text-dim); margin: 8px 2px 0; line-height:1.45; }
.perfil-guardar{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.perfil-guardar.oculto{ display:none; }
.perfil-guardar .btn-small{ margin:0; }
.perfil-fila{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding: 10px 14px; margin:0;
  background:none; border:0; border-top:1px solid var(--line); border-radius:0; color: var(--text);
  font: inherit; text-align:left; cursor:pointer; text-transform:none; letter-spacing:0;
}
.perfil-grupo > .perfil-fila:first-child{ border-top:0; }
button.perfil-fila:hover, label.perfil-fila:hover{ background: color-mix(in srgb, var(--bg-panel-2) 50%, transparent); }
.perfil-fila-dato{ cursor:default; }
.perfil-fila-ico{
  flex:0 0 32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background: var(--bg-panel-2); color: var(--accent);
}
.perfil-fila-ico svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.perfil-fila-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.perfil-fila-texto b{ font-weight:600; font-size:0.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perfil-fila-texto small{ font-size:0.8rem; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perfil-fila-dato .perfil-fila-texto small{ order:-1; }
.perfil-fila-chevron{ width:16px; height:16px; fill:none; stroke: var(--text-dim); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.perfil-fila .switch{ flex-shrink:0; }
.perfil-salir{
  width:100%; min-height:48px; border-radius:12px; border:1px solid var(--line); background:none;
  color: var(--danger); font: inherit; font-weight:600; font-size:0.95rem; cursor:pointer; margin-top:4px;
}
.perfil-salir:hover{ background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* ---------- Más, Estadísticas, Servicios ---------- */
#tab-config > .config-hub-panel{ background:transparent; border:0; padding:0; box-shadow:none; }
#tab-config > .config-hub-panel > h2{ font-size:1.5rem; margin: 4px 0 16px; border:0; padding:0; }
.sidebar-link-reservas-label{ text-transform:none !important; letter-spacing:0 !important; font-size:0.78rem !important; font-weight:600 !important; }
/* Pestañas de Estadísticas: control segmentado neutro. */
.estad-tabs{ background: var(--bg-panel-2); border-radius:11px; padding:3px; gap:2px !important; border:0; }
.estad-tabs .filtro-chip{ background:none; border:0; color: var(--text-dim); font-size:0.82rem; font-weight:600; border-radius:9px; padding:8px 6px; }
.estad-tabs .filtro-chip.active{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,calc(.18 * var(--shadow-strength))); }
.gpc-periodo-btn{ text-transform:none; letter-spacing:0; font-size:0.8rem; font-weight:600; }
/* Servicios: lista agrupada. */
#serviciosList{ background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#serviciosList:empty{ display:none; }
#serviciosList .servicio-item{ background:none; border:0; border-radius:0; margin:0; border-top:1px solid var(--line); box-shadow:none; }
#serviciosList .servicio-item:first-child{ border-top:0; }
#serviciosList{ gap:0 !important; }
#serviciosList .servicio-item{ padding: 12px 14px; }
.servicio-badge-online{ font-size:0.72rem; font-weight:600; background: var(--accent-soft); padding: 1px 7px; border-radius:20px; }
@media (max-width: 859px){
  #masLista{ background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding: 0 14px; }
  #masLista > .mas-lista-item:last-of-type{ border-bottom:0; }
}

/* ============================================================
   Config › Horarios y Notificaciones (.cfg-moderno): estilo de
   pantalla de ajustes. Una sola columna centrada (antes dos
   paneles de distinto alto lado a lado con aire muerto), cada
   panel con filas a todo el ancho separadas por un filo, el
   control a la derecha de su etiqueta, y selects propios en vez
   del gris nativo.
   ============================================================ */
.cfg-moderno .config-seccion-body{
  display:flex; flex-direction:column; align-items:stretch; gap:18px; max-width:680px; width:100%; margin: 0 auto;
}
.cfg-moderno .config-seccion-body > .panel{ flex:none; max-width:none; padding:18px; border-radius:14px; overflow:hidden; }
.cfg-moderno .config-seccion-body > .panel > h2{ font-size:0.98rem; font-weight:650; color: var(--text); margin:0 0 4px; letter-spacing:-0.1px; }
.cfg-moderno .panel > .config-hint{ font-size:0.84rem; line-height:1.45; color: var(--text-dim); margin: 0 0 12px; }
.cfg-moderno .panel > h2 + .config-toggle-row,
.cfg-moderno .panel > h2 + .aviso-senas-activas + .config-toggle-row{ margin-top:12px; }
.cfg-moderno .panel > .config-toggle-row{
  margin-left:-18px; margin-right:-18px; padding: 14px 18px 0; border-top:1px solid var(--line);
}
.cfg-moderno .config-toggle-icon{ width:34px; height:34px; border-radius:10px; background: var(--bg-panel-2); }
.cfg-moderno .config-limite-fields{
  display:block; margin: 14px -18px -18px; padding:0; border-top:1px solid var(--line);
}
.cfg-moderno .config-limite-fields > div{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 11px 18px; border-top:1px solid var(--line); grid-column:auto !important;
}
.cfg-moderno .config-limite-fields > div:first-child{ border-top:0; }
.cfg-moderno .config-limite-fields > div > label{
  margin:0; flex:1; min-width:0; font-size:0.9rem !important; font-weight:500 !important; color: var(--text) !important;
}
.cfg-moderno .config-limite-fields > div > select,
.cfg-moderno .config-limite-fields > div > input,
.cfg-moderno .config-limite-fields > div > .date-trigger{
  flex:0 0 auto; width:auto; min-width:150px; max-width:58%;
}
.cfg-moderno .config-limite-fields > div > input[type="number"]{ width:110px; min-width:0; text-align:right; }
.cfg-moderno .config-limite-fields > button{
  display:block; width:auto; margin: 4px 18px 16px auto; padding: 0 16px;
}
.cfg-moderno .config-limite-fields > div + button{ margin-top:12px; }

/* Controles compactos y parejos (selects, horas, botones). */
.cfg-moderno select,
.cfg-moderno .date-trigger,
.cfg-moderno input[type="number"]{
  min-height:40px; height:40px; padding: 0 12px; font-size:0.9rem; border-radius:9px;
  background-color: var(--bg-panel-2); border:1px solid var(--line); color: var(--text);
}
.cfg-moderno select{
  appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9fa8' stroke-width='2.2' 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 11px center; background-size:15px;
}
.cfg-moderno select:hover, .cfg-moderno .date-trigger:hover{ border-color: color-mix(in srgb, var(--text-dim) 55%, var(--line)); }
.cfg-moderno select:focus, .cfg-moderno input:focus{ outline:none; border-color: var(--accent-vivido); }
.cfg-moderno .date-trigger{ display:inline-flex; align-items:center; cursor:pointer; font-variant-numeric: tabular-nums; }
.cfg-moderno .btn-small{ min-height:40px; height:40px; border-radius:9px; font-size:0.86rem; font-weight:600; }

/* Pestañas internas (Por horario / Fechas puntuales / Días fijos). */
.cfg-moderno .subtabs{ background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px; margin: 4px 0 14px; }
.cfg-moderno .subtab-btn{ font-size:0.84rem; font-weight:600; padding: 8px 6px; border-radius:8px; color: var(--text-dim); }
.cfg-moderno .subtab-btn.active{ background: var(--bg-panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* Agregar un bloqueo: día + desde + hasta + Agregar en una sola línea cuando entra. */
.cfg-moderno .add-bloqueo-form{ display:grid; grid-template-columns: 1fr; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.cfg-moderno .add-bloqueo-row2 label{ display:block; font-size:0.78rem; font-weight:500; text-transform:none; letter-spacing:0; color: var(--text-dim); margin: 0 0 5px; }
.cfg-moderno .add-bloqueo-row2 button{ height:40px; }
.cfg-moderno .add-bloqueo-row2 .date-trigger{ width:100%; }
@media (min-width: 620px){
  .cfg-moderno .add-bloqueo-form{ grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2.6fr); align-items:end; }
}
.cfg-moderno .bloqueo-row{ background: var(--bg-panel-2); border:1px solid var(--line); border-radius:10px; padding: 8px 10px 8px 12px; }
.cfg-moderno .empty-bloqueos{ background:none; border:1px dashed var(--line); text-align:center; padding: 14px 12px; }
.cfg-moderno .config-mas{ margin: -4px 0 12px; }
.cfg-moderno .dia-fijo-chip{ border-radius:10px; padding: 11px 2px; font-size:0.72rem; }
.cfg-moderno .horas-recomendadas-list{ margin-bottom:12px; }
.cfg-moderno .add-hora-row{ display:flex; gap:8px; }

/* Pestañas de arriba (Disponibilidad / Accesos rápidos) centradas con el contenido. */
.cfg-moderno .horarios-tabs{ display:flex !important; width:100% !important; max-width:680px; margin: 0 auto 16px !important; }
.cfg-moderno .horarios-tab-card{ flex:1; justify-content:center; }
.cfg-moderno .horarios-tab-panel{ width:100%; }

/* ============================================================
   Desplegables de filtro (Turnos, Ventas, Clientes): mismo
   lenguaje que el menú ⋮ — panel con sombra suave, títulos de
   sección chicos sin mayúsculas, opciones como pastillas con
   borde (la elegida en el color de acento, sin relleno sólido)
   y una entrada corta al abrir.
   ============================================================ */
.filtro-popover{
  width:min(320px, 88vw); padding:6px 14px 14px; border-radius:14px;
  background: color-mix(in srgb, var(--bg-panel-2) 92%, var(--text) 3%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--text) 10%);
  box-shadow: 0 16px 40px rgba(0,0,0,calc(0.45 * var(--shadow-strength))), 0 2px 8px rgba(0,0,0,calc(0.25 * var(--shadow-strength)));
}
.filtro-popover.open{ animation: filtroPopoverIn .14s ease-out; transform-origin: top right; }
@keyframes filtroPopoverIn{ from{ opacity:0; transform: translateY(-4px) scale(0.98); } to{ opacity:1; transform:none; } }
.filtro-popover-header{
  margin: 0 -14px 8px; padding: 8px 8px 8px 14px; border-bottom:1px solid var(--line);
  font-size:0.9rem; font-weight:650;
}
.filtro-popover-cerrar{ width:30px; height:30px; border-radius:8px; cursor:pointer; }
.filtro-popover-cerrar:hover{ background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.filtro-popover-titulo{
  font-size:0.74rem; font-weight:600; text-transform:none; letter-spacing:0; color: var(--text-dim);
  margin: 14px 0 8px;
}
.filtro-popover .notas-filtros{ background:none; border:0; padding:0; gap:6px; }
.filtro-popover .notas-filtros .filtro-chip,
.filtro-popover .filtro-chip{
  flex: 0 1 auto; min-width:0; padding: 7px 12px; border-radius:999px; cursor:pointer;
  font-size:0.8rem; font-weight:600; color: var(--text);
  background: transparent; border:1px solid var(--line);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.filtro-popover .filtro-chip:hover{ border-color: color-mix(in srgb, var(--text-dim) 60%, var(--line)); }
.filtro-popover .filtro-chip.active{
  background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent-vivido) 60%, transparent);
}
.filtro-popover .filtro-chip:active{ transform:none; }
.filtro-popover-limpiar{ margin-top:14px; min-height:38px; border-radius:9px; }
.filtro-btn{ cursor:pointer; }
.filtro-btn:hover{ color: var(--text); border-color: color-mix(in srgb, var(--text-dim) 50%, var(--line)); }

/* ============================================================
   Aviso flotante (#toast): pastilla chica centrada abajo con
   ícono, en vez de la barra a todo el ancho con borde dorado.
   ============================================================ */
#toast{
  left:50%; right:auto; bottom: calc(84px + env(safe-area-inset-bottom));
  width:max-content; max-width: min(420px, calc(100vw - 32px));
  display:flex; align-items:center; gap:10px; text-align:left;
  padding: 10px 16px 10px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--bg-panel-2) 88%, var(--text) 6%);
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--text) 12%);
  color: var(--text); font-size:0.86rem; font-weight:500; line-height:1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,calc(0.4 * var(--shadow-strength))), 0 2px 6px rgba(0,0,0,calc(0.2 * var(--shadow-strength)));
  opacity:0; transform: translate(-50%, 12px) scale(0.97);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
#toast.show{ opacity:1; transform: translate(-50%, 0) scale(1); }
#toast.con-accion{ padding-right:6px; }
#toast .toast-icono{
  flex:0 0 24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--ok-soft); color: var(--ok);
}
#toast .toast-icono svg{ width:14px; height:14px; fill:none; stroke: currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
#toast.toast-error .toast-icono{ background: var(--warn-soft); color: var(--warn); }
#toast .toast-accion-btn{
  margin-left:4px; padding: 6px 12px; border-radius:999px; background: var(--accent-soft); color: var(--accent);
}
@media (min-width: 860px){
  #toast{ bottom: 28px; left: calc(50% + var(--sidebar-w) / 2); }
}

/* ============================================================
   Menú ⋮ compacto (turnos, productos): botones rápidos arriba,
   acciones del momento a la vista y "Más opciones" en un
   segundo panel que entra deslizando dentro del mismo menú.
   ============================================================ */
.action-menu-compacto{ min-width:248px; max-width:290px; padding:6px; }
.action-menu-compacto .am-vista{ animation: amVistaIn .16s ease-out; }
.action-menu-compacto .am-vista-mas{ display:none; }
.action-menu-compacto.ver-mas .am-vista-principal{ display:none; }
.action-menu-compacto.ver-mas .am-vista-mas{ display:block; animation-name: amVistaInDer; }
@keyframes amVistaIn{ from{ opacity:0; transform: translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes amVistaInDer{ from{ opacity:0; transform: translateX(8px); } to{ opacity:1; transform:none; } }

.am-rapidas{ display:flex; gap:6px; padding:2px 2px 6px; }
.am-rapida{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding: 10px 4px 8px; border-radius:10px; cursor:pointer; min-height:auto;
  background: color-mix(in srgb, var(--text) 5%, transparent); border:1px solid transparent;
  color: var(--text); font-size:0.74rem; font-weight:600; transition: background .1s ease, border-color .1s ease;
}
.am-rapida:hover, .am-rapida:focus-visible{ background: color-mix(in srgb, var(--text) 9%, transparent); outline:none; }
.am-rapida:active{ transform:none; background: color-mix(in srgb, var(--text) 13%, transparent); }
.am-rapida-icono{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; color: var(--text-dim); }
.am-rapida.accent .am-rapida-icono{ color: var(--accent); }
.am-rapida-icono svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.am-rapida-label{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.am-destacadas{ padding-top:4px; border-top:1px solid var(--line); margin-top:2px; }
.am-rapidas + .am-mas, .am-destacadas + .am-mas{ margin-top:4px; position:relative; }
.am-destacadas + .am-mas::before{ content:""; position:absolute; top:-3px; left:6px; right:6px; height:1px; background: var(--line); }
.am-mas, .am-volver{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left; cursor:pointer;
  background:transparent; border:none; color: var(--text-dim); padding: 6px 10px; min-height:34px;
  font-size:0.86rem; font-weight:500; border-radius:8px;
}
.am-mas:hover, .am-volver:hover{ background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.am-mas:active, .am-volver:active{ transform:none; }
.am-mas .action-menu-icon svg{ fill: currentColor; stroke:none; }
.am-mas-chevron{ margin-left:auto; width:15px; height:15px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.am-volver{ font-weight:650; color: var(--text); margin-bottom:2px; border-bottom:1px solid var(--line); border-radius:8px 8px 0 0; }
.am-volver svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* En celular el menú se toca con el dedo: filas un poco más altas. */
@media (max-width: 600px){
  .action-menu-item, .am-mas, .am-volver{ min-height:40px; }
  .am-rapida{ padding: 12px 4px 10px; }
}

/* ---- Configuración: ayudas detrás del botón ⓘ (ver compactarAyudasConfig en app.js) ---- */
.cfg-ayuda-movida{ display:none !important; }
.cfg-titulo-con-ayuda{ display:flex !important; align-items:center; gap:8px; }
.cfg-ayuda-btn{
  flex-shrink:0; width:26px; height:26px; min-height:auto; padding:0; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color: var(--text-dim); transition: background .12s ease, color .12s ease;
}
.cfg-ayuda-btn svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; }
.cfg-ayuda-btn:hover, .cfg-ayuda-btn.activo{ color: var(--accent); background: var(--accent-soft); }
.cfg-ayuda-btn:active{ transform:none; }
.cfg-ayuda-caja{
  margin: 6px 0 12px; padding: 10px 12px; border-radius:10px;
  background: var(--bg-panel-2); border:1px solid var(--line);
  font-size:0.84rem; line-height:1.5; color: var(--text-dim);
  animation: cfgAyudaIn .15s ease-out;
}
.cfg-ayuda-caja p{ margin:0; }
.cfg-ayuda-caja p + p{ margin-top:6px; }
.cfg-ayuda-caja b{ color: var(--text); font-weight:600; }
@keyframes cfgAyudaIn{ from{ opacity:0; transform: translateY(-3px); } to{ opacity:1; transform:none; } }
.cfg-ayuda-fila{ display:flex; justify-content:flex-end; margin: -4px 0 -6px; }

/* Ventas: botón "Categorías" al lado del buscador (antes un iconito dentro de "Ventas de hoy"). */
.ventas-categorias-btn{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px; height:44px; min-height:auto; padding: 0 16px;
  border-radius:999px; cursor:pointer; font: inherit; font-size:0.88rem; font-weight:600;
  background: var(--accent-soft); color: var(--accent); border:1px solid color-mix(in srgb, var(--accent-vivido) 45%, transparent);
  transition: background .12s ease, border-color .12s ease;
}
.ventas-categorias-btn:hover{ background: color-mix(in srgb, var(--accent-vivido) 22%, transparent); border-color: var(--accent-vivido); }
.ventas-categorias-btn:active{ transform:none; }
.ventas-categorias-btn svg{ width:17px; height:17px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 380px){
  .ventas-categorias-btn{ width:44px; padding:0; justify-content:center; }
  .ventas-categorias-btn span{ display:none; }
}

/* Ventas: arrastrar productos (ver el bloque "arrastrar un producto" en app.js). */
#tab-ventas .producto-card{ position:relative; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#tab-ventas .producto-card.producto-presionado{ background: color-mix(in srgb, var(--text) 5%, transparent); transition: background .3s ease; }
#tab-ventas .producto-card.producto-arrastrado{ opacity:.35; }
.producto-ghost{
  position:fixed; z-index:400; pointer-events:none; margin:0 !important;
  background: var(--bg-panel-2) !important; border:1px solid color-mix(in srgb, var(--accent-vivido) 55%, var(--line)) !important;
  border-radius:12px !important; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity:.96;
}
.producto-ghost .producto-fila-extra{ display:none; }
body.arrastrando-producto, body.arrastrando-producto *{ cursor:grabbing !important; }
#tab-ventas .producto-card.drop-antes{ box-shadow: inset 0 3px 0 0 var(--accent-vivido); }
#tab-ventas .producto-card.drop-despues{ box-shadow: inset 0 -3px 0 0 var(--accent-vivido); }
#tab-ventas .categoria-header.drop-dentro{ background: var(--accent-soft); border-radius:10px; box-shadow: inset 0 0 0 1.5px var(--accent-vivido); }

/* ============================================================
   Formularios y editores (nuevo/editar turno, gastos, producto,
   servicio, etc.) con un estilo más actual: etiquetas normales
   (sin MAYÚSCULAS), campos más redondeados con anillo de foco,
   selects con flecha propia, servicios como tarjetas tildables,
   y en celular el editor sube como una hoja desde abajo con el
   botón principal siempre a mano.
   ============================================================ */
label{ text-transform:none !important; letter-spacing:0 !important; font-size:0.82rem; font-weight:600; color: color-mix(in srgb, var(--text) 80%, var(--text-dim)); }
label .ff-opt{ font-weight:400; color: var(--text-dim); opacity:1; }
.tf-section-title{ font-size:0.98rem !important; font-weight:700 !important; text-transform:none !important; letter-spacing:-0.1px !important; color: var(--text) !important; }
form.turno-form.tf-v2{ gap:20px; }
.tf-section + .tf-section{ border-top-style:solid; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{
  border-radius:12px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover, textarea:hover{ border-color: color-mix(in srgb, var(--text-dim) 45%, var(--line)); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus{
  outline:none; border-color: var(--accent-vivido); box-shadow: 0 0 0 3px var(--accent-soft);
}
select{
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9fa8' stroke-width='2.2' 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 12px center; background-size:16px;
}
.date-trigger{
  display:flex; align-items:center; border-radius:12px; cursor:pointer; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.date-trigger:hover{ border-color: color-mix(in srgb, var(--text-dim) 45%, var(--line)); }
.date-trigger:focus-visible{ outline:none; border-color: var(--accent-vivido); box-shadow: 0 0 0 3px var(--accent-soft); }
.tel-grupo{ border-radius:12px; }
.btn-primary{ min-height:50px; border-radius:12px; font-size:1rem; font-weight:700; letter-spacing:-0.1px; }
.btn-ghost{ border-radius:12px; }
.btn-ghost:hover{ color: var(--text); border-color: color-mix(in srgb, var(--text-dim) 50%, var(--line)); }

/* Servicios para tildar: tarjetas con check propio; la elegida se marca con el color de acento. */
.servicios-check{ gap:8px; }
.servicio-check-item{
  position:relative; gap:12px; padding:13px 14px; border-radius:14px; cursor:pointer;
  background: var(--bg-panel-2); border:1.5px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.servicio-check-item:hover{ border-color: color-mix(in srgb, var(--text-dim) 45%, var(--line)); }
.servicio-check-item:has(input:checked){ border-color: var(--accent-vivido); background: var(--accent-soft); }
.servicio-check-item input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; margin:0; width:22px; height:22px; min-height:auto; padding:0; flex-shrink:0;
  border-radius:7px; border:2px solid color-mix(in srgb, var(--text-dim) 60%, var(--line)); background: var(--bg-panel);
  display:grid; place-content:center; cursor:pointer; transition: background .15s ease, border-color .15s ease;
}
.servicio-check-item input[type="checkbox"]::after{
  content:""; width:5px; height:10px; margin-top:-2px; border: solid #201400; border-width:0 2.4px 2.4px 0;
  transform: rotate(45deg) scale(0); transition: transform .12s ease;
}
.servicio-check-item input[type="checkbox"]:checked{ background: var(--accent-vivido); border-color: var(--accent-vivido); }
.servicio-check-item input[type="checkbox"]:checked::after{ transform: rotate(45deg) scale(1); }
.servicio-check-item .nombre{ text-transform:none !important; letter-spacing:0 !important; font-weight:600; font-size:0.95rem; color: var(--text); }
.servicio-check-item .detalle{ font-size:0.9rem; color: var(--text); font-variant-numeric: tabular-nums; }
.servicio-check-item .detalle small{ text-transform:none !important; letter-spacing:0 !important; font-size:0.76rem; }
.total-row.tf-total, .tf-total{
  background:none; padding: 4px 2px 0; border-radius:0; font-size:0.9rem; color: var(--text-dim);
}
.tf-total .num{ color: var(--text); font-weight:700; font-size:1rem; font-variant-numeric: tabular-nums; }
.btn-buscar-hueco{
  border-radius:12px !important; border:1px dashed color-mix(in srgb, var(--accent-vivido) 55%, var(--line)) !important;
  background: transparent !important; color: var(--accent) !important; font-weight:600;
}

/* Editores en ventana (editar turno/producto/servicio, gastos, etc.). */
.cliente-detalle-box{ border-radius:22px; padding: 24px 22px 22px; }
.cliente-detalle-box > .panel, .cliente-detalle-box .panel{ background:none; border:0; padding:0; box-shadow:none; }
.cliente-detalle-box h2, #panelTurnoForm > h2{ font-size:1.25rem; font-weight:700; letter-spacing:-0.3px; margin: 0 40px 18px 0; color: var(--text); text-transform:none; }
.cliente-detalle-cerrar{ background: transparent; border-color: transparent; cursor:pointer; }
.cliente-detalle-cerrar:hover{ background: var(--bg-panel-2); color: var(--text); }
/* El botón de guardar queda pegado abajo mientras se scrollea un formulario largo. */
.cliente-detalle-box form .btn-primary[type="submit"]{
  position:sticky; bottom:0; z-index:2; box-shadow: 0 -14px 18px -6px var(--bg-panel);
}
@media (max-width: 600px){
  .cliente-detalle-overlay{ align-items:flex-end; padding:0; }
  .cliente-detalle-box, .cliente-detalle-box-ancho{
    max-width:none; width:100%; max-height:92vh; border-radius:22px 22px 0 0; border-bottom:0;
    padding: 28px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(24px); opacity:1;
  }
  .cliente-detalle-overlay.show .cliente-detalle-box{ transform: translateY(0); }
  .cliente-detalle-box::before{
    content:""; position:absolute; top:9px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px;
    background: color-mix(in srgb, var(--text-dim) 45%, transparent);
  }
  .modal-box{ border-radius:22px 22px 0 0; }
}

/* Servicios y precios: una sola lista prolija (antes dos columnas de tarjetas). */
.servicios-list, #serviciosList{ display:flex !important; flex-direction:column; max-width:760px; }
#serviciosList .servicio-item{ display:flex; align-items:center; gap:12px; padding: 12px 12px 12px 14px; transition: background .12s ease; }
#serviciosList .servicio-item:hover{ background: color-mix(in srgb, var(--bg-panel-2) 60%, transparent); }
.servicio-avatar{
  flex:0 0 38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.95rem; color: var(--serv-color, var(--accent));
  background: color-mix(in srgb, var(--serv-color, var(--accent)) 16%, var(--bg-panel-2));
}
#serviciosList .servicio-nombre{ font-weight:600; font-size:0.95rem; }
#serviciosList .servicio-meta{ display:flex; gap:6px; align-items:center; margin-top:4px; }
.servicio-chip{ font-size:0.74rem; color: var(--text-dim); background: var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding: 1px 8px; }
#serviciosList .servicio-badge-online{ font-size:0.74rem; font-weight:600; color: var(--accent); background: var(--accent-soft); border-radius:999px; padding: 1px 8px; }
.servicio-precio{ font-weight:700; font-size:0.98rem; font-variant-numeric: tabular-nums; margin-right:4px; white-space:nowrap; }
#serviciosList .servicio-icon-btn{ background:transparent; border-color:transparent; color: var(--text-dim); cursor:pointer; }
#serviciosList .servicio-icon-btn:hover{ background: var(--bg-panel-2); color: var(--text); }
#serviciosList .servicio-icon-btn.borrar:hover{ background: var(--warn-soft); color: var(--warn); }

/* ============================================================
   Nueva venta estilo punto de venta: grilla de productos a la
   izquierda, ticket a la derecha (en celular, una columna con
   el botón de cobrar fijo abajo).
   ============================================================ */
.nueva-venta-page{ max-width: 1180px; }
.nv-layout{ display:flex; flex-direction:column; gap:18px; }
.nv-catalogo{ min-width:0; }
.nv-productos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap:10px; }
.nv-producto{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:10px; min-height:auto; border-radius:14px; cursor:pointer;
  background: var(--bg-panel); border:1px solid var(--line); color: var(--text); font-weight:500;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.nv-producto:hover{ border-color: color-mix(in srgb, var(--text-dim) 50%, var(--line)); }
.nv-producto:active{ transform: scale(0.97); }
.nv-producto.en-ticket{ border-color: var(--accent-vivido); background: color-mix(in srgb, var(--accent-vivido) 7%, var(--bg-panel)); }
.nv-producto.sin-stock{ opacity:.45; cursor:default; }
.nv-producto.nv-pulso{ animation: nvPulso .3s ease; }
@keyframes nvPulso{ 50%{ transform: scale(1.04); } }
.nv-producto-foto{
  position:relative; width:100%; aspect-ratio: 4 / 3; margin-bottom:8px; border-radius:10px; overflow:visible;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;
  color: var(--tile-color, var(--accent)); background: color-mix(in srgb, var(--tile-color, var(--accent)) 15%, var(--bg-panel-2));
}
.nv-producto-foto img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.nv-producto-badge{
  position:absolute; top:-6px; right:-6px; min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800;
  background: var(--accent-vivido); color:#201400; border:2px solid var(--bg-panel);
}
.nv-producto-nombre{ font-weight:600; font-size:0.88rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nv-producto-precio{ font-weight:700; font-size:0.92rem; font-variant-numeric: tabular-nums; margin-top:2px; }
.nv-producto-stock{ font-size:0.74rem; color: var(--text-dim); }
.nv-productos-vacio{ grid-column: 1 / -1; padding: 22px; text-align:center; color: var(--text-dim); border:1px dashed var(--line); border-radius:14px; font-size:0.9rem; }

.nv-ticket{
  display:flex; flex-direction:column; background: var(--bg-panel); border:1px solid var(--line); border-radius:18px; padding:16px;
}
.nv-ticket-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; font-weight:700; font-size:1.05rem; }
.nv-ticket-count{ font-size:0.8rem; font-weight:500; color: var(--text-dim); }
.nueva-venta-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding: 22px 10px !important; text-align:center;
  color: var(--text-dim); font-size:0.88rem; border:1px dashed var(--line); border-radius:12px; background:none !important;
}
.nueva-venta-empty svg{ width:26px; height:26px; fill:none; stroke: currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.nueva-venta-items{ gap:0 !important; margin-bottom:14px; }
.nueva-venta-item{
  display:flex; align-items:center; gap:10px; padding: 10px 2px !important; border:0 !important; border-radius:0 !important;
  background:none !important; border-top:1px solid var(--line) !important; cursor:pointer;
}
.nueva-venta-item:first-child{ border-top:0 !important; }
.nueva-venta-item-nombre{ font-weight:600 !important; font-size:0.9rem !important; }
.nueva-venta-item-detalle{ font-size:0.76rem !important; }
.nueva-venta-item-subtotal{ font-weight:700 !important; font-size:0.92rem !important; min-width:72px; text-align:right; font-variant-numeric: tabular-nums; }
.nv-stepper{ display:flex; align-items:center; flex-shrink:0; background: var(--bg-panel-2); border:1px solid var(--line); border-radius:999px; padding:2px; }
.nv-stepper-btn, .nv-stepper-num{
  min-height:auto; padding:0; border:0; background:none; color: var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nv-stepper-btn{ width:28px; height:28px; border-radius:50%; font-size:1.05rem; font-weight:600; }
.nv-stepper-btn:hover{ background: color-mix(in srgb, var(--text) 9%, transparent); }
.nv-stepper-btn:active{ transform:none; }
.nv-stepper-btn svg{ width:14px; height:14px; fill:none; stroke: var(--warn); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nv-stepper-num{ min-width:26px; height:28px; font-weight:700; font-size:0.9rem; font-variant-numeric: tabular-nums; }
.nueva-venta-cliente-field{ margin-bottom:14px; }
.nueva-venta-resumen{ background:none !important; border:0 !important; padding: 10px 2px 4px !important; border-top:1px dashed var(--line) !important; border-radius:0 !important; margin-bottom:12px; }
.nueva-venta-resumen-row.nueva-venta-total{ border-top:0 !important; padding-top:6px !important; font-size:1.25rem !important; }
.nueva-venta-resumen-row.nueva-venta-total span:last-child{ font-variant-numeric: tabular-nums; }
/* Forma de pago: un solo control de tres opciones (Efectivo · Transferencia · Fiado). */
.nueva-venta-metodo-pago, .nueva-venta-fiado-pago{ display:contents; }
.nv-ticket .nueva-venta-metodo-pago + .nueva-venta-fiado-pago{ display:contents; }
.nv-pagos{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:6px; }
.nueva-venta-metodo-btn, .nueva-venta-fiado-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:62px; padding:8px 4px; border-radius:12px; cursor:pointer;
  background: var(--bg-panel-2) !important; border:1.5px solid var(--line) !important; border-style:solid !important;
  color: var(--text-dim) !important; font-size:0.8rem; font-weight:600;
}
.nueva-venta-metodo-btn svg, .nueva-venta-fiado-btn svg{ width:19px; height:19px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nueva-venta-metodo-btn:active, .nueva-venta-fiado-btn:active{ transform:none; }
.nueva-venta-metodo-btn.active{ border-color: var(--accent-vivido) !important; background: var(--accent-soft) !important; color: var(--accent) !important; }
.nueva-venta-fiado-btn.active{ border-color: var(--fiado) !important; background: var(--fiado-soft) !important; color: var(--fiado) !important; }
.nueva-venta-cobrar-btn{ margin-top:12px !important; min-height:54px; font-size:1.05rem; }

@media (min-width: 900px){
  .nv-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 380px; align-items:start; gap:22px; }
  .nv-ticket{ position:sticky; top:12px; max-height: calc(100vh - 110px); overflow-y:auto; }
}
@media (max-width: 899.98px){
  .nv-productos{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .nueva-venta-cobrar-btn{
    position:sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index:3;
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 -16px 20px -8px var(--bg-panel);
  }
}
.nv-barra-movil{ display:none; }
@media (max-width: 899.98px){
  .nv-productos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
  .nv-producto{ padding:8px; border-radius:12px; }
  .nv-producto-foto{ aspect-ratio: 1 / 1; margin-bottom:6px; font-size:1rem; }
  .nv-producto-nombre{ font-size:0.8rem; }
  .nv-producto-precio{ font-size:0.84rem; }
  .nv-producto-stock{ font-size:0.7rem; }
  .nv-barra-movil{
    position:sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index:4; order:2;
    display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding: 0 16px; border-radius:14px; cursor:pointer;
    background: var(--accent-vivido); color:#201400; border:0; font: inherit; font-weight:700; box-shadow: 0 10px 26px rgba(0,0,0,.4);
  }
  .nv-barra-movil.oculto{ display:none !important; }
  .nv-barra-movil-cant{ font-size:0.86rem; font-weight:600; opacity:.85; }
  .nv-barra-movil-total{ font-size:1.05rem; }
  .nv-barra-movil-ir{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:0.9rem; }
  .nv-barra-movil-ir svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .nv-catalogo{ order:1; }
  .nv-ticket{ order:3; }
}

/* ============================================================
   Formulario de producto (y los de servicio/gasto que comparten
   .producto-form-v2): título arriba, foto en un recuadro que se
   toca, opciones sí/no como interruptor en tarjeta y el botón de
   guardar grande y siempre a mano.
   ============================================================ */
.producto-form-v2{ display:flex; flex-direction:column; gap:16px; }
.producto-form-v2 .ff-field{ margin:0; }
.pf-titulo{ font-size:1.25rem !important; font-weight:700; letter-spacing:-0.3px; margin: 0 40px 2px 0 !important; color: var(--text); }
.pf-titulo-editar{ display:none; }
.add-servicio-form.form-editando .pf-titulo-nuevo{ display:none; }
.add-servicio-form.form-editando .pf-titulo-editar{ display:inline; }
#productoFormBox .form-editando-badge{ display:none !important; }

/* Foto: recuadro punteado clickeable + textos al lado. */
.producto-foto-picker{
  display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px;
  background: var(--bg-panel-2); border:1px solid var(--line);
}
.producto-foto-picker-preview{
  width:72px !important; height:72px !important; border-radius:14px !important; cursor:pointer;
  border:1.5px dashed color-mix(in srgb, var(--text-dim) 50%, var(--line)); background: var(--bg-panel) !important;
  transition: border-color .15s ease;
}
.producto-foto-picker-preview:hover{ border-color: var(--accent-vivido); }
.producto-foto-picker-preview:has(img){ border-style:solid; border-color: var(--line); }
.producto-foto-picker-botones{ flex-direction:row !important; flex-wrap:wrap; align-items:center !important; gap:6px 8px !important; }
.pf-foto-titulo{ width:100%; font-size:0.86rem; font-weight:600; color: var(--text); }
.producto-foto-picker-botones .btn-small{ min-height:34px; height:34px; padding:0 12px; font-size:0.82rem; border-radius:999px; margin:0; }

/* Opciones sí/no ("Visible en catálogo online", "Ya pagaste este stock", "Reservable online"): tarjeta con interruptor. */
.servicio-reservable-check{
  display:flex; align-items:center !important; gap:12px !important; margin:0 !important; padding: 12px 14px;
  border-radius:14px; background: var(--bg-panel-2); border:1px solid var(--line); cursor:pointer;
  font-size:0.9rem !important; font-weight:600; color: var(--text) !important; line-height:1.35;
}
.servicio-reservable-check > span{ flex:1; min-width:0; order:1; }
.servicio-reservable-check small{ display:block; margin-top:2px; font-size:0.78rem; font-weight:400; color: var(--text-dim); }
.servicio-reservable-check input[type="checkbox"]{
  order:2; appearance:none; -webkit-appearance:none; flex-shrink:0; margin:0 !important; cursor:pointer;
  width:44px !important; height:26px !important; min-height:auto; padding:0; border-radius:999px; position:relative;
  background: color-mix(in srgb, var(--text-dim) 35%, var(--bg-panel)); border:0; transition: background .18s ease;
}
.servicio-reservable-check input[type="checkbox"]::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease;
}
.servicio-reservable-check input[type="checkbox"]:checked{ background: var(--accent-vivido); }
.servicio-reservable-check input[type="checkbox"]:checked::after{ transform: translateX(18px); }
.servicio-reservable-check:has(input:checked){ border-color: color-mix(in srgb, var(--accent-vivido) 45%, var(--line)); }
#fProductoStockInicialPagadoWrap{ margin-top:8px !important; }

/* Descuento: control segmentado. */
.producto-descuento-tipo{ background: var(--bg-panel-2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:3px !important; }
.producto-descuento-tipo-btn{ border:0 !important; border-radius:9px !important; background:transparent !important; color: var(--text-dim) !important; min-height:38px; font-weight:600; }
.producto-descuento-tipo-btn.active{ background: var(--bg-panel) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.producto-descuento-tipo + .ff-input-wrap{ margin-top:8px; }

/* Guardar: botón principal a todo el ancho, pegado abajo mientras se scrollea. */
#btnAddProducto, #btnAddServicio{
  flex:1; min-height:50px !important; height:auto; border-radius:12px !important; border:0 !important;
  background: var(--accent-vivido) !important; color:#201400 !important; font-size:1rem !important; font-weight:700 !important;
}
#btnCancelarEdicionProducto{ min-height:50px; border-radius:12px; padding: 0 18px; }
#productoFormBox > div:last-child, #servicioFormBox > .pf-acciones{
  position:sticky; bottom:-22px; z-index:2; margin: 4px -22px -22px; padding: 12px 22px 22px;
  background: linear-gradient(to bottom, transparent, var(--bg-panel) 14px);
}
@media (max-width: 600px){
  #productoFormBox > div:last-child, #servicioFormBox > .pf-acciones{
    margin: 4px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
    bottom: calc(-18px - env(safe-area-inset-bottom));
  }
}
.pf-acciones{ display:flex; gap:8px; }
.ff-input-wrap .ff-icon-text{ top:50% !important; transform: translateY(-50%); line-height:1; }

/* =========================================================================
   Rediseño v4 — Clientes: fila de números arriba + lista agrupada (celu) /
   tabla con columnas (compu). Reemplaza la tarjeta resumen y el panel lateral.
   ========================================================================= */
.cl-kpis{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px;
  margin-bottom:14px; overflow:hidden;
}
.cl-kpi{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; min-width:0; }
.cl-kpi + .cl-kpi{ border-left:1px solid var(--line); }
.cl-kpi-label{ font-size:0.75rem; font-weight:600; color: var(--text-dim); }
.cl-kpi-valor{ font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.cl-kpi-sub, .cl-kpi .cl-kpi-delta{ font-size:0.72rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-kpi .cl-kpi-delta{ background:none; padding:0; border:0; margin:0; }
.cl-kpi .cl-kpi-delta.up{ color: var(--ok); }
.cl-kpi .cl-kpi-delta.down{ color: var(--danger); }
.cl-kpi .cl-kpi-delta:empty::before{ content:'en total'; color: var(--text-dim); }

/* Lista: un solo bloque con divisores, no tarjetas sueltas. */
#clientesList.cl-lista{
  gap:0; background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; flex:none;
}
#clientesList.cl-lista > .empty-msg{ padding:28px 18px; text-align:center; color: var(--text-dim); }
.cl-cab{ display:none; }
#clientesList .cl-fila{
  display:grid; grid-template-columns: minmax(0,1fr) auto auto; align-items:center; gap:10px;
  background:transparent; border:0; border-radius:0; padding:12px 14px; cursor:pointer;
  transition: background .12s ease;
}
#clientesList .cl-fila + .cl-fila{ border-top:1px solid var(--line); }
#clientesList .cl-fila:hover{ background: var(--bg-panel-2); }
#clientesList .cl-fila:active{ background: var(--bg-panel-2); }
#clientesList .cl-fila .cliente-top:active{ opacity:1; }
#clientesList .cliente-avatar{
  width:40px; height:40px; font-size:0.85rem; font-weight:700;
  background: color-mix(in srgb, var(--tile-color, var(--accent-vivido)) 16%, var(--bg-panel-2));
  color: color-mix(in srgb, var(--tile-color, var(--accent)) 80%, var(--text));
}
#clientesList .cliente-nombre{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.94rem; }
#clientesList .cliente-meta{ font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-tag{
  flex-shrink:0; font-size:0.68rem; font-weight:600; line-height:1; padding:4px 7px; border-radius:999px;
  background: var(--bg-panel-2); color: var(--text-dim); border:1px solid var(--line);
}
.cl-tag-frecuente{ color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.cl-tag-nuevo{ color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: transparent; }
.cl-num{ display:none; }
.cl-fecha{ font-size:0.76rem; color: var(--text-dim); white-space:nowrap; text-align:right; }
.cl-acciones{ display:flex; gap:6px; justify-content:flex-end; }
.cl-acciones:empty{ display:none; }
#clientesList .cliente-icon-btn{ width:34px; height:34px; border-radius:10px; background:transparent; }
#clientesList .cliente-icon-btn.ig{ display:none; }

@media (min-width: 860px){
  .cl-kpis{ grid-template-columns: repeat(3, minmax(0, 220px)); }
  .cl-kpi{ padding:14px 18px; }
  .cl-kpi-valor{ font-size:1.55rem; }
  .cl-cab, #clientesList .cl-fila{
    grid-template-columns: minmax(220px,1.8fr) 80px 80px 120px 120px 84px;
    gap:16px; padding-left:18px; padding-right:18px;
  }
  .cl-cab{
    display:grid; align-items:center; padding-top:10px; padding-bottom:10px;
    font-size:0.74rem; font-weight:600; color: var(--text-dim);
    background: var(--bg-panel-2); border-bottom:1px solid var(--line);
  }
  .cl-cab span:nth-child(n+2):nth-child(-n+4){ text-align:right; }
  .cl-cab span:nth-child(5){ text-align:right; }
  .cl-num{ display:block; text-align:right; font-variant-numeric: tabular-nums; font-size:0.88rem; color: var(--text); }
  .cl-monto{ font-weight:600; }
  #clientesList .cliente-meta{ display:none; }
  #clientesList .cl-fila .cliente-top{ gap:12px; }
  #clientesList .cliente-avatar{ width:34px; height:34px; font-size:0.78rem; }
  .cl-fecha{ font-size:0.84rem; }
  #clientesList .cliente-icon-btn.ig{ display:flex; }
  #clientesList .cl-acciones:empty{ display:flex; }
}

/* =========================================================================
   Rediseño v4 — Barra lateral (compu). Una sola lista pareja (sin ítems más
   grandes ni dorado relleno), perfil del negocio arriba como encabezado,
   utilidades (Configuración/Respaldo/Ayuda) y link de reservas al pie.
   ========================================================================= */
@media (min-width: 860px){
  nav.tabs{ padding: 14px 10px 14px; gap: 2px; background: var(--bg-panel); }

  /* Perfil arriba: encabezado del negocio. */
  nav.tabs .sidebar-perfil-footer{
    order:-1; margin: 0 0 14px; padding: 8px; border: 0; border-radius: 10px; gap: 10px;
  }
  nav.tabs .sidebar-perfil-footer:hover{ background: var(--bg-panel-2); }
  nav.tabs .sidebar-perfil-avatar{ width:32px; height:32px; border-radius:9px; font-size:0.74rem; font-weight:700; }
  nav.tabs .sidebar-perfil-nombre{ flex:1; font-size:0.9rem; font-weight:600; }
  nav.tabs .sidebar-perfil-chevron{
    display:block; width:16px; height:16px; flex-shrink:0;
    stroke: var(--text-dim); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }

  /* Todos los ítems iguales: mismo alto, tamaño de letra y color. */
  nav.tabs .tab-btn,
  nav.tabs[class] .tab-btn[data-tab="inicio"],
  nav.tabs[class] .tab-btn[data-tab="historial"],
  nav.tabs[class] .tab-btn[data-tab="ventas"],
  .sidebar-mas-lista .mas-lista .mas-lista-item{
    min-height: 38px; height: 38px; padding: 0 10px; gap: 11px; border-radius: 9px;
    font-size: 0.88rem; font-weight: 500; color: var(--text-dim);
    border: 0; opacity: 1;
  }
  .sidebar-mas-lista .mas-lista .mas-lista-item{ background: transparent; }
  nav.tabs .tab-btn svg,
  nav.tabs[class] .tab-btn[data-tab] svg,
  .sidebar-mas-lista .mas-lista-icon svg{ width:18px; height:18px; stroke-width:1.8; }
  .sidebar-mas-lista .mas-lista .mas-lista-icon{ width:18px; height:18px; color: inherit; }
  .sidebar-mas-lista .mas-lista .mas-lista-titulo{ font-size: inherit; font-weight: inherit; color: inherit; }
  nav.tabs .tab-btn:hover,
  .sidebar-mas-lista .mas-lista .mas-lista-item:hover{ background: var(--bg-panel-2); color: var(--text); }

  /* Activo: fondo neutro, texto fuerte e ícono en acento (nada de relleno dorado). */
  nav.tabs .tab-btn.active,
  nav.tabs[class] .tab-btn.active[data-tab],
  body:has(#tab-stats.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masEstadisticasBtn,
  body:has(#tab-servicios.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masServiciosBtn,
  body:has(#modalClientesOverlay.show) #clientesBtn,
  body:has(#masConfiguracionOverlay.show) #masConfiguracionBtn,
  body:has(#masRespaldoOverlay.show) #masRespaldoBtn,
  body:has(#masAyudaSoporteOverlay.show) #masAyudaSoporteBtn{
    background: var(--bg-panel-2); color: var(--text); font-weight: 600;
  }
  nav.tabs .tab-btn.active svg,
  body:has(#tab-stats.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masEstadisticasBtn svg,
  body:has(#tab-servicios.active):not(:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show)) #masServiciosBtn svg,
  body:has(#modalClientesOverlay.show) #clientesBtn svg,
  body:has(#masConfiguracionOverlay.show) #masConfiguracionBtn svg,
  body:has(#masRespaldoOverlay.show) #masRespaldoBtn svg,
  body:has(#masAyudaSoporteOverlay.show) #masAyudaSoporteBtn svg{ stroke: var(--accent); }
  /* Con una pantalla de la lista de abajo abierta encima, la pestaña de fondo deja de verse activa. */
  body:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show) nav.tabs .tab-btn.active{
    background: transparent; color: var(--text-dim); font-weight: 500;
  }
  body:has(#modalClientesOverlay.show, #masConfiguracionOverlay.show, #masRespaldoOverlay.show, #masAyudaSoporteOverlay.show) nav.tabs .tab-btn.active svg{ stroke: currentColor; }

  /* Lista de abajo: sin línea divisoria; Configuración/Respaldo/Ayuda bajan al pie. */
  .sidebar-mas-lista{ flex:1; margin-top: 0; padding-top: 0; border-top: 0; gap: 2px; }
  .sidebar-mas-lista .mas-lista{ flex:1; gap: 2px; }
  .sidebar-mas-lista #masConfiguracionBtn{ margin-top: auto; }
  .sidebar-mas-lista .mas-lista-item-proximamente{ cursor: default; color: var(--text-dim); }
  .sidebar-mas-lista .mas-lista-item-proximamente:hover{ background: transparent; color: var(--text-dim); }
  .sidebar-mas-lista .mas-lista-item-proximamente .mas-lista-icon,
  .sidebar-mas-lista .mas-lista-item-proximamente .mas-lista-titulo{ opacity: .55; }
  .sidebar-mas-lista .mas-lista .mas-lista-badge{
    margin-left:auto; text-transform:none; letter-spacing:0; font-size:0.68rem; font-weight:500;
    padding: 3px 7px; border-radius: 6px; background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--line);
  }

  /* Link de reservas: bloque compacto al pie. */
  nav.tabs .sidebar-link-reservas{ margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  nav.tabs .sidebar-link-reservas-label{ font-size:0.74rem !important; font-weight:500 !important; color: var(--text-dim); margin: 0 2px 6px; }
  nav.tabs .sidebar-link-reservas-wrap{ border-radius: 9px; background: var(--bg); }
  nav.tabs .sidebar-link-reservas-texto{ font-weight: 500; font-size: 0.78rem; color: var(--text-dim); padding: 9px 10px; }
  nav.tabs .sidebar-link-reservas-texto:hover{ color: var(--text); background: var(--bg-panel-2); }
  nav.tabs .sidebar-link-reservas-abrir{ width: 36px; }
}
@media (min-width: 860px){
  .sidebar-mas-lista .mas-lista .mas-lista-titulo{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
}

/* =========================================================================
   Rediseño v4 — Ventas: encabezado con acciones, fila de números arriba,
   filtros como chips neutros y una sola lista con categorías como separadores.
   ========================================================================= */
#tab-ventas .vt-titulo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
#tab-ventas .vt-acciones{ gap:8px; }
#tab-ventas .vt-btn-sec{
  display:inline-flex; align-items:center; gap:7px; height:38px; min-height:38px; padding:0 12px;
  background: var(--bg-panel); color: var(--text); border:1px solid var(--line); border-radius:10px;
  font: inherit; font-size:0.86rem; font-weight:600; letter-spacing:0; text-transform:none; box-shadow:none; cursor:pointer;
}
#tab-ventas .vt-btn-sec:hover{ background: var(--bg-panel-2); }
#tab-ventas .vt-btn-sec svg{ width:16px; height:16px; stroke: var(--text-dim); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#tab-ventas .vt-btn-nuevo{ width:38px; height:38px; border-radius:10px; gap:7px; }
#tab-ventas .vt-btn-nuevo span{ display:none; }
@media (min-width: 600px){
  #tab-ventas .vt-btn-nuevo{ width:auto; padding: 0 14px 0 11px; font: inherit; font-size:0.86rem; font-weight:700; }
  #tab-ventas .vt-btn-nuevo span{ display:inline; }
  #tab-ventas .vt-btn-nuevo svg{ width:17px; height:17px; }
}
@media (max-width: 599.98px){
  #tab-ventas .vt-btn-sec span{ display:none; }
  #tab-ventas .vt-btn-sec{ width:38px; padding:0; justify-content:center; }
}

/* Fila de números. */
.vt-kpis{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:16px;
}
@media (min-width: 860px){ .vt-kpis{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; } }
#tab-ventas .vt-kpi{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0;
  box-shadow:none; min-width:0; width:100%;
}
#tab-ventas .vt-kpi-label{ display:flex; align-items:center; gap:6px; width:100%; font-size:0.78rem; font-weight:600; color: var(--text-dim); }
#tab-ventas .vt-kpi-valor{
  font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; color: var(--text);
  background:none; padding:0; border-radius:0; min-width:0; text-align:left; line-height:1.2;
}
#tab-ventas .vt-kpi-sub{ font-size:0.74rem; color: var(--text-dim); }
#tab-ventas .vt-kpi-sub .fiados-pendientes-count{ all: unset; }
@media (min-width: 860px){ #tab-ventas .vt-kpi-valor{ font-size:1.7rem; } }

/* Fiado / Reservas online: la tarjeta entera es el número; al abrirse ocupa toda la fila con su lista. */
#tab-ventas .vt-kpi-plegable{
  background: var(--bg-panel); border:1px solid var(--line) !important; border-radius:14px; margin:0; box-shadow:none; overflow:hidden;
}
#tab-ventas .vt-kpi-plegable > .vt-kpi{ border:0; border-radius:0; background:transparent; cursor:pointer; }
#tab-ventas .vt-kpi-plegable > .vt-kpi:hover{ background: var(--bg-panel-2); }
#tab-ventas .vt-kpi-plegable .fiados-pendientes-titulo{ flex:0 1 auto; font-size:inherit; font-weight:inherit; color:inherit; }
#tab-ventas .vt-kpi-plegable .fiados-pendientes-chevron{ margin-left:auto; color: var(--text-dim); }
#tab-ventas #fiadosPendientesCard .vt-kpi-valor{ color: var(--fiado); }
#tab-ventas .vt-kpi-plegable:not(.colapsado){ grid-column: 1 / -1; order: 5; }
#tab-ventas .vt-kpi-plegable:not(.colapsado) > .vt-kpi{ border-bottom:1px solid var(--line); }
#tab-ventas .vt-kpi-plegable #fiadosPendientesList,
#tab-ventas .vt-kpi-plegable #pedidosOnlineList{ padding: 10px 14px 14px; }

/* Buscador + filtro. */
#tab-ventas .ventas-buscar-filtro-row{ margin-bottom:12px; }

/* Estado de stock: chips neutros; el activo invertido (sin dorado). */
#tab-ventas #ventasEstadoTabs{ gap:6px; border-bottom:0; margin: 0 0 14px; padding: 1px 0; }
#tab-ventas #ventasEstadoTabs .filtro-chip{
  height:34px; padding: 0 12px; margin:0; gap:7px; border:1px solid var(--line); border-radius:999px;
  background: var(--bg-panel); color: var(--text-dim); font-size:0.82rem; font-weight:600;
}
#tab-ventas #ventasEstadoTabs .filtro-chip:hover{ color: var(--text); background: var(--bg-panel-2); }
#tab-ventas #ventasEstadoTabs .filtro-chip.active{ background: var(--text); border-color: var(--text); color: var(--bg); }
#tab-ventas .ventas-tab-count{ border:0; background:transparent; padding:0; color: inherit; opacity:.65; font-size:0.78rem; }
#tab-ventas #ventasEstadoTabs .filtro-chip.active .ventas-tab-count{ background:transparent; border:0; color: inherit; opacity:.7; }

/* Lista: un solo bloque; las categorías son separadores dentro, no cajas sueltas. */
#tab-ventas #ventasList{
  background: var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
#tab-ventas #ventasList > .empty-msg{ padding:28px 18px; text-align:center; }
#tab-ventas #ventasList .categoria-grupo{ margin:0; }
#tab-ventas #ventasList .categoria-header{ background: color-mix(in srgb, var(--bg-panel-2) 60%, var(--bg-panel)) !important;
  width:100%; padding: 9px 14px; margin:0; gap:8px; border-radius:0;
  background: var(--bg-panel-2); border-top:1px solid var(--line);
}
#tab-ventas #ventasList > .categoria-grupo:first-of-type > .categoria-header{ border-top:0; }
#tab-ventas #ventasList .ventas-tabla-head + .categoria-grupo > .categoria-header{ border-top:0; }
#tab-ventas #ventasList .categoria-nombre{ font-size:0.8rem; font-weight:600; color: var(--text); }
#tab-ventas #ventasList .categoria-count{ margin-left:auto; font-size:0.76rem; font-weight:500; }
#tab-ventas #ventasList .categoria-items,
#tab-ventas #ventasList .categoria-items .categoria-subgrupos .categoria-items{ background:none; border:0; border-radius:0; }
#tab-ventas #ventasList .categoria-items .categoria-subgrupos{ border-top:0; }
#tab-ventas #ventasList .categoria-subgrupos .categoria-header{ padding: 8px 14px 8px 30px; background: color-mix(in srgb, var(--bg-panel-2) 45%, var(--bg-panel)); }
#tab-ventas #ventasList .categoria-subgrupos .categoria-nombre{ color: var(--text-dim); }
#tab-ventas #ventasList .categoria-items > .producto-card,
#tab-ventas #ventasList .categoria-items .categoria-subgrupos .categoria-items > .producto-card:first-child{ border-top:1px solid var(--line); }
#tab-ventas #ventasList .categoria-items > .producto-card:hover{ background: color-mix(in srgb, var(--bg-panel-2) 50%, transparent); }

/* Fila de producto. */
#tab-ventas .producto-fila-top{ padding: 11px 6px 11px 14px; gap:12px; }
#tab-ventas .producto-fila-icono{ width:38px !important; height:38px !important; border-radius:10px !important; font-size:0.78rem; }
#tab-ventas .producto-fila-nombre{ font-size:0.92rem; font-weight:600; }
#tab-ventas .producto-tag-online{
  font-size:0.68rem; font-weight:600; color: var(--text-dim); background: transparent;
  border:1px solid var(--line); padding: 1px 6px; border-radius:6px;
}
#tab-ventas .producto-fila-kebab{ width:32px; height:32px; margin-right:6px; }
#tab-ventas .producto-fila-extra{ padding: 0 14px 10px 64px; }
#tab-ventas .reserva-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#tab-ventas .reserva-item .kebab-btn{ background:transparent; border:0; width:28px; height:28px; min-height:auto; color: var(--text-dim); }

/* Estado: punto de color + texto, sin píldora rellena. */
/* Colores por estado: variables --stock-* (ver bloque 6.0 en v5.css). */
#tab-ventas .estado-pill{ background:transparent; padding:0; gap:7px; font-size:0.8rem; font-weight:500; color: var(--stock-ok); }
#tab-ventas .estado-pill i{ width:7px; height:7px; background: var(--stock-ok); }
#tab-ventas .estado-pill-bajo{ color: var(--stock-bajo); }
#tab-ventas .estado-pill-bajo i{ background: var(--stock-bajo-punto); }
#tab-ventas .estado-pill-sin{ color: var(--stock-sin); }
#tab-ventas .estado-pill-sin i{ background: var(--stock-sin); }

@container ventaslista (min-width: 620px){
  #tab-ventas .ventas-tabla-head{
    grid-template-columns: 38px minmax(0,1fr) 100px 100px 64px 110px 38px; gap:12px;
    padding: 10px 0 10px 14px; text-transform:none; letter-spacing:0; font-size:0.76rem; font-weight:600;
    background: var(--bg-panel); border-bottom:1px solid var(--line);
  }
  #tab-ventas .ventas-tabla-head span:first-child{ grid-column: 1 / 3; }
  #tab-ventas .producto-fila-tabla .producto-fila-top{
    grid-template-columns: 38px minmax(0,1fr) 100px 100px 64px 110px; padding: 11px 0 11px 14px;
  }
  #tab-ventas .producto-fila-tabla .pcol-stock{ font-weight:500; }
  #tab-ventas .producto-fila-tabla .pcol-ganancia{ color: var(--text); }
  #tab-ventas .producto-fila-tabla .pcol-ganancia small{ color: var(--ok); }
}
@container ventaslista (min-width: 500px) and (max-width: 619.98px){
  #tab-ventas .ventas-tabla-head{
    grid-template-columns: 38px minmax(0,1fr) 100px 64px 110px 38px; gap:12px;
    padding: 10px 0 10px 14px; text-transform:none; letter-spacing:0; font-size:0.76rem;
    background: var(--bg-panel); border-bottom:1px solid var(--line);
  }
  #tab-ventas .ventas-tabla-head span:first-child{ grid-column: 1 / 3; }
  #tab-ventas .producto-fila-tabla .producto-fila-top{ grid-template-columns: 38px minmax(0,1fr) 100px 64px 110px; padding: 11px 0 11px 14px; }
}
#tab-ventas .vt-kpi .vt-kpi-sub{ font-weight:500; }