/*
 * OldSchool Logs — tema público v1.0.0
 * Estética inspirada en Wrath of the Lich King, sin imágenes externas.
 */

:root {
    --background: #05080b;
    --panel: rgba(13, 18, 23, 0.94);
    --panel-soft: rgba(7, 11, 15, 0.9);
    --panel-hover: rgba(24, 34, 42, 0.92);
    --border: #43515d;
    --border-soft: #28343d;
    --gold: #caa85b;
    --gold-soft: #efd58c;
    --text: #eef5f8;
    --muted: #9aaab5;
    --success: #67d69a;
    --danger: #ef7d7d;
    --warning: #e3b967;
    --info: #77b8e8;
    --frost: #79c9f2;
    --frost-soft: rgba(121, 201, 242, 0.14);
    --shadow-deep: rgba(0, 0, 0, 0.62);
}

html {
    background: #030507;
}

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 50% -14rem,
            rgba(104, 178, 224, 0.2),
            transparent 34rem
        ),
        radial-gradient(
            circle at 8% 18rem,
            rgba(193, 140, 54, 0.1),
            transparent 26rem
        ),
        radial-gradient(
            circle at 94% 34rem,
            rgba(77, 151, 193, 0.1),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            #090d11 0,
            #040608 58%,
            #020304 100%
        ) !important;
}

body::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(
            115deg,
            transparent 0 48%,
            rgba(131, 180, 207, 0.035) 49% 51%,
            transparent 52% 100%
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 42px,
            rgba(255, 255, 255, 0.012) 43px,
            transparent 44px
        );
    background-size:
        120px 120px,
        100% 44px;
    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0, 0, 0, 0.45) 62%,
            transparent
        );
}

.page,
.app-layout {
    position: relative;
    z-index: 1;
}

.topbar {
    padding: 14px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(19, 27, 33, 0.92),
            rgba(8, 12, 16, 0.92)
        );
    border: 1px solid var(--border-soft);
    border-top-color:
        rgba(239, 213, 140, 0.52);
    border-radius: 14px;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(14px);
}

.brand-mark {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #f1d68d 0,
            #b98935 48%,
            #5f401b 100%
        ) !important;
    border: 1px solid #f1d78f;
    box-shadow:
        0 0 0 3px rgba(202, 168, 91, 0.12),
        0 0 22px rgba(121, 201, 242, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(44, 28, 12, 0.42);
    border-radius: inherit;
    pointer-events: none;
}

.brand strong,
h1,
h2,
h3 {
    text-shadow:
        0 1px 0 #000,
        0 0 18px rgba(121, 201, 242, 0.08);
}

.brand span {
    letter-spacing: 0.035em;
}

.panel,
.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(17, 24, 30, 0.97),
            rgba(8, 12, 16, 0.97)
        ) !important;
    border: 1px solid var(--border) !important;
    border-top-color:
        rgba(239, 213, 140, 0.46) !important;
    box-shadow:
        0 22px 54px var(--shadow-deep),
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -1px 0 rgba(0, 0, 0, 0.72) !important;
}

.panel::before,
.hero::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    width: 22px;
    height: 22px;
    border-top: 2px solid rgba(202, 168, 91, 0.64);
    border-left: 2px solid rgba(202, 168, 91, 0.64);
    pointer-events: none;
}

.panel::after,
.hero::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 22px;
    height: 22px;
    border-right: 2px solid rgba(121, 201, 242, 0.38);
    border-bottom: 2px solid rgba(121, 201, 242, 0.38);
    pointer-events: none;
}

.button,
button {
    background:
        linear-gradient(
            180deg,
            #d9ba70,
            #aa792d
        ) !important;
    border: 1px solid #e8cc84 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 7px 20px rgba(0, 0, 0, 0.26);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        filter 150ms ease,
        box-shadow 150ms ease;
}

.button:hover,
button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 10px 24px rgba(0, 0, 0, 0.34);
}

.button.secondary,
button.secondary,
.tab:not(.active) {
    color: var(--text) !important;
    background:
        linear-gradient(
            180deg,
            rgba(30, 42, 51, 0.98),
            rgba(13, 19, 24, 0.98)
        ) !important;
    border-color: var(--border) !important;
}

.button.secondary:hover,
button.secondary:hover,
.tab:not(.active):hover {
    border-color: var(--frost) !important;
}

.tab.active {
    background:
        linear-gradient(
            180deg,
            #eed38b,
            #b98431
        ) !important;
}

