/* ============================================================================
   HangerFlow — una sola hoja de estilos para toda la app (sin preprocesador,
   sin build step). No está dividida en secciones formales; el orden
   aproximado en que aparecen los bloques grandes es: variables de raíz →
   reset básico → landing page pública → overlay de login/registro →
   sidebar + topbar de la app autenticada → controles compartidos
   (.row-menu/.controls-cta-group, Fase 48) → .client-row (la fila de lista
   que reutilizan casi todos los módulos) → constructor de facturas
   (.invoice-builder) → vistas públicas (.public-card, Fase 11+) →
   etiqueta de envío para imprimir (.pkg-label) → reportes imprimibles
   (.print-report-*) → Finanzas/Dashboard → panel de Superadmin (.admin-*,
   completamente aparte visualmente del resto).

   Nota sobre los colores: --burgundy y --brass son literalmente el mismo
   valor — un leftover histórico de nombres que en su momento iban a ser
   distintos y nunca se diferenciaron. Para lograr contraste real (ej.
   degradados) hay que apoyarse en --burgundy-dark o --paper-dark.

   Rebrand "Inventario Vivo" (2026-09-14, sin commitear, empezando por el
   Dashboard): reemplaza el rebrand "Pizarra y coral" (2026-09-13, nunca
   desplegado) por una paleta navy+ámbar sobre crema, explorada primero en
   un Artifact de mockup con las 11 pantallas de la app. Los NOMBRES de
   variable se mantienen tal cual otra vez (mismo criterio que la vez
   anterior) — hoy --burgundy/--brass valen naranja, no borgoña. Aparte,
   --green DEJA de valer lo mismo que --burgundy/--brass: antes los tres
   eran el mismo valor por accidente histórico (ver arriba), lo que hacía
   que cualquier badge "pagado/entregado/fresco" se pintara del color de
   marca en vez de un verde real — se separa aquí en un verde genuino,
   efecto visible en todas las pestañas (Facturas, Envíos, etc.), no solo
   Dashboard. --coral es un tono aparte pensado como acento puntual (una
   sola cifra que pide atención por pantalla, hoy el "Por cobrar" del
   Dashboard) — Fase 102 hizo que --burgundy/--brass (el acento que SÍ se
   repite en botones/badges/bordes en toda la app) valga el mismo naranja
   que --coral, a pedido del usuario ("cambia el amarillo por un naranja
   como el del mockup" — el ámbar #B5762A leía como amarillo/mostaza en
   pantalla). Los dos siguen siendo variables separadas por si hiciera
   falta diferenciarlos más adelante, pero hoy son el mismo valor.
   ============================================================================ */
