/* Variables CSS para fácil personalización */
  :root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --light-bg: #f8f9fa;
    --border-radius: 12px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.1);
  }

  /* Contenedor principal con diseño moderno */
  .calendar-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 25px;
    margin: 20px auto;
    max-width: 100%;
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Calendario responsivo */
  #calendar {
    margin: 0 auto;
  }

  /* Header del calendario mejorado */
  .fc-header-toolbar {
    margin-bottom: 25px !important;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--border-radius);
    color: white;
    flex-wrap: wrap;
  }

  .fc-toolbar-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Botones del calendario con estilo moderno */
  .fc-button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px);
  }

  .fc-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .fc-button-active {
    background: rgba(255, 255, 255, 0.4) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Vista de la cuadrícula mejorada */
  .fc-scrollgrid {
    border: none !important;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .fc-scrollgrid-section-header .fc-col-header-cell {
    background: #f8f9fa;
    padding: 15px 0 !important;
    font-weight: 600;
    color: #4a5568;
    border: none !important;
  }

  .fc-daygrid-day, .fc-timegrid-slot {
    border: 1px solid #e2e8f0 !important;
  }

  .fc-daygrid-day:hover, .fc-timegrid-slot:hover {
    background: #f7fafc;
    cursor: pointer;
  }

  /* Eventos con diseño moderno */
  .fc-event {
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .fc-event:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-hover);
  }

  /* Colores mejorados por servicio */
  .service-corona { 
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%) !important;
    color: white !important;
  }
  .service-endodoncia { 
    background: linear-gradient(135deg, #4ecdc4 0%, #44a39a 100%) !important;
    color: white !important;
  }
  .service-extraccion { 
    background: linear-gradient(135deg, #95e1d3 0%, #81cfc0 100%) !important;
    color: #2d3748 !important;
  }
  .service-protesis { 
    background: linear-gradient(135deg, #f38181 0%, #e06767 100%) !important;
    color: white !important;
  }
  .service-implante { 
    background: linear-gradient(135deg, #786fa6 0%, #6a5f96 100%) !important;
    color: white !important;
  }
  .service-default { 
    background: linear-gradient(135deg, #778beb 0%, #6577d3 100%) !important;
    color: white !important;
  }

  /* Botón flotante mejorado */
  .fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
  }

  .add-appointment-fab {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6); }
    100% { box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); }
  }

  .add-appointment-fab:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
  }

  /* Modal responsivo y moderno */
  .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  }

  .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 25px;
    border: none;
  }

  .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
  }

  .modal-body {
    padding: 30px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .form-control, .form-select {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    /* padding: 12px 16px; */
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    background-color: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    outline: none;
  }

  /* Checkbox personalizado */
  .custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .custom-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
  }

  /* Botones del modal */
  .btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }

  .btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
  }

  .btn-secondary:hover {
    background: #cbd5e0;
  }

  /* Vista móvil mejorada */
  @media (max-width: 768px) {
    .calendar-container {
      padding: 15px;
      margin: 10px;
    }

    .fc-header-toolbar {
      padding: 10px;
      text-align: center;
    }

    .fc-toolbar-title {
      font-size: 1.3rem !important;
      margin: 10px 0 !important;
    }

    .fc-toolbar-chunk {
      display: flex;
      justify-content: center;
      margin: 5px 0;
    }

    .fc-button-group {
      display: flex;
      flex-wrap: nowrap;
    }

    .fc-button {
      padding: 6px 12px !important;
      font-size: 12px !important;
    }

    /* Ajustes para eventos en móvil */
    .fc-event {
      font-size: 11px !important;
      padding: 2px 4px !important;
    }

    /* Vista de día en móvil */
    .fc-view-harness {
      height: auto !important;
    }

    /* Botón flotante más pequeño en móvil */
    .fab-container {
      bottom: 20px;
      right: 20px;
    }

    .add-appointment-fab {
      width: 55px;
      height: 55px;
      font-size: 24px;
    }

    /* Modal responsivo */
    .modal-dialog {
      margin: 10px;
    }

    .modal-body {
      padding: 20px;
    }

    /* Formularios en móvil */
    .form-control, .form-select {
      font-size: 16px; /* Evita zoom en iOS */
    }
  }

  @media (max-width: 480px) {
    .fc-toolbar-title {
      font-size: 1.1rem !important;
    }

    .fc-button {
      padding: 4px 8px !important;
      font-size: 11px !important;
    }

    /* Ocultar texto de botones en móviles muy pequeños */
    .fc-button .fc-icon {
      font-size: 14px;
    }
  }

  /* Animaciones suaves */
  .animate__animated {
    animation-duration: 0.5s;
  }

  /* Indicador de carga */
  .calendar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    color: var(--primary-color);
  }

  .calendar-loading:after {
    content: "Cargando calendario...";
    font-size: 18px;
    animation: pulse 1.5s infinite;
  }

  /* Mejoras de accesibilidad */
  .fc-event:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }

  /* Tooltips para eventos */
  .fc-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Estado de las citas */
  .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .status-confirmed {
    background: #d1fae5;
    color: #065f46;
  }

  .status-pending {
    background: #fef3c7;
    color: #92400e;
  }

  .status-cancelled {
    background: #fee2e2;
    color: #991b1b;
  }