/* Auto-generated: page-specific rules for admin.html */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.admin-page {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  min-height: 100vh;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-pale);
  color: var(--brand);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.span-6 {
  grid-column: span 6;
}

.span-12 {
  grid-column: span 12;
}

.accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius);
}

.accordion-btn:hover {
  background: var(--brand-pale);
}

.accordion-btn .label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.accordion-btn .label i {
  color: var(--brand);
}

.chev {
  color: var(--brand);
  transition: transform 0.3s ease;
}

.accordion-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapse.show {
  max-height: 2000px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.input-chip {
  position: relative;
  display: flex;
  align-items: center;
}

.input-chip i {
  position: absolute;
  left: 1rem;
  color: var(--brand);
  z-index: 2;
}

.input-chip input {
  padding-left: 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  width: 300px;
}

.btn-s {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.03);
}

.user-table th,
.user-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.user-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-table td {
  color: var(--text-secondary);
}

.user-table tbody tr:hover {
  background: var(--brand-pale);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.data-table td {
  color: var(--text-secondary);
}

.data-table tbody tr:hover {
  background: var(--brand-pale);
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#now {
  font-weight: 600;
}

/* ============================================================================
   ADMIN PAGE - Professional Enhanced Styles
   ============================================================================ */

.admin-page {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  min-height: 100vh;
  position: relative;
}

.admin-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(236, 116, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(236, 116, 0, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* === ADMIN HEADER === */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
  padding: 3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--blur);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 1;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.admin-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--brand-pale);
  color: var(--brand);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  border: 1px solid var(--brand-accent);
  backdrop-filter: var(--blur-sm);
  transition: var(--transition);
}

.admin-badge:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-brand);
}

.admin-badge i {
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 4px rgba(236, 116, 0, 0.3));
}

.admin-header h1 {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary), var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  backdrop-filter: var(--blur-sm);
  transition: var(--transition);
}

.pill:hover {
  background: var(--brand-pale);
  border-color: var(--brand-accent);
  transform: scale(1.05);
}

.pill i {
  color: var(--brand);
}

#now {
  font-weight: 700;
  color: var(--brand);
}

/* ===============================================
   CALENDARIO DE RESERVAS - ESTILOS MEJORADOS
   =============================================== */

/* === SECCI�N DEL CALENDARIO === */
.admin-calendar-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--blur);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-xl);
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.2s;
}

.admin-calendar-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  box-shadow: 0 0 20px rgba(236, 116, 0, 0.3);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 3rem 2rem;
  background: linear-gradient(135deg, var(--bg-card-hover), var(--brand-pale));
  border-bottom: 1px solid var(--brand-accent);
  position: relative;
  z-index: 2;
}

.calendar-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 25% 50%, rgba(236, 116, 0, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 75% 50%, rgba(236, 116, 0, 0.05) 0%, transparent 60%);
  opacity: 0.7;
  z-index: -1;
}

.calendar-title {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary), var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.calendar-title i {
  color: var(--brand);
  font-size: 1.75rem;
  filter: drop-shadow(0 4px 8px rgba(236, 116, 0, 0.4));
  animation: pulse 2s infinite;
}

.new-booking-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  color: white !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.25rem 2rem !important;
  font-weight: 800 !important;
  box-shadow: var(--shadow-brand) !important;
  transition: var(--transition) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  font-size: 1rem !important;
  letter-spacing: 0.025em !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.new-booking-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.new-booking-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-glow) !important;
}

.new-booking-btn:hover::before {
  opacity: 1;
}

.new-booking-btn:active {
  transform: translateY(-1px) scale(1.01) !important;
}

.new-booking-btn i {
  font-size: 1.1rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* === CONTENEDOR DEL CALENDARIO === */
.calendar-container {
  padding: 0;
  position: relative;
  background: var(--bg-card);
}

.professional-calendar {
  min-height: 700px !important;
  padding: 2.5rem !important;
  background: var(--bg-card) !important;
  position: relative !important;
}

/* ===================================================
   PANEL DE NUEVA RESERVA - REDISE�O COMPLETO
   =================================================== */

.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--blur);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-xl);
  margin-bottom: 2rem;
  transition: var(--transition-slow);
}

.admin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  opacity: 0;
  transition: var(--transition);
}

.admin-card:hover::before {
  opacity: 1;
}

.admin-card:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* === FORMULARIO DE RESERVA MEJORADO === */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2.5rem;
  align-items: start;
}

.form-grid label {
  display: block;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-grid label::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand);
}

/* === INPUTS PROFESIONALES === */
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  background: var(--bg-card) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  color: var(--text-primary) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: var(--transition) !important;
  backdrop-filter: var(--blur-sm) !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: var(--shadow) !important;
  position: relative !important;
  z-index: 1 !important;
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: var(--text-muted) !important;
  font-style: italic !important;
  opacity: 0.8 !important;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-pale), var(--shadow-lg) !important;
  background: rgba(236, 116, 0, 0.03) !important;
  transform: translateY(-2px) !important;
  position: relative !important;
  z-index: 10 !important;
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover {
  border-color: var(--brand-accent) !important;
  background: rgba(236, 116, 0, 0.02) !important;
  transform: translateY(-1px) !important;
}

