/* =========================================================
   CLARCIEV — FullCalendar styles (versión estable)
   ========================================================= */

/* Paleta base del sitio */
:root{
  --azul-oscuro: #242754;
  --azul-oscuro-2: #1d203f;
  --azul-claro-1: #e7ebf8;
  --azul-claro-2: #eef2ff;
  --blanco: #ffffff;
}
/*
linear-gradient(
    180deg,
    #fbfcff 0%,
    #eef2ff 40%,
    #e7ebf8 100%
  )*/

/* ---------- Contenedor con efecto de fondo ---------- */
#calendarioClarciev{
  background:
    radial-gradient(900px 320px at 95% -10%, rgba(36,39,84,.08), transparent 60%),
    radial-gradient(900px 320px at 5% 110%, rgba(36,39,84,.08), transparent 60%),
    linear-gradient(180deg, var(--azul-claro-1) 0%, #fff 55%);
  border-radius: 16px;
  padding: 18px 18px 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ---------- Toolbar (título + botones) ---------- */
#calendarioClarciev .fc-toolbar-title{
  color: var(--azul-oscuro);
  letter-spacing: .3px;
  font-weight: 600;
  text-transform: none; /* el idioma se fuerza abajo */
}


/* ---------- Vista SEMANA/DÍA: encabezado y 'Todo el día' en azul oscuro ---------- */
#calendarioClarciev .fc-timeGridWeek-view .fc-col-header,
#calendarioClarciev .fc-timeGridDay-view  .fc-col-header,
#calendarioClarciev .fc-timeGridWeek-view .fc-timegrid-allday,
#calendarioClarciev .fc-timeGridDay-view  .fc-timegrid-allday{
  background: var(--azul-oscuro) !important;
}
#calendarioClarciev .fc-timeGridWeek-view .fc-col-header th,
#calendarioClarciev .fc-timeGridDay-view  .fc-col-header th{
  background: var(--azul-oscuro) !important;
  border-color: var(--azul-oscuro-2) !important;
}
#calendarioClarciev .fc-timeGridWeek-view .fc-col-header a,
#calendarioClarciev .fc-timeGridDay-view  .fc-col-header a,
#calendarioClarciev .fc-timegrid .fc-col-header-cell-cushion,
#calendarioClarciev .fc-timegrid-allday .fc-timegrid-axis-cushion{
  color:#fff !important;
  font-weight: 800;
}
#calendarioClarciev .fc-timeGridWeek-view .fc-timegrid-divider,
#calendarioClarciev .fc-timeGridDay-view  .fc-timegrid-divider{
  border-color: var(--azul-oscuro-2) !important;
}



/* Evita que estilos globales de <a> del sitio “pisen” los del calendario */
#calendarioClarciev .fc a:not(.btn):hover{
  color:inherit;
}

/* === CLARCIEV – Fix estable (no toca el fondo) ==================== */

/* Encabezado de la vista MES (fila lun/mar/…) */
#calendarioClarciev .fc-daygrid .fc-col-header,
#calendarioClarciev .fc-daygrid .fc-col-header th{
  background:var(--azul-oscuro) !important;
  border-color:#1d203f !important;
}
#calendarioClarciev .fc-daygrid .fc-col-header .fc-col-header-cell-cushion{
  color:#fff !important;
  text-decoration:none !important;
}

/* Números del mes (1,2,3…) */
#calendarioClarciev a.fc-daygrid-day-number{
  color:#242754 !important;
  text-decoration:none !important;
}

/* Eventos leyendo los colores por país en TODAS las vistas */
#calendarioClarciev a.fc-daygrid-event,
#calendarioClarciev a.fc-timegrid-event,
#calendarioClarciev .fc-daygrid-event .fc-event-main,
#calendarioClarciev .fc-timegrid-event .fc-event-main{
  background:var(--ev-bg) !important;
  color:var(--ev-text) !important;
  border-color:var(--ev-border) !important;
}
#calendarioClarciev a.fc-daygrid-event{ border-left:4px solid var(--ev-border,var(--ev-bg)); border-radius:10px;cursor: pointer; }
#calendarioClarciev a.fc-timegrid-event{ border-left:4px solid var(--ev-border,var(--ev-bg)); border-radius:10px;cursor: pointer; }
#calendarioClarciev a.fc-daygrid-event:hover,
#calendarioClarciev a.fc-timegrid-event:hover,
#calendarioClarciev .fc-daygrid-event:hover .fc-event-main,
#calendarioClarciev .fc-timegrid-event:hover .fc-event-main{
  background:var(--ev-bg-hover,var(--ev-bg)) !important;
  color:var(--ev-text-hover,var(--ev-text)) !important;
  border-color:var(--ev-border-hover,var(--ev-border)) !important;
}

