/* ══════════════════════════════════════════════════════════════
   CALENDARIO — overrides de FullCalendar (mobile-first)
   FullCalendar no viene optimizado para pantallas chicas por
   defecto: acá se ajustan tamaños táctiles, tipografía y colores
   para que respete la paleta de variables de style.css (incluye
   dark mode vía [data-theme="dark"], heredado automáticamente).

   Look & feel inspirado en Samsung Calendar: grid sin bordes de
   celda, "hoy"/"seleccionado" como recuadro redondeado (no relleno),
   barras de color apiladas bajo el número, y el detalle del día
   como panel inline debajo del grid (no popup). ══════════════════ */

#view-calendario .main { padding-bottom: 5.5rem; } /* espacio sobre bottom-nav */

.calendario-toolbar-custom {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.calendario-toolbar-nav {
  display: flex; align-items: center; gap: .3rem;
}
.calendario-toolbar-titulo {
  font-family: 'Roboto', sans-serif; font-size: 1.3rem; font-weight: 800;
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendario-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; border: none;
  color: var(--text-mid); cursor: pointer;
  transition: background .12s;
}
.calendario-nav-btn:hover { background: var(--surface-hover); }
.calendario-nav-btn:active { transform: scale(.94); }
.calendario-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Botón flotante: nuevo evento propio */
.calendario-fab {
  position: fixed; bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); right: 1.1rem; z-index: 150;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(45,106,79,.4);
  transition: transform .15s, box-shadow .15s;
}
.calendario-fab:hover { transform: scale(1.08); }
.calendario-fab:active { transform: scale(.96); }
.calendario-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Leyenda de tipos de evento ─────────────────────────────── */
.calendario-leyenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin-bottom: 1rem;
  font-size: .76rem; color: var(--text-mid);
}
.calendario-leyenda-item { display: flex; align-items: center; gap: .4rem; }
.calendario-leyenda-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.calendario-leyenda-dot--viaje    { background: var(--accent); }
.calendario-leyenda-dot--cumple   { background: var(--gold); }
.calendario-leyenda-dot--evento   { background: #4682b4; }

.calendario-toolbar-titulo-btn {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: none; cursor: pointer;
  padding: .3rem .5rem; border-radius: 8px;
  color: inherit; min-width: 0;
}
.calendario-toolbar-titulo-btn:hover { background: var(--surface-hover); }
.calendario-toolbar-titulo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calendario-toolbar-titulo-btn svg { flex-shrink: 0; color: var(--text-muted); }

.calendario-fecha-sheet-body { display: flex; flex-direction: column; gap: 0; }
.calendario-fecha-sheet-body .calendario-form-field { flex-shrink: 0; }
.calendario-fecha-ir-btn { width: 100%; justify-content: center; margin-top: .3rem; flex-shrink: 0; min-height: 44px; }

/* El sheet reutiliza .modulos-sheet (bottom:0), pero en la vista de
   calendario el .bottom-nav fijo (64px de alto real, ver style.css)
   se dibuja por encima de esa franja aunque el z-index del sheet sea
   mayor — position:fixed en ambos hace que el navbar tape esa parte
   inferior en el plano. Se sube el sheet esa misma altura, igual que
   .fab ya hace en style.css, para que "Ir" quede siempre visible. */
#calendario-fecha-sheet {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 1.4rem;
  border-radius: 22px;
}

/* Contenedor de FullCalendar. Sin card visible (Samsung no encierra
   el grid en un recuadro): fluye directo sobre el fondo de la vista.
   touch-action:pan-y permite que el navegador siga gestionando scroll
   vertical mientras el listener de swipe (JS) controla el gesto
   horizontal con preventDefault(). */
.calendario-wrap {
  background: transparent;
  border: none;
  padding: 0;
  overflow: hidden;
  touch-action: pan-y;
  position: relative; /* ancla el clon del carrusel de meses (ver calendario.js) */
}

/* Fuente y colores base heredados del sistema */
.fc {
  font-family: 'Roboto', sans-serif;
  --fc-border-color: transparent;
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--bg2);
  --fc-list-event-hover-bg-color: var(--surface-hover);
  --fc-today-bg-color: transparent;
  color: var(--text);
}

/* Oculta el toolbar nativo: usamos el custom de arriba (más compacto
   y accesible en mobile que los 3 grupos de botones por defecto) */
