/* =================================
   LIF POKER - CSS V6.3.1 (clean, fixed)
   Dashboard styles sin duplicados ni reglas muertas
   Pila de capas: header(1300) > sidebar(1200) > overlay(1100) > contenido
   ================================= */

/* ---------- Variables ---------- */
:root{
  --primary:#00bcd4; --accent:#1de9b6;
  --bg:#121212; --text:#e0f7fa; --card-bg:#1e1e1e;
  --border-color:#333; --menu-bg:rgba(18,18,18,.95);
  --danger:#ef4444; --success:#10b981; --info:#3b82f6; --neutral:#a0aec0;
  --elevation-1:0 4px 6px rgba(0,0,0,.1);
  --elevation-2:0 10px 15px rgba(0,0,0,.15);
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
  --headerH:70px;
}
@media (max-width:991.98px){ :root{ --headerH:64px; } }

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(29,233,182,.05) 0%, transparent 20%),
    radial-gradient(circle at 85% 80%, rgba(0,188,212,.05) 0%, transparent 20%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:hidden; overflow-y:auto;
}

/* Helpers */
.hidden{ display:none !important } /* evita overlays “invisibles” que tapan clics */
.mobile-only{display:block}
.desktop-only{display:none}
.last-class-info{margin-top:.5rem; padding-top:.5rem; border-top:1px dashed rgba(255,255,255,.1)}
#spot-of-the-week-widget{display:none !important}

/* ---------- Layout shell ---------- */
#dashboard-layout{
  display:flex; flex-direction:column; min-height:100vh;
  opacity:1 !important; visibility:visible !important;
  transition:none !important; position:relative; z-index:10;
}

#dashboard-layout.show{ opacity:1; visibility:visible; }

/* ---------- Header ---------- */
.main-header{
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#000;
  padding:0 1.5rem; display:flex; align-items:center; gap:1rem; justify-content:center;
  height:var(--headerH); min-height:var(--headerH);
  position:sticky; top:0; z-index:1300 !important;
  box-shadow:var(--elevation-1); border-bottom:1px solid rgba(255,255,255,.06);
}

/* Hamburguesa móvil en header (izquierda) */
#mobile-menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:0;
  background:linear-gradient(145deg,var(--primary),var(--accent)); color:#000;
  font-size:1.2rem; box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
  position:absolute; left:12px; top:50%; transform:translateY(-50%); z-index:1100;
}
#mobile-menu-btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,.3); }
#mobile-menu-btn:active{ transform:translateY(-50%) translateY(1px); }
@media (min-width:992px){ #mobile-menu-btn{ display:none !important; } }

/* Título del header */
.site-title{
  margin:0 auto; user-select:none; text-align:center;
  font-family:'Orbitron',sans-serif; font-weight:800;
  font-size:clamp(1.8rem,3.2vw + 1rem,3.2rem);
  letter-spacing:.08em; color:#000; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
@keyframes hero-in{
  0%{opacity:0; transform:scale(.85); letter-spacing:.02em; filter:blur(2px)}
  60%{opacity:1; transform:scale(1.03); letter-spacing:.1em; filter:blur(0)}
  100%{opacity:1; transform:scale(1); letter-spacing:.08em}
}
@keyframes hero-breathe{
  0%,100%{text-shadow:0 0 0 rgba(0,188,212,0)}
  50%{text-shadow:0 0 18px rgba(0,188,212,.35)}
}
.site-title.enter{
  animation: hero-in 900ms cubic-bezier(.2,.9,.25,1) forwards,
             hero-breathe 7s ease-in-out 1s infinite;
}

/* Ocultar saludo + botón salir en header (usamos el del sidebar) */
.header-user-info{display:none !important;}
#logout-button{display:none !important;}

/* ---------- Sidebar + Overlay ---------- */
#side-menu{
  background:var(--menu-bg);
  border-right:1px solid var(--border-color);
  width:260px;
  position:fixed;
  left:0;
  top:var(--headerH) !important;
  height:calc(100vh - var(--headerH)) !important;
  z-index:1200 !important;
  transform:translateX(-100%);
  transition:transform .3s ease;
  will-change:transform;
  display:flex; flex-direction:column;
  box-shadow:2px 0 10px rgba(0,0,0,.3);
}
#side-menu.active{ transform:translateX(0) }
.side-menu-header{ padding:1rem; min-height:60px; display:flex; align-items:center }

/* Botón toggle sidebar (desktop) */
#toggle-menu-btn{
  display:flex !important; position:fixed; top:15px; left:15px;
  width:36px; height:36px; border:0; border-radius:8px; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--primary),var(--accent)); color:#000;
  cursor:pointer; z-index:1200; box-shadow:0 2px 5px rgba(0,0,0,.2);
  transition:transform .2s, box-shadow .2s;
}
#toggle-menu-btn:hover{ transform:scale(1.08); box-shadow:0 4px 8px rgba(0,188,212,.35) }
@media (max-width:991.98px){ #toggle-menu-btn{ display:none !important; } }

/* Overlay debajo del sidebar, cubre el main, sin blur */
#menu-overlay{
  position:fixed; inset:var(--headerH) 0 0 0;
  background:rgba(0,0,0,.45);
  z-index:1100 !important;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
#menu-overlay.active{ opacity:1; pointer-events:auto; }
@media (min-width:992px){
  #menu-overlay{ display:none !important; opacity:0 !important; pointer-events:none !important; }
}

/* ---------- Navegación dentro del sidebar ---------- */
#side-menu-nav{ display:flex; flex-direction:column; height:100%; position:relative; scroll-padding-bottom:96px; }
#side-menu-nav a{
  display:flex; align-items:center; gap:.75rem; margin-bottom:.25rem;
  padding:.9rem 1rem; border-radius:8px; text-decoration:none; border-left:4px solid transparent;
  color:var(--neutral); font-weight:600; font-size:1.05rem; transition:var(--transition);
}
#side-menu-nav a:hover{ background:rgba(255,255,255,.05); color:var(--accent); transform:translateX(5px) }
#side-menu-nav a.active{ background:rgba(0,188,212,.1); color:#fff; border-left-color:var(--primary) }

