/* ====== Tema claro/oscuro ====== */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#555; --card:#f7f7f8; --border:#e5e7eb; --accent:#2563eb;
  --danger:#ef4444;
  --header-bg: color-mix(in srgb, var(--card) 75%, transparent);
  --shadow: 0 6px 18px rgba(0,0,0,.05);
  --ok:#16a34a; /* verde */

  /* medidas */
  --header-h: 64px;                       /* altura visual de la barra */
  --safe-top: env(safe-area-inset-top);   /* respeta notch en móviles */
  --container-max: 1100px;
  --container-pad: clamp(12px, 4vw, 24px);
  --radius: 14px;
  --gap: 12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f13; --fg:#e6e9ef; --muted:#a0a6ad; --card:#11161c; --border:#232a33; --accent:#60a5fa;
    --danger:#f87171;
    --header-bg: color-mix(in srgb, var(--card) 85%, transparent);
    --shadow: 0 6px 18px rgba(0,0,0,.35);
    --ok:#22c55e;
  }
}

/* ====== Reset & base ====== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font: clamp(14px, 1.6vw, 16px)/1.45 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
body{overflow-x:hidden}

/* ====== Contenedor fluido ====== */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.page{ padding-block: 16px 28px; }

/* ====== Header fijo + navbar ====== */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height:calc(var(--header-h) + max(var(--safe-top), 6px));
  padding-top: max(var(--safe-top), 6px);
  display:flex; align-items:center;
  backdrop-filter:saturate(120%) blur(6px);
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.header-spacer{height:calc(var(--header-h) + max(var(--safe-top), 6px))}
.nav-wrap{
  height:var(--header-h);
  display:flex; align-items:center; gap:12px; width:100%;
}
.brand{
  display:flex; align-items:center;
  font-weight:800; font-size:clamp(1rem, 2vw, 1.1rem);
  letter-spacing:.2px; color:var(--fg); text-decoration:none;
}

/* Enlaces (desktop) */
.nav{ margin-left:auto; position:relative; z-index:1001 }
.nav ul{display:flex;align-items:center;gap:10px; list-style:none; padding:0; margin:0}
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; text-decoration:none; color:var(--fg);
  border:1px solid transparent;
}
.nav a:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.nav a.active{border-color:var(--accent)}
.user-pill{
  padding:6px 10px;border:1px dashed var(--border);border-radius:999px;color:var(--muted);
}
.logout-link{color:var(--danger);border-color:transparent}
.logout-link:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}

/* ====== Hamburguesa (CSS-only) ====== */
.nav-toggle{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.nav-burger{
  display:none;                      /* se activa en @media móvil */
  margin-left:auto;                  /* pegada a la derecha */
  width:44px; height:44px;           /* diana táctil */
  align-items:center; justify-content:center;
  cursor:pointer;
  border:0;                          /* SIN borde/rectángulo */
  background:transparent;            /* SIN fondo */
  border-radius:12px;                /* para focus */
  z-index:1002;
}
.nav-burger:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* líneas de la hamburguesa */
.nav-burger span{
  position:relative;
  display:block;
  width:22px; height:2px;
  background:var(--fg);
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.nav-burger span::before,
.nav-burger span::after{
  content:"";
  position:absolute; left:0;
  width:22px; height:2px;
  background:var(--fg);
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.nav-burger span::before{ transform: translateY(-6px); }
.nav-burger span::after { transform: translateY( 6px); }

/* ====== Estado abierto: anima a "X" ====== */
/* (estructura en base.html: input + label + nav) */
#nav-toggle:checked + .nav-burger span{
  background:transparent;            /* oculta la línea central */
}
#nav-toggle:checked + .nav-burger span::before{
  transform: rotate(45deg);          /* barra superior ↘ */
}
#nav-toggle:checked + .nav-burger span::after{
  transform: rotate(-45deg);         /* barra inferior ↗ */
}

/* === recuerda: en móvil activamos la hamburguesa === */
@media (max-width: 820px){
  .nav-burger{ display:flex; }
}


