/* ========================================================================== 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); } .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; 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 */ .dq-public__nav { display: flex; align-items: center; gap: .85rem; } /* 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 muy estrechas se ocultan los enlaces de texto; quedan toggle + CTA. */ @media (max-width: 575.98px) { .dq-public__login { display: none; } .dq-public__login-btn { display: none; } } /* 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 2 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-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; } /* 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-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; } /* ---- 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; } /* ---- 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; } .dq-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .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; } .dq-price-card__price { display: flex; 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; } .dq-price-card__period { font-size: .85rem; color: var(--dq-text-muted); } .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); } /* El CTA se ancla al fondo para alinear los botones entre tarjetas de distinta altura. */ .dq-price-card__cta { margin-top: auto; } /* ---- 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; padding-top: 1.5rem; padding-bottom: 1.5rem; } .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-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; } } /* 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; } .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; } /* 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; } /* 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