:root {
  /* Fondo principal y capas suaves */
  --cream: #f4eee8;    /* El color base de tu nueva imagen */
  --oat: #efe9e2;      /* Un tono ligeramente más oscuro para tarjetas */
  --parch: #f9f7f2;
  
  /* Textos y acentos oscuros */
  --cocoa: #6b5e55;    /* Un marrón más suave y cálido */
  --muted: #a3968a;
  
  /* Colores de marca (Matcha & Sage) */
  --sage: #869a74;     /* Tu verde característico */
  --sageSoft: #cdd6c5; /* Verde muy pálido para elementos secundarios */
  
  /* Detalles */
  --pink: #f4e9e7;
  --liquid: #869a74;   /* El color del líquido ahora es Matcha */

  --espresso: #1e1a17; /* El color exacto de tu imagen */
  --espressoSoft: #2a2420; /* Para tarjetas en modo oscuro */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--cocoa);
  background: var(--cream);
  background-image:
    radial-gradient(900px 600px at 50% 10%, rgba(134,154,116,0.10), transparent 55%),
    radial-gradient(900px 600px at 18% 85%, rgba(244,233,231,0.12), transparent 55%),
    radial-gradient(900px 600px at 82% 75%, rgba(220,235,227,0.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.handwritten{ font-family:"Indie Flower", cursive; }
.hidden{ display:none !important; }
.muted{ opacity:0.6; }
.big{ font-size:1.15rem; }

.blob{
  position:fixed;
  border-radius:999px;
  filter: blur(120px);
  pointer-events:none;
  z-index:-1;
}
.blob-a{ width:40vw; height:40vw; top:-12%; right:-6%; background: rgba(134,154,116,0.08); }
.blob-b{ width:30vw; height:30vw; bottom:-12%; left:-6%; background: rgba(244,233,231,0.14); }

/* Tarjetas principales */
.soft-card {
  background: rgba(255, 255, 255, 0.50); /* Más transparente para que pase el color crema */
  border: 1px solid rgba(255, 255, 255, 0.80);
  border-radius: 32px; /* Redondeado más moderno */
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(107, 94, 85, 0.04); /* Sombra color cocoa muy suave */
}

/* ============ TOPBAR ============ */
/* ============ TOPBAR ============ */
.topbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  
  /* --- THE FIX IS HERE --- */
  position: relative; /* Allows z-index to work */
  z-index: 100;       /* Lifts the whole header (and menu) above the cards */
}
.brand{ display:flex; align-items:center; gap:12px;transition: opacity 0.5s ease; }
.brand-icon{
  width:44px; height:44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.05);
  display:flex; align-items:center; justify-content:center;
}
.brand-icon .material-symbols-outlined{ color:var(--sage); }
.brand-name{ font-weight:800; letter-spacing:-0.02em; }
.brand-tagline{
  font-size:10px;
  opacity:0.45;
  text-transform:uppercase;
  letter-spacing:0.18em;
  margin-top:2px;
}

.nav{ display:flex; gap:10px;
transition: all 0.5s ease; }
.nav-link{
  background: transparent;
  border:none;
  padding:10px 12px;
  font-weight:700;
  font-size:13px;
  opacity:0.55;
  cursor:pointer;
}
.nav-link:hover{ opacity:0.9; }

.top-actions{ display:flex; gap:10px; }
.pill-btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.85);
  cursor:pointer;
  font-weight:600;
}
.pill-btn .material-symbols-outlined{ font-size:18px; opacity:0.7; }
.pill-btn:hover{ filter:brightness(0.98); }
.pill-btn.small{ padding:8px 14px; font-size:12px; }
.pill-btn.pill-dark{
  background: rgba(74,59,52,0.10);
}
.pill-btn.soft-pink{ background: rgba(244,233,231,0.65); }

/* ============ APP WRAP ============ */
.app{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 18px 80px;
}
.screen{ width:100%; }

/* ============ SETUP ============ */
.setup-wrap{
  max-width: 720px;
  margin: 20px auto 0;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.setup-title{ text-align:center; }
.setup-title h1{
  margin: 14px 0 4px;
  font-size: 44px;
  letter-spacing:-0.03em;
}
.setup-title p{
  margin:0;
  font-size: 22px;
  opacity:0.75;
}
.panel{ padding: 22px; }
.panel-inner{
  background: rgba(249,247,242,0.55);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 40px;
  padding: 22px;
}
.block{ padding: 16px; border-radius: 28px; }
.block + .block{ margin-top: 14px; }
.block-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-weight:900;
  opacity:0.55;
  margin-bottom:12px;
}
.block-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.block-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:14px;
  opacity:0.9;
}
.block-title .material-symbols-outlined{ opacity:0.6; }
.hint{ font-size:11px; opacity:0.45; margin-top:8px; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media(max-width:720px){
  .grid2{ grid-template-columns: 1fr; }
}

.grid3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top:12px;
}
@media(max-width:900px){
  .grid3{ grid-template-columns: 1fr; }
}

.drink-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.drink-selected{
  flex:1;
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer; 
  transition: transform 0.1s ease, background 0.2s;
}
.drink-selected:hover{
  background: rgba(255,255,255,0.85);
  transform: translateY(-2px);
}
.drink-emoji{
  width:44px; height:44px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(217,228,209,0.6);
  font-size:22px;
}
.drink-meta{ display:flex; flex-direction:column; gap:2px; }
.drink-name{ font-weight:900; }
.drink-note{ font-size:12px; opacity:0.6; }

input[type="range"]{
  width:100%;
  appearance:none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 12px;
  background: rgba(215,192,174,0.25);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.05);
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:22px; height:22px;
  background: rgba(134,154,116,0.85);
  border: 2px solid #fff;
  border-radius: 12px;
  margin-top:-6px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.goal-row{
  display:flex;
  gap:12px;
  align-items:center;
}
.goal-input{
  position:relative;
  flex:1;
}
.goal-input input{
  width:100%;
  padding: 14px 52px 14px 16px;
  border-radius: 18px;
  border: 2px solid rgba(215,192,174,0.25);
  background: rgba(245,241,233,0.9);
  font-weight:900;
  font-size:18px;
  outline:none;
}
.goal-unit{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  font-size:12px;
  font-weight:800;
  opacity:0.55;
}
.goal-chip{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245,241,233,0.9);
  border: 1px dashed rgba(215,192,174,0.7);
  font-size:12px;
  font-weight:700;
  opacity:0.7;
  white-space:nowrap;
}