:root{
    --paper:#EDEAE2;
    --paper-dark:#DED6C5;
    --ink:#16233B;
    --ink-soft:#42506B;
    --burgundy:#D9603C;
    --burgundy-dark:#0F1B2E;
    --brass:#D9603C;
    --brass-light:#5B6C87;
    --green:#4B7A5A;
    --red:#B23A3A;
    --card:#FFFFFF;
    --coral:#D9603C;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    min-height:100vh;
  }
  /* Fase 92 — el wordmark "HangerFlow" (login, sidebar de la app, y con su
     propio tamaño en la landing vía .landing-nav-word/.landing-hero) pasa
     a Fraunces igual que el resto del rebrand. */
  .word{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(40px,7vw,64px);letter-spacing:.01em;margin:0;color:var(--burgundy-dark);}
  .sub{font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;font-weight:700;}

  .wrap{max-width:1520px;margin:0 auto;display:grid;grid-template-columns:248px 1fr;min-height:100vh;transition:grid-template-columns .18s ease;}
  .wrap.sidebar-collapsed{grid-template-columns:76px 1fr;}

  .sidebar{
    background:var(--card);
    border-right:1px solid rgba(22,35,59,0.14);
    padding:26px 16px 20px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    transition:padding .18s ease;
  }
  .sidebar-brand{padding:0 10px 22px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .sidebar-brand .word{font-size:22px;letter-spacing:-0.5px;white-space:nowrap;}
  .brand-mark{display:inline-flex;align-items:center;gap:8px;min-width:0;}
  .brand-icon{color:var(--burgundy-dark);flex:0 0 auto;}
  .sidebar-collapse-btn{
    background:transparent;border:1px solid rgba(22,35,59,0.18);border-radius:8px;
    width:26px;height:26px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft);cursor:pointer;transition:background .15s ease,transform .18s ease;
  }
  .sidebar-collapse-btn:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
  .sidebar-nav{display:flex;flex-direction:column;gap:3px;}
  .sidebar-section-label{
    font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
    color:var(--ink-soft);padding:16px 12px 6px;white-space:nowrap;
  }
  .tab{
    font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:14px;
    display:flex;align-items:center;gap:10px;
    padding:11px 14px;background:transparent;color:var(--ink-soft);
    border:none;cursor:pointer;border-radius:999px;position:relative;
    transition:background .15s ease,color .15s ease;
    white-space:nowrap;
  }
  .tab .tab-icon{flex:0 0 auto;}
  .tab:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
  .tab.active{background:var(--burgundy);color:#fff;}
  .nav-pro-badge{
    margin-left:auto;flex:0 0 auto;
    font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:0.6px;
    padding:2px 7px;border-radius:999px;
    background:var(--brass);color:#fff;
  }
  .sidebar-locked{color:#A7AFB8;}
  .sidebar-locked:hover{background:rgba(107,119,148,0.08);color:#8B93A0;}
  .sidebar-locked .tab-lock{margin-left:auto;flex:0 0 auto;}
  .sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(22,35,59,0.12);}

  .sidebar.collapsed{padding:26px 10px 20px;}
  .sidebar.collapsed .sidebar-brand{justify-content:center;}
  .sidebar.collapsed .sidebar-brand .word,
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .tab span,
  .sidebar.collapsed .tab-lock,
  .sidebar.collapsed .sidebar-logout-btn span{display:none;}
  .sidebar.collapsed .tab,
  .sidebar.collapsed .sidebar-logout-btn{justify-content:center;padding:11px;}
  .sidebar.collapsed .sidebar-collapse-btn{display:none;}
  .sidebar.collapsed .sidebar-brand{cursor:pointer;}
  .tabpanel{display:none;}
  .tabpanel.active{display:block;}

  .main-area{display:flex;flex-direction:column;min-width:0;position:relative;}
  .topbar{
    display:flex;justify-content:flex-end;align-items:center;gap:16px;
    position:absolute;top:28px;right:32px;left:32px;
    padding:0;pointer-events:none;
  }
  .topbar .account-menu,
  .topbar .topbar-search,
  .topbar .mobile-nav-toggle{pointer-events:auto;}
  .topbar-actions{display:flex;align-items:center;gap:14px;}
  .content{padding:22px 26px 88px;}

  .topbar-search{position:relative;width:280px;max-width:40vw;}
  .topbar-search .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none;}
  .topbar-search input[type=text]{
    width:100%;padding:10px 14px 10px 40px;border-radius:999px;
    border:1px solid rgba(22,35,59,0.18);background:var(--card);
    font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink);
    box-shadow:0 6px 16px rgba(22,35,59,0.06);
    min-height:auto;
  }
  .topbar-search input[type=text]:focus{outline:none;border-color:var(--burgundy);}
  .btn:focus-visible,.tab:focus-visible,.settings-tab:focus-visible,.client-actions button:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px;}
  .topbar-search-results{
    display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--card);border:1px solid rgba(22,35,59,0.18);
    border-radius:14px;box-shadow:0 18px 44px rgba(15,27,46,0.16);
    padding:8px;max-height:320px;overflow-y:auto;z-index:45;
  }
  .topbar-search-results.open{display:block;}
  .search-group-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding:8px 8px 4px;}
  .search-result-row{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:8px;cursor:pointer;}
  .search-result-row:hover{background:rgba(22,35,59,0.08);}
  .search-result-title{font-size:13px;font-weight:600;color:var(--ink);}
  .search-result-meta{font-size:11px;color:var(--ink-soft);}
  .search-empty{font-size:12px;color:var(--ink-soft);padding:10px 8px;}
  @keyframes searchFlash{ 0%{background:rgba(22,35,59,0.28);} 100%{background:var(--card);} }
  .search-flash{animation:searchFlash 1.6s ease-out;}

  .account-menu{position:relative;}
  .account-avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;line-height:0;}
  .account-avatar-slot{display:inline-flex;}
  .account-avatar{
    width:52px;height:52px;border-radius:50%;
    background:var(--burgundy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;
    overflow:hidden;flex:0 0 auto;
    box-shadow:0 8px 20px rgba(15,27,46,0.18);
  }
  .account-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  /* Fase 107 — este menú se quedó fuera del aplanado de la Fase 96 (no
     estaba en la lista de componentes compartidos de esa fase) — el usuario
     lo vio flotando sobre una tarjeta ya plana con esquinas muy redondeadas,
     sombra pesada y las fuentes viejas, y se notaba fuera de lugar. */
  .account-dropdown{
    display:none;position:absolute;top:calc(100% + 10px);right:0;
    min-width:220px;background:var(--card);border:1px solid rgba(22,35,59,0.18);
    border-radius:4px;box-shadow:none;
    padding:14px;z-index:40;
  }
  .account-dropdown.open{display:block;}
  .account-dropdown-name{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
  .account-dropdown-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(22,35,59,0.12);}
  .account-dropdown-item{
    display:block;width:100%;text-align:left;background:none;border:none;
    font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink);
    padding:9px 8px;border-radius:4px;cursor:pointer;
  }
  .account-dropdown-item:hover{background:rgba(22,35,59,0.08);}
  .account-dropdown-item.danger{color:var(--red);}
  .account-dropdown-item.danger:hover{background:rgba(178,58,58,0.08);}
  .row-menu{position:absolute;top:14px;right:14px;z-index:5;}
  .row-menu.menu-open{z-index:50;}
  .row-menu-btn{
    width:34px;height:34px;padding:0;border-radius:999px;border:none;
    background:transparent;color:var(--ink-soft);cursor:pointer;
    font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .row-menu-btn:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
  .row-menu .account-dropdown{top:calc(100% + 4px);min-width:190px;}
  /* Fase 48 — el mismo menú "⋮" de las filas, reutilizado en la barra de
     controles de cada pestaña para agrupar acciones secundarias (Gestionar/
     Exportar/Importar/Imprimir) y no saturarla de píldoras. Dentro de
     .controls, .row-menu deja de ser absoluto (ahí solo tiene sentido
     flotado sobre una .client-row) y fluye como un botón más del flex row;
     .account-dropdown sigue posicionándose relativo a él sin cambios. */
  .controls .row-menu{position:relative;top:auto;right:auto;flex:none;}
  .notif-bell-btn{
    position:relative;background:none;border:none;padding:6px;cursor:pointer;
    color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
    transition:color .15s ease;
  }
  .notif-bell-btn:hover{color:var(--burgundy-dark);}
  .notif-badge{
    position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
    background:var(--red);color:#fff;border-radius:8px;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;
  }
  .notif-dropdown{min-width:300px;max-width:360px;max-height:400px;overflow-y:auto;}
  /* Fase 112 — bug real reportado por el usuario (captura de hangerflow.com
     en el teléfono): `left:50%;transform:translateX(-50%)` centraba el
     dropdown respecto a `.account-menu` (el wrapper chico de la campana,
     `position:relative`, pegado al borde derecho del topbar) en vez de
     respecto al viewport — el dropdown de 340px de ancho quedaba centrado
     sobre un punto cerca del borde derecho y se salía de pantalla por la
     derecha. Se cambia a position:fixed (así left/right sí son relativos
     al viewport) con un top fijo en vez de heredar el `calc(100% + 10px)`
     de .account-dropdown (que para position:fixed calcularía 100% del alto
     del viewport, no de la campana). */
  @media (max-width:480px){
    .notif-dropdown{
      position:fixed;top:64px;left:12px;right:12px;
      width:auto;min-width:0;max-width:none;transform:none;
    }
  }
  .notif-item{
    display:block;padding:9px 8px;border-radius:8px;font-size:13px;color:var(--ink);
    border-bottom:1px solid rgba(22,35,59,0.08);cursor:pointer;
  }
  .notif-item:last-child{border-bottom:none;}
  .notif-item:hover{background:rgba(22,35,59,0.08);}
  .notif-item-meta{font-size:11px;color:var(--ink-soft);margin-top:2px;}
  .lang-btn{
    flex:1;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:0.5px;
    padding:7px 0;border-radius:8px;border:1px solid rgba(22,35,59,0.18);
    background:transparent;color:var(--ink-soft);cursor:pointer;
  }
  .lang-btn.active{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}

  .mobile-nav-toggle{display:none;}
  .mobile-nav-backdrop{display:none;}
  .mobile-tabbar{display:none;}

  @media (max-width:900px){
    .wrap,
    .wrap.sidebar-collapsed{grid-template-columns:1fr;}
    .sidebar,
    .sidebar.collapsed{
      position:fixed;top:0;left:0;height:100vh;width:82vw;max-width:300px;
      border-right:1px solid rgba(22,35,59,0.14);border-bottom:none;
      flex-direction:column;align-items:stretch;padding:26px 16px 20px;gap:0;
      overflow-x:hidden;overflow-y:auto;
      transform:translateX(-100%);
      transition:transform .22s ease;
      z-index:200;
      box-shadow:0 20px 50px rgba(9,20,30,0.28);
    }
    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open{transform:translateX(0);}
    .sidebar-brand,
    .sidebar.collapsed .sidebar-brand{padding:0 10px 22px;justify-content:space-between;cursor:default;}
    .sidebar-collapse-btn{display:none;}
    .sidebar-nav{flex-direction:column;gap:3px;}
    .sidebar-section-label,
    .sidebar.collapsed .sidebar-section-label{display:block;}
    .sidebar-footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(22,35,59,0.12);border-left:none;padding-left:0;}
    .tab,
    .sidebar.collapsed .tab,
    .sidebar-logout-btn,
    .sidebar.collapsed .sidebar-logout-btn{white-space:nowrap;width:auto;justify-content:flex-start;padding:11px 12px;}
    .tab span,
    .sidebar.collapsed .tab span,
    .sidebar.collapsed .sidebar-brand .word,
    .sidebar-logout-btn span,
    .sidebar.collapsed .sidebar-logout-btn span{display:inline;}
    .mobile-nav-backdrop{
      display:block;position:fixed;inset:0;background:rgba(15,25,35,0.45);
      z-index:190;opacity:0;pointer-events:none;transition:opacity .2s ease;
    }
    .mobile-nav-backdrop.open{opacity:1;pointer-events:auto;}
    /* Fase 110 — el ☰ del topbar queda oculto: su trabajo lo hace ahora
       "Más" en la barra inferior (mismo openMobileNav(), ver app.js). Se
       deja el botón en el DOM (solo display:none) por si algo más lo
       referencia, en vez de borrarlo del HTML. */
    .mobile-nav-toggle{display:none;}
    .topbar{top:16px;right:16px;left:16px;justify-content:space-between;}
    .content{padding:16px 16px 84px;}
    .account-avatar{width:42px;height:42px;font-size:15px;}
    .settings-head{margin-top:48px;}
    .dash-greeting{margin-top:48px;}
    /* Fase 111 — el usuario pidió de vuelta el buscador en móvil (se había
       ocultado antes por falta de espacio junto al ☰; con el ☰ reemplazado
       por "Más" en la barra inferior, ahora sí entra). flex:1 en vez del
       ancho fijo de escritorio (280px) para que ocupe el espacio libre
       entre el borde izquierdo y campana+avatar. */
    .topbar-search{display:block;flex:1;width:auto;max-width:none;}

    /* Fase 110 — barra de navegación inferior, reemplaza al ☰ como
       navegación principal en móvil (pedido del usuario, calcado de una
       captura de referencia). z-index 40, DEBAJO de .overlay (50) a
       propósito: cuando se abre cualquier formulario "+ Nuevo X" o el
       propio menú "+", el fondo oscurecido del overlay debe tapar la
       barra, no al revés. */
    .mobile-tabbar{
      display:flex;align-items:center;justify-content:space-around;
      position:fixed;left:0;right:0;bottom:0;z-index:40;
      background:var(--card);border-top:1px solid rgba(22,35,59,0.14);
      padding:8px 6px calc(8px + env(safe-area-inset-bottom));
      box-shadow:0 -4px 16px rgba(9,20,30,0.08);
    }
    /* .mobile-tabbar-item comparte .tab con el sidebar SOLO para heredar
       el listener genérico de switching (app.js) — sus estilos visuales
       (pill de fondo coral cuando está activo, hover gris) no aplican
       acá, por eso se resetean explícitamente contra .tab/.tab.active. */
    .mobile-tabbar-item,
    .mobile-tabbar-item:hover,
    .mobile-tabbar-item.active{
      display:flex;flex-direction:column;align-items:center;gap:3px;
      flex:1 1 0;min-width:0;padding:4px 2px;border:none;background:none;
      border-radius:0;font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;
      color:var(--ink-soft);cursor:pointer;
    }
    .mobile-tabbar-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
    .mobile-tabbar-item.active{color:var(--burgundy-dark);}
    .mobile-tabbar-fab{
      display:flex;align-items:center;justify-content:center;flex:0 0 auto;
      width:52px;height:52px;margin-top:-26px;border-radius:50%;border:none;
      background:var(--burgundy);color:#fff;cursor:pointer;
      box-shadow:0 8px 20px rgba(157,66,53,0.4);
    }
    /* La barra inferior nueva (z-index:40) tapa visualmente los 24px de
       siempre — se sube el toast para que quede libre encima de ella. */
    .toast{bottom:84px;}
    /* Fase 111 — pedido del usuario: en Finanzas, los botones de exportar/
       imprimir (no son la acción principal de la sección) se esconden en
       móvil para no competir por espacio con "Gestionar categorías" y
       "+ Agregar gasto". Nada de esto está en app.js — siguen funcionando
       igual en escritorio, es puramente visual acá. */
    #exportExpensesBtn,
    #exportExpenseCategoryReportBtn,
    #printExpenseCategoryReportBtn{display:none;}
  }

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
  /* Fase 110 — el Dashboard antes tenía una sola .stats con 7 tarjetas
     iguales. Se separaron en primaria (con ícono) y secundaria ("Resumen
     rápido"), pero por defecto (desktop) ambos wrappers usan
     display:contents: sus tarjetas .stat se integran directo en
     .dash-stats-wrap (que hereda el mismo grid de .stats de siempre), así
     que en desktop se ve exactamente igual que antes, solo con 2 íconos
     nuevos. El rediseño 2x2 + panel real solo aplica en mobile, más abajo. */
  .dash-stats-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
  .stats-primary,.stats-secondary{display:contents;}
  .dash-stat-icon{display:block;width:16px;height:16px;color:var(--ink-soft);margin-bottom:8px;}
  .dash-stat-icon svg{display:block;width:100%;height:100%;}
  .dash-stat-primary.accent .dash-stat-icon{color:var(--coral);}
  .stats-secondary-title{display:none;}
  .stat{
    background:var(--card);
    border:1px solid rgba(22,35,59,0.14);
    border-left:1px solid rgba(22,35,59,0.14);
    border-radius:4px;
    padding:14px 16px;
    box-shadow:none;
  }
  .stat .label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
  .stat .value{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:700;margin-top:6px;color:var(--ink);}
  .stat .value.neg{color:var(--red);}
  .stat.profit .value.pos{color:var(--green);}
  .stat-delta{font-size:11px;font-weight:700;margin-top:4px;}
  .stat-delta.pos{color:var(--green);}
  .stat-delta.neg{color:var(--red);}
  /* Fase 78 — "sin actividad todavía este período" (0 facturas/gastos) NO es
     lo mismo que una caída real del 100%: se ve neutral (ink-soft, sin
     negrita de alarma), no rojo. */
  .stat-delta.neutral{color:var(--ink-soft);font-weight:600;}
  .stat.profit .value.neg{color:var(--red);}
  /* Fase 57 — solo las tarjetas de Finanzas son clickeables (abren el
     desglose, ver openFinanceStatDetail() en app.js); las de Dashboard y
     Admin reusan la misma clase .stat pero no tienen ese comportamiento,
     por eso el estilo va scopeado a #financeStats en vez de a .stat solo. */
  #financeStats .stat{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease;}
  #financeStats .stat:hover{box-shadow:0 6px 18px rgba(22,35,59,0.16);transform:translateY(-2px);}

  /* Fase 110 — a 640px o menos, las 4 tarjetas primarias del Dashboard
     pasan de integrarse en la grilla plana de siempre a un 2x2 con ícono
     en círculo (pedido del usuario, calcado de una captura de referencia),
     y las 3 secundarias se agrupan en un solo panel "Resumen rápido" en
     vez de 3 tarjetas sueltas — menos scroll, más fácil de escanear. */
  @media (max-width:640px){
    .dash-stats-wrap{display:block;}
    .stats-primary{
      display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
    }
    .dash-stat-primary{padding:16px;}
    .dash-stat-primary .dash-stat-icon{
      display:flex;align-items:center;justify-content:center;
      width:34px;height:34px;padding:8px;border-radius:50%;margin-bottom:10px;
      background:rgba(22,35,59,0.08);color:var(--ink-soft);
    }
    .dash-stat-primary.accent .dash-stat-icon{background:rgba(217,96,60,0.14);color:var(--coral);}
    .dash-stat-primary .value{font-size:20px;}
    .stats-secondary{
      display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;
      background:var(--card);border:1px solid rgba(22,35,59,0.14);
      border-radius:4px;padding:16px;
    }
    .stats-secondary-title{
      display:block;grid-column:1/-1;
      font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;
    }
    .stats-secondary .stat{background:none;border:none;padding:0;}
  }

  .chartbox{
    background:var(--card);
    border:1px solid rgba(22,35,59,0.14);
    border-radius:4px;
    padding:18px 20px;
    margin-bottom:20px;
    box-shadow:none;
  }
  .chartbox .ctitle{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px;}
  .chart{display:flex;align-items:flex-end;gap:10px;height:120px;}
  .chart .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
  .chart .bar{width:100%;max-width:34px;background:var(--brass);border-radius:4px 4px 0 0;min-height:2px;}
  .chart .bval{font-family:'Space Mono',monospace;font-size:10px;color:var(--ink-soft);margin-bottom:4px;}
  .chart .blabel{font-size:10px;color:var(--ink-soft);margin-top:6px;text-transform:uppercase;}
  .chart-empty{color:var(--ink-soft);font-size:13px;}
  .insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px;}
  .insight{
    background:var(--card);
    border:1px solid rgba(22,35,59,0.14);
    border-radius:4px;
    padding:14px 16px;
    box-shadow:none;
  }
  .insight .ititle{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:8px;}
  .insight .ivalue{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:700;color:var(--ink);}
  .insight .isub{font-size:12px;color:var(--ink-soft);margin-top:4px;}

  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-bottom:20px;
    margin-top:64px;
    padding:14px 16px;
    border:1px solid rgba(22,35,59,0.14);
    border-radius:18px;
    background:var(--card);
    box-shadow:0 2px 10px rgba(9,20,30,0.06);
  }
  /* Fase 48b — el "⋮" de acciones secundarias se pega al botón principal
     ("+ Nuevo X") en vez de flotar solo en la fila: los dos viajan juntos
     como una sola unidad de flex-wrap, así nunca quedan separados en líneas
     distintas cuando el espacio es angosto. */
  .controls-cta-group{display:inline-flex;align-items:center;gap:8px;flex:none;}
  /* El "⋮" quedó como el último elemento del grupo (después de "+ Nuevo"),
     otra vez cerca del borde derecho de la fila — mismo contexto que en una
     .client-row, así que el desplegable vuelve a abrir hacia la izquierda
     (comportamiento por defecto de .account-dropdown, sin override aquí). */
  input[type=text], input[type=number], input[type=date], select{
    font-family:'IBM Plex Sans',sans-serif;font-size:14px;padding:12px 14px;
    border:1px solid #bfc4cb;border-radius:4px;background:var(--card);color:var(--ink);
    min-height:48px;
    box-shadow:none;
  }
  .btn{
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.02em;padding:11px 20px;
    border-radius:4px;border:none;background:var(--burgundy);
    color:#fff;cursor:pointer;transition:background .15s ease, opacity .12s ease;
    box-shadow:none;
  }

  .btn:hover{background:var(--burgundy-dark);}
  .btn:active{opacity:.8;}
  .btn.ghost{background:transparent;color:var(--burgundy-dark);border:1.5px solid rgba(22,35,59,0.32);}
  .btn.ghost:hover{background:rgba(22,35,59,0.08);}
  .btn.danger:not(.ghost){background:var(--red);}
  .btn.danger:not(.ghost):hover{background:#9c3232;}

  .btn.small{padding:7px 14px;font-size:12px;}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  input:disabled{opacity:.72;cursor:not-allowed;}

  .meta{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.5px;}

  .empty{text-align:center;padding:70px 20px;color:var(--ink-soft);}
  .empty h2{font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--ink);font-size:21px;margin-bottom:6px;}

  .overlay{display:none;position:fixed;inset:0;background:rgba(63,76,104,0.56);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;z-index:50;}
  .overlay.open{display:flex;}

  #appBootLoader{
    position:fixed;inset:0;z-index:999;background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  }
  #appBootLoader p{font-size:13px;color:var(--ink-soft);font-weight:600;}
  .boot-spinner{
    width:34px;height:34px;border-radius:50%;
    border:3px solid rgba(22,35,59,0.18);border-top-color:var(--burgundy);
    animation:boot-spin .8s linear infinite;
  }
  @keyframes boot-spin{to{transform:rotate(360deg);}}
  .login-overlay{
    position:fixed;
    inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
    background:
      radial-gradient(circle at top left, rgba(22,35,59,0.55), transparent 45%),
      radial-gradient(circle at bottom right, rgba(15,27,46,0.6), transparent 42%),
      rgba(15,27,46,0.62);
    backdrop-filter:blur(10px);
    z-index:80;
  }
  .login-card{
    width:100%;
    max-width:760px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(22,35,59,0.22);
    border-radius:28px;
    padding:24px 28px;
    box-shadow:0 24px 80px rgba(15,27,46,0.16);
    position:relative;
  }
  .login-credit{
    position:fixed;left:0;right:0;bottom:14px;
    display:flex;justify-content:center;
    pointer-events:none;
    z-index:81;
  }
  .login-credit span{
    pointer-events:auto;
    background:rgba(63,76,104,0.55);
    backdrop-filter:blur(6px);
    padding:6px 14px;
    border-radius:999px;
    font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:0.4px;
    color:#fff;
  }
  /* En mobile el formulario de Registro es más alto que el viewport y el
     overlay hace scroll interno (.login-overlay{overflow-y:auto}) — con
     position:fixed este crédito se quedaba flotando sobre los campos del
     formulario mientras se scrollea. Se vuelve parte del flujo normal,
     debajo de todo, en vez de flotar. */
  @media (max-width:640px){
    .login-credit{position:static;margin-top:14px;}
  }
  .login-brand{text-align:center;margin-bottom:10px;}
  .login-brand .brand-mark{justify-content:center;margin-bottom:10px;}
  .login-brand .brand-icon{width:34px;height:34px;}
  .tagline-alt{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:0 0 12px;}
  .tagline{font-family:'Space Grotesk',sans-serif;font-style:italic;font-weight:500;font-size:18px;color:var(--burgundy-dark);margin:0 0 10px;}
  .auth-tabs{
    display:flex;
    gap:8px;
    margin-bottom:12px;
    padding:6px;
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(22,35,59,0.18);
    border-radius:999px;
  }
  .auth-tab{
    flex:1;
    border:none;
    border-radius:999px;
    background:transparent;
    color:var(--ink-soft);
    font-family:'Space Grotesk',sans-serif;
    font-size:13px;
    font-weight:600;
    padding:11px 14px;
    cursor:pointer;
  }
  .auth-tab.active{
    background:var(--card);
    color:var(--burgundy-dark);
    box-shadow:0 8px 18px rgba(15,27,46,0.10);
  }
  .auth-pane{display:none;padding:18px;border-radius:22px;transition:background-color .15s ease, box-shadow .15s ease;}
  .auth-pane.active{display:block;}
  .auth-pane .field{margin-bottom:14px;}

  .profile-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .profile-type-option{
    display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
    background:rgba(255,255,255,0.7);border:1.5px solid rgba(22,35,59,0.18);
    border-radius:16px;padding:14px 10px;cursor:pointer;
    font-family:'Manrope',sans-serif;color:var(--ink);
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
  .profile-type-option:hover{border-color:rgba(22,35,59,0.4);}
  .profile-type-option.selected{
    border-color:var(--burgundy-dark);background:rgba(22,35,59,0.08);
    box-shadow:0 8px 18px rgba(15,27,46,0.10);
  }
  .profile-type-icon{font-size:22px;line-height:1;}
  .profile-type-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;}
  .profile-type-sub{font-size:11px;color:var(--ink-soft);}

  .login-note{font-size:12px;color:var(--ink-soft);margin-top:6px;text-align:center;}
  .login-note a{color:inherit;text-decoration:underline;cursor:pointer;}
  .google-auth-row{margin-top:14px;}
  .google-auth-divider{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--ink-soft);font-size:12px;}
  .google-auth-divider::before,.google-auth-divider::after{content:'';flex:1;height:1px;background:var(--line, #e4e4e4);}
  #googleSignInDiv{display:flex;justify-content:center;}
  body:not(.logged-in) .wrap{display:none;}
  body.logged-in .login-overlay{display:none;}
  body.logged-out .wrap{display:none;}
  body.public-mode .login-overlay{display:none;}
  body.public-mode .wrap{display:none;}
  body.public-mode .public-view{display:flex;}
  body.show-auth .login-overlay{display:flex;}
  body.logged-in.show-auth .login-overlay{display:none;}
  .landing-page{display:block;}
  body.show-auth .landing-page,
  body.logged-in .landing-page,
  body.public-mode .landing-page{display:none;}
  .admin-view{display:none;}
  body.admin-mode .wrap,
  body.admin-mode .login-overlay,
  body.admin-mode .landing-page{display:none;}
  body.admin-mode .admin-view{display:block;}
  .login-back{
    position:absolute;top:18px;left:18px;
    background:transparent;border:none;color:var(--ink-soft);
    font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;cursor:pointer;
    padding:4px 6px;
  }
  .login-back:hover{color:var(--ink);}

  .landing-page{
    min-height:100vh;
    background:var(--paper);
    color:var(--ink);
  }
  .landing-nav{
    max-width:1180px;margin:0 auto;padding:20px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    border-bottom:2px dashed rgba(22,35,59,0.22);
  }
  .landing-nav-brand{display:flex;align-items:center;gap:8px;color:var(--burgundy-dark);}
  .landing-nav-word{font-family:'Big Shoulders Display',sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.01em;}
  .landing-nav-actions{display:flex;align-items:center;gap:14px;}
  .landing-lang-toggle{display:flex;gap:6px;}
  .landing-lang-toggle .lang-btn{flex:none;padding:7px 14px;}

  /* Fase 95 — Inventario Vivo revive el hero a 2 columnas con el widget
     "Resumen del día" (datos ilustrativos, no una captura de producto —
     la Fase 90 solo quitó imágenes reales, esto no contradice esa
     decisión). Fase 91's line-height:1.18 fix se conserva abajo. */
  .landing-hero{
    max-width:1080px;margin:0 auto;padding:56px 24px 64px;
    display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:start;
    text-align:left;
  }
  .landing-hero-actions{justify-content:flex-start;}
  .landing-promo-banner{
    display:inline-flex;align-items:center;
    background:var(--brass);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:0.3px;
    padding:8px 16px;border-radius:999px;margin:0 0 16px;
  }
  .landing-eyebrow{
    display:inline-flex;align-items:center;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:1.2px;
    color:var(--burgundy);background:rgba(22,35,59,0.08);border:1px solid rgba(22,35,59,0.22);
    border-radius:999px;padding:6px 14px;margin:0 0 16px;
  }
  .landing-hero-copy h1{
    font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:clamp(30px,4.2vw,46px);line-height:1.15;
    letter-spacing:-0.01em;margin:0 0 18px;color:var(--ink);
  }
  .landing-hero-sub{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 26px;max-width:520px;}
  .landing-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .landing-hero-actions .btn{padding:14px 22px;font-size:15px;}

  .landing-manifest{
    background:var(--ink);color:var(--paper);border-radius:4px;
    padding:22px 24px;font-family:'IBM Plex Mono',monospace;width:100%;
  }
  .landing-manifest-title{
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brass);margin-bottom:14px;
  }
  .landing-manifest-row{
    display:flex;justify-content:space-between;padding:8px 0;
    border-top:1px solid rgba(237,234,226,0.16);font-size:13px;
  }
  .landing-manifest-row:first-of-type{border-top:none;}
  .landing-manifest-row b{font-variant-numeric:tabular-nums;}
  .landing-manifest-row b.coral{color:var(--coral);}
  @media (max-width:860px){
    .landing-hero{grid-template-columns:1fr;text-align:center;}
    .landing-hero-actions{justify-content:center;}
    .landing-manifest{max-width:420px;margin:0 auto;}
  }

  .landing-features{
    max-width:1180px;margin:0 auto;padding:44px 24px;
    border-top:2px dashed rgba(22,35,59,0.22);border-bottom:2px dashed rgba(22,35,59,0.22);
  }
  .landing-features h2,
  .landing-pricing h2{
    font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:clamp(22px,2.8vw,30px);
    text-align:center;margin:0 0 40px;color:var(--ink);
  }
  .landing-features-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
  .landing-feature-card{
    position:relative;background:var(--card);
    border:1px solid rgba(22,35,59,0.14);margin:0 -1px -1px 0;
    padding:26px 22px 22px;
  }
  .landing-feature-card .nav-pro-badge{position:absolute;top:14px;right:14px;}
  .landing-feature-icon{
    width:36px;height:36px;border-radius:4px;margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(217,96,60,0.12);color:var(--brass);
  }
  .landing-feature-card h3{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:15.5px;margin:0 0 6px;color:var(--ink);}
  .landing-feature-card p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0;}

  .landing-pricing{max-width:1180px;margin:0 auto;padding:50px 24px 64px;}
  .landing-pricing-grid{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:stretch;
    max-width:1080px;margin:0 auto;
  }
  .landing-plan-card{
    position:relative;background:var(--card);border:1px solid rgba(22,35,59,0.18);border-radius:4px;
    padding:28px 26px;display:flex;flex-direction:column;
  }
  .landing-plan-card h3{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:14px;color:var(--ink-soft);margin:6px 0 10px;}
  .landing-plan-price{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:32px;color:var(--ink);margin-bottom:18px;}
  .landing-plan-price span{font-size:14px;font-weight:500;color:var(--ink-soft);}
  .landing-plan-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;}
  .landing-plan-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);}
  .landing-plan-list .billing-check{background:rgba(22,35,59,0.14);color:var(--burgundy-dark);}
  .landing-plan-card .btn{margin-top:auto;}
  .landing-pricing-grid .billing-hero{max-width:none;margin:0;display:flex;flex-direction:column;}
  .landing-pricing-grid .billing-hero-body{display:flex;flex-direction:column;flex:1;}
  .landing-pricing-grid .billing-features{grid-template-columns:1fr;}
  .landing-pricing-grid .billing-cta{margin-top:auto;}
  .landing-pricing-grid .billing-trial-banner{background:var(--coral);}

  .landing-footer{
    text-align:center;padding:32px 24px 40px;
    border-top:2px dashed rgba(22,35,59,0.22);
  }
  .landing-footer-credit{font-size:12px;color:var(--ink-soft);margin-bottom:6px;}
  .landing-footer p{font-size:12px;color:var(--ink-soft);margin:0;}
  .landing-footer-legal{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
  .landing-footer-legal a{font-size:12px;color:var(--ink-soft);text-decoration:underline;}
  .landing-footer-legal a:hover{color:var(--burgundy-dark);}

  @media (max-width:860px){
    .landing-pricing-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .landing-nav{padding:16px;}
    .landing-nav-word{font-size:17px;}
    .landing-hero{padding:20px 16px 44px;}
    .landing-features,.landing-pricing{padding-left:16px;padding-right:16px;}
  }

  body.owner-mode .tab[data-tab="inventory"],
  body.owner-mode .tab[data-tab="clients"],
  body.owner-mode #panel-inventory,
  body.owner-mode #panel-clients{display:none !important;}
  body.company-mode .tab[data-tab="company"],
  body.company-mode #panel-company{display:none !important;}
  .public-view{
    display:none;
    min-height:100vh;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:var(--paper);
  }
  .public-card{
    width:100%;
    max-width:980px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(22,35,59,0.20);
    border-radius:4px;
    padding:24px;
    box-shadow:none;
  }
  .public-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:12px 12px 20px;
    border-bottom:2px dashed rgba(22,35,59,0.22);
    margin-bottom:20px;
    flex-wrap:wrap;
  }
  .public-brand{display:flex;align-items:center;gap:14px;}
  .public-brand .company-logo-preview{
    width:64px;
    height:64px;
    border-radius:4px;
  }
  .public-title h1{margin:0;font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:28px;color:var(--burgundy-dark);}
  .public-title p{margin:4px 0 0;color:var(--ink-soft);font-size:13px;}
  .public-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;}
  .public-receipt-wrap{overflow:auto;}
  /* Fase 117 — Términos/Privacidad/Cookies (reusa .public-card/.public-hero) */
  .legal-lang-toggle{display:flex;gap:6px;flex:none;}
  .legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(22,35,59,0.12);}
  .legal-nav-link{
    font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;
    padding:8px 14px;border-radius:4px;border:1px solid rgba(22,35,59,0.18);
    color:var(--ink-soft);text-decoration:none;
  }
  .legal-nav-link.active{background:var(--burgundy-dark);border-color:var(--burgundy-dark);color:#fff;}
  .legal-nav-link:not(.active):hover{background:var(--paper-dark);}
  .legal-content{max-width:760px;color:var(--ink);font-size:14px;line-height:1.7;}
  .legal-content h2{font-family:'IBM Plex Sans',sans-serif;font-size:16px;font-weight:700;color:var(--burgundy-dark);margin:26px 0 8px;}
  .legal-content h2:first-child{margin-top:0;}
  .legal-content p{margin:0 0 12px;}
  .legal-content ul{margin:0 0 14px;padding-left:20px;}
  .legal-content li{margin-bottom:6px;}
  .legal-content a{color:var(--burgundy-dark);}
  .portal-section{margin-bottom:24px;}
  .portal-section:last-child{margin-bottom:0;}
  .portal-section .ctitle{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px;}
  .store-lotes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px;}
  .store-lote-card{
    background:var(--card);border:1px solid rgba(22,35,59,0.14);border-radius:4px;overflow:hidden;
    box-shadow:none;display:flex;flex-direction:column;
  }
  .store-lote-photo{width:100%;height:180px;object-fit:cover;display:block;background:var(--paper-dark);}
  .store-lote-photo-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--brass-light) 0%, var(--burgundy) 55%, var(--burgundy-dark) 100%);}
  .store-lote-photo-placeholder svg{width:44px;height:44px;opacity:0.9;}
  .store-lote-body{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .store-lote-title{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:16px;}
  .store-lote-price{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--burgundy-dark);font-size:15px;}
  .store-lote-desc{font-size:13px;color:var(--ink-soft);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
  .store-lote-details{margin-top:8px;display:flex;flex-direction:column;gap:14px;}
  .store-lote-details .meta{line-height:1.9;}
  .store-lote-card .btn.small{padding:11px 16px;}
  .store-lote-toggle{margin-top:auto;padding-top:14px;}
  .wizard-steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 24px;}
  .wizard-step-indicator{
    width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    font-family:'Space Mono',monospace;font-weight:700;font-size:13px;
    background:var(--paper-dark);color:var(--ink-soft);border:1px solid rgba(22,35,59,0.20);
  }
  .wizard-step-indicator.active{background:var(--burgundy-dark);color:#fff;border-color:var(--burgundy-dark);}
  .wizard-step-indicator.done{background:rgba(75,122,90,0.16);color:var(--green);border-color:rgba(75,122,90,0.3);}
  .wizard-step-line{width:36px;height:2px;background:rgba(22,35,59,0.20);}
  .modal{
    background:rgba(255,255,255,0.98);
    border-radius:4px;
    max-width:680px;
    width:100%;
    padding:32px;
    max-height:90vh;
    overflow-y:auto;
    border:1px solid rgba(22,35,59,0.18);
    box-shadow:none;
  }
  .modal h2{font-family:'Big Shoulders Display',sans-serif;font-weight:700;margin:0 0 18px;font-size:24px;color:var(--burgundy-dark);}
  /* Fase 110 — menú rápido "+" de la barra inferior: mismo .modal chico de
     siempre, solo con una lista de accesos en vez de un formulario. */
  .quick-create-modal{max-width:340px;}
  .quick-create-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
  .quick-create-item{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:13px 15px;border:1px solid rgba(22,35,59,0.14);border-radius:4px;
    background:var(--card);color:var(--ink);cursor:pointer;text-align:left;
    font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;
    transition:background .15s ease;
  }
  .quick-create-item svg{flex:none;color:var(--coral);}
  .quick-create-item:hover{background:rgba(22,35,59,0.06);}
  .quick-create-cancel{width:100%;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%;font-family:'IBM Plex Sans',sans-serif;font-size:15px;padding:13px 15px;
    border:1px solid var(--paper-dark);border-radius:4px;background:var(--card);color:var(--ink);
  }
  .field select{
    appearance:none;-webkit-appearance:none;-moz-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='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  }
  .ib-cat-select, .ib-warehouse-select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    font-family:'Manrope',sans-serif;font-size:13px;padding:8px 34px 8px 12px;cursor:pointer;
    border:1px solid var(--paper-dark);border-radius:10px;background-color:var(--card);color:var(--ink);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
  }
  .field input[type=file]{display:none;}
  .field input[type=checkbox]{
    width:18px;
    height:18px;
    margin-right:10px;
    cursor:pointer;
    accent-color:var(--burgundy);
  }
  .field label input[type=checkbox]{
    margin-bottom:0;
  }
  .upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .upload-row{margin-bottom:4px;}
  .field-inline-btn{display:flex;gap:8px;}
  .field-inline-btn input{flex:1;min-width:0;}
  .field-inline-btn .btn{flex:none;white-space:nowrap;}
  /* Fase 66 — dimensiones del paquete (largo × ancho × alto) como un solo
     campo compuesto en vez de 3 .field separados. */
  .pkg-dimensions-row{display:flex;align-items:center;gap:6px;}
  .pkg-dimensions-row input{flex:1;min-width:0;}
  .pkg-dim-x{color:var(--ink-soft);font-weight:600;flex:none;}
  /* Fase 108 — resumen de costo (precio/lb × peso + seguro opcional) dentro
     del formulario de paquete; puramente informativo, no es un .client-row
     ni comparte nada con otras pantallas, así que se edita directo. */
  .pkg-cost-summary{background:var(--paper-dark);border-radius:4px;padding:14px 16px;margin:2px 0 16px;font-size:13px;}
  .pkg-cost-summary-title{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
  .pkg-cost-summary-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--ink);font-family:'IBM Plex Mono',monospace;}
  .pkg-cost-summary-total{font-weight:700;border-top:1px dashed rgba(22,35,59,0.22);margin-top:6px;padding-top:8px;}
  .upload-btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
    padding:9px 14px;border-radius:6px;border:1px solid var(--burgundy);
    background:var(--burgundy);color:#fff;cursor:pointer;
  }
  /* Fase 91 — bug real (preexistente, no solo del rebrand): este botón
     siempre vive dentro de un <div class="field">, y `.field label` (más
     abajo) es más específico que `.upload-btn` solo, así que su
     color:var(--ink-soft) le ganaba y dejaba el texto gris-azulado sobre
     fondo de color — casi ilegible con cualquiera de las 2 marcas que ha
     tenido la app. `.field .upload-btn` sube la especificidad para que
     gane de verdad el blanco de arriba. */
  .field .upload-btn{color:#fff;}

  .upload-name{font-size:12px;color:var(--ink-soft);}
  .field textarea{resize:vertical;min-height:56px;}
  .row2{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:12px;align-items:start;}
  .field{min-width:0;}
  .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

  /* Modal de import genérico (Clientes/Catálogo) — plantilla con columnas +
     zona de arrastrar-y-soltar, pedido de un cliente 2026-09. */
  .import-modal{max-width:480px;}
  .import-modal h3{font-family:'Space Grotesk',sans-serif;font-weight:600;margin:0 0 4px;font-size:20px;color:var(--burgundy-dark);}
  .import-modal-subtitle{font-size:13px;color:var(--ink-soft);margin:0 0 22px;}
  .import-modal-step{margin-bottom:22px;}
  .import-modal-step-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .import-modal-step-num{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:24px;height:24px;border-radius:999px;font-size:12px;font-weight:700;
    background:var(--burgundy);color:#fff; /* Fase 91 — mismo bug de --paper que .upload-btn */
  }
  .import-modal-step-head h4{margin:0;font-size:15px;font-weight:700;color:var(--ink);}
  .import-modal-step-sub{margin:0 0 10px 34px;font-size:13px;color:var(--ink-soft);}
  .import-modal-columns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px 34px;}
  .import-modal-badge{
    font-family:'Space Mono',monospace;font-size:12px;padding:5px 10px;border-radius:8px;
    background:var(--paper-dark);color:var(--ink);border:1px solid rgba(22,35,59,0.18);
  }
  .import-modal-step button#importModalDownloadBtn{margin-left:34px;}
  .import-dropzone{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    margin-left:34px;padding:26px 16px;border-radius:14px;cursor:pointer;text-align:center;
    border:2px dashed rgba(22,35,59,0.28);background:var(--paper-dark);transition:border-color .15s,background .15s;
  }
  .import-dropzone:hover,.import-dropzone.dragover{border-color:var(--burgundy);background:rgba(160,58,58,0.06);}
  .import-dropzone-icon{font-size:24px;line-height:1;color:var(--ink-soft);}
  .import-dropzone-cta{font-weight:700;font-size:14px;color:var(--ink);}
  .import-dropzone-hint{font-size:12px;color:var(--ink-soft);}

  .tutorial-modal{max-width:440px;text-align:center;position:relative;padding:36px 32px 28px;}
  .tutorial-close{
    position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
    background:transparent;border:none;color:var(--ink-soft);font-size:14px;cursor:pointer;
  }
  .tutorial-close:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
  .tutorial-icon{font-size:42px;margin-bottom:12px;line-height:1;}
  .tutorial-modal h2{text-align:center;font-size:19px;margin:0 0 10px;}
  .tutorial-body{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px;}
  .tutorial-dots{display:flex;justify-content:center;gap:6px;margin-bottom:22px;}
  .tutorial-dot{width:7px;height:7px;border-radius:50%;background:rgba(22,35,59,0.22);transition:all .15s ease;}
  .tutorial-dot.active{background:var(--burgundy);width:20px;border-radius:4px;}
  .tutorial-actions{justify-content:space-between;align-items:center;}
  .tutorial-nav{display:flex;gap:8px;}
  .hint{font-size:11px;color:var(--ink-soft);margin-top:0;margin-bottom:10px;}
  .upload-name{display:inline-flex;align-items:center;min-height:36px;}

  .clients-list{display:flex;flex-direction:column;gap:16px;}

  /* Fase 98 — borde punteado bajo el título, mismo motivo que .dash-greeting
     (Fase 94) y el resto del rebrand — como .settings-head lo reusan 10 de
     11 pestañas, este único cambio las emparienta todas de una vez. */
  /* Fase 105 — .topbar es position:absolute, superpuesto sobre el inicio de
     .content (ver .topbar más abajo) — un .settings-head sin subtítulo
     (Catálogo, Facturas, Clientes, etc.) queda más bajo que la barra de
     búsqueda, así que el borde punteado nuevo quedaba tapado por ella en
     lugares. .dash-greeting (Dashboard) tiene subtítulo y por eso libraba el
     topbar sin querer; min-height fuerza lo mismo aquí sin depender de si
     hay subtítulo o no. */
  .settings-head{min-height:64px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px dashed rgba(22,35,59,0.22);}
  /* Fase 92 — primer paso del "esqueleto compartido" del mockup Percha y
     Etiqueta en la app interna: el título de cada pestaña (una sola clase
     reusada en 10 de las 11 pestañas) pasa a Fraunces, igual que los
     títulos de la landing (Fase 88). Sin tocar layout ni ningún otro h2/h3
     de la app (modales, etc.) — a propósito, alcance mínimo por ahora. */
  .settings-head h2{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:23px;margin:0 0 6px;color:var(--ink);}
  .settings-head p{margin:0;font-size:13px;color:var(--ink-soft);}
  .settings-shell{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;}
  .settings-nav{
    display:flex;flex-direction:column;gap:3px;
    background:var(--card);border:1px solid rgba(22,35,59,0.18);
    border-radius:18px;padding:10px;
    position:sticky;top:20px;
  }
  .settings-tab{
    font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;
    padding:11px 14px;background:transparent;color:var(--ink-soft);
    border:none;cursor:pointer;border-radius:12px;text-align:left;
    transition:background .15s ease,color .15s ease;
  }
  .settings-tab:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
  .settings-tab.active{background:rgba(22,35,59,0.14);color:var(--burgundy-dark);}
  .settings-content{
    display:flex;
    flex-direction:column;
    gap:18px;
    background:var(--card);
    border:1px solid rgba(22,35,59,0.18);
    border-radius:24px;
    padding:22px;
    box-shadow:0 10px 30px rgba(22,35,59,0.08);
  }
  .settings-pane{display:none;}
  .settings-pane.active{display:flex;flex-direction:column;gap:18px;}
  @media (max-width:760px){
    .settings-shell{grid-template-columns:1fr;}
    .settings-nav{position:static;flex-direction:row;overflow-x:auto;}
    .settings-tab{white-space:nowrap;flex:0 0 auto;}
  }

  .billing-hero{
    max-width:640px;margin:0 auto;border-radius:4px;overflow:hidden;
    border:1px solid rgba(22,35,59,0.18);
    box-shadow:none;
  }
  .billing-trial-banner{
    background:var(--brass);color:#fff;text-align:center;
    font-family:'Space Mono',monospace;font-size:12px;font-weight:700;letter-spacing:0.4px;
    padding:9px 12px 9px 28px;position:relative;
  }
  /* Fase 88 — muesca de listón/etiqueta a la izquierda del banner, mismo
     motivo que las tarjetas de features/precio de abajo. */
  .billing-trial-banner::before{
    content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.55);
  }
  .billing-hero-body{
    background:linear-gradient(160deg, var(--burgundy-dark), var(--burgundy));
    color:#fff;padding:28px 26px 26px;
  }
  .billing-hero-body h3{
    font-family:'Fraunces',serif;font-size:19px;font-weight:600;
    margin:0 0 8px;color:#fff;
  }
  .team-upsell{
    background:var(--card);border:1px solid rgba(22,35,59,0.2);border-radius:18px;
    padding:24px 26px;text-align:center;max-width:440px;margin:20px auto 0;
  }
  .team-upsell h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 8px;color:var(--ink);}
  .team-upsell p{font-size:13px;color:var(--ink-soft);margin:0 0 16px;}
  .team-new-member-info{
    background:rgba(22,35,59,0.08);border:1px solid rgba(22,35,59,0.25);
    border-radius:16px;padding:18px 20px;margin-bottom:18px;
  }
  .team-new-member-info h3{font-family:'Space Grotesk',sans-serif;font-size:15px;margin:0 0 10px;color:var(--ink);}
  .team-new-member-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;color:var(--ink-soft);}
  .team-new-member-row strong{color:var(--ink);font-family:'Space Mono',monospace;}
  .team-new-member-info .hint{margin:8px 0 12px;}
  .billing-cycle-toggle{display:flex;gap:8px;margin-bottom:14px;}
  .billing-cycle-toggle .lang-btn{
    background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.85);
  }
  .billing-cycle-toggle .lang-btn.active{background:#fff;border-color:#fff;color:var(--burgundy-dark);}
  .landing-annual-hint{font-size:12px;color:rgba(255,255,255,0.75);margin:2px 0 16px;}
  .billing-price-row{display:flex;align-items:baseline;gap:6px;}
  .billing-price-amount{font-family:'IBM Plex Mono',monospace;font-size:38px;font-weight:600;}
  .billing-price-period{font-size:14px;color:rgba(255,255,255,0.75);}
  .billing-status{margin:4px 0 20px;font-size:13px;font-weight:600;color:rgba(255,255,255,0.9);}
  .billing-features{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
    margin-bottom:24px;
  }
  .billing-feature{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:rgba(255,255,255,0.92);}
  .billing-check{
    flex:0 0 auto;width:18px;height:18px;border-radius:50%;
    background:rgba(255,255,255,0.18);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;
  }
  .billing-cta{
    width:100%;background:#fff;color:var(--burgundy-dark);
    font-weight:700;padding:13px 16px;border-radius:14px;
  }
  .billing-cta:hover{background:rgba(255,255,255,0.9);}
  @media (max-width:520px){
    .billing-features{grid-template-columns:1fr;}
  }

  /* Fase 98 — tarjetas de comparación de planes (Facturación in-app y,
     eventualmente, cualquier otra pantalla que necesite el mismo patrón).
     .plan-card es exclusiva de esta comparación (no compartida), se edita
     directo. La tarjeta del plan de pago reusa .billing-hero (compartida
     con el precio de la landing) — ver overrides scopeados a #panel-billing
     más abajo, mismo criterio que .landing-pricing-grid .billing-hero. */
  .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:640px;margin:0 auto;}
  .plan-card{
    position:relative;background:var(--card);border:1px solid rgba(22,35,59,0.18);
    border-radius:4px;padding:26px 24px;
  }
  .plan-badge{
    position:absolute;top:-10px;right:16px;background:var(--brass);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;
    padding:3px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;
  }
  .plan-name{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:16px;color:var(--ink);margin-bottom:10px;}
  .plan-price{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:30px;color:var(--ink);margin-bottom:16px;}
  .plan-price span{font-size:12px;font-weight:600;color:var(--ink-soft);}
  .plan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-soft);}
  .plan-feats li::before{content:'— ';color:var(--brass);}
  @media (max-width:640px){ .plan-grid{grid-template-columns:1fr;} }

  /* Fase 101 — fila real de método de pago/próximo cobro debajo de las
     tarjetas de plan; exclusiva de esta pantalla. */
  .billing-info-panel{
    background:var(--card);border:1px solid rgba(22,35,59,0.18);border-radius:4px;
    max-width:640px;margin:20px auto 0;
  }
  .billing-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding:18px 22px;border-top:1px dashed rgba(22,35,59,0.16);font-size:14.5px;
  }
  .billing-row:first-child{border-top:none;}
  .billing-row>span:first-child{color:var(--ink-soft);}
  .billing-row-btn{
    display:inline-flex;align-items:center;gap:7px;flex:none;
    font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;font-weight:700;
    color:var(--burgundy);background:transparent;border:1.5px solid rgba(217,96,60,0.4);
    border-radius:4px;padding:10px 16px;cursor:pointer;
  }
  .billing-row-btn:hover{background:rgba(217,96,60,0.08);border-color:var(--burgundy);}
  .billing-row-btn svg{width:15px;height:15px;}
  .billing-row-btn svg{flex:none;}

  /* Solo esta instancia de .billing-hero se aplana — la de la landing
     (.landing-pricing-grid .billing-hero) sigue con su propio degradado. */
  #panel-billing .billing-hero{position:relative;max-width:none;margin:0;overflow:visible;box-shadow:none;}
  #panel-billing .billing-hero-body{background:var(--card);color:var(--ink);padding:26px 24px;}
  #panel-billing .billing-price-amount{font-size:30px;}
  #panel-billing .billing-price-period,
  #panel-billing .landing-annual-hint,
  #panel-billing .billing-status{color:var(--ink-soft);}
  #panel-billing .billing-features{grid-template-columns:1fr;}
  #panel-billing .billing-feature{color:var(--ink);}
  #panel-billing .billing-check{background:rgba(217,96,60,0.14);color:var(--brass);}
  #panel-billing .billing-cta{background:var(--burgundy);color:#fff;border-radius:4px;}
  #panel-billing .billing-cta:hover{background:var(--burgundy-dark);}

  .brand-color-row{display:flex;align-items:center;gap:10px;}
  input[type=color]{
    width:40px;height:40px;padding:2px;border-radius:10px;
    border:1px solid var(--paper-dark);background:var(--card);cursor:pointer;
  }
  .brand-color-row span{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft);}

  .dash-greeting{padding-bottom:16px;margin-bottom:20px;border-bottom:2px dashed rgba(22,35,59,0.22);}
  .dash-greeting h2{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:22px;margin:0 0 4px;color:var(--ink);}
  .dash-greeting p{margin:0;font-size:13px;color:var(--ink-soft);}
  .dash-limit-banner{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:rgba(22,35,59,0.08);border:1px solid rgba(22,35,59,0.25);
    border-radius:14px;padding:10px 16px;margin-bottom:18px;
    font-size:13px;color:var(--ink);
  }
  .dash-limit-banner .btn.small{padding:6px 14px;font-size:12px;}

  .company-logo-preview{
    width:72px;
    height:72px;
    border-radius:4px;
    background:var(--burgundy);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:26px;
    font-weight:700;
    overflow:hidden;
    flex:0 0 auto;
  }
  .company-logo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
  .company-avatar-preview{
    width:72px;height:72px;border-radius:50%;
    background:var(--burgundy);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;
    overflow:hidden;flex:0 0 auto;margin-bottom:4px;
  }
  .company-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block;}
  .field-static{
    padding:10px 12px;border-radius:10px;
    background:rgba(22,35,59,0.06);border:1px solid rgba(22,35,59,0.14);
    font-size:14px;color:var(--ink-soft);
  }
  .settings-lang-toggle{display:flex;gap:8px;}
  .settings-lang-toggle .lang-btn{flex:none;padding:9px 20px;}
  .sidebar-logout-btn{
    display:flex;align-items:center;gap:10px;width:100%;
    font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;
    padding:11px 12px;background:transparent;color:var(--ink-soft);
    border:none;cursor:pointer;border-radius:12px;
    transition:background .15s ease,color .15s ease;
  }
  .sidebar-logout-btn:hover{background:rgba(178,58,72,0.1);color:var(--burgundy-dark);}
  .sidebar-logout-btn svg{flex:0 0 auto;}
  .company-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
  /* La fila de lista genérica — la reutilizan Clientes, Facturas, Catálogo,
     Couriers, Envíos, Citas, Encargos y la Bitácora, cada uno con su propio
     contenido interno pero la misma cáscara visual. `position:relative` es
     lo que le da contexto a `.row-menu{position:absolute}` de más abajo —
     el "⋮" de cada fila se posiciona relativo A ESTA fila, no a la página. */
  .client-row{
    position:relative;
    background:var(--card);
    border:1px solid rgba(22,35,59,0.14);
    border-radius:4px;
    padding:18px 52px 16px 20px;
    display:flex;
    flex-direction:column;
    gap:14px;
    box-shadow:none;
  }
  .client-row--followup-due{border-color:var(--red);box-shadow:0 2px 10px rgba(9,20,30,0.06), inset 3px 0 0 var(--red);}
  .followup-badge{
    align-self:flex-start;background:rgba(178,58,58,0.12);color:var(--red);
    font-size:11px;font-weight:700;letter-spacing:0.3px;
    padding:3px 10px;border-radius:999px;
  }
  .pending-badge{
    display:inline-flex;align-items:center;
    background:rgba(22,35,59,0.14);color:var(--burgundy-dark);
    font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;
    padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:6px;
  }
  .client-row-top{display:flex;flex-direction:column;gap:20px;}
  .client-row-head{display:flex;flex-direction:column;gap:6px;}
  .client-row .cname{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:19px;line-height:1.1;}
  .client-row .meta{
    font-size:12px;
    line-height:1.5;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.6px;
    max-width:980px;
  }
  .client-row-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    align-items:start;
  }
  .client-stat{
    padding-top:6px;
    border-top:1px solid rgba(22,35,59,0.20);
  }
  .client-row .clabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:5px;}
  .client-row .cval{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:700;}
  .client-row .cval.pos{color:var(--green);}
  .client-row .cval.neg{color:var(--red);}
  .client-row input[type=number]{width:100%;}
  .client-row .invoice-total{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:700;color:var(--ink);}
  .client-actions .btn.danger{color:var(--red);border-color:rgba(178,58,58,0.35);}
  .client-actions .btn.danger:hover{background:rgba(178,58,58,0.08);}
  .client-actions{
    display:flex;
    gap:14px;
    align-items:stretch;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding-top:4px;
  }
  .client-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:136px;
    min-height:50px;
    padding:13px 22px;
    font-size:14px;
  }
  @media (max-width:960px){ .client-row-stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:760px){
    .client-row{padding:18px 48px 16px 16px;}
    .client-row-stats{grid-template-columns:1fr;}
    .client-actions .btn{min-width:0;flex:1;}
  }
  @media (max-width:760px){ .insights{grid-template-columns:1fr 1fr;} }

  /* Fase 93 — layout llevado a 3 pestañas reales (Facturas/Catálogo/
     Clientes), escopado por el id de cada lista porque .client-row/.cname/
     etc. las reusan ~10 módulos más (Couriers, Envíos, Citas, Gastos...).
     Fase 96 — la tipografía y el borde-izquierdo de acento de esta fase
     quedaron redundantes/inconsistentes una vez que la base de .client-row
     y .cname ya es plana e IBM Plex Sans para toda la app; se retiraron,
     dejando solo lo que sí es exclusivo de cada pestaña (swatch/avatar/
     píldora de ticket), ahora en IBM Plex Mono. */

  /* --- Facturas: número de factura como etiqueta mono --- */
  #invoicesList .ticket-num{
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:0.68em;
    background:rgba(22,35,59,0.10);color:var(--burgundy);
    padding:2px 8px;border-radius:6px;margin-right:6px;letter-spacing:0.3px;
    display:inline-block;vertical-align:middle;
  }

  /* --- Catálogo: grilla de tarjetas en vez de lista vertical --- */
  #catalogList{flex-direction:row;flex-wrap:wrap;}
  #catalogList .client-row{
    flex:1 1 260px;max-width:calc(33.333% - 10px);overflow:hidden;
  }
  #catalogList .cat-swatch{
    width:calc(100% + 72px);height:56px;margin:-18px -52px 12px -20px;
  }
  @media (max-width:920px){ #catalogList .client-row{max-width:calc(50% - 7px);} }
  @media (max-width:640px){
    #catalogList .client-row{max-width:100%;}
    #catalogList .cat-swatch{height:36px;margin-bottom:8px;}
    /* El "⋮" (.row-menu, top:14px de fábrica) se centraba en el swatch
       original de 56px — al achicarlo a 36px se salía por debajo, montado
       sobre el nombre del producto. Se re-centra solo para Catálogo en
       mobile; el resto de las listas que reusan .row-menu no cambian. */
    #catalogList .row-menu{top:1px;}
  }

  /* --- Clientes: iniciales en círculo, como directorio --- */
  #clientsList .client-row-name-line{display:flex;align-items:flex-start;gap:12px;}
  #clientsList .client-avatar{
    width:38px;height:38px;border-radius:50%;flex:none;margin-top:1px;
    background:rgba(22,35,59,0.12);color:var(--burgundy-dark);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;
  }

  .print-invoice-host{position:fixed;left:-99999px;top:0;width:1px;height:1px;overflow:hidden;}
  body.printing-invoice .wrap,
  body.printing-invoice .overlay,
  body.printing-invoice .toast{visibility:hidden;}
  .print-receipt{
    width:100%;
    max-width:800px;
    margin:0 auto;
    padding:0 0 18px;
    color:var(--ink);
    background:#fff;
    font-family:'Manrope',sans-serif;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    position:relative;
  }
  .print-watermark{
    position:absolute;
    inset:0;
    z-index:-1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }
  .print-watermark span{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:90px;
    letter-spacing:2px;
    color:rgba(22,35,59,0.07);
    white-space:nowrap;
    transform:rotate(-28deg);
  }
  .print-topbar{
    height:8px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--burgundy-dark) 0%, var(--burgundy) 34%, var(--brass) 68%, var(--brass-light) 100%);
    margin-bottom:16px;
  }
  .print-header{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 220px;
    gap:16px;
    align-items:center;
    padding:18px 20px;
    border:1px solid rgba(22,35,59,0.16);
    border-radius:20px;
    background:linear-gradient(135deg, #EEF6F7 0%, #fff 65%);
    margin-bottom:18px;
  }
  .print-logo{
    width:72px;
    height:72px;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:'Space Grotesk',sans-serif;
    font-size:22px;
    font-weight:800;
    box-shadow:0 10px 20px rgba(15,27,46,0.14);
    border:2px solid #fff;
  }
  .print-logo img{width:100%;height:100%;object-fit:cover;display:block;}
  .print-brand-wrap{min-width:0;}
  .public-receipt-wrap .print-receipt{
    max-width:100%;
    margin:0;
  }
  .print-eyebrow{
    font-size:11px;
    letter-spacing:2.4px;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:700;
    margin-bottom:8px;
  }
  .print-brand{
    font-size:28px;
    font-weight:800;
    line-height:1.05;
    color:var(--burgundy-dark);
    margin-bottom:8px;
    letter-spacing:-0.3px;
  }
  .print-address{
    font-size:12px;
    line-height:1.45;
    color:var(--ink-soft);
    max-width:420px;
  }
  .print-meta-card{
    border:1px solid rgba(22,35,59,0.16);
    border-radius:14px;
    background:#fff;
    padding:12px 14px;
  }
  .print-meta-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:baseline;
    padding:8px 0;
    border-bottom:1px solid rgba(22,35,59,0.12);
  }
  .print-meta-row:last-child{border-bottom:none;padding-bottom:0;}
  .print-meta-row span{
    font-size:10px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:700;
  }
  .print-meta-row strong{
    font-size:12px;
    color:var(--ink);
    font-weight:800;
    text-align:right;
  }
  .print-info-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
    gap:12px;
    margin-bottom:18px;
  }
  .print-info-card{
    border:1px solid rgba(22,35,59,0.16);
    border-radius:18px;
    background:#fff;
    padding:16px 18px;
  }
  .print-info-card-wide{
    background:linear-gradient(180deg, #fff 0%, #EEF6F7 100%);
  }
  .print-label{
    display:block;
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:8px;
    font-weight:700;
  }
  .print-customer{
    font-size:18px;
    font-weight:800;
    letter-spacing:-0.2px;
    color:var(--ink);
    margin-bottom:4px;
  }
  .print-company-meta{
    font-size:12px;
    line-height:1.5;
    color:var(--ink-soft);
  }
  .print-table{margin-top:2px;}
  .print-table-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 56px 88px 88px 88px;
    gap:10px;
    align-items:center;
    padding:12px 14px;
    background:#EEF6F7;
    border:1px solid rgba(22,35,59,0.16);
    border-radius:16px 16px 0 0;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:800;
  }
  .print-table-body{
    border:1px solid rgba(22,35,59,0.16);
    border-top:none;
    border-radius:0 0 16px 16px;
    overflow:hidden;
    background:#fff;
  }
  .print-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 56px 88px 88px 88px;
    gap:10px;
    align-items:center;
    padding:12px 14px;
    border-top:1px solid rgba(22,35,59,0.10);
    font-size:13px;
    color:var(--ink);
  }
  .print-row:first-child{border-top:none;}
  .print-row:nth-child(odd){background:#F3F9FA;}
  .print-desc{font-weight:600;}
  .print-qty,.print-money{
    text-align:right;
    font-family:'Space Mono',monospace;
  }
  .print-empty{
    padding:18px 14px;
    color:var(--ink-soft);
    font-size:13px;
  }
  .print-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:14px;
    align-items:start;
    margin-top:16px;
  }
  .print-note-card,
  .print-totals-card{
    border:1px solid rgba(22,35,59,0.16);
    border-radius:18px;
    background:#fff;
    padding:16px 18px;
  }
  .print-note-card{
    background:linear-gradient(180deg, #fff 0%, #EEF6F7 100%);
  }
  .print-note-title{
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:700;
    margin-bottom:8px;
  }
  .print-note-text{
    font-size:12px;
    line-height:1.6;
    color:var(--ink-soft);
  }
  .print-totals-card{padding:14px 16px;}
  .print-summary-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    font-size:13px;
    color:var(--ink);
  }
  .print-summary-row span{
    color:var(--ink-soft);
  }
  .print-summary-row strong{
    font-family:'Space Mono',monospace;
    font-weight:700;
  }
  .print-total-banner{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-top:10px;
    padding:14px 16px;
    border-radius:14px;
    background:linear-gradient(90deg, var(--burgundy-dark) 0%, var(--burgundy) 100%);
    color:#fff;
  }
  .print-total-banner span{
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
  }
  .print-total-banner strong{
    font-size:24px;
    font-weight:900;
    font-family:'Space Grotesk',sans-serif;
  }
  .print-footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid rgba(22,35,59,0.16);
    font-size:10px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:1.2px;
    flex-wrap:wrap;
  }

  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--card);color:var(--ink);padding:14px 20px;border-radius:14px;
    display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;
    opacity:0;pointer-events:none;max-width:calc(100vw - 40px);
    border:1px solid rgba(22,35,59,0.18);box-shadow:0 16px 40px rgba(15,27,46,0.18);
    transition:opacity .2s ease, transform .2s ease;z-index:60;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
  .toast-icon{
    flex:0 0 auto;width:22px;height:22px;border-radius:50%;
    background:rgba(22,35,59,0.16);color:var(--burgundy-dark);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  }
  .confirm-modal{max-width:400px;text-align:center;padding:32px 30px 28px;}
  .confirm-icon{
    width:44px;height:44px;border-radius:50%;margin:0 auto 16px;
    background:rgba(178,58,58,0.12);color:var(--red);
    display:flex;align-items:center;justify-content:center;
    font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;
  }
  .confirm-modal p{font-size:14px;color:var(--ink);line-height:1.5;margin:0;}
  .confirm-modal .modal-actions{justify-content:center;}

  .scanner-modal{max-width:420px;text-align:center;}
  .scanner-modal .hint{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
  #scannerViewport{min-height:280px;border-radius:12px;overflow:hidden;background:#000;}

  @media (prefers-reduced-motion: reduce){ .btn{transition:none;} }
  @media (max-width:520px){ .row2{grid-template-columns:1fr;} }
  @media (max-width:1100px){
    .print-header{grid-template-columns:72px minmax(0,1fr); }
    .print-meta-card{grid-column:1 / -1;}
    .print-info-grid,
    .print-summary{grid-template-columns:1fr;}
    .print-table-head,
    .print-row{grid-template-columns:minmax(0,1fr) 44px 72px 72px 72px;}
    .print-total-banner{flex-direction:column;align-items:flex-start;}
  }
  @media print{
    body *{visibility:hidden !important;}
    .print-area,.print-area *{visibility:visible !important;}
    .print-invoice-host{
      position:absolute !important;
      left:0 !important;
      top:0 !important;
      width:100% !important;
      height:auto !important;
      overflow:visible !important;
      padding:10mm !important;
      box-sizing:border-box !important;
    }
    @page{ margin: 0; }
    .print-area{
      width:100% !important;
      color:#1f1a20 !important;
      background:#fff !important;
      padding:0 !important;
    }
    .print-receipt{
      max-width:none !important;
      padding:0 !important;
      margin:0 !important;
    }
    .print-table-head,
    .print-row{
      grid-template-columns:minmax(0,1fr) 44px 76px 76px 76px !important;
      gap:8px !important;
    }
    .print-header{grid-template-columns:72px minmax(0,1fr) 210px !important; }
    .print-eyebrow{font-size:10px !important;}
    .print-brand{font-size:22px !important;}
    .print-address{max-width:none !important;}
    .print-info-grid,
    .print-summary{grid-template-columns:1fr !important;}
    .print-customer{font-size:18px !important;}
    .print-total-banner{flex-direction:column;align-items:flex-start;}
  }

/* ===== Catálogo / Facturas (inventario opcional + generador de boletas) ===== */
.check-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);font-weight:600;margin:8px 0;}
.field.inline{display:flex;align-items:center;gap:8px;}
.field.inline label{margin:0;}

