/* =============================================================================
   BLUE CEFF WEB  ·  El aspecto
   --------------------------------------------------------------------------
   El mismo lenguaje visual del sistema de escritorio —tarjetas redondeadas,
   grises que no gritan, un solo azul que manda— pero pensado primero para una
   mano y una pantalla de seis pulgadas: todo lo que se toca mide 44 píxeles,
   lo importante queda al alcance del pulgar y nada se apoya abajo de la barra
   del teléfono.
   ========================================================================== */

:root {
  /*  El color del sistema. Lo cambia el administrador desde Usuarios, y puede
      ser distinto para cada persona: con varios equipos usando lo mismo,
      mirar la pantalla y saber con qué usuario estás adentro evita cargar la
      venta en la caja equivocada.                                          */
  --acento:       #0A84FF;
  --acento-hover: #3D9BFF;
  --acento-suave: rgba(10, 132, 255, .14);

  --azul:        var(--acento);
  --azul-hover:  var(--acento-hover);
  --azul-suave:  var(--acento-suave);
  --verde:       #30D158;
  --rojo:        #FF453A;
  --naranja:     #FF9F0A;
  --violeta:     #BF5AF2;

  --fondo:       #000000;
  --panel:       #1C1C1E;
  --panel2:      #2C2C2E;
  --campo:       #2C2C2E;
  --campo-hi:    #3A3A3C;
  --borde:       rgba(255,255,255,.09);
  --texto:       #FFFFFF;
  --texto2:      rgba(235,235,245,.62);
  --texto3:      rgba(235,235,245,.34);

  --r-chico: 10px;
  --r:       16px;
  --r-grande: 22px;
  --r-pill:  999px;

  --barra-alta: 56px;
  --tabs-alta:  56px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);

  --sombra: 0 8px 30px rgba(0,0,0,.45);

  /* ====================================================== EL CARACTER ====
     Que cara tiene el sistema. No es «una fuente»: es el conjunto -con que
     se escriben los titulos, cuanto se separan las letras de las etiquetas
     chiquitas, que tan rectas son las esquinas-. Cambiar solo la fuente
     deja el mismo sistema con otra letra.

     Lo que viene puesto es «Taller»: el cuerpo del texto se escribe con la
     letra del sistema -se lee todo el dia, ahi no se experimenta- y el
     caracter esta en los TITULOS, en las etiquetas y en los numeros, que
     es donde se nota sin molestar.

     Bahnschrift viene con Windows desde 2017; es la que le da el aire
     tecnico. Donde no esta, la pila sigue con otras del mismo tipo y, en
     ultima instancia, con la del sistema: nunca queda sin dibujar.      */
  /*  El cuerpo del texto queda COMO ESTABA. Le habia puesto «Segoe UI
      Variable Text» adelante y se ve peor: en Windows 11 esa version sale
      mas fina y mas lavada que la de siempre, y es la letra con la que se
      lee todo el dia -las listas, los precios, los nombres de los
      clientes-. El caracter va en los titulos y en los numeros, que es
      donde se nota sin molestar.                                       */
  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --tipo-titulo: "Bahnschrift", "DIN Alternate", "Oswald",
                 "Segoe UI Variable Display", "Segoe UI Semibold",
                 "Helvetica Neue", system-ui, sans-serif;
  --peso-titulo: 600;
  --track-titulo: -.2px;
  /*  Las etiquetas en mayuscula -«TOTAL ADEUDADO», «RUBRO»- separadas. Es lo
      que las hace leer como rotulo y no como texto gritado.              */
  --track-micro: 1.1px;

  --r-chico: 9px;
  --r:       13px;
  --r-grande: 18px;
  --r-pill:  999px;

  color-scheme: dark;
}

/*  Los titulos, el nombre del negocio, los numeros grandes y los rotulos en
    mayuscula. Todo lo que no es texto corrido.                           */
h1, h2, h3, .titulo2, .headline, .tile .vl, .kpi b, .iv-kpi b,
.val-n b, .as-num, .cat-tapa-txt h2 {
  font-family: var(--tipo-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--track-titulo);
}

/*  LOS NUMEROS, ALINEADOS. Con cifras de ancho variable una columna de
    precios queda en diagonal y hay que leer cada renglon para compararlo;
    con cifras de ancho fijo las unidades caen una abajo de la otra y la
    columna se lee de un vistazo. Es la diferencia entre una planilla y una
    lista de numeros.                                                     */
.tile .vl, .kpi b, .iv-kpi b, .val-n b, .as-num, .val-tabla td.n,
.fila .val .v1, .tabla-simple td, .barras .v, .plata, td.n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.seccion-tit h2, .caption2.rotulo, .val-tabla th, .val-n .et, .tile .et,
.as-grupo .tit, .cos-grupo {
  font-family: var(--tipo-titulo);
  letter-spacing: var(--track-micro);
}

/* ---------------------------------------------------------- EDITORIAL --- */
/*  Titulos con remates, como un informe bien hecho.                      */
:root[data-caracter="editorial"] {
  --tipo-titulo: "Constantia", "Iowan Old Style", Georgia,
                 "Times New Roman", serif;
  --peso-titulo: 600;
  --track-titulo: -.1px;
  --track-micro: .9px;
  --r-chico: 8px;
  --r:       14px;
  --r-grande: 20px;
}

/* ------------------------------------------------------------ REDONDO --- */
/*  Todo mas blando y mas abierto, para un negocio de cara amable.        */
:root[data-caracter="redondo"] {
  --tipo: "Nunito", "Quicksand", "Varela Round", "Trebuchet MS",
          "Segoe UI", system-ui, sans-serif;
  --tipo-titulo: "Nunito", "Quicksand", "Varela Round", "Trebuchet MS",
                 "Segoe UI", sans-serif;
  --peso-titulo: 700;
  --track-titulo: -.3px;
  --track-micro: .8px;
  --r-chico: 14px;
  --r:       20px;
  --r-grande: 28px;
}

/* ------------------------------------------------------------ CLASICO --- */
/*  Como venia antes de todo esto. Nada se pierde: se elige.              */
:root[data-caracter="clasico"] {
  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --tipo-titulo: var(--tipo);
  --peso-titulo: 700;
  --track-titulo: -.4px;
  --track-micro: .5px;
  --r-chico: 10px;
  --r:       16px;
  --r-grande: 22px;
}

:root[data-tema="claro"] {
  --fondo:    #F2F2F7;
  --panel:    #FFFFFF;
  --panel2:   #F2F2F7;
  --campo:    #EFEFF4;
  --campo-hi: #E5E5EA;
  --borde:    rgba(0,0,0,.10);
  --texto:    #000000;
  --texto2:   rgba(60,60,67,.62);
  --texto3:   rgba(60,60,67,.32);
  --azul-suave: rgba(10,132,255,.12);
  --sombra: 0 8px 30px rgba(0,0,0,.14);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--texto);
  font-family: var(--tipo);
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { padding-top: var(--seguro-arriba); }

img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }

/* Las tipografías del sistema, con los mismos nombres que en el escritorio */
.titulo   { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.titulo2  { font-size: 20px; font-weight: 650; letter-spacing: -.3px; }
.headline { font-size: 15px; font-weight: 600; }
.body     { font-size: 15px; }
.caption  { font-size: 13px; color: var(--texto2); }
.caption2 { font-size: 12px; color: var(--texto3); line-height: 1.4; }
.mono     { font-variant-numeric: tabular-nums; }
.grande   { font-size: 30px; font-weight: 700; letter-spacing: -1px;
            font-variant-numeric: tabular-nums; }

.verde   { color: var(--verde); }
.rojo    { color: var(--rojo); }
.naranja { color: var(--naranja); }
.azul    { color: var(--azul); }
.apagado { color: var(--texto2); }
.centro  { text-align: center; }
.derecha { text-align: right; }

/* ============================================================== estructura */
#app { min-height: 100%; }

.barra {
  position: sticky; top: 0; z-index: 40;
  height: var(--barra-alta);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--borde);
}
.barra h1 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .sub { font-size: 11px; color: var(--texto3); margin-top: -2px; }
.barra-fin { margin-left: auto; display: flex; align-items: center; gap: 6px; }

main {
  padding: 14px 14px calc(var(--tabs-alta) + var(--seguro-abajo) + 20px);
  max-width: 1100px; margin: 0 auto;
}

/* ------------------------------------------------- barra de abajo (celular) */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  padding-bottom: var(--seguro-abajo);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--borde);
}
.tabs button {
  flex: 1; min-width: 0; height: var(--tabs-alta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: 0; background: none; cursor: pointer;
  color: var(--texto3); font-size: 10px; font-weight: 600;
  padding: 0 2px;
}
.tabs button .ic { font-size: 21px; line-height: 1; }
.tabs button.on { color: var(--azul); }
.tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                    max-width: 100%; }

/* ------------------------------------------------------ costado (escritorio) */
.costado { display: none; }

@media (min-width: 900px) {
  .tabs { display: none; }
  /*  El que se abre en dos es #app, no el body: adentro de #app viven el
      costado y el cuerpo. Poniendo el flex en el body, #app quedaba siendo un
      hijo suelto que se encogía al ancho de su contenido, y toda la pantalla
      terminaba metida en una columna angosta contra el costado.              */
  #app { display: flex; align-items: stretch; width: 100%; min-height: 100vh; }
  .costado {
    display: flex; flex-direction: column;
    width: 236px; flex: 0 0 236px; height: 100vh;
    position: sticky; top: 0;
    padding: 18px 12px; gap: 2px;
    /*  El MISMO fondo que el resto de la pantalla. Antes el costado era del
        color de las tarjetas y el cuerpo del color del fondo: se veía la
        costura entre los dos, una franja más clara pegada al borde. Ahora es
        una sola superficie y lo que flota encima son las tarjetas, que es lo
        que tiene que resaltar.                                          */
    background: var(--fondo); border-right: 1px solid var(--borde);
    overflow-y: auto;
  }
  /*  La esquina de arriba: el logo chico al lado del nombre del negocio.  */
  /*  El rotulo de cada grupo. Chiquito, en mayuscula y bien separado: tiene
      que ordenar sin competir con los accesos, que son lo que se toca.  */
  .cos-bloque { display: flex; flex-direction: column; gap: 2px; }
  .cos-bloque:first-of-type { margin-top: 2px; }
  .cos-bloque + .cos-bloque {
    margin-top: 7px; padding-top: 7px;
    border-top: 1px solid var(--borde);
  }
  .cos-grupo {
    padding: 10px 11px 5px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; color: var(--texto3);
  }
  .costado .marca {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px;
  }
  .costado .marca-logo {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: var(--campo);
  }
  .costado .marca-logo img { width: 100%; height: 100%; object-fit: contain; }
  .costado .marca-logo.inicial {
    background: linear-gradient(155deg, var(--azul) 0%, #0050C8 100%);
    color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.4px;
  }
  .costado .marca-txt { min-width: 0; }
  .costado .marca b {
    font-size: 16px; letter-spacing: -.3px; display: block; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .costado .marca .caption2 {
    margin-top: 1px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .costado a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--r-chico);
    color: var(--texto2); text-decoration: none; font-size: 14px; font-weight: 550;
    cursor: pointer;
  }
  .costado a .ic { font-size: 17px; width: 22px; text-align: center; }
  .costado a:hover { background: var(--campo); color: var(--texto); }
  .costado a.on { background: var(--azul-suave); color: var(--azul); }
  .costado .pie { margin-top: auto; padding-top: 14px; }
  #cuerpo { flex: 1; min-width: 0; }
  /*  En la computadora la pantalla se usa entera: el tope de 1100 px que sirve
      para que un texto largo no quede de lado a lado acá sólo dejaba media
      pantalla vacía, y esto es un sistema de gestión, con tablas anchas.     */
  main { padding: 20px 26px 60px; max-width: none; }
  .barra { height: 62px; padding: 0 26px; }
}

/* =============================================================== tarjetas */
.card {
  background: var(--panel); border-radius: var(--r);
  padding: 16px; border: 1px solid var(--borde);
  margin-bottom: 12px;
}
.card.ajustada { padding: 0; overflow: hidden; }
.card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }

.seccion-tit {
  display: flex; align-items: baseline; gap: 8px;
  margin: 22px 2px 10px;
}
.seccion-tit h2 { margin: 0; font-size: 13px; font-weight: 700;
                  text-transform: uppercase; letter-spacing: .6px; color: var(--texto3); }
.seccion-tit .acc { margin-left: auto; font-size: 13px; color: var(--azul);
                    cursor: pointer; font-weight: 600; }

/* ------------------------------------------------- el membrete del panel */
/*  El logo y el nombre del negocio arriba del panel. Cuando el sistema lo usan
    varias personas en varios equipos, ver de quién es la pantalla que estás
    mirando no es decoración.                                                */
.membrete {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
}
.membrete-logo {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px;
  overflow: hidden; background: var(--panel); border: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
}
.membrete-logo img { width: 100%; height: 100%; object-fit: contain; }
.membrete-logo.inicial {
  background: linear-gradient(155deg, var(--azul) 0%, #0050C8 100%);
  border-color: transparent; color: #fff;
  font-size: 22px; font-weight: 700; letter-spacing: -.5px;
}
.membrete-txt { min-width: 0; }
/*  El nombre del negocio usa la letra de la marca, la misma que el costado.
    Antes se dibujaba con la del sistema: el nombre era un título más, del
    mismo gris que todo lo demás, y no se parecía en nada al de la barra.  */
.membrete-txt .n {
  font-size: 23px; font-weight: 700; letter-spacing: -.3px; line-height: 1.12;
  font-family: var(--tipo-marca, var(--tipo));
  font-style: var(--marca-estilo, normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /*  Un degradé muy corto hacia el acento. Le da el brillo que tiene el del
      costado sin llegar a ser un color: el nombre sigue siendo texto.    */
  background: linear-gradient(95deg, var(--texto) 30%,
              color-mix(in srgb, var(--acento) 60%, var(--texto)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--texto);
  padding-bottom: 1px;
}
.membrete-txt .f {
  font-size: 11px; color: var(--texto3); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .1em;
}
/*  El membrete del panel se muestra siempre.

    Antes se escondia en la computadora, con la idea de no repetir la marca
    porque ya esta en la esquina de la barra. El efecto real era otro: el que
    subia «Logo del panel» lo veia en el telefono y no en la computadora, sin
    ninguna explicacion, y daba la sensacion de que unos logos andan y otros
    no. Si a alguien le sobra, no sube ese logo y listo.                   */

/* ------------------------------------------------------------- KPI tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 14px;
}
.tile .et { font-size: 11px; font-weight: 700; letter-spacing: .5px;
            text-transform: uppercase; color: var(--texto3); }
.tile .vl { font-size: 23px; font-weight: 700; letter-spacing: -.6px; margin-top: 4px;
            font-variant-numeric: tabular-nums; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.tile .pie { font-size: 11px; color: var(--texto2); margin-top: 2px; }
.tile.destacada { background: linear-gradient(160deg, var(--azul) 0%, #0060DF 100%);
                  border-color: transparent; }
.tile.destacada .et, .tile.destacada .pie { color: rgba(255,255,255,.75); }
.tile.destacada .vl { color: #fff; }

/* =============================================================== filas */
.lista { display: flex; flex-direction: column; }
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 58px;
  border-bottom: 1px solid var(--borde);
  cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; color: inherit;
}
.fila:last-child { border-bottom: 0; }
.fila:active { background: var(--campo); }
.fila .txt { flex: 1; min-width: 0; }
.fila .t1 { font-size: 15px; font-weight: 550; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.fila .t2 { font-size: 12.5px; color: var(--texto2); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.fila .val { text-align: right; font-variant-numeric: tabular-nums;
             white-space: nowrap; }
.fila .val .v1 { font-size: 15px; font-weight: 650; }
.fila .val .v2 { font-size: 11.5px; color: var(--texto2); }
.fila .flecha { color: var(--texto3); font-size: 17px; margin-left: -4px; }

.av {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--campo); font-size: 18px; font-weight: 650;
  overflow: hidden;
}
.av img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================== botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-chico);
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 650;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:active { opacity: .78; }
.btn:disabled { opacity: .38; cursor: default; }
.btn.ancho { width: 100%; }
.btn.gris { background: var(--campo); color: var(--texto); }
.btn.verde { background: var(--verde); color: #04270F; }
.btn.rojo  { background: var(--rojo); }
.btn.hueco { background: transparent; color: var(--azul);
             box-shadow: inset 0 0 0 1.5px var(--azul); }
.btn.chico { min-height: 34px; padding: 0 13px; font-size: 13.5px; border-radius: 9px; }
.btn.pill  { border-radius: var(--r-pill); }

.icb {
  width: 38px; height: 38px; border-radius: var(--r-pill); border: 0;
  background: var(--campo); color: var(--texto); font-size: 17px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex: 0 0 38px;
}
.icb:active { background: var(--campo-hi); }
.icb.azul { background: var(--azul); color: #fff; }

.botonera { display: flex; gap: 8px; flex-wrap: wrap; }
/*  Crecen hasta donde tiene sentido y ahí paran.
    Antes era «flex: 1» a secas: cada botón se estiraba hasta llenar el ancho
    del contenedor. En el celular queda bien -dos botones, mitad y mitad- pero
    en un monitor de 1600 px un solo botón medía metro y medio y la pantalla
    era una pila de tablones. El tope los deja repartirse el ancho cuando hay
    poco y quedarse de un tamaño normal cuando sobra.                      */
.botonera .btn { flex: 1; min-width: 120px; }
/*  El tope vale sólo donde sobra ancho. En un teléfono los botones tienen que
    seguir repartiéndose el renglón: con el tope puesto quedaban dos botones
    de 260 px y un hueco al costado, que es peor que el problema original. */
@media (min-width: 640px) {
  .botonera .btn { max-width: 260px; }
  /*  Cuando de verdad tiene que ocupar todo -un «Facturar» al pie de la
      venta- se pide a mano con «ancho».                                   */
  .botonera .btn.ancho { max-width: none; }
}

/* =============================================================== campos */
.campo { margin-bottom: 12px; }
.campo > label {
  display: block; font-size: 12px; font-weight: 650; color: var(--texto2);
  margin: 0 0 5px 2px; text-transform: uppercase; letter-spacing: .4px;
}
input[type=text], input[type=number], input[type=date], input[type=tel],
input[type=email], input[type=password], input[type=time], select, textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  background: var(--campo); border: 1px solid transparent; border-radius: var(--r-chico);
  color: var(--texto);
  /* 16px es el mínimo: por debajo, iOS hace zoom solo al tocar el campo */
  font-size: 16px;
  outline: none; appearance: none;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.45; }

/*  El relojito que Chrome dibuja adentro del campo de hora viene negro sobre
    negro y no se ve. Se lo invierte con el tema oscuro y se lo deja como
    está con el claro.                                                     */
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(.65); cursor: pointer;
}
:root[data-tema="claro"] input[type=time]::-webkit-calendar-picker-indicator {
  filter: none; opacity: .55;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul);
                                            background: var(--campo-hi); }
input::placeholder, textarea::placeholder { color: var(--texto3); }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238E8E93' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.buscador { position: relative; margin-bottom: 12px; }
.buscador input { padding-left: 40px; min-height: 48px; border-radius: 12px; }
.buscador .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
                  color: var(--texto3); font-size: 16px; pointer-events: none; }
.buscador .limpiar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                     width: 32px; height: 32px; border: 0; border-radius: var(--r-pill);
                     background: var(--campo-hi); color: var(--texto2); cursor: pointer; }

/* chips de filtro */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 8px;
         scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 14px; border-radius: var(--r-pill); border: 0;
  background: var(--campo); color: var(--texto2); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; min-height: 34px;
}
.chip.on { background: var(--azul); color: #fff; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  background: var(--campo); color: var(--texto2);
}
.etiqueta.verde  { background: rgba(48,209,88,.16);  color: var(--verde); }
.etiqueta.rojo   { background: rgba(255,69,58,.16);  color: var(--rojo); }
.etiqueta.naranja{ background: rgba(255,159,10,.16); color: var(--naranja); }
.etiqueta.azul   { background: var(--azul-suave);    color: var(--azul); }

/* barra de progreso */
.barrita { height: 6px; border-radius: 3px; background: var(--campo); overflow: hidden; }
.barrita > i { display: block; height: 100%; background: var(--azul); border-radius: 3px; }

/* =============================================================== vacío */
.vacio { text-align: center; padding: 44px 20px; color: var(--texto2); }
.vacio .ic { font-size: 40px; opacity: .45; }
.vacio h3 { margin: 12px 0 5px; font-size: 16px; color: var(--texto); font-weight: 600; }
.vacio p { margin: 0 auto; max-width: 300px; font-size: 13.5px; line-height: 1.5; }

/* =============================================================== hojas */
.telon {
  /*  Arriba de la consola de carga rápida, que vale 320. Una hoja es lo
      último que abrió el que está usando el sistema: si quedara debajo,
      el botón que la abre parecería no hacer nada.                     */
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: aparecer .18s ease;
}
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(100%); } }
.hoja {
  width: 100%; max-width: 640px; max-height: 92vh;
  background: var(--panel); border-radius: var(--r-grande) var(--r-grande) 0 0;
  display: flex; flex-direction: column;
  animation: subir .26s cubic-bezier(.32,.72,0,1);
  padding-bottom: var(--seguro-abajo);
}
@media (min-width: 640px) {
  .telon { align-items: center; }
  .hoja { border-radius: var(--r-grande); max-height: 86vh;
          animation: aparecer .2s ease; }
}
.hoja .tope {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--borde);
}
.hoja .tope h2 { margin: 0; font-size: 18px; font-weight: 680; letter-spacing: -.3px;
                 flex: 1; min-width: 0; }
.hoja .tope .sub { font-size: 12.5px; color: var(--texto2); margin-top: 1px;
                   font-weight: 400; }
.hoja .cuerpo { padding: 16px 18px; overflow-y: auto; flex: 1;
                -webkit-overflow-scrolling: touch; }
.hoja .pie {
  padding: 12px 18px 16px; border-top: 1px solid var(--borde);
  display: flex; gap: 9px;
}
.hoja .pie .btn { flex: 1; }
.agarre { width: 38px; height: 5px; border-radius: 3px; background: var(--campo-hi);
          margin: 8px auto 0; }

/* =============================================================== avisos */
#avisos {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-alta) + var(--seguro-abajo) + 14px);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100% - 24px)); pointer-events: none;
}
@media (min-width: 900px) { #avisos { bottom: 22px; } }
.aviso {
  background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 13px;
  padding: 12px 15px; font-size: 14px; font-weight: 550;
  box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 10px;
  animation: entrar .24s cubic-bezier(.32,.72,0,1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
.aviso.ok   { border-left: 4px solid var(--verde); }
.aviso.mal  { border-left: 4px solid var(--rojo); }
.aviso.ojo  { border-left: 4px solid var(--naranja); }
.aviso .ic { font-size: 17px; }

/* =============================================================== entrar
   --------------------------------------------------------------------------
   Una sola pantalla para el celular y para la computadora. Antes eran dos
   mitades —una franja azul con el nombre y, al lado, el teclado— y en la
   computadora esa franja se comía el 42% del monitor para no decir nada. Ahora
   es una sola columna centrada: el logo, el nombre y el teclado, uno abajo del
   otro. En el teléfono ocupa la pantalla; en la computadora queda flotando en
   el medio, del mismo tamaño.

   El fondo no es un color plano: son dos luces suaves del color de acento,
   quietas, que le dan profundidad sin distraer. Lo único que hay que hacer acá
   es entrar.                                                                */
.entrada {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 28px 22px calc(24px + var(--seguro-abajo));
  /*  En la computadora #app es una fila (la barra lateral y el cuerpo). Sin
      esto, la pantalla de entrada entra ahí como un hijo más y se encoge al
      ancho de su contenido: quedaba una tira de 296 px pegada a la izquierda
      en un monitor de 1440.                                                 */
  flex: 1 1 auto; width: 100%;
}
/*  Las dos luces del fondo. Van en un ::before para que no se puedan tocar ni
    se lleven un clic del teclado.                                           */
.entrada::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 26% at 26% 10%, color-mix(in srgb, var(--azul) 52%, transparent) 0%, transparent 68%),
    radial-gradient(30% 24% at 78% 26%, color-mix(in srgb, var(--violeta) 26%, transparent) 0%, transparent 70%),
    radial-gradient(46% 34% at 50% 96%, color-mix(in srgb, var(--azul) 30%, transparent) 0%, transparent 72%);
  filter: blur(22px);
}
:root[data-tema="claro"] .entrada::before { opacity: .38; }

.entrada .caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 348px;
  display: flex; flex-direction: column; align-items: center;
}
.entrada .marca-lado,
.entrada .acceso-lado {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}
.entrada .acceso-tit { display: none; }
.entrada .pie-marca { display: contents; }

/*  El logo del negocio. Si no hay ninguno cargado, en vez de un cuadrado vacío
    va la inicial del nombre, que al menos dice de quién es el sistema.       */
.entrada .logo {
  width: 84px; height: 84px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(155deg, var(--azul) 0%, #0050C8 100%);
  color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -1px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--azul) 34%, transparent);
}
.entrada .logo img { width: 100%; height: 100%; object-fit: contain; }
.entrada h1 {
  margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.7px;
  text-align: center; line-height: 1.2;
}
.entrada .bajada {
  margin: 5px 0 0; font-size: 14px; color: var(--texto2); text-align: center;
}

/* ---------------------------------------------------------- el campo clave */
.campo-clave {
  position: relative; width: 100%; max-width: 300px; margin: 26px auto 0;
}
.campo-clave input {
  width: 100%; min-height: 52px; padding: 13px 48px 13px 16px;
  border-radius: 14px; font-size: 16px; letter-spacing: .4px;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  border: 1.5px solid transparent; color: var(--texto);
}
.campo-clave input:focus {
  border-color: var(--azul);
  background: color-mix(in srgb, var(--texto) 12%, transparent);
}
.campo-clave.mal input { border-color: var(--rojo); animation: sacudir .4s; }
.campo-clave .ojito {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; opacity: .65;
}
.campo-clave .ojito:hover { opacity: 1; }

.entrada .cambiar-modo {
  margin-top: 20px; background: none; border: 0; cursor: pointer;
  color: var(--texto2); font-size: 13px; font-weight: 600; padding: 8px 10px;
  border-radius: 8px; font-family: inherit;
}
.entrada .cambiar-modo:hover { color: var(--azul);
                               background: color-mix(in srgb, var(--texto) 7%, transparent); }

/*  Volver al primer cuadro. Discreto a propósito: el camino normal es
    seguir para adelante, esto es para el que se equivocó de clave.        */
.entrada .volver-paso {
  margin-top: 18px; background: none; border: 0; cursor: pointer;
  color: var(--texto2); font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; font-family: inherit;
}
.entrada .volver-paso:hover {
  color: var(--texto);
  background: color-mix(in srgb, var(--texto) 7%, transparent);
}

.entrada .aviso-fabrica {
  margin-top: 16px; max-width: 300px; padding: 10px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; text-align: center;
  background: rgba(255, 159, 10, .14); color: var(--naranja);
  border: 1px solid rgba(255, 159, 10, .3);
}

/* ------------------------------------------------------------- los puntos */
.pin-vista {
  display: flex; gap: 14px; justify-content: center; align-items: center;
  margin: 30px 0 8px; min-height: 16px;
}
.pin-vista i {
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--texto3);
  transition: transform .14s cubic-bezier(.32,.72,0,1), background .14s;
}
.pin-vista i.lleno {
  background: var(--azul); box-shadow: inset 0 0 0 1.6px var(--azul);
  transform: scale(1.22);
}
.pin-vista.mal i.lleno { background: var(--rojo); box-shadow: inset 0 0 0 1.6px var(--rojo); }
.pin-vista.mal { animation: sacudir .4s; }
@keyframes sacudir {
  10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); }
}
.entrada .indicacion {
  font-size: 13px; color: var(--texto3); text-align: center;
  min-height: 18px; margin-bottom: 22px;
}
.entrada .indicacion.mal { color: var(--rojo); font-weight: 600; }

/* ------------------------------------------------------------- el teclado */
/*  Teclas redondas, como el candado del teléfono: es el gesto que la mano ya
    conoce. 72 px de lado, bien por encima del mínimo para el pulgar.        */
.teclado {
  display: grid; grid-template-columns: repeat(3, 72px);
  gap: 18px; justify-content: center;
}
.teclado button {
  width: 72px; height: 72px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--texto) 9%, transparent);
  color: var(--texto);
  font-size: 29px; font-weight: 400; cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: transform .09s, background .12s;
}
.teclado button:active {
  background: color-mix(in srgb, var(--texto) 20%, transparent);
  transform: scale(.93);
}
.teclado button.accion {
  background: transparent; color: var(--texto2);
}
.teclado button.accion:active { background: color-mix(in srgb, var(--texto) 12%, transparent); }
.teclado button.accion svg { width: 26px; height: 26px; }
.teclado button.ok {
  background: var(--azul); color: #fff; font-size: 24px; font-weight: 600;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--azul) 40%, transparent);
}
/*  Apagado, el botón no se pone azul pálido —que se lee como «roto»— sino gris
    como cualquier tecla que todavía no hace nada.                            */
.teclado button.ok:disabled {
  background: color-mix(in srgb, var(--texto) 9%, transparent);
  color: var(--texto3); box-shadow: none; cursor: default;
}
.teclado button.ok:disabled:active { transform: none; }

.entrada .pie {
  margin-top: 26px; font-size: 12px; color: var(--texto3); text-align: center;
  line-height: 1.5;
}

/* --------------------------------------------- el login de la computadora --
   Otra interfaz, no la misma agrandada. En la compu sobra ancho y falta alto,
   y se entra tipeando: por eso la marca va a la izquierda sobre color, el PIN
   a la derecha, y el teclado en pantalla queda como respaldo para el mouse.  */
