/* ============================================================ Oula — Shell de la aplicación Prefijo .xc- · portado de docs/design_handoff_oula (Oula.dc.html) Este es el marco de TODA la app: sidebar, topbar y canvas. Los tokens --xc-* viven aquí porque el shell aplica en cualquier pantalla, no solo en el módulo /asistente (web/css/oula-asistente.css depende de ellos). Sustituye al shell .oula-frame / .oula-sidebar / .oula-topbar del rediseño de abril, que era el handoff anterior. ============================================================ */ :root { /* Marca */ --xc-deep: #0D2B26; --xc-deep-2: #123A33; --xc-deep-3: #16413A; --xc-deep-4: #1C4D43; --xc-lime: #C7FC57; --xc-lime-hover: #B9ED4C; --xc-mint: #5ED187; /* Neutros */ --xc-ink: #15231F; --xc-ink-2: #3C4843; --xc-ink-3: #5F6D68; --xc-mute: #8B9692; --xc-mute-2: #9AA6A0; --xc-border: #E3E8E4; --xc-border-soft: #EDF0EC; --xc-bg: #F6F7F3; --xc-card: #FFFFFF; --xc-card-soft: #FAFBF8; --xc-card-mint: #F4F8EE; /* Sidebar */ --xc-side-mute: #9FB0A9; --xc-side-dim: #7E938B; --xc-side-label: #5C726A; } /* ---------- Frame ---------- */ .xc-frame { display: flex; height: 100vh; width: 100%; overflow: hidden; background: var(--xc-bg); } /* El cromo del shell fija su tipografía en lugar de heredarla del body. Sin esto los ítems del nav medían distinto según la pantalla: las del asistente declaran line-height:20px y las demás caen en `normal`, que con Inter a 14px da ~21px. Un píxel por ítem son 13px de desplazamiento a lo largo del nav, y el menú "saltaba" al navegar. Se limita al cromo: el canvas conserva la tipografía de cada pantalla. */ .xc-sidebar, .xc-topbar { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 20px; } .xc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* El prototipo deja el canvas sin padding porque cada pantalla del handoff trae el suyo. Aquí va con padding por defecto: las ~90 vistas que no vienen del handoff se escribieron contando con el del shell. Las que traen su propio padding (todo el módulo /asistente) piden --bleed. */ .xc-canvas { flex: 1; overflow-y: auto; padding: 24px 28px; } .xc-canvas--bleed { padding: 0; } /* Kanban: las columnas gestionan su propio scroll. */ .xc-canvas--kanban { overflow: hidden; padding: 0; } /* Encabezado de página, para las vistas que no venían del handoff. */ .xc-page__head { margin: 0 0 20px; } /* ---------- Sidebar ---------- */ .xc-sidebar { width: 248px; flex: none; background: var(--xc-deep); display: flex; flex-direction: column; transition: width .2s ease; overflow: hidden; } .xc-frame.is-collapsed .xc-sidebar { width: 72px; } .xc-frame.is-collapsed .xc-side-label { display: none; } .xc-frame.is-collapsed .xc-sidebar__org { justify-content: center; } .xc-frame.is-collapsed .xc-sidebar__section { display: none; } .xc-frame.is-collapsed .xc-nav__badge, .xc-frame.is-collapsed .xc-nav__dot { display: none; } .xc-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px; } .xc-sidebar__logo { width: 30px; height: 30px; border-radius: 9px; background: var(--xc-lime); display: flex; align-items: center; justify-content: center; flex: none; } .xc-sidebar__brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 18px; } .xc-sidebar__collapse { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--xc-side-dim); } .xc-sidebar__collapse:hover { background: var(--xc-deep-3); color: #cfe; } .xc-sidebar__org { display: flex; align-items: center; gap: 10px; margin: 0 12px 4px; padding: 8px; border-radius: 10px; background: var(--xc-deep-2); text-decoration: none; } .xc-sidebar__org:hover { background: var(--xc-deep-3); text-decoration: none; } .xc-sidebar__org-avatar { width: 28px; height: 28px; border-radius: 8px; background: var(--xc-deep-4); display: flex; align-items: center; justify-content: center; color: var(--xc-lime); font-weight: 700; font-size: 12px; flex: none; } .xc-sidebar__org-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xc-sidebar__org-sub { font-size: 11px; color: var(--xc-side-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xc-sidebar__nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; } .xc-sidebar__section { font-size: 10.5px; font-weight: 600; color: var(--xc-side-label); text-transform: uppercase; letter-spacing: .07em; padding: 8px 12px 4px; } .xc-sidebar__section + .xc-sidebar__section, .xc-nav + .xc-sidebar__section { margin-top: 14px; } /* Los colores del sidebar van calificados con .xc-sidebar (0,2,0) a propósito. El shell lo comparten todas las pantallas y algunas traen su propio scope de contenido: `.oula-asistente-scope a { color: inherit }` es (0,1,1) y le ganaba a un `.xc-nav` desnudo, dejando los rótulos en el ink casi negro del body sobre el verde oscuro. Solo se leía el ítem activo, que ya era (0,2,0). */ .xc-sidebar .xc-nav { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .14s, color .14s; position: relative; color: var(--xc-side-mute); font-weight: 500; } .xc-sidebar .xc-nav:hover { color: #fff; text-decoration: none; } .xc-sidebar .xc-nav.is-active { background: var(--xc-deep-3); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--xc-lime); } .xc-nav svg { flex: none; } .xc-side-label { flex: 1; min-width: 0; white-space: nowrap; } .xc-nav__badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--xc-side-mute); background: var(--xc-deep-3); border-radius: 999px; padding: 1px 7px; flex: none; } .xc-nav__dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--xc-lime); flex: none; } /* ---------- Pie del sidebar: identidad, idioma y sesión ---------- */ .xc-sidebar__foot { border-top: 1px solid var(--xc-deep-3); padding: 12px; } .xc-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; width: 100%; cursor: pointer; text-decoration: none; border: none; background: transparent; text-align: left; } .xc-sidebar__user:hover { background: var(--xc-deep-3); text-decoration: none; } .xc-sidebar__user-avatar { width: 30px; height: 30px; border-radius: 50%; background: #2A5C4E; display: flex; align-items: center; justify-content: center; color: var(--xc-lime); font-weight: 600; font-size: 12px; flex: none; overflow: hidden; } .xc-sidebar__user-avatar img { width: 100%; height: 100%; object-fit: cover; } .xc-sidebar__user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xc-sidebar__user-role { font-size: 11px; color: var(--xc-side-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El sidebar recorta (overflow:hidden) para que el colapso no derrame etiquetas. Los popovers del pie usan position:fixed justamente para escapar de ese recorte: un absolute quedaría cortado por el borde del sidebar. */ .xc-sidebar__foot .oula-popover { position: fixed; top: auto; bottom: 74px; left: 12px; right: auto; } .xc-frame.is-collapsed .xc-sidebar__foot .oula-popover { left: 78px; } /* ---------- Topbar (breadcrumb corto) ---------- */ .xc-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 32px; border-bottom: 1px solid var(--xc-border-soft); background: var(--xc-bg); flex: none; } .xc-topbar__crumb { font-size: 12.5px; color: var(--xc-mute); min-width: 0; } .xc-topbar__kbd-icon { display: none; } .xc-topbar__crumb strong { color: var(--xc-ink-2); font-weight: 600; } .xc-topbar__crumb a { color: inherit; text-decoration: none; } .xc-topbar__crumb a:hover { color: var(--xc-ink-2); text-decoration: underline; } .xc-topbar__sep { margin: 0 4px; } .xc-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .xc-topbar__kbd { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; background: #fff; border: 1px solid var(--xc-border); border-radius: 8px; font: inherit; font-size: 12px; color: var(--xc-mute); cursor: pointer; } .xc-topbar__kbd:hover { border-color: var(--xc-mute-2); color: var(--xc-ink-2); } .xc-topbar__kbd kbd { font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--xc-ink-3); background: var(--xc-bg); border: 1px solid var(--xc-border); border-radius: 4px; padding: 1px 5px; } /* Hamburguesa: solo móvil. El cajón lo sirve views/site/partials/mobile-nav.php */ .xc-topbar__hamburger { display: none; width: 32px; height: 32px; border-radius: 8px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--xc-border); background: #fff; color: var(--xc-ink-2); cursor: pointer; } /* ---------- Sub-nav de Ayuda ---------- */ .xc-help-nav { width: 240px; flex: none; background: var(--xc-card); border-right: 1px solid var(--xc-border); padding: 18px 12px; overflow-y: auto; } .xc-help-nav__heading { font-size: 13px; font-weight: 700; color: var(--xc-ink); padding: 0 10px 10px; } .xc-help-nav__section { font-size: 10.5px; font-weight: 600; color: var(--xc-mute); text-transform: uppercase; letter-spacing: .07em; padding: 12px 10px 4px; } .xc-help-nav__item { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--xc-ink-2); text-decoration: none; } .xc-help-nav__item:hover { background: var(--xc-bg); text-decoration: none; } .xc-help-nav__item.is-active { background: var(--xc-card-mint); color: var(--xc-ink); font-weight: 600; } /* ---------- Título de página (vive en el contenido, no en el topbar) ---------- Fraunces, igual que .pd-page-title y .oula-network__h1: oula-fonts.css declara la display como la tipografía de los títulos editoriales y este es uno. El peso es 500 y no puede subir: oula-fonts.css importa Fraunces con wght 500 y nada más, así que un 600 aquí saldría como negrita sintética del navegador. El var() lleva fallback porque los tokens --oula-* viven en oula-design.css y este archivo se carga solo en pantallas que no lo traen. */ .xc-page__title { margin: 0; font-family: var(--oula-display, 'Fraunces', Georgia, serif); font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -0.6px; color: var(--xc-ink); } @media (max-width: 767px) { .xc-page__title { font-size: 24px; } } /* Calificado por el mismo motivo que el sidebar: `.oula-asistente-scope p` resetea el margin a 0 y es más específico que un `.xc-page__sub` desnudo. */ .xc-page__head .xc-page__sub { margin: 6px 0 0; font-size: 13.5px; color: var(--xc-mute); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .xc-sidebar { width: 72px; } .xc-sidebar .xc-side-label, .xc-sidebar .xc-sidebar__section, .xc-sidebar .xc-nav__badge, .xc-sidebar .xc-nav__dot { display: none; } .xc-sidebar__org { justify-content: center; } .xc-sidebar__foot .oula-popover { left: 78px; } .xc-help-nav { display: none; } } @media (max-width: 900px) { .xc-sidebar { display: none; } .xc-topbar { padding: 10px 16px; gap: 10px; } .xc-topbar__hamburger { display: inline-flex; } /* La barra inferior es `position: fixed` y ocupa los últimos 64px + safe-area de la pantalla. El scroll de la app no es el del documento sino el de .xc-canvas, así que si el canvas no reserva ese hueco al final, el tramo final de cualquier lista queda debajo de la barra y no hay forma de descubrirlo por mucho que se arrastre. Esta reserva ya existía en la hoja, pero escrita sobre .oula-frame__content y .main-content, que son del shell anterior y ya no se pintan. */ .xc-canvas { padding: 16px 16px calc(var(--oula-mobile-bottomnav-h, 64px) + var(--oula-safe-bottom, 0px) + 16px); } /* A sangre no se puede reservar el hueco con padding: la pantalla Hoy pinta una foto a pantalla completa y el padding dejaría una franja del color del canvas por debajo. Ahí el hueco lo reserva el contenido (ver .xc-hoy__content en oula-asistente.css). */ .xc-canvas--bleed { padding: 0; } /* El topbar móvil cabe en una línea: hamburguesa · página actual · lupa. La miga completa ("Oula › Suscripción y facturación") partía en dos líneas y duplicaba el alto del header; en una pantalla estrecha la raíz y los tramos intermedios no aportan nada que el usuario no sepa ya. */ .xc-topbar__crumb { flex: 1; font-size: 14px; color: var(--xc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xc-topbar__crumb--has-current > *:not(strong) { display: none; } .xc-topbar__crumb strong { font-weight: 650; } /* El buscador se queda en lupa: el placeholder no cabía —se cortaba a media palabra— y el atajo ⌘K no existe en un teléfono. */ .xc-topbar__right { gap: 6px; } .xc-topbar__kbd { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; } .xc-topbar__kbd-icon { display: block; } .xc-topbar__kbd-text, .xc-topbar__kbd kbd { display: none; } } /* ============================================================ Ítem de menú apagado: sin plan, se ve pero no se entra. Es un