/*
  MainEstilo.css
  Tema base Spellcraft: claro + oscuro con identidad magica/fantasia.
*/

:root {
    --font-ui: 'Quicksand', 'Trebuchet MS', 'Segoe UI', sans-serif;
    --font-title: 'Georgia', 'Times New Roman', serif;

    --bg-page-a: #f3efe4;
    --bg-page-b: #e7edf7;
    --bg-page-c: #efe7f8;
    --bg-rune: rgba(55, 90, 140, 0.06);

    --text-main: #2b2437;
    --text-muted: #665978;

    --panel-bg: rgba(255, 253, 249, 0.9);
    --panel-border: #d5ccba;
    --panel-shadow: 0 8px 24px rgba(24, 18, 38, 0.1);

    --accent-primary: #3d2f72;
    --accent-secondary: #7a4ea8;
    --accent-soft: #eadcf8;

    --header-a: #20406f;
    --header-b: #3b2f69;
    --header-c: #633a78;

    --menu-a: #2f3f74;
    --menu-b: #4a3b78;

    --btn-bg: #6a3fa0;
    --btn-bg-hover: #5a338a;
    --btn-text: #fff;

    --focus-ring: 0 0 0 3px rgba(106, 63, 160, 0.22);
}

body[data-theme='dark'] {
    --bg-page-a: #121021;
    --bg-page-b: #1a2133;
    --bg-page-c: #231836;
    --bg-rune: rgba(199, 176, 255, 0.08);

    --text-main: #ebe4fb;
    --text-muted: #b4a9cd;

    --panel-bg: rgba(31, 27, 48, 0.9);
    --panel-border: #4b3f63;
    --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    --accent-primary: #ba9cff;
    --accent-secondary: #e39dff;
    --accent-soft: #3a2b52;

    --header-a: #1d2449;
    --header-b: #2b1e4f;
    --header-c: #4a2460;

    --menu-a: #232d55;
    --menu-b: #332757;

    --btn-bg: #8c57cf;
    --btn-bg-hover: #7744b5;
    --btn-text: #fff;

    --focus-ring: 0 0 0 3px rgba(186, 156, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme='light']) {
        --bg-page-a: #121021;
        --bg-page-b: #1a2133;
        --bg-page-c: #231836;
        --bg-rune: rgba(199, 176, 255, 0.08);

        --text-main: #ebe4fb;
        --text-muted: #b4a9cd;

        --panel-bg: rgba(31, 27, 48, 0.9);
        --panel-border: #4b3f63;
        --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

        --accent-primary: #ba9cff;
        --accent-secondary: #e39dff;
        --accent-soft: #3a2b52;

        --header-a: #1d2449;
        --header-b: #2b1e4f;
        --header-c: #4a2460;

        --menu-a: #232d55;
        --menu-b: #332757;

        --btn-bg: #8c57cf;
        --btn-bg-hover: #7744b5;
        --btn-text: #fff;

        --focus-ring: 0 0 0 3px rgba(186, 156, 255, 0.28);
    }
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--text-main);
    background:
        radial-gradient(circle at 12% 20%, var(--bg-rune) 0 2px, transparent 2px) 0 0 / 26px 26px,
        radial-gradient(circle at 72% 62%, var(--bg-rune) 0 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(145deg, var(--bg-page-a) 0%, var(--bg-page-b) 45%, var(--bg-page-c) 100%);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-title);
    letter-spacing: 0.4px;
    color: var(--accent-primary);
}

a {
    color: var(--accent-primary);
}

a:hover {
    color: var(--accent-secondary);
}

.main-container {
    background: transparent !important;
    min-height: calc(100vh - 110px);
    padding: clamp(10px, 1.5vw, 12px);
    overflow-x: hidden;
}

.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Shared panel look */
.per-card,
.card,
.panel,
.window {
    background: var(--panel-bg);
    border-color: var(--panel-border) !important;
    box-shadow: var(--panel-shadow);
}

/* Header and menu color identity */
.header-frost {
    background: linear-gradient(125deg, var(--header-a) 0%, var(--header-b) 45%, var(--header-c) 100%) !important;
}

.menu-frost {
    background: linear-gradient(180deg, var(--menu-a) 0%, var(--menu-b) 100%) !important;
}

.menu-button > div {
    color: #f6f4ff;
    border: 1px solid transparent;
}

.menu-button > div:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
}

/* Controls */
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

button,
.menu-toggle,
.theme-toggle {
    border-radius: 10px;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
.menu-toggle:focus,
.theme-toggle:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theme-toggle {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 8px 10px;
    transition: transform 0.15s ease, background 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

/* Personajes touches */
.per-module {
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    color: var(--text-main);
}

.per-action-box button,
.per-actions button,
.per-btn-conjuro {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
}

.per-action-box button:hover,
.per-actions button:hover,
.per-btn-conjuro:hover {
    background: var(--btn-bg-hover) !important;
}

/* Scrollbar */
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: rgba(120, 92, 156, 0.2);
}

*::-webkit-scrollbar-thumb {
    background: rgba(95, 60, 145, 0.55);
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 60, 145, 0.75);
}