/* Tema ENDOCONGRESS: la identidad de congreso.endocrino.org.co en la plataforma.

   Solo apariencia. Todo cuelga de html[data-theme="endocongress"], así que
   ningún otro tema cambia, y no hay una sola regla que oculte o mueva algo
   que el usuario necesite: botones, formularios y tablas hacen lo mismo que
   antes, con la forma del sitio oficial.

   Lo que se toma del sitio: el azul petróleo (#004669) y sus fondos profundos,
   el degradado amarillo–naranja de las llamadas a la acción, los botones
   rectos en mayúsculas, las etiquetas espaciadas con el texto en degradado,
   Prompt en los títulos y Poppins en el texto. */

html[data-theme="endocongress"] {
  --endo-brand: #004669;
  --endo-deep: #003a59;
  --endo-media: #002e46;
  --endo-y: #ffd511;
  --endo-o: #fd8b03;
  --endo-rule: linear-gradient(90deg, #ffe313, #fd7b00);
  --endo-shadow: 0 18px 40px -30px rgba(0, 70, 105, .45);
  /* Tonos de estado propios: la base toma «proceso» del acento (--ace-teal),
     que aquí es el naranja, y quedaba igual que «espera». En proceso va el
     azul; cerrado, en verde. */
  --st-proceso: #1a5ea8;
  --st-cerrado: #17733f;
  /* Con su fondo claro, los tonos de estado tienen que pasar el contraste
     4,5:1 de WCAG AA: el azul, el verde y el ámbar anteriores se quedaban en
     3,7–4,3 y el texto de las etiquetas costaba leerlo. */
  --st-espera: #8a5530;
}
/* En modo oscuro los mismos estados van claros: los tonos de arriba,
   oscurecidos para el fondo blanco, se perderían sobre el azul noche. */
html[data-theme="endocongress"][data-theme-mode="dark"] {
  --st-proceso: #8cc0f0;
  --st-cerrado: #7fd6a4;
  --st-espera: #f2b06a;
  --st-alerta: #f39aaa;
  --bs-link-color: #8cc0f0;
  --bs-link-color-rgb: 140, 192, 240;
  --bs-link-hover-color: #b5d7f6;
  --bs-link-hover-color-rgb: 181, 215, 246;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
html[data-theme="endocongress"] h1, html[data-theme="endocongress"] h2,
html[data-theme="endocongress"] h3, html[data-theme="endocongress"] .h1,
html[data-theme="endocongress"] .h2, html[data-theme="endocongress"] .h3,
html[data-theme="endocongress"] .modal-title {
  font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
html[data-theme="endocongress"] .panel-head h1 { font-weight: 700; letter-spacing: -.01em; }
/* Tamaños como en el sitio oficial: texto corrido a 16 px; las tablas densas
   del panel se quedan en 15 px para que sigan cabiendo; la letra pequeña va
   en Poppins, como allí. */
html[data-theme="endocongress"] { --t-base: 1rem; }
html[data-theme="endocongress"] .table { font-size: .9375rem; }
html[data-theme="endocongress"] .small, html[data-theme="endocongress"] small,
html[data-theme="endocongress"] .form-text {
  font-family: "Poppins", var(--font-body), system-ui, sans-serif;
}

/* Etiqueta de sección del sitio: mayúsculas espaciadas, texto en degradado. */
html[data-theme="endocongress"] .section-title,
html[data-theme="endocongress"] .panel-sub,
html[data-theme="endocongress"] .card-header {
  letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-weight: 700;
}
html[data-theme="endocongress"] .section-title {
  background: var(--endo-rule); -webkit-background-clip: text; background-clip: text;
  color: transparent; width: fit-content;
}
html[data-theme="endocongress"] .card-header { color: var(--endo-brand); }
html[data-theme="endocongress"][data-theme-mode="dark"] .card-header { color: #ffcf10; }

/* ── Botones: rectos, mayúsculas, el degradado en los principales ───────── */
html[data-theme="endocongress"] .btn:not(.btn-link):not(.btn-close):not(.topbar-toggle) {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .06em;
  font-size: .76rem; font-weight: 700; padding: .62rem 1.15rem;
}
html[data-theme="endocongress"] .btn.btn-sm:not(.btn-link):not(.btn-close):not(.topbar-toggle) {
  font-size: .66rem; letter-spacing: .04em; padding: .34rem .6rem;
}
html[data-theme="endocongress"] .btn.btn-lg:not(.btn-link):not(.btn-close):not(.topbar-toggle) { font-size: .86rem; padding: .85rem 1.5rem; }
html[data-theme="endocongress"] .btn-outline-primary,
html[data-theme="endocongress"] .btn-outline-secondary {
  --bs-btn-color: var(--endo-brand); --bs-btn-border-color: var(--endo-brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--endo-brand);
  --bs-btn-hover-border-color: var(--endo-brand);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--endo-deep);
}
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-outline-primary,
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-outline-secondary {
  --bs-btn-color: #fff; --bs-btn-border-color: #ffffffb3;
  --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--endo-y); --bs-btn-hover-border-color: var(--endo-y);
}
/* El secundario del panel es claro (descargas, acciones de tabla): con la
   identidad pasa a contorno azul, legible sobre blanco y sobre la sombra. */
html[data-theme="endocongress"] .btn-secondary {
  --bs-btn-color: var(--endo-brand); --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--endo-brand) 45%, transparent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--endo-brand);
  --bs-btn-hover-border-color: var(--endo-brand);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--endo-deep);
  color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color);
}
html[data-theme="endocongress"] .btn-secondary:hover {
  color: #fff; background-color: var(--endo-brand); border-color: var(--endo-brand);
}
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-secondary {
  --bs-btn-color: #fff; color: #fff; border-color: #ffffff80;
}
html[data-theme="endocongress"] .btn:focus-visible,
html[data-theme="endocongress"] .form-control:focus,
html[data-theme="endocongress"] .form-select:focus,
html[data-theme="endocongress"] .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 207, 16, .45); border-color: var(--endo-o);
}
html[data-theme="endocongress"] .form-check-input:checked {
  background-color: var(--endo-brand); border-color: var(--endo-brand);
}

