/* Estilos propios de index.html — única pantalla que todavía queda acá
(las otras 6 ya migraron a static/catalogo/style.css + su propio .css,
ver 05_estilo_codigo.md). Los componentes en sí (.panel, .form-campo,
.btn-primary/.btn-secondary, etc.) vienen de static/catalogo/style.css,
cargado antes que este archivo en el — acá solo lo que hace
falta para el contenido propio de index.html (pantalla de login incluida,
que sigue con el look viejo a propósito, sin migrar en este checkpoint)
y las clases que arma app.js a mano (carrito/pagos/errores de sync). */
* {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 0;
padding: 1rem;
background: #f4f4f5;
color: #1a1a1a;
}
.oculto {
display: none !important;
}
/* --- Aviso de actualización del service worker --- */
/* Fijo pero no modal: no bloquea el resto de la UI, el vendedor sigue
cobrando con el banner visible y decide cuándo actualizar. */
#banner-actualizacion {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: #1a1a2e;
color: white;
font-size: 0.9rem;
}
#banner-actualizacion button {
width: auto;
flex-shrink: 0;
background: #4ade80;
color: #1a1a2e;
font-weight: bold;
border: none;
border-radius: 4px;
padding: 0.4rem 0.9rem;
}
h1, h2 {
margin-top: 0;
}
label {
display: block;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
input, select, button {
font-size: 1.1rem;
padding: 0.5rem;
width: 100%;
margin-top: 0.25rem;
}
button {
cursor: pointer;
width: auto;
}
/* --- Login (sin migrar en este checkpoint — solo el contenido de
pantalla-app, modo Local, ver 05_estilo_codigo.md) --- */
#pantalla-login {
max-width: 360px;
margin: 3rem auto;
background: white;
padding: 1.5rem;
border-radius: 8px;
}
/* --- Header de la app --- */
/* .panel reusa el componente compartido (static/catalogo/style.css: borde
grueso, sombra plana, fondo papel) — "chico" via padding más ajustado
que el de un .panel normal, ver REGLA del checkpoint ("barra propia").
No lleva .titulo-pantalla "Venta": ya está resaltado como página activa
en el nav (sidebar/barra móvil), un título grande acá sería redundante
en la pantalla más usada y más apretada de información. */
#app-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--espacio-sm);
padding: var(--espacio-sm) var(--espacio-md);
margin-bottom: var(--espacio-md);
}
#app-header strong {
font-family: var(--fuente-cuerpo);
font-weight: 700;
}
.header-acciones {
display: flex;
flex-wrap: wrap;
gap: var(--espacio-sm);
align-items: center;
}
.header-acciones .btn-secondary {
width: auto;
min-height: 36px;
font-size: var(--texto-sm);
padding: 4px var(--espacio-md);
box-shadow: 2px 2px 0 var(--color-tinta);
}
.header-acciones .btn-secondary:hover {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--color-tinta);
}
#mensaje:empty {
display: none;
}
.mensaje-ok, .mensaje-error, .mensaje-pendiente {
font-family: var(--fuente-cuerpo);
font-weight: 600;
padding: var(--espacio-sm) var(--espacio-md);
border-radius: var(--radio-borde);
margin-bottom: var(--espacio-md);
}
.mensaje-ok {
background: color-mix(in srgb, var(--color-ok) 12%, var(--color-papel));
color: var(--color-ok);
border: 2px solid var(--color-ok);
}
.mensaje-error {
background: color-mix(in srgb, var(--color-alarma) 12%, var(--color-papel));
color: var(--color-alarma);
border: 2px solid var(--color-alarma);
}
.mensaje-pendiente {
background: color-mix(in srgb, var(--color-panel) 25%, white);
color: #8a6200;
border: 2px solid var(--color-panel);
}
/* Insignias de pendientes/errores de sincronización: reusan .badge/
.badge-pendiente/.badge-error del sistema compartido (static/catalogo/
style.css) en vez de las clases propias que tenían antes — mismo
criterio de "reusar lo que ya existe" del Checkpoint 2 (modo Feria). */
/* --- Título de sección (Carrito/Pagos/Cliente/Encargo/Errores de sync) ---
Work Sans bold, NO Bangers — Bangers queda para títulos de pantalla
completa (.titulo-pantalla), y estas son cabeceras de sección dentro de
la pantalla más densa del sistema, no pestañas ni pantallas propias. */
.venta-seccion-titulo {
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: var(--texto-lg);
color: var(--color-tinta);
margin: 0 0 var(--espacio-sm);
display: flex;
align-items: center;
gap: var(--espacio-sm);
}
/* Botón "+" de las secciones colapsables (Encargo/Reserva, Errores de
sincronización) — mismo comportamiento de toggle (sin tocar), solo
estilo nuevo. */
.venta-btn-toggle {
width: auto;
min-height: 0;
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: var(--texto-base);
color: var(--color-tinta);
background: var(--color-papel-alt);
border: 2px solid var(--color-tinta);
border-radius: var(--radio-borde);
padding: 2px var(--espacio-sm);
cursor: pointer;
}
.venta-btn-toggle:hover {
background: var(--color-panel);
}
.venta-btn-toggle:focus-visible {
outline: 3px solid var(--color-halftone);
outline-offset: 2px;
}
/* --- Errores de sincronización --- */
.error-sync-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--espacio-sm);
background: color-mix(in srgb, var(--color-alarma) 12%, white);
border: 2px solid var(--color-alarma);
border-radius: var(--radio-borde);
padding: var(--espacio-sm);
margin-bottom: var(--espacio-xs);
font-family: var(--fuente-cuerpo);
font-size: var(--texto-sm);
color: var(--color-tinta);
}
.error-sync-acciones {
display: flex;
gap: var(--espacio-xs);
flex-shrink: 0;
}
.error-sync-acciones button {
width: auto;
min-height: 32px;
font-family: var(--fuente-cuerpo);
font-weight: 600;
font-size: var(--texto-xs);
background: white;
border: 2px solid var(--color-tinta-suave);
border-radius: var(--radio-borde);
padding: 2px var(--espacio-sm);
cursor: pointer;
}
/* --- Alta rápida de cliente (venta-cliente y panel-encargo) --- */
.link-accion {
width: auto;
background: none;
border: none;
color: var(--color-halftone);
text-decoration: underline;
font-family: var(--fuente-cuerpo);
font-weight: 600;
padding: var(--espacio-xs) 0;
font-size: var(--texto-sm);
margin-bottom: var(--espacio-sm);
cursor: pointer;
}
.link-accion:focus-visible {
outline: 3px solid var(--color-halftone);
outline-offset: 2px;
}
/* --- Modo Local: input de código de barras — grande/protagónico a
propósito (el campo más usado de esta pantalla, no se achica solo
porque ahora vive dentro de un .form-campo). --- */
#input-codigo-barras {
font-family: var(--fuente-dato);
font-size: var(--texto-xl);
text-align: center;
min-height: 64px;
background: color-mix(in srgb, var(--color-panel) 12%, white);
border: var(--ancho-borde-panel) solid var(--color-tinta);
border-radius: var(--radio-borde);
color: var(--color-tinta);
}
#input-codigo-barras:focus-visible {
outline: 3px solid var(--color-halftone);
outline-offset: 1px;
}
/* --- Modo Feria: chips de categoría, breadcrumb, tarjetas de variante,
ventas recientes. El buscador en sí y los resultados intermedios
(Producto) reusan .form-campo/.lista-resultados/.item-lista, ya
definidos en el Checkpoint 1 — acá solo lo específico de este modo. --- */
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--espacio-sm);
margin: var(--espacio-sm) 0;
}
.chip {
width: auto;
min-height: 0;
font-family: var(--fuente-cuerpo);
font-weight: 600;
font-size: var(--texto-sm);
border-radius: 999px;
background: var(--color-papel-alt);
color: var(--color-tinta);
border: 2px solid var(--color-tinta-suave);
padding: 4px var(--espacio-md);
cursor: pointer;
}
.chip:hover {
background: var(--color-panel);
border-color: var(--color-tinta);
}
.chip:focus-visible {
outline: 3px solid var(--color-halftone);
outline-offset: 2px;
}
.breadcrumb {
font-family: var(--fuente-cuerpo);
font-size: var(--texto-sm);
font-style: italic;
color: var(--color-tinta-suave);
}
.breadcrumb:empty {
display: none;
}
/* Última parada de la navegación Categoría→Producto→Variante (y también
los resultados del buscador libre) — a diferencia de .item-lista (un
solo dato clickeable), esta tarjeta ya muestra precio/stock y tiene su
propia acción "Agregar". */
.tarjeta-variante {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--espacio-sm);
background: white;
border: 2px solid var(--color-tinta-suave);
border-radius: var(--radio-borde);
padding: var(--espacio-sm) var(--espacio-md);
}
.tarjeta-variante span {
font-family: var(--fuente-dato);
font-size: var(--texto-sm);
color: var(--color-tinta);
}
.tarjeta-variante button {
width: auto;
min-height: 36px;
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: var(--texto-sm);
color: var(--color-texto-sobre-oscuro);
background: var(--color-ok);
border: 2px solid var(--color-tinta);
border-radius: var(--radio-borde);
padding: 4px var(--espacio-md);
cursor: pointer;
}
.tarjeta-variante button:hover {
filter: brightness(0.95);
}
.venta-reciente {
padding: var(--espacio-xs) 0;
border-bottom: 1px solid var(--color-papel-alt);
font-family: var(--fuente-cuerpo);
font-size: var(--texto-sm);
color: var(--color-tinta);
}
/* --- Buscador con resultados (Cliente en venta/Encargo, y también la
navegación Categoría→Producto en modo Feria) — mismo criterio visual
que .promo-lista-resultados/.promo-item-resultado de promociones.css. --- */
.lista-resultados {
display: flex;
flex-direction: column;
gap: var(--espacio-xs);
margin-top: var(--espacio-xs);
}
.item-lista {
text-align: left;
font-family: var(--fuente-cuerpo);
font-size: var(--texto-sm);
padding: var(--espacio-xs) var(--espacio-sm);
min-height: 0;
background: white;
border: 2px solid var(--color-tinta-suave);
border-radius: var(--radio-borde);
cursor: pointer;
}
.item-lista:hover {
background: var(--color-papel-alt);
}
/* --- Carrito --- */
.carrito-linea {
display: grid;
grid-template-columns: 1fr 4rem 5rem 2.5rem;
gap: var(--espacio-sm);
align-items: center;
padding: var(--espacio-xs) 0;
border-bottom: 1px solid var(--color-papel-alt);
font-family: var(--fuente-cuerpo);
}
.carrito-sku {
font-family: var(--fuente-dato);
font-size: var(--texto-sm);
}
.carrito-linea input[type="number"] {
min-height: 36px;
border: 2px solid var(--color-tinta-suave);
border-radius: var(--radio-borde);
padding: 4px;
font-family: var(--fuente-cuerpo);
}
.carrito-subtotal {
font-family: var(--fuente-dato);
text-align: right;
font-weight: 600;
}
.carrito-quitar {
width: auto;
min-height: 0;
color: var(--color-alarma);
font-size: 1.3rem;
line-height: 1;
background: none;
border: none;
cursor: pointer;
}
#carrito-total, #pagos-total {
font-family: var(--fuente-dato);
font-weight: 700;
font-size: var(--texto-lg);
}
/* --- Pagos --- */
.pago-linea {
display: flex;
flex-wrap: wrap;
gap: var(--espacio-sm);
align-items: center;
padding: var(--espacio-sm) 0;
border-bottom: 1px solid var(--color-papel-alt);
}
.pago-linea select, .pago-linea input {
width: auto;
flex: 1 1 8rem;
min-height: 40px;
border: 2px solid var(--color-tinta-suave);
border-radius: var(--radio-borde);
padding: 4px var(--espacio-sm);
font-family: var(--fuente-cuerpo);
}
.pago-linea button {
width: auto;
}
.check-ignorar {
display: flex;
align-items: center;
gap: 4px;
width: auto;
font-family: var(--fuente-cuerpo);
font-size: var(--texto-xs);
}
.check-ignorar input {
width: auto;
min-height: 0;
}
/* --- Confirmar venta: el botón más importante de la pantalla más usada,
ancho completo para que no pueda pasar desapercibido. --- */
#btn-confirmar-venta {
width: 100%;
margin: var(--espacio-md) 0;
}