.alert{
  margin-top:12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(234,226,217,0.6);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.alert .material-symbols-outlined{ opacity:0.7; }
.alert-title{ font-weight:900; opacity:0.85; font-size:13px; }
.alert-text{ font-size:12px; opacity:0.65; margin-top:2px; }

.toggle-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.toggle-title{ font-weight:900; }
.toggle-sub{ font-size:11px; opacity:0.55; margin-top:2px; }

.switch{
  position:relative;
  display:inline-block;
  width:50px;
  height:28px;
}
.switch input{ display:none; }
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background: rgba(215,192,174,0.35);
  border-radius:999px;
  transition: 0.2s;
}
.slider:before{
  content:"";
  position:absolute;
  height:20px;
  width:20px;
  left:4px;
  top:4px;
  background:#fff;
  border-radius:999px;
  transition: 0.2s;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.switch input:checked + .slider{
  background: rgba(134,154,116,0.50);
}
.switch input:checked + .slider:before{
  transform: translateX(22px);
}

.mini{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.55);
}
.mini-label{
  font-size:11px;
  opacity:0.55;
  font-weight:800;
  margin-bottom:8px;
}
.mini input{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(249,247,242,0.8);
  font-weight:800;
}
.mini-pill{
  padding: 12px;
  border-radius: 16px;
  background: rgba(217,228,209,0.55);
  border: 1px solid rgba(134,154,116,0.25);
  font-weight:900;
  text-align:center;
}

.actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  margin-top: 8px;
}

.btn{
  border:none;
  cursor:pointer;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn-primary{
  width:100%;
  padding: 18px 18px;
  font-size:18px;
  background: rgba(134,154,116,0.35);
  color: rgba(74,59,52,0.55);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* === PRIMARY BUTTON HOVER EFFECT === */
.btn-primary:hover {
  background-color: #869a74; 
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(134, 154, 116, 0.3); 
}
.btn-primary:disabled{
  opacity:0.7;
  cursor:not-allowed;
}
.btn-ghost{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.06);
}
.btn-dark{
  background: rgba(74,59,52,0.92);
  color:#fff;
}
.btn-dark:hover{ filter:brightness(0.98); }

.footerline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  opacity:0.35;
  margin-top: 18px;
}
.footerline span:first-child,
.footerline span:last-child{
  display:block;
  height:1px;
  width:42px;
  background: rgba(74,59,52,0.6);
}
.micro{
  text-align:center;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.2em;
  opacity:0.55;
}

/* ============ TIMER ============ */
.timer-wrap{
  width: min(100%, 980px);
  margin: 26px auto 0;
  padding: 30px;
}
.timer-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 18px;
}
.pill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(245,241,233,0.9);
  border: 1px solid rgba(0,0,0,0.05);
  font-size: 11px;
  font-weight: 900;
  opacity:0.6;
}
.timer-brand{
  font-weight:900;
  opacity:0.6;
  font-size:12px;
}
.timer-spacer{ flex:1; }

.timer-body{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 26px;
  padding: 18px;
  border-radius: 40px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.04);
  margin-top: 12px
}
@media(max-width:900px){
  .timer-body{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .timer-left{ align-items:center; }
}

.timer-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.mode-pill{
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(134,154,116,0.12);
  border: 1px solid rgba(134,154,116,0.25);
  font-size:10px;
  font-weight:900;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--sage);
}
.time{
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 10px 0 10px;
  opacity:0.95;
}
.progress-wrap{ width: 100%; max-width: 420px; margin: 8px 0 14px; }
.progress-track{
  height: 8px;
  background: rgba(74,59,52,0.06);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  background: rgba(134,154,116,0.45);
  border-radius:999px;
  transition: width 0.3s ease;
}
.quote{
  margin-top: 10px;
  font-size: 13px;
  opacity:0.55;
  font-style: italic;
}

.timer-controls{
  display:flex;
  gap: 12px;
  margin-top: 10px;
}
.timer-controls .btn{ padding: 14px 18px; }
.timer-controls .btn-ghost{ padding: 14px 18px; }

.timer-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

.cup-area{ display:flex; justify-content:center; width:100%; }
.cup{
  position:relative;
  width: 176px;
  height: 260px;
  border-left: 2px solid rgba(74,59,52,0.10);
  border-right: 2px solid rgba(74,59,52,0.10);
  border-bottom: 2px solid rgba(74,59,52,0.10);
  border-top: none;
  border-radius: 0 0 44px 44px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
}
.cup-shine{
  position:absolute;
  top: 18px;
  left: 18px;
  width: 6px;
  height: 120px;
  background: rgba(255,255,255,0.35);
  border-radius:999px;
  filter: blur(0.2px);
}
.liquid{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height: 70%;
  background: var(--liquid);
  opacity:0.80;
  transition: height 0.35s ease;
}
.liquid-top{
  position:absolute;
  left:0;
  width:100%;
  height: 14px;
  background: rgba(163,188,134,0.95);
  border-radius: 100%;
  transform: translateY(-6px);
  transition: bottom 0.35s ease;
  bottom: calc(70% - 6px);
}
.upnext{
  width: 240px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.00);
  border: 1px solid rgba(0,0,0,0.00);
  text-align:center;
}
.upnext-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity:0.45;
  font-weight: 900;
}
.upnext-text{
  margin-top: 6px;
  font-weight: 800;
  opacity:0.65;
  font-size: 12px;
}

/* Footer on timer */
.timer-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  margin-top: 22px;
  opacity:0.75;
}
.social-row{ display:flex; gap:10px; }
.social-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration:none;
  color: var(--cocoa);
  opacity:0.55;
}
.social-icon:hover{ opacity:0.95; border-color: rgba(134,154,116,0.35); }