input,
select,
textarea,
.slicer > summary {
    background:
        linear-gradient(
            180deg,
            rgba(10, 16, 21, 0.98),
            rgba(5, 9, 12, 0.98)
        ) !important;
    border-color: var(--border) !important;
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.55);
}

input:focus,
select:focus,
textarea:focus,
.slicer[open] > summary {
    border-color: var(--frost) !important;
    box-shadow:
        0 0 0 3px var(--frost-soft),
        inset 0 1px 4px rgba(0, 0, 0, 0.55);
}

.metric,
.filter-row,
.selection-panel,
.calendar-player,
.calendar-summary > div,
.calendar-visual,
.table-wrap,
.current-task,
.help,
.status {
    background:
        linear-gradient(
            180deg,
            rgba(10, 15, 19, 0.96),
            rgba(5, 8, 11, 0.96)
        ) !important;
    border-color: var(--border-soft) !important;
}

.metric strong {
    color: var(--gold-soft) !important;
    text-shadow:
        0 0 18px rgba(202, 168, 91, 0.13);
}

table {
    background:
        rgba(4, 7, 9, 0.76);
}

th {
    background:
        linear-gradient(
            180deg,
            #17212a,
            #0c1217
        ) !important;
    border-bottom-color:
        rgba(202, 168, 91, 0.38) !important;
}

tbody tr {
    transition:
        background 130ms ease,
        box-shadow 130ms ease;
}

tbody tr:hover,
tbody tr.selected {
    background:
        linear-gradient(
            90deg,
            rgba(121, 201, 242, 0.1),
            rgba(202, 168, 91, 0.055)
        ) !important;
}

.player-icon,
.class-icon,
.spec-icon {
    box-shadow:
        0 0 0 1px rgba(239, 213, 140, 0.22),
        0 4px 14px rgba(0, 0, 0, 0.5);
}

.footer,
.osl-site-footer {
    padding-top: 22px !important;
    color: var(--muted) !important;
    text-shadow: 0 1px 0 #000;
}

.footer strong,
.osl-site-footer strong {
    color: var(--gold-soft) !important;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #06090c;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #4b5d69,
            #26333c
        );
    border: 2px solid #06090c;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #c2a45f,
            #6c4c20
        );
}

@media (max-width: 720px) {
    .topbar {
        padding: 12px;
    }

    .panel::before,
    .panel::after,
    .hero::before,
    .hero::after {
        width: 14px;
        height: 14px;
    }
}

/* =========================================================
   Feedback widget — visualización garantizada
   Se incluye en el tema principal para no depender de que
   un segundo CSS sea cargado por JavaScript.
   ========================================================= */

.osl-feedback-launcher {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483000 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    max-width: calc(100vw - 40px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 11px 15px !important;
    color: #17100a !important;
    background:
        linear-gradient(
            180deg,
            #efd58c,
            #b9822f
        ) !important;
    border: 1px solid #f3dc9b !important;
    border-radius: 999px !important;
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    font:
        800 13px/1.1
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
}

.osl-feedback-launcher:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.osl-feedback-launcher svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    display: block !important;
    fill: currentColor !important;
}

.osl-feedback-backdrop {
    position: fixed !important;
    z-index: 2147483001 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: auto !important;
    background:
        rgba(1, 4, 7, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.osl-feedback-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: grid !important;
    place-items: center !important;
}

.osl-feedback-dialog {
    position: relative !important;
    width:
        min(
            680px,
            calc(100vw - 32px)
        ) !important;
    max-width: 680px !important;
    max-height:
        min(
            760px,
            calc(100vh - 36px)
        ) !important;
    margin: auto !important;
    overflow: auto !important;
    color: #eef5f8 !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #121a20,
            #070b0f
        ) !important;
    border:
        1px solid #536672 !important;
    border-top-color:
        #d9bd78 !important;
    border-radius: 16px !important;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}

.osl-feedback-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 22px 22px 17px !important;
    border-bottom:
        1px solid #2b3942 !important;
}

.osl-feedback-header h2 {
    margin: 0 !important;
    color: #f3e3bb !important;
    font:
        700 26px/1.15
        Georgia,
        "Times New Roman",
        serif !important;
}

.osl-feedback-header p {
    margin: 8px 0 0 !important;
    color: #a9b7c0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.osl-feedback-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #eef5f8 !important;
    background:
        linear-gradient(
            180deg,
            #293842,
            #121a20
        ) !important;
    border:
        1px solid #536672 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    font:
        700 24px/1
        Arial,
        sans-serif !important;
    transform: none !important;
}

.osl-feedback-form {
    display: grid !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 20px 22px 22px !important;
}

.osl-feedback-grid {
    display: grid !important;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;
    gap: 14px !important;
}

