/* Mobile-first. Tokens en :root; sin estilos inline (CSP).
   Tema "Azul corporativo": fondo azulado claro, encabezado azul marino, acento azul. */
/* Manrope (variable, pesos 400-800), subconjunto latin, v20 de Google Fonts.
   Origen: github.com/googlefonts/manrope. Licencia SIL OFL 1.1: static/fonts/OFL.txt */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #f2f5fa;
  --superficie: #ffffff;
  --marino: #12264a;
  --texto: #101c33;
  --texto-suave: #4a5875;
  --acento: #2f5bea;
  --acento-oscuro: #1d3fae;
  --acento-suave: #e8eefc;
  /* Botones principales: verde con vetas claras tipo mármol (solo degradados, sin imagen). */
  --verde-marmol:
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .13) 30%, transparent 38%, transparent 55%, rgba(255, 255, 255, .09) 63%, transparent 70%),
    linear-gradient(62deg, transparent 40%, rgba(0, 0, 0, .12) 48%, transparent 56%),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .20), transparent 48%),
    radial-gradient(circle at 88% 95%, rgba(0, 0, 0, .22), transparent 55%),
    #1f6b2c;
  --verde-marmol-oscuro:
    linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .10) 30%, transparent 38%, transparent 55%, rgba(255, 255, 255, .07) 63%, transparent 70%),
    linear-gradient(62deg, transparent 40%, rgba(0, 0, 0, .14) 48%, transparent 56%),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .12), transparent 48%),
    radial-gradient(circle at 88% 95%, rgba(0, 0, 0, .25), transparent 55%),
    #165220;
  --borde: #dce3ef;
  --borde-boton: #cbd5e8;
  --borde-campo: #7c8db0;
  --gris-suave: #e3e8f1;
  --exito: #047857;
  --exito-fondo: #e1f3ea;
  --alerta: #b45309;
  --alerta-fondo: #fef6e8;
  --error: #be123c;
  --error-fondo: #fde8ec;
  --radio: 20px;
  --sombra: 0 4px 14px rgba(18, 38, 74, .10);
  --nav-bajo: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
body.con-nav { padding-bottom: calc(var(--nav-bajo) + env(safe-area-inset-bottom)); }

h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }

a { color: var(--acento); }

