/* ============================================================ NutriPaws — SISTEMA EDITORIAL COMPARTIDO «Editorial de Pelaje» Fuente de verdad visual para TODA la web (app, PawMeet, paywall, privacidad). Se enlaza DESPUÉS del CSS de cada página, así su :root gana por orden de carga y repinta la app entera sin reescribir cada regla. 100% vanilla. Fuentes: Young Serif + Instrument Sans (Google Fonts, cargadas en cada con display=swap). Reglas: papel plano (cero cristal/blur), verde bosque único acento, tipografía editorial. Mantiene claro + oscuro y no toca ninguna función: solo redefine variables y estilos visuales. ============================================================ */ /* ============================================================ 1. TOKENS — modo claro (papel) Incluye el «puente legado»: remapea las variables viejas de la app (--brand-green, --bg-color, --card-bg, --text-main, --glass-*, ...) a valores editoriales, para que los componentes existentes que ya usan esos tokens se repinten solos. ============================================================ */ :root { /* --- Paleta editorial base --- */ --papel: #ECEBE4; /* fondo claro: hueso frío gris-verde */ --pino: #14211A; /* verde noche: fondo oscuro / secciones */ --tinta: #161B16; /* texto principal sobre claro */ --piedra: #5B6157; /* texto secundario sobre claro */ --hueso: #EFEDE2; /* texto sobre oscuro / superficies claras */ --silueta:#22352A; /* verde apagado tone-on-tone */ --acento: #2E6B44; /* verde bosque: ÚNICO acento */ --acento-hover: #265A39; --acento-tenue: rgba(46, 107, 68, 0.10); --filete: rgba(46, 107, 68, 0.25); /* línea de filete editorial */ --hairline: rgba(22, 27, 22, 0.14); /* borde sutil sobre papel */ --gutter: 20px; --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Young Serif', Georgia, 'Times New Roman', serif; /* --- Puente legado → editorial (modo claro) --- */ --brand-green: var(--acento); --brand-green-600: var(--acento-hover); --brand-green-700: #1F4E31; --brand-green-glow: rgba(46, 107, 68, 0.28); --brand-blue: var(--tinta); --brand-blue-light: var(--silueta); --brand-blue-900: var(--pino); --bg-color: var(--papel); --card-bg: #FBFAF5; /* papel sólido (sin cristal) */ --text-main: var(--tinta); --text-muted: var(--piedra); --border-color: var(--hairline); --input-bg: #FBFAF5; /* sombras editoriales: mínimas, sin brillo verde */ --shadow: 0 12px 30px -18px rgba(22, 27, 22, 0.30); --shadow-sm: 0 2px 10px -6px rgba(22, 27, 22, 0.20); --shadow-md: 0 12px 30px -18px rgba(22, 27, 22, 0.28); --shadow-lg: 0 26px 60px -30px rgba(22, 27, 22, 0.36); --shadow-glow: 0 12px 28px -16px rgba(46, 107, 68, 0.35); /* cristal neutralizado a papel plano */ --glass-bg: #FBFAF5; --glass-border: var(--hairline); --glass-blur: none; --backdrop-blur: none; --glass-shadow: var(--shadow-md); } /* ============================================================ 2. TOKENS — modo oscuro editorial (pino) La landing solo tenía sección oscura; aquí se convierte en un modo oscuro completo, tone-on-tone verde noche. ============================================================ */ [data-theme="dark"] { --papel: #14211A; --tinta: #EFEDE2; --piedra: rgba(239, 237, 226, 0.66); --hueso: #EFEDE2; --acento: #57A578; /* verde lifteado: AA sobre pino */ --acento-hover: #6BBB8C; --acento-tenue: rgba(87, 165, 120, 0.14); --filete: rgba(239, 237, 226, 0.18); --hairline: rgba(239, 237, 226, 0.16); --brand-green: var(--acento); --brand-green-600: var(--acento-hover); --brand-green-700: #3E8B5A; --brand-green-glow: rgba(87, 165, 120, 0.30); --brand-blue: var(--hueso); --brand-blue-light: #C9D2CB; --brand-blue-900: #0E1813; --bg-color: #14211A; --card-bg: #1C2C23; /* panel pino lifteado, sólido */ --text-main: var(--hueso); --text-muted: rgba(239, 237, 226, 0.66); --border-color: var(--hairline); --input-bg: rgba(239, 237, 226, 0.06); --shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.55); --shadow-sm: 0 2px 12px -6px rgba(0, 0, 0, 0.5); --shadow-md: 0 16px 40px -20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.6); --glass-bg: #1C2C23; --glass-border: var(--hairline); --glass-shadow: var(--shadow-md); } /* ============================================================ 3. PAPEL PLANO — cero cristal en toda la app (decisión de diseño) Editorial = impreso en papel: ningún elemento lleva desenfoque. Apaga los 80+ backdrop-filter (con y sin token) de una vez. ============================================================ */ *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* El fondo-foto fijo del héroe viejo desaparece: la app es papel */ .hero-bg, .hero-overlay { display: none !important; } html { background: var(--bg-color); } body { background-color: var(--bg-color); color: var(--text-main); } /* ============================================================ 4. TIPOGRAFÍA EDITORIAL Young Serif es de un solo grosor (400): forzamos weight 400 en los títulos para que el navegador no sintetice una negrita fea. ============================================================ */ body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .logo { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em; line-height: 1.12; } /* Etiqueta small-caps editorial (opt-in) */ .eyebrow { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--piedra); } /* Filete: línea divisoria editorial (opt-in) */ .filete { border: 0; border-top: 1px solid var(--filete); margin: 0; } /* Enlace de texto subrayado en acento (opt-in) */ .tlink { color: var(--text-main); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--acento); font-weight: 500; } .tlink:hover { color: var(--acento); } /* Cabecera de sección con marca dibujada + etiqueta + h2 (opt-in) */ .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .sec-head .mark { height: 28px; width: auto; color: var(--acento); } .sec-head .eyebrow, .sec-head .label { margin-top: 10px; color: var(--piedra); } .sec-head h2 { margin-top: 14px; color: var(--text-main); } /* Índice numerado editorial (opt-in) — filetes, sin tarjetas */ .ed-index { list-style: none; margin: 0; padding: 0; } .ed-index li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.6rem; padding: 1.15rem 0; border-bottom: 1px solid var(--filete); align-items: baseline; } .ed-index li:first-child { border-top: 1px solid var(--filete); } .ed-index .num { font-family: var(--font-display); font-size: 1rem; color: var(--acento); } .ed-index h3 { color: var(--text-main); } .ed-index p { grid-column: 2; color: var(--piedra); } /* ============================================================ 5. MOVIMIENTO editorial (opt-in con .reveal / .sec-head) Patrón «visible por defecto»: los estados ocultos solo aplican si el JS confirma motion añadiendo html.motion. Sin JS o con reduced-motion, todo queda visible y quieto. ============================================================ */ html.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } html.motion .reveal.in { opacity: 1; transform: none; } html.motion .sec-head .mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease 0.1s; } html.motion .sec-head.in .mark path { stroke-dashoffset: 0; } /* Entrada editorial de vistas/tabs: un fade-up corto al cambiar, solo transform/opacity. Con reduced-motion queda quieto (abajo). */ @media (prefers-reduced-motion: no-preference) { .app-tab.active-tab, .view-section, .pricing-card { animation: edFadeUp 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } } @keyframes edFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .sec-head .mark path { stroke-dashoffset: 0 !important; } } /* ============================================================ 6. COMPONENTES DE APP (Bloque 1: shell) Ganan sobre styles.css por orden de carga. Usan tokens → se adaptan a claro/oscuro solos. Se evita !important donde el orden de carga basta, y se conserva el rojo inline del botón de dosis. ============================================================ */ /* --- Botones primarios: plano acento, sin gradiente ni brillo lima (sin !important: así el botón de dosis con rojo inline se respeta) --- */ .btn-primary, .pm-btn-retry, .btn-submit-form { background-image: none; background-color: var(--acento); color: var(--hueso); border: none; border-radius: 14px; box-shadow: none; font-family: var(--font-body); font-weight: 500; transition: transform 0.18s ease, background-color 0.18s ease; } .btn-primary:hover, .pm-btn-retry:hover, .btn-submit-form:hover { background-color: var(--acento-hover); background-position: 0 0; transform: translateY(-2px); box-shadow: none; } .btn-primary::after, .pm-btn-retry::after { content: none; display: none; } /* mata el shine */ .btn-primary:active { transform: translateY(1px) scale(0.985); } /* Botón secundario: contorno editorial (theme-scoped en styles.css → !important) */ .btn-secondary { background: transparent !important; color: var(--acento) !important; border: 1.5px solid var(--acento) !important; border-radius: 14px; backdrop-filter: none; font-family: var(--font-body); font-weight: 500; } .btn-secondary:hover { background: var(--acento-tenue) !important; border-color: var(--acento) !important; color: var(--acento) !important; transform: translateY(-2px); } /* Botón Google del login */ .btn-google { width: 100%; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--hairline); background: #FBFAF5; color: #1F2420; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.18s ease, border-color 0.18s ease; } .btn-google:hover { transform: translateY(-2px); border-color: var(--acento); } /* SOS: rojo intencional, editorial (plano) */ .btn-emergency { box-shadow: var(--shadow-sm); border-radius: 12px; } .btn-emergency:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* --- Tarjetas: papel plano, sin animación de entrada ni borde lima --- */ .card { border-radius: 18px; animation: none; } .card:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--filete); } /* --- Formularios editoriales: neutraliza los inline hardcodeados (glass oscuro + color:white) que hacían el texto invisible en claro. !important para ganar a los estilos inline. --- */ .view-section input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .view-section select, .view-section textarea, .card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .card select, .card textarea, .form-group input, .form-group select, .form-group textarea { background: var(--input-bg) !important; color: var(--text-main) !important; border: 1px solid var(--hairline) !important; border-radius: 12px; font-family: var(--font-body); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .view-section input:focus, .view-section select:focus, .view-section textarea:focus { outline: none; border-color: var(--acento) !important; box-shadow: 0 0 0 3px var(--acento-tenue) !important; } .form-group label { color: var(--text-main); font-weight: 500; } .view-section input::placeholder, .view-section textarea::placeholder, .card input::placeholder, .card textarea::placeholder { color: var(--piedra); opacity: 0.85; } /* --- Header + wordmark editorial (reemplaza el logo PNG azul+lima) --- */ .main-header { text-align: center; padding: 1.6rem var(--gutter) 0.4rem; } .ed-wordmark { font-family: var(--font-display); font-size: 2rem; color: var(--text-main); text-decoration: none; letter-spacing: -0.01em; display: inline-block; } /* --- Selector de idioma --- */ .lang-btn { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; color: var(--text-main) !important; border-radius: 12px; box-shadow: var(--shadow-sm); } .lang-btn:hover { background: var(--acento-tenue) !important; transform: translateY(-2px); } .lang-dropdown { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-md) !important; border-radius: 14px; } .lang-dropdown-option { color: var(--text-main) !important; border-radius: 10px; font-family: var(--font-body); } .lang-dropdown-option:hover { background: var(--acento-tenue) !important; } /* --- Menú de usuario --- */ .menu-trigger-btn { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; color: var(--text-main) !important; border-radius: 12px; } .user-dropdown-menu { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-md) !important; border-radius: 14px; } .dropdown-menu-item { color: var(--text-main) !important; font-family: var(--font-body); border-radius: 10px; } .dropdown-menu-item:hover { background: var(--acento-tenue) !important; } .dropdown-menu-item--muted { color: var(--piedra) !important; } .dropdown-menu-item--danger { color: #C0492E !important; } .trial-indicator { color: var(--piedra) !important; } /* --- Bottom nav: barra papel, activo por color acento (sin píldora lima) --- */ .bottom-bar { background: var(--card-bg) !important; border-top: 1px solid var(--hairline) !important; box-shadow: 0 -6px 24px -14px rgba(22, 27, 22, 0.28); } .bottom-nav-item { color: var(--text-muted) !important; font-family: var(--font-body); } .bottom-nav-item span { font-weight: 500; } .bottom-nav-item.pm-brand-btn { color: var(--acento) !important; } /* PawMeet: la estrella, siempre acento */ .bottom-nav-item.active { background: var(--acento) !important; color: var(--hueso) !important; box-shadow: none !important; border-radius: 14px; } .bottom-nav-item.active::before { display: none !important; } /* mata el círculo/glow lima */ .bottom-nav-item.active img { filter: invert(1) !important; opacity: 1 !important; } .bottom-nav-item.active svg, .bottom-nav-item.active span { color: var(--hueso) !important; } /* --- Toast: plano editorial --- */ .custom-toast { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-md) !important; color: var(--text-main) !important; } /* ============================================================ 7. DASHBOARD (Bloque 2): neutraliza fondos glass oscuros inline Los módulos son .card con background:linear-gradient(...rgba(15,23,42)...) inline. Se aplana a papel; el borde de acento (verde/rojo) se conserva como señal. Los campos de formulario ya los cubre el bloque 6. ============================================================ */ #view-dashboard .card[style*="linear-gradient"] { background: var(--card-bg) !important; } #pets-list-container > div[style*="rgba(15"] { background: var(--card-bg) !important; border-color: var(--filete) !important; } #dose-result-container, #dose-result-container-home { background: var(--input-bg) !important; } #profile-suggestion-panel { background: var(--input-bg) !important; } /* Encabezados de módulo coloreados inline: el verde pasa a acento; rojo (emergencia) y morado se mantienen como señal semántica. */ #view-dashboard h3[style*="var(--brand-green)"] { color: var(--acento) !important; } /* --- Escáner (clínica + dietas): superficies papel, acento unificado --- */ .scanner-category-toggle { background: var(--input-bg); border: 1px solid var(--hairline); } .scanner-category-btn.active { background: var(--acento); color: var(--hueso); box-shadow: none; } .scanner-type-card, .diet-widget-type-card { background: var(--input-bg); border: 1px solid var(--hairline); } .scanner-type-card:hover, .diet-widget-type-card:hover { background: var(--acento-tenue); border-color: var(--acento); } .scanner-type-card.active, .diet-widget-type-card.active { border-color: var(--acento) !important; background: var(--acento-tenue) !important; box-shadow: none !important; } .scanner-type-card.active svg, .scanner-type-card:hover svg, .diet-widget-type-card.active svg, .diet-widget-type-card:hover svg { color: var(--acento) !important; } .scanner-upload-area { background: var(--input-bg); border: 2px dashed var(--filete) !important; } .scanner-upload-area:hover { background: var(--acento-tenue); border-color: var(--acento) !important; } .scanner-results-card { background: var(--input-bg); border: 1px solid var(--hairline); border-left: 4px solid var(--acento) !important; } #sc-res-disclaimer, #dw-res-disclaimer { color: var(--piedra) !important; border-top-color: var(--filete) !important; } .scanner-rate-bar { background: var(--hairline); } .scanner-rate-progress-fill { background: var(--acento) !important; } .scanner-loading-spinner { border: 3px solid var(--acento-tenue) !important; border-top-color: var(--acento) !important; } .scanner-modal { background: var(--card-bg); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); } .scanner-pet-option:hover { background: var(--acento-tenue); } .scanner-pet-option.active { border-color: var(--acento); background: var(--acento-tenue); } /* Dietas: unifica el morado inline a acento */ #tab-dietas [style*="a78bfa"], #tab-dietas [style*="c4b5fd"] { color: var(--acento) !important; } /* --- Flujos (Bloque 3): volver, wizard, calculadora, calendario, modales --- */ .btn-back { background: transparent; border: 1.5px solid var(--hairline); color: var(--text-main); border-radius: 12px; font-family: var(--font-body); font-weight: 500; } .btn-back:hover { background: var(--acento-tenue); border-color: var(--acento); color: var(--acento); } /* Selects: opciones legibles en ambos temas */ .form-select--lg option, select option { background: var(--card-bg); color: var(--text-main); } /* Wizard: puntos y barra en acento (ya usan tokens) + avatar editorial */ .avatar-upload-img { border: 3px solid var(--hairline); } .avatar-upload-placeholder { background: var(--input-bg); border: 2px dashed var(--filete); color: var(--piedra); } .avatar-upload-label:hover .avatar-upload-placeholder { background: var(--acento-tenue); } #pet-extra-photo-btn { background: var(--acento-tenue) !important; border-color: var(--acento) !important; color: var(--acento) !important; } /* Calculadora: el plan es una sección oscura editorial (pino fijo), como el "Nuestro porqué" de la landing. Tone-on-tone adentro. */ .summary-card { background: #14211A !important; color: #EFEDE2; border: none !important; } .summary-card h2 { color: #EFEDE2; } .summary-card .stat-box { background: rgba(239, 237, 226, 0.07); border: 1px solid rgba(239, 237, 226, 0.14); box-shadow: none; } .summary-card .stat-box .label { color: rgba(239, 237, 226, 0.66); } .stat-box { background: var(--input-bg); border: 1px solid var(--hairline); box-shadow: none; } .main-stat .stat-value, #racion-total { font-family: var(--font-display); font-weight: 400; color: #57A578; text-shadow: none; } #racion-comidas, #racion-recomendacion { color: #EFEDE2 !important; font-family: var(--font-display); font-weight: 400 !important; } #racion-calorias { color: rgba(239, 237, 226, 0.66) !important; } #btn-recalculate { background: transparent !important; border: 1.5px solid #57A578 !important; color: #57A578 !important; } #btn-recalculate:hover { background: rgba(87, 165, 120, 0.14) !important; } #calc-guest-fields h2 { color: var(--acento) !important; } #calc-guest-fields { border-bottom-color: var(--filete) !important; } .warnings { background: rgba(192, 115, 46, 0.10); border-left-color: #C0732E; } /* Calendario: navegación y título */ #btn-prev-month, #btn-next-month { color: var(--text-main) !important; } #calendar-title-container { color: var(--acento) !important; } #calendar-month-year { font-family: var(--font-display); font-weight: 400; } /* Modal custom (confirmaciones, editar nombre): panel papel */ .custom-modal-overlay { background: rgba(10, 14, 11, 0.55); } .custom-modal-card { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-lg) !important; } .custom-modal-title { color: var(--text-main); font-family: var(--font-display); font-weight: 400; } .custom-modal-message { color: var(--piedra); } .custom-modal-input { background: var(--input-bg); border: 1.5px solid var(--hairline); color: var(--text-main); font-family: var(--font-body); } .custom-modal-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); } .custom-modal-btn { font-family: var(--font-body); } .custom-modal-btn--cancel { background: transparent; border: 1.5px solid var(--hairline); color: var(--piedra); } .custom-modal-btn--cancel:hover { background: var(--acento-tenue); color: var(--text-main); } .custom-modal-btn--confirm { background: var(--acento); color: var(--hueso); box-shadow: none; } .custom-modal-btn--confirm:hover { background: var(--acento-hover); box-shadow: none; } .custom-modal-icon--edit { background: var(--acento-tenue); color: var(--acento); } /* --- Pet cards (dashboard inicio) --- */ .pets-empty-state { background: var(--card-bg) !important; border: 2px dashed var(--filete) !important; border-radius: 18px; } .pets-empty-text, .pets-empty-subtext { color: var(--piedra) !important; } .pet-card { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-sm) !important; border-radius: 18px; } .pet-card-name { color: var(--acento) !important; } .pet-card-meta { color: var(--piedra) !important; } .pet-card-event { color: var(--text-main) !important; background: var(--input-bg) !important; border: 1px solid var(--hairline); border-radius: 10px; } .pet-card-event span { color: var(--acento) !important; } .pet-card-actions { border-top: 1px solid var(--filete) !important; } .pet-card-btn--diet { background: var(--acento) !important; color: var(--hueso) !important; } .pet-card-btn--agenda { background: transparent !important; border: 1.5px solid var(--acento) !important; color: var(--acento) !important; } .pet-card-btn--pdf { background: var(--input-bg) !important; border: 1px solid var(--hairline) !important; color: var(--piedra) !important; } .pet-card-btn--delete { background: transparent !important; border: 1px solid rgba(192, 73, 46, 0.4) !important; color: #C0492E !important; } .pet-card-btn--edit { flex: 0 0 auto; padding: 0.6rem 0.8rem; border-radius: 8px; background: transparent !important; border: 1px solid var(--acento) !important; color: var(--acento) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .pet-card-btn--edit:hover { background: var(--acento-tenue) !important; } .pet-avatar-img { border: 3px solid var(--hairline) !important; box-shadow: var(--shadow-sm) !important; } .pet-avatar-placeholder { background: var(--input-bg) !important; border: 2px dashed var(--filete) !important; color: var(--piedra) !important; } /* ============================================================ 8. PAWMEET (Bloque 4) — la estrella, dark editorial inmersivo pawmeet-app.html lleva data-theme="dark" fijo: la app vive en pino. (La página pública que la vende es pawmeet.html y NO carga este fichero: usa landing.css + pawmeet-landing.css.) Se apaga el look slate+lima+azul (incl. la sección "refresh 2026-08" de pawmeet.css) y todo pasa a acento único editorial. ============================================================ */ .pawmeet-body { background: #0E1813; /* pino profundo, sin glows */ color: var(--hueso); font-family: var(--font-body); /* Outfit ya no se carga */ } .pawmeet-app { background: var(--papel); /* #14211A en dark */ box-shadow: none; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); } /* Header */ .pm-header { background: var(--papel); border-bottom: 1px solid var(--filete); box-shadow: none; } .pm-brand { font-family: var(--font-display); font-weight: 400; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--hueso); color: var(--hueso); letter-spacing: -0.01em; } .pm-btn-back--labeled { background: transparent; border: 1.5px solid var(--acento); color: var(--acento); } .pm-btn-back--labeled:hover { background: var(--acento-tenue); color: var(--acento); box-shadow: none; } .pm-icon-btn { background: transparent; border: 1px solid var(--hairline); color: var(--piedra); } .pm-icon-btn:hover { background: var(--acento-tenue); color: var(--hueso); } /* Tarjeta swipe: el scrim sobre foto se queda (permitido); marco editorial */ .pm-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7); } .pm-card-title { font-family: var(--font-display); font-weight: 400; } .pm-badge { background: rgba(20, 33, 26, 0.55); border: 1px solid rgba(239, 237, 226, 0.28); color: var(--hueso); box-shadow: none; } .pm-badge--health { background: rgba(87, 165, 120, 0.30); border-color: rgba(87, 165, 120, 0.5); color: #DCEDE2; } .pm-badge--neutered { background: rgba(239, 237, 226, 0.16); border-color: rgba(239, 237, 226, 0.3); color: var(--hueso); } /* Like / reject: papel hueso con señal semántica */ .pm-action-btn { border: 1px solid var(--hairline); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6); } .pm-btn-reject { background: var(--hueso); color: #C0492E; } .pm-btn-like { background: var(--acento); color: var(--hueso); } .pm-btn-like:hover { box-shadow: 0 16px 32px -12px rgba(87, 165, 120, 0.55); } .pm-btn-reject:hover { box-shadow: 0 16px 32px -12px rgba(192, 73, 46, 0.45); } /* Bottom nav */ .pm-bottom-nav { background: var(--papel); border-top: 1px solid var(--filete); box-shadow: none; } .pm-nav-btn { color: var(--piedra); font-family: var(--font-body); } .pm-nav-btn.active { background: var(--acento); color: var(--hueso); box-shadow: none; } .pm-nav-btn:hover:not(.active) { color: var(--hueso); } .pm-nav-home { color: var(--acento); } .pm-nav-home:hover { color: var(--acento); background: var(--acento-tenue); } /* Chats y solicitudes */ .pm-chats-header h2 { color: var(--hueso); } .pm-chat-item { border-bottom: 1px solid var(--filete); } .pm-chat-item:hover { background: var(--acento-tenue); transform: none; } .pm-chat-avatar { background: var(--card-bg); border: 1px solid var(--hairline); } .pm-chat-name { color: var(--hueso); } .pm-chat-preview { color: var(--piedra); } .pm-state-message { color: var(--piedra); } .pm-state-message h3 { color: var(--hueso); } .pm-state-message .spinner { border: 3px solid var(--acento-tenue); border-top-color: var(--acento); } /* Sala de chat: burbujas editoriales (mías = acento, suyas = pino lifteado) */ .pm-chat-room { background: #0E1813; } .pm-chat-room-header { background: var(--papel); border-bottom: 1px solid var(--filete); } .pm-msg-mine { background: var(--acento); color: var(--hueso); box-shadow: none; } .pm-msg-theirs { background: var(--card-bg); border: 1px solid var(--hairline); color: var(--hueso); } .pm-chat-input-area { background: var(--papel); border-top: 1px solid var(--filete); } #pm-chat-input { background: var(--input-bg); border: 1px solid var(--hairline); color: var(--hueso); } #pm-chat-input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); } .pm-btn-send { background: var(--acento); color: var(--hueso); box-shadow: none; } .pm-btn-send:hover { background: var(--acento-hover); box-shadow: none; } /* Modales (setup, reporte, alertas): panel pino sólido, sin cristal */ .pawmeet-body .modal-overlay, .pawmeet-app .modal-overlay, .modal-overlay { background: rgba(5, 10, 8, 0.72); } .pawmeet-body .modal-content, .pawmeet-body .glass-panel, .pawmeet-app .modal-content, .pawmeet-app .glass-panel { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-lg) !important; } .pawmeet-body .custom-modal-overlay { background: rgba(5, 10, 8, 0.78); } .pawmeet-body .custom-modal-card { background: var(--card-bg); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); } .pawmeet-body .custom-modal-card h3 { color: var(--hueso); } .pawmeet-body .custom-modal-card p { color: var(--piedra); } /* Radio-cards del setup (personalidad/salud) */ .pawmeet-body .card-content { background: var(--input-bg); border-color: var(--hairline); color: var(--hueso); } .pawmeet-body .radio-card:hover .card-content { background: var(--acento-tenue); border-color: var(--acento); box-shadow: none; } .pawmeet-body .radio-card input:checked + .card-content { background: var(--acento-tenue); color: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-tenue); } .pm-location-row { background: var(--input-bg); border: 1px solid var(--hairline); } /* ============================================================ 9. PAYWALL (Bloque 5) — subscribe.html, dark editorial pino Apaga glows/particulas/lima/azul del subscribe.css viejo. ============================================================ */ body:has(.subscribe-container) { background: #0E1813; } .subscribe-container { color: var(--hueso); } .glow, .particle, #particles { display: none !important; } .btn-back-subscribe { background: transparent; border: 1.5px solid var(--acento); color: var(--acento); border-radius: 12px; } .btn-back-subscribe:hover { background: var(--acento-tenue); color: var(--acento); box-shadow: none; transform: translateY(-2px); } .subscribe-title { font-family: var(--font-display) !important; font-weight: 400 !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--hueso) !important; color: var(--hueso); } .pricing-card::before { display: none !important; } /* mata la franja degradada */ .subscribe-subtitle { color: var(--piedra); } .pricing-card { background: var(--card-bg) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-lg) !important; border-radius: 20px; } .plan-option-card { border: 2px solid var(--hairline); background: transparent; } .plan-option-card.active-monthly, .plan-option-card.active-lifetime { border-color: var(--acento); background: var(--acento-tenue); } .plan-label { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acento); font-weight: 500; } .plan-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--hueso); margin: 0.4rem 0; } .plan-price-suffix { font-family: var(--font-body); font-size: 0.8rem; color: var(--piedra); } .plan-desc { margin: 0; font-size: 0.75rem; color: var(--piedra); } .features-list li { color: var(--hueso); } .features-list .check svg { stroke: var(--acento) !important; } .payment-methods h3 { color: var(--piedra); } .btn-payment { font-family: var(--font-body); border-radius: 14px; } .btn-nowpayments { background: var(--acento); color: var(--hueso); box-shadow: none; } .btn-nowpayments:hover { background: var(--acento-hover); box-shadow: none; } .btn-card { background: transparent; border: 1.5px solid var(--hairline); color: var(--hueso); } .btn-card:hover { background: var(--acento-tenue); border-color: var(--acento); } .btn-paypal { background: #EFEDE2; color: #14211A; } .btn-paypal:hover { background: #E2DFD2; } .payment-badge { background: var(--acento); color: var(--hueso); } .payment-note { color: var(--piedra); } .payment-loading .spinner { border-color: var(--acento-tenue); border-top-color: var(--acento); } /* view-subscription (dentro de la app) */ #view-subscription .card { border: 1px solid var(--hairline) !important; } #view-subscription [style*="rgba(255,255,255,0.03)"] { background: var(--input-bg) !important; } /* --- Mostrar/ocultar contraseña --- */ .pw-wrap { position: relative; } .pw-wrap input { width: 100%; padding-right: 2.9rem !important; } .pw-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--piedra); cursor: pointer; padding: 0.35rem; display: flex; align-items: center; line-height: 0; border-radius: 8px; } .pw-toggle:hover { color: var(--acento); } /* --- Login editorial --- */ #view-login .card { padding: 2.6rem 1.8rem; } #auth-title { font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.15rem); margin-bottom: 0.6rem; } .auth-subtitle { color: var(--piedra); font-size: 1.05rem; margin: 0 auto 2rem; max-width: 34ch; } .login-divider { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0; color: var(--piedra); font-size: 0.9rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--filete); } .login-links { text-align: center; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .tlink-muted { color: var(--piedra); text-decoration-color: var(--filete); font-size: 0.9rem; }