/* ═══ SETTINGS PAGE STYLES ═══ */

/* ── Layout ── */
.set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.set-grid .set-full { grid-column: 1 / -1; }

/* ── Section Card ── */
.set-section {
    background: var(--glass-bg, rgba(255,255,255,.72));
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(255,255,255,.18));
    border-radius: var(--radius-md, 18px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.05));
    overflow: hidden;
    transition: all .3s var(--ease);
}
.set-section:hover {
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.06));
}

.set-section-header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 24px;
    cursor: pointer; user-select: none;
    transition: background .2s;
}
.set-section-header:hover { background: rgba(0,0,0,.015); }

.set-section-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.set-ico-profile { background: linear-gradient(135deg, var(--navy-50, #eff6ff), rgba(37,99,235,.08)); color: var(--navy-400, #2563eb); }
.set-ico-pw { background: linear-gradient(135deg, #fef2f2, rgba(225,29,72,.06)); color: var(--red-500, #e11d48); }
.set-ico-notif { background: linear-gradient(135deg, #fff7ed, rgba(245,158,11,.08)); color: var(--amber-500, #f59e0b); }
.set-ico-cutoff { background: linear-gradient(135deg, #ecfeff, rgba(6,182,212,.08)); color: var(--cyan-500, #06b6d4); }
.set-ico-theme { background: linear-gradient(135deg, #f5f3ff, rgba(139,92,246,.08)); color: var(--violet-500, #8b5cf6); }
.set-ico-gbl { background: linear-gradient(135deg, #ecfdf5, rgba(16,185,129,.08)); color: var(--emerald-500, #10b981); }
.set-ico-suc { background: linear-gradient(135deg, var(--navy-50, #eff6ff), rgba(37,99,235,.06)); color: var(--navy-400, #2563eb); }

.set-section-info { flex: 1; }
.set-section-title {
    font-size: .92rem; font-weight: 800; color: var(--navy-800, #1e293b);
    margin: 0 0 2px;
}
.set-section-desc {
    font-size: .76rem; color: var(--g400, #94a3b8); margin: 0;
}

.set-section-chevron {
    width: 20px; height: 20px; color: var(--g300, #cbd5e1);
    transition: transform .3s var(--ease);
    flex-shrink: 0;
}
.set-section.collapsed .set-section-chevron { transform: rotate(-90deg); }

.set-section-body {
    padding: 0 24px 24px;
    transition: all .3s var(--ease);
}
.set-section.collapsed .set-section-body {
    display: none;
}

/* ── Profile Header Card ── */
.set-avatar-wrap {
    position: relative; cursor: pointer; flex-shrink: 0;
}
.set-avatar-wrap:hover .set-avatar-overlay { opacity: 1; }
.set-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,.45); display: flex;
    align-items: center; justify-content: center;
    color: white; opacity: 0; transition: opacity .25s var(--ease);
    pointer-events: none;
}
.set-profile-header {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--navy-50, #eff6ff), rgba(37,99,235,.03));
    border-bottom: 1px solid var(--g200, #e2e8f0);
}
.set-profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-400, #2563eb), var(--violet-500, #8b5cf6));
    color: white; font-size: 1.4rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,99,235,.2);
    flex-shrink: 0;
}
.set-profile-info { flex: 1; }
.set-profile-info-name {
    font-size: 1.1rem; font-weight: 800; color: var(--navy-800, #1e293b);
    margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.set-role-badge {
    font-size: .65rem; font-weight: 700; padding: 2px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}
.set-role-sucursal { background: var(--navy-50, #eff6ff); color: var(--navy-400, #2563eb); }
.set-role-cliente { background: #ecfdf5; color: #059669; }
.set-role-admin { background: #f5f3ff; color: #8b5cf6; }
.set-profile-meta { font-size: .78rem; color: var(--g400, #94a3b8); display: flex; gap: 16px; flex-wrap: wrap; }
.set-profile-meta span { display: flex; align-items: center; gap: 4px; }

/* ── Form Fields ── */
.set-form { display: flex; flex-direction: column; gap: 14px; }
.set-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-field { display: flex; flex-direction: column; gap: 4px; }
.set-label {
    font-size: .74rem; font-weight: 700; color: var(--g500, #64748b);
    text-transform: uppercase; letter-spacing: .04em;
}
.set-input {
    padding: 10px 14px; border: 1.5px solid var(--g200, #e2e8f0);
    border-radius: 10px; font-size: .88rem; font-family: inherit;
    color: var(--navy-800, #1e293b); background: var(--white, #fff);
    transition: all .25s var(--ease); outline: none;
}
.set-input:focus {
    border-color: var(--navy-400, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.set-input:disabled, .set-input.readonly {
    background: var(--g50, #f8fafc); color: var(--g500, #64748b);
    cursor: default;
}

/* Password field with toggle */
.set-pw-wrap {
    position: relative;
}
.set-pw-wrap .set-input { padding-right: 44px; }
.set-pw-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--g400, #94a3b8); transition: all .2s;
}
.set-pw-toggle:hover { background: var(--g100, #f1f5f9); color: var(--navy-400, #2563eb); }

/* ── Buttons ── */
.set-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px; flex-wrap: wrap;
}
.set-status {
    font-size: .82rem; font-weight: 600;
    display: none;
}
.set-status-ok { color: #16a34a; }
.set-status-error { color: var(--red-500, #e11d48); }

.set-btn-primary {
    padding: 10px 22px; border-radius: 10px;
    font-size: .85rem; font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--navy-500, #1b3a75), var(--navy-700, #111b36));
    box-shadow: 0 4px 12px rgba(37,99,235,.15);
    transition: all .25s var(--ease);
    display: inline-flex; align-items: center; gap: 8px;
}
.set-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.25); }
.set-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.set-btn-test {
    padding: 10px 18px; border-radius: 10px;
    font-size: .82rem; font-weight: 600;
    color: var(--navy-400, #2563eb);
    background: var(--navy-50, #eff6ff);
    border: 1.5px solid rgba(37,99,235,.15);
    transition: all .25s var(--ease);
}
.set-btn-test:hover { background: rgba(37,99,235,.1); border-color: var(--navy-400, #2563eb); }
.set-btn-test:disabled { opacity: .6; cursor: not-allowed; }

.set-footer-btns { display: flex; gap: 8px; align-items: center; }

.set-btn-danger {
    padding: 10px 22px; border-radius: 10px;
    font-size: .85rem; font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--red-500, #e11d48), var(--red-600, #9f1239));
    box-shadow: 0 4px 12px rgba(225,29,72,.15);
    transition: all .25s var(--ease);
}
.set-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(225,29,72,.25); }

/* ── Toggle Switch ── */
.set-notif-email-row {
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--g100, #f1f5f9);
}
.set-notif-email-row .set-label { margin-bottom: 2px; }
.set-notif-email-desc {
    font-size: .74rem; color: var(--g400, #94a3b8); margin-bottom: 8px;
}
.set-notif-email-row .set-input { width: 100%; }

.set-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--g100, #f1f5f9);
}
.set-toggle-row:last-child { border-bottom: none; }
.set-toggle-info { flex: 1; }
.set-toggle-label { font-size: .88rem; font-weight: 600; color: var(--navy-800, #1e293b); }
.set-toggle-desc { font-size: .76rem; color: var(--g400, #94a3b8); margin-top: 2px; }

.set-toggle {
    position: relative; width: 48px; height: 26px; flex-shrink: 0;
}
.set-toggle input { display: none; }
.set-toggle-track {
    position: absolute; inset: 0;
    background: var(--g300, #cbd5e1); border-radius: 26px;
    transition: background .3s var(--ease);
    cursor: pointer;
}
.set-toggle-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform .3s var(--bounce, cubic-bezier(0.34,1.56,0.64,1));
}
.set-toggle input:checked + .set-toggle-track {
    background: var(--navy-400, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.set-toggle input:checked + .set-toggle-track::after {
    transform: translateX(22px);
}

/* ── Theme Picker ── */
.set-theme-options {
    display: flex; gap: 12px; margin-bottom: 20px;
}
.set-theme-opt {
    flex: 1; padding: 16px; border-radius: 14px;
    border: 2px solid var(--g200, #e2e8f0);
    background: var(--white, #fff);
    text-align: center; cursor: pointer;
    transition: all .3s var(--ease);
}
.set-theme-opt:hover { border-color: var(--navy-300, #60a5fa); }
.set-theme-opt.active {
    border-color: var(--navy-400, #2563eb);
    background: var(--navy-50, #eff6ff);
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.set-theme-preview {
    width: 100%; height: 48px; border-radius: 8px; margin-bottom: 10px;
    overflow: hidden; display: flex;
}
.set-theme-preview-light {
    background: linear-gradient(135deg, #f0f4f8, #fff);
    border: 1px solid var(--g200, #e2e8f0);
}
.set-theme-preview-light .stp-sidebar { width: 30%; background: #0b1120; }
.set-theme-preview-light .stp-content { flex: 1; background: #f0f4f8; }

.set-theme-preview-dark .stp-sidebar { width: 30%; background: #06080f; }
.set-theme-preview-dark .stp-content { flex: 1; background: #111827; }

.set-theme-name { font-size: .82rem; font-weight: 700; color: var(--navy-800, #1e293b); }

/* ── Accent Color Picker ── */
.set-accent-label {
    font-size: .78rem; font-weight: 700; color: var(--g500, #64748b);
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em;
}
.set-accent-dots {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.set-accent-dot {
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; position: relative;
    transition: all .25s var(--ease);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.set-accent-dot:hover { transform: scale(1.15); }
.set-accent-dot.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px white, 0 0 0 5px currentColor;
}
.set-accent-dot.active::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: .8rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.set-accent-blue { background: #2563eb; color: #2563eb; }
.set-accent-indigo { background: #4f46e5; color: #4f46e5; }
.set-accent-violet { background: #8b5cf6; color: #8b5cf6; }
.set-accent-rose { background: #e11d48; color: #e11d48; }
.set-accent-emerald { background: #10b981; color: #10b981; }
.set-accent-amber { background: #f59e0b; color: #f59e0b; }
.set-accent-cyan { background: #06b6d4; color: #06b6d4; }

/* ── Cutoff Time Picker ── */
.set-cutoff-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px; background: var(--g50, #f8fafc);
    border-radius: 12px; border: 1px solid var(--g200, #e2e8f0);
}
.set-cutoff-time-input {
    padding: 10px 14px; border: 1.5px solid var(--g200, #e2e8f0);
    border-radius: 10px; font-size: 1.1rem; font-weight: 700;
    font-family: var(--mono, monospace);
    color: var(--navy-800, #1e293b); background: white;
    width: 140px; text-align: center;
    transition: all .25s var(--ease); outline: none;
}
.set-cutoff-time-input:focus {
    border-color: var(--cyan-500, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6,182,212,.1);
}
.set-cutoff-preview-box {
    padding: 8px 16px; background: #ecfeff;
    border: 1.5px solid #a5f3fc; border-radius: 10px;
    font-size: 1rem; font-weight: 800; color: #0e7490;
    font-family: var(--mono, monospace);
}
.set-cutoff-desc { font-size: .78rem; color: var(--g400, #94a3b8); flex: 1; line-height: 1.4; }

/* ── GBL Status Grid ── */
.set-gbl-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.set-gbl-item {
    padding: 14px 16px; background: var(--g50, #f8fafc);
    border-radius: 10px; border: 1px solid var(--g100, #f1f5f9);
    display: flex; flex-direction: column; gap: 4px;
}
.set-gbl-label { font-size: .72rem; font-weight: 700; color: var(--g400, #94a3b8); text-transform: uppercase; letter-spacing: .04em; }
.set-gbl-val { font-size: .88rem; font-weight: 600; color: var(--navy-800, #1e293b); display: flex; align-items: center; gap: 6px; }
.set-gbl-mono { font-family: var(--mono, monospace); font-size: .82rem; }
.set-gbl-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.set-gbl-dot.active { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,106,.15); }
.set-gbl-dot.inactive { background: var(--red-500, #e11d48); box-shadow: 0 0 0 3px rgba(225,29,72,.1); }
.set-gbl-warn { color: #b45309; }
.set-gbl-na { font-size: .85rem; color: var(--g400, #94a3b8); text-align: center; padding: 20px; }

/* GBL Empty State */
.set-gbl-empty {
    text-align: center; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center;
}
.set-gbl-empty-title {
    font-size: .88rem; font-weight: 700; color: var(--navy-800, #1e293b);
    margin: 0 0 6px;
}
.set-gbl-empty-desc {
    font-size: .78rem; color: var(--g400, #94a3b8); margin: 0;
    max-width: 360px; line-height: 1.5;
}
.set-gbl-empty-desc strong { color: var(--navy-400, #2563eb); font-weight: 700; }

/* ── Dark Mode overrides ── */
:root.dark-mode {
    --g50: #111827;
    --g100: #1f2937;
    --g200: #374151;
    --g300: #4b5563;
    --g400: #9ca3af;
    --g500: #d1d5db;
    --g600: #e5e7eb;
    --g700: #f3f4f6;
    --g800: #f9fafb;
    --white: #111827;
    --glass-bg: rgba(17,24,39,.85);
    --glass-border: rgba(55,65,81,.4);
}
:root.dark-mode .app-content {
    background: linear-gradient(180deg, #0a0f1a 0%, #111827 50%, #0d1117 100%);
}
:root.dark-mode .app-content::before { opacity: .06; }
:root.dark-mode .app-topbar {
    background: rgba(17,24,39,.85);
    border-bottom-color: rgba(55,65,81,.4);
}
:root.dark-mode .topbar-title {
    background: linear-gradient(135deg, #e5e7eb, #9ca3af);
    -webkit-background-clip: text; background-clip: text;
}
:root.dark-mode .ship-table th { background: rgba(17,24,39,.6); color: #9ca3af; }
:root.dark-mode .ship-table td { color: #d1d5db; border-color: #1f2937; }
:root.dark-mode .m-val {
    background: linear-gradient(135deg, #f9fafb, #60a5fa);
    -webkit-background-clip: text; background-clip: text;
}
:root.dark-mode .set-input { background: #1f2937; color: #f3f4f6; border-color: #374151; }
:root.dark-mode .set-input:focus { border-color: var(--navy-400); }
:root.dark-mode .set-section-title { color: #f3f4f6; }
:root.dark-mode .page-heading {
    background: linear-gradient(135deg, #e5e7eb, #60a5fa, #06b6d4);
    -webkit-background-clip: text; background-clip: text;
}
:root.dark-mode .page-subheading { color: #9ca3af; }
:root.dark-mode .guia-number { background: rgba(37,99,235,.1); }
:root.dark-mode .filter-input-wrap { background: #1f2937; border-color: #374151; }
:root.dark-mode .filter-select { background: #1f2937; color: #d1d5db; border-color: #374151; }
:root.dark-mode .chart-section { border-color: rgba(55,65,81,.4); }
:root.dark-mode .set-profile-header { background: rgba(37,99,235,.05); border-color: #1f2937; }
:root.dark-mode .set-toggle-label { color: #e5e7eb; }
:root.dark-mode .set-theme-opt { background: #1f2937; border-color: #374151; }
:root.dark-mode .set-theme-opt.active { background: rgba(37,99,235,.1); }
:root.dark-mode .set-theme-name { color: #e5e7eb; }
:root.dark-mode .set-gbl-item { background: #1f2937; border-color: #374151; }
:root.dark-mode .set-gbl-val { color: #e5e7eb; }
:root.dark-mode .set-cutoff-row { background: #1f2937; border-color: #374151; }
:root.dark-mode .set-cutoff-time-input { background: #111827; color: #e5e7eb; border-color: #374151; }
:root.dark-mode .set-cutoff-preview-box { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.2); }
:root.dark-mode .set-btn-test { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.2); color: #60a5fa; }
:root.dark-mode .set-gbl-empty-title { color: #e5e7eb; }
:root.dark-mode .set-gbl-empty-desc { color: #9ca3af; }
:root.dark-mode .placeholder-page { background: rgba(17,24,39,.5); }
:root.dark-mode .pp-title, :root.dark-mode .pp-desc { color: #9ca3af; }

/* Accent overrides */
:root[data-accent="indigo"] { --navy-400: #4f46e5; --navy-500: #4338ca; --navy-300: #818cf8; --navy-50: #eef2ff; }
:root[data-accent="violet"] { --navy-400: #8b5cf6; --navy-500: #7c3aed; --navy-300: #a78bfa; --navy-50: #f5f3ff; }
:root[data-accent="rose"] { --navy-400: #e11d48; --navy-500: #be123c; --navy-300: #fb7185; --navy-50: #fff1f2; }
:root[data-accent="emerald"] { --navy-400: #10b981; --navy-500: #059669; --navy-300: #6ee7b7; --navy-50: #ecfdf5; }
:root[data-accent="amber"] { --navy-400: #f59e0b; --navy-500: #d97706; --navy-300: #fbbf24; --navy-50: #fffbeb; }
:root[data-accent="cyan"] { --navy-400: #06b6d4; --navy-500: #0891b2; --navy-300: #22d3ee; --navy-50: #ecfeff; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .set-grid { grid-template-columns: 1fr; }
    .set-form-row { grid-template-columns: 1fr; }
    .set-theme-options { flex-direction: column; }
    .set-cutoff-row { flex-direction: column; align-items: stretch; }
    .set-gbl-grid { grid-template-columns: 1fr; }
    .set-profile-header { flex-direction: column; text-align: center; }
}