/* Calendario interactivo para historial_pisos y calendario.html */

#propertyCalendar { display: block !important; position: relative; z-index: 0; }
#calendario-section { overflow: visible; }
.calendar-container { margin-top: 12px; display: block !important; min-height: 300px; }
.calendar-grid { min-height: 280px; }
.calendar-header { font-weight: 700; margin: 6px 0 10px; color: #fff; }
.calendar-legend { display: flex; gap: 12px; font-size: 0.9em; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.legend-dot.entry { background: #12b981; }
 .legend-dot.exit { background: #ef4444; }
 .legend-dot.done { background: #3b82f6; }
 .legend-dot.incident { background: #f59e0b; }
 .legend-dot.note { background: var(--note-badge-bg, #d1fae5); }

/* Stats bar arriba del calendario */
.stats-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.stat-card { background: var(--card-bg, #fff); color: var(--text-color, #333); border: 1px solid var(--border-color, #ddd); border-radius: 12px; padding: 10px; }
.stat-title { font-size: 12px; font-weight: 600; color: var(--muted-text, #64748b); }
.stat-value { font-size: 20px; font-weight: 900; color: var(--accent-color, #6d28d9); }

/* Grid del mes — 7 columnas fluidas */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; box-sizing: border-box; }
.calendar-cell { min-height: 92px; border: 1px solid var(--border-color, #ddd); border-radius: 12px; background: var(--card-bg, #0e2e3f); padding: 8px; position: relative; cursor: pointer; }
.calendar-cell.dow { background: var(--muted-bg, rgba(255,255,255,0.06)); font-weight: 700; text-align: center; cursor: default; color: var(--muted-text, #9ca3af); }
.calendar-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.calendar-cell .day-number { font-weight: 900; color: var(--text-color, #e5e7eb); }
.calendar-cell.occupied { background: rgba(59,130,246,0.08); border-color: #3b82f6; }
.calendar-cell.entry { outline: 2px solid #12b981; }
.calendar-cell.exit { outline: 2px solid #6b7280; }

.calendar-empty { padding: 12px; color: var(--text-color, #333); }

/* Tarjetas dentro de cada día */
.day-legend { margin-top: 4px; font-size: 11px; color: var(--muted-text, #9ca3af); display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.day-legend .legend-item { white-space: nowrap; }
.day-strip { margin-top: 6px; background: var(--segment-bg, var(--muted-bg, rgba(255,255,255,0.06))); border: 1px solid var(--border-color, rgba(255,255,255,0.12)); border-radius: 10px; padding: 6px; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: space-between; }
.day-strip .sq { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; }
.day-strip .sq.ent { background: #12b981; }
.day-strip .sq.done { background: #3b82f6; }
.day-strip .sq.exit { background: #ef4444; }
.day-strip .sq.inactive { opacity: 0.35; }

/* Modal del día */
.calendar-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
.calendar-modal-content { background: var(--card-bg, #0e2e3f); color: var(--text-color, #e5e7eb); border-radius: 12px; padding: 16px; max-width: 520px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); }
.calendar-modal-close { float: right; border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-color, #e5e7eb); }
.calendar-modal-item { border-top: 1px solid var(--border-color, rgba(255,255,255,0.1)); padding-top: 8px; margin-top: 8px; }
.status-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.badge { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; line-height: 1; }
.badge.entry { background: #12b981; color: #fff; }
.badge.exit { background: #ef4444; color: #fff; }
.badge.incident { background: #f59e0b; color: #fff; }
.badge.note { background: var(--note-badge-bg, #d1fae5); color: var(--note-badge-fg, #065f46); }

/* Responsive: móvil sin scroll horizontal, estilo compacto */
@media (max-width: 900px) {
  /* Reducir padding de la tarjeta para ganar ancho útil */
  #calendario-section > * { padding: 12px !important; }

  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .calendar-header { font-size: 1rem; }
  .calendar-legend { gap: 10px; font-size: 0.85em; }
  .calendar-grid { gap: 4px !important; grid-template-columns: repeat(7, 1fr); }
  .calendar-cell { padding: 6px; min-height: 80px; border-radius: 10px; }
  .calendar-cell .day-number { font-size: 12px; }
  .day-legend { display: none; }
  .day-strip { padding: 4px; gap: 4px; }
  /* Hacer los cuadrados flexibles para que no desborden */
  .day-strip .sq { width: auto; height: auto; flex: 1 1 0; aspect-ratio: 1 / 1; min-width: 0; font-size: 9px; }
  .calendar-modal-content { width: 96%; padding: 14px; }
}

@media (max-width: 480px) {
  /* Más compactación para pantallas muy pequeñas (320–360px) */
  #calendario-section > * { padding: 10px !important; }
  .calendar-grid { gap: 2px !important; }
  .calendar-cell { padding: 4px; min-height: 64px; }
  .calendar-cell .incident-dot { width: 7px; height: 7px; }
  .day-strip { gap: 2px; }
  .day-strip .sq { font-size: 8px; }
  .stat-value { font-size: 18px; }
}
/* Añadir chips de eventos tipo Android dentro de cada celda */
.calendar-cell { overflow: hidden; }
/* Contenedor de chips anclado al fondo de la celda */
.event-chips { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-start; pointer-events: none; }
.event-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: 800; color: #fff; line-height: 1; box-shadow: 0 2px 6px rgba(2,6,23,.18); }
.event-chip .label { opacity: .92; }
.event-chip .count { display: inline-block; min-width: 16px; height: 16px; border-radius: 6px; background: rgba(255,255,255,.22); text-align: center; line-height: 16px; font-size: 10px; }
.event-chip.entry { background: var(--brand-accent, #12b981); }
.event-chip.done { background: var(--brand-primary, #3b82f6); }
.event-chip.exit { background: #ef4444; }
/* En móvil, hacer chips más compactos */
@media (max-width: 900px) {
  .event-chips { left: 4px; right: 4px; bottom: 4px; gap: 3px; }
  .event-chip { padding: 2px 5px; border-radius: 7px; font-size: 9px; }
  .event-chip .count { min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; }
}
@media (max-width: 480px) {
  .event-chips { gap: 2px; }
  .event-chip { padding: 1px 4px; font-size: 8px; border-radius: 6px; }
  .event-chip .count { min-width: 12px; height: 12px; line-height: 12px; font-size: 8px; }
}
/* Cabecera del día con número y cuadrado superior */
.day-head { display: flex; align-items: center; gap: 6px; }

/* Cuadrado superior junto al número */
.top-sq {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.top-sq.done { background: #3b82f6; }
 .top-sq.ent { background: #12b981; }
 .top-sq.exit { background: #ef4444; }
 .top-sq.inc { background: #f59e0b; }
 .top-sq.note { background: var(--note-badge-bg, #d1fae5); color: var(--note-badge-fg, #065f46); }

/* Contenedor de cuadrados numerados dentro de cada día */
.event-squares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
  pointer-events: none;
}
.event-squares .sq {
  display: block;
  height: 22px;
  border-radius: 7px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.event-squares .sq.done { background: #3b82f6; }
 .event-squares .sq.ent { background: #12b981; }
 .event-squares .sq.exit { background: #ef4444; }
 .event-squares .sq.inc { background: #f59e0b; }
 .event-squares .sq.note { background: var(--note-badge-bg, #d1fae5); color: var(--note-badge-fg, #065f46); }
.event-squares .sq.inactive { opacity: 0; visibility: hidden; }

/* Compactación en pantallas pequeñas */
@media (max-width: 900px) {
  .day-head { gap: 5px; }
  .top-sq { min-width: 18px; height: 18px; font-size: 12px; line-height: 18px; border-radius: 6px; }
  .event-squares { gap: 3px; margin-top: 3px; }
  .event-squares .sq { height: 18px; font-size: 12px; line-height: 18px; border-radius: 6px; }
}
@media (max-width: 480px) {
  .day-head { gap: 4px; }
  .top-sq { min-width: 16px; height: 16px; font-size: 11px; line-height: 16px; border-radius: 5px; }
  .event-squares { gap: 2px; margin-top: 2px; }
  .event-squares .sq { height: 16px; font-size: 11px; line-height: 16px; border-radius: 5px; }
}
/* Ocultar el panel combinado de estadísticas dentro de propertyCalendar */
#propertyCalendar .stats-bar { display: none !important; }

/* Gráficos de resumen mensual */
.stats-charts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 12px; align-items: start; }
.chart-bars { background: var(--muted-bg, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bar-row .label { flex: 0 0 110px; font-size: 12px; color: var(--muted-text, #9ca3af); }
.bar-row .bar { flex: 1; height: 22px; border-radius: 8px; position: relative; background: linear-gradient(90deg, rgba(16,18,32,.20) 0%, rgba(16,18,32,.40) 60%, rgba(16,18,32,.70) 100%); overflow: hidden; }
.bar-row .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(max(6%, (var(--value) / var(--max)) * 100%)); border-radius: 8px; }
.bar-row .bar .value { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 12px; color: #fff; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.bar-fill.entry, .bar-fill.exit, .bar-fill.done, .bar-fill.inc, .bar-fill.note { background: linear-gradient(90deg, #22d3ee 0%, #a855f7 35%, #7c3aed 65%, #4f46e5 100%); box-shadow: 0 0 14px rgba(168,85,247,.35), inset 0 0 8px rgba(34,211,238,.22); }
.chart-distribution { background: var(--muted-bg, rgba(255,255,255,0.06)); border: 1px solid var(--border-color, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px; }
.chart-distribution .barstack { display: flex; height: 20px; border-radius: 999px; overflow: hidden; }
.barstack .seg.entry { background: #12b981; }
.barstack .seg.exit { background: #ef4444; }
.barstack .seg.done { background: #3b82f6; }
.barstack .seg.inc { background: #f59e0b; }
.barstack .seg.note { background: var(--note-badge-bg, #d1fae5); }
.chart-distribution .legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted-text, #9ca3af); }
.chart-distribution .legend .item { display: flex; align-items: center; gap: 6px; }
.chart-distribution .legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend .dot.entry { background: #12b981; }
.legend .dot.exit { background: #ef4444; }
.legend .dot.done { background: #3b82f6; }
.legend .dot.inc { background: #f59e0b; }
.legend .dot.note { background: var(--note-badge-bg, #d1fae5); border: 1px solid rgba(0,0,0,0.1); }
@media (max-width: 900px) {
  .stats-charts { grid-template-columns: 1fr; gap: 10px; }
  .bar-row .label { flex: 0 0 90px; font-size: 11px; }
  .bar-row .bar { height: 18px; }
  .bar-row .bar .value { font-size: 11px; }
}
.chart-distribution .legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend .dot.entry { background: #12b981; }
.legend .dot.exit { background: #ef4444; }
.legend .dot.done { background: #3b82f6; }
.legend .dot.inc { background: #f59e0b; }
.legend .dot.note { background: var(--note-badge-bg, #d1fae5); border: 1px solid rgba(0,0,0,0.1); }
@media (max-width: 900px) {
  .stats-charts { grid-template-columns: 1fr; gap: 10px; }
  .bar-row .label { flex: 0 0 90px; font-size: 11px; }
  .bar-row .bar { height: 18px; }
  .bar-row .bar .value { font-size: 11px; }
}