/* ============================================================================ glass-theme.css · v2.10.163 · Tema "glass" OPT-IN para Suite Global Todo bajo body.skin-glass. data-theme vive en → el modo claro se scopea como [data-theme="light"] body.skin-glass. Auras = background del body con background-attachment:fixed (sin z-index hacks). Consume la paleta central (--color-*) vía color-mix. Iconos = SG.icon(). ============================================================================ */ /* ---- tokens (oscuro default) + AURAS como fondo fijo ---- */ body.skin-glass{ --g-bg:#06070d; --glass-grad:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); --glass-bd:rgba(255,255,255,.10); --g-sheen:rgba(255,255,255,.45); --g-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 20px 50px rgba(0,0,0,.4); --g-rowgrad:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); /* RAÍZ: toda la app pinta tarjetas con estas variables → glaséalas UNA vez y todo es glass */ --bg-card:rgba(22,24,34,.60); --bg-elevated:rgba(30,33,44,.70); --border:rgba(255,255,255,.12); background: radial-gradient(circle 820px at 88% 6%,rgba(236,0,140,.30),rgba(236,0,140,.07) 36%,transparent 60%), radial-gradient(circle 780px at 4% 84%,rgba(39,170,225,.34),rgba(39,170,225,.08) 40%,transparent 64%), radial-gradient(circle 620px at 55% 42%,rgba(130,70,200,.20),transparent 58%), radial-gradient(circle 420px at 20% 14%,rgba(255,230,0,.16),rgba(255,230,0,.04) 44%,transparent 62%), radial-gradient(circle 520px at 92% 82%,rgba(236,0,140,.12),transparent 60%), var(--g-bg) !important; background-attachment:fixed !important; } /* ---- tokens + auras · MODO CLARO (data-theme en ) ---- */ [data-theme="light"] body.skin-glass{ --g-bg:#e9ebf1; --glass-grad:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.52)); --glass-bd:rgba(255,255,255,.9); --g-sheen:rgba(255,255,255,.95); --g-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 40px rgba(40,40,90,.13); --g-rowgrad:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.42)); --bg-card:rgba(255,255,255,.66); --bg-elevated:rgba(255,255,255,.78); --border:rgba(120,130,160,.30); background: radial-gradient(circle 820px at 88% 6%,rgba(236,0,140,.34),rgba(236,0,140,.10) 38%,transparent 62%), radial-gradient(circle 780px at 4% 84%,rgba(39,170,225,.34),rgba(39,170,225,.10) 42%,transparent 66%), radial-gradient(circle 620px at 55% 42%,rgba(130,70,200,.20),transparent 58%), radial-gradient(circle 440px at 20% 14%,rgba(255,205,0,.30),rgba(255,205,0,.07) 44%,transparent 62%), radial-gradient(circle 520px at 92% 82%,rgba(236,0,140,.16),transparent 60%), var(--g-bg) !important; background-attachment:fixed !important; } /* ---- superficie genérica .card → vidrio ---- */ body.skin-glass .card{ background:var(--glass-grad) !important; backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px); border:1px solid var(--glass-bd) !important;border-radius:16px !important;box-shadow:var(--g-shadow) !important; } /* ---- Panel Director ---- */ body.skin-glass .pd-card{ background:var(--glass-grad) !important; backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px); border:1px solid color-mix(in srgb,var(--color-grabacion) 38%,var(--glass-bd)) !important; border-radius:18px !important;box-shadow:var(--g-shadow) !important; } body.skin-glass .pd-kpi{ background:linear-gradient(135deg,color-mix(in srgb,var(--g-sheen) 6%,transparent),color-mix(in srgb,var(--g-sheen) 2%,transparent)) !important; border:1px solid var(--glass-bd) !important;border-radius:14px !important;backdrop-filter:blur(12px); } body.skin-glass .pd-kpi:hover, body.skin-glass .pd-kpi.is-active{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-grabacion) 14%,transparent),transparent) !important; border-color:color-mix(in srgb,var(--color-grabacion) 45%,transparent) !important; } /* ---- Trabajando ahora · AHORA (magenta) · PRÓXIMO (junta/azul) ---- */ body.skin-glass .trabajando-card, body.skin-glass .foco-card-compact, body.skin-glass .esperas-card-compact{ backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px); border-radius:16px !important;box-shadow:var(--g-shadow); } body.skin-glass .trabajando-card{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-tarea) 14%,transparent),var(--glass-grad)) !important; border:1px solid color-mix(in srgb,var(--color-tarea) 30%,transparent) !important; } body.skin-glass .foco-card-compact{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-grabacion) 16%,transparent),var(--glass-grad)) !important; border:1px solid color-mix(in srgb,var(--color-grabacion) 34%,transparent) !important; } body.skin-glass .esperas-card-compact{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-junta) 20%,transparent),var(--glass-grad)) !important; border:1px solid color-mix(in srgb,var(--color-junta) 42%,transparent) !important; } /* ---- filas "Por hacer" → glass-row con tinte degradado por tipo ---- */ body.skin-glass .ph-row{ --ac:var(--color-tarea); background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 22%,transparent) 0%,color-mix(in srgb,var(--ac) 7%,transparent) 26%,transparent 60%),var(--g-rowgrad) !important; backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px); border:1px solid var(--glass-bd) !important; border-left:2px solid color-mix(in srgb,var(--ac) 60%,transparent) !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset; } body.skin-glass .ph-row.pendiente{ --ac:var(--color-pendiente); } body.skin-glass .ph-row.estado-trabajando{ --ac:var(--color-trabajando,#FFF200); } body.skin-glass .ph-row:hover{ transform:translateY(-1px); } /* mayúsculas por tipo · solo pendiente en minúscula */ body.skin-glass .ph-row:not(.pendiente) .titulo{ text-transform:uppercase; letter-spacing:.01em; } body.skin-glass .ph-acciones button{ background:rgba(255,255,255,.04); backdrop-filter:blur(10px); } /* ---- "Más cosas" / colapsables ---- */ body.skin-glass #mas-contenido{ background:var(--glass-grad) !important; backdrop-filter:saturate(160%) blur(22px);-webkit-backdrop-filter:saturate(160%) blur(22px); border:1px solid var(--glass-bd) !important; } body.skin-glass details > summary{ background:var(--glass-grad) !important;border:1px solid var(--glass-bd) !important;border-radius:12px; } /* ---- MENÚ / nav superior → glass ---- */ body.skin-glass .app-header{ background:color-mix(in srgb,var(--g-bg) 55%,transparent) !important; backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px); border-bottom:1px solid var(--glass-bd) !important; position:relative; z-index:300; /* el header (y sus dropdowns) SIEMPRE sobre el contenido glass */ } /* ---- FIX stacking + dropdowns del header → glass frosted (legibles, por encima) ---- */ body.skin-glass #sg-mobile-drawer{ z-index:600 !important; } body.skin-glass #sg-modal-presencia{ z-index:1000 !important; } body.skin-glass #sg-new-menu, body.skin-glass #sg-break-menu, body.skin-glass #sg-notif-panel, body.skin-glass #sg-search-results, body.skin-glass #sg-user-menu, body.skin-glass #sg-status-menu, body.skin-glass #sg-mobile-drawer, body.skin-glass .sg-nav-submenu{ background:color-mix(in srgb,var(--g-bg) 82%,transparent) !important; backdrop-filter:saturate(180%) blur(26px) !important;-webkit-backdrop-filter:saturate(180%) blur(26px) !important; border:1px solid var(--glass-bd) !important; } body.skin-glass #sg-status-menu button:hover, body.skin-glass #sg-new-menu a:hover, body.skin-glass #sg-new-menu button:hover, body.skin-glass #sg-break-menu button:hover, body.skin-glass #sg-user-menu a:hover, body.skin-glass #sg-user-menu button:hover, body.skin-glass .sg-nav-submenu a:hover{ background:var(--g-rowgrad) !important; } /* ---- barras de color → tinte degradado (agenda + proyectos) ---- */ body.skin-glass .agenda-card, body.skin-glass .mp-card, body.skin-glass .sem-row{ --ac:var(--color-grabacion); background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 20%,transparent) 0%,color-mix(in srgb,var(--ac) 6%,transparent) 26%,transparent 60%),var(--g-rowgrad) !important; backdrop-filter:saturate(170%) blur(22px);-webkit-backdrop-filter:saturate(170%) blur(22px); border:1px solid var(--glass-bd) !important; border-left:2px solid color-mix(in srgb,var(--ac) 60%,transparent) !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset; } body.skin-glass .agenda-card.junta{ --ac:var(--color-junta); } body.skin-glass .agenda-card.grabacion{ --ac:var(--color-grabacion); } body.skin-glass .agenda-card.evento{ --ac:var(--color-evento); } body.skin-glass .mp-card{ --ac:var(--color-proyecto); } /* tarjetas de proyecto · su color real llega vía --ac inline */ /* nombre de proyecto en MAYÚSCULAS (regla: proyecto = mayúsculas) */ body.skin-glass .mp-nombre{ text-transform:uppercase; letter-spacing:.01em; } /* ---- BOTONES → glass (como el dummy) ---- */ /* base: cualquier .btn pasa a vidrio frosted */ body.skin-glass .btn{ background:var(--g-rowgrad) !important; border:1px solid var(--glass-bd) !important; backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px); box-shadow:0 1px 0 rgba(255,255,255,.1) inset; color:#eef1f7 !important; /* texto legible sobre vidrio (arregla botones con color:#000 inline) */ } [data-theme="light"] body.skin-glass .btn{ color:#181a22 !important; } /* v2.12 · botones de acción de fila (.btn .btn-trabajar etc.) conservan su color por acción. El .btn{color:#eef1f7 !important} de arriba los aplanaba a blanco; aquí se gana con más especificidad. */ body.skin-glass .btn.btn-trabajar { color:var(--cyan) !important; border-color:var(--cyan) !important; } body.skin-glass .btn.btn-terminar { color:var(--color-terminado) !important; border-color:var(--color-terminado) !important; } body.skin-glass .btn.btn-urg { color:var(--magenta) !important; border-color:var(--magenta) !important; } body.skin-glass .btn.btn-urg.is-on { color:#fff !important; background:var(--magenta) !important; } body.skin-glass .btn.btn-aplazar { color:var(--gray-300,#bbb) !important; } body.skin-glass .btn.btn-bloquear { color:var(--color-urgente,#ff3b30) !important; border-color:var(--color-urgente,#ff3b30) !important; } /* primario cian (+ Nuevo / + Tarea / Terminar / Pantalla completa) → glass cian fuerte */ body.skin-glass .btn-cyan{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-tarea) 60%,transparent),color-mix(in srgb,var(--color-tarea) 22%,transparent)) !important; border:1px solid color-mix(in srgb,var(--color-tarea) 55%,transparent) !important; color:#fff !important; box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 18px color-mix(in srgb,var(--color-tarea) 28%,transparent) !important; } [data-theme="light"] body.skin-glass .btn-cyan{ /* sólido en claro para que no se lave */ background:linear-gradient(135deg,var(--color-tarea),color-mix(in srgb,var(--color-tarea) 80%,#000)) !important; border-color:color-mix(in srgb,var(--color-tarea) 55%,#000) !important; color:#fff !important; } body.skin-glass .btn-primary{ background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06)) !important; border:1px solid var(--glass-bd) !important;color:#fff !important; } [data-theme="light"] body.skin-glass .btn-primary{ background:linear-gradient(135deg,rgba(20,20,30,.92),rgba(20,20,30,.78)) !important; color:#fff !important; } /* play del "trabajando ahora" → glass cian */ body.skin-glass .trabajando-ico{ background:linear-gradient(135deg,color-mix(in srgb,var(--color-tarea) 62%,transparent),color-mix(in srgb,var(--color-tarea) 26%,transparent)) !important; border:1px solid color-mix(in srgb,var(--color-tarea) 45%,transparent); backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset; } /* ---- menú de presencia (FAB) — usa --ac inline por pill ---- */ body.skin-glass .fab-glass{ background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 58%,transparent),color-mix(in srgb,var(--ac) 18%,transparent)) !important; border:1px solid color-mix(in srgb,var(--ac) 50%,transparent) !important; backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 22px color-mix(in srgb,var(--ac) 26%,transparent) !important; color:#fff !important; } [data-theme="light"] body.skin-glass .fab-glass{ /* sólido translúcido en claro */ background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 78%,#000)) !important; border-color:color-mix(in srgb,var(--ac) 55%,#000) !important; } /* ============================================================================ COMPONENTES COMPARTIDOS (barrido app-wide jun 2026) — auditados en vivo: item-card, side-card, campos de formulario, chips muted, btn-mini. ============================================================================ */ /* ---- tarjetas de lista .item-card → glass (conserva borde-izq de color por tipo) ---- */ body.skin-glass .item-card{ background:var(--g-rowgrad) !important; backdrop-filter:saturate(170%) blur(20px);-webkit-backdrop-filter:saturate(170%) blur(20px); border-top:1px solid var(--glass-bd) !important; border-right:1px solid var(--glass-bd) !important; border-bottom:1px solid var(--glass-bd) !important; border-radius:12px !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset; } body.skin-glass .item-card.foco{ border-color:color-mix(in srgb,var(--color-grabacion) 45%,var(--glass-bd)) !important; } /* ---- paneles laterales de detalle ---- */ body.skin-glass .side-card{ background:var(--glass-grad) !important; backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px); border:1px solid var(--glass-bd) !important;border-radius:16px !important;box-shadow:var(--g-shadow) !important; } /* ---- tarjetas colapsables .sg-card → glass, tinte por tipo en el borde izq ---- */ body.skin-glass .sg-card{ background:var(--g-rowgrad) !important; backdrop-filter:saturate(170%) blur(20px);-webkit-backdrop-filter:saturate(170%) blur(20px); border:1px solid var(--glass-bd) !important;border-radius:12px !important; border-left:3px solid color-mix(in srgb,var(--color-tarea) 60%,transparent) !important; box-shadow:0 1px 0 rgba(255,255,255,.06) inset; } body.skin-glass .sg-card--pendiente{ border-left-color:color-mix(in srgb,var(--color-pendiente) 65%,transparent) !important; } body.skin-glass .sg-card.urgente{ border-left-color:color-mix(in srgb,var(--color-urgente) 70%,transparent) !important; } /* ---- campos de formulario → glass (input/select/textarea/.input/inline-edit) ---- */ body.skin-glass .input, body.skin-glass input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), body.skin-glass select, body.skin-glass textarea, body.skin-glass .sg-ie-input{ background:var(--glass-grad) !important; border:1px solid var(--glass-bd) !important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-radius:10px !important; } body.skin-glass .input:focus, body.skin-glass input:focus, body.skin-glass select:focus, body.skin-glass textarea:focus, body.skin-glass .sg-ie-input:focus{ border-color:color-mix(in srgb,var(--color-tarea) 55%,transparent) !important;outline:none; } /* ----