.invoice-builder{background:var(--card);border:1px solid rgba(22,35,59,0.14);border-radius:18px;padding:26px;margin-bottom:18px;box-shadow:0 2px 10px rgba(9,20,30,0.06);}
.invoice-builder-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
@media (max-width:900px){ .invoice-builder-grid{grid-template-columns:1fr;} }

/* Fase 74 — los 9 formularios principales de "+ Nuevo/a ___" ahora abren
   como modal (antes se expandían en línea empujando la página) — la misma
   tarjeta .invoice-builder/.catalog-form-card de siempre entra directo
   dentro de un .overlay ya existente (sin necesitar además .modal, que
   tiene su propio ancho angosto). Acotado con el combinador ">" a propósito:
   los mini-formularios que siguen anidados EN LÍNEA dentro de un panel de
   gestión (categorías, bodegas, tipos de cita, etc.) no viven dentro de un
   .overlay, así que estas reglas no los tocan. */
.overlay > .invoice-builder, .overlay > .catalog-form-card{
  max-height:90vh; overflow-y:auto; width:100%; max-width:840px; margin-bottom:0;
}
.overlay > #invoiceBuilder{ max-width:1100px; } /* tiene un grid de 2 columnas + panel lateral, necesita más ancho que el resto */

.ib-section{border-top:1px solid rgba(22,35,59,0.12);padding-top:18px;margin-top:18px;}
.ib-section:first-child{border-top:none;margin-top:0;padding-top:0;}
.ib-section h3{font-family:'Space Grotesk',sans-serif;font-size:15px;margin:0 0 12px;color:var(--burgundy-dark);}
.ib-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.ib-section-head h3{margin:0;}
.ib-section-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ib-section textarea{width:100%;min-height:70px;border-radius:12px;border:1px solid rgba(22,35,59,0.25);padding:10px 12px;font-family:inherit;font-size:13px;resize:vertical;}

