/* Letra ligada, solo para títulos/decoración — nunca para el texto de
   las clases, que tiene que leerse bien para estudiar. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ==================================================================
   LAYOUT: calendario a un lado, clase seleccionada al otro
   ================================================================== */

.visor-clase-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* El bloque del calendario (contenedor de Views) como columna */
.visor-clase-layout > .views-element-container {
  flex: 1 1 380px;
  min-width: 0; /* evita que el calendario reviente el ancho en flex */
}

.visor-clase-layout > .visor-clase {
  flex: 1 1 340px;
  margin-top: 0;
  align-self: stretch;
  min-width: 0;
}

/* Por debajo de este ancho, apilado (calendario arriba, clase abajo) */
@media (max-width: 860px) {
  .visor-clase-layout {
    flex-direction: column;
  }

  .visor-clase-layout > .views-element-container,
  .visor-clase-layout > .visor-clase {
    flex-basis: auto;
    width: 100%;
  }
}

/* ==================================================================
   CALENDARIO: más pequeño, esquinas redondas, botones rojos
   ================================================================== */

.js-drupal-fullcalendar {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e5e5;
}

/* FullCalendar (v4) reduce de tamaño: bajamos el font-size base, todo
   escala a partir de ahí (números de día, texto de eventos, etc). */
.js-drupal-fullcalendar .fc {
  font-size: 0.8rem;
}

.js-drupal-fullcalendar .fc-toolbar {
  padding: 0.6rem 0.85rem 0.15rem;
}

.js-drupal-fullcalendar .fc-toolbar-title,
.js-drupal-fullcalendar .fc-toolbar h2 {
  font-size: 1.1rem !important;
}

/* Botones (prev/next/today/mes/lista), más discretos: por defecto solo
   contorno rojo fino, sin relleno — bastante menos "bloque" que antes.
   FullCalendar v4 usa clases de tema tipo jQuery UI: .fc-button con
   estados .fc-state-default / .fc-state-hover / .fc-state-active.
   Si al inspeccionar ves otras clases (p.ej. .fc-button-primary de
   versiones más nuevas), dímelo y las añadimos también. */
.js-drupal-fullcalendar .fc-button,
.js-drupal-fullcalendar .fc-button-primary {
  background: transparent !important;
  border: 1px solid #d8b3b0 !important;
  color: #b3261e !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
}

.js-drupal-fullcalendar .fc-button:hover,
.js-drupal-fullcalendar .fc-state-hover {
  background: rgba(179, 38, 30, 0.08) !important;
  border-color: #b3261e !important;
  color: #b3261e !important;
}

.js-drupal-fullcalendar .fc-button:disabled,
.js-drupal-fullcalendar .fc-state-disabled {
  border-color: #eee !important;
  color: #ccc !important;
  opacity: 1 !important;
}

/* Solo el botón de la vista/acción activa (p.ej. "Mes" cuando estás en
   vista de mes) se rellena de rojo — así destaca sin que el resto de
   botones también sean bloques sólidos. */
.js-drupal-fullcalendar .fc-state-active,
.js-drupal-fullcalendar .fc-button-active {
  background: #b3261e !important;
  border-color: #b3261e !important;
  color: #ffffff !important;
}

/* Separación más ajustada entre botones del mismo grupo */
.js-drupal-fullcalendar .fc-button-group .fc-button {
  margin: 0 !important;
}

/* El día de hoy, resaltado también en rojo pero suave */
.js-drupal-fullcalendar .fc-today {
  background: rgba(179, 38, 30, 0.08) !important;
}

/* ==================================================================
   PANEL "VISOR DE CLASE"
   ================================================================== */

.visor-clase {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: relative;
}

.visor-clase__cabecera {
  background: #f5f5f5;
  border-bottom: 3px solid #b3261e;
  padding: 0.85rem 1.25rem;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: #333;
  text-transform: capitalize;
}

.visor-clase--vacio .visor-clase__cabecera {
  border-bottom-color: #ccc;
  color: #999;
  font-weight: 600;
}

.visor-clase__cuerpo {
  padding: 1.5rem;
  font-family: 'Red Hat Text', 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;

  /* --- "Papel cuadriculado": cuadrícula sutil de fondo --- */
  background-image:
    linear-gradient(rgba(179, 38, 30, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 38, 30, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.visor-clase__aviso {
  color: #999;
  font-style: italic;
  margin: 0;
  font-family: 'Red Hat Text', 'Lato', sans-serif;
}

.visor-clase__cuerpo strong {
  color: #b3261e;
}

/* --- "Espiral" de cuaderno arriba del panel --- */
.visor-clase::before {
  content: '';
  display: block;
  height: 14px;
  background-image: radial-gradient(circle, #ffffff 3px, #b3261e 3px, #b3261e 4px, transparent 4px);
  background-size: 24px 14px;
  background-repeat: repeat-x;
  background-position: center;
}

/* Popup jsframe oculto: por si el JS tarda un instante en aplicar el
   estilo inline, este respaldo evita cualquier flash visual. */
[id^="windowManager_"] {
  visibility: hidden !important;
}

/* Móvil: menos aire, cuadrícula más discreta */
@media (max-width: 767px) {
  .visor-clase {
    border-radius: 8px;
  }

  .visor-clase__cuerpo {
    padding: 1.1rem;
    background-size: 18px 18px;
  }

  .js-drupal-fullcalendar .fc {
    font-size: 0.75rem;
  }
}