/* ============================================================ Rediseño "Operación Clara" (Dirección A) — DestinoCDMX Sistema de diseño nuevo (tokens dx-*, componentes y shell). Se carga DESPUÉS de estilo.css. Todo va namespaced con --dx-* y clases .dx-* para no chocar con el estilo Liquid Glass viejo. Las reglas de shell aplican solo en (las pantallas que pasan por encabezado()). ============================================================ */ /* ---- Fuente self-hosted (variable, latin + latin-ext) ---- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Tokens ---- */ .dx { --dx-coral: #F2564E; --dx-coral-deep: #D83A30; --dx-coral-soft: #FDEDEB; --dx-ink: #25332E; --dx-ink-soft: #5C6B64; --dx-mute: #94A29B; --dx-line: #E9E6E1; --dx-green: #159B5B; --dx-green-soft: #E6F4EC; --dx-amber: #E08A0B; --dx-amber-soft: #FBF0DC; --dx-paper: #FAF8F5; --dx-paper-warm: #F5F1EA; --dx-card: #FFFFFF; --dx-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --dx-r-control: 13px; --dx-r-chip: 8px; --dx-r-icon: 12px; --dx-r-card: 22px; --dx-r-pill: 9999px; --dx-shadow-card: 0 8px 24px -16px rgba(37,51,46,0.40); --dx-ease: cubic-bezier(0.23,1,0.32,1); } /* ---- Base de la app (solo pantallas con shell nuevo) ---- */ body.dx { margin: 0; background: var(--dx-paper); color: var(--dx-ink); font-family: var(--dx-font); line-height: 1.5; -webkit-font-smoothing: antialiased; } body.dx * { box-sizing: border-box; } /* ============================================================ COMPONENTES (catálogo §5 del handoff) ============================================================ */ /* 5.1 Card */ .dx-card { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: var(--dx-r-card); padding: 18px; } .dx-card--elevated { box-shadow: var(--dx-shadow-card); } .dx-card--flush { padding: 0; overflow: hidden; } /* 5.2 SectionLabel */ .dx-seclabel { display: flex; align-items: center; justify-content: space-between; margin: 24px 2px 10px; } .dx-seclabel__t { font: 700 12px/1 var(--dx-font); letter-spacing: .08em; text-transform: uppercase; color: var(--dx-ink-soft); white-space: nowrap; } .dx-seclabel__a { font: 600 13px var(--dx-font); color: var(--dx-coral); cursor: pointer; white-space: nowrap; text-decoration: none; } /* 5.3 Badge */ .dx-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--dx-font); padding: 4px 9px; border-radius: var(--dx-r-chip); white-space: nowrap; } .dx-badge--neutral { color: var(--dx-ink-soft); background: var(--dx-paper-warm); } .dx-badge--coral { color: var(--dx-coral); background: var(--dx-coral-soft); } .dx-badge--green { color: var(--dx-green); background: var(--dx-green-soft); } .dx-badge--amber { color: var(--dx-amber); background: var(--dx-amber-soft); } .dx-badge--solid-coral { color: #fff; background: var(--dx-coral); } .dx-badge--solid-green { color: #fff; background: var(--dx-green); } /* 5.4 Btn */ .dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: var(--dx-r-control); font: 700 14px var(--dx-font); cursor: pointer; padding: 12px 16px; white-space: nowrap; text-decoration: none; transition: filter .15s var(--dx-ease), background .15s var(--dx-ease); } .dx-btn--sm { font-size: 13px; padding: 8px 13px; } .dx-btn--lg { padding: 14px 18px; } .dx-btn--primary { background: var(--dx-ink); color: #fff; } .dx-btn--coral { background: var(--dx-coral); color: #fff; } .dx-btn--soft { background: var(--dx-card); color: var(--dx-ink); border-color: var(--dx-line); } .dx-btn--ghost { background: transparent; color: var(--dx-ink-soft); border-color: var(--dx-line); } .dx-btn--greenSoft { background: var(--dx-green-soft); color: var(--dx-green); } .dx-btn:hover { filter: brightness(1.04); } .dx-btn:active { transform: scale(.98); } .dx-btn svg { width: 17px; height: 17px; } /* 5.5 IconBtn */ .dx-iconbtn { position: relative; width: 40px; height: 40px; border-radius: 14px; background: var(--dx-card); border: 1px solid var(--dx-line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--dx-ink); } .dx-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 9px; background: var(--dx-coral); border: 1.5px solid #fff; } /* 5.6 Avatar */ .dx-avatar { border-radius: var(--dx-r-pill); background: var(--dx-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } /* 5.7 ProgressBar */ .dx-progress { height: 6px; border-radius: 6px; background: var(--dx-paper-warm); overflow: hidden; display: flex; } .dx-progress > i { display: block; height: 100%; } /* 5.9 Segmented */ .dx-seg { display: flex; gap: 4px; background: var(--dx-paper-warm); border-radius: 13px; padding: 4px; } .dx-seg a, .dx-seg button { flex: 1; border: none; cursor: pointer; border-radius: 10px; padding: 8px 10px; font: 700 13px var(--dx-font); color: var(--dx-ink-soft); background: transparent; white-space: nowrap; text-align: center; text-decoration: none; } .dx-seg a[aria-selected="true"], .dx-seg button[aria-selected="true"] { background: var(--dx-card); color: var(--dx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* 5.10 Input / Select */ .dx-input, .dx-select { width: 100%; font: 500 14px var(--dx-font); color: var(--dx-ink); background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 13px; padding: 12px 14px; outline: none; } .dx-select { appearance: none; font-weight: 600; padding-right: 34px; } /* 5.11 ScreenHeader */ .dx-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dx-header__t { font: 800 26px var(--dx-font); letter-spacing: -.03em; color: var(--dx-ink); } .dx-header__sub { font: 500 14px var(--dx-font); color: var(--dx-ink-soft); margin-top: 3px; } .dx-header__actions { display: flex; gap: 8px; } /* Tile de icono (para filas "por resolver" / "más") */ .dx-tile { width: 38px; height: 38px; border-radius: var(--dx-r-icon); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* Iconos de línea genéricos */ .dx-ico { width: 22px; height: 22px; display: block; } .dx-ico--sm { width: 19px; height: 19px; } /* ============================================================ SHELL: sidebar (escritorio) + tabbar (móvil) + sheet "Más" Breakpoint único 1000px. ============================================================ */ .dx-app { display: flex; min-height: 100vh; } /* Sidebar (≥1000px) */ .dx-sidebar { width: 248px; flex-shrink: 0; background: var(--dx-card); border-right: 1px solid var(--dx-line); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 24px 16px; } .dx-sidebar__brand { padding: 0 8px 6px; display: flex; align-items: center; } .dx-sidebar__brand img { max-height: 40px; max-width: 100%; width: auto; } .dx-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; flex: 1 1 auto; overflow-y: auto; min-height: 0; } .dx-navitem { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; border: none; background: none; cursor: pointer; width: 100%; font: 600 14.5px var(--dx-font); color: var(--dx-ink); text-decoration: none; position: relative; transition: background .15s var(--dx-ease); } .dx-navitem:hover { background: var(--dx-paper-warm); } .dx-navitem.on { background: var(--dx-coral-soft); color: var(--dx-coral); font-weight: 700; } .dx-navitem svg { width: 21px; height: 21px; flex-shrink: 0; } .dx-navitem__dot { position: absolute; left: 26px; top: 9px; width: 8px; height: 8px; border-radius: 9px; background: var(--dx-coral); border: 1.5px solid var(--dx-card); } /* Acordeón del sidebar (escritorio): grupos expandibles */ .dx-navgrp { width: 100%; } .dx-navgrp__sum { list-style: none; } .dx-navgrp__sum::-webkit-details-marker { display: none; } .dx-navgrp__chev { margin-left: auto; display: inline-flex; color: var(--dx-ink-soft); transition: transform .18s var(--dx-ease); } .dx-navgrp__chev svg { width: 16px; height: 16px; } .dx-navgrp[open] > .dx-navgrp__sum .dx-navgrp__chev { transform: rotate(90deg); } .dx-subnav { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; padding-left: 33px; } .dx-subitem { display: block; padding: 8px 12px; border-radius: 11px; text-decoration: none; font: 600 13.5px var(--dx-font); color: var(--dx-ink-soft); transition: background .15s var(--dx-ease); } .dx-subitem:hover { background: var(--dx-paper-warm); color: var(--dx-ink); } .dx-subitem.on { background: var(--dx-coral-soft); color: var(--dx-coral); font-weight: 700; } .dx-sidebar__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--dx-line); } .dx-sidebar__foot .dx-avatar { width: 34px; height: 34px; font-size: 14px; } .dx-sidebar__who { min-width: 0; } .dx-sidebar__name { font: 700 13px var(--dx-font); color: var(--dx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-sidebar__role { font: 500 11.5px var(--dx-font); color: var(--dx-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-sidebar__role a { color: var(--dx-coral); text-decoration: none; font-weight: 600; } /* Contenido */ .dx-main { flex: 1; min-width: 0; } .dx-main__inner { max-width: 920px; margin: 0 auto; padding: 0 32px 48px; } /* h1 de pantallas (incluye las viejas aún no rediseñadas, p.ej. dentro de .toprow) */ .dx-main__inner h1 { font: 800 26px var(--dx-font); letter-spacing: -.03em; color: var(--dx-ink); margin: 26px 0 14px; } /* Tabbar (móvil) — oculta en escritorio */ .dx-tabbar { display: none; } .dx-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; color: var(--dx-mute); text-decoration: none; padding: 4px 0; position: relative; } .dx-tab svg { width: 23px; height: 23px; } .dx-tab .dx-tab__lbl { font: 600 10.5px var(--dx-font); } .dx-tab.on { color: var(--dx-coral); } .dx-tab.on .dx-tab__lbl { font-weight: 700; } .dx-tab__dot { position: absolute; top: 1px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 9px; background: var(--dx-coral); border: 1.5px solid var(--dx-paper); } /* Sheet "Más" (toggle por checkbox, sin JS) */ .dx-mastoggle { position: absolute; opacity: 0; pointer-events: none; } .dx-sheet { position: fixed; inset: 0; z-index: 60; visibility: hidden; } .dx-sheet__scrim { position: absolute; inset: 0; background: rgba(37,51,46,.38); opacity: 0; transition: opacity .22s var(--dx-ease); cursor: pointer; } .dx-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--dx-card); border-radius: 22px 22px 0 0; padding: 14px 18px max(18px, env(safe-area-inset-bottom)); max-height: 82vh; overflow: auto; transform: translateY(100%); transition: transform .26s var(--dx-ease); box-shadow: 0 -10px 40px rgba(37,51,46,.18); } .dx-sheet__grab { width: 38px; height: 4px; border-radius: 9px; background: var(--dx-line); margin: 2px auto 12px; } .dx-mastoggle:checked ~ .dx-sheet { visibility: visible; } .dx-mastoggle:checked ~ .dx-sheet .dx-sheet__scrim { opacity: 1; } .dx-mastoggle:checked ~ .dx-sheet .dx-sheet__panel { transform: translateY(0); } .dx-sheet__grp { margin: 6px 0 14px; } .dx-sheet__row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--dx-line); color: var(--dx-ink); text-decoration: none; } .dx-sheet__grp .dx-sheet__row:first-of-type { border-top: none; } .dx-sheet__row .dx-tile { width: 36px; height: 36px; background: var(--dx-paper-warm); } .dx-sheet__row svg { width: 19px; height: 19px; color: var(--dx-ink-soft); } .dx-sheet__rt { flex: 1; font: 700 14.5px var(--dx-font); color: var(--dx-ink); } .dx-sheet__chev { color: var(--dx-mute); } .dx-sheet__logout { display: block; width: 100%; text-align: center; margin-top: 4px; padding: 13px; border-radius: 13px; border: 1px solid var(--dx-line); background: var(--dx-card); color: var(--dx-coral); font: 700 14px var(--dx-font); text-decoration: none; } /* Banner de impersonación dentro del shell nuevo */ .dx-main .aviso-impersonacion { margin: 18px 0 0; } /* ---- Responsive: < 1000px = móvil ---- */ @media (max-width: 999px) { .dx-app { flex-direction: column; max-width: 560px; margin: 0 auto; } .dx-sidebar { display: none; } .dx-main__inner { padding: 0 18px 16px; } .dx-main__inner > h1 { font-size: 24px; margin: 18px 0 12px; } .dx-tabbar { display: flex; position: sticky; bottom: 0; z-index: 30; background: rgba(250,248,245,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--dx-line); padding: 10px 8px max(10px, env(safe-area-inset-bottom)); } } @media (min-width: 1000px) { /* Sheet "Más" como modal centrado en escritorio */ .dx-sheet__panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -46%); width: min(440px, 92vw); border-radius: 22px; max-height: 80vh; } .dx-mastoggle:checked ~ .dx-sheet .dx-sheet__panel { transform: translate(-50%, -50%); } .dx-sheet__grab { display: none; } } /* ============================================================ PANTALLA: Inicio / Tablero ============================================================ */ .dx-greet { font: 800 26px var(--dx-font); letter-spacing: -.03em; color: var(--dx-ink); } .dx-greet-sub { font: 500 14px var(--dx-font); color: var(--dx-ink-soft); margin-top: 3px; } .dx-dash__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; } .dx-dash__head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dx-dash__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin-top: 10px; align-items: start; grid-template-areas: "fin hoy" "fin resolver"; } .dx-area-fin { grid-area: fin; } .dx-area-hoy { grid-area: hoy; } .dx-area-resolver { grid-area: resolver; } @media (max-width: 999px) { .dx-dash__grid { grid-template-columns: 1fr; gap: 0; grid-template-areas: "hoy" "fin" "resolver"; } } .dx-row2 { display: flex; gap: 12px; margin-top: 12px; } .dx-row2 > * { flex: 1; min-width: 0; } .dx-hero-num { font: 800 38px var(--dx-font); letter-spacing: -.03em; color: var(--dx-ink); line-height: 1; margin-top: 6px; } .dx-stat-lbl { font: 600 12px var(--dx-font); color: var(--dx-ink-soft); } .dx-stat-num { font: 800 23px var(--dx-font); letter-spacing: -.02em; line-height: 1; margin: 6px 0; } .dx-stat-sub { font: 500 12px var(--dx-font); color: var(--dx-ink-soft); } .dx-legend { display: flex; justify-content: space-between; margin-top: 8px; font: 600 11.5px var(--dx-font); color: var(--dx-ink-soft); } .dx-resolve-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; } .dx-resolve-row + .dx-resolve-row { border-top: 1px solid var(--dx-line); } .dx-resolve-row__t { flex: 1; } .dx-resolve-row__t b { display: block; font: 700 14px var(--dx-font); color: var(--dx-ink); } .dx-resolve-row__t span { font: 500 12px var(--dx-font); color: var(--dx-ink-soft); } .dx-resolve-row__n { font: 800 19px var(--dx-font); color: var(--dx-ink); } .dx-resolve-row .dx-tile svg { width: 19px; height: 19px; } .dx-resolve-row__chev { color: var(--dx-mute); display: flex; } .dx-resolve-row__chev svg { width: 18px; height: 18px; } /* Lista compacta (limpiezas/mantenimiento de hoy) dentro de Card--flush */ .dx-list-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; } .dx-list-row + .dx-list-row { border-top: 1px solid var(--dx-line); } .dx-list-row__dot { width: 10px; height: 10px; border-radius: 9px; flex-shrink: 0; } .dx-list-row__main { flex: 1; min-width: 0; } .dx-list-row__t { font: 700 14px var(--dx-font); color: var(--dx-ink); } .dx-list-row__s { font: 500 12px var(--dx-font); color: var(--dx-ink-soft); margin-top: 1px; } .dx-ring__num { font-weight: 800; color: var(--dx-ink); line-height: 1; } .dx-ring__sub { font-size: 10px; color: var(--dx-mute); margin-top: 1px; } /* Stats en fila con divisores (Mi Día) */ .dx-stats { display: flex; } .dx-stats > div { flex: 1; text-align: center; padding: 0 6px; min-width: 0; } .dx-stats > div + div { border-left: 1px solid var(--dx-line); } .dx-stats__num { font: 800 26px var(--dx-font); line-height: 1; color: var(--dx-ink); } .dx-stats__lbl { font: 700 10.5px var(--dx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-ink-soft); margin-top: 5px; } /* Cabecera de un slot de limpieza (Mi Día) */ .dx-slot-head { display: flex; align-items: center; gap: 10px; } .dx-slot-head__main { flex: 1; min-width: 0; } /* Slot colapsable (Mi Día): clic en la cabecera expande */ .dx-slot-acc > summary { list-style: none; cursor: pointer; } .dx-slot-acc > summary::-webkit-details-marker { display: none; } .dx-slot-acc__chev { color: var(--dx-ink-soft); display: inline-flex; flex-shrink: 0; transition: transform .18s var(--dx-ease); } .dx-slot-acc__chev svg { width: 18px; height: 18px; } .dx-slot-acc[open] > summary .dx-slot-acc__chev { transform: rotate(90deg); } .dx-slot-head__t { font: 700 14.5px var(--dx-font); color: var(--dx-ink); } .dx-slot-head__s { font: 500 12.5px var(--dx-font); color: var(--dx-ink-soft); margin-top: 1px; } .dx-note-amber { background: var(--dx-amber-soft); border: 1px solid rgba(224,138,11,.32); color: #9a6a00; border-radius: 13px; padding: 10px 14px; font: 600 13px var(--dx-font); margin: 8px 0; } /* ============================================================ PANTALLA: Cierres mensuales ============================================================ */ .dx-controls { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .dx-controls .dx-input { flex: 1; min-width: 180px; } .dx-cierre-grid { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 1000px) { .dx-cierre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } .dx-cierre-card { display: flex; align-items: center; gap: 13px; padding: 16px; } .dx-cierre-card__main { flex: 1; min-width: 0; } .dx-cierre-card__name { font: 700 14.5px var(--dx-font); color: var(--dx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-cierre-card__sub { font: 500 12.5px var(--dx-font); color: var(--dx-ink-soft); margin-top: 2px; } .dx-cierre-card__right { text-align: right; flex-shrink: 0; } .dx-cierre-card__amt { font: 800 16.5px var(--dx-font); letter-spacing: -.01em; white-space: nowrap; } .dx-cierre-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dx-line); } /* ============================================================ PANTALLA: Mantenimiento ============================================================ */ .dx-cards2 { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 1000px) { .dx-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } } .dx-rep { display: flex; gap: 13px; align-items: flex-start; padding: 16px; } .dx-rep__date { width: 44px; flex-shrink: 0; text-align: center; } .dx-rep__date-m { font: 700 11px var(--dx-font); color: var(--dx-mute); text-transform: uppercase; } .dx-rep__date-d { font: 800 20px var(--dx-font); color: var(--dx-ink); line-height: 1; } .dx-rep__div { width: 1px; align-self: stretch; background: var(--dx-line); flex-shrink: 0; } .dx-rep__body { flex: 1; min-width: 0; } .dx-rep__head { display: flex; align-items: center; gap: 8px; } .dx-rep__dot { width: 8px; height: 8px; border-radius: 8px; flex-shrink: 0; } .dx-rep__prop { font: 700 14px var(--dx-font); color: var(--dx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-rep__desc { font: 500 13px var(--dx-font); color: var(--dx-ink-soft); margin-top: 5px; line-height: 1.4; } .dx-rep__badges { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; } /* ============================================================ PANTALLA: WhatsApp (buzón) — lista de conversaciones + hilo ============================================================ */ .dx-convo { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 16px; margin-bottom: 8px; overflow: hidden; } .dx-convo__sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; } .dx-convo__sum::-webkit-details-marker { display: none; } .dx-convo[open] .dx-convo__sum { border-bottom: 1px solid var(--dx-line); } .dx-convo__main { flex: 1; min-width: 0; } .dx-convo__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .dx-convo__name { font: 700 14px var(--dx-font); color: var(--dx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-convo__time { font: 500 11.5px var(--dx-font); color: var(--dx-mute); flex-shrink: 0; } .dx-convo__snip { font: 500 12.5px var(--dx-font); color: var(--dx-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .dx-convo__body { padding: 12px 14px 14px; } .dx-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .dx-bub { max-width: 84%; padding: 9px 12px; border-radius: 14px; font: 500 13.5px var(--dx-font); line-height: 1.4; word-wrap: break-word; } .dx-bub__meta { font: 600 11px var(--dx-font); opacity: .7; margin-bottom: 3px; } .dx-bub--in { align-self: flex-start; background: var(--dx-paper); border: 1px solid var(--dx-line); color: var(--dx-ink); border-bottom-left-radius: 5px; } .dx-bub--out { align-self: flex-end; background: var(--dx-ink); color: #fff; border-bottom-right-radius: 5px; } .dx-bub--out .dx-bub__meta { color: #fff; } .dx-bub--sys { align-self: flex-start; background: var(--dx-coral-soft); border-left: 3px solid var(--dx-coral); color: var(--dx-ink); border-radius: 6px 14px 14px 6px; } .dx-bub__adj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* Master-detail (lista + hilo) */ .dx-wa { display: flex; gap: 16px; margin-top: 14px; align-items: flex-start; } .dx-wa__list { flex-shrink: 0; width: 100%; } .dx-wa__detail { flex: 1; min-width: 0; } .dx-wa-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; text-decoration: none; } .dx-wa-row:hover { background: var(--dx-paper-warm); } .dx-wa-row.on { background: var(--dx-coral-soft); } .dx-wa-row__main { flex: 1; min-width: 0; } .dx-wa-detail__card { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 16px; padding: 16px; } .dx-wa-detail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--dx-line); } .dx-wa-back { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--dx-line); background: var(--dx-card); color: var(--dx-ink); text-decoration: none; flex-shrink: 0; } .dx-wa-back svg { width: 18px; height: 18px; } .dx-wa-empty { display: flex; align-items: center; justify-content: center; min-height: 220px; color: var(--dx-mute); font: 500 14px var(--dx-font); text-align: center; } @media (min-width: 1000px) { .dx-wa__list { width: 340px; } } @media (max-width: 999px) { .dx-wa { display: block; } .dx-wa-back { display: inline-flex; } .dx-wa--sel .dx-wa__list { display: none; } .dx-wa:not(.dx-wa--sel) .dx-wa__detail { display: none; } } /* ============================================================ PORTAL del huésped (externo, full-bleed, sin shell) ============================================================ */ .dxp-wrap { max-width: 760px; margin: 0 auto; padding-bottom: 44px; } .dxp-pad { padding: 0 20px; } .dxp-hero { position: relative; height: 230px; background: var(--dx-coral-soft) center/cover no-repeat; } .dxp-hero__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dx-coral); font: 600 13px var(--dx-font); opacity: .7; } .dxp-hero__ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; background: linear-gradient(to top, rgba(37,51,46,.74), rgba(37,51,46,0) 62%); color: #fff; } .dxp-hero__pin { display: inline-flex; align-items: center; gap: 5px; font: 700 11px var(--dx-font); letter-spacing: .12em; text-transform: uppercase; opacity: .92; } .dxp-hero__pin .dxp-ic { color: var(--dx-coral); } .dxp-hero__name { font: 800 22px var(--dx-font); letter-spacing: -.02em; margin-top: 4px; } .dxp-logo { height: 26px; display: block; margin: 18px 20px 0; } .dxp-card { margin-top: 14px; } .dxp-h { font: 800 17px var(--dx-font); color: var(--dx-ink); letter-spacing: -.01em; margin: 0 0 12px; } .dxp-ic { display: inline-block; vertical-align: middle; } .dxp-field { display: block; margin-bottom: 12px; } .dxp-field > span { display: block; font: 600 12.5px var(--dx-font); color: var(--dx-ink-soft); margin-bottom: 5px; } .dxp-stat { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--dx-line); font: 600 14px var(--dx-font); color: var(--dx-ink); } .dxp-stat:last-child { border-bottom: none; } .dxp-stat b { color: var(--dx-ink-soft); font-weight: 600; } .dxp-code { background: var(--dx-paper-warm); border: 1px solid var(--dx-line); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; } .dxp-code__l { font: 700 11px var(--dx-font); letter-spacing: .05em; text-transform: uppercase; color: var(--dx-ink-soft); } .dxp-code__v { font: 600 14px var(--dx-font); color: var(--dx-ink); margin-top: 3px; word-break: break-word; } .dxp-code__v--pend { font-weight: 500; font-size: 12.5px; color: var(--dx-ink-soft); font-style: italic; } .dxp-file { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px dashed var(--dx-line); border-radius: 13px; background: var(--dx-card); color: var(--dx-ink); font: 600 13px var(--dx-font); cursor: pointer; } .dxp-file input { display: none; } .dxp-id { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .dxp-id-fb { display: flex; align-items: center; gap: 10px; min-height: 20px; } .dxp-id-thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 11px; border: 1px solid var(--dx-line); background: var(--dx-paper-warm); } .dxp-id-state { font: 600 13px var(--dx-font); color: var(--dx-ink-soft); } .dxp-id-state.ok { color: var(--dx-green); font-weight: 700; } .dxp-id-state.err { color: var(--dx-coral); } .dxp-check { display: flex; gap: 10px; align-items: flex-start; font: 500 14px var(--dx-font); color: var(--dx-ink); cursor: pointer; } .dxp-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--dx-coral); } .dxp-ok { color: var(--dx-green); font-weight: 700; font-size: 14px; } .dxp-priv { margin-top: 10px; } .dxp-priv summary { cursor: pointer; color: var(--dx-coral); font: 600 13px var(--dx-font); } .dxp-priv pre { white-space: pre-wrap; font: 400 12.5px var(--dx-font); color: var(--dx-ink-soft); margin-top: 8px; } .dxp-aviso { font: 500 12.5px var(--dx-font); color: var(--dx-amber); margin: 6px 0 0; } .dxp-confirm { width: 100%; margin-top: 14px; } .dxp-okbanner { margin: 14px 20px 0; padding: 11px 14px; border-radius: 13px; background: var(--dx-green-soft); color: var(--dx-green); font: 700 14px var(--dx-font); text-align: center; } .dxp-checkin { display: flex; gap: 12px; } .dxp-checkin > div { flex: 1; } .dxp-checkin__l { font: 700 11px var(--dx-font); letter-spacing: .05em; text-transform: uppercase; color: var(--dx-ink-soft); } .dxp-checkin__big { font: 800 17px var(--dx-font); color: var(--dx-ink); margin-top: 4px; } .dxp-checkin__sub { font: 500 12px var(--dx-font); color: var(--dx-ink-soft); margin-top: 2px; } .dxp-checkin__div { width: 1px; background: var(--dx-line); flex: 0 0 1px; } .dxp-codes { display: flex; gap: 10px; flex-wrap: wrap; } .dxp-codes .dxp-code { flex: 1 1 140px; margin-bottom: 0; } .dxp-map { width: 100%; height: 150px; border: 1px solid var(--dx-line); border-radius: 14px; margin: 12px 0; } .dxp-locked { background: var(--dx-paper-warm); border: 1px dashed var(--dx-line); border-radius: 13px; padding: 14px; color: var(--dx-ink-soft); font: 500 13px var(--dx-font); text-align: center; } .dxp-host { display: flex; align-items: center; gap: 13px; } .dxp-host__pin { width: 46px; height: 46px; border-radius: 46px; background: var(--dx-coral-soft); display: flex; align-items: center; justify-content: center; color: var(--dx-coral); flex-shrink: 0; } .dxp-host__main { flex: 1; min-width: 0; } .dxp-done { display: flex; align-items: center; gap: 8px; color: var(--dx-green); font: 700 14px var(--dx-font); } .dxp-edit > summary { cursor: pointer; color: var(--dx-coral); font: 600 13px var(--dx-font); margin-top: 8px; } /* ============================================================ PUENTE: reestiliza al lenguaje nuevo las clases viejas (Liquid Glass) de las pantallas aún no rediseñadas. SOLO cosmético (color/borde/radio/sombra/fuente); no toca layout ni lógica. Scoping por nombre de clase viejo → no afecta a los componentes dx-* de las pantallas ya migradas. ============================================================ */ /* Botones */ body.dx .btn { background: var(--dx-coral); color: #fff; border: 1px solid transparent; border-radius: var(--dx-r-control); box-shadow: none; font-family: var(--dx-font); font-weight: 700; } body.dx .btn:hover { filter: brightness(1.04); box-shadow: none; } body.dx .btn-secundario { background: var(--dx-card); color: var(--dx-ink); border: 1px solid var(--dx-line); border-radius: var(--dx-r-control); box-shadow: none; font-family: var(--dx-font); } body.dx .btn-secundario:hover { background: var(--dx-paper-warm); } body.dx .btn-icono { background: var(--dx-card); border: 1px solid var(--dx-line); color: var(--dx-ink-soft); border-radius: 11px; } body.dx .btn-icono:hover { background: var(--dx-paper-warm); color: var(--dx-ink); } body.dx .btn-icono.peligro:hover { color: var(--dx-coral); border-color: var(--dx-coral); } /* Tarjetas / formularios viejos */ body.dx .formulario { background: var(--dx-card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--dx-line); box-shadow: none; border-radius: 16px; } body.dx .tarjeta { background: var(--dx-card); border: 1px solid var(--dx-line); box-shadow: none; border-radius: 16px; } /* Campos de formulario viejos */ body.dx .campo label { color: var(--dx-ink-soft); font-family: var(--dx-font); } body.dx .campo input, body.dx .campo select, body.dx .campo textarea, body.dx .selector-vidrio { background: var(--dx-card); color: var(--dx-ink); border: 1px solid var(--dx-line); border-radius: var(--dx-r-control); font-family: var(--dx-font); } body.dx .campo input:focus, body.dx .campo select:focus, body.dx .campo textarea:focus { border-color: var(--dx-coral); box-shadow: none; } /* KPIs viejos */ body.dx .kpi { background: var(--dx-card); border: 1px solid var(--dx-line); box-shadow: none; border-radius: 16px; } body.dx a.kpi:hover { box-shadow: none; transform: none; } body.dx .kpi .lbl { color: var(--dx-ink-soft); } body.dx .kpi .cifra.cobrar { color: var(--dx-green); } body.dx .kpi .cifra.pagar { color: var(--dx-coral); } body.dx .kpi .cifra.neutro { color: var(--dx-ink); } /* Tablas viejas (solo color; el display:block móvil de estilo.css se conserva) */ body.dx table { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 16px; } body.dx th { background: var(--dx-paper-warm); color: var(--dx-ink-soft); border-bottom: 1px solid var(--dx-line); font-family: var(--dx-font); } body.dx td { border-bottom: 1px solid var(--dx-line); color: var(--dx-ink); font-family: var(--dx-font); } body.dx td a { color: var(--dx-coral); } body.dx tr:hover td { background: var(--dx-paper-warm); } /* Badges viejos */ body.dx .badge { font-family: var(--dx-font); border-radius: var(--dx-r-chip); } body.dx .badge-ok { background: var(--dx-green-soft); color: var(--dx-green); } body.dx .badge-espera { background: var(--dx-amber-soft); color: var(--dx-amber); } body.dx .badge-info { background: var(--dx-paper-warm); color: var(--dx-ink-soft); } /* Texto auxiliar / secciones / avisos viejos */ body.dx .vacio { color: var(--dx-ink-soft); background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 16px; } body.dx .hint { color: var(--dx-ink-soft); } body.dx .seccion-form, body.dx .seccion-titulo { color: var(--dx-ink-soft); font-family: var(--dx-font); } body.dx .banner-leido { background: var(--dx-green-soft); border: 1px solid rgba(21,155,91,.3); color: var(--dx-green); border-radius: 13px; } /* ============================================================ PANTALLA: Calendario de limpiezas (bespoke) Restyle de las tarjetas de día y slots. NO toca la mecánica de colapso (.slot-colapsado / .slot-expandido), solo color. ============================================================ */ .dx-weeknav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; } .dx-weeknav form { margin: 0; } body.dx .dia-bloque { background: var(--dx-card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--dx-line); box-shadow: none; border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; } body.dx .dia-bloque .dia-titulo { color: var(--dx-ink); font: 800 15px var(--dx-font); letter-spacing: -.01em; } body.dx .dia-bloque.hoy { border: 1.5px solid var(--dx-coral); box-shadow: none; } body.dx .dia-bloque.hoy .dia-titulo { color: var(--dx-coral); } body.dx .dia-bloque .dia-titulo .hoy-tag { background: var(--dx-coral); color: #fff; font-family: var(--dx-font); border-radius: 999px; } body.dx .dia-bloque li { border-bottom: 1px solid var(--dx-line); } body.dx .dia-bloque .slot-info b { color: var(--dx-ink); } body.dx .dia-bloque .vacio-dia { color: var(--dx-ink-soft); } body.dx .dia-bloque .slot-notas { color: var(--dx-ink-soft); } body.dx .dia-bloque input[type=date] { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 10px; font-family: var(--dx-font); color: var(--dx-ink); } /* ---- Movimiento táctil / reduced-motion ---- */ @media (hover: none) { .dx-navitem:hover { background: none; } .dx-btn:hover { filter: none; } } @media (prefers-reduced-motion: reduce) { .dx-sheet__scrim, .dx-sheet__panel, .dx-btn, .dx-navitem { transition: none; } } /* ============================================================ PORTAL DEL HUÉSPED — guía estructurada (rediseño 2026-06). Clases portadas del mockup "Portal Huésped DestinoCDMX.html", scopeadas bajo body.dxp para no chocar con el panel. Usan los tokens --dx-* existentes (no se redefine :root). El portal sigue con Plus Jakarta Sans self-hosted (sin Newsreader / Google Fonts). Las clases dxp-* del formulario de pre check-in se conservan. ============================================================ */ body.dxp { background: var(--dx-paper-warm); } body.dxp .wrap { max-width: 600px; margin: 0 auto; background: var(--dx-paper); min-height: 100vh; box-shadow: 0 0 60px -20px rgba(37,51,46,.25); } @media (min-width: 660px) { body.dxp .wrap { margin: 24px auto; border-radius: 28px; overflow: hidden; min-height: auto; } body.dxp { padding-bottom: 24px; } } /* top bar */ body.dxp .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: rgba(250,248,245,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--dx-line); } body.dxp .brand { display: flex; align-items: center; gap: 8px; font: 800 15px var(--dx-font); letter-spacing: -.01em; } body.dxp .brand b { color: var(--dx-coral); font-weight: 800; } body.dxp .brand__logo { height: 28px; width: auto; display: block; } body.dxp .lang { display: flex; gap: 3px; background: var(--dx-paper-warm); border-radius: 10px; padding: 3px; } body.dxp .lang a { border: none; background: transparent; border-radius: 8px; padding: 6px 11px; font: 700 12.5px var(--dx-font); color: var(--dx-ink-soft); text-decoration: none; transition: background .15s var(--ease-out, ease); } body.dxp .lang a.on { background: var(--dx-card); color: var(--dx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* hero */ body.dxp .hero { position: relative; } body.dxp .hero__media { width: 100%; height: 330px; display: block; background: linear-gradient(135deg,#EFE7DC,#E3D7C7) center/cover no-repeat; } @media (max-width: 480px) { body.dxp .hero__media { height: 290px; } } body.dxp .hero__grad { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(20,16,14,.74)); pointer-events: none; } body.dxp .hero__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; } body.dxp .hero__eyebrow { display: flex; align-items: center; gap: 7px; font: 700 11.5px var(--dx-font); letter-spacing: .14em; text-transform: uppercase; opacity: .94; } body.dxp .hero__eyebrow .dxp-ic { color: var(--dx-coral); } body.dxp .hero__title { font: 800 31px/1.05 var(--dx-font); letter-spacing: -.02em; margin: 8px 0 0; } body.dxp .hero__loc { display: flex; align-items: center; gap: 6px; font: 500 13.5px var(--dx-font); margin-top: 8px; opacity: .92; } /* sections */ body.dxp .sec { padding: 24px 20px 0; } body.dxp .sec:last-of-type { padding-bottom: 28px; } body.dxp .eyebrow { font: 700 11.5px var(--dx-font); letter-spacing: .1em; text-transform: uppercase; color: var(--dx-coral); } body.dxp .h2 { font: 800 23px var(--dx-font); letter-spacing: -.02em; margin: 6px 0 0; color: var(--dx-ink); } body.dxp .lead { font: 400 14.5px/1.55 var(--dx-font); color: var(--dx-ink-soft); margin: 10px 0 0; } body.dxp .card { background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 18px; padding: 18px; } body.dxp .card + .card { margin-top: 14px; } body.dxp .klabel { font: 700 11px var(--dx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-ink-soft); } body.dxp .kbig { font: 800 23px var(--dx-font); margin-top: 5px; letter-spacing: -.02em; } body.dxp .ksub { font: 400 13px var(--dx-font); color: var(--dx-ink-soft); margin-top: 2px; } body.dxp .badge { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--dx-font); padding: 5px 10px; border-radius: 8px; white-space: nowrap; } body.dxp .badge--green { color: var(--dx-green); background: var(--dx-green-soft); } body.dxp .badge--amber { color: var(--dx-amber); background: var(--dx-amber-soft); } body.dxp .badge--coral { color: var(--dx-coral); background: var(--dx-coral-soft); } /* reservation */ body.dxp .resv { display: flex; align-items: stretch; } body.dxp .resv__col { flex: 1; } body.dxp .resv__div { width: 1px; background: var(--dx-line); margin: 0 18px; } body.dxp .resv__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dx-line); flex-wrap: wrap; } /* status row */ body.dxp .status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--dx-green-soft); margin-top: 14px; } body.dxp .status__ic { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--dx-green); } body.dxp .status__t { flex: 1; font: 700 14px var(--dx-font); color: var(--dx-green); } body.dxp .status__a { font: 700 13px var(--dx-font); color: var(--dx-coral); cursor: pointer; } /* timeline */ body.dxp .tl__item { display: flex; gap: 14px; } body.dxp .tl__rail { display: flex; flex-direction: column; align-items: center; } body.dxp .tl__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--dx-coral-soft); color: var(--dx-coral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 800 13px var(--dx-font); } body.dxp .tl__line { flex: 1; width: 2px; background: var(--dx-line); margin: 4px 0; } body.dxp .tl__item:last-child .tl__line { display: none; } body.dxp .tl__body { padding-bottom: 16px; flex: 1; } body.dxp .tl__t { font: 700 14.5px/1.3 var(--dx-font); } body.dxp .tl__d { font: 400 13px/1.5 var(--dx-font); color: var(--dx-ink-soft); margin-top: 3px; } body.dxp .tl__d a { color: var(--dx-coral); font-weight: 600; text-decoration: none; } /* codes */ body.dxp .codes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; } body.dxp .code { background: var(--dx-paper); border: 1px solid var(--dx-line); border-radius: 14px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.dxp .code__l { font: 600 11.5px var(--dx-font); color: var(--dx-ink-soft); white-space: nowrap; } body.dxp .code__v { font: 800 17px ui-monospace, 'SF Mono', monospace; letter-spacing: .04em; margin-top: 3px; } body.dxp .code__v--pend { font: italic 500 12.5px var(--dx-font); letter-spacing: 0; color: var(--dx-ink-soft); } body.dxp .copy { border: none; background: var(--dx-coral-soft); color: var(--dx-coral); border-radius: 9px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s var(--ease-out, ease), color .15s var(--ease-out, ease); cursor: pointer; } body.dxp .copy:active { transform: scale(.92); } body.dxp .copy.done { background: var(--dx-green-soft); color: var(--dx-green); } body.dxp .codes--row { grid-template-columns: 1fr 1fr 1fr; } body.dxp .codes--row .code { display: block; padding: 13px; } body.dxp .codes--row .code__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } body.dxp .codes--row .code__v { margin-top: 7px; } body.dxp .note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 13px; background: var(--dx-amber-soft); } body.dxp .note .dxp-ic { flex-shrink: 0; margin-top: 1px; color: var(--dx-amber); } body.dxp .note__t { font: 400 12.8px/1.5 var(--dx-font); color: var(--dx-ink); } body.dxp .note__t b { font-weight: 800; } body.dxp .note--green { background: var(--dx-green-soft); } body.dxp .note--green .dxp-ic { color: var(--dx-green); } /* CTA pre check-in (solo cuando el huésped no ha confirmado) */ body.dxp .cta { display: flex; gap: 13px; align-items: flex-start; background: var(--dx-coral-soft); border: 1px solid var(--dx-coral); border-radius: 18px; padding: 16px 18px; } body.dxp .cta__ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--dx-card); color: var(--dx-coral); display: flex; align-items: center; justify-content: center; } body.dxp .cta__t { font: 800 16px var(--dx-font); letter-spacing: -.01em; color: var(--dx-ink); } body.dxp .cta__d { font: 500 13.5px/1.5 var(--dx-font); color: var(--dx-ink-soft); margin-top: 4px; } /* ===== Acceso self-service del huésped ===== */ body.dxp .acc-wrap { padding-bottom: 32px; } body.dxp .acc-step { margin-top: 14px; } body.dxp .acc-actions { display: flex; gap: 10px; margin-top: 14px; } body.dxp .acc-actions .dx-btn { flex: 1; } body.dxp .acc-aviso { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px; background: var(--dx-amber-soft); border: 1px solid var(--dx-amber); border-radius: 14px; padding: 13px 15px; font: 500 13.5px/1.5 var(--dx-font); color: var(--dx-ink); } body.dxp .acc-aviso .dxp-ic { flex-shrink: 0; color: var(--dx-amber); margin-top: 1px; } /* ===== Calendario de rango ===== */ body.dxp .cal { user-select: none; } body.dxp .cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } body.dxp .cal__title { font: 800 15px var(--dx-font); color: var(--dx-ink); text-transform: capitalize; } body.dxp .cal__nav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--dx-line); background: var(--dx-card); color: var(--dx-ink); font-size: 20px; line-height: 1; cursor: pointer; } body.dxp .cal__nav:active { transform: scale(.94); } body.dxp .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } body.dxp .cal__dowc { text-align: center; font: 700 10.5px var(--dx-font); letter-spacing: .03em; text-transform: uppercase; color: var(--dx-ink-soft); padding: 4px 0 6px; } body.dxp .cal__day { aspect-ratio: 1/1; border: none; background: transparent; border-radius: 10px; font: 600 13.5px var(--dx-font); color: var(--dx-ink); cursor: pointer; padding: 0; transition: background .12s var(--dx-ease); } body.dxp .cal__day:hover { background: var(--dx-paper-warm); } body.dxp .cal__day--empty { visibility: hidden; cursor: default; } body.dxp .cal__day--in { background: var(--dx-coral-soft); border-radius: 0; } body.dxp .cal__day--start, body.dxp .cal__day--end { background: var(--dx-coral); color: #fff; } body.dxp .cal__day--start { border-radius: 10px 0 0 10px; } body.dxp .cal__day--end { border-radius: 0 10px 10px 0; } body.dxp .cal__day--start.cal__day--end { border-radius: 10px; } body.dxp .cal__summary { margin-top: 12px; min-height: 18px; font: 500 13px var(--dx-font); color: var(--dx-ink-soft); text-align: center; } body.dxp .cal__summary--on { color: var(--dx-ink); } @media (hover: none) { body.dxp .cal__day:hover { background: transparent; } } /* Modal de aviso (título de marca + mensaje) */ body.dxp .pmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(37,51,46,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.dxp .pmodal[hidden] { display: none; } body.dxp .pmodal__card { background: var(--dx-card); border-radius: 20px; padding: 22px 22px 18px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 24px 60px -22px rgba(0,0,0,.45); } body.dxp .pmodal__brand { font: 800 18px var(--dx-font); letter-spacing: -.01em; color: var(--dx-ink); } body.dxp .pmodal__brand b { color: var(--dx-coral); } body.dxp .pmodal__body { font: 500 14px/1.5 var(--dx-font); color: var(--dx-ink-soft); margin: 12px 0 18px; } body.dxp .pmodal__ok { width: 100%; } /* Hint bajo un campo del formulario */ body.dxp .dxp-hint { display: block; font: 500 12px/1.45 var(--dx-font); color: var(--dx-ink-soft); margin-top: 6px; } /* Anti auto-zoom de iOS: los campos del portal deben tener >=16px al enfocarse */ body.dxp .dx-input, body.dxp .dx-select { font-size: 16px; } /* map */ body.dxp .map { position: relative; height: 170px; border-radius: 14px; overflow: hidden; border: 1px solid var(--dx-line); margin-top: 14px; background: #E7EEE7; } body.dxp .map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); z-index: 1; color: var(--dx-coral); } body.dxp .map iframe { position: relative; z-index: 2; width: 100%; height: 100%; border: 0; display: block; filter: saturate(.92); } /* generic list */ body.dxp .ll { margin-top: 6px; } body.dxp .li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; } body.dxp .li + .li { border-top: 1px solid var(--dx-line); } body.dxp .li__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--dx-paper-warm); display: flex; align-items: center; justify-content: center; color: var(--dx-ink-soft); } body.dxp .li__t { font: 700 14px/1.3 var(--dx-font); } body.dxp .li__d { font: 400 12.8px/1.5 var(--dx-font); color: var(--dx-ink-soft); margin-top: 3px; } body.dxp .li__d a { color: var(--dx-coral); font-weight: 600; text-decoration: none; } /* amenities */ body.dxp .amen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 6px; } @media (max-width: 420px) { body.dxp .amen { grid-template-columns: 1fr 1fr; } } body.dxp .amen__g { background: var(--dx-paper); border: 1px solid var(--dx-line); border-radius: 14px; padding: 13px 12px; } body.dxp .amen__h { display: flex; align-items: center; gap: 7px; font: 700 11px var(--dx-font); letter-spacing: .05em; text-transform: uppercase; color: var(--dx-coral); } body.dxp .amen__i { font: 500 13px var(--dx-font); color: var(--dx-ink); margin-top: 8px; display: flex; align-items: center; gap: 7px; } body.dxp .amen__i + .amen__i { margin-top: 6px; } body.dxp .amen__i::before { content: ""; width: 5px; height: 5px; border-radius: 5px; background: var(--dx-green); flex-shrink: 0; } /* emergency */ body.dxp .emerg { background: linear-gradient(180deg,#FFF6F4,#FFFFFF); border: 1px solid var(--dx-coral-soft); } body.dxp .emerg .li__ic { background: var(--dx-coral-soft); color: var(--dx-coral); } body.dxp .call911 { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--dx-coral); color: #fff; border-radius: 13px; padding: 13px 16px; margin-bottom: 6px; } body.dxp .call911 a { color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } body.dxp .call911 b { font: 800 15px var(--dx-font); } body.dxp .call911 span { font: 400 12.5px var(--dx-font); opacity: .9; } /* host */ body.dxp .host { display: flex; align-items: center; gap: 14px; } body.dxp .host__ic { width: 50px; height: 50px; border-radius: 50%; background: var(--dx-coral-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--dx-coral); } body.dxp .host__t { font: 700 11px var(--dx-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-ink-soft); } body.dxp .host__n { font: 800 16px var(--dx-font); margin-top: 2px; } body.dxp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 13px; padding: 13px 18px; font: 700 14px var(--dx-font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: filter .15s var(--ease-out, ease); } body.dxp .btn:active { transform: scale(.98); } body.dxp .btn--wa { background: var(--dx-green); color: #fff; } body.dxp .btn--soft { background: var(--dx-paper-warm); color: var(--dx-ink); border: 1px solid var(--dx-line); } body.dxp .btn--block { width: 100%; } /* footer */ body.dxp .foot { margin-top: 28px; padding: 24px 20px 30px; background: var(--dx-paper-warm); color: var(--dx-ink-soft); text-align: center; border-top: 1px solid var(--dx-line); } body.dxp .foot__brand { display: inline-flex; align-items: center; gap: 7px; font: 800 15px var(--dx-font); color: #fff; } body.dxp .foot__brand .dxp-ic { color: var(--dx-coral); } /* Logo horizontal en el footer (a color, sobre fondo claro) */ body.dxp .foot__logo { height: 44px; width: auto; max-width: 80%; display: inline-block; } body.dxp .foot small { display: block; font: 400 12px/1.6 var(--dx-font); margin-top: 8px; opacity: .6; } @media (hover: none) { body.dxp .btn:hover { filter: none; } } @media (prefers-reduced-motion: reduce) { body.dxp .lang a, body.dxp .copy, body.dxp .btn { transition: none; } } /* Combobox con filtrado en vivo (data-combo) — componente del sistema dx-*. */ .dx-combo { position: relative; } .dx-combo__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 4px; list-style: none; max-height: 264px; overflow-y: auto; background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: var(--dx-r-control); box-shadow: var(--dx-shadow-card); } .dx-combo__opt { padding: 9px 10px; border-radius: var(--dx-r-chip); cursor: pointer; font-size: 14px; line-height: 1.3; color: var(--dx-ink); } .dx-combo__opt:hover, .dx-combo__opt.is-active { background: var(--dx-paper-warm); }