/* =========================================================
   Tema nuevo (rediseño 2026)
   Se carga al final: redefine la paleta antigua con colores
   sobrios tipo programa de caja, y agrega:
   - Modo claro / oscuro (los colores de módulo no cambian)
   - Estilo Moderno (barra arriba) y Clásico (columna grande)
   - Pantalla de venta tipo Eleventa
   ========================================================= */
:root {
  /* Colores por módulo: iguales en claro y oscuro */
  --c-venta: #1f6fd1; --c-preventa: #e07a1f; --c-productos: #7b4bc4; --c-inventario: #1e9e78;
  --c-clientes: #c2185b; --c-compras: #8a6d1f; --c-ruta: #0f8a9c; --c-pedidos: #5c6bc0;
  --c-caja: #2e7d32; --c-reportes: #d32f2f; --c-config: #607d8b; --c-otros: #795548;

  /* Paleta base (claro) — mismos nombres que usaban los módulos */
  --crema: #eef2f7;          /* fondo general */
  --crema-2: #f3f6fa;        /* fondo suave (cabeceras de tabla, chips) */
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --chocolate: #1d2633;      /* texto principal */
  --cacao: #4f5b6c;          /* texto secundario */
  --cacao-claro: #7b8797;    /* texto tenue */
  --borde: #d5dde8;
  --frambuesa: #1f6fd1;      /* color principal (botones primarios) */
  --frambuesa-osc: #1857a6;
  --frambuesa-suave: #e3eefb;
  --menta: #1e9e78; --menta-osc: #157a5c; --menta-suave: #ddf5ec;
  --caramelo: #d98a0b; --caramelo-suave: #fff1d6;
  --rojo: #d32f2f; --rojo-osc: #a82424; --rojo-suave: #fde3e3;
  --azul: #3367b5; --azul-suave: #e3ecfa;
  --total-fondo: #e9f0fa; --total-txt: #1f4e8c;
  --fila-sel: #1f4e8c;

  --fuente-titulo: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fuente: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --radio: 10px; --radio-sm: 7px;
  --sombra: 0 1px 2px rgba(20, 30, 50, .07), 0 3px 10px rgba(20, 30, 50, .05);
  --sombra-alta: 0 18px 44px rgba(10, 20, 40, .28);
  --menu-ancho: 250px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --crema: #0f141b; --crema-2: #1c2531; --superficie: #18202b; --superficie-2: #1f2935;
  --chocolate: #e6ebf2; --cacao: #b4c0cf; --cacao-claro: #8796a8; --borde: #2d3a4a;
  --frambuesa: #2f7fe0; --frambuesa-osc: #5b9cf0; --frambuesa-suave: #17304f;
  --menta-osc: #4fd1a8; --menta-suave: #123a2f;
  --caramelo-suave: #3a2c10;
  --rojo-osc: #ff8a80; --rojo-suave: #3d1717;
  --azul: #7fb3ff; --azul-suave: #172a45;
  --total-fondo: #14243a; --total-txt: #7fb3ff;
  --fila-sel: #2b6cc4;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-theme="dark"] .chip.amarillo,
:root[data-theme="dark"] .texto-amarillo { color: #ffcf6e; }
:root[data-theme="dark"] .aviso-pendientes { color: #ffd99a; border-color: #5a4316; }
:root[data-theme="dark"] .cinta-respaldo { color: #cfe0ff; border-color: #24406b; }
:root[data-theme="dark"] .cinta-todas { color: #cfe0ff; }
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, .65); }

body { background: var(--crema); color: var(--chocolate); font-size: 14px; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.2px; }
input, select, textarea { background: var(--superficie); color: var(--chocolate); }
kbd { font: 700 11px var(--fuente); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 4px; padding: 0 5px; color: var(--cacao); }

/* Botones: menos redondos, más "programa de caja" */
.btn { border-radius: 8px; font-weight: 700; }
.btn-fantasma:hover, .btn-icono:hover { background: var(--crema-2); }
.aviso { background: #1d2633; color: #fff; border-radius: 10px; }
.btn-alertas { background: var(--superficie); color: var(--chocolate); }
.tabla th { background: var(--crema-2); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.tabla tr.fila:hover td { background: var(--superficie-2); }
.tarjeta { border-radius: var(--radio); }
.kpi .kpi-valor { font-weight: 700; }

/* ---------- Encabezado ---------- */
.app { flex-direction: column; }
.enc {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 56px;
  background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 30;
}
.marca { display: flex; align-items: center; gap: 9px; min-width: 0; flex-shrink: 0; }
.enc > * { flex-shrink: 0; }
.enc-sel { min-width: 0; flex-shrink: 1; }
@media (max-width: 1440px) { .enc-sel label { display: none; } .enc-sel select { max-width: 190px; } .sel-estilo span, .btn-enc span { display: none; } .enc-usuario small { display: none; } }
.logo-marca { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-venta); color: #fff; font-size: 19px; flex-shrink: 0; }
.nombre-marca { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
#menuLocal { display: block; font-size: 11.5px; font-weight: 600; color: var(--cacao); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
#menuLocal.editable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.enc-sel { display: flex; gap: 10px; align-items: center; margin-left: 10px; }
.enc-sel label { font-size: 12px; color: var(--cacao); }
.enc-esp { flex: 1; }
.sel-estilo { display: flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.sel-estilo button { border: 0; background: transparent; padding: 7px 10px; font-size: 12.5px; font-weight: 700; color: var(--cacao); cursor: pointer; }
.sel-estilo button.activo { background: var(--c-venta); color: #fff; }
.interruptor { display: flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--superficie-2); border-radius: 999px; padding: 3px 11px 3px 3px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--chocolate); }
.interruptor .bola { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); box-shadow: var(--sombra); font-size: 15px; }
.btn-enc { border: 1px solid var(--borde); background: var(--superficie); color: var(--chocolate); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.btn-enc:hover { background: var(--crema-2); }
.enc-usuario { text-align: right; line-height: 1.2; margin: 0 0 0 4px; font-size: 12px; }
.enc-usuario small { display: block; color: var(--cacao-claro); font-size: 11px; }
.enc-usuario strong { font-size: 13px; display: inline; }
.enc-usuario span { color: var(--cacao); margin-left: 4px; }
.enc-usuario span::before { content: '· '; }

/* Modo demo: etiqueta discreta en el encabezado (antes era una franja) */
.enc .cinta-demo { background: var(--crema-2); color: var(--cacao); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; text-align: left; cursor: help; }

/* Configuración: formulario y vista previa lado a lado en pantallas grandes */
.config-2col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.config-2col .vista-previa-ticket { margin-top: 0; position: sticky; top: 130px; }
.config-caja .fila-campos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 1000px) { .config-2col { grid-template-columns: 1fr; } .config-2col .vista-previa-ticket { position: static; } }

/* ---------- Cuerpo ---------- */
.cuerpo-app { flex: 1; display: flex; min-height: 0; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vista { max-width: none; padding: 16px 18px 24px; }
body.en-venta .vista { padding: 0; display: flex; flex-direction: column; flex: 1; }

/* Banda de color del módulo (como Eleventa: "INVENTARIO", "PRODUCTOS"…) */
.banda-mod { display: flex; align-items: center; gap: 10px; padding: 7px 18px; background: var(--col, var(--c-venta)); color: #fff; }
.banda-mod h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .4px; }
.banda-mod .barra-num { color: #fff; font-size: 18px; }

/* ---------- Menú (común) ---------- */
.menu-lateral { background: var(--superficie-2); color: var(--chocolate); border-right: 1px solid var(--borde); }
.menu-cabecera { border-bottom: 1px solid var(--borde); padding: 12px 14px; }
.menu-cabecera strong { font-family: var(--fuente); font-size: 15px; }
.menu-cerrar { color: var(--chocolate); }
.menu-grupo { color: var(--cacao-claro); margin: 12px 8px 6px; }
.menu-item { color: var(--chocolate); gap: 10px; border-radius: 9px; }
.menu-item .mi-icono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--col); color: #fff; font-size: 15px; flex-shrink: 0; }
.menu-item .mi-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.menu-item .mi-sub { font-size: 11px; font-weight: 600; color: var(--cacao-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item .mi-tecla { margin-left: auto; }
.menu-item:hover { background: var(--crema-2); }
.menu-item.activo { background: var(--col); color: #fff; }
.menu-item.activo .mi-icono { background: rgba(255, 255, 255, .22); }
.menu-item.activo .mi-sub { color: rgba(255, 255, 255, .85); }
.menu-item.activo kbd { background: rgba(255, 255, 255, .2); color: #fff; border-color: transparent; }
.menu-pie { border-top: 1px solid var(--borde); }
.menu-pie .btn-fantasma { color: var(--chocolate); border-color: var(--borde); }
.menu-pie .btn-salir { color: var(--rojo); }

/* ---------- Estilo MODERNO en PC: barra de botones arriba ---------- */
@media (min-width: 861px) { .btn-pers-menu { display: none !important; } }
@media (min-width: 861px) {
  [data-estilo="moderno"] .cuerpo-app { flex-direction: column; }
  [data-estilo="moderno"] .menu-lateral {
    width: auto; height: auto; position: sticky; top: 56px; z-index: 25;
    flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--borde); padding: 5px 8px;
  }
  [data-estilo="moderno"] .menu-cabecera { display: none; }
  [data-estilo="moderno"] .menu-nav { display: flex; gap: 4px; padding: 0; overflow-x: auto; scrollbar-width: thin; flex: 1; }
  [data-estilo="moderno"] .menu-grupo { display: none; }
  [data-estilo="moderno"] .menu-item {
    width: auto; flex-shrink: 0; margin: 0; padding: 5px 9px 5px 6px; gap: 7px;
    border: 1px solid var(--borde); background: var(--superficie); border-radius: 7px; font-size: 13px;
  }
  [data-estilo="moderno"] .menu-item:hover { border-color: var(--col); }
  [data-estilo="moderno"] .menu-item.activo { background: var(--col); border-color: var(--col); }
  [data-estilo="moderno"] .menu-item .mi-icono { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
  [data-estilo="moderno"] .menu-item .mi-sub { display: none; }
  [data-estilo="moderno"] .menu-item .mi-tecla { margin-left: 2px; }
  [data-estilo="moderno"] .menu-pie { display: flex; gap: 6px; border: 0; padding: 0 0 0 8px; flex-shrink: 0; }
  [data-estilo="moderno"] .menu-pie .btn { width: auto; min-height: 34px; padding: 4px 12px; font-size: 13px; }
  [data-estilo="moderno"] .menu-item[data-entrada="inicio"] .mi-nombre { display: none; }
}

/* ---------- Estilo CLÁSICO en PC: columna de botones grandes ---------- */
@media (min-width: 861px) {
  [data-estilo="clasico"] .menu-lateral { position: sticky; top: 56px; height: calc(100vh - 56px); height: calc(100dvh - 56px); }
  [data-estilo="clasico"] .menu-cabecera { display: none; }
  [data-estilo="clasico"] .menu-nav { padding: 8px; }
  [data-estilo="clasico"] .menu-item {
    background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
    padding: 9px 10px; margin-bottom: 6px; text-transform: uppercase; color: var(--col); font-weight: 800; font-size: 14.5px;
  }
  [data-estilo="clasico"] .menu-item .mi-icono { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
  [data-estilo="clasico"] .menu-item .mi-sub { text-transform: none; }
  [data-estilo="clasico"] .menu-item.activo { color: #fff; background: var(--col); }
  [data-estilo="clasico"] .menu-item:hover { border-color: var(--col); }
  [data-estilo="clasico"] .total-venta .monto { font-family: Consolas, 'Courier New', monospace; font-weight: 700; color: #29e3d0; letter-spacing: 0; }
  [data-estilo="clasico"] .total-venta { background: #10151c; color: #29e3d0; }
}

/* ---------- Inicio ---------- */
.inicio-cab { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inicio-cab h2 { font-size: 22px; }
.inicio-cab p { margin: 4px 0 0; }
.inicio-acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.inicio-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ini-kpi { text-align: left; cursor: pointer; background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid var(--col); border-radius: var(--radio); padding: 12px 14px; color: var(--chocolate); box-shadow: var(--sombra); }
.ini-kpi:hover { border-color: var(--col); }
.ini-kpi small { display: block; color: var(--cacao); font-weight: 700; font-size: 12.5px; }
.ini-kpi b { display: block; font-size: 24px; margin: 2px 0; }
.ini-kpi span { font-size: 12px; color: var(--cacao-claro); }
.inicio-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.acceso { position: relative; cursor: pointer; background: var(--superficie); color: var(--chocolate); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: var(--sombra); transition: transform .08s; }
.acceso:hover { border-color: var(--col); transform: translateY(-1px); }
.acceso .ac-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--col); color: #fff; font-size: 25px; }
.acceso strong { font-size: 14.5px; }
.acceso small { font-size: 12px; color: var(--cacao); }
.acceso kbd { position: absolute; top: 8px; right: 8px; }
.inicio-ayuda { margin-top: 16px; font-size: 12.5px; }

/* ---------- Personalizar ---------- */
.pers-atajos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pers-lista, .pers-apariencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.pers-item { display: flex; align-items: center; gap: 9px; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; cursor: pointer; margin: 0; font-weight: 600; color: var(--chocolate); font-size: 13.5px; }
.pers-item:has(input:checked) { border-color: var(--col, var(--c-venta)); background: var(--superficie-2); }
.pers-item input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; }
.pers-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--col, var(--c-config)); color: #fff; font-size: 14px; flex-shrink: 0; }
.pers-item strong { display: block; }
.pers-item small { display: block; color: var(--cacao-claro); font-weight: 600; font-size: 11.5px; }

/* =========================================================
   PANTALLA DE VENTA (tipo Eleventa)
   ========================================================= */
.venta { display: flex; flex-direction: column; flex: 1; min-height: calc(100vh - 110px); min-height: calc(100dvh - 110px); background: var(--superficie); }
.v-banda { --vcol: var(--c-venta); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; background: var(--vcol); color: #fff; }
.venta.preventa .v-banda { --vcol: var(--c-preventa); }
.v-banda .v-tit { font-weight: 800; font-size: 16px; letter-spacing: .3px; }
.v-banda .v-pill { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .2); padding: 3px 9px; border-radius: 999px; }
.v-banda .v-esp { flex: 1; }
.v-caja { font-size: 12.5px; font-weight: 600; opacity: .95; }
.conmutador { display: flex; background: rgba(0, 0, 0, .2); border-radius: 10px; padding: 3px; gap: 3px; }
.conmutador button { border: 0; border-radius: 8px; padding: 7px 16px; font-weight: 800; font-size: 14px; background: transparent; color: #fff; opacity: .85; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.conmutador button.activo { opacity: 1; background: #fff; color: var(--vcol); }
.conmutador kbd { background: transparent; border-color: currentColor; color: inherit; opacity: .75; }
.v-aviso-prev { padding: 6px 12px; background: #fff1e0; color: #8a4a0a; font-size: 13px; font-weight: 600; border-bottom: 1px solid #f3cf9f; }
:root[data-theme="dark"] .v-aviso-prev { background: #3a2610; color: #ffcf99; border-color: #5a3a18; }
.v-bloqueo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--rojo-suave); color: var(--rojo-osc); font-weight: 700; }
.v-bloqueo .btn { margin-left: auto; }

.v-cod { display: flex; gap: 8px; padding: 8px 12px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.v-cod > label { margin: 0; font-weight: 700; color: var(--cacao); white-space: nowrap; }
.v-input { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 4px; border: 2px solid var(--borde); border-radius: 8px; background: var(--superficie); padding: 0 6px 0 10px; }
.v-input:focus-within { border-color: var(--c-venta); box-shadow: 0 0 0 3px var(--frambuesa-suave); }
.venta.preventa .v-input:focus-within { border-color: var(--c-preventa); }
.v-input input { flex: 1; border: 0; outline: 0; background: transparent; padding: 9px 4px; font-size: 18px; min-height: 0; box-shadow: none !important; }
.v-input .fila-boton { display: contents; }
.v-acc { display: flex; gap: 6px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.btn-v { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--chocolate); border-radius: 7px; padding: 6px 10px; font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; min-height: 34px; }
.btn-v:hover { border-color: var(--col, var(--c-venta)); }
.btn-v:disabled { opacity: .45; cursor: not-allowed; }
.btn-v .pt { width: 10px; height: 10px; border-radius: 3px; background: var(--col, var(--cacao)); }
.btn-v.activo { background: var(--col); color: #fff; border-color: var(--col); }
.btn-v.activo kbd { background: rgba(255, 255, 255, .2); color: #fff; border-color: transparent; }
.btn-v.primario { background: var(--c-venta); color: #fff; border-color: var(--c-venta); }

.v-tickets { display: flex; gap: 2px; padding: 6px 12px 0; background: var(--superficie-2); overflow-x: auto; }
.v-tk { border: 1px solid var(--borde); border-bottom: 0; background: var(--crema-2); color: var(--cacao); padding: 6px 14px; border-radius: 7px 7px 0 0; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.v-tk.activo { background: var(--superficie); color: var(--chocolate); }
.v-tk.nuevo { border-style: dashed; background: transparent; }

.v-cuerpo { flex: 1; display: flex; min-height: 0; }
.v-tabla { flex: 1; overflow: auto; min-height: 160px; }
.v-tabla table { width: 100%; border-collapse: collapse; }
.v-tabla th { position: sticky; top: 0; z-index: 1; background: var(--crema-2); text-align: left; font-size: 12px; font-weight: 700; color: var(--cacao); padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.v-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--borde); font-size: 15px; vertical-align: middle; }
.v-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-tabla tbody tr { cursor: pointer; }
.v-tabla tbody tr:hover td { background: var(--superficie-2); }
.v-tabla tbody tr.sel td, .v-tabla tbody tr.sel:hover td { background: var(--fila-sel); color: #fff; }
.v-tabla tr.sel .chip { background: rgba(255, 255, 255, .22); color: #fff; }
.v-tabla tr.sel .v-sub { color: rgba(255, 255, 255, .8); }
.v-tabla .v-sub { display: block; font-size: 12px; color: var(--cacao-claro); }
.v-tabla .v-cant { display: inline-flex; align-items: center; gap: 4px; }
.v-tabla .v-cant button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--chocolate); cursor: pointer; font-weight: 800; }
.v-tabla tr.sel .v-cant button { background: rgba(255, 255, 255, .15); color: #fff; border-color: transparent; }
.v-tabla .v-quitar { border: 0; background: transparent; color: inherit; opacity: .55; cursor: pointer; font-size: 15px; }
.v-tabla .v-quitar:hover { opacity: 1; color: var(--rojo); }
.v-precio-movil { display: none; font-size: 12px; color: var(--cacao-claro); }
.v-tabla tr.sel .v-precio-movil { color: rgba(255,255,255,.8); }
.v-vacio { padding: 50px 20px; text-align: center; color: var(--cacao-claro); }
.v-vacio .grande { font-size: 44px; opacity: .45; }

/* Catálogo táctil (opcional, para tablet o pantallas touch) */
.venta:not(.ver-catalogo) .v-catalogo { display: none; }
.v-catalogo { width: 42%; max-width: 560px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--superficie-2); }
.v-catalogo .pos-cats { padding: 8px 10px 4px; margin: 0; }
.v-catalogo .pos-grilla { flex: 1; overflow: auto; padding: 6px 10px 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.v-catalogo .pos-prod { min-height: 120px; padding: 8px; }

.v-pie { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--borde); background: var(--superficie); align-items: stretch; }
.v-pie-izq { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
.v-cuenta { font-size: 13.5px; color: var(--cacao); }
.v-cuenta b { font-size: 20px; color: var(--c-venta); }
.v-cuenta .v-desc { margin-left: 8px; }
.v-pie-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.v-cobros { display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.btn-cobrar-grande { flex: 1; border: 0; border-radius: 10px; background: var(--c-caja); color: #fff; font-weight: 800; font-size: 20px; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--sombra); cursor: pointer; }
.btn-cobrar-grande:hover { filter: brightness(1.08); }
.btn-cobrar-grande:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-cobrar-grande kbd { background: rgba(255, 255, 255, .2); color: #fff; border-color: transparent; font-size: 12px; }
.venta.preventa .btn-cobrar-grande { background: var(--c-preventa); }
.btn-maquina { border: 2px solid var(--c-venta); background: var(--superficie); color: var(--c-venta); border-radius: 10px; font-weight: 700; padding: 7px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-maquina:disabled { opacity: .5; cursor: not-allowed; }
.total-venta { min-width: 270px; border-radius: 10px; background: var(--total-fondo); color: var(--total-txt); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 6px 18px; }
.total-venta small { font-size: 12px; font-weight: 800; opacity: .85; }
.total-venta .monto { font-size: 54px; font-weight: 300; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.total-venta .neto { font-size: 11.5px; opacity: .8; }
.venta.preventa .total-venta { --total-txt: #b85d0c; }
:root[data-theme="dark"] .venta.preventa .total-venta { --total-txt: #ffb46b; }
.v-estado { display: flex; gap: 16px; align-items: center; padding: 4px 12px; font-size: 12px; color: var(--cacao); background: var(--superficie-2); border-top: 1px solid var(--borde); flex-wrap: wrap; }
.v-estado .ok { color: var(--menta-osc); font-weight: 700; }
.v-estado .v-esp { flex: 1; }

.btn-ia .ic-escanear { width: 22px; height: 22px; display: block; color: var(--c-venta); }
:root[data-theme="dark"] .btn-ia .ic-escanear { color: #7fb3ff; }

/* Billetes y monedas de Chile en el cobro */
.dinero-cl { margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); }
.dc-tit { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.dc-fila { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: center; }
.dc-billete { border: 0; border-radius: 6px; padding: 10px 12px; min-width: 86px; font-weight: 800; font-size: 14px; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.2); }
.dc-billete.b20000 { background: #c46a1a; } .dc-billete.b10000 { background: #1f5fa8; } .dc-billete.b5000 { background: #b8325a; }
.dc-billete.b2000 { background: #6a3f9e; } .dc-billete.b1000 { background: #2f7d4f; }
.dc-moneda { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #9aa3ad; background: radial-gradient(circle at 35% 30%, #f4f6f8, #c4cbd2); color: #1d2633; font-weight: 800; font-size: 12px; cursor: pointer; }
.dc-billete:active, .dc-moneda:active { transform: scale(.96); }
.dc-recibido { font-size: 14px; min-height: 18px; }

/* Ventanas de la venta */
.lista-preventas { display: flex; flex-direction: column; gap: 6px; }
.lp-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--borde); background: var(--superficie); color: var(--chocolate); border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.lp-item:hover { border-color: var(--c-preventa); }
.lp-item b { font-size: 16px; }
.lp-item .lp-total { margin-left: auto; font-weight: 800; font-size: 17px; }
.maq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.maq-op { border: 2px solid var(--borde); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; margin: 0; font-weight: 700; color: var(--chocolate); }
.maq-op:has(input:checked) { border-color: var(--c-venta); background: var(--frambuesa-suave); }
.maq-op input { display: none; }
.maq-op small { font-weight: 600; color: var(--cacao-claro); font-size: 11.5px; }
.cobro-grande { text-align: center; font-size: 46px; font-weight: 300; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }

/* ---------- Alta rápida con cámara y rubros ---------- */
.ar-pasos { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: p; }
.ar-pasos li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--cacao-claro); text-align: center; }
.ar-pasos li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--crema-2); border: 2px solid var(--borde); color: var(--cacao); }
.ar-pasos li.activo { color: var(--c-venta); } .ar-pasos li.activo span { background: var(--c-venta); border-color: var(--c-venta); color: #fff; }
.ar-pasos li.hecho span { background: var(--c-caja); border-color: var(--c-caja); color: #fff; }
.ar-ayuda { font-size: 15px; margin: 0 0 12px; }
.ar-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ar-grande { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; border: 2px dashed var(--c-venta); border-radius: 14px; background: var(--frambuesa-suave); color: var(--chocolate); font-weight: 800; font-size: 15px; cursor: pointer; text-align: center; padding: 10px; margin: 0; }
.ar-grande span { font-size: 34px; }
.ar-grande small { font-weight: 600; font-size: 12px; color: var(--texto-suave, #6b7280); }
.ar-grande.ar-principal { border-style: solid; background: var(--c-venta); color: #fff; }
.ar-grande.ar-principal small { color: rgba(255,255,255,.85); }
.ar-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border: 2px dashed var(--borde); border-radius: 14px; background: var(--superficie-2); cursor: pointer; margin: 0 0 10px; overflow: hidden; color: var(--chocolate); }
.ar-foto > span { font-size: 54px; } .ar-foto small { color: var(--cacao-claro); }
.ar-foto img { max-width: 100%; max-height: 320px; object-fit: contain; }
.ar-margen { font-size: 13.5px; color: var(--cacao); min-height: 20px; }
.ar-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ar-formato { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; border: 2px solid var(--borde); border-radius: 12px; padding: 12px 8px; cursor: pointer; margin: 0; color: var(--chocolate); }
.ar-formato input { display: none; } .ar-formato span { font-size: 28px; } .ar-formato small { color: var(--cacao-claro); font-weight: 600; font-size: 12px; }
.ar-formato.activo, .ar-formato:has(input:checked) { border-color: var(--c-venta); background: var(--frambuesa-suave); }
.ar-resumen { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); margin-top: 8px; }
.ar-resumen img, .ar-resumen .prod-foto { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; font-size: 30px; }
.ar-resumen small { display: block; color: var(--cacao); font-size: 12.5px; }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ar-fmt { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.3fr auto; gap: 8px; align-items: end; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 8px; background: var(--superficie-2); }
.ar-fmt .campo { margin: 0; } .ar-fmt label { font-size: 11.5px; }
.ar-base { grid-template-columns: 1fr 1fr; }
.ci-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px; }
.ci-fmt { display: grid; grid-template-columns: 1fr 90px auto auto; gap: 8px; align-items: center; }
.ci-fmt .muted { font-size: 12px; }
@media (max-width: 640px) { .ar-fmt { grid-template-columns: 1fr 1fr; } .ar-fmt .btn-icono { justify-self: end; } }
.rubros { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rubro { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px; cursor: pointer; margin: 0; color: var(--chocolate); }
.rubro:has(input:checked) { border-color: var(--c-venta); background: var(--frambuesa-suave); }
.rubro input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; }
.rubro-ic { font-size: 26px; } .rubro strong { display: block; font-size: 14px; } .rubro small { display: block; color: var(--cacao-claro); font-size: 11.5px; font-weight: 600; }
@media (max-width: 560px) { .ar-botones { grid-template-columns: 1fr; } .ar-pasos li { font-size: 0; } .ar-pasos li span { font-size: 13px; } }

.atajos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.atajos-grid h4 { margin: 0 0 6px; font-size: 14px; }
.atajos-grid td:first-child { white-space: nowrap; width: 1%; }

/* ---------- Remuneraciones ---------- */
.rem-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.liq-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--borde); }
.liq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.liq-sub td { font-weight: 800; background: var(--crema-2); }
.liq-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--total-fondo); color: var(--total-txt); font-size: 16px; font-weight: 700; }
.liq-total strong { font-size: 28px; }
.liq-nota { font-size: 12px; margin: 8px 0 0; }
.liq-saldo { display: flex; justify-content: space-between; padding: 6px 14px; font-weight: 700; color: var(--cacao); }
.liq-total-2 { margin-top: 4px; background: var(--menta-suave); color: var(--menta-osc); }
.aj-caja { border: 1px dashed var(--c-venta); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; background: var(--superficie-2); }
.aj-caja summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
.aj-caja .fila-campos { margin-top: 8px; }
.aj-anticipos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.aj-anticipos label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.aj-anticipos input { width: 110px; min-height: 34px; }
@media (max-width: 760px) { .liq-cols { grid-template-columns: 1fr; } }

/* ---------- Rubro del negocio ---------- */
.rubros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rubro-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px solid var(--borde); border-radius: 12px; padding: 12px 8px; background: var(--superficie); color: var(--chocolate); cursor: pointer; }
.rubro-card:hover { border-color: var(--c-venta); }
.rubro-card.activo { border-color: var(--c-venta); background: var(--frambuesa-suave); box-shadow: 0 0 0 2px var(--c-venta); }
.rubro-card .rc-ic { font-size: 30px; } .rubro-card strong { font-size: 14px; } .rubro-card small { font-size: 11.5px; color: var(--cacao-claro); font-weight: 600; }
.cfg-medidas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-tecnica { margin-top: 10px; }

/* ---------- Varios negocios ---------- */
.btn-negocio { display: flex; align-items: center; gap: 6px; max-width: 240px; border: 1.5px solid var(--borde); background: var(--superficie-2); color: var(--chocolate); border-radius: 9px; padding: 6px 10px; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.btn-negocio:hover { border-color: var(--c-venta); }
.btn-negocio .bn-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-negocio .bn-flecha { color: var(--cacao-claro); }
.neg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.neg-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px solid var(--borde); border-radius: 14px; padding: 14px 10px; background: var(--superficie); color: var(--chocolate); cursor: pointer; }
.neg-card:hover { border-color: var(--c-venta); }
.neg-card.activo { border-color: var(--c-caja); background: var(--menta-suave); }
.neg-card .neg-ic { font-size: 34px; } .neg-card small { color: var(--cacao); font-weight: 600; }
.neg-venta { font-size: 13px; color: var(--cacao); }
.neg-nuevo { border-style: dashed; } .neg-nuevo .neg-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--frambuesa-suave); color: var(--c-venta); font-size: 28px; }
.neg-total { margin: 14px 0 0; font-size: 15px; }
.neg-inicio { margin-bottom: 16px; } .neg-inicio .neg-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 12px; gap: 10px; } .neg-inicio .neg-ic { font-size: 26px; }
.neg-inicio .neg-venta { margin-left: auto; }
@media (max-width: 860px) { .btn-negocio { max-width: 130px; padding: 5px 7px; font-size: 12.5px; } .btn-negocio .bn-flecha { display: none; } }

/* ---------- KPIs ---------- */
.kpi-tabs { margin: 0 0 14px; flex-wrap: wrap; }
.kpi-seccion { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--cacao); margin: 6px 0 8px; display: flex; align-items: center; gap: 10px; }
.kpi-seccion::after { content: ''; flex: 1; border-top: 1px solid var(--borde); }
.kpi-fijo { min-height: 40px; display: flex; align-items: center; font-weight: 700; color: var(--cacao); }
.kpi-progreso { height: 7px; border-radius: 99px; background: var(--crema-2); overflow: hidden; margin: 4px 0 6px; }
.kpi-progreso span { display: block; height: 100%; background: var(--c-caja); border-radius: 99px; }
.graf-meses .gc-et { white-space: nowrap; }
@media (min-width: 1600px) { .kpi-graficos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kpi-graficos { grid-template-columns: 1fr; } .kpi-tabs { flex-wrap: nowrap; overflow-x: auto; } .kpi-tabs button { flex-shrink: 0; } }

/* ---------- Etiquetas de estante ---------- */
.et-layout { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.6fr) minmax(300px, 1.2fr); gap: 12px; align-items: start; }
.et-panel { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.et-panel h4 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.et-filtros { display: flex; gap: 6px; }
.et-filtros select { min-height: 36px; padding: 5px 8px; font-size: 13px; }
.et-prods { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; }
.et-prod { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0 8px; text-align: left; border: 1px solid var(--borde); background: var(--superficie); color: var(--chocolate); border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.et-prod:hover { border-color: var(--c-reportes); }
.et-prod.ya { opacity: .6; }
.et-prod-n { font-weight: 700; font-size: 13.5px; }
.et-prod-p { font-size: 12.5px; color: var(--cacao); grid-row: 2; }
.et-prod-mas { grid-row: 1 / 3; grid-column: 2; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--c-reportes); color: #fff; font-weight: 800; }
.et-cola { overflow: auto; max-height: 62vh; }
.et-tabla input { min-height: 32px; padding: 4px 7px; font-size: 13px; }
.et-tabla td { padding: 4px 5px; }
.et-tabla td.num input { text-align: right; width: 84px; }
.et-disenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 430px; overflow: auto; padding: 2px; }
.et-dis { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 2px solid var(--borde); border-radius: 10px; padding: 8px 6px; cursor: pointer; background: var(--superficie); color: var(--chocolate); text-align: center; }
.et-dis:hover { border-color: var(--c-reportes); }
.et-dis.activo { border-color: var(--c-reportes); background: var(--rojo-suave); box-shadow: 0 0 0 2px var(--c-reportes); }
.et-dis strong { font-size: 13px; } .et-dis small { font-size: 11px; color: var(--cacao-claro); font-weight: 600; line-height: 1.25; }
.et-dis-mini { display: block; height: 82px; width: 124px; overflow: hidden; pointer-events: none; }
.et-dis-mini .et { zoom: var(--z, .55); }
.et-estilos { grid-template-columns: repeat(3, 1fr) !important; }
.et-colores { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.et-color { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde); cursor: pointer; }
.et-color.activo { box-shadow: 0 0 0 2px var(--chocolate); }
.et-colores input[type=color] { width: 34px; height: 30px; min-height: 0; padding: 0; border: 0; background: none; }
.et-opciones { display: flex; flex-direction: column; gap: 2px; }
.et-previa { background: repeating-conic-gradient(var(--crema-2) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; border-radius: 8px; padding: 10px; overflow: auto; }
.et-previa-hoja { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; zoom: 1.25; }
@media (max-width: 1180px) { .et-layout { grid-template-columns: 1fr 1fr; } .et-layout > :nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 860px) { .et-layout { grid-template-columns: 1fr; } .et-disenos { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra inferior del celular ---------- */
.nav-movil { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) and (min-width: 861px) {
  .enc-usuario small, .enc-usuario span, .sel-estilo span, .btn-enc span, .interruptor .txt { display: none; }
  .total-venta { min-width: 200px; }
  .total-venta .monto { font-size: 42px; }
  [data-estilo="clasico"] .menu-lateral { width: 210px; }
}

/* ---------- Celular y tablet chica ---------- */
@media (max-width: 860px) {
  .enc { padding: 4px 8px; gap: 6px; min-height: 52px; }
  .marca .logo-marca { display: none; }
  .nombre-marca { font-size: 16px; }
  #menuLocal { max-width: 140px; }
  .enc-sel { margin-left: 0; }
  .sel-estilo, .enc-usuario, .btn-enc, .interruptor .txt, #verComoCaja { display: none !important; }
  .enc { overflow: hidden; }
  .marca > div { min-width: 0; }
  .enc-sel select { max-width: 104px !important; font-size: 13px !important; min-height: 36px !important; }
  #verComoCaja select { max-width: 92px !important; }
  .btn-alertas { padding: 4px 8px; min-height: 36px; }
  .estado-nube { display: none !important; }
  .interruptor { padding: 3px; }
  .btn-enc { padding: 6px 8px; }
  .menu-lateral { background: var(--superficie); }
  .menu-item .mi-sub { display: block; }
  .banda-mod { padding: 6px 12px; }
  .vista { padding: 12px 10px 24px; }
  body.en-venta .vista { padding: 0; }

  .venta { min-height: calc(100dvh - 116px); }
  .v-banda { padding: 6px 8px; }
  .v-pill, .v-caja, .v-estado, .v-cod > label { display: none; }
  .conmutador button { padding: 6px 12px; font-size: 13.5px; }
  .v-cod { padding: 6px 8px; }
  .v-input { min-width: 0; }
  .v-input input { font-size: 16px; }
  .v-acc { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; }
  .v-catalogo { display: none; }
  .venta.ver-catalogo .v-catalogo { display: flex; position: fixed; inset: 52px 0 0 0; width: auto; max-width: none; z-index: 40; border: 0; }
  .v-tabla td { font-size: 14px; padding: 7px 6px; }
  .v-tabla .col-cod, .v-tabla .col-exist, .v-tabla .col-precio { display: none; }
  .v-tabla .v-precio-movil { display: block; }
  .v-pie { grid-template-columns: 1fr; padding: 8px; position: sticky; bottom: 0; }
  .total-venta { order: 1; min-width: 0; flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 12px; }
  .total-venta .monto { font-size: 34px; }
  .total-venta .neto { display: none; }
  .v-cobros { order: 2; min-width: 0; flex-direction: row; }
  .btn-cobrar-grande { font-size: 17px; padding: 11px; }
  .btn-maquina { flex: 0 0 auto; padding: 7px 12px; }
  .v-pie-izq { order: 3; }
  .v-pie-btns .btn-v { flex: 1; justify-content: center; }

  .nav-movil-antes {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--superficie); border-top: 1px solid var(--borde); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .nav-movil button { flex: 1; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--cacao); padding: 3px 0; cursor: pointer; }
  .nav-movil .ic { width: 32px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: var(--crema-2); }
  .nav-movil button.activo { color: var(--col); }
  .nav-movil button.activo .ic { background: var(--col); color: #fff; }
  .avisos { bottom: 12px; }
}
label.btn-ia { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; }

/* ---------- L · Actividad ---------- */
.aviso-suave { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.act-lista { display: flex; flex-direction: column; gap: 6px; }
.act-dia { margin: 14px 0 4px; font-size: 14px; color: var(--texto-suave, #6b7280); text-transform: none; }
.act-fila { display: grid; grid-template-columns: 54px 36px 1fr; gap: 10px; align-items: start; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.act-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto-suave, #6b7280); padding-top: 2px; }
.act-ic { font-size: 22px; line-height: 1; }
.act-txt small { display: block; color: var(--texto-suave, #6b7280); margin-top: 3px; }
.act-det { margin-top: 6px; font-size: 13.5px; }
.act-det summary { cursor: pointer; color: var(--c-venta); font-weight: 600; }
.act-det ul { margin: 6px 0 0 18px; padding: 0; }
.act-cambios { border-collapse: collapse; margin-top: 6px; }
.act-cambios td { padding: 3px 10px 3px 0; border-bottom: 1px solid var(--borde); }
.act-cambios s { color: var(--rojo, #c62828); }
@media (max-width: 640px) { .act-fila { grid-template-columns: 44px 1fr; } .act-ic { display: none; } }

/* ---------- ⓘ Ayuda ---------- */
.info-i { display: inline-grid; place-items: center; width: 18px; height: 18px; min-height: 0; padding: 0; margin-left: 4px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--c-venta); font: italic 700 11px/1 Georgia, serif; cursor: pointer; vertical-align: middle; opacity: .75; }
/* Un solo comportamiento para TODAS las ⓘ (como la de la banda del módulo):
   al pasar el mouse el círculo se rellena con su propio color y la "i" toma el color del fondo de atrás
   (--ip-fondo lo pone ayuda.js al entrar el mouse). Nada cambia de tamaño. */
.info-i:hover, .info-i:focus-visible { opacity: 1; background: currentColor; border-color: currentColor; -webkit-text-fill-color: var(--ip-fondo, #fff); outline: none; }
.info-i.claro { color: #fff; }
.info-i[hidden] { display: none; }
/* ⓘ con interruptor 🟢/🔴 (cada persona prende o apaga sus ayudas) */
.ayuda-sw { display: inline-block; position: relative; width: 26px; height: 14px; margin-left: 4px; border-radius: 999px; background: #e5484d; vertical-align: middle; cursor: pointer; flex: none; transition: background .15s; }
.ayuda-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .15s; }
.ayuda-sw.on { background: #2e9e6a; } .ayuda-sw.on::after { left: 14px; }
.ayuda-sw.madre { width: 34px; height: 18px; } .ayuda-sw.madre::after { width: 14px; height: 14px; } .ayuda-sw.madre.on::after { left: 18px; }
.ayuda-sw:focus-visible { outline: 2px solid var(--c-venta); outline-offset: 2px; }
.ayuda-sub { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; font-size: 12px; font-weight: 400; line-height: 1; }
button .ayuda-sub .info-i { width: 16px; height: 16px; font-size: 10px; margin-left: 2px; }
button .ayuda-sub .info-i { color: inherit; }
span.info-i { cursor: pointer; }
/* Apagada = invisible pero guardando su lugar, para que al prender/apagar no se corra nada */
.info-i.apagada { visibility: hidden !important; pointer-events: none !important; }
body.ayuda-off #vista .info-i:not(.ayuda-madre), body.ayuda-off #modal .info-i, body.ayuda-off .ayuda-sub { visibility: hidden !important; pointer-events: none !important; }
.info-i.ayuda-madre.off { opacity: .4; }
.info-i.ayuda-madre.off:hover, .info-i.ayuda-madre.off:focus-visible { opacity: 1; }
body #vista #ayudaPrefs .ayuda-sw { display: inline-block !important; }
.ay-pant summary { display: flex; align-items: center; gap: 6px; } .ay-subs { padding: 4px 0 4px 34px; }
.ay-sub { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--borde); font-size: 14px; }
.info-pop .ip-sws { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borde); }
.info-pop .ip-fila { display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; font-size: 14px; } .info-pop .ip-fila.chica { font-size: 13px; }
.info-pop .ip-fila .ayuda-sw { margin-left: 0; }
.info-pop .ip-lista { max-height: 180px; overflow: auto; margin: 6px 0; padding: 4px 0 4px 6px; border-left: 3px solid var(--borde); }
.info-pop .ip-nota { margin: 4px 0; font-size: 12px; color: var(--cacao); }
.info-pop { position: fixed; z-index: 3000; width: min(360px, calc(100vw - 16px)); background: var(--superficie); color: var(--texto, inherit); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.22); padding: 12px 14px; font-size: 14px; line-height: 1.45;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.info-pop .ip-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 15px; }
.info-pop .ip-x { border: 0; background: transparent; font-size: 16px; cursor: pointer; color: inherit; padding: 2px 6px; }
.info-pop p { margin: 0 0 8px; }
.info-pop ul { margin: 4px 0 8px 18px; padding: 0; }
.info-pop li { margin-bottom: 3px; }
.info-pop .ip-tip { background: var(--superficie-2); border-radius: 8px; padding: 7px 9px; margin: 6px 0 0; font-size: 13px; }
.info-pop.hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 16px 16px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 70vh; overflow: auto; }
.act-tiempo { align-items: end; }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-periodos { flex: 2 1 320px; }
@media (max-width: 640px) { .act-periodos { flex-basis: 100%; } }

/* ---------- Guía de despacho ---------- */
.gd-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.gd-modo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border: 2px solid var(--borde); border-radius: 12px; background: var(--superficie); text-align: center; cursor: pointer; font: inherit; color: inherit; }
.gd-modo span { font-size: 26px; } .gd-modo small { color: var(--texto-suave, #6b7280); }
.gd-modo.activo { border-color: var(--c-venta); background: var(--superficie-2); cursor: default; }
button.gd-modo:hover { border-color: var(--c-venta); }
.gd-datoscli { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; margin: 4px 0 6px; }
.gd-datoscli summary { cursor: pointer; font-weight: 600; }
.gd-datoscli[open] summary { margin-bottom: 8px; }
.gd-items { margin: 4px 0 8px; max-height: 300px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; }
.gd-tabla-ed { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd-tabla-ed th, .gd-tabla-ed td { padding: 5px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.gd-tabla-ed th { position: sticky; top: 0; background: var(--superficie-2); font-size: 12.5px; }
.gd-tabla-ed .r { text-align: right; white-space: nowrap; }
.gd-tabla-ed input { width: 90px; min-height: 34px; padding: 4px 8px; }
.gd-tabla-ed tfoot td { border-bottom: 0; }
.gd-vacio { padding: 14px; margin: 0; text-align: center; }
.gd-agregar input { width: 100%; }
.gd-guardar-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
@media (max-width: 640px) { .gd-tabla-ed input { width: 64px; } .gd-tabla-ed th:nth-child(4), .gd-tabla-ed td:nth-child(4) { display: none; } }

/* ---------- 10 · Guía de ruta ---------- */
.gr-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
.gr-rutas, .gr-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(0,0,0,.12); font-size: 11.5px; margin-left: 4px; }
.gr-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.gr-progreso { width: 180px; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.gr-progreso span { display: block; height: 100%; background: var(--c-caja, #1e9e78); }
.gr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gr-parada { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.gr-parada[draggable="true"] { cursor: grab; }
.gr-parada.arrastrando { opacity: .45; }
.gr-parada.sobre { border-color: var(--c-venta); box-shadow: 0 0 0 2px var(--c-venta) inset; }
.gr-parada.hecho { background: var(--superficie-2); }
.gr-parada.hecho .gr-info strong { text-decoration: line-through; color: var(--texto-suave, #6b7280); }
.gr-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-venta); color: #fff; font-weight: 800; }
.gr-parada.hecho .gr-num { background: var(--c-caja, #1e9e78); }
.gr-info small { display: block; color: var(--texto-suave, #6b7280); margin-top: 2px; }
.gr-botones { display: flex; gap: 4px; align-items: center; }
.gr-botones .btn-icono[disabled] { opacity: .3; }
.gr-vacia { padding: 14px; text-align: center; }
.gr-agregar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 12px; }
@media (max-width: 640px) { .gr-agregar { grid-template-columns: 1fr; } .gr-progreso { width: 100%; } .gr-parada { grid-template-columns: 30px 1fr; } .gr-botones { grid-column: 1 / -1; justify-content: flex-end; } }
.gr-cab, .gr-tarjeta { padding: 12px 14px; margin-bottom: 12px; }

/* ---------- F · Facturas ---------- */
.fa-docs { display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; }
.fa-doc { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; cursor: pointer; }
.fa-doc.ya { opacity: .6; cursor: default; }
.fa-totales { display: flex; justify-content: flex-end; gap: 18px; padding: 10px 4px 0; font-size: 14px; flex-wrap: wrap; }
.fa-totales .grande { font-size: 17px; }

/* ---------- N · Novedades (reemplaza la campanita) ---------- */
#btnAlertas { display: none !important; }
.nov-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.nov-lista { display: flex; flex-direction: column; gap: 8px; }
.nov { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-left: 5px solid var(--borde); }
.nov-urgente { border-left-color: var(--rojo, #d32f2f); } .nov-aviso { border-left-color: #e0a800; } .nov-info { border-left-color: var(--c-venta); }
.nov-ic { font-size: 26px; text-align: center; }
.nov-txt small { display: block; color: var(--texto-suave, #6b7280); margin-top: 3px; }
.nov-cont { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--rojo, #d32f2f); color: #fff; font-size: 11px; font-weight: 800; margin-left: 6px; }
.nov-cont[hidden] { display: none; }
@media (max-width: 640px) { .nov { grid-template-columns: 32px 1fr; } .nov > .btn { grid-column: 1 / -1; justify-self: end; } }

/* ---------- Estado de conexión (sin internet / servidor con problemas) ---------- */
.banda-conexion { padding: 8px 16px; font-size: 14px; text-align: center; background: #fff3cd; color: #5c4400; border-bottom: 1px solid #f0d58a; }
.banda-conexion.off { background: #fde2e1; color: #7a1712; border-color: #f3b4b0; }
.banda-conexion.mal { background: #fff3cd; color: #5c4400; }
.banda-conexion.sync { background: #e3f0ff; color: #0d3b75; border-color: #b9d6fb; }
.banda-conexion[hidden] { display: none; }
[data-theme="dark"] .banda-conexion { filter: brightness(.85) contrast(1.1); }

/* ---------- 💬 Soporte humano ---------- */
.btn-soporte span { font-weight: 700; }
.sop-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sop-op { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.sop-op span { font-size: 24px; } .sop-op small { color: var(--texto-suave, #6b7280); }
.sop-op:hover { border-color: var(--c-venta); }
.sop-op.apagado { opacity: .55; cursor: default; }
@media (max-width: 640px) { .sop-opciones { grid-template-columns: 1fr; } .btn-soporte span { display: none; } }

/* ---------- 📝 Nota del producto ---------- */
.prod-nota { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: var(--superficie-2); border: 1px dashed var(--borde); font-size: 11.5px; font-weight: 600; color: var(--texto-suave, #6b7280); vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-nota { display: block; font-size: 11px; color: var(--texto-suave, #6b7280); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.var-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.var-modo { display: flex; gap: 8px; margin-bottom: 10px; }

/* 📄 Factura desde la venta */
.v-cobros-fila { display: flex; gap: 6px; }
.v-cobros-fila .btn-maquina { flex: 1; }
.btn-factura-v { border-color: #2563eb; color: #2563eb; }
.cb-factura { border: 1.5px solid #2563eb33; background: #2563eb0d; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.cb-factura .cb-fac-tit { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cb-factura .campo { margin-bottom: 6px; }
.ic-barras { vertical-align: middle; display: inline-block; }
.v-cobros-fila .btn-maquina { white-space: nowrap; font-size: 13.5px; padding: 7px 8px; }

/* 🖼️ Etiquetas: mis diseños y hoja completa */
.et-mios-cab { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13.5px; }
.et-dis-mio { position: relative; }
.et-mio-acc { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; }
.et-mio-acc .btn-icono { width: 26px; height: 26px; min-height: 0; font-size: 13px; background: var(--superficie); border-radius: 6px; }
.et-dis-nuevo { border-style: dashed; justify-content: center; min-height: 150px; }
.et-dis-mas { font-size: 30px; line-height: 1; color: var(--c-reportes); font-weight: 800; }
.mio-ed .mio-archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.mio-lienzo-caja { background: repeating-conic-gradient(var(--crema-2) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; border-radius: 10px; padding: 12px; display: flex; justify-content: center; overflow: hidden; }
.mio-escala { position: relative; }
.mio-escala .et { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.mio-sin { display: flex; align-items: center; justify-content: center; border: 1px dashed #999; background: #fff; color: #888; font-size: 3mm; }
.mio-escala .mz { cursor: grab; outline: 0.25mm dashed rgba(37,99,235,.55); touch-action: none; user-select: none; }
.mio-escala .mz.sel { outline: 0.35mm solid #2563eb; background: rgba(37,99,235,.08); }
.mio-zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mio-zonas .apagada { opacity: .55; }
.mio-ctrl { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; }
.mio-ctrl-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mio-ctrl input[type=color] { height: 36px; padding: 2px; }
.vh-inicio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.vh-inicio input { width: 70px; }
.vh-hojas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; background: var(--crema-2); border-radius: 10px; padding: 12px; max-height: 64vh; overflow: auto; }
.vh-pag { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vh-papel { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.vh-papel .hoja { width: 215.9mm; height: 279.4mm; box-sizing: border-box; overflow: hidden; }
.vh-cel { cursor: pointer; outline: 0.3mm dashed #ccc; }
.vh-cel:hover { outline: 0.8mm solid #93c5fd; }
.vh-cel.sel { outline: 1.2mm solid #2563eb; position: relative; z-index: 1; }
.vh-vacia { background: repeating-linear-gradient(45deg, #e5e7eb 0 2mm, #f3f4f6 2mm 4mm); color: #9ca3af; display: flex; align-items: center; justify-content: center; font-size: 4mm; }
.vh-libre { outline: 0.3mm dashed #e5e7eb; }
.vh-rollo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; zoom: 1.2; }
.vh-form { border: 1.5px solid #2563eb55; background: #2563eb0d; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.vh-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.et-solo-predis[hidden] { display: none !important; }

/* Logo SKIR (imagen) */
.logo-skir { padding: 0 !important; overflow: hidden; background: #1f6fd1 !important; }
.logo-skir .logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 🚛 Vehículos */
.patente { display: inline-block; font-family: 'Arial Black', Arial, sans-serif; letter-spacing: 1px; border: 2px solid #1d2633; border-radius: 5px; padding: 1px 7px; background: #fff; color: #111; font-size: 13.5px; }
.ve-estado { min-height: 34px; padding: 4px 8px; font-weight: 700; border-radius: 8px; }
.ve-estado.ve-verde { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.ve-estado.ve-amarillo { background: #fff8e1; color: #8a5a00; border-color: #ffe082; }
.ve-estado.ve-rojo { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }

/* Etiqueta DEMO al lado de SKIR */
.marca-fila { display: flex; align-items: center; gap: 6px; }
.enc .cinta-demo.marca-demo { background: #ffb300; color: #3d2a00; border: 0; border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .8px; line-height: 1.5; text-align: center; }
.enc .cinta-demo.marca-demo[hidden] { display: none; }


/* ---------- Teclas de atajo (⚙ Personalizar): automático / siempre / nunca ----------
   Solo se esconden los letreros; los atajos y el escáner siguen funcionando. */
:root[data-teclas="no"] kbd, :root[data-teclas="no"] .solo-teclado { display: none !important; }
@media (max-width: 640px) {
  :root[data-teclas="auto"] kbd, :root[data-teclas="auto"] .solo-teclado { display: none !important; }
}

/* ---------- Ver como (Modo Demo): en el recuadro del usuario ---------- */
.btn-ver-como { display: block; text-align: right; line-height: 1.2; border: 1px solid var(--borde); background: var(--superficie); color: inherit; border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.btn-ver-como:hover { background: var(--crema-2); }
.btn-ver-como small { display: block; color: var(--c-venta); font-size: 11px; font-weight: 800; }
.btn-ver-como strong { font-size: 13px; }
.btn-ver-como span { color: var(--cacao); margin-left: 4px; }
.btn-ver-como span::before { content: '· '; }
.vc-menu { position: fixed; z-index: 1000; min-width: 240px; max-height: 70vh; overflow: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-alta); padding: 6px; }
.vc-menu .vc-tit { font-size: 12px; font-weight: 800; color: var(--cacao); padding: 6px 10px 4px; }
.vc-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; }
.vc-menu button:hover { background: var(--crema-2); }
.vc-menu button.activo { background: var(--c-venta); color: #fff; }
.vc-menu button small { display: block; opacity: .75; font-size: 12px; }

/* Arriba queda un solo botón (⚙ Personalizar): se muestra con su nombre en computador y tablet */
@media (min-width: 861px) { #btnPersonalizar span { display: inline !important; } }

/* ---------- Cajón de dinero y reimpresión (cajon.js) ---------- */
.btn-v.btn-v-icono { min-width: 40px; padding-left: 10px; padding-right: 10px; font-size: 17px; justify-content: center; }
@media (max-width: 640px) { .v-pie-btns .btn-v.btn-v-icono { flex: 0 0 auto; } }
.cajon-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-grupo { border: 1.5px solid var(--borde); border-radius: var(--radio-sm); padding: 8px 12px 10px; margin: 12px 0 0; }
.cc-grupo legend { font-weight: 700; padding: 0 6px; }
.cc-grupo .check-linea { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: 500; }
.cc-permiso { margin-top: 12px; padding: 10px 12px; border: 1.5px dashed var(--borde); border-radius: var(--radio-sm); }
.cajon-anim { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 9999; pointer-events: none; font-size: 54px; animation: cajonSale 1.5s ease-out forwards; }
@keyframes cajonSale { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }

/* ---------- Notas de crédito (notas-credito.js) ---------- */
.nc-codigos { display: grid; gap: 8px; }
.nc-cod { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--borde); border-radius: var(--radio-sm); padding: 9px 12px; cursor: pointer; font-weight: 400; }
.nc-cod:has(input:checked) { border-color: var(--azul, #1f6fd1); background: var(--superficie-2); }
.nc-cod:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.nc-cod input { margin-top: 3px; width: 18px; height: 18px; min-height: 0; }
.nc-cod span { display: flex; flex-direction: column; gap: 2px; }
.nc-cod small { color: var(--texto-suave, #667); font-size: 12.5px; }
.nc-tot-ui { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: flex-end; margin-top: 12px; padding: 10px 12px; border-radius: var(--radio-sm); background: var(--superficie-2); }
.nc-tot-ui .grande { font-size: 17px; }
.nc-lista { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.nc-lista .lp-item { justify-content: space-between; }
.nc-lista .lp-item span { display: flex; flex-direction: column; } .nc-lista .lp-item small { color: var(--texto-suave, #667); }

/* ---------- Textos legales (legal.js) ---------- */
.login-legal { font-size: 12px; color: var(--cacao-claro); margin: 10px 0 0; text-align: center; line-height: 1.45; }
.login-legal a { color: inherit; font-weight: 700; text-decoration: underline; }
.lg-texto { max-width: 760px; line-height: 1.55; font-size: 14.5px; }
.lg-texto h4 { margin: 18px 0 6px; font-size: 15.5px; }
.lg-texto ul { margin: 4px 0 8px; padding-left: 22px; } .lg-texto li { margin: 3px 0; }
.lg-texto .lg-meta { color: var(--cacao-claro); font-size: 12.5px; margin-top: 0; }

/* ---------- Cobranza, contabilidad, presupuesto, producción, conexiones ---------- */
.tabla tr.fila-destacada td { background: color-mix(in srgb, #f5b300 9%, transparent); }
.tabla-compacta td, .tabla-compacta th { padding: 6px 8px; font-size: 13.5px; }
.cn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cn-grid h4 { margin-top: 0; }
.tabla tr.cn-ini td { border-top: 2px solid var(--borde); }
.pp-barra { height: 10px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; margin-bottom: 3px; }
.pp-barra span { display: block; height: 100%; border-radius: 6px; background: #2e9e6a; }
.pp-barra.pp-amarillo span { background: #e0a100; } .pp-barra.pp-rojo span { background: #d64545; } .pp-barra.pp-gris span { background: #9aa3ad; }
.pr-hist { margin: 0; padding-left: 18px; font-size: 13.5px; } .pr-hist li { margin: 3px 0; }
.pr-fila { align-items: center; margin-bottom: 4px; } .pr-fila .campo { margin: 0; }
.pasos-lista { margin: 0 0 12px; padding-left: 20px; } .pasos-lista li { margin: 4px 0; }
@media (max-width: 640px) { .cn-grid { grid-template-columns: 1fr; } }

/* ---------- Marca, academia, informe de clientes ---------- */
.mc-colores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1.5px var(--borde); cursor: pointer; padding: 0; }
.mc-color.activo { box-shadow: 0 0 0 3px var(--chocolate); }
.mc-otro { display: grid; place-items: center; background: var(--superficie-2); font-size: 16px; position: relative; overflow: hidden; }
.mc-otro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mc-logo-caja { min-height: 70px; display: flex; align-items: center; margin-bottom: 10px; } .mc-logo-caja img { max-height: 90px; max-width: 240px; }
.btn-negocio .mc-logo { height: 22px; width: auto; max-width: 60px; border-radius: 4px; margin-right: 6px; vertical-align: middle; object-fit: contain; }
.ac-lista { max-height: 520px; overflow: auto; } .ac-item { border-top: 1px solid var(--borde); padding: 8px 2px; } .ac-item summary { cursor: pointer; }
.ac-item ol { margin: 4px 0 8px; padding-left: 20px; }
details.ic-seg { margin-top: 10px; } details.ic-seg summary { cursor: pointer; padding: 4px 0; }

/* ---------- Restaurante (Mesas) ---------- */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rs-mesa { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; min-height: 104px; padding: 12px; border-radius: 12px; border: 2px solid var(--borde); background: var(--superficie); color: var(--chocolate); cursor: pointer; font: inherit; }
.rs-mesa strong { font-size: 16px; } .rs-mesa small { color: var(--cacao); font-size: 12px; }
.rs-mesa.rs-ocupada { border-color: var(--frambuesa); background: var(--frambuesa-suave); }
.rs-mesa.rs-listo { border-color: #2e9e6a; background: #ddf5ec; }
.rs-mesa.rs-reservada { border-color: #e0a100; background: #fff4d6; }
.rs-total { font-weight: 800; font-size: 17px; }
:root[data-theme="dark"] .rs-mesa.rs-listo { background: #123d2c; } :root[data-theme="dark"] .rs-mesa.rs-reservada { background: #3a2e0c; }
.rs-cocina { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rs-comanda { padding: 12px; } .rs-com-cab { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.rs-com-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--borde); font-size: 15px; }
.rs-com-item em { display: block; font-size: 12.5px; color: #c2410c; font-style: normal; } .rs-com-item.hecho { opacity: .55; }
.rs-cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
.rs-cm-grid > * { min-width: 0; }
.rs-cm-izq { border-right: 1px solid var(--borde); padding-right: 12px; max-height: 60vh; overflow: auto; }
.rs-it { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.rs-it-n small { display: block; color: var(--cacao); font-size: 12px; } .rs-it-acc { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-it-p { min-width: 70px; text-align: right; font-weight: 700; } .rs-it.rs-nuevo { background: color-mix(in srgb, #f5b300 10%, transparent); }
.rs-tot { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 0; font-size: 17px; }
.rs-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; }
.rs-prod { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--chocolate); cursor: pointer; text-align: left; font: inherit; font-size: 13.5px; }
.rs-prod:hover { border-color: var(--frambuesa); }
.btn-cant { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--borde); background: var(--superficie); cursor: pointer; font-weight: 800; color: var(--chocolate); }
.rs-sinstock { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rs-sinstock .check-linea { font-weight: 400; margin-top: 4px; }
@media (max-width: 760px) { .rs-cm-grid { grid-template-columns: 1fr; } .rs-cm-izq { border-right: 0; padding-right: 0; max-height: none; } }
/* Mesas: ampliación restaurante (QR, estaciones, agregados, reservas, resumen) */
.rs-mesa.rs-pagada { border-color: #7c5cd6; background: #efe9ff; }
:root[data-theme="dark"] .rs-mesa.rs-pagada { background: #2a2145; }
.rs-mesa.rs-tarde { box-shadow: 0 0 0 3px #e5484d inset; }
.rs-resumen-mesas { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; color: var(--cacao); font-size: 13.5px; }
.rs-sol { margin-bottom: 14px; border: 2px solid #f5b300; padding: 12px 16px; }
.rs-sol-cab { margin-bottom: 6px; font-size: 15px; }
.rs-sol-item { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.rs-sol-det { font-size: 13px; color: var(--cacao); margin-top: 3px; } .rs-sol-det em { font-style: normal; color: #c2410c; }
.rs-sol-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-mod { display: block; color: #2563eb; font-size: 12.5px; font-style: normal; }
:root[data-theme="dark"] .rs-mod { color: #7fb0ff; }
.rs-it.rs-pagado { opacity: .7; } .rs-it.rs-pagado .rs-it-p { text-decoration: line-through; }
.rs-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
.rs-cab-c { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .rs-cab-c input { width: 62px; } .rs-cab-c select { max-width: 170px; }
.rs-cab-cli { width: 100%; font-size: 13px; color: var(--cacao); }
.rs-prod.rs-agotado { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.rs-mods { display: flex; flex-direction: column; gap: 10px; }
.rs-mods-cab { display: flex; justify-content: space-between; font-size: 17px; }
.rs-grupo { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; margin: 0; } .rs-grupo legend { font-weight: 700; padding: 0 4px; }
.rs-grupo .check-linea { font-weight: 400; padding: 4px 0; }
.rs-mods-q { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.rs-mods-acc { display: flex; gap: 8px; justify-content: flex-end; }
.rs-mover .rs-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .rs-mover .rs-mesa { min-height: 70px; }
.rs-pers-rap, .rs-prop-rap { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rs-coc-barra, .rs-res-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rs-coc-barra .pos-cats { margin: 0 !important; }
.rs-comanda.rs-com-tarde { border: 2px solid #e5484d; }
.rs-cocina .rs-com-item { font-size: 16px; }
.rs-ocup { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rs-ocup span { padding: 4px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--azul); font-size: 13px; font-weight: 600; }
.rs-ocup span.rs-lleno { background: var(--rojo-suave); color: var(--rojo-osc); }
.rs-prox { padding: 5px 0; border-top: 1px dashed var(--borde); font-size: 14px; }
.fila-apagada td { opacity: .55; }
.rs-avisos:empty { display: none; }
.rs-pad { padding: 14px 16px; }
.rb-fcats { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rb-fcat { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.2fr) minmax(0, 1.6fr); gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--borde); }
.rb-fcat > * { min-width: 0; } .rb-fcat input[hidden] + .rb-fprev { grid-column: 3; }
@media (max-width: 760px) { .rb-fcat { grid-template-columns: 1fr; } .rb-fcat input[hidden] + .rb-fprev { grid-column: auto; } }
.rs-t { display: inline-block; border: 1px solid var(--borde); border-radius: 999px; padding: 0 7px; font-size: 11.5px; background: var(--superficie); color: var(--chocolate); font-weight: 700; }
button.rs-t { cursor: pointer; } button.rs-t:hover { border-color: var(--frambuesa); }
.rs-tsel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rs-coc-espera { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--borde); color: var(--cacao); font-size: 13.5px; opacity: .8; }
.rs-it.rs-espera { background: color-mix(in srgb, #3b82f6 8%, transparent); }
.rs-dlg { position: fixed; inset: 0; z-index: 300; background: rgba(20, 12, 10, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rs-dlg-caja { width: 100%; max-width: 440px; background: var(--superficie); color: var(--chocolate); border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.rs-dlg-caja h3 { margin: 0 0 8px; font-size: 19px; } .rs-dlg-msg { margin: 0 0 10px; color: var(--cacao); }
.rs-dlg-in { width: 100%; font-size: 16px; }
.rs-dlg-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rs-dlg-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rs-ret-link { display: flex; gap: 8px; } .rs-ret-link input { flex: 1; min-width: 0; }
.rs-ret-qr { margin-top: 12px; text-align: center; } .rs-ret-qr svg { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rs-kpis .tarjeta { padding: 12px; } .rs-kpis small { display: block; color: var(--cacao); font-size: 12.5px; } .rs-kpis b { font-size: 21px; }
.rs-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rs-top { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--borde); font-size: 13.5px; }
.rs-top small { display: block; }
.rs-qr-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rs-modfila { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--borde); }
.rs-me-op { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 6px; margin-bottom: 6px; } .rs-me-op > * { min-width: 0; }
.rs-cat-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.rs-tabla-prod td, .rs-tabla-prod th { padding: 4px 8px; } .rs-tabla-prod input { width: 18px; height: 18px; }
@media (max-width: 760px) { .rs-dos { grid-template-columns: 1fr; } .rs-me-op { grid-template-columns: 1fr; } .rs-sol-acc { width: 100%; } }

/* ---------- Limpieza de pantalla (ocultar barra de arriba y menú de módulos) ---------- */
.hud-btn { position: fixed; z-index: 60; display: none; place-items: center; padding: 0; border: 0; background: var(--c-venta, #1f6fd1); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; opacity: .75; cursor: pointer; transition: opacity .15s, transform .15s; box-shadow: 0 2px 6px rgba(0,0,0,.25); min-height: 0; }
.hud-btn:hover, .hud-btn:focus-visible { opacity: 1; }
#app:not([hidden]) ~ .hud-arriba { display: grid; }
.hud-arriba { top: 0; left: 50%; transform: translateX(-50%); width: 54px; height: 18px; border-radius: 0 0 10px 10px; }
.hud-lado { left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 54px; border-radius: 0 10px 10px 0; }
[data-hud-arriba="oculto"] .enc, [data-hud-arriba="oculto"] .nav-movil { display: none !important; }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) {   /* si la persona la activa en Personalizar */
  [data-barra-abajo="si"] .nav-movil { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--superficie); border-top: 1px solid var(--borde); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  [data-barra-abajo="si"] .nav-movil button { flex: 1; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--cacao); padding: 3px 0; cursor: pointer; }
  [data-barra-abajo="si"] .nav-movil .ic { width: 32px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: var(--crema-2); }
  [data-barra-abajo="si"] .nav-movil button.activo { color: var(--col); }
  [data-barra-abajo="si"] .nav-movil button.activo .ic { background: var(--col); color: #fff; }
  [data-barra-abajo="si"] .vista { padding-bottom: 90px; }
  [data-barra-abajo="si"] body.en-venta .vista { padding-bottom: 64px; }
  [data-barra-abajo="si"] .v-pie { bottom: 64px; }
  [data-barra-abajo="si"] .venta.ver-catalogo .v-catalogo { bottom: 64px; }
  [data-barra-abajo="si"] .avisos { bottom: 76px; }
}
@media (min-width: 861px) {
  [data-estilo="clasico"] #app:not([hidden]) ~ .hud-lado { display: grid; }
  [data-estilo="moderno"][data-hud-arriba="oculto"] .menu-lateral { display: none !important; }
  [data-estilo="clasico"][data-hud-lado="oculto"] .menu-lateral { display: none !important; }
  [data-estilo="clasico"][data-hud-arriba="oculto"] .menu-lateral { top: 0; height: 100vh; height: 100dvh; }
}

/* ---------- 🤖 Modo IA ---------- */
.ia-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .ia-grilla { grid-template-columns: 1fr; } }
.ia-conv { display: flex; flex-direction: column; gap: 8px; }
.ia-lista { min-height: 260px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo, #f6f8fb); }
.ia-msj { display: flex; } .ia-msj.usuario { justify-content: flex-end; }
.ia-burbuja { max-width: 85%; padding: 8px 12px; border-radius: 14px; background: var(--superficie, #fff); border: 1px solid var(--borde); font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.ia-msj.usuario .ia-burbuja { background: var(--c-venta, #1f6fd1); color: #fff; border-color: transparent; }
.ia-msj.pensando .ia-burbuja { opacity: .6; font-style: italic; }
.ia-bots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.ia-vacio { margin: auto; text-align: center; font-size: 13.5px; }
.ia-form { display: flex; gap: 6px; } .ia-form .ia-campo { flex: 1; min-width: 0; }
.ia-mic.escuchando, .btn-voz-ia.escuchando { background: #e5484d !important; color: #fff !important; border-color: #e5484d !important; animation: ia-pulso 1s ease-in-out infinite; }
@keyframes ia-pulso { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .25); } }
.ia-estado { font-size: 12.5px; margin: 8px 0 0; }
.ia-ejemplos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ia-ejemplos li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .ia-ejemplos li > span { width: 22px; text-align: center; }
.ia-ejemplos .btn-link { display: block; background: none; border: 0; padding: 0; color: var(--c-venta, #1f6fd1); cursor: pointer; text-align: left; font-size: 13px; }
.ia-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ia-auto { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; }
.ia-auto > div { flex: 1; } .ia-auto p { margin: 2px 0 0; font-size: 12.5px; } .ia-auto.ia-pronto { opacity: .7; } .ia-auto-ic { font-size: 22px; }
.ia-ventanita { position: fixed; right: 16px; top: 70px; z-index: 2500; width: min(400px, calc(100vw - 32px)); background: var(--superficie, #fff); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.25); padding: 10px 12px; }
.ia-ventanita[hidden] { display: none; }
.ia-ventanita .ia-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .ia-ventanita .ia-cab span { display: flex; gap: 4px; align-items: center; }
.ia-ventanita .ia-lista { min-height: 160px; max-height: 45vh; }
.btn-voz-ia[hidden] { display: none !important; }
@media (max-width: 640px) {
  .btn-voz-ia span { display: none; }
  .btn-voz-ia { position: fixed; right: 12px; bottom: 78px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 20px;
    background: var(--c-venta, #1f6fd1) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
  .enc #btnVozIA { display: grid !important; } .enc #btnVozIA[hidden] { display: none !important; }
  body[data-pantalla-actual="venta"] .enc #btnVozIA, body[data-pantalla-actual="preventa"] .enc #btnVozIA { display: none !important; }
  .ia-ventanita { top: auto; bottom: 136px; right: 8px; left: 8px; width: auto; }
}
.ia-riesgo { margin: 4px 0 0; font-size: 12px; color: var(--c-peligro, #b42318); background: rgba(229, 72, 77, .08); border-radius: 6px; padding: 4px 6px; }

/* 📲 Avisos y envíos: vista previa del mensaje */
.envio-previa { white-space: pre-wrap; font: 13px/1.5 ui-monospace, 'Cascadia Mono', monospace; background: var(--fondo-suave, rgba(127,127,127,.08)); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto }

/* Suscripción: placa de metal del plan (Bronce, Plata, Oro, Diamante) */
.placa-plan { --m1: #8a5a2b; --m2: #d9a46b; --m3: #a26a35; --tx: #3d220a; display: inline-flex; align-items: center; position: relative; padding: 6px 14px 6px 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--m1) 0%, var(--m2) 42%, var(--m3) 58%, var(--m2) 78%, var(--m1) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.25);
  font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: .08em; color: var(--tx); text-shadow: 0 1px 0 rgba(255,255,255,.45); white-space: nowrap }
.placa-plan::before { content: ''; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.8), rgba(0,0,0,.35)) }
.placa-plan.grande { font-size: 18px; padding: 10px 20px 10px 30px } .placa-plan.grande::before { left: 11px }
.placa-plan.plata { --m1: #8d959d; --m2: #eef1f4; --m3: #b3bac1; --tx: #2c3339 }
.placa-plan.plata { color: #1f262c; text-shadow: 0 1px 0 rgba(255,255,255,.8); background: linear-gradient(118deg, transparent 0 30%, rgba(255,255,255,.45) 34%, transparent 40%), linear-gradient(180deg, rgba(255,255,255,.45), rgba(240,244,248,.25) 50%, rgba(40,50,60,.2)), url("../img/placa-plata.webp") center / cover no-repeat, #b3bac1 }
.placa-plan.oro { --m1: #9a6c10; --m2: #f6d77c; --m3: #c9982d; --tx: #4a3205 }
.placa-plan.oro { color: #3a2400; text-shadow: 0 1px 0 rgba(255,248,220,.8); background: linear-gradient(118deg, transparent 0 30%, rgba(255,250,220,.45) 34%, transparent 40%), linear-gradient(180deg, rgba(255,250,225,.5), rgba(255,240,200,.3) 50%, rgba(120,80,10,.2)), url("../img/placa-oro.webp") center / cover no-repeat, #c9982d }
.placa-plan.diamante { --tx: #ffffff; color: #fff; text-shadow: 0 1px 2px rgba(2,30,70,.9), 0 0 8px rgba(120,220,255,.55); padding-right: 24px;
  background: linear-gradient(118deg, transparent 0 34%, rgba(255,255,255,.55) 36%, transparent 40%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,25,60,.18) 45%, rgba(0,20,50,.45)), url("../img/placa-diamante.webp") center / cover no-repeat, #0b5d9c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,20,50,.5), 0 1px 3px rgba(0,30,70,.4), 0 0 0 1px #0a3f73, 0 0 10px rgba(60,190,240,.35) }
.placa-plan.diamante::before { background: radial-gradient(circle at 35% 35%, #fff, #7fd8f5 60%, #0b4f8a) }
.placa-plan.diamante::after { display: block; right: 6px; width: 10px; height: 10px; margin-top: -5px; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px #9eeaff) }
.suscripcion { margin-bottom: 16px }
.sus-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.sus-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 18px 0 }
.sus-datos dt { font-size: 13px; color: var(--cacao-claro) }
.sus-datos dd { margin: 2px 0 0; font-weight: 700 }
@media (max-width: 640px) { .sus-datos { grid-template-columns: 1fr 1fr } }
.sus-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px }
.sus-retiro { color: #b3261e !important; border-color: currentColor !important }
.sus-retiro-ok { background: #b3261e; color: #fff; border-color: #b3261e }
.sus-calculo { border: 1px solid var(--borde); border-radius: 8px; margin: 14px 0; overflow: hidden }
.sus-calculo > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde) }
.sus-calculo > div:last-child { border-bottom: 0 }
.sus-calculo .total { background: color-mix(in srgb, #1e9e78 10%, transparent); font-size: 17px }

.placa-plan.grande.diamante { padding-right: 34px } .placa-plan.grande.diamante::after { right: 11px }

/* Licencia de uso: tarjeta completa con textura del metal (Básico=bronce, Emprendedor=plata, Pyme=oro, Profesional=diamante) */
.licencia { --lt: #241505; --lt2: rgba(36,21,5,.72); --velo: rgba(255,248,235,.42); --panel: rgba(255,250,240,.5); --borde: rgba(60,35,10,.25);
  position: relative; overflow: hidden; border-radius: 16px; padding: 22px 24px 18px; color: var(--lt); min-height: 230px;
  background: linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.35) 33%, transparent 40%), linear-gradient(180deg, var(--velo), transparent 42%, transparent 62%, var(--velo)), var(--lic-img) center / cover no-repeat, #8a5a2b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 4px rgba(0,0,0,.18), 0 10px 26px rgba(0,0,0,.18) }
.licencia.bronce { --lic-img: url("../img/lic-bronce.webp") }
.licencia.plata { --lt: #172028; --lt2: rgba(23,32,40,.72); --velo: rgba(255,255,255,.45); --panel: rgba(255,255,255,.5); --borde: rgba(30,40,50,.22); --lic-img: url("../img/lic-plata.webp") }
.licencia.oro { --lt: #2e1c00; --lt2: rgba(46,28,0,.75); --velo: rgba(255,248,220,.42); --panel: rgba(255,248,222,.5); --borde: rgba(80,50,0,.25); --lic-img: url("../img/lic-oro.webp") }
.licencia.diamante { --lt: #ffffff; --lt2: rgba(225,245,255,.85); --velo: rgba(0,25,60,.38); --panel: rgba(2,28,62,.5); --borde: rgba(170,230,255,.35); --lic-img: url("../img/lic-diamante.webp");
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(140,220,255,.35), 0 2px 4px rgba(0,30,70,.3), 0 10px 26px rgba(0,60,120,.3), 0 0 22px rgba(60,190,240,.25) }
.licencia.diamante .lic-nombre, .licencia.diamante .lic-marca { text-shadow: 0 1px 3px rgba(0,20,50,.9), 0 0 12px rgba(120,220,255,.5) }
.licencia .lic-tipo, .licencia .lic-resumen, .licencia .lic-pie, .licencia .lic-marca small { text-shadow: 0 0 6px var(--halo, rgba(255,250,235,.95)), 0 0 2px var(--halo, rgba(255,250,235,.95)) }
.licencia.diamante { --halo: rgba(0,20,55,.95) }
.lic-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px }
.lic-tipo { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--lt2) }
.lic-nombre { font-size: 34px; font-weight: 900; letter-spacing: .06em; line-height: 1.05; margin-top: 4px; text-shadow: 0 1px 0 rgba(255,255,255,.45) }
.lic-resumen { font-size: 14px; font-weight: 700; color: var(--lt2); margin-top: 2px }
.lic-marca { font-size: 22px; font-weight: 900; letter-spacing: .14em; text-align: right; line-height: 1 }
.lic-marca small { display: block; font-size: 10px; letter-spacing: .2em; font-weight: 700; color: var(--lt2); margin-top: 5px }
.lic-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; margin: 18px 0 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--borde); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
.lic-datos dt { font-size: 12px; font-weight: 700; color: var(--lt2) }
.lic-datos dd { margin: 2px 0 0; font-weight: 800; font-size: 15px }
.lic-pie { display: flex; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--lt2) }
.lic-pie strong { color: var(--lt) }
.licencia + .sus-botones { margin-top: 14px }
@media (max-width: 640px) { .lic-datos { grid-template-columns: 1fr 1fr } .lic-nombre { font-size: 26px } .licencia { padding: 18px 16px 14px } }

/* 🛠️ Órdenes de trabajo */
.ot-form .ot-grupo { border: 1px solid var(--borde, #ddd); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px }
.ot-form .ot-grupo legend { font-weight: 800; padding: 0 6px }
.ot-hist { font-size: 13px; margin: 6px 0 0 }
.tabs-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.ot-ficha { border-bottom: 1px solid var(--borde, #ddd); padding: 12px 0 }
.ot-ficha-cab { margin-bottom: 8px }
.ot-ficha .btn-link, #otLista .btn-link { background: none; border: 0; padding: 0; color: var(--c-venta, #1f6fd1); cursor: pointer; font-weight: 700 }
#otLista .col-acc { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 230px }
#otLista [data-ot-estado] { max-width: 170px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borde, #ccc); background: var(--fondo, #fff); color: inherit }
/* ✍️ Firma y recepción del vehículo */
.fi-caja { position: relative; border: 1.5px dashed var(--borde, #bbb); border-radius: 10px; background: #fff; height: 170px; touch-action: none }
.fi-lienzo { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none }
.fi-linea { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1px solid #c9ced6; font-size: 11px; color: #8a94a3; padding-top: 2px; pointer-events: none }
.fi-borrar { margin-top: 6px }
.ot-rec-checks { border: 1px solid var(--borde, #ddd); border-radius: 10px; margin: 6px 0 12px; overflow: hidden }
.ot-rec-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--borde, #eee); flex-wrap: wrap }
.ot-rec-fila:last-child { border-bottom: 0 }
.ot-rec-op { display: inline-flex; gap: 4px }
.ot-rec-op label { cursor: pointer } .ot-rec-op input { position: absolute; opacity: 0 }
.ot-rec-op span { display: inline-block; padding: 5px 10px; border: 1px solid var(--borde, #ccc); border-radius: 7px; font-size: 13px; font-weight: 600 }
.ot-rec-op input:checked + span { background: var(--c-venta, #1f6fd1); border-color: var(--c-venta, #1f6fd1); color: #fff }
.ot-rec-op input[value="malo"]:checked + span { background: #c62828; border-color: #c62828 }
.ot-rec-op input[value="no"]:checked + span { background: #6b7280; border-color: #6b7280 }
.ot-rec-op input:focus-visible + span { outline: 3px solid var(--c-venta, #1f6fd1); outline-offset: 2px }
.ot-rec-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px }
.ot-rec-fotos figure { position: relative; margin: 0 } .ot-rec-fotos img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde, #ddd) }
.ot-rec-fotos .btn-icono { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 22px; height: 22px; padding: 0 }
[data-verfirma].btn-link { background: none; border: 0; padding: 0 2px; color: var(--c-venta, #1f6fd1); cursor: pointer; font-weight: 700; font-size: 12.5px }
/* 🔐 Entrada: Google y código de alta */
.login-titulo { font-size: 22px; margin: 4px 0 6px }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; margin-top: 6px }
.btn-google:hover { background: #f7f8f8; border-color: #c6c9cc } .btn-google .g-logo { width: 20px; height: 20px }
.login-alta { border: 1.5px solid #1e8a68; background: rgba(30,138,104,.08); border-radius: 10px; padding: 12px 14px; margin: 6px 0 10px; font-size: 14.5px; line-height: 1.45 }
.login-alta strong { font-family: ui-monospace, monospace; letter-spacing: .06em }
.login-licencia { margin-top: 10px }
.alta-campo { display: flex; gap: 8px; margin-top: 8px } .alta-campo input { flex: 1; text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, monospace }
/* 🚛 SKIR Flotas (privado): selector y colores */
.sel-producto { display: inline-flex; border: 1px solid var(--borde, #ccd); border-radius: 8px; overflow: hidden; margin: 0 8px; flex-shrink: 0 }
.sel-producto button { border: 0; background: transparent; padding: 6px 12px; font-weight: 700; font-size: 13.5px; color: inherit; cursor: pointer; opacity: .7 }
.sel-producto button[aria-pressed="true"] { background: var(--c-venta, #1f6fd1); color: #fff; opacity: 1 }
body.modo-flotas .sel-producto button[aria-pressed="true"] { background: #f39c12; color: #0a0c0e }
body.modo-flotas { --fl-fondo: #0a0c0e; --fl-panel: #13171b; --fl-linea: #27313a; --fl-ambar: #f39c12; --fl-acero: #7097b6 }
body.modo-flotas .enc { background: #0a0c0e; color: #f4f5f7; border-bottom: 1px solid #27313a }
body.modo-flotas .enc .nombre-marca, body.modo-flotas .enc small, body.modo-flotas .enc strong, body.modo-flotas .enc span { color: #f4f5f7 }
body.modo-flotas .principal, body.modo-flotas .vista { background: #0a0c0e; color: #e6e9ed }
body.modo-flotas .menu-lateral, body.modo-flotas .nav-movil, body.modo-flotas #btnNegocio, body.modo-flotas .sel-sucursal, body.modo-flotas #btnAlertas { display: none !important }
body.modo-flotas .banda-mod { background: linear-gradient(90deg, #13171b, #191f24); border-bottom: 2px solid #f39c12; color: #f4f5f7 }
body.modo-flotas .tarjeta { background: #13171b; border-color: #27313a; color: #e6e9ed }
body.modo-flotas .cabecera-modulo h3 { color: #f4f5f7; font-family: 'Chakra Petch', 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .02em }
body.modo-flotas .cabecera-modulo p, body.modo-flotas .muted { color: #8b97a3 }
body.modo-flotas a { color: #f5b041 }
.fl-chip { background: rgba(243,156,18,.15); color: #f39c12; border: 1px solid rgba(243,156,18,.4) }
.fl-aviso { border-left: 4px solid #f39c12 }
.fl-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 }
.fl-mod { position: relative; padding: 16px 16px 14px } .fl-mod h4 { margin: 6px 0 4px; font-size: 16px } .fl-mod p { margin: 0 0 10px; font-size: 13.5px; color: #8b97a3 }
.fl-num { font: 700 13px ui-monospace, 'JetBrains Mono', monospace; color: #7097b6; letter-spacing: .08em }
.fl-estado { display: inline-block; font-size: 12px; font-weight: 700; color: #f39c12; border: 1px solid rgba(243,156,18,.35); border-radius: 6px; padding: 2px 8px }
.fl-pasos ol { margin: 6px 0 0; padding-left: 20px } .fl-pasos li { margin: 3px 0 }
@media (max-width: 700px) { .sel-producto { margin: 0 4px } .sel-producto button { padding: 5px 8px; font-size: 12.5px } }
body.modo-flotas .enc .btn-enc, body.modo-flotas .enc .btn-ver-como, body.modo-flotas .enc .btn-icono, body.modo-flotas .enc button:not([data-prod]) { background: #13171b !important; border-color: #27313a !important; color: #f4f5f7 !important }
body.modo-flotas .enc .menu-usuario { background: #13171b; border-color: #27313a }
.fl-aviso, .fl-pasos { padding: 12px 16px }

/* ---------- Celular: sin barra inferior (el menú lateral ya tiene todo) y cabecera que no se sale de la pantalla (04-11-2026) ---------- */
.nav-movil { display: none !important; }
@media (max-width: 600px) {
  .enc { flex-wrap: wrap; gap: 6px; }
  .enc .marca { flex: 1 1 0; min-width: 0; max-width: 40%; }
  .enc .marca small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #menuLocal[data-corto] { font-size: 0 !important; }
  #menuLocal[data-corto]::after { content: attr(data-corto); font-size: 11.5px; }
  .enc-sel { flex: 0 1 60%; min-width: 0; display: flex; gap: 6px; margin-left: 0; }
  .enc-sel #btnNegocio { flex: 1 1 57%; min-width: 0; max-width: none; overflow: hidden; }
  .enc-sel #btnNegocio .bn-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .enc-sel #btnNegocio .bn-flecha { display: none; }
  .enc-sel #sucursalCaja { flex: 1 1 43%; min-width: 0; }
  .enc-sel #sucursalCaja select { width: 100%; max-width: none !important; }
  .enc-esp, .btn-alertas { display: none !important; }
  .sel-producto { order: 20; flex: 1 0 100%; justify-content: center; margin: 2px 0 0; }
}
@media (min-width: 601px) and (max-width: 860px) { #menuLocal { max-width: none !important; white-space: nowrap; } }

/* Barra de abajo: en celular vertical caben 5 accesos + "Más"; de lado o en tablet, 6 */
@media (max-width: 600px) and (orientation: portrait) { [data-barra-abajo="si"] .nav-movil [data-pos="6"] { display: none !important; } }
.pers-barra-cfg { border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px 12px; margin-top: 8px; }
.pbc-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pbc-lugar { margin: 0; } .pbc-lugar > span { font-weight: 800; font-size: 13px; } .pbc-lugar small { font-weight: 400; color: var(--cacao); }
.pbc-lugar select { width: 100%; }

/* ⓘ: con la ayuda de la pantalla apagada, sus secciones se ven apagadas y no se pueden tocar (04-11-2026) */
.ip-lista.desactivada, .ay-subs.desactivada .ay-sub { opacity: .45; pointer-events: none; filter: grayscale(1); }

/* Micrófono SKIR: simple, en blanco y negro (reemplaza los emojis 🎙️/🎤) — 04-11-2026 */
.ic-mic { width: 100%; height: 100%; display: block; }
.mic-circulo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1d211f; color: #fff; padding: 6px; flex: 0 0 auto; }
:root[data-theme="dark"] .mic-circulo { background: #fff; color: #1d211f; }
.btn-ia[data-ia-voz], .ia-mic { display: inline-flex; align-items: center; justify-content: center; }
.ia-de-voz { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; opacity: .8; }
.btn-voz-ia { display: inline-flex; align-items: center; gap: 8px; }
.btn-voz-ia .mic-circulo { width: 26px; height: 26px; padding: 5px; }
.ia-mic.escuchando .mic-circulo, .btn-voz-ia.escuchando .mic-circulo, .btn-ia.escuchando .mic-circulo { background: #e5484d; color: #fff; }
@media (max-width: 860px) {
  /* Botón flotante del asistente: círculo blanco con micrófono negro */
  .btn-voz-ia { bottom: 16px !important; background: #fff !important; color: #1d211f !important; border: 1px solid rgba(0,0,0,.12) !important; box-shadow: 0 6px 18px rgba(0,0,0,.25) !important; width: 54px !important; height: 54px !important; padding: 0 !important; }
  .btn-voz-ia .mic-circulo { background: transparent; color: #1d211f; width: 30px; height: 30px; padding: 2px; }
  [data-barra-abajo="si"] .btn-voz-ia { bottom: 78px !important; }
  .btn-voz-ia.escuchando { background: #e5484d !important; } .btn-voz-ia.escuchando .mic-circulo { color: #fff; background: transparent; }
}
.btn-voz-ia .mic-circulo { display: inline-grid !important; }

/* Asistente "pensando": puntos animados (04-11-2026) */
.ia-msj.pensando .ia-burbuja { opacity: .75; font-style: italic; }
.ia-msj.pensando .ia-burbuja::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: ia-puntos 1.2s steps(4, end) infinite; }
@keyframes ia-puntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }