/* JPRO Mercado RD — estilos.
   Todo está acotado a .jpro-mrd y con tamaños en px para que el tema del periódico no lo deforme.
   Cada tarjeta es un "contenedor": se adapta al ancho de SU columna (barra lateral, 2 o 3 columnas…),
   no al ancho de la pantalla. */

.jpro-mrd {
	--bg: #ffffff;
	--surface: #f6f7f9;
	--line: #e6e8ec;
	--text: #14181f;
	--muted: #667085;
	--accent: #d92d20;
	--up: #d92d20;
	--up-bg: #fef3f2;
	--down: #12875a;
	--down-bg: #ecfdf3;
	--same: #667085;
	--same-bg: #f2f4f7;
	--radius: 18px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18);
	/* Separación editable (Ajustes o atributos del shortcode) */
	--jpro-gap: 28px;
	--jpro-block: 36px;

	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--jpro-block);
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	color: var(--text);
	text-align: left;
	text-indent: 0;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
}
.jpro-mrd[data-tema="oscuro"] { --bg:#161a22; --surface:#1e232d; --line:#2a303c; --text:#f2f4f7; --muted:#98a2b3; --up-bg:#3a1b19; --down-bg:#12301f; --same-bg:#252b36; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
	.jpro-mrd[data-tema="auto"] { --bg:#161a22; --surface:#1e232d; --line:#2a303c; --text:#f2f4f7; --muted:#98a2b3; --up-bg:#3a1b19; --down-bg:#12301f; --same-bg:#252b36; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); }
}

/* Reinicio defensivo: los temas a veces estiran o aprietan el texto de todo el sitio.
   Va primero para que las reglas de abajo (mismo peso) puedan volver a fijar su propio valor. */
.jpro-mrd *, .jpro-mrd *::before, .jpro-mrd *::after {
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	text-indent: 0;
	text-shadow: none;
}
:where(.jpro-mrd) :where(ul, li, div, span, section, header, b, small) { margin: 0; padding: 0; }
:where(.jpro-mrd) :where(ul, li) { list-style: none; }
:where(.jpro-mrd) li::marker { content: ""; }
:where(.jpro-mrd) small { font-size: inherit; }
.jpro-mrd button { font-family: inherit; font-size: 13px; line-height: 1; margin: 0; text-transform: none; letter-spacing: .01em; }

/* Iconos con tamaño fijo en px (no dependen del tamaño de letra del tema) */
.jpro-i { display: inline-block; width: 16px; height: 16px; max-width: none; flex: none; vertical-align: -3px; }

/* ---------- Barra superior (módulo combinado) ---------- */
.jpro-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.jpro-bar__title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.jpro-bar__title::after { content: ""; height: 3px; width: 44px; background: var(--accent); border-radius: 3px; }
.jpro-bar__live { width: 9px; height: 9px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 0 rgba(18,183,106,.55); animation: jpro-pulse 2s infinite; }
@keyframes jpro-pulse { 70% { box-shadow: 0 0 0 8px rgba(18,183,106,0); } 100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); } }

/* ---------- Botón (solo lo ve la administración) ---------- */
.jpro-mrd .jpro-btn {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex: none;
	background: var(--text); color: var(--bg); border: 0; border-radius: 999px;
	padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
	transition: transform .15s ease, opacity .15s ease; box-shadow: none; text-decoration: none;
}
.jpro-btn:hover { transform: translateY(-1px); }
.jpro-btn:focus-visible { outline: 3px solid rgba(217,45,32,.45); outline-offset: 2px; }
.jpro-btn:disabled { opacity: .65; cursor: progress; transform: none; }
.jpro-btn__ico { width: 15px; height: 15px; }
.is-loading .jpro-btn__ico { animation: jpro-spin .8s linear infinite; }
@keyframes jpro-spin { to { transform: rotate(360deg); } }

