/* ==========================================================================
   Bob Market · sistema visual del sitio
   Extrae los tokens de la portada y los aplica a todo el front-end
   (directorio, fichas, Mi ficha, Mi Cuenta, blog, landings y legales).
   ========================================================================== */

:root {
    --bm-bg: #f7f8f5;
    --bm-surface: #ffffff;
    --bm-ink: #080b10;
    --bm-ink-soft: #1f2a25;
    --bm-muted: #73817a;
    --bm-line: rgba(16, 27, 27, 0.14);
    --bm-line-strong: rgba(16, 27, 27, 0.28);
    --bm-accent: #ffc400;
    --bm-accent-ink: #080b10;
    --bm-neutral: #55555e;
    --bm-ok: #0f7a4d;
    --bm-warn: #b45309;
    --bm-danger: #b42318;
    --bm-radius: 16px;
    --bm-radius-sm: 10px;
    --bm-radius-pill: 999px;
    --bm-shadow: 0 10px 30px rgba(8, 11, 16, 0.06);
    --bm-shadow-soft: 0 2px 8px rgba(8, 11, 16, 0.05);
    --bm-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bm-font-head: "Space Grotesk", "Manrope", system-ui, sans-serif;
    --bm-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Base ---------------------------------------------------------------- */

html {
    background-color: var(--bm-bg);
}

body,
body.custom-background,
.site,
#page,
#content,
.grid-container,
.separate-containers .site-main,
.inside-article,
.entry-content {
    background-color: var(--bm-bg);
    color: var(--bm-ink);
    font-family: var(--bm-font-body);
    -webkit-font-smoothing: antialiased;
}

body {
    font-size: 17px;
    line-height: 1.6;
}

body.page .inside-article,
body.page .entry-content,
body.page .site-main {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.entry-content,
.entry-summary,
.wp-block-group,
.wp-block-columns {
    color: var(--bm-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.site-title,
.woocommerce h2,
.bm-provider__name,
.bm-directory__title,
.bm-home-providers__title,
.bm-editor__title {
    font-family: var(--bm-font-head);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bm-ink);
}

h1, .entry-title { line-height: 1.08; }
h2 { line-height: 1.15; }
h3, h4, h5, h6 { line-height: 1.25; }

p, li, dd, dt, td, th, label, blockquote {
    font-family: var(--bm-font-body);
}

small,
.bm-eyebrow,
.bm-provider__eyebrow,
.bm-provider__meta-label {
    font-family: var(--bm-font-mono);
    letter-spacing: 0.04em;
}

a {
    color: var(--bm-ink);
    text-decoration-color: var(--bm-line-strong);
    text-underline-offset: 3px;
}

a:hover,
a:focus {
    color: var(--bm-ink-soft);
    text-decoration-color: var(--bm-ink);
}

.entry-content a:not(.button):not(.wp-block-button__link):not([class*="bm-"]):hover {
    color: var(--bm-ink-soft);
}

hr,
.wp-block-separator {
    border-color: var(--bm-line);
}

/* --- Cabecera y navegación ---------------------------------------------- */

.site-header,
.main-navigation,
.inside-navigation {
    border-color: var(--bm-line);
}

.main-navigation a,
.main-navigation .menu-item > a,
.site-header .site-title a,
.nav-search a {
    color: var(--bm-ink);
    font-family: var(--bm-font-body);
    font-weight: 600;
    font-size: 14px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--bm-ink);
    background-color: rgba(8, 11, 16, 0.06);
    border-radius: var(--bm-radius-pill);
}

.menu-toggle,
.menu-toggle:hover {
    background-color: var(--bm-ink);
    color: var(--bm-bg);
    border-radius: var(--bm-radius-pill);
}

.site-info,
.credit {
    background-color: var(--bm-ink);
    color: var(--bm-muted);
    font-family: var(--bm-font-body);
    font-size: 13px;
}

.site-info a { color: var(--bm-bg); }

/* --- Botones ------------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
a.button,
.wp-block-button__link,
.wp-element-button,
.gb-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.bm-editor button,
.bm-editor__save,
.bm-provider__cta a,
.bm-home-providers__cta {
    font-family: var(--bm-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--bm-bg);
    background-color: var(--bm-ink);
    border: 1px solid var(--bm-ink);
    border-radius: var(--bm-radius-pill);
    padding: 13px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.bm-editor button:hover {
    background-color: var(--bm-accent);
    border-color: var(--bm-accent);
    color: var(--bm-accent-ink);
}

.button:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(255, 196, 0, 0.55);
    outline-offset: 2px;
}

.button.secondary,
.button-light,
.bm-provider__cta a.is-secondary {
    background-color: var(--bm-surface);
    color: var(--bm-ink);
    border-color: var(--bm-line-strong);
}

.button.secondary:hover,
.bm-provider__cta a.is-secondary:hover {
    background-color: rgba(8, 11, 16, 0.06);
    color: var(--bm-ink);
    border-color: var(--bm-ink);
}

.button-link-delete,
button.delete,
.bm-danger {
    background-color: transparent;
    color: var(--bm-danger);
    border-color: transparent;
}

.button-link-delete:hover,
.bm-danger:hover {
    background-color: var(--bm-danger);
    border-color: var(--bm-danger);
    color: #fff;
}

/* Chips y etiquetas tipo píldora */
.bm-chip,
.bm-directory__chip,
.bm-home-providers__chip,
.bm-provider__badge,
.wp-block-tag-cloud a,
.tagcloud a {
    background-color: var(--bm-surface);
    color: var(--bm-ink);
    border: 1px solid var(--bm-line);
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
}

.bm-chip:hover,
.bm-directory__chip:hover,
.bm-home-providers__chip:hover,
.tagcloud a:hover {
    background-color: var(--bm-ink);
    color: var(--bm-bg);
    border-color: var(--bm-ink);
    text-decoration: none;
}

.bm-chip.is-active,
.bm-directory__chip.is-active,
.bm-home-providers__chip.is-active {
    background-color: var(--bm-accent);
    border-color: var(--bm-accent);
    color: var(--bm-accent-ink);
}

/* --- Formularios --------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.bm-editor input,
.bm-editor select,
.bm-editor textarea {
    font-family: var(--bm-font-body);
    font-size: 15px;
    color: var(--bm-ink);
    background-color: var(--bm-surface);
    border: 1px solid var(--bm-line-strong);
    border-radius: var(--bm-radius-sm);
    padding: 12px 14px;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--bm-ink);
    box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
    outline: none;
}

::placeholder { color: var(--bm-muted); opacity: 1; }

label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bm-ink);
}

/* --- Tarjetas, tablas y avisos ------------------------------------------ */

.inside-article,
.wp-block-group.has-background,
.bm-provider__card,
.bm-directory__card,
.bm-home-providers__card,
.bm-account-card,
.bm-editor__panel,
.bm-provider__related-card {
    background-color: var(--bm-surface);
    border: 1px solid var(--bm-line);
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow-soft);
}

table,
.wp-block-table,
.woocommerce table.shop_table {
    border-color: var(--bm-line);
    font-family: var(--bm-font-body);
    font-size: 15px;
}

table th,
.wp-block-table th,
.woocommerce table.shop_table th {
    background-color: rgba(8, 11, 16, 0.04);
    color: var(--bm-ink);
    font-family: var(--bm-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

table td,
table th,
.wp-block-table td,
.wp-block-table th {
    border-color: var(--bm-line);
}

blockquote,
.wp-block-quote {
    border-left: 3px solid var(--bm-accent);
    background-color: var(--bm-surface);
    border-radius: 0 var(--bm-radius-sm) var(--bm-radius-sm) 0;
    padding: 14px 18px;
    color: var(--bm-ink-soft);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.bm-editor__notice,
.bm-notice {
    border-radius: var(--bm-radius-sm);
    border-top: 2px solid var(--bm-accent);
    background-color: var(--bm-surface);
    color: var(--bm-ink);
    font-family: var(--bm-font-body);
}

.woocommerce-error { border-top-color: var(--bm-danger); }
.woocommerce-info { border-top-color: var(--bm-ink); }

/* --- Mi Cuenta (WooCommerce) -------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: inline-block;
    padding: 9px 14px;
    border-radius: var(--bm-radius-pill);
    border: 1px solid var(--bm-line);
    background-color: var(--bm-surface);
    color: var(--bm-ink);
    font-family: var(--bm-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--bm-ink);
    border-color: var(--bm-ink);
    color: var(--bm-bg);
}

.woocommerce-MyAccount-content {
    background-color: var(--bm-surface);
    border: 1px solid var(--bm-line);
    border-radius: var(--bm-radius);
    padding: 22px;
}

/* --- Estrellas y reputación --------------------------------------------- */

.bm-stars__fill,
.bm-provider__stars .bm-stars__fill,
.bm-directory__rating .bm-stars__fill,
.bm-home-providers__rating .bm-stars__fill {
    color: var(--bm-accent);
}

/* --- Portada ------------------------------------------------------------- */

.bm-home-providers {
    background-color: var(--bm-bg);
    border-top: 1px solid var(--bm-line);
}

.bm-home-providers__title,
.bm-home-providers__card-name {
    font-family: var(--bm-font-head);
    color: var(--bm-ink);
}

.bm-home-providers__card:hover {
    border-color: var(--bm-line-strong);
    box-shadow: var(--bm-shadow);
}

.bm-home-providers__badge,
.bm-provider__badge.is-verified {
    background-color: rgba(15, 122, 77, 0.1);
    color: var(--bm-ok);
    border-color: rgba(15, 122, 77, 0.25);
}

.bm-home-providers__more,
.bm-provider__related a {
    color: var(--bm-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Ficha de proveedor y directorio ------------------------------------ */

.bm-provider,
.bm-directory {
    background-color: var(--bm-bg);
    color: var(--bm-ink);
}

.bm-provider__trust,
.bm-provider__summary,
.bm-provider__steps,
.bm-provider__gallery figure,
.bm-provider__service {
    background-color: var(--bm-surface);
    border-color: var(--bm-line);
    border-radius: var(--bm-radius);
}

.bm-provider__cta a,
.bm-directory__cta a {
    border-radius: var(--bm-radius-pill);
}

.bm-provider__cta,
.bm-directory__cta {
    border-radius: var(--bm-radius-pill);
    background-color: var(--bm-ink);
    color: var(--bm-bg);
    border-color: var(--bm-ink);
    font-weight: 700;
}

.bm-provider__cta:hover,
.bm-directory__cta:hover {
    background-color: var(--bm-accent);
    border-color: var(--bm-accent);
    color: var(--bm-accent-ink);
}

/* Enlace de tarjeta del directorio: una píldora pequeña, no una barra */
.bm-directory__cta {
    display: inline-flex;
    align-self: flex-start;
    justify-self: start;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    padding: 10px 16px;
    margin-top: 8px;
    font-family: var(--bm-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--bm-bg);
    background-color: var(--bm-ink);
    border-radius: var(--bm-radius-pill);
    text-decoration: none;
}

.bm-directory__cta:hover {
    background-color: var(--bm-accent);
    color: var(--bm-accent-ink);
}

.bm-directory__link,
.bm-directory__link:hover {
    text-decoration: none;
    color: inherit;
}

.bm-provider__secondary,
.bm-provider__share,
.bm-provider__step a {
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-weight: 700;
}

.bm-provider__avatar,
.bm-directory__avatar {
    border-color: var(--bm-line);
    background-color: var(--bm-surface);
}

/* --- Editor de ficha ----------------------------------------------------- */

.bm-editor {
    --bm-editor-ink: var(--bm-ink);
    color: var(--bm-ink);
}

.bm-editor__panel {
    border-radius: var(--bm-radius);
}

.bm-editor__tabs button,
.bm-editor__step {
    border-radius: var(--bm-radius-pill);
}

.bm-editor__tabs button.is-active {
    background-color: var(--bm-ink);
    color: var(--bm-bg);
    border-color: var(--bm-ink);
}

/* --- Landing de proveedores (bmp-*) ------------------------------------- */

/* La landing trae su propio <style> en el contenido: se necesita más especificidad. */
body .bmp-blue { color: var(--bm-ink); }
body .bmp-h1 .bmp-blue { color: var(--bm-ink); }
body .bmp-dot { background-color: var(--bm-ink); }
body .bmp-price-tag {
    background-color: rgba(255, 196, 0, 0.18);
    color: var(--bm-ink);
    border-radius: var(--bm-radius-pill);
}
body .bmp-btn,
body .bmp-btn--primary {
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-weight: 700;
}
body .bmp-btn--ghost {
    border-radius: var(--bm-radius-pill);
    border-color: var(--bm-line-strong);
}
body .bmp-eyebrow {
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-mono);
    letter-spacing: 0.08em;
}

/* --- Blog y artículos ---------------------------------------------------- */

.entry-meta,
.posted-on,
.cat-links,
.tags-links,
.author,
.comments-link {
    color: var(--bm-muted);
    font-family: var(--bm-font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 1.6em;
}

/* --- Paginación ---------------------------------------------------------- */

.paging-navigation,
.page-links,
.nav-links,
.woocommerce-pagination {
    font-family: var(--bm-font-body);
}

.paging-navigation a,
.page-numbers,
.nav-links a {
    border: 1px solid var(--bm-line);
    border-radius: var(--bm-radius-pill);
    padding: 8px 14px;
    color: var(--bm-ink);
    text-decoration: none;
    background-color: var(--bm-surface);
}

.page-numbers.current,
.paging-navigation a:hover {
    background-color: var(--bm-ink);
    border-color: var(--bm-ink);
    color: var(--bm-bg);
}

/* --- Detalles ------------------------------------------------------------ */

::selection {
    background-color: var(--bm-accent);
    color: var(--bm-accent-ink);
}

img,
iframe,
video {
    max-width: 100%;
}

.bm-site-footer-note {
    font-family: var(--bm-font-mono);
    font-size: 12px;
    color: var(--bm-muted);
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    h1 { font-size: clamp(30px, 8vw, 40px); }
    h2 { font-size: clamp(24px, 6vw, 32px); }
    .woocommerce-MyAccount-content { padding: 16px; }
    button, .button, .wp-block-button__link { width: 100%; text-align: center; }
    .bm-home-providers__cta,
    .bm-provider__cta a { width: auto; }
}