:root {
  /* Paleta oficial INALDE (Pantone 485 C / hex exactos de la guía de marca) */
  --rojo: #e30613;
  --rojo-oscuro: #b8050f;
  --azul: #224d7c;
  --azul-oscuro: #16385c;
  --dorado: #9f885f;
  --negro: #000000;
  --gris-900: #404041; /* Gris oscuro oficial */
  --gris-700: #58585b; /* intermedio, interpolado entre oscuro y medio */
  --gris-500: #8b8d90; /* Gris medio oficial */
  --gris-300: #d6d7d8; /* interpolado, para bordes sobre fondo claro */
  --gris-100: #ebebeb; /* Gris claro oficial */
  --verde: #1e8f4e;
  --verde-bg: #e9f7ef;
  --ambar: #b8860b;
  --ambar-bg: #fdf4e0;
  --rojo-bg: #fdeceb;
  --radio: 10px;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.08);
  --fuente: "Montserrat", -apple-system, Segoe UI, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--gris-100);
  color: var(--gris-900);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente);
  font-weight: 700;
  color: var(--azul-oscuro);
  margin: 0 0 0.5em;
}

a {
  color: var(--azul);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.wrap-ancho {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

header.app-header {
  background: var(--azul-oscuro);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.app-header .marca {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
}

header.app-header .marca span {
  color: var(--dorado);
}

header.app-header .usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
}

header.app-header .usuario a {
  color: #fff;
  opacity: 0.85;
  text-decoration: underline;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radio);
  padding: 14px 22px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.92;
}

.btn-principal {
  background: var(--rojo);
  color: #fff;
  width: 100%;
}

.btn-principal:hover {
  background: var(--rojo-oscuro);
}

.btn-secundario {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}

.btn-texto {
  background: transparent;
  color: var(--gris-700);
  border: none;
  padding: 10px;
  text-decoration: underline;
  font-weight: 400;
}

.btn-peligro {
  background: #fff;
  color: var(--rojo);
  border-color: var(--rojo);
}

.btn-bloque {
  width: 100%;
  text-align: left;
}

/* Formularios */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gris-900);
}

select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="file"],
input[type="search"],
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--negro);
}

input[type="search"] {
  border-radius: 999px;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

select:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--azul);
}

.campo {
  margin-bottom: 20px;
}

.campo-profesores ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.campo-profesores li {
  margin: 0;
}

.campo-profesores label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
}

.campo-profesores label:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}

/* Picklist compacto (buscador + globos) que static/js/picklist.js monta sobre la
   lista de casillas de arriba — la lista queda oculta pero sigue siendo lo que
   Django envía; esto es solo la capa visual. */
.picklist {
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio);
  background: #fff;
  padding: 8px;
}

.picklist-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.picklist-pills:not(:empty) {
  margin-bottom: 8px;
}

.picklist-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--azul);
  color: #fff;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.picklist-pill button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 5px;
}

.picklist-input-wrap {
  position: relative;
}

.picklist-input-wrap input[type="text"] {
  padding: 8px 10px;
  font-size: 0.9rem;
}

.picklist-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  z-index: 20;
}