/* ============ STATS ============ */
.stats-wrap{
  max-width: 980px;
  margin: 20px auto 0;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media(max-width:900px){
  .stats-grid{ grid-template-columns: 1fr; }
}

.stat-card{
  padding: 22px;
  text-align:center;
}
.stat-label{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity:0.55;
  font-weight: 900;
}
.stat-value{
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-top: 8px;
}
.stat-sub{ opacity:0.55; font-weight: 700; }

.log-card{ padding: 18px; border-radius: 36px; }
.log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.log-title{ font-weight: 900; font-size: 16px; }
.log-sub{ font-size: 12px; opacity:0.55; margin-top: 2px; }
.log-list{ display:flex; flex-direction:column; gap: 10px; }
.log-item {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 12px;
  
  display: flex;
  justify-content: space-between;
  align-items: center; /* <--- ¡ESTA ES LA CLAVE! Esto baja el icono al centro */
  gap: 10px;
}

/* =========================================
   NUEVO ESTILO PARA EL BOTÓN DELETE
   ========================================= */
.delete-btn {
  /* Layout y Posición */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;       
  height: 32px;      
  border-radius: 50%;
  margin-right: -4px;
  cursor: pointer;
  
  /* Estilo visual */
  font-size: 20px !important; 
  color: var(--cocoa);        
  opacity: 0;                 /* Invisible hasta pasar el mouse */
  transition: all 0.2s ease;
  background-color: transparent;
}

/* Al pasar el mouse sobre la fila, aparece el icono */
.log-item:hover .delete-btn {
  opacity: 0.4;
}

/* Al pasar el mouse sobre el botón mismo -> Rojo suave */
.delete-btn:hover {
  opacity: 1 !important;
  background-color: #ffe5e5; 
  color: #d15c5c;
}

/* --- MODO OSCURO --- */
body.dark .delete-btn {
  color: #fff;
}
body.dark .delete-btn:hover {
  background-color: rgba(255,255,255,0.15);
  color: #fff;
}
.log-item b{ font-weight: 900; }
.log-item span{ opacity:0.6; font-size: 12px; }

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 999;
}
.modal{
  width: min(920px, 96vw);
  max-height: 80vh;
  overflow:hidden;
  border-radius: 28px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 16px 16px 10px;
}
.modal-title{ font-weight: 900; font-size: 16px; }
.modal-sub{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity:0.55;
  margin-top: 4px;
}
.icon-btn{
  border:none;
  background: transparent;
  cursor:pointer;
  font-size: 18px;
  opacity:0.6;
}
.icon-btn:hover{ opacity:0.95; }

.modal-search{ padding: 0 16px 12px; }
.modal-search input{
  width:100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(245,241,233,0.9);
  font-weight: 800;
  outline:none;
}

.drink-grid{
  padding: 0 16px 16px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media(max-width:900px){ .drink-grid{ grid-template-columns: repeat(3,1fr); } }
@media(max-width:640px){ .drink-grid{ grid-template-columns: repeat(2,1fr); } }

.drink-card{
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.05);
  cursor:pointer;
  text-align:left;
  transition: transform 0.08s ease;
}
.drink-card:hover{ transform: translateY(-1px); }
.drink-card .emoji{
  width:42px; height:42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(217,228,209,0.6);
  margin-bottom: 10px;
  font-size: 20px;
}
.drink-card .name{ font-weight: 900; }
.drink-card .note{ font-size: 11px; opacity:0.55; margin-top: 3px; }

/* Theme button styling */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(74,59,52,0.10);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  font-weight: 700;
  color: rgba(74,59,52,0.85);
}
.btn:hover{ background: rgba(255,255,255,0.75); }
.btn.ghost{ background: rgba(255,255,255,0.45); }

.material-symbols-outlined{
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  line-height: 1;
}

.select-aesthetic{
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(74,59,52,0.10);
  background: rgba(255,255,255,0.55);
  color: rgba(74,59,52,0.85);
  font-weight: 700;
  outline: none;
  box-shadow: 0 10px 25px -18px rgba(74,59,52,0.25);
}
.select-aesthetic:focus{
  border-color: rgba(134,154,116,0.55);
  box-shadow: 0 0 0 4px rgba(134,154,116,0.15);
}
.slider-aesthetic{ width: 100%; }

/* Timer mini controls */
.noise-mini{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(74,59,52,0.10);
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  margin-top: 14px;
}
.noise-mini-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(74,59,52,0.10);
  background: rgba(249,247,242,0.70);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.noise-mini-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width: 110px;
}
.noise-mini-title{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 800;
}
.noise-mini-sub{
  font-size: 12px;
  opacity: 0.75;
  font-weight: 700;
}
.noise-mini-slider{ width: 140px; }

/* =========================
   TIMER SOUND BAR (Aesthetic)
========================= */

.soundbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  margin: 14px 0 18px;
  border-radius: 22px;
}
.sound-pill{
  width:44px;
  height:44px;
  border-radius: 9999px;
  border: 1px solid rgba(74,59,52,0.08);
  background: rgba(255,255,255,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(74,59,52,0.06);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.sound-pill:hover{ transform: translateY(-1px); }
.sound-pill:active{ transform: translateY(0px); }
.sound-pill .material-symbols-outlined{
  font-variation-settings: "FILL" 1, "wght" 600;
  opacity: .75;
}

.sound-meta{ min-width: 120px; line-height: 1.05; }
.sound-title{
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .55;
}
.sound-sub{
  font-weight: 800;
  font-size: 14px;
  opacity: .9;
  margin-top: 4px;
}

.sound-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}

.sound-select{
  height: 40px;
  border-radius: 9999px;
  padding: 0 14px;
  border: 1px solid rgba(74,59,52,0.08);
  background: rgba(249,247,242,0.8);
  color: rgba(74,59,52,0.85);
  font-weight: 700;
  font-size: 13px;
  outline: none;
  min-width: 130px;
}

.sound-slider{
  flex:1;
  padding: 10px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(74,59,52,0.08);
  background: rgba(249,247,242,0.55);
}

.sound-slider input[type="range"]{
  width: 100%;
  appearance: none;
  height: 10px;
  border-radius: 9999px;
  background: rgba(74,59,52,0.08);
  outline: none;
}
.sound-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: rgba(134,154,116,0.95);
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 20px rgba(74,59,52,0.10);
  cursor: pointer;
}

