/* ============================================================
   1. CABECERA / LOGO
   ============================================================ */

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  fill: currentColor;
  display: block;
  height: 2rem;
  width: auto;
}

.md-header__button.md-logo {
  margin: 0.1rem;
  padding: 0.2rem;
}

/* ============================================================
   2. TIPOGRAFÍA, PÁRRAFOS Y CONTENIDO PRINCIPAL
   ============================================================ */

p {
  text-align: justify;
  text-justify: inter-word;
}

.md-content {
  flex-grow: 1;
  padding: 0 clamp(0.9rem, 3.5vw, 2rem);
  min-width: 0;
}

/* Encabezados */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--md-default-fg-color--light);
  font-weight: bold;
  font-variant-caps: initial;
  text-transform: none;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.md-typeset h1 {
  font-size: 1.4rem;
}
.md-typeset h2 {
  font-size: 1.2rem;
}
.md-typeset h3 {
  font-size: 1rem;
}
.md-typeset h4 {
  font-size: 0.9rem;
}
.md-typeset h5 {
  font-size: 0.8rem;
}
.md-typeset h6 {
  font-size: 0.7rem;
}

.md-typeset strong,
.md-typeset b {
  color: var(--md-default-fg-color--light);
}

/* ============================================================
   3. CONTENEDOR PDF
   ============================================================ */

.pdf-container {
  width: 100%;
  height: 1060px; /* Ajusta la altura según tus necesidades */
  border: 1px solid #ccc;
}

/* ============================================================
   4. IMÁGENES (centrado y tamaños)
   ============================================================ */

/* Centrar imágenes */
.img-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Clases de tamaño de imagen */
.img-xs {
  width: 10%;
  height: auto;
}
.img-s {
  width: 25%;
  height: auto;
}
.img-sm {
  width: 37%;
  height: auto;
}
.img-m {
  width: 50%;
  height: auto;
}
.img-ml {
  width: 67%;
  height: auto;
}
.img-l {
  width: 75%;
  height: auto;
}
.img-xl {
  width: 100%;
  height: auto;
}

/* Iconos inline pequeños */
.icon-inline {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin: 0 4px;
  pointer-events: none !important;
  cursor: default !important;
  box-shadow: none !important;
  border: none;
}

/* ============================================================
   5. TABLAS UPO - VERSIÓN SIMPLIFICADA
   ============================================================ */

/* Reset básico para tablas */
.md-typeset table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor de tabla */
.md-typeset__scrollwrap {
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: auto;
}

/* CABECERAS - AZUL UPO */
.md-typeset table thead {
  background-color: #013276;
}

.md-typeset table th {
  color: white;
  font-weight: 700;
  text-align: center;
  padding: 12px 16px;
  border: none;
  font-size: 0.95rem;
  border-bottom: 3px solid #fca131;
}

