/* ════════════════════════════════════════════════════════════════ MOVEO · mv-booking — Inbox ficha + drawer/sheet · CSS namespaced .mvb-* v24 — PODADO: se eliminaron las reglas del chat-thread propio del package (.mvb-thread*, .mvb-msg*, .mvb-banner*) porque el chat real es MoveoChat. Tokens con fallback scopeado a las raíces .mvb-* (no toca la paleta global). ════════════════════════════════════════════════════════════════ */ /* Fallback de tokens SOLO dentro de los contenedores mv-booking (raíces que se montan en ). No define nada en :root → no altera mv-* ni paleta. */ .mvb-drawer, .mvb-drawer__backdrop, .mvb-modal-backdrop, .mvb-toast, [data-mvb-inbox]{ --sand:#F2ECE0; --sand-2:#E7DFD0; --paper:#FBFAF7; --ink:#241F18; --espresso:#3F352B; --taupe:#8A7F70; --rule:#E9E2D3; --gold:#B8924A; --blue:#6F8FAE; --green:#4A8A5A; --red:#A3372B; --serif:'Cormorant Garamond', Georgia, serif; --sans:'Helvetica Neue', Arial, sans-serif; --mono:ui-monospace, 'SF Mono', Menlo, monospace; } /* [v7.01] MODO OSCURO — redefine los tokens locales mvb (scoped al namespace .mvb-*). Como TODA la CSS de mv-booking usa var(--paper/--ink/--rule/--sand…), este único bloque pone en oscuro la ficha de reserva + modal de cobro + drawer + inbox + toast. No afecta al resto de la app. */ html[data-theme="dark"] .mvb-drawer, html[data-theme="dark"] .mvb-drawer__backdrop, html[data-theme="dark"] .mvb-modal-backdrop, html[data-theme="dark"] .mvb-toast, html[data-theme="dark"] [data-mvb-inbox]{ --sand:#242019; --sand-2:#2C2820; --paper:#1C1813; --ink:#EDE6D8; --espresso:#D8CFBE; --taupe:#9A8C78; --rule:#3A332A; --gold:#C8A04A; --blue:#7FA0C0; --green:#5FA06F; --red:#C0564A; } /* ─── INBOX (lista de hilos/reservas) ─── */ [data-mvb-inbox]{ overflow-y:auto; background:var(--sand); } .mvb-inbox__head{ padding:16px 16px 12px; border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:2; } .mvb-inbox__head h3{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink); margin:0; } .mvb-inbox__head small{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--taupe); text-transform:uppercase; } .mvb-inbox__item{ padding:12px 14px; border-bottom:1px solid rgba(201,191,173,.5); cursor:pointer; display:flex; gap:10px; transition:background .15s; position:relative; } .mvb-inbox__item:hover{ background:var(--paper) } .mvb-inbox__avatar{ width:36px; height:36px; border-radius:50%; background:var(--sand-2) center/cover; flex:none; border:1.5px solid var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--ink); } .mvb-inbox__avatar.is-gold{ border-color:var(--gold) } .mvb-inbox__avatar.is-blue{ border-color:var(--blue) } .mvb-inbox__body{ flex:1; min-width:0 } .mvb-inbox__row1{ display:flex; justify-content:space-between; align-items:baseline; gap:6px } .mvb-inbox__name{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink); font-weight:500 } .mvb-inbox__time{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--taupe); flex:none; text-transform:uppercase; } .mvb-inbox__msg{ font-size:12px; color:var(--espresso); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; } .mvb-inbox__row3{ display:flex; align-items:center; gap:6px; margin-top:5px } .mvb-inbox__sport{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--taupe); text-transform:uppercase; } .mvb-inbox__sport .dot{ width:5px; height:5px; border-radius:50%; background:var(--taupe) } .mvb-inbox__badge{ font-family:var(--mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; padding:2px 7px; border-radius:99px; margin-left:auto; } .mvb-inbox__badge.is-pending{ background:rgba(184,146,74,.18); color:var(--gold) } .mvb-inbox__badge.is-confirm{ background:rgba(74,138,90,.15); color:var(--green) } .mvb-inbox__badge.is-live{ background:rgba(111,143,174,.16); color:var(--blue) } .mvb-inbox__badge.is-done{ background:rgba(168,155,133,.18); color:var(--taupe) } .mvb-inbox__badge.is-rej{ background:rgba(163,55,43,.13); color:var(--red) } /* ─── FICHA (drawer en desktop, bottom-sheet en móvil) ─── */ .mvb-drawer{ position:fixed; top:0; right:0; bottom:0; width:440px; max-width:100vw; background:var(--paper); border-left:1px solid var(--rule); box-shadow:-20px 0 40px rgba(63,53,43,.10); overflow-y:auto; padding:18px 18px 24px; z-index:4200; transform:translateX(100%); transition:transform .35s cubic-bezier(.32,.72,.32,1.04); font-family:var(--sans); } .mvb-drawer.is-open{ transform:translateX(0) } .mvb-drawer__backdrop{ position:fixed; inset:0; background:rgba(26,26,26,.28); opacity:0; pointer-events:none; transition:opacity .25s; z-index:4100; } .mvb-drawer__backdrop.is-open{ opacity:1; pointer-events:auto } @media (max-width:768px){ .mvb-drawer{ top:auto; left:0; right:0; bottom:0; width:100%; height:auto; max-height:92vh; max-height:92dvh; border-left:none; border-top:1px solid var(--rule); border-radius:24px 24px 0 0; transform:translateY(100%); box-shadow:0 -20px 40px rgba(63,53,43,.18); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } .mvb-drawer.is-open{ transform:translateY(0) } } .mvb-drawer__handle{ display:none; width:42px; height:4px; background:var(--rule); border-radius:99px; margin:6px auto 12px; cursor:grab; } @media (max-width:768px){ .mvb-drawer__handle{ display:block } } /* ─── FICHA contenido ─── */ .mvb-ficha__head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--rule); } .mvb-ficha__head__avatar{ width:46px; height:46px; border-radius:50%; background:var(--sand-2) center/cover; border:2px solid var(--ink); flex:none; } .mvb-ficha__head__avatar.is-gold{ border-color:var(--gold) } .mvb-ficha__head__name{ flex:1; min-width:0; line-height:1.15 } .mvb-ficha__head__name h4{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); margin:0 } .mvb-ficha__head__name .meta{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--taupe); text-transform:uppercase; margin-top:2px } .mvb-ficha__close{ width:30px; height:30px; border-radius:50%; background:var(--sand-2); border:none; cursor:pointer; color:var(--ink); font-size:15px; display:flex; align-items:center; justify-content:center; } /* Status pill (5/6 estados) */ .mvb-status{ margin:14px 0 0; padding:8px 12px; border-radius:99px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; } .mvb-status[data-status="pending"]{ background:rgba(184,146,74,.15); color:var(--gold); border:1px solid var(--gold) } .mvb-status[data-status="confirmada"]{ background:rgba(74,138,90,.13); color:var(--green); border:1px solid var(--green) } .mvb-status[data-status="encurso"]{ background:rgba(111,143,174,.15); color:var(--blue); border:1px solid var(--blue) } .mvb-status[data-status="terminada"]{ background:rgba(168,155,133,.16); color:var(--taupe); border:1px solid var(--taupe) } .mvb-status[data-status="rechazada"]{ background:rgba(163,55,43,.10); color:var(--red); border:1px solid var(--red) } .mvb-status[data-status="cancelada"]{ background:rgba(163,55,43,.06); color:var(--red); border:1px solid var(--red) } .mvb-status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(255,255,255,.4) } .mvb-status[data-status="encurso"] .dot{ animation:mvb-live 1.6s ease-in-out infinite } @keyframes mvb-live{ 0%,100%{ box-shadow:0 0 0 3px rgba(111,143,174,.35) } 50%{ box-shadow:0 0 0 6px rgba(111,143,174,0) } } /* Secciones + grid de datos */ .mvb-section{ margin-top:18px } .mvb-section h5{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--taupe); text-transform:uppercase; margin:0 0 10px } .mvb-data{ display:grid; grid-template-columns:1fr 1fr; gap:10px } .mvb-data__item{ background:var(--sand); border:1px solid var(--rule); border-radius:10px; padding:9px 11px } .mvb-data__item .k{ font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--taupe); text-transform:uppercase; margin-bottom:4px } .mvb-data__item .v{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); line-height:1.1 } .mvb-data__item .v .small{ font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.16em; color:var(--taupe); text-transform:uppercase; display:block; margin-top:3px } /* Mapa mini */ .mvb-map{ position:relative; height:120px; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 20% 30%, rgba(168,155,133,.10), transparent 40%),linear-gradient(180deg,#EFE7D6,#E8DFCC); border:1px solid var(--rule); margin-bottom:8px; } .mvb-map__pin{ position:absolute; top:50%; left:50%; width:24px; height:24px; border-radius:50% 50% 50% 0; background:var(--ink); transform:translate(-50%,-100%) rotate(-45deg); box-shadow:0 4px 10px rgba(63,53,43,.3) } .mvb-map__pin::after{ content:""; position:absolute; top:6px; left:6px; width:12px; height:12px; border-radius:50%; background:var(--paper) } .mvb-map__label{ position:absolute; bottom:10px; left:10px; font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--espresso); background:rgba(247,242,233,.92); padding:4px 9px; border-radius:99px; border:1px solid var(--rule); text-transform:uppercase } /* Acciones */ .mvb-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap } .mvb-btn{ flex:1; min-width:0; font-family:var(--sans); font-size:12.5px; padding:10px 14px; border-radius:99px; cursor:pointer; transition:all .18s; border:1px solid var(--ink); background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; justify-content:center; gap:6px; } .mvb-btn:hover{ background:var(--espresso); border-color:var(--espresso) } .mvb-btn.is-accept{ background:var(--green); border-color:var(--green) } .mvb-btn.is-accept:hover{ background:#3a7148; border-color:#3a7148 } .mvb-btn.is-reject{ background:transparent; color:var(--red); border-color:var(--red) } .mvb-btn.is-reject:hover{ background:rgba(163,55,43,.08) } .mvb-btn.is-ghost{ background:transparent; color:var(--ink); border-color:var(--rule) } .mvb-btn.is-ghost:hover{ background:var(--sand-2); border-color:var(--taupe) } .mvb-btn.is-gold{ background:var(--gold); border-color:var(--gold) } .mvb-btn.is-gold:hover{ background:#9c7c3e; border-color:#9c7c3e } /* Slot reputación (mv-rep / mv-rate-panel se inyectan dentro) */ .mvb-rep{ display:flex; gap:10px; align-items:center; background:var(--sand); border:1px solid var(--rule); border-radius:12px; padding:11px } .mvb-rep__stars{ font-family:var(--serif); font-size:14px; color:var(--gold); letter-spacing:1px; flex:none } .mvb-rep__level{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--green); text-transform:uppercase; flex:1 } /* Histórico */ .mvb-hist{ margin-top:8px; display:flex; flex-direction:column; gap:6px } .mvb-hist__row{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--sand); border:1px solid var(--rule); border-radius:10px; font-size:12px; color:var(--espresso); } .mvb-hist__row .when{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--taupe); text-transform:uppercase } .mvb-hist__row .where{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink); font-weight:500 } .mvb-hist__row .rate{ font-family:var(--serif); font-size:13px; color:var(--gold); flex:none } /* Mensajes recientes embebidos (preview de booking_messages) */ .mvb-ficha__chat__msg{ font-size:12px; color:var(--espresso); padding:6px 0; border-bottom:1px solid var(--rule); line-height:1.4 } .mvb-ficha__chat__msg .who{ font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); margin-right:6px } /* ─── MODAL DE RECHAZO ─── */ .mvb-modal-backdrop{ position:fixed; inset:0; z-index:4300; background:rgba(26,26,26,.42); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .22s; padding:18px; font-family:var(--sans); } .mvb-modal-backdrop.is-open{ opacity:1; pointer-events:auto } .mvb-modal{ background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:26px; max-width:440px; width:100%; box-shadow:0 30px 60px rgba(63,53,43,.30); transform:translateY(8px) scale(.98); transition:transform .22s; } .mvb-modal-backdrop.is-open .mvb-modal{ transform:translateY(0) scale(1) } .mvb-modal h3{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink); margin:0 0 4px } .mvb-modal .code{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--taupe); text-transform:uppercase; margin-bottom:4px } .mvb-modal p{ font-size:12.5px; color:var(--espresso); margin:0 0 16px; line-height:1.5 } /* [v6.46 FIX texto cortado modal Rechazar] añadido min-width:0 al span + overflow-wrap. En flex container los items tienen min-width:auto por default → no se encogen bajo su contenido → el texto del se desbordaba a la derecha fuera del label. flex-shrink:0 al radio mantiene su tamaño fijo. */ .mvb-reject-opt{ display:flex; align-items:flex-start; gap:10px; background:var(--sand); border:1px solid var(--rule); border-radius:10px; padding:10px 12px; cursor:pointer; transition:all .15s; margin-bottom:7px; overflow:hidden; } .mvb-reject-opt:hover{ background:var(--sand-2) } .mvb-reject-opt input{ margin-top:3px; accent-color:var(--ink); flex-shrink:0 } .mvb-reject-opt span{ flex:1 1 0; min-width:0; line-height:1.3; overflow-wrap:break-word; word-wrap:break-word; } .mvb-reject-opt b{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink); font-weight:500; display:block; overflow-wrap:break-word; } .mvb-reject-opt small{ font-size:11.5px; color:var(--taupe); display:block; margin-top:2px; overflow-wrap:break-word; } .mvb-reject-opt:has(input:checked){ background:var(--paper); border-color:var(--ink) } .mvb-modal textarea{ margin-top:6px; width:100%; min-height:60px; background:var(--sand); border:1px solid var(--rule); border-radius:10px; padding:10px 12px; font-family:var(--sans); font-size:12.5px; color:var(--ink); resize:none; outline:none; } /* ─── TOAST (campanita web) ─── */ .mvb-toast{ position:fixed; top:20px; right:20px; background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; box-shadow:0 14px 28px rgba(63,53,43,.18); max-width:340px; z-index:4400; transform:translateX(120%); transition:transform .35s cubic-bezier(.32,.72,.32,1.04); font-family:var(--sans); } .mvb-toast.is-open{ transform:translateX(0) } .mvb-toast__ico{ width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--paper); display:flex; align-items:center; justify-content:center; flex:none; font-size:13px; } .mvb-toast__txt{ flex:1; line-height:1.3 } .mvb-toast__txt b{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink); display:block } .mvb-toast__txt small{ font-size:11.5px; color:var(--espresso); margin-top:2px; display:block } .mvb-toast__actions{ display:flex; gap:6px; margin-top:8px } .mvb-toast__btn{ font-family:var(--sans); font-size:10.5px; background:var(--ink); color:var(--paper); border:none; border-radius:99px; padding:5px 11px; cursor:pointer } .mvb-toast__btn.is-ghost{ background:transparent; color:var(--espresso); border:1px solid var(--rule) }