/*
Theme Name: Bernal Fintech
Theme URI: https://bernal-fintech.com
Author: Bernal Fintech
Description: Theme propio de bernal-fintech.com — plataforma de análisis financiero. Home por contenedores de herramientas, header con ticker de mercados y buscador de empresas, tokens de diseño --bf-* globales.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: bftech
*/

/* ── Roboto auto-hospedada (spec §5.2: sin Google Fonts CDN) ── */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/roboto-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/roboto-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/roboto-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/roboto-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+A720-A7FF;
}

/* ═══════════════ TOKENS GLOBALES (design-system.md + spec §5.1) ═══════════════
   Fuente única de verdad de los --bf-*. Los plugins migran gradualmente a var(). */
:root {
  --bf-primary:    #026580;
  --bf-primary-50: rgba(2, 101, 128, 0.50);
  --bf-primary-10: rgba(2, 101, 128, 0.10);
  --bf-black:      #000000;
  --bf-black-soft: #333333;
  --bf-white:      #ffffff;
  --bf-gray-100:   #f9f9f9;
  --bf-gray-200:   #e9ecef;
  --bf-gray-300:   #ddd;
  --bf-gray-500:   #888888;
  --bf-gray-600:   #6c757d;
  --bf-gray-700:   #444444;
  --bf-buy:        #27AE60;
  --bf-sell:       #E74C3C;
  --bf-hold:       #F39C12;
  --bf-primary-dark: #014b5f; /* hover del azul corporativo */
  /* Tokens nuevos (spec §5 mejora 1) */
  --bf-font:       'Roboto', sans-serif;
  --bf-space-1: 4px; --bf-space-2: 8px; --bf-space-3: 16px;
  --bf-space-4: 24px; --bf-space-5: 40px;
  --bf-radius:     8px;
  --bf-shadow:     0 1px 3px rgba(0, 0, 0, 0.08);
  --bf-container:  1400px;
  --bf-reading:    720px;
}

/* ═══════════════ BASE ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bf-font);
  font-size: 16px; line-height: 1.6;
  color: var(--bf-black-soft);
  background: var(--bf-white);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--bf-primary); }
a:hover { color: var(--bf-primary-dark); }
h1, h2, h3, h4 { color: var(--bf-black); line-height: 1.25; margin: 0 0 var(--bf-space-3); }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; word-wrap: normal !important;
}
.skip-link:focus {
  position: fixed !important; top: 8px; left: 8px; z-index: 100000;
  width: auto; height: auto; clip-path: none;
  padding: 10px 16px; background: var(--bf-primary); color: #fff;
}

.bft-container { max-width: var(--bf-container); margin: 0 auto; padding: 0 var(--bf-space-3); }
.bft-reading   { max-width: var(--bf-reading);   margin: 0 auto; padding: 0 var(--bf-space-3); }

/* ═══════════════ TICKER ═══════════════ */
.bft-ticker { background: #0b0b0b; overflow-x: auto; scrollbar-width: none; } /* fondo propio del ticker, sin token a propósito */
.bft-ticker::-webkit-scrollbar { display: none; }

/* ═══════════════ HEADER ═══════════════ */
.bft-header {
  background: var(--bf-white);
  border-bottom: 1px solid var(--bf-gray-200);
  position: sticky; top: 0; z-index: 9999;
}
.bft-header-inner {
  max-width: var(--bf-container); margin: 0 auto;
  display: flex; align-items: center; gap: var(--bf-space-3);
  padding: var(--bf-space-2) var(--bf-space-3);
}
.bft-brand { flex-shrink: 0; display: flex; align-items: center; }
.bft-brand img { max-height: 40px; width: auto; }
.bft-brand-text {
  font-size: 1.25rem; font-weight: 700; color: var(--bf-primary);
  text-decoration: none; letter-spacing: 0.02em;
}
.bft-header-search { width: 340px; flex-shrink: 1; position: relative; }
.bft-header-search input[type="search"] {
  width: 100%; padding: 8px 12px;
  font: inherit; font-size: 0.9rem;
  border: 1px solid var(--bf-gray-300); border-radius: var(--bf-radius);
  background: var(--bf-gray-100);
}
.bft-header-search input[type="search"]:focus {
  outline: none; border-color: var(--bf-primary); background: #fff;
}
.bft-nav { flex: 1 1 auto; min-width: 0; }
.bft-menu { list-style: none; display: flex; gap: var(--bf-space-4); margin: 0; padding: 0; }
.bft-menu a {
  color: var(--bf-black-soft); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
}
.bft-menu a:hover, .bft-menu .current-menu-item > a { color: var(--bf-primary); }
.bft-header-actions { display: flex; align-items: center; gap: var(--bf-space-3); margin-left: auto; }
/* Switcher de idioma con bandera (dropdown propio; enlaces reales, ver header.php) */
.bft-lang { position: relative; flex-shrink: 0; }
.bft-lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--bf-gray-300); border-radius: var(--bf-radius);
  padding: 7px 10px; font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.bft-lang-btn:hover, .bft-lang.is-open .bft-lang-btn { border-color: var(--bf-primary); }
