/* ============================================================
   MÓDULOS
   Cada módulo prefija sus clases con .mod-<id> o usa clases
   propias no genéricas, para no colisionar con el shell.
   ============================================================ */

.mod-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
}
.mod-nota { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); }
.contador { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-3); }
.contador--limite { color: var(--carmin); }

/* ---------- Estructura (árbol) ---------- */

.niveles-leyenda {
  display: flex; gap: var(--e-3); flex-wrap: wrap;
  margin-bottom: var(--e-3);
}
.niveles-leyenda span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); color: var(--tinta-3);
}
.niveles-leyenda i {
  font-family: var(--f-dato); font-style: normal;
  width: 15px; height: 15px; display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte); border-radius: 2px;
  font-size: 9px;
}

.arbol { list-style: none; margin: 0; padding: 0; }
.arbol .arbol {
  margin-left: 13px;
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
}

.nodo-fila {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: 6px 4px;
  border-radius: var(--radio);
}
.nodo-fila:hover { background: var(--panel-alt); }
.nodo-fila:hover .nodo-acciones { opacity: 1; }

.nodo-plegar {
  border: none; background: none; cursor: pointer;
  color: var(--tinta-3); padding: 0; width: 14px;
  font-size: 10px; line-height: 20px;
}
.nodo-plegar.invisible { visibility: hidden; }

.nodo-nivel {
  flex: 0 0 auto;
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 1px 5px;
  margin-top: 3px;
}

.nodo-texto { flex: 1 1 auto; min-width: 0; }
.nodo-texto strong { font-size: var(--t-sm); font-weight: 500; }
.nodo-texto p {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.nodo-acciones {
  display: flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .12s;
}
.nodo-acciones:focus-within { opacity: 1; }

.nodo-form {
  display: grid; gap: var(--e-2);
  margin: var(--e-2) 0 var(--e-3) 27px;
  padding: var(--e-3);
  background: var(--panel-alt);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--carmin);
  border-radius: var(--radio);
}
.nodo-form-pie { display: flex; align-items: center; gap: var(--e-2); }
.nodo-form-pie .contador { margin-right: auto; }

/* ---------- Método ---------- */

.metodo-resumen strong { display: block; font-size: var(--t-sm); font-weight: 500; }
.metodo-resumen span { font-size: var(--t-xs); color: var(--tinta-3); font-family: var(--f-dato); }

