/* Tema Mi Cuota — sobrescribe la paleta del boceto (se carga DESPUÉS de app.css).
   El boceto usa variables --c-navy-* / --c-yellow; las remapeo a la marca. */
:root {
  --c-navy-900: #4a3b37;   /* marrón oscuro (headings, hover) */
  --c-navy-800: #ec6900;   /* primary (botones) */
  --c-navy-700: #d95f00;
  --c-navy-600: #ec6900;
  --c-navy-500: #ef852a;   /* interactive */
  --c-navy-400: #f2a25a;
  --c-navy-100: #fbe4d0;
  --c-navy-50:  #fdf3ea;

  --c-yellow:      #f6ba2e; /* accent / CTA */
  --c-yellow-dark: #d99a22;
  --c-yellow-soft: #fdf1d6;

  --c-bg: #F0F0F0;
  --c-ink-900: #5A4946;    /* texto principal marrón */

  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Sidebar en marrón de marca + acento naranja/amarillo en el activo */
.sidebar { background: #5A4946; }
.nav-item.active { background: rgba(255, 255, 255, 0.12); }
.nav-item.active .ic { color: var(--c-yellow); }

/* Logo Mi Cuota en la marca de la sidebar (wordmark, oculto el texto extra) */
.brand-logo { width: auto; height: auto; background: transparent; box-shadow: none; }
.brand-logo img { height: 30px; width: auto; object-fit: contain; }
.brand-meta { display: none; }
.brand { gap: 0; }

/* CTA amarillo bien de marca */
.btn-yellow { background: var(--c-yellow); color: #5A4946; }
.btn-yellow:hover { background: var(--c-yellow-dark); color: #fff; }

/* Placeholder para solapas 'Próximamente' */
.placeholder { text-align: center; color: var(--c-ink-500); padding: 70px 24px; }
.placeholder .ph-emoji { font-size: 42px; margin-bottom: 10px; }
.placeholder h2 { color: var(--c-navy-900); margin: 0 0 6px; font-weight: 800; }

/* Banner de error de la consulta */
.consulta-error {
  margin: 16px 24px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--c-red-soft); color: var(--c-red); font-weight: 600; font-size: 13px;
}