/* ---------- Rejilla ---------- */
.jpro-grid { display: grid; gap: var(--jpro-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) {
	.jpro-cols-2 .jpro-grid, .jpro-cols-3 .jpro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
	.jpro-cols-3 .jpro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tarjeta ---------- */
.jpro-card {
	container-type: inline-size;
	display: block; min-width: 0; margin: 0; padding: 20px; overflow: hidden; position: relative;
	/* Borde, fondo, esquinas y sombra: se controlan desde Ajustes o con atributos del shortcode. */
	background: var(--jpro-cbg, var(--bg));
	border-style: solid;
	border-width: var(--jpro-bw, 1px);
	border-color: var(--jpro-bc, var(--line));
	border-radius: var(--jpro-radius, var(--radius));
	box-shadow: var(--jpro-shadow, var(--shadow));
}
.jpro-card.is-fresh { animation: jpro-in .45s ease; }
@keyframes jpro-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.jpro-mrd.is-loading .jpro-card { opacity: .75; }

.jpro-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 16px; }
.jpro-card__titles { flex: 1 1 140px; min-width: 0; }
.jpro-card__title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.jpro-card__sub { font-size: 12.5px; line-height: 1.3; color: var(--muted); margin-top: 3px; }
.jpro-card__head .jpro-btn { margin-left: auto; }

/* Iconos de cabecera y de lista: solo el vector, sin marco. El fondo es opcional (Ajustes). */
.jpro-chip, .jpro-dot { display: inline-grid; place-items: center; flex: none; background: transparent; border-radius: 10px; }
.jpro-chip { width: 34px; height: 34px; }
.jpro-chip .jpro-i { width: 26px; height: 26px; }
.jpro-dot { width: 28px; height: 28px; }
.jpro-dot .jpro-i { width: 22px; height: 22px; }
.jpro-chip--fx { color: #12a05f; }
.jpro-chip--fuel { color: #e0362c; }
.jpro-dot--premium { color: #e0362c; }
.jpro-dot--regular { color: #12a05f; }
.jpro-dot--diesel-opt { color: #2e6bff; }
.jpro-dot--diesel-reg { color: #f79009; }
.jpro-dot--glp { color: #7a5af8; }
.jpro-dot--gn { color: #06a7c7; }

.jpro-card__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.jpro-foot__time { display: inline-flex; align-items: center; gap: 5px; }
.jpro-meta { font-size: 12px; color: var(--muted); margin-top: 12px; }
.jpro-empty { padding: 28px 0; text-align: center; color: var(--muted); font-size: 14px; }
.jpro-note { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--up-bg); color: var(--up); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }

/* ---------- Tasa del día ---------- */
.jpro-fx__cols, .jpro-fx__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.jpro-fx__cols { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 6px; }
.jpro-fx__cols span:not(:first-child) { text-align: right; }
.jpro-fx__row { background: var(--surface); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.jpro-fx__cur { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jpro-fx__ico { width: 24px; height: 24px; }
.jpro-fx__row--usd .jpro-fx__ico { color: #12a05f; }
.jpro-fx__row--eur .jpro-fx__ico { color: #2e6bff; }
.jpro-fx__name { font-weight: 800; font-size: 15px; line-height: 1.15; white-space: nowrap; }
.jpro-fx__code { font-size: 11px; line-height: 1.2; color: var(--muted); letter-spacing: .06em; }
.jpro-fx__val { text-align: right; font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpro-fx__val--sell { color: var(--accent); }
.jpro-fx__val--na { color: var(--muted); }

/* ---------- Combustibles: una línea por combustible ---------- */
.jpro-fuel__row {
	display: grid; align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line);
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "dot name price" "dot name trend";
}
.jpro-fuel__row:last-child { border-bottom: 0; }
.jpro-fuel__row .jpro-dot { grid-area: dot; }
.jpro-fuel__name { grid-area: name; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpro-fuel__name small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; }
.jpro-fuel__price { grid-area: price; justify-self: end; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpro-fuel__price small { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-right: 3px; letter-spacing: 0; }
.jpro-trend { grid-area: trend; justify-self: end; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpro-trend .jpro-i { width: 11px; height: 11px; stroke-width: 2.8; }
.jpro-trend--up { color: var(--up); background: var(--up-bg); }
.jpro-trend--down { color: var(--down); background: var(--down-bg); }
.jpro-trend--same { color: var(--same); background: var(--same-bg); }
/* Sin icono de fila */
.jpro-fuel__row--nodot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "name trend"; }

/* ---------- Clima ---------- */
.jpro-card--weather { color: #fff; border-width: 0; background: linear-gradient(160deg, #2e90fa, #1570ef 55%, #1849a9); }
.jpro-w--clear { background: linear-gradient(160deg, #38bdf8, #2e6bff 60%, #1d3fbf); }
.jpro-w--cloudy { background: linear-gradient(160deg, #7b8ba5, #54627c 60%, #38445a); }
.jpro-w--rain { background: linear-gradient(160deg, #5b7aa6, #384f78 60%, #243553); }
.jpro-w--storm { background: linear-gradient(160deg, #5b4b9a, #382c70 60%, #1f1a45); }
.jpro-w--night { background: linear-gradient(160deg, #26337a, #141c4d 60%, #0a0f2e); }
.jpro-card--weather .jpro-card__foot { border-top-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.jpro-card--weather .jpro-note { background: rgba(255,255,255,.18); color: #fff; }
.jpro-card--weather .jpro-empty { color: rgba(255,255,255,.85); }
.jpro-card--weather .jpro-btn { background: rgba(255,255,255,.22); color: #fff; }

.jpro-w__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jpro-w__city { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.jpro-w__main { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; }
.jpro-w__bigico { width: 68px; height: 68px; stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.jpro-w__temp { font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.jpro-w__temp sup { font-size: 20px; font-weight: 700; vertical-align: top; margin-left: 2px; position: relative; top: 4px; line-height: 1; }
.jpro-w__desc { font-size: 15px; font-weight: 600; line-height: 1.2; margin-top: 4px; opacity: .95; }

.jpro-w__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jpro-w__stats li { background: rgba(255,255,255,.16); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 12px; line-height: 1.25; }
.jpro-w__stats .jpro-i { grid-row: span 2; width: 18px; height: 18px; }
.jpro-w__lbl { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jpro-w__stats b { font-size: 14px; white-space: nowrap; }
.jpro-w__stats li.jpro-no-ico { grid-template-columns: minmax(0, 1fr); }
.jpro-w__stats li.jpro-no-ico .jpro-w__lbl, .jpro-w__stats li.jpro-no-ico b { grid-column: 1; }

.jpro-w__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.jpro-w__days li { background: rgba(255,255,255,.12); border-radius: 12px; padding: 9px 2px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; min-width: 0; }
.jpro-w__days .jpro-i { width: 22px; height: 22px; }
.jpro-w__dn { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; opacity: .9; }
.jpro-w__hi { font-weight: 800; font-size: 14px; }
.jpro-w__lo { opacity: .75; }
.jpro-w__rn { display: inline-flex; align-items: center; gap: 1px; font-size: 10.5px; opacity: .85; white-space: nowrap; }
.jpro-w__rn .jpro-i { width: 10px; height: 10px; }

/* Clima: el borde y el fondo propios solo se aplican si se personalizan */
.jpro-bc-custom .jpro-card--weather { border-width: var(--jpro-bw, 1px); border-color: var(--jpro-bc); }
.jpro-wbg-custom .jpro-card--weather { background: var(--jpro-wbg); }

/* ---------- Adaptación al ancho real de la tarjeta ---------- */
@container (min-width: 380px) {
	.jpro-card__title { font-size: 19px; }
	.jpro-fx__val { font-size: 21px; }
	.jpro-fuel__name { font-size: 14.5px; }
	.jpro-fuel__price { font-size: 19px; }
	.jpro-fuel__row {
		column-gap: 12px; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "dot name price trend";
	}
	.jpro-fuel__row--nodot { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name price trend"; }
	.jpro-trend { min-width: 64px; justify-content: center; padding: 4px 8px; font-size: 12px; }
	.jpro-w__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jpro-w__bigico { width: 84px; height: 84px; }
	.jpro-w__temp { font-size: 64px; }
	.jpro-w__days { gap: 6px; }
	.jpro-w__days .jpro-i { width: 24px; height: 24px; }
}
@container (max-width: 270px) {
	.jpro-fx__val { font-size: 16px; }
	.jpro-fx__ico { display: none; }
	.jpro-fx__row { padding: 10px; }
	.jpro-fuel__price { font-size: 16px; }
	.jpro-w__temp { font-size: 46px; }
	.jpro-w__bigico { width: 56px; height: 56px; }
	.jpro-w__rn { display: none; }
}
@media (max-width: 420px) {
	.jpro-card { padding: 16px; }
}

/* ---------- Aviso emergente ---------- */
.jpro-toast { margin-top: calc(var(--jpro-gap) * .6); padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.jpro-toast[hidden] { display: none; }
.jpro-toast--ok { background: var(--down-bg); color: var(--down); border-color: transparent; }
.jpro-toast--error { background: var(--up-bg); color: var(--up); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
	.jpro-mrd * { animation: none !important; transition: none !important; }
}