.dti{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial, 'Noto Sans', sans-serif; border:1px solid #e5e7eb; padding:16px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06);}
.dti h3{margin-top:0}
.dti .dti-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.dti .dti-search{flex:1; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px}
.dti .dti-categoria{padding:10px 12px; border:1px solid #d1d5db; border-radius:10px}
.dti .dti-az{display:flex; gap:4px; flex-wrap:wrap}
.dti .dti-az button{border:1px solid #e5e7eb; background:#f9fafb; padding:6px 10px; border-radius:8px; cursor:pointer}
.dti .dti-az button.active{font-weight:700; outline:2px solid #d1d5db}
.dti .dti-meta{display:flex; justify-content:space-between; align-items:center; margin:6px 0 12px}
.dti .dti-progress{height:8px; background:#f3f4f6; border-radius:99px; overflow:hidden; flex:1; margin-left:12px}
.dti .dti-progress-bar{height:8px; width:0%}
.dti .dti-lista{list-style:none; margin:0; padding:0}
.dti .dti-item{padding:12px; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:8px; background:#fff}
.dti .dti-item .dti-term{font-weight:800; font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between}
.dti .dti-item .dti-term small{font-weight:400; opacity:.7}
.dti .dti-def{display:none; margin-top:6px; line-height:1.55}
.dti .dti-tags{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.dti .dti-tag{font-size:.75rem; padding:4px 8px; border:1px dashed #e5e7eb; border-radius:999px; background:#f9fafb}
.dti .dti-btn{padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#ffffff; cursor:pointer}
.dti .dti-btn-prim{font-weight:700}
.dti .dti-btn-sec{}
.dti .dti-btn-ok{}
.dti .dti-btn-warn{}
.dti .dti-empty{padding:16px; border:1px dashed #e5e7eb; border-radius:12px; text-align:center}

 /* Flashcards */
.dti-flash-head, .dti-flash-foot{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.dti-flash-card{border:1px solid #e5e7eb; border-radius:12px; padding:18px; min-height:140px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:#fff}
.dti-front{font-weight:800; font-size:1.1rem}
.dti-back{margin-top:8px; opacity:.85}
.dti-flash-resumen{margin-top:8px; font-size:.95rem}

 /* Quiz */
.dti-quiz-head{display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.dti-quiz-body{margin-top:10px}
.dti-q{border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin-bottom:8px; background:#fff}
.dti-q h4{margin:0 0 6px}
.dti-op{display:block; margin:6px 0}
.dti-quiz-foot{margin-top:8px; display:flex; gap:8px; align-items:center}
.dti-resumen{padding:12px; border:1px dashed #e5e7eb; border-radius:12px; margin-top:10px}
.dti-resumen .bad{font-weight:700}

 /* Dynamic colors for progress & feedback (no fixed palette names) */
.dti .dti-progress-bar[data-level="low"]{background:#fca5a5}
.dti .dti-progress-bar[data-level="mid"]{background:#fde68a}
.dti .dti-progress-bar[data-level="high"]{background:#86efac}
.dti .dti-score-badge{font-weight:800; padding:4px 8px; border-radius:8px}
.dti .dti-score-badge.low{background:#fee2e2}
.dti .dti-score-badge.mid{background:#fef3c7}
.dti .dti-score-badge.high{background:#dcfce7}


/* --- Custom emphasis for primary quiz button --- */
.dti .dti-btn-prim{
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(185,28,28,.25), 0 2px 4px rgba(0,0,0,.1);
  letter-spacing: .3px;
  transform: translateZ(0);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;
  isolation: isolate;
}
.dti .dti-btn-prim:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(185,28,28,.30), 0 4px 8px rgba(0,0,0,.12);
  filter: brightness(1.03);
}
.dti .dti-btn-prim:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(185,28,28,.22);
}
/* subtle attention pulse */
@keyframes dti-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.dti .dti-quiz-head .dti-btn-prim{
  animation: dti-pulse 1.8s ease-out infinite;
}

/* Improve timer and progress contrast next to the primary button */
.dti .dti-quiz-head .dti-timer, .dti .dti-quiz-head .dti-quiz-progress{
  font-weight: 700;
}


/* --- Tema: Rojo Ladrillo + Flechas animadas --- */
:root{
  --dti-brick-100:#fde3e1;
  --dti-brick-300:#e07c6c;
  --dti-brick-500:#b22222; /* Firebrick */
  --dti-brick-600:#9b1d1d;
  --dti-brick-700:#7f1717;
}

.dti .dti-btn-prim{
  background: linear-gradient(180deg, var(--dti-brick-500) 0%, var(--dti-brick-700) 100%) !important;
  box-shadow: 0 10px 18px rgba(127,23,23,.25), 0 2px 4px rgba(0,0,0,.1) !important;
}

/* Flechas laterales animadas apuntando al botón "Iniciar cuestionario" */
.dti .dti-quiz-head{
  position: relative;
  gap: 12px;
}

.dti .dti-quiz-head .dti-btn-prim{
  position: relative;
  padding-left: 42px;
  padding-right: 42px;
}

@keyframes dti-arrow-left {
  0% { transform: translateX(-4px); opacity: .75; }
  50% { transform: translateX(-10px); opacity: 1; }
  100% { transform: translateX(-4px); opacity: .75; }
}
@keyframes dti-arrow-right {
  0% { transform: translateX(4px); opacity: .75; }
  50% { transform: translateX(10px); opacity: 1; }
  100% { transform: translateX(4px); opacity: .75; }
}

.dti .dti-quiz-head .dti-btn-prim::before,
.dti .dti-quiz-head .dti-btn-prim::after{
  content: "➤";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  font-weight: 900;
  font-size: 20px;
  color: var(--dti-brick-500);
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

.dti .dti-quiz-head .dti-btn-prim::before{
  left: -22px;
  transform: rotate(180deg);
  animation: dti-arrow-left 1.2s ease-in-out infinite;
}
.dti .dti-quiz-head .dti-btn-prim::after{
  right: -22px;
  animation: dti-arrow-right 1.2s ease-in-out infinite;
}

/* Ajustes de contraste para el timer y progreso con tema ladrillo */
.dti .dti-quiz-head .dti-timer, .dti .dti-quiz-head .dti-quiz-progress{
  color: var(--dti-brick-600);
}


/* Etiqueta de usuario al lado del quiz (no flotante) */
.dti-quiz-head{display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.dti-quiz-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dti-user-chip{display:flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; font-weight:600}
.dti-user-emoji{display:inline-block}
.dti-user-text{display:inline-block}