/* ====== Cards, inputs, botones ====== */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  margin-block: 12px;
}
.max-w-sm{max-width:560px; margin-inline:auto}
.form{display:grid;gap:12px;margin-top:8px}
label{display:grid;gap:6px;font-weight:600}
input{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:transparent;color:var(--fg);outline:none
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}
.btn{
  padding:10px 14px;border-radius:10px;border:1px solid var(--accent);
  background:var(--accent);color:white;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(1.05)}
.alert{
  padding:10px 12px;border:1px solid var(--danger);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius:10px;margin-bottom:6px
}
.alert.ok{
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.footer{opacity:.7;margin-top:24px}
.link{color:var(--accent);text-decoration:none;border-bottom:1px dashed var(--accent)}
.link:hover{opacity:.9}

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .max-w-sm{max-width:min(100%, 700px)}
}

/* ====== Menú móvil con max-height (sin solapes) ====== */
@media (max-width: 820px){
  .nav-burger{display:flex; margin-left:auto}  /* burger a la derecha */

  /* Panel: ocupa ancho completo y se "desenrolla" hacia abajo */
  .nav{
    position:fixed;
    top:calc(var(--header-h) + max(var(--safe-top), 6px));
    left:0; right:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);

    max-height:0;                /* cerrado */
    overflow:hidden;             /* oculta contenido cerrado */
    transition:max-height .22s ease;
  }

  .nav ul{
    display:flex; flex-direction:column; align-items:stretch;
    gap:12px;
    width:min(92vw, 520px);
    margin:0 auto;
    padding:12px 16px 16px 16px; /* espacio interior del panel */
  }

  .nav a{ padding:14px 16px }    /* diana táctil mayor */
  .spacer{display:none}

  /* Al activar el checkbox, abre hasta llenar la pantalla debajo del header */
  .nav-toggle:checked ~ .nav{
    max-height: calc(100vh - (var(--header-h) + max(var(--safe-top), 6px)));
  }
}

@media (max-width:600px){
  .container{padding-inline: clamp(12px, 5vw, 18px)}
}

/* ====== Tabla responsive + dots estado ====== */
.table-wrap{overflow:auto}
.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.table th,.table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.table thead th{
  font-weight:700; font-size:.95em;
}
.table tbody tr:last-child td{ border-bottom:0 }

