/* ==========================================================================
   StockPro · Rediseño UX/UI v9.17.0 — "Obsidian"
   Estilo Vercel / Linear (clean dark mode)

   POR QUÉ ESTE ARCHIVO EXISTE Y NO ES TAILWIND
   La especificación pedía Tailwind CSS + React. El sitio corre con esta
   política de seguridad (archivo _headers, ya en producción):

       script-src 'self' https://cdn.jsdelivr.net;
       style-src  'self' 'unsafe-inline' https://fonts.googleapis.com;

   Tailwind por CDN inyecta un <style> generado en tiempo de ejecución y
   necesita 'unsafe-eval' para su compilador; React sin empaquetador necesita
   lo mismo. Abrir el CSP para eso lo abriría para TODO el dominio, incluido
   el panel donde se ven costos, proveedores y ventas. Así que los MISMOS
   valores de diseño (obsidiana #090D16, tarjetas #111827, borde slate-800/60,
   azul #3B82F6, rounded-xl / rounded-lg, gap-4, p-6, duration-200) están
   escritos aquí como CSS propio. El resultado en pantalla es el pedido.

   ORDEN DE CARGA: va DESPUÉS de styles.css. Gana por orden de aparición,
   no por !important, salvo donde styles.css ya traía un !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Tipografía. Inter ya venía cargada; JetBrains Mono se suma en index.html
       para que los números de precios y métricas queden alineados en columna
       (las cifras tabulares evitan que el total "baile" al cambiar de dígito). */
    --font-primary: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    /* Radios: rounded-xl (12px) en contenedores, rounded-lg (8px) en
       controles. Se reescriben los tres tokens que ya usaba el proyecto para
       que el cambio llegue a los 63 lugares donde están puestos. */
    --radius-sm: 6px;
    --radius-md: 8px;    /* inputs y botones  → rounded-lg */
    --radius-lg: 12px;   /* tarjetas y cajas  → rounded-xl */
    --radius-full: 9999px;

    /* Transiciones: duration-200 */
    --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Acentos */
    --ux-azul: #3B82F6;           /* acento principal, estados activos */
    --ux-azul-fuerte: #2563EB;
    --ux-azul-suave: rgba(59, 130, 246, 0.12);
    --ux-esmeralda: #10B981;      /* cobro y acciones críticas de dinero */
    --ux-esmeralda-fuerte: #059669;
    --ux-coral: #EF4444;          /* demoras, agotados */
    --ux-ambar: #F59E0B;          /* advertencias */
    --ux-slate-800: #1E293B;
    --ux-borde: rgba(30, 41, 59, 0.6);   /* border-slate-800/60 */

    /* Sombras: shadow-xl con negro al 20% */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

    /* El acento del sistema deja de ser verde. El verde queda reservado para
       cobrar; si se usa en todos lados, deja de significar "aquí está el
       dinero". */
    --accent-primary: #3B82F6;
    --accent-secondary: #60A5FA;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;
}

.theme-dark {
    --bg-primary: #090D16;      /* Deep Obsidian */
    --bg-secondary: #111827;    /* tarjetas y contenedores */
    --bg-tertiary: #172033;
    --bg-sidebar: #0B111C;

    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    --border-color: rgba(30, 41, 59, 0.6);
    --border-hover: rgba(59, 130, 246, 0.4);

    /* Cristal: backdrop-blur-md sobre slate-900/70 */
    --glass-bg: #111827;
    --glass-border: rgba(30, 41, 59, 0.6);
    --glass-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

    --input-bg: #0D1420;
    --input-border: rgba(30, 41, 59, 0.9);
    --input-focus-border: #3B82F6;

    --card-gradient-cyan: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(59, 130, 246, 0) 100%);
    --card-gradient-warning: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 100%);
    --card-gradient-blue: linear-gradient(135deg, rgba(99, 102, 241, 0.10) 0%, rgba(99, 102, 241, 0) 100%);

    --btn-secondary-bg: #172033;
    --btn-secondary-hover: #1E293B;

    --scrollbar-thumb: #1E293B;
    --scrollbar-track: #090D16;
}