/* === SELECTS ESPECIALES === */
.form-grid select {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC7400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.25rem center !important;
  background-size: 18px !important;
  padding-right: 3rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.form-grid select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* === TEXTAREA ESPEC�FICO === */
.form-grid textarea {
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
  font-family: inherit !important;
}

/* === INPUTS DISABLED === */
.form-grid input:disabled,
.form-grid select:disabled,
.form-grid textarea:disabled {
  opacity: 0.6 !important;
  background: rgba(100, 116, 139, 0.1) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* === BOTONES DE ACCI�N MEJORADOS === */
.form-grid .btn {
  padding: 1rem 2rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: var(--blur-sm) !important;
  border: 2px solid transparent !important;
  letter-spacing: 0.025em !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.form-grid .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.form-grid .btn:hover::before {
  opacity: 1;
}

.form-grid .btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
}

.form-grid .btn:active {
  transform: translateY(-1px) scale(1.01) !important;
}

.form-grid .btn i {
  font-size: 1.1rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* === BOT�N PRIMARIO === */
.form-grid .btn:not(.btn-secondary) {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  color: white !important;
  border-color: var(--brand-accent) !important;
  box-shadow: var(--shadow-brand) !important;
}

.form-grid .btn:not(.btn-secondary)::before {
  background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
}

.form-grid .btn:not(.btn-secondary):hover {
  box-shadow: var(--shadow-glow) !important;
}

/* === BOT�N SECUNDARIO === */
.form-grid .btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  backdrop-filter: var(--blur-sm) !important;
}

.form-grid .btn-secondary:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.25) !important;
}

/* === ACCIONES DEL FORMULARIO === */
.form-grid > div:last-child {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ===================================================
   FULLCALENDAR PROFESSIONAL CUSTOMIZATION
   =================================================== */

/* Header del calendario FullCalendar */
.fc-header-toolbar {
  background: linear-gradient(135deg, var(--brand-pale), rgba(236, 116, 0, 0.08)) !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--radius-xl) !important;
  padding: 2rem !important;
  margin-bottom: 2.5rem !important;
  backdrop-filter: var(--blur) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.fc-header-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.8;
}

.fc-toolbar-chunk {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.fc-toolbar-title {
  color: var(--text-primary) !important;
  font-weight: 900 !important;
  font-size: 1.75rem !important;
  background: linear-gradient(135deg, var(--text-primary), var(--brand)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  margin: 0 !important;
}

.fc-button-group {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: var(--blur-sm) !important;
  border: 1px solid var(--border) !important;
}

.fc-button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  padding: 1rem 1.5rem !important;
  transition: var(--transition) !important;
  backdrop-filter: var(--blur-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.025em !important;
  position: relative !important;
  overflow: hidden !important;
}

.fc-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-pale);
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.fc-button:hover {
  background: var(--brand-pale) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
}

.fc-button:hover::before {
  opacity: 1;
}

.fc-button-active,
.fc-button:focus {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  border-color: var(--brand) !important;
  color: white !important;
  box-shadow: var(--shadow-brand) !important;
  transform: translateY(-1px) !important;
}

.fc-button-active::before {
  opacity: 0;
}

.fc-today-button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  margin-left: 1rem !important;
  border-radius: var(--radius-lg) !important;
}

.fc-today-button:hover {
  background: var(--brand) !important;
  color: white !important;
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-brand) !important;
}

/* === VISTA DEL CALENDARIO === */
.fc-view-harness {
  background: var(--bg-card) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: var(--blur) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
}

.fc-view-harness::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
  opacity: 0.6;
}

/* === ENCABEZADOS DE COLUMNAS === */
.fc-col-header {
  background: linear-gradient(135deg, var(--bg-card-hover), var(--brand-pale)) !important;
  border-bottom: 2px solid var(--brand-accent) !important;
  backdrop-filter: var(--blur-sm) !important;
}

.fc-col-header-cell {
  padding: 1.5rem 1rem !important;
  border-right: 1px solid var(--border) !important;
  position: relative !important;
  transition: var(--transition) !important;
}

.fc-col-header-cell:hover {
  background: var(--brand-pale) !important;
}

.fc-col-header-cell-cushion {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.75px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === SLOTS DE TIEMPO === */
.fc-timegrid-slot {
  height: 4rem !important;
  border-color: var(--border) !important;
  transition: var(--transition) !important;
}

.fc-timegrid-slot:hover {
  background: rgba(236, 116, 0, 0.02) !important;
}

.fc-timegrid-slot-minor {
  border-color: rgba(255, 255, 255, 0.03) !important;
}

.fc-timegrid-slot-label {
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 1rem !important;
  background: linear-gradient(135deg, var(--bg-card-hover), var(--brand-pale)) !important;
  border-right: 2px solid var(--brand-accent) !important;
  text-align: center !important;
  backdrop-filter: var(--blur-sm) !important;
  position: relative !important;
}

.fc-timegrid-slot-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  opacity: 0.3;
}

/* === L�NEA DE TIEMPO ACTUAL === */
.fc-timegrid-now-indicator-line {
  border-color: var(--brand) !important;
  border-width: 3px !important;
  box-shadow: 0 0 15px rgba(236, 116, 0, 0.6) !important;
  position: relative !important;
  z-index: 10 !important;
}

.fc-timegrid-now-indicator-arrow {
  border-left-color: var(--brand) !important;
  border-width: 10px !important;
  filter: drop-shadow(0 2px 8px rgba(236, 116, 0, 0.5)) !important;
}

/* === EVENTOS DEL CALENDARIO === */
.fc-event {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--radius-lg) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 0.5rem !important;
  margin: 2px !important;
  box-shadow: var(--shadow-brand) !important;
  transition: var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  backdrop-filter: var(--blur-sm) !important;
}

.fc-event::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.fc-event:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-glow) !important;
  z-index: 100 !important;
}

.fc-event:hover::before {
  opacity: 1;
}

.fc-event-title {
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.3 !important;
}

.fc-event-time {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* === D�AS DEL CALENDARIO === */
.fc-daygrid-day,
.fc-timegrid-col {
  border-color: var(--border) !important;
  background: var(--bg-card) !important;
  transition: var(--transition) !important;
}

.fc-daygrid-day:hover,
.fc-timegrid-col:hover {
  background: rgba(236, 116, 0, 0.02) !important;
}

.fc-day-today {
  background: rgba(236, 116, 0, 0.05) !important;
  border: 1px solid var(--brand-accent) !important;
  position: relative !important;
}

.fc-day-today::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}

.fc-daygrid-day-number {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
}

.fc-day-today .fc-daygrid-day-number {
  color: var(--brand) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(236, 116, 0, 0.3) !important;
}

/* === SELECCI�N DE TIEMPO === */
.fc-highlight {
  background: var(--brand-pale) !important;
  border: 2px solid var(--brand) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 0 20px rgba(236, 116, 0, 0.3) !important;
}

/* === ESTADOS ESPECIALES === */
.fc-non-business {
  background: rgba(100, 116, 139, 0.1) !important;
}

.fc-past {
  opacity: 0.6 !important;
}

/* === ADMIN GRID === */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.span-6 {
  grid-column: span 6;
}

.span-12 {
  grid-column: span 12;
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--blur);
  overflow: hidden;
  transition: var(--transition-slow);
  position: relative;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-xl);
}

.card:hover::before {
  opacity: 1;
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 1rem 0;
  padding: 2rem 2rem 0;
}

.card h3 i {
  color: var(--brand);
  font-size: 1.25rem;
}

.card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding: 0 2rem 2rem;
  font-size: 1.05rem;
}

/* === ACCORDION === */
.accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.accordion-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-pale);
  opacity: 0;
  transition: var(--transition);
}

.accordion-btn:hover::before {
  opacity: 1;
}

.accordion-btn .label {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.accordion-btn .label i {
  color: var(--brand);
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(236, 116, 0, 0.3));
}

.chev {
  color: var(--brand);
  transition: var(--transition);
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.accordion-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse.show {
  max-height: 3000px;
}

/* === TOOLBAR === */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  backdrop-filter: var(--blur);
  transition: var(--transition);
}

.toolbar:hover {
  border-color: var(--brand-accent);
  background: var(--bg-card-hover);
}

.input-chip {
  position: relative;
  display: flex;
  align-items: center;
}

.input-chip i {
  position: absolute;
  left: 1.25rem;
  color: var(--brand);
  z-index: 2;
  font-size: 1.1rem;
}

.input-chip input {
  padding-left: 3.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  width: 350px;
  height: 50px;
  font-size: 1rem;
  transition: var(--transition);
  backdrop-filter: var(--blur-sm);
}

.input-chip input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-pale);
  background: var(--brand-pale);
}

.input-chip input::placeholder {
  color: var(--text-muted);
}

.btn-s {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  border-radius: var(--radius);
  height: 50px;
}

.role-select {
  min-width: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 0.5rem;
  font-weight: 600;
}

.inline-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* === TABLES === */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  backdrop-filter: var(--blur);
}

.user-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.user-table th,
.user-table td,
.data-table th,
.data-table td {
  padding: 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.user-table th,
.data-table th {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  position: sticky;
  top: 0;
  backdrop-filter: var(--blur);
}

.user-table td,
.data-table td {
  color: var(--text-secondary);
  font-size: 0.95rem;
  transition: var(--transition);
}

.user-table tbody tr,
.data-table tbody tr {
  transition: var(--transition);
}

.user-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--brand-pale);
  transform: scale(1.01);
}

.user-table tbody tr:hover td,
.data-table tbody tr:hover td {
  color: var(--text-primary);
}

/* === EMPTY STATE === */
.empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
  margin: 2rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.5s forwards;
}

.empty i {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: var(--brand);
  opacity: 0.6;
  animation: pulse 2s infinite;
}

.empty h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

/* === SEARCH BAR === */
.search-bar {
  margin-bottom: 2rem;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: var(--transition);
  backdrop-filter: var(--blur);
}

.search-bar input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-pale);
  background: var(--brand-pale);
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

/* === CARD CONTENT === */
.card-header {
  padding: 2rem 2rem 1rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
}

.card-title i {
  color: var(--brand);
  font-size: 1.25rem;
}

.card-subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.card-content {
  padding: 1rem 2rem 2rem;
}

.actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* ===============================================
   MEJORAS ESPEC�FICAS PARA EL PANEL DE RESERVAS
   =============================================== */

/* === CONTENEDOR DEL PANEL DE RESERVAS === */
#reservaDrawer {
  background: var(--bg-card) !important;
  border: 2px solid var(--brand-accent) !important;
  border-radius: var(--radius-2xl) !important;
  backdrop-filter: var(--blur) !important;
  box-shadow: var(--shadow-glow) !important;
  overflow: hidden !important;
}

#reservaDrawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light), var(--brand));
  box-shadow: 0 0 25px rgba(236, 116, 0, 0.5);
  animation: shimmer 3s infinite;
}

/* === ETIQUETAS DE FORMULARIO MEJORADAS === */
.form-grid > div {
  position: relative;
  animation: fadeInUp 0.3s ease forwards;
}

.form-grid > div:nth-child(1) { animation-delay: 0.05s; }
.form-grid > div:nth-child(2) { animation-delay: 0.1s; }
.form-grid > div:nth-child(3) { animation-delay: 0.15s; }
.form-grid > div:nth-child(4) { animation-delay: 0.2s; }
.form-grid > div:nth-child(5) { animation-delay: 0.25s; }
.form-grid > div:nth-child(6) { animation-delay: 0.3s; }
.form-grid > div:nth-child(7) { animation-delay: 0.35s; }
.form-grid > div:nth-child(8) { animation-delay: 0.4s; }

