/* =========================================================
   RC18 · FASE 2
   Pulido visual y reducción de ruido.
   Solo CSS / presentación.
   ========================================================= */

:root{
    --z-ui-navy:#17354a;
    --z-ui-navy-deep:#0f2a40;
    --z-ui-gold:#b9852f;
    --z-ui-paper:#fffdf8;
    --z-ui-paper-soft:#f7f3ea;
    --z-ui-ink:#263b48;
    --z-ui-muted:#6d7c84;
    --z-ui-line:rgba(23,53,74,.14);
    --z-ui-shadow:0 12px 30px rgba(19,43,59,.08);
    --z-ui-radius:16px;
}

/* ---------------------------------------------------------
   1. RITMO GENERAL
   --------------------------------------------------------- */

body{
    color:var(--z-ui-ink);
}

.portal{
    overflow-x:hidden;
}

main{
    scroll-margin-top:20px;
}

.hero{
    border-bottom:1px solid rgba(255,255,255,.1);
}

.hero-content{
    gap:clamp(18px,3vw,42px);
}

.hero h1{
    letter-spacing:-.02em;
}

.guild-message{
    border-radius:14px;
}

/* ---------------------------------------------------------
   2. BOTONES / ENLACES DE ACCIÓN
   --------------------------------------------------------- */

button,
a[class*="button"],
a[class*="action"],
.back-to-portal,
.admin-back,
.news-back,
.gaceta-back-link,
.account-back{
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        border-color .16s ease;
}

button:hover:not(:disabled),
a[class*="button"]:hover,
a[class*="action"]:hover{
    transform:translateY(-1px);
}

button:active:not(:disabled),
a[class*="button"]:active,
a[class*="action"]:active{
    transform:translateY(0);
}

/* ---------------------------------------------------------
   3. QUITAR RUIDO DUPLICADO
   La barra contextual ya cumple la función de regreso.
   Los enlaces viejos siguen en HTML, solo se ocultan visualmente.
   --------------------------------------------------------- */

.z-context-nav ~ .portal .guild-message .back-to-portal,
.z-context-nav ~ .portal .guild-message .admin-back,
.z-context-nav ~ .portal .guild-message .news-back,
.z-context-nav ~ .portal .guild-message .gaceta-back-link{
    display:none !important;
}

/* Forja administrativa ya tiene navegación contextual */
body:has(.z-context-nav) .manager-head .head-links > a[href*="../admin/"],
body:has(.z-context-nav) .manager-head .head-links > a[href*="../forja-admin/"],
body:has(.z-context-nav) .manager-head .head-links > a[href*="../forja-piezas/"]{
    opacity:.72;
}

/* ---------------------------------------------------------
   4. CONTROLES, FORMULARIOS Y TARJETAS
   --------------------------------------------------------- */

input,
select,
textarea{
    min-height:42px;
}

textarea{
    min-height:84px;
}

input,
select,
textarea,
button{
    font-family:Lato,system-ui,sans-serif;
}

input,
select,
textarea{
    border-radius:10px !important;
}

section[class*="controls"],
section[class*="filters"],
.toolbar-panel,
.manager-panel,
.account-card,
.admin-tools,
.admin-control-panel{
    border-color:var(--z-ui-line) !important;
}