@media (min-width: 900px) {
  .entrada { padding: 30px; }
  .entrada .caja {
    max-width: 840px; flex-direction: row; align-items: stretch;
    background: var(--panel); border-radius: 26px; overflow: hidden;
    border: 1px solid var(--borde);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2);
  }

  .entrada .marca-lado {
    flex: 0 0 44%; justify-content: center; align-items: flex-start;
    padding: 46px 40px; color: #fff; text-align: left;
    background: linear-gradient(158deg, var(--azul) 0%, #0047B8 100%);
    position: relative; overflow: hidden;
  }
  /*  Un brillo suave en diagonal, para que el panel de color no sea un bloque
      plano.                                                                 */
  .entrada .marca-lado::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 18% 8%, rgba(255,255,255,.22) 0%,
                                transparent 68%);
  }
  .entrada .marca-lado > * { position: relative; z-index: 1; }
  .entrada .marca-lado .logo {
    width: 74px; height: 74px; border-radius: 21px; margin-bottom: 26px;
    background: rgba(255, 255, 255, .16); box-shadow: none;
    backdrop-filter: blur(6px);
  }
  .entrada .marca-lado h1 { font-size: 30px; text-align: left; line-height: 1.15; }
  .entrada .marca-lado .bajada {
    color: rgba(255, 255, 255, .8); text-align: left; font-size: 14.5px;
    margin-top: 8px;
  }
  .entrada .marca-lado .pie-marca { display: block; margin-top: auto; }
  .entrada .marca-lado .pie {
    color: rgba(255, 255, 255, .62); text-align: left; margin: 34px 0 0;
    font-size: 12.5px;
  }

  .entrada .acceso-lado {
    flex: 1; justify-content: center; padding: 46px 40px;
  }
  .entrada .acceso-tit {
    display: block; font-size: 21px; font-weight: 680; letter-spacing: -.4px;
    margin-bottom: 4px;
  }
  .entrada .acceso-lado .pin-vista { margin: 24px 0 8px; }
  .entrada .acceso-lado .indicacion { margin-bottom: 26px; }
  /*  Más chico que en el celular: acá el teclado es el respaldo, no la vía
      principal. Quien está en la computadora tipea.                        */
  .entrada .teclado { grid-template-columns: repeat(3, 62px); gap: 12px; }
  .entrada .teclado button { width: 62px; height: 62px; font-size: 24px; }
  .entrada::before { opacity: .55; }
}

/*  Entre 900 y 1000 px de ancho la tarjeta no entra cómoda: se angosta el
    panel de color en vez de apretar el teclado.                             */
@media (min-width: 900px) and (max-width: 1040px) {
  .entrada .marca-lado { flex-basis: 40%; padding: 36px 28px; }
  .entrada .acceso-lado { padding: 36px 28px; }
}

/*  En pantallas bajas (un celular chico apaisado, o una notebook de 13") se
    achica todo un punto en vez de que el teclado quede cortado abajo.        */
@media (max-height: 700px) {
  .entrada .logo { width: 60px; height: 60px; border-radius: 18px;
                   font-size: 25px; margin-bottom: 12px; }
  .entrada h1 { font-size: 22px; }
  .pin-vista { margin: 18px 0 6px; }
  .entrada .indicacion { margin-bottom: 14px; }
  .teclado { grid-template-columns: repeat(3, 62px); gap: 13px; }
  .teclado button { width: 62px; height: 62px; font-size: 25px; }
  .entrada .pie { margin-top: 16px; }
}

/* ============================================================ facturación */
.carrito-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--borde);
}
.carrito-fila:last-child { border-bottom: 0; }
.carrito-fila .txt { flex: 1; min-width: 0; }
.contador { display: flex; align-items: center; gap: 2px;
            background: var(--campo); border-radius: var(--r-pill); padding: 2px; }
.contador button { width: 32px; height: 32px; border: 0; border-radius: var(--r-pill);
                   background: none; color: var(--azul); font-size: 18px;
                   cursor: pointer; font-weight: 600; }
.contador button:active { background: var(--campo-hi); }
.contador .n { min-width: 26px; text-align: center; font-size: 15px; font-weight: 650;
               font-variant-numeric: tabular-nums; }

.ticket {
  position: sticky; bottom: 0; z-index: 30;
  margin: 12px -14px calc(var(--tabs-alta) * -1 + 0px);
  padding: 14px 16px calc(14px + var(--tabs-alta) + var(--seguro-abajo));
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--borde);
}
@media (min-width: 900px) {
  .ticket { margin: 12px 0 0; padding: 16px; border-radius: var(--r);
            border: 1px solid var(--borde); position: sticky; bottom: 16px; }
}
.ticket .linea { display: flex; justify-content: space-between; align-items: baseline;
                 font-size: 13px; color: var(--texto2); margin-bottom: 3px; }
.ticket .total { display: flex; justify-content: space-between; align-items: baseline;
                 margin: 8px 0 12px; }
.ticket .total b { font-size: 27px; font-weight: 700; letter-spacing: -.8px;
                   font-variant-numeric: tabular-nums; }