.osl-feedback-field {
    min-width: 0 !important;
    margin: 0 !important;
}

.osl-feedback-field label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #dce6eb !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.osl-feedback-required {
    color: #ef7d7d !important;
}

.osl-feedback-field input,
.osl-feedback-field select,
.osl-feedback-field textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #eef5f8 !important;
    background:
        linear-gradient(
            180deg,
            #0b1116,
            #06090c
        ) !important;
    border:
        1px solid #43515d !important;
    border-radius: 9px !important;
    box-shadow:
        inset 0 1px 4px
        rgba(0, 0, 0, 0.5) !important;
    font:
        400 14px/1.4
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;
    outline: none !important;
}

.osl-feedback-field input:focus,
.osl-feedback-field select:focus,
.osl-feedback-field textarea:focus {
    border-color:
        #79c9f2 !important;
    box-shadow:
        0 0 0 3px
        rgba(121, 201, 242, 0.14),
        inset 0 1px 4px
        rgba(0, 0, 0, 0.5) !important;
}

.osl-feedback-field textarea {
    min-height: 132px !important;
    resize: vertical !important;
}

.osl-feedback-counter {
    display: block !important;
    margin-top: 6px !important;
    color: #8fa0ab !important;
    text-align: right !important;
    font-size: 11px !important;
}

.osl-feedback-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.osl-feedback-status {
    display: none !important;
    padding: 12px 13px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.osl-feedback-status.is-visible {
    display: block !important;
}

.osl-feedback-status.is-loading {
    color: #f4dfaa !important;
    background:
        rgba(227, 185, 103, 0.12) !important;
    border:
        1px solid
        rgba(227, 185, 103, 0.42) !important;
}

.osl-feedback-status.is-success {
    color: #b8f0cf !important;
    background:
        rgba(103, 214, 154, 0.12) !important;
    border:
        1px solid
        rgba(103, 214, 154, 0.42) !important;
}

.osl-feedback-status.is-error {
    color: #ffc2c2 !important;
    background:
        rgba(239, 125, 125, 0.12) !important;
    border:
        1px solid
        rgba(239, 125, 125, 0.42) !important;
}

.osl-feedback-actions {
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-top: 2px !important;
}

.osl-feedback-secondary,
.osl-feedback-submit {
    width: auto !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    border-radius: 9px !important;
    font:
        800 13px/1
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif !important;
    cursor: pointer !important;
    transform: none !important;
}

.osl-feedback-secondary {
    color: #eef5f8 !important;
    background:
        linear-gradient(
            180deg,
            #293842,
            #121a20
        ) !important;
    border:
        1px solid #536672 !important;
}

.osl-feedback-submit {
    color: #17100a !important;
    background:
        linear-gradient(
            180deg,
            #efd58c,
            #b9822f
        ) !important;
    border:
        1px solid #f3dc9b !important;
}

.osl-feedback-secondary:disabled,
.osl-feedback-submit:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

@media (max-width: 640px) {
    .osl-feedback-launcher {
        right: 12px !important;
        bottom: 12px !important;
        min-width: 46px !important;
        padding: 12px !important;
    }

    .osl-feedback-launcher span {
        display: none !important;
    }

    .osl-feedback-backdrop {
        padding: 10px !important;
    }

    .osl-feedback-backdrop.is-open {
        place-items: end center !important;
    }

    .osl-feedback-dialog {
        width: 100% !important;
        max-height:
            calc(100vh - 20px) !important;
        border-radius:
            14px 14px 0 0 !important;
    }

    .osl-feedback-grid {
        grid-template-columns:
            1fr !important;
    }

    .osl-feedback-header,
    .osl-feedback-form {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .osl-feedback-actions > button {
        flex: 1 1 auto !important;
    }
}

/* =========================================================
   Selectores nativos — contraste en listas desplegables
   ========================================================= */

select {
    color: #eef5f8 !important;
    color-scheme: dark !important;
    background-color: #080d11 !important;
}

select option,
select optgroup {
    color: #eef5f8 !important;
    background-color: #0b1116 !important;
}

select option:checked {
    color: #ffffff !important;
    background:
        linear-gradient(
            0deg,
            #2d6fa3,
            #2d6fa3
        ) !important;
}

select option:disabled {
    color: #778690 !important;
}

select::-ms-expand {
    color: #efd58c;
    background-color: transparent;
}

.osl-feedback-field select {
    color-scheme: dark !important;
}

.osl-feedback-field select option,
.osl-feedback-field select optgroup {
    color: #eef5f8 !important;
    background-color: #0b1116 !important;
}