html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
:root{
--bg:#0a0a08;--bg-deep:#0d0c09;
--card:rgba(255,248,230,.07);--card-soft:rgba(255,248,220,.05);
--text:#f5ecd7;--text-inverse:#f5ecd7;--muted:#a0907a;
--line:rgba(212,175,95,.2);
--brand:#c9a84c;--brand-strong:#a8862f;--glow:#d4af57;
--gold:#d4af57;--gold-light:#e8cb7a;--gold-dark:#a8862f;
--shadow:0 24px 60px rgba(0,0,0,.6);
font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif
}
*{box-sizing:border-box}html{min-height:100%;background:#0a0a08}body{margin:0;min-height:100vh;color:var(--text);background:transparent;overflow-x:hidden}body::before{display:none}body::after{display:none}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:.9rem 1.4rem;background:linear-gradient(135deg,#c9a84c 0%,#a8862f 100%);color:#0a0a08;font-weight:700;letter-spacing:.03em;box-shadow:0 8px 24px rgba(212,175,87,.25),inset 0 1px 0 rgba(255,248,200,.3);font-family:inherit;transition:all .2s ease}button:hover{background:linear-gradient(135deg,#e0be62 0%,#c9a84c 100%);box-shadow:0 12px 32px rgba(212,175,87,.4),inset 0 1px 0 rgba(255,248,200,.4);transform:translateY(-1px)}button:active{transform:translateY(0)}button.secondary{background:rgba(212,175,87,.1);color:var(--gold-light);border:1px solid rgba(212,175,87,.25);box-shadow:none}button.secondary:hover{background:rgba(212,175,87,.18);border-color:rgba(212,175,87,.4)}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;background:rgba(255,255,255,.96);color:var(--text);caret-color:var(--text);-webkit-text-fill-color:var(--text)}input::placeholder,textarea::placeholder{color:#7a8795}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--text)!important;box-shadow:0 0 0 1000px rgba(255,255,255,.96) inset;transition:background-color 9999s ease-in-out 0s}textarea{min-height:110px;resize:vertical}.shell{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:1.25rem}.shell-admin{max-width:1440px}.topbar{display:flex;justify-content:space-between;gap:.5rem;align-items:center;margin-bottom:1.2rem;padding:.75rem 1rem;background:rgba(10,10,8,.7);border:1px solid rgba(212,175,87,.18);border-radius:22px;backdrop-filter:blur(20px);box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(212,175,87,.08);width:100%;box-sizing:border-box}.brand{font-size:1.5rem;font-weight:800;color:var(--text-inverse)}.subtitle{color:rgba(235,244,255,.72);margin-top:.2rem}.nav-links{display:flex;flex-wrap:nowrap;gap:.4rem;align-items:center;min-width:0;flex-shrink:1;max-width:100%;overflow:visible}.nav-links a{padding:.5rem .9rem;background:rgba(0,0,0,.22);border:1px solid rgba(212,175,87,.55);border-radius:999px;color:#e8cb7a;backdrop-filter:blur(10px);font-size:.82rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:all .25s ease;text-shadow:0 1px 8px rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(212,175,87,.15)}
.nav-links a:hover{background:rgba(212,175,87,.18);border-color:rgba(212,175,87,.85);color:#fff;box-shadow:0 0 12px rgba(212,175,87,.2),inset 0 1px 0 rgba(255,220,100,.2)}.main{display:flex;flex-direction:column;gap:1.2rem}.topbar-public{align-items:center;margin-bottom:0;background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;padding:.5rem 0 0}.topbar-public .subtitle{display:none}.nav-links-public{justify-content:flex-end;flex-shrink:1;min-width:0;overflow:visible}.company-access-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0!important;padding:0!important;background:rgba(0,0,0,.22)!important;border:1px solid rgba(212,175,87,.55)!important;border-radius:11px!important;box-shadow:inset 0 1px 0 rgba(212,175,87,.15)!important;transition:all .25s ease;backdrop-filter:blur(10px)}.company-access-icon:hover{background:rgba(212,175,87,.18)!important;border-color:rgba(212,175,87,.85)!important;box-shadow:0 0 12px rgba(212,175,87,.2),inset 0 1px 0 rgba(255,220,100,.2)!important}.company-access-icon svg{width:20px;height:20px;color:#e8cb7a;opacity:1}
@keyframes floatField{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-16px) scale(1.015)}}@keyframes goldGlow{0%,100%{opacity:.6}50%{opacity:1}}
.hero{min-height:70vh;display:grid;place-items:center}.hero-search{min-height:92vh;display:grid;place-items:center;padding:2rem 0}.hero-card{max-width:900px;background:rgba(12,10,6,.65);padding:2rem;border-radius:28px;box-shadow:var(--shadow);border:1px solid rgba(212,175,87,.18);backdrop-filter:blur(14px)}.hero-card-search{width:min(980px,92vw);padding:2.8rem 2.4rem;background:rgba(8,7,4,.7);border:1px solid rgba(212,175,87,.2);box-shadow:0 32px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(212,175,87,.08);backdrop-filter:blur(28px);border-radius:28px}.hero-card h1{font-size:clamp(2rem,4vw,3.2rem);margin:.2rem 0 .8rem;color:#f5ecd7;font-family:"Cormorant Garamond",Georgia,serif;font-weight:700}.hero-card p{color:rgba(245,236,215,.7);font-size:1rem}.search-intro{max-width:760px}.search-box{display:flex;gap:.75rem;align-items:center;margin:1.3rem 0}.search-box input{font-size:1rem;height:54px}.search-box-integrated{margin-top:1.8rem}.search-field-wrap{position:relative;width:100%}.search-field-wrap input{font-size:1.08rem;height:68px;padding:0 10rem 0 4rem;border-radius:20px;border:1px solid rgba(212,175,87,.25);background:rgba(6,5,3,.85);box-shadow:inset 0 1px 0 rgba(212,175,87,.06),0 8px 24px rgba(0,0,0,.4);color:#f5ecd7;caret-color:#d4af57;-webkit-text-fill-color:#f5ecd7}.search-field-wrap input::placeholder{color:rgba(160,144,122,.6)}.search-field-wrap input:focus{outline:none;border-color:rgba(212,175,87,.7);box-shadow:0 0 0 3px rgba(212,175,87,.12),0 8px 24px rgba(0,0,0,.4)}.search-icon{position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:22px;color:rgba(212,175,87,.7)}.search-icon svg{width:22px;height:22px}.search-hint{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding:.55rem 1.2rem;border-radius:14px;background:linear-gradient(135deg,#c9a84c,#a8862f);color:#0a0a08;font-size:.88rem;font-weight:700;letter-spacing:.02em;border:none;cursor:pointer}
.section-header{display:flex;justify-content:space-between;align-items:end;gap:1rem}.section-header.compact{margin-top:.5rem}.muted{color:var(--muted)}
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;background:var(--card);border:1px solid rgba(171,205,241,.22);padding:1rem;border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.filter-bar label{display:flex;flex-direction:column;gap:.35rem;min-width:160px;font-size:.92rem}.filter-bar .mini{min-width:120px}.filter-note{font-size:.9rem;color:var(--muted)}
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.results-list{display:flex;flex-direction:column;gap:1rem}.result-card{position:relative;min-height:370px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#ccc;cursor:pointer;border:none;padding:0;text-align:left}.result-card-list{min-height:0;display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);background:linear-gradient(135deg,rgba(11,28,49,.92),rgba(8,22,39,.96));border:1px solid rgba(149,198,255,.18)}.result-image{position:absolute;inset:0;background-size:cover;background-position:center}.result-image-list{position:relative;min-height:240px}.result-overlay{position:relative;z-index:1;min-height:370px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(5,10,24,.06),rgba(5,10,24,.85))}.result-overlay-list{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;background:linear-gradient(135deg,rgba(11,28,49,.88),rgba(8,22,39,.98));padding:1.2rem}.result-price{align-self:flex-start;margin:1rem;padding:.38rem .68rem;border-radius:999px;background:rgba(255,255,255,.94);font-size:.88rem;font-weight:700;color:#10212b}.result-price-list{margin:0;font-size:1rem;box-shadow:0 10px 24px rgba(2,12,28,.22)}.result-content{padding:1rem;color:#fff}.result-content-list{padding:0;display:flex;flex-direction:column;gap:.3rem}.result-content h3{margin:0 0 .3rem;font-size:1.25rem}.result-type{margin:0 0 .45rem;font-weight:700;text-transform:capitalize}.result-desc{margin:0 0 .9rem;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.result-meta{display:flex;gap:.55rem;flex-wrap:wrap;font-size:.83rem}.result-meta span{display:flex;align-items:center;gap:.32rem;padding:.36rem .56rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:999px;backdrop-filter:blur(8px)}.result-meta.wide span{background:#f2f7ff;color:var(--text);border-color:#dce7f7}.result-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.9rem;min-width:160px}.result-rank{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:.3rem .55rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(189,222,255,.18);color:rgba(239,248,255,.92);font-size:.8rem;font-weight:700;margin-bottom:.2rem}.result-cta{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:999px;background:linear-gradient(135deg,rgba(77,163,255,.9),rgba(22,119,255,.82));color:#fff;font-size:.9rem;font-weight:700;min-width:132px}.results-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(149,198,255,.14);backdrop-filter:blur(12px)}.pagination-status{color:rgba(232,244,255,.88);font-weight:600}.icon{width:16px;height:16px;display:inline-block}.city-pill{font-weight:600}
.empty-card,.panel,.metric-card{background:rgba(255,255,255,.08);border:1px solid rgba(149,198,255,.18);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.5);backdrop-filter:blur(16px)}.empty-card{padding:1.2rem}.company-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}.company-image{min-height:360px;border-radius:24px;background-size:cover;background-position:center}.company-panel{padding:1.4rem;background:var(--card);border:1px solid rgba(171,205,241,.22);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.back-link{margin-bottom:.6rem;color:var(--muted)}.company-layout{display:grid;grid-template-columns:300px 1fr;gap:1rem}.experience-list{background:var(--card);border:1px solid rgba(171,205,241,.22);border-radius:24px;padding:1rem;backdrop-filter:blur(14px)}.experience-list h3{margin-top:.1rem}.experience-tab{display:block;width:100%;text-align:left;padding:.85rem 1rem;margin-bottom:.6rem;border-radius:16px;background:#f4f7fb;color:var(--text)}.experience-tab.active{background:var(--brand);color:#fff}.experience-detail{display:flex;flex-direction:column;gap:1rem}.tag-row{display:flex;flex-wrap:wrap;gap:.5rem}.tag{padding:.35rem .6rem;border-radius:999px;background:#eef4ff;color:#264f9c}.offers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.offer-card{display:flex;flex-direction:column;justify-content:space-between;padding:1rem;border:1px solid rgba(171,205,241,.22);border-radius:22px;background:var(--card-soft);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.offer-card h3{margin-top:0}.offer-footer{display:flex;flex-direction:column;gap:.75rem}.qty-row{display:flex;flex-direction:column;gap:.25rem}.inline-total{font-size:.95rem;color:var(--muted)}
.panel{padding:1rem}.panel.nested{box-shadow:none;border-style:dashed}.panel-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.panel-head.between{justify-content:space-between}.admin-grid{display:grid;gap:1rem}.admin-grid.four{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.metric-card{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem}.metric-card strong{font-size:1.9rem}.actions-panel .code-box{margin-top:1rem;min-height:160px}.button-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}.file-label{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1rem;background:#eff3f9;border:1px solid var(--line);border-radius:12px}.file-label input{display:none}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.85rem;border-bottom:1px solid var(--line)}th{font-size:.86rem;color:var(--muted);font-weight:700}.admin-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.form-grid.small{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid label{display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}.form-grid .full{grid-column:1/-1}.experience-admin-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.experience-pill{background:#eef4ff;color:var(--text)}.error-screen{max-width:900px;margin:4rem auto;background:#fff;border:1px solid #f3c0c0;padding:2rem;border-radius:24px;box-shadow:var(--shadow)}.status-pill{display:inline-flex;gap:.35rem;align-items:center;padding:.35rem .7rem;border-radius:999px;background:rgba(212,175,87,.12);color:var(--gold-light);border:1px solid rgba(212,175,87,.2);font-size:.8rem;font-weight:600}.legend{display:flex;gap:.75rem;flex-wrap:wrap}
/* ── Topbar brand (izquierda) ────────────────────────────── */
.topbar-brand{display:flex;flex-direction:column;flex-shrink:0;min-width:0;overflow:hidden}
.topbar-brand .subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
@media (max-width:980px){.company-hero,.company-layout,.admin-two-cols{grid-template-columns:1fr}.form-grid,.form-grid.small{grid-template-columns:1fr}.search-box{flex-direction:column}.search-field-wrap input{padding-right:1.2rem;height:70px}.search-hint{position:static;transform:none;display:inline-flex;margin-top:.85rem}.filter-bar label{min-width:unset;flex:1 1 140px}}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.55rem;margin-top:.45rem}.check-item{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px;background:#f8fbff}.check-item input{width:auto;margin:0}
.save-hint{font-size:.9rem;color:var(--muted)}
.company-layout-single{grid-template-columns:1fr}.company-layout-single .experience-detail{max-width:none}.company-layout-single .offers-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.company-layout-single .panel{padding:1.35rem}.search-context-note{margin-top:.75rem;color:var(--muted);font-weight:600}.more-experiences{margin-top:1rem}.more-experiences a{display:inline-flex;padding:.65rem .9rem;border:1px solid rgba(171,205,241,.32);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 10px 20px rgba(2,12,28,.08)}
.company-layout-single #experience-detail{width:100%;max-width:none}.company-layout-single .offers-grid{grid-template-columns:1fr;width:100%}.company-layout-single .offer-card{width:100%;max-width:none;min-height:0}.company-layout-single .panel,.company-layout-single .offer-card{padding:1.25rem}
.inline-check{display:inline-flex;align-items:center;gap:.5rem}.inline-check input{width:auto}.code-chip{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f4f7fb;border:1px solid var(--line);padding:.2rem .45rem;border-radius:999px}.portal-box{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f4f7fb;padding:.15rem .35rem;border-radius:8px}
.hero-card,.panel,.company-panel,.experience-list,.offer-card,.empty-card,.metric-card,.filter-bar{position:relative;overflow:hidden}.hero-card::before,.panel::before,.company-panel::before,.experience-list::before,.offer-card::before,.metric-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 42%);pointer-events:none}.result-card{box-shadow:0 24px 54px rgba(2,12,28,.36);border:1px solid rgba(178,214,255,.14)}.result-overlay{background:linear-gradient(180deg,rgba(6,16,32,.08),rgba(3,10,24,.88))}.company-image{box-shadow:0 24px 54px rgba(2,12,28,.34)}
.quality-box{margin:.75rem 0 1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04)}
.muted-pill{opacity:.7}
.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.auth-panel{max-width:none}.small{font-size:.88rem}.cred-mini{display:flex;flex-direction:column;gap:.15rem}.inline-check{display:inline-flex;align-items:center;gap:.4rem}.inline-check input{width:auto}.save-hint code{background:rgba(255,255,255,.08);padding:.15rem .35rem;border-radius:8px}.
.single-auth{grid-template-columns:minmax(320px,520px);justify-content:center}.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}.auth-panel{max-width:none}
.nav-links-company{justify-content:flex-end}.nav-links-company a{min-width:110px;text-align:center}
.brand-link{color:inherit;text-decoration:none}
.nav-links-public{align-items:center;gap:.65rem}
.mini-search-bar{position:relative;display:flex;align-items:center}.mini-search-bar input{width:min(280px,32vw);height:42px;padding:0 4rem 0 .95rem;border-radius:999px;border:1px solid rgba(191,223,255,.18);background:rgba(6,18,36,.42);color:#f6fbff;caret-color:#f6fbff;-webkit-text-fill-color:#f6fbff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.mini-search-bar input::placeholder{color:rgba(233,245,255,.55)}.mini-search-bar input:focus{outline:none;border-color:rgba(120,196,255,.7);box-shadow:0 0 0 4px rgba(94,177,255,.12)}.mini-search-hint{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);font-size:.78rem;color:rgba(233,245,255,.72);padding:.25rem .45rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.company-access-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(190,223,255,.18);color:#f6fbff;text-decoration:none}.company-access-icon svg{width:20px;height:20px}
.experience-highlight-panel{padding:1.35rem 1.35rem 1.1rem}.experience-highlight-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.experience-highlight-head h2{margin:.5rem 0 .45rem}.match-badge{padding:.55rem .8rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-weight:700;color:#dff5ff}.status-pill.accent{background:rgba(84,174,255,.18);color:#cfefff;border:1px solid rgba(113,191,255,.28)}
.compare-panel{padding:1.1rem 1.1rem 1.2rem}.offers-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem}.offer-compare-card{padding:1rem;border-radius:18px;border:1px solid rgba(171,205,241,.22);background:rgba(255,255,255,.05)}.offer-compare-card.recommended{border-color:rgba(113,191,255,.45);box-shadow:0 18px 40px rgba(5,25,48,.25);background:linear-gradient(180deg,rgba(38,86,149,.18),rgba(255,255,255,.05))}.offer-compare-top{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}.offer-compare-top h4{margin:0;font-size:1.02rem}.offer-compare-top strong{font-size:1.2rem}.offer-compare-meta{display:flex;justify-content:space-between;gap:.6rem;align-items:center;margin-top:.75rem;color:var(--muted);font-size:.88rem}.score-pill{padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#eaf6ff}
.recommended-ribbon{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;background:linear-gradient(135deg,#56b8ff,#2c6cff);color:#fff;font-weight:700;font-size:.8rem;box-shadow:0 10px 24px rgba(44,108,255,.28)}.recommended-ribbon.small{margin-bottom:.7rem;align-self:flex-start}
.offer-card-featured{border-color:rgba(113,191,255,.48);box-shadow:0 24px 54px rgba(5,25,48,.22), inset 0 1px 0 rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(31,67,118,.22),rgba(255,255,255,.04))}.offer-card-head{display:flex;flex-direction:column;gap:.45rem}.clean-reserve{gap:1rem}.price-row{display:flex;justify-content:space-between;gap:1rem;align-items:center}.price-row strong,.offer-compare-top strong{font-size:1.45rem;color:var(--text)}.reserve-controls{display:flex;justify-content:space-between;align-items:center;gap:1rem}.qty-stepper{display:inline-flex;align-items:center;gap:.45rem}.qty-stepper input{width:72px;text-align:center;height:42px}.qty-btn{width:40px;height:40px;border-radius:12px;padding:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:1.15rem;line-height:1}
.offers-grid-single{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important}
@media (max-width:980px){.mini-search-bar input{width:min(240px,52vw)}.experience-highlight-head{flex-direction:column}.reserve-controls{flex-direction:column;align-items:flex-start}.price-row{flex-direction:column;align-items:flex-start}.offers-compare-grid{grid-template-columns:1fr}}
.cart-access-icon{position:relative;overflow:visible!important}
.cart-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:linear-gradient(135deg,#d4af57,#a8862f);color:#0a0a08;font-size:.7rem;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 8px rgba(212,175,87,.5);z-index:10;pointer-events:none;line-height:1}
.offer-compare-card.recommended{border:2px solid rgba(113,191,255,.85)!important;box-shadow:0 18px 40px rgba(5,25,48,.35), inset 0 1px 0 rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(18,44,82,.94),rgba(10,28,57,.94))!important}
.offer-card-featured{border:2px solid rgba(113,191,255,.82)!important;box-shadow:0 24px 54px rgba(5,25,48,.34), inset 0 1px 0 rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(19,45,85,.96),rgba(10,28,57,.94))!important}
.offer-card-featured .offer-card-head h3,.offer-card-featured .price-row strong,.offer-compare-card.recommended h4,.offer-compare-card.recommended strong{color:#fff}
.offer-compare-card.recommended p,.offer-card-featured p,.offer-card-featured .inline-total{color:rgba(239,247,255,.88)}
.cart-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);gap:1rem}
.cart-items{display:flex;flex-direction:column;gap:1rem}.cart-item{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.cart-item-main{display:flex;gap:1rem;align-items:flex-start;flex:1}.cart-thumb{width:110px;min-width:110px;height:88px;border-radius:16px;background-size:cover;background-position:center;border:1px solid rgba(171,205,241,.22)}
.cart-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;min-width:180px}.cart-price{font-size:1.2rem;font-weight:700}.cart-summary{position:sticky;top:1rem;height:fit-content}.summary-row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(171,205,241,.14)}.summary-row:last-of-type{border-bottom:0}.cart-actions{margin-top:1rem;flex-direction:column;align-items:stretch}
@media (max-width:980px){.cart-layout{grid-template-columns:1fr}.cart-item{flex-direction:column}.cart-item-side{align-items:flex-start;width:100%}.cart-thumb{width:100%;min-width:0;height:160px}}
.secondary-link{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.1rem;border-radius:12px;background:#e9eef7;color:var(--text);border:1px solid var(--line);font-weight:600}
.cart-actions{align-items:stretch}.cart-inline-msg{margin-bottom:.75rem}.brand-link{cursor:pointer}
.brand-logo{display:inline-flex;align-items:center;justify-content:flex-start;line-height:0;padding:.1rem 0;flex-shrink:0}
.brand-logo img{display:block;height:68px;width:auto;max-width:260px;object-fit:contain;filter:none}
.topbar-public .brand-logo img{height:60px}
@media (max-width:980px){.brand-logo img{height:52px}.topbar-public .brand-logo img{height:48px}}
/* ════════════════════════════════════════════
MEJORAS v3.4 — Estéticas y funcionales
════════════════════════════════════════════ */
/* ── saveMsg visible state ── */
.save-hint { opacity: 0; transition: opacity .25s; font-size:.9rem; color: var(--muted); }
.save-hint[data-visible] { opacity: 1; }
.field-hint { font-size:.82rem; color: var(--muted); margin-top:.15rem; font-style: italic; }
/* ── Autocompletado ── */
.autocomplete-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: rgba(8,22,44,.96);
border: 1px solid rgba(120,196,255,.3);
border-radius: 18px;
backdrop-filter: blur(18px);
box-shadow: 0 24px 48px rgba(2,12,28,.5);
overflow: hidden;
z-index: 100;
animation: acFadeIn .14s ease;
}
@keyframes acFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.ac-item {
display: block; width: 100%; text-align: left;
padding: .85rem 1.3rem;
background: transparent;
border: 0; border-bottom: 1px solid rgba(120,196,255,.1);
color: rgba(235,248,255,.92); font-size: 1rem;
border-radius: 0;
transition: background .12s;
cursor: pointer;
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item:focus { background: rgba(78,166,255,.18); outline: none; }
/* ── Chips de búsqueda popular ── */
.search-chips {
display: flex; flex-wrap: wrap; gap: .55rem;
margin-top: 1.6rem;
}
.search-chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem 1rem;
border-radius: 999px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(185,220,255,.22);
color: rgba(235,248,255,.88);
font-size: .9rem; font-weight: 500;
cursor: pointer;
transition: background .18s, border-color .18s, transform .14s;
backdrop-filter: blur(8px);
}
.search-chip:hover {
background: rgba(78,166,255,.28);
border-color: rgba(120,196,255,.55);
transform: translateY(-1px);
}
/* ── Barra de filtros en resultados ── */
.results-filter-bar {
display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
padding: .85rem 1.1rem;
background: rgba(255,255,255,.07);
border: 1px solid rgba(149,198,255,.14);
border-radius: 18px;
backdrop-filter: blur(12px);
}
.filter-group { display: flex; align-items: center; gap: .55rem; }
.filter-label { font-size: .82rem; color: rgba(210,233,255,.72); font-weight: 600; white-space: nowrap; }
.filter-pills { display: flex; gap: .35rem; }
.fpill {
padding: .42rem .85rem;
border-radius: 999px;
background: rgba(255,255,255,.09);
border: 1px solid rgba(185,220,255,.18);
color: rgba(235,248,255,.82);
font-size: .84rem; font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.fpill:hover { background: rgba(78,166,255,.22); border-color: rgba(120,196,255,.4); }
.fpill.active {
background: linear-gradient(135deg, rgba(77,163,255,.6), rgba(22,119,255,.5));
border-color: rgba(120,196,255,.7);
color: #fff; font-weight: 700;
}
@media (max-width:980px) {
.results-filter-bar { gap: .75rem; }
.filter-group { flex-wrap: wrap; }
}
/* ── Tags en cards de resultado ── */
.card-tags {
display: flex; flex-wrap: wrap; gap: .35rem;
margin: .55rem 0 .45rem;
}
.card-tag {
padding: .28rem .6rem;
border-radius: 999px;
background: rgba(77,163,255,.22);
border: 1px solid rgba(120,196,255,.3);
color: rgba(220,242,255,.92);
font-size: .78rem; font-weight: 600;
letter-spacing: .01em;
backdrop-filter: blur(4px);
}
/* ── Animación de entrada en cards de resultados ── */
.results-grid-animated .result-card {
animation: cardIn .35s ease both;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* ── Hover mejorado en result-card ── */
.result-card {
transition: transform .22s cubic-bezier(.22,.68,0,1.2), box-shadow .22s;
}
.result-card:hover {
transform: translateY(-5px) scale(1.015);
box-shadow: 0 32px 72px rgba(2,12,28,.5), 0 0 0 1px rgba(120,196,255,.22);
}
.result-card:hover .result-overlay {
background: linear-gradient(180deg, rgba(6,16,32,.04), rgba(3,10,24,.92));
}
/* ── Tags en ficha de empresa: clicables / manual ── */
.manual-tags-section {
margin: .8rem 0 .4rem;
}
.manual-tags-label {
display: block;
font-size: .8rem; font-weight: 700;
color: rgba(160,210,255,.72);
text-transform: uppercase; letter-spacing: .06em;
margin-bottom: .45rem;
}
.tag-clickable {
display: inline-flex; align-items: center;
padding: .35rem .65rem;
border-radius: 999px;
background: rgba(77,163,255,.18);
border: 1px solid rgba(120,196,255,.35);
color: rgba(200,235,255,.92);
font-size: .82rem; font-weight: 600;
cursor: pointer;
transition: background .15s, transform .12s;
}
.tag-clickable:hover {
background: rgba(77,163,255,.38);
transform: translateY(-1px);
}
.tag-clickable::before { content: '🔍 '; font-size: .72rem; }
/* ── Estado vacío de resultados mejorado ── */
.empty-results-card {
grid-column: 1 / -1;
text-align: center;
padding: 3rem 2rem;
background: rgba(255,255,255,.06);
border: 1px dashed rgba(120,196,255,.25);
border-radius: 24px;
backdrop-filter: blur(10px);
}
.empty-results-card .empty-icon { font-size: 3rem; margin-bottom: .75rem; }
.empty-results-card h3 { color: rgba(235,248,255,.9); margin-bottom: .4rem; }
.empty-results-card .search-chips { justify-content: center; margin-top: 1rem; }
/* ── Distancia pill ── */
.dist-pill { font-size: .82rem; }
/* ── Cart inline msg mejorado ── */
.cart-inline-msg {
padding: .65rem .9rem;
background: rgba(56,180,90,.18);
border: 1px solid rgba(56,180,90,.35);
border-radius: 12px;
color: #b6f2c8;
font-weight: 600;
margin-bottom: .75rem;
opacity: 1 !important;
}
/* ── Scrollbar personalizado ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,160,255,.28); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,160,255,.45); }
/* ── Mejora: focus-visible para accesibilidad ── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid rgba(94,177,255,.8);
outline-offset: 2px;
}
/* ════════════════════════════════════════════
STARFIELD CANVAS — partículas dinámicas
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
LOADING SCREEN — Firebase init
════════════════════════════════════════════ */
.xp-loading {
position: fixed; inset: 0; z-index: 9999;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 1.2rem;
background: var(--bg-deep, #08192d);
color: rgba(220,240,255,.9);
text-align: center; padding: 2rem;
}
.xp-loading p { font-size: 1.05rem; color: rgba(190,225,255,.8); margin: 0; }
.xp-loading h2 { font-size: 1.4rem; margin: 0; color: #e8f4ff; }
.xp-loading code {
background: rgba(255,255,255,.1); padding: .2rem .5rem;
border-radius: 8px; font-size: .95rem;
}
.xp-loading .muted { color: rgba(160,200,240,.65); font-size: .9rem; }
.xp-loading button {
margin-top: .5rem;
padding: .75rem 1.8rem;
font-size: 1rem;
}
.xp-loading-error { gap: .9rem; }
.xp-error-icon { font-size: 3.2rem; }
/* Spinner */
.xp-spinner {
width: 48px; height: 48px;
border: 3px solid rgba(77,163,255,.2);
border-top-color: rgba(77,163,255,.9);
border-radius: 50%;
animation: xp-spin .8s linear infinite;
}
@keyframes xp-spin { to { transform: rotate(360deg); } }
@media (max-width:980px){.result-card-list{grid-template-columns:1fr}.result-image-list{min-height:190px}.result-overlay-list{grid-template-columns:1fr}.result-side{align-items:flex-start;width:100%}.results-pagination{flex-direction:column;align-items:stretch}.pagination-status{text-align:center}}
.search-field-wrap input:-webkit-autofill,.search-field-wrap input:-webkit-autofill:hover,.search-field-wrap input:-webkit-autofill:focus,.mini-search-bar input:-webkit-autofill,.mini-search-bar input:-webkit-autofill:hover,.mini-search-bar input:-webkit-autofill:focus{-webkit-text-fill-color:#f6fbff!important;box-shadow:0 0 0 1000px rgba(8,24,48,.86) inset!important;caret-color:#f6fbff}
/* ── Map picker & image upload — v6.0 ─────────────────────── */
.location-bar{display:flex;gap:8px;align-items:center}
.location-bar input[type="search"]{flex:1}
.gps-btn{display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.map-coords-row{display:flex;align-items:center;gap:8px;padding:.25rem 0}
.upload-area{border:1.5px dashed var(--color-border-secondary);border-radius:var(--border-radius-lg);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.upload-area.drag-over{border-color:var(--color-border-info);background:var(--color-background-info)}
.upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-label{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;color:var(--color-text-secondary);font-size:14px}
.upload-label svg{color:var(--color-text-tertiary)}
.upload-progress{height:3px;background:var(--color-background-info);border-radius:2px;transition:width .4s ease;margin-top:.5rem}
.upload-progress.hidden{display:none}
.image-preview-wrap{display:flex;align-items:center;gap:12px;padding:.5rem 0}
.company-image-preview{width:72px;height:72px;object-fit:cover;border-radius:var(--border-radius-md);border:0.5px solid var(--color-border-tertiary)}
.form-section-head{padding:.5rem 0 .25rem;border-bottom:0.5px solid var(--color-border-tertiary);margin-bottom:.25rem}
/* ── Dashboard charts & KPIs — v6.0 ───────────────────────── */
.kpi-row{gap:12px}
.kpi-card{display:flex;flex-direction:column;gap:2px;text-decoration:none;transition:transform .15s}
.kpi-card:hover{transform:translateY(-2px)}
.kpi-card strong{font-size:2rem;font-weight:600;line-height:1.1;color:var(--color-text-primary)}
.kpi-card span{font-size:13px;color:var(--color-text-secondary)}
.kpi-sub{font-size:11px;color:var(--color-text-tertiary);margin-top:2px}
.kpi-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.kpi-blue{background:var(--color-background-info);color:var(--color-text-info)}
.kpi-green{background:var(--color-background-success);color:var(--color-text-success)}
.kpi-amber{background:var(--color-background-warning);color:var(--color-text-warning)}
.kpi-teal{background:#e1f5ee;color:#0f6e56}
.admin-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:720px){.admin-charts-grid{grid-template-columns:1fr}}
.chart-panel{padding:1.25rem}
.chart-panel-wide{grid-column:1/-1}
.chart-wrap{position:relative;height:200px;width:100%}
.chart-donut-wrap{position:relative}
.donut-center-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);text-align:center;pointer-events:none}
.donut-center-label strong{display:block;font-size:1.6rem;font-weight:600;color:var(--color-text-primary)}
.donut-center-label span{font-size:11px;color:var(--color-text-secondary)}
.completeness-bar{display:inline-block;width:60px;height:4px;background:var(--color-border-tertiary);border-radius:2px;vertical-align:middle;margin-right:4px;overflow:hidden}
.completeness-fill{height:100%;border-radius:2px;background:var(--color-border-success);transition:width .3s}
.status-ok{background:var(--color-background-success);color:var(--color-text-success)}
.status-warn{background:var(--color-background-warning);color:var(--color-text-warning)}
/* ── PWA Install Banner ────────────────────────────────────── */
.pwa-banner{position:fixed;bottom:calc(1.25rem + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(0);background:#0f2240;border:1px solid rgba(77,163,255,.4);border-radius:18px;box-shadow:0 20px 56px rgba(2,12,28,.75),0 0 0 1px rgba(77,163,255,.1);padding:1rem 1rem 1rem 1.1rem;display:flex;align-items:center;gap:12px;z-index:9999;max-width:min(420px,calc(100vw - 2rem));width:100%;animation:pwa-slide-in .4s cubic-bezier(.22,.68,0,1.2) both}
@keyframes pwa-slide-in{from{transform:translateX(-50%) translateY(110%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.pwa-banner.hiding{animation:pwa-slide-out .3s ease forwards}
@keyframes pwa-slide-out{to{transform:translateX(-50%) translateY(120%);opacity:0}}
.pwa-banner-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;overflow:hidden;box-shadow:0 4px 12px rgba(2,12,28,.5)}
.pwa-banner-icon img{width:100%;height:100%;object-fit:cover}
.pwa-banner-body{flex:1;min-width:0}
.pwa-banner-body strong{display:block;font-size:14px;font-weight:600;color:#f4f8ff;margin-bottom:2px}
.pwa-banner-body span{font-size:12px;color:rgba(160,205,255,.7);line-height:1.4}
.pwa-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pwa-banner-install{padding:8px 16px;background:linear-gradient(135deg,#4da3ff 0%,#1677ff 100%);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(22,119,255,.4);transition:opacity .15s,transform .1s}
.pwa-banner-install:hover{opacity:.9}
.pwa-banner-install:active{transform:scale(.96)}
.pwa-banner-close{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(200,220,255,.75);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;padding:0;font-family:system-ui}
.pwa-banner-close:hover{background:rgba(226,75,74,.35);color:#fff;border-color:rgba(226,75,74,.5)}
/* ══════════════════════════════════════════════════════════════
FICHA DE EMPRESA v6.1 — layout compacto, mapa GPS
══════════════════════════════════════════════════════════════ */
.company-page{display:flex;flex-direction:column;gap:0;padding-bottom:3rem}
/* Hero compacto */
.company-hero-compact{display:grid;grid-template-columns:200px 1fr;gap:0;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid rgba(171,205,241,.18);margin-bottom:1rem}
.company-hero-img{min-height:200px;background-size:cover;background-position:center;flex-shrink:0}
.company-hero-info{padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.25rem}
.company-back-link{font-size:.85rem;color:var(--muted);text-decoration:none;margin-bottom:.2rem;display:inline-block}
.company-back-link:hover{color:var(--text)}
.company-hero-name{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}
.company-hero-type{font-size:.9rem;color:var(--muted);margin:0}
.company-hero-desc{font-size:.95rem;color:var(--text);margin:.35rem 0 0;line-height:1.5;flex:1}
.company-hero-badges{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid rgba(171,205,241,.18);padding:.2rem .55rem;border-radius:999px}
/* Mapa */
.company-map-section{border-radius:16px;overflow:hidden;margin-bottom:1rem;border:1px solid rgba(171,205,241,.18)}
.company-map-container{height:220px;width:100%;cursor:pointer}
.company-map-actions{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--card);flex-wrap:wrap}
.map-nav-btn{display:inline-flex;align-items:center;gap:6px;padding:.5rem 1rem;border-radius:999px;font-size:.88rem;font-weight:500;text-decoration:none;transition:opacity .15s}
.map-nav-primary{background:#2563eb;color:#fff}
.map-nav-primary:hover{opacity:.88}
.map-nav-waze{background:#33ccff;color:#000}
.map-nav-waze:hover{opacity:.88}
.map-distance-pill{margin-left:auto;font-size:.82rem;color:var(--muted)}
.company-location-text{display:flex;align-items:center;gap:5px;font-size:.88rem;color:var(--muted);padding:.5rem 0 1rem}
/* Tabs de experiencias */
.exp-tab-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.exp-tab{padding:.45rem .9rem;border-radius:999px;font-size:.88rem;background:rgba(255,255,255,.06);border:1px solid rgba(171,205,241,.2);color:var(--text);cursor:pointer;transition:all .15s}
.exp-tab-active,.exp-tab:hover{background:var(--brand);color:#fff;border-color:transparent}
/* Bloque experiencia */
.exp-detail-block{display:flex;flex-direction:column;gap:.75rem}
.exp-description{font-size:.95rem;line-height:1.6;color:var(--text);margin:0}
.exp-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.exp-tag-chip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;font-size:.8rem;font-weight:400;line-height:1.4;background:rgba(55,138,221,.12);border:1px solid rgba(55,138,221,.28);color:#80b8f5;cursor:pointer;transition:background .15s;min-height:unset;height:auto;width:auto;box-shadow:none;text-shadow:none}
.exp-tag-chip:hover{background:rgba(55,138,221,.28)}
.exp-meta-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.exp-meta-badge{padding:.25rem .7rem;border-radius:999px;font-size:.78rem;background:rgba(255,255,255,.06);border:1px solid rgba(171,205,241,.2);color:var(--muted);text-decoration:none}
.badge-indoor{background:rgba(99,153,34,.12);border-color:rgba(99,153,34,.3);color:#8fcf4a}
.badge-outdoor{background:rgba(234,175,0,.1);border-color:rgba(234,175,0,.28);color:#f5cc47}
.badge-weather{background:rgba(29,158,117,.1);border-color:rgba(29,158,117,.28);color:#4dcfaa}
.badge-weather-warn{background:rgba(226,75,74,.1);border-color:rgba(226,75,74,.28);color:#f07272}
/* Lista de ofertas compacta */
.offers-list{display:flex;flex-direction:column;gap:.5rem}
/* All offer rows: dark glass — no harsh white */
.offer-row{
display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.2rem;
border-radius:16px;
border:1px solid rgba(149,198,255,.16);
background:rgba(12,28,52,.55);
backdrop-filter:blur(12px);
transition:border-color .2s,background .2s
}
.offer-row:hover{border-color:rgba(113,191,255,.38);background:rgba(16,34,62,.65)}
/* Featured: only a left accent border, no dark gradient takeover */
.offer-row-featured{border-left:3px solid rgba(77,163,255,.8);background:rgba(14,34,64,.68)}
.offer-row-info{flex:1;min-width:0}
/* Badge: transparent glass pill, same style as exp-tag-chip */
.offer-best-badge{
display:inline-block;font-size:.72rem;font-weight:600;
padding:.18rem .6rem;border-radius:999px;
background:rgba(77,163,255,.15);color:rgba(160,210,255,.9);
border:1px solid rgba(77,163,255,.28);margin-bottom:.35rem
}
.offer-row-name{display:block;font-size:1rem;font-weight:600;color:rgba(235,245,255,.95);margin-bottom:.2rem}
.offer-row-details{font-size:.86rem;color:rgba(160,185,220,.75);margin:0;line-height:1.45}
.offer-row-action{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}
.offer-row-price{font-size:1.35rem;font-weight:700;color:rgba(235,248,255,.95);white-space:nowrap}
/* Qty stepper — always visible on dark background */
.compact-qty{gap:.3rem}
.compact-qty input{
width:52px;height:36px;text-align:center;font-size:.95rem;font-weight:600;
background:rgba(255,255,255,.12);
color:#fff;
-webkit-text-fill-color:#fff;
border:1px solid rgba(255,255,255,.22);
border-radius:8px;
padding:0
}
.compact-qty input:focus{outline:none;border-color:rgba(120,196,255,.7)}
.compact-qty .qty-btn{
width:34px;height:34px;border-radius:8px;font-size:1.1rem;padding:0;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
color:rgba(235,248,255,.9);
line-height:1
}
.compact-qty .qty-btn:hover{background:rgba(255,255,255,.18)}
.offer-reserve-btn{
padding:.55rem 1.1rem;border-radius:12px;font-size:.88rem;font-weight:600;
background:var(--brand);color:#fff;border:none;cursor:pointer;
white-space:nowrap;transition:opacity .15s
}
.offer-reserve-btn:hover{opacity:.88}
.offer-reserve-btn:disabled{opacity:.6;cursor:default}
/* Responsive */
@media(max-width:600px){
.company-hero-compact{grid-template-columns:1fr}
.company-hero-img{min-height:160px}
.company-map-container{height:180px}
.offer-row{flex-direction:column;gap:.7rem}
.offer-row-action{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
.offer-row-price{font-size:1.15rem}
}
/* Qty input visibility fix inside dark offer cards */
.offer-row-featured .compact-qty input[type="number"]{
background:rgba(255,255,255,.94);
color:#10212b;
-webkit-text-fill-color:#10212b;
border-color:rgba(255,255,255,.3);
}
/* Cart auth panel styles */
.cart-auth-panel .summary-total strong{color:var(--text)}
.cart-auth-divider{text-align:center;margin:1rem 0 .75rem;position:relative}
.cart-auth-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.cart-auth-divider span{position:relative;background:var(--card);padding:0 .75rem;font-size:.82rem;color:var(--muted)}
.cart-auth-tabs{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:1rem}
.cart-auth-tab{flex:1;padding:.65rem;background:transparent;border:none;border-radius:0;font-size:.9rem;color:var(--muted);cursor:pointer;transition:all .15s}
.cart-auth-tab-active{background:var(--brand);color:#fff;font-weight:600}
.summary-row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.95rem}
.summary-total{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.75rem;font-size:1.05rem}
.summary-total strong{font-size:1.2rem}
.link-btn{background:none;border:none;padding:0;color:var(--muted);font-size:.85rem;text-decoration:underline;cursor:pointer}
.small-btn{padding:.5rem .8rem;font-size:.82rem}
.cart-item-info h3{margin:0 0 .2rem;font-size:1rem}
.cart-item-info p{margin:.1rem 0}
/* ── Admin panels modernized — v6.3 ─────────────────── */
.shell-admin .panel,
.shell-admin .metric-card,
.shell-admin .quality-box,
.shell-admin .auth-inline-panel,
.shell .panel,
.shell .metric-card,
.shell .auth-panel {
background: rgba(255,255,255,.08);
border-color: rgba(149,198,255,.16);
color: rgba(235,245,255,.9);
}
.shell-admin .panel-head h2,
.shell-admin h2,
.shell-admin h3,
.shell .panel-head h2,
.shell h2,
.shell h3 {
color: rgba(235,248,255,.95);
}
.shell-admin .muted,
.shell .muted {
color: rgba(140,175,220,.75);
}
.shell-admin .save-hint {
color: rgba(130,175,220,.75);
}
.shell-admin th {
color: rgba(140,175,220,.75);
}
.shell-admin td {
color: rgba(210,230,255,.88);
border-bottom-color: rgba(149,198,255,.1);
}
.shell-admin tr:hover td {
background: rgba(255,255,255,.04);
}
/* Form fields inside admin panels */
.shell-admin input:not([type="checkbox"]):not([type="radio"]),
.shell-admin textarea,
.shell-admin select {
background: rgba(255,255,255,.07);
border-color: rgba(149,198,255,.22);
color: rgba(235,245,255,.92);
-webkit-text-fill-color: rgba(235,245,255,.92);
}
.shell-admin input::placeholder,
.shell-admin textarea::placeholder {
color: rgba(149,198,255,.4);
}
.shell-admin input:focus,
.shell-admin textarea:focus,
.shell-admin select:focus {
border-color: rgba(77,163,255,.65);
background: rgba(255,255,255,.1);
outline: none;
box-shadow: 0 0 0 3px rgba(77,163,255,.12);
}
.shell-admin select option {
background: #0e2040;
color: #d4eaff;
}
/* Status pills in admin */
.shell-admin .status-pill {
background: rgba(55,138,221,.18);
color: rgba(140,200,255,.9);
border: 1px solid rgba(55,138,221,.25);
}
.shell-admin .status-ok {
background: rgba(29,158,117,.18);
color: rgba(100,220,180,.9);
}
.shell-admin .status-warn {
background: rgba(186,117,23,.18);
color: rgba(230,175,80,.9);
}
/* Experience pills in admin */
.shell-admin .experience-pill {
background: rgba(55,138,221,.15);
color: rgba(160,210,255,.9);
border: 1px solid rgba(55,138,221,.22);
}
.shell-admin .experience-pill:hover {
background: rgba(55,138,221,.28);
}
/* Check grid in admin */
.shell-admin .check-item {
background: rgba(255,255,255,.06);
border-color: rgba(149,198,255,.18);
color: rgba(210,230,255,.88);
}
.shell-admin .check-item:hover {
background: rgba(255,255,255,.1);
}
/* Quality box */
.shell-admin .quality-box {
padding: .85rem 1rem;
border-radius: 12px;
background: rgba(29,158,117,.1);
border: 1px solid rgba(29,158,117,.25);
color: rgba(120,220,180,.9);
}
/* Metric cards admin */
.shell-admin .metric-card strong {
color: rgba(235,248,255,.95);
}
.shell-admin .metric-card span {
color: rgba(140,175,220,.75);
}
/* Nested panel (offer forms) */
.shell-admin .panel.nested {
background: rgba(255,255,255,.04);
border-style: dashed;
border-color: rgba(149,198,255,.15);
}
/* KPI cards */
.shell-admin .kpi-card strong {
color: rgba(235,248,255,.95) !important;
}
/* Button secondary in admin */
.shell-admin button.secondary {
background: rgba(255,255,255,.1);
color: rgba(210,235,255,.9);
border: 1px solid rgba(149,198,255,.2);
}
.shell-admin button.secondary:hover {
background: rgba(255,255,255,.16);
}
/* Table header */
.shell-admin thead th {
background: rgba(255,255,255,.04);
}
/* Link style in admin */
.shell-admin a:not(.map-nav-btn):not(.status-pill):not(.button-link) {
color: rgba(100,175,255,.9);
}
.shell-admin .completeness-fill {
background: rgba(77,163,255,.8);
}
/* Auth inline panel */
.shell-admin .auth-inline-panel {
margin-top: .75rem;
padding: 1rem;
border-radius: 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(149,198,255,.14);
}
/* Form section head */
.shell-admin .form-section-head {
border-bottom-color: rgba(149,198,255,.14);
color: rgba(210,235,255,.9);
}
/* Panel company admin — portal also uses company style */
.shell-admin .panel-head {
border-bottom: 1px solid rgba(149,198,255,.1);
padding-bottom: .75rem;
margin-bottom: 1rem;
}
.shell-admin code {
background: rgba(255,255,255,.08);
color: rgba(160,210,255,.9);
border-radius: 6px;
padding: .12rem .35rem;
}
/* ── Ficha empresa — dark glass panels ─────────────────── */
.company-hero-compact {
background: rgba(12,26,48,.72);
border-color: rgba(149,198,255,.14);
backdrop-filter: blur(14px);
}
.company-hero-name { color: rgba(235,248,255,.95); }
.company-hero-type { color: rgba(140,185,230,.75); }
.company-hero-desc { color: rgba(200,225,255,.82); }
.company-back-link { color: rgba(120,175,240,.75); }
.company-back-link:hover { color: rgba(160,210,255,.9); }
.hero-badge { color: rgba(140,185,230,.8); background: rgba(255,255,255,.06); border-color: rgba(149,198,255,.16); }
.exp-detail-block { background: rgba(10,24,46,.5); border-radius: 16px; padding: 1rem 1.2rem; border: 1px solid rgba(149,198,255,.12); }
.exp-description { color: rgba(200,225,255,.85); }
.exp-see-all a { color: rgba(100,175,255,.85); font-size:.85rem; }
.company-map-section { border-color: rgba(149,198,255,.14); background: rgba(10,24,46,.5); }
.company-map-actions { background: rgba(10,24,46,.7); }
.map-nav-secondary { background: rgba(255,255,255,.08); color: rgba(160,210,255,.85); border: 1px solid rgba(149,198,255,.18); font-size:.82rem; }
.map-nav-secondary:hover { background: rgba(255,255,255,.14); }
.company-location-text { color: rgba(140,185,230,.75); }
/* Cart panel also needs dark glass */
.cart-layout .panel { background: rgba(12,26,48,.72); border-color: rgba(149,198,255,.14); }
.cart-layout h3 { color: rgba(235,248,255,.95); }
.cart-layout .summary-row { color: rgba(200,225,255,.85); border-bottom-color: rgba(149,198,255,.1); }
.cart-layout .summary-total strong { color: rgba(235,248,255,.95); }
/* ── Sistema de planes v7.0 ──────────────────────────────── */
/* Plan panel — admin company detail */
.plan-panel{background:rgba(255,255,255,.05);border:1px solid rgba(149,198,255,.15);border-radius:14px;padding:1rem 1.1rem;margin-bottom:.75rem}
.plan-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.plan-name-display{font-size:.95rem;font-weight:500;color:rgba(235,248,255,.95)}
.plan-commission-display{font-size:.82rem;color:rgba(140,185,230,.75);margin-left:.35rem}
.plan-status-pill{font-size:.72rem;font-weight:600;padding:.2rem .65rem;border-radius:999px}
.plan-status-active{background:rgba(29,158,117,.2);color:rgba(100,220,180,.9)}
.plan-status-trial{background:rgba(55,138,221,.2);color:rgba(120,190,255,.9)}
.plan-status-overdue{background:rgba(186,117,23,.2);color:rgba(230,175,80,.9)}
.plan-status-cancelled{background:rgba(226,75,74,.2);color:rgba(240,130,130,.9)}
.plan-status-expired{background:rgba(140,100,50,.2);color:rgba(230,175,80,.9)}
.plan-status-trial-urgent{background:rgba(226,75,74,.18);color:rgba(250,160,120,.9)}
.plan-meta{font-size:.78rem;color:rgba(140,185,230,.65);display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.65rem}
.plan-stripe-id code{font-size:.72rem}
.plan-selector{display:flex;gap:.5rem;flex-wrap:wrap}
.plan-selector select{flex:1;min-width:160px}
.plan-selector button{flex-shrink:0}
/* Plan info panel — portal empresa */
.plan-info-panel{}
.plan-portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin-bottom:.75rem}
.plan-portal-item{background:rgba(255,255,255,.05);border-radius:10px;padding:.6rem .8rem}
.plan-portal-label{display:block;font-size:.72rem;color:rgba(140,185,230,.65);margin-bottom:.2rem}
.plan-portal-value{font-size:1rem;font-weight:600;color:rgba(235,248,255,.95)}
.plan-badge-pill{font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:999px}
.plan-badge-featured{background:rgba(186,117,23,.2);color:rgba(230,175,80,.9)}
.plan-badge-verified{background:rgba(29,158,117,.2);color:rgba(100,220,180,.9)}
.plan-upgrade-note{font-size:.82rem;color:rgba(140,185,230,.72);padding:.6rem .75rem;background:rgba(55,138,221,.08);border-radius:8px;border:1px solid rgba(55,138,221,.15)}
/* ── Trial banners ──────────────────────────────────────────── */
.trial-banner{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:12px;margin-bottom:.75rem;font-size:.84rem;line-height:1.4;flex-wrap:wrap}
.trial-banner-ok{background:rgba(29,158,117,.10);border:1px solid rgba(29,158,117,.25)}
.trial-banner-warn{background:rgba(239,159,39,.10);border:1px solid rgba(239,159,39,.28)}
.trial-banner-urgent{background:rgba(226,75,74,.10);border:1px solid rgba(226,75,74,.25)}
.trial-banner-expired{background:rgba(100,120,160,.10);border:1px solid rgba(100,120,160,.2)}
.trial-banner-icon{font-size:1.25rem;flex-shrink:0}
.trial-banner-text{flex:1;color:rgba(220,235,255,.85)}
.trial-banner-text strong{color:#f4f8ff;font-weight:600}
.trial-banner-cta{flex-shrink:0;padding:.35rem .9rem;border-radius:8px;background:rgba(77,163,255,.2);border:1px solid rgba(77,163,255,.35);color:#4da3ff;font-size:.8rem;font-weight:600;text-decoration:none;transition:background .15s}
.trial-banner-cta:hover{background:rgba(77,163,255,.35)}
.plan-analytics-note{font-size:.82rem;color:rgba(140,185,230,.72);padding:.6rem .75rem;background:rgba(29,158,117,.07);border-radius:8px;border:1px solid rgba(29,158,117,.15);margin-top:.5rem}
.plan-upgrade-note a,.plan-analytics-note a{color:rgba(100,175,255,.85)}
/* Plan badges en resultados de búsqueda */
.result-plan-badge{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;padding:.15rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle}
.result-badge-featured{background:rgba(186,117,23,.25);color:rgba(240,185,80,.95);border:1px solid rgba(186,117,23,.3)}
.result-badge-verified{background:rgba(29,158,117,.2);color:rgba(100,220,180,.9);border:1px solid rgba(29,158,117,.25)}
/* ── Android / mobile fixes ─────────────────────────────── */
/* ── Nav link text hiding on tiny screens ─────────────── */
@media (max-width:360px){
/* On 360px only show Acceder/login, cart, and briefcase */
.nav-link-account{display:none}
.nav-link-logout{display:none}
}
.topbar>div:first-child{flex-shrink:0;min-width:0;overflow:hidden}
/* ══════════════════════════════════════════════════════════
RESPONSIVE MOBILE — probado en iPhone y Android
Principio: los iconos (cart + briefcase) NUNCA se ocultan.
El texto se reduce/trunca/oculta por orden de importancia.
══════════════════════════════════════════════════════════ */
/* En móvil la mini-búsqueda del nav es redundante, se oculta */
@media (max-width:640px){
.mini-search-bar{display:none}
}
/* Pantallas medianas: ajustes generales */
@media (max-width:480px){
.brand-logo img{height:30px}
.nav-links a{padding:.42rem .6rem;font-size:.82rem}
.company-access-icon{width:36px!important;height:36px!important;border-radius:9px!important}
.company-access-icon svg{width:17px;height:17px}
.topbar{padding:.65rem .85rem}
.exp-tag-chip{font-size:.75rem;padding:.25rem .55rem}
.offer-row{flex-direction:column;gap:.6rem}
.offer-row-action{flex-direction:row;width:100%;align-items:center;justify-content:space-between}
.offer-row-price{font-size:1.1rem}
.compact-qty input{width:42px;height:32px;font-size:.85rem}
.compact-qty .qty-btn{width:28px;height:28px;font-size:.95rem}
.offer-reserve-btn{padding:.5rem .9rem;font-size:.82rem}
.company-hero-compact{grid-template-columns:1fr}
.company-hero-img{min-height:140px}
.company-hero-name{font-size:1.25rem}
}
/* Pantallas pequeñas: ocultar texto no esencial en nav */
@media (max-width:400px){
.nav-link-secondary{display:none!important}
.nav-link-account{max-width:72px}
.brand-logo img{height:28px}
.topbar{padding:.6rem .75rem;gap:.35rem}
.nav-links{gap:.3rem}
.nav-links a{padding:.38rem .5rem;font-size:.78rem}
.company-access-icon{width:34px!important;height:34px!important}
.company-access-icon svg{width:16px;height:16px}
}
/* Pantallas muy pequeñas: mínimo absoluto */
@media (max-width:360px){
.nav-link-account{display:none!important}
.nav-link-logout{display:none!important}
.brand-logo img{height:26px}
.topbar{padding:.55rem .65rem;gap:.3rem}
.nav-links{gap:.25rem}
}
/* ══════════════════════════════════════════════════════════════
Modal de planes — xp-planes-modal
══════════════════════════════════════════════════════════════ */
.xp-modal-overlay{
position:fixed;inset:0;z-index:9000;
background:rgba(4,10,22,.75);
backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:1rem;
opacity:0;transition:opacity .2s ease;
overflow-y:auto;
}
.xp-modal-overlay.xp-modal-visible{opacity:1}
.xp-modal-box{
background:linear-gradient(160deg,#0c1e38 0%,#081528 60%,#0a1c30 100%);
border:1px solid rgba(149,198,255,.18);
border-radius:20px;
padding:1.75rem 1.75rem 1.5rem;
width:100%;max-width:960px;
box-shadow:0 32px 80px rgba(2,10,28,.6);
animation:xp-modal-up .22s ease both;
}
@keyframes xp-modal-up{from{transform:translateY(18px)}to{transform:translateY(0)}}
.xp-modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;gap:1rem}
.xp-modal-title{font-size:1.35rem;font-weight:700;color:#f4f8ff;margin:0 0 .2rem}
.xp-modal-sub{font-size:.85rem;color:rgba(160,200,255,.6);margin:0}
.xp-modal-close{
flex-shrink:0;width:32px;height:32px;border-radius:50%;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
color:rgba(200,220,255,.7);font-size:1rem;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;line-height:1;
}
.xp-modal-close:hover{background:rgba(226,75,74,.25);color:#fff}
/* ── Grid de cards ─────────────────────────────────────────── */
.xp-plans-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-bottom:1.1rem;
}
@media(max-width:720px){.xp-plans-grid{grid-template-columns:1fr}}
/* ── Card individual ───────────────────────────────────────── */
.xp-plan-card{
border:1px solid transparent;
border-radius:16px;
padding:1.25rem 1.1rem 1.1rem;
position:relative;
display:flex;flex-direction:column;gap:.5rem;
transition:transform .15s,box-shadow .15s;
}
.xp-plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(2,10,28,.4)}
.xp-plan-highlighted{box-shadow:0 0 0 1px rgba(55,138,221,.5),0 16px 40px rgba(22,90,200,.2)}
.xp-plan-current{box-shadow:inset 0 0 0 2px rgba(120,190,255,.3)}
.xp-plan-popular-tag,.xp-plan-current-tag{
position:absolute;top:-11px;left:50%;transform:translateX(-50%);
font-size:.72rem;font-weight:700;padding:.2rem .7rem;
border-radius:999px;white-space:nowrap;
}
.xp-plan-popular-tag{background:rgba(22,119,255,.9);color:#fff}
.xp-plan-current-tag{background:rgba(29,158,117,.9);color:#fff}
.xp-plan-name{font-size:1.05rem;font-weight:700;margin-bottom:.1rem}
.xp-plan-price-row{display:flex;align-items:baseline;gap:.3rem}
.xp-plan-price{font-size:2rem;font-weight:800;line-height:1}
.xp-plan-period{font-size:.82rem;color:rgba(160,200,255,.55)}
.xp-plan-commission{font-size:.78rem;color:rgba(160,200,255,.5);margin-top:-.25rem}
.xp-plan-divider{height:1px;opacity:.5;margin:.4rem 0}
/* ── Features ──────────────────────────────────────────────── */
.xp-plan-features{display:flex;flex-direction:column;gap:.38rem;flex:1}
.xp-plan-feat{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;line-height:1.35}
.xp-plan-feat.on{color:rgba(220,240,255,.85)}
.xp-plan-feat.off{color:rgba(130,160,200,.38)}
.xp-plan-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.dot-on{background:rgba(29,158,117,.9)}
.dot-off{background:rgba(100,120,160,.25)}
.xp-plan-note{font-size:.72rem;color:rgba(120,160,210,.45);margin-top:.25rem}
/* ── CTA button ────────────────────────────────────────────── */
.xp-plan-cta{
display:block;width:100%;margin-top:.75rem;
padding:.6rem 1rem;border-radius:10px;
color:#fff;font-size:.88rem;font-weight:600;
text-align:center;text-decoration:none;
transition:opacity .15s;
}
.xp-plan-cta:hover{opacity:.9}
.xp-plan-cta-current{
display:block;margin-top:.75rem;
padding:.6rem;border-radius:10px;
background:rgba(29,158,117,.12);border:1px solid rgba(29,158,117,.25);
color:rgba(100,220,180,.8);font-size:.88rem;font-weight:600;
text-align:center;
}
/* ── Banners inferiores ────────────────────────────────────── */
.xp-plans-trial-note{
background:rgba(55,138,221,.10);border:1px solid rgba(55,138,221,.2);
border-radius:10px;padding:.7rem 1rem;font-size:.82rem;
color:rgba(160,205,255,.8);margin-bottom:1rem;line-height:1.5;
}
.xp-plans-breakeven{
background:rgba(255,255,255,.04);border-radius:10px;
padding:.7rem 1rem;font-size:.8rem;color:rgba(160,200,255,.65);
line-height:1.55;margin-bottom:.75rem;
}
.xp-plans-breakeven strong{color:rgba(240,200,100,.85)}
.xp-plans-footer-note{
font-size:.75rem;color:rgba(100,140,200,.45);
text-align:center;line-height:1.6;
}
.xp-plans-footer-note a{color:rgba(100,160,255,.6);text-decoration:underline}
/* ══════════════════════════════════════════════════════════════
Meteorología en tiempo real — Open-Meteo
══════════════════════════════════════════════════════════════ */
/* ── Badge compacto en cards de resultados ──────────────────── */
.weather-badge{
display:inline-flex;align-items:center;gap:3px;
padding:2px 7px;border-radius:999px;
font-size:.75rem;font-weight:600;
vertical-align:middle;
transition:background .2s;
}
.weather-badge-icon{font-size:13px;line-height:1}
.weather-badge-temp{font-size:.75rem;color:rgba(220,240,255,.9)}
.weather-badge-sunny {background:rgba(250,180,40,.3);border:1px solid rgba(250,200,60,.55);color:#ffd84d}
.weather-badge-cloudy {background:rgba(160,185,220,.28);border:1px solid rgba(160,185,220,.5);color:#c8ddf5}
.weather-badge-rain {background:rgba(80,140,220,.3);border:1px solid rgba(80,140,220,.55);color:#89b8f5}
.weather-badge-fog {background:rgba(160,170,190,.28);border:1px solid rgba(160,170,190,.5);color:#d0d8e8}
.weather-badge-snow {background:rgba(200,220,255,.28);border:1px solid rgba(200,220,255,.5);color:#daeeff}
.weather-badge-storm {background:rgba(120,80,200,.3);border:1px solid rgba(120,80,200,.55);color:#c8a8ff}
/* ── Panel expandido — ficha empresa y portal ───────────────── */
.weather-panel{
border:1px solid rgba(212,175,87,.2);
border-radius:14px;
padding:1rem 1.1rem;
background:rgba(255,255,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
margin-bottom:.75rem;
}
.weather-panel-main{
display:flex;align-items:center;gap:1rem;
margin-bottom:.9rem;
}
.weather-main-icon{font-size:2.5rem;line-height:1;flex-shrink:0}
.weather-main-info{display:flex;flex-direction:column;gap:.1rem}
.weather-main-temp{font-size:1.6rem;font-weight:700;color:#f5ecd7;line-height:1}
.weather-main-label{font-size:.88rem;color:rgba(232,203,122,.9);font-weight:600}
.weather-main-feels{font-size:.75rem;color:rgba(200,180,140,.7);margin-top:.1rem}
/* ── Forecast 3 días ───────────────────────────────────────── */
.weather-daily{
display:grid;grid-template-columns:repeat(3,1fr);
gap:8px;margin-bottom:.6rem;
}
.weather-day{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:.5rem .3rem;border-radius:10px;
background:rgba(255,255,255,.06);
border:1px solid rgba(149,198,255,.15);
}
.weather-day-name{font-size:.72rem;color:rgba(232,203,122,.75);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.weather-day-icon{font-size:1.3rem;line-height:1}
.weather-day-max{font-size:.88rem;font-weight:700;color:#f5ecd7}
.weather-day-min{font-size:.78rem;color:rgba(200,185,150,.6)}
.weather-day-rain{font-size:.7rem;color:#89b8f5;background:rgba(80,140,220,.25);padding:1px 5px;border-radius:99px}
.weather-source{font-size:.68rem;color:rgba(100,140,200,.35);text-align:right}
/* ── Slot vacío mientras carga ─────────────────────────────── */
.company-weather-slot{margin-bottom:.5rem}
.company-weather-portal-panel .xp-loading{padding:.75rem 0}
/* ── Hero badge animado cuando tiene datos reales ──────────── */
.weather-hero-live .weather-badge{animation:weather-pop .3s ease both}
@keyframes weather-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
/* ── Boost indoor badge (cuando llueve, las actividades indoor suben) */
.result-indoor-boost::after{
content:'Ideal si llueve';
font-size:.68rem;padding:2px 7px;border-radius:999px;
background:rgba(80,140,220,.18);color:rgba(140,190,255,.8);
border:1px solid rgba(80,140,220,.25);
margin-left:5px;white-space:nowrap;vertical-align:middle;
}
/* ══════════════════════════════════════════════════════════════
Chat interno empresa ↔ cliente (v8.1)
══════════════════════════════════════════════════════════════ */
/* ── Botón "Enviar mensaje" en ficha empresa ────────────────── */
.company-chat-action{margin-top:.75rem;text-align:center}
.company-chat-btn{
display:inline-flex;align-items:center;gap:.5rem;
padding:.65rem 1.25rem;border-radius:12px;border:none;cursor:pointer;
background:rgba(77,163,255,.15);border:1px solid rgba(77,163,255,.3);
color:rgba(180,220,255,.9);font-size:.88rem;font-weight:500;
transition:background .15s,border-color .15s;
}
.company-chat-btn:hover{background:rgba(77,163,255,.25);border-color:rgba(77,163,255,.5)}
/* ── Badge nav mensajes ─────────────────────────────────────── */
.nav-chat-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:rgba(226,75,74,.9);color:#fff;font-size:10px;font-weight:700;
margin-left:4px;vertical-align:middle;line-height:1;
}
/* ── Modal chat flotante (cliente) ─────────────────────────── */
.xp-chat-modal{
position:fixed;bottom:1.5rem;right:1.5rem;z-index:9001;
width:360px;max-width:calc(100vw - 2rem);
opacity:0;transition:opacity .25s ease;
}
@media(max-width:480px){
.xp-chat-modal{bottom:0;right:0;width:100%;max-width:100%;border-radius:0}
.xp-chat-box{border-radius:18px 18px 0 0}
}
.xp-chat-modal.xp-chat-visible{opacity:1}
.xp-chat-modal.xp-chat-hiding{opacity:0;transform:translateY(12px)}
.xp-chat-box{
background:#0c1e38;
border:1px solid rgba(77,163,255,.28);
border-radius:18px;
box-shadow:0 24px 64px rgba(2,12,28,.7);
display:flex;flex-direction:column;
max-height:520px;overflow:hidden;
}
/* ── Header del chat ────────────────────────────────────────── */
.xp-chat-header{
display:flex;align-items:center;justify-content:space-between;
padding:.85rem 1rem;
border-bottom:1px solid rgba(149,198,255,.12);
flex-shrink:0;
}
.xp-chat-header-info{display:flex;align-items:center;gap:.65rem}
.xp-chat-name{display:block;font-size:.9rem;font-weight:600;color:#f4f8ff}
.xp-chat-status{font-size:.72rem;color:rgba(140,185,230,.55)}
.xp-chat-close{
width:28px;height:28px;border-radius:50%;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
color:rgba(200,220,255,.6);font-size:15px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;padding:0;
}
.xp-chat-close:hover{background:rgba(226,75,74,.3);color:#fff}
/* ── Avatar ─────────────────────────────────────────────────── */
.xp-chat-avatar{
width:36px;height:36px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#1677ff,#4da3ff);
color:#fff;font-size:.88rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.xp-chat-avatar.sm{width:30px;height:30px;font-size:.78rem}
/* ── Área de mensajes ───────────────────────────────────────── */
.xp-chat-messages{
flex:1;overflow-y:auto;
padding:.75rem 1rem;
display:flex;flex-direction:column;gap:.5rem;
min-height:200px;
scrollbar-width:thin;scrollbar-color:rgba(77,163,255,.2) transparent;
}
.xp-chat-loading{color:rgba(140,185,230,.5);font-size:.82rem;text-align:center;padding:1rem}
.xp-chat-empty{color:rgba(140,185,230,.45);font-size:.82rem;text-align:center;padding:1.5rem}
.xp-chat-error{color:rgba(240,130,130,.8);font-size:.82rem;text-align:center;padding:1rem}
/* ── Burbujas de mensaje ────────────────────────────────────── */
.xp-chat-msg{display:flex;flex-direction:column;max-width:82%}
.xp-chat-msg.mine{align-self:flex-end;align-items:flex-end}
.xp-chat-msg.theirs{align-self:flex-start;align-items:flex-start}
.xp-chat-bubble{
padding:.55rem .85rem;border-radius:14px;
font-size:.86rem;line-height:1.45;word-break:break-word;
}
.mine .xp-chat-bubble{
background:linear-gradient(135deg,#1d6fd4,#1255a8);
color:#fff;border-bottom-right-radius:4px;
}
.theirs .xp-chat-bubble{
background:rgba(255,255,255,.08);border:1px solid rgba(149,198,255,.15);
color:rgba(220,240,255,.9);border-bottom-left-radius:4px;
}
.xp-chat-time{font-size:.68rem;color:rgba(130,175,230,.45);margin-top:2px;padding:0 2px}
/* ── Input de texto ─────────────────────────────────────────── */
.xp-chat-input-row{
display:flex;align-items:center;gap:.5rem;
padding:.7rem 1rem;border-top:1px solid rgba(149,198,255,.12);
flex-shrink:0;
}
.xp-chat-input{
flex:1;height:38px;padding:0 .75rem;
border-radius:10px;border:1px solid rgba(149,198,255,.2);
background:rgba(255,255,255,.06);
color:rgba(220,240,255,.9);font-size:.875rem;font-family:inherit;
outline:none;transition:border-color .15s;
-webkit-text-fill-color:rgba(220,240,255,.9);
caret-color:#4da3ff;
}
.xp-chat-input:focus{border-color:rgba(77,163,255,.5);background:rgba(255,255,255,.09)}
.xp-chat-input::placeholder{color:rgba(130,175,230,.35)}
.xp-chat-send{
width:38px;height:38px;border-radius:10px;flex-shrink:0;
background:linear-gradient(135deg,#4da3ff,#1677ff);
border:none;cursor:pointer;color:#fff;
display:flex;align-items:center;justify-content:center;
transition:opacity .15s,transform .1s;
box-shadow:0 4px 12px rgba(22,119,255,.3);
}
.xp-chat-send:hover{opacity:.9}
.xp-chat-send:active{transform:scale(.94)}
.xp-chat-send:disabled{opacity:.4;cursor:default;transform:none}
/* ══════════════════════════════════════════════════════════════
Chat portal empresa — layout de dos columnas
══════════════════════════════════════════════════════════════ */
.company-chat-layout{
display:grid;grid-template-columns:300px 1fr;
gap:0;height:calc(100vh - 80px);
border-radius:16px;overflow:hidden;
border:1px solid rgba(149,198,255,.12);
background:#0c1e38;
}
@media(max-width:700px){
.company-chat-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
}
/* ── Sidebar (lista de convs) ───────────────────────────────── */
.company-chat-sidebar{
border-right:1px solid rgba(149,198,255,.12);
display:flex;flex-direction:column;overflow:hidden;
}
.company-chat-sidebar-head{
padding:.9rem 1rem;border-bottom:1px solid rgba(149,198,255,.1);
display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.company-chat-sidebar-head h2{font-size:1rem;font-weight:600;color:#f4f8ff;margin:0}
.company-chat-list{flex:1;overflow-y:auto;scrollbar-width:thin}
/* ── Item de conversación ───────────────────────────────────── */
.chat-conv-item{
display:flex;align-items:center;gap:.65rem;
padding:.75rem 1rem;cursor:pointer;border-bottom:1px solid rgba(149,198,255,.07);
transition:background .12s;position:relative;
}
.chat-conv-item:hover{background:rgba(77,163,255,.07)}
.chat-conv-item.active{background:rgba(77,163,255,.12);border-left:2px solid rgba(77,163,255,.6)}
.chat-conv-body{flex:1;min-width:0}
.chat-conv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.chat-conv-top strong{font-size:.85rem;color:#f4f8ff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.chat-conv-time{font-size:.68rem;color:rgba(130,175,230,.4);flex-shrink:0}
.chat-conv-preview{font-size:.78rem;color:rgba(140,185,230,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-unread-dot{
min-width:18px;height:18px;border-radius:999px;
background:rgba(77,163,255,.9);color:#fff;
font-size:.68rem;font-weight:700;padding:0 4px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* ── Hilo de mensajes (empresa) ─────────────────────────────── */
.company-chat-thread{display:flex;flex-direction:column;overflow:hidden}
.company-chat-thread-header{
display:flex;align-items:center;gap:.65rem;
padding:.85rem 1.1rem;border-bottom:1px solid rgba(149,198,255,.1);
flex-shrink:0;
}
.company-chat-thread-header strong{display:block;font-size:.9rem;color:#f4f8ff}
.company-thread-messages{flex:1;overflow-y:auto;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem;scrollbar-width:thin}
.company-chat-empty-state{
flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:.75rem;color:rgba(140,185,230,.45);
font-size:.88rem;
}
/* ── Botón chat en filas de reservas ──────────────────────────── */
.booking-chat-btn{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:8px;border:none;cursor:pointer;
background:rgba(77,163,255,.12);color:rgba(120,190,255,.8);
transition:background .15s,color .15s;
}
.booking-chat-btn:hover{background:rgba(77,163,255,.25);color:#4da3ff}
/* ── Labels e inputs en panels del shell público ── */
.shell .panel label,
.shell .auth-panel label {
color: rgba(200,220,240,.85);
}
.shell table th {
color: rgba(140,175,220,.75);
background: rgba(255,255,255,.04);
}
.shell table td {
color: rgba(235,245,255,.9);
border-color: rgba(149,198,255,.1);
}
.shell .status-pill {
background: rgba(255,255,255,.1);
color: rgba(235,245,255,.9);
}
.shell .save-hint {
color: rgba(140,175,220,.75);
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE COMPLETO — Mobile First
Breakpoints: 768px (tablet), 480px (móvil), 360px (pequeño)
══════════════════════════════════════════════════════════════ */
/* ── Variables responsive ────────────────────────────────────── */
:root {
--shell-pad: 1.25rem;
--panel-pad: 1rem;
--gap: 1rem;
}
@media (max-width:480px) {
:root { --shell-pad:.75rem; --panel-pad:.85rem; --gap:.75rem; }
}
@media (max-width:360px) {
:root { --shell-pad:.5rem; --panel-pad:.7rem; --gap:.5rem; }
}
/* ── Shell y layout base ─────────────────────────────────────── */
@media (max-width:768px) {
.shell { padding:var(--shell-pad); }
.main { gap:var(--gap); }
/* Tablas — scroll horizontal en móvil */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
table { min-width:520px; }
th,td { padding:.65rem .75rem; font-size:.85rem; }
/* Panels */
.panel { padding:var(--panel-pad); border-radius:16px; }
.panel-head { flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.panel-head h2 { font-size:1.1rem; }
.panel-head.between { flex-direction:column; align-items:flex-start; }
/* Grids → columna única */
.admin-grid.four,
.admin-grid.three,
.admin-grid.two { grid-template-columns: repeat(2, 1fr); }
.admin-two-cols { grid-template-columns:1fr; }
.form-grid { grid-template-columns:1fr; }
.form-grid.small{ grid-template-columns:1fr 1fr; }
/* Metric cards más compactas */
.metric-card { padding:.85rem; border-radius:14px; }
.metric-card strong { font-size:1.5rem; }
.metric-card span { font-size:.82rem; }
/* Botones */
.button-row { flex-direction:column; }
.button-row button,
.button-row a { width:100%; text-align:center; }
/* Topbar portal empresa */
.nav-links-company { gap:.25rem; flex-wrap:wrap; }
.nav-links-company a { font-size:.78rem; padding:.35rem .55rem; }
}
@media (max-width:480px) {
/* Grids → columna única absoluta */
.admin-grid.four,
.admin-grid.three,
.admin-grid.two { grid-template-columns:1fr; }
.form-grid.small{ grid-template-columns:1fr; }
/* Tablas: ocultar columnas menos críticas */
table { min-width:400px; }
th,td { padding:.55rem .6rem; font-size:.8rem; }
/* Metric cards en fila de 2 */
.admin-grid.four { grid-template-columns:1fr 1fr; }
/* Panel head siempre columna */
.panel-head { flex-direction:column; align-items:flex-start; }
/* Error screen */
.error-screen { margin:1rem; padding:1.25rem; border-radius:16px; }
/* Status pills más pequeños */
.status-pill { font-size:.76rem; padding:.28rem .5rem; }
}
@media (max-width:360px) {
.admin-grid.four { grid-template-columns:1fr; }
.metric-card strong { font-size:1.3rem; }
}
/* ── Resultados de búsqueda ──────────────────────────────────── */
@media (max-width:768px) {
.result-card { border-radius:18px; }
.result-card-list { grid-template-columns:1fr; gap:.75rem; }
.result-image-list { min-height:180px; border-radius:14px 14px 0 0; }
.result-overlay-list { padding:1rem; }
.result-side { flex-direction:column; gap:.5rem; align-items:flex-start; }
.result-tag-row { flex-wrap:wrap; gap:.35rem; }
.exp-tag-chip { font-size:.75rem; padding:.22rem .5rem; }
}
/* ── Ficha de empresa (company page) ─────────────────────────── */
@media (max-width:768px) {
.company-hero { grid-template-columns:1fr; gap:.75rem; }
.company-image { min-height:200px; border-radius:16px; }
.company-layout { grid-template-columns:1fr; }
.company-hero-compact { grid-template-columns:1fr; gap:.75rem; }
.company-hero-img { min-height:160px; border-radius:14px; }
.company-hero-name { font-size:1.3rem; }
/* Ofertas */
.offer-row { flex-direction:column; gap:.75rem; }
.offer-row-action { flex-direction:row; width:100%; justify-content:space-between; align-items:center; }
.offer-row-price { font-size:1.1rem; }
.offers-grid { grid-template-columns:1fr; }
.offer-card { border-radius:16px; }
.offers-compare-grid { grid-template-columns:1fr; }
/* Qty controls */
.compact-qty { justify-content:center; }
.compact-qty input { width:44px; height:34px; }
.compact-qty .qty-btn { width:30px; height:30px; }
.offer-reserve-btn { width:100%; justify-content:center; padding:.65rem 1rem; }
}
/* ── Carrito ─────────────────────────────────────────────────── */
@media (max-width:768px) {
.cart-layout { grid-template-columns:1fr; }
.cart-item { flex-direction:column; border-radius:16px; }
.cart-item-side { flex-direction:row; justify-content:space-between; align-items:center; width:100%; }
.cart-thumb { width:100%; min-width:0; height:180px; border-radius:12px 12px 0 0; }
.cart-auth-panel { border-radius:16px; }
.cart-auth-tabs { flex-direction:row; gap:.5rem; }
}
/* ── Portal empresa ──────────────────────────────────────────── */
@media (max-width:768px) {
/* Tabla de reservas: scroll horizontal */
#company-bookings-panel .table-wrap { overflow-x:auto; }
#company-bookings-panel table { min-width:600px; }
/* Botones acción en tabla */
.booking-confirm-btn,
.booking-detail-btn { padding:3px 8px; font-size:.75rem; }
.booking-chat-btn { width:26px; height:26px; }
/* Analytics cards */
.admin-grid.four { grid-template-columns:1fr 1fr; }
/* Gráficas SVG: scroll horizontal */
.panel svg { min-width:300px; }
/* Plan portal */
.plan-portal-label { font-size:.8rem; }
.plan-analytics-note { font-size:.82rem; }
}
/* ── Chat empresa ────────────────────────────────────────────── */
@media (max-width:700px) {
.company-chat-layout { grid-template-columns:1fr; height:auto; }
.company-chat-sidebar { max-height:220px; border-right:none; border-bottom:1px solid rgba(149,198,255,.12); }
.company-chat-main { height:calc(100vh - 400px); min-height:280px; }
}
@media (max-width:480px) {
.company-chat-main { height:calc(100vh - 350px); min-height:240px; }
}
/* ── Modal ficha de reserva ──────────────────────────────────── */
@media (max-width:480px) {
/* El modal inline usa style directo en JS — override aquí */
#xp-booking-modal > div {
margin:.5rem;
max-height:92vh;
border-radius:14px;
padding:1.1rem;
}
}
/* ── Auth / login ────────────────────────────────────────────── */
@media (max-width:768px) {
.auth-grid { grid-template-columns:1fr; }
.auth-panel { max-width:100%; border-radius:16px; }
.single-auth { grid-template-columns:1fr; }
}
/* ── Barra de búsqueda principal ─────────────────────────────── */
@media (max-width:768px) {
.search-box { flex-direction:column; gap:.5rem; border-radius:18px; padding:.85rem; }
.search-field-wrap input { height:52px; font-size:1rem; }
.search-btn { width:100%; padding:.75rem; border-radius:12px; justify-content:center; }
.search-hint { position:static; transform:none; margin-top:.5rem; font-size:.82rem; }
.filter-bar { gap:.4rem; }
.filter-bar label { flex:1 1 120px; min-width:0; font-size:.82rem; }
.filter-bar select { font-size:.82rem; padding:.55rem .75rem; }
}
/* ── Topbar público en móvil ─────────────────────────────────── */
@media (max-width:768px) {
.topbar-public { padding:.2rem 0 0; }
.nav-links-public { gap:.25rem; }
.nav-link-login,
.nav-link-account { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ── Ficha reserva cliente (renderBookingDetail) ─────────────── */
@media (max-width:480px) {
/* La ficha usa max-width:600px inline */
.main > div[style*="max-width:600px"] { padding:0; }
/* Cabecera de la ficha */
.main > div[style*="max-width"] > div:first-child { flex-direction:column; align-items:flex-start; gap:.5rem; }
}
/* ── Admin panel ─────────────────────────────────────────────── */
@media (max-width:768px) {
.admin-charts-grid { grid-template-columns:1fr; }
.shell-admin .admin-grid.four { grid-template-columns:1fr 1fr; }
.shell-admin table { min-width:480px; }
.quality-box { padding:.85rem; border-radius:14px; }
}
@media (max-width:480px) {
.shell-admin .admin-grid.four { grid-template-columns:1fr; }
.shell-admin .metric-card strong { font-size:1.4rem; }
}
/* ── Analytics empresa ──────────────────────────────────────── */
@media (max-width:768px) {
/* Gráfica de barras: scroll horizontal */
.panel > div[style*="overflow-x:auto"] svg { width:auto; }
/* Grid sector vs empresa → columna */
.admin-grid.three { grid-template-columns:1fr; }
}
/* ── Planes modal ───────────────────────────────────────────── */
@media (max-width:600px) {
.xp-planes-modal { width:95vw; max-height:92vh; padding:1rem; border-radius:16px; }
.xp-plans-grid { grid-template-columns:1fr; gap:.75rem; }
}
/* ── Correcciones generales móvil ───────────────────────────── */
@media (max-width:480px) {
/* Evitar overflow horizontal en toda la app */
body { overflow-x:hidden; }
.shell { overflow-x:hidden; }
/* Inputs más cómodos en táctil */
input, textarea, select { font-size:16px !important; } /* evita zoom en iOS */
/* Paginación */
.results-pagination { flex-direction:column; align-items:stretch; gap:.5rem; }
.pagination-status { text-align:center; font-size:.85rem; }
/* Legend */
.legend { flex-direction:column; gap:.4rem; }
/* Tag row */
.tag-row { gap:.3rem; }
.tag { font-size:.78rem; padding:.28rem .5rem; }
}
/* ── Fix iOS: inputs no hacen zoom ──────────────────────────── */
@supports (-webkit-touch-callout:none) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea, select { font-size:16px !important; }
}
/* ══════════════════════════════════════════════════════════════
SAFE AREA — Dynamic Island, notch, home indicator
Requiere viewport-fit=cover en el meta viewport (ya está).
env(safe-area-inset-*) = 0 en dispositivos sin isla/notch.
══════════════════════════════════════════════════════════════ */
/* Padding superior en el shell para no quedar bajo la isla */
.shell {
padding-top: calc(var(--shell-pad) + env(safe-area-inset-top));
padding-left: calc(var(--shell-pad) + env(safe-area-inset-left));
padding-right: calc(var(--shell-pad) + env(safe-area-inset-right));
}
/* La topbar es el elemento más cercano a la isla — añadir margen */
.topbar {
margin-top: env(safe-area-inset-top);
}
/* En público la topbar no tiene margen visual, lo añadimos igual */
.topbar-public {
padding-top: calc(.3rem + env(safe-area-inset-top));
margin-top: 0; /* evitar doble margen */
}
/* Bottom: home indicator de iPhone */
.shell {
padding-bottom: calc(var(--shell-pad) + env(safe-area-inset-bottom));
}
/* Elementos fixed/sticky deben respetar safe areas */
.pwa-banner {
bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
.xp-modal-overlay,
#xp-booking-modal,
#xp-planes-modal {
/* Los modales full-screen necesitan padding interno */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Chat empresa: el layout a altura 100vh debe descontar la isla */
.company-chat-layout {
height: calc(100vh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* En móvil: evitar que el teclado virtual tape el input del chat */
@media (max-width:700px) {
.company-chat-layout {
height: auto;
min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.company-chat-main {
height: calc(60svh - env(safe-area-inset-bottom));
}
}
/* Notch lateral en landscape (iPhone en horizontal) */
@media (orientation:landscape) and (max-height:500px) {
.shell {
padding-left: calc(var(--shell-pad) + env(safe-area-inset-left));
padding-right: calc(var(--shell-pad) + env(safe-area-inset-right));
}
.topbar {
margin-top: 0;
padding-left: calc(1rem + env(safe-area-inset-left));
padding-right: calc(1rem + env(safe-area-inset-right));
}
/* En landscape la isla es lateral — el nav puede quedar tapado */
.nav-links {
padding-right: env(safe-area-inset-right);
}
}
/* ══════════════════════════════════════════════════════════════
HERO ROTATIVO — fondo de imagen con gradiente premium
══════════════════════════════════════════════════════════════ */
/* Overlay oscuro sobre la imagen para legibilidad del texto */
.hero-search::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(4, 10, 22, 0.72) 0%,
rgba(6, 14, 30, 0.55) 50%,
rgba(2, 8, 18, 0.40) 100%
);
z-index: 1;
}
/* Todo el contenido del hero por encima del overlay */
.hero-search > * {
position: relative;
z-index: 2;
}
/* Fade in cuando la imagen está cargada */
.hero-bg-loaded {
animation: heroBgFadeIn .5s ease forwards;
}
@keyframes heroBgFadeIn {
from { opacity: .7; }
to { opacity: 1; }
}
/* Texto del hero más legible sobre imagen */
.hero-card-search .search-intro h1 {
color: #fff;
text-shadow: 0 2px 20px rgba(0,0,0,.5);
font-size: clamp(1.6rem, 4vw, 2.8rem);
line-height: 1.15;
}
.hero-card-search .search-intro p {
color: rgba(235,244,255,.85);
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
/* Chips sobre imagen */
.search-chips .search-chip {
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(10px);
color: #fff;
}
.search-chips .search-chip:hover {
background: rgba(255,255,255,.25);
border-color: rgba(255,255,255,.4);
}
/* Barra de búsqueda sobre imagen — fondo semitransparente */
.hero-card-search .search-box {
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(16px);
}
.hero-card-search .search-field-wrap input {
background: rgba(255,255,255,.92);
color: #0d1f35;
}
.hero-card-search .search-field-wrap input::placeholder {
color: #6b7f95;
}
/* Responsive: hero más bajo en móvil */
@media (max-width: 768px) {
.hero-search {
min-height: min(55vh, 420px);
border-radius: 18px;
background-position: center 30%;
}
.hero-card-search .search-intro h1 {
font-size: clamp(1.35rem, 5vw, 1.9rem);
}
}
@media (max-width: 480px) {
.hero-search {
min-height: min(50vh, 380px);
border-radius: 14px;
}
}
/* ══════════════════════════════════════════════════════════════
TEMA PREMIUM DORADO — overrides globales
══════════════════════════════════════════════════════════════ */
/* Tipografía premium — serif para títulos, sans para cuerpo */
h1,h2,h3,.brand,.hero-card h1,.hero-card-search h1 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
letter-spacing: -.01em;
}
body, input, button, select, textarea {
font-family: 'Inter', system-ui, sans-serif;
}
/* Brand dorado */
.brand { color: var(--gold-light) !important; }
/* Hero título */
.hero-card h1 { color: #f5ecd7; }
.hero-card p { color: rgba(245,236,215,.75); }
/* Chips de búsqueda → dorado */
.search-chip {
background: rgba(212,175,87,.1) !important;
border: 1px solid rgba(212,175,87,.25) !important;
color: var(--gold-light) !important;
font-family: 'Inter', sans-serif;
font-size: .83rem;
transition: all .2s;
}
.search-chip:hover {
background: rgba(212,175,87,.2) !important;
border-color: rgba(212,175,87,.45) !important;
color: #fff !important;
transform: translateY(-1px);
}
/* Search hint → dorado */
.search-hint {
background: rgba(212,175,87,.15);
border: 1px solid rgba(212,175,87,.25);
color: var(--gold-light);
}
/* Inputs → fondo muy oscuro con borde dorado */
input, textarea, select {
background: rgba(255,248,220,.05) !important;
border-color: rgba(212,175,87,.2) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
}
input:focus, textarea:focus, select:focus {
border-color: rgba(212,175,87,.6) !important;
box-shadow: 0 0 0 3px rgba(212,175,87,.1) !important;
}
input::placeholder, textarea::placeholder { color: rgba(160,144,122,.7) !important; }
input:-webkit-autofill {
-webkit-text-fill-color: var(--text) !important;
box-shadow: 0 0 0 1000px #0d0c09 inset !important;
}
/* Tablas */
th { color: var(--gold-light) !important; border-bottom: 1px solid rgba(212,175,87,.2) !important; }
td { border-bottom: 1px solid rgba(212,175,87,.08) !important; }
tr:hover td { background: rgba(212,175,87,.04) !important; }
/* Panel head */
.panel-head { border-bottom: 1px solid rgba(212,175,87,.12); padding-bottom: .75rem; }
/* Metric card valor */
.metric-card strong { color: var(--gold-light); }
.metric-card span { color: var(--muted); }
/* Links */
a { color: var(--gold-light); }
a:hover { color: #fff; }
/* Back link */
.back-link { color: var(--muted); }
/* Tags de empresa */
.tag { background: rgba(212,175,87,.1); color: var(--gold-light); border: 1px solid rgba(212,175,87,.18); }
/* Scrollbar dorada sutil */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(212,175,87,.04); }
::-webkit-scrollbar-thumb { background: rgba(212,175,87,.25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,87,.4); }
/* Hero bg layer más visible */
#xp-hero-bg-layer { opacity: 0; transition: opacity 1s ease; }
/* Borde dorado activo en nav */
.nav-links a:focus { outline: 2px solid rgba(212,175,87,.5); outline-offset: 2px; }
/* Filter bar */
.filter-bar {
background: rgba(255,255,255,.08) !important;
border-color: rgba(149,198,255,.18) !important;
}
/* Offer card */
.offer-card { border-color: rgba(212,175,87,.15) !important; }
.offer-card:hover { border-color: rgba(212,175,87,.35) !important; box-shadow: 0 8px 32px rgba(212,175,87,.1) !important; }
/* Experience tab */
.experience-tab { background: rgba(212,175,87,.07); color: var(--text); }
.experience-tab.active { background: linear-gradient(135deg,#c9a84c,#a8862f); color: #0a0a08; }
/* Result card */
.result-card { border-color: rgba(212,175,87,.15) !important; }
/* Sustainability y badges */
.hero-badge { background: rgba(212,175,87,.12); border: 1px solid rgba(212,175,87,.2); color: var(--gold-light); }
/* Save hint */
.save-hint { color: var(--muted); }
/* ── Hero rotativo — fade-in imagen ─────────────────────────── */
@keyframes heroBgFadeIn { from{opacity:.5} to{opacity:1} }
.hero-bg-loaded { animation: heroBgFadeIn .8s ease forwards; }
/* ── Hero responsive ─────────────────────────────────────────── */
@media (max-width:768px) {
.hero-search { min-height:85vh; padding:1.5rem 0; }
.hero-card-search { padding:2rem 1.5rem; border-radius:20px; }
.hero-card h1 { font-size:clamp(1.6rem,5vw,2.2rem); }
.search-field-wrap input { height:58px; padding:0 8rem 0 3.5rem; font-size:1rem; }
.search-hint { padding:.45rem .9rem; font-size:.82rem; }
}
@media (max-width:480px) {
.hero-search { min-height:80vh; padding:1rem 0; }
.hero-card-search { padding:1.5rem 1.25rem; border-radius:16px; }
.search-field-wrap input { height:54px; padding:0 7rem 0 3rem; }
.search-hint { padding:.4rem .75rem; font-size:.78rem; right:.5rem; }
}
/* ══════════════════════════════════════════════════════════════
HERO FULLSCREEN — todo centrado, imagen sin recorte
══════════════════════════════════════════════════════════════ */
/* Capa de imagen de fondo — usa ![]()
con object-fit */
#xp-hero-bg-layer {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
#xp-hero-bg-layer img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* En móvil vertical, centrar más arriba para mostrar el sujeto */
@media (max-width: 768px) and (orientation: portrait) {
#xp-hero-bg-layer img { object-position: center 30%; }
}
/* Contenedor hero — ocupa toda la ventana, centrado */
.xp-hero-fullscreen {
position: relative;
min-height: calc(100vh - 100px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 5vw;
pointer-events: auto;
}
/* Bloque central unificado — todo junto */
.xp-hero-content {
pointer-events: auto;
width: 100%;
max-width: 820px;
text-align: left;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Título */
.xp-hero-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin: 0;
text-shadow: 0 2px 24px rgba(0,0,0,.6);
letter-spacing: -.02em;
}
/* Subtítulo */
.xp-hero-sub {
font-size: clamp(.9rem, 1.4vw, 1.08rem);
color: rgba(255,255,255,.85);
margin: 0;
text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
/* Barra de búsqueda — justo debajo del subtítulo */
.xp-hero-searchbar {
width: 100%;
pointer-events: auto;
position: relative;
}
.xp-hero-searchbar form {
width: 100%;
}
.xp-hero-searchbar .search-field-wrap {
position: relative;
width: 100%;
}
.xp-hero-searchbar input[type="search"] {
width: 100%;
height: 64px;
padding: 0 150px 0 56px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.14);
backdrop-filter: blur(24px);
color: #fff;
font-size: 1.05rem;
-webkit-text-fill-color: #fff !important;
box-shadow: 0 8px 32px rgba(0,0,0,.35);
transition: border-color .2s, background .2s;
}
.xp-hero-searchbar input::placeholder {
color: rgba(255,255,255,.5) !important;
}
.xp-hero-searchbar input:focus {
outline: none;
border-color: rgba(212,175,87,.7);
background: rgba(255,255,255,.18);
box-shadow: 0 0 0 3px rgba(212,175,87,.18), 0 8px 32px rgba(0,0,0,.35);
}
.xp-hero-searchbar .search-icon {
position: absolute;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,.7);
display: grid;
place-items: center;
pointer-events: none;
}
.xp-hero-searchbar .search-icon svg {
width: 22px;
height: 22px;
}
/* Botón buscar */
.xp-search-btn {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
height: 50px !important;
padding: 0 1.8rem !important;
border-radius: 999px !important;
background: linear-gradient(135deg,#c9a84c,#a8862f) !important;
color: #0a0a08 !important;
font-weight: 700 !important;
font-size: .95rem !important;
border: none !important;
box-shadow: 0 4px 16px rgba(212,175,87,.35) !important;
cursor: pointer !important;
white-space: nowrap !important;
width: auto !important;
transition: background .2s !important;
}
.xp-search-btn:hover {
background: linear-gradient(135deg,#e0be62,#c9a84c) !important;
transform: translateY(-50%) !important;
}
/* Autocomplete */
.xp-hero-searchbar .autocomplete-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: rgba(8,7,4,.95);
border: 1px solid rgba(212,175,87,.22);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(20px);
z-index: 200;
}
/* Chips — debajo del buscador */
.xp-hero-chips {
display: flex;
flex-wrap: wrap;
gap: .45rem;
pointer-events: auto;
}
.xp-hero-chips .search-chip {
background: rgba(0,0,0,.32) !important;
border: 1px solid rgba(255,255,255,.28) !important;
color: rgba(255,255,255,.9) !important;
backdrop-filter: blur(10px);
padding: .4rem .85rem;
font-size: .82rem;
border-radius: 999px;
cursor: pointer;
transition: all .18s;
}
.xp-hero-chips .search-chip:hover {
background: rgba(212,175,87,.28) !important;
border-color: rgba(212,175,87,.6) !important;
color: #fff !important;
}
/* El shell y main no limitan la altura del hero */
.shell:has(.xp-hero-fullscreen),
.main:has(.xp-hero-fullscreen) {
min-height: 100vh;
overflow: visible;
}
/* Topbar sobre el hero — transparente */
.topbar-public {
position: relative;
z-index: 10;
}
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
.xp-hero-fullscreen { padding: 0 4vw; }
.xp-hero-content { max-width: 100%; }
.xp-hero-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.xp-hero-sub { font-size: .9rem; }
.xp-hero-searchbar input[type="search"] {
height: 56px; font-size: .95rem; padding: 0 130px 0 48px;
}
.xp-search-btn { height: 44px !important; padding: 0 1.2rem !important; font-size: .88rem !important; }
}
@media (max-width: 480px) {
.xp-hero-fullscreen { padding: 0 4vw; justify-content: flex-start; padding-top: calc(80px + env(safe-area-inset-top)); }
.xp-hero-title { font-size: clamp(1.6rem, 8.5vw, 2.2rem); }
.xp-hero-searchbar input[type="search"] {
height: 52px; font-size: .9rem; padding: 0 110px 0 44px;
}
.xp-search-btn { height: 40px !important; padding: 0 .9rem !important; font-size: .82rem !important; }
.xp-hero-chips .search-chip { font-size: .76rem; padding: .35rem .65rem; }
}
/* Fade-in imagen */
@keyframes heroBgFadeIn { from{opacity:.5} to{opacity:1} }
.hero-bg-loaded { animation: heroBgFadeIn .8s ease forwards; }
#xp-bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
.shell{position:relative;z-index:1}
#app{position:relative;z-index:1}
/* ── Hero background image layer ───────────────────────────── */
#xp-bg { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none }
#xp-bg img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center }
#app { position:relative;z-index:1 }
/* Portrait móvil: mostrar parte superior de la imagen */
@media (max-width:768px) and (orientation:portrait) {
#xp-bg img { object-position:center 20% }
}
/* ── TOKEN VISUAL UNIFICADO — azul translúcido ──────────────── */
.panel, .metric-card, .empty-card, .weather-panel,
.plan-panel, .filter-bar, .offer-card, .auth-panel,
.company-panel, .experience-list, .hero-card {
background: rgba(255,255,255,.08) !important;
border-color: rgba(149,198,255,.18) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.weather-day {
background: rgba(255,255,255,.06) !important;
border-color: rgba(149,198,255,.15) !important;
}