:root {
    --background: #F7F4FB;
    --surface: #FFFFFF;
    --surface-muted: #F4F1F8;
    --primary: #6D2D86;
    --primary-hover: #5B2470;
    --primary-soft: #F4EEF8;
    --text-primary: #2D2D2D;
    --text-secondary: #6B6675;
    --border-soft: #E8DEEF;
    --accent-green: #79AA2B;
    --accent-pink: #D70367;
    --accent-yellow: #EFC600;
    --status-info: #A1B4FF;
    --status-warning: #FFD09E;
    --status-critical: #FFA9DD;
    --status-success: #B0F0A5;
    --shadow-soft: 0 10px 30px rgba(45, 20, 70, 0.06);
    --shadow-panel: 0 12px 35px rgba(45, 20, 70, 0.08);
    --shadow-focus: 0 0 0 4px rgba(121, 170, 43, 0.14);

    --bg-page: var(--background);
    --bg-card: var(--surface);
    --bg-soft: var(--surface-muted);
    --text-main: var(--text-primary);
    --text-muted: var(--text-secondary);
    --primary-dark: var(--primary-hover);
    --primary-light: #8C4DA6;
    --border: var(--border-soft);
    --danger: var(--accent-pink);
    --danger-soft: #FDEBF4;
    --success: var(--accent-green);
    --shadow-card: var(--shadow-soft);
    --radius-card: 24px;
    --radius-input: 14px;
    --radius-small: 14px;
}

* {
    letter-spacing: 0;
}

body {
    background: var(--background);
    color: var(--text-primary);
    font-family: Roboto, Inter, Arial, Helvetica, sans-serif;
}

.page,
.products-page {
    padding: 24px;
}

