/* ===========================
   TIPDDY · Estilos de Lecciones
   Encapsulados bajo .leccion-tipddy
   =========================== */

   
  /* Fondo principal de las flashcards H5P */
  button.h5p-joubelui-button {
     background-color: #225148 !important;
     border-color: #19A686 !important;
     
  } 
  
   .h5p-container .h5p-flashcards.h5p-standalone {
     background-color: #225148 !important;
   }
   
   /* Opcional: también el reverso de las cartas */
   .h5p-container .h5p-flashcards.h5p-standalone .h5p-card {
     background-color: #225148 !important;
   }  



   .leccion-tipddy {
    --immune-bg:#0f2339;
    --immune-teal:#2fd4c0;
    --immune-mint:#3ce2d0;
    --immune-gray:#eef2f6;
    --immune-dark:#0b1a2b;
  
  
  
    --immune-light-green:#33D9BE;
    --immune-light-green-semi:#19A686;
    --immune-light-green-dark:#225148;
    --immune-deep-teal:#00424a;
    --immune-ocean-depths:#006D7B;
    --immune-intermedio:#0998aa;
    --immune-light:#F2F2F2;
    --immune-medium:#C2C2C2;
    --immune-dark:#333333;
  
    --text:#0d1b2a;
    max-width:1080px;
    margin:0 auto;
    padding:22px;
     /*font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
  }
  
  /* Ajustes de contraste para títulos dentro del hero */
  .leccion-tipddy .hero h1,
  .leccion-tipddy .hero h2,
  .leccion-tipddy .hero h3 {
    color: #ffffff;              /* texto blanco */
    text-shadow: 0 2px 4px rgba(0,0,0,0.4); /* sombra suave para contraste */
    font-weight: 700;            /* un poco más grueso */
  }
  
  
  
  /* Hero / Portada */
  .leccion-tipddy .hero{
    background:
      radial-gradient(1200px 400px at 20% 10%, rgba(63,226,208,.18), transparent),
      linear-gradient(135deg, var(--immune-bg), #182e4b 60%, #1d3b63);
    border-radius:20px;
    color:var(--immune-light);
    padding:48px 32px;
    margin:8px 0 24px;
  }
  .leccion-tipddy .hero-card{
    background:
      radial-gradient(1200px 400px at 20% 10%, #0997aa35, transparent),
      linear-gradient(135deg, var(--immune-deep-teal), #00292e 85%, #003c44) !important;
    border-radius:20px;
    color:var(--immune-light) !important;
  
  }
  .leccion-tipddy .hero-card {
    background:#2fd4c026;
    color:#b6fff4 !important;
    border:1px solid rgba(60,226,208,.45) !important;
  }
  .leccion-tipddy .hero-card p{opacity:.95;}
  
  .leccion-tipddy .hero .kicker{
    display:inline-block;padding:6px 12px;border-radius:999px;background:#2fd4c026;
    color:#b6fff4;font-weight:600;border:1px solid rgba(60,226,208,.45);margin-bottom:12px
  }
  .leccion-tipddy .hero h1{margin:0 0 10px;font-size:40px;letter-spacing:.3px}
  .leccion-tipddy .hero p{margin:0;opacity:.95;max-width:720px}
  
  /* Secciones y tipografía */
  .leccion-tipddy h1,.leccion-tipddy h2,.leccion-tipddy h3{color:#0c354f}
  .leccion-tipddy .lead{font-size:17px;line-height:1.65;color:#12263a}
  .leccion-tipddy .lead-card{font-size:17px;line-height:1.65;color:var(--immune-light) !important}
  .leccion-tipddy .small{font-size:13px;color:#475569}
  .leccion-tipddy .section{
    background:#fff;border:1px solid #e6edf5;border-radius:18px;padding:22px;margin:16px 0;
    box-shadow:0 6px 24px rgba(16,24,40,.04)
  }
  
  /* Grid + Cards */
  .leccion-tipddy .grid{display:grid;gap:16px}
  .leccion-tipddy .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leccion-tipddy .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .leccion-tipddy .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .leccion-tipddy .card{
    border:1px solid #e7eef7;border-radius:16px;background:#fff;padding:18px;
    transition:transform .15s ease, box-shadow .15s ease
  }
  .leccion-tipddy .card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,35,57,.08)}
  .leccion-tipddy .badge{
    display:inline-block;background:#e9fcf9;border:1px solid #baf4ea;color:#0b7e73;font-weight:600;
    border-radius:999px;padding:4px 10px;font-size:12px
  }
  .leccion-tipddy .list{margin:0 0 0 18px}
  
  /* Botones (opcionales) */
  .leccion-tipddy .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
  .leccion-tipddy .btn{
    display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:600;
    border:1px solid #dfe7f1;background:#fff;color:#0b2744;text-decoration:none
  }
  .leccion-tipddy .btn.primary{background:linear-gradient(180deg,#3ce2d0,#2fd4c0);color:#00333b;border:0}
  
  /* Llamados y actividades (Genially) */
  .leccion-tipddy .activity-slot{
    border:2px dashed #c6cfda;background:#f6f8fb;border-radius:14px;padding:16px;margin:12px 0;
    color:#445268;font-size:14px
  }
  .leccion-tipddy blockquote{
    margin:0;padding:12px 14px;background:var(--immune-gray);
    border-left:4px solid #3ce2d0;border-radius:8px
  }
  
  /* Utilidades */
  .leccion-tipddy .tip{background:#f7fff7;border:1px solid #bde5c3;border-radius:12px;padding:12px;color:#235d33}
  
  
  /* SOLO botones dentro de una Lección */
  body.path-mod-lesson .branchbuttoncontainer {
    display: flex;
    justify-content: flex-end; /* alinea a la derecha */
  }
  
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="submit"],
  body.path-mod-lesson .branchbuttoncontainer .singlebutton button,
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="button"] {
    background: linear-gradient(180deg, #3ce2d0, #2fd4c0); /* verde IMMUNE */
    color: #00333b;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease-in-out;
  }
  
  /* Hover */
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="submit"]:hover,
  body.path-mod-lesson .branchbuttoncontainer .singlebutton button:hover,
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="button"]:hover {
    background: linear-gradient(180deg, #2fd4c0, #25bba4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  }
  
  /* Focus accesible */
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="submit"]:focus,
  body.path-mod-lesson .branchbuttoncontainer .singlebutton button:focus,
  body.path-mod-lesson .branchbuttoncontainer .singlebutton input[type="button"]:focus {
    outline: 3px solid #baf4ea;
    outline-offset: 2px;
  }
  /* SOLO títulos generados arriba en las páginas de Lección */
  /* body.path-mod-lesson h3 {
    font-size: 2.46rem !important;
    font-weight: 700 !important;
    color: #0c354f !important;
    margin: 0 0 1rem 0;
      font-size: 18px;
  } */
  
  .leccion-tipddy h2 {
    font-size: 34px;
  }
  
  /* Franja verde institucional */
  .leccion-tipddy .franja-verde {
    background: var(--immune-light-green);         /* verde IMMUNE */
    padding: 18px 24px;
    border-radius: 0;            /* bordes rectos */
    margin: 24px 0;
    text-align: center;
  }
  
  .leccion-tipddy .franja-verde h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b1a2b;              /* texto oscuro para contraste */
  }
  
  /* Subtítulos verdes personalizados */
  .leccion-tipddy h3.subtitulo-verde {
    color: var(--immune-light-green) !important;       /* Verde institucional */
    font-size: 2rem !important;
    font-weight: 700;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }
  
  /* Layout sensible en móviles */
  .leccion-tipddy .cards-4 { gap: 18px; }
  @media (max-width: 820px){
    .leccion-tipddy .cards-4 { grid-template-columns: 1fr; }
  }
  
  /* Tarjeta clicable y limpia */
  .leccion-tipddy .card-link { text-decoration: none; color: inherit; display: block; }
  
  /* Número tipo "pill" superior */
  .leccion-tipddy .card .card-num{
    display:inline-block;
    background:#e9fcf9;
    border:1px solid #baf4ea;
    color:#0b7e73;
    font-weight:700;
    border-radius:999px;
    padding:6px 14px;
    margin-bottom:10px;
  }
  
  /* Afinado visual de las tarjetas del índice */
  .leccion-tipddy .cards-4 .card{
    padding:20px 22px;
    border-radius:18px;
  }
  .leccion-tipddy .cards-4 .card h3{
    margin-top:4px;
    margin-bottom:10px;
    color:#0c354f;
  }
  .leccion-tipddy .cards-4 .card ul li{ margin:6px 0; }
  
  
  
  .leccion-tipddy .grid.cards-2 {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 24px;
  }
  
  .leccion-tipddy .grid.cards-2 .card {
      background: #fcfdff;
      border: 1px solid #e9eef5 !important;
      border-radius: 20px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .leccion-tipddy .grid.cards-2 .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(15, 35, 57, 0.09);
  }
  
  .leccion-tipddy .grid.cards-2 .card h3 {
      font-size: 1.25rem;
      color: #0c354f;
      margin-top: 12px;
      margin-bottom: 12px;
      font-weight: 700;
  }
  
  .leccion-tipddy .grid.cards-2 .card .list {
      padding-left: 20px;
      margin: 0;
      color: #3a4e63;
      flex-grow: 1;
  }
  
  .leccion-tipddy .grid.cards-2 .card .list li {
      margin-bottom: 8px;
      line-height: 1.5;
  }
  
  .leccion-tipddy .grid.cards-2 .card .card-num {
      font-size: 1rem;
      font-weight: 700;
      background-color: var(--immune-light-green);
      color: var(--immune-dark);
      border: none;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      padding: 0;
  }
  
  .leccion-tipddy .grid.cols-2-tipddy {
      grid-template-columns: repeat(2, 1fr);
      gap: 64px 42px;
  }
  
  .leccion-tipddy .grid.cols-2-tipddy h3 {
      text-align: center;
  }
  
  @media (max-width: 768px) {
      .leccion-tipddy .grid.cols-2-tipddy {
          grid-template-columns: 1fr;
      }
  }
  
  .leccion-tipddy .code-container {
      background-color: #F0F0F0;
      color: #121212;
      font-family: monospace, 'Courier New';
      font-size: 16px;
    font-weight: 500;
      padding: 20px;
      border-radius: 8px;
      overflow-x: auto;
      letter-spacing: 1.2;
      line-height: 150%;
      gap: 0px;
      border: 1px solid #e6edf5;
  }
  
  .leccion-tipddy .code-container .keyword {
      color: var(--immune-light-green-semi);
      font-weight: bold;
  }
  
  .leccion-tipddy .code-container .string {
      color: #d69d85;
  }
  
  .leccion-tipddy .code-container .comment {
      color: #888484;
      font-style: italic;
  }
  
  .leccion-tipddy .collapsible {
      /* border-bottom: 1px solid #888585; */
      margin: 1em 0;
      /* padding: 0.5em; */
  }
  
  .leccion-tipddy .collapsible summary {
      position: relative;
      padding-right: 2rem;
      cursor: pointer;
      list-style: none;
  }
  
  .leccion-tipddy .collapsible summary::after {
      content: "";
      position: absolute;
      right: 0.5em;
      top: 14px;
      transform: translateY(-50%) rotate(0deg);
      width: 32px;
      height: 32px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23747474'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      transition: transform 0.3s ease;
  }
  
  .leccion-tipddy .collapsible[open] summary::after {
      transform: translateY(-50%) rotate(90deg);
  }
  
  .leccion-tipddy .grid.cols-2-video {
      grid-template-columns: repeat(2, 1fr);
  }
  .leccion-tipddy .grid.cols-2-video h3 {
      text-align: center;
  }
  @media (max-width: 768px) {
      .leccion-tipddy .grid.cols-2-video {
          grid-template-columns: 1fr;
      }
  }
  
  
  /* --- NUEVOS ESTILOS PARA ÍNDICE DE CONTENIDOS --- */
  .leccion-tipddy .grid.cards-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }
  
  .leccion-tipddy .grid.cards-3 .card {
    background: #fcfdff;
    border: 1px solid #e9eef5 !important;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .leccion-tipddy .grid.cards-3 .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 35, 57, 0.09);
  }
  
  .leccion-tipddy .grid.cards-3 .card h3 {
    font-size: 1.25rem;
    color: #0c354f;
    margin-top: 12px;
    margin-bottom: 12px;
    font-weight: 700;
  }
  
  .leccion-tipddy .grid.cards-3 .card .list {
    padding-left: 20px;
    margin: 0;
    color: #3a4e63;
    flex-grow: 1;
  }
  
  .leccion-tipddy .grid.cards-3 .card .list li {
    margin-bottom: 8px;
    line-height: 1.5;
  }
  
  .leccion-tipddy .grid.cards-3 .card .card-num {
    font-size: 1rem;
    font-weight: 700;
    background-color: var(--immune-light-green);
    color: var(--immune-dark);
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
  }
  /* --- FIN DE NUEVOS ESTILOS --- */
  
  
  /* boton checkbox para cargar iframe */
    /* Estilos para el botón de carga de iframe (sin JS) */
  
    .leccion-tipddy .iframe-loader-container {
      position: relative;
  
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      margin: 20px 0;
      background-color: #f8fafc;
    }
  
    /* Ocultamos el checkbox real */
  .leccion-tipddy .iframe-toggle-checkbox,
  .leccion-tipddy .iframe-toggle-checkbox2 {
      display: none;
  }
  
      /* Estilo del botón (la etiqueta label) - MEJORADO */
      .iframe-load-button, .iframe-load-button2 {
          display: inline-block;
          padding: 14px 28px;
          background-color: var(--immune-intermedio); /* Color solicitado */
          color: var(--immune-light); /* Texto oscuro para mejor contraste */
          font-weight: 700;
          font-size: 1.3rem;
          border: none;
          border-radius: 12px; /* Esquinas más redondeadas */
          cursor: pointer;
          transition: all 0.25s ease;
          box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
      }
  
      .leccion-tipddy .iframe-load-button:hover {
          background-color: var(--immune-ocean-depths); /* Tono más oscuro para el hover */
          transform: translateY(-2px); /* Efecto de levantamiento */
          box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);
      }
      .leccion-tipddy .iframe-load-button2:hover {
          background-color: var(--immune-ocean-depths); /* Tono más oscuro para el hover */
          transform: translateY(-2px); /* Efecto de levantamiento */
          box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);
      }
  
  
    /* El contenedor del iframe está oculto por defecto */
    .leccion-tipddy .iframe-content-wrapper {
      display: none;
      margin-top: 24px;
    }
    .leccion-tipddy .iframe-content-wrapper2 {
      display: none;
      margin-top: 24px;
    }
    /* --- LA MAGIA DE CSS --- */
  /* Cuando CUALQUIER checkbox está marcado... */
  .leccion-tipddy .iframe-toggle-checkbox:checked ~ .iframe-content-wrapper,
  .leccion-tipddy .iframe-toggle-checkbox2:checked ~ .iframe-content-wrapper2 {
      /* ...mostramos el contenedor del iframe correspondiente. */
      display: block;
  }
  
  /* Ocultamos el botón una vez que se ha hecho clic */
  .leccion-tipddy .iframe-toggle-checkbox:checked ~ .iframe-load-button,
  .leccion-tipddy .iframe-toggle-checkbox2:checked ~ .iframe-load-button2 {
      display: none;
  }
  
  .leccion-tipddy .sabias-que{
    background-color: #0997aa14 !important;
    border-left: 4px solid var(--immune-deep-teal) !important;
    padding: 15px;
    margin: 20px 0;
  }
  
  
  /*Colapsables */
  /* Colapsables atractivos para análisis de datos */
  .leccion-tipddy .collapsible {
    border: none;
    margin: 1em 0;
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(15,35,57,0.06);
    overflow: hidden;
    transition: box-shadow 0.3s;
  }
  
  .leccion-tipddy .collapsible[open] {
    box-shadow: 0 6px 24px rgba(15,35,57,0.10);
  }
  
  .leccion-tipddy .collapsible summary {
    position: relative;
    padding: 1.2em 2.5em 1.2em 1.2em;
    cursor: pointer;
    font-size: 1.15em;
    font-weight: 600;
    background: #fff;
    border-bottom: 1px solid #e6edf5;
    outline: none;
    transition: background 0.2s;
    user-select: none;
  }
  
  .leccion-tipddy .collapsible summary:hover {
    background: #e9fcf9;
  }
  
  .leccion-tipddy .collapsible summary::after {
    content: "";
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%2333D9BE'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
  }
  
  .leccion-tipddy .collapsible[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
  }
  
  .leccion-tipddy .collapsible hr {
    border: none;
    border-top: 1px solid #e6edf5;
    margin: 0 0 1em 0;
  }
  
  .leccion-tipddy .collapsible > *:not(summary) {
    padding: 1em 2em 1em 1.2em;
    animation: fadeInCollapsible 0.4s;
  }
  
  @keyframes fadeInCollapsible {
    from { opacity: 0; transform: translateY(-8px);}
    to { opacity: 1; transform: translateY(0);}
  }
  
  /* Lista con bullets personalizados */
  .leccion-tipddy .custom-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
  }
  
  .leccion-tipddy .custom-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    line-height: 1.6;
  }
  
  .leccion-tipddy .custom-bullet {
    flex-shrink: 0;
    margin-right: 12px;
    width: 8px;
    height: 8px;
    background-color: #2fd4c0;
    border-radius: 50%;
  }
  
  .leccion-tipddy .custom-text {
    color: #12263a;
  }
  
  /* Tarjetas interactivas clickeables */
  .leccion-tipddy .card-interactive-container {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  
  /* El input ocupa toda la tarjeta, pero es invisible */
  .leccion-tipddy .card-toggle-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 2; /* encima de la tarjeta */
  }
  
  .leccion-tipddy .card.clickeable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    position: relative;
    z-index: 1; /* debajo del input invisible */
  }
  
  .leccion-tipddy .card.clickeable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(51, 217, 190, 0.15);
  }
  
  .leccion-tipddy .card-content-initial,
  .leccion-tipddy .card-content-example {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  /* Por defecto */
  .leccion-tipddy .card-content-initial { display: block; }
  .leccion-tipddy .card-content-example { display: none; }
  
  /* Cuando el checkbox está marcado */
  .leccion-tipddy .card-toggle-checkbox:checked + .card .card-content-initial {
    display: none;
  }
  .leccion-tipddy .card-toggle-checkbox:checked + .card .card-content-example {
    display: block;
    animation: fadeInCard 0.3s ease;
  }
  .leccion-tipddy .card-toggle-checkbox:checked + .card {
    background: #f0fdfc;
    border-color: #33D9BE;
  }
  
  @keyframes fadeInCard {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
    .tree {
    padding: 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre;
  }

  .folder {
    color: #23444B;
    font-weight: bold;
  }

  .folder::after {
    content: "/";
  }