.sugerencias { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================== gráficos */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barras .b { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px;
             align-items: center; font-size: 13px; }
.barras .b .n { color: var(--texto2); white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
.barras .b .v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.columnas { display: flex; align-items: flex-end; gap: 4px; height: 110px;
            padding-top: 8px; }
.columnas .c { flex: 1; min-width: 4px; background: var(--azul); border-radius: 3px 3px 0 0;
               min-height: 3px; opacity: .85; }
.columnas .c:hover { opacity: 1; }

/* =============================================================== varios */
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-simple th { text-align: left; font-size: 11px; text-transform: uppercase;
                   letter-spacing: .5px; color: var(--texto3); font-weight: 700;
                   padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.tabla-simple td { padding: 9px 8px; border-bottom: 1px solid var(--borde);
                   font-variant-numeric: tabular-nums; }
.tabla-simple tr:last-child td { border-bottom: 0; }

.aviso-caja {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,159,10,.12); border: 1px solid rgba(255,159,10,.3);
  border-radius: var(--r-chico); padding: 12px 14px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.45;
}
.aviso-caja .ic { font-size: 16px; }

.nota-cuenta {
  font-size: 12px; color: var(--texto2); background: var(--campo);
  border-radius: 8px; padding: 7px 10px; margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

.cargando { display: flex; justify-content: center; padding: 50px; }
.giro { width: 26px; height: 26px; border: 2.5px solid var(--campo-hi);
        border-top-color: var(--azul); border-radius: 50%;
        animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.sep { height: 1px; background: var(--borde); margin: 14px 0; }
.espacio { height: 16px; }

/* =============================================== tarjetas de producto =====
   En una lista todos los renglones se parecen y hay que leerlos. Con el
   precio grande a la derecha y el stock en una pastilla de color, cuál es
   cuál se ve sin leer.                                                     */
.prod-grilla { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 720px)  { .prod-grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .prod-grilla { grid-template-columns: repeat(3, 1fr); } }

.prod {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 13px 14px; border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); cursor: pointer; text-align: left; color: inherit;
  transition: background .12s, transform .08s;
}
.prod:active { transform: scale(.985); background: var(--campo); }
@media (hover: hover) { .prod:hover { background: var(--campo); } }
.prod-ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: var(--campo); display: flex; align-items: center;
  justify-content: center; font-size: 17px;
}
.prod-txt { flex: 1; min-width: 0; }
.prod-nom {
  font-size: 14.5px; font-weight: 600; line-height: 1.25;
  /*  Dos renglones y corta: los nombres largos no pueden empujar el precio
      fuera de la tarjeta.                                                  */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-sub { font-size: 12px; color: var(--texto2); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.prod-precio { text-align: right; flex: 0 0 auto; padding-left: 4px; }
.prod-precio .v { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px;
                  font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-precio .m { font-size: 11px; color: var(--texto3); margin-top: 2px;
                  white-space: nowrap; }

/* ------------------------------------------------------------- los rubros */
.rubros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px)  { .rubros { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .rubros { grid-template-columns: repeat(4, 1fr); } }
.rubro {
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 10px 13px; border: 1px solid var(--borde); border-radius: var(--r-chico);
  background: var(--panel); cursor: pointer; color: inherit; text-align: left;
  font-size: 13.5px; font-weight: 550;
}
.rubro:active { background: var(--campo); }
@media (hover: hover) { .rubro:hover { border-color: var(--azul); } }
.rubro .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; }
.rubro .c { font-size: 11.5px; font-weight: 700; color: var(--texto3);
            font-variant-numeric: tabular-nums; }

/* ========================================== diseño del comprobante ======= */
/*  La vista previa es el PDF de verdad adentro de un marco.                */
.vista-caja {
  background: #8E8E93; border-radius: var(--r-chico); overflow: hidden;
  padding: 8px; margin-bottom: 10px;
}
.vista-doc {
  width: 100%; height: 46vh; min-height: 260px; border: 0; border-radius: 6px;
  background: #fff; display: block;
}
@media (min-width: 640px) { .vista-doc { height: 52vh; } }

.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.color.on { box-shadow: 0 0 0 2.5px var(--panel), 0 0 0 5px var(--azul); }
.color.ninguno {
  background: var(--campo); color: var(--texto3); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------- el catálogo a pantalla llena -
   En el recuadro chico del celular no se puede ver cómo queda una hoja: hay
   que poder abrirla grande.                                                 */
.vista-llena {
  position: fixed; inset: 0; z-index: 150; background: #4A4A4E;
  display: flex; flex-direction: column;
  padding-top: var(--seguro-arriba);
  padding-bottom: var(--seguro-abajo);
  animation: aparecer .18s ease;
}
.vista-llena-barra {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  flex: 0 0 auto;
}
.vista-llena-barra b { flex: 1; font-size: 15px; font-weight: 650;
                       white-space: nowrap; overflow: hidden;
                       text-overflow: ellipsis; }
.vista-llena iframe { flex: 1; min-height: 0; }

/* ============================================= el módulo del catálogo ==== */
.cat-barra {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}

/*  La tarjeta grande de la portada: cuántos productos hay y si está listo. */
.cat-hero {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(155deg, var(--azul) 0%, #0050C8 100%);
  color: #fff; border-radius: var(--r); padding: 18px;
  margin-bottom: 12px;
}
.cat-hero-txt { flex: 1; min-width: 0; }
.cat-hero .et { font-size: 11px; font-weight: 700; letter-spacing: .6px;
                color: rgba(255,255,255,.72); }
.cat-hero .n { font-size: 38px; font-weight: 700; letter-spacing: -1.2px;
               line-height: 1.05; margin-top: 2px; }
.cat-hero .d { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 2px; }
.cat-hero-est .etiqueta { background: rgba(255,255,255,.2); color: #fff; }
.cat-hero-est .etiqueta.verde { background: rgba(255,255,255,.22); color: #fff; }

/*  El menú de secciones. Renglones grandes, porque cada uno es un trabajo. */
.cat-menu { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) { .cat-menu { grid-template-columns: repeat(2, 1fr); } }
.cat-op {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 62px; padding: 12px 15px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r); cursor: pointer; color: inherit; text-align: left;
}
.cat-op:active { background: var(--campo); }
@media (hover: hover) { .cat-op:hover { border-color: var(--azul); } }
.cat-op .ic { font-size: 21px; width: 30px; text-align: center; flex: 0 0 30px; }
.cat-op .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-op .t { font-size: 15px; font-weight: 600; }
.cat-op .s { font-size: 12.5px; color: var(--texto2); margin-top: 1px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-op .fl { color: var(--texto3); font-size: 18px; }

.cat-rubro {
  padding: 11px 16px 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; color: var(--texto3); text-transform: uppercase;
}

/*  La miniatura del producto en las listas. */
.cat-mini {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px;
  overflow: hidden; background: var(--campo);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--texto3);
}
.cat-mini img { width: 100%; height: 100%; object-fit: cover; }
.cat-mini.grande { width: 66px; height: 66px; flex-basis: 66px; border-radius: 14px;
                   font-size: 24px; }

.aviso-caja.suave {
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  border-color: var(--borde); color: var(--texto2);
}
.aviso-caja .btn.chico { flex: 0 0 auto; }

/* ------------------------------------------------------ grilla de fotos - */
.foto-grilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (min-width: 640px)  { .foto-grilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .foto-grilla { grid-template-columns: repeat(6, 1fr); } }
.foto-cel {
  position: relative; aspect-ratio: 1; border-radius: var(--r-chico);
  overflow: hidden; border: 1px solid var(--borde); background: var(--panel);
  cursor: pointer; padding: 0; display: block;
}
.foto-cel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-cel .mas { font-size: 26px; color: var(--texto3);
                 display: flex; align-items: center; justify-content: center;
                 height: 100%; }
.foto-cel .nom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 6px 5px; font-size: 10.5px; line-height: 1.2; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-align: left;
}
.foto-cel.vacia { border-style: dashed; border-color: var(--campo-hi); }
.foto-cel.vacia .nom { background: none; color: var(--texto2);
                       text-shadow: none; }

.foto-previa {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--r-chico);
  background: var(--campo); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.foto-previa img { width: 100%; height: 100%; object-fit: contain; }

input[type=range] {
  appearance: none; background: transparent; height: 26px; padding: 0;
  border: 0; width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--campo-hi);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; margin-top: -9px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--campo-hi);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* =============================================================================
   EL CATÁLOGO DIBUJADO EN PANTALLA
   --------------------------------------------------------------------------
   La hoja de acá abajo no es el sistema: es el catálogo. Por eso casi ningún
   color sale de las variables del tema —los pone el diseño que armó el
   usuario— y por eso la hoja se ve igual con la aplicación en claro o en
   oscuro. Si el catálogo se pintara con los colores del sistema, lo que se ve
   no sería lo que recibe el cliente.
   ========================================================================== */
.cat-hoja {
  position: relative;
  width: 100%;
  max-width: var(--ancho-papel, 210mm);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .10);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.cat-vista .cat-hoja { box-shadow: none; border-radius: 0; }
.cat-cuerpo { position: relative; z-index: 2; padding: var(--mrg, 6%); }

.cat-agua {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(38px, 13vw, 130px); font-weight: 800; letter-spacing: .06em;
  transform: rotate(-32deg); pointer-events: none; user-select: none;
  white-space: nowrap;
}
.cat-franja { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 3; }

/* ------------------------------------------------------------- la portada -- */
.cat-portada {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 40px 24px; border-radius: 8px; margin-bottom: 22px;
  min-height: 180px; overflow: hidden;
}
.cat-portada .cat-logo { max-height: 90px; object-fit: contain; margin-bottom: 6px; }
.cat-portada-t {
  font-size: clamp(20px, 4.2vw, 40px); font-weight: 800;
  letter-spacing: .02em; line-height: 1.1;
}
.cat-portada-s { font-size: clamp(12px, 2vw, 17px); opacity: .92; }
.cat-portada-e { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
                 opacity: .85; margin-top: 4px; }

/*  Banda lateral: el color queda en una franja a la izquierda y el título se
    apoya contra ella, como las tapas de catálogo de mayorista.              */
.cat-portada.e-bandalateral {
  align-items: flex-start; text-align: left; padding-left: 34px;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .18) 0 14px, transparent 14px);
}
/*  Bloque inferior: la tapa queda casi vacía y todo el texto se junta abajo,
    que es lo que deja lugar para poner una foto de fondo después.           */
.cat-portada.e-bloqueinferior {
  justify-content: flex-end; align-items: flex-start; text-align: left;
  min-height: 260px; padding-bottom: 30px;
}
.cat-portada.e-pantallacompleta { min-height: 340px; border-radius: 0;
  margin: calc(var(--mrg, 6%) * -1) calc(var(--mrg, 6%) * -1) 22px; }

/* ---------------------------------------------------------- el encabezado -- */
.cat-enc {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; margin-bottom: 16px; border-radius: 6px;
}
.cat-enc:not(.banda) { border-bottom: 1px solid currentColor; border-radius: 0;
                       padding-left: 0; padding-right: 0; opacity: .95; }
.cat-enc-logo { display: flex; align-items: center; }
.cat-enc-logo img { max-height: 34px; max-width: 120px; object-fit: contain; }
.cat-enc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-enc-txt b { font-size: 14px; }
.cat-enc-txt span { font-size: 11px; opacity: .8; }
.cat-enc-fecha { font-size: 11px; opacity: .8; white-space: nowrap; }

/* ------------------------------------------------------------- el índice -- */
.cat-indice { margin-bottom: 18px; font-size: 12px; }
.cat-indice-l { display: flex; justify-content: space-between; gap: 10px;
                padding: 3px 0; break-inside: avoid; opacity: .85; }

/* --------------------------------------------------- el título del rubro -- */
.cat-rubro {
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 10px; font-family: var(--ftit); font-weight: 700;
  font-size: 15px; letter-spacing: .02em;
}
.cat-rubro .n { font-size: 11px; font-weight: 500; opacity: .75; }
.cat-rubro.r-barra { padding: 7px 12px; border-radius: 5px; }
.cat-rubro.r-pastilla { display: inline-flex; padding: 5px 16px; border-radius: 999px; }
.cat-rubro.r-linea { border-bottom: 1.5px solid; padding-bottom: 5px; }
.cat-rubro.r-centrado { justify-content: center; text-align: center;
                        text-transform: uppercase; letter-spacing: .16em; }

/* ------------------------------------------------------------ la grilla --- */
.cat-grilla { display: grid; margin-bottom: 14px; }
.cat-grilla.con-sep > .cat-tarj { border-bottom: 1px solid currentColor; }

.cat-tarj {
  position: relative; display: flex; flex-direction: column;
  border-style: solid; border-radius: var(--rad, 3mm);
  padding: 8px; overflow: hidden; font: inherit; color: inherit;
  text-align: inherit; width: 100%;
}
button.cat-tarj { cursor: pointer; transition: transform .12s ease; }
button.cat-tarj:hover { transform: translateY(-2px); }
.cat-tarj.f-cuadrada { border-radius: 0; }
.cat-tarj.f-pastilla { border-radius: 14mm; }
.cat-tarj.f-sinmarco { border-width: 0 !important; padding: 4px 2px; }
.cat-tarj.ef-marcodoble { outline: 1px solid currentColor; outline-offset: 3px; }
.cat-tarj.ef-bordegrueso { border-width: 3px !important; }
.cat-tarj.ef-elevada { transform: translateY(-2px); }

.cat-marcas { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 3;
              display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.cat-badge { font-size: 9px; font-weight: 800; letter-spacing: .06em;
             padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }

/* ---------------------------------------------------------------- foto --- */
/*  El alto lo pone «aspect-ratio», que va en el estilo de cada foto: se
    calcula contra el ancho de la foto y no contra el de la tarjeta.       */
.cat-foto { position: relative; width: 100%; overflow: hidden;
            margin-bottom: 8px; }
.cat-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-foto.fi-circulo { border-radius: 50%; }
.cat-sinfoto {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- datos --- */
.cat-datos { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cat-num { font-weight: 700; opacity: .6; }
.cat-rubrito { text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.cat-nom { font-weight: 650; line-height: 1.25; }
.cat-cod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
           letter-spacing: .04em; }
.cat-desc { line-height: 1.3; opacity: .92;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden; }
.cat-stock, .cat-cuota { margin-top: 2px; }
.cat-cuota { font-weight: 600; }

.cat-precios { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.cat-tarj[style*="center"] .cat-precios { align-items: center; }
.cat-antes { font-size: 9px; text-decoration: line-through; opacity: .8; }
.cat-p1 { font-weight: 800; letter-spacing: -.01em; align-self: flex-start;
          border-style: solid; border-width: 0; }
.cat-tarj[style*="center"] .cat-p1 { align-self: center; }
.cat-p1.pe-pastilla { padding: 2px 10px; border-radius: 999px; }
.cat-p1.pe-etiqueta { padding: 2px 10px 2px 8px; border-radius: 3px 10px 10px 3px; }
.cat-p1.pe-subrayado { border-bottom-width: 2px; padding-bottom: 1px; }
.cat-p1.pe-recuadro { border-width: 1.5px; border-radius: 4px; padding: 1px 8px; }
.cat-p2, .cat-mon { opacity: .85; }

/* ------------------------------------------------------------------ pie --- */
.cat-pie { margin-top: 20px; padding-top: 10px; border-top: 1px solid;
           font-size: 10px; text-align: center; line-height: 1.5; }
.cat-pie-2 { opacity: .7; margin-top: 2px; }
.cat-nada { text-align: center; padding: 40px 16px; opacity: .65; font-size: 13px; }

/* =============================================================================
   EL ESTUDIO
   ========================================================================== */
.cat-estudio { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cat-estudio-vista {
  background: var(--fondo2); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden;
}
.cat-vista-barra {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--borde); background: var(--fondo);
  flex-wrap: wrap;
}
.cat-vista { max-height: 62vh; overflow: auto; padding: 12px; background: #8a8a8e22; }
.cat-vista .cat-hoja { zoom: .82; }

.cat-pest { position: sticky; top: 0; z-index: 4; background: var(--fondo);
            padding: 6px 0 8px; }
.cat-panel-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.cat-bloque { background: var(--fondo2); border: 1px solid var(--borde);
              border-radius: 14px; padding: 12px 14px; }
.cat-chk { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
           border-bottom: 1px solid var(--borde); cursor: pointer; }
.cat-chk:last-child { border-bottom: 0; }
/*  El texto de la derecha va uno abajo del otro. Con etiquetas en línea -un
    «b» y un «i»- el título y su explicación se pisaban en el mismo renglón y
    quedaba ilegible.                                                       */
.cat-chk > :not(input) { min-width: 0; }
.cat-chk b, .cat-chk i { display: block; }
.cat-chk i { font-style: normal; }
.cat-rango { width: 100%; min-height: 0; padding: 0; }
.cat-color-libre { width: 34px; height: 34px; padding: 0; border: 1px solid var(--borde);
                   border-radius: 999px; background: none; cursor: pointer;
                   min-height: 0; }

.cat-plantillas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; margin: 10px 0;
}
.cat-pl { display: flex; flex-direction: column; gap: 6px; padding: 7px;
          background: var(--fondo2); border: 1.5px solid var(--borde);
          border-radius: 12px; cursor: pointer; text-align: center; }
.cat-pl.on { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.cat-pl .mini { display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
                justify-content: center; height: 40px; border-radius: 7px;
                padding: 5px; }
.cat-pl .mini i { width: 14px; height: 14px; border-radius: 3px;
                  border: 1px solid transparent; }
.cat-pl .mini u { width: 26px; height: 4px; border-radius: 2px; }
.cat-pl .nom { font-size: 11px; font-weight: 600; color: var(--texto);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cat-regla { display: flex; align-items: center; gap: 10px; padding: 7px 0;
             border-bottom: 1px solid var(--borde); }
.cat-regla:last-child { border-bottom: 0; }
.cat-rubro-fila { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                  border-bottom: 1px solid var(--borde); }
.cat-rubro-fila:last-child { border-bottom: 0; }
.cat-rubro-fila .txt { flex: 1; min-width: 0; }
.cat-rubro-fila input[type=checkbox] { width: auto; min-height: 0; }

.cat-vitrina-cuerpo { flex: 1; overflow: auto; padding: 14px; background: #8a8a8e22; }
.cat-vitrina-busca { max-width: 240px; min-height: 0; padding: 7px 10px;
                     font-size: 14px; }

@media (min-width: 900px) {
  .cat-estudio { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
                 align-items: start; }
  .cat-estudio-vista { position: sticky; top: 12px; }
  .cat-vista { max-height: calc(100vh - 180px); }
}
@media (max-width: 560px) {
  .cat-vista { max-height: 48vh; }
  .cat-vista .cat-hoja { zoom: 1; }
  .cat-vitrina-busca { max-width: 120px; }
}
@media print {
  .cat-hoja { box-shadow: none; border-radius: 0; max-width: none; }
}

/* ------------------------------------------------ las fotos de un producto */
.fotos-tira { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-cel {
  position: relative; width: 78px; height: 78px; padding: 0; overflow: hidden;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--fondo2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px; color: var(--texto2); min-height: 0;
}
.foto-cel img { width: 100%; height: 100%; object-fit: cover; }
.foto-cel.portada { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.foto-cel.pendiente { opacity: .72; border-style: dashed; }
.foto-cel.agregar { border-style: dashed; font-size: 22px; font-weight: 300; }
.foto-cel.agregar small { font-size: 10px; }
.foto-cel .marca {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  border-radius: 999px; background: var(--acento); color: #fff;
}

/* =============================================================================
   INVENTARIO · los rubros arriba de la misma lista
   ========================================================================== */
.rubros-tira {
  display: flex; gap: 7px; overflow-x: auto; padding: 14px 2px 4px;
  margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rubros-tira::-webkit-scrollbar { display: none; }
.rubro-chip {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px; min-height: 0;
  border: 1.5px solid var(--borde); background: var(--fondo2);
  color: var(--texto); font-size: 13px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.rubro-chip b { font-weight: 600; }
.rubro-chip i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--borde); color: var(--texto2);
}
.rubro-chip:hover { border-color: var(--texto3); }
.rubro-chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.rubro-chip.on i { background: rgba(255, 255, 255, .24); color: #fff; }

.inv-busc { margin-top: 10px; }
.inv-info { font-size: 12px; color: var(--texto2); margin: 10px 2px 8px;
            min-height: 16px; }
.inv-grupo {
  display: flex; align-items: center; gap: 8px; margin: 16px 2px 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto2);
}
.inv-grupo::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.inv-grupo i {
  font-style: normal; letter-spacing: 0; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; background: var(--fondo2);
  border: 1px solid var(--borde); font-size: 11px;
}
.inv-pista {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px; margin-top: 6px; border-radius: 16px;
  border: 1.5px dashed var(--borde); background: var(--fondo2);
}
.inv-pista > span:first-child { font-size: 22px; }
.inv-pista > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.inv-pista b { font-size: 14px; }
.inv-pista span { font-size: 12px; color: var(--texto2); line-height: 1.45; }

/* =============================================================================
   CAJA · los botones de entrada y salida
   ========================================================================== */
.caja-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
                 margin: 4px 0 16px; }
.caja-bt {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: 18px; border: 1.5px solid var(--borde);
  background: var(--fondo2); cursor: pointer; text-align: left;
  min-height: 0; overflow: hidden; color: var(--texto);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.caja-bt:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.caja-bt:active { transform: translateY(0); }
.caja-bt .ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 300; color: #fff;
}
.caja-bt .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.caja-bt .t { font-size: 15px; font-weight: 650; }
.caja-bt .s { font-size: 11.5px; color: var(--texto2); }
.caja-bt.entra { border-color: color-mix(in srgb, var(--verde) 45%, var(--borde)); }
.caja-bt.entra .ic { background: var(--verde); }
.caja-bt.sale { border-color: color-mix(in srgb, var(--rojo) 40%, var(--borde)); }
.caja-bt.sale .ic { background: var(--rojo); }
.caja-bt.neutro .ic { background: var(--texto3); }
@media (max-width: 420px) {
  .caja-acciones { grid-template-columns: 1fr; }
}

/* =============================================================================
   PANEL · el mismo número en varias monedas
   ========================================================================== */
.monedas-tira {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin: 0 0 12px;
}
.monedas-tira .et { font-size: 11px; color: var(--texto2); margin-right: 2px; }
.mon-chip {
  padding: 5px 12px; border-radius: 999px; min-height: 0; cursor: pointer;
  border: 1.5px solid var(--borde); background: var(--fondo2);
  color: var(--texto); font-size: 12px; font-weight: 600;
}
.mon-chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.tile .equiv {
  display: block; font-size: 11px; color: var(--texto2); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   FACTURACIÓN · primero para quién, después qué
   ========================================================================== */
.venta-cab {
  background: var(--fondo2); border: 1.5px solid var(--borde);
  border-radius: 18px; overflow: hidden; margin-bottom: 12px;
}
.venta-cli {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: 0; min-height: 0;
  cursor: pointer; text-align: left; color: var(--texto);
}
.venta-cli .av {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
  background: var(--borde); color: var(--texto2);
}
.venta-cli.puesto .av { background: var(--acento); color: #fff; }
.venta-cli .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.venta-cli .t {
  font-size: 15.5px; font-weight: 650; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.venta-cli .s { font-size: 12px; color: var(--texto2); }
.venta-cli .fl { color: var(--texto3); font-size: 15px; }
.venta-cab-pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--borde);
  background: var(--fondo);
}
.venta-mon { display: flex; align-items: center; gap: 7px; margin: 0; }
.venta-mon > span { font-size: 11px; color: var(--texto2);
                    text-transform: uppercase; letter-spacing: .06em; }
.venta-mon select { width: auto; min-width: 84px; min-height: 32px;
                    font-size: 14px; padding: 4px 8px; }
.venta-cab-bts { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }

/* =============================================================================
   FINANCIACIÓN · cada plan es una ficha con su barra y sus botones
   ========================================================================== */
.fin-monedas {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 2px 0;
  font-size: 12px; color: var(--texto2);
}
.fin-monedas b { color: var(--texto); }
.fin-monedas i { font-style: normal; font-variant-numeric: tabular-nums; }
.fin-filtros { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 4px; }

.fin-lista { display: flex; flex-direction: column; gap: 10px; }
.fin-plan {
  border: 1.5px solid var(--borde); border-radius: 16px; overflow: hidden;
  background: var(--fondo2);
}
.fin-plan.mal { border-color: color-mix(in srgb, var(--rojo) 42%, var(--borde)); }
.fin-plan.liq { opacity: .72; }
.fin-plan .cab {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 16px 10px; background: none; border: 0; min-height: 0;
  cursor: pointer; text-align: left; color: var(--texto);
}
.fin-plan .izq { flex: 1; min-width: 0; }
.fin-plan .nom { font-size: 15px; font-weight: 650; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.fin-plan .sub { font-size: 12px; color: var(--texto2); margin-top: 2px; }
.fin-plan .der { text-align: right; flex: 0 0 auto; }
.fin-plan .saldo { font-size: 15px; font-weight: 700;
                   font-variant-numeric: tabular-nums; }
.fin-plan .et {
  display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px;
  border-radius: 999px; background: var(--borde); color: var(--texto2);
}
.fin-plan .et.bien { background: color-mix(in srgb, var(--verde) 20%, transparent);
                     color: var(--verde); }
.fin-plan .et.mal { background: color-mix(in srgb, var(--rojo) 20%, transparent);
                    color: var(--rojo); }
.fin-plan .barrita { height: 5px; background: var(--borde); border-radius: 0;
                     margin: 0 16px; overflow: hidden; }
.fin-plan .barrita i { display: block; height: 100%; background: var(--verde);
                       border-radius: 999px; transition: width .25s ease; }
.fin-plan.mal .barrita i { background: var(--naranja, #FF9F0A); }
.fin-plan .pie {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px 12px; font-size: 11.5px; color: var(--texto2);
}
.fin-plan.mal .pie span:first-child { color: var(--rojo); font-weight: 600; }
.fin-acciones {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px;
  border-top: 1px solid var(--borde); background: var(--fondo);
}

/* =============================================================================
   DIVISAS · la cotización como ficha, no como renglón
   ========================================================================== */
.div-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; margin-top: 12px;
}
.div-ficha {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: 18px; border: 1.5px solid var(--borde);
  background: var(--fondo2); cursor: pointer; text-align: left;
  min-height: 0; color: var(--texto);
  transition: transform .12s ease, box-shadow .12s ease;
}
.div-ficha:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.div-ficha.base { border-color: var(--acento); }
.div-ficha .arriba { display: flex; align-items: center; gap: 10px; }
.div-ficha .sim {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; background: var(--borde); color: var(--texto);
}
.div-ficha.base .sim { background: var(--acento); color: #fff; }
.div-ficha .sigla { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.div-ficha .nombre { font-size: 11.5px; color: var(--texto2); }
.div-ficha .valor {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.div-ficha .regla { font-size: 11.5px; color: var(--texto2); line-height: 1.4; }
.div-ficha .ajuste {
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--naranja, #FF9F0A) 22%, transparent);
  color: var(--naranja, #FF9F0A);
}
.div-conv {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--borde);
  background: var(--fondo2); margin-top: 14px;
}
.div-conv .campo { margin: 0; flex: 1 1 110px; }
.div-conv .igual { font-size: 18px; color: var(--texto3); padding-bottom: 10px; }
.div-conv .res {
  flex: 1 1 100%; font-size: 19px; font-weight: 700; padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.div-conv .res small { display: block; font-size: 11.5px; font-weight: 500;
                       color: var(--texto2); margin-top: 3px; }

/*  Más apretado, para el que quiere ver más renglones de una.  */
:root[data-densidad="compacta"] { font-size: 15px; }
:root[data-densidad="compacta"] .card { padding: 12px 14px; }
:root[data-densidad="compacta"] .fila { padding: 9px 12px; }
:root[data-densidad="compacta"] .tile { padding: 12px; }

/* --------------------------------------------- el panel de apariencia ---- */
.ap-colores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap-color {
  width: 34px; height: 34px; border-radius: 999px; min-height: 0; padding: 0;
  border: 2px solid transparent; cursor: pointer; position: relative;
}
.ap-color.on { border-color: var(--texto); box-shadow: 0 0 0 2px var(--fondo) inset; }
.ap-color.ninguno { background: var(--campo); color: var(--texto2); font-size: 14px; }
.ap-quien {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; background: var(--campo); margin-bottom: 12px;
}
.ap-quien .pt { width: 34px; height: 34px; border-radius: 999px; flex: 0 0 auto; }
.ap-quien .txt { flex: 1; min-width: 0; }
.ap-quien .t { font-size: 14px; font-weight: 650; }
.ap-quien .s { font-size: 11.5px; color: var(--texto2); }

.usuario-fila { display: flex; align-items: center; gap: 4px; padding-right: 10px;
                border-bottom: 1px solid var(--borde); }
.usuario-fila:last-child { border-bottom: 0; }
.usuario-fila > .fila { flex: 1; min-width: 0; border-bottom: 0; }

/* ------------------------------------------------- el taller de la letra -- */
.tipo-tira { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; }
.tipo-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 999px; min-height: 0; cursor: pointer; font-size: 12px;
  border: 1.5px solid var(--borde); background: var(--fondo2); color: var(--texto);
}
.tipo-chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.tipo-chip i { font-style: normal; font-size: 16px; line-height: 1;
               color: var(--acento); }
.tipo-chip.on i { color: #fff; }
.tipo-muestra {
  display: flex; align-items: center; justify-content: center; min-height: 92px;
  padding: 18px 16px; margin-bottom: 12px; border-radius: 16px;
  border: 1.5px dashed var(--borde); background: var(--fondo2);
  text-align: center; overflow: hidden;
}
.tipo-muestra span { max-width: 100%; word-break: break-word; }
.tipo-campo label { display: flex; justify-content: space-between;
                    align-items: center; gap: 10px; }
.tipo-valor { display: inline-flex; align-items: center; gap: 3px; }
.tipo-valor i { font-style: normal; font-size: 11px; color: var(--texto2); }
.tipo-num {
  width: 62px; min-height: 0; padding: 3px 6px; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.tipo-hex-fila { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tipo-hex {
  width: 108px; min-height: 0; padding: 5px 8px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

/* ----------------------------------------------- la vitrina sin edición -- */
.cat-solo-hoja { margin-top: 12px; }

/* =============================================================================
   LA VITRINA · el catálogo a pantalla completa
   --------------------------------------------------------------------------
   Nada de acá usa los colores del sistema: todo sale de los que el
   administrador eligió para el catálogo, que llegan como variables cuando se
   dibuja la hoja. Una barra negra arriba de una hoja crema hace que parezca
   el sistema mostrando un PDF, y lo que se quiere es que parezca un catálogo.
   ========================================================================== */
#cuerpo.cuerpo-vitrina { display: block; height: 100dvh; overflow: hidden; }
main.main-vitrina {
  max-width: none; width: 100%; height: 100dvh; margin: 0; padding: 0;
  overflow: hidden; display: flex; flex-direction: column;
}

.vit {
  --v-fondo: var(--fondo);
  --v-texto: var(--texto);
  --v-suave: var(--texto2);
  --v-borde: var(--borde);
  --v-acento: var(--acento);
  --v-tarjeta: var(--panel);
  --v-sobre-acento: #fff;
  display: flex; flex-direction: column; height: 100dvh; min-height: 0;
  background: var(--v-fondo); color: var(--v-texto);
}

.vit-barra {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding: 10px 16px; border-bottom: 1px solid var(--v-borde);
  background: var(--v-fondo);
}
.vit-marca {
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34vw;
}
.vit-buscar-caja {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--v-borde);
  background: var(--v-tarjeta);
}
.vit-buscar-caja > span { opacity: .55; font-size: 14px; }
.vit-buscar {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  min-height: 0; padding: 11px 0; font-size: 15px; color: var(--v-texto);
  font-family: inherit;
}
.vit-buscar::placeholder { color: var(--v-suave); }
.vit-buscar::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.vit-cuenta { font-size: 12px; color: var(--v-suave); white-space: nowrap; }
.vit-icono {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; min-height: 0;
  border: 1.5px solid var(--v-borde); background: var(--v-tarjeta);
  color: var(--v-texto); cursor: pointer; font-size: 16px; padding: 0;
}

.vit-rubros {
  display: flex; gap: 7px; flex: 0 0 auto; overflow-x: auto;
  padding: 10px 16px; scrollbar-width: none;
  border-bottom: 1px solid var(--v-borde); background: var(--v-fondo);
}
.vit-rubros:empty { display: none; }
.vit-rubros::-webkit-scrollbar { display: none; }
.vit-rubro {
  flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; min-height: 0;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--v-borde); background: var(--v-tarjeta);
  color: var(--v-texto);
}
.vit-rubro.on {
  background: var(--v-acento); border-color: var(--v-acento);
  color: var(--v-sobre-acento);
}

/*  La hoja, ocupando todo lo que queda. El zoom lo pone el navegador desde
    el código, según el ancho que haya.                                     */
.vit-hoja {
  flex: 1; min-height: 0; overflow: auto; padding: 0;
  background: var(--v-fondo);
}
.vit-hoja .cat-hoja {
  max-width: none; width: var(--ancho-papel, 210mm);
  margin: 0 auto; border-radius: 0; box-shadow: none;
}

@media (max-width: 720px) {
  .vit-barra { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .vit-marca { max-width: none; flex: 1; }
  .vit-buscar-caja { order: 3; flex: 1 1 100%; }
  .vit-rubros { padding: 8px 12px; }
}

/* =============================================================================
   LA VITRINA · modos de mirar, ficha grande y lista de pedido
   --------------------------------------------------------------------------
   Todo sale de los colores del catálogo, que llegan como variables cuando se
   dibuja la hoja. Nada usa la paleta del sistema.
   ========================================================================== */
.vit-modos {
  display: flex; gap: 2px; flex: 0 0 auto; padding: 3px; border-radius: 999px;
  background: var(--v-tarjeta); border: 1.5px solid var(--v-borde);
}
.vit-modo {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 0;
  border: 0; background: none; border-radius: 999px; cursor: pointer;
  color: var(--v-texto); font-size: 13px; font-weight: 600; opacity: .62;
}
.vit-modo .ic { font-size: 14px; line-height: 1; }
.vit-modo.on { background: var(--v-acento); color: var(--v-sobre-acento); opacity: 1; }

.vit-filtros:empty { display: none; }
.vit-filtros {
  flex: 0 0 auto; border-bottom: 1px solid var(--v-borde);
  background: var(--v-fondo);
}
.vit-orden {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-top: 1px solid var(--v-borde);
}
.vit-filtros .vit-rubros { border-bottom: 0; }
.vit-pastilla {
  padding: 6px 13px; border-radius: 999px; min-height: 0; font-size: 12.5px;
  border: 1.5px solid var(--v-borde); background: var(--v-tarjeta);
  color: var(--v-texto); cursor: pointer;
}
.vit-pastilla.on {
  background: var(--v-acento); border-color: var(--v-acento);
  color: var(--v-sobre-acento);
}
.vit-sep { flex: 1; }
select.vit-select {
  width: auto; min-width: 150px; min-height: 0; padding: 6px 10px;
  font-size: 12.5px; border-radius: 999px;
  border: 1.5px solid var(--v-borde); background: var(--v-tarjeta);
  color: var(--v-texto);
}

/* ------------------------------------------------------------ modo fotos -- */
.vit-cuerpo { padding: 16px; }
.vit-grilla {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}
.vit-card {
  display: flex; flex-direction: column; padding: 0; min-height: 0;
  border: 1.5px solid var(--v-borde); border-radius: 16px; overflow: hidden;
  background: var(--v-tarjeta); color: var(--v-texto); cursor: pointer;
  text-align: left; transition: transform .12s ease, box-shadow .12s ease;
}
.vit-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.13); }
.vit-card .foto {
  position: relative; width: 100%; padding-top: 78%;
  /*  El color que el dueño eligió para el recuadro de la foto, no un
      blanco clavado: la hoja del catálogo ya lo respetaba y la vitrina
      no, así que el mismo catálogo se veía de dos maneras.          */
  background: var(--cimg, #fff);
  overflow: hidden;
}
.vit-card .foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.vit-card .foto .sin {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 34px; opacity: .3;
}
.vit-card .foto .off {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px;
  background: #FF453A; color: #fff; font-size: 11px; font-weight: 800;
}
.vit-card .foto .marcado, .vit-ren .tic {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  border-radius: 999px; background: var(--v-acento); color: var(--v-sobre-acento);
}
.vit-card .txt { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 2px; }
.vit-card .nom {
  font-size: 13.5px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vit-card .sub { font-size: 11px; color: var(--v-suave); }
.vit-card .precio { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
.vit-card .precio s { font-size: 11px; color: var(--v-suave); }
.vit-card .precio b {
  font-size: 16px; font-weight: 800; color: var(--v-precio, var(--v-acento));
  font-variant-numeric: tabular-nums;
}
.vit-card .cuota { font-size: 11px; color: var(--v-acento); }

/* ------------------------------------------------------------ modo lista -- */
.vit-lista {
  border: 1.5px solid var(--v-borde); border-radius: 16px; overflow: hidden;
  background: var(--v-tarjeta);
}
.vit-ren {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; min-height: 0; border: 0; border-bottom: 1px solid var(--v-borde);
  background: none; color: var(--v-texto); cursor: pointer; text-align: left;
}
.vit-ren:last-child { border-bottom: 0; }
.vit-ren:hover { background: rgba(127, 127, 127, .07); }
.vit-ren .mini {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--cimg, #fff); font-size: 18px;
}
.vit-ren .mini img { width: 100%; height: 100%; object-fit: cover; }
.vit-ren .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vit-ren .nom {
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.vit-ren .sub { font-size: 11.5px; color: var(--v-suave); }
.vit-ren .val { text-align: right; flex: 0 0 auto; display: flex;
                flex-direction: column; align-items: flex-end; }
.vit-ren .val s { font-size: 11px; color: var(--v-suave); }
.vit-ren .val b {
  font-size: 15px; font-weight: 800; color: var(--v-precio, var(--v-acento));
  font-variant-numeric: tabular-nums;
}
.vit-ren .tic { position: static; margin-left: 4px; }

/* -------------------------------------------------- la ficha de producto -- */
.vit-foto-grande {
  position: relative; width: 100%; height: 46vh; min-height: 220px;
  border-radius: 14px; overflow: hidden; background: var(--cimg, #fff);
  display: flex; align-items: center; justify-content: center;
}
.vit-foto-grande img { width: 100%; height: 100%; object-fit: contain; }
.vit-foto-grande .sin { font-size: 52px; opacity: .25; }
.vit-foto-grande .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 0; background: rgba(0, 0, 0, .42); color: #fff; cursor: pointer;
}
.vit-foto-grande .nav.izq { left: 8px; }
.vit-foto-grande .nav.der { right: 8px; }
.vit-miniaturas { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0;
                  scrollbar-width: none; }
.vit-miniaturas::-webkit-scrollbar { display: none; }
.vit-miniaturas .mini {
  width: 56px; height: 56px; flex: 0 0 auto; padding: 0; min-height: 0;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--cimg, #fff); border: 2px solid transparent;
}
.vit-miniaturas .mini.on { border-color: var(--acento); }
.vit-miniaturas .mini img { width: 100%; height: 100%; object-fit: cover; }

.vit-precio-caja {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  border-radius: 14px; background: var(--campo);
}
.vit-precio-caja .antes { font-size: 13px; text-decoration: line-through;
                          color: var(--texto2); }
.vit-precio-caja .ahora {
  font-size: 30px; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.vit-precio-caja .off { font-size: 13px; font-weight: 600; color: var(--verde); }
.vit-precio-caja .cuota { font-size: 13px; color: var(--acento); }
.vit-precio-caja .stock { font-size: 12px; color: var(--texto2); margin-top: 4px; }

/* ------------------------------------------------------ el globo flotante -- */
.vit-globo {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 11px;
  padding: 10px 16px 10px 12px; border-radius: 999px; min-height: 0;
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--v-acento); color: var(--v-sobre-acento);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  animation: globo-entra .22s ease;
}
@keyframes globo-entra {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.vit-globo .n {
  width: 26px; height: 26px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  background: rgba(255, 255, 255, .26);
}
.vit-globo .tx { display: flex; flex-direction: column; line-height: 1.2;
                 text-align: left; }
.vit-globo .tx b { font-size: 13.5px; font-weight: 700; }
.vit-globo .tx i { font-style: normal; font-size: 11.5px; opacity: .85; }
.vit-globo .fl { font-size: 17px; opacity: .8; }

@media (max-width: 720px) {
  .vit-modo .tx { display: none; }
  .vit-modo { padding: 7px 11px; }
  .vit-cuerpo { padding: 12px; }
  .vit-grilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .vit-foto-grande { height: 38vh; }
}

/* =============================================================================
   IMÁGENES DEL CATÁLOGO Y DE LA ENTRADA
   --------------------------------------------------------------------------
   Los GIF y los WebP animados se mueven solos. Las clases de abajo son para
   que una foto quieta tenga algo de vida: movimientos lentos y cortos, que
   se noten sin molestar. Todo se apaga si el sistema operativo pide menos
   movimiento, porque para algunas personas esto marea de verdad.
   ========================================================================== */
.cat-img-fondo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.cat-portada-img {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-repeat: no-repeat;
}
.cat-portada.con-img > *:not(.cat-portada-img) { position: relative; z-index: 2; }
.cat-portada.con-img { isolation: isolate; }
/*  Un velo suave entre la imagen y el texto: sin esto, sobre una foto clara
    el título blanco desaparece.                                            */
.cat-portada.con-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34));
}

@keyframes mov-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@keyframes mov-vaiven {
  from { transform: translate3d(-2.5%, 0, 0) scale(1.07); }
  to   { transform: translate3d(2.5%, 0, 0) scale(1.07); }
}
@keyframes mov-latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.04); opacity: .86; }
}
@keyframes mov-girar {
  from { transform: rotate(0deg) scale(1.2); }
  to   { transform: rotate(360deg) scale(1.2); }
}
.mov-zoom   { animation: mov-zoom 18s ease-in-out infinite alternate; }
.mov-vaiven { animation: mov-vaiven 22s ease-in-out infinite alternate; }
.mov-latido { animation: mov-latido 6s ease-in-out infinite; }
.mov-girar  { animation: mov-girar 90s linear infinite; }

/*  Las tarjetas que aparecen de a poco al abrir la hoja. */
@keyframes cat-aparece {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cat-aparece { animation: cat-aparece .38s ease both; }

@media (prefers-reduced-motion: reduce) {
  .mov-zoom, .mov-vaiven, .mov-latido, .mov-girar, .cat-aparece,
  .entrada-fondo.mov-zoom, .entrada-fondo.mov-vaiven {
    animation: none !important;
  }
}

/* ----------------------------------------------------- el zoom de la hoja -- */
.vit-zoom {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 3px;
  border-radius: 999px; background: var(--v-tarjeta);
  border: 1.5px solid var(--v-borde);
}
.vit-zoom button {
  width: 28px; height: 28px; border: 0; background: none; border-radius: 999px;
  min-height: 0; padding: 0; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--v-texto); display: flex; align-items: center; justify-content: center;
}
.vit-zoom button:hover { background: rgba(127,127,127,.16); }
.vit-zoom-n {
  min-width: 44px; text-align: center; font-size: 12px; font-weight: 700;
  color: var(--v-texto); font-variant-numeric: tabular-nums;
}

/* ================================================================= entrada ==
   La imagen de la pantalla de acceso. Va de fondo, atrás de todo, y puede
   ser un GIF: es lo primero que ve cualquiera que abre el sistema.
   ========================================================================== */
.entrada-fondo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/*  Un velo encima para que el cuadro de la clave se siga leyendo sobre
    cualquier imagen.                                                       */
.entrada-velo {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%,
              rgba(0,0,0,.20), rgba(0,0,0,.62));
}
:root[data-tema="claro"] .entrada-velo {
  background: radial-gradient(120% 90% at 50% 40%,
              rgba(255,255,255,.28), rgba(255,255,255,.70));
}
body.con-fondo .entrada { position: relative; z-index: 2; }
body.con-fondo .entrada::before { opacity: 0 !important; }

/* ------------------------------------------------- el cargador de imagen -- */
.img-slot {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
}
.img-slot:last-child { border-bottom: 0; }
.img-slot .vista {
  width: 64px; height: 44px; flex: 0 0 auto; border-radius: 10px;
  overflow: hidden; background: var(--campo); display: flex;
  align-items: center; justify-content: center; font-size: 18px;
  border: 1px solid var(--borde);
}
.img-slot .vista img { width: 100%; height: 100%; object-fit: cover; }
.img-slot .txt { flex: 1; min-width: 0; }
.img-slot .t { font-size: 14px; font-weight: 600; }
.img-slot .s { font-size: 11.5px; color: var(--texto2); }
.img-slot .bts { display: flex; gap: 6px; flex: 0 0 auto; }

/* =============================================================================
   FACTURACIÓN
   --------------------------------------------------------------------------
   En la computadora se parte en dos: a la izquierda para quién es la venta y
   qué lleva, a la derecha el total pegado arriba. Ese número es el que el
   vendedor mira todo el tiempo, y si hay que bajar hasta el final de una
   lista de quince productos para verlo, se termina haciendo la cuenta de
   cabeza.
   ========================================================================== */
.venta-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 980px) {
  .venta-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .venta-der { position: sticky; top: 12px; }
}

/* ------------------------------------------------------------- el carrito -- */
.carro-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 8px; font-size: 12px; color: var(--texto2);
}
.carro-cab b { color: var(--texto); font-size: 13px; }

.carro-fila {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--borde); background: var(--panel);
}
.carro-fila:first-of-type { border-radius: 14px 14px 0 0; }
.carro-fila:last-child { border-bottom: 0; border-radius: 0 0 14px 14px; }
.carro-fila:only-of-type { border-radius: 14px; }
.carro-fila .av {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px; padding: 0;
  min-height: 0; overflow: hidden; border: 1px solid var(--borde);
  background: var(--campo); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 19px;
}
.carro-fila .av img { width: 100%; height: 100%; object-fit: cover; }
.carro-fila .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carro-fila .nom {
  font-size: 14px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carro-fila .sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--texto2);
}
.carro-fila .sub .marca {
  font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; background: var(--campo); color: var(--texto2);
}
.carro-fila .linea-total {
  text-align: right; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; min-width: 86px;
}
.carro-fila .linea-total b {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.carro-fila .linea-total .poco {
  font-style: normal; font-size: 10.5px; color: var(--naranja); font-weight: 600;
}
.carro-fila .quitar {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 999px; padding: 0;
  min-height: 0; border: 0; background: none; color: var(--texto3);
  cursor: pointer; font-size: 13px;
}
.carro-fila .quitar:hover { background: var(--campo); color: var(--rojo); }

.carro-vacio {
  display: flex; align-items: center; gap: 14px; padding: 22px 18px;
  border: 1.5px dashed var(--borde); border-radius: 16px; background: var(--fondo2);
}
.carro-vacio .ic { font-size: 28px; opacity: .6; }
.carro-vacio .txt { display: flex; flex-direction: column; gap: 3px; }
.carro-vacio b { font-size: 15px; }
.carro-vacio span { font-size: 12.5px; color: var(--texto2); line-height: 1.5; }

/* -------------------------------------------------------------- el ticket -- */
.total-equiv {
  text-align: right; font-size: 11.5px; color: var(--texto2); margin-top: -4px;
  font-variant-numeric: tabular-nums;
}
.metodos-tira {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px;
  padding-top: 12px; border-top: 1px solid var(--borde);
}
.metodo-chip {
  padding: 6px 12px; border-radius: 999px; min-height: 0; font-size: 12px;
  border: 1.5px solid var(--borde); background: var(--campo);
  color: var(--texto); cursor: pointer;
}
.metodo-chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }

.ticket-bts { display: flex; gap: 8px; margin-top: 12px; }
.ticket-bts .btn { flex: 0 0 auto; }
.ticket-bts .btn.cobrar {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-left: 14px; padding-right: 14px;
}
.ticket-bts .btn.cobrar b { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .carro-fila { padding: 9px 10px; gap: 8px; }
  .carro-fila .av { width: 38px; height: 38px; }
  .carro-fila .linea-total { min-width: 70px; }
  .ticket-bts .btn.cobrar { flex-direction: column; gap: 1px; padding: 9px 12px; }
}

/* =============================================================================
   CATÁLOGO · dónde va cada cosa
   --------------------------------------------------------------------------
   Con la foto al costado entra el doble de productos por hoja, que es lo que
   quiere un catálogo de repuestos donde lo que importa es el código y la
   medida, no la imagen.
   ========================================================================== */
.cat-cuerpo {
  padding: var(--mrg-a, var(--mrg, 6%)) var(--mrg-d, var(--mrg, 6%))
           var(--mrg-b, var(--mrg, 6%)) var(--mrg-i, var(--mrg, 6%));
}
.cat-tarj { padding: var(--pad-card, 8px); }
.cat-nom { -webkit-line-clamp: var(--lin-nom, 2); display: -webkit-box;
           -webkit-box-orient: vertical; overflow: hidden; }
.cat-desc { -webkit-line-clamp: var(--lin-desc, 3); }
.cat-rubro { margin-top: var(--esp-rubro, 18px); }

/* ------------------------------------------------------- foto al costado -- */
.cat-tarj.foto-izquierda, .cat-tarj.foto-derecha {
  flex-direction: row; align-items: flex-start; gap: 10px;
}
.cat-tarj.foto-derecha { flex-direction: row-reverse; }
.cat-tarj.foto-izquierda > .cat-foto,
.cat-tarj.foto-derecha > .cat-foto {
  width: 34%; flex: 0 0 34%; margin-bottom: 0;
}
.cat-tarj.foto-izquierda > .cat-datos,
.cat-tarj.foto-derecha > .cat-datos { flex: 1; min-width: 0; }
.cat-tarj.foto-abajo { flex-direction: column-reverse; }
.cat-tarj.foto-abajo > .cat-foto { margin: 8px 0 0; }

/*  La foto de fondo, con los datos encima. Lleva un velo para que el nombre
    y el precio se lean sobre cualquier imagen.                             */
.cat-tarj.foto-defondo { position: relative; min-height: 150px; }
.cat-tarj.foto-defondo > .cat-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto !important;
  margin: 0; border-radius: inherit; z-index: 0;
}
.cat-tarj.foto-defondo > .cat-foto img { object-fit: cover !important; }
.cat-tarj.foto-defondo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.72));
}
.cat-tarj.foto-defondo > .cat-datos {
  position: relative; z-index: 2; margin-top: auto;
  padding: 8px; color: #fff;
}
.cat-tarj.foto-defondo > .cat-datos .cat-nom,
.cat-tarj.foto-defondo > .cat-datos .cat-cod,
.cat-tarj.foto-defondo > .cat-datos .cat-desc,
.cat-tarj.foto-defondo > .cat-datos .cat-p1 { color: #fff !important; }

/* ------------------------------------------------- dónde van las etiquetas */
.cat-tarj.badge-arribaizquierda .cat-marcas { top: 6px; left: 6px; right: auto;
                                              justify-content: flex-start; }
.cat-tarj.badge-arribaderecha .cat-marcas { top: 6px; right: 6px; left: auto;
                                            justify-content: flex-end; }
.cat-tarj.badge-abajoizquierda .cat-marcas { top: auto; bottom: 6px; left: 6px;
                                             right: auto; justify-content: flex-start; }
.cat-tarj.badge-abajoderecha .cat-marcas { top: auto; bottom: 6px; right: 6px;
                                           left: auto; justify-content: flex-end; }

/* ------------------------------------------------ más estilos de rubro --- */
.cat-rubro.r-numerado { counter-increment: rubro; }
.cat-cuerpo { counter-reset: rubro; }
.cat-rubro.r-numerado::before {
  content: counter(rubro, decimal-leading-zero);
  font-size: .78em; font-weight: 800; opacity: .45; margin-right: 4px;
}
.cat-rubro.r-numerado { border-bottom: 1.5px solid; padding-bottom: 5px; }
.cat-rubro.r-lateral {
  border-left: 4px solid; padding-left: 11px; border-radius: 0;
}
.cat-rubro.r-doblelinea {
  border-top: 1.5px solid; border-bottom: 1.5px solid;
  padding: 6px 0; justify-content: center; text-transform: uppercase;
  letter-spacing: .12em;
}
.cat-rubro.r-sintitulo { display: none; }

/* --------------------------------------------- separadores entre rubros -- */
.cat-sep-rubro { height: 0; margin: 14px 0 0; }
.cat-sep-rubro.slinea { border-top: 1px solid; opacity: .22; }
.cat-sep-rubro.spunteada { border-top: 1.5px dashed; opacity: .3; }
.cat-sep-rubro.sdoble { border-top: 3px double; opacity: .3; }
.cat-sep-rubro.sespaciogrande { margin-top: 44px; }

/* =============================================================================
   EL LOGIN DE LA COMPUTADORA · vertical
   --------------------------------------------------------------------------
   Estaba partido en dos: la marca a la izquierda sobre color y la clave a la
   derecha. Entraba bien, pero parecía el formulario de cualquier cosa. Ahora
   es una sola columna angosta y alta: el logo arriba sobre una banda de
   color, el nombre del negocio, y abajo la clave. Se lee de arriba abajo,
   como se lee todo, y la tarjeta se planta en el medio de la pantalla en vez
   de estirarse a lo ancho.
   ========================================================================== */
.bt-entrar {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 300px; margin: 12px auto 0; min-height: 50px;
  padding: 0 20px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 650; color: #fff;
  background: linear-gradient(160deg, var(--azul), #0050C8);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--azul) 34%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.bt-entrar:not([hidden]) { display: flex; }
.bt-entrar i { font-style: normal; font-size: 17px; opacity: .85; }
.bt-entrar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--azul) 42%, transparent);
}
.bt-entrar:active:not(:disabled) { transform: translateY(0); }
.bt-entrar:disabled { opacity: .4; cursor: default; box-shadow: none; }

@media (min-width: 900px) {
  .entrada { padding: 40px 30px; }

  /*  Una sola columna. El ancho es el de una tarjeta, no el de la pantalla:
      un formulario de 840 px de ancho obliga a barrer con la vista de una
      punta a la otra para leer tres renglones.                            */
  .entrada .caja {
    max-width: 408px; flex-direction: column; align-items: stretch;
    border-radius: 28px; overflow: hidden;
    background: color-mix(in srgb, var(--panel) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5),
                0 2px 10px rgba(0, 0, 0, .22),
                inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    animation: entrada-sube .5s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes entrada-sube {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }

  /* ------------------------------------------ la banda de arriba, con color */
  .entrada .marca-lado {
    position: relative; overflow: hidden;
    padding: 40px 34px 30px; color: #fff; text-align: center;
    align-items: center; justify-content: center;
    background: linear-gradient(162deg, var(--azul) 0%, #0047B8 100%);
  }
  /*  Un brillo en diagonal y un halo detrás del logo, para que la banda no
      sea un bloque de color plano.                                        */
  .entrada .marca-lado::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(52% 44% at 50% -6%, rgba(255,255,255,.30) 0%, transparent 70%),
      radial-gradient(70% 50% at 108% 110%, rgba(0,0,0,.22) 0%, transparent 70%);
  }
  .entrada .marca-lado > * { position: relative; z-index: 1; }

  .entrada .marca-lado .logo {
    width: 82px; height: 82px; border-radius: 26px; margin: 0 auto 20px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .26),
                inset 0 1px 0 rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
    font-size: 33px;
  }
  .entrada .marca-lado h1 {
    font-size: 26px; text-align: center; line-height: 1.18;
    letter-spacing: -.5px;
  }
  .entrada .marca-lado .bajada {
    color: rgba(255, 255, 255, .82); text-align: center; font-size: 13.5px;
    margin-top: 7px; letter-spacing: .2px;
  }
  /*  La fecha, adentro de la banda pero bien apagada: dice de qué día es la
      caja que estás por abrir, y no compite con el nombre del negocio.    */
  .entrada .marca-lado .pie-marca { display: block; }
  .entrada .marca-lado .pie {
    margin: 16px auto 0; padding-top: 14px; max-width: 220px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .62); font-size: 12px; text-align: center;
    letter-spacing: .2px;
  }

  /* ------------------------------------------------- el cuerpo de la clave */
  .entrada .acceso-lado {
    padding: 30px 34px 32px; justify-content: flex-start;
    background: transparent;
  }
  .entrada .acceso-tit {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--texto3); text-align: center;
    margin-bottom: 2px;
  }
  .entrada .acceso-lado .campo-clave { margin-top: 16px; }
  .entrada .acceso-lado .campo-clave input { min-height: 50px; }
  .entrada .acceso-lado .pin-vista { margin: 20px 0 6px; }
  .entrada .acceso-lado .indicacion { margin-bottom: 20px; font-size: 12.5px; }

  /*  El teclado es el respaldo, no la vía principal: quien está en la
      computadora tipea.                                                    */
  .entrada .teclado { grid-template-columns: repeat(3, 66px); gap: 11px; }
  .entrada .teclado button { width: 66px; height: 66px; font-size: 24px; }

  .entrada .cambiar-modo { margin-top: 16px; }
  .entrada .aviso-fabrica { margin-top: 18px; max-width: none; }

  .entrada::before { opacity: .62; }
}

/*  Sobre una imagen de fondo la tarjeta se apoya más: el vidrio necesita algo
    de cuerpo para que el texto no se pierda contra una foto clara.         */
body.con-fondo .entrada .caja {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .3);
}

/*  En una notebook baja (13") la tarjeta vertical no entra entera: se achica
    la banda de color antes que el teclado, que es lo que se toca.          */
@media (min-width: 900px) and (max-height: 760px) {
  .entrada { padding: 22px 30px; }
  .entrada .marca-lado { padding: 26px 30px 22px; }
  .entrada .marca-lado .logo {
    width: 62px; height: 62px; border-radius: 20px; margin-bottom: 14px;
    font-size: 26px;
  }
  .entrada .marca-lado h1 { font-size: 22px; }
  .entrada .marca-lado .bajada { font-size: 12.5px; margin-top: 5px; }
  .entrada .acceso-lado { padding: 22px 30px 24px; }
  .entrada .acceso-lado .pin-vista { margin: 14px 0 4px; }
  .entrada .acceso-lado .indicacion { margin-bottom: 14px; }
  .entrada .teclado { grid-template-columns: repeat(3, 58px); gap: 9px; }
  .entrada .teclado button { width: 58px; height: 58px; font-size: 22px; }
  .entrada .pie { margin-top: 14px; }
}

/* =============================================================================
   COMBINACIONES DE COLOR
   --------------------------------------------------------------------------
   Un acento suelto arriba de un gris siempre parece el mismo sistema pintado
   de otro color. Lo que cambia la cara es la mezcla: el fondo, cuánto vidrio
   tienen las tarjetas y cuánto brillo dejan los bordes. Las tres cosas
   llegan como variables cuando la persona entra.
   ========================================================================== */
:root { --vidrio: 0; --brillo: 0; }

:root[data-combo] {
  --fondo: var(--fondo-base, #000);
}
/*  Con vidrio, las tarjetas dejan pasar el fondo y se despegan un poco. Sin
    vidrio queda el panel opaco de siempre.                                  */
:root[data-combo] .card,
:root[data-combo] .tile,
:root[data-combo] .cat-bloque,
:root[data-combo] .venta-cab,
:root[data-combo] .fin-plan,
:root[data-combo] .carro-fila,
:root[data-combo] .vit-card {
  background: color-mix(in srgb, var(--panel)
              calc(100% - var(--vidrio) * 42%), transparent);
  border-color: color-mix(in srgb, var(--acento)
                calc(var(--brillo) * 22%), var(--borde));
  backdrop-filter: blur(calc(var(--vidrio) * 16px));
  -webkit-backdrop-filter: blur(calc(var(--vidrio) * 16px));
}
/*  El brillo del acento en los bordes de lo que está elegido. Con el brillo
    en cero no se ve nada: es lo que separa «Acero» de «Neón».               */
:root[data-combo] .tile.destacada,
:root[data-combo] .chip.on,
:root[data-combo] .metodo-chip.on,
:root[data-combo] .rubro-chip.on,
:root[data-combo] .mon-chip.on {
  box-shadow: 0 0 calc(var(--brillo) * 20px)
              color-mix(in srgb, var(--acento) calc(var(--brillo) * 45%), transparent);
}
:root[data-combo] .barra,
:root[data-combo] .costado,
:root[data-combo] .tabs {
  background: color-mix(in srgb, var(--fondo)
              calc(100% - var(--vidrio) * 22%), transparent);
  backdrop-filter: blur(calc(var(--vidrio) * 20px));
  -webkit-backdrop-filter: blur(calc(var(--vidrio) * 20px));
}
/*  Una línea de acento arriba de la pantalla: es lo que hace que se note de
    un vistazo con qué usuario estás adentro.                                */
:root[data-combo] #cuerpo::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, transparent,
              var(--acento) 30%, var(--acento) 70%, transparent);
  opacity: calc(.35 + var(--brillo) * .65);
}

/* ------------------------------------------------ el selector de combinación */
.combo-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.combo {
  display: flex; flex-direction: column; gap: 6px; padding: 7px; min-height: 0;
  border: 1.5px solid var(--borde); border-radius: 12px; cursor: pointer;
  background: var(--fondo2); text-align: center;
}
.combo.on { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.combo .muestra {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 38px; border-radius: 8px; border: 1px solid var(--borde);
}
.combo .muestra i { width: 16px; height: 16px; border-radius: 999px; }
.combo .muestra u { width: 22px; height: 5px; border-radius: 3px; }
.combo .nom { font-size: 11px; font-weight: 600; color: var(--texto);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================================
   FACTURACIÓN · las casillas del ticket
   ========================================================================== */
.ajustes-venta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0 2px; padding-top: 12px; border-top: 1px solid var(--borde);
}
.casilla-venta {
  display: flex; flex-direction: column; gap: 4px; margin: 0; cursor: text;
}
.casilla-venta .et {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto3);
}
.casilla-venta .campo-mini {
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  border-radius: 10px; border: 1.5px solid var(--borde); background: var(--campo);
  transition: border-color .12s;
}
.casilla-venta .campo-mini:focus-within { border-color: var(--acento); }
.casilla-venta.puesta .campo-mini { border-color: var(--acento); }
.casilla-venta input {
  width: 100%; min-width: 0; min-height: 0; padding: 8px 0; border: 0;
  background: none; color: var(--texto); font-size: 14px; text-align: right;
  font-variant-numeric: tabular-nums; outline: none;
}
.casilla-venta i {
  font-style: normal; font-size: 11px; color: var(--texto3); flex: 0 0 auto;
}
.metodo-chip.partir { border-style: dashed; }

/* ------------------------------------------------------- pagos combinados -- */
.pagos-resumen {
  display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px;
  border-radius: 14px; background: var(--campo); margin-bottom: 12px;
}
.pagos-resumen span { display: flex; flex-direction: column; }
.pagos-resumen span:last-child { text-align: right; }
.pagos-resumen b { font-size: 19px; font-variant-numeric: tabular-nums; }
.pagos-resumen i { font-style: normal; font-size: 11.5px; color: var(--texto2); }
.pagos-resumen.justo span:last-child b { color: var(--verde); }
.pagos-resumen.falta span:last-child b { color: var(--naranja); }
.pagos-resumen.sobra span:last-child b { color: var(--rojo); }

.pagos-lista { display: flex; flex-direction: column; gap: 8px; }
.pago-fila { display: flex; align-items: center; gap: 8px; }
.pago-fila select { flex: 1; min-width: 0; min-height: 44px; }
.pago-fila .pago-monto {
  width: 128px; flex: 0 0 auto; min-height: 44px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 15px;
}

/* =============================================================================
   CAJA · un poco más de presencia
   ========================================================================== */
.caja-bt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .16s;
  background: radial-gradient(70% 90% at 12% 0%,
              color-mix(in srgb, currentColor 16%, transparent), transparent 70%);
}
.caja-bt:hover::after { opacity: 1; }
.caja-bt.entra .ic, .caja-bt.sale .ic {
  box-shadow: 0 6px 18px color-mix(in srgb, currentColor 30%, transparent);
}
.caja-bt .ic { position: relative; overflow: hidden; }
/*  Un destello que cruza el ícono al pasar por encima. Corto y una sola vez:
    un brillo que late todo el tiempo cansa a la tercera hora de mostrador.  */
.caja-bt .ic::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%,
              rgba(255, 255, 255, .45) 50%, transparent 60%);
  transform: translateX(-120%);
}
.caja-bt:hover .ic::after { animation: destello .6s ease; }
@keyframes destello { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .caja-bt:hover .ic::after { animation: none; }
}

@media (max-width: 560px) {
  .ajustes-venta { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .casilla-venta .campo-mini { padding: 0 6px; }
  .casilla-venta input { font-size: 13px; }
  .pago-fila .pago-monto { width: 104px; }
}

/* =============================================================================
   FACTURACIÓN · terminal de mostrador
   --------------------------------------------------------------------------
   Esto es un mostrador, no una tienda: el que lo usa tiene el cliente adelante
   y las manos en el teclado. El carrito es una tabla con las columnas
   alineadas y los números a la derecha, porque así se barre con la vista de
   arriba abajo y se ve al toque cuál renglón está mal. Con tarjetas hay que
   leer cada una entera.
   ========================================================================== */
.vt { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1000px) {
  .vt { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .vt-der { position: sticky; top: 12px; }
}
.vt-izq { min-width: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------- cliente y cabecera ---- */
.vt-cab-venta {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.vt-cliente {
  flex: 1 1 260px; display: flex; align-items: center; gap: 11px; min-height: 0;
  padding: 10px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto);
}
.vt-cliente:hover { border-color: var(--acento); }
.vt-cliente .ic {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; background: var(--campo); color: var(--texto2);
}
.vt-cliente.puesto .ic { background: var(--acento); color: #fff; }
.vt-cliente .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-cliente .tx b { font-size: 14.5px; white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; }
.vt-cliente .tx i { font-style: normal; font-size: 11.5px; color: var(--texto2); }
.vt-cab-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-moneda { display: flex; align-items: center; gap: 6px; margin: 0; }
.vt-moneda > span { font-size: 10.5px; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--texto3); }
.vt-moneda select { width: auto; min-width: 78px; min-height: 36px;
                    padding: 4px 8px; font-size: 13.5px; }

kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10.5px;
  font-weight: 700; font-family: inherit; letter-spacing: .02em;
  background: var(--campo); color: var(--texto2);
  border: 1px solid var(--borde); border-bottom-width: 2px;
}

/* ------------------------------------------------------- el buscador ----- */
.vt-busc-caja { position: relative; margin-bottom: 12px; }
.vt-buscar input { min-height: 46px; font-size: 15px; }
.vt-sug {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  max-height: 330px; overflow: auto; border-radius: 12px;
  border: 1.5px solid var(--borde); background: var(--panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.vt-sug-fila {
  display: grid; grid-template-columns: 76px 1fr 78px 108px; align-items: center;
  gap: 10px; width: 100%; padding: 9px 13px; min-height: 0; border: 0;
  border-bottom: 1px solid var(--borde); background: none; cursor: pointer;
  text-align: left; color: var(--texto); font-size: 13.5px;
}
.vt-sug-fila:last-child { border-bottom: 0; }
.vt-sug-fila.on { background: var(--acento-suave, rgba(10,132,255,.14)); }
.vt-sug-fila .cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--texto2); overflow: hidden; text-overflow: ellipsis;
}
.vt-sug-fila .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-sug-fila .stk { font-size: 11.5px; color: var(--texto2); text-align: right; }
.vt-sug-fila .stk.sin { color: var(--naranja); font-weight: 600; }
.vt-sug-fila .pre {
  text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vt-sug-nada {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; font-size: 13px; color: var(--texto2);
}

/* ---------------------------------------------------------- la tabla ----- */
.vt-tabla {
  border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden;
  background: var(--panel);
}
.vt-cab, .vt-fila {
  display: grid;
  /*  El nombre se queda con lo que sobre. Las columnas de números miden lo
      justo: lo que importa es que estén alineadas entre sí, no que sean
      anchas.                                                              */
  grid-template-columns: 28px 76px minmax(0, 1fr) 92px 92px 50px 108px 52px;
  align-items: center; gap: 7px; padding: 0 10px;
}
/*  En una pantalla angosta se van primero el código y el unitario: el código
    ya está en el buscador y el unitario se ve tocando el renglón. Lo que no
    puede faltar es el nombre, la cantidad y el subtotal.                   */
@media (max-width: 1280px) {
  .vt-cab, .vt-fila {
    grid-template-columns: 28px minmax(0, 1fr) 92px 50px 108px 52px;
  }
  .vt-cab .c-cod, .vt-fila .c-cod,
  .vt-cab .c-pu, .vt-fila .c-pu { display: none; }
}
@media (max-width: 1100px) {
  .vt-cab, .vt-fila {
    grid-template-columns: minmax(0, 1fr) 92px 108px 52px;
  }
  .vt-cab .c-n, .vt-fila .c-n,
  .vt-cab .c-desc, .vt-fila .c-desc { display: none; }
}
.vt-cab {
  height: 34px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto3);
  background: var(--campo); border-bottom: 1.5px solid var(--borde);
}
.vt-fila {
  min-height: 48px; border: 0; border-bottom: 1px solid var(--borde);
  background: none; color: var(--texto); text-align: left; cursor: default;
  outline: none; font-size: 13.5px; width: 100%;
}
.vt-fila:last-child { border-bottom: 0; }
.vt-fila:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
/*  El renglón elegido se marca con una barra de acento al costado: se ve de
    reojo sin tener que buscar cuál está resaltado.                          */
.vt-fila.on {
  background: var(--acento-suave, rgba(10,132,255,.13));
  box-shadow: inset 3px 0 0 var(--acento);
}
.vt-fila.ojo .c-nom i { color: var(--naranja); }

.vt-cab .c-n, .vt-fila .c-n { color: var(--texto3); font-size: 11.5px; }
.vt-cab .c-cod, .vt-fila .c-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--texto2); overflow: hidden; text-overflow: ellipsis;
}
.vt-fila .c-nom { display: flex; flex-direction: column; min-width: 0; }
.vt-fila .c-nom b {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-fila .c-nom i {
  font-style: normal; font-size: 10.5px; color: var(--texto3);
}
.vt-fila .c-nom i.mano { color: var(--violeta); }

.vt-cab .c-cant { text-align: center; }
.vt-fila .c-cant {
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.vt-fila .c-cant button {
  width: 26px; height: 26px; border-radius: 7px; padding: 0; min-height: 0;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.vt-fila .c-cant button:hover { border-color: var(--acento); color: var(--acento); }
.vt-fila .c-cant b {
  min-width: 28px; text-align: center; font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.vt-cab .c-pu, .vt-cab .c-desc, .vt-cab .c-sub { text-align: right; }
.vt-fila .c-pu, .vt-fila .c-desc, .vt-fila .c-sub {
  text-align: right; font-variant-numeric: tabular-nums;
}
.vt-fila .c-pu { color: var(--texto2); }
.vt-fila .c-desc { color: var(--texto3); font-size: 12.5px; }
.vt-fila .c-desc.hay { color: var(--verde); font-weight: 600; }
.vt-fila .c-sub { display: flex; flex-direction: column; align-items: flex-end; }
.vt-fila .c-sub b { font-weight: 700; font-size: 14px; }
.vt-fila .c-sub i { font-style: normal; font-size: 10px; color: var(--texto3); }
.vt-fila .c-bt { display: flex; gap: 2px; justify-content: flex-end; }
.vt-fila .c-bt button {
  width: 26px; height: 26px; border: 0; border-radius: 7px; padding: 0;
  min-height: 0; background: none; color: var(--texto3); cursor: pointer;
  font-size: 12px; opacity: 0; transition: opacity .12s;
}
.vt-fila:hover .c-bt button, .vt-fila.on .c-bt button { opacity: 1; }
.vt-fila .c-bt button:hover { background: var(--campo); color: var(--texto); }

.vt-vacio {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 42px 20px; text-align: center;
}
.vt-vacio b { font-size: 15px; }
.vt-vacio span { font-size: 12.5px; color: var(--texto2); }

/* ---------------------------------------------- la barra de las teclas --- */
.vt-teclas {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 4px 0;
  font-size: 11px; color: var(--texto3);
}
.vt-teclas span { display: inline-flex; align-items: center; gap: 5px; }
.vt-teclas i { font-style: normal; }

/* ---------------------------------------------------------- el ticket ---- */
.vt-ticket {
  border: 1.5px solid var(--borde); border-radius: 14px; overflow: hidden;
  background: var(--panel);
}
.vt-ticket:empty { display: none; }
.vt-tk-cab {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--campo);
  border-bottom: 1px solid var(--borde);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto3);
}
.vt-tk-cab b { font-size: 12px; color: var(--texto); letter-spacing: 0;
               text-transform: none; }
.vt-lin {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 14px; font-size: 13px; color: var(--texto2);
}
.vt-lin b { color: var(--texto); font-variant-numeric: tabular-nums;
            font-weight: 600; }
.vt-lin.resta b { color: var(--rojo); }
.vt-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 14px; margin-top: 4px;
  border-top: 1.5px solid var(--borde);
}
.vt-total span { font-size: 11px; font-weight: 700; letter-spacing: .1em;
                 color: var(--texto3); }
.vt-total b {
  font-size: 26px; font-weight: 800; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.vt-equiv {
  padding: 0 14px 8px; text-align: right; font-size: 11.5px;
  color: var(--texto2); font-variant-numeric: tabular-nums;
}
.vt-nota {
  padding: 0 14px 10px; font-size: 10.5px; color: var(--texto3);
  line-height: 1.5;
}

.vt-ajustes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--borde);
}
.vt-casilla { display: flex; flex-direction: column; gap: 4px; margin: 0;
              cursor: text; }
.vt-casilla .et {
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto3);
}
.vt-casilla .caja {
  display: flex; align-items: center; gap: 3px; padding: 0 7px;
  border-radius: 8px; border: 1.5px solid var(--borde); background: var(--campo);
}
.vt-casilla .caja:focus-within, .vt-casilla.puesta .caja { border-color: var(--acento); }
.vt-casilla input {
  width: 100%; min-width: 0; min-height: 0; padding: 7px 0; border: 0;
  background: none; color: var(--texto); font-size: 13.5px; text-align: right;
  font-variant-numeric: tabular-nums; outline: none;
}
.vt-casilla i { font-style: normal; font-size: 10.5px; color: var(--texto3); }

