header{display:flex;gap:12px;align-items:center;justify-content:space-around;margin-bottom:18px}
    .brand{display:flex;gap:12px;align-items:center}
    .controls{display:flex;gap:8px;align-items:center}
    .btn{background:rgba(255,255,255,0.03);border:1px solid orange;padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
    .btn.active{background:linear-gradient(180deg, #fff8f4, #ffd8bb);border-color:rgba(6,182,212,0.25)}
    .small{padding:6px 10px;font-size:13px}

    .toolbar{display:flex;gap:10px;align-items:center}
    .nav{display:flex;gap:6px;align-items:center; justify-content: center;}

    .layout{display:grid;grid-template-columns:1fr 340px;gap:18px}
    /* calendar card */
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.03)}

    .month-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
    .weekday{font-size:12px;color:var(--muted);text-align:center}
    .day_calendar{min-height:90px;min-width: 125px; padding:8px;border-radius:8px;background: darkseagreen;position:relative}
    .day_calendar .date{font-size:12px;font-weight:600}
    .day_calendar .events{margin-top:8px;display:flex;flex-direction:column;gap:6px}
    .event-pill{display:flex;gap:8px;align-items:center;padding:6px;border-radius:8px;font-size:13px;background: linear-gradient(90deg, #e57373, #c62828);cursor:pointer;border:1px solid rgba(255,255,255,0.02)}
    .event-pill .emoji{width:22px;text-align:center}
    .event-count{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.03);padding:4px 8px;border-radius:999px;font-size:12px}

    /* sidebar */
    .sidebar .filters{display:flex;flex-direction:column;gap:10px}
    label{font-size:13px;color:var(--muted)}
    select,input[type=search]{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, #fff8f4, #fff3ea);color:inherit}
    .list{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto;padding-right:6px}
    .mini-event{background:linear-gradient(180deg, #fff8f4, #fff3ea);padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);display:flex;flex-direction: column; justify-content:space-between;gap:8px;align-items:center}
    .mini-event .meta{font-size:12px;color:var(--muted)}

    /* modal */
    .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;padding:20px;z-index: 9999; flex-direction: column;}
    .modal{background:linear-gradient(180deg, #fff8f4, #fff3ea);padding:18px;border-radius:12px;max-width:720px;width:100%;border:1px solid rgba(255,255,255,0.03); display: flex; flex-direction: column; align-items: center; overflow:scroll;}
    .modal h2{margin:0 0 8px 0}
    .modal p{margin:6px 0;color:var(--muted)}
    .modal .row{display:flex;gap:12px;align-items:center}
    .modal div {
        flex-direction: column;
    }

    .day_calendar.no-events {
        background: #e9ebe0 !important;
        color: #87927c !important;
        opacity: 0.75;
        border: 1px dashed #c5caba;
    }

    .day_calendar.no-events:hover {
        opacity: 1;
        background: #dfe3d4;
    }

    /* responsive */
    @media (max-width:980px){.layout{grid-template-columns:1fr;}.sidebar{order:2}}
    /* ------------------------------------------------------ */
/* 🎄 RESPONSIVE CALENDAR — Compatible sin modificar JS   */
/* ------------------------------------------------------ */

/* ------ 1) Ajustes generales ------ */
@media (max-width: 1100px) {
  body {
    padding: 0;
  }

  header {
    flex-direction: column;
    gap: 16px;
    padding: 24px;

  }

  .controls {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .toolbar {
    width: 100%;
    justify-content: space-between;
  }
}

/* ------ 2) Layout responsive ------ */
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: 2;
    padding: 16px;
  }

  .card {
    padding: 0;
  }

  .list {
    max-height: 360px;
  }
}

/* ------ 3) Rejilla del calendario ------ */
@media (max-width: 820px) {
  .grid {
    gap: 6px;
  }

  .day_calendar {
    min-height: 70px;
    min-width: unset;
    padding: 6px;
  }

  .day_calendar .date {
    font-size: 11px;
  }

  .event-pill {
    font-size: 12px;
    padding: 4px 6px;
    gap: 6px;
  }
}

/* ------ 4) Breakpoint: móviles medianos ------ */
@media (max-width: 640px) {
  .brand {
    flex-direction: row;
  }


  .month-head {
    flex-direction: column;
    gap: 6px;
  }

  /* Semana y día más legibles en móvil */
  .day_calendar {
    min-height: 55px;
  }

  .event-pill .emoji {
    width: 18px;
    font-size: 14px;
  }

  .event-pill .title {
    font-size: 12px;
  }

  .weekday {
    font-size: 11px;
  }
}

/* ------ 5) Breakpoint: móviles pequeños ------ */
@media (max-width: 480px) {

  .toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .nav {
    width: 100%;
  }

  .controls {
    flex-direction: column;
    gap: 10px;
  }

  .viewBtn {
    flex: 1;
    text-align: center;
  }

  /* Rejilla del calendario más compacta */
  .grid {
    gap: 1px;
  }

  .day_calendar {
    padding: 0;
    min-height: 48px;
    border-radius: 8px;
  }

  .event-count {
    font-size: 10px;
    padding: 2px 6px;
  }

  .event-pill {
    padding: 3px 5px;
    font-size: 11px;
    flex-direction: column;
  }
}

/* ------ 6) Modal responsive ------ */
@media (max-width: 600px) {

  .modal {
    max-width: 100%;
    padding: 14px;
    overflow-y: scroll;
  }

  .modal h2 {
    font-size: 18px;
  }

  .modal .row {
    flex-direction: column;
    align-items: flex-start;
  }

  #modalEmoji {
    font-size: 36px;
  }
}

/* ------ 7) Día en vista semana/día responsive ------ */
@media (max-width: 550px) {
  .day_calendar[data-date] .date {
    font-size: 11px;
  }

  .mini-event {
    flex-direction: column;
    align-items: flex-start;
  }

  .mini-event button {
    width: 100%;
    margin-top: 6px;
  }
}

/* ------ 8) Sidebar estilo móvil ------ */
@media (max-width: 768px) {
  aside.sidebar .card {
    border-radius: 10px;
  }

  aside.sidebar select,
  aside.sidebar input[type=search] {
    font-size: 14px;
  }
}

/* wrapper/label */
.event-wrapper{margin-bottom:1rem}
.event-label{
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  user-select:none;
  padding:8px 6px;
  border-radius:6px;
}

/* flecha minimal */
.event-label .arrow{
  width:12px;height:12px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg); /* apunta abajo */
  transition: transform .28s cubic-bezier(.22,.9,.37,1);
  flex:0 0 18px;
  display: none;
}

/* estado abierto (rota flecha) */
.event-wrapper.open .arrow{ transform:rotate(-135deg) }

/* lista: por defecto visible en escritorio (max-height grande) */
.list{
  overflow:scroll;
  transition: max-height .36s cubic-bezier(.22,.9,.37,1), opacity .28s ease;
  opacity:1;
  max-height:500px; /* escritorio: suficientemente grande */
}

/* MOBILE: oculta por defecto */
@media (max-width:768px){
  .list{
    max-height:0;
    opacity:0;
  }
  .event-wrapper.open .list{
    /* cuando está 'open' dejamos que el JS escriba max-height real,
       esta regla solo asegura visibilidad si JS no ha corrido aún */
    opacity:1;
  }

  .event-label .arrow{
    display: block;
  }
}

/* pequeña mejora visual */
.list > * + *{ margin-top:10px; }

/* ==========================================================
   FIXES ANTI SCROLL HORIZONTAL
   ========================================================== */

/* Evita que cualquier elemento provoque desborde */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Layout fluido */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  width: 100%;
  overflow: hidden;
}

/* Evita que la columna fija + calendario causen overflow */
@media (max-width: 1180px) {
  .layout {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    order: 2;
  }
}

/* Evita que cada día del calendario fuerce anchura extra */
.day_calendar {
  min-width: 0 !important;
  width: 100%;
}

/* Garantiza que el grid no crezca más del viewport */
.grid {
  width: 100%;
  overflow: hidden;
}

/* -----------------------------------------------------
   FIX: evitar desbordes en días con mucho texto
   ----------------------------------------------------- */

/* 1) Los días deben adaptar su altura sin romper la anchura */
.day_calendar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  min-width: 0 !important; /* clave para evitar overflow horizontal */
  width: 100%;
  overflow: hidden;         /* oculta posibles desbordes raros */
  word-wrap: break-word;    /* rompe palabras largas */
  word-break: break-word;   /* rompe palabras que no caben */
}

/* 2) La zona donde aparecen los eventos no puede expandirse lateralmente */
.day_calendar .events {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* 3) Cada evento dentro del día debe adaptarse al espacio */
.day_calendar .event-pill {
  width: 100%;
  min-width: 0;
  white-space: normal;   /* fuerza a que el texto haga saltos de línea */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 4) Para móviles muy pequeños, el texto se vuelve aún más flexible */
@media (max-width: 480px) {

  .day_calendar {
    padding: 4px;
    min-height: 50px;
  }

  .event-pill {
    font-size: 11px;
    padding: 3px 4px;
    flex-direction: column;  /* apilar icono + texto */
    align-items: flex-start;
  }

  .event-pill .emoji {
    font-size: 14px;
    width: auto;
  }
}

.today {
  outline: 3px solid #ffcc00;
  border-radius: 8px;
  background-color: rgba(255,200,0,0.15);
}