/* ============================================================
   ADMIN COMPONENT — LBE Barbería
   Estilos dedicados para el Panel de Administración Premium
   ============================================================ */

/* ─── RESET & BASE ────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
}

body {
  background-color: var(--c-page);
  color: var(--c-text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

/* Helper de revelado */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 1. PANTALLA DE LOGIN ────────────────────────────────── */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
  background: radial-gradient(circle at center, #16161c 0%, #0a0a0c 100%);
}

.login-card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  width: 100%;
  max-width: 420px;
  padding: var(--space-8);
  position: relative;
  transition: border-color 0.3s ease;
}
.login-card:hover {
  border-color: rgba(197, 168, 128, 0.3);
}

.login-card__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-card__logo {
  max-width: 140px;
  height: auto;
  margin-bottom: var(--space-4);
  mix-blend-mode: screen;
}

.login-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--c-brand);
  margin: 0 0 var(--space-1) 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-card__subtitle {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin: 0;
}

.login-card__form .form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-text-muted);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.form-input {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-glass-border);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--c-text);
  font-family: var(--font-body);
  transition: all 0.3s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--c-brand);
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(197, 168, 128, 0.15);
}

.login-card__error-msg {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--c-error);
  color: #fca5a5;
  font-size: var(--text-xs);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: 2px;
}

.btn-submit {
  width: 100%;
  background-color: var(--c-brand);
  color: var(--c-page);
  border: 1px solid var(--c-brand);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: var(--space-2);
}
.btn-submit:hover {
  background-color: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
  box-shadow: 0 5px 15px rgba(197, 168, 128, 0.2);
}

/* ─── 2. ESTRUCTURA PRINCIPAL (DASHBOARD) ─────────────────── */
.admin-dashboard {
  display: flex;
  min-height: 100vh;
}

/* Sidebar Estilos */
.admin-sidebar {
  width: 260px;
  background-color: var(--c-bg-elevated);
  border-right: 1px solid var(--c-glass-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  height: 100vh;
  box-sizing: border-box;
}

.admin-sidebar__brand {
  padding: var(--space-6);
  border-bottom: 1px solid var(--c-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-sidebar__logo {
  max-width: 120px;
  height: auto;
  mix-blend-mode: screen;
}

.admin-sidebar__badge {
  background: rgba(197, 168, 128, 0.1);
  color: var(--c-brand);
  border: 1px solid rgba(197, 168, 128, 0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.admin-sidebar__nav {
  flex-grow: 1;
  padding: var(--space-6) var(--space-4);
}

.admin-sidebar__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-sidebar__links li {
  margin-bottom: var(--space-2);
}

.sidebar-link {
  width: 100%;
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all 0.3s ease;
}
.sidebar-link svg {
  opacity: 0.7;
  transition: transform 0.3s ease;
}
.sidebar-link:hover,
.sidebar-link.active {
  color: var(--c-brand);
  background-color: rgba(255, 255, 255, 0.03);
}
.sidebar-link.active {
  background-color: rgba(197, 168, 128, 0.05);
  border-left: 2px solid var(--c-brand);
  padding-left: calc(var(--space-4) - 2px);
}
.sidebar-link:hover svg {
  transform: translateX(2px);
}

.admin-sidebar__footer {
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--c-glass-border);
}

.btn-logout {
  width: 100%;
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-3);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all 0.3s ease;
}
.btn-logout:hover {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--c-error);
}

/* Workspace Area */
.admin-workspace {
  margin-left: 260px;
  flex-grow: 1;
  min-width: 0; /* Permite contraerse dentro de flexbox */
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--c-page);
  padding: var(--space-8);
}

/* Panes de Workspace */
.admin-pane {
  display: none;
}
.admin-pane.active {
  display: block;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-glass-border);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
}

.pane-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--c-text);
  margin: 0 0 var(--space-1) 0;
}

.pane-subtitle {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin: 0;
}

.btn-action {
  background-color: transparent;
  color: var(--c-brand);
  border: 1px solid var(--c-brand);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-3) var(--space-5);
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all 0.3s ease;
}
.btn-action:hover {
  background-color: var(--c-brand);
  color: var(--c-page);
  box-shadow: 0 5px 15px rgba(197, 168, 128, 0.15);
}