/* CELDAS */
.md-typeset table td {
  padding: 10px 16px;
  text-align: center;
  vertical-align: middle;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* FILAS ALTERNAS Y HOVER */
.md-typeset table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.md-typeset table tbody tr:hover {
  background-color: rgba(1, 50, 118, 0.05);
}

/* ========== MODO OSCURO ========== */
[data-md-color-scheme="slate"] .md-typeset table {
  background-color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset table thead {
  background-color: #013276;
}

[data-md-color-scheme="slate"] .md-typeset table th {
  color: white;
  border-bottom: 3px solid #fca131;
}

[data-md-color-scheme="slate"] .md-typeset table td {
  color: #e6e6e6;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="slate"] .md-typeset table tbody tr:hover {
  background-color: rgba(252, 161, 49, 0.1);
}

/* ELEMENTOS DENTRO DE TABLAS */
.md-typeset table code {
  background-color: rgba(1, 50, 118, 0.1);
  color: #013276;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85em;
}

[data-md-color-scheme="slate"] .md-typeset table code {
  background-color: rgba(252, 161, 49, 0.2);
  color: #fca131;
}

.md-typeset table a {
  color: #013276;
  text-decoration: none;
  font-weight: 600;
}

.md-typeset table a:hover {
  color: #fca131;
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset table a {
  color: #fca131;
}

[data-md-color-scheme="slate"] .md-typeset table a:hover {
  color: #ffcc66;
}

.md-typeset table strong {
  color: #013276;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset table strong {
  color: #fca131;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .md-typeset__scrollwrap {
    margin: 1rem -0.8rem;
    padding: 0 0.8rem;
  }

  .md-typeset table {
    font-size: 0.85rem;
    min-width: 600px; /* Forzar scroll horizontal en móvil si es necesario */
  }

  .md-typeset table th,
  .md-typeset table td {
    padding: 8px 12px;
  }
}

/* BORDES REDONDEADOS VISIBLES */
.md-typeset table tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.md-typeset table tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

.md-typeset table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.md-typeset table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* QUITAR BORDE SUPERIOR DE LA PRIMERA FILA */
.md-typeset table tbody tr:first-child td {
  border-top: none;
}

/* ALINEACIÓN ESPECIAL PARA CIERTAS COLUMNAS */
.md-typeset table td.text-left {
  text-align: left;
}

.md-typeset table td.text-right {
  text-align: right;
}

.md-typeset table td.text-center {
  text-align: center;
}

/* TABLAS PEQUEÑAS (menos columnas) */
.md-typeset table:not(:has(td:nth-child(4))) {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   6. DIAGRAMAS MERMAID
   ============================================================ */

.mermaid {
  display: flex;
  justify-content: center;
}

/* ============================================================
   7. BOTONES DE ANCHO COMPLETO (extensión de .md-button)
   ============================================================ */

.md-button.full-width {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  color: #ffffff;
}

.md-button.full-width.textcenter {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 6px;
  color: #ffffff;
}

/* ============================================================
   8. BOTÓN UPO PERSONALIZADO (link con aspecto de botón)
   ============================================================ */

.md-button {
  background-color: #013276;
  color: #ffffff;
  border: 2px solid #013276;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.md-button:hover {
  background-color: #fca131;
  border-color: #fca131;
  color: #ffffff;
  transform: scale(1.03);
}

/* Modo oscuro: amarillo base, azul al hover */
[data-md-color-scheme="slate"] .md-button {
  background-color: #fca131;
  border-color: #fca131;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-button:hover {
  background-color: #013276;
  border-color: #013276;
  color: #ffffff;
}

/* Modo oscuro: amarillo base, azul al hover */
[data-md-color-scheme="default"] .md-button {
  background-color: #013276;
  border-color: #013276;
  color: #ffffff;
}

[data-md-color-scheme="default"] .md-button:hover {
  background-color: #fca131;
  border-color: #fca131;
  color: #ffffff;
}

/* ============================================================
   9. BOTÓN FLOTANTE A LA DERECHA
   ============================================================ */

.float-right-button {
  float: right;
  margin-left: 10px;
  display: block;
}

/* ============================================================
   10. BOTONES ESPECIALES (LIKE / DISLIKE / SHARE / COPY)
   ============================================================ */

/* Estilo base compartido */
#likeButton,
#dislikeButton,
#shareButton,
#copyLinkButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem;
  font-weight: 600;
  border-radius: 8px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
  box-sizing: border-box !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Iconos */
#likeButton .icon,
#dislikeButton .icon,
#shareButton .icon,
#copyLinkButton .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#likeButton .icon svg,
#dislikeButton .icon svg,
#shareButton .icon svg,
#copyLinkButton .icon svg {
  fill: currentColor;
  transition: fill 0.25s ease-in-out;
}

/* Texto */
#likeButton .label,
#dislikeButton .label,
#shareButton .label,
#copyLinkButton .label {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}

/* -------- COLORES -------- */
/* Modo claro */
[data-md-color-scheme="default"] #likeButton,
[data-md-color-scheme="default"] #dislikeButton,
[data-md-color-scheme="default"] #shareButton,
[data-md-color-scheme="default"] #copyLinkButton {
  border-color: #013276 !important;
  color: #013276 !important;
  background: transparent !important;
}

[data-md-color-scheme="default"] #likeButton:hover,
[data-md-color-scheme="default"] #dislikeButton:hover,
[data-md-color-scheme="default"] #shareButton:hover,
[data-md-color-scheme="default"] #copyLinkButton:hover {
  background: #013276 !important;
  color: #ffffff !important;
}

/* Modo oscuro */
[data-md-color-scheme="slate"] #likeButton,
[data-md-color-scheme="slate"] #dislikeButton,
[data-md-color-scheme="slate"] #shareButton,
[data-md-color-scheme="slate"] #copyLinkButton {
  border-color: #fca131 !important;
  color: #fca131 !important;
  background: transparent !important;
}

