@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-ExtraLight.ttf") format("truetype"); font-weight: 200; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; }

:root {
  /* Paleta de identidad Anáhuac Online: escala de grises + un acento
     naranja de uso mínimo (máximo ~6% del contenido en pantalla). */
  --gris-01: #040404; /* texto principal */
  --gris-02: #262626; /* superficies oscuras: nav, botones */
  --gris-03: #808080; /* texto secundario */
  --gris-04: #9c9c9c; /* bordes, texto terciario */
  --gris-05: #e6e6e6; /* bordes claros */
  --gris-06: #f2f2f2; /* fondo de la app */
  --blanco: #ffffff;
  --acento: #ff5900; /* usar con moderación */

  --color-fondo: var(--gris-06);
  --color-texto: var(--gris-01);
  --color-texto-secundario: var(--gris-03);
  --color-primario: var(--gris-02);
  --color-primario-oscuro: var(--gris-01);
  --color-borde: var(--gris-05);
  --color-tarjeta: var(--blanco);
  --color-aviso: #8a5a20;
  --color-error: #8a2f24;
  --radio: 20px; /* tarjetas, paneles: estilo redondeado */
  --radio-control: 12px; /* botones, campos de formulario */
  --sombra-suave: 0 1px 2px rgba(4,4,4,0.04), 0 4px 12px rgba(4,4,4,0.06);
  --sombra-hover: 0 2px 4px rgba(4,4,4,0.05), 0 10px 24px rgba(4,4,4,0.09);
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
  font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: "Manrope", sans-serif;
}

header.barra {
  background: var(--gris-02);
  color: var(--blanco);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

header.barra a {
  color: var(--gris-05);
  text-decoration: none;
  margin-left: 0.3rem;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem;
  border-radius: 8px;
  transition: background 150ms var(--ease-salida);
}
header.barra a:hover { background: rgba(255, 255, 255, 0.12); }

.icono-nav {
  width: 20px;
  height: 20px;
  /* Los íconos se descargan en gris oscuro para usarse sobre fondos
     claros; en la barra (fondo oscuro) se invierten a blanco con CSS
     en vez de mantener una segunda copia del mismo ícono en otro color. */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
header.barra a:hover .icono-nav { opacity: 1; }

header.barra .marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem; /* al tamaño de los íconos de la barra */
  margin-right: 0.6rem;
}
header.barra .marca img { height: 22px; width: auto; display: block; }
header.barra .marca img.entramado-nav { height: 26px; margin-left: 0.15rem; }

.menu-usuario { position: relative; display: inline-block; }

.disparador-menu-usuario {
  background: transparent;
  border: none;
  color: white;
  font-family: inherit;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  border-radius: 10px;
}
.disparador-menu-usuario:hover { background: rgba(255, 255, 255, 0.12); }
.usuario-nombre { font-size: 0.9rem; font-weight: 700; line-height: 1.1; }
.usuario-roles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.capsula-rol {
  background: var(--acento);
  color: var(--blanco);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: capitalize;
}
.zona-usuario { display: flex; align-items: center; gap: 0.4rem; }
.form-salir { margin: 0; }

/* Etiquetas que se despliegan a la derecha del ícono al pasar el cursor
   (barra de íconos interactiva, igual que en Ayasophya). */
.etiqueta-nav {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blanco);
  transition: max-width 260ms var(--ease-salida), opacity 200ms var(--ease-salida), margin 260ms var(--ease-salida);
}
header.barra a:hover .etiqueta-nav,
header.barra a:focus-visible .etiqueta-nav,
.boton-salir:hover .etiqueta-nav,
.boton-salir:focus-visible .etiqueta-nav { max-width: 11rem; opacity: 1; margin-left: 0.45rem; margin-right: 0.15rem; }

.boton-salir {
  background: transparent;
  border: none;
  color: var(--gris-05);
  display: inline-flex;
  align-items: center;
  padding: 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms var(--ease-salida);
}
.boton-salir:hover { background: rgba(255, 255, 255, 0.12); }

/* Sección activa: el ícono de donde estás lleva un fondo gris suave con marco,
   y su nombre se queda escrito (los demás íconos se recorren). En APRA Online
   el marco y el tono son azul de la alianza. */
header.barra a.activo,
header.barra a.activo:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
header.barra a.activo[href="/apra"],
header.barra a.activo[href="/apra"]:hover {
  background: rgba(0, 61, 165, 0.45);
  box-shadow: inset 0 0 0 1.5px #5b8de0;
}
header.barra a.activo .icono-nav { opacity: 1; }
header.barra a.activo .etiqueta-nav { max-width: 11rem; opacity: 1; margin-left: 0.45rem; margin-right: 0.15rem; }

.menu-desplegable {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 200px;
  padding: 0.4rem;
  z-index: 20;
}
.menu-desplegable.abierto { display: block; }
.barra .menu-desplegable a, .barra .menu-desplegable .opcion-menu {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  color: var(--color-texto);
  text-decoration: none;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.menu-desplegable a:hover, .menu-desplegable .opcion-menu:hover { background: var(--gris-06); }
.menu-desplegable hr { border: none; border-top: 1px solid var(--color-borde); margin: 0.4rem 0; }

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

main.main-login {
  max-width: none;
  margin: 0;
  padding: 0;
}

h1 { font-size: 1.6rem; margin-bottom: 0.3rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 700; }
p.subtitulo { color: var(--color-texto-secundario); margin-top: 0; }
/* Mismo tono oscuro que "¿Por qué Ohtli?" (.banner-porque strong), para
   subtítulos que deben pesar más que el gris claro de .subtitulo. */
p.subtitulo-fuerte { color: var(--gris-02); font-weight: 500; margin-top: 0; }

.banner-porque {
  background: var(--gris-06);
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radio-control);
  padding: 0.7rem 1rem;
  margin: 0.75rem 0 1.25rem;
}
.banner-porque strong { color: var(--gris-02); margin-right: 0.4rem; }

/* ---------- Franja de conteos rápidos (ej. "cuántos de cada tipo") ---------- */
/* Deliberadamente sin color: el naranja de acento ya está reservado para
   LA cifra de Completitud en el dashboard de Informes (ver
   .cifra-completitud) -- repetirlo aquí le quitaría el significado de
   "esta es LA cifra que importa" que tiene ahí. */
.franja-conteos { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.5rem; }
.franja-conteos .item-conteo {
  background: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  padding: 0.6rem 0.9rem;
  min-width: 84px;
  text-align: center;
}
.franja-conteos a.item-conteo {
  text-decoration: none; cursor: pointer; display: block;
  transition: box-shadow 250ms var(--ease-salida), border-color 250ms var(--ease-salida);
}
.franja-conteos a.item-conteo:hover { box-shadow: var(--sombra-hover); border-color: var(--gris-04); }
.franja-conteos .item-conteo.activo { border: 2px solid var(--gris-01); padding: calc(0.6rem - 1px) calc(0.9rem - 1px); }
.franja-conteos .item-conteo.total { background: var(--gris-02); border-color: var(--gris-02); }.franja-conteos .item-conteo.total .numero-conteo,
.franja-conteos .item-conteo.total .etiqueta-conteo { color: var(--blanco); }
/* Variante en rejilla: botones con etiquetas largas (ej. tipos de incidencia). */
.franja-conteos.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.franja-conteos.rejilla .item-conteo { min-width: 0; }
.franja-conteos .item-conteo.en-cero .numero-conteo { color: var(--gris-04); }
/* Franja de la Evaluación del aprendizaje: una línea extra bajo la etiqueta. */
.franja-evaluacion { margin: 0.4rem 0 0.5rem; }
.franja-evaluacion .item-conteo { min-width: 96px; }
.franja-conteos .sub-conteo { font-size: 0.7rem; color: var(--color-texto-secundario); margin-top: 0.15rem; }
.franja-conteos .item-conteo.total .sub-conteo { color: var(--gris-05); }
.grupo-conteos-titulo { font-size: 0.8rem; font-weight: 700; color: var(--color-texto-secundario); margin: 1.2rem 0 0; }
.franja-conteos .numero-conteo { font-size: 1.3rem; font-weight: 800; color: var(--gris-01); line-height: 1.1; }
.franja-conteos .etiqueta-conteo { font-size: 0.75rem; color: var(--color-texto-secundario); margin-top: 0.2rem; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Panel inicial: 3 columnas fijas, cada tarjeta en su lugar (--fila / --columna). */
@media (min-width: 760px) {
  .tarjetas-panel { grid-template-columns: repeat(3, 1fr); }
  .tarjetas-panel .tarjeta { grid-row: var(--fila, auto); grid-column: var(--columna, auto); }
}

.tarjeta {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 200ms var(--ease-salida), transform 200ms var(--ease-salida), border-color 200ms var(--ease-salida), background 200ms var(--ease-salida);
}
.tarjeta:hover {
  box-shadow: var(--sombra-hover);
  border-color: var(--color-primario-oscuro);
  background: var(--color-primario-oscuro);
  transform: translateY(-2px);
}
.tarjeta .icono { margin-bottom: 0.2rem; }
.tarjeta .icono img { transition: filter 150ms var(--ease-salida); }
.tarjeta:hover .icono img { filter: brightness(0) invert(1); }
.tarjeta h3 { margin: 0.5rem 0 0.25rem; font-size: 1.05rem; font-weight: 700; transition: color 150ms var(--ease-salida); }
.tarjeta:hover h3 { color: var(--acento); }
.tarjeta p { margin: 0; font-size: 0.9rem; color: var(--color-texto-secundario); }

form.caja {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.5rem;
  max-width: 420px;
  margin: 2rem auto;
}

.formulario-busqueda {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.formulario-busqueda .campo-completo { grid-column: 1 / -1; }

label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--gris-02); font-weight: 500; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], select, textarea {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--blanco);
  color: var(--color-texto);
  transition: border-color 150ms var(--ease-salida);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gris-03); }

button, .boton {
  background: var(--color-primario);
  color: var(--blanco);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radio-control);
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--ease-salida), transform 150ms var(--ease-salida), box-shadow 150ms var(--ease-salida);
}
button:hover, .boton:hover { background: var(--color-primario-oscuro); }
button:active, .boton:active { transform: scale(0.97); }
button.secundario { background: transparent; color: var(--gris-02); border: 1px solid var(--gris-04); }
button.secundario:hover { background: var(--gris-06); }

