/* ==========================================================================
   HH My Account — Rediseño visual (v1.0.3)
   Selector ultra-específico para no romper header/footer de Astra
   ========================================================================== */

:root {
    --hh-radius-sm: 6px;
    --hh-radius-md: 10px;
    --hh-radius-lg: 14px;
    --hh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hh-text:      #1a1a1a;
    --hh-text-2:    #6b7280;
    --hh-text-3:    #9ca3af;
    --hh-border:    #e5e7eb;
    --hh-bg:        #f9fafb;
    --hh-bg-card:   #ffffff;
    --hh-accent:    #1d4ed8;
    --hh-accent-bg: #eff6ff;
}

/* --------------------------------------------------------------------------
   Layout: solo el .woocommerce dentro del article de Mi Cuenta
   Evita romper header/nav de Astra que también usan .woocommerce
   -------------------------------------------------------------------------- */
   

.entry-content .woocommerce {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    grid-template-rows: auto !important;
    gap: 2rem !important;
    align-items: start !important;
    font-family: var(--hh-font) !important;
    writing-mode: horizontal-tb !important;
}

.entry-content .woocommerce-MyAccount-navigation {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.entry-content .woocommerce-MyAccount-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
}

/* --------------------------------------------------------------------------
   Sidebar nav
   -------------------------------------------------------------------------- */
.entry-content .woocommerce-MyAccount-navigation {
    background: var(--hh-bg-card) !important;
    border: 1px solid var(--hh-border) !important;
    border-radius: var(--hh-radius-lg) !important;
    padding: 0.75rem !important;
    position: sticky !important;
    top: 100px !important;
    box-shadow: none !important;
}

.entry-content .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    writing-mode: horizontal-tb !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    writing-mode: horizontal-tb !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: var(--hh-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--hh-text-2) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.15s, color 0.15s !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li a span {
    display: inline !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li a svg {
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--hh-bg) !important;
    color: var(--hh-text) !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li a:hover svg {
    opacity: 0.9 !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.is-active a,
.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    background: var(--hh-accent-bg) !important;
    color: var(--hh-accent) !important;
    font-weight: 500 !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.is-active a svg,
.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a svg {
    opacity: 1 !important;
    stroke: var(--hh-accent) !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: 1px solid var(--hh-border) !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #dc2626 !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a svg {
    stroke: #dc2626 !important;
    opacity: 0.7 !important;
}

.entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.hh-ma-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    writing-mode: horizontal-tb !important;
}

/* Stats */
.hh-ma-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    writing-mode: horizontal-tb !important;
}

.hh-ma-stat {
    background: var(--hh-bg-card) !important;
    border: 1px solid var(--hh-border) !important;
    border-radius: var(--hh-radius-md) !important;
    padding: 1.1rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    writing-mode: horizontal-tb !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.hh-ma-stat__value {
    display: block !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--hh-text) !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    writing-mode: horizontal-tb !important;
}

.hh-ma-stat__label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--hh-text) !important;
    writing-mode: horizontal-tb !important;
    line-height: 1.4 !important;
}

.hh-ma-stat__sub {
    display: block !important;
    font-size: 12px !important;
    color: var(--hh-text-3) !important;
    margin-top: 2px !important;
    writing-mode: horizontal-tb !important;
    line-height: 1.4 !important;
}

/* Pedidos recientes */
.hh-ma-recent {
    background: var(--hh-bg-card) !important;
    border: 1px solid var(--hh-border) !important;
    border-radius: var(--hh-radius-lg) !important;
    padding: 1.25rem 1.5rem !important;
    writing-mode: horizontal-tb !important;
}

.hh-ma-recent__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hh-text) !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    border: none !important;
}

.hh-ma-orders {
    display: flex !important;
    flex-direction: column !important;
}

.hh-ma-order-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--hh-border) !important;
    text-decoration: none !important;
    border-radius: var(--hh-radius-sm) !important;
    writing-mode: horizontal-tb !important;
    transition: background 0.1s !important;
}

.hh-ma-order-row:last-child { border-bottom: none !important; }
.hh-ma-order-row:hover { background: var(--hh-bg) !important; }

.hh-ma-order-row__info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 90px !important;
    writing-mode: horizontal-tb !important;
}

.hh-ma-order-row__id {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hh-text) !important;
}

.hh-ma-order-row__date {
    font-size: 12px !important;
    color: var(--hh-text-3) !important;
    margin-top: 2px !important;
}

.hh-ma-order-row__total {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hh-text) !important;
    text-align: right !important;
}

.hh-ma-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.hh-ma-badge--success { background: #f0fdf4 !important; color: #15803d !important; }
.hh-ma-badge--warning { background: #fffbeb !important; color: #b45309 !important; }
.hh-ma-badge--danger  { background: #fef2f2 !important; color: #b91c1c !important; }
.hh-ma-badge--neutral { background: var(--hh-bg) !important; color: var(--hh-text-2) !important; }

.hh-ma-link-all {
    display: inline-block !important;
    margin-top: 0.85rem !important;
    font-size: 13px !important;
    color: var(--hh-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.hh-ma-link-all:hover { text-decoration: underline !important; }

/* Estado vacío */
.hh-ma-empty {
    background: var(--hh-bg-card) !important;
    border: 1px solid var(--hh-border) !important;
    border-radius: var(--hh-radius-lg) !important;
    padding: 2.5rem 1.5rem !important;
    text-align: center !important;
    writing-mode: horizontal-tb !important;
}

.hh-ma-empty p {
    font-size: 14px !important;
    color: var(--hh-text-2) !important;
    margin: 0 0 1rem !important;
}

.hh-ma-btn {
    display: inline-block !important;
    padding: 9px 20px !important;
    background: var(--hh-accent) !important;
    color: #fff !important;
    border-radius: var(--hh-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
}

.hh-ma-btn:hover { background: #1e40af !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .entry-content .woocommerce {
        grid-template-columns: 1fr !important;
    }
    .entry-content .woocommerce-MyAccount-navigation {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: static !important;
    }
    .entry-content .woocommerce-MyAccount-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    .entry-content .woocommerce-MyAccount-navigation ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .hh-ma-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .hh-ma-stats {
        grid-template-columns: 1fr !important;
    }
}