/* ============================================================================= SISTEMA DE DISEÑO — Portal de escritorio POS Tienda de Ropa ============================================================================= Línea visual "fashion-forward" de alta gama: fondo blanco roto y muy limpio, azul cobalto profundo como color de acción principal, y un acento cálido de bronce/oro rosa para detalles secundarios (badges de segmento, líneas de acento en tarjetas). Mucho aire, tarjetas con sombras muy suaves, bordes redondeados, sin líneas de cuadrícula pesadas. --color-primario y --color-secundario se sobreescriben inline desde el layout base con los valores reales de config_empresa (ver layout/_head.html), así que estos valores aquí son solo el fallback/default si por algún motivo la variable inline no llegó. El administrador puede cambiarlos en Configuración de marca y el cambio se refleja en todo el portal — esta paleta cobalto+bronce es solo el punto de partida por defecto, no algo fijo. ============================================================================= */ :root { /* Colores de marca (sobreescribibles por el administrador) */ --color-primario: #1E40AF; /* azul cobalto profundo — botones, acentos, header */ --color-secundario: #1A2744; /* azul marino casi negro — navegación */ /* Paleta fija del sistema (no editable por el administrador) */ --color-fondo: #F9F9F9; /* blanco roto, cálido y limpio */ --color-superficie: #FFFFFF; --color-superficie-alterna: #F1F2F5; --color-texto: #1F2433; /* azul-carbón, no negro puro */ --color-texto-tenue: #6B7180; --color-borde: #EAEBEF; /* borde muy fino, casi imperceptible */ --color-acento-secundario: #B08D57; /* bronce / oro rosa — detalles cálidos */ --color-acento-secundario-fondo: #F5EEE3; /* fondo suave del acento, para badges */ --color-error: #DC4C4C; --color-error-fondo: #FBEAEA; --color-exito: #3C9A6E; --color-exito-fondo: #E8F4EE; /* Tipografía: el par activo se controla con data-tipografia en (ver layout/_head.html), cada bloque @font-face/variable abajo */ --fuente-display: 'Fraunces', Georgia, serif; --fuente-cuerpo: 'Inter', -apple-system, system-ui, sans-serif; /* Escala de espaciado (base 4px) */ --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px; --espacio-5: 24px; --espacio-6: 32px; --espacio-7: 48px; --espacio-8: 64px; /* Radios y sombras: bordes redondeados suaves y sombras muy ligeras (look premium, "fashion-forward"), sin cajas duras de admin panel */ --radio-sm: 6px; --radio-md: 10px; --radio-lg: 16px; --sombra-sm: 0 1px 3px rgba(31, 36, 51, 0.05); --sombra-md: 0 6px 20px rgba(31, 36, 51, 0.07); --sombra-lg: 0 16px 40px rgba(31, 36, 51, 0.10); } /* Par tipográfico alterno 2: Playfair Display + Source Sans 3 */ html[data-tipografia="playfair-source"] { --fuente-display: 'Playfair Display', Georgia, serif; --fuente-cuerpo: 'Source Sans 3', -apple-system, system-ui, sans-serif; } /* Par tipográfico alterno 3: Merriweather + system-ui (más sobrio) */ html[data-tipografia="merriweather-system"] { --fuente-display: 'Merriweather', Georgia, serif; --fuente-cuerpo: -apple-system, system-ui, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-cuerpo); font-size: 15px; line-height: 1.55; } h1, h2, h3, .fuente-display { font-family: var(--fuente-display); font-weight: 600; color: var(--color-texto); letter-spacing: -0.01em; } h1 { font-size: 28px; margin: 0 0 var(--espacio-2) 0; } h2 { font-size: 21px; margin: 0 0 var(--espacio-2) 0; } h3 { font-size: 17px; margin: 0 0 var(--espacio-1) 0; } a { color: var(--color-primario); text-decoration: none; } a:hover { text-decoration: underline; } /* Foco de teclado visible siempre — accesibilidad mínima no negociable */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; } button, .boton { font-family: var(--fuente-cuerpo); font-size: 14px; font-weight: 600; border: none; border-radius: var(--radio-md); padding: 10px 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 0.15s ease, transform 0.05s ease; } button:active, .boton:active { transform: translateY(1px); } .boton-primario { background: var(--color-primario); color: #F4F5FA; } .boton-primario:hover { background: color-mix(in srgb, var(--color-primario) 80%, black); } .boton-secundario { background: transparent; color: var(--color-secundario); border: 1px solid var(--color-borde); } .boton-secundario:hover { background: var(--color-superficie-alterna); } .boton-peligro { background: var(--color-error); color: #F4F5FA; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { font-family: var(--fuente-cuerpo); font-size: 14px; color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-sm); padding: 9px 12px; width: 100%; } label { display: block; font-size: 13px; font-weight: 600; color: var(--color-texto-tenue); margin-bottom: var(--espacio-1); } .campo { margin-bottom: var(--espacio-4); } .tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--espacio-5); } .alerta { border-radius: var(--radio-md); padding: var(--espacio-3) var(--espacio-4); font-size: 14px; margin-bottom: var(--espacio-4); } .alerta-error { background: var(--color-error-fondo); color: var(--color-error); } .alerta-exito { background: var(--color-exito-fondo); color: var(--color-exito); } /* Etiqueta colgante — elemento de firma del sistema, usado como motivo discreto en el header del portal. Evoca la etiqueta de tela/precio de la tienda física sin ser un logo institucional ruidoso. */ .etiqueta-colgante { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; } /* ============================================================================= LAYOUT DEL PORTAL (navegación lateral + contenido) ============================================================================= */ .app-shell { display: flex; min-height: 100vh; } .nav-lateral { width: 230px; flex-shrink: 0; background: var(--color-secundario); color: #F4F5FA; display: flex; flex-direction: column; padding: var(--espacio-5) var(--espacio-4); } .nav-marca { display: flex; align-items: center; gap: var(--espacio-2); font-family: var(--fuente-display); font-weight: 600; font-size: 15px; margin-bottom: var(--espacio-6); padding-bottom: var(--espacio-4); border-bottom: 1px solid color-mix(in srgb, #F4F5FA 18%, transparent); } .nav-marca .etiqueta-colgante { width: 22px; height: 22px; } .nav-lista { list-style: none; margin: 0; padding: 0; flex: 1; } .nav-enlace { display: block; padding: var(--espacio-3) var(--espacio-3); border-radius: var(--radio-md); color: color-mix(in srgb, #F4F5FA 80%, transparent); font-size: 14px; font-weight: 500; margin-bottom: var(--espacio-1); } .nav-enlace:hover { background: color-mix(in srgb, #F4F5FA 10%, transparent); text-decoration: none; color: #F4F5FA; } .nav-enlace-activo { background: var(--color-primario); color: #F4F5FA; } .nav-salir { margin-top: auto; padding-top: var(--espacio-4); } /* El botón de Cerrar sesión vive dentro del fondo oscuro de .nav-lateral (background: var(--color-secundario)); .boton-secundario genérico usa color: var(--color-secundario) para el texto, pensado para fondos claros — aquí el texto quedaba del mismo color que el fondo (invisible) hasta el :hover, que sí cambiaba el fondo y revelaba el contraste. Estas reglas le dan su propio color claro, consistente con el resto del texto de la navegación (#F4F5FA). */ .nav-salir .boton-secundario { color: #F4F5FA; border-color: rgba(244, 245, 250, 0.3); } .nav-salir .boton-secundario:hover { background: rgba(244, 245, 250, 0.1); } .contenido-principal { flex: 1; padding: var(--espacio-6) var(--espacio-7); max-width: 1100px; } .encabezado-pagina { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--espacio-6); } .encabezado-pagina .usuario-actual { font-size: 13px; color: var(--color-texto-tenue); } .grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-5); } /* ============================================================================= DESGLOSE DE EFECTIVO (apertura/cierre de caja) ============================================================================= */ .desglose-efectivo { margin-top: var(--espacio-4); margin-bottom: var(--espacio-4); padding: var(--espacio-3); border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie-alterna); } .desglose-efectivo[open] summary { margin-bottom: var(--espacio-2); } .desglose-efectivo summary::-webkit-details-marker { color: var(--color-primario); } /* ============================================================================= SUBMENÚ DE CATÁLOGO (pestañas entre productos/categorías/tallas/etc.) ============================================================================= */ .pestana-submenu { padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--color-texto-tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; } .pestana-submenu:hover { color: var(--color-texto); text-decoration: none; } .pestana-submenu-activa { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 600; } /* ============================================================================= PESTAÑAS DE FILTRO RÁPIDO (chips) — usadas para filtrar categorías de producto en Ventas y estados de cheque en Bancos. A diferencia de .pestana-submenu (subrayado, navega a otra URL), estas son "chips" con relleno que filtran contenido en la misma pantalla vía JS. ============================================================================= */ .pestana-categoria { background: none; border: 1px solid var(--color-borde) !important; /* sobreescribe button { border: none } */ border-radius: var(--radio-md); padding: 6px 14px; font-family: var(--fuente-cuerpo); font-size: 13px; font-weight: 600; color: var(--color-texto-tenue); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pestana-categoria:hover { background: var(--color-superficie-alterna); color: var(--color-texto); } .pestana-categoria-activa, button.pestana-categoria-activa { background: var(--color-primario) !important; color: #F4F5FA !important; border-color: var(--color-primario) !important; } .pestana-categoria-activa:hover, button.pestana-categoria-activa:hover { background: color-mix(in srgb, var(--color-primario) 85%, black) !important; } /* ============================================================================= BALDOSAS (tiles) — accesos rápidos a módulos y sub-secciones. Pensadas para pantallas táctiles: área de toque generosa pero la baldosa en sí "no muy grande" (densidad de un dashboard, no de una app de iconos de celular). El color de acento se pasa por variable inline (--baldosa-color) para poder reciclar primario/secundario/ acento-secundario/éxito según el módulo sin hardcodear colores que choquen con la marca configurada por el administrador. ============================================================================= */ .grid-baldosas { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--espacio-4); } .baldosa { --baldosa-color: var(--color-primario); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--espacio-4); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: var(--espacio-4); min-height: 104px; text-decoration: none; color: var(--color-texto); box-shadow: var(--sombra-sm); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .baldosa:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: color-mix(in srgb, var(--baldosa-color) 40%, var(--color-borde)); } .baldosa:active { transform: translateY(0) scale(0.97); box-shadow: var(--sombra-sm); } .baldosa-icono { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radio-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--baldosa-color) 15%, transparent); color: var(--baldosa-color); } .baldosa-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .baldosa-texto { width: 100%; } .baldosa-titulo { font-size: 14px; font-weight: 700; color: var(--color-texto); line-height: 1.25; } .baldosa-subtitulo { font-size: 12px; color: var(--color-texto-tenue); line-height: 1.3; margin-top: 2px; } /* Variante compacta: para sub-navegación dentro de un módulo (ej. Bancos), donde las baldosas hacen las veces de pestañas pero con más peso visual que .pestana-submenu. */ .grid-baldosas-compacta { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--espacio-3); } .baldosa-compacta { min-height: 76px; padding: var(--espacio-3); flex-direction: row; align-items: center; gap: var(--espacio-3); } .baldosa-compacta .baldosa-icono { width: 34px; height: 34px; } .baldosa-compacta .baldosa-icono svg { width: 18px; height: 18px; } .baldosa-compacta .baldosa-titulo { font-size: 13.5px; } .baldosa-activa { border-color: var(--baldosa-color) !important; border-width: 2px; background: color-mix(in srgb, var(--baldosa-color) 12%, var(--color-superficie)); box-shadow: var(--sombra-md); } .baldosa-activa .baldosa-icono { background: color-mix(in srgb, var(--baldosa-color) 18%, transparent); color: var(--baldosa-color); } .baldosa-activa .baldosa-titulo { color: var(--baldosa-color); font-weight: 700; } /* ============================================================================= DISTINTIVOS (badges) de estado — reemplaza los sueltos por una píldora consistente, más legible a distancia y en pantallas táctiles pequeñas. ============================================================================= */ .distintivo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.6; } .distintivo-neutro { background: var(--color-superficie-alterna); color: var(--color-texto-tenue); } .distintivo-info { background: color-mix(in srgb, var(--color-primario) 14%, transparent); color: var(--color-primario); } .distintivo-exito { background: var(--color-exito-fondo); color: var(--color-exito); } .distintivo-error { background: var(--color-error-fondo); color: var(--color-error); } /* ============================================================================= TARJETA DE ESTADÍSTICA — variante de .tarjeta para números destacados (inicio, resúmenes). Borde de acento a la izquierda + icono. ============================================================================= */ .tarjeta-estadistica { --estadistica-color: var(--color-primario); display: flex; align-items: flex-start; gap: var(--espacio-4); border-left: 3px solid var(--estadistica-color); } .tarjeta-estadistica .baldosa-icono { background: color-mix(in srgb, var(--estadistica-color) 15%, transparent); color: var(--estadistica-color); } .tarjeta-estadistica .valor-estadistica { font-size: 26px; font-weight: 700; line-height: 1.1; } /* ============================================================================= OPTIMIZACIÓN TÁCTIL — área de toque mínima ~44px (guía Apple/Material), sin retardo de 300ms, sin resaltado azul nativo al tocar, sin que el doble-tap dispare zoom accidental en inputs. ============================================================================= */ a, button, .boton, .baldosa, .nav-enlace, .pestana-submenu, .pestana-reporte, .pestana-categoria, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button, .boton { min-height: 44px; } @media (pointer: coarse) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { font-size: 16px; /* evita el zoom automático de iOS al enfocar */ min-height: 44px; } button, .boton { min-height: 48px; padding: 13px 22px; } .nav-enlace { padding: 14px var(--espacio-3); } .pestana-submenu, .pestana-reporte, .pestana-categoria { padding: 12px 16px; } } /* ============================================================================= LISTA DE TARJETAS (filas) — reemplaza las tablas densas de Clientes, Empleados y Ventas por filas tipo tarjeta, con mucho aire, alineadas en columnas mediante grid. Cada fila es una superficie propia con sombra suave; sin líneas verticales ni bordes pesados. ============================================================================= */ .lista-tarjetas { display: flex; flex-direction: column; gap: var(--espacio-3); } .fila-tarjeta { display: flex; align-items: center; gap: var(--espacio-5); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--espacio-4) var(--espacio-5); transition: box-shadow 0.15s ease, transform 0.15s ease; } .fila-tarjeta:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); } /* Bloque principal (nombre + datos secundarios) que se expande para empujar metadatos y acciones a la derecha. */ .fila-tarjeta-principal { flex: 1; min-width: 0; } .fila-tarjeta-titulo { font-size: 15.5px; font-weight: 700; color: var(--color-texto); line-height: 1.3; } .fila-tarjeta-detalle { font-size: 13px; color: var(--color-texto-tenue); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 16px; } /* Columna de metadato con su etiqueta tenue arriba (Segmento, Estado, Último ingreso, etc.). */ .fila-tarjeta-meta { display: flex; flex-direction: column; gap: 3px; min-width: 84px; } .fila-tarjeta-meta-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-texto-tenue); font-weight: 600; } .fila-tarjeta-acciones { display: flex; gap: 8px; flex-shrink: 0; } /* En pantallas estrechas, la fila se apila en vertical para no romperse. */ @media (max-width: 760px) { .fila-tarjeta { flex-wrap: wrap; gap: var(--espacio-3); } .fila-tarjeta-acciones { width: 100%; } } /* Fila de total destacada al pie de una lista de tarjetas (Ventas). */ .fila-total { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4); background: var(--color-superficie); border: 1px solid var(--color-acento-secundario); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--espacio-4) var(--espacio-5); margin-top: var(--espacio-3); } .fila-total-etiqueta { font-size: 15px; font-weight: 600; color: var(--color-texto); } .fila-total-valor { font-size: 22px; font-weight: 700; color: var(--color-texto); } /* ============================================================================= AVATAR con iniciales — círculo de color suave junto al nombre en Clientes y Empleados, para un toque más humano. El tono de fondo se pasa por variable inline (--avatar-color), por defecto bronce. ============================================================================= */ .avatar { --avatar-color: var(--color-acento-secundario); width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--avatar-color); background: color-mix(in srgb, var(--avatar-color) 16%, transparent); text-transform: uppercase; letter-spacing: 0.02em; } /* ============================================================================= BARRA DE BÚSQUEDA — input con icono integrado y botón a la derecha, bordes suaves. Usada en Clientes, Empleados, Ventas. ============================================================================= */ .barra-busqueda { display: flex; gap: var(--espacio-3); align-items: center; } .barra-busqueda .campo-busqueda { flex: 1; position: relative; } .barra-busqueda .campo-busqueda input { padding-left: 38px; height: 46px; border-radius: var(--radio-md); } .barra-busqueda .icono-busqueda { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-texto-tenue); pointer-events: none; } .barra-busqueda .icono-busqueda svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================================= PANEL CON ILUSTRACIÓN — layout de dos columnas: contenido (formulario, estado vacío, etc.) a la izquierda y una ilustración grande sobre fondo de color a la derecha. Pensado para pantallas como "Abrir caja" o estados vacíos, donde una imagen ayuda a que la pantalla no se sienta como un simple formulario de admin. Uso:
...formulario/tarjeta...
============================================================================= */ .panel-ilustrado { display: flex; align-items: stretch; gap: var(--espacio-6); flex-wrap: wrap; } .panel-ilustrado-contenido { flex: 1 1 380px; min-width: 300px; } .panel-ilustrado-imagen { --panel-ilustrado-fondo: var(--color-secundario); flex: 1 1 320px; min-width: 260px; max-width: 480px; min-height: 320px; border-radius: var(--radio-lg); background: var(--panel-ilustrado-fondo); display: flex; align-items: center; justify-content: center; padding: var(--espacio-6); box-shadow: var(--sombra-md); overflow: hidden; } .panel-ilustrado-imagen img { max-width: 100%; max-height: 340px; width: auto; height: auto; object-fit: contain; } /* En pantallas angostas, la ilustración pasa abajo del formulario (o se puede ocultar del todo si el espacio no alcanza, ver clase abajo). */ @media (max-width: 860px) { .panel-ilustrado { flex-direction: column; } .panel-ilustrado-imagen { max-width: 100%; min-height: 220px; order: -1; } } /* Ilustración pequeña de acompañamiento para estados vacíos dentro de una tarjeta normal (ej. "No hay sesiones de caja abandonadas"), en vez del panel de dos columnas de arriba. */ .estado-vacio-ilustrado { display: flex; align-items: center; gap: var(--espacio-4); } .estado-vacio-ilustrado img { width: 72px; height: 72px; flex-shrink: 0; object-fit: contain; } /* ============================================================================= TARJETA BANCARIA estilizada — representa una cuenta bancaria como una "tarjeta de crédito" elegante en el módulo de Bancos. Degradado sutil en el color de marca, chip dorado, número parcialmente oculto. ============================================================================= */ .tarjeta-bancaria { position: relative; border-radius: var(--radio-lg); padding: var(--espacio-5); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; background: linear-gradient(135deg, var(--color-secundario) 0%, color-mix(in srgb, var(--color-primario) 70%, var(--color-secundario)) 100%); box-shadow: var(--sombra-md); overflow: hidden; } .tarjeta-bancaria::after { /* brillo diagonal sutil */ content: ""; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: rgba(255, 255, 255, 0.05); transform: rotate(20deg); pointer-events: none; } .tarjeta-bancaria-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); } .tarjeta-bancaria-banco { font-size: 16px; font-weight: 700; } .tarjeta-bancaria-chip { width: 38px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, #E8C887 0%, #B08D57 100%); flex-shrink: 0; } .tarjeta-bancaria-numero { font-family: var(--fuente-cuerpo); font-size: 17px; letter-spacing: 0.12em; font-weight: 600; } .tarjeta-bancaria-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espacio-3); } .tarjeta-bancaria-etiqueta { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; } .tarjeta-bancaria-valor { font-size: 13px; font-weight: 600; } .tarjeta-bancaria-saldo { font-size: 20px; font-weight: 700; } /* ============================================================================= RESPONSIVE MÓVIL — portal admin (≤ 820px) El sidebar fijo de 230px no cabe en un teléfono; se convierte en una barra horizontal desplazable en la parte superior, y el contenido pasa a ocupar todo el ancho. Pensado para que las cajeras puedan usar el portal desde el celular sin que el menú se coma la pantalla. ============================================================================= */ @media (max-width: 820px) { .app-shell { flex-direction: column; } .nav-lateral { width: 100%; flex-direction: column; padding: var(--espacio-3) var(--espacio-4); } .nav-marca { margin-bottom: var(--espacio-3); padding-bottom: var(--espacio-3); } /* La lista de enlaces pasa a fila horizontal con scroll lateral, así caben todos los módulos sin ocupar alto vertical. */ .nav-lista { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--espacio-2); -webkit-overflow-scrolling: touch; } .nav-lista li { flex-shrink: 0; } .nav-enlace { white-space: nowrap; margin-bottom: 0; padding: var(--espacio-2) var(--espacio-3); } .nav-enlace .badge-pedidos, .nav-enlace span { vertical-align: middle; } /* El botón de cerrar sesión deja de empujarse al fondo (no hay alto que llenar en una barra horizontal) y se pone junto a la marca. */ .nav-salir { margin-top: var(--espacio-3); padding-top: var(--espacio-3); } .contenido-principal { padding: var(--espacio-4) var(--espacio-4); max-width: 100%; } /* El encabezado (título + reloj/usuario) se apila en vez de repartirse a los extremos, para que el reloj no quede pegado al borde. */ .encabezado-pagina { flex-direction: column; align-items: flex-start; gap: var(--espacio-2); margin-bottom: var(--espacio-4); } /* Tablas anchas (Stock, Reportes) con scroll horizontal en vez de desbordar o encogerse ilegiblemente. */ .tabla-scroll-movil { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Pantallas muy pequeñas (≤ 480px): reducir un poco más los paddings. */ @media (max-width: 480px) { .contenido-principal { padding: var(--espacio-3) var(--espacio-3); } .tarjeta { padding: var(--espacio-4); } h1 { font-size: 22px; } }