/* Mismo look que button.secundario pero para enlaces (<a>), con un punto de
   estado: lleno = disponible, vacío y punteado = pendiente de captura. */
.boton-contorno {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--gris-02);
  border: 1px solid var(--gris-04);
  padding: 0.5rem 1rem;
  border-radius: var(--radio-control);
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms var(--ease-salida), transform 150ms var(--ease-salida);
}
.boton-contorno::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gris-02);
  flex-shrink: 0;
}
a.boton-contorno:hover { background: var(--gris-06); }
a.boton-contorno:active { transform: scale(0.97); }
.boton-contorno.pendiente {
  color: var(--gris-03);
  border-style: dashed;
  font-weight: 500;
  cursor: default;
}
.boton-contorno.pendiente::before { background: transparent; border: 1.5px solid var(--gris-03); }
a.boton-contorno.pendiente { cursor: pointer; }

.mensaje-error {
  background: #f7eceA;
  color: var(--color-error);
  border: 1px solid #e3c6bd;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-control);
  margin-bottom: 1rem;
}

.mensaje-ok {
  background: var(--gris-06);
  color: var(--gris-01);
  border: 1px solid var(--gris-05);
  padding: 0.75rem 1rem;
  border-radius: var(--radio-control);
  margin-bottom: 1rem;
}

.mensaje-aviso {
  background: #f7f1e8;
  color: var(--color-aviso);
  border: 1px solid #e6d5bb;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-control);
  margin-bottom: 1rem;
}

.resultado-programa {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: box-shadow 200ms var(--ease-salida), transform 200ms var(--ease-salida), border-color 200ms var(--ease-salida), background 200ms var(--ease-salida);
}
/* Estándar de tarjeta clicable en toda su superficie, mismo tratamiento
   que .tarjeta del panel de inicio: cualquier punto de la tarjeta abre
   la ficha, con el mismo resalte oscuro al pasar el cursor. Los enlaces
   internos (ej. "vinculado con...") llevan event.stopPropagation() para
   no disparar también la apertura de esta ficha. */
.resultado-programa:hover {
  box-shadow: var(--sombra-hover);
  border-color: var(--color-primario-oscuro);
  background: var(--color-primario-oscuro);
  transform: translateY(-2px);
}
.resultado-programa:hover h3 { color: var(--acento); }

/* ---------- Resultados de Consultar programas ---------- */

.resultado-programa .tipo-programa-etiqueta { color: var(--color-texto-secundario); font-size: 0.8rem; margin: 0 0 0.2rem; }
.resultado-programa h3 { margin: 0 0 0.2rem; font-weight: 600; color: var(--gris-01); transition: color 150ms var(--ease-salida); }
.resultado-programa .area { color: var(--color-texto-secundario); font-size: 0.85rem; margin-bottom: 0.6rem; }
/* Oscuro por default para que se lea bien sobre el fondo blanco (el gris
   secundario resultaba demasiado claro con tanta información junta); se
   aclara solo en :hover, donde el fondo se vuelve casi negro y el mismo
   tono oscuro sería invisible. */
.resultado-modulo h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.resultado-modulo .clave-modulo { font-size: 0.8rem; font-weight: 500; color: var(--color-texto-secundario); margin-left: 0.4rem; transition: color 150ms var(--ease-salida); }
.resultado-modulo .programa-del-modulo { font-size: 0.85rem; color: var(--color-texto-secundario); transition: color 150ms var(--ease-salida); }
.resultado-modulo:hover .clave-modulo, .resultado-modulo:hover .programa-del-modulo { color: var(--gris-05); }
.formulario-busqueda .nota-filtros { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--color-texto-secundario); border-top: 1px solid var(--color-borde); padding-top: 0.7rem; }
.resultado-programa .motivos { font-size: 0.88rem; color: var(--gris-02); transition: color 150ms var(--ease-salida); }
.resultado-programa .motivos li { margin-bottom: 0.25rem; }
.resultado-programa:hover .motivos { color: var(--gris-06); }

.etiqueta-duplicado {
  display: inline-block;
  background: #fff1e6;
  color: var(--acento);
  border: 1px solid #ffd3b0;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.78rem;
  margin-left: 0.5rem;
  font-weight: 600;
}

.aviso-revision {
  display: inline-block;
  background: var(--gris-06);
  color: var(--gris-02);
  border: 1px solid var(--color-borde);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.78rem;
  margin-left: 0.5rem;
}

.insignia-proximamente {
  display: inline-block;
  background: var(--gris-06);
  color: var(--gris-02);
  border: 1px solid var(--color-borde);
  padding: 0.1rem 0.5rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  vertical-align: middle;
}

.tarjeta.proximamente { cursor: default; }
.tarjeta.proximamente:hover {
  box-shadow: var(--sombra-suave);
  border-color: var(--color-borde);
  background: var(--color-tarjeta);
  transform: none;
}
.tarjeta.proximamente:hover h3 { color: inherit; }
.tarjeta.proximamente:hover .icono img { filter: none; }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-borde); font-size: 0.9rem; }
th { color: var(--color-texto-secundario); font-weight: 600; }

.vacio { color: var(--color-texto-secundario); padding: 2rem 0; text-align: center; }
.oculto { display: none; }