/* ===== Aesthetic Select ===== */
.sound-select-wrap{
  position: relative;
  display: inline-block;
  min-width: 190px;
}
.sound-select{
  width: 100%;
  height: 52px;
  border-radius: 999px;
  padding: 0 44px 0 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(74,59,52,0.08);
  box-shadow: 0 10px 30px rgba(74,59,52,0.04);
  font-weight: 700;
  color: rgba(74,59,52,0.75);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.sound-select:focus{
  border-color: rgba(134,154,116,0.45);
  box-shadow: 0 0 0 4px rgba(134,154,116,0.12), 0 10px 30px rgba(74,59,52,0.04);
}
.sound-select-wrap::after{
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(74,59,52,0.40);
  pointer-events: none;
  font-size: 22px;
}
#bgApplyBtn{ white-space: nowrap; }

/* === FIX: Align Focus & Break Sliders === */
.grid2 .block {
  margin-top: 0 !important;
  height: 100%;
}

/* Make the logo look clickable */
.brand {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.brand:hover { opacity: 0.7; }

/* === SOFT MODAL STYLES === */
.modal-soft {
  background: #fffbf7;
  border-radius: 32px;
  padding: 32px 24px;
  box-shadow: 0 20px 40px rgba(74, 59, 52, 0.15);
  text-align: center;
  max-width: 300px;
  width: 90%;
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
  from { transform: scale(0.9) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-icon-circle {
  width: 60px;
  height: 60px;
  background: #fdeded;
  color: #d15c5c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.btn-danger-soft {
  background: #fdeded;
  color: #d15c5c;
  border-radius: 99px;
  padding: 10px 24px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-danger-soft:hover {
  background: #fcdbdb;
  transform: translateY(-1px);
}

/* === SOFT MODAL (Cozy Aesthetic) === */
.modal-soft {
  background: #fffbf7;
  border-radius: 32px;
  padding: 36px 28px;
  box-shadow: 0 20px 40px rgba(74, 59, 52, 0.12);
  text-align: center;
  max-width: 320px;
  width: 90%;
  border: 1px solid rgba(0,0,0,0.03);
  animation: popUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popUp {
  from { transform: scale(0.9) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-icon-circle {
  width: 64px;
  height: 64px;
  background: #fdf2f2;
  color: #d66d6d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #4a3b32;
  margin-bottom: 8px;
}
.modal-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: #8c7e74;
  margin-bottom: 28px;
  line-height: 1.5;
}
.btn-danger-soft {
  background: #fdf2f2;
  color: #d66d6d;
  border-radius: 99px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-danger-soft:hover {
  background: #fcdcdc;
  transform: translateY(-1px);
}

/* === UPGRADED MAIN MODAL (Drinks & Sounds) === */
.modal {
  background: #fffbf7;
  border-radius: 32px;
  padding: 32px;
  width: 90%;
  max-width: 480px;
  position: relative;
  box-shadow: 0 20px 40px rgba(74, 59, 52, 0.12);
  border: 1px solid rgba(0,0,0,0.03);
  animation: popUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popUp {
  from { transform: scale(0.95) translateY(15px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* === MODAL HEADER === */
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #4a3b32;
}

/* === SOFT CLOSE BUTTON === */
.icon-btn {
  background: rgba(74, 59, 52, 0.05);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: #8c7e74;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.icon-btn:hover {
  background: rgba(74, 59, 52, 0.1);
  transform: rotate(90deg);
  color: #4a3b32;
}

/* === FIXED WIDE MODAL (For Drinks & Sounds) === */
.modal {
  background: #fffbf7;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(74, 59, 52, 0.12);
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
  width: 90%;
  max-width: 900px;
  animation: popUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ensure the grid inside spreads out */
.drink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

/* Re-paste the header styles just to be safe */
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #4a3b32;
}
.icon-btn {
  background: rgba(74, 59, 52, 0.05);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: #8c7e74;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.icon-btn:hover {
  background: rgba(74, 59, 52, 0.1);
  transform: rotate(90deg);
  color: #4a3b32;
}

/* === NEW STAT UNIT TEXT === */
.stat-unit {
  font-size: 12px;
  color: #8c7e74;
  font-weight: 600;
  opacity: 0.5;
  margin-top: 2px;
  text-transform: lowercase;
}

/* === CUSTOM VERTICAL SPINNER (The Aesthetic Fix) === */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] { -moz-appearance: textfield; }

.number-input-wrap {
  position: relative;
  width: 100%;
  max-width: 140px;
}
.styled-num-input {
  width: 100%;
  background: #fdfbf7;
  border: 1px solid rgba(74, 59, 52, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  padding-right: 30px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #4a3b32;
  outline: none;
  transition: all 0.2s ease;
}
.styled-num-input:focus {
  border-color: #d4c5b5;
  background: #fff;
  box-shadow: 0 4px 12px rgba(74, 59, 52, 0.05);
}
.spinner-btns {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spin-btn {
  flex: 1;
  border: none;
  background: rgba(74, 59, 52, 0.03);
  border-radius: 4px;
  cursor: pointer;
  color: #8c7e74;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  padding: 0;
}
.spin-btn:hover {
  background: #ebe6df;
  color: #4a3b32;
}
.spin-btn:active { background: #d4c5b5; }
.spin-icon { font-size: 16px !important; font-weight: 700; }

/* === CUSTOM ARROWS (Minimal & Clean) === */
.goal-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.goal-input-wrapper input {
  width: 100%;
  padding-right: 50px;
}
.input-unit-label {
  position: absolute;
  right: 40px;
  font-size: 14px;
  color: #8c7e74;
  font-weight: 600;
  opacity: 0.6;
  pointer-events: none;
}
.custom-arrow-stack {
  position: absolute;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.arrow-btn {
  background: transparent;
  border: none;
  color: #8c7e74;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.2s ease;
}
.arrow-btn:hover {
  opacity: 1;
  color: #4a3b32;
  transform: scale(1.2);
}
.arrow-icon { font-size: 20px !important; font-weight: 700; }

/* === DISABLED BUTTON STATE === */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background-color: #4a3b32 !important;
}

/* === SMOOTH TOGGLE DRAWER === */
.toggle-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.toggle-drawer.open {
  max-height: 150px;
  opacity: 1;
  margin-top: 16px;
}

/* =========================================
   VISUAL POLISH (LIGHT)
   ========================================= */
button:disabled, 
.btn-primary:disabled {
  background-color: #4a3b32 !important;
  color: #ffffff !important;
  opacity: 0.3 !important;
  cursor: not-allowed;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   DARK MODE — CLEAN FINAL (ONLY body.dark)
   This replaces ALL your old dark blocks.
========================================================= */

/* =========================================
   FIXED: SMOOTH DARK BACKGROUND (No Breaks)
   ========================================= */
body.dark {
  background-color: var(--espresso) !important; /* Aplicando tu color */
  color: #e3dcd6; /* Texto crema suave para que no canse la vista */
  /* 1. Use 'fixed' so the gradient never scrolls or cuts off */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  /* 2. Smoother Gradients (Fading to specific colors, not just 'transparent') */
  background-image:
    /* Top Center Green Glow */
    radial-gradient(
      circle at 50% 0%, 
      rgba(134, 154, 116, 0.15) 0%, 
      rgba(134, 154, 116, 0) 60%
    ),
    /* Bottom Left Warm Glow */
    radial-gradient(
      circle at 10% 90%, 
      rgba(193, 140, 126, 0.12) 0%, 
      rgba(193, 140, 126, 0) 50%
    ),
    /* Bottom Right Subtle Cool Glow */
    radial-gradient(
      circle at 90% 80%, 
      rgba(220, 235, 227, 0.08) 0%, 
      rgba(220, 235, 227, 0) 50%
    ),
    /* The Base Vignette (Darkens edges) */
    radial-gradient(
      circle at 50% 50%, 
      rgba(15, 18, 19, 0) 40%, 
      rgba(0, 0, 0, 0.6) 100%
    );
}
/* subtle grain */
body.dark::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  background:
    url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.28;
}

/* blobs */
body.dark .blob{ filter: blur(150px); opacity:0.55; }
body.dark .blob-a{ background: rgba(134,154,116,0.18); }
body.dark .blob-b{ background: rgba(193,140,126,0.16); }

/* topbar */
body.dark .brand-name{ color: rgba(245,238,232,0.95); }
body.dark .brand-tagline{ opacity:0.65; color: rgba(245,238,232,0.62); }
body.dark .brand-icon{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
body.dark .brand-icon .material-symbols-outlined{
  color: rgba(134,154,116,0.95);
}
body.dark .nav-link{ opacity:1; color: rgba(245,238,232,0.72); }
body.dark .nav-link:hover{ color: rgba(245,238,232,0.95); }

/* glass cards */
body.dark .soft-card{
  background: rgba(255,255,255,0.0);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.dark .panel-inner,
body.dark .timer-body{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* small surfaces */
body.dark .drink-selected,
body.dark .pill,
body.dark .goal-chip,
body.dark .mini,
body.dark .alert,
body.dark .log-item,
body.dark .drink-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}


/* text */
body.dark h1, body.dark h2, body.dark h3{ color: rgba(245,238,232,0.96); }
body.dark .handwritten{ color: rgba(245,238,232,0.78); }
body.dark .hint,
body.dark .toggle-sub,
body.dark .drink-note,
body.dark .log-sub,
body.dark .stat-unit{
  color: rgba(245,238,232,0.62);
}

/* buttons */
body.dark .btn,
body.dark .pill-btn{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,238,232,0.90);
}
body.dark .btn:hover,
body.dark .pill-btn:hover{
  background: rgba(255,255,255,0.11);
}

/* primary buttons */
body.dark .btn-primary,
body.dark .btn-dark{
  background: rgba(134,154,116,0.88);
  color: rgba(10,12,12,0.85);
  border: none;
}
body.dark .btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-2px);
}
body.dark .btn-primary:disabled{
  background-color: rgba(134,154,116,0.88) !important;
  color: rgba(10,12,12,0.85) !important;
  opacity: 0.30 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* inputs */
body.dark input,
body.dark textarea,
body.dark .goal-input input,
body.dark .modal-search input{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,238,232,0.92);
}
body.dark input::placeholder{ color: rgba(245,238,232,0.45); }

/* slider */
body.dark input[type="range"]::-webkit-slider-runnable-track{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}
body.dark input[type="range"]::-webkit-slider-thumb{
  background: rgba(134,154,116,0.95);
  border: 2px solid rgba(0,0,0,0.25);
  box-shadow: 0 10px 24px rgba(0,0,0,0.40);
}

/* progress */
body.dark .progress-track{ background: rgba(255,255,255,0.12); }
body.dark .progress-fill{ background: rgba(134,154,116,0.60); }

/* pills */
body.dark .mode-pill{
  background: rgba(134,154,116,0.10);
  border: 1px solid rgba(134,154,116,0.25);
  color: rgba(134,154,116,0.95);
}

/* sessionPill fix (you had .dark #sessionPill mixed before) */
body.dark #sessionPill{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* modal in dark mode */
body.dark .modal,
body.dark .modal-soft{
  background: rgba(20,20,20,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(245,238,232,0.92) !important;
}
body.dark .modal-title{ color: rgba(245,238,232,0.96) !important; }
body.dark .modal-text{ color: rgba(245,238,232,0.70) !important; }
body.dark .icon-btn{ color: rgba(245,238,232,0.70) !important; }
body.dark .icon-btn:hover{ color: rgba(245,238,232,0.95) !important; }

/* soundbar in dark mode */
body.dark .sound-pill,
body.dark .sound-select,
body.dark .sound-slider{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(245,238,232,0.90) !important;
}
body.dark .sound-slider input[type="range"]{ background: rgba(255,255,255,0.12) !important; }
body.dark .sound-select-wrap::after{ color: rgba(245,238,232,0.45) !important; }


/* =========================================
   NEW "FILLED" SLIDER (Warmup Concept)
   ========================================= */

/* 1. Base Style (Light Mode) */
.filled-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  margin-top: 5px;
  border: none;
  
  /* THE MAGIC: Gradient changes based on a CSS variable */
  background: linear-gradient(
    to right, 
    #869a74 0%, 
    #869a74 var(--percent, 33%), 
    rgba(215,192,174,0.35) var(--percent, 33%), 
    rgba(215,192,174,0.35) 100%
  );
}

/* 2. Hide the default browser track so our gradient shows */
.filled-slider::-webkit-slider-runnable-track {
  background: transparent; 
  height: 12px;
  border: none;
}

/* 3. The Thumb (Circle) */
/* 1. LIGHT MODE THUMB */
.filled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #869a74;
  border: none;
  box-shadow: 0 2px 6px rgba(134,154,116,0.4);
  
  /* THE FIX: Remove transform, use exact margin math */
  margin-top: -6px; 
  transition: transform 0.1s ease;
}

/* =========================================
   DARK MODE OVERRIDES for Filled Slider
   ========================================= */
body.dark .filled-slider {
  background: linear-gradient(
    to right, 
    #869a74 0%, 
    #869a74 var(--percent, 33%), 
    rgba(255,255,255,0.15) var(--percent, 33%), 
    rgba(255,255,255,0.15) 100%
  );
}

/* 2. DARK MODE THUMB */
body.dark .filled-slider::-webkit-slider-thumb {
  border: none;
  background: #869a74;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  
  /* THE FIX: Keep the margin consistent */
  margin-top: -6px; 
}

/* =========================================
   FIX: TOTAL SESSION GOAL -> FORCE LIGHT STYLE
   (High Contrast Look)
   ========================================= */

/* 1. Force the Input Background to be Light Cream (Matches "Goal" Photo) */
body.dark #totalMinutes {
  background: #fdfbf7 !important; /* Light Cream */
  color: #4a3b32 !important;       /* Dark Brown Text */
  border: 2px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
}

/* 2. Make the "minutes" label Dark so it shows up on the white bg */
body.dark .input-unit-label {
  color: rgba(74, 59, 52, 0.6) !important; /* Muted Brown */
}

/* 3. Make the Arrows Dark so they are visible */
body.dark .arrow-btn {
  color: rgba(74, 59, 52, 0.4) !important;
}
body.dark .arrow-btn:hover {
  color: #4a3b32 !important; /* Dark Brown on hover */
}

/* =========================================
   FIX: "CHECK MEASUREMENTS" CARD (Sage Style)
   ========================================= */

/* 1. The Card Container -> Green Tint */
body.dark .alert {
  background: rgba(134, 154, 116, 0.1) !important; /* Very subtle green bg */
  border: 1px solid rgba(134, 154, 116, 0.25) !important; /* Green border */
}

/* 2. The Icon & Title -> Bright Sage Green */
body.dark .alert .material-symbols-outlined,
body.dark .alert-title {
  color: #869a74 !important; /* The Sage Green color */
  opacity: 1 !important;
}

/* 3. The Body Text -> Soft Grey-Green */
body.dark .alert-text {
  color: #cdd6c5 !important; /* Light text with a hint of green */
  opacity: 0.8 !important;
}

/* =========================================
   FIX: RECENT RITUALS (Final Structure)
   ========================================= */

/* 1. The Container: Flexbox Layout + Dark Glass */
body.dark #sessionList .log-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  
  background: rgba(255, 255, 255, 0.05) !important; /* Dark Glass */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* 2. Text Colors */
body.dark #sessionList .log-item b {
  color: #ffffff !important; /* Drink Name White */
}

body.dark #sessionList .log-item span {
  color: #888888 !important; /* Date Grey */
}

/* 3. The Time Highlight (Sage Green) */
body.dark #sessionList .log-item .time-highlight {
  color: #869a74 !important; /* Sage Green */
  font-weight: 800 !important;
  font-size: 15px !important;
}

/* 4. The Delete Button */
body.dark #sessionList .log-item .delete-btn {
  color: #d66d6d !important; /* Muted Red */
  opacity: 0.5 !important;
  cursor: pointer;
  font-size: 18px !important;
}

body.dark #sessionList .log-item .delete-btn:hover {
  opacity: 1 !important;
}

/* =========================================
   FIX: LIGHT MODE SLIDERS (Visible Track)
   ========================================= */
/* This ensures the empty part of the line is visible in Light Mode */
.filled-slider {
  background: linear-gradient(
    to right, 
    #869a74 0%, 
    #869a74 var(--percent, 50%), 
    rgba(74, 59, 52, 0.15) var(--percent, 50%), /* Darker grey for visibility */
    rgba(74, 59, 52, 0.15) 100%
  ) !important;
}

/* Dark mode override */
body.dark .filled-slider {
  background: linear-gradient(
    to right, 
    #869a74 0%, 
    #869a74 var(--percent, 50%), 
    rgba(255, 255, 255, 0.15) var(--percent, 50%), 
    rgba(255, 255, 255, 0.15) 100%
  ) !important;
}

/* =========================================
   FIX: NEW VOLUME BAR LAYOUT
   ========================================= */
.soundbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

/* Ensure the selector looks good in Dark Mode */
body.dark .sound-select-wrap {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* Ensure the slider container has no background so the liquid slider shows */
.sound-slider {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* =========================================
   FIX: MODAL AESTHETICS (Light & Dark)
   ========================================= */
/* Light Mode Modal - Clean & Crisp */
.modal {
  background: #fffbf7 !important;
  border: 1px solid rgba(74, 59, 52, 0.08) !important;
  box-shadow: 0 20px 60px rgba(74, 59, 52, 0.15) !important;
}

/* Dark Mode Modal - Deep & Glassy (Matches your image) */
body.dark .modal {
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Grid Items in Modal */
.drink-card {
  transition: transform 0.2s ease, background 0.2s ease;
}
body.dark .drink-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
}
body.dark .drink-card:hover {
  background: rgba(255, 255, 255, 0.1);
}
body.dark .drink-card .note {
  color: rgba(255, 255, 255, 0.5);
}

/* =========================================
   FIX: VOLUME BAR LAYOUT (Clean & Grouped)
   ========================================= */
.soundbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 20px !important;
}

/* The Left Group Container */
.sound-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The Selector Pill Style */
.sound-select-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}
/* Dark Mode specific style for the pill */
body.dark .sound-select-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sound-select-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.75);
}
body.dark .sound-select-pill:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* The Slider Container */
.sound-slider-container {
  flex: 1; /* This makes it take up all remaining space */
  display: flex;
  align-items: center;
}

/* =========================================
   FINAL FIXES: DARK INPUT & SOUND BAR
   ========================================= */

/* 1. TOTAL GOAL: Revert to "Dark Glass" (Transparent) */
body.dark #totalMinutes {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
/* Make the label and arrows visible but subtle */
body.dark .input-unit-label { color: rgba(255, 255, 255, 0.4) !important; }
body.dark .arrow-btn { color: rgba(255, 255, 255, 0.4) !important; }
body.dark .arrow-btn:hover { color: #ffffff !important; }


/* 2. SOUND BAR: Enhanced "Grouped" Look */
/* This makes the "Silence/Sound" pill clearly visible next to the mute button */
.sound-select-pill {
  background: rgba(74, 59, 52, 0.08); /* Light mode background */
  padding: 8px 16px;
  border-radius: 99px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

/* Dark Mode Pill - Lighter grey to pop against the dark card */
body.dark .sound-select-pill {
  background: rgba(255, 255, 255, 0.15) !important; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.dark .sound-select-pill:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Ensure the layout is tight */
.sound-controls-left {
  gap: 12px; /* Space between Mute Circle and Sound Pill */
}

/* =========================================
   FINAL SAFETY: VOLUME BAR LAYOUT
   ========================================= */

/* 1. Ensure the Container stretches */
.sound-slider-container {
  flex: 1; /* Takes up all remaining space */
  display: flex;
  align-items: center;
  padding-left: 12px; /* Breathing room from the buttons */
}

/* 2. Ensure the Slider itself fills that space */
.sound-slider-container input {
  width: 100%; /* Full width of its container */
  margin: 0;
}

/* 3. OPTIONAL: Make the track slightly thicker for easier grabbing */
#bgVolume::-webkit-slider-runnable-track {
  height: 8px; /* Slightly slimmer than the main time sliders for elegance */
}

/* =========================================
   FINAL SOUND BAR (Layout: Mute - Slider - Select)
   ========================================= */
.soundbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
}

/* 1. Mute Button (Base Style) */
.sound-pill {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(74, 59, 52, 0.08);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.2s;
}
/* Dark Mode Mute */
body.dark .sound-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.dark .sound-pill:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 2. Slider Container */
.sound-slider-container {
  display: flex;
  align-items: center;
  height: 100%;
}
/* Make the slider width 100% of its container */
.sound-slider-container input {
  width: 100%;
}

/* 3. Selector Pill (Right Side) */
.sound-select-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap; /* Prevents text from wrapping */
}
/* Dark Mode Selector */
body.dark .sound-select-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.dark .sound-select-pill:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* =========================================
   FINAL POLISH: DARK INPUT & SLEEK SLIDER
   ========================================= */

/* 1. TOTAL GOAL: Force Dark Glass (Transparent) */
body.dark #totalMinutes {
  background: rgba(255, 255, 255, 0.05) !important; /* Dark Glass */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important; /* White Text */
}
/* Mute the label and arrows */
body.dark .input-unit-label { color: rgba(255, 255, 255, 0.4) !important; }
body.dark .arrow-btn { color: rgba(255, 255, 255, 0.4) !important; }
body.dark .arrow-btn:hover { color: #ffffff !important; }

/* 2. SLEEKER SLIDER TRACK (Thinner line for elegance) */
/* This targets the grey/green track behind the knob */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px !important; /* Thinner track (was 12px) */
  border-radius: 99px;
}
/* Adjust the knob position since the track is thinner */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -9px !important; /* Centers the knob on the thinner track */
}

/* Ensure the gradient background fills the thinner track correctly */
.filled-slider::-webkit-slider-runnable-track {
  height: 6px !important;
}

/* =========================================
   FINAL FIX: TRANSPARENT & SEPARATED SOUNDBAR
   ========================================= */

/* 1. Remove the "Card" background and borders */
.soundbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important; /* Minimal padding */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. Style the Left Group (Mute + Slider) */
.sound-controls-left {
  display: flex;
  align-items: center;
  gap: 16px; /* Space between Mute Button and Slider */
}

/* 3. Make the Mute Button a clean circle */
.sound-pill {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(74, 59, 52, 0.08);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Ensure no margin pushing it around */
  margin: 0 !important; 
}
body.dark .sound-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 4. Make the Slider Compact */
.sound-slider-container {
  width: 120px !important;       /* Fixed short width */
  flex: 0 0 120px !important;    /* Don't grow */
  margin: 0 !important;          /* Remove auto margins */
}

/* 5. Style the Right Selector (Floating Pill) */
.sound-select-pill {
  background: rgba(255, 255, 255, 0.65); /* Light mode pill */
  border: 1px solid rgba(74, 59, 52, 0.05);
  border-radius: 99px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
body.dark .sound-select-pill {
  background: rgba(255, 255, 255, 0.1); /* Dark mode pill */
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* =========================================
   TIMER TRANSITION ANIMATION
   ========================================= */
@keyframes popInQuick {
  0% { transform: scale(0.92) translateY(5px); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

.pop-anim {
  animation: popInQuick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================
   AESTHETIC LOADING SCREEN (2024 Version)
   ========================================= */
#screen-loading {
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* The Animation Wrapper */
.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* The Glass "Coaster" Circle */
.loading-glass {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4); /* Light mode glass */
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(74, 59, 52, 0.08);
  backdrop-filter: blur(10px);
}

/* Dark Mode Glass */
body.dark .loading-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* The Icon itself */
.loading-icon {
  font-size: 42px;
  animation: floatIcon 3s ease-in-out infinite;
}

/* The Modern Text */
.loading-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em; /* The key to the aesthetic look */
  text-transform: uppercase;
  color: rgba(74, 59, 52, 0.5);
}
body.dark .loading-text {
  color: rgba(255, 255, 255, 0.4);
}

/* Animations */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}


/* =========================================
   NAVBAR ANIMATIONS (Enter/Exit)
   ========================================= */
/* 1. Add transition to the existing topbar */
.topbar {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
  transform: translateY(0);
  opacity: 1;
}

/* 2. The "Hidden" State (Floats up and vanishes) */
.nav-exit {
  transform: translateY(-100%); /* Moves completely out of view */
  opacity: 0;
  pointer-events: none; /* Prevents clicking while invisible */
}

/* =========================================
   USER DROPDOWN MENU
   ========================================= */
.dropdown-menu {
  position: absolute;
  top: 120%; /* Pushes it just below the button */
  right: 0;
  width: 220px;
  background: var(--cream);
  border: 1px solid rgba(74, 59, 52, 0.1);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(74, 59, 52, 0.15);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  
  /* Animation Magic */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none; /* Cannot click when hidden */
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1000;
}

/* When the menu is open */
.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Dark Mode Fixes */
body.dark .dropdown-menu {
  background: #1a1d1e;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* The Menu Items */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--cocoa);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.dropdown-item:hover {
  background: rgba(74, 59, 52, 0.06);
}
body.dark .dropdown-item { color: rgba(255, 255, 255, 0.9); }
body.dark .dropdown-item:hover { background: rgba(255, 255, 255, 0.1); }

/* Icons in the menu */
.dropdown-item .material-symbols-outlined {
  font-size: 18px;
  opacity: 0.6;
}

/* The Divider Line */
.dropdown-divider {
  height: 1px;
  background: rgba(74, 59, 52, 0.1);
  margin: 4px 8px;
}
body.dark .dropdown-divider { background: rgba(255, 255, 255, 0.1); }

/* The "Sign Out" Red Text */
.dropdown-item.danger { color: #d15c5c; }
.dropdown-item.danger:hover { background: rgba(209, 92, 92, 0.08); }
body.dark .dropdown-item.danger { color: #ff8a8a; }

/* Fix input inside soft modals */
.modal-soft input {
  background: #fff;
  border: 1px solid rgba(74, 59, 52, 0.1);
  box-shadow: 0 4px 12px rgba(74, 59, 52, 0.03);
}
.modal-soft input:focus {
  border-color: #869a74;
  box-shadow: 0 4px 12px rgba(134, 154, 116, 0.15);
}
body.dark .modal-soft input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}

/* =========================================
   FIX: MODAL BUTTONS (Cozy Polish)
   ========================================= */
.modal-soft .btn {
  border-radius: 99px !important; /* Force pill shape */
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em !important;
  flex: 1; /* Make buttons even width */
}

/* Primary Button (Save/Send) */
.modal-soft .btn-primary {
  background: #869a74 !important;
  color: #ffffff !important; /* White text pops better */
  box-shadow: 0 4px 12px rgba(134, 154, 116, 0.4) !important;
  border: none !important;
}
.modal-soft .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Ghost Button (Cancel) */
.modal-soft .btn-ghost {
  border: 1px solid rgba(74, 59, 52, 0.1) !important;
  color: rgba(74, 59, 52, 0.6) !important;
}
.modal-soft .btn-ghost:hover {
  background: rgba(74, 59, 52, 0.05) !important;
  color: rgba(74, 59, 52, 0.9) !important;
}

/* Dark Mode Adjustments */
body.dark .modal-soft .btn-primary {
  background: #869a74 !important;
  color: #1a1d1e !important; /* Dark text on bright sage button */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
body.dark .modal-soft .btn-ghost {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
body.dark .modal-soft .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  padding-right: 45px; /* Leave space for the icon */
}

.toggle-password {
  position: absolute;
  right: 14px;
  cursor: pointer;
  opacity: 0.5;
  user-select: none;
  font-size: 20px !important;
  transition: opacity 0.2s;
}

.toggle-password:hover {
  opacity: 0.9;
}

/* Aesthetic OR Divider */
.auth-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;          /* Más aire arriba y abajo */
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(74, 59, 52, 0.5); /* Color Cocoa suave */
  width: 100%;
}

/* Las Líneas a los lados */
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;                 /* Ocupa el espacio restante */
  height: 1px;
  background: currentColor;
  opacity: 0.2;            /* Línea muy sutil */
}

.auth-divider::before { margin-right: 16px; }
.auth-divider::after  { margin-left: 16px; }

/* Ajuste para Modo Oscuro */
body.dark .auth-divider {
  color: rgba(255, 255, 255, 0.4);
}

/* --- ESTILOS DEL SWITCH (Login / Create) --- */

/* 1. El Texto "New Here?" o "Already have..." */
#authSwitchText {
  color: var(--cocoa);
  opacity: 0.7;
  transition: color 0.3s ease;
}

/* 2. El Botón "Log In" o "Create Account" */
#btnToggleAuth {
  background: none;
  border: none;
  cursor: pointer;
  
  /* Tipografía */
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  text-decoration: underline;
  
  /* Color por defecto (Modo Claro) */
  color: var(--cocoa);
  opacity: 1;
  transition: color 0.3s ease;
}

/* --- MODO OSCURO (Dark Mode) --- */

/* Cuando activas el modo oscuro, cambiamos los colores a Crema */
body.dark #authSwitchText {
  color: rgba(227, 220, 214, 0.6); /* Crema suave */
}

