/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Contenedor principal */
.contenedor-TyC {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* Evita que la pantalla completa haga scroll */
}



/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Bloque de información para dar elementos */

/* Bloque de información */
.informacion-bloque {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 30px 0 30px;
  box-sizing: border-box;
}

/* ============================================== */
.informacion-bloque .imagenDescriptiva {
  width: 30%;
}

.informacion-bloque .textoDesarrollo {
  width: 70%;
}

/* ============================================== */
.informacion-bloque .formulasResoluciones {
  width: 80%;
}

.informacion-bloque .formulasAbreviaturas {
  width: 20%;
}

/* ============================================== */
.informacion-bloque .explicacionFormula {
  width: 50%;
}

.informacion-bloque .formulaMostrada {
  width: auto;
}

/* ============================================== */
.informacion-bloque .contenedor-video {
  width: 70%;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* TÍTULO DE CATEGORÍA */
.tituloCategoria {
  display: block;

  width: fit-content;
  max-width: 95%;

  margin: 15px auto 15px auto;

  padding: clamp(5px, 0.8vw, 8px) clamp(12px, 1.8vw, 18px) clamp(5px, 0.8vw, 8px) clamp(12px, 1.8vw, 18px);

  font-size: clamp(14px, 1.2vw, 20px);
  font-family: "Gill Sans", "Segoe UI", "Calibri", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;

  color: #ffffff;

  border-radius: 10px;

  box-shadow:
    0 3px 8px rgba(37, 99px, 235, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.1);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Temas */
.t {
  background: linear-gradient(135deg, #2563eb, #1e40af, #172554);
}

.t:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.28),
    0 3px 6px rgba(0, 0, 0, 0.14);
}

/* Cursos */
.c {
  background: linear-gradient(135deg, #16a34a, #15803d, #14532d);
}

.c:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 12px rgba(22, 163, 74, 0.28),
    0 3px 6px rgba(0, 0, 0, 0.14);
}

/* Estilos de título principal */

.tituloTema {
  cursor: pointer;
  transition: 0.3s ease;
  /* suaviza el cambio */
  padding: 5px 15px;
  border-radius: 10px;
}

/* Estado seleccionado */
.tituloTema.activo {
  background-color: red;
  /* color de fondo al seleccionar */
  color: white;
  font-weight: bold;
}

.tituloCurso {
  background-color: green;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
}

/* ||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||| */

/* ||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||| */

/* ||||||||||||||||||||||||||||||||||| */
/* Elementos de abreviaturas y valores */
.formulasAbreviaturas p {
  text-align: right;
  color: rgb(71, 66, 66);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-top: auto;
  font-size: clamp(12px, 1.2vw, 22px);
}

.formulasAbreviaturas span {
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
}

/* Elementos resaltados */
.resaltado {
  color: blue;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Estilos para fórmulas en pantalla */
.formula-matematica {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
  width: auto;
  font-family: "Cambria Math", "Times New Roman", serif;
  gap: clamp(0.2rem, 1vw, 0.5rem);
  line-height: 1.2;
  padding: 8px 2%;
  font-size: clamp(18px, 2vw, 28px);
}

/* Variables matemáticas */
.formula-matematica .variable {
  font-style: italic;
  color: rgb(0, 0, 155);
}

/* Operadores */
.formula-matematica .operador {
  font-weight: normal;
  color: red;
}

/* Subíndices bien proporcionados */
.formula-matematica sub {
  font-size: 0.85em;
  vertical-align: -0.2em;
}

/* Raíz cuadrada */
.raiz {
  display: inline-flex;
  align-items: flex-start;
}

/* Signo √ */
.raiz .signo {
  font-size: 1.2em;
  line-height: 1.3;
  margin-right: 0.1em;
  /* separación mínima */
}

/* Radicando */
.raiz .radicando {
  position: relative;
  padding-top: 0.18em;
}

/* Barra superior: inicia al final del √ */
.raiz .radicando::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3.2px;
  /* clave: NO negativo */
  width: 100%;
  border-top: 2px solid currentColor;
}

/* Fracciones */
.fraccion sup {
  font-size: 0.7em;
  vertical-align: 0.4em;
}

.fraccion sub {
  font-size: 0.7em;
  vertical-align: -0.4em;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


/* ||||||||||||||||||||||||||||||||||||||||||| */
/* Pestañas */
/* CONTENEDOR GENERAL */
.pestanas-container {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/* ===== BOTONES DE PESTAÑAS ===== */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  /* ← CLAVE: permite varias filas */
  gap: 5px;
  justify-content: center;
  /* centrados como la imagen */
  padding: 3px 5px;
  background: #f5f5f5;
}

/* BOTÓN */
.tab-btn {
  background: #f0ebeb;
  color: rgb(60, 60, 132);
  border: none;
  padding: 8px 12px;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  cursor: pointer;
  transition: 0.25s;
  white-space: nowrap;
  flex: 0 1 auto;
}

/* Hover */
.tab-btn:hover {
  background: #b9b5b5;
}

/* Activo */
.tab-btn.activo {
  background: #36c394;
  /* verde como la imagen */
  color: white;
}

/* ===== CONTENIDO DE PESTAÑAS ===== */
.tab-contenido {
  display: none;
  background: white;
  padding: 3px;
  border: 1px solid #ddd;
  margin-top: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tab-contenido.activo {
  display: flex;
}

/* =========================================
   FLECHAS
========================================= */
.flecha {
  display: block;
  position: absolute;
  z-index: 5;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flecha.izquierda {
  left: 5px;
}

.flecha.derecha {
  right: 5px;
}

/* En bloque horizontal */
/* VIDEO */
.tab-contenido .contenedor-video {
  flex: 1 1 40%;
}

/* TEXTO */
.tab-contenido .informacion {
  flex: 1 1 50%;
  padding-left: 15px;
}

/* IMAGEN */
.tab-contenido img {
  flex: 1 1 40%;
  max-width: 50%;
}

/* CARRUSEL DE IMAGENES */
.tab-contenido .carrusel {
  flex: 1 1 40%;
}

.tab-contenido .carrusel img {
  max-width: 95%;
}

/* BOTON DE DESCARGA */
.tab-contenido .bloqueDescargas {
  flex: 1 1 50%;
}

/* ||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||| */
/* SOLO afecta imágenes dentro de pestanas */
/* Usarse cuando la imagen es muy pequeña y queremos que se amplíe al ancho del contenedor */
.imagen-tab-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.imagen-tab-wrapper img {
  width: min(100%, 1100px);
  height: auto;
  display: block;
}

/* =========================
   SECCIÓN DE PREVISUALIZACIÓN
   ========================= */
/* Audio responsive */
.audioDescarga {
  width: 100%;
  max-width: 420px;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/* =========================
   SECCIÓN DE DESCARGA
   ========================= */
.bloqueDescargas {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 25px auto;
  padding: 15px;
  max-width: 500px;
  gap: 5px;
}

/* Título del archivo */
.bloqueDescargas span {
  font-size: 1rem;
  font-weight: 700;
  color: #5229c3;
}

.bloqueDescargas a {
  align-self: center;
  width: fit-content;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
  transition: all 0.2s ease-in-out;
}

.bloqueDescargas p {
  font-size: 0.9rem;
  color: #e2783f;
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Efecto hover */
.bloqueDescargas a:hover {
  transform: translateY(-3px);

  background: linear-gradient(135deg,
      #007bff,
      #00b894,
      #007bff);

  background-size: 200% 200%;
  animation: brillo 3s ease infinite;

  box-shadow:
    0 0 8px rgba(0, 123, 255, 0.4),
    0 0 16px rgba(0, 184, 148, 0.3);
}

@keyframes brillo {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Color para los botones */
/* Gradiente azul */
.botonAzul a {
  background: linear-gradient(135deg, #007bff, #0056b3);
}

/* Gradiente rojo */
.botonRojo a {
  background: linear-gradient(135deg, #dc3545, #b02a37);
}

/* Gradiente rojo */
.botonVerde a {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/* ======== VENTANA FLOTANTE (MODAL) ======== */
.modal-imagen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
}

/* Imagen ampliada al ancho de pantalla */
.imagen-modal {
  width: auto;
  max-width: 1200px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Pequeña pista visual de que es clicable */
.imagen-ampliable {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.imagen-ampliable:hover {
  transform: scale(1.01);
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ================================================== */
/* CARRUSEL DE IMAGENES */
/* ================================================== */
/*===== CONTENEDOR =====*/
.carrusel {
  position: relative;
  width: 95%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
}

/*===== PISTA DEL CARRUSEL =====*/
.carrusel>div:first-child {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

/*===== ITEM =====*/
.carrusel>div:first-child>div {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*===== CONTENEDOR DE TEXTO =====*/
.carrusel>div:first-child>div p {
  padding: 0 80px 0 0;
}

/*===== CONTENEDOR DE BOTONES =====*/
.carrusel>div:last-child {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

/*===== BOTONES =====*/
.carrusel>div:last-child>button {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  border: none;
  padding: 10px 14px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 10px;
  transition: background 0.3s;
}

.carrusel>div:last-child>button:hover {
  background: rgba(0, 0, 0, 0.7);
}

/*===== IMÁGENES =====*/
.carrusel img {
  display: block;
  width: 100%;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Lista de elementos */
.listaElementos {
  margin: 0;
  padding-left: 5px;
  max-width: 100%;
}

.listaElementos li {
  position: relative;
  padding-left: 15px;
  /* espacio para viñeta */
  text-indent: 0;
  margin-bottom: 0.5rem;
  line-height: 1;
}

/* viñeta personalizada elegante */
.listaElementos li::before {
  content: "–";
  /* puedes cambiar a • ✓ ▸ */
  position: absolute;
  left: 0;
  top: 0;
  color: #2c3e50;
  font-weight: bold;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Imagen ampliada al ancho de pantalla */
.imagen-modal {
  width: 60%;
}

/* Boton para activar una App Web */
.enlaceAppWeb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 14px) clamp(18px, 4vw, 28px);
  border: none;
  border-radius: 12px;
  background: #4e36c3;
  color: white;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  width: fit-content;
  max-width: 100%;
  /* ESPACIO */
  margin-top: 18px;
  margin-bottom: 18px;

  /* CENTRAR */
  margin-left: auto;
  margin-right: auto;
}

.enlaceAppWeb:hover {
  transform: translateY(-2px);
  background: #7460d6;
}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */
/* PARA LAPTOPS Y PANTALLAS GRANDES */
@media screen and (min-width: 1025px) {}

/*
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  */
/* PARA TABLETAS Y DISPOSITIVOS DE TAMAÑO MEDIO */
@media (min-width: 768px) and (max-width: 1024px) {}

/*░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░*/

/* PARA DISPOSITIVOS MOVILES Y PANTALLAS PEQUEÑAS */
@media (max-width: 767px) {

  /* ////////////////////////////////////////////////////////////////////////////////// */
  /* Contenedor principal en vertical */
  .contenedor-TyC {
    flex-direction: column;
  }



  /* ////////////////////////////////////////////////////////////////////////////////// */
  /* Bloque de información para elementos */
  .informacion-bloque {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 5px 0;
  }

  /* ============================================== */
  .informacion-bloque .imagenDescriptiva {
    width: 50%;
    margin: auto;
    padding-bottom: 20px;
  }

  .informacion-bloque .textoDesarrollo {
    width: 100%;
  }

  /* ============================================== */
  .informacion-bloque .formulasResoluciones {
    width: 90%;
    margin: auto;
  }

  .informacion-bloque .formulasAbreviaturas {
    padding-top: 14px;
    width: 95%;
    text-align: right;
  }

  /* ============================================== */
  .informacion-bloque .explicacionFormula,
  .informacion-bloque .formulaMostrada {
    width: 100%;
  }

  .informacion-bloque .explicacionFormula .informacion {
    text-align: center;
  }

  /* ============================================== */
  .informacion-bloque .contenedor-video {
    width: 90%;
  }

  /* ============================================== */

  /* Signo y linea del signo para la raiz √ */
  .raiz .signo {
    font-size: 1.2em;
    line-height: 1;
    margin-right: 0.16em;
    /* separación mínima */
  }

  /* ============================================== */
  .separador-contenido {
    margin: 30px 0 0 0;
  }

  .tituloCategoria::after {
    content: " ▼";
    font-size: 0.7em;
    margin-left: 6px;
    line-height: 1;
  }



  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  /* Contenido de pestañas para móviles */
  .tab-contenido {
    flex-direction: column;
    align-items: center;
  }

  /* VIDEO */
  .tab-contenido .contenedor-video {
    flex: none;
    width: 90%;
  }

  /* TEXTO */
  .tab-contenido .informacion {
    flex: none;
    width: 90%;
    padding: 0;
    margin: 0 auto 25px auto;
  }

  /* IMAGEN */
  .tab-contenido img {
    flex: none;
    max-width: 90% !important;
  }

  /* ================================================== */
  /* CARRUSEL DE IMAGENES */
  /* ================================================== */
  /*===== CONTENEDOR =====*/
  .carrusel>div:first-child>div {
    display: block;
  }

  .carrusel>div:first-child>div p {
    padding: 20px 0 0 30px;
  }

  /* CARRUSEL DE IMAGENES */
  .tab-contenido .carrusel {
    flex: none;
    width: 100%;
  }

  /* BOTON DE DESCARGA */
  .tab-contenido .bloqueDescargas {
    flex: none;
    width: 70%;
  }

  /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
  /* CONTENEDOR GENERAL */
  .pestanas {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;

    /* ESPACIO PARA LAS FLECHAS */
    padding-left: 45px;
    padding-right: 45px;
    box-sizing: border-box;
  }

  /* ocultar scrollbar */
  .pestanas::-webkit-scrollbar {
    display: none;
  }

  /* botones */
  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}