.form-grid label {
  position: relative !important;
  padding-left: 1rem !important;
  background: linear-gradient(135deg, var(--brand-pale), rgba(236, 116, 0, 0.05)) !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--brand-accent) !important;
  margin-bottom: 1rem !important;
  backdrop-filter: var(--blur-sm) !important;
  box-shadow: var(--shadow) !important;
  transition: var(--transition) !important;
}

.form-grid label:hover {
  background: var(--brand-semi) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.form-grid label::before {
  width: 6px !important;
  height: 6px !important;
  background: var(--brand) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px var(--brand) !important;
  margin-right: 0.75rem !important;
}

/* === GRUPOS DE INPUTS MEJORADOS === */
.form-grid > div {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.5rem !important;
  border: 1px solid var(--border) !important;
  transition: var(--transition) !important;
  backdrop-filter: var(--blur-sm) !important;
  position: relative !important;
}

.form-grid > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
  opacity: 0;
  transition: var(--transition);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.form-grid > div:hover {
  border-color: var(--brand-accent) !important;
  background: rgba(236, 116, 0, 0.02) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow) !important;
}

.form-grid > div:hover::before {
  opacity: 1;
}

.form-grid > div:focus-within {
  border-color: var(--brand) !important;
  background: var(--brand-pale) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.form-grid > div:focus-within::before {
  opacity: 1;
  background: linear-gradient(90deg, var(--brand), var(--brand-light), var(--brand));
  height: 3px;
  box-shadow: 0 0 15px rgba(236, 116, 0, 0.4);
}

/* === ESTADOS DE VALIDACI�N VISUAL === */
.form-grid input:valid,
.form-grid select:valid,
.form-grid textarea:valid {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

.form-grid input:invalid:not(:placeholder-shown),
.form-grid select:invalid:not(:placeholder-shown),
.form-grid textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* === MEJORAS ESPEC�FICAS PARA INPUTS DE FECHA Y HORA === */
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid input[type="number"] {
  font-feature-settings: 'tnum' !important;
  letter-spacing: 0.025em !important;
}

.form-grid input[type="date"]::-webkit-calendar-picker-indicator,
.form-grid input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) hue-rotate(180deg) brightness(1.2) !important;
  cursor: pointer !important;
  opacity: 0.8 !important;
  transition: var(--transition) !important;
}

.form-grid input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-grid input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* === BOTONES DE ACCI�N EN LA �LTIMA FILA === */
.form-grid > div[style*="grid-column: span 4"] {
  background: linear-gradient(135deg, var(--bg-card-hover), var(--brand-pale)) !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 2rem !important;
  margin-top: 1rem !important;
}