body.dark #btnToggleAuth {
  color: #e3dcd6;       /* Crema brillante */
  text-decoration-color: rgba(227, 220, 214, 0.4);
}

body.dark #btnToggleAuth:hover {
  color: #ffffff;       /* Blanco al pasar el mouse */
}

/* --- ALINEACIÓN PERFECTA (GRID STACK) --- */

.cup-wrapper {
  /* 1. Creamos una rejilla de una sola celda */
  display: grid;
  grid-template-areas: "stack"; 
  
  width: 280px; /* Tu tamaño ideal */
  margin: 0 auto;
}

/* 2. El Vaso Vacío */
.cup-bg {
  grid-area: stack; /* Mándalo a la celda "stack" */
  width: 100%;
  display: block;   /* Elimina espacios fantasma */
  z-index: 1; 
}

/* 3. El Contenedor del Líquido */
.cup-liquid-container {
  grid-area: stack; /* Mándalo A LA MISMA celda exacta */
  z-index: 2;
  
  /* Esto asegura que ocupe el mismo espacio que el vaso vacío */
  width: 100%;
  height: 100%; 
  
  /* La magia de la animación */
  transition: clip-path 0.5s ease-in-out;
}

/* 4. La Imagen del Líquido */
.cup-liquid-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================
   FOCUS MODE (Hide Nav while working)
   ========================================= */