.ib-items{display:flex;flex-direction:column;gap:10px;}
.item-row-ib{background:rgba(22,35,59,0.05);border:1px solid rgba(22,35,59,0.15);border-radius:14px;padding:10px 12px;}
/* .ib-cat-filter (filtro de categoría por renglón) y .ib-cat-search (buscar
   por nombre, ambos pedidos de cliente 2026-09) caen dentro de este mismo
   contenedor — el select hereda el estilo de "select" de abajo, y el
   input de texto necesita su propia regla porque el selector de abajo es
   específico a <select>. */
.ib-cat-picker{margin-bottom:8px;display:flex;flex-direction:column;gap:6px;}
.ib-cat-picker select{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;}
.ib-cat-picker input[type=text]{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;font-family:inherit;box-sizing:border-box;}
.ib-warehouse-select{background-color:rgba(22,35,59,0.05);}
.ib-item-fields{display:grid;grid-template-columns:2fr 60px 90px 70px 90px 34px;gap:8px;align-items:center;}
/* .ib-remove hereda .btn.small.ghost, que centra su contenido por el
   comportamiento por defecto de <button> — suficiente para texto, pero no
   garantiza que un solo glifo como "✕" quede realmente centrado (varía por
   fuente/renderizado). Mismo criterio de centrado real que ya usa
   .row-menu-btn (flexbox + tamaño fijo) en vez de padding asimétrico.
   Selector .btn.small.ib-remove (no solo .ib-remove) a propósito: .btn.small
   ya trae padding:7px 14px con la misma especificidad de 2 clases — con
   una sola clase, .ib-remove pierde ese empate y el padding viejo se cuela. */