.dot{
  display:inline-block; width:10px; height:10px; border-radius:999px;
  margin-right:8px; vertical-align:middle;
  box-shadow:0 0 0 2px color-mix(in srgb, currentColor 15%, transparent) inset;
}
.dot.ok{ background:#16a34a }  /* verde */
.dot.ko{ background:#ef4444 }  /* rojo */
.txt-ok{ color:#16a34a; font-weight:600 }
.txt-ko{ color:#ef4444; font-weight:600 }

/* Tabla en pantallas estrechas: etiquetas en celdas */
@media (max-width: 640px){
  .table thead{ display:none }
  .table, .table tbody, .table tr, .table td{ display:block; width:100% }
  .table tr{ border-bottom:1px solid var(--border); padding:10px 0 }
  .table td{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:8px 6px;
  }
  .table td::before{
    content: attr(data-label);
    font-weight:600; color:var(--muted);
  }
}
/* Evitar que la hamburguesa bloquee clics cuando el menú está abierto */
@media (max-width: 820px){
  #nav-toggle:checked + .nav-burger{
    pointer-events: none;        /* no intercepta clicks */
    z-index: 0;                  /* detrás del panel */
  }
}

/* ====== Form grid para controles ====== */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:12px;
}
@media (max-width:720px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ====== Campos ====== */
.field{ display:grid; gap:8px; }
.field-label{ font-weight:700; color:var(--fg); }

/* ====== Select estilizado ====== */
.select{
  position:relative;
  display:block;
}
.select-input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:100%;
  padding:12px 44px 12px 14px;         /* hueco para el chevron a la derecha */
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  border-radius:12px;
  font: inherit;
  line-height:1.2;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease;
  box-shadow: var(--shadow);
}
.select-input:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.select-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.select-input:active{
  transform: translateY(0.5px);
}

/* Chevron (flecha) */
.select::after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity:.75;
  pointer-events:none;
}

/* Quitar la flecha nativa en IE/Edge antiguos */
.select-input::-ms-expand{ display:none; }

/* High-contrast para estado disabled (por si lo usas) */
.select-input:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* Dark mode ajuste sutil del chevron */
@media (prefers-color-scheme: dark){
  .select::after{ opacity:.9; }
}
/* Rescate de especificidad por si otro CSS pisa el nuestro */
.card .form .select .select-input {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  padding:12px 44px 12px 14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--fg);
  border-radius:12px;
  font:inherit; line-height:1.2;
  box-shadow: var(--shadow);
}
.card .form .select::after{
  content:"";
  position:absolute; right:12px; top:50%;
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity:.8; pointer-events:none;
}
/* grid y campos (por si no lo tenías) */
#predicciones-form .form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:12px;
}
@media (max-width:720px){ #predicciones-form .form-grid{ grid-template-columns:1fr } }
#predicciones-form .field{ display:grid; gap:6px }
#predicciones-form .field-label{ font-weight:700 }

/* SELECT estilizado, súper específico para ganar prioridad */
#predicciones-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  padding:12px 44px 12px 14px; /* hueco para chevron */
  border:1px solid var(--border);
  background:
    var(--card)
    /* chevron SVG */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23aab2bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px 12px;
  color:var(--fg);
  border-radius:12px;
  font:inherit; line-height:1.25;
  outline:none;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
#predicciones-form select:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
#predicciones-form select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#predicciones-form select:active{ transform: translateY(.5px) }

/* Quitar flecha IE/Edge antiguos */
#predicciones-form select::-ms-expand{ display:none }

/* Opcional: compactar un poco separación */
#predicciones-form .btn{ margin-top: 6px }
/* ====== Barra de progreso mini ====== */
.progress{
  --h: 8px;
  width: 180px; height: var(--h);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 999px;
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.progress .bar{
  --w: 20%;
  position: absolute; inset: 0 auto 0 0;
  width: var(--w); height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transform-origin: left center;
  transition: width .2s ease;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* (Por si no lo añadiste antes) estilizado de selects del formulario */
#predicciones-form .form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:12px;
}
@media (max-width:720px){ #predicciones-form .form-grid{ grid-template-columns:1fr } }
#predicciones-form .field{ display:grid; gap:6px }
#predicciones-form .field-label{ font-weight:700 }

#predicciones-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:block; width:100%;
  padding:12px 44px 12px 14px;
  border:1px solid var(--border);
  background:
    var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23aab2bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px 12px;
  color:var(--fg);
  border-radius:12px;
  font:inherit; line-height:1.25;
  box-shadow: var(--shadow);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#predicciones-form select:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
#predicciones-form select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#predicciones-form select::-ms-expand{ display:none }

/* ====== Tablas: mejoras de legibilidad y densidad ====== */

/* Cabecera fija cuando hay scroll horizontal */
.table-wrap {
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.table thead th {
  position: sticky; top: 0;
  background: var(--card);
  z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}

/* Densidad un pelín más compacta en pantallas pequeñas */
.table th, .table td { padding: 10px 12px; }
@media (max-width: 380px){
  .table th, .table td { padding: 8px 10px; }
}

/* Cebra sutil y hover (solo desktop) */
@media (hover:hover){
  .table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
}
.table tbody tr:nth-child(odd){ background: color-mix(in srgb, var(--fg) 2.5%, transparent); }

/* Números alineados y monospace tabular para columnas numéricas */
.table td[data-num],
.table th[data-num]{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* “Píldora” para 1X2 (mejor que un simple 1/2/X suelto) */
.pill{
  display:inline-block; min-width: 1.8em; text-align:center;
  padding: 2px 8px; border-radius: 999px; font-weight: 700;
  border:1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.pill.x { background: color-mix(in srgb, var(--muted) 18%, transparent); }
.pill.win { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.pill.loss{ background: color-mix(in srgb, var(--danger) 18%, transparent); }

/* Barra mini para “Conf.” dentro de celda (opcional) */
.conf-bar{
  --h: 6px;
  position: relative; height: var(--h); width: 120px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  overflow: hidden;
}
.conf-bar > i{
  position:absolute; inset:0 auto 0 0; display:block; height:100%;
  width: var(--pct, 50%); background: var(--accent);
}

/* Celdas que puedan romper por palabras largas (nombres de equipos/liga) */
.table td[data-label*="Local"],
.table td[data-label*="Visitante"],
.table td[data-label*="Esquema"],
.table td[data-label*="Tabla"]{
  word-break: break-word;
}

/* ====== “Tabla apilada” en móvil: mejoras visuales ====== */
@media (max-width: 640px){
  .table thead { display:none }
  .table, .table tbody, .table tr, .table td { display:block; width:100% }
  .table tr{
    border:1px solid var(--border);
    border-radius: 12px;
    margin: 10px 0;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .table td{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; padding:10px 12px; border-bottom:1px solid var(--border);
  }
  .table tbody tr:last-child td{ border-bottom:1px solid var(--border) } /* neutraliza regla global */
  .table td:last-child{ border-bottom:0 }
  .table td::before{
    content: attr(data-label);
    flex: 0 0 46%;
    max-width: 55%;
    font-weight: 600; color: var(--muted);
  }
  /* Etiquetas algo más compactas en móviles muy estrechos */
  @media (max-width: 360px){
    .table td::before{ flex-basis: 52%; max-width: 60%; }
  }
}

/* ====== Tarjetas de “resultado” tipo clave-valor (si usas <dl>) ====== */
.kv{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.kv dt{ color: var(--muted); font-weight: 600 }
.kv dd{ margin:0; text-align: right; font-variant-numeric: tabular-nums }
@media (max-width:560px){ .kv{ grid-template-columns: 1fr } .kv dd{ text-align:left } }

/* ====== Estado OK/KO compacto en la vista /estado ====== */
.state{
  display:inline-flex; align-items:center; gap:8px; font-weight:700;
}
.state .dot{ box-shadow:none }
.state.ok{ color: var(--ok) }
.state.ko{ color: var(--danger) }

/* ====== Subnavbar Gestión Mister ====== */
.gm-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.gm-subnav a{
  text-decoration:none;color:var(--fg);
  padding:8px 12px;border:1px solid var(--border);border-radius:999px;
}
.gm-subnav a.active{
  border-color:var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight:700;
}

/* ====== Dropdown en navbar ====== */
.nav li.dropdown{ position:relative }
.drop-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--fg);
  font:inherit;
}
.drop-btn:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent) }
.drop-btn.active{ border-color:var(--accent) }
.drop-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* chevron */
.drop-btn .chev{
  width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.8; margin-left:2px;
}

/* menú */
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width: 260px; padding:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  display:none; z-index:1002;
}
.dropdown-menu a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--fg);
}
.dropdown-menu a:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent) }
.dropdown-menu a.active{ border:1px solid var(--accent) }

