/* ======= AGENDA (limpio y unificado) ======= */

/* Sección completa en blanco */
#calendario {
  background: #fff !important;
}

/* Contenedores */
.contenedor_calendario_eventos {
  width: 100%;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Tarjeta del calendario (col izquierda) */
.calendario {
  background: #fff;
  border: 1px solid var(--gris);
  border-radius: 0.5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  padding: 0px;
}

/* Encabezado mes/año + flechas */
.menu_meses {
  background: #fff !important;
  color: var(--negro);
  border-radius: 12px;
  padding: 8px 12px 0 12px;
}

.mes_anio_flechas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 16px 12px;
  font-weight: 600;
  font-size: 2rem;
}

.mes_anio_flechas a i {
  color: var(--primario);
}

.mes_anio_flechas a:hover i {
  opacity: 0.8;
}

/* Tabla del calendario (gaps suaves) */
.calendario table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 8px 8px;
  background: #fff;
}

.dias-semana {
  background: #fff !important;
  color: var(--primario);
  font-size: 1.6rem;
  font-weight: 700;
}

.calendario th,
.calendario td {
  background: #fff;
  border: none !important;
  text-align: center;
}

/* Día */
.dia_numero span {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 500;
}

.dia_numero span:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Día con evento */
.dia_con_evento {
  background: var(--primario) !important;
  color: #fff !important;
  border-radius: 10px;
}

/* ===== Lista derecha (eventos) ===== */
.lista-eventos {
  background: #fff;
}

.listado {
  overflow-y: auto;
  border: none;
  border-radius: 16px;
  padding: 0px 8px;
  padding-right: 1rem;
}

#calendario_eventos .datos_evento {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--grisclaro);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

a .datos_evento {
  color: var(--negro);
}

a:hover .datos_evento {
  background: #f7fbff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Cajita fecha */
.fecha_evento {
  border-radius: 1rem;
  background-color: var(--primario);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  min-width: 56px;
}

.dia_evento {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
}

.mes_evento {
  font-size: 1.2rem;
  text-transform: uppercase;
}

/* Alert “sin eventos” */
.mes-sin-eventos .alert {
  background: #fff8e1;
  border: 1px solid #f3e2a6;
  border-radius: 12px;
}

.alert p {
  font-size: 1.4rem;
}

/* Scrollbar (listado) */
.listado::-webkit-scrollbar {
  width: 12px;
}

.listado::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 12px;
}

.listado::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 12px;
  border: 3px solid #f1f1f1;
}

.listado::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .lista-eventos {
    margin-top: 2rem;
  }

  .listado {
    height: 28rem;
  }

  .calendario table {
    border-spacing: 0px 0px;
    padding: 0rem 1rem 1.5rem;
  }
}

@media (min-width: 768px) {
  .listado {
    height: 40rem;
  }
}

/* Subrayado grueso bajo el texto del mes/año */
.mes_anio_flechas .titulo_mes {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-weight: 600;
}
/* ===== Desktop (PC) ===== */
.iframe-calendar {
  min-height: 47rem;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .iframe-calendar {
    min-height: 71rem;
  }
}
.mes_anio_flechas .titulo_mes::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.3rem;
  /* grosor del subrayado tipo Figma */
  background: var(--secundario);
  border-radius: 2px;
}

.texto_principal_evento {
  font-weight: 600;
}

/* Botones de navegación (flechas) en el header del mes */
.mes_anio_flechas>div>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 158, 226, 0.12);
  /* celeste suave del círculo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
}

/* Color del ícono */
.mes_anio_flechas>div>a i {
  color: var(--primario);
  /* o #009EE2 */
  font-size: 1.1rem;
}

/* Hover / Focus */
.mes_anio_flechas>div>a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(0, 158, 226, 0.18);
}

.mes_anio_flechas>div>a:focus {
  outline: 2px solid rgba(0, 158, 226, 0.4);
  outline-offset: 2px;
}

/* Asegura separación con el título */
.mes_anio_flechas {
  gap: 0.5rem;
}

/* ----- Agenda en blanco (franja completa) ----- */
#calendario {
  background: #fff !important;
}

/* ----- “Tarjeta” del calendario y lista a la derecha ----- */
#calendario .calendario,
#calendario .lista-eventos,
#calendario .listado {
  background: #fff;
}

/* Encabezado del calendario en blanco (título mes/año + flechas) */
#calendario .menu_meses,
#calendario_eventos table tr.menu_meses td {
  background: #fff !important;
  color: var(--negro);
  border-bottom: 1px solid var(--grisclaro);
  border-radius: 1rem 1rem 0 0;
}

#calendario .mes_anio_flechas a i {
  color: var(--negro);
}

/* Días de la semana en blanco */
#calendario .dias-semana,
#calendario .dias-semana th {
  background: #fff !important;
  color: var(--negro);
}

/* Celdas del calendario en blanco, con bordes suaves */
#calendario .calendario table,
#calendario .calendario td,
#calendario .calendario th {
  background: #fff;
  border-color: var(--grisclaro);
}

/* Tarjetas del listado (a la derecha) en blanco por defecto */
#calendario_eventos .datos_evento {
  background: #fff;
  border: 1px solid var(--grisclaro);
}

a:hover .datos_evento {
  background: var(--secundario);
}

/* (Opcional) redondeos/sombra suaves como en Figma */
#calendario .calendario {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

#calendario .listado {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.fecha_feriado {
  border-radius: 1rem;
    background-color: var(--grisoscuro);
}

.dia_numero span{
	border-radius: 50px;
}
/* Leyenda días con eventos */
.leyenda-calendario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: var(--grisoscuro);
}

.leyenda-calendario .punto-evento {
  width: 1rem;
  height: 1rem;
  background-color: var(--primario);
  border-radius: 50%;
}
.leyenda-calendario .punto-feriado{
  width: 1rem;
  height: 1rem;
  background-color: var(--grisoscuro);
  border-radius: 50%;
}
.dia_feriado {
  background: var(--grisoscuro) !important;
}