/* ==========================================================================
   Gadget 02 — Generador de unidades y clases

   Hereda el CSS del gadget 01 (tokens, topbar, hoja, cajones, modales) y
   reproduce el formato real de la planificacion WebClass: cajas con pestana
   naranja, fichas de cabecera, insignias de OA y actitudes, y los tres
   momentos con su tiempo y sus recursos adjuntos.
   ========================================================================== */

/* --- Calendario ---------------------------------------------------------- */
.cal-envoltorio { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

.cal-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.cal-cab b { font-size: 16px; }
.cal-periodo-sub { font-size: 13px; color: var(--texto-suave); }
.cal-leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--texto-suave); }
.pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.pt-ok  { background: var(--verde); }
.pt-mal { background: var(--rojo); }

.cal-sinfecha {
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r);
  background: #fbfcfe; padding: 12px 14px; margin-bottom: 18px;
}
.cal-sinfecha.vacia { display: none; }
.cal-sinfecha h4 {
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--naranja-oscuro); margin: 0 0 9px;
}

.semana {
  display: grid; grid-template-columns: 168px 1fr;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: #fff; margin-bottom: 10px; overflow: hidden;
}
.semana-cab { padding: 12px 14px; background: var(--fondo); border-right: 1px solid var(--borde); }
.semana-n { font-size: 13.5px; font-weight: 800; }
.semana-fechas { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }
.semana-horas {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--verde-suave); color: #1f9b76;
}
.semana.sobrecargada .semana-horas { background: var(--rojo-suave); color: var(--rojo); }
.semana.sobrecargada { border-color: #f0b9c6; }

.semana-clases {
  list-style: none; margin: 0; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; min-height: 62px;
}
.semana-clases:empty::after {
  content: 'Arrastra una clase hasta acá';
  font-size: 12px; color: var(--texto-suave); font-style: italic;
}

.clase-tarjeta {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--borde); border-left: 3px solid var(--azul);
  border-radius: var(--r-chico); background: #fff; padding: 9px 11px;
  transition: box-shadow .15s, border-color .15s;
}
.clase-tarjeta:hover { box-shadow: var(--sombra); border-color: var(--borde-fuerte); }
.clase-tarjeta.sin-oa { border-left-color: var(--rojo); }
.clase-tarjeta.sin-validar { border-left-color: var(--naranja); }
.clase-tarjeta > .asa { opacity: .5; margin-top: 2px; }
.clase-tarjeta:hover > .asa { opacity: 1; }

