/* =============================================================================
   Holotomy · tema visual (línea gráfica VISALio®)
   Fondo azul noche → violeta → magenta, tipografía geométrica (Outfit),
   llamadas a la acción en naranja y superficies translúcidas tipo "cristal".
   ============================================================================= */

:root,
[data-bs-theme="dark"] {
  /* Paleta de marca */
  --hx-night:   #0d0a2b;
  --hx-deep:    #1a1150;
  --hx-indigo:  #3b1fa8;
  --hx-violet:  #7b2ff7;
  --hx-purple:  #a23cf5;
  --hx-magenta: #e1358f;
  --hx-orange:  #ff8a1f;
  --hx-orange-2:#f2600c;
  --hx-ink:     #f4f1ff;
  --hx-muted:   #b9b2df;

  --hx-gradient: linear-gradient(115deg, var(--hx-night) 0%, var(--hx-indigo) 38%, var(--hx-purple) 72%, var(--hx-magenta) 100%);
  --hx-cta:      linear-gradient(180deg, var(--hx-orange) 0%, var(--hx-orange-2) 100%);
  --hx-glass:    rgba(255, 255, 255, .06);
  --hx-glass-2:  rgba(255, 255, 255, .10);
  --hx-line:     rgba(255, 255, 255, .12);
  --hx-radius:   1rem;

  /* Bootstrap */
  --bs-body-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: var(--hx-night);
  --bs-body-bg-rgb: 13, 10, 43;
  --bs-body-color: var(--hx-ink);
  --bs-body-color-rgb: 244, 241, 255;
  --bs-secondary-color: var(--hx-muted);
  --bs-secondary-bg: #1c1450;
  --bs-tertiary-bg: #161040;
  --bs-tertiary-bg-rgb: 22, 16, 64;
  --bs-border-color: var(--hx-line);
  --bs-border-color-translucent: var(--hx-line);
  --bs-primary: var(--hx-violet);
  --bs-primary-rgb: 123, 47, 247;
  --bs-primary-bg-subtle: rgba(123, 47, 247, .22);
  --bs-primary-text-emphasis: #c9a8ff;
  --bs-primary-border-subtle: rgba(123, 47, 247, .45);
  --bs-link-color: #c39bff;
  --bs-link-color-rgb: 195, 155, 255;
  --bs-link-hover-color: #ffffff;
  --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #ffffff;
  --bs-focus-ring-color: rgba(162, 60, 245, .45);
}

