/* PLUSTECA_BRAND_UI_V1
 * Sistema visual aditivo para acciones y navegacion.
 * Reutiliza los cuatro colores de marca con una intensidad moderada.
 */
:root{
  /* R2: fondos, hover y bordes desplazados 20% hacia el color sólido de marca. */
  --pl-brand-blue-bg:#c2d9f9;
  --pl-brand-blue-hover:#b9d4f9;
  --pl-brand-blue-border:#a5c5f3;
  --pl-brand-blue-text:#1559bb;
  --pl-brand-green-bg:#bfe9d6;
  --pl-brand-green-hover:#b6e6d0;
  --pl-brand-green-border:#a1dbc0;
  --pl-brand-green-text:#14734c;
  --pl-brand-orange-bg:#fde4ba;
  --pl-brand-orange-hover:#fddda8;
  --pl-brand-orange-border:#f2cb87;
  --pl-brand-orange-text:#87530a;
  --pl-brand-red-bg:#fcd0cc;
  --pl-brand-red-hover:#fcc7c3;
  --pl-brand-red-border:#f2afa9;
  --pl-brand-red-text:#a3362f;
  --pl-stone-bg:#f2f1ee;
  --pl-stone-hover:#e9e7e2;
  --pl-stone-active:#dfddd7;
  --pl-stone-border:#ddd9d1;
  --pl-stone-text:#575d5b;
}

/* Utilidades semanticas reutilizables en formularios nuevos. */
.btn.brand-blue,
.btn.brand-green,
.btn.brand-orange,
.btn.brand-red{
  border:1px solid transparent;
  box-shadow:none;
}
.btn.brand-blue{background:var(--pl-brand-blue-bg);border-color:var(--pl-brand-blue-border);color:var(--pl-brand-blue-text)}
.btn.brand-blue:hover{background:var(--pl-brand-blue-hover)}
.btn.brand-green{background:var(--pl-brand-green-bg);border-color:var(--pl-brand-green-border);color:var(--pl-brand-green-text)}
.btn.brand-green:hover{background:var(--pl-brand-green-hover)}
.btn.brand-orange{background:var(--pl-brand-orange-bg);border-color:var(--pl-brand-orange-border);color:var(--pl-brand-orange-text)}
.btn.brand-orange:hover{background:var(--pl-brand-orange-hover)}
.btn.brand-red{background:var(--pl-brand-red-bg);border-color:var(--pl-brand-red-border);color:var(--pl-brand-red-text)}
.btn.brand-red:hover{background:var(--pl-brand-red-hover)}
.btn.brand-blue:focus-visible,
.btn.brand-green:focus-visible,
.btn.brand-orange:focus-visible,
.btn.brand-red:focus-visible{
  outline:3px solid rgba(23,105,224,.18);
  outline-offset:2px;
}

/* Planificaciones: color por significado, no por orden del boton. */
#ebi-open-plan,
.planner-list .actions a[href^="artifact.php"],
.planner-list .actions a[href*="/artifact.php"]{
  background:var(--pl-brand-blue-bg) !important;
  border:1px solid var(--pl-brand-blue-border) !important;
  color:var(--pl-brand-blue-text) !important;
  box-shadow:none !important;
}
#ebi-open-plan:hover,
.planner-list .actions a[href^="artifact.php"]:hover,
.planner-list .actions a[href*="/artifact.php"]:hover{
  background:var(--pl-brand-blue-hover) !important;
}

#ebi-generate-material,
.planner-list .actions a[href^="planning_material.php"],
.planner-list .actions a[href*="/planning_material.php"]{
  background:var(--pl-brand-green-bg) !important;
  border:1px solid var(--pl-brand-green-border) !important;
  color:var(--pl-brand-green-text) !important;
  box-shadow:none !important;
}
#ebi-generate-material:hover,
.planner-list .actions a[href^="planning_material.php"]:hover,
.planner-list .actions a[href*="/planning_material.php"]:hover{
  background:var(--pl-brand-green-hover) !important;
}

#ebi-cancel-edit,
#cancel-edit{
  background:var(--pl-brand-red-bg) !important;
  border:1px solid var(--pl-brand-red-border) !important;
  color:var(--pl-brand-red-text) !important;
  box-shadow:none !important;
}
#ebi-cancel-edit:hover,
#cancel-edit:hover{
  background:var(--pl-brand-red-hover) !important;
}

