/* BVQ Mercado en Línea — widget de últimas transacciones
 *
 * Paleta y tipografía según el Manual de Marca BVQ (Branding BVQ, pp. 13-15 y 27-28).
 * La identidad cromática está inspirada en el tricolor del Ecuador:
 *
 *   Azul institucional  PANTONE 282C   #041E42  confianza, estabilidad, respaldo
 *                                               «uso principal en logotipo y textos»
 *   Rojo                                #ea1c24  dinamismo, acción, movimiento financiero
 *   Amarillo            PANTONE 7548 C  #FFC600  valor, energía económica, oportunidad
 *
 * Tipografía: ROBOTO («debe emplearse en papelería, web, publicidad
 * offline y online, sobre todo en elementos principales»).
 *
 * Los colores de marca NO se heredan del tema a propósito: el manual es
 * normativo y un cambio de paleta en el tema no debe alterarlos. Para un
 * caso puntual se pueden forzar desde Ajustes → BVQ Mercado.
 *
 * El widget no cambia con el modo oscuro del sistema: vive dentro de un
 * sitio claro y debe verse igual que el resto de la página.
 */

.bvq-widget{
	/* --- Paleta de marca --- */
	--bvq-azul: var(--bvq-brand-force, #041E42);
	--bvq-rojo: var(--bvq-accent-force, #ea1c24);
	--bvq-amarillo: var(--bvq-pos-force, #FFC600);

	/* --- Neutros derivados del azul institucional, no grises puros --- */
	--bvq-ink: var(--bvq-azul);
	--bvq-ink-2:#33415A;
	--bvq-muted:#6A7890;
	--bvq-line:#DFE4EC;
	--bvq-line-2:#C3CBD8;
	--bvq-surface:#fff;
	--bvq-surface-2:#F6F8FB;
	/* Fila alterna de las tablas: un blanco apenas más opaco, derivado del
	   azul institucional como el resto de los grises. */
	--bvq-cebra:#F2F5F9;

	/* --- Tintes suaves (se recalculan con color-mix si hay soporte) --- */
	--bvq-azul-soft:#E8EDF4;
	--bvq-amarillo-soft:#FFF6D9;

	--bvq-font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bvq-radius:10px;

	box-sizing:border-box;
	background:var(--bvq-surface);
	border:1px solid var(--bvq-line);
	border-radius:var(--bvq-radius);
	box-shadow:0 1px 2px rgba(4,30,66,.06),0 8px 24px -14px rgba(4,30,66,.25);
	overflow:hidden;
	color:var(--bvq-ink);
	font-family:var(--bvq-font);
	font-size:15px;
	line-height:1.55;
}
@supports (color: color-mix(in srgb, red 10%, white)){
	.bvq-widget{
		--bvq-azul-soft: color-mix(in srgb, var(--bvq-azul) 8%, #fff);
		--bvq-amarillo-soft: color-mix(in srgb, var(--bvq-amarillo) 20%, #fff);
	}
}
.bvq-widget *,
.bvq-widget *::before,
.bvq-widget *::after{box-sizing:inherit}

/* El atributo hidden viene de la hoja del navegador, que cualquier regla
   de clase con display gana por especificidad. Sin esto, un panel o un
   aviso marcado como oculto se ve igual. */
.bvq-widget [hidden]{display:none!important}

/* ------------------------------ cabecera ------------------------------ */
.bvq-head{
	display:flex;flex-wrap:wrap;gap:18px 26px;
	align-items:flex-start;justify-content:space-between;
	padding:14px 20px 12px;border-bottom:1px solid var(--bvq-line);
}
/* El pleca roja tras el título es el recurso de titulación del manual
   («Colores corporativos |», «Tipografía |»). */
.bvq-title{
	display:flex;align-items:center;gap:10px;
	font-family:var(--bvq-font);font-size:18px;font-weight:700;margin:0 0 4px;
	letter-spacing:-.005em;line-height:1.3;color:var(--bvq-azul);
}
.bvq-title::after{content:"";width:3px;height:17px;background:var(--bvq-rojo);flex:none}

.bvq-stamp{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--bvq-muted);font-size:13px}
.bvq-sep{color:var(--bvq-line-2)}
.bvq-live,.bvq-closed{
	display:inline-flex;align-items:center;gap:6px;
	font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
}
.bvq-live{color:var(--bvq-azul)}
.bvq-closed{color:var(--bvq-muted)}
.bvq-dot{width:7px;height:7px;border-radius:50%;background:var(--bvq-rojo);animation:bvq-pulse 2.2s ease-in-out infinite}
@keyframes bvq-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}

.bvq-stats{display:flex;gap:26px;flex-wrap:wrap}
.bvq-stat{display:flex;flex-direction:column;gap:2px;min-width:104px}
.bvq-k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bvq-muted)}
.bvq-v{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--bvq-azul)}

