/* ==========================================
   TABLET STYLES (768px - 1199px)
   Incluye iPads (Mini, Air, Pro)
   ========================================== */

@media (max-width: 1199px) and (min-width: 768px) {
  /* Ocultar sidebar en tablets - vista completa */
  .sidebar {
    display: none !important;
  }

  .main-content {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .vista-container {
    width: 100% !important;
  }

  .grid-wrapper {
    padding: 0;
    max-width: 100%;
  }

  /* Header ajustado para tablet */
  .header-content {
    padding: 14px 20px;
    gap: 16px;
  }

  .title {
    font-size: 16px;
  }

  /* Calendario optimizado para tablet */
  .calendar-grid {
    grid-template-columns: 70px repeat(7, 1fr);
  }

  .cell {
    padding: 10px;
    min-height: 68px;
  }

  .busy strong {
    font-size: 13px;
  }

  .busy span {
    font-size: 11px;
  }

  /* Slots view en tablet */
  .slots-grid-columnas {
    gap: 16px;
  }

  .dia-slots-columna {
    min-width: 160px;
  }

  /* Modal en tablet */
  .modal-content {
    max-width: 600px;
  }

  /* Botones */
  .btn-nav {
    padding: 7px 14px;
    font-size: 12px;
  }

  .btn-icon {
    width: 38px;
    height: 38px;
  }

  /* Tabs */
  .tab-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ==========================================
   iPAD SPECIFIC - Forzar vista tablet
   ========================================== */

body.device-ipad .sidebar,
body.device-tablet .sidebar {
  display: none !important;
}

body.device-ipad .main-content,
body.device-tablet .main-content {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* ==========================================
   LANDSCAPE TABLET
   ========================================== */

@media (max-width: 1366px) and (min-width: 768px) and (orientation: landscape) {
  /* Optimizaciones para tablet en horizontal */
  .calendar-grid {
    grid-template-columns: 60px repeat(7, 1fr);
  }

  .cell {
    min-height: 60px;
  }

  .slots-grid-columnas {
    gap: 14px;
  }

  .dia-slots-columna {
    min-width: 150px;
  }
}

/* ==========================================
   PORTRAIT TABLET
   ========================================== */

@media (max-width: 1366px) and (min-width: 768px) and (orientation: portrait) {
  /* Optimizaciones para tablet en vertical */
  .slots-grid-columnas {
    gap: 12px;
  }

  .dia-slots-columna {
    min-width: 140px;
  }

  .calendar-grid {
    grid-template-columns: 75px repeat(7, 1fr);
  }
}

/* ==========================================
   DESKTOP ONLY (min-width: 1200px)
   Mostrar sidebar solo si NO es iPad o tablet
   ========================================== */

@media (min-width: 1200px) {
  /* Sidebar visible solo en desktop real (no iPad) */
  body:not(.device-ipad):not(.device-tablet) .sidebar {
    display: block;
    width: 280px;
  }

  .calendar-grid {
    grid-template-columns: 75px repeat(7, 1fr);
  }

  .cell {
    padding: 11px;
  }

  .slots-grid-columnas {
    gap: 14px;
  }

  .dia-slots-columna {
    min-width: 150px;
  }
}

/* ==========================================
   EXTRA LARGE SCREENS (min-width: 1400px)
   ========================================== */

@media (min-width: 1400px) {
  /* Optimizaciones para pantallas grandes */
  .sidebar {
    width: 300px;
  }

  .calendar-grid {
    grid-template-columns: 90px repeat(7, 1fr);
  }

  .cell {
    padding: 14px;
    min-height: 80px;
  }

  .busy strong {
    font-size: 15px;
  }

  .busy span {
    font-size: 13px;
  }

  .slots-grid-columnas {
    gap: 16px;
  }

  .dia-slots-columna {
    min-width: 160px;
  }

  .title {
    font-size: 20px;
  }
}