/*
 * pages.css — Primitivas de estilo para las páginas internas del storefront
 * (carrito, cuenta, compras, direcciones, plantillas, detalle, info, etc.).
 * Comparte los tokens de marca de brand.css y el mismo lenguaje visual que
 * product-card / catalog-toolbar / navbar / paginación: superficies blancas con
 * borde 1px #eceef3 y radio .75rem, sombras azules suaves, pills de radio 999px
 * con fondo --brand-tint, e íconos. Se carga DESPUÉS de home.css (Bootstrap) para
 * pisar sus defaults. No hardcodear hex de marca: usar las variables de brand.css.
 */

/* ===== Encabezado de página (reemplaza el .card-title usado como H1) ===== */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    margin: 1.25rem 0 1.5rem;
}
.page-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-blue);
    line-height: 1.15;
}
.page-title i {
    font-size: 1.35rem;
    color: var(--brand-cyan);
}
.page-subtitle {
    margin: 0;
    font-size: .95rem;
    color: var(--brand-muted);
}
/* Variante alineada a la izquierda con acciones al costado (listados con botón "Agregar") */
.page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1.25rem 0 1.5rem;
    text-align: left;
}
.page-header-row .page-header {
    align-items: flex-start;
    text-align: left;
    margin: 0;
}

/* ===== Panel: superficie de marca para contenido estático (sin lift) ===== */
.panel {
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: .75rem;
    box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
}
.panel-body {
    padding: 1.1rem 1.25rem;
}
/* Título interno de panel */
.panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-ink);
}
.panel-title i {
    color: var(--brand-blue);
}

/* ===== Contenedor de formulario centrado (reemplaza <center> + max-width inline) ===== */
.form-card {
    width: 100%;
    max-width: 34rem;
    margin: 1.5rem auto;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(27, 52, 196, .08);
    padding: 1.5rem;
}
.form-card-wide {
    max-width: 48rem;
}

/* ===== Pill de estado (generaliza .product-stock para estados de pedido) ===== */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    line-height: 1;
}
.status-pill-pending { color: #9a6a00; background: #fdf3dd; }
.status-pill-info    { color: var(--brand-cyan-dark); background: #e2f6fc; }
.status-pill-success { color: #157347; background: #e6f4ec; }
.status-pill-danger  { color: #b02a37; background: #fbeaec; }
.status-pill-muted   { color: var(--brand-muted); background: #eef0f5; }

/* ===== Botón con ícono y label visible (reemplaza icon-only + visually-hidden) ===== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.icon-btn i {
    font-size: .95rem;
}

/* ===== Fila etiqueta / valor (read-outs de Directions/Delete, Account) ===== */
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f1f2f6;
}
.data-row:last-child {
    border-bottom: 0;
}
.data-row-label {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--brand-muted);
}
.data-row-value {
    font-weight: 600;
    color: var(--brand-ink);
    text-align: right;
}

/* ===== Tarjeta de dirección (reemplaza la <table> de ChooseDirection) ===== */
.address-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: .75rem;
    box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.address-card:hover {
    border-color: var(--brand-tint);
    box-shadow: 0 .75rem 1.75rem rgba(27, 52, 196, .12);
    transform: translateY(-2px);
}
.address-card-body {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--brand-ink);
}
.address-card-body i {
    margin-top: .2rem;
    color: var(--brand-blue);
}

/* ===== Contenedor angosto centrado (listados de carrito / compras / etc.) ===== */
.container-narrow {
    max-width: 52rem;
    margin-inline: auto;
}

/* ===== Carrito: fila de ítem ===== */
.cart-line {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.cart-line-media {
    flex-shrink: 0;
}
.cart-line-media img.cart-thumb {
    height: 90px;
    width: 90px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #f1f2f6;
    padding: .25rem;
}
.cart-line-out .cart-thumb {
    opacity: .55;
    filter: grayscale(.4);
}
@media (max-width: 400px) {
    .cart-line-media img.cart-thumb {
        height: 68px;
        width: 68px;
    }
}

/* ===== Wizard de pasos (flujo de armado servo-driver) ===== */
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
}
.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 999px;
    color: var(--brand-muted);
    background: #eef0f5;
    white-space: nowrap;
}
.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #d7dae2;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.wizard-step.is-active {
    color: #fff;
    background: var(--brand-blue);
    box-shadow: 0 .25rem .6rem rgba(27, 52, 196, .28);
}
.wizard-step.is-active .wizard-step-num {
    background: rgba(255, 255, 255, .3);
}
.wizard-step.is-done {
    color: var(--brand-blue);
    background: var(--brand-tint);
}
.wizard-step.is-done .wizard-step-num {
    background: var(--brand-blue);
}

/* ===== Detalle de producto / kit (hero superior) ===== */
.product-detail-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: .75rem;
    box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
}
.product-detail-media img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}
.product-detail-media img.is-out {
    opacity: .5;
    filter: grayscale(.4);
}
.product-detail-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--brand-ink);
    line-height: 1.15;
    margin: .5rem 0 .75rem;
}
.product-detail-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--brand-blue);
    line-height: 1.1;
}
.product-detail-desc {
    color: var(--brand-muted);
    margin-top: 1rem;
}

/* ===== Figura con zoom por CSS (reemplaza onmouseover inline de Info/About) ===== */
.info-figure {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #eceef3;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .25rem .9rem rgba(27, 52, 196, .05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.info-figure img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
    cursor: zoom-in;
}
.info-figure:hover {
    box-shadow: 0 .75rem 1.75rem rgba(27, 52, 196, .12);
}
.info-figure:hover img {
    transform: scale(1.04);
}