*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --purple:#a78bfa;--purple-d:#8b6fd4;--logo:#BC99FF; --sw:290px; --sidebar-bg:rgba(36,36,38,0.97); --item-hover:rgba(255,255,255,0.09); --item-active:rgba(255,255,255,0.13); --white:#fff;--muted:#aaa;--dim:#585654; --border:rgba(255,255,255,0.09); --font:'DM Sans',system-ui,sans-serif; --rad:8px;--ease:0.17s ease; } .astrolab-host{font-family:var(--font);font-size:15px;color:var(--white)} /* BG */ .bg-camo{position:fixed;inset:0;z-index:0;pointer-events:none; background:url('bg-01.svg') left top / 400px auto repeat; opacity:0.95} /* APP */ .app{position:relative;z-index:1;display:flex;height:100vh;overflow:hidden} /* SIDEBAR */ .sidebar{width:var(--sw);flex-shrink:0;background:var(--sidebar-bg); border-right:1px solid rgba(255,255,255,0.06); display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent} .sidebar::-webkit-scrollbar{width:3px} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08)} .logo{padding:1rem 0.9rem 0.6rem 0.9rem;display:block;width:100%;box-sizing:border-box} .logo-svg{width:100%;height:auto;max-height:48px;display:block} .search-wrap{position:relative;margin:0 0.85rem 0.5rem} .search-ico{position:absolute;left:0.65rem;top:50%;transform:translateY(-50%);pointer-events:none} .search-input{width:100%;padding:0.46rem 0.75rem 0.46rem 2rem;background:rgba(167,139,250,0.11); border:1.5px solid var(--purple);border-radius:20px;font-family:var(--font); font-size:0.81rem;color:var(--white);outline:none;transition:border-color var(--ease)} .search-input::placeholder{color:rgba(167,139,250,0.5)} .search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50; background:rgba(26,26,26,0.99);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden} .sresult{padding:0.4rem 0.85rem;cursor:pointer;font-size:0.78rem; border-bottom:1px solid rgba(255,255,255,0.04);transition:background var(--ease)} .sresult:hover{background:var(--item-hover)} .rn{font-weight:500}.ri{font-size:0.69rem;color:var(--muted);font-style:italic} .nav-menu{display:flex;flex-direction:column;gap:1px;padding:0 0.6rem 0.3rem} .nav-item{display:flex;align-items:center;gap:0.6rem;width:100%; padding:0.48rem 0.85rem;background:transparent;border:none;border-radius:var(--rad); font-family:var(--font);font-size:0.83rem;font-weight:500;color:var(--white); text-align:left;cursor:pointer;transition:background var(--ease);white-space:nowrap} .nav-item:hover{background:var(--item-hover)} .nav-item.active{background:var(--item-active)} .nav-item svg{flex-shrink:0;opacity:0.82} .nav-section-label{padding:0.65rem 1.45rem 0.25rem;font-size:0.69rem;color:var(--muted)} .sidebar-footer{padding:0.8rem 1.45rem 0.55rem;font-size:0.67rem;color:var(--dim)} .nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:1px;padding:0.5rem 0.6rem 0.3rem;border-top:1px solid var(--border)} /* MAIN */ .main-area{flex:1;position:relative;overflow:hidden;display:flex} /* TOOLS COL */ .tools-col{position:fixed;right:var(--tools-right,0);top:0;bottom:0;width:50px; display:flex;flex-direction:column;align-items:center; justify-content:center;gap:0.24rem;z-index:500;padding:0.8rem 0; background:transparent;pointer-events:none; transition:right 0.25s ease;} .tool-btn{width:36px;height:36px;border-radius:50%; background:rgba(20,20,24,0.55);border:1px solid rgba(255,255,255,0.13); display:flex;align-items:center;justify-content:center; color:var(--white);cursor:pointer;transition:all var(--ease);flex-shrink:0; pointer-events:all;backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,0.35);} .tool-btn:hover{background:rgba(76,76,76,0.92);border-color:rgba(255,255,255,0.24)} .tool-btn svg{width:15px;height:15px} .tool-btn-accent{background:rgba(167,139,250,0.17)!important;border-color:rgba(167,139,250,0.42)!important} .tool-btn-accent:hover{background:rgba(167,139,250,0.3)!important} .tools-gap{width:28px;height:1px;background:rgba(255,255,255,0.1);margin:3px auto} /* PANELS */ .panel{display:none;flex:1;flex-direction:column;overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.07) transparent} .panel::-webkit-scrollbar{width:3px} .panel.active{display:flex} #panel-home{align-items:center;justify-content:flex-start;padding:0.4rem 3.5rem 0.4rem 0.8rem;position:relative;gap:0;overflow:visible} /* Fecha */ .fecha-display{font-size:0.78rem;font-weight:600;letter-spacing:0.06em; color:var(--white);text-transform:uppercase;text-align:center;flex-shrink:0;padding:0.2rem 0} /* Wheel */ .wheel-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:visible;min-height:0;padding:0 8px;box-sizing:border-box} /* Home panel: wheel fills full available width, 8% vertical padding */ #panel-home{flex-direction:column;} #panel-home .wheel-wrap{ flex:1; padding:8vh 50px 8vh 8px; align-items:center; justify-content:center; } /* Time controls */ .time-controls{display:flex;align-items:center;justify-content:center;gap:0.3rem;flex-shrink:0; padding:0.3rem 0;flex-wrap:nowrap} .time-controls.push-up{padding-bottom:2.6rem} .time-btns{display:flex;align-items:center;gap:0.2rem} .tbtn{display:flex;flex-direction:column;align-items:center;gap:1px; background:rgba(40,40,40,0.9);border:1px solid rgba(255,255,255,0.1); border-radius:50%;width:36px;height:36px;justify-content:center; color:var(--white);cursor:pointer;font-family:var(--font);font-weight:700; transition:all var(--ease);flex-shrink:0;user-select:none;-webkit-user-select:none} .tbtn:hover,.tbtn:active{background:rgba(80,80,80,0.92);border-color:rgba(255,255,255,0.25)} .tbtn svg{width:11px;height:9px} .tbtn span{font-size:0.5rem;letter-spacing:0.04em} .tbtn-now{background:rgba(46,46,46,0.9);border:1px solid rgba(255,255,255,0.18); border-radius:16px;padding:0.32rem 0.7rem;color:var(--white);cursor:pointer; font-family:var(--font);font-size:0.59rem;font-weight:700;letter-spacing:0.1em;transition:all var(--ease)} .tbtn-now:hover{background:rgba(88,88,88,0.9)} /* Panel header */ .panel-header-bar{display:flex;align-items:center;justify-content:space-between; padding:0.8rem 1.25rem;background:rgba(10,10,10,0.6); border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0} .panel-title{font-size:0.9rem;font-weight:700;color:var(--white)} .close-panel{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1); border-radius:16px;padding:0.28rem 0.8rem;font-family:var(--font); font-size:0.69rem;color:var(--muted);cursor:pointer;transition:all var(--ease)} .close-panel:hover{background:rgba(255,255,255,0.12);color:var(--white)} .placeholder-msg{display:flex;align-items:center;justify-content:center;flex:1; font-size:0.86rem;color:var(--dim);font-style:italic;padding:3rem} /* Inner panel */ .inner-panel{display:flex;gap:1rem;padding:1rem 1.25rem;flex:1; align-items:flex-start;flex-wrap:wrap;overflow-y:auto} /* Form */ .form-col{flex:0 0 auto;width:min(360px,100%)} .preview-col{flex:1;min-width:200px} .fg{display:flex;flex-direction:column;gap:0.32rem;margin-bottom:0.78rem} .frow{display:flex;gap:0.7rem} .frow .fg{flex:1} .fl{font-size:0.59rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)} .fi,.fta{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1); border-radius:var(--rad);padding:0.5rem 0.76rem;font-family:var(--font); font-size:0.85rem;color:var(--white);outline:none;width:100%;transition:border-color var(--ease)} .fi:focus,.fta:focus{border-color:rgba(167,139,250,0.45);box-shadow:0 0 0 3px rgba(167,139,250,0.08)} .fi::placeholder,.fta::placeholder{color:var(--dim)} .fta{resize:vertical;min-height:64px} input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(0.6);cursor:pointer} .factions{display:flex;gap:0.45rem;justify-content:flex-end;margin-top:0.4rem;flex-wrap:wrap} .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.13); border-radius:var(--rad);padding:0.46rem 0.85rem;font-family:var(--font); font-size:0.73rem;color:var(--muted);cursor:pointer;transition:all var(--ease)} .btn-ghost:hover{border-color:rgba(255,255,255,0.27);color:var(--white)} .btn-accent{background:var(--purple);border:none;border-radius:var(--rad); padding:0.46rem 0.9rem;font-family:var(--font);font-size:0.73rem; font-weight:600;color:#fff;cursor:pointer;transition:all var(--ease)} .btn-accent:hover{background:var(--purple-d)} .btn-danger-sm{background:transparent;border:1px solid rgba(200,70,70,0.35); border-radius:var(--rad);padding:0.34rem 0.78rem;font-family:var(--font); font-size:0.69rem;color:#d07070;cursor:pointer;transition:all var(--ease)} .btn-danger-sm:hover{background:rgba(200,70,70,0.1)} /* Preview - transparent */ .preview-overlay{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;background:rgba(10,10,10,0.5);font-size:0.75rem; color:var(--muted);pointer-events:none;text-align:center;font-style:italic;border-radius:var(--rad)} .preview-overlay.hidden{display:none} /* City dropdown */ .city-dropdown{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:60; background:rgba(20,20,20,0.99);border:1px solid rgba(167,139,250,0.26); border-radius:var(--rad);overflow:hidden;max-height:185px;overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.6);display:none} .city-item{padding:0.42rem 0.78rem;font-size:0.78rem;color:var(--white);cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.13s;line-height:1.4} .city-item:last-child{border-bottom:none} .city-item:hover{background:rgba(167,139,250,0.12)} /* Saved grid */ .saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.65rem;padding:1rem 1.25rem} .saved-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.7rem;margin-bottom:0.5rem} .saved-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09); border-radius:var(--rad);padding:0.78rem 0.9rem;cursor:pointer;transition:all var(--ease)} .saved-card:hover{background:rgba(255,255,255,0.09);border-color:rgba(167,139,250,0.28)} .sc-name{font-weight:600;font-size:0.84rem;margin-bottom:0.18rem} .sc-info{font-size:0.69rem;color:var(--muted);font-style:italic} /* View data */ .view-data{flex:1;min-width:160px;padding:0.2rem 0} .detail-row{display:flex;justify-content:space-between;padding:0.33rem 0; border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.78rem} .detail-row:last-child{border-bottom:none} .dl{color:var(--muted);font-style:italic}.dv{font-weight:600;font-size:0.73rem} .dp-divider{height:1px;background:rgba(255,255,255,0.07);margin:0.65rem 0} .dp-lbl{font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem} .planet-table{display:flex;flex-direction:column;gap:0.22rem} .planet-row{display:flex;align-items:center;gap:0.45rem;padding:0.22rem 0.36rem; border-radius:4px;transition:background var(--ease)} .planet-row:hover{background:rgba(255,255,255,0.04)} .planet-name{font-size:0.66rem;color:var(--muted);width:60px;flex-shrink:0;font-family:'DM Sans',sans-serif} .planet-sign{font-size:0.76rem;flex:1} .planet-deg{font-family:'DM Sans',sans-serif;font-size:0.68rem;color:var(--muted);text-align:right;min-width:44px} /* POSITIONS OVERLAY */ .positions-overlay{position:absolute;top:0;right:50px;bottom:0;left:0; z-index:20;display:flex;align-items:stretch;pointer-events:none} .positions-overlay.hidden{display:none} .pos-panel{pointer-events:all;width:320px;margin:0.65rem 0 0.65rem 0.65rem; background:rgba(11,11,11,0.96);border:1px solid rgba(255,255,255,0.1); border-radius:10px;display:flex;flex-direction:column;overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.55)} .pos-header{display:flex;align-items:center;justify-content:space-between; padding:0.65rem 0.9rem;border-bottom:1px solid rgba(255,255,255,0.07)} .pos-title{font-size:0.77rem;font-weight:700;letter-spacing:0.06em;color:var(--white)} .pos-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.87rem;padding:0.18rem 0.36rem;transition:color var(--ease)} .pos-close:hover{color:var(--white)} .pos-body{flex:1;overflow-y:auto;padding:0.7rem 0.9rem;scrollbar-width:thin} .pos-table{width:100%;border-collapse:collapse;margin-bottom:0.45rem} .pos-table th{font-size:0.55rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase; color:var(--muted);padding:0 0.36rem 0.42rem;text-align:left} .pos-table td{font-size:0.73rem;padding:0.19rem 0.36rem;vertical-align:middle} .pos-table tr:nth-child(even) td{background:rgba(255,255,255,0.02)} .pos-divider{height:1px;background:rgba(255,255,255,0.07);margin:0.65rem 0} .pos-section-title{font-size:0.56rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.36rem} .asp-list{display:flex;flex-direction:column;gap:0.18rem} .asp-item{display:flex;align-items:center;gap:0.42rem;font-size:0.83rem;padding:0.16rem 0.28rem;border-radius:4px} .asp-item:hover{background:rgba(255,255,255,0.04)} .asp-sym{width:15px;flex-shrink:0;font-size:0.94rem} .asp-desc{flex:1;color:var(--muted)} .asp-orb{font-family:'Courier New',monospace;font-size:0.74rem;color:var(--dim)} /* MODALS */ .modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.72); backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem} .modal-backdrop.hidden{display:none} .modal-box{background:rgba(17,17,17,0.98);border:1px solid rgba(167,139,250,0.27); border-radius:12px;width:100%;max-width:460px;overflow:hidden;animation:slideUp 0.2s ease} @keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}} .modal-head{display:flex;align-items:center;justify-content:space-between; padding:0.9rem 1.15rem;border-bottom:1px solid rgba(255,255,255,0.08)} .modal-title{font-size:0.88rem;font-weight:700;color:var(--white)} .modal-body-inner{padding:0.95rem 1.15rem 1.15rem} /* Bodies popup */ #bodiesChecklist{padding:0.75rem 1.15rem;display:grid;grid-template-columns:1fr 1fr;gap:0.38rem} .body-check{display:flex;align-items:center;gap:0.46rem;cursor:pointer;font-size:0.78rem;color:var(--white)} .body-check input{accent-color:var(--purple);width:13px;height:13px;cursor:pointer} /* ISOLATION FOOTER */ .isolation-footer{position:fixed;bottom:0;left:var(--sw);right:50px;z-index:30; background:rgba(7,7,7,0.93);border-top:1px solid rgba(188,153,255,0.3); display:flex;align-items:center;justify-content:center;gap:0.75rem; padding:0.4rem 1.4rem;backdrop-filter:blur(6px);animation:slideUp 0.2s ease} .isolation-footer.hidden{display:none} #isolationMsg{font-size:0.74rem;font-weight:600;color:var(--logo)} .isolation-hint{font-size:0.69rem;color:var(--muted);font-style:italic} /* TOOLTIP GRADO */ .deg-tooltip{position:fixed;background:rgba(18,18,18,0.95); border:1px solid rgba(188,153,255,0.4);border-radius:6px; padding:0.28rem 0.62rem;font-size:0.71rem;color:var(--logo); pointer-events:none;z-index:50;white-space:nowrap;font-family:'Courier New',monospace} .deg-tooltip.hidden{display:none} /* TOAST */ .toast{position:fixed;bottom:1rem;right:1rem;z-index:200; background:rgba(20,20,20,0.97);border:1px solid rgba(167,139,250,0.4); border-radius:var(--rad);padding:0.58rem 0.95rem;font-size:0.73rem; font-weight:600;color:var(--logo);box-shadow:0 8px 24px rgba(0,0,0,0.5);display:none} /* Vincular */ .vincular-person-title{font-weight:700;font-size:0.87rem;color:var(--logo);margin-bottom:0.65rem;letter-spacing:0.04em} /* Calendar table */ .cal-table{width:100%;border-collapse:collapse} .cal-table th{text-align:left;padding:0.28rem 0.5rem;font-size:0.58rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase} .cal-table td{padding:0.38rem 0.5rem;font-size:0.79rem;border-bottom:1px solid rgba(255,255,255,0.05)} *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.07) transparent} /* vincular label */ .vincular-label{font-size:0.78rem;font-weight:700;color:var(--logo);margin-bottom:0.65rem;letter-spacing:0.04em} /* ── HOME BOTTOM BAR ─────────────────────────────────────── */ .home-bottom-bar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%} /* ── MANUAL DATE CORNER (top-left of home panel) ─────────── */ .manual-date-corner{ position:absolute;top:0.5rem;left:0.5rem;z-index:10; display:flex;align-items:center;gap:0.4rem; background:rgba(20,20,22,0.82);border:1px solid rgba(255,255,255,0.08); border-radius:7px;padding:0.28rem 0.55rem; backdrop-filter:blur(6px); } .manual-date-label{ font-size:0.58rem;font-weight:600;letter-spacing:0.08em; text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0; } .manual-date-input{ background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12); border-radius:6px;padding:0.3rem 0.5rem; font-family:var(--font);font-size:0.72rem;color:var(--white);outline:none; width:162px;transition:border-color var(--ease); } .manual-date-input:focus{border-color:rgba(167,139,250,0.45);box-shadow:0 0 0 2px rgba(167,139,250,0.1)} input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(0.55);cursor:pointer;width:13px} .manual-date-btn{ display:flex;align-items:center;gap:0.3rem; background:rgba(167,139,250,0.15);border:1px solid rgba(167,139,250,0.35); border-radius:6px;padding:0.3rem 0.65rem; font-family:var(--font);font-size:0.7rem;font-weight:600;color:var(--logo); cursor:pointer;transition:all var(--ease);white-space:nowrap;flex-shrink:0; } .manual-date-btn:hover{background:rgba(167,139,250,0.28);border-color:var(--logo)} /* ── WHEEL RESPONSIVE SIZE ────────────────────────────── */ /* Size is set by JS applyZoom() — no CSS overrides needed */ #zodiacWheel{ display:block; cursor:crosshair; flex-shrink:0; } /* ── DATE PICKER POSITIONING ─────────────────────────────── */ /* Force the native datetime picker to open upward */ .manual-date-input{ /* Already defined above; add positioning hint */ position:relative; } /* Wrapper ensures the picker opens within viewport */ .manual-date-bar{ position:relative; } /* On Chromium-based browsers, the calendar appears below by default. We move the entire bar to sit higher so it appears above the bottom edge. */ .home-bottom-bar{ padding-bottom:0.3rem; } /* Editing mode indicator on nueva panel */ .editing-badge{ display:inline-flex;align-items:center;gap:0.4rem; background:rgba(167,139,250,0.15);border:1px solid rgba(167,139,250,0.3); border-radius:20px;padding:0.25rem 0.7rem; font-size:0.68rem;color:var(--logo);font-weight:600; margin-left:0.5rem; } .tools-col.tools-hidden{opacity:0;pointer-events:none} /* ── PANEL NUEVA: split layout ─────────────────────────── */ .nueva-split{display:flex;flex:1;min-height:0;overflow:hidden} .nueva-form-col{ width:300px;flex-shrink:0; padding:1rem 1rem 1rem 1.25rem; overflow-y:auto;border-right:1px solid rgba(255,255,255,0.07); transition:width 0.25s ease, padding 0.25s ease, opacity 0.2s ease; } .nueva-form-col.hidden{width:0;padding:0;opacity:0;overflow:hidden;border:none} .nueva-chart-col{ flex:1;display:flex;flex-direction:column; align-items:center;justify-content:center; min-width:0;padding:0.8rem;overflow:hidden; } #previewChart{ width:min(calc(100% - 0px), min(100%,calc(100vh - 120px))); height:min(calc(100% - 0px), min(100%,calc(100vh - 120px))); max-width:100%;max-height:100%; aspect-ratio:1;display:block; } /* ── PANEL VER: scroll layout ──────────────────────────── */ /* ver panel: wheel centred, info scrollable below */ .ver-wheel-wrap{ flex-shrink:0; display:flex;align-items:center;justify-content:center; padding:1rem 1.5rem 0.5rem 1.5rem; overflow:visible; width:100%;box-sizing:border-box; } #savedChart,#rsFullChart{ display:block;cursor:default; aspect-ratio:1;flex-shrink:0; } .ver-scroll{ flex:0 0 auto;overflow:visible; display:flex;flex-direction:column;align-items:center; padding:0.8rem 1.5rem 2rem;gap:1.2rem; } .ver-summary{ width:100%;max-width:700px; display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start;justify-content:center; } .ver-tables{ width:100%;max-width:700px; display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start; } .ver-table-col{flex:1;min-width:200px} /* Element donut chart */ .elem-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:0.5rem} .elem-donut-label{font-size:0.7rem;color:var(--muted);text-align:center;font-weight:600;text-transform:uppercase;letter-spacing:0.07em} /* Key signs summary */ .ver-signs-box{ flex:1;min-width:180px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08); border-radius:10px;padding:0.9rem 1rem; } .ver-sign-row{display:flex;align-items:center;gap:0.6rem;padding:0.35rem 0;border-bottom:1px solid rgba(255,255,255,0.05)} .ver-sign-row:last-child{border-bottom:none} .ver-sign-label{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;width:64px;flex-shrink:0} .ver-sign-value{font-size:0.85rem;font-weight:600} /* Saved cards element colors */ .saved-card{cursor:pointer;border-radius:9px;padding:0.7rem 0.9rem;border:1px solid rgba(255,255,255,0.08); transition:all 0.15s ease;margin-bottom:0.5rem;background:rgba(30,30,32,0.8)} .saved-card:hover{border-color:rgba(255,255,255,0.2);background:rgba(50,50,55,0.9)} .saved-card.elem-fire{border-left:3px solid #d95555} .saved-card.elem-earth{border-left:3px solid #5a9e6a} .saved-card.elem-air{border-left:3px solid #c87090} .saved-card.elem-water{border-left:3px solid #4d80cc} .sc-name{font-size:0.88rem;font-weight:700;color:var(--white);margin-bottom:0.3rem} .sc-info{font-size:0.72rem;color:var(--muted);margin-bottom:0.25rem} .sc-signs{font-size:0.7rem;color:var(--dim);margin-top:0.3rem;display:flex;gap:0.5rem;flex-wrap:wrap} .sc-sign-badge{display:inline-flex;align-items:center;gap:0.2rem;padding:0.1rem 0.4rem; border-radius:12px;font-size:0.65rem;font-weight:600;background:rgba(255,255,255,0.06)} /* ── RELOCACION LAYOUT ───────────────────────────────────── */ .reloc-top-row{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; } .reloc-chart-cell{ flex-shrink:0; width:min(380px, 50%); } .reloc-table-cell{ flex:1; min-width:160px; overflow-y:auto; max-height:390px; } .reloc-map-row{ width:100%; } #relocWorldMap svg{ display:block; width:100%; height:auto; } @media(max-width:600px){ .reloc-top-row{flex-wrap:wrap;} .reloc-chart-cell{width:100%;} } #rsFullWheelWrap{ flex:1; min-height:300px; overflow:hidden; } /* Ver panel action buttons */ .ver-action-btn{ display:inline-flex;align-items:center;gap:0.4rem; padding:0.45rem 0.9rem;border-radius:20px;font-size:0.76rem; font-family:var(--font);font-weight:500;cursor:pointer; background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12); color:var(--muted);transition:all var(--ease); } .ver-action-btn:hover{background:rgba(255,255,255,0.12);color:var(--white);border-color:rgba(255,255,255,0.25);} .ver-action-active,.ver-action-active:hover{background:rgba(188,153,255,0.18);border-color:rgba(188,153,255,0.45);color:var(--logo);} /* RS Full panel: flex layout so wheel fills space */ #panel-rs-full{ overflow:hidden; } #panel-rs-full .ver-scroll{ flex:1; overflow-y:auto; min-height:0; } #panel-rs-full #rsFullWheelWrap{ flex:0 0 auto; height:min(calc(100vw - 370px), calc(100vh - 160px)); min-height:300px; max-height:70vh; } /* panel-ver transit mode */ #panel-ver{ position:relative; } /* ── HOROSCOPE MODE ───────────────────────────────────── */ .horo-corner{position:absolute;top:0.5rem;right:0.5rem;z-index:10;display:flex;align-items:center;gap:0.6rem;background:rgba(20,20,22,0.88);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:0.3rem 0.7rem 0.3rem 0.55rem;backdrop-filter:blur(10px);box-shadow:0 2px 12px rgba(0,0,0,0.4);} .horo-label{font-size:0.7rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;user-select:none;transition:color var(--ease);} .horo-label:hover{color:var(--white)} .horo-track{display:inline-flex;align-items:center;width:44px;height:26px;border-radius:13px;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.2);padding:2px;transition:background 0.28s ease,border-color 0.28s ease;cursor:pointer;} .horo-track.horo-on{background:rgba(167,139,250,0.9);border-color:rgba(167,139,250,0.6);} .horo-thumb{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.35);transition:transform 0.25s cubic-bezier(.4,0,.2,1);display:block;} .horo-track.horo-on .horo-thumb{transform:translateX(18px);} .horo-sign-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:5px;padding:0.12rem 0.45rem;font-size:1.2rem;font-weight:700;color:var(--white);cursor:pointer;transition:all var(--ease);line-height:1;} .horo-sign-btn:hover{background:rgba(167,139,250,0.25);border-color:rgba(167,139,250,0.4);} /* ── PANEL DERECHO (Eneagrama / Notas) ─────────────────────── */ .right-panel-host { display: flex !important; flex-direction: row !important; overflow: hidden !important; } .right-panel-main { flex: 1; overflow-y: auto; min-width: 0; height: 100%; } .right-panel-content { width: 360px; min-width: 320px; max-width: 400px; height: 100%; flex-shrink: 0; overflow-y: auto; border-left: 1px solid rgba(255,255,255,0.1); transition: width 0.25s ease; display: flex; flex-direction: column; } /* Ennea highlight when sidebar is open */ .ennea-open { background: rgba(255,255,255,0.08) !important; border-radius: 8px; box-shadow: 0 0 0 1px rgba(188,153,255,0.35); transition: background 0.2s ease; } /* ═══════════════════════════════════════════════════════════════ Astrolab MVP: módulos pendientes de implementar / addons futuros. Se mantienen en el HTML para reactivarlos sin tocar markup — solo hay que quitar estas reglas (o sobrescribir display:revert). ═══════════════════════════════════════════════════════════════ */ #nav-fechas, #nav-anual, #nav-progresiones, #panel-fechas, #panel-anual, #panel-progresiones, #panel-rev-lunar { display: none !important; } /* Gating dinámico de módulos por nivel: El shortcode [astrolab] inyecta `.astrolab-host.astrolab-level-`. Las reglas siguientes ocultan nav-items que requieren un nivel superior. */ /* v0.7.3 — Gating reasignado: Free tiene nueva/guardadas/ver/retorno/ajustes. Astrolab añade vincular, relocacion, cita-nueva, calendario, lunar, notas. AstroDesigner añade rs-full, astrobranding, espacios. */ /* Visitor: solo home, registro/login overlay */ .astrolab-host.astrolab-level-visitor #nav-nueva, .astrolab-host.astrolab-level-visitor #nav-guardadas, .astrolab-host.astrolab-level-visitor #nav-vincular, .astrolab-host.astrolab-level-visitor #nav-astrobranding, .astrolab-host.astrolab-level-visitor #nav-espacios, .astrolab-host.astrolab-level-visitor #nav-lunar, .astrolab-host.astrolab-level-visitor #nav-cita-nueva, .astrolab-host.astrolab-level-visitor #nav-calendario, .astrolab-host.astrolab-level-visitor #nav-retorno, .astrolab-host.astrolab-level-visitor #nav-relocacion, .astrolab-host.astrolab-level-visitor #nav-rs-full, .astrolab-host.astrolab-level-visitor #nav-notas-global, .astrolab-host.astrolab-level-visitor #nav-ajustes { display: none !important; } /* Free: bloquea módulos de Astrolab+ (vincular/relocacion/cita-nueva/ calendario/lunar/notas) y AstroDesigner+ (astrobranding/espacios/rs-full). */ .astrolab-host.astrolab-level-free #nav-vincular, .astrolab-host.astrolab-level-free #nav-relocacion, .astrolab-host.astrolab-level-free #nav-cita-nueva, .astrolab-host.astrolab-level-free #nav-calendario, .astrolab-host.astrolab-level-free #nav-lunar, .astrolab-host.astrolab-level-free #nav-notas-global, .astrolab-host.astrolab-level-free #nav-rs-full, .astrolab-host.astrolab-level-free #nav-astrobranding, .astrolab-host.astrolab-level-free #nav-espacios { display: none !important; } /* Astrolab: bloquea módulos exclusivos AstroDesigner */ .astrolab-host.astrolab-level-astrolab #nav-rs-full, .astrolab-host.astrolab-level-astrolab #nav-astrobranding, .astrolab-host.astrolab-level-astrolab #nav-espacios { display: none !important; } /* v0.7.1 — Notas en cartas: ocultar también el botón "Notas" de la barra de acciones de panel-ver y el campo "Notas" del formulario de carta (panel-nueva) para visitor/free. La feature completa pertenece al plan Astrolab+. */ .astrolab-host.astrolab-level-visitor #verBtnNotas, .astrolab-host.astrolab-level-free #verBtnNotas { display: none !important; } /* El form usa .fg como wrapper de cada campo. Targeting via :has() para ocultar el wrapper entero (label + textarea). Fallback: ocultar solo el textarea si el navegador no soporta :has(). */ .astrolab-host.astrolab-level-visitor .fg:has(#formNotes), .astrolab-host.astrolab-level-free .fg:has(#formNotes) { display: none !important; } .astrolab-host.astrolab-level-visitor #formNotes, .astrolab-host.astrolab-level-free #formNotes { display: none !important; } /* ═══════════════════════════════════════════════════════════════ MODO EMBEBIDO — shortcode [astrolab] dentro de página WP. Conserva header / nav / footer del tema. Scope de estilos a .astrolab-host. ═══════════════════════════════════════════════════════════════ */ .astrolab-host { --astrolab-header-offset: 80px; position: relative; width: 100%; height: calc(100vh - var(--astrolab-header-offset)); min-height: 600px; overflow: hidden; background: #0e0e0e; color: #fff; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; margin: 0; box-sizing: border-box; } /* Si el shortcode usa height fijo: [astrolab height="700"] */ .astrolab-host[style*="--astrolab-fixed-height"] { height: var(--astrolab-fixed-height) !important; } /* Scope los estilos globales `html,body` que ya no aplican a la página entera */ .astrolab-host .app { height: 100% !important; width: 100%; } /* bg-camo debe quedarse dentro del contenedor, no en viewport */ .astrolab-host .bg-camo { position: absolute !important; inset: 0 !important; } /* Los `position:fixed` de las herramientas y modales se quedan tal cual (siguen sirviendo dentro del viewport del navegador) pero asegurando z-index correcto sobre el header del tema en caso de overlay. */ /* Botón hamburger — visible solo en móvil */ .astrolab-mobile-toggle { display: none; position: absolute; top: 12px; left: 12px; z-index: 60; width: 40px; height: 40px; background: rgba(167, 139, 250, 0.18); border: 1px solid rgba(167, 139, 250, 0.4); border-radius: 8px; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; font-family: inherit; transition: background 0.15s; } .astrolab-mobile-toggle:hover { background: rgba(167, 139, 250, 0.32); } /* ─── MOBILE BREAKPOINT ──────────────────────────────────────── */ @media (max-width: 768px) { .astrolab-host { height: calc(100vh - var(--astrolab-header-offset)); } .astrolab-mobile-toggle { display: flex; align-items: center; justify-content: center; } .astrolab-host .sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: 50; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5); } .astrolab-host.sidebar-open .sidebar { transform: translateX(0); } /* Overlay semitransparente cuando el sidebar está abierto */ .astrolab-host.sidebar-open::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 40; pointer-events: none; } .astrolab-host .main-area { width: 100%; } /* Tools col (columna de herramientas a la derecha) — en móvil, abajo */ .astrolab-host .tools-col { right: auto !important; left: 50% !important; bottom: 12px !important; top: auto !important; transform: translateX(-50%); flex-direction: row; width: auto !important; height: 50px; padding: 0 12px !important; gap: 8px; background: rgba(20, 20, 24, 0.85); border-radius: 12px; backdrop-filter: blur(6px); } .astrolab-host .tools-gap { width: 1px; height: 24px; margin: 0; } /* Panel header bar tiene espacio para el botón hamburger */ .astrolab-host .panel { padding-top: 56px; } } /* ─── DESKTOP — botón hamburger oculto, sidebar siempre visible ─ */ @media (min-width: 769px) { .astrolab-mobile-toggle { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ v0.3.1 — Correcciones de integración con tema: - Breakout del max-width del tema (full viewport). - Override de estilos de button/input del tema (sin rectángulos). - Respeta el admin bar de WP (32px desktop / 46px mobile). ═══════════════════════════════════════════════════════════════ */ /* Breakout: hace que .astrolab-host ocupe 100vw aunque esté dentro de un contenedor con max-width del tema. Truco estándar de CSS. */ .astrolab-host { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; left: 0; right: 0; } /* Si el theme content tiene padding/margin, también lo neutralizamos */ .astrolab-host { padding: 0 !important; } /* Admin bar (32px desktop, 46px mobile) */ body.admin-bar .astrolab-host { height: calc(100vh - var(--astrolab-header-offset, 80px) - 32px); } @media (max-width: 782px) { body.admin-bar .astrolab-host { height: calc(100vh - var(--astrolab-header-offset, 80px) - 46px); } } /* ─── Overrides de tema: nav-items sin rectángulos del tema ───── */ .astrolab-host button, .astrolab-host .nav-item, .astrolab-host .tool-btn, .astrolab-host .close-panel, .astrolab-host .btn-ghost, .astrolab-host .btn-accent { -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; text-decoration: none !important; letter-spacing: normal !important; text-transform: none !important; font-family: 'DM Sans', system-ui, sans-serif !important; outline: none; } /* nav-item: mantén el estilo original (transparent + radius). Anula border del tema. */ .astrolab-host .nav-item { background: transparent !important; border: none !important; border-radius: var(--rad, 8px) !important; color: var(--white, #fff) !important; padding: 0.48rem 0.85rem !important; font-size: 0.83rem !important; font-weight: 500 !important; text-align: left !important; white-space: nowrap !important; cursor: pointer !important; transition: background 0.17s ease !important; } .astrolab-host .nav-item:hover { background: var(--item-hover, rgba(255, 255, 255, 0.09)) !important; } .astrolab-host .nav-item.active { background: var(--item-active, rgba(255, 255, 255, 0.13)) !important; } /* Search input: anula estilos del tema */ .astrolab-host .search-input { background: rgba(167, 139, 250, 0.11) !important; border: 1.5px solid var(--purple, #a78bfa) !important; border-radius: 20px !important; color: var(--white, #fff) !important; font-family: 'DM Sans', system-ui, sans-serif !important; } /* Inputs/select/textarea generales dentro de la app */ .astrolab-host input, .astrolab-host select, .astrolab-host textarea { font-family: inherit !important; color: var(--white, #fff); } /* Tool buttons (columna derecha) */ .astrolab-host .tool-btn { background: rgba(20, 20, 24, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; color: var(--white, #fff) !important; } .astrolab-host .tool-btn:hover { background: rgba(76, 76, 76, 0.92) !important; border-color: rgba(255, 255, 255, 0.24) !important; } /* close-panel y btn-* del original */ .astrolab-host .close-panel { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: var(--muted, #aaa) !important; } /* ═══════════════════════════════════════════════════════════════ v0.3.1 — Fix de scroll vertical en paneles (relocación, RS-full, etc.) La regla `min-height: 0` en flex children es clave para que el contenedor pueda restringir su tamaño y el panel active overflow-y. ═══════════════════════════════════════════════════════════════ */ .astrolab-host .main-area { flex: 1 1 0% !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; min-width: 0 !important; overflow: hidden !important; position: relative; } .astrolab-host .panel { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Sidebar también necesita scroll propio si su contenido excede */ .astrolab-host .sidebar { min-height: 0 !important; overflow-y: auto !important; } /* ═══════════════════════════════════════════════════════════════ v0.3.2 — Fixes integración tema (Havan/Lalita) + UX ═══════════════════════════════════════════════════════════════ */ /* === Tema Havan/Lalita: ocultar adornos que cortan/molestan === */ body.page-template-default .havan-border-holders-l, body.page-template-default .havan-border-holders-r, body.page-template-default .lalita-back-to-top, body.astrolab-page .havan-border-holders-l, body.astrolab-page .havan-border-holders-r, body.astrolab-page .lalita-back-to-top, body.astrolab-page .site-footer, body.astrolab-page #site-footer { display: none !important; } /* Pegar header al borde superior, sin sombras / espacios añadidos por el tema */ body.astrolab-page { overflow-x: hidden; } /* === Sidebar: quitar logo (redundante con header del sitio) === */ .astrolab-host .logo { display: none !important; } /* === Search: lupa solapada con texto del placeholder === */ .astrolab-host .search-wrap { margin-top: 0.9rem !important; } .astrolab-host .search-input { padding-left: 2.4rem !important; } .astrolab-host .search-ico { left: 0.85rem !important; } /* === Tool buttons (columna derecha): forzar svg visible + redondez === */ .astrolab-host .tools-col { right: 8px !important; z-index: 50; } .astrolab-host .tool-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(20, 20, 24, 0.65) !important; backdrop-filter: blur(8px); color: #fff !important; } .astrolab-host .tool-btn svg { width: 16px !important; height: 16px !important; display: block !important; color: #fff !important; stroke: currentColor; fill: none; overflow: visible !important; } .astrolab-host .tool-btn svg * { color: inherit; } /* === Time buttons (tbtn) bajo el gráfico === */ .astrolab-host .tbtn { min-width: 56px !important; min-height: 56px !important; border-radius: 50% !important; padding: 0.4rem !important; gap: 2px !important; background: rgba(46, 46, 46, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; } .astrolab-host .tbtn:hover, .astrolab-host .tbtn:active { background: rgba(80, 80, 80, 0.92) !important; } .astrolab-host .tbtn span { font-size: 1rem !important; letter-spacing: 0.03em !important; line-height: 1 !important; font-weight: 600; } .astrolab-host .tbtn svg { width: 14px !important; height: 12px !important; } .astrolab-host .tbtn-now { min-width: 72px !important; font-size: 1rem !important; font-weight: 700 !important; background: rgba(167, 139, 250, 0.18) !important; border-color: rgba(167, 139, 250, 0.4) !important; } .astrolab-host .tbtn-now:hover { background: rgba(167, 139, 250, 0.32) !important; } /* Asegurar que la fila de tbtn está cerca del gráfico y respira por abajo */ .astrolab-host #panel-home { padding-bottom: 1.2rem !important; } /* === RS panel scroll: forzar scroll-to-top en cambio === */ .astrolab-host #panel-relocacion, .astrolab-host #panel-rs-full, .astrolab-host #panel-retorno { scroll-padding-top: 0; } /* ═══════════════════════════════════════════════════════════════ MOBILE — nueva barra superior gris + dates abajo + chart centrado ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Drawer del sidebar: fondo SÓLIDO (antes transparente y se veía mal) */ .astrolab-host .sidebar { background: #16161f !important; backdrop-filter: blur(20px); } /* Barra superior gris que contiene hamburger + horoscope toggle */ .astrolab-host #panel-home { padding-top: 64px !important; position: relative; } .astrolab-host #panel-home::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52px; background: rgba(28, 28, 32, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); z-index: 30; } /* Hamburger ya está top:12 left:12, súbelo dentro del bar */ .astrolab-mobile-toggle { top: 6px !important; left: 8px !important; z-index: 40 !important; background: rgba(167, 139, 250, 0.22) !important; } /* "Modo Horóscopo" en la barra superior derecha */ .astrolab-host .horo-toggle, .astrolab-host .horoscope-toggle-wrap, .astrolab-host #panel-home > div:first-of-type { position: absolute !important; top: 6px !important; right: 10px !important; z-index: 40 !important; font-size: 0.7rem !important; max-width: 60%; } /* Date selector / fecha-display debajo de la barra */ .astrolab-host .fecha-display { margin-top: 0 !important; padding: 0.4rem 0.8rem !important; font-size: 0.7rem !important; } /* Chart wheel: centrado y respirando */ .astrolab-host .wheel-wrap { justify-content: center !important; align-items: center !important; padding: 0.5rem !important; } .astrolab-host .wheel-wrap > svg { max-width: 100% !important; max-height: 70vh !important; height: auto !important; width: auto !important; display: block !important; margin: 0 auto !important; } /* Permitir scroll/zoom natural cuando el dedo está sobre el gráfico */ .astrolab-host .wheel-wrap, .astrolab-host .wheel-wrap svg { touch-action: pan-y pinch-zoom !important; } /* Time buttons row: scroll horizontal con padding */ .astrolab-host .tbtns-row, .astrolab-host [class*="time-controls"] { overflow-x: auto !important; scrollbar-width: none; padding: 0.5rem 0.8rem 1.2rem !important; gap: 0.5rem !important; } /* Tools col: en la barra inferior (ya viene del v0.3.0) — ajustar para que no choque con tbtns */ .astrolab-host .tools-col { bottom: 80px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.3.2 — Notas, RS full title fix + scroll mejoras ═══════════════════════════════════════════════════════════════ */ /* Que el título de panel siempre quede arriba al abrir */ .astrolab-host .panel.active { scroll-behavior: auto; } .astrolab-host .panel-header-bar { position: sticky; top: 0; background: rgba(14, 14, 14, 0.96); z-index: 25; padding: 0.6rem 1rem; } /* ═══════════════════════════════════════════════════════════════ v0.3.3 — UX polish completo ═══════════════════════════════════════════════════════════════ */ /* === Pop-up de mapa (relocación, etc.): z-index sobre header del tema === */ #relocModal, .astrolab-host #relocModal, [id$="Modal"]:not([style*="display:none"]) { z-index: 999999 !important; } #relocModal { padding-top: max(1rem, env(safe-area-inset-top)) !important; } /* Cualquier modal full-overlay debe ir por encima del admin bar de WP también */ body.admin-bar #relocModal { padding-top: calc(32px + 1rem) !important; } /* === App pegada al header del tema (eliminar gaps) === */ body.astrolab-page .entry-content, body.astrolab-page .page-content, body.astrolab-page main, body.astrolab-page #content, body.astrolab-page #primary, body.astrolab-page .site-main, body.astrolab-page .elementor-section-wrap, body.astrolab-page .elementor-section { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* La propia .astrolab-host sin margen */ .astrolab-host { margin-top: 0 !important; margin-bottom: 0 !important; } /* === Fondo camo transparente — que se vea el fondo del tema/sitio === */ .astrolab-host .bg-camo { background: transparent !important; opacity: 0 !important; } .astrolab-host { background: transparent !important; } .astrolab-host .app { background: transparent !important; } /* Sidebar y panels mantienen su fondo opaco para legibilidad */ .astrolab-host .sidebar { background: rgba(20, 20, 26, 0.92) !important; backdrop-filter: blur(12px); } .astrolab-host .panel { background: rgba(14, 14, 16, 0.85); } /* === Eliminar opción "Modo claro" del panel de ajustes === */ .astrolab-host #lightModeToggle, .astrolab-host label:has(#lightModeToggle) { display: none !important; } /* Fallback por si :has no soporta (raro en 2026): ocultar el bloque comentario "Modo claro" */ .astrolab-host #panel-ajustes [data-setting="lightMode"] { display: none !important; } /* === Tool buttons: franja rectangular (no redondos) con divisores === */ .astrolab-host .tools-col { background: rgba(20, 20, 26, 0.85) !important; border-radius: 10px !important; overflow: hidden; padding: 0 !important; gap: 0 !important; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); } .astrolab-host .tool-btn { width: 44px !important; height: 44px !important; border-radius: 0 !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; background: transparent !important; margin: 0 !important; box-shadow: none !important; } .astrolab-host .tool-btn:last-child { border-bottom: none !important; } .astrolab-host .tool-btn:hover { background: rgba(167, 139, 250, 0.14) !important; } .astrolab-host .tool-btn-accent { background: rgba(167, 139, 250, 0.12) !important; } .astrolab-host .tools-gap { display: none !important; } /* === Mobile: layout coherente y botones estandarizados === */ @media (max-width: 768px) { /* Tamaños estandarizados para todos los botones del top bar */ .astrolab-host #panel-home > div:first-of-type input[type="text"], .astrolab-host #panel-home button { height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-size: 0.78rem !important; padding: 0 0.6rem !important; border-radius: 8px !important; } /* El botón "Ir" del datepicker que se ve gigante */ .astrolab-host button[onclick*="goToDate"], .astrolab-host #btnGoToDate { min-width: 44px !important; max-width: 56px !important; padding: 0 0.6rem !important; } /* Tools col en mobile: franja horizontal abajo, rectangular */ .astrolab-host .tools-col { flex-direction: row !important; bottom: 8px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: auto !important; height: auto !important; max-width: calc(100vw - 16px); overflow-x: auto !important; scrollbar-width: none; border-radius: 10px !important; } .astrolab-host .tool-btn { border-bottom: none !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; flex-shrink: 0; } .astrolab-host .tool-btn:last-child { border-right: none !important; } /* Gráfico móvil: 100vw, aspect-ratio 1, centrado, scroll natural en la página */ .astrolab-host .wheel-wrap { width: 100% !important; max-width: 100vw !important; padding: 0.5rem !important; justify-content: center !important; min-height: 0 !important; } .astrolab-host .wheel-wrap > svg { width: 92vw !important; height: 92vw !important; max-width: 100% !important; max-height: 92vw !important; display: block !important; margin: 0 auto !important; } /* Panel home: scroll vertical natural */ .astrolab-host #panel-home { overflow-y: auto !important; overflow-x: hidden !important; } /* Margen inferior para que la tools-col flotante no tape el gráfico */ .astrolab-host #panel-home { padding-bottom: 70px !important; } /* Iconos del cart/menú del tema que se solapan con el toggle: bajamos un poco el contenido del header pero solo en esta página */ body.astrolab-page .top-bar { padding-bottom: 0 !important; } } /* === Desktop: tools-col en lateral derecho como franja vertical === */ @media (min-width: 769px) { .astrolab-host .tools-col { flex-direction: column !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; right: 10px !important; left: auto !important; width: 44px !important; } } /* === Mejorar visibilidad de paneles con título sticky === */ .astrolab-host .panel-header-bar .panel-title { font-size: 1rem; font-weight: 700; color: var(--white); } /* === Reducir lag percibido: animaciones suaves opcionales === */ .astrolab-host * { -webkit-tap-highlight-color: transparent; } /* ═══════════════════════════════════════════════════════════════ v0.3.3 — Permitir scroll de página y mantener footer visible Sobrescribe la regla previa que escondía el footer. ═══════════════════════════════════════════════════════════════ */ /* Mostrar footer del tema en la página de Astrolab */ body.astrolab-page .site-footer, body.astrolab-page #site-footer, body.astrolab-page footer.site-footer, body.astrolab-page .footer-widgets, body.astrolab-page #colophon { display: block !important; position: relative !important; z-index: 1 !important; } /* Permitir scroll vertical en la página */ body.astrolab-page { overflow-y: auto !important; overflow-x: hidden; height: auto !important; min-height: 100vh; } html:has(body.astrolab-page) { overflow-y: auto !important; height: auto !important; } /* La app ocupa exactamente la altura del viewport visible bajo el header, pero NO bloquea el scroll de la página → al hacer scroll aparece el footer. */ .astrolab-host { height: calc(100vh - var(--astrolab-header-offset, 80px)) !important; min-height: 500px; overflow: hidden; position: relative; } /* Si el usuario es admin, descontamos el admin bar */ body.admin-bar .astrolab-host { height: calc(100vh - var(--astrolab-header-offset, 80px) - 32px) !important; } @media (max-width: 782px) { body.admin-bar .astrolab-host { height: calc(100vh - var(--astrolab-header-offset, 80px) - 46px) !important; } } /* ═══════════════════════════════════════════════════════════════ v0.3.3 — Botones de acción uniformes + tools-col anclada al chart ═══════════════════════════════════════════════════════════════ */ /* Botones de acción (Editar, Eliminar, Imprimir, Cerrar, Sinastría, Regalo ideal...) */ .astrolab-host .btn-ghost, .astrolab-host .btn-accent, .astrolab-host #verActionRow button, .astrolab-host #verActionRow .close-panel, .astrolab-host .panel-header-bar .close-panel { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 0.9rem !important; font-size: 0.78rem !important; font-weight: 600 !important; font-family: 'DM Sans', system-ui, sans-serif !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; letter-spacing: 0.01em; white-space: nowrap; line-height: 1 !important; box-sizing: border-box !important; } .astrolab-host .btn-ghost { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: var(--white, #fff) !important; } .astrolab-host .btn-ghost:hover { background: rgba(255, 255, 255, 0.08) !important; } .astrolab-host .btn-accent { background: rgba(167, 139, 250, 0.18) !important; border: 1px solid rgba(167, 139, 250, 0.45) !important; color: #fff !important; } .astrolab-host .btn-accent:hover { background: rgba(167, 139, 250, 0.3) !important; } /* "Eliminar" en rojo cuando aplicable */ .astrolab-host button[onclick*="delete"], .astrolab-host button[onclick*="Eliminar"], .astrolab-host .btn-danger { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fca5a5 !important; } /* === X de cerrar panel derecho (Análisis Eneagrama, etc.): redondo de verdad === */ .astrolab-host .panel-header-bar .close-panel, .astrolab-host .ennea-close, .astrolab-host [class*="close-btn"], .astrolab-host button[title="Cerrar"], .astrolab-host button[aria-label="Cerrar"] { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; font-size: 0.85rem !important; } /* ═══════════════════════════════════════════════════════════════ v0.4.2 — Botones acción uniformes + hover sutil + bg transparente ═══════════════════════════════════════════════════════════════ */ /* Botones panel-ver header: ALL idénticos, beat inline font-size */ .astrolab-host #panel-ver .panel-header-bar button, .astrolab-host #panel-ver .panel-header-bar .btn-ghost, .astrolab-host #panel-ver .panel-header-bar .btn-danger-sm, .astrolab-host #panel-ver .panel-header-bar .close-panel { height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 0.85rem !important; font-size: 0.78rem !important; font-weight: 600 !important; font-family: 'DM Sans', system-ui, sans-serif !important; border-radius: 8px !important; border-width: 1px !important; border-style: solid !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; white-space: nowrap !important; line-height: 1 !important; width: auto !important; min-width: auto !important; } /* Editar / Imprimir → btn-ghost */ .astrolab-host #panel-ver .panel-header-bar .btn-ghost { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #fff !important; } /* Eliminar → rojo */ .astrolab-host #panel-ver .panel-header-bar .btn-danger-sm, .astrolab-host .btn-danger-sm { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.5) !important; color: #fca5a5 !important; } .astrolab-host .btn-danger-sm:hover { background: rgba(239, 68, 68, 0.18) !important; } /* Cerrar con texto → mismo tamaño, NO circular */ .astrolab-host #panel-ver .panel-header-bar .close-panel { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.16) !important; color: #fff !important; border-radius: 8px !important; width: auto !important; max-width: none !important; } /* === Hover sutil en nav-items: SOLO cambio de background, NO scale === */ .astrolab-host .nav-item, .astrolab-host .nav-item:hover, .astrolab-host .nav-item:active, .astrolab-host .nav-item.active { transform: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .astrolab-host .nav-item:hover { background: rgba(167, 139, 250, 0.08) !important; color: var(--logo, #BC99FF) !important; } .astrolab-host .nav-item.active { background: rgba(167, 139, 250, 0.12) !important; color: var(--logo, #BC99FF) !important; } .astrolab-host .nav-item svg, .astrolab-host .nav-item:hover svg { transform: none !important; transition: opacity 0.15s ease !important; } .astrolab-host .nav-item:hover svg { opacity: 1 !important; } /* === Mobile: hamburger SIEMPRE flotante visible, drawer cerrado por defecto === */ @media (max-width: 768px) { .astrolab-mobile-toggle { display: flex !important; position: fixed !important; top: 12px !important; left: 12px !important; z-index: 60 !important; width: 44px !important; height: 44px !important; background: rgba(20, 20, 26, 0.92) !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; border-radius: 50% !important; color: #fff !important; font-size: 20px !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* Sidebar OCULTO por defecto, slide-in al abrir */ .astrolab-host .sidebar { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 85vw !important; z-index: 55 !important; transform: translateX(-105%) !important; transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important; background: rgba(20, 20, 26, 0.98) !important; backdrop-filter: blur(20px); padding-top: 60px; } .astrolab-host.sidebar-open .sidebar { transform: translateX(0) !important; } /* Tools-col en móvil: no encima del sidebar */ .astrolab-host.sidebar-open .tools-col { display: none !important; } } /* === Settings: opciones de fondo "Camo / Negro / Gris" === */ .astrolab-host.bg-camo-mode .bg-camo { opacity: 0 !important; background: transparent !important; } .astrolab-host.bg-camo-mode, .astrolab-host.bg-camo-mode .app, .astrolab-host.bg-camo-mode .panel, .astrolab-host.bg-camo-mode .main-area, .astrolab-host.bg-camo-mode .wheel-wrap { background: transparent !important; } .astrolab-host.bg-negro-mode, .astrolab-host.bg-negro-mode .app, .astrolab-host.bg-negro-mode .panel, .astrolab-host.bg-negro-mode .main-area { background: #000 !important; } .astrolab-host.bg-negro-mode .bg-camo { opacity: 0 !important; } .astrolab-host.bg-gris-mode, .astrolab-host.bg-gris-mode .app, .astrolab-host.bg-gris-mode .panel, .astrolab-host.bg-gris-mode .main-area { background: rgba(0, 0, 0, 0.8) !important; } .astrolab-host.bg-gris-mode .bg-camo { opacity: 0 !important; } /* Sidebar y footer SIEMPRE opacos (independiente del modo de fondo) */ .astrolab-host .sidebar { background: rgba(20, 20, 26, 0.92) !important; } /* === Tools-col anclada al wheel-wrap (no flota sobre side-panels) === */ .astrolab-host .main-area { position: relative !important; } @media (min-width: 769px) { .astrolab-host .tools-col { position: absolute !important; right: 12px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; } /* Cuando se abre un side-panel a la derecha (ennea, info, etc.), tools-col se desplaza hacia la izquierda para no superponerse */ .astrolab-host .main-area:has(.ennea-sidebar) .tools-col, .astrolab-host .main-area:has([class*="side-panel"][style*="display: flex"]) .tools-col, .astrolab-host .main-area:has(aside.side-panel:not([style*="display: none"])) .tools-col { right: 380px !important; } } /* Asegurar que tools-col no se sale por encima del header */ .astrolab-host .tools-col { z-index: 20 !important; } /* ═══════════════════════════════════════════════════════════════ v0.3.4 — Fix botón cerrar cortado + performance ═══════════════════════════════════════════════════════════════ */ /* Panel header bar: garantiza que close-panel siempre visible */ .astrolab-host .panel-header-bar { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; padding: 0.6rem 0.8rem !important; background: rgba(14, 14, 14, 0.98) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .astrolab-host .panel-header-bar > .close-panel, .astrolab-host .panel-header-bar button[onclick*="openPanel('home')"], .astrolab-host .panel-header-bar button[onclick*="closePanel"] { margin-left: auto !important; flex-shrink: 0 !important; white-space: nowrap !important; } /* Filtros del panel guardadas: que no empujen al close fuera */ .astrolab-host #panel-guardadas .panel-header-bar select, .astrolab-host #panel-guardadas .panel-header-bar > * { max-width: 200px; flex-shrink: 1; } /* Performance: usar transform/opacity en lugar de cambios de layout */ .astrolab-host .panel { contain: layout style; will-change: scroll-position; } /* Quitar backdrop-filter caro de elementos que se repintan en scroll */ .astrolab-host .panel-header-bar, .astrolab-host .sidebar { backdrop-filter: none !important; } /* GPU acceleration en sidebar drawer y panels para mejor scroll */ .astrolab-host .sidebar, .astrolab-host .panel { transform: translateZ(0); -webkit-overflow-scrolling: touch; } /* ═══════════════════════════════════════════════════════════════ v0.4.1 — Time controls como barra agrupada + RS scroll + share en ver ═══════════════════════════════════════════════════════════════ */ /* Time controls: barra horizontal agrupada (estilo tools-col) */ .astrolab-host .time-controls { position: relative; z-index: 35 !important; margin: 0 auto 0.4rem !important; /* cerca del gráfico */ padding: 0 !important; background: rgba(20, 20, 26, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; display: inline-flex !important; flex-direction: row !important; gap: 0 !important; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); width: auto !important; max-width: calc(100% - 30px); } .astrolab-host .time-controls > * { display: flex !important; gap: 0 !important; } .astrolab-host .time-controls .tbtn, .astrolab-host .time-controls .tbtn-now { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 56px !important; max-height: 48px !important; border-radius: 0 !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; background: transparent !important; padding: 0 !important; flex-direction: column !important; gap: 2px !important; } .astrolab-host .time-controls .tbtn:last-child, .astrolab-host .time-controls .tbtn-now:last-child { border-right: none !important; } .astrolab-host .time-controls .tbtn-now { background: rgba(167, 139, 250, 0.18) !important; min-width: 64px !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.05em; } .astrolab-host .time-controls .tbtn:hover { background: rgba(167, 139, 250, 0.14) !important; } .astrolab-host .time-controls .tbtn span { font-size: 0.65rem !important; font-weight: 600; letter-spacing: 0.02em; } .astrolab-host .time-controls .tbtn svg { width: 14px !important; height: 10px !important; } /* Isolation footer: levantarlo por encima de time-controls, y bajar opacidad para que no tape — el usuario sigue viéndolo pero los botones de tiempo quedan accesibles */ .astrolab-host .isolation-footer { bottom: 60px !important; left: 50% !important; transform: translateX(-50%); right: auto !important; width: auto !important; max-width: 90%; padding: 0.4rem 0.9rem !important; background: rgba(15, 15, 20, 0.85) !important; border-radius: 10px; font-size: 0.72rem !important; } /* === RS Full panel: scroll-padding-top para que al hacer scroll-to-top en el hook de openPanel quede el contenido del gráfico bien visible === */ .astrolab-host #panel-rs-full, .astrolab-host #panel-relocacion, .astrolab-host #panel-retorno { scroll-padding-top: 0 !important; padding-top: 0 !important; } /* Quitar paddings agresivos heredados — el contenido del panel empieza desde arriba */ .astrolab-host .panel.active { scroll-snap-type: none; } /* Mobile: time-controls scroll horizontal natural */ @media (max-width: 768px) { .astrolab-host .time-controls { max-width: 96vw !important; overflow-x: auto !important; scrollbar-width: none; } .astrolab-host .time-controls::-webkit-scrollbar { display: none; } } /* ═══════════════════════════════════════════════════════════════ v0.4.3 — Panel headers transparentes, gear mobile, sidebar margin, AHORA centrado, tools-col fija lateral, "Horóscopo" mobile, botón Ir altura igual, RS modal append a body ═══════════════════════════════════════════════════════════════ */ /* === Panel headers: transparentes en modo camo === */ .astrolab-host.bg-camo-mode .panel-header-bar { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } .astrolab-host.bg-negro-mode .panel-header-bar { background: rgba(0, 0, 0, 0.8) !important; } .astrolab-host.bg-gris-mode .panel-header-bar { background: rgba(0, 0, 0, 0.6) !important; } /* === Botón AHORA: centrado vertical y horizontal === */ .astrolab-host .tbtn-now, .astrolab-host .time-controls .tbtn-now { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 0 !important; gap: 0 !important; } /* === Sidebar desktop: margen derecho de 20px === */ @media (min-width: 769px) { .astrolab-host .sidebar { padding-right: 20px !important; box-sizing: border-box; } } /* === Botón "Ir" altura = campo de búsqueda fecha === */ .astrolab-host input[type="datetime-local"], .astrolab-host input[type="date"], .astrolab-host input[type="time"], .astrolab-host button[onclick*="goToDate"], .astrolab-host #btnGoToDate, .astrolab-host .ir-fecha-btn { height: 38px !important; min-height: 38px !important; max-height: 38px !important; box-sizing: border-box !important; padding: 0 0.7rem !important; font-size: 0.78rem !important; display: inline-flex !important; align-items: center !important; } /* ═══ MOBILE ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Hamburger (gear) dentro del frame de la app, NO fuera */ .astrolab-mobile-toggle { position: absolute !important; top: 10px !important; left: 10px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; z-index: 60 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(20, 20, 26, 0.85) !important; border: 1px solid rgba(167, 139, 250, 0.4) !important; color: #fff !important; font-size: 0 !important; /* oculta el ☰ original */ } /* Sustituimos el contenido por un icono de "ajustes" (engranaje) vía pseudo */ .astrolab-mobile-toggle::before { content: ''; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Quitar la barra superior translúcida que tapaba la fecha */ .astrolab-host #panel-home::before { display: none !important; } .astrolab-host #panel-home { padding-top: 56px !important; /* solo el espacio del gear, sin overlay */ } .astrolab-host .astrolab-topbar { display: none !important; /* el DOM topbar que añadí también fuera */ } /* Tools-col en mobile: vertical fijo a la derecha, dentro del frame */ .astrolab-host .tools-col { position: absolute !important; right: 6px !important; top: 60px !important; bottom: 60px !important; left: auto !important; transform: none !important; flex-direction: column !important; width: 40px !important; max-width: 40px !important; height: auto !important; max-height: calc(100% - 120px); overflow-y: auto !important; overflow-x: hidden !important; gap: 0 !important; scrollbar-width: none; } .astrolab-host .tools-col::-webkit-scrollbar { display: none; } .astrolab-host .tools-col .tool-btn { width: 38px !important; height: 38px !important; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; flex-shrink: 0; } .astrolab-host .tools-col .tool-btn:last-child { border-bottom: none !important; } /* v0.5.11: en mobile mostramos "Horóscopo" (sin "Modo") vía ::after. Desktop mantiene el texto original "Modo Horóscopo" del HTML. */ .astrolab-host .horo-label { font-size: 0 !important; } .astrolab-host .horo-label::after { content: 'Horóscopo' !important; font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.04em; } /* Asegurar que la fecha NO queda tapada (volver a posición natural) */ .astrolab-host .fecha-display { position: relative !important; top: auto !important; padding: 0.5rem 0.8rem !important; text-align: center; } } /* === RelocModal: forzar position fixed que ignore overflow:hidden del padre === */ #relocModal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important; } body.admin-bar #relocModal { top: 32px !important; } @media (max-width: 782px) { body.admin-bar #relocModal { top: 46px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.4.4 — Centrado bajo gráfico, sidebar x1.5, formularios x1.5, cerrar X cuadrado, mobile layout fix, tools-col gear visible ═══════════════════════════════════════════════════════════════ */ /* === Gear icon container: que el SVG sea visible (sin texto ☰ que ocultamos) === */ .astrolab-mobile-toggle { font-size: 0 !important; } .astrolab-mobile-toggle svg { display: block !important; width: 20px !important; height: 20px !important; } /* === Centrar todo lo que aparece bajo el gráfico === */ .astrolab-host #verActionRow, .astrolab-host .ver-summary, .astrolab-host .ver-tables, .astrolab-host .time-controls, .astrolab-host .ver-scroll > * { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } .astrolab-host .ver-scroll { align-items: center !important; } /* === Sidebar (main menu): quitar línea entre search y primer nav-item === */ .astrolab-host .search-wrap { border-bottom: none !important; margin-bottom: 0.8rem !important; padding-bottom: 0 !important; } .astrolab-host .sidebar > .search-wrap + .nav-menu { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; } /* === Desktop: sidebar +20px padding-left, items + iconos x1.5 === */ @media (min-width: 769px) { .astrolab-host .sidebar { padding-left: 20px !important; padding-right: 20px !important; --sw: 320px; } .astrolab-host { --sw: 320px; } .astrolab-host .nav-item { font-size: 1.05rem !important; /* ~1.5x del 0.7rem original */ padding: 0.7rem 0.95rem !important; gap: 0.85rem !important; } .astrolab-host .nav-item svg { width: 22px !important; height: 22px !important; } .astrolab-host .search-input { font-size: 0.95rem !important; padding: 0.6rem 0.85rem 0.6rem 2.6rem !important; } .astrolab-host .search-ico { width: 18px !important; height: 18px !important; left: 1rem !important; } .astrolab-host .nav-section-label { font-size: 0.78rem !important; padding: 0.7rem 1rem 0.3rem !important; } } /* === Formularios: textos x1.5, desplegables altura igual a inputs === */ .astrolab-host .fg label, .astrolab-host .fl { font-size: 0.95rem !important; margin-bottom: 0.3rem; display: block; } .astrolab-host .fi, .astrolab-host .fta, .astrolab-host select.fi, .astrolab-host input[type="text"].fi, .astrolab-host input[type="number"].fi, .astrolab-host input[type="date"].fi, .astrolab-host input[type="time"].fi, .astrolab-host input[type="datetime-local"].fi { font-size: 1rem !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; padding: 0 0.85rem !important; line-height: 1 !important; } .astrolab-host .fta { height: auto !important; min-height: 88px !important; padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; } .astrolab-host select.fi { font-size: 0.95rem !important; /* desplegables texto SIN ampliar pero altura igual */ } .astrolab-host .form-info, .astrolab-host .form-help, .astrolab-host small, .astrolab-host .fhint { font-size: 0.9rem !important; } /* === Botones CERRAR uniformes: cuadrado con aspa, sin texto === */ .astrolab-host .close-panel, .astrolab-host button[onclick*="closePanel"], .astrolab-host .panel-header-bar button[onclick*="openPanel('guardadas')"], .astrolab-host .panel-header-bar button[onclick*="openPanel('home')"], .astrolab-host .panel-header-bar button[onclick*="openPanel('relocacion')"] { width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; padding: 0 !important; border-radius: 8px !important; font-size: 0 !important; /* oculta "Cerrar" texto */ background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .astrolab-host .close-panel::before, .astrolab-host button[onclick*="closePanel"]::before, .astrolab-host .panel-header-bar button[onclick*="openPanel('guardadas')"]::before, .astrolab-host .panel-header-bar button[onclick*="openPanel('home')"]::before, .astrolab-host .panel-header-bar button[onclick*="openPanel('relocacion')"]::before { content: '×'; font-size: 1.4rem !important; line-height: 1; font-weight: 400; color: #fff; } /* ═══ MOBILE ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Gear icon: asegurar visible y dentro del frame */ .astrolab-mobile-toggle { position: absolute !important; top: 10px !important; left: 10px !important; width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(20, 20, 26, 0.92) !important; border: 1px solid rgba(167, 139, 250, 0.5) !important; border-radius: 50% !important; z-index: 70 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .astrolab-mobile-toggle svg { width: 22px !important; height: 22px !important; color: #fff !important; } /* Bloque "Ir a fecha" reposicionado: debajo del gráfico y los controles temporales */ .astrolab-host #panel-home.active { display: flex !important; flex-direction: column !important; align-items: center !important; } .astrolab-host .fecha-display + div, .astrolab-host #goToDateRow, .astrolab-host .ir-fecha-wrap { order: 99; /* al final del flex */ margin-top: 1rem; } /* Tools-col NO debe solapar con controles temporales en mobile */ .astrolab-host .tools-col { position: absolute !important; right: 4px !important; top: 60px !important; bottom: 130px !important; /* deja espacio para tbtns abajo */ left: auto !important; flex-direction: column !important; width: 38px !important; max-width: 38px !important; max-height: calc(100% - 200px); } /* Time-controls (tbtns) centrados, sin tapar tools-col */ .astrolab-host .time-controls { margin-right: 50px !important; /* deja espacio para tools-col */ margin-left: auto !important; justify-content: center; } /* Eliminar botones de zoom en mobile (usuario hace pinch) */ .astrolab-host .tool-btn[onclick*="zoomIn"], .astrolab-host .tool-btn[onclick*="zoomOut"], .astrolab-host .tool-btn[onclick*="resetZoom"], .astrolab-host .tool-btn[title*="Zoom"], .astrolab-host .tool-btn[title*="1:1"] { display: none !important; } /* Formularios: en mobile mantén x1.5 pero limita altura para no ocupar todo */ .astrolab-host .fg label, .astrolab-host .fl { font-size: 0.95rem !important; } /* Sidebar mobile: items normales (no x1.5, ya queda apretado) */ .astrolab-host .nav-item { font-size: 0.95rem !important; padding: 0.55rem 0.85rem !important; } .astrolab-host .nav-item svg { width: 18px !important; height: 18px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.4.4 — Sidebar esquina top-right redondeada + footer 2 líneas + 30px ═══════════════════════════════════════════════════════════════ */ .astrolab-host .sidebar { border-top-right-radius: 16px; overflow-y: auto; overflow-x: hidden; } .astrolab-host .sidebar-footer { padding-bottom: 30px !important; margin-top: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); line-height: 1.4; } .astrolab-host .sidebar-footer > div { display: block; } /* === Time controls en TRÁNSITOS: misma franja rectangular que tools-col === IMPORTANTE: NO forzar display:flex aquí, porque astro.js lo controla con style="display:none" por defecto y lo cambia cuando activa el modo tránsitos. Estilamos solo cuando astro.js le pone display !== none. */ .astrolab-host #verTransitControls[style*="display: flex"], .astrolab-host #verTransitControls:not([style*="display: none"]):not([style*="display:none"]) > div { flex-direction: row !important; background: rgba(20, 20, 26, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; overflow: hidden; gap: 0 !important; padding: 0 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); margin: 0 auto; width: auto !important; display: inline-flex !important; } .astrolab-host #verTransitControls > div { grid-template-columns: none !important; } .astrolab-host #verTransitControls .tbtn, .astrolab-host #verTransitControls .tbtn-now, .astrolab-host #verTransitControls button { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 56px !important; border-radius: 0 !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; } .astrolab-host #verTransitControls .tbtn:last-child, .astrolab-host #verTransitControls .tbtn-now:last-child, .astrolab-host #verTransitControls button:last-child { border-right: none !important; } .astrolab-host #verTransitControls .tbtn:hover, .astrolab-host #verTransitControls button:hover { background: rgba(167, 139, 250, 0.14) !important; } .astrolab-host #verTransitControls .tbtn-now { background: rgba(167, 139, 250, 0.18) !important; min-width: 64px !important; font-weight: 700 !important; } /* === Selector de fecha tránsitos: posicionado debajo del header, encima del gráfico === */ .astrolab-host #verTransitDateCorner { position: relative !important; top: auto !important; left: auto !important; margin: 0 auto !important; padding: 0.6rem 1rem !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(20, 20, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; max-width: 90%; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; z-index: auto !important; } /* Y los time controls debajo del gráfico (al final de ver-scroll) */ .astrolab-host #verTransitControls { margin-top: 0.6rem !important; } /* === Signos clave: estilo del bloque restructurado === */ .astrolab-host .signo-clave-block { transition: transform 0.15s ease; } .astrolab-host .signo-clave-block:hover { transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════════ v0.5.1 — Fixes acumulados feedback ═══════════════════════════════════════════════════════════════ */ /* === Close button: SOLO una X (font-size:0 con specificity alta) === */ .astrolab-host #panel-ver .panel-header-bar .close-panel, .astrolab-host #panel-ver .panel-header-bar button[onclick*="openPanel"], .astrolab-host .panel-header-bar .close-panel, .astrolab-host .close-panel, body.astrolab-page .astrolab-host .close-panel { font-size: 0 !important; text-indent: -9999px; overflow: hidden; color: transparent !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; position: relative !important; } .astrolab-host #panel-ver .panel-header-bar .close-panel::before, .astrolab-host .panel-header-bar .close-panel::before, .astrolab-host .close-panel::before { content: '×' !important; font-size: 1.4rem !important; line-height: 1 !important; color: #fff !important; text-indent: 0 !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; font-weight: 400 !important; } /* === Texto planetas tránsitos: más separación del símbolo === */ /* (el cambio real ya está en astro.js: r+gs/2+12. Si solapa, lo aumentamos en JS) */ /* === Ocultar "Regalo ideal" === */ .astrolab-host #verBtnRegalo { display: none !important; } /* === Time controls (.tbtn): SVGs y textos uniformes === */ .astrolab-host .tbtn, .astrolab-host .time-controls .tbtn { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; } .astrolab-host .tbtn svg, .astrolab-host .time-controls .tbtn svg { width: 14px !important; height: 10px !important; display: block !important; } .astrolab-host .tbtn span, .astrolab-host .time-controls .tbtn span { font-size: 0.49rem !important; /* 0.65 * 0.75 = 0.49 */ font-weight: 600; line-height: 1; } /* === Tools-col anclada y NO solapando paneles laterales === */ .astrolab-host .main-area { position: relative !important; } @media (min-width: 769px) { /* Cuando un side-panel ennea/info se abre a la derecha, mover tools-col a la izquierda */ .astrolab-host .main-area aside.side-panel ~ .tools-col, .astrolab-host .main-area .ennea-sidebar ~ .tools-col { right: auto !important; left: 12px !important; } } /* === RegaloAI / verBtnRegalo: hide its result block too === */ .astrolab-host #verBtnRegalo, .astrolab-host button#verBtnRegalo, .astrolab-host .ver-action-btn#verBtnRegalo, .astrolab-host #regalAIBtn, .astrolab-host #regalAIResult { display: none !important; visibility: hidden !important; } /* ═══════════════════════════════════════════════════════════════ v0.5.2 — Línea Buscar/Carta, Mobile icon lineal, time controls bajo gráfico, date después de tbtns ═══════════════════════════════════════════════════════════════ */ /* === Línea entre Buscar carta y nav-menu: ELIMINADA del todo === */ .astrolab-host .search-wrap { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0.6rem !important; } .astrolab-host .sidebar .search-wrap + .nav-menu { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; } .astrolab-host .sidebar > * + .nav-menu { border-top: none !important; } /* === Mobile: icono más abajo (no en top:10), tamaño linear === */ @media (max-width: 768px) { .astrolab-mobile-toggle { top: 56px !important; /* debajo de fecha/hora del top */ left: 12px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; } .astrolab-mobile-toggle svg { width: 22px !important; height: 22px !important; /* v0.5.8: ya NO forzamos stroke/fill aquí — la regla global más abajo garantiza fill:#fff y stroke:none para el icono tools-61. */ } /* Time controls (.time-controls) y verTransitDateCorner: DEBAJO del gráfico */ .astrolab-host .wheel-wrap { order: 1; } .astrolab-host .time-controls { order: 2 !important; margin: 0.5rem auto !important; display: flex !important; justify-content: center !important; } /* El campo "Ir a fecha y hora" justo debajo de time-controls, centrado */ .astrolab-host #panel-home > .ir-fecha, .astrolab-host .ir-fecha-row, .astrolab-host .fecha-display + div { order: 3 !important; margin: 0.5rem auto !important; display: flex !important; justify-content: center !important; gap: 0.5rem; } .astrolab-host #panel-home.active { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* Sidebar drawer: respeta posición icon en top (no overlap) */ } /* === Bloque "Signos clave" reposicionado antes de verActionRow (JS lo mueve) === */ .astrolab-host #verSummary[data-moved="1"] { margin-bottom: 0.6rem !important; } /* ═══════════════════════════════════════════════════════════════ v0.5.4 — Mobile icon cuadrado + verTransitDateCorner en header desktop ═══════════════════════════════════════════════════════════════ */ /* Mobile icon: cuadrado (border-radius pequeño, no 50%) */ @media (max-width: 768px) { .astrolab-mobile-toggle { border-radius: 8px !important; top: 56px !important; left: 12px !important; width: 42px !important; height: 42px !important; background: rgba(20, 20, 26, 0.9) !important; border: 1.5px solid rgba(167, 139, 250, 0.5) !important; } } /* verTransitDateCorner cuando está en el header: estilo compacto, mismo height que botones. NOTA: ya NO forzamos display:inline-flex con !important — astro.js controla `style.display = 'inline-flex'/'none'` al activar/desactivar el modo tránsitos. */ .astrolab-host .astrolab-transit-date-in-header { align-items: center; gap: 0.4rem !important; height: 34px; background: transparent !important; border: none !important; padding: 0 !important; margin: 0; flex-wrap: nowrap !important; /* single row con Editar/Eliminar/Imprimir */ } .astrolab-host .astrolab-transit-date-in-header > span:first-child { font-size: 0.78rem; color: var(--logo, #BC99FF); font-weight: 600; } .astrolab-host .astrolab-transit-date-in-header input[type="datetime-local"] { height: 34px !important; font-size: 0.76rem !important; padding: 0 0.6rem !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; max-width: 180px; } /* Display secundario "verTransitDateDisplay" (texto morado): ocultar para evitar duplicado de fecha */ .astrolab-host .astrolab-transit-date-in-header #verTransitDateDisplay { display: none !important; } /* Botón "✕ Salir": dejar solo el × como icono cuadrado pequeño, sin texto, alineado en la fila */ .astrolab-host .astrolab-transit-date-in-header button[onclick*="stopTransitMode"] { font-size: 0 !important; width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; } .astrolab-host .astrolab-transit-date-in-header button[onclick*="stopTransitMode"]::before { content: '×'; font-size: 18px !important; line-height: 1; color: #fff; } /* En modo mobile, devolver verTransitDateCorner a su posición original (por si el JS lo movió cuando había width grande y luego rotó) */ @media (max-width: 768px) { .astrolab-host .astrolab-transit-date-in-header { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.5 — Mobile layout consolidado - Solo se muestra el panel .active (corrige paneles superpuestos) - Botón menú principal: relleno lila + SVG visible - "Ir a fecha" baja debajo del botón menú - Controles temporales debajo de la rueda - tools-col panel derecho visible y accesible Este bloque sobrescribe TODOS los anteriores conflictos. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ─── a) Solo el panel .active es visible ─────────────────── */ .astrolab-host .panel { display: none !important; } .astrolab-host .panel.active { display: flex !important; flex-direction: column !important; } /* ─── b) Botón menú principal: cuadrado lila relleno ──────── */ .astrolab-host .astrolab-mobile-toggle { position: absolute !important; top: 8px !important; left: 8px !important; width: 44px !important; height: 44px !important; border-radius: 10px !important; background: rgba(167, 139, 250, 0.88) !important; border: 1px solid rgba(167, 139, 250, 0.95) !important; color: #fff !important; z-index: 70 !important; font-size: 0 !important; box-shadow: 0 4px 14px rgba(167, 139, 250, 0.35); display: flex !important; align-items: center !important; justify-content: center !important; } .astrolab-host .astrolab-mobile-toggle::before { display: none !important; /* desactiva el icono de engranaje previo */ } .astrolab-host .astrolab-mobile-toggle svg { display: block !important; width: 24px !important; height: 24px !important; fill: #fff !important; stroke: none !important; color: #fff !important; } .astrolab-host .astrolab-mobile-toggle:hover, .astrolab-host .astrolab-mobile-toggle:focus { background: rgba(167, 139, 250, 1) !important; } /* ─── c) "Ir a fecha" debajo del botón menú (top-left) ────── */ .astrolab-host #panel-home > .manual-date-corner, .astrolab-host #panel-home .manual-date-corner { position: absolute !important; top: 60px !important; left: 8px !important; right: auto !important; z-index: 12 !important; padding: 0.25rem 0.45rem !important; border-radius: 7px !important; max-width: calc(100vw - 80px) !important; } .astrolab-host #panel-home .manual-date-corner .manual-date-input { width: 140px !important; font-size: 0.7rem !important; padding: 0.25rem 0.4rem !important; } .astrolab-host #panel-home .manual-date-corner .manual-date-label { font-size: 0.55rem !important; } .astrolab-host #panel-home .manual-date-corner .manual-date-btn { font-size: 0.65rem !important; padding: 0.25rem 0.5rem !important; } /* ─── d) Horo-corner queda arriba a la derecha ────────────── */ .astrolab-host #panel-home > .horo-corner, .astrolab-host #panel-home .horo-corner { position: absolute !important; top: 8px !important; right: 56px !important; /* deja hueco a tools-col arriba */ left: auto !important; z-index: 12 !important; max-width: calc(100vw - 130px); } /* ─── e) Layout columna: rueda → tiempo → resto ───────────── */ .astrolab-host #panel-home { padding-top: 8px !important; padding-bottom: 12px !important; gap: 0.4rem !important; } .astrolab-host #panel-home > .fecha-display { order: 1 !important; margin-top: 112px !important; /* deja espacio para menú + Ir a fecha */ flex-shrink: 0; } .astrolab-host #panel-home > .wheel-wrap { order: 2 !important; flex: 0 1 auto !important; padding: 0 6px !important; min-height: 0; } .astrolab-host #panel-home > .time-controls, .astrolab-host #panel-home #timeControls { order: 3 !important; margin: 0.5rem auto 0 !important; display: inline-flex !important; justify-content: center !important; max-width: calc(100vw - 56px) !important; } /* Rueda más pequeña para dejar sitio a los time-controls bajo el gráfico */ .astrolab-host #panel-home .wheel-wrap > svg { width: min(86vw, 78vh) !important; height: min(86vw, 78vh) !important; max-width: calc(100vw - 60px) !important; max-height: 70vh !important; } /* ─── f) tools-col panel derecho: visible y scrollable ────── */ .astrolab-host .tools-col { position: absolute !important; top: 60px !important; right: 6px !important; bottom: 12px !important; left: auto !important; transform: none !important; flex-direction: column !important; width: 42px !important; max-width: 42px !important; height: auto !important; max-height: calc(100% - 76px) !important; overflow-y: auto !important; overflow-x: hidden !important; background: rgba(20, 20, 26, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; z-index: 50 !important; padding: 0 !important; gap: 0 !important; scrollbar-width: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } .astrolab-host .tools-col::-webkit-scrollbar { display: none; } .astrolab-host .tools-col .tool-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; border: none !important; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; background: transparent !important; flex-shrink: 0; display: flex !important; align-items: center; justify-content: center; } .astrolab-host .tools-col .tool-btn:last-child { border-bottom: none !important; } .astrolab-host .tools-col .tool-btn svg { width: 18px !important; height: 18px !important; } .astrolab-host .tools-col .tools-gap, .astrolab-host .tools-col .astrolab-tools-sep { display: block !important; width: 100% !important; height: 2px !important; background: rgba(255, 255, 255, 0.08) !important; margin: 0 !important; } /* Cuando astro.js oculta tools-col vía .tools-hidden, lo respetamos */ .astrolab-host .tools-col.tools-hidden { display: none !important; } /* ─── g) Sidebar drawer abierta: tools-col debajo de overlay ─ */ .astrolab-host.sidebar-open .tools-col { opacity: 0.15; pointer-events: none; } /* ─── h) Otros paneles (no-home): tools-col se oculta porque astro.js le pone .tools-hidden cuando isChart=false. Para los que SÍ son chart (ver, relocacion, etc.), tools-col se mantiene visible con su scroll vertical. ─────────────── */ } /* ═══════════════════════════════════════════════════════════════ v0.5.6 — Fixes acumulados (desktop + mobile) ═══════════════════════════════════════════════════════════════ */ /* === Desktop: Signos clave +50% ancho, 3 elementos equidistantes === */ .astrolab-host #verSummary > div:first-child > .elem-donut-wrap { max-width: 780px !important; width: 100% !important; } .astrolab-host #verSummary > div:first-child > .elem-donut-wrap > div:last-child { justify-content: space-evenly !important; gap: 0 !important; } .astrolab-host #verSummary .signo-clave-block { flex: 0 0 auto !important; min-width: 110px !important; } /* === Desktop: Tránsitos corner OCULTO por defecto === Quitamos el !important en display:inline-flex para que el inline `display:none` del HTML siga ganando hasta que astro.js lo cambie al pulsar el botón "Tránsitos". */ .astrolab-host .astrolab-transit-date-in-header { display: none; /* sin !important — astro.js fuerza inline-flex al activar */ } .astrolab-host .astrolab-transit-date-in-header[style*="display: inline-flex"], .astrolab-host .astrolab-transit-date-in-header[style*="display:inline-flex"], .astrolab-host .astrolab-transit-date-in-header[style*="display: flex"], .astrolab-host .astrolab-transit-date-in-header[style*="display:flex"] { display: inline-flex !important; align-items: center; gap: 0.4rem !important; height: 34px; background: transparent !important; border: none !important; padding: 0 !important; margin: 0; } /* === Reduce 50% la distancia bajo la rueda al primer bloque (signos clave) === */ .astrolab-host #verSummary > div:first-child { margin-top: 10px !important; /* antes 20px */ margin-bottom: 0.3rem !important; } .astrolab-host .ver-wheel-wrap, .astrolab-host #verWheelWrap { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ═══ MOBILE v0.5.6 ════════════════════════════════════════════ */ @media (max-width: 768px) { /* === a) Sólo el panel .active es visible — specificity alta para vencer cualquier #panel-home { display:flex !important } === */ .astrolab-host #panel-home:not(.active), .astrolab-host #panel-nueva:not(.active), .astrolab-host #panel-guardadas:not(.active), .astrolab-host #panel-ver:not(.active), .astrolab-host #panel-vincular:not(.active), .astrolab-host #panel-astrobranding:not(.active), .astrolab-host #panel-espacios:not(.active), .astrolab-host #panel-lunar:not(.active), .astrolab-host #panel-cita-nueva:not(.active), .astrolab-host #panel-calendario:not(.active), .astrolab-host #panel-fechas:not(.active), .astrolab-host #panel-retorno:not(.active), .astrolab-host #panel-anual:not(.active), .astrolab-host #panel-relocacion:not(.active), .astrolab-host #panel-rs-full:not(.active), .astrolab-host #panel-progresiones:not(.active), .astrolab-host #panel-rev-lunar:not(.active), .astrolab-host #panel-ajustes:not(.active), .astrolab-host .panel:not(.active) { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } .astrolab-host .panel.active, .astrolab-host #panel-home.active { display: flex !important; flex-direction: column !important; visibility: visible !important; height: auto !important; overflow: auto !important; } /* === b) header-app-mobile — wrapper de 1-2 líneas fijas al top === */ .astrolab-host .header-app-mobile { position: absolute; top: 0; left: 0; right: 0; z-index: 65; background: rgba(15, 15, 18, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 4px; } .astrolab-host .header-app-mobile .hm-line-1 { display: flex; align-items: center; gap: 8px; height: 42px; } .astrolab-host .header-app-mobile .hm-line-2 { text-align: center; min-height: 18px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .astrolab-host .header-app-mobile #fechaDisplay { margin: 0 !important; padding: 0 !important; text-align: center !important; font-size: 0.74rem !important; color: #fff !important; } /* Hamburger DENTRO del header: posición relativa, lila + tools-61 SVG */ .astrolab-host .header-app-mobile .astrolab-mobile-toggle { position: relative !important; top: 0 !important; left: 0 !important; width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 10px !important; background: rgba(167, 139, 250, 0.92) !important; border: 1px solid rgba(167, 139, 250, 1) !important; box-shadow: 0 4px 12px rgba(167, 139, 250, 0.35); display: flex !important; align-items: center !important; justify-content: center !important; } .astrolab-host .header-app-mobile .astrolab-mobile-toggle svg { width: 22px !important; height: 22px !important; fill: #fff !important; stroke: none !important; color: #fff !important; } .astrolab-host .header-app-mobile .astrolab-mobile-toggle::before { display: none !important; } /* Barra de fecha SIN label "Ir a fecha", ocupa el resto del ancho */ .astrolab-host .header-app-mobile .manual-date-corner { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; flex: 1 1 auto !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 4px 6px !important; max-width: none !important; display: flex !important; align-items: center !important; gap: 6px !important; height: 42px !important; box-sizing: border-box !important; } .astrolab-host .header-app-mobile .manual-date-corner .manual-date-label { display: none !important; } .astrolab-host .header-app-mobile .manual-date-corner .manual-date-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; font-size: 0.74rem !important; padding: 0 6px !important; height: 32px !important; } .astrolab-host .header-app-mobile .manual-date-corner .manual-date-btn { font-size: 0.7rem !important; padding: 0 0.55rem !important; height: 32px !important; flex: 0 0 auto !important; } /* === c) Panel-home: padding-top para dejar el header visible === */ .astrolab-host #panel-home.active { padding-top: 80px !important; padding-bottom: 12px !important; padding-left: 6px !important; padding-right: 54px !important; /* hueco para tools-col */ gap: 0.3rem !important; justify-content: flex-start !important; align-items: stretch !important; } /* fecha-display ya está fuera de panel-home (movida al header) */ .astrolab-host #panel-home.active > #fechaDisplay, .astrolab-host #panel-home.active > .horo-corner { display: none !important; } /* La manual-date-corner también fue movida — ocultar el slot original */ .astrolab-host #panel-home.active > .manual-date-corner { display: none !important; } .astrolab-host #panel-home.active > .wheel-wrap { order: 1 !important; flex: 1 1 auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .astrolab-host #panel-home.active > .wheel-wrap > svg { max-width: min(80vw, 56vh) !important; max-height: min(80vw, 56vh) !important; width: auto !important; height: auto !important; display: block !important; } .astrolab-host #panel-home.active > .time-controls, .astrolab-host #panel-home.active #timeControls { order: 2 !important; flex: 0 0 auto !important; margin: 16px auto 0 !important; max-width: calc(100vw - 60px) !important; } /* === d) Otros paneles: padding-top 80px para no quedar tapados por header === */ .astrolab-host .panel.active { padding-top: 80px !important; } /* === e) tools-col mobile: trim padding/margin first & last === */ .astrolab-host .tools-col { position: absolute !important; top: 80px !important; right: 6px !important; bottom: 12px !important; left: auto !important; transform: none !important; flex-direction: column !important; width: 42px !important; max-width: 42px !important; max-height: calc(100% - 96px) !important; padding: 0 !important; gap: 0 !important; z-index: 50 !important; overflow-y: auto !important; overflow-x: hidden !important; background: rgba(20, 20, 26, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); scrollbar-width: none; } .astrolab-host .tools-col::-webkit-scrollbar { display: none; } .astrolab-host .tools-col .tool-btn { margin: 0 !important; flex-shrink: 0; } /* Separadores: solo entre grupos, no en bordes */ .astrolab-host .tools-col > .tools-gap:first-child, .astrolab-host .tools-col > .tools-gap:last-child, .astrolab-host .tools-col > .astrolab-tools-sep:first-child, .astrolab-host .tools-col > .astrolab-tools-sep:last-child { display: none !important; } .astrolab-host .tools-col > .tools-gap, .astrolab-host .tools-col > .astrolab-tools-sep { margin: 0 !important; height: 2px !important; width: 100% !important; background: rgba(255, 255, 255, 0.1) !important; border: none !important; } /* Re-ocultar zoom buttons (en mobile pinch hace el trabajo) */ .astrolab-host .tools-col .tool-btn[onclick*="zoomIn"], .astrolab-host .tools-col .tool-btn[onclick*="zoomOut"], .astrolab-host .tools-col .tool-btn[onclick*="resetZoom"], .astrolab-host .tools-col .tool-btn[title*="Zoom"], .astrolab-host .tools-col .tool-btn[title*="1:1"] { display: none !important; } /* === f) Sidebar drawer UX: opaco, encima del header, con close visible === */ .astrolab-host .sidebar { z-index: 90 !important; background: #15151a !important; backdrop-filter: none !important; box-shadow: 6px 0 32px rgba(0, 0, 0, 0.6) !important; padding-top: 56px !important; padding-bottom: 30px !important; } .astrolab-host.sidebar-open::after { content: '' !important; position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.65) !important; z-index: 85 !important; pointer-events: auto !important; backdrop-filter: blur(2px); } /* Cuando drawer abierto, hamburger se mueve fuera de la pila / se oculta */ .astrolab-host.sidebar-open .header-app-mobile, .astrolab-host.sidebar-open .astrolab-mobile-toggle { opacity: 0; pointer-events: none; } /* Botón close ✕ dentro del propio drawer */ .astrolab-host .sidebar::before { content: '×'; position: absolute; top: 8px; right: 14px; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, 0.7); font-weight: 300; cursor: pointer; z-index: 91; pointer-events: none; display: none; } .astrolab-host.sidebar-open .sidebar::before { display: block; } /* === g) Tránsitos date corner: en mobile NO se mueve al header, queda en su sitio original (display:none por defecto, astro.js lo activa). === */ .astrolab-host .astrolab-transit-date-in-header { display: none !important; /* en mobile, oculto siempre — astro.js controla el original */ } } /* ═══════════════════════════════════════════════════════════════ v0.5.7 — Fixes acumulados (drawer opaco, hamburger SVG fill, click-through overlay, header-app-mobile línea 2 con horóscopo, tools-col compacto). ═══════════════════════════════════════════════════════════════ */ /* === GLOBAL: hamburger SVG con FILL (no stroke) — anula v0.5.5 `fill:none` === El tools-61 SVG usa `fill="currentColor"`; si dejamos `fill: none` se vuelve invisible. */ .astrolab-host .astrolab-mobile-toggle svg, .astrolab-host .astrolab-mobile-toggle svg * { fill: #fff !important; stroke: none !important; color: #fff !important; } /* === MOBILE — v0.5.7 ════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── header-app-mobile línea 2: Modo Horóscopo toggle ───────── */ .astrolab-host .header-app-mobile .hm-line-2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 26px !important; padding-top: 2px; } .astrolab-host .header-app-mobile .horo-corner { position: relative !important; top: auto !important; right: auto !important; left: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; max-width: none !important; } .astrolab-host .header-app-mobile .horo-corner .horo-label, .astrolab-host .header-app-mobile .horo-corner .horo-label::after { font-size: 0.7rem !important; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); } /* fechaDisplay original oculto: ya está en el datetime-local */ .astrolab-host #panel-home #fechaDisplay, .astrolab-host #panel-home > #fechaDisplay, .astrolab-host .header-app-mobile #fechaDisplay { display: none !important; } /* ── Drawer FULLY OPAQUE + click-through overlay ──────────── */ body .astrolab-host .sidebar, body .astrolab-host.sidebar-open .sidebar { background: #15151a !important; background-color: #15151a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; z-index: 100 !important; box-shadow: 6px 0 32px rgba(0, 0, 0, 0.6) !important; } body .astrolab-host .sidebar * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Items del menú: legibilidad correcta sobre fondo oscuro */ body .astrolab-host .sidebar .nav-item { color: rgba(255, 255, 255, 0.78) !important; } body .astrolab-host .sidebar .nav-item.active, body .astrolab-host .sidebar .nav-item:hover { color: #fff !important; background: rgba(167, 139, 250, 0.15) !important; } /* Overlay: pointer-events:none para que los CLICKS pasen al drawer y los nav-items respondan; el click "fuera" sigue cerrando vía document listener. */ .astrolab-host.sidebar-open::after { pointer-events: none !important; z-index: 95 !important; background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(2px); } /* Cuando drawer abierto, ocultamos el header móvil para evitar conflicto. */ .astrolab-host.sidebar-open .header-app-mobile { opacity: 0 !important; pointer-events: none !important; } /* ── tools-col: compacta, alineada arriba sin padding ────── */ .astrolab-host .tools-col { top: 80px !important; bottom: auto !important; max-height: calc(100% - 92px) !important; justify-content: flex-start !important; padding: 0 !important; gap: 0 !important; } /* Botones todos pegados, sin margen */ .astrolab-host .tools-col > .tool-btn, .astrolab-host .tools-col > .astrolab-tools-sep, .astrolab-host .tools-col > .tools-gap { margin: 0 !important; } /* Botón Descargar PNG (tool-btn-accent) tenía gap → trimmed */ .astrolab-host .tools-col > .tools-gap:first-of-type { display: none !important; } /* Re-confirmar fill blanco en hamburger dentro de header */ .astrolab-host .header-app-mobile .astrolab-mobile-toggle svg, .astrolab-host .header-app-mobile .astrolab-mobile-toggle svg * { fill: #fff !important; stroke: none !important; } /* Padding-top de panel-home reducido (sin fecha display) */ .astrolab-host #panel-home.active { padding-top: 80px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.8 — Fixes definitivos ═══════════════════════════════════════════════════════════════ */ /* === Desktop: Tránsitos corner controlado por clase .is-active === Por defecto OCULTO. astro.js añade/quita la clase is-active en start/stopTransitMode. Esto bypassa el inline style y elimina los problemas de cascade con `display: inline-flex !important` viejos. */ .astrolab-host #verTransitDateCorner { display: none !important; } .astrolab-host #verTransitDateCorner.is-active { display: flex !important; /* mobile: posición original */ } .astrolab-host .astrolab-transit-date-in-header.is-active { display: inline-flex !important; } @media (max-width: 768px) { .astrolab-host .astrolab-transit-date-in-header.is-active { display: none !important; /* en mobile el corner permanece en su sitio original */ } } /* === Desktop: Botón "✕ Salir" eliminado del header (transit mode se toggle únicamente desde el botón "Tránsitos" debajo del gráfico) === */ .astrolab-host #verTransitDateCorner button[onclick*="stopTransitMode"], .astrolab-host .astrolab-transit-date-in-header button[onclick*="stopTransitMode"] { display: none !important; } /* === Desktop: Reduce el ancho del transit field para alinearlo con los botones Editar/Imprimir/Eliminar === */ .astrolab-host .astrolab-transit-date-in-header input[type="datetime-local"] { max-width: 130px !important; width: 130px !important; } /* === Saved-toolbar: dentro del panel, no se corta === */ .astrolab-host .saved-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0.7rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: transparent; flex-shrink: 0; } .astrolab-host .saved-toolbar .saved-import-btn { background: rgba(167, 139, 250, 0.18); border: 1px solid rgba(167, 139, 250, 0.4); color: #fff; font-family: inherit; font-size: 0.74rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .astrolab-host .saved-toolbar .saved-import-btn:hover { background: rgba(167, 139, 250, 0.32); } .astrolab-host .saved-toolbar select.fi { width: auto !important; padding: 0.35rem 0.6rem !important; font-size: 0.74rem !important; height: 34px !important; min-height: 34px !important; max-width: 180px; } @media (max-width: 768px) { .astrolab-host .saved-toolbar { padding: 0.6rem 0.8rem; } .astrolab-host .saved-toolbar select.fi { flex: 1 1 auto; max-width: 100%; } } /* === MOBILE: drawer sin blur del resto de la app === */ @media (max-width: 768px) { .astrolab-host.sidebar-open::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, 0.55) !important; } /* === tools-col: 30px de padding-top para que baje un poco === */ .astrolab-host .tools-col { top: 110px !important; /* 80px header + 30px padding */ max-height: calc(100% - 122px) !important; } /* === Date field en header-app-mobile: sin borde ni fondo === */ .astrolab-host .header-app-mobile .manual-date-corner { background: transparent !important; border: none !important; box-shadow: none !important; } .astrolab-host .header-app-mobile .manual-date-corner .manual-date-input { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; /* solo borde sutil al input para clickability */ } /* === Hamburger: render del icono tools-61 vía mask-image (data URI) Esto es 100% fiable: el ::after se llena de color blanco recortado por la máscara SVG. No depende de fill/stroke cascade. === */ .astrolab-host .astrolab-mobile-toggle { position: relative; } .astrolab-host .astrolab-mobile-toggle::after { content: ''; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background-color: #fff; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; display: block !important; } /* SVG inline (PHP) ocultado — usamos solo el ::after con mask */ .astrolab-host .astrolab-mobile-toggle > svg { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.9 — Fixes acumulados ═══════════════════════════════════════════════════════════════ */ /* === tools-col se OCULTA cuando astro.js le pone .tools-hidden === (panel no-chart, ej. ajustes, guardadas, calendario...) — specificity alta con body prefix para vencer cualquier display:flex previo. */ body .astrolab-host .tools-col.tools-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* === MOBILE — v0.5.9 ════════════════════════════════════════════ */ @media (max-width: 768px) { /* === header-app-mobile: fondo negro puro pedido por el usuario === */ .astrolab-host .header-app-mobile { background: #000 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* === Drawer: items legibles (no oscurecidos) === */ body .astrolab-host .sidebar { background: #1a1a1f !important; /* un pelín más claro que negro puro */ } body .astrolab-host .sidebar .nav-item { color: rgba(255, 255, 255, 0.92) !important; /* casi blanco */ } body .astrolab-host .sidebar .nav-item svg { opacity: 0.85; } body .astrolab-host .sidebar .search-input { color: #fff !important; } body .astrolab-host .sidebar .nav-section-label { color: rgba(255, 255, 255, 0.5) !important; } /* Overlay menos opaco para no oscurecer el resto */ .astrolab-host.sidebar-open::after { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: none !important; } /* === tools-col junto al gráfico (no flotando) === Mantiene position:absolute (para no romper el layout) pero asegura que TODOS los chart panels reservan padding-right para que el chart no se solape ni quede tapado. */ .astrolab-host .panel.active { padding-right: 54px !important; } /* Para panel-ver (carta guardada) el contenido es wide → también */ .astrolab-host #panel-ver.active { padding-right: 54px !important; } .astrolab-host #panel-relocacion.active, .astrolab-host #panel-rs-full.active, .astrolab-host #panel-vincular.active, .astrolab-host #panel-nueva.active { padding-right: 54px !important; } /* === Share button en mobile: asegura visibilidad === */ .astrolab-host .tools-col .astrolab-tools-share-btn { display: flex !important; /* sobrescrito a none por hook si no es panel-ver */ width: 40px !important; height: 40px !important; margin: 0 !important; flex-shrink: 0; } } /* === Desktop & Mobile: Share btn por defecto oculto, sólo visible en panel-ver vía hook JS (que pone style.display=''). === IMPORTANTE: no usar !important aquí para que el hook pueda forzar display:'' (sin valor) o 'flex' según necesidad. */ .astrolab-host .astrolab-tools-share-btn[data-ctx="ver"]:not([data-panel-ver-active]) { /* placeholder selector si quisiéramos otro estado; mantenemos como hint */ } /* ═══════════════════════════════════════════════════════════════ v0.5.10 — Modo horóscopo solo en panel-home + tools-col fixed en todos los chart panels + label alineada izquierda ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* === Línea 2 del header-app-mobile: alineada a la IZQUIERDA === */ .astrolab-host .header-app-mobile .hm-line-2 { justify-content: flex-start !important; padding-left: 4px !important; } .astrolab-host .header-app-mobile .horo-corner { justify-content: flex-start !important; } /* v0.5.12: en header-app-mobile el texto original "Modo Horóscopo" debe estar oculto (font-size:0). El ::after definido en otra regla añade "Horóscopo". Esta regla ANTES ponía font-size:0.72rem que hacía visible el texto original → mostraba ambos a la vez. */ .astrolab-host .header-app-mobile .horo-corner .horo-label { font-size: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, 0.92) !important; margin-right: 4px; } .astrolab-host .header-app-mobile .horo-corner .horo-label::after { font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: rgba(255, 255, 255, 0.92) !important; } /* === Modo horóscopo SOLO visible cuando panel-home está activo === JS también lo controla pero CSS añade safety net via :has(). */ .astrolab-host:not(:has(#panel-home.active)) .header-app-mobile .horo-corner, .astrolab-host:not(:has(#panel-home.active)) .header-app-mobile .hm-line-2 { display: none !important; } /* === tools-col FIJA al viewport (no scroll-affected) en todos los chart panels (panel-home, panel-ver, panel-relocacion, etc.) === Antes en panel-ver se "movía" porque main-area podía desplazarse con el scroll del body en iOS. Con position:fixed queda anclada al viewport — mismo comportamiento que en carta del momento. */ .astrolab-host .tools-col { position: fixed !important; top: calc( var(--astrolab-header-offset, 0px) + 110px ) !important; right: 6px !important; bottom: 16px !important; left: auto !important; transform: none !important; z-index: 60 !important; } } /* === Desktop: tools-col también fija al viewport para coherencia === Antes era absolute relativo a main-area; ahora fixed al viewport centrado verticalmente. */ @media (min-width: 769px) { .astrolab-host .tools-col { position: fixed !important; top: calc( var(--astrolab-header-offset, 0px) + 50vh ) !important; transform: translateY(-50%) !important; bottom: auto !important; right: 12px !important; left: auto !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.11 — Fixes finales: tools-col centrada con altura auto, panel-ver header expandido en mobile, botón Ir alineado. ═══════════════════════════════════════════════════════════════ */ /* === Botón "Ir" igualado en altura al input datetime (ambas versiones) === */ .astrolab-host .manual-date-corner { align-items: stretch !important; } .astrolab-host .manual-date-input, .astrolab-host .manual-date-btn { height: 34px !important; min-height: 34px !important; max-height: 34px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .astrolab-host .manual-date-btn { padding-left: 0.7rem !important; padding-right: 0.7rem !important; } /* === MOBILE — v0.5.11 ════════════════════════════════════════════ */ @media (max-width: 768px) { /* Tools-col: position:absolute relativo a main-area (no fixed) — no "flota" sobre el viewport, queda anclada al área principal. Altura AUTO (se ajusta al número de botones visibles según el modo) y centrada verticalmente. Si crece demasiado, scroll interno. */ .astrolab-host .tools-col { position: absolute !important; top: 50% !important; right: 6px !important; bottom: auto !important; left: auto !important; transform: translateY(-50%) !important; height: auto !important; max-height: calc(100% - 200px) !important; /* margen para header */ overflow-y: auto !important; overflow-x: hidden !important; z-index: 50 !important; } /* === Alturas igualadas en header-app-mobile === */ .astrolab-host .header-app-mobile .manual-date-input, .astrolab-host .header-app-mobile .manual-date-btn { height: 34px !important; min-height: 34px !important; max-height: 34px !important; } /* === panel-ver: panel-header-bar + verInfoBar visualmente continúan header-app-mobile (fondo negro, sticky-top, integrados en el header). astro.js los renderiza dentro del panel; aquí los estilamos para que se vean como una extensión del header. === */ .astrolab-host #panel-ver.active .panel-header-bar { background: #000 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding: 6px 8px !important; gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; position: sticky; top: 0; z-index: 32; } .astrolab-host #panel-ver .panel-header-bar::-webkit-scrollbar { display: none; } .astrolab-host #panel-ver .panel-header-bar .panel-title { font-size: 0.78rem !important; white-space: nowrap; flex-shrink: 0; min-width: 0; } .astrolab-host #panel-ver .panel-header-bar > div { gap: 4px !important; flex-wrap: nowrap !important; flex-shrink: 0; } .astrolab-host #panel-ver .panel-header-bar button { font-size: 0.7rem !important; padding: 4px 7px !important; height: 28px !important; min-height: 28px !important; flex-shrink: 0; } .astrolab-host #panel-ver .panel-header-bar .close-panel, .astrolab-host #panel-ver .panel-header-bar button[onclick*="openPanel"] { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; } .astrolab-host #panel-ver .panel-header-bar svg { width: 12px !important; height: 12px !important; } .astrolab-host #panel-ver #verInfoBar { background: #000 !important; padding: 4px 10px !important; font-size: 0.66rem !important; gap: 0.5rem !important; position: sticky; top: 40px; z-index: 31; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } /* panel-ver padding-top reducido: el header ya cubre con su propio panel-header-bar sticky + verInfoBar sticky */ .astrolab-host #panel-ver.active { padding-top: 80px !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.12 — Header reordenado, hamburger alineado, tools-col centrada con el área visible del chart. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* === Hamburger: misma altura que input fecha (34px), SVG más grande === */ .astrolab-host .header-app-mobile .astrolab-mobile-toggle { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; border-radius: 8px !important; } .astrolab-host .header-app-mobile .astrolab-mobile-toggle::after { width: 28px !important; height: 28px !important; -webkit-mask-size: 26px !important; mask-size: 26px !important; } /* También igualamos el input + botón a 34px exactos */ .astrolab-host .header-app-mobile .hm-line-1 { height: 34px !important; align-items: center !important; } .astrolab-host .header-app-mobile .manual-date-input, .astrolab-host .header-app-mobile .manual-date-btn { height: 34px !important; min-height: 34px !important; max-height: 34px !important; } /* === header-app-mobile ocupa todo el ancho === */ .astrolab-host .header-app-mobile { left: 0 !important; right: 0 !important; width: 100% !important; } /* === panel-ver header en mobile: layout columna === Línea 1: título centrado a izquierda (full width) Línea 2: Editar / Eliminar / Imprimir / × — alineados a la izquierda Sin solapamiento, ambas líneas dentro del fondo negro estilo header. */ .astrolab-host #panel-ver.active .panel-header-bar { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; overflow-x: visible !important; gap: 6px !important; padding: 8px 10px !important; } .astrolab-host #panel-ver .panel-header-bar .panel-title { font-size: 0.85rem !important; font-weight: 700 !important; text-align: left; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .astrolab-host #panel-ver .panel-header-bar > div { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; scrollbar-width: none; } .astrolab-host #panel-ver .panel-header-bar > div::-webkit-scrollbar { display: none; } .astrolab-host #panel-ver .panel-header-bar button { font-size: 0.7rem !important; padding: 4px 9px !important; height: 28px !important; min-height: 28px !important; flex-shrink: 0 !important; } /* === tools-col mobile: centrada con el área visible del chart, no flotando sobre el viewport. Position fixed para no scrollear pero top calculado para alinear con centro del área principal. === Área visible del chart = viewport - theme_header - header_app_mobile_h Center Y = theme_header + header_app_mobile + (viewport - theme_header - header_app_mobile)/2 */ .astrolab-host .tools-col { position: fixed !important; top: calc( var(--astrolab-header-offset, 0px) + 80px + (100vh - var(--astrolab-header-offset, 0px) - 80px) / 2 ) !important; transform: translateY(-50%) !important; right: 4px !important; bottom: auto !important; left: auto !important; height: auto !important; max-height: calc(100vh - var(--astrolab-header-offset, 0px) - 110px) !important; z-index: 40 !important; } } /* === Desktop: tools-col centrada con el área visible del host (no viewport puro). Cuenta con el theme header offset. === */ @media (min-width: 769px) { .astrolab-host .tools-col { position: fixed !important; top: calc( var(--astrolab-header-offset, 0px) + (100vh - var(--astrolab-header-offset, 0px)) / 2 ) !important; transform: translateY(-50%) !important; right: 12px !important; bottom: auto !important; left: auto !important; height: auto !important; max-height: calc(100vh - var(--astrolab-header-offset, 0px) - 60px) !important; } } /* ═══════════════════════════════════════════════════════════════ v0.5.13 — Horo right-aligned, hamburger square, tools-col JS aligned ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* === Toggle "Horóscopo" alineado a la DERECHA === (Antes lo había puesto a la izquierda en v0.5.10) */ .astrolab-host .header-app-mobile .hm-line-2 { justify-content: flex-end !important; padding-left: 0 !important; padding-right: 8px !important; } .astrolab-host .header-app-mobile .horo-corner { justify-content: flex-end !important; } /* === Hamburger: CUADRADO 34x34 (igual altura que input/Ir) === aspect-ratio: 1 garantiza que ancho = alto a pesar de cualquier flex-shrink. Icono mask 28x28 sigue siendo visible y centrado. */ .astrolab-host .header-app-mobile .astrolab-mobile-toggle { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; aspect-ratio: 1 / 1 !important; flex: 0 0 34px !important; padding: 0 !important; box-sizing: border-box !important; } .astrolab-host .header-app-mobile .astrolab-mobile-toggle::after { width: 26px !important; height: 26px !important; -webkit-mask-size: 24px 24px !important; mask-size: 24px 24px !important; } /* === tools-col: SOLO posicionamiento right + estilos base — el `top` lo establece astrolab-embed.js dinámicamente al centro del chart activo (alignToolsColToWheel). === */ .astrolab-host .tools-col { position: fixed !important; right: 4px !important; bottom: auto !important; left: auto !important; /* top + transform se inyectan via JS para centrar con el chart */ height: auto !important; max-height: calc(100vh - var(--astrolab-header-offset, 0px) - 100px) !important; z-index: 40 !important; } } @media (min-width: 769px) { /* Desktop: tools-col fija — top + transform inyectados via JS */ .astrolab-host .tools-col { position: fixed !important; right: 12px !important; bottom: auto !important; left: auto !important; height: auto !important; max-height: calc(100vh - var(--astrolab-header-offset, 0px) - 60px) !important; } } /* ═══════════════════════════════════════════════════════════════ v0.6.0 — Gating UI: nav-items bloqueados + corona + modal upgrade ═══════════════════════════════════════════════════════════════ */ /* === nav-item bloqueado: gris, no clickeable visualmente === */ .astrolab-host .nav-item[data-locked="1"] { color: rgba(255, 255, 255, 0.42) !important; opacity: 0.85; position: relative; } .astrolab-host .nav-item[data-locked="1"] svg { opacity: 0.5; } .astrolab-host .nav-item[data-locked="1"]:hover { background: rgba(167, 139, 250, 0.08) !important; color: rgba(255, 255, 255, 0.55) !important; cursor: pointer; } .astrolab-host .nav-item[data-locked="1"]:hover .astrolab-lock-crown { transform: scale(1.15); } /* === Corona lila junto al título === */ .astrolab-host .astrolab-lock-crown { display: inline-flex; align-items: center; margin-left: 0.45rem; color: var(--logo, #BC99FF); transition: transform 0.15s ease; flex-shrink: 0; } .astrolab-host .astrolab-lock-crown svg { width: 12px; height: 12px; display: block; opacity: 1 !important; /* corona siempre 100% visible aunque el resto esté grey */ } /* === Modal upgrade === */ .astrolab-upgrade-modal { position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; padding: 1rem; font-family: 'DM Sans', system-ui, sans-serif; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .astrolab-upgrade-modal .aum-card { background: linear-gradient(180deg, #1a1a22, #131319); border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 16px; padding: 1.8rem 1.6rem 1.4rem; max-width: 460px; width: 100%; color: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(167, 139, 250, 0.18); position: relative; text-align: center; } .astrolab-upgrade-modal .aum-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 4px 8px; } .astrolab-upgrade-modal .aum-close:hover { color: #fff; } .astrolab-upgrade-modal .aum-crown { width: 64px; height: 64px; margin: 0 auto 0.8rem; border-radius: 50%; background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.35); display: flex; align-items: center; justify-content: center; color: #BC99FF; } .astrolab-upgrade-modal .aum-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; color: #fff; } .astrolab-upgrade-modal .aum-current { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 1rem; } .astrolab-upgrade-modal .aum-current strong { color: #BC99FF; } .astrolab-upgrade-modal .aum-features { list-style: none; margin: 0 0 1.4rem; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); text-align: left; } .astrolab-upgrade-modal .aum-features li { font-size: 0.82rem; padding: 4px 0; color: rgba(255, 255, 255, 0.85); position: relative; padding-left: 1.2rem; } .astrolab-upgrade-modal .aum-features li::before { content: '✓'; position: absolute; left: 0; color: #BC99FF; font-weight: 700; } .astrolab-upgrade-modal .aum-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; } .astrolab-upgrade-modal .aum-btn-primary { background: linear-gradient(135deg, #a78bfa, #8b6dec); border: none; color: #fff; font-size: 0.88rem; font-weight: 700; padding: 0.65rem 1.3rem; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; box-shadow: 0 6px 18px rgba(167, 139, 250, 0.35); transition: transform 0.15s, box-shadow 0.15s; } .astrolab-upgrade-modal .aum-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(167, 139, 250, 0.5); } .astrolab-upgrade-modal .aum-btn-secondary { background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; padding: 0.55rem 1rem; border-radius: 10px; cursor: pointer; font-family: inherit; } .astrolab-upgrade-modal .aum-btn-secondary:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } /* === [astrolab_chart] embed (v0.7.11 — minimal didáctico) === v0.7.20 — !important en el max-width para resistir contenedores wider de Elementor / temas (los que rompían la aspect-ratio del iframe haciéndolo rectangular y desalineando el wheel respecto al título). */ .astrolab-chart-embed { max-width: 720px !important; width: 100% !important; margin: 1.5rem auto !important; box-sizing: border-box; color: inherit; font-family: 'DM Sans', system-ui, sans-serif; background: transparent; border: 0; box-shadow: none; } .astrolab-chart-embed .ace-head { text-align: center; margin-bottom: 0; } .astrolab-chart-embed .ace-name { margin: 0 0 0.2rem; font-size: 1.25rem; font-weight: 700; color: inherit; letter-spacing: 0.01em; } .astrolab-chart-embed .ace-meta { font-size: 0.85rem; color: rgba(180, 180, 200, 0.85); letter-spacing: 0.02em; margin-top: 0.15rem; } /* En temas oscuros se hereda. En temas claros queda gris medio. */ .astrolab-chart-embed .ace-trio { display: none; } .astrolab-chart-embed .ace-trio strong { color: inherit; font-weight: 700; } .astrolab-chart-embed .ace-frame { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto !important; /* v0.7.21 — REMOVE max-height para garantizar que el iframe sea matemáticamente CUADRADO. Si max-height < width, el aspect-ratio se rompe y la rueda se descentra. */ background: transparent; position: relative; overflow: visible; /* v0.7.23 — Top de la rueda a 1px de la línea de fecha (reducido otro 80% del valor anterior de 4px). */ margin-top: calc(-4% + 1px) !important; } .astrolab-chart-embed .ace-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; } /* v0.7.23 — Botón CTA a 1px del borde inferior de la rueda (reducido otro 80% del valor anterior de 4px). */ .astrolab-chart-embed .ace-actions { margin-top: calc(-4% + 1px); padding: 0; display: flex; justify-content: center; width: 100%; } .astrolab-chart-embed .ace-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; color: #fff !important; text-decoration: none; padding: 0.55rem 1.2rem; border: 2px solid #ffffff; border-radius: 10px; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; box-shadow: none; transition: background-color 0.18s, color 0.18s; } .astrolab-chart-embed .ace-cta:hover, .astrolab-chart-embed .ace-cta:focus-visible { background: rgba(255, 255, 255, 0.25); color: #fff !important; outline: none; } /* === SPA embed mode (?embed=1) — v0.7.12 ==================== Solo la rueda interactiva visible. Sin sidebar/header/controles/ acciones/info. Fondo transparente. Sin scroll interno. Sin cursor-glow del tema parent leakeando dentro del iframe. ============================================================= */ .astrolab-host.astrolab-embed-mode .sidebar, .astrolab-host.astrolab-embed-mode .astrolab-mobile-toggle, .astrolab-host.astrolab-embed-mode .header-app-mobile, .astrolab-host.astrolab-embed-mode .astrolab-topbar, .astrolab-host.astrolab-embed-mode .tools-col, .astrolab-host.astrolab-embed-mode .fecha-display, .astrolab-host.astrolab-embed-mode .manual-date-corner, .astrolab-host.astrolab-embed-mode .horo-corner, .astrolab-host.astrolab-embed-mode .time-controls, .astrolab-host.astrolab-embed-mode .tbtns-row, .astrolab-host.astrolab-embed-mode .panel-header-bar, .astrolab-host.astrolab-embed-mode #verInfoBar, .astrolab-host.astrolab-embed-mode #verActionRow, .astrolab-host.astrolab-embed-mode #verTransitDateCorner, .astrolab-host.astrolab-embed-mode #verTransitControls, .astrolab-host.astrolab-embed-mode #verTransitAspectToggle, .astrolab-host.astrolab-embed-mode .ver-summary, .astrolab-host.astrolab-embed-mode #isolationFooter, .astrolab-host.astrolab-embed-mode .bg-toggle, .astrolab-host.astrolab-embed-mode #horoscopeTitle, body:has(.astrolab-host.astrolab-embed-mode) .astrolab-account-badge, body:has(.astrolab-host.astrolab-embed-mode) header, body:has(.astrolab-host.astrolab-embed-mode) #masthead, body:has(.astrolab-host.astrolab-embed-mode) .site-header, body:has(.astrolab-host.astrolab-embed-mode) .site-footer, body:has(.astrolab-host.astrolab-embed-mode) footer, body:has(.astrolab-host.astrolab-embed-mode) .astrolab-mock-sub, body:has(.astrolab-host.astrolab-embed-mode) .astrolab-account-banner, /* Cursor / mouse-follow effects del tema parent — heurístico amplio */ body:has(.astrolab-host.astrolab-embed-mode) [id*="cursor"], body:has(.astrolab-host.astrolab-embed-mode) [class*="custom-cursor"], body:has(.astrolab-host.astrolab-embed-mode) [class*="cursor-glow"], body:has(.astrolab-host.astrolab-embed-mode) [class*="cursor-follow"], body:has(.astrolab-host.astrolab-embed-mode) [class*="mouse-cursor"], body:has(.astrolab-host.astrolab-embed-mode) [class*="mouse-trail"], body:has(.astrolab-host.astrolab-embed-mode) [class*="mouse-follow"], body:has(.astrolab-host.astrolab-embed-mode) [class*="cursor-blob"], body:has(.astrolab-host.astrolab-embed-mode) .cursor, body:has(.astrolab-host.astrolab-embed-mode) .cursor-dot, body:has(.astrolab-host.astrolab-embed-mode) .cursor-outline, body:has(.astrolab-host.astrolab-embed-mode) .ec-cursor, body:has(.astrolab-host.astrolab-embed-mode) .magic-cursor, body:has(.astrolab-host.astrolab-embed-mode) .pulse-cursor, body:has(.astrolab-host.astrolab-embed-mode) .ball-cursor { display: none !important; pointer-events: none !important; } /* Hijos de .ver-scroll que NO sean el wheel también se ocultan */ .astrolab-host.astrolab-embed-mode .ver-scroll > *:not(.ver-wheel-wrap) { display: none !important; } /* html + body del iframe: sin scroll, sin margin, fondo transparente, cursor por defecto (anula cursores custom del tema). */ html:has(.astrolab-host.astrolab-embed-mode), body:has(.astrolab-host.astrolab-embed-mode) { overflow: hidden !important; margin: 0 !important; padding: 0 !important; height: 100% !important; background: transparent !important; cursor: default !important; } body:has(.astrolab-host.astrolab-embed-mode) *, body:has(.astrolab-host.astrolab-embed-mode) *::before, body:has(.astrolab-host.astrolab-embed-mode) *::after { cursor: inherit; } /* Pseudo-elementos decorativos en body (glows tipo CSS variables) */ body:has(.astrolab-host.astrolab-embed-mode)::before, body:has(.astrolab-host.astrolab-embed-mode)::after { content: none !important; display: none !important; } body:has(.astrolab-host.astrolab-embed-mode) .entry-content, body:has(.astrolab-host.astrolab-embed-mode) .site-content, body:has(.astrolab-host.astrolab-embed-mode) main, body:has(.astrolab-host.astrolab-embed-mode) #content, body:has(.astrolab-host.astrolab-embed-mode) #page { background: transparent !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; } /* Host fija al viewport del iframe — anula cualquier flex/margen del tema padre o de astro.js. v0.7.21: position:fixed inset:0. */ .astrolab-host.astrolab-embed-mode { --astrolab-header-offset: 0px !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 0 !important; max-height: 100vh !important; background: transparent !important; overflow: hidden !important; } /* v0.7.18 — Anti-flash: la `.app` se mantiene invisible hasta que astro.js abre la carta. astrolab-embed.js añade `.astrolab-embed-ready` al host tras `openChart()`. Sin esto se ve panel-home + sidebar + tools por unos ms antes de que panel-ver tome el control. */ .astrolab-host.astrolab-embed-mode .app { opacity: 0; transition: opacity 0.18s ease-out; } .astrolab-host.astrolab-embed-mode.astrolab-embed-ready .app { opacity: 1; } /* Panel activo: ocupa todo el host, sin padding, sin scroll */ .astrolab-host.astrolab-embed-mode .panel { padding: 0 !important; margin: 0 !important; background: transparent !important; overflow: hidden !important; } .astrolab-host.astrolab-embed-mode .panel.active { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100vh !important; min-height: 0 !important; max-height: 100vh !important; overflow: hidden !important; } .astrolab-host.astrolab-embed-mode .main-area { margin-left: 0 !important; background: transparent !important; } /* Wheel-wrap / ver-wheel-wrap: ocupan TODO el panel, centrados */ .astrolab-host.astrolab-embed-mode .wheel-wrap, .astrolab-host.astrolab-embed-mode .ver-wheel-wrap { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; flex: 1 1 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* v0.7.17 — `.ver-scroll` se oculta ENTERA en embed mode. Antes competía con `.ver-wheel-wrap` por la mitad del espacio flex aunque sus hijos estuviesen display:none, causando que la rueda quedase en la mitad superior del iframe con espacio vacío debajo. */ .astrolab-host.astrolab-embed-mode .ver-scroll { display: none !important; } /* v0.7.21 — SVGs en POSITION:FIXED relativos al viewport del iframe. Esto anula CUALQUIER cadena de flex/margen/padding intermedia y garantiza centrado matemático absoluto. Antes (con position:absolute relativa al wheel-wrap) los wraps no siempre llenaban el iframe → la rueda quedaba descentrada vertical/horizontalmente. */ .astrolab-host.astrolab-embed-mode .wheel-wrap > svg, .astrolab-host.astrolab-embed-mode .ver-wheel-wrap > svg, .astrolab-host.astrolab-embed-mode #zodiacWheel, .astrolab-host.astrolab-embed-mode #savedChart { width: 92vmin !important; height: 92vmin !important; max-width: 92vmin !important; max-height: 92vmin !important; min-width: 0 !important; min-height: 0 !important; background: transparent !important; display: block !important; overflow: visible !important; position: fixed !important; top: 50vh !important; left: 50vw !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 10; } .astrolab-host.astrolab-embed-mode .wheel-wrap, .astrolab-host.astrolab-embed-mode .ver-wheel-wrap { overflow: visible !important; position: relative !important; } /* === Pricing hero (v0.7.8) === */ .astrolab-pricing-hero { max-width: 1180px; margin: 2.4rem auto 0.6rem; padding: 0 1.2rem; text-align: center; font-family: 'DM Sans', system-ui, sans-serif; } .astrolab-pricing-hero .aph-title { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; font-weight: 800; letter-spacing: 0.005em; /* v0.7.9 — Gradient blanco → rosa → lila ANIMADO. Sólo se anima `background-position` con `background-size: 200% 200%` — barato para el compositor (no recalcula layout ni texto). */ background: linear-gradient(120deg, #ffffff 0%, #F53AF8 50%, #a78bfa 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: astrolab-hero-shift 4.5s ease-in-out infinite; } @keyframes astrolab-hero-shift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @media (prefers-reduced-motion: reduce) { .astrolab-pricing-hero .aph-title { animation: none; } } /* === Pricing shortcode (v0.7.0 redesign) === */ .astrolab-pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; max-width: 1320px; margin: 2.4rem auto; padding: 0 1.2rem; font-family: 'DM Sans', system-ui, sans-serif; align-items: stretch; } /* 4 → 2 → 1 columnas según ancho */ @media (max-width: 1100px) { .astrolab-pricing { grid-template-columns: repeat(2, 1fr); max-width: 760px; } } @media (max-width: 620px) { .astrolab-pricing { grid-template-columns: 1fr; max-width: 460px; } } .astrolab-pricing .apr-tier { background: radial-gradient( 120% 60% at 50% 0%, rgba(167,139,250,0.06) 0%, transparent 70% ), linear-gradient(180deg, #16161d, #0e0e14); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 1.8rem 1.5rem 1.4rem; color: #fff; position: relative; display: flex; flex-direction: column; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45); transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s, border-color 0.25s; will-change: transform; } .astrolab-pricing .apr-tier:hover { transform: translateY(-6px); border-color: rgba(167, 139, 250, 0.35); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 139, 250, 0.18) inset; } .astrolab-pricing .apr-accent { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 18px 44px rgba(167, 139, 250, 0.18), 0 0 0 1px rgba(167, 139, 250, 0.3) inset; transform: translateY(-8px); background: radial-gradient( 120% 60% at 50% 0%, rgba(167,139,250,0.18) 0%, transparent 70% ), linear-gradient(180deg, #1c1727, #11101a); } .astrolab-pricing .apr-accent:hover { transform: translateY(-14px); box-shadow: 0 26px 56px rgba(167, 139, 250, 0.28), 0 0 0 1px rgba(167, 139, 250, 0.45) inset; } .astrolab-pricing .apr-current { border-color: rgba(245, 58, 248, 0.5); } .astrolab-pricing .apr-current:hover { border-color: rgba(245, 58, 248, 0.75); } .astrolab-pricing .apr-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4); white-space: nowrap; } .astrolab-pricing .apr-badge-current { background: linear-gradient(135deg, #F53AF8, #C61CC8); color: #1a1a0a; box-shadow: 0 4px 12px rgba(245, 58, 248, 0.35); top: -10px; left: auto; right: 12px; transform: none; } /* === AstroPro — opción recomendada para profesionales (morado→naranja→neón) === */ .astrolab-pricing .apr-pro { border-color: rgba(255, 122, 26, 0.6); background: radial-gradient( 130% 70% at 50% 0%, rgba(255, 122, 26, 0.18) 0%, rgba(167,139,250,0.10) 45%, transparent 75% ), linear-gradient(180deg, #211626, #130f1a); box-shadow: 0 18px 46px rgba(255, 122, 26, 0.16), 0 0 0 1px rgba(255, 122, 26, 0.32) inset; transform: translateY(-8px); } .astrolab-pricing .apr-pro:hover { transform: translateY(-14px); border-color: rgba(255, 122, 26, 0.85); box-shadow: 0 26px 58px rgba(255, 122, 26, 0.3), 0 0 0 1px rgba(245, 58, 248, 0.4) inset; } .astrolab-pricing .apr-pro .apr-feats li::before { color: #FFB23D; } .astrolab-pricing .apr-pro .apr-feats li strong { color: #FF9D3D; } .astrolab-pricing .apr-pro .apr-cta { background: linear-gradient(135deg, #FF7A1A 0%, #F53AF8 100%); box-shadow: 0 8px 22px rgba(255, 122, 26, 0.45); } .astrolab-pricing .apr-pro .apr-cta:hover { box-shadow: 0 10px 28px rgba(245, 58, 248, 0.55); } .astrolab-pricing .apr-badge-pro { background: linear-gradient(135deg, #FF7A1A, #F53AF8); box-shadow: 0 4px 14px rgba(255, 122, 26, 0.5); } .astrolab-pricing .apr-badge-soon { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 178, 61, 0.55); color: #FFB23D; box-shadow: none; top: -10px; left: auto; right: 12px; transform: none; } /* "Próximamente" inline junto al título (sin solaparse con el badge) */ .astrolab-pricing .apr-soon { display: inline-block; vertical-align: middle; margin-left: 0.5rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FFB23D; background: rgba(255, 178, 61, 0.12); border: 1px solid rgba(255, 178, 61, 0.5); padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .astrolab-pricing .apr-cta-waitlist { width: 100%; font: inherit; } .astrolab-pricing .apr-tagline { margin: -0.2rem 0 0.9rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.62); line-height: 1.4; } .astrolab-pricing .apr-coming-note { margin: 0.5rem 0 0; font-size: 0.74rem; color: rgba(255, 178, 61, 0.85); text-align: center; line-height: 1.4; } .astrolab-pricing .apr-title { margin: 0 0 0.5rem; /* v0.7.7 — Títulos x2 para que sean los protagonistas del card */ font-size: 2.1rem; line-height: 1.1; font-weight: 800; color: #fff; letter-spacing: 0.005em; } .astrolab-pricing .apr-price { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; } .astrolab-pricing .apr-price strong { display: inline-block; font-size: 1.6rem; color: #fff; font-weight: 700; margin-right: 0.3rem; } .astrolab-pricing .apr-feats { list-style: none; margin: 0 0 1.2rem; padding: 0; flex: 1; } .astrolab-pricing .apr-feats li { /* v0.7.7 — Texto de features +2pt (≈0.82rem → 1rem) para legibilidad */ font-size: 1rem; padding: 6px 0 6px 1.5rem; color: rgba(255, 255, 255, 0.92); position: relative; line-height: 1.5; } .astrolab-pricing .apr-feats li strong { color: #F53AF8; font-weight: 700; } .astrolab-pricing .apr-feats li::before { content: '✓'; position: absolute; left: 0; top: 5px; color: #BC99FF; font-weight: 700; } .astrolab-pricing .apr-cta { background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; border: none; text-align: center; padding: 0.75rem 1.2rem; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.88rem; display: inline-block; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 6px 18px rgba(167, 139, 250, 0.35); cursor: pointer; } .astrolab-pricing .apr-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(167, 139, 250, 0.5); } .astrolab-pricing .apr-cta-disabled { background: rgba(245, 58, 248, 0.16); border: 1px solid rgba(245, 58, 248, 0.5); color: #ffd0fa; box-shadow: none; cursor: default; font-weight: 700; } .astrolab-pricing .apr-cta-disabled:hover { transform: none; box-shadow: none; } /* CTA secundario: downgrade / cancelar */ .astrolab-pricing .apr-cta-secondary { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); box-shadow: none; } .astrolab-pricing .apr-cta-secondary:hover { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .astrolab-pricing .apr-cta-danger { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.45); color: rgba(255, 200, 200, 0.92); box-shadow: none; } .astrolab-pricing .apr-cta-danger:hover { background: rgba(239, 68, 68, 0.22); color: #fff; box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3); } .astrolab-pricing .apr-cta-row { display: flex; flex-direction: column; gap: 0.45rem; margin-top: auto; } /* Aria hint del intercambio plan ↔ plan */ .astrolab-pricing .apr-note { margin: 0 0 0.6rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } /* === Modal lista de espera AstroPro === */ .astrolab-waitlist-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(8, 6, 12, 0.78); backdrop-filter: blur(4px); font-family: 'DM Sans', system-ui, sans-serif; } .astrolab-waitlist-modal .awm-card { position: relative; width: 100%; max-width: 420px; color: #fff; border-radius: 18px; padding: 2rem 1.7rem 1.7rem; background: radial-gradient(130% 70% at 50% 0%, rgba(255, 122, 26, 0.18) 0%, rgba(167,139,250,0.10) 45%, transparent 75%), linear-gradient(180deg, #1c1727, #11101a); border: 1px solid rgba(255, 122, 26, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .astrolab-waitlist-modal .awm-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.6rem; line-height: 1; cursor: pointer; } .astrolab-waitlist-modal .awm-close:hover { color: #fff; } .astrolab-waitlist-modal .awm-title { margin: 0 0 0.6rem; font-size: 1.4rem; font-weight: 800; background: linear-gradient(135deg, #FF7A1A, #F53AF8); -webkit-background-clip: text; background-clip: text; color: transparent; } .astrolab-waitlist-modal .awm-text { margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); } .astrolab-waitlist-modal .awm-form { display: flex; flex-direction: column; gap: 0.6rem; } .astrolab-waitlist-modal .awm-input { width: 100%; padding: 0.75rem 0.9rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 0.95rem; } .astrolab-waitlist-modal .awm-input:focus { outline: none; border-color: rgba(255, 122, 26, 0.7); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); } .astrolab-waitlist-modal .awm-submit { padding: 0.78rem 1.2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 0.92rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #FF7A1A 0%, #F53AF8 100%); box-shadow: 0 8px 22px rgba(255, 122, 26, 0.45); transition: transform 0.15s, box-shadow 0.15s; } .astrolab-waitlist-modal .awm-submit:hover:not(:disabled) { transform: translateY(-1px); } .astrolab-waitlist-modal .awm-submit:disabled { opacity: 0.65; cursor: default; } .astrolab-waitlist-modal .awm-msg { margin: 0.9rem 0 0; font-size: 0.88rem; line-height: 1.5; min-height: 1.2em; } /* === Modal exportar cartas (selección) === */ .astrolab-export-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(8, 6, 12, 0.78); backdrop-filter: blur(4px); font-family: 'DM Sans', system-ui, sans-serif; } .astrolab-export-modal .aem-card { position: relative; width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; color: #fff; border-radius: 18px; padding: 1.8rem 1.6rem 1.6rem; background: linear-gradient(180deg, #1c1727, #11101a); border: 1px solid rgba(167, 139, 250, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); } .astrolab-export-modal .aem-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.6rem; line-height: 1; cursor: pointer; } .astrolab-export-modal .aem-close:hover { color: #fff; } .astrolab-export-modal .aem-title { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 800; color: #F53AF8; } .astrolab-export-modal .aem-text { margin: 0 0 0.9rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); } .astrolab-export-modal .aem-tools { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; } .astrolab-export-modal .aem-tools button { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font-size: 0.74rem; padding: 0.35rem 0.7rem; border-radius: 8px; cursor: pointer; } .astrolab-export-modal .aem-tools button:hover { color: #fff; border-color: rgba(167,139,250,0.5); } .astrolab-export-modal .aem-count { margin-left: auto; font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); } .astrolab-export-modal .aem-list { overflow-y: auto; flex: 1; margin: 0 -0.3rem 1rem; padding: 0 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .astrolab-export-modal .aem-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; font-size: 0.88rem; } .astrolab-export-modal .aem-row:last-child { border-bottom: none; } .astrolab-export-modal .aem-chk { accent-color: #F53AF8; width: 16px; height: 16px; flex: none; } .astrolab-export-modal .aem-name { font-weight: 600; color: #fff; } .astrolab-export-modal .aem-meta { margin-left: auto; font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } .astrolab-export-modal .aem-export { padding: 0.8rem 1.2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 0.92rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #a78bfa, #8b6dec); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.4); } .astrolab-export-modal .aem-export:hover { transform: translateY(-1px); } /* === Account badge (chip flotante en footer/header del tema) === */ .astrolab-account-badge { position: fixed; z-index: 99999; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 0.55rem; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(20, 20, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .astrolab-account-badge:hover { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 14px 36px rgba(167, 139, 250, 0.2); color: #fff; } .astrolab-account-badge.aab-anchored { position: relative; bottom: auto; right: auto; box-shadow: none; background: transparent; border-color: rgba(255, 255, 255, 0.14); } .astrolab-account-badge .aab-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #a78bfa, #6c52d8); color: #fff; font-weight: 700; font-size: 0.85rem; overflow: hidden; flex-shrink: 0; } .astrolab-account-badge .aab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .astrolab-account-badge .aab-name { font-weight: 700; line-height: 1.05; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .astrolab-account-badge .aab-level { display: block; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 600; margin-top: 1px; } .astrolab-account-badge .aab-level.aab-level-designer { color: #f0a8ff; } .astrolab-account-badge .aab-level.aab-level-astrolab { color: #b9a4ff; } .astrolab-account-badge .aab-level.aab-level-free { color: rgba(255,255,255,0.55); } .astrolab-account-badge .aab-level.aab-level-visitor { color: rgba(255,255,255,0.45); } /* Profile widget (Sol/Luna/Asc + datos natales) */ .astrolab-profile { max-width: 720px; margin: 2rem auto; padding: 1.6rem 1.4rem; background: linear-gradient(180deg, #16161d, #0e0e14); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; color: #fff; font-family: 'DM Sans', system-ui, sans-serif; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); } .astrolab-profile h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; } .astrolab-profile .ap-sub { margin: 0 0 1.2rem; color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; } .astrolab-profile .ap-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; } @media (max-width: 600px) { .astrolab-profile .ap-trio { grid-template-columns: 1fr; } } .astrolab-profile .ap-cell { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.9rem 1rem; text-align: center; } .astrolab-profile .ap-cell label { display: block; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.4rem; font-weight: 700; } .astrolab-profile .ap-cell .ap-sign { font-size: 1.1rem; font-weight: 700; color: #fff; } .astrolab-profile .ap-cell .ap-sign-empty { color: rgba(255, 255, 255, 0.35); font-style: italic; font-weight: 500; font-size: 0.85rem; } .astrolab-profile .ap-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; } .astrolab-profile .ap-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; } .astrolab-profile .ap-form input, .astrolab-profile .ap-form select { background: #0c0c12; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0.5rem 0.6rem; color: #fff; font-size: 0.85rem; font-family: inherit; } .astrolab-profile .ap-form input:focus, .astrolab-profile .ap-form select:focus { outline: none; border-color: rgba(167, 139, 250, 0.6); } .astrolab-profile .ap-save { background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; border: none; padding: 0.7rem 1.4rem; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.88rem; transition: transform 0.15s, box-shadow 0.15s; } .astrolab-profile .ap-save:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.4); } .astrolab-profile .ap-feedback { margin-top: 0.7rem; font-size: 0.78rem; min-height: 1.2em; color: rgba(167, 139, 250, 0.92); } .astrolab-profile .ap-feedback.ap-feedback-error { color: #ff8080; } /* ═══════════════════════════════════════════════════════════════ v0.6.2 — Badge signo + drawer overlay no oscurece el menú + tools-col anclada al wheel-wrap en mobile ═══════════════════════════════════════════════════════════════ */ /* Badge "Aries / Tauro / …" con color zodiacal — junto al toggle */ .astrolab-host .horo-sign-name { display: none; align-items: center; font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; margin-left: 0.5rem; padding: 2px 0; line-height: 1; } @media (max-width: 768px) { .astrolab-host .header-app-mobile .horo-corner .horo-sign-name { font-size: 0.74rem !important; margin-left: 0.4rem; flex-shrink: 0; } } /* Drawer overlay: NO cubre el área del propio drawer === Causa del menú "oscurecido": el ::after con inset:0 cubría TODA la pantalla incluyendo el sidebar. Aunque z-index del sidebar (100) era mayor que el overlay (95), en algunos contextos de stacking iOS la sidebar quedaba bajo el overlay → menú gris. Solución: el overlay empieza en `left: min(280px, 85vw)` (justo donde acaba el drawer). */ @media (max-width: 768px) { .astrolab-host.sidebar-open::after { top: 0 !important; left: min( 280px, 85vw ) !important; right: 0 !important; bottom: 0 !important; inset: auto !important; background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* tools-col anclada al wheel-wrap (NO flotante) === astro.js JS la mueve dentro del .wheel-wrap o .ver-wheel-wrap del panel activo. wheel-wrap es position:relative; tools-col es absolute en el lateral derecho, height auto según botones. */ .astrolab-host .wheel-wrap, .astrolab-host .ver-wheel-wrap { position: relative !important; } .astrolab-host .wheel-wrap > .tools-col, .astrolab-host .ver-wheel-wrap > .tools-col { /* v0.7.3 — Anclar al borde derecho del viewport con position:fixed independientemente del ancho/padding del wheel-wrap o del DOM parent. Garantiza alineación con el borde de pantalla en todos los dispositivos. */ position: fixed !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; left: auto !important; height: auto !important; max-height: 80vh !important; z-index: 60 !important; } } /* ═══════════════════════════════════════════════════════════════ v0.6.3 — Mobile: separación tools-col ↔ wheel + sign-name a la izquierda ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* v0.7.3 — Reducir wheel SIEMPRE (≥130px reservados para tools-col + gap) para que el chart no se acerque al borde derecho ni se solape con tools-col que ahora está fixed al borde del viewport. */ .astrolab-host #panel-home .wheel-wrap > svg { max-width: calc(100vw - 140px) !important; } .astrolab-host .ver-wheel-wrap > svg, .astrolab-host #panel-ver .ver-wheel-wrap > svg, .astrolab-host #panel-relocacion .wheel-wrap > svg, .astrolab-host #panel-retorno .wheel-wrap > svg, .astrolab-host #panel-cita-nueva .wheel-wrap > svg, .astrolab-host #panel-rs-full .wheel-wrap > svg, .astrolab-host #panel-lunar .wheel-wrap > svg, .astrolab-host #panel-vincular .wheel-wrap > svg { max-width: calc(100vw - 130px) !important; } /* tools-col también respeta el ancho fijo y queda al borde */ .astrolab-host .tools-col { width: 44px !important; max-width: 44px !important; } /* v0.7.9 — Sign-name a la IZQUIERDA + toggle SIEMPRE a la derecha independientemente de que el horóscopo esté ON u OFF. El horo-corner se ancla con `margin-left: auto`, así que cuando hay sign-name queda separación; cuando no hay sign-name, el toggle sigue en la misma posición derecha (no salta a la izquierda). */ .astrolab-host .header-app-mobile .hm-line-2 { justify-content: flex-start !important; padding-right: 8px !important; } .astrolab-host .header-app-mobile .hm-line-2 > .horo-sign-name { display: inline-flex !important; margin-left: 0 !important; padding-left: 6px !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; } .astrolab-host .header-app-mobile .hm-line-2 > .horo-sign-name[hidden], .astrolab-host .header-app-mobile .hm-line-2 > .horo-sign-name[style*="display: none"], .astrolab-host .header-app-mobile .hm-line-2 > .horo-sign-name[style*="display:none"] { display: none !important; } /* Toggle (horo-corner) anclado a la derecha SIEMPRE */ .astrolab-host .header-app-mobile .hm-line-2 > .horo-corner { margin-left: auto !important; } } /* ═══════════════════════════════════════════════════════════════ v0.7.2 — Account badge en header del tema (desktop) + level banner en páginas PMS + amarillo lima ═══════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { .astrolab-account-badge:not(.aab-anchored) { top: 12px !important; right: 24px !important; bottom: auto !important; } body.admin-bar .astrolab-account-badge:not(.aab-anchored) { top: calc( 32px + 12px ) !important; } } .astrolab-account-badge.aab-in-menu { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; background: transparent !important; border-color: rgba(255, 255, 255, 0.15); box-shadow: none; } .astrolab-account-banner { max-width: 920px; margin: 1.4rem auto 1.6rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.18) 0%, transparent 70%), linear-gradient(180deg, #16161d, #0e0e14); border: 1px solid rgba(245, 58, 248, 0.4); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); } .astrolab-account-banner .aab-banner-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #6c52d8); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-weight: 700; font-size: 1.4rem; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.18); } .astrolab-account-banner .aab-banner-avatar img { width: 100%; height: 100%; object-fit: cover; } .astrolab-account-banner .aab-banner-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 220px; } .astrolab-account-banner .aab-banner-name { font-size: 1.05rem; font-weight: 700; color: #fff; } .astrolab-account-banner .aab-banner-level { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); } .astrolab-account-banner .aab-banner-level strong { color: #F53AF8; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; font-size: 0.72rem; } .astrolab-account-banner .aab-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .astrolab-account-banner .aab-banner-actions a { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 9px; font-size: 0.82rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; } .astrolab-account-banner .aab-banner-actions a:hover { background: rgba(245, 58, 248, 0.14); border-color: rgba(245, 58, 248, 0.55); color: #fff; } .astrolab-account-banner .aab-banner-actions a.aab-banner-primary { background: linear-gradient(135deg, #a78bfa, #8b6dec); border-color: transparent; color: #fff; } .astrolab-account-banner .aab-banner-actions a.aab-banner-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(167, 139, 250, 0.45); } /* PMS nav styling — chips lila */ .pms-account-navigation ul { display: flex !important; gap: 0.4rem !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 0 0 1rem !important; } .pms-account-navigation li { margin: 0 !important; } .pms-account-navigation a { display: inline-block; padding: 0.5rem 0.95rem; border-radius: 9px; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: background 0.15s, color 0.15s; } .pms-account-navigation a.pms-account-navigation-link--active { background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; } /* v0.7.3 — Tarjeta MOCK de suscripción dentro de /account/subscriptions/ */ .astrolab-mock-sub { max-width: 920px; margin: 0 auto 1.4rem; padding: 1.4rem 1.5rem; border-radius: 16px; background: radial-gradient(120% 60% at 80% 0%, rgba(245, 58, 248, 0.12) 0%, transparent 70%), linear-gradient(180deg, #16161d, #0e0e14); border: 1px solid rgba(245, 58, 248, 0.4); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 1rem; } .astrolab-mock-sub .ams-row { display: flex; flex-direction: column; gap: 0.3rem; } .astrolab-mock-sub .ams-pill { display: inline-block; align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #F53AF8, #C61CC8); color: #1a1a0a; box-shadow: 0 4px 10px rgba(245, 58, 248, 0.3); } .astrolab-mock-sub .ams-title { margin: 0; font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; } .astrolab-mock-sub .ams-meta { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } .astrolab-mock-sub .ams-feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.2rem; } @media (max-width: 600px) { .astrolab-mock-sub .ams-feats { grid-template-columns: 1fr; } } .astrolab-mock-sub .ams-feats li { padding: 5px 0 5px 1.4rem; font-size: 1rem; color: rgba(255, 255, 255, 0.92); position: relative; line-height: 1.5; } .astrolab-mock-sub .ams-feats li strong { color: #F53AF8; font-weight: 700; } .astrolab-mock-sub .ams-feats li::before { content: '✓'; position: absolute; left: 0; top: 4px; color: #C61CC8; font-weight: 700; } .astrolab-mock-sub .ams-actions { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; } .astrolab-mock-sub .ams-cta { background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff !important; text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 10px; font-weight: 700; font-size: 0.88rem; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .astrolab-mock-sub .ams-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.4); } .astrolab-mock-sub .ams-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); line-height: 1.4; flex: 1; min-width: 200px; } /* ═══════════════════════════════════════════════════════════════ v0.7.5 — /register/ rediseñada con estética /membresia ═══════════════════════════════════════════════════════════════ */ .astrolab-register-wrap { max-width: 1180px; margin: 2rem auto 3rem; padding: 0 1.2rem; color: #fff; font-family: 'DM Sans', system-ui, sans-serif; } /* Desktop: 2 columnas — planes a la izquierda, formulario+pago a la derecha */ @media (min-width: 1000px) { .astrolab-register-wrap { display: grid; grid-template-columns: 360px 1fr; grid-template-areas: "hero hero" "perks form" "foot foot"; column-gap: 2rem; row-gap: 1.6rem; align-items: start; max-width: 1180px; } .astrolab-register-wrap .arw-hero { grid-area: hero; } .astrolab-register-wrap .arw-perks { grid-area: perks; } .astrolab-register-wrap .arw-form-card { grid-area: form; } .astrolab-register-wrap .arw-footer-note { grid-area: foot; } } .astrolab-register-wrap .arw-hero { text-align: center; margin-bottom: 1.4rem; } .astrolab-register-wrap .arw-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #F53AF8; padding: 4px 12px; border: 1px solid rgba(245, 58, 248, 0.4); border-radius: 999px; background: rgba(245, 58, 248, 0.08); margin-bottom: 0.8rem; } .astrolab-register-wrap .arw-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: 0.005em; margin: 0 0 0.5rem; color: #fff; } .astrolab-register-wrap .arw-subtitle { margin: 0 auto; max-width: 640px; color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; line-height: 1.5; } .astrolab-register-wrap .arw-perks { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.6rem auto 1.8rem; max-width: 980px; } @media (min-width: 1000px) { .astrolab-register-wrap .arw-perks { margin: 0; max-width: none; } } .astrolab-register-wrap .arw-perk { background: linear-gradient(180deg, #141019, #0b0b10); /* Caja de línea gruesa blanca + bordes redondeados */ border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 18px; padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; } .astrolab-register-wrap .arw-perk strong { font-size: 1.02rem; color: #fff; letter-spacing: 0.01em; } .astrolab-register-wrap .arw-perk span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.62); line-height: 1.5; } .astrolab-register-wrap .arw-perk-accent { border-color: #FF9D3D; background: radial-gradient(130% 70% at 50% 0%, rgba(255, 122, 26, 0.18) 0%, rgba(167,139,250,0.08) 45%, transparent 75%), linear-gradient(180deg, #1c1424, #0e0b13); box-shadow: 0 10px 26px rgba(255, 122, 26, 0.16); } .astrolab-register-wrap .arw-form-card { /* Cuadro de pago en negro */ background: #08080b; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 18px; padding: 1.7rem 1.7rem 1.5rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } .astrolab-register-wrap .arw-footer-note { margin-top: 1rem; text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; } .astrolab-register-wrap .arw-footer-note a { color: #bc99ff; text-decoration: none; font-weight: 600; } .astrolab-register-wrap .arw-footer-note a:hover { color: #F53AF8; } /* === PMS form skin (within .astrolab-register-wrap) === */ .astrolab-register-wrap .pms-form, .astrolab-register-wrap .pms-block-container { color: #fff; } .astrolab-register-wrap .pms-form-fields-wrapper { list-style: none; padding: 0; margin: 0; } .astrolab-register-wrap .pms-field { margin-bottom: 1rem; list-style: none; } .astrolab-register-wrap .pms-field > label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.35rem; } .astrolab-register-wrap .pms-field input[type="text"], .astrolab-register-wrap .pms-field input[type="email"], .astrolab-register-wrap .pms-field input[type="password"], .astrolab-register-wrap .pms-field input[type="tel"], .astrolab-register-wrap .pms-field input[type="number"], .astrolab-register-wrap .pms-field input[type="url"], .astrolab-register-wrap .pms-field select, .astrolab-register-wrap .pms-field textarea { width: 100%; background: #0c0c12; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 0.7rem 0.9rem; color: #fff; font-size: 0.92rem; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .astrolab-register-wrap .pms-field input:focus, .astrolab-register-wrap .pms-field select:focus, .astrolab-register-wrap .pms-field textarea:focus { outline: none; border-color: rgba(167, 139, 250, 0.65); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); } .astrolab-register-wrap .pms-field-description, .astrolab-register-wrap .pms-field-required { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; } /* Plan tiles styled like /membresia */ .astrolab-register-wrap .pms-field-subscriptions { margin-bottom: 1.4rem; } .astrolab-register-wrap .pms-field-subscriptions > label { display: block; margin-bottom: 0.6rem; } .astrolab-register-wrap .pms-subscription-plan { display: block; background: radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.05) 0%, transparent 70%), linear-gradient(180deg, #16161d, #0e0e14); border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 0.7rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; cursor: pointer; position: relative; } .astrolab-register-wrap .pms-subscription-plan:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } /* Plan seleccionado */ .astrolab-register-wrap .pms-subscription-plan:has(input[type="radio"]:checked), .astrolab-register-wrap .pms-subscription-plan.pms-subscription-plan-selected { border-color: #F53AF8; box-shadow: 0 0 0 3px rgba(245, 58, 248, 0.22), 0 12px 30px rgba(245, 58, 248, 0.16); } .astrolab-register-wrap .pms-subscription-plan label { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; margin: 0; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; color: #fff; } .astrolab-register-wrap .pms-subscription-plan input[type="radio"] { margin-top: 0.25rem; accent-color: #a78bfa; transform: scale(1.2); flex-shrink: 0; } .astrolab-register-wrap .pms-subscription-plan-name { display: block; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; } .astrolab-register-wrap .pms-subscription-plan-price { display: block; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; margin-top: 0.15rem; } .astrolab-register-wrap .pms-subscription-plan-price-value { color: #F53AF8; font-weight: 700; font-size: 1.05em; } .astrolab-register-wrap .pms-subscription-plan-currency, .astrolab-register-wrap .pms-subscription-plan-duration, .astrolab-register-wrap .pms-divider { color: rgba(255, 255, 255, 0.55); } .astrolab-register-wrap .pms-subscription-plan-description { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; line-height: 1.5; padding-left: calc(0.7rem + 1.2em); /* alinea con el label */ } .astrolab-register-wrap .pms-subscription-plan-trial, .astrolab-register-wrap .pms-subscription-plan-sign-up-fee:empty { display: none; } /* Selected plan visual */ .astrolab-register-wrap .pms-subscription-plan:has(input[type="radio"]:checked) { border-color: rgba(167, 139, 250, 0.7); background: radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.18) 0%, transparent 70%), linear-gradient(180deg, #1c1727, #11101a); box-shadow: 0 12px 32px rgba(167, 139, 250, 0.22), 0 0 0 1px rgba(167, 139, 250, 0.4) inset; } /* Submit button */ .astrolab-register-wrap .pms-form input[type="submit"], .astrolab-register-wrap .pms-form button[type="submit"] { background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; border: none; padding: 0.85rem 1.6rem; border-radius: 11px; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; letter-spacing: 0.02em; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 8px 22px rgba(167, 139, 250, 0.35); width: 100%; margin-top: 0.6rem; } .astrolab-register-wrap .pms-form input[type="submit"]:hover, .astrolab-register-wrap .pms-form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(167, 139, 250, 0.5); } /* PMS validation messages */ .astrolab-register-wrap .pms-error, .astrolab-register-wrap .pms-success, .astrolab-register-wrap .pms-info, .astrolab-register-wrap .pms-alert { padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.88rem; margin: 0 0 1rem; border: 1px solid transparent; } .astrolab-register-wrap .pms-error, .astrolab-register-wrap .pms-alert { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #ffb3b3; } .astrolab-register-wrap .pms-success { background: rgba(245, 58, 248, 0.12); border-color: rgba(245, 58, 248, 0.45); color: #ffd0fa; } .astrolab-register-wrap .pms-info { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.4); color: #d8c7ff; } /* Login link / footer */ .astrolab-register-wrap a.pms-register-page-link, .astrolab-register-wrap a.pms-account-navigation-link { color: #bc99ff; } .astrolab-register-wrap a:hover { color: #F53AF8; } /* v0.7.6 — Aviso de downgrade (cartas recortadas) */ .astrolab-downgrade-notice { max-width: 920px; margin: 1.2rem auto 1.2rem; padding: 0.85rem 1.1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.45); color: #ffd7d7; font-family: 'DM Sans', system-ui, sans-serif; display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.88rem; line-height: 1.5; } .astrolab-downgrade-notice .adn-icon { font-size: 1.1rem; color: #ff9a9a; flex-shrink: 0; } .astrolab-downgrade-notice strong { color: #fff; } /* v0.7.6 — bbPress forum gate (visitor / free no pueden escribir) */ .astrolab-forum-gate, .astrolab-course-gate { max-width: 820px; margin: 1.4rem auto; padding: 1.1rem 1.3rem; border-radius: 14px; background: radial-gradient(120% 60% at 50% 0%, rgba(167, 139, 250, 0.16) 0%, transparent 70%), linear-gradient(180deg, #16161d, #0e0e14); border: 1px solid rgba(167, 139, 250, 0.4); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; display: flex; flex-direction: column; gap: 0.4rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); } .astrolab-forum-gate strong, .astrolab-course-gate strong { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #F53AF8; } .astrolab-forum-gate p, .astrolab-course-gate p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); line-height: 1.5; } .astrolab-forum-gate .afg-cta, .astrolab-course-gate .afg-cta { align-self: flex-start; margin-top: 0.4rem; background: linear-gradient(135deg, #a78bfa, #8b6dec); color: #fff; text-decoration: none; padding: 0.55rem 1rem; border-radius: 9px; font-weight: 700; font-size: 0.85rem; transition: transform 0.15s, box-shadow 0.15s; } .astrolab-forum-gate .afg-cta:hover, .astrolab-course-gate .afg-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(167, 139, 250, 0.4); } /* v0.7.10 — Geolocalizar SOLO en panel-home (carta del momento). astro.js ya hace `data-ctx="home"` pero algún flujo del toggle de horóscopo puede reescribir display=''. Esta regla CSS es la red de seguridad definitiva — nunca aparece fuera de panel-home. */ .astrolab-host:not(:has(#panel-home.active)) #geolocalizeBtn { display: none !important; }