@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-primary: #1A365D;
    --color-primary-hover: #122846;
    --color-surface: #FFFFFF;
    --color-bg: #F7FAFC;
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-text: #2D3748;
    --color-text-muted: #718096;
    --color-border: #E2E8F0;
    --color-shadow: rgba(26, 54, 93, 0.05);
}

/* Reset de fuente y fondos generales */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

#page-wrapper {
    background-color: var(--color-bg) !important;
    border-left: 1px solid var(--color-border) !important;
}

/* Navegación y Cabeceras */
.navbar-default {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-hover) !important;
}
.navbar-brand {
    color: var(--color-surface) !important;
}
.navbar-brand span {
    color: var(--color-surface) !important;
}

/* Menú Sidebar */
.sidebar {
    background-color: var(--color-surface) !important;
    border-right: 1px solid var(--color-border);
}
.sidebar ul li {
    border-bottom: 1px solid var(--color-border) !important;
}
.sidebar ul li a {
    color: var(--color-text) !important;
    font-weight: 500;
}
.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li a.active {
    background-color: var(--color-bg) !important;
    color: var(--color-primary) !important;
    border-left: 4px solid var(--color-primary);
}

/* Panel de Información del Usuario en Sidebar */
.sidebar .nav > li > span.user-info-panel {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
    border-radius: 4px;
    margin: 8px 10px;
    box-shadow: 0 2px 4px var(--color-shadow);
}

/* Componentes de Bootstrap Sobrescritos */
.panel {
    border-radius: 8px !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow) !important;
    background-color: var(--color-surface) !important;
}
.panel-heading {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}
.panel-default > .panel-heading {
    background-color: var(--color-bg) !important;
    color: var(--color-primary) !important;
    font-weight: bold;
    border-bottom: 1px solid var(--color-border) !important;
}
.panel-info > .panel-heading {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
}
.panel-green > .panel-heading {
    background-color: var(--color-success) !important;
    color: var(--color-surface) !important;
}

/* Tablas */
.table {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}
.table > thead > tr {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
}
.table > thead > tr > th {
    border-bottom: none !important;
}
.table-bordered > tbody > tr > td {
    border: 1px solid var(--color-border) !important;
}

/* Botones */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-surface) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--color-success-hover) !important;
    border-color: var(--color-success-hover) !important;
}

/* Logo CSS Recargas 365 */
.brand-logo-container {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.5px;
    padding: 8px 0;
    user-select: none;
}
.brand-logo-recargas {
    color: var(--color-surface);
}
.brand-logo-365 {
    color: var(--color-success);
    background-color: rgba(16, 185, 129, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    font-size: 18px;
    border: 1px solid var(--color-success);
}

/* Large Logo for Login Page */
.brand-logo-container-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -1px;
    margin-bottom: 25px;
    user-select: none;
    width: 100%;
    text-align: center;
}
.brand-logo-recargas-large {
    color: var(--color-primary);
}
.brand-logo-365-large {
    color: var(--color-surface);
    background-color: var(--color-success);
    padding: 2px 10px;
    border-radius: 6px;
    margin-left: 6px;
    font-size: 32px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}