/* ── Formularios ────────────────────────────────────────────────────────── */
html[data-theme="endocongress"] .form-control,
html[data-theme="endocongress"] .form-select { border-radius: 6px; }
html[data-theme="endocongress"] .form-label { font-weight: 600; color: var(--text-2); font-size: .82rem; }

/* ── Tarjetas y tablas: blancas, sin borde duro, la sombra suave del sitio ─ */
html[data-theme="endocongress"] .card,
html[data-theme="endocongress"] .app-content .table-card {
  border-radius: 14px; border-color: transparent; box-shadow: var(--endo-shadow);
}
html[data-theme="endocongress"] .card-header { background: transparent; }
html[data-theme="endocongress"] .table thead th,
html[data-theme="endocongress"] .table-card .table thead th {
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 700;
  color: var(--text-2);
}
html[data-theme="endocongress"] .table-card .table tbody tr:hover {
  background: rgba(0, 70, 105, .045);
}
html[data-theme="endocongress"] .stat-card .stat-val {
  font-family: var(--font-display), sans-serif; font-weight: 700; color: var(--endo-brand);
}
html[data-theme="endocongress"][data-theme-mode="dark"] .stat-card .stat-val { color: #ffcf10; }
html[data-theme="endocongress"] .badge { border-radius: 3px; letter-spacing: .03em; }
html[data-theme="endocongress"] .alert { border-radius: 8px; }
html[data-theme="endocongress"] .nav-tabs .nav-link.active,
html[data-theme="endocongress"] .nav-pills .nav-link.active {
  box-shadow: inset 0 -3px 0 var(--endo-o);
}
html[data-theme="endocongress"] .nav-pills .nav-link.active { background: var(--endo-brand); color: #fff; }
html[data-theme="endocongress"] .page-item.active .page-link {
  background: var(--endo-brand); border-color: var(--endo-brand);
}
html[data-theme="endocongress"] .modal-content { border-radius: 14px; border: 0; background: var(--card-bg); color: var(--text-1); }
html[data-theme="endocongress"] .modal-header {
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--endo-rule) border-box; border-bottom: 3px solid transparent;
}

/* ── Barra lateral del panel: azul profundo y el acento amarillo ────────── */
html[data-theme="endocongress"] .app-sidebar {
  background: linear-gradient(180deg, var(--endo-brand) 0%, var(--endo-media) 100%);
}
html[data-theme="endocongress"] .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .12); }
html[data-theme="endocongress"] .sidebar-brand-name {
  font-family: var(--font-display), sans-serif; font-weight: 700;
}
html[data-theme="endocongress"] .sidebar-label {
  color: #ffcf10; opacity: .85; letter-spacing: .14em;
}
html[data-theme="endocongress"] .sidebar-link { color: rgba(255, 255, 255, .78); }
html[data-theme="endocongress"] .sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* Una sola marca en el activo: la base suma una sombra interior al borde y
   se veían dos rayas. */
html[data-theme="endocongress"] .sidebar-link.active {
  color: #ffcf10; background: rgba(255, 255, 255, .08); border-left-color: var(--endo-y);
  box-shadow: none;
}
html[data-theme="endocongress"] .avatar-initials,
html[data-theme="endocongress"] .brand-square {
  background: linear-gradient(255deg, var(--endo-o), var(--endo-y)); color: #000;
}
/* La franja amarilla–naranja bajo la barra superior, como las reglas del sitio */
html[data-theme="endocongress"] .app-topbar {
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--endo-rule) border-box;
  border-bottom: 3px solid transparent;
}

/* ── Acceso y registro: la tarjeta sobre el azul del congreso ───────────── */
/* El cielo y la ilustración del hero del sitio. La ilustración va aparte
   (recortada, con los bordes difuminados) y apoyada abajo a la derecha: con la
   imagen entera en «cover», cada proporción de pantalla la recortaba distinto y
   en un monitor ancho quedaba debajo del formulario. El velo de abajo hacia el
   azul de marca es el del sitio. */