.btn.small.ib-remove{width:34px;height:34px;padding:0;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;}
.ib-item-fields input[type=text],.ib-item-fields input[type=number]{padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;width:100%;}
.ib-tax-check{margin:0;font-size:11px;white-space:nowrap;}
.ib-line-total{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;text-align:right;}
@media (max-width:640px){ .ib-item-fields{grid-template-columns:1fr 1fr;} }

.ib-items-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

/* Escaneo de factura de compra con IA (pedido de un cliente, 2026-09) —
   miniaturas de los recibos ya adjuntos a la factura (comprobante interno,
   nunca aparece en la factura impresa al cliente) y el panel de revisión de
   productos detectados antes de agregarlos como renglones. */
.receipt-thumb-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.receipt-thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid rgba(22,35,59,0.25);}
.receipt-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block;}
.receipt-thumb-remove{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(63,76,104,0.72);color:#fff;font-size:10px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.receipt-review-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;margin-bottom:4px;}
.receipt-review-row{display:grid;grid-template-columns:auto 1fr 90px;gap:8px;align-items:center;}
.receipt-review-row input[type=text],.receipt-review-row input[type=number]{
  padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;width:100%;
}
.receipt-review-row input[type=checkbox]{width:auto;accent-color:var(--burgundy);}

/* Escaneo vía código QR (Fase 70) — el modal de la computadora que muestra
   el código, y el botón grande de la página que abre el teléfono al
   escanearlo (esa página reusa .public-card/.public-title del resto de
   los modos públicos, solo necesita el botón). */
.receipt-qr-wrap{display:flex;justify-content:center;margin:14px 0;}
.receipt-qr-canvas{border-radius:12px;border:1px solid rgba(22,35,59,0.18);}
.receipt-qr-link{
  width:100%;box-sizing:border-box;padding:8px 10px;border-radius:10px;
  border:1px solid rgba(22,35,59,0.25);font-size:12px;font-family:'Space Mono',monospace;
  color:var(--ink-soft);text-align:center;background:var(--paper-dark);margin-bottom:4px;
}
.receipt-upload-btn{display:inline-flex;margin-top:18px;padding:16px 28px;font-size:15px;}

/* Panel unificado "Carga rápida con IA" (Fase 71) — 2 pestañas (Foto/Recibo,
   Usar el teléfono) sobre el mismo modal, en vez de 2 botones separados. */
.receipt-capture-modal{max-width:480px;position:relative;}
.receipt-capture-close{
  position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;
  background:transparent;border:none;color:var(--ink-soft);font-size:14px;cursor:pointer;
}
.receipt-capture-close:hover{background:rgba(22,35,59,0.08);color:var(--ink);}
.receipt-capture-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-right:28px;}
.receipt-capture-icon{
  flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:rgba(160,58,58,0.12);
}
.receipt-capture-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--burgundy-dark);}
.receipt-capture-subtitle{margin:2px 0 0;font-size:13px;color:var(--ink-soft);}
.receipt-capture-tabs{display:flex;gap:6px;background:var(--paper-dark);border-radius:999px;padding:4px;margin-bottom:18px;}
.receipt-capture-tab{
  flex:1;border:none;background:transparent;border-radius:999px;padding:9px 10px;
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.receipt-capture-tab.active{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(15,27,46,0.14);}
.receipt-capture-dropzone{padding:34px 16px;margin-left:0;}
.receipt-capture-paste-hint{margin:12px 0 0;font-size:12px;color:var(--ink-soft);text-align:center;}
.receipt-capture-progress{margin:12px 0 0;font-size:13px;color:var(--ink-soft);text-align:center;font-weight:600;}
.ib-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.ib-row{display:grid;grid-template-columns:1fr 120px 34px;gap:8px;}
.ib-row input{padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;}
.ib-rows-empty{font-size:12px;color:var(--ink-soft);font-style:italic;margin-bottom:10px;}

.ib-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;border-top:1px solid rgba(22,35,59,0.12);padding-top:18px;}

