/* ═══════════════════════════════════════════════════════════════
   MODAL DE CONFIGURACIÓN PREMIUM (Fase 3: Multi-tenant)
   Estilos específicos de configuración y personalización del tenant
   ═══════════════════════════════════════════════════════════════ */

/* --- Estructura y Contenedor del Modal --- */
.settings-modal-container {
  max-width: 780px !important;
  width: 95vw !important;
  height: calc(100vh - 40px) !important;
  height: calc(100dvh - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  display: flex;
  flex-direction: column;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 500;
}

.settings-layout-body {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0 !important; /* Elimina espacio entre grid y footer */
}

/* --- Grid de Configuración Dual-Column --- */
.settings-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  flex: 1;
  overflow: hidden;
}

/* --- Barra Lateral de Pestañas (Sidebar) --- */
.settings-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-premium),
              color var(--motion-duration-fast) var(--motion-ease-premium);
}

.settings-tab-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium);
}

.settings-tab-btn:hover {
  background: var(--tertiary);
  color: var(--text-primary);
}

.settings-tab-btn:hover svg {
  transform: scale(1.05);
}

.settings-tab-btn.active {
  background: var(--tertiary);
  color: var(--text-primary);
}

/* --- Contenedor de Paneles (Derecha) --- */
.settings-content-wrapper {
  padding: var(--space-lg);
  overflow-y: auto;
  background: var(--card-bg);
}

.settings-pane {
  display: none;
  animation: paneIn 0.3s var(--motion-ease-premium) forwards;
}

.settings-pane.active {
  display: block;
}

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

/* --- Encabezados de Paneles --- */
.pane-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.pane-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* --- Inputs Especializados e Iconografía --- */
.form-grid-settings {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Aumentado de 16px a 24px para mayor holgura entre campos */
}

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

.input-icon-left {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.input-iconic {
  padding-left: var(--space-2xl) !important;
  text-align: left !important;
}

.settings-modal-container .input,
.settings-modal-container input {
  text-align: left !important;
}

.disabled-wrap {
  opacity: 0.7;
}

.settings-modal-container .input:disabled,
.settings-modal-container .input[readonly] {
  background: var(--item-bg);
  border-color: var(--border);
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.85;
}

.field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 500;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* --- Color Picker Customizado --- */
.color-picker-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.input-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.input-color-picker::-webkit-color-swatch {
  border: none;
}

.input-color-picker:hover {
  transform: scale(1.05);
}

/* --- Selector de Temas por Tarjetas (Cards) --- */
.theme-select-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.theme-card-option {
  cursor: pointer;
  user-select: none;
}

.theme-card-option input[type="radio"] {
  display: none;
}

.theme-card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--bg-body);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  transition: border-color var(--motion-duration-fast) var(--motion-ease-premium),
              background-color var(--motion-duration-fast) var(--motion-ease-premium),
              color var(--motion-duration-fast) var(--motion-ease-premium),
              box-shadow var(--motion-duration-fast) var(--motion-ease-premium),
              transform var(--motion-duration-fast) var(--motion-ease-premium);
}

.theme-card-content svg {
  width: 14px;
  height: 14px;
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium);
}

.theme-card-option:hover .theme-card-content {
  border-color: var(--border-strong);
  background: var(--item-bg-hover);
  transform: translateY(-1px);
}

.theme-card-option:hover .theme-card-content svg {
  transform: rotate(15deg);
}

.theme-card-option input[type="radio"]:checked + .theme-card-content {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  transform: translateY(0);
}

/* --- Selector de Paletas por Círculos (Color Dots) --- */
.palette-select-dots {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 4px;
}

.palette-dot-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background-color: var(--palette-color);
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium),
              box-shadow var(--motion-duration-fast) var(--motion-ease-premium),
              border-color var(--motion-duration-fast) var(--motion-ease-premium);
  box-sizing: border-box;
}

