/* Vinería — el aspecto.
 *
 * DE DÓNDE SALE ESTE DISEÑO
 * De la estética de Notion / Linear: casi todo blanco, tinta negra
 * cálida, **líneas de 1 px en vez de sombras**, y el detalle fino
 * puesto en los espaciados y la tipografía.
 *
 * SOBRE EL VINO — LEER ANTES DE "CORREGIR" ESTO
 * Acá hubo idas y vueltas. Primero un tema oscuro vinoso (parecía un
 * bar temático) y una lateral negra con acento bordó (parecía un
 * sistema de restaurante): las dos se tiraron, y con razón. Después
 * una versión sin ningún color de marca, con acento azul, que quedó
 * correcta pero fría y sin identidad.
 *
 * Lo que hay ahora es la tercera respuesta, y es a propósito: el vino
 * entra **en pastel sobre blanco**, no en oscuro. Fondos lavados muy
 * claros, un acento bordó sobrio para lo activo, y el resto blanco.
 * O sea: el color pone el clima, no grita. Si alguna vez te dan ganas
 * de volver al azul porque "no lleva color de marca", acordate de que
 * ese paso ya se dio y se volvió.
 *
 * LAS CINCO REGLAS
 *
 * 1. **Blanco.** El contenido va sobre blanco puro; la lateral y los
 *    encabezados, en un lavado con una gota de vino. No hay tarjetas
 *    flotando con sombra: hay secciones separadas por una línea.
 *
 * 2. **Un solo acento: el vino.** Para lo activo, el foco de un campo
 *    y el botón que hace la acción principal. Los pastales de apoyo
 *    (--past-*) son para teñir superficies, nunca para texto ni para
 *    que cada cosa tenga su color: un sistema donde todo resalta es un
 *    sistema donde nada resalta.
 *
 * 3. **Verde y rojo están reservados** para plata que entra y plata que
 *    sale, en versiones apagadas. Nunca de adorno.
 *
 * 4. **La plata se lee en columna**: números tabulares, a la derecha,
 *    mismo ancho de dígito, para recorrer una lista de precios sin
 *    tropezar.
 *
 * 5. **El peso lo lleva el espacio, no el borde.** Radios chicos (4-6
 *    px), líneas casi invisibles, y tipografía semibold en vez de
 *    negrita.
 */

:root {
  /* Superficies */
  --blanco: #ffffff;
  --plano: #ffffff;          /* el fondo del contenido */
  --panel: #ffffff;
  --lavado: #faf5f6;         /* lateral, encabezados: blanco con una gota de vino */
  --lavado-2: #f4eaec;       /* hover */
  --linea: #ece6e7;          /* la línea de 1 px */
  --linea-fuerte: #ddd1d3;   /* bordes de campos */

  /* Tinta: negro cálido, no azulado. */
  --tinta: #36302f;
  --tinta-2: #726b6a;
  --tinta-3: #9c9391;

  /* Lo activo. Un solo color vivo en todo el sistema: el vino. */
  --acento: #9b2c48;
  --acento-oscuro: #7d2239;
  --acento-suave: #fbeef1;

  /* El botón que hace la acción principal: vino profundo. */
  --fuerte: #7d2239;
  --fuerte-hover: #63162b;

  /* Los pastales de apoyo. Tiñen superficies (encabezados de tabla,
   * recuadros, la lateral); nunca se usan para texto. Van en la misma
   * familia cálida que el vino para que no peleen entre sí. */
  --past-vino:  #fbeef1;
  --past-rosa:  #fdf3ef;
  --past-uva:   #f4eff8;
  --past-oliva: #eff4ed;
  --past-trigo: #fcf6ea;
  --past-piedra:#f6f3f1;
  --past-cielo: #eef2f7;

  /* EL TONO DE CADA PANTALLA
   * Ocho pantallas que arrancan todas iguales se sienten la misma
   * pantalla. Cada una lleva un tono propio, apagado, y sólo en dos
   * lugares: el ícono del menú y la regla finita bajo el título. No
   * se tiñe el contenido: es para saber de reojo dónde estás, no para
   * decorar. */
  --tono-mostrador: #9b2c48;
  --tono-ventas:    #a8524e;
  --tono-caja:      #8a6300;
  --tono-plata:     #4f7a43;
  --tono-stock:     #4f7a43;
  --tono-clientes:  #6b4a8f;
  --tono-compras:   #4a6b86;
  --tono-informes:  #7d2239;
  --tono-config:    #726b6a;

  /* El fondo de la página. Que NO sea blanco es lo que le da borde a
   * cada bloque: con todo blanco sobre blanco no hay nada que recorte
   * las secciones y la pantalla se lee vacía aunque tenga datos. */
  --fondo: #f7f4f3;

  /* Plata que entra y plata que sale. Apagados a propósito. */
  --bien: #0f7b6c;
  --bien-suave: #edf7f4;
  --mal: #b3261e;
  --mal-suave: #fdf0ef;
  --aviso: #8a6300;
  --aviso-suave: #fbf5e8;

  --radio: 6px;
  --radio-chico: 4px;
  --sombra-alta: 0 12px 32px rgba(15, 15, 15, .12),
                 0 3px 6px rgba(15, 15, 15, .08);
  --lateral-ancho: 252px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--fondo); color: var(--tinta);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.oculto { display: none !important; }
