/** * 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; } /* Guani Hub 1.15.0 — tarjetas navegables e importación multi-compañía */ .gd-dashboard-kpi { appearance: none; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; } .gd-dashboard-kpi, .gd-dashboard-link-card { transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .gd-dashboard-kpi:hover, .gd-dashboard-link-card:hover, .gd-dashboard-kpi:focus-visible, .gd-dashboard-link-card:focus-visible { transform: translateY(-2px); border-color: rgba(135, 191, 20, 0.55); box-shadow: 0 14px 34px rgba(7, 14, 5, 0.22); outline: none; } .gd-dashboard-link-card { cursor: pointer; } .gd-import-company-options { display: grid; gap: 10px; margin: 0 0 16px; padding: 16px; border: 1px solid var(--gd-border, rgba(255, 255, 255, 0.1)); border-radius: 12px; background: rgba(135, 191, 20, 0.06); } .gd-import-company-options p { margin: 0; } .gd-import-choice { display: flex; align-items: flex-start; gap: 9px; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(135, 191, 20, 0.18); border-radius: 10px; background: rgba(5, 13, 7, 0.34); color: #f4f8ee !important; -webkit-text-fill-color: #f4f8ee; font-size: 13px; font-weight: 650; line-height: 1.45; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .gd-import-choice:hover, .gd-import-choice:focus-within { border-color: rgba(135, 191, 20, 0.58); background: rgba(135, 191, 20, 0.1); box-shadow: 0 0 0 3px rgba(135, 191, 20, 0.08); } .gd-import-choice:has(input:checked) { border-color: rgba(135, 191, 20, 0.72); background: rgba(135, 191, 20, 0.14); } body.light-mode .gd-import-choice { border-color: rgba(36, 66, 10, 0.16); background: rgba(36, 66, 10, 0.045); color: #17210f !important; -webkit-text-fill-color: #17210f; } .gd-import-choice input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; accent-color: #87bf14; } #gd-import-compania-unica { display: grid; gap: 7px; margin-top: 4px; } #gd-import-compania-unica[hidden] { display: none; } #gd-import-compania-unica input { width: 100%; } .gd-import-company-options .gd-btn { justify-self: start; margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .gd-dashboard-kpi, .gd-dashboard-link-card { transition: none; } } /* ===================================================================== * 93. DASHBOARD — BENTO Y PALETA UNIFICADA (VERSIÓN 1.14.2) * * Esta capa se limita al panel de control del asesor. No modifica datos, * navegación ni acciones: ordena las áreas visuales manteniendo el mismo * orden del DOM para lectores de pantalla y navegación por teclado. * ===================================================================== */ body:not(.light-mode) .gd-app-shell { --gd-bg: #0d1708; --gd-card-bg: rgba(26, 42, 17, 0.9); --gd-input-bg: #111d0c; --gd-surface-dim: #1d3212; --gd-border: rgba(189, 238, 91, 0.14); --gd-text-main: #f8fbf3; --gd-text-sec: #aab5a2; } body:not(.light-mode) .gd-sidebar { background: #0a1307; border-right-color: rgba(189, 238, 91, 0.11); } body:not(.light-mode) .gd-section-topbar, body:not(.light-mode) .gd-mobile-header { background: rgba(13, 23, 8, 0.94); border-bottom-color: rgba(189, 238, 91, 0.12); } body:not(.light-mode) #gd-tab-dashboard .gd-glass { background: linear-gradient(145deg, rgba(35, 56, 23, 0.9), rgba(20, 35, 12, 0.88)); border-color: rgba(189, 238, 91, 0.14); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); } body:not(.light-mode) #gd-tab-dashboard .gd-glass:hover { border-color: rgba(168, 230, 59, 0.3); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2); } /* Desktop: métricas 4 × 3; tendencia completa; cumpleaños/cobranzas 6/6. */ #gd-tab-dashboard .gd-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; gap: 18px; } #gd-tab-dashboard .gd-dashboard-kpi { grid-column: span 3; } #gd-tab-dashboard .gd-dashboard-trend { grid-column: 1 / -1; grid-row: auto; height: 364px; min-height: 0; } #gd-tab-dashboard .gd-dashboard-collections { grid-column: span 6; grid-row: auto; height: 364px; min-height: 0; min-width: 0; overflow: hidden; } #gd-tab-dashboard .gd-dashboard-birthdays { grid-column: span 6; grid-row: auto; height: 364px; min-height: 0; min-width: 0; overflow: hidden; } #gd-tab-dashboard .gd-dashboard-company, #gd-tab-dashboard .gd-dashboard-distribution { grid-column: span 4; min-height: 320px; } #gd-tab-dashboard .gd-dashboard-premiums { grid-column: span 4; min-height: 320px !important; } #gd-tab-dashboard .gd-dashboard-trend, #gd-tab-dashboard .gd-dashboard-birthdays, #gd-tab-dashboard .gd-dashboard-collections, #gd-tab-dashboard .gd-dashboard-company, #gd-tab-dashboard .gd-dashboard-distribution, #gd-tab-dashboard .gd-dashboard-premiums { align-self: stretch; } #gd-tab-dashboard .gd-chart-card canvas { min-height: 0; } #gd-tab-dashboard #gd-lista-cobranzas { flex: 1 1 auto; min-height: 0; overflow: hidden; } #gd-tab-dashboard #gd-lista-cumpleanos-dashboard { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } #gd-tab-dashboard .gd-dashboard-birthdays .gd-dashboard-priority-list { width: 100%; height: 100%; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #gd-tab-dashboard .gd-collection-list { height: 280px; max-height: 280px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; } #gd-tab-dashboard .gd-collection-list > .gd-collection-item { flex: 0 0 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: normal; } #gd-tab-dashboard .gd-dashboard-data-pending { display: flex; flex: 1 1 auto; min-height: 245px; padding: 24px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px dashed var(--gd-border); border-radius: 14px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); color: var(--gd-text-sec); text-align: center; } #gd-tab-dashboard .gd-dashboard-data-pending .material-symbols-outlined { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(135, 191, 20, 0.12); color: var(--gd-emerald); font-size: 26px; } #gd-tab-dashboard .gd-dashboard-data-pending strong { color: var(--gd-text-main); font-size: 14px; } #gd-tab-dashboard .gd-dashboard-data-pending small { max-width: 260px; font-size: 12px; line-height: 1.5; } /* Las acciones dejan de competir por ancho: pago ocupa la primera fila. */ #gd-tab-dashboard .gd-collection-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #gd-tab-dashboard .gd-collection-actions button { min-height: 44px; padding: 9px 10px; font-size: 11px; } #gd-tab-dashboard .gd-collection-actions [data-gd-collection-action="pago"] { grid-column: 1 / -1; grid-row: 1; background: var(--gd-emerald); border-color: var(--gd-emerald); color: #142006; } #gd-tab-dashboard .gd-collection-actions [data-gd-collection-action="pago"]:hover, #gd-tab-dashboard .gd-collection-actions [data-gd-collection-action="pago"]:focus-visible { background: #a8e63b; border-color: #a8e63b; color: #142006; } /* 1.36.88 · Recordatorio de cobranza desde Dashboard. */ .gd-collection-reminder-panel { width:min(590px,100%); } .gd-collection-reminder-context { display:grid; gap:4px; margin-bottom:18px; padding:16px 17px; border:1px solid var(--gd-border); border-radius:14px; background:var(--gd-bg-surface); } .gd-collection-reminder-eyebrow { color:var(--gd-brand-accent); font-size:10px; font-weight:850; letter-spacing:.08em; } .gd-collection-reminder-context strong { color:var(--gd-text-main); font-size:16px; } .gd-collection-reminder-context small { color:var(--gd-text-muted); font-size:12px; } .gd-collection-reminder-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .gd-collection-reminder-option { display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:center; min-height:92px; padding:14px; border:1px solid var(--gd-border); border-radius:14px; background:var(--gd-bg-surface); color:var(--gd-text-main); text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; } .gd-collection-reminder-option:hover,.gd-collection-reminder-option:focus-visible { border-color:color-mix(in srgb,var(--gd-brand-accent) 55%,var(--gd-border)); background:var(--gd-brand-accent-soft); outline:none; transform:translateY(-1px); } .gd-collection-reminder-option:disabled { cursor:not-allowed; opacity:.46; transform:none; } .gd-collection-reminder-option:disabled:hover { border-color:var(--gd-border); background:var(--gd-bg-surface); } .gd-collection-reminder-option > span:last-child { display:grid; min-width:0; gap:5px; } .gd-collection-reminder-option strong { color:inherit; font-size:13px; } .gd-collection-reminder-option small { overflow:hidden; color:var(--gd-text-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .gd-collection-reminder-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); } .gd-collection-reminder-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .gd-collection-reminder-note { margin:14px 0 0 !important; padding:11px 13px; border-radius:11px; background:color-mix(in srgb,var(--gd-bg-surface) 76%,transparent); color:var(--gd-text-muted) !important; font-size:11px !important; } .gd-collection-reminder-note strong { color:var(--gd-text-main); } .gd-collection-reminder-status { min-height:18px; margin-top:12px; color:var(--gd-text-muted); font-size:11px; font-weight:700; } .gd-collection-reminder-status.gd-success { color:#34d399; } .gd-collection-reminder-status.gd-error { color:#f87171; } @media (max-width:640px) { .gd-collection-reminder-options { grid-template-columns:1fr; } .gd-collection-reminder-option { min-height:80px; } } /* Tablet: indicadores 2 × 2 y módulos de lectura a ancho completo. */ @media (min-width: 768px) and (max-width: 1279px) { #gd-tab-dashboard .gd-dashboard-kpi { grid-column: span 6; } #gd-tab-dashboard .gd-dashboard-trend, #gd-tab-dashboard .gd-dashboard-birthdays, #gd-tab-dashboard .gd-dashboard-collections, #gd-tab-dashboard .gd-dashboard-premiums { grid-column: 1 / -1; min-height: 0 !important; } #gd-tab-dashboard .gd-dashboard-company, #gd-tab-dashboard .gd-dashboard-distribution { grid-column: span 6; min-height: 320px; } #gd-tab-dashboard .gd-dashboard-trend { height: auto; min-height: 430px !important; } #gd-tab-dashboard .gd-dashboard-collections { height: auto; } #gd-tab-dashboard .gd-collection-list { height: 280px; max-height: 280px; } } /* Mobile: una sola columna y acciones con tamaño táctil cómodo. */ @media (max-width: 767px) { #gd-tab-dashboard .gd-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; } #gd-tab-dashboard .gd-dashboard-kpi, #gd-tab-dashboard .gd-dashboard-trend, #gd-tab-dashboard .gd-dashboard-birthdays, #gd-tab-dashboard .gd-dashboard-collections, #gd-tab-dashboard .gd-dashboard-company, #gd-tab-dashboard .gd-dashboard-distribution, #gd-tab-dashboard .gd-dashboard-premiums { grid-column: 1; grid-row: auto; min-height: 0 !important; } #gd-tab-dashboard .gd-glass { padding: 18px; } #gd-tab-dashboard .gd-collection-list { height: 300px; max-height: 300px; padding-right: 4px; } #gd-tab-dashboard .gd-collection-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } #gd-tab-dashboard .gd-collection-actions button { justify-content: center; } } .gd-dashboard-card-link { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 38%, var(--gd-border)); border-radius: 8px; background: transparent; color: var(--gd-emerald); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } .gd-dashboard-priority-list { display: grid; gap: 8px; max-height: 286px; margin: 0; padding: 0 4px 0 0; overflow: auto; list-style: none; } .gd-dashboard-priority-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--gd-border); border-radius: 11px; background: color-mix(in srgb, var(--gd-emerald) 4%, var(--gd-input-bg)); } .gd-dashboard-priority-list strong, .gd-dashboard-priority-list small { display: block; } .gd-dashboard-priority-list strong { color: var(--gd-text-main); font-size: 11px; } .gd-dashboard-priority-list small { margin-top: 3px; color: var(--gd-text-sec); font-size: 9px; } .gd-dashboard-priority-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .gd-dashboard-priority-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--gd-border); border-radius: 8px; background: var(--gd-card-bg); color: var(--gd-text-sec); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; } .gd-dashboard-priority-actions button:hover, .gd-dashboard-priority-actions button:focus-visible { border-color: var(--gd-emerald); color: var(--gd-emerald); outline: none; } .gd-dashboard-priority-actions button:disabled { cursor: not-allowed; opacity: .5; } .gd-dashboard-priority-actions .material-symbols-outlined { font-size: 14px; } .gd-dashboard-priority-actions .gd-assistant-inline-icon { width: 14px; height: 14px; } .gd-assistant-priority-card { min-height: 330px; } .gd-assistant-priority-card .gd-dashboard-priority-list { max-height: 225px; } @media (max-width: 680px) { .gd-dashboard-priority-list > li { grid-template-columns: 1fr; align-items: start; } .gd-dashboard-priority-actions { justify-content: flex-start; } .gd-assistant-priority-card { min-height: 0; } } /* ===================================================================== * 95. LANDING COMERCIAL 1.14 — GUANI HUB * ===================================================================== */ .gd-public-landing, .gd-public-landing *, .gd-public-landing *::before, .gd-public-landing *::after { box-sizing: border-box; } .gd-public-landing { --gdl-bg: #0d1708; --gdl-bg-soft: #14230c; --gdl-surface: #1a2a11; --gdl-surface-2: #213715; --gdl-line: rgba(189, 238, 91, .18); --gdl-lime: #a8e63b; --gdl-lime-strong: #91cf24; --gdl-text: #f8fbf3; --gdl-muted: #aab5a2; --gdl-radius: 22px; position: relative; min-height: 100vh; margin: 0; overflow: clip; background: var(--gdl-bg); color: var(--gdl-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .gd-public-landing::before { content: ''; position: absolute; top: -300px; left: 50%; width: min(1000px, 100vw); height: 680px; transform: translateX(-50%); background: radial-gradient(circle, rgba(123, 184, 31, .18), transparent 66%); pointer-events: none; } .gd-public-landing a, .gd-public-landing a:hover, .gd-public-landing a:focus, .gd-public-landing a:active { text-decoration: none !important; text-underline-offset: 0; } .gd-public-landing button, .gd-public-landing a { -webkit-tap-highlight-color: transparent; } .gd-public-landing button { font: inherit; } .gdl-container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; } .gd-public-landing section[id] { scroll-margin-top: 100px; } .gdl-nav { position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 1px solid transparent; background: rgba(13, 23, 8, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .admin-bar .gdl-nav { top: 32px; } .gdl-nav.is-scrolled { border-color: var(--gdl-line); background: rgba(13, 23, 8, .94); box-shadow: 0 14px 35px rgba(0, 0, 0, .18); } .gdl-nav-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .gdl-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gdl-text) !important; font-size: 21px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; } .gdl-brand img { width: 31px; height: 31px; object-fit: contain; } .gdl-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 22px; } .gdl-menu nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); margin-inline: auto; } .gdl-menu nav a,.gdl-footer nav a,.gdl-footer-contact a,.gdl-footer-legal a { color: var(--gdl-muted) !important; font-size: 13px; font-weight: 650; transition: color .2s ease; } .gdl-menu nav a:hover,.gdl-menu nav a:focus-visible,.gdl-footer a:hover,.gdl-footer a:focus-visible { color: var(--gdl-lime) !important; } .gdl-nav-actions,.gdl-actions { display: flex; align-items: center; gap: 10px; } .gdl-menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--gdl-line); border-radius: 12px; background: var(--gdl-surface); cursor: pointer; } .gdl-menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 4px; background: var(--gdl-text); transition: transform .2s ease, opacity .2s ease; } .gdl-menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .gdl-menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .gdl-menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .gdl-button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px; color: var(--gdl-text) !important; font-size: 13px; font-weight: 750; line-height: 1; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .gdl-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .gdl-button:hover { transform: translateY(-2px); } .gdl-button:hover svg { transform: translateX(3px); } .gdl-button:focus-visible,.gdl-menu-toggle:focus-visible,.gdl-slider-controls button:focus-visible,.gdl-faq button:focus-visible,.gdl-whatsapp button:focus-visible { outline: 3px solid rgba(168, 230, 59, .38); outline-offset: 3px; } .gdl-button--primary { background: var(--gdl-lime); color: #142006 !important; box-shadow: 0 10px 24px rgba(124, 184, 33, .18); } .gdl-button--primary:hover { background: #b8f34c; box-shadow: 0 14px 32px rgba(124, 184, 33, .28); } .gdl-button--ghost,.gdl-button--outline { border-color: var(--gdl-line); background: rgba(255,255,255,.025); } .gdl-button--ghost:hover,.gdl-button--outline:hover { border-color: rgba(168,230,59,.5); background: rgba(168,230,59,.08); } .gdl-button--text { padding-inline: 8px; color: var(--gdl-lime) !important; } .gdl-button--large { min-height: 54px; padding-inline: 24px; border-radius: 15px; font-size: 15px; } .gdl-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); align-items: center; gap: clamp(42px, 6vw, 86px); min-height: 690px; padding-block: 80px 74px; } .gdl-eyebrow,.gdl-heading>span,.gdl-final>div>span { display: inline-flex; align-items: center; gap: 9px; color: var(--gdl-lime); font-size: 11px; font-weight: 850; letter-spacing: .13em; } .gdl-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gdl-lime); box-shadow: 0 0 0 5px rgba(168,230,59,.1); } .gdl-hero h1 { max-width: 650px; margin: 22px 0 22px; color: var(--gdl-text); font-size: clamp(44px, 5.2vw, 72px); font-weight: 790; letter-spacing: -.055em; line-height: .99; } .gdl-hero h1 em { display: block; color: var(--gdl-lime); font-style: normal; } .gdl-hero-copy>p { max-width: 600px; margin: 0 0 28px; color: var(--gdl-muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; } .gdl-microcopy { display: block; margin-top: 15px; color: #7f8b78; font-size: 12px; } .gdl-assurances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; } .gdl-assurances article { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 13px 12px; border: 1px solid var(--gdl-line); border-radius: 14px; background: rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease, background .2s ease; } .gdl-assurances article:hover { transform: translateY(-3px); border-color: rgba(168,230,59,.38); background: rgba(168,230,59,.055); } .gdl-assurances svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--gdl-lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gdl-assurances div { min-width: 0; } .gdl-assurances strong,.gdl-assurances span { display: block; } .gdl-assurances strong { margin-bottom: 3px; color: var(--gdl-text); font-size: 11px; } .gdl-assurances span { color: #8d9986; font-size: 9px; line-height: 1.35; } .gdl-hero-visual { position: relative; } .gdl-hero-visual::before { content: ''; position: absolute; inset: 7% -6% -9% 4%; border-radius: 45%; background: rgba(112,179,29,.17); filter: blur(55px); } .gdl-slider { position: relative; isolation: isolate; border: 1px solid rgba(184,233,86,.3); border-radius: 20px; overflow: hidden; background: #10180d; box-shadow: 0 30px 80px rgba(0,0,0,.44), 0 0 0 9px rgba(255,255,255,.018); transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); transition: transform .35s ease; } .gdl-slider:hover { transform: perspective(1100px) rotateY(0) rotateX(0) translateY(-4px); } .gdl-slider-top { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07); background: #182313; } .gdl-slider-top span { display: flex; gap: 5px; } .gdl-slider-top i { width: 7px; height: 7px; border-radius: 50%; background: #44523e; } .gdl-slider-top i:first-child { background: var(--gdl-lime); } .gdl-slider-top b { color: #87947f; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .gdl-slider-viewport { overflow: hidden; aspect-ratio: 16/10; background: #10180d; } .gdl-slider-track { display: flex; height: 100%; transition: transform .65s cubic-bezier(.22,.75,.25,1); will-change: transform; } .gdl-slider figure { min-width: 100%; height: 100%; margin: 0; } .gdl-slider figure img { display: block; width: 100%; height: 100%; object-fit: contain; background: #111b0d; } .gdl-slider-controls { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 15px; border-top: 1px solid rgba(255,255,255,.06); } .gdl-slider-controls>button { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--gdl-muted); font-size: 25px; cursor: pointer; } .gdl-slider-controls>div { display: flex; gap: 7px; } .gdl-slider-controls>div button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 20px; background: #53604d; cursor: pointer; transition: width .2s ease, background .2s ease; } .gdl-slider-controls>div button.is-active { width: 22px; background: var(--gdl-lime); } .gdl-placeholder { display: grid; grid-template-columns: 20% 1fr; padding: 0; background: #f4f7f0; } .gdl-placeholder-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 10px; background: #17240f; } .gdl-placeholder-side b { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--gdl-lime); border-radius: 45% 55% 50% 45%; color: var(--gdl-lime); } .gdl-placeholder-side i { width: 70%; height: 5px; border-radius: 4px; background: #3b4a34; } .gdl-placeholder-main { padding: clamp(18px,3vw,30px); } .gdl-placeholder-main>span { color: #1b2815; font-size: clamp(13px,2vw,20px); font-weight: 800; } .gdl-placeholder-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 18px; } .gdl-placeholder-cards i { height: clamp(42px,7vw,74px); border: 1px solid #dae2d3; border-radius: 8px; background: #fff; box-shadow: 0 5px 12px rgba(28,44,18,.06); } .gdl-placeholder-chart { height: 44%; display: flex; align-items: end; gap: 7%; margin-top: 20px; padding: 15px; border-radius: 10px; background: #fff; } .gdl-placeholder-chart i { flex: 1; height: 30%; border-radius: 4px 4px 0 0; background: #d9eac3; } .gdl-placeholder-chart i:nth-child(2){height:55%}.gdl-placeholder-chart i:nth-child(3){height:45%}.gdl-placeholder-chart i:nth-child(4){height:75%}.gdl-placeholder-chart i:nth-child(5){height:62%}.gdl-placeholder-chart i:nth-child(6){height:90%;background:var(--gdl-lime)} .gdl-section { padding-block: 105px; } .gdl-heading { max-width: 720px; margin-bottom: 48px; } .gdl-heading h2 { margin: 12px 0 16px; color: var(--gdl-text); font-size: clamp(34px,4vw,54px); font-weight: 750; letter-spacing: -.045em; line-height: 1.07; } .gdl-heading p { max-width: 650px; margin: 0; color: var(--gdl-muted); font-size: 16px; } .gdl-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .gdl-bento-card { position: relative; min-height: 280px; overflow: hidden; padding: 27px; border: 1px solid var(--gdl-line); border-radius: var(--gdl-radius); background: linear-gradient(145deg, rgba(35,56,23,.9), rgba(20,35,12,.86)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .gdl-bento-card:hover { transform: translateY(-7px); border-color: rgba(168,230,59,.42); box-shadow: 0 22px 55px rgba(0,0,0,.22); } .gdl-bento-card--wide { grid-column: span 2; } .gdl-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid rgba(168,230,59,.22); border-radius: 13px; background: rgba(168,230,59,.09); color: var(--gdl-lime); } .gdl-icon svg,.gdl-benefit-grid svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gdl-bento h3,.gdl-benefit-grid h3,.gdl-steps h3 { margin: 0 0 9px; color: var(--gdl-text); font-size: 19px; } .gdl-bento p,.gdl-benefit-grid p,.gdl-steps p { margin: 0; color: var(--gdl-muted); font-size: 13px; } .gdl-mini-list { max-width: 360px; display: grid; gap: 7px; margin-top: 24px; } .gdl-mini-list i { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 8px; border-radius: 9px; background: rgba(255,255,255,.045); font-style: normal; } .gdl-mini-list b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gdl-lime); color: #142006; font-size: 9px; } .gdl-mini-list span { color: var(--gdl-text); font-size: 10px; font-weight: 700; }.gdl-mini-list small { display:block;color:var(--gdl-muted);font-size:8px;font-weight:500}.gdl-mini-list em{color:var(--gdl-lime);font-size:8px;font-style:normal} .gdl-rings{position:absolute;right:-30px;bottom:-36px;width:190px;height:190px;border:18px solid rgba(168,230,59,.08);border-radius:50%;display:grid;place-items:center}.gdl-rings i{position:absolute;inset:13px;border:15px solid rgba(168,230,59,.15);border-top-color:var(--gdl-lime);border-radius:50%;transform:rotate(25deg)}.gdl-rings strong{position:relative;color:var(--gdl-text);font-size:28px;text-align:center}.gdl-rings small{display:block;color:var(--gdl-muted);font-size:8px;font-weight:500}.gdl-progress{display:grid;gap:11px;margin-top:28px}.gdl-progress i{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--gdl-lime) var(--w),rgba(255,255,255,.07) var(--w))}.gdl-calendar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:28px}.gdl-calendar b{height:38px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.04);color:var(--gdl-muted);font-size:10px}.gdl-calendar .is-today{background:var(--gdl-lime);color:#142006}.gdl-bars{height:92px;display:flex;align-items:end;gap:7%;margin-top:18px;padding:13px 18px 0;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.gdl-bars i{flex:1;height:40%;border-radius:5px 5px 0 0;background:#536543}.gdl-bars i:nth-child(2){height:54%}.gdl-bars i:nth-child(3){height:46%}.gdl-bars i:nth-child(4){height:72%}.gdl-bars i:nth-child(5){height:63%}.gdl-bars i:nth-child(6){height:88%;background:var(--gdl-lime)} .gdl-benefits { padding-block: 90px; border-block: 1px solid rgba(255,255,255,.04); background: #111e0b; } .gdl-benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .gdl-benefit-grid article { padding: 25px; border-left: 1px solid var(--gdl-line); transition: background .25s ease, transform .25s ease; } .gdl-benefit-grid article:hover { transform: translateY(-5px); background: rgba(168,230,59,.035); } .gdl-benefit-grid svg { margin-bottom: 25px; color: var(--gdl-lime); } .gdl-testimonials { padding-block: 105px; overflow: hidden; background: linear-gradient(180deg,#0d1708,#101d0a); } .gdl-testimonial-window { width: 100%; overflow: hidden; } .gdl-testimonial-track { display: flex; width: max-content; } .gdl-testimonial-set { display: flex; gap: 16px; padding-right: 16px; } .gdl-testimonial-window.is-marquee .gdl-testimonial-track { animation: gdl-marquee 38s linear infinite; } .gdl-testimonial-window:hover .gdl-testimonial-track,.gdl-testimonial-window:focus-within .gdl-testimonial-track { animation-play-state: paused; } .gdl-testimonial-window.is-static .gdl-testimonial-track { width: min(1180px,calc(100% - 36px)); margin-inline:auto; } .gdl-testimonial-set article { width: min(390px,82vw); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 1px solid var(--gdl-line); border-radius: var(--gdl-radius); background: var(--gdl-surface); box-shadow: 0 18px 40px rgba(0,0,0,.14); } .gdl-stars { color: var(--gdl-lime); font-size: 14px; letter-spacing: 3px; } .gdl-testimonial-set blockquote { margin: 20px 0 26px; color: #e7edde; font-size: 15px; line-height: 1.72; } .gdl-testimonial-set footer { display: flex; align-items: center; gap: 12px; } .gdl-testimonial-set footer img,.gdl-testimonial-set footer>b { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .gdl-testimonial-set footer>b { display:grid;place-items:center;background:var(--gdl-lime);color:#142006;font-size:17px; } .gdl-testimonial-set footer span,.gdl-testimonial-set footer strong,.gdl-testimonial-set footer small { display: block; } .gdl-testimonial-set footer strong { color: var(--gdl-text); font-size: 12px; }.gdl-testimonial-set footer small{color:var(--gdl-muted);font-size:10px} @keyframes gdl-marquee { to { transform: translateX(-50%); } } .gdl-how { text-align: center; }.gdl-how .gdl-heading{margin-inline:auto}.gdl-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:42px}.gdl-steps::before{content:'';position:absolute;top:27px;left:16.5%;right:16.5%;height:1px;background:linear-gradient(90deg,transparent,var(--gdl-line) 12%,var(--gdl-line) 88%,transparent)}.gdl-steps article{position:relative;padding:0 22px}.gdl-steps b{position:relative;width:56px;height:56px;display:grid;place-items:center;margin:0 auto 22px;border:1px solid rgba(168,230,59,.35);border-radius:50%;background:var(--gdl-surface);color:var(--gdl-lime);font-size:18px;box-shadow:0 0 0 9px var(--gdl-bg)} .gdl-pricing { background:#111e0b; }.gdl-pricing .gdl-heading{margin-inline:auto;text-align:center}.gdl-billing-toggle{width:max-content;display:flex;gap:4px;margin:0 auto 46px;padding:5px;border:1px solid var(--gdl-line);border-radius:14px;background:#0d1708}.gdl-billing-toggle button{min-height:42px;padding:8px 18px;border:0;border-radius:10px;background:transparent;color:var(--gdl-muted);font-size:12px;font-weight:800;cursor:pointer}.gdl-billing-toggle button small{display:block;color:inherit;font-size:8px}.gdl-billing-toggle button.is-active{background:var(--gdl-lime);color:#142006}.gdl-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:16px}.gdl-plan{position:relative;display:flex;flex-direction:column;min-height:600px;padding:31px;border:1px solid var(--gdl-line);border-radius:var(--gdl-radius);background:var(--gdl-bg);transition:transform .25s ease,border-color .25s ease}.gdl-plan:hover{transform:translateY(-6px);border-color:rgba(168,230,59,.42)}.gdl-plan.is-featured{border:2px solid var(--gdl-lime);background:linear-gradient(180deg,#1e3213,#101c0a);box-shadow:0 24px 60px rgba(0,0,0,.25)}.gdl-plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 13px;border-radius:20px;background:var(--gdl-lime);color:#142006;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.gdl-plan h3{margin:0 0 7px;color:var(--gdl-text);font-size:24px}.gdl-plan>p{min-height:52px;margin:0;color:var(--gdl-muted);font-size:12px}.gdl-price{display:flex;align-items:center;gap:5px;margin:25px 0 0}.gdl-price sup{align-self:flex-start;margin-top:13px;color:var(--gdl-muted);font-size:15px}.gdl-price strong{color:var(--gdl-text);font-size:46px;letter-spacing:-.055em;line-height:1}.gdl-price span{color:var(--gdl-muted);font-size:10px;font-weight:700}.gdl-price span small{display:block;font-size:9px;font-weight:500}.gdl-equivalent{min-height:22px;margin-top:6px;color:var(--gdl-lime);font-size:9px}.gdl-plan ul{flex:1;display:grid;align-content:start;gap:11px;margin:18px 0 25px;padding:20px 0 0;border-top:1px solid var(--gdl-line);list-style:none}.gdl-plan li{display:flex;align-items:flex-start;gap:9px;color:#c6d0bf;font-size:11px}.gdl-plan li svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--gdl-lime);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.gdl-pricing-note{margin:22px 0 0;color:var(--gdl-muted);font-size:10px;text-align:center} .gdl-faq{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:80px}.gdl-faq .gdl-heading{position:sticky;top:120px;align-self:start;margin:0}.gdl-faq-list article{border-bottom:1px solid var(--gdl-line)}.gdl-faq h3{margin:0}.gdl-faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border:0;background:transparent;color:var(--gdl-text);font-size:15px;font-weight:700;text-align:left;cursor:pointer}.gdl-faq button:hover{color:var(--gdl-lime)}.gdl-faq button i{position:relative;flex:0 0 auto;width:26px;height:26px;border:1px solid var(--gdl-line);border-radius:50%}.gdl-faq button i::before,.gdl-faq button i::after{content:'';position:absolute;top:50%;left:50%;width:10px;height:1px;transform:translate(-50%,-50%);background:currentColor}.gdl-faq button i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s ease}.gdl-faq .is-open button i::after{transform:translate(-50%,-50%) rotate(0)}.gdl-faq-answer p{margin:-3px 45px 22px 0;color:var(--gdl-muted);font-size:13px;line-height:1.7} .gdl-final{min-height:420px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:center;gap:36px;margin-bottom:105px;padding:34px clamp(28px,6vw,76px) 0;border:1px solid rgba(168,230,59,.38);border-radius:30px;overflow:hidden;background:radial-gradient(circle at 85% 50%,rgba(168,230,59,.16),transparent 38%),linear-gradient(145deg,#1b3010,#112009)}.gdl-final h2{max-width:700px;margin:10px 0 13px;color:var(--gdl-text);font-size:clamp(36px,4.4vw,58px);letter-spacing:-.05em;line-height:1.03}.gdl-final p{margin:0 0 25px;color:var(--gdl-muted)}.gdl-final-character{align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-width:0;min-height:385px}.gdl-final-character img{display:block;width:auto;max-width:100%;height:min(410px,100%);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 28px rgba(0,0,0,.28))} .gdl-footer{padding:70px 0 28px;border-top:1px solid var(--gdl-line);background:#091005}.gdl-footer>.gdl-container{display:grid;grid-template-columns:1.35fr .9fr .9fr .9fr;gap:42px}.gdl-footer p{max-width:300px;color:var(--gdl-muted);font-size:12px}.gdl-footer nav,.gdl-footer-contact,.gdl-footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.gdl-footer-title{margin-bottom:3px;color:var(--gdl-text);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.gdl-social{display:flex;align-items:center;gap:9px;margin-top:18px}.gdl-social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--gdl-line);border-radius:11px;background:rgba(255,255,255,.025);color:var(--gdl-muted)!important;transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease}.gdl-social a:hover,.gdl-social a:focus-visible{transform:translateY(-2px);border-color:rgba(168,230,59,.5);background:rgba(168,230,59,.08);color:var(--gdl-lime)!important}.gdl-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gdl-social a:first-child svg{fill:currentColor;stroke:none}.gdl-footer>small{display:block;width:min(1180px,calc(100% - 36px));margin:48px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);color:#667060;font-size:9px} .gdl-whatsapp{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:130;display:flex;align-items:center;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35)); bottom:80px;}.gdl-whatsapp button{position:relative;z-index:2;width:64px;height:64px;padding:0;border:3px solid var(--gdl-lime);border-radius:50%;overflow:visible;background:#213716;color:#142006;cursor:pointer;transition:transform .25s ease}.gdl-whatsapp button:hover{transform:scale(1.05)}.gdl-whatsapp button img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}.gdl-whatsapp button>span{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:var(--gdl-lime)}.gdl-whatsapp button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8}.gdl-whatsapp button>i{position:absolute;right:0;top:1px;width:12px;height:12px;border:2px solid #17260f;border-radius:50%;background:#3fe479}.gdl-whatsapp-card{width:0;max-width:0;min-height:58px;display:flex;align-items:center;overflow:hidden;margin-right:-8px;border:1px solid rgba(168,230,59,.35);border-radius:18px 0 0 18px;background:#1c3111;color:var(--gdl-text)!important;opacity:0;pointer-events:none;transform:translateX(28px);transition:width .35s cubic-bezier(.2,.75,.25,1),max-width .35s cubic-bezier(.2,.75,.25,1),opacity .2s ease,transform .35s ease}.gdl-whatsapp-card>span{min-width:205px;padding:10px 30px 10px 16px}.gdl-whatsapp-card strong,.gdl-whatsapp-card small{display:block}.gdl-whatsapp-card strong{font-size:13px}.gdl-whatsapp-card small{color:var(--gdl-lime);font-size:10px}.gdl-whatsapp.is-open .gdl-whatsapp-card{width:220px;max-width:220px;opacity:1;pointer-events:auto;transform:translateX(0)} .gdl-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1)}.gdl-reveal[data-delay='1']{transition-delay:.1s}.gdl-reveal[data-delay='2']{transition-delay:.2s}.gdl-reveal[data-delay='3']{transition-delay:.3s}.gdl-reveal.is-visible{opacity:1;transform:none} @media (max-width: 1024px){ .gdl-menu nav{gap:13px}.gdl-menu nav a{font-size:11px}.gdl-hero{grid-template-columns:1fr 1fr;gap:35px}.gdl-assurances{grid-template-columns:1fr}.gdl-assurances article{padding:10px}.gdl-bento{grid-template-columns:repeat(2,1fr)}.gdl-bento-card--wide{grid-column:span 1}.gdl-benefit-grid{grid-template-columns:repeat(2,1fr)}.gdl-plan{padding:24px}.gdl-faq{gap:44px} } @media (max-width: 782px){.admin-bar .gdl-nav{top:46px}} @media (max-width: 767px){ .gdl-container{width:min(100% - 28px,620px)}.gdl-nav-inner{min-height:68px}.gdl-menu-toggle{display:block}.gdl-menu{position:absolute;top:calc(100% + 8px);left:14px;right:14px;display:grid;gap:18px;padding:20px;border:1px solid var(--gdl-line);border-radius:18px;background:#13220c;box-shadow:0 24px 60px rgba(0,0,0,.38);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}.gdl-menu.is-open{opacity:1;visibility:visible;transform:none}.gdl-menu nav{display:grid;justify-content:stretch;gap:0;margin:0}.gdl-menu nav a{padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}.gdl-nav-actions{display:grid;grid-template-columns:1fr 1fr}.gdl-hero{display:block;min-height:auto;padding-block:65px 72px}.gdl-hero-visual{margin-top:50px}.gdl-hero h1{font-size:clamp(43px,13vw,62px)}.gdl-hero-copy>p{font-size:16px}.gdl-assurances{margin-top:30px}.gdl-assurances article{align-items:center;padding:13px}.gdl-assurances span{font-size:10px}.gdl-slider{transform:none}.gdl-section{padding-block:78px}.gdl-heading{margin-bottom:35px}.gdl-heading h2{font-size:clamp(32px,10vw,45px)}.gdl-bento{grid-template-columns:1fr}.gdl-bento-card{min-height:250px}.gdl-benefits{padding-block:72px}.gdl-benefit-grid{grid-template-columns:1fr 1fr}.gdl-benefit-grid article{padding:20px 16px}.gdl-testimonials{padding-block:78px}.gdl-testimonial-window{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px;scrollbar-width:none}.gdl-testimonial-window::-webkit-scrollbar{display:none}.gdl-testimonial-window.is-marquee .gdl-testimonial-track{animation:none}.gdl-testimonial-set article{scroll-snap-align:start}.gdl-steps{grid-template-columns:1fr;gap:35px}.gdl-steps::before{top:0;bottom:0;left:27px;right:auto;width:1px;height:auto}.gdl-steps article{display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding:0;text-align:left}.gdl-steps b{grid-row:1/3;margin:0}.gdl-steps h3{align-self:end}.gdl-how>.gdl-button{width:100%}.gdl-plan-grid{grid-template-columns:1fr}.gdl-plan{min-height:auto}.gdl-faq{grid-template-columns:1fr;gap:10px}.gdl-faq .gdl-heading{position:static;margin-bottom:18px}.gdl-final{grid-template-columns:1fr;min-height:auto;margin-bottom:78px;padding:50px 25px 0}.gdl-final-character{min-height:300px;margin-top:14px}.gdl-final-character img{height:300px}.gdl-final .gdl-actions{align-items:stretch;flex-direction:column}.gdl-footer>.gdl-container{grid-template-columns:1fr;gap:34px}.gdl-whatsapp{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));align-items:flex-end;flex-direction:column-reverse}.gdl-whatsapp-card{width:220px;max-width:220px;height:0;min-height:0;margin:0 0 -8px;border-radius:18px 18px 0 18px;transform:translateY(20px)}.gdl-whatsapp-card>span{padding:12px 16px 25px}.gdl-whatsapp.is-open .gdl-whatsapp-card{height:76px;min-height:76px;transform:none}.gdl-actions{align-items:stretch;flex-direction:column}.gdl-actions .gdl-button{width:100%} } @media (max-width: 480px){.gdl-benefit-grid{grid-template-columns:1fr}.gdl-hero h1{font-size:42px}.gdl-price strong{font-size:42px}.gdl-whatsapp button{width:58px;height:58px}} /* ===================================================================== * 96. LANDING 1.14.1 — ALINEACION MOBILE Y WHATSAPP EXPANDIBLE * ===================================================================== */ /* El avatar permanece visible y la capsula crece lateralmente al interactuar. */ .gdl-whatsapp { align-items: center; flex-direction: row-reverse; border-radius: 999px; background: #3b8b72; } .gdl-whatsapp button { flex: 0 0 64px; width: 64px; height: 64px; padding: 6px; border: 0; background: #3b8b72; box-shadow: 0 0 0 3px rgba(168, 230, 59, .28); } .gdl-whatsapp button:hover { transform: none; } .gdl-whatsapp button img { width: 52px; height: 52px; } .gdl-whatsapp-card { width: 0; max-width: 0; height: 64px; min-height: 64px; margin: 0; border: 0; border-radius: 0 999px 999px 0; background: #3b8b72; transform: translateX(-18px); transition: width .35s cubic-bezier(.2,.75,.25,1), max-width .35s cubic-bezier(.2,.75,.25,1), opacity .2s ease, transform .35s ease; } .gdl-whatsapp-card > span { min-width: 202px; padding: 10px 22px 10px 25px; } .gdl-whatsapp-card strong { font-size: 14px; } .gdl-whatsapp-card small { color: #eaf6e4; font-size: 10px; } .gdl-whatsapp:hover .gdl-whatsapp-card, .gdl-whatsapp:focus-within .gdl-whatsapp-card, .gdl-whatsapp.is-open .gdl-whatsapp-card { width: 220px; max-width: 220px; height: 64px; min-height: 64px; opacity: 1; pointer-events: auto; transform: translateX(0); } @media (max-width: 767px) { /* Titulos y textos descriptivos centrados solo en mobile. */ .gdl-hero-copy, .gdl-heading, .gdl-bento-card, .gdl-benefit-grid article, .gdl-steps article, .gdl-plan, .gdl-testimonial-set article, .gdl-final > div, .gdl-footer > .gdl-container > div:first-child { text-align: center; } .gdl-hero h1, .gdl-hero-copy > p, .gdl-heading, .gdl-heading p, .gdl-final h2, .gdl-footer p { margin-inline: auto; } .gdl-assurances article { justify-content: center; text-align: center; } .gdl-icon, .gdl-benefit-grid svg { display: grid; margin-inline: auto; } .gdl-testimonial-set blockquote { text-align: center; } .gdl-testimonial-set footer { justify-content: center; text-align: left; } .gdl-faq button { padding-left: 26px; } .gdl-faq button > span, .gdl-faq-answer p { text-align: center; } .gdl-plan > p { min-height: 0; } .gdl-price { justify-content: center; margin-top: 28px; } .gdl-price strong { font-size: clamp(56px, 17vw, 72px); } .gdl-equivalent { text-align: center; } .gdl-footer nav, .gdl-footer-contact, .gdl-footer-legal { align-items: center; } .gdl-whatsapp { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); align-items: center; flex-direction: row-reverse; } .gdl-whatsapp-card, .gdl-whatsapp.is-open .gdl-whatsapp-card { margin: 0; border-radius: 0 999px 999px 0; } } @media (max-width: 1024px) and (min-width: 768px) { .gdl-footer > .gdl-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Páginas legales creadas por Guani Hub. */ .gd-legal-shell, .gd-legal-shell *, .gd-legal-shell *::before, .gd-legal-shell *::after { box-sizing: border-box; } .gd-legal-shell { min-height: 100vh; padding: 34px 18px 72px; background: radial-gradient(circle at 50% -180px, rgba(123, 184, 31, .20), transparent 430px), #0d1708; color: #f8fbf3; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .gd-legal-page { width: min(900px, 100%); margin-inline: auto; } .gd-legal-back, .gd-legal-back:visited { display: inline-flex; margin-bottom: 24px; color: #a8e63b !important; font-size: 13px; font-weight: 750; text-decoration: none !important; } .gd-legal-header { padding: clamp(28px, 6vw, 58px); border: 1px solid rgba(189, 238, 91, .18); border-radius: 26px; background: linear-gradient(145deg, rgba(35, 56, 23, .96), rgba(20, 35, 12, .92)); box-shadow: 0 24px 70px rgba(0, 0, 0, .24); } .gd-legal-header .gdl-brand { margin-bottom: 38px; } .gd-legal-header > span { display: block; margin-bottom: 10px; color: #a8e63b; font-size: 11px; font-weight: 850; letter-spacing: .13em; } .gd-legal-header h1 { margin: 0 0 16px; color: #f8fbf3; font-size: clamp(36px, 6vw, 62px); line-height: 1.02; letter-spacing: -.05em; } .gd-legal-header p { max-width: 720px; margin: 0 0 18px; color: #aab5a2; font-size: 16px; line-height: 1.7; } .gd-legal-header small { color: #788372; font-size: 11px; } .gd-legal-alert { margin: 20px 0 0; padding: 16px 18px; border: 1px solid rgba(245, 166, 35, .34); border-radius: 14px; background: rgba(245, 166, 35, .09); color: #f6c76d; font-size: 12px; line-height: 1.6; } .gd-legal-content { display: grid; gap: 14px; margin-top: 22px; } .gd-legal-content section { padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(189, 238, 91, .13); border-radius: 18px; background: rgba(24, 39, 15, .82); } .gd-legal-content h2 { margin: 0 0 13px; color: #f8fbf3; font-size: clamp(18px, 2.6vw, 24px); line-height: 1.25; } .gd-legal-content p, .gd-legal-content li { color: #b4bead; font-size: 14px; line-height: 1.75; } .gd-legal-content p { margin: 0 0 12px; } .gd-legal-content p:last-child { margin-bottom: 0; } .gd-legal-content ul { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 20px; } .gd-legal-content a, .gd-legal-content a:visited { color: #a8e63b !important; text-decoration: underline !important; text-underline-offset: 3px; } .gd-legal-content strong { color: #eaf2e2; } .gd-legal-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); } .gd-legal-footer a, .gd-legal-footer a:visited { color: #8f9a88 !important; font-size: 12px; font-weight: 650; text-decoration: none !important; } .gd-legal-footer a:hover, .gd-legal-footer a:focus-visible { color: #a8e63b !important; } @media (max-width: 767px) { .gd-legal-shell { padding-inline: 14px; } .gd-legal-header { padding: 28px 22px; text-align: center; } .gd-legal-header .gdl-brand { justify-content: center; margin-bottom: 28px; } .gd-legal-content section { padding: 22px 18px; } } @media (prefers-reduced-motion: reduce){ .gd-public-landing *,.gd-public-landing *::before,.gd-public-landing *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.gdl-reveal{opacity:1;transform:none}.gdl-testimonial-track{animation:none!important} } /* ===================================================================== * 94. ACCESO PERSONALIZADO — CREAR / RESTABLECER CONTRASEÑA * ===================================================================== */ .gd-password-screen[hidden], .gd-password-screen [hidden] { display: none !important; } .gd-password-visual { background: radial-gradient(circle at 22% 20%, rgba(134, 191, 20, 0.30), transparent 34%), radial-gradient(circle at 78% 64%, rgba(36, 66, 10, 0.72), transparent 42%), linear-gradient(145deg, #111a0b 0%, #1b2d0e 52%, #0e111a 100%); } body.light-mode .gd-password-visual { background: radial-gradient(circle at 22% 20%, rgba(134, 191, 20, 0.30), transparent 34%), radial-gradient(circle at 78% 64%, rgba(36, 66, 10, 0.18), transparent 42%), linear-gradient(145deg, #f7faef 0%, #e9f2d7 52%, #f8fafc 100%); } #gd-password-screen .gd-form-container { margin-block: auto; padding-block: 44px 28px; } #gd-password-screen #gd-password-theme-text { display: none !important; } #gd-password-screen .gd-password-public-field .gd-glass-input--icon { padding-right: 82px !important; padding-left: 50px !important; } .gd-password-public-toggle { position: absolute; top: 50%; right: 10px; z-index: 3; min-width: 62px; height: 38px; padding: 0 8px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--gd-emerald); font: 700 12px/1 'Inter', sans-serif; cursor: pointer; } .gd-password-public-toggle:hover, .gd-password-public-toggle:focus { background: rgba(134, 191, 20, 0.09); color: var(--gd-emerald); } .gd-password-public-strength { margin: 4px 0 22px; padding: 16px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); background: var(--gd-input-bg); } .gd-password-public-strength > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: var(--gd-text-sec); font-size: 12px; } .gd-password-public-strength > div strong { color: var(--gd-text-main); } .gd-password-public-strength > i { display: block; height: 5px; margin-bottom: 14px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.18); } .gd-password-public-strength > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gd-danger); transition: width 0.2s ease, background 0.2s ease; } .gd-password-public-strength[data-level="media"] > i b { background: var(--gd-gold); } .gd-password-public-strength[data-level="fuerte"] > i b { background: var(--gd-success); } .gd-password-public-strength ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin: 0; padding: 0; list-style: none; } .gd-password-public-strength li { color: var(--gd-text-sec); font-size: 11px; line-height: 1.35; } .gd-password-public-strength li::before { content: "○"; display: inline-block; width: 18px; color: var(--gd-text-sec); } .gd-password-public-strength li.gd-ok { color: var(--gd-success); } .gd-password-public-strength li.gd-ok::before { content: "✓"; color: var(--gd-success); font-weight: 800; } .gd-password-result { display: flex; flex-direction: column; align-items: center; text-align: center; } .gd-password-result > .material-symbols-outlined { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 20px; background: rgba(134, 191, 20, 0.13); color: var(--gd-emerald); font-size: 34px; } .gd-password-result .gd-acceso-subtitle { max-width: 420px; margin-bottom: 26px; } .gd-password-button-link, .gd-password-button-link:hover, .gd-password-button-link:focus, .gd-password-button-link:active, .gd-password-button-link:visited { color: #0e111a !important; text-decoration: none !important; } .gd-password-back { margin: 20px 0 0; } #gd-password-screen a, #gd-password-screen a:hover, #gd-password-screen a:focus, #gd-password-screen a:active, #gd-password-screen a:visited { text-decoration: none !important; } #gd-password-screen .gd-back-link, #gd-password-screen .gd-back-link:visited { color: var(--gd-text-sec) !important; } #gd-password-screen .gd-back-link:hover, #gd-password-screen .gd-back-link:focus, #gd-password-screen .gd-back-link:active { color: var(--gd-emerald) !important; } #gd-password-screen a:focus-visible, #gd-password-screen button:focus-visible { outline: 2px solid var(--gd-emerald) !important; outline-offset: 2px; } @media (max-width: 420px) { .gd-password-public-strength ul { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 641px) { #gd-password-screen #gd-password-theme-text { display: inline !important; } } @media (min-width: 1025px) { #gd-password-screen .gd-form-container { max-width: 440px; margin: 0; padding: 0; } } /* ===================================================================== * 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; } } /* ===================================================================== * CONFIGURACIÓN — ADAPTACIÓN FIEL DEL MOCKUP STITCH * ===================================================================== */ .gd-settings-page { max-width: 1200px; padding-top: 28px; } .gd-settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 28px; } .gd-settings-page .gd-settings-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gd-settings-nav-link, .gd-settings-nav-link:visited { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--gd-text-sec) !important; font-size: 13px; font-weight: 650; line-height: 1.25; text-decoration: none !important; transition: color .18s ease, background .18s ease, border-color .18s ease; } .gd-settings-nav-link .material-symbols-outlined { flex: 0 0 22px; font-size: 20px; } .gd-settings-nav-link:hover { background: rgba(161, 220, 54, .055); color: var(--gd-text-main) !important; } .gd-settings-nav-link.gd-activo { border-color: rgba(161, 220, 54, .08); background: rgba(161, 220, 54, .09); color: #a1dc36 !important; box-shadow: 0 8px 22px rgba(83, 125, 21, .08); } .gd-settings-panels { display: flex; min-width: 0; flex-direction: column; gap: 20px; } .gd-settings-panels > .gd-subtab-contenido { display: block !important; scroll-margin-top: 92px; } #gd-ajustes-marca { order: 1; } #gd-ajustes-equipo { order: 2; } #gd-ajustes-notif { order: 3; } #gd-ajustes-integraciones { order: 4; } #gd-ajustes-datos { order: 5; } .gd-settings-profile-summary, .gd-settings-page .gd-card, .gd-settings-page .gd-webhook-settings .gd-card, .gd-settings-integration-card, .gd-settings-data-card { border: 1px solid rgba(161, 220, 54, .10); background: rgba(24, 34, 16, .84); box-shadow: none; backdrop-filter: blur(12px); } .gd-settings-profile-summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 15px 15px 0 0; border-bottom: 0; } .gd-settings-profile-avatar-wrap { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 72px; overflow: hidden; border: 2px solid rgba(161, 220, 54, .45); border-radius: 50%; background: linear-gradient(145deg, #1f3216, #0a1406); color: #a1dc36; font-size: 22px; font-weight: 800; } .gd-settings-profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; } .gd-settings-profile-summary h3 { margin: 0; color: var(--gd-text-main); font-size: 18px; line-height: 1.25; } .gd-settings-profile-summary p { margin: 5px 0 0; color: var(--gd-text-sec); font-size: 12px; } #gd-ajustes-marca .gd-bento-grid { margin-top: 0; } #gd-ajustes-marca .gd-card { border-radius: 0 0 15px 15px; } .gd-settings-page .gd-card { padding: 20px; border-radius: 15px; } .gd-settings-page .gd-card-titulo, .gd-settings-section-heading h3, .gd-settings-data-card h3 { font-size: 14px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; } .gd-settings-page .gd-nota-aviso { margin-bottom: 18px; border: 0; background: rgba(161, 220, 54, .055); color: var(--gd-text-sec); } .gd-settings-page .gd-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; } .gd-settings-page .gd-campo label { margin-bottom: 7px; color: var(--gd-text-sec); font-size: 11px; } .gd-settings-page .gd-campo input:not([type="checkbox"]):not([type="color"]), .gd-settings-page .gd-campo textarea, .gd-settings-page .gd-campo select, .gd-settings-page .gd-settings-readonly { min-height: 46px; border: 1px solid rgba(161, 220, 54, .12); border-radius: 10px; background: rgba(7, 17, 3, .72); color: var(--gd-text-main); box-shadow: none; } .gd-settings-page .gd-campo input:focus, .gd-settings-page .gd-campo textarea:focus, .gd-settings-page .gd-campo select:focus { border-color: #a1dc36; box-shadow: 0 0 0 2px rgba(161, 220, 54, .10); } .gd-settings-page input[type="color"] { height: 46px; border: 1px solid rgba(161, 220, 54, .12); background: rgba(7, 17, 3, .72); } .gd-settings-page .gd-form-acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; } .gd-settings-page .gd-boton-primario { background: #a1dc36 !important; color: #233600 !important; } .gd-settings-section-heading { margin: 6px 0 12px; padding: 0 2px; } .gd-settings-section-icon { width: 36px; height: 36px; border: 0; background: transparent; color: #a1dc36; } .gd-settings-section-heading p { margin-top: 2px; font-size: 12px; } .gd-settings-integrations-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; } .gd-settings-integration-card { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 16px; border-radius: 12px; background: rgba(24, 34, 16, .84); } .gd-settings-provider-icon { width: 44px; height: 44px; border-radius: 10px; } .gd-settings-status-pending { background: rgba(161, 220, 54, .12); color: #a1dc36; } .gd-settings-webhook-heading { margin-top: 18px; padding: 17px 18px 0; } .gd-settings-data-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border-radius: 15px; scroll-margin-top: 92px; } .gd-settings-data-card .gd-settings-section-heading { margin: 0; } .gd-settings-data-card .gd-boton { display: inline-flex; align-items: center; gap: 7px; min-width: max-content; } .gd-settings-data-card .material-symbols-outlined { font-size: 19px; } body.light-mode .gd-settings-profile-summary, body.light-mode .gd-settings-page .gd-card, body.light-mode .gd-settings-page .gd-webhook-settings .gd-card, body.light-mode .gd-settings-integration-card, body.light-mode .gd-settings-data-card { border-color: rgba(71, 104, 0, .13); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 25px rgba(15, 23, 42, .055); } body.light-mode .gd-settings-page .gd-campo input:not([type="checkbox"]):not([type="color"]), body.light-mode .gd-settings-page .gd-campo textarea, body.light-mode .gd-settings-page .gd-campo select { border-color: rgba(71, 104, 0, .16); background: #fbfdf8; } @media (max-width: 1080px) { .gd-settings-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } .gd-settings-nav-link { padding-inline: 10px; font-size: 12px; } } @media (max-width: 820px) { .gd-settings-page { padding-top: 18px; } .gd-settings-layout { display: block; } .gd-settings-page .gd-settings-nav { position: static; display: flex; flex-direction: row; gap: 8px; margin: 0 -16px 20px; padding: 0 16px 7px; overflow-x: auto; scrollbar-width: none; } .gd-settings-page .gd-settings-nav::-webkit-scrollbar { display: none; } .gd-settings-nav-link, .gd-settings-nav-link:visited { width: auto; min-width: max-content; min-height: 40px; padding: 8px 12px; border-color: rgba(161, 220, 54, .08); border-radius: 999px; background: rgba(24, 34, 16, .84); font-size: 12px; } .gd-settings-nav-link .material-symbols-outlined { flex-basis: auto; font-size: 18px; } body.light-mode .gd-settings-nav-link, body.light-mode .gd-settings-nav-link:visited { background: #fff; } } @media (max-width: 640px) { .gd-settings-panels { gap: 18px; } .gd-settings-profile-summary { flex-direction: column; padding: 20px 16px 16px; text-align: center; } .gd-settings-profile-avatar-wrap { width: 82px; height: 82px; flex-basis: 82px; } .gd-settings-page .gd-card { padding: 16px; } .gd-settings-page .gd-form-grid { grid-template-columns: 1fr; gap: 14px; } .gd-settings-page .gd-form-acciones, .gd-settings-page .gd-form-acciones .gd-boton { width: 100%; } .gd-settings-section-heading { align-items: flex-start; } .gd-settings-integration-card { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; } .gd-settings-status { grid-column: 2; justify-self: start; } .gd-settings-data-card { align-items: stretch; flex-direction: column; padding: 16px; } .gd-settings-data-card .gd-boton { justify-content: center; width: 100%; } } @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; } /* En mobile el control conserva únicamente el icono. El texto vuelve a * mostrarse desde 641 px mediante la regla responsive existente. */ .gd-theme-toggle-btn > span:not(.material-symbols-outlined) { display: none !important; } /* Selectores explícitos para impedir que Astra reactive las etiquetas. */ #gd-login-screen #gd-theme-text, #gd-registro-screen #gd-theme-text-reg { display: none !important; } .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%); display: inline-flex; align-items: center; justify-content: center; z-index: 2; font-size: 20px; color: var(--gd-text-sec); opacity: 0.72; 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 !important; } #gd-login-screen #gd-theme-text, #gd-registro-screen #gd-theme-text-reg { display: inline !important; } #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; margin-top: 20px; 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(360px, 0.92fr) minmax(420px, 1.08fr); gap: 16px; align-items: stretch; margin-bottom: 22px; } .gd-policy-summary-card, .gd-policy-company-card { min-width: 0; min-height: 258px; padding: 22px; border: 1px solid var(--gd-border); border-radius: 18px; background: var(--gd-card-bg); box-shadow: var(--gd-glass-shadow); } .gd-policy-summary-card { display: grid; grid-template-rows: auto 1fr; gap: 18px; } .gd-policy-company-card { display: grid; grid-template-columns: minmax(150px, 0.72fr) minmax(220px, 1.28fr); align-items: center; gap: 20px; } .gd-policy-insight-heading { display: grid; gap: 5px; } .gd-policy-insight-heading .gd-card-label { color: var(--gd-text-main); font-size: 13px; font-weight: 800; letter-spacing: 0.035em; } .gd-policy-insight-heading small { color: var(--gd-text-sec); font-size: 12px; line-height: 1.45; } .gd-policy-insights .gd-polizas-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; gap: 10px; margin: 0; } .gd-policy-insights .gd-polizas-counter { display: grid; align-content: center; justify-items: start; gap: 4px; min-width: 0; min-height: 76px; padding: 13px 15px; border: 1px solid var(--gd-border); border-radius: 13px; background: color-mix(in srgb, var(--gd-card-bg) 68%, var(--gd-input-bg)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.045em; } .gd-policy-insights .gd-polizas-counter strong { font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -0.04em; } .gd-policy-company-chart { position: relative; display: grid; place-items: center; min-width: 0; height: 210px; } .gd-policy-company-chart canvas { max-width: 100%; } .gd-policy-company-chart .gd-empty { margin: 0; text-align: center; } @media (max-width: 1180px) { .gd-policy-insights { grid-template-columns: minmax(310px, 0.9fr) minmax(360px, 1.1fr); } .gd-policy-company-card { grid-template-columns: 1fr; gap: 10px; } .gd-policy-company-chart { height: 190px; } } @media (max-width: 900px) { .gd-policy-insights { grid-template-columns: 1fr; } .gd-policy-summary-card, .gd-policy-company-card { min-height: 0; } .gd-policy-company-card { grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1.3fr); } } @media (max-width: 600px) { .gd-policy-summary-card, .gd-policy-company-card { padding: 17px; border-radius: 15px; } .gd-policy-company-card { grid-template-columns: 1fr; } .gd-policy-insights .gd-polizas-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-policy-insights .gd-polizas-counter { justify-items: center; min-height: 72px; padding-inline: 9px; text-align: center; } .gd-policy-insight-heading { text-align: center; } } /* 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; } /* En escritorio las acciones aprovechan el ancho disponible; las reglas * responsivas existentes conservan intacta la composición móvil. */ @media (min-width: 1181px) { .gd-collections-row { grid-template-columns: minmax(175px, 1.05fr) minmax(132px, 0.68fr) minmax(155px, 0.82fr) minmax(120px, 0.62fr) minmax(300px, 1.45fr); } .gd-collections-row-actions { grid-template-columns: repeat(2, minmax(135px, 1fr)); gap: 7px; width: 100%; } .gd-collections-action { gap: 8px; min-height: 35px; padding: 7px 10px; font-size: 9px; } } @media (min-width: 1500px) { .gd-collections-row { grid-template-columns: minmax(200px, 1.1fr) minmax(145px, 0.72fr) minmax(180px, 0.88fr) minmax(135px, 0.66fr) minmax(430px, 1.6fr); } .gd-collections-row-actions { grid-template-columns: repeat(3, minmax(130px, 1fr)); } } .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; } } /* ===================================================================== * 85. AISLAMIENTO DE ASTRA + AJUSTES DE ACCESO Y TEMA * ===================================================================== */ /* Astra no debe añadir subrayados ni colores propios a los enlaces del CRM. */ #gd-login-screen a, #gd-login-screen a:hover, #gd-login-screen a:focus, #gd-login-screen a:active, #gd-login-screen a:visited, #gd-registro-screen a, #gd-registro-screen a:hover, #gd-registro-screen a:focus, #gd-registro-screen a:active, #gd-registro-screen a:visited, .gd-portal a, .gd-portal a:hover, .gd-portal a:focus, .gd-portal a:active, .gd-portal a:visited { text-decoration: none !important; } /* Enlaces de acceso: estados de color controlados por Guani Hub. */ #gd-login-screen .gd-acceso-divider a, #gd-login-screen .gd-acceso-divider a:visited, #gd-registro-screen .gd-acceso-divider a, #gd-registro-screen .gd-acceso-divider a:visited { color: var(--gd-emerald) !important; } #gd-login-screen .gd-acceso-divider a:hover, #gd-login-screen .gd-acceso-divider a:focus, #gd-login-screen .gd-acceso-divider a:active, #gd-registro-screen .gd-acceso-divider a:hover, #gd-registro-screen .gd-acceso-divider a:focus, #gd-registro-screen .gd-acceso-divider a:active { color: var(--gd-gold) !important; } #gd-registro-screen .gd-back-link, #gd-registro-screen .gd-back-link:visited { color: var(--gd-text-sec) !important; } #gd-registro-screen .gd-back-link:hover, #gd-registro-screen .gd-back-link:focus, #gd-registro-screen .gd-back-link:active { color: var(--gd-emerald) !important; } /* Conserva el color semántico de los enlaces que funcionan como controles. */ .gd-portal a.gd-sidebar-logout, .gd-portal a.gd-sidebar-logout:hover, .gd-portal a.gd-sidebar-logout:focus, .gd-portal a.gd-sidebar-logout:active, .gd-portal a.gd-sidebar-logout:visited { color: var(--gd-danger) !important; } .gd-portal a.gd-icon-btn:hover, .gd-portal a.gd-icon-btn:focus, .gd-portal a.gd-icon-btn:active { color: var(--gd-brand-accent, var(--gd-emerald)) !important; } /* Foco accesible con la identidad visual del CRM, sin estilos de Astra. */ .gd-split-screen a:focus-visible, .gd-split-screen button:focus-visible, .gd-portal a:focus-visible, .gd-portal button:focus-visible { outline: 2px solid var(--gd-brand-accent, var(--gd-emerald)) !important; outline-offset: 2px; } .gd-theme-toggle-btn:focus, .gd-theme-toggle-btn:active { border-color: var(--gd-brand-accent, var(--gd-emerald)) !important; background: var(--gd-card-bg) !important; color: var(--gd-text-sec) !important; } .gd-hamburger:focus, .gd-hamburger:active { border-color: transparent !important; background: transparent !important; color: var(--gd-text-main) !important; } /* Reserva lateral solo en los inputs que muestran un icono. */ #gd-login-screen .gd-glass-input--icon, #gd-registro-screen .gd-glass-input--icon { padding-right: 16px !important; padding-left: 50px !important; } /* ===================================================================== * 86. REPORTES AVANZADOS — AJUSTE UX/UI STITCH * ===================================================================== */ #gd-tab-reportes .gd-report-page-head { margin-bottom: 24px; } #gd-tab-reportes .gd-report-page-head h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; } #gd-tab-reportes .gd-report-page-head p { max-width: 640px; font-size: 13px; line-height: 1.55; } #gd-tab-reportes .gd-report-filter-panel { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr); gap: 12px 24px; align-items: end; margin-bottom: 28px; padding: 20px; border: 1px solid color-mix(in srgb, var(--gd-border) 82%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--gd-card-bg) 92%, transparent); box-shadow: 0 12px 32px rgba(5, 25, 17, 0.06); backdrop-filter: blur(12px); } #gd-tab-reportes .gd-report-filter-label { display: flex; align-items: center; align-self: end; gap: 11px; min-height: 46px; color: var(--gd-text-main); white-space: normal; } #gd-tab-reportes .gd-report-filter-label > span:last-child { display: grid; gap: 2px; } #gd-tab-reportes .gd-report-filter-label strong { font-size: 13px; font-weight: 760; line-height: 1.2; } #gd-tab-reportes .gd-report-filter-label small { color: var(--gd-text-sec); font-size: 10px; font-weight: 500; line-height: 1.35; } #gd-tab-reportes .gd-report-filter-label .material-symbols-outlined { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 20px; } #gd-tab-reportes .gd-report-filter-grid { display: grid; grid-template-columns: minmax(145px, 0.8fr) minmax(160px, 0.9fr) minmax(220px, 1.35fr) auto; gap: 12px; align-items: end; min-width: 0; } #gd-tab-reportes .gd-report-filter-field { display: grid; gap: 7px; min-width: 0; } #gd-tab-reportes .gd-report-filter-field > span { padding: 0 2px; color: var(--gd-text-sec); font-size: 11px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: 0.01em; } #gd-tab-reportes .gd-report-filter-field select, #gd-tab-reportes .gd-report-filter-field input { width: 100%; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--gd-border); border-radius: 12px; background-color: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 12px; line-height: 1; box-shadow: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } #gd-tab-reportes .gd-report-filter-field select:hover, #gd-tab-reportes .gd-report-filter-field input:hover { border-color: color-mix(in srgb, var(--gd-brand-accent) 48%, var(--gd-border)); } #gd-tab-reportes .gd-report-filter-field select:focus, #gd-tab-reportes .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-tab-reportes .gd-report-filter-actions { display: flex; align-items: center; gap: 8px; } #gd-tab-reportes .gd-report-filter-submit { min-width: 150px; height: 46px; min-height: 46px; justify-content: center; padding-inline: 18px; border-radius: 12px; font-size: 12px; } #gd-tab-reportes .gd-report-filter-reset { display: inline-grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; min-height: 46px; padding: 0; border: 1px solid var(--gd-border) !important; border-radius: 12px; background: var(--gd-input-bg) !important; color: var(--gd-text-sec) !important; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; } #gd-tab-reportes .gd-report-filter-reset:hover, #gd-tab-reportes .gd-report-filter-reset:focus { border-color: var(--gd-brand-accent) !important; background: var(--gd-brand-accent-soft) !important; color: var(--gd-brand-accent) !important; } #gd-tab-reportes .gd-report-filter-reset .material-symbols-outlined { font-size: 19px; } #gd-tab-reportes .gd-report-filter-help { grid-column: 2; margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } #gd-tab-reportes .gd-reports-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } #gd-tab-reportes .gd-report-card, #gd-tab-reportes .gd-report-card:first-child { min-height: 370px; border: 1px solid color-mix(in srgb, var(--gd-border) 84%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--gd-card-bg) 95%, var(--gd-brand-accent-soft)); box-shadow: 0 14px 36px rgba(5, 25, 17, 0.07); } #gd-tab-reportes .gd-report-card--wide, #gd-tab-reportes .gd-report-card:first-child { grid-column: 1 / -1; min-height: 410px; } #gd-tab-reportes .gd-report-card-head { min-height: 80px; padding: 18px 20px; border-bottom-color: color-mix(in srgb, var(--gd-border) 78%, transparent); } #gd-tab-reportes .gd-report-card-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); } #gd-tab-reportes .gd-report-card-title strong { font-size: 15px; line-height: 1.3; } #gd-tab-reportes .gd-report-card-title small { font-size: 11px; line-height: 1.4; } #gd-tab-reportes .gd-report-export { min-height: 38px; padding: 8px 12px; border-radius: 10px; font-size: 11px; white-space: nowrap; } #gd-tab-reportes .gd-report-card > .gd-report-table-wrapper { max-height: 330px; padding: 0 20px 18px; scrollbar-color: var(--gd-brand-accent) transparent; scrollbar-width: thin; } #gd-tab-reportes .gd-report-card--wide > .gd-report-table-wrapper { max-height: 350px; } #gd-tab-reportes .gd-report-table { min-width: 650px; } #gd-tab-reportes .gd-report-table thead { background: color-mix(in srgb, var(--gd-card-bg) 94%, transparent); } #gd-tab-reportes .gd-report-table th { padding: 14px 12px; font-size: 10px; letter-spacing: 0.045em; } #gd-tab-reportes .gd-report-table td { padding: 14px 12px; font-size: 12px; line-height: 1.45; } #gd-tab-reportes .gd-report-client b, #gd-tab-reportes .gd-report-money { font-size: 12px; } #gd-tab-reportes .gd-report-mono { font-size: 11px; } #gd-tab-reportes .gd-report-status { min-height: 26px; padding: 5px 10px; font-size: 9px; } @media (max-width: 1280px) { #gd-tab-reportes .gd-report-filter-panel { grid-template-columns: 1fr; align-items: stretch; } #gd-tab-reportes .gd-report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #gd-tab-reportes .gd-report-filter-help { grid-column: 1; } #gd-tab-reportes .gd-report-filter-actions { align-self: end; } #gd-tab-reportes .gd-report-filter-submit { flex: 1; } } @media (max-width: 900px) { #gd-tab-reportes .gd-reports-layout { grid-template-columns: 1fr; } #gd-tab-reportes .gd-report-card--wide, #gd-tab-reportes .gd-report-card:first-child { grid-column: auto; } } @media (max-width: 640px) { #gd-tab-reportes .gd-report-page-head { align-items: flex-start; margin-bottom: 18px; } #gd-tab-reportes .gd-report-head-icon { display: none; } #gd-tab-reportes .gd-report-filter-panel { gap: 16px; margin-inline: -2px; margin-bottom: 20px; padding: 16px; border-radius: 16px; } #gd-tab-reportes .gd-report-filter-grid { grid-template-columns: 1fr; } #gd-tab-reportes .gd-report-filter-field select, #gd-tab-reportes .gd-report-filter-field input, #gd-tab-reportes .gd-report-filter-submit { width: 100%; max-width: none !important; } #gd-tab-reportes .gd-report-filter-actions { width: 100%; } #gd-tab-reportes .gd-report-filter-submit { flex: 1; } #gd-tab-reportes .gd-report-filter-help { display: none; } #gd-tab-reportes .gd-reports-layout { gap: 16px; } #gd-tab-reportes .gd-report-card, #gd-tab-reportes .gd-report-card:first-child, #gd-tab-reportes .gd-report-card--wide { min-height: 0; border-radius: 16px; } #gd-tab-reportes .gd-report-card-head { align-items: center; min-height: 72px; padding: 14px; } #gd-tab-reportes .gd-report-card-title { gap: 10px; } #gd-tab-reportes .gd-report-card-title small { display: block; max-width: 190px; white-space: normal; } #gd-tab-reportes .gd-report-export { display: inline-grid; place-items: center; width: 40px; min-width: 40px; height: 40px; padding: 0; } #gd-tab-reportes .gd-report-export > span:last-child { display: none; } #gd-tab-reportes .gd-report-card > .gd-report-table-wrapper, #gd-tab-reportes .gd-report-card--wide > .gd-report-table-wrapper { max-height: none; padding: 10px 12px 14px; overflow: visible; } #gd-tab-reportes .gd-report-table { display: block; width: 100%; min-width: 0; } #gd-tab-reportes .gd-report-table thead { display: none; } #gd-tab-reportes .gd-report-table tbody { display: grid; gap: 10px; } #gd-tab-reportes .gd-report-table tr { display: grid; gap: 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--gd-border) 78%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--gd-card-bg) 88%, var(--gd-brand-accent-soft)); } #gd-tab-reportes .gd-report-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--gd-border) 62%, transparent); text-align: right; } #gd-tab-reportes .gd-report-table td:last-child { border-bottom: 0; } #gd-tab-reportes .gd-report-table td::before { content: attr(data-label); flex: 0 0 38%; color: var(--gd-text-sec); font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; } #gd-tab-reportes .gd-report-client { justify-content: flex-end; text-align: right; } } /* ===================================================================== * CONFIGURACIÓN — UX/UI RESPONSIVE * ===================================================================== */ .gd-settings-page { --gd-settings-accent-soft: rgba(16, 185, 129, 0.10); --gd-settings-accent-border: rgba(16, 185, 129, 0.22); --gd-settings-shadow: 0 14px 34px rgba(0, 0, 0, 0.14); max-width: 1320px; margin: 0 auto; } .gd-settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 24px 28px; border: 1px solid var(--gd-border); border-radius: 18px; background: radial-gradient(circle at 90% 15%, rgba(16, 185, 129, 0.14), transparent 34%), var(--gd-card-bg); box-shadow: var(--gd-settings-shadow); } .gd-settings-eyebrow { display: block; margin-bottom: 6px; color: var(--gd-emerald); font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .gd-settings-hero h2, .gd-settings-section-heading h3, .gd-settings-provider-copy h4, .gd-settings-webhook-heading h4 { margin: 0; color: var(--gd-text-main); } .gd-settings-hero h2 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; } .gd-settings-hero p { max-width: 720px; margin: 8px 0 0; color: var(--gd-text-sec); font-size: 14px; line-height: 1.6; } .gd-settings-hero-icon, .gd-settings-section-icon { display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--gd-settings-accent-border); background: var(--gd-settings-accent-soft); color: var(--gd-emerald); } .gd-settings-hero-icon { width: 56px; height: 56px; border-radius: 16px; } .gd-settings-hero-icon .material-symbols-outlined { font-size: 28px; } .gd-settings-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 24px; } .gd-settings-page .gd-settings-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 10px; overflow: visible; border: 1px solid var(--gd-border); border-radius: 16px; background: var(--gd-card-bg); box-shadow: var(--gd-settings-shadow); } .gd-settings-page .gd-settings-nav .gd-subtab-btn { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid transparent !important; border-radius: 12px; background: transparent !important; color: var(--gd-text-sec) !important; text-align: left; white-space: normal; box-shadow: none !important; } .gd-settings-page .gd-settings-nav .gd-subtab-btn > .material-symbols-outlined { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(148, 163, 184, 0.10); font-size: 20px; } .gd-settings-page .gd-settings-nav .gd-subtab-btn > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gd-settings-page .gd-settings-nav .gd-subtab-btn strong { color: inherit; font-size: 13px; line-height: 1.25; } .gd-settings-page .gd-settings-nav .gd-subtab-btn small { color: var(--gd-text-sec); font-size: 11px; font-weight: 500; line-height: 1.3; } .gd-settings-page .gd-settings-nav .gd-subtab-btn:hover { background: rgba(148, 163, 184, 0.08) !important; color: var(--gd-text-main) !important; } .gd-settings-page .gd-settings-nav .gd-subtab-btn.gd-activo { border-color: var(--gd-settings-accent-border) !important; background: var(--gd-settings-accent-soft) !important; color: var(--gd-emerald) !important; } .gd-settings-page .gd-settings-nav .gd-subtab-btn.gd-activo > .material-symbols-outlined { background: rgba(16, 185, 129, 0.15); font-variation-settings: 'FILL' 1; } .gd-settings-panels { min-width: 0; } .gd-settings-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .gd-settings-section-icon { width: 44px; height: 44px; border-radius: 12px; } .gd-settings-section-heading h3 { font-size: 20px; line-height: 1.25; } .gd-settings-section-heading p { margin: 4px 0 0; color: var(--gd-text-sec); font-size: 13px; line-height: 1.5; } .gd-settings-page .gd-bento-grid { gap: 18px; } .gd-settings-page .gd-card, .gd-settings-page .gd-webhook-settings .gd-card { border-radius: 16px; box-shadow: var(--gd-settings-shadow); } .gd-settings-page .gd-card-titulo { margin-bottom: 16px; font-size: 16px; } .gd-settings-page .gd-form-grid { gap: 18px; } .gd-settings-page .gd-campo label { margin-bottom: 7px; color: var(--gd-text-main); font-size: 12px; font-weight: 700; line-height: 1.4; } .gd-settings-page .gd-campo input:not([type="checkbox"]):not([type="color"]), .gd-settings-page .gd-campo textarea, .gd-settings-page .gd-campo select { min-height: 46px; border-radius: 10px; } .gd-settings-page .gd-campo textarea { min-height: 116px; line-height: 1.55; resize: vertical; } .gd-settings-page input[type="color"] { width: 100%; height: 48px; padding: 5px; border-radius: 10px; } .gd-settings-page .gd-nota-aviso { margin-bottom: 20px; border-radius: 12px; font-size: 12px; line-height: 1.55; } .gd-settings-page .gd-form-acciones { padding-top: 4px; } .gd-settings-page .gd-form-acciones .gd-boton { min-height: 44px; border-radius: 10px; } .gd-settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid var(--gd-border); border-radius: 12px; background: rgba(148, 163, 184, 0.055); } .gd-settings-toggle-row > div { min-width: 0; } .gd-settings-toggle-row > div > label { display: block; margin: 0 0 3px; } .gd-settings-toggle-row small { display: block; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-settings-switch { position: relative; display: inline-flex !important; width: 46px; height: 26px; flex: 0 0 46px; margin: 0 !important; cursor: pointer; } .gd-settings-switch input { position: absolute; opacity: 0; pointer-events: none; } .gd-settings-switch > span:not(.gd-sr-only) { position: absolute; inset: 0; border: 1px solid var(--gd-border); border-radius: 999px; background: rgba(148, 163, 184, 0.24); transition: background 0.2s ease, border-color 0.2s ease; } .gd-settings-switch > span:not(.gd-sr-only)::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22); content: ''; transition: transform 0.2s ease; } .gd-settings-switch input:checked + span { border-color: var(--gd-emerald); background: var(--gd-emerald); } .gd-settings-switch input:checked + span::after { transform: translateX(20px); } .gd-settings-switch input:focus-visible + span { outline: 3px solid rgba(16, 185, 129, 0.25); outline-offset: 2px; } .gd-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .gd-settings-integrations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .gd-settings-integration-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--gd-border); border-radius: 14px; background: var(--gd-card-bg); box-shadow: var(--gd-settings-shadow); } .gd-settings-provider-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; } .gd-settings-provider-google { background: rgba(66, 133, 244, 0.13); color: #4285f4; } .gd-settings-provider-zoom { background: rgba(45, 140, 255, 0.15); color: #2d8cff; } .gd-settings-provider-copy { min-width: 0; } .gd-settings-provider-copy h4 { font-size: 14px; } .gd-settings-provider-copy p { margin: 4px 0 0; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-settings-status { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; } .gd-settings-status-pending { background: rgba(245, 158, 11, 0.13); color: #f59e0b; } .gd-settings-webhook-heading { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding-top: 18px; border-top: 1px solid var(--gd-border); } .gd-settings-webhook-heading > .material-symbols-outlined { color: var(--gd-emerald); } .gd-settings-webhook-heading h4 { font-size: 14px; } .gd-settings-webhook-heading p { margin: 3px 0 0; color: var(--gd-text-sec); font-size: 11px; } .gd-settings-page .gd-webhook-settings .gd-card { max-width: none; } body.light-mode .gd-settings-page { --gd-settings-accent-soft: rgba(5, 150, 105, 0.09); --gd-settings-accent-border: rgba(5, 150, 105, 0.20); --gd-settings-shadow: 0 12px 28px rgba(15, 23, 42, 0.07); } @media (max-width: 1080px) { .gd-settings-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; } .gd-settings-page .gd-settings-nav .gd-subtab-btn small { display: none; } .gd-settings-integrations-grid { grid-template-columns: 1fr; } } @media (max-width: 820px) { .gd-settings-hero { padding: 20px; } .gd-settings-layout { display: block; } .gd-settings-page .gd-settings-nav { position: static; display: flex; flex-direction: row; gap: 8px; margin: 0 -16px 20px; padding: 2px 16px 8px; overflow-x: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-snap-type: x proximity; } .gd-settings-page .gd-settings-nav .gd-subtab-btn { display: flex; width: auto; min-width: max-content; min-height: 44px; padding: 7px 12px; border-color: var(--gd-border) !important; border-radius: 999px; background: var(--gd-card-bg) !important; scroll-snap-align: start; } .gd-settings-page .gd-settings-nav .gd-subtab-btn > .material-symbols-outlined { width: auto; height: auto; background: transparent; } .gd-settings-page .gd-settings-nav .gd-subtab-btn > span:last-child { display: block; } } @media (max-width: 640px) { .gd-settings-hero { align-items: flex-start; margin-bottom: 18px; padding: 18px; border-radius: 14px; } .gd-settings-hero-icon { width: 44px; height: 44px; border-radius: 12px; } .gd-settings-hero p { font-size: 12px; } .gd-settings-section-heading { align-items: flex-start; margin-bottom: 14px; } .gd-settings-section-icon { width: 40px; height: 40px; } .gd-settings-section-heading h3 { font-size: 18px; } .gd-settings-page .gd-card { padding: 16px; border-radius: 14px; } .gd-settings-toggle-row { align-items: flex-start; padding: 13px; } .gd-settings-integrations-grid { gap: 10px; } .gd-settings-integration-card { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; } .gd-settings-provider-icon { width: 44px; height: 44px; } .gd-settings-status { grid-column: 2; justify-self: start; } .gd-settings-page .gd-form-acciones, .gd-settings-page .gd-form-acciones .gd-boton, .gd-settings-page .gd-webhook-actions .gd-boton { width: 100%; } .gd-settings-page [style*="display:flex"][style*="gap:10px"] { align-items: stretch !important; flex-direction: column; } .gd-settings-page [style*="display:flex"][style*="gap:10px"] .gd-boton { width: 100%; } } /* Ajustes de prioridad: estas reglas deben permanecer al final de la hoja. */ .gd-settings-page { max-width: 1200px; padding-top: 28px; } .gd-settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: 28px; } .gd-settings-page .gd-settings-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gd-settings-panels { display: flex; min-width: 0; flex-direction: column; gap: 20px; } .gd-settings-panels > .gd-subtab-contenido { display: block !important; scroll-margin-top: 92px; } #gd-ajustes-marca { order: 1; } #gd-ajustes-equipo { order: 2; } #gd-ajustes-notif { order: 3; } #gd-ajustes-integraciones { order: 4; } #gd-ajustes-datos { order: 5; } @media (max-width: 1080px) { .gd-settings-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } } @media (max-width: 820px) { .gd-settings-page { padding-top: 18px; } .gd-settings-layout { display: block; } .gd-settings-page .gd-settings-nav { position: static; display: flex; flex-direction: row; gap: 8px; margin: 0 -16px 20px; padding: 0 16px 7px; overflow-x: auto; scrollbar-width: none; } } .gd-settings-form-divider { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(161, 220, 54, .10); scroll-margin-top: 92px; } .gd-settings-form-divider strong, .gd-settings-form-divider small { display: block; } .gd-settings-form-divider strong { color: var(--gd-text-main); font-size: 13px; } .gd-settings-form-divider small { margin-top: 4px; color: var(--gd-text-sec); font-size: 11px; } /* Configuración: navegación por paneles reales. * Este bloque debe permanecer al final para neutralizar las reglas heredadas * que mostraban todas las secciones como una página continua. */ .gd-settings-page .gd-settings-nav-link { appearance: none; font-family: inherit; text-align: left; cursor: pointer; } .gd-settings-panels > [role="tabpanel"] { display: none !important; min-width: 0; } .gd-settings-panels > [role="tabpanel"].gd-activo:not([hidden]) { display: block !important; } .gd-settings-panels > #gd-ajustes-datos.gd-activo:not([hidden]) { display: flex !important; flex-direction: column; } .gd-settings-panels > [role="tabpanel"][hidden] { display: none !important; } /* Cuenta y equipo ------------------------------------------------------- */ .gd-team-stack,.gd-team-modal,.gd-team-toast { --gd-bg-card: var(--gd-card-bg); --gd-bg-surface: var(--gd-surface-dim); --gd-bg-input: var(--gd-input-bg); --gd-bg-hover: color-mix(in srgb,var(--gd-emerald) 10%,transparent); --gd-text-muted: var(--gd-text-sec); --gd-brand-accent: var(--gd-emerald); --gd-brand-accent-soft: color-mix(in srgb,var(--gd-emerald) 12%,transparent); } .gd-team-stack { display:grid; gap:20px; } .gd-team-card { border:1px solid var(--gd-border); border-radius:16px; background:var(--gd-bg-card); box-shadow:0 12px 28px rgba(0,0,0,.1); padding:22px; } .gd-team-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--gd-border); } .gd-team-card h4,.gd-team-modal h4,.gd-team-modal h5 { margin:0; color:var(--gd-text-main); } .gd-team-card h4,.gd-team-modal h4 { font-size:18px; } .gd-team-card p,.gd-team-modal p { margin:5px 0 0; color:var(--gd-text-muted); font-size:13px; line-height:1.55; } .gd-team-add { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; } .gd-team-add svg,.gd-team-info svg { width:19px; height:19px; fill:currentColor; flex:0 0 auto; } .gd-team-empty { min-height:230px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:28px 20px 10px; } .gd-team-empty svg { width:54px; height:54px; padding:12px; border-radius:16px; color:var(--gd-brand-accent); fill:currentColor; background:var(--gd-brand-accent-soft); } .gd-team-empty h5 { margin:14px 0 0; font-size:16px; color:var(--gd-text-main); } .gd-team-empty p { max-width:470px; margin:6px auto 16px; } .gd-team-list { display:grid; } .gd-team-member { display:grid; grid-template-columns:46px minmax(180px,1fr) minmax(150px,.6fr) auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--gd-border); } .gd-team-member:last-child { border-bottom:0; padding-bottom:0; } .gd-team-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); border:1px solid color-mix(in srgb,var(--gd-brand-accent) 25%,transparent); font-weight:800; } .gd-team-member-main,.gd-team-member-meta { display:flex; flex-direction:column; min-width:0; } .gd-team-member-main strong { color:var(--gd-text-main); font-size:14px; } .gd-team-member-main a { color:var(--gd-text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; text-decoration:none !important; } .gd-team-member-main small,.gd-team-member-meta small { color:var(--gd-text-muted); font-size:11px; margin-top:4px; } .gd-team-status { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:700; border:1px solid transparent; } .gd-team-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .gd-status-activo { color:#34d399; background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.22); } .gd-status-pendiente { color:#fbbf24; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.22); } .gd-status-desactivado { color:#f87171; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.22); } .gd-team-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; } .gd-team-actions .gd-boton { min-height:36px; padding:7px 10px; font-size:11px; } .gd-team-activity-button { display:inline-flex; align-items:center; gap:6px; } .gd-team-activity-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .gd-security-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; } .gd-security-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); flex:0 0 auto; } .gd-security-icon svg { width:21px; height:21px; fill:currentColor; } .gd-team-modal { display:none; position:fixed; inset:0; z-index:100000; align-items:center; justify-content:center; padding:18px; } .gd-team-modal.gd-visible { display:flex; } .gd-team-modal-backdrop { position:absolute; inset:0; background:rgba(0,18,15,.75); backdrop-filter:blur(3px); } .gd-team-modal-panel { position:relative; z-index:1; width:min(660px,100%); max-height:min(88vh,780px); display:flex; flex-direction:column; border:1px solid var(--gd-border); border-radius:18px; background:var(--gd-bg-card); box-shadow:0 30px 80px rgba(0,0,0,.38); overflow:hidden; } .gd-team-activity-panel { width:min(760px,100%); } .gd-password-panel { width:min(540px,100%); } .gd-team-modal-panel form { display:flex; min-height:0; flex:1; flex-direction:column; } .gd-team-modal-head { display:flex; justify-content:space-between; gap:16px; padding:19px 22px; background:var(--gd-bg-surface); border-bottom:1px solid var(--gd-border); } .gd-team-modal-close { width:44px; height:44px; flex:0 0 auto; border:0; border-radius:10px; color:var(--gd-text-muted); background:transparent; font-size:27px; line-height:1; cursor:pointer; } .gd-team-modal-close:hover { color:var(--gd-text-main); background:var(--gd-bg-hover); } .gd-team-modal-body { overflow-y:auto; padding:22px; } .gd-team-activity-modal-body { display:flex; min-height:260px; flex-direction:column; gap:18px; } .gd-team-activity-panel .gd-team-activity-list { gap:10px; } .gd-team-activity-panel .gd-team-activity-item { grid-template-columns:40px minmax(0,1fr) auto; gap:12px; padding:13px 14px; } .gd-team-activity-panel .gd-team-activity-item p { max-width:520px; margin-top:4px; line-height:1.45; } .gd-team-activity-panel .gd-team-activity-item time { display:grid; justify-items:end; gap:3px; color:var(--gd-text-muted); font-size:10px; white-space:nowrap; } .gd-team-activity-panel .gd-team-activity-item time b { color:var(--gd-text-main); font-size:10px; font-weight:700; } .gd-team-activity-avatar--icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .gd-team-activity-more { display:flex; justify-content:center; padding-top:2px; } .gd-team-activity-more .gd-boton { min-width:190px; min-height:42px; } .gd-team-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .gd-team-modal .gd-campo { margin-bottom:16px; } .gd-team-modal .gd-campo label { display:block; margin-bottom:7px; color:var(--gd-text-main); font-size:12px; font-weight:700; } .gd-team-modal .gd-campo input { width:100%; min-height:44px; border:1px solid var(--gd-border); border-radius:10px; padding:9px 12px; color:var(--gd-text-main); background:var(--gd-bg-input); } .gd-team-modal .gd-campo input:focus { outline:3px solid var(--gd-brand-accent-soft); border-color:var(--gd-brand-accent); } .gd-field-error { display:block; min-height:17px; margin-top:4px; color:#f87171; font-size:11px; } .gd-permissions-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:5px 0 12px; } .gd-permissions-heading h5 { font-size:13px; } .gd-permissions-heading p { font-size:11px; margin-top:2px; } .gd-text-action { min-height:44px; border:0; background:transparent; color:var(--gd-brand-accent); font-weight:750; cursor:pointer; } .gd-permissions-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .gd-permission-row { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:64px; padding:11px 12px; border:1px solid var(--gd-border); border-radius:12px; background:var(--gd-bg-surface); cursor:pointer; } .gd-permission-row > span:first-child { display:flex; min-width:0; flex-direction:column; } .gd-permission-row strong { color:var(--gd-text-main); font-size:12px; } .gd-permission-row small { color:var(--gd-text-muted); font-size:10px; line-height:1.35; margin-top:3px; } .gd-team-switch { position:relative; width:42px; height:24px; flex:0 0 auto; } .gd-team-switch input { position:absolute !important; width:1px !important; height:1px !important; opacity:0; } .gd-team-switch i { position:absolute; inset:0; border-radius:999px; background:#64748b; transition:.2s ease; } .gd-team-switch i::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:.2s ease; } .gd-team-switch input:checked + i { background:var(--gd-brand-accent); } .gd-team-switch input:checked + i::after { transform:translateX(18px); } .gd-team-switch input:focus-visible + i { outline:3px solid color-mix(in srgb,var(--gd-brand-accent) 42%,transparent); outline-offset:2px; } .gd-team-info { display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--gd-brand-accent) 24%,transparent); border-radius:11px; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); } .gd-team-info p { margin:0; color:var(--gd-text-main); font-size:11px; } .gd-team-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:15px 22px; border-top:1px solid var(--gd-border); background:var(--gd-bg-surface); } .gd-team-modal-actions .gd-boton { min-height:44px; } .gd-assistant-security { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:11px; align-items:center; margin-top:18px; padding:14px; border:1px solid var(--gd-border); border-radius:12px; background:var(--gd-bg-surface); } .gd-assistant-security strong { color:var(--gd-text-main); font-size:12px; } .gd-assistant-security p { margin-top:3px; font-size:10px; } .gd-inline-confirm { margin-top:10px; padding:14px; border:1px solid rgba(245,158,11,.3); border-radius:12px; background:rgba(245,158,11,.08); color:var(--gd-text-main); } .gd-inline-confirm p { font-size:11px; } .gd-inline-confirm > div { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; } .gd-password-field > div { position:relative; } .gd-password-field input { padding-right:72px !important; } .gd-password-toggle { position:absolute; right:5px; top:4px; min-width:58px; height:36px; border:0; border-radius:8px; background:transparent; color:var(--gd-brand-accent); font-size:11px; font-weight:750; cursor:pointer; } .gd-password-strength { padding:14px; border:1px solid var(--gd-border); border-radius:12px; background:var(--gd-bg-surface); } .gd-strength-head { display:flex; justify-content:space-between; color:var(--gd-text-main); font-size:11px; } .gd-strength-bar { height:5px; margin:9px 0 12px; border-radius:5px; background:var(--gd-border); overflow:hidden; } .gd-strength-bar i { display:block; width:0; height:100%; background:#ef4444; transition:.25s ease; } .gd-strength-bar i[data-level="medium"] { background:#f59e0b; } .gd-strength-bar i[data-level="strong"] { background:var(--gd-brand-accent); } .gd-password-strength ul { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:0; padding:0; list-style:none; } .gd-password-strength li { color:var(--gd-text-muted); font-size:10px; } .gd-password-strength li::before { content:"○"; margin-right:6px; } .gd-password-strength li.gd-ok { color:#34d399; } .gd-password-strength li.gd-ok::before { content:"✓"; font-weight:800; } .gd-team-toast { position:fixed; right:24px; bottom:24px; z-index:100100; max-width:390px; padding:13px 16px; border-radius:11px; background:#065f46; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.28); transform:translateY(24px); opacity:0; pointer-events:none; transition:.24s ease; } .gd-team-toast.gd-visible { opacity:1; transform:translateY(0); } .gd-team-toast.gd-error { background:#991b1b; } body.gd-modal-open { overflow:hidden; } body.light-mode .gd-team-card,body.light-mode .gd-team-modal-panel { box-shadow:0 12px 30px rgba(15,23,42,.08); } body.light-mode .gd-status-activo { color:#047857; } body.light-mode .gd-status-pendiente { color:#a16207; } body.light-mode .gd-status-desactivado { color:#b91c1c; } @media (max-width: 900px) { .gd-team-member { grid-template-columns:44px minmax(0,1fr) auto; } .gd-team-member-meta { align-items:flex-end; } .gd-team-actions { grid-column:2 / -1; justify-content:flex-start; } } @media (max-width: 640px) { .gd-team-card { padding:16px; border-radius:14px; } .gd-team-card-head { flex-direction:column; gap:13px; } .gd-team-add,.gd-team-card-head .gd-boton { width:100%; min-height:44px; } .gd-team-member { grid-template-columns:42px minmax(0,1fr); align-items:start; } .gd-team-member-meta { grid-column:1 / -1; align-items:flex-start; } .gd-team-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; } .gd-team-actions .gd-boton { min-height:44px; } .gd-team-activity-panel .gd-team-activity-item { grid-template-columns:38px minmax(0,1fr); } .gd-team-activity-panel .gd-team-activity-item time { grid-column:2; justify-items:start; grid-auto-flow:column; justify-content:start; gap:7px; } .gd-team-activity-more .gd-boton { width:100%; } .gd-security-card { grid-template-columns:42px minmax(0,1fr); } .gd-security-card > .gd-boton { grid-column:1 / -1; width:100%; min-height:44px; } .gd-team-modal { padding:0; align-items:flex-end; } .gd-team-modal-panel { width:100%; max-height:96vh; border-radius:18px 18px 0 0; } .gd-team-modal-head,.gd-team-modal-body,.gd-team-modal-actions { padding-left:16px; padding-right:16px; } .gd-team-fields,.gd-permissions-list,.gd-password-strength ul { grid-template-columns:1fr; } .gd-permission-row { min-height:70px; } .gd-team-modal-actions { display:grid; grid-template-columns:1fr; } .gd-team-modal-actions .gd-boton { width:100%; } .gd-assistant-security { grid-template-columns:38px minmax(0,1fr); } .gd-assistant-security .gd-boton { grid-column:1 / -1; width:100%; min-height:44px; } .gd-inline-confirm > div { display:grid; grid-template-columns:1fr; } .gd-team-toast { left:14px; right:14px; bottom:14px; max-width:none; } } #gd-ajustes-preferencias .gd-settings-card { margin: 0; } /* ======================================================================== * Configuración 1.13 — Perfil, cotización y notificaciones * ======================================================================== */ .gd-profile-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .gd-profile-upload-card, .gd-notification-accordion, .gd-assistant-reminders-card { background: var(--gd-card-bg); border: 1px solid var(--gd-border); border-radius: 16px; box-shadow: var(--gd-glass-shadow); } .gd-profile-upload-card { padding: 22px; } .gd-profile-upload-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .gd-profile-upload-card-head h4 { margin:0; font-size:15px; color:var(--gd-text-main); } .gd-profile-upload-card-head > span { color:var(--gd-text-sec); font-size:10px; font-weight:700; text-transform:uppercase; } .gd-profile-dropzone { min-height:230px; border:2px dashed color-mix(in srgb, var(--gd-border) 80%, transparent); border-radius:14px; padding:24px; display:flex; align-items:center; justify-content:center; transition:.2s ease; cursor:pointer; background:color-mix(in srgb, var(--gd-card-bg) 82%, var(--gd-brand-accent-soft)); } .gd-profile-dropzone:hover, .gd-profile-dropzone:focus-visible, .gd-profile-dropzone.gd-is-dragging { border-color:var(--gd-brand-accent); background:var(--gd-brand-accent-soft); outline:none; } .gd-profile-dropzone.gd-is-uploading { opacity:.65; pointer-events:none; } .gd-profile-empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; color:var(--gd-text-sec); } .gd-profile-empty-state > .material-symbols-outlined { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); font-size:28px; } .gd-profile-empty-state strong { color:var(--gd-text-main); font-size:14px; } .gd-profile-empty-state small { font-size:12px; } .gd-profile-empty-state .gd-boton { margin-top:8px; } .gd-profile-loaded-state { display:none; width:100%; align-items:center; gap:16px; } .gd-profile-dropzone.gd-has-image .gd-profile-empty-state { display:none; } .gd-profile-dropzone.gd-has-image .gd-profile-loaded-state { display:flex; } .gd-profile-preview { width:96px; height:72px; flex:0 0 auto; display:grid; place-items:center; padding:8px; overflow:hidden; border-radius:12px; background:var(--gd-surface-dim); border:1px solid var(--gd-border); } .gd-profile-preview-round { width:76px; height:76px; padding:0; border-radius:50%; } .gd-profile-preview img { width:100%; height:100%; object-fit:contain; } .gd-profile-preview-round img { object-fit:cover; } .gd-profile-file-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .gd-profile-file-copy strong { color:var(--gd-text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } .gd-profile-file-copy small { color:var(--gd-brand-accent); font-size:11px; } .gd-profile-file-actions { display:flex; gap:4px; } .gd-icon-button { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; color:var(--gd-text-sec); cursor:pointer; } .gd-icon-button:hover { background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); } .gd-icon-button-danger:hover { background:rgba(239,68,68,.12); color:#ef4444; } .gd-profile-upload-help { margin:12px 0 0; color:var(--gd-text-sec); font-size:11px; } .gd-settings-info-banner { display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; padding:14px 16px; border-radius:12px; background:var(--gd-brand-accent-soft); color:var(--gd-text-main); border:1px solid color-mix(in srgb, var(--gd-brand-accent) 28%, transparent); } .gd-settings-info-banner .material-symbols-outlined { color:var(--gd-brand-accent); font-size:20px; } .gd-settings-info-banner p { margin:0; font-size:12px; line-height:1.55; } .gd-quotation-form { grid-template-columns:repeat(2, minmax(0, 1fr)); } .gd-currency-input { display:flex; align-items:stretch; border:1px solid var(--gd-border); border-radius:10px; overflow:hidden; background:var(--gd-input-bg); } .gd-currency-input:focus-within { border-color:var(--gd-brand-accent); box-shadow:0 0 0 3px var(--gd-brand-accent-soft); } .gd-currency-input > span { display:flex; align-items:center; padding:0 14px; background:var(--gd-surface-dim); border-right:1px solid var(--gd-border); color:var(--gd-brand-accent); font-size:12px; font-weight:800; } .gd-currency-input input { border:0 !important; box-shadow:none !important; border-radius:0 !important; } .gd-quotation-form .gd-campo > small { margin-top:8px; color:var(--gd-text-sec); font-size:11px; } .gd-notifications-form { display:flex; flex-direction:column; gap:14px; } .gd-notification-accordion { overflow:hidden; } .gd-notification-accordion-trigger { width:100%; min-height:72px; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:16px 20px; border:0; background:transparent; color:var(--gd-text-main); text-align:left; cursor:pointer; } .gd-notification-accordion-trigger:hover { background:var(--gd-brand-accent-soft); } .gd-notification-accordion-trigger > .material-symbols-outlined:first-child { color:var(--gd-brand-accent); } .gd-notification-accordion-trigger > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; } .gd-notification-accordion-trigger strong { font-size:14px; } .gd-notification-accordion-trigger small { color:var(--gd-text-sec); font-size:11px; font-weight:400; } .gd-notification-state { padding:4px 9px; border-radius:999px; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); font-size:10px; font-weight:800; } .gd-accordion-chevron { transform:rotate(90deg); transition:transform .2s ease; color:var(--gd-text-sec); } .gd-notification-accordion.gd-is-open .gd-accordion-chevron { transform:rotate(-90deg); } .gd-notification-accordion-panel { padding:20px; border-top:1px solid var(--gd-border); } .gd-reminder-type-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; } .gd-reminder-type-row { display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,auto); align-items:center; gap:18px; padding:14px 16px; border-radius:12px; background:var(--gd-surface-dim); border:1px solid var(--gd-border); } .gd-reminder-type-row > div { display:flex; flex-direction:column; gap:3px; } .gd-reminder-type-row strong { color:var(--gd-text-main); font-size:13px; } .gd-reminder-type-row small { color:var(--gd-text-sec); font-size:11px; } .gd-reminder-days { display:flex; flex-direction:column; gap:5px; color:var(--gd-text-sec); font-size:10px; font-weight:700; text-transform:uppercase; } .gd-reminder-days select { min-height:40px; min-width:170px; padding:7px 34px 7px 10px; border:1px solid var(--gd-border); border-radius:9px; background:var(--gd-input-bg); color:var(--gd-text-main); font:inherit; text-transform:none; } .gd-notification-accordion-panel > .gd-settings-info-banner { margin:16px 0 0; } .gd-template-editor { margin-bottom:20px; } .gd-template-editor:last-child { margin-bottom:0; } .gd-template-editor > label { display:block; margin-bottom:9px; color:var(--gd-text-main); font-size:12px; font-weight:700; } .gd-variable-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; } .gd-variable-chips button { min-height:34px; padding:6px 10px; border:1px solid color-mix(in srgb, var(--gd-brand-accent) 30%, transparent); border-radius:8px; background:var(--gd-brand-accent-soft); color:var(--gd-brand-accent); font:700 11px/1 monospace; cursor:pointer; } .gd-variable-chips button:hover { transform:translateY(-1px); filter:brightness(1.05); } .gd-variable-chips button span { margin-right:4px; } .gd-template-editor textarea, .gd-template-subaccordion-panel textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--gd-border); border-radius:10px; padding:13px; background:var(--gd-input-bg); color:var(--gd-text-main); font:12px/1.6 monospace; } .gd-template-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:7px; color:var(--gd-text-sec); font-size:10px; } .gd-template-meta button { border:0; background:transparent; color:var(--gd-brand-accent); font-size:11px; font-weight:700; cursor:pointer; } .gd-template-library { display:flex; flex-direction:column; gap:9px; } .gd-template-subaccordion { border:1px solid var(--gd-border); border-radius:11px; overflow:hidden; } .gd-template-subaccordion-trigger { width:100%; display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border:0; background:var(--gd-surface-dim); color:var(--gd-text-main); text-align:left; cursor:pointer; } .gd-template-subaccordion-trigger > span:first-child { display:flex; flex-direction:column; gap:3px; } .gd-template-subaccordion-trigger small { color:var(--gd-text-sec); font-size:10px; font-weight:400; } .gd-template-subaccordion-trigger .material-symbols-outlined { transform:rotate(90deg); transition:transform .2s ease; } .gd-template-subaccordion.gd-is-open .gd-template-subaccordion-trigger .material-symbols-outlined { transform:rotate(-90deg); } .gd-template-subaccordion-panel { padding:14px; border-top:1px solid var(--gd-border); } .gd-notifications-savebar { position:sticky; bottom:14px; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:4px; padding:13px 16px; border:1px solid var(--gd-border); border-radius:13px; background:color-mix(in srgb, var(--gd-card-bg) 92%, transparent); box-shadow:0 12px 36px rgba(0,0,0,.14); backdrop-filter:blur(12px); } .gd-notifications-savebar > div { display:flex; flex-direction:column; gap:2px; } .gd-notifications-savebar strong { color:var(--gd-text-main); font-size:12px; } .gd-notifications-savebar small { color:var(--gd-text-sec); font-size:10px; } @media (max-width: 767px) { .gd-profile-upload-grid, .gd-quotation-form { grid-template-columns:1fr; } .gd-profile-upload-card { padding:16px; } .gd-profile-upload-card-head { align-items:flex-start; flex-direction:column; } .gd-profile-dropzone { min-height:210px; padding:18px; } .gd-profile-loaded-state { flex-wrap:wrap; } .gd-notification-accordion-trigger { grid-template-columns:auto minmax(0,1fr) auto; padding:14px; } .gd-notification-state { display:none; } .gd-notification-accordion-panel { padding:14px; } .gd-reminder-type-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; } .gd-reminder-days { grid-column:1 / -1; } .gd-reminder-days select { width:100%; min-height:44px; } .gd-variable-chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; } .gd-variable-chips button { flex:0 0 auto; min-height:40px; } .gd-notifications-savebar { align-items:stretch; flex-direction:column; bottom:8px; } .gd-notifications-savebar .gd-boton { width:100%; min-height:44px; } } /* ===================================================================== * GUANI HUB 1.16.1 — Pólizas: indicadores, filtros y acciones masivas * ===================================================================== */ /* Corrige el label que Astra heredaba con texto oscuro dentro del importador. */ #gd-modal-importar #gd-import-compania-unica > label, #gd-modal-importar #gd-import-compania-unica > small { color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; } #gd-modal-importar #gd-import-compania-unica > small { color: var(--gd-text-sec) !important; -webkit-text-fill-color: var(--gd-text-sec) !important; } /* Tres indicadores principales de Pólizas. */ .gd-policy-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .gd-policy-insight-card, .gd-policy-company-card, .gd-policy-type-card, .gd-policy-premium-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 14px; min-width: 0; min-height: 300px; padding: 20px; border: 1px solid var(--gd-border); border-radius: 18px; background: var(--gd-card-bg); box-shadow: var(--gd-glass-shadow); } .gd-policy-insight-chart { position: relative; display: grid; place-items: center; min-width: 0; height: 220px; } .gd-policy-insight-chart canvas { max-width: 100%; max-height: 220px; } .gd-policy-insight-chart .gd-empty { margin: 0; text-align: center; } .gd-policy-premium-card { grid-template-rows: auto auto auto 1fr; } .gd-policy-premium-total { display: grid; align-content: center; gap: 4px; min-height: 108px; padding: 18px; border: 1px solid rgba(135, 191, 20, 0.26); border-radius: 15px; background: linear-gradient(135deg, rgba(135, 191, 20, 0.15), rgba(135, 191, 20, 0.035)); } .gd-policy-premium-total > span, .gd-policy-premium-total > small { color: var(--gd-text-sec); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .gd-policy-premium-total > strong { color: var(--gd-text-main); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.045em; overflow-wrap: anywhere; } .gd-policy-premium-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gd-policy-premium-meta > span { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--gd-border); border-radius: 11px; background: color-mix(in srgb, var(--gd-card-bg) 70%, var(--gd-input-bg)); color: var(--gd-text-sec); font-size: 9px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.035em; } .gd-policy-premium-meta strong { color: var(--gd-text-main); font-size: 18px; line-height: 1; } /* Barra de acciones masivas. */ .gd-policy-bulk-actions { display: grid; gap: 13px; margin-bottom: 18px; padding: 16px; border: 1px solid rgba(135, 191, 20, 0.24); border-radius: 16px; background: color-mix(in srgb, var(--gd-card-bg) 86%, rgba(135, 191, 20, 0.12)); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07); } .gd-policy-bulk-selection, .gd-policy-bulk-fields { display: flex; align-items: center; gap: 12px; min-width: 0; } .gd-policy-bulk-selection { padding-bottom: 11px; border-bottom: 1px solid var(--gd-border); } .gd-policy-select-visible { display: inline-flex; align-items: center; gap: 8px; color: var(--gd-text-main) !important; font-size: 12px; font-weight: 750; cursor: pointer; } .gd-policy-select-visible input, .gd-policy-select-checkbox { accent-color: var(--gd-emerald); } #gd-polizas-seleccionadas { color: var(--gd-emerald); font-size: 12px; } .gd-policy-clear-selection { margin-left: auto; padding: 5px 8px; border: 0; background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .gd-policy-clear-selection:hover, .gd-policy-clear-selection:focus-visible { color: var(--gd-emerald); } .gd-policy-clear-selection:disabled { opacity: 0.45; cursor: default; } .gd-policy-bulk-fields { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr) auto; align-items: end; } .gd-policy-bulk-fields > label { display: grid; gap: 6px; min-width: 0; color: var(--gd-text-main) !important; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .gd-policy-bulk-fields select, .gd-policy-bulk-fields input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 12px; text-transform: none; letter-spacing: normal; } .gd-policy-bulk-fields .gd-btn { min-height: 42px; white-space: nowrap; } .gd-policy-bulk-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-policy-bulk-note .material-symbols-outlined { flex: 0 0 auto; color: var(--gd-emerald); font-size: 17px; } .gd-policy-bulk-status { margin: 0; min-height: 0; } .gd-policy-bulk-status:empty { display: none; } /* Filtro dinámico por compañías, colocado antes de los estados. */ .gd-polizas-company-filters { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; min-width: 0; } .gd-polizas-company-filters[hidden] { display: none; } .gd-polizas-filter-group-label { flex: 0 0 auto; padding-top: 8px; color: var(--gd-text-sec); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .gd-polizas-company-chips { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .gd-poliza-compania-filtro { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-poliza-compania-filtro.gd-activo { background: color-mix(in srgb, var(--gd-emerald) 16%, transparent); border-color: color-mix(in srgb, var(--gd-emerald) 48%, transparent); } /* Selector individual dentro de cada tarjeta. */ .gd-policy-portfolio-card { transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .gd-policy-portfolio-card.gd-is-selected { border-color: rgba(135, 191, 20, 0.78); box-shadow: 0 0 0 3px rgba(135, 191, 20, 0.1), 0 14px 32px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } .gd-policy-portfolio-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } .gd-policy-selector { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px; border: 1px solid var(--gd-border); border-radius: 7px; background: var(--gd-input-bg); cursor: pointer; } .gd-policy-selector input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .gd-policy-selector .material-symbols-outlined { color: transparent; font-size: 17px; font-weight: 800; } .gd-policy-selector:has(input:checked) { border-color: var(--gd-emerald); background: var(--gd-emerald); } .gd-policy-selector:has(input:checked) .material-symbols-outlined { color: #17210f; } @media (max-width: 1180px) { .gd-policy-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-policy-premium-card { grid-column: 1 / -1; min-height: 0; } } @media (max-width: 850px) { .gd-policy-insights { grid-template-columns: 1fr; } .gd-policy-premium-card { grid-column: auto; } .gd-policy-insight-card, .gd-policy-company-card, .gd-policy-type-card, .gd-policy-premium-card { min-height: 0; } .gd-policy-bulk-fields { grid-template-columns: 1fr 1fr; } .gd-policy-bulk-fields .gd-btn { grid-column: 1 / -1; } } @media (max-width: 600px) { .gd-policy-insight-card, .gd-policy-company-card, .gd-policy-type-card, .gd-policy-premium-card, .gd-policy-bulk-actions { padding: 15px; border-radius: 14px; } .gd-policy-bulk-fields { grid-template-columns: 1fr; } .gd-policy-premium-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-polizas-company-filters { display: grid; gap: 7px; } .gd-polizas-filter-group-label { padding-top: 0; } .gd-polizas-company-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .gd-poliza-compania-filtro { flex: 0 0 auto; max-width: 190px; } .gd-policy-bulk-fields .gd-btn { grid-column: auto; width: 100%; } .gd-policy-bulk-selection { flex-wrap: wrap; } .gd-policy-clear-selection { margin-left: 0; } .gd-policy-portfolio-card > header { grid-template-columns: auto minmax(0, 1fr); } .gd-policy-portfolio-card > header > .gd-status { grid-column: 2; justify-self: start; } } /* ===================================================================== * GUANI HUB 1.17.0 — Automatizaciones, NPS y experiencia del cliente * ===================================================================== */ /* SVG propios: evita depender de glifos que no estén incluidos en la fuente. */ .gd-sidebar-svg, .gd-notification-svg, .gd-btn-annual-review svg, .gd-satisfaction-intro .gd-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-sidebar-svg { width: 24px; height: 24px; flex: 0 0 24px; } .gd-notification-svg { width: 24px; height: 24px; color: var(--gd-brand-accent); } /* Configuración: filas independientes para activar y calendarizar cada flujo. */ .gd-automation-list { display: flex; flex-direction: column; gap: 10px; } .gd-automation-row { display: grid; grid-template-columns: minmax(230px, 1fr) auto minmax(180px, auto); align-items: center; gap: 18px; padding: 15px 16px; border: 1px solid var(--gd-border); border-radius: 12px; background: var(--gd-surface-dim); } .gd-automation-row:not(:has(.gd-reminder-days)) { grid-template-columns: minmax(230px, 1fr) auto; } .gd-automation-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .gd-automation-copy strong { color: var(--gd-text-main); font-size: 13px; } .gd-automation-copy small { max-width: 620px; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-btn-annual-review { width: 100%; min-height: 44px; margin-top: 10px; border-color: color-mix(in srgb, var(--gd-emerald) 38%, var(--gd-border)); background: color-mix(in srgb, var(--gd-emerald) 9%, transparent); color: var(--gd-emerald); } .gd-btn-annual-review svg { width: 18px; height: 18px; } .gd-btn-annual-review:hover, .gd-btn-annual-review:focus-visible { border-color: var(--gd-emerald); background: color-mix(in srgb, var(--gd-emerald) 15%, transparent); outline: none; } /* Dashboard de satisfacción. */ .gd-satisfaction-dashboard { display: flex; min-width: 0; flex-direction: column; gap: 18px; } .gd-satisfaction-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 24px; border: 1px solid var(--gd-border); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--gd-card-bg) 92%, transparent), color-mix(in srgb, var(--gd-emerald) 7%, var(--gd-card-bg))); } .gd-satisfaction-intro > div { min-width: 0; } .gd-satisfaction-intro > div > span, .gd-satisfaction-card-head > div > span { color: var(--gd-emerald); font-size: 10px; font-weight: 800; letter-spacing: .08em; } .gd-satisfaction-intro h3 { margin: 4px 0 6px; color: var(--gd-text-main); font-size: clamp(20px, 2vw, 28px); line-height: 1.2; } .gd-satisfaction-intro p { margin: 0; color: var(--gd-text-sec); font-size: 12px; } .gd-satisfaction-intro .gd-btn { flex: 0 0 auto; } .gd-satisfaction-intro .gd-btn svg { width: 18px; height: 18px; } .gd-satisfaction-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .gd-satisfaction-kpis article, .gd-satisfaction-card { border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-card-bg); box-shadow: 0 10px 28px rgba(0, 0, 0, .08); } .gd-satisfaction-kpis article { display: flex; min-height: 132px; flex-direction: column; justify-content: space-between; gap: 5px; padding: 17px; } .gd-satisfaction-kpis span { color: var(--gd-text-sec); font-size: 10px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; } .gd-satisfaction-kpis strong { color: var(--gd-emerald); font-size: 31px; line-height: 1; } .gd-satisfaction-kpis small { color: var(--gd-text-sec); font-size: 10px; } .gd-satisfaction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .gd-satisfaction-card { min-width: 0; padding: 20px; } .gd-satisfaction-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; } .gd-satisfaction-card-head h4 { margin: 3px 0 0; color: var(--gd-text-main); font-size: 15px; } .gd-satisfaction-card-head > small { color: var(--gd-text-sec); font-size: 10px; } .gd-satisfaction-origin-list { display: flex; flex-direction: column; gap: 9px; } .gd-satisfaction-origin-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 13px; border: 1px solid var(--gd-border); border-radius: 11px; background: var(--gd-surface-dim); } .gd-satisfaction-origin-list span, .gd-satisfaction-origin-list strong, .gd-satisfaction-origin-list small { display: block; } .gd-satisfaction-origin-list strong { color: var(--gd-text-main); font-size: 12px; } .gd-satisfaction-origin-list small { margin-top: 2px; color: var(--gd-text-sec); font-size: 9px; } .gd-satisfaction-origin-list b { color: var(--gd-emerald); font-size: 22px; } .gd-satisfaction-trend { display: grid; grid-template-columns: repeat(6, minmax(40px, 1fr)); align-items: end; gap: 9px; min-height: 215px; padding: 18px 8px 0; border-bottom: 1px solid var(--gd-border); } .gd-satisfaction-trend > div { display: grid; grid-template-rows: 150px auto auto; align-items: end; justify-items: center; gap: 5px; min-width: 0; } .gd-satisfaction-trend i { width: min(28px, 70%); height: var(--gd-nps-height); min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #a8e63b, var(--gd-emerald)); } .gd-satisfaction-trend strong { color: var(--gd-text-main); font-size: 11px; } .gd-satisfaction-trend small { max-width: 62px; overflow: hidden; color: var(--gd-text-sec); font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .gd-satisfaction-table-wrap { max-width: 100%; overflow-x: auto; } .gd-satisfaction-table-wrap table { width: 100%; min-width: 820px; border-collapse: collapse; } .gd-satisfaction-table-wrap th, .gd-satisfaction-table-wrap td { padding: 12px 13px; border-bottom: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; text-align: left; vertical-align: top; } .gd-satisfaction-table-wrap th { color: var(--gd-text-sec); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; } .gd-satisfaction-table-wrap td strong { display: block; color: var(--gd-text-main); font-size: 12px; } .gd-satisfaction-followup { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: rgba(168, 230, 59, .12); color: var(--gd-emerald); font-size: 8px; font-weight: 800; } .gd-nps-result { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--gd-border); border-radius: 999px; background: var(--gd-surface-dim); color: var(--gd-text-main); font-size: 9px; font-weight: 750; white-space: nowrap; } .gd-nps-result--promotor { border-color: rgba(53, 211, 153, .28); background: rgba(53, 211, 153, .1); color: #55dfad; } .gd-nps-result--pasivo { border-color: rgba(245, 166, 35, .28); background: rgba(245, 166, 35, .1); color: #f7ba55; } .gd-nps-result--detractor { border-color: rgba(239, 91, 91, .28); background: rgba(239, 91, 91, .1); color: #ff8989; } .gd-muted { color: var(--gd-text-sec); opacity: .75; } /* Página pública de respuesta. */ .gd-experience-page, .gd-experience-page *, .gd-experience-page *::before, .gd-experience-page *::after { box-sizing: border-box; } .gd-experience-page { --gde-bg: #0d1708; --gde-card: #182a10; --gde-surface: #111e0b; --gde-line: rgba(189, 238, 91, .18); --gde-lime: #a8e63b; --gde-text: #f8fbf3; --gde-muted: #aab5a2; width: 100%; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 30px 16px; background: radial-gradient(circle at 50% 0, rgba(168, 230, 59, .15), transparent 40%), var(--gde-bg); color: var(--gde-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .gd-experience-card { width: min(720px, 100%); padding: clamp(23px, 5vw, 48px); border: 1px solid var(--gde-line); border-radius: 24px; background: rgba(24, 42, 16, .94); box-shadow: 0 28px 80px rgba(0, 0, 0, .35); } .gd-experience-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 35px; color: var(--gde-text) !important; font-size: 17px; font-weight: 800; text-decoration: none !important; } .gd-experience-brand img { width: 36px; height: 36px; object-fit: contain; } .gd-experience-heading > span { color: var(--gde-lime); font-size: 10px; font-weight: 850; letter-spacing: .12em; } .gd-experience-heading h1, .gd-experience-state h1, .gd-experience-state h2 { margin: 8px 0 12px; color: var(--gde-text); font-size: clamp(28px, 6vw, 43px); letter-spacing: -.04em; line-height: 1.08; } .gd-experience-heading p, .gd-experience-state p { margin: 0; color: var(--gde-muted); font-size: 14px; line-height: 1.65; } #gd-experience-form { display: flex; flex-direction: column; gap: 23px; margin-top: 32px; } .gd-experience-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .gd-nps-fieldset, .gd-protection-choice { margin: 0; padding: 0; border: 0; } .gd-nps-fieldset legend, .gd-protection-choice legend, .gd-experience-field > span { display: block; margin-bottom: 12px; color: var(--gde-text); font-size: 13px; font-weight: 700; line-height: 1.5; } .gd-experience-field small { color: var(--gde-muted); font-weight: 400; } .gd-nps-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; } .gd-nps-scale label, .gd-protection-choice label { cursor: pointer; } .gd-nps-scale input, .gd-protection-choice input { position: absolute; opacity: 0; pointer-events: none; } .gd-nps-scale span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--gde-line); border-radius: 10px; background: var(--gde-surface); color: var(--gde-muted); font-size: 13px; font-weight: 750; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .gd-nps-scale label:hover span, .gd-nps-scale input:focus-visible + span, .gd-nps-scale input:checked + span { border-color: var(--gde-lime); background: var(--gde-lime); color: #142006; transform: translateY(-2px); } .gd-nps-labels { display: flex; justify-content: space-between; margin-top: 7px; color: var(--gde-muted); font-size: 9px; } .gd-experience-field textarea { width: 100%; min-height: 120px; resize: vertical; padding: 13px 14px; border: 1px solid var(--gde-line); border-radius: 12px; background: var(--gde-surface); color: var(--gde-text); font: inherit; font-size: 14px; outline: none; } .gd-experience-field textarea:focus { border-color: var(--gde-lime); box-shadow: 0 0 0 3px rgba(168, 230, 59, .1); } .gd-experience-check { display: flex; align-items: flex-start; gap: 10px; color: var(--gde-muted); font-size: 12px; line-height: 1.5; cursor: pointer; } .gd-experience-check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--gde-lime); } .gd-protection-choice { display: grid; gap: 10px; } .gd-protection-choice legend { margin-bottom: 13px; } .gd-protection-choice label > span { display: flex; flex-direction: column; gap: 3px; padding: 16px; border: 1px solid var(--gde-line); border-radius: 13px; background: var(--gde-surface); transition: border-color .15s ease, background .15s ease; } .gd-protection-choice strong { color: var(--gde-text); font-size: 13px; } .gd-protection-choice small { color: var(--gde-muted); font-size: 10px; } .gd-protection-choice input:checked + span, .gd-protection-choice input:focus-visible + span { border-color: var(--gde-lime); background: rgba(168, 230, 59, .09); } .gd-experience-submit { min-height: 52px; padding: 12px 22px; border: 0; border-radius: 13px; background: var(--gde-lime); color: #142006; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(124, 184, 33, .18); } .gd-experience-submit:hover { filter: brightness(1.06); } .gd-experience-submit:disabled { cursor: wait; opacity: .58; } .gd-experience-message { min-height: 20px; margin: -11px 0 0; color: var(--gde-lime); font-size: 11px; text-align: center; } .gd-experience-message.is-error { color: #ff8989; } .gd-experience-state { display: flex; min-height: 290px; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .gd-experience-state > span { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 14px; border: 1px solid var(--gde-line); border-radius: 50%; background: rgba(168, 230, 59, .08); color: var(--gde-lime); font-size: 27px; font-weight: 800; } .gd-experience-state--success > span { background: var(--gde-lime); color: #142006; } @media (max-width: 1100px) { .gd-satisfaction-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .gd-automation-row, .gd-automation-row:not(:has(.gd-reminder-days)) { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .gd-automation-row .gd-reminder-days { grid-column: 1 / -1; } .gd-notification-svg { width: 22px; height: 22px; } .gd-satisfaction-intro { align-items: stretch; flex-direction: column; padding: 19px; } .gd-satisfaction-intro .gd-btn { width: 100%; } .gd-satisfaction-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-satisfaction-kpis article { min-height: 118px; padding: 14px; } .gd-satisfaction-grid { grid-template-columns: 1fr; } .gd-satisfaction-card { padding: 16px; } .gd-satisfaction-trend { gap: 5px; overflow-x: auto; } .gd-experience-card { padding: 24px 18px; border-radius: 19px; } .gd-experience-brand { margin-bottom: 28px; } .gd-nps-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gd-nps-scale label:nth-child(n+7) { grid-row: 2; } .gd-nps-labels { display: none; } } @media (max-width: 480px) { .gd-satisfaction-kpis { grid-template-columns: 1fr; } .gd-satisfaction-kpis article { min-height: 104px; } .gd-nps-scale span { min-height: 43px; } } /* ===================================================================== * GUANI HUB 1.17.0 — Plantillas manuales personalizadas * ===================================================================== */ .gd-inline-action-icon, .gd-custom-template-add svg, .gd-custom-template-remove svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-btn-custom-template { min-width: 0; } .gd-btn-custom-template > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-custom-template-section { display: grid; gap: 15px; margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--gd-border); } .gd-custom-template-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .gd-custom-template-heading > div { display: grid; gap: 4px; } .gd-custom-template-heading strong { color: var(--gd-text-main); font-size: 14px; } .gd-custom-template-heading small, .gd-custom-template-card .gd-template-meta small { color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } .gd-custom-template-add { justify-content: center; white-space: nowrap; } .gd-custom-template-add:disabled { cursor: not-allowed; opacity: .5; } .gd-custom-template-list { display: grid; gap: 12px; } .gd-custom-template-card { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--gd-border); border-radius: 13px; background: color-mix(in srgb, var(--gd-input-bg) 74%, transparent); } .gd-custom-template-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; } .gd-custom-template-card-head label { display: grid; gap: 7px; color: var(--gd-text-sec); padding: 5px 8px; border: 1px solid var(--gd-border); border-radius: 999px; background: var(--gd-input-bg); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .gd-custom-template-card input, .gd-custom-template-card textarea { width: 100%; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; outline: none; } .gd-custom-template-card input { min-height: 44px; padding: 10px 12px; font-size: 12px; } .gd-custom-template-card textarea { min-height: 126px; padding: 12px 13px; resize: vertical; font-size: 12px; line-height: 1.6; } .gd-custom-template-card input:focus, .gd-custom-template-card textarea:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 3px rgba(135, 191, 20, .09); } .gd-custom-template-remove { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(239, 91, 91, .22); border-radius: 10px; background: rgba(239, 91, 91, .08); color: var(--gd-danger); cursor: pointer; } .gd-custom-template-remove:hover, .gd-custom-template-remove:focus-visible { border-color: var(--gd-danger); background: rgba(239, 91, 91, .14); outline: none; } .gd-custom-template-empty { margin: 0; padding: 18px; border: 1px dashed var(--gd-border); border-radius: 12px; color: var(--gd-text-sec); font-size: 11px; text-align: center; } .gd-custom-template-empty[hidden] { display: none !important; } @media (max-width: 640px) { .gd-custom-template-heading { align-items: stretch; flex-direction: column; } .gd-custom-template-add { width: 100%; } .gd-custom-template-card { padding: 14px; } } /* ===================================================================== * 98. LEGALES EN APP Y REGISTRO VINCULADO A PLANES — VERSIÓN 1.18.0 * ===================================================================== */ .gd-app-legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 32px 22px; padding: 14px 4px 0; border-top: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 10px; } .gd-app-legal-footer nav, .gd-access-legal-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .gd-app-legal-footer a, .gd-access-legal-links a, .gd-app-legal-footer a:visited, .gd-access-legal-links a:visited { color: var(--gd-text-sec) !important; text-decoration: none !important; } .gd-app-legal-footer a:hover, .gd-app-legal-footer a:focus-visible, .gd-access-legal-links a:hover, .gd-access-legal-links a:focus-visible { color: var(--gd-emerald) !important; } .gd-access-legal-links { justify-content: flex-end; } .gd-registration-plan-section { display: grid; gap: 14px; margin: 8px 0 20px; padding: 18px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); background: color-mix(in srgb, var(--gd-card-bg) 80%, transparent); } .gd-registration-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .gd-registration-plan-heading span { color: var(--gd-emerald); font-size: 9px; font-weight: 800; letter-spacing: .1em; } .gd-registration-plan-heading h3 { margin: 3px 0 0; color: var(--gd-text-main); font-size: 17px; } .gd-registration-plan-heading p { max-width: 250px; margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; text-align: right; } .gd-registration-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid var(--gd-border); border-radius: 11px; background: var(--gd-input-bg); } .gd-registration-period button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; } .gd-registration-period button.gd-activo { background: var(--gd-emerald); color: #142006; } .gd-registration-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gd-registration-plan-card { position: relative; display: flex; min-width: 0; min-height: 126px; flex-direction: column; gap: 5px; padding: 13px; border: 1px solid var(--gd-border); border-radius: 12px; background: var(--gd-input-bg); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .gd-registration-plan-card:hover, .gd-registration-plan-card:focus-within { border-color: rgba(135, 191, 20, .5); transform: translateY(-1px); } .gd-registration-plan-card.gd-activo { border-color: var(--gd-emerald); background: rgba(135, 191, 20, .1); box-shadow: 0 0 0 2px rgba(135, 191, 20, .08); } .gd-registration-plan-card input { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; accent-color: var(--gd-emerald); } .gd-registration-plan-card > span { padding-right: 24px; color: var(--gd-text-main); font-size: 12px; font-weight: 800; } .gd-registration-plan-card strong { color: var(--gd-emerald); font-size: 15px; } .gd-registration-plan-card small { margin-top: auto; color: var(--gd-text-sec); font-size: 9px; line-height: 1.4; } .gd-registration-plan-summary { margin: 0; color: var(--gd-emerald); font-size: 11px; font-weight: 650; text-align: center; } .gd-registration-legal-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: var(--gd-text-sec); font-size: 11px; line-height: 1.55; cursor: pointer; } .gd-registration-legal-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gd-emerald); } .gd-registration-legal-consent a, .gd-registration-legal-consent a:visited { color: var(--gd-emerald) !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 2px; } @media (max-width: 767px) { .gd-app-legal-footer { align-items: center; flex-direction: column; margin-inline: 16px; text-align: center; } .gd-access-legal-links { justify-content: center; } .gd-registration-plan-heading { flex-direction: column; } .gd-registration-plan-heading p { max-width: none; text-align: left; } .gd-registration-plan-grid { grid-template-columns: 1fr; } .gd-registration-plan-card { min-height: 105px; } } @media (min-width: 1025px) { #gd-registro-screen .gd-split-form { justify-content: flex-start; overflow-y: auto; padding-block: 40px; } #gd-registro-screen .gd-form-container { width: 100%; max-width: 560px; margin: auto 0 28px; } #gd-registro-screen .gd-split-footer { position: static; align-self: flex-end; margin-top: auto; } } /* ===================================================================== * 98. PLAN Y SUSCRIPCIÓN — VERSIÓN 1.19.0 * ===================================================================== */ .gd-subscription-summary { margin-bottom: 20px; padding: 22px; border: 1px solid rgba(135, 191, 20, .18); border-radius: 16px; background: radial-gradient(circle at 92% 10%, rgba(135, 191, 20, .11), transparent 34%), var(--gd-card-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); } .gd-subscription-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; } .gd-subscription-summary-head > div > span, .gd-subscription-modules > span { display: block; margin-bottom: 5px; color: var(--gd-emerald); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .gd-subscription-summary-head h4 { margin: 0 0 5px; color: var(--gd-text-main); font-size: 22px; letter-spacing: -.025em; } .gd-subscription-summary-head p { margin: 0; color: var(--gd-text-sec); font-size: 12px; } .gd-subscription-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; border: 1px solid rgba(135, 191, 20, .24); border-radius: 999px; background: rgba(135, 191, 20, .1); color: var(--gd-emerald); font-size: 10px; font-weight: 800; text-transform: uppercase; } .gd-subscription-status--pendiente_pago { border-color: rgba(245, 166, 35, .28); background: rgba(245, 166, 35, .1); color: var(--gd-gold); } .gd-subscription-status--suspendido { border-color: rgba(239, 91, 91, .28); background: rgba(239, 91, 91, .1); color: var(--gd-danger); } .gd-subscription-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .gd-subscription-facts > div { display: grid; gap: 4px; min-width: 0; padding: 13px; border: 1px solid var(--gd-border); border-radius: 11px; background: color-mix(in srgb, var(--gd-input-bg) 78%, transparent); } .gd-subscription-facts span, .gd-subscription-usage-item span { color: var(--gd-text-sec); font-size: 9px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .gd-subscription-facts strong { min-width: 0; color: var(--gd-text-main); font-size: 1.3rem; line-height: 1.35; overflow-wrap: anywhere; text-align: center; } .gd-subscription-modules { margin-bottom: 18px; } .gd-subscription-modules > div { display: flex; flex-wrap: wrap; gap: 7px; } .gd-subscription-modules b { padding: 5px 9px; border: 1px solid rgba(135, 191, 20, .17); border-radius: 999px; background: rgba(135, 191, 20, .07); color: var(--gd-text-main); font-size: 9px; font-weight: 650; } .gd-subscription-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; padding-top: 17px; border-top: 1px solid var(--gd-border); } .gd-subscription-usage-item > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .gd-subscription-usage-item strong { color: var(--gd-text-main); font-size: 10px; white-space: nowrap; } .gd-subscription-usage-item > i { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .16); } .gd-subscription-usage-item > i > b { display: block; height: 100%; border-radius: inherit; background: var(--gd-emerald); } .gd-subscription-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--gd-border); } .gd-subscription-summary-footer small { color: var(--gd-text-sec); font-size: 10px; } .gd-subscription-summary-footer a, .gd-subscription-summary-footer a:visited { color: var(--gd-emerald) !important; font-size: 11px; font-weight: 750; text-decoration: none !important; white-space: nowrap; } .gd-subscription-summary-footer a:hover, .gd-subscription-summary-footer a:focus-visible { text-decoration: underline !important; } .gd-plan-upgrade-note { padding: 18px; border: 1px dashed rgba(135, 191, 20, .28); border-radius: 13px; background: rgba(135, 191, 20, .055); text-align: center; } .gd-plan-upgrade-note strong { display: block; margin-bottom: 5px; color: var(--gd-text-main); font-size: 13px; } .gd-plan-upgrade-note p { max-width: 560px; margin: 0 auto; color: var(--gd-text-sec); font-size: 11px; line-height: 1.55; } body.light-mode .gd-subscription-summary { border-color: rgba(73, 112, 11, .16); background: radial-gradient(circle at 92% 10%, rgba(135, 191, 20, .08), transparent 34%), #fff; } @media (max-width: 900px) { .gd-subscription-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gd-subscription-summary { padding: 17px; } .gd-subscription-summary-head, .gd-subscription-summary-footer { align-items: flex-start; flex-direction: column; } .gd-subscription-facts, .gd-subscription-usage { grid-template-columns: 1fr; } .gd-subscription-summary-footer a { white-space: normal; } } .gd-subscription-plan-notice { margin: -5px 0 18px; padding: 10px 12px; border: 1px solid rgba(245, 166, 35, .22); border-radius: 10px; background: rgba(245, 166, 35, .075); color: var(--gd-gold); font-size: 10px; line-height: 1.5; } .gd-subscription-plan-notice--error { border-color: rgba(239, 91, 91, .24); background: rgba(239, 91, 91, .075); color: var(--gd-danger); } .gd-plan-access-blocked { width: min(560px, calc(100% - 32px)); margin: 12vh auto; padding: 28px; border: 1px solid rgba(239, 91, 91, .24); border-radius: 16px; background: var(--gd-card-bg); color: var(--gd-text-main); font-family: 'Inter', sans-serif; text-align: center; } .gd-plan-access-blocked strong { display: block; margin-bottom: 8px; font-size: 18px; } .gd-plan-access-blocked p { margin: 0; color: var(--gd-text-sec); font-size: 13px; line-height: 1.6; } .gd-subscription-plan-notice--override { border-color: rgba(59, 130, 246, .24); background: rgba(59, 130, 246, .075); color: #78a9ff; } /* ===================================================================== * 101. GOOGLE CALENDAR — SCOPES LIMITADOS Y DISPONIBILIDAD FREEBUSY * ===================================================================== */ .gd-google-status--requiere_reconexion { border-color: rgba(245, 166, 35, 0.52); background: rgba(245, 166, 35, 0.075); } .gd-google-status--requiere_reconexion strong { color: var(--gd-gold); } .gd-google-status-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .gd-google-status-actions form { margin: 0; } .gd-agenda-sync--conflict, .gd-agenda-sync--pending_configuration, .gd-alerta-texto { color: var(--gd-gold); } .gd-agenda-conflict[hidden] { display: none !important; } .gd-agenda-conflict { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 15px; border: 1px solid rgba(245, 166, 35, 0.42); border-radius: var(--gd-radius-md); background: rgba(245, 166, 35, 0.09); } .gd-agenda-conflict-icon { width: 25px; height: 25px; fill: none; stroke: var(--gd-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-agenda-conflict-copy { display: grid; gap: 4px; min-width: 0; } .gd-agenda-conflict-copy strong { color: var(--gd-text-main); font-size: 13px; } .gd-agenda-conflict-copy p { margin: 0; color: var(--gd-text-sec); font-size: 12px; line-height: 1.55; } .gd-agenda-conflict-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } @media (max-width: 780px) { .gd-google-status-actions { justify-content: flex-start; } .gd-agenda-conflict-actions { align-items: stretch; flex-direction: column; } .gd-agenda-conflict-actions .gd-btn { width: 100%; } } .gd-agenda-oauth-notice { padding: 12px 14px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); font-size: 12px; line-height: 1.55; } .gd-agenda-oauth-notice--exito { border-color: rgba(135, 191, 20, 0.34); background: rgba(135, 191, 20, 0.08); color: var(--gd-brand-accent, var(--gd-emerald)); } .gd-agenda-oauth-notice--alerta { border-color: rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.08); color: var(--gd-gold); } .gd-agenda-oauth-notice--error { border-color: rgba(239, 91, 91, 0.36); background: rgba(239, 91, 91, 0.08); color: var(--gd-danger); } /* ===================================================================== * 102. GOOGLE MEET — ENLACE, ESTADOS Y ACCIONES (VERSIÓN 1.21.0) * ===================================================================== */ .gd-agenda-meet-status { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--gd-border); border-radius: 10px; background: color-mix(in srgb, var(--gd-input-bg) 82%, transparent); color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-agenda-meet-status--pending, .gd-agenda-meet-panel--pending { border-color: rgba(245, 166, 35, .35); background: rgba(245, 166, 35, .075); } .gd-agenda-meet-status--success, .gd-agenda-meet-panel--success { border-color: rgba(135, 191, 20, .35); background: rgba(135, 191, 20, .075); } .gd-agenda-meet-status--failed, .gd-agenda-meet-panel--failed { border-color: rgba(239, 91, 91, .35); background: rgba(239, 91, 91, .075); } .gd-agenda-meet-status--inactive, .gd-agenda-meet-panel--inactive { opacity: .72; border-color: var(--gd-border); background: color-mix(in srgb, var(--gd-input-bg) 74%, transparent); } .gd-agenda-meet-panel[hidden] { display: none !important; } .gd-agenda-meet-panel { display: grid; gap: 11px; padding: 15px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); } .gd-agenda-meet-panel-head, .gd-agenda-meet-panel-head > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; } .gd-agenda-meet-panel-head strong { color: var(--gd-text-main); font-size: 14px; } .gd-agenda-meet-panel-head span { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--gd-card-bg) 82%, transparent); color: var(--gd-text-sec); font-size: 10px; font-weight: 750; } .gd-agenda-meet-panel > p { margin: 0; color: var(--gd-text-sec); font-size: 12px; line-height: 1.55; } .gd-agenda-meet-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .gd-agenda-meet-actions [hidden] { display: none !important; } .gd-agenda-item-actions .gd-btn { white-space: normal; } @media (max-width: 640px) { .gd-agenda-meet-actions { align-items: stretch; flex-direction: column; } .gd-agenda-meet-actions .gd-btn, .gd-agenda-meet-actions a.gd-btn { width: 100%; } } /* ===================================================================== * 112. SEGUIMIENTOS OPERATIVOS 1.23.0 — BANDEJA Y FORMULARIOS CONTEXTUALES * ===================================================================== */ .gd-followups, .gd-followups * { box-sizing: border-box; } .gd-followups { --gd-followup-accent: var(--gd-brand-accent, var(--gd-emerald, #87bf14)); --gd-followup-soft: color-mix(in srgb, var(--gd-followup-accent) 13%, transparent); --gd-followup-danger: #ef6666; --gd-followup-warning: #e5b84d; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .gd-followups.is-loading { opacity: .7; pointer-events: none; } .gd-followups-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-followups-icon.is-back { transform: rotate(180deg); } .gd-followups-head, .gd-followups-card-head, .gd-followups-modal-head, .gd-followups-modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .gd-followups-eyebrow { display: inline-block; margin-bottom: 7px; color: var(--gd-followup-accent); font-size: 9px; font-weight: 850; letter-spacing: .13em; } .gd-followups-head h3, .gd-followups-worklist h4, .gd-followups-modal-head h4 { margin: 0; color: var(--gd-text-main); } .gd-followups-head h3 { font-size: clamp(25px, 3vw, 34px); } .gd-followups-head p, .gd-followups-modal-head p { margin: 6px 0 0; color: var(--gd-text-sec); font-size: 13px; line-height: 1.55; } .gd-followups-head .gd-boton { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* Resumen clickeable */ .gd-followups-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .gd-followups-summary > button { appearance: none; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-card-bg); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.07); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .gd-followups-summary > button:hover, .gd-followups-summary > button:focus-visible, .gd-followups-summary > button.is-active { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gd-followup-accent) 55%, var(--gd-border)); box-shadow: 0 13px 28px rgba(0,0,0,.12); outline: none; } .gd-followups-summary > button.is-danger .gd-followups-summary-icon { background: rgba(239,102,102,.13); color: var(--gd-followup-danger); } .gd-followups-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--gd-followup-soft); color: var(--gd-followup-accent); } .gd-followups-summary strong, .gd-followups-summary small { display: block; } .gd-followups-summary strong { color: var(--gd-text-main); font-size: 24px; line-height: 1; } .gd-followups-summary small { margin-top: 5px; color: var(--gd-text-sec); font-size: 10px; } /* Barra operativa */ .gd-followups-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .gd-followups-view-tabs { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--gd-border); border-radius: 12px; background: color-mix(in srgb, var(--gd-card-bg) 82%, transparent); overflow-x: auto; scrollbar-width: none; } .gd-followups-view-tabs::-webkit-scrollbar { display: none; } .gd-followups-view-tabs button { min-height: 36px; padding: 8px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--gd-text-sec); font: inherit; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; } .gd-followups-view-tabs button:hover, .gd-followups-view-tabs button.is-active { background: var(--gd-followup-soft); color: var(--gd-followup-accent); } .gd-followups-search { position: relative; width: min(360px, 100%); } .gd-followups-search .gd-followups-icon { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--gd-text-sec); pointer-events: none; } .gd-followups-search input { width: 100%; min-height: 44px; padding: 10px 13px 10px 40px; border: 1px solid var(--gd-border); border-radius: 12px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 12px; } .gd-followups-search input:focus { border-color: var(--gd-followup-accent); outline: 3px solid color-mix(in srgb, var(--gd-followup-accent) 22%, transparent); } .gd-followups-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 11px; padding: 13px; border: 1px solid var(--gd-border); border-radius: 14px; background: color-mix(in srgb, var(--gd-card-bg) 86%, transparent); } .gd-followups-filters label, .gd-followups-form-grid label, .gd-followups-correction { display: grid; gap: 7px; color: var(--gd-text-sec); font-size: 10px; font-weight: 750; } .gd-followups-filters select, .gd-followups-form-grid input, .gd-followups-form-grid select, .gd-followups-form-grid textarea, .gd-followups-correction textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 12px; } .gd-followups-form-grid textarea, .gd-followups-correction textarea { min-height: 88px; resize: vertical; } .gd-followups-filters select:focus, .gd-followups-form-grid input:focus, .gd-followups-form-grid select:focus, .gd-followups-form-grid textarea:focus, .gd-followups-correction textarea:focus { border-color: var(--gd-followup-accent); outline: 3px solid color-mix(in srgb, var(--gd-followup-accent) 22%, transparent); } .gd-followups-form-grid input:disabled, .gd-followups-form-grid select:disabled { opacity: .62; cursor: not-allowed; } .gd-followups-filters .gd-boton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } /* Lista operativa */ .gd-followups-worklist, .gd-followups-history-panel { min-width: 0; border: 1px solid var(--gd-border); border-radius: 17px; background: var(--gd-card-bg); box-shadow: 0 12px 32px rgba(0,0,0,.07); } .gd-followups-worklist { padding: 18px; } .gd-followups-card-head { margin-bottom: 14px; } .gd-followups-card-head h4 { font-size: 16px; } .gd-followups-card-head > div > span, .gd-followups-card-hint { color: var(--gd-text-sec); font-size: 10px; } .gd-followups-card-hint { text-align: right; } .gd-followups-list-head, .gd-followups-list-row { display: grid; grid-template-columns: 125px minmax(220px, 1.55fr) minmax(170px, 1fr) minmax(135px, .8fr) 105px minmax(180px, auto); align-items: center; gap: 12px; } .gd-followups-list-head { padding: 0 12px 9px; color: var(--gd-text-sec); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .gd-followups-list-body { display: grid; gap: 7px; } .gd-followups-list-row { position: relative; padding: 13px 12px; border: 1px solid var(--gd-border); border-left: 3px solid var(--gd-followup-accent); border-radius: 12px; background: color-mix(in srgb, var(--gd-input-bg) 74%, transparent); transition: border-color .18s ease, background .18s ease, transform .18s ease; } .gd-followups-list-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--gd-followup-accent) 38%, var(--gd-border)); background: color-mix(in srgb, var(--gd-followup-soft) 30%, var(--gd-input-bg)); } .gd-followups-list-row.is-overdue { border-left-color: var(--gd-followup-danger); } .gd-followups-list-row.is-no_next { border-left-color: var(--gd-followup-warning); } .gd-followups-due-cell strong, .gd-followups-due-cell small, .gd-followups-main-cell > strong, .gd-followups-main-cell > small, .gd-followups-client-cell strong, .gd-followups-client-cell small { display: block; } .gd-followups-due-cell strong { color: var(--gd-text-main); font-size: 11px; } .gd-followups-due-cell small { margin-top: 4px; color: var(--gd-text-sec); font-size: 9px; } .gd-followups-list-row.is-overdue .gd-followups-due-cell strong { color: #ff8989; } .gd-followups-main-cell { min-width: 0; } .gd-followups-main-cell > strong { margin-top: 7px; color: var(--gd-text-main); font-size: 12px; } .gd-followups-main-cell > small { margin-top: 4px; overflow: hidden; color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-row-labels, .gd-followups-client-cell, .gd-followups-owner-cell, .gd-followups-row-actions { display: flex; align-items: center; gap: 7px; min-width: 0; } .gd-followups-client-cell, .gd-followups-owner-cell { color: var(--gd-text-sec); font-size: 10px; } .gd-followups-client-cell .gd-followups-icon, .gd-followups-owner-cell .gd-followups-icon { color: var(--gd-followup-accent); } .gd-followups-client-cell span, .gd-followups-owner-cell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-client-cell strong { overflow: hidden; color: var(--gd-text-main); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-client-cell small { margin-top: 3px; color: var(--gd-text-sec); font-size: 8px; } .gd-followups-module, .gd-followups-status-badge, .gd-followups-result, .gd-followups-system, .gd-followups-priority { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 5px 8px; border-radius: 999px; background: var(--gd-followup-soft); color: var(--gd-followup-accent); font-size: 8px; font-weight: 850; line-height: 1; } .gd-followups-priority { background: rgba(255,255,255,.055); color: var(--gd-text-sec); } .gd-followups-priority.priority-alta, .gd-followups-priority.priority-urgente { background: rgba(239,102,102,.12); color: #ff8e8e; } .gd-followups-status-badge { background: rgba(255,255,255,.055); color: var(--gd-text-sec); } .gd-followups-list-row.is-overdue .gd-followups-status-badge { background: rgba(239,102,102,.12); color: #ff8e8e; } .gd-followups-state-cell { display: flex; justify-content: flex-start; } .gd-followups-row-actions { justify-content: flex-end; } .gd-followups-primary-action, .gd-followups-secondary-action, .gd-followups-pagination button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 33px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--gd-followup-accent) 35%, var(--gd-border)); border-radius: 8px; background: var(--gd-followup-soft); color: var(--gd-followup-accent); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; white-space: nowrap; } .gd-followups-secondary-action { border-color: var(--gd-border); background: transparent; color: var(--gd-text-sec); } .gd-followups-primary-action:hover, .gd-followups-secondary-action:hover, .gd-followups-pagination button:hover { border-color: var(--gd-followup-accent); color: var(--gd-followup-accent); } .gd-followups-primary-action:disabled, .gd-followups-pagination button:disabled { opacity: .45; cursor: not-allowed; } .gd-followups-pagination { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 14px; } .gd-followups-pagination span { color: var(--gd-text-sec); font-size: 10px; } /* Historial colapsado */ .gd-followups-history-panel { overflow: hidden; } .gd-followups-history-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; cursor: pointer; list-style: none; } .gd-followups-history-panel > summary::-webkit-details-marker { display: none; } .gd-followups-history-panel > summary > span:first-child { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; } .gd-followups-history-panel > summary .gd-followups-icon { grid-row: 1 / 3; color: var(--gd-followup-accent); } .gd-followups-history-panel > summary strong { color: var(--gd-text-main); font-size: 13px; } .gd-followups-history-panel > summary small, .gd-followups-history-panel > summary > span:last-child { color: var(--gd-text-sec); font-size: 9px; } .gd-followups-history-panel[open] > summary { border-bottom: 1px solid var(--gd-border); } .gd-followups-history-panel > [data-activity-list] { padding: 12px 16px 16px; } .gd-followups-activity-list { display: grid; gap: 7px; } .gd-followups-activity { border: 1px solid var(--gd-border); border-radius: 11px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); overflow: hidden; } .gd-followups-activity > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; } .gd-followups-activity > summary::-webkit-details-marker { display: none; } .gd-followups-activity > summary > .gd-followups-icon { color: var(--gd-text-sec); } .gd-followups-activity[open] > summary > .gd-followups-icon { transform: rotate(90deg); } .gd-followups-activity-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--gd-followup-accent); box-shadow: 0 0 0 3px var(--gd-followup-soft); } .gd-followups-activity.is-automatic .gd-followups-activity-mark { background: #64afe8; box-shadow: 0 0 0 3px rgba(100,175,232,.14); } .gd-followups-activity-summary { min-width: 0; } .gd-followups-activity-summary > span { display: flex; align-items: center; gap: 7px; min-width: 0; } .gd-followups-activity-summary strong { overflow: hidden; color: var(--gd-text-main); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-activity-summary > small { display: block; margin-top: 4px; overflow: hidden; color: var(--gd-text-sec); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-activity time { color: var(--gd-text-sec); font-size: 8px; white-space: nowrap; } .gd-followups-activity-detail { display: grid; gap: 10px; padding: 0 13px 13px 41px; } .gd-followups-activity-meta, .gd-followups-files, .gd-followups-activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .gd-followups-activity-meta { color: var(--gd-text-sec); font-size: 9px; } .gd-followups-system { background: rgba(100,175,232,.13); color: #79c2f7; } .gd-followups-note, .gd-followups-amount { margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; } .gd-followups-state-change { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.035); color: var(--gd-text-sec); font-size: 9px; } .gd-followups-state-change strong { color: var(--gd-followup-accent); } .gd-followups-state-change .gd-followups-icon { width: 15px; height: 15px; } .gd-followups-file { display: inline-flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--gd-border); border-radius: 9px; color: var(--gd-text-sec) !important; font-size: 9px; text-decoration: none !important; } .gd-followups-file:hover { border-color: var(--gd-followup-accent); color: var(--gd-followup-accent) !important; } .gd-followups-file span, .gd-followups-file small { display: block; } .gd-followups-file small { margin-top: 2px; opacity: .72; } /* Modal contextual */ .gd-followups-modal { position: fixed; inset: 0; z-index: 100020; display: none; } .gd-followups-modal.is-open { display: block; } .gd-followups-modal-backdrop { position: absolute; inset: 0; background: rgba(4,9,3,.74); backdrop-filter: blur(5px); } .gd-followups-modal-panel { position: relative; width: min(860px, calc(100% - 32px)); max-height: calc(100vh - 36px); display: flex; flex-direction: column; margin: 18px auto; overflow: hidden; border: 1px solid var(--gd-border); border-radius: 20px; background: var(--gd-card-bg); box-shadow: 0 30px 80px rgba(0,0,0,.42); } .gd-followups-modal-head { padding: 18px 21px; border-bottom: 1px solid var(--gd-border); } .gd-followups-modal-head > button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--gd-border); border-radius: 10px; background: transparent; color: var(--gd-text-main); cursor: pointer; } .gd-followups-modal form { min-height: 0; display: flex; flex-direction: column; } .gd-followups-modal-body { min-height: 0; display: grid; gap: 18px; overflow-y: auto; padding: 20px; } .gd-followups-form-section { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--gd-border); border-radius: 14px; background: color-mix(in srgb, var(--gd-input-bg) 42%, transparent); } .gd-followups-section-title { display: flex; align-items: flex-start; gap: 10px; } .gd-followups-section-title > span, .gd-followups-next legend > span:first-child { width: 25px; height: 25px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: var(--gd-followup-soft); color: var(--gd-followup-accent); font-size: 10px; font-weight: 900; } .gd-followups-next legend > [data-next-step-title] { width: auto; height: auto; min-width: 0; display: inline; flex: 1 1 auto; border-radius: 0; background: transparent; color: var(--gd-text-main); font-size: 12px; font-weight: 800; line-height: 1.35; } .gd-followups-section-title strong, .gd-followups-section-title small { display: block; } .gd-followups-section-title strong { color: var(--gd-text-main); font-size: 12px; } .gd-followups-section-title small { margin-top: 4px; color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; } .gd-followups-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .gd-followups-form-grid .gd-followups-wide { grid-column: 1 / -1; } .gd-followups-form-grid small { color: var(--gd-text-sec); font-size: 8px; } .gd-followups-context-preview { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--gd-followup-accent) 25%, var(--gd-border)); border-radius: 10px; background: var(--gd-followup-soft); } .gd-followups-context-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: color-mix(in srgb, var(--gd-followup-accent) 18%, transparent); color: var(--gd-followup-accent); } .gd-followups-context-preview strong, .gd-followups-context-preview small { display: block; } .gd-followups-context-preview strong { color: var(--gd-text-main); font-size: 11px; } .gd-followups-context-preview small { margin-top: 3px; color: var(--gd-text-sec); font-size: 8px; } .gd-followups-money-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .gd-followups-status-toggle { display: inline-flex !important; align-items: center; gap: 8px !important; min-height: 42px; padding: 10px 12px; border: 1px solid var(--gd-border); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--gd-text-main) !important; } .gd-followups-status-toggle input, .gd-followups-check input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--gd-followup-accent); } .gd-followups-next { margin: 0; padding: 16px; border: 1px solid var(--gd-border); border-radius: 14px; } .gd-followups-next legend { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; color: var(--gd-text-main); font-size: 11px; font-weight: 850; } .gd-followups-check { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--gd-text-main); font-size: 11px; font-weight: 750; } .gd-followups-correction { margin-top: 0; } .gd-followups-modal-actions { padding: 14px 20px; border-top: 1px solid var(--gd-border); background: color-mix(in srgb, var(--gd-input-bg) 44%, transparent); } body.gd-modal-open { overflow: hidden; } .gd-followups-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; color: var(--gd-text-sec); text-align: center; } .gd-followups-empty .gd-followups-icon { width: 30px; height: 30px; color: var(--gd-followup-accent); } .gd-followups-empty strong { color: var(--gd-text-main); font-size: 12px; } .gd-followups-empty small { max-width: 320px; font-size: 9px; line-height: 1.5; } body.light-mode .gd-followups-summary > button, body.light-mode .gd-followups-worklist, body.light-mode .gd-followups-history-panel, body.light-mode .gd-followups-modal-panel { box-shadow: 0 12px 30px rgba(34,54,21,.08); } body.light-mode .gd-followups-list-row, body.light-mode .gd-followups-activity, body.light-mode .gd-followups-form-section { background: rgba(36,66,10,.035); } body.light-mode .gd-followups-status-badge, body.light-mode .gd-followups-priority { background: rgba(36,66,10,.07); } @media (max-width: 1180px) { .gd-followups-list-head, .gd-followups-list-row { grid-template-columns: 110px minmax(210px, 1.6fr) minmax(160px, 1fr) 110px minmax(165px, auto); } .gd-followups-list-head > :nth-child(5), .gd-followups-state-cell { display: none; } } @media (max-width: 900px) { .gd-followups-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-followups-toolbar { align-items: stretch; flex-direction: column; } .gd-followups-search { width: 100%; } .gd-followups-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-followups-filters .gd-boton { width: 100%; } .gd-followups-list-head { display: none; } .gd-followups-list-row { grid-template-columns: 105px minmax(0, 1fr) auto; grid-template-areas: "due main state" "client client client" "owner actions actions"; } .gd-followups-due-cell { grid-area: due; } .gd-followups-main-cell { grid-area: main; } .gd-followups-client-cell { grid-area: client; } .gd-followups-owner-cell { grid-area: owner; } .gd-followups-state-cell { grid-area: state; display: flex; justify-content: flex-end; } .gd-followups-row-actions { grid-area: actions; } } @media (max-width: 767px) { .gd-followups-head { align-items: stretch; flex-direction: column; } .gd-followups-head .gd-boton { width: 100%; } .gd-followups-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .gd-followups-summary > button { padding: 13px; } .gd-followups-summary-icon { width: 36px; height: 36px; } .gd-followups-summary strong { font-size: 20px; } .gd-followups-filters { grid-template-columns: 1fr; } .gd-followups-card-hint { display: none; } .gd-followups-worklist { padding: 13px; } .gd-followups-list-row { grid-template-columns: 1fr auto; grid-template-areas: "main state" "due due" "client client" "owner owner" "actions actions"; gap: 9px; padding: 12px; } .gd-followups-due-cell { display: flex; align-items: center; gap: 7px; } .gd-followups-due-cell small { margin-top: 0; } .gd-followups-row-actions { justify-content: stretch; } .gd-followups-primary-action, .gd-followups-secondary-action { flex: 1 1 auto; } .gd-followups-secondary-action span { display: inline; } .gd-followups-history-panel > summary { align-items: flex-start; } .gd-followups-history-panel > summary > span:last-child { white-space: nowrap; } .gd-followups-activity > summary { grid-template-columns: auto minmax(0,1fr) auto; } .gd-followups-activity > summary time { display: none; } .gd-followups-activity-detail { padding-left: 13px; } .gd-followups-modal-panel { width: 100%; max-height: 94dvh; margin: 6dvh 0 0; border-radius: 20px 20px 0 0; } .gd-followups-modal-body { padding: 15px; } .gd-followups-form-section, .gd-followups-next { padding: 14px; } .gd-followups-form-grid, .gd-followups-money-fields { grid-template-columns: 1fr; } .gd-followups-form-grid .gd-followups-wide { grid-column: auto; } .gd-followups-modal-actions { align-items: stretch; flex-direction: column-reverse; } .gd-followups-modal-actions .gd-boton { width: 100%; } } @media (max-width: 430px) { .gd-followups-summary { grid-template-columns: 1fr; } .gd-followups-view-tabs { width: 100%; } .gd-followups-view-tabs button { flex: 0 0 auto; } } /* ===================================================================== * 101. CONTEXTO OPERATIVO POR MÓDULO — GUANI HUB 1.24.0 * ===================================================================== */ .gd-agenda-contact-note { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--gd-brand-accent) 35%, var(--gd-border)); border-radius: 12px; background: var(--gd-brand-accent-soft); } .gd-agenda-contact-note[hidden], .gd-agenda-context-actions[hidden], [data-agenda-opportunity-field][hidden], [data-agenda-existing-contact][hidden] { display: none !important; } .gd-agenda-contact-note strong { color: var(--gd-text-main); font-size: 12px; } .gd-agenda-contact-note span { color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } .gd-agenda-purpose { width: max-content; max-width: 100%; margin-top: 8px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--gd-brand-accent) 35%, var(--gd-border)); border-radius: 999px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); font-size: 9px; font-weight: 750; } .gd-agenda-public-badge { display: inline-flex; align-items: center; width: fit-content; margin-top: 8px; padding: 5px 10px; border: 1px solid rgba(135, 191, 20, .35); border-radius: 999px; background: rgba(135, 191, 20, .12); color: #45680a; font-size: 12px; font-weight: 800; } .gd-agenda-public-origin { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #5f8d16; border-radius: 12px; background: #214516; color: #ffffff; } .gd-agenda-public-origin[hidden] { display: none; } .gd-agenda-public-origin div { display: grid; gap: 3px; min-width: 0; } .gd-agenda-public-origin strong { color: #ffffff !important; font-weight: 800; line-height: 1.35; } .gd-agenda-public-origin small { color: #eaf4df !important; line-height: 1.45; } .gd-agenda-context-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--gd-border); border-radius: 14px; background: color-mix(in srgb, var(--gd-input-bg) 78%, transparent); } .gd-agenda-context-actions > div:first-child { display: grid; gap: 3px; min-width: 0; } .gd-agenda-context-actions strong { color: var(--gd-text-main); font-size: 12px; } .gd-agenda-context-actions small { color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; } .gd-agenda-context-actions > div:last-child, .gd-context-followup-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .gd-context-followup-summary { display: grid; gap: 6px; min-width: 0; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--gd-border); border-radius: 11px; background: color-mix(in srgb, var(--gd-input-bg) 80%, transparent); } .gd-context-followup-summary > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 7px; min-width: 0; } .gd-context-followup-summary strong { color: var(--gd-brand-accent); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; } .gd-context-followup-summary span, .gd-context-followup-summary p { min-width: 0; margin: 0; color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; white-space: normal; } .gd-kanban-followup-summary { margin: 10px 0 0; } .gd-kanban-followup-summary .gd-kanban-meta { margin: 0; } .gd-kanban-card > .gd-context-followup-actions { margin-top: 10px; } .gd-kanban-card > .gd-context-followup-actions .gd-btn { flex: 1 1 120px; justify-content: center; } .gd-collections-followup-summary { grid-column: 1 / -1; margin-top: 0; } .gd-collections-action--followup { border-color: color-mix(in srgb, var(--gd-brand-accent) 42%, var(--gd-border)); color: var(--gd-brand-accent); } @media (max-width: 780px) { .gd-agenda-context-actions { align-items: stretch; flex-direction: column; } .gd-agenda-context-actions > div:last-child .gd-btn { flex: 1 1 145px; justify-content: center; } .gd-context-followup-summary > div { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 520px) { .gd-agenda-context-actions > div:last-child, .gd-context-followup-actions { display: grid; grid-template-columns: 1fr; } .gd-agenda-context-actions .gd-btn, .gd-context-followup-actions .gd-btn { width: 100%; } } /* Línea de tiempo contextual: se abre sobre el módulo operativo actual. */ .gd-followups-history { position: fixed; inset: 0; z-index: 100020; visibility: hidden; pointer-events: none; } .gd-followups-history.is-open { visibility: visible; pointer-events: auto; } .gd-followups-history__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(4, 9, 3, .68); opacity: 0; cursor: default; transition: opacity 180ms ease; } .gd-followups-history.is-open .gd-followups-history__backdrop { opacity: 1; } .gd-followups-history__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); display: flex; flex-direction: column; border-left: 1px solid var(--gd-border, rgba(189, 238, 91, .16)); background: var(--gd-bg, #0d1708); box-shadow: -24px 0 60px rgba(0, 0, 0, .34); transform: translateX(102%); transition: transform 220ms cubic-bezier(.2, .75, .25, 1); } .gd-followups-history.is-open .gd-followups-history__panel { transform: translateX(0); } .gd-followups-history__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 24px 18px; border-bottom: 1px solid var(--gd-border); background: color-mix(in srgb, var(--gd-card-bg) 92%, transparent); } .gd-followups-history__header > div { display: grid; gap: 4px; min-width: 0; } .gd-followups-history__header [data-history-module] { color: var(--gd-brand-accent, var(--gd-emerald)); font-size: 9px; font-weight: 850; letter-spacing: .08em; } .gd-followups-history__header h3 { margin: 0; color: var(--gd-text-main); font-size: 21px; line-height: 1.2; } .gd-followups-history__header p { margin: 0; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-followups-history__close { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--gd-border); border-radius: 11px; background: var(--gd-input-bg); color: var(--gd-text-main); cursor: pointer; } .gd-followups-history__close-icon { transform: rotate(45deg); } .gd-followups-history__actions { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-bottom: 1px solid var(--gd-border); } .gd-followups-history > .gd-mensaje-estado, .gd-followups-history__panel > .gd-mensaje-estado { margin: 0 24px; } .gd-followups-history__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 30px; } .gd-followups-history__section + .gd-followups-history__section { margin-top: 26px; } .gd-followups-history__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .gd-followups-history__section-head h4 { margin: 0; color: var(--gd-text-main); font-size: 13px; } .gd-followups-history__section-head span { color: var(--gd-text-sec); font-size: 9px; } .gd-followups-history__task { display: grid; gap: 8px; padding: 13px 14px; border: 1px solid var(--gd-border); border-left: 3px solid var(--gd-brand-accent, var(--gd-emerald)); border-radius: 12px; background: var(--gd-card-bg); } .gd-followups-history__task + .gd-followups-history__task { margin-top: 8px; } .gd-followups-history__task--completed, .gd-followups-history__task--cancelled { opacity: .62; border-left-color: var(--gd-text-sec); } .gd-followups-history__task--overdue { border-left-color: #ff8c7a; } .gd-followups-history__task-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .gd-followups-history__task-main strong { color: var(--gd-text-main); font-size: 11px; } .gd-followups-history__task-main span, .gd-followups-history__task-meta span, .gd-followups-history__task p { color: var(--gd-text-sec); font-size: 9px; } .gd-followups-history__task-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; } .gd-followups-history__task p { margin: 0; line-height: 1.45; } .gd-followups-history__timeline { position: relative; padding-left: 19px; } .gd-followups-history__timeline::before { content: ''; position: absolute; top: 4px; bottom: 8px; left: 5px; width: 1px; background: var(--gd-border); } .gd-followups-history__activity { position: relative; padding-bottom: 12px; } .gd-followups-history__dot { position: absolute; top: 16px; left: -18px; width: 9px; height: 9px; border: 2px solid var(--gd-bg); border-radius: 50%; background: var(--gd-brand-accent, var(--gd-emerald)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gd-brand-accent, var(--gd-emerald)) 35%, transparent); } .gd-followups-history__activity.is-automatic .gd-followups-history__dot { background: #6fa8ff; box-shadow: 0 0 0 2px rgba(111, 168, 255, .24); } .gd-followups-history__activity-card { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--gd-border); border-radius: 13px; background: var(--gd-card-bg); } .gd-followups-history__activity-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gd-followups-history__activity-card header > div { display: grid; gap: 2px; } .gd-followups-history__activity-card header strong { color: var(--gd-text-main); font-size: 11px; } .gd-followups-history__activity-card header span, .gd-followups-history__activity-card header em { color: var(--gd-text-sec); font-size: 8px; font-style: normal; } .gd-followups-history__chips { display: flex; flex-wrap: wrap; gap: 5px; } .gd-followups-history__chips span { padding: 4px 7px; border-radius: 999px; background: var(--gd-brand-accent-soft, rgba(135, 191, 20, .12)); color: var(--gd-brand-accent, var(--gd-emerald)); font-size: 8px; font-weight: 700; } .gd-followups-history__activity-card > p { margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.55; } .gd-followups-history__state { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--gd-input-bg); color: var(--gd-text-sec); font-size: 8px; } .gd-followups-history__state strong { color: var(--gd-brand-accent, var(--gd-emerald)); text-align: right; } .gd-followups-history__files { display: grid; gap: 6px; } .gd-followups-history__file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--gd-border); border-radius: 9px; color: var(--gd-text-main) !important; text-decoration: none !important; } .gd-followups-history__file span, .gd-followups-history__file small { display: block; } .gd-followups-history__file span { font-size: 9px; } .gd-followups-history__file small { color: var(--gd-text-sec); font-size: 7px; } .gd-followups-history__empty { display: grid; place-items: center; gap: 8px; min-height: 92px; padding: 18px; border: 1px dashed var(--gd-border); border-radius: 12px; color: var(--gd-text-sec); text-align: center; } .gd-followups-history__empty p { margin: 0; font-size: 9px; } .gd-followups-history__pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 24px; border-top: 1px solid var(--gd-border); } .gd-followups-history__pagination[hidden] { display: none; } .gd-followups-history__pagination button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--gd-border); border-radius: 9px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 9px; cursor: pointer; } .gd-followups-history__pagination span { color: var(--gd-text-sec); font-size: 8px; } body.gd-followups-history-open { overflow: hidden; } @media (max-width: 640px) { .gd-followups-history__panel { top: auto; left: 0; width: 100%; height: min(92dvh, 760px); border-top: 1px solid var(--gd-border); border-left: 0; border-radius: 20px 20px 0 0; transform: translateY(102%); } .gd-followups-history.is-open .gd-followups-history__panel { transform: translateY(0); } .gd-followups-history__header, .gd-followups-history__body { padding-left: 16px; padding-right: 16px; } .gd-followups-history__actions { display: grid; grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; } .gd-followups-history__actions .gd-btn { width: 100%; } .gd-followups-history__task-main, .gd-followups-history__activity-card header { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .gd-followups-history__backdrop, .gd-followups-history__panel { transition: none; } } .gd-policy-followup-summary, .gd-policy-followup-actions { margin: 0 18px 12px; } .gd-policy-followup-actions { padding-top: 10px; border-top: 1px solid var(--gd-border); } .gd-policy-followup-actions .gd-btn { flex: 1 1 135px; justify-content: center; } @media (max-width: 520px) { .gd-policy-followup-summary, .gd-policy-followup-actions { margin-right: 14px; margin-left: 14px; } } /* Hotfix 1.24.0.4: el backdrop es un botón semántico, pero no debe heredar los estados azules/hover/focus del tema Astra. */ .gd-followups-history__backdrop, .gd-followups-history__backdrop:hover, .gd-followups-history__backdrop:focus, .gd-followups-history__backdrop:focus-visible, .gd-followups-history__backdrop:active { appearance: none !important; -webkit-appearance: none !important; background-color: rgba(4, 9, 3, .68) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: transparent !important; text-decoration: none !important; filter: none !important; transform: none !important; -webkit-tap-highlight-color: transparent; user-select: none; } /* Guani Hub 1.24.1 — seguimiento contextual dentro de cada módulo */ .gd-context-followup{margin-top:12px;padding:11px;border:1px solid var(--gd-borde,#dbe5d3);border-radius:12px;background:rgba(128,190,40,.045);display:grid;gap:7px} .gd-context-followup__line{margin:0;display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.35} .gd-context-followup__line strong{color:var(--gd-verde,#78be20);font-size:10px;text-transform:uppercase;letter-spacing:.04em} .gd-context-followup__line span{overflow-wrap:anywhere} .gd-context-followup__line.is-empty span{color:#d88b32;font-weight:700} .gd-context-followup__actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px} .gd-context-followup__actions .gd-btn{min-height:32px;padding:6px 10px;font-size:11px} @media(max-width:720px){.gd-context-followup__line{grid-template-columns:1fr}.gd-context-followup__actions .gd-btn{flex:1 1 120px}} /* Guani Hub 1.24.1.1: correcciones de Cobranzas y Mis pendientes */ .gd-collections-action-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-followups, .gd-followups-shell, .gd-followups-worklist, .gd-followups-list-body, .gd-followups-list-row, .gd-followups-main-cell, .gd-followups-client-cell, .gd-followups-owner-cell, .gd-followups-row-actions { min-width: 0; max-width: 100%; box-sizing: border-box; } .gd-followups-worklist { overflow: hidden; } .gd-followups-list-row > * { min-width: 0; } .gd-followups-main-cell > strong, .gd-followups-main-cell > small, .gd-followups-client-cell strong, .gd-followups-client-cell small, .gd-followups-owner-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-followups-row-actions { flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 1280px) { .gd-followups-list-head, .gd-followups-list-row { grid-template-columns: 105px minmax(180px, 1.45fr) minmax(135px, .9fr) minmax(120px, .75fr) minmax(150px, auto); } .gd-followups-list-head > :nth-child(5), .gd-followups-state-cell { display: none; } } @media (max-width: 900px) { .gd-tab-contenido, .gd-content, .gd-followups, .gd-followups-shell { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden; } .gd-followups-list-row { width: 100%; } } @media (max-width: 767px) { html, body { max-width: 100%; } .gd-followups-worklist, .gd-followups-history-panel { width: 100%; } .gd-followups-list-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "due" "client" "owner" "state" "actions"; } .gd-followups-state-cell { justify-content: flex-start; } .gd-followups-row-actions { width: 100%; justify-content: stretch; } .gd-followups-primary-action, .gd-followups-secondary-action { min-width: 0; white-space: normal; } } /* Guani Hub 1.24.1.2: ajustes UX puntuales */ /* La póliza abierta desde el slide-over del cliente debe quedar siempre al frente. */ #gd-modal-poliza.gd-visible { z-index: 10050; } #gd-modal-poliza .gd-modal-caja { position: relative; z-index: 1; } /* Mis pendientes: la fila nunca puede crecer más que su tarjeta. */ .gd-followups-worklist, .gd-followups-list-body, .gd-followups-list-row { width: 100%; max-width: 100%; } .gd-followups-list-body { overflow: hidden; } .gd-followups-list-row { grid-template-columns: 112px minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .75fr) 88px minmax(118px, 142px); } .gd-followups-row-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; width: 100%; } .gd-followups-row-actions .gd-followups-primary-action, .gd-followups-row-actions .gd-followups-secondary-action { width: 100%; min-width: 0; max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; } @media (max-width: 1280px) { .gd-followups-list-head, .gd-followups-list-row { grid-template-columns: 100px minmax(0, 1.35fr) minmax(0, .82fr) minmax(0, .7fr) minmax(112px, 132px); } .gd-followups-row-actions { min-width: 0; } } @media (max-width: 900px) { .gd-app-shell, .gd-main, .gd-content, .gd-tab-contenido, .gd-followups, .gd-followups-shell, .gd-followups-worklist, .gd-followups-list-body { max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; } .gd-followups-list-row { transform: none !important; } } @media (max-width: 767px) { .gd-followups-list-row { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" "due" "client" "owner" "state" "actions" !important; } .gd-followups-main-cell, .gd-followups-due-cell, .gd-followups-client-cell, .gd-followups-owner-cell, .gd-followups-state-cell, .gd-followups-row-actions { width: 100%; max-width: 100%; } .gd-followups-row-actions { grid-template-columns: 1fr; } } /* Botón propio para volver arriba, disponible en toda la web. */ .gd-scroll-top { position: fixed; right: 22px; bottom: 22px; z-index: 9990; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--gd-brand-accent, #87bf14) 58%, transparent); border-radius: 12px; background: var(--gd-brand-accent, #87bf14); color: #102006; box-shadow: 0 12px 30px rgba(0, 0, 0, .24); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease, filter .2s ease; cursor: pointer; } .gd-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .gd-scroll-top:hover, .gd-scroll-top:focus, .gd-scroll-top:focus-visible, .gd-scroll-top:active { background: var(--gd-brand-accent, #87bf14); color: #102006; filter: brightness(1.08); outline: none; } .gd-scroll-top:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-brand-accent, #87bf14) 30%, transparent), 0 12px 30px rgba(0, 0, 0, .24); } .gd-scroll-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 767px) { .gd-scroll-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .gd-scroll-top { transition: none; } } /* ===================================================================== * GUANI HUB 1.24.3 — SEGUIMIENTOS GUIADOS Y CONTEXTO BLOQUEADO * ===================================================================== */ .gd-followups-locked-field { pointer-events: none; appearance: none; background: color-mix(in srgb, var(--gd-input-bg) 88%, transparent) !important; border-color: var(--gd-border) !important; color: var(--gd-text-main) !important; opacity: .82; } .gd-followups-form-grid label.is-context-locked > span::after { content: "Contexto protegido"; display: inline-flex; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(135,191,20,.12); color: var(--gd-emerald); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .gd-followups-next[hidden] { display: none !important; } .gd-followups-form-section[hidden], .gd-followups-correction[hidden] { display: none !important; } .gd-followups-modal form[data-flow-mode="schedule"] .gd-followups-check { display: none !important; } .gd-followups-modal form[data-flow-mode="schedule"] [data-schedule-section] { border-color: color-mix(in srgb, var(--gd-followup-accent) 42%, var(--gd-border)); } .gd-followups.is-loading, .gd-followups-modal-panel.is-saving { cursor: progress; } .gd-followups.is-loading::after { content: "Actualizando información…"; position: fixed; right: 24px; bottom: 24px; z-index: 100100; padding: 10px 14px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-card-bg); color: var(--gd-text-main); box-shadow: var(--gd-glass-shadow); font-size: 12px; } @media (max-width: 640px) { .gd-followups.is-loading::after { right: 14px; bottom: 92px; left: 14px; text-align: center; } } /* Guani Hub 1.24.3.1 — canal inteligente y acciones de renovación */ .gd-followups-channel-locked { cursor: default !important; border-color: color-mix(in srgb, var(--gd-emerald) 38%, var(--gd-border)) !important; background: color-mix(in srgb, var(--gd-emerald) 9%, var(--gd-input-bg)) !important; color: var(--gd-text-main) !important; font-weight: 700; pointer-events: none; } .gd-policy-followup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 14px; margin: 0; border-top: 1px solid var(--gd-border); } .gd-policy-followup-actions .gd-btn { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.25; white-space: normal; text-align: center; } .gd-policy-followup-actions .gd-policy-followup-main { grid-column: 1 / -1; background: var(--gd-emerald) !important; border-color: var(--gd-emerald) !important; color: #142006 !important; box-shadow: none; } .gd-policy-followup-actions .gd-btn--secondary { background: var(--gd-input-bg) !important; border: 1px solid var(--gd-border) !important; color: var(--gd-text-main) !important; } .gd-policy-followup-actions .gd-btn--secondary:hover, .gd-policy-followup-actions .gd-btn--secondary:focus-visible { border-color: var(--gd-emerald) !important; color: var(--gd-emerald) !important; background: color-mix(in srgb, var(--gd-emerald) 8%, var(--gd-input-bg)) !important; } @media (max-width: 520px) { .gd-policy-followup-actions { grid-template-columns: 1fr; padding-right: 14px; padding-left: 14px; } .gd-policy-followup-actions .gd-policy-followup-main { grid-column: auto; } } /* ===================================================================== * GUANI HUB 1.24.4 — RENOVACIÓN ANUAL SINCRONIZADA * ===================================================================== */ .gd-policy-renewed-badge { display: inline-flex; align-items: center; width: max-content; max-width: 100%; margin-top: 14px; padding: 6px 10px; border: 1px solid rgba(135, 191, 20, 0.34); border-radius: 999px; background: rgba(135, 191, 20, 0.12); color: var(--gd-emerald); font-size: 10px; font-weight: 750; line-height: 1.25; white-space: normal; } .gd-policy-renewed-badge::before { content: "✓"; margin-right: 6px; font-weight: 900; } /* ===================================================================== * GUANI HUB 1.24.4.3 — ICONOS DE COBRANZAS Y MODAL DE PAGO * ===================================================================== */ .gd-collections-action-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; color: currentColor; } .gd-collections-action-icon svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-payment-choice { padding: 18px; background: rgba(4, 10, 4, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .gd-payment-choice .gd-payment-choice__panel { width: min(720px, 100%); max-width: 720px; padding: 0; overflow: hidden; border: 1px solid rgba(168, 230, 59, 0.22); border-radius: 22px; background: radial-gradient(circle at 100% 0, rgba(135, 191, 20, 0.14), transparent 35%), linear-gradient(145deg, rgba(27, 44, 18, 0.98), rgba(13, 23, 8, 0.99)); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48); } .gd-payment-choice__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 14px; } .gd-payment-choice__eyebrow { display: block; margin-bottom: 7px; color: var(--gd-emerald); font-size: 9px; font-weight: 850; letter-spacing: 0.12em; } .gd-payment-choice__header h3 { margin: 0; color: var(--gd-text-main); font-size: clamp(21px, 3vw, 28px); font-weight: 780; line-height: 1.15; letter-spacing: -0.035em; } .gd-payment-choice__close { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 1px solid var(--gd-border); border-radius: 12px; background: rgba(0, 0, 0, 0.15); color: var(--gd-text-sec); font: 400 25px/1 sans-serif; cursor: pointer; } .gd-payment-choice__close:hover, .gd-payment-choice__close:focus-visible { border-color: var(--gd-emerald); color: var(--gd-emerald); outline: none; } .gd-payment-choice__copy { margin: 0; padding: 0 28px 22px; color: var(--gd-text-sec); font-size: 13px; line-height: 1.55; } .gd-payment-choice__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 28px 28px; } .gd-payment-choice__button { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 86px; padding: 16px; border: 1px solid var(--gd-border); border-radius: 15px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; text-align: left; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .gd-payment-choice__button:hover, .gd-payment-choice__button:focus-visible { transform: translateY(-2px); outline: none; } .gd-payment-choice__button--primary { border-color: rgba(168, 230, 59, 0.42); background: linear-gradient(145deg, rgba(135, 191, 20, 0.24), rgba(135, 191, 20, 0.11)); } .gd-payment-choice__button--primary:hover, .gd-payment-choice__button--primary:focus-visible { border-color: var(--gd-emerald); box-shadow: 0 12px 28px rgba(75, 126, 18, 0.18); } .gd-payment-choice__button--secondary:hover, .gd-payment-choice__button--secondary:focus-visible { border-color: rgba(168, 230, 59, 0.55); background: color-mix(in srgb, var(--gd-emerald) 8%, var(--gd-input-bg)); } .gd-payment-choice__button-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(135, 191, 20, 0.14); color: var(--gd-emerald); font-size: 20px; font-weight: 850; } .gd-payment-choice__button strong, .gd-payment-choice__button small { display: block; } .gd-payment-choice__button strong { margin-bottom: 4px; color: var(--gd-text-main); font-size: 13px; line-height: 1.3; } .gd-payment-choice__button small { color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } body.light-mode .gd-payment-choice .gd-payment-choice__panel { background: #fff; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18); } @media (max-width: 640px) { .gd-payment-choice__header { padding: 22px 20px 12px; } .gd-payment-choice__copy { padding: 0 20px 18px; } .gd-payment-choice__actions { grid-template-columns: 1fr; padding: 0 20px 22px; } .gd-payment-choice__button { min-height: 76px; } } /* ===================================================================== * 1.25.0 — CENTRO DE NOTIFICACIONES * ===================================================================== */ .gd-notification-center{position:fixed;top:14px;right:24px;z-index:100040;font-family:'Inter',sans-serif}.gd-notification-center__trigger{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--gd-border);border-radius:13px;background:color-mix(in srgb,var(--gd-card-bg) 94%,transparent);color:var(--gd-text-main);cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.18);backdrop-filter:blur(12px)}.gd-notification-center__trigger:hover,.gd-notification-center__trigger:focus-visible{border-color:var(--gd-emerald);color:var(--gd-emerald);outline:none}.gd-notification-center__trigger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gd-notification-center__trigger>span{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--gd-bg);border-radius:999px;background:var(--gd-danger);color:#fff;font-size:9px;font-weight:850}.gd-notification-center__panel{position:absolute;top:54px;right:0;width:min(390px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 84px));overflow:hidden;border:1px solid var(--gd-border);border-radius:18px;background:color-mix(in srgb,var(--gd-card-bg) 97%,#071005);box-shadow:0 26px 80px rgba(0,0,0,.42);display:flex;flex-direction:column}.gd-notification-center__panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 14px;border-bottom:1px solid var(--gd-border)}.gd-notification-center__panel>header span{display:block;margin-bottom:2px;color:var(--gd-emerald);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.gd-notification-center__panel h3{margin:0;color:var(--gd-text-main);font-size:20px}.gd-notification-center__panel>header button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--gd-border);border-radius:10px;background:transparent;color:var(--gd-text-sec);font-size:23px;cursor:pointer}.gd-notification-center__toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--gd-border);background:rgba(135,191,20,.045)}.gd-notification-center__toolbar span{color:var(--gd-text-sec);font-size:11px}.gd-notification-center__toolbar button{padding:0;border:0;background:transparent;color:var(--gd-emerald);font-size:10px;font-weight:750;cursor:pointer}.gd-notification-center__toolbar button:disabled{opacity:.45;cursor:default}.gd-notification-center__list{min-height:160px;overflow-y:auto;padding:8px}.gd-notification-center__list>p{padding:28px;color:var(--gd-text-sec);text-align:center}.gd-notification-center__item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:13px 11px;border:0;border-bottom:1px solid color-mix(in srgb,var(--gd-border) 76%,transparent);border-radius:11px;background:transparent;color:inherit;text-align:left;cursor:pointer}.gd-notification-center__item:hover,.gd-notification-center__item:focus-visible{background:rgba(135,191,20,.07);outline:none}.gd-notification-center__item.is-unread{background:rgba(135,191,20,.045)}.gd-notification-center__dot{width:7px;height:7px;margin-top:7px;border-radius:50%;background:transparent}.is-unread .gd-notification-center__dot{background:var(--gd-emerald);box-shadow:0 0 9px rgba(135,191,20,.7)}.gd-notification-center__copy{display:grid;gap:3px;min-width:0}.gd-notification-center__copy small{color:var(--gd-emerald);font-size:9px;font-weight:800;text-transform:uppercase}.gd-notification-center__copy strong{color:var(--gd-text-main);font-size:12px;line-height:1.35}.gd-notification-center__copy>span{display:-webkit-box;overflow:hidden;color:var(--gd-text-sec);font-size:10px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.gd-notification-center__copy time{color:var(--gd-text-sec);font-size:9px}.gd-notification-center__arrow{align-self:center;color:var(--gd-text-sec);font-size:22px}.gd-notification-center__empty{display:grid;place-items:center;gap:5px;padding:42px 20px;text-align:center}.gd-notification-center__empty strong{color:var(--gd-text-main)}.gd-notification-center__empty span{color:var(--gd-text-sec);font-size:11px}.gd-notification-center__panel>footer{padding:12px 16px;border-top:1px solid var(--gd-border)}.gd-notification-center__panel>footer button{width:100%;min-height:40px;border:1px solid rgba(135,191,20,.28);border-radius:10px;background:rgba(135,191,20,.09);color:var(--gd-emerald);font-size:11px;font-weight:800;cursor:pointer}.gd-notification-center__backdrop{position:fixed;inset:0;z-index:-1;background:transparent}.gd-notification-center-open{overflow:hidden} @media(max-width:1024px){.gd-notification-center{top:10px;right:64px}.gd-notification-center__trigger{width:40px;height:40px;border-radius:10px}.gd-notification-center__panel{position:fixed;top:58px;right:12px;left:12px;width:auto;max-height:calc(100dvh - 72px)}} @media(max-width:480px){.gd-notification-center__toolbar{align-items:flex-start;flex-direction:column}.gd-notification-center__panel{border-radius:15px}.gd-notification-center__copy strong{font-size:11px}} .gd-notification-center__copy>span.gd-notification-center__context{color:var(--gd-text-main);font-weight:650;-webkit-line-clamp:4} .gd-kanban-card--focused{outline:2px solid var(--gd-emerald);outline-offset:3px} .gd-public-booking-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .gd-directory-empty-icon{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--gd-danger)} /* Guani Hub 1.25.0.1 — estado cerrado del centro de notificaciones. */ .gd-notification-center__panel[hidden], .gd-notification-center__backdrop[hidden], .gd-notification-center [hidden] { display: none !important; } /* ===================================================================== * Guani Hub 1.25.0.2 — reserva visual para la campana * ===================================================================== */ @media (min-width: 1025px) { .gd-section-topbar { padding-right: 100px; } } /* Guani Hub 1.26.0 — conexión OAuth de Zoom */ .gd-settings-integration-card.gd-zoom-integration-card { align-items: flex-start; gap: 16px; } .gd-settings-integration-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto; flex-direction: column; } .gd-settings-integration-actions form { margin: 0; } .gd-settings-provider-copy small { display: block; margin-top: 7px; color: var(--gd-text-muted, #68725f); font-size: 12px; line-height: 1.45; } .gd-settings-status-connected { background: #eaf6df; color: #356509; border: 1px solid #cfe8b9; } @media (max-width: 767px) { .gd-settings-integration-card.gd-zoom-integration-card { display: grid; grid-template-columns: auto 1fr; } .gd-settings-integration-actions { grid-column: 1 / -1; width: 100%; justify-content: stretch; }/* .gd-settings-integration-actions form, .gd-settings-integration-actions .gd-boton { width: 100%; }*/ } /* Guani Hub 1.26.2 — UX de Citas e Integraciones */ .gd-agenda-toolbar { align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid rgba(135,191,20,.24); background: linear-gradient(145deg, rgba(26,51,17,.94), rgba(17,35,12,.98)); } .gd-agenda-toolbar-actions { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto; align-items: center; gap: 10px; min-width: min(620px, 100%); } .gd-agenda-search { min-height: 42px; border-color: rgba(161,220,54,.28); background: rgba(7,19,7,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); } .gd-agenda-search:focus-within { border-color: var(--gd-brand-accent); box-shadow: 0 0 0 3px rgba(161,220,54,.13); } .gd-agenda-toolbar-actions > select { min-height: 42px; border: 1px solid rgba(161,220,54,.28) !important; border-radius: 10px !important; background-color: rgba(7,19,7,.72) !important; color: var(--gd-text-main) !important; box-shadow: none !important; } .gd-agenda-view-switch { min-height: 42px; padding: 4px; border-color: rgba(161,220,54,.28); background: rgba(7,19,7,.72); } .gd-agenda-view-switch button { min-width: 82px; min-height: 32px; color: #c7d4c1 !important; text-decoration: none !important; } .gd-agenda-view-switch button:hover, .gd-agenda-view-switch button:focus { background: rgba(161,220,54,.10) !important; color: #fff !important; } .gd-agenda-view-switch button.gd-activo { background: var(--gd-brand-accent) !important; color: #17210f !important; box-shadow: 0 5px 14px rgba(0,0,0,.22); } .gd-agenda [data-agenda-location-field][hidden] { display: none !important; } .gd-agenda-whatsapp::before { content: "↗"; font-weight: 800; } .gd-settings-integration-card.gd-google-integration-card { min-height: 132px; } .gd-settings-status-connected { background: #e9f8d0; color: #416b08; border: 1px solid #c9e99a; width: fit-content; } body.light-mode .gd-agenda-toolbar { background: #f7faF3; border-color: #dbe8cf; } body.light-mode .gd-agenda-search, body.light-mode .gd-agenda-toolbar-actions > select, body.light-mode .gd-agenda-view-switch { background: #fff !important; color: #17210f !important; border-color: #d9e4d2 !important; } body.light-mode .gd-agenda-view-switch button { color: #53604d !important; } @media (max-width: 980px) { .gd-agenda-toolbar-actions { min-width: 0; width: 100%; grid-template-columns: 1fr 1fr; } .gd-agenda-view-switch { grid-column: 1 / -1; justify-self: stretch; } .gd-agenda-view-switch button { flex: 1; } } @media (max-width: 640px) { .gd-agenda-toolbar-actions { grid-template-columns: 1fr; } .gd-agenda-view-switch { grid-column: auto; width: 100%; } .gd-agenda-search { width: 100%; } } /* ========================================================================== Guani Hub 1.27.0 — Agenda pública ========================================================================== */ .gd-public-booking-settings{display:grid;gap:20px}.gd-public-booking-settings .gd-card{border:1px solid #dfe7da;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(28,45,17,.05)}.gd-public-booking-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px}.gd-public-booking-hero h4,.gd-public-booking-form h4{margin:8px 0 6px;color:#17210f;font-size:18px}.gd-public-booking-hero p,.gd-settings-card-help{margin:0;color:#6b7566}.gd-public-booking-status{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef1ec;color:#6e7869;font-size:12px;font-weight:700}.gd-public-booking-status.is-active{background:#eaf5d1;color:#527d08}.gd-public-booking-url{display:flex;gap:10px;margin-top:14px;max-width:720px}.gd-public-booking-url input{min-width:0;flex:1;background:#f7f9f5!important;border:1px solid #dce5d7!important;color:#34402f!important}.gd-public-booking-form{display:grid;gap:18px}.gd-public-booking-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.gd-public-booking-toggle-row div{display:grid;gap:4px}.gd-public-booking-toggle-row small{color:#778271}.gd-public-booking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gd-public-booking-grid.four-cols{grid-template-columns:repeat(4,minmax(0,1fr))}.gd-public-booking-grid .gd-campo-full{grid-column:1/-1}.gd-public-booking-slug{display:flex;align-items:stretch;border:1px solid #d7dfd2;border-radius:10px;overflow:hidden;background:#fff}.gd-public-booking-slug span{display:flex;align-items:center;padding:0 12px;background:#f1f5ee;color:#6d7868;font-size:13px;white-space:nowrap}.gd-public-booking-slug input{border:0!important;border-radius:0!important}.gd-public-booking-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gd-public-booking-check-grid label{display:flex;align-items:center;gap:9px;padding:14px;border:1px solid #dfe6dc;border-radius:12px;background:#fafcf9;cursor:pointer;font-weight:650;color:#34402f}.gd-public-booking-check-grid input{accent-color:#7cac16}.gd-public-booking-hours{display:grid;gap:10px}.gd-public-booking-day{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(260px,1.3fr);align-items:center;gap:18px;padding:13px 16px;border:1px solid #e0e7dc;border-radius:12px;background:#fbfcfa}.gd-public-booking-day.is-disabled{opacity:.56}.gd-public-booking-day-toggle{display:flex;align-items:center;gap:10px;font-weight:700;color:#263020}.gd-public-booking-day-toggle input{accent-color:#7cac16}.gd-public-booking-day>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gd-public-booking-day>div label{display:grid;gap:5px;font-size:12px;color:#6f796a}.gd-public-booking-day input[type=time]{width:100%;border:1px solid #d8e0d4!important;border-radius:9px!important;background:#fff!important;color:#263020!important}.gd-public-booking-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.gd-public-booking-actions .gd-mensaje-estado{margin:0}.gd-public-booking-actions button.is-loading{opacity:.65;pointer-events:none} .gd-public-booking-page{margin:0!important;background:#f1f5ee!important;color:#263020;font-family:Inter,Arial,sans-serif}.gd-public-booking-shell{width:min(1120px,calc(100% - 32px));min-height:680px;margin:48px auto 24px;display:grid;grid-template-columns:minmax(320px,.88fr) minmax(420px,1.12fr);background:#fff;border:1px solid #dce5d7;border-radius:26px;overflow:hidden;box-shadow:0 24px 70px rgba(24,42,13,.12)}.gd-public-booking-brand-panel{padding:52px 42px;background:linear-gradient(145deg,#183409,#2f5a15);color:#fff;position:relative}.gd-public-booking-brand-mark{display:flex;align-items:center;height:52px;margin-bottom:42px}.gd-public-booking-brand-mark img{max-width:190px;max-height:52px;object-fit:contain;filter:brightness(0) invert(1)}.gd-public-booking-brand-mark>span{font-size:42px;color:#a1dc36}.gd-public-booking-avatar{width:84px;height:84px;border-radius:24px;object-fit:cover;border:3px solid rgba(255,255,255,.28);box-shadow:0 12px 28px rgba(0,0,0,.2)}.gd-public-booking-avatar.fallback{display:grid;place-items:center;background:#a1dc36;color:#173006;font-size:34px;font-weight:800}.gd-public-booking-eyebrow{margin:22px 0 8px!important;color:#cfe7a8!important;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}.gd-public-booking-brand-panel h1{margin:0 0 16px;color:#fff;font-size:34px;line-height:1.15}.gd-public-booking-brand-panel>p:not(.gd-public-booking-eyebrow){color:#dce9d5;line-height:1.7}.gd-public-booking-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.gd-public-booking-meta>span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);font-size:12px}.gd-public-booking-meta .material-symbols-outlined{font-size:17px}.gd-public-booking-main-panel{display:grid;place-items:center;padding:52px}.gd-public-booking-paused,.gd-public-booking-ready{width:100%;text-align:center}.gd-public-booking-paused>.material-symbols-outlined{font-size:58px;color:#8a9684}.gd-public-booking-paused h2,.gd-public-booking-ready h2{margin:14px 0 10px;color:#17210f;font-size:28px}.gd-public-booking-paused p,.gd-public-booking-ready>p{color:#707a6b;line-height:1.65}.gd-public-booking-pill{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eaf5d1;color:#527d08;font-size:12px;font-weight:800}.gd-public-booking-public-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.gd-public-booking-public-options>div{display:flex;align-items:center;gap:10px;padding:16px;text-align:left;border:1px solid #dfe7da;border-radius:14px;background:#fafcf9}.gd-public-booking-public-options .material-symbols-outlined{color:#6b9f0e}.gd-public-booking-public-types{margin-top:26px;text-align:left}.gd-public-booking-public-types h3{font-size:14px;color:#465142}.gd-public-booking-public-types span{display:inline-flex;margin:4px 5px 4px 0;padding:7px 10px;border-radius:999px;background:#f0f4ed;color:#4e5b48;font-size:12px}.gd-public-booking-footer{text-align:center;color:#7b8675;font-size:12px;padding:0 16px 30px}.gd-public-booking-not-found{min-height:70vh;display:grid;place-items:center;align-content:center;text-align:center;padding:30px}.gd-public-booking-not-found>.material-symbols-outlined{font-size:58px;color:#798574}.gd-public-booking-not-found a{color:#5e8f09;font-weight:700} @media(max-width:900px){.gd-public-booking-grid.four-cols,.gd-public-booking-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gd-public-booking-shell{grid-template-columns:1fr}.gd-public-booking-brand-panel,.gd-public-booking-main-panel{padding:38px 30px}.gd-public-booking-main-panel{min-height:420px}.gd-public-booking-brand-panel h1{font-size:30px}} @media(max-width:640px){.gd-public-booking-hero{align-items:stretch;flex-direction:column}.gd-public-booking-url{flex-direction:column}.gd-public-booking-grid,.gd-public-booking-grid.four-cols,.gd-public-booking-check-grid{grid-template-columns:1fr}.gd-public-booking-slug{display:grid}.gd-public-booking-slug span{padding:10px 12px;white-space:normal}.gd-public-booking-day{grid-template-columns:1fr;gap:10px}.gd-public-booking-day>div{grid-template-columns:1fr 1fr}.gd-public-booking-shell{width:min(100% - 18px,1120px);margin:12px auto;border-radius:18px}.gd-public-booking-brand-panel,.gd-public-booking-main-panel{padding:30px 22px}.gd-public-booking-public-options{grid-template-columns:1fr}.gd-public-booking-brand-panel h1{font-size:27px}} /* Guani Hub 1.27.1 — Agenda pública: contraste, página pública y tipos de cita */ .gd-public-booking-settings{max-width:1120px;margin:0 auto;color:#17210f} .gd-public-booking-settings .gd-card,.gd-public-booking-settings .gd-settings-card{background:#fff!important;color:#17210f!important;border:1px solid #dfe7da!important;box-shadow:0 10px 28px rgba(23,33,15,.06)!important} .gd-public-booking-settings h3,.gd-public-booking-settings h4,.gd-public-booking-settings strong,.gd-public-booking-settings label{color:#17210f!important} .gd-public-booking-settings p,.gd-public-booking-settings small,.gd-public-booking-settings .gd-settings-card-help{color:#667060!important} .gd-public-booking-settings input[type=text],.gd-public-booking-settings input[type=time],.gd-public-booking-settings textarea,.gd-public-booking-settings select{background:#fff!important;color:#17210f!important;border:1px solid #cfd9ca!important;box-shadow:none!important} .gd-public-booking-settings input:focus,.gd-public-booking-settings textarea:focus,.gd-public-booking-settings select:focus{border-color:#87bf14!important;box-shadow:0 0 0 3px rgba(135,191,20,.17)!important;outline:0!important} .gd-public-booking-settings input::placeholder,.gd-public-booking-settings textarea::placeholder{color:#99a394!important} .gd-public-booking-settings .gd-boton{font-family:Inter,Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none!important} .gd-public-booking-settings .gd-boton-primario{background:#a1dc36!important;border-color:#a1dc36!important;color:#17210f!important} .gd-public-booking-settings .gd-boton-secundario{background:#fff!important;border:1px solid #b9c8b1!important;color:#24420a!important} .gd-public-booking-settings .gd-boton-secundario:hover{background:#eef7dd!important;border-color:#87bf14!important;color:#17210f!important} .gd-public-booking-hero{padding:26px 28px!important;align-items:flex-end!important} .gd-public-booking-hero>div{min-width:0;flex:1} .gd-public-booking-url{max-width:none} .gd-public-booking-url input{height:44px!important} .gd-public-booking-slug span{color:#53604e!important;background:#f2f6ef!important} .gd-public-booking-toggle-row{min-height:58px} .gd-public-booking-check-grid label{background:#f8faf7!important;color:#34402f!important;border-color:#dce5d7!important} .gd-public-booking-check-grid label:has(input:checked){background:#eef7dd!important;border-color:#9ccc39!important} .gd-public-booking-day{background:#fafcf9!important} .gd-public-booking-day.is-disabled{background:#f5f6f4!important} .gd-public-booking-card-heading,.gd-public-booking-questions-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} .gd-public-booking-types{display:grid;gap:14px;margin-top:18px} .gd-public-booking-type{border:1px solid #dce5d7;border-radius:16px;background:#fbfcfa;overflow:hidden} .gd-public-booking-type>header{display:grid;grid-template-columns:42px minmax(0,1fr) 38px 38px;align-items:center;gap:10px;padding:14px 16px;background:#f4f8f1;border-bottom:1px solid #dce5d7} .gd-public-booking-type-index{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#24420a;color:#a1dc36;font-weight:800;font-size:12px} .gd-public-booking-type>header>div:nth-child(2){display:grid;gap:2px;min-width:0} .gd-public-booking-type>header strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gd-public-booking-type>header small{font-size:12px} .gd-public-booking-type-body{padding:18px} .gd-public-booking-type.is-collapsed .gd-public-booking-type-body{display:none} .gd-public-booking-type.is-collapsed [data-toggle-type]{transform:rotate(-90deg)} .gd-icon-button{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;padding:0!important;border:1px solid #cfd9ca!important;border-radius:9px!important;background:#fff!important;color:#34402f!important;font-size:20px!important;line-height:1!important;cursor:pointer} .gd-icon-button:hover{border-color:#87bf14!important;background:#eef7dd!important} .gd-icon-button.is-danger{color:#a0382f!important} .gd-icon-button.is-danger:hover{border-color:#e5b8b3!important;background:#fff2f0!important} .gd-public-booking-questions-heading{margin:20px 0 12px;padding-top:18px;border-top:1px solid #e3e9df} .gd-public-booking-questions-heading>div{display:grid;gap:3px} .gd-public-booking-questions-heading small{max-width:640px} .gd-public-booking-questions{display:grid;gap:10px} .gd-public-booking-question{display:grid;grid-template-columns:24px minmax(180px,1.4fr) minmax(150px,.8fr) minmax(170px,1fr) auto 36px;align-items:end;gap:10px;padding:12px;border:1px solid #dfe7da;border-radius:12px;background:#fff} .gd-public-booking-question .gd-campo{margin:0} .gd-question-drag{align-self:center;color:#94a08e;font-weight:800;letter-spacing:-2px} .gd-question-required{display:flex!important;align-items:center;gap:7px;min-height:42px;white-space:nowrap;font-size:13px!important} .gd-question-required input{accent-color:#87bf14} .gd-question-options[hidden]{display:none!important} .gd-public-booking-question:not(.has-options) .gd-question-options{display:none} .gd-public-booking-actions{position:sticky;bottom:12px;z-index:4;padding:12px 14px;border:1px solid #dce5d7;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 12px 28px rgba(23,33,15,.12);backdrop-filter:blur(8px)} .gd-public-booking-page{min-height:100vh;background:#f5f7f2!important;color:#17210f!important} .gd-public-booking-shell{min-height:640px;border-radius:24px!important;border-color:#d8e2d3!important;box-shadow:0 24px 64px rgba(23,48,6,.14)!important} .gd-public-booking-brand-panel{background:linear-gradient(145deg,#173a08 0%,#24420a 62%,#315a17 100%)!important} .gd-public-booking-brand-mark svg{width:48px;height:48px;fill:#a1dc36} .gd-inline-icon{width:18px;height:18px;display:inline-block;flex:0 0 auto;fill:currentColor} .gd-public-booking-meta .gd-inline-icon{color:#d9efb2} .gd-public-booking-main-panel{align-items:stretch!important;place-items:stretch!important;padding:44px!important} .gd-public-booking-paused,.gd-public-booking-ready{align-self:center} .gd-public-booking-state-icon{display:inline-grid;place-items:center;width:76px;height:76px;border-radius:22px;background:#eef3eb;color:#7e8c77} .gd-public-booking-state-icon .gd-inline-icon{width:42px;height:42px} .gd-public-booking-paused h2,.gd-public-booking-ready h2{font-family:Inter,Arial,sans-serif!important;font-weight:750!important;letter-spacing:-.02em} .gd-public-booking-public-options>div{background:#f8faf7!important} .gd-public-booking-public-options .gd-inline-icon{width:22px;height:22px;color:#6b9f0e} .gd-public-booking-public-types{margin-top:28px} .gd-public-booking-type-cards{display:grid;gap:10px;margin-top:12px} .gd-public-booking-type-cards article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:16px 18px;border:1px solid #dfe7da;border-radius:14px;background:#fff;text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s} .gd-public-booking-type-cards article:hover{border-color:#9ccc39;box-shadow:0 8px 22px rgba(37,66,10,.08);transform:translateY(-1px)} .gd-public-booking-type-cards article>div{min-width:0} .gd-public-booking-type-cards strong{font-size:15px;color:#17210f} .gd-public-booking-type-cards p{margin:5px 0 0!important;color:#697463!important;font-size:13px;line-height:1.5} .gd-public-booking-type-cards article>span{align-self:start;padding:6px 9px;border-radius:999px;background:#eef7dd;color:#527d08;font-size:11px;font-weight:800} .gd-public-booking-type-cards small{grid-column:1/-1;color:#7b8675;font-size:11px} @media(max-width:1050px){.gd-public-booking-question{grid-template-columns:24px 1fr 1fr 36px}.gd-public-booking-question .gd-question-options{grid-column:2/4}.gd-question-required{grid-column:2/3}.gd-public-booking-question>.gd-icon-button{grid-column:4;grid-row:1}} @media(max-width:760px){.gd-public-booking-card-heading,.gd-public-booking-questions-heading{flex-direction:column}.gd-public-booking-card-heading .gd-boton,.gd-public-booking-questions-heading .gd-boton{width:100%;justify-content:center}.gd-public-booking-type>header{grid-template-columns:38px minmax(0,1fr) 34px 34px;padding:12px}.gd-public-booking-type-body{padding:14px}.gd-public-booking-question{grid-template-columns:1fr 36px;padding:12px}.gd-question-drag{display:none}.gd-public-booking-question .gd-campo,.gd-public-booking-question .gd-question-options,.gd-question-required{grid-column:1/-1}.gd-public-booking-question>.gd-icon-button{grid-column:2;grid-row:1}.gd-public-booking-actions{position:static}.gd-public-booking-main-panel{padding:30px 22px!important}} /* Guani Hub 1.27.2.1 — Reserva pública por pasos y estilos protegidos */ .gd-public-booking-ready{width:100%;max-width:620px;margin:0 auto;text-align:left!important} .gd-public-booking-flow-header{text-align:center;margin-bottom:24px} .gd-public-booking-flow-header h2{margin:10px 0 8px!important;color:#17210f!important;font-size:30px!important;line-height:1.15!important} .gd-public-booking-flow-header p{margin:0!important;color:#697463!important} .gd-public-booking-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 26px;padding:0;background:transparent!important} .gd-public-booking-progress button{position:relative;display:grid!important;justify-items:center!important;gap:6px!important;min-width:0!important;padding:0 4px 14px!important;border:0!important;background:transparent!important;color:#8a9585!important;box-shadow:none!important;font-family:Inter,Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer!important} .gd-public-booking-progress button:after{content:"";position:absolute;left:50%;right:-50%;bottom:0;height:3px;background:#dce5d7;z-index:0} .gd-public-booking-progress button:last-child:after{display:none} .gd-public-booking-progress button span{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #cfd9ca;background:#fff;color:#667060;font-weight:800;font-size:13px} .gd-public-booking-progress button small{font-size:11px;font-weight:700;color:inherit} .gd-public-booking-progress button.is-active,.gd-public-booking-progress button.is-complete{color:#527d08!important} .gd-public-booking-progress button.is-active span,.gd-public-booking-progress button.is-complete span{border-color:#87bf14;background:#a1dc36;color:#17210f} .gd-public-booking-progress button.is-complete:after{background:#87bf14} .gd-public-booking-progress button:disabled{opacity:1!important;cursor:default!important} .gd-public-booking-flow-message{margin:0 0 16px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:650} .gd-public-booking-flow-message[hidden]{display:none!important} .gd-public-booking-flow-message.is-error{background:#fff2f0;border:1px solid #efc5c0;color:#8f3028} .gd-public-booking-flow-message.is-success{background:#eef7dd;border:1px solid #cfe5a8;color:#3e6504} .gd-public-booking-step{animation:gdPublicStepIn .22s ease both} .gd-public-booking-step[hidden]{display:none!important} @keyframes gdPublicStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .gd-public-booking-step-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px} .gd-public-booking-step-heading>div{min-width:0} .gd-public-booking-step-heading span{display:block;margin-bottom:3px;color:#6b9f0e;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .gd-public-booking-step-heading h3{margin:0 0 5px!important;color:#17210f!important;font-size:24px!important;line-height:1.2!important;text-align:left!important} .gd-public-booking-step-heading p{margin:0!important;color:#697463!important;font-size:14px!important} .gd-public-booking-back{display:grid!important;place-items:center!important;flex:0 0 38px!important;width:38px!important;height:38px!important;padding:0!important;border:1px solid #d6dfd1!important;border-radius:11px!important;background:#fff!important;color:#24420a!important;font-size:21px!important;box-shadow:none!important;cursor:pointer!important} .gd-public-booking-back:hover{background:#eef7dd!important;border-color:#9ccc39!important} .gd-public-booking-type-cards{display:grid!important;gap:12px!important;margin:0!important} .gd-public-booking-type-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;width:100%!important;min-height:84px!important;padding:17px 18px!important;border:1px solid #dce5d7!important;border-radius:15px!important;background:#fff!important;color:#17210f!important;text-align:left!important;box-shadow:0 5px 14px rgba(23,33,15,.04)!important;font-family:Inter,Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer!important;transition:.18s ease!important} .gd-public-booking-type-card:hover,.gd-public-booking-type-card:focus-visible{transform:translateY(-1px)!important;border-color:#9ccc39!important;box-shadow:0 10px 22px rgba(37,66,10,.09)!important;outline:none!important} .gd-public-booking-type-card.is-active{border-color:#87bf14!important;background:#f5faeb!important;box-shadow:0 0 0 3px rgba(135,191,20,.16)!important} .gd-public-booking-type-card strong{display:block;color:#17210f!important;font-size:15px!important} .gd-public-booking-type-card p{margin:5px 0 0!important;color:#697463!important;font-size:13px!important;line-height:1.45!important} .gd-public-booking-type-card>span{padding:7px 10px;border-radius:999px;background:#eef7dd;color:#527d08;font-size:11px;font-weight:800;white-space:nowrap} .gd-public-booking-public-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important} .gd-public-booking-public-options button{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;min-height:64px!important;padding:14px 16px!important;border:1px solid #dce5d7!important;border-radius:14px!important;background:#fff!important;color:#17210f!important;box-shadow:0 5px 14px rgba(23,33,15,.04)!important;font-family:Inter,Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer!important} .gd-public-booking-public-options button:hover,.gd-public-booking-public-options button:focus-visible{border-color:#9ccc39!important;background:#f8fbf2!important;outline:none!important} .gd-public-booking-public-options button.is-active{border-color:#87bf14!important;background:#eef7dd!important;box-shadow:0 0 0 3px rgba(135,191,20,.16)!important} .gd-public-booking-public-options button strong{color:#17210f!important;font-size:14px!important} .gd-public-booking-date-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 18px!important;max-height:250px;overflow:auto;padding:2px 4px 2px 2px} .gd-public-booking-date-grid button,.gd-public-booking-slots button{min-width:0!important;padding:11px 10px!important;border:1px solid #dce5d7!important;border-radius:11px!important;background:#fff!important;color:#34402f!important;font-family:Inter,Arial,sans-serif!important;font-size:13px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;cursor:pointer!important} .gd-public-booking-date-grid button:hover,.gd-public-booking-slots button:hover{border-color:#9ccc39!important;background:#f8fbf2!important} .gd-public-booking-date-grid button.is-active,.gd-public-booking-slots button.is-active{border-color:#87bf14!important;background:#a1dc36!important;color:#17210f!important;box-shadow:0 0 0 3px rgba(135,191,20,.15)!important} .gd-public-booking-slots{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:0!important} .gd-public-booking-slot-hint,.gd-public-booking-empty{grid-column:1/-1;margin:0;padding:18px;border:1px dashed #cfd9ca;border-radius:12px;background:#f8faf7;color:#697463;text-align:center;font-size:13px} .gd-public-booking-loading{margin:14px 0 0!important;padding:12px;border-radius:10px;background:#f4f8f1;color:#527d08!important;text-align:center!important;font-weight:700} .gd-public-booking-reservation-form{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} .gd-public-booking-selection{display:grid;gap:3px;margin:0 0 18px;padding:14px 16px;border:1px solid #cfe3a8;border-radius:13px;background:#f4fae8;color:#34402f;text-align:left} .gd-public-booking-selection-label{color:#6b9f0e;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .gd-public-booking-selection strong{color:#17210f!important;font-size:15px!important} .gd-public-booking-selection span:last-child{color:#667060;font-size:12px} .gd-public-booking-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} .gd-public-booking-form-grid label,.gd-public-booking-question legend{display:grid!important;gap:6px!important;color:#34402f!important;font-size:12px!important;font-weight:750!important;text-align:left!important} .gd-public-booking-form-grid label.is-full{grid-column:1/-1} .gd-public-booking-form-grid input,.gd-public-booking-question input[type=text],.gd-public-booking-question textarea,.gd-public-booking-question select{width:100%!important;min-height:44px!important;padding:10px 12px!important;border:1px solid #cfd9ca!important;border-radius:10px!important;background:#fff!important;color:#17210f!important;font-family:Inter,Arial,sans-serif!important;font-size:14px!important;box-shadow:none!important} .gd-public-booking-form-grid input:focus,.gd-public-booking-question input:focus,.gd-public-booking-question textarea:focus,.gd-public-booking-question select:focus{border-color:#87bf14!important;box-shadow:0 0 0 3px rgba(135,191,20,.16)!important;outline:none!important} .gd-public-booking-question{margin:16px 0 0!important;padding:14px!important;border:1px solid #dfe7da!important;border-radius:12px!important;background:#fbfcfa!important} .gd-public-booking-choice{display:flex!important;align-items:center!important;gap:8px!important;margin-top:8px!important;color:#465142!important;font-size:13px!important;font-weight:500!important} .gd-public-booking-choice input{accent-color:#87bf14} .gd-public-booking-privacy{display:flex!important;align-items:flex-start!important;gap:9px!important;margin:18px 0!important;padding:12px 14px!important;border-radius:10px!important;background:#f8faf7!important;color:#53604e!important;font-size:12px!important;text-align:left!important} .gd-public-booking-privacy input{margin-top:2px;accent-color:#87bf14} .gd-public-booking-privacy a{color:#527d08!important;font-weight:750!important} .gd-public-booking-submit{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:48px!important;padding:12px 18px!important;border:1px solid #a1dc36!important;border-radius:12px!important;background:#a1dc36!important;color:#17210f!important;font-family:Inter,Arial,sans-serif!important;font-size:14px!important;font-weight:800!important;text-transform:none!important;letter-spacing:0!important;box-shadow:0 9px 20px rgba(135,191,20,.22)!important;cursor:pointer!important} .gd-public-booking-submit:hover{background:#95cf2f!important;border-color:#95cf2f!important} .gd-public-booking-submit:disabled{opacity:.65!important;cursor:wait!important} .gd-public-booking-success{display:grid;justify-items:center;gap:10px;padding:48px 24px;text-align:center} .gd-public-booking-success>span{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#a1dc36;color:#17210f;font-size:32px;font-weight:900} .gd-public-booking-success h2{margin:8px 0 0!important;color:#17210f!important} .gd-public-booking-success p{max-width:440px;margin:0!important;color:#667060!important} @media(max-width:760px){.gd-public-booking-progress small{display:none}.gd-public-booking-main-panel{padding:26px 20px!important}.gd-public-booking-flow-header h2{font-size:26px!important}.gd-public-booking-step-heading h3{font-size:21px!important}.gd-public-booking-public-options,.gd-public-booking-form-grid{grid-template-columns:1fr!important}.gd-public-booking-date-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gd-public-booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))!important}.gd-public-booking-type-card{min-height:78px!important;padding:15px!important}} @media(max-width:430px){.gd-public-booking-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gd-public-booking-date-grid{grid-template-columns:1fr!important;max-height:220px}.gd-public-booking-step-heading{gap:10px}.gd-public-booking-back{flex-basis:34px!important;width:34px!important;height:34px!important}} /* Guani Hub 1.27.3 — gestión pública de citas */ .gd-public-booking-manage-shell{min-height:100vh;display:grid;place-items:center;padding:32px;background:#f4f7f1}.gd-public-booking-manage-card{width:min(720px,100%);background:#fff;border:1px solid #dfe8d8;border-radius:24px;box-shadow:0 22px 60px rgba(30,55,18,.12);padding:34px}.gd-public-booking-manage-brand{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e5ecdf}.gd-public-booking-manage-brand span{font-weight:800;color:#7fbf11;text-transform:lowercase;font-size:20px}.gd-public-booking-manage-brand small{color:#66725f}.gd-public-booking-manage-card h1{margin:0 0 18px;color:#17210f;font-size:30px}.gd-public-booking-manage-summary{display:grid;gap:7px;padding:20px;border-radius:16px;background:#f6f9f3;border:1px solid #e0e9da;margin-bottom:22px}.gd-public-booking-manage-summary strong{font-size:19px;color:#17210f}.gd-public-booking-manage-summary span{color:#5e6a57}.gd-public-booking-manage-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gd-public-booking-danger{appearance:none;border:1px solid #d86161;background:#fff;color:#b52d2d;border-radius:10px;padding:13px 18px;font-weight:700;cursor:pointer}.gd-public-booking-danger:hover{background:#fff3f3}.gd-public-booking-manage-reschedule{margin-top:24px;padding-top:22px;border-top:1px solid #e5ecdf}.gd-public-booking-manage-reschedule h2{font-size:21px;color:#17210f;margin:0 0 16px}.gd-public-booking-manage-state{padding:22px;border-radius:14px;background:#eef7de;color:#35540a;text-align:center}.gd-public-booking-manage-state.is-cancelled{background:#fff2f2;color:#8f2727}.gd-public-booking-success .gd-public-booking-submit{display:inline-flex;margin-top:18px;text-decoration:none}.gd-public-booking-manage-card .gd-public-booking-date-grid,.gd-public-booking-manage-card .gd-public-booking-slots{margin-bottom:16px}.gd-public-booking-manage-card .gd-public-booking-message{margin-top:16px} @media(max-width:640px){.gd-public-booking-manage-shell{padding:16px}.gd-public-booking-manage-card{padding:24px 18px;border-radius:18px}.gd-public-booking-manage-brand{align-items:flex-start;flex-direction:column}.gd-public-booking-manage-actions{grid-template-columns:1fr}.gd-public-booking-manage-card h1{font-size:26px}} /* Guani Hub 1.27.4 — disponibilidad avanzada */ .gd-public-booking-type.is-inactive{opacity:.62;border-style:dashed} .gd-public-booking-inline-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid #dbe4d6;border-radius:10px;background:#f8fbf6;font-weight:700} .gd-public-booking-type-modalities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .gd-public-booking-type-modalities label{display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid #dbe4d6;border-radius:10px;background:#fff;font-weight:650} .gd-public-booking-blackouts textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.7} .gd-public-booking-main-panel [data-modality][hidden]{display:none!important} @media(max-width:760px){.gd-public-booking-type-modalities{grid-template-columns:1fr 1fr}} /* ===================================================================== * GUANI HUB 1.27.4.1 — AGENDA PÚBLICA: TEMA CRM + TARJETAS PLEGABLES * ===================================================================== */ body:not(.light-mode) .gd-public-booking-settings{ color:var(--gd-text-main,#f8fbf3)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-card, body:not(.light-mode) .gd-public-booking-settings .gd-settings-card{ background:linear-gradient(145deg,rgba(26,42,17,.96),rgba(18,34,12,.96))!important; color:var(--gd-text-main,#f8fbf3)!important; border:1px solid var(--gd-border,rgba(189,238,91,.14))!important; box-shadow:0 12px 30px rgba(0,0,0,.12)!important; } body:not(.light-mode) .gd-public-booking-settings h3, body:not(.light-mode) .gd-public-booking-settings h4, body:not(.light-mode) .gd-public-booking-settings strong, body:not(.light-mode) .gd-public-booking-settings label{ color:var(--gd-text-main,#f8fbf3)!important; } body:not(.light-mode) .gd-public-booking-settings p, body:not(.light-mode) .gd-public-booking-settings small, body:not(.light-mode) .gd-public-booking-settings .gd-settings-card-help{ color:var(--gd-text-sec,#aab5a2)!important; } body:not(.light-mode) .gd-public-booking-settings input[type=text], body:not(.light-mode) .gd-public-booking-settings input[type=time], body:not(.light-mode) .gd-public-booking-settings textarea, body:not(.light-mode) .gd-public-booking-settings select{ background:var(--gd-input-bg,#111d0c)!important; color:var(--gd-text-main,#f8fbf3)!important; border:1px solid var(--gd-border,rgba(189,238,91,.14))!important; box-shadow:none!important; color-scheme:dark; } body:not(.light-mode) .gd-public-booking-settings input::placeholder, body:not(.light-mode) .gd-public-booking-settings textarea::placeholder{ color:#76836f!important; } body:not(.light-mode) .gd-public-booking-settings input:focus, body:not(.light-mode) .gd-public-booking-settings textarea:focus, body:not(.light-mode) .gd-public-booking-settings select:focus{ border-color:#91cf24!important; box-shadow:0 0 0 3px rgba(168,230,59,.12)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-slug{ background:var(--gd-input-bg,#111d0c)!important; border-color:var(--gd-border,rgba(189,238,91,.14))!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-slug span{ background:var(--gd-surface-dim,#1d3212)!important; color:var(--gd-text-sec,#aab5a2)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-check-grid label, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-day, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-type, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-question, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-type-modalities label{ background:rgba(255,255,255,.025)!important; border-color:var(--gd-border,rgba(189,238,91,.14))!important; color:var(--gd-text-main,#f8fbf3)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-type>header{ background:rgba(168,230,59,.055)!important; border-bottom-color:var(--gd-border,rgba(189,238,91,.14))!important; } body:not(.light-mode) .gd-public-booking-settings .gd-boton-secundario, body:not(.light-mode) .gd-public-booking-settings .gd-icon-button{ background:rgba(255,255,255,.025)!important; border-color:var(--gd-border,rgba(189,238,91,.18))!important; color:var(--gd-text-main,#f8fbf3)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-boton-secundario:hover, body:not(.light-mode) .gd-public-booking-settings .gd-icon-button:hover{ background:rgba(168,230,59,.09)!important; border-color:rgba(168,230,59,.4)!important; color:#a8e63b!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-hero{ background:linear-gradient(135deg,#1a2f10,#12240b)!important; } /* Plegado de las tarjetas principales de configuración. */ .gd-public-booking-collapsible{ position:relative; padding-right:150px!important; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; } .gd-public-booking-collapse-toggle{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:7px 11px; border:1px solid var(--gd-border,rgba(189,238,91,.16)); border-radius:10px; background:rgba(255,255,255,.025); color:var(--gd-text-sec,#aab5a2); font:inherit; font-size:11px; font-weight:750; cursor:pointer; z-index:2; } .gd-public-booking-collapse-toggle:hover, .gd-public-booking-collapse-toggle:focus-visible{ border-color:rgba(168,230,59,.42); background:rgba(168,230,59,.08); color:#a8e63b; outline:none; } .gd-public-collapse-chevron{ display:inline-block; font-size:18px; line-height:1; transform:rotate(90deg); transition:transform .18s ease; } .gd-public-booking-collapsible:not(.is-collapsed) .gd-public-collapse-chevron{transform:rotate(270deg)} .gd-public-booking-collapsible.is-collapsed{ min-height:68px; padding-top:20px!important; padding-bottom:20px!important; } .gd-public-booking-collapsible.is-collapsed > :not(h4):not(.gd-public-booking-card-heading):not(.gd-public-booking-collapse-toggle){display:none!important} .gd-public-booking-collapsible.is-collapsed > .gd-public-booking-card-heading > :not(:first-child){display:none!important} .gd-public-booking-collapsible.is-collapsed .gd-public-booking-card-heading{margin:0!important} .gd-public-booking-collapsible.is-collapsed h4{margin:0!important} body.light-mode .gd-public-booking-collapse-toggle{ background:#f7f9f5; border-color:#d7dfd2; color:#52604c; } @media(max-width:760px){ .gd-public-booking-collapsible{padding-right:16px!important;padding-top:64px!important} .gd-public-booking-collapse-toggle{left:16px;right:16px;top:14px;width:calc(100% - 32px)} .gd-public-booking-collapsible.is-collapsed{padding-top:64px!important} } /* ===================================================================== * GUANI HUB 1.27.4.4 — CONFIG AGENDA PÚBLICA: AJUSTE DE LAYOUT Y ACORDEONES * ===================================================================== */ .gd-public-booking-settings .gd-public-booking-hero{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:24px!important; width:100%!important; min-height:0!important; padding:24px 26px!important; } .gd-public-booking-settings .gd-public-booking-hero-content{ grid-column:1!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; justify-self:stretch!important; } .gd-public-booking-settings .gd-public-booking-hero>a{ grid-column:2!important; align-self:center!important; justify-self:end!important; margin:0!important; } .gd-public-booking-settings .gd-public-booking-url{max-width:none!important;width:100%!important} /* Guardado: nunca heredar la superficie blanca de versiones anteriores. */ body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-actions{ background:linear-gradient(145deg,rgba(26,42,17,.98),rgba(18,34,12,.98))!important; border-color:var(--gd-border,rgba(189,238,91,.16))!important; box-shadow:0 12px 28px rgba(0,0,0,.18)!important; color:var(--gd-text-main,#f8fbf3)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-actions .gd-mensaje-estado{color:var(--gd-text-sec,#aab5a2)!important} /* Los estados plegados ya vienen definidos desde PHP: no dependen del JS para * empezar cerrados. Solo quedan visibles el encabezado y el control. */ .gd-public-booking-settings .gd-public-booking-collapsible{ position:relative!important; padding-right:170px!important; } .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed{ min-height:68px!important; padding-top:20px!important; padding-bottom:20px!important; } .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed > :not(h4):not(.gd-public-booking-card-heading):not(.gd-public-booking-collapse-toggle){display:none!important} .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed > .gd-public-booking-card-heading > :not(:first-child):not(.gd-public-booking-card-actions){display:none!important} .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed .gd-public-booking-card-actions > :not([data-public-collapse]):not([data-add-appointment-type]){display:none!important} .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed h4{margin:0!important} .gd-public-booking-settings .gd-public-booking-card-actions{display:flex;align-items:center;gap:8px;margin-left:auto} .gd-public-booking-settings .gd-public-booking-collapse-toggle.is-inline{position:static!important;min-width:132px} @media(max-width:760px){ .gd-public-booking-settings .gd-public-booking-hero{grid-template-columns:1fr!important;align-items:stretch!important} .gd-public-booking-settings .gd-public-booking-hero>a{grid-column:1!important;justify-self:stretch!important;width:100%!important;justify-content:center!important} .gd-public-booking-settings .gd-public-booking-collapsible{padding-right:16px!important;padding-top:64px!important} .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed{padding-top:64px!important} .gd-public-booking-settings .gd-public-booking-card-heading{align-items:stretch!important} .gd-public-booking-settings .gd-public-booking-card-actions{width:100%;margin-left:0} .gd-public-booking-settings .gd-public-booking-collapse-toggle.is-inline{width:100%!important} } /* ===================================================================== * GUANI HUB 1.27.4.6 — Tipos de cita siempre accionables * ===================================================================== */ .gd-public-booking-settings .gd-public-booking-types-titleblock { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; } .gd-public-booking-settings .gd-public-booking-types-titleblock h4 { flex: 0 0 100%; } .gd-public-booking-settings .gd-public-booking-types-titleblock .gd-settings-card-help { flex: 1 1 360px; margin: 0; } .gd-public-booking-settings .gd-public-booking-add-type { flex: 0 0 auto; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } /* El botón vive dentro del primer bloque del encabezado, que permanece visible * aun cuando el acordeón esté plegado. */ .gd-public-booking-settings .gd-public-booking-types-card.is-collapsed .gd-public-booking-types-titleblock, .gd-public-booking-settings .gd-public-booking-types-card.is-collapsed .gd-public-booking-add-type { display: flex !important; visibility: visible !important; opacity: 1 !important; } @media (max-width: 760px) { .gd-public-booking-settings .gd-public-booking-types-titleblock { align-items: stretch; } .gd-public-booking-settings .gd-public-booking-add-type { width: 100%; justify-content: center; } } /* ===================================================================== * GUANI HUB 1.27.4.7 — Tipos de cita: CTA persistente en encabezado * ===================================================================== */ .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-card-actions { display: flex !important; align-items: center !important; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-add-type { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: auto; } .gd-public-booking-settings .gd-public-booking-types-card.is-collapsed .gd-public-booking-card-actions, .gd-public-booking-settings .gd-public-booking-types-card.is-collapsed .gd-public-booking-add-type { display: flex !important; visibility: visible !important; opacity: 1 !important; } @media (max-width: 760px) { .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-card-actions { width: 100%; align-items: stretch !important; flex-direction: column; } .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-add-type, .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-collapse-toggle.is-inline { width: 100% !important; justify-content: center !important; } } /* ===================================================================== * GUANI HUB 1.27.4.8 — Agenda pública: refinamiento visual integral * ===================================================================== */ .gd-public-booking-settings{ --gdpb-radius:16px; --gdpb-radius-sm:11px; --gdpb-accent:#a1dc36; --gdpb-accent-strong:#87bf14; --gdpb-danger:#ef6a67; --gdpb-surface:#ffffff; --gdpb-surface-2:#f7faf4; --gdpb-surface-3:#eef6e8; --gdpb-border:#dce6d6; --gdpb-border-strong:#cbd8c4; --gdpb-text:#17210f; --gdpb-muted:#667060; --gdpb-shadow:0 10px 26px rgba(23,33,15,.055); max-width:1180px!important; gap:16px!important; } body:not(.light-mode) .gd-public-booking-settings{ --gdpb-surface:#14220e; --gdpb-surface-2:#101c0b; --gdpb-surface-3:#1b3011; --gdpb-border:rgba(189,238,91,.13); --gdpb-border-strong:rgba(189,238,91,.22); --gdpb-text:#f7faF3; --gdpb-muted:#a8b39f; --gdpb-shadow:0 12px 26px rgba(0,0,0,.16); } /* Encabezado general y tarjeta del enlace público */ .gd-public-booking-settings .gd-settings-section-heading{ margin-bottom:2px!important; } .gd-public-booking-settings .gd-settings-section-heading h3{ margin:0 0 3px!important; font-size:15px!important; letter-spacing:.035em!important; } .gd-public-booking-settings .gd-settings-section-heading p{ font-size:12.5px!important; line-height:1.55!important; } .gd-public-booking-settings .gd-public-booking-hero{ padding:22px 24px!important; border-radius:var(--gdpb-radius)!important; border-color:var(--gdpb-border)!important; box-shadow:var(--gdpb-shadow)!important; background:var(--gdpb-surface)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-hero{ background:linear-gradient(145deg,#182a10,#12200c)!important; } .gd-public-booking-settings .gd-public-booking-hero-content h4{ margin:9px 0 4px!important; font-size:17px!important; letter-spacing:-.01em; } .gd-public-booking-settings .gd-public-booking-hero-content p{ font-size:12.5px!important; line-height:1.5!important; } .gd-public-booking-settings .gd-public-booking-status{ min-height:25px; padding:5px 9px!important; border:1px solid transparent; font-size:10.5px!important; letter-spacing:.01em; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-status{ background:rgba(255,255,255,.05)!important; color:var(--gdpb-muted)!important; border-color:var(--gdpb-border)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-status.is-active{ background:rgba(161,220,54,.12)!important; color:#c8f47a!important; border-color:rgba(161,220,54,.22)!important; } .gd-public-booking-settings .gd-public-booking-url{ gap:8px!important; margin-top:12px!important; } .gd-public-booking-settings .gd-public-booking-url input{ min-height:42px!important; padding:9px 12px!important; border-radius:10px!important; font-size:12.5px!important; } .gd-public-booking-settings .gd-public-booking-url .gd-boton, .gd-public-booking-settings .gd-public-booking-hero>a{ min-height:40px!important; padding:9px 13px!important; border-radius:10px!important; white-space:nowrap; } /* Acordeones principales: estructura consistente y compacta */ .gd-public-booking-settings .gd-public-booking-collapsible, .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed{ padding:0!important; min-height:0!important; border-radius:var(--gdpb-radius)!important; border-color:var(--gdpb-border)!important; background:var(--gdpb-surface)!important; box-shadow:var(--gdpb-shadow)!important; overflow:hidden; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-collapsible, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed{ background:linear-gradient(145deg,rgba(23,39,15,.98),rgba(16,29,11,.98))!important; } .gd-public-booking-settings .gd-public-booking-collapsible:hover{ border-color:var(--gdpb-border-strong)!important; } .gd-public-booking-settings .gd-public-booking-card-heading{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; margin:0!important; padding:16px 18px!important; min-height:70px; } .gd-public-booking-settings .gd-public-booking-section-title{ display:flex!important; align-items:center!important; gap:12px!important; min-width:0; flex:1 1 auto; } .gd-public-booking-settings .gd-public-booking-section-title>div{ min-width:0; } .gd-public-booking-settings .gd-public-booking-section-icon{ display:grid!important; place-items:center!important; flex:0 0 38px!important; width:38px!important; height:38px!important; border:1px solid rgba(161,220,54,.18)!important; border-radius:11px!important; background:rgba(161,220,54,.09)!important; color:var(--gdpb-accent)!important; font-size:19px!important; line-height:1!important; } body.light-mode .gd-public-booking-settings .gd-public-booking-section-icon{ background:#eef7dd!important; color:#6d9f0d!important; border-color:#d9e9ba!important; } .gd-public-booking-settings .gd-public-booking-card-heading h4{ margin:0 0 3px!important; font-size:14px!important; font-weight:780!important; letter-spacing:0!important; text-transform:none!important; color:var(--gdpb-text)!important; } .gd-public-booking-settings .gd-public-booking-card-heading .gd-settings-card-help{ margin:0!important; max-width:650px; font-size:11.5px!important; line-height:1.45!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-public-booking-card-actions{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex:0 0 auto!important; gap:8px!important; margin:0!important; } .gd-public-booking-settings .gd-public-booking-collapse-toggle, .gd-public-booking-settings .gd-public-booking-collapse-toggle.is-inline{ position:static!important; inset:auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; width:auto!important; min-width:128px!important; min-height:34px!important; padding:7px 10px!important; border:1px solid var(--gdpb-border)!important; border-radius:9px!important; background:rgba(255,255,255,.018)!important; color:var(--gdpb-muted)!important; font-size:10.5px!important; font-weight:740!important; box-shadow:none!important; } body.light-mode .gd-public-booking-settings .gd-public-booking-collapse-toggle{ background:#f7faf4!important; } .gd-public-booking-settings .gd-public-booking-collapse-toggle:hover, .gd-public-booking-settings .gd-public-booking-collapse-toggle:focus-visible{ background:rgba(161,220,54,.08)!important; border-color:rgba(161,220,54,.34)!important; color:var(--gdpb-accent)!important; } .gd-public-booking-settings .gd-public-collapse-chevron{ font-size:17px!important; line-height:1!important; } .gd-public-booking-settings .gd-public-booking-card-body{ padding:18px 18px 20px!important; border-top:1px solid var(--gdpb-border)!important; background:rgba(0,0,0,.018); } body.light-mode .gd-public-booking-settings .gd-public-booking-card-body{ background:#fbfcfa!important; } .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed>.gd-public-booking-card-body{ display:none!important; } /* Neutraliza reglas históricas de plegado que ocultaban acciones del encabezado. */ .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed>.gd-public-booking-card-heading{ display:flex!important; } .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed>.gd-public-booking-card-heading>*{ display:flex!important; visibility:visible!important; } .gd-public-booking-settings .gd-public-booking-collapsible.is-collapsed>.gd-public-booking-card-heading .gd-public-booking-section-title>div{ display:block!important; } /* Campos y grupos */ .gd-public-booking-settings .gd-public-booking-grid{ gap:15px!important; } .gd-public-booking-settings .gd-public-booking-grid.four-cols{ grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important; } .gd-public-booking-settings .gd-campo{ gap:6px!important; } .gd-public-booking-settings .gd-campo>label:first-child, .gd-public-booking-settings .gd-public-booking-day>div label{ font-size:10.5px!important; font-weight:760!important; letter-spacing:.035em!important; text-transform:uppercase!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings input[type=text], .gd-public-booking-settings input[type=time], .gd-public-booking-settings textarea, .gd-public-booking-settings select{ min-height:42px!important; padding:9px 11px!important; border-radius:9px!important; border-color:var(--gdpb-border)!important; background:var(--gdpb-surface-2)!important; color:var(--gdpb-text)!important; font-size:12.5px!important; line-height:1.4!important; } .gd-public-booking-settings textarea{ min-height:92px!important; resize:vertical; } body:not(.light-mode) .gd-public-booking-settings input[type=text], body:not(.light-mode) .gd-public-booking-settings input[type=time], body:not(.light-mode) .gd-public-booking-settings textarea, body:not(.light-mode) .gd-public-booking-settings select{ background:#0f1a0b!important; border-color:var(--gdpb-border)!important; color:var(--gdpb-text)!important; } .gd-public-booking-settings input:focus, .gd-public-booking-settings textarea:focus, .gd-public-booking-settings select:focus{ border-color:var(--gdpb-accent-strong)!important; box-shadow:0 0 0 3px rgba(161,220,54,.11)!important; } .gd-public-booking-settings .gd-campo small{ font-size:10.5px!important; line-height:1.45!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-public-booking-slug{ min-height:42px; border-radius:9px!important; border-color:var(--gdpb-border)!important; background:var(--gdpb-surface-2)!important; } .gd-public-booking-settings .gd-public-booking-slug span{ padding:0 11px!important; font-size:11px!important; background:var(--gdpb-surface-3)!important; color:var(--gdpb-muted)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-slug, body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-slug span{ background:#0f1a0b!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-slug span{ background:#1a2d11!important; } /* Estado general */ .gd-public-booking-settings .gd-public-booking-toggle-row{ min-height:58px!important; padding:13px 15px!important; border:1px solid var(--gdpb-border)!important; border-radius:12px!important; background:var(--gdpb-surface-2)!important; } .gd-public-booking-settings .gd-public-booking-toggle-row strong{ font-size:12.5px!important; } .gd-public-booking-settings .gd-public-booking-toggle-row small{ font-size:11px!important; line-height:1.45!important; color:var(--gdpb-muted)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-toggle-row{ background:rgba(255,255,255,.018)!important; } /* Modalidades generales */ .gd-public-booking-settings .gd-public-booking-check-grid{ grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important; gap:10px!important; } .gd-public-booking-settings .gd-public-booking-check-grid label{ min-height:48px!important; padding:11px 13px!important; border:1px solid var(--gdpb-border)!important; border-radius:11px!important; background:var(--gdpb-surface-2)!important; color:var(--gdpb-text)!important; font-size:12px!important; font-weight:680!important; transition:border-color .16s ease,background .16s ease,transform .16s ease; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-check-grid label{ background:rgba(255,255,255,.018)!important; } .gd-public-booking-settings .gd-public-booking-check-grid label:hover{ border-color:var(--gdpb-border-strong)!important; } .gd-public-booking-settings .gd-public-booking-check-grid label:has(input:checked){ background:rgba(161,220,54,.09)!important; border-color:rgba(161,220,54,.34)!important; } .gd-public-booking-settings .gd-public-booking-check-grid input{ width:15px!important; height:15px!important; accent-color:var(--gdpb-accent-strong)!important; } /* Tipos de cita: listado compacto, una tarjeta abierta a la vez */ .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-add-type{ min-height:34px!important; padding:7px 10px!important; border-radius:9px!important; font-size:10.5px!important; font-weight:760!important; gap:4px!important; } .gd-public-booking-settings .gd-public-booking-add-type .material-symbols-outlined, .gd-public-booking-settings [data-add-question] .material-symbols-outlined, .gd-public-booking-settings .gd-public-booking-actions .material-symbols-outlined{ font-size:16px!important; } .gd-public-booking-settings .gd-public-booking-types{ display:grid!important; gap:10px!important; margin:0!important; } .gd-public-booking-settings .gd-public-booking-type{ border:1px solid var(--gdpb-border)!important; border-radius:13px!important; background:var(--gdpb-surface-2)!important; overflow:hidden!important; box-shadow:none!important; transition:border-color .16s ease,background .16s ease,opacity .16s ease; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-type{ background:rgba(255,255,255,.018)!important; } .gd-public-booking-settings .gd-public-booking-type:hover{ border-color:var(--gdpb-border-strong)!important; } .gd-public-booking-settings .gd-public-booking-type.is-inactive{ opacity:.68!important; border-style:dashed!important; } .gd-public-booking-settings .gd-public-booking-type>header{ grid-template-columns:36px minmax(0,1fr) 34px 34px!important; gap:9px!important; min-height:58px!important; padding:10px 12px!important; background:rgba(161,220,54,.035)!important; border-bottom:1px solid var(--gdpb-border)!important; } .gd-public-booking-settings .gd-public-booking-type.is-collapsed>header{ border-bottom:0!important; } .gd-public-booking-settings .gd-public-booking-type-index{ width:32px!important; height:32px!important; border-radius:9px!important; background:rgba(161,220,54,.13)!important; color:var(--gdpb-accent)!important; font-size:10px!important; } body.light-mode .gd-public-booking-settings .gd-public-booking-type-index{ background:#eaf5d1!important; color:#5f8d0a!important; } .gd-public-booking-settings .gd-public-booking-type>header strong{ font-size:12.5px!important; font-weight:760!important; color:var(--gdpb-text)!important; } .gd-public-booking-settings .gd-public-booking-type>header small{ font-size:10.5px!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-icon-button{ width:32px!important; height:32px!important; border-radius:8px!important; border-color:var(--gdpb-border)!important; background:transparent!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-icon-button .material-symbols-outlined{ font-size:17px!important; } .gd-public-booking-settings .gd-icon-button:hover{ background:rgba(161,220,54,.08)!important; border-color:rgba(161,220,54,.3)!important; color:var(--gdpb-accent)!important; } .gd-public-booking-settings .gd-icon-button.is-danger{ color:#db7a74!important; } .gd-public-booking-settings .gd-icon-button.is-danger:hover{ background:rgba(239,106,103,.09)!important; border-color:rgba(239,106,103,.28)!important; color:#f08b85!important; } .gd-public-booking-settings .gd-public-booking-type [data-toggle-type] .material-symbols-outlined{ transform:rotate(90deg); transition:transform .18s ease; } .gd-public-booking-settings .gd-public-booking-type:not(.is-collapsed) [data-toggle-type] .material-symbols-outlined{ transform:rotate(270deg); } .gd-public-booking-settings .gd-public-booking-type-body{ padding:16px!important; background:rgba(0,0,0,.015)!important; } body.light-mode .gd-public-booking-settings .gd-public-booking-type-body{ background:#fbfcfa!important; } /* Disponibilidad del tipo: corrige el bloque blanco del modo oscuro. */ .gd-public-booking-settings .gd-public-booking-inline-toggle{ display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; min-height:42px!important; padding:9px 11px!important; border:1px solid var(--gdpb-border)!important; border-radius:9px!important; background:var(--gdpb-surface-2)!important; color:var(--gdpb-text)!important; font-size:11.5px!important; font-weight:680!important; text-transform:none!important; letter-spacing:0!important; cursor:pointer; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-inline-toggle{ background:#0f1a0b!important; } .gd-public-booking-settings .gd-public-booking-inline-toggle input[type=checkbox]{ appearance:none!important; -webkit-appearance:none!important; position:relative!important; flex:0 0 34px!important; width:34px!important; height:19px!important; margin:0!important; border:1px solid var(--gdpb-border-strong)!important; border-radius:999px!important; background:#667060!important; box-shadow:none!important; cursor:pointer; transition:background .16s ease,border-color .16s ease; } .gd-public-booking-settings .gd-public-booking-inline-toggle input[type=checkbox]::after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.24); transition:transform .16s ease; } .gd-public-booking-settings .gd-public-booking-inline-toggle input[type=checkbox]:checked{ background:var(--gdpb-accent-strong)!important; border-color:var(--gdpb-accent-strong)!important; } .gd-public-booking-settings .gd-public-booking-inline-toggle input[type=checkbox]:checked::after{ transform:translateX(15px); } /* Modalidades por tipo */ .gd-public-booking-settings .gd-public-booking-type-modalities{ grid-template-columns:repeat(auto-fit,minmax(125px,1fr))!important; gap:8px!important; } .gd-public-booking-settings .gd-public-booking-type-modalities label{ min-height:43px!important; padding:9px 10px!important; border:1px solid var(--gdpb-border)!important; border-radius:9px!important; background:var(--gdpb-surface-2)!important; color:var(--gdpb-text)!important; font-size:10.5px!important; font-weight:680!important; text-transform:none!important; letter-spacing:0!important; cursor:pointer; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-type-modalities label{ background:#0f1a0b!important; } .gd-public-booking-settings .gd-public-booking-type-modalities label:has(input:checked){ background:rgba(161,220,54,.085)!important; border-color:rgba(161,220,54,.32)!important; } .gd-public-booking-settings .gd-public-booking-type-modalities input{ width:14px!important; height:14px!important; accent-color:var(--gdpb-accent-strong)!important; } .gd-public-booking-settings .gd-public-booking-type-modalities .material-symbols-outlined{ font-size:16px!important; color:var(--gdpb-accent)!important; } /* Preguntas personalizadas */ .gd-public-booking-settings .gd-public-booking-questions-heading{ align-items:center!important; margin:18px 0 10px!important; padding-top:16px!important; border-top:1px solid var(--gdpb-border)!important; } .gd-public-booking-settings .gd-public-booking-questions-heading strong{ font-size:12.5px!important; } .gd-public-booking-settings .gd-public-booking-questions-heading small{ font-size:10.5px!important; line-height:1.45!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings [data-add-question]{ min-height:34px!important; padding:7px 10px!important; border-radius:9px!important; font-size:10.5px!important; gap:4px!important; white-space:nowrap; } .gd-public-booking-settings .gd-public-booking-question{ display:grid!important; grid-template-columns:22px minmax(0,1.35fr) minmax(145px,.65fr) 34px!important; grid-template-areas: "drag question type remove" ". options options ." ". required required ."!important; align-items:end!important; gap:10px!important; padding:12px!important; border:1px solid var(--gdpb-border)!important; border-radius:11px!important; background:var(--gdpb-surface-2)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-question{ background:rgba(255,255,255,.018)!important; } .gd-public-booking-settings .gd-question-drag{ grid-area:drag; align-self:center!important; font-size:17px!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-question-label-field{grid-area:question} .gd-public-booking-settings .gd-question-type-field{grid-area:type} .gd-public-booking-settings .gd-question-options{grid-area:options} .gd-public-booking-settings .gd-question-required{ grid-area:required; justify-self:start; min-height:28px!important; font-size:10.5px!important; font-weight:650!important; text-transform:none!important; letter-spacing:0!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-public-booking-question>[data-remove-question]{grid-area:remove} .gd-public-booking-settings .gd-question-required input{ width:14px!important; height:14px!important; accent-color:var(--gdpb-accent-strong)!important; } .gd-public-booking-settings .gd-public-booking-question textarea{ min-height:64px!important; } /* Ausencias */ .gd-public-booking-settings .gd-public-booking-blackouts textarea{ min-height:120px!important; padding:12px!important; font-size:12px!important; line-height:1.65!important; } /* Horario semanal */ .gd-public-booking-settings .gd-public-booking-hours{ gap:8px!important; } .gd-public-booking-settings .gd-public-booking-day{ grid-template-columns:minmax(125px,.55fr) minmax(260px,1.45fr)!important; gap:14px!important; min-height:58px!important; padding:10px 12px!important; border:1px solid var(--gdpb-border)!important; border-radius:10px!important; background:var(--gdpb-surface-2)!important; transition:border-color .16s ease,background .16s ease,opacity .16s ease; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-day{ background:rgba(255,255,255,.018)!important; } .gd-public-booking-settings .gd-public-booking-day:has(.gd-public-booking-day-toggle input:checked){ border-color:rgba(161,220,54,.22)!important; } .gd-public-booking-settings .gd-public-booking-day.is-disabled{ opacity:.48!important; } .gd-public-booking-settings .gd-public-booking-day-toggle{ font-size:12px!important; font-weight:720!important; color:var(--gdpb-text)!important; } .gd-public-booking-settings .gd-public-booking-day-toggle input{ width:15px!important; height:15px!important; accent-color:var(--gdpb-accent-strong)!important; } .gd-public-booking-settings .gd-public-booking-day>div{ gap:8px!important; } .gd-public-booking-settings .gd-public-booking-day input[type=time]{ min-height:38px!important; padding:7px 9px!important; border-color:var(--gdpb-border)!important; background:var(--gdpb-surface)!important; color:var(--gdpb-text)!important; } body:not(.light-mode) .gd-public-booking-settings .gd-public-booking-day input[type=time]{ background:#0f1a0b!important; } /* Barra de guardado */ .gd-public-booking-settings .gd-public-booking-actions{ position:sticky!important; bottom:12px!important; z-index:5!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:12px!important; min-height:62px!important; padding:10px 12px!important; border:1px solid var(--gdpb-border)!important; border-radius:13px!important; background:rgba(20,34,14,.94)!important; box-shadow:0 14px 30px rgba(0,0,0,.18)!important; backdrop-filter:blur(12px)!important; } body.light-mode .gd-public-booking-settings .gd-public-booking-actions{ background:rgba(255,255,255,.95)!important; box-shadow:0 12px 26px rgba(23,33,15,.10)!important; } .gd-public-booking-settings .gd-public-booking-actions .gd-mensaje-estado{ margin-right:auto!important; font-size:11px!important; color:var(--gdpb-muted)!important; } .gd-public-booking-settings .gd-public-booking-actions .gd-boton-primario{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-height:40px!important; padding:9px 14px!important; border-radius:9px!important; font-size:11px!important; font-weight:780!important; } @media(max-width:900px){ .gd-public-booking-settings .gd-public-booking-card-heading{ align-items:flex-start!important; } .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-card-heading{ flex-direction:column!important; } .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-card-actions{ width:100%!important; justify-content:flex-start!important; } .gd-public-booking-settings .gd-public-booking-question{ grid-template-columns:22px minmax(0,1fr) 34px!important; grid-template-areas: "drag question remove" ". type ." ". options ." ". required ."!important; } } @media(max-width:760px){ .gd-public-booking-settings{ gap:12px!important; } .gd-public-booking-settings .gd-public-booking-hero{ padding:18px!important; gap:14px!important; } .gd-public-booking-settings .gd-public-booking-url{ flex-direction:column!important; } .gd-public-booking-settings .gd-public-booking-card-heading{ padding:14px!important; min-height:0!important; flex-direction:column!important; align-items:stretch!important; gap:12px!important; } .gd-public-booking-settings .gd-public-booking-section-title{ align-items:flex-start!important; } .gd-public-booking-settings .gd-public-booking-card-actions{ width:100%!important; justify-content:stretch!important; } .gd-public-booking-settings .gd-public-booking-collapse-toggle, .gd-public-booking-settings .gd-public-booking-collapse-toggle.is-inline, .gd-public-booking-settings .gd-public-booking-types-card .gd-public-booking-add-type{ flex:1 1 auto!important; width:100%!important; min-width:0!important; } .gd-public-booking-settings .gd-public-booking-card-body{ padding:14px!important; } .gd-public-booking-settings .gd-public-booking-grid, .gd-public-booking-settings .gd-public-booking-grid.four-cols, .gd-public-booking-settings .gd-public-booking-check-grid, .gd-public-booking-settings .gd-public-booking-type-modalities{ grid-template-columns:1fr!important; } .gd-public-booking-settings .gd-public-booking-type>header{ grid-template-columns:32px minmax(0,1fr) 32px 32px!important; padding:9px!important; } .gd-public-booking-settings .gd-public-booking-type-body{ padding:12px!important; } .gd-public-booking-settings .gd-public-booking-questions-heading{ align-items:stretch!important; flex-direction:column!important; } .gd-public-booking-settings [data-add-question]{ width:100%!important; justify-content:center!important; } .gd-public-booking-settings .gd-public-booking-question{ grid-template-columns:1fr 34px!important; grid-template-areas: "question remove" "type type" "options options" "required required"!important; } .gd-public-booking-settings .gd-question-drag{display:none!important} .gd-public-booking-settings .gd-public-booking-day{ grid-template-columns:1fr!important; gap:8px!important; } .gd-public-booking-settings .gd-public-booking-actions{ bottom:8px!important; flex-direction:column!important; align-items:stretch!important; } .gd-public-booking-settings .gd-public-booking-actions .gd-mensaje-estado{ margin:0!important; order:2; text-align:center; } .gd-public-booking-settings .gd-public-booking-actions .gd-boton-primario{ width:100%!important; } } .gd-public-booking-settings .gd-public-booking-section-title{flex-wrap:nowrap!important} .gd-public-booking-settings .gd-public-booking-hero .gd-boton .material-symbols-outlined{font-size:16px!important} /* Guani Hub 1.27.4.9 — Agenda pública: iconos compatibles con el subconjunto local de Material Symbols. */ .gd-public-booking-settings .gd-public-collapse-chevron{transform:rotate(90deg)!important;transition:transform .18s ease!important} .gd-public-booking-settings .gd-public-booking-collapsible:not(.is-collapsed) .gd-public-collapse-chevron{transform:rotate(270deg)!important} .gd-public-booking-settings .gd-public-booking-type [data-toggle-type] .material-symbols-outlined{transform:rotate(90deg)!important;transition:transform .18s ease!important} .gd-public-booking-settings .gd-public-booking-type:not(.is-collapsed) [data-toggle-type] .material-symbols-outlined{transform:rotate(270deg)!important} /* ===================================================================== * 112. HOTFIX VISUAL / IDENTIDAD — VERSIÓN 1.28.1 * Corrige regresiones visuales detectadas tras la aplicación de límites * comerciales sin alterar lógica, datos ni integraciones. * ===================================================================== */ /* Marca: el lockup visible se comporta siempre como enlace limpio. */ .gd-brand-home, .gd-brand-home:visited, .gd-brand-home:hover, .gd-brand-home:focus-visible { text-decoration: none !important; } /* Login, registro y recuperación: mismo lockup que la landing. */ .gd-split-visual-brand.gd-brand-home { gap: 10px; color: #fff !important; } .gd-split-visual-brand.gd-brand-home img { width: 31px; height: 31px; } .gd-split-visual-brand.gd-brand-home span { color: #fff !important; font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: lowercase; } body.light-mode .gd-split-visual-brand.gd-brand-home span { color: #17210f !important; } .gd-access-mobile-brand.gd-brand-home { display: inline-flex; align-items: center; gap: 10px; width: auto; min-height: 40px; padding-right: 56px; color: var(--gd-text-main) !important; } .gd-access-mobile-brand.gd-brand-home img { width: 31px; height: 31px; flex: 0 0 31px; } .gd-access-mobile-brand.gd-brand-home > span { color: var(--gd-text-main) !important; font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: lowercase; } /* Sidebar CRM: mismo isotipo + wordmark; el logo abre el inicio del CRM. */ .gd-sidebar-brand.gd-brand-home { color: var(--gd-text-main) !important; } .gd-sidebar-brand.gd-brand-home .gd-sidebar-brand-icon { width: 31px; height: 31px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .gd-sidebar-brand.gd-brand-home .gd-sidebar-brand-icon img { width: 31px; height: 31px; } .gd-sidebar-brand.gd-brand-home .gd-sidebar-brand-text h1 { color: var(--gd-text-main) !important; font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-transform: lowercase; } .gd-sidebar-brand.gd-brand-home:hover .gd-sidebar-brand-text h1, .gd-sidebar-brand.gd-brand-home:focus-visible .gd-sidebar-brand-text h1 { color: var(--gd-emerald) !important; } .gd-mobile-brand.gd-brand-home { display: inline-flex; align-items: center; gap: 8px; color: var(--gd-text-main) !important; font-size: 16px; font-weight: 800; letter-spacing: -.035em; text-transform: lowercase; } .gd-mobile-brand.gd-brand-home img { width: 24px; height: 24px; object-fit: contain; } .gd-assistant-brand.gd-brand-home { color: var(--gd-text-main) !important; } .gd-assistant-brand.gd-brand-home img { width: 31px; height: 31px; } .gd-assistant-brand.gd-brand-home strong { color: var(--gd-text-main) !important; font-size: 19px; font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; } /* Footer landing: redes realmente centradas en mobile. */ @media (max-width: 767px) { .gdl-footer .gdl-social { width: 100%; justify-content: center; margin: 18px auto 0; } } /* Login: control explícito para mostrar/ocultar contraseña. */ .gd-glass-input--password { padding-right: 86px !important; } .gd-login-password-toggle { position: absolute; top: 50%; right: 10px; z-index: 3; min-width: 62px; min-height: 34px; padding: 6px 9px; transform: translateY(-50%); border: 1px solid var(--gd-border) !important; border-radius: 8px !important; background: color-mix(in srgb, var(--gd-card-bg) 88%, transparent) !important; color: var(--gd-text-sec) !important; font: 700 11px/1 'Inter', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } .gd-login-password-toggle:hover, .gd-login-password-toggle:focus-visible { border-color: color-mix(in srgb, var(--gd-emerald) 55%, var(--gd-border)) !important; color: var(--gd-emerald) !important; outline: none; } /* Registro: Astra no puede invertir el contraste del selector mensual/anual. */ body:not(.light-mode) #gd-registro-screen .gd-registration-period button, body:not(.light-mode) #gd-registro-screen .gd-registration-period button:visited { background: transparent !important; color: var(--gd-text-sec) !important; -webkit-text-fill-color: var(--gd-text-sec) !important; } body:not(.light-mode) #gd-registro-screen .gd-registration-period button:not(.gd-activo):hover, body:not(.light-mode) #gd-registro-screen .gd-registration-period button:not(.gd-activo):focus-visible { background: rgba(255,255,255,.045) !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; } body:not(.light-mode) #gd-registro-screen .gd-registration-period button.gd-activo, body:not(.light-mode) #gd-registro-screen .gd-registration-period button.gd-activo:hover, body:not(.light-mode) #gd-registro-screen .gd-registration-period button.gd-activo:focus, body:not(.light-mode) #gd-registro-screen .gd-registration-period button.gd-activo:focus-visible, body:not(.light-mode) #gd-registro-screen .gd-registration-period button.gd-activo:active { background: var(--gd-emerald) !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; } /* Acceso desktop: contenido centrado dentro del espacio real y footer fuera * del área del formulario; evita cruces con Modo oscuro y legales. */ @media (min-width: 1025px) { .gd-split-form { justify-content: flex-start; overflow-y: auto; padding: 40px 48px 24px; } #gd-login-screen .gd-form-container, #gd-registro-screen .gd-form-container, .gd-password-screen .gd-form-container { width: 100%; margin: auto; padding: 72px 0 28px; } #gd-login-screen .gd-form-container, .gd-password-screen .gd-form-container { max-width: 460px; } #gd-registro-screen .gd-form-container { max-width: 560px; } .gd-theme-toggle { top: 24px; right: 40px; } .gd-split-footer, #gd-registro-screen .gd-split-footer { position: static; right: auto; bottom: auto; align-self: stretch; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--gd-border); font-size: 11px; text-align: center; opacity: .62; } .gd-access-legal-links { justify-content: center; } } @media (min-width: 1025px) and (max-height: 760px) { #gd-login-screen .gd-form-container, #gd-registro-screen .gd-form-container, .gd-password-screen .gd-form-container { margin-top: 56px; margin-bottom: 24px; } } /* Títulos de operación: Astra estaba heredando un color oscuro en dark mode. */ .gd-collections-heading h3, .gd-commercial-head h3 { color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main); } /* Satisfacción: el HTML dinámico necesita su propio gap entre bloques. */ #gd-satisfaction-content { display: grid; gap: 18px; min-width: 0; } /* Citas: selector de anticipación coherente con el resto de controles en dark. */ body:not(.light-mode) .gd-agenda-reminders-options select { min-height: 40px; padding: 7px 34px 7px 10px; border: 1px solid var(--gd-border) !important; border-radius: 9px; background: var(--gd-input-bg) !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main); color-scheme: dark; box-shadow: none !important; } body:not(.light-mode) .gd-agenda-reminders-options select option { background: #111d0c; color: #f8fbf3; } @media (min-width: 1025px) { .gd-access-mobile-brand.gd-brand-home { display: none; } } /* ===================================================================== * 113. HOTFIX VISUAL GLOBAL — VERSIÓN 1.28.2 * - Acceso público siempre oscuro, sin selector de tema. * - Hero lateral centrado verticalmente. * - Toggle de contraseña con icono de ojo SVG. * - Aislamiento integral de estados Astra en botones Guani Hub. * - Controles de formularios oscuros en landing/CRM dark. * - Selector mensual/anual con contraste estable. * ===================================================================== */ /* Login, registro y recuperación son siempre dark, aunque el usuario haya * guardado modo claro dentro del CRM en una sesión anterior. */ .gd-split-screen { --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-input-bg: #0c1209; --gd-surface-dim: #182510; color-scheme: dark; } /* La frase del panel visual queda realmente centrada en el eje vertical. */ @media (min-width: 1025px) { .gd-split-visual-hero { top: 50%; bottom: auto; transform: translateY(-50%); } } /* Acceso público ya no reserva espacio para un selector de tema. */ @media (min-width: 1025px) { #gd-login-screen .gd-form-container, #gd-registro-screen .gd-form-container, #gd-password-screen .gd-form-container { padding-top: 28px; } } /* Ojo para mostrar/ocultar contraseña sin depender del subconjunto local de * Material Symbols. */ .gd-login-password-toggle, .gd-password-public-toggle { display: grid !important; place-items: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--gd-text-sec) !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; } .gd-login-password-toggle:hover, .gd-login-password-toggle:focus, .gd-login-password-toggle:focus-visible, .gd-login-password-toggle:active, .gd-password-public-toggle:hover, .gd-password-public-toggle:focus, .gd-password-public-toggle:focus-visible, .gd-password-public-toggle:active { background: rgba(135, 191, 20, .10) !important; color: var(--gd-emerald) !important; -webkit-text-fill-color: var(--gd-emerald) !important; } .gd-password-eye { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-password-eye .gd-eye-closed { display: none; } .gd-login-password-toggle.is-visible .gd-eye-open, .gd-password-public-toggle.is-visible .gd-eye-open { display: none; } .gd-login-password-toggle.is-visible .gd-eye-closed, .gd-password-public-toggle.is-visible .gd-eye-closed { display: inline; } .gd-glass-input--password, #gd-password-screen .gd-password-public-field .gd-glass-input--icon { padding-right: 58px !important; } /* --------------------------------------------------------------------- * AISLAMIENTO ASTRA — LANDING * Astra no puede sustituir por azul ninguno de los estados interactivos. * --------------------------------------------------------------------- */ .gd-public-landing .gdl-button--primary, .gd-public-landing .gdl-button--primary:link, .gd-public-landing .gdl-button--primary:visited, .gd-public-landing .gdl-button--primary:focus, .gd-public-landing .gdl-button--primary:focus-visible, .gd-public-landing .gdl-button--primary:active { background: var(--gdl-lime) !important; border-color: transparent !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; } .gd-public-landing .gdl-button--primary:hover { background: #b8f34c !important; border-color: transparent !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; } .gd-public-landing .gdl-button--ghost, .gd-public-landing .gdl-button--ghost:link, .gd-public-landing .gdl-button--ghost:visited, .gd-public-landing .gdl-button--outline, .gd-public-landing .gdl-button--outline:link, .gd-public-landing .gdl-button--outline:visited { background: rgba(255,255,255,.025) !important; border-color: var(--gdl-line) !important; color: var(--gdl-text) !important; -webkit-text-fill-color: var(--gdl-text) !important; } .gd-public-landing .gdl-button--ghost:hover, .gd-public-landing .gdl-button--ghost:focus, .gd-public-landing .gdl-button--ghost:focus-visible, .gd-public-landing .gdl-button--ghost:active, .gd-public-landing .gdl-button--outline:hover, .gd-public-landing .gdl-button--outline:focus, .gd-public-landing .gdl-button--outline:focus-visible, .gd-public-landing .gdl-button--outline:active { background: rgba(168,230,59,.08) !important; border-color: rgba(168,230,59,.50) !important; color: var(--gdl-text) !important; -webkit-text-fill-color: var(--gdl-text) !important; } .gd-public-landing .gdl-menu-toggle, .gd-public-landing .gdl-menu-toggle:hover, .gd-public-landing .gdl-menu-toggle:focus, .gd-public-landing .gdl-menu-toggle:active { background: var(--gdl-surface) !important; border-color: var(--gdl-line) !important; color: var(--gdl-text) !important; } .gd-public-landing .gdl-faq button, .gd-public-landing .gdl-faq button:focus, .gd-public-landing .gdl-faq button:active { background: transparent !important; color: var(--gdl-text) !important; -webkit-text-fill-color: var(--gdl-text) !important; } .gd-public-landing .gdl-faq button:hover, .gd-public-landing .gdl-faq button:focus-visible { background: transparent !important; color: var(--gdl-lime) !important; -webkit-text-fill-color: var(--gdl-lime) !important; } .gd-public-landing .gdl-slider-controls button, .gd-public-landing .gdl-slider-controls button:hover, .gd-public-landing .gdl-slider-controls button:focus, .gd-public-landing .gdl-slider-controls button:active { box-shadow: none !important; } .gd-public-landing .gdl-whatsapp button, .gd-public-landing .gdl-whatsapp button:hover, .gd-public-landing .gdl-whatsapp button:focus, .gd-public-landing .gdl-whatsapp button:active { background: #3b8b72 !important; border-color: transparent !important; box-shadow: 0 0 0 3px rgba(168,230,59,.28) !important; } /* Selector principal de planes: estado activo/inactivo estable incluso con * hover/focus/active de Astra. */ .gd-public-landing .gdl-billing-toggle button, .gd-public-landing .gdl-billing-toggle button:visited, .gd-public-landing .gdl-billing-toggle button:focus, .gd-public-landing .gdl-billing-toggle button:active { background: transparent !important; border: 0 !important; color: var(--gdl-muted) !important; -webkit-text-fill-color: var(--gdl-muted) !important; box-shadow: none !important; } .gd-public-landing .gdl-billing-toggle button:not(.is-active):hover, .gd-public-landing .gdl-billing-toggle button:not(.is-active):focus-visible { background: rgba(168,230,59,.07) !important; color: var(--gdl-text) !important; -webkit-text-fill-color: var(--gdl-text) !important; } .gd-public-landing .gdl-billing-toggle button.is-active, .gd-public-landing .gdl-billing-toggle button.is-active:hover, .gd-public-landing .gdl-billing-toggle button.is-active:focus, .gd-public-landing .gdl-billing-toggle button.is-active:focus-visible, .gd-public-landing .gdl-billing-toggle button.is-active:active { background: var(--gdl-lime) !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; } .gd-public-landing .gdl-billing-toggle button small { color: inherit !important; -webkit-text-fill-color: currentColor !important; } /* --------------------------------------------------------------------- * AISLAMIENTO ASTRA — LOGIN / REGISTRO / RECUPERACIÓN * --------------------------------------------------------------------- */ .gd-split-screen .gd-btn-primary, .gd-split-screen .gd-btn-primary:link, .gd-split-screen .gd-btn-primary:visited, .gd-split-screen .gd-btn-primary:focus, .gd-split-screen .gd-btn-primary:focus-visible, .gd-split-screen .gd-btn-primary:active { background: var(--gd-emerald) !important; border-color: transparent !important; color: #0e111a !important; -webkit-text-fill-color: #0e111a !important; box-shadow: var(--gd-emerald-glow) !important; } .gd-split-screen .gd-btn-primary:hover { background: #9bd52a !important; border-color: transparent !important; color: #0e111a !important; -webkit-text-fill-color: #0e111a !important; box-shadow: var(--gd-emerald-glow-hover) !important; } /* Registro: selector Mensual/Anual siempre tiene contraste correcto. */ #gd-registro-screen .gd-registration-period button, #gd-registro-screen .gd-registration-period button:visited, #gd-registro-screen .gd-registration-period button:focus, #gd-registro-screen .gd-registration-period button:active { background: transparent !important; color: var(--gd-text-sec) !important; -webkit-text-fill-color: var(--gd-text-sec) !important; box-shadow: none !important; } #gd-registro-screen .gd-registration-period button:not(.gd-activo):hover, #gd-registro-screen .gd-registration-period button:not(.gd-activo):focus-visible { background: rgba(255,255,255,.045) !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; } #gd-registro-screen .gd-registration-period button.gd-activo, #gd-registro-screen .gd-registration-period button.gd-activo:hover, #gd-registro-screen .gd-registration-period button.gd-activo:focus, #gd-registro-screen .gd-registration-period button.gd-activo:focus-visible, #gd-registro-screen .gd-registration-period button.gd-activo:active { background: var(--gd-emerald) !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; } /* --------------------------------------------------------------------- * AISLAMIENTO ASTRA — BOTONES PRINCIPALES DEL CRM * --------------------------------------------------------------------- */ .gd-portal .gd-btn--primary, .gd-portal .gd-btn--primary:visited, .gd-portal .gd-btn--primary:hover, .gd-portal .gd-btn--primary:focus, .gd-portal .gd-btn--primary:focus-visible, .gd-portal .gd-btn--primary:active, .gd-portal .gd-boton-primario, .gd-portal .gd-boton-primario:visited, .gd-portal .gd-boton-primario:hover, .gd-portal .gd-boton-primario:focus, .gd-portal .gd-boton-primario:focus-visible, .gd-portal .gd-boton-primario:active { background: linear-gradient(135deg, var(--gd-emerald), #a8d850) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } .gd-portal .gd-sidebar-cta, .gd-portal .gd-sidebar-cta:hover, .gd-portal .gd-sidebar-cta:focus, .gd-portal .gd-sidebar-cta:focus-visible, .gd-portal .gd-sidebar-cta:active { background: linear-gradient(135deg, var(--gd-emerald), #a8d850) !important; border-color: transparent !important; color: #0e111a !important; -webkit-text-fill-color: #0e111a !important; } .gd-portal .gd-btn--secondary, .gd-portal .gd-btn--secondary:visited, .gd-portal .gd-boton-secundario, .gd-portal .gd-boton-secundario:visited { background: transparent !important; border-color: var(--gd-border) !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; } body:not(.light-mode) .gd-portal .gd-btn--secondary:hover, body:not(.light-mode) .gd-portal .gd-btn--secondary:focus, body:not(.light-mode) .gd-portal .gd-btn--secondary:focus-visible, body:not(.light-mode) .gd-portal .gd-btn--secondary:active, body:not(.light-mode) .gd-portal .gd-boton-secundario:hover, body:not(.light-mode) .gd-portal .gd-boton-secundario:focus, body:not(.light-mode) .gd-portal .gd-boton-secundario:focus-visible, body:not(.light-mode) .gd-portal .gd-boton-secundario:active { background: rgba(255,255,255,.05) !important; border-color: color-mix(in srgb, var(--gd-emerald) 40%, var(--gd-border)) !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; } .gd-portal .gd-btn--danger, .gd-portal .gd-btn--danger:hover, .gd-portal .gd-btn--danger:focus, .gd-portal .gd-btn--danger:active, .gd-portal .gd-boton-peligro, .gd-portal .gd-boton-peligro:hover, .gd-portal .gd-boton-peligro:focus, .gd-portal .gd-boton-peligro:active { background: rgba(239,91,91,.12) !important; border-color: rgba(239,91,91,.20) !important; color: var(--gd-danger) !important; -webkit-text-fill-color: var(--gd-danger) !important; } /* --------------------------------------------------------------------- * FORMULARIOS: superficies oscuras uniformes en landing/acceso y CRM dark. * Checkbox/radio/range/color/file y botones se excluyen intencionalmente. * --------------------------------------------------------------------- */ .gd-split-screen input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), .gd-split-screen textarea, .gd-split-screen select, .gd-public-landing input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), .gd-public-landing textarea, .gd-public-landing select, body:not(.light-mode) .gd-portal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), body:not(.light-mode) .gd-portal textarea, body:not(.light-mode) .gd-portal select { background-color: #0c1209 !important; border-color: rgba(255,255,255,.10) !important; color: #f3f4f6 !important; -webkit-text-fill-color: #f3f4f6 !important; box-shadow: none !important; color-scheme: dark; } .gd-split-screen input::placeholder, .gd-split-screen textarea::placeholder, .gd-public-landing input::placeholder, .gd-public-landing textarea::placeholder, body:not(.light-mode) .gd-portal input::placeholder, body:not(.light-mode) .gd-portal textarea::placeholder { color: #788174 !important; -webkit-text-fill-color: #788174 !important; opacity: 1; } .gd-split-screen input:focus, .gd-split-screen textarea:focus, .gd-split-screen select:focus, .gd-public-landing input:focus, .gd-public-landing textarea:focus, .gd-public-landing select:focus, body:not(.light-mode) .gd-portal input:focus, body:not(.light-mode) .gd-portal textarea:focus, body:not(.light-mode) .gd-portal select:focus { border-color: var(--gd-brand-accent, var(--gd-emerald, #87bf14)) !important; box-shadow: 0 0 0 3px rgba(135,191,20,.10) !important; outline: none !important; } .gd-split-screen select option, .gd-public-landing select option, body:not(.light-mode) .gd-portal select option { background: #0c1209 !important; color: #f3f4f6 !important; } /* El modo claro se conserva exclusivamente dentro del CRM autenticado. */ body.light-mode .gd-portal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), body.light-mode .gd-portal textarea, body.light-mode .gd-portal select { color-scheme: light; } /* ========================================================================== * 1.29.0 — Mi cartera, Prospectos y Cumpleaños * ========================================================================== */ .gd-sidebar-new{position:relative;margin:14px 10px 10px}.gd-sidebar-new .gd-sidebar-cta{width:100%;margin:0}.gd-sidebar-cta-chevron{margin-left:auto;transition:transform .18s ease}.gd-sidebar-cta[aria-expanded="true"] .gd-sidebar-cta-chevron{transform:rotate(90deg)} .gd-sidebar-new-menu{position:absolute;z-index:80;top:calc(100% + 8px);left:0;right:0;display:grid;gap:6px;padding:8px;border:1px solid var(--gd-border);border-radius:14px;background:color-mix(in srgb,var(--gd-card-bg) 97%,#071005);box-shadow:0 18px 45px rgba(0,0,0,.34)}.gd-sidebar-new-menu[hidden]{display:none!important}.gd-sidebar-new-menu button{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--gd-text-main);text-align:left;cursor:pointer}.gd-sidebar-new-menu button:hover,.gd-sidebar-new-menu button:focus-visible{border-color:color-mix(in srgb,var(--gd-emerald) 32%,var(--gd-border));background:color-mix(in srgb,var(--gd-emerald) 8%,transparent);outline:none}.gd-sidebar-new-menu .material-symbols-outlined{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--gd-emerald) 12%,transparent);color:var(--gd-emerald);font-size:18px}.gd-sidebar-new-menu strong,.gd-sidebar-new-menu small{display:block}.gd-sidebar-new-menu strong{font-size:11px;color:var(--gd-text-main)}.gd-sidebar-new-menu small{margin-top:2px;color:var(--gd-text-sec);font-size:9px;line-height:1.35} .gd-section-topbar--with-copy{align-items:flex-start}.gd-section-topbar--with-copy>div:first-child{display:grid;gap:5px}.gd-section-topbar--with-copy p{max-width:760px;margin:0;color:var(--gd-text-sec);font-size:12px;line-height:1.55}.gd-section-kicker{display:block;color:var(--gd-emerald);font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase} .gd-client-view-tabs{display:inline-flex;align-items:center;gap:5px;margin:0 0 16px;padding:5px;border:1px solid var(--gd-border);border-radius:13px;background:color-mix(in srgb,var(--gd-input-bg) 82%,transparent)}.gd-client-view-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:var(--gd-text-sec);font-size:11px;font-weight:750;cursor:pointer}.gd-client-view-tabs button:hover,.gd-client-view-tabs button:focus-visible{color:var(--gd-text-main);background:color-mix(in srgb,var(--gd-emerald) 6%,transparent);outline:none}.gd-client-view-tabs button.is-active{background:var(--gd-emerald);color:#122006!important;box-shadow:0 7px 18px rgba(135,191,20,.18)}.gd-client-view-tabs .material-symbols-outlined{font-size:17px}.gd-client-view-count{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef5350;color:#fff;font-size:9px;font-weight:850}.gd-client-view-tabs button.is-active .gd-client-view-count{background:#122006;color:#bff25c} .gd-contact-directory-panel{display:grid;gap:14px}.gd-client-directory{display:grid;gap:9px}.gd-client-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--gd-border);border-radius:14px;background:color-mix(in srgb,var(--gd-card-bg) 93%,transparent);transition:border-color .18s ease,transform .18s ease,background .18s ease}.gd-client-card:hover,.gd-client-card:focus-visible{border-color:color-mix(in srgb,var(--gd-emerald) 42%,var(--gd-border));background:color-mix(in srgb,var(--gd-emerald) 5%,var(--gd-card-bg));transform:translateY(-1px);outline:none}.gd-client-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--gd-emerald) 14%,transparent);color:var(--gd-emerald);font-size:12px;font-weight:850}.gd-client-card-main{min-width:0}.gd-client-card-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gd-client-card-heading>strong{color:var(--gd-text-main);font-size:13px}.gd-client-status{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.gd-client-status--cliente{background:color-mix(in srgb,var(--gd-emerald) 12%,transparent);color:var(--gd-emerald)}.gd-client-status--prospecto{background:rgba(245,166,35,.11);color:var(--gd-gold)}.gd-client-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;color:var(--gd-text-sec);font-size:10px}.gd-client-contact>span{display:inline-flex;align-items:center;gap:4px}.gd-client-contact .material-symbols-outlined{font-size:14px}.gd-client-card-side{display:grid;justify-items:end;gap:5px}.gd-client-policy-count{color:var(--gd-text-sec);font-size:9px}.gd-client-policy-count strong{color:var(--gd-text-main);font-size:13px}.gd-client-open{display:inline-flex;align-items:center;gap:2px;color:var(--gd-emerald);font-size:9px;font-weight:750}.gd-client-open .material-symbols-outlined{font-size:15px}.gd-directory-empty{display:grid;justify-items:center;gap:7px;padding:34px 18px;border:1px dashed var(--gd-border);border-radius:14px;color:var(--gd-text-sec);text-align:center}.gd-directory-empty>.material-symbols-outlined{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--gd-emerald) 10%,transparent);color:var(--gd-emerald)}.gd-directory-empty strong{color:var(--gd-text-main);font-size:12px}.gd-directory-empty p{max-width:440px;margin:0;font-size:10px;line-height:1.5} .gd-birthday-hero{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:17px 18px;border:1px solid color-mix(in srgb,var(--gd-emerald) 25%,var(--gd-border));border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--gd-emerald) 8%,var(--gd-card-bg)),var(--gd-card-bg))}.gd-birthday-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--gd-emerald) 15%,transparent);color:var(--gd-emerald)}.gd-birthday-icon .material-symbols-outlined{font-size:24px}.gd-birthday-hero h3{margin:2px 0 3px;color:var(--gd-text-main)!important;font-size:16px}.gd-birthday-hero p{margin:0;color:var(--gd-text-sec);font-size:10px}.gd-birthday-list{display:grid;gap:9px}.gd-birthday-card{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--gd-border);border-radius:14px;background:var(--gd-card-bg)}.gd-birthday-card.is-today{border-color:color-mix(in srgb,var(--gd-emerald) 52%,var(--gd-border));box-shadow:inset 3px 0 0 var(--gd-emerald)}.gd-birthday-date{display:grid;place-items:center;align-content:center;min-height:56px;border-radius:12px;background:var(--gd-input-bg);text-align:center}.gd-birthday-date strong{color:var(--gd-emerald);font-size:22px;line-height:1}.gd-birthday-date span{margin-top:4px;color:var(--gd-text-sec);font-size:8px;font-weight:700;text-transform:uppercase}.gd-birthday-main{min-width:0}.gd-birthday-main>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gd-birthday-main strong{color:var(--gd-text-main);font-size:12px}.gd-birthday-main p{margin:4px 0 2px;color:var(--gd-text-sec);font-size:10px}.gd-birthday-main small{color:var(--gd-text-sec);font-size:9px}.gd-birthday-today{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--gd-emerald);color:#122006;font-size:8px;font-weight:850;text-transform:uppercase}.gd-birthday-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.gd-birthday-actions .material-symbols-outlined{font-size:15px} .gd-assistant-directory-card{margin-top:14px}.gd-assistant-directory-card>.gd-panel-input{width:100%;margin:10px 0 12px}.gd-assistant-contact-grid{display:grid;gap:7px}.gd-assistant-contact-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--gd-border);border-radius:11px;background:color-mix(in srgb,var(--gd-input-bg) 70%,transparent)}.gd-assistant-contact-card>div{min-width:0;display:grid;gap:2px}.gd-assistant-contact-card strong{overflow:hidden;color:var(--gd-text-main);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.gd-assistant-contact-card>div>span{overflow:hidden;color:var(--gd-text-sec);font-size:9px;text-overflow:ellipsis;white-space:nowrap} @media (max-width:760px){.gd-client-view-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.gd-client-view-tabs button{justify-content:center}.gd-client-card{grid-template-columns:38px minmax(0,1fr)}.gd-client-card-side{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--gd-border)}.gd-birthday-card{grid-template-columns:52px minmax(0,1fr)}.gd-birthday-actions{grid-column:1/-1;justify-content:stretch}.gd-birthday-actions .gd-btn{flex:1;justify-content:center}.gd-assistant-contact-card{align-items:flex-start;flex-direction:column}.gd-sidebar-new-menu{position:fixed;left:16px;right:16px;top:auto;bottom:20px;z-index:100050}} body.light-mode .gd-sidebar-new-menu{background:var(--gd-card-bg)} .gd-birthday-period-toggle{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px;border:1px solid var(--gd-border);border-radius:11px;background:var(--gd-input-bg)}.gd-birthday-period-toggle button{min-height:31px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--gd-text-sec);font-size:9px;font-weight:800;cursor:pointer}.gd-birthday-period-toggle button:hover,.gd-birthday-period-toggle button:focus-visible{color:var(--gd-text-main);outline:none}.gd-birthday-period-toggle button.is-active{background:var(--gd-emerald);color:#122006!important} @media(max-width:760px){.gd-birthday-hero{align-items:flex-start;flex-wrap:wrap}.gd-birthday-period-toggle{width:100%;margin-left:0}.gd-birthday-period-toggle button{flex:1}} /* ===================================================================== * GUANI HUB 1.29.0 — Prospectos: contexto comercial compacto * ===================================================================== */ .gd-client-card:has(.gd-prospect-card-meta) { grid-template-columns: auto minmax(180px, 1fr) minmax(220px, .9fr) auto; align-items: center; } .gd-prospect-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 8px; } .gd-prospect-card-meta > strong { color: var(--gd-text-main); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-prospect-card-meta > small { color: var(--gd-text-sec); font-size: 11px; line-height: 1.35; } .gd-prospect-card-meta > small b { color: var(--gd-text-main); font-weight: 650; } .gd-prospect-stage { align-self: flex-start; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--gd-emerald) 10%, transparent); color: var(--gd-emerald); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; } .gd-prospect-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } @media (max-width: 980px) { .gd-client-card:has(.gd-prospect-card-meta) { grid-template-columns: auto minmax(0, 1fr) auto; } .gd-prospect-card-meta { grid-column: 2 / -1; padding: 6px 0 0; } } @media (max-width: 640px) { .gd-client-card:has(.gd-prospect-card-meta) { grid-template-columns: auto minmax(0, 1fr); } .gd-prospect-card-meta, .gd-client-card:has(.gd-prospect-card-meta) .gd-client-card-side { grid-column: 1 / -1; } .gd-client-card:has(.gd-prospect-card-meta) .gd-client-card-side { align-items: flex-start; } .gd-prospect-card-actions { justify-content: flex-start; width: 100%; } } .gd-assistant-prospect-context { display: block; margin-top: 6px; color: var(--gd-text-sec); font-size: 11px; line-height: 1.45; } .gd-assistant-prospect-context b { color: var(--gd-text-main); } /* ========================================================================== * 1.29.1 — Hotfix Mi cartera / Prospectos / tabs / campanita * ========================================================================== */ /* El CTA lateral vuelve a ser una acción directa: Nuevo Cliente. */ .gd-sidebar-new{margin:14px 10px 10px} .gd-sidebar-new .gd-sidebar-cta{width:100%;margin:0;justify-content:flex-start} /* Astra no debe alterar estados de tabs internos en dark ni light mode. */ .gd-portal .gd-client-view-tabs button, .gd-portal .gd-client-view-tabs button:visited, .gd-portal .gd-client-view-tabs button:hover, .gd-portal .gd-client-view-tabs button:focus, .gd-portal .gd-client-view-tabs button:focus-visible, .gd-portal .gd-client-view-tabs button:active, .gd-portal .gd-birthday-period-toggle button, .gd-portal .gd-birthday-period-toggle button:visited, .gd-portal .gd-birthday-period-toggle button:hover, .gd-portal .gd-birthday-period-toggle button:focus, .gd-portal .gd-birthday-period-toggle button:focus-visible, .gd-portal .gd-birthday-period-toggle button:active{ border-color:transparent !important; color:var(--gd-text-sec) !important; -webkit-text-fill-color:var(--gd-text-sec) !important; background:transparent !important; box-shadow:none !important; text-decoration:none !important; } .gd-portal .gd-client-view-tabs button:hover, .gd-portal .gd-client-view-tabs button:focus-visible, .gd-portal .gd-birthday-period-toggle button:hover, .gd-portal .gd-birthday-period-toggle button:focus-visible{ color:var(--gd-text-main) !important; -webkit-text-fill-color:var(--gd-text-main) !important; background:color-mix(in srgb,var(--gd-emerald) 7%,transparent) !important; outline:none !important; } .gd-portal .gd-client-view-tabs button.is-active, .gd-portal .gd-client-view-tabs button.is-active:visited, .gd-portal .gd-client-view-tabs button.is-active:hover, .gd-portal .gd-client-view-tabs button.is-active:focus, .gd-portal .gd-client-view-tabs button.is-active:focus-visible, .gd-portal .gd-client-view-tabs button.is-active:active, .gd-portal .gd-birthday-period-toggle button.is-active, .gd-portal .gd-birthday-period-toggle button.is-active:visited, .gd-portal .gd-birthday-period-toggle button.is-active:hover, .gd-portal .gd-birthday-period-toggle button.is-active:focus, .gd-portal .gd-birthday-period-toggle button.is-active:focus-visible, .gd-portal .gd-birthday-period-toggle button.is-active:active{ background:var(--gd-emerald) !important; border-color:var(--gd-emerald) !important; color:#122006 !important; -webkit-text-fill-color:#122006 !important; box-shadow:0 7px 18px rgba(135,191,20,.18) !important; } .gd-portal .gd-client-view-tabs button.is-active .material-symbols-outlined{ color:#122006 !important; -webkit-text-fill-color:#122006 !important; } /* La campana mantiene el lenguaje visual Guani; neutraliza el azul de Astra. */ .gd-portal .gd-notification-center__trigger, .gd-portal .gd-notification-center__trigger:visited, .gd-portal .gd-notification-center__trigger:hover, .gd-portal .gd-notification-center__trigger:focus, .gd-portal .gd-notification-center__trigger:focus-visible, .gd-portal .gd-notification-center__trigger:active{ background:color-mix(in srgb,var(--gd-card-bg) 94%,transparent) !important; border-color:var(--gd-border) !important; color:var(--gd-text-main) !important; -webkit-text-fill-color:var(--gd-text-main) !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; outline:none !important; } .gd-portal .gd-notification-center__trigger:hover, .gd-portal .gd-notification-center__trigger:focus-visible{ border-color:var(--gd-emerald) !important; color:var(--gd-emerald) !important; -webkit-text-fill-color:var(--gd-emerald) !important; background:color-mix(in srgb,var(--gd-emerald) 7%,var(--gd-card-bg)) !important; } /* ========================================================================== * 1.29.2 — Separación definitiva Mi cartera / Prospectos * ========================================================================== */ /* El tipo de contacto se informa, pero no puede cambiarse manualmente. */ .gd-portal .gd-so-field--locked-type select:disabled{ opacity:1 !important; cursor:not-allowed; color:var(--gd-text-main) !important; -webkit-text-fill-color:var(--gd-text-main) !important; background:color-mix(in srgb,var(--gd-input-bg) 88%,var(--gd-card-bg)) !important; border-color:var(--gd-border) !important; } .gd-portal .gd-so-field--locked-type select:disabled:hover, .gd-portal .gd-so-field--locked-type select:disabled:focus{ color:var(--gd-text-main) !important; -webkit-text-fill-color:var(--gd-text-main) !important; background:color-mix(in srgb,var(--gd-input-bg) 88%,var(--gd-card-bg)) !important; border-color:var(--gd-border) !important; box-shadow:none !important; } /* hidden debe ganar a los layouts grid definidos por los paneles. */ .gd-portal [data-client-view-panel][hidden], .gd-portal [data-asis-client-view-panel][hidden], .gd-portal .gd-contact-directory-panel[hidden], .gd-portal .gd-birthday-panel[hidden]{ display:none !important; } /* Badge de cumpleaños: hidden debe ocultarlo y el número conserva contraste. */ .gd-portal .gd-client-view-count[hidden]{ display:none !important; } .gd-portal .gd-client-view-tabs button.is-active .gd-client-view-count, .gd-portal .gd-client-view-tabs button.is-active:hover .gd-client-view-count, .gd-portal .gd-client-view-tabs button.is-active:focus .gd-client-view-count, .gd-portal .gd-client-view-tabs button.is-active:active .gd-client-view-count{ background:#122006 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; border:1px solid rgba(255,255,255,.16) !important; } /* Prospectos: una tarjeta por fila para que el contexto comercial respire. */ .gd-client-directory--prospects{ grid-template-columns:minmax(0,1fr) !important; gap:10px; } .gd-client-directory--prospects .gd-client-card{ grid-template-columns:46px minmax(190px,.8fr) minmax(320px,1.25fr) auto !important; align-items:center; gap:16px; padding:15px 16px; } .gd-client-directory--prospects .gd-client-card-main{ gap:7px; } .gd-client-directory--prospects .gd-prospect-card-meta{ display:grid; gap:8px; min-width:0; padding:0; border-left:1px solid var(--gd-border); padding-left:16px; } .gd-prospect-card-meta-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; } .gd-prospect-opportunity-count{ flex:0 0 auto; color:var(--gd-text-sec); font-size:9px; white-space:nowrap; } .gd-prospect-opportunity-count strong{ color:var(--gd-text-main); font-size:13px; } .gd-prospect-concept{ display:block; overflow:hidden; color:var(--gd-text-main); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .gd-prospect-detail-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 14px; } .gd-prospect-detail-grid small{ display:grid; gap:2px; min-width:0; color:var(--gd-text-sec); font-size:9px; line-height:1.35; } .gd-prospect-detail-grid small b{ color:var(--gd-text-main); font-size:8px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; } .gd-prospect-detail-grid small span{ overflow-wrap:anywhere; } .gd-client-directory--prospects .gd-prospect-card-actions{ display:grid; grid-template-columns:1fr; gap:7px; justify-items:stretch; min-width:116px; } .gd-client-directory--prospects .gd-prospect-card-actions .gd-btn{ width:100%; justify-content:center; white-space:nowrap; } @media (max-width:1080px){ .gd-client-directory--prospects .gd-client-card{ grid-template-columns:46px minmax(0,1fr) auto !important; } .gd-client-directory--prospects .gd-prospect-card-meta{ grid-column:2 / -1; padding:10px 0 0; border-left:0; border-top:1px solid var(--gd-border); } .gd-client-directory--prospects .gd-prospect-card-actions{ grid-column:2 / -1; grid-template-columns:repeat(2,minmax(0,auto)); justify-content:flex-start; min-width:0; } } @media (max-width:680px){ .gd-client-directory--prospects .gd-client-card{ grid-template-columns:40px minmax(0,1fr) !important; gap:10px; } .gd-client-directory--prospects .gd-prospect-card-meta, .gd-client-directory--prospects .gd-prospect-card-actions{ grid-column:1 / -1; } .gd-prospect-detail-grid{ grid-template-columns:1fr; } .gd-client-directory--prospects .gd-prospect-card-actions{ grid-template-columns:1fr 1fr; } } /* ===================================================================== * GUANI HUB 1.29.3 — MOBILE STICKY + REFRESCO VIVO DE DATOS * ===================================================================== */ /* Mis pendientes: en teléfonos ningún grid, badge o acción puede ensanchar la tarjeta por encima del viewport. */ @media (max-width:767px){ .gd-app-shell, .gd-assistant-shell, .gd-main-content, .gd-main-content > .gd-tab-contenido{ width:100% !important; max-width:100vw !important; min-width:0 !important; overflow-x:hidden !important; } #gd-tab-seguimientos .gd-content, #gd-asis-seguimientos .gd-content{ width:100%; max-width:100%; min-width:0; padding-right:14px; padding-left:14px; overflow-x:clip; } #gd-tab-seguimientos .gd-followups, #gd-asis-seguimientos .gd-followups, .gd-followups-filters, .gd-followups-worklist, .gd-followups-history-panel, .gd-followups-list-body, .gd-followups-list-row{ width:100% !important; max-width:100% !important; min-width:0 !important; margin-right:0 !important; margin-left:0 !important; } .gd-followups-worklist{overflow:hidden !important;} .gd-followups-list-body{overflow:visible !important;} .gd-followups-list-row{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"main" "due" "client" "owner" "state" "actions" !important; overflow:hidden; } .gd-followups-main-cell, .gd-followups-due-cell, .gd-followups-client-cell, .gd-followups-owner-cell, .gd-followups-state-cell, .gd-followups-row-actions, .gd-followups-row-labels{min-width:0 !important;max-width:100% !important;} .gd-followups-main-cell > strong, .gd-followups-main-cell > small, .gd-followups-client-cell span, .gd-followups-client-cell strong, .gd-followups-client-cell small, .gd-followups-owner-cell span{ max-width:100%; white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; } .gd-followups-row-actions{display:grid !important;grid-template-columns:1fr !important;width:100% !important;} .gd-followups-row-actions button{width:100% !important;max-width:100% !important;min-width:0 !important;} /* Trámites/Oportunidades también quedan contenidos dentro del viewport. */ .gd-commercial, .gd-stage-flow, .gd-stage-panel, .gd-stage-panel-body, .gd-stage-panel .gd-kanban-list, .gd-kanban-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box;} .gd-stage-panel{overflow:hidden;} .gd-stage-panel-head{width:100%;min-width:0;} .gd-stage-panel-title, .gd-stage-panel-metrics{min-width:0;} .gd-kanban-card h4, .gd-kanban-client, .gd-kanban-meta{overflow-wrap:anywhere;word-break:break-word;} } /* En mobile el navbar se mantiene siempre visible como la campana. Se reserva su altura para que no tape el topbar ni el primer bloque de cada sección. */ @media (max-width:1024px){ .gd-app-shell, .gd-assistant-shell{--gd-mobile-nav-height:64px;} .gd-mobile-header{ position:fixed !important; top:0; right:0; left:0; z-index:100030 !important; min-height:calc(var(--gd-mobile-nav-height) + env(safe-area-inset-top)); padding-top:calc(12px + env(safe-area-inset-top)); padding-bottom:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); } .gd-main-content{ padding-top:calc(var(--gd-mobile-nav-height) + env(safe-area-inset-top)); } .gd-section-topbar{ top:calc(var(--gd-mobile-nav-height) + env(safe-area-inset-top)) !important; z-index:34; } .gd-notification-center{ top:14px !important; margin-right: 6px; z-index:100040; } .gd-sidebar-overlay{z-index:100045;} .gd-sidebar{z-index:100050;} } /* ===================================================================== * GUANI HUB 1.29.3 — HOTFIX FINAL MOBILE MIS PENDIENTES / CAMPANA * - .gd-followups se mantiene como flex-column en todos los breakpoints. * - En mobile, la campana se alinea con los controles del header usando top:0. * ===================================================================== */ /* ===================================================================== * GUANI HUB 1.29.3 — HOTFIX MOBILE HEADER / ESPACIO SUPERIOR * Base: CSS instalado compartido por el usuario el 09/08/2026. * * El navbar mobile permanece fijo. La altura se reserva una sola vez en * .gd-main-content. Los encabezados internos de cada módulo vuelven al flujo * normal en mobile para evitar la doble compensación que generaba el bloque * vacío y el solapamiento del primer contenido. * ===================================================================== */ @media (max-width: 1024px) { .gd-section-topbar { position: relative !important; top: auto !important; } } /* ===================================================================== * GUANI HUB 1.29.5 — REFRESCO VIVO STALE-WHILE-REVALIDATE * * - Los datos ya visibles permanecen en pantalla mientras se consultan los * nuevos: no hay overlay que bloquee ni transforme el contenido. * - Skeleton solamente en primera carga real, si todavía no existe contenido. * - Los bloques que cambian reciben una entrada breve por opacidad. * - Una línea de progreso muy fina comunica refresco en segundo plano. * ===================================================================== */ .gd-main-content > .gd-tab-contenido > .gd-content { position: relative; } /* Refresco de fondo: indicador mínimo, sin tapar ni alterar el layout. */ .gd-main-content > .gd-tab-contenido.gd-live-refreshing:not(.gd-first-loading) > .gd-content::before { content: ''; position: absolute; top: 0; left: 0; z-index: 24; width: 34%; height: 2px; border-radius: 999px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--gd-emerald), transparent); opacity: .72; animation: gd-live-progress 900ms ease-in-out infinite; will-change: transform, opacity; } /* Primera carga: skeleton localizado y discreto. Nunca aparece sobre datos ya renderizados. */ .gd-main-content > .gd-tab-contenido.gd-first-loading > .gd-content::after { content: ''; display: block; width: 100%; height: 250px; margin-top: 14px; border: 1px solid var(--gd-border); border-radius: 16px; pointer-events: none; background-color: color-mix(in srgb, var(--gd-card-bg) 88%, var(--gd-bg)); background-image: linear-gradient(90deg, transparent 0%, rgba(168,230,59,.11) 48%, transparent 100%), linear-gradient(var(--gd-skeleton-line, rgba(168,230,59,.10)) 0 0), linear-gradient(var(--gd-skeleton-line, rgba(168,230,59,.10)) 0 0), linear-gradient(var(--gd-skeleton-line, rgba(168,230,59,.10)) 0 0), linear-gradient(var(--gd-skeleton-line, rgba(168,230,59,.10)) 0 0), linear-gradient(var(--gd-skeleton-line, rgba(168,230,59,.10)) 0 0); background-repeat: no-repeat; background-size: 38% 100%, 32% 14px, 62% 9px, calc(33.333% - 20px) 74px, calc(33.333% - 20px) 74px, calc(33.333% - 20px) 74px; background-position: -45% 0, 18px 22px, 18px 48px, 18px 82px, center 82px, right 18px top 82px; animation: gd-first-skeleton 1.15s ease-in-out infinite; } body:not(.light-mode) .gd-app-shell, body:not(.light-mode) .gd-assistant-shell { --gd-skeleton-line: rgba(168, 230, 59, .10); } body.light-mode .gd-app-shell, body.light-mode .gd-assistant-shell { --gd-skeleton-line: rgba(62, 91, 31, .095); } /* Solo el bloque que recibió datos nuevos hace una entrada breve. */ .gd-live-patched { animation: gd-live-patch 320ms ease-out both; } @keyframes gd-live-patch { 0% { opacity: .68; } 100% { opacity: 1; } } @keyframes gd-live-progress { 0% { transform: translateX(-105%); opacity: .25; } 45% { opacity: .8; } 100% { transform: translateX(295%); opacity: .2; } } @keyframes gd-first-skeleton { 0% { background-position: -45% 0, 18px 22px, 18px 48px, 18px 82px, center 82px, right 18px top 82px; } 100% { background-position: 145% 0, 18px 22px, 18px 48px, 18px 82px, center 82px, right 18px top 82px; } } @media (max-width: 767px) { .gd-main-content > .gd-tab-contenido.gd-first-loading > .gd-content::after { height: 300px; border-radius: 14px; background-size: 46% 100%, 48% 13px, 76% 9px, calc(100% - 28px) 62px, calc(100% - 28px) 62px, calc(100% - 28px) 62px; background-position: -55% 0, 14px 18px, 14px 42px, 14px 72px, 14px 146px, 14px 220px; } @keyframes gd-first-skeleton { 0% { background-position: -55% 0, 14px 18px, 14px 42px, 14px 72px, 14px 146px, 14px 220px; } 100% { background-position: 155% 0, 14px 18px, 14px 42px, 14px 72px, 14px 146px, 14px 220px; } } } @media (prefers-reduced-motion: reduce) { .gd-main-content > .gd-tab-contenido.gd-live-refreshing > .gd-content::before, .gd-main-content > .gd-tab-contenido.gd-first-loading > .gd-content::after, .gd-live-patched { animation: none !important; } } /* ===================================================================== * 1.30.0 — DATOS Y PRIVACIDAD + DATOS DE TRANSFERENCIA * Base: CSS canónico entregado por el usuario el 08/08/2026. * ===================================================================== */ body.gd-modal-open { overflow: hidden !important; } /* ---------- Datos y privacidad ---------- */ .gd-settings-privacy-stack { display: grid; gap: 16px; min-width: 0; } .gd-settings-privacy-stack .gd-settings-data-card { min-width: 0; } .gd-settings-privacy-stack .gd-settings-data-card > div:first-child { min-width: 0; } .gd-settings-privacy-stack .gd-settings-data-card h3 { margin: 4px 0 6px; color: var(--gd-text-main); font-size: 15px; font-weight: 760; letter-spacing: 0; text-transform: none; } .gd-settings-privacy-stack .gd-settings-data-card p { max-width: 760px; margin: 0; color: var(--gd-text-sec); font-size: 12px; line-height: 1.6; } .gd-privacy-card-kicker { display: block; color: var(--gd-emerald); font-size: 9px; font-weight: 850; letter-spacing: .09em; } .gd-privacy-danger-card { align-items: flex-start; border-color: rgba(239, 91, 91, .26) !important; background: linear-gradient(145deg, rgba(49, 25, 21, .72), rgba(24, 34, 16, .84)) !important; } .gd-privacy-card-kicker--danger { color: #ff8e8e; } .gd-privacy-impact-list { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; } .gd-privacy-impact-list li { position: relative; padding-left: 18px; color: var(--gd-text-sec); font-size: 11px; line-height: 1.55; } .gd-privacy-impact-list li::before { content: '•'; position: absolute; left: 4px; top: 0; color: #ff8e8e; font-weight: 900; } .gd-privacy-legal-note { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid rgba(239, 91, 91, .14); } .gd-privacy-legal-note a, .gd-privacy-legal-note a:visited, .gd-privacy-legal-note a:hover, .gd-privacy-legal-note a:focus, .gd-privacy-legal-note a:active { color: var(--gd-emerald) !important; text-decoration: none !important; } .gd-privacy-delete-open, .gd-privacy-delete-open:hover, .gd-privacy-delete-open:focus, .gd-privacy-delete-open:focus-visible, .gd-privacy-delete-open:active, .gd-privacy-delete-open:visited { flex: 0 0 auto; border: 1px solid rgba(239, 91, 91, .35) !important; background: rgba(239, 91, 91, .11) !important; color: #ff8e8e !important; box-shadow: none !important; text-decoration: none !important; } .gd-privacy-delete-open:hover, .gd-privacy-delete-open:focus-visible { border-color: rgba(239, 91, 91, .68) !important; background: rgba(239, 91, 91, .18) !important; } .gd-privacy-request-state { display: flex; align-items: flex-start; gap: 10px; max-width: 330px; padding: 12px 14px; border: 1px solid rgba(245, 166, 35, .28); border-radius: 11px; background: rgba(245, 166, 35, .08); } .gd-privacy-request-state > .material-symbols-outlined { color: var(--gd-gold); font-size: 20px; } .gd-privacy-request-state > div { display: grid; gap: 3px; } .gd-privacy-request-state strong { color: var(--gd-text-main); font-size: 12px; } .gd-privacy-request-state small, .gd-privacy-owner-only { color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } /* Modal de eliminación */ .gd-account-delete-modal[hidden], .gd-payment-modal[hidden] { display: none !important; } .gd-account-delete-modal, .gd-payment-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; } .gd-account-delete-backdrop, .gd-payment-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 10, 4, .76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .gd-account-delete-panel, .gd-payment-modal-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(88vh, 760px); overflow: hidden; border: 1px solid rgba(161, 220, 54, .18); border-radius: 20px; background: #101b0b; box-shadow: 0 28px 80px rgba(0, 0, 0, .48); color: var(--gd-text-main); } .gd-account-delete-panel { border-color: rgba(239, 91, 91, .30); } .gd-account-delete-panel > header, .gd-payment-modal-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid var(--gd-border); } .gd-account-delete-panel > header > div, .gd-payment-modal-panel > header > div { display: grid; gap: 4px; min-width: 0; } .gd-account-delete-panel > header > div > span, .gd-payment-modal-panel > header > div > span { color: var(--gd-emerald); font-size: 9px; font-weight: 850; letter-spacing: .1em; } .gd-account-delete-panel > header > div > span { color: #ff8e8e; } .gd-account-delete-panel > header h3, .gd-payment-modal-panel > header h3 { margin: 0; color: var(--gd-text-main); font-size: 20px; line-height: 1.25; } .gd-payment-modal-panel > header p { margin: 2px 0 0; color: var(--gd-text-sec); font-size: 11px; } .gd-account-delete-close, .gd-payment-modal-close, .gd-account-delete-close:hover, .gd-account-delete-close:focus, .gd-account-delete-close:active, .gd-payment-modal-close:hover, .gd-payment-modal-close:focus, .gd-payment-modal-close:active { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 1px solid var(--gd-border) !important; border-radius: 10px; background: var(--gd-input-bg) !important; color: var(--gd-text-sec) !important; box-shadow: none !important; cursor: pointer; } .gd-account-delete-close:hover, .gd-payment-modal-close:hover { border-color: var(--gd-emerald) !important; color: var(--gd-emerald) !important; } .gd-account-delete-body, .gd-payment-modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; } .gd-account-delete-warning, .gd-payment-missing-data { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid rgba(239, 91, 91, .24); border-radius: 12px; background: rgba(239, 91, 91, .08); } .gd-account-delete-warning > .material-symbols-outlined, .gd-payment-missing-data > .material-symbols-outlined { flex: 0 0 auto; color: #ff8e8e; font-size: 22px; } .gd-account-delete-warning p, .gd-payment-missing-data p { margin: 0; color: var(--gd-text-sec); font-size: 11px; line-height: 1.55; } .gd-account-delete-warning strong, .gd-payment-missing-data strong { color: var(--gd-text-main); } .gd-account-delete-field { display: grid; gap: 7px; margin-top: 17px; } .gd-account-delete-field > span { color: var(--gd-text-sec); font-size: 11px; font-weight: 700; } .gd-account-delete-field input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid rgba(161, 220, 54, .15); border-radius: 10px; background: #091207; color: var(--gd-text-main); font: inherit; font-size: 14px; outline: none; } .gd-account-delete-field input:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 3px rgba(135, 191, 20, .10); } .gd-account-delete-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 17px; padding: 13px; border: 1px solid var(--gd-border); border-radius: 11px; background: rgba(255, 255, 255, .02); cursor: pointer; } .gd-account-delete-check input { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: var(--gd-emerald); } .gd-account-delete-check span { color: var(--gd-text-sec); font-size: 11px; line-height: 1.5; } .gd-account-delete-message { min-height: 18px; margin-top: 12px; font-size: 11px; font-weight: 650; } .gd-account-delete-message.is-error { color: #ff8e8e; } .gd-account-delete-message.is-success { color: var(--gd-success); } .gd-account-delete-panel > footer, .gd-payment-modal-panel > footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 15px 24px; border-top: 1px solid var(--gd-border); background: rgba(0, 0, 0, .08); } .gd-account-delete-confirm-btn, .gd-account-delete-confirm-btn:hover, .gd-account-delete-confirm-btn:focus, .gd-account-delete-confirm-btn:focus-visible, .gd-account-delete-confirm-btn:active, .gd-account-delete-confirm-btn:visited { border: 1px solid #ef5b5b !important; background: #ef5b5b !important; color: #170706 !important; box-shadow: none !important; } .gd-account-delete-confirm-btn:hover, .gd-account-delete-confirm-btn:focus-visible { background: #ff7474 !important; border-color: #ff7474 !important; } .gd-account-delete-confirm-btn.is-loading, .gd-account-delete-confirm-btn:disabled { cursor: wait; opacity: .62; } /* ---------- Medio de pago / transferencia ---------- */ .gd-subscription-payment-fact { align-content: start; } .gd-payment-details-open, .gd-payment-details-open:hover, .gd-payment-details-open:focus, .gd-payment-details-open:focus-visible, .gd-payment-details-open:active, .gd-payment-details-open:visited { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 8px; padding: 6px 9px; border: 1px solid rgba(135, 191, 20, .27) !important; border-radius: 8px; background: rgba(135, 191, 20, .08) !important; color: var(--gd-emerald) !important; font: inherit; font-size: 10px; font-weight: 750; line-height: 1.15; box-shadow: none !important; cursor: pointer; text-decoration: none !important; } .gd-payment-details-open:hover, .gd-payment-details-open:focus-visible { border-color: var(--gd-emerald) !important; background: rgba(135, 191, 20, .15) !important; } .gd-payment-details-open .material-symbols-outlined { font-size: 15px; } .gd-payment-bank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gd-payment-bank-grid > div { display: grid; gap: 5px; min-width: 0; padding: 13px 14px; border: 1px solid var(--gd-border); border-radius: 11px; background: var(--gd-input-bg); } .gd-payment-bank-grid > div > span { color: var(--gd-text-sec); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .gd-payment-bank-grid > div > strong, .gd-payment-clabe-row > div > strong { min-width: 0; color: var(--gd-text-main); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .gd-payment-clabe-row { grid-column: 1 / -1; } .gd-payment-clabe-row > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .gd-payment-copy-clabe, .gd-payment-copy-clabe:hover, .gd-payment-copy-clabe:focus, .gd-payment-copy-clabe:focus-visible, .gd-payment-copy-clabe:active { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(135, 191, 20, .30) !important; border-radius: 8px; background: rgba(135, 191, 20, .11) !important; color: var(--gd-emerald) !important; font: inherit; font-size: 10px; font-weight: 750; box-shadow: none !important; cursor: pointer; } .gd-payment-copy-clabe:hover, .gd-payment-copy-clabe:focus-visible, .gd-payment-copy-clabe.is-copied { background: var(--gd-emerald) !important; color: #142006 !important; } .gd-payment-copy-clabe .material-symbols-outlined { font-size: 15px; } .gd-payment-reference-note { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 0; padding: 11px 12px; border-radius: 10px; background: rgba(135, 191, 20, .06); color: var(--gd-text-sec); font-size: 10px; line-height: 1.5; flex-direction: column; } .gd-payment-reference-note .material-symbols-outlined { flex: 0 0 auto; color: var(--gd-emerald); font-size: 17px; } .gd-payment-copy-status { min-height: 16px; margin-top: 7px; color: var(--gd-success); font-size: 10px; text-align: right; } .gd-payment-missing-data { border-color: rgba(245, 166, 35, .26); background: rgba(245, 166, 35, .08); } .gd-payment-missing-data > .material-symbols-outlined { color: var(--gd-gold); } .gd-payment-missing-data > div { display: grid; gap: 5px; } .gd-payment-missing-data a, .gd-payment-missing-data a:visited, .gd-payment-missing-data a:hover, .gd-payment-missing-data a:focus, .gd-payment-missing-data a:active { width: max-content; color: var(--gd-emerald) !important; font-size: 11px; font-weight: 750; text-decoration: none !important; } /* Light mode: acompaña el esquema claro del CRM. */ body.light-mode .gd-privacy-danger-card { border-color: rgba(185, 28, 28, .20) !important; background: linear-gradient(145deg, rgba(254, 242, 242, .96), rgba(255, 255, 255, .94)) !important; } body.light-mode .gd-account-delete-panel, body.light-mode .gd-payment-modal-panel { background: #ffffff; box-shadow: 0 24px 70px rgba(15, 23, 42, .20); } body.light-mode .gd-account-delete-field input, body.light-mode .gd-payment-bank-grid > div { background: var(--gd-input-bg); border-color: rgba(71, 104, 0, .14); } body.light-mode .gd-account-delete-check { background: rgba(15, 23, 42, .025); } @media (max-width: 640px) { .gd-settings-privacy-stack { gap: 14px; } .gd-settings-privacy-stack .gd-settings-data-card, .gd-privacy-danger-card { align-items: stretch; flex-direction: column; gap: 16px; } .gd-settings-privacy-stack .gd-settings-data-card > .gd-boton, .gd-privacy-delete-open, .gd-privacy-request-state { width: 100%; max-width: none; justify-content: center; } .gd-account-delete-modal, .gd-payment-modal { align-items: flex-end; padding: 0; } .gd-account-delete-panel, .gd-payment-modal-panel { width: 100%; max-height: min(92dvh, 760px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; } .gd-account-delete-panel > header, .gd-payment-modal-panel > header { padding: 18px 16px 15px; } .gd-account-delete-panel > header h3, .gd-payment-modal-panel > header h3 { font-size: 18px; } .gd-account-delete-body, .gd-payment-modal-body { padding: 17px 16px; } .gd-account-delete-panel > footer, .gd-payment-modal-panel > footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } .gd-account-delete-panel > footer { align-items: stretch; flex-direction: column-reverse; } .gd-account-delete-panel > footer .gd-boton, .gd-payment-modal-panel > footer .gd-boton { width: 100%; justify-content: center; } .gd-payment-bank-grid { grid-template-columns: 1fr; } .gd-payment-clabe-row { grid-column: auto; } .gd-payment-clabe-row > div { align-items: stretch; flex-direction: column; } .gd-payment-copy-clabe { width: 100%; justify-content: center; } .gd-payment-copy-status { text-align: center; } .gd-payment-details-open { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .gd-account-delete-modal *, .gd-payment-modal * { transition: none !important; } } /* ===================================================================== * 1.30.1 — CUENTA Y EQUIPO: DATOS DE PAGO + INFORMAR TRANSFERENCIA * Base: CSS canónico compartido por el usuario el 09/08/2026 05:36. * ===================================================================== */ /* Dentro de .gd-subscription-facts existe una regla genérica para * que aplica uppercase. Material Symbols funciona por ligaduras y no debe * transformar el nombre del icono (account_balance -> ACCOUNT_BALANCE). */ .gd-subscription-facts .material-symbols-outlined, .gd-payment-modal .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; font-style: normal !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; white-space: nowrap !important; word-wrap: normal !important; font-feature-settings: 'rlig' 1, 'liga' 1 !important; font-variation-settings: 'FILL' 0 !important; } .gd-subscription-payment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; justify-content: center; } .gd-subscription-payment-actions .gd-payment-details-open { margin-top: 0; } .gd-payment-report-open, .gd-payment-report-open:hover, .gd-payment-report-open:focus, .gd-payment-report-open:focus-visible, .gd-payment-report-open:active, .gd-payment-report-open:visited { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; width: max-content; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(135, 191, 20, .42) !important; border-radius: 8px; background: var(--gd-emerald) !important; color: #142006 !important; font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer; } .gd-payment-report-open:hover, .gd-payment-report-open:focus-visible { background: #a8e63b !important; border-color: #a8e63b !important; color: #142006 !important; outline: none; } .gd-payment-report-open .material-symbols-outlined { font-size: 15px !important; color: currentColor !important; } .gd-payment-reference-note strong { color: var(--gd-text-main); font-weight: 800; } .gd-payment-modal-actions .gd-payment-report-open--primary { min-height: 38px; padding-inline: 14px; } @media (max-width: 640px) { .gd-subscription-payment-actions { align-items: stretch; flex-direction: column; width: 100%; } .gd-subscription-payment-actions .gd-payment-details-open, .gd-subscription-payment-actions .gd-payment-report-open { justify-content: center; width: 100%; } .gd-payment-modal-actions { align-items: stretch !important; flex-direction: column-reverse; } .gd-payment-modal-actions .gd-payment-report-open, .gd-payment-modal-actions .gd-boton { justify-content: center; width: 100%; } } /* ===================================================================== * 109. CORREO CONECTADO + DOCUMENTACIÓN TEMPORAL — GUANI HUB 1.31.0 * Base: CSS canónico instalado compartido el 09/08/2026. * ===================================================================== */ /* ---------- Integraciones: correo para clientes ---------- */ .gd-client-mail-settings { margin-top: 18px; padding: 18px; border: 1px solid rgba(161, 220, 54, .10); border-radius: 15px; background: rgba(24, 34, 16, .84); box-shadow: none; } body.light-mode .gd-client-mail-settings { border-color: rgba(71, 104, 0, .13); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 25px rgba(15, 23, 42, .055); } .gd-client-mail-settings .gd-settings-webhook-heading { margin: 0 0 14px; padding: 0; } .gd-client-mail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gd-client-mail-option { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--gd-border); border-radius: 12px; background: color-mix(in srgb, var(--gd-input-bg) 80%, transparent); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } .gd-client-mail-option.gd-is-selected { border-color: rgba(161, 220, 54, .48); background: rgba(161, 220, 54, .075); box-shadow: inset 0 0 0 1px rgba(161, 220, 54, .055); } .gd-client-mail-option > div:nth-child(2) { min-width: 0; } .gd-client-mail-option strong, .gd-client-mail-option p, .gd-client-mail-option small { display: block; } .gd-client-mail-option strong { margin-bottom: 4px; color: var(--gd-text-main); font-size: 13px; line-height: 1.3; } .gd-client-mail-option p { margin: 0; color: var(--gd-text-sec); font-size: 11px; line-height: 1.5; } .gd-client-mail-option small { margin-top: 6px; overflow-wrap: anywhere; color: var(--gd-emerald); font-size: 10px; font-weight: 650; } .gd-client-mail-option__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(161, 220, 54, .17); border-radius: 11px; background: rgba(161, 220, 54, .085); color: var(--gd-emerald); font-size: 16px; font-weight: 850; } .gd-client-mail-option__icon .material-symbols-outlined { font-size: 21px; text-transform: none !important; } .gd-client-mail-option__icon--google { background: rgba(255, 255, 255, .055); color: var(--gd-text-main); } .gd-client-mail-option__icon--microsoft { background: rgba(66, 133, 244, .10); color: #7fb0ff; } body.light-mode .gd-client-mail-option__icon--microsoft { color: #235fb4; } .gd-client-mail-option__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .gd-client-mail-option__actions form { margin: 0; } .gd-client-mail-option__actions .gd-boton { min-height: 36px; padding: 8px 12px; font-size: 11px; } .gd-client-mail-provider-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.5fr) auto; align-items: end; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--gd-border); border-radius: 12px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); } .gd-client-mail-provider-form label { grid-column: 1; align-self: center; margin: 0; color: var(--gd-text-sec); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .gd-client-mail-provider-form select { grid-column: 2; width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--gd-border); border-radius: 9px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 12px; outline: none; } .gd-client-mail-provider-form select:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 2px rgba(135, 191, 20, .10); } .gd-client-mail-provider-form .gd-boton { grid-column: 3; min-height: 42px; } .gd-client-mail-notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--gd-border); border-radius: 10px; font-size: 11px; line-height: 1.45; } .gd-client-mail-notice p { margin: 0; } .gd-client-mail-notice .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; text-transform: none !important; } .gd-client-mail-notice--success { border-color: rgba(53, 211, 153, .28); background: rgba(53, 211, 153, .08); color: var(--gd-success); } .gd-client-mail-notice--error { border-color: rgba(239, 91, 91, .28); background: rgba(239, 91, 91, .08); color: var(--gd-danger); } .gd-settings-info-banner--soft { margin-top: 10px; opacity: .86; } /* Evita que Astra modifique botones de las conexiones. */ .gd-client-mail-settings .gd-boton, .gd-client-mail-settings .gd-boton:visited, .gd-client-mail-settings .gd-boton:hover, .gd-client-mail-settings .gd-boton:focus, .gd-client-mail-settings .gd-boton:focus-visible, .gd-client-mail-settings .gd-boton:active { text-decoration: none !important; } .gd-client-mail-settings .gd-boton-primario, .gd-client-mail-settings .gd-boton-primario:visited, .gd-client-mail-settings .gd-boton-primario:hover, .gd-client-mail-settings .gd-boton-primario:focus, .gd-client-mail-settings .gd-boton-primario:active { border-color: #a1dc36 !important; background: #a1dc36 !important; color: #233600 !important; } /* ---------- Compatibilidad visual con filas heredadas de Renovación ---------- */ .gd-reminder-type-row--fixed { border-color: rgba(161, 220, 54, .20) !important; background: rgba(161, 220, 54, .045) !important; } .gd-reminder-type-row--fixed input:disabled, .gd-reminder-type-row--fixed select:disabled { cursor: default; opacity: .78; } .gd-reminder-type-row--fixed .gd-reminder-days { color: var(--gd-emerald); } /* ---------- Plantillas de envío documental ---------- */ .gd-document-template-settings { display: grid; gap: 12px; margin-bottom: 18px; } .gd-document-template-editor { display: grid; gap: 11px; padding: 15px; border: 1px solid var(--gd-border); border-radius: 12px; background: color-mix(in srgb, var(--gd-input-bg) 76%, transparent); } .gd-document-template-editor h4 { margin: 0; color: var(--gd-text-main); font-size: 13px; } .gd-document-template-editor label { display: grid; gap: 6px; color: var(--gd-text-sec); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .gd-document-template-editor input, .gd-document-template-editor textarea { width: 100%; border: 1px solid var(--gd-border) !important; border-radius: 9px !important; background: var(--gd-input-bg) !important; color: var(--gd-text-main) !important; font-family: inherit !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: normal !important; line-height: 1.55; text-transform: none !important; outline: none; } .gd-document-template-editor input { min-height: 42px; padding: 9px 12px; } .gd-document-template-editor textarea { min-height: 150px; padding: 12px; resize: vertical; } .gd-document-template-editor input:focus, .gd-document-template-editor textarea:focus { border-color: var(--gd-emerald) !important; box-shadow: 0 0 0 2px rgba(135, 191, 20, .10) !important; } .gd-template-library--automatic { margin-top: 4px; } /* ---------- Mi cartera: estado y acción documental por póliza ---------- */ .gd-client-policy-list { display: grid; gap: 8px; } .gd-client-policy-list .gd-client-policy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 13px; border: 1px solid var(--gd-border); border-radius: 12px; background: color-mix(in srgb, var(--gd-card-bg) 88%, transparent); } .gd-client-policy-main { display: grid; gap: 3px; min-width: 0; } .gd-client-policy-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .gd-policy-document-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(161, 220, 54, .17); border-radius: 10px; background: rgba(161, 220, 54, .055); } .gd-policy-document-row--sent { border-color: rgba(53, 211, 153, .18); background: rgba(53, 211, 153, .045); } .gd-policy-document-copy { display: flex; align-items: flex-start; gap: 9px; min-width: 0; } .gd-policy-document-copy > .material-symbols-outlined { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: rgba(161, 220, 54, .10); color: var(--gd-emerald); font-size: 18px; text-transform: none !important; } .gd-policy-document-row--sent .gd-policy-document-copy > .material-symbols-outlined { background: rgba(53, 211, 153, .10); color: var(--gd-success); } .gd-policy-document-copy > div { display: grid; gap: 2px; min-width: 0; } .gd-policy-document-copy strong { color: var(--gd-text-main); font-size: 11px; line-height: 1.35; } .gd-policy-document-copy small { color: var(--gd-text-sec); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; } .gd-policy-document-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; } .gd-document-state { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid rgba(161, 220, 54, .18); border-radius: 999px; background: rgba(161, 220, 54, .08); color: var(--gd-emerald); font-size: 8px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; } .gd-document-state--sent { border-color: rgba(53, 211, 153, .22); background: rgba(53, 211, 153, .08); color: var(--gd-success); } .gd-document-state--error { border-color: rgba(239, 91, 91, .24); background: rgba(239, 91, 91, .08); color: var(--gd-danger); } .gd-document-action { min-height: 34px; padding: 7px 10px; font-size: 10px; } .gd-document-action .material-symbols-outlined { font-size: 16px; text-transform: none !important; } .gd-document-action, .gd-document-action:visited, .gd-document-action:hover, .gd-document-action:focus, .gd-document-action:focus-visible, .gd-document-action:active { border: 1px solid #a1dc36 !important; background: #a1dc36 !important; color: #233600 !important; text-decoration: none !important; } /* ---------- Modal / bottom sheet de documentación ---------- */ body.gd-document-modal-open { overflow: hidden; } .gd-document-modal[hidden], .gd-document-modal [hidden] { display: none !important; } .gd-document-modal { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 18px; transition: opacity 420ms ease; } .gd-document-modal.gd-is-fading { opacity: 0; pointer-events: none; } .gd-document-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 9, 3, .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .gd-document-modal__panel { position: relative; z-index: 1; display: flex; width: min(720px, 100%); max-height: min(88vh, 860px); max-height: min(88dvh, 860px); flex-direction: column; overflow: hidden; border: 1px solid rgba(161, 220, 54, .18); border-radius: 18px; background: #121f0c; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } body.light-mode .gd-document-modal__panel { border-color: rgba(71, 104, 0, .18); background: #fbfdf8; box-shadow: 0 30px 70px rgba(15, 23, 42, .16); } .gd-document-modal__panel > header, .gd-document-modal__panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; } .gd-document-modal__panel > header { padding: 17px 20px; border-bottom: 1px solid var(--gd-border); } .gd-document-modal__panel > header > div { min-width: 0; } .gd-document-modal__panel > header h3 { margin: 2px 0 0; color: var(--gd-text-main); font-size: 17px; line-height: 1.25; } .gd-document-modal__eyebrow { color: var(--gd-emerald); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .gd-document-modal__panel > header button { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: 1px solid var(--gd-border) !important; border-radius: 10px; background: var(--gd-input-bg) !important; color: var(--gd-text-main) !important; cursor: pointer; } .gd-document-modal__panel > header button .material-symbols-outlined { font-size: 20px; text-transform: none !important; } .gd-document-modal__body { display: grid; gap: 13px; min-height: 0; padding: 17px 20px 20px; overflow-y: auto; overscroll-behavior: contain; } .gd-document-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gd-document-summary > div { display: grid; gap: 3px; min-width: 0; padding: 10px 11px; border: 1px solid var(--gd-border); border-radius: 9px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); } .gd-document-summary span, .gd-document-field > span { color: var(--gd-text-sec); font-size: 8px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; } .gd-document-summary strong { overflow-wrap: anywhere; color: var(--gd-text-main); font-size: 11px; line-height: 1.35; } .gd-document-privacy-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(161, 220, 54, .18); border-radius: 10px; background: rgba(161, 220, 54, .06); } .gd-document-privacy-note .material-symbols-outlined { flex: 0 0 auto; color: var(--gd-emerald); font-size: 20px; text-transform: none !important; } .gd-document-privacy-note p { margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.55; } .gd-document-privacy-note strong { color: var(--gd-text-main); } .gd-document-field { display: grid; gap: 5px; } .gd-document-field input, .gd-document-field textarea { width: 100%; border: 1px solid var(--gd-border) !important; border-radius: 9px !important; background: var(--gd-input-bg) !important; color: var(--gd-text-main) !important; font: inherit !important; font-size: 11px !important; line-height: 1.5; outline: none; } .gd-document-field input { min-height: 40px; padding: 8px 11px; } .gd-document-field textarea { min-height: 128px; padding: 10px 11px; resize: vertical; } .gd-document-field input[readonly], .gd-document-field textarea[readonly] { opacity: .9; cursor: default; } .gd-document-dropzone { position: relative; display: grid; place-items: center; gap: 5px; min-height: 112px; padding: 16px; border: 1.5px dashed rgba(161, 220, 54, .30); border-radius: 11px; background: rgba(161, 220, 54, .035); color: var(--gd-text-main); text-align: center; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; } .gd-document-dropzone:hover, .gd-document-dropzone:focus-within { border-color: var(--gd-emerald); background: rgba(161, 220, 54, .07); } .gd-document-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .gd-document-dropzone .material-symbols-outlined { color: var(--gd-emerald); font-size: 27px; text-transform: none !important; } .gd-document-dropzone strong { font-size: 11px; } .gd-document-dropzone small { color: var(--gd-text-sec); font-size: 9px; } .gd-document-file-list { display: grid; gap: 7px; } .gd-document-file-list__empty { margin: 0; padding: 8px 0; color: var(--gd-text-sec); font-size: 10px; font-style: italic; text-align: center; } .gd-document-file-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--gd-border); border-radius: 9px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); } .gd-document-file-item > .material-symbols-outlined { flex: 0 0 auto; color: #e15c55; font-size: 20px; text-transform: none !important; } .gd-document-file-item > div { display: grid; gap: 2px; min-width: 0; } .gd-document-file-item strong { overflow: hidden; color: var(--gd-text-main); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .gd-document-file-item small { color: var(--gd-text-sec); font-size: 8px; } .gd-document-error { margin: 0; padding: 9px 11px; border: 1px solid rgba(239, 91, 91, .26); border-radius: 9px; background: rgba(239, 91, 91, .08); color: var(--gd-danger); font-size: 10px; line-height: 1.45; } .gd-document-modal__panel > footer { justify-content: flex-end; padding: 13px 20px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gd-border); } .gd-document-modal__panel > footer .gd-boton { min-height: 39px; } .gd-document-modal__panel > footer .gd-boton-primario, .gd-document-modal__panel > footer .gd-boton-primario:visited, .gd-document-modal__panel > footer .gd-boton-primario:hover, .gd-document-modal__panel > footer .gd-boton-primario:focus, .gd-document-modal__panel > footer .gd-boton-primario:active { border: 1px solid #a1dc36 !important; background: #a1dc36 !important; color: #233600 !important; } .gd-document-progress { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; padding: 28px; background: rgba(10, 19, 7, .94); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); text-align: center; } body.light-mode .gd-document-progress { background: rgba(250, 253, 247, .96); } .gd-document-progress__spinner { width: 42px; height: 42px; border: 3px solid rgba(161, 220, 54, .16); border-top-color: var(--gd-emerald); border-radius: 50%; animation: gd-document-spin 820ms linear infinite; } .gd-document-progress.gd-is-success .gd-document-progress__spinner { position: relative; border-color: var(--gd-success); animation: none; } .gd-document-progress.gd-is-success .gd-document-progress__spinner::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gd-success); font-size: 21px; font-weight: 900; } .gd-document-progress strong { color: var(--gd-text-main); font-size: 14px; } .gd-document-progress p { max-width: 430px; margin: 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.55; } @keyframes gd-document-spin { to { transform: rotate(360deg); } } @media (max-width: 1100px) { .gd-client-mail-grid { grid-template-columns: 1fr; } .gd-client-mail-provider-form { grid-template-columns: minmax(0, 1fr) auto; } .gd-client-mail-provider-form label { grid-column: 1 / -1; } .gd-client-mail-provider-form select { grid-column: 1; } .gd-client-mail-provider-form .gd-boton { grid-column: 2; } } @media (max-width: 767px) { .gd-client-mail-settings { margin-top: 14px; padding: 14px; } .gd-client-mail-option { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; } .gd-client-mail-option__icon { width: 38px; height: 38px; } .gd-client-mail-option__actions { align-items: stretch; flex-direction: column; } .gd-client-mail-option__actions form, .gd-client-mail-option__actions .gd-boton { width: 100%; } .gd-client-mail-provider-form { grid-template-columns: 1fr; align-items: stretch; } .gd-client-mail-provider-form label, .gd-client-mail-provider-form select, .gd-client-mail-provider-form .gd-boton { grid-column: 1; width: 100%; } .gd-policy-document-row { align-items: stretch; flex-direction: column; } .gd-policy-document-actions { align-items: stretch; justify-content: flex-start; flex-direction: column; width: 100%; } .gd-policy-document-actions .gd-document-state { align-self: flex-start; } .gd-document-action { width: 100%; } .gd-document-modal { align-items: end; padding: 0; } .gd-document-modal__panel { width: 100%; max-height: calc(100dvh - max(10px, env(safe-area-inset-top))); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 18px 18px 0 0; } .gd-document-modal__panel > header, .gd-document-modal__body, .gd-document-modal__panel > footer { padding-right: 15px; padding-left: 15px; } .gd-document-summary { grid-template-columns: 1fr; } .gd-document-modal__panel > footer { align-items: stretch; flex-direction: column-reverse; } .gd-document-modal__panel > footer .gd-boton { justify-content: center; width: 100%; } .gd-document-template-editor { padding: 12px; } } @media (max-width: 520px) { .gd-client-policy-list .gd-client-policy-row { grid-template-columns: 1fr; } .gd-client-policy-status { justify-content: flex-start; } .gd-policy-document-row { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { .gd-document-modal, .gd-client-mail-option, .gd-document-dropzone { transition: none !important; } .gd-document-progress__spinner { animation-duration: 1.6s; } } /* ====================================================================== GUANI HUB 1.31.1 · DOCUMENTACIÓN / CORREO / FILTROS DE CARTERA Base: CSS canónico instalado + ajustes acumulados 1.31.0. Los iconos nuevos de este bloque usan SVG inline para no depender de ligaduras/fuentes Material Symbols incompletas. ====================================================================== */ .gd-ui-svg-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:20px; height:20px; line-height:1; text-transform:none !important; letter-spacing:0 !important; } .gd-ui-svg-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .gd-settings-section-icon.gd-ui-svg-icon { width:42px; height:42px; padding:10px; box-sizing:border-box; } .gd-client-mail-option__icon.gd-ui-svg-icon { width:42px; height:42px; padding:10px; box-sizing:border-box; } .gd-settings-info-banner > .gd-ui-svg-icon, .gd-client-mail-notice > .gd-ui-svg-icon { width:22px; height:22px; margin-top:1px; color:var(--gd-emerald); } .gd-client-mail-callback { display:block !important; margin-top:8px; color:var(--gd-text-sec) !important; font-size:9px !important; line-height:1.45; word-break:break-word; } .gd-client-mail-callback code { display:block; margin-top:4px; padding:6px 8px; border:1px solid var(--gd-border); border-radius:7px; background:var(--gd-input-bg); color:var(--gd-text-main); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:8px; white-space:normal; word-break:break-all; } .gd-portfolio-filter-tabs { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:5px; border:1px solid var(--gd-border); border-radius:12px; background:color-mix(in srgb,var(--gd-input-bg) 82%,transparent); } .gd-portfolio-filter-tabs button, .gd-portfolio-filter-tabs button:visited, .gd-portfolio-filter-tabs button:hover, .gd-portfolio-filter-tabs button:focus, .gd-portfolio-filter-tabs button:focus-visible, .gd-portfolio-filter-tabs button:active { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:7px 11px; border:1px solid transparent !important; border-radius:9px !important; background:transparent !important; box-shadow:none !important; color:var(--gd-text-sec) !important; font:inherit; font-size:10px; font-weight:750; line-height:1.1; text-decoration:none !important; cursor:pointer; } .gd-portfolio-filter-tabs button:hover, .gd-portfolio-filter-tabs button:focus-visible { border-color:color-mix(in srgb,var(--gd-emerald) 28%,var(--gd-border)) !important; color:var(--gd-text-main) !important; } .gd-portfolio-filter-tabs button.is-active, .gd-portfolio-filter-tabs button.is-active:hover, .gd-portfolio-filter-tabs button.is-active:focus, .gd-portfolio-filter-tabs button.is-active:active { border-color:var(--gd-emerald) !important; background:var(--gd-emerald) !important; color:#102006 !important; } .gd-portfolio-filter-tabs button > span { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:color-mix(in srgb,var(--gd-text-main) 8%,transparent); color:inherit; font-size:8px; font-weight:850; } .gd-portfolio-filter-tabs button.is-active > span { background:rgba(10,28,3,.13); color:#102006 !important; } .gd-portfolio-filter-tabs--assistant { margin:10px 0 2px; } .gd-client-doc-quick { display:flex; align-items:center; justify-content:flex-end; gap:9px; max-width:430px; } .gd-client-doc-quick__meta { display:grid; gap:2px; min-width:0; text-align:right; } .gd-client-doc-quick__meta b { color:var(--gd-emerald); font-size:9px; font-weight:850; } .gd-client-doc-quick__meta small { color:var(--gd-text-sec); font-size:8px; white-space:normal; } .gd-client-doc-button, .gd-client-doc-button:visited, .gd-client-doc-button:hover, .gd-client-doc-button:focus, .gd-client-doc-button:focus-visible, .gd-client-doc-button:active { display:inline-flex !important; align-items:center; justify-content:center; gap:6px; white-space:nowrap; background:var(--gd-emerald) !important; border-color:var(--gd-emerald) !important; color:#102006 !important; box-shadow:none !important; text-decoration:none !important; } .gd-client-doc-button .gd-ui-svg-icon { width:15px;height:15px; } .gd-assistant-contact-card__main { min-width:0;display:grid;gap:2px; } .gd-assistant-contact-card__actions { display:flex !important; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .gd-policy-document-row { grid-column:1/-1; flex-direction: column; align-items:center; gap:16px; width:100%; margin-top:11px; padding:14px !important; border:1px solid color-mix(in srgb,var(--gd-emerald) 28%,var(--gd-border)) !important; border-radius:12px !important; background:color-mix(in srgb,var(--gd-emerald) 7%,var(--gd-card-bg)) !important; box-sizing:border-box; } .gd-policy-document-copy { display:flex !important; align-items:flex-start; gap:10px; min-width:0; } .gd-policy-document-copy > .gd-ui-svg-icon { width:34px; height:34px; padding:8px; box-sizing:border-box; border-radius:9px; background:color-mix(in srgb,var(--gd-emerald) 12%,transparent); color:var(--gd-emerald); } .gd-policy-document-copy > div { display:grid;gap:3px;min-width:0; } .gd-policy-document-copy strong { color:var(--gd-text-main);font-size:11px;line-height:1.3; } .gd-policy-document-copy small { color:var(--gd-text-sec);font-size:9px;line-height:1.45;white-space:normal; } .gd-policy-document-eyebrow { color:var(--gd-emerald);font-size:7px;font-weight:850;letter-spacing:.08em; } .gd-policy-document-actions { display:flex !important; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; } .gd-document-action, .gd-document-action:visited, .gd-document-action:hover, .gd-document-action:focus, .gd-document-action:focus-visible, .gd-document-action:active { display:inline-flex !important; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 12px !important; background:var(--gd-emerald) !important; border:1px solid var(--gd-emerald) !important; border-radius:9px !important; color:#102006 !important; font-size:9px !important; font-weight:800 !important; line-height:1.15 !important; white-space:nowrap; text-decoration:none !important; box-shadow:none !important; } .gd-document-action .gd-ui-svg-icon { width:15px;height:15px; } .gd-policy-document-row--sent { background:color-mix(in srgb,var(--gd-emerald) 4%,var(--gd-card-bg)) !important; } .gd-document-modal [data-gd-document-close] > svg, .gd-document-modal [data-gd-document-close] .gd-ui-svg-icon { width:18px;height:18px; } .gd-document-modal__panel > header > button[data-gd-document-close] > svg { fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; } .gd-document-privacy-note > .gd-ui-svg-icon, .gd-document-dropzone > .gd-ui-svg-icon { color:var(--gd-emerald); } .gd-document-file-item > .gd-ui-svg-icon { width:28px;height:28px;color:var(--gd-emerald); } .gd-document-modal [data-gd-document-send] .gd-ui-svg-icon { width:16px;height:16px; } @media (max-width:760px) { .gd-portfolio-filter-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;box-sizing:border-box; } .gd-portfolio-filter-tabs button { width:100%;min-width:0;padding-inline:7px;font-size:9px; } .gd-client-card-side { align-items:stretch;flex-wrap:wrap;gap:8px; } .gd-client-doc-quick { width:100%;max-width:none;align-items:stretch;flex-direction:column; } .gd-client-doc-quick__meta { text-align:left; } .gd-client-doc-button { width:100%; } .gd-assistant-contact-card__actions { width:100%;justify-content:stretch; } .gd-assistant-contact-card__actions .gd-client-doc-button { flex:1 1 100%; } .gd-policy-document-row { grid-template-columns:1fr;gap:11px;padding:12px !important; } .gd-policy-document-actions { justify-content:stretch;align-items:stretch;flex-direction:column; } .gd-document-action { width:100%;white-space:normal; } .gd-client-mail-callback code { font-size:7.5px; } } /* 1.31.1 · múltiples envíos documentales visibles por cliente */ .gd-client-doc-quick-list { display:grid; gap:7px; min-width:min(430px, 100%); max-width:520px; } .gd-client-doc-quick-list .gd-client-doc-quick { max-width:none; padding:7px 8px; border:1px solid color-mix(in srgb,var(--gd-emerald) 18%,var(--gd-border)); border-radius:9px; background:color-mix(in srgb,var(--gd-emerald) 4%,transparent); } @media (max-width:760px) { .gd-client-doc-quick-list { min-width:0;width:100%;max-width:none; } } /* ===================================================================== * GUANI HUB 1.32.0 — CATÁLOGO MAESTRO DE SEGUROS * Aseguradora → Ramo / tipo → Producto / plan, colaboración moderada. * Nuevos iconos: SVG inline para no depender de ligaduras no incluidas. * ===================================================================== */ .gd-catalog-company-field, .gd-catalog-product-field { position: relative; min-width: 0; } .gd-catalog-missing-link, .gd-catalog-missing-link:visited, .gd-catalog-missing-link:hover, .gd-catalog-missing-link:focus, .gd-catalog-missing-link:active { display: inline-flex !important; align-items: center; justify-content: flex-start; width: max-content; max-width: 100%; margin-top: 7px; padding: 3px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--gd-emerald) !important; font: inherit; font-size: 10px !important; font-weight: 750 !important; line-height: 1.35; text-align: left; text-decoration: none !important; cursor: pointer; } .gd-catalog-missing-link:hover, .gd-catalog-missing-link:focus-visible { text-decoration: underline !important; text-underline-offset: 3px; outline: none; } .gd-catalog-ramo-step { display: grid; gap: 6px; margin: 0 0 11px; animation: gd-catalog-soft-enter 180ms ease both; } .gd-catalog-ramo-step > label { margin: 0 !important; } .gd-catalog-ramo-select, .gd-catalog-product-field .gd-product-catalog-select { transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .gd-catalog-ramo-other[hidden] { display: none !important; } .gd-catalog-share-option { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px !important; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 20%, var(--gd-border)); border-radius: 9px; background: color-mix(in srgb, var(--gd-emerald) 5%, var(--gd-input-bg)); color: var(--gd-text-sec) !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.45; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } .gd-catalog-share-option[hidden] { display: none !important; } .gd-catalog-share-option input[type="checkbox"] { flex: 0 0 auto; width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--gd-emerald); } .gd-catalog-product-field.is-catalog-loading::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, var(--gd-emerald) 45%, transparent 100%); background-size: 220% 100%; animation: gd-catalog-loading 950ms linear infinite; pointer-events: none; } .gd-catalog-product-field.is-catalog-loading select { opacity: .72; } @keyframes gd-catalog-loading { from { background-position: 110% 0; } to { background-position: -110% 0; } } @keyframes gd-catalog-soft-enter { from { opacity: 0; } to { opacity: 1; } } /* Selector contextual de póliza para acciones rápidas con variables. */ .gd-quick-policy-context { display: grid; gap: 7px; margin-top: 10px; padding: 11px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 20%, var(--gd-border)); border-radius: 10px; background: color-mix(in srgb, var(--gd-emerald) 5%, var(--gd-input-bg)); } .gd-quick-policy-context[hidden] { display: none !important; } .gd-quick-policy-context label { margin: 0 !important; color: var(--gd-text-sec) !important; font-size: 9px !important; font-weight: 750 !important; letter-spacing: .04em; text-transform: uppercase; } .gd-quick-policy-context select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--gd-border); border-radius: 8px; background: var(--gd-input-bg); color: var(--gd-text-main); } /* Diálogo colaborativo para aseguradoras faltantes. */ body.gd-catalog-dialog-open { overflow: hidden; } .gd-catalog-dialog[hidden] { display: none !important; } .gd-catalog-dialog { position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center; padding: 18px; } .gd-catalog-dialog-backdrop { position: absolute; inset: 0; background: rgba(4, 9, 3, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 190ms ease; } .gd-catalog-dialog-panel { position: relative; z-index: 1; width: min(520px, 100%); max-height: min(720px, calc(100dvh - 36px)); overflow-y: auto; display: grid; gap: 15px; padding: 24px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 28%, var(--gd-border)); border-radius: 20px; background: color-mix(in srgb, var(--gd-card-bg) 96%, #0a1307); box-shadow: 0 28px 80px rgba(0,0,0,.42); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity 190ms ease, transform 190ms ease; } .gd-catalog-dialog.is-open .gd-catalog-dialog-backdrop { opacity: 1; } .gd-catalog-dialog.is-open .gd-catalog-dialog-panel { opacity: 1; transform: none; } .gd-catalog-dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 30%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--gd-emerald) 10%, transparent); color: var(--gd-emerald); } .gd-catalog-dialog-icon svg, .gd-catalog-dialog-note svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-catalog-dialog-copy { display: grid; gap: 5px; } .gd-catalog-dialog-copy > span { color: var(--gd-emerald); font-size: 9px; font-weight: 850; letter-spacing: .09em; } .gd-catalog-dialog-copy h3 { margin: 0; color: var(--gd-text-main); font-size: 20px; } .gd-catalog-dialog-copy p { margin: 0; color: var(--gd-text-sec); font-size: 12px; line-height: 1.55; } .gd-catalog-dialog-panel > label { display: grid; gap: 7px; color: var(--gd-text-sec); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .gd-catalog-dialog-panel > label input { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal; outline: none; } .gd-catalog-dialog-panel > label input:focus { border-color: var(--gd-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-emerald) 12%, transparent); } .gd-catalog-dialog-note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 18%, var(--gd-border)); border-radius: 10px; background: color-mix(in srgb, var(--gd-emerald) 5%, transparent); color: var(--gd-text-sec); font-size: 10px; line-height: 1.5; } .gd-catalog-dialog-note svg { flex: 0 0 19px; width: 19px; height: 19px; color: var(--gd-emerald); } .gd-catalog-dialog-message { min-height: 18px; color: var(--gd-text-sec); font-size: 11px; } .gd-catalog-dialog-message.is-error { color: var(--gd-danger); } .gd-catalog-dialog-message.is-success { color: var(--gd-success); } .gd-catalog-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; } body.light-mode .gd-catalog-dialog-panel { background: #fff; } @media (max-width: 640px) { .gd-catalog-missing-link { width: 100%; } .gd-quick-policy-context { padding: 10px; } .gd-catalog-dialog { place-items: end center; padding: 0; } .gd-catalog-dialog-panel { width: 100%; max-height: min(88dvh, 760px); padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; transform: translateY(20px); } .gd-catalog-dialog-actions { display: grid; grid-template-columns: 1fr; } .gd-catalog-dialog-actions .gd-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .gd-catalog-dialog-backdrop, .gd-catalog-dialog-panel, .gd-catalog-ramo-step { transition: none !important; animation: none !important; } .gd-catalog-product-field.is-catalog-loading::after { animation: none !important; } } /* ===================================================================== * 1.36.0 — PRUEBA GRATUITA + BILLING CORE * Solo se agregan estilos; se preserva íntegro el CSS canónico previo. * ===================================================================== */ .gd-trial-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 14px 24px 0; padding: 13px 15px; border: 1px solid rgba(135, 191, 20, .28); border-radius: 14px; background: linear-gradient(135deg, rgba(135, 191, 20, .13), rgba(135, 191, 20, .045)); box-shadow: 0 12px 30px rgba(5, 10, 4, .12); color: var(--gd-text-main); } .gd-trial-banner--expired { border-color: rgba(245, 166, 35, .32); background: linear-gradient(135deg, rgba(245, 166, 35, .13), rgba(245, 166, 35, .045)); } .gd-trial-banner-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgba(135, 191, 20, .14); color: var(--gd-emerald); } .gd-trial-banner--expired .gd-trial-banner-mark { background: rgba(245, 166, 35, .13); color: var(--gd-gold); } .gd-trial-banner-mark svg { width: 22px; height: 22px; } .gd-trial-banner-copy { display: grid; gap: 3px; min-width: 0; } .gd-trial-banner-copy strong { color: var(--gd-text-main); font-size: 12px; font-weight: 800; } .gd-trial-banner-copy span, .gd-trial-banner-assistant-note { color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } .gd-trial-banner-action { min-height: 36px; padding: 8px 13px; border: 1px solid rgba(135, 191, 20, .36); border-radius: 9px; background: var(--gd-emerald); color: #142006; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease; } .gd-trial-banner-action:hover, .gd-trial-banner-action:focus-visible { filter: brightness(1.06); transform: translateY(-1px); outline: none; } .gd-registration-trial-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; margin: 0 0 18px; padding: 13px 14px; border: 1px solid rgba(135, 191, 20, .27); border-radius: 13px; background: rgba(135, 191, 20, .075); } .gd-registration-trial-intro > svg, .gd-registration-trial-benefits > svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--gd-emerald); } .gd-registration-trial-intro strong, .gd-registration-trial-intro span { display: block; } .gd-registration-trial-intro strong { margin-bottom: 3px; color: var(--gd-text-main); font-size: 11px; } .gd-registration-trial-intro span { color: var(--gd-text-sec); font-size: 10px; line-height: 1.5; } .gd-registration-plan-section.gd-registration-trial-plan { border-color: rgba(135, 191, 20, .3); background: color-mix(in srgb, var(--gd-card-bg) 88%, rgba(135, 191, 20, .08)); } .gd-registration-trial-plan .gd-registration-plan-grid { grid-template-columns: minmax(0, 1fr); } .gd-registration-trial-plan .gd-registration-plan-card { min-height: 0; cursor: default; } .gd-registration-trial-plan .gd-registration-plan-card:hover { transform: none; } .gd-registration-trial-plan .gd-registration-plan-card em { margin-top: 5px; color: var(--gd-text-sec); font-size: 9px; font-style: normal; line-height: 1.45; } .gd-registration-trial-benefits { border-color: rgba(135, 191, 20, .24) !important; background: rgba(135, 191, 20, .065) !important; } .gd-registration-direct-contract { margin: 12px 0 0; color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; text-align: center; } .gd-registration-direct-contract a, .gd-registration-direct-contract a:visited { color: var(--gd-emerald) !important; font-weight: 750; text-decoration: none !important; } .gd-registration-direct-contract a:hover, .gd-registration-direct-contract a:focus-visible { text-decoration: underline !important; } .gd-subscription-status--prueba { border-color: rgba(135, 191, 20, .3); background: rgba(135, 191, 20, .12); color: var(--gd-emerald); } .gd-subscription-status--prueba_vencida, .gd-subscription-status--vencido_pago { border-color: rgba(245, 166, 35, .3); background: rgba(245, 166, 35, .11); color: var(--gd-gold); } .gd-subscription-status--cancelado { border-color: rgba(239, 91, 91, .28); background: rgba(239, 91, 91, .1); color: var(--gd-danger); } .gd-subscription-plan-notice--trial { border-color: rgba(135, 191, 20, .26); background: rgba(135, 191, 20, .075); color: var(--gd-emerald); } .gd-subscription-plan-notice--trial-expired { border-color: rgba(245, 166, 35, .28); background: rgba(245, 166, 35, .08); color: var(--gd-gold); } .gd-public-landing .gdl-trial-offer { display: grid; gap: 2px; margin: 18px 0 -8px; padding: 10px 12px; border: 1px solid rgba(168, 230, 59, .24); border-radius: 11px; background: rgba(168, 230, 59, .075); } .gd-public-landing .gdl-trial-offer strong { color: var(--gdl-lime); font-size: 11px; font-weight: 900; } .gd-public-landing .gdl-trial-offer span { color: var(--gdl-muted); font-size: 9px; } .gd-public-landing .gdl-plan-actions { display: grid; gap: 8px; } .gd-public-landing .gdl-plan-actions .gdl-button { width: 100%; } .gd-public-landing .gdl-plan-actions.has-trial .gdl-button--outline { background: transparent; } .gd-public-landing .gdl-trial-button, .gd-public-landing .gdl-trial-button:link, .gd-public-landing .gdl-trial-button:visited { background: var(--gdl-lime) !important; color: #142006 !important; border-color: var(--gdl-lime) !important; } .gd-public-landing .gdl-trial-button:hover, .gd-public-landing .gdl-trial-button:focus, .gd-public-landing .gdl-trial-button:focus-visible, .gd-public-landing .gdl-trial-button:active { background: #b8ee58 !important; color: #142006 !important; } body.light-mode .gd-trial-banner { background: linear-gradient(135deg, rgba(135, 191, 20, .12), rgba(255, 255, 255, .96)); } body.light-mode .gd-trial-banner--expired { background: linear-gradient(135deg, rgba(245, 166, 35, .12), rgba(255, 255, 255, .96)); } @media (max-width: 900px) { .gd-trial-banner { margin-inline: 16px; } } @media (max-width: 640px) { .gd-trial-banner { grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin: 10px 12px 0; padding: 12px; } .gd-trial-banner-action, .gd-trial-banner-assistant-note { grid-column: 1 / -1; width: 100%; } .gd-trial-banner-assistant-note { padding-left: 48px; } .gd-registration-trial-intro { margin-bottom: 14px; } .gd-registration-trial-plan .gd-registration-plan-heading { gap: 8px; } } @media (prefers-reduced-motion: reduce) { .gd-trial-banner-action, .gd-registration-plan-card { transition: none !important; } } /* Campo trampa anti-bot: permanece fuera del flujo visual y de teclado. */ .gd-registration-honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ===================================================================== * 1.36.3 — MODALIDADES CONTEXTUALES + PLAN Y SUSCRIPCIÓN * Extensión acumulativa: no sustituye la base canónica instalada. * ===================================================================== */ /* El icono de Apellidos usa SVG para no depender de una ligadura externa. */ #gd-registro-screen .gd-input-icon-svg { width: 20px; height: 20px; overflow: visible; } /* Selector visual de modalidad. El select nativo se conserva para el * formulario, el teclado y la compatibilidad con la lógica existente. */ .gd-appointment-modality-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; } .gd-appointment-modality-option, .gd-appointment-modality-option:visited, .gd-appointment-modality-option:hover, .gd-appointment-modality-option:focus, .gd-appointment-modality-option:focus-visible, .gd-appointment-modality-option:active { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; min-height: 52px; padding: 9px 11px; border: 1px solid var(--gd-border) !important; border-radius: 11px; background: color-mix(in srgb, var(--gd-input-bg) 88%, transparent) !important; color: var(--gd-text-sec) !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.2 !important; text-align: left; box-shadow: none !important; text-decoration: none !important; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; } .gd-appointment-modality-option:hover, .gd-appointment-modality-option:focus-visible { border-color: rgba(135, 191, 20, .56) !important; background: rgba(135, 191, 20, .08) !important; color: var(--gd-text-main) !important; outline: none !important; transform: translateY(-1px); } .gd-appointment-modality-option.is-active, .gd-appointment-modality-option.is-active:hover, .gd-appointment-modality-option.is-active:focus, .gd-appointment-modality-option.is-active:focus-visible, .gd-appointment-modality-option.is-active:active { border-color: var(--gd-emerald) !important; background: rgba(135, 191, 20, .14) !important; color: var(--gd-text-main) !important; box-shadow: 0 0 0 2px rgba(135, 191, 20, .1) !important; } .gd-modality-logo { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgba(135, 191, 20, .1); color: var(--gd-emerald); } .gd-modality-logo svg { display: block; width: 21px; height: 21px; } .gd-modality-logo--meet, .gd-modality-logo--zoom { background: rgba(255, 255, 255, .94); } .gd-modality-logo--meet svg { width: 23px; } /* Reserva el extremo derecho del aviso para la campanita fija. */ @media (min-width: 1025px) { .gd-trial-banner { margin-right: 84px; } } .gd-trial-banner-action, .gd-trial-banner-action:visited, .gd-trial-banner-action:hover, .gd-trial-banner-action:focus, .gd-trial-banner-action:focus-visible, .gd-trial-banner-action:active { border-color: var(--gd-emerald) !important; background: var(--gd-emerald) !important; color: #142006 !important; box-shadow: none !important; text-decoration: none !important; } .gd-trial-banner-action:hover, .gd-trial-banner-action:focus-visible { border-color: #a8e63b !important; background: #a8e63b !important; color: #142006 !important; } /* Tarjetas de plan: mayor área útil y tipografía proporcionada. */ #gd-ajustes-plan .gd-subscription-summary { padding: 18px; } #gd-ajustes-plan .gd-subscription-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #gd-ajustes-plan .gd-subscription-facts > div { min-height: 150px; align-content: center; padding: 12px 10px; } #gd-ajustes-plan .gd-subscription-facts span { font-size: 8px; line-height: 1.35; } #gd-ajustes-plan .gd-subscription-facts strong { font-size: clamp(15px, 1.55vw, 19px); line-height: 1.28; } #gd-ajustes-plan .gd-subscription-payment-actions { align-items: stretch; flex-direction: column; width: 100%; } #gd-ajustes-plan .gd-subscription-payment-actions .gd-payment-details-open, #gd-ajustes-plan .gd-subscription-payment-actions .gd-payment-report-open { justify-content: center; width: 100%; white-space: normal; } @media (max-width: 900px) { .gd-appointment-modality-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } #gd-ajustes-plan .gd-subscription-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #gd-ajustes-plan .gd-subscription-facts { grid-template-columns: 1fr; } } @media (max-width: 520px) { .gd-appointment-modality-options { grid-template-columns: 1fr; } .gd-appointment-modality-option { min-height: 48px; } #gd-ajustes-plan .gd-subscription-facts > div { min-height: 0; } } /* 1.36.4 — Cuenta y suscripción: iconos SVG y seguridad independiente */ .gd-settings-nav-svg { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; } .gd-settings-heading-svg { width: 24px; height: 24px; fill: currentColor; } #gd-ajustes-plan .gd-account-security-card { margin-top: 18px; } @media (max-width: 680px) { #gd-ajustes-plan .gd-account-security-card { align-items: flex-start; } #gd-ajustes-plan .gd-account-security-card .gd-boton { width: 100%; } } /* 1.36.9 — Agenda pública: identidad configurable, correo y preguntas profesionales */ .gd-public-booking-color-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); gap: 20px; align-items: end; } .gd-public-booking-color-presets { display: grid; grid-template-columns: repeat(7, minmax(72px, 1fr)); gap: 10px; grid-column: 1 / -1; } .gd-public-booking-color-option { display: grid; justify-items: center; gap: 7px; padding: 12px 8px; border: 1px solid var(--gd-border, #d8e2d3); border-radius: 12px; background: color-mix(in srgb, var(--gd-surface-dim, #f4f7f1) 76%, transparent); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .gd-public-booking-color-option:hover { transform: translateY(-1px); border-color: var(--gd-swatch); background: color-mix(in srgb, var(--gd-swatch) 7%, var(--gd-surface-dim, #f4f7f1)); } .gd-public-booking-color-option:has(input:checked) { border-color: var(--gd-swatch); background: color-mix(in srgb, var(--gd-swatch) 10%, var(--gd-surface-dim, #f4f7f1)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-swatch) 18%, transparent); } .gd-public-booking-color-option input { position: absolute; opacity: 0; pointer-events: none; } .gd-public-booking-color-swatch { display: block; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; background: var(--gd-swatch); box-shadow: 0 0 0 1px rgba(23, 33, 15, .2); } .gd-public-booking-color-option small { font-size: 11px !important; font-weight: 700; text-align: center; } .gd-public-booking-custom-color { display: grid; grid-template-columns: auto 52px 1fr; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border: 1px solid var(--gd-border, #d8e2d3); border-radius: 12px; background: color-mix(in srgb, var(--gd-surface-dim, #f4f7f1) 76%, transparent); } .gd-public-booking-custom-color input[type=color] { width: 52px !important; height: 36px !important; padding: 2px !important; border-radius: 9px !important; cursor: pointer; } .gd-public-booking-custom-color code { justify-self: end; color: inherit; font-size: 12px; } .gd-public-booking-color-preview { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 10px 14px; border-radius: 12px; background: var(--gd-preview-color); color: var(--gd-preview-text); } .gd-public-booking-color-preview span { font-size: 11px; font-weight: 700; opacity: .78; text-transform: uppercase; letter-spacing: .06em; } .gd-public-booking-color-preview strong { color: inherit !important; font-size: 13px; } .gd-public-booking-shell .gd-public-booking-brand-panel { background: linear-gradient(145deg, var(--gd-public-accent-deep), var(--gd-public-accent)) !important; color: var(--gd-public-accent-text) !important; } .gd-public-booking-shell .gd-public-booking-brand-panel h1, .gd-public-booking-shell .gd-public-booking-brand-panel .gd-public-booking-eyebrow, .gd-public-booking-shell .gd-public-booking-brand-panel > p, .gd-public-booking-shell .gd-public-booking-brand-panel .gd-public-booking-meta, .gd-public-booking-shell .gd-public-booking-brand-panel .gd-inline-icon { color: var(--gd-public-accent-text) !important; } .gd-public-booking-shell .gd-public-booking-avatar.fallback, .gd-public-booking-shell .gd-public-booking-progress button.is-active span, .gd-public-booking-shell .gd-public-booking-progress button.is-complete span, .gd-public-booking-shell .gd-public-booking-submit, .gd-public-booking-shell .gd-public-booking-success > span { border-color: var(--gd-public-accent) !important; background: var(--gd-public-accent) !important; color: var(--gd-public-accent-text) !important; } .gd-public-booking-shell .gd-public-booking-progress button.is-complete:after { background: var(--gd-public-accent) !important; } .gd-public-booking-shell .gd-public-booking-type-card:hover, .gd-public-booking-shell .gd-public-booking-type-card.is-active, .gd-public-booking-shell .gd-public-booking-public-options button:hover, .gd-public-booking-shell .gd-public-booking-public-options button.is-active, .gd-public-booking-shell .gd-public-booking-date-grid button.is-active, .gd-public-booking-shell .gd-public-booking-slots button.is-active { border-color: var(--gd-public-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-public-accent) 18%, transparent) !important; } /* La identidad elegida gobierna cada acento visible de la experiencia pública. */ .gd-public-booking-shell .gd-public-booking-pill, .gd-public-booking-shell .gd-public-booking-type-card > span, .gd-public-booking-shell .gd-public-booking-question[data-required="1"] .gd-public-booking-question-requirement { background: color-mix(in srgb, var(--gd-public-accent) 12%, white) !important; color: var(--gd-public-accent-deep) !important; } .gd-public-booking-shell .gd-public-booking-public-options .gd-inline-icon, .gd-public-booking-shell .gd-public-booking-selection-label, .gd-public-booking-shell .gd-public-booking-privacy a, .gd-public-booking-shell .gd-public-booking-progress button.is-active, .gd-public-booking-shell .gd-public-booking-progress button.is-complete { color: var(--gd-public-accent-deep) !important; } .gd-public-booking-shell .gd-public-booking-type-card:hover, .gd-public-booking-shell .gd-public-booking-type-card:focus-visible, .gd-public-booking-shell .gd-public-booking-public-options button:hover, .gd-public-booking-shell .gd-public-booking-public-options button:focus-visible, .gd-public-booking-shell .gd-public-booking-date-grid button:hover, .gd-public-booking-shell .gd-public-booking-slots button:hover { border-color: var(--gd-public-accent) !important; background: color-mix(in srgb, var(--gd-public-accent) 5%, white) !important; } .gd-public-booking-shell .gd-public-booking-type-card.is-active, .gd-public-booking-shell .gd-public-booking-public-options button.is-active, .gd-public-booking-shell .gd-public-booking-date-grid button.is-active, .gd-public-booking-shell .gd-public-booking-slots button.is-active { background: var(--gd-public-accent) !important; color: var(--gd-public-accent-text) !important; } .gd-public-booking-shell .gd-public-booking-type-card.is-active strong, .gd-public-booking-shell .gd-public-booking-public-options button.is-active strong { color: var(--gd-public-accent-text) !important; } .gd-public-booking-shell .gd-public-booking-selection { border-color: color-mix(in srgb, var(--gd-public-accent) 40%, white) !important; background: color-mix(in srgb, var(--gd-public-accent) 8%, white) !important; } .gd-public-booking-shell input:focus, .gd-public-booking-shell textarea:focus, .gd-public-booking-shell select:focus { border-color: var(--gd-public-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-public-accent) 16%, transparent) !important; } .gd-public-booking-shell .gd-public-booking-privacy input, .gd-public-booking-shell .gd-public-booking-question input[type=radio], .gd-public-booking-shell .gd-public-booking-question input[type=checkbox] { accent-color: var(--gd-public-accent); } .gd-public-booking-page [data-booking-questions] { display: grid; gap: 14px; margin-top: 18px; } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question { display: block !important; min-width: 0; margin: 0 !important; padding: 18px !important; border: 1px solid #dce5d7 !important; border-radius: 14px !important; background: #fbfcfa !important; text-align: left !important; box-shadow: none !important; } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 18px); margin: 0 9px 11px !important; padding: 0 !important; color: #273120 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.4 !important; } .gd-public-booking-question-requirement { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #edf2e9; color: #667060; font-size: 10px; font-weight: 750; } .gd-public-booking-question[data-required="1"] .gd-public-booking-question-requirement { background: color-mix(in srgb, var(--gd-public-accent) 12%, white); color: var(--gd-public-accent-deep); } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question > input[type=text], .gd-public-booking-page [data-booking-questions] .gd-public-booking-question > textarea, .gd-public-booking-page [data-booking-questions] .gd-public-booking-question > select { display: block !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 11px 13px !important; border: 1px solid #cbd6c6 !important; border-radius: 11px !important; background: #fff !important; color: #17210f !important; font: 500 14px/1.45 Inter, Arial, sans-serif !important; box-sizing: border-box !important; } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question > textarea { min-height: 112px !important; resize: vertical; } .gd-public-booking-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gd-public-booking-page .gd-public-booking-choice { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 46px; margin: 0 !important; padding: 10px 12px !important; border: 1px solid #d6e0d1 !important; border-radius: 11px !important; background: #fff !important; color: #35402f !important; font-size: 13px !important; font-weight: 650 !important; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .gd-public-booking-page .gd-public-booking-choice:hover { border-color: var(--gd-public-accent) !important; background: #f8faf7 !important; } .gd-public-booking-page .gd-public-booking-choice:has(input:checked) { border-color: var(--gd-public-accent) !important; background: color-mix(in srgb, var(--gd-public-accent) 9%, white) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gd-public-accent) 12%, transparent); } .gd-public-booking-page .gd-public-booking-choice input { flex: 0 0 auto; width: 17px !important; height: 17px !important; margin: 0 !important; } .gd-agenda-public-badge { border-color: #527d08 !important; background: #527d08 !important; color: #fff !important; } /* Gestión de la reserva: misma identidad que la página donde se creó. */ .gd-public-booking-manage-shell .gd-public-booking-manage-brand span { color: var(--gd-public-accent-deep) !important; text-transform: none; } .gd-public-booking-manage-shell .gd-public-booking-manage-brand img { display: block; width: auto; height: auto; max-width: 180px; max-height: 52px; object-fit: contain; } .gd-public-booking-manage-shell .gd-public-booking-submit { border-color: var(--gd-public-accent) !important; background: var(--gd-public-accent) !important; color: var(--gd-public-accent-text) !important; box-shadow: 0 9px 20px color-mix(in srgb, var(--gd-public-accent) 24%, transparent) !important; } .gd-public-booking-manage-shell .gd-public-booking-date-grid button:hover, .gd-public-booking-manage-shell .gd-public-booking-slots button:hover { border-color: var(--gd-public-accent) !important; } .gd-public-booking-manage-shell .gd-public-booking-date-grid button.is-active, .gd-public-booking-manage-shell .gd-public-booking-slots button.is-active { border-color: var(--gd-public-accent) !important; background: var(--gd-public-accent) !important; color: var(--gd-public-accent-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-public-accent) 16%, transparent) !important; } .gd-agenda-public-origin > .gd-ui-svg-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #ffffff !important; } .gd-agenda-public-origin > .gd-ui-svg-icon svg { width: 32px; height: 32px; fill: currentColor; } /* El aviso vive dentro de un modal que puede estar en modo claro u oscuro. * Sus colores se fijan localmente para evitar herencias del tema o de Astra. */ .gd-agenda-public-origin > .gd-ui-svg-icon svg, .gd-agenda-public-origin > .gd-ui-svg-icon svg path { fill: #ffffff !important; } @media (max-width: 900px) { .gd-public-booking-color-presets { grid-template-columns: repeat(4, minmax(72px, 1fr)); } } @media (max-width: 640px) { .gd-public-booking-color-settings { grid-template-columns: 1fr; } .gd-public-booking-color-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-public-booking-custom-color { grid-template-columns: 1fr 52px auto; } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question { padding: 15px !important; } .gd-public-booking-page [data-booking-questions] .gd-public-booking-question legend { align-items: flex-start; flex-direction: column; width: calc(100% - 12px); margin-inline: 6px !important; } .gd-public-booking-choices { grid-template-columns: 1fr; } } /* ========================================================================== */ /* Centro de ayuda, ayuda contextual y recorridos guiados · 1.36.13 */ /* ========================================================================== */ .gd-context-help-button{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(126,181,26,.35);background:rgba(126,181,26,.09);color:#6b9e12;border-radius:999px;padding:8px 13px;font:700 12px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap}.gd-context-help-button:hover,.gd-context-help-button:focus{background:#7eb51a;color:#fff;border-color:#7eb51a;outline:none}.gd-context-help-button .material-symbols-outlined{font-size:18px}.gd-help-center{display:grid;gap:24px}.gd-help-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);gap:28px;align-items:center;padding:28px;border-radius:22px;background:linear-gradient(135deg,rgba(126,181,26,.16),rgba(126,181,26,.04));border:1px solid rgba(126,181,26,.24)}.gd-help-hero h3{margin:5px 0 8px;font-size:clamp(25px,3vw,36px);color:var(--gd-texto-principal,#17210f)}.gd-help-hero p{margin:0;color:var(--gd-texto-secundario,#68745e)}.gd-help-search{display:flex;align-items:center;gap:10px;background:var(--gd-card-bg,#fff);border:1px solid var(--gd-borde,rgba(24,40,15,.14));border-radius:14px;padding:4px 14px;box-shadow:0 10px 30px rgba(18,35,8,.08)}.gd-help-search input{width:100%;min-height:48px;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--gd-texto-principal,#17210f)!important}.gd-help-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gd-help-quick{appearance:none;text-align:left;border:1px solid var(--gd-borde,rgba(24,40,15,.14));border-radius:18px;background:var(--gd-card-bg,#fff);padding:21px;color:var(--gd-texto-principal,#17210f);cursor:pointer;display:grid;gap:7px;transition:.2s ease}.gd-help-quick:hover,.gd-help-quick:focus{transform:translateY(-2px);border-color:#7eb51a;box-shadow:0 14px 34px rgba(47,80,13,.12);outline:none}.gd-help-quick>.material-symbols-outlined{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(126,181,26,.14);color:#6b9e12}.gd-help-quick strong{font-size:16px}.gd-help-quick small{font-size:13px;line-height:1.5;color:var(--gd-texto-secundario,#68745e)}.gd-help-quick em{font-style:normal;font-size:12px;font-weight:800;color:#6b9e12}.gd-help-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.gd-help-category h4,.gd-help-services>h4{margin:0 0 12px;font-size:17px;color:var(--gd-texto-principal,#17210f)}.gd-help-articles{display:grid;gap:10px}.gd-help-article{border:1px solid var(--gd-borde,rgba(24,40,15,.14));background:var(--gd-card-bg,#fff);border-radius:14px;overflow:hidden}.gd-help-article summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;cursor:pointer}.gd-help-article summary::-webkit-details-marker{display:none}.gd-help-article summary>span:first-child{display:grid;gap:4px}.gd-help-article summary strong{font-size:14px;color:var(--gd-texto-principal,#17210f)}.gd-help-article summary small{font-size:12px;line-height:1.45;color:var(--gd-texto-secundario,#68745e)}.gd-help-article summary>.material-symbols-outlined{transition:transform .2s}.gd-help-article[open] summary>.material-symbols-outlined{transform:rotate(180deg)}.gd-help-article>div{padding:0 16px 16px;color:var(--gd-texto-secundario,#68745e);font-size:13px;line-height:1.6}.gd-help-context-tour{border:0;background:transparent;color:#6b9e12;font-weight:800;padding:4px 0;cursor:pointer}.gd-help-empty{text-align:center;padding:28px;border:1px dashed var(--gd-borde,rgba(24,40,15,.18));border-radius:14px}.gd-help-support{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px;border-radius:18px;background:#17210f;color:#fff}.gd-help-support>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:14px}.gd-help-support>div:first-child>.material-symbols-outlined{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(126,181,26,.2);color:#a5d649}.gd-help-support h4,.gd-help-support p{margin:0}.gd-help-support p{color:#bdc7b7;margin-top:5px}.gd-help-support-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.gd-help-support .gd-boton.is-disabled{opacity:.58;pointer-events:none}.gd-help-plan-note{font-size:12px;color:#bdc7b7;max-width:190px}.gd-help-services>div{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gd-help-services article{display:flex;gap:15px;padding:20px;border-radius:16px;border:1px solid var(--gd-borde,rgba(24,40,15,.14));background:var(--gd-card-bg,#fff)}.gd-help-services article>.material-symbols-outlined{color:#6b9e12;font-size:28px}.gd-help-services article div{display:grid;gap:6px}.gd-help-services article p{margin:0;color:var(--gd-texto-secundario,#68745e);font-size:13px}.gd-help-services article b{color:#6b9e12;font-size:13px}.gd-help-services article a{color:#6b9e12;font-size:12px;font-weight:800;text-decoration:none}.gd-help-context-modal,.gd-tour-layer{position:fixed;inset:0;z-index:100050;display:grid;place-items:center;padding:20px}.gd-help-context-backdrop,.gd-tour-shade{position:absolute;inset:0;background:rgba(7,15,4,.68);backdrop-filter:blur(4px)}.gd-help-context-modal>section,.gd-tour-card{position:relative;width:min(560px,100%);border-radius:20px;padding:28px;background:var(--gd-card-bg,#fff);color:var(--gd-texto-principal,#17210f);box-shadow:0 28px 80px rgba(0,0,0,.3)}.gd-help-context-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:30px;color:inherit;cursor:pointer}.gd-help-context-modal h3,.gd-tour-card h3{margin:7px 0 8px;font-size:24px}.gd-help-context-summary{font-weight:700}.gd-help-context-body,.gd-tour-card p{color:var(--gd-texto-secundario,#68745e);line-height:1.6}.gd-help-context-actions,.gd-tour-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:22px}.gd-tour-actions{justify-content:space-between}.gd-tour-actions>div{display:flex;gap:8px}.gd-tour-actions button{border:1px solid rgba(126,181,26,.35);border-radius:9px;background:transparent;color:#6b9e12;font-weight:800;padding:9px 13px;cursor:pointer}.gd-tour-actions [data-tour-next]{background:#7eb51a;color:#fff}.gd-tour-actions button:disabled{opacity:.35}.gd-tour-progress{font-size:12px;font-weight:800;color:#6b9e12}.gd-tour-highlight{position:relative;z-index:100049!important;outline:4px solid #9ed13f;outline-offset:-4px;box-shadow:0 0 0 9999px rgba(7,15,4,.28)}body.gd-tour-open{overflow:hidden}.gd-tour-card{position:fixed;right:28px;bottom:28px;width:min(410px,calc(100% - 40px));z-index:100051}.gd-tour-layer{pointer-events:none}.gd-tour-card{pointer-events:auto}.gd-tour-shade{background:transparent;backdrop-filter:none}.light-mode .gd-help-support{background:#17210f}.light-mode .gd-help-support h4{color:#fff} @media(max-width:900px){.gd-help-hero{grid-template-columns:1fr}.gd-help-quick-grid,.gd-help-categories{grid-template-columns:1fr}.gd-help-services>div{grid-template-columns:1fr}.gd-context-help-button span:last-child{display:none}.gd-help-support{align-items:flex-start;flex-direction:column}.gd-help-support-actions{justify-content:flex-start}.gd-tour-card{right:20px;bottom:20px}.gd-tour-highlight{outline-offset:0}} /* Ayuda 1.36.14: iconos SVG independientes de fuentes de ligaduras. */ .gd-context-help-svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .gd-help-icon{display:inline-grid;place-items:center;flex:0 0 auto} .gd-help-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .gd-help-quick>.gd-help-icon{width:42px;height:42px;padding:10px;border-radius:12px;background:rgba(126,181,26,.14);color:#6b9e12;box-sizing:border-box} .gd-help-article summary>.gd-help-icon{width:20px;height:20px;transition:transform .2s} .gd-help-article[open] summary>.gd-help-icon{transform:rotate(180deg)} .gd-help-support>div:first-child>.gd-help-icon{grid-row:1/3;width:44px;height:44px;padding:11px;border-radius:13px;background:rgba(126,181,26,.2);color:#a5d649;box-sizing:border-box} .gd-help-services article>.gd-help-icon{width:28px;height:28px;color:#6b9e12} /* Centro de ayuda 1.36.15: contraste, buscador y recorridos accesibles. */ .gd-help-center{--gdh-text:#f4faef;--gdh-muted:#b6c6ad;--gdh-soft:#8fa184;--gdh-card:#14240f;--gdh-card-hover:#193013;--gdh-border:rgba(158,209,63,.2);--gdh-green:#9ed13f;color:var(--gdh-text)} .light-mode .gd-help-center{--gdh-text:#17210f;--gdh-muted:#5f6d58;--gdh-soft:#75816f;--gdh-card:#fff;--gdh-card-hover:#f7fbeF;--gdh-border:rgba(70,103,33,.18);--gdh-green:#6f9f12} .gd-help-center [hidden]{display:none!important} .gd-help-hero{background:linear-gradient(135deg,#18300f 0%,#10230d 100%)!important;border-color:rgba(158,209,63,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .light-mode .gd-help-hero{background:linear-gradient(135deg,#f3f9e9 0%,#eaf4dc 100%)!important} .gd-help-hero h3,.gd-help-category h4,.gd-help-services>h4{color:var(--gdh-text)!important} .gd-help-hero p{color:var(--gdh-muted)!important;font-size:14px;line-height:1.65;max-width:580px} .gd-help-search-box{display:grid;gap:8px;align-content:center;padding:22px;border:1px solid var(--gdh-border);border-radius:17px;background:rgba(5,18,4,.3)} .light-mode .gd-help-search-box{background:rgba(255,255,255,.72)} .gd-help-search-box>label{color:var(--gdh-text)!important;font-size:13px!important;font-weight:800!important} .gd-help-search-box>small{color:var(--gdh-muted)!important;font-size:11px} .gd-help-search{position:relative;display:grid!important;grid-template-columns:20px minmax(0,1fr) 28px;align-items:center;gap:10px;min-height:52px;padding:0 12px!important;background:#fff!important;border:2px solid transparent!important;border-radius:13px!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important} .gd-help-search:focus-within{border-color:var(--gdh-green)!important;box-shadow:0 0 0 4px rgba(158,209,63,.14),0 12px 30px rgba(0,0,0,.2)!important} .gd-help-search>.gd-help-icon{width:20px!important;height:20px!important;color:#5d8b0d!important} .gd-help-search input[type="search"]{appearance:none!important;-webkit-appearance:none!important;display:block!important;width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#17210f!important;font:600 13px/1.3 Inter,Arial,sans-serif!important;outline:0!important} .gd-help-search input[type="search"]::placeholder{color:#71806a!important;opacity:1!important} .gd-help-search input[type="search"]::-webkit-search-cancel-button,.gd-help-search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none!important} .gd-help-search button{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;min-width:28px!important;margin:0!important;padding:0!important;border:0!important;border-radius:8px!important;background:#eef5e5!important;background-image:none!important;color:#517d09!important;font:700 20px/1 Arial,sans-serif!important;box-shadow:none!important;cursor:pointer} .gd-help-search button:hover,.gd-help-search button:focus-visible{background:#ddecce!important;color:#315205!important;outline:2px solid var(--gdh-green)!important;outline-offset:1px!important} .gd-help-quick{background:var(--gdh-card)!important;border-color:var(--gdh-border)!important;color:var(--gdh-text)!important;box-shadow:none!important;transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease!important} .gd-help-quick strong{color:var(--gdh-text)!important} .gd-help-quick small{color:var(--gdh-muted)!important} .gd-help-quick em{color:var(--gdh-green)!important} .gd-help-quick:hover,.gd-help-quick:focus-visible,.gd-help-quick:active{transform:translateY(-4px)!important;background:var(--gdh-card-hover)!important;background-image:none!important;border-color:var(--gdh-green)!important;color:var(--gdh-text)!important;box-shadow:0 16px 34px rgba(0,0,0,.22)!important;outline:none!important} .gd-help-quick:hover>.gd-help-icon,.gd-help-quick:focus-visible>.gd-help-icon{transform:scale(1.08) rotate(-3deg);background:var(--gdh-green)!important;color:#17210f!important} .gd-help-quick>.gd-help-icon{transition:transform .24s ease,background .24s ease,color .24s ease} .gd-help-article{background:var(--gdh-card)!important;border-color:var(--gdh-border)!important;color:var(--gdh-text)!important;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease} .gd-help-article:hover{border-color:rgba(158,209,63,.42)!important} .gd-help-article[open]{background:var(--gdh-card-hover)!important;border-color:var(--gdh-green)!important;box-shadow:0 12px 28px rgba(0,0,0,.16)} .gd-help-article summary{background:transparent!important;background-image:none!important;color:var(--gdh-text)!important;outline:none!important} .gd-help-article summary:hover,.gd-help-article summary:focus-visible{background:rgba(158,209,63,.06)!important;background-image:none!important;color:var(--gdh-text)!important;outline:none!important} .gd-help-article summary strong{color:var(--gdh-text)!important} .gd-help-article summary small{color:var(--gdh-muted)!important} .gd-help-article summary>.gd-help-icon{color:var(--gdh-green)!important} .gd-help-article-content{padding:0 16px 18px!important;color:var(--gdh-muted)!important} .gd-help-guide{display:grid;gap:10px} .gd-help-guide-item{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;padding:13px 14px;border:1px solid var(--gdh-border);border-radius:12px;background:rgba(255,255,255,.025)} .light-mode .gd-help-guide-item{background:#f8faf6} .gd-help-guide-item>strong{color:var(--gdh-green)!important;font-size:10px!important;line-height:1.45;text-transform:uppercase;letter-spacing:.06em} .gd-help-guide-item>p{margin:0!important;color:var(--gdh-text)!important;font-size:12px!important;line-height:1.6!important} .gd-help-guide-item.is-note{border-left:3px solid var(--gdh-green)} .gd-help-context-tour{margin-top:14px!important;padding:9px 12px!important;border:1px solid rgba(158,209,63,.42)!important;border-radius:9px!important;background:rgba(158,209,63,.08)!important;background-image:none!important;color:var(--gdh-green)!important;box-shadow:none!important} .gd-help-context-tour:hover,.gd-help-context-tour:focus-visible{background:var(--gdh-green)!important;color:#17210f!important;outline:none!important} .gd-help-empty{display:grid;gap:5px;color:var(--gdh-muted)!important}.gd-help-empty strong{color:var(--gdh-text)!important} .gd-help-faq-search-results{display:grid;gap:13px}.gd-help-faq-search-results[hidden]{display:none!important}.gd-help-faq-search-head{display:grid;gap:4px}.gd-help-faq-search-head h3{margin:0;color:var(--gdh-text)!important;font-size:19px}.gd-help-faq-search-head p{margin:0;color:var(--gdh-muted)!important;font-size:12px}.gd-help-faq-search-list{display:grid;gap:9px}.gd-help-faq-search-item{border:1px solid var(--gdh-border)!important;border-radius:14px;background:var(--gdh-card)!important;color:var(--gdh-text)!important;overflow:hidden}.gd-help-faq-search-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer}.gd-help-faq-search-item summary::-webkit-details-marker{display:none}.gd-help-faq-search-item summary strong{font-size:13px;line-height:1.4}.gd-help-faq-search-item summary span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(158,209,63,.12);color:var(--gdh-green);font:800 18px/1 Arial;transition:transform .2s ease}.gd-help-faq-search-item[open] summary span{transform:rotate(45deg)}.gd-help-faq-search-item>div{padding:0 16px 15px;border-top:1px solid var(--gdh-border)}.gd-help-faq-search-item p{margin:13px 0;color:var(--gdh-muted)!important;font-size:12px;line-height:1.6}.gd-help-faq-manual-link{appearance:none;border:0;background:transparent;color:var(--gdh-green)!important;font:800 12px/1.2 Inter,Arial,sans-serif;cursor:pointer;padding:0}.gd-help-faq-manual-link:hover,.gd-help-faq-manual-link:focus-visible{text-decoration:underline;outline:none} .gd-help-support h4{color:#fff!important}.gd-help-services article{background:var(--gdh-card)!important;border-color:var(--gdh-border)!important}.gd-help-services article strong{color:var(--gdh-text)!important}.gd-help-services article p{color:var(--gdh-muted)!important} .gd-help-services article a,.gd-help-services article b{color:var(--gdh-green)!important} .gd-help-services article a:hover,.gd-help-services article a:focus{color:#c7f26c!important;text-decoration:underline!important} .gd-help-context-modal>section{border:1px solid rgba(158,209,63,.32)!important;background:#172610!important;background-image:linear-gradient(145deg,#1b2e13,#111e0c)!important;color:#fff!important}.gd-help-context-modal h3,.gd-help-context-summary{color:#fff!important}.gd-help-context-body{color:#c4d2bb!important}.gd-help-context-close{color:#fff!important;background:transparent!important;background-image:none!important}.gd-help-context-actions .gd-boton{background-image:none!important;box-shadow:none!important}.gd-help-context-actions .gd-boton-secundario{border-color:rgba(158,209,63,.5)!important;background:transparent!important;color:#bde86c!important}.gd-help-context-actions .gd-boton-primario{border-color:#91cc1d!important;background:#91cc1d!important;color:#17210f!important}.gd-help-context-actions .gd-boton:hover,.gd-help-context-actions .gd-boton:focus-visible{border-color:#a8e63b!important;background:#a8e63b!important;color:#17210f!important;outline:none!important} .gd-help-support .gd-boton{background-image:none!important;box-shadow:none!important}.gd-help-support .gd-boton:hover,.gd-help-support .gd-boton:focus-visible{border-color:#a8e63b!important;background:#a8e63b!important;color:#17210f!important;outline:none!important} .gd-tour-layer{pointer-events:none!important;background:transparent!important} .gd-tour-shade{display:none!important} .gd-tour-highlight{position:relative!important;z-index:100052!important;outline:3px solid #a8e63b!important;outline-offset:3px!important;box-shadow:0 0 0 7px rgba(168,230,59,.16)!important;animation:gdTourPulse 1.5s ease-in-out infinite!important} .gd-tour-card{position:fixed!important;right:28px!important;bottom:28px!important;top:auto!important;width:min(430px,calc(100% - 40px))!important;padding:24px!important;border:1px solid rgba(168,230,59,.38)!important;border-radius:18px!important;background:#172610!important;background-image:linear-gradient(145deg,#1b2e13,#111e0c)!important;color:#fff!important;box-shadow:0 24px 70px rgba(0,0,0,.48)!important;pointer-events:auto!important;animation:gdTourCardIn .28s ease-out both!important} .gd-tour-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .gd-tour-card-top [data-tour-close]{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;padding:0!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:9px!important;background:rgba(255,255,255,.06)!important;color:#fff!important;font-size:23px!important;line-height:1!important} .gd-tour-card h3{margin:8px 0!important;color:#fff!important;font-size:22px!important}.gd-tour-card p{margin:0!important;color:#c9d7c1!important;font-size:14px!important;line-height:1.65!important} .gd-tour-progress{color:#a8e63b!important}.gd-tour-tip{margin-top:16px;padding:10px 12px;border-radius:10px;background:rgba(168,230,59,.1);color:#dff5b6;font-size:11px;font-weight:700} .gd-tour-actions{justify-content:flex-end!important;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.gd-tour-actions button{background:transparent!important;background-image:none!important;border-color:rgba(168,230,59,.5)!important;color:#c9ef7d!important;box-shadow:none!important}.gd-tour-actions button:hover,.gd-tour-actions button:focus-visible{background:rgba(168,230,59,.12)!important;color:#fff!important;outline:none!important}.gd-tour-actions [data-tour-next]{background:#91cc1d!important;color:#17210f!important;border-color:#91cc1d!important}.gd-tour-actions [data-tour-next]:hover{background:#a8e63b!important;color:#17210f!important} @keyframes gdTourCardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@keyframes gdTourPulse{0%,100%{outline-color:#a8e63b;box-shadow:0 0 0 6px rgba(168,230,59,.13)}50%{outline-color:#d3ff7d;box-shadow:0 0 0 10px rgba(168,230,59,.05)}} @media(max-width:680px){.gd-help-search-box{padding:16px}.gd-help-guide-item{grid-template-columns:1fr;gap:5px}.gd-tour-card{right:14px!important;bottom:14px!important;width:calc(100% - 28px)!important;padding:20px!important}.gd-tour-actions{justify-content:space-between!important}} /* 1.36.16 — buscador oscuro Guani, selects verdes y documentos visuales. */ body:not(.light-mode) .gd-help-center .gd-help-search{grid-template-columns:44px minmax(0,1fr) 38px;gap:0;padding:0!important;overflow:hidden;background:#091407!important;border-color:rgba(168,230,59,.32)!important;box-shadow:0 14px 34px rgba(0,0,0,.3)!important} body:not(.light-mode) .gd-help-center .gd-help-search>.gd-help-icon{width:44px!important;height:52px!important;padding:12px!important;background:#14280e!important;color:#a8e63b!important;box-sizing:border-box} body:not(.light-mode) .gd-help-center .gd-help-search input[type="search"]{height:52px!important;padding:0 13px!important;background:#091407!important;color:#f4faef!important;caret-color:#a8e63b!important} body:not(.light-mode) .gd-help-center .gd-help-search input[type="search"]::placeholder{color:#8fa184!important} body:not(.light-mode) .gd-help-center .gd-help-search button{margin-right:5px!important;background:#193311!important;color:#bff06b!important} .gd-main-content select,.gd-modal select,.gd-public-booking-page select{accent-color:#91cc1d!important} .gd-main-content select:focus,.gd-modal select:focus,.gd-public-booking-page select:focus{border-color:#91cc1d!important;outline-color:#91cc1d!important;box-shadow:0 0 0 3px rgba(145,204,29,.16)!important} .gd-main-content select option:checked,.gd-modal select option:checked,.gd-public-booking-page select option:checked{background:#a8e63b linear-gradient(0deg,#a8e63b,#a8e63b)!important;color:#17210f!important;box-shadow:0 0 0 100px #a8e63b inset!important} .gd-help-documents-head{display:grid;gap:5px;padding-top:8px}.gd-help-documents-head h3{margin:0;color:var(--gdh-text);font-size:24px}.gd-help-documents-head p{margin:0;color:var(--gdh-muted);font-size:13px} .gd-help-document-gallery{margin-top:16px}.gd-help-document-gallery h5{margin:0 0 10px;color:var(--gdh-text);font-size:13px}.gd-help-document-gallery>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gd-help-document-gallery figure{margin:0;border:1px solid var(--gdh-border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.12)}.gd-help-document-gallery button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.gd-help-document-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.gd-help-document-gallery figcaption{padding:9px;color:var(--gdh-muted);font-size:11px;line-height:1.45} .gd-help-image-modal{position:fixed;inset:0;z-index:100090;display:grid;place-items:center;padding:28px;background:rgba(4,10,3,.9);backdrop-filter:blur(5px)}.gd-help-image-modal>button{position:fixed;right:22px;top:18px;width:42px;height:42px;border:1px solid rgba(168,230,59,.45);border-radius:12px;background:#172610;color:#fff;font-size:28px;cursor:pointer}.gd-help-image-modal figure{max-width:min(1180px,95vw);max-height:90vh;margin:0}.gd-help-image-modal img{display:block;max-width:100%;max-height:82vh;border:1px solid rgba(168,230,59,.36);border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.55)}.gd-help-image-modal figcaption{padding:10px;text-align:center;color:#dcebd3} .gd-tour-tip{border:1px solid rgba(168,230,59,.25);animation:gdTourTip 1.7s ease-in-out infinite}@keyframes gdTourTip{50%{background:rgba(168,230,59,.18)}} @media(max-width:680px){.gd-help-document-gallery>div{grid-template-columns:1fr}} /* 1.36.17 — manuales emergentes y guías interactivas completas. */ .gd-help-manuals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.gd-help-manual-card{min-width:0}.gd-help-manual-card>button{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;width:100%;min-height:108px;padding:17px!important;border:1px solid var(--gdh-border)!important;border-radius:15px!important;background:var(--gdh-card)!important;background-image:none!important;color:var(--gdh-text)!important;text-align:left!important;box-shadow:none!important;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.gd-help-manual-card>button>.gd-help-icon{width:42px;height:42px;padding:10px;border-radius:12px;background:rgba(158,209,63,.12);color:var(--gdh-green);box-sizing:border-box}.gd-help-manual-card>button>span{display:grid;gap:5px;min-width:0}.gd-help-manual-card>button strong{color:var(--gdh-text)!important;font-size:14px;line-height:1.35}.gd-help-manual-card>button small{color:var(--gdh-muted)!important;font-size:12px;line-height:1.45}.gd-help-manual-card>button em{color:var(--gdh-green)!important;font-size:11px;font-style:normal;font-weight:800;white-space:nowrap}.gd-help-manual-card>button:hover,.gd-help-manual-card>button:focus-visible{transform:translateY(-2px);border-color:var(--gdh-green)!important;background:var(--gdh-card-hover)!important;background-image:none!important;color:var(--gdh-text)!important;box-shadow:0 13px 30px rgba(0,0,0,.18)!important;outline:none!important}.gd-help-manual-card>button:hover>.gd-help-icon{background:var(--gdh-green);color:#17210f} .gd-help-manual-modal{position:fixed;inset:0;z-index:100070;display:grid;place-items:center;padding:24px}.gd-help-manual-backdrop{position:absolute;inset:0;background:rgba(4,10,3,.82);backdrop-filter:blur(5px)}.gd-help-manual-modal>section{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(920px,100%);max-height:min(88vh,900px);overflow:hidden;border:1px solid rgba(168,230,59,.35);border-radius:22px;background:#111f0c;color:#f4faef;box-shadow:0 30px 90px rgba(0,0,0,.58)}.gd-help-manual-modal header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:23px 25px;border-bottom:1px solid rgba(168,230,59,.18);background:linear-gradient(135deg,#1b3212,#12240d)}.gd-help-manual-modal header h3{margin:5px 0;color:#fff;font-size:25px}.gd-help-manual-modal header p{margin:0;color:#b9cbb0;font-size:13px}.gd-help-manual-modal header>button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-size:27px;cursor:pointer}.gd-help-manual-body{overflow:auto;padding:24px 25px}.gd-help-manual-body .gd-help-guide-item{grid-template-columns:110px minmax(0,1fr);padding:15px}.gd-help-manual-body .gd-help-guide-item>p{font-size:13px!important}.gd-help-manual-modal footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 25px;border-top:1px solid rgba(168,230,59,.18);background:#0d1909}.gd-help-manual-modal footer .gd-boton{background-image:none!important}.gd-help-manual-modal footer .gd-boton-primario{border-color:#91cc1d!important;background:#91cc1d!important;color:#17210f!important}.gd-help-manual-modal footer .gd-boton-secundario{border-color:rgba(168,230,59,.42)!important;background:transparent!important;color:#caef84!important} /* Astra puede aplicar azul a article/button:hover: los tableros quedan aislados en la paleta Guani. */ [data-gd-commercial] .gd-kanban-card,[data-gd-commercial] .gd-kanban-card:hover,[data-gd-commercial] .gd-kanban-card:focus-within{background:var(--gd-card-bg)!important;background-image:none!important;color:var(--gd-text-main)!important;border-color:var(--gd-border)!important}[data-gd-commercial] .gd-kanban-card:hover,[data-gd-commercial] .gd-kanban-card:focus-within{border-color:#91cc1d!important;box-shadow:0 12px 28px rgba(51,91,15,.18)!important}[data-gd-commercial] .gd-stage-panel-head,[data-gd-commercial] .gd-stage-panel-head:hover,[data-gd-commercial] .gd-stage-panel-head:focus,[data-gd-commercial] .gd-stage-panel-head:active{background:linear-gradient(105deg,var(--gd-card-bg),rgba(145,204,29,.1))!important;color:var(--gd-text-main)!important;border-color:#91cc1d!important;box-shadow:none!important;outline:none!important}[data-gd-commercial] .gd-kanban-edit:hover,[data-gd-commercial] .gd-kanban-edit:focus{background:transparent!important;color:#a8e63b!important;box-shadow:none!important} @media(max-width:760px){.gd-help-manuals{grid-template-columns:1fr}.gd-help-manual-card>button{grid-template-columns:42px minmax(0,1fr)}.gd-help-manual-card>button em{grid-column:2}.gd-help-manual-modal{padding:10px}.gd-help-manual-modal>section{max-height:94vh;border-radius:16px}.gd-help-manual-modal header,.gd-help-manual-body,.gd-help-manual-modal footer{padding-left:17px;padding-right:17px}.gd-help-manual-body .gd-help-guide-item{grid-template-columns:1fr}.gd-help-manual-modal footer{display:grid;grid-template-columns:1fr}.gd-help-manual-modal footer .gd-boton{width:100%}} /* 1.36.20 — manual claro, directorios del asistente y Guani FAQ */ body.light-mode .gd-help-manual-modal>section{border-color:#dce6d5;background:#fff;color:#17210f;box-shadow:0 30px 90px rgba(23,33,15,.22)} body.light-mode .gd-help-manual-modal header{border-bottom-color:#dce6d5;background:#fff} body.light-mode .gd-help-manual-modal header h3{color:#17210f} body.light-mode .gd-help-manual-modal header p{color:#5f6d58} body.light-mode .gd-help-manual-modal header>button{border-color:#d7e1d0;background:#f4f7f1;color:#263020} body.light-mode .gd-help-manual-body{background:#fff;color:#263020} body.light-mode .gd-help-manual-body .gd-help-guide-item{border-color:#dfe8da;background:#fff;color:#263020;box-shadow:0 5px 18px rgba(23,33,15,.05)} body.light-mode .gd-help-manual-body .gd-help-guide-item strong{color:#527d08} body.light-mode .gd-help-manual-body .gd-help-guide-item p{color:#34402f!important} body.light-mode .gd-help-manual-modal footer{border-top-color:#dce6d5;background:#fff} body.light-mode .gd-help-manual-modal footer .gd-boton-secundario{border-color:#87bf14!important;background:#fff!important;color:#527d08!important} .gd-assistant-modern-directory .gd-content{display:grid;gap:18px} .gd-assistant-create-panel{padding:22px;border:1px solid var(--gd-border);border-radius:18px;background:var(--gd-card-bg);box-shadow:0 18px 48px rgba(0,0,0,.12)} .gd-assistant-create-panel[hidden]{display:none!important} .gd-assistant-create-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gd-border)} .gd-assistant-create-head h3{margin:4px 0;color:var(--gd-text-main);font-size:20px}.gd-assistant-create-head p{margin:0;color:var(--gd-text-sec);font-size:12px} .gd-assistant-create-panel .gd-form-grid{padding:0;background:transparent;border:0}.gd-assistant-create-panel .gd-form-acciones{display:flex;justify-content:flex-end;gap:9px} .gd-assistant-directory-card{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} .gd-assistant-directory-card>.gd-clientes-summary{display:flex;justify-content:space-between;gap:12px;align-items:center}.gd-assistant-directory-card>.gd-clientes-summary strong{color:var(--gd-text-main);font-size:14px}.gd-assistant-directory-card>.gd-clientes-summary span{color:var(--gd-text-sec);font-size:11px} .gd-assistant-directory-card .gd-client-directory{display:grid;gap:9px}.gd-assistant-directory-card .gd-client-card{grid-template-columns:42px minmax(0,1fr) minmax(120px,auto)} .gd-assistant-directory-card .gd-assistant-prospect-context{display:block;margin-top:7px;color:var(--gd-text-sec);line-height:1.5}.gd-assistant-directory-card .gd-client-card-side{min-width:118px} .gd-agenda-meet-restricted{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--gd-border);border-radius:11px;background:color-mix(in srgb,var(--gd-emerald) 7%,var(--gd-card-bg));color:var(--gd-text-sec);font-size:12px}.gd-agenda-meet-restricted .material-symbols-outlined{color:var(--gd-emerald)} .gd-help-chatbot{position:fixed;right:24px;bottom:24px;z-index:100060;font-family:Inter,Arial,sans-serif}.gd-help-chatbot-launcher{display:flex;align-items:center;gap:9px;min-height:58px;padding:6px 15px 6px 6px;border:1px solid rgba(158,209,63,.52);border-radius:999px;background:#152b0e;color:#f5faef;box-shadow:0 16px 42px rgba(0,0,0,.3);font-weight:800;cursor:pointer}.gd-help-chatbot-launcher img{width:46px;height:46px;padding:5px;border-radius:50%;background:#9ed13f;object-fit:contain}.gd-help-chatbot-launcher:hover,.gd-help-chatbot-launcher:focus-visible{transform:translateY(-2px);border-color:#b8eb57;outline:none}.gd-help-chatbot-panel{position:absolute;right:0;bottom:72px;display:grid;grid-template-rows:auto minmax(180px,1fr) auto auto;width:min(390px,calc(100vw - 30px));max-height:min(620px,calc(100vh - 120px));overflow:hidden;border:1px solid rgba(158,209,63,.3);border-radius:20px;background:#101e0c;color:#f4faef;box-shadow:0 28px 80px rgba(0,0,0,.5)}.gd-help-chatbot-panel[hidden]{display:none!important}.gd-help-chatbot-panel header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid rgba(158,209,63,.18);background:#152b0e}.gd-help-chatbot-panel header>div{display:flex;align-items:center;gap:10px}.gd-help-chatbot-panel header img{width:39px;height:39px;padding:4px;border-radius:50%;background:#9ed13f;object-fit:contain}.gd-help-chatbot-panel header span{display:grid;gap:2px}.gd-help-chatbot-panel header strong{font-size:14px;color:#fff}.gd-help-chatbot-panel header small{font-size:10px;color:#afc3a5}.gd-help-chatbot-panel header button{border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer}.gd-help-chatbot-messages{display:flex;flex-direction:column;gap:10px;overflow:auto;padding:16px}.gd-help-chatbot-message{display:grid;justify-items:start;gap:6px;max-width:88%}.gd-help-chatbot-message.is-user{align-self:flex-end;justify-items:end}.gd-help-chatbot-message p{margin:0;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#1b3213;color:#eaf2e5;font-size:12px;line-height:1.5}.gd-help-chatbot-message.is-user p{border-radius:14px 14px 4px 14px;background:#8ec825;color:#14220d}.gd-help-chatbot-message button{padding:0;border:0;background:transparent;color:#aee754;font-size:11px;font-weight:800;cursor:pointer}.gd-help-chatbot-suggestions{display:flex;gap:6px;overflow:auto;padding:0 14px 12px}.gd-help-chatbot-suggestions button{flex:0 0 auto;padding:7px 9px;border:1px solid rgba(158,209,63,.25);border-radius:999px;background:#162911;color:#cbeaa0;font-size:10px;cursor:pointer}.gd-help-chatbot-panel form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:12px;border-top:1px solid rgba(158,209,63,.18);background:#0b1608}.gd-help-chatbot-panel form input{min-width:0;height:42px;padding:0 12px;border:1px solid rgba(158,209,63,.25)!important;border-radius:11px!important;background:#14240f!important;color:#fff!important}.gd-help-chatbot-panel form button{padding:0 14px;border:0;border-radius:11px;background:#91cc1d;color:#17210f;font-weight:850;cursor:pointer} body.light-mode .gd-help-chatbot-panel{border-color:#d6e2cf;background:#fff;color:#17210f;box-shadow:0 28px 80px rgba(23,33,15,.22)}body.light-mode .gd-help-chatbot-panel header{border-bottom-color:#dce6d5;background:#f4f8ef}body.light-mode .gd-help-chatbot-panel header strong{color:#17210f}body.light-mode .gd-help-chatbot-panel header small{color:#65715f}body.light-mode .gd-help-chatbot-panel header button{color:#263020}body.light-mode .gd-help-chatbot-message p{background:#eff5e9;color:#263020}body.light-mode .gd-help-chatbot-message.is-user p{background:#8fc929;color:#17210f}body.light-mode .gd-help-chatbot-message button{color:#527d08}body.light-mode .gd-help-chatbot-suggestions button{border-color:#d9e4d2;background:#f6f9f3;color:#527d08}body.light-mode .gd-help-chatbot-panel form{border-top-color:#dce6d5;background:#fff}body.light-mode .gd-help-chatbot-panel form input{border-color:#d6e2cf!important;background:#fff!important;color:#17210f!important} @media(max-width:680px){.gd-help-chatbot{right:12px;bottom:12px}.gd-help-chatbot-launcher span{display:none}.gd-help-chatbot-launcher{padding:5px}.gd-help-chatbot-panel{bottom:64px}.gd-assistant-directory-card .gd-client-card{grid-template-columns:40px minmax(0,1fr)}.gd-assistant-directory-card .gd-client-card-side{grid-column:2;justify-items:start}.gd-assistant-directory-card>.gd-clientes-summary{align-items:flex-start;flex-direction:column}} /* 1.36.21 — acceso circular, expansión y estados visuales aislados de Astra. */ .gd-help-chatbot{right:24px!important;bottom:calc(24px + 60px)!important;margin:0!important} .gd-portal .gd-help-chatbot-launcher, .gd-portal .gd-help-chatbot-launcher:hover, .gd-portal .gd-help-chatbot-launcher:focus, .gd-portal .gd-help-chatbot-launcher:focus-visible, .gd-portal .gd-help-chatbot-launcher:active, .gd-portal .gd-help-chatbot-launcher:visited{ position:relative;display:grid!important;place-items:center;width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;padding:0!important;overflow:visible;border:1px solid rgba(168,230,59,.58)!important;border-radius:50%!important;background:#14250f!important;background-image:none!important;color:#f5faef!important;box-shadow:0 14px 38px rgba(0,0,0,.34)!important;outline:none!important;text-decoration:none!important;transform:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .18s ease!important } .gd-portal .gd-help-chatbot-launcher:hover,.gd-portal .gd-help-chatbot-launcher:focus-visible{border-color:#b9ef55!important;box-shadow:0 17px 42px rgba(0,0,0,.4),0 0 0 4px rgba(168,230,59,.12)!important;transform:translateY(-2px)} .gd-help-chatbot-launcher img,.gd-help-chatbot-panel header img{display:block!important;padding:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;object-fit:contain} .gd-help-chatbot-launcher img{width:58px!important;height:58px!important;border:0!important;border-radius:50%!important} .gd-help-chatbot-panel header img{width:39px!important;height:39px!important;border-radius:50%!important} .gd-help-chatbot-launcher-label{position:absolute;right:calc(100% + 12px);top:50%;display:block!important;width:max-content;max-width:min(220px,calc(100vw - 110px));padding:9px 12px;border:1px solid rgba(168,230,59,.38);border-radius:10px;background:#152b0e;color:#f5faef;font-size:12px;font-weight:800;line-height:1.25;white-space:normal;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transform:translate(8px,-50%) scale(.96);transform-origin:right center;transition:opacity .18s ease,visibility .18s ease,transform .22s ease} .gd-help-chatbot-launcher-label::after{content:"";position:absolute;left:100%;top:50%;width:8px;height:8px;border-top:1px solid rgba(168,230,59,.38);border-right:1px solid rgba(168,230,59,.38);background:#152b0e;transform:translate(-4px,-50%) rotate(45deg)} .gd-help-chatbot-launcher:hover .gd-help-chatbot-launcher-label,.gd-help-chatbot-launcher:focus-visible .gd-help-chatbot-launcher-label{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)} .gd-help-chatbot-panel{right:0!important;bottom:0!important;max-height:min(620px,calc(100vh - 112px));opacity:0;transform:translateY(18px) scale(.78);transform-origin:right bottom;transition:opacity .2s ease,transform .3s cubic-bezier(.2,.82,.3,1)} .gd-help-chatbot.is-open .gd-help-chatbot-panel{opacity:1;transform:translateY(0) scale(1);animation:gdChatbotExpand .32s cubic-bezier(.2,.82,.3,1) both} .gd-help-chatbot.is-open .gd-help-chatbot-launcher{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.76)} @keyframes gdChatbotExpand{0%{opacity:0;transform:translateY(18px) scale(.72)}70%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}} .gd-help-chatbot-suggestions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:7px!important;width:auto!important;max-width:100%!important;max-height:132px;overflow-x:hidden!important;overflow-y:auto!important;padding:0 14px 12px!important;box-sizing:border-box} .gd-portal .gd-help-chatbot-suggestions button, .gd-portal .gd-help-chatbot-suggestions button:hover, .gd-portal .gd-help-chatbot-suggestions button:focus, .gd-portal .gd-help-chatbot-suggestions button:focus-visible, .gd-portal .gd-help-chatbot-suggestions button:active{ display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:8px 10px!important;overflow-wrap:anywhere;white-space:normal!important;border:1px solid rgba(168,230,59,.3)!important;border-radius:10px!important;background:#162911!important;background-image:none!important;color:#cbeaa0!important;font-size:10px!important;line-height:1.35!important;text-align:left!important;box-shadow:none!important;outline:none!important;transform:none!important } .gd-portal .gd-help-chatbot-suggestions button:hover,.gd-portal .gd-help-chatbot-suggestions button:focus-visible{border-color:#a8e63b!important;background:#203817!important;color:#f1f9e9!important} .gd-portal .gd-help-chatbot-panel form button[type="submit"], .gd-portal .gd-help-chatbot-panel form button[type="submit"]:hover, .gd-portal .gd-help-chatbot-panel form button[type="submit"]:focus, .gd-portal .gd-help-chatbot-panel form button[type="submit"]:focus-visible, .gd-portal .gd-help-chatbot-panel form button[type="submit"]:active, .gd-portal .gd-help-chatbot-panel form button[type="submit"]:visited{ display:inline-grid!important;place-items:center;min-width:76px!important;height:42px!important;margin:0!important;padding:0 14px!important;border:1px solid #91cc1d!important;border-radius:11px!important;background:#91cc1d!important;background-image:none!important;color:#17210f!important;font-weight:850!important;line-height:1!important;opacity:1!important;text-shadow:none!important;box-shadow:none!important;outline:none!important;text-decoration:none!important;filter:none!important;transform:none!important } .gd-portal .gd-help-chatbot-panel form button[type="submit"]:hover,.gd-portal .gd-help-chatbot-panel form button[type="submit"]:focus-visible{border-color:#b8ec52!important;background:#a8e63b!important;color:#101b0b!important;box-shadow:0 0 0 3px rgba(168,230,59,.16)!important} .gd-portal .gd-help-chatbot-panel header>button, .gd-portal .gd-help-chatbot-panel header>button:hover, .gd-portal .gd-help-chatbot-panel header>button:focus, .gd-portal .gd-help-chatbot-panel header>button:active{display:grid!important;place-items:center;width:34px!important;height:34px!important;padding:0!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;background-image:none!important;color:#fff!important;box-shadow:none!important;outline:none!important} .gd-portal .gd-help-chatbot-panel header>button:hover,.gd-portal .gd-help-chatbot-panel header>button:focus-visible{border-color:rgba(168,230,59,.34)!important;background:rgba(168,230,59,.1)!important;color:#ccef8c!important} body.light-mode .gd-help-chatbot-launcher,body.light-mode .gd-help-chatbot-launcher:hover,body.light-mode .gd-help-chatbot-launcher:focus,body.light-mode .gd-help-chatbot-launcher:active{border-color:#91cc1d!important;background:#fff!important;background-image:none!important;color:#17210f!important} body.light-mode .gd-help-chatbot-launcher-label{border-color:#bad68c;background:#fff;color:#263020;box-shadow:0 12px 28px rgba(23,33,15,.16)} body.light-mode .gd-help-chatbot-launcher-label::after{border-color:#bad68c;background:#fff} body.light-mode .gd-help-chatbot-suggestions button,body.light-mode .gd-help-chatbot-suggestions button:hover,body.light-mode .gd-help-chatbot-suggestions button:focus,body.light-mode .gd-help-chatbot-suggestions button:active{border-color:#d3e2c8!important;background:#f3f8ef!important;background-image:none!important;color:#426807!important} body.light-mode .gd-help-chatbot-suggestions button:hover,body.light-mode .gd-help-chatbot-suggestions button:focus-visible{border-color:#91cc1d!important;background:#eaf5dd!important;color:#2d4e02!important} body.light-mode .gd-help-chatbot-panel header>button,body.light-mode .gd-help-chatbot-panel header>button:hover,body.light-mode .gd-help-chatbot-panel header>button:focus,body.light-mode .gd-help-chatbot-panel header>button:active{color:#263020!important;background:transparent!important} body.light-mode .gd-help-chatbot-panel header>button:hover,body.light-mode .gd-help-chatbot-panel header>button:focus-visible{border-color:#bad68c!important;background:#eff7e7!important;color:#426807!important} @media(max-width:680px){.gd-help-chatbot{right:12px!important;bottom:calc(12px + 60px)!important}.gd-help-chatbot-launcher{padding:0!important}.gd-help-chatbot-launcher .gd-help-chatbot-launcher-label{display:block!important}.gd-help-chatbot-panel{bottom:0!important;width:min(390px,calc(100vw - 24px));max-height:calc(100vh - 88px)}} @media(prefers-reduced-motion:reduce){.gd-help-chatbot-panel,.gd-help-chatbot-launcher,.gd-help-chatbot-launcher-label{transition:none!important;animation:none!important}} /* 1.36.22 — operación del asistente, acciones contextuales y auditoría del equipo. */ .gd-assistant-quick-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}.gd-assistant-quick-actions button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--gd-border);border-radius:11px;background:var(--gd-card-bg);color:var(--gd-text-main);font-size:12px;font-weight:800;cursor:pointer;transition:border-color .18s ease,transform .18s ease,background .18s ease}.gd-assistant-quick-actions button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#91cc1d}.gd-assistant-quick-actions button:hover,.gd-assistant-quick-actions button:focus-visible{border-color:#91cc1d;background:color-mix(in srgb,#91cc1d 9%,var(--gd-card-bg));color:var(--gd-text-main);outline:none;transform:translateY(-1px)} .gd-assistant-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.gd-assistant-metric{position:relative;display:grid;gap:5px;min-height:116px;padding:18px;border:1px solid var(--gd-border);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,#91cc1d 8%,var(--gd-card-bg)),var(--gd-card-bg));overflow:hidden}.gd-assistant-metric::after{content:"";position:absolute;right:-18px;bottom:-28px;width:82px;height:82px;border-radius:50%;background:rgba(145,204,29,.08)}.gd-assistant-metric>span{color:#9ed13f;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.gd-assistant-metric strong{color:var(--gd-text-main);font-size:31px;line-height:1}.gd-assistant-metric small{color:var(--gd-text-sec);font-size:11px}.gd-assistant-metric--urgent>span{color:#f3aa3c}.gd-assistant-dashboard-grid--modern{align-items:stretch}.gd-assistant-dashboard-grid--modern>.gd-card{height:100%}.gd-assistant-search-card,.gd-assistant-alert-card,.gd-assistant-compliance-card{border-radius:18px!important;background:var(--gd-card-bg)!important}.gd-assistant-search-card>p{margin:5px 0 16px;color:var(--gd-text-sec);font-size:12px}.gd-assistant-alert-card .gd-card-titulo,.gd-assistant-search-card .gd-card-titulo{margin-top:4px;color:var(--gd-text-main);font-size:18px} .gd-assistant-priority-card{display:flex;min-width:0;min-height:0;flex-direction:column;overflow:hidden}.gd-assistant-priority-card>div:last-child{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.gd-assistant-priority-card .gd-collection-list{width:100%;height:280px;max-height:280px;padding-right:4px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity}.gd-assistant-priority-card .gd-collection-item{min-width:0;scroll-snap-align:start}.gd-assistant-priority-card .gd-collection-name{overflow-wrap:normal;word-break:normal}.gd-collection-actions--assistant{grid-template-columns:repeat(2,minmax(0,1fr))}.gd-collection-actions--assistant [data-asis-dashboard-collection-pay]{grid-column:1/-1;background:var(--gd-emerald);border-color:var(--gd-emerald);color:#142006}.gd-collection-actions--assistant button{min-height:40px}.gd-collection-actions--assistant button span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gd-assistant-inline-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:17px;height:17px;color:#91cc1d}.gd-assistant-inline-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gd-directory-empty>.gd-assistant-inline-icon{width:34px;height:34px}.gd-client-contact>span{align-items:center}.gd-assistant-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.gd-assistant-card-actions button{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid color-mix(in srgb,#91cc1d 30%,var(--gd-border));border-radius:8px;background:transparent;color:var(--gd-text-sec);font-size:10px;font-weight:750;cursor:pointer}.gd-assistant-card-actions button:hover,.gd-assistant-card-actions button:focus-visible{border-color:#91cc1d;background:rgba(145,204,29,.1);color:var(--gd-text-main);outline:none}.gd-assistant-card-actions .gd-assistant-inline-icon{width:14px;height:14px}.gd-assistant-directory-card .gd-client-card{align-items:start}.gd-assistant-directory-card .gd-client-card:hover{border-color:#91cc1d;box-shadow:0 10px 26px rgba(29,55,10,.18)} .gd-assistant-contact-modal{position:fixed;inset:0;z-index:100075;display:grid;justify-items:end}.gd-assistant-contact-modal[hidden]{display:none!important}.gd-assistant-contact-backdrop{position:absolute;inset:0;background:rgba(3,9,2,.76);backdrop-filter:blur(4px)}.gd-assistant-contact-panel{position:relative;width:min(610px,100%);height:100%;overflow:auto;padding:24px;background:var(--gd-card-bg);color:var(--gd-text-main);box-shadow:-24px 0 70px rgba(0,0,0,.38);animation:gdAssistantPanelIn .24s ease-out both}.gd-assistant-contact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gd-border)}.gd-assistant-contact-head h3{margin:4px 0;color:var(--gd-text-main);font-size:23px}.gd-assistant-contact-head p{margin:0;color:var(--gd-text-sec);font-size:12px}.gd-assistant-contact-panel .gd-form-grid{padding:0;border:0;background:transparent}.gd-assistant-contact-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding:14px;border:1px solid var(--gd-border);border-radius:13px;background:color-mix(in srgb,#91cc1d 6%,var(--gd-card-bg))}@keyframes gdAssistantPanelIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}} .gd-team-audit-shield{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(145,204,29,.28);border-radius:999px;background:rgba(145,204,29,.08);color:#76a917;font-size:10px;font-weight:850;white-space:nowrap}.gd-team-audit-shield svg{width:16px;height:16px;fill:currentColor}.gd-team-activity-list{display:grid;gap:8px}.gd-team-activity-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px;border:1px solid var(--gd-border);border-radius:12px;background:color-mix(in srgb,#91cc1d 4%,var(--gd-card-bg))}.gd-team-activity-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(145,204,29,.14);color:#78aa18;font-size:11px;font-weight:900}.gd-team-activity-item strong{color:var(--gd-text-main);font-size:12px}.gd-team-activity-item p{margin:3px 0 0;color:var(--gd-text-sec);font-size:11px}.gd-team-activity-item time{color:var(--gd-text-sec);font-size:10px;white-space:nowrap}.gd-team-activity-empty{padding:22px;border:1px dashed var(--gd-border);border-radius:13px;text-align:center}.gd-team-activity-empty strong{color:var(--gd-text-main)}.gd-team-activity-empty p{max-width:560px;margin:6px auto 0;color:var(--gd-text-sec);font-size:12px} body.light-mode .gd-assistant-contact-backdrop{background:rgba(23,33,15,.38)} @media(max-width:980px){.gd-assistant-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.gd-assistant-metrics{grid-template-columns:1fr 1fr;gap:9px}.gd-assistant-metric{min-height:100px;padding:14px}.gd-assistant-card-actions{grid-column:1/-1}.gd-assistant-contact-panel{padding:18px}.gd-team-activity-item{grid-template-columns:38px minmax(0,1fr)}.gd-team-activity-item time{grid-column:2}.gd-team-audit-shield{white-space:normal}} /* 1.36.23 — espejo funcional y visual de las secciones del asistente. */ .gd-assistant-metric{appearance:none;width:100%;margin:0;text-align:left;color:var(--gd-text-main);font:inherit;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.gd-assistant-metric:hover,.gd-assistant-metric:focus,.gd-assistant-metric:active,.gd-assistant-metric:focus-visible{border-color:#91cc1d!important;background:linear-gradient(145deg,color-mix(in srgb,#91cc1d 14%,var(--gd-card-bg)),var(--gd-card-bg))!important;color:var(--gd-text-main)!important;outline:none!important;text-decoration:none!important;box-shadow:0 0 0 3px rgba(145,204,29,.12),0 14px 30px rgba(12,28,4,.2)!important;transform:translateY(-2px)}.gd-assistant-metric small::after{content:" →";color:#91cc1d;font-weight:900}.gd-assistant-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.gd-assistant-card-head h3{margin:4px 0!important}.gd-assistant-card-head p{margin:4px 0 0;color:var(--gd-text-sec);font-size:12px}.gd-assistant-dashboard-search{width:100%;margin-bottom:10px}.gd-assistant-search-results:empty::before{content:"Escribe al menos dos caracteres para buscar.";display:block;padding:14px;color:var(--gd-text-sec);font-size:11px}.gd-assistant-search-list{display:grid;gap:7px}.gd-assistant-search-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--gd-border)!important;border-radius:11px!important;background:color-mix(in srgb,#91cc1d 4%,var(--gd-card-bg))!important;color:var(--gd-text-main)!important;text-align:left;cursor:pointer}.gd-assistant-search-list>button:hover,.gd-assistant-search-list>button:focus-visible{border-color:#91cc1d!important;background:color-mix(in srgb,#91cc1d 10%,var(--gd-card-bg))!important;outline:none!important}.gd-assistant-search-list strong,.gd-assistant-search-list small{display:block}.gd-assistant-search-list small{margin-top:3px;color:var(--gd-text-sec);font-size:10px}.gd-assistant-search-list svg{width:18px;height:18px;fill:none;stroke:#91cc1d;stroke-width:2}.gd-assistant-priority-group{padding:14px 0;border-top:1px solid var(--gd-border)}.gd-assistant-priority-group:first-of-type{border-top:0}.gd-assistant-priority-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.gd-assistant-priority-heading strong{color:var(--gd-text-main);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.gd-assistant-priority-heading button{padding:5px 8px;border:1px solid rgba(145,204,29,.3)!important;border-radius:8px!important;background:transparent!important;color:#91cc1d!important;font-size:10px;font-weight:800;cursor:pointer}.gd-assistant-priority-heading button:hover,.gd-assistant-priority-heading button:focus-visible{border-color:#91cc1d!important;background:rgba(145,204,29,.1)!important;outline:none!important}.gd-assistant-alert-card .gd-lista-simple{max-height:210px;overflow:auto}.gd-btn-svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .gd-assistant-create-modal{position:fixed;inset:0;z-index:100075;display:grid;justify-items:end;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.gd-assistant-create-modal[hidden]{display:none!important}.gd-assistant-create-backdrop{position:absolute;inset:0;background:rgba(3,9,2,.76);backdrop-filter:blur(4px)}.gd-assistant-create-dialog{position:relative;width:min(650px,100%);height:100%;overflow:auto;padding:24px;background:var(--gd-card-bg);color:var(--gd-text-main);box-shadow:-24px 0 70px rgba(0,0,0,.38);animation:gdAssistantPanelIn .24s ease-out both}.gd-assistant-create-dialog .gd-form-grid{padding:0!important}.gd-assistant-policy-panel{width:min(720px,100%)}.gd-assistant-policy-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.gd-assistant-policy-summary>div{padding:14px;border:1px solid var(--gd-border);border-radius:13px;background:var(--gd-card-bg)}.gd-assistant-policy-summary span,.gd-assistant-policy-summary strong{display:block}.gd-assistant-policy-summary span{color:var(--gd-text-sec);font-size:10px;text-transform:uppercase}.gd-assistant-policy-summary strong{margin-top:5px;color:var(--gd-text-main);font-size:22px}.gd-assistant-policy-filters{margin-bottom:16px}.gd-assistant-policy-card{display:grid;gap:14px;padding:18px}.gd-policy-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.gd-policy-card-heading h3{margin:4px 0;color:var(--gd-text-main);font-size:17px}.gd-policy-card-heading p{margin:0;color:var(--gd-text-sec);font-size:11px}.gd-assistant-policy-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gd-assistant-policy-data span{padding:9px;border:1px solid var(--gd-border);border-radius:9px}.gd-assistant-policy-data small,.gd-assistant-policy-data strong{display:block}.gd-assistant-policy-data small{color:var(--gd-text-sec);font-size:9px;text-transform:uppercase}.gd-assistant-policy-data strong{margin-top:4px;color:var(--gd-text-main);font-size:11px}.gd-sidebar-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body.light-mode .gd-assistant-create-backdrop{background:rgba(23,33,15,.38)} @media(max-width:760px){.gd-assistant-card-head{display:grid}.gd-assistant-card-head .gd-btn{justify-self:start}.gd-assistant-policy-summary{grid-template-columns:1fr 1fr}.gd-assistant-policy-data{grid-template-columns:1fr}.gd-assistant-create-dialog{padding:18px}.gd-assistant-policy-filters{display:grid;gap:10px}.gd-assistant-policy-filters .gd-polizas-search{width:100%}} /* ========================================================================== */ /* 1.36.31 — estados interactivos Guani en Cobranzas y Mis pendientes */ /* ========================================================================== */ /* * Astra aplica colores globales a button:hover/focus/active. Estos selectores * quedan deliberadamente acotados a los tres componentes afectados y no * modifican su estructura, iconos, contenido ni comportamiento JavaScript. */ /* Dashboard del asistente: el CTA de pago conserva contraste en todo estado. */ .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay], .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:visited, .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:focus, .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:focus-visible, .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:active { border-color: var(--gd-emerald) !important; background: var(--gd-emerald) !important; background-image: none !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; } .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:not(:disabled):hover, .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay]:not(:disabled):focus-visible { border-color: #a8e63b !important; background: #a8e63b !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; box-shadow: 0 0 0 3px rgba(168, 230, 59, .16) !important; } .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay] .gd-assistant-inline-icon, .gd-portal .gd-collection-actions--assistant [data-asis-dashboard-collection-pay] svg { color: inherit !important; stroke: currentColor !important; } /* Cobranzas (asesor y asistente): acción delineada, sin azul heredado. */ .gd-portal [data-gd-collections] .gd-collections-action:not(:disabled):hover, .gd-portal [data-gd-collections] .gd-collections-action:not(:disabled):focus, .gd-portal [data-gd-collections] .gd-collections-action:not(:disabled):focus-visible, .gd-portal [data-gd-collections] .gd-collections-action:not(:disabled):active { border-color: var(--gd-brand-accent, var(--gd-emerald)) !important; background: color-mix(in srgb, var(--gd-brand-accent, var(--gd-emerald)) 13%, var(--gd-input-bg)) !important; background-image: none !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; } .gd-portal [data-gd-collections] .gd-collections-action:not(:disabled):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-brand-accent, var(--gd-emerald)) 20%, transparent) !important; } .gd-portal [data-gd-collections] .gd-collections-action-icon, .gd-portal [data-gd-collections] .gd-collections-action-icon svg { color: inherit !important; stroke: currentColor !important; } /* Mis pendientes (asesor y asistente): primario lleno y secundario suave. */ .gd-portal .gd-followups-row-actions .gd-followups-primary-action:not(:disabled):hover, .gd-portal .gd-followups-row-actions .gd-followups-primary-action:not(:disabled):focus, .gd-portal .gd-followups-row-actions .gd-followups-primary-action:not(:disabled):focus-visible, .gd-portal .gd-followups-row-actions .gd-followups-primary-action:not(:disabled):active { border-color: var(--gd-followup-accent) !important; background: var(--gd-followup-accent) !important; background-image: none !important; color: #142006 !important; -webkit-text-fill-color: #142006 !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; } .gd-portal .gd-followups-row-actions .gd-followups-primary-action:not(:disabled):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-followup-accent) 22%, transparent) !important; } .gd-portal .gd-followups-row-actions .gd-followups-secondary-action:not(:disabled):hover, .gd-portal .gd-followups-row-actions .gd-followups-secondary-action:not(:disabled):focus, .gd-portal .gd-followups-row-actions .gd-followups-secondary-action:not(:disabled):focus-visible, .gd-portal .gd-followups-row-actions .gd-followups-secondary-action:not(:disabled):active { border-color: var(--gd-followup-accent) !important; background: color-mix(in srgb, var(--gd-followup-accent) 12%, var(--gd-input-bg)) !important; background-image: none !important; color: var(--gd-text-main) !important; -webkit-text-fill-color: var(--gd-text-main) !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; } .gd-portal .gd-followups-row-actions .gd-followups-secondary-action:not(:disabled):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-followup-accent) 18%, transparent) !important; } .gd-portal .gd-followups-row-actions button svg { color: inherit !important; stroke: currentColor !important; } /* 1.36.32 — solicitudes internas de pago y servicios adicionales. */ .gd-payment-report-pending,.gd-payment-report-pending:hover,.gd-payment-report-pending:focus,.gd-payment-report-pending:active{border-color:color-mix(in srgb,var(--gd-gold) 38%,var(--gd-border))!important;background:color-mix(in srgb,var(--gd-gold) 10%,var(--gd-input-bg))!important;background-image:none!important;color:var(--gd-gold)!important;-webkit-text-fill-color:var(--gd-gold)!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important} .gd-help-service-request{display:inline-flex;align-items:center;width:max-content;margin-top:2px;padding:0;border:0!important;background:transparent!important;background-image:none!important;color:var(--gdh-green,#91cc1d)!important;font:800 12px/1.3 Inter,sans-serif;cursor:pointer;box-shadow:none!important;text-decoration:none!important}.gd-help-service-request:hover,.gd-help-service-request:focus-visible{color:#c7f26c!important;background:transparent!important;text-decoration:underline!important;outline:none!important} .gd-account-request-modal{position:fixed;inset:0;z-index:100085;display:grid;place-items:center;padding:22px}.gd-account-request-modal[hidden]{display:none!important}.gd-account-request-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0!important;border-radius:0!important;background:rgba(3,9,2,.78)!important;background-image:none!important;backdrop-filter:blur(5px);box-shadow:none!important}.gd-account-request-panel{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(720px,100%);max-height:min(90dvh,860px);overflow:hidden;border:1px solid color-mix(in srgb,var(--gd-emerald) 34%,var(--gd-border));border-radius:20px;background:var(--gd-card-bg);color:var(--gd-text-main);box-shadow:0 30px 90px rgba(0,0,0,.55)} .gd-account-request-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:21px 23px;border-bottom:1px solid var(--gd-border);background:linear-gradient(135deg,color-mix(in srgb,var(--gd-emerald) 10%,var(--gd-card-bg)),var(--gd-card-bg))}.gd-account-request-panel>header span:first-child{display:block;margin-bottom:5px;color:var(--gd-emerald);font-size:9px;font-weight:850;letter-spacing:.09em}.gd-account-request-panel>header h3{margin:0;color:var(--gd-text-main);font-size:23px}.gd-account-request-panel>header p{margin:5px 0 0;color:var(--gd-text-sec);font-size:12px}.gd-account-request-panel>header>button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid var(--gd-border)!important;border-radius:10px!important;background:transparent!important;background-image:none!important;color:var(--gd-text-main)!important;box-shadow:none!important;cursor:pointer}.gd-account-request-panel>header>button:hover,.gd-account-request-panel>header>button:focus-visible{border-color:var(--gd-emerald)!important;background:color-mix(in srgb,var(--gd-emerald) 9%,transparent)!important;color:var(--gd-emerald)!important;outline:none!important} .gd-account-request-panel form{overflow:auto;padding:21px 23px}.gd-account-request-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px}.gd-account-request-summary>div{min-width:0;padding:11px 12px;border:1px solid var(--gd-border);border-radius:11px;background:var(--gd-input-bg)}.gd-account-request-summary span,.gd-account-request-summary strong{display:block}.gd-account-request-summary span{color:var(--gd-text-sec);font-size:9px;text-transform:uppercase}.gd-account-request-summary strong{margin-top:4px;overflow-wrap:anywhere;color:var(--gd-text-main);font-size:12px} .gd-account-request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.gd-account-request-grid label{display:grid;align-content:start;gap:7px;color:var(--gd-text-sec);font-size:10px;font-weight:800;text-transform:uppercase}.gd-account-request-grid input,.gd-account-request-grid textarea{width:100%;min-width:0;margin:0!important;border:1px solid var(--gd-border)!important;border-radius:10px!important;background:var(--gd-input-bg)!important;color:var(--gd-text-main)!important;font:600 12px/1.45 Inter,sans-serif!important;text-transform:none!important;box-shadow:none!important}.gd-account-request-grid input{min-height:43px;padding:0 12px!important}.gd-account-request-grid input[type=file]{height:auto;padding:11px!important}.gd-account-request-grid textarea{padding:11px 12px!important;resize:vertical}.gd-account-request-grid input:focus,.gd-account-request-grid textarea:focus{border-color:var(--gd-emerald)!important;outline:none!important;box-shadow:0 0 0 3px rgba(135,191,20,.14)!important}.gd-account-request-grid small{color:var(--gd-text-sec);font-size:9px;font-weight:600;text-transform:none}.gd-account-request-wide{grid-column:1/-1}.gd-account-request-status{min-height:18px;margin:13px 0 0;color:var(--gd-text-sec);font-size:11px}.gd-account-request-status.is-success{color:var(--gd-success)}.gd-account-request-status.is-error{color:#ff7777}.gd-account-request-panel form>footer{display:flex;justify-content:flex-end;gap:9px;margin:17px -23px -21px;padding:14px 23px;border-top:1px solid var(--gd-border);background:color-mix(in srgb,var(--gd-input-bg) 58%,var(--gd-card-bg))}.gd-account-request-panel form>footer .material-symbols-outlined{font-size:17px} body.light-mode .gd-account-request-backdrop{background:rgba(23,33,15,.45)!important}@media(max-width:640px){.gd-account-request-modal{align-items:end;padding:0}.gd-account-request-panel{width:100%;max-height:94dvh;border-radius:20px 20px 0 0}.gd-account-request-panel>header,.gd-account-request-panel form{padding-left:16px;padding-right:16px}.gd-account-request-summary,.gd-account-request-grid{grid-template-columns:1fr}.gd-account-request-wide{grid-column:auto}.gd-account-request-panel form>footer{display:grid;grid-template-columns:1fr;margin-right:-16px;margin-left:-16px;padding-right:16px;padding-left:16px}.gd-account-request-panel form>footer .gd-boton{width:100%;justify-content:center}} /* 1.36.33 — automatizaciones de citas y superficie modal unificada. */ .gd-payment-status-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .gd-agenda-automation-summary{gap:12px;padding:15px 16px;border:1px solid color-mix(in srgb,var(--gd-emerald) 24%,var(--gd-border));border-radius:14px;background:color-mix(in srgb,var(--gd-emerald) 6%,var(--gd-modal-surface,#17210f))} .gd-agenda-automation-heading{display:flex;align-items:flex-start;gap:11px}.gd-agenda-automation-heading>svg{width:23px;height:23px;flex:0 0 23px;fill:var(--gd-emerald)}.gd-agenda-automation-heading strong,.gd-agenda-automation-heading span{display:block}.gd-agenda-automation-heading strong{color:var(--gd-text-main);font-size:12px}.gd-agenda-automation-heading span{margin-top:3px;color:var(--gd-text-sec);font-size:10px}.gd-agenda-automation-summary ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.gd-agenda-automation-summary li{display:flex;align-items:flex-start;gap:9px;margin:0;color:var(--gd-text-sec);font-size:11px;line-height:1.5}.gd-agenda-automation-summary li>span{display:grid;place-items:center;width:19px;height:19px;flex:0 0 19px;border-radius:999px;background:color-mix(in srgb,var(--gd-text-sec) 10%,transparent);color:var(--gd-text-sec);font-size:11px;font-weight:800}.gd-agenda-automation-summary li.is-enabled>span{background:color-mix(in srgb,var(--gd-emerald) 16%,transparent);color:var(--gd-emerald)}.gd-agenda-automation-summary li p{margin:0;color:inherit} .gd-portal{--gd-modal-surface:#17210f} body.light-mode .gd-portal{--gd-modal-surface:#fff} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel){background:var(--gd-modal-surface)!important;background-image:none!important;color:var(--gd-text-main)!important} .gd-portal :is(.gd-modal-close,.gd-modal-cerrar,.gd-slideover-close,.gd-team-modal-close,.gd-commercial-dialog-head>button,.gd-followups-modal-head>button,.gd-account-delete-close,.gd-payment-modal-close,.gd-document-modal__panel>header button,[data-gd-request-close][aria-label="Cerrar"],[data-asis-create-close][aria-label="Cerrar"],[data-asis-contact-close][aria-label="Cerrar"],[data-asis-policy-close][aria-label="Cerrar"]), .gd-portal :is(.gd-modal-close,.gd-modal-cerrar,.gd-slideover-close,.gd-team-modal-close,.gd-commercial-dialog-head>button,.gd-followups-modal-head>button,.gd-account-delete-close,.gd-payment-modal-close,.gd-document-modal__panel>header button,[data-gd-request-close][aria-label="Cerrar"],[data-asis-create-close][aria-label="Cerrar"],[data-asis-contact-close][aria-label="Cerrar"],[data-asis-policy-close][aria-label="Cerrar"]):visited{border:1px solid var(--gd-border)!important;border-radius:10px!important;background:var(--gd-input-bg)!important;background-image:none!important;color:var(--gd-text-sec)!important;-webkit-text-fill-color:var(--gd-text-sec)!important;box-shadow:none!important;text-shadow:none!important} .gd-portal :is(.gd-modal-close,.gd-modal-cerrar,.gd-slideover-close,.gd-team-modal-close,.gd-commercial-dialog-head>button,.gd-followups-modal-head>button,.gd-account-delete-close,.gd-payment-modal-close,.gd-document-modal__panel>header button,[data-gd-request-close][aria-label="Cerrar"],[data-asis-create-close][aria-label="Cerrar"],[data-asis-contact-close][aria-label="Cerrar"],[data-asis-policy-close][aria-label="Cerrar"]):is(:hover,:focus,:focus-visible,:active){border-color:var(--gd-emerald)!important;background:color-mix(in srgb,var(--gd-emerald) 12%,var(--gd-input-bg))!important;background-image:none!important;color:var(--gd-emerald)!important;-webkit-text-fill-color:var(--gd-emerald)!important;outline:none!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--gd-emerald) 16%,transparent)!important} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--primary,.gd-boton-primario):not(.gd-btn--danger):not(.gd-account-delete-confirm-btn), .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--primary,.gd-boton-primario):not(.gd-btn--danger):not(.gd-account-delete-confirm-btn):is(:visited,:hover,:focus,:focus-visible,:active){border-color:var(--gd-emerald)!important;background:var(--gd-emerald)!important;background-image:none!important;color:#142006!important;-webkit-text-fill-color:#142006!important;text-shadow:none!important;box-shadow:none!important;outline:none!important} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--primary,.gd-boton-primario):not(.gd-btn--danger):not(.gd-account-delete-confirm-btn):is(:hover,:focus-visible){border-color:#a8e63b!important;background:#a8e63b!important;box-shadow:0 0 0 3px rgba(168,230,59,.16)!important} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--secondary,.gd-boton-secundario), .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--secondary,.gd-boton-secundario):visited{border-color:var(--gd-border)!important;background:var(--gd-input-bg)!important;background-image:none!important;color:var(--gd-text-main)!important;-webkit-text-fill-color:var(--gd-text-main)!important;text-shadow:none!important;box-shadow:none!important} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--secondary,.gd-boton-secundario):is(:hover,:focus,:focus-visible,:active){border-color:var(--gd-emerald)!important;background:color-mix(in srgb,var(--gd-emerald) 12%,var(--gd-input-bg))!important;background-image:none!important;color:var(--gd-text-main)!important;-webkit-text-fill-color:var(--gd-text-main)!important;outline:none!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--gd-emerald) 16%,transparent)!important} .gd-portal :is(.gd-modal-panel,.gd-modal-caja,.gd-slideover-panel,.gd-agenda-modal-panel,.gd-commercial-dialog,.gd-followups-modal-panel,.gd-team-modal-panel,.gd-account-delete-panel,.gd-payment-modal-panel,.gd-document-modal__panel,.gd-catalog-dialog-panel,.gd-assistant-create-dialog,.gd-assistant-contact-panel,.gd-account-request-panel) :is(.gd-btn--danger,.gd-account-delete-confirm-btn):is(:hover,:focus,:focus-visible,:active,:visited){border-color:var(--gd-danger)!important;background:var(--gd-danger)!important;background-image:none!important;color:#170706!important;-webkit-text-fill-color:#170706!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--gd-danger) 16%,transparent)!important;outline:none!important} /* 1.36.34 — acciones de hero del asistente alineadas con Citas en mobile. */ @media (max-width:640px){ .gd-assistant-shell .gd-assistant-action-hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:14px} .gd-assistant-shell .gd-assistant-action-hero>.gd-section-topbar-actions{display:block;width:100%} .gd-assistant-shell .gd-assistant-action-hero>.gd-section-topbar-actions>.gd-btn{display:flex;justify-content:center;width:100%;min-height:44px;margin:0} } /* 1.36.35 — navegación centrada y manual alineado con el título en mobile. */ @media (max-width:1024px){ .gd-app-shell .gd-mobile-header,.gd-assistant-shell .gd-mobile-header{position:fixed!important} .gd-app-shell .gd-mobile-header>.gd-mobile-brand,.gd-assistant-shell .gd-mobile-header>.gd-mobile-brand{position:absolute;top:calc(50% + env(safe-area-inset-top)/2);left:50%;z-index:1;max-width:calc(100% - 190px);margin:0;white-space:nowrap;transform:translate(-50%,-50%)} } @media (max-width:640px){ .gd-assistant-shell .gd-section-topbar--with-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:5px} .gd-assistant-shell .gd-section-topbar--with-copy>div:first-child{display:contents} .gd-assistant-shell .gd-section-topbar--with-copy>div:first-child>.gd-section-kicker{grid-column:1/-1;grid-row:1} .gd-assistant-shell .gd-section-topbar--with-copy>div:first-child>.gd-section-topbar-title{grid-column:1;grid-row:2;min-width:0} .gd-assistant-shell .gd-section-topbar--with-copy>.gd-context-help-button{grid-column:2;grid-row:2;align-self:center;justify-self:end;width:40px;height:40px;margin:0;padding:0;justify-content:center;border-radius:12px} .gd-assistant-shell .gd-section-topbar--with-copy>.gd-context-help-button .gd-context-help-svg{width:19px;height:19px} .gd-assistant-shell .gd-section-topbar--with-copy>div:first-child>p{grid-column:1/-1;grid-row:3;max-width:none} .gd-assistant-shell .gd-section-topbar--with-copy>.gd-section-topbar-actions{grid-column:1/-1;grid-row:4;margin-top:9px} } /* ===================================================================== * 1.36.39 — REPORTES 2.1: TARJETAS PLEGABLES + FILTROS POR REPORTE * Scope exclusivo: #gd-tab-reportes * ===================================================================== */ #gd-tab-reportes { max-width: 100%; overflow-x: hidden; } #gd-tab-reportes [hidden] { display: none !important; } #gd-tab-reportes .gd-report-page-head { margin-bottom: 16px; } #gd-tab-reportes .gd-report-page-note { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gd-border) 82%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--gd-card-bg) 92%, transparent); color: var(--gd-text-sec); font-size: 11px; line-height: 1.5; box-sizing: border-box; } #gd-tab-reportes .gd-report-page-note .material-symbols-outlined { flex: 0 0 auto; margin-top: 1px; color: var(--gd-brand-accent); font-size: 18px; } #gd-tab-reportes .gd-reports-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 100%; min-width: 0; } #gd-tab-reportes .gd-report-card, #gd-tab-reportes .gd-report-card:first-child, #gd-tab-reportes .gd-report-card--wide { display: block; grid-column: auto; width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding: 0; overflow: hidden; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--gd-border) 84%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--gd-card-bg) 95%, var(--gd-brand-accent-soft)); box-shadow: 0 10px 26px rgba(5, 25, 17, 0.055); } #gd-tab-reportes .gd-report-card.gd-is-open { grid-column: 1 / -1; box-shadow: 0 16px 34px rgba(5, 25, 17, 0.085); } #gd-tab-reportes .gd-report-card-head { display: block; min-height: 0; padding: 0; border: 0; } #gd-tab-reportes .gd-report-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 15px 17px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; transition: background 150ms ease; } #gd-tab-reportes .gd-report-toggle:hover, #gd-tab-reportes .gd-report-toggle:focus-visible { background: color-mix(in srgb, var(--gd-brand-accent-soft) 55%, transparent); outline: none; } #gd-tab-reportes .gd-report-card-title { display: flex; align-items: center; gap: 11px; min-width: 0; max-width: 100%; } #gd-tab-reportes .gd-report-card-title > span:last-child { display: grid; gap: 3px; min-width: 0; max-width: 100%; } #gd-tab-reportes .gd-report-card-title strong, #gd-tab-reportes .gd-report-card-title small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gd-tab-reportes .gd-report-card-title strong { font-size: 14px; line-height: 1.3; } #gd-tab-reportes .gd-report-card-title small { font-size: 10px; line-height: 1.4; } #gd-tab-reportes .gd-report-card-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--gd-brand-accent-soft); color: var(--gd-brand-accent); overflow: hidden; } #gd-tab-reportes .gd-report-card-icon .material-symbols-outlined { font-size: 20px; line-height: 1; } #gd-tab-reportes .gd-report-toggle-label { color: var(--gd-brand-accent); font-size: 10px; font-weight: 750; white-space: nowrap; } #gd-tab-reportes .gd-report-toggle-icon { color: var(--gd-text-sec); font-size: 20px; transition: transform 160ms ease, color 160ms ease; } #gd-tab-reportes .gd-report-card.gd-is-open .gd-report-toggle-icon { transform: rotate(90deg); color: var(--gd-brand-accent); } #gd-tab-reportes .gd-report-card.gd-is-open .gd-report-toggle-label { color: var(--gd-text-sec); } #gd-tab-reportes .gd-report-card-body { width: 100%; max-width: 100%; min-width: 0; padding: 16px 17px 17px; border-top: 1px solid color-mix(in srgb, var(--gd-border) 78%, transparent); box-sizing: border-box; } #gd-tab-reportes .gd-report-card-filters { display: grid; gap: 12px; width: 100%; max-width: 100%; min-width: 0; margin: 0 0 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--gd-border) 78%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--gd-input-bg) 72%, transparent); box-sizing: border-box; } #gd-tab-reportes .gd-report-card-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; max-width: 100%; min-width: 0; } #gd-tab-reportes .gd-report-card-filters .gd-report-filter-field { display: grid; gap: 6px; min-width: 0; max-width: 100%; } #gd-tab-reportes .gd-report-card-filters .gd-report-filter-field > span { padding: 0 2px; color: var(--gd-text-sec); font-size: 10px; font-weight: 700; line-height: 1.2; } #gd-tab-reportes .gd-report-card-filters select, #gd-tab-reportes .gd-report-card-filters input { width: 100%; max-width: 100%; min-width: 0; height: 42px; min-height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--gd-border); border-radius: 10px; background: var(--gd-input-bg); color: var(--gd-text-main); font: inherit; font-size: 11px; line-height: 1; box-shadow: none; box-sizing: border-box; } #gd-tab-reportes .gd-report-card-filter-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; } #gd-tab-reportes .gd-report-card-filter-actions .gd-btn, #gd-tab-reportes .gd-report-card-filter-actions .gd-report-filter-reset { min-height: 38px; max-width: 100%; box-sizing: border-box; } #gd-tab-reportes .gd-report-filter-reset--text { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; height: 38px; padding: 7px 11px; border: 1px solid var(--gd-border) !important; border-radius: 10px; background: var(--gd-input-bg) !important; color: var(--gd-text-sec) !important; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; } #gd-tab-reportes .gd-report-filter-reset--text .material-symbols-outlined { font-size: 16px; } #gd-tab-reportes .gd-report-card-body .gd-report-table-wrapper { width: 100%; max-width: 100%; min-width: 0; max-height: 430px; padding: 0; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; scrollbar-color: var(--gd-brand-accent) transparent; scrollbar-width: thin; } #gd-tab-reportes .gd-report-card-body .gd-report-table { width: 100%; max-width: none; min-width: 620px; } #gd-tab-reportes .gd-report-card-body .gd-report-loading { min-height: 180px; } @media (max-width: 980px) { #gd-tab-reportes .gd-reports-layout { grid-template-columns: 1fr; } #gd-tab-reportes .gd-report-card.gd-is-open { grid-column: auto; } } @media (max-width: 640px) { #gd-tab-reportes .gd-report-page-note { font-size: 10px; } #gd-tab-reportes .gd-report-toggle { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 13px 14px; } #gd-tab-reportes .gd-report-toggle-label { display: none; } #gd-tab-reportes .gd-report-card-title small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #gd-tab-reportes .gd-report-card-body { padding: 12px; } #gd-tab-reportes .gd-report-card-filters { padding: 12px; } #gd-tab-reportes .gd-report-card-filter-grid { grid-template-columns: 1fr; } #gd-tab-reportes .gd-report-card-filter-actions { align-items: stretch; justify-content: stretch; } #gd-tab-reportes .gd-report-card-filter-actions .gd-btn, #gd-tab-reportes .gd-report-card-filter-actions .gd-report-filter-reset { flex: 1 1 calc(50% - 4px); justify-content: center; } #gd-tab-reportes .gd-report-card-filter-actions .gd-report-export { flex-basis: 100%; width: 100%; } #gd-tab-reportes .gd-report-card-filter-actions .gd-report-export > span:last-child { display: inline; } #gd-tab-reportes .gd-report-card-body .gd-report-table-wrapper { max-height: none; overflow: visible; } #gd-tab-reportes .gd-report-card-body .gd-report-table { min-width: 0; } } /* ========================================================================== 1.36.41 · Pólizas de flotillas Extensión visual aislada: no altera tarjetas ni formularios existentes. ========================================================================== */ .gd-fleet-manager{ grid-column:1/-1; min-width:0; border:1px solid rgba(151,219,42,.18); border-radius:14px; background:rgba(7,24,10,.42); padding:16px; display:grid; gap:12px; } .gd-fleet-manager[hidden],#gd-p-nombre-flotilla-wrap[hidden]{display:none!important} .gd-fleet-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0} .gd-fleet-manager-head>div:first-child{display:grid;gap:3px;min-width:0} .gd-fleet-manager-head strong{font-size:15px;color:var(--gd-text,#fff)} .gd-fleet-manager-head small{color:var(--gd-muted,#9aac9f);line-height:1.35} .gd-fleet-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .gd-fleet-actions[hidden],.gd-fleet-search[hidden]{display:none!important} .gd-fleet-import-label{cursor:pointer} .gd-fleet-search input{width:100%;min-width:0;box-sizing:border-box} .gd-fleet-units-list{min-width:0;max-width:100%;overflow:auto;border-radius:10px} .gd-fleet-unit-table{display:grid;gap:6px;min-width:700px} .gd-fleet-unit-row{ appearance:none;width:100%;border:1px solid rgba(255,255,255,.07);border-radius:10px; background:rgba(255,255,255,.025);color:inherit;padding:10px 12px;cursor:pointer;text-align:left; display:grid;grid-template-columns:minmax(145px,1fr) minmax(200px,1.35fr) minmax(105px,.7fr) auto auto; gap:12px;align-items:center;transition:.18s ease; } .gd-fleet-unit-row:hover{border-color:rgba(151,219,42,.35);background:rgba(151,219,42,.045)} .gd-fleet-unit-row>span{min-width:0;display:grid;gap:2px} .gd-fleet-unit-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gd-fleet-unit-row small{font-size:10px;color:var(--gd-muted,#91a194);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gd-fleet-unit-status{display:inline-flex!important;justify-self:start;padding:4px 8px;border-radius:999px;background:rgba(151,219,42,.12);color:#a5df42;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .gd-fleet-unit-status.is-off{background:rgba(255,255,255,.06);color:#97a29a} .gd-fleet-unit-edit{display:inline!important;color:#a6df45;font-size:11px;font-weight:800;white-space:nowrap} .gd-policy-fleet-badge{display:block;margin-top:4px;color:#a6df45;font-size:10px;font-weight:700;line-height:1.25} .gd-fleet-unit-modal{width:min(820px,calc(100vw - 32px));max-height:min(88vh,820px);overflow:auto} body.light-mode .gd-fleet-manager{background:rgba(247,251,245,.88);border-color:rgba(77,130,24,.18)} body.light-mode .gd-fleet-unit-row{background:#fff;border-color:rgba(15,50,20,.1)} @media(max-width:760px){ .gd-fleet-manager-head{display:grid} .gd-fleet-actions{justify-content:flex-start} .gd-fleet-actions .gd-btn{flex:1 1 130px;justify-content:center} .gd-fleet-unit-table{min-width:0} .gd-fleet-unit-row{grid-template-columns:1fr auto;gap:8px} .gd-fleet-unit-row>span:nth-child(2),.gd-fleet-unit-row>span:nth-child(3){grid-column:1/-1} .gd-fleet-unit-edit{grid-column:2;grid-row:1;align-self:start} .gd-fleet-unit-status{grid-column:2;grid-row:2;justify-self:end} } /* ========================================================================== 1.36.42 · Modal de unidades de flotilla sobre la ficha de póliza La ficha de póliza usa z-index 10050; el editor de unidad debe vivir por encima porque se abre como un segundo nivel modal desde esa ficha. ========================================================================== */ #gd-modal-flotilla-unidad.gd-visible{z-index:10120} #gd-modal-flotilla-unidad .gd-modal-caja{position:relative;z-index:1} /* Guani Hub 1.36.43 — seguridad de sesión y continuidad de renovaciones. */ .gd-session-security-warning { position: fixed; inset: 0; z-index: 12050; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .52); backdrop-filter: blur(6px); } .gd-session-security-warning__card { width: min(460px, 100%); padding: 24px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); color: #0f172a; } .gd-session-security-warning__card strong { display:block; margin-bottom:8px; font-size:1.1rem; } .gd-session-security-warning__card p { margin:0 0 18px; color:#475569; line-height:1.55; } .gd-session-security-warning__card > div { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .gd-session-security-warning__card button, .gd-session-security-warning__card a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border-radius:10px; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; } .gd-session-security-warning__card button { border:0; background:#0f172a; color:#fff; } .gd-session-security-warning__card a { border:1px solid #cbd5e1; background:#fff; color:#334155; } .gd-followups-renewal-cycle { /* Mantiene el mismo lenguaje visual de las demás secciones del formulario. */ border-color: var(--gd-border); border-radius: 14px; background: color-mix(in srgb, var(--gd-input-bg) 42%, transparent); padding: 16px; } .gd-followups-renewal-note { margin: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 24%, var(--gd-border)); border-radius: 10px; background: color-mix(in srgb, var(--gd-emerald) 7%, var(--gd-input-bg)); color: var(--gd-text-sec); font-size: 10px; line-height: 1.55; } .gd-followups-renewal-note strong { color: var(--gd-text-main); } .gd-followups-history__cycles { display: grid; gap: 10px; min-width: 0; } .gd-followups-history__cycle { width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; border: 1px solid var(--gd-border); border-left: 3px solid color-mix(in srgb, var(--gd-text-sec) 45%, transparent); border-radius: 12px; background: var(--gd-card-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .gd-followups-history__cycle.is-actual { border-color: color-mix(in srgb, var(--gd-emerald) 32%, var(--gd-border)); border-left-color: var(--gd-emerald); background: color-mix(in srgb, var(--gd-emerald) 6%, var(--gd-card-bg)); } .gd-followups-history__cycle.is-nuevo { border-left-color: color-mix(in srgb, var(--gd-emerald) 78%, var(--gd-gold)); } .gd-followups-history__cycle.is-anterior { border-left-color: color-mix(in srgb, var(--gd-text-sec) 54%, var(--gd-border)); } .gd-followups-history__cycle header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .gd-followups-history__cycle header > div { display: grid; gap: 5px; min-width: 0; } .gd-followups-history__cycle header strong { color: var(--gd-text-main); font-size: 11px; line-height: 1.35; } .gd-followups-history__cycle header span { width: max-content; max-width: 100%; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 24%, var(--gd-border)); border-radius: 999px; background: color-mix(in srgb, var(--gd-emerald) 9%, var(--gd-input-bg)); color: var(--gd-emerald); font-size: 8px; font-weight: 900; line-height: 1.2; } .gd-followups-history__cycle.is-actual header span { border-color: color-mix(in srgb, var(--gd-success) 30%, var(--gd-border)); background: color-mix(in srgb, var(--gd-success) 10%, var(--gd-input-bg)); color: var(--gd-success); } .gd-followups-history__cycle.is-anterior header span { border-color: var(--gd-border); background: var(--gd-input-bg); color: var(--gd-text-sec); } .gd-followups-history__cycle header small { color: var(--gd-text-sec); font-size: 8px; white-space: nowrap; } .gd-followups-history__cycle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; min-width: 0; } .gd-followups-history__cycle-grid span { min-width: 0; display: grid; gap: 3px; } .gd-followups-history__cycle-grid small { color: var(--gd-text-sec); font-size: 8px; } .gd-followups-history__cycle-grid strong { min-width: 0; overflow-wrap: anywhere; color: var(--gd-text-main); font-size: 10px; line-height: 1.4; } .gd-followups-history__cycle > p { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--gd-border); color: var(--gd-text-sec); font-size: 8px; line-height: 1.45; } @media (max-width: 640px) { .gd-followups-renewal-cycle { padding: 14px; } .gd-followups-renewal-note { font-size: 9px; } .gd-followups-history__cycle { padding: 12px; } .gd-followups-history__cycle header { gap: 8px; } .gd-followups-history__cycle-grid { grid-template-columns: 1fr; gap: 9px; } .gd-session-security-warning { padding:16px; } } /* ===================================================================== * 1.36.49 · MOBILE PERFORMANCE MODE * Conserva fondos/bordes/colores; elimina blur de composición en pantallas * pequeñas para reducir carga GPU y latencia táctil. * ===================================================================== */ @media (max-width: 820px) { .gdl-nav, .gd-topbar, .gd-glass, .gd-card, .gd-section-topbar, .gd-mobile-header, .gd-fx-pill, .gd-notification-center__trigger, .gd-report-table thead, #gd-tab-reportes .gd-report-filter-panel, .gd-settings-profile-summary, .gd-settings-page .gd-card, .gd-settings-integration-card, .gd-settings-data-card, .gd-agenda-toolbar, .gd-google-status, .gd-agenda-reminders, .gd-agenda-summary, .gd-agenda-item, .gd-notifications-savebar, .gd-document-progress, .gd-payment-choice { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ===================================================================== * GUANI HUB 1.36.50 — MOBILE FORM LAYERS / FLOATING CONTROLS * Sólo <=1024px: formularios por encima del navbar fijo y sin controles * flotantes cubriendo encabezados, campos o acciones de guardado. * ===================================================================== */ @media (max-width:1024px) { .gd-app-shell .gd-slideover.gd-visible, .gd-app-shell .gd-modal-fondo.gd-visible { z-index:100110 !important; } body.gd-modal-abierto .gd-help-chatbot, body.gd-modal-open .gd-help-chatbot, body.gd-commercial-modal-open .gd-help-chatbot, body.gd-document-modal-open .gd-help-chatbot, body.gd-modal-abierto #ast-scroll-top, body.gd-modal-open #ast-scroll-top, body.gd-commercial-modal-open #ast-scroll-top, body.gd-document-modal-open #ast-scroll-top, body.gd-modal-abierto .ast-scroll-to-top-right, body.gd-modal-open .ast-scroll-to-top-right, body.gd-commercial-modal-open .ast-scroll-to-top-right, body.gd-document-modal-open .ast-scroll-to-top-right, body.gd-modal-abierto .ast-scroll-to-top-left, body.gd-modal-open .ast-scroll-to-top-left, body.gd-commercial-modal-open .ast-scroll-to-top-left, body.gd-document-modal-open .ast-scroll-to-top-left { display:none !important; } .gd-app-shell .gd-slideover.gd-visible .gd-slideover-header { padding-top:calc(16px + env(safe-area-inset-top)); } .gd-app-shell .gd-slideover.gd-visible .gd-slideover-body { padding-bottom:calc(24px + env(safe-area-inset-bottom)); } .gd-app-shell .gd-modal-fondo.gd-visible .gd-modal-caja { max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } } /* ===================================================================== * GUANI HUB 1.36.51 — MOBILE OVERLAY STACK + HAMBURGER BRAND STATES * Sólo mobile/tablet. Unifica TODOS los formularios por encima del navbar * fijo sin modificar la jerarquía ni los estilos de desktop. * ===================================================================== */ @media (max-width:1024px) { /* Astra no debe inyectar azul en el menú hamburguesa del CRM. */ .gd-portal .gd-mobile-header .gd-hamburger, .gd-portal .gd-mobile-header .gd-hamburger:visited { -webkit-appearance:none !important; appearance:none !important; -webkit-tap-highlight-color:transparent; border:1px solid transparent !important; background:transparent !important; background-image:none !important; color:var(--gd-text-main) !important; box-shadow:none !important; text-shadow:none !important; outline:none !important; } .gd-portal .gd-mobile-header .gd-hamburger:hover, .gd-portal .gd-mobile-header .gd-hamburger:focus, .gd-portal .gd-mobile-header .gd-hamburger:focus-visible, .gd-portal .gd-mobile-header .gd-hamburger:active, .gd-portal .gd-mobile-header .gd-hamburger[aria-expanded="true"] { border-color:color-mix(in srgb,var(--gd-brand-accent,var(--gd-emerald)) 45%,transparent) !important; background:color-mix(in srgb,var(--gd-brand-accent,var(--gd-emerald)) 13%,transparent) !important; background-image:none !important; color:var(--gd-brand-accent,var(--gd-emerald)) !important; -webkit-text-fill-color:var(--gd-brand-accent,var(--gd-emerald)) !important; box-shadow:none !important; outline:none !important; } .gd-portal .gd-mobile-header .gd-hamburger:active { background:color-mix(in srgb,var(--gd-brand-accent,var(--gd-emerald)) 20%,transparent) !important; } .gd-portal .gd-mobile-header .gd-hamburger:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb,var(--gd-brand-accent,var(--gd-emerald)) 18%,transparent) !important; } /* * Capa única para formularios/dialogs del CRM. El navbar mobile está en * 100030; todos los formularios quedan por encima. Se enumeran los roots * reales para no alterar tarjetas/inputs inline ni el layout de desktop. */ .gd-modal-backdrop, .gd-modal-fondo, .gd-slideover, .gd-agenda-modal, .gd-commercial-modal, .gd-team-modal, .gd-followups-modal, .gd-followups-history, .gd-account-delete-modal, .gd-payment-modal, .gd-document-modal, .gd-assistant-contact-modal, .gd-assistant-create-modal, .gd-account-request-modal, .gd-security-modal, .gd-login-mfa-modal { z-index:100200 !important; } /* Formularios que pueden abrirse encima de otro formulario. */ #gd-modal-flotilla-unidad.gd-visible { z-index:100280 !important; } .gd-catalog-dialog { z-index:100300 !important; } /* El aviso de seguridad de sesión nunca debe quedar debajo de un formulario. */ .gd-session-security-warning { z-index:100400 !important; } /* El botón propio de GuaniHub también se retira cuando hay un formulario. */ body.gd-modal-abierto .gd-scroll-top, body.gd-modal-open .gd-scroll-top, body.gd-commercial-modal-open .gd-scroll-top, body.gd-document-modal-open .gd-scroll-top, body.gd-catalog-dialog-open .gd-scroll-top, body.gd-catalog-dialog-open .gd-help-chatbot { display:none !important; } } /* ===================================================================== * GUANI HUB 1.36.52 — PUSH + OVERLAY STACK DESKTOP * Push vive dentro de la campana existente. Los overlays del CRM pasan * siempre por encima de campana/Guani también en desktop, sin moverlos. * ===================================================================== */ .gd-notification-center__push { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:10px; padding:10px; border:1px solid color-mix(in srgb,var(--gd-emerald) 20%,var(--gd-border)); border-radius:11px; background:color-mix(in srgb,var(--gd-emerald) 5%,var(--gd-card-bg)); } .gd-notification-center__push-copy { display:flex; align-items:center; gap:9px; min-width:0; } .gd-notification-center__push-copy>svg { flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--gd-emerald); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .gd-notification-center__push-copy>span { display:grid; gap:2px; min-width:0; } .gd-notification-center__push-copy strong { color:var(--gd-text-main); font-size:10px; line-height:1.3; } .gd-notification-center__push-copy small { color:var(--gd-text-sec); font-size:8px; line-height:1.35; } .gd-notification-center__push[data-state="active"] small { color:var(--gd-emerald); } .gd-notification-center__push[data-state="warning"] small { color:var(--gd-gold,#d6b94a); } .gd-notification-center__push-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; } .gd-notification-center__push-detail { grid-column:1/-1; display:flex; align-items:flex-start; gap:8px; padding-top:8px; border-top:1px solid var(--gd-border); cursor:pointer; } .gd-notification-center__push-detail[hidden] { display:none !important; } .gd-notification-center__push-detail input { width:15px; height:15px; margin:1px 0 0; accent-color:var(--gd-lime); flex:0 0 auto; } .gd-notification-center__push-detail span { display:grid; gap:2px; min-width:0; } .gd-notification-center__push-detail strong { color:var(--gd-text-main); font-size:9px; line-height:1.3; } .gd-notification-center__push-detail small { color:var(--gd-text-sec); font-size:8px; line-height:1.4; } .gd-notification-center__panel>footer .gd-notification-center__push-actions button { width:auto; min-height:32px; padding:0 10px; border:1px solid color-mix(in srgb,var(--gd-emerald) 28%,var(--gd-border)); border-radius:9px; background:color-mix(in srgb,var(--gd-emerald) 9%,var(--gd-input-bg)); background-image:none; color:var(--gd-emerald); -webkit-text-fill-color:var(--gd-emerald); font-size:9px; font-weight:850; box-shadow:none; cursor:pointer; } .gd-notification-center__panel>footer .gd-notification-center__push-actions button:is(:hover,:focus,:focus-visible,:active) { border-color:var(--gd-emerald); background:color-mix(in srgb,var(--gd-emerald) 16%,var(--gd-input-bg)); background-image:none; color:var(--gd-emerald); -webkit-text-fill-color:var(--gd-emerald); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--gd-emerald) 14%,transparent); } .gd-notification-center__panel>footer .gd-notification-center__push-actions button:disabled { opacity:.55; cursor:wait; } /* Todos los formularios quedan por encima de la campana (100040) y Guani * (100060) también en desktop. No se cambia posición, tamaño ni layout. */ .gd-modal-backdrop, .gd-modal-fondo, .gd-slideover, .gd-agenda-modal, .gd-commercial-modal, .gd-team-modal, .gd-followups-modal, .gd-followups-history, .gd-account-delete-modal, .gd-payment-modal, .gd-document-modal, .gd-assistant-contact-modal, .gd-assistant-create-modal, .gd-account-request-modal, .gd-security-modal, .gd-login-mfa-modal { z-index:100200 !important; } #gd-modal-flotilla-unidad.gd-visible { z-index:100280 !important; } .gd-catalog-dialog { z-index:100300 !important; } .gd-session-security-warning { z-index:100400 !important; } @media (max-width:480px) { .gd-notification-center__push { grid-template-columns:1fr; align-items:stretch; } .gd-notification-center__push-actions { justify-content:flex-start; } } /* ========================================================================== * 1.36.55 — Trámites: criterio documental + foco UX post-guardado * ========================================================================== */ .gd-case-document-option{ padding:14px 16px; border:1px solid var(--gd-border); border-radius:12px; background:var(--gd-input-bg); } .gd-case-document-toggle{ display:flex!important; align-items:flex-start; gap:11px; margin:0!important; cursor:pointer; text-transform:none!important; } .gd-case-document-toggle input[type="checkbox"]{ width:18px!important; height:18px!important; min-width:18px; margin:2px 0 0!important; accent-color:var(--gd-emerald); } .gd-case-document-toggle>span{display:grid;gap:4px;min-width:0} .gd-case-document-toggle strong{color:var(--gd-text-main);font-size:13px;line-height:1.35} .gd-case-document-toggle small{color:var(--gd-text-sec);font-size:11px;line-height:1.5} .gd-document-navigation-focus{ outline:2px solid var(--gd-emerald)!important; outline-offset:3px; box-shadow:0 0 0 5px rgba(161,220,54,.12)!important; transition:outline-color .2s ease,box-shadow .2s ease; } @media (max-width:820px){ .gd-case-document-option{padding:13px 14px} .gd-case-document-toggle strong{font-size:12px} .gd-case-document-toggle small{font-size:10.5px} } /* ===================================================================== * 1.36.57 — Acompañamiento temporal de verificación OAuth de Google * Solo Configuración → Integraciones. No altera OAuth ni otros módulos. * ===================================================================== */ #gd-ajustes-integraciones .gd-google-verification-banner { display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:15px 16px; border:1px solid rgba(135,191,20,.28); border-radius:14px; background:linear-gradient(145deg,rgba(135,191,20,.09),rgba(135,191,20,.035)); box-shadow:0 12px 30px rgba(0,0,0,.12); } #gd-ajustes-integraciones .gd-google-verification-banner__icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:12px; background:rgba(135,191,20,.14); color:var(--gd-acento,#87bf14); } #gd-ajustes-integraciones .gd-google-verification-banner__icon svg, #gd-ajustes-integraciones .gd-google-verification-dialog svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } #gd-ajustes-integraciones .gd-google-verification-banner__copy { min-width:0;flex:1; } #gd-ajustes-integraciones .gd-google-verification-banner__copy strong { display:block;color:var(--gd-texto-principal,#fff);font-size:13px; } #gd-ajustes-integraciones .gd-google-verification-banner__copy p { margin:4px 0 0;color:var(--gd-texto-secundario,#aeb7a9);font-size:11px;line-height:1.5; } #gd-ajustes-integraciones .gd-google-verification-info { flex:0 0 auto;white-space:nowrap; } .gd-google-verification-open { overflow:hidden; } .gd-google-verification-modal[hidden] { display:none !important; } .gd-google-verification-modal { position:fixed; inset:0; z-index:100320; display:grid; place-items:center; padding:24px; } .gd-google-verification-modal__backdrop { position:absolute;inset:0;background:rgba(5,9,4,.78); } .gd-google-verification-dialog { position:relative; z-index:1; dis:flex; flex-direction:column; width:min(760px,100%); max-height:min(84vh,820px); overflow:hidden; border:1px solid rgba(135,191,20,.3); border-radius:20px; background:#101a0d; box-shadow:0 28px 80px rgba(0,0,0,.55); color:#f4f8ef; } .gd-google-verification-dialog__head { display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08); } .gd-google-verification-dialog__brand { display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:rgba(135,191,20,.12);color:#87bf14; } .gd-google-verification-dialog__brand svg { fill:currentColor;stroke:none; } .gd-google-verification-dialog__head>div { min-width:0;flex:1; } .gd-google-verification-dialog__head>div>span { display:block;margin-bottom:3px;color:#87bf14;font-size:9px;font-weight:850;letter-spacing:.12em; } .gd-google-verification-dialog__head h3 { margin:0;color:#fff;font-size:20px;line-height:1.2; } .gd-google-verification-close { display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#111b0e;color:#e7eddf;cursor:pointer; } .gd-google-verification-close:hover,.gd-google-verification-close:focus-visible { border-color:#87bf14;background:rgba(135,191,20,.1);color:#87bf14;outline:none; } .gd-google-verification-dialog__body { overflow:auto;padding:20px;overscroll-behavior:contain; } .gd-google-verification-lead { margin:0 0 15px;color:#c4cdbb;font-size:12px;line-height:1.65; } .gd-google-verification-safety { display:flex;align-items:flex-start;gap:11px;margin-bottom:16px;padding:13px 14px;border:1px solid rgba(245,166,35,.25);border-radius:12px;background:rgba(245,166,35,.07); } .gd-google-verification-safety>span { color:#f5b447;flex:0 0 auto; } .gd-google-verification-safety p { margin:0;color:#e5e8df;font-size:11px;line-height:1.55; } .gd-google-verification-permissions { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px; } .gd-google-verification-permissions>div { display:flex;gap:10px;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#152110; } .gd-google-verification-permissions>div>span { display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:rgba(135,191,20,.11);color:#87bf14; } .gd-google-verification-permissions p { margin:0;min-width:0; } .gd-google-verification-permissions strong { display:block;color:#fff;font-size:11px; } .gd-google-verification-permissions small { display:block;margin-top:3px;color:#9faa96;font-size:10px;line-height:1.45; } .gd-google-verification-privacy { margin:0 0 16px;color:#919c8a;font-size:10px;line-height:1.5; } .gd-google-verification-privacy a { color:#9bd42d;font-weight:750;text-decoration:none; } .gd-google-verification-privacy a:hover,.gd-google-verification-privacy a:focus-visible { color:#c3ef6b;text-decoration:underline; } .gd-google-verification-steps { padding:14px 15px;border:1px solid rgba(135,191,20,.18);border-radius:12px;background:rgba(135,191,20,.045); } .gd-google-verification-steps>strong { color:#eaf5d5;font-size:12px; } .gd-google-verification-steps ol { margin:9px 0 7px;padding-left:20px;color:#c5ceb9;font-size:11px;line-height:1.55; } .gd-google-verification-steps p { margin:0;color:#87907f;font-size:9.5px;line-height:1.45; } .gd-google-verification-guide { margin:16px 0 0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#0c1409; } .gd-google-verification-guide figcaption { margin-bottom:9px;color:#dfe8d4;font-size:11px;font-weight:750; } .gd-google-verification-guide img { display:block;width:100%;max-height:360px;object-fit:contain;border-radius:10px;background:#fff; } .gd-google-verification-guide a { display:inline-flex;margin-top:9px;color:#9bd42d;font-size:10px;font-weight:750;text-decoration:none; } .gd-google-verification-guide a:hover,.gd-google-verification-guide a:focus-visible { color:#c3ef6b;text-decoration:underline; } .gd-google-verification-dialog__actions { display:flex;justify-content:flex-end;gap:9px;padding:15px 20px;border-top:1px solid rgba(255,255,255,.08);background:#0e170b; } .gd-google-verification-dialog__actions .gd-boton { min-width:130px; } .gd-google-verification-dialog__actions .gd-boton-primario { display:inline-flex;align-items:center;justify-content:center;gap:7px; } .gd-google-verification-dialog__actions .gd-boton-primario svg { width:17px;height:17px; } @media (max-width: 720px) { #gd-ajustes-integraciones .gd-google-verification-banner { align-items:flex-start;flex-wrap:wrap;padding:13px; } #gd-ajustes-integraciones .gd-google-verification-banner__copy { flex:1 1 calc(100% - 58px); } #gd-ajustes-integraciones .gd-google-verification-info { width:100%; } .gd-google-verification-modal { align-items:end;padding:10px; } .gd-google-verification-dialog { width:100%;max-height:92dvh;border-radius:18px; } .gd-google-verification-dialog__head { padding:15px; } .gd-google-verification-dialog__head h3 { font-size:17px; } .gd-google-verification-dialog__body { padding:15px; } .gd-google-verification-permissions { grid-template-columns:1fr; } .gd-google-verification-dialog__actions { padding:12px 15px; } .gd-google-verification-dialog__actions .gd-boton { min-width:0;flex:1; } } /* ===================================================================== * 1.36.59 — guía Google compacta + slider y tutoriales YouTube * ===================================================================== */ .gd-google-verification-dialog{display:flex!important;flex-direction:column!important;} .gd-google-verification-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto!important;} .gd-google-verification-lead{margin-bottom:12px!important;} .gd-google-verification-steps--compact{margin-bottom:14px;padding:12px 14px!important;} .gd-google-verification-steps--compact ol{margin-bottom:0!important;} .gd-google-verification-slider{margin-top:4px;padding:12px;border:1px solid rgba(135,191,20,.2);border-radius:16px;background:#0b1309;} .gd-google-verification-slider__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#eaf5d5;font-size:11px;} .gd-google-verification-slider__top span{color:#91a087;font-size:10px;font-weight:750;} .gd-google-verification-slider__viewport{position:relative;min-height:240px;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#fff;} .gd-google-verification-slide{width:100%;margin:0;animation:gdGoogleSlideIn .18s ease;} .gd-google-verification-slide[hidden]{display:none!important;} .gd-google-verification-slide>a{display:grid;place-items:center;width:100%;min-height:240px;background:#fff;} .gd-google-verification-slide img{display:block;width:100%;max-height:440px;object-fit:contain;background:#fff;} .gd-google-verification-slide figcaption{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#111b0e;color:#aeb9a5;font-size:10px;} .gd-google-verification-slide figcaption strong{color:#a1dc36;white-space:nowrap;} .gd-google-verification-slider__controls{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:10px;margin-top:10px;} .gd-google-verification-slider__controls>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:7px 10px;border:1px solid rgba(135,191,20,.3);border-radius:9px;background:#111b0e;color:#dce8d3;font-size:10px;font-weight:750;cursor:pointer;} .gd-google-verification-slider__controls>button:hover,.gd-google-verification-slider__controls>button:focus-visible{border-color:#87bf14;background:rgba(135,191,20,.1);color:#b7e85a;outline:none;} .gd-google-verification-slider__controls>button svg{width:16px!important;height:16px!important;} .gd-google-verification-slider__dots{display:flex;justify-content:center;gap:6px;min-width:0;} .gd-google-verification-slider__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#485441;cursor:pointer;} .gd-google-verification-slider__dots button.is-active{background:#9bd42d;box-shadow:0 0 0 3px rgba(155,212,45,.13);} .gd-google-verification-privacy--compact{margin:12px 0 0!important;padding:0 2px;} .gd-google-verification-privacy--compact strong{color:#cbd7c3;} @keyframes gdGoogleSlideIn{from{opacity:.4;transform:translateX(6px)}to{opacity:1;transform:none}} .gd-help-video-tutorial{margin:0 0 20px;padding:14px;border:1px solid rgba(145,204,29,.27);border-radius:16px;background:#0c1709;} .gd-help-video-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;} .gd-help-video-head>div{min-width:0;} .gd-help-video-head strong{display:block;margin-top:3px;color:#f2f8ed;font-size:14px;line-height:1.35;} .gd-help-video-head>a{flex:0 0 auto;color:#a9dc49;font-size:10px;font-weight:750;text-decoration:none;} .gd-help-video-head>a:hover,.gd-help-video-head>a:focus-visible{color:#c8ef7c;text-decoration:underline;} .gd-help-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#050805;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);} .gd-help-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;} .gd-help-video-actions{display:flex;justify-content:flex-end;margin-top:10px;} .gd-help-video-actions .gd-boton{min-height:34px!important;padding:7px 12px!important;font-size:10px!important;} .gd-help-video-modal{position:fixed;inset:0;z-index:100390;display:grid;place-items:center;padding:24px;} .gd-help-video-modal-backdrop{position:absolute;inset:0;background:rgba(4,9,3,.88);backdrop-filter:blur(4px);} .gd-help-video-modal>section{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1040px,100%);max-height:92vh;border:1px solid rgba(145,204,29,.34);border-radius:20px;overflow:hidden;background:#0d180a;color:#eef7e8;box-shadow:0 30px 90px rgba(0,0,0,.62);} .gd-help-video-modal header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 19px;border-bottom:1px solid rgba(145,204,29,.16);} .gd-help-video-modal header h3{margin:4px 0 0;color:#fff;font-size:19px;} .gd-help-video-modal header>button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111e0d;color:#fff;font-size:26px;cursor:pointer;} .gd-help-video-modal>.gd-help-video-frame,.gd-help-video-modal>section>.gd-help-video-frame{aspect-ratio:16/9;border-radius:0;align-self:center;} .gd-help-video-modal footer{display:flex;justify-content:flex-end;gap:9px;padding:13px 19px;border-top:1px solid rgba(145,204,29,.16);background:#0a1307;} .gd-help-chatbot-message-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} .gd-help-chatbot-message-actions button{margin-top:0!important;} body.light-mode .gd-help-video-tutorial{border-color:#d8e5cf;background:#f7faf5;} body.light-mode .gd-help-video-head strong{color:#1e2b18;} @media(max-width:760px){ .gd-google-verification-dialog{max-height:94dvh!important;} .gd-google-verification-slider__viewport,.gd-google-verification-slide>a{min-height:180px;} .gd-google-verification-slide img{max-height:360px;} .gd-google-verification-slider__controls{grid-template-columns:38px 1fr 38px;} .gd-google-verification-slider__controls>button{padding:7px;} .gd-google-verification-slider__controls>button span{display:none;} .gd-help-video-head{align-items:flex-start;flex-direction:column;gap:5px;} .gd-help-video-actions{display:grid;} .gd-help-video-actions .gd-boton{width:100%;} .gd-help-video-modal{padding:10px;align-items:center;} .gd-help-video-modal>section{border-radius:15px;} .gd-help-video-modal header{padding:14px 15px;} .gd-help-video-modal header h3{font-size:16px;} .gd-help-video-modal footer{display:grid;grid-template-columns:1fr;padding:12px 15px;} .gd-help-video-modal footer .gd-boton{width:100%;text-align:center;justify-content:center;} } .gd-help-video-frame:fullscreen,.gd-help-video-frame:-webkit-full-screen{width:100vw!important;height:100vh!important;aspect-ratio:auto!important;border-radius:0!important;background:#000!important;} .gd-help-video-frame:fullscreen iframe,.gd-help-video-frame:-webkit-full-screen iframe{width:100%!important;height:100%!important;} /* 1.36.63 · Mercado Pago Billing */ .gd-mp-account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 2px; padding:14px; border:1px solid rgba(135,191,20,.24); border-radius:14px; background:rgba(135,191,20,.055); } .gd-mp-account-actions .gd-boton { margin:0; } .gd-mp-account-status { color:var(--gd-texto-secundario,#a8af9f); font-size:12px; line-height:1.4; } .gd-registration-provider-card strong { color:#87bf14; font-size:13px; } .gd-registration-payment-section { margin-top:18px; } @media (max-width:820px) { .gd-mp-account-actions { align-items:stretch; } .gd-mp-account-actions .gd-boton { width:100%; justify-content:center; } .gd-mp-account-status { width:100%; } } /* 1.36.71 · Cuenta y suscripción compacta + recibos de pago · iconos corregidos */ #gd-ajustes-plan .gd-subscription-facts > div{min-height:112px;} .gd-subscription-action-row{display:flex;align-items:stretch;gap:10px;margin:12px 0 4px;} .gd-subscription-action-row>.gd-subscription-receipts-entry{flex:0 0 auto;display:flex;} .gd-subscription-action-row>.gd-subscription-receipts-entry .gd-boton{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;min-height:44px;} .gd-subscription-action-row>.gd-mp-account-actions{flex:1;margin:0;padding:10px 12px;min-width:0;} .gd-subscription-action-row>.gd-mp-account-actions:empty{display:none;} .gd-subscription-plan-details{margin-top:12px;border:1px solid var(--gd-border);border-radius:12px;background:color-mix(in srgb,var(--gd-input-bg) 62%,transparent);overflow:hidden;} .gd-subscription-plan-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 13px;color:var(--gd-text-main);font-size:11px;font-weight:750;cursor:pointer;list-style:none;user-select:none;} .gd-subscription-plan-details>summary::-webkit-details-marker{display:none;} .gd-subscription-plan-details>summary>span:first-child{display:inline-flex;align-items:center;gap:7px;} .gd-subscription-plan-details>summary .material-symbols-outlined{font-size:18px;line-height:1;color:var(--gd-emerald);} .gd-subscription-plan-details-chevron{transition:transform .2s ease;} .gd-subscription-plan-details[open] .gd-subscription-plan-details-chevron{transform:rotate(90deg);} .gd-subscription-plan-details[open]>summary{border-bottom:1px solid var(--gd-border);background:rgba(135,191,20,.045);} .gd-subscription-plan-details-body{padding:14px;} .gd-subscription-plan-details .gd-subscription-modules{margin-bottom:14px;} .gd-subscription-plan-details .gd-subscription-usage{padding-top:14px;} .gd-subscription-receipts-modal .gd-payment-modal-panel{width:min(880px,100%);} .gd-subscription-receipts-list{display:grid;gap:9px;} .gd-subscription-receipt-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--gd-border);border-radius:12px;background:color-mix(in srgb,var(--gd-input-bg) 78%,transparent);} .gd-subscription-receipt-main{display:grid;gap:3px;min-width:0;} .gd-subscription-receipt-main>span{color:var(--gd-emerald);font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;} .gd-subscription-receipt-main>strong{color:var(--gd-text-main);font-size:12px;line-height:1.35;overflow-wrap:anywhere;} .gd-subscription-receipt-main>small{color:var(--gd-text-sec);font-size:9.5px;line-height:1.4;overflow-wrap:anywhere;} .gd-subscription-receipt-amount{display:grid;justify-items:end;gap:5px;white-space:nowrap;} .gd-subscription-receipt-amount>strong{color:var(--gd-text-main);font-size:12px;} .gd-subscription-receipt-paid{display:inline-flex;align-items:center;gap:4px;color:var(--gd-emerald);font-size:9px;font-weight:750;} .gd-subscription-receipt-paid .material-symbols-outlined{font-size:15px;} .gd-subscription-receipt-download{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:38px!important;padding:8px 11px!important;margin:0!important;white-space:nowrap;} .gd-subscription-receipt-download .material-symbols-outlined,.gd-subscription-receipts-open .material-symbols-outlined{font-size:17px;} .gd-subscription-receipt-legal{display:flex;align-items:flex-start;gap:7px;margin:13px 1px 0;color:var(--gd-text-sec);font-size:9.5px;line-height:1.5;} .gd-subscription-receipt-legal .material-symbols-outlined{flex:0 0 auto;font-size:16px;color:var(--gd-emerald);} .gd-subscription-receipts-empty{display:grid;justify-items:center;gap:7px;padding:34px 18px;text-align:center;border:1px dashed var(--gd-border);border-radius:12px;} .gd-subscription-receipts-empty>.material-symbols-outlined{font-size:34px;color:var(--gd-emerald);} .gd-subscription-receipts-empty strong{color:var(--gd-text-main);font-size:13px;} .gd-subscription-receipts-empty p{margin:0;color:var(--gd-text-sec);font-size:10px;} body.light-mode .gd-subscription-plan-details,body.light-mode .gd-subscription-receipt-row{background:#f8faf6;} @media(max-width:820px){ .gd-subscription-action-row{flex-direction:column;} .gd-subscription-action-row>.gd-subscription-receipts-entry,.gd-subscription-action-row>.gd-subscription-receipts-entry .gd-boton{width:100%;} .gd-subscription-receipt-row{grid-template-columns:minmax(0,1fr) auto;} .gd-subscription-receipt-download{grid-column:1/-1;width:100%;} } @media(max-width:560px){ .gd-subscription-receipt-row{grid-template-columns:1fr;align-items:start;} .gd-subscription-receipt-amount{justify-items:start;} .gd-subscription-receipt-download{grid-column:auto;} } /* 1.36.72 · Estado de renovación Mercado Pago cancelada */ .gd-subscription-plan-notice--mp-canceled{border-color:rgba(158,214,43,.35);background:rgba(105,149,29,.10)} /* 1.36.81 — Citas: las videollamadas sólo se ofrecen cuando la integración * está realmente conectada. El aviso reutiliza la paleta del modal y SVG * inline para no añadir nuevas ligaduras de iconos. */ .gd-agenda-integration-hint { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--gd-emerald) 22%, var(--gd-border)); border-radius: 12px; background: color-mix(in srgb, var(--gd-emerald) 5%, var(--gd-input-bg)); } .gd-agenda-integration-hint-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: color-mix(in srgb, var(--gd-emerald) 13%, transparent); color: var(--gd-emerald); } .gd-agenda-integration-hint-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gd-agenda-integration-hint-copy { min-width: 0; flex: 1 1 auto; } .gd-agenda-integration-hint-copy strong, .gd-agenda-integration-hint-copy p { display: block; margin: 0; } .gd-agenda-integration-hint-copy strong { color: var(--gd-text-main); font-size: 11px; } .gd-agenda-integration-hint-copy p { margin-top: 3px; color: var(--gd-text-sec); font-size: 10px; line-height: 1.45; } .gd-agenda-integration-hint-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .gd-appointment-modality-option.is-current-unavailable, .gd-appointment-modality-option.is-current-unavailable:hover { opacity: .64; cursor: not-allowed; transform: none; border-style: dashed !important; } @media (max-width: 700px) { .gd-agenda-integration-hint { align-items: flex-start; flex-wrap: wrap; } .gd-agenda-integration-hint-actions { width: 100%; justify-content: flex-start; padding-left: 43px; } } /* 1.36.82 — Modalidades incluidas pero aún no conectadas. * Permanecen visibles como referencia, pero son completamente inertes. */ .gd-appointment-modality-option.is-integration-unavailable, .gd-appointment-modality-option.is-integration-unavailable:disabled, .gd-appointment-modality-option.is-integration-unavailable:hover, .gd-appointment-modality-option.is-integration-unavailable:focus, .gd-appointment-modality-option.is-integration-unavailable:focus-visible, .gd-appointment-modality-option.is-integration-unavailable:active { opacity: .46 !important; cursor: not-allowed !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; filter: grayscale(1); border-color: color-mix(in srgb, var(--gd-border) 88%, transparent) !important; background: color-mix(in srgb, var(--gd-input-bg) 88%, #777 12%) !important; color: var(--gd-text-sec) !important; } .gd-appointment-modality-option.is-integration-unavailable .gd-modality-logo { opacity: .62; filter: grayscale(1); } .gd-appointment-modality-option.is-integration-unavailable.is-current-unavailable { border-style: dashed !important; opacity: .58 !important; } /* 1.36.82 — Perfil: nombre visible común a todos los planes. */ .gd-profile-identity-card { margin-bottom: 16px; } .gd-profile-identity-form { display:flex; align-items:flex-end; gap:14px; } .gd-profile-identity-form .gd-campo { flex:1 1 auto; margin:0; } .gd-profile-identity-form .gd-form-acciones { flex:0 0 auto; margin:0; } .gd-profile-identity-form small { display:block; margin-top:6px; color:var(--gd-text-sec); line-height:1.45; } .gd-mensaje-perfil-identidad { margin-top:9px; } @media(max-width:680px){.gd-profile-identity-form{align-items:stretch;flex-direction:column}.gd-profile-identity-form .gd-boton{width:100%}} /* 1.36.86 · Reportes: datos faltantes semánticos y campos condicionados. */ #gd-tab-reportes .gd-report-empty { color: var(--gd-text-sec); font-size: 9px; font-weight: 650; font-style: italic; white-space: nowrap; } #gd-tab-reportes .gd-report-filter-field--disabled { opacity: .48; } #gd-tab-reportes .gd-report-filter-field--disabled select { cursor: not-allowed; } /* ===================================================================== * GUANI HUB 1.36.91 — iPhone: métricas del Dashboard * Safari/iOS puede encoger el encabezado interno de un