/* =====================================================================
   El Hub Social · Tema OSCURO
   Paleta de marca: azul #2f9bf0 + dorado #f6c544 + navy profundo
   Reemplaza el contenido de dark.css en la pestaña Appearance.

   ---------------------------------------------------------------------
   CAPA DE TOKENS DE MARCA (--hs-*)  ·  añadida el 05-09-2026
   ---------------------------------------------------------------------
   Los --hs-* son la ÚNICA fuente de color de la tienda. Todo lo demás
   (las --c-* de abajo, el index, los twig) los LEE, nunca los redefine.

   Para tematizar la tienda entera (evento, Navidad, lo que sea) NO se
   toca este fichero: se crea un twig que redefina los --hs-* y se
   engancha con UNA línea al final de head.twig. Quitar esa línea
   devuelve la tienda exactamente a estos valores.

   Ver: tema-otono.twig
   ===================================================================== */
:root {
  /* ---- Marca: primario (AZUL) ---- */
  --hs-primary:            #2f9bf0;
  --hs-primary-dark:       #2b86e0;
  --hs-primary-light:      #5cc6ff;
  --hs-primary-ink:        #06283f;   /* texto que va ENCIMA del primario */

  /* ---- Marca: secundario (DORADO) ---- */
  --hs-secondary:          #f6c544;
  --hs-secondary-dark:     #c98a1c;
  --hs-secondary-light:    #ffd76b;
  --hs-secondary-ink:      #3a2a05;   /* texto que va ENCIMA del secundario */

  /* ---- Marca: acento de ambiente (auroras, blobs del index) ---- */
  --hs-accent:             #a855f7;

  /* ---- Superficies ---- */
  --hs-bg:                 #0b1521;
  --hs-bg-top:             #0c1622;   /* degradado del body en el index */
  --hs-bg-mid:             #0a1019;
  --hs-sidebar:            #0a121c;
  --hs-sidebar-dark:       #0e1a26;
  --hs-sidebar-dark-hover: #16273a;
  --hs-sidebar-rgb:        10, 18, 28;
  --hs-block:              #16202c;
  --hs-block-border:       #243443;
  --hs-block-dark:         #111b26;
  --hs-block-dark-border:  #1d2c3a;
  --hs-block-inner:        #0e1a25;
  --hs-block-inner-hover:  #1b2a3a;

  /* ---- Texto ---- */
  --hs-text:               #9fb2c2;
  --hs-text-hi:            #eaf2fb;

  /* ---- Acento por categoría (las cartas del abanico y el hero) ----
     Cada carta del index los lee; así el tema puede reteñirlas sin
     tocar el HTML. */
  --hs-cat-rangos:         #2f9bf0;
  --hs-cat-ascensos:       #f6c544;
  --hs-cat-mensuales:      #ff6b5b;
  --hs-cat-kits:           #8b3ff0;
  --hs-cat-xp:             #6b5cf2;
  --hs-cat-protecciones:   #a3d43a;
  --hs-cat-crates:         #f6c544;
  --hs-cat-evento:         #ff8c34;   /* la carta del evento vivo */
  --hs-cat-hubcoins:       #3fd0d8;   /* cian, sacado del icono de la moneda */

  /* --- Estados (no son de marca: no se tematizan) --- */
  --c-danger:        #e2574c;
  --c-danger-dark:   #c8423a;
  --c-danger-light:  #f0786e;

  --c-success:       #28a37a;
  --c-success-dark:  #1f8663;
  --c-success-light: #3fc795;

  /* ===================================================================
     De aquí abajo, las variables que consume el template MOUNT.
     Salen de los tokens: no pongas hex sueltos.
     =================================================================== */

  /* --- Fondo de pagina --- */
  --c-bg:                  var(--hs-bg);
  --c-sidebar:             var(--hs-sidebar);
  --c-sidebar-dark:        var(--hs-sidebar-dark);
  --c-sidebar-dark-hover:  var(--hs-sidebar-dark-hover);
  --c-sidebar-rgb:         var(--hs-sidebar-rgb);

  /* --- Tarjetas / bloques --- */
  --c-block:               var(--hs-block);
  --c-block-border:        var(--hs-block-border);

  --c-block-dark:          var(--hs-block-dark);
  --c-block-dark-border:   var(--hs-block-dark-border);

  --c-block-inner:         var(--hs-block-inner);
  --c-block-inner-hover:   var(--hs-block-inner-hover);

  /* --- Texto --- */
  --c-text:             var(--hs-text);       /* texto secundario / cuerpo */
  --c-text-highlighted: var(--hs-text-hi);    /* texto destacado / titulos */
  --c-text-light:       #ffffff;

  /* --- Color primario --- */
  --c-primary:       var(--hs-primary);
  --c-primary-dark:  var(--hs-primary-dark);
  --c-primary-light: var(--hs-primary-light);

  /* --- Color secundario --- */
  --c-secondary:       var(--hs-secondary);
  --c-secondary-dark:  var(--hs-secondary-dark);
  --c-secondary-light: var(--hs-secondary-light);
}

/* ===== Sidebar nav · hover (aquí en dark.css para que SIEMPRE cargue) ===== */
body .navbar-menu .navbar-submenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
}
body .navbar-menu .navbar-submenu li { border: none !important; }
body .navbar-menu .navbar-submenu li a {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background-color .12s ease, color .12s ease !important;
}
body .navbar-menu .navbar-content:hover,
body .navbar-menu .navbar-submenu li a:hover {
  background-color: color-mix(in srgb, var(--hs-primary) 18%, transparent) !important;
  color: var(--c-primary-light) !important;
  border-radius: 8px !important;
}

/* ===== Objetivo de Comunidad · rediseño por CSS (respeta los 32px y el % dentro, de shared.css) ===== */
body .goal-grid-community .goal-img { display: none !important; }   /* fuera el logo */

body .goal-grid-community .goal-block {
  background: linear-gradient(180deg, color-mix(in srgb, var(--hs-block) 82%, #ffffff 6%) 0%, var(--hs-block) 100%) !important;
  border: 1px solid var(--c-block-border) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Título arriba, descripción debajo (no apretados en la misma línea) */
body .goal-grid-community .goal-desc {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin-bottom: 14px !important;
}
body .goal-grid-community .goal-desc .col-auto { width: auto !important; margin-right: 0 !important; }
body .goal-grid-community .community-goal-title {
  font-family: "Sora", "Inter", sans-serif !important;
  font-weight: 800 !important; font-size: 16px !important;
  color: var(--c-text-highlighted) !important;
}
body .goal-grid-community .community-goal-desc { font-size: 12.5px !important; color: var(--c-text) !important; line-height: 1.45 !important; }
body .goal-grid-community .community-goal-desc p { margin: 0 !important; }

/* Barra: mantenemos los 32px y el % superpuesto (NO tocamos altura ni .progress-detail).
   Solo redondeamos a pastilla y dejamos el degradado de marca. El % en blanco con sombra. */
body .goal-grid-community .progress-container { border-radius: 999px !important; }
body .goal-grid-community .progress-bar {
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--c-primary-dark), var(--c-primary-light)) !important;
}
body .goal-grid-community .goal-percent { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important; }
body .goal-grid-community .goal-amount { color: #fff !important; }