/* MyTripSpeak - Estilos globales */ /* * SISTEMA DE TEMAS (v2) * El tema se controla SOLO con el atributo data-theme en : * o * Un script en el lo fija ANTES de pintar (lee localStorage, * y si no hay preferencia guardada, usa la del sistema operativo). * Así el botón 🌙/☀️ SIEMPRE gana — antes la media query del sistema * pisaba la clase manual y no podías volver a modo claro. */ :root { color-scheme: light; --primary: #1a73e8; --primary-dark: #1557b0; --success: #34a853; --success-light: #e6f4ea; --success-strong: #1d7a3e; --danger: #d93025; --danger-light: #fce8e6; --warning: #f29900; --warning-light: #fef7e0; --gray-light: #f1f3f4; --gray-medium: #dadce0; --gray-dark: #202124; --text-primary: #202124; --text-secondary: #5f6368; --bg-page: #f4f4f9; --bg-card: #ffffff; --border-radius: 8px; --shadow: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--bg-page); color: var(--text-primary); line-height: 1.6; font-size: 16px; } .container { max-width: 700px; margin: 0 auto; padding: 20px; padding-top: 30px; } /* Header */ h1, h2 { color: var(--primary); } h1 { font-size: 28px; margin-bottom: 8px; text-align: center; font-weight: 600; } .subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 32px; font-size: 14px; } /* Canvas visualizer */ #visualizer { width: 100%; height: 80px; background: linear-gradient(135deg, var(--gray-light) 0%, #e8e8e8 100%); border-radius: var(--border-radius); margin-bottom: 16px; display: none; box-shadow: var(--shadow); } /* Textarea */ #prompt_usuario { width: 100%; padding: 12px; margin-bottom: 16px; font-size: 15px; border: 1px solid var(--gray-medium); border-radius: var(--border-radius); resize: vertical; min-height: 100px; font-family: inherit; color: var(--text-primary); transition: border-color 0.2s; } #prompt_usuario:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1); } #prompt_usuario::placeholder { color: var(--text-secondary); } /* Buttons */ button { width: 100%; padding: 14px 16px; margin-bottom: 12px; font-size: 16px; font-weight: 600; border: none; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; text-align: center; letter-spacing: 0.3px; } button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } button:active { transform: translateY(0); } button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-mic { background-color: var(--primary); color: white; } .btn-mic:hover { background-color: var(--primary-dark); } .btn-recording { background-color: var(--danger); color: white; animation: pulse 1.5s infinite; } .btn-recording:hover { background-color: #c5221f; } #btn-enviar { background-color: var(--success); color: white; } #btn-enviar:hover { background-color: #1d7a3e; } /* Action buttons container (voice + send) */ .action-buttons { display: flex; gap: 10px; margin-bottom: 12px; } .action-buttons button { flex: 1; margin-bottom: 0; } /* Date picker section (collapsable) */ .date-picker-section { background: var(--bg-card); border: 1px solid var(--gray-medium); border-radius: var(--border-radius); padding: 12px 16px; margin-bottom: 16px; transition: all 0.2s; } .date-picker-section summary { cursor: pointer; font-weight: 600; color: var(--primary); font-size: 14px; user-select: none; } .date-picker-section summary:hover { color: var(--primary-dark); } .optional-tag { font-weight: 400; color: var(--text-secondary); font-size: 12px; margin-left: 4px; } .date-inputs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .date-field { flex: 1; min-width: 140px; } .date-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; } .date-field input[type="date"] { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid var(--gray-medium); border-radius: 6px; color: var(--text-primary); background: var(--bg-card); font-family: inherit; } .date-field input[type="date"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1); } /* Results container */ #resultados { margin-top: 24px; } .metric { background: linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, rgba(52, 168, 83, 0.08) 100%); padding: 16px; border-left: 4px solid var(--primary); border-radius: var(--border-radius); margin-bottom: 16px; font-weight: 600; color: var(--primary); font-size: 18px; } .hotel-info { background: var(--bg-card); padding: 12px 16px; border-radius: var(--border-radius); margin-bottom: 20px; border-left: 3px solid var(--success); font-size: 15px; } .hotel-info strong { color: var(--text-primary); } .card { background: var(--bg-card); border: 1px solid var(--gray-medium); padding: 16px; margin-bottom: 16px; border-radius: var(--border-radius); box-shadow: var(--shadow); transition: all 0.2s ease; overflow: hidden; /* para que la foto respete el border-radius */ } .card:hover { box-shadow: var(--shadow-md); } /* Foto del lugar (Google Places) */ .place-photo { width: calc(100% + 32px); /* compensar padding del card */ margin: -16px -16px 12px -16px; /* foto a sangre, sin padding */ height: 200px; object-fit: cover; display: block; background: var(--gray-light); /* fallback mientras carga */ } .card-title { margin: 0 0 8px 0; color: var(--text-primary); font-size: 16px; font-weight: 600; } .logistics-fallback { color: var(--text-secondary); margin: 5px 0 0 0; font-size: 13px; font-style: italic; } /* Restaurantes recomendados */ .restaurants { background: var(--warning-light); border-left: 4px solid var(--warning); border-radius: 0 var(--border-radius) var(--border-radius) 0; padding: 12px 14px; margin: 12px 0; } .restaurants-title { font-weight: 600; color: var(--text-primary); font-size: 13px; margin-bottom: 8px; } .restaurants-list { list-style: none; padding: 0; margin: 0; } .restaurant-item { padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-size: 13px; } .restaurant-item:last-child { border-bottom: none; } .restaurant-name { font-weight: 600; color: var(--text-primary); } .restaurant-meta { font-weight: 400; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; } .restaurant-details { color: var(--text-secondary); font-size: 12px; margin-top: 2px; } .card h4 { margin: 0 0 8px 0; color: var(--text-primary); font-size: 16px; font-weight: 600; } .card p { margin: 6px 0; font-size: 14px; color: var(--text-secondary); } .card p.cost-info { background: var(--danger-light); color: var(--danger); padding: 8px 12px; border-radius: 4px; font-weight: 600; margin-bottom: 12px; font-size: 14px; } .card p.cost-details { background: var(--gray-light); padding: 10px 12px; border-radius: 4px; font-size: 13px; color: var(--text-primary); font-style: italic; margin-bottom: 12px; } .logistics { background: var(--success-light); padding: 12px; border-left: 4px solid var(--success); border-radius: 0 var(--border-radius) var(--border-radius) 0; margin: 12px 0; font-size: 13px; color: var(--text-primary); } .maps-badge { display: inline-block; background-color: var(--success); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-bottom: 8px; } .logistics strong { color: var(--success-strong); } .logistics-item { margin: 4px 0; } iframe { width: 100%; border-radius: var(--border-radius); margin-top: 12px; border: none; box-shadow: var(--shadow); } .video-error { background: var(--warning-light); color: var(--warning); padding: 10px; border-radius: var(--border-radius); font-size: 13px; text-align: center; margin-top: 12px; } /* ===== Sprint 7: UI estilo TripGenie ===== */ /* Burbuja de consulta del usuario (estilo chat) */ .query-bubble { background: var(--primary); color: white; padding: 12px 16px; border-radius: 16px 16px 4px 16px; margin: 0 0 16px auto; max-width: 85%; width: fit-content; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow); white-space: pre-wrap; } /* Chips de refinamiento post-resultado */ .chips-section { background: var(--bg-card); border: 1px solid var(--gray-medium); border-radius: var(--border-radius); padding: 14px 16px; margin-top: 8px; } .chips-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--primary); background: transparent; color: var(--primary); border-radius: 999px; } .chip:hover { background: var(--primary); color: white; transform: none; box-shadow: var(--shadow); } /* Historial de viajes */ .history-section { background: var(--bg-card); border: 1px solid var(--gray-medium); border-radius: var(--border-radius); padding: 12px 16px; margin-bottom: 16px; } .history-section summary { cursor: pointer; font-weight: 600; color: var(--primary); font-size: 14px; user-select: none; } .history-section summary:hover { color: var(--primary-dark); } .history-empty { font-size: 13px; color: var(--text-secondary); margin-top: 10px; } .history-item { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--gray-light); cursor: pointer; } .history-item:last-child { border-bottom: none; } .history-item:hover .history-prompt { color: var(--primary); } .history-text { flex: 1; min-width: 0; } .history-prompt { font-size: 13px; font-weight: 600; color: var(--text-primary); } .history-date { font-size: 11px; color: var(--text-secondary); margin-top: 2px; } .history-del { width: 28px; height: 28px; flex: 0 0 auto; margin: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 400; line-height: 1; } .history-del:hover { background: var(--danger-light); color: var(--danger); transform: none; box-shadow: none; } /* ===== v2: Componentes nuevos ===== */ /* Fila de estadísticas del plan (días / costo / base) */ .stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .stat-pill { flex: 1; min-width: 110px; background: var(--bg-card); border: 1px solid var(--gray-medium); border-radius: var(--border-radius); padding: 12px 14px; text-align: center; box-shadow: var(--shadow); } .stat-value { font-size: 18px; font-weight: 700; color: var(--primary); } .stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } /* Tips del destino (moneda / clima / cultura) — estilo TripGenie */ .tips-card { background: var(--bg-card); border: 1px solid var(--gray-medium); border-left: 4px solid var(--primary); border-radius: var(--border-radius); padding: 14px 16px; margin-bottom: 16px; } .tips-title { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 10px; } .tip-item { display: flex; gap: 10px; padding: 6px 0; font-size: 13px; align-items: flex-start; } .tip-emoji { flex: 0 0 auto; font-size: 16px; } .tip-item strong { color: var(--text-primary); display: block; font-size: 12px; } .tip-item p { color: var(--text-secondary); margin: 0; line-height: 1.45; } /* Foto con badge del día encima */ .photo-wrap { position: relative; margin: -16px -16px 12px -16px; } .photo-wrap .place-photo { width: 100%; margin: 0; } .day-badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.65); color: white; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); } /* Video facade: thumbnail liviano que solo carga el iframe al click. 5 iframes de YouTube pesan ~3MB+ c/u; 5 thumbnails pesan ~20KB c/u. */ .video-facade { position: relative; width: 100%; height: 200px; padding: 0; margin: 12px 0 0 0; border-radius: var(--border-radius); overflow: hidden; background: #000; display: block; } .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .video-facade:hover { transform: none; } .video-facade:hover img { opacity: 1; } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(255, 0, 0, 0.9); color: white; font-size: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Sugerencias de inicio (estado vacío) */ .suggestions { background: var(--bg-card); border: 1px dashed var(--gray-medium); border-radius: var(--border-radius); padding: 18px 16px; text-align: center; } .suggestions-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; } .suggestion-chip { width: auto; margin: 4px; padding: 9px 14px; font-size: 13px; font-weight: 500; border: 1px solid var(--gray-medium); background: var(--bg-page); color: var(--text-primary); border-radius: 999px; } .suggestion-chip:hover { border-color: var(--primary); color: var(--primary); transform: none; } /* Acciones del resultado (compartir / PDF) */ .result-actions { display: flex; gap: 10px; margin: 4px 0 12px 0; } .action-chip { width: auto; flex: 1; margin: 0; padding: 10px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--gray-medium); background: var(--bg-card); color: var(--text-primary); border-radius: var(--border-radius); } .action-chip:hover { border-color: var(--primary); color: var(--primary); transform: none; } /* Banner de plan compartido */ .shared-banner { background: var(--success-light); border: 1px solid var(--success); color: var(--success-strong); padding: 10px 14px; border-radius: var(--border-radius); font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 14px; } /* Error messages */ .error-message { background: var(--danger-light); border: 1px solid var(--danger); color: var(--danger); padding: 16px; border-radius: var(--border-radius); margin-top: 16px; font-size: 14px; text-align: center; } .error-message.quota { background: var(--warning-light); border-color: var(--warning); color: var(--warning); } .error-title { font-weight: 600; margin-bottom: 4px; } .error-detail { font-size: 13px; margin-top: 6px; } /* Loading state */ .loading { opacity: 0.6; pointer-events: none; } /* Loading skeleton (placeholders mientras carga) */ .skeleton-card { background: var(--bg-card); border: 1px solid var(--gray-medium); padding: 16px; margin-bottom: 16px; border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; } .skeleton-img, .skeleton-line { background: linear-gradient( 90deg, var(--gray-light) 0%, rgba(255, 255, 255, 0.6) 50%, var(--gray-light) 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: 4px; } .skeleton-img { width: calc(100% + 32px); margin: -16px -16px 12px -16px; height: 180px; } .skeleton-line { height: 14px; margin-bottom: 8px; } .skeleton-line.title { height: 20px; width: 70%; } .skeleton-line.short { width: 50%; } .skeleton-line.medium { width: 80%; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-metric { background: linear-gradient( 90deg, var(--gray-light) 0%, rgba(255, 255, 255, 0.6) 50%, var(--gray-light) 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; height: 60px; border-radius: var(--border-radius); margin-bottom: 16px; } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 640px) { .container { padding: 16px; padding-top: 20px; } h1 { font-size: 24px; } button { padding: 12px 14px; font-size: 15px; } .card { padding: 12px; } .metric { font-size: 16px; } } /* * TEMA OSCURO — una sola fuente de verdad. * Nada de @media (prefers-color-scheme): esa media query aplicaba * el oscuro a nivel de sistema y el botón no podía revertirla (el bug). * Ahora JS decide el valor inicial y este selector hace el resto. */ :root[data-theme="dark"] { color-scheme: dark; --bg-page: #121212; --bg-card: #1e1e1e; --text-primary: #f1f3f4; --text-secondary: #c4c7c5; --gray-light: #2a2a2a; --gray-medium: #4a4a4a; /* Fondos tintados → tintes oscuros sutiles para que el texto claro se lea */ --success-light: rgba(52, 168, 83, 0.16); --warning-light: rgba(242, 153, 0, 0.18); --danger-light: rgba(217, 48, 37, 0.22); /* Acentos más brillantes para legibilidad sobre oscuro */ --primary: #4285f4; --success: #5fcb73; --success-strong: #7fd99a; --warning: #fbb040; --danger: #ef5350; } :root[data-theme="dark"] button:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode-toggle { position: fixed; top: 20px; right: 20px; background: var(--primary); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all 0.3s ease; z-index: 1000; } .dark-mode-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .dark-mode-toggle:active { transform: scale(0.95); } /* ===== Impresión / Guardar como PDF ===== El botón "🖨️ Guardar PDF" llama window.print(). Aquí ocultamos todo lo interactivo y dejamos solo el plan limpio. */ @media print { .dark-mode-toggle, .date-picker-section, #prompt_usuario, .action-buttons, .history-section, #visualizer, .chips-section, .result-actions, .video-facade, iframe, .suggestions { display: none !important; } :root, :root[data-theme="dark"] { --bg-page: #ffffff; --bg-card: #ffffff; --text-primary: #000000; --text-secondary: #444444; } body { background: white; } .card { page-break-inside: avoid; box-shadow: none; } .query-bubble { background: #eee; color: #000; box-shadow: none; } }