.vt-metodos {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px;
}
.vt-met {
  padding: 6px 11px; border-radius: 8px; min-height: 0; font-size: 12px;
  border: 1.5px solid var(--borde); background: var(--campo); color: var(--texto);
  cursor: pointer;
}
.vt-met.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.vt-met.partir { border-style: dashed; }

.vt-bts { display: flex; gap: 8px; padding: 0 14px 14px; }
.vt-bts .btn { flex: 0 0 auto; }
.vt-cobrar {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 14px; min-height: 48px;
}
.vt-cobrar b { font-variant-numeric: tabular-nums; font-size: 15px; }
.vt-cobrar kbd { background: rgba(255, 255, 255, .22); color: #fff;
                 border-color: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------- los atajos ------ */
.atajo-grupo {
  padding: 12px 16px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto3);
}
.atajo-fila {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--borde);
}
.atajo-fila:last-child { border-bottom: 0; }
.atajo-fila .nom { flex: 1; min-width: 0; font-size: 14px; }
.atajo-tecla {
  min-width: 110px; padding: 7px 12px; border-radius: 8px; min-height: 0;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--borde); border-bottom-width: 2px;
  background: var(--campo); color: var(--texto);
}
.atajo-tecla.vacio { color: var(--texto3); font-weight: 500; }
.atajo-tecla.capturando {
  border-color: var(--acento); color: var(--acento); font-weight: 600;
  animation: latir-atajo 1.1s ease-in-out infinite;
}
@keyframes latir-atajo { 50% { opacity: .55; } }

/* ------------------------------------------------------------- celular --- */
@media (max-width: 760px) {
  .vt-cab { display: none; }
  .vt-fila {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "nom sub" "cant bt";
    padding: 10px 12px; row-gap: 6px; min-height: 0;
  }
  .vt-fila .c-n, .vt-fila .c-pu, .vt-fila .c-desc { display: none; }
  .vt-fila .c-cod { display: none; }
  .vt-fila .c-nom { grid-area: nom; }
  .vt-fila .c-sub { grid-area: sub; }
  .vt-fila .c-cant { grid-area: cant; justify-content: flex-start; }
  .vt-fila .c-bt { grid-area: bt; }
  .vt-fila .c-bt button { opacity: 1; }
  .vt-sug-fila { grid-template-columns: 1fr 96px; }
  .vt-sug-fila .cod, .vt-sug-fila .stk { display: none; }
  .vt-teclas { display: none; }
}

/* =============================================================================
   INVENTARIO · tabla de stock
   --------------------------------------------------------------------------
   Lo que se viene a hacer acá es mirar números —cuánto hay, cuánto falta,
   cuánto deja cada uno— y para eso las columnas alineadas ganan a las
   tarjetas: se compara de un vistazo, de arriba abajo.
   ========================================================================== */
.iv { display: flex; flex-direction: column; }

/* ------------------------------------------------------------ las cifras -- */
.iv-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.iv-kpi {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--borde); background: var(--panel);
}
/*  Una línea de color arriba de cada cifra. Es lo que hace que se lean como
    indicadores y no como cajas de texto.                                    */
.iv-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--texto3);
}
.iv-kpi.base::before { background: var(--acento); }
.iv-kpi.ojo::before { background: var(--naranja); }
.iv-kpi.mal::before { background: var(--rojo); }
.iv-kpi .et {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto3);
}
.iv-kpi b {
  font-size: 22px; font-weight: 750; letter-spacing: -.4px; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.iv-kpi.ojo b { color: var(--naranja); }
.iv-kpi.mal b { color: var(--rojo); }
.iv-kpi i { font-style: normal; font-size: 11px; color: var(--texto2); }

.iv-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

/* ------------------------------------------------------------- los rubros -- */
.iv-rubros {
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px 4px;
  scrollbar-width: none;
}
.iv-rubros::-webkit-scrollbar { display: none; }
.iv-rubros:empty { display: none; }
.iv-rubro {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 0;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer;
  border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto);
}
.iv-rubro i {
  font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 5px; background: var(--campo); color: var(--texto2);
}
.iv-rubro.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.iv-rubro.on i { background: rgba(255, 255, 255, .24); color: #fff; }

.iv-buscar { margin: 8px 0 0; }
.iv-buscar input { min-height: 46px; font-size: 15px; }

.iv-filtros {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0;
}
.iv-chip {
  padding: 5px 11px; border-radius: 8px; min-height: 0; font-size: 12px;
  border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto2);
  cursor: pointer;
}
.iv-chip.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.iv-sep { flex: 1; }
select.iv-select {
  width: auto; min-width: 168px; min-height: 0; padding: 6px 10px;
  font-size: 12px; border-radius: 8px;
  border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto);
}
.iv-info { font-size: 11.5px; color: var(--texto3); margin: 10px 2px 8px;
           min-height: 15px; }

/* -------------------------------------------------------------- la tabla -- */
.iv-tabla {
  border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden;
  background: var(--panel);
}
.iv-cab, .iv-fila {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 108px 118px 96px 104px 62px 56px;
  align-items: center; gap: 8px; padding: 0 10px;
}
.iv-cab.sin-costos, .iv-fila.sin-costos {
  grid-template-columns: 82px minmax(0, 1fr) 108px 118px 104px 56px;
}
.iv-cab {
  height: 32px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto3);
  background: var(--campo); border-bottom: 1.5px solid var(--borde);
}
.iv-fila {
  min-height: 46px; border: 0; border-bottom: 1px solid var(--borde);
  background: none; color: var(--texto); text-align: left; width: 100%;
  cursor: pointer; outline: none; font-size: 13px;
}
.iv-fila:last-child { border-bottom: 0; }
.iv-fila:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.iv-fila.on {
  background: var(--acento-suave, rgba(10,132,255,.13));
  box-shadow: inset 3px 0 0 var(--acento);
}
.iv-fila.apagado { opacity: .5; }

.iv-cab .k-cod, .iv-fila .k-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--texto2); overflow: hidden; text-overflow: ellipsis;
}
.iv-fila .k-nom { display: flex; align-items: center; gap: 9px; min-width: 0; }
.iv-fila .k-nom .mini {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; overflow: hidden;
  background: var(--campo); display: flex; align-items: center;
  justify-content: center; color: var(--texto3); font-style: normal;
}
.iv-fila .k-nom .mini img { width: 100%; height: 100%; object-fit: cover; }
.iv-fila .k-nom b {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-cab .k-rub, .iv-fila .k-rub {
  font-size: 11.5px; color: var(--texto2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.iv-cab .k-cos, .iv-cab .k-pre, .iv-cab .k-mar { text-align: right; }
.iv-fila .k-cos, .iv-fila .k-pre, .iv-fila .k-mar {
  text-align: right; font-variant-numeric: tabular-nums;
}
.iv-fila .k-cos { color: var(--texto2); font-size: 12.5px; }
.iv-fila .k-pre { font-weight: 700; }
.iv-fila .k-mar { font-size: 12px; font-weight: 600; color: var(--texto2); }
.iv-fila .k-mar.bien { color: var(--verde); }
.iv-fila .k-mar.flojo { color: var(--naranja); }

/* ---------------------------------------------------- la barra de stock -- */
/*  Lo que más sirve de toda la tabla: muestra cuánto hay contra el mínimo,
    así se ve cuál está por caer sin leer dos números y hacer la cuenta.     */
.iv-stk { display: flex; flex-direction: column; gap: 3px; }
.iv-stk > b {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.iv-stk.bien > b { color: var(--verde); }
.iv-stk.ojo > b { color: var(--naranja); }
.iv-stk.mal > b { color: var(--rojo); }
.iv-stk .barra {
  position: relative; display: block; height: 4px; border-radius: 3px;
  background: var(--campo); overflow: visible;
}
.iv-stk .barra i {
  display: block; height: 100%; border-radius: 3px; background: var(--texto3);
  transition: width .2s ease;
}
.iv-stk.bien .barra i { background: var(--verde); }
.iv-stk.ojo .barra i { background: var(--naranja); }
.iv-stk.mal .barra i { background: var(--rojo); }
/*  La marca del mínimo: la línea que no habría que cruzar. */
.iv-stk .barra u {
  position: absolute; top: -2px; width: 1.5px; height: 8px; border-radius: 1px;
  background: var(--texto2); opacity: .75;
}
.iv-stk.otro {
  font-size: 11.5px; color: var(--texto2); font-style: italic;
}

.iv-fila .k-bt { display: flex; gap: 2px; justify-content: flex-end; }
.iv-fila .k-bt button {
  width: 24px; height: 24px; border: 0; border-radius: 6px; padding: 0;
  min-height: 0; background: none; color: var(--texto3); cursor: pointer;
  font-size: 13px; opacity: 0; transition: opacity .12s;
}
.iv-fila:hover .k-bt button, .iv-fila.on .k-bt button { opacity: 1; }
.iv-fila .k-bt button:hover { background: var(--campo); color: var(--acento); }

/* ---------------------------------------------- lo que se ve al entrar --- */
.iv-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 16px 2px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto3);
}
.iv-titulo b { color: var(--texto2); }
.iv-mini-lista {
  border: 1.5px solid var(--borde); border-radius: 10px; overflow: hidden;
  background: var(--panel);
}
.iv-mini-fila {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) 110px 90px;
  align-items: center; gap: 10px; width: 100%; padding: 9px 12px; min-height: 0;
  border: 0; border-bottom: 1px solid var(--borde); background: none;
  color: var(--texto); text-align: left; cursor: pointer; font-size: 13px;
}
.iv-mini-fila:last-child { border-bottom: 0; }
.iv-mini-fila:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.iv-mini-fila .pt {
  width: 7px; height: 7px; border-radius: 999px; background: var(--texto3);
}
.iv-mini-fila .pt.ojo { background: var(--naranja); }
.iv-mini-fila .pt.mal { background: var(--rojo); }
.iv-mini-fila .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-mini-fila .rub { font-size: 11.5px; color: var(--texto2); text-align: right;
                     overflow: hidden; text-overflow: ellipsis; }
.iv-mini-fila .num { text-align: right; font-variant-numeric: tabular-nums; }
.iv-mini-fila .num b { font-weight: 700; }
.iv-mini-fila .num i { font-style: normal; font-size: 11px; color: var(--texto3); }

.iv-pista {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px; margin-top: 14px; border-radius: 12px;
  border: 1.5px dashed var(--borde); background: var(--fondo2);
}
.iv-pista .ic { font-size: 22px; color: var(--acento); }
.iv-pista > div { flex: 1; min-width: 190px; display: flex; flex-direction: column; }
.iv-pista b { font-size: 14.5px; }
.iv-pista span { font-size: 12px; color: var(--texto2); line-height: 1.45; }

/* --------------------------------------------------------------- angosto -- */
@media (max-width: 1240px) {
  .iv-cab, .iv-fila {
    grid-template-columns: minmax(0, 1fr) 118px 96px 104px 62px 56px;
  }
  .iv-cab.sin-costos, .iv-fila.sin-costos {
    grid-template-columns: minmax(0, 1fr) 118px 104px 56px;
  }
  .iv-cab .k-cod, .iv-fila .k-cod,
  .iv-cab .k-rub, .iv-fila .k-rub { display: none; }
}
@media (max-width: 900px) {
  .iv-cab, .iv-fila, .iv-cab.sin-costos, .iv-fila.sin-costos {
    grid-template-columns: minmax(0, 1fr) 104px 104px 44px;
  }
  .iv-cab .k-cos, .iv-fila .k-cos,
  .iv-cab .k-mar, .iv-fila .k-mar { display: none; }
  .iv-fila .k-bt button { opacity: 1; }
}
@media (max-width: 620px) {
  .iv-cab { display: none; }
  .iv-cab, .iv-fila, .iv-cab.sin-costos, .iv-fila.sin-costos {
    grid-template-columns: minmax(0, 1fr) 92px 40px;
  }
  .iv-kpi b { font-size: 19px; }
  .iv-mini-fila { grid-template-columns: 8px minmax(0, 1fr) 84px; }
  .iv-mini-fila .rub { display: none; }
}

/* ----------------------------------------------- los estilos completos ---- */
.cat-estilos { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.cat-estilo {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  min-height: 0; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--borde); background: var(--fondo2); color: var(--texto);
  transition: border-color .12s, transform .12s;
}
.cat-estilo:hover { border-color: var(--acento); transform: translateX(2px); }
.cat-estilo.cerca { border-color: var(--acento); }
.cat-estilo .mini {
  width: 58px; height: 44px; flex: 0 0 auto; border-radius: 8px; padding: 5px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px;
  align-content: start; border: 1px solid var(--borde); overflow: hidden;
}
.cat-estilo .mini u {
  grid-column: 1 / -1; height: 6px; border-radius: 2px; margin-bottom: 2px;
}
.cat-estilo .mini i { height: 14px; border-radius: 2px; border: 1px solid; }
.cat-estilo .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-estilo .tx b { font-size: 13.5px; font-weight: 650; }
.cat-estilo .tx i {
  font-style: normal; font-size: 11.5px; color: var(--texto2); line-height: 1.35;
}

/* =============================================================================
   LA HOJA DEL CATÁLOGO · el dibujo fino
   --------------------------------------------------------------------------
   Lo que separa un catálogo de una planilla no son más opciones: es el aire,
   el ritmo entre los bloques y que los precios tengan jerarquía. Acá va eso.
   ========================================================================== */

/*  La portada. Antes era una caja de color con el texto en el medio; ahora
    tiene degradado, una regla fina arriba del título y el nombre del negocio
    separado por una línea, que es como se arma la tapa de cualquier
    catálogo impreso.                                                        */
.cat-portada { padding: 52px 30px; gap: 0; }
.cat-portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(168deg, rgba(255,255,255,.16) 0%,
              transparent 42%, rgba(0,0,0,.18) 100%);
}
.cat-portada > * { position: relative; z-index: 2; }
.cat-portada-t { margin: 0; }
.cat-portada-s { margin-top: 12px; max-width: 34em; }
.cat-portada-e {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid currentColor; opacity: .72;
  display: inline-block;
}
.cat-portada.e-centrada .cat-portada-e { margin-left: auto; margin-right: auto; }
.cat-portada .cat-logo { margin-bottom: 26px; }

