/* ===========================
   CashnClicks Theme CSS BASE
   =========================== */

/* ==== 1. RESET & BASE ==== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    min-height: 100%;
    background: linear-gradient(135deg, #18181f 0%, #101014 100%);
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==== 2. FONTS ==== */
body, .sidebar, .sidebar * {
    font-family: 'Inter', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #FFD700;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

/* ==== 3. COLORS & VARS ==== */
:root {
    --color-main-bg: #18181f;
    --color-panel-bg: #23233a;
    --color-panel-bg-light: #24243a;
    --color-primary: #FFD700;
    --color-accent: #61cdf7;
    --color-green: #2ad98f;
    --color-error: #e53935;
    --color-blue: #293774;
    --color-input-bg: #181824;
    --color-table-row: #262626;
    --color-border: #ffd70022;
    --color-border-strong: #ffd700cc;
}

/* ==== 4. LAYOUT ==== */
.main-content,
.main-content-admin {
    margin-left: 260px;
    padding: 2.7rem 2rem 2.2rem 2rem;
    min-height: 100vh;
}
@media (max-width: 991px) {
    .main-content, .main-content-admin { margin-left: 0; padding: 1.2em;}
}

/* ==== 5. SIDEBAR ==== */
.sidebar {
    background: #1e1e1e;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    padding-top: 24px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.38);
    z-index: 1030;
    overflow-y: auto;
}
.sidebar a {
    display: block;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    padding: 12px 22px;
    margin-bottom: 7px;
    border-radius: 6px;
    transition: background .2s, color .2s;
}
.sidebar a:hover, .sidebar a.active {
    background: var(--color-primary);
    color: #18181f;
}
@media (max-width: 991px) {
    .sidebar { width: 100%; height: auto; position: relative; box-shadow:none;}
}

/* ==== 6. HEADER (ADMIN) ==== */
.admin-header {
    background: linear-gradient(90deg, #1b1b2c 0%, #293774 120%);
    border-radius: 1.2em;
    margin-bottom: 2.5rem;
    padding: 1.2em 2.1em;
    box-shadow: 0 3px 20px #000b;
    display: flex; align-items: center; justify-content: space-between;
}
.admin-header-badges { display: flex; gap: .8em;}
.admin-header-badges .badge {
    padding: 0.67em 1.18em;
    font-weight: 700;
    font-size: 1em;
    border-radius: 1em;
    border: 1.5px solid #ffd70033;
    box-shadow: 0 2px 10px #10103333;
    background: linear-gradient(80deg, #23233a 90%, #ffd70010 120%);
    color: #ffd700;
    display: flex; align-items: center; gap:0.45em;
}
.badge.bg-danger { background: linear-gradient(80deg, #3a2323 80%, #ff3131 160%)!important; color: #fff !important;}
.badge.bg-primary { background: linear-gradient(90deg, #19374a 60%, #20caff77 150%)!important; color: #fff !important;}
.badge.bg-info { background: linear-gradient(80deg, #233a3a 80%, #00f0ff 160%)!important; color: #23233a !important;}

/* ==== 7. CARDS / BOXES ==== */
.card, .box-cmp, .card-section {
    background: linear-gradient(115deg, #23233a 60%, #18181f 100%);
    border-radius: 1.18em;
    box-shadow: 0 3px 16px #000a;
    border: 2px solid var(--color-border);
    padding: 2em 1.3em 1.3em 1.3em;
    color: #ffd700;
    margin-bottom: 1.6em;
}
.card-title { color: #ffd700; font-weight: 700; }
@media (max-width: 767px) { .card, .box-cmp, .card-section { padding: 1.1em .6em; } }

/* ==== 8. TABLES ==== */
.table, .table-custom {
    color: #fff;
    background: none;
    border-collapse: separate;
}
.table th, .table-custom th {
    color: #ffd700;
    font-weight: 600;
    border-bottom: 1px solid #44445a;
    background: transparent;
}
.table td, .table-custom td {
    color: #fff;
    background: none;
    border-top: 1px solid #262626;
}
.table-dark { background: #1f1f1f; }
.table-hover tbody tr:hover { background: #29377455 !important; }

/* ==== 9. BUTTONS ==== */
button, .btn {
    background: var(--color-primary);
    color: #18181f;
    border-radius: 7px;
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    font-size: 1rem;
    transition: background 0.2s;
    cursor: pointer;
}
button:hover, .btn:hover, .btn:focus { background: #e6c200; color: #18181f; }
.btn-success { background: #2ad98f; color: #23233a;}
.btn-success:hover { background: #176a43;}
.btn-danger { background: #e53935; color: #fff; }
.btn-danger:hover { background: #a70016;}
.btn-secondary { background: #353547; color: #fff;}
.btn-warning { background: #FFD700; color: #181824; font-weight: bold; }
.btn-warning:hover { background: #e6c200; }
.btn-sm { font-size: 0.94em; padding: 7px 14px; }
.btn:disabled { background: #333; color: #aaa; cursor: not-allowed; }

/* ==== 10. FORMS ==== */
input, select, textarea, .form-control, .form-select {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #30304d;
    border-radius: 10px;
    background-color: #181824;
    color: #ffd700;
    font-size: 1em;
    transition: border-color .2s;
}
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: #FFD700;
    background: #23233a;
    color: #ffd700;
}
.form-label { color: #ffd700; font-weight: 600; }
input::placeholder, textarea::placeholder { color: #888; }
input[type="password"] { letter-spacing: .12em; }
.input-group-text { background: #23233a; color: #ffd700; border: 1px solid #ffd70044; }
.form-text { color: #03a9f4 !important; font-size: .98em; }

/* ==== 11. BADGES ==== */
.premio-badge, .badge-green {
    font-size: 0.97em;
    font-weight: 700;
    border-radius: 7px;
    padding: 3px 9px;
    margin-left: 6px;
    background: #ffd700;
    color: #23233a;
}
.badge-green { background: #0fd179; color: #23233a;}
.badge.bg-success { background: #176a43!important; color: #fff!important;}
.badge.bg-danger { background: #a70016!important; color: #fff!important;}
.badge.bg-info { background: #61cdf7!important; color: #23233a!important;}

/* ==== 12. ALERTS / MESSAGES ==== */
.alert, .alert-info, .alert-warning, .alert-danger, .alert-success {
    border-radius: 0.9em;
    font-weight: 500;
    padding: 0.7em 1.1em;
    margin-bottom: 1em;
}
.alert-info { background: #ffd700a6 !important; color: #181824 !important; border: none !important;}
.alert-warning { background: #FFD700; color: #23233a;}
.alert-danger { background: #e53935 !important; color: #fff; }
.alert-success { background: #2ad98f !important; color: #23233a; }

/* ==== 13. PAGINATION ==== */
.pagination .page-link {
    color: #ffd700;
    border: none;
    background: transparent;
    font-weight: bold;
}
.pagination .active .page-link, .pagination .page-item.active .page-link {
    background: #ffd700;
    color: #23233a;
}

/* ==== 14. SPECIAL STYLES ==== */
.summary-cards-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.summary-card {
    flex: 1 1 0;
    background: #23233a;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px 0 rgba(34, 28, 63, 0.10);
    border: 2px solid #ffd70030;
    color: #ffd700;
    padding: 1.1em 1em;
    text-align: center;
}
.summary-card h5 { font-weight: 700; font-size: 1.18em; margin-bottom: .5em;}
.summary-card .display-6 { color: #fff; font-weight: bold; font-size: 2.2em; }
@media (max-width: 991px) {
    .summary-cards-row { flex-direction: column; gap: 1rem; }
}

.module-title {
    color: #ffd700;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.1em;
    letter-spacing: 0.01em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* ==== 15. FOOTER ==== */
.footer {
    background: #121212;
    padding: 20px 0;
    text-align: center;
    color: #888;
    border-top: 1px solid #333;
}
.footer a { color: #FFD700; text-decoration: none; }
.footer a:hover { color: #ffb700; }

/* ==== 16. UTILS ==== */
.text-gold { color: #ffd700; }
.text-accent { color: #61cdf7; }
.text-green { color: #2ad98f; }
.text-danger { color: #e53935; }

.shadow-sm { box-shadow: 0 2px 10px #10103333!important; }

.display-5 { font-size: 2.3rem; font-weight: 700; color: #61cdf7; }
.display-5 .gold { color: #ffd700; }
.display-5 .divider { color: #ffd700a8; }
.display-5 .green { color: #2ad98f; }
.display-5 .yellow { color: #ffd700; }

@media (max-width: 480px) {
    .sidebar { width: 100%; position:relative; left:0; top:0; height:auto;}
    .main-content, .main-content-admin { padding: .7em; }
}

/* Personaliza lo necesario en los módulos con estilos locales (¡el core ya está aquí!) */