.panel {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.panel h2 { font-size: 1rem; }
.panel-aviso { background: #fff8f0; border-color: #ffd3b0; }
.panel-exito { background: #f0f7f0; border-color: #bfe3bf; color: #2f5a2f; font-weight: 600; }

/* ---------- Dashboard de completitud ---------- */

/* Fichas anchas: mismo look que cualquier .panel del resto de la app
   (fondo claro, texto negro/gris) -- nada de tratamientos especiales
   ni gráficos grandes que se salgan de esa línea. Se les llama
   "anchas" porque ocupan las tres columnas del grid normal de
   tarjetas, no porque tengan un estilo distinto. */
.ficha-ancha { padding: 1.5rem; margin-bottom: 1.5rem; }

.columnas-avance-general { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.columna-completitud { flex: 0 0 auto; }
.columna-preocupa { flex: 1 1 260px; }
.columna-totales { flex: 0 0 auto; font-size: 0.9rem; }

/* La cifra de Completitud es la ÚNICA que va en naranja en todo el
   dashboard -- es "el indicador global de avance" del que habla
   Ángel; todo lo demás se queda en la escala de grises. */
.cifra-completitud { font-size: 2.6rem; font-weight: 800; color: var(--acento); line-height: 1; }
/* Avance ponderado no es "el indicador global de avance" -- se queda
   en la escala de grises, como todo lo demás. */
.cifra-ponderado { font-size: 2.6rem; font-weight: 800; color: var(--gris-01); line-height: 1; }
.etiqueta-completitud { font-size: 0.85rem; font-weight: 600; color: var(--gris-01); margin-top: 0.3rem; }
.etiqueta-completitud em { font-style: italic; font-weight: 400; color: var(--color-texto-secundario); }

.sin-programas { font-style: italic; color: var(--color-texto-secundario); margin: 0.5rem 0; }

.tarjetas-completitud { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.indicador-completitud h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.indicador-completitud .conteo { color: var(--color-texto-secundario); font-size: 0.85rem; margin-bottom: 0.5rem; }

.barra-completitud {
  background: var(--gris-06);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
  position: relative;
}
.barra-completitud .relleno {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 1400ms cubic-bezier(.16,.84,.32,1);
}
/* Escala de grises para todo salvo Completitud: negro cuando se
   supera el 90%, tonos de gris para el resto -- entre más completo,
   más oscuro. */
.relleno.nivel-alto { background: var(--gris-01); }
.relleno.nivel-medio { background: var(--gris-03); }
.relleno.nivel-bajo { background: var(--gris-04); }
.porcentaje-completitud.nivel-alto { color: var(--gris-01); }
.porcentaje-completitud.nivel-medio { color: var(--gris-03); }
.porcentaje-completitud.nivel-bajo { color: var(--gris-04); }

.porcentaje-completitud { font-weight: 700; font-size: 0.95rem; margin: 0.4rem 0 0.6rem; }

/* ---------- Barra apilada de distribución (programas / módulos) ---------- */

/* Una sola barra dividida en segmentos -- el ancho de cada segmento es
   su % de participación sobre EL TOTAL DEL PORTAFOLIO. El gris de cada
   segmento no representa "qué tan completo" está algo (aquí no aplica
   esa escala), solo distingue una unidad de la siguiente; por eso
   llevan un borde claro entre sí y una leyenda debajo con el nombre. */
.barra-apilada {
  display: flex; width: 100%; height: 28px; border-radius: 999px; overflow: hidden;
  background: var(--gris-06); margin-top: 0.5rem;
}
.segmento-apilado {
  height: 100%; width: 0%; border-right: 2px solid var(--blanco);
  transition: width 1200ms cubic-bezier(.16,.84,.32,1);
}
.segmento-apilado:last-child { border-right: none; }
.tono-1 { background: var(--gris-02); }
.tono-2 { background: var(--gris-03); }
.tono-3 { background: var(--gris-04); }
.tono-4 { background: var(--gris-05); }
/* "Sin asignar" no es una unidad real -- lleva su propio patrón
   rayado en vez de un tono sólido, para que siempre se distinga sin
   importar en qué posición caiga dentro de la barra. */
.segmento-sin-asignar { background-color: var(--gris-06); background-image: repeating-linear-gradient(45deg, transparent 0 4px, var(--gris-04) 4px 8px); }

.leyenda-apilada {
  list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  font-size: 0.82rem; color: var(--color-texto-secundario);
}
.chip-leyenda { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

/* ---------- Panel por unidad de producción (lista lateral) ---------- */

.panel-unidades-split { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 1.25rem; align-items: start; }
.lista-unidades { display: flex; flex-direction: column; gap: 0.4rem; position: sticky; top: 1rem; }
.lista-unidades .boton-unidad {
  text-align: left; padding: 0.6rem 0.9rem; border-radius: var(--radio-control); white-space: normal;
  background: var(--color-tarjeta); color: var(--color-texto); border: 1px solid var(--color-borde);
  font-size: 0.85rem; cursor: pointer;
}
.lista-unidades .boton-unidad:hover { border-color: var(--gris-04); }
.lista-unidades .boton-unidad.activo { background: var(--gris-02); color: #fff; border-color: var(--gris-02); }
.detalle-unidad { min-width: 0; }

.panel-unidad { display: none; }
.panel-unidad.activo { display: block; }

/* Resumen de cada unidad: el número de programas va tan grande como el
   porcentaje -- antes el conteo era una línea de texto chiquita. Sin
   naranja aquí: es un número por unidad, no "el" indicador global. */
.resumen-unidad { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.cifra-conteo-unidad, .cifra-porcentaje-unidad { font-size: 2.2rem; font-weight: 800; color: var(--gris-01); line-height: 1; }

@media (max-width: 720px) {
  .panel-unidades-split { grid-template-columns: 1fr; }
  .lista-unidades { flex-direction: row; flex-wrap: wrap; position: static; }
}

/* ---------- APRA Online ---------- */

.apra-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.apra-encabezado-unidad { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.apra-encabezado-unidad h2 { margin: 0; }
.apra-tabla-contenedor { overflow-x: auto; }
.apra-subtitulo-indicador { font-size: 0.85rem; color: var(--color-texto-secundario); margin: 1rem 0 0.3rem; }
.apra-subtitulo-tabla { font-size: 0.95rem; margin: 1.5rem 0 0; }

/* APRA Online -- dashboard.
   El azul de la alianza (#003DA5) sustituye al naranja SOLO en esta pantalla: la
   variable se redefine dentro de main.apra, así el resto del sitio (menú incluido)
   conserva su acento. Todo lo demás va en la escala de grises. */
main.main-ancho { max-width: 1280px; }
main.apra { --apra-azul: #003DA5; --acento: #003DA5; }

.apra-actualizado { color: var(--color-texto-secundario); font-size: 0.82rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }
.apra-error { color: var(--color-error); }
.apra-titulo-seccion { font-size: 1.1rem; margin: 2rem 0 0.75rem; }

.apra-barra { display: flex; background: var(--gris-05); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 0.6rem; }
.apra-barra-grande { height: 18px; margin-top: 0; }
.apra-barra-listo { background: var(--apra-azul); height: 100%; transition: width 1200ms var(--ease-salida); }
.apra-barra-marcha { background: var(--gris-04); height: 100%; transition: width 1200ms var(--ease-salida); }

.apra-global { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); padding: 1.5rem 1.75rem; }
.apra-cifra { font-size: 2.2rem; font-weight: 800; color: var(--apra-azul); line-height: 1; display: inline-block; }
.apra-cifra-grande { font-size: 3.4rem; }
.apra-cifra-media { font-size: 1.6rem; }
.apra-cifra-etiqueta { font-size: 0.8rem; color: var(--color-texto-secundario); margin-left: 0.4rem; }
.apra-global-cifra .apra-cifra-etiqueta { display: block; margin: 0.3rem 0 0; }
.apra-leyenda { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; gap: 1.2rem; font-size: 0.8rem; color: var(--color-texto-secundario); }
.apra-leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.apra-muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.apra-muestra-listo { background: var(--apra-azul); }
.apra-muestra-marcha { background: var(--gris-04); }
.apra-muestra-vacio { background: var(--gris-05); }
.apra-meta { font-size: 0.8rem; color: var(--color-texto-secundario); margin: 0.6rem 0 0; }

.apra-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.apra-tarjeta { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); transition: box-shadow 200ms var(--ease-salida), border-color 200ms var(--ease-salida), transform 200ms var(--ease-salida); }
.apra-tarjeta:hover { box-shadow: var(--sombra-hover); border-color: var(--apra-azul); }
.apra-tarjeta[open] { grid-column: 1 / -1; border-color: var(--apra-azul); }
.apra-tarjeta > summary { list-style: none; cursor: pointer; padding: 1.25rem; position: relative; }
.apra-tarjeta > summary::-webkit-details-marker { display: none; }
.apra-tarjeta > summary::after { content: "+"; position: absolute; top: 1rem; right: 1.25rem; font-size: 1.4rem; line-height: 1; color: var(--gris-03); }
.apra-tarjeta[open] > summary::after { content: "–"; color: var(--apra-azul); }
.apra-tarjeta h3, .apra-tarjeta h4 { margin: 0.5rem 0 0.35rem; padding-right: 1.6rem; font-weight: 700; }
.apra-tarjeta h3 { font-size: 1.05rem; }
.apra-tarjeta h4 { font-size: 0.98rem; }
.apra-chip { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--gris-03); background: var(--gris-06); border: 1px solid var(--color-borde); border-radius: 999px; padding: 0 0.55rem; }
.apra-detalle { padding: 0 1.25rem 1.25rem; }
.apra-acciones-detalle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.apra-tarjetas-modulos .apra-modulo { background: var(--gris-06); box-shadow: none; }
.apra-tarjetas-modulos .apra-modulo[open] { background: var(--blanco); }

.apra-tabla { background: var(--blanco); border: 1px solid var(--color-borde); border-radius: var(--radio-control); overflow: hidden; }
.apra-fila { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(170px, 1.1fr) 130px auto; gap: 0.75rem; align-items: center; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--color-borde); font-size: 0.88rem; }
.apra-tabla > :last-child, .apra-tabla > details:last-child > .apra-recursos > .apra-fila:last-child { border-bottom: none; }
.apra-fila-encabezado { background: var(--gris-06); color: var(--color-texto-secundario); font-weight: 600; font-size: 0.78rem; }
details.apra-unidad > summary { list-style: none; cursor: pointer; }
details.apra-unidad > summary::-webkit-details-marker { display: none; }
details.apra-unidad > summary > :first-child .apra-nombre::before { content: "▸ "; color: var(--gris-03); }
details.apra-unidad[open] > summary > :first-child .apra-nombre::before { content: "▾ "; }
details.apra-unidad > summary:hover { background: var(--gris-06); }
.apra-recursos { background: var(--gris-06); }
.apra-recursos .apra-fila { padding-left: 2rem; }
.apra-nombre { font-weight: 600; }
.apra-sub { font-size: 0.75rem; color: var(--color-texto-secundario); margin-top: 0.15rem; }
.apra-avance-texto { font-size: 0.78rem; }
.apra-acciones { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.apra-abrir { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--gris-02); border: 1px solid var(--gris-04); border-radius: var(--radio-control); padding: 0.25rem 0.65rem; text-decoration: none; white-space: nowrap; transition: background 150ms var(--ease-salida), color 150ms var(--ease-salida), border-color 150ms var(--ease-salida); }
.apra-abrir:hover { background: var(--apra-azul); border-color: var(--apra-azul); color: var(--blanco); }

.apra-estado { display: inline-block; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--color-borde); white-space: nowrap; }
.estado-listo { background: var(--apra-azul); color: var(--blanco); border-color: var(--apra-azul); }
.estado-en_revision { background: var(--gris-03); color: var(--blanco); border-color: var(--gris-03); }
.estado-en_proceso { background: var(--gris-05); color: var(--gris-01); }
.estado-en_produccion { background: var(--gris-05); color: var(--gris-01); border-color: var(--apra-azul); }
.estado-en_posproduccion { background: var(--gris-03); color: var(--blanco); border-color: var(--gris-03); }
.estado-sin_iniciar { background: var(--blanco); color: var(--gris-03); }
.estado-atrasado { background: var(--blanco); color: var(--gris-01); border: 2px solid var(--gris-01); }
.estado-atrasado::before { content: "▲ "; font-size: 0.65rem; }
.estado-detenido, .estado-otro, .estado-sin_dato { background: var(--blanco); color: var(--gris-04); border-style: dashed; }

.apra-espacio-extra { margin-top: 1rem; border: 1px dashed var(--gris-04); border-radius: var(--radio-control); padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--color-texto-secundario); }
.apra-espacio-extra strong { display: block; color: var(--gris-02); margin-bottom: 0.15rem; }
.apra-pie { color: var(--color-texto-secundario); font-size: 0.8rem; margin-top: 2rem; }

@media (max-width: 720px) {
  .apra-global { grid-template-columns: 1fr; gap: 1rem; }
  .apra-fila { grid-template-columns: 1fr; gap: 0.4rem; }
  .apra-fila-encabezado { display: none; }
}

/* ---------- Tablero de análisis comparativo ---------- */

.tablero-comparativo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.tarjeta-programa-comp {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 1.1rem;
}
.tarjeta-programa-comp h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.tarjeta-programa-comp .meta { font-size: 0.82rem; color: var(--color-texto-secundario); margin-bottom: 0.5rem; line-height: 1.5; }
.tarjeta-programa-comp .tematicas { font-size: 0.88rem; margin-bottom: 0.5rem; }
.tarjeta-programa-comp .riesgo { font-size: 0.85rem; background: var(--gris-06); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }

.badge-similitud {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  margin-bottom: 0.5rem;
  background: var(--gris-06);
  color: var(--gris-02);
  border: 1px solid var(--color-borde);
}
.badge-similitud.alta { background: #fff1e6; color: var(--acento); border-color: #ffd3b0; }

.tarjeta-programa-comp details { margin-top: 0.4rem; }
.tarjeta-programa-comp summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-02);
  padding: 0.3rem 0;
}
.tarjeta-programa-comp .materia-item { padding: 0.5rem 0; border-top: 1px solid var(--color-borde); }
.tarjeta-programa-comp .materia-item summary { font-weight: 500; }
.tarjeta-programa-comp .materia-item .cuerpo { font-size: 0.82rem; color: var(--color-texto-secundario); padding-top: 0.35rem; line-height: 1.5; }

.errc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
@media (max-width: 640px) { .errc-grid { grid-template-columns: 1fr; } }

.errc-caja {
  background: var(--gris-06);
  border-radius: var(--radio);
  padding: 1.1rem;
}
.errc-caja.crear { background: #fff1e6; }
.errc-caja h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.errc-caja.crear h3 { color: var(--acento); }
.errc-caja .vacio-errc { font-size: 0.85rem; color: var(--color-texto-secundario); padding: 0; }

.errc-chip {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
}
.errc-chip summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  list-style: none;
}
.errc-chip summary::-webkit-details-marker { display: none; }
.errc-chip summary::before { content: "+ "; color: var(--color-texto-secundario); }
.errc-chip[open] summary::before { content: "− "; }
.errc-chip .justificacion { font-size: 0.85rem; color: var(--color-texto-secundario); margin-top: 0.4rem; line-height: 1.5; }

.lineas-accion { display: grid; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.linea-accion {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  padding: 0.8rem 1rem;
}
.linea-accion h4 { margin: 0 0 0.25rem; font-size: 0.92rem; }
.linea-accion p { margin: 0; font-size: 0.87rem; color: var(--color-texto-secundario); }

/* ---------- Pantalla de inicio de sesión ---------- */

.pantalla-login {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gris-01);
  color: var(--blanco);
  overflow: hidden;
  padding: 2rem 1.25rem;
}

.pantalla-login .fondo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pantalla-login .fondo-oscurecido {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(4,4,4,0.55) 0%, rgba(4,4,4,0.65) 55%, rgba(4,4,4,0.85) 100%);
}

.login-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
}

.login-contenido img.logo-aol {
  height: 34px;
  width: auto;
  margin-bottom: 2.2rem;
}

.login-contenido h1.bienvenida {
  font-size: 1.7rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.login-contenido h1.bienvenida strong { font-weight: 800; }
.login-contenido h1.bienvenida .marca-ohtli { color: var(--acento); font-weight: 700; }

.login-contenido p.instruccion {
  color: var(--gris-04);
  text-align: center;
  margin: 0 0 1.8rem;
  font-size: 0.95rem;
}

form.caja-login {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radio);
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}

form.caja-login label { color: var(--gris-05); }
form.caja-login input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--blanco);
}
form.caja-login input::placeholder { color: var(--gris-04); }
form.caja-login input:focus { border-color: var(--acento); }