.bft-lang-flag { width: 18px; height: auto; display: block; border-radius: 2px; }
.bft-lang-caret { font-size: 0.6rem; color: var(--bf-gray-600); }
.bft-lang-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 10000;
  list-style: none; margin: 0; padding: 4px; min-width: 150px;
  background: var(--bf-white); border: 1px solid var(--bf-gray-200);
  border-radius: var(--bf-radius); box-shadow: var(--bf-shadow);
}
.bft-lang.is-open .bft-lang-menu { display: block; }
.bft-lang-menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  color: var(--bf-black-soft); text-decoration: none; font-size: 0.9rem;
  border-radius: 4px; white-space: nowrap;
}
.bft-lang-menu a:hover { background: var(--bf-gray-100); color: var(--bf-primary); }
.bft-cta {
  background: var(--bf-primary); color: #fff !important;
  padding: 8px 18px; border-radius: var(--bf-radius);
  font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.bft-cta:hover { background: var(--bf-primary-dark); }
.bft-burger {
  display: none; background: none; border: 1px solid var(--bf-gray-300);
  border-radius: 4px; font-size: 1.3rem; padding: 4px 10px; cursor: pointer;
}

/* ═══════════════ HOME: FILAS Y SLOTS (spec §3) ═══════════════ */
.bft-home { max-width: var(--bf-container); margin: 0 auto; padding: var(--bf-space-3); }
.bft-row { display: grid; gap: var(--bf-space-3); margin-bottom: var(--bf-space-3); }
.bft-row-50-50 { grid-template-columns: 1fr 1fr; }
.bft-row-full  { grid-template-columns: 1fr; }
.bft-slot {
  background: var(--bf-gray-100);
  border: 1px solid var(--bf-gray-200);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow);
  padding: var(--bf-space-3);
  min-width: 0; /* los charts no desbordan el grid */
}
.bft-slot-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bf-space-2); margin-bottom: var(--bf-space-2);
}
.bft-slot-title { font-size: 1.25rem; font-weight: 700; margin: 0; } /* = título de bloque §0 plugin-ui-standards */
.bft-slot-link { font-size: 0.85rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.bft-slot-placeholder { color: var(--bf-gray-500); text-align: center; padding: var(--bf-space-5) 0; }
/* Recorte por altura (max_vh) con degradado — solo desktop (spec §3 regla del fold) */
.bft-row-clamped .bft-slot-body { max-height: var(--bft-row-max, none); overflow: hidden; position: relative; }
.bft-row-clamped .bft-slot-body::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  /* el rgba() transparente debe ser SIEMPRE la versión alpha-0 de --bf-gray-100 */
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0), var(--bf-gray-100));
  pointer-events: none;
}

/* ═══════════════ FRANJA DE NOTICIAS (fila 5) ═══════════════ */
.bft-news-strip {
  display: flex; align-items: center; gap: var(--bf-space-3);
  background: var(--bf-white); border: 1px solid var(--bf-gray-200);
  border-radius: var(--bf-radius); padding: var(--bf-space-2) var(--bf-space-3);
  font-size: 0.85rem;
}
.bft-news-strip h2 { font-size: 0.85rem; margin: 0; white-space: nowrap; }
.bft-news-list { list-style: none; display: flex; gap: var(--bf-space-4); margin: 0; padding: 0; overflow: hidden; flex: 1; }
.bft-news-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bft-news-list a { text-decoration: none; color: var(--bf-black-soft); }
.bft-news-list a:hover { color: var(--bf-primary); }
.bft-news-list time { color: var(--bf-gray-500); margin-left: 6px; font-size: 0.78rem; }
.bft-news-more { white-space: nowrap; font-weight: 500; text-decoration: none; }

/* ═══════════════ BLOG ═══════════════ */
.bft-archive-title { margin: var(--bf-space-4) 0; }
.bft-post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--bf-space-4); margin-bottom: var(--bf-space-5);
}
.bft-post-card {
  background: var(--bf-gray-100); border: 1px solid var(--bf-gray-200);
  border-radius: var(--bf-radius); overflow: hidden; display: flex; flex-direction: column;
}
.bft-post-card img { width: 100%; height: 180px; object-fit: cover; }
.bft-post-card-body { padding: var(--bf-space-3); }
.bft-post-card-cat {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  color: var(--bf-primary); letter-spacing: 0.05em;
}
.bft-post-card h3 { margin: var(--bf-space-1) 0 var(--bf-space-2); font-size: 1.05rem; }
.bft-post-card h3 a { color: var(--bf-black); text-decoration: none; }
.bft-post-card h3 a:hover { color: var(--bf-primary); }
.bft-post-card time { font-size: 0.78rem; color: var(--bf-gray-500); }
.bft-post-card p { font-size: 0.88rem; color: var(--bf-gray-600); margin: var(--bf-space-2) 0 0; }

