.cur-detalle{padding:2.5rem 1.5rem;max-width:800px;margin:0 auto}
.cur-detalle__migas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--t-muted,#64748b);margin-bottom:.75rem}
.cur-detalle__migas a{color:var(--t-muted,#64748b);text-decoration:none}
.cur-detalle__migas a:hover{color:var(--t-accent);text-decoration:underline}
.cur-detalle__migas [aria-current="page"]{color:var(--t-text,#0f172a);font-weight:600}
.cur-detalle__volver{display:inline-block;color:var(--t-accent);text-decoration:none;font-size:.85rem;margin-bottom:1.25rem}
.cur-detalle__volver:hover{text-decoration:underline}
/* 2026-07-26 (Eduardo: "una fila con todos los niveles, a modo de
   semaforo... que el usuario sepa el recorrido de cursos y niveles"):
   completado = punto relleno del color del curso + estrella; actual =
   borde solido del color; bloqueado = candado, sin enlace (span, no <a>).
   Un aro adicional marca el nivel que se esta viendo AHORA (independiente
   del progreso, ver detalle() en views.py). */
.cur-detalle__niveles{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.cur-detalle__nivel-pip{
  display:inline-flex;align-items:center;gap:.25rem;
  min-width:2.6rem;padding:.35rem .7rem;border-radius:999px;
  font-size:.82rem;font-weight:700;text-decoration:none;
  border:2px solid var(--t-line);color:var(--t-muted);
  transition:transform .15s ease,box-shadow .15s ease;
}
a.cur-detalle__nivel-pip:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(0,0,0,.35)}
.cur-detalle__nivel-pip--bloqueado{opacity:.55;cursor:default}
.cur-detalle__nivel-pip--completado{border-color:var(--t-accent);color:var(--t-accent);background:var(--t-accent-faint,rgba(15,122,92,.08))}
.cur-detalle__nivel-pip--actual{border-color:var(--t-accent);color:#fff;background:var(--t-accent)}
.cur-detalle__nivel-pip--aqui{box-shadow:0 0 0 3px var(--t-accent-faint,rgba(15,122,92,.25))}

.cur-detalle__imagen-wrap{position:relative;margin-bottom:1.25rem;overflow:hidden;border-radius:.75rem}
.cur-detalle__imagen{width:100%;max-height:320px;object-fit:cover;border-radius:.75rem;margin-bottom:0;display:block}
.cur-detalle__nivel{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--t-accent-faint,var(--t-accent));color:var(--t-accent);margin-bottom:.5rem}
/* 2026-07-16 (rediseño, tercera pasada): la bandera ya no vive en un
   bloque de cabecera separado por encima del titulo (las dos pasadas
   anteriores) - ahora comparte fila con el titulo, a su derecha, tal
   como pidio Eduardo explicitamente. */
.cur-detalle__titulo-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
/* 2026-07-16: animal tradicional del pais/idioma (toro, gallo, oso...)
   junto a la bandera, pedido por Eduardo - misma fila que el titulo,
   ambos emblemas agrupados y con el mismo tamaño para no competir entre
   si. Ver ANIMAL_IDIOMA en cursos_extras.py. */
.cur-detalle__emblemas{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.cur-detalle__bandera-titulo,.cur-detalle__animal-titulo{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.15))}
/* 2026-07-16: cuando el animal ya tiene ilustracion PNG propia (ver
   IDIOMAS_CON_ANIMAL_ILUSTRADO en cursos_extras.py), animal_idioma_html
   devuelve un <img> en vez del <span> con emoji - mismo tamaño visual que
   el emoji para no descuadrar la fila. */
img.cur-detalle__animal-titulo,img.cur-detalle__bandera-titulo{width:2.5rem;height:2.5rem;object-fit:contain;font-size:initial}
.cur-detalle h1{color:var(--t-text);margin:.25rem 0}
.cur-detalle__meta{color:var(--t-muted);font-size:.85rem;margin-bottom:.4rem}
.cur-detalle__eslogan{color:var(--t-accent);font-weight:700;font-size:.9rem;margin:0 0 1.5rem}
.cur-detalle__descripcion,.cur-detalle__temario{color:var(--t-text);line-height:1.6}
.cur-detalle h2{color:var(--t-text);margin-top:2rem;font-size:1.15rem}
.cur-detalle__matricular{display:inline-block;margin-top:2rem;padding:.75rem 1.5rem;border-radius:.5rem;background:var(--t-accent);color:#fff;text-decoration:none;font-weight:600}
.cur-detalle__matricular:hover{background:var(--t-accent-hover,var(--t-accent))}

/* 2026-07-16 (bug real, reportado por Eduardo: "elegir temas para
   estudiar no aparece con ningun boton" + "la vista deja mucho temario").
   Ninguna de estas dos clases tenia CSS - el temario salia como una lista
   de vinetas del navegador sin estilo y el enlace de "Elegir temas para
   estudiar" era texto azul plano perdido debajo, indistinguible de un
   boton real (el unico boton con pinta de boton era "Matricularme"). Usa
   solo variables --t-* para que funcione igual en el tema normal y en el
   infantil, sin tocar la plantilla. */
.cur-detalle__temas{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cur-detalle__temas li{padding:.75rem 1rem;border-radius:.6rem;background:var(--t-panel,var(--t-accent-faint));border-left:4px solid var(--t-accent);color:var(--t-text);font-weight:600}
.cur-detalle__tema-min{font-weight:400;color:var(--t-muted);font-size:.85rem}
.cur-detalle__estudiar{display:inline-block;margin-top:1.5rem;padding:.75rem 1.5rem;border-radius:.5rem;border:2px solid var(--t-accent);color:var(--t-accent);text-decoration:none;font-weight:600;background:transparent}
.cur-detalle__estudiar:hover{background:var(--t-accent-faint,var(--t-accent))}

/* 2026-07-18 (Eduardo: "me gustaria q eso del temario se mostrase tambien
   como si fueran cartas") - mismo lenguaje visual que .cur-carta (listado
   de cursos, ver cursos/static/cursos/css/listado.css) y .pal-carta (album
   de palabras): marco en degradado del color de marca + pata-insignia en
   las esquinas. Namespace propio .tema-* (una carta por tema del temario,
   no reutiliza .cur-carta directamente porque ese selector trae campos que
   aqui no aplican - nivel, barra de progreso, badge de curso). */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:1rem 0 0}
.tema-carta{
  border-radius:1.1rem;padding:3px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--cur-color,var(--t-accent)),var(--cur-color2,var(--t-accent)));
  box-shadow:0 10px 24px -14px rgba(0,0,0,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.tema-carta:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 32px -14px rgba(0,0,0,.45)}
.tema-carta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:250% 250%;background-position:120% 0;
  transition:background-position .6s ease;pointer-events:none;
}
.tema-carta:hover::after{background-position:-20% 100%}
.tema-carta__marco{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;
  background-color:var(--t-panel);border-radius:calc(1.1rem - 3px);
  padding:1.1rem .9rem 1rem;height:100%;position:relative;
  background-image:var(--pal-pata),var(--pal-pata),var(--pal-pata),var(--pal-pata);
  background-position:3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
  background-size:15px 15px;background-repeat:no-repeat;
  --pal-pata:url("/static/home/img/marco-pata-normal.a37123607931.svg");
}
.tema-carta__numero{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;color:#fff;
  background:linear-gradient(135deg,var(--cur-color,var(--t-accent)),var(--cur-color2,var(--t-accent)));
}
.tema-carta__titulo{font-weight:800;color:var(--t-text);font-size:.95rem;word-break:break-word}
.tema-carta__min{font-size:.78rem;color:var(--t-muted)}

/* 2026-07-26 (trofeos por tema, ver cursos/trofeos.py y TrofeoTema): la
   tarjeta ya conseguida se distingue con un borde dorado (en vez del
   gradiente de acento normal) y una medalla en la esquina - mismo hueco
   visual que el marco ya reservaba con position:relative. */
.tema-carta--trofeo{background:linear-gradient(155deg,#f5b301,#f7d774)}
.tema-carta__trofeo{
  position:absolute;top:-.4rem;right:-.4rem;font-size:1.3rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  animation:temaTrofeoPop .4s ease;
}
@keyframes temaTrofeoPop{
  0%{transform:scale(0) rotate(-20deg)}
  70%{transform:scale(1.25) rotate(8deg)}
  100%{transform:scale(1) rotate(0)}
}
.tema-carta__trofeo-progreso{
  font-size:.85rem;font-weight:700;color:var(--t-accent);
  background:var(--t-accent-faint,rgba(15,122,92,.1));
  border-radius:.6rem;padding:.5rem .7rem;margin:.6rem 0 0;
}

/* 2026-07-26: la tarjeta en la rejilla solo es el disparador del overlay
   (ver .tema-overlay mas abajo y detalle.js) - .tema-carta__detalle nunca
   se ve aqui, solo dentro del clon que va al overlay. */
.tema-carta{cursor:pointer}
.tema-carta__detalle{display:none}

/* 2026-07-26 (Eduardo: "un efecto de giro... mientras se hace mas grande y
   se vuelve flotante y ocupa el 90% de la pantalla, como los juegos de
   cartas donde seleccionas una y se gira y se pone en grande") - mismo
   patron ya validado en pal-modal (/ejercicios/palabras/): fondo
   fade-in + tarjeta rotateY(-90deg)->0 con escala, cubic-bezier de rebote
   suave. Aqui mas ancha (90vw) porque el contenido (explicacion+ejemplos)
   es mas largo que una carta de palabra. */
.tema-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;
}
.tema-overlay[hidden]{display:none}
.tema-overlay__fondo{position:absolute;inset:0;background:rgba(15,23,42,.6);opacity:0;transition:opacity .3s ease}
.tema-overlay--abierto .tema-overlay__fondo{opacity:1}
.tema-overlay__tarjeta{
  position:relative;width:90vw;max-width:720px;max-height:88vh;overflow-y:auto;
  background:var(--t-panel);border-radius:1.3rem;
  border:3px solid var(--cur-color,var(--t-accent));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  transform:perspective(1400px) rotateY(-90deg) scale(.7);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
  transform-style:preserve-3d;
}
.tema-overlay--abierto .tema-overlay__tarjeta{
  transform:perspective(1400px) rotateY(0deg) scale(1);
  opacity:1;
}
.tema-overlay__marco{padding:2.5rem 1.5rem 1rem;background-image:none !important}
.tema-overlay__marco .tema-carta__titulo{font-size:1.4rem}
.tema-overlay__marco .tema-carta__numero{width:44px;height:44px;font-size:1.05rem}
.tema-overlay__marco .tema-carta__trofeo{font-size:1.8rem;top:-.6rem;right:-.6rem}
.tema-overlay__cerrar{
  position:absolute;top:.85rem;right:.85rem;z-index:1;
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--t-line,#e5e7eb);color:var(--t-text);
  font-size:1.15rem;cursor:pointer;
}
.tema-overlay__cerrar:hover{background:var(--t-accent);color:#fff}
#temaOverlayContenido .tema-carta__detalle{display:block;padding:0 1.75rem 1.75rem}

@media (prefers-reduced-motion: reduce) {
  .tema-overlay__tarjeta{transition:opacity .15s ease;transform:none !important}
}
.tema-carta__explicacion,.tema-carta__teaser{color:var(--t-text);font-size:.88rem;line-height:1.55;margin:0 0 .7rem}
.tema-carta__teaser{color:var(--t-muted);font-style:italic}
.tema-carta__ejemplos{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.tema-carta__ejemplos li{font-size:.85rem;color:var(--t-muted);border-left:3px solid var(--cur-color,var(--t-accent));padding-left:.6rem}
.tema-carta__ejemplos li strong{color:var(--t-text)}
.tema-carta__ejercicios,.tema-carta__premium{
  display:block;text-align:center;border-radius:999px;padding:.6rem 1rem;
  font-size:.85rem;font-weight:700;text-decoration:none;margin-bottom:.5rem;
}
.tema-carta__ejercicios{background:var(--cur-color,var(--t-accent));color:#fff}
.tema-carta__ejercicios:hover{opacity:.9}
.tema-carta__premium{border:1px solid var(--t-line);color:var(--t-muted)}
.tema-carta__premium:hover{border-color:var(--cur-color,var(--t-accent));color:var(--cur-color,var(--t-accent))}

@media (prefers-reduced-motion: reduce) {
  .tema-carta{transition:none}
  .tema-carta::after{transition:none}
}

@media (max-width: 480px) {
  .cur-detalle { padding: 1.5rem 1rem; }
  .cur-detalle__matricular { display: block; text-align: center; }
  .cur-detalle__estudiar { display: block; text-align: center; }
}