.invoice-summary-col{background:rgba(22,35,59,0.05);border:1px solid rgba(22,35,59,0.15);border-radius:16px;padding:18px;position:sticky;top:20px;}
.invoice-summary-col h3{font-family:'Space Grotesk',sans-serif;font-size:14px;margin:0 0 14px;color:var(--burgundy-dark);}
.ib-sum-block{margin-bottom:10px;font-size:13px;}
.ib-sum-block .clabel{display:block;}
.ib-sum-line{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px dashed rgba(22,35,59,0.18);}
.ib-sum-total{display:flex;justify-content:space-between;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:var(--burgundy-dark);border-top:2px solid var(--brass);margin-top:10px;padding-top:12px;}

.pay-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;border-radius:999px;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;vertical-align:middle;margin-left:6px;}
.pay-badge-pending{background:rgba(107,119,148,0.14);color:var(--ink-soft);}
.pay-badge-partial{background:rgba(178,58,58,0.12);color:var(--red);}
.pay-badge-paid{background:rgba(75,122,90,0.16);color:var(--green);}
.pay-badge-open{background:rgba(75,122,90,0.16);color:var(--green);}
.pay-badge-closed{background:rgba(107,119,148,0.14);color:var(--ink-soft);}

.low-stock-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;border-radius:999px;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;vertical-align:middle;margin-left:6px;background:rgba(178,58,58,0.12);color:var(--red);}