.picklist-opcion {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

.picklist-opcion:hover {
  background: var(--gris-100);
}

.ayuda {
  font-size: 0.85rem;
  color: var(--gris-500);
  margin-top: 4px;
}

/* Tarjetas de "Mis cursos" */
.tarjeta-curso {
  background: #fff;
  border-radius: var(--radio);
  border-left: 6px solid var(--gris-300);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.tarjeta-esquina {
  float: right;
  text-align: right;
  color: var(--gris-500);
  font-size: 0.72rem;
  line-height: 1.4;
  margin: -4px 0 8px 12px;
}

.tarjeta-curso.estado-verde {
  border-left-color: var(--verde);
}

.tarjeta-curso.estado-ambar {
  border-left-color: var(--ambar);
}

.tarjeta-curso.estado-rojo {
  border-left-color: var(--rojo);
}

.tarjeta-curso h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.tarjeta-curso .frase-estado {
  color: var(--gris-700);
  margin-bottom: 14px;
}

.aviso-salud {
  background: var(--ambar-bg);
  color: var(--ambar);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  margin: 0 0 16px;
}

.tarjeta-curso .aviso-salud {
  margin: -4px 0 12px;
}

.aviso-chico {
  font-size: 0.75rem;
  padding: 4px 8px;
  margin: 6px 0 0;
  text-align: center;
}

.tarjeta-curso .tarjeta-meta {
  color: var(--gris-500);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

.tarjeta-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.tarjeta-acciones .btn-secundario {
  width: auto;
}

/* Filtros de "Mis cursos": queda fijo arriba mientras hace scroll (igual que la barra
   de progreso del asistente) — así solo se mueven las tarjetas debajo. */
.filtros-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gris-100);
  margin: 0 -16px 20px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--gris-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filtros-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.filtros-fila input[type="search"] {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.filtros-fila select {
  flex: 0 1 240px;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: var(--azul-oscuro);
  border-color: var(--gris-300);
}

.pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pastillas:last-child {
  margin-bottom: 0;
}

.pastilla {
  background: #fff;
  border: 1.5px solid var(--gris-300);
  color: var(--gris-700);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}

.pastilla.activa {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.tarjeta-aviso {
  background: var(--ambar-bg);
  border: 1px solid var(--ambar);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 20px;
}

/* Wizard */
.wizard-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gris-100);
  margin: 0 -16px 22px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--gris-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wizard-progreso {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-bottom: 22px;
}

.wizard-sticky .wizard-progreso {
  margin-bottom: 8px;
}

.wizard-sticky .wizard-paso-titulo {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

.wizard-sticky .wizard-paso-num {
  margin-bottom: 0;
}

.wizard-progreso .punto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gris-300);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.wizard-progreso .punto:hover {
  transform: scale(1.15);
}

.wizard-progreso .punto.hecho {
  background: var(--verde);
}

.wizard-progreso .punto.actual {
  background: var(--rojo);
  transform: scale(1.2);
}

.wizard-progreso .punto.actual:hover {
  transform: scale(1.3);
}

/* Tooltip propio reutilizable (más visible que el title nativo del navegador):
   cualquier elemento con class="tiene-tooltip" y data-tooltip="..." lo hereda. */
.tiene-tooltip {
  position: relative;
}

.wizard-progreso .punto::after,
.tiene-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  background: var(--gris-900);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.wizard-progreso .punto:hover::after,
.wizard-progreso .punto:focus::after,
.tiene-tooltip:hover::after,
.tiene-tooltip:focus::after {
  opacity: 1;
}

.wizard-paso-titulo {
  text-align: center;
  margin-bottom: 4px;
}

.wizard-paso-num {
  text-align: center;
  color: var(--gris-500);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.wizard-nav .btn {
  flex: 1;
}

.autoguardado-estado {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gris-500);
  min-height: 1.2em;
  margin-top: 10px;
}

/* Patrón tiene/falta */
.tiene-falta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 14px 0 24px;
}

@media (max-width: 720px) {
  .tiene-falta {
    grid-template-columns: 1fr;
  }
}

.columna-tiene,
.columna-falta {
  border-radius: var(--radio);
  padding: 16px 18px;
}

.columna-tiene {
  background: var(--verde-bg);
  border: 1px solid var(--verde);
}

.columna-falta {
  background: var(--rojo-bg);
  border: 1px solid var(--rojo);
}

.columna-tiene h4 {
  color: var(--verde);
}

.columna-falta h4 {
  color: var(--rojo);
}

.fila-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  gap: 14px;
}

.fila-item:first-of-type {
  border-top: none;
}

.trait-texto {
  color: var(--gris-900);
}

/* Jerarquía visual Competency Goal (h3) > Learning Objective > Trait: el LO tenía el
   mismo gris apagado que el texto de ayuda y se perdía — ahora tiene su propio nivel,
   claramente entre el h3 del goal y las filas de trait. */
.lo-titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dorado);
  margin: 20px 0 8px;
  padding-left: 10px;
  border-left: 3px solid var(--dorado);
}

.traits-de-objetivo {
  padding-left: 13px;
  margin-bottom: 6px;
}

.control-si-no {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.control-si-no label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 56px;
  padding: 6px 14px;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-700);
  cursor: pointer;
  margin: 0;
}

.control-si-no label.activo {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}

.fila-item .estado-palabra {
  font-size: 0.85rem;
  color: var(--gris-700);
}

.bloque-encabezado {
  margin-bottom: 4px;
}