body.focus-mode .nav {
  opacity: 0;
  pointer-events: none; /* Para que no se pueda clickear lo invisible */
  transform: translateY(-10px);
  transition: all 0.5s ease;
}

/* Opcional: También atenuar el logo para menos distracción */

/* =========================================
   SHOP PROMO CARD (Aesthetic) 🛍️
   ========================================= */
.shop-promo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px; /* Separación del timer */
  padding: 16px 20px;
  border-radius: 24px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  
  /* Glassy Style (Light Mode) */
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(74, 59, 52, 0.06);
  box-shadow: 0 4px 20px rgba(74, 59, 52, 0.03);
}

.shop-promo:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 30px rgba(74, 59, 52, 0.08);
  border-color: rgba(134, 154, 116, 0.3); /* Un toque sutil de verde Sage */
}

/* El Icono de la bolsa */
.shop-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(245, 241, 233, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cocoa);
  font-size: 24px;
  transition: transform 0.3s ease;
}

.shop-promo:hover .shop-icon-box {
  background: #e9f5e9; /* Verde muy suave al pasar el mouse */
  color: #6ba86b;
  transform: rotate(-5deg); /* Pequeña animación divertida */
}

/* Textos */
.shop-info { flex: 1; }

.shop-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--cocoa);
  letter-spacing: -0.01em;
}