/*  Banda lateral: una franja de color a la izquierda y el texto apoyado
    contra ella. Se ve como una tapa, no como un cartel.                    */
.cat-portada.e-bandalateral {
  padding-left: 44px;
  background-image: linear-gradient(90deg,
    rgba(0,0,0,.26) 0 10px, transparent 10px);
}
.cat-portada.e-bloqueinferior { padding-bottom: 38px; }
.cat-portada.e-pantallacompleta { min-height: 380px; padding: 64px 34px; }

/* ------------------------------------------------------- título del rubro -- */
/*  Más aire arriba que abajo: el título tiene que quedar pegado a SUS
    productos y separado de los de arriba, si no parece que corta al revés. */
.cat-rubro { margin-bottom: 12px; }
.cat-rubro.r-barra { padding: 9px 14px; }
.cat-rubro.r-linea { padding-bottom: 7px; border-bottom-width: 1px; }
.cat-rubro.r-centrado { gap: 14px; }
.cat-rubro.r-centrado::before, .cat-rubro.r-centrado::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3;
}
.cat-rubro .n { margin-left: auto; }

/* ------------------------------------------------------------- la tarjeta -- */
.cat-tarj { transition: transform .14s ease, box-shadow .14s ease; }
button.cat-tarj:hover { transform: translateY(-3px); }
.cat-tarj.ef-elevada { box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }

/*  La foto, con un marco interior tenue: sin él, una foto de fondo blanco
    sobre una tarjeta blanca se pierde y el producto queda flotando.        */
.cat-foto { position: relative; }
.cat-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .10);
}
.cat-tarj.foto-defondo > .cat-foto::after { box-shadow: none; }

.cat-datos { gap: 3px; }
/*  Un poco de aire entre la foto y el nombre, y entre el nombre y el precio.
    Es lo que hace que se lea como ficha y no como un bloque de texto.      */
.cat-nom { margin-top: 2px; }
.cat-cod { opacity: .85; }
.cat-precios { margin-top: auto; padding-top: 6px; }
.cat-p1 { line-height: 1.1; }
.cat-p1.pe-pastilla, .cat-p1.pe-etiqueta { padding: 3px 11px; }
.cat-p1.pe-recuadro { padding: 2px 9px; }
.cat-antes { opacity: .7; }

/*  Las etiquetas, más chicas y con sombra propia: sobre una foto clara una
    etiqueta plana desaparece.                                              */
.cat-badge {
  padding: 3px 8px; box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
  backdrop-filter: saturate(140%);
}

/* ------------------------------------------------------------ el índice --- */
.cat-indice {
  padding: 14px 0 6px; border-top: 1px solid; border-bottom: 1px solid;
  border-color: currentColor; opacity: .9;
}
.cat-indice-l { border-bottom: 1px dotted currentColor; }

/* --------------------------------------------------------------- el pie --- */
.cat-pie { margin-top: 28px; padding-top: 14px; letter-spacing: .02em; }

/*  El encabezado de cada hoja, con más presencia cuando lleva banda. */
.cat-enc.banda { padding: 10px 16px; }
.cat-enc-logo img { max-height: 30px; }

/* =============================================================================
   LA VITRINA A LO ANCHO · y el buscador donde uno quiera
   --------------------------------------------------------------------------
   Una hoja A4 centrada está bien para imprimirla. En un monitor de escritorio
   es una tira angosta en el medio con dos franjas grises enormes al costado,
   y el que la mira piensa que el catálogo es chico, no que la hoja es A4.
   ========================================================================== */
.cat-hoja.cat-llena { max-width: none; width: 100%; }
.vit-hoja .cat-hoja.cat-llena { width: 100%; }
/*  A lo ancho el margen porcentual se vuelve gigantesco -6 % de 1800 px son
    108 px de cada lado-, así que se topea.                                  */
.cat-hoja.cat-llena > .cat-cuerpo { padding: min(var(--mrg, 6%), 34px); }
.cat-hoja.cat-llena > .cat-cuerpo > .cat-portada { border-radius: 0; }

/* ------------------------------------------------- el logo y el nombre --- */
.vit-marca { display: flex; align-items: center; gap: 10px; }
.vit-marca:empty { display: none; }
.vit-logo { width: auto; object-fit: contain; display: block; }

/* ---------------------------------------------- el buscador, abajo ------- */
.vit-grupo-busca {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
}
.vit-grupo-busca[hidden] { display: none; }
.vit-abajo {
  flex: 0 0 auto; display: flex; padding: 10px 16px;
  border-top: 1px solid var(--v-borde); background: var(--v-fondo);
}
.vit-abajo[hidden] { display: none; }

/*  Flotando: una pastilla en la esquina de abajo a la derecha. No va en el
    medio porque ahí aparece el globo de la lista de pedido y se pisan.     */
.vit.busca-flota .vit-abajo {
  position: fixed; right: 16px; bottom: calc(16px + var(--seguro-abajo, 0px));
  left: auto; z-index: 55; padding: 0; border: 0; background: none;
  width: min(360px, calc(100vw - 32px));
}
.vit.busca-flota .vit-grupo-busca {
  padding: 5px; border-radius: 999px; background: var(--v-fondo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
  border: 1px solid var(--v-borde);
}
.vit.busca-flota .vit-cuenta { padding-right: 10px; }
/*  Y un poco de aire abajo, para que la pastilla no tape para siempre el
    último renglón de productos.                                          */
.vit.busca-flota .vit-hoja { padding-bottom: 76px; }
.vista-llena.busca-flota .cat-vitrina-cuerpo { padding-bottom: 76px; }

/* ---------------------------------- y lo mismo en la vista de pantalla --- */
.vista-llena-abajo {
  flex: 0 0 auto; display: flex; padding: 10px 14px;
  background: var(--panel); border-top: 1px solid var(--borde);
}
.vista-llena-abajo[hidden] { display: none; }
.vista-llena-abajo > input { flex: 1; min-width: 0; }
.vista-llena.busca-flota .vista-llena-abajo {
  position: fixed; right: 16px; bottom: calc(16px + var(--seguro-abajo, 0px));
  left: auto; z-index: 160; padding: 0; border: 0; background: none;
  width: min(360px, calc(100vw - 32px));
}
.vista-llena.busca-flota .vista-llena-abajo > input {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
}

@media (max-width: 720px) {
  .cat-hoja.cat-llena > .cat-cuerpo { padding: min(var(--mrg, 6%), 16px); }
  .vit-abajo, .vista-llena-abajo { padding: 8px 12px; }
}

/* =============================================================================
   LOS LOGOS, SIN EL CUADRADO BLANCO
   --------------------------------------------------------------------------
   Antes cada logo llevaba «background:#fff» pegado a la imagen. Eso estaba
   para que un logo de tinta oscura se leyera con el tema oscuro puesto, pero
   arruina el caso normal: un PNG con fondo transparente -que es como viene
   cualquier logo hecho en serio- aparecía metido adentro de un cuadrado
   blanco que no es parte del logo.

   Ahora el fondo blanco no está, y además el marco de adorno del recuadro se
   apaga cuando hay una imagen de verdad: la inicial dibujada -el cuadrito
   azul con la letra, para cuando no hay logo cargado- lo sigue usando.
   ========================================================================== */
.costado .marca-logo:has(img),
.membrete-logo:has(img) {
  background: transparent; border-color: transparent;
}
.entrada .logo:has(img) {
  background: transparent; box-shadow: none;
}
/*  En el costado de la pantalla de entrada el recuadro es un vidrio sobre la
    imagen de fondo, no un cuadrado: ese se deja, porque ahí el logo necesita
    algo atrás para despegarse de la foto.                                  */

/* =============================================================================
   LA PORTADA DEL CATÁLOGO
   --------------------------------------------------------------------------
   Antes lo primero que se veía era un cartel azul de media pantalla con un
   número grande adentro -«12»- y abajo, sueltos, los botones. El número no
   se toca y no dice nada que no diga el renglón de al lado; lo que uno viene
   a hacer acá es mirarlo, mandarlo o arreglar lo que falta.

   Ahora la tapa es una sola tarjeta: qué hay, si está listo y los cuatro
   botones adentro. Y los seis accesos están partidos en dos bloques con
   título, porque tres son sobre QUÉ sale y tres sobre CÓMO se ve; en una
   fila corrida de seis hay que leerlos todos para darse cuenta.
   ========================================================================== */
.cat-tapa {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px;
}
.cat-tapa-fila {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
}
.cat-tapa-txt { flex: 1; min-width: 0; }
.cat-tapa-txt h2 {
  margin: 0; font-size: 20px; font-weight: 680; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-tapa-txt .sub {
  margin-top: 4px; font-size: 13px; color: var(--texto2); line-height: 1.45;
}
.cat-tapa-fila .etiqueta { flex: 0 0 auto; white-space: nowrap; }

/*  Los botones de arriba: mandar, WhatsApp e imprimir.

    Se acomodan solos y bajan al renglón siguiente cuando no entran. Antes
    era una grilla de tres columnas fijas con media queries, y se salía de la
    tarjeta: la media query mide la VENTANA, y esta tarjeta vive en la
    columna angosta de la derecha. Con la ventana en 1024 la regla decía «hay
    lugar para tres» mientras la tarjeta medía 420, y el de imprimir quedaba
    49 píxeles afuera.

    El ancho de arranque es 170 y no menos a propósito: el texto más largo
    -«Mandar el PDF» con su ícono- mide 164, y un botón no se achica abajo de
    su texto. Con 170 el salto de renglón pasa siempre ANTES de que algo
    tenga que salirse; con menos, los tres se quedan en una fila que no
    entra y vuelve el mismo problema.                                     */
.cat-tapa-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tapa-acciones > .btn { flex: 1 1 170px; min-height: 44px; }

/*  Lo que falta se marca en el botón mismo. Sin esto hay que leer los avisos
    de arriba y después buscar a cuál de los seis corresponden.            */
.cat-op.pendiente { border-color: color-mix(in srgb, var(--naranja, #FF9F0A) 55%, var(--borde)); }
.cat-op.pendiente .s { color: var(--naranja, #FF9F0A); font-weight: 600; }

/* =============================================================================
   LA PORTADA DEL CATÁLOGO · la hoja y la ficha técnica
   --------------------------------------------------------------------------
   Dos problemas tenía la de antes, y los dos se ven recién en una pantalla
   grande: los renglones se estiraban a ochocientos píxeles para sostener un
   ícono y dos líneas de texto chico pegadas a la izquierda -era una pantalla
   de teléfono agrandada-, y ninguno decía CÓMO está armado el catálogo, sólo
   el índice de lo que hay adentro de cada botón.

   Ahora la hoja de verdad ocupa el lado izquierdo y a la derecha va la ficha
   técnica: renglón por renglón, con el valor puesto. Se lee de arriba abajo y
   uno sabe con qué está armado sin entrar a ningún lado.
   ========================================================================== */
.cat-inicio { display: grid; gap: 16px; grid-template-columns: 1fr; }
.cat-inicio-lado { min-width: 0; }
@media (min-width: 1040px) {
  .cat-inicio {
    grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
    align-items: start;
  }
  /*  En pantalla grande la hoja queda fija mientras se recorre la ficha:
      así se ve el efecto de cada dato sin perder el catálogo de vista.
      Va con el «>» a propósito: la regla de abajo la pone en «relative» y,
      con el mismo peso, ganaría la última escrita.                      */
  .cat-inicio > .cat-inicio-vista { position: sticky; top: 8px; }
}

.cat-inicio-vista {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--borde); background: var(--campo);
}
.cat-inicio-hoja {
  max-height: min(74vh, 720px); overflow: hidden auto; padding: 10px;
  scrollbar-width: thin;
}
.cat-inicio-hoja .cat-hoja { box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.cat-inicio-abrir {
  position: absolute; right: 12px; bottom: 12px; min-height: 0;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
}
.cat-inicio-abrir:hover { border-color: var(--acento); }

/* ------------------------------------------------------- lo que falta --- */
/*  Compacto y tocable: cada aviso lleva al lugar donde se arregla, así que
    el renglón entero es el botón y no hace falta un «Ir» al costado.     */
.cat-pendientes { display: flex; flex-direction: column; gap: 6px; }
.cat-pend {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; min-height: 0; text-align: left; cursor: pointer;
  border-radius: 11px; color: inherit; font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--naranja, #FF9F0A) 42%, transparent);
  background: color-mix(in srgb, var(--naranja, #FF9F0A) 9%, transparent);
}
.cat-pend.suave {
  border-color: var(--borde);
  background: color-mix(in srgb, var(--texto) 5%, transparent);
}
.cat-pend .ic { flex: 0 0 auto; font-size: 14px; }
.cat-pend .tx { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.cat-pend .fl { color: var(--texto3); font-size: 16px; }

/* ------------------------------------------------------ la ficha técnica */
.cat-datos {
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
}
.cat-dato {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 10px 14px; min-height: 0; cursor: pointer; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--borde);
  color: inherit; font-family: inherit;
}
.cat-dato:first-child { border-top: 0; }
.cat-dato:hover { background: var(--campo); }
.cat-dato .et {
  flex: 0 0 auto; font-size: 12.5px; color: var(--texto2);
  min-width: 42%;
}
.cat-dato .va {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*  Lo que está apagado se escribe en gris: «Sin portada» no es un valor
    elegido con ganas, es algo que falta y tiene que notarse.            */
.cat-dato.flojo .va { color: var(--texto3); font-weight: 500; }

/*  (Los botones de arriba estaban definidos otra vez acá, con tres columnas
    fijas, y le ganaban a la regla de más arriba por estar después. Dos
    reglas para la misma fila en dos lugares del archivo: la de arriba no
    hacía nada y nadie lo sabía. Ahora hay una sola, con las demás.)     */
/*  En la columna angosta el menú de trabajos va en una sola fila por
    renglón: dos por fila ahí entran cortados.                           */
@media (min-width: 1040px) {
  .cat-inicio-lado .cat-menu { grid-template-columns: 1fr; }
}

/* =============================================================================
   LAS FICHAS DEL PANEL · cada número con el color de lo que mide
   --------------------------------------------------------------------------
   Antes «Facturado hoy» era un rectángulo azul macizo y las otras tres, cajas
   grises con el número en blanco. El azul no significaba nada -no es que lo
   facturado sea azul-, era sólo «esta es la importante», y las otras tres
   quedaban indistinguibles entre sí: había que leer la etiqueta de cada una
   para saber cuál era la que entró y cuál la que salió.

   Ahora cada ficha tiene su tono: lo que entra en verde, lo que sale en rojo,
   lo facturado en azul, el promedio en violeta. El color no está pegado
   encima, está en el número, en un baño muy suave del fondo, en la franja de
   arriba y en el ícono. De lejos se lee el tablero sin leer una palabra.
   ========================================================================== */
.tile {
  --t: var(--azul);
  position: relative; overflow: hidden;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--t) 11%, var(--panel)) 0%,
      var(--panel) 68%);
  transition: border-color .14s ease;
}
/*  La franja de arriba. Es lo que hace que se distingan en una fila de
    cuatro sin tener que mirar el número.                                  */
.tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--t);
}
.tile:hover { border-color: color-mix(in srgb, var(--t) 45%, var(--borde)); }

.tile-arr { display: flex; align-items: center; gap: 8px; }
.tile-arr .et { flex: 1; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.tile-ic {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; font-weight: 700;
  background: color-mix(in srgb, var(--t) 20%, transparent);
  color: var(--t);
}
.tile .vl { color: var(--t); }
.tile .equiv { color: var(--texto2); }

/*  El pie puede llevar su propio color: la variación contra ayer sube o
    baja, y eso no es el tono de la ficha sino un dato aparte.            */
.tile.pie-verde .pie { color: var(--verde); font-weight: 600; }
.tile.pie-rojo .pie { color: var(--rojo); font-weight: 600; }

.tile.t-azul    { --t: var(--azul); }
.tile.t-verde   { --t: var(--verde); }
.tile.t-rojo    { --t: var(--rojo); }
.tile.t-violeta { --t: var(--violeta); }
.tile.t-ambar   { --t: var(--naranja); }

/*  Con el tema claro los mismos colores sobre blanco quedan flojos: el
    verde y el ámbar de iOS están pensados para fondo oscuro. Se oscurecen
    sólo para el número, que es lo que hay que poder leer.                */
:root[data-tema="claro"] .tile .vl,
:root[data-tema="claro"] .panel-resumen .pr-lado:not(.caja) .nm {
  color: color-mix(in srgb, var(--t) 78%, #000);
}
:root[data-tema="claro"] .tile {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--t) 7%, var(--panel)) 0%, var(--panel) 68%);
}

/* --------------------------------------------- la franja de resultado --- */
/*  Ganancia y neto. Antes era una tarjeta gris con dos números sueltos en
    las puntas; el verde de la ganancia estaba fijo, así que un día de
    pérdida se leía igual de verde que uno bueno.                         */
.panel-resumen {
  --t: var(--verde);
  position: relative; display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--t) 12%, var(--panel)) 0%,
    var(--panel) 52%, var(--panel) 100%);
  overflow: hidden;
}
.panel-resumen::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--t);
}
.panel-resumen.t-verde { --t: var(--verde); }
.panel-resumen.t-rojo  { --t: var(--rojo); }
.pr-lado { flex: 1; min-width: 0; padding: 14px 18px; }
.pr-lado .et {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--texto3);
}
.pr-lado .nm {
  font-size: 27px; font-weight: 700; letter-spacing: -.8px; margin-top: 3px;
  font-variant-numeric: tabular-nums; color: var(--t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-lado .eq { font-size: 11.5px; color: var(--texto2); margin-top: 2px; }
/*  El neto en caja no es ganancia ni pérdida: es cuánta plata hay. Va en el
    color del texto, para no decir con el color algo que no es.           */
.pr-lado.caja .nm { color: var(--texto); }
.pr-raya { width: 1px; background: var(--borde); flex: 0 0 1px; margin: 12px 0; }
@media (max-width: 560px) {
  .panel-resumen { flex-direction: column; }
  .pr-raya { width: auto; height: 1px; flex: 0 0 1px; margin: 0 18px; }
  .pr-lado.derecha { text-align: left; }
}

/* =============================================================================
   LA TIRA DE SOLAPAS · con flechas
   --------------------------------------------------------------------------
   Dieciséis solapas no entran en el ancho del panel. La tira de fichas de
   siempre esconde la barra de desplazamiento porque está pensada para el
   dedo, que arrastra; con el mouse eso deja las últimas fuera de alcance y
   había que achicar el navegador entero para llegar a «Vitrina».
   ========================================================================== */
.cat-pest {
  position: sticky; top: 0; z-index: 4; background: var(--fondo);
  padding: 6px 0 8px;
  display: flex; align-items: center; gap: 4px;
}
.cat-pest-tira {
  flex: 1; min-width: 0; display: flex; gap: 7px;
  /*  Sin «scroll-behavior: smooth» acá: puesto en la hoja de estilos afecta
      TAMBIEN a los saltos que hace el codigo -poner a la vista la solapa
      elegida-, que pasan a ser una animacion y quedan a medio camino si algo
      la interrumpe. El deslizamiento suave va en las flechas, que es donde
      se quiere ver.                                                       */
  overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  /*  El degradado de la punta avisa que hay más de este lado. Se enciende
      sólo cuando queda algo para ver: una sombra permanente en el borde
      miente y uno busca solapas que no existen.                          */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--m-izq, 0px),
    #000 calc(100% - var(--m-der, 0px)), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--m-izq, 0px),
    #000 calc(100% - var(--m-der, 0px)), transparent 100%);
}
.cat-pest-tira::-webkit-scrollbar { display: none; }
.cat-pest.hay-izq .cat-pest-tira { --m-izq: 22px; }
.cat-pest.hay-der .cat-pest-tira { --m-der: 22px; }

.cat-pest-fl {
  flex: 0 0 auto; width: 26px; height: 32px; padding: 0; min-height: 0;
  display: none; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; font-size: 17px; line-height: 1;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
}
.cat-pest-fl:hover { color: var(--texto); border-color: var(--acento); }
.cat-pest.hay-izq .cat-pest-fl.izq,
.cat-pest.hay-der .cat-pest-fl.der { display: flex; }

/* =============================================================================
   VER CÓMO QUEDA EN CADA APARATO
   --------------------------------------------------------------------------
   Casi todo el catálogo se mira desde el teléfono -es lo que se manda por
   WhatsApp- y el diseño se arma en la computadora. Sin poder verlo angosto,
   uno termina mandando una hoja de seis columnas que en el celular no se lee.

   No es un zoom: se le achica el ancho de verdad al recuadro, así que la hoja
   recalcula cuántas tarjetas entran por fila igual que lo haría en el
   teléfono.
   ========================================================================== */
.cat-aparatos {
  display: flex; gap: 3px; flex: 0 0 auto; padding: 2px;
  border-radius: 10px; background: var(--campo); border: 1px solid var(--borde);
}
.cat-aparato {
  width: 30px; height: 26px; padding: 0; min-height: 0; border: 0;
  border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1;
  background: none; color: var(--texto2);
  display: flex; align-items: center; justify-content: center;
}
.cat-aparato:hover { color: var(--texto); }
.cat-aparato.on { background: var(--panel); color: var(--texto);
                  box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/*  El recuadro angosto, centrado y con marco: tiene que parecer un aparato,
    no una ventana rota.                                                    */
.cat-vista.angosta > .cat-hoja,
.cat-vitrina-cuerpo.angosta > .cat-hoja {
  max-width: var(--ancho-aparato, 390px);
  margin-left: auto; margin-right: auto;
  border-radius: 18px;
  box-shadow: 0 0 0 7px rgba(128, 128, 128, .18),
              0 14px 40px rgba(0, 0, 0, .34);
}
.cat-vista.angosta, .cat-vitrina-cuerpo.angosta { padding: 14px 10px; }
/*  A lo ancho la hoja se estira al recuadro; con el aparato puesto el
    recuadro es el aparato, así que se la deja llenar igual.               */
.cat-vista.angosta > .cat-hoja.cat-llena,
.cat-vitrina-cuerpo.angosta > .cat-hoja.cat-llena {
  width: 100%; max-width: var(--ancho-aparato, 390px);
}

/* =============================================================================
   LOS BOTONES DE CONTACTO
   --------------------------------------------------------------------------
   Un catálogo que se manda por WhatsApp no sirve de mucho si el que lo mira
   no tiene cómo contestar. El número estaba en el pie, en letra chica, y
   había que copiarlo a mano. Estos se tocan y abren la conversación.
   ========================================================================== */
.cat-redes { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.cat-redes.en-pie { margin-top: 18px; }
.cat-redes.en-portada { margin-top: 22px; }
.cat-redes.en-barra { margin: 0; flex: 0 0 auto; }
.cat-redes-tit {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-align: inherit; opacity: .8;
}
.cat-redes-tira {
  display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: inherit; align-items: center;
}
.cat-redes.en-barra .cat-redes-tira { flex-wrap: nowrap; }

.cat-red {
  display: inline-flex; align-items: center; gap: 7px;
  padding: calc(7px * var(--red-esc, 1)) calc(13px * var(--red-esc, 1));
  font-size: calc(12.5px * var(--red-esc, 1));
  font-weight: 650; line-height: 1; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.cat-red:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cat-red .ic { font-size: calc(14px * var(--red-esc, 1)); line-height: 1; }

.cat-redes.f-pastilla   .cat-red { border-radius: 999px; }
.cat-redes.f-redondeada .cat-red { border-radius: 10px; }
.cat-redes.f-cuadrada   .cat-red { border-radius: 0; }
/*  Círculo: sólo el ícono, y el alto tiene que igualar al ancho o sale un
    óvalo. Por eso el texto se apaga en el dibujante y no acá.            */
.cat-redes.f-circulo .cat-red {
  border-radius: 50%; padding: 0;
  width: calc(38px * var(--red-esc, 1)); height: calc(38px * var(--red-esc, 1));
  justify-content: center;
}
.cat-redes.e-sinmarco .cat-red { padding-left: 0; padding-right: 0; gap: 5px; }
.cat-redes.e-sinmarco.f-circulo .cat-red { width: auto; }

/* ------------------------------------------- en la barra de la vitrina --- */
.vit-botones { display: flex; flex: 0 0 auto; }
.vit-botones[hidden] { display: none; }
@media (max-width: 720px) {
  /*  En el teléfono la barra ya lleva el logo y el buscador; los botones
      pasan a renglón propio en vez de apretar todo.                      */
  .vit-botones { order: 4; flex: 1 1 100%; }
  .vit-botones .cat-redes-tira { flex-wrap: wrap; }
}

/* =============================================================== el panel = */
.cat-redes-edit { display: flex; flex-direction: column; gap: 8px; }
.cat-red-fila {
  border: 1px solid var(--borde); border-radius: 13px; padding: 10px 12px;
  background: var(--fondo2); display: flex; flex-direction: column; gap: 8px;
}
.cat-red-fila .cab { display: flex; align-items: center; gap: 9px; }
.cat-red-fila .cab .ic {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.cat-red-fila .cab .nm { flex: 1; min-width: 0; font-size: 13.5px; }
.cat-red-fila .mv {
  width: 26px; height: 26px; padding: 0; min-height: 0; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.cat-red-fila .mv:disabled { opacity: .35; cursor: default; }
.cat-red-fila .mv.bo:hover { color: var(--rojo); border-color: var(--rojo); }

.cat-red-tipos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
}
@media (min-width: 560px) {
  .cat-red-tipos { grid-template-columns: repeat(3, 1fr); }
}
.cat-red-tipo {
  display: flex; align-items: center; gap: 8px; padding: 10px 11px;
  min-height: 0; border-radius: 11px; cursor: pointer; text-align: left;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  border: 1.5px solid var(--borde); background: var(--fondo2);
  color: var(--texto);
}
.cat-red-tipo:hover { border-color: var(--red-col, var(--acento)); }
.cat-red-tipo .ic { font-size: 15px; line-height: 1; }

/* =============================================================================
   DONDE VA CADA COSA · y que se quede ahi
   --------------------------------------------------------------------------
   Los botones se movian solos en el telefono: el media query los sacaba de la
   barra y les daba un renglon propio arriba de todo. En la computadora se
   veian donde uno los habia puesto y en el celular no, que es exactamente lo
   que no tiene que pasar. Ahora la barra se desplaza de costado y los botones
   se quedan adentro.
   ========================================================================== */
@media (max-width: 720px) {
  .vit-botones { order: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .vit-botones .cat-redes-tira {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .vit-botones .cat-redes-tira::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------- el buscador, en cada esquina - */
.vit.busca-flota.esq-abi .vit-abajo {
  right: auto; left: 16px;
}
.vit.busca-flota.esq-ard .vit-abajo {
  bottom: auto; top: calc(16px + var(--seguro-arriba, 0px));
}
.vit.busca-flota.esq-ari .vit-abajo {
  bottom: auto; top: calc(16px + var(--seguro-arriba, 0px));
  right: auto; left: 16px;
}
.vit.busca-flota.esq-abm .vit-abajo {
  right: auto; left: 50%; transform: translateX(-50%);
}
/*  Arriba no hace falta el aire de abajo, y al medio el globo de la lista de
    pedido esta justo ahi, asi que el buscador sube un poco.               */
.vit.busca-flota.esq-ard .vit-hoja,
.vit.busca-flota.esq-ari .vit-hoja { padding-bottom: 0; }
.vit.busca-flota.esq-abm .vit-abajo { bottom: calc(74px + var(--seguro-abajo, 0px)); }

/* --------------------------------------------- el buscador, en la hoja --- */
/*  Adentro del papel: con los colores del catalogo, no los del sistema. Es
    para el que quiere que la pantalla sea el catalogo entero y nada mas.  */
.vit.busca-hoja .vit-abajo {
  order: -1; position: static; width: auto; padding: 10px 16px 0;
  background: none; border: 0;
}
.vit.busca-hoja .vit-hoja { padding-top: 0; }

/* ------------------------------------------------ los rubros, en la hoja - */
.vit.rubros-hoja .vit-rubros {
  border-bottom: 0; background: none;
  padding: 12px 16px 2px;
}
.vit-rubro-lista { padding: 10px 16px; }
.vit-rubro-lista .campo { margin: 0; }
.vit-rubro-lista .campo > label { display: none; }

/* =============================================================================
   LA MARCA QUE SE DESLIZA ENTRE LAS SOLAPAS
   --------------------------------------------------------------------------
   Un solo rectangulo de color que se mueve y se estira hasta la solapa que
   tocaste, en vez de que el color salte de una a otra. Con diecisiete
   solapas, ver de donde a donde fue la marca es lo que te ubica -sobre todo
   cuando la tira ademas se corrio de costado sola-.
   ========================================================================== */
.cat-pest-tira { position: relative; }
.cat-pest-marca {
  position: absolute; left: 0; top: 2px; bottom: 2px; width: 0;
  border-radius: var(--r-pill); background: var(--azul);
  pointer-events: none; opacity: 0; z-index: 0;
  transition: transform .26s cubic-bezier(.34, 1.3, .5, 1),
              width .26s cubic-bezier(.34, 1.3, .5, 1),
              opacity .15s ease;
}
/*  Las solapas van encima de la marca y sin fondo propio: el fondo ES la
    marca. Si cada una tuviera el suyo, al deslizarse pasaria por debajo de
    las del medio y se veria un parpadeo.                                  */
.cat-pest-tira .chip {
  position: relative; z-index: 1; background: transparent;
  transition: color .18s ease;
}
.cat-pest-tira .chip:hover { color: var(--texto); }
.cat-pest-tira .chip.on { background: transparent; color: #fff; }

/*  Con el movimiento apagado en el sistema, la marca salta y listo: a quien
    le molesta el movimiento no se le impone.                              */
/*  Mientras se acomoda por primera vez, sin movimiento: si no, se la ve
    venir desde la izquierda cada vez que se abre el panel.               */
.cat-pest-marca.sin-mov { transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .cat-pest-marca { transition: opacity .15s ease; }
}

/* =============================================================================
   AJUSTES
   --------------------------------------------------------------------------
   Era una pila de tarjetas del mismo tamaño y del mismo color: para encontrar
   una cosa había que leerla entera. Ahora hay una cabecera con los datos del
   negocio, el formulario, y tres grupos de accesos en grilla con su ícono de
   color. Lo que informa y no se toca va al final.
   ========================================================================== */
.aj-tapa {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 16px 18px; border-radius: var(--r);
  border: 1px solid var(--borde);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--acento) 10%, var(--panel)) 0%, var(--panel) 62%);
}
.aj-logo {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.aj-logo img { width: 100%; height: 100%; object-fit: contain; }
.aj-logo.inicial {
  background: linear-gradient(155deg, var(--acento) 0%,
              color-mix(in srgb, var(--acento) 55%, #000) 100%);
  color: #fff; font-size: 23px; font-weight: 700; letter-spacing: -.5px;
}
.aj-tapa-txt { flex: 1; min-width: 0; }
.aj-tapa-txt h2 {
  margin: 0; font-size: 21px; font-weight: 680; letter-spacing: -.4px;
  font-family: var(--tipo-marca, var(--tipo));
  font-style: var(--marca-estilo, normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aj-tapa-txt .sub { margin-top: 3px; font-size: 12.5px; color: var(--texto2); }
.aj-tapa-num { flex: 0 0 auto; text-align: right; }
.aj-tapa-num b {
  display: block; font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.aj-tapa-num i {
  font-style: normal; font-size: 11px; color: var(--texto3);
}
@media (max-width: 560px) {
  .aj-tapa { flex-wrap: wrap; }
  .aj-tapa-num { flex: 1 1 100%; text-align: left; }
}

/* --------------------------------------------------------- los títulos --- */
.aj-sec {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 2px 9px;
}
.aj-sec h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--texto3);
}
.aj-sec .caption2 { margin-top: 2px; }
.aj-sec .acc { font-size: 13px; color: var(--acento); cursor: pointer; }

/* ------------------------------------------------------- el formulario --- */
.aj-form .campo { margin-bottom: 10px; }
.aj-form .caption2 { margin-top: -2px; }
/*  El botón aparece recién cuando hay algo para guardar: uno fijo abajo de un
    formulario que no se tocó invita a apretarlo por las dudas, y después no
    se sabe si cambió algo o no.                                           */
.aj-guardar {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--borde);
  animation: aj-sube .18s ease;
}
.aj-guardar[hidden] { display: none; }
.aj-guardar .caption2 { flex: 1; margin: 0; }
@keyframes aj-sube { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------- los accesos --- */
.aj-grilla { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 680px) { .aj-grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aj-grilla { grid-template-columns: repeat(3, 1fr); } }
.aj-op {
  --t: var(--acento);
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 66px; padding: 12px 14px; cursor: pointer; text-align: left;
  border-radius: var(--r); color: inherit; font-family: inherit;
  border: 1px solid var(--borde); background: var(--panel);
  transition: border-color .14s ease, transform .14s ease;
}
.aj-op:hover { border-color: var(--t); transform: translateY(-2px); }
.aj-op .ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: color-mix(in srgb, var(--t) 16%, transparent);
}
.aj-op .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aj-op .tx b { font-size: 14.5px; font-weight: 620; }
.aj-op .tx i {
  font-style: normal; font-size: 12px; color: var(--texto2); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aj-op .fl { color: var(--texto3); font-size: 18px; }
.aj-op.t-azul    { --t: var(--azul); }
.aj-op.t-verde   { --t: var(--verde); }
.aj-op.t-rojo    { --t: var(--rojo); }
.aj-op.t-violeta { --t: var(--violeta); }
.aj-op.t-ambar   { --t: var(--naranja); }
.aj-op.t-gris    { --t: var(--texto2); }

/* ---------------------------------------------------------- los números -- */
.aj-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aj-num {
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--borde); background: var(--panel);
}
.aj-num b {
  display: block; font-size: 24px; font-weight: 700; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
.aj-num i {
  font-style: normal; font-size: 11.5px; color: var(--texto2);
}

/* ------------------------------------------ la muestra de la letra ------- */
.ap-letra {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
  padding: 14px 16px; border-radius: 13px;
  background: var(--campo); border: 1px solid var(--borde);
}
.ap-letra b { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.ap-letra span { font-size: 13px; color: var(--texto2); }

/*  El nombre del negocio arriba a la izquierda, con la letra que se eligio. */
.costado .marca b {
  font-family: var(--tipo-marca, var(--tipo));
  font-style: var(--marca-estilo, normal);
}

/*  Las fotos sin recuadro blanco, si se pidio asi en el diseno. Vale para la
    vitrina entera -tarjetas, lista y la ficha del producto-, no solo para la
    hoja: un PNG sin fondo salia limpio en el catalogo y metido en un cuadrado
    blanco apenas se tocaba el producto.                                    */
.vit.fotos-transp .vit-card .foto,
.vit.fotos-transp .vit-ren .mini,
.vit.fotos-transp .vit-foto-grande,
.vit.fotos-transp .vit-miniaturas .mini { background: transparent; }

/* =============================================================================
   LA BARRA DEL COSTADO
   --------------------------------------------------------------------------
   Era una lista de texto gris con un emoji adelante: todos los accesos del
   mismo peso, sin nada que dijera cual esta abierto salvo un fondo celeste
   palido. Al lado del resto del sistema -que ya tiene fichas de color,
   franjas y numeros pintados- quedaba como de otro programa.

   Ahora cada acceso tiene su barrita de luz a la izquierda y el icono adentro
   de un cuadradito. El del que esta abierto se estira solo y se enciende: la
   vista va a parar ahi sin buscarlo.
   ========================================================================== */
@media (min-width: 900px) {
  .costado {
    padding: 16px 10px;
    /*  Un respiro de color arriba, donde está la marca, que se apaga enseguida.
        Sobre el mismo fondo del cuerpo alcanza para que el costado no sea un
        rectángulo plano, sin volver a partir la pantalla en dos.          */
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--acento) 9%, var(--fondo)) 0%,
        var(--fondo) 240px);
  }

  /* --------------------------------------------------------- la marca --- */
  /*  El logo arriba y el nombre abajo, los dos centrados. Al costado del
      nombre el logo no podía pasar de cuarenta píxeles sin empujar el texto
      fuera de la barra; puesto encima tiene los 236 px enteros para crecer,
      que es lo que hace que se vea el logo y no un sellito.              */
  .costado .marca {
    position: relative; flex-direction: column; align-items: center;
    text-align: center; gap: 10px; padding: 10px 8px 18px; margin-bottom: 10px;
  }
  /*  Una linea de luz abajo de la marca, que se apaga hacia la derecha. Es
      lo que separa el titulo de los accesos sin poner un borde duro.     */
  .costado .marca::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--acento) 55%, transparent) 0%,
      var(--borde) 45%, transparent 100%);
  }
  .costado .marca-logo {
    width: 76px; height: 76px; flex: 0 0 76px; border-radius: 22px;
    position: relative;
  }
  /*  Cuando hay un logo de verdad la caja se ensancha y se achata. Casi todos
      los logos son apaisados: metidos en un cuadrado quedan chiquitos con
      aire arriba y abajo. Así usan el ancho de la barra, que es lo que
      sobra. El cuadradito con la inicial -cuando no hay logo cargado- se
      queda cuadrado, que es como se tiene que ver una inicial.          */
  .costado .marca-logo:has(img) {
    width: 100%; max-width: 150px; height: 88px; flex: none;
    border-radius: 16px;
  }
  .costado .marca-logo:has(img)::after { border-radius: 24px; }
  /*  El halo de atras del logo. Da la sensacion de que el logo esta
      encendido, que es lo que pedia el resto del sistema.               */
  .costado .marca-logo::after {
    content: ''; position: absolute; inset: -9px; border-radius: 30px;
    background: radial-gradient(closest-side,
      color-mix(in srgb, var(--acento) 34%, transparent), transparent 78%);
    z-index: -1; pointer-events: none;
  }
  .costado .marca-logo.inicial {
    background: linear-gradient(150deg, var(--acento) 0%,
                color-mix(in srgb, var(--acento) 45%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: 34px;
  }
  /*  El texto ocupa el ancho entero de la barra, que es lo que se gana al
      bajarlo: antes tenía que entrar en lo que sobraba al lado del logo.  */
  .costado .marca-txt { width: 100%; }
  .costado .marca b {
    font-size: 18px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
    font-family: var(--tipo-marca, var(--tipo));
    font-style: var(--marca-estilo, normal);
    background: linear-gradient(95deg, var(--texto) 0%,
                color-mix(in srgb, var(--acento) 70%, var(--texto)) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--texto);
  }
  .costado .marca .caption2 {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto3);
  }

  /* ------------------------------------------------------- los accesos -- */
  .costado a {
    position: relative; gap: 10px; padding: 8px 10px 8px 14px;
    border-radius: 11px; font-weight: 560;
    transition: color .14s ease, background .14s ease;
  }
  /*  La barrita de luz. Vive en todos y mide cero: la del abierto se estira.
      Puesta solo en el abierto, aparecer y desaparecer no se puede animar. */
  .costado a .luz {
    position: absolute; left: 2px; top: 50%; width: 3px; height: 0;
    transform: translateY(-50%); border-radius: 2px;
    background: var(--acento); opacity: 0;
    transition: height .2s cubic-bezier(.3, 1.2, .5, 1), opacity .2s ease;
  }
  .costado a .ic {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    background: color-mix(in srgb, var(--texto) 6%, transparent);
    transition: background .14s ease, transform .14s ease;
  }
  .costado a .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; }
  .costado a:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
  .costado a:hover .ic { transform: scale(1.06); }
  .costado a:hover .luz { height: 12px; opacity: .45; }

  .costado a.on {
    color: var(--texto);
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--acento) 17%, transparent) 0%,
      color-mix(in srgb, var(--acento) 4%, transparent) 100%);
  }
  .costado a.on .luz { height: 20px; opacity: 1; }
  .costado a.on .ic {
    background: color-mix(in srgb, var(--acento) 26%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent);
  }
  .costado a.salir:hover { color: var(--rojo); }
  .costado a.salir:hover .luz { background: var(--rojo); }

  .costado .pie { padding-top: 12px; border-top: 1px solid var(--borde); }
}

/*  Con el movimiento apagado, todo salta y listo. */
@media (prefers-reduced-motion: reduce) {
  .costado a, .costado a .luz, .costado a .ic { transition: none; }
}

/* ------------------------------------------------- las claves del catalogo */
.cat-clave {
  border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px;
  background: var(--fondo2); margin-bottom: 9px;
  display: flex; flex-direction: column; gap: 8px;
}
.cat-clave .cab { display: flex; align-items: center; gap: 9px; }
.cat-clave .cab .ic { font-size: 15px; }
.cat-clave .cab .nm { flex: 1; min-width: 0; font-size: 14px;
                      overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; }
.cat-clave .mv {
  width: 26px; height: 26px; padding: 0; min-height: 0; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
  cursor: pointer; font-size: 12px; line-height: 1;
}
.cat-clave .mv.bo:hover { color: var(--rojo); border-color: var(--rojo); }
.cat-clave .campo { margin: 0; }

/* =============================================================================
   EL VISOR DE LA FOTO
   --------------------------------------------------------------------------
   La foto a pantalla completa, con lo que el administrador haya dejado
   puesto. El fondo casi negro no es capricho: una foto de producto sobre
   gris claro se ve apagada y con dos centimetros de pantalla alrededor no
   se juzga ningun color.
   ========================================================================== */
.visor {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8, 8, 10, .94);
  display: flex; align-items: center; justify-content: center;
  animation: aparecer .16s ease;
  padding: 58px 16px 72px;
}
.visor-tit {
  position: absolute; top: 0; left: 0; right: 0; padding: 16px 20px;
  color: rgba(255, 255, 255, .92); font-size: 14.5px; font-weight: 600;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
.visor-marco {
  max-width: 100%; max-height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.visor-marco.agrandada { overflow: auto; cursor: grab; }
.visor-marco img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transition: transform .18s ease; transform-origin: center;
}
.visor-fl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; min-height: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1); color: #fff;
  backdrop-filter: blur(6px);
}
.visor-fl:hover { background: rgba(255, 255, 255, .2); }
.visor-fl.izq { left: 14px; }
.visor-fl.der { right: 14px; }
.visor-fl[hidden] { display: none; }
.visor-barra {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: 999px;
  background: rgba(24, 24, 28, .88); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
}
.visor-n { color: rgba(255,255,255,.7); font-size: 12.5px; padding: 0 6px;
          font-variant-numeric: tabular-nums; }