html[data-theme="endocongress"] .auth-wrap {
  min-height: var(--alto-ventana, 100vh);
  background:
    linear-gradient(180deg, #00436600 49.95%, #004568a8 64.68%, var(--endo-brand) 100%),
    url("/static/brand/endocongress/ilustracion.webp") right 4vw bottom / auto 92vh no-repeat,
    linear-gradient(180deg, #00a7c1 0%, #09b4cc 25%, #08a3bf 50%, #0687a9 100%);
  /* Fijo a la ventana: en una página más alta que la pantalla (el registro)
     el fondo no se estira con el formulario. */
  background-attachment: fixed;
}
/* Pantalla ancha: el formulario a la izquierda, sobre el cielo, como el texto
   del hero del sitio; la ilustración a la derecha. */
@media (min-width: 992px) {
  html[data-theme="endocongress"] .auth-wrap {
    justify-content: flex-start;
    padding-left: max(1.5rem, calc((100vw - 1280px) / 2 + 2vw));
  }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  html[data-theme="endocongress"] .auth-wrap { background-size: auto, auto 70vh, auto; }
}
/* Pantalla angosta: el formulario al centro; la ilustración queda detrás,
   apagada por el velo, sin competir con los campos. */
@media (max-width: 991.98px) {
  html[data-theme="endocongress"] .auth-wrap {
    background:
      linear-gradient(180deg, rgba(0, 70, 105, .35), rgba(0, 70, 105, .85)),
      url("/static/brand/endocongress/ilustracion.webp") center bottom / auto 60vh no-repeat,
      linear-gradient(180deg, #00a7c1 0%, #08a3bf 50%, #0687a9 100%);
    background-attachment: fixed;
  }
}
html[data-theme="endocongress"] .auth-card {
  border-radius: 18px; border: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
  border-top: 4px solid var(--endo-o);
}
html[data-theme="endocongress"] .auth-card h1 {
  font-family: var(--font-display), sans-serif; font-weight: 700; color: var(--endo-brand);
}
html[data-theme="endocongress"][data-theme-mode="dark"] .auth-card h1 { color: #fff; }
html[data-theme="endocongress"] .auth-card .form-control { border-radius: 6px; }
html[data-theme="endocongress"] .auth-card a:not(.btn) { color: var(--endo-brand); font-weight: 600; }
html[data-theme="endocongress"][data-theme-mode="dark"] .auth-card a:not(.btn) { color: #ffcf10; }

/* ── Portal del autor y páginas públicas: la barra azul del sitio ───────── */
html[data-theme="endocongress"] .brand-navbar {
  background: var(--endo-brand) !important; border-bottom: 0 !important;
  box-shadow: inset 0 -3px 0 #fd8b03;
}
html[data-theme="endocongress"] .brand-navbar .navbar-brand img { max-height: 34px; }
html[data-theme="endocongress"] .brand-navbar .nav-link,
html[data-theme="endocongress"] .brand-navbar .navbar-text {
  color: rgba(255, 255, 255, .9); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 500;
}
html[data-theme="endocongress"] .brand-navbar .nav-link:hover { color: #ffcf10; }
html[data-theme="endocongress"] .brand-navbar .btn-outline-secondary {
  --bs-btn-color: #fff; --bs-btn-border-color: #ffffffb3;
  --bs-btn-hover-color: #000; --bs-btn-hover-bg: var(--endo-y); --bs-btn-hover-border-color: var(--endo-y);
}
html[data-theme="endocongress"] .brand-navbar .form-select {
  background-color: transparent; color: #fff; border-color: #ffffff66;
}
html[data-theme="endocongress"] .brand-navbar .form-select option { color: #000; }
/* El logo del congreso es blanco y amarillo: sobre esta barra va el original,
   no la versión para fondos claros. */
html[data-theme="endocongress"] .brand-navbar .logo-claro { display: none; }
html[data-theme="endocongress"] .brand-navbar .logo-oscuro { display: inline-block !important; }

html[data-theme="endocongress"] .pub-page .pub-title {
  font-family: var(--font-display), sans-serif; font-weight: 700; color: var(--endo-brand);
}
html[data-theme="endocongress"][data-theme-mode="dark"] .pub-page .pub-title { color: #fff; }

/* Los enlaces dentro de un aviso heredaban el azul del tema, oscuro sobre el
   fondo noche del aviso en modo oscuro. */
html[data-theme="endocongress"][data-theme-mode="dark"] .alert a:not(.btn),
html[data-theme="endocongress"][data-theme-mode="dark"] .app-content a:not([class]) {
  color: var(--bs-link-color);
}

/* En modo oscuro el verde, el rojo y el ámbar de los estados son claros: los
   botones que los usan de fondo llevan el texto oscuro (en blanco, 1,7:1). */
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-success,
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-danger,
html[data-theme="endocongress"][data-theme-mode="dark"] .btn-warning {
  --bs-btn-color: #04121c;
  --bs-btn-hover-color: #04121c;
  --bs-btn-active-color: #04121c;
  --bs-btn-disabled-color: #04121c;
}