/* Abrir en hover y focus-within (teclado) en desktop */
@media (hover:hover){
  .dropdown:hover > .dropdown-menu{ display:block }
}
.dropdown:focus-within > .dropdown-menu{ display:block }

/* ====== Modo móvil (panel hamburguesa) ====== */
@media (max-width: 820px){
  .nav li.dropdown{ width:100% }
  .drop-btn{ width:100%; justify-content:space-between; padding:14px 16px; }
  .dropdown-menu{
    position:static; display:block; border:1px dashed var(--border);
    border-radius:12px; margin:6px 0 4px 0; padding:6px;
    background:color-mix(in srgb, var(--card) 85%, transparent);
  }
  .dropdown-menu a{ padding:12px 14px }
}
/* ===== Fix dropdown siempre abierto ===== */

/* 1) CERRADO POR DEFECTO (fuerte) */
.nav li.dropdown > .dropdown-menu{
  display: none !important;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

/* 2) ABRIR EN DESKTOP por hover o focus-within */
@media (hover:hover){
  .nav li.dropdown:hover   > .dropdown-menu,
  .nav li.dropdown:focus-within > .dropdown-menu{
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* 3) MÓVIL: solo visible cuando el panel hamburguesa está desplegado */
@media (max-width: 820px){
  /* cerrado por defecto en móvil también */
  .nav li.dropdown > .dropdown-menu{
    display: none !important;
    opacity: 1;           /* sin animación vertical en móvil */
    transform: none;
    pointer-events: auto;
    position: static;     /* que fluya dentro del panel */
    border: 1px dashed var(--border);
    border-radius: 12px;
    margin: 6px 0 4px;
    padding: 6px;
    background: color-mix(in srgb, var(--card) 85%, transparent);
  }
  /* abrir SOLO cuando el panel está abierto */
  #nav-toggle:checked ~ .nav li.dropdown > .dropdown-menu{
    display: block !important;
  }
}
/* --- Dropdown: abierto al pasar el ratón y sin huecos --- */
.nav li.dropdown{ position:relative }

.nav li.dropdown > .dropdown-menu{
  position:absolute; top:100%; left:0;
  min-width:260px; padding:8px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  display:none; z-index:1002;
  opacity:0; transform:translateY(6px);
  pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}

/* puente invisible para que el hover no se “caiga” al pasar del botón al menú */
.nav li.dropdown > .dropdown-menu::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:10px;
}

