/* =========================
   Monthly.js - Modern Theme
   SAFE (no rompe layout)
========================= */

/* Cambia estos colores a tu marca */
:root{
  --brand: #0B5CFF;      /* azul header */
  --brandDark:#0847c7;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --bg:#ffffff;
  --soft:#f8fafc;
}

/* Fondo general del embed */
html, body{
  background: transparent !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

/* Caja calendario */
.monthly{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(2,8,23,.10);
}

/* Header */
.monthly-header{
  background: linear-gradient(90deg, var(--brand), var(--brandDark));
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Mes/año */
.monthly-header-title-date,
.monthly-header-title-date:hover{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700;
}

/* Botones Today/Month */
.monthly-header-title a:link,
.monthly-header-title a:visited{
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  background: rgba(255,255,255,.10);
}
.monthly-header-title a:hover{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

/* Flechas */
.monthly-prev, .monthly-next{ opacity: .9; }
.monthly-prev:hover, .monthly-next:hover{ opacity: 1; }
.monthly-prev:after, .monthly-next:after{
  border-color: #fff;
}

/* Días de la semana */
.monthly-day-title-wrap{
  background: var(--soft);
  border-bottom: 1px solid var(--border);
}
.monthly-day-title-wrap div{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
  padding: .6em 0;
}

/* Celdas */
.monthly-day, .monthly-day-blank{
  box-shadow: 0 0 0 1px var(--border);
}
.monthly-day:hover{
  background: #f1f5ff;
}

/* Numerito del día */
.monthly-day-number{
  color: var(--text);
  font-weight: 800;
}

/* Día “hoy” más elegante */
.monthly-today .monthly-day-number{
  background: #ef4444; /* rojo “hoy” */
  box-shadow: 0 6px 16px rgba(239,68,68,.35);
}

/* Eventos: mejorar pill (cuando está en modo barras) */
@media (min-width: 25em){
  .monthly-day .monthly-event-indicator{
    border-radius: 10px !important;
    margin: 0 0 6px 0 !important;
    height: 1.55em !important;
    line-height: 1.35em !important;
    padding: 0.14em 0.55em !important;
    box-shadow: 0 6px 14px rgba(2,8,23,.12);
  }
}

/* Lista de eventos (si abres un día) */
.monthly-event-list{
  background: rgba(248,250,252,.98);
  backdrop-filter: blur(6px);
}

/* Evento en lista */
.monthly-event-list .listed-event{
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(2,8,23,.10);
}