.pestanas { display: flex; gap: var(--e-1); margin-bottom: var(--e-3); }
.pestanas button {
  border: none; background: none; cursor: pointer;
  padding: 5px 10px; border-radius: var(--radio);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.pestanas button[aria-selected="true"] {
  background: var(--carmin-suave); color: var(--carmin); font-weight: 500;
}

.kata-lista { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.kata-item {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--linea);
  position: relative;
}
.kata-item:last-child { border-bottom: 0; }
.kata-item:hover { background: var(--panel-alt); }
.kata-item:hover .kata-acciones { opacity: 1; }

.kata-num {
  flex: 0 0 auto;
  font-family: var(--f-dato); font-size: var(--t-xs);
  color: var(--carmin);
  width: 22px; text-align: right;
  padding-top: 2px;
}
.kata-cuerpo { flex: 1 1 auto; min-width: 0; }
.kata-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.kata-titulo strong { font-size: var(--t-sm); font-weight: 500; }
.kata-cuerpo p { margin: 3px 0 0; font-size: var(--t-xs); color: var(--tinta-2); }

.kata-min { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kata-min .campo { width: 62px; text-align: right; padding: 4px 6px; font-family: var(--f-dato); }
.kata-min span { font-size: var(--t-xs); color: var(--tinta-3); }

.kata-acciones { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.kata-acciones:focus-within { opacity: 1; }

.aviso-limite {
  margin: 0 0 var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: var(--ambar-suave);
  border-radius: var(--radio);
  font-size: var(--t-xs);
  color: var(--ambar);
}

.catalogo { border-top: 1px solid var(--linea); padding-top: var(--e-3); }
.catalogo-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.catalogo-chips--sueltos { margin-bottom: var(--e-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--t-xs);
  cursor: pointer;
}
.chip:hover:not([disabled]) { border-color: var(--carmin); color: var(--carmin); }
.chip[disabled] { opacity: .38; cursor: not-allowed; }
.chip--activa { background: var(--carmin); border-color: var(--carmin); color: #fff; }

.chip-marca { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.chip-marca--alta  { background: var(--jade); }
.chip-marca--media { background: var(--ambar); }
.chip-marca--baja  { background: var(--carmin); }

.paso-libre { display: flex; gap: var(--e-2); }
.paso-libre .campo { flex: 1 1 auto; }
.campo--corto { flex: 0 0 74px; text-align: right; font-family: var(--f-dato); }

/* ---------- Planificador ---------- */

.parametros {
  background: var(--panel-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  display: grid;
  gap: var(--e-3);
}
.param-fila .campo { max-width: 220px; }
.param-fila input[type="range"] { width: 100%; max-width: 260px; accent-color: var(--carmin); }

.dias-semana { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.dia-celda { display: grid; gap: 3px; justify-items: center; }
.dia-celda span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.dia-celda .campo { width: 58px; padding: 4px; text-align: center; font-family: var(--f-dato); font-size: var(--t-xs); }

.diagnostico {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-3);
  border-radius: var(--radio);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  background: var(--panel-alt);
}
.diagnostico--viable   { border-left-color: var(--jade);   background: var(--jade-suave); }
.diagnostico--ajustado { border-left-color: var(--ambar);  background: var(--ambar-suave); }
.diagnostico--inviable { border-left-color: var(--carmin); background: var(--carmin-suave); }
.diagnostico-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.diagnostico-cabecera strong { font-size: var(--t-sm); }
.diagnostico p { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--tinta-2); }
.diagnostico ul { margin: var(--e-2) 0 0; padding-left: 16px; font-size: var(--t-xs); color: var(--tinta-2); }
.diagnostico li { margin-bottom: 2px; }

.plan-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2); margin-bottom: var(--e-3);
}
.plan-cifras div {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e-2); text-align: center;
}
.plan-cifras strong { display: block; font-family: var(--f-dato); font-size: var(--t-lg); }
.plan-cifras span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }

.plan-controles { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }

.semana { margin-bottom: var(--e-4); }
.semana-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 5px; margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
}
.semana-cabecera strong { font-size: var(--t-sm); font-weight: 500; }
.semana-cabecera span { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-3); }

.dia-plan { display: flex; gap: var(--e-3); padding: var(--e-2) 0; }
.dia-sello {
  flex: 0 0 34px; text-align: center; padding-top: 2px;
}
.dia-sello span { display: block; font-size: 9px; text-transform: uppercase; color: var(--tinta-3); letter-spacing: .06em; }
.dia-sello strong { font-family: var(--f-dato); font-size: var(--t-md); }
.dia-sesiones { flex: 1 1 auto; display: grid; gap: 5px; min-width: 0; }

/* ---------- Metadatos de unidad (Estructura) ---------- */

.nodo-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.barra {
  height: 3px; background: var(--linea); border-radius: 2px;
  margin-top: 5px; overflow: hidden; max-width: 220px;
}
.barra span { display: block; height: 100%; background: var(--jade); }

.form-carga { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: var(--e-2); }
.form-carga .etiqueta { white-space: nowrap; }

.sugerencia {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: var(--indigo-suave);
  border-radius: var(--radio);
}
.sugerencia strong { display: block; font-size: var(--t-sm); color: var(--indigo); }
.sugerencia span { font-size: var(--t-xs); color: var(--tinta-2); }

/* ---------- Tips ---------- */

.tip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  border-left: 2px solid var(--indigo);
  background: var(--indigo-suave);
  border-radius: var(--radio);
  margin-bottom: var(--e-3);
}
.tip-glifo {
  font-family: var(--f-display);
  color: var(--indigo);
  font-size: 13px;
  line-height: 1.5;
  flex: 0 0 auto;
}
.tip p { margin: 0; font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.5; }

