/* =====================================================================
   Rediseño visual de Plan de Clase (Secuencia Didáctica) — item -561.
   Pedido de Jorge (31-oct-2026), por partes, con imagen de referencia.
   SOLO presentación: no cambia ids, name, onclick, onchange, data-* ni el
   orden de los bloques. El formulario es compartido con Unidad Didáctica:
   la fila superior (#pa-numplan-fila) lleva el mismo estilo en Plan Clase y
   en UD (pedido de Jorge, para que combine); el Anclaje solo existe en PC.
   ===================================================================== */

/* ---------- item -564 (pedido de Jorge): el mismo campo oscuro con letra blanca del rediseño
   en TODA Planeación (Plan Analítico, UD, Plan de Clase, Plan Anual, Horas Extra) y en el
   Enfoque Práctico. Solo color/borde: no toca tamaños ni checkboxes/botones. Los estilos
   inline de algún campo puntual siguen ganando (a propósito). ---------- */
:is(#planeacion, #enfoque-practico-ud) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea){
  background-color:var(--bg); color:var(--text); border:1px solid rgba(140,120,255,.35); border-radius:10px;
}
:is(#planeacion, #enfoque-practico-ud) :is(input, select, textarea):focus{
  border-color:#00e5a0; box-shadow:0 0 0 3px rgba(0,229,160,.15); outline:none;
}
:is(#planeacion, #enfoque-practico-ud) :is(input, select, textarea):disabled{ opacity:.6; }
/* Enfoque Práctico tiene su propia regla (index.html, fondo translúcido con !important): aquí solo se
   cambia el FONDO a oscuro y la letra; se conserva su borde verde olivo (identidad del EP).
   "html" al inicio para ganarle en especificidad a esa regla, que vive más abajo en el documento. */
html #enfoque-practico-ud :is(input[type="text"], input[type="number"], input[type="date"], textarea, select){
  background:var(--bg)!important; color:var(--text)!important;
}
:is(#planeacion, #enfoque-practico-ud) input[type="date"]{ color-scheme:dark; }
[data-theme="light"] :is(#planeacion, #enfoque-practico-ud) input[type="date"]{ color-scheme:light; }

/* ---------- Parte 1a: pestañas tipo píldora (todas las de Planeación) ---------- */
.pc-tabs-pildora{
  display:inline-flex!important; flex-wrap:wrap; gap:4px!important; max-width:100%;
  padding:5px; border:1px solid var(--border); border-radius:14px; background:var(--card);
}
#planeacion .pc-tabs-pildora .btn-nav{
  border-radius:10px!important; padding:8px 14px!important; font-size:15px!important;
  border:1px solid transparent!important; color:var(--text);
}
#planeacion .pc-tabs-pildora .btn-nav.active{
  background:#00e5a0!important; color:#04121b!important; border-color:#00e5a0!important;
  box-shadow:0 0 14px rgba(0,229,160,.35);
}
.pc-tabs-pildora > span{ color:var(--text-dim)!important; }

/* ---------- Parte 1b: fila superior de Plan Clase (No. de sesión / Fecha / Duración)
   y de Unidad Didáctica (No. Plan / Temporalidad) — mismo estilo en ambas (pedido de Jorge) ---------- */
#pa-numplan-fila{
  gap:14px 18px!important; align-items:start; padding:14px 18px 12px;
  background:var(--card2); border:1px solid var(--border); border-radius:14px;
}
#pa-numplan-fila label{
  display:block; font-size:14px!important; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text)!important; opacity:.85;
  line-height:18px; margin:0 0 7px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#pa-numplan-fila :is(#pc-num,#plan-fecha-unica,#pc-duracion,#pc-duracion-otro,#plan-num,#plan-temporalidad,#plan-temp-inicio,#plan-temp-fin){
  height:48px; margin:0!important; font-size:17px!important; border-radius:10px;
  background:var(--bg); border:1px solid rgba(140,120,255,.35); color:var(--text); box-sizing:border-box;
}
#pa-numplan-fila :is(#pc-num,#plan-fecha-unica,#plan-num,#plan-temporalidad,#plan-temp-inicio,#plan-temp-fin){ padding:0 12px 0 44px!important; }
#pa-numplan-fila #pc-duracion{
  padding:0 40px 0 44px!important; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4' fill='none' stroke='%236b87a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
