/*
RUTA: wwwroot/css/pages/gormitero.css
----------------------------------------------------------
Wegmüller Freelancer - Menú de colecciones
Qué hace:
- Define la estructura compacta de las tarjetas de menú.
- Usa las variables globales de site.css, claro y oscuro.
- No define paletas por colección.
- Usa estados visuales: activa, incompleta y completada.
Última modificación: 2026-09-15 - H30a hub Gormitero
----------------------------------------------------------
*/

.wf-gormitero-page {
    position: relative;
    z-index: 0;
    padding: 1rem 1rem 2rem;
    color: var(--wf-text);
    background: transparent !important;
}

.wf-gormitero-hero {
    margin-bottom: 1.25rem;
    overflow: hidden;
    padding: clamp(.9rem, 2vw, 1.35rem);
    border: 1px solid var(--wf-border-soft);
    border-radius: var(--wf-radius-panel);
    background: var(--wf-panel-bg);
    box-shadow: var(--wf-shadow-soft);
}

.wf-gormitero-intro-heading {
    margin-bottom: 1rem;
}

.wf-gormitero-intro-heading h1 {
    margin: 0;
    color: var(--wf-title);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 850;
    letter-spacing: -.035em;
    text-shadow: var(--wf-heading-shadow);
}

.wf-gormitero-banner {
    overflow: hidden;
    border-radius: 1rem;
}

.wf-gormitero-banner img {
    display: block;
    width: 100%;
    height: auto;
}


.wf-gormitero-featured {
    margin-top: 1.25rem;
}

.wf-gormitero-featured-panel {
    width: 100%;
    padding: 1.15rem 1.1rem;
    border: 1px solid var(--wf-border-soft);
    border-radius: var(--wf-radius-panel);
    background: var(--wf-panel-bg);
    box-shadow: var(--wf-shadow-soft);
}

.wf-gormitero-featured-panel-active,
.wf-gormitero-featured-panel-paused {
    background: var(--wf-panel-bg);
}

.wf-gormitero-featured-header {
    margin-bottom: 1rem;
    padding: .2rem .35rem .15rem;
    text-align: center;
}

.wf-gormitero-featured-title {
    margin: 0;
    color: var(--wf-title) !important;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: var(--wf-heading-shadow);
}

.wf-gormitero-section {
    margin-top: 1.25rem;
}

.wf-gormitero-section-title {
    margin-bottom: 1.1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--wf-border-soft) !important;
    border-radius: 1.15rem;
    background: var(--wf-panel-bg) !important;
    box-shadow: var(--wf-shadow-soft);
    color: var(--wf-title) !important;
}

.wf-gormitero-section-title h2 {
    margin: 0;
    color: var(--wf-title) !important;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-weight: 850;
    letter-spacing: .04em;
    text-shadow: var(--wf-heading-shadow);
}

.wf-gormitero-card {
    position: relative;
    height: 100%;
    overflow: visible;
    border: 1px solid var(--wf-border-soft) !important;
    border-radius: var(--wf-radius-card) !important;
    background: var(--wf-card-bg) !important;
    box-shadow: var(--wf-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wf-gormitero-card::before {
    content: "";
    position: absolute;
    inset: .32rem;
    z-index: 0;
    border: 1px solid rgba(216, 174, 69, .22);
    border-radius: 1.28rem;
    pointer-events: none;
}

.wf-gormitero-card:hover,
.wf-gormitero-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--wf-border);
    box-shadow: var(--wf-shadow);
}

.wf-gormitero-card-main-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.wf-gormitero-card-main-link:focus-visible {
    outline: 3px solid var(--wf-focus);
    outline-offset: 4px;
    border-radius: var(--wf-radius-card);
}

.wf-gormitero-card-image-panel {
    position: relative;
    min-height: 9.35rem;
    margin: .55rem .55rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.1rem 1.1rem .35rem .35rem;
    border: 1px solid var(--wf-blue-border);
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(180deg, var(--wf-blue-1) 0%, var(--wf-cream-0) 100%);
}

.wf-gormitero-card-image-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.wf-gormitero-card-image {
    display: block;
    width: 100%;
    height: 8.9rem;
    object-fit: contain;
    padding: .45rem;
    filter: drop-shadow(0 .65rem 1.05rem rgba(23, 63, 109, .16));
    transition: transform .18s ease, filter .18s ease;
}

.wf-gormitero-card:hover .wf-gormitero-card-image,
.wf-gormitero-card:focus-within .wf-gormitero-card-image {
    transform: scale(1.025);
    filter: drop-shadow(0 .8rem 1.2rem rgba(23, 63, 109, .22));
}

.wf-gormitero-status-badge {
    position: relative;
    z-index: 2;
    width: 2.8rem;
    height: 2.8rem;
    margin: -1.35rem auto .02rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--wf-border);
    color: var(--wf-gold-3);
    background: linear-gradient(180deg, var(--wf-gold-0) 0%, var(--wf-gold-1) 100%);
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 .45rem .85rem rgba(23, 63, 109, .12);
}

.wf-gormitero-card-active .wf-gormitero-status-badge {
    color: var(--wf-green-3);
    border-color: rgba(63, 155, 97, .46);
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-green-0) 45%, var(--wf-green-1) 100%);
}