/* Carpeta Herramientas */
.menu-folder{ margin-bottom:.5rem }
.folder-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1rem; border-radius:8px; color:var(--neutral); font-weight:600; font-size:1.05rem;
  cursor:pointer; border-left:4px solid transparent; transition:var(--transition);
}
.folder-toggle:hover{ background:rgba(255,255,255,.05); color:var(--accent) }
.folder-toggle i:last-child{ display:inline-block; transition:transform .2s ease; }
.folder-toggle i:last-child.rotated{ transform:rotate(-180deg); }

/* Contenido de la carpeta (una sola convención) */
.folder-content{
  max-height:0; overflow:hidden; transition:max-height .3s ease; padding-left:1.5rem;
}
.menu-folder.open .folder-content{ max-height:1000px !important; }
.folder-content a{ font-size:.95rem !important; padding:.7rem 1rem !important; border-left:none !important }

/* Cerrar sesión */
#logout-menu-button{
  background:linear-gradient(145deg,#f24a48,#d93a36) !important;
  color:#000 !important; border:0 !important; border-radius:12px !important;
  padding:12px 16px !important; font-weight:800 !important;
  width:calc(100% - 24px) !important; margin:8px 12px 12px !important;
  box-shadow:0 6px 16px rgba(210,50,45,.35) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:.5rem !important;
  transition:filter .2s ease, box-shadow .2s ease !important;
}
#logout-menu-button:hover{ filter:brightness(1.06); box-shadow:0 10px 22px rgba(210,50,45,.45) !important; }
#logout-menu-button:active{ filter:brightness(.98); box-shadow:0 4px 10px rgba(210,50,45,.35) !important; }

/* ===== Fix mobile sidebar: logout sticky, nav scrollea ===== */
@media (max-width:991.98px){
  #side-menu{ display:flex; flex-direction:column; max-height:100vh; }
  #side-menu-nav{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:88px !important; }
  #logout-menu-button{
    position:sticky !important; bottom:max(8px, env(safe-area-inset-bottom)) !important;
    z-index:20 !important; margin-bottom:max(8px, env(safe-area-inset-bottom)) !important;
    backdrop-filter:blur(4px);
  }
}

/* --- Landscape bajo: el logout no flota --- */
@media (orientation:landscape) and (max-height:480px){
  #side-menu{ padding-bottom:0 !important; }
  #side-menu-nav{ padding-bottom:12px !important; }
  #logout-menu-button{ position:static !important; z-index:auto !important; margin:8px 12px 12px !important; backdrop-filter:none !important; }
}