form.caja-login button {
  width: 100%;
  background: var(--acento);
  margin-top: 0.4rem;
}
form.caja-login button:hover { background: #e04f00; }

.pie-login {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  text-align: center;
  color: var(--gris-04);
  font-size: 0.78rem;
  max-width: 420px;
}

/* ---------- Nuevo programa: ficha técnica progresiva ---------- */

.seccion-ficha {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  margin-bottom: 1rem;
  padding: 0 1.25rem;
}
.seccion-ficha summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gris-01);
}
.seccion-ficha summary::-webkit-details-marker { display: none; }
.seccion-ficha summary::before { content: "+ "; color: var(--color-texto-secundario); }
.seccion-ficha[open] summary::before { content: "\2212 "; }
.seccion-ficha .cuerpo-seccion { padding-bottom: 1.25rem; }
.seccion-ficha h3 { font-size: 0.9rem; margin: 1.25rem 0 0.5rem; }

.fila-lista {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  border-top: 1px solid var(--color-borde);
  padding: 0.6rem 0;
}
.fila-lista:first-child { border-top: none; }
.fila-lista form:first-child { flex: 1; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.fila-lista .eliminar-fila { flex-shrink: 0; }

.clave-materia { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.clave-materia code {
  background: var(--gris-06);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.clave-pendiente {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--acento);
  background: #fff1e6;
  border: 1px solid #ffd3b0;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.clave-validada {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2f5a2f;
  background: #f0f7f0;
  border: 1px solid #bfe3bf;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ---------- Ficha flotante (perfil + edición de usuario) ---------- */

dialog.ficha-flotante {
  border: none;
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  padding: 1.5rem;
  /* Más ancha (antes 520px, se sentía angosta para la cantidad de
     información) sin fijar un alto -- sigue creciendo con el contenido
     como ya hacía. Mismo max-width que .main, para no rebasar el ancho
     de contenido ya establecido en el resto del sitio. */
  max-width: 900px;
  width: 90%;
}
dialog.ficha-flotante::backdrop { background: rgba(4, 4, 4, 0.55); }

/* Aprovecha el ancho nuevo emparejando los bloques cortos en dos
   columnas, en vez de dejar párrafos de una sola columna estirados de
   punta a punta (líneas demasiado largas para leerse cómodo). */
.ficha-flotante-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .ficha-flotante-grid-2col { grid-template-columns: 1fr; } }

.ficha-flotante-perfil {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-borde);
}

/* Detalle de un módulo dentro de la ficha flotante -- mismo tratamiento
   compacto de "chip" plegable que .errc-chip, con nombre propio porque
   aquí no tiene nada que ver con ERRC. */
.modulo-flotante-chip {
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
}
.modulo-flotante-chip summary {
  cursor: pointer;
  font-size: 0.88rem;
  list-style: none;
}
.modulo-flotante-chip summary::-webkit-details-marker { display: none; }
.modulo-flotante-chip summary::before { content: "+ "; color: var(--color-texto-secundario); }
.modulo-flotante-chip[open] summary::before { content: "\2212 "; }
.modulo-flotante-chip .cuerpo-modulo {
  padding: 0.5rem 0 0.2rem 1rem;
  margin-top: 0.35rem;
  border-left: 2px solid var(--color-borde);
  font-size: 0.88rem;
}
.modulo-flotante-chip .cuerpo-modulo .unidad + .unidad { margin-top: 0.5rem; }
.modulo-flotante-chip .cuerpo-modulo .unidad p { margin: 0; }
.modulo-flotante-chip .cuerpo-modulo .unidad .nombre-unidad { font-weight: 600; }
.modulo-flotante-chip .cuerpo-modulo .unidad .temas-unidad { white-space: pre-line; margin-top: 0.15rem; }

/* Datos generales del programa bajo "Propuesta de valor" / "Segmento de
   mercado" en la ficha flotante: coordinador, duración, número de módulos. */
.ficha-flotante-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem 1.5rem; margin-bottom: 0.9rem; padding: 0.7rem 0;
  border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde);
}
.ficha-flotante-datos .vacio, .modulo-flotante-chip .cuerpo-modulo .vacio { padding: 0; text-align: left; }
.ficha-flotante-etiqueta {
  margin: 0 0 0.25rem; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--color-texto-secundario);
}

/* Historial de docentes de un módulo: una fila por arranque. */
.historial-docentes { max-height: 11rem; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--color-borde); border-radius: 10px; }
.historial-docentes table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.historial-docentes th {
  position: sticky; top: 0; background: var(--gris-06); text-align: left;
  padding: 0.35rem 0.6rem; font-weight: 600; color: var(--color-texto-secundario);
}
.historial-docentes td { padding: 0.3rem 0.6rem; border-top: 1px solid var(--color-borde); }
.historial-docentes .nota-experto { margin-left: 0.4rem; font-size: 0.72rem; color: var(--color-texto-secundario); }
/* ---------- Evaluación del aprendizaje: tablero ---------- */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi-card h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.kpi-indicador { background: var(--gris-06); border-radius: var(--radio-control); padding: 1rem; }
.kpi-cifra { font-size: 2.4rem; font-weight: 800; color: var(--gris-01); line-height: 1.05; }
.kpi-detalle { margin: 0.25rem 0 0.6rem; font-size: 0.82rem; color: var(--color-texto-secundario); }
.kpi-card .barra-completitud { height: 10px; }

.tabla-tablero { overflow-x: auto; }
.tabla-tablero table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla-tablero th {
  text-align: left; padding: 0.45rem 0.7rem; font-weight: 600; white-space: nowrap;
  color: var(--color-texto-secundario); border-bottom: 1px solid var(--color-borde);
}
.tabla-tablero td { padding: 0.45rem 0.7rem; border-top: 1px solid var(--color-borde); vertical-align: middle; }
.valor-mini { display: inline-block; min-width: 2.6rem; font-weight: 600; }
.mini-barra {
  display: inline-block; vertical-align: middle; width: 70px; height: 8px;
  background: var(--gris-06); border-radius: 999px; overflow: hidden;
}
.mini-barra .relleno {
  display: block; height: 100%; width: 0%; background: var(--gris-02); border-radius: 999px;
  transition: width 1200ms cubic-bezier(.16,.84,.32,1);
}

.chips-evaluacion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 0.6rem; }
.chip-eval {
  font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--gris-06); border: 1px solid var(--gris-05);
}

/* Gráficos interactivos de la Evaluación del aprendizaje (ECharts). */
.filtros-graficos { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros-graficos > div { min-width: 200px; }
.filtros-graficos .filtros-fila-completa { flex-basis: 100%; border-top: 1px solid var(--color-borde); padding-top: 0.8rem; min-width: 0; }
.filtros-recorte { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-end; margin-top: 0.3rem; }
.filtros-recorte > div { min-width: 190px; }
.controles-grafico { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: flex-start; margin-bottom: 0.6rem; }
.controles-grafico > div { min-width: 180px; }
.selector-entidades { flex: 1 1 320px; }
.selector-uno { flex: 1 1 320px; }
.selector-uno[hidden] { display: none; }
.etiqueta-campo { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--gris-02); font-weight: 500; }
.casillas-indicadores { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding-top: 0.2rem; }
.casilla { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; margin: 0; cursor: pointer; }
.casilla input { width: auto; margin: 0; }
.chips-entidades { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip-entidad {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; padding: 0.2rem 0.3rem 0.2rem 0.6rem;
  background: var(--gris-06); border: 1px solid var(--gris-05); border-left: 4px solid var(--gris-04); border-radius: 999px;
}
.chip-entidad button {
  border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.3rem;
  color: var(--color-texto-secundario); border-radius: 999px;
}
.chip-entidad button:hover { background: var(--gris-05); color: var(--gris-01); }
.grafico { width: 100%; height: 420px; transition: opacity 250ms var(--ease-salida); }
.grafico.cargando { opacity: 0.45; }
.vista-tabla { margin-top: 0.6rem; }
.vista-tabla summary { cursor: pointer; font-size: 0.85rem; color: var(--color-texto-secundario); }

/* Rankings de la Evaluación del aprendizaje. */
.rankings-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tabla-ranking td { vertical-align: top; }
.pos-ranking { width: 2rem; color: var(--color-texto-secundario); font-weight: 700; }
.valor-ranking { font-weight: 700; white-space: nowrap; }
.programas-ranking { font-size: 0.78rem; color: var(--color-texto-secundario); margin-top: 0.15rem; }
.formulario-ranking { margin-bottom: 0.8rem; }

/* Evaluación del aprendizaje dentro de la ficha flotante. */
.evaluacion-bloque { margin-bottom: 0.9rem; }
.evaluacion-nota { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--color-texto-secundario); }
.evaluacion-tabla { border: 1px solid var(--color-borde); border-radius: 10px; overflow-x: auto; }
.evaluacion-tabla table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.evaluacion-tabla th {
  background: var(--gris-06); text-align: left; padding: 0.35rem 0.6rem;
  font-weight: 600; color: var(--color-texto-secundario); white-space: nowrap;
}
.evaluacion-tabla td { padding: 0.3rem 0.6rem; border-top: 1px solid var(--color-borde); }
.evaluacion-detalle { margin-top: 0.5rem; }
.nota-eval { font-size: 0.78rem; color: var(--color-texto-secundario); }
.etiqueta-representativa {
  font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: var(--gris-02); color: var(--blanco);
}