[data-md-color-scheme="slate"] #likeButton:hover,
[data-md-color-scheme="slate"] #dislikeButton:hover,
[data-md-color-scheme="slate"] #shareButton:hover,
[data-md-color-scheme="slate"] #copyLinkButton:hover {
  background: #fca131 !important;
  color: #013276 !important;
}

/* ============================================================
   RESPONSIVE PARA BOTONES ESPECIALES
   ============================================================ */

/* 🖥 ESCRITORIO - Opción A (botón cuadrado sin texto) */
@media (min-width: 769px) {
  #likeButton,
  #dislikeButton,
  #shareButton,
  #copyLinkButton {
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 1rem 1rem 0 !important;
    border-radius: 8px !important;
    float: right;
  }

  /* Icono centrado */
  #likeButton .icon svg,
  #dislikeButton .icon svg,
  #shareButton .icon svg,
  #copyLinkButton .icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Ocultar textos */
  #likeButton .label,
  #dislikeButton .label,
  #shareButton .label,
  #copyLinkButton .label {
    display: none !important;
  }
}

/* 📱 MÓVIL - Opción C (icono + texto, 100% ancho) */
@media (max-width: 768px) {
  #likeButton,
  #dislikeButton,
  #shareButton,
  #copyLinkButton {
    width: 100% !important;
    height: 60px !important;
    padding: 0 !important;
    gap: 0.6rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.5rem;
  }

  /* Iconos grandes */
  #likeButton .icon svg,
  #dislikeButton .icon svg,
  #shareButton .icon svg,
  #copyLinkButton .icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Texto visible y grande */
  #likeButton .label,
  #dislikeButton .label,
  #shareButton .label,
  #copyLinkButton .label {
    display: inline-flex !important;
    font-size: 1.05rem !important;
    align-items: center !important;
  }
}

/* ============================================================
   TOOLTIPS PARA BOTONES ESPECIALES
   ============================================================ */

#likeButton,
#dislikeButton,
#shareButton {
  position: relative !important;
  overflow: visible !important;
}

/* Tooltip base */
#notification,
#like_notification,
#dislike_notification {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  background-color: #fca131;
  color: #073769;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid rgba(7, 55, 105, 0.25);
  border-radius: 6px;
  padding: 4px 6px;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  width: auto;
  min-width: 5rem;
}

/* Flechita del tooltip */
#notification::after,
#like_notification::after,
#dislike_notification::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fca131 transparent transparent transparent;
}

/* Tooltip visible */
#notification.show,
#like_notification.show,
#dislike_notification.show {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
}

/* Modo claro para tooltip */
[data-md-color-scheme="default"] #notification,
[data-md-color-scheme="default"] #like_notification,
[data-md-color-scheme="default"] #dislike_notification {
  background-color: #fca131 !important;
  color: #073769 !important;
  border-color: rgba(7, 55, 105, 0.25) !important;
}

[data-md-color-scheme="default"] #notification::after,
[data-md-color-scheme="default"] #like_notification::after,
[data-md-color-scheme="default"] #dislike_notification::after {
  border-color: #fca131 transparent transparent transparent !important;
}

/* Modo oscuro para tooltip */
[data-md-color-scheme="slate"] #notification,
[data-md-color-scheme="slate"] #like_notification,
[data-md-color-scheme="slate"] #dislike_notification {
  background-color: #fca131 !important;
  color: #073769 !important;
  border-color: rgba(7, 55, 105, 0.35) !important;
}

[data-md-color-scheme="slate"] #notification::after,
[data-md-color-scheme="slate"] #like_notification::after,
[data-md-color-scheme="slate"] #dislike_notification::after {
  border-color: #fca131 transparent transparent transparent !important;
}

/* ============================================================
   11. TARJETAS DE INSTRUCCIÓN E ICONOS DE RATÓN
   ============================================================ */

.instruction-card {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border: 1px solid #013276;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 2px 4px rgba(33, 34, 109, 0.1);
  margin-left: 5px;
  font-size: 16px;
  line-height: 30px;
}

.instruction-card:hover {
  box-shadow: 0 4px 8px rgba(63, 64, 148, 0.5);
}

/* Iconos base */
.icon {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}

.text {
  font-size: 16px;
  margin-right: 5px;
  font-weight: bold;
  line-height: 30px;
}

