:root{
  /* Design Tokens - Paleta tierra sofisticada */
  --bg-base: #1A1A1A;        /* Fondo base dark elegante */
  --surface-1: #2A2A2A;      /* Superficie 1 */
  --surface-2: #3A3A3A;      /* Superficie 2 */
  --surface-3: #4A4A4A;      /* Superficie 3 */
  --border-warm: rgba(139, 92, 69, 0.15); /* Borde cálido tierra */
  --primary-coffee: #8B5C45; /* Primario café rico */
  --accent-warm: #D4A574;    /* Acento cálido dorado */
  --accent-earth: #A67C52;   /* Acento tierra */
  --text-primary: #F5F5F5;   /* Texto primario */
  --text-secondary: #C4C4C4; /* Texto secundario */
  --text-muted: #8A8A8A;     /* Texto atenuado */
  --warm-beige: rgba(212, 165, 116, 0.1); /* Beige cálido translúcido */
  --success: #8B9A5B;        /* Verde tierra */
  --warning: #D4A574;        /* Amarillo dorado */
  --error: #B85450;          /* Rojo tierra */
  
  /* Backgrounds */
  --bg: var(--bg-base);
  --card: var(--surface-1);
  --card-elevated: var(--surface-2);
  --card-hover: var(--surface-3);
  --sidebar: linear-gradient(180deg, var(--surface-1) 0%, var(--bg-base) 100%);
  
  /* Typography Scale - Inter */
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 19px; --text-2xl: 23px; --text-3xl: 28px;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing Scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  
  /* Border Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.06); 
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  
  /* Focus */
  --focus-ring: 0 0 0 2px var(--accent-warm), 0 0 0 4px rgba(212, 165, 116, 0.2);
  
  /* Transitions */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--transition-smooth);
  --transition-medium: 200ms var(--transition-smooth);
  --transition-slow: 300ms var(--transition-smooth);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-family);
  font-size:var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height:1.6;
  color:var(--text-primary);
  background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(139, 92, 69, 0.03) 1px, transparent 0);
  background-size:24px 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100dvh;
  max-width:1400px;
  margin:0 auto;
}
aside{
  background:var(--sidebar);
  color:var(--text-primary);
  padding:var(--space-6);
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--border-warm);
  width: 280px;
  backdrop-filter: blur(20px);
}

.brand{
  display:flex;
  gap:var(--space-4);
  align-items:center;
  margin-bottom:var(--space-8);
  padding-bottom:var(--space-6);
  border-bottom:1px solid var(--border-warm);
}

.logo{
  width:40px;
  height:40px;
  border-radius:var(--radius-2xl);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, var(--primary-coffee) 0%, var(--accent-warm) 100%);
  box-shadow: var(--shadow-md);
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand__title{
  font-size:var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin:0;
  color:var(--text-primary);
  letter-spacing: -0.02em;
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  flex:1;
}

.side-nav a{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);
  color:var(--text-secondary);
  text-decoration:none;
  font-size:var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition:var(--transition-medium);
  position:relative;
  stroke-width: 1.5px;
}

.side-nav a[aria-current="page"]{
  background:var(--card-elevated);
  color:var(--text-primary);
  border-left:3px solid var(--accent-warm);
  box-shadow: var(--shadow-sm);
}

.side-nav a:hover{
  background:var(--card-elevated);
  color:var(--text-primary);
  transform: translateX(2px);
}