.apagado { color: var(--tinta-3); }
.empuja { flex: 1; }
.error { color: var(--mal); min-height: 1.2em; margin: .4em 0; font-size: 13px; }
.chico { font-size: 12.5px; }
.derecha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------- tipografía */

h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 .5em;
     letter-spacing: -.01em; }
h3 { font-size: 12px; font-weight: 600; margin: 1.5em 0 .7em;
     color: var(--tinta-2); }
p { margin: .5em 0; }

.plata { font-variant-numeric: tabular-nums; text-align: right;
         white-space: nowrap; }
.negativo { color: var(--mal); }
.positivo { color: var(--bien); }

/* ------------------------------------------------------------- entrar */

.tapa {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--lavado); padding: 20px;
}
.caja-entrar {
  width: 100%; max-width: 352px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 10px; padding: 28px; box-shadow: var(--sombra-alta);
}
.marca-entrar { display: flex; align-items: center; gap: 10px;
                margin-bottom: 4px; }
.marca-entrar h1 { font-size: 17px; }
.logo-entrar, .logo {
  width: 26px; height: 26px; border-radius: var(--radio-chico); flex: none;
  background: var(--lavado-2); border: 1px solid var(--linea);
  position: relative;
}
.logo-entrar::after, .logo::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/14px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337352f' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M8 3h8l-1 7a3 3 0 0 1-6 0z'/%3E%3Cpath d='M12 13v6'/%3E%3Cpath d='M9 21h6'/%3E%3C/svg%3E");
}
.caja-entrar .campo { margin-top: 14px; }
.caja-entrar button { width: 100%; margin-top: 16px; }
input.pin { font-size: 24px; letter-spacing: .45em; text-align: center;
            padding-left: .45em; }

/* ------------------------------------------------------------- armazón */

#app { min-height: 100vh; }

#lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral-ancho);
  background: var(--lavado); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; z-index: 30;
}

.marca {
  display: flex; align-items: center; gap: 11px; padding: 15px 13px;
  margin: 8px 8px 2px; border-radius: var(--radio); cursor: default;
  border-bottom: 0;
}
.marca:hover { background: var(--lavado-2); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.25;
               min-width: 0; }
.marca-texto strong { font-size: 15.5px; font-weight: 600; color: var(--tinta);
                      overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; }
.marca-texto .chico { color: var(--tinta-3); font-size: 12px; }

/* El logo va sobre un pastel de vino: es la única mancha de color
 * permanente de toda la pantalla. */
.marca .icono { width: 30px; height: 30px; padding: 6px; border-radius: 8px;
                background: var(--past-vino); color: var(--acento); }

.icono { display: inline-flex; align-items: center; justify-content: center;
         width: 17px; height: 17px; flex: none; color: var(--tinta-3); }
.icono svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- menú */

/* El menú ocupa alto a propósito: con renglones de 6 px apilados arriba
 * la lateral quedaba vacía de la mitad para abajo y el ojo no encontraba
 * dónde agarrarse. Alto de renglón cómodo y separación visible. */
#menu { padding: 10px 8px; display: flex; flex-direction: column; gap: 3px;
        overflow-y: auto; flex: 1; }
#menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: 0; color: var(--tinta-2);
  padding: 10px 12px; border-radius: var(--radio); cursor: pointer;
  font-size: 14.5px; font-weight: 500; text-align: left;
  transition: background .1s, color .1s;
}
/* Cada ítem lleva el tono de su pantalla en el ícono. Apagado y chico:
 * alcanza para distinguir de reojo sin que la lateral sea un arcoíris. */
#menu .icono { width: 19px; height: 19px; color: var(--tono, var(--tinta-3)); }
#menu button:hover { background: var(--lavado-2); color: var(--tinta); }
#menu button.activo { background: var(--past, var(--acento-suave));
                      color: var(--tinta); font-weight: 600; }
#menu button.activo .icono { color: var(--tono, var(--acento)); }

/* --------------------------------------------- el estado, en la lateral
 *
 * Entre el último ítem del menú y el pie quedaban ~290 px de nada, y la
 * lateral se leía como una lista flotando arriba. Acá va lo que hay que
 * saber sin entrar a ninguna pantalla: si la caja está abierta y qué
 * está esperando algo. Cada cosa es un botón: el número lleva al lugar
 * donde se resuelve. */

#lateral-estado { padding: 10px 10px 4px; display: flex;
                  flex-direction: column; gap: 6px; }
/* Un grupo de carteles sueltos: llevan rótulo pero no bloque, porque
 * cada cartel ya trae su propio marco. */
.avisos-sueltos { margin-bottom: 14px; }
.avisos-sueltos .rotulo-grupo { padding: 0 0 2px 1px; }

.rotulo-grupo, #lateral-estado .rotulo-grupo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3); padding: 2px 3px 2px;
}
.ficha-estado {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--panel); padding: 9px 10px; cursor: pointer;
  font-size: 12.5px; color: var(--tinta-2); line-height: 1.3;
}
.ficha-estado:hover { background: var(--lavado-2); }
.ficha-estado .cuenta {
  flex: none; min-width: 23px; height: 23px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; padding: 0 5px;
  background: var(--past, var(--past-vino)); color: var(--tono, var(--acento));
}
.ficha-estado strong { display: block; color: var(--tinta); font-weight: 600;
                       font-size: 13px; }
.ficha-caja .cuenta { font-variant-numeric: tabular-nums; }
.ficha-caja.cerrada .cuenta { background: var(--mal-suave); color: var(--mal); }
.ficha-caja.abierta .cuenta { background: var(--bien-suave); color: var(--bien); }

#lateral-pie { padding: 14px 14px 16px; border-top: 1px solid var(--linea);
               font-size: 12.5px; }
#pie-usuario { margin-bottom: 9px; line-height: 1.35; }
#pie-usuario strong { display: block; font-weight: 600; font-size: 13.5px; }
#pie-usuario span { color: var(--tinta-3); text-transform: capitalize; }
#sombra-lateral { display: none; }

/* -------------------------------------------------------------- cuerpo */

#cuerpo { margin-left: var(--lateral-ancho); min-height: 100vh;
          display: flex; flex-direction: column; }

#barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px; height: 48px;
  background: rgba(247,244,243,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
#barra-titulo { font-size: 14px; font-weight: 600; color: var(--tinta-2);
                margin: 0; }
#barra-acciones { display: flex; gap: 6px; align-items: center; }

main { padding: 22px 24px 32px; max-width: 1480px; width: 100%; }

/* ------------------------------------------------- la cabeza de la página
 *
 * POR QUÉ EXISTE
 * Antes el título de la pantalla vivía como un textito de 15 px dentro
 * de la barra de 48 px, y el cuerpo arrancaba directamente con el
 * contenido. La página no empezaba en ningún lado: aparecía. Y las
 * ocho pantallas arrancaban idénticas, así que ninguna tenía cara
 * propia. Ahora cada una empieza con su nombre grande, una línea que
 * dice de qué va, y la regla fina con el tono del área. */

.cabeza { margin-bottom: 20px; }
.cabeza .regla { width: 34px; height: 3px; border-radius: 2px;
                 background: var(--tono, var(--acento)); margin-bottom: 11px; }
.cabeza h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em;
             margin: 0; line-height: 1.2; color: var(--tinta); }