.form-grid > div[style*="grid-column: span 4"]::before {
  background: linear-gradient(90deg, var(--brand), var(--brand-light)) !important;
  height: 3px !important;
  opacity: 0.8 !important;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
  .admin-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .span-6,
  .span-12 {
    grid-column: span 1;
  }
  
  .admin-header {
    padding: 2rem;
  }
  
  .admin-header h1 {
    font-size: 2rem;
  }
  
  .calendar-header,
  .panel-header,
  .form-section,
  .panel-actions {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .professional-calendar {
    padding: 2rem !important;
  }
  
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
  }
  
  .calendar-header {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  
  .calendar-title {
    font-size: 1.75rem;
  }
  
  .new-booking-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  
  .toolbar > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .input-chip input {
    width: 100%;
    min-width: 250px;
  }
  
  .pill {
    height: auto;
    padding: 0.75rem 1rem;
  }
  
  .table-wrapper {
    margin: 0 -1rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  
  .user-table th,
  .user-table td,
  .data-table th,
  .data-table td {
    padding: 1rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .card h3 {
    padding: 1.5rem 1.5rem 0;
    font-size: 1.25rem;
  }
  
  .card p {
    padding: 0 1.5rem 1.5rem;
  }
  
  .accordion-btn {
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
  }
  
  .collapse {
    padding: 0 1.5rem;
  }
  
  .toolbar {
    padding: 1.5rem;
  }
  
  .professional-calendar {
    padding: 1.5rem !important;
    min-height: 600px !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }
  
  .form-grid > div {
    padding: 1.25rem;
  }
  
  /* FullCalendar responsive adjustments */
  .fc-header-toolbar {
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }
  
  .fc-toolbar-chunk {
    justify-content: center !important;
  }
  
  .fc-button {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9rem !important;
  }
  
  .fc-toolbar-title {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .admin-header {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .admin-header h1 {
    font-size: 1.75rem;
  }
  
  .admin-badge {
    font-size: 0.85rem;
    padding: 0.6rem 1.25rem;
  }
  
  .calendar-header,
  .panel-header {
    padding: 1.5rem;
  }
  
  .calendar-title,
  .panel-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  
  .form-grid > div {
    padding: 1rem;
  }
  
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    padding: 1rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
  
  .new-booking-btn {
    padding: 1rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
  
  .fc-header-toolbar {
    padding: 1rem !important;
  }
  
  .fc-button {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  .fc-toolbar-title {
    font-size: 1.25rem !important;
  }
}

/* ===============================================
   ANIMACIONES Y MICRO-INTERACCIONES
   =============================================== */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.98);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 1000px;
  }
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* === FOCUS Y HOVER STATES MEJORADOS === */
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  animation: focusPulse 0.3s ease !important;
}

@keyframes focusPulse {
  0% {
    transform: translateY(-2px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    transform: translateY(-2px) scale(1);
  }
}

/* === ESTADO DE CARGA === */
.form-grid.loading {
  opacity: 0.7;
  pointer-events: none;
}

.form-grid.loading * {
  animation: pulse 1.5s ease-in-out infinite;
}

/* === SUCCESS STATES === */
.form-grid.success {
  border-color: rgba(16, 185, 129, 0.6) !important;
  background: rgba(16, 185, 129, 0.03) !important;
}

.form-grid.success::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
  opacity: 1 !important;
}

/* === ERROR STATES === */
.form-grid.error {
  border-color: rgba(239, 68, 68, 0.6) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

.form-grid.error::before {
  background: linear-gradient(90deg, transparent, #ef4444, transparent) !important;
  opacity: 1 !important;
}

/* === TOOLTIPS PARA CAMPOS === */
.form-grid > div[title] {
  position: relative;
}

.form-grid > div[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  opacity: 0;
  animation: tooltipShow 0.3s ease forwards;
}

@keyframes tooltipShow {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
  }
}

/* === MEJORAS PARA EL SELECTOR DE USUARIOS === */
.form-grid select[id="res-user"] {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC7400' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3e%3c/path%3e%3ccircle cx='12' cy='7' r='4'%3e%3c/circle%3e%3c/svg%3e"), url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC7400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-position: left 1.25rem center, right 1.25rem center !important;
  background-size: 20px, 18px !important;
  padding-left: 3.25rem !important;
  padding-right: 3.25rem !important;
}

/* === MEJORAS PARA BOTONES EN EL HEADER DEL CALENDARIO === */
button[id="btnNuevaReserva"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
  color: white !important;
  border: 2px solid var(--brand-accent) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1rem 2rem !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: 0.025em !important;
  box-shadow: var(--shadow-brand) !important;
  transition: var(--transition) !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: var(--blur-sm) !important;
}

button[id="btnNuevaReserva"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

button[id="btnNuevaReserva"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-glow) !important;
}

button[id="btnNuevaReserva"]:hover::before {
  opacity: 1;
}

button[id="btnNuevaReserva"] i {
  font-size: 1.1rem !important;
  margin-right: 0.75rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* === MEJORAS ESPEC�FICAS PARA LA CABECERA DE SECCI�N === */
.admin-card > div:first-child {
  background: linear-gradient(135deg, var(--bg-card-hover), var(--brand-pale)) !important;
  border-bottom: 2px solid var(--brand-accent) !important;
  padding: 2rem !important;
  position: relative !important;
  z-index: 2 !important;
}

.admin-card > div:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(236, 116, 0, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(236, 116, 0, 0.05) 0%, transparent 60%);
  opacity: 0.7;
  z-index: -1;
}

.admin-card h2 {
  color: var(--text-primary) !important;
  font-weight: 900 !important;
  font-size: 1.75rem !important;
  background: linear-gradient(135deg, var(--text-primary), var(--brand)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* === DARK MODE OPTIMIZATION === */
@media (prefers-color-scheme: dark) {
  .fc-view-harness {
    background: rgba(255, 255, 255, 0.02) !important;
  }
  
  .fc-event {
    box-shadow: var(--shadow-brand), 0 0 10px rgba(236, 116, 0, 0.2) !important;
  }
  
  .fc-button {
    background: rgba(255, 255, 255, 0.03) !important;
  }
  
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    background: rgba(255, 255, 255, 0.03) !important;
  }
}

/* === PRINT STYLES === */
@media print {
  .admin-calendar-section {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  .calendar-header {
    background: #f5f5f5 !important;
    color: #333 !important;
  }
  
  .new-booking-btn {
    display: none !important;
  }
  
  .form-grid {
    background: white !important;
    border: 1px solid #ccc !important;
  }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--brand) !important;
  outline-offset: 2px !important;
}

/* === LOADING SPINNER PARA CALENDARIO === */
.calendar-loading {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 22, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: var(--blur-lg);
  border-radius: var(--radius-xl);
}

.calendar-loading-content {
  text-align: center;
  color: var(--text-primary);
}

.calendar-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === EFECTOS ADICIONALES === */
.form-grid input[type="email"]:valid {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20,6 9,17 4,12'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.25rem center !important;
  background-size: 18px !important;
}

.form-grid input[type="tel"]:valid {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.25rem center !important;
  background-size: 18px !important;
}

/* === GLASSMORPHISM EFFECTS === */
#reservaDrawer {
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 2px solid rgba(236, 116, 0, 0.2) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.form-grid > div {
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* === MEJORAS PARA INPUTS DE TIEMPO Y FECHA === */
.form-grid input[type="date"]:focus,
.form-grid input[type="time"]:focus {
  background: linear-gradient(135deg, var(--brand-pale), rgba(236, 116, 0, 0.08)) !important;
}

/* === ESTILOS ESPEC�FICOS PARA EL SELECTOR DE ESTADO === */
.form-grid select[id="res-status"] option {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  padding: 0.75rem !important;
}

/* === EFECTOS DE MICRO-INTERACCI�N === */
.form-grid input:not(:placeholder-shown) {
  background: rgba(236, 116, 0, 0.02) !important;
}

.form-grid textarea:not(:placeholder-shown) {
  background: rgba(236, 116, 0, 0.02) !important;
}

/* === MEJORAS EN LA ACCESIBILIDAD === */
@media (prefers-reduced-motion: reduce) {
  #reservaDrawer,
  .form-grid > div,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .btn {
    animation: none !important;
    transition: none !important;
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    border-width: 3px !important;
  }
  
  .form-grid label {
    border-width: 2px !important;
  }
  
  #reservaDrawer {
    border-width: 3px !important;
  }
}


/* ======================================================================
   OVERRIDES ESPEC�FICOS: Drawer "Nueva/Editar reserva"
   (a�adir al final del archivo para mayor prioridad)
   ====================================================================== */

/* 1) Normalizaci�n dentro del drawer */
.drawer, .drawer * { box-sizing: border-box; }

/* 2) Layout y scroll del cuerpo del drawer */
.drawer { width: min(560px, 100%); }
.drawer-body { padding-bottom: .25rem; }
.drawer-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: .9rem 1.25rem 1.25rem;
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  z-index: 2;
}

/* 3) Inputs del drawer: altura, padding y foco consistente */
.drawer .input,
.drawer .select {
  height: 44px;                   /* alto consistente */
  padding: .72rem .9rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 12px;
  color: var(--text-primary);
  line-height: 1.2;
}
.drawer .textarea {
  min-height: 84px;
  padding: .78rem .9rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 12px;
  color: var(--text-primary);
  resize: vertical;
}

.drawer .input:focus,
.drawer .select:focus,
.drawer .textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  background: color-mix(in oklab, var(--bg-card) 94%, black 6%);
}

/* 4) Inputs con icono a la izquierda (los que usan .input-icon) */
.drawer .input-icon { position: relative; }
.drawer .input-icon i {
  position: absolute; left: .7rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted); font-size: .95rem; pointer-events: none;
  z-index: 1;
}
.drawer .input-icon .input {
  padding-left: 2.1rem;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* 5) Nativos date/time/number: corregir controles y alineado */
.drawer input[type="date"],
.drawer input[type="time"],
.drawer input[type="number"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* WebKit pickers y spinners */
.drawer input[type="date"]::-webkit-calendar-picker-indicator,
.drawer input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(.9) contrast(1.1) saturate(1.1);
  opacity: .9; cursor: pointer;
}
.drawer input[type="number"]::-webkit-outer-spin-button,
.drawer input[type="number"]::-webkit-inner-spin-button {
  margin: 0; height: 44px;
}

/* Firefox: respetar dark */
@-moz-document url-prefix() {
  .drawer input[type="date"], .drawer input[type="time"] { color-scheme: dark; }
}

/* 6) Etiquetas del drawer m�s compactas y claras */
.drawer .label {
  font-size: .86rem; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
}

/* 7) Chips (atajos) con estados claros y clicables */
.drawer .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.drawer .chip {
  min-height: 32px; padding: .3rem .7rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-primary);
  font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.drawer .chip:hover { border-color: var(--brand-accent); transform: translateY(-1px); }
.drawer .chip.active,
.drawer .chip.primary {
  background: var(--brand-pale);
  border-color: var(--brand-accent);
  color: var(--brand);
}

/* 8) Selects del drawer: caret visible en oscuro */
.drawer .select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EC7400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}

/* 9) Botones del footer: altura y espaciado */
.drawer .btn,
.drawer .btn.btn-secondary {
  border-radius: 12px;
  padding: .8rem 1rem;
  font-weight: 800;
  min-height: 44px;
}

/* 10) Micro-fix: que nada del .form-grid global \u201ctoque\u201d el drawer */
.drawer .input:hover,
.drawer .select:hover,
.drawer .textarea:hover {
  transform: none;
  background: var(--bg-card);
  border-color: var(--brand-accent);
}

/* 11) Placeholders m�s legibles en oscuro */
.drawer ::placeholder { color: var(--text-muted); opacity: .85; }

/* 12) Responsive: una columna en m�viles */
@media (max-width: 720px){
  .drawer { width: 100%; }
}


/* === Moved from inline <style> in admin.html === */

    /* ====== Ajustes generales existentes ====== */
    #expensesTable thead {
      background-color: #ff7a00;
      color: #fff;
    }
    #expensesTable thead th { padding: .75rem; text-align: left; font-weight: 600; }
    #calendar { min-height: 620px; }
    .role-select { min-width: 9rem; }
    .inline-actions { display:flex; gap:.5rem; align-items:center; }

    /* ====== Tarjetas de gastos ====== */
    .expenses-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .expense-stat {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      text-align: center;
      backdrop-filter: var(--blur);
      transition: var(--transition);
    }
    .expense-stat:hover { border-color: var(--brand-accent); transform: translateY(-2px); box-shadow: var(--shadow); }
    .expense-stat-number {
      font-size: 2rem; font-weight: 800; color: var(--brand); margin: 0 0 .5rem 0;
      background: linear-gradient(135deg, var(--brand), var(--brand-light));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .expense-stat-label { font-size:.9rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
    .user-expense-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom:.5rem; transition: var(--transition); }
    .user-expense-row:hover { border-color:var(--brand-accent); background:var(--brand-pale); }
    .expense-amount { font-weight:700; color: var(--brand); }
    .expense-zero { opacity:.6; color: var(--text-muted); }

    /* ====== Modal de gastos ====== */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      z-index: 9999; display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden; transition: all .3s cubic-bezier(.4,0,.2,1);
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-2xl);
      max-width: 800px; width: 90%; max-height: 90vh; overflow: hidden; position: relative;
      box-shadow: var(--shadow-xl);
      transform: scale(.95) translateY(20px);
      transition: all .3s cubic-bezier(.4,0,.2,1);
    }
    .modal-overlay.active .modal { transform: scale(1) translateY(0); }
    .modal::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--brand), var(--brand-light)); }
    .modal-header { display:flex; align-items:center; justify-content:space-between; padding:2rem 2.5rem 1rem; border-bottom:1px solid var(--border); }
    .modal-header h3 { font-size:1.5rem; font-weight:800; color:var(--text-primary); margin:0; display:flex; align-items:center; gap:.75rem; }
    .modal-header h3::before { content:''; width:6px; height:30px; background: linear-gradient(180deg, var(--brand), var(--brand-light)); border-radius:3px; }
    .close-btn { background:transparent; border:0; color:var(--text-muted); font-size:1.5rem; cursor:pointer; padding:.75rem; border-radius:50%; transition: var(--transition); width:50px; height:50px; display:flex; align-items:center; justify-content:center; }
    .close-btn:hover { background: rgba(239,68,68,.1); color:#ef4444; transform: scale(1.1); }
    .modal-body { padding:2rem 2.5rem; max-height:60vh; overflow-y:auto; }
    .modal-actions { padding:1rem 2.5rem 2rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:1rem; }
    .modal-body::-webkit-scrollbar{ width:8px; } .modal-body::-webkit-scrollbar-track{ background:var(--bg-card); border-radius:4px;}
    .modal-body::-webkit-scrollbar-thumb{ background:var(--brand); border-radius:4px; } .modal-body::-webkit-scrollbar-thumb:hover{ background:var(--brand-light); }
    @media (max-width: 768px){ .modal{ width:95%; max-height:95vh; } .modal-header,.modal-body,.modal-actions{ padding-left:1.5rem; padding-right:1.5rem; } .modal-body{ max-height:70vh; } }
    @media (max-width: 480px){ .modal{ width:100%; height:100vh; border-radius:0; max-height:none; } .modal-header h3{ font-size:1.25rem; } .modal-body{ max-height: calc(100vh - 200px); } }

    /* ====== Drawer de Reserva (mismas IDs) ====== */
    .drawer-overlay {
      position: fixed; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
      opacity: 0; visibility: hidden; transition: all .25s ease; z-index: 9800;
    }
    .drawer-overlay.open { opacity: 1; visibility: visible; }
    .drawer {
      position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 100%);
      background: var(--bg-secondary); border-left: 1px solid var(--border);
      transform: translateX(100%); transition: transform .28s ease; z-index: 9850;
      display:flex; flex-direction:column;
      box-shadow: -10px 0 30px rgba(0,0,0,.25);
    }
    .drawer.open { transform: translateX(0); }
    .drawer-header {
      display:flex; align-items:center; justify-content:space-between; gap:.75rem;
      padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    }
    .drawer-title { display:flex; align-items:center; gap:.6rem; margin:0; font-size:1.15rem; font-weight:800; }
    .drawer-body { padding: 1rem 1.25rem 0 1.25rem; overflow-y:auto; }
    .drawer-footer {
      position: sticky; bottom: 0; background: var(--bg-secondary);
      padding: .9rem 1.25rem 1.25rem; border-top:1px solid var(--border);
      display:flex; gap:.6rem; justify-content:flex-end;
    }

    /* ====== Form layout dentro del drawer ====== */
    .grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.9rem; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.9rem; }
    .grid-4 { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.9rem; }
    .form-block { display:flex; flex-direction:column; gap:.4rem; }

    .label {
      font-size:.86rem; font-weight:700; color:var(--text-muted);
      display:flex; align-items:center; gap:.5rem; line-height:1.1;
    }

    /* Inputs/Selects/Textareas accesibles en oscuro */
    .input, .select, .textarea {
      width:100%;
      border:1px solid var(--border);
      background: color-mix(in oklab, var(--bg-card) 92%, black 8%);
      border-radius: 12px;
      padding: .78rem .9rem;
      color: var(--text-primary);
      transition: border-color .2s ease, box-shadow .2s ease;
      line-height: 1.2;
    }
    .input:focus, .select:focus, .textarea:focus {
      outline: none;
      border-color: var(--brand-accent);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
    }
    .input:disabled, .select:disabled, .textarea:disabled { opacity:.65; cursor:not-allowed; }

    /* Inputs con icono a la izquierda */
    .input-icon { position:relative; }
    .input-icon i {
      position:absolute; left:.7rem; top:50%; transform: translateY(-50%);
      color: var(--text-muted); font-size:.95rem; pointer-events:none;
      z-index: 1;
    }
    .input-icon .input {
      padding-left: 2.1rem;
      position: relative;
      z-index: 2;
      pointer-events: auto;
    }

    /* Date/Time en tema oscuro: iconos visibles y texto legible */
    input[type="date"].input,
    input[type="time"].input {
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
    }
    /* WebKit pickers */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(0.85) saturate(1.2) contrast(1.1);
      opacity: .9;
      cursor: pointer;
    }
    /* Firefox */
    @-moz-document url-prefix() {
      input[type="date"], input[type="time"] {
        color-scheme: dark;
      }
    }

    /* Chips de atajo (horas/duración) */
    .chips { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.35rem; }
    .chip {
      display:inline-flex; align-items:center; justify-content:center;
      min-height: 34px; padding: .35rem .75rem; border-radius: 999px;
      border:1px solid var(--border); background: var(--bg-card);
      font-weight:700; font-size:.9rem; cursor:pointer;
      transition: transform .12s ease, border-color .15s ease, background .15s ease;
      user-select: none;
    }
    .chip:hover { border-color: var(--brand-accent); transform: translateY(-1px); }
    .chip.active, .chip.primary { background: var(--brand-pale); color: var(--brand); border-color: var(--brand-accent); }

    /* Botones del drawer más visibles */
    .btn-icon { display:inline-flex; align-items:center; gap:.55rem; }
    .btn, .btn.btn-secondary {
      border-radius: 12px;
      padding: .8rem 1rem;
      font-weight: 800;
    }
    .btn-danger { background: #ef4444; color: #fff; border: none; }
    .btn-danger:hover { filter: brightness(1.05); }

    /* Animaciones útiles */
    @keyframes slideInLeft { from{opacity:0; transform: translateX(-20px);} to{opacity:1; transform: translateX(0);} }
    @keyframes spin { from{ transform: rotate(0);} to{ transform: rotate(360deg);} }

    /* Responsive */
    @media (max-width: 820px){
      .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 720px){
      .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    }
  


/* === Reservation Drawer Polishing (appended by refactor) === */
.drawer { max-width: min(620px, 100%); }
.drawer .drawer-header { align-items: center; }
.drawer .drawer-title i { opacity:.9; }

/* Chips as balanced grid */
.drawer .chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .5rem;
  margin-top: .25rem;
}
.drawer .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .75rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-secondary) 92%, #000 0%);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-height: 40px;
}
.drawer .chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.drawer .chip.active,
.drawer .chip.primary {
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  color: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border));
  box-shadow: 0 6px 18px color-mix(in oklab, var(--brand) 25%, transparent);
}