/* Vista LISTA: dot por país + títulos en azul oscuro */
#calendarioClarciev .fc-list-event-dot{
  border-color:var(--ev-border,var(--ev-bg)) !important;
  background:var(--ev-bg,var(--ev-border)) !important;
}
#calendarioClarciev .fc-list-event-title a{
  color:#242754 !important;
  text-decoration:none !important;
  cursor: pointer;
}

/* Evita que el :hover global de <a> cambie colores dentro del calendario */
#calendarioClarciev .fc a:not(.btn):hover{ color:inherit !important; }


/* Sólo en vistas LISTA, cambia el gris neutral del theme por tu azul */
#calendarioClarciev .fc-listMonth-view,
#calendarioClarciev .fc-listWeek-view,
#calendarioClarciev .fc-listYear-view {
  --fc-neutral-bg-color: #242754;  /* fondo del header de día */
  --fc-page-bg-color: transparent; /* evita grises extra en sticky */
}


.fc-list-day-text, .fc-list-day-side-text{
    color:var(--blanco) !important;
    text-decoration: none;
}

 .fc .fc-list-empty{
    background-color: transparent;
 }

 /* ---------- Forzar formato del título según idioma ---------- */
html:lang(es) #calendarioClarciev .fc-toolbar-title{ text-transform: uppercase; }
html:lang(en) #calendarioClarciev .fc-toolbar-title{ text-transform:uppercase; }

/* Responsive */

/* Small screens */
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 575px) {
  /* Botones (Mes / Semana / Lista y flechas) */
  #calendarioClarciev .fc .fc-button{
    padding: .6rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  #calendarioClarciev .fc .fc-button .fc-icon{
    font-size: 0.2rem;
    line-height: 1;
  }


  /* Separación entre grupos de la toolbar (título vs botones) */
  #calendarioClarciev .fc-toolbar-chunk{
    gap: 0px;            /* mejor que inflar padding/font-size aquí */
    padding: 10px;           /* evita empujar la barra entera */
    font-size: 0.8rem;   /* que no afecte a hijos */
    border-radius: 7px;
    
  }

  /* La barra es flex */
#calendarioClarciev .fc-header-toolbar{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* 1er chunk = left (prev/next/hoy)  */
#calendarioClarciev .fc-header-toolbar .fc-toolbar-chunk:nth-child(1){
  order: 2;                 /* lo movemos al medio */
}

/* 2º chunk = center (title) */
#calendarioClarciev .fc-header-toolbar .fc-toolbar-chunk:nth-child(2){
  order: 1;                 /* que vaya primero */
  flex: 1;                  /* que el título ocupe el espacio y quede centrado */
  display: flex;
  justify-content: center;
}

/* 3er chunk = right (views) */
#calendarioClarciev .fc-header-toolbar .fc-toolbar-chunk:nth-child(3){
  order: 3;                 /* que vaya al final */
}

  

  /* (Opcional) Vista Lista más cómoda en desktop */
  #calendarioClarciev .fc .fc-list-day-cushion{
    padding: .9rem 1.1rem;
  }
  #calendarioClarciev .fc .fc-list-table td{
    padding: .8rem 1rem;
    font-size: 1rem;
  }

    /* Píldoras de evento más compactas */
  #calendarioClarciev .fc .fc-daygrid-event{
    padding: 2px 6px;
    border-radius: 10px;
  }

  /* Si decidiste NO mostrar hora por JS, esto no es necesario.
     Si quieres forzarlo por CSS, descomenta la línea. */
  /* #calendarioClarciev .fc .fc-daygrid-event .fc-event-time{ display:none; } */

  #calendarioClarciev .fc .fc-daygrid-event .fc-event-title{
    font-size: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Botones y título un poco más proporcionados en móvil */
  #calendarioClarciev .fc .fc-button{ padding:.35rem .6rem; font-size:.9rem; }
  #calendarioClarciev .fc-toolbar-title{ font-size:1.1rem; }

   /* Píldoras de evento más compactas */
  #calendarioClarciev .fc .fc-daygrid-event{
    padding: 2px 6px;
    border-radius: 10px;
  }


  /* Botones y título un poco más proporcionados en móvil */
  #calendarioClarciev .fc .fc-button{ padding:.35rem .6rem; font-size:.9rem; }
  #calendarioClarciev .fc-toolbar-title{ 
    font-size:0.8rem; 
    margin-top: 0;
}
}
  


