/**
 * Theme: Slate Sky — azul marino, tarjetas pizarra y acento azul cielo
 */
@import url('../_shared/dark-base.css');

:root {
    --main-color: #38bdf8;
    --main-color-dark: #0ea5e9;
    --main-color-lighten: #7dd3fc;
    --accent-muted: rgba(56, 189, 248, 0.12);
    --accent-glow: rgba(56, 189, 248, 0.25);
    --accent-contrast: #0b1220;
    --anchor-text-color: #38bdf8;
    --secondary-color: #1e293b;
    --secondary-gradient: #1a2436;
    --secondary-color-hover: #273449;
    --white-color-hover: rgba(148, 163, 184, 0.1);
    --text-color: #cbd5e1;
    --supress-text-color: #7c8aa0;
    --white-color: #ffffff;
    --surface-color: #172033;
    --page-bg: #111827;
    --box-bg: #1a2436;
    --box-border: #2c3a50;
    --border-color: #334155;
    --border-left: rgba(255, 255, 255, 0.05);
    --border-right: rgba(255, 255, 255, 0.02);
    --text-shadow: transparent;
    --heading-color: #f1f5f9;
    --brand-color: #ffffff;
    --footer-link-color: #fb923c;
    --nav-vip-color: #cbd5e1;
    --header-bg-color: #1e293b;
    --header-bg-image: none;
    --footer-bg-image: none;
    --header-accent-line: transparent;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --vip-highlight-bg: color-mix(in srgb, var(--main-color) 10%, var(--surface-color));
    --vip-success-text: #34d399;
    --vip-danger-color: #f87171;
    --vip-danger-bg: rgba(248, 113, 113, 0.1);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8aa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body {
    background-color: var(--page-bg);
}

label {
    color: var(--text-color);
}

input:not([type=radio]):not([type=checkbox]),
textarea,
select {
    background-color: var(--surface-color);
    border-color: var(--box-border);
    color: var(--text-color);
}

input::placeholder,
textarea::placeholder {
    color: #64748b;
}

button,
.btn {
    color: var(--accent-contrast);
}

/* Paginación y pestañas */
.pagination .active a,
.pagination .current a,
.pagination .active,
.pagination .current,
.paginate_button.current,
.paginate_button:hover {
    background: var(--main-color) !important;
    border-color: var(--main-color-dark) !important;
    color: var(--accent-contrast) !important;
}

.paginate_button {
    background: var(--secondary-color);
    border-color: var(--box-border) !important;
}

.tab_container,
.show_container {
    background: var(--surface-color);
    border-color: var(--box-border);
}

/* Popup de ingreso */
.auth-modal-backdrop {
    background: rgba(8, 12, 22, 0.75);
}

.auth-modal-dialog {
    background: var(--box-bg);
}

.auth-modal-tabs {
    background: var(--surface-color);
}

.auth-modal-tab.is-active,
.auth-modal-tab:hover {
    background: var(--secondary-color-hover);
}

.auth-modal-tab.is-active {
    color: var(--main-color);
}

/* VIP */
.pricing-card.featured {
    border-color: var(--main-color);
}

.pricing-price .amount,
.pricing-save {
    color: var(--main-color);
}

.jdbtn {
    background: var(--main-color) !important;
    color: var(--accent-contrast) !important;
    border-color: var(--main-color-dark) !important;
}