/* ============================================================
   MarketBox.Digital · marketbox.css
   CSS del proyecto sobre BoxUI. Se carga SIEMPRE después de
   boxui.css (y boxui-public.css donde aplique).
   NUNCA se editan los archivos de boxui/ ni boxui-public/.
   Este archivo queda fuera de capas: gana a todo BoxUI por
   defecto, sin necesidad de !important.
   ============================================================ */

/* ============================================================
   1 · TOKENS DE MARCA
   Cambiar la identidad visual es tocar --box-brand-500. Las
   tiendas y paneles lo sobreescriben desde PHP (por tienda).
   ============================================================ */
@layer box.tokens {

:root {
    --box-brand-500: #1095c1;
    /* Marca de WhatsApp (no existe en BoxUI; tono de marca del proyecto) */
    --mb-whatsapp: #25d366;
}

} /* @layer box.tokens */

/* ============================================================
   3 · COMPAT FA6 → FA4  (TEMPORAL)
   box-ui.js inyecta toasts con clases de FontAwesome 6
   (`fas fa-circle-check`). MarketBox sirve FA4 local, así que
   aliaseamos los pocos glifos que usa el framework.
   Retirar al migrar a FA6.
   ============================================================ */
.fas,
.far,
.fab {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fas.fa-circle-check:before         { content: "\f058"; } /* fa-check-circle   */
.fas.fa-circle-exclamation:before   { content: "\f06a"; } /* fa-exclamation-circle */
.fas.fa-triangle-exclamation:before { content: "\f071"; } /* fa-exclamation-triangle */
.fas.fa-circle-info:before          { content: "\f05a"; } /* fa-info-circle    */

/* ============================================================
   4 · AJUSTES DEL PROYECTO (fuera de capas: ganan a BoxUI)
   ============================================================ */

/* Landing: logo del footer público */
.box-footer-brand-col .footer-logo { max-height: 40px; width: auto; }

/* Cinta de etiquetas (contexto public): el framework ya trae la píldora
   base de .box-marquee-item; solo pintamos la etiqueta activa. */
.box-marquee-item.is-active {
    background: var(--box-brand);
    color: var(--box-text-on-brand);
    border-color: var(--box-brand);
}

/* Complementario: fila de tabla vacía centrada */
.box-empty-text {
    text-align: center;
    color: var(--box-text-muted);
    padding: 1.25rem;
}

/* `.container` conserva el ancho responsive (las vistas de tienda lo usan).
   No afecta a `.container-fluid` ni a `.box-container`. */
.container {
    --box-container-max: 100%;
    padding-inline: 1rem;
}
@media (min-width: 576px)  { .container { --box-container-max: 510px; } }
@media (min-width: 768px)  { .container { --box-container-max: 700px; } }
@media (min-width: 1024px) { .container { --box-container-max: 950px; } }
@media (min-width: 1280px) { .container { --box-container-max: 1200px; } }
@media (min-width: 1536px) { .container { --box-container-max: 1450px; } }

/* ============================================================
   PANEL DE ADMINISTRACIÓN · shell
   ============================================================ */
.admin-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.3rem 1rem;
    background: var(--box-surface);
    border-bottom: var(--box-border-width) solid var(--box-border);
    position: sticky;
    top: 0;
    z-index: var(--box-z-sticky);
}
.admin-topbar .logo-img {
    height: 42px;
    width: auto;
}
.admin-topbar .admin-badge {
    margin-inline-start: auto;
    color: var(--box-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.admin-topbar #admin-menu-toggle {
    /* El hamburguesa solo aplica en móvil: BoxUI lo oculta a partir de 992px */
}

/* Conmutador de modo de interfaz (PC / Touch / Compacto) en la barra superior */
.admin-topbar .box-ui-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    background: var(--box-surface-sunken);
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius-sm);
}
.admin-topbar .box-ui-mode-switch .box-btn {
    height: 28px;
    min-width: 30px;
    padding-inline: 0.45rem;
    font-size: 0.8rem;
    background: transparent;
    color: var(--box-text-muted);
    border: none;
    border-radius: var(--box-radius-xs);
}
.admin-topbar .box-ui-mode-switch .box-btn:hover {
    background: var(--box-surface-hover);
    color: var(--box-text);
}
.admin-topbar .box-ui-mode-switch .box-btn.is-active {
    background: var(--box-brand);
    color: var(--box-text-on-brand);
}
/* El encabezado se muestra en todas las pantallas (PC incluido) */

/* Navegación vertical del panel: ajustes de proyecto sobre .box-nav-vertical */

