:root{
--bg:#0b1020; --card:#141a2f; --muted:#94a3b8; --text:#e5e7eb; --brand:#0e3e6b; --accent:#22d3ee;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
.container{margin:auto;padding:24px}
.header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{font-weight:700;font-size:22px;letter-spacing:.3px}
.filters{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.select, .btn { /* quitado input[type="month"] */
  background:#0f1529;border:1px solid #222a45;color:var(--text);padding:10px;border-radius:12px
}
.btn{cursor:pointer;text-decoration:none;}
.btn.primary{background:var(--brand);border:none; text-decoration:none;}
.card{background:var(--card);border:1px solid #1f2544;border-radius:16px;padding:16px}


.calendar{margin-top:16px}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cell{min-height:120px;background:#0f1529;border:1px solid #1f2544;border-radius:10px;padding:8px;position:relative}
.cell .date{font-size:12px;color:var(--muted)}
.event{margin-top:6px;padding:6px 8px;border-radius:8px;background:#1d2446;border:1px solid #2a3568;font-size:12px;cursor:pointer}
.event .title{display:block;font-weight:600}
.event .meta{font-size:11px;color:var(--muted)}
.weekdays{color:var(--muted);font-size:12px;margin-bottom:6px}
.weekdays .wd{padding:6px;text-align:center}
.weekdays.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

#grid.grid, #grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(6rem, auto);
}


.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.modal.active{display:flex}
.modal .box{background:var(--card);border:1px solid #1f2544;border-radius:16px;padding:18px;max-width:560px;width:92%}
.modal .box h3{margin:0 0 10px 0}
.modal .row{margin:6px 0;color:var(--muted)}
.modal .row::first-line { color: var(--text); }
/* Si prefieres negrita en la etiqueta, cambia setRow para usar innerHTML; con textContent ya queda limpio. */

/* Mejora el contenedor de filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: #23253a;
  border-radius: 14px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #181a2b33;
}

/* Selects más compactos (quita el mes del selector) */
.filters select {
  min-width: 160px;
  max-width: 220px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #2c2f4a;
  background: #181a2b;
  color: #fff;
  font-size: 1rem;
  transition: border 0.2s;
}

.filters select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 900px) {
  .filters {
    gap: 8px;
    padding: 10px 6px;
  }
  .filters select {
    min-width: 110px;
    font-size: 0.95rem;
    padding: 6px 8px;
  }
}

/* Opcional: mejora el botón de "Entrar" arriba a la derecha */
.header .btn {
  margin-left: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 1rem;
}

/* Mejora la separación de los botones en la tabla de eventos */
.card td .btn {
  margin-right: 8px;
  margin-bottom: 4px;
  display: inline-block;
  min-width: 70px;
  text-align: center;
}

.card td .btn:last-child {
  margin-right: 0;
}

/* Opcional: haz los botones más compactos y uniformes */
.card .btn {
  padding: 6px 14px;
  font-size: 0.97rem;
  border-radius: 8px;
}
.card .btn i {
  font-size: 1em;
  vertical-align: middle;
}

/* Filtros events.php */


.filter-group label {
  font-size: 0.95rem;
  margin-bottom: 4px;
  font-weight: 500;
}

.filters input[type="date"] {
  min-width: 140px;
  max-width: 180px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #2c2f4a;
  font-size: 1rem;
  transition: border 0.2s;
}

.filters input[type="date"]:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Inputs en formularios de la card */
.card input[type="text"],
.card input[type="email"],
.card input[type="datetime-local"],
.card select,
.card textarea {
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #23264a;
  background: #181a2b;
  color: #e5e7eb;
  font-size: 1rem;
  /*margin-top: 4px;
  margin-bottom: 10px;*/
  transition: border 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px #181a2b22;
}

.card input[type="text"]:focus,
.card input[type="email"]:focus,
.card input[type="datetime-local"]:focus,
.card select:focus,
.card textarea:focus {
  border-color: var(--brand, #6366f1);
  outline: none;
  box-shadow: 0 0 0 2px #6366f133;
}

.card textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 200px;
}

/* Mejora el select múltiple de profesores */
.card select[multiple] {
  height: 120px;
  min-height: 80px;
  font-size: 1rem;
  padding: 8px 12px;
}

/* Cabecera (Lun–Vie) */
.weekdays.grid { display: grid; grid-template-columns: repeat(5, 1fr); }
/* Grilla del calendario (Lun–Vie) */
#grid.grid, #grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(6rem, auto); }

/* Estilos mínimos para ver contenido */
.cell { border: 1px solid rgba(255,255,255,.08); padding: .35rem; }
.cell.muted { opacity: .5; }
.date { font-weight: 600; margin-bottom: .25rem; }
.events .event { display: flex; flex-direction: column; gap: 2px; }
.events .event .line { line-height: 1.2; }
.events .event .subj { font-weight: 700; }
.events .event .type { opacity: .9; }
.events .event .time { font-weight: 600; color: #8ab4f8; }
/* Negrita en la línea de fecha/hora del modal */
#m_when { font-weight: 700; }

/* Negrita solo en las etiquetas "Lugar:" y "Tipo:" del modal */
#m_loc .label,
#m_type .label,
#m_prof .label,
#m_lang .label,
#m_desc .label { font-weight: 700; }

/* Etiquetas dentro de la fecha (se muestra en móvil) */
.date .wd-label { display: none; color: var(--muted); margin-right: 6px; text-transform: capitalize; }
.date .day { font-weight: 600; }

/* Desktop: 5 columnas (L–V) ya definido arriba */

/* Tablets: 2 columnas, cabecera oculta, tamaños compactos */
@media (max-width: 900px) {
  /* Forzar ocultar cabecera de días en móvil/tablet */
  .weekdays,
  .weekdays.grid { display: none !important; }

  #grid.grid, #grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(5.2rem, auto); }
  .cell { min-height: 0; padding: 8px; }
  .date .wd-label { display: inline; } /* mostrar "Lun, Mar..." dentro de la celda */
  .events .event { font-size: 13px; padding: 6px; }
}

/* Móviles: 1 columna tipo agenda */
@media (max-width: 600px) {
  .weekdays,
  .weekdays.grid { display: none !important; }

  #grid.grid, #grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cell { padding: 10px; }
  .events .event { font-size: 13px; padding: 6px 8px; }
}

/* Nueva regla: tamaño y color para los profesores en los eventos */
.events .event .profs { font-size: 12px; color: var(--muted); }