.fc .fc-toolbar.fc-header-toolbar { display: none; }

/* Única línea divisoria del grid: bajo la fila de días de semana,
   igual que Samsung. El resto del grid queda sin bordes de celda. */
.fc .fc-scrollgrid { border: none; }
.fc .fc-scrollgrid-section-header table { border-bottom: 1px solid var(--border); }
.fc td, .fc th { border: none; }

.fc .fc-col-header-cell-cushion {
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: .5rem .2rem .7rem;
  text-decoration: none;
}
/* Domingo destacado en rojo, como en Samsung Calendar */
.fc .fc-day-sun .fc-col-header-cell-cushion { color: var(--danger); }
.fc .fc-day-sun .fc-daygrid-day-number { color: var(--danger); }

.fc .fc-daygrid-day-number {
  font-size: .82rem; font-weight: 500; color: var(--text);
  padding: .22rem .4rem 0;
  text-decoration: none;
  width: 100%; text-align: center;
}

/* La altura real de cada fila no la fija fc-daygrid-day-frame: FC
   reserva su propio mínimo en fc-daygrid-day-events (el contenedor
   donde normalmente van las barras de evento nativas, que acá
   ocultamos) y en la fila de la tabla interna. Sin pisar esto,
   cualquier min-height de arriba no tenía efecto real — era la
   causa de las celdas altas. Usamos height fija (no min-height)
   para no depender de qué otro elemento interno esté reservando
   espacio. */
.fc .fc-daygrid-day-events {
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.fc .fc-daygrid-day-frame {
  height: 42px !important;
  min-height: 0 !important;
  padding-bottom: 0;
  overflow: visible !important;
}
.fc .fc-daygrid-day-top { justify-content: center; }

/* "Hoy": recuadro redondeado, no relleno de fondo (evita "manchar"
   toda la celda como hace el default de FullCalendar) */
.fc .fc-day-today { background: transparent !important; }
.fc .fc-day-today .fc-daygrid-day-number {
  font-weight: 700; color: #fff; background: var(--accent);
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; padding: 0;
}

/* Día seleccionado: recuadro con borde, aplicado por JS
   (_marcarDiaSeleccionado) sobre la celda completa */
.fc .fc-daygrid-day.calendario-day-seleccionado .fc-daygrid-day-frame {
  outline: 1.5px solid var(--accent2);
  outline-offset: -1.5px;
  border-radius: 9px;
}
.fc .fc-daygrid-day.calendario-day-seleccionado.fc-day-today .fc-daygrid-day-number {
  background: var(--accent2);
}

/* Sin barras largas de texto en mobile: solo indicadores de color
   apilados bajo el número — evita overflow/scroll horizontal */
.fc .fc-daygrid-event-harness { display: none; }

.calendario-day-bars {
  display: flex; flex-direction: column; gap: 1px;
  margin: 1px auto 0; padding: 0 8px; max-width: 30px;
}
.calendario-day-bar {
  height: 1.8px; border-radius: 1px; width: 100%;
}
.calendario-day-bar--viaje  { background: var(--accent); }
.calendario-day-bar--cumple { background: var(--gold); }
.calendario-day-bar--evento { background: #4682b4; }

.fc .fc-daygrid-day.calendario-day-con-eventos {
  cursor: pointer;
}
.fc .fc-daygrid-day.calendario-day-con-eventos:hover .fc-daygrid-day-frame {
  background: var(--surface-hover);
  border-radius: 12px;
}
.fc .fc-daygrid-day.calendario-day-con-eventos .fc-daygrid-day-number:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ── Panel inline del día seleccionado (reemplaza el popup) ──────
   Mismo patrón visual que Samsung: número grande a la izquierda,
   día de semana + mes al lado, lista de eventos debajo. */
.calendario-dia-panel {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.calendario-dia-panel-header {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .5rem;
}
.calendario-dia-panel-num {
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--text);
  flex-shrink: 0;
}
.calendario-dia-panel-textos {
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 0;
}
.calendario-dia-panel-dow {
  font-size: .92rem; font-weight: 700; color: var(--text);
  text-transform: capitalize; line-height: 1.2;
}
.calendario-dia-panel-mes {
  font-size: .72rem; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.2;
}

.calendario-evento-row {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
  cursor: pointer; background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: inherit; color: inherit;
}
.calendario-evento-row:last-child { border-bottom: none; }
.calendario-evento-row:hover { background: var(--surface-hover); }
.calendario-evento-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendario-evento-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .25rem; flex-shrink: 0; }
.calendario-evento-info { flex: 1; min-width: 0; }
.calendario-evento-nombre { font-size: .9rem; font-weight: 600; }
.calendario-evento-sub { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }

.calendario-evento-agregar-btn {
  display: block; width: 100%; text-align: center;
  margin-top: .7rem; padding: .7rem; border-radius: 12px;
  background: var(--accent-light); border: none;
  color: var(--accent2); font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.calendario-evento-agregar-btn:hover { background: var(--success-hover-bg); }
.calendario-evento-agregar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Estado vacío: ícono + copy + CTA, igual al "Pulse para añadir..."
   de Samsung Calendar */
.calendario-evento-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 1.8rem 0 1rem; text-align: center;
  color: var(--text-muted);
}
.calendario-evento-empty svg { color: var(--text-muted); opacity: .55; }
.calendario-evento-empty p { font-size: .85rem; margin: 0; }
.calendario-evento-empty-btn {
  margin-top: .3rem; padding: .55rem 1.1rem; border-radius: 10px;
  background: transparent; border: 1.5px solid var(--border);
  color: var(--accent2); font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.calendario-evento-empty-btn:hover { background: var(--surface-hover); }
.calendario-evento-empty-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Modal: nuevo evento propio (única superficie modal que queda:
   el detalle del día ahora es el panel inline de arriba) ────────── */
.calendario-dia-modal {
  border: none; padding: 0; background: transparent;
  max-width: min(440px, calc(100vw - 2rem)); width: 100%;
  max-height: min(560px, calc(100vh - 2rem));
  border-radius: 16px; box-shadow: var(--shadow-md);
  overflow: visible; position: fixed; inset: 0; margin: auto;
}
.calendario-dia-modal::backdrop { background: rgba(0,0,0,.45); }
.calendario-dia-card {
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 2rem));
  background: var(--card-bg, var(--surface));
  color: var(--text); border-radius: 16px; overflow: hidden; margin: 0;
}
.calendario-dia-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.calendario-dia-titulo {
  font-size: 1rem; font-weight: 700; margin: 0; text-transform: capitalize;
}
.calendario-dia-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer; color: inherit;
}
.calendario-dia-close:hover { background: rgba(0,0,0,.06); }
.calendario-dia-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.calendario-dia-body { padding: .6rem 1.1rem 1.1rem; overflow-y: auto; flex: 1 1 auto; }