/* Inputs with left icon */
.drawer .input-icon i { color: var(--text-muted); }
.drawer .input, .drawer .select {
  height: 44px;
}

/* Footer buttons balanced */
.drawer .drawer-footer { gap: .8rem; }
.drawer .drawer-footer .btn { min-width: 150px; height: 48px; font-weight: 800; }
.drawer .drawer-footer .btn.btn-secondary { border:1px solid var(--border); background: transparent; }
.drawer .drawer-footer .btn.btn-danger { background: #772c2c; }
.drawer .drawer-footer .btn i { font-size: 1.05rem; }

/* Better column rhythm */
.drawer .grid-4, .drawer .grid-3, .drawer .grid-2 { gap: 1rem; }
.drawer .form-block .label { font-weight: 700; letter-spacing: .2px; }

/* Hints subtler but readable */
.drawer .hint { opacity: .85; font-size: .82rem; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .drawer .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .drawer .grid-4, .drawer .grid-3, .drawer .grid-2 { grid-template-columns: 1fr; }
  .drawer .drawer-footer { justify-content: stretch; }
  .drawer .drawer-footer .btn { flex:1; }
}
/* === End Reservation Drawer Polishing === */

/* ====== Modal para Nueva Reserva (centrado) ====== */
.modal-reserva {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.modal-reserva .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-reserva .modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--text-primary);
}