.wf-gormitero-card-pending .wf-gormitero-status-badge {
    color: var(--wf-red-3);
    border-color: rgba(216, 77, 66, .44);
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-red-0) 45%, var(--wf-red-1) 100%);
}

.wf-gormitero-card-completed .wf-gormitero-status-badge {
    color: var(--wf-gold-3);
    border-color: rgba(216, 174, 69, .58);
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-gold-0) 42%, var(--wf-gold-1) 100%);
}

.wf-gormitero-card-paused .wf-gormitero-status-badge {
    color: #8a6842;
    border-color: rgba(165, 133, 92, .46);
    background: linear-gradient(180deg, #ffffff 0%, #f3e7d1 45%, #ead8ba 100%);
}

.wf-gormitero-card-content {
    flex: 1 1 auto;
    padding: .28rem .78rem .78rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.wf-gormitero-card-kicker {
    margin: .02rem 0 .12rem;
    color: var(--wf-title-soft);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wf-gormitero-card-title {
    margin: 0;
    min-width: 0;
    min-height: 2.25rem;
    color: var(--wf-title) !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: -.015em;
    text-shadow: var(--wf-heading-shadow);
}

.wf-gormitero-card-divider {
    width: 100%;
    height: 1px;
    margin: .52rem 0 .42rem;
    display: block;
    background: linear-gradient(90deg, transparent 0%, var(--wf-border-soft) 22%, var(--wf-border) 50%, var(--wf-border-soft) 78%, transparent 100%);
}

.wf-gormitero-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .15rem;
}

.wf-gormitero-metric {
    min-width: 0;
    padding: .14rem .06rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.wf-gormitero-metric + .wf-gormitero-metric {
    border-left: 1px solid var(--wf-border-soft);
}

.wf-gormitero-metric-count {
    color: var(--wf-blue-3) !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(.95rem, 1.25vw, 1.18rem);
    font-weight: 800;
    line-height: 1;
}

.wf-gormitero-metric-label {
    margin-top: .12rem;
    color: var(--wf-text-soft);
    font-size: .64rem;
    line-height: 1.1;
    text-transform: lowercase;
}

.wf-gormitero-empty-metrics {
    margin: .3rem 0 0;
    color: var(--wf-text-soft) !important;
    font-size: .82rem;
}




@media (max-width: 575.98px) {
    .wf-gormitero-page {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .wf-gormitero-featured-panel {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .wf-gormitero-card-image-panel {
        min-height: 10.6rem;
    }

    .wf-gormitero-card-image {
        height: 10rem;
    }
}


/* Modo oscuro oficial: solo ajustes de superficie, sin cambiar estructura ni tamaños. */
html[data-theme="dark"] .wf-gormitero-hero,
html[data-theme="dark"] .wf-gormitero-section-title,
html[data-theme="dark"] .wf-gormitero-featured-panel,
html[data-theme="dark"] .wf-gormitero-card {
    background: var(--wf-panel-bg) !important;
}

html[data-theme="dark"] .wf-gormitero-featured-panel {
    background: var(--wf-panel-bg) !important;
}

html[data-theme="dark"] .wf-gormitero-card {
    background: var(--wf-card-bg) !important;
}

html[data-theme="dark"] .wf-gormitero-card::before {
    border-color: rgba(216, 174, 69, .22);
}

html[data-theme="dark"] .wf-gormitero-card-image-panel {
    background:
        radial-gradient(circle at 50% 10%, rgba(126, 199, 255, .18) 0%, rgba(126, 199, 255, 0) 48%),
        linear-gradient(180deg, #1d3045 0%, #111e2c 100%);
}

html[data-theme="dark"] .wf-gormitero-card-image-panel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 72%);
}

html[data-theme="dark"] .wf-gormitero-card-image {
    filter: drop-shadow(0 .65rem 1.05rem rgba(0, 0, 0, .32));
}

html[data-theme="dark"] .wf-gormitero-status-badge,
html[data-theme="dark"] .wf-gormitero-card-completed .wf-gormitero-status-badge {
    color: var(--wf-gold-3);
    border-color: rgba(255, 218, 120, .58);
    background: linear-gradient(180deg, rgba(255, 241, 190, .98) 0%, rgba(216, 174, 69, .86) 100%);
}

html[data-theme="dark"] .wf-gormitero-card-active .wf-gormitero-status-badge {
    color: #0b2417;
    border-color: rgba(142, 230, 170, .48);
    background: linear-gradient(180deg, #c9f6d6 0%, #54c27b 100%);
}

html[data-theme="dark"] .wf-gormitero-card-paused .wf-gormitero-status-badge {
    color: #2c1e10;
    border-color: rgba(241, 211, 165, .42);
    background: linear-gradient(180deg, #f9ead5 0%, #d7b78a 100%);
}

html[data-theme="dark"] .wf-gormitero-card-pending .wf-gormitero-status-badge {
    color: #300e0d;
    border-color: rgba(255, 170, 163, .48);
    background: linear-gradient(180deg, #ffd0cc 0%, #e05f55 100%);
}

/* C02a: cuatro contadores de Pins en dos filas, sin estrechar las etiquetas. */
.wf-gormitero-metrics-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-gormitero-metrics-4 .wf-gormitero-metric:nth-child(3) { border-left: 0; }