.visor-n:empty { display: none; }
.visor-bt {
  width: 34px; height: 34px; padding: 0; min-height: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none;
  border: 0; background: rgba(255, 255, 255, .1); color: #fff;
}
.visor-bt:hover { background: rgba(255, 255, 255, .22); }
.visor-bt.cerrar { background: rgba(255, 69, 58, .24); }
.visor-bt.cerrar:hover { background: rgba(255, 69, 58, .4); }

/* =============================================================================
   LOS BOTONES, SIN ESTIRARSE DE LADO A LADO
   --------------------------------------------------------------------------
   «.btn.ancho» es «ocupa todo el ancho», y eso esta pensado para el telefono:
   ahi un boton de punta a punta es comodo y es lo normal. En una computadora
   el mismo boton mide mil cuatrocientos pixeles y queda una barra de color
   cruzando la pantalla, que es justo lo que arruina el resto.

   Adentro de una tarjeta, de una hoja o del panel del catalogo se deja como
   estaba: ahi el contenedor YA es angosto y el boton llenandolo se ve bien.
   ========================================================================== */
@media (min-width: 900px) {
  .btn.ancho { max-width: 300px; }
  /*  Donde el contenedor ya es angosto, sigue llenandolo. */
  .card .btn.ancho,
  .hoja .btn.ancho,
  .cat-panel .btn.ancho,
  .cat-bloque .btn.ancho,
  .aj-form .btn.ancho,
  .entrada .btn.ancho { max-width: none; }
}

/* ------------------------------------------------------- y con relieve --- */
/*  Planos, todos del mismo color liso, no se distinguian del fondo de una
    tarjeta. Con un degradado corto, una linea de luz arriba y una sombra del
    color del propio boton, quedan como algo que se toca.                  */
.btn {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--azul) 92%, #fff) 0%, var(--azul) 58%);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--azul) 34%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--azul) 40%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .26);
}
.btn:active { transform: translateY(0); opacity: .88; }
.btn:disabled { box-shadow: none; transform: none; filter: none; }

.btn.gris {
  background: var(--campo);
  box-shadow: inset 0 0 0 1px var(--borde);
}
.btn.gris:hover {
  background: var(--campo-hi);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, var(--borde));
}
.btn.verde {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--verde) 92%, #fff) 0%, var(--verde) 58%);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--verde) 34%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn.rojo {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--rojo) 92%, #fff) 0%, var(--rojo) 58%);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rojo) 34%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.hueco {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--azul);
}
.btn.hueco:hover {
  background: color-mix(in srgb, var(--azul) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--azul);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}

/*  La ficha «destacada» de las otras pantallas, igual que las del panel.

    Era un rectangulo azul macizo con el numero en blanco. Al panel ya se le
    saco -cada numero con el color de lo que mide- y quedaban estas nueve
    sueltas, con el mismo problema: el azul no significa nada, es solo «esta
    es la importante», y al lado de las demas parece de otro sistema.      */
.tile.destacada {
  --t: var(--azul);
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--t) 11%, var(--panel)) 0%, var(--panel) 68%);
  border-color: var(--borde);
}
.tile.destacada .et { color: var(--texto3); }
.tile.destacada .vl { color: var(--t); }
.tile.destacada .pie, .tile.destacada .equiv { color: var(--texto2); }
:root[data-tema="claro"] .tile.destacada {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--t) 7%, var(--panel)) 0%, var(--panel) 68%);
}

/* =============================================================================
   EL AVISO DE ARRIBA Y LA BARRA EN EL EDITOR
   ========================================================================== */
/*  Lo que se quiere decir ANTES de los productos: «esta semana 20 % en
    accesorios», «minimo de compra $50.000», «los precios no incluyen IVA».  */
.cat-intro { margin: 0 0 14px; }
.cat-intro .l { min-height: 1em; }
.cat-intro .l:empty { min-height: .6em; }
.cat-intro.encajada {
  padding: 11px 14px; border-radius: var(--rad, 3mm);
  border: 1px solid; border-color: inherit;
}
/*  Con barrita a la izquierda se lee como un aviso y no como un parrafo mas
    del catalogo, que es justo lo que se quiere.                           */
.cat-intro.con-barra {
  border-left: 3px solid var(--intro-luz, currentColor);
  padding-left: 13px;
}
.cat-intro.encajada.con-barra { border-left-width: 3px; }

/*  La maqueta de la barra, arriba de la hoja en el editor. Sin esto, poner
    los botones «en la barra» -que es como vienen- no se veia por ningun lado
    acá adentro: uno cargaba el WhatsApp, no pasaba nada, y no habia forma de
    saber si estaba puesto o si no andaba.                                 */
.cat-prev-barra {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid; border-bottom: 0;
  border-radius: 10px 10px 0 0; margin-bottom: -1px;
  font-size: 13px; overflow: hidden;
}
.cat-prev-marca { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cat-prev-marca img { width: auto; object-fit: contain; display: block; }
.cat-prev-marca b { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.cat-prev-busca {
  flex: 1; min-width: 60px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid; font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cat-prev-et {
  position: absolute; right: 8px; top: 3px;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .42; pointer-events: none;
}
.cat-prev-barra .cat-redes { margin: 0; }

/* =============================================================================
   EL RENGLON DE LOS RUBROS, CHICO
   --------------------------------------------------------------------------
   El desplegable salia de punta a punta de la pantalla para decir «Todos los
   rubros»: una barra gris enorme arriba del catalogo, que es lo primero que
   se ve. Mide lo que necesita y nada mas, y al lado -a la izquierda- va el
   buscador, que es la otra cosa que uno toca mientras atiende.
   ========================================================================== */
.vit-rubro-lista { padding: 0; flex: 0 0 auto; }
.vit-rubro-lista select {
  min-height: 36px; padding: 0 30px 0 12px; font-size: 13px;
  border-radius: 999px; width: auto; min-width: 150px;
}
.vit .vit-rubros, .vit .vit-filtros { align-items: center; }
.vit-filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
}
.vit-filtros:empty { display: none; }
.vit-filtros > .vit-rubros { padding: 0; border: 0; background: none; }

/*  El buscador en ese mismo renglon, a la izquierda y ocupando lo que sobre. */
.vit.busca-rubros .vit-filtros > .vit-grupo-busca { order: -1; flex: 1 1 220px; }
.vit.busca-rubros .vit-buscar-caja { padding: 0 12px; }
.vit.busca-rubros .vit-buscar { padding: 8px 0; font-size: 14px; }
.vit.busca-rubros .vit-hoja { padding-bottom: 0; }

/*  Y los botones de contacto en la barra, con su lugar propio. El «order» y
    los margenes los pone el codigo segun lo elegido.                      */
.vit-barra { flex-wrap: wrap; }
.vit-botones .cat-redes-tira { flex-wrap: nowrap; }

/* =============================================================================
   LOS ICONOS DIBUJADOS
   --------------------------------------------------------------------------
   Los emojis salen distintos en cada computadora -en algunas, un cuadrado
   vacio-, traen sus propios colores y no hay forma de que acompanen el que
   eligio cada uno. Estos se pintan con «currentColor», asi que toman el color
   del texto que tienen al lado sin decirles nada.
   ========================================================================== */
.ico { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; }
.costado a .ic .ico { width: 17px; height: 17px; }
.tabs button .ic .ico { width: 21px; height: 21px; margin: 0 auto; }
.fila .av .ico { width: 19px; height: 19px; }
.aj-op .ic .ico { width: 19px; height: 19px; }
/*  En la seccion abierta el trazo se engrosa un poco: es lo que hace que se
    lea como «encendida» y no solo como «pintada».                         */
.costado a.on .ic .ico { stroke-width: 2.1; }

/* =============================================================================
   LOS PERMISOS DE UN USUARIO
   --------------------------------------------------------------------------
   Antes era una fila de fichas que SOLO SUMABA: se podian dar pantallas de
   mas, nunca sacar una que el rol traia. Ahora arranca con lo del rol marcado
   y se toca en las dos direcciones, asi que tiene que verse CUAL esta dada y
   cual no de un vistazo.
   ========================================================================== */
.perm-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 560px) {
  .perm-grilla { grid-template-columns: repeat(3, 1fr); }
}
.perm-chip {
  display: flex; align-items: center; gap: 7px; min-height: 0;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left;
  font-size: 12.5px; font-weight: 550; font-family: inherit;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
  transition: border-color .12s, color .12s;
}
.perm-chip .tic {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  border: 1.5px solid var(--borde); background: transparent;
}
.perm-chip.on {
  color: var(--texto);
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
}
.perm-chip.on .tic {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

.perm-lista { display: flex; flex-direction: column; gap: 2px; }
.perm-acc {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 2px; border-bottom: 1px solid var(--borde);
}
.perm-acc:last-child { border-bottom: 0; }
.perm-acc input { width: auto; min-height: 0; margin-top: 3px; flex: 0 0 auto; }
.perm-acc b { font-size: 13.5px; font-weight: 600; display: block; }
.perm-acc i { font-style: normal; display: block; margin-top: 1px; }

/* =============================================================================
   LA CONSOLA DE CARGA RAPIDA
   --------------------------------------------------------------------------
   Parece una consola porque asi se escribe rapido -una pregunta, Enter, la
   siguiente- pero esta dibujada con lo del sistema: los mismos colores, la
   misma letra, el mismo acento. Una terminal verde sobre negro adentro de
   este sistema seria un parche, no una herramienta.
   ========================================================================== */
.cons {
  position: fixed; inset: 0; z-index: 320;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--fondo) 92%, #000);
  animation: aparecer .16s ease;
  padding-top: var(--seguro-arriba); padding-bottom: var(--seguro-abajo);
}
.cons-barra {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 12px 18px; border-bottom: 1px solid var(--borde);
  background: var(--panel);
}
.cons-barra b { font-size: 14.5px; font-weight: 650; }
/*  El puntito que late: dice «esto esta esperando que escribas», que es
    justo lo que una consola tiene que decir.                             */
.cons-punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
  animation: cons-late 1.8s ease-in-out infinite;
}
@keyframes cons-late { 50% { opacity: .35; } }
.cons-cuenta { margin-left: auto; font-size: 12px; color: var(--texto2); }
.cons-x {
  width: 30px; height: 30px; padding: 0; min-height: 0; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
  cursor: pointer; font-size: 13px;
}
.cons-x:hover { color: var(--rojo); border-color: var(--rojo); }

.cons-salida {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 18px 8px;
  font-size: 13.5px; line-height: 1.6;
  max-width: 860px; width: 100%; margin: 0 auto;
}
.cons-l { margin-bottom: 2px; white-space: pre-wrap; }
.cons-l.ayuda { color: var(--texto3); font-size: 12.5px; }
.cons-l.ok { color: var(--verde); }
.cons-l.mal { color: var(--rojo); }
.cons-l.eco { color: var(--texto); font-weight: 600; }
.cons-l.eco .p { color: var(--acento); margin-right: 8px; }
.cons-l.preg { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.cons-l.preg .num {
  font-size: 11px; color: var(--texto3); font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.cons-l.preg .q { font-size: 15px; font-weight: 650; }
.cons-l.preg .opt {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto3); border: 1px solid var(--borde);
  border-radius: 999px; padding: 1px 7px;
}
.cons-corte {
  height: 1px; background: var(--borde); margin: 14px 0 4px; opacity: .7;
}

/*  Las opciones con numero. Se pueden tocar tambien: en el telefono no hay
    teclado numerico a mano y obligar a escribir seria peor.              */
.cons-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.cons-op {
  display: inline-flex; align-items: center; gap: 7px; min-height: 0;
  padding: 5px 11px 5px 6px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto2);
}
.cons-op:hover { border-color: var(--acento); color: var(--texto); }
.cons-op b {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 19px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--acento); color: #fff;
}

.cons-linea {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--borde);
  background: var(--panel);
  max-width: 860px; width: 100%; margin: 0 auto;
}
.cons-prompt { color: var(--acento); font-size: 18px; font-weight: 700; }
.cons-entrada {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  min-height: 0; padding: 6px 0; font-size: 16px; color: var(--texto);
  font-family: inherit;
}

/* --------------------------------------- el aviso de lo que quedo a medias */
.iv-faltan {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 13px; margin-bottom: 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--naranja, #FF9F0A) 42%, transparent);
  background: color-mix(in srgb, var(--naranja, #FF9F0A) 9%, transparent);
  font-size: 12.5px;
}
.iv-faltan[hidden] { display: none; }
.iv-faltan .ic { color: var(--naranja, #FF9F0A); }
.iv-faltan .tx { color: var(--texto2); margin-right: 2px; }
.iv-falta {
  display: inline-flex; align-items: center; gap: 5px; min-height: 0;
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-family: inherit; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto2); cursor: default;
}
.iv-falta b { color: var(--texto); font-variant-numeric: tabular-nums; }
.iv-falta.tocable { cursor: pointer; }
.iv-falta.tocable:hover { border-color: var(--naranja, #FF9F0A); color: var(--texto); }

/* =============================================================================
   PROVEEDORES
   --------------------------------------------------------------------------
   Lo que un negocio necesita saber de un proveedor no es su telefono -eso lo
   tiene en el celular- sino CUANTO LE DEBE y desde cuando. Por eso la ficha
   arranca con el saldo y los dos botones que uno va a tocar.
   ========================================================================== */
.prov-ficha {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 60px;
  max-width: 900px; width: 100%; margin: 0 auto;
}
.prov-tapa {
  --t: var(--verde);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 16px 18px; border-radius: var(--r); margin-bottom: 14px;
  border: 1px solid var(--borde);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--t) 12%, var(--panel)) 0%, var(--panel) 60%);
}
.prov-tapa.debe { --t: var(--rojo); }
.prov-tapa .lado { flex: 1; min-width: 180px; }
.prov-tapa .et {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--texto3);
}
.prov-tapa .nm {
  font-size: 30px; font-weight: 700; letter-spacing: -.8px; margin-top: 2px;
  font-variant-numeric: tabular-nums; color: var(--t);
}
.prov-tapa .eq { font-size: 12.5px; color: var(--texto2); margin-top: 2px; }
.prov-tapa .botonera { flex: 0 0 auto; }

/*  Los datos, tocables: el telefono abre el WhatsApp, la direccion el mapa.
    Un telefono escrito que hay que copiar a mano no sirve de nada.       */
.prov-datos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.prov-dato {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--borde); background: var(--panel);
  color: var(--texto2); text-decoration: none;
}
a.prov-dato:hover { border-color: var(--acento); color: var(--texto); }

/* ------------------------------------------------------------ remitos --- */
.prov-remitos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.prov-remito {
  position: relative; padding: 0; min-height: 0; overflow: hidden;
  border-radius: 12px; cursor: pointer; aspect-ratio: 1 / 1;
  border: 1px solid var(--borde); background: var(--campo);
  display: flex; align-items: center; justify-content: center;
}
.prov-remito:hover { border-color: var(--acento); }
.prov-remito img { width: 100%; height: 100%; object-fit: cover; }
.prov-remito .txt {
  padding: 10px; font-size: 11px; line-height: 1.4; color: var(--texto2);
  text-align: left; overflow: hidden; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
}
.prov-remito .pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px;
  font-size: 10.5px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.prov-texto {
  white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; margin: 0;
  font-family: ui-monospace, Consolas, monospace;
  background: var(--campo); border-radius: 10px; padding: 12px;
  max-height: 46vh; overflow: auto;
}

/* =============================================================================
   REGISTRAR UNA COMPRA
   --------------------------------------------------------------------------
   Era una hoja que subia desde abajo y ocupaba el alto entero: los renglones,
   el comprobante y los totales en una sola columna larguisima que habia que
   recorrer de arriba abajo para entender cuanto sumaba. En una computadora
   eso no tiene sentido, hay ancho de sobra.

   Dos columnas: a la izquierda los renglones, que es donde esta el trabajo;
   a la derecha el comprobante, los totales y que hacer con la mercaderia. Los
   dos lados a la vez, asi que cargar un renglon y mirar como cambia el total
   es una sola mirada.
   ========================================================================== */
