.iframe-container {
    position: relative;
    background: #fff; /* Fondo blanco para que el formulario resalte */
}

/* Estilo para que la categoría en el sidebar se vea diferente */
.sidebar-link-poll {
    color: #f59e0b !important;
    font-weight: bold;
    border-left: 3px solid #f59e0b;
    padding-left: 5px;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgb(29 35 47);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.navbar-brand {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-right: 0.3rem;
    font-size: 2rem;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

.topbar .navbar-brand img {
    height: 34px;
    width: auto;
    margin-left: 2rem;
    display: block;
}

.ms-auto {
    margin-left: auto !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}
.d-flex {
    display: flex !important;
}



@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}
.share-btn { 
    border: 1px solid rgb(255 255 255 / 0%);
    color: #fff;
    background: rgb(255 255 255 / 0%);
    border-radius: 999px;
    padding: 0.2rem .2rem;
    font-weight: 700;
    font-size: .2rem;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    white-space: nowrap;

}

.blanco {
    filter: invert(1) brightness(2);
}

img, svg {
    vertical-align: middle;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
    :root{
      --bg:#071021;
      --panel:#0c1730;
      --text:#eaf0ff;
      --muted:#a8b6d6;
      --line:rgba(255,255,255,.10);
      --accent:#6366f1;
      --font-main: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    }
    *{box-sizing:border-box}
    body{ margin:0; font-family:var(--font-main); background:var(--bg); color:var(--text); overflow-x:hidden; }

    /* ===========================
       VISTA 1: CHAT
       =========================== */
    .app-container { width: 100%; min-height: 100vh; position: relative; }
    .view-chat {
      max-width: 560px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; padding: 18px; gap: 14px;
      transition: opacity 0.3s ease;
    }
    .view-chat.hidden { display: none; }
    header { display: flex; justify-content: center; padding: 5px 0; }
    
    .chat-area {
      flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: 28px;
      background: rgba(0,0,0,.18); padding: 14px; overflow-y: auto; scroll-behavior: smooth;
    }
    .chat-area::-webkit-scrollbar { width: 6px; }
    .chat-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 10px; }

    /* MENSAJES */
    .msg { display: flex; margin: 12px 0; animation: fadeIn 0.3s ease; }
    .msg.user { justify-content: flex-end; }
    .msg.ai { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
    
    .bubble {
      max-width: 88%; padding: 10px 10px; border-radius: 18px; line-height: 1.4; font-size: 15px; position: relative;
    }
    .msg.ai .bubble { background: rgba(12,23,48,.8); border: 1px solid var(--line); color: var(--text); border-top-left-radius: 4px; }
    .msg.user .bubble { background: var(--accent); color: #fff; border-top-right-radius: 4px; }

    /* STICKERS */
    .sticker-container { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
    .sticker-img {
      width: 120px; height: 120px; object-fit: contain;
      animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    }

    /* PILLS & BUTTONS */
    .pills-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .pill-btn {
      background: rgba(255,255,255,0.08); border: 1px solid var(--line); color: var(--text);
      padding: 8px 16px; border-radius: 99px; cursor: pointer; font-size: 13px; transition: all 0.2s;
    }
    .pill-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
    
    /* Botones Especiales */
    .btn-summary-web { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border:none; width: 100%; justify-content: center; font-weight: bold; margin-bottom: 5px;}
    .btn-summary-social { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: white; border:none; width: 100%; justify-content: center; font-weight: bold;}

    /* CARD DE TEMA */
    .topic-card {
      margin-top: 10px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line);
      border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; width: 100%;
    }
    .topic-card:hover { transform: translateY(-2px); border-color: var(--accent); }
    .tc-header { padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
    .tc-badge { font-size: 10px; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }
    .tc-body { padding: 0 16px 16px; }
    .tc-title { font-weight: 700; font-size: 16px; margin: 0 0 6px; color: #fff; }
    .tc-desc { font-size: 13px; color: var(--muted); margin: 0; }

    /* INPUT */
    .composer { display: flex; gap: 10px; align-items: center; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,23,48,.45); }
    .input { flex: 1; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.22); color: var(--text); padding: 0 12px; outline: none; }
    .btn-send { width: 42px; height: 42px; border-radius: 14px; background: var(--accent); color: #fff; border: 1px solid var(--line); cursor: pointer; }

    /* ===========================
       VISTA 2: ARTÍCULO (3 COLUMNAS)
       =========================== */
    .view-article {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg);
      display: grid; grid-template-columns: 220px 1fr 280px; grid-template-rows: 1fr;
      z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
    }
    .view-article.active { opacity: 1; pointer-events: all; }
    
    .sidebar-left, .sidebar-right { padding: 20px; background: rgba(0,0,0,0.2); display: flex; flex-direction: column; }
    .sidebar-left { border-right: 1px solid var(--line); gap: 10px; }
    .sidebar-right { border-left: 1px solid var(--line); background: #0b1221; align-items: center; justify-content: center; }

    .sidebar-nav-title {
    font-size: 0.7rem;
}
div#sidebarLinks {
    font-size: 0.8rem;
    line-height: 1rem;
}
    .btn-back {
      margin: 5px;
      padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,0.1);
      color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; width: fit-content;
    }
    .btn-back:hover { background: rgba(255,255,255,0.2); }

    .main-content { padding: 90px 60px;
    position: relative;
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, .18);
    overflow-y: auto;
    scroll-behavior: smooth;}
    .article-hero { width: 100%; height: 300px; border-radius: 16px; object-fit: cover; margin-bottom: 24px; }
    .article-title { font-size: 32px; font-weight: 800; margin: 0 0 10px; line-height: 1.1; }
    .article-body { font-size: 17px; line-height: 1.7; color: #d1d5db; white-space: pre-line; }
    
    /* SOCIAL SHARE */
    .social-share-block { margin: 20px 0; display: flex; gap: 10px; align-items: center; }
    .btn-social {
      width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; transition: transform 0.2s;
    }
    .btn-social:hover { transform: scale(1.1); }
    .bg-x { background: #000; border: 1px solid #333; }
    .bg-fb { background: #1877F2; }
    .bg-wa { background: #25D366; }

    .article-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
    .btn-digital { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; border: none; padding: 10px 20px; border-radius: 12px; font-weight: 600; cursor: pointer; }

    /* ===========================
       VISTA 3: STORIES (FLOTANTE 80%)
       =========================== */
    .view-stories {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
      background: rgba(0,0,0,0.92); backdrop-filter: blur(5px);
      z-index: 999; display: none; align-items: center; justify-content: center;
    }
    .view-stories.active { display: flex; }
    
    .story-card {
      width: 85%; max-width: 420px; height: 85%; max-height: 800px;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
      border-radius: 32px; position: relative; overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column;
    }
    .story-progress-container { display: flex; gap: 4px; padding: 12px 12px 0; width: 100%; z-index: 10; }
    .story-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
    .story-fill { height: 100%; background: #fff; width: 0%; transition: width 0.1s linear; }
    .story-close {
      position: absolute; top: 20px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; z-index: 20; 
      background: rgba(0,0,0,0.2); border-radius: 50%; border: none; width: 32px; height: 32px;
    }
    .story-content {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: #fff; padding: 30px; text-align: center; position: relative;
    }
    
    /* Styles Internos Story */
    .st-header { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.7); margin-bottom: 10px; font-weight: bold; }
    .st-main-title { font-size: 28px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; animation: slideUp 0.5s ease; }
    .st-value-big { font-size: 35px; font-weight: 900; margin: 10px 0; color: #fbbf24; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .st-img { width: 100%; border-radius: 20px; margin: 15px 0; box-shadow: 0 10px 20px rgba(0,0,0,0.3); object-fit: cover; max-height: 250px;}
    .st-list { text-align: left; width: 100%; background: rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; margin-top: 10px; }
    .st-list-item { margin-bottom: 10px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
    .st-list-item:last-child { border: none; margin: 0; padding: 0; }
    .st-list-num { font-weight: bold; color: #fbbf24; margin-right: 8px; }

    /* MODAL */
    .modal-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85);
      z-index: 200; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .modal-overlay.active { opacity: 1; pointer-events: all; }
    .modal-content { width: 380px; height: 650px; background: white; border-radius: 24px; position: relative; overflow: hidden; }
    .modal-close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; font-weight: bold; z-index: 10; background: rgba(0,0,0,0.1); }
    
    @keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
    .type-cursor::after { content:"▍"; margin-left:2px; animation:blink 1s infinite; color: var(--accent); }
    @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
    @keyframes slideUp { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
    @keyframes popIn { from{transform:scale(0.5); opacity:0} to{transform:scale(1); opacity:1} }
    
    /* Responsive Mobile */
    @media (max-width: 900px) {
      .view-article { grid-template-columns: 1fr; display: block; overflow-y: auto; }
      .sidebar-left, .sidebar-right { display: none; }
      .main-content { padding: 60px 20px 20px; }

      /*.btn-back-mobile { position: absolute; top: 20px; left: 20px; z-index: 50; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }*/
    }



    /* ===========================
   TRIVIA EMBEBIDA EN CHAT
   =========================== */
.trv-wrap{
  width:100%;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius: 20px;
  padding: 12px;
}
.trv-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media(min-width:520px){
  .trv-grid{ grid-template-columns: 1fr 1fr; }
}

.trv-card{
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  padding: 12px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.trv-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.trv-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.trv-icon{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background: rgba(255,255,255,.07);
  font-size: 22px;
}
.trv-title{ font-weight:800; margin: 8px 0 2px; }
.trv-desc{ color: var(--muted); font-size: 13px; margin: 0; }
.trv-badge{
  font-size: 11px; color: var(--muted);
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding: 6px 10px; border-radius: 999px;
}

.trv-quiz-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom: 10px;
}
.trv-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.trv-progress{
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom: 10px;
}
.trv-bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(34,211,238,1));
  transition: width .25s ease;
}
.trv-q{
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.25;
}
.trv-opt{
  width:100%;
  text-align:left;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 11px 12px;
  margin-bottom: 8px;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.trv-opt:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.trv-opt:active{ transform: scale(.99); }
.trv-opt[disabled]{ opacity:.78; cursor:not-allowed; }
.trv-opt.correct{ border-color: rgba(57,217,138,.7); background: rgba(57,217,138,.14); }
.trv-opt.wrong{ border-color: rgba(255,92,122,.7); background: rgba(255,92,122,.12); }

.trv-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top: 6px; }
.trv-hint{ color: var(--muted); font-size: 13px; flex:1; }
.trv-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
}
.trv-btn:hover{ background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }

.trv-pop{ animation: trvPop .22s ease-out; }
@keyframes trvPop{ from{ transform: scale(.98); opacity:.75 } to{ transform: scale(1); opacity:1 } }
.trv-shake{ animation: trvShake .25s ease-in-out; }
@keyframes trvShake{ 0%,100%{ transform: translateX(0) } 25%{ transform: translateX(-5px) } 75%{ transform: translateX(5px) } },


/* Estilos para el cuerpo del artículo */
.art-p {
  margin-bottom: 1.5rem;
  font-size: 18px;
  line-height: 1.8;
  color: #d1d5db;
}

.art-h2 {
  margin: 2.5rem 0 1rem 0;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.art-figure {
  margin: 1rem 0;
  padding: 0;
}

.art-img-inline {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
}

.art-figure figcaption {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

strong {
  color: #fff;
  font-weight: 700;
}
.container{
   width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

.iframe-container {
    position: relative;
    background: #fff; /* Fondo blanco para que el formulario resalte */
}

/* Estilo para que la categoría en el sidebar se vea diferente */
.sidebar-link-poll {
    color: #f59e0b !important;
    font-weight: bold;
    border-left: 3px solid #f59e0b;
    padding-left: 10px;
}

@media (max-width: 480px) {
    .btn-back-mobile2 {
        position: absolute;
        top: 80px;
        left: 20px;
        z-index: 50;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }
}


/*.btn-back-mobile2 {
  display: none;
}
*/