/* ─── 3. INTERFAZ DE CITAS ────────────────────────────────── */
.agenda-filters {
  display: flex;
  gap: var(--space-6);
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  padding: var(--space-5) var(--space-6);
  border-radius: 4px;
  margin-bottom: var(--space-6);
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
  font-weight: 600;
}

.filter-input {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-glass-border);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: 2px;
  height: 38px;
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease;
}
.filter-input:focus {
  border-color: var(--c-brand);
}

/* Barber Tabs */
.barber-tabs {
  display: flex;
  gap: var(--space-2);
}

.barber-tab {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--c-glass-border);
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0 var(--space-4);
  height: 38px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.barber-tab:hover {
  border-color: rgba(197, 168, 128, 0.3);
  color: var(--c-text);
}
.barber-tab.active {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-page);
}

/* Grilla Horaria */
.agenda-view {
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  border-radius: 4px;
  overflow: hidden;
}

.agenda-view__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--c-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.01);
}

.agenda-view__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--c-brand);
  margin: 0;
}

.agenda-view__status {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--c-success);
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}
.agenda-view__status.closed {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--c-error);
  border-color: rgba(239, 68, 68, 0.3);
}

.agenda-grid {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* Slot de hora */
.agenda-slot {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c-glass-border);
  border-radius: 3px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease;
}

.agenda-slot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.agenda-slot__time {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-text);
  font-family: var(--font-body);
}

.agenda-slot__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 2px;
}

.agenda-slot__info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agenda-slot__client {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-slot__desc {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.agenda-slot__action {
  width: 100%;
  background: none;
  border: 1px dashed rgba(197, 168, 128, 0.4);
  color: var(--c-brand);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.agenda-slot__action:hover {
  background-color: rgba(197, 168, 128, 0.08);
  border-style: solid;
}

/* Estados de Slot */
/* 1. Ocupado por Cliente */
.agenda-slot--occupied {
  border-color: rgba(197, 168, 128, 0.15);
  background-color: rgba(255, 255, 255, 0.01);
}
.agenda-slot--occupied .agenda-slot__badge {
  background-color: rgba(197, 168, 128, 0.1);
  color: var(--c-brand);
}
.agenda-slot--occupied .btn-cancel-slot {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.3s ease;
}
.agenda-slot--occupied:hover .btn-cancel-slot {
  opacity: 1;
}
.agenda-slot--occupied .btn-cancel-slot:hover {
  color: var(--c-error);
  background-color: rgba(239, 68, 68, 0.1);
}

/* 2. Bloqueado / Almuerzo */
.agenda-slot--blocked {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.02);
}
.agenda-slot--blocked .agenda-slot__badge {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--c-text-muted);
}
.agenda-slot--blocked .agenda-slot__client {
  color: var(--c-text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ─── 4. INTERFAZ DE CONFIGURACIÓN ────────────────────────── */
.config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1200px) {
  .config-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.config-card {
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  border-radius: 4px;
  padding: var(--space-6);
  box-sizing: border-box;
}

.config-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--c-brand);
  margin: 0 0 var(--space-1) 0;
}

.config-card__description {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.5;
}

.config-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Checkbox Días Semanal */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c-glass-border);
  padding: var(--space-4);
  border-radius: 3px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c-brand);
  cursor: pointer;
}

.btn-config-save {
  background-color: var(--c-brand);
  color: var(--c-page);
  border: 1px solid var(--c-brand);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
.btn-config-save:hover {
  background-color: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
  box-shadow: 0 5px 15px rgba(197, 168, 128, 0.15);
}

/* Almuerzos settings row */
.lunch-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c-glass-border);
  padding: var(--space-4);
  border-radius: 3px;
}

.lunch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.lunch-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lunch-row__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
}

.lunch-row__selects {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lunch-select {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-glass-border);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

/* Holidays Manager */
.holiday-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.holiday-add-form .filter-input {
  flex-grow: 1;
}
@media (min-width: 1200px) {
  .holiday-add-form {
    flex-direction: row;
  }
}

.holidays-list-container {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c-glass-border);
  padding: var(--space-4);
  border-radius: 3px;
}

.holidays-list-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-muted);
}

.holidays-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 180px;
  overflow-y: auto;
}

.holiday-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  font-size: var(--text-sm);
}

.holiday-item__date {
  font-weight: 500;
  color: var(--c-text);
}