.payment-list{display:flex;flex-direction:column;gap:8px;margin:14px 0;max-height:220px;overflow-y:auto;}
.payment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(22,35,59,0.16);border-radius:12px;padding:10px 12px;background:var(--paper);}
.payment-row-info{display:flex;flex-direction:column;gap:2px;}
.payment-row-amount{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;color:var(--ink);}
.payment-row-meta{font-size:11px;color:var(--ink-soft);}
.payment-row-empty{font-size:12px;color:var(--ink-soft);font-style:italic;margin:14px 0;}

.aging-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;border-radius:999px;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;vertical-align:middle;margin-left:6px;}
.aging-badge-fresh{background:rgba(75,122,90,0.16);color:var(--green);}
.aging-badge-mid{background:rgba(184,134,11,0.14);color:#8A6414;}
.aging-badge-late{background:rgba(178,58,58,0.12);color:var(--red);}
.aging-badge-critical{background:var(--red);color:#fff;}

.pkg-status-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  display:inline-flex;align-items:center;min-height:22px;
  padding:0 24px 0 10px;border-radius:999px;border:none;
  font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;
  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='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:12px;
}
.pkg-badge-purchased{background:rgba(107,119,148,0.14);color:var(--ink-soft);}
.pkg-badge-warehouse{background:rgba(184,134,11,0.14);color:#8A6414;}
.pkg-badge-transit{background:rgba(75,122,90,0.16);color:var(--green);}
.pkg-badge-customs{background:rgba(178,58,58,0.12);color:var(--red);}
.pkg-badge-delivered{background:var(--green);color:#fff;}

.autotrack-badge{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  background:rgba(75,122,90,0.12);color:var(--green);font-size:11px;font-weight:700;
}

.pkg-label{
  max-width:380px;margin:0 auto;padding:24px;border:2px dashed rgba(22,35,59,0.4);border-radius:18px;
  font-family:'Manrope',sans-serif;color:var(--ink);
}
.pkg-label-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
/* Fase 64 — logo opcional de la empresa (company.logoUrl) junto al nombre
   en texto; se omite por completo si no hay logo cargado (ver logoHtml en
   renderPackageLabelHtml()). object-fit:contain para que un logo no
   cuadrado no se deforme. */
.pkg-label-brand-wrap{display:flex;align-items:center;gap:8px;min-width:0;}
/* Fase 91 — el logo se veía muy pequeño junto al nombre de la empresa
   (pedido real del usuario); subido de 32px/22px a 44px/36px. */
.pkg-label-logo{width:44px;height:44px;object-fit:contain;border-radius:6px;flex:none;}
.pkg-label--thermal .pkg-label-logo{width:36px;height:36px;}
.pkg-label-brand{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:18px;}
.pkg-label-eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.pkg-label-sender{font-size:11px;color:var(--ink-soft);margin-bottom:12px;}
.pkg-label-barcode-wrap{
  display:flex;justify-content:center;align-items:center;padding:10px 14px;margin-bottom:6px;
  border-radius:12px;background:rgba(22,35,59,0.08);border:1px solid rgba(22,35,59,0.18);
}
.pkg-label-barcode-wrap svg{width:100%;height:46px;}
.pkg-label-tracking-text{
  font-family:'Space Mono',monospace;font-size:14px;font-weight:700;letter-spacing:1px;
  text-align:center;margin-bottom:16px;color:var(--ink-soft);
}
.pkg-label-section-title{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:4px;}
.pkg-label-client{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:6px;}
.pkg-label-contact{font-size:12px;color:var(--ink-soft);margin-bottom:14px;}
.pkg-label-details{border-top:1px dashed rgba(22,35,59,0.3);padding-top:12px;}
.pkg-label-line{font-size:13px;margin-bottom:4px;}
.pkg-label-footer{margin-top:16px;font-size:11px;color:var(--ink-soft);text-align:right;}

/* Variante para impresoras térmicas de labels (Fase 20) — pensada para un
   rollo de 4x6", sin el borde/padding decorativo del formato carta. El
   tamaño de página real (@page) se inyecta por JS justo antes de imprimir,
   ver printPackageLabel() en app.js — @page no se puede condicionar con un
   selector de clase en CSS estático. */
.pkg-label.pkg-label--thermal{
  max-width:none;width:100%;margin:0;padding:8mm;border:none;border-radius:0;
  box-sizing:border-box;
}
.pkg-label--thermal .pkg-label-barcode-wrap svg{height:62px;}
.pkg-label--thermal .pkg-label-tracking-text{font-size:17px;}
.pkg-label--thermal .pkg-label-client{font-size:22px;}

/* Novedades (Fase 22) */
.changelog-entry{padding:14px 0;border-top:1px solid var(--paper-dark);}
.changelog-entry:first-child{border-top:none;padding-top:0;}
.changelog-entry-date{font-size:11px;letter-spacing:0.6px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:4px;}
.changelog-entry-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px;}
.changelog-entry-body{font-size:13.5px;color:var(--ink);white-space:pre-line;line-height:1.5;}

.invoice-status-filter{display:flex;gap:6px;flex-wrap:wrap;}
.invoice-status-filter .lang-btn{flex:none;padding:9px 16px;white-space:nowrap;}

.finance-total-badge{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:var(--burgundy-dark);}

.route-group-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid rgba(22,35,59,0.16);border-radius:14px;
  padding:14px 18px;box-shadow:0 4px 14px rgba(22,35,59,0.05);
}
.route-group-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.route-group-row .cname{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;}
.route-group-meta{font-size:13px;line-height:1.4;color:var(--ink-soft);}

.print-report-meta{font-size:13px;color:var(--ink-soft);margin-bottom:16px;}
.print-report-table-wrap{
  border:1px solid rgba(22,35,59,0.16);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.print-report-table{width:100%;border-collapse:collapse;font-size:13px;}
.print-report-table th{
  text-align:left;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-soft);font-weight:800;padding:12px 14px;background:#EEF6F7;
  border-bottom:1px solid rgba(22,35,59,0.16);
}
.print-report-table td{padding:12px 14px;border-top:1px solid rgba(22,35,59,0.10);vertical-align:top;color:var(--ink);}
.print-report-table tbody tr:first-child td{border-top:none;}
.print-report-table tbody tr:nth-child(even){background:#F3F9FA;}

.apt-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;border-radius:999px;font-size:10px;letter-spacing:0.6px;text-transform:uppercase;font-weight:700;vertical-align:middle;margin-left:6px;}
.apt-badge-compra{background:rgba(75,122,90,0.16);color:var(--green);}
.apt-badge-recogida{background:rgba(184,134,11,0.14);color:#8A6414;}
.apt-badge-entrega{background:rgba(15,27,46,0.16);color:var(--burgundy-dark);}
.apt-badge-custom{background:rgba(107,119,148,0.14);color:var(--ink-soft);}
.apt-badge-pending{background:rgba(184,134,11,0.14);color:#8A6414;}
.apt-badge-rejected{background:rgba(178,58,58,0.12);color:var(--red);}

@media (max-width:600px){
  .controls{flex-direction:column;align-items:stretch;}
  .controls label.check-row{align-self:flex-start;}
  /* Fase 112 — pedido del usuario: esta tarjeta (compartida por Facturas,
     Catálogo, Clientes, Couriers, Envíos, Citas) se veía "ocupada" en
     móvil con la fila de filtros partida en 2 líneas (flex-wrap, arreglo
     de la sesión anterior). Se cambia a una tira que se desliza
     horizontalmente en una sola línea — patrón común de chips en apps
     móviles — en vez de envolver; nada se corta, solo se desliza. */
  .invoice-status-filter{
    flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* .invoice-status-filter es a la vez ítem flex de .controls (columna,
       align-items:stretch) Y contenedor flex de sus propias píldoras —
       align-items:stretch del padre no alcanzó a encogerlo (min-width:0 no
       fue suficiente, probablemente por el margin negativo): con
       flex-wrap:nowrap adentro, seguía tomando su ancho de contenido
       (~407px) en vez de los ~311px disponibles, empujando toda la página.
       width:100% explícito sí fuerza el ancho correcto, dejando que el
       contenido de adentro desborde y scrollee en vez de la página. */
    min-width:0;width:100%;
  }
  .invoice-status-filter::-webkit-scrollbar{display:none;}
  .invoice-status-filter .lang-btn{flex:none;}
}

.citas-completed .cname{text-decoration:line-through;color:var(--ink-soft);}

.agenda-date-header{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:0.4px;
  color:var(--ink-soft);margin:18px 0 8px;display:flex;align-items:center;gap:8px;
}
.agenda-date-header:first-child{margin-top:0;}
.agenda-section-header{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
  color:var(--ink);margin:24px 0 10px;padding-top:16px;border-top:1px solid rgba(22,35,59,0.14);
}
.agenda-today-tag{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:0.6px;
  background:var(--burgundy);color:#fff;vertical-align:middle;
}
.agenda-pending-banner{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  margin:14px 0 0;padding:12px 16px;border-radius:10px;
  background:rgba(184,134,11,0.12);border:1px solid rgba(184,134,11,0.28);
  color:#8A6414;font-family:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-align:left;
}
.agenda-pending-banner:hover{background:rgba(184,134,11,0.18);}

.upcoming-appointments-card{
  background:var(--card);border:1px solid rgba(22,35,59,0.14);
  border-radius:4px;padding:16px 18px;margin-bottom:16px;box-shadow:none;
}

.finance-controls{align-items:flex-start;}
.finance-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.finance-custom-dates{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.finance-custom-dates input[type=date]{min-height:44px;padding:8px 10px;}
.finance-list{display:flex;flex-direction:column;gap:12px;}
.finance-list-empty{font-size:13px;color:var(--ink-soft);font-style:italic;padding:16px 4px;}
/* Fase 97 — botón "ver todos" del Resumen por cliente, ver
   renderFinanceClientSummary() en app.js. */
.finance-list-more{
  display:block;width:100%;margin-top:10px;padding:10px;
  background:transparent;border:1px dashed rgba(22,35,59,0.28);border-radius:4px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:var(--burgundy);cursor:pointer;text-align:center;
}
.finance-list-more:hover{background:rgba(217,96,60,0.08);}

/* Fase 97 — acordeón por mes del libro contable, ver renderLedgerJournalList()
   en app.js. Cada .ledger-month-body ya contiene .client-row normales. */
.ledger-month-group{border:1px solid rgba(22,35,59,0.14);border-radius:4px;margin-bottom:10px;overflow:hidden;}
.ledger-month-group:last-child{margin-bottom:0;}
.ledger-month-header{
  width:100%;display:flex;align-items:center;gap:10px;
  background:var(--card);border:none;cursor:pointer;
  padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:700;
  color:var(--ink);text-align:left;
}
.ledger-month-header:hover{background:rgba(22,35,59,0.04);}
.ledger-month-chevron{color:var(--brass);flex:none;width:10px;}
.ledger-month-name{flex:1;}
.ledger-month-count{color:var(--ink-soft);font-weight:600;font-size:11px;}
.ledger-month-total{font-weight:700;}
.ledger-month-body{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px dashed rgba(22,35,59,0.14);}
.ledger-month-body[hidden]{display:none;}
/* Fase 89 — aviso de posibles gastos duplicados con "Compras" (ver
   renderFinanceDuplicateWarning() en app.js); usa --red porque es una
   alerta de datos, no la marca de la app. */
.finance-duplicate-warning{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  background:rgba(178,58,58,0.06);border:1px solid rgba(178,58,58,0.28);
  border-left:3px solid var(--red);border-radius:10px;
  padding:14px 16px;margin:0 0 16px;
}
.finance-warning-body{flex:1;min-width:220px;}
.finance-warning-body b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px;}
.finance-warning-body p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.finance-warning-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.finance-warning-dismiss{
  background:transparent;border:none;color:var(--ink-soft);cursor:pointer;
  font-size:15px;line-height:1;padding:4px 6px;
}
.finance-warning-dismiss:hover{color:var(--ink);}
/* Fase 55 — aclaración permanente bajo el título de una sección de Finanzas
   (no un estado vacío, por eso no reusa .finance-list-empty ni su cursiva). */
.finance-section-note{font-size:12px;color:var(--ink-soft);margin:-8px 4px 10px;}
/* Fase 57 — vista "fórmula" del detalle de una tarjeta (Ticket promedio,
   Ganancia neta, Margen): esas 3 no son una suma de facturas/gastos, son
   un cálculo sobre otras tarjetas, así que se muestran como ecuación en
   vez de una lista de filas (ver financeStatFormulaHtml() en app.js). */
.stat-detail-formula{display:flex;flex-direction:column;gap:2px;}
.stat-detail-formula-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 4px;font-size:13px;color:var(--ink-soft);border-bottom:1px dashed rgba(22,35,59,0.16);}
.stat-detail-formula-line strong{font-family:'Space Mono',monospace;color:var(--ink);white-space:nowrap;}
.stat-detail-formula-result{display:flex;justify-content:space-between;gap:12px;padding:12px 4px 4px;font-size:14px;font-weight:700;color:var(--ink);margin-top:4px;}
.stat-detail-formula-result strong{font-family:'Space Mono',monospace;font-size:18px;color:var(--burgundy-dark);}
/* Fase 58 — etiqueta de dos renglones (título + fecha) dentro de una fila
   .stat-detail-formula-line, para la vista "lista" (Facturas, Ingresos,
   Comisión, Impuestos, Costo de mercancía, Gastos) — la vista "fórmula"
   sigue usando una etiqueta simple de un renglón, sin estas clases. */
.stat-detail-line-label{font-weight:700;color:var(--ink);}
.stat-detail-line-meta{display:block;font-weight:400;font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* Fase 59 — rediseño de Finanzas: gráfico de tendencia + Cuentas por cobrar
   agrupadas por antigüedad + fusión de las 2 tarjetas de cliente. */
/* Toggle de 2 opciones (Mensual/Anual, Todo/Este período) — reusa el mismo
   .lang-btn ya usado para el switch ES/EN, es el mismo patrón visual. */
.finance-chart-mode-toggle{display:flex;gap:6px;margin-bottom:12px;}
.finance-chart-mode-toggle .lang-btn{flex:none;padding:6px 14px;}
.finance-chart-host{position:relative;height:280px;}
@media (max-width:600px){ .finance-chart-host{height:220px;} }

/* Grupo colapsable de "Cuentas por cobrar" por rango de antigüedad — arranca
   cerrado (solo el encabezado, con conteo + subtotal) y se expande al hacer
   click (ver renderFinanceReceivables()/toggle-aging-group en app.js). */
.finance-aging-group{border:1px solid rgba(22,35,59,0.16);border-radius:14px;overflow:hidden;margin-bottom:10px;background:var(--card);}
.finance-aging-group-head{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;
}
.finance-aging-group-head .aging-badge{margin-left:0;}
.finance-aging-group-count{font-size:13px;color:var(--ink-soft);flex:1;}
.finance-aging-group-total{font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);}
.finance-aging-group-chevron{color:var(--ink-soft);transition:transform .15s ease;}
.finance-aging-group.open .finance-aging-group-chevron{transform:rotate(180deg);}
.finance-aging-group-body{display:none;flex-direction:column;gap:10px;padding:0 12px 12px;}
.finance-aging-group.open .finance-aging-group-body{display:flex;}

/* Fase 61 — buscador + filtro de categoría sobre "Gastos" (mismo criterio
   que .finance-filter-row de arriba, reusado tal cual); gastos agrupados
   por categoría reusan .finance-aging-group de arriba, con un punto de
   color propio en vez del .aging-badge (las categorías de gastos no tienen
   un rango fijo de 4 valores como la antigüedad, son las que el usuario
   haya creado). */
.finance-expense-filter-row{margin-bottom:14px;}
.finance-expense-filter-row select{flex:none;width:auto;min-width:180px;}
.finance-expense-filter-row input[type=text]{flex:1;min-width:200px;}
.finance-expense-group-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.finance-expense-group-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);}

/* "Gastos por categoría": dona (Chart.js) + las mismas cajitas .insight de
   siempre haciendo de leyenda detallada, lado a lado en desktop y
   apiladas en pantallas angostas. */
.finance-category-chart-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.finance-chart-host-donut{width:200px;height:200px;flex:none;}
.finance-category-chart-row .insights{flex:1;min-width:220px;margin-bottom:0;}
.insight-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}

/* Fase 67 — calendario mensual de Citas (renderCitasCalendar() en app.js).
   Cuadrícula de 7 columnas hecha a mano, sin librería — mismo criterio del
   resto del proyecto de no agregar una dependencia si no hace falta (a
   diferencia de los gráficos, aquí no se necesitan ejes/tooltips/curvas,
   solo una grilla con celdas clickeables). */
.citas-calendar-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.citas-calendar-month-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;min-width:130px;text-align:center;}
.citas-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.citas-calendar-weekday{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;text-align:center;padding:4px 0;}
.citas-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.citas-calendar-cell{
  min-height:78px;border:1px solid rgba(22,35,59,0.14);border-radius:10px;
  padding:6px;cursor:pointer;background:var(--card);
  display:flex;flex-direction:column;gap:3px;transition:background .15s ease;
}
.citas-calendar-cell:hover{background:rgba(22,35,59,0.07);}
.citas-calendar-cell-outside{opacity:0.4;}
.citas-calendar-cell-today{border-color:var(--burgundy);border-width:2px;}
.citas-calendar-daynum{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--ink);}
.citas-calendar-cell-today .citas-calendar-daynum{color:var(--burgundy-dark);}
.citas-calendar-chips{display:flex;flex-direction:column;gap:2px;flex:1;overflow:hidden;}
.citas-calendar-chip{
  font-size:10px;padding:2px 5px;border-radius:5px;background:rgba(22,35,59,0.12);
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.citas-calendar-chip:hover{background:rgba(22,35,59,0.22);}
.citas-calendar-more{font-size:10px;color:var(--ink-soft);padding:0 5px;}
@media (max-width:700px){
  .citas-calendar-cell{min-height:40px;align-items:center;justify-content:center;}
  .citas-calendar-chips{display:none;}
  .citas-calendar-cell[data-has-apts="1"] .citas-calendar-daynum::after{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--burgundy);margin:2px auto 0;}
}

.catalog-list,.invoices-list{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.dashboard-block{margin-bottom:20px;}
/* Fase 96 — .stat/.chartbox/.insight ya son planos en la base (compartida
   con Finanzas/Admin), así que los overrides de la Fase 94 quedaron
   redundantes y se retiraron; solo queda el modificador que sí es único
   de esta pantalla. */
.dashboard-block .stat .value.coral{color:var(--coral);}
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px;}
@media (max-width:900px){ .dash-grid{grid-template-columns:1fr;} }
.dash-recent{display:flex;flex-direction:column;gap:2px;}
.dash-recent-row{display:grid;grid-template-columns:100px 1fr 110px 90px;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid rgba(22,35,59,0.10);font-size:13px;}
.dash-recent-row:last-child{border-bottom:none;}
.dr-number{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:11px;background:rgba(217,96,60,0.12);color:var(--brass);padding:3px 8px;border-radius:4px;display:inline-block;}
.dr-client{font-weight:600;}
.dr-date{color:var(--ink-soft);font-size:12px;}
.dr-total{font-family:'Space Mono',monospace;font-weight:700;text-align:right;}
/* Fase 112 — a 640px el grid de 4 columnas (número/cliente/fecha/total)
   dejaba caer la fecha pero seguía siendo un grid de 2 columnas: con solo 3
   ítems visibles, el total quedaba en la fila de abajo pegado a la
   izquierda en vez de alineado a la derecha (reportado por el usuario en
   una captura). Se vuelve un flex row simple: número+cliente a la
   izquierda (cliente se trunca con "…" si el nombre es largo), total
   empujado al extremo derecho con margin-left:auto — una sola fila limpia. */
@media (max-width:640px){
  .dash-recent-row{display:flex;align-items:center;gap:8px;}
  .dr-client{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dr-total{margin-left:auto;flex:none;}
  .dr-date{display:none;}
}

.catalog-form-card{background:var(--card);border:1px solid rgba(22,35,59,0.14);border-radius:18px;padding:20px 22px;margin-bottom:16px;box-shadow:0 2px 10px rgba(9,20,30,0.06);}
.catalog-form-card .row2{margin-bottom:16px;}
.catalog-form-card .field{margin-bottom:16px;}
.catalog-form-card .check-row{margin:4px 0 2px;}
.warehouse-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid rgba(22,35,59,0.16);border-radius:14px;
  padding:16px 20px;box-shadow:0 4px 14px rgba(22,35,59,0.05);
}
.warehouse-row .btn.danger{color:var(--red);border-color:rgba(178,58,58,0.35);}
.warehouse-row .btn.danger:hover{background:rgba(178,58,58,0.08);}
.warehouse-row-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 10px;border-radius:999px;background:rgba(22,35,59,0.10);color:var(--ink);font-size:12px;margin:2px 4px 2px 0;}
.chip-remove{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:11px;padding:0;line-height:1;}
.chip-remove:hover{color:var(--red);}
.catcat-subchips{display:flex;flex-wrap:wrap;margin-top:4px;}
.catcat-add-sub{display:flex;gap:8px;margin-top:8px;}
.catcat-add-sub input{flex:1;min-width:0;}
.warehouse-row .cname{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;}
/* Fase 54 — input de edición in-place del nombre de una categoría de gasto
   (renderExpenseCategoriesManager), mismo look que los demás inputs de texto
   sueltos dentro de un .warehouse-row (ver .catcat-add-sub input arriba). */
.expcat-edit-input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:14px;font-family:inherit;box-sizing:border-box;}
.warehouse-meta{font-size:13px;line-height:1.4;color:var(--ink-soft);}
#catStockByWarehouseHost{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.cat-stock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cat-stock-wh-name{font-size:13px;color:var(--ink);flex:1;}
.cat-stock-row input[type=number]{width:100px;padding:8px 10px;border-radius:10px;border:1px solid rgba(22,35,59,0.25);font-size:13px;}

/* ---------- Panel de Superadmin (Fase 6-7) ---------- */
.admin-view{min-height:100vh;background:var(--paper);}
.admin-topbar{
  display:flex;align-items:center;gap:16px;padding:16px 28px;
  background:var(--card);border-bottom:1px solid rgba(22,35,59,0.16);
}
.admin-topbar-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--burgundy-dark);flex:1;}
.admin-topbar-user{font-size:13px;color:var(--ink-soft);}
.admin-main{max-width:1180px;margin:0 auto;padding:28px;}
.admin-companies-list{display:flex;flex-direction:column;gap:12px;}
.admin-modal-company-name{font-size:13px;color:var(--ink-soft);margin:-10px 0 18px;}
.admin-view-company-stats{display:flex;flex-direction:column;gap:8px;margin:14px 0;}
.admin-view-company-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;padding:10px 12px;border-radius:10px;background:rgba(22,35,59,0.05);
}
.admin-view-company-row strong{font-family:'Space Mono',monospace;color:var(--ink);}
.admin-feedback-message{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;}
.admin-feedback-reply{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(22,35,59,0.06);border:1px solid rgba(22,35,59,0.15);}
.admin-feedback-reply-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.admin-feedback-reply-form{margin-top:12px;}
.admin-feedback-reply-input{width:100%;min-height:80px;border-radius:12px;border:1px solid rgba(22,35,59,0.25);padding:10px 12px;font-family:inherit;font-size:13px;resize:vertical;}
.catalog-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px;padding-top:16px;border-top:1px solid rgba(22,35,59,0.12);}