/* Al entrar en modo edicion el mismo submit pasa de Guardar a Actualizar. */
#ebi-cancel-edit:not([hidden]) ~ #ebi-save,
#cancel-edit:not([hidden]) ~ #save,
#automation-edit-completed,
.planner-list .actions [data-edit]{
  background:var(--pl-brand-orange-bg) !important;
  border:1px solid var(--pl-brand-orange-border) !important;
  color:var(--pl-brand-orange-text) !important;
  box-shadow:none !important;
}
#ebi-cancel-edit:not([hidden]) ~ #ebi-save:hover,
#cancel-edit:not([hidden]) ~ #save:hover,
#automation-edit-completed:hover,
.planner-list .actions [data-edit]:hover{
  background:var(--pl-brand-orange-hover) !important;
}

/* Las acciones destructivas se mantienen rojas, ahora alineadas con la marca. */
.btn.danger{
  background:var(--pl-brand-red-bg);
  border:1px solid var(--pl-brand-red-border);
  color:var(--pl-brand-red-text);
}
.btn.danger:hover{background:var(--pl-brand-red-hover)}

/*
 * Navegacion principal / menu hamburguesa.
 * Se colorean solo accesos de uso alto para conservar jerarquia visual.
 */
.sidebar .nav-item[href="courses.php"],
.sidebar .nav-item[href="copilot.php"],
.sidebar .nav-item[href="class_logs.php"]{
  background:var(--pl-brand-blue-bg);
  color:var(--pl-brand-blue-text);
}
.sidebar .nav-item[href="courses.php"] .ui-icon,
.sidebar .nav-item[href="copilot.php"] .ui-icon,
.sidebar .nav-item[href="class_logs.php"] .ui-icon{color:var(--blue)}

.sidebar .nav-item[href="planning_ebi.php"],
.sidebar .nav-item[href="planning_ems.php"],
.sidebar .nav-item[href="tomorrow.php"]{
  background:var(--pl-brand-orange-bg);
  color:var(--pl-brand-orange-text);
}
.sidebar .nav-item[href="planning_ebi.php"] .ui-icon,
.sidebar .nav-item[href="planning_ems.php"] .ui-icon,
.sidebar .nav-item[href="tomorrow.php"] .ui-icon{color:var(--orange)}

.sidebar .nav-item[href="library.php"],
.sidebar .nav-item[href="course_live.php"]{
  background:var(--pl-brand-green-bg);
  color:var(--pl-brand-green-text);
}
.sidebar .nav-item[href="library.php"] .ui-icon,
.sidebar .nav-item[href="course_live.php"] .ui-icon{color:var(--green)}

.sidebar .nav-item[href="lifesaver.php"]{
  background:var(--pl-brand-red-bg);
  color:var(--pl-brand-red-text);
}
.sidebar .nav-item[href="lifesaver.php"] .ui-icon{color:var(--coral)}

.sidebar .nav-item[href="courses.php"]:hover,
.sidebar .nav-item[href="copilot.php"]:hover,
.sidebar .nav-item[href="class_logs.php"]:hover{background:var(--pl-brand-blue-hover)}
.sidebar .nav-item[href="planning_ebi.php"]:hover,
.sidebar .nav-item[href="planning_ems.php"]:hover,
.sidebar .nav-item[href="tomorrow.php"]:hover{background:var(--pl-brand-orange-hover)}
.sidebar .nav-item[href="library.php"]:hover,
.sidebar .nav-item[href="course_live.php"]:hover{background:var(--pl-brand-green-hover)}
.sidebar .nav-item[href="lifesaver.php"]:hover{background:var(--pl-brand-red-hover)}

.sidebar .nav-item[href="courses.php"].active,
.sidebar .nav-item[href="copilot.php"].active,
.sidebar .nav-item[href="class_logs.php"].active{box-shadow:inset 3px 0 0 var(--blue)}
.sidebar .nav-item[href="planning_ebi.php"].active,
.sidebar .nav-item[href="planning_ems.php"].active,
.sidebar .nav-item[href="tomorrow.php"].active{box-shadow:inset 3px 0 0 var(--orange)}
.sidebar .nav-item[href="library.php"].active,
.sidebar .nav-item[href="course_live.php"].active{box-shadow:inset 3px 0 0 var(--green)}
.sidebar .nav-item[href="lifesaver.php"].active{box-shadow:inset 3px 0 0 var(--coral)}

