/* =========================================================
   REPUTACIÓN HISTÓRICA
   Gremio de Aventureros de Gardenia

   Complementa style.css.
   Mantiene la identidad visual de la Misionera
   y del Panel del DM.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.historical-page {
    width: min(97%, 1500px);
    margin: 14px auto;

    background:
        var(--ivory);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-strong);

    overflow:
        hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.historical-hero {
    min-height: 290px;
}


.historical-hero .hero-content {
    min-height: 290px;

    grid-template-columns:
        300px
        minmax(0, 1fr)
        320px;

    gap:
        18px;

    padding:
        20px 28px;
}


/*
   El archivo oficial del escudo contiene
   margen transparente considerable.
   Conservamos la misma ampliación visual
   utilizada por la Misionera.
*/

.historical-hero .guild-logo {
    width:
        300px;

    height:
        270px;

    background-image:
        url("../../assets/logos/gremio_logo_blue.webp");

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        148% auto;

    filter:
        drop-shadow(
            0 13px 12px
            rgba(6, 24, 45, 0.24)
        );
}


/* =========================================================
   TÍTULO
   ========================================================= */

.historical-title {
    text-align:
        center;
}


.historical-title > p {
    margin-top:
        15px;

    color:
        var(--gold-700);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.86rem;

    font-weight:
        500;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.historical-title h1 {
    margin:
        6px 0 0;

    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        clamp(
            2.65rem,
            4vw,
            4.15rem
        );

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        0.018em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 0
        rgba(255, 255, 255, 0.92);
}


.historical-title h1 span {
    display:
        block;
}


.historical-title h2 {
    display:
        inline-block;

    margin-top:
        20px;

    padding:
        7px 22px;

    color:
        var(--navy-900);

    border-top:
        1px solid var(--gold-500);

    border-bottom:
        1px solid var(--gold-500);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.02rem;

    font-weight:
        400;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


/* =========================================================
   TARJETA DEL HERO
   ========================================================= */

.historical-notice {
    min-height:
        210px;

    justify-content:
        flex-start;

    padding:
        20px 18px;
}


.historical-notice h3 {
    margin-bottom:
        11px;

    font-size:
        0.9rem;
}


.historical-notice p {
    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.8rem;

    line-height:
        1.6;
}


.historical-notice-small {
    margin-top:
        9px;

    opacity:
        0.86;

    font-size:
        0.73rem !important;
}


.historical-back-link {
    position:
        relative;

    z-index:
        2;

    display:
        inline-block;

    margin-top:
        auto;

    padding-top:
        15px;

    color:
        var(--navy-700);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.historical-back-link:hover {
    color:
        var(--gold-700);

    text-decoration:
        underline;
}


/* =========================================================
   CONTENIDO GENERAL
   ========================================================= */

.historical-content {
    min-height:
        560px;

    padding:
        28px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.99),
            rgba(246, 241, 231, 0.99)
        );
}


/* =========================================================
   EYEBROW
   ========================================================= */

.historical-eyebrow {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--gold-700);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.69rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   ACCESO
   ========================================================= */

.historical-access-shell {
    width:
        min(
            1120px,
            92%
        );

    margin:
        34px auto 60px;

    padding:
        9px;

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.34
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );

    box-shadow:
        var(--shadow-card);
}


.historical-access-card {
    min-height:
        210px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        470px;

    align-items:
        center;

    gap:
        40px;

    padding:
        26px 28px;

    border:
        1px solid
        rgba(
            201,
            155,
            70,
            0.22
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.96
            ),
            rgba(
                248,
                242,
                229,
                0.93
            )
        );
}


.historical-access-copy h2 {
    margin:
        3px 0 11px;

    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.85rem;

    font-weight:
        400;

    line-height:
        1.15;
}


.historical-access-copy p {
    max-width:
        620px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.8rem;

    line-height:
        1.65;
}


.historical-access-form {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        130px;

    align-items:
        end;

    gap:
        12px;
}


.historical-access-form label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.historical-access-form label span {
    color:
        var(--navy-900);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.historical-access-form input {
    width:
        100%;

    height:
        48px;

    padding:
        0 14px;

    color:
        var(--text-main);

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.52
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            253,
            248,
            0.98
        );

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.82rem;

    outline:
        none;

    box-shadow:
        0 0 0 3px
        rgba(
            201,
            155,
            70,
            0.06
        );
}


.historical-access-form input:focus {
    border-color:
        var(--gold-500);

    box-shadow:
        0 0 0 3px
        rgba(
            201,
            155,
            70,
            0.13
        );
}


.historical-access-status {
    grid-column:
        1 / -1;
}


/* =========================================================
   BOTONES
   ========================================================= */