/* Iconos (sprite en static/iconos.svg) */
.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Barra superior */
.topbar {
  background: var(--marino);
  color: #fff;
  padding: .6rem 1rem;
}
.topbar-fila { display: flex; align-items: center; gap: .6rem; }
.marca { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.salir {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  font-size: .9rem; font-weight: 700; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px;
}
.salir:hover { background: rgba(255, 255, 255, .22); }
.salir:focus-visible, .nav a:focus-visible { outline-color: #fff; }
.topbar .badge { background: #2b4272; color: #fff; }
/* Celular angosto: nombre, rol y "Cerrar sesión" en una sola línea y barra baja. */
@media (max-width: 480px) {
  .topbar { padding: .45rem .75rem; }
  .topbar-fila { gap: .45rem; }
  .topbar .marca { font-size: .95rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .badge { font-size: .75rem; padding: .2rem .6rem; white-space: nowrap; }
  .salir { white-space: nowrap; min-height: 40px; padding: 0 .75rem; font-size: .82rem; border-radius: 10px; }
}
@media (max-width: 379px) {
  .topbar .badge { display: none; }
}

/* Navegación: barra inferior en celular, lateral en pantalla ancha */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex;
  height: calc(var(--nav-bajo) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}
.nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .75rem; text-decoration: none; color: var(--texto-suave);
  border-top: 3px solid transparent; margin-top: -1px;
}
.nav a:hover { background: var(--fondo); }
.nav a.activo { color: var(--acento); font-weight: 800; border-top-color: var(--acento); }
/* En celular la barra solo muestra 5 enlaces: los demás viven en /menu
   ("Más"). En pantalla ancha se ve todo, como antes. */
.nav a.solo-ancho { display: none; }
/* El nombre del negocio dentro del menú solo se ve en pantalla ancha. */
.nav-marca, .nav-grupo { display: none; }

.contenido { max-width: 960px; margin: 0 auto; padding: 1rem; }

@media (min-width: 900px) {
  :root { --alto-topbar: 4rem; }
  body.con-nav { padding-bottom: 0; padding-left: 220px; }
  .nav {
    top: 0; right: auto; bottom: 0; width: 220px; height: auto;
    flex-direction: column; justify-content: flex-start; gap: .25rem;
    padding: 0 .75rem 1rem; border-top: 0; border-right: 1px solid var(--borde);
    /* Si el menú no cabe en la altura de la pantalla, se baja con scroll. */
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav a { flex: none; flex-direction: row; border-top: 0; margin-top: 0; justify-content: flex-start; gap: .7rem; padding: .65rem .8rem; font-size: .95rem; border-radius: 8px; }
  .nav a.activo { background: var(--acento-suave); }
  .nav a.solo-ancho { display: flex; }
  .nav a.solo-celular { display: none; }
  .topbar { position: relative; z-index: 11; height: var(--alto-topbar); box-sizing: border-box; display: flex; align-items: center; }
  .topbar-fila { flex: 1; }
  /* En pantalla ancha el nombre va arriba del menú lateral; la barra superior
     deja el rol a la izquierda y "Cerrar sesión" a la derecha. */
  .topbar .marca { display: none; }
  .topbar .badge { font-size: .85rem; padding: .3rem .9rem; }
  /* Títulos de categoría del menú lateral */
  .nav-grupo {
    display: block; margin: .7rem .35rem .05rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #8fa3c8;
  }
  /* Misma altura que la barra superior para que ambas queden alineadas. */
  .nav-marca {
    display: flex; align-items: center; position: sticky; top: 0; z-index: 1;
    height: var(--alto-topbar); box-sizing: border-box;
    margin: 0 -.75rem .5rem; padding: 0 .75rem;
    background: var(--marino);
  }
  /* Recuadro sutil: translúcido, borde fino y sin sombra. */
  .nav-marca-caja {
    flex: 1; display: flex; align-items: center; box-sizing: border-box;
    height: 2.5rem; padding: 0 .9rem; border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
@media (min-width: 900px) {
  .nav { background: var(--marino); border-right: 0; gap: .2rem; }
  .nav a {
    color: #c5d2ea; font-weight: 600;
    background: transparent; border: 0; border-left: 3px solid transparent; border-radius: 8px;
  }
  .nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  /* Opcion activa: fondo hundido con borde azul a la izquierda */
  .nav a.activo {
    color: #fff; font-weight: 800;
    background: rgba(255, 255, 255, .12); border-left-color: #3b82f6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
  }
}

/* Pantallas bajas (laptops): botones del menú más compactos para que quepan más. */
@media (min-width: 900px) and (max-height: 820px) {
  .nav { gap: .3rem; }
  .nav a { padding: .5rem .8rem; }
  .nav-grupo { margin-top: .45rem; }
}

/* Pantalla "Más" (/menu): lista agrupada con buen espaciado táctil. */
.menu-grupo { margin: 1.5rem 0; }
.menu-grupo:first-of-type { margin-top: .5rem; }
.menu-grupo-titulo { font-size: .85rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .5rem; }
.menu-lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.menu-lista li + li { border-top: 1px solid var(--borde); }
.menu-item { display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: .85rem 1rem; color: var(--texto); text-decoration: none; font-size: 1rem; }
.menu-item:hover { background: var(--fondo); }

/* Tarjetas */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}
.tarjeta-login { max-width: 380px; margin: 12vh auto 0; }
.sub { color: var(--texto-suave); margin-top: 0; }

/* Formularios */
label { display: block; margin: .9rem 0 .25rem; font-weight: 600; font-size: .92rem; }
input, select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  border: 1px solid var(--borde-campo);
  border-radius: 8px;
  background: #fff;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(47, 91, 234, .25);
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1rem;
  padding: .75rem 1.1rem;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--verde-marmol);
  border: 0;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .boton:hover, button:active, .boton:active { background: var(--verde-marmol-oscuro); }
.boton-link { margin: 0; padding: 0; min-height: 0; background: none; color: var(--acento); font-weight: 400; }
.boton-link:hover, .boton-link:active { background: none; text-decoration: underline; }

.aviso { padding: .7rem .9rem; border-radius: 8px; margin: 0 0 1rem; }
.aviso-error { background: var(--error-fondo); color: var(--error); }
.aviso-exito { background: var(--exito-fondo); color: var(--exito); }

/* Badges de estado */
.badge, .chip {
  display: inline-block;
  padding: .1rem .55rem;
  font-size: .78rem;
  font-weight: 500;
  background: var(--acento-suave);
  color: var(--acento-oscuro);
  border-radius: 999px;
}
.badge-ok { background: var(--exito-fondo); color: var(--exito); }
.badge-aviso, .chip-aviso { background: var(--alerta-fondo); color: var(--alerta); }
.badge-error { background: var(--error-fondo); color: var(--error); }
.badge-gris, .chip-gris { background: var(--gris-suave); color: var(--texto-suave); }

/* Resumen (KPIs) */
.kpis { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
@media (min-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi {
  display: flex; align-items: center; gap: .9rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1rem; text-decoration: none; color: inherit;
}
a.kpi:hover { border-color: var(--acento); }
.kpi-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); flex: none; }
.kpi-aviso .kpi-icono { background: var(--alerta-fondo); color: var(--alerta); }
.kpi-numero { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kpi-etiqueta { color: var(--texto-suave); font-size: .88rem; }

/* Inicio: encabezado azul, tarjeta de cifras superpuesta y atajos */
/* El banner de bienvenida va pegado a la barra superior (mismo azul, sin hueco)
   y las cifras se montan sobre su borde inferior. */
.con-inicio .contenido { padding-top: 0; }
.inicio-encabezado { background: var(--marino); color: #fff; padding: .25rem 0 4.5rem; }
.inicio-encabezado-interno { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.inicio-encabezado h1 { color: #fff; font-size: 1.7rem; line-height: 1.15; margin: 0 0 .4rem; }
.inicio-encabezado .sub { color: #c5d2ea; margin: 0; font-size: .9rem; }
.inicio-cifras {
  position: relative; margin: -3.25rem 0 0; padding: 1.1rem 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--superficie); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(18, 38, 74, .14);
}
.inicio-cifra { display: flex; flex-direction: column; gap: .35rem; padding: 0 .85rem; color: inherit; text-decoration: none; }
.inicio-cifra + .inicio-cifra { border-left: 1px solid var(--borde); }
.inicio-cifra .icono { color: var(--acento); }
.inicio-cifra-numero { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.inicio-cifra-etiqueta { font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--texto-suave); }
.inicio-cifra-aviso .icono, .inicio-cifra-aviso .inicio-cifra-numero { color: var(--alerta); }
.inicio-atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.inicio-atajos .inicio-atajo:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; }
.inicio-atajo {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.4rem;
  min-height: 116px; padding: 1rem; border-radius: var(--radio);
  background: var(--acento); color: #fff; font-weight: 800; line-height: 1.2; text-decoration: none;
}
.inicio-atajo:hover { background: var(--acento-oscuro); }
.inicio-atajo-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.inicio-atajo-claro { background: var(--superficie); color: var(--marino); border: 1.5px solid var(--borde-boton); }
.inicio-atajo-claro:hover { background: var(--acento-suave); }
.inicio-atajo-claro .inicio-atajo-icono { background: var(--acento-suave); color: var(--acento); }
@media (min-width: 640px) {
  .inicio-atajos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .inicio-atajos .inicio-atajo:last-child:nth-child(odd) { grid-column: auto; min-height: 116px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.4rem; }
}
@media (min-width: 900px) {
  .inicio-encabezado { padding: .5rem 0 4.5rem; }
}

/* Listas */
.encabezado-lista { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.encabezado-lista .boton { margin-top: 0; }
.lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.lista-item {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: .8rem 1rem;
}
.lista-item:hover { border-color: var(--acento); }
.acciones { display: flex; gap: 1rem; align-items: center; font-size: .92rem; }
.acciones form { margin: 0; }

.contador { color: var(--texto-suave); font-weight: 400; font-size: 1rem; }
.buscador { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.buscador .campo-buscar { flex: 1 1 220px; }
.buscador input[type="search"] { width: 100%; padding-left: 2.5rem; }
.buscador button { margin-top: 0; }
.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .9rem 0 0; }
.buscador .casilla { margin: 0; }
.casilla input { width: auto; }

.campo-doble { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .campo-doble { grid-template-columns: 1fr 1fr; } }

.detalle { color: var(--texto-suave); font-size: .9rem; }
/* Dato que el sistema arma solo (ej. codigo de producto): se ve como texto, no como campo editable */
input.campo-solo-lectura {
  background: var(--fondo); border-color: transparent; color: var(--texto);
  font-weight: 700; cursor: default; box-shadow: none;
}
input.campo-solo-lectura::placeholder { font-style: italic; font-weight: 400; color: var(--texto-suave); opacity: 1; }
input.campo-solo-lectura:focus { border-color: transparent; box-shadow: none; outline: none; }
.inactivo { opacity: .65; }
.vacio {
  color: var(--texto-suave); padding: 2rem 1rem; text-align: center;
  background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio);
}
.vacio .icono { display: block; width: 32px; height: 32px; margin: 0 auto .5rem; color: var(--texto-suave); }
.vacio .boton { margin-top: .75rem; }

.fila-producto, .fila { display: flex; gap: .8rem; align-items: center; }
.miniatura { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); background: var(--gris-suave); flex: none; }
.miniatura-vacia { display: inline-block; }
.miniatura-grande { width: 160px; height: 160px; display: block; margin-bottom: .5rem; }

.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--texto-suave); }
.paginacion .boton { margin-top: 0; }
.boton-claro { background: var(--superficie); color: var(--marino); border: 1.5px solid var(--borde-boton); }
.boton-claro:hover, .boton-claro:active { background: var(--acento-suave); }


/* Login */
/* Pantallas internas */
.boton .icono, button .icono { width: 18px; height: 18px; }
.volver { display: inline-flex; align-items: center; gap: .15rem; margin-bottom: .75rem; font-size: .9rem; color: var(--texto-suave); text-decoration: none; }
.volver:hover { color: var(--acento); }
.volver .icono { width: 16px; height: 16px; }
.tarjeta-form { max-width: 680px; }
.tarjeta-form h1 { margin-bottom: 0; }
.form-seccion {
  margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--borde);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave);
}
.form-seccion:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; }
.acciones-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.acciones-form button, .acciones-form .boton { margin-top: 0; }

.resumen-venta { margin-top: 1.5rem; }
.resumen-revision { margin-top: 1.5rem; }
.label-compacto { margin: 0; }
.valor-compacto { margin: 0; font-weight: 600; }
.valor-grande { font-size: 1.2rem; color: var(--acento); }
/* Saldo destacado (estado de cuenta) */
.saldo-marcador { font-weight: 800; font-size: 1.25em; letter-spacing: -.02em; color: var(--marino); }
.valor-pendiente { color: var(--error); }
.valor-pagado { color: var(--exito); }
.acciones-detalle { margin-top: 1.5rem; }
.filtros-importaciones { margin-top: 1rem; margin-bottom: 1rem; }
.boton-compacto { margin-top: 0; }
.boton-rechazo { background: var(--error); }
.acciones-revision { margin-top: 1.5rem; }
.acciones-revision .boton { margin-right: .5rem; }
.detalle-archivo { margin-top: .5rem; }
.seccion-cheque { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.mensaje-validacion { margin: 1rem 0; padding: 1rem; background: var(--alerta-fondo); border: 1px solid var(--alerta); border-radius: 8px; color: var(--alerta); }
.mensaje-validacion p { margin: 0; }
.oculto { display: none; }

.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--acento-suave); color: var(--acento-oscuro); font-weight: 600; flex: none; }
.acciones a, .acciones .boton-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 .75rem;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px;
  font-size: .88rem; font-weight: 500; text-decoration: none;
}
.acciones a:hover, .acciones .boton-link:hover { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-oscuro); text-decoration: none; }
@media (max-width: 559px) {
  .lista-item .acciones { width: 100%; padding-top: .7rem; border-top: 1px solid var(--borde); }
}