/* --------------------------------------------------------------------------
   2. SUPERFICIES
   -------------------------------------------------------------------------- */
body.theme-dark {
    background-color: #090D16;
    background-image:
        radial-gradient(900px 400px at 78% -8%, rgba(59, 130, 246, 0.06), transparent 60%),
        radial-gradient(700px 340px at 4% 0%, rgba(99, 102, 241, 0.05), transparent 55%);
    background-attachment: fixed;
}

.theme-dark .shadow-glass,
.theme-dark .dashboard-card,
.theme-dark .stat-card,
.theme-dark .content-card,
.theme-dark .glass-panel,
.theme-dark .table-container {
    background-color: #111827;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* El desenfoque se reserva para las barras flotantes. En una tarjeta
       opaca no se ve y sí cuesta pintarla en equipos de mostrador. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.theme-dark .dashboard-card:hover,
.theme-dark .stat-card:hover {
    border-color: rgba(59, 130, 246, 0.28);
}

/* Cristal de verdad: solo barra lateral y barras fijas. */
.theme-dark .sidebar {
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--ux-borde);
}

.theme-dark .sync-status-bar,
.theme-dark .use-helper-bar {
    background-color: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   3. MARCA
   El logo era verde porque el sistema era verde. Ahora el verde significa
   cobro, así que la marca pasa al azul del acento.
   -------------------------------------------------------------------------- */
.theme-dark .logo-icon { color: var(--ux-azul); }
.theme-dark .logo-text span { color: var(--ux-azul); }

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA Y NÚMEROS
   -------------------------------------------------------------------------- */
.theme-dark h1, .theme-dark h2, .theme-dark h3 {
    letter-spacing: -0.02em;
}

.theme-dark .section-header h1 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Métricas, precios y totales en monoespaciada con cifras tabulares. */
.theme-dark .stat-value,
.theme-dark .dashboard-direct-total-v870,
.theme-dark .dashboard-comparison-values-v860,
.theme-dark .pos-summary-total,
.theme-dark .quote-total,
.theme-dark .purchase-order-total,
.theme-dark .restaurant-order-total-v900,
.theme-dark .coworking-kpis-v9100 strong,
.theme-dark .kpis-ejecutivos-v9150 .stat-value,
.theme-dark .ux-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Columnas numéricas de las tablas: alineadas a la derecha y tabulares, que
   es lo que permite comparar cantidades de un vistazo. */
.theme-dark td[data-label="Precio"],
.theme-dark td[data-label="Costo"],
.theme-dark td[data-label="Stock"],
.theme-dark td[data-label="Total"],
.theme-dark td[data-label="Cantidad"],
.theme-dark td[data-label="Existencia"] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.theme-dark .btn {
    border-radius: var(--radius-md);
    transition: var(--transition-smooth);
    font-weight: 500;
}

.theme-dark .btn-primary {
    background: var(--ux-azul);
    border-color: var(--ux-azul);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.theme-dark .btn-primary:hover {
    background: var(--ux-azul-fuerte);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transform: none;   /* Linear/Vercel no levantan los botones al pasar */
}

.theme-dark .btn-secondary {
    background-color: #172033;
    border-color: var(--ux-borde);
    color: var(--text-primary);
}

.theme-dark .btn-secondary:hover {
    background-color: #1E293B;
    border-color: rgba(148, 163, 184, 0.3);
    transform: none;
}

.theme-dark .btn-danger {
    background: var(--ux-coral);
    border-color: var(--ux-coral);
    color: #FFFFFF;
}

.theme-dark .btn:focus-visible,
.theme-dark .nav-link:focus-visible,
.theme-dark .input-field:focus-visible {
    outline: 2px solid var(--ux-azul);
    outline-offset: 2px;
}

/* Botón de dinero. Es el único verde del sistema. */
.theme-dark .btn-cobro-v9170 {
    background: var(--ux-esmeralda);
    border-color: var(--ux-esmeralda);
    color: #04231A;
    font-weight: 700;
}

.theme-dark .btn-cobro-v9170:hover {
    background: var(--ux-esmeralda-fuerte);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   6. CAMPOS
   -------------------------------------------------------------------------- */
.theme-dark .input-field,
.theme-dark input[type="text"],
.theme-dark input[type="number"],
.theme-dark input[type="date"],
.theme-dark input[type="email"],
.theme-dark input[type="search"],
.theme-dark input[type="tel"],
.theme-dark select,
.theme-dark textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.theme-dark .input-field:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
    border-color: var(--ux-azul);
    box-shadow: 0 0 0 3px var(--ux-azul-suave);
    outline: none;
}

.theme-dark ::placeholder { color: #475569; }

/* --------------------------------------------------------------------------
   7. NAVEGACIÓN
   -------------------------------------------------------------------------- */
.theme-dark .nav-link {
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-fast);
}

.theme-dark .nav-link:hover {
    background-color: rgba(148, 163, 184, 0.08);
    color: var(--text-primary);
}

/* OJO: styles.css línea 301 usa el atajo `background: linear-gradient(...)`
   verde→cian. Poner solo background-color NO lo apaga, porque el degradado
   vive en background-image. Hay que usar el atajo también. */
.theme-dark .nav-link.active {
    background: var(--ux-azul-suave);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--ux-azul);
}

/* Los íconos del menú venían de nueve colores distintos (una variable
   --nav-icon-accent-v858 por pantalla). En un menú de 29 renglones eso es
   ruido: ningún color significa nada porque todos son distintos. Se unifican
   en gris y el color queda para señalar dónde estás parado. */
.theme-dark .sidebar-nav .nav-link .nav-icon,
.theme-dark .sidebar-nav .nav-link .nav-glyph-v900 {
    color: var(--text-muted);
    opacity: 1;
}

.theme-dark .sidebar-nav .nav-link:hover .nav-icon { color: var(--text-secondary); }

.theme-dark .sidebar-nav .nav-link.active .nav-icon,
.theme-dark .sidebar-nav .nav-link.active .nav-glyph-v900 { color: var(--ux-azul); }

.theme-dark .nav-group-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. TABLAS
   -------------------------------------------------------------------------- */
.theme-dark table thead th {
    background-color: #0D1420;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ux-borde);
}

.theme-dark table tbody tr {
    border-bottom: 1px solid rgba(30, 41, 59, 0.45);
    transition: background-color 0.15s ease;
}

.theme-dark table tbody tr:hover { background-color: rgba(59, 130, 246, 0.05); }

/* --------------------------------------------------------------------------
   9. INSIGNIAS DE ESTADO
   -------------------------------------------------------------------------- */
.ux-chip-v9170 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.6;
}