.badge{
  margin-left:auto;
  background:var(--accent-warm);
  color:var(--bg-base);
  padding:var(--space-1) var(--space-3);
  border-radius:999px;
  font-size:var(--text-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

/* Banner PWA */
.pwa-banner{
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  border:1px solid var(--border-warm);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-bottom:var(--space-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  transition:var(--transition-medium);
  box-shadow: var(--shadow-sm);
}

.pwa-banner__content{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  font-size:var(--text-sm);
  font-weight: var(--font-weight-medium);
  color:var(--text-primary);
}

.pwa-banner__close{
  background:none;
  border:none;
  color:var(--text-secondary);
  cursor:pointer;
  padding:var(--space-2);
  border-radius:var(--radius-md);
  transition:var(--transition-fast);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pwa-banner__close:hover{
  background:var(--border-warm);
  color:var(--text-primary);
}

.foot-note{
  opacity:0.7;
  font-size:var(--text-xs);
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid var(--border-warm);
  color:var(--text-secondary);
}

.content{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  display:flex;
  gap:var(--space-6);
  align-items:center;
  justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border-warm);
  background:rgba(42, 42, 42, 0.8);
  backdrop-filter:blur(20px) saturate(180%);
  position:sticky;
  top:0;
  z-index:10;
}

.hamb{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
  min-width:40px;
  min-height:40px;
}

.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  background:var(--card-elevated);
  border:1px solid var(--border-warm);
  border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-5);
  max-width:720px;
  height:48px;
  transition:var(--transition-medium);
  box-shadow: var(--shadow-sm);
}

.search:focus-within{
  border-color:var(--accent-warm);
  box-shadow:0 0 0 3px rgba(212, 165, 116, 0.1), var(--shadow-md);
}

.search input{
  border:0;
  outline:0;
  flex:1;
  font-size:var(--text-base);
  font-weight: var(--font-weight-normal);
  background:transparent;
  color:var(--text-primary);
}

.search input::placeholder{
  opacity:0.7;
  color:var(--text-muted);
}

.chipbar{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}

.chip{
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-xl);
  background:transparent;
  border:1px solid var(--border-warm);
  font-size:var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor:pointer;
  transition:var(--transition-medium);
  height:36px;
  display:flex;
  align-items:center;
  min-width:60px;
  justify-content:center;
  color:var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.chip:hover{
  background:var(--card-elevated);
  color:var(--text-primary);
  border-color:var(--accent-warm);
  transform:translateY(-1px);
  box-shadow: var(--shadow-md);
}

.chip:active{
  transform:translateY(0);
}

.chip.active{
  background:var(--accent-warm);
  color:var(--bg-base);
  border-color:var(--accent-warm);
  box-shadow: var(--shadow-md);
}

main{
  display:grid;
  gap:var(--space-6);
  padding:var(--space-6) var(--space-8);
}

.card{
  background:var(--card);
  border:1px solid var(--border-warm);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:var(--transition-medium);
  backdrop-filter: blur(10px);
}

.card:hover{
  box-shadow:var(--shadow-lg);
  transform: translateY(-2px);
}

.card h2{
  font-size:var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin:0 0 var(--space-5);
  position:relative;
  padding-left:var(--space-5);
  color:var(--text-primary);
  letter-spacing: -0.01em;
}

.card h2::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  background: linear-gradient(135deg, var(--primary-coffee) 0%, var(--accent-warm) 100%);
  border-radius:2px;
}

.now{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--space-6);
  align-items:center;
  background: linear-gradient(135deg, var(--primary-coffee) 0%, var(--accent-warm) 100%);
  color:#fff;
  border-radius:var(--radius-2xl);
  padding:var(--space-6);
  position:relative;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-warm);
  overflow:hidden;
}

.now::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.np-title{
  font-weight: var(--font-weight-semibold);
  font-size:var(--text-2xl);
  margin:0;
  letter-spacing: -0.02em;
}

.np-sub{
  opacity:0.9;
  font-size:var(--text-base);
  margin:0;
  font-weight: var(--font-weight-normal);
}

.eq{
  display:flex;
  gap:2px;
  align-items:flex-end;
}

.eq .bar{
  width:3px;
  height:8px;
  background:rgba(255,255,255,0.6);
  border-radius:999px;
  animation:beat 1.2s infinite ease-in-out;
}

.eq .bar:nth-child(2){animation-delay:0.2s}
.eq .bar:nth-child(3){animation-delay:0.4s}

@keyframes beat{
  0%,100%{height:6px}
  50%{height:14px}
}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}

.kpi{
  background:var(--card-elevated);
  border:1px solid var(--border-warm);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  text-align:center;
  transition:var(--transition-medium);
  box-shadow: var(--shadow-sm);
}

.kpi:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi strong{
  font-size:var(--text-3xl);
  font-weight: var(--font-weight-bold);
  display:block;
  color:var(--accent-warm);
  margin-bottom:var(--space-2);
  letter-spacing: -0.02em;
}

.kpi span{
  font-size:var(--text-sm);
  color:var(--text-muted);
  font-weight: var(--font-weight-medium);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4);
}

.item{
  border:1px solid var(--border-warm);
  background:var(--card-elevated);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--space-4);
  align-items:start;
  transition:var(--transition-medium);
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}

.item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--accent-warm);
}

.item-info{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}

.item-title{
  font-weight: var(--font-weight-semibold);
  font-size:var(--text-lg);
  color:var(--text-primary);
  margin:0;
  letter-spacing: -0.01em;
}

.item .stamp{
  font-size:var(--text-sm);
  color:var(--text-muted);
  margin:0;
  font-weight: var(--font-weight-normal);
}

.item-tags{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-top:var(--space-2);
}