/* ---------- Views ---------- */
#main-content{ overflow-y:visible; }
.view{
  display:none; max-width:min(1400px, calc(100vw - 2rem));
  width:100%; margin:0 auto; padding:1rem; min-height:auto; padding-bottom:1.25rem;
}
.view.active{ display:block !important; animation:fadeIn .4s ease-out }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.view-header{ margin-bottom:2rem }
.view-title{
  font-family:'Orbitron',sans-serif; font-size:2.5rem; color:var(--primary);
  border-bottom:2px solid var(--accent); padding-bottom:.5rem; margin-bottom:1rem; display:inline-block;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}
.view-title.saludo{ text-align:left; display:inline-block; }

/* ---------- Widgets ---------- */
.hub-top-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.25rem; align-items:stretch; justify-items:stretch;
}
.widget-card{
  background:var(--card-bg); border-radius:12px; padding:1.5rem; border:1px solid var(--border-color);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:var(--elevation-1); transition:var(--transition); width:100%;
}
.widget-card:hover{ transform:translateY(-5px); box-shadow:var(--elevation-2); border-color:rgba(29,233,182,.3) }
.widget-label,.widget-value,.widget-subtext{ width:100%; text-align:center }
.widget-label{ text-transform:uppercase; font-size:.8rem; color:#a0aec0; margin-bottom:.5rem; letter-spacing:.5px }
.widget-value{ font-size:2.5rem; font-weight:900; line-height:1.1; text-shadow:1px 1px 3px rgba(0,0,0,.3); margin:.5rem 0 }
.widget-subtext{ font-size:1rem; color:var(--neutral); margin-bottom:.5rem; line-height:1.4 }
.widget-actions{ margin-top:auto; padding-top:1rem; display:flex; gap:.5rem; justify-content:center }

/* Botones vivos (widgets + CTAs) */
.widget-button,.cta-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem; position:relative; overflow:hidden;
  padding:12px 22px; border:0; border-radius:12px; cursor:pointer; font-weight:700; font-size:.95rem;
  background:linear-gradient(145deg,var(--primary),var(--accent)); color:#000;
  box-shadow:0 6px 18px rgba(0,188,212,.35); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.widget-button:hover,.cta-button:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 24px rgba(0,188,212,.45); filter:brightness(1.06) }