.calendario-form-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.calendario-dia-footer {
  padding: .9rem 1.1rem; border-top: 1px solid var(--border); flex-shrink: 0;
  display: flex; gap: .6rem;
}
/* btn-cancel y btn-agregar-pasajero son clases globales pensadas
   para contextos distintos entre sí (padding/font-size propios):
   acá, dentro de este footer, los igualamos a 50/50 con ancho fijo
   (no dependiente del contenido) para que el layout no dependa de
   qué tan largo sea el texto de cada botón, y les definimos un
   :focus-visible propio para que nunca se vea el outline dashed por
   defecto del navegador cuando el diálogo autoenfoca el submit. */
.calendario-dia-footer .btn-cancel,
.calendario-dia-footer .btn-agregar-pasajero {
  flex: 1 1 0;
  width: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 .8rem;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
  border-width: 1.5px;
  border-style: solid;
  text-align: center;
}
.calendario-dia-footer .btn-cancel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-mid);
}
.calendario-dia-footer .btn-agregar-pasajero {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.calendario-dia-footer .btn-cancel:focus-visible,
.calendario-dia-footer .btn-agregar-pasajero:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
.calendario-dia-footer .btn-agregar-pasajero:disabled {
  background: var(--text-muted);
  border-color: var(--text-muted);
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .calendario-toolbar-titulo { font-size: 1.15rem; }
  .calendario-dia-modal { max-width: calc(100vw - 1.5rem); }
  .fc .fc-daygrid-day-frame { height: 38px !important; }
  .calendario-dia-panel-num { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .calendario-fab, .calendario-nav-btn, #calendario-fc { transition: none; }
}