.cei-calendario-anual{background:#fff;border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cei-annual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:12px 0}
.cei-month-box{background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.06);min-width:0;cursor:pointer}
.cei-month-header{font-weight:600;margin-bottom:6px;font-size:14px;text-align:center;text-transform:capitalize}
.cei-month-body{overflow:visible}
.cei-month table.cei-month{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;background:#fff !important}
.cei-month th{font-size:11px;color:#4b5563;font-weight:600;text-align:center;box-sizing:border-box;width:14.2857142857%;padding:0;white-space:nowrap;background:#fff !important;border:0 !important;outline:0 !important;box-shadow:none !important;background-clip:padding-box}
.cei-month td{height:28px;min-width:0;border-radius:6px;vertical-align:top;position:relative;padding:0;text-align:center;border:0 !important;outline:0 !important;box-shadow:none !important;background-clip:padding-box;box-sizing:border-box;width:14.2857142857%;white-space:nowrap;overflow:hidden}
.cei-month td:not(.cei-has-event){background:#fff !important}
.cei-month td.cei-sun:not(.cei-has-event){background:transparent !important}
.cei-month td.cei-empty{background:#fff !important}
.cei-month tr{background:#fff !important}
.cei-day-number{font-size:11px;color:#111827;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1;z-index:1}
.cei-month td.cei-has-event{border-color:transparent}
.cei-month td.cei-has-event{box-shadow:none}
.cei-month td .cei-cell{position:absolute;inset:0;border-radius:6px;margin:3px;z-index:0}
.cei-month table.cei-month, .cei-month table.cei-month tr, .cei-month table.cei-month th, .cei-month table.cei-month td{border:0 !important;outline:0 !important;box-shadow:none !important}
.cei-month td .cei-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-left:4px;vertical-align:middle}
.cei-detalles-mes{margin-top:16px;padding:16px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cei-detalles-mes *{margin-top:0;margin-bottom:0}
.cei-detalles-mes .cei-detalles-header{text-align:center;text-transform:capitalize}
.cei-event-list{list-style:none;margin:12px 0 0;padding:0}
.cei-event-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed #e5e7eb}
.cei-event-list li:last-child{border-bottom:0}
.cei-event-list .cei-dot{width:10px;height:10px;border-radius:2px;display:inline-block;align-self:center}
.cei-desc{flex-basis:100%;margin-top:4px;margin-left:18px;color:#374151;font-size:13px;line-height:1.4}
.cei-event-image{max-width:100%;height:auto;border-radius:6px;margin-left:auto}
.cei-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cei-legend .cei-legend-label{margin-right:8px;color:#374151;font-size:12px}
.cei-empty-state{color:#6b7280;font-size:14px;padding:4px 0}
.cei-calendario-movil{padding:8px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cei-detalles-movil{margin-top:12px;padding:12px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cei-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cei-nav .title{text-transform:capitalize}
.cei-nav .title{font-weight:600}
.cei-nav button{border:0;background:#0ea5b7;color:#fff;width:32px;height:28px;border-radius:6px;cursor:pointer}
/* Mobile: icon-only arrows (no background box) */
.cei-calendario-movil .cei-nav button{background:transparent !important;color:#0ea5b7;width:auto;height:auto;border-radius:0;padding:0;box-shadow:none}

@media (max-width: 1024px){
  /* Hide desktop calendar and details; show mobile calendar/details */
  .cei-calendario-anual{display:none !important}
  .cei-detalles-mes{display:none !important}
  .cei-calendario-movil{display:block !important}
}
@media (max-width: 768px){
  .cei-annual-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
}

/* Default visibility: desktop visible, mobile hidden (overridden on small screens) */
.cei-calendario-movil{display:none}
.cei-detalles-movil{display:block}
@media (min-width: 1025px){
  .cei-calendario-anual{display:block !important}
  .cei-calendario-movil{display:none !important}
  .cei-detalles-movil{display:none !important}
}