.widget-button:active,.cta-button:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(0,188,212,.3) }
.widget-button.cancel{
  background:linear-gradient(145deg,#ef4444,#e53935); color:#fff; box-shadow:0 6px 18px rgba(239,68,68,.35);
}
.widget-button.cancel:hover{ box-shadow:0 10px 24px rgba(239,68,68,.45) }

/* Ripple */
.widget-button::after,.cta-button::after{
  content:''; position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:100%;
  background:rgba(255,255,255,.5); opacity:0; transform:scale(1) translate(-50%,-50%);
}
.widget-button:active::after,.cta-button:active::after{ animation:ripple .6s ease-out }
@keyframes ripple{ 0%{transform:scale(0);opacity:1} 100%{transform:scale(50);opacity:0} }

/* WhatsApp CTA */
.whatsapp-link{
  background:linear-gradient(145deg,#25D366,#128C7E); color:#fff !important;
  border-radius:50px; width:auto; padding:12px 20px; display:inline-flex; align-items:center; gap:10px; font-weight:600;
  box-shadow:0 4px 10px rgba(37,211,102,.3); transition:all .3s ease;
}
.whatsapp-link:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 7px 15px rgba(37,211,102,.4) }
.whatsapp-container{ margin-top:auto; padding-top:1rem; display:flex; justify-content:center }
@media (min-width:992px){
  .whatsapp-link.cta-button{
    background:linear-gradient(145deg,#25D366,#128C7E) !important; color:#fff !important;
    box-shadow:0 4px 10px rgba(37,211,102,.3) !important; width:auto !important; min-width:unset !important;
  }
}

/* ---------- Componentes Spot (opcionales) ---------- */
.spot-board{display:flex; justify-content:center; gap:15px; margin:20px 0}
.spot-board .card{width:80px; height:120px; background:#fff; border-radius:8px; display:flex; flex-direction:column; justify-content:space-between; padding:10px; box-shadow:0 3px 10px rgba(0,0,0,.2); position:relative; overflow:hidden}
.spot-board .card::before{content:''; position:absolute; inset:0; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.1"><rect width="100" height="100" fill="none" stroke="black" stroke-width="2"/></svg>') no-repeat; background-size:100% 100%}
.spot-board .card-value{font-size:1.8rem; font-weight:bold; text-align:left}
.spot-board .card-suit{font-size:2.5rem; text-align:center; line-height:1}
.spot-board .card-value.bottom{text-align:right; transform:rotate(180deg)}
.suit-heart,.suit-diamond{color:#e74c3c} .suit-club,.suit-spade{color:#2c3e50}
.spot-table{background:radial-gradient(circle,#2e8b57 0%,#1f5e3a 100%); border-radius:50%; padding:40px; max-width:500px; margin:0 auto 30px; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.3); border:15px solid #8b4513}
.spot-table::before{content:''; position:absolute; top:20px; left:20px; right:20px; bottom:20px; border:2px dashed rgba(255,255,255,.2); border-radius:50%}

/* ---------- Glossary frame ---------- */
.glossary-frame-wrap{
  width:100%;
  height:calc(100vh - var(--headerH) - 140px);
  border:1px solid var(--border-color); border-radius:12px; overflow:hidden;
  background:var(--card-bg); box-shadow:var(--elevation-1);
}
.glossary-frame{ width:100%; height:100%; border:0; }

/* ---------- Open-shove: ancho intrínseco + scroll-x ---------- */
.open-shove-view .osv-grid-wrap{
  overflow-x:auto !important; -webkit-overflow-scrolling:touch !important;
}
.open-shove-view .osv-grid{
  display:grid !important;
  grid-template-columns:repeat(13, var(--cell)) !important;
  grid-auto-rows:var(--cell) !important;
  gap:var(--gap, 2px) !important;
  width:max-content !important; min-width:max-content !important;
  transform:none !important;
}
@media (orientation:portrait){ .open-shove-view{ --cell:34px; } }
@media (max-width:360px){ .open-shove-view{ --cell:32px; } }

/* ---------- No mostrar open-shove fuera de su vista ---------- */
.view:not(#open-shove-view) .open-shove-view,
.view:not(#open-shove-view) .open-shove-root { display:none !important; }

/* ---------- Desktop layout ---------- */
@media (min-width:992px){
  .mobile-only{display:none}
  .desktop-only{display:block}
  #side-menu{ transform:translateX(0) !important; border-right:none; }
  #side-menu.retracted{ width:70px; }
  #side-menu.retracted #side-menu-nav a{ justify-content:center; padding:.9rem .5rem; }
  #side-menu.retracted #side-menu-nav a span,
  #side-menu.retracted .folder-toggle span{ display:none; }
  #main-content{ margin-left:260px !important; padding-top:var(--headerH) !important; }
  #main-content.retracted{ margin-left:70px !important; }
}

/* ---------- Mobile/Tablet ---------- */
@media (max-width:991.98px){
  .main-header{ position:fixed; top:0; left:0; right:0; z-index:1300 !important; background:linear-gradient(135deg,var(--primary),var(--accent)); }
  .mobile-only{ display:inline-flex; align-items:center; justify-content:center; }
  #side-menu{ top:var(--headerH); height:calc(100vh - var(--headerH)); }
  #main-content{ margin-left:0; padding-top:calc(var(--headerH) + 10px) !important; }
}

/* ---------- Help badge (tooltips) ---------- */
.help-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px;
  border-radius:50%; font-size:12px; font-weight:800;
  background:#223142; color:#e6f5ff; cursor:help; user-select:none;
  border:1px solid #2f465c; position:relative;
}
.help-badge[data-tip]:hover::after,
.help-badge[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:100%; transform:translate(-50%, 8px);
  white-space:normal; max-width:280px;
  background:#0d141b; color:#e6f5ff; border:1px solid #2a3b4a;
  padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.25;
  box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:9999; pointer-events:none;
}
.help-badge:focus-visible{ outline:2px solid var(--accent,#1de9b6); outline-offset:2px; }

/* ---------- KILL SWITCH del preloader legacy ---------- */
#preloader, .prelogo-wrap, .prelogo{
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* Router de vistas del dashboard */
#dashboard-layout .view { display: none; }
#dashboard-layout .view.active { display: block; }