.modal-reserva .modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.modal-reserva .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.modal-reserva .btn {
  min-width: 140px;
  height: 48px;
  font-weight: 800;
}

.modal-reserva .btn-danger {
  background: #dc2626;
  color: white;
  border: 1px solid #b91c1c;
}

.modal-reserva .btn-danger:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* Selectores grises con texto blanco legible */
.select-gray {
  height: 44px;
  padding: .72rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #6b7280;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,9 12,15 18,9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}

.select-gray:hover {
  background-color: #4b5563;
  border-color: var(--brand-accent);
}

.select-gray:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  background-color: #4b5563;
}

.select-gray option {
  background: #374151;
  color: #ffffff;
  padding: 0.5rem;
}

/* Responsive para modal de reserva */
@media (max-width: 900px) {
  .modal-reserva {
    width: 95%;
    max-width: none;
  }
  .modal-reserva .grid-4,
  .modal-reserva .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .modal-reserva {
    width: 100%;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }
  .modal-reserva .grid-2,
  .modal-reserva .grid-3,
  .modal-reserva .grid-4 {
    grid-template-columns: 1fr;
  }
  .modal-reserva .modal-actions {
    flex-direction: column;
  }
  .modal-reserva .btn {
    min-width: 100%;
  }
}


/* ==== Players by Category (admin) ==== */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.players-col {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.players-col h3 {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem; margin: 0 0 .5rem; color: var(--text);
}

.players-col h3 small {
  font-weight: 600; color: var(--text-secondary);
}

.player-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .5rem; border-radius: 8px; border: 1px dashed transparent;
}