/* Cabecera del sidebar del panel (título + switch modo simple/avanzado) */
.admin-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.admin-sidebar-head > strong {
    color: var(--box-text);
}
.admin-mode-toggle {
    display: flex;
    align-items: center;
    background: var(--box-surface-sunken);
    padding: 4px 10px;
    border-radius: var(--box-radius-pill);
    border: var(--box-border-width) solid var(--box-border);
    cursor: pointer;
}
.admin-mode-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}
.admin-mode-toggle input[type="checkbox"] {
    margin: 0;
}

/* Modificadores de ítems del nav del panel */
.box-nav-vertical a.is-danger { color: var(--box-danger-solid); }
.box-nav-vertical a.is-danger:hover { background: var(--box-danger-bg); color: var(--box-danger-fg); }
.box-nav-vertical a.is-superadmin {
    background: color-mix(in srgb, var(--box-brand) 12%, transparent);
    color: var(--box-brand);
    font-weight: bold;
}

/* Tooltips de acciones de tabla: dentro de .box-actions el tooltip del último
   botón se alinea a la derecha para no desbordar el wrapper (mismo criterio
   que el framework aplica cuando el botón es hijo directo de la celda). */
td .box-actions .box-table-action-btn:last-child[data-box-tip]::after {
    left: auto;
    right: 0;
    translate: 0 0;
}

/* Botón flotante "Ver producto" (.box-product-action): el color del icono
   sobre el acento lo decide --box-text-on-brand, que la tienda deriva de la
   luminancia real de su marca (header.php). Marcas oscuras → blanco;
   marcas claras → oscuro. Sin override fijo: un blanco forzado se perdería
   sobre una marca clara. */

/* Grilla de productos: tarjetas más angostas para mostrar más elementos por fila */
[data-ui-context="public"] .box-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* Tarjeta de producto: la regla genérica article{...} de BoxUI mete 1rem
   de padding y 1rem de margin-bottom. Aquí la imagen debe llegar al borde
   de la tarjeta y la separación imagen/texto la controla .box-product-body,
   así se evita el hueco doble al final (padding del body + padding de la
   tarjeta). */
[data-ui-context="public"] .box-product-card {
    padding: 0;
    margin-bottom: 0;
    gap: 0;
}

[data-ui-context="public"] .box-product-body {
    flex: 1;
    padding: 0.9rem 1rem 0.8rem;
}

/* ============================================================
   LANDING · Pantalla de elección ("¿Qué deseas hacer hoy?")
   ------------------------------------------------------------
   Dos tarjetas (Comprar / Vender) que se acomodan a 1 columna en
   móvil y 2 columnas en tablet y PC.
   ============================================================ */