.historical-primary-button,
.historical-secondary-button {
    min-height:
        42px;

    padding:
        0 18px;

    border-radius:
        10px;

    cursor:
        pointer;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.historical-primary-button {
    color:
        var(--gold-100);

    border:
        1px solid
        var(--gold-500);

    background:
        linear-gradient(
            180deg,
            var(--navy-700),
            var(--navy-950)
        );

    box-shadow:
        0 7px 15px
        rgba(
            6,
            24,
            45,
            0.18
        );
}


.historical-primary-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 20px
        rgba(
            6,
            24,
            45,
            0.24
        );
}


.historical-secondary-button {
    color:
        var(--navy-800);

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.4
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.95
            ),
            rgba(
                245,
                237,
                220,
                0.95
            )
        );
}


.historical-secondary-button:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--gold-500);
}


.historical-primary-button:disabled,
.historical-secondary-button:disabled {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none;
}


/* =========================================================
   CABECERA DEL ÁREA ADMIN
   ========================================================= */

.historical-section-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(
            173,
            125,
            49,
            0.28
        );
}


.historical-section-heading h2 {
    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        2rem;

    font-weight:
        400;
}


.historical-section-heading p {
    margin-top:
        4px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.82rem;
}


/* =========================================================
   PANELES
   ========================================================= */

.historical-panel {
    position:
        relative;

    margin-bottom:
        18px;

    padding:
        20px;

    overflow:
        hidden;

    border:
        1px solid
        var(--border-gold);

    border-radius:
        var(--radius-medium);

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.94
            ),
            rgba(
                248,
                242,
                229,
                0.94
            )
        );

    box-shadow:
        var(--shadow-soft);
}


.historical-panel::before {
    content:
        "";

    position:
        absolute;

    inset:
        7px;

    pointer-events:
        none;

    border:
        1px solid
        rgba(
            201,
            155,
            70,
            0.13
        );

    border-radius:
        12px;
}


.historical-panel > * {
    position:
        relative;

    z-index:
        1;
}


.historical-panel-heading {
    margin-bottom:
        15px;
}


.historical-panel-heading--split {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;
}


.historical-panel-heading h3 {
    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.45rem;

    font-weight:
        400;
}


.historical-panel-heading--split > p {
    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.73rem;
}


.historical-help {
    margin:
        -5px 0 16px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.77rem;

    line-height:
        1.6;
}


/* =========================================================
   EQUIPO
   ========================================================= */

.historical-team-layout {
    display:
        grid;

    grid-template-columns:
        minmax(
            320px,
            1fr
        )
        minmax(
            260px,
            0.55fr
        );

    align-items:
        center;

    gap:
        24px;
}


.historical-team-status {
    min-height:
        72px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        12px 16px;

    text-align:
        right;

    border-left:
        1px solid
        rgba(
            173,
            125,
            49,
            0.22
        );
}


.historical-team-status strong {
    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.05rem;

    font-weight:
        400;
}


.historical-team-status span {
    color:
        var(--gold-700);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.7rem;

    font-weight:
        700;
}


.historical-team-status small {
    margin-top:
        3px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.68rem;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.historical-form {
    display:
        grid;

    gap:
        13px;
}


.historical-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.historical-field > span {
    color:
        var(--navy-900);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.historical-field small {
    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.66rem;
}


.historical-field input,
.historical-field select,
.historical-field textarea {
    width:
        100%;

    color:
        var(--text-main);

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.36
        );

    border-radius:
        10px;

    background:
        rgba(
            255,
            253,
            248,
            0.96
        );

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.79rem;

    outline:
        none;
}


.historical-field input,
.historical-field select {
    height:
        42px;

    padding:
        0 13px;
}


.historical-field textarea {
    min-height:
        80px;

    padding:
        11px 13px;

    resize:
        vertical;

    line-height:
        1.5;
}


.historical-field input:focus,
.historical-field select:focus,
.historical-field textarea:focus {
    border-color:
        var(--gold-500);

    box-shadow:
        0 0 0 3px
        rgba(
            201,
            155,
            70,
            0.12
        );
}


/* =========================================================
   GRID DE EDICIÓN
   ========================================================= */

.historical-form-grid,
.historical-record-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px;
}


.historical-editor-panel {
    min-height:
        100%;
}


.historical-form-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        9px;

    margin-top:
        2px;
}


/* =========================================================
   RELACIONES
   ========================================================= */

.historical-relations {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                230px,
                1fr
            )
        );

    gap:
        12px;
}


.hist-relation {
    min-height:
        120px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-content:
        start;

    gap:
        8px 14px;

    padding:
        15px 16px;

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.28
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            253,
            248,
            0.8
        );
}


.hist-relation h3 {
    margin:
        0;

    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1rem;

    font-weight:
        400;

    line-height:
        1.25;
}


.hist-relation p {
    margin-top:
        3px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.7rem;
}


.hist-relation > strong {
    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.45rem;

    font-weight:
        400;
}


.hist-relation > strong.positive {
    color:
        #2d7345;
}


.hist-relation > strong.negative {
    color:
        #9b3434;
}


.hist-relation-concepts {
    grid-column:
        1 / -1;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        3px;
}


.hist-relation-concepts span {
    padding:
        3px 7px;

    color:
        var(--navy-800);

    border:
        1px solid
        rgba(
            26,
            81,
            135,
            0.12
        );

    border-radius:
        999px;

    background:
        rgba(
            26,
            81,
            135,
            0.06
        );

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.64rem;
}


/* =========================================================
   REGISTROS HISTÓRICOS
   ========================================================= */

.historical-record-list {
    display:
        grid;

    gap:
        10px;
}


.hist-record {
    position:
        relative;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.28
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            253,
            248,
            0.8
        );
}


.hist-record.is-discarded {
    opacity:
        0.55;

    border-style:
        dashed;
}


.hist-record-main {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;
}


.hist-record-main > div {
    display:
        flex;

    flex-direction:
        column;
}


.hist-record-main strong {
    color:
        var(--navy-900);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        0.95rem;

    font-weight:
        400;
}


.hist-record-main span {
    margin-top:
        2px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.68rem;
}


.hist-record-main b {
    color:
        var(--navy-800);

    font-family:
        "Marcellus",
        Georgia,
        serif;

    font-size:
        1.08rem;

    font-weight:
        400;
}


.hist-record > p {
    margin-top:
        8px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.72rem;

    line-height:
        1.5;
}


.hist-record-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        10px;
}


.hist-record-actions button {
    min-height:
        31px;

    padding:
        0 10px;

    color:
        var(--navy-800);

    border:
        1px solid
        rgba(
            173,
            125,
            49,
            0.36
        );

    border-radius:
        8px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.94
            ),
            rgba(
                245,
                237,
                220,
                0.94
            )
        );

    cursor:
        pointer;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.66rem;

    font-weight:
        700;
}


.hist-record-actions button:hover {
    border-color:
        var(--gold-500);
}


.hist-record-actions button.danger {
    color:
        #8b2d2d;

    border-color:
        rgba(
            139,
            45,
            45,
            0.3
        );
}


/* =========================================================
   ESTADOS
   ========================================================= */

.hist-status {
    min-height:
        17px;

    color:
        var(--text-soft);

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.7rem;
}


.hist-status.success {
    color:
        #2d7345;
}


.hist-status.error,
.hist-error {
    color:
        #9b3434;
}


.hist-status.loading {
    color:
        var(--navy-700);
}


.hist-empty {
    padding:
        22px;

    color:
        var(--text-soft);

    text-align:
        center;

    border:
        1px dashed
        rgba(
            173,
            125,
            49,
            0.32
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            253,
            248,
            0.5
        );

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size:
        0.75rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width: 1200px
) {

    .historical-hero .hero-content {
        grid-template-columns:
            260px
            minmax(
                0,
                1fr
            );
    }


    .historical-notice {
        grid-column:
            1 / -1;

        min-height:
            auto;
    }


    .historical-access-card {
        grid-template-columns:
            1fr;

        gap:
            22px;
    }


    .historical-access-form {
        max-width:
            620px;
    }

}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media (
    max-width: 900px
) {

    .historical-form-grid,
    .historical-record-grid {
        grid-template-columns:
            1fr;
    }


    .historical-team-layout {
        grid-template-columns:
            1fr;
    }


    .historical-team-status {
        text-align:
            left;

        border-left:
            0;

        border-top:
            1px solid
            rgba(
                173,
                125,
                49,
                0.22
            );
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (
    max-width: 720px
) {

    .historical-page {
        width:
            calc(
                100% - 16px
            );

        margin:
            8px auto;

        border-radius:
            17px;
    }


    .historical-hero .hero-content {
        display:
            flex;

        flex-direction:
            column;

        gap:
            7px;

        padding:
            16px;
    }


    .historical-hero .guild-logo {
        width:
            220px;

        height:
            180px;

        background-size:
            145% auto;
    }


    .historical-title h1 {
        font-size:
            2.5rem;
    }


    .historical-title h2 {
        margin-top:
            14px;

        padding:
            7px 11px;

        font-size:
            0.82rem;
    }


    .historical-notice {
        width:
            100%;
    }


    .historical-content {
        padding:
            14px;
    }


    .historical-access-shell {
        width:
            100%;

        margin:
            20px auto 35px;
    }


    .historical-access-card {
        min-height:
            0;

        padding:
            20px;
    }


    .historical-access-copy h2 {
        font-size:
            1.5rem;
    }


    .historical-access-form {
        grid-template-columns:
            1fr;
    }


    .historical-access-status {
        grid-column:
            auto;
    }


    .historical-section-heading,
    .historical-panel-heading--split {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .historical-section-heading h2 {
        font-size:
            1.65rem;
    }


    .historical-relations {
        grid-template-columns:
            1fr;
    }


    .historical-form-actions {
        justify-content:
            stretch;
    }


    .historical-form-actions button {
        flex:
            1;
    }

}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }

}