/* ==========================================================================
   Responsive Custom Styles - Módulos 1 y 2
   - Preservación del Menú Lateral (.side-nav) idéntico al original
   - Reducción de Espacio Blanco entre Imagen y Texto (Imágenes a la izquierda más juntas)
   - Respeto de Diagramas e Infografías Completas (2-2-3, 2-7-1, 2-8-2) sin Recortes
   ========================================================================== */

/* 1. Contenedor Principal Fluido */
.main-content > .container-fluid,
.main-content > .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

@media (min-width: 1600px) {
  .main-content > .container-fluid,
  .main-content > .container {
    max-width: 1450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2. Preservar Menú Lateral (.side-nav) Exactamente como Antes */
.side-nav,
.side-nav-inner,
.side-nav-menu,
.side-nav-menu li,
.side-nav-menu li a {
  margin-bottom: 0 !important;
  line-height: normal !important;
}

.side-nav .side-nav-inner .side-nav-menu > li > a {
  padding: 10px 15px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* 3. Tarjetas Principales de Contenido */
.card {
  width: 100% !important;
  margin-bottom: 15px !important;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

/* 4. Tarjetas Interactivas y Modales (Flip-Cards) */
.styleCards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 15px 0 !important;
}

.styleCards .card,
.styleCards .card-space,
.card-space {
  flex: 0 0 215px !important;
  width: 215px !important;
  max-width: 215px !important;
  height: 255px !important;
  margin: 8px !important;
  box-shadow: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.flip-card-title,
.styleCards .card-space .flip-card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  background-color: #093b8b !important;
  color: #ffffff !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

.styleCards .card-space .flip-card,
.styleCards .card-space .flip-card-front,
.styleCards .card-space .flip-card-inner {
  width: 215px !important;
  height: 200px !important;
  margin: 0 auto !important;
  background-color: #ffffff !important;
}

.styleCards .card-space .flip-card img,
.styleCards .card-space .flip-card-front img,
.styleCards .card-space .imgFlip {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* 5. Posicionamiento Ajustado de Imágenes Laterales (Junto al texto, sin vacíos blancos) */
.card .card-horizon {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  min-height: auto !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  .card .card-horizon {
    align-items: center !important;
    min-height: 260px !important;
  }

  .card-horizon .col-md-7,
  .card-horizon .col-md-8,
  .card-horizon .pdd-vertical-30 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .card .card-horizon > .image-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Caso A: Imagen a la Izquierda (Alineada más cerca del texto) */
  .card .card-horizon > .image-container:not([style*="right"]):not([style*="RIGHT"]) {
    left: 0 !important;
    right: auto !important;
    width: 37% !important;
  }

  .card .card-horizon > .image-container:not([style*="right"]) ~ .container-fluid .col-md-8.ml-auto,
  .card .card-horizon > .image-container:not([style*="right"]) ~ .container-fluid .col-md-7.ml-auto,
  .card .card-horizon > .image-container:not([style*="right"]) ~ .container-fluid .col-md-8,
  .card .card-horizon > .image-container:not([style*="right"]) ~ .container-fluid .col-md-7 {
    margin-left: 37% !important;
    margin-right: 0 !important;
    max-width: 63% !important;
    flex: 0 0 63% !important;
    padding-left: 14px !important;
  }

  /* Caso B: Imagen a la DERECHA */
  .card .card-horizon > .image-container[style*="right"],
  .card .card-horizon > .image-container[style*="RIGHT"] {
    right: 0 !important;
    left: auto !important;
    width: 37% !important;
  }

  .card .card-horizon > .image-container[style*="right"] ~ .container-fluid .col-md-8,
  .card .card-horizon > .image-container[style*="RIGHT"] ~ .container-fluid .col-md-8,
  .card .card-horizon > .image-container[style*="right"] ~ .container-fluid .col-md-7,
  .card .card-horizon > .image-container[style*="RIGHT"] ~ .container-fluid .col-md-7 {
    margin-right: 37% !important;
    margin-left: 0 !important;
    max-width: 63% !important;
    flex: 0 0 63% !important;
    padding-right: 20px !important;
  }

  /* Imágenes tipo fotografía (Cubrir tarjeta) */
  .card .card-horizon > .image-container .background-holder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Diagramas e Infografías (2-2-3, 2-7-1, 2-8-2) COMPLETOS SIN RECORTES */
  .card .card-horizon > .image-container .background-holder[style*="100%"],
  .card .card-horizon > .image-container .background-holder[style*="contain"],
  .card .card-horizon > .image-container[style*="background-color"] .background-holder {
    background-size: contain !important;
    background-color: #ffffff !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* Ajuste para imágenes <img> dentro de tarjetas de contenido */
.card-horizon img:not(.imgFlip) {
  max-width: 100% !important;
  height: auto !important;
  max-height: 360px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

@media (max-width: 767.98px) {
  .card .card-horizon > .image-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    left: 0 !important;
    right: 0 !important;
  }

  .card .card-horizon > .image-container .background-holder {
    min-height: 200px !important;
  }

  .card .card-horizon > .image-container ~ .container-fluid .col-md-8,
  .card .card-horizon > .image-container ~ .container-fluid .col-md-7 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* 6. Tipografía Cómoda */
body {
  font-size: 1.05rem;
  line-height: 1.6;
}

.main-content p,
.main-content li,
.tabContent > p {
  font-size: clamp(1.02rem, 1.15vw, 1.15rem) !important;
  line-height: 1.65 !important;
  margin-bottom: 0.85rem;
}

.main-content p:last-child {
  margin-bottom: 0 !important;
}

h1:not(.feed-title):not(.flip-card-title),
.h1:not(.feed-title):not(.flip-card-title),
.card-title:not(.feed-title):not(.flip-card-title) {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem) !important;
  line-height: 1.35 !important;
  margin-bottom: 0.6rem !important;
  font-weight: 700 !important;
}

h2:not(.flip-card-title), .h2:not(.flip-card-title) {
  font-size: clamp(1.15rem, 1.4vw, 1.45rem) !important;
}

h3:not(.flip-card-title), .h3:not(.flip-card-title) {
  font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important;
}

p, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Badges "Tema X" */
.tema-n,
.badge-light.tema-n,
.badge.tema-n {
  font-size: clamp(0.95rem, 1.15vw, 1.15rem) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

.tag,
.badge,
.feed-title {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

.feed-title.tag,
h1.feed-title {
  font-size: 13px !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
  width: auto !important;
}

/* Limpieza de Actividad 2 */
.optionsImgs label {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  padding: 5px !important;
  border-radius: 6px !important;
}

.optionsImgs label img {
  max-height: 90px;
  object-fit: contain;
  margin-bottom: 6px;
}

/* 7. Botones "REVISAR" y "ADELANTE" */
.button-container,
.submitbutton,
.text-center:has(> .btn-custom-outline),
.text-center:has(> .btn-check-custom),
.text-center:has(> #verify) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 18px auto !important;
}

html body .btn-custom-outline,
html body a.btn-custom-outline,
html body button.btn-custom-outline,
html body a.button,
html body button.button,
html body .btn-check-custom,
html body #verify,
html body #checkBtn,
html body #btnRevisar,
html body button[onclick*="check"],
html body button[id*="verify"],
html body .button-container > a,
html body .button-container > button {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #004085 !important;
  border: 2px solid #004085 !important;
  border-radius: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 34px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 10px auto !important;
  text-decoration: none !important;
  min-width: 160px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

html body .btn-custom-outline:hover,
html body .btn-custom-outline:focus,
html body a.btn-custom-outline:hover,
html body a.btn-custom-outline:focus,
html body button.btn-custom-outline:hover,
html body button.btn-custom-outline:focus,
html body a.button:hover,
html body a.button:focus,
html body button.button:hover,
html body .btn-check-custom:hover,
html body .btn-check-custom:focus,
html body #verify:hover,
html body #verify:focus,
html body #checkBtn:hover,
html body #btnRevisar:hover,
html body .button-container > a:hover {
  background: #004085 !important;
  background-color: #004085 !important;
  color: #ffffff !important;
  border-color: #004085 !important;
  box-shadow: 0 4px 12px rgba(0, 64, 133, 0.25) !important;
  text-decoration: none !important;
}

/* Espaciados Verticales */
.pdd-vertical-30 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.pdd-horizon-25 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.mrg-btm-20, .mrg-btm-30 {
  margin-bottom: 10px !important;
}

.widget-feed {
  padding: 14px 24px !important;
  margin-top: 10px !important;
}