:root {
  --tc-primary: #0d6efd;
  --tc-soft: #f5f8ff;
  --tc-bg: #f7f8fb;
}
body { 
	background: var(--tc-bg);
}
.card-converter {
  border-radius: 1rem;
}
.hero{
  /* más suave: de 0.06 a 0.015 de opacidad */
  background: linear-gradient(180deg, rgba(13,110,253,.06) 0%, rgba(13,110,253,.015) 100%);
  border-radius: 1rem;
box-shadow:var(--card-shadow);
}

.hero h1 {
  font-weight: 700;
}
.badge-flag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.rate-date {
  font-size: .875rem;
  color: #6c757d;
}
.breadcrumb {
  --bs-breadcrumb-divider: '›';
}
/* Sidebar */
.sidebar {
  position: relative;
}
@media (min-width: 992px) {
  .sidebar .ad-sidebar_sticky {
    position: sticky;
    top: 1rem;
  }
}
.ad-slot {
  margin-bottom: 1rem;
  text-align: center;
}
/* Ad slots hints (no fixed sizes; AdSense responsive recomendado) */
.ad-header_top, .ad-footer_banner {
  margin: 1rem auto;
}
.ad-sidebar_top, .ad-sidebar_sticky, .ad-below_calculator, .ad-in_article {}
/* Layout helpers */
.layout-main {
  min-height: 60vh;
}
.sidebar .card {
  position: relative;
}
@media (min-width: 992px) {
  .sidebar .ad-sidebar_sticky {
    position: sticky;
    top: 1rem;
  }
}
/* Chile color scheme */
:root {
  --cl-blue: #0033a0; /* azul bandera */
  --cl-red: #d52b1e; /* rojo bandera */
  --cl-white: #ffffff; /* blanco */
	
  /* Cards */
  --card-radius:14px;
  --card-border:#e9edf3;
  --card-shadow:0 8px 22px rgba(15,23,42,.06);
  --card-shadow-hover:0 12px 30px rgba(15,23,42,.08);	
	

}