.ct-cuerpo { flex: 1; min-width: 0; }
.ct-num { font-size: 11px; font-weight: 800; color: var(--texto-suave); }
.ct-titulo { font-size: 13.5px; font-weight: 700; outline: none; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
.ct-titulo:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
.ct-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ct-acciones { display: flex; align-items: center; gap: 2px; }
.ct-btn { background: none; border: none; cursor: pointer; color: var(--texto-suave); font-size: 13px; padding: 2px 4px; border-radius: 5px; }
.ct-btn:hover { background: #eef1f6; color: var(--texto); }
.ct-horas { font-family: inherit; font-size: 11.5px; color: var(--texto-medio); border: 1px solid var(--borde); border-radius: 5px; padding: 1px 3px; background: #fff; }

/* ==========================================================================
   LA PLANIFICACIÓN IMPRESA — formato WebClass
   ========================================================================== */
.hoja { font-size: 12.4px; }

.pl-rotulo { font-size: 15px; color: #3c4858; margin: 0 0 2px; font-weight: 400; }
.pl-titulo { font-size: 17px; font-weight: 800; margin: 0 0 18px; }

/* Ficha de cabecera: dos tarjetas, como en el documento real */
.pl-ficha { display: flex; gap: 14px; margin-bottom: 22px; }
.pl-tarjeta {
  flex: 1; display: flex; align-items: center; gap: 12px;
  background: #f7f9fc; border-radius: 10px; padding: 11px 14px;
}
.pl-tarjeta.der { background: #fdfbf7; }
.pl-avatar {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 6px;
  background: #5aa9e6; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.pl-avatar svg { display: block; }
.pl-logo { flex: 0 0 74px; text-align: center; }
.pl-datos { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 11px; }
.pl-datos dt { color: #5b6676; }
.pl-datos dd { margin: 0; font-weight: 700; color: #22262c; }
.pl-datos .hora { font-size: 9.5px; color: #5b6676; font-weight: 400; }

/* Cajas con pestaña naranja */
.pl-caja { margin-bottom: 18px; break-inside: avoid; page-break-inside: avoid; }
.pl-caja > h3 {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 6px 16px 5px;
  background: var(--naranja); color: #fff;
  border-radius: 8px 8px 0 0;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pl-caja.azul > h3 { background: #5aa9e6; }
.pl-caja > .pl-cuerpo {
  border: 1px solid var(--naranja); border-radius: 0 8px 8px 8px;
  background: #fffdf9; padding: 14px 16px;
}
.pl-caja.azul > .pl-cuerpo { border-color: #5aa9e6; background: #fbfdff; }

.pl-eje {
  font-size: 11.5px; font-weight: 800; color: #22262c;
  margin: 0 0 9px; letter-spacing: .01em;
}
.pl-eje + .pl-item { margin-top: 0; }
.pl-caja .pl-eje:not(:first-child) { margin-top: 15px; }

.pl-item { display: flex; gap: 12px; margin-bottom: 11px; align-items: flex-start; }
.pl-item:last-child { margin-bottom: 0; }
.insignia {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: #f4794e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: -.02em;
}
.insignia.chica { flex-basis: 22px; width: 22px; height: 22px; font-size: 8px; }
.pl-item > div { flex: 1; padding-top: 4px; }
.pl-item p { margin: 0; }

.pl-vacia { color: var(--texto-suave); font-style: italic; font-size: 11.5px; margin: 0; }

/* --- Una clase ----------------------------------------------------------- */
/* Cada pieza es indivisible: la paginación la lleva entera a la hoja siguiente
   antes que partirla al medio. */
.cl-pieza { break-inside: avoid; page-break-inside: avoid; }
.clase-bloque { margin-top: 4px; }
.clase-bloque.seleccionada .pl-titulo { background: #f1f7fd; box-shadow: 0 0 0 6px #f1f7fd; border-radius: 3px; }
.pl-datos .mal { color: #c9435f; }

.cl-objetivos { margin-bottom: 16px; }
.cl-objetivos > h4 { font-size: 12px; color: #3c4858; margin: 0 0 6px; font-weight: 400; }
.cl-unidad { font-size: 11.5px; color: #5b6676; }
.cl-oa-texto { font-size: 12.2px; }
.cl-ie { margin: 6px 0 0 0; }
.cl-ie > b {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; color: #22262c; margin-bottom: 3px;
}
.cl-ie li { list-style: none; font-size: 11.8px; margin-bottom: 3px; }
.cl-ie li::before { content: 'IE-'; font-weight: 800; font-size: 9.5px; margin-right: 5px; color: #5b6676; }
.cl-ie ul { margin: 0; padding: 0; }

/* Momentos */
.momento { margin-bottom: 16px; }
.momento-cab {
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid #dbe2ea; padding-bottom: 4px; margin-bottom: 8px;
}
.momento-cab b { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #3c4858; }
.momento-tiempo {
  font-size: 10.5px; font-weight: 700; color: #5b6676;
  border: 1px solid #c9d2de; border-radius: 3px; padding: 0 6px; line-height: 15px;
  margin-left: auto;
}
.momento-tiempo input {
  width: 26px; border: none; background: none; font: inherit; color: inherit;
  text-align: right; padding: 0;
}
.momento-tiempo input:focus { outline: none; background: #fffbe9; }

.prerreq { font-size: 11.6px; margin: 0 0 8px; }
.prerreq b { display: block; font-size: 10.5px; letter-spacing: .04em; color: #3c4858; }
.momento-texto {
  font-size: 12.2px; text-align: justify; white-space: pre-line;
  outline: none; border-radius: 4px; padding: 2px 3px;
}
.momento-texto:focus { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }

/* Recursos adjuntos: los rectángulos amarillos del documento real */
.recursos { display: flex; flex-wrap: wrap; gap: 0; margin-top: 9px; border: 1px solid #e3dca6; background: #fdfbe4; border-radius: 3px; }
.recursos:empty { display: none; }
.recurso {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 10.5px; color: #3c4858;
  border-right: 1px solid #e3dca6;
}
.recurso:last-child { border-right: none; }
.recurso i { font-style: normal; font-size: 11px; }

.materiales {
  margin-top: 10px; font-size: 11.5px; color: #3b4655;
  background: #f4f6f9; border-left: 3px solid #c3cddb; padding: 6px 10px; border-radius: 0 4px 4px 0;
}
.materiales b { color: #22262c; }

/* --- General: catálogos por eje ------------------------------------------ */
.ficha + .ficha { margin-top: 18px; }
.op-grupo-eje { margin-bottom: 14px; }
.op-grupo-eje > b {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--naranja-oscuro);
  border-bottom: 1px solid var(--borde); padding-bottom: 5px; margin-bottom: 5px;
}

/* --- Cobertura ----------------------------------------------------------- */
.fila-fuera td { background: var(--naranja-suave); color: var(--naranja-oscuro); }
.fila-oa td { background: var(--fondo); }
.fila-sin td { background: var(--rojo-suave); color: var(--rojo); }
.cob-resumen { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 20px; }
.barra-pct { height: 7px; border-radius: 999px; background: #eef1f6; min-width: 72px; }
.barra-pct i { display: block; height: 100%; border-radius: 999px; background: var(--azul); }

@media (max-width: 760px) {
  .semana { grid-template-columns: 1fr; }
  .semana-cab { border-right: none; border-bottom: 1px solid var(--borde); }
  .pl-ficha { flex-direction: column; }
}

@media print {
  .cal-envoltorio, .cal-sinfecha { display: none !important; }
  .cl-pieza, .pl-caja, .momento { break-inside: avoid; page-break-inside: avoid; }
}

/* --- El texto de un momento se escribe en el modal ------------------------- */
/* Deja de ser un campo escribible en su sitio y pasa a ser clickeable: el
   realce y el cursor lo avisan. Se sigue viendo como se imprime. */
.momento-texto[data-editar] { min-height: 22px; border-radius: 4px; padding: 2px 4px; }
.momento-texto[data-editar]:hover { background: #fffbe9; box-shadow: inset 0 0 0 1px #e8d9a0; }
.momento-texto[data-editar]:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.momento-texto[data-editar]:empty::before {
  content: attr(data-vacio); color: #aab3bf; font-style: italic;
}
@media print { .momento-texto[data-editar]:hover { background: none; box-shadow: none; } }
/* El texto del momento ahora puede traer formato, listas e imagenes. */
.momento-texto p { margin: 0 0 4px; }
.momento-texto ul, .momento-texto ol { margin: 4px 0; padding-left: 20px; }
.momento-texto .img-bloque { margin: 6px 0; }
.momento-texto img { max-width: 100%; height: auto; }

/* Tabla insertada dentro de un momento */
.tabla-clase { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 11px; }
.tabla-clase th, .tabla-clase td { border: 1px solid #c9d2de; padding: 3px 5px; text-align: left; }
.tabla-clase th { background: #f2f5f9; font-weight: 700; }