[data-ui-context="public"] .box-choice .box-section-head {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

[data-ui-context="public"] .box-choice .box-choice-grid {
    max-width: 960px;
    margin-inline: auto;
    align-items: stretch;
}

[data-ui-context="public"] .box-choice .box-choice-grid .box-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[data-ui-context="public"] .box-choice .box-choice-grid .box-card > .box-plan-features {
    margin-bottom: 1rem;
}

/* En 2 columnas (tablet/PC) el botón queda fijo abajo gracias a
   margin-top:auto sobre el footer de la tarjeta */
[data-ui-context="public"] .box-choice .box-card > footer {
    margin-top: auto;
}

@media (max-width: 767px) {
    [data-ui-context="public"] .box-choice {
        padding-block: clamp(2rem, 6vw, 3.5rem);
    }

    [data-ui-context="public"] .box-choice .box-choice-grid {
        max-width: 460px;
    }

    [data-ui-context="public"] .box-choice .box-card {
        text-align: center;
        align-items: center;
    }

    [data-ui-context="public"] .box-choice .box-plan-features {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

@media (min-width: 768px) {
    [data-ui-context="public"] .box-choice .box-choice-grid .box-card {
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }
}

/* ============================================================
   ENLACES: SIN SUBRAYADO AL PASAR EL RATÓN
   ------------------------------------------------------------
   Decisión de producto: el subrayado en :hover ensucia la lectura
   en la tienda. BoxUI lo aplica desde cuatro sitios distintos
   (core 03-typography, public 22-typography, y .box-breadcrumbs y
   .box-link de 26-ecommerce), así que se anulan los cuatro aquí.

   El enlace sigue siendo distinguible al apuntarlo por el cambio de
   color, y el subrayado se conserva en :focus-visible para que la
   navegación por teclado no pierda la señal.

   No se toca .box-announce: ahí el subrayado es permanente y
   deliberado (aviso sobre fondo de acento), no un estado de hover.
   ============================================================ */
a:hover,
[role="link"]:hover,
[data-ui-context="public"] main a:hover,
[data-ui-context="public"] .box-breadcrumbs a:hover,
[data-ui-context="public"] .box-link:hover {
    text-decoration: none;
}

a:focus-visible,
[data-ui-context="public"] main a:focus-visible,
[data-ui-context="public"] .box-breadcrumbs a:focus-visible,
[data-ui-context="public"] .box-link:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   ACCIONES DE FILA EN CONTEXTO PÚBLICO
   ------------------------------------------------------------
   .box-table-action-btn es un componente del núcleo (capa
   box.components) y se define como botón fantasma. En la tienda,
   la regla de botones de boxui-public (capa box.public, posterior)
   alcanza a todo <button> y le impone fondo de acento, padding
   0.75/1.5rem y min-height de control: el botón de eliminar del
   carrito salía como un cuadrado sólido de marca.

   Se restituyen aquí las variables y la caja del componente. El
   proyecto va fuera de capas, así que gana sin !important.
   ============================================================ */
[data-ui-context="public"] .box-table-action-btn {
    --_bg: transparent;
    --_fg: var(--box-text-muted);
    --_bd: transparent;
    --_bg-hover: var(--box-surface-hover);
    gap: 0;
    width: var(--box-action-h);
    height: var(--box-action-h);
    min-height: 0;
    padding: 0;
    font-weight: 400;
    border-radius: var(--box-radius-xs);
    box-shadow: none;
}
[data-ui-context="public"] .box-table-action-btn:hover {
    color: var(--box-brand);
    background: var(--box-surface-hover);
    border-color: transparent;
}
[data-ui-context="public"] .box-table-action-btn.is-danger:hover {
    color: var(--box-danger-fg);
    background: var(--box-danger-bg);
    border-color: transparent;
}

/* === Insignias de confianza (login) === */
.box-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--box-border-subtle);
}
.box-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--box-text-sm);
    color: var(--box-text-muted);
    white-space: nowrap;
}
.box-trust-badge i {
    font-size: 1rem;
}
.box-trust-badge .fa-lock { color: var(--box-amber-500); }
.box-trust-badge .fa-shield { color: var(--box-brand); }
.box-trust-badge .fa-check-circle { color: var(--box-success-solid); }

/* === Botón "Iniciar sesión con correo y contraseña" (landing) ===
   Más compacto en móvil: menos padding, tipografía menor y el sufijo
   "con correo y contraseña" se oculta para que no desborde la tarjeta. */
@media (max-width: 640px) {
    .btn-email-login {
        min-height: var(--box-control-h-sm);
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }
    .btn-email-login-full {
        display: none;
    }
}

/* === Botones superiores de la landing (Iniciar Sesión / Comenzar) ===
   En móvil el nav conserva estos CTA junto al hamburguesa: se compactan
   para no estrechar demasiado la barra. */
@media (max-width: 640px) {
    [data-ui-context="public"] .box-nav-actions .box-btn {
        min-height: var(--box-control-h-sm);
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* ============================================================
   PREGUNTAS FRECUENTES (landing)
   Acordeón nativo con <details>/<summary>: sin JS, accesible por
   teclado y —lo importante para SEO— el texto de la respuesta
   está en el HTML aunque el bloque se muestre plegado, que es lo
   que leen el buscador y los asistentes de IA.
   ============================================================ */
[data-ui-context="public"] .box-faq {
    display: grid;
    gap: 0.75rem;
}

[data-ui-context="public"] .box-faq-item {
    padding: 0;
    overflow: hidden;
}

[data-ui-context="public"] .box-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    transition: background var(--box-dur, 160ms) ease;
}

/* El triángulo por defecto del navegador no se puede posicionar;
   se sustituye por un signo propio alineado a la derecha. */
[data-ui-context="public"] .box-faq-item > summary::-webkit-details-marker {
    display: none;
}

[data-ui-context="public"] .box-faq-item > summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    color: var(--box-brand);
    transition: transform 180ms ease;
}

[data-ui-context="public"] .box-faq-item[open] > summary::after {
    content: "−";
    transform: rotate(180deg);
}

[data-ui-context="public"] .box-faq-item > summary:hover {
    background: var(--box-surface-2, rgba(0, 0, 0, 0.03));
}

[data-ui-context="public"] .box-faq-item > summary h3 {
    margin: 0;
    text-align: left;
}

[data-ui-context="public"] .box-faq-item > p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--box-text-muted, inherit);
}

@media (prefers-reduced-motion: reduce) {
    [data-ui-context="public"] .box-faq-item > summary::after {
        transition: none;
    }
}