/* ===== Sección tasas ===== */
.rate-grid .rate-card{
  border-radius:calc(var(--card-radius) - .25rem);
  box-shadow:var(--card-shadow);
  background:#fff;
  border:1px solid #eef2f7;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rate-grid .rate-card:hover{ transform:translateY(-2px); box-shadow:0 10px 40px rgba(82,63,105,.12); }
.rate-grid .rate-code{ font-weight:600; color:var(--ink-900); }
.rate-grid .rate-badge{ background:#ef4444; color:#fff; border-radius:.6rem; font-size:.75rem; padding:.2rem .45rem; }
.rate-grid .rate-value{ font-size:1.4rem; color:var(--ink-900); }
.rate-grid .rate-meta{ color:var(--muted); font-size:.85rem; }

a {
  color: var(--cl-blue);
}
a:hover {
  color: #001a52;
}
.btn-primary {
  background-color: var(--cl-blue);
  border-color: var(--cl-blue);
}
.btn-primary:hover {
  background-color: #001f66;
  border-color: #001f66;
}
.btn-outline-primary {
  color: var(--cl-blue);
  border-color: var(--cl-blue);
}
.btn-outline-primary:hover {
  background-color: var(--cl-blue);
  color: #fff;
}
.navbar, .footer {
  background: var(--cl-blue);
}
.navbar a.nav-link, .navbar-brand, .footer {
  color: #fff !important;
}
.badge.bg-primary {
  background-color: var(--cl-red) !important;
}
h1, h2, h3, h4 {
  color: #0b1a33;
}
/* ===== Componentes genéricos ===== */
/*.card{
  border-radius:1rem;
}*/

/* ===== Cards ===== */
.card{
  background:#fff;
  border:1px solid var(--card-border) !important;
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow) !important;
  transition:box-shadow .15s ease;
}
.card:hover{ box-shadow:var(--card-shadow-hover); }
/*card + .card{ margin-top:1rem; }
.stat-card .value{ font-size:1.9rem; font-weight:800; }*/



.fx-card{
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}
.fx-card .card-body{ padding: 18px 20px; }
.fx-card:hover{ transform: translateY(-2px); box-shadow: var(--fx-shadow-hover); }

/* Bandera pequeña con borde sutil */
.fx-flag{
  width: 20px; height: 14px; object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* Chip (sustituye a .badge) */
.fx-chip{
  display:inline-block;
  padding: .25rem .5rem;
  line-height: 1;
  border-radius: 999px;
  font-weight: 600;
  font-size: .75rem;
  background: var(--fx-chip-bg);
  color: var(--fx-chip-fg);
}

/* Valor principal grande y limpio */
.fx-value{
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Chevron opcional (si usas stretched-link) */
.fx-chevron{
  position:absolute; right:12px; top:50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: rgba(0,0,0,.28);
  pointer-events: none;
  transition: transform .15s ease, color .15s ease;
}
.fx-card:hover .fx-chevron{ transform: translate(2px, -50%); color: rgba(0,0,0,.45); }

/* Dark mode opcional */
@media (prefers-color-scheme: dark){
  .fx-card{ background:#0f1115; box-shadow:none; border:1px solid rgba(255,255,255,.08); }
  .fx-chip{ background: rgba(255,200,150,.12); color:#ffb36b; }
  .fx-chevron{ color: rgba(255,255,255,.25); }
}


/* Sidebar “Pares populares” liviano y limpio */
.card-converter{
  background: linear-gradient(180deg, #ffffff, #f8f9ff);
  border-radius: 1rem;
}
.chip-link{
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .55rem .8rem;
  text-decoration: none;
  background: #fff;
  transition: border-color .2s ease, transform .12s ease, color .2s ease;
  font-size: .92rem;
  color: #0b1a33;
}
.chip-link:hover{
  border-color: #0033a0;
  transform: translateY(-1px);
  color: #001f66;
}
.chip-link .chev{
  font-weight: 700;
  color: #0033a0;
  margin-left: .5rem;
}
/* Últimos consultados */
.recent-card { background: linear-gradient(180deg, #fff, #f8f9ff); border-radius: 1rem; }
.recent-card .list-group-item { border: 0; padding-left: 0; padding-right: 0; }
.recent-card .list-group-item + .list-group-item { border-top: 1px dashed rgba(0,0,0,.05); }
.bg-primary-subtle { background-color: rgba(0,51,160,.08) !important; }
.text-primary-emphasis { color: #0033a0 !important; }


/* Tarjetas conversiones */
.conv-box {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  padding: 12px 14px;
  transition: border-color .2s, transform .15s, color .15s;
  color: inherit;
}
.conv-box:hover {
  border-color: #0033a0;
  transform: translateY(-2px);
  text-decoration: none;
}
.conv-box h3 {
  font-size: 0.95rem;
  color: #0b1a33;
  margin: 0;
}
.conv-ir {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0033a0;
}

/* Pills de tendencia (look del mock) */
.trend-pill {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.8125rem;
  font-weight:600;
  line-height:1;
  border:1px solid transparent;
}

/* Colores */
.trend-up {
  color:#0f766e;               /* teal-700 */
  background:rgba(16,185,129,.12); /* emerald-500 a 12% */
  border-color:rgba(16,185,129,.28);
}
.trend-down {
  color:#b91c1c;               /* red-700 */
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.28);
}
.trend-flat {
  color:#334155;               /* slate-700 */
  background:rgba(100,116,139,.12); /* slate-500 12% */
  border-color:rgba(100,116,139,.28);
}

/* Puntito decorativo opcional al inicio (como en chips modernos) */
.trend-pill::before{
  content:'';
  display:inline-block;
  width:.5rem;height:.5rem;border-radius:999px;
  background:currentColor;
  opacity:.75;
}

/* Dropdown de Conversiones (pares principales) */
/* No forzar display en reposo */
.dropdown-menu-pairs{
  min-width: 360px;
  border: none;
}

/* Solo cuando esté ABIERTO (.show) lo ponemos en grid */
@media (min-width: 992px){
  .dropdown-menu-pairs.show{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem .5rem;
  }
  .dropdown-menu-pairs .dropdown-item{
    /*border-radius: .5rem;*/
    white-space: nowrap;
    max-width: 100%;
  }
}
/* Móvil (<992px): que no se salga del viewport */
@media (max-width: 991.98px){
  .dropdown-menu-pairs{
    position: static;                 /* que fluya dentro del menú colapsado */
    float: none;
    inset: auto !important;           /* cancela el posicionamiento absoluto */
    transform: none !important;
    width: 100%;                      /* ocupar todo el ancho del contenedor */
    max-width: 100%;
    min-width: 0;                     /* NO fuerces min-width */
    margin: .25rem 0 .5rem 0;         /* respiración */
    border-radius: .75rem;
    border: none;
    box-shadow: none;                 /* opcional: mismo look que el resto */
    display: block;                   /* una sola columna */
    max-height: 60vh;                 /* scroll si es muy largo */
    overflow: auto;
    overscroll-behavior: contain;
  }
  .dropdown-menu-pairs .dropdown-item{
    white-space: normal;              /* permitir salto de línea */
    line-height: 1.2;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: .5rem;
  }
}