.player-item + .player-item { margin-top: .35rem; }

.player-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.player-item .info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}

.player-item .info .name {
  font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-item .info .email {
  font-size: .85rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player-item .badge {
  font-size: .75rem; padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-secondary);
}


/* ====== Admin: Selects legibles en tema oscuro (patch) ====== */

.admin-card select,
.modal select,
.form-grid select,
.filters select,
select {
  background-color: #1f2937 !important;
  color: #f8fafc !important;
  border: 1px solid #374151 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.admin-card select option,
.modal select option,
.form-grid select option,
.filters select option,
select option {
  background: #111827 !important;
  color: #f8fafc !important;
}
.admin-card select:focus,
.modal select:focus,
.form-grid select:focus,
.filters select:focus,
select:focus {
  outline: none !important;
  border-color: var(--brand, #5b8cff) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #5b8cff) 22%, transparent) !important;
}
.admin-card select:disabled,
.modal select:disabled,
.form-grid select:disabled,
.filters select:disabled,
select:disabled {
  opacity: .65;
  cursor: not-allowed !important;
}
.admin-card select,
.modal select { color-scheme: dark; }

/* Airbag badge flotante de hora (por si existe con clases comunes) */
body > .selected-time-badge,
body > .time-hud,
body > .floating-time,
body > .pill.time,
body > .chip.time { display: none !important; }

.input-icon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Ícono de reloj visible */
.input-icon i.fa-clock {
  color: var(--brand, #5b8cff);
  font-size: 1.1rem;
}

/* Input de hora oculto completamente */
.input-icon input[type="time"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}
.input-icon:has(input[type="time"]) {
  display: none !important;
}