.btn-delete-holiday {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}
.btn-delete-holiday:hover {
  color: var(--c-error);
}

/* Toggle de menú oculto por defecto (Escritorio) */
.admin-sidebar__toggle {
  display: none;
}
.admin-sidebar__menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ─── 4b. LISTADO DE HORAS (DESKTOP) ────────────────────────── */
.listado-filters {
  display: flex;
  gap: var(--space-4);
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  padding: var(--space-5) var(--space-6);
  border-radius: 4px;
  margin-bottom: var(--space-6);
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-group--search {
  flex-grow: 1;
  min-width: 200px;
}

.listado-table-container {
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: var(--space-8);
}

.listado-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--c-text);
}

.listado-table th,
.listado-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--c-glass-border);
}

.listado-table th {
  background-color: rgba(255, 255, 255, 0.01);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-brand);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}
.listado-table th:hover {
  background-color: rgba(197, 168, 128, 0.05);
}

.listado-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.01);
}

.listado-table tr:last-child td {
  border-bottom: none;
}

/* Badges de Estado */
.status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}
.status-pill--confirmado {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--c-success);
  border-color: rgba(34, 197, 94, 0.2);
}
.status-pill--cancelado {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--c-error);
  border-color: rgba(239, 68, 68, 0.2);
}
.status-pill--asistido {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--c-brand);
  border-color: rgba(197, 168, 128, 0.3);
}

/* Botones de acción rápida en tabla */
.listado-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.btn-table-action {
  background: none;
  border: 1px solid var(--c-glass-border);
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.btn-table-action:hover {
  color: var(--c-text);
  border-color: var(--c-brand);
  background-color: rgba(197, 168, 128, 0.05);
}
.btn-table-action--success:hover {
  color: var(--c-success);
  border-color: var(--c-success);
  background-color: rgba(34, 197, 94, 0.05);
}
.btn-table-action--error:hover {
  color: var(--c-error);
  border-color: var(--c-error);
  background-color: rgba(239, 68, 68, 0.05);
}

/* Ocultar contenedor de tarjetas en Desktop */
.listado-cards-container {
  display: none;
}

/* ─── 5. MODALES ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  box-sizing: border-box;
}

.modal-card {
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-brand);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  width: 100%;
  max-width: 580px;
  box-sizing: border-box;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.modal-card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--c-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--c-brand);
  margin: 0;
}

.btn-close-modal {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.btn-close-modal:hover {
  color: var(--c-text);
  background-color: rgba(255, 255, 255, 0.05);
}

.modal-card__form {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.modal-card__footer {
  border-top: 1px solid var(--c-glass-border);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--c-glass-border);
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-3) var(--space-5);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-cancel:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--c-text);
}

.btn-save {
  background-color: var(--c-brand);
  color: var(--c-page);
  border: 1px solid var(--c-brand);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-3) var(--space-5);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-save:hover {
  background-color: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
}

/* Badges de Estado de Pago */
.status-pill--pago-pendiente {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--c-error);
  border-color: rgba(239, 68, 68, 0.2);
}
.status-pill--pago-abonado {
  background-color: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}
.status-pill--pago-pagado {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--c-success);
  border-color: rgba(34, 197, 94, 0.2);
}

/* KPIs de Finanzas */
.kpis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 1200px) {
  .kpis-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-card {
  background-color: var(--c-bg-elevated);
  border: 1px solid var(--c-glass-border);
  border-radius: 4px;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-brand), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 168, 128, 0.4);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

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

.kpi-card__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--space-2);
}

.kpi-card__sub {
  font-size: 11px;
  color: var(--c-text-muted);
}

/* Gestión de Barberos */
.barberos-manager-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
  align-items: start;
}
@media (min-width: 1200px) {
  .barberos-manager-grid {
    grid-template-columns: 350px 1fr;
  }
}

.barberos-list {
  display: flex;
  flex-direction: column;
}

.barbero-crud-item {
  border-bottom: 1px solid var(--c-glass-border);
}

.barbero-crud-item:hover, .barbero-crud-item.active {
  background-color: rgba(197, 168, 128, 0.05);
}

.barbero-crud-item.active {
  border-left: 3px solid var(--c-brand);
}

.barber-detail-tabs {
  scrollbar-width: none;
}

.barber-detail-tabs::-webkit-scrollbar {
  display: none;
}