.bft-article { padding: var(--bf-space-4) 0; }
.bft-article-meta { color: var(--bf-gray-500); font-size: 0.85rem; margin-bottom: var(--bf-space-4); }
.bft-article-content { font-size: 1.05rem; }
.bft-article-content img { border-radius: var(--bf-radius); }
.bft-related { border-top: 1px solid var(--bf-gray-200); padding-top: var(--bf-space-4); margin-top: var(--bf-space-5); }
.bft-comments { margin-top: var(--bf-space-5); }

.bft-breadcrumbs { font-size: 0.8rem; color: var(--bf-gray-500); margin: var(--bf-space-3) 0; }
.bft-breadcrumbs a { color: var(--bf-gray-600); text-decoration: none; }
.bft-breadcrumbs a:hover { color: var(--bf-primary); }

.bft-pagination { display: flex; gap: var(--bf-space-2); justify-content: center; margin: var(--bf-space-4) 0; }
.bft-pagination .page-numbers {
  padding: 6px 12px; border: 1px solid var(--bf-gray-300); border-radius: 4px;
  text-decoration: none; font-size: 0.9rem;
}
.bft-pagination .current { background: var(--bf-primary); color: #fff; border-color: var(--bf-primary); }

/* ═══════════════ PÁGINAS DE HERRAMIENTA Y EMPRESA ═══════════════ */
.bft-tool { max-width: var(--bf-container); margin: 0 auto; padding: var(--bf-space-3); }
.bft-tool-title { margin: var(--bf-space-3) 0; }
.bft-company { max-width: var(--bf-container); margin: 0 auto; padding: 0 var(--bf-space-3); }

/* ═══════════════ 404 ═══════════════ */
.bft-404 { text-align: center; padding: var(--bf-space-5) var(--bf-space-3); }
.bft-404 .bft-search-form { max-width: 420px; margin: var(--bf-space-4) auto; }

/* ═══════════════ BÚSQUEDA (formulario nativo) ═══════════════ */
.bft-search-form { display: flex; gap: var(--bf-space-2); }
.bft-search-form input[type="search"] {
  flex: 1; padding: 10px 14px; font: inherit;
  border: 1px solid var(--bf-gray-300); border-radius: var(--bf-radius);
}
.bft-search-form button {
  padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--bf-primary); color: #fff; border: 0; border-radius: var(--bf-radius);
}

/* ═══════════════ FOOTER ═══════════════ */
.bft-footer {
  background: var(--bf-black-soft); color: var(--bf-gray-300);
  margin-top: var(--bf-space-5); padding: var(--bf-space-4) 0; font-size: 0.85rem;
}
.bft-footer-inner { max-width: var(--bf-container); margin: 0 auto; padding: 0 var(--bf-space-3); }
.bft-footer a { color: var(--bf-gray-300); }
.bft-footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: var(--bf-space-3); margin: 0 0 var(--bf-space-3); padding: 0; }
.bft-footer-menu a { text-decoration: none; }
.bft-footer-menu a:hover { color: #fff; }
.bft-copy { color: var(--bf-gray-500); margin: var(--bf-space-3) 0 0; }

/* ═══════════════ RESPONSIVE (spec §9: 1200 / 900 / 600) ═══════════════ */
@media (max-width: 1200px) {
  .bft-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bft-row-50-50 { grid-template-columns: 1fr; }
  .bft-row-clamped .bft-slot-body { max-height: none; }
  .bft-row-clamped .bft-slot-body::after { display: none; }
  .bft-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bf-white); border-bottom: 1px solid var(--bf-gray-200);
    padding: var(--bf-space-3);
  }
  .bft-nav.is-open { display: block; }
  .bft-menu { flex-direction: column; gap: var(--bf-space-3); }
  .bft-burger { display: block; }
  .bft-header-actions { flex: 1 1 auto; }
  .bft-header-search { width: auto; flex: 1 1 auto; min-width: 0; }
  .bft-news-list { flex-direction: column; gap: var(--bf-space-1); }
}
@media (max-width: 600px) {
  .bft-post-grid { grid-template-columns: 1fr; }
  .bft-cta { display: none; }
  .bft-header-search { display: none; } /* en móvil se busca desde el icono/menú o la home */
}