.foto-perfil {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.foto-perfil-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-02);
  color: var(--blanco);
  font-weight: 700;
  font-size: 1.2rem;
}

/* ---------- Arranques: acordeón (un renglón por arranque) ---------- */

.seccion-arranque summary { display: flex; }
.arranque-resumen { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.arranque-resumen-ciclo, .arranque-resumen-fecha {
  font-size: 0.78rem; font-weight: 400; color: var(--color-texto-secundario);
}
.arranque-resumen-pasado {
  font-size: 0.68rem; font-weight: 700; color: var(--color-texto-secundario);
  background: var(--gris-06); border-radius: 999px; padding: 0.1rem 0.5rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* Misma familia visual que .resultado-programa (panel de Consultar
   programas): tarjeta con borde/sombra suave, clave+nombre grandes en
   la primera línea y el programa como segunda línea secundaria -- aquí
   sin el hover invertido de esa porque esta tarjeta trae botones
   propios en vez de abrir algo al hacer clic en cualquier punto. */
.tarjeta-modulo-arranque {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--sombra-suave);
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
}
.tarjeta-modulo-arranque:last-child { margin-bottom: 0; }
.tarjeta-modulo-info { flex: 1; min-width: 260px; }
.tarjeta-modulo-info h4 { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 700; color: var(--gris-01); }
.clave-badge {
  display: inline-block; background: var(--gris-06); color: var(--gris-01);
  padding: 0.2rem 0.55rem; border-radius: 8px; font-weight: 700; font-size: 0.82rem; margin-right: 0.5rem;
}
.tarjeta-modulo-programa { margin: 0; font-size: 0.85rem; color: var(--color-texto-secundario); }

.fila-modulo-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; flex-shrink: 0; max-width: 100%; }
.fila-modulo-acciones button {
  background: none; border: none; padding: 0; font-size: 0.72rem; color: var(--color-texto-secundario);
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.fila-modulo-acciones button:hover { color: var(--color-error, #b3261e); }

/* ---------- Buscador "Agregar módulo" (dentro del diálogo flotante) ---------- */

#filtro-agregar-modulo, #filtro-unidad-agregar-modulo { width: 100%; margin-bottom: 0.6rem; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
.lista-agregar-modulo { max-height: 55vh; overflow-y: auto; }

.tarjeta-materia {
  position: relative;
  background: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-control);
  box-shadow: var(--sombra-suave);
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.tarjeta-materia:hover { border-color: var(--gris-04); }
.tarjeta-materia-programa { font-size: 0.75rem; color: var(--color-texto-secundario); margin-top: 0.2rem; }
.tarjeta-materia-historial { font-size: 0.72rem; color: var(--acento); margin-top: 0.25rem; }

.tarjeta-materia.tarjeta-sugerida { border-color: var(--acento); background: #fff8f2; }
.etiqueta-sugerida {
  display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--acento);
  background: #fff0e2; border: 1px solid #ffd3ac; border-radius: 999px;
  padding: 0.1rem 0.5rem; text-transform: uppercase; letter-spacing: 0.02em;
  margin-left: 0.4rem; vertical-align: middle;
}

.fila-duracion { display: flex; gap: 0.5rem; }
.fila-duracion > div { flex: 1; display: flex; flex-direction: column; }
.fila-duracion input { text-align: center; }
.fila-duracion small { color: var(--color-texto-secundario); font-size: 0.72rem; margin-top: 0.2rem; text-align: center; }

.entrada-etiquetas {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  border: 1px solid var(--color-borde); border-radius: var(--radio-control);
  padding: 0.5rem 0.6rem;
}
.entrada-etiquetas .lista-etiquetas { display: contents; }
.etiqueta-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--gris-06); border: 1px solid var(--color-borde); border-radius: 999px;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem; font-size: 0.82rem; white-space: nowrap;
}
.etiqueta-pill button {
  background: none; border: none; cursor: pointer; color: var(--color-texto-secundario);
  font-size: 1rem; line-height: 1; padding: 0.1rem 0.35rem; border-radius: 999px;
}
.etiqueta-pill button:hover { background: var(--gris-05); color: var(--color-texto); }
.entrada-etiquetas-texto {
  border: none; outline: none; flex: 1; min-width: 140px; padding: 0.15rem 0; font: inherit;
}

/* ── Editor de contenido (Producción) ───────────────────────────────── */
.ayuda-campo { font-size: 0.82rem; color: var(--color-texto-secundario); margin: 0.35rem 0 0.9rem; }
.ayuda-campo code { background: var(--gris-06); padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.78rem; }

.editor-formulario { max-width: 760px; }
.editor-formulario .campo-completo { margin-bottom: 0.9rem; }
.editor-subtitulo { font-size: 0.95rem; margin: 1.25rem 0 0.25rem; }
.editor-dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.editor-tres-columnas { display: grid; grid-template-columns: 1.3fr 0.7fr 1.6fr; gap: 0.9rem; margin-bottom: 0.9rem; }
@media (max-width: 760px) { .editor-tres-columnas { grid-template-columns: 1fr; } }

.editor-renombrar { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 560px; margin-bottom: 1.25rem; align-items: center; }
.editor-renombrar input[type=text] { flex: 1 1 180px; min-width: 0; }

.editor-modulo { margin-bottom: 1rem; }
.editor-modulo-cabecera { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.9rem; }
.editor-acciones { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.editor-acciones form { margin: 0; }
.editor-clave { background: var(--gris-06); padding: 0.15rem 0.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; margin-left: 0.4rem; vertical-align: middle; }
.editor-datos-modulo .campo-completo { margin-bottom: 0.9rem; }
.editor-datos-desplegable { margin-bottom: 1.5rem; }
.editor-datos-desplegable summary { cursor: pointer; }
.editor-datos-desplegable .editor-datos-modulo { margin-top: 1rem; }
.editor-barra-modulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.editor-flechas { display: flex; gap: 0.25rem; }
.editor-flechas form { margin: 0; }
.editor-flechas button, .editor-modulo-cabecera .editor-acciones button.secundario { padding: 0.3rem 0.65rem; }
.editor-tabla-hojas td { vertical-align: middle; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:active { transform: none; }

.tabla-desplazable { overflow-x: auto; }

/* ── Editor de una unidad (pantalla ancha: vista previa + panel) ───── */
main.main-ancho { max-width: none; padding: 1rem 1.25rem 1.5rem; }
.eu-barra { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.eu-barra-titulo h1 { margin: 0.1rem 0 0; font-size: 1.35rem; }
.eu-contexto { font-size: 0.82rem; color: var(--color-texto-secundario); }
.eu-sin-curso { color: var(--color-error); }
.eu-barra-acciones { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.eu-estado { font-size: 0.8rem; color: var(--color-texto-secundario); margin-right: 0.4rem; }
.eu-estado-error { color: var(--color-error); font-weight: 600; }
.eu-estado-aviso { color: var(--gris-01); font-weight: 600; }

.eu-avisos { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio-control); padding: 0.45rem 0.9rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.eu-avisos summary { cursor: pointer; font-weight: 600; }
.eu-avisos ul { margin: 0.5rem 0 0.2rem 1.1rem; padding: 0; }
.eu-aviso-error { color: var(--color-error); }
.eu-aviso-aviso { color: var(--color-aviso); }
.eu-aviso-info { color: var(--gris-03); }
.eu-archivo { margin-top: 0.8rem; padding: 0.6rem 0.8rem; background: var(--gris-06); border-radius: var(--radio-control); font-size: 0.85rem; }
.eu-archivo p { margin: 0 0 0.25rem; }

.eu-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1rem; align-items: start; }
.eu-vista { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); overflow: hidden; }
.eu-anchos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--color-borde); background: var(--gris-06); }
.eu-anchos-etiqueta { font-size: 0.8rem; color: var(--gris-03); margin-right: 0.2rem; }
.eu-anchos .eu-ancho { padding: 0.25rem 0.65rem !important; font-size: 0.8rem; }
.eu-anchos .eu-ancho-activo { background: var(--gris-02) !important; color: #fff !important; border-color: var(--gris-02) !important; }
.eu-anchos-info { font-size: 0.78rem; color: var(--gris-03); margin-left: 0.3rem; }
.eu-vista-marco { overflow-x: auto; background: var(--gris-05); }
.eu-vista iframe { display: block; margin: 0 auto; width: 100%; height: calc(100vh - 200px); min-height: 520px; border: 0; background: #fff; }
.eu-panel { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); padding: 1.1rem; position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; }
@media (max-width: 1000px) { .eu-cuerpo { grid-template-columns: 1fr; } .eu-panel { position: static; max-height: none; } }

.eu-panel-cabecera h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.eu-fija { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--gris-02); background: var(--gris-06); border: 1px solid var(--color-borde); border-radius: 999px; padding: 0.15rem 0.6rem; margin: 0.2rem 0 0.4rem; }
.eu-campo { margin: 0.9rem 0; }
.eu-campo input[type=text], .eu-campo input[type=number], .eu-campo select, .eu-campo textarea { width: 100%; box-sizing: border-box; }
.eu-ayuda { font-size: 0.8rem; color: var(--color-texto-secundario); margin: 0.3rem 0 0; }
.eu-fila-botones { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.8rem 0; align-items: center; }
.eu-fila-botones button, .eu-panel button.secundario { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.eu-boton-enlace { text-decoration: none; padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.eu-lista-bloques { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.eu-enlace-bloque { width: 100%; text-align: left; background: var(--gris-06) !important; color: var(--gris-01) !important; border: 1px solid transparent !important; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-enlace-bloque:hover { border-color: var(--acento) !important; }
.eu-catalogo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.9rem 0; }
.eu-catalogo .eu-tipo { padding: 0.8rem 0.5rem; font-size: 0.85rem; text-align: center; }

.eu-rico { border: 1px solid var(--gris-04); border-radius: var(--radio-control); overflow: hidden; background: #fff; }
.eu-rico:focus-within { border-color: var(--gris-03); }
.eu-rico-barra { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.35rem; background: var(--gris-06); border-bottom: 1px solid var(--color-borde); }
.eu-rico-barra button { padding: 0.2rem 0.5rem !important; font-size: 0.78rem !important; border-radius: 8px; }
.eu-rico-barra .eu-b { font-weight: 800; } .eu-rico-barra .eu-i { font-style: italic; } .eu-rico-barra .eu-u { text-decoration: underline; }
.eu-referencias { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.eu-referencia { display: flex; gap: 0.4rem; align-items: flex-start; }
.eu-referencia .eu-rico { flex: 1; min-width: 0; }
.eu-rico-barra .eu-icono { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.45rem !important; }
.eu-rico-barra .eu-boton-color { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 0.1rem 0.5rem 0.15rem !important; line-height: 1; }
.eu-color-a { font-weight: 800; font-size: 0.82rem; }
.eu-color-barra { display: block; width: 16px; height: 3px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.25); box-sizing: content-box; }
.eu-rico-color { padding: 0.5rem 0.55rem; background: var(--gris-06); border-bottom: 1px solid var(--color-borde); display: flex; flex-direction: column; gap: 0.45rem; }
.eu-rico-color[hidden] { display: none; }
.eu-rico-color-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.eu-rico-color-fila[hidden], .eu-rico-color-etiqueta[hidden], .eu-muestras[hidden] { display: none; }
.eu-rico-color-etiqueta { font-size: 0.75rem; color: var(--color-texto-secundario); min-width: 8.2rem; }
.eu-muestras { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.eu-muestra { width: 24px; height: 24px; padding: 0 !important; border-radius: 50% !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px var(--gris-04); cursor: pointer; }
.eu-muestra:hover { box-shadow: 0 0 0 2px var(--gris-02); }
.eu-selector-color { width: 34px; height: 28px; padding: 0 !important; border: 1px solid var(--gris-04); border-radius: 8px; background: #fff; cursor: pointer; }
.eu-hex { width: 6.4rem !important; font-family: monospace; text-transform: lowercase; }
.eu-tamano { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--gris-03); margin-left: 0.2rem; }
.eu-tamano .eu-tamano-campo { width: 4rem !important; padding: 0.25rem 0.35rem !important; font-size: 0.82rem; text-align: center; }
.eu-rico-color-error { font-size: 0.75rem; color: var(--color-error); }
.eu-rico-enlace { display: flex; gap: 0.35rem; padding: 0.35rem; background: #fff8f0; border-bottom: 1px solid #ffd3b0; }
.eu-rico-enlace[hidden] { display: none; }
.eu-rico-enlace input { flex: 1; min-width: 0; }
.eu-rico-area { min-height: 90px; max-height: 340px; overflow-y: auto; padding: 0.6rem 0.7rem; font-size: 0.9rem; line-height: 1.5; outline: none; }
.eu-rico-area p { margin: 0 0 0.6rem; } .eu-rico-area ul, .eu-rico-area ol { margin: 0 0 0.6rem 1.2rem; padding: 0; }
.eu-dialogo { width: min(960px, 94vw); max-height: 90vh; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 1rem; }
.eu-dialogo-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.eu-dialogo-canvas { width: min(720px, 94vw); }
.eu-canvas-archivos, .eu-canvas-avisos { margin: 0.3rem 0 0.8rem 1.1rem; padding: 0; font-size: 0.88rem; }
.eu-canvas-archivos small { color: var(--gris-03); }
.eu-canvas-falta { color: var(--color-aviso); }
.eu-canvas-ya_esta { color: var(--gris-03); }
.eu-canvas-grave { color: var(--color-error); font-weight: 700; }
.eu-canvas-error { color: var(--color-error); }
.mod-canvas-unidad { border-top: 1px solid var(--color-borde); padding-top: 0.5rem; margin-top: 0.5rem; }
.mod-canvas-unidad p { margin: 0 0 0.25rem; }
.eu-canvas-acepto { display: block; margin: 0.4rem 0 0.8rem; font-size: 0.88rem; }
.eu-dialogo textarea { width: 100%; height: 60vh; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }

/* Portada de la unidad (foto y GIF) */
.eu-miniatura, .eu-gif { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--color-borde); margin: 0.4rem 0 0.6rem; }
.eu-archivo { width: 100%; font-size: 0.8rem; margin: 0.2rem 0 0.4rem; }
.eu-insignia { display: inline-block; font-size: 0.75rem; font-weight: 700; background: var(--gris-06); color: var(--gris-02); border: 1px solid var(--color-borde); border-radius: 999px; padding: 0.2rem 0.65rem; }
.eu-insignia-ok { background: #f0f7f0; border-color: #bfe3bf; color: #2f5a2f; }
.eu-insignia-aviso { background: #fff8f0; border-color: #ffd3b0; color: var(--color-aviso); }
.eu-error { color: var(--color-error); font-weight: 600; }
/* Editor por componentes (Transformación): listas, elementos plegables y casillas. */
.eu-fila-lista { border: 1px solid var(--color-borde); border-radius: var(--radio-control); padding: 0.4rem; margin: 0.4rem 0; background: var(--gris-06); }
.eu-fila-lista .eu-fila-botones { margin: 0.4rem 0 0; }
.eu-fila-lista input[type=text] { width: 100%; box-sizing: border-box; }
.eu-item { border: 1px solid var(--color-borde); border-radius: var(--radio-control); margin: 0.4rem 0; background: #fff; }
.eu-item > summary { cursor: pointer; padding: 0.45rem 0.7rem; font-size: 0.85rem; font-weight: 600; }
.eu-item-cuerpo { padding: 0 0.7rem 0.6rem; border-top: 1px solid var(--color-borde); }
.eu-check { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; }
.eu-check input { width: auto; }
.eu-grupo { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin: 1rem 0 0.2rem; }
.eu-campo[hidden], .eu-fila-lista[hidden] { display: none; }

/* Encuadre de la foto de portada (ventana panorámica 5:1 + velo oscuro) */
.eu-encuadre { position: relative; aspect-ratio: 5 / 1; overflow: hidden; border-radius: 10px; border: 1px solid var(--color-borde); background: #040404; margin: 0.4rem 0 0.5rem; }
.eu-encuadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eu-encuadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.80), rgba(0,0,0,0.55) 70%); pointer-events: none; }
.eu-rango { display: grid; grid-template-columns: 8.5rem 1fr 3rem; align-items: center; gap: 0.4rem; font-size: 0.78rem; margin: 0.15rem 0; }
.eu-rango input[type=range] { width: 100%; }
.eu-valor { text-align: right; color: var(--color-texto-secundario); }

/* Resultados de la búsqueda de fotos de Freepik */
.eu-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.4rem; }
.eu-foto { border: 1px solid var(--color-borde); border-radius: 10px; padding: 0.4rem; background: #fff; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.eu-foto img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 6px; background: var(--gris-06); }
.eu-foto-titulo { margin: 0; font-size: 0.72rem; line-height: 1.25; max-height: 2.5em; overflow: hidden; color: var(--color-texto-secundario); }
.eu-foto .eu-fila-botones { margin: 0; gap: 0.3rem; }
.eu-foto .eu-fila-botones button { padding: 0.25rem 0.5rem; font-size: 0.74rem; }
.eu-ver { font-size: 0.72rem; }
.eu-foto .eu-insignia { align-self: flex-start; }

/* Paquete ZIP del módulo */
.editor-paquete { margin-bottom: 1.5rem; }
.boton.secundario-enlace { background: transparent; color: var(--gris-02); border: 1px solid var(--gris-04); }
.boton.secundario-enlace:hover { background: var(--gris-06); }

/* Botón «← volver» estándar de todo Ohtli (antes era un enlace de un renglón). */
a.boton-volver {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--radio-control);
  background: var(--blanco); color: var(--gris-02); border: 1px solid var(--gris-04);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: background 150ms var(--ease-salida), transform 150ms var(--ease-salida);
}
a.boton-volver:hover { background: var(--gris-06); }
a.boton-volver:active { transform: scale(0.97); }
.eu-barra-titulo a.boton-volver { margin-bottom: 0.5rem; }

/* Fila de botones de navegación: el de regreso va con contorno; los demás (extra) en gris y negro al pasar el cursor. */
.fila-botones-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
a.boton-nav-extra {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--radio-control);
  background: var(--gris-05); color: var(--gris-02); border: 1px solid var(--gris-05);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: background 150ms var(--ease-salida), color 150ms var(--ease-salida), transform 150ms var(--ease-salida);
}
a.boton-nav-extra:hover { background: var(--gris-02); border-color: var(--gris-02); color: var(--blanco); }
a.boton-nav-extra:active { transform: scale(0.97); }

/* Tarjetas de APRA Online: el resalte al pasar el cursor (texto sobre negro) es el azul de la alianza. */
.tarjeta.tarjeta-apra { --acento: #003DA5; }

/* ---------- Doble verificación (código y vinculación de la app) ---------- */

.login-contenido input.campo-codigo {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  font-weight: 700;
  padding: 0.7rem 0.5rem;
  margin-bottom: 1rem;
}
.login-contenido input.campo-codigo::placeholder { letter-spacing: 0.2em; font-weight: 400; }

form.caja-login label.casilla-equipo {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.35;
  cursor: pointer;
}
form.caja-login label.casilla-equipo input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  flex: none;
  accent-color: var(--acento);
}

.contenido-2fa { max-width: 860px; }
.login-contenido h1.bienvenida strong.resalte-acento { color: var(--acento); }

/* Dos columnas: QR a la izquierda, pasos y código a la derecha (sin bajar la página). */
.rejilla-2fa {
  display: grid;
  grid-template-columns: auto minmax(0, 380px);
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.columna-qr { display: flex; flex-direction: column; align-items: center; max-width: 280px; }
.columna-codigo { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.columna-codigo form.caja-login { width: 100%; }
.columna-codigo form.salir-codigo { align-self: center; }
.contenido-2fa p.instruccion { margin-bottom: 1.4rem; }
@media (max-width: 760px) {
  .rejilla-2fa { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; justify-items: center; }
  .columna-codigo { width: 100%; max-width: 420px; }
}

.pasos-2fa {
  align-self: stretch;
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
  color: var(--gris-05);
  font-size: 0.9rem;
  line-height: 1.5;
}
.pasos-2fa li { margin-bottom: 0.35rem; }
.pasos-2fa strong { color: var(--blanco); }

.qr-2fa {
  width: 260px;
  max-width: 100%;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 0.6rem;
  box-shadow: var(--sombra-hover);
  margin-bottom: 1rem;
}
.qr-2fa svg { display: block; width: 100%; height: auto; border-radius: calc(var(--radio) - 8px); }

details.clave-manual {
  align-self: stretch;
  margin-bottom: 1.2rem;
  font-size: 0.85rem;
  color: var(--gris-05);
}
details.clave-manual summary { cursor: pointer; color: var(--gris-04); text-align: center; }
details.clave-manual summary:hover { color: var(--blanco); }
details.clave-manual p { margin: 0.7rem 0 0.5rem; }
details.clave-manual code {
  display: block;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radio-control);
  padding: 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--blanco);
  word-break: break-all;
}

form.salir-codigo { margin-top: 1rem; }
form.salir-codigo button {
  background: transparent;
  color: var(--gris-04);
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
form.salir-codigo button:hover { color: var(--blanco); background: transparent; }
p.ayuda-codigo { color: var(--gris-04); font-size: 0.8rem; text-align: center; margin: 0.8rem 0 0; }

/* ---------- Auditoría ---------- */

.auditoria-resumen { margin-bottom: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.auditoria-cifra { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.auditoria-alerta { color: var(--color-error); font-weight: 600; }
.tabla-auditoria { overflow-x: auto; }
.tabla-auditoria td { vertical-align: top; font-size: 0.88rem; word-break: break-word; }

/* ---------- Generador de miniaturas ---------- */

.min-editor { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .min-editor { grid-template-columns: 1fr; } }
.min-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.min-campo > label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.min-campo input[type="text"], .min-campo select { width: 100%; }
.min-ayuda { font-size: 0.78rem; color: var(--gris-03); margin: 0.3rem 0 0; }
.min-casilla { display: flex !important; align-items: center; gap: 0.5rem; font-weight: 400 !important; margin-top: 0.5rem; }
.min-barra, .min-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.3rem 0; }
.min-barra button, .min-fila button { padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.min-fila input[type="text"] { flex: 1; min-width: 0; }
.min-texto {
  min-height: 4.2rem; padding: 0.6rem 0.8rem; background: var(--blanco); border: 1px solid var(--gris-04);
  border-radius: var(--radio-control); font-size: 1.1rem; line-height: 1.5; outline: none; white-space: pre-wrap;
}
.min-texto:focus { border-color: var(--gris-02); box-shadow: 0 0 0 3px var(--gris-05); }
.min-texto mark { background: none; color: var(--acento); font-weight: 800; }
.min-texto.min-banda mark { background: #003DA5; color: #fff; padding: 0 0.25em; border-radius: 4px; }
.min-rango { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: 0.5rem; align-items: center; font-weight: 400 !important; font-size: 0.85rem; margin: 0.3rem 0; }
.min-rango span { text-align: right; color: var(--gris-03); }
.min-freepik { margin: 0.6rem 0; }
.min-freepik summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; }
.min-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.5rem 0; }
.min-foto { border: 1px solid var(--gris-05); border-radius: 10px; padding: 0.4rem; background: var(--blanco); display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.min-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--gris-06); }
.min-foto p { margin: 0; font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-foto button { padding: 0.25rem 0.5rem; font-size: 0.74rem; }
.min-marco img, #min-resultado img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--gris-05); background: var(--gris-06); }
.min-acciones { margin-top: 0.8rem; }
.min-avisos { margin-top: 0.6rem; }
.min-avisos p { margin: 0.2rem 0; font-size: 0.82rem; color: var(--color-aviso); }
.min-error { color: var(--color-error) !important; }
#min-resultado { margin-top: 1rem; }
#min-descargar { text-decoration: none; }


/* Resultados del buscador: cuatro divisiones (programas, módulos, unidades, competencias) con una cápsula por resultado; URL bajo el módulo en la ficha */
.url-modulo { display: block; font-size: 0.78rem; margin-top: 0.15rem; word-break: break-all; color: var(--gris-03); }
.busq-seccion { margin: 1.4rem 0 0; }
.busq-seccion > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 0.65rem 1rem; background: var(--gris-02); color: var(--blanco); border-radius: var(--radio-control); font-weight: 600; }
.busq-seccion > summary::-webkit-details-marker { display: none; }
.busq-seccion > summary::before { content: "+"; margin-right: 0.6rem; }
.busq-seccion[open] > summary::before { content: "\2212"; }
.busq-seccion > summary > span:first-child { flex: 1 1 auto; }
.busq-conteo { background: var(--blanco); color: var(--gris-01); border-radius: 20px; padding: 0.05rem 0.65rem; font-size: 0.8rem; }
.busq-lista { padding-top: 0.8rem; }
.capsula { background: var(--color-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra-suave); padding: 0.85rem 1.1rem; margin-bottom: 0.7rem; cursor: pointer; transition: box-shadow 200ms var(--ease-salida), transform 200ms var(--ease-salida), border-color 200ms var(--ease-salida), background 200ms var(--ease-salida); }
.capsula:hover { box-shadow: var(--sombra-hover); border-color: var(--color-primario-oscuro); background: var(--color-primario-oscuro); transform: translateY(-2px); }
.capsula h3 { margin: 0.35rem 0 0.15rem; font-size: 1.02rem; font-weight: 600; color: var(--gris-01); transition: color 150ms var(--ease-salida); }
.capsula:hover h3 { color: var(--acento); }
.capsula-ruta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; color: var(--gris-03); transition: color 150ms var(--ease-salida); }
.capsula-equipo { background: var(--gris-06); color: var(--gris-02); border: 1px solid var(--gris-05); border-radius: 20px; padding: 0.05rem 0.6rem; font-weight: 600; }
.capsula-camino strong { color: var(--gris-02); }
.capsula-sep { color: var(--gris-04); }
.capsula-detalle { font-size: 0.85rem; color: var(--gris-03); word-break: break-word; transition: color 150ms var(--ease-salida); }
.capsula-detalle a { color: inherit; }
.capsula .motivos { font-size: 0.85rem; color: var(--gris-02); margin: 0.3rem 0 0; transition: color 150ms var(--ease-salida); }
.capsula:hover .capsula-ruta, .capsula:hover .capsula-detalle { color: var(--gris-05); }
.capsula:hover .capsula-camino strong, .capsula:hover .motivos { color: var(--gris-06); }
.capsula:hover .capsula-equipo { background: transparent; color: var(--gris-05); border-color: var(--gris-03); }

/* Botones discretos de acciones por renglón (Usuarios): contorno fino, letra chica, negro al pasar el cursor */
td.acciones-fila { display: flex; gap: 0.35rem; flex-wrap: wrap; min-width: 9.5rem; }
td.acciones-fila form { display: inline; margin: 0; }
button.boton-fila {
  padding: 0.22rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  background: transparent;
  color: var(--gris-03);
  border: 1px solid var(--gris-04);
  border-radius: var(--radio-control);
  transition: color 150ms var(--ease-salida), border-color 150ms var(--ease-salida);
}
button.boton-fila:hover { background: transparent; color: var(--gris-01); border-color: var(--gris-01); }

/* Encuadre de la foto de la cabecera del Panorama (1500×390) y foto de una tarjeta de unidad en su panel. */
.eu-encuadre-panorama { aspect-ratio: 1500 / 390; }
.eu-encuadre-panorama::after { background: rgba(0, 0, 0, 0.60); }
.eu-tarjeta-foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-borde); margin: 0.4rem 0 0.6rem; }
tr.editor-fila-panorama { background: var(--gris-06); }

/* ---------- Generador de recursos ---------- */

.gen-editor { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .gen-editor { grid-template-columns: 1fr; } }
.gen-chat { display: flex; flex-direction: column; gap: 0.9rem; }
.gen-opciones summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.gen-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.8rem; margin-top: 0.6rem; }
.gen-rejilla label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; }
.gen-rejilla select { width: 100%; }
.gen-ancho-completo { grid-column: 1 / -1; }
.gen-log {
  display: flex; flex-direction: column; gap: 0.7rem; max-height: 26rem; min-height: 8rem; overflow-y: auto;
  padding: 0.2rem; scroll-behavior: smooth;
}
.gen-vacio { font-size: 0.88rem; color: var(--gris-03); }
.gen-vacio p { margin: 0 0 0.5rem; }
.gen-ejemplo { background: var(--gris-06); border-radius: var(--radio-control); padding: 0.6rem 0.8rem; font-style: italic; }
.gen-burbuja { border-radius: var(--radio-control); padding: 0.6rem 0.8rem; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.gen-burbuja.usuario { background: var(--gris-06); align-self: flex-end; max-width: 92%; }
.gen-burbuja.claude { background: var(--blanco); border: 1px solid var(--gris-05); }
.gen-burbuja.error { background: #fbeeec; border: 1px solid #e8c4be; color: var(--color-error); }
.gen-quien { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gris-03); margin-bottom: 0.2rem; }
.gen-avisos { margin: 0.5rem 0 0; padding: 0.5rem 0.7rem; background: #fff8f0; border: 1px solid #ffd3b0; border-radius: 10px; font-size: 0.8rem; color: var(--color-aviso); white-space: normal; }
.gen-avisos strong { display: block; margin-bottom: 0.2rem; }
.gen-avisos ul { margin: 0; padding-left: 1.1rem; }
.gen-meta-turno { display: block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--gris-03); }
.gen-entrada > label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.gen-entrada textarea { width: 100%; resize: vertical; min-height: 6rem; line-height: 1.45; }
.gen-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.3rem 0; }
.gen-acciones button { padding: 0.45rem 1rem; }
.gen-ayuda { font-size: 0.78rem; color: var(--gris-03); margin: 0.3rem 0 0; }
.gen-estado { font-size: 0.85rem; margin: 0.3rem 0 0; min-height: 1.2rem; color: var(--gris-02); }
.gen-estado.trabajando::before {
  content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.45rem; border-radius: 50%;
  border: 2px solid var(--gris-04); border-top-color: var(--acento); animation: gen-giro 0.9s linear infinite; vertical-align: -1px;
}
.gen-estado.error { color: var(--color-error); }
@keyframes gen-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gen-estado.trabajando::before { animation: none; } .gen-log { scroll-behavior: auto; } }
.gen-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.gen-anchos, .gen-acciones-vista { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.gen-anchos button, .gen-acciones-vista button { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.gen-anchos button.activo { background: var(--gris-02); color: var(--blanco); border-color: var(--gris-02); }
.gen-fondo-visor { background: var(--gris-06); border-radius: var(--radio-control); padding: 0.8rem; display: flex; justify-content: center; overflow-x: auto; }
.gen-marco { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--blanco); border: 1px solid var(--gris-05); border-radius: 8px; overflow: hidden; }
.gen-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--blanco); }
.gen-sin-recurso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--gris-03); font-size: 0.9rem; }

