/* 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;  <- Removed to allow dynamic colors */

  /* border: 1px solid var(--brand-accent) !important; <- Removed to allow dynamic colors */

  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)); <- Removed to avoid orange on hover */

  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;

}


/* === NOTIFICACIONES (TOASTS) === */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: #1a2332;
  background: var(--bg-card, #1a2332);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: white;
  min-width: 300px;
  max-width: 400px;
}

.notification.error {
  border-left: 4px solid #ef4444;
  background: rgba(20, 10, 10, 0.95);
}

.notification.ok {
  border-left: 4px solid #22c55e;
  background: rgba(10, 20, 10, 0.95);
}

@keyframes slideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* === FULLCALENDAR OVERRIDES FOR MULTI-NAME DISPLAY === */
.fc-event-title {
  white-space: normal !important;
  overflow-wrap: break-word;
  font-size: 0.85em; /* Slightly smaller to fit more text */
  line-height: 1.2;
}

.fc-daygrid-event {
  white-space: normal !important;
}