/* Iconos a color */
.icon.color.click-izquierdo {
  background-image: url("../images/left-click-color.png");
}

.icon.color.click-derecho {
  background-image: url("../images/right-click-color.png");
}

.icon.color.arrastrar {
  background-image: url("../images/drag-color.png");
}

.icon.color.click-izquierdo-arrastrar {
  background-image: url("../images/left-click-drag-color.png");
}

.icon.color.click-derecho-arrastrar {
  background-image: url("../images/right-click-drag-color.png");
}

.icon.color.click-doble {
  background-image: url("../images/both-click-color.png");
}

.icon.color.click-rueda {
  background-image: url("../images/wheel-click-color.png");
}

/* Iconos monocromo */
.icon.bn {
  filter: invert(39%) sepia(18%) saturate(1542%) hue-rotate(181deg)
    brightness(90%) contrast(85%);
  opacity: 1;
}

.icon.bn.click-izquierdo {
  background-image: url("../images/left-click.png");
}

.icon.bn.click-izquierdo-arrastrar {
  background-image: url("../images/left-click-drag.png");
}

.icon.bn.click-derecho {
  background-image: url("../images/right-click.png");
}

.icon.bn.click-derecho-arrastrar {
  background-image: url("../images/right-click-drag.png");
}

.icon.bn.arrastrar {
  background-image: url("../images/drag.png");
}

.icon.bn.click-doble {
  background-image: url("../images/both-click.png");
}

.icon.bn.click-rueda {
  background-image: url("../images/wheel-click.png");
}

/* ============================================================
   12. BOTONES PERSONALIZADOS (TV / TUTORIALES)
   ============================================================ */

.boton_upo_tv {
  height: 100px !important;
  display: block;
  margin: 0 auto;
  background-color: #073769;
  border-radius: 10px;
  padding: 5px 5px;
}

.boton_upo_tutorial {
  height: 100px !important;
  display: block;
  margin: 0 auto;
  background-color: #013276;
  background-size: 100%;
  border-radius: 10px;
  padding: 5px 5px;
}

/* ============================================================
   13. IFRAMES RESPONSIVOS
   ============================================================ */

.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   14. EFECTO LIGHTBOX / GLIGHTBOX
   ============================================================ */

.mdx-lightbox img {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.mdx-lightbox img:hover {
  transform: scale(1.05);
}

.glightbox img {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border: 1px solid #013276;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(33, 34, 109, 0.1);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

/* ============================================================
   15. CAMPO CONTRASEÑA MKDOCS
   ============================================================ */

#mkdocs-content-password {
  width: 100%;
}

/* ============================================================
   16. ICONOS BLACKBOARD .bb-icon
   ============================================================ */

.bb-icon {
  background: transparent !important;
  color: inherit !important;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    color 0.2s ease,
    fill 0.2s ease,
    stroke 0.2s ease;
}

.bb-icon path,
.bb-icon circle,
.bb-icon rect,
.bb-icon polygon {
  stroke: currentColor;
  fill: none;
}

/* Iconos de relleno */
.bb-icon[fill*="currentColor"] path,
.bb-icon path[fill*="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
  opacity: 0.88;
}

/* Tamaños */
.bb-icon.xs {
  width: 0.75em;
  height: 0.75em;
}
.bb-icon.s {
  width: 1em;
  height: 1em;
}
.bb-icon.m {
  width: 1.25em;
  height: 1.25em;
}
.bb-icon.l {
  width: 1.5em;
  height: 1.5em;
}
.bb-icon.xl {
  width: 2em;
  height: 2em;
}

/* Herencia por contexto */
h1 .bb-icon,
h2 .bb-icon,
h3 .bb-icon,
h4 .bb-icon,
h5 .bb-icon,
h6 .bb-icon {
  color: inherit !important;
}

.grid.cards .bb-icon,
.md-typeset .bb-icon,
p .bb-icon,
strong .bb-icon,
li .bb-icon {
  color: inherit !important;
  fill: currentColor !important;
}

/* ============================================================
   17. PALETA UPO – MODO CLARO
   ============================================================ */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #013276;
  --md-primary-fg-color--light: #fca131;
  --md-primary-fg-color--lighter: #fcca85;
  --md-primary-fg-color--lightest: #fde6bd;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #f7f7f7;
  --md-primary-bg-color--lighter: #eeeeee;
  --md-primary-bg-color--lightest: #e0e0e0;

  --md-code-fg-color: #0f2b47;
  --md-code-bg-color: #f7f7f7;
  --md-code-hl-color: #013276;

  /* Protege estructura de Header y Footer */
  --md-default-fg-color--light: #17263b;

  color-scheme: light;
}