/* Generador de recursos: editor del visor (texto y color) */
.gen-edicion { background: var(--gris-06); border: 1px solid var(--gris-05); border-radius: var(--radio-control); padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.gen-edicion[hidden] { display: none; }
.gen-edicion > p.gen-ayuda { margin: 0 0 0.6rem; }
.gen-paleta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.gen-paleta-titulo { font-size: 0.82rem; font-weight: 700; min-width: 7.5rem; }
.gen-muestras { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.gen-muestras button { width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 2px solid var(--gris-04); cursor: pointer; }
.gen-muestras button:hover, .gen-muestras button:focus-visible { border-color: var(--gris-01); transform: scale(1.1); }
.gen-paleta input[type=color] { width: 2.2rem; height: 1.8rem; padding: 0; border: 1px solid var(--gris-04); border-radius: 8px; background: var(--blanco); cursor: pointer; }
.gen-edicion.sin-seleccion .gen-paleta { opacity: 0.5; }
.gen-ed-seleccion { font-size: 0.82rem; font-weight: 700; margin: 0.4rem 0 0.35rem; overflow-wrap: anywhere; }
.gen-estructura { margin: 0 0 0.3rem; }
.gen-formato { align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.5rem; }
.gen-formato .gen-ayuda { flex: 1 1 100%; margin: 0; }
.gen-fmt { min-width: 2.2rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.gen-fmt[aria-pressed="true"] { background: var(--gris-02); color: var(--blanco); border-color: var(--gris-02); }
.gen-estructura button { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.gen-ayuda-estructura { margin: 0 0 0.7rem; }
.gen-iconos { background: var(--blanco); border: 1px solid var(--gris-05); border-radius: var(--radio-control); padding: 0.6rem 0.7rem; margin: 0.3rem 0 0.7rem; }
.gen-iconos[hidden] { display: none; }
.gen-iconos-cabeza { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.gen-iconos-cabeza input { flex: 1; min-width: 0; }
.gen-iconos-cabeza button { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.gen-iconos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.35rem; max-height: 15rem; overflow-y: auto; }
.gen-iconos-rejilla button { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem 0.2rem; background: var(--gris-06); color: var(--gris-01); border: 1px solid var(--gris-05); border-radius: var(--radio-control); font-size: 0.62rem; line-height: 1.15; overflow-wrap: anywhere; text-align: center; }
.gen-iconos-rejilla button:hover, .gen-iconos-rejilla button:focus-visible { background: var(--gris-02); color: var(--blanco); border-color: var(--gris-02); }
.gen-iconos-rejilla button[aria-selected=true] { border-color: var(--acento); border-width: 2px; }
.gen-iconos-rejilla svg { width: 1.6rem; height: 1.6rem; flex: none; }
#gen-iconos-mas { margin-top: 0.5rem; padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.gen-global { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.82rem; margin: 0.2rem 0 0.6rem; }
.gen-global input { width: auto; margin-top: 0.2rem; }
.gen-acciones-vista button[aria-pressed=true] { background: var(--gris-02); color: var(--blanco); border-color: var(--gris-02); }

/* Generador de recursos: avance, esfera y consumo */
.gen-vista { display: flex; flex-direction: column; gap: 1.2rem; }
.gen-trabajo { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; background: var(--blanco); border: 1px solid var(--gris-05); border-radius: var(--radio-control); }
.gen-trabajo[hidden] { display: none; }
.gen-trabajo canvas { flex: none; display: block; background: transparent; }
.gen-trabajo-texto { flex: 1; min-width: 0; }
.gen-fase { margin: 0 0 0.4rem; font-size: 0.88rem; font-weight: 700; color: var(--gris-02); }
.gen-avance { position: relative; height: 0.7rem; background: var(--gris-05); border-radius: 999px; overflow: hidden; }
.gen-avance i { display: block; height: 100%; width: 0; background: #ff5900; border-radius: 999px; transition: width 0.9s var(--ease-salida); }
.gen-detalle { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--gris-03); }
@media (prefers-reduced-motion: reduce) { .gen-avance i { transition: none; } }
.gen-consumo h2 { margin: 0 0 0.3rem; }
.gen-tabla { overflow-x: auto; }
.gen-tabla table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.gen-tabla th, .gen-tabla td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--gris-05); text-align: left; white-space: nowrap; }
.gen-tabla th.num, .gen-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gen-tabla tfoot td { font-weight: 800; border-top: 2px solid var(--gris-04); border-bottom: 0; }
.gen-tabla tr.en-curso td { color: var(--gris-03); font-style: italic; }
.gen-tabla .fallo { color: var(--color-error); }

/* Informe de uso de IA y costos */
.uso-ia-tabla table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.uso-ia-tabla th, .uso-ia-tabla td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--gris-05); text-align: left; vertical-align: top; }
.uso-ia-tabla th.num, .uso-ia-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uso-ia-tabla tfoot td { font-weight: 800; border-top: 2px solid var(--gris-04); border-bottom: 0; }
.uso-ia-calculadora { margin-top: 1.2rem; }
.uso-ia-calculadora h2 { margin: 0 0 0.3rem; }
.uso-ia-calculo { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; margin-top: 0.6rem; }
.uso-ia-calculo label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; }
.uso-ia-calculo input { width: 9rem; }
.uso-ia-resultado .auditoria-cifra { font-size: 1.5rem; }