/* ---------- Días especiales ---------- */

.dia-especial-form {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr .8fr auto;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.dias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dias-lista li {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 4px 6px;
  border-radius: var(--radio);
}
.dias-lista li:hover { background: var(--panel-alt); }
.dias-lista span:nth-child(2) { font-size: var(--t-xs); color: var(--tinta-2); }
.dias-lista button { margin-left: auto; }

/* ---------- Panel de diferencias (estilo git status) ---------- */

.git-status {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio);
  background: var(--ambar-suave);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
}
.git-status-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--e-2);
}
.git-status-cabecera strong { font-size: var(--t-sm); color: var(--ambar); }
.git-lista { list-style: none; margin: 0 0 var(--e-3); padding: 0; font-family: var(--f-dato); }
.git-linea {
  display: flex; gap: 8px; align-items: baseline;
  padding: 2px 0; font-size: var(--t-xs); color: var(--tinta-2);
}
.git-linea i { font-style: normal; width: 12px; text-align: center; font-weight: 700; }
.git-linea--add i { color: var(--jade); }
.git-linea--del i { color: var(--carmin); }
.git-linea--mod i { color: var(--ambar); }

/* ---------- Tarjetas del planificador ---------- */

.sesion {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px;
  padding: 7px 9px;
  border-radius: var(--radio);
  background: var(--panel-alt);
  border-left: 2px solid var(--linea-fuerte);
}
.sesion--estudio  { border-left-color: var(--indigo); }
.sesion--practica { border-left-color: var(--jade); }
.sesion--refuerzo { border-left-color: var(--carmin); }

.sesion-tipo {
  font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3);
}
.sesion--estudio  .sesion-tipo { color: var(--indigo); }
.sesion--practica .sesion-tipo { color: var(--jade); }
.sesion--refuerzo .sesion-tipo { color: var(--carmin); }
.sesion-titulo { font-size: var(--t-sm); }
.sesion-motivo { flex-basis: 100%; font-style: normal; font-size: var(--t-xs); color: var(--tinta-3); }
.sesion-ref {
  flex-basis: 100%;
  font-family: var(--f-dato); font-size: 10px; color: var(--tinta-3);
}
.sesion-ref--corto { color: var(--ambar); }

.nota-desplazamiento {
  border-left: 2px solid var(--carmin);
  padding-left: var(--e-3);
  margin-bottom: var(--e-2);
}

/* ============================================================
   REGISTRO
   ============================================================ */

.chips-vista { display: flex; gap: var(--e-1); }
.nav-tiempo { display: flex; gap: var(--e-1); align-items: center; }

.reg-resumen { margin-bottom: var(--e-3); }
.reg-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2); margin-bottom: var(--e-2);
}
.reg-cifras div {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e-2); text-align: center;
}
.reg-cifras strong { display: block; font-family: var(--f-dato); font-size: var(--t-lg); }
.reg-cifras span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.reg-alerta { border-color: var(--ambar); background: var(--ambar-suave); }
.reg-alerta strong { color: var(--ambar); }
.reg-nota-alerta { color: var(--ambar); }

.barra--ancha { max-width: none; height: 5px; }

.reg-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 5px; margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
}
.reg-cabecera strong { font-size: var(--t-sm); font-weight: 500; }
.reg-cabecera span { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-3); }

/* ---------- Vista semana ---------- */

.reg-semana { display: grid; gap: var(--e-1); }
.reg-dia { display: flex; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) 0; border-radius: var(--radio); }
.reg-dia--hoy { background: var(--indigo-suave); }
.reg-dia--futuro { opacity: .62; }
.reg-dia-cuerpo { flex: 1 1 auto; display: grid; gap: 5px; min-width: 0; }
.reg-vacio { font-size: var(--t-xs); color: var(--tinta-3); padding: 6px 0; }