.barber-detail-tab {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}

.barber-detail-tab:hover, .barber-detail-tab.active {
  color: var(--c-brand);
}

.barber-detail-tab.active {
  border-bottom-color: var(--c-brand);
}

.barber-tab-pane {
  display: none;
}

.barber-tab-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.btn-delete-barber-bloqueo {
  background: none;
  border: none;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-delete-barber-bloqueo:hover {
  color: var(--c-error);
}

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

.modal-cards-container {
  display: none;
}

/* ─── 6. RESPONSIVE COMPLEMENTARIO ────────────────────────── */
@media (max-width: 768px) {
  .admin-dashboard {
    flex-direction: column;
  }

  /* Cabecera Horizontal Toolbar Premium (Fila Única) */
  .admin-sidebar {
    width: 100%;
    height: 60px; /* Altura fija */
    position: fixed; /* Cambiado de sticky a fixed */
    top: 0;
    left: 0;
    z-index: var(--z-header);
    background-color: rgba(10, 10, 12, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: none;
    border-bottom: 1px solid var(--c-glass-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4); /* Relleno lateral */
    box-sizing: border-box;
  }

  .admin-sidebar__brand {
    padding: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-start;
  }

  .admin-sidebar__logo {
    max-width: 72px;
    height: auto;
  }

  .admin-sidebar__badge {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
  }

  /* Mostrar botón hamburguesa en móvil */
  .admin-sidebar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .admin-sidebar__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--c-text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Animación de Hamburguesa a X */
  .admin-sidebar__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .admin-sidebar__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .admin-sidebar__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .admin-sidebar__menu {
    position: fixed;
    top: 60px; /* Altura de la barra sticky */
    right: 0;
    width: 280px;
    height: calc(100vh - 60px);
    background-color: rgba(10, 10, 12, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--c-glass-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
    z-index: 1000;
  }

  .admin-sidebar__menu.open {
    transform: translateX(0);
    visibility: visible;
  }

  .admin-sidebar__nav {
    display: block !important;
    padding: var(--space-6) var(--space-4) !important;
  }

  .admin-sidebar__links {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .admin-sidebar__links li {
    display: block !important;
    margin-bottom: var(--space-4) !important;
  }

  .sidebar-link {
    width: 100% !important;
    height: auto !important;
    padding: var(--space-3) var(--space-4) !important;
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    color: var(--c-text-muted) !important;
    font-size: var(--text-base) !important; /* Más legible al tacto */
    border-radius: 4px !important;
    text-align: left;
  }

  .sidebar-link span {
    display: inline !important; /* Mostrar texto de enlace */
  }

  .sidebar-link.active {
    background-color: rgba(197, 168, 128, 0.08) !important;
    border: 1px solid var(--c-brand) !important;
    color: var(--c-brand) !important;
    padding-left: var(--space-4) !important;
  }

  .admin-sidebar__footer {
    display: block !important;
    padding: var(--space-6) var(--space-4) !important;
    border-top: 1px solid var(--c-glass-border) !important;
  }

  .btn-logout {
    width: 100% !important;
    height: auto !important;
    padding: var(--space-3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    border-radius: 4px !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
    font-size: var(--text-sm) !important;
  }

  .btn-logout span {
    display: inline !important; /* Mostrar texto */
  }

  .admin-workspace {
    margin-left: 0;
    padding: var(--space-4);
    padding-top: calc(60px + var(--space-4)); /* Dejar espacio para la cabecera fija de 60px */
  }

  .pane-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    border-bottom: 1px solid var(--c-glass-border);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
  }

  /* FAB Nueva Cita - Centrado de Precisión y Premium Glow */
  #btn-nueva-cita-manual {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-header);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at center, #1e1b15 0%, #0d0c0a 100%) !important;
    color: var(--c-brand) !important;
    border: 2px solid var(--c-brand) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 32px rgba(197, 168, 128, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    padding: 0 !important;
    gap: 0 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
  }

  #btn-nueva-cita-manual:hover,
  #btn-nueva-cita-manual:active {
    transform: scale(1.1) translateY(-4px) !important;
    background: var(--c-brand) !important;
    color: var(--c-page) !important;
    border-color: var(--c-brand) !important;
    box-shadow: 0 0 25px rgba(197, 168, 128, 0.5) !important;
  }

  #btn-nueva-cita-manual svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    margin: 0 !important;
  }

  #btn-nueva-cita-manual span {
    display: none !important;
  }

  @media (max-width: 600px) {
    #btn-nueva-cita-manual {
      bottom: var(--space-5);
      right: var(--space-5);
      width: 54px;
      height: 54px;
    }
    #btn-nueva-cita-manual svg {
      width: 22px;
      height: 22px;
    }
  }

  .btn-action {
    width: 100%;
    justify-content: center;
  }

  .agenda-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .filter-group, 
  .barber-tabs {
    width: 100%;
  }

  .barber-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .barber-tabs::-webkit-scrollbar {
    display: none;
  }

  .barber-tab {
    flex-shrink: 0;
    font-size: var(--text-xs);
    padding: 0 var(--space-4);
    height: 36px;
  }

  /* Opción 1 de UX: Rejilla Horaria Compacta de 2 Columnas */
  .agenda-grid {
    padding: var(--space-4);
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .agenda-slot {
    height: 85px;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .agenda-slot__header {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .agenda-slot__time {
    font-size: var(--text-lg);
    line-height: 1;
  }

  /* Badge Cita y Nombre del Cliente sin Solapamiento con botón basura */
  .agenda-slot--occupied {
    position: relative;
  }

  .agenda-slot--occupied .agenda-slot__header {
    display: block; /* Desactiva flex para evitar que la insignia flote arriba a la derecha */
  }

  .agenda-slot--occupied .agenda-slot__badge {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    margin: 0;
    font-size: 9px;
    padding: 2px 4px;
    background-color: rgba(197, 168, 128, 0.1);
    color: var(--c-brand);
  }

  .agenda-slot--occupied .agenda-slot__info {
    position: absolute;
    left: var(--space-3);
    bottom: 30px;
    right: 32px; /* Espacio para que no colisione horizontalmente */
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .agenda-slot__client {
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 600;
  }

  .agenda-slot__desc {
    display: none; /* Limpieza máxima en grilla densa */
  }

  .agenda-slot--occupied .btn-cancel-slot {
    opacity: 1 !important; /* Siempre visible */
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--c-text-muted);
  }

  .agenda-slot__action {
    padding: 3px 6px;
    font-size: 10px;
  }

  /* Modal y Ficha de Consulta Premium */
  .modal-card {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: var(--space-4) auto;
  }

  .modal-card__form {
    padding: var(--space-4);
    overflow-y: auto;
    flex-grow: 1;
    gap: var(--space-3);
  }

  .modal-card__header {
    padding: var(--space-4) var(--space-5);
  }

  .modal-card__footer {
    padding: var(--space-3) var(--space-5);
  }

  /* Estilos específicos para la ficha de consulta */
  .modal-card--details {
    border: 1px solid var(--c-brand);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  }

  .modal-card__body {
    padding: var(--space-5);
    overflow-y: auto;
  }

  .details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--c-glass-border);
    padding: var(--space-3) var(--space-4);
    border-radius: 4px;
  }

  .detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    font-weight: 600;
  }

  .detail-value {
    font-size: var(--text-sm);
    color: var(--c-text);
    font-weight: 500;
  }

  /* ==========================================
     Corrección de Scroll Horizontal - Configuración
     ========================================== */

  .config-card {
    padding: var(--space-4);
  }

  .holiday-add-form {
    flex-direction: column;
  }

  .lunch-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .lunch-row__selects {
    width: 100%;
    justify-content: space-between;
  }

  /* ─── 4c. LISTADO DE HORAS (MOBILE Drawer, Cards & Accordions) ─── */
  .listado-filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .listado-filters .filter-group {
    width: 100%;
  }

  .listado-table-container {
    display: none !important; /* Ocultar tabla Excel en móvil */
  }

  .listado-cards-container {
    display: flex !important; /* Mostrar tarjetas en móvil */
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .listado-card {
    background-color: var(--c-bg-elevated);
    border: 1px solid var(--c-glass-border);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .listado-card.open {
    border-color: var(--c-brand);
    box-shadow: 0 4px 15px rgba(197, 168, 128, 0.08);
  }

  .listado-card__header {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }

  .listado-card__main-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 70%;
  }

  .listado-card__client-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-text);
  }

  .listado-card__datetime {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
  }

  .listado-card__side-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .listado-card__price {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-brand);
  }

  .listado-card__arrow {
    color: var(--c-text-muted);
    transition: transform 0.3s ease;
  }
  .listado-card.open .listado-card__arrow {
    transform: rotate(180deg);
  }

  /* Acordeón de Detalles (Oculto por defecto, animado) */
  .listado-card__details {
    display: none;
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    background-color: rgba(0, 0, 0, 0.15);
  }

  .listado-card.open .listado-card__details {
    display: block;
  }

  .listado-detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
  }
  .listado-detail-row:last-of-type {
    border-bottom: none;
  }

  .listado-detail-label {
    color: var(--c-text-muted);
  }

  .listado-detail-val {
    font-weight: 500;
    color: var(--c-text);
  }

  /* Botones de acción móvil */
  .listado-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .listado-card__btn {
    flex-grow: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--c-glass-border);
  }

  .listado-card__btn--call {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--c-text);
  }
  .listado-card__btn--call:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .listado-card__btn--whatsapp {
    background-color: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--c-success);
  }
  .listado-card__btn--whatsapp:hover {
    background-color: rgba(34, 197, 94, 0.1);
  }

  .listado-card__btn--success {
    background-color: rgba(197, 168, 128, 0.1);
    border-color: rgba(197, 168, 128, 0.3);
    color: var(--c-brand);
  }
  .listado-card__btn--success:hover {
    background-color: rgba(197, 168, 128, 0.18);
  }

  .listado-card__btn--danger {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
  }
  .listado-card__btn--danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
  }

  /* Responsive KPIs & Barber Management */
  .kpis-grid {
    display: flex;
    overflow-x: auto;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--c-brand) transparent;
  }
  .kpis-grid::-webkit-scrollbar {
    height: 4px;
  }
  .kpis-grid::-webkit-scrollbar-thumb {
    background-color: var(--c-brand);
    border-radius: 2px;
  }
  .kpi-card {
    min-width: 240px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .barberos-manager-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* CRUD List Item Mobile Restructuring */
  .barbero-crud-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) !important;
  }
  
  .barbero-crud-item__info {
    width: 100% !important;
  }
  
  .barbero-crud-item__actions {
    justify-content: flex-end;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
  }
  
  .barbero-crud-item__actions button {
    flex-grow: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--c-glass-border) !important;
    border-radius: 4px;
  }
  
  .barbero-crud-item__actions .btn-crud-edit-barber:hover {
    background-color: rgba(197, 168, 128, 0.1) !important;
  }

  .barbero-crud-item__actions .btn-crud-delete-barber:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
  }

  /* Active Barber Detail Card Header Mobile Centered Profile */
  .barber-detail-card-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--space-3) !important;
  }
  
  .barber-detail-card-header #barber-detail-title {
    font-size: var(--text-lg) !important;
    word-break: break-word !important;
    margin-bottom: var(--space-1) !important;
  }
  
  .barber-detail-card-header #barber-detail-desc {
    font-size: var(--text-xs) !important;
    word-break: break-word !important;
  }

  /* Tabs Wrapping Mobile */
  .barber-detail-tabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
  }
  
  .barber-detail-tab {
    flex-grow: 1;
    text-align: center;
    font-size: 10px !important;
    padding: var(--space-2) var(--space-3) !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .barber-detail-tab.active {
    border-bottom-color: var(--c-brand) !important;
  }

  /* Workdays Checkboxes Responsive Grid */
  #barber-workdays-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--c-glass-border);
    border-radius: 3px;
  }
  
  #barber-workdays-container .checkbox-label {
    margin: 0 !important;
    font-size: var(--text-xs) !important;
    display: inline-flex !important;
  }

  /* Services & Commissions Row Restructuring */
  .service-config-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }
  
  .service-config-row__label {
    min-width: unset !important;
    width: 100% !important;
  }
  
  .service-commission-config {
    width: 100% !important;
    justify-content: space-between !important;
    opacity: 1 !important;
  }
  
  .service-commission-config select,
  .service-commission-config input {
    flex: 1 !important;
    max-width: unset !important;
  }

  /* Vista responsiva del modal de detalles de Finanzas */
  .modal-table-container {
    display: none !important;
  }
  .modal-cards-container {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3);
  }
  .finanzas-detail-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--c-glass-border);
    padding: var(--space-3);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--text-xs);
  }
}