/* ---------- Fila de captura (campos en línea sin aplastarse) y casilla en forma de botón ---------- */
/* Los campos de texto y desplegables miden width:100% en toda la app: dentro de una fila flexible hay que darles
   una base propia o el nombre se encoge hasta desaparecer. */
.fila-captura { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.fila-captura > input[type=text] { flex: 2 1 240px; width: auto; min-width: 200px; }
.fila-captura > select { flex: 1 1 220px; width: auto; min-width: 180px; }
.casilla-boton {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.55rem 0.9rem; white-space: nowrap;
  background: var(--blanco); color: var(--gris-02); border: 1px solid var(--gris-04); border-radius: var(--radio-control);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background 150ms var(--ease-salida), color 150ms var(--ease-salida), border-color 150ms var(--ease-salida);
}
.casilla-boton input { width: auto; margin: 0; accent-color: var(--gris-02); cursor: pointer; }
.casilla-boton:hover { border-color: var(--gris-02); }
.casilla-boton:has(input:checked) { background: var(--gris-02); color: var(--blanco); border-color: var(--gris-02); }
.casilla-boton:has(input:checked) input { accent-color: var(--blanco); }
.conteo-fila { white-space: nowrap; color: var(--gris-03); font-size: 0.9rem; }
.acciones-fila { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem 0.75rem; white-space: nowrap; }
.acciones-fila form { margin: 0; }
.tabla-equipos td:first-child input[type=text] { min-width: 280px; }
.tabla-equipos select { min-width: 140px; max-width: 200px; }
.tabla-direcciones td:first-child input[type=text] { min-width: 300px; }
.tabla-direcciones select { min-width: 170px; max-width: 220px; }
.tabla-direcciones td:last-child, .tabla-equipos td:last-child { width: 1%; white-space: nowrap; }
.grupo-casillas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.casilla-boton.compacta { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* Generador de recursos: opciones escalonadas, repasos, foto de portada e imágenes adjuntas */
.gen-repasos { border: 1px solid var(--gris-05); border-radius: var(--radio-control); padding: 0.4rem 0.7rem 0.6rem; margin: 0; }
.gen-repasos legend { font-size: 0.8rem; font-weight: 600; padding: 0 0.3rem; }
.gen-rejilla .gen-casilla { flex-direction: row; align-items: center; gap: 0.45rem; font-weight: 400; font-size: 0.85rem; margin: 0.15rem 0; }
.gen-casilla input { width: auto; margin: 0; }
.gen-foto-caja { border: 1px solid var(--gris-05); border-radius: var(--radio-control); padding: 0.5rem 0.7rem; }
.gen-foto-caja input[type=text] { flex: 1 1 12rem; }
.gen-foto-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.4rem; margin-top: 0.4rem; }
.gen-foto-rejilla button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; }
.gen-foto-rejilla button:hover, .gen-foto-rejilla button:focus-visible { border-color: var(--gris-02); }
.gen-foto-rejilla img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gen-adjuntos { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.gen-adjunto { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.5rem 0.7rem; align-items: center; border: 1px solid var(--gris-05); border-radius: var(--radio-control); padding: 0.4rem 0.6rem; background: var(--blanco); }
.gen-adjunto img { width: 64px; height: 48px; object-fit: contain; background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 50% / 12px 12px; border-radius: 6px; }
.gen-adjunto .gen-adj-info { font-size: 0.8rem; min-width: 0; }
.gen-adjunto .gen-adj-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-adjunto .gen-adj-opciones { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }
.gen-adjunto select { width: auto; font-size: 0.75rem; padding: 0.15rem 0.3rem; }
.gen-adjunto .gen-adj-quitar { padding: 0.2rem 0.55rem; }