/* Hay Juntada! · KorexLabs night edition · 2026-11-10
   Overlay visual sin modificar lógica, navegación o datos del producto. */
:root {
  color-scheme:dark;
  --md-primary:#ff7951;
  --md-on-primary:#121824;
  --md-primary-container:#432c32;
  --md-on-primary-container:#ffd1bc;
  --md-primary-fixed-dim:#ffac89;
  --md-secondary:#4aafff;
  --md-on-secondary:#061626;
  --md-secondary-container:#193958;
  --md-on-secondary-container:#c3e4ff;
  --md-tertiary:#fbbf62;
  --md-on-tertiary:#22190c;
  --md-tertiary-container:#443421;
  --md-on-tertiary-container:#ffe0a1;
  --md-success:#58e6b0;
  --md-on-success:#092119;
  --md-success-container:#143e35;
  --md-on-success-container:#bbfbe2;
  --md-error:#ff748a;
  --md-on-error:#250c16;
  --md-error-container:#46222d;
  --md-on-error-container:#ffc9d4;
  --md-background:#080f1d;
  --md-on-background:#f2f6ff;
  --md-surface:#0c1729;
  --md-on-surface:#f2f6ff;
  --md-on-surface-variant:#a8b8d0;
  --md-surface-dim:#080f1d;
  --md-surface-bright:#263a52;
  --md-surface-container-lowest:#0e192a;
  --md-surface-container-low:#111f33;
  --md-surface-container:#14243a;
  --md-surface-container-high:#1b2c43;
  --md-surface-container-highest:#263952;
  --md-outline:#5a708d;
  --md-outline-variant:#2b405a;
  --md-inverse-surface:#e4ecf8;
  --md-inverse-on-surface:#101b30;
  --md-inverse-primary:#e35d3d;
  --md-scrim:rgba(2,7,16,.82);
  --elev-1:0 5px 18px rgba(0,0,0,.19);
  --elev-2:0 12px 30px rgba(0,0,0,.22);
  --elev-3:0 16px 38px rgba(0,0,0,.32);
  --elev-4:0 24px 60px rgba(0,0,0,.42);
  --shape-xs:11px;
  --shape-sm:15px;
  --shape-md:19px;
  --shape-lg:23px;
  --shape-xl:27px;
  --fuego-d:#ff6440;
  --fuego-l:#ffa383;
  --carbon2:#d6e5fa;
  --oro:#ffc673;
  --shadow:var(--elev-1);
}
html, body { background:#080f1d; color:var(--md-on-surface); }
body { background-image:radial-gradient(circle at 0 0,rgba(44,114,218,.09),transparent 44%); }
#app, .screen {
  background:radial-gradient(ellipse at 100% 0,rgba(30,80,145,.11),transparent 45%),var(--md-surface);
}
.screen .content { scrollbar-color:#344a65 transparent; }
::-webkit-scrollbar-thumb { background:#344a65; }
.topbar {
  min-height:72px;
  padding-left:12px;padding-right:12px;
  background:rgba(12,23,41,.96);
  border-bottom:1px solid rgba(104,138,182,.13);
}
.topbar h1 { color:#fff;font-weight:800;letter-spacing:-.65px;font-size:20px; }
.topbar.fuego {
  background:linear-gradient(110deg,#12233a,#1d344d);
  border-bottom:1px solid #30445e;color:#fff;
}
.btn-icon { background:rgba(32,51,75,.76);border:1px solid rgba(118,153,201,.14);border-radius:15px;color:#eaf3ff; }
.btn-icon:focus-visible,.btn:focus-visible,.nav-item:focus-visible,
.quick-actions button:focus-visible,.asado-card:focus-visible {outline:3px solid #5db9ff;outline-offset:2px}
.hj-topbar-mark {width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 5px 9px rgba(255,101,71,.15))}
.hj-topbar-mark img {display:block;width:42px;height:42px;border-radius:13px}
.hj-topbar-title {display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hj-topbar-title small {font-size:9px;font-weight:800;letter-spacing:2px;color:#ff9c78}
.hj-topbar-title #home-title {margin:0;font-size:19px;line-height:1.18}
#screen-home .topbar>.btn-icon {margin-left:auto}
#screen-home .content {padding-top:13px}
#screen-home .home-hero-unified {
  position:relative;overflow:hidden;
  padding:21px 18px 17px;
  background:radial-gradient(circle at 100% 0,rgba(56,128,219,.30),transparent 52%),
    linear-gradient(137deg,#162b46 0%,#101f34 64%,#1b263e 100%);
  border:1px solid #304765;
  box-shadow:0 15px 33px rgba(1,5,13,.25),inset 0 1px rgba(255,255,255,.06);
  border-radius:26px;
}
#screen-home .home-hero-unified:before {
  content:"";pointer-events:none;position:absolute;
  width:165px;height:165px;right:-84px;top:-85px;border-radius:50%;
  background:linear-gradient(130deg,rgba(52,139,255,.62),rgba(16,75,139,.05));
}
#screen-home .home-hero-unified .ig-meta-col {position:relative;z-index:1}
#screen-home .home-hero-unified .ig-av {border:3px solid #ff7d57;box-shadow:0 6px 16px rgba(255,94,51,.14)}
#screen-home .hj-home-kicker {display:block;font-weight:800;font-size:9px;letter-spacing:1.65px;color:#ffad88;margin-bottom:4px}
#screen-home .home-hero-unified .ig-name {font-size:19px!important;letter-spacing:-.5px;line-height:1.18}
#screen-home .home-hero-unified .ig-nick {color:#b6c9e3!important;font-family:var(--fb);font-size:12px!important}
#screen-home .home-hero-unified .ig-stats-row {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  border:0;padding:0;margin-top:14px
}
#screen-home .home-hero-unified .ig-stat {
  display:flex;justify-content:center;align-items:center;min-width:0;
  padding:10px 3px;border-radius:13px;
  border:1px solid rgba(148,190,243,.12);
  background:rgba(8,18,33,.55);
}
#screen-home .home-hero-unified .ig-stat strong {font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#f8fbff}
#screen-home .home-hero-unified .ig-stat span {font-family:var(--fb);font-size:10px;color:#9db4d3}
#screen-home .quick-actions {gap:10px;margin-bottom:18px}
#screen-home .quick-actions button {
  padding:13px 10px;min-height:54px;border-radius:17px;
  background:#1a2a42;color:#e9f4ff;font-size:13px;font-weight:800;
  border:1px solid #35506e;
}
#screen-home .quick-actions button:first-child {
  color:#1c1b24;border-color:transparent;
  background:linear-gradient(105deg,#ff6d50,#ffa34d);
  box-shadow:0 8px 19px rgba(245,96,51,.20);
}
.section-label {color:#91b6e9;font-weight:800;letter-spacing:1.1px;font-size:11px}
.card,.asado-card,.bf-card,.global-balance-card,.comensal-card,.friend-card,.notif-item,
.pago-item,.balance-report-box,.empty-card,.join-card {
  background:linear-gradient(145deg,#182942,#111e32);
  border:1px solid #2d415b;
  box-shadow:0 8px 23px rgba(0,0,0,.12);
  border-radius:20px;
}
.asado-card {padding:15px;margin-bottom:11px;cursor:pointer}
.asado-card:hover,.bf-card:hover {border-color:#49698d;background:linear-gradient(145deg,#1b304a,#14233a)}
.asado-card-head {gap:11px;align-items:center}
.asado-card .asado-icon {
  background:linear-gradient(145deg,#fb694a,#e84830);
  color:#fff;border-radius:16px;width:48px;height:48px;
  box-shadow:0 7px 18px rgba(247,88,50,.24);
  font-size:22px;
}
.asado-card .card-title {font-size:16px;font-weight:800;letter-spacing:-.3px;margin:0;color:#f8fbff}
.asado-card .card-sub {color:#a8bad3;font-family:var(--fb);font-size:12px;margin-top:3px;letter-spacing:0}
.asado-card .badge {border-radius:99px;font-size:10px;padding:6px 9px;letter-spacing:.4px}
.badge-open {background:#432e2e;color:#ffb398;border:1px solid rgba(255,148,105,.19)}
.badge-closed {background:#173a35;color:#9cedd0;border:1px solid rgba(82,230,176,.16)}
.asado-card .asado-card-foot {border-top:1px solid #324761;color:#b0c1d8}
.asado-card .asado-card-foot strong {color:#f9fcff;font-size:19px}
.hj-card-kicker {font-size:10px;color:#ffa37c;font-weight:800;letter-spacing:1px;margin:0 0 10px}
.hj-card-action {color:#66baff;font-size:18px;margin-left:4px;font-weight:900}
.bf-card {padding:13px 8px;border-radius:18px}
.bf-av {background:#293e58;border:2px solid #4f7299;color:#fff}
.bf-name {color:#f4f7ff}
.bf-count {color:#aabbd4}
.btn {
  border-radius:17px;font-weight:800;
}
.btn-primary,.app-confirm-ok,.chat-send {
  background:linear-gradient(110deg,#ff7753,#ffa04b);color:#121824;
  box-shadow:0 6px 14px rgba(239,106,57,.18);
}
.btn-outline {border:1px solid #4a6a91;background:#172840;color:#e5f3ff}
.btn-secondary,.btn-tonal {background:#1c3b5b;color:#d6eeff}
.btn-lime {background:var(--md-success-container);color:var(--md-on-success-container)}
.fab {
  background:linear-gradient(135deg,#ff6c4d,#ffa04b);color:#141c2b;
  border:1px solid rgba(255,205,149,.5);border-radius:20px;
  box-shadow:0 10px 25px rgba(255,99,55,.28);
}
.input-field,.input-prefix,.chat-input textarea {
  background:#101d30;border:1px solid #39516f;color:#f0f6ff;border-radius:14px;
}
.input-field::placeholder,.chat-input textarea::placeholder {color:#8297b3;opacity:1}
.input-field:focus,.chat-input textarea:focus {border-color:#69b9ff;box-shadow:0 0 0 3px rgba(62,159,244,.13)}
.input-label {color:#c4d5ea;font-weight:700}
.bottom-nav {
  background:rgba(11,21,36,.96);
  border-top:1px solid #2a3d55;
  box-shadow:0 -6px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
}
.nav-item {color:#91a9c8}
.nav-item .nav-icon {border-radius:13px}
.nav-item.active {color:#ffaf8a}
.nav-item.active .nav-icon {background:linear-gradient(135deg,#4e332f,#2e3447);color:#ffab82;border:1px solid rgba(253,135,85,.26)}
.nav-item.active .nav-label {color:#ffae88}
.nav-badge {border-color:#101c31}
.stat,.balance-report-stat,.friends-mini-stat-v2 {
  background:#14263e;border:1px solid #2d445f;border-radius:16px;
}
.stat-val,.ig-pub-stat strong {color:#5bc0ff}
.home-hero,.detail-hero,.ig-profile-hero {
  background:radial-gradient(circle at 100% 0,rgba(54,125,214,.29),transparent 50%),
    linear-gradient(140deg,#173151,#122038 70%,#1f304b);
  border:1px solid #344b6b;box-shadow:var(--elev-2);
  border-radius:26px;
}
.home-hero:after,.detail-hero:after {opacity:.09}
.hero-kicker {color:#ffae80}
.hero-stats div {background:rgba(8,20,36,.52);border-color:#35516c}
.hero-stats span {color:#a8bdd8}
.ig-profile-hero .ig-name {color:#fff!important}
.ig-profile-hero .ig-nick {color:#bacce3!important}
.ig-profile-hero .ig-stat span {color:#bbcae0}
#screen-friends .friends-hero-v2 {
  background:radial-gradient(circle at 100% 0,rgba(55,148,249,.26),transparent 55%),linear-gradient(130deg,#193651,#11243b)!important;
  border:1px solid #355472!important;
  box-shadow:0 14px 35px rgba(0,0,0,.20)!important;
}
#screen-friends .friends-hero-v2 .friends-hero-title-v2 {color:#f6f9ff!important}
#screen-friends .friends-hero-v2 .friends-hero-sub-v2 {color:#b4c5df!important}
#screen-friends .friends-mini-stat-v2 {background:#13263e!important;border-color:#38516c!important}
#screen-friends .friends-mini-stat-v2 * {color:#d6e8fb}
#screen-friends .friends-hero-ico-v2 {background:linear-gradient(135deg,#214970,#14273d);box-shadow:none!important}
#screen-balance .balance-hero-v2 {
  background:radial-gradient(circle at 100% 0,rgba(80,170,255,.25),transparent 60%),linear-gradient(135deg,#183350,#0e213a 70%,#19354a);
  border:1px solid #345578;box-shadow:var(--elev-2)!important;
}
#screen-balance .balance-hero-v2 .balance-hero-ico-v2 {background:rgba(74,175,255,.15)}
.balance-tabs button,.balance-report-tab {color:var(--md-on-surface)}
.sheet {background:#101f34;border:1px solid #304765;border-bottom:0;box-shadow:0 -18px 54px rgba(0,0,0,.56)}
.sheet-overlay {background:rgba(3,7,18,.79)}
.sheet-title {color:#f6f8ff;font-weight:800}
.sheet-handle {background:#526985}
.app-confirm-card {background:#14233a;border:1px solid #38516d;color:#f0f5ff;box-shadow:0 18px 60px rgba(0,0,0,.48)}
.app-confirm-title {color:#fff;font-weight:800}
.app-confirm-list div {background:#1b2d45;border-color:#3c526d}
.app-confirm-cancel {background:#1e324e;color:#cce8ff}
.app-confirm-ok.lime {background:#2bc493;color:#0b1d1a}
.msg-wrap.other .msg-bubble {background:#263953;color:#fff}
.msg-wrap.mine .msg-bubble {background:#246fa8;color:#fff}
.chat-messages {background:#0d1a2b}
.chat-input {background:#101d31;border-top-color:#2f4561}
.auth-hero {
  background:radial-gradient(circle at 100% 0,rgba(255,116,68,.15),transparent 46%),linear-gradient(145deg,#182b48,#0d1a2f);
}
.auth-hero::before {background:#ff754c;opacity:.16}
.auth-glow {background:radial-gradient(circle,#ff7951 0,rgba(255,112,67,0) 68%)}
.auth-mark {
  display:grid;place-items:center;
  background:transparent!important;color:#fff;box-shadow:0 8px 23px rgba(255,92,48,.2);
}
.auth-mark img {width:100%;height:100%;border-radius:18px}
.auth-logo em {color:#ff9a70}
.auth-tagline {letter-spacing:1px;color:#a3b8d4}
.auth-mini-grid span {background:#1b3454;border-color:#3d5c7f;color:#e0efff}
.auth-form {background:#111e32;color:#eaf3ff;border:1px solid #2a3c57;box-shadow:0 -15px 40px rgba(0,0,0,.14)}
.auth-tabs {background:#1b2d45}
.auth-tab.active {background:#ff7951;color:#151824}
.auth-option {background:#172942;border:1px solid #334d6a;border-radius:18px}
.auth-option-icon {background:#423033;color:#ffb493}
.auth-inline-note {background:#172b44;color:#afc0d8}
.auth-assist-panel {background:#152841;border-color:#3a536f}
#install-banner,#pwa-update-banner {
  background:#142640;color:#eef5ff;border:1px solid #3c5979;
  box-shadow:0 16px 43px rgba(0,0,0,.35)
}
#install-banner .install-banner-copy p,
#pwa-update-banner .pwa-update-copy p {color:#b8cde6}
.pwa-update-icon,.install-banner-icon {background:linear-gradient(140deg,#f86c48,#ec5635)}
.pwa-update-now,.install-banner-primary {background:#ff7951!important;color:#161720!important}
.pwa-update-later {background:#263c55;color:#d5e7fa}
body.app-main-mode,body.auth-mode {
  background:radial-gradient(circle at 8% 10%,rgba(39,120,217,.15),transparent 42%),
    radial-gradient(circle at 94% 82%,rgba(246,107,65,.11),transparent 35%),#080f1d!important;
}
@media(min-width:900px) {
  body.app-main-mode #app,body.auth-mode #app {
    background:#0b182b;border:1px solid #324764;
    box-shadow:0 28px 85px rgba(0,0,0,.47)
  }
  body.app-main-mode .bottom-nav {
    background:linear-gradient(180deg,#111e32,#0b1729);
    border-right:1px solid #2f4562;box-shadow:none
  }
  body.app-main-mode .nav-item:hover {background:#1b304d;color:#e5f2ff}
  body.app-main-mode .nav-item.active {background:#243950;color:#ffa47a}
  body.app-main-mode .nav-item.active .nav-icon {background:#4a3535;color:#ffad80}
  body.app-main-mode .desktop-nav-brand {border-bottom-color:#31465f}
  body.app-main-mode .desktop-nav-foot {border-top-color:#304560;color:#9cb3d1}
  body.app-main-mode .desktop-nav-foot strong {color:#f5f9ff}
  .desktop-nav-mark {background:transparent;box-shadow:none}
  .desktop-nav-mark img {width:44px;height:44px;border-radius:14px}
  body.app-main-mode .topbar {background:rgba(13,25,43,.97)}
  body.auth-mode #screen-auth,body.auth-mode .auth-form {background:#111f34}
  body.auth-mode #screen-auth {background:#0d1a2c}
  body.auth-mode .auth-desktop-points b {color:#ffaf83}
  body.auth-mode .auth-desktop-points span {background:rgba(38,68,102,.55);border-color:#3e5a77}
  body.app-main-mode #home-content>.home-hero-unified {grid-column:1/-1}
}
@media(max-width:899px) {
  .topbar {padding-left:13px;padding-right:13px}
  .content {padding-left:14px;padding-right:14px}
  #screen-home .home-hero-unified {padding:19px 14px 15px!important}
  #screen-home .home-hero-unified .ig-stats-row {gap:5px}
  #screen-home .home-hero-unified .ig-stat strong {font-size:13px}
  .bottom-nav {background:rgba(10,21,36,.97)!important;border-top-color:#2e415b!important}
  .nav-item.active .nav-icon {background:#493332!important;color:#ffa57e!important}
  .quick-actions button {min-width:0}
}
@media(max-width:375px){
  .hj-topbar-title small {letter-spacing:1.3px}
  .hj-topbar-title #home-title {font-size:17px}
  #screen-home .home-hero-unified .ig-name {font-size:16px!important}
  #screen-home .home-hero-unified .ig-stat span {font-size:9px}
  .asado-card .badge {font-size:9px;padding:5px 7px}
}
@media(prefers-reduced-motion:reduce){
  .asado-card,.btn,.fab,.nav-item {transition:none!important}
}

/* v47 · Desktop: las tarjetas deben crecer según su contenido.
   Evita recortar total, participantes y acciones en rejillas de 2 columnas. */
@media (min-width:900px){
  body.app-main-mode #home-content {
    grid-auto-rows:max-content;
    align-items:start;
  }
  body.app-main-mode #home-content > .asado-card{
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    height:auto!important;
    min-height:188px!important;
    max-height:none!important;
    overflow:visible;
    align-self:stretch;
    padding:18px 19px 20px;
    border-radius:21px;
  }
  body.app-main-mode #home-content > .asado-card .asado-card-head{
    flex:0 0 auto;
    min-width:0;
    align-items:center;
  }
  body.app-main-mode #home-content > .asado-card .asado-card-foot{
    flex:0 0 auto;
    width:100%;
    min-height:44px;
    margin-top:auto;
    padding-top:12px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 14px;
    align-items:center;
    column-gap:8px;
  }
  body.app-main-mode #home-content > .asado-card .asado-card-foot span:first-child{
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.app-main-mode #home-content > .asado-card .asado-card-foot strong{
    max-width:100%;
    white-space:nowrap;
    font-size:clamp(15px,1.45vw,19px);
    text-overflow:ellipsis;
  }
  body.app-main-mode #home-content > .asado-card:hover {
    background:linear-gradient(145deg,#1b304a,#14233a);
    border-color:#49698d;
    box-shadow:0 12px 28px rgba(0,0,0,.3);
  }
}