.cmp-telon {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
  padding: 20px; animation: aparecer .16s ease;
}
.cmp {
  width: 100%; max-width: 1060px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r-grande); overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  animation: subir .22s cubic-bezier(.32, .72, 0, 1);
}
.cmp-barra {
  display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto;
  padding: 14px 18px; border-bottom: 1px solid var(--borde);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--acento) 9%, var(--panel)) 0%, var(--panel) 60%);
}
.cmp-barra b { font-size: 16px; font-weight: 680; }
.cmp-barra .caption2 { flex: 1; }
.cmp-barra .icb { align-self: center; }

.cmp-cuerpo {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 900px) {
  .cmp-cuerpo { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
  .cmp-izq { border-right: 1px solid var(--borde); }
}
.cmp-izq, .cmp-der { min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }
.cmp-der { background: var(--fondo2, var(--campo)); }

.cmp-tit {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 10px;
}
.cmp-tit:not(:first-child) { margin-top: 18px; }
.cmp-tit h3 {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto3); flex: 0 0 auto;
}
.cmp-tit .caption2 { margin-left: auto; }

/* ------------------------------------------------------- los renglones -- */
/*  Una tabla de verdad: producto, cantidad, costo y subtotal alineados en
    columna. Dos numeros uno abajo del otro no se comparan; en columna, si. */
.cmp-cab, .cmp-fila {
  display: grid; grid-template-columns: 1fr 74px 96px 104px 30px;
  gap: 8px; align-items: center;
}
.cmp-cab {
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--texto3); padding: 0 2px 6px;
}
.cmp-cab span:nth-child(n+2) { text-align: right; }
.cmp-fila {
  padding: 5px 2px; border-top: 1px solid var(--borde);
}
.cmp-nom { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.cmp-n {
  min-height: 34px; padding: 0 9px; text-align: right; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.cmp-sub {
  text-align: right; font-size: 13.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.cmp-x {
  width: 26px; height: 26px; padding: 0; min-height: 0; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--campo); color: var(--texto3);
  cursor: pointer; font-size: 11px; line-height: 1;
}
.cmp-x:hover { color: var(--rojo); border-color: var(--rojo); }

.cmp-vacio { text-align: center; padding: 40px 20px; color: var(--texto2); }
.cmp-vacio .ic { font-size: 30px; opacity: .5; }
.cmp-vacio b { display: block; margin-top: 8px; font-size: 14px; color: var(--texto); }
.cmp-vacio i { display: block; margin-top: 4px; font-style: normal;
               font-size: 12.5px; max-width: 320px; margin-inline: auto; }

/* ---------------------------------------------------------- el proveedor */
.cmp-prov {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 0;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 12px;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
  border: 1px solid var(--borde); background: var(--panel);
}
.cmp-prov:hover { border-color: var(--acento); }
.cmp-prov .ic { font-size: 17px; }
.cmp-prov .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-prov .tx b { font-size: 14px; font-weight: 620; }
.cmp-prov .tx i { font-style: normal; font-size: 11.5px; color: var(--texto3); }
.cmp-prov .fl { color: var(--texto3); font-size: 17px; }

/* ------------------------------------------------------------ totales --- */
.cmp-totales {
  border: 1px solid var(--borde); border-radius: 12px; overflow: hidden;
  background: var(--panel); margin-bottom: 12px;
}
.cmp-totales .l {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 7px 12px; font-size: 12.5px; color: var(--texto2);
  border-top: 1px solid var(--borde);
}
.cmp-totales .l:first-child { border-top: 0; }
.cmp-totales .l b { font-variant-numeric: tabular-nums; color: var(--texto); }
.cmp-totales .l.verde b { color: var(--verde); }
.cmp-totales .l.debe b { color: var(--naranja); }
.cmp-totales .l.total {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  color: var(--texto); font-weight: 600;
}
.cmp-totales .l.total b { font-size: 16px; font-weight: 700; }

.cmp-chk {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.cmp-chk:last-of-type { border-bottom: 0; }
.cmp-chk input { margin-top: 3px; flex: 0 0 auto; }
.cmp-chk b { font-size: 13.5px; font-weight: 600; display: block; }
.cmp-chk i { font-style: normal; font-size: 12px; color: var(--texto2);
             display: block; margin-top: 1px; }

/* ------------------------------------------------------- remito pegado -- */
.cmp-remito {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--verde) 42%, transparent);
  background: color-mix(in srgb, var(--verde) 9%, transparent);
}
.cmp-remito[hidden] { display: none; }
.cmp-remito img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.cmp-remito span { flex: 1; min-width: 0; }
.cmp-remito b { display: block; font-size: 13px; }
.cmp-remito i { display: block; font-style: normal; font-size: 11.5px;
                color: var(--texto2); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }

.cmp-pie {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 12px 18px; border-top: 1px solid var(--borde);
  background: var(--panel);
}
.cmp-pie .caption2 { flex: 1; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 899px) {
  .cmp-telon { padding: 0; }
  .cmp { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .cmp-pie .caption2 { display: none; }
}


/* ========================================================================== */
/*  COPIAS DE SEGURIDAD                                                        */
/* ========================================================================== */
.rsp { display: flex; flex-direction: column; }

.rsp-tapa {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acento) 10%, var(--panel)), var(--panel) 62%);
}
.rsp-tapa-num { text-align: center; min-width: 58px; }
.rsp-tapa-num b {
  display: block; font-size: 26px; line-height: 1.05;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.rsp-tapa-num i {
  display: block; font-style: normal; font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto3);
}
.rsp-tapa-txt { flex: 1; min-width: 0; }
.rsp-tapa-txt .body { font-weight: 600; }
.rsp-tapa .btn { flex: 0 0 auto; }

.rsp-lista { display: flex; flex-direction: column; gap: 6px; }

.rsp-it {
  display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "cuando peso acc" "que que acc";
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); position: relative; overflow: hidden;
}
/*  Una tirita de color a la izquierda en vez de un cartel: dice de dónde
    salió la copia sin robarle lugar al dato que importa, que es la fecha.  */
.rsp-it::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--texto3);
}
.rsp-it.m-auto::before { background: var(--acento); }
.rsp-it.m-previa::before { background: var(--naranja); }

.rsp-cuando { grid-area: cuando; display: flex; align-items: baseline; gap: 8px;
              flex-wrap: wrap; min-width: 0; }
.rsp-cuando b { font-size: 15px;
                font-variant-numeric: tabular-nums; }
.rsp-cuando i {
  font-style: normal; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto3);
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 7%, transparent);
}
.rsp-que { grid-area: que; min-width: 0; }
.rsp-peso {
  grid-area: peso; font-size: 12px; color: var(--texto3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rsp-acc { grid-area: acc; display: flex; gap: 2px; }
.rsp-acc .icb { width: 30px; height: 30px; font-size: 14px; }
.rsp-acc .icb.peligro:hover { color: var(--rojo); }

.rsp-cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 2px;
}
.rsp-cifras > div {
  text-align: center; padding: 10px 6px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel);
}
.rsp-cifras b { display: block; font-size: 19px;
                font-variant-numeric: tabular-nums; }
.rsp-cifras i { display: block; font-style: normal; font-size: 10px;
                text-transform: uppercase; letter-spacing: .05em;
                color: var(--texto3); }

@media (max-width: 560px) {
  .rsp-tapa { flex-wrap: wrap; }
  .rsp-tapa .btn { width: 100%; }
  .rsp-it { grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "cuando peso" "que que" "acc acc"; }
  .rsp-acc { justify-content: flex-end; margin-top: 4px; }
}


/* ----------------------------------------------- programar las copias --- */
.rsp-plan {
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); padding: 12px 14px; margin-bottom: 10px;
}
.rsp-plan-tit {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.rsp-plan-tit b { font-size: 14px; }
.rsp-plan-tit i {
  font-style: normal; font-size: 11.5px; color: var(--texto3);
}

.rsp-modos { display: flex; flex-direction: column; gap: 2px; }
.rsp-modo {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--texto); cursor: pointer;
  text-align: left; font: inherit;
}
.rsp-modo:hover:not(:disabled) { background: var(--campo); }
.rsp-modo:disabled { cursor: default; opacity: .65; }
.rsp-modo.on { background: color-mix(in srgb, var(--acento) 12%, transparent); }

/*  Un punto y no una casilla del navegador: la casilla trae su propio tamaño
    y su propio color, y en una lista de cuatro se ve como un formulario
    viejo pegado adentro de la pantalla.                                   */
.rsp-modo .punto {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  border-radius: 50%; border: 2px solid var(--texto3);
}
.rsp-modo.on .punto {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 9px var(--acento);
}
.rsp-modo .tx { min-width: 0; }
.rsp-modo .tx b { display: block; font-size: 13.5px; font-weight: 600; }
.rsp-modo .tx i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--texto3);
  margin-top: 1px;
}

.rsp-plan-campos {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.rsp-plan-campos .campo { flex: 1 1 150px; margin: 0; }
.rsp-plan-campos .campo[hidden] { display: none; }
.rsp-plan-campos input { box-sizing: border-box; }

.rsp-plan-pie {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde);
}


/* ========================================================================== */
/*  PEDIDOS DE BAJA                                                            */
/* ========================================================================== */
.baja-aviso {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; cursor: pointer; font: inherit; color: var(--texto);
  padding: 14px 16px;
}
.baja-aviso.hay {
  border-color: color-mix(in srgb, var(--naranja) 45%, var(--borde));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--naranja) 12%, var(--panel)), var(--panel) 60%);
}
.baja-aviso .n {
  flex: 0 0 auto; font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--naranja); font-variant-numeric: tabular-nums;
}
.baja-aviso .tx { flex: 1; min-width: 0; }
.baja-aviso .tx b { display: block; font-size: 14px; }
.baja-aviso .tx i {
  display: block; font-style: normal; font-size: 12px; color: var(--texto3);
  margin-top: 2px;
}
.baja-aviso .fl { color: var(--texto3); font-size: 20px; }

.bajas { display: flex; flex-direction: column; gap: 8px; }

.baja {
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); padding: 12px 14px;
  position: relative; overflow: hidden;
}
/*  Una tirita al costado en vez de un cartel de color: dice en qué anda el
    pedido sin robarle lugar a lo que importa, que es el motivo.          */
.baja::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--texto3);
}
.baja.e-pendiente::before { background: var(--naranja); }
.baja.e-aprobada::before  { background: var(--verde); }
.baja.e-rechazada::before { background: var(--rojo); }

.baja-cab {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.baja-cab .que {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto3); padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 7%, transparent);
}
.baja-cab .cual { font-size: 15px; min-width: 0; }
.baja-cab .sello {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--texto3);
}
.baja.e-pendiente .sello { color: var(--naranja); }
.baja.e-aprobada .sello  { color: var(--verde); }
.baja.e-rechazada .sello { color: var(--rojo); }

/*  El motivo entre comillas y en bastardilla: es lo que escribió una persona,
    no un dato del sistema, y el que aprueba tiene que leerlo como tal.   */
.baja-por {
  margin: 0 0 9px; font-style: italic; line-height: 1.45;
  color: var(--texto2); font-size: 13.5px;
}
.baja-pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.baja-acc { margin-left: auto; display: flex; gap: 6px; }
.baja-resp {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--borde);
  font-size: 12px; color: var(--texto3);
}

.baja-ficha {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 4px 0 10px;
}
.baja-ficha > div {
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: 8px 10px; background: var(--campo); min-width: 0;
}
.baja-ficha i {
  display: block; font-style: normal; font-size: 10.5px; color: var(--texto3);
  text-transform: uppercase; letter-spacing: .05em;
}
.baja-ficha b {
  display: block; font-size: 13.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
}
.baja-motivo {
  border: 1px solid var(--borde); border-radius: var(--r);
  padding: 10px 12px; background: var(--campo);
}
.baja-motivo i {
  font-style: normal; font-size: 10.5px; color: var(--texto3);
  text-transform: uppercase; letter-spacing: .05em;
}
.baja-motivo p {
  margin: 4px 0 0; font-style: italic; line-height: 1.5; font-size: 14px;
}

@media (max-width: 560px) {
  .baja-ficha { grid-template-columns: 1fr; }
  .baja-acc { margin-left: 0; width: 100%; }
  .baja-acc .btn { flex: 1; }
}


/* ========================================================================== */
/*  ACCESO AL CATÁLOGO                                                         */
/* ========================================================================== */
/*  Las pantallas de configuración del catálogo son formularios, no tablas.
    En la computadora «main» se deja crecer sin tope porque el inventario y la
    caja necesitan el ancho, pero acá eso dejaba las tarjetas de lado a lado
    de un monitor y no se lee nada así.                                     */
.cat-pane { max-width: 880px; margin: 0 auto; }
/*  El diseño muestra la hoja del catálogo de verdad: ahí sí, todo el ancho. */
.cat-pane.ancho { max-width: none; }

.acc-estado {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel);
}
/*  Con clave puesta se tiñe apenas de verde. Es el estado que uno quiere, y
    se tiene que poder ver de un vistazo sin leer.                         */
.acc-estado.on {
  border-color: color-mix(in srgb, var(--verde) 40%, var(--borde));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--verde) 10%, var(--panel)), var(--panel) 62%);
}
.acc-estado .sello { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.acc-estado .tx { flex: 1; min-width: 200px; }
.acc-estado .tx b { display: block; font-size: 15px; }
.acc-estado .tx i {
  display: block; font-style: normal; font-size: 12px; color: var(--texto3);
  margin-top: 2px; line-height: 1.45;
}
.acc-botones { display: flex; gap: 7px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .acc-botones { width: 100%; }
  .acc-botones .btn { flex: 1; }
}


/*  El vacío de las claves con nombre: un renglón y un botón chico, no una
    tarjeta del ancho de la pantalla con dos botones que no hacen nada.    */
.clv-vacio {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border: 1px dashed var(--borde); border-radius: var(--r);
}
.clv-vacio p {
  margin: 0; flex: 1; min-width: 220px;
  font-size: 13px; color: var(--texto3); line-height: 1.45;
}
.clv-pie {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}
@media (max-width: 560px) {
  .clv-vacio .btn, .clv-pie .btn { flex: 1; }
}


/* ========================================================================== */
/*  FACTURACIÓN  ·  lo que se ve entre cliente y cliente                       */
/*  ------------------------------------------------------------------------  */
/*  La pantalla de venta pasa casi todo el día con el carrito vacío. Antes eso */
/*  era media pantalla en negro y una cajita que decía «sin renglones».        */
/* ========================================================================== */

/* ------------------------------------------- los que más salen (izquierda) */
.vt-rapidos { margin-bottom: 12px; }
.vt-rap-tit {
  display: flex; align-items: baseline; gap: 8px; margin: 0 2px 7px;
}
.vt-rap-tit b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
                color: var(--texto2); }
.vt-rap-tit i { font-style: normal; font-size: 11.5px; color: var(--texto3); }

.vt-rap-tira {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.vt-rap {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; min-height: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); color: var(--texto); font: inherit;
  transition: transform .1s ease, border-color .1s ease;
}
.vt-rap:hover {
  border-color: var(--acento); transform: translateY(-2px);
}
.vt-rap .n {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vt-rap .p {
  font-size: 14px; font-weight: 700; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.vt-rap .v { font-size: 10.5px; color: var(--texto3); }
/*  Sin stock se puede vender igual -a veces se vende lo que está por llegar-
    pero tiene que verse antes de tocarlo, no después.                      */
.vt-rap.sin { opacity: .62; }
.vt-rap.sin .v { color: var(--naranja); }

/* ------------------------------------------------ el día (columna derecha) */
.vt-res-cargando { display: flex; justify-content: center; padding: 30px 0; }

.vt-res-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}
.vt-res-cab span { font-size: 12px; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--texto3); }
.vt-res-cab b { font-size: 13px; }

.vt-res-grande { text-align: center; padding: 6px 0 10px; }
.vt-res-grande b {
  display: block; font-size: 30px; font-weight: 700; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.vt-res-grande i {
  display: block; font-style: normal; font-size: 11px; color: var(--texto3);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}

.vt-res-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.vt-res-duo > div {
  text-align: center; padding: 8px 6px; border-radius: var(--r-chico);
  background: var(--campo);
}
.vt-res-duo b { display: block; font-size: 15px; font-weight: 700;
                font-variant-numeric: tabular-nums; }
.vt-res-duo i { display: block; font-style: normal; font-size: 10.5px;
                color: var(--texto3); margin-top: 1px; }
.vt-res-duo .sube b { color: var(--verde); }
.vt-res-duo .baja b { color: var(--rojo); }

.vt-res-tit {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 14px 2px 6px;
}
.vt-res-tit span { font-size: 11.5px; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--texto3); }

/*  Un texto que se toca, no un botón: al lado de un título un botón de verdad
    pesa demasiado y se lleva la atención que tiene que ir a los números.  */
.vinculo {
  border: 0; background: none; padding: 0; min-height: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--acento);
}
.vinculo:hover { text-decoration: underline; }

.vt-res-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; min-height: 0; margin-bottom: 4px;
  border: 0; border-radius: var(--r-chico); background: var(--campo);
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.vt-res-fila:hover { background: var(--panel2, var(--borde)); }
.vt-res-fila .iz { flex: 1; min-width: 0; }
.vt-res-fila .iz b {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-res-fila .iz i {
  display: block; font-style: normal; font-size: 11px; color: var(--texto3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-res-fila .de {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vt-res-nada {
  padding: 14px 10px; text-align: center; font-size: 12.5px;
  color: var(--texto3);
}

@media (max-width: 560px) {
  .vt-rap-tira { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}


/* ----------------------------------------------- el nombre, al entrar ---- */
/*  Va arriba de la clave: primero quién sos y después probalo. El de la clave
    ya tenía su ojito a la derecha; este lleva el ícono a la izquierda para
    que los dos campos se vean de la misma familia sin confundirse.        */
.campo-usuario { margin-top: 20px; }
.campo-usuario input {
  padding-left: 42px; padding-right: 16px; letter-spacing: 0;
}
.campo-usuario .ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .55; pointer-events: none;
}
/*  Pegados: el par se lee como una sola cosa, que es lo que es. */
.campo-usuario + .campo-clave { margin-top: 8px; }


/* ========================================================================== */
/*  LA BARRITA DE DESPLAZAMIENTO                                               */
/*  ------------------------------------------------------------------------  */
/*  La que trae Windows es una franja gris clara con dos flechitas: no se      */
/*  parece a nada del resto del sistema y, en el costado oscuro, es lo más     */
/*  brillante de la pantalla. Se le pone uno fino, del color del texto y casi  */
/*  transparente, que se nota cuando hace falta y desaparece cuando no.        */
/* ========================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--texto) 16%, transparent) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--texto) 14%, transparent);
  border-radius: 999px;
  /*  El borde transparente lo adelgaza sin achicar la zona que se puede
      agarrar con el mouse, que si no queda de tres píxeles.              */
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--texto) 28%, transparent);
  background-clip: content-box;
}
/*  Las flechitas de las puntas no existen en ningún otro lado del sistema. */
*::-webkit-scrollbar-button { display: none; }
*::-webkit-scrollbar-corner { background: transparent; }

/*  En el costado se esconde del todo hasta que se pasa por encima: la lista
    de secciones se mira todo el día y no necesita una raya al lado.       */
.costado { scrollbar-color: transparent transparent; }
.costado:hover {
  scrollbar-color: color-mix(in srgb, var(--texto) 16%, transparent) transparent;
}
.costado::-webkit-scrollbar-thumb { background: transparent; }
.costado:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--texto) 16%, transparent);
  background-clip: content-box;
}


/* ========================================================================== */
/*  LA CONSOLA  ·  que parezca una consola                                     */
/* ========================================================================== */
/*  Letra de ancho fijo en todo: es lo que hace que una consola se lea como
    una consola y no como un formulario. Además los números quedan en columna
    cuando se repasa lo cargado.                                            */
.cons, .cons-salida, .cons-entrada, .cons-regla {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
               "Roboto Mono", monospace;
}
.cons-barra b { font-family: var(--tipo); }

.cons-campo { position: relative; flex: 1; min-width: 0; display: flex; }
input.cons-entrada {
  /*  Se apaga el cursor del navegador: abajo se dibuja uno que late rápido. */
  caret-color: transparent;
  letter-spacing: .02em;
  /*  Sin cajita. Una consola es una línea de texto sobre el fondo, no un
      campo de formulario con su recuadro y su borde encendido.          */
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 6px 0; min-height: 0;
}
input.cons-entrada:focus {
  background: none; border: 0; box-shadow: none;
}

.cons-cursor {
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 1.15em; margin-top: -0.575em;
  background: var(--acento); border-radius: 1px;
  pointer-events: none; opacity: 0;
}
/*  Late más rápido que el del navegador -que tarda casi un segundo- y con
    corte seco, sin desvanecerse: así es como late el de una terminal.    */
.cons-campo.escribiendo .cons-cursor {
  animation: cons-cursor .62s steps(1, end) infinite;
}
@keyframes cons-cursor { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/*  La copia que se usa para medir. Tiene que dibujarse con exactamente la
    misma letra que el renglón, pero sin verse ni ocupar lugar.           */
.cons-regla {
  position: absolute; visibility: hidden; white-space: pre;
  left: 0; top: 0; font-size: 16px; letter-spacing: .02em;
  pointer-events: none;
}

/*  El renglón de abajo, más de terminal: una línea de acento a la izquierda
    en vez de un borde parejo arriba.                                      */
.cons-linea { position: relative; }
.cons-linea::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 2px;
  width: 120px;
  background: linear-gradient(90deg, var(--acento), transparent);
}


/* ========================================================================== */
/*  CONFIGURAR LOS ENCABEZADOS                                                 */
/* ========================================================================== */
.mbr-previa-caja { margin: 4px 0 14px; }
.mbr-previa-tit {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto3); margin: 0 2px 6px;
}
/*  La previa se dibuja con el mismo armador que el sistema, así que hereda
    sus estilos. Lo único que cambia es el marco: un recuadro que simula el
    lugar donde va a vivir.                                              */
.mbr-previa {
  border: 1px dashed var(--borde); border-radius: var(--r);
  padding: 14px 16px; background: var(--fondo); overflow: hidden;
}
/*  El de la barra se mira adentro de los 236 px que tiene la barra de verdad:
    si se lo muestra a lo ancho de la hoja, el dueño elige un título que
    después no entra.                                                     */
.mbr-previa.m-barra > .marca {
  max-width: 212px; margin: 0 auto;
}
.mbr-nada {
  font-size: 12.5px; color: var(--texto3); text-align: center; padding: 10px 0;
}

.mbr-campos { margin-top: 4px; }
.mbr-rango { margin: 10px 0 14px; }
.mbr-rango .et {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.mbr-rango .et span {
  font-size: 12px; font-weight: 650; color: var(--texto2);
  text-transform: uppercase; letter-spacing: .4px;
}
.mbr-rango .et b { font-size: 13px; font-variant-numeric: tabular-nums; }

.mbr-pie {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde);
}

/* ---------------------------------- lo que los encabezados ahora permiten */
/*  Centrado y línea abajo son opciones, así que viven en clases y no en la
    regla base: el que no las elige no los tiene.                        */
.membrete.centrado, .marca.centrado {
  flex-direction: column; align-items: center; text-align: center;
}
.membrete.a-izquierda { flex-direction: row; align-items: center; }
.membrete.con-linea, .marca.con-linea {
  padding-bottom: 14px; border-bottom: 1px solid var(--borde);
}
/*  La caja del logo, valga donde valga. Estas reglas colgaban de «.costado»
    porque ahí vivía el único encabezado que había; ahora el mismo encabezado
    se dibuja también en la vista previa de la configuración, y ahí la imagen
    se salía de su caja -155 px de alto adentro de un recuadro de 88-.     */
.membrete-logo, .marca-logo {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; overflow: hidden;
}
.membrete-logo img, .marca-logo img {
  width: 100%; height: 100%; object-fit: contain;
}


/* ========================================================================== */
/*  EL TÍTULO DE CADA PANTALLA                                                 */
/*  ------------------------------------------------------------------------  */
/*  Se dibuja con el mismo armador que los otros dos encabezados, así que      */
/*  lleva las mismas perillas: color, letra, tamaño, mayúsculas y qué va       */
/*  abajo. Acá sólo se le da la forma del lugar donde vive.                    */
/* ========================================================================== */
.encab { display: flex; flex-direction: column; justify-content: center;
         flex: 1; min-width: 0; }