.tag{
  background:var(--surface-3);
  color:var(--text-secondary);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-xl);
  font-size:var(--text-xs);
  font-weight: var(--font-weight-medium);
  height:24px;
  display:flex;
  align-items:center;
  border:1px solid var(--border-warm);
  transition:var(--transition-fast);
}

.tag:hover{
  background:var(--accent-warm);
  color:var(--bg-base);
  border-color:var(--accent-warm);
}

.actions{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  align-items:stretch;
}

.btn{
  appearance:none;
  border:1px solid var(--border-warm);
  background:var(--card-elevated);
  border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
  font-size:var(--text-sm);
  cursor:pointer;
  transition:var(--transition-medium);
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.btn:focus{
  outline:none;
  box-shadow:var(--focus-ring);
}

.btn.primary{
  background: linear-gradient(135deg, var(--primary-coffee) 0%, var(--accent-warm) 100%);
  color:#fff;
  border-color:transparent;
  font-weight: var(--font-weight-semibold);
}

.btn.primary:hover{
  background: linear-gradient(135deg, var(--accent-warm) 0%, var(--primary-coffee) 100%);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.btn.ghost{
  background:transparent;
  border:1px solid var(--border-warm);
  color:var(--text-secondary);
}

.btn.ghost:hover{
  background:var(--card-elevated);
  color:var(--text-primary);
  border-color:var(--accent-warm);
}

.player{
  position:sticky;
  bottom:0;
  z-index:20;
  background:rgba(42, 42, 42, 0.95);
  border-top:1px solid var(--border-warm);
  padding:var(--space-5) var(--space-6);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--space-6);
  box-shadow:0 -8px 32px rgba(0,0,0,0.2);
  backdrop-filter: blur(20px);
}

.player-controls{
  display:flex;
  gap:var(--space-3);
  align-items:center;
}

.player-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--border-warm);
  background:var(--card-elevated);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition-medium);
  font-size:var(--text-base);
  color:var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.player-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-warm);
}

.player-btn:focus{
  outline:none;
  box-shadow:var(--focus-ring);
}

.player-btn.primary{
  background: linear-gradient(135deg, var(--primary-coffee) 0%, var(--accent-warm) 100%);
  color:#fff;
  border-color:transparent;
  box-shadow: var(--shadow-md);
}

.player-btn.primary:hover{
  background: linear-gradient(135deg, var(--accent-warm) 0%, var(--primary-coffee) 100%);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

/* Empty States */
.empty-state{
  text-align:center;
  padding:var(--space-8) var(--space-4);
  color:var(--text-secondary);
}

.empty-state h3{
  font-size:var(--text-lg);
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 var(--space-2);
}

.empty-state p{
  font-size:var(--text-sm);
  margin:0 0 var(--space-4);
  opacity:0.8;
}

.empty-state .btn{
  margin-top:var(--space-3);
}

/* Skeleton loading */
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-1) 50%, var(--surface-2) 75%);
  background-size:200% 100%;
  animation:loading 1.5s infinite;
  border-radius:var(--radius-sm);
}

@keyframes loading{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.skeleton-text{
  height:1em;
  margin-bottom:var(--space-2);
}

.skeleton-text:last-child{
  margin-bottom:0;
  width:60%;
}

/* Responsive */
@media (max-width: 960px){
  .app{
    grid-template-columns:1fr;
  }
  
  aside{
    position:fixed;
    inset:0 30% 0 0;
    transform:translateX(-100%);
    transition:transform 0.25s var(--transition-smooth);
    z-index:30;
  }
  
  aside.open{
    transform:translateX(0);
  }
  
  /* Scrim para móvil */
  aside.open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(15,18,21,0.5);
    backdrop-filter:blur(4px);
    z-index:-1;
  }
  
  .hamb{
    display:flex;
  }
  
  .list{
    grid-template-columns:1fr;
    gap:var(--space-2);
  }
  
  .kpis{
    grid-template-columns:1fr 1fr;
  }
  
  .topbar{
    padding:var(--space-3) var(--space-4);
  }
  
  main{
    padding:var(--space-3) var(--space-4);
    gap:var(--space-3);
  }
  
  .search{
    max-width:none;
  }
  
  .chipbar{
    overflow-x:auto;
    padding-bottom:var(--space-1);
    scroll-snap-type:x mandatory;
  }
  
  .chip{
    flex-shrink:0;
    scroll-snap-align:start;
  }
}

@media (max-width: 480px){
  .kpis{
    grid-template-columns:1fr;
  }
  
  .topbar{
    flex-direction:column;
    gap:var(--space-3);
    align-items:stretch;
  }
  
  .search{
    order:1;
  }
  
  .chipbar{
    order:2;
    justify-content:flex-start;
  }
}