/* ============================================================================ NewFox UI — sistema de diseño compartido (v1) ---------------------------------------------------------------------------- Fuente única de tokens y componentes de la guía "Servicios v2" para que todas las pantallas se vean como un solo producto. Los prefijos históricos (--rv-*, --pdv-*) se mantienen como ALIAS de los tokens --nf-* durante la migración: el CSS existente sigue funcionando sin tocarlo, pero el valor vive aquí y solo aquí. Requiere las fuentes Outfit (400-700) y JetBrains Mono (400-600), que cada página carga en su (Google Fonts con preconnect). Consumidores actuales: booking/panel.php, booking/login.php, booking/fac_panel.php, booking/fac_login.php. ========================================================================== */ :root { /* --- Tokens canónicos --- */ --nf-primary: #2E86AB; --nf-primary-dark: #236B8E; --nf-primary-deep: #16386B; --nf-primary-tint: #EAF4F8; --nf-bg: #F5F6F8; --nf-card: #FFFFFF; --nf-border: #E8EBEE; --nf-border-soft: #F0F2F4; --nf-text: #1C2634; --nf-secondary: #4A5866; --nf-muted: #5F6E7C; /* atenuado con contraste AA (~4.8:1 sobre blanco) */ --nf-ok: #227952; --nf-ok-tint: #EAF6F0; --nf-warn: #9A6B00; --nf-warn-tint: #FFF4DB; --nf-danger: #C03A3A; --nf-danger-tint: #FDEDED; --nf-info: #0E6E8C; --nf-info-tint: #E0F3F8; --nf-wa: #1DA851; /* verde WhatsApp */ --nf-wa-dark: #178C43; --nf-radius: 14px; --nf-radius-sm: 8px; /* Sombra de superficie de docs/GUIA-ESTETICA.md. Antes era 0 2px 10px rgba(16,30,46,0.05): las tarjetas del PdV quedaban casi planas mientras las de Servicios, Reservas, Choferes y Vehículos flotaban, así que el mismo componente pesaba distinto según el área. */ --nf-shadow: 0 10px 30px rgba(16, 30, 46, 0.08); --nf-shadow-pop: 0 24px 70px rgba(16, 30, 46, 0.4); --nf-font: 'Outfit', system-ui, -apple-system, sans-serif; --nf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* El botón primario de marca se define UNA vez (antes había 5 copias) */ --nf-grad-primary: linear-gradient(90deg, var(--nf-primary-deep), var(--nf-primary)); /* --- Alias históricos (compatibilidad durante la migración) --- */ --rv-primary: var(--nf-primary); --rv-primary-dark: var(--nf-primary-dark); --rv-primary-tint: var(--nf-primary-tint); --rv-bg: var(--nf-bg); --rv-card: var(--nf-card); --rv-border: var(--nf-border); --rv-border-soft: var(--nf-border-soft); --rv-text: var(--nf-text); --rv-secondary: var(--nf-secondary); --rv-muted: var(--nf-muted); --rv-ok: var(--nf-ok); --rv-ok-tint: var(--nf-ok-tint); --rv-warn: var(--nf-warn); --rv-warn-tint: var(--nf-warn-tint); --rv-danger: var(--nf-danger); --rv-danger-tint: var(--nf-danger-tint); --rv-info: var(--nf-info); --rv-info-tint: var(--nf-info-tint); --rv-radius: var(--nf-radius); --rv-radius-sm: var(--nf-radius-sm); --rv-font: var(--nf-font); --rv-mono: var(--nf-mono); --pdv-primary: var(--nf-primary); --pdv-primary-light: var(--nf-primary-tint); } /* ==== Utilidades tipográficas ==== */ .nf-mono, .rv-mono { font-family: var(--nf-mono); } .nf-muted, .rv-muted { color: var(--nf-muted); } /* ==== Foco visible global ==== Anillo de foco consistente para navegación por teclado. Los componentes con anillo propio (inputs con box-shadow) lo sobreescriben por cascada. */ :focus-visible { outline: 2px solid var(--nf-primary); outline-offset: 2px; } /* ==== Botones ==== */ .nf-btn, .rv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--nf-radius-sm); font-size: 0.8rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; text-decoration: none; font-family: inherit; } .nf-btn:focus-visible, .rv-btn:focus-visible { outline: 2px solid var(--nf-primary); outline-offset: 2px; } .nf-btn-primary, .rv-btn-primary { background: var(--nf-primary); color: #fff; border-color: var(--nf-primary); } .nf-btn-primary:hover, .rv-btn-primary:hover { background: var(--nf-primary-dark); color: #fff; } /* Primario de marca con degradado: para el CTA principal de la página (uno por pantalla) */ .nf-btn-brand { background: var(--nf-grad-primary); color: #fff; border: none; padding: 8px 18px; border-radius: var(--nf-radius-sm); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all 0.2s; } .nf-btn-brand:hover { color: #fff; filter: brightness(0.92); transform: translateY(-1px); } .nf-btn-outline, .rv-btn-outline { background: #fff; color: var(--nf-secondary); border-color: var(--nf-border); } .nf-btn-outline:hover, .rv-btn-outline:hover { background: #F4F5F7; border-color: #D5DADE; color: var(--nf-text); } .nf-btn-ghost, .rv-btn-ghost { background: none; border-color: transparent; color: var(--nf-muted); } .nf-btn-ghost:hover, .rv-btn-ghost:hover { background: #F4F5F7; color: var(--nf-text); } /* Variantes tintadas: tinte suave + texto del color (patrón Linear). Para acciones semánticas secundarias; el relleno saturado queda prohibido. */ .nf-btn-tint-ok, .rv-btn-tint-ok { background: var(--nf-ok-tint); color: var(--nf-ok); } .nf-btn-tint-ok:hover, .rv-btn-tint-ok:hover { background: #D8EEE2; color: var(--nf-ok); } .nf-btn-tint-warn, .rv-btn-tint-warn { background: var(--nf-warn-tint); color: var(--nf-warn); } .nf-btn-tint-warn:hover, .rv-btn-tint-warn:hover { background: #F8E9BC; color: var(--nf-warn); } .nf-btn-tint-danger, .rv-btn-tint-danger { background: var(--nf-danger-tint); color: var(--nf-danger); } .nf-btn-tint-danger:hover, .rv-btn-tint-danger:hover { background: #F8DCDC; color: var(--nf-danger); } .nf-btn-tint-info, .rv-btn-tint-info { background: var(--nf-info-tint); color: var(--nf-info); } .nf-btn-tint-info:hover, .rv-btn-tint-info:hover { background: #CDEAF3; color: var(--nf-info); } .nf-btn-tint-muted, .rv-btn-tint-muted { background: #EEF1F4; color: var(--nf-secondary); } .nf-btn-tint-muted:hover, .rv-btn-tint-muted:hover { background: #E2E7EB; color: var(--nf-text); } .nf-btn-wa, .rv-btn-wa { background: var(--nf-wa); color: #fff; } .nf-btn-wa:hover, .rv-btn-wa:hover { background: var(--nf-wa-dark); color: #fff; } /* Botón sólido de peligro: solo para la acción destructiva final de un diálogo */ .nf-btn-danger { background: var(--nf-danger); color: #fff; border-color: var(--nf-danger); } .nf-btn-danger:hover { background: #A83232; color: #fff; } /* ==== Botones de icono (acciones de fila) ==== */ .nf-btn-icon, .rv-btn-icon { padding: 5px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nf-radius-sm); border: 1px solid var(--nf-border); background: #fff; color: var(--nf-muted); transition: all 0.15s; text-decoration: none; font-size: 0.72rem; cursor: pointer; } .nf-btn-icon:hover, .rv-btn-icon:hover { background: var(--nf-primary-tint); color: var(--nf-primary-dark); border-color: var(--nf-primary); } .nf-btn-icon:focus-visible, .rv-btn-icon:focus-visible { outline: 2px solid var(--nf-primary); outline-offset: 1px; } .nf-btn-icon.danger:hover, .rv-btn-icon.danger:hover, .nf-btn-icon.danger:focus-visible, .rv-btn-icon.danger:focus-visible { background: var(--nf-danger-tint); color: var(--nf-danger); border-color: var(--nf-danger); } /* Estado "encendido" en ámbar (p. ej. link de pago ya generado) */ .nf-btn-icon.warn-on, .rv-btn-icon.warn-on { background: var(--nf-warn-tint); color: var(--nf-warn); border-color: #F3DFA8; } .nf-btn-icon.warn-on:hover, .rv-btn-icon.warn-on:hover { background: #F8E9BC; color: var(--nf-warn); border-color: var(--nf-warn); } td.nf-acciones, td.rv-acciones { white-space: nowrap; } /* ==== Badges de estado: tinte suave + texto del color ==== El relleno saturado de Bootstrap convertía el metadato en lo más llamativo de la tabla (y "Pendiente" en amarillo con texto blanco no pasaba AA). */ .nf-badge, .rv-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .nf-badge-pend, .rv-badge-pend { background: var(--nf-warn-tint); color: var(--nf-warn); } .nf-badge-conf, .rv-badge-conf { background: var(--nf-primary-tint); color: var(--nf-primary-dark); } .nf-badge-pag, .rv-badge-pag { background: var(--nf-ok-tint); color: #177A46; } .nf-badge-cred, .rv-badge-cred { background: var(--nf-info-tint); color: var(--nf-info); } .nf-badge-canc, .rv-badge-canc { background: var(--nf-danger-tint); color: #B52D46; } .nf-badge-otro, .rv-badge-otro { background: #EEF1F4; color: var(--nf-muted); } /* ==== Tarjetas y KPIs ==== */ .nf-card { background: var(--nf-card); border: 1px solid var(--nf-border); border-radius: var(--nf-radius); box-shadow: var(--nf-shadow); overflow: hidden; } .nf-card-head { padding: 12px 20px; border-bottom: 1px solid var(--nf-border); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nf-muted); font-weight: 700; display: flex; align-items: center; gap: 7px; } .nf-stat-card { background: var(--nf-card); border: 1px solid var(--nf-border); border-radius: var(--nf-radius); padding: 20px; text-align: center; box-shadow: var(--nf-shadow); } .nf-stat-card .stat-number { font-size: 1.8rem; font-weight: 700; line-height: 1; font-family: var(--nf-mono); } .nf-stat-card .stat-label { font-size: 0.78rem; color: var(--nf-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.5px; } /* ==== Grid de datos etiqueta + valor (fichas y modales) ==== */ .nf-grid, .rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .nf-item, .rv-item { background: #F8F9FB; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm); padding: 10px 12px; } .nf-item .lbl, .rv-item .lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nf-muted); font-weight: 600; margin-bottom: 2px; } .nf-item .val, .rv-item .val { font-size: 0.88rem; font-weight: 600; color: var(--nf-text); word-break: break-word; } .nf-item .val small, .rv-item .val small { font-weight: 400; color: var(--nf-muted); } .nf-item .val a, .rv-item .val a { color: var(--nf-primary); text-decoration: none; } .nf-item .val a:hover, .rv-item .val a:hover { text-decoration: underline; } /* Observaciones del cliente: caja ámbar */ .nf-obs, .rv-obs { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--nf-radius-sm); padding: 10px 12px; font-size: 0.85rem; white-space: pre-wrap; } /* ==== Modal de vista rápida (patrón Servicios/Reservas) ==== */ .rvm-backdrop { position: fixed; inset: 0; background: rgba(16,30,46,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; z-index: 200; padding: 4vh 16px; overflow-y: auto; } .rvm-backdrop.visible { display: flex; animation: nfFade 0.22s ease; } @keyframes nfFade { from { opacity: 0; } to { opacity: 1; } } .rvm-card { background: #fff; border: 1px solid var(--nf-border); border-radius: var(--nf-radius); width: 680px; max-width: 100%; overflow: hidden; box-shadow: var(--nf-shadow-pop); font-family: var(--nf-font); color: var(--nf-text); animation: nfPopIn 0.34s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes nfPopIn { from { transform: translateY(28px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } } .rvm-header { padding: 16px 20px; color: #fff; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .rvm-header h5 { margin: 0; font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rvm-header h5 .num { font-family: var(--nf-mono); } .rvm-header .rvm-sub { font-size: 0.8rem; opacity: 0.92; margin-top: 3px; } /* Degradado de cabecera según el ESTADO de la reserva */ .rvm-h-pend { background: linear-gradient(120deg, #B57E00, #E8A400); } .rvm-h-conf { background: linear-gradient(120deg, var(--nf-primary-dark), var(--nf-primary)); } .rvm-h-pag { background: linear-gradient(120deg, #1C6444, #2E9A6C); } .rvm-h-cred { background: linear-gradient(120deg, #0B5A73, #2A9BC0); } .rvm-h-canc { background: linear-gradient(120deg, #A03030, var(--nf-danger)); } .rvm-h-otro { background: linear-gradient(120deg, #4A5866, #8A97A3); } .rvm-chip { background: rgba(255,255,255,0.22); padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .rvm-close { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .rvm-close:hover { background: rgba(255,255,255,0.35); } .rvm-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .rvm-body { padding: 18px 20px; max-height: 62vh; overflow-y: auto; } .rvm-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nf-muted); font-weight: 700; margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; } .rvm-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--nf-border); background: #FAFBFC; flex-wrap: wrap; } .rvm-footer .grp { display: flex; gap: 8px; flex-wrap: wrap; } .rvm-meta { flex: 1; min-width: 0; font-size: 0.68rem; color: var(--nf-muted); line-height: 1.55; padding: 0 6px; } .rvm-meta strong { color: var(--nf-secondary); font-weight: 600; } .rvm-meta .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ficha de conductor por tramo */ .rvm-driver { display: flex; align-items: center; gap: 14px; background: #F8F9FB; border: 1px solid var(--nf-border); border-radius: 10px; padding: 12px 14px; flex-wrap: wrap; } .rvm-driver-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(16,30,46,0.18); flex-shrink: 0; } .rvm-driver-info { flex: 1; min-width: 0; } .rvm-driver-name { font-weight: 700; font-size: 0.92rem; } .rvm-driver-role { font-size: 0.74rem; color: var(--nf-muted); } .rvm-driver-tel { font-size: 0.82rem; color: var(--nf-wa); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--nf-mono); font-weight: 500; } .rvm-driver-tel:hover { text-decoration: underline; color: var(--nf-wa-dark); } .rvm-driver-veh { margin-left: auto; text-align: right; flex-shrink: 0; } .rvm-driver-veh .mat { font-family: var(--nf-mono); font-weight: 600; font-size: 0.85rem; background: #fff; border: 1px solid var(--nf-border); border-radius: 6px; padding: 3px 8px; display: inline-block; } .rvm-driver-veh .mtr { font-family: var(--nf-mono); font-size: 0.76rem; color: var(--nf-secondary); margin-top: 3px; } .rvm-driver-veh .gps { margin-top: 6px; } /* Mapa GPS deslizante bajo la ficha del conductor */ .rvm-map { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1); border: 0 solid var(--nf-border); border-radius: 10px; margin-top: 0; } .rvm-map.open { max-height: 280px; border-width: 1px; margin-top: 8px; } .rvm-map-canvas { width: 100%; height: 200px; background: #F4F5F7; display: flex; align-items: center; justify-content: center; color: var(--nf-muted); font-size: 0.85rem; } .rvm-map-canvas.leaflet-container { display: block; } .rvm-map-status { padding: 9px 12px; font-size: 0.78rem; color: var(--nf-muted); background: #F8F9FB; border-top: 1px solid var(--nf-border); display: flex; justify-content: space-between; align-items: center; gap: 8px; } .rvm-map-status.ok { color: var(--nf-ok); background: var(--nf-ok-tint); } .rvm-map-status.error { color: var(--nf-danger); background: var(--nf-danger-tint); } .rvm-map-status .upd { font-size: 0.7rem; opacity: 0.75; font-family: var(--nf-mono); white-space: nowrap; } /* Barra de cambio de estado: acciones a la izquierda, cancelaciones a la derecha */ .rvm-estado-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .rvm-estado-bar .grp { display: flex; gap: 8px; flex-wrap: wrap; } .rvm-estado-bar .grp.cancel { margin-left: auto; padding-left: 14px; border-left: 1px solid var(--nf-border); } /* Caja del link de pago dentro del modal */ .rvm-pago { background: #F8F9FB; border: 1px solid var(--nf-border); border-radius: 10px; padding: 12px 14px; } .rvm-pago .input-group input { font-family: var(--nf-mono); font-size: 0.76rem; } /* Cabecera de la ficha de servicio: título a la izquierda, link (ABH) a la derecha */ .rvm-driver-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 6px; } .rvm-driver-head a { font-size: 0.72rem; color: var(--nf-primary); text-decoration: none; font-family: var(--nf-mono); font-weight: 600; } .rvm-driver-head a:hover { text-decoration: underline; } /* Detalle interno del conductor (edad/carnet/idiomas — lo pasa el adaptador solo en contextos internos; el PdV no los recibe) */ .rvm-driver-langs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .rvm-chip2 { display: inline-flex; align-items: center; gap: 4px; background: var(--nf-primary-tint); color: var(--nf-primary-dark); border-radius: 10px; padding: 1px 8px; font-size: 0.68rem; font-weight: 600; } .rvm-age { font-size: 0.7rem; color: var(--nf-muted); background: #fff; border: 1px solid var(--nf-border); border-radius: 10px; padding: 1px 8px; margin-left: 8px; white-space: nowrap; } .rvm-driver-veh .cap { font-size: 0.7rem; color: var(--nf-muted); margin-top: 2px; } /* Estados de carga del modal */ .rvm-loading { text-align: center; padding: 28px; color: var(--nf-muted); font-size: 0.9rem; } .rvm-skel .sk { background: linear-gradient(90deg, #EEF1F4 25%, #F7F9FB 50%, #EEF1F4 75%); background-size: 200% 100%; animation: nfShimmer 1.1s infinite linear; border-radius: 8px; } @keyframes nfShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .rvm-skel .sk-line { height: 13px; margin-bottom: 8px; } .rvm-skel .sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .rvm-skel .sk-box { height: 58px; border-radius: var(--nf-radius-sm); } .rvm-skel .sk-driver { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--nf-border); border-radius: 10px; } .rvm-skel .sk-circle { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; } /* Fundido del contenido al llegar los datos */ .rvm-fade { animation: nfFade 0.28s ease; } /* ==== Diálogos propios (sustituyen a alert/confirm/prompt nativos) ==== Los consume assets/js/nf-dialog.js. Mismo lenguaje visual que el modal. */ .nf-dialog-backdrop { position: fixed; inset: 0; background: rgba(16,30,46,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; animation: nfFade 0.18s ease; } .nf-dialog { background: #fff; border: 1px solid var(--nf-border); border-radius: var(--nf-radius); width: 420px; max-width: 100%; box-shadow: var(--nf-shadow-pop); font-family: var(--nf-font); color: var(--nf-text); animation: nfPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .nf-dialog-body { padding: 22px 22px 6px; } .nf-dialog-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 12px; } .nf-dialog-ico.ok { background: var(--nf-ok-tint); color: var(--nf-ok); } .nf-dialog-ico.warn { background: var(--nf-warn-tint); color: var(--nf-warn); } .nf-dialog-ico.danger { background: var(--nf-danger-tint); color: var(--nf-danger); } .nf-dialog-ico.info { background: var(--nf-info-tint); color: var(--nf-info); } .nf-dialog-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; } .nf-dialog-msg { font-size: 0.85rem; color: var(--nf-secondary); line-height: 1.55; margin: 0; white-space: pre-line; } .nf-dialog-input { width: 100%; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm); font-family: inherit; font-size: 0.88rem; color: var(--nf-text); outline: none; transition: border 0.15s, box-shadow 0.15s; } .nf-dialog-input:focus { border-color: var(--nf-primary); box-shadow: 0 0 0 3px rgba(46,134,171,0.12); } .nf-dialog-hint { font-size: 0.74rem; color: var(--nf-muted); margin-top: 6px; } .nf-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; } /* ==== Toasts (feedback no bloqueante: éxito / error / info) ==== */ .nf-toast-wrap { position: fixed; bottom: 18px; right: 18px; z-index: 10001; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .nf-toast { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--nf-border); border-radius: 10px; padding: 11px 16px; box-shadow: 0 10px 30px rgba(16,30,46,0.14); font-family: var(--nf-font); font-size: 0.85rem; color: var(--nf-text); max-width: 380px; pointer-events: auto; animation: nfToastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .nf-toast.out { animation: nfToastOut 0.22s ease forwards; } @keyframes nfToastIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes nfToastOut { to { transform: translateY(8px); opacity: 0; } } .nf-toast i { flex-shrink: 0; } .nf-toast.ok i { color: var(--nf-ok); } .nf-toast.error i { color: var(--nf-danger); } .nf-toast.info i { color: var(--nf-info); } .nf-toast.error { border-color: #F5C6C6; } /* Opciones apiladas del diálogo de elección (nfDialog.choose) */ .nf-dialog-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .nf-dialog-opts .nf-btn { width: 100%; justify-content: flex-start; padding: 11px 14px; font-size: 0.85rem; } /* ==== Variante compacta del modal de reserva (menos scroll vertical) ==== */ .rvm-body .rvm-section { margin: 12px 0 6px; } /* Trayecto en una sola franja: origen → destino */ .rvm-ruta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #F8F9FB; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm); padding: 9px 12px; font-weight: 700; font-size: 0.9rem; } .rvm-ruta i { color: var(--nf-muted); font-size: 0.78rem; } /* Rejilla densa de datos: cajitas más pequeñas, 4-5 por fila */ .rvm-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-top: 8px; } .rvm-datos .rv-item { padding: 7px 10px; } .rvm-datos .rv-item .lbl { font-size: 0.62rem; margin-bottom: 1px; } .rvm-datos .rv-item .val { font-size: 0.82rem; } /* Cliente en una franja: nombre + habitación a la izquierda, contacto a la derecha */ .rvm-cliente { display: flex; justify-content: space-between; align-items: center; gap: 6px 18px; flex-wrap: wrap; background: #F8F9FB; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-sm); padding: 9px 12px; margin-top: 8px; } .rvm-cliente .cl1 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.88rem; } .rvm-cliente .cl1 i { color: var(--nf-muted); font-size: 0.78rem; } .rvm-cliente .hab { background: #fff; border: 1px solid var(--nf-border); border-radius: 10px; padding: 1px 8px; font-size: 0.7rem; font-family: var(--nf-mono); color: var(--nf-secondary); white-space: nowrap; } .rvm-cliente .cl2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; min-width: 0; } .rvm-cliente .cl2 a { color: var(--nf-primary); text-decoration: none; overflow-wrap: anywhere; } .rvm-cliente .cl2 a:hover { text-decoration: underline; } .rvm-cliente .pax { background: var(--nf-primary-tint); color: var(--nf-primary-dark); border-radius: 10px; padding: 1px 9px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } /* ==== Preferencia de movimiento reducido ==== */ @media (prefers-reduced-motion: reduce) { .nf-btn, .rv-btn, .nf-btn-icon, .rv-btn-icon, .nf-btn-brand { transition: none !important; } .nf-btn-brand:hover { transform: none; } .rvm-backdrop.visible, .rvm-card, .nf-dialog-backdrop, .nf-dialog, .nf-toast, .rvm-fade, .rvm-skel .sk { animation: none !important; } .rvm-map { transition: none !important; } }