/** * Guani Hub CRM — Hoja de estilos del portal * * Sistema de diseño alineado a la identidad Guani Hub. Incluye: * 1. Variables CSS con modo oscuro por defecto y .light-mode en . * 2. Layout split-screen para login/registro. * 3. Glassmorphism, inputs, botones, tipografía (Inter). * 4. Responsive (mobile-first collapse del panel visual). * * Las fuentes y los símbolos se sirven desde el propio plugin. */ /* ===================================================================== * 1. FUENTES * ===================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ===================================================================== * 80. AJUSTES OPERATIVOS Y RESPONSIVOS — VERSIÓN 1.9.0 * ===================================================================== */ /* Ningún tablero interno debe aumentar el ancho del documento. Los módulos * con muchas columnas conservan su propio desplazamiento horizontal. */ .gd-app-shell { width: 100%; max-width: 100vw; overflow-x: hidden; } .gd-main-content { width: calc(100% - 280px); max-width: calc(100vw - 280px); min-width: 0; overflow-x: hidden; } .gd-main-content > .gd-tab-contenido, .gd-content, .gd-agenda, .gd-commercial, .gd-reports-layout, .gd-report-card, .gd-report-table-wrapper, .gd-kanban { min-width: 0; max-width: 100%; } .gd-kanban { width: 100%; overscroll-behavior-inline: contain; } /* Barra del asistente: corrige el acceso y le da el mismo selector de tema. */ .gd-assistant-portal { min-height: 100vh; padding: 0 24px 32px; background: var(--gd-bg); color: var(--gd-text-main); } .gd-assistant-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(1280px, 100%); margin: 0 auto 24px; padding: 14px 0; border-bottom: 1px solid var(--gd-border); } .gd-assistant-brand, .gd-assistant-user { display: flex; align-items: center; gap: 11px; min-width: 0; } .gd-assistant-brand img { width: 40px; height: 40px; object-fit: contain; } .gd-assistant-brand > div, .gd-assistant-user > div { display: grid; min-width: 0; } .gd-assistant-brand strong { color: var(--gd-emerald); font-size: 16px; letter-spacing: -0.02em; } .gd-assistant-brand span, .gd-assistant-user span { color: var(--gd-text-sec); font-size: 11px; } .gd-assistant-user strong { max-width: 240px; overflow: hidden; color: var(--gd-text-main); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .gd-assistant-user .gd-btn { flex: 0 0 auto; } /* Próximas cobranzas: tarjetas operativas, etiquetas y semáforo. */ .gd-collection-list { max-height: 520px; gap: 8px; } .gd-collection-item { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--gd-border); background: color-mix(in srgb, var(--gd-card-bg) 86%, transparent); } .gd-collection-item--vencida, .gd-collection-item--hoy { border-left: 3px solid var(--gd-danger); } .gd-collection-item--urgente { border-left: 3px solid #f59e0b; } .gd-collection-item--proxima { border-left: 3px solid #eab308; } .gd-collection-item--al_dia, .gd-collection-item--pagada { border-left: 3px solid var(--gd-emerald); } .gd-collection-main { display: grid; gap: 10px; min-width: 0; } .gd-collection-copy { min-width: 0; } .gd-collection-name { overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } .gd-collection-detail { margin-top: 2px; overflow-wrap: anywhere; } .gd-collection-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .gd-collection-due { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; } .gd-collection-due > span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; } .gd-collection-due--vencida, .gd-collection-due--hoy { border-color: rgba(239, 91, 91, 0.28); background: rgba(239, 91, 91, 0.12); color: #ff8b8b; } .gd-collection-due--urgente { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.12); color: #f5b94f; } .gd-collection-due--proxima { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.11); color: #e8c74f; } .gd-collection-due--al_dia, .gd-collection-due--pagada { border-color: rgba(135, 191, 20, 0.3); background: rgba(135, 191, 20, 0.12); color: var(--gd-emerald); } body.light-mode .gd-collection-due--vencida, body.light-mode .gd-collection-due--hoy { color: #b42318; } body.light-mode .gd-collection-due--urgente { color: #a15c00; } body.light-mode .gd-collection-due--proxima { color: #806200; } .gd-chip--muted { border: 1px solid var(--gd-border); background: var(--gd-input-bg); color: var(--gd-text-sec); text-transform: none; } .gd-collection-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gd-collection-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 7px 8px; border: 1px solid var(--gd-border); border-radius: 9px; background: var(--gd-input-bg); color: var(--gd-text-sec); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; } .gd-collection-actions button:hover, .gd-collection-actions button:focus-visible { border-color: var(--gd-emerald); color: var(--gd-emerald); } .gd-collection-actions button:disabled { cursor: wait; opacity: 0.55; } .gd-collection-actions .material-symbols-outlined { font-size: 17px; } /* Directorio de clientes: resumen y fichas legibles con nombres largos. */ .gd-clientes-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .gd-clientes-summary > div { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--gd-border); border-radius: 13px; background: var(--gd-card-bg); } .gd-clientes-summary span { color: var(--gd-text-sec); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .gd-clientes-summary strong { color: var(--gd-emerald); font-size: 23px; } .gd-client-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gd-client-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--gd-border); border-radius: 14px; background: var(--gd-card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease; } .gd-client-card:hover, .gd-client-card:focus-visible { border-color: color-mix(in srgb, var(--gd-emerald) 58%, var(--gd-border)); outline: none; transform: translateY(-1px); } .gd-client-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(135, 191, 20, 0.13); color: var(--gd-emerald); font-size: 13px; font-weight: 800; } .gd-client-card-main { display: grid; gap: 8px; min-width: 0; } .gd-client-card-heading, .gd-client-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; } .gd-client-card-heading strong { min-width: 0; color: var(--gd-text-main); font-size: 14px; overflow-wrap: anywhere; } .gd-client-status { padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .gd-client-status--cliente { background: rgba(135, 191, 20, 0.13); color: var(--gd-emerald); } .gd-client-status--prospecto { background: rgba(80, 146, 255, 0.13); color: #78a9ff; } .gd-client-contact { color: var(--gd-text-sec); font-size: 11px; } .gd-client-contact > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; } .gd-client-contact .material-symbols-outlined { font-size: 15px; color: var(--gd-emerald); } .gd-client-card-side { display: grid; justify-items: end; gap: 6px; color: var(--gd-text-sec); font-size: 10px; white-space: nowrap; } .gd-client-policy-count strong { color: var(--gd-text-main); font-size: 14px; } .gd-client-open { display: inline-flex; align-items: center; color: var(--gd-emerald); font-weight: 700; } .gd-client-open .material-symbols-outlined { font-size: 16px; } /* Cartera: composición por tarjetas y editor accesible desde cada póliza. */ .gd-polizas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gd-policy-portfolio-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-card-bg); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09); } .gd-policy-portfolio-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 15px; border-bottom: 1px solid var(--gd-border); } .gd-policy-portfolio-card > header > div { display: grid; gap: 4px; min-width: 0; } .gd-policy-portfolio-card > header strong { color: var(--gd-text-main); font-size: 14px; overflow-wrap: anywhere; } .gd-policy-plan { color: var(--gd-emerald); font-size: 10px; font-weight: 750; letter-spacing: 0.045em; text-transform: uppercase; overflow-wrap: anywhere; } .gd-policy-portfolio-body { flex: 1; padding: 14px 15px; } .gd-policy-portfolio-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; } .gd-policy-portfolio-body dl > div { display: grid; gap: 3px; min-width: 0; } .gd-policy-portfolio-body dt, .gd-policy-portfolio-card footer small { color: var(--gd-text-sec); font-size: 9px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; } .gd-policy-portfolio-body dd { margin: 0; color: var(--gd-text-main); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; } .gd-policy-portfolio-card > footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--gd-border); } .gd-policy-portfolio-card > footer > div { display: grid; gap: 3px; min-width: 0; } .gd-policy-portfolio-card > footer span, .gd-policy-portfolio-card > footer strong { color: var(--gd-text-main); font-size: 11px; overflow-wrap: anywhere; } .gd-policy-converted strong { color: var(--gd-emerald) !important; } .gd-policy-edit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(135, 191, 20, 0.3); border-radius: 9px; background: rgba(135, 191, 20, 0.1); color: var(--gd-emerald); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; } .gd-policy-edit-btn:hover, .gd-policy-edit-btn:focus-visible { border-color: var(--gd-emerald); background: rgba(135, 191, 20, 0.17); } .gd-policy-edit-btn .material-symbols-outlined { font-size: 16px; } /* Reportes: el principal ocupa todo el ancho; los secundarios se equilibran. */ .gd-reports-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .gd-report-card { overflow: hidden; border-color: var(--gd-border); border-radius: 15px; padding: 20px; background: var(--gd-card-bg); } .gd-report-card:first-child { grid-column: 1 / -1; } .gd-report-form-bar { min-width: 0; background: color-mix(in srgb, var(--gd-input-bg) 82%, transparent); border-color: var(--gd-border); } .gd-report-form-bar select, .gd-report-form-bar input { min-width: 0; background: var(--gd-input-bg); border-color: var(--gd-border); } .gd-report-table-wrapper { overscroll-behavior-inline: contain; } @media (max-width: 1240px) { .gd-polizas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-client-directory { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .gd-main-content { width: 100%; max-width: 100vw; } } @media (max-width: 780px) { .gd-reports-layout, .gd-polizas-grid { grid-template-columns: 1fr; } .gd-report-card:first-child { grid-column: auto; } .gd-client-card { grid-template-columns: 42px minmax(0, 1fr); } .gd-client-card-side { grid-column: 2; justify-items: start; } .gd-policy-portfolio-card > footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-policy-edit-btn { grid-column: 1 / -1; } } @media (max-width: 640px) { .gd-assistant-portal { padding-inline: 14px; } .gd-assistant-topbar { align-items: flex-start; flex-direction: column; } .gd-assistant-user { width: 100%; } .gd-assistant-user .gd-btn:last-child { margin-left: auto; } .gd-clientes-summary { grid-template-columns: 1fr; } .gd-clientes-summary > div { display: flex; align-items: center; justify-content: space-between; } .gd-collection-actions { grid-template-columns: 1fr; } .gd-collection-actions button { justify-content: flex-start; } .gd-policy-portfolio-body dl, .gd-policy-portfolio-card > footer { grid-template-columns: 1fr; } .gd-policy-edit-btn { grid-column: auto; } } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-display: block; font-weight: 400; src: url('../fonts/material-symbols-outlined.woff2') format('woff2'); } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'rlig' 1, 'liga' 1; font-variation-settings: 'FILL' 0; } .material-symbols-outlined.gd-icon-filled, .gd-sidebar-item.gd-activo .material-symbols-outlined { font-variation-settings: 'FILL' 1; } /* ===================================================================== * 2. VARIABLES CSS — MODO OSCURO (por defecto) * ===================================================================== */ :root { --gd-bg: #10170c; --gd-card-bg: rgba(23, 33, 15, 0.78); --gd-border: rgba(255, 255, 255, 0.08); --gd-text-main: #f3f4f6; --gd-text-sec: #9a9fa8; --gd-emerald: #87bf14; --gd-gold: #f5a623; --gd-danger: #ef5b5b; --gd-success: #35d399; /* Superficies auxiliares */ --gd-input-bg: #0c1209; --gd-surface-dim: #182510; /* Glassmorphism */ --gd-glass-blur: 24px; --gd-glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); --gd-border-gradient: linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100% ); /* Radios */ --gd-radius-sm: 4px; --gd-radius: 8px; --gd-radius-md: 12px; --gd-radius-lg: 16px; --gd-radius-xl: 20px; --gd-radius-full: 9999px; /* Glow */ --gd-emerald-glow: 0 0 15px rgba(135, 191, 20, 0.30); --gd-emerald-glow-hover: 0 0 25px rgba(135, 191, 20, 0.50); } /* ===================================================================== * 3. VARIABLES CSS — MODO CLARO (.light-mode en ) * ===================================================================== */ body.light-mode { --gd-bg: #f7faf2; --gd-card-bg: rgba(255, 255, 255, 0.9); --gd-border: rgba(15, 23, 42, 0.08); --gd-text-main: #17210f; --gd-text-sec: #617052; --gd-emerald: #6fa60e; --gd-gold: #d97706; --gd-danger: #dc2626; --gd-success: #16a34a; --gd-input-bg: #f0f6e5; --gd-surface-dim: #eaf5d1; --gd-glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); --gd-border-gradient: linear-gradient( 135deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 100% ); --gd-emerald-glow: 0 0 15px rgba(111, 166, 14, 0.20); --gd-emerald-glow-hover: 0 0 25px rgba(111, 166, 14, 0.35); } /* ===================================================================== * 4. RESET MÍNIMO PARA EL SCOPE DE LOGIN/REGISTRO * ===================================================================== */ .gd-split-screen, .gd-split-screen *, .gd-split-screen *::before, .gd-split-screen *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ===================================================================== * 5. LAYOUT SPLIT-SCREEN (login / registro) * ===================================================================== */ .gd-split-screen { display: block; min-height: 100vh; min-height: 100dvh; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--gd-text-main); background-color: var(--gd-bg); overflow-x: hidden; overflow-x: clip; } /* ---------- Panel izquierdo: shader visual ---------- */ .gd-split-visual { display: none; position: relative; overflow: hidden; background-color: var(--gd-surface-dim); } .gd-split-visual canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } .gd-split-visual-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(14, 17, 26, 0.80) 0%, transparent 50%, transparent 100% ); z-index: 10; pointer-events: none; } body.light-mode .gd-split-visual-overlay { background: linear-gradient( to top, rgba(248, 250, 252, 0.85) 0%, rgba(248, 250, 252, 0.20) 50%, transparent 100% ); } .gd-split-visual-brand { position: absolute; top: 48px; left: 48px; z-index: 30; display: flex; align-items: center; gap: 12px; } .gd-split-visual-brand img { width: 48px; height: 48px; object-fit: contain; } .gd-split-visual-brand span { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } body.light-mode .gd-split-visual-brand span { color: var(--gd-text-main); } .gd-split-visual-hero { position: absolute; bottom: 64px; left: 48px; right: 48px; z-index: 20; } .gd-split-visual-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; max-width: 520px; margin-bottom: 24px; } body.light-mode .gd-split-visual-hero h1 { color: var(--gd-text-main); } .gd-split-visual-hero-line { height: 4px; width: 96px; background: var(--gd-emerald); border-radius: var(--gd-radius-full); } /* ---------- Panel derecho: formularios ---------- */ .gd-split-form { width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; background-color: var(--gd-bg); display: flex; flex-direction: column; align-items: stretch; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); position: relative; } .gd-form-container { width: 100%; max-width: 460px; margin-inline: auto; } #gd-login-screen .gd-form-container { margin-block: auto; padding-block: 44px 28px; } #gd-registro-screen .gd-form-container { margin-top: 32px; margin-bottom: auto; padding-bottom: 28px; } /* La marca permanece visible en móvil cuando se oculta el panel gráfico. */ .gd-access-mobile-brand { display: flex; align-items: center; gap: 10px; width: min(100%, 250px); min-height: 44px; padding-right: 52px; } .gd-access-mobile-brand img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; } .gd-access-mobile-brand-copy { display: grid; min-width: 0; gap: 2px; } .gd-access-mobile-brand-copy strong { overflow: hidden; color: var(--gd-text-main); font-size: 15px; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .gd-access-mobile-brand-copy span { color: var(--gd-text-sec); font-size: 10px; font-weight: 650; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } /* ---------- Footer del panel derecho ---------- */ .gd-split-footer { position: relative; margin-top: 20px; padding-inline: 4px; font-size: 11px; line-height: 1.5; text-align: center; color: var(--gd-text-sec); opacity: 0.62; } /* ===================================================================== * 6. TOGGLE DE TEMA * ===================================================================== */ .gd-theme-toggle { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 50; } .gd-theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--gd-radius-full); border: 1px solid var(--gd-border); background: var(--gd-card-bg); color: var(--gd-text-sec); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .gd-theme-toggle-btn > span:last-child { display: none; } .gd-theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.05); } body.light-mode .gd-theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.04); } .gd-theme-toggle-btn .material-symbols-outlined { font-size: 20px; color: var(--gd-emerald); transition: transform 0.3s ease; } .gd-theme-toggle-btn:hover .material-symbols-outlined { transform: rotate(15deg); } /* ===================================================================== * 7. TIPOGRAFÍA DE ACCESO (login / registro) * ===================================================================== */ .gd-acceso-header { margin-bottom: 28px; } .gd-acceso-title { font-size: clamp(26px, 8vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--gd-text-main); margin-bottom: 8px; } .gd-acceso-subtitle { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--gd-text-sec); } /* ===================================================================== * 8. FORMULARIOS GLASS * ===================================================================== */ .gd-glass-field { margin-bottom: 20px; } .gd-glass-field label { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--gd-text-sec); margin-bottom: 8px; margin-left: 4px; } .gd-glass-field .gd-input-wrap { position: relative; } .gd-glass-field .gd-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--gd-text-sec); opacity: 0.5; pointer-events: none; } .gd-glass-input { width: 100%; height: 56px; padding: 0 16px; border-radius: var(--gd-radius-md); border: 1px solid rgba(255, 255, 255, 0.05); background: var(--gd-input-bg); color: var(--gd-text-main); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.6; transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; } body.light-mode .gd-glass-input { border-color: rgba(0, 0, 0, 0.08); } .gd-glass-input--icon { padding-left: 48px; } .gd-glass-input:focus { border-color: var(--gd-emerald); box-shadow: 0 0 10px rgba(16, 185, 129, 0.15); } body.light-mode .gd-glass-input:focus { box-shadow: 0 0 10px rgba(5, 150, 105, 0.12); } .gd-glass-input::placeholder { color: #94a3b8; } body.light-mode .gd-glass-input::placeholder { color: #94a3b8; } /* Link de "¿Olvidó su contraseña?" */ .gd-forgot-link { display: block; text-align: right; margin-top: 6px; font-size: 12px; color: var(--gd-emerald); text-decoration: none; } .gd-forgot-link:hover { text-decoration: underline; } /* Grid de 2 columnas para registro */ .gd-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } /* ===================================================================== * 9. BOTONES * ===================================================================== */ .gd-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border: none; border-radius: var(--gd-radius-md); background: var(--gd-emerald); color: #0e111a; font-family: inherit; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: var(--gd-emerald-glow); transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .gd-btn-primary:hover { box-shadow: var(--gd-emerald-glow-hover); transform: translateY(-1px); } .gd-btn-primary:active { transform: translateY(0); } .gd-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .gd-btn-primary .material-symbols-outlined { font-size: 22px; } /* ===================================================================== * 10. SEPARADOR Y PIE DE FORMULARIO * ===================================================================== */ .gd-acceso-divider { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; font-size: 16px; color: var(--gd-text-sec); } body.light-mode .gd-acceso-divider { border-top-color: rgba(0, 0, 0, 0.06); } .gd-acceso-divider a, .gd-acceso-divider button { background: none; border: none; color: var(--gd-emerald); font-family: inherit; font-size: inherit; font-weight: 700; cursor: pointer; text-decoration: none; margin-left: 4px; } .gd-acceso-divider a:hover, .gd-acceso-divider button:hover { text-decoration: underline; } /* ===================================================================== * 11. CAJA DE AVISO (nota de activación en registro) * ===================================================================== */ .gd-info-box { display: flex; align-items: flex-start; gap: 12px; padding: 16px; margin-top: 16px; border-radius: var(--gd-radius-md); background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.20); } .gd-info-box .material-symbols-outlined { color: var(--gd-emerald); font-size: 22px; flex-shrink: 0; font-variation-settings: 'FILL' 1; } .gd-info-box p { font-size: 12px; line-height: 1.5; color: var(--gd-text-sec); } .gd-info-box strong { color: var(--gd-emerald); font-weight: 700; } /* ===================================================================== * 12. MENSAJES DE ESTADO (éxito / error) * ===================================================================== */ .gd-acceso-msg { margin-top: 16px; font-size: 13px; text-align: center; min-height: 20px; } .gd-acceso-msg--success { color: var(--gd-success); } .gd-acceso-msg--error { color: var(--gd-danger); } /* Mensaje flash de "registro exitoso" en la pantalla de login */ .gd-flash-success { margin-bottom: 24px; padding: 12px 16px; border-radius: var(--gd-radius); background: rgba(53, 211, 153, 0.10); border: 1px solid rgba(53, 211, 153, 0.25); color: var(--gd-success); font-size: 13px; text-align: center; } /* ===================================================================== * 13. PANTALLA DE ÉXITO POST-REGISTRO * ===================================================================== */ .gd-success-screen { text-align: center; } .gd-success-icon { width: 56px; height: 56px; border-radius: var(--gd-radius-lg); background: rgba(53, 211, 153, 0.15); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 20px; color: var(--gd-success); } .gd-success-screen .gd-acceso-divider { margin-top: 24px; border-top: none; padding-top: 0; } /* ===================================================================== * 14. BOTÓN "VOLVER" (registro → login) * ===================================================================== */ .gd-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--gd-text-sec); text-decoration: none; margin-bottom: 24px; transition: color 0.15s ease; } .gd-back-link:hover { color: var(--gd-emerald); } .gd-back-link .material-symbols-outlined { font-size: 16px; transition: transform 0.15s ease; } .gd-back-link:hover .material-symbols-outlined { transform: translateX(-4px); } /* ===================================================================== * 15. RESPONSIVE MOBILE-FIRST * ===================================================================== */ @media (max-width: 420px) { .gd-split-form { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } .gd-theme-toggle { right: max(16px, env(safe-area-inset-right)); } #gd-login-screen .gd-form-container { padding-top: 34px; } #gd-registro-screen .gd-form-container { margin-top: 24px; } .gd-acceso-title { font-size: 26px; } .gd-acceso-subtitle { font-size: 14px; } .gd-glass-input, .gd-btn-primary { height: 52px; } /* 16 px evita el zoom automático de Safari al enfocar inputs. */ .gd-glass-input { font-size: 16px; } .gd-btn-primary { font-size: 16px; } .gd-acceso-divider { font-size: 14px; line-height: 1.6; } } @media (min-width: 641px) { .gd-split-form { padding-inline: 40px; } .gd-theme-toggle { right: 40px; } .gd-access-mobile-brand { width: 280px; padding-right: 0; } .gd-theme-toggle-btn { width: auto; padding-inline: 16px; gap: 8px; } .gd-theme-toggle-btn > span:last-child { display: inline; } #gd-registro-screen .gd-form-container { max-width: 520px; } } @media (min-width: 1025px) { .gd-split-screen { display: flex; } .gd-split-visual { display: block; flex: 0 0 50%; } .gd-split-form { flex: 0 0 50%; width: 50%; align-items: center; justify-content: center; padding: 40px; } .gd-access-mobile-brand { display: none; } .gd-form-container, #gd-login-screen .gd-form-container, #gd-registro-screen .gd-form-container { max-width: 420px; margin: 0; padding: 0; } .gd-theme-toggle { top: 48px; right: 48px; } .gd-split-footer { position: absolute; right: 48px; bottom: 32px; margin: 0; padding: 0; font-size: 12px; text-align: right; opacity: 0.5; } .gd-acceso-header { margin-bottom: 40px; } .gd-acceso-title { font-size: 32px; } .gd-acceso-subtitle { font-size: 16px; } .gd-glass-field { margin-bottom: 24px; } .gd-fields-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } } @media (min-width: 1025px) and (max-height: 760px) { #gd-registro-screen .gd-split-form { justify-content: flex-start; overflow-y: auto; padding-block: 32px 72px; } #gd-registro-screen .gd-theme-toggle { top: 24px; } } @media (prefers-reduced-motion: reduce) { .gd-theme-toggle-btn, .gd-btn-primary, .gd-back-link .material-symbols-outlined { transition: none; } } /* ===================================================================== * GUANI HUB CRM — DASHBOARD * ===================================================================== * Estilos para el portal del asesor y asistente. Reemplaza todo el CSS * que antes vivía inline en css_compartido(). * * Utiliza las mismas variables :root / body.light-mode de la sección * de login/registro. Agrega variables adicionales para el contexto * del dashboard (brand overrides del asesor). * * Inter y Material Symbols se sirven localmente desde este plugin. * ===================================================================== */ /* ===================================================================== * 20. PORTAL — CONTENEDOR RAÍZ * ===================================================================== */ .gd-portal { /* Brand overrides — se sobreescriben via inline style por asesor */ --gd-brand-accent: var(--gd-emerald); --gd-brand-accent-soft: rgba(16, 185, 129, 0.10); --gd-brand-card: var(--gd-card-bg); background: var(--gd-bg); color: var(--gd-text-main); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; padding: 0; border-radius: 0; } .gd-portal *, .gd-portal *::before, .gd-portal *::after { box-sizing: border-box; } /* ===================================================================== * 21. TOP BAR — MARCA + LOGOUT * ===================================================================== */ .gd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; position: sticky; top: 0; z-index: 40; background: rgba(14, 17, 26, 0.90); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gd-border); } body.light-mode .gd-topbar { background: rgba(248, 250, 252, 0.92); } .gd-topbar-brand { display: flex; align-items: center; gap: 12px; } .gd-topbar-brand-logo { max-height: 40px; max-width: 160px; object-fit: contain; border-radius: var(--gd-radius); } .gd-topbar-brand-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gd-border); } .gd-topbar-brand-name { font-size: 20px; font-weight: 700; color: var(--gd-emerald); letter-spacing: -0.01em; } .gd-topbar-actions { display: flex; align-items: center; gap: 12px; } .gd-btn-logout { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--gd-radius); border: 1px solid rgba(239, 91, 91, 0.25); background: rgba(239, 91, 91, 0.08); color: var(--gd-danger); font-size: 13px; font-weight: 600; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s ease; } .gd-btn-logout:hover { background: rgba(239, 91, 91, 0.18); } /* Mobile logout bar */ .gd-logout-movil { display: none; } @media (max-width: 640px) { .gd-topbar { padding: 12px 16px; } .gd-topbar .gd-btn-logout { display: none; } .gd-logout-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--gd-bg); border-top: 1px solid var(--gd-border); } .gd-logout-movil .gd-btn-logout { display: flex; width: 100%; justify-content: center; padding: 13px; font-size: 14px; } .gd-portal { padding-bottom: 80px; } } /* ===================================================================== * 22. CONTENT AREA * ===================================================================== */ .gd-content { padding: 32px 40px; } @media (max-width: 640px) { .gd-content { padding: 20px 16px; } } .gd-content-header { margin-bottom: 24px; } .gd-content-title { font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.01em; color: var(--gd-text-main); margin: 0 0 4px 0; } .gd-content-subtitle { font-size: 18px; font-weight: 400; line-height: 28px; color: var(--gd-text-sec); margin: 0; } @media (max-width: 640px) { .gd-content-title { font-size: 24px; line-height: 32px; } .gd-content-subtitle { font-size: 14px; line-height: 20px; } } /* ===================================================================== * 23. TAB NAVIGATION * ===================================================================== */ .gd-tabs-nav { display: flex; gap: 4px; padding: 0 40px; border-bottom: 1px solid var(--gd-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gd-tabs-nav::-webkit-scrollbar { display: none; } @media (max-width: 640px) { .gd-tabs-nav { padding: 0 16px; } } .gd-tab-btn { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--gd-text-sec); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .gd-tab-btn:hover { color: var(--gd-text-main); background: rgba(255, 255, 255, 0.03); } body.light-mode .gd-tab-btn:hover { background: rgba(0, 0, 0, 0.03); } .gd-tab-btn.gd-activo { color: var(--gd-emerald); border-bottom-color: var(--gd-emerald); } .gd-tab-btn .material-symbols-outlined { font-size: 20px; } .gd-tab-contenido { display: none; } .gd-tab-contenido.gd-activo { display: block; } /* ===================================================================== * 24. BENTO GRID — 12 COLUMNS * ===================================================================== */ .gd-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; } .gd-col-3 { grid-column: span 3; } .gd-col-4 { grid-column: span 4; } .gd-col-6 { grid-column: span 6; } .gd-col-8 { grid-column: span 8; } .gd-col-12 { grid-column: span 12; } .gd-row-2 { grid-row: span 2; } @media (max-width: 1100px) { .gd-bento { grid-template-columns: repeat(6, 1fr); } .gd-col-3 { grid-column: span 3; } .gd-col-4 { grid-column: span 3; } .gd-col-6 { grid-column: span 6; } .gd-col-8 { grid-column: span 6; } .gd-col-12 { grid-column: span 6; } } @media (max-width: 768px) { .gd-bento { grid-template-columns: 1fr; } .gd-col-3, .gd-col-4, .gd-col-6, .gd-col-8, .gd-col-12 { grid-column: span 1; } .gd-row-2 { grid-row: span 1; } } /* ===================================================================== * 25. GLASS CARD — BASE * ===================================================================== */ .gd-glass { background: rgba(22, 27, 38, 0.80); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .gd-glass:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 2px 10px rgba(16, 185, 129, 0.04); } body.light-mode .gd-glass { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.08); } body.light-mode .gd-glass:hover { border-color: rgba(15, 23, 42, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } /* ===================================================================== * 26. METRIC CARD * ===================================================================== */ .gd-metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; } .gd-metric-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .gd-metric-label { font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); } .gd-metric-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--gd-radius); font-size: 22px; } .gd-metric-icon--emerald { background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); } .gd-metric-icon--gold { background: rgba(245, 166, 35, 0.10); color: var(--gd-gold); } .gd-metric-icon--blue { background: rgba(59, 130, 246, 0.10); color: #3b82f6; } .gd-metric-icon--danger { background: rgba(239, 91, 91, 0.10); color: var(--gd-danger); } .gd-metric-value { font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--gd-text-main); margin-bottom: 4px; } @media (max-width: 640px) { .gd-metric-value { font-size: 28px; } } .gd-metric-value--emerald { color: var(--gd-emerald); } .gd-metric-value--gold { color: var(--gd-gold); } .gd-metric-value--danger { color: var(--gd-danger); } .gd-metric-sub { font-size: 13px; color: var(--gd-text-sec); display: flex; align-items: center; gap: 4px; } .gd-metric-sub .material-symbols-outlined { font-size: 16px; } /* ===================================================================== * 27. CARD TITLES AND LABELS * ===================================================================== */ .gd-card-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .gd-card-label { font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); } .gd-card-title { font-size: 16px; font-weight: 600; color: var(--gd-text-main); margin: 0; } .gd-card-more-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--gd-text-sec); cursor: pointer; padding: 4px; border-radius: var(--gd-radius-sm); transition: color 0.15s ease; } .gd-card-more-btn:hover { color: var(--gd-text-main); } /* ===================================================================== * 28. CHART CARD * ===================================================================== */ .gd-chart-card { display: flex; flex-direction: column; } .gd-chart-card canvas { flex-grow: 1; width: 100% !important; max-height: 280px; } /* ===================================================================== * 29. COLLECTION LIST (Próximas cobranzas, cumpleaños, etc.) * ===================================================================== */ .gd-collection { display: flex; flex-direction: column; } .gd-collection-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 340px; flex-grow: 1; } /* Scrollbar for collection lists */ .gd-collection-list::-webkit-scrollbar { width: 6px; } .gd-collection-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } .gd-collection-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } .gd-collection-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: var(--gd-radius); transition: background 0.15s ease; cursor: default; } .gd-collection-item:hover { background: rgba(255, 255, 255, 0.04); } body.light-mode .gd-collection-item:hover { background: rgba(0, 0, 0, 0.03); } .gd-collection-item-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .gd-collection-avatar { width: 40px; height: 40px; border-radius: var(--gd-radius); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--gd-border); color: var(--gd-text-main); } body.light-mode .gd-collection-avatar { background: rgba(0, 0, 0, 0.04); } .gd-collection-name { font-size: 14px; font-weight: 600; color: var(--gd-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-collection-detail { font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.05em; color: var(--gd-text-sec); } .gd-collection-right { text-align: right; flex-shrink: 0; } /* ===================================================================== * 30. STATUS CHIPS / BADGES * ===================================================================== */ .gd-chip { display: inline-block; padding: 3px 10px; border-radius: var(--gd-radius-full); font-family: 'Geist', 'Inter', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .gd-chip--emerald { background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); border: 1px solid rgba(16, 185, 129, 0.20); } .gd-chip--gold { background: rgba(245, 166, 35, 0.10); color: var(--gd-gold); border: 1px solid rgba(245, 166, 35, 0.20); } .gd-chip--danger { background: rgba(239, 91, 91, 0.10); color: var(--gd-danger); border: 1px solid rgba(239, 91, 91, 0.20); } .gd-chip--blue { background: rgba(59, 130, 246, 0.10); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.20); } .gd-chip--accent { background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); border: 1px solid rgba(16, 185, 129, 0.20); } /* ===================================================================== * 31. BUTTONS (dashboard context) * ===================================================================== */ .gd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--gd-radius); border: none; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease; } .gd-btn:hover { opacity: 0.90; } .gd-btn:active { transform: scale(0.98); } .gd-btn--primary { background: linear-gradient(135deg, var(--gd-emerald), #a8d850); color: #fff; } .gd-btn--secondary { background: transparent; border: 1px solid var(--gd-border); color: var(--gd-text-main); } .gd-btn--secondary:hover { background: rgba(255, 255, 255, 0.05); } body.light-mode .gd-btn--secondary:hover { background: rgba(0, 0, 0, 0.04); } .gd-btn--danger { background: rgba(239, 91, 91, 0.12); color: var(--gd-danger); border: 1px solid rgba(239, 91, 91, 0.20); } .gd-btn--full { width: 100%; } .gd-btn--sm { padding: 6px 14px; font-size: 12px; } .gd-btn .material-symbols-outlined { font-size: 18px; } /* Quick actions stack */ .gd-actions-stack { display: flex; flex-direction: column; gap: 10px; } /* ===================================================================== * 32. FORM ELEMENTS * ===================================================================== */ .gd-input, .gd-select, .gd-textarea { width: 100%; padding: 12px 16px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.10); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } body.light-mode .gd-input, body.light-mode .gd-select, body.light-mode .gd-textarea { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.10); } .gd-input:focus, .gd-select:focus, .gd-textarea:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); } .gd-input::placeholder, .gd-textarea::placeholder { color: #94a3b8; } .gd-textarea { min-height: 72px; resize: vertical; } .gd-field { margin-bottom: 14px; } .gd-field label { display: block; font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); margin-bottom: 8px; } .gd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gd-form-grid .gd-field--full { grid-column: span 2; } .gd-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } @media (max-width: 640px) { .gd-form-grid { grid-template-columns: 1fr; } .gd-form-grid .gd-field--full { grid-column: span 1; } } /* ===================================================================== * 33. DATA TABLES * ===================================================================== */ .gd-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--gd-border); } .gd-table { width: 100%; border-collapse: collapse; background: transparent; } .gd-table th, .gd-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--gd-border); } .gd-table th { font-family: 'Geist', 'Inter', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); background: rgba(255, 255, 255, 0.02); } body.light-mode .gd-table th { background: rgba(0, 0, 0, 0.02); } .gd-table tr:last-child td { border-bottom: none; } .gd-table-row--click { cursor: pointer; transition: background 0.15s ease; } .gd-table-row--click:hover td { background: rgba(255, 255, 255, 0.03); } body.light-mode .gd-table-row--click:hover td { background: rgba(0, 0, 0, 0.02); } /* ===================================================================== * 34. MODALS * ===================================================================== */ .gd-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(14, 17, 26, 0.60); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .gd-modal-backdrop.gd-visible { display: flex; } .gd-modal-panel { background: rgba(22, 27, 38, 0.95); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--gd-border); border-radius: 20px; padding: 28px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: -10px 0 64px rgba(0, 0, 0, 0.30); } body.light-mode .gd-modal-panel { background: rgba(255, 255, 255, 0.97); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .gd-modal-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .gd-modal-title { font-size: 18px; font-weight: 700; color: var(--gd-text-main); margin: 0; } .gd-modal-close { background: none; border: none; color: var(--gd-text-sec); font-size: 22px; cursor: pointer; padding: 4px 8px; border-radius: var(--gd-radius-sm); transition: color 0.15s ease, background 0.15s ease; } .gd-modal-close:hover { color: var(--gd-text-main); background: rgba(255, 255, 255, 0.05); } /* ===================================================================== * 35. DROPZONE (CSV import) * ===================================================================== */ .gd-dropzone { border: 2px dashed var(--gd-border); border-radius: 16px; padding: 40px 24px; text-align: center; color: var(--gd-text-sec); font-size: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .gd-dropzone.gd-dragging { border-color: var(--gd-emerald); background: rgba(16, 185, 129, 0.06); } .gd-import-summary { margin-top: 14px; font-size: 13px; } .gd-import-errors { max-height: 150px; overflow-y: auto; color: var(--gd-danger); font-size: 12px; margin-top: 8px; } /* ===================================================================== * 36. MESSAGES & NOTES * ===================================================================== */ .gd-msg { margin-top: 12px; font-size: 13px; min-height: 18px; } .gd-msg--success { color: var(--gd-success); } .gd-msg--error { color: var(--gd-danger); } .gd-note { display: flex; align-items: flex-start; gap: 10px; background: rgba(245, 166, 35, 0.08); border: 1px solid rgba(245, 166, 35, 0.20); border-radius: var(--gd-radius-md); padding: 12px 16px; font-size: 12px; line-height: 1.5; color: var(--gd-gold); margin-bottom: 16px; } .gd-note .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; } /* ===================================================================== * 37. EMPTY STATE * ===================================================================== */ .gd-empty { color: var(--gd-text-sec); font-size: 13px; font-style: italic; padding: 20px 0; text-align: center; } /* ===================================================================== * 38. SELECT CATALOG (legacy compatibility) * ===================================================================== */ .gd-select-catalogo { width: 100%; padding: 12px 16px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.10); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s ease; } body.light-mode .gd-select-catalogo { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.10); } .gd-select-catalogo:focus { border-color: var(--gd-emerald); } .gd-campo-otro-texto { width: 100%; padding: 10px 14px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.10); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 13px; } /* ===================================================================== * 39. GLOBAL SCROLLBAR STYLING (within portal) * ===================================================================== */ .gd-portal ::-webkit-scrollbar { width: 6px; height: 6px; } .gd-portal ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } .gd-portal ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; } .gd-portal ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); } body.light-mode .gd-portal ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } /* ===================================================================== * 40. LEGACY CLASS COMPATIBILITY * ===================================================================== * Las pestañas Reportes, Notificaciones, Mi Equipo y Mi Marca, así * como render_modales_cliente() y js_modales_cliente_y_reportes(), * siguen emitiendo HTML con los nombres de clase originales de la * Etapa 1-9. Estos estilos garantizan que esas secciones se vean * con la misma estética glassmórfica sin necesidad de modificar su PHP. * ===================================================================== */ /* --- Old bento grid (used by sub-renders) --- */ .gd-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; } .gd-card { background: rgba(22, 27, 38, 0.80); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.3s ease; } body.light-mode .gd-card { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.08); } .gd-card:hover { border-color: rgba(255, 255, 255, 0.14); } body.light-mode .gd-card:hover { border-color: rgba(15, 23, 42, 0.15); } .gd-card-span-2 { grid-column: span 2; } .gd-card-span-4 { grid-column: span 4; } .gd-card-alto { grid-row: span 2; } @media (max-width: 1100px) { .gd-bento-grid { grid-template-columns: repeat(2, 1fr); } .gd-card-span-2, .gd-card-span-4 { grid-column: span 2; } } @media (max-width: 640px) { .gd-bento-grid { grid-template-columns: 1fr; } .gd-card-span-2, .gd-card-span-4 { grid-column: span 1; } } /* --- Old card interior elements --- */ .gd-card-etiqueta { font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); margin-bottom: 8px; } .gd-card-valor { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--gd-text-main); } .gd-card-valor.gd-color-exito { color: var(--gd-emerald); } .gd-card-valor.gd-color-alerta { color: var(--gd-gold); } .gd-card-titulo { font-size: 15px; font-weight: 600; color: var(--gd-text-main); margin-bottom: 12px; } .gd-card-sub { font-size: 12px; color: var(--gd-text-sec); margin-top: 4px; } /* --- Old lists --- */ .gd-lista-simple { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 280px; } .gd-lista-simple li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--gd-radius); font-size: 13px; transition: background 0.15s ease; } .gd-lista-simple li:hover { background: rgba(255, 255, 255, 0.04); } body.light-mode .gd-lista-simple li:hover { background: rgba(0, 0, 0, 0.03); } .gd-lista-nombre { font-weight: 600; color: var(--gd-text-main); } .gd-lista-detalle { color: var(--gd-text-sec); display: block; font-size: 12px; } /* --- Old badges --- */ .gd-badge { display: inline-block; padding: 3px 10px; border-radius: var(--gd-radius-full); font-family: 'Geist', 'Inter', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); border: 1px solid rgba(16, 185, 129, 0.20); } .gd-badge-urgente { background: rgba(239, 91, 91, 0.10); color: var(--gd-danger); border-color: rgba(239, 91, 91, 0.20); } /* --- Old buttons --- */ .gd-boton { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--gd-radius); border: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: opacity 0.15s ease; } .gd-boton:hover { opacity: 0.88; } .gd-boton-primario { background: linear-gradient(135deg, var(--gd-emerald), #a8d850); color: #fff; } .gd-boton-secundario { background: transparent; border: 1px solid var(--gd-border); color: var(--gd-text-main); } .gd-boton-secundario:hover { background: rgba(255, 255, 255, 0.05); } .gd-boton-peligro { background: rgba(239, 91, 91, 0.12); color: var(--gd-danger); } .gd-botones-accion { display: flex; flex-direction: column; gap: 10px; } /* --- Old form elements --- */ .gd-panel-input, .gd-panel-select { padding: 10px 14px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.10); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 13px; outline: none; } body.light-mode .gd-panel-input, body.light-mode .gd-panel-select { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.10); } .gd-panel-input:focus, .gd-panel-select:focus { border-color: var(--gd-emerald); } .gd-campo label { display: block; font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); margin-bottom: 6px; } .gd-campo input, .gd-campo select, .gd-campo textarea { width: 100%; padding: 10px 14px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.10); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 13px; outline: none; } body.light-mode .gd-campo input, body.light-mode .gd-campo select, body.light-mode .gd-campo textarea { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.10); } .gd-campo input:focus, .gd-campo select:focus, .gd-campo textarea:focus { border-color: var(--gd-emerald); } .gd-campo textarea { min-height: 64px; resize: vertical; } .gd-campo-ancho { grid-column: span 2; } .gd-form-acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } @media (max-width: 640px) { .gd-campo-ancho { grid-column: span 1; } } /* --- Old modals --- */ .gd-modal-fondo { display: none; position: fixed; inset: 0; background: rgba(14, 17, 26, 0.60); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .gd-modal-fondo.gd-visible { display: flex; } .gd-modal-caja { background: rgba(22, 27, 38, 0.95); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--gd-border); border-radius: 20px; padding: 28px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: -10px 0 64px rgba(0, 0, 0, 0.30); } body.light-mode .gd-modal-caja { background: rgba(255, 255, 255, 0.97); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .gd-modal-titulo { font-size: 17px; font-weight: 700; margin: 0 0 16px 0; display: flex; justify-content: space-between; align-items: center; color: var(--gd-text-main); } .gd-modal-cerrar { background: none; border: none; color: var(--gd-text-sec); font-size: 20px; cursor: pointer; } /* --- Old dropzone --- */ .gd-zona-dropzone { border: 2px dashed var(--gd-border); border-radius: 16px; padding: 36px 20px; text-align: center; color: var(--gd-text-sec); font-size: 14px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .gd-zona-dropzone.gd-arrastrando { border-color: var(--gd-emerald); background: rgba(16, 185, 129, 0.06); } .gd-resumen-importacion { margin-top: 14px; font-size: 13px; } .gd-resumen-errores { max-height: 150px; overflow-y: auto; color: var(--gd-danger); font-size: 12px; margin-top: 8px; } /* --- Old tables --- */ .gd-tabla { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; } .gd-tabla th, .gd-tabla td { padding: 12px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--gd-border); } .gd-tabla th { font-family: 'Geist', 'Inter', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); } .gd-tabla tr:last-child td { border-bottom: none; } .gd-fila-clickeable { cursor: pointer; transition: background 0.15s ease; } .gd-fila-clickeable:hover td { background: rgba(255, 255, 255, 0.03); } body.light-mode .gd-fila-clickeable:hover td { background: rgba(0, 0, 0, 0.02); } /* --- Old messages --- */ .gd-mensaje-estado { margin-top: 10px; font-size: 13px; } .gd-mensaje-estado.gd-exito-texto { color: var(--gd-success); } .gd-mensaje-estado.gd-error-texto { color: var(--gd-danger); } .gd-sin-datos { color: var(--gd-text-sec); font-size: 13px; font-style: italic; padding: 16px 0; text-align: center; } /* --- Old notes/warnings --- */ .gd-nota-aviso { display: flex; align-items: flex-start; gap: 10px; background: rgba(245, 166, 35, 0.08); border: 1px solid rgba(245, 166, 35, 0.20); border-radius: var(--gd-radius-md); padding: 12px 16px; font-size: 12px; line-height: 1.5; color: var(--gd-gold); margin-bottom: 16px; } /* --- Old marca encabezado (reused in topbar) --- */ .gd-marca-encabezado { display: flex; align-items: center; gap: 12px; } .gd-marca-logo { max-height: 36px; max-width: 160px; object-fit: contain; } .gd-marca-foto-perfil { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gd-border); } /* ===================================================================== * GUANI HUB CRM — SLIDE-OVER Y DIRECTORIO * ===================================================================== * Estilos para: * §50. Slide-Over Drawer (reemplaza modal centrado de cliente) * §51. Directorio de clientes (tabla mejorada + buscador) * §52. Secciones accordion dentro del slide-over * §53. Acciones rápidas contextuales en slide-over * §54. Tarjetas de póliza dentro del slide-over * * Mecanismo: el JS existente llama abrirModal('gd-modal-cliente') que * agrega .gd-visible al wrapper. Ese wrapper ahora usa la clase * .gd-slideover en lugar de .gd-modal-fondo, y la caja interior * usa .gd-slideover-panel en lugar de .gd-modal-caja. * ===================================================================== */ /* ===================================================================== * 50. SLIDE-OVER DRAWER * ===================================================================== */ .gd-slideover { display: none; position: fixed; inset: 0; z-index: 9999; } .gd-slideover.gd-visible { display: block; } /* Backdrop */ .gd-slideover-backdrop { position: absolute; inset: 0; background: rgba(14, 17, 26, 0.60); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .gd-slideover.gd-visible .gd-slideover-backdrop { opacity: 1; } /* Panel */ .gd-slideover-panel { position: absolute; top: 0; right: 0; width: 480px; max-width: 100%; height: 100%; background: rgba(22, 27, 38, 0.95); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border-left: 1px solid rgba(255, 255, 255, 0.08); box-shadow: -10px 0 64px rgba(0, 0, 0, 0.30); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } body.light-mode .gd-slideover-panel { background: rgba(255, 255, 255, 0.97); border-left-color: rgba(0, 0, 0, 0.08); box-shadow: -10px 0 64px rgba(0, 0, 0, 0.10); } .gd-slideover.gd-visible .gd-slideover-panel { transform: translateX(0); } /* Panel Header */ .gd-slideover-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex-shrink: 0; } body.light-mode .gd-slideover-header { border-bottom-color: rgba(0, 0, 0, 0.06); } .gd-slideover-title { font-size: 20px; font-weight: 600; color: var(--gd-text-main); margin: 0; display: flex; align-items: center; gap: 8px; } .gd-slideover-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: none; border: none; color: var(--gd-text-sec); cursor: pointer; font-size: 22px; transition: background 0.15s ease, color 0.15s ease; } .gd-slideover-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--gd-text-main); } body.light-mode .gd-slideover-close:hover { background: rgba(0, 0, 0, 0.05); } /* Panel Body (scrollable) */ .gd-slideover-body { flex: 1; overflow-y: auto; padding: 24px; } /* Panel Footer (sticky at bottom) */ .gd-slideover-footer { padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); flex-shrink: 0; display: flex; gap: 10px; } body.light-mode .gd-slideover-footer { border-top-color: rgba(0, 0, 0, 0.06); } /* ===================================================================== * 50b. SLIDE-OVER FORM LAYOUT (single column for narrow panel) * ===================================================================== */ .gd-so-form { display: flex; flex-direction: column; gap: 16px; } .gd-so-field label { display: block; font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); margin-bottom: 6px; } .gd-so-field input, .gd-so-field select, .gd-so-field textarea { width: 100%; padding: 10px 14px; border-radius: var(--gd-radius); border: 1px solid rgba(255, 255, 255, 0.08); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.light-mode .gd-so-field input, body.light-mode .gd-so-field select, body.light-mode .gd-so-field textarea { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.08); } .gd-so-field input:focus, .gd-so-field select:focus, .gd-so-field textarea:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12); } .gd-so-field textarea { min-height: 64px; resize: vertical; } /* Two-column row inside slide-over */ .gd-so-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .gd-so-row { grid-template-columns: 1fr; } } /* Section divider */ .gd-so-section { padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); } body.light-mode .gd-so-section { border-top-color: rgba(0, 0, 0, 0.06); } .gd-so-section-title { font-size: 13px; font-weight: 600; color: var(--gd-text-main); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } /* ===================================================================== * 51. CLIENT DIRECTORY — ENHANCED TABLE * ===================================================================== */ /* Search/filter bar */ .gd-directory-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .gd-directory-search { position: relative; min-width: 280px; flex: 1; max-width: 420px; } .gd-directory-search .material-symbols-outlined { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--gd-text-sec); pointer-events: none; } .gd-directory-search input { width: 100%; padding: 10px 16px 10px 44px; border-radius: var(--gd-radius-full); border: 1px solid rgba(255, 255, 255, 0.08); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.light-mode .gd-directory-search input { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.08); } .gd-directory-search input:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12); } .gd-directory-search input::placeholder { color: #94a3b8; } /* Table override for glass-row look */ #gd-panel-tabla-contenedor .gd-tabla { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; } #gd-panel-tabla-contenedor .gd-tabla thead tr { background: transparent; } #gd-panel-tabla-contenedor .gd-tabla th { font-family: 'Geist', 'Inter', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: transparent; } body.light-mode #gd-panel-tabla-contenedor .gd-tabla th { border-bottom-color: rgba(0, 0, 0, 0.06); } #gd-panel-tabla-contenedor .gd-tabla tbody tr { background: rgba(22, 27, 38, 0.50); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; transition: background 0.2s ease, border-color 0.2s ease; } body.light-mode #gd-panel-tabla-contenedor .gd-tabla tbody tr { background: rgba(255, 255, 255, 0.60); border-color: rgba(0, 0, 0, 0.04); } #gd-panel-tabla-contenedor .gd-tabla tbody tr:hover { background: rgba(30, 36, 50, 0.80); border-color: rgba(255, 255, 255, 0.10); } body.light-mode #gd-panel-tabla-contenedor .gd-tabla tbody tr:hover { background: rgba(255, 255, 255, 0.90); border-color: rgba(0, 0, 0, 0.08); } #gd-panel-tabla-contenedor .gd-tabla td { padding: 14px 16px; border-bottom: none; font-size: 14px; } /* Spacer between rows */ #gd-panel-tabla-contenedor .gd-tabla { border-spacing: 0 6px; border-collapse: separate; } /* ===================================================================== * 52. ACCORDION SECTIONS (inside slide-over) * ===================================================================== */ .gd-accordion { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--gd-radius-md); overflow: hidden; background: rgba(0, 0, 0, 0.15); } body.light-mode .gd-accordion { border-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.03); } .gd-accordion-trigger { width: 100%; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: var(--gd-text-main); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.15s ease; } .gd-accordion-trigger:hover { background: rgba(255, 255, 255, 0.04); } body.light-mode .gd-accordion-trigger:hover { background: rgba(0, 0, 0, 0.03); } .gd-accordion-trigger .material-symbols-outlined { font-size: 20px; color: var(--gd-text-sec); transition: transform 0.2s ease; } .gd-accordion-body { padding: 0 16px 16px; } /* ===================================================================== * 53. QUICK ACTIONS (inside slide-over context) * ===================================================================== */ .gd-so-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .gd-so-actions .gd-btn--primary { justify-content: center; } .gd-so-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gd-so-actions-grid .gd-btn { padding: 8px 12px; font-size: 12px; justify-content: center; } /* Channel choice */ .gd-so-channel { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; border-radius: var(--gd-radius); background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.05); } body.light-mode .gd-so-channel { background: rgba(0, 0, 0, 0.03); } .gd-so-channel-label { font-size: 12px; color: var(--gd-text-sec); margin-right: auto; } .gd-so-channel .gd-btn { padding: 6px 14px; font-size: 12px; } .gd-btn--whatsapp { background: #25d366; color: #fff; } /* ===================================================================== * 54. POLICY CARDS (inside slide-over) * ===================================================================== */ .gd-policy-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--gd-radius); padding: 12px; cursor: pointer; transition: border-color 0.2s ease; } body.light-mode .gd-policy-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } .gd-policy-card:hover { border-color: rgba(16, 185, 129, 0.30); } .gd-policy-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .gd-policy-name { font-size: 13px; font-weight: 500; color: var(--gd-emerald); } .gd-policy-status { font-size: 11px; color: var(--gd-gold); } .gd-policy-footer { display: flex; justify-content: space-between; align-items: flex-end; } .gd-policy-meta { font-size: 11px; color: var(--gd-text-sec); line-height: 1.5; } .gd-policy-amount { font-size: 13px; font-weight: 700; color: var(--gd-text-main); white-space: nowrap; } /* Toggle "pagada" button */ .gd-policy-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--gd-radius-full); border: none; cursor: pointer; font-family: 'Geist', 'Inter', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.15s ease; } .gd-policy-toggle--pending { background: rgba(255, 255, 255, 0.06); color: var(--gd-text-sec); } .gd-policy-toggle--paid { background: rgba(53, 211, 153, 0.15); color: var(--gd-success); } /* ===================================================================== * 55. RESPONSIVE SLIDE-OVER * ===================================================================== */ @media (max-width: 640px) { .gd-slideover-panel { width: 100%; } .gd-slideover-header { padding: 16px 20px; } .gd-slideover-body { padding: 20px; } .gd-slideover-footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); } .gd-so-actions-grid { grid-template-columns: 1fr; } .gd-directory-search { min-width: 100%; } } /* ===================================================================== * GUANI HUB CRM — APP SHELL CON SIDEBAR * ===================================================================== * Reemplaza el layout de pestañas horizontales por una barra lateral * izquierda fija de 280px + área de contenido principal a la derecha. * * §60. App Shell (flex container) * §61. Sidebar (fixed left, brand, nav, CTA, footer) * §62. Main Content Area * §63. Mobile Header + Hamburger * §64. Sub-tabs (Ajustes section) * §65. Section placeholders (Próximamente) * §66. Sidebar responsive * ===================================================================== */ /* ===================================================================== * 60. APP SHELL * ===================================================================== */ .gd-app-shell { display: flex; min-height: 100vh; background: var(--gd-bg); color: var(--gd-text-main); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .gd-app-shell *, .gd-app-shell *::before, .gd-app-shell *::after { box-sizing: border-box; } /* ===================================================================== * 61. SIDEBAR * ===================================================================== */ .gd-sidebar { position: fixed; left: 0; top: 0; width: 280px; height: 100vh; background: #0e111a; border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; padding: 0; z-index: 50; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; } body.light-mode .gd-sidebar { background: #f8fafc; border-right-color: rgba(0, 0, 0, 0.08); } /* --- Scrollbar inside sidebar --- */ .gd-sidebar::-webkit-scrollbar { width: 4px; } .gd-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } /* --- Brand --- */ .gd-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 28px 24px 24px; flex-shrink: 0; } .gd-sidebar-brand-icon { width: 40px; height: 40px; border-radius: var(--gd-radius); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 12px rgba(16, 185, 129, 0.15); } .gd-sidebar-brand-icon .material-symbols-outlined { font-size: 22px; color: var(--gd-emerald); font-variation-settings: 'FILL' 1; } .gd-sidebar-brand-icon img { display: block; width: 25px; height: 30px; object-fit: contain; } .gd-sidebar-brand-text h1 { font-size: 18px; font-weight: 700; color: var(--gd-emerald); margin: 0; line-height: 1.2; } .gd-sidebar-brand-text p { font-size: 11px; color: var(--gd-text-sec); margin: 2px 0 0; letter-spacing: 0.02em; } /* --- CTA Button --- */ .gd-sidebar-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 20px 16px; padding: 12px 16px; border: none; border-radius: var(--gd-radius-md); background: linear-gradient(135deg, var(--gd-emerald), #a8d850); color: #0e111a; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.1s ease; flex-shrink: 0; } .gd-sidebar-cta:hover { box-shadow: 0 0 20px rgba(16, 185, 129, 0.35); } .gd-sidebar-cta:active { transform: scale(0.97); } .gd-sidebar-cta .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 1; } /* --- Navigation --- */ .gd-sidebar-nav { flex: 1; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; } .gd-sidebar-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: none; border-radius: var(--gd-radius); background: transparent; color: var(--gd-text-sec); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background 0.15s ease, color 0.15s ease; border-left: 3px solid transparent; position: relative; } .gd-sidebar-item .material-symbols-outlined { font-size: 22px; width: 24px; text-align: center; flex-shrink: 0; } .gd-sidebar-item:hover { background: rgba(16, 185, 129, 0.06); color: var(--gd-emerald); } body.light-mode .gd-sidebar-item:hover { background: rgba(5, 150, 105, 0.06); } .gd-sidebar-item.gd-activo { background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); font-weight: 700; border-left-color: var(--gd-emerald); } .gd-sidebar-item.gd-activo .material-symbols-outlined { font-variation-settings: 'FILL' 1; } /* Divider before secondary items */ .gd-sidebar-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 12px 20px; flex-shrink: 0; } body.light-mode .gd-sidebar-divider { background: rgba(0, 0, 0, 0.06); } /* --- Profile / User section --- */ .gd-sidebar-profile { display: flex; align-items: center; gap: 10px; padding: 12px 24px; flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } body.light-mode .gd-sidebar-profile { border-top-color: rgba(0, 0, 0, 0.06); } .gd-sidebar-profile-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.10); flex-shrink: 0; } .gd-sidebar-profile-initials { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--gd-text-sec); border: 1px solid rgba(255, 255, 255, 0.10); flex-shrink: 0; } .gd-sidebar-profile-info { min-width: 0; flex: 1; } .gd-sidebar-profile-name { font-size: 13px; font-weight: 600; color: var(--gd-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-sidebar-profile-role { font-size: 11px; color: var(--gd-text-sec); } /* --- Footer / Logout --- */ .gd-sidebar-footer { padding: 12px; flex-shrink: 0; } .gd-sidebar-logout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: none; border-radius: var(--gd-radius); background: transparent; color: var(--gd-danger); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; text-decoration: none; opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease; } .gd-sidebar-logout:hover { opacity: 1; background: rgba(239, 91, 91, 0.08); } .gd-sidebar-logout .material-symbols-outlined { font-size: 22px; } /* ===================================================================== * 62. MAIN CONTENT AREA * ===================================================================== */ .gd-main-content { margin-left: 280px; flex: 1; min-height: 100vh; background: var(--gd-bg); position: relative; } /* Section header (top of each section) */ .gd-section-topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; position: sticky; top: 0; z-index: 35; background: rgba(14, 17, 26, 0.90); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gd-border); } body.light-mode .gd-section-topbar { background: rgba(248, 250, 252, 0.92); } .gd-section-topbar-title { font-size: 20px; font-weight: 800; color: var(--gd-emerald); margin: 0; } .gd-section-topbar-actions { display: flex; align-items: center; gap: 12px; } /* ===================================================================== * 63. MOBILE HEADER + HAMBURGER * ===================================================================== */ .gd-mobile-header { display: none; position: sticky; top: 0; z-index: 45; padding: 12px 16px; background: rgba(14, 17, 26, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gd-border); align-items: center; justify-content: space-between; } body.light-mode .gd-mobile-header { background: rgba(248, 250, 252, 0.95); } .gd-hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: var(--gd-radius); background: transparent; color: var(--gd-text-main); cursor: pointer; } .gd-hamburger .material-symbols-outlined { font-size: 26px; } .gd-mobile-brand { font-size: 16px; font-weight: 700; color: var(--gd-emerald); } /* Sidebar overlay for mobile */ .gd-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.50); z-index: 49; } /* ===================================================================== * 64. SUB-TABS (used in Ajustes section) * ===================================================================== */ .gd-subtabs-nav { display: flex; gap: 4px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--gd-border); overflow-x: auto; scrollbar-width: none; } .gd-subtabs-nav::-webkit-scrollbar { display: none; } .gd-subtab-btn { display: flex; align-items: center; gap: 6px; padding: 10px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--gd-text-sec); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .gd-subtab-btn:hover { color: var(--gd-text-main); } .gd-subtab-btn.gd-activo { color: var(--gd-emerald); border-bottom-color: var(--gd-emerald); } .gd-subtab-btn .material-symbols-outlined { font-size: 18px; } .gd-subtab-contenido { display: none; } .gd-subtab-contenido.gd-activo { display: block; } /* ===================================================================== * 65. PLACEHOLDER SECTIONS (Próximamente) * ===================================================================== */ .gd-placeholder-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 40px; } .gd-placeholder-icon { width: 80px; height: 80px; border-radius: 20px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .gd-placeholder-icon .material-symbols-outlined { font-size: 36px; color: var(--gd-emerald); opacity: 0.6; } .gd-placeholder-title { font-size: 20px; font-weight: 600; color: var(--gd-text-main); margin: 0 0 8px; } .gd-placeholder-text { font-size: 14px; color: var(--gd-text-sec); max-width: 400px; margin: 0; line-height: 1.6; } /* ===================================================================== * 66. RESPONSIVE SIDEBAR * ===================================================================== */ @media (max-width: 1024px) { .gd-sidebar { transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: none; } .gd-sidebar.gd-sidebar-open { transform: translateX(0); box-shadow: 10px 0 40px rgba(0, 0, 0, 0.30); } .gd-sidebar-overlay.gd-visible { display: block; } .gd-main-content { margin-left: 0; } .gd-mobile-header { display: flex; } .gd-section-topbar { padding: 16px 20px; } .gd-content { padding: 20px 16px; } } @media (max-width: 640px) { .gd-sidebar { width: 300px; } .gd-content-title { font-size: 22px; } } /* ===================================================================== * 67. CLIENTES SECTION HEADER (filters row) * ===================================================================== */ .gd-clients-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .gd-clients-filters { display: flex; gap: 8px; flex-wrap: wrap; } .gd-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--gd-radius-full); border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; color: var(--gd-text-sec); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } body.light-mode .gd-filter-chip { border-color: rgba(0, 0, 0, 0.08); } .gd-filter-chip:hover { border-color: rgba(255, 255, 255, 0.20); } .gd-filter-chip.gd-activo { background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); border-color: rgba(16, 185, 129, 0.25); box-shadow: 0 0 10px rgba(16, 185, 129, 0.10); } /* ===================================================================== * GUANI HUB CRM — CARTERA DE PÓLIZAS * ===================================================================== * §70. Currency Widget (pills de tipo de cambio) * §71. Policy Status Badges (Vigor, Prorrogada, Cancelada) * §72. Policy Table (glass rows con prima multidivisa) * §73. Policy Summary Metrics (contadores rápidos) * ===================================================================== */ /* ===================================================================== * 70. CURRENCY WIDGET * ===================================================================== */ .gd-fx-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gd-fx-pill { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--gd-radius-full); background: rgba(13, 28, 45, 0.60); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(134, 148, 138, 0.20); } body.light-mode .gd-fx-pill { background: rgba(241, 245, 249, 0.80); border-color: rgba(0, 0, 0, 0.08); } .gd-fx-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: gd-pulse 2s ease-in-out infinite; } .gd-fx-dot--emerald { background: var(--gd-emerald); } .gd-fx-dot--gold { background: var(--gd-gold); animation-delay: 0.5s; } @keyframes gd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .gd-fx-info { display: flex; flex-direction: column; } .gd-fx-label { font-family: 'Geist', 'Inter', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); line-height: 1; } .gd-fx-value { font-size: 14px; font-weight: 600; color: var(--gd-text-main); } .gd-fx-missing { font-size: 11px; color: var(--gd-gold); font-style: italic; } /* ===================================================================== * 71. POLICY STATUS BADGES * ===================================================================== */ .gd-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--gd-radius-full); font-family: 'Geist', 'Inter', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .gd-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* Vigor */ .gd-status--vigor { background: rgba(16, 185, 129, 0.10); color: var(--gd-emerald); border: 1px solid rgba(16, 185, 129, 0.20); } .gd-status--vigor .gd-status-dot { background: var(--gd-emerald); box-shadow: 0 0 6px rgba(16, 185, 129, 0.40); } /* Prorrogada */ .gd-status--prorroga { background: rgba(227, 170, 0, 0.10); color: var(--gd-gold); border: 1px solid rgba(227, 170, 0, 0.20); } .gd-status--prorroga .gd-status-dot { background: var(--gd-gold); box-shadow: 0 0 6px rgba(227, 170, 0, 0.40); } /* Cancelada */ .gd-status--cancel { background: rgba(147, 0, 10, 0.12); color: #ffb4ab; border: 1px solid rgba(147, 0, 10, 0.25); } body.light-mode .gd-status--cancel { color: #93000a; } .gd-status--cancel .gd-status-dot { background: #93000a; box-shadow: 0 0 6px rgba(147, 0, 10, 0.40); } /* Generic / other statuses */ .gd-status--other { background: rgba(255, 255, 255, 0.06); color: var(--gd-text-sec); border: 1px solid rgba(255, 255, 255, 0.10); } .gd-status--other .gd-status-dot { background: var(--gd-text-sec); } /* ===================================================================== * 72. POLICY TABLE (glass rows) * ===================================================================== */ .gd-polizas-grid { display: flex; flex-direction: column; gap: 6px; } /* Table header */ .gd-polizas-header { display: grid; grid-template-columns: 2fr 2fr 1.5fr 1fr 1.2fr 1.5fr; gap: 12px; padding: 10px 20px; font-family: 'Geist', 'Inter', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gd-text-sec); border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 4px; } body.light-mode .gd-polizas-header { border-bottom-color: rgba(0, 0, 0, 0.06); } /* Table row */ .gd-poliza-row { display: grid; grid-template-columns: 2fr 2fr 1.5fr 1fr 1.2fr 1.5fr; gap: 12px; padding: 14px 20px; align-items: center; background: rgba(22, 27, 38, 0.50); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } body.light-mode .gd-poliza-row { background: rgba(255, 255, 255, 0.60); border-color: rgba(0, 0, 0, 0.04); } .gd-poliza-row:hover { background: rgba(30, 36, 50, 0.80); border-color: rgba(255, 255, 255, 0.10); } body.light-mode .gd-poliza-row:hover { background: rgba(255, 255, 255, 0.90); border-color: rgba(0, 0, 0, 0.08); } /* Row cells */ .gd-poliza-cell { min-width: 0; } .gd-poliza-numero { font-family: 'Geist', 'Inter', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--gd-text-sec); padding: 2px 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--gd-radius-sm); display: inline-block; margin-bottom: 4px; } body.light-mode .gd-poliza-numero { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } .gd-poliza-plan { font-size: 14px; font-weight: 600; color: var(--gd-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-poliza-contratante { font-size: 14px; font-weight: 500; color: var(--gd-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-poliza-sub { font-size: 11px; color: var(--gd-text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Prima with conversion */ .gd-poliza-prima { text-align: right; } .gd-poliza-prima-original { font-size: 11px; color: var(--gd-text-sec); } .gd-poliza-prima-mxn { font-size: 15px; font-weight: 700; color: var(--gd-emerald); } /* Responsive: stack on mobile */ @media (max-width: 900px) { .gd-polizas-header { display: none; } .gd-poliza-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; } .gd-poliza-prima { text-align: left; } } @media (max-width: 640px) { .gd-poliza-row { grid-template-columns: 1fr; } } /* ===================================================================== * 73. POLICY SUMMARY METRICS (inline counters) * ===================================================================== */ .gd-polizas-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .gd-polizas-counter { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--gd-radius-full); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--gd-text-sec); } body.light-mode .gd-polizas-counter { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } .gd-polizas-counter strong { font-weight: 700; color: var(--gd-text-main); } /* ===================================================================== * 74. FILTERS BAR FOR PÓLIZAS * ===================================================================== */ .gd-polizas-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .gd-polizas-filters-left { display: flex; gap: 8px; flex-wrap: wrap; } .gd-polizas-search { position: relative; width: 300px; max-width: 100%; } .gd-polizas-search .material-symbols-outlined { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--gd-text-sec); pointer-events: none; } .gd-polizas-search input { width: 100%; padding: 10px 16px 10px 44px; border-radius: var(--gd-radius-full); border: 1px solid rgba(255, 255, 255, 0.08); background: #0a0c12; color: var(--gd-text-main); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s ease; } body.light-mode .gd-polizas-search input { background: var(--gd-input-bg); border-color: rgba(0, 0, 0, 0.08); } .gd-polizas-search input:focus { border-color: var(--gd-emerald); } .gd-polizas-search input::placeholder { color: #94a3b8; } @media (max-width: 640px) { .gd-polizas-search { width: 100%; } } /* ===================================================================== * FASE 8: REPORTES AVANZADOS (Executive Slate & Emerald) * ===================================================================== */ .gd-reports-layout { display: flex; flex-direction: column; gap: 24px; margin-top: 14px; } .gd-report-card { background: var(--gd-brand-card, var(--gd-card-bg)); border: 1px solid var(--gd-card-border); border-radius: var(--gd-radio); padding: 26px; box-shadow: var(--gd-sombra); display: flex; flex-direction: column; gap: 16px; } .gd-report-form-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: rgba(14, 16, 22, 0.4); border: 1px solid var(--gd-card-border); padding: 14px 18px; border-radius: 12px; } .gd-report-form-bar select, .gd-report-form-bar input { min-height: 42px; border-radius: 8px; border: 1px solid var(--gd-card-border); background: #0e1016; color: var(--gd-text-main); font-size: 13px; padding: 0 12px; outline: none; transition: border-color 0.15s ease; } .gd-report-form-bar select:focus, .gd-report-form-bar input:focus { border-color: var(--gd-acento); } .gd-report-table-wrapper { width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid var(--gd-card-border); } .gd-report-table-wrapper .gd-tabla { box-shadow: none; border-radius: 0; border: none; } .gd-report-table-wrapper .gd-tabla th { background: rgba(14, 16, 22, 0.5); padding: 14px 16px; } .gd-report-table-wrapper .gd-tabla td { padding: 12px 16px; } @media (max-width: 640px) { .gd-report-form-bar { flex-direction: column; align-items: stretch; } .gd-report-form-bar select, .gd-report-form-bar input, .gd-report-form-bar button, .gd-report-form-bar a { width: 100%; justify-content: center; } } /* ===================================================================== * 75. AGENDA Y GOOGLE CALENDAR * ===================================================================== */ .gd-agenda { display: grid; gap: 18px; } .gd-agenda-toolbar, .gd-google-status, .gd-agenda-reminders, .gd-agenda-summary, .gd-agenda-item { border: 1px solid var(--gd-border); background: var(--gd-card-bg); box-shadow: var(--gd-glass-shadow); backdrop-filter: blur(var(--gd-glass-blur)); -webkit-backdrop-filter: blur(var(--gd-glass-blur)); } .gd-agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: var(--gd-radius-lg); } .gd-agenda-month-nav, .gd-agenda-toolbar-actions, .gd-agenda-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .gd-agenda-month-nav strong { min-width: 150px; text-align: center; text-transform: capitalize; } .gd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); cursor: pointer; text-decoration: none; } .gd-icon-btn:hover, .gd-icon-btn:focus-visible { border-color: var(--gd-brand-accent, var(--gd-emerald)); color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-icon-btn .material-symbols-outlined { font-size: 20px; } .gd-google-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--gd-radius-md); } .gd-google-status > div { display: grid; gap: 3px; } .gd-google-status span, .gd-google-status small { color: var(--gd-text-sec); } .gd-google-status small { font-size: 11px; } .gd-google-status code { display: inline-block; max-width: min(680px, 70vw); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .gd-google-status--conectado { border-color: rgba(135, 191, 20, 0.38); } .gd-google-status--no_configurado { border-color: rgba(245, 166, 35, 0.4); } .gd-agenda-reminders { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--gd-radius-md); } .gd-agenda-reminders-copy, .gd-agenda-reminders-options { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .gd-agenda-reminders-copy > .material-symbols-outlined { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--gd-brand-accent-soft, rgba(135, 191, 20, 0.13)); color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-reminders-copy > div { display: grid; gap: 2px; } .gd-agenda-reminders-copy small { color: var(--gd-text-sec); } .gd-agenda-reminders-options label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gd-text-sec); } .gd-agenda-reminders-options input { width: auto; } .gd-agenda-reminders-options input:disabled + * { opacity: 0.55; } .gd-agenda-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--gd-radius-md); } .gd-agenda-summary > div { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--gd-border); } .gd-agenda-summary > div:last-child { border-right: 0; } .gd-agenda-summary span { font-size: 24px; font-weight: 750; color: var(--gd-text-main); } .gd-agenda-summary small { color: var(--gd-text-sec); } .gd-agenda-lista { display: grid; gap: 10px; } .gd-agenda-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; border-radius: var(--gd-radius-md); } .gd-agenda-item--cancelada { opacity: 0.72; } .gd-agenda-item-fecha { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 18px 14px; border-right: 1px solid var(--gd-border); background: var(--gd-brand-accent-soft, rgba(135, 191, 20, 0.13)); } .gd-agenda-item-fecha strong { font-size: 24px; color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-item-fecha span { font-size: 12px; text-transform: uppercase; color: var(--gd-text-sec); } .gd-agenda-item-body { display: grid; gap: 9px; padding: 16px 18px; } .gd-agenda-item-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gd-agenda-item h3 { margin: 0; font-size: 16px; color: var(--gd-text-main); } .gd-agenda-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--gd-text-sec); } .gd-agenda-item-meta .material-symbols-outlined { font-size: 17px; color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .gd-agenda-status--programada { background: rgba(80, 146, 255, 0.14); color: #78a9ff; } .gd-agenda-status--completada { background: rgba(135, 191, 20, 0.14); color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-status--cancelada { background: rgba(239, 91, 91, 0.14); color: var(--gd-danger); } .gd-agenda-sync { font-size: 11px; color: var(--gd-text-sec); } .gd-agenda-sync--error { color: var(--gd-danger); } .gd-agenda-sync--synced { color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-reminder-state { font-size: 11px; color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-empty { display: grid; justify-items: center; gap: 7px; padding: 44px 20px; border: 1px dashed var(--gd-border); border-radius: var(--gd-radius-lg); text-align: center; color: var(--gd-text-sec); } .gd-agenda-empty .material-symbols-outlined { font-size: 38px; color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-empty strong { color: var(--gd-text-main); } .gd-agenda-empty p { margin: 0; } .gd-agenda-modal[hidden] { display: none; } .gd-agenda-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.72); } .gd-agenda-modal-panel { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); background: var(--gd-surface-dim); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } .gd-agenda-checks { display: grid; gap: 9px; } .gd-agenda-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; } .gd-agenda-checks input { width: auto; } .gd-btn--danger { border-color: rgba(239, 91, 91, 0.35); background: rgba(239, 91, 91, 0.11); color: var(--gd-danger); } .gd-agenda--compacta .gd-google-status { display: none; } @media (max-width: 780px) { .gd-agenda-toolbar, .gd-google-status, .gd-agenda-reminders { align-items: stretch; flex-direction: column; } .gd-agenda-reminders-options { align-items: flex-start; flex-direction: column; } .gd-agenda-toolbar-actions { display: grid; grid-template-columns: 1fr; } .gd-agenda-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-agenda-summary > div:nth-child(2) { border-right: 0; } .gd-agenda-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--gd-border); } .gd-agenda-item { grid-template-columns: 82px minmax(0, 1fr); } .gd-agenda-item-fecha { padding-inline: 8px; } .gd-agenda-item-title-row { align-items: flex-start; flex-direction: column; } } /* ========================================================================== OPERACIÓN COMERCIAL — PIPELINE Y MESA KANBAN ========================================================================== */ .gd-commercial { min-width: 0; color: var(--gd-text-main); } .gd-commercial-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .gd-commercial-head h3 { margin: 0 0 5px; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; } .gd-commercial-head p { max-width: 680px; margin: 0; color: var(--gd-text-sec); font-size: 13px; line-height: 1.55; } .gd-commercial-head .material-symbols-outlined { font-size: 18px; } .gd-commercial-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .gd-commercial-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px 15px; border: 1px solid var(--gd-border); border-radius: 14px; background: var(--gd-card-bg); } .gd-commercial-summary span { color: var(--gd-text-sec); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.055em; } .gd-commercial-summary strong { color: var(--gd-brand-accent); font-size: 23px; line-height: 1; } .gd-commercial-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .gd-commercial-toolbar label { display: flex; align-items: center; width: min(430px, 100%); min-height: 42px; padding: 0 13px; border: 1px solid var(--gd-border); border-radius: 12px; background: var(--gd-card-bg); } .gd-commercial-toolbar .material-symbols-outlined { margin-right: 8px; color: var(--gd-text-sec); font-size: 19px; } .gd-commercial-toolbar input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--gd-text-main); font: inherit; font-size: 13px; } .gd-commercial-status { color: var(--gd-text-sec); font-size: 12px; white-space: nowrap; } .gd-commercial-status--error { color: #ff8e8e; } .gd-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-color: var(--gd-border) transparent; scrollbar-width: thin; scroll-snap-type: x proximity; } .gd-kanban-column { min-height: 360px; padding: 10px; border: 1px solid var(--gd-border); border-radius: 16px; background: color-mix(in srgb, var(--gd-card-bg) 82%, transparent); scroll-snap-align: start; transition: border-color 160ms ease, background 160ms ease; } .gd-kanban-column--over { border-color: var(--gd-brand-accent); background: var(--gd-brand-accent-soft); } .gd-kanban-column > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 2px 4px 10px; color: var(--gd-text-main); font-size: 12px; font-weight: 750; } .gd-kanban-column > header small { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 11px; } .gd-kanban-list { display: grid; align-content: start; gap: 9px; min-height: 300px; } .gd-kanban-card { padding: 13px; border: 1px solid var(--gd-border); border-radius: 13px; background: var(--gd-card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transition: transform 150ms ease, border-color 150ms ease, opacity 150ms ease; } .gd-kanban-card[draggable="true"] { cursor: grab; } .gd-kanban-card[draggable="true"]:active { cursor: grabbing; } .gd-kanban-card:hover { border-color: color-mix(in srgb, var(--gd-brand-accent) 55%, var(--gd-border)); transform: translateY(-1px); } .gd-kanban-card--dragging { opacity: 0.45; } .gd-kanban-card--overdue { border-left: 3px solid #e57373; } .gd-kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; } .gd-kanban-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; } .gd-kanban-badge.gd-priority--baja { background: rgba(98, 153, 214, 0.13); color: #7db5ee; } .gd-kanban-badge.gd-priority--normal { background: rgba(135, 191, 20, 0.14); color: var(--gd-brand-accent); } .gd-kanban-badge.gd-priority--alta { background: rgba(255, 179, 71, 0.15); color: #f2b65e; } .gd-kanban-badge.gd-priority--urgente { background: rgba(229, 115, 115, 0.14); color: #ff9292; } .gd-kanban-edit { padding: 2px 0; border: 0; background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 11px; cursor: pointer; } .gd-kanban-edit:hover { color: var(--gd-brand-accent); } .gd-kanban-card h4 { margin: 0 0 5px; color: var(--gd-text-main); font-size: 13px; font-weight: 750; line-height: 1.4; } .gd-kanban-client, .gd-kanban-meta { margin: 0 0 7px; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-kanban-client { margin-bottom: 10px; color: var(--gd-text-sec); font-weight: 600; } .gd-kanban-meta strong { color: var(--gd-text-sec); font-weight: 650; } .gd-kanban-stage-select { width: 100%; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--gd-border); border-radius: 9px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 11px; } .gd-kanban-empty { margin: 18px 4px; color: var(--gd-text-sec); font-size: 11px; text-align: center; } .gd-commercial-modal[hidden] { display: none !important; } .gd-commercial-modal { position: fixed; z-index: 100000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(4, 15, 19, 0.74); backdrop-filter: blur(8px); } .gd-commercial-dialog { width: min(680px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 20px; border: 1px solid var(--gd-border); border-radius: 18px; background: var(--gd-card-bg); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36); } .gd-commercial-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; } .gd-commercial-dialog-head h3 { margin: 0; font-size: 18px; } .gd-commercial-dialog-head button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gd-border); border-radius: 10px; background: transparent; color: var(--gd-text-main); cursor: pointer; } .gd-commercial-dialog-head .material-symbols-outlined { font-size: 19px; } .gd-commercial-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .gd-commercial-field { display: grid; gap: 6px; min-width: 0; } .gd-commercial-field--wide { grid-column: 1 / -1; } .gd-commercial-field label { color: var(--gd-text-sec); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.045em; } .gd-commercial-field input, .gd-commercial-field select, .gd-commercial-field textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--gd-border); border-radius: 10px; outline: none; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 13px; } .gd-commercial-field input:focus, .gd-commercial-field select:focus, .gd-commercial-field textarea:focus { border-color: var(--gd-brand-accent); box-shadow: 0 0 0 3px var(--gd-brand-accent-soft); } .gd-commercial-field textarea { resize: vertical; } .gd-commercial-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; } body.gd-commercial-modal-open { overflow: hidden; } .gd-commercial--compact .gd-commercial-head h3 { font-size: 17px; } .gd-commercial--compact .gd-kanban { grid-auto-columns: minmax(235px, 1fr); } .gd-commercial-denied { padding: 18px; border: 1px solid var(--gd-border); border-radius: 14px; color: var(--gd-text-sec); text-align: center; } @media (max-width: 780px) { .gd-commercial-head { align-items: stretch; flex-direction: column; } .gd-commercial-head .gd-btn { justify-content: center; width: 100%; } .gd-commercial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-commercial-toolbar { align-items: stretch; flex-direction: column; } .gd-commercial-status { white-space: normal; } .gd-kanban { grid-auto-columns: minmax(84vw, 1fr); } .gd-commercial-form { grid-template-columns: 1fr; } .gd-commercial-field--wide, .gd-commercial-actions { grid-column: auto; } .gd-commercial-actions { flex-direction: column-reverse; } .gd-commercial-actions .gd-btn { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { .gd-kanban-card, .gd-kanban-column { transition: none; } } /* ========================================================================== * INTEGRACIONES — MAKE.COM / WEBHOOKS * ========================================================================== */ .gd-webhook-settings .gd-card { max-width: 980px; } .gd-webhook-warning { margin: 14px 0 20px; border-color: rgba(245, 158, 11, 0.45); } .gd-webhook-switch label, .gd-webhook-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.5; } .gd-webhook-switch input, .gd-webhook-consent input, .gd-webhook-events input { width: auto; flex: 0 0 auto; margin-top: 3px; } .gd-webhook-switch small { display: block; margin: 6px 0 0 26px; color: var(--gd-text-sec); } .gd-webhook-events { min-width: 0; margin: 0; padding: 0; border: 0; } .gd-webhook-events legend { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--gd-text-sec); } .gd-webhook-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gd-webhook-event-grid label { display: flex; gap: 9px; align-items: flex-start; min-width: 0; padding: 11px 12px; border: 1px solid var(--gd-border); border-radius: 10px; background: rgba(255, 255, 255, 0.025); font-size: 13px; line-height: 1.4; } body.light-mode .gd-webhook-event-grid label { background: rgba(15, 23, 42, 0.025); } .gd-webhook-secret-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gd-webhook-secret-row code { flex: 1 1 260px; min-width: 0; padding: 11px 12px; overflow-wrap: anywhere; border: 1px solid var(--gd-border); border-radius: 9px; background: rgba(0, 0, 0, 0.16); color: var(--gd-text-main); } body.light-mode .gd-webhook-secret-row code { background: rgba(15, 23, 42, 0.05); } .gd-webhook-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .gd-webhook-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 13px; } .gd-webhook-status strong { color: var(--gd-text-main); } @media (max-width: 720px) { .gd-webhook-event-grid { grid-template-columns: 1fr; } .gd-webhook-actions > * { flex: 1 1 100%; } } /* ========================================================================== LANDING PÚBLICA — GUANI HUB ========================================================================== */ .gd-landing, .gd-landing *, .gd-landing *::before, .gd-landing *::after { box-sizing: border-box; } .gd-landing { min-height: 100vh; overflow-x: hidden; background: #0c1606; color: #dae7ca; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body.light-mode .gd-landing { background: #f8faf4; color: #17210f; } .gd-landing a { text-decoration: none; } .gd-landing-nav { position: sticky; z-index: 80; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 76px; padding: 14px clamp(20px, 5vw, 72px); border-bottom: 1px solid rgba(195, 201, 177, 0.14); background: rgba(12, 22, 6, 0.94); } body.light-mode .gd-landing-nav { border-bottom-color: rgba(23, 33, 15, 0.1); background: rgba(248, 250, 244, 0.96); } .gd-landing-brand { display: inline-flex; align-items: center; gap: 11px; color: #87bf14; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .gd-landing-brand img { display: block; width: 36px; height: 40px; object-fit: contain; } .gd-landing-links { display: flex; align-items: center; gap: 28px; } .gd-landing-links a, .gd-landing-footer > a { color: #c3c9b1; font-size: 13px; font-weight: 600; } body.light-mode .gd-landing-links a, body.light-mode .gd-landing-footer > a { color: #617052; } .gd-landing-links a:hover, .gd-landing-footer > a:hover { color: #87bf14; } .gd-landing-nav-actions { display: flex; align-items: center; gap: 10px; } .gd-landing-hero, .gd-landing-section, .gd-landing-preview, .gd-landing-final-cta { width: min(1180px, calc(100% - 40px)); margin-inline: auto; } .gd-landing-hero { display: grid; justify-items: center; padding: 96px 0 58px; text-align: center; } .gd-landing-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 7px 12px; border: 1px solid rgba(135, 191, 20, 0.26); border-radius: 999px; background: rgba(135, 191, 20, 0.08); color: #a1dc36; font-size: 12px; font-weight: 700; } .gd-landing-kicker .material-symbols-outlined { font-size: 16px; font-variation-settings: 'FILL' 1; } .gd-landing-hero h1 { max-width: 900px; margin: 0; color: #f3f7ed; font-size: clamp(42px, 7vw, 78px); font-weight: 850; line-height: 1.03; letter-spacing: -0.055em; } body.light-mode .gd-landing-hero h1 { color: #17210f; } .gd-landing-hero h1 span { color: #87bf14; } .gd-landing-hero > p { max-width: 690px; margin: 25px 0 0; color: #c3c9b1; font-size: clamp(16px, 2vw, 19px); line-height: 1.7; } body.light-mode .gd-landing-hero > p { color: #617052; } .gd-landing-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; } .gd-landing-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 34px; color: #8d937d; font-size: 12px; } .gd-landing-trust span { display: inline-flex; align-items: center; gap: 6px; } .gd-landing-trust .material-symbols-outlined { color: #87bf14; font-size: 16px; } .gd-landing-preview { padding: 28px 0 96px; } .gd-landing-preview-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 570px; overflow: hidden; border: 1px solid rgba(195, 201, 177, 0.18); border-radius: 22px; background: #141e0d; box-shadow: 0 35px 90px rgba(0, 0, 0, 0.36); } body.light-mode .gd-landing-preview-shell { border-color: rgba(23, 33, 15, 0.12); background: #fff; box-shadow: 0 35px 90px rgba(36, 66, 10, 0.12); } .gd-landing-preview-shell aside { display: grid; align-content: start; gap: 7px; padding: 24px 14px; border-right: 1px solid rgba(195, 201, 177, 0.12); background: #10180a; } body.light-mode .gd-landing-preview-shell aside { background: #f3f7eb; } .gd-landing-preview-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 0 9px; color: #87bf14; font-weight: 800; } .gd-landing-preview-logo img { width: 26px; height: 32px; object-fit: contain; } .gd-landing-preview-shell aside i { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 9px; color: #8d937d; font-size: 12px; font-style: normal; } .gd-landing-preview-shell aside i.is-active { background: rgba(135, 191, 20, 0.11); color: #a1dc36; font-weight: 700; } .gd-landing-preview-shell aside .material-symbols-outlined { font-size: 18px; } .gd-landing-preview-main { min-width: 0; padding: 28px; } .gd-landing-preview-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid rgba(195, 201, 177, 0.1); } .gd-landing-preview-head > div { display: grid; gap: 4px; } .gd-landing-preview-head strong { color: #eef5e4; font-size: 20px; } body.light-mode .gd-landing-preview-head strong { color: #17210f; } .gd-landing-preview-head small, .gd-landing-preview-metrics small, .gd-landing-faux-chart > small, .gd-landing-faux-list > small { color: #8d937d; } .gd-landing-preview-head > .material-symbols-outlined { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(195, 201, 177, 0.12); border-radius: 10px; color: #87bf14; } .gd-landing-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; } .gd-landing-preview-metrics > div, .gd-landing-faux-chart, .gd-landing-faux-list { border: 1px solid rgba(195, 201, 177, 0.12); border-radius: 13px; background: #182210; } body.light-mode .gd-landing-preview-metrics > div, body.light-mode .gd-landing-faux-chart, body.light-mode .gd-landing-faux-list { border-color: rgba(23, 33, 15, 0.1); background: #f8faf4; } .gd-landing-preview-metrics > div { display: grid; gap: 6px; padding: 17px; } .gd-landing-preview-metrics strong { color: #f3f7ed; font-size: 28px; } body.light-mode .gd-landing-preview-metrics strong { color: #17210f; } .gd-landing-preview-metrics em { color: #87bf14; font-size: 10px; font-style: normal; } .gd-landing-preview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.8fr); gap: 12px; } .gd-landing-faux-chart, .gd-landing-faux-list { min-width: 0; padding: 18px; } .gd-landing-faux-chart > div { display: flex; align-items: flex-end; justify-content: space-around; height: 210px; margin-top: 18px; border-bottom: 1px solid rgba(195, 201, 177, 0.12); } .gd-landing-faux-chart span { width: 9%; border-radius: 7px 7px 0 0; background: #87bf14; opacity: 0.72; } .gd-landing-faux-chart span:nth-child(1) { height: 31%; } .gd-landing-faux-chart span:nth-child(2) { height: 45%; } .gd-landing-faux-chart span:nth-child(3) { height: 38%; } .gd-landing-faux-chart span:nth-child(4) { height: 66%; } .gd-landing-faux-chart span:nth-child(5) { height: 74%; } .gd-landing-faux-chart span:nth-child(6) { height: 91%; } .gd-landing-faux-list { display: grid; align-content: start; gap: 8px; } .gd-landing-faux-list > small { margin-bottom: 10px; } .gd-landing-faux-list p { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 0; border-bottom: 1px solid rgba(195, 201, 177, 0.1); } .gd-landing-faux-list b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(135, 191, 20, 0.11); color: #87bf14; font-size: 11px; } .gd-landing-faux-list p > span { display: grid; gap: 3px; color: #dae7ca; font-size: 11px; } body.light-mode .gd-landing-faux-list p > span { color: #17210f; } .gd-landing-faux-list em { color: #f5a623; font-size: 9px; font-style: normal; } .gd-landing-section { padding: 92px 0; } .gd-landing-section-heading { max-width: 720px; margin: 0 auto 40px; text-align: center; } .gd-landing-section-heading > span, .gd-landing-security small { color: #87bf14; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .gd-landing-section h2, .gd-landing-final-cta h2 { margin: 10px 0 0; color: #eef5e4; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.035em; } body.light-mode .gd-landing-section h2, body.light-mode .gd-landing-final-cta h2 { color: #17210f; } .gd-landing-section-heading p, .gd-landing-security p, .gd-landing-final-cta p { margin: 15px 0 0; color: #8d937d; line-height: 1.7; } .gd-landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .gd-landing-features article { min-width: 0; padding: 25px; border: 1px solid rgba(195, 201, 177, 0.13); border-radius: 16px; background: #141e0d; } body.light-mode .gd-landing-features article { border-color: rgba(23, 33, 15, 0.1); background: #fff; } .gd-landing-features article > .material-symbols-outlined { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: rgba(135, 191, 20, 0.1); color: #87bf14; font-size: 22px; } .gd-landing-features h3 { margin: 18px 0 8px; color: #dae7ca; font-size: 16px; } body.light-mode .gd-landing-features h3 { color: #17210f; } .gd-landing-features p { margin: 0; color: #8d937d; font-size: 13px; line-height: 1.65; } .gd-landing-security { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 42px; align-items: center; padding-inline: clamp(24px, 5vw, 64px); border: 1px solid rgba(135, 191, 20, 0.2); border-radius: 22px; background: #17280c; } body.light-mode .gd-landing-security { background: #eaf5d1; } .gd-landing-security > div { display: flex; align-items: flex-start; gap: 18px; } .gd-landing-security > div > .material-symbols-outlined { display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: #87bf14; color: #17210f; } .gd-landing-security ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; } .gd-landing-security li { display: flex; align-items: center; gap: 9px; color: #c3c9b1; font-size: 13px; } body.light-mode .gd-landing-security li { color: #24420a; } .gd-landing-security li .material-symbols-outlined { color: #87bf14; font-size: 18px; } .gd-landing-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 840px; margin: 0 auto; } .gd-landing-pricing article { position: relative; display: grid; gap: 17px; padding: 30px; border: 1px solid rgba(195, 201, 177, 0.14); border-radius: 18px; background: #141e0d; } body.light-mode .gd-landing-pricing article { border-color: rgba(23, 33, 15, 0.1); background: #fff; } .gd-landing-pricing article.is-featured { border-color: rgba(135, 191, 20, 0.5); } .gd-landing-pricing article > span { position: absolute; top: 18px; right: 18px; padding: 5px 9px; border-radius: 999px; background: #87bf14; color: #17210f; font-size: 9px; font-weight: 800; text-transform: uppercase; } .gd-landing-pricing small { color: #8d937d; font-size: 12px; font-weight: 700; text-transform: uppercase; } .gd-landing-pricing strong { color: #a1dc36; font-size: clamp(26px, 4vw, 42px); } .gd-landing-pricing p { min-height: 46px; margin: 0; color: #8d937d; font-size: 13px; line-height: 1.6; } .gd-landing-pricing .gd-btn { justify-content: center; } .gd-landing-final-cta { margin-top: 40px; margin-bottom: 90px; padding: 60px clamp(24px, 7vw, 90px); border: 1px solid rgba(135, 191, 20, 0.24); border-radius: 22px; background: #17280c; text-align: center; } body.light-mode .gd-landing-final-cta { background: #eaf5d1; } .gd-landing-final-cta .gd-btn { margin-top: 27px; } .gd-landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 5vw, 72px); border-top: 1px solid rgba(195, 201, 177, 0.12); background: #071103; } body.light-mode .gd-landing-footer { background: #f1f6e9; } .gd-landing-footer p { margin: 0; color: #8d937d; font-size: 11px; } @media (max-width: 900px) { .gd-landing-links { display: none; } .gd-landing-preview-shell { grid-template-columns: 1fr; min-height: auto; } .gd-landing-preview-shell aside { display: none; } .gd-landing-preview-grid, .gd-landing-security { grid-template-columns: 1fr; } .gd-landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gd-landing-nav { min-height: 66px; padding: 11px 16px; } .gd-landing-nav-actions .gd-btn { padding-inline: 11px; font-size: 11px; } .gd-landing-brand span { display: none; } .gd-landing-hero { padding-top: 66px; } .gd-landing-hero h1 { font-size: 41px; } .gd-landing-hero-actions, .gd-landing-hero-actions .gd-btn { width: 100%; } .gd-landing-hero-actions .gd-btn { justify-content: center; } .gd-landing-trust { display: grid; } .gd-landing-preview-main { padding: 16px; } .gd-landing-preview-metrics, .gd-landing-features, .gd-landing-pricing { grid-template-columns: 1fr; } .gd-landing-preview-grid { display: block; } .gd-landing-faux-list { margin-top: 12px; } .gd-landing-section { padding-block: 70px; } .gd-landing-security { padding: 34px 24px; } .gd-landing-security > div { display: grid; } .gd-landing-footer { flex-direction: column; text-align: center; } .gd-landing-footer .gd-landing-brand span { display: inline; } } /* Reafirmación de composición: estas reglas deben quedar después de los * estilos históricos de tabla y colección para prevalecer en la cascada. */ .gd-collection-list { max-height: 520px; gap: 8px; } .gd-collection-item { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid var(--gd-border); background: color-mix(in srgb, var(--gd-card-bg) 86%, transparent); } .gd-collection-name { overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } .gd-polizas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gd-reports-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .gd-report-card:first-child { grid-column: 1 / -1; } .gd-portal > .gd-assistant-topbar { width: min(1280px, calc(100% - 48px)); } .gd-portal > .gd-assistant-topbar + .gd-bento-grid { width: min(1280px, 100%); margin-inline: auto; padding-inline: 24px; } .gd-assistant-user .gd-sidebar-logout { width: auto; padding: 8px 10px; white-space: nowrap; } .gd-sidebar-theme { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 4px; padding: 10px 16px; border: 0; border-radius: var(--gd-radius); background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .gd-sidebar-theme:hover, .gd-sidebar-theme:focus-visible { outline: none; background: rgba(135, 191, 20, 0.09); color: var(--gd-emerald); } .gd-sidebar-theme .material-symbols-outlined { font-size: 21px; } @media (max-width: 1240px) { .gd-polizas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { .gd-reports-layout, .gd-polizas-grid { grid-template-columns: 1fr; } .gd-report-card:first-child { grid-column: auto; } } @media (max-width: 640px) { .gd-portal > .gd-assistant-topbar { width: calc(100% - 28px); } .gd-portal > .gd-assistant-topbar + .gd-bento-grid { padding-inline: 14px; } .gd-assistant-user .gd-sidebar-logout > span:last-child { display: none; } } /* ===================================================================== * 81. CONSOLIDACIÓN RESPONSIVE Y NUEVAS VISTAS — VERSIÓN 1.10.0 * ===================================================================== */ @media (min-width: 1025px) { .gd-app-shell > .gd-main-content { flex: 0 0 calc(100vw - 280px); width: calc(100vw - 280px); max-width: calc(100vw - 280px); margin-left: 280px; } } .gd-main-content, .gd-main-content > .gd-tab-contenido, .gd-main-content .gd-content { min-width: 0; max-width: 100%; overflow-x: clip; } .gd-commercial { width: 100%; contain: inline-size; } .gd-commercial .gd-kanban { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; } .gd-assistant-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .gd-assistant-dashboard-grid > .gd-card { min-width: 0; } .gd-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; padding: 12px; color: var(--gd-text-sec); font-size: 12px; } .gd-pagination button { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-card-bg); color: var(--gd-text-main); font: inherit; cursor: pointer; } .gd-pagination button:hover:not(:disabled) { border-color: var(--gd-brand-accent); color: var(--gd-brand-accent); } .gd-pagination button:disabled { opacity: 0.4; cursor: not-allowed; } .gd-pagination .material-symbols-outlined { font-size: 18px; } .gd-chart-card--doughnut { min-height: 340px; } .gd-doughnut-wrap { position: relative; min-height: 265px; } .gd-data-quality { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; border: 1px solid rgba(245, 166, 35, 0.28); border-radius: 10px; background: rgba(245, 166, 35, 0.08); color: var(--gd-gold); font-size: 11px; line-height: 1.4; } .gd-data-quality[hidden] { display: none; } .gd-data-quality .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; } .gd-policy-insights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 16px; align-items: stretch; margin-bottom: 18px; } .gd-policy-insights .gd-polizas-summary { margin-bottom: 0; } .gd-policy-type-card { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(170px, 1.2fr); align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--gd-border); border-radius: 16px; background: var(--gd-card-bg); box-shadow: var(--gd-glass-shadow); } .gd-policy-type-card > div:first-child { display: grid; gap: 5px; } .gd-policy-type-card small { color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-policy-type-chart { position: relative; min-width: 0; height: 190px; } /* Calendario mensual de ancho contenido + agenda móvil. */ .gd-agenda { width: 100%; min-width: 0; } .gd-agenda-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .gd-agenda-heading h3 { margin: 3px 0 5px; color: var(--gd-text-main); font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.035em; } .gd-agenda-heading p { margin: 0; color: var(--gd-text-sec); font-size: 13px; } .gd-agenda-eyebrow, .gd-report-eyebrow { color: var(--gd-brand-accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; } .gd-agenda-search { display: flex; align-items: center; min-width: min(250px, 100%); padding: 0 10px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); } .gd-agenda-search .material-symbols-outlined { color: var(--gd-text-sec); font-size: 18px; } .gd-agenda-search input { width: 100%; min-width: 0; padding: 8px; border: 0; outline: 0; background: transparent; color: var(--gd-text-main); font: inherit; font-size: 12px; } .gd-agenda-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); } .gd-agenda-view-switch button { min-height: 32px; padding: 5px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .gd-agenda-view-switch button.gd-activo { background: var(--gd-brand-accent); color: #17210f; } .gd-agenda-calendar { min-width: 0; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 16px; background: var(--gd-card-bg); box-shadow: var(--gd-glass-shadow); } .gd-calendar-weekdays, .gd-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .gd-calendar-weekdays span { padding: 10px 8px; border-bottom: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; } .gd-calendar-day { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 122px; padding: 8px; border-right: 1px solid var(--gd-border); border-bottom: 1px solid var(--gd-border); } .gd-calendar-day:nth-child(7n) { border-right: 0; } .gd-calendar-day--outside { background: color-mix(in srgb, var(--gd-input-bg) 45%, transparent); } .gd-calendar-day--today { background: var(--gd-brand-accent-soft); } .gd-calendar-day-number { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--gd-text-sec); font-size: 11px; font-weight: 750; } .gd-calendar-day--today .gd-calendar-day-number { background: var(--gd-brand-accent); color: #17210f; } .gd-calendar-event { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; width: 100%; min-width: 0; padding: 5px 6px; overflow: hidden; border: 1px solid rgba(135, 191, 20, 0.2); border-radius: 7px; background: rgba(135, 191, 20, 0.1); color: var(--gd-text-main); font: inherit; font-size: 9px; text-align: left; cursor: pointer; } .gd-calendar-event--google_meet { border-color: rgba(91, 141, 239, 0.28); background: rgba(91, 141, 239, 0.11); } .gd-calendar-event--llamada { border-color: rgba(217, 164, 65, 0.28); background: rgba(217, 164, 65, 0.11); } .gd-calendar-event strong { color: var(--gd-brand-accent); } .gd-calendar-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-calendar-more { color: var(--gd-text-sec); font-size: 9px; } .gd-agenda-lista--alternativa { display: none; } .gd-agenda--vista-lista .gd-agenda-calendar { display: none; } .gd-agenda--vista-lista .gd-agenda-lista--alternativa { display: grid; } /* Reportes según la jerarquía de la maqueta de Stitch. */ .gd-report-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 21px 22px; border: 1px solid var(--gd-border); border-radius: 17px; background: linear-gradient(135deg, var(--gd-card-bg), var(--gd-brand-accent-soft)); } .gd-report-page-head h3 { margin: 4px 0 5px; color: var(--gd-text-main); font-size: 25px; letter-spacing: -0.035em; } .gd-report-page-head p { margin: 0; color: var(--gd-text-sec); font-size: 13px; } .gd-report-head-icon, .gd-report-card-icon { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); } .gd-report-head-icon { width: 50px; height: 50px; } .gd-report-card-icon { width: 38px; height: 38px; } .gd-report-card .gd-card-title-bar { display: flex; align-items: center; justify-content: flex-start; gap: 11px; } .gd-report-card .gd-card-title-bar > span:last-child { display: grid; gap: 3px; } .gd-report-card .gd-card-title-bar small { color: var(--gd-text-sec); font-size: 10px; font-weight: 500; } .gd-report-card { overflow: hidden; border-radius: 16px; } .gd-report-form-bar { padding: 14px 16px; border-top: 1px solid var(--gd-border); border-bottom: 1px solid var(--gd-border); background: color-mix(in srgb, var(--gd-input-bg) 70%, transparent); } .gd-report-table-wrapper { max-width: 100%; overflow: auto; } @media (max-width: 1180px) { .gd-policy-insights { grid-template-columns: 1fr; } .gd-policy-type-card { grid-template-columns: minmax(120px, 0.45fr) minmax(220px, 1fr); } .gd-agenda-toolbar { align-items: stretch; flex-direction: column; } .gd-agenda-toolbar-actions { width: 100%; } } @media (max-width: 780px) { .gd-assistant-dashboard-grid { grid-template-columns: 1fr; } .gd-policy-type-card { grid-template-columns: 1fr; } .gd-agenda-heading { align-items: stretch; flex-direction: column; } .gd-agenda-heading > .gd-btn { width: 100%; justify-content: center; } .gd-agenda-calendar { display: none !important; } .gd-agenda-lista--alternativa { display: grid; } .gd-agenda-view-switch { display: none; } .gd-agenda-search { width: 100%; } .gd-report-page-head { align-items: flex-start; } } @media (max-width: 520px) { .gd-pagination { justify-content: space-between; gap: 8px; } .gd-pagination button { padding-inline: 9px; font-size: 0; } .gd-pagination button .material-symbols-outlined { font-size: 20px; } .gd-report-head-icon { display: none; } } /* ===================================================================== * 82. COBRANZAS + FLUJOS VERTICALES + REPORTES — VERSIÓN 1.11.0 * ===================================================================== */ /* Oportunidades y trámites dejan de depender de un lienzo horizontal. */ .gd-commercial-stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; padding: 12px; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-card-bg); } .gd-commercial-stepper span { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; color: var(--gd-text-sec); font-size: 9px; font-weight: 750; text-align: center; text-transform: uppercase; letter-spacing: 0.035em; } .gd-commercial-stepper span:not(:last-child)::after { position: absolute; top: 13px; left: calc(50% + 18px); width: calc(100% - 28px); height: 1px; background: var(--gd-border); content: ''; } .gd-commercial-stepper i { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--gd-brand-accent) 42%, var(--gd-border)); border-radius: 50%; background: var(--gd-card-bg); color: var(--gd-brand-accent); font-style: normal; font-size: 10px; } .gd-stage-flow { display: grid; gap: 12px; width: 100%; min-width: 0; } .gd-stage-panel { min-width: 0; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 16px; background: color-mix(in srgb, var(--gd-card-bg) 90%, transparent); box-shadow: var(--gd-glass-shadow); transition: border-color 160ms ease; } .gd-stage-panel:hover, .gd-stage-panel--over { border-color: color-mix(in srgb, var(--gd-brand-accent) 55%, var(--gd-border)); } .gd-stage-panel-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 15px 17px; border: 0; background: linear-gradient(105deg, var(--gd-card-bg), color-mix(in srgb, var(--gd-brand-accent-soft) 48%, transparent)); color: var(--gd-text-main); font: inherit; text-align: left; cursor: pointer; } .gd-stage-chevron { color: var(--gd-brand-accent); font-size: 22px; transform: rotate(90deg); transition: transform 160ms ease; } .gd-stage-panel--collapsed .gd-stage-chevron { transform: rotate(0deg); } .gd-stage-panel-title { display: grid; gap: 3px; min-width: 0; } .gd-stage-panel-title strong { overflow: hidden; font-size: 14px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; } .gd-stage-panel-title small, .gd-stage-panel-metrics small { color: var(--gd-text-sec); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.055em; } .gd-stage-panel-metrics { display: flex; align-items: center; gap: 12px; } .gd-stage-panel-metrics strong { display: grid; place-items: center; min-width: 31px; height: 27px; padding: 0 8px; border-radius: 999px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 11px; } .gd-stage-panel-body { padding: 14px; border-top: 1px solid var(--gd-border); } .gd-stage-panel--collapsed .gd-stage-panel-body { display: none; } .gd-stage-panel .gd-kanban-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 11px; min-height: 0; } .gd-stage-panel .gd-kanban-card { height: 100%; min-width: 0; } .gd-stage-more { display: block; margin: 13px auto 0; padding: 7px 18px; border: 1px solid var(--gd-border); border-radius: 999px; background: var(--gd-input-bg); color: var(--gd-brand-accent); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; } .gd-stage-more[hidden], .gd-kanban-card[hidden] { display: none !important; } /* Centro de cobranzas. */ .gd-collections-page { display: grid; gap: 16px; width: 100%; min-width: 0; color: var(--gd-text-main); } .gd-collections-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px; border: 1px solid var(--gd-border); border-radius: 18px; background: radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--gd-brand-accent) 13%, transparent), transparent 36%), var(--gd-card-bg); } .gd-collections-heading h3 { margin: 4px 0 5px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.04em; } .gd-collections-heading p { max-width: 640px; margin: 0; color: var(--gd-text-sec); font-size: 12px; line-height: 1.55; } .gd-collections-heading-actions { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .gd-collections-period { display: grid; gap: 4px; color: var(--gd-text-sec); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; } .gd-collections-period input, .gd-collections-filters input, .gd-collections-filters select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--gd-border); border-radius: 10px; outline: 0; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 11px; color-scheme: dark; } body.light-mode .gd-collections-period input, body.light-mode .gd-collections-filters input, body.light-mode .gd-collections-filters select { color-scheme: light; } .gd-collections-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; } .gd-collections-kpis article { display: grid; gap: 5px; min-width: 0; padding: 17px; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-card-bg); } .gd-collections-kpis article > span { color: var(--gd-text-sec); font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: 0.065em; } .gd-collections-kpis strong { overflow: hidden; color: var(--gd-text-main); font-size: clamp(18px, 2.2vw, 25px); letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; } .gd-collections-kpis small { color: var(--gd-text-sec); font-size: 10px; } .gd-collections-kpi--danger { border-left: 3px solid var(--gd-danger) !important; } .gd-collections-kpi--danger strong { color: #ff8b8b; } body.light-mode .gd-collections-kpi--danger strong { color: #b42318; } .gd-collections-kpi--success strong { color: var(--gd-brand-accent); } .gd-collections-insights { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr); gap: 12px; } .gd-collections-trend, .gd-collections-health { min-width: 0; padding: 17px; border: 1px solid var(--gd-border); border-radius: 16px; background: var(--gd-card-bg); } .gd-collections-trend .gd-card-title-bar, .gd-collections-health .gd-card-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .gd-collections-trend .gd-card-title-bar small { color: var(--gd-text-sec); font-size: 9px; } .gd-collections-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 12px; height: 165px; padding: 8px 5px 0; } .gd-collections-bar-column { display: grid; grid-template-rows: 15px minmax(90px, 1fr) 16px; align-items: end; gap: 5px; height: 100%; text-align: center; } .gd-collections-bar-column strong, .gd-collections-bar-column p { margin: 0; color: var(--gd-text-sec); font-size: 9px; } .gd-collections-bar-track { position: relative; width: min(42px, 72%); height: 100%; margin: auto; overflow: hidden; border-radius: 8px 8px 3px 3px; background: var(--gd-input-bg); } .gd-collections-bar-fill { position: absolute; right: 0; bottom: 0; left: 0; border-radius: inherit; background: linear-gradient(180deg, var(--gd-brand-accent), color-mix(in srgb, var(--gd-brand-accent) 48%, transparent)); } .gd-collections-health-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 165px; } .gd-collections-ring { display: grid; grid-template-rows: auto auto; place-content: center; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle, var(--gd-card-bg) 58%, transparent 60%), conic-gradient(var(--gd-brand-accent) var(--gd-ring-value), var(--gd-border) 0); text-align: center; } .gd-collections-ring strong { font-size: 21px; } .gd-collections-ring span { color: var(--gd-text-sec); font-size: 8px; text-transform: uppercase; } .gd-collections-legend { display: grid; gap: 9px; } .gd-collections-legend span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: var(--gd-text-sec); font-size: 10px; } .gd-collections-legend i { width: 7px; height: 7px; border-radius: 50%; } .gd-dot--paid { background: var(--gd-brand-accent); } .gd-dot--pending { background: #eab308; } .gd-dot--overdue { background: var(--gd-danger); } .gd-collections-warning { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid rgba(239, 91, 91, 0.28); border-radius: 13px; background: rgba(239, 91, 91, 0.09); color: #ff9b9b; } .gd-collections-warning[hidden] { display: none; } .gd-collections-warning .material-symbols-outlined { font-size: 20px; } .gd-collections-warning strong { font-size: 11px; } .gd-collections-warning p { margin: 3px 0 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } .gd-collections-filters { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.34fr) minmax(165px, 0.42fr) auto; gap: 9px; padding: 12px; border: 1px solid var(--gd-border); border-radius: 14px; background: var(--gd-card-bg); } .gd-collections-search { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; min-width: 0; padding-left: 8px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); } .gd-collections-search .material-symbols-outlined { color: var(--gd-text-sec); font-size: 18px; } .gd-collections-search input { min-width: 0; border: 0; background: transparent; } .gd-collections-list { display: grid; gap: 8px; min-width: 0; } .gd-collections-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(145px, 0.78fr) minmax(165px, 0.95fr) minmax(125px, 0.7fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 14px 15px; border: 1px solid var(--gd-border); border-left: 3px solid var(--gd-brand-accent); border-radius: 14px; background: var(--gd-card-bg); transition: border-color 150ms ease, transform 150ms ease; } .gd-collections-row:hover { border-color: color-mix(in srgb, var(--gd-brand-accent) 48%, var(--gd-border)); transform: translateY(-1px); } .gd-collections-row--vencida, .gd-collections-row--hoy { border-left-color: var(--gd-danger); } .gd-collections-row--urgente { border-left-color: #f59e0b; } .gd-collections-row--proxima { border-left-color: #eab308; } .gd-collections-row--sin_fecha { border-left-color: var(--gd-text-sec); } .gd-collections-row-client { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; } .gd-collections-row-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 10px; font-weight: 800; } .gd-collections-row-client strong, .gd-collections-row-cell strong { display: block; min-width: 0; overflow: hidden; color: var(--gd-text-main); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .gd-collections-row-client p, .gd-collections-row-cell p { margin: 3px 0 0; overflow: hidden; color: var(--gd-text-sec); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .gd-collections-row-cell { min-width: 0; } .gd-collections-cell-label { display: block; margin-bottom: 4px; color: var(--gd-text-sec); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.055em; } .gd-collections-row-cell .gd-collection-due { margin-top: 6px; font-size: 8px; } .gd-collections-row-amount { text-align: right; } .gd-collections-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 188px; } .gd-collections-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 31px; padding: 5px 7px; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 8px; background: var(--gd-input-bg); color: var(--gd-text-sec); font: inherit; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .gd-collections-action:hover, .gd-collections-action:focus-visible, .gd-collections-action.gd-action-done { border-color: var(--gd-brand-accent); color: var(--gd-brand-accent); } .gd-collections-action:disabled { cursor: wait; opacity: 0.55; } .gd-collections-action .material-symbols-outlined { font-size: 15px; } .gd-collections-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--gd-text-sec); font-size: 10px; } .gd-collections-pagination[hidden] { display: none; } .gd-collections-pagination button { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--gd-border); border-radius: 9px; background: var(--gd-card-bg); color: var(--gd-text-main); font: inherit; font-size: 9px; cursor: pointer; } .gd-collections-pagination button:disabled { cursor: not-allowed; opacity: 0.45; } .gd-collections-pagination .material-symbols-outlined { font-size: 16px; } .gd-collections-dialog { width: min(620px, 100%); } /* Reportes: tarjeta principal a todo el ancho y dos tarjetas equilibradas. */ .gd-reports-layout { gap: 18px; } .gd-report-card { display: flex; flex-direction: column; min-height: 390px; border: 1px solid var(--gd-border); background: linear-gradient(145deg, color-mix(in srgb, var(--gd-card-bg) 97%, transparent), color-mix(in srgb, var(--gd-brand-accent-soft) 20%, var(--gd-card-bg))); box-shadow: var(--gd-glass-shadow); } .gd-report-card:first-child { min-height: 430px; } .gd-report-card .gd-card-title-bar { min-height: 72px; padding: 16px 18px; } .gd-report-card .gd-card-label { font-size: 15px; } .gd-report-form-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .gd-report-form-bar .gd-boton { min-height: 38px; } .gd-report-table-wrapper { flex: 1; max-height: 310px; padding: 0 16px 16px; } .gd-report-table-wrapper .gd-tabla { min-width: 600px; } .gd-report-table-wrapper .gd-tabla thead { position: sticky; z-index: 1; top: 0; background: var(--gd-card-bg); } .gd-report-table-wrapper .gd-tabla th { padding-block: 13px; color: var(--gd-text-sec); font-size: 9px; text-transform: uppercase; letter-spacing: 0.055em; } .gd-report-table-wrapper .gd-tabla td { padding-block: 12px; font-size: 10px; } @media (max-width: 1180px) { .gd-stage-panel .gd-kanban-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-collections-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-collections-row { grid-template-columns: minmax(180px, 1.2fr) minmax(140px, 0.8fr) minmax(155px, 0.9fr); } .gd-collections-row-amount { text-align: left; } .gd-collections-row-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } } @media (max-width: 780px) { .gd-commercial-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-commercial-stepper span { grid-template-columns: 27px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; } .gd-commercial-stepper span::after { display: none; } .gd-stage-panel-head { grid-template-columns: 25px minmax(0, 1fr) auto; padding: 13px; } .gd-stage-panel-metrics small { display: none; } .gd-stage-panel .gd-kanban-list { grid-template-columns: 1fr; } .gd-collections-heading { align-items: stretch; flex-direction: column; padding: 17px; } .gd-collections-heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } .gd-collections-period { grid-column: 1 / -1; } .gd-collections-heading-actions .gd-btn { justify-content: center; } .gd-collections-insights { grid-template-columns: 1fr; } .gd-collections-filters { grid-template-columns: 1fr 1fr; } .gd-collections-search { grid-column: 1 / -1; } .gd-collections-filters .gd-btn { justify-content: center; } .gd-collections-row { grid-template-columns: 1fr 1fr; align-items: start; } .gd-collections-row-client, .gd-collections-row-actions { grid-column: 1 / -1; } .gd-collections-row-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .gd-commercial-summary, .gd-collections-kpis, .gd-collections-filters, .gd-collections-row { grid-template-columns: 1fr; } .gd-commercial-stepper { padding: 9px; } .gd-stage-panel-metrics { gap: 4px; } .gd-collections-heading-actions { grid-template-columns: 1fr; } .gd-collections-period, .gd-collections-search, .gd-collections-row-client, .gd-collections-row-actions { grid-column: auto; } .gd-collections-health-body { grid-template-columns: 98px minmax(0, 1fr); gap: 12px; } .gd-collections-ring { width: 94px; height: 94px; } .gd-collections-row-actions { grid-template-columns: 1fr 1fr; } .gd-report-form-bar select, .gd-report-form-bar input, .gd-report-form-bar button, .gd-report-form-bar a { width: 100%; max-width: none !important; } } @media (prefers-reduced-motion: reduce) { .gd-stage-chevron, .gd-stage-panel, .gd-collections-row { transition: none; } } /* ===================================================================== * 83. REPORTES UNIFICADOS — VERSIÓN 1.12.0 * ===================================================================== */ .gd-report-filter-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; align-items: end; margin: 0 0 22px; padding: 18px 20px 14px; border: 1px solid var(--gd-border); border-radius: 16px; background: color-mix(in srgb, var(--gd-card-bg) 94%, var(--gd-brand-accent-soft)); box-shadow: var(--gd-glass-shadow); } .gd-report-filter-label { display: inline-flex; align-items: center; align-self: center; gap: 9px; min-height: 42px; color: var(--gd-text-sec); font-size: 11px; font-weight: 760; white-space: nowrap; } .gd-report-filter-label .material-symbols-outlined { color: var(--gd-brand-accent); font-size: 20px; } .gd-report-filter-grid { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(160px, 0.85fr) minmax(230px, 1.5fr) auto; gap: 10px; min-width: 0; } .gd-report-filter-field { display: grid; gap: 5px; min-width: 0; } .gd-report-filter-field > span { padding-left: 2px; color: var(--gd-text-sec); font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: 0.065em; } .gd-report-filter-field select, .gd-report-filter-field input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 12px; border: 1px solid var(--gd-border); border-radius: 10px; outline: 0; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 11px; transition: border-color 160ms ease, box-shadow 160ms ease; } .gd-report-filter-field select:focus, .gd-report-filter-field input:focus { border-color: var(--gd-brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-brand-accent) 14%, transparent); } .gd-report-filter-field input::placeholder { color: color-mix(in srgb, var(--gd-text-sec) 70%, transparent); } .gd-report-filter-submit { align-self: end; min-height: 42px; white-space: nowrap; } .gd-report-filter-submit.gd-is-loading { cursor: wait; opacity: 0.65; } .gd-report-filter-help { grid-column: 2; margin: 0; color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; } .gd-reports-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 0; } .gd-report-card, .gd-report-card:first-child { display: flex; flex-direction: column; min-width: 0; min-height: 390px; padding: 0; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--gd-card-bg) 97%, transparent), color-mix(in srgb, var(--gd-brand-accent-soft) 18%, var(--gd-card-bg))); box-shadow: var(--gd-glass-shadow); } .gd-report-card--wide, .gd-report-card:first-child { grid-column: 1 / -1; min-height: 430px; } .gd-report-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 17px 19px; border-bottom: 1px solid var(--gd-border); } .gd-report-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .gd-report-card-title > span:last-child { display: grid; gap: 4px; min-width: 0; } .gd-report-card-title strong { overflow: hidden; color: var(--gd-text-main); font-size: 15px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; } .gd-report-card-title small { overflow: hidden; color: var(--gd-text-sec); font-size: 10px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; } .gd-report-card-title small b { color: var(--gd-brand-accent); font-weight: 750; } .gd-report-export { flex: 0 0 auto; text-decoration: none; } .gd-report-card > .gd-report-table-wrapper { flex: 1; width: 100%; max-width: 100%; max-height: 350px; padding: 0 18px 18px; overflow: auto; border: 0; border-radius: 0; background: transparent; overscroll-behavior: contain; } .gd-report-card--wide > .gd-report-table-wrapper { max-height: 365px; } .gd-report-table { width: 100%; min-width: 620px; border: 0; border-collapse: collapse; background: transparent; box-shadow: none; } .gd-report-table thead { position: sticky; z-index: 2; top: 0; background: color-mix(in srgb, var(--gd-card-bg) 94%, transparent); backdrop-filter: blur(10px); } .gd-report-table th { padding: 14px 12px 12px; border-bottom: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 9px; font-weight: 780; text-align: left; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .gd-report-table td { padding: 13px 12px; border-bottom: 1px solid color-mix(in srgb, var(--gd-border) 72%, transparent); color: var(--gd-text-main); font-size: 10px; line-height: 1.45; vertical-align: middle; } .gd-report-table tbody tr { transition: background 140ms ease; } .gd-report-table tbody tr:hover { background: color-mix(in srgb, var(--gd-brand-accent-soft) 54%, transparent); } .gd-report-client { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .gd-report-client i { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--gd-brand-accent) 26%, var(--gd-border)); border-radius: 50%; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-style: normal; font-size: 9px; font-weight: 820; } .gd-report-client b { display: block; max-width: 230px; overflow-wrap: anywhere; font-size: 10px; font-weight: 720; } .gd-report-mono { color: var(--gd-brand-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; font-weight: 720; white-space: nowrap; } .gd-report-money { color: var(--gd-text-main); font-size: 10px; white-space: nowrap; } .gd-report-status { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.045em; white-space: nowrap; } .gd-report-status--success { background: rgba(135, 191, 20, 0.14); color: var(--gd-brand-accent); } .gd-report-status--warning { background: rgba(217, 164, 65, 0.14); color: var(--gd-warning, #d9a441); } .gd-report-status--danger { background: rgba(239, 83, 80, 0.14); color: var(--gd-danger, #ef5350); } .gd-report-status--neutral { background: color-mix(in srgb, var(--gd-text-sec) 12%, transparent); color: var(--gd-text-sec); } .gd-report-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 230px; color: var(--gd-text-sec); font-size: 11px; } .gd-report-loading .material-symbols-outlined { color: var(--gd-brand-accent); animation: gd-report-spin 850ms linear infinite; } @keyframes gd-report-spin { to { transform: rotate(360deg); } } @media (max-width: 1120px) { .gd-report-filter-panel { grid-template-columns: 1fr; align-items: stretch; } .gd-report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-report-filter-submit { justify-content: center; } .gd-report-filter-help { grid-column: 1; } } @media (max-width: 780px) { .gd-reports-layout { grid-template-columns: 1fr; } .gd-report-card--wide, .gd-report-card:first-child { grid-column: auto; } } @media (max-width: 560px) { .gd-report-filter-panel { padding: 15px; } .gd-report-filter-grid { grid-template-columns: 1fr; } .gd-report-card-head { align-items: flex-start; padding: 15px; } .gd-report-card-title small { white-space: normal; } .gd-report-card--wide .gd-report-export > span:last-child { display: none; } .gd-report-card > .gd-report-table-wrapper { padding-inline: 12px; } } @media (prefers-reduced-motion: reduce) { .gd-report-loading .material-symbols-outlined { animation: none; } }