/* ============================================================ Capa de componentes de la PWA — se apoya en tokens.css (--oh-*) Modo claro (arena). Mobile-first (390px). Targets táctiles ≥44px. Orden en : tokens.css → app.css → Tailwind CDN → tw.js ============================================================ */ /* ---- Base de página ---- */ body { margin: 0; background: var(--oh-bg); color: var(--oh-ink); font-family: var(--oh-font-texto); font-size: var(--oh-texto-base); -webkit-font-smoothing: antialiased; } ::selection { background: rgba(240, 175, 53, .35); } a { color: var(--oh-petroleo-700); text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(226, 154, 27, .55); } a:hover { color: var(--oh-ambar-600); } /* Foco visible SIEMPRE (teclado) */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--oh-anillo); } /* ---- Botones (.oh-btn base ≥44px, radio md, Space Grotesk 700) ---- */ .oh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--oh-esp-2); min-height: 52px; min-width: var(--oh-tap); padding: 0 var(--oh-esp-5); border: 0; border-radius: var(--oh-radio-md); font-family: var(--oh-font-display); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--oh-rapido) var(--oh-ease), color var(--oh-rapido) var(--oh-ease), border-color var(--oh-rapido) var(--oh-ease), box-shadow var(--oh-rapido) var(--oh-ease); } .oh-btn:focus-visible { outline: none; box-shadow: var(--oh-anillo); } .oh-btn-primario { background: var(--oh-accion); color: var(--oh-accion-ink); } .oh-btn-primario:hover:not(:disabled) { background: var(--oh-accion-hover); } .oh-btn-secundario { background: transparent; color: var(--oh-petroleo-800); border: 2px solid var(--oh-petroleo-800); } .oh-btn-secundario:hover:not(:disabled) { background: var(--oh-petroleo-50); } .oh-btn-peligro { min-height: 48px; background: var(--oh-peligro-600); color: #FFF6F2; font-size: 15px; } .oh-btn-peligro:hover:not(:disabled) { background: var(--oh-peligro-700); } /* Deshabilitado: arena, sin acción (aplica a cualquier variante) */ .oh-btn:disabled, .oh-btn[aria-disabled="true"] { background: var(--oh-arena-200); color: var(--oh-arena-600); border-color: transparent; cursor: not-allowed; box-shadow: none; } /* Ayuda: botón a lo ancho (formularios móviles) */ .oh-btn-bloque { width: 100%; } /* ---- Card contenedora (el borde sostiene el layout, sin sombra) ---- */ .oh-card { background: var(--oh-surface); border: 1px solid var(--oh-borde); border-radius: var(--oh-radio-lg); padding: var(--oh-esp-6); } /* ---- Campos de formulario ---- */ .oh-campo { display: block; margin-bottom: var(--oh-esp-4); } .oh-label { display: block; font-size: var(--oh-texto-sm); font-weight: 600; color: var(--oh-petroleo-700); margin-bottom: 6px; } .oh-pista { font-weight: 400; color: var(--oh-ink-3); } /* hint dentro del label, separado por "·" */ .oh-input { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; background: var(--oh-surface); color: var(--oh-ink); border: 1.5px solid rgba(11, 31, 39, .16); border-radius: var(--oh-radio-sm); font-family: var(--oh-font-texto); font-size: var(--oh-texto-base); transition: border-color var(--oh-rapido) var(--oh-ease), box-shadow var(--oh-rapido) var(--oh-ease); } .oh-input::placeholder { color: var(--oh-ink-3); } .oh-input:focus { outline: none; border-color: var(--oh-ambar-400); box-shadow: 0 0 0 3px rgba(240, 175, 53, .35); } .oh-input[aria-invalid="true"] { border-color: var(--oh-peligro-600); } textarea.oh-input { min-height: 64px; padding: 12px 14px; resize: vertical; } /* ---- Badges de estado (semáforo — nunca decorativo) ---- */ .oh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--oh-radio-pill); font-size: 12.5px; font-weight: 600; background: var(--oh-arena-200); color: var(--oh-arena-800); } .oh-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--oh-arena-600); } .oh-badge-exito { background: var(--oh-exito-100); color: var(--oh-exito-700); } .oh-badge-exito::before { background: var(--oh-exito-600); } .oh-badge-aviso { background: var(--oh-aviso-100); color: var(--oh-aviso-700); } .oh-badge-aviso::before { background: var(--oh-aviso-600); } .oh-badge-peligro { background: var(--oh-peligro-100); color: var(--oh-peligro-700); } .oh-badge-peligro::before { background: var(--oh-peligro-600); } .oh-badge-neutro { background: var(--oh-arena-200); color: var(--oh-arena-800); } .oh-badge-neutro::before { background: var(--oh-arena-600); } /* Info / en proceso (p.ej. VISITA_PROGRAMADA): petróleo, ni éxito ni alerta */ .oh-badge-info { background: var(--oh-petroleo-100); color: var(--oh-petroleo-700); } .oh-badge-info::before { background: var(--oh-petroleo-500); } /* ---- Chips de categoría (filtros, táctiles 44px) ---- */ .oh-chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--oh-tap); padding: 0 18px; border-radius: var(--oh-radio-pill); background: var(--oh-surface); border: 1.5px solid rgba(11, 31, 39, .14); color: var(--oh-petroleo-700); font-family: var(--oh-font-texto); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--oh-rapido) var(--oh-ease), color var(--oh-rapido) var(--oh-ease), border-color var(--oh-rapido) var(--oh-ease); } .oh-chip:hover { background: var(--oh-arena-100); } .oh-chip:focus-visible { outline: none; box-shadow: var(--oh-anillo); } .oh-chip-activo, .oh-chip-activo:hover { background: var(--oh-petroleo-800); border-color: var(--oh-petroleo-800); color: var(--oh-arena-100); } /* ---- Motivo del camino (estados vacíos/error: arco punteado + 2 puntos) ---- */ .oh-camino { position: relative; width: 210px; height: 64px; margin: 0 auto; overflow: hidden; /* solo asoma la mitad superior del arco */ } .oh-camino-arco { position: absolute; left: 0; right: 0; top: 8px; height: 120px; border: 3px dotted var(--oh-arena-400); border-radius: 50%; box-sizing: border-box; } /* Origen: punto petróleo (aquí estás) */ .oh-camino-origen { position: absolute; left: 10px; bottom: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--oh-petroleo-800); } /* Destino: punto ámbar con halo (a dónde vamos) */ .oh-camino-destino { position: absolute; right: 10px; bottom: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--oh-ambar-400); box-shadow: 0 0 0 6px rgba(240, 175, 53, .2); } /* ---- Toasts (fondo petróleo SIEMPRE; punto semáforo en tonos noche) ---- */ .oh-toasts { position: fixed; left: var(--oh-esp-4); right: var(--oh-esp-4); bottom: calc(var(--oh-esp-4) + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: var(--oh-esp-2); pointer-events: none; } .oh-toast { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; background: var(--oh-petroleo-950); color: var(--oh-noche-ink); border-radius: var(--oh-radio-md); padding: 13px 16px; box-shadow: var(--oh-sombra-3); font-size: 14px; pointer-events: auto; animation: ohSubir var(--oh-normal) var(--oh-ease); } .oh-toast::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; } .oh-toast-exito::before { background: var(--oh-noche-exito); } .oh-toast-aviso::before { background: var(--oh-noche-aviso); } .oh-toast-peligro::before { background: var(--oh-noche-peligro); } .oh-toast-msj { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* máx 1 línea */ .oh-toast-cerrar { display: grid; place-items: center; min-width: var(--oh-tap); min-height: var(--oh-tap); margin: -12px -14px -12px -6px; /* área táctil grande sin engordar el toast */ background: none; border: 0; color: var(--oh-noche-ink-3); font-size: 16px; cursor: pointer; } .oh-toast-saliendo { opacity: 0; transform: translateY(8px); transition: opacity var(--oh-normal) var(--oh-ease), transform var(--oh-normal) var(--oh-ease); } /* ---- Bottom-sheet (radio-xl arriba, scrim 55%, slide CSS) ---- */ .oh-sheet { position: fixed; inset: 0; z-index: 80; display: none; } .oh-sheet.oh-abierto { display: block; } .oh-sheet-fondo { position: absolute; inset: 0; background: rgba(11, 31, 39, .55); animation: ohAparecer var(--oh-normal) var(--oh-ease); } .oh-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--oh-surface); border-radius: var(--oh-radio-xl) var(--oh-radio-xl) 0 0; padding: 10px var(--oh-esp-4) calc(var(--oh-esp-4) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 32px rgba(11, 31, 39, .25); animation: ohSubir var(--oh-normal) var(--oh-ease); } .oh-sheet-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--oh-arena-300); margin: 0 auto 12px; } /* ---- Diálogo de confirmación (usa el sheet; botones ≥44px) ---- */ .oh-confirmar-msj { font-size: var(--oh-texto-md); margin: var(--oh-esp-2) 0 var(--oh-esp-4); } .oh-confirmar-botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oh-esp-2); } /* ---- Tour guiado: spotlight + burbuja + progreso ---- */ /* Capa que bloquea clics fuera del paso activo (el JS del tour la crea) */ .oh-tour-bloqueo { position: fixed; inset: 0; z-index: 70; } /* Anillo ámbar + oscurecimiento del resto vía sombra gigante */ .oh-spotlight { position: relative; z-index: 71; border-radius: var(--oh-radio-md); box-shadow: 0 0 0 4px rgba(240, 175, 53, .45), 0 0 0 2000px rgba(7, 20, 25, .78); } .oh-burbuja { position: fixed; z-index: 72; max-width: min(320px, calc(100vw - 32px)); background: var(--oh-surface); border-radius: 16px; padding: var(--oh-esp-4); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); } .oh-burbuja-flecha { position: absolute; width: 14px; height: 14px; background: var(--oh-surface); transform: rotate(45deg); } .oh-burbuja-titulo { font-family: var(--oh-font-display); font-weight: 600; font-size: 15px; margin: 0; } .oh-burbuja-texto { font-size: var(--oh-texto-sm); color: var(--oh-ink-2); line-height: 1.5; margin: 4px 0 0; } /* Progreso: puntos + barra + etiqueta ("Producto 2 de 3") */ .oh-tour-progreso { display: flex; align-items: center; gap: 6px; margin-top: var(--oh-esp-3); } .oh-tour-punto { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--oh-arena-400); box-sizing: border-box; } .oh-tour-punto-activo { background: var(--oh-ambar-400); border-color: var(--oh-ambar-400); } .oh-tour-etiqueta { margin-left: auto; font-size: var(--oh-texto-caption); color: var(--oh-arena-700); } .oh-tour-barra { height: 4px; border-radius: 2px; background: var(--oh-arena-200); margin-top: var(--oh-esp-2); overflow: hidden; } .oh-tour-barra-avance { height: 100%; border-radius: 2px; background: var(--oh-ambar-400); transition: width var(--oh-normal) var(--oh-ease); } /* Botón del tour (mín. 44px táctil, aunque compacto visualmente) */ .oh-btn-tour { display: inline-flex; align-items: center; justify-content: center; min-height: var(--oh-tap); padding: 0 var(--oh-esp-4); margin-top: var(--oh-esp-3); border: 0; border-radius: var(--oh-radio-sm); background: var(--oh-petroleo-800); color: var(--oh-arena-100); font-family: var(--oh-font-display); font-weight: 600; font-size: 13.5px; cursor: pointer; } .oh-btn-tour:focus-visible { outline: none; box-shadow: var(--oh-anillo); } /* ---- Skeleton de carga (misma silueta que el contenido real) ---- */ .oh-skeleton { background: linear-gradient(90deg, var(--oh-arena-200) 25%, var(--oh-arena-100) 50%, var(--oh-arena-200) 75%); background-size: 200% 100%; animation: ohShimmer 1.6s linear infinite; border-radius: 6px; } /* ---- Animaciones (solo CSS) ---- */ @keyframes ohPulse { 0% { box-shadow: 0 0 0 0 rgba(240, 175, 53, .5); } 70% { box-shadow: 0 0 0 12px rgba(240, 175, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 175, 53, 0); } } @keyframes ohShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes ohBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } @keyframes ohSubir { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes ohAparecer { from { opacity: 0; } to { opacity: 1; } } /* Respeto a usuarios con movimiento reducido */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }