/* ============================================================ Sistema de diseño de "Encuentralo" -- Fase 1 del rediseño movil-first. Se activa con la clase encuentralo-app en (ver las 11 vistas encuentralo_*.ejs). Cargar DESPUES de /dashboard.css. TODO vive en tokens (custom properties) a proposito: nada de colores, tamaños de fuente, radios o duraciones "quemados" en las reglas de abajo -- asi que Fase 4 (tema oscuro, color de acento, tipografia, tamaño de texto, densidad, forma de tarjeta, animaciones) sera cuestion de reasignar estos --eq-* en tiempo real, sin tocar el resto del CSS. NO se toca dashboard.css ni ninguna otra pagina de la app -- este archivo solo se carga en las paginas publicas de Encuentralo. ============================================================ */ .encuentralo-app { /* ---- Color: marca + categorias (fijo por ahora, "color principal" de Fase 4 movera --eq-primary a lo que elija el usuario) ---- */ --eq-navy: #03102E; --eq-green: #6E930E; --eq-green-dark: #587509; --eq-white: #FFFFFF; --eq-cat-mascota: #6E930E; --eq-cat-familiar: #145A96; --eq-cat-objeto: #F3590A; --eq-cat-vehiculo: #0E8F8F; --eq-cat-otro: #6B7280; --eq-cat-perdido: #634086; /* naturaleza=perdido ("¿lo has perdido?") */ --eq-cat-hallazgo: #1A8F5A; /* naturaleza=encontrado */ --eq-primary: var(--eq-green); --eq-primary-dark: var(--eq-green-dark); --eq-secondary: var(--eq-navy); --eq-danger: #C0392B; /* ---- Superficie: tema claro por defecto (Fase 4 agrega [data-tema=oscuro] mas abajo reasignando este mismo bloque, ver seccion final) ---- */ --eq-bg: #F5F6FA; --eq-surface: #FFFFFF; --eq-surface-2: #EEF0F5; --eq-text: var(--eq-navy); --eq-text-muted: rgba(3, 16, 46, 0.58); --eq-border: rgba(3, 16, 46, 0.08); /* ---- Tipografia (Fase 4: --eq-font-body cambiara por eleccion del usuario entre Inter/Poppins/Nunito/Roboto/system) ---- */ --eq-font-heading: 'Fredoka', 'Montserrat', sans-serif; --eq-font-body: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --eq-scale: 1; /* Fase 4: "Pequeño/Normal/Grande" multiplica esto */ --eq-text-xs: calc(11px * var(--eq-scale)); --eq-text-sm: calc(13px * var(--eq-scale)); --eq-text-base: calc(15px * var(--eq-scale)); --eq-text-lg: calc(18px * var(--eq-scale)); --eq-text-xl: calc(22px * var(--eq-scale)); /* ---- Forma y espacio (Fase 4: --eq-radius-card cambia con "Compacto/ Redondeado/Muy redondeado"; --eq-density-* con la densidad) ---- */ --eq-radius-sm: 10px; --eq-radius-md: 16px; --eq-radius-lg: 22px; --eq-radius-pill: 999px; --eq-radius-card: 20px; --eq-density: 1; /* Fase 4: compacta=0.75 / normal=1 / comoda=1.25 */ --eq-space-1: calc(4px * var(--eq-density)); --eq-space-2: calc(8px * var(--eq-density)); --eq-space-3: calc(12px * var(--eq-density)); --eq-space-4: calc(16px * var(--eq-density)); --eq-space-5: calc(24px * var(--eq-density)); --eq-shadow-sm: 0 1px 3px rgba(3, 16, 46, 0.07), 0 1px 2px rgba(3, 16, 46, 0.05); --eq-shadow-md: 0 8px 24px -8px rgba(3, 16, 46, 0.18); --eq-shadow-lg: 0 16px 40px -12px rgba(3, 16, 46, 0.24); /* ---- Movimiento (Fase 4: "Animaciones reducidas/Sin animaciones" pone esto en un valor bajo/0; ya respeta prefers-reduced-motion mas abajo) ---- */ --eq-motion-fast: 0.15s; --eq-motion-base: 0.22s; --eq-easing: cubic-bezier(0.22, 1, 0.36, 1); --eq-nav-height: 64px; /* Redefine las variables de dashboard.css para que .panel/.btn/.badge/ inputs/etc hereden el sistema nuevo sin reescribirlos uno por uno. */ --bg: var(--eq-bg); --panel: var(--eq-surface); --panel-2: var(--eq-surface-2); --border: var(--eq-border); --text: var(--eq-text); --text-muted: var(--eq-text-muted); --primary: var(--eq-primary); --primary-dark: var(--eq-primary-dark); --green: var(--eq-green); --flash: var(--eq-cat-objeto); --panel-blur: 0px; --radius-sm: var(--eq-radius-sm); --radius-md: var(--eq-radius-md); --radius-lg: var(--eq-radius-lg); --shadow-sm: var(--eq-shadow-sm); --shadow-md: var(--eq-shadow-md); --shadow-glow-flash: var(--eq-shadow-md); background: var(--eq-bg); color: var(--eq-text); font-family: var(--eq-font-body); font-size: var(--eq-text-base); padding-bottom: calc(var(--eq-nav-height) + env(safe-area-inset-bottom, 0px) + 12px); } /* ---------- Tema oscuro real (no una inversion automatica): paleta propia para fondo/superficie/tarjeta/texto/texto secundario/bordes, conservando los mismos verdes/colores de categoria de marca para que se siga sintiendo "Encuentralo". Se activa poniendo data-tema="oscuro" en (ver window.EncuentraloApp.aplicarPreferencias en encuentralo-app.js); data-tema="auto" delega a prefers-color-scheme del sistema. ---------- */ .encuentralo-app[data-tema="oscuro"] { --eq-bg: #0B1220; --eq-surface: #141B2E; --eq-surface-2: #1B2338; --eq-text: #F2F4F8; --eq-text-muted: rgba(242, 244, 248, 0.62); --eq-border: rgba(255, 255, 255, 0.09); --eq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --eq-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { .encuentralo-app[data-tema="auto"] { --eq-bg: #0B1220; --eq-surface: #141B2E; --eq-surface-2: #1B2338; --eq-text: #F2F4F8; --eq-text-muted: rgba(242, 244, 248, 0.62); --eq-border: rgba(255, 255, 255, 0.09); --eq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --eq-shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.55); } } /* Le dice al navegador que pinte los controles NATIVOS (menu desplegable del , etc) con su tema oscuro propio -- sin esto, Windows/Android siguen pintando esas partes con fondo blanco por defecto aunque el resto de la pagina ya este oscura, dejando texto oscuro sobre fondo blanco (le gano al bug de contraste contrario: texto invisible por MUY poco contraste con el fondo real). */ .encuentralo-app[data-tema="oscuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { .encuentralo-app[data-tema="auto"] { color-scheme: dark; } } @media (prefers-reduced-motion: reduce) { .encuentralo-app, .encuentralo-app * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } .encuentralo-app h1, .encuentralo-app h2, .encuentralo-app h3, .encuentralo-app .titulo-eq { font-family: var(--eq-font-heading); color: var(--eq-text); font-weight: 600; letter-spacing: -0.01em; } .encuentralo-app .contenido { max-width: 480px; } @media (min-width: 900px) { .encuentralo-app .contenido { max-width: 720px; } } /* ---------- Topbar de marca (compartido con el resto de la app) ---------- */ .encuentralo-app .topbar { background: var(--eq-surface); border-bottom: 1px solid var(--eq-border); } .encuentralo-app .marca-header { color: var(--eq-navy); } .encuentralo-app .topbar nav a { color: var(--eq-text-muted); } .encuentralo-app .topbar nav a:hover { color: var(--eq-navy); } /* ---------- Encabezado tipo app (logo + saludo + reportar) ---------- */ .eq-header { display: flex; align-items: center; justify-content: space-between; gap: var(--eq-space-3); margin-bottom: var(--eq-space-4); } .eq-header .eq-saludo { font-size: var(--eq-text-lg); font-family: var(--eq-font-heading); font-weight: 600; margin: 0; } .eq-header .eq-subtitulo { color: var(--eq-text-muted); font-size: var(--eq-text-sm); margin: 2px 0 0; } .eq-header-acciones { display: flex; align-items: center; gap: var(--eq-space-2); } .eq-boton-icono { width: 42px; height: 42px; border-radius: var(--eq-radius-pill); background: var(--eq-surface); border: 1px solid var(--eq-border); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--eq-shadow-sm); cursor: pointer; text-decoration: none; color: var(--eq-navy); transition: transform var(--eq-motion-fast) var(--eq-easing); } .eq-boton-icono:active { transform: scale(0.94); } /* ---------- Buscador ---------- */ .eq-buscador-fila { display: flex; gap: var(--eq-space-2); margin-bottom: var(--eq-space-4); align-items: center; } .eq-buscador { flex: 1; display: flex; align-items: center; gap: var(--eq-space-2); background: var(--eq-surface); border: 1px solid var(--eq-border); border-radius: var(--eq-radius-pill); padding: 12px var(--eq-space-4); box-shadow: var(--eq-shadow-sm); } .eq-buscador input { border: none; outline: none; background: transparent; flex: 1; font-family: var(--eq-font-body); font-size: var(--eq-text-base); color: var(--eq-text); } .eq-buscador input::placeholder { color: var(--eq-text-muted); } .eq-buscador .eq-icono-buscar { color: var(--eq-text-muted); font-size: 16px; } .eq-filtro-boton { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--eq-radius-pill); background: var(--eq-surface); border: 1px solid var(--eq-border); box-shadow: var(--eq-shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; color: var(--eq-navy); } .eq-filtro-boton.activo { background: var(--eq-primary); border-color: var(--eq-primary); color: #fff; } /* ---------- Categorias (scroll horizontal) ---------- */ .eq-scroll-x { display: flex; gap: var(--eq-space-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } .eq-scroll-x::-webkit-scrollbar { display: none; } .eq-categoria { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; padding: var(--eq-space-2) var(--eq-space_1, 4px); min-width: 64px; } .eq-categoria-icono { width: 54px; height: 54px; border-radius: var(--eq-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--eq-surface); border: 1px solid var(--eq-border); box-shadow: var(--eq-shadow-sm); transition: transform var(--eq-motion-fast) var(--eq-easing), box-shadow var(--eq-motion-fast) var(--eq-easing); color: #fff; } .eq-categoria span.eq-categoria-etiqueta { font-size: var(--eq-text-xs); font-weight: 600; color: var(--eq-text-muted); text-align: center; } .eq-categoria:active .eq-categoria-icono { transform: scale(0.92); } .eq-categoria.activo .eq-categoria-icono { box-shadow: var(--eq-shadow-md); transform: translateY(-2px); } .eq-categoria.activo span.eq-categoria-etiqueta { color: var(--eq-text); } .eq-categoria[data-cat="mascota"] .eq-categoria-icono { background: var(--eq-cat-mascota); } .eq-categoria[data-cat="familiar"] .eq-categoria-icono { background: var(--eq-cat-familiar); } .eq-categoria[data-cat="objeto"] .eq-categoria-icono { background: var(--eq-cat-objeto); } .eq-categoria[data-cat="vehiculo"] .eq-categoria-icono { background: var(--eq-cat-vehiculo); } .eq-categoria[data-cat="otro"] .eq-categoria-icono { background: var(--eq-cat-otro); } .eq-categoria[data-cat=""] .eq-categoria-icono { background: var(--eq-navy); } /* ---------- Tabs (Recientes/Perdidos/Hallazgos/Cerca de mi) ---------- */ .eq-tabs { display: flex; gap: var(--eq-space-2); overflow-x: auto; scrollbar-width: none; } .eq-tabs::-webkit-scrollbar { display: none; } .eq-tab { flex-shrink: 0; padding: 9px 16px; border-radius: var(--eq-radius-pill); background: var(--eq-surface); border: 1px solid var(--eq-border); color: var(--eq-text-muted); font-weight: 700; font-size: var(--eq-text-sm); font-family: var(--eq-font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--eq-motion-fast) var(--eq-easing), color var(--eq-motion-fast) var(--eq-easing); } .eq-tab.activo { background: var(--eq-navy); border-color: var(--eq-navy); color: #fff; } .eq-tab[data-tab="perdido"].activo { background: var(--eq-cat-perdido); border-color: var(--eq-cat-perdido); } .eq-tab[data-tab="hallazgo"].activo { background: var(--eq-cat-hallazgo); border-color: var(--eq-cat-hallazgo); } /* ---------- Seccion con titulo + "Ver todo" ---------- */ .eq-seccion-titulo { display: flex; align-items: center; justify-content: space-between; margin: var(--eq-space-5) 0 var(--eq-space-3); } .eq-seccion-titulo h2 { margin: 0; font-size: var(--eq-text-lg); } .eq-seccion-titulo a { color: var(--eq-primary); font-size: var(--eq-text-sm); font-weight: 700; text-decoration: none; } /* ---------- Accesos rapidos (Reportar perdido / hallazgo / mis publicaciones) ---------- */ .eq-accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--eq-space-2); margin-bottom: var(--eq-space-4); } .eq-acceso { background: var(--eq-surface); border: 1px solid var(--eq-border); border-radius: var(--eq-radius-md); padding: var(--eq-space-3); text-decoration: none; color: var(--eq-text); box-shadow: var(--eq-shadow-sm); display: flex; flex-direction: column; gap: 6px; transition: transform var(--eq-motion-fast) var(--eq-easing); } .eq-acceso:active { transform: scale(0.97); } .eq-acceso-icono { width: 36px; height: 36px; border-radius: var(--eq-radius-pill); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; background: var(--eq-primary); } .eq-acceso.hallazgo .eq-acceso-icono { background: var(--eq-cat-hallazgo); } .eq-acceso.mias .eq-acceso-icono { background: var(--eq-navy); } .eq-acceso strong { font-size: var(--eq-text-sm); line-height: 1.2; } .eq-acceso small { color: var(--eq-text-muted); font-size: var(--eq-text-xs); } /* ---------- Paneles/badges/botones/inputs genericos (heredan de dashboard.css via las variables redefinidas arriba; solo se ajustan los que usan colores fijos en vez de var()) ---------- */ .encuentralo-app .panel { border: 1px solid var(--eq-border); border-radius: var(--eq-radius-card); } .encuentralo-app .muted { color: var(--eq-text-muted); } .encuentralo-app .error { color: var(--eq-danger); font-weight: 600; } .encuentralo-app .btn { background: var(--eq-primary); border-radius: var(--eq-radius-pill); font-family: var(--eq-font-body); font-weight: 700; padding: 13px 20px; box-shadow: var(--eq-shadow-sm); font-size: var(--eq-text-base); min-height: 44px; } .encuentralo-app .btn:hover { background: var(--eq-primary-dark); } .encuentralo-app .btn.secundario { background: var(--eq-surface); color: var(--eq-navy); border: 2px solid var(--eq-navy); box-shadow: none; } .encuentralo-app .btn.secundario:hover { background: var(--eq-surface-2); } .encuentralo-app .badge { font-family: var(--eq-font-body); font-weight: 700; border-radius: var(--eq-radius-pill); font-size: var(--eq-text-xs); } .encuentralo-app .badge.ok, .encuentralo-app .badge.activa { background: rgba(26,143,90,0.14); color: var(--eq-cat-hallazgo); } .encuentralo-app .badge.pendiente { background: rgba(99,64,134,0.14); color: var(--eq-cat-perdido); } .encuentralo-app .badge.mal, .encuentralo-app .badge.inactiva { background: rgba(192,57,43,0.12); color: var(--eq-danger); } .encuentralo-app input[type=text], .encuentralo-app input[type=number], .encuentralo-app input[type=email], .encuentralo-app input[type=password], .encuentralo-app input[type=date], .encuentralo-app select, .encuentralo-app textarea { background: var(--eq-surface); color: var(--eq-text); border: 2px solid var(--eq-border); border-radius: var(--eq-radius-sm); font-family: var(--eq-font-body); font-size: var(--eq-text-base); min-height: 44px; } .encuentralo-app textarea { min-height: 88px; } .encuentralo-app input:focus, .encuentralo-app select:focus, .encuentralo-app textarea:focus { outline: none; border-color: var(--eq-primary); box-shadow: 0 0 0 3px rgba(110,147,14,0.18); } .encuentralo-app .fila-form label { color: var(--eq-text-muted); font-weight: 600; } /* Chips de filtro (ciudad/barrio/detalle siguen existiendo, colapsados en un panel opcional -- ver "Mas filtros" en encuentralo.ejs). */ .encuentralo-app .filtro-barra { display: flex; flex-wrap: nowrap; gap: 10px; background: var(--eq-surface); border: 1px solid var(--eq-border); box-shadow: var(--eq-shadow-sm); } .encuentralo-app .filtro-barra label { flex: 1 1 0; min-width: 0; color: var(--eq-text-muted); font-weight: 600; font-size: var(--eq-text-xs); } .encuentralo-app .filtro-barra select { width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: var(--eq-text); background: var(--eq-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2303102E'/%3E%3C/svg%3E") no-repeat right 10px center; border: none; padding: 10px 26px 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--eq-text-sm); min-height: 40px; } /* La flecha del select va fija en navy (arriba) porque en tema claro el fondo del select siempre es claro -- en tema oscuro el fondo se invierte (--eq-surface-2 oscuro) y esa misma flecha navy quedaria casi invisible, asi que aca se cambia a una version clara. Mismo caso para las opciones nativas del