.ux-chip-v9170.es-critico { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; border: 1px solid rgba(239, 68, 68, 0.35); }
.ux-chip-v9170.es-aviso   { background: rgba(245, 158, 11, 0.14); color: #FCD34D; border: 1px solid rgba(245, 158, 11, 0.35); }
.ux-chip-v9170.es-bien    { background: rgba(16, 185, 129, 0.14); color: #6EE7B7; border: 1px solid rgba(16, 185, 129, 0.35); }
.ux-chip-v9170.es-info    { background: rgba(59, 130, 246, 0.14); color: #93C5FD; border: 1px solid rgba(59, 130, 246, 0.35); }
.ux-chip-v9170.es-neutro  { background: rgba(148, 163, 184, 0.12); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, 0.28); }

/* El verde queda RESERVADO para el dinero. La píldora del escáner era verde
   brillante y competía con el botón de cobro desde la misma pantalla. */
.theme-dark .scanner-mode-pill {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93C5FD;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. RESPIRO
   La especificación pide gap-4 (16px) y p-6 (24px) parejos.
   -------------------------------------------------------------------------- */
/* El !important es obligado aquí: styles.css línea 8332 ya trae
   `.stats-grid { gap: 18px !important }`, y sin esto gana él aunque
   carguemos después. */
.theme-dark .stats-grid,
.theme-dark .dashboard-row { gap: 16px !important; }
.theme-dark .dashboard-card { padding: 24px; }

/* Corrige el alto heredado: .dashboard-card traía min-height 320px y las
   tarjetas de KPI salían enormes para tres líneas de texto. */
.theme-dark .kpis-ejecutivos-v9150 .dashboard-card,
.theme-dark .dashboard-cards .dashboard-card { min-height: 0; }

/* --------------------------------------------------------------------------
   11. BARRA LATERAL EN ACORDEONES
   -------------------------------------------------------------------------- */
.ux-grupo-v9170 { margin-top: 4px; }
.ux-grupo-v9170[hidden] { display: none; }

.ux-grupo-boton-v9170 {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-grupo-boton-v9170:hover {
    background-color: rgba(148, 163, 184, 0.07);
    color: var(--text-secondary);
}

.ux-grupo-icono-v9170 { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.75; }
.ux-grupo-texto-v9170 { flex: 1; min-width: 0; }

.ux-grupo-galon-v9170 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-grupo-boton-v9170[aria-expanded="false"] .ux-grupo-galon-v9170 { transform: rotate(-90deg); }

/* El grupo que contiene la pantalla abierta se marca con una línea de acento
   para no perderse cuando hay cuatro grupos colapsados. */
.ux-grupo-v9170.tiene-activo > .ux-grupo-boton-v9170 {
    color: var(--text-secondary);
}
.ux-grupo-v9170.tiene-activo > .ux-grupo-boton-v9170 .ux-grupo-icono-v9170 {
    color: var(--ux-azul);
    opacity: 1;
}

.ux-grupo-lista-v9170 {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--ux-borde);
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ux-grupo-lista-v9170[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. SELECTOR DE MODO DE TRABAJO
   -------------------------------------------------------------------------- */
.ux-topbar-v9170 {
    position: sticky;
    top: 12px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.ux-modos-v9170 {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
}

.ux-modos-v9170[hidden] { display: none; }

.ux-modo-v9170 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-modo-v9170[hidden] { display: none; }
.ux-modo-v9170:hover { color: var(--text-primary); background-color: rgba(148, 163, 184, 0.08); }

.ux-modo-v9170.activo {
    background-color: var(--ux-azul);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.ux-modo-glifo-v9170 { font-size: 13px; line-height: 1; }

/* Lo que el modo de trabajo apaga. Clase aparte del atributo `hidden` a
   propósito: así nunca se pisan las reglas de plan y de rol. */
.ux-modo-oculto-v9170 { display: none !important; }

@media (max-width: 900px) {
    .ux-modo-texto-v9170 { display: none; }
    .ux-modo-v9170 { padding: 8px 12px; }
    .ux-modo-glifo-v9170 { font-size: 16px; }
    .ux-topbar-v9170 { position: static; }
}

/* --------------------------------------------------------------------------
   13. CAJA POS · rejilla táctil de accesos rápidos
   -------------------------------------------------------------------------- */
.ux-rapidos-v9170 { min-height: 0; margin-bottom: 16px; }

.ux-rapidos-encabezado-v9170 p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.ux-rejilla-v9170 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* Objetivo táctil de 72px de alto: es lo mínimo para acertar con el dedo
   sin mirar, que es como se cobra en hora pico. */
.ux-tarjeta-v9170 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 84px;
    padding: 12px;
    background-color: #172033;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-tarjeta-v9170:hover {
    background-color: #1E293B;
    border-color: rgba(59, 130, 246, 0.45);
}

.ux-tarjeta-v9170:active { transform: scale(0.975); }

.ux-tarjeta-nombre-v9170 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ux-tarjeta-precio-v9170 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ux-esmeralda);
}

.ux-tarjeta-v9170.esta-agotada { opacity: 0.55; }
.ux-tarjeta-v9170.esta-agotada .ux-tarjeta-precio-v9170 { color: var(--text-muted); }

/* La ✕ de quitar solo aparece en modo edición. */
.ux-tarjeta-quitar-v9170 { display: none; }

.ux-rapidos-v9170.esta-editando .ux-tarjeta-quitar-v9170 {
    display: grid;
    place-items: center;
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    background: var(--ux-coral);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.ux-rapidos-v9170.esta-editando .ux-tarjeta-v9170 { cursor: default; }

.ux-rapidos-buscador-v9170 { margin-bottom: 14px; }

.ux-rapidos-sugerencias-v9170 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.ux-sugerencia-v9170 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-sugerencia-v9170:hover { border-color: var(--ux-azul); background-color: #172033; }
.ux-sugerencia-v9170 span { color: var(--ux-esmeralda); font-weight: 600; }

.ux-rapidos-vacio-v9170 {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px 4px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 1280px) { .ux-rejilla-v9170 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ux-rejilla-v9170 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   14. CAJA POS · cajones laterales
   -------------------------------------------------------------------------- */
.ux-cajon-v9170 { position: fixed; inset: 0; z-index: 200; }
.ux-cajon-v9170[hidden] { display: none; }

.ux-cajon-fondo-v9170 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(2, 6, 16, 0.55);
    border: 0;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ux-cajon-v9170.abierto .ux-cajon-fondo-v9170 { opacity: 1; }

.ux-cajon-caja-v9170 {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(520px, 92vw);
    height: 100%;
    background-color: #111827;
    border-left: 1px solid var(--ux-borde);
    box-shadow: -24px 0 48px -12px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-cajon-v9170.abierto .ux-cajon-caja-v9170 { transform: translateX(0); }

.ux-cajon-encabezado-v9170 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ux-borde);
}

.ux-cajon-encabezado-v9170 h3 { font-size: 16px; font-weight: 600; margin: 0; }

.ux-cajon-cerrar-v9170 {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-cajon-cerrar-v9170:hover { background: #172033; color: var(--text-primary); }

.ux-cajon-cuerpo-v9170 { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }

/* --------------------------------------------------------------------------
   15. CAJA POS · botón de cobro
   El único bloque verde de la aplicación. La tecla se pinta con ::after
   porque app.js reescribe el textContent del botón mientras cobra.
   -------------------------------------------------------------------------- */
.theme-dark .ux-cobrar-v9170 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    padding: 16px 66px 16px 22px;
    background: var(--ux-esmeralda);
    border: 1px solid var(--ux-esmeralda);
    border-radius: var(--radius-lg);
    color: #04231A;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.45);
}

.theme-dark .ux-cobrar-v9170:hover {
    background: var(--ux-esmeralda-fuerte);
    color: #FFFFFF;
    box-shadow: 0 10px 26px -6px rgba(16, 185, 129, 0.6);
    transform: none;
}

/* La especificación pedía rotular [F12]. Se rotula F8 a propósito, por dos
   razones concretas:
   1. app.js YA cobra con F8 (manejarAtajoPOS, línea 3093) y la propia caja lo
      anuncia arriba del carrito: "Enter agrega · F8 cobra". Poner F12 en el
      botón contradiría el letrero de al lado.
   2. F12 lo secuestra el navegador para abrir sus herramientas de desarrollo
      y la página no puede impedirlo de forma confiable en Chrome.
   F12 y Ctrl+Enter SÍ quedaron conectados como atajos extra; simplemente no
   se anuncia una tecla que a veces no responde. */
.theme-dark .ux-cobrar-v9170::after {
    content: 'F8';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    background: rgba(4, 35, 26, 0.22);
    border: 1px solid rgba(4, 35, 26, 0.32);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.theme-dark .ux-cobrar-v9170:disabled { opacity: 0.6; }
.theme-dark .ux-cobrar-v9170[aria-busy="true"]::after { content: ''; border: 0; }

@media (max-width: 900px) {
    .theme-dark .ux-cobrar-v9170 { font-size: 17px; min-height: 56px; }
}

/* --------------------------------------------------------------------------
   16. ALTA DE PRODUCTO · pestañas, chips de categoría e interruptor
   -------------------------------------------------------------------------- */
.ux-tabs-v9170 {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--ux-borde);
    overflow-x: auto;
}

.ux-tab-v9170 {
    position: relative;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-tab-v9170:hover { color: var(--text-secondary); background: rgba(148, 163, 184, 0.06); }

.ux-tab-v9170.activo { color: var(--text-primary); font-weight: 600; }

.ux-tab-v9170.activo::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -3px;
    height: 2px;
    background: var(--ux-azul);
    border-radius: 2px;
}

.ux-panel-v9170[hidden] { display: none; }

/* Categorías como chips: el bloque de tarjetas ocupaba media pantalla. */
.theme-dark #category-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-dark #category-radio-group .category-radio-card {
    min-height: 0;
    padding: 7px 14px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-full);
    font-size: 12.5px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.theme-dark #category-radio-group .category-radio-card:hover {
    border-color: rgba(148, 163, 184, 0.4);
}

.theme-dark #category-radio-group .category-radio-card:has(input:checked) {
    background-color: var(--ux-azul-suave);
    border-color: var(--ux-azul);
    color: #FFFFFF;
}

/* Interruptor de modo avanzado */
.ux-avanzado-fila-v9170 { margin-top: 4px; }

.ux-interruptor-v9170 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.ux-interruptor-v9170 input { position: absolute; opacity: 0; width: 0; height: 0; }

.ux-interruptor-pista-v9170 {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    margin-top: 1px;
    background-color: #1E293B;
    border-radius: var(--radius-full);
    transition: background-color 0.2s ease;
}

.ux-interruptor-pista-v9170::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #94A3B8;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.ux-interruptor-v9170 input:checked + .ux-interruptor-pista-v9170 { background-color: var(--ux-azul); }
.ux-interruptor-v9170 input:checked + .ux-interruptor-pista-v9170::after {
    transform: translateX(18px);
    background: #FFFFFF;
}
.ux-interruptor-v9170 input:focus-visible + .ux-interruptor-pista-v9170 {
    outline: 2px solid var(--ux-azul);
    outline-offset: 2px;
}

.ux-interruptor-texto-v9170 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.ux-interruptor-texto-v9170 small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
}

.ux-avanzado-oculto-v9170 { display: none !important; }

/* --------------------------------------------------------------------------
   17. COCINA (KDS) · semáforo de demora
   -------------------------------------------------------------------------- */
.ux-kds-reloj-v9170 {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
}

.ux-kds-reloj-v9170.es-verde { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
.ux-kds-reloj-v9170.es-ambar { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
.ux-kds-reloj-v9170.es-rojo  { background: rgba(239, 68, 68, 0.22);  color: #FCA5A5; }

/* La franja de color va a la izquierda: se distingue de un vistazo desde
   lejos, que es como se mira una pantalla de cocina. */
.theme-dark article.kitchen-ticket-v900.ux-kds-verde { box-shadow: inset 4px 0 0 var(--ux-esmeralda); }
.theme-dark article.kitchen-ticket-v900.ux-kds-ambar { box-shadow: inset 4px 0 0 var(--ux-ambar); }

.theme-dark article.kitchen-ticket-v900.ux-kds-rojo {
    box-shadow: inset 4px 0 0 var(--ux-coral);
    border-color: rgba(239, 68, 68, 0.5);
    animation: ux-kds-late 1.6s ease-in-out infinite;
}

@keyframes ux-kds-late {
    0%, 100% { background-color: #111827; }
    50%      { background-color: rgba(239, 68, 68, 0.10); }
}

/* --------------------------------------------------------------------------
   18. COMANDAS · acciones rápidas
   -------------------------------------------------------------------------- */
.theme-dark .ux-comanda-con-acciones-v9170 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.ux-comanda-acciones-v9170 {
    display: flex;
    gap: 6px;
    margin: 0 0 10px;
    padding: 8px 10px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.ux-accion-comanda-v9170 {
    flex: 1;
    padding: 7px 6px;
    background: #172033;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-accion-comanda-v9170:hover { background: #1E293B; color: var(--text-primary); }

.ux-accion-comanda-v9170.es-cobro {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6EE7B7;
}

.ux-accion-comanda-v9170.es-cobro:hover { background: var(--ux-esmeralda); color: #04231A; }

/* --------------------------------------------------------------------------
   19. SUSCRIPCIONES SaaS · menú de tres puntos
   -------------------------------------------------------------------------- */
.theme-dark .admin-plan-actions.ux-compactada-v9170 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.ux-menu-v9170 { position: relative; }

.ux-menu-boton-v9170 {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: #172033;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-menu-boton-v9170:hover { background: #1E293B; color: var(--text-primary); }

.ux-menu-lista-v9170 {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    padding: 6px;
    background-color: #111827;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.ux-menu-lista-v9170[hidden] { display: none; }

/* Dentro del menú los botones dejan de verse como botones sueltos y pasan a
   ser renglones; conservan su color solo cuando la acción es destructiva. */
.theme-dark .ux-menu-opcion-v9170.btn {
    justify-content: flex-start;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    box-shadow: none;
}

.theme-dark .ux-menu-opcion-v9170.btn:hover {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-primary);
    transform: none;
}

.theme-dark .ux-menu-opcion-v9170.btn-danger { color: #FCA5A5; }
.theme-dark .ux-menu-opcion-v9170.btn-danger:hover { background: rgba(239, 68, 68, 0.14); color: #FECACA; }
.theme-dark .ux-menu-opcion-v9170.is-active { color: var(--ux-azul); font-weight: 600; }
.theme-dark .ux-menu-opcion-v9170.btn:disabled { opacity: 0.45; }

/* --------------------------------------------------------------------------
   20. CRM · conmutador y tablero Kanban
   -------------------------------------------------------------------------- */
.ux-vista-v9170 {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 14px;
    padding: 3px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-md);
}

.ux-vista-boton-v9170 {
    padding: 6px 16px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ux-vista-boton-v9170.activo { background: var(--ux-azul); color: #FFFFFF; font-weight: 600; }

.ux-tablero-v9170 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.ux-tablero-v9170[hidden] { display: none; }

.ux-columna-v9170 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    padding: 12px;
    background-color: #0D1420;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

.ux-columna-v9170.recibe {
    border-color: var(--ux-azul);
    background-color: rgba(59, 130, 246, 0.07);
}

.ux-columna-v9170 > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ux-columna-v9170 > header b {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.ux-columna-cuerpo-v9170 { display: flex; flex-direction: column; gap: 8px; }

.ux-columna-vacia-v9170 {
    margin: 0;
    padding: 18px 4px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.ux-lead-v9170 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background-color: #111827;
    border: 1px solid var(--ux-borde);
    border-radius: var(--radius-lg);
    cursor: grab;
    transition: var(--transition-fast);
}

.ux-lead-v9170:hover { border-color: rgba(59, 130, 246, 0.4); }
.ux-lead-v9170.se-arrastra { opacity: 0.4; cursor: grabbing; }
.ux-lead-v9170 strong { font-size: 13.5px; font-weight: 600; }
.ux-lead-v9170 small { font-size: 11.5px; color: var(--text-muted); }
.ux-lead-v9170 .ux-chip-v9170 { align-self: flex-start; }

.ux-lead-v9170 > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(30, 41, 59, 0.6);
    font-size: 11.5px;
    color: var(--text-secondary);
}

.ux-lead-v9170 > footer a { color: var(--ux-azul); font-weight: 600; text-decoration: none; }
.ux-lead-v9170 > footer a:hover { text-decoration: underline; }

@media (max-width: 1100px) { .ux-tablero-v9170 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ux-tablero-v9170 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   21. INVENTARIO · aviso de stock y orden de compra
   -------------------------------------------------------------------------- */
.ux-aviso-stock-v9170 { margin-left: 8px; vertical-align: middle; }

.theme-dark tr.ux-fila-critica-v9170 > td:first-child { box-shadow: inset 3px 0 0 var(--ux-coral); }
.theme-dark tr.ux-fila-baja-v9170 > td:first-child { box-shadow: inset 3px 0 0 var(--ux-ambar); }
.theme-dark tr.ux-fila-critica-v9170:hover { background-color: rgba(239, 68, 68, 0.06); }

.ux-oc-boton-v9170 { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}