.cabeza .bajada { color: var(--tinta-2); font-size: 13.5px; margin-top: 5px;
                  max-width: 70ch; }
/* El contexto lo pone la pantalla: qué período, qué filtro. Va al lado
 * de la bajada porque es parte de "qué estás mirando". */
.cabeza .contexto { margin-top: 9px; display: flex; gap: 7px;
                    flex-wrap: wrap; align-items: center; }

@media (max-width: 760px) {
  .cabeza h1 { font-size: 22px; }
  main { padding: 16px 14px 26px; }
}

/* ---------------------------------------------------------- secciones
 *
 * ESTO CAMBIÓ, Y A PROPÓSITO
 * Antes eran secciones separadas por una línea, sobre blanco. Con
 * mucho contenido funcionaba; con poco, la pantalla se leía vacía
 * porque no había nada que recortara una sección de la otra. Ahora
 * cada sección es un bloque blanco sobre el fondo tibio: la línea de
 * 1 px sigue siendo la que separa, pero ahora cierra el bloque en vez
 * de cruzarlo. Sigue sin haber sombras. */

.tarjeta { background: var(--panel); border: 1px solid var(--linea);
           border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.tarjeta:last-child { margin-bottom: 0; }
.tarjeta.encerrado { background: var(--past-rosa); }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }

.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila.pegada { gap: 5px; }
.columnas { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .columnas.dos { grid-template-columns: 1fr 1fr; }
  .columnas.tres { grid-template-columns: repeat(3, 1fr); }
  .columnas.mostrador { grid-template-columns: minmax(0,1fr) 360px;
                        align-items: start; gap: 28px; }
}

/* ------------------------------------------------- fichas de números */

.numeros { display: grid; gap: 1px; background: var(--linea);
           /* el pastel se ve en la junta de 1 px entre ficha y ficha */
           border: 1px solid var(--linea); border-radius: var(--radio);
           grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
           overflow: hidden; margin-bottom: 20px; }
.numero { background: var(--past-rosa); padding: 14px 15px; }
.numero .rotulo { font-size: 12px; color: var(--tinta-2); font-weight: 500; }
.numero .valor { font-size: 22px; font-weight: 600; letter-spacing: -.02em;
                 margin-top: 2px; line-height: 1.2; }
.numero .valor.negativo { color: var(--mal); }
.numero .valor.positivo { color: var(--bien); }
.numero .pie { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }

/* -------------------------------------------------------------- campos */

input, select, textarea, button { font: inherit; color: var(--tinta); }
input, select, textarea {
  background: var(--blanco); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); padding: 7px 9px;
  transition: border-color .1s, box-shadow .1s;
}
input::placeholder, textarea::placeholder { color: #b6adac; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input[type=number], input[inputmode=decimal] { text-align: right; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--acento);
                       vertical-align: -2px; }
label.campo { display: block; font-size: 12px; color: var(--tinta-2);
              font-weight: 500; }
label.campo input, label.campo select, label.campo textarea {
  width: 100%; margin-top: 4px;
}
.grilla-campos { display: grid; gap: 12px;
                 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ------------------------------------------------------------ botones */

button {
  background: var(--blanco); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); padding: 6px 11px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--tinta);
  transition: background .1s, border-color .1s, color .1s;
}
button:hover:not(:disabled) { background: var(--lavado); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.principal {
  background: var(--fuerte); border-color: var(--fuerte); color: #fff;
}
button.principal:hover:not(:disabled) { background: var(--fuerte-hover);
                                        border-color: var(--fuerte-hover); }
/* Deshabilitado, el principal se va a gris, no a vino lavado: un bordó
 * al 45% de opacidad da un rosa chicle que parece un estado propio
 * ("atención") y no un botón apagado. */
button.principal:disabled {
  background: var(--lavado-2); border-color: var(--linea-fuerte);
  color: var(--tinta-3); opacity: 1;
}

button.plano { background: transparent; border-color: transparent;
               color: var(--tinta-2); }
button.plano:hover:not(:disabled) { background: var(--lavado-2);
                                    color: var(--tinta); }
button.peligro { color: var(--mal); border-color: var(--linea-fuerte); }
button.peligro:hover:not(:disabled) { background: var(--mal-suave);
                                      border-color: #e7bcb9; }
button.grande { padding: 10px 16px; font-size: 14.5px; }
button.chico { padding: 4px 8px; font-size: 12.5px; }

/* Pestañas */
.pestanias { display: flex; gap: 2px; border-bottom: 1px solid var(--linea);
             margin-bottom: 20px; overflow-x: auto; }
.pestanias button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--tinta-2); padding: 8px 10px 10px;
  white-space: nowrap; margin-bottom: -1px;
}
.pestanias button:hover { background: transparent; color: var(--tinta); }
.pestanias button.activa { color: var(--acento-oscuro); font-weight: 600;
                           border-bottom-color: var(--acento); }