/* FORZAR AZUL UPO: Títulos, Negritas, Enlaces y Navegación lateral */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6,
[data-md-color-scheme="default"] .md-typeset strong,
[data-md-color-scheme="default"] .md-typeset b,
[data-md-color-scheme="default"] .md-typeset a:not(.md-button),
[data-md-color-scheme="default"] .md-nav__link,
[data-md-color-scheme="default"] .md-nav__title {
  color: #013276 !important;
}

/* TABLAS MODO CLARO: Texto blanco sobre fondo azul (Sección 5) */
[data-md-color-scheme="default"] .md-typeset table th {
  color: #ffffff !important;
}

/* ============================================================
   18. PALETA UPO – MODO OSCURO (SLATE)
   ============================================================ */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #013276;
  --md-primary-fg-color--light: #fca131;
  --md-typeset-color: #f0eee9;
  --md-typeset-a-color: #fca131;

  --md-header-fg-color: #fca131;
  --md-header-bg-color: #013276;

  --md-footer-bg-color: #1e1e1e;
  --md-footer-bg-color--dark: #2c2c2c;

  color-scheme: dark;
}

/* FORZAR AMARILLO: Header, Navegación, Títulos y Texto de Tablas (Oscuro) */
[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-tabs__link,
[data-md-color-scheme="slate"] .md-nav__link,
[data-md-color-scheme="slate"] .md-nav__title,
[data-md-color-scheme="slate"] .md-ellipsis,
[data-md-color-scheme="slate"] .md-search__icon,
[data-md-color-scheme="slate"] .md-search__input::placeholder,
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6,
[data-md-color-scheme="slate"] .md-typeset strong,
[data-md-color-scheme="slate"] .md-typeset b,
[data-md-color-scheme="slate"] .md-typeset table th {
  color: #fca131 !important;
}

/* ============================================================
   19. FOOTER PERSONALIZADO (RESTRICTO)
   ============================================================ */

.md-footer .md-copyright {
  visibility: hidden;
  position: relative;
}

.md-footer .md-copyright::before {
  content: "Universidad Pablo de Olavide - Centro de Informática y Comunicaciones";
  visibility: visible;
  font-weight: bold;
  font-size: 0.64rem;
  margin: auto 0.6rem;
  padding: 0.4rem 0;
  width: 100%;
  position: relative;
  color: #bcbcbc;
}

/* Footer Amarillo en modo oscuro */
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer .md-copyright::before,
[data-md-color-scheme="slate"] .md-footer__title .md-footer__direction,
[data-md-color-scheme="slate"] .md-footer__title .md-ellipsis,
[data-md-color-scheme="slate"] .md-footer .md-icon {
  color: #fca131 !important;
  fill: #fca131 !important;
}

/* ============================================================
   20. ICONOS BB Y BOTONES
   ============================================================ */

[data-md-color-scheme="default"] .bb-icon {
  color: currentColor !important;
}

[data-md-color-scheme="slate"] .bb-icon {
  color: #fca131 !important;
  fill: #fca131 !important;
  stroke: #fca131 !important;
}

/* Sincronización de hover en botones especiales (modo oscuro) */
[data-md-color-scheme="slate"] #likeButton:hover .icon svg,
[data-md-color-scheme="slate"] #dislikeButton:hover .icon svg,
[data-md-color-scheme="slate"] #shareButton:hover .icon svg,
[data-md-color-scheme="slate"] #copyLinkButton:hover .icon svg {
  color: #013276 !important;
  fill: #013276 !important;
}

/* ============================================================
   COLOR UPO PARA ICONOS EN GRID CARDS (twemoji)
   ============================================================ */

/* Modo claro */
[data-md-color-scheme="default"] .grid.cards .twemoji {
  color: #013276 !important;
}

/* Modo oscuro */
[data-md-color-scheme="slate"] .grid.cards .twemoji {
  color: #fca131 !important;
}

.kaltura-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* clave */
  background: #ffffff; /* por si hay “flash” de carga */
}
.kaltura-wrap > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.kaltura-wrap > ul,
.kaltura-wrap > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}