/* ==========================================================================
   Plan de estudios · estilos específicos
   --------------------------------------------------------------------------
   Este archivo contiene únicamente los estilos necesarios para la página
   /vida_universitaria/plan_estudios.html.
   Sustituye las partes de plan que antes estaban dentro de /assets/styles.css.
   ========================================================================== */

/* Grid horizontal de semestres generado desde /assets/scripts.js */
#planGrid{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type:x proximity;
}
.sem-col{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:9.2rem;
  flex:0 0 9.2rem;
  scroll-snap-align:start;
}
.sem-header{
  background:var(--ibero-red);
  color:#fff;
  font-weight:300;
  text-align:center;
  padding:.35rem .25rem;
  border-radius:0;
  font-size:.75rem;
  text-transform:uppercase;
}
.course-card{
  box-sizing:border-box;
  position:relative;
  cursor:pointer;
  width:100%;
  min-height:5.85rem;
  padding:.45rem .25rem;
  border:2px solid var(--ibero-border);
  border-radius:0;
  background:#fff;
  color:#000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size:.70rem;
  line-height:1.1rem;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.course-card:hover{
  transform:scale(1.06);
  border-color:var(--ibero-red);
}
@media (min-width:992px){
  #planGrid{scrollbar-width:none;}
  #planGrid::-webkit-scrollbar{display:none;}
}

/* Selector de vista, navegación y separadores */
#viewSelector select.form-select{
  background-color:#f8f9fa;
  font-weight:300;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='none' stroke='%23231F20' stroke-width='2' d='M1 3l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px 12px;
  padding-right:2.5rem;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.view-divider{
  width:100%;
  max-width:850px;
  height:3px;
  margin:1rem auto 2rem;
  background:var(--ibero-red);
}
#plan .section-heading{
  margin-top:2rem;
  margin-bottom:.5rem;
  padding:0;
  border:none;
}
#planNav .btn,
.btn-ibero-mini{
  border-radius:999px;
}

/* Vista calculadora */
.course-card.cursado{
  border:4px solid var(--ibero-red);
}
.course-card.porcursar{
  border:4px solid #00b020;
}
#brushTodo{
  color:#00b020;
  border-color:#00b020;
}
#brushTodo.active,
#brushTodo:hover,
#brushTodo:active{
  background:#00b020;
  color:#fff;
  border-color:#00b020;
}
#brushClear{
  color:#333;
  border-color:#6c757d;
}
#brushClear:hover{
  background:#6c757d;
  color:#fff;
}
#calcSummary{
  max-width:820px;
  margin:1rem auto 2rem;
  padding:0 1rem;
}

/* Vista seriaciones */
.course-card.chain{
  border:4px solid #7a00c0;
  box-shadow:0 0 5px rgba(122,0,192,.35);
}

/* Botón copiar dentro del modal de materia */
.btn-copy{
  width:2rem;
  height:2rem;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-copy i{
  font-size:1rem;
  line-height:1;
}

/* Modal introductorio */
#introModal .modal-content{
  border:0;
  border-radius:.75rem;
  overflow:hidden;
}
#introModal .modal-dialog{
  max-width:550px;
}
.intro-video{
  aspect-ratio:5/4;
  max-height:60vh;
  background:#000;
  width:100%;
  object-fit:contain;
}
#introModal .carousel-caption{
  position:static;
  padding:1rem;
  text-align:center;
  background:#f8f9fa;
}
#introModal .btn-close{
  z-index:1060;
}
.intro-header{
  justify-content:center;
  border-bottom:2px solid #eee;
  position:relative;
}
.intro-header h5{
  font-size:1.4rem;
  font-weight:300;
}
#introSubtitle{
  margin-top:.15rem;
  color:#555;
  font-size:.95rem;
  font-weight:300;
}

/* ===========================================================================
   Ajuste tipográfico institucional del plan de estudios
   ---------------------------------------------------------------------------
   Este archivo se carga después de ibero-site.css; por eso aquí se refuerzan
   los componentes dinámicos del plan que genera JavaScript.
   =========================================================================== */
#plan,
#planGrid,
#viewSelector,
#planNav,
#calcSummary,
#courseModal,
#introModal {
  font-family: var(--ibero-sans) !important;
  font-weight: 300;
}

#plan .section-heading,
#courseModalTitle,
#introModal .intro-header h5 {
  font-family: var(--ibero-serif) !important;
  font-weight: 300 !important;
  text-transform: none !important;
}

#plan .section-heading {
  font-size: clamp(2.45rem, 4.15vw, 4.55rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.sem-header {
  font-family: var(--ibero-sans) !important;
  font-weight: 300 !important;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.course-card,
.course-card strong,
.course-card span,
.course-card small,
#viewSelector select.form-select,
#viewSelector .fw-semibold,
#calcSummary,
#planNav .btn,
.btn-ibero-mini,
#brushTodo,
#brushClear,
#courseModal .modal-body,
#courseModal .modal-body p,
#courseModal .modal-body li,
#courseModal .modal-body td,
#courseModal .modal-body th,
#introSubtitle,
#introModal .carousel-caption,
#introModal .carousel-caption p,
#introModal .btn {
  font-family: var(--ibero-sans) !important;
  font-weight: 300 !important;
}

#courseModalTitle,
#introModal .intro-header h5 {
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

@media (max-width: 575.98px) {
  #plan .section-heading {
    font-size: 2.45rem;
  }
}