.shop-sub {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
  font-weight: 600;
}

/* La flechita */
.shop-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  transition: all 0.3s ease;
  color: var(--cocoa);
}

.shop-promo:hover .shop-arrow {
  opacity: 1;
  background: rgba(74, 59, 52, 0.05);
  transform: translateX(4px);
}

/* --- MODO OSCURO (Dark Mode) --- */
body.dark .shop-promo {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
body.dark .shop-promo:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
body.dark .shop-icon-box {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.dark .shop-title { color: #fff; }
body.dark .shop-sub { color: rgba(255, 255, 255, 0.5); }
body.dark .shop-arrow { color: #fff; }

/* =========================================
   TROPHY CABINET 🏆
   ========================================= */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 12px;
  max-height: 160px; /* Altura máxima con scroll si tienes muuuuchos */
  overflow-y: auto;
  padding-right: 4px;
}

.trophy-item {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  aspect-ratio: 1/1; /* Siempre cuadrados */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  transition: transform 0.2s ease;
  cursor: default; /* Muestra tooltip al pasar el mouse */
}

.trophy-item:hover {
  transform: scale(1.1) rotate(5deg);
  background: rgba(255,255,255,0.8);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.trophy-date {
  font-size: 8px;
  opacity: 0.6;
  font-weight: 700;
  margin-top: 4px;
}

/* Modo Oscuro */
body.dark .trophy-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
body.dark .trophy-item:hover {
  background: rgba(255,255,255,0.15);
}