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

body, input, button, select, textarea {
    font-family: 'Inter', sans-serif !important;
}

/* ===========================================================
   PALETA DE COLORES EASYAPP
   =========================================================== */
:root {
    --primary: #5ce1e6;           /* azul turquesa principal */
    --primary-hover: #2fcfd6;     /* más oscuro para hover */

    --accent: #83e82c;            /* verde del logo */
    --accent-hover: #6ac021;

    --dark: #09233e;              /* azul oscuro dominante */
    --dark-light: #0d2f54;

    --gray-base: #d4d6db;
    --gray-dark: #a8aab0;
}

/* ===========================================================
   BOTONES
   =========================================================== */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #09233e !important;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-secondary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #09233e !important;
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-pill {
    border-radius: 50px !important;
}

/* ===========================================================
   INPUTS & FORM CONTROLS
   =========================================================== */
.form-control {
    border: 1px solid var(--gray-base) !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(92, 225, 230, 0.35) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--gray-dark) !important;
}

/* ===========================================================
   CHECKBOXES / RADIOS
   =========================================================== */
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ===========================================================
   LINKS
   =========================================================== */
a {
    color: var(--primary) !important;
}
a:hover {
    color: var(--primary-hover) !important;
}

/* ===========================================================
   ALERTS
   =========================================================== */
.alert-primary {
    background-color: rgba(92, 225, 230, 0.18) !important;
    color: var(--dark) !important;
    border: 1px solid var(--primary) !important;
}

/* ===========================================================
   SIDEBAR
   =========================================================== */
#kt_app_sidebar {
    background-color: #0a2a49 !important; /* azul muy oscuro elegante */
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
}

#kt_app_sidebar .sidebar-logo {
    width: 60px;
    margin: 15px auto;
    display: block;
}

.menu .menu-item .menu-link {
    background: transparent !important;
    color: #c7d6e5 !important;
    font-weight: 500;
    border-radius: 0.55rem;
    transition: all 0.25s ease;
}

.menu .menu-item .menu-link:hover {
    background: rgba(92, 225, 230, 0.15) !important;
    color: var(--primary) !important;
}

.menu .menu-item.here > .menu-link,
.menu .menu-item.active > .menu-link {
    background: var(--primary) !important;
    color: #09233e !important;
}

/* Iconos y títulos heredan color */
.menu-icon, .menu-title {
    color: inherit !important;
}

/* ===========================================================
   HEADER (TOPBAR)
   =========================================================== */
#kt_app_header {
    background-color: var(--dark) !important;
    color: #ffffff !important;
}

#kt_app_header .page-title,
#kt_app_header .page-heading,
#kt_app_header .page-title .page-title-label {
    color: #ffffff !important;
}

#kt_app_header .svg-icon svg {
    fill: #ffffff !important;
}

#kt_app_header .btn {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.25) !important;
}

#kt_app_header .btn:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* ===========================================================
   CARDS
   =========================================================== */
.card {
    border-radius: 12px !important;
}

.card-header {
    border-bottom: 1px solid var(--gray-base) !important;
}

/* ===========================================================
   TABLAS
   =========================================================== */
.table thead th {
    background-color: var(--primary) !important;
    color: #09233e !important;
    font-weight: 700;
}

.table tbody tr:hover {
    background-color: rgba(92, 225, 230, 0.10) !important;
}

/* ===========================================================
   LOGIN EASYAPP
   =========================================================== */
.login-logo {
    width: 210px;
}

.login-brand-text {
    font-size: 2rem;
    color: var(--primary) !important;
}

.login-input {
    background-color: #e8f7fa !important;
    border: 1px solid var(--primary);
    color: var(--dark);
    font-weight: 500;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    transition: all 0.2s ease;
}

.login-input::placeholder {
    color: #8aa3b5;
}

.btn-login {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #09233e !important;
    padding: 0.85rem 1.2rem;
    font-weight: 600;
    border-radius: 0.7rem;
    transition: all 0.25s ease;
}

.btn-login:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.auth-bg {
    background: linear-gradient(135deg, #09233e 0%, #0d2f54 100%) !important;
}

/* ===========================================================
   SCROLLTOP
   =========================================================== */
#kt_scrolltop {
    background-color: var(--primary) !important;
}
#kt_scrolltop:hover {
    background-color: var(--primary-hover) !important;
}

/* ===========================================================
   WIDGETS
   =========================================================== */
.widget-title {
    color: var(--primary) !important;
}