/* ------------------------------- pestañas -----------------------------
   Rótulo en versalitas con tracking amplio, como los encabezados del
   manual. El indicador activo se dibuja con box-shadow interior en vez de
   borde o pseudo-elemento: los temas de WordPress suelen decorar ::after
   de los botones con subrayados curvos, y así no hay nada que puedan
   pisar. Por lo mismo se neutralizan aquí sus pseudo-elementos. */
.bvq-widget .bvq-tabs{
	display:flex;gap:4px;flex-wrap:wrap;
	padding:6px 16px 0;border-bottom:1px solid var(--bvq-line);
}
.bvq-widget .bvq-tab{
	position:relative;font:inherit;
	font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.2;
	border:0;outline-offset:2px;background:none;background-image:none;box-shadow:none;
	text-decoration:none;text-shadow:none;
	color:var(--bvq-muted);cursor:pointer;
	padding:10px 14px 11px;margin:0 0 -1px;border-radius:6px 6px 0 0;
	display:inline-flex;align-items:center;gap:8px;
	transition:color .15s,background .15s;
}
.bvq-widget .bvq-tab::before,
.bvq-widget .bvq-tab::after{content:none!important;display:none!important}
.bvq-widget .bvq-tab:hover{color:var(--bvq-azul);background:var(--bvq-surface-2)}
.bvq-widget .bvq-tab[aria-selected="true"]{
	color:var(--bvq-azul);
	box-shadow:inset 0 -3px 0 0 var(--bvq-rojo);
}
.bvq-widget .bvq-tab:focus-visible{outline:2px solid var(--bvq-azul)}
.bvq-widget .bvq-count{
	background:var(--bvq-azul-soft);color:var(--bvq-azul);
	font-size:10.5px;font-weight:700;letter-spacing:0;
	padding:2px 7px;border-radius:999px;font-variant-numeric:tabular-nums;
}
.bvq-widget .bvq-tab[aria-selected="true"] .bvq-count{background:var(--bvq-azul);color:#fff}

/* --------------------------------- filas ------------------------------ */
.bvq-colhead,.bvq-row{
	display:grid;
	grid-template-columns:72px minmax(190px,1fr) 128px 84px 96px 34px;
	gap:14px;align-items:center;
}
/* Encabezado de columnas en azul institucional, igual que la barra de
   herramientas de las tablas completas (1.9.0). */
.bvq-colhead{padding:9px 20px;background:var(--bvq-azul)}
.bvq-colhead > span{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.bvq-widget .bvq-colhead .bvq-i{color:rgba(255,255,255,.7)}
.bvq-widget .bvq-colhead .bvq-i:hover,
.bvq-widget .bvq-colhead .bvq-i[aria-expanded="true"]{color:var(--bvq-azul);background:#fff}
.bvq-widget .bvq-colhead .bvq-i:focus-visible{outline-color:var(--bvq-amarillo)}
.bvq-colhead > span.bvq-r{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.bvq-r{text-align:right}
.bvq-hint{border-bottom:1px dotted var(--bvq-line-2);cursor:help}

/* ------------------------ ayuda por columna --------------------------- */
.bvq-widget .bvq-i{
	display:inline-flex;align-items:center;justify-content:center;
	width:16px;height:16px;flex:none;padding:0;margin:0;vertical-align:middle;
	border:0;border-radius:50%;background:none;box-shadow:none;background-image:none;
	color:var(--bvq-line-2);cursor:help;line-height:0;
	transition:color .15s,background .15s;
}
.bvq-widget .bvq-i::before,
.bvq-widget .bvq-i::after{content:none!important}
.bvq-widget .bvq-i:hover,
.bvq-widget .bvq-i[aria-expanded="true"]{color:#fff;background:var(--bvq-azul)}
.bvq-widget .bvq-i:focus-visible{outline:2px solid var(--bvq-azul);outline-offset:2px}

.bvq-row{
	width:100%;padding:8px 20px;border:0;border-bottom:1px solid var(--bvq-line);
	background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
/* Filas alternas blanco / blanco opaco, como las tablas completas. «of
   .bvq-row» cuenta solo las operaciones (no los detalles intercalados), y
   el detalle desplegado toma el tono de su fila. */
.bvq-rows > .bvq-row:nth-child(even of .bvq-row),
.bvq-rows > .bvq-row:nth-child(even of .bvq-row) + .bvq-detail{background:var(--bvq-cebra)}
.bvq-rows > .bvq-row.bvq-row:hover,
.bvq-rows > .bvq-row.bvq-row[aria-expanded="true"]{background:var(--bvq-azul-soft)}
.bvq-row:focus-visible{outline:2px solid var(--bvq-azul);outline-offset:-2px}

.bvq-time{font-size:13px;color:var(--bvq-muted);font-variant-numeric:tabular-nums}
.bvq-who{min-width:0}
.bvq-em{
	display:block;font-weight:500;font-size:14px;line-height:1.3;color:var(--bvq-azul);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bvq-ins{display:flex;align-items:center;gap:7px;margin-top:1px;min-width:0}
.bvq-ins-n{font-size:12.5px;color:var(--bvq-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bvq-chip{
	flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;
	color:var(--bvq-azul);background:var(--bvq-azul-soft);padding:2px 6px;border-radius:4px;
}
.bvq-efec{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.015em;color:var(--bvq-azul)}
.bvq-prc{font-size:14px;font-variant-numeric:tabular-nums;color:var(--bvq-muted)}
/* Amarillo = «valor, energía económica y oportunidad»: el rendimiento es
   justamente eso. Texto en azul institucional para asegurar contraste. */
.bvq-yld{
	display:inline-block;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
	color:var(--bvq-azul);background:var(--bvq-amarillo-soft);padding:2px 8px;border-radius:5px;
}
.bvq-chev{color:var(--bvq-muted);transition:transform .18s;justify-self:end;flex:none}
.bvq-row[aria-expanded="true"] .bvq-chev{transform:rotate(180deg)}

/* Destello al entrar una operación nueva (convención de cinta de mercado). */
.bvq-row.bvq-nueva{animation:bvq-flash 1.6s ease-out 1}
@keyframes bvq-flash{from{background:var(--bvq-amarillo-soft)}to{background:transparent}}

/* -------------------------------- detalle ----------------------------- */
.bvq-detail{padding:2px 20px 14px;background:var(--bvq-surface);border-bottom:1px solid var(--bvq-line)}
.bvq-dl{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	gap:10px 22px;margin:0;padding:10px 0 0;border-top:1px dashed var(--bvq-line-2);
}
.bvq-dl > div{min-width:0}
.bvq-dl dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bvq-muted);margin-bottom:3px}
.bvq-dl dd{margin:0;font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--bvq-ink-2)}
.bvq-na{color:var(--bvq-muted)}

/* --------------------------- vacío y llamada -------------------------- */
.bvq-empty{padding:32px 24px;text-align:center}
.bvq-empty-t{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--bvq-azul)}
.bvq-empty p{margin:0 auto;color:var(--bvq-muted);max-width:44ch;font-size:14px}

.bvq-cta{
	display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;
	background:var(--bvq-surface-2);color:var(--bvq-azul);font-weight:700;font-size:14.5px;
	border-top:1px solid var(--bvq-line);text-decoration:none;
	transition:background .15s;
}
.bvq-cta:hover,.bvq-cta:focus{background:var(--bvq-azul);color:#fff}

/* --------------------------- tarjetas en móvil ------------------------ */
@media (max-width:760px){
	.bvq-colhead{display:none}
	/* Cada operación en DOS líneas (antes tres) para acortar el scroll del
	   home: arriba emisor e instrumento, abajo hora, valor y precio. */
	.bvq-row{grid-template-columns:auto 1fr auto;gap:3px 10px;padding:9px 14px}
	.bvq-who{grid-column:1 / 3;grid-row:1}
	.bvq-chev{grid-column:3;grid-row:1}
	.bvq-time{grid-column:1;grid-row:2;font-size:12px}
	.bvq-efec{grid-column:2;grid-row:2;font-size:15px;text-align:left}
	.bvq-meta{grid-column:3;grid-row:2;display:flex;gap:8px;align-items:center;justify-content:flex-end}
	.bvq-prc,.bvq-yld{font-size:12.5px}
	.bvq-detail{padding-left:14px;padding-right:14px}
	.bvq-head{padding:12px 14px;gap:10px 20px}
	.bvq-tabs{padding-left:10px;padding-right:10px}
	/* Las dos pestañas en una sola fila y la línea de estado más apretada:
	   en 390px antes ocupaban dos y tres renglones. */
	.bvq-widget .bvq-tab{padding:9px 9px 10px;letter-spacing:.05em;gap:6px}
	.bvq-stamp{font-size:12px;gap:4px 6px}
	.bvq-stats{gap:18px}
	.bvq-stat{min-width:0}
	.bvq-v{font-size:17px}
}
@media (min-width:761px){.bvq-meta{display:contents}}

@media (prefers-reduced-motion:reduce){
	.bvq-dot{animation:none}
	.bvq-row.bvq-nueva{animation:none}
	.bvq-chev,.bvq-cta{transition:none}
}

/* --------------------------- globo de ayuda ---------------------------
   Vive colgado del <body>, no del widget, para escapar del contenedor con
   scroll horizontal de la tabla. Por eso no hereda las variables de
   .bvq-widget y lleva los colores de marca escritos aquí. */
.bvq-globo{
	position:fixed;z-index:99999;max-width:290px;
	background:#fff;border:1px solid #C3CBD8;border-radius:8px;
	box-shadow:0 2px 6px rgba(4,30,66,.1),0 14px 32px -16px rgba(4,30,66,.45);
	padding:13px 15px;
	font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;font-weight:400;line-height:1.5;color:#33415A;
	text-align:left;text-transform:none;letter-spacing:0;
}
.bvq-globo[hidden]{display:none}
.bvq-globo strong{
	display:block;color:#041E42;font-weight:700;font-size:13.5px;
	margin-bottom:4px;letter-spacing:0;text-transform:none;
}