/* ==========================================================================
   NFIT — COLORES DE LA MARCA SOBRE LOS PANELES
   --------------------------------------------------------------------------
   Los paneles vienen de Suplementos DZ (rojo y blanco). Esta hoja va de
   ÚLTIMA en cada página y los viste con la paleta de NFIT: negro y dorado,
   la misma de web/css/estilos.css.

   Se pisan las VARIABLES, no las reglas: así el día que se actualice un panel
   desde DZ, basta con volver a copiarlo y esta hoja lo sigue vistiendo.
   Van con !important porque las hojas de DZ declaran sus variables en
   selectores más específicos (html[data-tema=...][data-tema-dz=...]).
   ========================================================================== */
:root {
  /* — Paleta NFIT — */
  --nf-oro:        #d9ae62;
  --nf-oro-osc:    #b8903f;
  --nf-oro-suave:  rgba(217,174,98,.14);
  --nf-negro:      #0a0a0a;
  --nf-fondo:      #131211;
  --nf-sup:        #1c1b19;
  --nf-sup2:       #25231f;
  --nf-sup3:       #2f2d28;
  --nf-borde:      #37342e;
  --nf-borde2:     #48443c;
  --nf-texto:      #f6f2e9;
  --nf-texto2:     #c9c2b4;
  --nf-texto3:     #a39d90;

  /* — Rutinas (rutinas/css/base.css) y cabeceras de los paneles — */
  --azul:          var(--nf-oro) !important;
  --azul-osc:      var(--nf-oro-osc) !important;
  --azul-suave:    var(--nf-oro-suave) !important;
  --acento:        var(--nf-oro) !important;
  --marca:         var(--nf-oro) !important;
  --info:          var(--nf-oro) !important;
  --carbon:        var(--nf-negro) !important;
  --carbon2:       #1a1a1a !important;
  --fondo:         var(--nf-fondo) !important;
  --superficie:    var(--nf-sup) !important;
  --superficie2:   var(--nf-sup2) !important;
  --superficie3:   var(--nf-sup3) !important;
  --borde:         var(--nf-borde) !important;
  --borde2:        var(--nf-borde2) !important;
  --texto:         var(--nf-texto) !important;
  --texto2:        var(--nf-texto2) !important;
  --texto3:        var(--nf-texto3) !important;
  --sobre-acento:  #141414 !important;

  /* — Planificador (planificadores/dz-plan.css): el rojo pasa a dorado — */
  --red:           var(--nf-oro) !important;
  --red-soft:      var(--nf-oro-osc) !important;
  --cta:           var(--nf-oro) !important;

  /* — Inicio de sesión, administración e inscripción (dz-tema.css) — */
  --acento-osc:    var(--nf-oro-osc) !important;
  --acento-glow:   rgba(217,174,98,.35) !important;
  --negro:         var(--nf-negro) !important;
  --bg:            var(--nf-fondo) !important;
  --bg-card:       var(--nf-sup) !important;
  --card:          var(--nf-sup) !important;
  --bg-input:      var(--nf-sup2) !important;
  --input:         var(--nf-sup2) !important;
  --gris:          var(--nf-sup2) !important;
  --text:          var(--nf-texto) !important;
  --text-muted:    var(--nf-texto3) !important;
  --muted:         var(--nf-texto3) !important;
  --border:        var(--nf-borde) !important;
  --border2:       var(--nf-borde2) !important;
}

/* Fondo de página oscuro en todas, como la app de NFIT */
html, body { background: var(--nf-fondo) !important; color: var(--nf-texto); }

/* El rojo de los botones con texto blanco pasa a dorado con texto negro:
   el blanco sobre dorado no se lee. */
.dz-plan .btn-primary, .dz-plan .btn-cta, .btn.principal, .dz-btn, .btn-main, .dz-btn-login,
.av-btn.principal, .btn-aprobar {
  color: #141414 !important;
}

/* Solo hay un tema en NFIT: se esconde el selector de colores de DZ */
.dz-temas { display: none !important; }

/* — Piezas de dz-tema.css con blanco fijo — */
.dz-top { background: rgba(28,27,25,.97) !important; border-color: var(--nf-borde) !important; }
.dz-btn-sec { background: var(--nf-sup2) !important; color: var(--nf-texto) !important; border-color: var(--nf-borde2) !important; }
.dz-btn { color: #141414 !important; }
.dz-anuncio { color: #141414 !important; }
.dz-marca span b, .dz-marca b { color: var(--nf-oro) !important; }

/* — Planificador de alimentación: de blanco a oscuro —
   Sus colores salen de unas pocas variables (--ink texto, --body texto
   suave, --mint fondo suave, --line bordes, --black lo activo). Los blancos
   fijos se pasaron a var(--nf-card). Lo activo queda en dorado. */
:root {
  --nf-card:   var(--nf-sup);
  --ink:       var(--nf-texto) !important;
  --num:       var(--nf-texto) !important;
  --body:      var(--nf-texto2) !important;
  --grey-num:  var(--nf-texto3) !important;
  --mint:      var(--nf-sup2) !important;
  --line:      var(--nf-borde) !important;
  --black:     var(--nf-oro) !important;
}
/* Lo que tiene fondo dorado lleva texto oscuro (el blanco no se lee) */
.dz-plan .btn-dark, .dz-plan .btn-primary, .dz-plan .btn-primary:hover, .dz-plan .btn-cta:hover,
.dz-plan .btn-cta .arrow, .dz-plan .cat-item .plus, .dz-plan .cat-item:hover .plus,
.dz-plan .cat-item:active .plus, .dz-plan .day-tab.active, .dz-plan .tipo-dia button.on,
.dz-plan .vc-total, .dz-plan .vc-dias button.on, .dz-plan .modo-vista button.on,
.dz-plan .dz-media-generar.dz-media-armado, .dz-plan .alimento-cambiar[aria-expanded="true"],
.dz-plan .vc-supl-ico {
  color: #141414 !important;
}

/* Campos de formulario legibles sobre fondo oscuro */
.dz-plan select, .dz-plan input:not([type=checkbox]):not([type=radio]), .dz-plan textarea {
  background: var(--nf-sup2) !important; color: var(--nf-texto) !important; border-color: var(--nf-borde2) !important;
}

/* Letra por defecto: sin esto, las pantallas que quedan fuera de los
   paneles (sin acceso, cargando) salían en Times. */
body { font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }