/* =====================================================================
   CALENDARIO — My Calendar (vista mes) · Los Desenchufables
   Rediseño para que cuadre con la estética de la home (terracota/crema).
   Pégalo en: Apariencia → Personalizar → CSS adicional.
   Todo está bajo .mc-main, así que NO afecta al resto de la web.
   Las fuentes se heredan del tema (no se fuerza ninguna).
   ===================================================================== */

.mc-main{
  --mc-accent:#b3763a;      /* terracota principal (botones/iconos) */
  --mc-accent-dk:#96602e;   /* terracota hover */
  --mc-ink:#2c2721;         /* texto oscuro cálido */
  --mc-muted:#938b7d;       /* texto secundario */
  --mc-line:#e9e2d6;        /* bordes suaves */
  --mc-cream:#faf7f2;       /* fondo crema (días pasados) */
  --mc-card:#ffffff;
  --mc-cell:96px;           /* alto de celda */
  max-width:960px;
  margin:0 auto;
  color:var(--mc-ink);
}

/* ---- Título del mes ---- */
.mc-main h2.heading,
.mc-main .my-calendar-month{
  text-align:center; font-size:2rem; font-weight:600; line-height:1.15;
  color:var(--mc-ink); margin:0 0 1.75rem;
}

/* ---- Navegación superior ---- */
.mc-main .my-calendar-header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.7rem 1.1rem; margin-bottom:1.5rem;
}
.mc-main .mc-time ul{ display:flex; gap:.4rem; list-style:none; margin:0; padding:0; }
.mc-main .mc-time li,
.mc-main .my-calendar-nav li{ margin:0; }
.mc-main .my-calendar-nav ul{ list-style:none; margin:0; padding:0; }

.mc-main .mc-navigation-button{
  font:inherit; font-size:.85rem; font-weight:700; letter-spacing:.01em;
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--mc-line);
  background:var(--mc-card); color:var(--mc-ink); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.mc-main .mc-navigation-button:hover{ border-color:var(--mc-accent); color:var(--mc-accent); }
.mc-main .mc-navigation-button.mc-active,
.mc-main .mc-navigation-button[aria-pressed="true"]{
  background:var(--mc-accent); border-color:var(--mc-accent); color:#fff;
}
.mc-main .mc-navigation-button .mc-icon{ display:none; }

.mc-main .my-calendar-date-switcher form > div{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.mc-main .my-calendar-date-switcher label{ font-size:.8rem; color:var(--mc-muted); font-weight:600; }
.mc-main .mc-date-switcher select{
  font:inherit; font-size:.85rem; padding:.45rem .7rem; border-radius:9px;
  border:1px solid var(--mc-line); background:var(--mc-card); color:var(--mc-ink); cursor:pointer;
}
.mc-main .mc-date-switcher input.button{
  font:inherit; font-size:.85rem; font-weight:700; padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--mc-accent); background:var(--mc-accent); color:#fff; cursor:pointer;
  transition:background .15s;
}
.mc-main .mc-date-switcher input.button:hover{ background:var(--mc-accent-dk); border-color:var(--mc-accent-dk); }
.mc-main .mc-date-switcher select:focus,
.mc-main .mc-navigation-button:focus-visible,
.mc-main .mc-text-button:focus-visible{ outline:2px solid var(--mc-accent); outline-offset:2px; }

/* ---- Rejilla ---- */
.mc-main .mc-content{ overflow-x:auto; }
.mc-main .my-calendar-table{
  width:100%; border-collapse:separate; border-spacing:8px; table-layout:fixed; min-width:640px;
}
.mc-main .day-heading,
.mc-main .weekend-heading{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; font-weight:800;
  color:var(--mc-muted); text-align:center; padding:.2rem 0 .6rem; border:0;
}
.mc-main .weekend-heading{ color:var(--mc-accent); }

.mc-main .my-calendar-table td{
  vertical-align:top; height:var(--mc-cell); padding:.55rem;
  border:1px solid var(--mc-line); border-radius:14px; background:var(--mc-card);
  transition:border-color .15s, box-shadow .15s;
}
.mc-main .mc-date{ display:block; font-weight:600; }
.mc-main .mc-date > span[aria-hidden="true"]:not(.event-icon),
.mc-main .mc-day-number{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.8rem; height:1.8rem; font-size:.92rem; font-weight:700;
}
.mc-main .mc-date .event-icon{ display:none; }

/* Estados de día */
.mc-main td.past-day{ background:var(--mc-cream); }
.mc-main td.past-day .mc-date > span[aria-hidden="true"],
.mc-main td.past-day .mc-day-number{ color:var(--mc-muted); }
.mc-main td.nextmonth{ background:transparent; border-color:transparent; }
.mc-main td.nextmonth .mc-date > span[aria-hidden="true"]{ color:var(--mc-muted); opacity:.45; }
.mc-main td.future-day .mc-date > span[aria-hidden="true"]{ color:var(--mc-ink); }

.mc-main td.current-day{ border-color:var(--mc-accent); box-shadow:0 0 0 1px var(--mc-accent) inset; }
.mc-main td.current-day .mc-date > span[aria-hidden="true"]{
  background:var(--mc-accent); color:#fff; border-radius:50%;
}

.mc-main td.mc-events{ border-color:#e0d3bf; box-shadow:0 4px 14px -8px rgba(120,80,30,.35); }
.mc-main td.mc-events:hover{ border-color:var(--mc-accent); }

/* ---- Evento (pastilla) ---- */
.mc-main .calendar-event{ margin-top:.4rem; }
.mc-main .calendar-event + .calendar-event{ margin-top:.3rem; }
.mc-main .event-title{ margin:0; font-size:1rem; }
.mc-main .mc-text-button{
  display:block; width:100%; text-align:left; font:inherit; font-size:.72rem; line-height:1.25;
  font-weight:700; color:#fff; background:var(--mc-accent); border:0; border-radius:8px;
  padding:.35rem .5rem; cursor:pointer; transition:background .15s;
}
.mc-main .mc-text-button:hover{ background:var(--mc-accent-dk); }
.mc-main .mc-text-button svg.category-icon{ display:none; }
.mc-main td.past-day .mc-text-button{ background:#c9b79c; }
.mc-main td.past-day .mc-text-button:hover{ background:var(--mc-accent); }

/* Detalles del evento: ocultos; el plugin los abre como modal */
.mc-main .calendar-event .details{ display:none; }

/* ---- Modal (cuando el plugin abre el evento) ---- */
.my-calendar-modal,
.mc-main .details.single-details{
  background:var(--mc-card); border:1px solid var(--mc-line); border-radius:16px;
  padding:1.5rem 1.75rem; box-shadow:0 24px 60px -20px rgba(60,40,20,.45); color:var(--mc-ink);
}
.my-calendar-modal .time-block p{ margin:.25rem 0; color:var(--mc-muted); font-size:.95rem; }
.my-calendar-modal .mc-details a{ color:var(--mc-accent); font-weight:700; text-decoration:none; }
.my-calendar-modal .mc-details a:hover{ text-decoration:underline; }
.my-calendar-modal .mc-toggle.close{ background:none; border:0; cursor:pointer; color:var(--mc-muted); }

/* ---- Pie: categorías + imprimir ---- */
.mc-main .my-calendar-footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--mc-line);
}
.mc-main .category-key h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800;
  color:var(--mc-muted); margin:0 0 .6rem;
}
.mc-main .category-key ul{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; list-style:none; margin:0; padding:0; }
.mc-main .category-key li{ margin:0; }
.mc-main .category-key button,
.mc-main .category-key .mc-active{
  display:inline-flex; align-items:center; gap:.45rem; font:inherit; font-size:.82rem; font-weight:600;
  background:none; border:0; color:var(--mc-ink); cursor:pointer;
}
.mc-main .category-key button:hover{ color:var(--mc-accent); }
.mc-main .category-color-sample{ display:inline-flex; width:1.05rem; height:1.05rem; }
.mc-main .category-color-sample svg{ width:1.05rem; height:1.05rem; fill:var(--mc-accent)!important; }
.mc-main .mc-print a{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600; color:var(--mc-muted); text-decoration:none; }
.mc-main .mc-print a:hover{ color:var(--mc-accent); }
.mc-main .mc-print .mc-icon{ display:none; }

/* ---- Responsive ---- */
@media (max-width:640px){
  .mc-main h2.heading,
  .mc-main .my-calendar-month{ font-size:1.6rem; }
  .mc-main .my-calendar-footer{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   OVERRIDES — ganan al CSS por defecto del plugin My Calendar
   (quita la barra oscura del número y fuerza la pastilla terracota).
   Si en Ajustes → My Calendar desactivas el estilo del plugin,
   estos !important dejan de ser necesarios, pero no molestan.
   ===================================================================== */
.mc-main .my-calendar-table td.mc-events{ background:var(--mc-card)!important; }
.mc-main .mc-date-container{ display:flex!important; justify-content:flex-start!important; align-items:flex-start!important; }

/* Número del día en días con evento: sin barra oscura */
.mc-main .mc-events .mc-date{
  background:transparent!important; padding:0!important; margin:0!important;
  min-height:0!important; color:var(--mc-ink)!important; text-align:left!important;
}
.mc-main .mc-events .mc-day-number{ background:transparent!important; color:var(--mc-ink)!important; }
.mc-main td.past-day .mc-day-number{ color:var(--mc-muted)!important; }

/* Día de hoy: círculo terracota */
.mc-main td.current-day .mc-date > span[aria-hidden="true"]:not(.event-icon){
  background:var(--mc-accent)!important; color:#fff!important; border-radius:50%!important;
}

/* Pastilla del evento */
.mc-main .calendar-event .mc-text-button{
  display:block!important; width:100%!important; text-align:left!important;
  background:var(--mc-accent)!important; color:#fff!important; border:0!important;
  border-radius:8px!important; padding:.35rem .5rem!important; margin:0!important;
  font-weight:700!important; font-size:.72rem!important; line-height:1.25!important;
  box-shadow:none!important; text-decoration:none!important;
}
.mc-main .calendar-event .mc-text-button:hover{ background:var(--mc-accent-dk)!important; }
.mc-main .calendar-event .mc-text-button div,
.mc-main .calendar-event .mc-text-button span{ color:#fff!important; }
.mc-main td.past-day .calendar-event .mc-text-button{ background:#c9b79c!important; }
.mc-main .mc-text-button svg.category-icon{ display:none!important; }
.mc-main .event-icon{ display:none!important; }
