/* ============================================================ producto.css — LAS PANTALLAS DEL PRODUCTO adentro de la landing: la ficha (.fm) y la bandeja de Mensajes (.ms-marco). Se visten con ficha.css y mensajes.css (las hojas del PMS copiadas tal cual). Acá va sólo lo que en el PMS ponen el , tokens.css y .modal--full: los tokens (SIEMPRE claros: es una captura del producto) y el marco. ⭐ Los dos son CONTENEDORES (container-type): las @container de las hojas miran el ancho del marco, no el de la ventana — así la misma ficha se ve de compu a 1200px y de celular a 390px según dónde se la meta. ============================================================ */ .fm, .ms-marco { --color-bg: #eef1f4; --color-surface: #ffffff; --color-surface-soft: #f8fafc; --color-surface-raised: #f4f6f8; --color-bg-panel: #f4f6f8; --color-ink: #1d2433; --color-ink-strong: #1d2433; --color-ink-2: #475467; --color-ink-soft: #475467; --text-muted: #667085; --text-muted-2: #667085; --color-label: #98a2b3; --color-placeholder: #98a2b3; --color-border: #ced4dd; --color-hairline: #e9edf2; --color-border-2: #dde2e9; --color-border-3: #ced4dd; --color-border-strong: #aeb6c2; --color-accent: #1f3a5f; --color-accent-dark: #2a4a75; --color-accent-soft: #eef2f6; --color-accent-2: #57948d; --color-accent-2-dark: #4c837c; --color-accent-2-soft: #7fc0b8; --color-danger: #a6392b; --color-muted: #667085; --color-bg-alt: #f4f6f8; --color-surface-alt: #f8fafc; --radius: 8px; --radius-card: 12px; --radius-pill: 999px; --font-display: "Lora", Georgia, serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", Consolas, monospace; --font-title: var(--font-display); --shadow-float: 0 2px 8px rgba(20, 30, 50, 0.12); --shadow-card: 0 12px 32px rgba(20, 30, 50, 0.08), 0 2px 6px rgba(20, 30, 50, 0.05); /* nombres cortos que usan algunas reglas viejas */ --ink: var(--color-ink); --ink-soft: var(--color-ink-soft); --surface: var(--color-surface); --accent: var(--color-accent); --p-bg: var(--color-bg-panel); --p-text: var(--color-ink-strong); container-type: inline-size; color: var(--color-ink); font-family: var(--font-body); text-align: left; box-sizing: border-box; } .fm *, .ms-marco *, .fm *::before, .ms-marco *::before, .fm *::after, .ms-marco *::after { box-sizing: border-box; } .fm input, .fm select, .fm textarea, .fm button, .ms-marco input, .ms-marco select, .ms-marco textarea, .ms-marco button { font-family: inherit; } .fm [hidden], .ms-marco [hidden] { display: none !important; } /* ── la ficha: lo que .modal--full pone en el PMS ── */ .fm { --fm-bg: var(--color-bg-panel); --fm-surface: #ffffff; --fm-surface-soft: var(--color-surface-soft); --fm-border: var(--color-border-2); --fm-border-soft: #f2ecdf; --fm-text: var(--color-ink-strong); --fm-muted: var(--text-muted-2); --fm-label: var(--color-label); --fm-placeholder: var(--color-placeholder); --fm-green: #1c7a4d; --fm-amber: #a96a28; --fm-amber-accent: #c98a3d; --fm-dark: #3a2f20; --fm-mono: 'SF Mono', Menlo, Consolas, monospace; background: var(--fm-bg); font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; min-height: 100%; } .fm .fm-body { padding-bottom: 8px; } .fm .fm-panel.active { display: block; } /* ── Mensajes: lo que el PMS pone en y en :root de mensajes.css ── */ .ms-marco { --bg: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-surface-soft); --ink: var(--color-ink); --ink-soft: var(--color-ink-soft); --ink-mudo: var(--color-ink-soft); --border: var(--color-border); --border-2: var(--color-border-strong); --accent: var(--color-accent); --accent-soft: var(--color-accent-soft); --danger: var(--color-danger); --ok: #2e7d4f; --alerta: #8a5a12; --font-d: var(--font-display); --font-b: var(--font-body); --c-booking: #003580; --c-expedia: #b8860b; --c-airbnb: #d64349; --c-whatsapp: #1f8a4c; --c-web: #55617a; background: var(--bg); font-size: 16px; line-height: 1.4; position: relative; display: flex; flex-direction: column; height: 100%; } .ms-marco *, .ms-marco *::before, .ms-marco *::after { margin: 0; padding: 0; } .ms-marco .ms-top__mark { display: grid; place-items: center; background: #efece6; } /* la bandeja real mide la ventana; acá mide el marco */ .ms-marco .ms-cols { height: calc(100% - 56px); flex: 1; min-height: 0; } @container (max-width: 1180px) { .ms-marco .ms-fil { position: absolute; } } @container (max-width: 768px) { .ms-marco .ms-cols { height: 100%; } /* las tres solapas del panel («Cuenta · Estadía e idioma · Horarios y contacto») no entraban en 390px y la última quedaba cortada (en el PMS la fila scrollea) */ .ms-marco .ms-det__tabs { gap: 5px; } .ms-marco .ms-det__tabs .ms-pill { height: 30px; font-size: .7rem; padding: 0 9px; letter-spacing: -.01em; } } /* la cabecera de Info huésped en el celular: los dos botones no entran al lado del nombre y se salían de la pantalla (pasa también en el PMS) — bajan a una segunda fila, uno al lado del otro */ @container (max-width: 740px) { .fm .fm-guest-head { flex-wrap: wrap; } .fm .fm-guest-head .fm-guest-nrow { flex: 1 1 60%; min-width: 0; } .fm .fm-guest-head .fm-guest-edit, .fm .fm-guest-head .fm-guest-move { margin-left: 0; flex: 1 1 calc(50% - 6px); justify-content: center; white-space: normal; text-align: center; } .fm .fm-guest-grid { grid-template-columns: 1fr 1fr; } } /* el mensaje traducido, cuando lo hay, y la burbuja de tipeo del borrador */ .ms-marco .ms-msg__trad b { display: block; } .ms-marco .ms-escribir textarea.is-tipeando { border-color: var(--accent); }