.sidebar {
    width: 280px;
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.main-content {
    width: calc(100% - 280px);
    margin-left: 280px;
    padding: 0 32px 24px;
}

.topbar {
    min-height: 72px;
    height: 72px;
    margin-bottom: 24px;
    border: 0;
    border-radius: 0 0 24px 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.page-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-button {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--text-primary);
    background: transparent;
    transition: 0.2s ease;
    flex: 0 0 auto;
}

.back-button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.back-button svg {
    width: 22px;
    height: 22px;
}

.card,
.search-card,
.add-card,
.summary-card,
.table-card,
.chart-card,
.control-card,
.scan-card,
.problems-card,
.recommendations-card,
.login-card,
.modal-content {
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.dashboard-grid .card {
    min-height: 128px;
    padding: 18px 22px;
}

.dashboard-grid .card-title {
    margin-bottom: 14px;
}

.dashboard-grid .summary-box {
    min-height: 74px;
    padding: 12px;
}

.dashboard-grid .summary-box strong {
    font-size: 26px;
}

.modal-content {
    border-radius: 32px;
    box-shadow: var(--shadow-panel);
}

.card-title h2,
.card-header h2,
.modal-header h2,
.modal-header h3,
.page-header h1,
.products-header h1,
.page-title h1,
.login-header h2 {
    color: var(--text-primary);
    font-weight: 700;
}

.card-title h2,
.card-header h2,
.section-title h3 {
    font-size: 18px;
    font-weight: 600;
}

.page-header h1,
.products-header h1,
.page-title h1 {
    font-size: clamp(28px, 3vw, 32px);
}

.page-header span,
.card-header p,
.products-header p,
.modal-header p,
.summary-box span,
.sidebar-brand p,
.sidebar-footer span,
.page-footer,
.pagination-info,
.per-page,
.modal-content p {
    color: var(--text-secondary);
}

.brand-icon,
.footer-icon,
.summary-icon,
.title-icon {
    border-radius: 16px;
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: none;
}

.brand-icon {
    color: #FFFFFF;
    background: var(--primary);
}

.btn,
.submit-button,
.page-button,
.btn-icon,
td button,
.tab,
.nav-item,
input,
select,
textarea,
.input-wrapper,
.search-wrapper input,
.porta-form input,
.modal-content input,
.modal-content select,
.scan-grid textarea,
.scan-grid input {
    border-radius: 14px;
}

.btn-primary,
.submit-button,
.modal-content > button:first-of-type {
    color: #FFFFFF;
    background: var(--primary);
}

.btn-primary:hover,
.submit-button:hover,
.modal-content > button:first-of-type:hover {
    background: var(--primary-hover);
}

.btn-secondary,
.btn-light,
.page-button,
.btn-icon,
td button,
.tab,
.nav-item:hover,
.nav-item.active,
.user-dropdown-menu a:hover {
    border-color: transparent;
    color: var(--primary);
    background: var(--primary-soft);
}

.logout-form {
    margin: 0;
}

.logout-button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: #344054;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.logout-button:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.nav-item {
    min-height: 46px;
    color: var(--text-secondary);
    background: transparent;
    position: relative;
}

.nav-item.active::before,
.nav-item:hover::before {
    content: "";
    width: 4px;
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    border-radius: 999px;
    background: var(--primary);
}

input,
select,
textarea,
.input-wrapper,
.search-wrapper input,
.porta-form input,
.modal-content input,
.modal-content select,
.scan-grid textarea,
.scan-grid input {
    border-color: transparent;
    background: var(--surface-muted);
    color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus,
.input-wrapper:focus-within,
.search-wrapper input:focus,
.porta-form input:focus,
.modal-content input:focus,
.modal-content select:focus,
.scan-grid textarea:focus,
.scan-grid input:focus {
    border-color: var(--accent-green);
    box-shadow: var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
}

.table-wrapper,
.table-card {
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

table {
    border: 0;
}

th {
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-weight: 600;
}

td,
th {
    border-bottom-color: var(--border-soft);
}

tbody tr:hover {
    background: var(--primary-soft);
}

.status,
.message,
.alerta-transferencia {
    border-radius: 999px;
}

.status.green,
.message.success {
    color: #275111;
    background: var(--status-success);
}

.status.yellow,
.message.warning {
    color: #654A00;
    background: var(--status-warning);
}

.status.red,
.message.error {
    color: #7A0036;
    background: var(--status-critical);
}

.modal {
    background: rgba(45, 20, 70, 0.28);
}

.system-message-source {
    display: none;
}

.system-message-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.system-message-modal.is-open {
    display: flex;
}

.system-message-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 20, 70, 0.34);
    backdrop-filter: blur(2px);
}

.system-message-modal__content {
    position: relative;
    width: min(420px, 100%);
    border-radius: 24px;
    padding: 34px 30px 28px;
    background: var(--surface);
    box-shadow: var(--shadow-strong);
    text-align: center;
    color: var(--text-primary);
}

.system-message-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.system-message-modal__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.system-message-modal__icon svg {
    width: 30px;
    height: 30px;
}

.system-message-modal h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.system-message-modal p {
    margin: 0 0 24px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.system-message-modal__button {
    min-width: 130px;
    justify-content: center;
}

.system-message-modal.is-success .system-message-modal__icon {
    color: #275111;
    background: var(--status-success);
}

.system-message-modal.is-error .system-message-modal__icon {
    color: #7A0036;
    background: var(--status-critical);
}

.system-message-modal.is-warning .system-message-modal__icon {
    color: #654A00;
    background: var(--status-warning);
}

.system-message-modal.is-info .system-message-modal__icon {
    color: #245e9f;
    background: #e8f2ff;
}

.loading-spinner {
    border-color: var(--primary-soft);
    border-top-color: var(--primary);
}

.brand-panel {
    background: linear-gradient(145deg, var(--surface) 0%, var(--background) 100%);
    border-right: 1px solid var(--border-soft);
}

.brand-panel::before {
    border-color: rgba(109, 45, 134, 0.08);
}

.box,
.clipboard::before {
    background: var(--primary);
}

.clipboard {
    border-color: var(--primary);
}

@media (max-width: 820px) {
    .sidebar {
        width: 100%;
        box-shadow: none;
    }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 0 16px 20px;
    }

    .page,
    .products-page {
        padding: 16px;
    }
}