/* ========================================================================== Dodo Quote — Capa de diseño "BY Solutions" Rediseño inspirado en monday.com sobre Bootstrap 5.3 (sin recompilar SCSS). Estrategia: design tokens con CSS custom properties + mapeo a variables --bs-*. Secciones: 1. Tipografía (Inter auto-hospedada) 2. Design tokens (:root) 3. Mapeo a Bootstrap + base global 4. Componentes: botones 5. Componentes: cards y stat-cards 6. Componentes: badges 7. Componentes: avatares 8. Componentes: tarjeta de autenticación 9. Componentes: estado vacío y estado de carga 10. Layout: shell, sidebar y topbar móvil 11. Componentes: stepper 12. Tablas responsivas 13. Accesibilidad: movimiento reducido ========================================================================== */ /* 1. Tipografía — Inter auto-hospedada (sin Google Fonts CDN, Principio V) ---- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/lib/fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/lib/fonts/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/lib/fonts/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/lib/fonts/inter-latin-700-normal.woff2") format("woff2"); } /* 2. Design tokens de marca --------------------------------------------------- */ :root { /* Paleta de marca */ --dq-primary: #00C4CC; /* teal de marca (fondos/acentos) */ --dq-primary-rgb: 0, 196, 204; --dq-primary-hover: #00A8AF; /* teal oscurecido para hover de fondos */ --dq-primary-active: #008f95; /* Texto oscuro sobre teal brillante: contraste AA (~7:1). El blanco sobre #00C4CC solo alcanza ~2.1:1 y no cumpliría WCAG AA. */ --dq-on-primary: #04373b; /* Teal oscuro para usar como TEXTO/enlaces sobre superficies blancas (~5.8:1 sobre blanco → cumple AA). */ --dq-primary-text: #0b7077; --dq-primary-text-rgb: 11, 112, 119; --dq-secondary: #334155; /* gris pizarra */ --dq-surface: #FFFFFF; /* superficie de tarjetas */ --dq-bg: #F8FAFC; /* fondo general de la app */ --dq-border: #E2E8F0; /* bordes */ --dq-text: #1E293B; /* texto principal */ --dq-text-muted: #64748B; /* texto secundario */ /* Tipografía */ --dq-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Sombras suaves */ --dq-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --dq-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --dq-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12); /* Radios y métricas */ --dq-radius: .625rem; --dq-radius-sm: .375rem; --dq-radius-pill: 999px; --dq-sidebar-width: 248px; /* Estados semánticos (acordes con la paleta) */ --dq-success: #16a34a; --dq-warning: #d97706; --dq-danger: #dc2626; /* Fondo de inputs (estilo "soft" de la opción A). */ --dq-input-bg: #FFFFFF; } /* 2b. Tema oscuro — se activa con [data-theme="dark"] en (theme.js) ----- */ /* Estrategia: solo se redefinen los tokens; los componentes ya consumen --dq-*. */ [data-theme="dark"] { --dq-surface: #13201E; /* superficie de tarjetas */ --dq-bg: #0C1413; /* fondo general de la app */ --dq-border: #243531; /* bordes */ --dq-text: #F1F5F4; /* texto principal */ --dq-text-muted: #94A3A0; /* texto secundario */ /* Teal claro para TEXTO/enlaces sobre superficies oscuras (cumple AA). */ --dq-primary-text: #5EEAD4; --dq-primary-text-rgb: 94, 234, 212; /* Fondo de inputs en oscuro. */ --dq-input-bg: #0E1A18; /* Sombras más marcadas sobre fondo oscuro. */ --dq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --dq-shadow-md: 0 4px 12px rgba(0, 0, 0, .50); --dq-shadow-lg: 0 10px 30px rgba(0, 0, 0, .60); } /* 3. Mapeo a variables de Bootstrap + base global ----------------------------- */ :root { --bs-primary: var(--dq-primary); --bs-primary-rgb: var(--dq-primary-rgb); --bs-link-color: var(--dq-primary-text); --bs-link-hover-color: var(--dq-primary-active); /* Bootstrap 5.3 deriva el color de enlace de *-rgb; sin esto los enlaces salen azules. */ --bs-link-color-rgb: var(--dq-primary-text-rgb); --bs-link-hover-color-rgb: var(--dq-primary-text-rgb); --bs-body-bg: var(--dq-bg); --bs-body-color: var(--dq-text); --bs-border-color: var(--dq-border); --bs-border-radius: var(--dq-radius); --bs-border-radius-sm: var(--dq-radius-sm); --bs-font-sans-serif: var(--dq-font-sans); --bs-secondary-color: var(--dq-text-muted); } html { font-size: 15px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } body { font-family: var(--dq-font-sans); background-color: var(--dq-bg); color: var(--dq-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } h1, h2, h3, h4, h5, h6 { color: var(--dq-text); font-weight: 600; letter-spacing: -0.02em; } .text-muted { color: var(--dq-text-muted) !important; } a { text-decoration: none; } a:hover { text-decoration: underline; } /* Anillo de foco accesible y de marca */ :focus-visible { outline: 2px solid rgba(var(--dq-primary-rgb), .55); outline-offset: 2px; } .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--dq-primary); box-shadow: 0 0 0 .2rem rgba(var(--dq-primary-rgb), .25); } /* Inputs con el lenguaje visual de la marca */ .form-control, .form-select { background-color: var(--dq-input-bg); color: var(--dq-text); border-color: var(--dq-border); border-radius: var(--dq-radius-sm); padding: .55rem .8rem; } .form-control:focus, .form-select:focus { background-color: var(--dq-input-bg); color: var(--dq-text); } .form-control::placeholder { color: var(--dq-text-muted); opacity: 1; } .form-label { font-weight: 500; color: var(--dq-text); } /* Alertas con bordes suaves */ .alert { border: 1px solid transparent; border-radius: var(--dq-radius); } /* 4. Botones ------------------------------------------------------------------ */ .btn { --bs-btn-border-radius: var(--dq-radius-sm); font-weight: 600; border-radius: var(--dq-radius-sm); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } /* Botón primario en el teal de marca (#0b7077), no el cian brillante: es el tono que usamos en toda la UI (wordmark "Quote", enlaces, CTAs). */ .btn-primary { --bs-btn-bg: var(--dq-primary-text); --bs-btn-border-color: var(--dq-primary-text); --bs-btn-color: #fff; --bs-btn-hover-bg: #094f54; --bs-btn-hover-border-color: #094f54; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #094f54; --bs-btn-active-border-color: #094f54; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--dq-primary-text); --bs-btn-disabled-border-color: var(--dq-primary-text); --bs-btn-disabled-color: #fff; } /* En oscuro el teal de marca es claro (#5EEAD4): texto oscuro para contraste AA. */ [data-theme="dark"] .btn-primary { --bs-btn-color: #06201D; --bs-btn-hover-bg: #7DF3E1; --bs-btn-hover-border-color: #7DF3E1; --bs-btn-hover-color: #06201D; --bs-btn-active-bg: #7DF3E1; --bs-btn-active-border-color: #7DF3E1; --bs-btn-active-color: #06201D; --bs-btn-disabled-color: #06201D; } .btn-outline-primary { --bs-btn-color: var(--dq-primary-text); --bs-btn-border-color: var(--dq-primary); --bs-btn-hover-bg: var(--dq-primary); --bs-btn-hover-border-color: var(--dq-primary); --bs-btn-hover-color: var(--dq-on-primary); --bs-btn-active-bg: var(--dq-primary-active); --bs-btn-active-border-color: var(--dq-primary-active); --bs-btn-active-color: var(--dq-on-primary); } .btn-secondary { --bs-btn-bg: var(--dq-secondary); --bs-btn-border-color: var(--dq-secondary); --bs-btn-hover-bg: #283449; --bs-btn-hover-border-color: #283449; } .btn-outline-secondary { --bs-btn-color: var(--dq-secondary); --bs-btn-border-color: var(--dq-border); --bs-btn-hover-bg: var(--dq-secondary); --bs-btn-hover-border-color: var(--dq-secondary); --bs-btn-hover-color: #fff; } /* En oscuro, el texto slate sería ilegible sobre la superficie oscura. */ [data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--dq-text); --bs-btn-border-color: var(--dq-border); --bs-btn-hover-bg: var(--dq-border); --bs-btn-hover-border-color: var(--dq-border); --bs-btn-hover-color: var(--dq-text); } /* 5. Cards y stat-cards ------------------------------------------------------- */ .card, .dq-card { background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius); box-shadow: var(--dq-shadow-sm); } .card { --bs-card-border-color: var(--dq-border); --bs-card-border-radius: var(--dq-radius); } /* Contenedor centrado para páginas de texto largo (Legal: privacidad, términos) — evita style="max-width:..." inline, prohibido por la CSP (style-src 'self'). */ .dq-legal-container { max-width: 760px; margin: 0 auto; } /* Mismo patrón para la columna angosta del hilo/formulario del portal de soporte (Views/SupportPortal/Index.cshtml) — ver sección 20c más abajo. */ .dq-portal-main--narrow { max-width: 48rem; margin: 0 auto; } .card-header { background-color: transparent; border-bottom: 1px solid var(--dq-border); font-weight: 600; } /* Tarjeta de estadística del dashboard */ .dq-stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius); box-shadow: var(--dq-shadow-sm); transition: box-shadow .18s ease, transform .18s ease; } .dq-stat-card:hover { box-shadow: var(--dq-shadow-md); transform: translateY(-2px); } .dq-stat-card__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--dq-radius-sm); background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-stat-card__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--dq-text); } .dq-stat-card__label { font-size: .85rem; color: var(--dq-text-muted); margin: 0; } .dq-stat-card__body { min-width: 0; } .dq-stat-card__cta { margin-top: .25rem; } /* 6. Badges ------------------------------------------------------------------- */ .badge { font-weight: 600; border-radius: var(--dq-radius-pill); padding: .35em .7em; letter-spacing: .01em; } /* Badges de estado de marca (contraste AA sobre fondos suaves) */ .dq-badge--active { background-color: rgba(22, 163, 74, .12); color: #15803d; } .dq-badge--pending { background-color: rgba(217, 119, 6, .12); color: #b45309; } .dq-badge--suspended{ background-color: rgba(220, 38, 38, .12); color: #b91c1c; } .dq-badge--neutral { background-color: #eef2f6; color: var(--dq-secondary); } /* Badge de rol */ .dq-badge--role { background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } /* 7. Avatares ----------------------------------------------------------------- */ .dq-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: .85rem; font-weight: 600; color: #fff; background-color: var(--dq-secondary); text-transform: uppercase; user-select: none; } .dq-avatar--sm { width: 30px; height: 30px; font-size: .72rem; } .dq-avatar--lg { width: 56px; height: 56px; font-size: 1.15rem; } /* Variantes de color derivadas determinísticamente (clase calculada en la vista) */ .dq-avatar--c0 { background-color: #0ea5b7; } .dq-avatar--c1 { background-color: #6366f1; } .dq-avatar--c2 { background-color: #db2777; } .dq-avatar--c3 { background-color: #ea580c; } .dq-avatar--c4 { background-color: #16a34a; } .dq-avatar--c5 { background-color: #475569; } /* 8. Tarjeta de autenticación (login, recuperación, invitación) --------------- */ .dq-auth { flex: 1 1 auto; /* ocupa el alto restante del cuerpo público para centrar de verdad */ min-height: 72vh; /* piso en pantallas bajas (mantiene scroll si hace falta) */ display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .dq-auth-card { width: 100%; max-width: 420px; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1.25rem; /* 20px — fidelidad con el diseño (opción A) */ box-shadow: var(--dq-shadow-lg); padding: 2.25rem 2rem; } .dq-auth-card--wide { max-width: 480px; } .dq-auth-card__brand { display: flex; justify-content: center; margin-bottom: 1.25rem; } .dq-auth-card__brand img { height: 34px; } .dq-auth-card__title { text-align: center; font-size: 1.4rem; margin-bottom: .25rem; } .dq-auth-card__subtitle { text-align: center; color: var(--dq-text-muted); margin-bottom: 1.5rem; } .dq-auth-card__footer { text-align: center; margin-top: 1.25rem; font-size: .9rem; } /* Wordmark de marca "Dodo Quote" (opción A) — dos tonos */ .dq-wordmark { display: inline-flex; align-items: baseline; gap: .12em; font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1; } .dq-wordmark__dodo { color: var(--dq-text); } .dq-wordmark__quote { color: var(--dq-primary-text); } /* Variante para superficies siempre oscuras (sidebar): colores claros fijos. */ .dq-wordmark--on-dark { font-size: 1.1rem; } .dq-wordmark--on-dark .dq-wordmark__dodo { color: #F1F5F9; } .dq-wordmark--on-dark .dq-wordmark__quote { color: #5EEAD4; } /* Campo con icono leading (y opcional botón "ojo" trailing) — estilo "soft" */ .dq-field { position: relative; display: flex; align-items: center; } .dq-field__icon { position: absolute; left: .85rem; display: grid; place-items: center; color: var(--dq-text-muted); pointer-events: none; } .dq-field .form-control { height: 3.25rem; border-radius: .75rem; /* 12px — radio de input del diseño */ padding-left: 2.6rem; } /* Reserva espacio a la derecha cuando hay botón "ojo" */ .dq-field--with-action .form-control { padding-right: 2.8rem; } .dq-field__action { position: absolute; right: .55rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--dq-text-muted); border-radius: var(--dq-radius-sm); cursor: pointer; } .dq-field__action:hover { color: var(--dq-text); } .dq-field__action .dq-eye-off { display: none; } .dq-field__action[aria-pressed="true"] .dq-eye { display: none; } .dq-field__action[aria-pressed="true"] .dq-eye-off { display: block; } /* Utilidad de visibilidad (evita estilos inline por CSP; la togglea el JS). */ .dq-hidden { display: none !important; } /* CTA principal grande de la opción A (icono flecha + texto) */ .dq-btn-lg { height: 3.25rem; border-radius: .75rem; /* 12px — radio de botón del diseño */ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1rem; } /* CTA "Ingresar": mismo teal profundo de la palabra "Quote" (--dq-primary-text), con texto blanco para contraste AA. Scoped al login para no alterar el resto. */ .btn-primary.dq-btn-lg { --bs-btn-bg: var(--dq-primary-text); --bs-btn-border-color: var(--dq-primary-text); --bs-btn-color: #fff; --bs-btn-hover-bg: #094f54; --bs-btn-hover-border-color: #094f54; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #094f54; --bs-btn-active-border-color: #094f54; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--dq-primary-text); --bs-btn-disabled-border-color: var(--dq-primary-text); --bs-btn-disabled-color: #fff; } /* Spinner de estado de carga en blanco sobre el teal del CTA. */ .btn-primary.dq-btn-lg[aria-busy="true"]::after { color: #fff; } /* En oscuro, "Quote"/CTA son teal claro: el texto debe ir oscuro para contraste. */ [data-theme="dark"] .btn-primary.dq-btn-lg { --bs-btn-color: #06201D; --bs-btn-hover-bg: #45D8C8; --bs-btn-hover-border-color: #45D8C8; --bs-btn-hover-color: #06201D; --bs-btn-active-bg: #45D8C8; --bs-btn-active-border-color: #45D8C8; --bs-btn-active-color: #06201D; --bs-btn-disabled-color: #06201D; } [data-theme="dark"] .btn-primary.dq-btn-lg[aria-busy="true"]::after { color: #06201D; } /* Divisor "o continúa con" (separa el CTA del login social) */ .dq-or { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 1rem; color: var(--dq-text-muted); font-size: .8rem; } .dq-or::before, .dq-or::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--dq-border); } /* Botón de alternar tema (sol/luna) */ .dq-theme-toggle { width: 38px; height: 38px; flex: 0 0 auto; display: inline-grid; place-items: center; border: 1px solid var(--dq-border); background-color: var(--dq-surface); color: var(--dq-text-muted); border-radius: var(--dq-radius-sm); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .dq-theme-toggle:hover { color: var(--dq-text); border-color: var(--dq-primary); } /* Por defecto (claro) se muestra la luna (acción: ir a oscuro); en oscuro, el sol */ .dq-theme-toggle__icon--sun { display: none; } .dq-theme-toggle__icon--moon { display: block; } [data-theme="dark"] .dq-theme-toggle__icon--sun { display: block; } [data-theme="dark"] .dq-theme-toggle__icon--moon { display: none; } /* Variante para colocarlo sobre la sidebar oscura */ .dq-theme-toggle--on-dark { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: #94A3B8; } .dq-theme-toggle--on-dark:hover { color: #F1F5F9; border-color: rgba(255,255,255,.20); } /* En el bloque de usuario de la sidebar, empuja el toggle al extremo derecho. */ .dq-sidebar__user .dq-theme-toggle { margin-left: auto; } /* 9. Estado vacío y estado de carga ------------------------------------------ */ .dq-empty { text-align: center; padding: 3rem 1.5rem; color: var(--dq-text-muted); } .dq-empty__icon { width: 56px; height: 56px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background-color: rgba(var(--dq-primary-rgb), .1); color: var(--dq-primary-text); } .dq-empty__title { color: var(--dq-text); font-weight: 600; margin-bottom: .25rem; } /* Variantes de color del icono de estado (evitan estilos inline duplicados) */ .dq-empty__icon--warning { background-color: rgba(217, 119, 6, .12); color: #b45309; } .dq-empty__icon--danger { background-color: rgba(220, 38, 38, .12); color: #b91c1c; } /* Estado de carga: botón ocupado muestra spinner y oculta su texto */ .btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; } .btn[aria-busy="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--dq-on-primary); animation: dq-spin .6s linear infinite; } .btn-outline-primary[aria-busy="true"]::after { color: var(--dq-primary-text); } .btn-outline-secondary[aria-busy="true"]::after { color: var(--dq-secondary); } @keyframes dq-spin { to { transform: rotate(360deg); } } /* Spinner independiente para páginas de redirección/carga (no atado a un botón) */ .dq-redirect-spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid var(--dq-border); border-right-color: var(--dq-primary); border-radius: 50%; animation: dq-spin .6s linear infinite; } /* 9b. Tarjeta de estado reutilizable (_StatusCard) --------------------------- */ /* Icono en círculo tintado (64px); el color lo aporta el modificador de tono. */ .dq-status__icon { width: 64px; height: 64px; margin: 0 auto .25rem; display: grid; place-items: center; border-radius: 50%; } .dq-status__icon svg { width: 28px; height: 28px; } .dq-status__icon .dq-redirect-spinner { width: 1.75rem; height: 1.75rem; border-width: 3px; } /* Etiqueta corta opcional (eyebrow) sobre el título. */ .dq-status__tone { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; } /* Tonos: color del círculo del icono y de la etiqueta. */ .dq-status--info .dq-status__icon { background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-status--info .dq-status__tone { color: var(--dq-primary-text); } .dq-status--success .dq-status__icon { background-color: rgba(21, 128, 61, .12); color: #15803d; } .dq-status--success .dq-status__tone { color: #15803d; } .dq-status--warning .dq-status__icon { background-color: rgba(180, 83, 9, .12); color: #b45309; } .dq-status--warning .dq-status__tone { color: #b45309; } .dq-status--danger .dq-status__icon { background-color: rgba(185, 28, 28, .12); color: #b91c1c; } .dq-status--danger .dq-status__tone { color: #b91c1c; } /* Variantes dark: se aclaran verde/ámbar/rojo para mantener contraste AA sobre fondo oscuro. */ [data-theme="dark"] .dq-status--success .dq-status__icon { background-color: rgba(74, 222, 128, .14); color: #4ade80; } [data-theme="dark"] .dq-status--success .dq-status__tone { color: #4ade80; } [data-theme="dark"] .dq-status--warning .dq-status__icon { background-color: rgba(251, 191, 36, .14); color: #fbbf24; } [data-theme="dark"] .dq-status--warning .dq-status__tone { color: #fbbf24; } [data-theme="dark"] .dq-status--danger .dq-status__icon { background-color: rgba(248, 113, 113, .14); color: #f87171; } [data-theme="dark"] .dq-status--danger .dq-status__tone { color: #f87171; } /* 10. Layout: shell, sidebar y topbar móvil ---------------------------------- */ .dq-shell { display: flex; min-height: 100vh; } /* Sidebar con fondo pizarra oscuro — jerarquía visual respecto al área de contenido. Bootstrap aplica `background-color: transparent !important` a `.offcanvas-lg` en ≥lg, así que forzamos el fondo oscuro con !important para ganar a esa regla. */ .dq-sidebar { width: var(--dq-sidebar-width); flex: 0 0 var(--dq-sidebar-width); background-color: #1E293B !important; border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .dq-sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); } .dq-sidebar__brand img { height: 28px; } .dq-brand-name { font-weight: 700; font-size: .9rem; color: #F1F5F9; letter-spacing: -0.02em; } /* Workspace activo: se muestra apenas debajo de la marca, siempre visible sin necesidad de llegar al pie de la sidebar (patrón habitual en apps multi-tenant: Slack/Notion/Linear). Envuelve hasta 2 líneas para nombres largos. */ .dq-sidebar__workspace { display: flex; align-items: flex-start; gap: .5rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); background-color: rgba(255,255,255,.04); } .dq-sidebar__workspace-icon { flex: 0 0 auto; margin-top: .15rem; color: var(--dq-primary); } .dq-sidebar__workspace-meta { min-width: 0; line-height: 1.25; } .dq-sidebar__workspace-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748B; } .dq-sidebar__workspace-name { font-size: .85rem; font-weight: 700; color: #F1F5F9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dq-sidebar__nav { padding: .85rem .75rem; flex: 1 1 auto; overflow-y: auto; } .dq-nav-link { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; margin-bottom: .15rem; border-radius: var(--dq-radius-sm); color: #94A3B8; font-weight: 500; transition: background-color .15s ease, color .15s ease; } .dq-nav-link:hover { background-color: rgba(255,255,255,.06); color: #F1F5F9; text-decoration: none; } .dq-nav-link.active { background-color: rgba(var(--dq-primary-rgb), .18); color: #5EEAD4; font-weight: 600; } .dq-nav-link svg { flex: 0 0 auto; } /* Bloque de usuario al pie de la sidebar */ .dq-sidebar__user { border-top: 1px solid rgba(255,255,255,.06); padding: .85rem 1rem; } .dq-user { display: flex; align-items: center; gap: .65rem; min-width: 0; } .dq-user__meta { min-width: 0; line-height: 1.2; } .dq-user__name { font-weight: 600; font-size: .9rem; color: #F1F5F9; } .dq-user__hint { font-size: .78rem; color: #64748B; } /* Truncado de textos largos (FR-019) */ .dq-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Preserva saltos de línea de texto libre (términos y condiciones, notas) sin usar style="" inline (CSP). */ .dq-preline { white-space: pre-line; } .min-w-0 { min-width: 0; } /* Botón cerrar sesión sobre sidebar oscuro */ .dq-sidebar .btn-link { color: #64748B; text-decoration: none; } .dq-sidebar .btn-link:hover { color: #94A3B8; text-decoration: none; } /* Área principal */ .dq-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .dq-content { padding: 1.75rem; flex: 1 1 auto; } /* Topbar móvil (visible solo < lg) */ .dq-topbar { display: none; align-items: center; gap: .75rem; padding: .65rem 1rem; background-color: var(--dq-surface); border-bottom: 1px solid var(--dq-border); position: sticky; top: 0; z-index: 1020; } .dq-topbar__brand img { height: 28px; } .dq-burger { border: 1px solid var(--dq-border); background-color: var(--dq-surface); border-radius: var(--dq-radius-sm); width: 40px; height: 40px; display: grid; place-items: center; color: var(--dq-text-muted); } /* Comportamiento responsivo: la sidebar usa `.offcanvas-lg` de Bootstrap, por lo que en < lg se convierte en Offcanvas (fixed) y en >= lg queda inline. */ @media (max-width: 991.98px) { .dq-topbar { display: flex; } .dq-sidebar { height: 100%; position: fixed; /* Bootstrap offcanvas ya lo gestiona; reforzamos métricas */ } .dq-content { padding: 1.1rem; } } @media (min-width: 992px) { /* En escritorio la sidebar es un panel estático dentro del shell flex */ .dq-sidebar.offcanvas-lg { transform: none; visibility: visible; } } /* 10b. Layout público (páginas sin autenticación) ---------------------------- */ .dq-public { min-height: 100vh; display: flex; flex-direction: column; } .dq-public__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: .6rem; padding: .9rem 1.5rem; background-color: var(--dq-surface); border-bottom: 1px solid var(--dq-border); } .dq-public__bar img { height: 30px; } .dq-public__body { flex: 1 1 auto; display: flex; flex-direction: column; } /* Acciones de la barra pública: tema + iniciar sesión + CTA. flex-wrap (aquí y en el padre) evita que en pantallas angostas las acciones desborden o queden ocultas: si no caben junto al wordmark, bajan a una segunda línea alineada a la derecha. */ .dq-public__nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .85rem; flex: 1 1 auto; } /* Separador vertical entre toggle de tema y los enlaces de texto */ .dq-nav-sep { width: 1px; height: 20px; background: var(--dq-border); flex-shrink: 0; } .dq-public__login { font-weight: 600; font-size: .95rem; color: var(--dq-text); text-decoration: none; } .dq-public__login:hover { color: var(--dq-primary-text); } /* Misma altura que .dq-public__cta sobreescribiendo el padding vertical por defecto de Bootstrap */ .dq-public__login-btn { padding: .5rem 1.05rem; font-weight: 600; } .dq-public__cta { padding: .5rem 1.05rem; font-weight: 600; } /* En pantallas angostas se oculta solo "Precios" (accesible igual bajando a esa sección de esta misma página) para dejar espacio a "Iniciar sesión", que es navegación esencial y nunca debe ocultarse — este era el bug: antes también se ocultaba el botón de login. */ @media (max-width: 575.98px) { .dq-public__bar { padding: .8rem 1rem; } .dq-public__nav { gap: .5rem; } .dq-public__login { display: none; } .dq-public__login-btn, .dq-public__cta { padding: .45rem .85rem; font-size: .9rem; } } /* 10c. Encabezado de página -------------------------------------------------- */ .dq-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--dq-border); } .dq-page-header__title { font-size: 1.35rem; font-weight: 700; color: var(--dq-text); margin: 0; letter-spacing: -.025em; line-height: 1.2; } .dq-page-header__subtitle { margin: .2rem 0 0; font-size: .875rem; color: var(--dq-text-muted); } /* 11. Crear Workspace (asistente de 3 pasos, tarjeta centrada) ---------------- */ .dq-create { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 3.5rem 1rem; background-color: var(--dq-bg); } .dq-create__card { width: 100%; max-width: 480px; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1.25rem; box-shadow: var(--dq-shadow-lg); padding: 2.5rem; } /* Cabecera: marca + barra de progreso de 2 segmentos + paso actual */ .dq-create__brand { display: flex; justify-content: center; margin-bottom: 1.25rem; } .dq-create__progress { display: flex; gap: .4rem; margin-bottom: .6rem; } .dq-create__progress span { flex: 1 1 0; height: 6px; border-radius: 3px; background-color: var(--dq-border); transition: background-color .25s ease; } .dq-create__progress span.is-active { background-color: var(--dq-primary-text); } .dq-create__step { text-align: center; font-size: .8rem; font-weight: 500; color: var(--dq-text-muted); margin: 0 0 1.5rem; } /* Títulos por paso */ .dq-create__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em; color: var(--dq-text); text-align: center; margin: 0 0 .3rem; } .dq-create__subtitle { font-size: .875rem; color: var(--dq-text-muted); text-align: center; margin: 0 0 1.5rem; line-height: 1.5; } /* Paneles de pasos */ .dq-create__panel { display: none; } .dq-create__panel.is-visible { display: block; } /* Navegación */ .dq-create__nav { display: flex; gap: .75rem; margin-top: 1.5rem; } .dq-create__btn { flex: 1 1 auto; } /* Botón primario en teal de marca (no el cian brillante) */ .dq-create__btn.btn-primary { --bs-btn-bg: var(--dq-primary-text); --bs-btn-border-color: var(--dq-primary-text); --bs-btn-color: #fff; --bs-btn-hover-bg: #094f54; --bs-btn-hover-border-color: #094f54; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #094f54; --bs-btn-active-border-color: #094f54; padding-top: .7rem; padding-bottom: .7rem; } .dq-create__back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid var(--dq-border); border-radius: var(--dq-radius); color: var(--dq-text-muted); font-weight: 600; font-size: .9rem; padding: .7rem 1.1rem; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .dq-create__back:hover { color: var(--dq-text); border-color: var(--dq-text-muted); } /* Pie */ .dq-create__foot { text-align: center; font-size: .85rem; color: var(--dq-text-muted); margin: 1.5rem 0 0; } .dq-create__foot a { color: var(--dq-primary-text); font-weight: 500; } /* Tarjetas de método de autenticación (paso 2) */ .dq-create__auth { display: flex; flex-direction: column; gap: .75rem; } .dq-create__auth-card { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid var(--dq-border); border-radius: var(--dq-radius); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .dq-create__auth-card:hover { border-color: var(--dq-primary-text); } .dq-create__auth-card:has(input:checked) { border-color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .06); } .dq-create__auth-card input { position: absolute; opacity: 0; pointer-events: none; } .dq-create__auth-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--dq-radius-sm); background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-create__auth-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .dq-create__auth-title { font-weight: 600; font-size: .95rem; color: var(--dq-text); } .dq-create__auth-desc { font-size: .82rem; color: var(--dq-text-muted); margin: .1rem 0 0; } .dq-create__auth-price { font-size: .82rem; font-weight: 600; color: var(--dq-primary-text); margin: .3rem 0 0; display: block; } .dq-create__auth-check { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--dq-border); color: #fff; } .dq-create__auth-card:has(input:checked) .dq-create__auth-check { background-color: var(--dq-primary-text); border-color: var(--dq-primary-text); } .dq-create__auth-card:not(:has(input:checked)) .dq-create__auth-check svg { display: none; } /* Tarjeta deshabilitada (paso 3): el plan elegido en el paso 2 no incluye Microsoft SSO */ .dq-create__auth-card.is-disabled { cursor: not-allowed; opacity: .5; } .dq-create__auth-card.is-disabled:hover { border-color: var(--dq-border); } /* Responsive */ @media (max-width: 575.98px) { .dq-create { padding: 1.5rem .75rem; } .dq-create__card { padding: 1.75rem 1.25rem; } } /* 12. Tablas ------------------------------------------------------------------ */ .table { --bs-table-border-color: var(--dq-border); vertical-align: middle; color: var(--dq-text); } .table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dq-text-muted); font-weight: 600; border-bottom: 1px solid var(--dq-border); } .table-hover > tbody > tr:hover > * { background-color: rgba(var(--dq-primary-rgb), .04); } /* Contenedor de la tabla: overflow visible para que el menú de acciones (dropdown) no quede recortado. En móvil la tabla hace reflow a tarjetas, así que no se necesita scroll horizontal (que además forzaría overflow-y y recortaría el menú). */ .dq-table-wrap { overflow: visible; } /* Celda de identidad usuario+avatar */ .dq-user-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; } .dq-user-cell__name { font-weight: 600; } .dq-user-cell__email { font-size: .82rem; color: var(--dq-text-muted); } /* Reflow de la tabla a tarjetas en pantallas muy pequeñas (FR-019, FR-005) */ @media (max-width: 575.98px) { .dq-table-cards thead { display: none; } .dq-table-cards tbody tr { display: block; border: 1px solid var(--dq-border); border-radius: var(--dq-radius); margin-bottom: .75rem; padding: .5rem .75rem; background-color: var(--dq-surface); box-shadow: var(--dq-shadow-sm); } .dq-table-cards tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; padding: .4rem 0; } .dq-table-cards tbody td::before { content: attr(data-label); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dq-text-muted); font-weight: 600; } } /* 13. Accesibilidad: respeto a movimiento reducido (FR-020) ------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* 14. Landing público (Home) -------------------------------------------------- */ .dq-landing { width: 100%; } /* Contenedor centrado común de las secciones */ .dq-hero__inner, .dq-features__inner, .dq-steps__inner, .dq-pricing__inner, .dq-cta__inner, .dq-contact__inner, .dq-landing-footer__inner { max-width: 1120px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ---- Hero ---- */ .dq-hero { padding: 4.5rem 0; } .dq-hero__inner { display: flex; align-items: center; gap: 3.5rem; } .dq-hero__text { flex: 1 1 0; min-width: 0; } .dq-hero__visual { flex: 1 1 0; min-width: 0; } .dq-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .12); padding: .35em .85em; border-radius: var(--dq-radius-pill); margin-bottom: 1.25rem; } .dq-hero__title { font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--dq-text); margin: 0 0 1rem; } .dq-hero__subtitle { font-size: 1.06rem; line-height: 1.6; color: var(--dq-text-muted); margin: 0 0 1.75rem; max-width: 34rem; } .dq-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; } .dq-hero__trust { font-size: .85rem; color: var(--dq-text-muted); margin: 0; } /* ---- Tarjeta-mock de cotización (decorativa) ---- */ /* Panel teal con degradado tras la tarjeta, para dar profundidad al hero. */ .dq-quote-backdrop { border-radius: 1.5rem; padding: 1.75rem; background: linear-gradient(135deg, rgba(94, 234, 212, .20) 0%, rgba(11, 112, 119, .12) 100%); } .dq-quote-card { display: flex; flex-direction: column; gap: .85rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1rem; box-shadow: var(--dq-shadow-lg); padding: 1.35rem; } .dq-quote-card__top { display: flex; align-items: center; justify-content: space-between; } .dq-quote-card__title { font-weight: 700; color: var(--dq-text); } .dq-quote-card__badge { font-size: .72rem; font-weight: 700; color: #15803d; background-color: rgba(21, 128, 61, .12); padding: .3em .7em; border-radius: var(--dq-radius-pill); } [data-theme="dark"] .dq-quote-card__badge { color: #4ade80; background-color: rgba(74, 222, 128, .16); } /* Encabezado del cliente (destinatario + fecha de emisión) */ .dq-quote-card__client { display: flex; flex-direction: column; gap: .45rem; padding-bottom: .85rem; border-bottom: 1px solid var(--dq-border); } .dq-quote-card__client-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .dq-quote-card__client-emitted { text-align: right; } .dq-quote-card__client-label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dq-text-muted); margin-bottom: .1rem; } .dq-quote-card__client-name { font-weight: 700; color: var(--dq-text); font-size: .95rem; } .dq-quote-card__client-date { font-weight: 600; color: var(--dq-text); font-size: .9rem; } .dq-quote-card__client-meta { font-size: .76rem; color: var(--dq-text-muted); } /* Líneas de la cotización y totales */ .dq-quote-card__lines { display: flex; flex-direction: column; gap: .55rem; } .dq-quote-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dq-quote-card__label, .dq-quote-card__sublabel { color: var(--dq-text-muted); font-size: .92rem; } .dq-quote-card__price { color: var(--dq-text); font-weight: 600; font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; } .dq-quote-card__sep { border: 0; border-top: 1px solid var(--dq-border); margin: .2rem 0; } .dq-quote-card__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dq-quote-card__total-label { font-weight: 700; color: var(--dq-text); } .dq-quote-card__total-value { font-weight: 800; color: var(--dq-primary-text); font-size: 1.1rem; font-variant-numeric: tabular-nums; } .dq-quote-card__terms { font-size: .72rem; line-height: 1.45; color: var(--dq-text-muted); margin: .1rem 0 0; } .dq-quote-card__send { margin-top: .35rem; display: flex; align-items: center; justify-content: center; gap: .5rem; height: 2.6rem; border-radius: .625rem; background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); font-weight: 700; font-size: .88rem; } /* ---- Switcher Cotizaciones/Soporte del hero (mismo patrón visual que .dq-pricing__toggle) ---- */ .dq-hero-tabs { display: inline-flex; gap: .25rem; margin-bottom: 1.1rem; padding: .25rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius-pill); } .dq-hero-tabs__btn { border: none; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--dq-text-muted); padding: .45em 1.1em; border-radius: var(--dq-radius-pill); } .dq-hero-tabs__btn.is-active { background-color: var(--dq-primary); color: var(--dq-on-primary); } .dq-hero-panel { display: none; } .dq-hero-panel.is-active { display: block; } /* ---- Tarjeta-mock de caso de soporte (decorativa), hermana de .dq-quote-card ---- */ .dq-ticket-card { display: flex; flex-direction: column; gap: .85rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1rem; box-shadow: var(--dq-shadow-lg); padding: 1.35rem; } .dq-ticket-card__top { display: flex; align-items: center; justify-content: space-between; } .dq-ticket-card__title { font-weight: 700; color: var(--dq-text); } .dq-ticket-card__badge { font-size: .72rem; font-weight: 700; color: #15803d; background-color: rgba(21, 128, 61, .12); padding: .3em .7em; border-radius: var(--dq-radius-pill); } [data-theme="dark"] .dq-ticket-card__badge { color: #4ade80; background-color: rgba(74, 222, 128, .16); } .dq-ticket-card__meta { display: flex; flex-direction: column; gap: .45rem; padding-bottom: .85rem; border-bottom: 1px solid var(--dq-border); } .dq-ticket-card__meta-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .dq-ticket-card__meta-emitted { text-align: right; } .dq-ticket-card__label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dq-text-muted); margin-bottom: .1rem; } .dq-ticket-card__name { font-weight: 700; color: var(--dq-text); font-size: .95rem; } .dq-ticket-card__date { font-weight: 600; color: var(--dq-text); font-size: .9rem; } .dq-ticket-card__sub { font-size: .76rem; color: var(--dq-text-muted); } .dq-ticket-card__pills { display: flex; gap: .4rem; margin-top: .3rem; } .dq-ticket-card__pill { font-size: .68rem; font-weight: 600; color: var(--dq-secondary); background-color: rgba(100, 116, 139, .12); padding: .25em .6em; border-radius: var(--dq-radius-pill); } [data-theme="dark"] .dq-ticket-card__pill { color: var(--dq-text); } .dq-ticket-card__thread { display: flex; flex-direction: column; gap: .6rem; } .dq-ticket-card__bubble { max-width: 82%; padding: .55rem .75rem; border-radius: .7rem; font-size: .85rem; line-height: 1.4; } .dq-ticket-card__bubble-author { font-size: .68rem; font-weight: 700; margin-bottom: .15rem; display: block; } .dq-ticket-card__bubble--client { align-self: flex-start; background-color: rgba(100, 116, 139, .12); color: var(--dq-text); border-bottom-left-radius: .2rem; } .dq-ticket-card__bubble--client .dq-ticket-card__bubble-author { color: var(--dq-text-muted); } .dq-ticket-card__bubble--team { align-self: flex-end; background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-text); border-bottom-right-radius: .2rem; } .dq-ticket-card__bubble--team .dq-ticket-card__bubble-author { color: var(--dq-primary-text); } .dq-ticket-card__sep { border: 0; border-top: 1px solid var(--dq-border); margin: .2rem 0; } .dq-ticket-card__resolved { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dq-ticket-card__resolved-label { font-weight: 700; color: var(--dq-text); font-size: .88rem; } .dq-ticket-card__resolved-value { font-weight: 700; color: var(--dq-primary-text); font-size: .88rem; } .dq-ticket-card__send { margin-top: .35rem; display: flex; align-items: center; justify-content: center; gap: .5rem; height: 2.6rem; border-radius: .625rem; background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); font-weight: 700; font-size: .88rem; } /* ---- Características ---- */ .dq-features { padding: 4.5rem 0; background-color: var(--dq-surface); } .dq-features__head { text-align: center; margin-bottom: 2.5rem; } .dq-features__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--dq-text); margin: 0 0 .5rem; } .dq-features__subtitle { color: var(--dq-text-muted); margin: 0; } .dq-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .dq-feature-card { background-color: var(--dq-bg); border: 1px solid var(--dq-border); border-radius: 1rem; padding: 1.5rem; } .dq-feature-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: .75rem; background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); margin-bottom: 1rem; } .dq-feature-card__title { font-size: 1.1rem; font-weight: 700; color: var(--dq-text); margin: 0 0 .4rem; } .dq-feature-card__desc { font-size: .92rem; line-height: 1.55; color: var(--dq-text-muted); margin: 0; } .dq-feature-card__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem; font-size: .88rem; font-weight: 600; color: var(--dq-primary-text); text-decoration: none; } .dq-feature-card__link:hover { text-decoration: underline; } /* Grid de 2 columnas para secciones con menos tarjetas (p. ej. "Hecho para tu tipo de negocio"). */ .dq-feature-grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin: 0 auto; } /* ---- Spotlight (sección de una sola funcionalidad, p. ej. soporte al cliente) ---- */ .dq-spotlight { padding: 4.5rem 0; background-color: var(--dq-bg); } .dq-spotlight__inner { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 3.5rem; } .dq-spotlight__visual { flex: 1 1 0; min-width: 0; } .dq-spotlight__text { flex: 1 1 0; min-width: 0; } .dq-spotlight__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--dq-text); margin: 0 0 .85rem; line-height: 1.2; } .dq-spotlight__subtitle { font-size: 1rem; line-height: 1.6; color: var(--dq-text-muted); margin: 0 0 1.75rem; max-width: 32rem; } .dq-spotlight__benefits { display: flex; flex-direction: column; gap: 1.15rem; } .dq-spotlight__benefit { display: flex; gap: .85rem; align-items: flex-start; } .dq-spotlight__benefit-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: .625rem; display: grid; place-items: center; background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-spotlight__benefit-title { font-weight: 700; color: var(--dq-text); font-size: .98rem; margin: 0 0 .2rem; } .dq-spotlight__benefit-desc { font-size: .88rem; line-height: 1.5; color: var(--dq-text-muted); margin: 0; } /* ---- Cómo funciona (flujo de estados con fechas) ---- */ .dq-steps { padding: 4.5rem 0; background-color: var(--dq-bg); } .dq-steps__head { text-align: center; margin-bottom: 2.5rem; } .dq-steps__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--dq-text); margin: 0 0 .5rem; } .dq-steps__subtitle { color: var(--dq-text-muted); margin: 0; } .dq-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .dq-step-card { display: flex; flex-direction: column; gap: .6rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1rem; padding: 1.5rem; } .dq-step-card__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--dq-primary-text); color: #fff; font-weight: 700; } [data-theme="dark"] .dq-step-card__num { color: #06201D; } .dq-step-card__title { font-size: 1.05rem; font-weight: 700; color: var(--dq-text); margin: 0; } .dq-step-card__date { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--dq-primary-text); } .dq-step-card__desc { font-size: .9rem; line-height: 1.5; color: var(--dq-text-muted); margin: 0; } /* ---- Precios ---- */ .dq-pricing { padding: 4.5rem 0; background-color: var(--dq-surface); } .dq-pricing__head { text-align: center; margin-bottom: 2.5rem; } .dq-pricing__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--dq-text); margin: 0 0 .5rem; } .dq-pricing__subtitle { color: var(--dq-text-muted); margin: 0; } /* Toggle Mensual/Anual: dos botones, uno activo a la vez (024-planes-precio-configurable). */ .dq-pricing__toggle { display: inline-flex; gap: .25rem; margin-top: 1.25rem; padding: .25rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius-pill); } .dq-pricing__toggle-btn { border: none; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--dq-text-muted); padding: .45em 1.1em; border-radius: var(--dq-radius-pill); } .dq-pricing__toggle-btn.is-active { background-color: var(--dq-primary); color: var(--dq-on-primary); } .dq-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } /* Precio mensual visible por defecto; el toggle alterna la clase --annual en el grid. */ .dq-price-grid .dq-annual-only { display: none; } .dq-price-grid.dq-price-grid--annual .dq-monthly-only { display: none; } .dq-price-grid.dq-price-grid--annual .dq-annual-only { display: inline; } .dq-price-card__savings { font-size: .75rem; font-weight: 700; color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .12); padding: .2em .6em; border-radius: var(--dq-radius-pill); white-space: nowrap; } .dq-price-card { display: flex; flex-direction: column; background-color: var(--dq-bg); border: 1px solid var(--dq-border); border-radius: 1rem; padding: 1.75rem; } /* Plan destacado (Pro): borde de marca y leve elevación */ .dq-price-card--featured { border-color: var(--dq-primary); box-shadow: var(--dq-shadow-md); background-color: var(--dq-surface); } .dq-price-card__badge { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .12); padding: .3em .7em; border-radius: var(--dq-radius-pill); margin-bottom: .85rem; } .dq-price-card__name { font-size: 1.15rem; font-weight: 700; color: var(--dq-text); margin: 0 0 .35rem; } .dq-price-card__tagline { font-size: .9rem; color: var(--dq-text-muted); margin: 0 0 1rem; min-height: 2.6em; } /* flex-wrap: si "COP/período · Ahorra X%" no cabe junto al monto, baja como bloque propio (dq-price-card__price-meta) en vez de partir el número entre el "$" y las cifras. */ .dq-price-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; margin-bottom: 1.25rem; } .dq-price-card__amount { font-size: 2rem; font-weight: 800; color: var(--dq-text); letter-spacing: -.02em; white-space: nowrap; } .dq-price-card__price-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .dq-price-card__period { font-size: .85rem; color: var(--dq-text-muted); white-space: nowrap; } .dq-price-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; } .dq-price-card__feature { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--dq-text); } .dq-price-card__feature svg { flex: 0 0 auto; margin-top: .15rem; color: var(--dq-primary-text); } /* Nota del plan Enterprise (p. ej. "¿Necesitas más capacidad?") — no es un check de característica. */ .dq-price-card__feature--note { color: var(--dq-text-muted); font-size: .82rem; } /* El CTA se ancla al fondo para alinear los botones entre tarjetas de distinta altura. */ .dq-price-card__cta { margin-top: auto; } /* ---- Contacto (formulario expuesto directamente en la landing) ---- */ /* Campo honeypot del formulario de contacto (028-antibot-formulario-contacto, FR-007): oculto fuera de pantalla (no display:none/visibility:hidden, para que un bot que solo revisa el render final igual lo detecte como "invisible" y evite el truco) — un humano nunca lo ve ni lo alcanza; combinado en el markup con tabindex="-1" y aria-hidden="true". */ .dq-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .dq-contact { padding: 4.5rem 0; background-color: var(--dq-surface); } .dq-contact__head { text-align: center; margin-bottom: 2.5rem; } .dq-contact__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--dq-text); margin: 0 0 .5rem; } .dq-contact__subtitle { color: var(--dq-text-muted); margin: 0; } .dq-contact__form { max-width: 32rem; margin: 0 auto; background-color: var(--dq-bg); border: 1px solid var(--dq-border); border-radius: 1rem; padding: 2rem; } /* ---- Banda CTA ---- */ .dq-cta { padding: 4rem 0; background: linear-gradient(135deg, #0E8F8C 0%, #0A5F63 100%); text-align: center; } .dq-cta__title { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .5rem; } .dq-cta__subtitle { color: rgba(255, 255, 255, .88); margin: 0 0 1.5rem; } /* Botón blanco sobre la banda teal: texto teal oscuro estable (--dq-on-primary no cambia por tema). */ .dq-cta__btn { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--dq-on-primary); --bs-btn-hover-bg: #eef5f5; --bs-btn-hover-border-color: #eef5f5; --bs-btn-hover-color: var(--dq-on-primary); } /* ---- Pie ---- */ .dq-landing-footer { border-top: 1px solid var(--dq-border); background-color: var(--dq-bg); } .dq-landing-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .dq-landing-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; font-size: .85rem; } .dq-landing-footer__links a { color: var(--dq-text-muted); text-decoration: none; } .dq-landing-footer__links a:hover { color: var(--dq-primary-text); text-decoration: underline; } .dq-landing-footer__meta { font-size: .85rem; color: var(--dq-text-muted); } /* ---- Responsive ---- */ @media (max-width: 991.98px) { .dq-hero__inner { flex-direction: column; align-items: stretch; gap: 2.5rem; } .dq-spotlight__inner { flex-direction: column; align-items: stretch; gap: 2.5rem; } .dq-feature-grid { grid-template-columns: 1fr; } .dq-step-grid { grid-template-columns: repeat(2, 1fr); } .dq-price-grid { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; } } @media (max-width: 575.98px) { .dq-step-grid { grid-template-columns: 1fr; } /* El padding vertical de 4.5rem de .dq-hero queda pensado para el layout de 2 columnas de escritorio; apilado en mobile deja un hueco vacío grande entre la barra pública y el eyebrow del hero (auditoría SEO, hallazgo #8). Se reduce solo en este breakpoint. */ .dq-hero { padding: 2rem 0 2.5rem; } .dq-hero__inner { gap: 1.75rem; } } /* 15. Dashboard (vista inicial autenticada) ---------------------------------- */ /* Tarjeta KPI: icono en chip de color, etiqueta, valor grande y pista. */ .dq-kpi { height: 100%; display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius); box-shadow: var(--dq-shadow-sm); transition: box-shadow .18s ease, transform .18s ease; } .dq-kpi:hover { box-shadow: var(--dq-shadow-md); transform: translateY(-2px); } .dq-kpi__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--dq-radius-sm); background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } /* Variantes de color del chip, alineadas con los badges de estado. */ .dq-kpi__icon--amber { background-color: rgba(217, 119, 6, .12); color: #b45309; } .dq-kpi__icon--green { background-color: rgba(22, 163, 74, .12); color: #15803d; } .dq-kpi__label { font-size: .82rem; color: var(--dq-text-muted); margin: 0; } /* Cuerpo del valor: crece para ocupar el espacio restante de la tarjeta y centra su contenido verticalmente, para que una tarjeta con un solo valor (ej. "Total cotizaciones") no quede con espacio muerto debajo cuando otra tarjeta de la misma fila apila varios valores por moneda (spec 023-dashboard-multi-moneda). La etiqueta siempre permanece arriba. */ .dq-kpi__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .4rem; } /* Tarjeta de métrica única (conteo o porcentaje: "Total cotizaciones", "Tasa de conversión"...) que nunca se desglosa por moneda: centra etiqueta y valor por completo, en vez de dejarlos pegados a la esquina superior izquierda con espacio muerto alrededor. Las tarjetas que sí pueden desglosarse por moneda (Pipeline, Cotizado, Ganado, Perdido, Monto vendido) se quedan alineadas a la izquierda siempre — con una o con varias monedas — para que su alineación no cambie según los datos. */ .dq-kpi--centered { align-items: center; text-align: center; } .dq-kpi__value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--dq-text); overflow-wrap: anywhere; } .dq-kpi__hint { font-size: .75rem; color: var(--dq-text-muted); margin: 0; } /* Panel con cabecera (cotizaciones recientes, etc.). */ .dq-panel { display: flex; flex-direction: column; background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius); box-shadow: var(--dq-shadow-sm); } .dq-panel__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--dq-border); } /* Estira el panel a la altura de su columna (solo donde se desee, p. ej. panel principal). */ .dq-panel--fill { height: 100%; } .dq-panel__title { font-size: .95rem; font-weight: 600; color: var(--dq-text); margin: 0; } .dq-panel__body { flex: 1 1 auto; padding: 1.25rem; } /* Centra verticalmente el contenido (p. ej. estado vacío) cuando el panel se estira. */ .dq-panel__body--center { display: flex; flex-direction: column; justify-content: center; } /* Acciones rápidas: filas tipo enlace con chip de icono. */ .dq-quick { display: flex; flex-direction: column; gap: .25rem; } /* Variante horizontal: paneles de ancho completo (dashboard de Gerente/Administrador). */ .dq-quick--row { flex-direction: row; flex-wrap: wrap; gap: .5rem; } .dq-quick--row .dq-quick-action { flex: 0 0 auto; } .dq-quick-action { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: var(--dq-radius-sm); color: var(--dq-text); text-decoration: none; transition: background-color .15s ease; } .dq-quick-action:hover { background-color: rgba(var(--dq-primary-rgb), .07); color: var(--dq-text); } .dq-quick-action[aria-disabled="true"] { opacity: .55; pointer-events: none; } .dq-quick-action__icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--dq-radius-sm); background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-quick-action__label { font-size: .9rem; font-weight: 500; } /* Botón "Nueva cotización" del encabezado: teal de marca (no el cian brillante), deshabilitado con badge "Pronto" hasta que exista el módulo de cotizaciones. */ .dq-btn-soon { --bs-btn-bg: var(--dq-primary-text); --bs-btn-border-color: var(--dq-primary-text); --bs-btn-color: #fff; --bs-btn-disabled-bg: var(--dq-primary-text); --bs-btn-disabled-border-color: var(--dq-primary-text); --bs-btn-disabled-color: #fff; --bs-btn-disabled-opacity: .6; } .dq-btn-soon .badge { margin-left: .35rem; background-color: rgba(255, 255, 255, .22); color: #fff; font-size: .68rem; } /* En oscuro el teal de marca es claro: texto y badge oscuros para contraste AA. */ [data-theme="dark"] .dq-btn-soon { --bs-btn-color: #06201D; --bs-btn-disabled-color: #06201D; } [data-theme="dark"] .dq-btn-soon .badge { background-color: rgba(6, 32, 29, .18); color: #06201D; } /* Resumen de cuenta: pares etiqueta/valor. */ .dq-summary { display: flex; flex-direction: column; gap: .65rem; } .dq-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dq-summary__key { font-size: .85rem; color: var(--dq-text-muted); } .dq-summary__val { font-size: .85rem; font-weight: 600; color: var(--dq-text); } /* 16. Administración de usuarios — cambiar rol ------------------------------- */ /* Aviso de combinaciones de rol válidas */ .dq-role-hint { display: flex; align-items: flex-start; gap: .5rem; padding: .75rem; border-radius: var(--dq-radius); background-color: rgba(var(--dq-primary-rgb), .07); color: var(--dq-primary-text); font-size: .82rem; line-height: 1.45; margin-bottom: 1.25rem; } .dq-role-hint svg { flex: 0 0 auto; margin-top: .1rem; } /* Opciones de rol como tarjetas seleccionables (checkbox oculto + check propio) */ .dq-role-options { display: flex; flex-direction: column; gap: .65rem; } .dq-role-option { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; margin: 0; border: 1px solid var(--dq-border); border-radius: var(--dq-radius); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .dq-role-option:hover { border-color: var(--dq-primary-text); } .dq-role-option:has(input:checked) { border-color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .06); } .dq-role-option input { position: absolute; opacity: 0; pointer-events: none; } .dq-role-option__box { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; border: 1.5px solid var(--dq-border); background-color: var(--dq-surface); color: #fff; transition: background-color .15s ease, border-color .15s ease; } .dq-role-option:has(input:checked) .dq-role-option__box { background-color: var(--dq-primary-text); border-color: var(--dq-primary-text); } .dq-role-option:not(:has(input:checked)) .dq-role-option__box svg { display: none; } .dq-role-option__label { font-size: .95rem; font-weight: 500; color: var(--dq-text); } /* 17. Onboarding (primer acceso, dentro del shell autenticado) --------------- */ /* min-height/padding/background quedan a cargo de .dq-content (contenedor del shell). .dq-onboard__inner se alinea a la izquierda (no centrado) para no dejar un vacío grande entre el sidebar y el contenido en pantallas anchas. */ .dq-onboard__inner { max-width: 1000px; margin: 0 auto 0 0; display: flex; flex-direction: column; gap: 1.5rem; } /* Banner de bienvenida */ .dq-onboard__hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem 2.25rem; border-radius: 1.25rem; background: linear-gradient(135deg, #0E8F8C 0%, #0A4F53 100%); color: #fff; overflow: hidden; } .dq-onboard__hero-text { min-width: 0; } .dq-onboard__eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: #BFF3EC; background: rgba(255, 255, 255, .15); padding: .3em .7em; border-radius: var(--dq-radius-pill); margin-bottom: .85rem; } .dq-onboard__title { font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .4rem; } .dq-onboard__subtitle { font-size: .95rem; line-height: 1.5; color: #D5F2EF; margin: 0; max-width: 48ch; } .dq-onboard__hero-badge { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; } /* Cuerpo a dos columnas */ .dq-onboard__body { display: flex; align-items: flex-start; gap: 1.5rem; } .dq-onboard__form-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; } .dq-onboard__preview-col { flex: 0 0 330px; width: 330px; display: flex; flex-direction: column; gap: .6rem; position: sticky; top: 1.5rem; } /* Tarjetas de configuración */ .dq-onboard__card { background: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1rem; box-shadow: var(--dq-shadow-sm); padding: 1.5rem; } .dq-onboard__card--row { display: flex; align-items: center; gap: 1rem; } .dq-onboard__card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; } .dq-onboard__card--row .dq-onboard__card-head { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } /* Ajustes del Workspace: vista previa del logo ya guardado, antes de reemplazarlo */ .dq-settings__current-logo { display: block; max-height: 64px; max-width: 200px; object-fit: contain; margin-bottom: .9rem; } .dq-onboard__card-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--dq-radius); display: grid; place-items: center; background: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-onboard__card-title { font-size: 1rem; font-weight: 600; color: var(--dq-text); margin: 0; line-height: 1.2; } .dq-onboard__card-sub { font-size: .8rem; color: var(--dq-text-muted); margin: .1rem 0 0; } /* Dropzone del logo */ .dq-onboard__dropzone { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: 1.75rem 1.25rem; border: 1.5px dashed #C7D8D7; border-radius: .75rem; background: var(--dq-bg); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; margin: 0; } .dq-onboard__dropzone:hover, .dq-onboard__dropzone.is-dragover { border-color: var(--dq-primary-text); background: rgba(var(--dq-primary-rgb), .05); } .dq-onboard__dropzone-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-onboard__dropzone-main { font-size: .85rem; font-weight: 500; color: var(--dq-text); } .dq-onboard__dropzone-hint { font-size: .78rem; color: var(--dq-text-muted); } .dq-onboard__file-name { font-size: .82rem; font-weight: 600; color: var(--dq-primary-text); margin: .25rem 0 0; } .dq-onboard__exp-input { width: 140px; flex: 0 0 auto; } /* Vista previa */ .dq-onboard__preview-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--dq-text-muted); } .dq-onboard__quote { background: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: 1rem; box-shadow: var(--dq-shadow-md); padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; } .dq-onboard__q-head { display: flex; align-items: center; justify-content: space-between; } .dq-onboard__q-logo { width: 64px; height: 30px; border-radius: .5rem; display: grid; place-items: center; background: #EEF2F6; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #B0BAC5; } .dq-onboard__q-title { font-size: 1rem; font-weight: 700; color: var(--dq-text); margin: 0; } .dq-onboard__q-row { display: flex; align-items: center; justify-content: space-between; } .dq-onboard__q-label { font-size: .8rem; color: var(--dq-text-muted); } .dq-onboard__q-val { font-size: .8rem; font-weight: 600; color: var(--dq-text); } .dq-onboard__q-sep { height: 1px; background: var(--dq-border); } .dq-onboard__q-total { font-size: 1.15rem; font-weight: 700; color: var(--dq-primary-text); } .dq-onboard__valid { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--dq-primary-text); background: rgba(var(--dq-primary-rgb), .1); padding: .3em .7em; border-radius: var(--dq-radius-pill); } .dq-onboard__preview-note { font-size: .78rem; line-height: 1.45; color: var(--dq-text-muted); margin: 0; } /* Acciones */ .dq-onboard__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; } /* Responsive: una sola columna */ @media (max-width: 859.98px) { .dq-onboard__body { flex-direction: column; } .dq-onboard__preview-col { position: static; width: 100%; flex: 1 1 auto; } } @media (max-width: 575.98px) { .dq-onboard__hero { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; } .dq-onboard__actions { flex-direction: column-reverse; align-items: stretch; } } /* 18. Módulo Catálogo — ajustes de UI específicos ----------------------------- */ /* Tarjeta de formulario estrecha (Agregar ítem, Nueva categoría, etc.) */ .dq-narrow-card { max-width: 520px; } .dq-narrow-card--sm { max-width: 480px; } /* Tarjeta de formulario complejo (crear/editar ítems del catálogo) */ .dq-form-card { max-width: 640px; } /* Banner de estado contextual (inactivo, advertencia, etc.) */ .dq-status-banner { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--dq-radius-sm); border: 1px solid transparent; margin-bottom: 1.25rem; font-size: .875rem; line-height: 1.5; } .dq-status-banner--warning { background-color: #FFF7ED; border-color: #FED7AA; color: #92400E; } [data-theme="dark"] .dq-status-banner--warning { background-color: rgba(217,119,6,.1); border-color: rgba(217,119,6,.3); color: #fbbf24; } .dq-status-banner--danger { background-color: #FEF2F2; border-color: #FECACA; color: #991B1B; } [data-theme="dark"] .dq-status-banner--danger { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #fca5a5; } .dq-status-banner--danger a { color: inherit; text-decoration: underline; font-weight: 600; } .dq-status-banner--warning a { color: inherit; text-decoration: underline; font-weight: 600; margin-left: .35rem; } /* 019-plan-suscripcion-workspace: modo solo lectura — atenúa visualmente las acciones de escritura/descarga; el bloqueo real del clic/envío lo hace wireReadOnlyGuard() en site.js (también cubre activación por teclado, que pointer-events no detiene). Los formularios GET (búsqueda/filtros) y cualquier elemento data-dq-readonly-exempt quedan fuera. */ body.dq-readonly .dq-content form:not([method="get"]):not([data-dq-readonly-exempt]) button[type="submit"], body.dq-readonly .dq-content [data-bs-toggle="modal"], body.dq-readonly .dq-content a[data-dq-download] { opacity: .55; cursor: not-allowed; } /* Banner de "último evento" (ficha de cotización): resume el evento más reciente del historial para que sea visible de inmediato, sin tener que bajar hasta la tarjeta de Historial. Estilo neutro (mismo look que el resto de tarjetas) con un acento teal fijo en el icono — no varía por tipo de evento, para no competir con los badges de estado. */ .dq-last-event { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--dq-radius); background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-left: 3px solid var(--dq-primary); box-shadow: var(--dq-shadow-sm); margin-bottom: 1rem; } .dq-last-event__icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--dq-radius-sm); background-color: rgba(var(--dq-primary-rgb), .12); color: var(--dq-primary-text); } .dq-last-event__body { min-width: 0; flex: 1 1 auto; } .dq-last-event__eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dq-text-muted); margin-bottom: .2rem; } .dq-last-event__title { font-size: .95rem; font-weight: 700; color: var(--dq-text); } .dq-last-event__meta { font-size: .78rem; margin-top: .1rem; color: var(--dq-text-muted); } .dq-last-event__quote { display: flex; gap: .6rem; margin-top: .6rem; padding: .6rem .75rem; border-radius: var(--dq-radius-sm); background-color: var(--dq-bg); } .dq-last-event__quote-bar { flex: 0 0 auto; width: 3px; border-radius: 2px; background-color: var(--dq-primary); } .dq-last-event__quote-text { font-size: .85rem; color: var(--dq-text); } .dq-last-event__link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--dq-primary-text); text-decoration: none; white-space: nowrap; } .dq-last-event__link:hover { text-decoration: underline; } @media (max-width: 575.98px) { .dq-last-event { flex-wrap: wrap; } .dq-last-event__link { margin-left: 3rem; } } /* Paginación (Bootstrap .pagination) retemada con los tokens de marca. */ .pagination .page-link { color: var(--dq-primary-text); background-color: var(--dq-surface); border-color: var(--dq-border); } .pagination .page-link:hover { color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .08); border-color: var(--dq-border); } .pagination .page-item.active .page-link { background-color: var(--dq-primary); border-color: var(--dq-primary); color: var(--dq-on-primary); } .pagination .page-item.disabled .page-link { color: var(--dq-text-muted); background-color: var(--dq-surface); border-color: var(--dq-border); } /* Barra de progreso de navegación: indica que la página está cargando durante cualquier navegación completa (enlaces, submits, atrás/adelante). Se activa agregando `.dq-progress-bar--active` (ver wireNavigationProgress en site.js) y desaparece de forma natural al terminar de cargar la página siguiente. */ .dq-progress-bar { position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 2000; background-color: var(--dq-primary); opacity: 0; transition: width 0s, opacity .15s ease; } .dq-progress-bar--active { width: 70%; opacity: 1; transition: width 8s cubic-bezier(.1, .6, .2, 1), opacity .15s ease; } /* Controles en línea dentro de la tabla de lista de precios: se fija el ancho para no desbordarse en celdas de tabla. */ .dq-pl-price-input { width: 110px; min-width: 90px; } .dq-pl-currency-sel { width: 80px; min-width: 70px; } /* Badge de ítem inactivo alineado con el sistema (variante neutral ya existe). */ .dq-badge--inactive { background-color: rgba(100, 116, 139, .12); color: var(--dq-text-muted); } /* Fila de ítem inactivo en la tabla del catálogo: texto atenuado en todo el renglón. Badges y botones de acción conservan su propio color por regla directa. */ .dq-table-row--inactive > td { color: var(--dq-text-muted); } /* Padding estándar para tarjetas que contienen formularios de filtro/búsqueda */ .dq-card--padded { padding: 1rem 1.25rem; } /* Combobox buscable (searchable select) genérico: usado en "Agregar ítem a la lista" y reutilizable en cualquier real sigue siendo el control funcional, solo se re-viste su contenedor. */ .dq-portal-dropzone { display: flex; align-items: center; gap: .6rem; border: 1.5px dashed var(--dq-border); border-radius: 1rem; padding: .8rem 1rem; color: var(--dq-text-muted); } .dq-portal-dropzone svg { flex-shrink: 0; } .dq-portal-dropzone__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; font-size: .82rem; color: var(--dq-text-muted); } .dq-portal-dropzone__input::file-selector-button { margin-right: .6rem; padding: .3em .7em; border: 1px solid var(--dq-border); border-radius: var(--dq-radius-sm); background-color: var(--dq-bg); color: var(--dq-text); font-size: .78rem; font-weight: 600; } /* ========================================================================== 20. Panel del Administrador del Proveedor (019-plan-suscripcion-workspace) ========================================================================== */ /* Identidad propia negro + verde, deliberadamente distinta de la marca teal del tenant — es la herramienta interna de 3Y Solutions, no algo que un Workspace vea nunca. Reutiliza la estructura .dq-shell/.dq-sidebar/.dq-nav-link/.dq-topbar del layout autenticado del tenant; este bloque solo redefine los tokens de color dentro del scope .dq-provider, así que Bootstrap y el resto de componentes (botones, badges, focus ring) heredan el verde sin tocar una sola regla del layout compartido. El verde es constante en ambos temas; solo cambian fondo/superficie/texto según [data-theme="dark"] (mismo mecanismo de theme.js/site.js que el resto de la app). La sidebar se queda siempre negra — igual que la sidebar del tenant se queda siempre pizarra oscura sin importar el tema — es la identidad fija del panel, no la superficie de lectura. */ .dq-provider { --dq-bg: #F8FAFC; --dq-surface: #FFFFFF; --dq-input-bg: #FFFFFF; --dq-border: #E2E8F0; --dq-text: #1E293B; --dq-text-muted: #64748B; --dq-primary: #198754; --dq-primary-rgb: 25, 135, 84; --dq-primary-text: #15803d; --dq-primary-text-rgb: 21, 128, 61; --dq-on-primary: #FFFFFF; --bs-body-bg: var(--dq-bg); --bs-body-color: var(--dq-text); --bs-primary: var(--dq-primary); --bs-primary-rgb: var(--dq-primary-rgb); --bs-link-color-rgb: var(--dq-primary-text-rgb); --bs-link-hover-color-rgb: var(--dq-primary-text-rgb); background-color: var(--dq-bg); color: var(--dq-text); min-height: 100vh; } [data-theme="dark"] .dq-provider { --dq-bg: #0A0A0A; --dq-surface: #141414; --dq-input-bg: #101010; --dq-border: #262626; --dq-text: #E5E7EB; --dq-text-muted: #9CA3AF; --dq-primary: #22C55E; --dq-primary-rgb: 34, 197, 94; --dq-primary-text: #4ADE80; --dq-primary-text-rgb: 74, 222, 128; --dq-on-primary: #052e16; } /* La sidebar es siempre negra sin importar el tema claro/oscuro elegido — fija su propio verde (no hereda --dq-primary-text del tema activo) porque .dq-nav-link.active y .dq-wordmark--on-dark traen colores pensados para el teal SOBRE OSCURO del tenant; en tema claro esos tokens pasarían a un verde oscuro ilegible sobre el fondo negro de esta sidebar si no se fijaran aquí. */ .dq-provider .dq-sidebar { background-color: #000 !important; border-right-color: rgba(255, 255, 255, .08); --dq-primary: #22C55E; --dq-primary-rgb: 34, 197, 94; --dq-primary-text: #4ADE80; --dq-primary-text-rgb: 74, 222, 128; } .dq-provider .dq-nav-link.active { color: var(--dq-primary-text); } .dq-provider .dq-wordmark--on-dark .dq-wordmark__quote { color: var(--dq-primary-text); } .dq-provider .dq-sidebar__workspace-icon { color: var(--dq-primary); } .dq-provider .dq-topbar { background-color: var(--dq-surface); border-bottom-color: var(--dq-border); } .dq-provider .dq-burger { background-color: var(--dq-surface); border-color: var(--dq-border); color: var(--dq-text-muted); } .dq-provider .card { background-color: var(--dq-surface); border-color: var(--dq-border); color: var(--dq-text); } .dq-provider .card-body { color: var(--dq-text); } .dq-provider .table { --bs-table-bg: transparent; --bs-table-color: var(--dq-text); border-color: var(--dq-border); } .dq-provider .table > :not(caption) > * > * { border-bottom-color: var(--dq-border); } .dq-provider .form-control, .dq-provider .form-select { background-color: var(--dq-input-bg); border-color: var(--dq-border); color: var(--dq-text); } .dq-provider .form-control:focus, .dq-provider .form-select:focus { background-color: var(--dq-input-bg); color: var(--dq-text); border-color: var(--dq-primary); box-shadow: 0 0 0 .2rem rgba(var(--dq-primary-rgb), .25); } .dq-provider .form-label { color: var(--dq-text-muted); } .dq-provider .form-check-input { background-color: var(--dq-input-bg); border-color: var(--dq-border); } .dq-provider .form-check-input:checked { background-color: var(--dq-primary); border-color: var(--dq-primary); } .dq-provider .form-check-label { color: var(--dq-text); } .dq-provider code { color: var(--dq-primary-text); } .dq-provider .btn-outline-secondary { color: var(--dq-text-muted); border-color: var(--dq-border); } .dq-provider .btn-outline-secondary:hover { background-color: rgba(0, 0, 0, .04); color: var(--dq-text); } [data-theme="dark"] .dq-provider .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, .06); } .dq-provider .alert-success { background-color: rgba(var(--dq-primary-rgb), .12); border-color: rgba(var(--dq-primary-rgb), .35); color: var(--dq-primary-text); } .dq-provider .alert-danger { background-color: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); color: #b91c1c; } [data-theme="dark"] .dq-provider .alert-danger { color: #FCA5A5; } .dq-provider dl.row dt { color: var(--dq-text-muted); font-weight: 500; } .dq-provider dl.row dd { color: var(--dq-text); } /* Ficha de identidad del Workspace en la parte superior del detalle: deja claro sobre cuál empresa se está interviniendo antes de mostrar estado/pagos/cambios de plan. */ .dq-provider-workspace-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--dq-radius); background-color: rgba(var(--dq-primary-rgb), .08); border: 1px solid rgba(var(--dq-primary-rgb), .25); margin-bottom: 1.25rem; } .dq-provider-workspace-card__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--dq-radius); background-color: rgba(var(--dq-primary-rgb), .18); color: var(--dq-primary-text); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; } .dq-provider-workspace-card__name { font-size: 1.15rem; font-weight: 700; color: var(--dq-text); } .dq-provider-workspace-card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .82rem; color: var(--dq-text-muted); } .dq-provider-workspace-card__meta strong { color: var(--dq-text); font-weight: 600; } /* Matriz de comparación de planes (Plans/Index): las funciones son filas agrupadas por categoría y los planes son columnas — reemplaza la tabla original (una columna nueva por cada función: SSO, soporte, buzón M365...), que no escalaba a medida que se agregaban funciones. Agregar una función nueva ahora agrega una fila, no una columna. */ .dq-plans-card { overflow: hidden; } .dq-plans-table { margin-bottom: 0; } .dq-plans-table .dq-plans-feature-col { width: 260px; } /* Reinicia el text-transform/color muted que .table > thead th (sección 12) aplica a todo encabezado: aquí el th no es una etiqueta de columna, es el nombre del plan + su acción. */ .dq-plans-table .dq-plans-plan-col { text-align: center; padding: 1rem; vertical-align: top; text-transform: none; letter-spacing: normal; } .dq-plans-table .dq-plans-plan-name { font-size: 1rem; font-weight: 700; color: var(--dq-text); margin-bottom: .35rem; } .dq-plans-table .dq-plans-plan-badge-slot { min-height: 1.35rem; margin-bottom: .5rem; } .dq-plans-table .dq-plans-group-row td { background-color: var(--dq-bg); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dq-text-muted); } .dq-plans-table .dq-plans-value { text-align: center; font-weight: 600; } .dq-plans-table .dq-plans-value--muted { color: var(--dq-text-muted); font-weight: 400; } .dq-plans-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--dq-radius-pill); } .dq-plans-icon--yes { background-color: rgba(var(--dq-primary-rgb), .14); color: var(--dq-primary-text); } .dq-plans-icon--no { background-color: rgba(100, 116, 139, .12); color: var(--dq-text-muted); } /* 19. Ajustes del Workspace — pestañas y confirmación de correo (020) --------- */ /* Barra de pestañas de Ajustes. Son enlaces reales a rutas distintas, no pestañas JS: cada pestaña guarda por separado y el servidor marca la activa. */ .dq-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--dq-border); margin-bottom: 1.5rem; /* Si no caben, la barra hace scroll en vez de romper el ancho de la página. */ overflow-x: auto; } .dq-tabs__link { display: inline-flex; align-items: center; gap: .45rem; padding: .625rem 1rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dq-text-muted); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--dq-radius-sm) var(--dq-radius-sm) 0 0; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .dq-tabs__link:hover { color: var(--dq-text); background-color: color-mix(in srgb, var(--dq-primary) 8%, transparent); } .dq-tabs__link:focus-visible { outline: 2px solid var(--dq-primary); outline-offset: -2px; } .dq-tabs__link.active { color: var(--dq-primary-text); border-bottom-color: var(--dq-primary); } /* Punto de aviso en la pestaña que tiene algo pendiente por completar. */ .dq-tabs__dot { width: .4rem; height: .4rem; border-radius: 50%; background-color: var(--dq-primary); flex-shrink: 0; } /* Icono de la pantalla de confirmación de cambio de correo (vista anónima). */ .dq-confirm__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .dq-confirm__icon--success { background-color: color-mix(in srgb, var(--dq-primary) 15%, transparent); color: var(--dq-primary-text); } /* Los hex de aviso replican los de .dq-status-banner--warning (sección 18) a propósito: el sistema de diseño no tiene token de "warning", así que ese bloque es la fuente de verdad de facto. Si algún día se crea el token, ambos deben pasar a consumirlo. */ .dq-confirm__icon--warning { background-color: #FFF7ED; color: #92400E; } [data-theme="dark"] .dq-confirm__icon--warning { background-color: rgba(217, 119, 6, .12); color: #fbbf24; } /* ========================================================================== 21. Módulo Soporte (029-tickets-soporte) ========================================================================== */ /* Texto largo que debe conservar saltos de línea del usuario (descripción, cuerpo de comentario) sin recurrir a style="white-space:pre-wrap" inline (CSP estricta, dodo-design §1). */ .dq-preserve-whitespace { white-space: pre-wrap; } /* Entrada del hilo de un ticket: comentario público o nota interna (FR-025). El borde izquierdo distingue visualmente cada entrada de la siguiente; la nota interna usa el color de aviso para diferenciarse del comentario público a simple vista. */ .dq-comment { border-left: 3px solid var(--dq-border); padding-left: .75rem; } .dq-comment--internal { border-left-color: #D97706; } [data-theme="dark"] .dq-comment--internal { border-left-color: #fbbf24; } /* Controles inline del hilo (visibilidad del comentario, selector de archivo adjunto): el no debe ocupar el ancho completo de su fila flex. */ .dq-inline-control { width: auto; } .dq-inline-control--file { max-width: 220px; } /* Estado del ticket (data-model.md §1): mismos tonos semánticos que .dq-badge--active/ --pending/--inactive (sección 4) y .dq-badge--priority-* (sección 19) — neutral para el estado inicial, teal de marca para "en curso", ámbar para "en espera", verde para resuelto, gris apagado para el estado final e inmutable. */ .dq-badge--new { background-color: #eef2f6; color: var(--dq-secondary); } .dq-badge--open { background-color: color-mix(in srgb, var(--dq-primary) 15%, transparent); color: var(--dq-primary-text); } .dq-badge--waitingforcustomer { background-color: rgba(217, 119, 6, .12); color: #b45309; } .dq-badge--resolved { background-color: rgba(22, 163, 74, .12); color: #15803d; } .dq-badge--closed { background-color: rgba(100, 116, 139, .12); color: var(--dq-text-muted); } /* Prioridad del ticket (Low/Normal/High/Urgent): tonos propios, no reutiliza .dq-badge--priority-* (sección 19), que es la prioridad de gestión del dashboard de cotizaciones (High/Medium/Low) — semántica distinta aunque el nombre se parezca. */ .dq-badge--ticket-priority-low { background-color: rgba(100, 116, 139, .12); color: var(--dq-text-muted); } .dq-badge--ticket-priority-normal { background-color: color-mix(in srgb, var(--dq-primary) 15%, transparent); color: var(--dq-primary-text); } .dq-badge--ticket-priority-high { background-color: rgba(217, 119, 6, .12); color: #b45309; } .dq-badge--ticket-priority-urgent { background-color: rgba(220, 38, 38, .12); color: #b91c1c; } /* Rediseño del detalle de ticket (029, hallazgo de usabilidad post-implementación): cada campo de clasificación (Estado/Prioridad/Servicio/Responsable) es un
que abre un popover al hacer clic. El borde + lápiz comunican "esto se puede editar", en contraste con los datos de solo lectura de abajo (.dq-field-cell sin .dq-field), que quedan como texto plano sin caja ni afordancia. El cierre (clic fuera, Escape, botón Cancelar) lo maneja wireFieldPopovers() en site.js con un único listener delegado a nivel de documento (no requiere re-cablearse tras el reemplazo de fragmento, Principio XI). */ .dq-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; } .dq-field-grid--readonly { margin-top: .1rem; } .dq-field-divider { height: 1px; background-color: var(--dq-border); margin: 1.1rem 0; } .dq-field-cell { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .dq-field-cell__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dq-text-muted); } .dq-field-cell__value { font-size: .875rem; font-weight: 500; color: var(--dq-text); } .dq-field { position: relative; } .dq-field__control { display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 2.5rem; padding: 0 .7rem; border: 1px solid var(--dq-border); border-radius: var(--dq-radius-sm); background-color: var(--dq-surface); cursor: pointer; list-style: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .dq-field__control::-webkit-details-marker { display: none; } .dq-field__control:hover, .dq-field[open] > .dq-field__control { border-color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .05); box-shadow: var(--dq-shadow-sm); } .dq-field__pencil { color: #94A3B8; flex: 0 0 auto; opacity: .6; transition: opacity .15s ease, color .15s ease; } .dq-field__control:hover .dq-field__pencil, .dq-field[open] > .dq-field__control .dq-field__pencil { opacity: 1; color: var(--dq-primary-text); } .dq-field__control-text { font-size: .82rem; font-weight: 600; color: var(--dq-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dq-field__control-text--empty { color: var(--dq-text-muted); font-weight: 500; } .dq-field__popover { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 1075; /* mismo nivel que .dq-combobox__listbox, por encima de .modal-content (1055) */ width: max(260px, 100%); background-color: var(--dq-surface); border: 1px solid var(--dq-border); border-radius: var(--dq-radius); box-shadow: var(--dq-shadow-lg); padding: .85rem; } .dq-field__popover-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dq-text-muted); margin: 0 0 .6rem; } .dq-field__popover-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--dq-border); } /* Popover de "Cambiar estado": más ancho que el resto porque incluye la nota de resolución, que puede ser larga (feedback de usuario tras el rediseño). */ .dq-field__popover--status { width: min(340px, 92vw); } /* Dentro del popover los controles son "sm", pero .form-control/.form-select (sección 3) fija el mismo padding para todos los tamaños y gana la cascada sobre el .form-control-sm/.form-select-sm de Bootstrap (site.css carga después) — en un popover angosto eso se ve como un margen izquierdo desproporcionado. Se restaura el padding compacto acotado a este contenedor, sin tocar el resto de la app. */ .dq-field__popover .form-control-sm, .dq-field__popover .form-select-sm { padding: .35rem .55rem; } .dq-field__popover textarea.form-control-sm { resize: vertical; min-height: 4.5rem; } /* Editar asunto/solicitante: mismo mecanismo
de siempre, con un con look de botón (icono + texto) en vez del enlace gris casi invisible que había antes. */ .dq-field--title { display: inline-block; margin-top: .1rem; } .dq-field--title .dq-field__control { display: inline-flex; width: auto; height: 2.1rem; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--dq-text-muted); } .dq-field--title .dq-field__control:hover, .dq-field--title[open] > .dq-field__control { color: var(--dq-primary-text); } .dq-field--title .dq-field__popover { width: min(560px, 90vw); } /* Hilo de comentarios: línea de tiempo con avatar por autor (mismo componente .dq-avatar de Usuarios/Clientes) y nota interna resaltada con fondo tintado además del borde izquierdo. */ .dq-thread { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } .dq-thread__item { position: relative; display: flex; gap: .85rem; padding-bottom: 1.35rem; } .dq-thread__item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1px; background-color: var(--dq-border); } /* Cada comentario es su propia tarjeta con borde (no solo las notas internas): así el formulario "Adjuntar archivo" que cuelga de un comentario puntual (data-model.md §4, "cuelga del comentario, no del ticket") queda visualmente contenido dentro de ESA tarjeta, en vez de verse como una acción suelta a nivel del ticket (feedback de usuario tras el rediseño). */ .dq-thread__body { flex: 1 1 auto; min-width: 0; border: 1px solid var(--dq-border); border-radius: var(--dq-radius-sm); background-color: var(--dq-surface); padding: .7rem .85rem; } .dq-thread__body--internal { background-color: rgba(217, 119, 6, .06); border-color: rgba(217, 119, 6, .25); } [data-theme="dark"] .dq-thread__body--internal { background-color: rgba(217, 119, 6, .1); } .dq-internal-pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .65rem; font-weight: 700; color: #b45309; background-color: rgba(217, 119, 6, .14); padding: .15em .5em; border-radius: var(--dq-radius-pill); margin-left: .35rem; vertical-align: middle; } [data-theme="dark"] .dq-internal-pill { color: #fbbf24; background-color: rgba(251, 191, 36, .14); } .dq-attachment-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--dq-primary-text); background-color: rgba(var(--dq-primary-rgb), .07); border: 1px solid rgba(var(--dq-primary-rgb), .22); padding: .3em .6em; border-radius: var(--dq-radius-sm); } .dq-attachment-chip:hover { background-color: rgba(var(--dq-primary-rgb), .12); text-decoration: none; } /* 20. Buzón de correo (031-ingesta-correo-m365) -------------------------------- */ /* Bloque monoespaciado copiable: URL de consentimiento y comando de Exchange Online PowerShell. Reutiliza --dq-* (fondo/borde) en vez de colores sueltos. */ .dq-code-block { display: flex; align-items: flex-start; gap: .6rem; background-color: var(--dq-bg); border: 1px solid var(--dq-border); border-radius: var(--dq-radius-sm); padding: .6rem .75rem; margin-bottom: .75rem; } .dq-code-block__text { flex: 1 1 auto; min-width: 0; font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .8rem; color: var(--dq-text); word-break: break-all; white-space: pre-wrap; } .dq-code-block__copy { flex: 0 0 auto; } /* 21. Correo HTML en el hilo (032-html-correo-tickets) -------------------------- */ /* Contención del HTML ya saneado del servidor (sin style/class propios, ver SupportEmailHtmlSanitizer): solo reglas de layout para que no rompa el ancho de la burbuja del comentario — no hay nada del correo que "fugue" fuera de aquí porque el saneador ya eliminó cualquier estilo, así que no hace falta un iframe (research.md Decisión 7). */ .dq-email-body { overflow-wrap: break-word; } .dq-email-body img { max-width: 100%; height: auto; } .dq-email-body table { max-width: 100%; table-layout: fixed; } .dq-email-body td, .dq-email-body th { overflow-wrap: break-word; } .dq-email-body > table { display: block; overflow-x: auto; }