.palette-dot-btn:hover {
  transform: scale(1.15);
  border-color: var(--text-secondary);
}

.palette-dot-btn.active {
  transform: scale(1.05);
  border-color: var(--accent) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.palette-dot-btn.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.palette-dot-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- Toggle Switches Estilo iOS --- */
.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.toggle-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-strong);
  transition: .24s var(--motion-ease-premium);
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .24s var(--motion-ease-premium);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.switch input:checked + .slider {
  background-color: var(--accent);
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

.switch input:checked + .slider:before {
  transform: translateX(22px);
}

.prompt-textarea {
  min-height: 100px;
  line-height: 1.5;
  font-family: inherit;
}



/* --- Sección Equipo (Staff) --- */
.team-management-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.team-invite-card {
  padding: var(--space-md);
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.team-members-section {
  margin-top: 12px; /* Reducido para evitar espacio excesivo */
}

.team-invite-card h5,
.team-members-section h5 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.invite-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 10px;
  align-items: center;
}

.invite-inputs-grid .form-group {
  gap: 0;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.team-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.team-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

.team-member-item:hover {
  border-color: var(--border-strong);
  background: var(--item-bg);
}

.member-info-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.member-email {
  font-size: 11px;
  color: var(--text-tertiary);
}

.member-meta-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-role {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.3px;
  min-width: 120px;
  text-align: center;
  display: inline-block;
}

.badge-role.role-owner {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.badge-role.role-staff {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.badge-role.role-super {
  background: var(--warning-bg);
  color: var(--warning);
}

/* --- Adaptabilidad Responsiva Móvil --- */
@media (max-width: 767px) {
  .settings-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-height: calc(92vh - 120px);
  }

  .settings-sidebar {
    flex-direction: row;
    padding: 8px var(--space-md);
    gap: 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
  }

  .settings-sidebar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .settings-tab-btn {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: var(--radius-md);
  }

  .settings-tab-btn span {
    display: inline; /* Mantener texto en móvil si cabe horizontalmente */
  }

  .settings-content-wrapper {
    padding: var(--space-md);
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .invite-inputs-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .invite-inputs-grid button {
    width: 100%;
    margin-top: 4px;
  }
}

/* Override para que el footer del modal no tenga márgenes negativos dentro del settings grid */
.settings-layout-body .modal-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
  background: var(--bg);
}

/* Alineación forzada a la izquierda para campos de texto con iconos en el modal de configuración */
.settings-modal-container input.input-iconic,
.settings-modal-container .input-iconic {
  text-align: left !important;
}

/* Forzar que el botón de cancelar y guardar estén en la misma línea en móvil */
@media (max-width: 767px) {
  .settings-modal-container .modal-footer {
    flex-wrap: nowrap !important;
  }
  .settings-modal-container .modal-footer .btn {
    flex: 1 1 50% !important;
  }
}

/* =================================================================
   PERSONALIZACIÓN DE CITAS EN EL CALENDARIO (Visualización)
   ================================================================= */
.calendar-settings-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.settings-citas-config-section {
  display: flex;
  flex-direction: column;
}

.citas-config-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.citas-config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: transform 0.2s var(--motion-ease-premium),
              border-color 0.2s var(--motion-ease-premium),
              background-color 0.2s var(--motion-ease-premium),
              box-shadow 0.2s var(--motion-ease-premium);
}

.citas-config-item:hover {
  background: var(--item-bg);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.citas-config-item.dragging {
  opacity: 0.5;
  border: 1px dashed var(--accent);
}

.citas-config-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.citas-config-drag-handle {
  color: var(--text-tertiary);
  cursor: grab;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.citas-config-drag-handle:hover {
  color: var(--text-secondary);
}

.citas-config-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.citas-config-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--transition);
  flex-shrink: 0; /* EVITAR QUE SE ENCOJA EN TEXTOS LARGOS/MULTILÍNEA */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.citas-config-checkbox:hover {
  border-color: var(--accent);
}

.citas-config-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.citas-config-checkbox::before {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--motion-duration-fast) var(--motion-ease-premium);
  margin-top: -2px;
  box-sizing: border-box;
  display: block;
}

.citas-config-checkbox:checked::before {
  transform: rotate(-45deg) scale(1);
}

.citas-config-label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.citas-config-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.citas-config-actions .btn-icon-sm {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.citas-config-actions .btn-icon-sm:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

.citas-config-actions .btn-icon-sm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Título Homogéneo para Secciones del Config Panel */
.citas-config-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Sección Vista Previa */
.citas-preview-section {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100%;
}

.citas-preview-card-container {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-body); /* Fondo de app para hacer resaltar la tarjeta */
  display: flex;
  gap: 12px;
  height: 222px; /* Matched to the 4 left items height exactly (4 * 48px + 3 * 10px) */
  box-sizing: border-box;
  align-items: stretch;
}

/* Mini Línea de Tiempo del Calendario (Fidelidad) */
.mini-timeline {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
  width: 54px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.mini-timeline-hour {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
  line-height: 1;
}

/* Columna de la Cuadrícula Miniaturizada */
.mini-grid-column {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--border);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mini-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.4;
  pointer-events: none;
}

.mini-grid-line:nth-child(1) { top: 8%; }
.mini-grid-line:nth-child(2) { top: 29%; }
.mini-grid-line:nth-child(3) { top: 50%; }
.mini-grid-line:nth-child(4) { top: 71%; }
.mini-grid-line:nth-child(5) { top: 92%; }

.cita-preview-block {
  z-index: 2;
  position: absolute;
  top: 29%;
  bottom: 29%;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
}

/* Responsivo para el layout de previsualización */
@media (max-width: 767px) {
  .calendar-settings-layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .citas-preview-section {
    position: relative;
    top: 0;
    margin-top: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SUBIDA Y RECORTE DE LOGOTIPO (SETTINGS LOGO UPLOADER)
   ═══════════════════════════════════════════════════════════════ */
.logo-uploader-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.logo-preview-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  overflow: hidden;
  background: var(--item-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
}

.logo-preview-circle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-preview-circle svg,
.logo-preview-circle i {
  width: 32px;
  height: 32px;
  color: var(--text-tertiary);
}

.logo-preview-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.logo-uploader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.logo-preview-wrapper:hover .logo-uploader-overlay {
  opacity: 1;
}

.logo-uploader-overlay svg {
  width: 20px;
  height: 20px;
}

.logo-uploader-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.logo-uploader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-uploader-actions .btn-danger-text {
  color: var(--danger);
  border-color: rgba(242, 132, 130, 0.2);
}

.logo-uploader-actions .btn-danger-text:hover {
  background: rgba(242, 132, 130, 0.08);
}

/* Modal Cropper Estilos Especiales */
#modal-cropper {
  z-index: 13000 !important;
}

.cropper-modal-body {
  padding: 0 !important;
  background: #111216 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 360px;
  min-height: 300px;
}

.cropper-modal-container {
  max-width: 500px !important;
  width: 90vw !important;
  max-height: min(85vh, 85dvh) !important;
}

.cropper-image-wrapper {
  width: 100%;
  height: 100%;
  max-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cropper-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Customizaciones Visuales del Visor Circular de Cropper.js */
.cropper-view-box,
.cropper-face {
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.cropper-dashed {
  border: 1px dashed rgba(255, 255, 255, 0.4);
}

.cropper-point {
  background-color: var(--accent);
}

.cropper-line {
  background-color: var(--accent);
}

.cropper-modal-container .modal-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-lg) !important;
  box-sizing: border-box !important;
}

/* Ajustes de responsividad en móvil para el modal del recortador */
@media (max-width: 767px) {
  .cropper-modal-container .modal-footer {
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)) !important;
    display: flex !important;
    gap: 12px !important;
    flex-direction: row !important;
  }
  
  .cropper-modal-container .modal-footer .btn {
    flex: 1 !important;
    height: 44px !important;
  }
}

/* Estilos premium para elementos deshabilitados del staff */
[data-tooltip][style*="cursor: not-allowed"] {
  position: relative;
}

[data-tooltip][style*="cursor: not-allowed"] *:disabled,
[data-tooltip][style*="cursor: not-allowed"] *[disabled] {
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Efecto de foco y hover suave sobre bloques deshabilitados */
.form-group[data-tooltip][style*="cursor: not-allowed"],
.toggle-switch-wrapper[data-tooltip][style*="cursor: not-allowed"],
.logo-uploader-container[data-tooltip][style*="cursor: not-allowed"] {
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.form-group[data-tooltip][style*="cursor: not-allowed"]:hover,
.toggle-switch-wrapper[data-tooltip][style*="cursor: not-allowed"]:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .form-group[data-tooltip][style*="cursor: not-allowed"]:hover,
[data-theme="dark"] .toggle-switch-wrapper[data-tooltip][style*="cursor: not-allowed"]:hover {
  background-color: rgba(255, 255, 255, 0.01);
}

/* Corrección para que no se corte el texto a la izquierda ni verticalmente en los select inputs */
.settings-modal-container select.input,
select.input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 16px !important;
  padding-right: 40px !important;
  line-height: 38px !important;
  height: 38px !important;
}

/* Estilos de botones de peligro en configuración */
.btn-danger-text {
  color: var(--danger) !important;
  border-color: rgba(234, 67, 53, 0.2) !important;
}

.btn-danger-text:hover:not(:disabled) {
  background: rgba(234, 67, 53, 0.08) !important;
  border-color: var(--danger) !important;
}

/* Responsivo para la grilla visual de configuración */
@media (max-width: 767px) {
  .settings-visual-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* =================================================================
   PESTAÑA DE SUSCRIPCIÓN Y SOPORTE
   ================================================================= */
.subscription-support-layout {
  animation: paneIn var(--motion-duration-medium) var(--motion-ease-premium) forwards;
}

/* Estilos para el Acordeón Legal */
.legal-accordion {
  width: 100%;
}

.legal-details {
  transition: border-color var(--motion-duration-fast) var(--motion-ease-premium),
              box-shadow var(--motion-duration-fast) var(--motion-ease-premium);
}

.legal-details[open] {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-sm);
}

.legal-details summary::-webkit-details-marker {
  display: none;
}

.legal-details summary:hover {
  background: var(--item-bg-hover);
}

.legal-details summary:focus-visible {
  outline: 2px solid var(--accent);
}

/* Rotación del icono al expandirse */
.legal-details[open] summary .accordion-icon {
  transform: rotate(180deg) !important;
}

/* Estilo de Contenidos Legales */
.legal-content {
  text-align: justify;
}

.legal-content p {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.6;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul, .legal-content ol {
  margin: 6px 0 12px 18px;
  padding: 0;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content h6 {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

/* Personalización del Scrollbar interno para Contratos */
.legal-content::-webkit-scrollbar {
  width: 6px;
}

.legal-content::-webkit-scrollbar-track {
  background: transparent;
}

.legal-content::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}

.legal-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Estilos de botones de soporte */
.subscription-support-layout .btn-outlined {
  transition: border-color var(--motion-duration-fast) var(--motion-ease-premium),
              background-color var(--motion-duration-fast) var(--motion-ease-premium),
              transform var(--motion-duration-fast) var(--motion-ease-premium);
}

.subscription-support-layout .btn-outlined:hover {
  transform: translateY(-1px);
  background: var(--tertiary) !important;
  border-color: var(--border-strong) !important;
}

.subscription-support-layout .btn-outlined:active {
  transform: translateY(0);
}