:root{
  --gravini-primary: #005A9F;
  --gravini-secondary: #FEB005;
  --gravini-accent: #003A6D;
  --gravini-text: #1F2933;
  --gravini-muted: #4B5563;
  --gravini-border: #E5E7EB;
  --gravini-bg: #F5F7FA;
  --gravini-radius: 12px;
}

.gravini-calendar-wrap{
  background: #fff;
  border: 1px solid var(--gravini-border);
  border-radius: var(--gravini-radius);
  padding: 20px;
}

.gravini-calendar-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.gravini-calendar-left{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.gravini-calendar-title{
  font-weight: 700;
  color: var(--gravini-text);
  font-size: 18px;
}

.gravini-calendar-nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gravini-calendar-view{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gravini-btn{
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor:pointer;
  border: 2px solid transparent;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1.2;
  background: transparent;
}

.gravini-btn-primary{
  background: var(--gravini-primary);
  color: #fff;
}
.gravini-btn-primary:hover{ background: var(--gravini-accent); }

.gravini-btn-secondary{
  color: var(--gravini-primary);
  border-color: var(--gravini-primary);
}
.gravini-btn-secondary:hover{
  background: var(--gravini-primary);
  color: #fff;
}

.gravini-calendar-view .is-active{
  background: var(--gravini-primary);
  color:#fff;
}

.gravini-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gravini-bg);
  color: var(--gravini-accent);
  border: 1px solid var(--gravini-border);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* FullCalendar tune */
.fc{
  --fc-border-color: var(--gravini-border);
  --fc-today-bg-color: rgba(254, 176, 5, 0.12);
  font-family: inherit;
}

.fc .fc-col-header-cell-cushion{
  color: var(--gravini-text);
  font-weight: 600;
}

.fc .fc-daygrid-day-number{
  color: var(--gravini-text);
  font-weight: 600;
}

.fc .fc-daygrid-event{
  border: 0;
  background: var(--gravini-primary);
  color: #fff;
  border-radius: 8px;
  padding: 2px 6px;
}
.fc .fc-daygrid-event:hover{
  background: var(--gravini-accent);
}

.fc .fc-list-event:hover td{
  background: var(--gravini-bg);
}

.fc a{
  color: inherit;
  text-decoration: none;
}

/* Modal */
.gravini-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.gravini-modal.is-open{ display:block; }

.gravini-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.gravini-modal-card{
  position:relative;
  max-width: 720px;
  margin: 8vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.gravini-modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--gravini-border);
  background: #fff;
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}

.gravini-modal-title{
  margin: 8px 0 6px 0;
  font-size: 22px;
  color: var(--gravini-text);
}

.gravini-modal-info{
  color: var(--gravini-muted);
  font-size: 14px;
}

.gravini-modal-desc{
  margin-top: 16px;
  color: var(--gravini-text);
  line-height: 1.6;
  white-space: pre-wrap; /* respeta saltos de línea */
}

.gravini-modal-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}

.gravini-modal-open{ overflow:hidden; }

/* Mobile */
@media (max-width: 767px){
  .gravini-calendar-wrap{ padding: 14px; }
  .gravini-calendar-toolbar{ flex-direction: column; align-items: flex-start; }
  .gravini-modal-card{ margin: 10vh 14px; padding: 18px; }
}

.gravini-modal-meta{
  padding-right: 56px; /* deja espacio para la X */
}

.gravini-modal-title{
  margin: 12px 0 6px 0;
  line-height: 1.25;
}

.gravini-modal-info{
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 767px){
  .gravini-modal-title{ font-size: 18px; }
  .gravini-modal-info{ font-size: 13px; }
}