html, body { min-height: 100%; }
body {
  font-family: var(--bs-body-font-family);
  font-weight: 400;
  letter-spacing: .005em;
  background:
    radial-gradient(1200px 700px at 100% -10%, rgba(225, 53, 143, .22), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(59, 31, 168, .45), transparent 60%),
    var(--hx-night) !important;
  background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 700;
  letter-spacing: -.01em;
}
::selection { background: rgba(162, 60, 245, .55); color: #fff; }

/* ---------- Barra de navegación ---------- */
.hx-navbar {
  background: rgba(13, 10, 43, .55) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hx-line);
  min-height: 64px;
}
.hx-navbar.is-hero:not(.is-scrolled) { background: transparent !important; border-bottom-color: transparent; backdrop-filter: none; }
@media (max-width: 767.98px) {   /* menú desplegado en móvil: siempre con fondo */
  .hx-navbar.is-hero .navbar-collapse.show,
  .hx-navbar.is-hero .navbar-collapse.collapsing { background: rgba(13, 10, 43, .92); border-radius: .8rem; padding: .5rem; margin-top: .5rem; }
}
.hx-navbar .navbar-brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.hx-navbar .navbar-brand sup { font-size: .55em; font-weight: 600; top: -.9em; margin-left: .05em; }
.hx-navbar .nav-link {
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  position: relative;
  padding-inline: .85rem !important;
}
.hx-navbar .nav-link:hover { color: #fff; }
.hx-navbar .nav-link.active { color: #fff; }
.hx-navbar .nav-link.active::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: #fff; opacity: .9;
}
.brand-logo { vertical-align: -0.55rem; margin: -0.25rem 0.25rem -0.25rem 0; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: .7rem; letter-spacing: .01em; }
.btn-lg { padding: .8rem 1.6rem; border-radius: .85rem; }
.btn-primary,
.btn-cta {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  background: var(--hx-cta);
  box-shadow: 0 8px 22px rgba(242, 96, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover, .btn-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(242, 96, 12, .45); }
.btn-primary:active, .btn-cta:active { transform: translateY(0); filter: brightness(.96); }
.btn-primary:disabled, .btn-cta:disabled { background: #6c5a8a; box-shadow: none; opacity: .6; }

.btn-violet {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-border-color: transparent;
  background: linear-gradient(135deg, var(--hx-violet), var(--hx-purple));
  box-shadow: 0 8px 22px rgba(123, 47, 247, .35);
}
.btn-glass,
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
}
.btn-outline-primary {
  --bs-btn-color: #d2b6ff; --bs-btn-border-color: rgba(162, 60, 245, .6);
  --bs-btn-hover-bg: var(--hx-violet); --bs-btn-hover-border-color: var(--hx-violet); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--hx-violet); --bs-btn-active-border-color: var(--hx-violet);
}
.btn-outline-secondary {
  --bs-btn-color: var(--hx-ink); --bs-btn-border-color: var(--hx-line);
  --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: rgba(255, 255, 255, .3); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(162, 60, 245, .35); --bs-btn-active-border-color: var(--hx-purple);
}
.btn-dark {
  --bs-btn-bg: rgba(13, 10, 43, .65); --bs-btn-border-color: var(--hx-line);
  --bs-btn-hover-bg: rgba(123, 47, 247, .55); --bs-btn-hover-border-color: rgba(162, 60, 245, .7);
  --bs-btn-active-bg: var(--hx-violet);
  backdrop-filter: blur(8px);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--hx-indigo); --bs-btn-hover-bg: #f1eaff; --bs-btn-hover-color: var(--hx-indigo); }
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary { background: linear-gradient(135deg, var(--hx-violet), var(--hx-purple)); border-color: transparent; color: #fff; }

/* ---------- Superficies ---------- */
.card {
  --bs-card-bg: var(--hx-glass);
  --bs-card-border-color: var(--hx-line);
  --bs-card-cap-bg: rgba(255, 255, 255, .04);
  border-radius: var(--hx-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card.border-0 { border: 1px solid var(--hx-line) !important; }
.card-header { font-weight: 600; }
.card-header.bg-body { background: rgba(255, 255, 255, .04) !important; }
.shadow-sm { box-shadow: 0 10px 30px rgba(5, 3, 25, .35) !important; }
.bg-body { background-color: transparent !important; }
.bg-body-tertiary { background-color: transparent !important; }
.list-group { --bs-list-group-bg: var(--hx-glass); --bs-list-group-border-color: var(--hx-line); --bs-list-group-action-hover-bg: rgba(162, 60, 245, .18); --bs-list-group-action-hover-color: #fff; border-radius: var(--hx-radius); }
.dropdown-menu { --bs-dropdown-bg: #1d1550; --bs-dropdown-border-color: var(--hx-line); --bs-dropdown-link-hover-bg: rgba(162, 60, 245, .25); border-radius: .8rem; }
.modal-content, .offcanvas { --bs-offcanvas-bg: #150f3c; }

/* Tablas */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--hx-line); --bs-table-hover-bg: rgba(255, 255, 255, .05); --bs-table-striped-bg: rgba(255, 255, 255, .03); }
.table-light, .table > thead.table-light > tr > th {
  --bs-table-bg: rgba(255, 255, 255, .06);
  --bs-table-color: var(--hx-muted);
  --bs-table-border-color: var(--hx-line);
  color: var(--hx-muted);
  font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
}
.sticky-top.table-light, thead.sticky-top { background: #1a1248; }
.text-bg-light { background: rgba(255, 255, 255, .12) !important; color: var(--hx-ink) !important; }
.text-bg-secondary { background: rgba(255, 255, 255, .16) !important; }

/* Formularios */
.form-control, .form-select {
  --bs-body-bg: rgba(255, 255, 255, .06);
  background-color: rgba(255, 255, 255, .06);
  border-color: var(--hx-line);
  color: var(--hx-ink);
  border-radius: .7rem;
}
.form-control::placeholder { color: rgba(185, 178, 223, .7); }
.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, .09);
  border-color: var(--hx-purple);
  box-shadow: 0 0 0 .2rem rgba(162, 60, 245, .3);
  color: #fff;
}
.form-select option { background: #1c1450; color: var(--hx-ink); }
.form-check-input:checked { background-color: var(--hx-violet); border-color: var(--hx-violet); }
.form-range::-webkit-slider-thumb { background: var(--hx-orange); }
.form-range::-moz-range-thumb { background: var(--hx-orange); }
.form-control-color { padding: .2rem; }
.progress { --bs-progress-bg: rgba(255, 255, 255, .1); --bs-progress-bar-bg: var(--hx-orange); border-radius: 1rem; }
.progress-bar { background: var(--hx-cta); }
.pagination { --bs-pagination-bg: var(--hx-glass); --bs-pagination-border-color: var(--hx-line); --bs-pagination-active-bg: var(--hx-violet); --bs-pagination-active-border-color: var(--hx-violet); --bs-pagination-color: var(--hx-ink); --bs-pagination-hover-bg: rgba(162, 60, 245, .2); --bs-pagination-hover-color: #fff; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--hx-muted); --bs-breadcrumb-item-active-color: var(--hx-muted); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--hx-line); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: rgba(123, 47, 247, .18); --bs-accordion-active-color: #fff; --bs-accordion-btn-focus-box-shadow: none; }
.alert { border-radius: .9rem; backdrop-filter: blur(8px); }
kbd { background: rgba(255, 255, 255, .15); }
code { color: #ff9fd0; }

/* Insignias de rol */
.role-badge { font-size: .7rem; vertical-align: middle; font-weight: 600; border-radius: 1rem; padding: .3em .65em; }
.role-visitor { background: rgba(255, 255, 255, .18); color: #fff; }
.role-pro     { background: linear-gradient(135deg, #ffb347, var(--hx-orange)); color: #2a1300; }
.role-editor  { background: linear-gradient(135deg, #19c2a0, #0b8f78); color: #fff; }
.role-admin   { background: linear-gradient(135deg, var(--hx-magenta), var(--hx-purple)); color: #fff; }

/* ---------- Portada ---------- */
.hx-hero {
  position: relative;
  overflow: hidden;
  background: var(--hx-gradient);
  margin-top: -64px;          /* el degradado pasa por debajo de la barra transparente */
  padding-top: 64px;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
}
.hx-hero::before {             /* brillo radial suave */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 85% 30%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(500px 500px at 10% 90%, rgba(13, 10, 43, .55), transparent 70%);
  pointer-events: none;
}
.hx-hero .container { position: relative; z-index: 1; }

/* Portada con banner de fondo (render anatómico a la derecha, zona oscura a la izquierda para el texto) */
.hx-hero.has-bg {
  background: var(--hx-hero-img) 72% center / cover no-repeat, var(--hx-gradient);
}
.hx-hero.has-bg::before {
  background: linear-gradient(90deg, rgba(13, 10, 43, .35) 0%, rgba(13, 10, 43, .1) 45%, transparent 65%);
}
@media (max-width: 991.98px) {
  .hx-hero.has-bg { background-image: var(--hx-hero-img-sm), var(--hx-gradient); background-position: 78% center; }
  /* En pantallas estrechas el texto queda sobre el modelo: velo oscuro para que se lea bien */
  .hx-hero.has-bg::before {
    background: linear-gradient(180deg, rgba(13, 10, 43, .82) 0%, rgba(13, 10, 43, .55) 55%, rgba(13, 10, 43, .25) 100%);
  }
}
.hx-hero-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.hx-hero-brand img { width: 64px; height: 64px; }
.hx-hero-brand span { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
.hx-hero-brand sup { font-size: .45em; top: -1.2em; font-weight: 600; }
.hx-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; }
.hx-hero .lead { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; color: rgba(255, 255, 255, .92); max-width: 36ch; }
.hx-hero-art { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.hx-hero-art img { max-width: 100%; max-height: 78vh; filter: drop-shadow(0 30px 60px rgba(13, 10, 43, .55)); }
.hx-orb {
  width: min(420px, 80vw); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(225, 53, 143, .8), transparent 55%),
    linear-gradient(135deg, var(--hx-violet), var(--hx-magenta));
  box-shadow: 0 0 120px rgba(162, 60, 245, .65), inset 0 0 60px rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  animation: hx-float 7s ease-in-out infinite;
}
.hx-orb i { font-size: min(11rem, 40vw); color: rgba(255, 255, 255, .9); text-shadow: 0 10px 40px rgba(13, 10, 43, .45); }
@keyframes hx-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@media (prefers-reduced-motion: reduce) { .hx-orb { animation: none; } }

.hx-section { padding: 5rem 0; }
.hx-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: #ffb06b; }
.hx-feature {
  height: 100%;
  padding: 1.8rem;
  border-radius: var(--hx-radius);
  background: var(--hx-glass);
  border: 1px solid var(--hx-line);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hx-feature:hover { transform: translateY(-4px); border-color: rgba(162, 60, 245, .55); background: var(--hx-glass-2); }
.hx-feature .hx-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--hx-violet), var(--hx-magenta));
  box-shadow: 0 10px 24px rgba(162, 60, 245, .4);
  margin-bottom: 1rem;
}
.hx-plan { height: 100%; padding: 2rem; border-radius: var(--hx-radius); background: var(--hx-glass); border: 1px solid var(--hx-line); }
.hx-plan.is-featured { background: linear-gradient(160deg, rgba(123, 47, 247, .35), rgba(225, 53, 143, .25)); border-color: rgba(255, 255, 255, .25); }
.hx-plan ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.hx-plan li { padding: .35rem 0; display: flex; gap: .6rem; align-items: baseline; }
.hx-plan li .bi-check-circle-fill { color: #6ef0c2; }
.hx-plan li .bi-dash-circle { color: rgba(255, 255, 255, .35); }

/* ---------- Pie de página ---------- */
.hx-footer { border-top: 1px solid var(--hx-line); background: rgba(13, 10, 43, .6); }

/* Créditos de autoría (Facultad de Medicina - UNAM) */
.hx-credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .hx-credits { justify-content: flex-start; text-align: left; } }
.hx-credit-logos { display: flex; align-items: center; gap: 1rem; }
.hx-credit-logo {
  height: 76px; width: auto; max-width: 160px; object-fit: contain;
  /* Los escudos oficiales son monocromos (negro / azul marino): se muestran en blanco sobre el fondo oscuro */
  filter: brightness(0) invert(1);
  opacity: .92;
}
.hx-credit-author { font-weight: 700; font-size: 1.1rem; color: #fff; letter-spacing: .01em; }
.hx-credits-compact {
  border-top: 1px solid var(--hx-line);
  padding: .75rem 1rem;
  font-size: .78rem;
  color: var(--hx-muted);
  text-align: center;
}
.hx-credits-compact .hx-credit-logos { justify-content: center; margin-bottom: .4rem; }
.hx-credits-compact .hx-credit-logo { height: 44px; }
.hx-credits-compact strong { color: #fff; }

/* ---------- Autenticación ---------- */
.hx-auth { min-height: calc(100vh - 64px - 64px); display: flex; align-items: center; }
.hx-auth .card { background: rgba(20, 14, 58, .7); box-shadow: 0 25px 60px rgba(5, 3, 25, .55) !important; }
.hx-auth .hx-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, var(--hx-violet), var(--hx-magenta));
  box-shadow: 0 12px 30px rgba(162, 60, 245, .45);
}

/* ---------- Catálogo ---------- */
.model-card { overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.model-card:hover { transform: translateY(-4px); border-color: rgba(162, 60, 245, .6) !important; box-shadow: 0 18px 40px rgba(123, 47, 247, .3) !important; }
.model-card .thumb {
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 35%, rgba(162, 60, 245, .35), rgba(13, 10, 43, .9)) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255, 255, 255, .35);
}
.model-card.locked .thumb { filter: grayscale(.85); opacity: .55; }
.model-card .lock-badge { position: absolute; top: .6rem; right: .6rem; border-radius: 1rem; }
.model-card .card-title { font-weight: 600; }

.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#viewer-root { height: calc(100vh - 64px); min-height: 420px; background: var(--hx-night); }