.bloque-resumen {
  color: var(--gris-700);
  margin-bottom: 6px;
}

/* Tablas de matrices */
table.matriz {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

table.matriz th,
table.matriz td {
  border: 1px solid var(--gris-300);
  padding: 8px;
  text-align: center;
}

table.matriz th {
  background: var(--gris-100);
  font-family: "Montserrat", sans-serif;
}

table.matriz td.etiqueta,
table.matriz th.etiqueta {
  text-align: left;
  min-width: 220px;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.chip-verde {
  background: var(--verde-bg);
  color: var(--verde);
}

.chip-ambar {
  background: var(--ambar-bg);
  color: var(--ambar);
}

.chip-rojo {
  background: var(--rojo-bg);
  color: var(--rojo);
}

.mensajes {
  margin-bottom: 16px;
}

.mensaje {
  padding: 12px 16px;
  border-radius: var(--radio);
  margin-bottom: 8px;
}

.mensaje.error {
  background: var(--rojo-bg);
  color: var(--rojo-oscuro);
  border: 1px solid var(--rojo);
}

.mensaje.success {
  background: var(--verde-bg);
  color: var(--verde);
  border: 1px solid var(--verde);
}

.opciones-grandes {
  display: grid;
  gap: 14px;
}

.opcion-grande {
  display: block;
  background: #fff;
  border: 2px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 20px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
}

.opcion-grande.recomendado {
  border-color: var(--azul);
}

.opcion-grande .etiqueta-recomendado {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
}

.centro {
  text-align: center;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-300);
  display: flex;
  align-items: center;
  gap: 10px;
}

.checklist li.tiene-tooltip {
  cursor: help;
}

.checklist li.tiene-falta-ok {
  color: var(--verde);
}

.checklist li.tiene-falta-falta {
  color: var(--rojo);
}

.fila-formset {
  background: #fff;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.fila-formset .campo {
  margin-bottom: 12px;
}

.fila-formset .borrar-fila {
  font-size: 0.8rem;
  color: var(--rojo);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.fila-formset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -16px -16px 14px;
  padding: 10px 14px;
  background: var(--gris-100);
  border-radius: var(--radio) var(--radio) 0 0;
  border-bottom: 1px solid var(--gris-300);
}

.numero-fila {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--azul-oscuro);
  font-size: 0.9rem;
}

.botones-orden {
  display: flex;
  gap: 6px;
}

.btn-orden {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--gris-300);
  background: #fff;
  color: var(--azul);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.btn-orden:hover:not(:disabled) {
  border-color: var(--azul);
  background: var(--gris-100);
}

.btn-orden:disabled {
  color: var(--gris-300);
  cursor: not-allowed;
}

.btn-agregar {
  background: transparent;
  border: 1.5px dashed var(--gris-500);
  color: var(--gris-700);
  border-radius: var(--radio);
  padding: 12px;
  width: 100%;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
}

/* Contenedor con scroll de las matrices (paso 5 y 7). Ojo: overflow-x:auto obliga al
   navegador a tratar overflow-y como scroll también (regla del estándar CSS) — por
   eso el popup de sesión se maneja aparte, reubicado por JS fuera de este div (ver
   popup_sesion.js), y no puede depender de este contenedor para su posición. */
.tabla-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Encabezado de objetivo en las matrices (paso 5 y 7): solo "Objetivo N" — corto y
   sin necesidad de scroll horizontal — con el texto completo en un tooltip. */
table.matriz th.objetivo-col {
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
  cursor: help;
}

/* La columna de sesión no necesita ser tan ancha como la de "etiqueta" genérica de
   otras matrices — el texto ya viene acortado y el detalle completo va en el popup. */
table.matriz td.celda-sesion {
  min-width: 0;
  max-width: 210px;
}

.celda-sesion {
  cursor: help;
}

.popup-sesion {
  display: none;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--gris-300);
  box-shadow: var(--sombra);
  border-radius: var(--radio);
  padding: 12px 14px;
  width: 300px;
  max-width: 85vw;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gris-900);
  text-align: left;
  white-space: normal;
  cursor: auto;
}

.popup-sesion strong {
  display: block;
  margin-bottom: 6px;
  color: var(--azul-oscuro);
}

.popup-sesion .popup-caso {
  color: var(--gris-700);
}