select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right .8rem center / 18px;
}
input[type="checkbox"] { accent-color: var(--acento); width: 1.1rem; height: 1.1rem; }
input[type="file"] { padding: .5rem; background: var(--fondo); border-style: dashed; }
input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .5rem .8rem; border: 0; border-radius: 6px;
  background: var(--acento-suave); color: var(--acento-oscuro); font: inherit; font-weight: 600; cursor: pointer;
}
.atajos { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.atajos .boton { margin-top: 0; }
.campo-icono { position: relative; display: block; }
.campo-icono > .icono { position: absolute; left: 1rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }

/* Fondo: foto de Pexels (pexels.com/photo/expansive-warehouse-aisle-filled-with-products-29454379, licencia libre) con capa oscura encima. */
body.login-page {
  min-height: 100vh;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(15, 23, 42, .75) 50%, rgba(15, 23, 42, .9)),
    url("fondo-login-bodega.webp") center / cover no-repeat,
    #0f172a;
}
body.login-page .contenido {
  min-height: 100vh; max-width: 1100px; padding: 3rem 1.5rem 1rem; align-content: center;
  display: grid; align-items: center; gap: 2rem;
}
@media (min-width: 900px) { body.login-page .contenido { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.login-marca { text-align: center; }
.login-marca h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
@media (min-width: 900px) { .login-marca h1 { font-size: 3rem; } }
.login-logo {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1rem;
  border-radius: 14px; background: linear-gradient(135deg, #3b82f6, #0ea5e9); color: #fff;
  box-shadow: 0 8px 24px rgba(14, 165, 233, .35);
}
.login-logo .icono { width: 28px; height: 28px; }

.login-caja { width: 100%; max-width: 448px; justify-self: center; }
@media (min-width: 900px) { .login-caja { justify-self: end; } }
.login-tarjeta {
  padding: 1.5rem; border-radius: 24px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
@media (min-width: 640px) { .login-tarjeta { padding: 2rem; } }
.login-tarjeta h2 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.login-tarjeta .sub { color: #cbd5e1; margin: .4rem 0 0; }
.login-tarjeta form { margin-top: 1.75rem; }
.login-tarjeta label { color: #e2e8f0; font-weight: 500; font-size: .9rem; margin: 0 0 .4rem; }
.login-tarjeta .campo-icono + label { margin-top: 1.25rem; }

.campo-icono { position: relative; display: block; }
.campo-icono > .icono { position: absolute; left: 1rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.login-tarjeta input {
  height: 48px; padding: 0 1rem 0 2.75rem; border-radius: 12px; font-size: .95rem;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
}
.login-tarjeta input::placeholder { color: #94a3b8; }
.login-tarjeta input:focus { border-color: rgba(56, 189, 248, .6); box-shadow: 0 0 0 3px rgba(56, 189, 248, .3); }
.login-tarjeta input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 100px #1e293b inset; }
.login-tarjeta .campo-clave input { padding-right: 3rem; }

button.ver-clave {
    position: absolute; top: 0; right: 0; margin: 0; width: 48px; height: 100%; min-height: 0; padding: 0;
  display: grid; place-items: center; background: none; color: #94a3b8; border-radius: 12px;
}
button.ver-clave:hover { background: none; color: #fff; }
button.ver-clave .icono { position: static; transform: none; width: 18px; height: 18px; color: inherit; }
button.ver-clave .ojo-oculto { display: none; }
button.ver-clave[aria-pressed="true"] .ojo-oculto { display: block; }
button.ver-clave[aria-pressed="true"] .ojo-visible { display: none; }

.login-error {
  display: flex; gap: .7rem; align-items: flex-start; margin: 1.25rem 0 0; padding: .9rem 1rem;
  border-radius: 12px; font-size: .9rem; background: rgba(244, 63, 94, .2); border: 1px solid rgba(244, 63, 94, .3); color: #fecdd3;
}
.login-error .icono { width: 16px; height: 16px; margin-top: .2rem; }
.login-ok { background: rgba(16, 185, 129, .2); border-color: rgba(16, 185, 129, .3); color: #a7f3d0; }

.boton-ingresar {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 48px; margin-top: 1.5rem;
  border-radius: 12px; font-weight: 600; background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  box-shadow: 0 10px 20px -5px rgba(59, 130, 246, .4); transition: transform .15s;
}
.boton-ingresar:hover { background: linear-gradient(90deg, #2563eb, #0284c7); transform: scale(1.01); }
.boton-ingresar:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.boton-ingresar .icono { width: 16px; height: 16px; }
.boton-ingresar:focus-visible, button.ver-clave:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

.login-ayuda { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; font-size: .9rem; color: #94a3b8; }
.login-pie { margin: 0; padding: 0 1rem 1.5rem; text-align: center; font-size: .75rem; color: #64748b; }
@media (min-width: 900px) { .login-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  .login-caja { animation: subir .6s ease-out; }
  @keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* Tabla responsiva con scroll horizontal en móvil */
.tabla-responsiva { overflow-x: auto; }
.tabla-responsiva table { width: 100%; border-collapse: collapse; }
.tabla-responsiva thead { background: var(--acento-suave); }
.tabla-responsiva th, .tabla-responsiva td { padding: .75rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-responsiva th { font-weight: 700; color: var(--marino); }
.tabla-responsiva tbody tr:hover { background: var(--fondo); }

/* Botones mini para acciones en tabla */
.boton-mini { padding: .4rem .6rem; font-size: .85rem; display: inline-block; text-decoration: none; border: 1px solid var(--borde); background: var(--superficie); color: var(--acento); border-radius: 4px; cursor: pointer; transition: all .2s; }
.boton-mini:hover { background: var(--acento-suave); border-color: var(--acento); }
/* Rechazo: sólido (fondo rojo, texto blanco) en botones normales; con contorno en los mini. */
.boton-rechazo { color: #fff; }
.boton-rechazo:hover, .boton-rechazo:active { background: #9f1239; color: #fff; }
.boton-mini.boton-rechazo { background: var(--superficie); color: var(--error); border-color: var(--error); }
.boton-mini.boton-rechazo:hover, .boton-mini.boton-rechazo:active { background: var(--error-fondo); color: var(--error); }

/* Acciones mínimas en tabla */
.acciones-minima { white-space: nowrap; }

/* Monospace para referencias */
.monospace { font-family: "Courier New", monospace; font-size: .9rem; }

/* Paginación */
.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0 0; }
.pagina-info { font-size: .9rem; color: var(--texto-suave); }

/* Formularios inline */
.form-inline { display: inline; }

/* Filtro de cliente */
.filtro-cliente {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.filtro-cliente label {
  font-size: .9rem;
  font-weight: 500;
  flex: 0 0 auto;
}
.filtro-cliente select {
  flex: 1;
  min-width: 200px;
  padding: .5rem;
  border: 1px solid var(--borde-campo);
  border-radius: 12px;
  font: inherit;
  background: var(--superficie);
}
@media (max-width: 600px) {
  .filtro-cliente {
    flex-direction: column;
    align-items: stretch;
  }
  .filtro-cliente label { flex: none; }
  .filtro-cliente select { min-width: 100%; }
}

/* Botón secundario */
.boton-secundario {
    background: var(--acento-suave);
  color: var(--acento-oscuro);
  border: 1px solid var(--acento);
}
.boton-secundario:hover, .boton-secundario:active {
  background: var(--acento);
  color: #fff;
}

/* Lista de productos del pedido / venta (filas compactas) */
.items-lista { margin: 1rem 0; }
.items-vacio { margin: 0; padding: 1.25rem 1rem; text-align: center; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); }
.item-fila { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: .65rem .75rem; margin-bottom: .5rem; transition: background .6s; }
.item-fila-nueva { background: var(--acento-suave); }
.item-cabecera { display: flex; align-items: center; gap: .65rem; }
.item-cabecera .item-producto-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-cabecera .boton-quitar { margin: 0; flex: none; }
.item-linea { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; align-items: end; margin-top: .5rem; }
.item-campo { display: block; margin: 0; font-weight: 400; }
.item-campo span { display: block; margin-bottom: .15rem; font-size: .8rem; color: var(--texto-suave); }
.item-campo input { width: 100%; padding: .5rem; border: 1px solid var(--borde-campo); border-radius: 8px; font: inherit; }
.item-subtotal { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: .9rem; }
.boton-quitar { padding: .4rem .6rem; font-size: .85rem; background: var(--error-fondo); border: 1px solid var(--error); color: var(--error); }
.boton-quitar:hover, .boton-quitar:active { background: #fbd5dc; color: var(--error); }
@media (min-width: 700px) {
  .item-linea { grid-template-columns: 130px 170px 1fr; }
  .item-subtotal { grid-column: auto; flex-direction: column; align-items: flex-end; }
}
.resumen-venta { padding: 1rem; background: var(--acento-suave); border-radius: var(--radio); }

/* Recibo de abono */
.recibo-opciones { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.recibo-opciones select { padding: .4rem; border: 1px solid var(--borde-campo); border-radius: 4px; font: inherit; }

.recibo {
  background: linear-gradient(180deg, #edf2fc 0%, #f8faff 45%, #fff 100%);
  border: 1px solid #cfdaf2;
  border-top: 4px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: 0 6px 18px rgba(18, 38, 74, .08);
  padding: 1.25rem;
  margin: 0 auto 1rem;
  font-size: .95rem;
}
.recibo p { margin: .3rem 0; }
/* Cabecera del recibo: nombre del negocio en recuadro (mismo estilo del menú lateral) */
.recibo .recibo-negocio {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .7rem; padding: .7rem .8rem;
  border: 1.5px solid var(--marino); border-radius: 10px;
  background: #fff; color: var(--marino);
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; line-height: 1.2; text-align: center;
}
.recibo-negocio .icono { width: 22px; height: 22px; flex: none; }
.recibo-titulo { text-align: center; font-weight: 700; font-size: 1.02rem; }
.recibo-fecha { text-align: center; color: var(--texto-suave); font-size: .85rem; padding-bottom: .7rem; margin-bottom: .75rem; border-bottom: 1px dashed var(--borde-campo); }
.recibo-subtitulo { font-weight: 600; margin-top: .75rem; }
.recibo-lista { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.recibo-pie { margin-top: 1rem; font-size: .8rem; color: var(--texto-suave); text-align: center; }
.recibo-marca { text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.recibo-marca-error { color: var(--error); }

.recibo-58 { max-width: 58mm; }
.recibo-80 { max-width: 80mm; }
.recibo-hoja { max-width: 100%; }

.recibo-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.acciones-pedido { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.acciones-pedido .boton { margin-top: 0; }
/* Compartir por WhatsApp (verde de la marca) e Imprimir (marino) */
.boton-whatsapp { background: #15803d; }
.boton-whatsapp:hover, .boton-whatsapp:active { background: #166534; }
.boton-imprimir { background: var(--marino); }
.boton-imprimir:hover, .boton-imprimir:active { background: #1d3a6e; }

@media print {
  .no-imprimir { display: none !important; }
  body, .tarjeta, .kpi, .lista-item { background: #fff; color: #000; box-shadow: none; }
  .topbar { background: #fff; color: #000; border-bottom: 1px solid #000; }
  .topbar .badge, .salir { background: none; color: #000; }
  body.recibo-pagina { padding-bottom: 0; }
  .recibo { background: #fff; border: none; box-shadow: none; margin: 0; color: #000; }
  .recibo .recibo-negocio { background: none; color: #000; border-color: #000; }
  .recibo-fecha { color: #000; border-bottom-color: #000; }
  .recibo-58, .recibo-80 { max-width: none; width: 100%; }
}

/* Mapa de ubicacion (Leaflet + OpenStreetMap): ficha del cliente y recibo de abono */
.mapa-caja { height: 260px; width: 100%; border-radius: var(--radio); margin: .75rem 0; border: 1px solid var(--borde); z-index: 0; }
/* Accesos de la ficha del cliente: 2 columnas iguales en celular (el último ocupa el ancho
   completo) y 3 columnas iguales desde 600 px; mismo alto y sin margen superior. */
.acciones-cliente { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .75rem 0 1rem; }
.acciones-cliente .boton { margin-top: 0; width: 100%; text-align: center; }
.acciones-cliente .boton:last-child { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .acciones-cliente { grid-template-columns: repeat(3, 1fr); }
  .acciones-cliente .boton:last-child { grid-column: auto; }
}
.mapa-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.campo-busqueda-mapa { margin-top: .5rem; }
.boton-texto { background: none; color: var(--texto-suave); border: none; text-decoration: underline; padding: 0; min-height: 0; }
.boton-texto:hover { background: none; color: var(--texto); }

/* Responsive (RX2) */
html { scroll-padding-bottom: calc(var(--nav-bajo) + 1rem); }
/* Red de seguridad: oculta desbordes horizontales en vez de corregirlos. Si algo se corta en el celular, quitar esta regla para ver cual elemento se sale. */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
.lista-item, .detalle, .tarjeta, .aviso { overflow-wrap: anywhere; }
input, select, textarea { font-size: 16px; min-height: 44px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
.casilla { min-height: 44px; }
.boton-mini, .boton-quitar, .acciones a, .acciones .boton-link, .volver { min-height: 44px; display: inline-flex; align-items: center; }
.boton-texto, .boton-link { min-height: 44px; }
.item-campo input, .recibo-opciones select, .filtro-cliente select { font-size: 16px; min-height: 44px; }
.contenido { padding-bottom: 2rem; }
.subnav { display: flex; gap: .5rem; margin: 1rem 0; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.subnav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde-boton); border-radius: 999px; background: var(--superficie); color: var(--marino); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.subnav a.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (max-width: 559px) {
  .paginacion { flex-wrap: wrap; }
  .acciones-form > button, .acciones-form > .boton { flex: 1 1 100%; }
}

/* Ejemplos semitransparentes en los campos */
input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: .5; }

/* Selector de producto con foto y buscador (pedidos y venta manual) */
.miniatura-chica { width: 40px; height: 40px; }

.selector-fondo {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: stretch; justify-content: center;
  background: rgba(18, 38, 74, .55);
}
.selector-fondo[hidden] { display: none; }
.selector-caja {
  display: flex; flex-direction: column; width: 100%; max-width: 620px;
  background: var(--superficie);
}
.selector-cabecera { display: flex; gap: .5rem; align-items: center; padding: .75rem; border-bottom: 1px solid var(--borde); }
.selector-cabecera .boton { margin: 0; flex: none; }
.selector-busqueda { flex: 1; min-width: 0; font-size: 16px; min-height: 44px; }
.selector-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.selector-lista li + li { border-top: 1px solid var(--borde); }
.selector-item {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  width: 100%; min-height: 64px; margin: 0; padding: .6rem .75rem; text-align: left;
  font-weight: 400; color: var(--texto); background: var(--superficie); border: 0; border-radius: 0;
}
.selector-item:hover, .selector-item:active, .selector-item:focus-visible { background: var(--acento-suave); }
.selector-item .miniatura { width: 48px; height: 48px; }
.selector-datos { display: flex; flex-direction: column; min-width: 0; }
.selector-datos strong { overflow-wrap: anywhere; }
.selector-vacio { padding: 2rem 1rem; text-align: center; color: var(--texto-suave); }
body.selector-abierto { overflow: hidden; }

@media (min-width: 700px) {
  .selector-fondo { align-items: flex-start; padding: 6vh 1rem 0; }
  .selector-caja { max-height: 80vh; border-radius: var(--radio); overflow: hidden; box-shadow: 0 16px 48px rgba(18, 38, 74, .35); }
}
.item-campo { min-width: 0; }
.item-fila .nota-precio { margin: .5rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.item-fila .nota-precio:empty { display: none; }

/* Visor de foto ampliada (static/app.js, data-ampliar) */
.ampliable { cursor: zoom-in; }
.visor-foto { border: 0; padding: .75rem; border-radius: 12px; max-width: min(92vw, 860px); background: #fff; text-align: center; }
.visor-foto::backdrop { background: rgba(0, 0, 0, .7); }
.visor-foto img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto .75rem; border-radius: 8px; }

/* Encabezado con el título al centro y el botón de acción al extremo izquierdo */
.encabezado-centrado { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.encabezado-centrado h1 { grid-column: 2; text-align: center; margin: 0; }
.encabezado-centrado .boton { grid-column: 1; grid-row: 1; justify-self: start; }
@media (max-width: 520px) {
  .encabezado-centrado { grid-template-columns: 1fr; row-gap: .6rem; justify-items: center; }
  .encabezado-centrado h1, .encabezado-centrado .boton { grid-column: 1; grid-row: auto; }
  .encabezado-centrado .boton { order: 2; justify-self: stretch; text-align: center; }
}

/* Fila de lista completa como enlace (el enlace del nombre se estira sobre toda la tarjeta) */
.lista-item-enlace { position: relative; cursor: pointer; }
.enlace-fila { color: inherit; text-decoration: none; }
.enlace-fila::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.enlace-fila:focus-visible { outline: none; }
.enlace-fila:focus-visible::after { outline: 2px solid var(--acento); outline-offset: 2px; }
/* La foto ampliable queda por encima del enlace estirado de la fila */
.lista-item-enlace .miniatura.ampliable { position: relative; z-index: 1; }

/* Páginas de error (403, 404, 500) */
.pagina-error { max-width: 420px; margin: 8vh auto 0; text-align: center; padding: 2rem 1.5rem; }
.pagina-error-icono { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--acento-suave); color: var(--acento); }
.pagina-error-icono .icono { width: 28px; height: 28px; }
.pagina-error-codigo { margin: .9rem 0 .1rem; font-size: .85rem; font-weight: 800; letter-spacing: .12em; color: var(--texto-suave); }
.pagina-error h1 { margin: 0 0 .4rem; }
.pagina-error .boton { margin-top: 1rem; }

/* Saldo total de la pantalla de abonos del cliente: una sola línea compacta */
.saldo-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 .75rem; padding: .7rem 1rem; background: var(--acento-suave); border-radius: var(--radio); font-weight: 600; }
.saldo-total-monto { font-size: 1.25rem; font-weight: 800; color: var(--texto); }
.saldo-total-vencido { color: var(--error); }
.acciones-pie { margin: .9rem 0 1.5rem; }
.acciones-pie .boton { margin-top: 0; }

/* "Más": regreso al menú, solo en celular (en pantalla ancha el menú lateral ya está a la vista) */
@media (min-width: 900px) {
  .volver.volver-menu { display: none; }
}

/* Saldo a la derecha de la fila (lista de saldos de clientes) */
.saldo-fila { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.saldo-fila strong { font-size: 1.1rem; color: var(--marino); }
.sub-lista { margin: .7rem 0 .9rem; }

/* "Abonar saldo completo" separado del campo de monto */
#abonar-saldo { margin-top: .6rem; }

/* Catalogo (pantalla para ensenar los productos al cliente) */
.catalogo { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catalogo { grid-template-columns: repeat(3, 1fr); } }
.catalogo-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.catalogo-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris-suave); }
.catalogo-datos { padding: .9rem 1rem 1rem; }
.catalogo-nombre { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.25; }
.catalogo-descripcion { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.catalogo-estado { margin: 0 0 .4rem; }
.catalogo-estado .badge { font-size: .9rem; padding: .2rem .75rem; }
.catalogo-precio { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--marino); }
.catalogo-precio[hidden] { display: none; }
.catalogo-interruptor { margin-top: 1rem; }

/* Boton Atras: enlace de regreso visible, tipo boton (tocable en celular) */
.volver {
  gap: .35rem; padding: 0 1rem 0 .6rem; margin-bottom: 1rem;
  background: var(--superficie); border: 1.5px solid var(--borde-boton); border-radius: 999px;
  color: var(--marino); font-size: 1rem; font-weight: 700;
}
.volver:hover, .volver:active { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-oscuro); }
.volver .icono { width: 20px; height: 20px; }