#pa-numplan-fila #pc-duracion-otro{ padding:0 10px!important; width:90px!important; }
#pa-numplan-fila :is(#pc-num,#plan-fecha-unica,#pc-duracion,#plan-num,#plan-temporalidad,#plan-temp-inicio,#plan-temp-fin):focus{
  border-color:#00e5a0; box-shadow:0 0 0 3px rgba(0,229,160,.15); outline:none;
}
/* Ícono del calendario nativo visible en tema oscuro */
#pa-numplan-fila :is(#plan-fecha-unica,#plan-temp-inicio,#plan-temp-fin){ color-scheme:dark; }
[data-theme="light"] #pa-numplan-fila :is(#plan-fecha-unica,#plan-temp-inicio,#plan-temp-fin){ color-scheme:light; }

/* Íconos de adorno dentro del campo (pointer-events:none: no estorban al clic ni al teclado) */
#num-plan-clase, #_pc_fecha_wrap, #_pc_duracion_wrap, #num-plan-unidad, #temporalidad-unidad, #temporalidad-planclase > div:first-of-type{ position:relative; }
#pa-numplan-fila :is(#num-plan-clase,#_pc_fecha_wrap,#_pc_duracion_wrap,#num-plan-unidad,#temporalidad-unidad)::before,
#pa-numplan-fila #temporalidad-planclase > div:first-of-type::before,
#pa-numplan-fila #temporalidad-planclase > div:first-of-type::after{
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:17px; color:var(--text-dim);
  position:absolute; left:16px; top:49px; transform:translateY(-50%); pointer-events:none; z-index:1;
}
#pa-numplan-fila :is(#num-plan-clase,#num-plan-unidad)::before{ content:"\f0c0"; }
#pa-numplan-fila :is(#_pc_fecha_wrap,#temporalidad-unidad)::before{ content:"\f133"; }
#pa-numplan-fila #_pc_duracion_wrap::before{ content:"\f017"; }
/* Temporalidad de la UD: 2 fechas (inicio/fin) en una sub-rejilla de 2 columnas con gap de 6px */
#pa-numplan-fila #temporalidad-planclase > div:first-of-type::before,
#pa-numplan-fila #temporalidad-planclase > div:first-of-type::after{ content:"\f133"; top:24px; }
#pa-numplan-fila #temporalidad-planclase > div:first-of-type::after{ left:calc(50% + 3px + 16px); }
#pa-numplan-fila #_pc_rango_ud{ font-size:13px!important; margin-top:6px!important; }
/* Nada de la fila puede forzar un ancho mayor al de la pantalla */
#pa-numplan-fila > *, #pa-numplan-fila input, #pa-numplan-fila select{ min-width:0; }

/* ---------- Parte 2: Anclaje curricular en tarjetas (marcado en pc-fase-a1-v2.js) ---------- */
.pc-anc-grid{
  display:grid; grid-template-columns:minmax(130px,190px) 1.6fr 1fr; gap:14px; margin:6px 0 4px;
}
.pc-anc-card{
  background:rgba(30,41,59,.45); border:1px solid rgba(255,255,255,.07); border-radius:12px;
  padding:14px 18px; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0;
}
.pc-anc-lbl{ display:block; font-size:15px; color:#9fb4d4; font-weight:500; }
.pc-anc-hint{ font-weight:400; }
.pc-anc-val{ display:block; font-size:19px; color:var(--text); line-height:1.35; word-break:break-word; }
/* Grado con el color de la escuela activa: --pc-esc lo pone _pcRenderAnclaje con
   _colorEscuelaActiva() (Escuela 1 verde, 2 azul, 3 amarillo) */
.pc-anc-grado{
  background:linear-gradient(160deg, color-mix(in srgb, var(--pc-esc,#00e5a0) 16%, transparent), color-mix(in srgb, var(--pc-esc,#00e5a0) 4%, transparent));
  border-color:color-mix(in srgb, var(--pc-esc,#00e5a0) 40%, transparent); justify-content:flex-start;
}
.pc-anc-grado-val{
  font-size:46px; font-weight:900; line-height:1; color:var(--pc-esc,#00e5a0);
  text-shadow:0 0 18px color-mix(in srgb, var(--pc-esc,#00e5a0) 35%, transparent); word-break:break-word;
}
.pc-anc-cont{ flex-direction:row; align-items:center; gap:18px; }
.pc-anc-ico{ font-size:40px; color:#9fb4d4; opacity:.75; flex:0 0 auto; }
.pc-anc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pc-anc-chip{
  padding:6px 14px; border-radius:999px; font-size:15px; font-weight:700; color:#04121b;
  background:#94a3b8; white-space:nowrap;
}
.pc-anc-chip-inc{ background:#38bdf8; }
.pc-anc-chip-sal{ background:#2dd4a7; }
.pc-anc-chip-pen{ background:#a78bfa; }
.pc-anc-chip-int{ background:#fbbf24; }
.pc-anc-chip-gen{ background:#f472b6; }
.pc-anc-chip-lec{ background:#fb923c; }
.pc-anc-pda{
  grid-column:1 / -1; border-left:4px solid #38bdf8; background:rgba(56,189,248,.06);
}
[data-theme="light"] .pc-anc-card{ background:var(--card2); border-color:var(--border); }
[data-theme="light"] .pc-anc-pda{ background:rgba(2,132,199,.06); border-left-color:#0284c7; }
[data-theme="light"] .pc-anc-grado-val{ text-shadow:none; }
[data-theme="light"] .pc-anc-lbl{ color:var(--text-dim); }

/* ---------- Parte 3: Metodología + interruptor "Plan clase para evaluación Motriz" en una fila ---------- */
.pc-mm-fila{
  display:grid; grid-template-columns:minmax(130px,190px) 1.6fr 1fr; gap:14px; margin:14px 0 4px; align-items:stretch;
}
.pc-mm-met{ grid-column:1 / 3; justify-content:center; }
.pc-mm-lbl{ display:block; font-size:14px!important; font-weight:700; color:var(--text)!important; opacity:.85; line-height:1.4; margin:0 0 8px!important; }
.pc-mm-lbl span{ font-weight:400!important; text-transform:none; }
.pc-mm-met #_pc-metodologia-anclada{
  height:46px; margin:0!important; font-size:16px!important; border-radius:10px;
  background:var(--bg); border:1px solid rgba(140,120,255,.35); color:var(--text);
}
.pc-mm-met > div{ padding:0!important; } /* "La UD no marcó ninguna metodología" (fila de lectura) */
.pc-mm-motriz{
  font-family:inherit!important;
  flex-direction:row; align-items:center; justify-content:space-between; gap:14px;
  cursor:pointer; text-align:left; font:inherit; color:var(--text); width:100%;
}
.pc-mm-motriz:hover{ border-color:rgba(0,229,160,.35); }
.pc-mm-motriz-txt{ font-size:17px; line-height:1.3; }
.pc-mm-switch{
  position:relative; flex:0 0 auto; width:56px; height:30px; border-radius:999px;
  background:#334155; transition:background .2s;
}
.pc-mm-switch::after{
  content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%;
  background:#e2e8f0; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.4);
}
/* Encendido = el panel de evaluación está visible (lo muestran las funciones de siempre) */
#_pc_anclaje_panel:has(#_pc-eval-motriz-panel[style*="block"]) .pc-mm-switch{ background:#00e5a0; }
#_pc_anclaje_panel:has(#_pc-eval-motriz-panel[style*="block"]) .pc-mm-switch::after{ transform:translateX(26px); background:#fff; }
#_pc_anclaje_panel:has(#_pc-eval-motriz-panel[style*="block"]) .pc-mm-motriz{ border-color:rgba(0,229,160,.45); }
/* El botón original sigue existiendo (id usado por activar/desactivar) pero ya no se ve: lo reemplaza el interruptor */
.pc-mm-eval #_pc-btn-modo-eval-motriz{ display:none!important; }
.pc-mm-eval #_pc-eval-motriz-panel{
  margin-top:12px; padding:14px 18px; border-radius:12px;
  border:1px solid rgba(0,229,160,.35); background:rgba(0,229,160,.05);
}
[data-theme="light"] .pc-mm-switch{ background:#cbd5e1; }

/* ---------- Parte 4: botones Importar UD / Siguiente Plan de Clase (2 columnas) + ayuda debajo ---------- */
#pc-exportar-ud-wrap{ margin:14px 0 16px!important; }
#pc-botones-fila{ gap:14px!important; }
#pc-botones-fila > #pc-btn-exportar-ud,
#pc-botones-fila > #_pc_btn_siguiente{
  min-height:52px; padding:10px 16px!important; border-radius:12px!important;
  display:flex!important; align-items:center; justify-content:center; gap:10px!important; flex-wrap:wrap;
  font-size:17px!important; font-weight:700!important; line-height:1.25; text-align:center;
  background:rgba(30,41,59,.55)!important; transition:border-color .15s, background .15s; font-family:inherit!important;
}
#pc-botones-fila > #pc-btn-exportar-ud{ border:1px solid rgba(148,163,184,.45)!important; color:var(--text)!important; }
#pc-botones-fila > #_pc_btn_siguiente{ border:1px solid #a78bfa!important; color:#b9a5ff!important; flex-wrap:nowrap; }
#pc-botones-fila > #pc-btn-exportar-ud:not(:disabled):hover{ border-color:#cbd5e1!important; background:rgba(51,65,85,.6)!important; }
#pc-botones-fila > #_pc_btn_siguiente:hover{ background:rgba(167,139,250,.12)!important; }
/* El hueco del ícono no se mueve: mismo tamaño en los 2 */
#pc-botones-fila > button i{ font-size:17px; }
#pc-btn-exportar-ud .pc-bf-sub{ font-size:14px; font-weight:500; opacity:.85; }
#pc-importar-ud-desc{ font-size:13px!important; margin-top:8px!important; color:var(--text-dim)!important; }
[data-theme="light"] #pc-botones-fila > #pc-btn-exportar-ud,
[data-theme="light"] #pc-botones-fila > #_pc_btn_siguiente{ background:var(--card2)!important; }
[data-theme="light"] #pc-botones-fila > #_pc_btn_siguiente{ color:#6d28d9!important; border-color:#7c3aed!important; }

/* ---------- Parte 5: secciones de abajo como tarjetas con encabezado. SOLO CSS: no se mueve ni se
   envuelve ningún elemento (varias funciones ubican campos por posición: previousElementSibling de
   #sec-actividades y de #plan-material, nextSibling para Ajustes/Observaciones). La barra final
   Guardar/PDF es compartida con UD (aprobado por Jorge). ---------- */
#form-secuencia-especifico{
  --c-bg: rgba(30,41,59,.45); --c-bd: rgba(255,255,255,.08); --c-in: var(--bg); --c-inbd: rgba(140,120,255,.35);
}
[data-theme="light"] #form-secuencia-especifico{ --c-bg: var(--card2); --c-bd: var(--border); --c-inbd: var(--border); }
/* Piezas: encabezado (arriba), intermedia, cuerpo (abajo) */
#form-secuencia-especifico > div:has(+ div #pc-enfasis-clase),
#form-secuencia-especifico > div:has(> #btn-limpiar-proposito-pc),
#form-secuencia-especifico > div:has(+ div > #plan-material),
#form-secuencia-especifico > div:has(> #pc-actividades-botones){
  background:var(--c-bg); border:1px solid var(--c-bd); border-bottom:none;
  border-radius:12px 12px 0 0; padding:12px 16px 8px!important; margin:16px 0 0!important;
}
#form-secuencia-especifico > div:has(+ div #pc-enfasis-clase){ margin-top:4px!important; }
#form-secuencia-especifico > div:has(> div > #pc-enfasis-clase),
#form-secuencia-especifico > div:has(> #plan-material),
#form-secuencia-especifico > #_pc_fila_generar_aula{
  background:var(--c-bg); border:1px solid var(--c-bd); border-top:none; border-bottom:none;
  padding:4px 16px 14px!important; margin:0!important;
}
#form-secuencia-especifico > div:has(> div > #pc-enfasis-clase),
#form-secuencia-especifico > div:has(> #plan-material){ border-bottom:1px solid var(--c-bd); border-radius:0 0 12px 12px; }
#form-secuencia-especifico > #sec-proposito,
#form-secuencia-especifico > #sec-actividades{
  display:block; width:100%; margin:0!important; border-radius:0 0 12px 12px!important;
  border:1px solid var(--c-bd)!important; border-top:none!important; background:var(--c-in)!important;
  padding:14px 16px!important; font-size:16px!important; line-height:1.5; box-sizing:border-box;
}
/* Etiquetas de sección iguales a las de arriba */
#form-secuencia-especifico > div > label,
#form-secuencia-especifico > div > div > label{
  font-size:14px!important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text)!important; opacity:.9;
}
#form-secuencia-especifico > div > label span,
#form-secuencia-especifico > div > div > label span{ text-transform:none; letter-spacing:0; font-size:13.5px!important; opacity:.8; }
#form-secuencia-especifico > div:has(+ div > #plan-material) > label{ color:#b9a5ff!important; }
/* Campos dentro de las tarjetas */
#pc-enfasis-clase, #pc-num-momentos, #plan-material{
  height:46px; border-radius:10px!important; background:var(--c-in)!important; border:1px solid var(--c-inbd)!important;
  font-size:16px!important; padding:0 14px!important;
}
#plan-material{ height:56px; padding:12px 14px!important; }
#pc-num-momentos{ width:110px!important; }
/* Fila Generar con TP / Actividades en aula / borrar */
#_pc_fila_generar_aula{ gap:10px!important; }
#_pc_fila_generar_aula > button{ min-height:48px; border-radius:10px!important; font-size:15px!important; font-family:inherit!important; }
/* Ajustes razonables: sub-tarjeta cian debajo de Actividades */
#_pc_ajustes_razonables{ margin-top:12px!important; padding:14px 18px!important; border-radius:12px!important; border-left:4px solid #06b6d4!important; }
#_pc_ajustes_razonables > div:first-child{ font-size:14px!important; }
#_pc_ajustes_razonables > div{ font-size:13.5px!important; }
#_pc_ajustes_razonables > div > div{ font-size:15px!important; }
/* Herramientas: 5 mosaicos con sus mismos colores */
#form-secuencia-especifico > div:has(> button[onclick*="_pcAbrirModalClonarClase"]){
  display:grid!important; grid-template-columns:repeat(5,1fr); gap:12px!important; margin-top:18px!important;
}
#form-secuencia-especifico > div:has(> button[onclick*="_pcAbrirModalClonarClase"]) > button{
  min-height:58px; border-radius:12px!important; font-size:14px!important; font-family:inherit!important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0!important; padding:8px!important;
}
#form-secuencia-especifico > div:has(> button[onclick*="_pcAbrirModalClonarClase"]) > button i{ font-size:18px; }
/* Barra final Guardar / PDF / PPTX (no toca el color gris/verde de Guardar) */
#card-base-planeacion > div:has(> #btn-guardar-ud-pc){ gap:14px!important; margin-top:20px!important; padding-top:18px; border-top:1px solid var(--border); }
#card-base-planeacion > div:has(> #btn-guardar-ud-pc) > button{ min-height:56px; border-radius:12px!important; font-size:16px!important; font-family:inherit!important; }

/* ---------- Modo libre ("Diseñar libremente") con el mismo estilo de tarjetas ---------- */
.pc-anc-nota{ display:block; font-size:13px; color:var(--text-dim); line-height:1.35; }
.pc-anc-card select, .pc-anc-card textarea{
  width:100%; margin:0!important; font-size:16px!important; border-radius:10px;
  background:var(--bg); border:1px solid rgba(140,120,255,.35); color:var(--text); box-sizing:border-box;
}
.pc-anc-card select{ height:46px; }
.pc-anc-pda #_pc-pda-libre{ height:auto; min-height:46px; white-space:normal; }
.pc-lib-cont .pc-anc-lbl i{ margin-right:4px; opacity:.8; }
/* Botones del encabezado del Anclaje ("Diseñar libremente" / "Volver a modo UD") con la letra de la app */
#_pc_anclaje_panel > div:first-child > button{ font-family:inherit!important; }
.pc-lib-fila2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.pc-lib-desc{ margin-top:14px; }
.pc-lib-desc textarea{ min-height:80px; padding:12px 14px!important; line-height:1.45; }
/* Píldoras de ejes: apagadas con borde; encendidas con el color de cada eje (igual que en modo anclado) */
.pc-anc-chips ._pc-eje-pill{
  margin:0!important; padding:7px 14px!important; font-size:15px!important; font-family:inherit!important;
  border-radius:999px!important; background:transparent!important; color:var(--text)!important;
  border:1px solid rgba(148,163,184,.45)!important; opacity:.85;
}
.pc-anc-chips ._pc-eje-pill[data-on="1"]{ color:#04121b!important; font-weight:700!important; opacity:1; border-color:transparent!important; background:#94a3b8!important; }
.pc-anc-chips ._pc-eje-pill[data-on="1"][data-eje^="Inclus"]{ background:#38bdf8!important; }
.pc-anc-chips ._pc-eje-pill[data-on="1"][data-eje^="Pensamiento"]{ background:#a78bfa!important; }
.pc-anc-chips ._pc-eje-pill[data-on="1"][data-eje^="Intercult"]{ background:#fbbf24!important; }
.pc-anc-chips ._pc-eje-pill[data-on="1"][data-eje^="Igualdad"]{ background:#f472b6!important; }
.pc-anc-chips ._pc-eje-pill[data-on="1"][data-eje^="Vida"]{ background:#2dd4a7!important; }

@media (max-width:768px){
  #form-secuencia-especifico > div:has(> button[onclick*="_pcAbrirModalClonarClase"]){ grid-template-columns:1fr 1fr; }
  #form-secuencia-especifico > div:has(> button[onclick*="_pcAbrirModalClonarClase"]) > button:last-child{ grid-column:1 / -1; }
  #form-secuencia-especifico > #sec-proposito{ min-height:120px; }
  #plan-material{ min-height:76px; }

  #pc-botones-fila > #pc-btn-exportar-ud, #pc-botones-fila > #_pc_btn_siguiente{ font-size:15px!important; gap:4px 8px!important; padding:8px 10px!important; }
  #pc-btn-exportar-ud .pc-bf-sub{ font-size:12px; flex-basis:100%; }
  .pc-mm-fila{ grid-template-columns:1fr; gap:10px; }
  .pc-mm-met{ grid-column:auto; }
  .pc-mm-motriz-txt{ font-size:15px; }
  #planeacion .pc-tabs-pildora .btn-nav{ font-size:13px!important; padding:7px 10px!important; }
  #pa-numplan-fila{ padding:12px; gap:12px!important; }
  /* UD: inicio y fin apilados (en 2 columnas no caben a 390 px) */
  #pa-numplan-fila #temporalidad-planclase > div:first-of-type{ grid-template-columns:1fr!important; }
  #pa-numplan-fila #temporalidad-planclase > div:first-of-type::after{ left:16px; top:78px; }
  .pc-anc-grid{ grid-template-columns:96px 1fr; gap:10px; }
  .pc-anc-ejes{ grid-column:1 / -1; }
  .pc-anc-card{ padding:12px 14px; }
  .pc-anc-grado-val{ font-size:36px; }
  .pc-anc-cont{ gap:12px; }
  .pc-anc-ico{ font-size:28px; }
  .pc-anc-val{ font-size:16px; }
  .pc-anc-lbl{ font-size:14px; }
  .pc-lib-fila2{ grid-template-columns:1fr; gap:10px; margin-top:10px; }
  /* Modo libre en celular: Grado como franja arriba y Contenido a todo lo ancho (el selector no cabe a la mitad) */
  .pc-anc-grid:has(.pc-lib-cont) .pc-anc-grado{ grid-column:1 / -1; flex-direction:row; align-items:center; flex-wrap:wrap; gap:4px 12px; }
  .pc-anc-grid:has(.pc-lib-cont) .pc-anc-grado .pc-anc-nota{ flex-basis:100%; }
  .pc-anc-grid .pc-lib-cont{ grid-column:1 / -1; }
  .pc-lib-desc{ margin-top:10px; }
}