/* Administracion: una familia visual unica en gris piedra. */
.sidebar .admin-nav-section{
  margin-top:4px;
  padding:5px;
  border-radius:13px;
  background:#faf9f7;
  border:1px solid #ece9e3;
}
.sidebar .admin-nav-section .nav-group-label{color:#777b78}
.sidebar .admin-nav-section .nav-item,
.sidebar .admin-nav-section .nav-item:hover,
.sidebar .admin-nav-section .nav-item.active{
  color:var(--pl-stone-text);
}
.sidebar .admin-nav-section .nav-item{
  background:var(--pl-stone-bg);
  border:1px solid transparent;
}
.sidebar .admin-nav-section .nav-item .ui-icon{color:#777d7a}
.sidebar .admin-nav-section .nav-item:hover{
  background:var(--pl-stone-hover);
  border-color:var(--pl-stone-border);
}
.sidebar .admin-nav-section .nav-item.active{
  background:var(--pl-stone-active);
  border-color:#d2cec6;
  box-shadow:inset 3px 0 0 #777d7a;
  font-weight:780;
}

/* En movil el mismo sistema se conserva dentro del menu hamburguesa. */
@media (max-width:900px){
  .sidebar .nav-item{
    margin-block:1px;
  }
}

/* PLUSTECA_PLANNING_PERSONALIZATION_UX_V1
 * Recordatorio no bloqueante: la propuesta de Plusteca es editable y el
 * criterio pedagógico permanece en manos del docente.
 */
#ebi-pedagogical-output-panel:not([hidden])::before,
#automation-intention-assistant[tabindex="-1"]::before{
  content:"¿La planificación responde a lo que necesitás?\A¿Contempla los contenidos que querés trabajar?\APodés modificarla y adaptarla a tus propósitos, objetivos y a las características de tu grupo. Plusteca te propone un punto de partida; las decisiones pedagógicas siguen siendo tuyas.";
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:0 0 14px;
  padding:13px 15px;
  white-space:pre-line;
  border:1px solid var(--pl-brand-blue-border);
  border-radius:13px;
  background:var(--pl-brand-blue-bg);
  color:#27415f;
  font-size:.94rem;
  font-weight:560;
  line-height:1.48;
}

/* PLUSTECA_EBI_LEVEL_DENSITY_R2
 * Los seis grados DGEIP (Tramos 2 a 4) reducen altura real, no sólo el ancho
 * de la grilla. Se conserva un blanco táctil mínimo de 44 px.
 */
body #ebi-levels.ebi-level-grid-r8{
  gap:4px !important;
}
body #ebi-levels .ebi-level-card-r8{
  min-height:44px !important;
  padding:4px 5px !important;
  border-radius:8px !important;
  align-items:center !important;
}
body #ebi-levels .ebi-level-card-r8 input{
  margin-top:0 !important;
}
body #ebi-levels .ebi-level-card-r8 > span{
  min-width:0;
  line-height:1.05;
}
body #ebi-levels .ebi-level-card-r8 .planner-meta{
  display:block;
  margin-top:1px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:.68rem;
  line-height:1;
}

/*
 * Evita el hueco 641–899 px donde planners.css devolvía la grilla a una o
 * dos columnas. En móvil/tablet DGEIP queda 3 x 2; en escritorio, 6 x 1.
 */
@media (max-width:899px){
  body #ebi-levels.ebi-level-grid-r8,
  body #ebi-levels.ebi-level-grid-secondary-r8{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:640px){
  body #ebi-levels .ebi-level-card-r8{
    min-height:44px !important;
    padding:3px 4px !important;
    font-size:.82rem;
  }

  body #ebi-levels .ebi-level-card-r8 .planner-meta{
    font-size:.64rem;
  }

  #ebi-pedagogical-output-panel:not([hidden])::before,
  #automation-intention-assistant[tabindex="-1"]::before{
    padding:11px 12px;
    font-size:.9rem;
    line-height:1.42;
  }
}

@media (min-width:900px){
  body #ebi-levels.ebi-level-grid-r8:not(.ebi-level-grid-secondary-r8){
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .btn.brand-blue,
  .btn.brand-green,
  .btn.brand-orange,
  .btn.brand-red,
  .sidebar .nav-item{transition:none}
}