/* WondarCore — código propio, no generado. Se puede modificar libremente. /es/myTrips (MyTripsPublicoController) — prototipo de prueba del rediseño de detalle de itinerario, diseño tomado 100% de Gonzalo/pruebas/itinerario-detalle-rediseno.html (con su CSS, Gonzalo/pruebas/itinerario-detalle-rediseno.css) y conectado a datos reales vía mytrips.js. Ver pendientes-mytrips.md para lo que quedó sin resolver de la migración. Modo oscuro (2026-08-20, pedido explícito: "el modo oscuro tiene muchas zonas blancas y mal delimitadas"): el prototipo original de Gonzalo no contempla modo oscuro (es HTML estático de ejemplo, siempre claro) — acá se pasan las superficies/texto/bordes NEUTROS a las variables reales del sitio (--color-fondo-superficie/--color-texto/--color-borde/etc., definidas en layout.css y que ya cambian solas con [data-theme="dark"] en ), para que el modo oscuro no quede con tarjetas blancas flotando sobre fondo negro. Los 4 colores de marca del diseño (violeta #7c3aed=destino, verde #16a34a=experiencia, rosa #db2777=actividad, navy #1e3650=acento primario/pestañas) se dejan literales a propósito en los dos modos — son los mismos colores fijos que usa el mapa (pines/leyenda, armados con hex literales desde mytrips.js, no leen variables CSS), así que cambiarlos solo acá los desincronizaría del mapa. */ .itd-main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 3.5rem 4rem; } .itd-breadcrumb { margin-bottom: 1rem; } /* ── HERO DE VIAJE ── */ .itd-hero { background: var(--color-fondo-superficie); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); margin-bottom: 1.5rem; } .itd-hero-cover { position: relative; height: 340px; } /* Mapa Leaflet del hero — único mapa de la página. z-index:0 (aunque sea el valor por default) es a propósito: arma su propio contexto de apilamiento para que los panes internos de Leaflet (marker/tooltip/popup, z-index 600-700) nunca compitan con el header sticky del sitio (z-index:100) al scrollear. El mapa en sí (tiles OSM, pines, franja de referencias) queda igual en los dos modos a propósito — es un mapa real de base clara, no forma parte del theming del resto de la página. */ .itd-hero-map { width: 100%; height: 100%; background: #e8e8ee; position: relative; z-index: 0; } .itd-hero-map .leaflet-control-container { display: none; } .itd-hero-map-pin { width: 26px; height: 26px; border-radius: 50%; background: #7c3aed; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; cursor: pointer; } .itd-hero-map-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0.65rem 0.9rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(2px); } .itd-map-tooltip-custom { background: none; border: none; box-shadow: none; padding: 0; opacity: 1 !important; } .itd-map-tooltip-custom::before { display: none; } .itd-map-card-tip { /* Bug real encontrado 2026-08-20 (Agustin, /myTrips): es un , default display:inline — el width de acá abajo nunca se aplicaba (los navegadores ignoran width/height en elementos inline no reemplazados), y .itd-map-card-tip-img (width:100% de ESTE padre) terminaba en 0px, así que el tooltip de Leaflet colapsaba a una tira angosta casi sin ancho. display:block lo arregla — confirmado con un repro real de Leaflet (getBoundingClientRect daba width:0 antes de este fix). */ display: block; width: 140px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); cursor: pointer; } .itd-map-card-tip-img { position: relative; width: 100%; height: 88px; background-size: cover; background-position: center; background-color: #e8e8ee; } .itd-map-card-tip-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%); } .itd-map-card-tip-name { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 6px; color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.2; /* Pedido de Agustin (2026-08-20, viaje de prueba con "Ciudad de Buenos Aires" cortado): sin esto hereda white-space:nowrap de .leaflet-tooltip (CSS propio de Leaflet) y el .itd-map-card-tip de arriba lo recorta con overflow:hidden — un nombre largo quedaba cortado a mitad de palabra en vez de bajar de renglón. Tope de 2 líneas (mismo criterio que .exp-desc en atraccion-publico.css) para que nunca se salga del área del degradé, aunque el nombre sea larguísimo. */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .itd-hero-edit-btn { /* order:3 solo lo manda al final de la fila (pegado al badge si el título es corto, ver reporte de Agustin 2026-08-20 comparando contra Gonzalo/pruebas/itinerario-detalle-rediseno.html) — margin-left:auto lo pega al borde derecho real de la fila, que es donde señaló la flecha. */ order: 3; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--color-fondo-superficie-alt); color: var(--color-texto-secundario); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .itd-hero-edit-btn:hover { background: var(--color-fondo-hover); } .itd-hero-body { padding: 0.9rem 1.75rem 1.1rem; } .itd-hero-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 0.45rem; } /* Corregido 2026-08-20: el título de texto plano "WONDAR IA" (.itd-wondaria-title) se sacó de acá adentro — quedaba duplicado con el badge itd-ai-badge, que ahora vive dentro de este cartel y hace ese mismo rol de encabezado. El cartel y su texto explicativo (itd-wondaria-texto) siguen igual que siempre. */ /* Pedido de Agustin (2026-08-21): "verde mate, mucho más suave y menos radiactivo" — antes usaba las variables compartidas --color-exito/--color-exito-fondo (verde saturado #16a34a de borde sobre un verde claro), las mismas que Pagado/Totalizadores en todo el resto de la página. A propósito NO se tocan esas variables acá (cambiarlas afectaría todo lo demás que las usa) — este cartel pasa a un verde salvia apagado, propio, con su equivalente en oscuro. */ /* Pedido de Agustin (2026-08-21, segunda vuelta): "bajale un 30% de intensidad" al verde salvia de arriba — cada color mezclado 30% hacia la superficie base (blanco en claro, #1e1e1e en oscuro, --color-fondo-superficie), no hacia gris genérico, para que siga leyéndose como el mismo verde pero más apagado, no como un verde distinto. */ .itd-wondaria-box { margin: 0 0 0.75rem; padding: 0.7rem 1.1rem; border-radius: 12px; background: #eff4ec; border: 1.5px solid #b1c3ab; } [data-theme="dark"] .itd-wondaria-box { background: #21271f; border-color: #495945; } .itd-wondaria-texto { font-size: 0.84rem; color: var(--color-texto); line-height: 1.4; } .itd-hero-title { /* flex:1 para que ocupe el espacio real disponible en la fila (antes se quedaba en su ancho intrínseco de , angosto, y el título largo quedaba cortado/scrolleado dentro de esa caja chica) — min-width:0 es necesario para que un input dentro de flex pueda achicarse por debajo de su ancho de contenido en vez de desbordar. Si el título es tan largo que ni así entra, corta con "…" en vez de scrollear el input, mismo criterio que el resto del sitio. */ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.8rem; font-weight: 800; color: var(--color-texto); margin: 0; border: none; background: none; font-family: inherit; padding: 0; order: 1; } .itd-hero-title:focus { outline: 2px solid #1e3650; outline-offset: 2px; border-radius: 4px; } /* Corregido 2026-08-20: el badge ya no vive en itd-hero-titlerow (se movió adentro de itd-wondaria-box, reemplazando su título "WONDAR IA" para no duplicarlo) — display/margin acá son para esa ubicación nueva, no para la fila del título. */ .itd-ai-badge { display: inline-flex; align-items: center; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f); padding: 4px 12px; border-radius: 50px; } .itd-hero-meta { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 0.75rem; overflow-x: auto; scrollbar-width: none; } .itd-hero-meta::-webkit-scrollbar { display: none; } .itd-meta-chip { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--color-texto-secundario); background: var(--color-fondo-superficie-alt); border-radius: 50px; padding: 6px 14px; } .itd-meta-chip svg { flex-shrink: 0; color: var(--color-texto-terciario); } .itd-meta-chip-sub { color: var(--color-texto-terciario); font-weight: 500; } .itd-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .itd-hero-map-actions { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; } .itd-map-export-btn { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: none; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: transform 0.15s, box-shadow 0.15s; } .itd-map-export-btn:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .itd-map-export-btn--pdf { color: #b91c1c; } .itd-map-export-btn--xls { color: #15803d; } .itd-hero-actions [data-tip]:hover::after { left: auto; right: 0; transform: none; } .itd-hero-map-actions [data-tip]:hover::after { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: none; } /* Botones .fp-btn-primary/-ghost/-danger (favoritos-publico.css) 20% más chicos, solo dentro de los modales de esta página — no toca el tamaño de esos mismos botones en el resto del sitio. */ .itd-add-modal .fp-btn-primary, .itd-add-modal .fp-btn-ghost, .itd-edit-item-modal .fp-btn-primary, .itd-edit-item-modal .fp-btn-ghost, .itd-gasto-modal-body .fp-btn-primary, .itd-gasto-modal-body .fp-btn-ghost, .itd-collab-modal-body .fp-btn-primary, .itd-collab-modal-body .fp-btn-ghost, .itd-pdf-modal-body .fp-btn-primary, .itd-pdf-modal-body .fp-btn-ghost { padding: 8px 17.6px; font-size: 0.68rem; min-height: 35.2px; } .fp-pdf-modal-check-row { margin-bottom: 0.9rem; } .fp-pdf-modal-check-row label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--color-texto); cursor: pointer; } .itd-collab-stack { display: flex; align-items: center; margin-left: auto; } .itd-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-fondo-superficie); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: -10px; overflow: hidden; object-fit: cover; } .itd-avatar:first-child { margin-left: 0; } .itd-avatar--add { background: var(--color-fondo-superficie-alt); color: var(--color-texto-secundario); border: 2px dashed var(--color-borde-fuerte); cursor: pointer; } .itd-avatar--sm { width: 28px; height: 28px; font-size: 0.7rem; border: none; margin-left: 0; } /* ── Botones genéricos ── */ .itd-btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 50px; padding: 10px 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; min-height: 44px; transition: opacity 0.15s, transform 0.1s, background 0.15s; } .itd-btn:disabled { opacity: 0.6; cursor: default; transform: none; } .itd-btn--primary { background: #1e3650; color: #fff; } .itd-btn--primary:hover { opacity: 0.88; transform: translateY(-1px); } .itd-btn--ghost { background: var(--color-fondo-superficie-alt); color: var(--color-texto); } .itd-btn--ghost:hover { background: var(--color-fondo-hover); } /* ── TABS ── */ .itd-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; overflow-x: auto; position: sticky; top: 0; background: var(--color-fondo); z-index: 20; padding: 0.6rem 0; } .itd-tab { display: flex; align-items: center; gap: 8px; background: var(--color-fondo-superficie); border: 1.5px solid #1e3650; border-radius: 14px; padding: 0.8rem 1.2rem; font-size: 0.88rem; font-weight: 700; color: #1e3650; cursor: pointer; white-space: nowrap; min-height: 44px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } [data-theme="dark"] .itd-tab { color: #7fb0ff; border-color: #7fb0ff; } .itd-tab svg { width: 16px; height: 16px; flex-shrink: 0; } .itd-tab:hover { background: var(--color-fondo-hover); } .itd-tab--active { background: #1e3650; color: #fff; } [data-theme="dark"] .itd-tab--active { background: #2c4c70; color: #fff; } .itd-tab--active:hover { background: #1e3650; } [data-theme="dark"] .itd-tab--active:hover { background: #2c4c70; } .itd-tab-badge { font-size: 0.68rem; font-weight: 700; color: #16a34a; background: rgba(22, 163, 74, 0.1); padding: 2px 8px; border-radius: 50px; } .itd-tab--active .itd-tab-badge { color: #fff; background: rgba(255, 255, 255, 0.18); } .itd-panel { display: block; } .itd-panel[hidden] { display: none; } .itd-timeline-col { position: relative; display: flex; flex-direction: column; gap: 2.25rem; } .itd-insert-btn { position: absolute; transform: translate(-50%, -50%); z-index: 6; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--color-borde-fuerte); background: var(--color-fondo-superficie); color: var(--color-texto-terciario); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s, border-style 0.15s, color 0.15s, background 0.15s; } .itd-insert-btn svg { width: 12px; height: 12px; } .itd-insert-btn:hover { border-color: #1e3650; border-style: solid; background: var(--color-fondo-superficie-alt); color: #1e3650; } /* Pedido explícito de Agustin (2026-08-21): "vencido" ya NO deshabilita el "+" (antes bloqueaba cargar algo retroactivo en un hueco ya pasado) — sigue siendo clickeable, solo con un tinte de aviso (ámbar) en vez del gris "deshabilitado" de antes. El aviso real y visible vive en el modal (#itd-add-modal-aviso-vencido), esto es solo la pista antes de hacer clic. */ .itd-insert-btn--vencido { border-color: #d97706; color: #d97706; } [data-theme="dark"] .itd-insert-btn--vencido { border-color: #f59e0b; color: #f59e0b; } .itd-insert-btn--vencido:hover { border-color: #d97706; border-style: solid; background: var(--color-fondo-superficie-alt); color: #d97706; } [data-theme="dark"] .itd-insert-btn--vencido:hover { border-color: #f59e0b; color: #f59e0b; } .itd-add-modal-aviso-vencido { display: flex; align-items: center; gap: 8px; margin: -0.4rem 0 1rem; padding: 0.6rem 0.85rem; background: rgba(217, 119, 6, 0.1); border: 1px solid rgba(217, 119, 6, 0.3); border-radius: 10px; color: #b45309; font-size: 0.85rem; font-weight: 600; } .itd-add-modal-aviso-vencido svg { flex-shrink: 0; } [data-theme="dark"] .itd-add-modal-aviso-vencido { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fbbf24; } .itd-main-add-btn { position: static; display: inline-flex; align-items: center; align-self: flex-start; justify-content: flex-start; width: auto; height: auto; box-sizing: border-box; background: none; border: none; border-radius: 999px; outline: none; padding: 0; margin: 0; cursor: pointer; text-align: left; font-family: inherit; transform: none; } .itd-main-add-btn:hover, .itd-main-add-btn:focus-visible { border: none; background: none; outline: none; color: inherit; } .itd-main-add-circle { width: 40px; height: 40px; border-radius: 50%; background: #1e3650; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(30, 54, 80, 0.35); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .itd-main-add-circle svg { width: 16px; height: 16px; } .itd-main-add-btn:hover .itd-main-add-circle { background: #14283d; box-shadow: 0 5px 16px rgba(30, 54, 80, 0.45); transform: scale(1.08); } .itd-main-add-label { margin-left: 8px; white-space: nowrap; font-size: 0.9rem; font-weight: 700; color: var(--color-texto); transition: color 0.15s; } .itd-main-add-btn:hover .itd-main-add-label { color: #1e3650; } [data-theme="dark"] .itd-main-add-btn:hover .itd-main-add-label { color: #7fb0ff; } .itd-main-add-btn.itd-insert-btn--vencido { opacity: 0.45; cursor: default; } .itd-main-add-btn.itd-insert-btn--vencido:hover .itd-main-add-circle { background: #1e3650; box-shadow: 0 3px 10px rgba(30, 54, 80, 0.35); transform: none; } .itd-main-add-btn.itd-insert-btn--vencido:hover .itd-main-add-label { color: var(--color-texto); } .itd-add-modal { max-width: 560px; } /* Bug real reportado por Agustin (2026-08-20, modal "Agregar colaborador" — el mismo wrapper se usa también en "Agregar al viaje"): sin position:relative acá, .search-dropdown (position:absolute, top:calc(100% + 6px), en layout.css) toma como referencia el ancestro position:relative más cercano, que terminaba siendo .fp-modal entero — el dropdown se posicionaba pegado casi al fondo del MODAL, no debajo del input, así que quedaba fuera de la vista hasta scrollear. */ .itd-add-modal-search-field { margin-bottom: 1.25rem; position: relative; } #itd-add-modal-chip-wrap { margin-bottom: 1.25rem; } .itd-add-modal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; } .itd-add-modal-filter { background: var(--color-fondo-superficie); border: 1.5px solid #1e3650; border-radius: 50px; padding: 0.45rem 0.85rem; font-size: 0.78rem; font-weight: 700; color: #1e3650; cursor: pointer; transition: background 0.15s, color 0.15s; } .itd-add-modal-filter:hover { background: var(--color-fondo-hover); } .itd-add-modal-filter--active { background: #1e3650; color: #fff; } .itd-add-modal-recs { margin-bottom: 1.25rem; } /* .ssp-* — "sugerencias" del modal "Agregar al viaje" (sugerida por puntaje / destinos recomendados), portado de Gonzalo/index.css (ahí es el resultado del buscador de la home) — nunca migrado a producción como componente propio, así que se define acá tal cual en vez de asumir que ya existe en el resto del sitio (`.search-result` de home.css es un componente parecido pero con clases propias, no intercambiable 1 a 1). */ .ssp-group + .ssp-group { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--color-borde-suave); } .ssp-row { display: flex; flex-direction: column; } .ssp-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 6px; border-radius: 10px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; transition: background 0.12s; } .ssp-result:hover { background: var(--color-fondo-superficie-alt); } .ssp-result-img { width: 48px; height: 48px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--color-fondo-superficie-alt); flex-shrink: 0; } .ssp-result-img--empty { background: linear-gradient(135deg, #ece9fb, #f3e8f5); } .ssp-result-info { flex: 1; min-width: 0; } .ssp-result-name { display: block; font-size: 0.85rem; font-weight: 700; color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssp-result-loc { display: block; font-size: 0.72rem; color: var(--color-texto-terciario); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssp-result-tipo { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; color: white; white-space: nowrap; } .ssp-result-tipo svg { width: 11px; height: 11px; } .ssp-result-tipo--destino { background: #7c3aed; } .ssp-result-tipo--experiencia { background: #16a34a; } .itd-add-modal-hint { margin: -0.85rem 0 1.25rem; font-size: 0.78rem; color: var(--color-texto-terciario); } #itd-add-modal-dates-experiencia { margin-bottom: 0.25rem; } .itd-edit-item-modal { max-width: 520px; } .itd-edit-section { background: var(--color-fondo-superficie-alt); border-radius: 14px; padding: 1rem 1.1rem 1.15rem; margin-bottom: 1.1rem; } .itd-edit-section-title { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 800; color: var(--color-texto); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem; } .itd-edit-section-title svg { width: 15px; height: 15px; color: #1e3650; flex-shrink: 0; } [data-theme="dark"] .itd-edit-section-title svg { color: #7fb0ff; } .itd-edit-section-opt { text-transform: none; font-weight: 600; color: var(--color-texto-terciario); letter-spacing: 0; font-size: 0.72rem; } .itd-edit-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fp-modal-precio-row { display: flex; align-items: center; gap: 12px; } .fp-modal-precio-row .fp-modal-input { flex: 1; margin-bottom: 0; } .itd-pagado-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--color-borde-fuerte); border-radius: 50px; padding: 0.72rem 1.05rem; font-size: 0.82rem; font-weight: 700; color: var(--color-texto-terciario); background: var(--color-fondo-superficie); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: border-color 0.15s, background 0.15s, color 0.15s; } .itd-pagado-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .itd-pagado-pill svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; } .itd-pagado-pill--checked { border-color: #16a34a; background: var(--color-exito-fondo); color: #16a34a; } .itd-pagado-pill--checked svg { opacity: 1; transform: scale(1); } .itd-pagado-pill input:focus-visible { outline: 2px solid #1e3650; outline-offset: 2px; } .itd-edit-section--row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .itd-edit-section--row .itd-edit-section-title { margin-bottom: 0.45rem; } .itd-edit-item-adjuntos-list { font-size: 0.85rem; color: var(--color-texto-terciario); } .itd-edit-item-adjuntos-list--filled { color: var(--color-texto); } .itd-edit-item-adjuntos-file { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .itd-edit-item-adjuntos-file:last-child { margin-bottom: 0; } .itd-edit-item-adjuntos-file a { color: inherit; text-decoration: none; } .itd-edit-item-adjuntos-file a:hover { text-decoration: underline; } .itd-edit-item-adjuntos-file button { border: none; background: none; color: #dc2626; cursor: pointer; display: flex; padding: 0; margin-left: 2px; } .itd-edit-item-adjuntos-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--color-fondo-superficie); color: var(--color-texto-secundario); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .itd-edit-item-adjuntos-btn:hover { background: var(--color-fondo-superficie-alt); color: #1e3650; } [data-theme="dark"] .itd-edit-item-adjuntos-btn:hover { color: #7fb0ff; } .itd-layout { display: block; } /* Bug real reportado por Agustin (2026-08-21): con el selector de vista, #itd-layout-timeline se oculta seteando el atributo `hidden` por JS — pero `.itd-layout { display:block }` de arriba es una regla de autor (este archivo), que le gana en la cascada a la regla `[hidden]{display:none}` del navegador (las reglas de autor siempre le ganan a las de user-agent, sin importar especificidad) — el atributo quedaba puesto pero sin efecto visual, timeline y lista se veían las dos juntas. Esta regla, más específica (clase + atributo) que la de arriba, fuerza el oculto real cuando corresponde. */ .itd-layout[hidden] { display: none; } /* ── SELECTOR DE VISTA (línea de tiempo / lista) + VISTA DE LISTA — pedido explícito de Agustin (2026-08-21, tercera vuelta). La lista es de SOLO LECTURA: mismos campos que el XLS exportable del viaje, sin ninguna acción de edición. ── */ .itd-itin-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .itd-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--color-fondo-superficie-alt); border: 1px solid var(--color-borde); } .itd-view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: none; border-radius: 9px; background: transparent; color: var(--color-texto-terciario); cursor: pointer; transition: background 0.15s, color 0.15s; } .itd-view-toggle-btn:hover { color: var(--color-texto); } .itd-view-toggle-btn--active { background: var(--color-fondo-superficie); color: #1e3650; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } [data-theme="dark"] .itd-view-toggle-btn--active { color: #7fb0ff; } .itd-list-view-note { margin-bottom: 1.1rem; } .itd-list-view-wrap { border: 1px solid var(--color-borde); border-radius: 14px; overflow: auto; background: var(--color-fondo-superficie); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .itd-list-view-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 0.85rem; } .itd-list-view-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap; background: var(--color-fondo-superficie-alt); color: var(--color-texto-terciario); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-borde); } .itd-list-view-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-borde-suave); color: var(--color-texto); vertical-align: middle; } .itd-list-view-table tbody tr:last-child td { border-bottom: none; } .itd-list-view-table tbody tr:hover td { background: var(--color-fondo-superficie-alt); } .itd-list-view-th--num, td.itd-list-view-th--num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .itd-list-view-comentario { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-texto-secundario); } .itd-list-view-nombre { font-weight: 700; white-space: nowrap; } .itd-list-view-nombre--anidado { font-weight: 500; padding-left: 2rem; position: relative; color: var(--color-texto-secundario); } .itd-list-view-nombre--anidado::before { content: '↳'; position: absolute; left: 1rem; color: var(--color-texto-terciario); } .itd-list-view-badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: #fff; } .itd-list-view-badge--destino { background: #7c3aed; } .itd-list-view-badge--experiencia { background: #16a34a; } .itd-list-view-badge--actividad { background: #db2777; } @media (max-width: 640px) { .itd-itin-toolbar { margin-bottom: 0.75rem; } } .itd-map-legend { display: flex; gap: 16px; font-size: 0.78rem; font-weight: 600; color: #555; } .itd-map-reset { background: #eef1f5; border: none; border-radius: 50px; color: #1e3650; font-size: 0.76rem; font-weight: 700; padding: 0.45rem 0.85rem; cursor: pointer; flex-shrink: 0; } .itd-map-reset:hover { background: #dde3ea; } .itd-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; } /* ── MAPA A PANTALLA COMPLETA — pedido explícito de Agustin (2026-08-21): en mobile el mapa compacto deja muy poco lugar a los pines/mini-cards. Botón solo visible en mobile (en desktop el mapa ya tiene más alto y zoom/pan cómodos con mouse — igual queda estático a propósito, ver mtRenderMapa). Overlay recibe .itd-hero-cover REPARENTADO entero (mtAbrirMapaFullscreen en mytrips.js) — nada de esto duplica el mapa ni crea una segunda instancia de Leaflet. */ .itd-map-expand-btn { display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: none; background: #eef1f5; color: #1e3650; cursor: pointer; flex-shrink: 0; } .itd-map-expand-btn:hover { background: #dde3ea; } .itd-map-fullscreen-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: #000; } .itd-map-fullscreen-overlay--open { display: block; } .itd-map-fullscreen-overlay .itd-hero-cover { width: 100%; height: 100%; } /* Los botones de exportar PDF/XLS (top-right, 12px) chocarían de posición con el botón de cerrar de acá abajo (mismo rincón) — no tienen sentido mientras se está mirando el mapa igual, se ocultan. El botón de expandir tampoco tiene sentido estando ya expandido. */ .itd-map-fullscreen-overlay .itd-hero-map-actions, .itd-map-fullscreen-overlay .itd-map-expand-btn { display: none; } .itd-map-fullscreen-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; color: #1a1a1e; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .itd-map-fullscreen-close:hover { background: #f1f1f4; } @media (max-width: 600px) { .itd-map-expand-btn { display: flex; } } /* ── LÍNEA DE TIEMPO — fecha | riel | contenido ── */ .itd-row { display: grid; grid-template-columns: 76px 24px 1fr; gap: 10px; } .itd-date { text-align: right; padding-top: 4px; } .itd-date-main { display: block; font-size: 0.86rem; font-weight: 700; color: var(--color-texto); line-height: 1.25; } .itd-date small { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-texto-terciario); margin-top: 2px; } .itd-row[data-tipo="destino"] .itd-date small { color: #7c3aed; } .itd-row[data-tipo="experiencia"] .itd-date small { color: #16a34a; } .itd-row[data-tipo="actividad"] .itd-date small { color: #db2777; } .itd-rail { position: relative; display: flex; flex-direction: column; align-items: center; } .itd-node { position: relative; z-index: 1; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--color-fondo); margin-top: 3px; flex-shrink: 0; } .itd-row[data-tipo="destino"] .itd-node { background: #7c3aed; box-shadow: 0 0 0 2.5px #7c3aed; } .itd-row[data-tipo="experiencia"] .itd-node { background: #16a34a; box-shadow: 0 0 0 2.5px #16a34a; } .itd-row[data-tipo="actividad"] .itd-node { background: #db2777; box-shadow: 0 0 0 2.5px #db2777; } .itd-line { position: absolute; top: 21px; bottom: -2.25rem; left: 50%; width: 2px; margin-left: -1px; background: var(--color-borde-fuerte); } .itd-row--last .itd-line--internal { bottom: 0; } .itd-line-marker { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-fondo); transform: translate(-50%, -50%); cursor: default; } .itd-line-marker--destino { background: #7c3aed; box-shadow: 0 0 0 1.5px #7c3aed; } .itd-line-marker--experiencia { background: #16a34a; box-shadow: 0 0 0 1.5px #16a34a; } .itd-line-marker--actividad { background: #db2777; box-shadow: 0 0 0 1.5px #db2777; } .itd-content { padding-bottom: 4px; min-width: 0; } .itd-item-card { position: relative; background: var(--color-fondo-superficie); border: 1px solid var(--color-borde-suave); border-radius: 16px; padding: 1.1rem 1.25rem; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); } .itd-item-card[draggable="true"] { cursor: grab; } .itd-item-card[draggable="true"]:active { cursor: grabbing; } .itd-item-card--dragging { opacity: 0.45; } .itd-item-card[data-drop-hint]::after { content: attr(data-drop-hint); position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); pointer-events: none; } .itd-item-card--dragover-before { box-shadow: 0 -3px 0 0 #1e3650; } .itd-item-card--dragover-before::after { top: -14px; background: #1e3650; } .itd-item-card--dragover-after { box-shadow: 0 3px 0 0 #1e3650; } .itd-item-card--dragover-after::after { bottom: -14px; background: #1e3650; } .itd-nested-group { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; } .itd-item-card--nested { margin: 0; padding: 0.85rem 1rem; box-shadow: none; background: var(--color-fondo-superficie-alt); border-radius: 12px; } /* Pedido explícito de Agustin (2026-08-21, segunda vuelta): el pedido original ("que los fondos de experiencias y actividades tengan colores que las representen") nunca se aplicó al FONDO real de la tarjeta — solo al cuadrito chico del ícono (.itd-item-thumb--actividad) y al badge chico (.itd-item-eyebrow--*), ninguno de los dos es "la tarjeta". data-tipo se agrega en mtNestedCardHtml/mtTopCardHtml (mytrips.js) — mismos 3 colores de marca que ya usan el badge/ fecha/nodo de la línea de tiempo, en versión pastel para no competir con el texto/la foto. */ .itd-item-card[data-tipo="destino"] { background: #f5f2fc; border-color: rgba(124, 58, 237, 0.22); } .itd-item-card[data-tipo="experiencia"] { background: #eff9f2; border-color: rgba(22, 163, 74, 0.22); } .itd-item-card[data-tipo="actividad"] { background: #fdedf4; border-color: rgba(219, 39, 119, 0.22); } [data-theme="dark"] .itd-item-card[data-tipo="destino"] { background: #221c31; border-color: rgba(124, 58, 237, 0.35); } [data-theme="dark"] .itd-item-card[data-tipo="experiencia"] { background: #17251c; border-color: rgba(22, 163, 74, 0.35); } [data-theme="dark"] .itd-item-card[data-tipo="actividad"] { background: #2b1a24; border-color: rgba(219, 39, 119, 0.35); } .itd-item-card--nested[data-tipo="experiencia"] { background: #eff9f2; } .itd-item-card--nested[data-tipo="actividad"] { background: #fdedf4; } [data-theme="dark"] .itd-item-card--nested[data-tipo="experiencia"] { background: #17251c; } [data-theme="dark"] .itd-item-card--nested[data-tipo="actividad"] { background: #2b1a24; } .itd-item-head { display: flex; align-items: flex-start; gap: 12px; } .itd-item-thumb { width: 84px; height: 84px; border-radius: 12px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--color-fondo-superficie-alt); display: flex; align-items: center; justify-content: center; color: var(--color-texto-terciario); } .itd-item-thumb--sm { width: 64px; height: 64px; border-radius: 10px; } /* Pedido explícito de Agustin (2026-08-21, segunda vuelta): la foto de la tarjeta ahora navega igual que el título (mtCardHeadHtml) — feedback visual al pasar el mouse para que se note que es clickeable, mismo criterio sutil que .itd-item-title-link (subrayado) de abajo. */ .itd-item-thumb-link { opacity: 1; transition: opacity 0.15s ease; } .itd-item-thumb-link:hover { opacity: 0.85; } /* Pedido de Agustin (2026-08-20): a 0.12 de opacidad, en un cuadrado grande y sólido (a diferencia de una píldora chica como .itd-item-eyebrow--actividad, donde el mismo 0.1 sí se lee bien), el rosa quedaba tan tenue que no se percibía como color — se veía casi gris/blanco. Subido a 0.2 en claro; en oscuro sube más (0.32, mismo criterio que .itd-item-eyebrow--actividad más abajo) para seguir leyéndose rosa sobre la superficie oscura de la tarjeta. */ .itd-item-thumb--actividad { background-color: rgba(219, 39, 119, 0.2); color: #db2777; } [data-theme="dark"] .itd-item-thumb--actividad { background-color: rgba(219, 39, 119, 0.32); color: #f472b6; } .itd-item-body { flex: 1; min-width: 0; } .itd-item-eyebrow { display: inline-flex; align-items: center; gap: 4px; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 3px 7px; border-radius: 5px; margin-bottom: 4px; } .itd-item-eyebrow svg { flex-shrink: 0; } .itd-item-eyebrow--destino { background: rgba(124, 58, 237, 0.1); color: #7c3aed; } .itd-item-eyebrow--experiencia { background: rgba(22, 163, 74, 0.1); color: #16a34a; } .itd-item-eyebrow--actividad { background: rgba(219, 39, 119, 0.1); color: #db2777; } [data-theme="dark"] .itd-item-eyebrow--destino { background: rgba(124, 58, 237, 0.22); color: #a685f0; } [data-theme="dark"] .itd-item-eyebrow--experiencia { background: rgba(22, 163, 74, 0.22); color: #4ade80; } [data-theme="dark"] .itd-item-eyebrow--actividad { background: rgba(219, 39, 119, 0.22); color: #f472b6; } .itd-item-eyebrow--sm { font-size: 0.58rem; padding: 2px 6px; } .itd-item-title { font-size: 1.2rem; font-weight: 800; color: var(--color-texto); margin: 0; line-height: 1.2; } .itd-item-title--sm { font-size: 0.98rem; } .itd-item-title-link { color: inherit; text-decoration: none; } .itd-item-title-link:hover { text-decoration: underline; } .itd-item-sub { font-size: 0.82rem; color: var(--color-texto-secundario); margin: 3px 0 0; } .itd-item-valor { font-size: 0.82rem; color: #1e3650; font-weight: 700; margin: 3px 0 0; } [data-theme="dark"] .itd-item-valor { color: #7fb0ff; } .itd-item-valor--aproximado { color: var(--color-texto-terciario); font-weight: 600; } .itd-item-hotel { margin: 6px 0 0; font-size: 0.78rem; color: var(--color-texto-secundario); } .itd-item-hotel-nombre { font-weight: 700; color: var(--color-texto); margin: 0; } .itd-item-hotel-horarios, .itd-item-hotel-precio { margin: 2px 0 0; } .itd-item-adjuntos-count { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--color-texto-terciario); margin: 4px 0 0; } .itd-item-maps-link { color: var(--color-texto-terciario); display: flex; } .itd-item-maps-link:hover { color: #1e3650; } .itd-item-comment { font-size: 0.78rem; color: var(--color-texto-secundario); line-height: 1.45; margin: 6px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .itd-item-card--nested .itd-item-comment { font-size: 0.74rem; } .itd-item-comment-more { display: none; margin: 2px 0 0; padding: 0; border: none; background: none; color: #1e3650; font-weight: 800; font-size: 0.8rem; letter-spacing: 1px; cursor: pointer; } [data-theme="dark"] .itd-item-comment-more { color: #7fb0ff; } .itd-item-comment-more:hover { text-decoration: underline; } .itd-item-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: flex-start; } .itd-item-action { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--color-fondo-superficie-alt); color: var(--color-texto-secundario); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .itd-item-action:hover { background: var(--color-fondo-hover); } .itd-item-action--danger:hover { background: var(--color-error-fondo); color: var(--color-error); } .itd-item-card--nested .itd-item-action { width: 32px; height: 32px; } .itd-item-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; } .itd-item-add-exp, .itd-item-add-custom { display: inline-flex; align-items: center; gap: 4px; background: var(--color-fondo-superficie); border: 1px solid var(--color-borde); border-radius: 50px; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.6rem 1.1rem; min-height: 40px; transition: background 0.15s, border-color 0.15s; } .itd-item-add-exp { color: #16a34a; } .itd-item-add-exp:hover { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.4); } /* Pedido de Agustin (2026-08-20): "Agregar actividad personalizada" pasa de gris neutro al rosa #db2777 ya definido para "actividad" en todo el resto de la página (ver paleta en el comentario del inicio del archivo, .itd-item-eyebrow--actividad, .itd-row[data-tipo="actividad"], etc.). */ .itd-item-add-custom { color: #db2777; } .itd-item-add-custom:hover { background: rgba(219, 39, 119, 0.1); border-color: rgba(219, 39, 119, 0.4); } [data-theme="dark"] .itd-item-add-custom { color: #f472b6; } /* ── PANEL PRESUPUESTO ── */ .itd-budget-card { position: relative; background: var(--color-fondo-superficie); border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); margin-bottom: 1.25rem; } .itd-card-fab { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 44px; height: 44px; min-height: 44px; border-radius: 50%; border: none; background: #1e3650; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(30, 54, 80, 0.32); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; } .itd-card-fab:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(30, 54, 80, 0.42); } .itd-card-fab svg { width: 20px; height: 20px; flex-shrink: 0; } .itd-budget-card--has-fab, .itd-share-card--has-fab { padding-bottom: 4.75rem; } .itd-budget-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1.1rem; } .itd-budget-card-title { font-size: 1.05rem; font-weight: 800; color: var(--color-texto); margin: 0 0 1rem; } .itd-budget-top .itd-budget-card-title { margin-bottom: 0; } /* ── PANEL GENERAL — pedido explícito de Agustin (2026-08-21): resumen del viaje (nombre, fechas, destinos/experiencias, notas, adjuntos), reusa las mismas .itd-budget-card de Presupuesto para verse consistente con el resto de la página en vez de inventar un componente nuevo. ── */ .itd-general-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .itd-general-header-info { min-width: 0; } .itd-general-header .itd-budget-card-title { margin-bottom: 0.3rem; } .itd-general-fechas { margin: 0; } .itd-general-meta { margin: 1rem 0 0; } /* Pedido explícito de Agustin (2026-08-21, segunda vuelta): notas editables directo en este tab (antes era un

de solo lectura) — mismo look que el resto de textareas del sitio (.fp-modal-textarea), sin el padding/borde propio de tarjeta porque ya vive dentro de una. */ .itd-general-notas-input { width: 100%; resize: vertical; } .itd-general-notas-input:disabled { opacity: 0.6; cursor: not-allowed; } .itd-totales-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0.5rem 0; border-bottom: 1px solid var(--color-borde); font-size: 0.88rem; color: var(--color-texto-secundario); } .itd-totales-row--final { margin-top: 0.3rem; border-bottom: none; border-top: 1.5px solid var(--color-borde-fuerte); padding-top: 0.75rem; font-size: 1rem; font-weight: 800; color: var(--color-texto); } .itd-totales-row--final span:last-child { font-size: 1.15rem; color: #1e3650; } [data-theme="dark"] .itd-totales-row--final span:last-child { color: #7fb0ff; } .itd-totales-row--toggle { border: none; background: none; width: 100%; text-align: left; font: inherit; cursor: pointer; color: inherit; } .itd-totales-row--toggle:hover { color: var(--color-texto); } .itd-totales-row-label { display: flex; align-items: center; gap: 6px; } .itd-totales-chevron { flex-shrink: 0; color: var(--color-texto-terciario); transition: transform 0.15s; } .itd-totales-row--toggle[aria-expanded="true"] .itd-totales-chevron { transform: rotate(90deg); } .itd-totales-detail { padding: 0 0 0.5rem 1.4rem; display: flex; flex-direction: column; gap: 4px; } .itd-totales-detail[hidden] { display: none; } .itd-totales-detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--color-texto-terciario); } .itd-totales-detail-row span:last-child { color: var(--color-texto-secundario); font-weight: 600; } .itd-totales-detail-empty { font-size: 0.82rem; color: var(--color-texto-terciario); padding: 0.15rem 0; } .itd-gastos-list { margin-top: 1rem; } .itd-gasto-row { display: flex; align-items: center; gap: 12px; padding: 0.75rem 0; border-bottom: 1px solid var(--color-borde-suave); } .itd-gasto-row:last-child { border-bottom: none; } .itd-gasto-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .itd-gasto-row-monto { font-size: 0.95rem; font-weight: 800; color: var(--color-texto); } .itd-gasto-row-notas { font-size: 0.82rem; color: var(--color-texto-terciario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .itd-gasto-row-badge { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: #d97706; background: #fff7ed; padding: 3px 10px; border-radius: 50px; } [data-theme="dark"] .itd-gasto-row-badge { color: var(--color-alerta-fuerte); background: var(--color-alerta-fondo); } .itd-gasto-row-badge--pagado { color: #16a34a; background: #f0fdf4; } [data-theme="dark"] .itd-gasto-row-badge--pagado { color: var(--color-exito-fuerte); background: var(--color-exito-fondo); } .itd-gasto-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .itd-gasto-row-delete, .itd-gasto-row-edit { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--color-fondo-superficie-alt); color: var(--color-texto-terciario); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .itd-gasto-row-delete:hover { background: var(--color-error-fondo); color: var(--color-error); } .itd-gasto-row-edit:hover { background: var(--color-fondo-hover); color: #1e3650; } [data-theme="dark"] .itd-gasto-row-edit:hover { color: #7fb0ff; } .itd-budget-bar { height: 10px; background: var(--color-fondo-superficie-alt); border-radius: 50px; overflow: hidden; margin: 1.1rem 0 0.3rem; } .itd-budget-bar-fill { height: 100%; background: #16a34a; border-radius: 50px; } /* Pedido de Agustin (2026-08-20): "0" a la izquierda y el total del viaje a la derecha, para que la barra de arriba tenga una escala de referencia (antes no quedaba claro contra qué se mide el relleno verde). El de la izquierda es siempre "EUR 0,00" fijo; el de la derecha se actualiza junto con el ancho del relleno (mismo dato: t.totalFinal). */ .itd-budget-bar-legend { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 600; color: var(--color-texto-terciario); margin-bottom: 0.85rem; } .itd-budget-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .itd-budget-stat { border-radius: 12px; padding: 0.9rem 1rem; } .itd-budget-stat--ok { background: var(--color-exito-fondo); } .itd-budget-stat--pending { background: var(--color-alerta-fondo); } /* Pedido explícito de Agustin (2026-08-21, segunda vuelta): stat "Gastado hasta el momento" del tab General — es solo informativo (ni positivo ni negativo), así que no usa el verde de "Pagado" ni el naranja de "Por pagar", un gris neutro a tono con el resto de tarjetas de la página. */ .itd-budget-stat--neutral { background: var(--color-fondo-superficie-alt, #f3f4f6); } .itd-budget-stat-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--color-texto-terciario); margin-bottom: 2px; } .itd-budget-stat--ok .itd-budget-stat-value { color: var(--color-exito-fuerte); } .itd-budget-stat--pending .itd-budget-stat-value { color: var(--color-alerta-fuerte); } .itd-budget-stat-value { font-size: 1.15rem; font-weight: 800; } /* ── PANEL COMPARTIR ── */ .itd-share-card { position: relative; background: var(--color-fondo-superficie); border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); margin-bottom: 1.25rem; } .itd-share-title { font-size: 0.95rem; font-weight: 700; color: var(--color-texto); margin: 0 0 0.9rem; } .itd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0.75rem 0; border-bottom: 1px solid var(--color-borde-suave); cursor: pointer; } .itd-switch-row:last-child { border-bottom: none; } .itd-switch-row strong { display: block; font-size: 0.9rem; color: var(--color-texto); } .itd-switch-sub { display: block; font-size: 0.78rem; color: var(--color-texto-terciario); margin-top: 2px; } .itd-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .itd-switch input { opacity: 0; width: 0; height: 0; } .itd-switch-track { position: absolute; inset: 0; background: var(--color-borde-fuerte); border-radius: 50px; transition: background 0.15s; } .itd-switch-track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .itd-switch input:checked + .itd-switch-track { background: #1e3650; } [data-theme="dark"] .itd-switch input:checked + .itd-switch-track { background: #4d7ba8; } .itd-switch input:checked + .itd-switch-track::before { transform: translateX(18px); } .itd-switch input:disabled + .itd-switch-track { opacity: 0.45; cursor: not-allowed; } .itd-select { width: 100%; box-sizing: border-box; border: 1px solid var(--color-borde-fuerte); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.9rem; font-family: inherit; background: var(--color-fondo-superficie); color: var(--color-texto); } .itd-share-link-row { display: flex; align-items: center; gap: 8px; padding: 0 0 0.85rem; flex-wrap: wrap; } .itd-share-link-row .fp-modal-input { flex: 1; min-width: 0; color: var(--color-texto-secundario); background: var(--color-fondo-superficie-alt); } .itd-share-link-row .itd-btn { flex-shrink: 0; } .itd-share-sub { font-size: 0.82rem; color: var(--color-texto-terciario); margin: 0 0 0.9rem; line-height: 1.4; } /* Bug real reportado por Agustin (2026-08-21): desde que cada fila de colaborador puede traer "Hacer administrador"/"Quitar" (ver mytrips.js), la fila se volvió más ancha/alta y el "+" del FAB (.itd-card-fab, abajo a la derecha de la tarjeta) terminaba pisándola — confirmado con un repro real: colisión horizontal Y vertical. padding-right reserva el carril del FAB para que ninguna fila invada esa columna, sin importar cuántos botones tenga. */ .itd-share-colab-list { padding-right: 4.5rem; } .itd-share-colab-list:empty::before { content: attr(data-empty-label); display: block; font-size: 0.85rem; color: var(--color-texto-terciario); padding: 0.5rem 0; } .itd-share-colab-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 0.65rem 0; border-bottom: 1px solid var(--color-borde-suave); } .itd-share-colab-row:last-child { border-bottom: none; } .itd-share-colab-row .itd-avatar { border: none; flex-shrink: 0; } .itd-share-colab-nombre { font-size: 0.9rem; font-weight: 700; color: var(--color-texto); flex: 1; } .itd-share-colab-badge { font-size: 0.7rem; font-weight: 700; color: var(--color-texto-secundario); background: var(--color-fondo-superficie-alt); padding: 3px 10px; border-radius: 50px; flex-shrink: 0; cursor: default; } /* Pedido de Agustin (2026-08-21): "Administrador"/"Colaborador" no explicaba la diferencia real entre los dos roles — tooltip con el detalle real (mismo texto que la nota del modal de invitar). Mismo criterio de wrap multilínea que .rank-seal[data-tip] (layout.css): el tooltip base del sitio es nowrap de una línea, acá el texto es largo. */ .itd-share-colab-badge[data-tip]:hover::after { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; transform: none; white-space: normal; width: max-content; max-width: 220px; text-align: left; line-height: 1.35; } .itd-share-colab-editar { border: none; background: none; color: var(--color-texto-terciario); font-size: 0.78rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .itd-share-colab-editar:hover { color: #1e3650; text-decoration: underline; } [data-theme="dark"] .itd-share-colab-editar:hover { color: #7fb0ff; } .itd-share-colab-quitar { border: none; background: none; color: var(--color-texto-terciario); font-size: 0.78rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .itd-share-colab-quitar:hover { color: var(--color-error); text-decoration: underline; } .itd-share-agencia-links { display: flex; gap: 6px; flex-shrink: 0; } .itd-share-agencia-link { font-size: 0.72rem; font-weight: 700; color: #1e3650; background: #eef1f5; padding: 3px 10px; border-radius: 50px; text-decoration: none; } [data-theme="dark"] .itd-share-agencia-link { color: #7fb0ff; background: var(--color-fondo-superficie-alt); } .itd-collab-sugeridos { display: flex; flex-direction: column; gap: 4px; margin: 0.75rem 0 1.1rem; } .itd-collab-sugerido { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-borde-suave); border-radius: 12px; background: var(--color-fondo-superficie); padding: 0.55rem 0.75rem; font-size: 0.88rem; font-weight: 600; color: var(--color-texto); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; width: 100%; } .itd-collab-sugerido:hover { background: var(--color-fondo-superficie-alt); border-color: var(--color-borde-fuerte); } .itd-collab-sugerido .itd-avatar { width: 30px; height: 30px; font-size: 0.8rem; flex-shrink: 0; border: none; margin-left: 0; } /* ── PANEL COMUNIDAD ── */ .itd-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; } .itd-subtab { background: var(--color-fondo-superficie); border: 1.5px solid #1e3650; border-radius: 50px; padding: 0.5rem 0.95rem; font-size: 0.8rem; font-weight: 700; color: #1e3650; cursor: pointer; min-height: 38px; transition: background 0.15s, color 0.15s; } [data-theme="dark"] .itd-subtab { color: #7fb0ff; border-color: #7fb0ff; } .itd-subtab:hover { background: var(--color-fondo-hover); } .itd-subtab--active { background: #1e3650; border-color: #1e3650; color: #fff; } [data-theme="dark"] .itd-subtab--active { background: #2c4c70; border-color: #2c4c70; color: #fff; } .itd-subpanel[hidden] { display: none; } .itd-sugg-list { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; } .itd-sugg-card { display: flex; gap: 12px; border: 1px solid var(--color-borde-suave); border-radius: 14px; padding: 0.9rem 1rem; background: var(--color-fondo-superficie); } .itd-sugg-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--color-fondo-superficie-alt); } .itd-sugg-info { flex: 1; min-width: 0; } .itd-sugg-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .itd-sugg-titulo { font-weight: 800; font-size: 0.95rem; color: var(--color-texto); } .itd-sugg-estado { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; border-radius: 50px; padding: 3px 10px; white-space: nowrap; } .itd-sugg-estado--pendiente { background: #fff7ed; color: #d97706; } [data-theme="dark"] .itd-sugg-estado--pendiente { background: var(--color-alerta-fondo); color: var(--color-alerta-fuerte); } .itd-sugg-estado--aprobada { background: #f0fdf4; color: #16a34a; } [data-theme="dark"] .itd-sugg-estado--aprobada { background: var(--color-exito-fondo); color: var(--color-exito-fuerte); } .itd-sugg-estado--rechazada { background: #fef2f2; color: #dc2626; } [data-theme="dark"] .itd-sugg-estado--rechazada { background: var(--color-error-fondo); color: var(--color-error-fuerte); } .itd-sugg-desc { font-size: 0.85rem; color: var(--color-texto-secundario); line-height: 1.5; margin: 4px 0 0; } .itd-sugg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--color-texto-terciario); margin-top: 8px; } .itd-sugg-react { border: 1px solid var(--color-borde-suave); border-radius: 50px; background: var(--color-fondo-superficie); padding: 3px 10px; font-size: 0.8rem; cursor: pointer; color: var(--color-texto-secundario); transition: background 0.15s, border-color 0.15s; } .itd-sugg-react:hover { background: var(--color-fondo-superficie-alt); } .itd-sugg-react--active { background: var(--color-fondo-superficie-alt); border-color: #1e3650; } [data-theme="dark"] .itd-sugg-react--active { border-color: #7fb0ff; } .itd-sugg-actions { display: flex; gap: 8px; margin-top: 10px; } .itd-sugg-actions .itd-btn { min-height: 36px; padding: 6px 16px; font-size: 0.8rem; } .itd-sugg-nueva { border-top: 1px dashed var(--color-borde-fuerte); padding-top: 1.1rem; } .itd-sugg-nueva-title { font-size: 0.9rem; font-weight: 700; color: var(--color-texto); margin: 0 0 0.65rem; } .itd-sugg-nueva .ssp-row { margin-bottom: 0.65rem; } .itd-sugg-nueva .fp-modal-textarea { margin-bottom: 0.75rem; } .itd-sugg-nueva .fp-item-modal-chip { margin-bottom: 0.75rem; } .itd-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); max-width: min(420px, calc(100vw - 2rem)); background: #1a1a2e; color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.4; padding: 0.85rem 1.1rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; z-index: 3000; transition: opacity 0.2s ease, transform 0.2s ease; } .itd-toast--visible { opacity: 1; transform: translate(-50%, 0); } .itd-empty { color: var(--color-texto-terciario); font-size: 0.9rem; line-height: 1.6; text-align: center; padding: 2.5rem 1rem; } .itd-input { box-sizing: border-box; border: 1px solid var(--color-borde-fuerte); border-radius: 10px; padding: 0.75rem 0.9rem; font-size: 0.9rem; font-family: inherit; background: var(--color-fondo-superficie); color: var(--color-texto); } .itd-input:focus { outline: none; border-color: #1e3650; } [data-theme="dark"] .itd-input:focus { border-color: #7fb0ff; } .itd-chat-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px; margin-bottom: 0.9rem; } .itd-chat-msg { display: flex; gap: 8px; max-width: 80%; align-items: flex-end; } .itd-chat-msg .itd-avatar { width: 28px; height: 28px; font-size: 0.7rem; flex-shrink: 0; border: none; margin-left: 0; } .itd-chat-msg--mine { align-self: flex-end; flex-direction: row-reverse; } .itd-chat-bubble { background: var(--color-fondo-superficie-alt); border-radius: 14px; padding: 8px 12px; color: var(--color-texto); } .itd-chat-msg--mine .itd-chat-bubble { background: #1e3650; color: #fff; } [data-theme="dark"] .itd-chat-msg--mine .itd-chat-bubble { background: #2c4c70; } .itd-chat-autor { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.7; margin-bottom: 2px; } .itd-chat-texto { font-size: 0.88rem; margin: 0; line-height: 1.4; word-break: break-word; } .itd-chat-input-row { display: flex; gap: 8px; } .itd-chat-input-row .itd-input { flex: 1; } .itd-activity-list { display: flex; flex-direction: column; gap: 12px; } .itd-activity-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--color-texto); } .itd-activity-row .itd-avatar { width: 28px; height: 28px; font-size: 0.7rem; flex-shrink: 0; border: none; margin-left: 0; } .itd-activity-texto { flex: 1; } .itd-activity-fecha { font-size: 0.75rem; color: var(--color-texto-terciario); white-space: nowrap; } @media (max-width: 600px) { .itd-chat-msg { max-width: 92%; } } .itd-thread-list { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; } .itd-thread-comment { display: flex; gap: 10px; } .itd-thread-comment .itd-avatar { width: 32px; height: 32px; font-size: 0.72rem; flex-shrink: 0; border: none; margin-left: 0; } .itd-thread-comment-body { flex: 1; min-width: 0; } .itd-thread-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .itd-thread-comment-autor { font-weight: 700; font-size: 0.85rem; color: var(--color-texto); } .itd-thread-comment-fecha { font-size: 0.75rem; color: var(--color-texto-terciario); } .itd-thread-comment-texto { font-size: 0.88rem; color: var(--color-texto); margin: 2px 0 6px; line-height: 1.4; word-break: break-word; } .itd-thread-comment-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .itd-thread-comment-replies { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--color-borde-suave); display: flex; flex-direction: column; gap: 10px; } .itd-thread-link-btn { border: none; background: none; padding: 0; font-size: 0.8rem; font-weight: 700; color: var(--color-texto-secundario); cursor: pointer; } .itd-thread-link-btn:hover { text-decoration: underline; } .itd-thread-form-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .itd-thread-reply-hint { font-size: 0.8rem; color: var(--color-texto-terciario); } /* ── LISTADO (/myTrips sin ?tripId=) ── */ /* Banner de presentación (2026-08-21, pedido de Agustin) — reemplaza al viejo .fp-section-header (label chico + botones sueltos, ver mtCargarListado en mytrips.js) por el mismo lenguaje navy + ícono cuadrado blanco que ya usan las promo cards de la home y el resto de los banners de sección (ver .wc-hero-icon en layout.css) — probado primero en Gonzalo/pruebas/ mytrips-banner.html. Navy #1e3650 ya es el acento primario de esta página (ver comentario de modo oscuro arriba), así que no hace falta nada nuevo para eso. */ .mt-hero { display: flex; align-items: center; gap: 1.5rem; background: #1e3650; border-radius: 20px; padding: 2.2rem 2.5rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(30, 54, 80, 0.22); } .mt-hero-body { flex: 1 1 auto; min-width: 0; } .mt-hero-title { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 0.35rem; line-height: 1.05; } .mt-hero-sub { font-size: 0.92rem; line-height: 1.35; color: rgba(255, 255, 255, 0.92); margin: 0; max-width: 480px; } .mt-hero-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem; } .mt-hero-actions .fp-cta-btn { justify-content: center; white-space: nowrap; } .mt-listado-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* .fp-grid real (favoritos-publico.css) entra en minmax(180px,1fr) → 6 columnas en el ancho de .itd-main — acá se pide expresamente que entren 4, mismo ancho total: subir el mínimo de cada columna alcanza, auto-fill hace el resto solo (menos columnas, cada una más ancha). */ .mt-listado-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 600px) { .itd-main { padding: 0.85rem 1.25rem 3rem; } .itd-hero-cover { height: 240px; } .itd-hero-map-bar { flex-wrap: wrap; padding: 0.55rem 0.75rem; } .itd-map-legend { gap: 10px; font-size: 0.72rem; } .itd-map-reset { font-size: 0.7rem; padding: 0.4rem 0.7rem; } .itd-hero-body { padding: 0.9rem 1.1rem 1.2rem; } .itd-hero-title { font-size: 1.4rem; } .itd-collab-stack { margin-left: 0; } .itd-tabs { top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; overflow-x: visible; } .itd-tab { justify-content: center; padding: 0.65rem 0.5rem; font-size: 0.78rem; gap: 5px; } .itd-row { grid-template-columns: 58px 20px 1fr; gap: 8px; } .itd-date-main { font-size: 0.72rem; } .itd-date small { font-size: 0.6rem; } .itd-item-card { padding: 0.85rem; } .itd-item-title { font-size: 1.05rem; } .itd-item-thumb { width: 40px; height: 40px; } .itd-item-action { width: 36px; height: 36px; } .itd-budget-stats { grid-template-columns: 1fr; } .itd-item-buttons { flex-direction: column; } .itd-item-add-exp, .itd-item-add-custom { justify-content: center; font-size: 0.78rem; padding: 0.55rem 0.9rem; min-height: 40px; } .itd-item-head { flex-wrap: wrap; } .itd-item-actions { flex: 1 0 100%; justify-content: flex-end; margin-top: 8px; } .mt-hero { flex-direction: column; align-items: flex-start; padding: 1.6rem 1.4rem; gap: 1rem; } .mt-hero-title { font-size: 1.6rem; } .mt-hero-sub { font-size: 0.85rem; max-width: none; } .mt-hero-actions { width: 100%; flex-direction: column; align-items: stretch; } .mt-hero-actions .fp-cta-btn { width: 100%; } .mt-listado-header-actions { width: 100%; } .mt-listado-header-actions .fp-cta-btn { flex: 1 1 auto; justify-content: center; } /* Pedido explícito de Agustin (2026-08-21): la vista de Lista queda solo para desktop — en mobile ni el selector ni la tabla, siempre línea de tiempo. !important a propósito: gana incluso si mtVistaItinerario quedó en 'lista' de una sesión desktop previa (ver mtWireViewToggle en mytrips.js, que además fuerza el estado a 'timeline' al entrar acá). */ .itd-itin-toolbar { display: none !important; } .itd-list-view { display: none !important; } #itd-layout-timeline { display: block !important; } }