.encab.centrado { align-items: center; text-align: center; }
.encab-txt { min-width: 0; width: 100%; }
.encab-txt .n {
  font-size: 17px; font-weight: 650; letter-spacing: -.3px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.encab-txt .f {
  font-size: 11px; color: var(--texto3); margin-top: -1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*  La barra tiene alto fijo. Si el título crece mucho, en vez de desbordar
    se agranda la barra con él.                                           */
.barra:has(.encab) { height: auto; min-height: var(--barra-alta);
                     padding-top: 8px; padding-bottom: 8px; }
/*  La raya de abajo es del contenedor; con «linea» apagada se saca. */
.barra:has(.encab:not(.con-linea)) { border-bottom: 0; }

/*  Mayúsculas y espaciado: el mismo tratamiento en los tres encabezados. */
.encab.mayusculas .n, .membrete.mayusculas .n, .marca.mayusculas b {
  text-transform: uppercase; letter-spacing: .06em;
}


/*  El color va en la misma fila que su etiqueta: una fila entera para un
    cuadradito de color es desperdiciar alto en una hoja que ya es larga. */
.mbr-color-fila {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 14px;
}
.mbr-color-fila .et {
  flex: 1; font-size: 12px; font-weight: 650; color: var(--texto2);
  text-transform: uppercase; letter-spacing: .4px;
}
.mbr-color {
  width: 46px; height: 34px; min-height: 0; padding: 2px; flex: 0 0 auto;
  border: 1px solid var(--borde); border-radius: 9px; background: var(--campo);
  cursor: pointer;
}

/*  La previa del título de pantalla se mira adentro de una barra igual a la
    de verdad: suelta, no se entiende dónde va a vivir.                   */
.mbr-previa.m-encabezado {
  padding: 0; background: color-mix(in srgb, var(--fondo) 82%, var(--panel));
}
.mbr-previa.m-encabezado > .encab { padding: 10px 14px; }


/* ========================================================================== */
/*  LA CAJA  ·  herramientas y gráfico                                         */
/* ========================================================================== */
/*  Las tres herramientas, juntas y arriba. Antes eran tres filas de botones
    colgadas del final de la pantalla -una por cada archivo que las agregaba-
    y quedaban apiladas contra el borde izquierdo, abajo de todo.          */
.caja-herr {
  display: grid; gap: 8px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.caja-herr-bt {
  display: flex; align-items: center; gap: 11px; min-height: 0;
  padding: 11px 13px; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--panel); color: var(--texto);
}
.caja-herr-bt:hover { border-color: var(--acento); }
.caja-herr-bt .ic { font-size: 17px; flex: 0 0 auto; }
.caja-herr-bt .tx { min-width: 0; }
.caja-herr-bt .tx b { display: block; font-size: 13.5px; font-weight: 600; }
.caja-herr-bt .tx i {
  display: block; font-style: normal; font-size: 11px; color: var(--texto3);
}

/* ------------------------------------------------------------ el gráfico */
.gcaja-ref {
  display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
  font-size: 12px; color: var(--texto2);
}
.gcaja-ref b { color: var(--texto); font-variant-numeric: tabular-nums; }
.gcaja-ref .p {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 6px;
}
.gcaja-ref .p.entra { background: var(--verde); }
.gcaja-ref .p.sale { background: var(--rojo); }

.gcaja {
  display: flex; align-items: flex-end; gap: 6px;
  height: 160px; overflow-x: auto; padding-bottom: 2px;
}
.gcaja-col {
  flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column;
  height: 100%; gap: 5px;
}
.gcaja-barras {
  flex: 1; min-height: 0; display: flex; align-items: flex-end;
  justify-content: center; gap: 3px;
}
.gcaja-barras .b {
  width: 46%; max-width: 20px; border-radius: 4px 4px 0 0;
  transition: height .25s ease;
}
.gcaja-barras .b.entra {
  background: linear-gradient(180deg, var(--verde),
              color-mix(in srgb, var(--verde) 50%, transparent));
}
.gcaja-barras .b.sale {
  background: linear-gradient(180deg, var(--rojo),
              color-mix(in srgb, var(--rojo) 50%, transparent));
}
.gcaja-pie {
  flex: 0 0 auto; text-align: center; font-size: 10.5px; color: var(--texto3);
  white-space: nowrap;
}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
/*  El renglón de un cliente con el botón de mandar al lado. El botón va
    afuera de la fila para que tocar el nombre abra la ficha y tocar el
    botón mande, sin que uno se coma al otro.                            */
.wa-fila { display: flex; align-items: center; gap: 8px;
           padding-right: 12px; border-bottom: 1px solid var(--borde); }
.wa-fila:last-child { border-bottom: 0; }
.wa-fila .fila { flex: 1; min-width: 0; border-bottom: 0; }

/*  Un aviso adentro de una hoja: el teléfono que no se entiende, la regla
    de las 24 horas. Ámbar y no rojo: casi nunca es un error, es una
    condición que conviene saber antes de escribir.                      */
.wa-aviso {
  margin: 10px 2px; padding: 11px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
  background: rgba(255, 159, 10, .13); color: var(--naranja);
  border: 1px solid rgba(255, 159, 10, .28);
}
.wa-aviso.malo {
  background: rgba(255, 69, 58, .13); color: var(--rojo);
  border-color: rgba(255, 69, 58, .3);
}

/* ------------------------------------------------------ la conversación */
.wa-hilo {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto; padding: 6px 2px 10px;
}
.wa-glob { max-width: 82%; padding: 9px 12px; border-radius: 14px;
           font-size: 14px; line-height: 1.45; }
/*  Lo que escribe el cliente a la izquierda, lo del negocio a la derecha:
    es como se lee cualquier conversación, y no hay que pensar de quién   
    es cada renglón.                                                      */
.wa-glob.de   { align-self: flex-start; border-bottom-left-radius: 4px;
                background: var(--panel2); color: var(--texto); }
.wa-glob.mio  { align-self: flex-end; border-bottom-right-radius: 4px;
                background: color-mix(in srgb, var(--azul) 26%, var(--panel2));
                color: var(--texto); }
.wa-glob .txt { white-space: pre-wrap; word-break: break-word; }
.wa-glob .pie { margin-top: 3px; font-size: 10.5px; color: var(--texto2);
                text-align: right; }
.wa-escribir { min-height: 72px; font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------- conectar ----- */
/*  Los dos modos como dos tarjetas que se eligen, no como una lista
    desplegable: son dos maneras bien distintas de trabajar y la
    diferencia hay que poder leerla antes de elegir.                     */
.wa-modo {
  display: block; width: 100%; text-align: left; cursor: pointer;
  margin-bottom: 10px; padding: 13px 15px; border-radius: 13px;
  background: var(--panel2); border: 1.5px solid var(--borde);
  color: var(--texto); font-family: inherit;
}
.wa-modo.on { border-color: var(--azul);
              background: color-mix(in srgb, var(--azul) 12%, var(--panel2)); }
.wa-modo .tit { display: flex; align-items: center; gap: 8px;
                margin-bottom: 4px; font-size: 14.5px; }
.wa-modo .punto { color: var(--azul); font-size: 13px; }
.wa-modo .caption2 { line-height: 1.45; }

.wa-pasos { margin: 4px 0 16px; padding-left: 20px; }
.wa-pasos li { margin-bottom: 9px; font-size: 13px; line-height: 1.5;
               color: var(--texto); }
.wa-pasos code, .wa-webhook code {
  display: inline-block; margin-top: 4px; padding: 3px 7px;
  border-radius: 6px; background: var(--fondo); color: var(--azul);
  font-size: 12px; word-break: break-all;
}
.wa-webhook { margin: -6px 2px 16px; padding: 11px 13px;
              border-radius: 11px; background: var(--panel2);
              border: 1px solid var(--borde); }
.wa-webhook code { display: block; margin: 5px 0 0; }

/*  La hoja, como se va a ver en el chat. Se muestra sobre un fondo
    distinto y con sombra para que se lea como un papel y no como una
    parte mas de la pantalla: lo que se esta mirando es lo que el cliente
    va a recibir.                                                      */
.wa-hoja {
  margin: 4px 2px 0; padding: 14px; border-radius: 14px;
  background: var(--panel2); border: 1px solid var(--borde);
  display: flex; justify-content: center;
}
.wa-hoja img {
  width: 100%; max-width: 420px; height: auto; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  background: #fff;
}
.wa-hoja .cargando { padding: 40px 0; }

/* ==========================================================================
   PEGAR UNA LISTA
   ========================================================================== */
/*  Cada renglon leido. Se ve como una lista y no como una tabla a
    proposito: lo que importa de cada uno es si se entendio o no, no
    comparar columna contra columna.                                    */
.carga-tabla {
  max-height: 46vh; overflow-y: auto; margin: 2px 0 6px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel2);
}
.carga-fila {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-bottom: 1px solid var(--borde);
  cursor: pointer;
}
.carga-fila:last-child { border-bottom: 0; }
.carga-fila input[type=checkbox] { width: auto; min-height: 0; margin: 0; }
.carga-fila .tx { flex: 1; min-width: 0; }
.carga-fila .tx b { display: block; font-size: 14px; font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.carga-fila .tx i { display: block; margin-top: 2px; font-style: normal;
                    font-size: 12px; color: var(--texto2); }
/*  La duda -«¿esto es el nombre o el precio?»- va en ambar y abajo de
    todo: es lo unico que el sistema NO sabe, y esconderlo seria elegir
    por el dueño sin decirselo.                                        */
.carga-fila .tx u { display: block; margin-top: 3px; font-size: 11.5px;
                    color: var(--naranja); text-decoration: none; }
/*  El renglon que no sirve -sin nombre no hay producto- se apaga en vez
    de esconderse: el que pego la lista tiene que ver que ese renglon
    estaba y por que quedo afuera.                                     */
.carga-fila.mal { opacity: .5; }
.carga-falta {
  flex-shrink: 0; padding: 3px 8px; border-radius: 7px;
  font-size: 11px; font-weight: 600;
  background: rgba(255, 159, 10, .15); color: var(--naranja);
}
.carga-ok { flex-shrink: 0; color: var(--verde); font-size: 14px; }

/* ==========================================================================
   EL ASISTENTE
   ========================================================================== */
/*  El cabezal. La bajada va ARRIBA del casillero y no escondida al final
    de la pantalla: «lee tu propia base y no manda nada a ningun lado» es
    lo primero que uno quiere saber de algo que se llama asistente.     */
.as-tope { margin-bottom: 4px; }
.as-bajada {
  margin: 0 2px 12px; font-size: 13px; line-height: 1.5;
  color: var(--texto2); max-width: 560px;
}
.as-caja {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px; border-radius: 16px;
  background: var(--panel2); border: 1.5px solid var(--borde);
  transition: border-color .15s ease;
}
.as-caja:focus-within { border-color: var(--azul); }
.as-caja .ic { font-size: 17px; opacity: .8; }
.as-caja input {
  flex: 1; min-width: 0; margin: 0; padding: 12px 0; border: 0;
  background: none; font-size: 16px; color: var(--texto);
  min-height: 0;
}
.as-caja input:focus { outline: none; box-shadow: none; }
.as-mandar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  border: 0; cursor: pointer; background: var(--azul); color: #fff;
  font-size: 17px; font-family: inherit;
}
.as-mandar:hover { filter: brightness(1.12); }

/* ------------------------------------------------------- lo que veo hoy */
/*  Baldosas y no renglones: «5 cuotas vencidas por $ 1.600.900» no se
    tiene que leer igual que «2 tareas anotadas», y en una lista se veian
    iguales las dos.                                                    */
.as-hoy {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.as-t {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 15px; border-radius: 14px; font-family: inherit;
  background: var(--panel2); border: 1px solid var(--borde);
  color: var(--texto); position: relative; overflow: hidden;
}
/*  La barrita de color a la izquierda: se ve de reojo, sin leer nada. */
.as-t::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--azul);
}
.as-t.t-rojo::before   { background: var(--rojo); }
.as-t.t-ambar::before  { background: var(--naranja); }
.as-t.t-verde::before  { background: var(--verde); }
.as-t .ic { font-size: 19px; }
.as-t b { display: block; margin-top: 6px; font-size: 15.5px;
          font-weight: 650; }
.as-t i { display: block; margin-top: 3px; font-style: normal;
          font-size: 12.5px; color: var(--texto2); }
.as-t u { display: block; margin-top: 9px; font-size: 12px;
          text-decoration: none; color: var(--azul); font-weight: 600; }
.as-t[onclick]:hover, .as-t:hover { border-color: var(--azul); }

/* ---------------------------------------------------------- el hilo --- */
.as-hilo { display: flex; flex-direction: column; gap: 12px;
           margin: 16px 0 4px; }
.as-hilo:empty { margin: 0; }
.as-resp {
  border-radius: 16px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--borde);
  animation: aparecer .18s ease;
}
/*  Arriba, lo que se pregunto. Sin esto, con tres respuestas apiladas no
    se sabe cual contesta que.                                          */
.as-preg {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; background: var(--panel2);
  border-bottom: 1px solid var(--borde);
}
.as-preg .ic { font-size: 13px; opacity: .7; }
.as-preg .q { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.as-x { border: 0; background: none; cursor: pointer; padding: 2px 4px;
        color: var(--texto2); font-size: 13px; font-family: inherit; }
.as-x:hover { color: var(--texto); }
.as-cuerpo { padding: 16px 18px 18px; }
/*  El numero es LA respuesta. Antes salia adentro de la oracion y habia
    que buscarlo leyendo.                                               */
.as-num { font-size: 34px; font-weight: 700; letter-spacing: -.5px;
          line-height: 1.1; }
.as-sub { margin-top: 5px; font-size: 14px; color: var(--texto2);
          line-height: 1.45; }
.as-titulo { font-size: 17px; font-weight: 600; line-height: 1.4; }
.as-detalle { margin-top: 14px; }
.as-linea {
  padding: 8px 0; font-size: 13.5px; line-height: 1.45;
  border-top: 1px solid var(--borde);
}
/*  Lo vencido, marcado. En una lista de siete deudores, cuales estan
    atrasados es lo unico que uno mira.                                 */
.as-linea.vencido { color: var(--rojo); font-weight: 600; }
.as-cuerpo .cargando { padding: 18px 0; }

/* --------------------------------------------------- las sugerencias -- */
/*  Por tema. Ocho fichas sueltas en un cuadro gris no le enseñaban a
    nadie que clase de cosas sabe contestar.                            */
.as-sug { display: grid; gap: 14px;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.as-grupo { padding: 13px 14px; border-radius: 14px;
            background: var(--panel); border: 1px solid var(--borde); }
.as-grupo .tit { display: flex; align-items: center; gap: 7px;
                 margin-bottom: 9px; font-size: 12px; font-weight: 700;
                 letter-spacing: .6px; text-transform: uppercase;
                 color: var(--texto2); }
.as-grupo .chips { flex-wrap: wrap; overflow: visible; padding: 0; }
.as-grupo .chip { white-space: normal; text-align: left; }

@media (max-width: 640px) {
  .as-num { font-size: 28px; }
  .as-hoy { grid-template-columns: 1fr 1fr; }
  .as-t { padding: 12px 13px; }
  .as-t b { font-size: 14px; }
}

/* ==========================================================================
   CUANTA PLATA HAY EN LA MERCADERIA
   ========================================================================== */
/*  Los tres numeros de arriba. Van del mismo tamaño y uno al lado del otro
    porque son la misma mirada desde tres lados, no un titular y dos
    notas al pie.                                                       */
.val-tres {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.val-n {
  padding: 15px 16px; border-radius: 14px;
  background: var(--panel2); border: 1px solid var(--borde);
  position: relative; overflow: hidden;
}
.val-n::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--texto3, var(--texto2));
}
.val-n.costo::before { background: var(--azul); }
.val-n.venta::before { background: var(--texto2); }
.val-n.gana::before  { background: var(--verde); }
.val-n .et { font-size: 11px; font-weight: 700; letter-spacing: .7px;
             color: var(--texto2); }
.val-n b { display: block; margin-top: 7px; font-size: 27px;
           font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.val-n.gana b { color: var(--verde); }
.val-n i { display: block; margin-top: 4px; font-style: normal;
           font-size: 12px; color: var(--texto2); line-height: 1.4; }

/*  Lo que el numero NO dice. Va arriba y no al pie: un total parece
    exacto, y este tiene supuestos que hay que conocer ANTES de usarlo
    para decidir algo.                                                 */
.val-nota {
  margin: 12px 2px; padding: 12px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--texto2);
  background: var(--panel2); border: 1px solid var(--borde);
}
.val-nota b { color: var(--texto); font-weight: 650; }

.val-avisos { display: flex; flex-direction: column; gap: 8px;
              margin: 12px 0; }
.val-aviso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5;
  background: rgba(255, 159, 10, .12); color: var(--naranja);
  border: 1px solid rgba(255, 159, 10, .26);
}
.val-aviso.mal { background: rgba(255, 69, 58, .12); color: var(--rojo);
                 border-color: rgba(255, 69, 58, .28); }
.val-aviso .ic { flex-shrink: 0; }

/* ------------------------------------------------------- la tabla ---- */
.val-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.val-tabla th {
  padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--texto2);
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.val-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde);
                vertical-align: top; }
.val-tabla tr:last-child td { border-bottom: 0; }
.val-tabla th.n, .val-tabla td.n { text-align: right; white-space: nowrap; }
.val-tabla td b { display: block; font-weight: 600; font-size: 13.5px; }
.val-tabla td i { display: block; margin-top: 2px; font-style: normal;
                  font-size: 11.5px; color: var(--texto2); }
.val-tabla td.n { font-variant-numeric: tabular-nums; font-weight: 600; }
.val-tabla td.apagado { color: var(--texto2); font-weight: 500; }
.val-tabla td.rojo { color: var(--rojo); }
/*  La barra dice la proporcion sin tener que comparar numeros: «la mitad
    de mi plata esta en cables» se ve, no se calcula.                  */
.val-barra { display: block; margin-top: 6px; height: 4px; width: 100%;
             border-radius: 3px; background: var(--borde);
             overflow: hidden; }
.val-barra i { display: block; height: 100%; background: var(--azul);
               margin: 0; }

/*  La baldosa del inventario que ahora se toca.                       */
.iv-kpi.tocable { cursor: pointer; text-align: left; font-family: inherit;
                  width: 100%; }
.iv-kpi.tocable:hover { border-color: var(--azul); }

@media (max-width: 640px) {
  .val-n b { font-size: 23px; }
  .val-tabla th:nth-child(3), .val-tabla td:nth-child(3) { display: none; }
}

/*  Las caras, para elegir. Cada una se escribe con SU propia letra de
    titulo: elegir una por el nombre, sin verla, es adivinar.         */
.ap-caras { display: grid; gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ap-cara {
  text-align: left; cursor: pointer; padding: 12px 13px;
  border-radius: var(--r-chico); background: var(--panel2);
  border: 1.5px solid var(--borde); color: var(--texto);
  font-family: inherit;
}
.ap-cara.on { border-color: var(--azul);
              background: color-mix(in srgb, var(--azul) 12%, var(--panel2)); }
.ap-cara b { display: block; font-size: 15px; font-weight: 650; }
.ap-cara i { display: block; margin-top: 3px; font-style: normal;
             font-size: 11.5px; line-height: 1.45; color: var(--texto2); }
/*  Cada boton con la letra de la cara que ofrece.                     */
.ap-cara:nth-child(1) b { font-family: "Bahnschrift", "DIN Alternate",
   "Oswald", "Segoe UI Semibold", sans-serif; letter-spacing: -.2px; }
.ap-cara:nth-child(2) b { font-family: "Constantia", Georgia, serif; }
.ap-cara:nth-child(3) b { font-family: "Bahnschrift", "Segoe UI Semibold",
   sans-serif; letter-spacing: -.5px; }
.ap-cara:nth-child(4) b { font-family: "Nunito", "Quicksand",
   "Trebuchet MS", sans-serif; }
.ap-cara:nth-child(5) b { font-family: "Segoe UI", system-ui, sans-serif; }
/*  Y una muestra del fondo de cada una, para que se vea que no es solo
    otra letra: es otra superficie.                                    */
.ap-cara { position: relative; padding-left: 40px; }
.ap-cara::before {
  content: ''; position: absolute; left: 12px; top: 13px;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.18);
}
.ap-cara:nth-child(1)::before { background: #15151A; }
.ap-cara:nth-child(2)::before { background: #F4F1EA;
                                border-color: rgba(0,0,0,.2); }
.ap-cara:nth-child(3)::before { background: #16161F;
                                box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.ap-cara:nth-child(4)::before { background: #1C1C1E; border-radius: 9px; }
.ap-cara:nth-child(5)::before { background: #1C1C1E; }

/* ==========================================================================
   LA PIEL  ·  lo que de verdad cambia la cara
   --------------------------------------------------------------------------
   Hasta aca el «caracter» cambiaba la letra y las esquinas. Eso deja el
   mismo sistema con otra fuente. Lo que hace que un panel se parezca a
   todos los demas son las SUPERFICIES -un solo gris repetido- y la falta
   de JERARQUIA -el titulo de la pantalla en la esquina, en 17 pixeles-.

   Asi que de aca para abajo cada cara cambia eso.
   ========================================================================== */

/* ------------------------------------------------------------ TALLER ---- */
/*  El escritorio deja de ser negro plano: una luz tenue arriba, del color
    del sistema. No se ve como un degrade; se ve como que la pantalla tiene
    una fuente de luz y no es una lamina.                                 */
#app {
  background:
    radial-gradient(1100px 520px at 18% -8%,
      color-mix(in srgb, var(--acento) 9%, transparent), transparent 62%),
    var(--fondo);
}

@media (min-width: 900px) {
  /*  La barra, mas oscura que el cuerpo y con un borde duro. Antes era del
      MISMO color que el fondo para que no se viera la costura entre las dos
      superficies; el problema de aquella version era que la barra quedaba
      mas CLARA que el cuerpo -una franja pegada al borde-. Al reves funciona:
      la barra se hunde y el cuerpo queda adelante, que es el orden correcto.  */
  .costado {
    background: color-mix(in srgb, #000 42%, var(--panel));
    border-right: 1px solid color-mix(in srgb, var(--texto) 11%, transparent);
    box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
  }

  /*  EL TITULO DE LA PANTALLA. Antes era un renglon de 17 pixeles en la
      esquina, al lado del nombre del usuario: la pantalla no empezaba en
      ningun lado. Ahora es un encabezado de verdad, con una regla abajo.  */
  .barra {
    position: static; height: auto; align-items: flex-end;
    padding: 26px 30px 14px;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--borde);
  }
  .barra h1 {
    font-size: 29px; font-weight: var(--peso-titulo);
    letter-spacing: var(--track-titulo); line-height: 1.1;
  }
  .barra .sub { font-size: 12px; margin-top: 3px; letter-spacing: .3px; }
  main { padding: 22px 30px 60px; }
}

/*  LAS TARJETAS DEJAN DE SER TODAS IGUALES. Un hilo de acento arriba, que
    aparece al pasar por encima: la tarjeta se lee como una superficie
    apoyada y no como un rectangulo dibujado.                            */
.card {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--texto) 3%, transparent) 0, transparent 64px),
    var(--panel);
}
.card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--acento),
              color-mix(in srgb, var(--acento) 10%, transparent));
  opacity: 0; transition: opacity .16s ease;
}
.card:hover::after { opacity: .5; }

/*  Los rotulos de seccion, con una linea que los acompaña hasta el borde.
    Un titulo suelto arriba de una lista no separa nada; con la linea, la
    pantalla queda dividida en pedazos que se leen de a uno.             */
.seccion-tit::after {
  content: ''; flex: 1; height: 1px; margin-left: 4px;
  background: linear-gradient(90deg, var(--borde), transparent);
}
.seccion-tit .acc { margin-left: 0; }

/* ------------------------------------------------------------- PAPEL ---- */
/*  Claro y tibio, bordes finitos, sin sombras y sin degrades. Cara de
    planilla impresa, que es lo que un sistema de facturacion es.        */
:root[data-caracter="papel"] {
  --fondo:    #F4F1EA;
  --panel:    #FFFFFF;
  --panel2:   #FAF8F3;
  --campo:    #F0EDE5;
  --campo-hi: #E7E3D8;
  --borde:    rgba(60, 50, 35, .16);
  --texto:    #221E18;
  --texto2:   rgba(34, 30, 24, .62);
  --texto3:   rgba(34, 30, 24, .40);
  --acento:       #A8762B;
  --acento-hover: #C08C3C;
  --acento-suave: rgba(168, 118, 43, .14);
  --sombra: 0 2px 10px rgba(60, 50, 35, .10);
  --tipo-titulo: "Constantia", "Iowan Old Style", Georgia, serif;
  --peso-titulo: 600;
  --track-titulo: -.1px;
  --r-chico: 6px; --r: 10px; --r-grande: 14px;
  color-scheme: light;
}
:root[data-caracter="papel"] #app { background: var(--fondo); }
:root[data-caracter="papel"] .card {
  background: var(--panel); box-shadow: none;
}
:root[data-caracter="papel"] .card::after { display: none; }
@media (min-width: 900px) {
  :root[data-caracter="papel"] .costado {
    background: #EDE9E0; border-right: 1px solid var(--borde);
    box-shadow: none;
  }
}

/* ----------------------------------------------------------- VITRINA ---- */
/*  Fondo profundo y tarjetas que FLOTAN: sombra de verdad, sin borde y con
    esquinas grandes. Es la cara opuesta a «Papel» y la mas lejos de un
    panel de administracion: no hay una sola linea dibujada.             */
:root[data-caracter="vitrina"] {
  --fondo:  #0A0A0F;
  --panel:  #16161F;
  --panel2: #1E1E29;
  --campo:  #1E1E29;
  --borde:  rgba(255, 255, 255, .05);
  --r-chico: 14px; --r: 22px; --r-grande: 30px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .6);
  --peso-titulo: 700;
  --track-titulo: -.6px;
}
:root[data-caracter="vitrina"] .card {
  border: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
:root[data-caracter="vitrina"] .card::after { display: none; }
:root[data-caracter="vitrina"] .seccion-tit::after { display: none; }
@media (min-width: 900px) {
  :root[data-caracter="vitrina"] .costado {
    background: none; border-right: 0; box-shadow: none;
  }
  :root[data-caracter="vitrina"] .barra { border-bottom: 0; }
}

/* ----------------------------------------------------------- CLASICO ---- */
/*  Todo lo de arriba, deshecho. Lo que habia antes de esta vuelta.      */
:root[data-caracter="clasico"] #app { background: var(--fondo); }
:root[data-caracter="clasico"] .card {
  background: var(--panel); overflow: visible;
}
:root[data-caracter="clasico"] .card::after { display: none; }
:root[data-caracter="clasico"] .seccion-tit::after { display: none; }
@media (min-width: 900px) {
  :root[data-caracter="clasico"] .costado {
    background: var(--fondo); border-right: 1px solid var(--borde);
    box-shadow: none;
  }
  :root[data-caracter="clasico"] .barra {
    position: sticky; height: 62px; align-items: center; padding: 0 26px;
    background: color-mix(in srgb, var(--fondo) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  :root[data-caracter="clasico"] .barra h1 { font-size: 17px; }
  :root[data-caracter="clasico"] main { padding: 20px 26px 60px; }
}

/* ----------------------------------------- el titulo de cada pantalla -- */
/*  Antes era un renglon de 17 pixeles en la esquina, al lado del nombre
    del usuario: la pantalla no empezaba en ningun lado y las veinte se
    veian iguales. Ahora cada una entra con su nombre.

    El tamaño que el dueño elija en el membrete se sigue respetando: se
    aplica como «calc(1em * algo)», asi que es proporcional a esta base.  */
@media (min-width: 900px) {
  :root:not([data-caracter="clasico"]) .barra:has(.encab) {
    padding: 26px 30px 15px; min-height: 0;
  }
  :root:not([data-caracter="clasico"]) .barra .encab-txt .n {
    font-size: 30px; line-height: 1.06;
    font-family: var(--tipo-titulo);
    font-weight: var(--peso-titulo);
    letter-spacing: var(--track-titulo);
  }
  :root:not([data-caracter="clasico"]) .barra .encab-txt .f {
    font-size: 12px; margin-top: 5px; letter-spacing: .4px;
  }
}

/*  El hilo de acento de las tarjetas: se ve siempre, no solo al pasar por
    encima. Puesto solo en el hover no existe: una pantalla quieta es como
    se mira el sistema el noventa por ciento del tiempo.                 */
.card::after { opacity: .28; }
.card:hover::after { opacity: .7; }
:root[data-caracter="papel"] .card::after,
:root[data-caracter="vitrina"] .card::after,
:root[data-caracter="clasico"] .card::after { display: none; }

/* ------------------------------------------- revision de seguridad ---- */
.seg-tapa { padding: 14px 16px; border-radius: var(--r);
            background: color-mix(in srgb, var(--verde) 12%, var(--panel2));
            border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent);
            margin-bottom: 12px; }
.seg-tapa.ojo { background: color-mix(in srgb, var(--naranja) 12%, var(--panel2));
                border-color: color-mix(in srgb, var(--naranja) 32%, transparent); }
.seg-tapa b { display: block; font-size: 16px; font-weight: 650; }
.seg-tapa i { display: block; margin-top: 3px; font-style: normal;
              font-size: 12.5px; color: var(--texto2); }
.seg-p { display: flex; gap: 11px; padding: 12px 14px;
         border-bottom: 1px solid var(--borde); }
.seg-p:last-child { border-bottom: 0; }
.seg-p .ic { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
             display: flex; align-items: center; justify-content: center;
             font-size: 12px; font-weight: 700;
             background: color-mix(in srgb, var(--verde) 22%, transparent);
             color: var(--verde); }
.seg-p.mal .ic { background: color-mix(in srgb, var(--naranja) 22%, transparent);
                 color: var(--naranja); }
.seg-p .tx { min-width: 0; }
.seg-p b { display: block; font-size: 14px; font-weight: 600; }
.seg-p i { display: block; margin-top: 2px; font-style: normal;
           font-size: 12.5px; line-height: 1.45; color: var(--texto2); }
/*  El arreglo, en el renglon de abajo y en color: es lo unico que el
    dueño tiene que hacer, y tiene que poder encontrarlo sin leer todo. */
.seg-p u { display: block; margin-top: 5px; font-size: 12px;
           text-decoration: none; color: var(--naranja); font-weight: 600; }

/* =============================================================================
   CAJAS PERSONALES
   ========================================================================== */
.mc-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--azul) 0%, color-mix(in srgb, var(--azul) 55%, #000) 100%);
  color: #fff; border-radius: var(--r-grande); padding: 20px 20px 16px;
  margin-bottom: 12px; box-shadow: 0 10px 30px color-mix(in srgb, var(--azul) 28%, transparent);
}
.mc-hero::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  right: -70px; top: -90px; background: rgba(255,255,255,.08); pointer-events: none;
}
.mc-hero-arr { display: flex; align-items: center; gap: 10px; }
.mc-hero .et { font-size: 11.5px; font-weight: 700; letter-spacing: var(--track-micro);
  text-transform: uppercase; opacity: .82; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-dueno { font-size: 11.5px; background: rgba(255,255,255,.16); border-radius: var(--r-pill);
  padding: 3px 9px; white-space: nowrap; }
.mc-hero .saldo { font-family: var(--tipo-titulo); font-size: clamp(30px, 8vw, 42px);
  font-weight: 700; letter-spacing: -1px; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.mc-hero .saldo.neg { color: #FFD1CE; }
.mc-hero-sub { font-size: 12px; opacity: .75; margin-bottom: 14px; }
.mc-hero .fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  position: relative; z-index: 1; }
.mc-hero .fila3 > div { background: rgba(255,255,255,.14); border-radius: 12px;
  padding: 8px 10px; min-width: 0; }
.mc-hero .fila3 i { display: block; font-style: normal; font-size: 11px; opacity: .8; }
.mc-hero .fila3 b { display: block; font-size: 14px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-herr { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }

.mc-meses { display: flex; gap: 6px; align-items: flex-end; height: 128px; padding-top: 4px; }
.mc-mes { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.mc-mes .par { display: flex; gap: 3px; align-items: flex-end; height: 100px; }
.mc-mes .par i { display: block; width: 10px; min-height: 3px; border-radius: 5px 5px 2px 2px;
  transition: height .35s ease; }
.mc-mes span { font-size: 11px; color: var(--texto2); text-transform: capitalize; }
.mc-mes .par i.in, .mc-ley i.in { background: var(--verde); }
.mc-mes .par i.ga, .mc-ley i.ga { background: var(--rojo); }
.mc-ley { display: flex; gap: 14px; justify-content: center; margin-top: 10px;
  font-size: 11.5px; color: var(--texto2); }
.mc-ley span { display: inline-flex; align-items: center; gap: 5px; }
.mc-ley i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.mc-dia { font-size: 11px; font-weight: 700; color: var(--texto2); padding: 12px 14px 4px;
  text-transform: uppercase; letter-spacing: var(--track-micro); }
.mc-dia:first-child { padding-top: 10px; }

.mc-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mc-tipo button { appearance: none; border: 1px solid var(--borde); background: var(--campo);
  color: var(--texto); border-radius: var(--r-chico); min-height: 44px; font: inherit;
  font-weight: 650; cursor: pointer; }
.mc-tipo button.in.on { background: var(--verde); border-color: var(--verde); color: #04270F; }
.mc-tipo button.ga.on { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.mc-candado { max-width: 380px; margin: 36px auto; text-align: center; padding: 26px 22px; }
.mc-candado .ic, .mc-obligada .ic { width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 12px; display: grid; place-items: center; font-size: 28px;
  background: var(--azul-suave); }
.mc-candado h2, .mc-obligada h2 { margin: 0 0 6px; font-size: 19px; }
.mc-candado p, .mc-obligada p { margin: 0 0 16px; line-height: 1.5; }
.mc-candado .campo, .mc-obligada .campo { text-align: left; }
.mc-candado .btn { margin-top: 6px; }

.mc-obligada { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px;
  background: var(--fondo); }
.mc-obligada form { width: 100%; max-width: 420px; text-align: center; padding: 26px 22px; }
.mc-obligada .btn { margin-top: 8px; }
@media (max-width: 480px) {
  .mc-hero { padding: 18px 16px 14px; }
  .mc-hero .fila3 { gap: 6px; }
  .mc-hero .fila3 > div { padding: 7px 8px; }
  .mc-hero .fila3 b { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
}

/* =============================================================================
   EXPORTAR LOS DATOS
   ========================================================================== */
.ex-todo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 13px; color: var(--texto2); }
.ex-todo > span { flex: 1; }
.ex-fila { appearance: none; border: 0; background: transparent; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--borde); min-height: 52px; }
.ex-fila:last-child { border-bottom: 0; }
.ex-fila:hover { background: color-mix(in srgb, var(--texto) 4%, transparent); }
.ex-tilde { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--texto3); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: transparent;
  transition: background .15s, border-color .15s, color .15s; }
.ex-fila.on .ex-tilde { background: var(--azul); border-color: var(--azul); color: #fff; }
.ex-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ex-txt b { font-weight: 600; font-size: 14.5px; }
.ex-txt i { font-style: normal; font-size: 12px; color: var(--texto2); }
.ex-n { font-size: 12px; color: var(--texto2); background: var(--campo);
  border-radius: var(--r-pill); padding: 2px 9px; font-variant-numeric: tabular-nums; }
.ex-fila:not(.on) .ex-txt b { color: var(--texto2); }

/* =============================================================================
   CARGAS PENDIENTES DE APROBACIÓN
   ========================================================================== */
.perm-carga { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  margin-bottom: 8px; border: 1px solid var(--borde); border-radius: var(--r-chico);
  background: color-mix(in srgb, var(--azul) 6%, transparent); }
.perm-carga .chips { margin-top: 6px; padding-bottom: 2px; }
.carga-cambios { margin: 6px 0 2px; }
.carga-cambios .tabla-simple td { padding: 6px 8px; font-size: 13px; }
.carga-cambios s { text-decoration-thickness: 1px; }
.carga-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.carga-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--campo); }