:root{ /* ===== Paleta MODO OSCURO (por defecto) ===== */ --bg:#121212; /* Fondo principal */ --panel:#153E23; /* Panel base (verde oscuro) */ --panel-2:#0F2A19; /* Panel secundario (verde más profundo) */ --border:#2E7D32; /* Bordes verdosos */ --text:#E0E0E0; /* Texto primario */ --muted:#BDBDBD; /* Texto secundario */ /* Marca CowGuard */ --brand:#FF9800; /* Naranja principal */ --brand2:#FFB74D; /* Naranja claro/acento */ /* Acentos verdes */ --accent:#66BB6A; /* Verde claro */ --accent2:#1B5E20; /* Verde profundo */ /* Layout y efectos */ --header-h:64px; --max:1200px; --radius:16px; --shadow:0 10px 30px #0006; --menu-bg:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel-2) 90%, transparent)); --glass:blur(10px) saturate(140%); /* FAQ */ --faq-bg:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel-2) 90%, transparent)); --faq-border:var(--border); } /* ===== Paleta MODO CLARO (activar con ) ===== */ body[data-theme="light"]{ --bg:#FFFFFF; --panel:#F3FBF6; /* Verde claro sutil */ --panel-2:#FFFFFF; --border:#DDDDDD; --text:#333333; --muted:#555555; --brand:#FF9800; /* sigue siendo la marca principal */ --brand2:#E68900; /* variante más oscura para contraste en claro */ /* Acentos verdes */ --accent:#4CAF50; --accent2:#2E7D32; --menu-bg:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--bg) 95%, transparent)); --faq-bg:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel-2) 95%, transparent)); --faq-border:#DDDDDD; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; /* Fondeos sutiles, adaptados a la nueva paleta */ background: radial-gradient(1100px 700px at 120% -20%, color-mix(in oklab, var(--brand) 22%, transparent) 0%, transparent 55%), radial-gradient(900px 600px at -20% 0%, color-mix(in oklab, var(--accent2) 28%, transparent) 0%, transparent 55%); background-repeat:no-repeat; background-size:cover; } /* utilidades */ .content ::marker{ content:"" } :focus{ outline:none } a{color:var(--text); text-decoration:none} .muted{color:var(--muted)} .row{display:flex; gap:12px; align-items:center} .grid{display:grid; gap:12px} .container{max-width:var(--max); margin:0 auto; padding:16px} /* ===== Header unificado ===== */ header#appHeader{ position:sticky; top:0; left:0; right:0; height:var(--header-h); display:flex; align-items:center; gap:12px; padding:0 16px; background:var(--accent2); border-bottom:1px solid color-mix(in oklab, var(--accent2) 80%, var(--border) 20%); backdrop-filter:var(--glass); z-index:1000; animation:fadeDown .32s ease; } @keyframes fadeDown{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} .brand{ font-weight:900; font-size:18px; background:linear-gradient(90deg,var(--text), color-mix(in oklab, var(--text) 70%, var(--accent) 30%) 60%, var(--text)); -webkit-background-clip:text; color:transparent } .brand img{ display:block; height:28px; width:auto } .brand-logo{ display:inline-flex; align-items:center; gap:10px } .brand-logo img{ height:52px; width:auto; border-radius:8px } /* Ocultar marca textual en el header (usamos sólo el logo) */ #appHeader .brand{ display:none !important; } #headerHello{ margin-left:auto; display:inline-flex; align-items:center; gap:8px } .grow{flex:1} .pill{ border:1px solid color-mix(in oklab, var(--border) 80%, transparent); padding:6px 10px; border-radius:999px; font-size:12px; background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, #000 0%), var(--panel)); white-space:nowrap; max-width:42vw; overflow:hidden; text-overflow:ellipsis; } /* Botón de icono (header) */ .icon-btn{ appearance:none; border:1px solid color-mix(in oklab, var(--border) 80%, transparent); background:color-mix(in oklab, var(--panel) 92%, transparent); color:var(--text); width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; transition:transform .06s, background .15s, box-shadow .2s, border-color .2s; } .icon-btn:hover{ background:color-mix(in oklab, var(--panel) 85%, transparent); box-shadow:0 6px 18px #0007 } .icon-btn:active{ transform:scale(.985) } #themeToggle{ margin-left:6px; font-size:16px; line-height:1; } /* botones / cards */ .btn{ appearance:none; border:1px solid color-mix(in oklab, var(--border) 85%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 94%, transparent), color-mix(in oklab, var(--brand2) 94%, transparent)); color:var(--text); padding:11px 14px; border-radius:12px; cursor:pointer; transition:transform .06s, background .15s, box-shadow .2s, border-color .2s; width:100%; } .btn:hover{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, transparent), color-mix(in oklab, var(--brand2) 90%, transparent)); box-shadow:0 6px 18px #0007} .btn:active{transform:scale(.985)} .btn.primary{ background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 94%, transparent), color-mix(in oklab, var(--brand2) 94%, transparent)); border-color:color-mix(in oklab, var(--brand) 70%, transparent); position:relative; overflow:hidden; } .btn.primary::after{ content:""; position:absolute; inset:-1px; background:linear-gradient(90deg,transparent, color-mix(in oklab, #ffffff 35%, transparent) 20%, transparent 40%, transparent); transform:translateX(-120%); transition:transform .6s ease; } .btn.primary:hover::after{transform:translateX(120%)} .card{ background:linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel-2) 92%, transparent)); border:1px solid color-mix(in oklab, var(--border) 85%, transparent); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); animation:popIn .24s ease; } @keyframes popIn{from{opacity:0; transform:scale(.985)}to{opacity:1; transform:none}} .card-title{margin:0 0 8px 0; font-size:18px} .badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--border) 80%, transparent); background:color-mix(in oklab, var(--panel) 86%, transparent); color:var(--text); } /* inputs */ .input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--border) 85%, transparent); background:color-mix(in oklab, var(--panel) 92%, transparent); color:var(--text); outline:none; transition:border-color .15s ease, background .15s ease, box-shadow .2s ease; } .input::placeholder{ color:color-mix(in oklab, var(--muted) 80%, transparent); } .input:focus{ border-color:color-mix(in oklab, var(--brand) 60%, var(--border)); background:color-mix(in oklab, var(--panel) 85%, transparent); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent); } .input[disabled]{ opacity:.7; cursor:not-allowed; } .main-grid{ display:grid; gap:16px; grid-template-columns:1.35fr .85fr; grid-template-areas:"content side"; align-items:start; } .content{ grid-area: content; } .side{ grid-area: side; position:sticky; top:calc(var(--header-h) + 12px); display:grid; gap:12px; } @media (max-width:980px){ .main-grid{ grid-template-columns:1fr; grid-template-areas:"content"; } .side{ display:none !important; } #headerHello{ cursor:pointer; display:inline-flex !important; align-items:center; gap:10px; } #helloCaret{ opacity:1; } } @media (min-width:981px){ #helloCaret{ opacity:.35; transition:opacity .2s, transform .2s; } #headerHello:hover #helloCaret, #headerHello[aria-expanded="true"] #helloCaret{ opacity:1; } } .tiles{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(260px,1fr)); } @media (max-width:740px){ .tiles{grid-template-columns:1fr} } footer{opacity:.7; font-size:12px; padding:22px 0 32px} /* loader superior */ #loaderBar{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand2)); box-shadow:0 0 12px color-mix(in oklab, var(--brand) 66%, transparent); z-index:3000; transition:width .28s ease; } /* ===== Menú del header ===== */ #helloMenu{ position:fixed; right:10px; top:calc(var(--header-h) + 6px); width:min(480px, 95vw); padding:12px; border-radius:14px; background:var(--menu-bg); border:1px solid color-mix(in oklab, var(--border) 85%, transparent); box-shadow:0 14px 36px #000a; backdrop-filter: var(--glass); opacity:0; transform:scale(.96) translateY(-4px); transform-origin: 90% top; pointer-events:none; z-index:2600; transition:opacity .18s ease, transform .18s ease; } #helloMenu.open{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; } #helloCaret{ display:inline-block; transform:rotate(0deg); transition:transform .18s ease; } #headerHello[aria-expanded="true"] #helloCaret{ transform:rotate(180deg); } #helloMenu h5{ margin:6px 6px 8px; font-size:12px; letter-spacing:.2px; color:color-mix(in oklab, var(--muted) 70%, var(--accent) 30%); font-weight:800; text-transform:uppercase; } #helloMenu .sep{ height:1px; background:color-mix(in oklab, var(--border) 80%, transparent); margin:10px 0; } .profile{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; border:1px solid color-mix(in oklab, var(--border) 80%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, transparent), color-mix(in oklab, var(--panel-2) 85%, transparent)); margin:2px 2px 10px; cursor:pointer; transition:box-shadow .2s, transform .06s; } .profile:hover{ box-shadow:0 10px 22px #0007; transform:translateY(-1px) } .avatar{ width:36px; height:36px; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:color-mix(in oklab, var(--panel) 86%, transparent); border:1px solid color-mix(in oklab, var(--border) 80%, transparent); font-weight:800; color:var(--accent) } .avatar img{ width:100%; height:100%; object-fit:cover; display:block } .pname{font-weight:800} .pmeta{font-size:12px; color:color-mix(in oklab, var(--muted) 85%, var(--accent) 15%)} .org-list, .acct-list{ display:grid; gap:8px; } .org-card, .acct-card{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid color-mix(in oklab, var(--border) 80%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, transparent), color-mix(in oklab, var(--panel-2) 85%, transparent)); transition:transform .06s, box-shadow .2s, border-color .2s; cursor:pointer; } .org-card:hover, .acct-card:hover{ transform:translateY(-1px); box-shadow:0 10px 22px #0007; border-color:color-mix(in oklab, var(--border) 65%, transparent); } .org-avatar, .acct-avatar{ width:42px; height:42px; border-radius:10px; overflow:hidden; background:color-mix(in oklab, var(--panel) 90%, transparent); border:1px solid color-mix(in oklab, var(--border) 80%, transparent); display:grid; place-items:center; font-weight:900; color:var(--accent); } .org-avatar img, .acct-avatar img{ width:100%; height:100%; object-fit:cover; display:block } .org-name, .acct-name{ font-weight:800; } .org-addr, .acct-mail{ font-size:12px; color:color-mix(in oklab, var(--muted) 85%, var(--accent) 15%); margin-top:2px } .org-check, .acct-check{ width:18px; height:18px; border-radius:999px; border:1px solid color-mix(in oklab, var(--border) 75%, transparent); display:grid; place-items:center; font-size:12px; color:var(--accent); opacity:0; transform:scale(.8); transition:.18s } .org-card.active .org-check, .acct-card.active .acct-check{ opacity:1; transform:scale(1) } .add-card{ grid-template-columns:42px 1fr; border-style:dashed; background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 88%, transparent), color-mix(in oklab, var(--panel) 82%, transparent)); color:#cfe6ff; } .add-card .plus{ font-size:22px; line-height:0; display:grid; place-items:center } /* edición de cuentas */ .acct-card .trash{ display:none; width:26px; height:26px; border-radius:8px; border:1px solid color-mix(in oklab, var(--border) 80%, transparent); background:color-mix(in oklab, var(--panel) 90%, transparent); color:#cfe6ff; font-size:14px; align-items:center; justify-content:center; } .acct-list.edit .acct-card .trash{ display:flex; } .acct-list.edit .acct-card{ grid-template-columns:42px 1fr 26px; } .acct-list.edit .acct-card .acct-check{ display:none; } /* anuncios */ #adTopWrap{ position:sticky; top:var(--header-h); z-index:900; } .adCard{ display:none; margin:8px auto 0; max-width:var(--max); padding:8px 10px; border-radius:12px; border:1px solid color-mix(in oklab, var(--border) 85%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, transparent), color-mix(in oklab, var(--panel-2) 85%, transparent)); box-shadow:0 10px 22px #0008; animation:fadeIn .22s ease; } .adCard.show{ display:block; } .adLabel{ font-size:10px; color:color-mix(in oklab, var(--muted) 85%, var(--accent) 15%); letter-spacing:.12em; text-transform:uppercase; margin:0 0 6px 2px; opacity:.8 } ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; } @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* FAQ */ .faq{ display:grid; gap:12px; } .faq .qa{ border:1px solid var(--faq-border); border-radius:12px; background:var(--faq-bg); overflow:hidden; } .faq summary{ list-style:none; user-select:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px; font-weight:800; font-size:15px } .chev{ width:18px; height:18px; border-radius:6px; display:inline-grid; place-items:center; border:1px solid color-mix(in oklab, var(--border) 75%, transparent); background:color-mix(in oklab, var(--panel) 88%, transparent); font-size:12px; line-height:1; transform:rotate(0deg); transition:.18s; opacity:.85 } details[open] .chev{ transform:rotate(90deg); background:color-mix(in oklab, var(--panel-2) 88%, transparent) } .q-title{ flex:1 } .ans{ border-top:1px dashed var(--faq-border); padding:12px 16px 14px; color:color-mix(in oklab, var(--text) 85%, var(--muted) 15%); font-size:14px; line-height:1.5 } .ans ol{ margin:8px 0 0 0; padding-left:18px } .ans li{ margin:4px 0 } .mono{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace } /* ===== Visibilidad por estado (controlado por data-attrs en ) ===== */ .auth-guest, .auth-user, .org-has, .org-none { display: none; } body[data-auth="guest"] .auth-guest { display: block; } body[data-auth="user"] .auth-user { display: block; } body[data-auth="user"][data-org="has"] .org-has { display: block; } body[data-auth="user"][data-org="none"] .org-none { display: block; } /* ===== Página: Crear Organización ===== */ body[data-page="create-org"] .wrap{ max-width:1100px; margin:0 auto; padding:16px } body[data-page="create-org"] .header{ display:none !important } body[data-page="create-org"] .tinyback{ font-size:12px; color:var(--muted); margin:6px 0 10px 2px; display:inline-block } /* Header minimal en esta página */ body[data-page="create-org"] #btnLogoutMenu{ display:none !important } /* Botón de usar mi ubicación removido (se auto-solicita permiso) */ body[data-page="create-org"] #btnUseMyLoc{ display:none !important } /* Mapa y barra inferior */ body[data-page="create-org"] #mapWrap{ position:relative } body[data-page="create-org"] #map{ height:620px; border-radius:12px; border:1px solid var(--border-acc); overflow:hidden; background:color-mix(in oklab, var(--panel) 95%, transparent) } body[data-page="create-org"] #map.cross{ cursor:crosshair } /* Fuerza cursor de dibujo y evita gestos táctiles cuando se dibuja */ body[data-page="create-org"] #map.cross *{ cursor:crosshair !important } body[data-page="create-org"] #map.cross{ touch-action:none } body[data-page="create-org"] #mapWrap.fs{ position:fixed; inset:0; z-index:10000; margin:0; padding:0; border-radius:0; background:var(--bg) } body[data-page="create-org"] #mapWrap.fs #map{ height:100dvh; border-radius:0; border:none } body[data-page="create-org"] .bottom-nav{ position:sticky; bottom:0; left:0; right:0; display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); margin-top:8px; background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 0%, transparent), color-mix(in oklab, var(--bg) 80%, transparent) 30%); backdrop-filter:saturate(1.2) blur(8px); } body[data-page="create-org"] .bottom-nav .group{ display:flex; gap:8px; flex-wrap:wrap } /* Chips de herramientas */ body[data-page="create-org"] .chip{ cursor:pointer; padding:10px 12px; border-radius:12px; border:var(--border-w) solid var(--border-acc); background:color-mix(in oklab, var(--panel) 88%, transparent); color:var(--text); font-size:13px; } body[data-page="create-org"] .chip.on{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 20%, transparent) inset } body[data-page="create-org"] .chip.primary{ background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 82%, transparent), color-mix(in oklab, var(--panel) 92%, transparent)); border-color:color-mix(in oklab, var(--border-acc) 80%, transparent); font-weight:600 } body[data-page="create-org"] .chip.warn{ background:color-mix(in oklab, #2a1414 90%, transparent); border-color:#5a2a2a } body[data-page="create-org"] .chip[disabled]{ opacity:.6; cursor:not-allowed } @media (max-width:640px){ body[data-page="create-org"] .chip{ padding:9px 10px; font-size:12px } } /* Autocomplete dirección */ body[data-page="create-org"] .ac-wrap{ position:relative } body[data-page="create-org"] .ac-row{ display:flex; gap:8px; align-items:center } body[data-page="create-org"] .ac-row .grow{ flex:1 } body[data-page="create-org"] .ac-list{ position:absolute; top:100%; left:0; right:0; z-index:10001; background:color-mix(in oklab, var(--panel) 94%, transparent); border:var(--border-w) solid var(--border-acc); border-radius:10px; margin-top:6px; box-shadow:0 10px 24px #0008; overflow:hidden; display:none; max-height:260px; overflow-y:auto; } body[data-page="create-org"] .ac-item{ padding:10px 12px; cursor:pointer; border-bottom:1px solid color-mix(in oklab, var(--border-acc) 60%, transparent) } /* Pills de estado locales */ body[data-page="create-org"] .pill.ok{ border-color:color-mix(in oklab, var(--accent) 70%, var(--border)); color:color-mix(in oklab, var(--text) 80%, var(--accent) 20%); background:color-mix(in oklab, var(--accent) 10%, transparent) } body[data-page="create-org"] .pill.bad{ border-color:#5c1e1e; color:#ffd1d1; background:#1a0d0d } body[data-page="create-org"] .pill.neu{ border-color:var(--border-acc); color:var(--text); background:color-mix(in oklab, var(--panel) 90%, transparent) } /* Botones estado disabled por clase */ body[data-page="create-org"] .btn.is-disabled{ opacity:.55; cursor:not-allowed; filter:saturate(.75) } body[data-page="create-org"] .btn.ghost{ background:color-mix(in oklab, var(--panel) 92%, transparent); border-color:var(--border-acc); padding:9px 10px } body[data-page="create-org"] .btn.warn{ background:color-mix(in oklab, #2a1414 90%, transparent); border-color:#5a2a2a } /* === Overrides: volver a superficies originales y añadir reborde verde === */ :root{ --panel:#161b22; --panel-2:#0f1628; --border:#333333; --menu-bg:linear-gradient(180deg,#151A20,#1b2028); --faq-bg:linear-gradient(180deg,#151A20,#1b2028); /* borde acentuado en verde */ --border-acc: color-mix(in oklab, var(--border) 65%, var(--accent) 35%); --faq-border: var(--border-acc); --border-w: 2px; /* grosor de borde ligeramente mayor */ /* Header oscuro permanente */ --h-bg:#161b22; --h-border:#333a44; --h-text:#E0E0E0; } body[data-theme="light"]{ --panel:#F7F8FA; --panel-2:#FFFFFF; --border:#DDDDDD; --menu-bg:linear-gradient(180deg,#ffffff,#f3f5f8); --faq-bg:linear-gradient(180deg,#ffffff,#f7f8fb); --border-acc: color-mix(in oklab, var(--border) 60%, var(--accent2) 40%); --faq-border: var(--border-acc); --border-w: 2px; /* Mantener header oscuro igual en modo claro */ --h-bg:#161b22; --h-border:#333a44; --h-text:#E0E0E0; } body::before{ background: radial-gradient(1100px 700px at 120% -20%, color-mix(in oklab, var(--brand) 18%, transparent) 0%, transparent 55%), radial-gradient(900px 600px at -20% 0%, color-mix(in oklab, #1B5E20 22%, transparent) 0%, transparent 55%); } header#appHeader{ background:var(--h-bg); border-bottom-color: var(--h-border); color:var(--h-text); } #appHeader, #appHeader * { color: var(--h-text); } #appHeader .icon-btn{ border-color: var(--h-border) !important; background: color-mix(in oklab, var(--h-bg) 92%, transparent); color: var(--h-text); } #appHeader .icon-btn:hover{ background: color-mix(in oklab, var(--h-bg) 84%, transparent); } #appHeader #headerHello{ border: var(--border-w) solid var(--h-border); background: color-mix(in oklab, var(--h-bg) 90%, transparent); color: var(--h-text); } #appHeader #headerHello:hover{ background: color-mix(in oklab, var(--h-bg) 82%, transparent); } #appHeader #helloCaret{ color: var(--accent); } /* Org mini avatar next to badge */ #orgMini{ width:28px; height:28px; border-radius:8px; margin-right:6px; } .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 70%, transparent), color-mix(in oklab, var(--panel-2) 90%, transparent)); } .btn{ background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 94%, transparent), color-mix(in oklab, var(--brand2) 94%, transparent)); } .btn:hover{ background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, transparent), color-mix(in oklab, var(--brand2) 90%, transparent)); } .btn.primary{ background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 94%, transparent), color-mix(in oklab, var(--brand2) 94%, transparent)); border-color:color-mix(in oklab, var(--brand) 70%, transparent); } .btn.primary::after{ background:linear-gradient(90deg,transparent, color-mix(in oklab, var(--text) 10%, transparent) 20%, transparent 40%, transparent); } .brand{ background:linear-gradient(90deg,var(--text), color-mix(in oklab, var(--text) 70%, #cfe6ff 30%) 60%, var(--text)); } /* Reborde verde aplicado globalmente */ .btn, .pill, .card, .profile, .avatar, .org-card, .acct-card, .org-avatar, .acct-avatar, .add-card, .acct-card .trash, #helloMenu, .adCard, .faq .qa, .chev, .input{ border-color: var(--border-acc) !important; border-width: var(--border-w) !important; } /* Header hello button look */ #headerHello{ border: var(--border-w) solid var(--border-acc); background: color-mix(in oklab, var(--panel) 90%, transparent); color: var(--text); padding: 6px 10px; border-radius: 12px; } #headerHello:hover{ background: color-mix(in oklab, var(--panel) 82%, transparent); } #helloCaret{ color: var(--accent); } /* Mejorar contraste de textos secundarios sobre blanco/oscuro */ .pmeta, .org-addr, .acct-mail, .adLabel{ color:color-mix(in oklab, var(--text) 70%, var(--muted) 30%) !important; } /* Volver colores de acentos anteriores para avatars/badges/checks */ .badge{ color:#cfe6ff !important; } .avatar{ color:#cfe6ff !important; } .org-avatar, .acct-avatar{ color:#cfe6ff !important; } .org-check, .acct-check{ color:#9bd6ff !important; } /* Subrayados sutiles en interacciones */ a:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; } #headerHello:hover b{ text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* Tarjetas más destacadas en modo claro: verde tenue ~10% */ body[data-theme="light"] .card{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, #ffffff), color-mix(in oklab, var(--accent) 6%, #ffffff) ); border-color: var(--border-acc); } body[data-theme="light"] .adCard, body[data-theme="light"] .faq .qa{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, #ffffff), color-mix(in oklab, var(--accent) 4%, #ffffff) ); } /* Accounts sub-panel inside menu */ #helloMenu{ position:fixed; } #helloMenu .acct-panel{ position: absolute; inset: 12px; border: var(--border-w) solid var(--border-acc); background: var(--menu-bg); border-radius: 12px; box-shadow: 0 10px 24px #0009; padding: 10px; } .acct-panel .acct-card .trash{ display:flex !important; } .acct-panel .acct-card{ grid-template-columns:42px 1fr 26px; } /* Light-mode badge visibility */ body[data-theme="light"] .badge{ background: color-mix(in oklab, var(--accent) 14%, #ffffff) !important; color: #1f2937 !important; border-color: var(--border-acc) !important; } /* Ocultar organizacion en todos los headers */ #orgBadge{ display:none !important } #orgMini{ display:none !important } /* --- Minimal rounded avatars and org icons --- */ #avatarMini, #avatarProfile, #orgMini { border-radius: 9999px; overflow: hidden; } #avatarMini img, #avatarProfile img, #orgMini img, .org-avatar img, .acct-avatar img { border-radius: 9999px; object-fit: cover; width: 100%; height: 100%; display: block; } .org-avatar, .acct-avatar { border-radius: 9999px; overflow: hidden; } /* Ensure header/menu overlay above maps/content */ #appHeader { z-index: 3500; } #helloMenu { z-index: 4000; } /* Menu list items */ .org-card, .acct-card { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-acc, #273149); border-radius: 8px; background: var(--panel, #0b1220); cursor: pointer; } .org-card.active { background: #2a1a00; border-color: #ff7b00; } .org-card .org-avatar, .acct-card .acct-avatar { width: 32px; height: 32px; display:grid; place-items:center; background: var(--border-acc, #273149); color:#cdd6e0; font-weight:600; } .acct-card.add-card { grid-template-columns: 36px 1fr; } .acct-card .trash { background: transparent; border: 0; cursor: pointer; color: #cdd6e0; } .acct-card.active { border-color: #3b82f6; background: #0b1a2f; } /* --- Unified header styling --- */ .app-header { --header-h: 56px; position: sticky; top: 0; background: var(--panel, #0b1220); border-bottom: 1px solid var(--border-acc, #273149); width: 100%; box-sizing: border-box; } .app-header .hwrap { min-height: var(--header-h); } .app-header .brand img#brandLogo { height: var(--header-h); width: auto; display: block; } .app-header #avatarMini { width: 28px; height: 28px; } .app-header .brand { color: inherit; text-decoration: none; } .app-header .brand span { font-weight: 600; } .app-header .hello { padding: 6px 8px; border-radius: 8px; } .app-header .hello:hover { background: rgba(255,255,255,0.06); } /* Dropdown animation (JS controls display) */ #helloMenu { transition: opacity .12s ease, transform .12s ease; opacity: 0; transform: translateY(4px); } #helloMenu.open { opacity: 1; transform: none; } /* Make profile row obviously clickable */ #profileRow { user-select: none; } #profileRow:hover { background: rgba(255,255,255,0.06); border-radius: 8px; } /* Pills and mini avatars */ .pill { padding: 4px 8px; border-radius: 9999px; border: 1px solid var(--border-acc, #273149); } .mini { border-radius: 9999px; overflow: hidden; } /* ========================================== Header (logo izquierda, usuario derecha) Panel deslizante y menú ========================================== */ .hdr-bar{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(148,163,184,.15);background:rgba(2,6,23,.7);backdrop-filter:blur(6px)} .hdr-left,.hdr-right{display:flex;align-items:center;gap:12px} .hdr-logo img{height:30px;width:auto;display:block} .hdr-user{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:transparent;border:1px solid rgba(148,163,184,.15);color:#e2e8f0;cursor:pointer} .hdr-user:hover{background:rgba(148,163,184,.08)} .hdr-avatar{height:28px;width:28px;border-radius:999px;object-fit:cover;background:#1f2937;display:block} .hdr-avatar--placeholder{display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1220;background:#cbd5e1} .hdr-hello{font-weight:600} .hdr-chevron{width:16px;height:16px;opacity:.8;fill:currentColor} /* Overlay + panel */ .hdr-ovl{position:fixed;inset:0;display:none;background:rgba(2,6,23,.55)} .hdr-ovl.is-open{display:block} .hdr-panel{position:absolute;right:14px;top:76px;width:min(92vw,420px);max-height:calc(100vh - 100px);overflow:auto;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.45);color:#e2e8f0} .hdr-sec{padding:12px;border-bottom:1px solid rgba(148,163,184,.12)} .hdr-sec:last-child{border-bottom:none} .hdr-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#93a3b8;margin:2px 2px 8px} .hdr-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .hdr-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,23,42,.6)} .hdr-card--tight{padding:10px} .hdr-meta{display:flex;flex-direction:column;min-width:0} .hdr-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-sub{font-size:12px;color:#93a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-role{font-size:12px;padding:2px 8px;border-radius:999px;background:#1e293b;color:#93c5fd;border:1px solid rgba(147,197,253,.2)} .hdr-tag{font-size:12px;color:#93a3b8} .hdr-list{display:flex;flex-direction:column;gap:8px;margin-top:8px} .hdr-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,23,42,.3);cursor:pointer} .hdr-item:hover{background:rgba(148,163,184,.08)} .hdr-item .trash{margin-left:auto;width:18px;height:18px;opacity:.75} .hdr-linkbtn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;border:1px dashed rgba(148,163,184,.28);background:transparent;color:#e2e8f0;cursor:pointer} .hdr-linkbtn:hover{background:rgba(148,163,184,.08)} .hdr-chip{padding:6px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,#f59e0b,#f59e0b);color:#0b1220;font-weight:700} .hdr-actions{display:flex;gap:10px} .hdr-btn{flex:1;text-align:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.4);color:#e2e8f0;cursor:pointer} .hdr-btn:hover{border-color:#f59e0b;color:#f59e0b} .hdr-btn--primary{background:linear-gradient(180deg,#f59e0b,#f59e0b);color:#0b1220;border-color:rgba(0,0,0,.25)} .hdr-btn--full{width:100%} @media (max-width:480px){.hdr-hello{display:none}} /* ========================================== Header overrides (v2) ========================================== */ .hdr-bar{position:sticky;top:0;z-index:40;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.82);backdrop-filter:blur(8px)} .hdr-left,.hdr-right{display:flex;align-items:center;gap:14px} .hdr-logo img{height:46px;width:auto;display:block} .hdr-user{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:999px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.2);color:#e2e8f0;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease} .hdr-user:hover{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.38);box-shadow:0 10px 24px rgba(15,23,42,.4)} .hdr-user--signin{border-style:dashed;background:rgba(148,163,184,.08)} .hdr-avatar{height:38px;width:38px;border-radius:999px;object-fit:cover;background:#1f2937;display:block} .hdr-avatar--placeholder{display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b1220;background:#cbd5e1} .hdr-hello{font-weight:600} .hdr-chevron{width:18px;height:18px;opacity:.85;fill:currentColor;transition:transform .2s ease} .hdr-chevron.is-open{transform:rotate(180deg)} .hdr-ovl{position:fixed;inset:0;display:none;background:rgba(2,6,23,.6);z-index:50} .hdr-ovl.is-open{display:block} .hdr-panel{position:absolute;right:20px;top:88px;width:min(94vw,420px);max-height:calc(100vh - 120px);overflow:auto;background:#0b1220;border:1px solid rgba(148,163,184,.24);border-radius:18px;box-shadow:0 18px 36px rgba(8,15,32,.55);color:#e2e8f0;transform:translateY(-12px);opacity:0;transition:opacity .2s ease,transform .2s ease} .hdr-ovl.is-open .hdr-panel{transform:translateY(0);opacity:1} .hdr-sec{padding:16px;border-bottom:1px solid rgba(148,163,184,.14)} .hdr-sec:last-child{border-bottom:none} .hdr-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#93a3b8;margin-bottom:10px} .hdr-card{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:rgba(15,23,42,.6)} .hdr-card--toggle{width:100%;text-align:left;background:rgba(15,23,42,.5);cursor:pointer;transition:border-color .2s ease,background .2s ease} .hdr-card--toggle:hover{border-color:rgba(148,163,184,.38);background:rgba(30,41,59,.6)} .hdr-card--toggle[aria-expanded="true"]{border-color:#f59e0b} .hdr-meta{display:flex;flex-direction:column;min-width:0} .hdr-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-sub{font-size:12px;color:#93a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-role{font-size:12px;padding:2px 10px;border-radius:999px;background:#1e293b;color:#93c5fd;border:1px solid rgba(147,197,253,.35)} .hdr-tag{font-size:12px;color:#93a3b8} .hdr-list{display:flex;flex-direction:column;gap:10px;margin-top:12px} .hdr-list--collapse{max-height:0;opacity:0;overflow:hidden;padding-top:0;transition:max-height .25s ease,opacity .25s ease,padding-top .25s ease} .hdr-list--collapse[data-open="true"]{max-height:600px;opacity:1;padding-top:8px} .hdr-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(148,163,184,.2);border-radius:12px;background:rgba(15,23,42,.4);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease} .hdr-item:hover{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.34);transform:translateY(-1px)} .hdr-item .trash{margin-left:auto;width:18px;height:18px;opacity:.75;transition:opacity .2s ease} .hdr-item .trash:hover{opacity:1} .hdr-linkbtn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:12px;border:1px dashed rgba(148,163,184,.32);background:transparent;color:#e2e8f0;cursor:pointer;transition:background .2s ease,border-color .2s ease} .hdr-linkbtn:hover{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.4)} .hdr-actions{display:flex;gap:12px} .hdr-btn{flex:1;text-align:center;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.45);color:#e2e8f0;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease} .hdr-btn:hover{border-color:#f59e0b;color:#fbbf24;background:rgba(30,41,59,.6);transform:translateY(-1px)} .hdr-btn--primary{background:linear-gradient(180deg,#f59e0b,#f97316);color:#0b1220;border-color:rgba(0,0,0,.2)} .hdr-btn--full{width:100%} .hdr-empty{font-size:13px;color:#9caec9;background:rgba(15,23,42,.4);border:1px dashed rgba(148,163,184,.22);border-radius:12px;padding:14px;text-align:center} @media (max-width:768px){.hdr-bar{height:64px;padding:0 14px}.hdr-logo img{height:38px}.hdr-hello{display:none}} @media (max-width:480px){.hdr-panel{right:12px;width:calc(100vw - 24px)}}