.store-row,
.inventory-row,
.piece-card,
.account-card,
.admin-card,
.overview-card,
.news-card,
.spell-card,
.mission-card{
    box-shadow:none;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.store-row:hover,
.inventory-row:hover,
.piece-card:hover,
.admin-card:hover,
.overview-card:hover,
.news-card:hover,
.spell-card:hover,
.mission-card:hover{
    box-shadow:0 9px 24px rgba(18,42,58,.08);
    border-color:rgba(23,53,74,.22) !important;
}

/* ---------------------------------------------------------
   5. ADMINISTRACIÓN
   --------------------------------------------------------- */

.admin-dashboard-intro{
    align-items:center;
}

.admin-tabs{
    padding:7px;
    gap:5px;
    border:1px solid var(--z-ui-line);
    border-radius:14px;
    background:rgba(255,253,248,.82);
}

.admin-tab{
    border-radius:9px !important;
    border:0 !important;
    background:transparent !important;
}

.admin-tab.is-active{
    background:var(--z-ui-navy) !important;
    color:#fff !important;
    box-shadow:0 5px 16px rgba(23,53,74,.16);
}

.admin-page-heading{
    padding-bottom:14px;
    border-bottom:1px solid var(--z-ui-line);
}

.admin-overview-grid{
    gap:12px;
}

.overview-card{
    border:1px solid var(--z-ui-line);
    border-radius:14px;
    background:var(--z-ui-paper);
}

.admin-quick-links{
    gap:12px;
}

.admin-card{
    border-radius:14px !important;
    min-height:132px;
}

/* ---------------------------------------------------------
   6. FORJA / REGISTRO MAESTRO
   --------------------------------------------------------- */

.manager-shell{
    gap:14px !important;
}

.manager-head,
.manager-panel{
    box-shadow:var(--z-ui-shadow) !important;
}

.manager-head{
    padding-bottom:18px !important;
}

.panel-title{
    padding-bottom:10px;
    border-bottom:1px solid var(--z-ui-line);
}

.pieces-grid{
    gap:14px !important;
}

.piece-card{
    border-radius:14px !important;
}

.piece-actions{
    margin-top:auto;
}

.modal-card{
    box-shadow:0 24px 70px rgba(8,27,44,.28);
}

/* ---------------------------------------------------------
   7. TIENDA
   --------------------------------------------------------- */

.store-heading,
.spellbook-heading,
.news-heading{
    align-items:end;
}

.store-table-wrapper{
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--z-ui-line);
    background:var(--z-ui-paper);
}

.store-table-header{
    background:var(--z-ui-navy);
    color:#fff;
    border:0 !important;
}

.store-list{
    background:var(--z-ui-paper);
}

.store-row{
    border-left:0 !important;
    border-right:0 !important;
}

.store-row:last-child{
    border-bottom:0 !important;
}

.store-buy-button{
    min-height:40px;
}

/* ---------------------------------------------------------
   8. INVENTARIO
   --------------------------------------------------------- */

.inventory-row{
    border-radius:13px;
}

.inventory-actions{
    gap:6px;
}

.inventory-button.small{
    min-height:36px;
}

.wallet-card{
    border-radius:12px;
}

/* ---------------------------------------------------------
   9. REPUTACIÓN
   --------------------------------------------------------- */

.reputation-page,
.ranking-page{
    --rep-line:var(--z-ui-line);
}

.reputation-card,
.ranking-card,
.rep-card{
    border-radius:14px !important;
}

.reputation-controls,
.ranking-controls{
    border-radius:14px !important;
}

/* ---------------------------------------------------------
   10. PERSONAJES / CUENTA
   --------------------------------------------------------- */

.account-shell{
    gap:16px !important;
}

.account-card{
    box-shadow:var(--z-ui-shadow);
}

.character-tabs,
.character-nav{
    scrollbar-width:thin;
}

.character-tabs a,
.character-tabs button,
.character-nav a,
.character-nav button{
    min-height:42px;
}

/* ---------------------------------------------------------
   11. GRIMORIO / MISIONERA / NOTICIAS / GACETA
   --------------------------------------------------------- */

.spell-controls,
.mission-controls,
.news-filters{
    border-radius:14px !important;
}

.latest-edition,
.archive-card,
.news-item{
    border-radius:14px !important;
}

.gaceta-intro-strip{
    border-radius:14px;
}

/* ---------------------------------------------------------
   12. MÓVIL
   --------------------------------------------------------- */

@media(max-width:900px){

    .hero-content{
        gap:16px;
    }

    .admin-tabs{
        display:flex;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:7px;
    }

    .admin-tab{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .store-table-header{
        display:none !important;
    }

    .store-row{
        border:1px solid var(--z-ui-line) !important;
        border-radius:13px;
        margin-bottom:10px;
        padding:14px !important;
    }
}

@media(max-width:680px){

    .z-context-nav{
        box-shadow:0 6px 18px rgba(19,43,59,.08);
    }

    .hero{
        min-height:auto !important;
    }

    .guild-message{
        padding:14px !important;
    }

    .admin-card,
    .overview-card,
    .account-card,
    .manager-panel{
        border-radius:13px !important;
    }

    input,
    select,
    textarea,
    button{
        font-size:16px;
    }
}

/* ---------------------------------------------------------
   13. MOVIMIENTO REDUCIDO
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}