/* ============================================================================= V17.0 :: tanda-v170-polish Estilos para: - UpdateFab omnipresente (modos compact/full + minimizado + nueva mas insistente) - Badge novedades nuevas en Menu (link a /sistema/novedades) - SelectorUnidad modo peso (kg/100g/g) - tabs grandes y claras ============================================================================= */ /* --------------------------------------------------------------------------- UpdateFab - V17.0 modos compact / full / minimizado --------------------------------------------------------------------------- */ /* Modo FULL (default - en menu/dashboards/reportes): grande y dominante */ html body .ufab.ufab-full { bottom: 22px !important; left: 22px !important; right: auto !important; top: auto !important; padding: 13px 20px !important; font-size: 13px !important; border-radius: 999px !important; } /* Modo COMPACT (en POS, cotizador, produccion, monitor): chico y a la derecha asi NO tapa el carrito ni los totales del POS. */ html body .ufab.ufab-compact { bottom: 14px !important; right: 14px !important; left: auto !important; top: auto !important; padding: 8px 12px !important; font-size: 11px !important; border-radius: 999px !important; z-index: 9999 !important; /* arriba de modales del POS */ opacity: 0.85; } html body .ufab.ufab-compact:hover { opacity: 1; } html body .ufab.ufab-compact .ufab-sub { display: none !important; /* solo titulo en compact */ } /* Modo MINIMIZADO (despues de doble click "ignorar 24hs"): solo icono pegado al borde, casi invisible pero accesible. */ html body .ufab.ufab-mini { padding: 6px 10px !important; font-size: 14px !important; opacity: 0.55 !important; background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; border-color: rgba(107,114,128,0.4) !important; animation: none !important; } html body .ufab.ufab-mini:hover { opacity: 1 !important; transform: scale(1.1) !important; } html body .ufab.ufab-mini .ufab-text { display: none !important; } /* MODO NUEVA - V17.0: refuerzo del pulse + glow naranja extra agresivo */ html body .ufab.ufab-nueva { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; border: 2px solid rgba(251,146,60,0.85) !important; color: #fff !important; animation: ufab-v170-attention 1.0s ease-in-out infinite !important; box-shadow: 0 12px 30px rgba(234,88,12,0.55), 0 0 0 0 rgba(234,88,12,0.45) !important; } @@keyframes ufab-v170-attention { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(234,88,12,0.55), 0 0 0 0 rgba(234,88,12,0.55); } 50% { transform: scale(1.06); box-shadow: 0 16px 38px rgba(234,88,12,0.65), 0 0 0 12px rgba(234,88,12,0.0); } } /* Modo NORMAL (sin novedad): pulse azul mas suave para que no canse */ html body .ufab.ufab-normal { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; border: 2px solid rgba(59,130,246,0.55) !important; color: #fff !important; animation: ufab-v170-soft 4s ease-in-out infinite !important; } @@keyframes ufab-v170-soft { 0%, 100% { box-shadow: 0 8px 22px rgba(37,99,235,0.40), 0 0 0 0 rgba(37,99,235,0.30); } 50% { box-shadow: 0 12px 30px rgba(37,99,235,0.55), 0 0 0 6px rgba(37,99,235,0.10); } } html body .ufab .ufab-icon { font-size: 18px !important; } html body .ufab.ufab-full .ufab-icon { font-size: 22px !important; } html body .ufab.ufab-compact .ufab-icon { font-size: 16px !important; } html body .ufab.ufab-mini .ufab-icon { font-size: 18px !important; } html body .ufab .ufab-text { display: flex !important; flex-direction: column !important; line-height: 1.05 !important; align-items: flex-start !important; } html body .ufab .ufab-text b { font-size: 13px !important; letter-spacing: 0.4px !important; } html body .ufab.ufab-full .ufab-text b { font-size: 14px !important; } html body .ufab .ufab-text .ufab-sub { display: block !important; font-size: 10px !important; opacity: 0.85 !important; font-weight: 500 !important; } /* Mobile: en POS sigue compact (no full!). En cualquier ruta, posicion segura. */ @@media (max-width: 768px) { html body .ufab.ufab-full { bottom: 76px !important; left: 12px !important; padding: 10px 14px !important; font-size: 12px !important; } html body .ufab.ufab-compact { bottom: 76px !important; right: 12px !important; padding: 7px 10px !important; } html body .ufab .ufab-text .ufab-sub { display: none !important; } } /* --------------------------------------------------------------------------- Badge "novedad nueva" en Menu.razor - acompañando link a /sistema/novedades --------------------------------------------------------------------------- */ .qa-side-nov-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; margin-left: 6px; box-shadow: 0 2px 6px rgba(234,88,12,0.5); animation: nov-badge-pulse 2s ease-in-out infinite; text-transform: uppercase; letter-spacing: 0.4px; } @@keyframes nov-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .qa-side-nov-badge::before { content: "🆕"; font-size: 10px; } /* --------------------------------------------------------------------------- SelectorUnidad - modo peso (V17.0 integrado en POS) El componente comparte estilos base, aca solo refinamos para modo peso. --------------------------------------------------------------------------- */ .selu-wrap { display: inline-flex; flex-direction: column; gap: 4px; } .selu-label { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .selu-tabs { display: inline-flex; gap: 4px; background: #f3f4f6; padding: 3px; border-radius: 8px; } .selu-tab { border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #374151; transition: all 0.15s ease; } .selu-tab:hover { background: rgba(255,255,255,0.7); } .selu-tab.selu-tab-on { background: #fff; color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .selu-tab-ico { font-size: 14px; line-height: 1; } .selu-tab-lbl { font-size: 12px; } .selu-compact .selu-tab { padding: 4px 8px; font-size: 11px; } .selu-compact .selu-tab-ico { font-size: 12px; } .selu-compact .selu-tab-lbl { font-size: 10px; } .selu-custom-input { margin-top: 4px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; width: 140px; }