/* Segmentado: elegir una opción entre pocas. */
.segmentado { display: inline-flex; background: var(--lavado);
              border: 1px solid var(--linea); border-radius: var(--radio-chico);
              padding: 2px; gap: 2px; }
.segmentado button {
  border: 0; background: transparent; border-radius: 3px; padding: 4px 11px;
  color: var(--tinta-2); font-size: 13px;
}
.segmentado button:hover:not(.activa) { background: var(--lavado-2); }
.segmentado button.activa { background: var(--blanco); color: var(--acento-oscuro);
                            font-weight: 600;
                            box-shadow: 0 1px 2px rgba(60,15,25,.10); }

/* ---------------------------------------------------------- pastillas */

.pastilla {
  font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--linea); color: var(--tinta-2);
  background: var(--lavado); display: inline-flex; align-items: center;
  gap: 6px; cursor: default;
}
.pastilla.si { color: var(--bien); border-color: #cfe8e2;
               background: var(--bien-suave); }
.pastilla.no { color: var(--mal); border-color: #f0d2d0;
               background: var(--mal-suave); }
#barra-caja { cursor: pointer; }
#barra-caja:hover { background: var(--lavado-2); }

/* ------------------------------------------------------------- tablas */

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  font-size: 12px; color: var(--tinta-2); font-weight: 600; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--linea);
  background: var(--past-vino); position: sticky; top: 0;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--linea);
     vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tr.clickeable { cursor: pointer; }
tr.clickeable:hover td { background: var(--lavado); }
tr.anulada td { color: var(--tinta-3); }
tr.anulada td:nth-child(2) { text-decoration: line-through; }
td.plata, th.derecha { text-align: right; }

@media (max-width: 760px) {
  table.apilable thead { display: none; }
  table.apilable tr {
    display: block; border: 1px solid var(--linea); border-radius: var(--radio);
    margin-bottom: 8px; padding: 8px 12px;
  }
  table.apilable td {
    display: flex; justify-content: space-between; gap: 12px;
    border: 0; padding: 3px 0; font-size: 13.5px;
  }
  table.apilable td::before {
    content: attr(data-rotulo); color: var(--tinta-3); font-size: 12px;
  }
  table.apilable td.plata { text-align: right; }
}

/* -------------------------------------------------------- el mostrador */

#escaner {
  width: 100%; font-size: 15px; padding: 10px 12px 10px 34px;
  background: var(--blanco) no-repeat 11px center/15px 15px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

.atajos { display: flex; gap: 14px; margin-top: 9px; font-size: 12px;
          color: var(--tinta-3); flex-wrap: wrap; }
.atajos kbd {
  font: 500 11px/1 ui-monospace, SFMono-Regular, monospace;
  background: var(--lavado); border: 1px solid var(--linea);
  border-radius: 3px; padding: 2px 5px; color: var(--tinta-2);
  margin-right: 5px;
}

.renglones td { padding: 7px 10px; }
.renglones .cantidad {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  overflow: hidden; background: var(--blanco);
}
.renglones .cantidad input {
  width: 42px; text-align: center; border: 0; border-radius: 0;
  padding: 5px 2px;
}
.renglones .cantidad input:focus { box-shadow: none; }
.renglones .cantidad button {
  border: 0; border-radius: 0; padding: 5px 8px; background: transparent;
  color: var(--tinta-3); font-size: 14px; line-height: 1;
}
.renglones .cantidad button:hover { background: var(--lavado-2);
                                    color: var(--tinta); }
