/* ================================================================
   app-theme.css — BioSeryl "modo app" (light)
   Aplied only on the subpages that opt in via $page_theme_app.
   Mirrors the design grammar of the Inertia home (/):
   white + gray-50 rhythm, gray-900 headings, gray-600 body,
   emerald accents, blurred white header.
   Loaded AFTER styles.20260610.css and pages.v20260730b.css.
================================================================ */

:root {
  --dark: #f9fafb;
  --mid: #ffffff;
  --card: #ffffff;
  --bdr: #e5e7eb;
  --txt: #4b5563;
  --light-bg: #f3f4f6;
}

body {
  background: #ffffff;
  color: #1f2937;
}

/* ── Header: blurred white bar (home style) ─────────────────────── */
.site-header,
.site-header.scrolled {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: #e5e7eb;
}

.nav-link,
.nav-link--dropdown,
.nav-link--highlight { color: #4b5563; }

.nav-link:hover,
.nav-link--dropdown:hover,
.nav-link--highlight:hover { color: #111827; background: #f3f4f6; }

.nav-link.active,
.nav-link--dropdown[aria-expanded="true"] {
  color: #047857;
  background: rgba(5, 150, 105, .08);
  box-shadow: none;
}

.nav-auth .btn--outline {
  background: transparent;
  border-color: #d1d5db;
  color: #374151;
}
.nav-auth .btn--outline:hover { background: #f9fafb; border-color: #9ca3af; color: #111827; }
.nav-auth .btn--green { background: #111827; color: #ffffff; }
.nav-auth .btn--green:hover { background: #1f2937; box-shadow: none; }

.hamburger__line { background: #111827; }

/* Header dropdowns / menus */
.nav-dropdown__menu,
.lang-menu,
.nav-user-menu__dropdown {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .12);
}
.nav-dropdown__item:hover,
.lang-opt:hover,
.nav-user-menu__item:hover { background: #f3f4f6; }
.nav-dropdown__item strong,
.nav-user-menu__item { color: #111827; }
.nav-dropdown__item small { color: #6b7280; }
.lang-opt { color: #374151; }
.lang-opt--sel { color: #047857; background: rgba(5, 150, 105, .08); }
.lang-opt__code { color: #9ca3af; }
.lang-country { background: #ffffff; border-color: #e5e7eb; color: #6b7280; }

.nav-user-menu__btn { color: #374151; background: #f3f4f6; }
.nav-user-menu__btn:hover { background: #e5e7eb; }

#header-socials a { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
#header-socials a:hover { background: #ffffff; border-color: #d1d5db; }

/* Mobile menu */
@media (max-width: 640px) {
  .main-nav {
    background: #ffffff;
    border-bottom-color: #e5e7eb;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
  }
  .nav-link { border-bottom-color: #f3f4f6; }
  .nav-auth { border-top-color: #e5e7eb; }
  .nav-user-menu__btn { background: #f3f4f6; }
  .nav-user-menu__dropdown { border: none; box-shadow: none; }
  .nav-dropdown__menu { background: transparent; border: none; box-shadow: none; }
}

/* ── Page hero: soft light gradient (home hero) ─────────────────── */
.page-hero__bg,
.page-hero--academy .page-hero__bg,
.page-hero--contact .page-hero__bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 35%, rgba(5, 150, 105, .10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 12% 60%, rgba(16, 185, 129, .05) 0%, transparent 70%),
    linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.page-hero__img { opacity: .07; }
.page-hero__overlay { background: transparent; }
.page-hero__title { color: #111827; }
.page-hero__sub { color: #4b5563; }

/* ── Sections & headings ────────────────────────────────────────── */
.section--dark,
.section--mid,
.section--contact { background: var(--mid, #ffffff); }
.section--light { background: var(--light-bg, #f3f4f6); }

.section-tag,
.section-tag--dark { color: #047857; }
.section-title,
.section-title--dark { color: #111827; }
.section-desc,
.section-desc--dark { color: #4b5563; }

.hero__title--accent { color: #047857; }

/* ── Tags ───────────────────────────────────────────────────────── */
.tag { color: #047857; background: rgba(5, 150, 105, .08); border-color: rgba(5, 150, 105, .18); }
.tag--recorded { color: #7c3aed; background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .22); }

/* ── Buttons (home grammar) ─────────────────────────────────────── */
.btn--green {
  background: #059669;
  color: #ffffff;
}
.btn--green:hover { background: #047857; box-shadow: 0 4px 20px rgba(5, 150, 105, .30); }
.btn--cta { background: #059669; color: #ffffff; }
.btn--cta:hover { background: #047857; }

.btn--ghost,
.btn--outline {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.btn--ghost:hover { border-color: #059669; color: #059669; background: #f9fafb; }
.btn--outline:hover { border-color: #9ca3af; background: #f9fafb; }

/* ── Cards (academy / eventos / docs / contacto) ────────────────── */
.course-card,
.doc-card,
.event-card,
.contact-form-card,
.stat-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

.course-card__title,
.doc-card__title,
.event-card__title,
.contact-channels-title,
.contact-channel-card h4,
.contact-form-card h3,
.inco-banner__text h3,
.service-block__title {
  color: #111827;
}
.course-card__desc,
.doc-card__sub,
.inco-banner__text p,
.event-card__desc,
.contact-channel-card p,
.contact-info__desc,
.channel,
.check-opt {
  color: #4b5563;
}
.event-card__schedule { color: #6b7280; }
.course-card__price { color: #111827; }
.course-card__footer,
.course-card__materials {
  border-top-color: #f3f4f6;
}

.course-card__price-original,
.course-card__regional-label { color: #9ca3af; }
.course-card__closed,
.course-card__badge--updating,
.course-card__badge--updating-status {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.course-card__badge--free,
.course-card__badge--enrollment,
.course-card__start { color: #047857; background: rgba(5, 150, 105, .08); border-color: rgba(5, 150, 105, .18); }
.course-card__badge--recorded,
.course-card__start--recorded { color: #7c3aed; background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .22); }

.event-card__img { background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%); }

.inco-banner {
  background: linear-gradient(135deg, #ffffff 0%, rgba(5, 150, 105, .06) 100%);
}

.pillar { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: none; }
.stat-card__label { color: #6b7280; }

/* ── Forms (contacto) ───────────────────────────────────────────── */
.form-group > label,
.form-group__label { color: #374151; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9ca3af; }
.contact-form select option { background: #ffffff; color: #111827; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  background: #ffffff;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
}

.contact-form-card select {
  background-color: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.contact-form-card select:focus {
  border-color: #059669;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .12);
}

.form-msg--ok { background: rgba(5, 150, 105, .10); color: #047857; border-color: rgba(5, 150, 105, .22); }
.form-msg--err { background: rgba(220, 38, 38, .08); color: #dc2626; border-color: rgba(220, 38, 38, .20); }

/* ── Footer: white (home footer) ────────────────────────────────── */
.site-footer { background: #ffffff; }
.footer-inner { border-bottom-color: #e5e7eb; }
.footer-tagline,
.footer-linkedin,
.footer-social,
.footer-socials a,
.footer-nav-group a,
.footer-contact-group a { color: #6b7280; }
.footer-nav-group h5,
.footer-contact-group h5 { color: #4b5563; }
.footer-nit,
.footer-bottom { color: #9ca3af; }
.footer-wa { color: #25d366; }
.footer-wa:hover,
.footer-nav-group a:hover,
.footer-contact-group a:hover,
.footer-social:hover,
.footer-socials a:hover,
.footer-linkedin:hover { color: #111827; }