/* =========================================================================
   TOKENS.CSS — Overrides globales del sistema visual.
   Cargado después de components.css para poder corregir tokens base sin
   tocar style.css cuando el archivo raíz no es escribible en local.
   ========================================================================= */

:root {
    --color-primary-50:  #f4f7fd;
    --color-primary-100: #e7eefb;
    --color-primary-200: #cddbf6;
    --color-primary-300: #b8ccf2;
    --color-primary-400: #9bb8ee;
    --color-primary-500: #6f91d8;
    --color-primary-600: #5f84cf;
    --color-primary-700: #4f73be;
    --color-primary-800: #3f5f9c;
    --color-primary-900: #314c7e;
}

.imp-btn--primary,
.imp-btn--outline,
.woocommerce a.button:not(.disabled),
.woocommerce button.button:not(:disabled):not(.disabled),
.woocommerce input.button:not(:disabled):not(.disabled),
.woocommerce #respond input#submit:not(:disabled):not(.disabled) {
    color: #ffffff !important;
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 18px 30px -18px rgb(111 145 216 / 0.75);
}

.imp-btn--primary:hover,
.imp-btn--outline:hover,
.woocommerce a.button:not(.disabled):hover,
.woocommerce button.button:not(:disabled):not(.disabled):hover,
.woocommerce input.button:not(:disabled):not(.disabled):hover,
.woocommerce #respond input#submit:not(:disabled):not(.disabled):hover {
    color: #ffffff !important;
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

.imp-btn--primary:active,
.imp-btn--outline:active,
.woocommerce a.button:not(.disabled):active,
.woocommerce button.button:not(:disabled):not(.disabled):active,
.woocommerce input.button:not(:disabled):not(.disabled):active,
.woocommerce #respond input#submit:not(:disabled):not(.disabled):active {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
}

.imp-btn--secondary[aria-disabled="true"],
.imp-btn--secondary:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button.disabled {
    color: var(--color-neutral-500) !important;
    background-color: var(--color-neutral-100) !important;
    border-color: var(--color-neutral-200) !important;
    box-shadow: none;
}

.imp-card-product {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.imp-card-product:hover {
    box-shadow: var(--shadow-md);
    transform: none;
}

.imp-card-product__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #f7f7f7;
}

.imp-card-product__img {
    width: 100%;
    height: 100%;
    padding: var(--space-6);
    object-fit: contain;
    background-color: #f7f7f7;
}

.imp-card-product__body {
    gap: var(--space-5);
    padding: var(--space-5);
    min-height: 150px;
}

.imp-card-product__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    color: #ffffff;
    background-color: var(--color-danger);
    border-radius: var(--radius-sm);
    pointer-events: none;
    z-index: 1;
}

.imp-card-product__title {
    min-height: 2.6em;
    font-size: var(--text-base);
    line-height: 1.3;
    text-transform: uppercase;
}

.imp-card-product__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
}

.imp-card-product__price {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-lg);
    color: var(--color-primary-500);
    line-height: 1.25;
}

.imp-card-product__price del {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-neutral-400);
    margin-right: var(--space-1);
}

.imp-card-product__price ins {
    color: var(--color-danger);
    text-decoration: none;
}

.imp-card-product__view {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.imp-card-product__view:hover {
    color: var(--color-primary-600);
}