/* Small screens */
@media only screen and (min-width: 575px) { } /* Define mobile styles */
@media only screen and (min-width: 576px) and (max-width: 768px) {
  /* Botones (Mes / Semana / Lista y flechas) */
  #calendarioClarciev .fc .fc-button{
    padding: .6rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  #calendarioClarciev .fc .fc-button .fc-icon{
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Título grande y legible en desktop */
  #calendarioClarciev .fc-toolbar-title{
    padding: 0;
    font-size: 1.1rem;
    border-radius: 7px; /* lo dejo si lo usas para tu estilo */
  }

  /* Separación entre grupos de la toolbar (título vs botones) */
  #calendarioClarciev .fc-toolbar-chunk{
    gap: 12px;            /* mejor que inflar padding/font-size aquí */
    padding: 0;           /* evita empujar la barra entera */
    font-size: 0.8rem;   /* que no afecte a hijos */
    border-radius: 7px;
  }

  /* (Opcional) Vista Lista más cómoda en desktop */
  #calendarioClarciev .fc .fc-list-day-cushion{
    padding: .9rem 1.1rem;
  }
  #calendarioClarciev .fc .fc-list-table td{
    padding: .8rem 1rem;
    font-size: 1rem;
  }
  
}

/* Medium screens */
@media only screen and (min-width: 768px) { }
@media only screen and (min-width: 769px) and (max-width: 992px) {
  /* Botones (Mes / Semana / Lista y flechas) */
  #calendarioClarciev .fc .fc-button{
    padding: .6rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  #calendarioClarciev .fc .fc-button .fc-icon{
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Título grande y legible en desktop */
  #calendarioClarciev .fc-toolbar-title{
    padding: 0;
    font-size: 1.5rem;
    border-radius: 7px; /* lo dejo si lo usas para tu estilo */
  }

  /* Separación entre grupos de la toolbar (título vs botones) */
  #calendarioClarciev .fc-toolbar-chunk{
    gap: 12px;            /* mejor que inflar padding/font-size aquí */
    padding: 0;           /* evita empujar la barra entera */
    font-size: 0.88rem;   /* que no afecte a hijos */
    border-radius: 7px;
  }

  /* (Opcional) Vista Lista más cómoda en desktop */
  #calendarioClarciev .fc .fc-list-day-cushion{
    padding: .9rem 1.1rem;
  }
  #calendarioClarciev .fc .fc-list-table td{
    padding: .8rem 1rem;
    font-size: 1rem;
  }
  
}

/* Medium screens */
@media only screen and (min-width: 992px) { }
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  /* Botones (Mes / Semana / Lista y flechas) */
  #calendarioClarciev .fc .fc-button{
    padding: .6rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  #calendarioClarciev .fc .fc-button .fc-icon{
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Título grande y legible en desktop */
  #calendarioClarciev .fc-toolbar-title{
    padding: 0;
    font-size: 1.5rem;
    border-radius: 7px; /* lo dejo si lo usas para tu estilo */
  }

  /* Separación entre grupos de la toolbar (título vs botones) */
  #calendarioClarciev .fc-toolbar-chunk{
    gap: 12px;            /* mejor que inflar padding/font-size aquí */
    padding: 0;           /* evita empujar la barra entera */
    font-size: inherit;   /* que no afecte a hijos */
    border-radius: 7px;
  }

  /* (Opcional) Vista Lista más cómoda en desktop */
  #calendarioClarciev .fc .fc-list-day-cushion{
    padding: .9rem 1.1rem;
  }
  #calendarioClarciev .fc .fc-list-table td{
    padding: .8rem 1rem;
    font-size: 1rem;
  }
  
}

/* Extra Large screens */
@media only screen and (min-width: 1201px) { }
@media only screen and (min-width: 1201px){
  /* Botones (Mes / Semana / Lista y flechas) */
  #calendarioClarciev .fc .fc-button{
    padding: .6rem 1.1rem;
    font-size: 1.05rem;
    border-radius: 12px;
  }
  #calendarioClarciev .fc .fc-button .fc-icon{
    font-size: 1.2rem;
    line-height: 1;
  }

  /* Título grande y legible en desktop */
  #calendarioClarciev .fc-toolbar-title{
    padding: 0;
    font-size: 1.5rem;
    border-radius: 7px; /* lo dejo si lo usas para tu estilo */
  }

  /* Separación entre grupos de la toolbar (título vs botones) */
  #calendarioClarciev .fc-toolbar-chunk{
    gap: 12px;            /* mejor que inflar padding/font-size aquí */
    padding: 0;           /* evita empujar la barra entera */
    font-size: inherit;   /* que no afecte a hijos */
    border-radius: 7px;
  }

  /* (Opcional) Vista Lista más cómoda en desktop */
  #calendarioClarciev .fc .fc-list-day-cushion{
    padding: .9rem 1.1rem;
  }
  #calendarioClarciev .fc .fc-list-table td{
    padding: .8rem 1rem;
    font-size: 1rem;
  }
}