.renglones .quitar { color: var(--tinta-3); padding: 3px 6px;
                     border-color: transparent; background: transparent; }
.renglones .quitar:hover { color: var(--mal); background: var(--mal-suave); }
.renglones .promo { font-size: 11.5px; color: var(--acento); }

/* El panel de cobro sí va encerrado: es lo único que tiene que
 * destacarse de la página, y queda a la vista mientras se carga. */
.columna-cobro .tarjeta {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px; margin-bottom: 14px;
}
@media (min-width: 1000px) {
  .columna-cobro { position: sticky; top: 68px; }
}

.resumen-renglon { display: flex; justify-content: space-between; gap: 10px;
                   font-size: 13px; padding: 2px 0; }
.resumen-renglon span:first-child { color: var(--tinta-2); }
.linea-total { border-top: 1px solid var(--linea); margin: 10px 0 8px; }

.total-grande {
  font-size: 34px; font-weight: 600; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0 4px;
}
@media (max-width: 520px) { .total-grande { font-size: 28px; } }

.medios { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.medios button { padding: 8px 10px; text-align: left; line-height: 1.25;
                 display: flex; flex-direction: column; gap: 1px; }
.medios button.elegido {
  background: var(--acento-suave); border-color: #edc3ce; color: var(--acento-oscuro);
  font-weight: 600;
}
.medios button .pct { font-size: 11px; font-weight: 400; color: var(--tinta-3); }
.medios button.elegido .pct { color: #b15570; }

.sugerencias {
  border: 1px solid var(--linea); border-radius: var(--radio);
  max-height: 340px; overflow: auto; background: var(--blanco);
  box-shadow: var(--sombra-alta); margin-top: 4px;
}
.sugerencias > div { padding: 9px 12px; cursor: pointer;
                     border-bottom: 1px solid var(--linea); }
.sugerencias > div:last-child { border-bottom: 0; }
.sugerencias > div:hover, .sugerencias > div.marcado { background: var(--lavado); }

.vacio { text-align: center; padding: 44px 20px; color: var(--tinta-3);
         font-size: 13.5px; }

/* ------------------------------------------------- los atajos del mostrador
 *
 * El hueco de la venta vacía, ocupado por lo que más se vende. Fichas
 * grandes: se tocan con el dedo en una pantalla táctil y se ven de
 * lejos, que es como se usa un mostrador. */

.vacio-mostrador { padding: 6px 2px 16px; color: var(--tinta-3);
                   font-size: 13px; }
.vacio-mostrador strong { display: block; color: var(--tinta);
                          font-weight: 600; font-size: 15px;
                          margin-bottom: 3px; }
.rotulo-atajos {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
  padding-top: 14px; margin-bottom: 9px;
  border-top: 1px solid var(--linea);
}
/* El vuelto: el número que se canta en voz alta. */
.vuelto-grande {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--past-trigo); border: 1px solid #eadfc4;
}
.vuelto-grande .rotulo { font-size: 11.5px; font-weight: 600;
                         letter-spacing: .05em; text-transform: uppercase;
                         color: #6b4e08; }
.vuelto-grande .valor { font-size: 34px; font-weight: 700; line-height: 1.1;
                        letter-spacing: -.02em; color: #5a4106;
                        font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ------------------------------------------------ dónde está la plata */

.cuentas-grilla { display: grid; gap: 12px; margin-top: 4px;
                  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cuenta-ficha {
  border: 1px solid var(--linea); border-radius: 8px; padding: 15px 16px;
  background: var(--past-oliva);
}
.cuenta-icono { font-size: 17px; line-height: 1; }
.cuenta-saldo { font-size: 25px; font-weight: 600; letter-spacing: -.02em;
                margin-top: 7px; font-variant-numeric: tabular-nums; }
.cuenta-saldo.negativo { color: var(--mal); }

.atajos-grilla { display: grid; gap: 8px;
                 grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
.atajo-prod {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-align: left; padding: 11px 12px; min-height: 76px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--past-vino); cursor: pointer; line-height: 1.3;
}
.atajo-prod:hover { background: var(--panel); border-color: var(--acento);
                    color: var(--tinta); }
.atajo-prod strong { font-weight: 600; font-size: 13.5px; color: var(--tinta); }
.atajo-prod .plata { margin-top: auto; font-weight: 600;
                     color: var(--acento-oscuro); }
.vacio strong { display: block; color: var(--tinta); font-weight: 600;
                margin-bottom: 4px; font-size: 14.5px; }

/* --------------------------------------------------- avisos y carteles */

#avisos { position: fixed; right: 18px; bottom: 18px; z-index: 80;
          display: flex; flex-direction: column; gap: 8px; max-width: 370px; }
.aviso {
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-3); border-radius: var(--radio);
  padding: 10px 12px; box-shadow: var(--sombra-alta); font-size: 13.5px;
  animation: entra .14s ease-out;
}
.aviso.mal { border-left-color: var(--mal); }
.aviso.bien { border-left-color: var(--bien); }
@keyframes entra { from { transform: translateY(6px); opacity: 0; } }

.cartel {
  border: 1px solid var(--linea); border-left: 3px solid var(--aviso);
  background: var(--aviso-suave); border-radius: var(--radio-chico);
  padding: 9px 12px; margin: 10px 0; font-size: 13px; color: #6b4e08;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cartel.mal { border-left-color: var(--mal); background: var(--mal-suave);
              color: #8d241d; }
.cartel.bien { border-left-color: var(--bien); background: var(--bien-suave);
               color: #0c5f54; }
.cartel button { margin-left: auto; }

/* --------------------------------------------------------------- modal */

#modal {
  position: fixed; inset: 0; z-index: 70; background: rgba(15,15,15,.35);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
#modal-caja {
  background: var(--blanco); border-radius: 8px; padding: 22px;
  width: 100%; max-width: 540px; max-height: 88vh; overflow: auto;
  box-shadow: var(--sombra-alta);
}
#modal-caja.ancho { max-width: 960px; }
#modal-caja > h2 { font-size: 16px; margin-bottom: 14px; }

/* ------------------------------------------------------------ gráficos */

.grafico { width: 100%; display: block; }
.grafico .eje { font-size: 10.5px; fill: var(--tinta-3);
                font-variant-numeric: tabular-nums; }
.grafico .reja { stroke: var(--linea); stroke-width: 1; }
.grafico .base { stroke: var(--linea-fuerte); stroke-width: 1; }
.grafico .barra { fill: var(--acento); }
.grafico g.punto:hover .barra { fill: var(--acento-oscuro); }
.grafico .zona-hover { fill: transparent; }
.grafico .linea { fill: none; stroke: var(--acento); stroke-width: 2;
                  stroke-linejoin: round; stroke-linecap: round; }
.grafico .relleno { fill: var(--acento); opacity: .10; }
.grafico .punto-dato { fill: var(--acento); stroke: var(--blanco);
                       stroke-width: 2; }

.caja-grafico { position: relative; margin: 4px 0 14px; }
.globo {
  position: absolute; pointer-events: none; z-index: 60;
  background: var(--tinta); color: #fff; border-radius: 5px;
  padding: 6px 9px; font-size: 12.5px; line-height: 1.35;
  box-shadow: var(--sombra-alta); transform: translate(-50%, -115%);
  white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.globo.visible { opacity: 1; }
.globo .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.globo .rotulo { color: #bab2b1; }

.barra-dato { height: 5px; background: var(--lavado-2); border-radius: 3px;
              overflow: hidden; min-width: 56px; }
.barra-dato > span { display: block; height: 100%; background: var(--acento);
                     border-radius: 3px; }

/* ----------------------------------------------------------- celulares */

.solo-chico { display: none; }

@media (max-width: 900px) {
  .solo-chico { display: inline-flex; }
  #lateral { transform: translateX(-100%); transition: transform .16s ease-out;
             box-shadow: var(--sombra-alta); }
  body.menu-abierto #lateral { transform: none; }
  body.menu-abierto #sombra-lateral {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(15,15,15,.3);
  }
  #cuerpo { margin-left: 0; }
  main { padding: 16px; }
  #barra { padding: 0 12px; }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ------------------------------------------------------------ imprimir */

@media print {
  #lateral, #barra, #avisos, #modal, #sombra-lateral { display: none !important; }
  #cuerpo { margin-left: 0; }
  main { padding: 0; }
  .tarjeta { break-inside: avoid; }
}