/* abrir en desktop por hover/focus-within */
@media (hover:hover){
  .nav li.dropdown:hover   > .dropdown-menu,
  .nav li.dropdown:focus-within > .dropdown-menu{
    display:block; opacity:1; transform:translateY(0); pointer-events:auto;
  }
}
/* --- Móvil: dropdown como acordeón dentro del panel --- */
@media (max-width:820px){
  .nav li.dropdown{ width:100% }
  .drop-btn{ width:100%; justify-content:space-between; padding:14px 16px }
  .nav li.dropdown > .dropdown-menu{
    position:static; width:100%;
    margin:6px 0 4px; padding:6px;
    background:color-mix(in srgb, var(--card) 85%, transparent);
    border:1px dashed var(--border); border-radius:12px;
    box-shadow:none;
    display:none; opacity:1; transform:none; pointer-events:auto;
  }
  /* solo visible cuando el panel hamburguesa está abierto Y el dropdown tiene la clase .open */
  #nav-toggle:checked ~ .nav li.dropdown.open > .dropdown-menu{ display:block }
}
/* --- Móvil: dropdown CERRADO por defecto y sólo abre con .open --- */
@media (max-width:820px){
  /* Cerrar SIEMPRE por defecto, incluso con la hamburguesa abierta */
  #nav-toggle:checked ~ .nav li.dropdown > .dropdown-menu{
    display: none !important;
  }
  /* Abrir sólo cuando el dropdown tenga la clase .open */
  #nav-toggle:checked ~ .nav li.dropdown.open > .dropdown-menu{
    display: block !important;
  }

  /* (opcional) chevron que rota al abrir */
  .nav li.dropdown .drop-btn .chev{ transition: transform .15s ease }
  .nav li.dropdown.open .drop-btn .chev{ transform: rotate(225deg) } /* de v a ^ */
}
/* Flecha/tendencia */
.trend{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-weight:700;
  border:1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
}
.trend.up{
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.trend i{ font-style:normal; line-height:1 }
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700;
  border:1px solid var(--border);
}
.trend{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px; font-weight:700;
  border:1px solid var(--border);
}
.trend.up{
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.trend.down{
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.trend i{ font-style:normal; line-height:1 }