/*=============================================
Panel de configuración (engranaje del nav)
=============================================*/

.modal-settings {
	--set-primary: var(--sb-color, #0275b3);
	--set-light: color-mix(in srgb, var(--set-primary) 12%, #fff);
	--set-line: #e3e6ea;
}

/* Arriba a la derecha, debajo del nav */
.modal-settings .modal-dialog {
	max-width: none;
	width: min(980px, calc(100vw - 32px));
	margin: 60px 16px 16px auto;
}

.modal-settings .modal-content { border: 0; border-radius: .75rem; overflow: hidden; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18); }

.modal-settings .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--set-line); }
.modal-settings .modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-settings .modal-title i { color: var(--set-primary); }

.modal-settings .settings-body { display: grid; grid-template-columns: 260px 1fr; min-height: 460px; }

/* Secciones */
.modal-settings .settings-nav { padding: 16px 14px; border-right: 1px solid var(--set-line); gap: 2px; }

.modal-settings .settings-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #343a40;
	font-size: .9rem;
	text-align: left;
}

.modal-settings .settings-section i { font-size: .75rem; }
.modal-settings .settings-section:hover { background: #f4f6f8; }
.modal-settings .settings-section.active { background: var(--set-light); color: var(--set-primary); }

/* Ajustes de la sección */
.modal-settings .settings-content { padding: 22px 28px; }
.modal-settings .settings-title { font-size: 1.15rem; font-weight: 500; margin-bottom: 18px; }
.modal-settings .settings-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }

.modal-settings .settings-group h6 { font-size: .9rem; font-weight: 500; color: #212529; margin: 0 0 10px; }
.modal-settings .settings-group ul { list-style: none; padding: 0; margin: 0 0 20px; }
.modal-settings .settings-group li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: .85rem; }
.modal-settings .settings-group li::before { content: ""; position: absolute; left: 6px; top: .45em; border: 4px solid transparent; border-left-color: var(--set-primary); }

.modal-settings .settings-group a { color: #343a40; text-decoration: none; }
.modal-settings .settings-group a:hover { color: var(--set-primary); text-decoration: underline; }
.modal-settings .settings-group a.current { color: var(--set-primary); font-weight: 600; }

.modal-settings .settings-soon { color: #9aa1a8; }
.modal-settings .settings-soon small { margin-left: 4px; padding: 1px 6px; border-radius: 10px; background: #f1f3f5; font-size: .7rem; }

/* Móvil: secciones arriba */
@media (max-width: 767.98px) {
	.modal-settings .modal-dialog { width: auto; margin: 8px; }
	.modal-settings .settings-body { grid-template-columns: 1fr; }
	.modal-settings .settings-nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--set-line); padding: 10px; }
	.modal-settings .settings-section { width: auto; white-space: nowrap; }
	.modal-settings .settings-section i { display: none; }
	.modal-settings .settings-content { padding: 18px; }
	.modal-settings .settings-groups { grid-template-columns: 1fr; }
}

/* Modo oscuro */
body.dark-mode .modal-settings { --set-line: rgba(255, 255, 255, .1); --set-light: color-mix(in srgb, var(--set-primary) 25%, transparent); }
body.dark-mode .modal-settings .settings-section,
body.dark-mode .modal-settings .settings-group h6,
body.dark-mode .modal-settings .settings-group a { color: inherit; }
body.dark-mode .modal-settings .settings-section:hover,
body.dark-mode .modal-settings .settings-soon small { background: rgba(255, 255, 255, .06); }