.reg-tarjeta {
  padding: 7px 9px;
  border-radius: var(--radio);
  background: var(--panel-alt);
  border-left: 2px solid var(--linea-fuerte);
}
.reg-tarjeta--hecha    { border-left-color: var(--jade);   background: var(--jade-suave); }
.reg-tarjeta--parcial  { border-left-color: var(--ambar);  background: var(--ambar-suave); }
.reg-tarjeta--saltada  { border-left-color: var(--tinta-3); opacity: .75; }
.reg-tarjeta--vencida  { border-left-color: var(--ambar); }

.reg-tarjeta-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; }
.reg-tarjeta-info .sesion-motivo { flex-basis: 100%; }

.reg-acciones { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: 6px; align-items: center; }
.reg-estado {
  font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; cursor: pointer;
  color: var(--tinta-2);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.reg-estado:hover:not(:disabled) { border-color: var(--linea-fuerte); color: var(--tinta); }
.reg-estado:disabled { opacity: .4; cursor: not-allowed; }
.reg-estado--activo { background: var(--tinta); border-color: var(--tinta); color: var(--panel); }

.reg-nota-form {
  margin-top: var(--e-2); padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
  display: grid; gap: var(--e-2);
}
.reg-nota-fila { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.reg-nota-fila .etiqueta { margin: 0; }
.reg-nota-fila .campo { max-width: 120px; }
.reg-nota-pie { display: flex; align-items: center; gap: var(--e-2); justify-content: flex-end; }
.reg-nota-pie .contador { margin-right: auto; }

/* ---------- Vista mes ---------- */

.cal-cabecera {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; margin-bottom: 3px;
}
.cal-cabecera span {
  text-align: center; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-celda {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: inherit; cursor: pointer;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
}
.cal-celda:hover:not(:disabled) { border-color: var(--tinta-3); }
.cal-celda--fuera { border: none; background: none; cursor: default; }
.cal-celda--hoy { outline: 1.5px solid var(--indigo); outline-offset: -1.5px; }
.cal-num { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-2); }
.cal-marca { width: 5px; height: 5px; border-radius: 50%; background: var(--linea-fuerte); }

.cal-celda--hecha     { background: var(--jade-suave); }
.cal-celda--hecha     .cal-marca { background: var(--jade); }
.cal-celda--parcial   { background: var(--ambar-suave); }
.cal-celda--parcial   .cal-marca { background: var(--ambar); }
.cal-celda--saltada   .cal-marca { background: var(--tinta-3); }
.cal-celda--vencida   { background: var(--carmin-suave); }
.cal-celda--vencida   .cal-marca { background: var(--carmin); }
.cal-celda--pendiente .cal-marca { background: var(--linea-fuerte); }
.cal-celda--vacio     { background: var(--panel-alt); }

.cal-leyenda {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin-top: var(--e-3); padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); color: var(--tinta-3);
}
.cal-leyenda span { display: flex; align-items: center; gap: 5px; }
.cal-punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cal-punto--hecha     { background: var(--jade); }
.cal-punto--parcial   { background: var(--ambar); }
.cal-punto--saltada   { background: var(--tinta-3); }
.cal-punto--vencida   { background: var(--carmin); }
.cal-punto--pendiente { background: var(--linea-fuerte); }

/* ---------- Vista año ---------- */

.ano-rejilla {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--e-2);
}
.ano-mes {
  font: inherit; cursor: pointer;
  display: grid; gap: 5px; justify-items: center;
  padding: var(--e-2) 4px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--panel);
}
.ano-mes:hover:not(:disabled) { border-color: var(--tinta-3); }
.ano-mes:disabled { opacity: .4; cursor: default; }
.ano-mes-nombre {
  font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3);
}
.ano-mes-barra {
  width: 100%; height: 42px;
  display: flex; align-items: flex-end;
  background: var(--panel-alt);
  border-radius: 2px; overflow: hidden;
}
.ano-mes-barra span { width: 100%; background: var(--jade); }
.ano-mes-dato { font-family: var(--f-dato); font-size: 10px; color: var(--tinta-2); }

@media (max-width: 640px) {
  .ano-rejilla { grid-template-columns: repeat(4, 1fr); }
  .reg-cifras { grid-template-columns: repeat(2, 1fr); }
}