/* ============================================================================ GREENTIC · SKIN "PLAN EMPRENDEDOR" (intranet) --------------------------------------------------------------------------- Lleva el estilo de la página plan-emprendedor a la plataforma interna: verde bosque #0E4D36 de fondo, tarjetas verde profundo, acento menta #B8F2CF, tipografías Inter Tight (títulos) / Inter (texto), botones en píldora, tarjetas muy redondeadas y bordes finos translúcidos. (El archivo conserva el nombre blueprint.css y los tokens --gt-* para no tocar las demás hojas ni plantillas.) Es una CAPA sobre el tema Dastone: sólo re-mapea tokens de Bootstrap y repinta componentes. NO cambia markup ni funcionalidad — las 51 vistas que heredan de base.html cambian solas. Se carga DESPUÉS de app.min.css y de custom.css, así que gana por orden de cascada a igualdad de especificidad. Donde el tema o custom.css usan !important o selectores muy específicos, acá se repite el patrón. ==========================================================================*/ /* --------------------------------------------------------------------------- 0. TIPOGRAFÍAS (Inter / Inter Tight auto-alojadas, igual que Poppins — sin depender de internet) ------------------------------------------------------------------------- */ @font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-700.woff2") format("woff2"); } @font-face { font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/intertight-500.woff2") format("woff2"); } @font-face { font-family:"Inter Tight"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/intertight-600.woff2") format("woff2"); } @font-face { font-family:"Inter Tight"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/intertight-700.woff2") format("woff2"); } /* --------------------------------------------------------------------------- 1. TOKENS DEL PLANO + RE-MAPEO DE BOOTSTRAP ------------------------------------------------------------------------- */ :root, html[data-bs-theme="dark"], html[data-bs-theme="light"] { /* --- paleta blueprint (tomada de blueprint.css de la web) --- "mesa de trabajo": el fondo va bien oscuro para que los paneles (más claros + borde hairline + sombra suave) resalten encima. */ /* --- paleta plan-emprendedor (versión clara) --- fondo "paper" #F6F8F5, tarjetas blancas con borde fino, acción en verde bosque #0E4D36 y menta #B8F2CF para chips. El menú lateral se queda en verde oscuro (ver .startbar más abajo). */ --gt-navy-deep: #FFFFFF; /* topbar / dropdowns / encabezado de modales */ --gt-navy-900: #F6F8F5; /* fondo de página */ --gt-navy-850: #E8F5ED; --gt-panel: #FFFFFF; /* tarjetas */ --gt-panel-2: #E8F5ED; /* hover / thead / estados (menta suave) */ --gt-sidebar: #08301F; /* menú lateral */ --gt-tint-rgb: 14, 77, 54; /* base de los velos translúcidos */ --gt-line-faint: #E8EEEA; --gt-line: #DCE5DF; --gt-line-bold: #B9C6BF; --gt-ink: #122019; --gt-ink-dim: #3E4F46; --gt-ink-faint: #5D6D64; --gt-green: #0E4D36; --gt-green-rgb: 14, 77, 54; /* verde bosque / primario */ --gt-green-deep: #08301F; --gt-mint: #B8F2CF; --gt-mint-soft: #E8F5ED; --gt-lime: #08301F; --gt-cyan: #0E8FA3; --gt-amber: #B7791F; --gt-coral: #D9442C; --gt-on-green: #FFFFFF; /* texto sobre el verde de acción */ --gt-focus: #6FD39A; --gt-shadow-hard: 0 10px 24px rgba(14, 77, 54, 0.14); --gt-shadow-card: 0 1px 2px rgba(14, 77, 54, 0.05), 0 14px 32px -16px rgba(14, 77, 54, 0.18); /* --- escala tipográfica ÚNICA de la plataforma (ver sección 13) --- Tres tamaños de texto y uno para las cifras grandes de las tarjetas: título → títulos de página, tarjeta, sección y popup texto → contenido: tablas, formularios, párrafos nota → leyendas, notas, fechas, badges, encabezados de tabla, botones, menú cifra → el número grande de las tarjetas KPI (no es texto corrido) */ --gt-fs-titulo: 1rem; /* 16px */ --gt-fs-texto: 0.8125rem; /* 13px */ --gt-fs-nota: 0.6875rem; /* 11px */ --gt-fs-cifra: 1.3rem; /* ~21px */ /* --- fuentes --- */ --gt-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gt-font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gt-font-mono: var(--gt-font-body); /* etiquetas: Inter en versalitas, como el "eyebrow" de la web */ /* --- Bootstrap: superficie / texto --- */ --bs-body-bg: var(--gt-navy-900); --bs-body-bg-rgb: 246, 248, 245; --bs-body-color: var(--gt-ink-dim); --bs-body-color-rgb: 62, 79, 70; --bs-emphasis-color: var(--gt-ink); --bs-emphasis-color-rgb: 18, 32, 25; --bs-secondary-color: var(--gt-ink-faint); --bs-secondary-bg: var(--gt-panel); --bs-tertiary-color: var(--gt-ink-faint); --bs-tertiary-bg: rgba(var(--gt-tint-rgb), 0.04); --bs-heading-color: var(--gt-ink); --bs-border-color: var(--gt-line); --bs-border-color-translucent: var(--gt-line); --bs-border-secondary: var(--gt-line); /* --- Bootstrap: tipografía --- */ --bs-font-sans-serif: var(--gt-font-body); --bs-body-font-family: var(--gt-font-body); --bs-body-font-weight: 400; /* --- Bootstrap: radios (redondeados, como las tarjetas de la web) --- */ --bs-border-radius-sm: 8px; --bs-border-radius: 12px; --bs-border-radius-lg: 16px; --bs-border-radius-xl: 20px; --bs-border-radius-xxl: 24px; --bs-border-radius-2xl: 24px; /* --- Bootstrap: primario = verde señal --- */ --bs-primary: var(--gt-green); --bs-primary-rgb: var(--gt-green-rgb); --bs-primary-text-emphasis: #0E4D36; --bs-primary-bg-subtle: rgba(var(--gt-green-rgb), 0.13); --bs-primary-border-subtle: rgba(var(--gt-green-rgb), 0.40); --bs-link-color: var(--gt-green); --bs-link-color-rgb: var(--gt-green-rgb); --bs-link-hover-color: var(--gt-lime); --bs-link-hover-color-rgb: 8, 48, 31; --bs-code-color: var(--gt-cyan); --bs-highlight-bg: rgba(var(--gt-green-rgb), 0.20); /* --- Bootstrap: componentes --- */ --bs-card-bg: var(--gt-panel); --bs-card-border-color: var(--gt-line); --bs-card-color: var(--gt-ink-dim); --bs-card-cap-bg: rgba(var(--gt-tint-rgb), 0.02); --bs-tooltip-bg: var(--gt-sidebar); --bs-tooltip-color: #FFFFFF; /* --- Dastone: chrome (sidebar / topbar / menú) --- */ --bs-startbar-bg: var(--gt-sidebar); --bs-startbar-e-border-color: transparent; --bs-topbar-bg: var(--gt-navy-deep); --bs-topbar-b-border-color: var(--gt-line); --bs-topbar-nav-icon-bg: transparent; --bs-topbar-nav-icon-color: var(--gt-ink-dim); --bs-menu-icon-color: #94BBA7; --bs-menu-link-color: #D4E8DC; --bs-menu-link-hover-color: #FFFFFF; --bs-menu-label-color: #B8F2CF; --bs-label-color: #94BBA7; } /* Zonas verde oscuro dentro del tema claro: menú lateral y tarjeta de acceso. Redefinen los tokens como en la versión oscura, así sus reglas no cambian. */ .startbar, .gt-auth__card, body:not([data-sidebar-size]) { --gt-tint-rgb: 255, 255, 255; --gt-line-faint: rgba(255, 255, 255, 0.08); --gt-line: rgba(255, 255, 255, 0.14); --gt-line-bold: rgba(255, 255, 255, 0.28); --gt-ink: #FFFFFF; --gt-ink-dim: #D4E8DC; --gt-ink-faint: #94BBA7; --gt-panel: #08301F; --gt-green: #B8F2CF; --gt-green-rgb: 184, 242, 207; --gt-on-green: #08301F; --bs-body-color: #D4E8DC; --bs-heading-color: #FFFFFF; --bs-border-color: rgba(255, 255, 255, 0.14); } .gt-auth__card .form-control { background-color: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,.2); } .gt-auth__card .form-control:focus { background-color: rgba(255,255,255,0.1); color: #fff; } /* --------------------------------------------------------------------------- 2. FONDO: paper liso ------------------------------------------------------------------------- */ body { background-color: var(--gt-navy-900); color: var(--gt-ink-dim); } .bp-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--gt-navy-900); } /* Superficies del layout transparentes sobre el fondo */ .page-wrapper, .page-wrapper .page-content, .page-content > .container-fluid, .footer { background: transparent !important; } /* --------------------------------------------------------------------------- 3. TIPOGRAFÍA ------------------------------------------------------------------------- */ body, .form-control, .form-select, .form-check-label, .btn, table, input, textarea, select, .dropdown-menu, .modal, .toast { font-family: var(--gt-font-body); font-weight: 400; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-title, .modal-title, .welcome-text h5, .fs-24, .fs-22, .fs-20, .fs-18 { font-family: var(--gt-font-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--gt-ink); } .form-label, strong, b, .fw-bold, .fw-semibold, .fw-medium, .num { font-family: var(--gt-font-body) !important; font-weight: 600 !important; } /* etiquetas / kickers en Inter (el "eyebrow" de la web) */ .menu-label, .badge, .table thead th, .breadcrumb, .page-title-box .breadcrumb-item, .nav-tabs .nav-link, .btn, .form-text, .dropdown-header, .timeline-time, kbd, code, .text-monospace { font-family: var(--gt-font-mono); } .text-uppercase { letter-spacing: 0.12em; } ::selection { background: var(--gt-green); color: var(--gt-on-green); } :focus-visible { outline: 3px solid var(--gt-focus); outline-offset: 2px; } a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } a.text-muted, a.text-muted:hover, a.text-reset, a.link-secondary { color: var(--gt-ink-faint) !important; } a.text-muted:hover { color: var(--gt-ink) !important; } /* --------------------------------------------------------------------------- 4. TOPBAR ------------------------------------------------------------------------- */ .topbar { background-color: #FFFFFF; border-bottom: 1px solid var(--gt-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .topbar .topbar-custom .nav-link.nav-icon { border-radius: var(--bs-border-radius); border: 1px solid var(--gt-line); background-color: transparent; color: var(--gt-ink-dim); transition: border-color .2s, color .2s, background-color .2s; } .topbar .topbar-custom .nav-link.nav-icon:hover { border-color: var(--gt-green); color: var(--gt-green); background-color: rgba(var(--gt-green-rgb), 0.08); } .topbar .topbar-custom .nav-link.nav-icon i { color: inherit; } .welcome-text h5 { color: var(--gt-ink); letter-spacing: -0.01em; } /* botón claro/oscuro: visible (ver sección 23, modo oscuro) */ .topbar .topbar-custom .nav-link.nav-icon:hover { background-color: var(--gt-mint-soft); } /* en escritorio el menú queda fijo y abierto (ver script en base.html), así que el botón hamburguesa deja de tener función — se oculta. Por debajo de 1200px sigue visible para abrir el cajón lateral. */ @media (min-width: 1200px) { #togglemenu, .topbar .topbar-custom .nav-link.mobile-menu-btn { display: none !important; } } /* --------------------------------------------------------------------------- 5. SIDEBAR (startbar) ------------------------------------------------------------------------- */ .startbar { background-color: var(--gt-sidebar); border: 0; } .startbar .brand { border-bottom: 1px solid var(--gt-line); } .startbar .brand { height: auto; min-height: var(--bs-topbar-height); padding-top: 12px; padding-bottom: 12px; } .startbar .brand .logo-lg { height: auto; width: 160px; max-width: calc(100% - 8px); margin-left: 4px; } .startbar .brand .logo-sm { height: 36px; } body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand { padding-top: 0; padding-bottom: 0; } body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .logo-lg { width: 0; } /* menu-label como "eyebrow" de la web: versalitas menta */ .startbar .startbar-menu .navbar-nav .menu-label { display: flex; align-items: center; gap: 9px; font-family: var(--gt-font-mono); font-size: var(--gt-fs-nota); letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; color: var(--gt-green); margin-top: 14px !important; } .startbar .startbar-menu .navbar-nav .menu-label span { position: relative; } .startbar .startbar-menu .navbar-nav .nav-item .nav-link { font-family: var(--gt-font-body); font-size: var(--gt-fs-nota); font-weight: 500; letter-spacing: 0; color: var(--gt-ink-dim); border: 1px solid transparent; border-radius: 999px; } .startbar .startbar-menu .navbar-nav .nav-item .nav-link .menu-icon { color: var(--gt-ink-faint); } .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover { color: var(--gt-ink); border-color: var(--gt-line); background-color: rgba(var(--gt-tint-rgb), 0.03); } /* activo — vence a .nav-item.active .nav-link.active { color:#6f6af8 } del tema */ .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active, .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active, .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active:hover { color: var(--gt-green); background-color: rgba(var(--gt-green-rgb), 0.12); border-color: rgba(var(--gt-green-rgb), 0.40); font-weight: 600; } .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active .menu-icon, .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active .menu-icon { color: var(--gt-green); } /* scrollbar del menú y global */ .simplebar-scrollbar::before { background-color: var(--gt-line-bold); } * { scrollbar-width: thin; scrollbar-color: var(--gt-line-bold) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--gt-line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--gt-line-bold); background-clip: content-box; } /* --------------------------------------------------------------------------- 6. TÍTULO DE PÁGINA ------------------------------------------------------------------------- */ .page-wrapper .page-content .page-title-box { border-bottom: 1px solid var(--gt-line); margin-bottom: 0.75rem; } .page-wrapper .page-content .page-title-box .page-title { font-family: var(--gt-font-display) !important; color: var(--gt-ink); } /* --------------------------------------------------------------------------- 7. TARJETAS → paneles redondeados ------------------------------------------------------------------------- */ .card { background: var(--gt-panel); border: 1px solid var(--gt-line); /* sombra suave: las tarjetas "flotan" como la maqueta del hero */ box-shadow: var(--gt-shadow-card); border-radius: var(--bs-border-radius-xl); overflow: hidden; } .card .card-header { background: rgba(var(--gt-tint-rgb), 0.02); border-bottom: 1px solid var(--gt-line); } .card .card-header .card-title, .card .card-body .card-title { font-family: var(--gt-font-display) !important; color: var(--gt-ink); } .card-footer { background: rgba(var(--gt-tint-rgb), 0.02); border-top: 1px solid var(--gt-line); } /* la cuadrícula del dashboard (definida en custom.css) hereda lo de arriba */ /* --------------------------------------------------------------------------- 8. BOTONES → píldora, texto en negrita, sin versalitas (como "Empieza a desarrollar tu web") ------------------------------------------------------------------------- */ .btn { --bs-btn-font-family: var(--gt-font-body); /* alineado con la letra del menú (12px / 0.03em): más chico y menos espaciado que antes, así los botones de acción no desbordan la tabla */ --bs-btn-font-size: var(--gt-fs-nota); --bs-btn-font-weight: 700; --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.1rem; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: transform .15s ease, background-color .15s, color .15s, border-color .15s; } .btn:hover { transform: none; box-shadow: none; } .btn:active { transform: scale(.97); box-shadow: none; } .btn.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: var(--gt-fs-nota); --bs-btn-border-radius: 999px; letter-spacing: 0; } .btn.btn-sm:hover, .btn-icon:hover { transform: none; box-shadow: none; } .btn:focus-visible { box-shadow: none; outline: 3px solid var(--gt-focus); outline-offset: 2px; } /* primario = verde señal */ .btn-primary { --bs-btn-color: var(--gt-on-green); --bs-btn-bg: var(--gt-green); --bs-btn-border-color: var(--gt-green); --bs-btn-hover-color: var(--gt-on-green); --bs-btn-hover-bg: var(--gt-green-deep); --bs-btn-hover-border-color: var(--gt-green-deep); --bs-btn-active-color: var(--gt-on-green); --bs-btn-active-bg: #08301F; --bs-btn-active-border-color: #08301F; --bs-btn-disabled-color: var(--gt-on-green); --bs-btn-disabled-bg: #B9C6BF; --bs-btn-disabled-border-color: #B9C6BF; box-shadow: none; font-weight: 700; } .btn-primary:hover { box-shadow: none; } /* secundario = fantasma hairline */ .btn-secondary { --bs-btn-color: var(--gt-ink-dim); --bs-btn-bg: transparent; --bs-btn-border-color: var(--gt-line-bold); --bs-btn-hover-color: var(--gt-ink); --bs-btn-hover-bg: rgba(var(--gt-tint-rgb), 0.06); --bs-btn-hover-border-color: var(--gt-ink); --bs-btn-active-color: var(--gt-ink); --bs-btn-active-bg: rgba(var(--gt-tint-rgb), 0.08); --bs-btn-active-border-color: var(--gt-ink); box-shadow: none; } .btn-success { --bs-btn-color: var(--gt-on-green); --bs-btn-bg: #22b783; --bs-btn-border-color: #22b783; --bs-btn-hover-color: var(--gt-on-green); --bs-btn-hover-bg: #1fa676; --bs-btn-hover-border-color: #1fa676; --bs-btn-active-bg: #1fa676; --bs-btn-active-border-color: #1fa676; box-shadow: none; } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #f0526a; --bs-btn-border-color: #f0526a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e33f58; --bs-btn-hover-border-color: #e33f58; --bs-btn-active-bg: #e33f58; --bs-btn-active-border-color: #e33f58; box-shadow: none; } .btn-warning { --bs-btn-color: #2A1F00; --bs-btn-bg: var(--gt-amber); --bs-btn-border-color: var(--gt-amber); --bs-btn-hover-color: #2A1F00; --bs-btn-hover-bg: #f2ae24; --bs-btn-hover-border-color: #f2ae24; --bs-btn-active-bg: #f2ae24; --bs-btn-active-border-color: #f2ae24; box-shadow: none; } .btn-info { --bs-btn-color: var(--gt-on-green); --bs-btn-bg: var(--gt-cyan); --bs-btn-border-color: var(--gt-cyan); --bs-btn-hover-color: var(--gt-on-green); --bs-btn-hover-bg: #4ec8f2; --bs-btn-hover-border-color: #4ec8f2; --bs-btn-active-bg: #4ec8f2; --bs-btn-active-border-color: #4ec8f2; box-shadow: none; } .btn-light, .btn-outline-light { --bs-btn-color: var(--gt-ink); --bs-btn-bg: rgba(var(--gt-tint-rgb), 0.06); --bs-btn-border-color: var(--gt-line); --bs-btn-hover-color: var(--gt-ink); --bs-btn-hover-bg: rgba(var(--gt-tint-rgb), 0.1); --bs-btn-hover-border-color: var(--gt-line-bold); box-shadow: none; } .btn-dark { --bs-btn-color: var(--gt-ink); --bs-btn-bg: var(--gt-navy-deep); --bs-btn-border-color: var(--gt-line); --bs-btn-hover-color: var(--gt-ink); --bs-btn-hover-bg: #E8F5ED; --bs-btn-hover-border-color: var(--gt-line-bold); box-shadow: none; } .btn-link { --bs-btn-color: var(--gt-green); --bs-btn-hover-color: var(--gt-lime); text-transform: none; letter-spacing: 0; } /* variantes outline → transparente + trazo del color */ .btn-outline-primary { --bs-btn-color: var(--gt-green); --bs-btn-border-color: rgba(var(--gt-green-rgb),0.5); --bs-btn-hover-color: var(--gt-on-green); --bs-btn-hover-bg: var(--gt-green); --bs-btn-hover-border-color: var(--gt-green); --bs-btn-active-bg: var(--gt-green); --bs-btn-active-border-color: var(--gt-green); --bs-btn-active-color: var(--gt-on-green); } .btn-outline-secondary { --bs-btn-color: var(--gt-ink-dim); --bs-btn-border-color: var(--gt-line-bold); --bs-btn-hover-color: var(--gt-ink); --bs-btn-hover-bg: rgba(var(--gt-tint-rgb), 0.05); --bs-btn-hover-border-color: var(--gt-ink); } /* botones "soft" del tema Dastone (plano, no usan --bs-btn-*) */ .btn-soft-primary { background-color: rgba(var(--gt-green-rgb), 0.13); color: var(--gt-green); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active { background-color: var(--gt-green); color: var(--gt-on-green); } .btn-soft-secondary { background-color: rgba(var(--gt-tint-rgb), 0.05); color: var(--gt-ink-dim); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-secondary:hover, .btn-soft-secondary:focus, .btn-soft-secondary:active { background-color: rgba(var(--gt-tint-rgb), 0.1); color: var(--gt-ink); } .btn-soft-success { background-color: rgba(34, 183, 131, 0.16); color: #0E7A55; border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-success:hover, .btn-soft-success:focus, .btn-soft-success:active { background-color: #22b783; color: var(--gt-on-green); } .btn-soft-danger { background-color: rgba(240, 82, 106, 0.14); color: #C4283F; border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-danger:hover, .btn-soft-danger:focus, .btn-soft-danger:active { background-color: #f0526a; color: #fff; } .btn-soft-warning { background-color: rgba(255, 190, 61, 0.22); color: var(--gt-amber); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-warning:hover, .btn-soft-warning:focus, .btn-soft-warning:active { background-color: var(--gt-amber); color: #2A1F00; } .btn-soft-info { background-color: rgba(99, 216, 255, 0.16); color: var(--gt-cyan); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-info:hover, .btn-soft-info:focus, .btn-soft-info:active { background-color: var(--gt-cyan); color: var(--gt-on-green); } .btn-soft-light { background-color: rgba(var(--gt-tint-rgb), 0.06); color: var(--gt-ink); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } .btn-soft-dark { background-color: var(--gt-navy-deep); color: var(--gt-ink-dim); border: 1px solid var(--gt-line); border-radius: 999px; font-weight: 700; } .btn-soft-purple, .btn-soft-blue, .btn-soft-pink { background-color: rgba(var(--gt-tint-rgb), 0.05); color: var(--gt-ink-dim); border: 1px solid transparent; border-radius: 999px; font-weight: 700; } /* --------------------------------------------------------------------------- 9. FORMULARIOS ------------------------------------------------------------------------- */ .form-control, .form-select { background-color: #FFFFFF; border: 1px solid var(--gt-line); color: var(--gt-ink); border-radius: var(--bs-border-radius); } .form-control:hover, .form-select:hover { border-color: var(--gt-line-bold); } .form-control:focus, .form-select:focus { background-color: #FFFFFF; border-color: var(--gt-green); box-shadow: 0 0 0 0.2rem rgba(var(--gt-green-rgb), 0.18); color: var(--gt-ink); } .form-control::placeholder { color: var(--gt-ink-faint); opacity: 1; } .form-control:disabled, .form-select:disabled { background-color: rgba(var(--gt-tint-rgb), 0.03); color: var(--gt-ink-faint); } .form-control[readonly] { background-color: rgba(var(--gt-tint-rgb), 0.03); } /* selector de fecha / hora nativos legibles sobre verde oscuro */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; } .input-group-text { background-color: rgba(var(--gt-tint-rgb), 0.04); border: 1px solid var(--gt-line); color: var(--gt-ink-dim); font-family: var(--gt-font-body); } .form-label { color: var(--gt-ink-dim); } .form-text { color: var(--gt-ink-faint); } .form-check-input { background-color: #FFFFFF; border: 1.5px solid var(--gt-line-bold); } .form-check-input:checked { background-color: var(--gt-green); border-color: var(--gt-green); } .form-check-input:focus { border-color: var(--gt-green); box-shadow: 0 0 0 0.2rem rgba(var(--gt-green-rgb), 0.22); } .form-switch .form-check-input:checked { background-color: var(--gt-green); border-color: var(--gt-green); } /* --------------------------------------------------------------------------- 10. TABLAS ------------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--gt-ink-dim); --bs-table-border-color: var(--gt-line-faint); --bs-table-striped-bg: rgba(var(--gt-tint-rgb), 0.022); --bs-table-striped-color: var(--gt-ink-dim); --bs-table-hover-bg: rgba(var(--gt-green-rgb), 0.06); --bs-table-hover-color: var(--gt-ink); --bs-table-active-bg: rgba(var(--gt-green-rgb), 0.10); border-color: var(--gt-line-faint); } .table > thead th, .table > thead td { font-family: var(--gt-font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--gt-fs-nota); font-weight: 600; color: var(--gt-green); border-bottom: 1px solid var(--gt-line) !important; } .table > :not(caption) > * > * { border-bottom-style: solid; border-bottom-color: var(--gt-line-faint); } .table-responsive { scrollbar-width: thin; } /* --------------------------------------------------------------------------- 11. BADGES / CHIPS ------------------------------------------------------------------------- */ .badge { font-family: var(--gt-font-mono); font-weight: 700; letter-spacing: 0.02em; text-transform: none; border-radius: 999px; } /* Bootstrap fija white-space:nowrap en .badge — dentro de una celda de tabla eso hace que las etiquetas largas (ej. "CONSULTORÍA MARKETING DIGITAL") se salgan de su columna y pisen la de al lado. En tablas: que envuelvan. */ .table td .badge, .table th .badge { white-space: normal; text-align: left; line-height: 1.3; } /* --------------------------------------------------------------------------- 12. DROPDOWNS ------------------------------------------------------------------------- */ .dropdown-menu { --bs-dropdown-bg: var(--gt-navy-deep); --bs-dropdown-border-color: var(--gt-line); --bs-dropdown-border-radius: var(--bs-border-radius); --bs-dropdown-link-color: var(--gt-ink-dim); --bs-dropdown-link-hover-color: var(--gt-ink); --bs-dropdown-link-hover-bg: rgba(var(--gt-green-rgb), 0.10); --bs-dropdown-link-active-color: var(--gt-on-green); --bs-dropdown-link-active-bg: var(--gt-green); --bs-dropdown-header-color: var(--gt-ink-faint); --bs-dropdown-divider-bg: var(--gt-line-faint); box-shadow: 0 20px 40px -16px rgba(14, 77, 54, 0.3); } .dropdown-header { font-family: var(--gt-font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--gt-fs-nota); font-weight: 600; } .dropdown-item-text.text-muted { color: var(--gt-ink-faint) !important; } /* --------------------------------------------------------------------------- 13. MODALES / OFFCANVAS ------------------------------------------------------------------------- */ .modal-content { background-color: #FFFFFF; border: 1px solid var(--gt-line); border-radius: var(--bs-border-radius-xxl); overflow: hidden; box-shadow: 0 30px 60px rgba(14, 77, 54, 0.25); } .modal-header { background-color: var(--gt-navy-deep); border-bottom: 1px solid var(--gt-line); } .modal-header .modal-title { color: var(--gt-ink); font-family: var(--gt-font-display); } .modal-footer { border-top: 1px solid var(--gt-line); } .offcanvas { background-color: #FFFFFF; color: var(--gt-ink-dim); border-color: var(--gt-line); } .offcanvas-header { border-bottom: 1px solid var(--gt-line); } /* --------------------------------------------------------------------------- 14. TABS / PAGINACIÓN / ALERTAS / PROGRESO / TOASTS ------------------------------------------------------------------------- */ .nav-tabs { border-bottom: 1px solid var(--gt-line); --bs-nav-tabs-link-active-color: var(--gt-green); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--gt-green); --bs-nav-tabs-border-color: transparent; } .nav-tabs .nav-link { font-family: var(--gt-font-body); font-weight: 600; letter-spacing: 0; font-size: var(--gt-fs-nota); color: var(--gt-ink-faint); border: 0; border-bottom: 2px solid transparent; } .nav-tabs .nav-link:hover { color: var(--gt-ink); border-bottom-color: var(--gt-line-bold); } .nav-tabs .nav-link.active { color: var(--gt-green); border-bottom-color: var(--gt-green); background: transparent; } .nav-pills { --bs-nav-pills-link-active-bg: var(--gt-green); --bs-nav-pills-link-active-color: var(--gt-on-green); } .page-link { border-radius: 999px; margin: 0 2px; background-color: transparent; border: 1px solid var(--gt-line); color: var(--gt-ink-dim); } .page-link:hover { background-color: rgba(var(--gt-tint-rgb), 0.05); color: var(--gt-ink); border-color: var(--gt-line-bold); } .page-item.active .page-link { background-color: var(--gt-green); border-color: var(--gt-green); color: var(--gt-on-green); } .page-item.disabled .page-link { background-color: transparent; color: var(--gt-ink-faint); border-color: var(--gt-line-faint); } .alert { border-radius: var(--bs-border-radius-lg); border: 1px solid var(--gt-line); } .progress, .progress-stacked { background-color: rgba(var(--gt-tint-rgb), 0.06); border-radius: 99px; } .toast { background-color: #FFFFFF; border: 1px solid var(--gt-line); border-radius: var(--bs-border-radius-lg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* --------------------------------------------------------------------------- 15. VARIOS ------------------------------------------------------------------------- */ hr { border-top: 1px solid var(--gt-line); opacity: 1; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--gt-line) !important; } .text-muted { color: var(--gt-ink-faint) !important; } .bg-light { background-color: rgba(var(--gt-tint-rgb), 0.04) !important; } .bg-dark { background-color: var(--gt-sidebar) !important; color: #fff; } .bg-body, .bg-body-tertiary, .bg-body-secondary { background-color: transparent !important; } .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--gt-line); --bs-list-group-color: var(--gt-ink-dim); --bs-list-group-action-hover-bg: rgba(var(--gt-tint-rgb), 0.03); --bs-list-group-action-hover-color: var(--gt-ink); --bs-list-group-active-bg: var(--gt-green); --bs-list-group-active-border-color: var(--gt-green); --bs-list-group-active-color: var(--gt-on-green); } .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--gt-line); --bs-accordion-color: var(--gt-ink-dim); --bs-accordion-btn-color: var(--gt-ink); --bs-accordion-active-color: var(--gt-green); --bs-accordion-active-bg: rgba(var(--gt-green-rgb), 0.08); } /* Tom Select (buscador de cliente) — el foco pasa de morado a verde señal. El resto ya lo resuelve custom.css con variables de Bootstrap. */ .ts-wrapper.focus .ts-control { border-color: var(--gt-green) !important; box-shadow: 0 0 0 0.15rem rgba(var(--gt-green-rgb), 0.25) !important; } .ts-dropdown .option.active { background-color: rgba(var(--gt-green-rgb), 0.18) !important; } /* popup selector de días (custom.css) — fondo al verde profundo */ .dias-semana-popup { background-color: #FFFFFF; border-color: var(--gt-line); box-shadow: 0 12px 30px rgba(14,77,54,.18); } .dia-semana-toggle { color: var(--gt-ink-dim); border-color: var(--gt-line-bold); } /* --------------------------------------------------------------------------- 16. LOGIN / SELECCIÓN DE PERFIL / PIN (páginas sueltas, sin sidebar) ------------------------------------------------------------------------- */ .gt-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .gt-auth__card { position: relative; width: 100%; max-width: 420px; background: var(--gt-panel); border: 1px solid var(--gt-line); border-radius: 30px; padding: clamp(26px, 5vw, 40px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); } .gt-auth__tag { font-family: var(--gt-font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-green); } .gt-auth__brand { font-family: var(--gt-font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; color: var(--gt-ink); margin: 14px 0 4px; } .gt-auth__brand-img { display: block; height: 56px; width: auto; max-width: 260px; margin: 16px 0 8px; } .gt-auth__sub { color: var(--gt-ink-faint); font-size: 0.92rem; } @media (prefers-reduced-motion: reduce) { .btn, .topbar .nav-link.nav-icon { transition: none; } .btn:active { transform: none; } } /* --------------------------------------------------------------------------- 17. CURSOR DE MARCA Reemplaza la flecha por defecto por el "avión" verde de Greentic, en un tamaño cercano al de un cursor normal (~20 px). PNG para Chrome / Safari / Edge · SVG de respaldo para Firefox · hotspot 2 1 (la punta). Los elementos interactivos conservan la manito (cursor: pointer de Bootstrap). ------------------------------------------------------------------------- */ html, body { cursor: url("../assets/images/cursor-greentic-20.png") 2 1, url("../assets/images/cursor-greentic.svg") 2 1, auto; } /* --------------------------------------------------------------------------- 13. ESCALA TIPOGRÁFICA ÚNICA Toda la plataforma usa los mismos 3 tamaños de texto (+ uno para cifras KPI) definidos arriba en :root (--gt-fs-*). Antes cada pantalla tenía los suyos (h4/h5/h6, fs-11/12/13, 11.5px, 0.88rem…) y se veía desparejo. Las plantillas de PDF y la propuesta pública (ver_propuesta) no pasan por acá; las pantallas de ingreso (body sin data-sidebar-size) conservan su diseño propio. ------------------------------------------------------------------------- */ html:has(body[data-sidebar-size]) { --bs-body-font-size: var(--gt-fs-texto); } body[data-sidebar-size] { font-size: var(--gt-fs-texto); } /* Títulos: uno solo. Los h3 con .num son cifras, no títulos (van abajo). */ :where(body[data-sidebar-size]) h1, :where(body[data-sidebar-size]) h2, :where(body[data-sidebar-size]) h3:not(.num), :where(body[data-sidebar-size]) h4, :where(body[data-sidebar-size]) h5, :where(body[data-sidebar-size]) h6, :where(body[data-sidebar-size]) .h1, :where(body[data-sidebar-size]) .h2, :where(body[data-sidebar-size]) .h3, :where(body[data-sidebar-size]) .h4, :where(body[data-sidebar-size]) .h5, :where(body[data-sidebar-size]) .h6, :where(body[data-sidebar-size]) .card-title, :where(body[data-sidebar-size]) .page-title, :where(body[data-sidebar-size]) .modal-title, :where(body[data-sidebar-size]) .page-wrapper .page-content .page-title-box .page-title, :where(body[data-sidebar-size]) .card .card-body .card-title, :where(body[data-sidebar-size]) .fs-14, :where(body[data-sidebar-size]) .fs-18, :where(body[data-sidebar-size]) .fs-20, :where(body[data-sidebar-size]) .fs-22, :where(body[data-sidebar-size]) .fs-24 { font-size: var(--gt-fs-titulo) !important; line-height: 1.3; } /* Contenido */ :where(body[data-sidebar-size]) p, :where(body[data-sidebar-size]) li, :where(body[data-sidebar-size]) dd, :where(body[data-sidebar-size]) dt, :where(body[data-sidebar-size]) label, :where(body[data-sidebar-size]) .form-label, :where(body[data-sidebar-size]) .form-check-label, :where(body[data-sidebar-size]) .form-control, :where(body[data-sidebar-size]) .form-select, :where(body[data-sidebar-size]) .input-group-text, :where(body[data-sidebar-size]) .ts-control, :where(body[data-sidebar-size]) .ts-dropdown, :where(body[data-sidebar-size]) .table, :where(body[data-sidebar-size] .table > tbody) td, :where(body[data-sidebar-size] .table > tbody) th, :where(body[data-sidebar-size] .table > tfoot) td, :where(body[data-sidebar-size]) .dropdown-item, :where(body[data-sidebar-size]) .list-group-item, :where(body[data-sidebar-size]) .alert, :where(body[data-sidebar-size]) .modal-body, :where(body[data-sidebar-size]) .card-body, :where(body[data-sidebar-size]) .fs-13 { font-size: var(--gt-fs-texto) !important; } :where(body[data-sidebar-size]) .form-control-sm, :where(body[data-sidebar-size]) .form-select-sm { font-size: var(--gt-fs-texto) !important; } /* Leyendas / notas / etiquetas */ :where(body[data-sidebar-size]) small, :where(body[data-sidebar-size]) .small, :where(body[data-sidebar-size]) .form-text, :where(body[data-sidebar-size]) .invalid-feedback, :where(body[data-sidebar-size]) .valid-feedback, :where(body[data-sidebar-size]) .badge, :where(body[data-sidebar-size]) .table > thead th, :where(body[data-sidebar-size]) .table > thead td, :where(body[data-sidebar-size]) .breadcrumb, :where(body[data-sidebar-size]) .breadcrumb-item, :where(body[data-sidebar-size]) .nav-tabs .nav-link, :where(body[data-sidebar-size]) .dropdown-header, :where(body[data-sidebar-size]) .menu-label, :where(body[data-sidebar-size]) .tooltip, :where(body[data-sidebar-size]) .popover, :where(body[data-sidebar-size]) .fs-11, :where(body[data-sidebar-size]) .page-link, :where(body[data-sidebar-size]) .fs-12, :where(body[data-sidebar-size]) .card-body small, :where(body[data-sidebar-size]) .table small { font-size: var(--gt-fs-nota) !important; } /* Cifras de tarjetas KPI (h3.num en todos los dashboards y paneles) */ :where(body[data-sidebar-size]) h1.num, :where(body[data-sidebar-size]) h2.num, :where(body[data-sidebar-size]) h3.num, :where(body[data-sidebar-size]) h4.num, :where(body[data-sidebar-size]) .fs-3.num, :where(body[data-sidebar-size]) .resultado-num, :where(body[data-sidebar-size]) .kpi-cifra { font-size: var(--gt-fs-cifra) !important; line-height: 1.15; } /* --------------------------------------------------------------------------- 18. DETALLES PLAN EMPRENDEDOR Texto oscuro sobre fondos menta (primario) y chips "recomendada" en menta. ------------------------------------------------------------------------- */ .bg-primary, .badge.bg-primary, .badge.text-bg-primary { color: #FFFFFF !important; } #forma-pago-opciones .form-check:has(input:checked) { background-color: var(--gt-mint-soft); } .dia-semana-toggle.active { color: #FFFFFF; } .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e"); } .progress-bar { border-radius: 99px; } /* Pantallas sueltas (login, perfiles, PIN, QR público): verde bosque como el hero de la web */ body:not([data-sidebar-size]) { background-color: #0E4D36; } body:not([data-sidebar-size]) .bp-bg { background-color: #0E4D36; } body:not([data-sidebar-size]) .form-control { background-color: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,.2); } body:not([data-sidebar-size]) .form-control:focus { background-color: rgba(255,255,255,0.1); color: #fff; } /* casillas y radios sin marcar: borde bien visible sobre blanco */ .form-check-input:not(:checked):not(.chk-pago):not(.chk-factura):not(.chk-completo):not(.chk-5050) { border-color: #7F9488; background-color: #FFFFFF; } body[data-sidebar-size] .form-check-label { color: var(--gt-ink); } /* --------------------------------------------------------------------------- 19. TIPOGRAFÍA UNIFICADA (títulos · contenido · notas) Una sola regla por rol, para toda la plataforma: TÍTULOS Inter Tight 700 · 16px · interlineado 1.3 · tracking -0.02em CONTENIDO Inter 400 · 13px · interlineado 1.5 NOTAS Inter 500 · 11px · interlineado 1.4 (leyendas, fechas, badges, encabezados de tabla) CIFRAS Inter Tight 700 · tabulares (números grandes de las tarjetas KPI) Los tamaños salen de --gt-fs-* (sección 13); acá se fijan familia, peso e interlineado. ------------------------------------------------------------------------- */ body[data-sidebar-size] { font-family: var(--gt-font-body); font-weight: 400; line-height: 1.5; } :where(body[data-sidebar-size]) :is(h1, h2, h3:not(.num), h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .page-title, .modal-title, .fs-14, .fs-18, .fs-20, .fs-22, .fs-24) { font-family: var(--gt-font-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.3; } :where(body[data-sidebar-size]) :is(p, li, dd, dt, td, .form-control, .form-select, .dropdown-item, .list-group-item, .alert, .modal-body, .fs-13) { font-family: var(--gt-font-body); line-height: 1.5; } :where(body[data-sidebar-size]) :is(td, .form-control, .form-select, .dropdown-item, .fs-13):not(strong):not(b) { font-weight: 400; } :where(body[data-sidebar-size]) :is(small, .small, .form-text, .badge, .table > thead th, .breadcrumb, .dropdown-header, .fs-11, .fs-12, .page-link, .nav-tabs .nav-link) { font-family: var(--gt-font-body); line-height: 1.4; } :where(body[data-sidebar-size]) :is(small, .small, .form-text, .fs-11, .fs-12) { font-weight: 500; } :where(body[data-sidebar-size]) :is(h1.num, h2.num, h3.num, h4.num, .fs-3.num, .resultado-num, .kpi-cifra, .kpi-v, .pers-sec-cab .total) { font-family: var(--gt-font-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* gráficos, selects con buscador y WhatsApp heredan la misma familia */ .apexcharts-canvas text, .apexcharts-tooltip, .apexcharts-legend-text { font-family: var(--gt-font-body) !important; } .ts-wrapper, .ts-control, .ts-dropdown, .ts-control input { font-family: var(--gt-font-body); } .wa-pagina, .wa-pagina :is(input, textarea, select, button) { font-family: var(--gt-font-body); } /* --------------------------------------------------------------------------- 20. OUTREACH · estadísticas (Prospectos y Dashboard) Tarjetas KPI con icono + etiqueta, cifra grande y notas en línea; tabla de bases con columnas parejas y números alineados a la derecha. ------------------------------------------------------------------------- */ .outreach-kpi { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--gt-line); border-radius: var(--bs-border-radius-lg); background: var(--gt-mint-soft); } .outreach-kpi__top { display: flex; align-items: center; gap: .6rem; } .outreach-kpi__ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--gt-mint); color: var(--gt-green-deep); font-size: 1rem; } .outreach-kpi__label { font-size: var(--gt-fs-nota); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gt-ink-faint); line-height: 1.2; } .outreach-kpi__val { font-size: 1.75rem !important; line-height: 1.1; color: var(--gt-ink); } .outreach-kpi__val.ok { color: #0E7A55; } .outreach-kpi__val.warn { color: #B7791F; } .outreach-kpi__sub { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: var(--gt-fs-nota); color: var(--gt-ink-faint); } .outreach-kpi__sub b { color: var(--gt-ink); font-weight: 700; } .outreach-bases { --bs-table-bg: transparent; } .outreach-bases > :not(caption) > * > * { padding: .8rem .75rem; vertical-align: middle; } .outreach-bases thead th { white-space: nowrap; border-bottom: 1px solid var(--gt-line) !important; } .outreach-bases th:first-child, .outreach-bases td:first-child { padding-left: .25rem; width: 22%; } .outreach-bases th.col-cob, .outreach-bases td:nth-child(5) { width: 18%; min-width: 170px; } .outreach-bases tbody tr:hover { background: rgba(var(--gt-green-rgb), 0.05); } .outreach-bases .text-success { color: #0E7A55 !important; } .outreach-bases .text-warning { color: #B7791F !important; } .outreach-bases .text-info { color: #0E8FA3 !important; } .outreach-bases .text-danger { color: #C4283F !important; } .outreach-bases .progress { background: var(--gt-mint-soft); } .outreach-bases .progress-bar { background-color: var(--gt-green) !important; } /* Tooltips de los gráficos (ApexCharts): fondo blanco y texto oscuro en las pantallas con menú */ body[data-sidebar-size] .apexcharts-tooltip, body[data-sidebar-size] .apexcharts-tooltip.apexcharts-theme-light { background: #FFFFFF; color: var(--gt-ink); border: 1px solid var(--gt-line); border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(14, 77, 54, 0.3); } body[data-sidebar-size] .apexcharts-tooltip-title { background: var(--gt-mint-soft); border-bottom: 1px solid var(--gt-line); color: var(--gt-ink); font-weight: 700; } body[data-sidebar-size] .apexcharts-tooltip-text, body[data-sidebar-size] .apexcharts-tooltip-y-group { color: var(--gt-ink); } body[data-sidebar-size] .apexcharts-xaxistooltip { background: #FFFFFF; color: var(--gt-ink); border-color: var(--gt-line); } body[data-sidebar-size] .apexcharts-xaxistooltip-bottom::before, body[data-sidebar-size] .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--gt-line); } body[data-sidebar-size] .apexcharts-legend-text { color: var(--gt-ink-dim) !important; } /* --------------------------------------------------------------------------- 21. PROSPECTOS · botones por asesor, estado / asesor / seguimiento en línea ------------------------------------------------------------------------- */ .asesor-pills { display: flex; flex-wrap: wrap; gap: .5rem; } .asesor-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem; border-radius: 999px; border: 1.5px solid var(--gt-line-bold); background: #FFFFFF; color: var(--gt-ink); font-size: var(--gt-fs-texto); font-weight: 700; text-decoration: none; transition: border-color .12s, background .12s, color .12s; } .asesor-pill span { min-width: 22px; padding: 0 .4rem; border-radius: 999px; text-align: center; line-height: 20px; background: var(--gt-mint-soft); color: var(--gt-green-deep); font-size: var(--gt-fs-nota); font-weight: 700; } .asesor-pill:hover { border-color: var(--gt-green); background: var(--gt-mint-soft); color: var(--gt-ink); } .asesor-pill.active { background: var(--gt-green); border-color: var(--gt-green); color: #FFFFFF; } .asesor-pill.active span { background: var(--gt-mint); color: var(--gt-green-deep); } .estado-sel, .asesor-sel, .seg-fecha { border-radius: 999px !important; font-weight: 600; transition: box-shadow .2s, border-color .2s; } .estado-sel { border-width: 1.5px; } .estado-sel.estado-nuevo { background-color: #F1F4F2; border-color: #B9C6BF; color: var(--gt-ink-dim); } .estado-sel.estado-contactado { background-color: #E3F6EA; border-color: #7FD3A3; color: #0E7A55; } .estado-sel.estado-en_seguimiento { background-color: #FFF4D8; border-color: #EBC567; color: #8A5A00; } .estado-sel.estado-cerrado { background-color: var(--gt-green); border-color: var(--gt-green); color: #FFFFFF; } .seg-fecha.is-pendiente { border-color: #C4283F; color: #C4283F; background-color: #FDECEF; } .estado-sel.guardado, .asesor-sel.guardado, .seg-fecha.guardado { box-shadow: 0 0 0 3px rgba(43, 182, 115, 0.35); } /* --------------------------------------------------------------------------- 22. RUBROS (cotización) — casillas en tarjeta. Van en la hoja global porque el formulario también se abre en popup (Editar datos), que no carga el