/* Las variables de color (--bg, --card, --text, etc.) ya NO viven aquí: ahora las define cada archivo de tema (css/tema-oscuro.css y css/tema-claro.css) según el atributo data-theme del . */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; background-color: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 16px 12px; } .app-container { width: 100%; max-width: 550px; display: flex; flex-direction: column; gap: 20px; } .tab-content { display: none; } .tab-content.active { display: flex; flex-direction: column; gap: 18px; } .card { background: var(--card); border: 1px solid var(--card-border); padding: 18px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } h2, h3 { margin-top: 0; color: var(--text); } .subtext { color: var(--subtext); font-size: 0.875rem; } .top-nav-row { display: flex; align-items: center; gap: 8px; } /* min-width:0 es necesario para que este hijo flex pueda encogerse por debajo de su contenido — sin esto, el overflow-x:auto del nav de abajo deja de funcionar dentro de una fila flex y empuja al botón de tema fuera de la vista en vez de dejarlo scrollear. */ .top-nav-row .top-nav-wrapper { flex: 1; min-width: 0; } .top-nav-wrapper { position: relative; } .nav-flecha { position: absolute; top: 0; bottom: 0; width: 28px; display: flex; align-items: center; font-size: 1.1rem; font-weight: bold; color: var(--subtext); cursor: pointer; z-index: 2; } .nav-flecha-izq { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(to right, var(--card) 40%, transparent); border-radius: 12px 0 0 12px; } .nav-flecha-der { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(to left, var(--card) 40%, transparent); border-radius: 0 12px 12px 0; } .top-nav { display: flex; gap: 8px; background: var(--card); padding: 6px; border-radius: 12px; border: 1px solid var(--card-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* oculta la barra de scroll en Firefox */ } .top-nav::-webkit-scrollbar { display: none; /* oculta la barra de scroll en Chrome/Android */ } .nav-btn { flex: 0 0 auto; min-width: 92px; white-space: nowrap; padding: 10px 14px; background: transparent; border: none; color: var(--subtext); font-size: 0.85rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .nav-btn.active { background: var(--accent-blue-activo); color: white; } .status-bar { font-size: 0.8rem; color: var(--subtext); text-align: center; padding: 4px; } .btn-icon-tema { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .segmented-control { display: flex; background: var(--input-bg); padding: 4px; border-radius: 10px; border: 1px solid var(--card-border); margin-bottom: 16px; } .toggle-btn { flex: 1; padding: 10px; border: none; background: transparent; color: var(--subtext); font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .toggle-btn.active { background: var(--card-border); color: var(--text); } #btn-tipo-entrada.active, #btn-dash-entradas.active { color: white !important; } #btn-tipo-entrada.active { background: var(--accent-blue-activo); color: white; } #btn-tipo-venta.active { background: var(--accent-green-activo); color: white; } #btn-dash-entradas.active { background: var(--accent-blue-activo); color: white; } #btn-dash-salidas.active { background: var(--accent-green-activo); color: white; } #btn-estado-activo.active { background: var(--accent-blue-activo); color: white; } #btn-estado-obsoleto.active { background: var(--accent-red-activo); color: white; } #btn-costos-fijos.active, #btn-costos-combustible.active { background: var(--accent-blue-activo); color: white; } .form-group { margin-bottom: 14px; display: flex; flex-direction: column; } .form-row { display: flex; gap: 12px; width: 100%; } .form-row .form-group { flex: 1; } .align-center { align-items: center; } label { display: block; font-size: 0.8rem; margin-bottom: 6px; color: var(--subtext); } input, select { width: 100%; padding: 11px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text); font-size: 0.95rem; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } input::placeholder { color: #64748b; opacity: 1; } .input-disabled { opacity: 0.6; background: var(--card-border); cursor: not-allowed; } .warning-text { color: var(--accent-yellow-texto); font-size: 0.75rem; margin-top: 4px; } .price-section-container { background: var(--input-bg); border: 1.5px dashed var(--accent-blue); border-radius: 12px; padding: 14px; margin: 16px 0; } .price-title { font-size: 0.85rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } /* Los inputs dentro del panel de precios necesitan un fondo DISTINTO al del panel (que ya usa --input-bg), si no, quedan del mismo color y se pierden por completo. */ .price-section-container input { background: var(--card); } .btn-primary { width: 100%; padding: 14px; border-radius: 10px; border: none; background: var(--accent-green-activo); color: white; font-weight: bold; font-size: 1rem; cursor: pointer; margin-top: 8px; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sale { background: var(--accent-blue); color: white; } .btn-nuevo-producto { background: var(--accent-orange); color: white; } .leyenda-nuevo-producto { color: var(--subtext); font-style: italic; font-size: 0.78rem; text-align: center; margin-top: 6px; } .btn-secondary-sm { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text); font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .metrics-grid { display: flex; gap: 12px; } .metric-card { flex: 1; display: flex; flex-direction: column; align-items: center; } .metric-title { font-size: 0.75rem; color: var(--subtext); } .metric-value { font-size: 1.25rem; font-weight: bold; margin-top: 4px; } .metric-value-lg { font-size: 1.7rem; } .metric-tabs { display: flex; align-items: center; gap: 4px; } .metric-tab-btn { padding: 3px 9px; border-radius: 6px; border: none; background: transparent; color: var(--subtext); font-size: 0.72rem; font-weight: 700; cursor: pointer; } .metric-tab-btn.active { background: var(--card-border); color: var(--text); } .accent-blue .metric-value { color: var(--accent-blue); } .accent-green .metric-value { color: var(--accent-green); } .card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .filter-bar { margin-bottom: 14px; } .checkbox-container { font-size: 0.85rem; color: var(--subtext); display: inline-flex; align-items: center; gap: 12px; cursor: pointer; } .checkbox-container input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .product-list { display: flex; flex-direction: column; gap: 10px; } .product-item { background: var(--input-bg); border: 1px solid var(--card-border); border-left: 5px solid var(--card-border); padding: 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; } .product-item.desabastecido { border-left-color: var(--accent-red); } .product-item.stock-bajo { border-left-color: var(--accent-yellow); } .product-item.stock-optimo { border-left-color: var(--accent-green); } .product-item.mov-entrada { border-left-color: var(--accent-blue); } .product-item.mov-salida { border-left-color: var(--accent-green); } .product-item.roi-critico { border-left-color: var(--accent-red); } .product-item.roi-medio { border-left-color: var(--accent-yellow); } .product-item.roi-bueno { border-left-color: var(--accent-green); } .product-item.mov-anulada { opacity: 0.55; border-left-color: var(--card-border); } .product-item.mov-anulada .prod-title, .product-item.mov-anulada .prod-sub { text-decoration: line-through; } .mov-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .badge-anulada { font-size: 0.7rem; font-weight: bold; color: var(--accent-red); border: 1px solid var(--accent-red); padding: 2px 6px; border-radius: 6px; white-space: nowrap; } .prod-info { display: flex; flex-direction: column; } .prod-title { font-weight: bold; font-size: 0.9rem; } .prod-sub { font-size: 0.75rem; color: var(--subtext); } .chart-container { position: relative; height: 220px; width: 100%; } .chart-view-select { width: auto; max-width: 150px; padding: 8px 10px; font-size: 0.8rem; } .chart-controls-row { display: flex; gap: 8px; align-items: center; } .chart-breadcrumb { font-size: 0.75rem; color: var(--subtext); margin-bottom: 8px; min-height: 18px; } .breadcrumb-item { cursor: pointer; transition: color 0.15s; } .breadcrumb-item:hover { color: var(--accent-blue); } .breadcrumb-item.active { color: var(--text); font-weight: 600; cursor: default; } .breadcrumb-sep { margin: 0 4px; color: var(--card-border); } .stock-filter-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .filter-col { display: flex; flex-direction: column; min-width: 0; /* mismo motivo que en .roi-negocio-card — ver ese comentario */ } .filter-col-buscar { flex: 1; min-width: 140px; } .filter-col-label { color: var(--subtext); font-size: 0.7rem; font-style: italic; margin-bottom: 4px; } #filter-tipo-empaque { max-width: 90px; } .umbral-inputs { display: flex; gap: 8px; } .umbral-inputs input { width: 64px; padding: 8px; font-size: 0.8rem; text-align: center; } .roi-resumen-row { display: flex; gap: 40px; margin-bottom: 16px; } .roi-umbral-label { line-height: 1.25; } .roi-negocio-card { flex: 1; /* min-width:0 es la corrección real del corte en móvil: sin esto, un hijo flex nunca se encoge más allá del tamaño de su contenido (aquí, el número con white-space:nowrap), y esa "resistencia" es lo que empujaba a toda la fila fuera de la tarjeta en pantallas angostas. Con esto, la etiqueta de texto (que sí puede partirse en 2 líneas) cede el espacio que el número necesita, en vez de forzar el desborde. */ min-width: 0; background: var(--input-bg); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .roi-negocio-label { font-size: 0.95rem; font-weight: 700; color: var(--text); } .roi-negocio-valor { font-size: 2rem; font-weight: 400; color: var(--accent-green); line-height: 1; white-space: nowrap; } .roi-producto-subtitulo { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 4px 0 10px; } /* ===== AJUSTES SOLO PARA PANTALLAS ANGOSTAS (móvil) ===== Primer @media del proyecto. El fix real del corte en Panorama ya está arriba (min-width:0, aplica siempre). Esto de aquí es solo pulido: menos espacio desperdiciado y tarjetas de Stock más parejas en pantallas angostas — en desktop no cambia nada. */ @media (max-width: 480px) { .roi-resumen-row { gap: 16px; /* antes 40px — con el ancho real de un celular, sobraba */ } .roi-negocio-valor { font-size: 1.5rem; /* antes 2rem — de paso da más margen extra */ } /* La tarjeta accent-blue trae "flex: 2" escrito directo en el HTML (style="flex: 2"), así que hace falta !important para ganarle en pantallas angostas — en accent-blue (Valor Total) le sobra espacio y en accent-green (Total en Bodega) le falta; repartido a la mitad, "Total en Bodega ⓘ" ya cabe en una sola línea y las 2 tarjetas quedan de la misma altura. */ .metrics-grid .metric-card { flex: 1 !important; } } .hidden { display: none !important; } .import-row { display: flex; gap: 8px; margin-bottom: 16px; } #dialogo-mensaje { white-space: pre-line; } /* ===== RELOJ DE CAPTURA + LIMPIAR CAMPOS ===== */ .log-timestamp-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px 0; } .log-timestamp-label { color: var(--subtext); font-size: 0.7rem; } /* ===== AUTOCOMPLETADO PROPIO (reemplaza , que no se puede estilizar) ===== */ .autocomplete-wrapper { position: relative; } .autocomplete-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .autocomplete-item { padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--card-border); font-size: 0.82rem; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background: var(--hover-overlay); } .autocomplete-item.highlighted { background: var(--accent-blue); color: white; } .autocomplete-item.highlighted .ac-item-main, .autocomplete-item.highlighted .ac-item-sub { color: white; } .hint-nuevo-valor { color: var(--subtext); font-size: 0.7rem; font-style: italic; margin-top: 3px; } .profit-preview-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: var(--subtext); font-size: 0.75rem; margin: 4px 0 14px 0; padding: 0 14px; /* mismo padding que .price-section-container, para que Ganancia/Margen alineen con esa tarjeta */ } .profit-preview-item strong { color: var(--accent-green); } .ac-item-main { font-weight: 600; color: var(--text); font-size: 0.82rem; } .ac-item-sub { color: var(--subtext); font-size: 0.7rem; margin-top: 2px; } .field-hint { color: var(--subtext); font-size: 0.72rem; margin-top: 4px; } /* ===== BOTÓN SECUNDARIO (usado en modal, ej. Cancelar) ===== */ .btn-secondary { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; color: var(--text); font-weight: 600; font-size: 0.95rem; cursor: pointer; margin-top: 8px; } .btn-secondary:hover { background: var(--hover-overlay); } /* Footer con links a Privacy/Terms en la pantalla de login — pedido por Google para la verificación de la app en producción (necesita ver el propósito de la app y los links legales antes del botón de Google). */ .auth-footer { margin-top: 14px; text-align: center; font-size: 0.72rem; display: flex; justify-content: center; gap: 14px; } .auth-footer a { color: var(--subtext); text-decoration: underline; } .auth-footer a:hover { color: var(--text); } /* ===== MODAL (faltaba por completo: sin esto, el editor no se comporta como modal) ===== */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal-content { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; } .modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } /* ===== TOOLTIPS INFORMATIVOS (ⓘ) ===== */ .info-icon { position: relative; display: inline-block; color: var(--subtext); font-size: 0.75rem; cursor: pointer; margin-left: 4px; vertical-align: middle; top: -2px; } .info-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 180px; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 12px; font-size: 0.72rem; font-weight: normal; color: var(--text); text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); z-index: 100; white-space: pre-line; } /* Cuando no cabe arriba, toggleInfoTip() en core.js agrega esta clase para mostrar el tooltip debajo del ícono en vez de encima. */ .info-tip.info-tip-abajo { bottom: auto; top: calc(100% + 8px); } /* Recupera el espacio entre tarjetas dentro de las sub-vistas de Costos Operativos (Costos Fijos / Combustible) — al envolverlas en un div propio perdieron el "gap" que antes venían heredando gratis de .tab-content. */ .vista-columna { display: flex; flex-direction: column; gap: 18px; } /* Bloque "vacío" de los buscadores en Analítica (CPP y ROI por Producto): antes de escribir algo, o cuando la búsqueda no encuentra nada. */ .placeholder-busqueda { text-align: center; color: var(--subtext); font-style: italic; font-size: 0.85rem; padding: 24px 12px; } /* Línea pequeña de "Valorización de Bodega" (CPP × stock) bajo el precio CPP */ .valor-bodega-cpp { font-size: 0.7rem; color: var(--accent-green); margin-top: 2px; } /* Semáforo de Proyección de Agotamiento — mismo patrón de colores que ROI */ .product-item.proy-critico { border-left-color: var(--accent-red); } .product-item.proy-medio { border-left-color: var(--accent-yellow); } .product-item.proy-bueno { border-left-color: var(--accent-green); }