/* Herramientas para ahorrar (inc/herramientas.php): hub, calendario, calculadora y precio de la luz.
   Usa los tokens de dc.css; todo bajo body.dc .dc-tool para ganar al tema padre y a Semantic UI. */

.dc-tool {
	--t-ok: #157A3D; --t-ok-bg: #E7F5EC;
	--t-mid: #A15C00; --t-mid-bg: #FFF3DD;
	--t-bad: #B00E27; --t-bad-bg: #FDE8EB;
}
.dc-tool [hidden] { display: none !important; }
.dc-tool .dc-container { display: flex; flex-direction: column; gap: var(--dc-s7); }
.dc-tool .dc-crumbs { margin-bottom: calc(-1 * var(--dc-s4)); }

/* Cabecera */
.dc-tool-head { display: flex; flex-direction: column; gap: var(--dc-s3); max-width: 820px; }
body.dc .dc-tool-head h1 { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; color: var(--dc-ink); }
.dc-tool-intro { margin: 0; font-size: var(--dc-fs-lg); line-height: 1.55; color: var(--dc-ink-2); max-width: 70ch; }

/* Tarjetas de herramientas (hub y «Más herramientas») */
.dc-tool-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dc-s4); }
body.dc .dc-tool-card {
	display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--dc-s5); box-sizing: border-box;
	background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg);
	color: var(--dc-ink-2); text-decoration: none; font-size: var(--dc-fs-sm); line-height: 1.5;
	transition: border-color .15s, transform .15s;
}
body.dc .dc-tool-card:hover { border-color: var(--dc-ink); transform: translateY(-2px); }
.dc-tool-card b { font-size: var(--dc-fs-lg); line-height: 1.25; color: var(--dc-ink); }
.dc-tool-card-ico { font-size: 28px; line-height: 1; }
.dc-tool-card-cta { margin-top: auto; padding-top: var(--dc-s2); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dc-red-text); }
.dc-tool-cards--hub .dc-tool-card { padding: var(--dc-s6); }
body.dc .dc-tool-otras h2 { margin: 0 0 var(--dc-s4); font-size: var(--dc-fs-xl); }
.dc-tool-note { max-width: 760px; }

/* Bloque de suscripción */
.dc-tool-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--dc-s7); padding: var(--dc-s7); align-items: start; }
body.dc .dc-tool-sub h2 { margin: 0 0 var(--dc-s2); font-size: var(--dc-fs-xl); }
.dc-tool-sub p { margin: 0; color: var(--dc-ink-2); line-height: 1.55; }
.dc-tool-cupones { padding: var(--dc-s4) var(--dc-s6) var(--dc-s5); display: flex; flex-direction: column; gap: var(--dc-s3); }
body.dc .dc-tool-cupones h2 { margin: var(--dc-s2) 0 0; font-size: var(--dc-fs-xl); }

/* ---------- Calendario ---------- */
.dc-cal-hero {
	display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--dc-s5) var(--dc-s7); align-items: center;
	padding: var(--dc-s7); border-radius: var(--dc-r-xl); background: var(--dc-ink); color: #FFF;
}
.dc-cal-hero-pre, .dc-cal-count-pre { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-red-on-dark); }
body.dc .dc-cal-hero h2 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; color: #FFF; text-wrap: balance; }
.dc-cal-hero-date { margin: var(--dc-s2) 0 0; font-size: var(--dc-fs-base); color: #E3DCDB; }
.dc-cal-count-n { display: flex; gap: 10px; }
.dc-cal-count-n span { display: flex; flex-direction: column; align-items: center; min-width: 66px; padding: 10px 6px 8px; border-radius: 12px; background: rgba(255,255,255,.08); }
.dc-cal-count-n b { font-size: 34px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-cal-count-n small { margin-top: 4px; font-size: 12px; color: #CFC7C5; }
.dc-cal-hero-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
body.dc .dc-cal-hero .dc-btn { min-height: 46px; }
body.dc .dc-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 var(--dc-s4);
	border: 1.5px solid currentColor; border-radius: var(--dc-r-md); background: transparent; color: inherit;
	font: 700 var(--dc-fs-md) var(--dc-font); text-decoration: none; cursor: pointer; box-sizing: border-box;
}
body.dc .dc-cal-hero .dc-btn-ghost { color: #FFF; border-color: rgba(255,255,255,.45); }
body.dc .dc-cal-hero .dc-btn-ghost:hover { border-color: #FFF; }

.dc-cal-est { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--dc-pill); font-size: 12px; font-weight: 700; }
.dc-cal-est--confirmada { background: var(--t-ok-bg); color: var(--t-ok); }
.dc-cal-est--estimada { background: var(--t-mid-bg); color: var(--t-mid); }

.dc-cal-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: calc(-1 * var(--dc-s3)); }
body.dc .dc-cal-filtros .dc-chip { background: var(--dc-surface); cursor: pointer; font-family: var(--dc-font); font-size: var(--dc-fs-sm); padding: 0 14px; }
body.dc .dc-cal-filtros .dc-chip.is-on { background: var(--dc-ink); border-color: var(--dc-ink); color: #FFF; }

.dc-cal-lista, .dc-cal-mes > ul { list-style: none; margin: 0; padding: 0; }
.dc-cal-lista { display: flex; flex-direction: column; gap: var(--dc-s6); }
body.dc .dc-cal-mes-t { margin: 0 0 var(--dc-s3); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); }
.dc-cal-mes > ul { display: flex; flex-direction: column; gap: var(--dc-s3); }
.dc-cal-ev {
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--dc-s4); padding: var(--dc-s5);
	background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg); scroll-margin-top: 90px;
}
.dc-cal-ev.is-now { border-color: var(--dc-red); box-shadow: inset 4px 0 0 var(--dc-red); }
.dc-cal-ev:target { border-color: var(--dc-ink); }
.dc-cal-ev-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 12px; background: var(--dc-bg); }
.dc-cal-ev-fecha b { font-size: 26px; line-height: 1; font-weight: 700; color: var(--dc-ink); }
.dc-cal-ev-fecha span { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--dc-red-text); }
.dc-cal-ev-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-cal-ev-top { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dc-cal-badge { display: inline-flex; padding: 2px 8px; border-radius: var(--dc-pill); background: var(--dc-line-soft); font-size: 12px; font-weight: 700; color: var(--dc-ink-2); }
.dc-cal-badge--now { background: var(--dc-red); color: #FFF; }
body.dc .dc-cal-ev h3 { margin: 0; font-size: var(--dc-fs-lg); line-height: 1.3; color: var(--dc-ink); }
.dc-cal-ev-rango { margin: 0; font-weight: 600; color: var(--dc-ink-2); }
.dc-cal-ev-txt { margin: 0; font-size: var(--dc-fs-md); line-height: 1.55; color: var(--dc-ink-2); max-width: 75ch; }
body.dc .dc-cal-src { font-size: var(--dc-fs-sm); text-decoration: underline; }
.dc-cal-ev-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 2px; }
body.dc .dc-cal-link { font-size: var(--dc-fs-sm); font-weight: 700; color: var(--dc-red-text); }
body.dc .dc-cal-ics { padding: 0; border: 0; background: none; font: 600 var(--dc-fs-sm) var(--dc-font); color: var(--dc-ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dc-cal-tiendas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.dc .dc-cal-tiendas a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--dc-line); border-radius: var(--dc-pill); font-size: 13px; font-weight: 600; color: var(--dc-ink); text-decoration: none; background: var(--dc-surface); }
body.dc .dc-cal-tiendas a:hover { border-color: var(--dc-ink); }
.dc-cal-logo { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #FFF; align-items: center; justify-content: center; }
.dc-cal-logo img { width: 100%; height: 100%; object-fit: contain; }
.dc-cal-logo .dc-logo-fallback { font-size: 10px; }
.dc-cal-cupones { margin-top: var(--dc-s2); padding-top: var(--dc-s3); border-top: 1px dashed var(--dc-line); }
.dc-cal-cupones-t { margin: 0; font-size: 13px; font-weight: 700; color: var(--dc-muted); }
.dc-cal-sin ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--dc-s3); }
.dc-cal-sin > ul > li { padding: var(--dc-s5); border: 1px dashed var(--dc-line); border-radius: var(--dc-r-lg); background: var(--dc-surface); display: flex; flex-direction: column; gap: 6px; }
body.dc .dc-cal-sin h2 { margin: 0 0 var(--dc-s4); font-size: var(--dc-fs-xl); }
body.dc .dc-cal-sin h3 { margin: 0; font-size: var(--dc-fs-lg); }
.dc-cal-sin p { margin: 0; font-size: var(--dc-fs-md); line-height: 1.55; color: var(--dc-ink-2); }

/* ---------- Calculadora ---------- */
.dc-calc { padding: 0; overflow: hidden; }
.dc-calc-tabs { display: flex; gap: 4px; padding: 8px; background: var(--dc-bg); border-bottom: 1px solid var(--dc-line); overflow-x: auto; scrollbar-width: none; }
.dc-calc-tabs::-webkit-scrollbar { display: none; }
body.dc .dc-calc-tabs button {
	flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--dc-r-sm); background: transparent;
	font: 600 var(--dc-fs-sm) var(--dc-font); color: var(--dc-ink-3); cursor: pointer; white-space: nowrap;
}
body.dc .dc-calc-tabs button:hover { background: var(--dc-line-soft); }
body.dc .dc-calc-tabs button[aria-selected="true"] { background: var(--dc-ink); color: #FFF; }
.dc-calc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s5) var(--dc-s7); padding: var(--dc-s7); align-items: start; }
.dc-calc-panel[hidden] { display: none; }
body.dc .dc-calc-panel h2 { grid-column: 1 / -1; margin: 0; font-size: var(--dc-fs-xl); }
.dc-calc-form { display: flex; flex-direction: column; gap: var(--dc-s4); margin: 0; }
.dc-f { display: flex; flex-direction: column; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.dc-f > span:first-child, .dc-f legend { font-size: var(--dc-fs-sm); font-weight: 700; color: var(--dc-ink); padding: 0; }
.dc-f small { font-weight: 500; color: var(--dc-muted); }
.dc-in { display: flex; align-items: stretch; min-width: 0; border: 1.5px solid #D9D4D3; border-radius: 12px; background: #FFF; overflow: hidden; }
.dc-in:focus-within { border-color: var(--dc-ink); }
body.dc .dc-tool .dc-in input, body.dc .dc-tool .dc-in select {
	flex: 1 1 auto; min-width: 0; height: 50px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	font: 600 18px var(--dc-font); color: var(--dc-ink); font-variant-numeric: tabular-nums; outline: none;
}
body.dc .dc-tool .dc-in select { cursor: pointer; }
body.dc .dc-tool .dc-in input + select { flex: 0 0 auto; width: auto; padding: 0 10px; border-left: 1.5px solid #ECE8E7; background: var(--dc-bg); font-size: 16px; }
.dc-in i { display: flex; align-items: center; padding: 0 14px; font-style: normal; font-weight: 700; color: var(--dc-muted); background: var(--dc-bg); border-left: 1.5px solid #ECE8E7; }
.dc-f-seg { gap: 8px; }
.dc-f-seg label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: var(--dc-fs-md); }
.dc-f-seg input { width: 18px; height: 18px; accent-color: var(--dc-ink); margin: 0; }

.dc-calc-res { display: flex; flex-direction: column; gap: var(--dc-s3); padding: var(--dc-s6); border-radius: var(--dc-r-lg); background: var(--dc-bg); min-width: 0; }
.dc-calc-big { margin: 0; display: flex; flex-direction: column; }
.dc-calc-big span { font-size: var(--dc-fs-sm); font-weight: 700; color: var(--dc-muted); }
.dc-calc-big b { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; color: var(--dc-ink); font-variant-numeric: tabular-nums; }
.dc-calc-sub { margin: 0; font-size: var(--dc-fs-base); color: var(--dc-ink-2); }
.dc-calc-sub b { color: var(--t-ok); }
.dc-calc-exp { margin: 0; font-size: var(--dc-fs-sm); line-height: 1.55; color: var(--dc-ink-2); }
body.dc .dc-calc-exp a { text-decoration: underline; }
.dc-calc-tabla { width: 100%; border-collapse: collapse; font-size: var(--dc-fs-sm); font-variant-numeric: tabular-nums; }
body.dc .dc-calc-tabla th, body.dc .dc-calc-tabla td { padding: 10px 8px; border: 0; border-bottom: 1px solid var(--dc-line); text-align: right; background: none; }
body.dc .dc-calc-tabla th:first-child, body.dc .dc-calc-tabla td:first-child { text-align: left; }
body.dc .dc-calc-tabla thead th { font-size: 12px; font-weight: 700; color: var(--dc-muted); text-transform: uppercase; letter-spacing: .04em; }
.dc-calc-tabla tr.is-best td { font-weight: 700; color: var(--t-ok); background: var(--t-ok-bg); }
.dc-calc-tabla small { font-weight: 500; color: var(--dc-muted); }
.dc-calc-dl { margin: 0; display: flex; flex-direction: column; }
.dc-calc-dl div { display: flex; justify-content: space-between; gap: var(--dc-s4); padding: 10px 0; border-bottom: 1px solid var(--dc-line); font-variant-numeric: tabular-nums; }
.dc-calc-dl dt { color: var(--dc-ink-2); }
.dc-calc-dl dd { margin: 0; font-weight: 700; }
.dc-calc-dl .is-total dd { font-size: 24px; }
.dc-calc-pcts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--dc-s3); }
.dc-calc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: var(--dc-s4); border-radius: var(--dc-r-lg); background: var(--dc-bg); }
.dc-calc-row p { margin: 0; font-weight: 600; color: var(--dc-ink-2); }
.dc-calc-row .dc-in { width: 130px; }
.dc-calc-row output { font-size: var(--dc-fs-base); color: var(--dc-ink-2); }
.dc-calc-row output b { font-size: 22px; color: var(--dc-ink); }
.dc-calc-kilo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dc-s4); }
.dc-calc-kilo-row { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: var(--dc-s4); border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg); min-width: 0; }
.dc-calc-kilo-row legend { padding: 0 6px; font-weight: 700; }
.dc-calc-kilo-row output { min-height: 24px; font-size: var(--dc-fs-md); }
.dc-calc-kilo-row output b { font-size: 20px; }
#precio-kilo > .dc-calc-exp { grid-column: 1 / -1; font-size: var(--dc-fs-base); font-weight: 600; }

.dc-calc-tienda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s4) var(--dc-s7); padding: var(--dc-s7); }
body.dc .dc-calc-tienda h2 { margin: 0 0 var(--dc-s2); font-size: var(--dc-fs-xl); }
.dc-calc-tienda p { margin: 0; color: var(--dc-ink-2); line-height: 1.55; }
.dc-calc-tienda-form { display: flex; gap: 10px; align-self: center; }
body.dc .dc-calc-tienda-form input { flex: 1; min-width: 0; height: 50px; border: 1.5px solid #D9D4D3; border-radius: 12px; padding: 0 14px; font: 16px var(--dc-font); color: var(--dc-ink); background: #FFF; box-sizing: border-box; }
body.dc .dc-calc-tienda-form input:focus { border-color: var(--dc-ink); outline: none; }
body.dc .dc-calc-tienda-form .dc-btn { flex: 0 0 auto; min-height: 50px; border: 0; cursor: pointer; font-family: var(--dc-font); }
.dc-calc-tienda-res { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--dc-s3); }
.dc-calc-tienda-res:empty { display: none; }

/* ---------- Precio de la luz ---------- */
.dc-luz-barata { --c: var(--t-ok); --cb: var(--t-ok-bg); }
.dc-luz-media { --c: var(--t-mid); --cb: var(--t-mid-bg); }
.dc-luz-cara { --c: var(--t-bad); --cb: var(--t-bad-bg); }
.dc-luz-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--dc-s4); }
.dc-luz-now { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--dc-s6); border-radius: var(--dc-r-xl); background: var(--cb); border: 1.5px solid var(--c); }
.dc-luz-now p { margin: 0; font-size: var(--dc-fs-sm); font-weight: 700; color: var(--dc-ink-2); }
.dc-luz-now b { font-size: 52px; line-height: 1; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.dc-luz-now b small { font-size: 18px; letter-spacing: 0; color: var(--dc-ink-2); }
.dc-luz-now span { font-size: var(--dc-fs-md); font-weight: 600; color: var(--dc-ink-2); }
.dc-luz-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-s3); }
.dc-luz-stats > div { padding: var(--dc-s4) var(--dc-s5); border-radius: var(--dc-r-lg); background: var(--dc-surface); border: 1px solid var(--dc-line); }
.dc-luz-stats dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--dc-muted)); }
.dc-luz-stats dd { margin: 4px 0 0; font-size: var(--dc-fs-md); color: var(--dc-ink-2); font-variant-numeric: tabular-nums; }
.dc-luz-stats dd b { font-size: 24px; color: var(--dc-ink); }

.dc-luz-dias { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s4); }
.dc-luz-dias-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dc-s3); }
body.dc .dc-luz-dias h2 { margin: 0; font-size: var(--dc-fs-xl); }
.dc-luz-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dc-bg); }
body.dc .dc-luz-tabs button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 700 var(--dc-fs-sm) var(--dc-font); color: var(--dc-ink-3); cursor: pointer; }
.dc-luz-tabs button small { font-weight: 500; opacity: .75; }
body.dc .dc-luz-tabs button[aria-selected="true"] { background: var(--dc-ink); color: #FFF; }
.dc-luz-svg { display: block; width: 100%; height: auto; aspect-ratio: 720 / 240; max-width: 100%; }
.dc-luz-grid { stroke: var(--dc-line); stroke-width: 1; }
.dc-luz-ax { font: 600 11px var(--dc-font); fill: var(--dc-muted); }
.dc-luz-bar { fill: var(--c); opacity: .85; }
.dc-luz-bar.is-now { opacity: 1; stroke: var(--dc-ink); stroke-width: 2; }
.dc-luz-leyenda { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--dc-muted); }
.dc-luz-leyenda span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dc-ink-2); }
.dc-luz-leyenda span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.dc-luz-leyenda .is-now::before { background: transparent; border: 2px solid var(--dc-ink); box-sizing: border-box; }
.dc-luz-man-res { margin: 0; font-size: var(--dc-fs-md); line-height: 1.55; color: var(--dc-ink-2); }
.dc-luz-dias [role="tabpanel"] { display: flex; flex-direction: column; gap: var(--dc-s3); }
body.dc .dc-luz-det { margin: 0; padding: 0; border-top: 1px solid var(--dc-line); }
.dc-luz-det summary { min-height: var(--dc-tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: var(--dc-fs-sm); color: var(--dc-ink); }
.dc-luz-tabla { width: 100%; border-collapse: collapse; font-size: var(--dc-fs-sm); font-variant-numeric: tabular-nums; }
body.dc .dc-luz-tabla th, body.dc .dc-luz-tabla td { padding: 8px 10px; border: 0; border-bottom: 1px solid var(--dc-line-soft); text-align: left; background: none; font-weight: 500; }
body.dc .dc-luz-tabla thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dc-muted); }
.dc-luz-tabla tr.is-now { background: var(--dc-bg); }
.dc-luz-tabla tr.is-now th { font-weight: 700; }
.dc-luz-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--c); }
.dc-luz-tabla small { color: var(--c); font-weight: 700; }
.dc-luz-calc { padding: var(--dc-s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s5) var(--dc-s7); }
body.dc .dc-luz-calc h2 { grid-column: 1 / -1; margin: 0; font-size: var(--dc-fs-xl); text-wrap: balance; }
.dc-luz-nota { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--dc-muted); }
.dc-luz-consumo { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s3); }
body.dc .dc-luz-consumo h2 { margin: 0; font-size: var(--dc-fs-xl); }
.dc-luz-consumo > p { margin: 0; color: var(--dc-ink-2); }
.dc-luz-scroll { overflow-x: auto; }
.dc-luz-tabla--ap th small { display: block; margin-top: 2px; font-weight: 500; color: var(--dc-muted); font-size: 12px; line-height: 1.4; }
.dc-luz-tabla--ap tr { scroll-margin-top: 90px; }
.dc-luz-tabla--ap tr:target { background: var(--t-mid-bg); }
.dc-luz-ahorro { max-width: 820px; }
.dc-luz-fuente { margin: calc(-1 * var(--dc-s4)) 0 0; font-size: 13px; color: var(--dc-muted); }
body.dc .dc-luz-fuente a { color: inherit; text-decoration: underline; }
.dc-luz-error { padding: var(--dc-s6); }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
	.dc-tool .dc-container { gap: var(--dc-s6); }
	body.dc .dc-tool-head h1 { font-size: 30px; }
	.dc-tool-intro { font-size: var(--dc-fs-base); }
	.dc-tool-sub, .dc-calc-tienda, .dc-luz-calc { grid-template-columns: minmax(0, 1fr); padding: var(--dc-s5); gap: var(--dc-s4); }
	.dc-cal-hero { grid-template-columns: minmax(0, 1fr); padding: var(--dc-s5); }
	body.dc .dc-cal-hero h2 { font-size: 26px; }
	.dc-cal-count-n span { min-width: 0; flex: 1; }
	.dc-cal-count-n b { font-size: 28px; }
	.dc-cal-hero-cta > * { flex: 1 1 100%; }
	.dc-cal-ev { grid-template-columns: 52px minmax(0, 1fr); gap: var(--dc-s3); padding: var(--dc-s4); }
	.dc-cal-ev-fecha { height: 56px; }
	.dc-calc-panel { grid-template-columns: minmax(0, 1fr); padding: var(--dc-s5); }
	.dc-calc-res { padding: var(--dc-s4); }
	.dc-calc-big b { font-size: 40px; }
	.dc-calc-kilo { grid-template-columns: minmax(0, 1fr); }
	.dc-calc-row .dc-in { width: 110px; }
	.dc-calc-tienda-form { flex-direction: column; }
	.dc-luz-hero { grid-template-columns: minmax(0, 1fr); }
	.dc-luz-now b { font-size: 44px; }
	.dc-luz-stats dd b { font-size: 20px; }
	.dc-luz-dias, .dc-luz-consumo { padding: var(--dc-s4); }
	.dc-luz-chart { overflow-x: auto; margin: 0 calc(-1 * var(--dc-s4)); padding: 0 var(--dc-s4); }
	.dc-luz-chart .dc-luz-svg { min-width: 620px; }
	.dc-cal-cupones { margin-left: calc(-52px - var(--dc-s3)); }
}

/* Luz: tooltip de las gráficas y evolución */
.dc-luz-hit { fill: transparent; }
.dc-luz-col { cursor: crosshair; outline: none; }
.dc-luz-col.is-hover .dc-luz-bar, .dc-luz-col:focus-visible .dc-luz-bar { opacity: 1; filter: brightness(1.12); }
.dc-luz-col.is-hover .dc-luz-hit, .dc-luz-col:focus-visible .dc-luz-hit { fill: rgba(26, 20, 20, .05); }
.dc-luz-tip {
	position: fixed; z-index: 1000; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
	padding: 8px 12px; border-radius: 10px; background: var(--dc-ink); color: #FFF;
	font: 500 13px/1.35 var(--dc-font); font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px rgba(26, 20, 20, .25); max-width: 260px;
}
.dc-luz-tip[hidden] { display: none; }
.dc-luz-tip b { font-size: 14px; }
.dc-luz-tip span { color: #E3DCDB; }
.dc-luz-evol { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s4); }
body.dc .dc-luz-evol h2 { margin: 0; font-size: var(--dc-fs-xl); }
.dc-luz-evol [role="tabpanel"] { display: flex; flex-direction: column; }
.dc-luz-cmp { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--dc-s3); }
.dc-luz-cmp > div { padding: var(--dc-s3) var(--dc-s4); border-radius: var(--dc-r-md); background: var(--dc-bg); }
.dc-luz-cmp dt { font-size: 12px; font-weight: 700; color: var(--dc-muted); line-height: 1.35; }
.dc-luz-cmp dd { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--dc-ink-2); font-variant-numeric: tabular-nums; }
.dc-luz-cmp dd b { font-size: 22px; color: var(--dc-ink); }
.dc-luz-cmp .is-up dd b, .dc-luz-tabla td.is-up { color: var(--t-bad); }
.dc-luz-cmp .is-down dd b, .dc-luz-tabla td.is-down { color: var(--t-ok); }
.dc-luz-tabla td.is-up, .dc-luz-tabla td.is-down { font-weight: 700; }
.dc-luz-tabla th small { font-weight: 500; color: var(--dc-muted); }
@media (max-width: 860px) {
	.dc-luz-evol { padding: var(--dc-s4); }
	.dc-luz-chart .dc-luz-svg { min-width: var(--min-w, 620px); }
	.dc-luz-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.dc .dc-luz-det > summary { margin: 0; }
body.dc .dc-luz-det[open] > summary { margin-bottom: var(--dc-s2); }

/* ---------- Consumo de electrodomésticos ---------- */
.dc-cons-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--t-mid-bg); color: var(--t-mid); }
.dc-cons-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: var(--dc-s4) var(--dc-s5); border-radius: var(--dc-r-lg); background: var(--dc-ink); color: #FFF; }
.dc-cons-precio-t { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-red-on-dark); }
.dc-cons-precio-op { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.dc-cons-precio-op > label { position: relative; cursor: pointer; }
.dc-cons-precio-op > label > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-cons-precio-op > label > span { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 8px 14px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); line-height: 1.25; }
.dc-cons-precio-op b { font-size: 14px; }
.dc-cons-precio-op small { font-size: 12px; color: #CFC7C5; font-variant-numeric: tabular-nums; }
.dc-cons-precio-op > label > input:checked + span { background: #FFF; border-color: #FFF; color: var(--dc-ink); }
.dc-cons-precio-op > label > input:checked + span small { color: var(--dc-ink-2); }
.dc-cons-precio-op > label > input:focus-visible + span { outline: 2px solid #FFF; outline-offset: 2px; }
body.dc .dc-cons-mio small input { width: 72px; height: 24px; padding: 0 6px; margin: 2px 0 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; background: transparent; color: inherit; font: 600 13px var(--dc-font); }
body.dc .dc-cons-mio input:checked + span small input { border-color: var(--dc-line); }
.dc-cons-precio-nota { flex-basis: 100%; margin: 0; font-size: 12px; color: #CFC7C5; }
body.dc .dc-cons-precio-nota a { color: #FFF; text-decoration: underline; }

body.dc .dc-cons-top h2, body.dc .dc-cons-sabias h2 { margin: 0 0 var(--dc-s3); font-size: var(--dc-fs-xl); }
.dc-cons-top ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
body.dc .dc-cons-top a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px; border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg); background: var(--dc-surface); color: var(--dc-ink-2); text-decoration: none; transition: border-color .15s, transform .15s; }
body.dc .dc-cons-top a:hover { border-color: var(--dc-ink); transform: translateY(-2px); }
.dc-cons-top-n { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--dc-ink); }
.dc-cons-top b { font-size: 22px; line-height: 1.1; color: var(--dc-ink); font-variant-numeric: tabular-nums; }
.dc-cons-top small { font-size: 12px; color: var(--dc-muted); }

.dc-cons-sub { margin: calc(-1 * var(--dc-s2)) 0 var(--dc-s3); font-size: 13px; color: var(--dc-muted); }
.dc-cons-sabias ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
body.dc .dc-cons-sabias a { display: flex; gap: 12px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: var(--dc-r-lg); background: var(--t-mid-bg); color: var(--dc-ink-2); text-decoration: none; font-size: 14px; line-height: 1.5; border: 1px solid transparent; }
body.dc .dc-cons-sabias a:hover { border-color: var(--t-mid); }
.dc-cons-sabias .dc-cons-ico { width: 34px; height: 34px; background: #FFF; }
.dc-cons-sabias b { color: var(--dc-ink); }

.dc-cons-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; flex-direction: column; gap: 10px; margin: 0 calc(-1 * var(--dc-gutter)); padding: 10px var(--dc-gutter); background: rgba(246, 245, 244, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dc-line); }
.dc-cons-buscar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1.5px solid #D9D4D3; border-radius: 12px; background: #FFF; color: var(--dc-muted); max-width: 520px; }
.dc-cons-buscar:focus-within { border-color: var(--dc-ink); }
body.dc .dc-cons-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 16px var(--dc-font); color: var(--dc-ink); padding: 0; box-shadow: none; }
.dc-cons-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dc-cons-nav ul::-webkit-scrollbar { display: none; }
body.dc .dc-cons-nav ul a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 36px; padding: 0 12px; border: 1px solid var(--dc-line); border-radius: var(--dc-pill); background: var(--dc-surface); font-size: 13px; font-weight: 600; color: var(--dc-ink); text-decoration: none; }
body.dc .dc-cons-nav ul a.is-on, body.dc .dc-cons-nav ul a:hover { background: var(--dc-ink); border-color: var(--dc-ink); color: #FFF; }
.dc-cons-vacio { margin: 0; padding: var(--dc-s5); border-radius: var(--dc-r-lg); background: var(--dc-surface); border: 1px dashed var(--dc-line); color: var(--dc-ink-2); }

.dc-cons-est { display: flex; flex-direction: column; gap: var(--dc-s4); scroll-margin-top: 140px; }
.dc-cons-est > header { display: flex; align-items: center; gap: 14px; }
.dc-cons-est-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--dc-ink); color: #FFF; flex: 0 0 auto; }
body.dc .dc-cons-est h2 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.dc-cons-est > header p { margin: 2px 0 0; color: var(--dc-ink-2); font-size: var(--dc-fs-md); }
.dc-cons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dc-cons-card { display: flex; flex-direction: column; gap: 10px; padding: var(--dc-s5); border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg); background: var(--dc-surface); scroll-margin-top: 150px; }
.dc-cons-card.is-top { border-color: #E9C27A; box-shadow: inset 0 3px 0 #E9A21F; }
.dc-cons-card:target { border-color: var(--dc-ink); box-shadow: 0 0 0 3px rgba(26, 20, 20, .12); }
.dc-cons-card-h { display: flex; align-items: center; gap: 10px; }
body.dc .dc-cons-card h3 { margin: 0; font-size: var(--dc-fs-base); line-height: 1.3; }
.dc-cons-coste { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.dc-cons-coste b { font-size: 30px; line-height: 1.05; letter-spacing: -.02em; color: var(--dc-ink); font-variant-numeric: tabular-nums; }
.dc-cons-coste span { font-size: 13px; color: var(--dc-muted); }
.dc-cons-dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--dc-line-soft); }
.dc-cons-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--dc-line-soft); font-size: 13px; }
.dc-cons-dl dt { color: var(--dc-muted); flex: 0 0 auto; }
.dc-cons-dl dd { margin: 0; text-align: right; color: var(--dc-ink-2); font-variant-numeric: tabular-nums; }
.dc-cons-dl dd b { color: var(--dc-ink); font-size: 14px; }
.dc-cons-dl dd small { display: block; color: var(--dc-muted); font-size: 11px; }
body.dc .dc-cons-card details { margin: 0; padding: 0; border: 0; }
body.dc .dc-cons-card summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--dc-ink); margin: 0; padding: 2px 0; }
.dc-cons-card details p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--dc-ink-2); }
body.dc .dc-cons-cuando { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--dc-red-text); }
.dc-cons-coche { margin-top: var(--dc-s2); padding: var(--dc-s6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s4) var(--dc-s7); align-items: start; scroll-margin-top: 150px; }
body.dc .dc-cons-coche h3 { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--dc-fs-xl); }
.dc-cons-coche .dc-calc-sub b { color: var(--t-ok); }
.dc-cons-calc { padding: var(--dc-s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s4) var(--dc-s7); align-items: start; scroll-margin-top: 150px; }
body.dc .dc-cons-calc h2 { grid-column: 1 / -1; margin: 0; font-size: var(--dc-fs-xl); }
.dc-cons-calc > p { grid-column: 1 / -1; margin: calc(-1 * var(--dc-s2)) 0 0; color: var(--dc-ink-2); }
@media (max-width: 1000px) { .dc-cons-top ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.dc-cons-precio { padding: var(--dc-s4); }
	.dc-cons-precio-op { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dc-cons-top ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dc-cons-sabias ul { grid-template-columns: minmax(0, 1fr); }
	.dc-cons-coche, .dc-cons-calc { grid-template-columns: minmax(0, 1fr); padding: var(--dc-s5); }
	body.dc .dc-cons-est h2 { font-size: 22px; }
	.dc-cons-est-ico { width: 44px; height: 44px; }
	.dc-cons-grid { grid-template-columns: minmax(0, 1fr); }
}
.dc-luz-cons-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.dc .dc-luz-cons-mini a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--dc-line); border-radius: var(--dc-r-md); color: var(--dc-ink); text-decoration: none; font-size: 14px; font-weight: 600; }
body.dc .dc-luz-cons-mini a:hover { border-color: var(--dc-ink); }
.dc-luz-cons-mini .dc-cons-ico { grid-row: 1 / 3; }
.dc-luz-cons-mini b { font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.dc-luz-cons-mini small { grid-column: 2 / 4; font-size: 12px; font-weight: 500; color: var(--dc-muted); }
body.dc .dc-luz-ir-consumo { align-self: flex-start; }
@media (max-width: 860px) { .dc-luz-cons-mini { grid-template-columns: minmax(0, 1fr); } body.dc .dc-luz-ir-consumo { align-self: stretch; text-align: center; } }
body.dc .dc-cons-dl > div { margin: 0; }
body.dc .dc-cons-dl dt, body.dc .dc-cons-dl dd { margin: 0; padding: 0; line-height: 1.35; }
body.dc .dc-cons-card details > summary { list-style: revert; line-height: 1.4; }
body.dc .dc-cons-card details { line-height: 1.4; }

/* ---------- Precio de la gasolina ---------- */
.dc-gas-medias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dc-gas-media { display: flex; flex-direction: column; gap: 4px; padding: var(--dc-s5); border-radius: var(--dc-r-lg); background: var(--dc-surface); border: 1px solid var(--dc-line); }
.dc-gas-media.is-main { background: var(--dc-ink); border-color: var(--dc-ink); color: #FFF; }
.dc-gas-media-t { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); }
.dc-gas-media.is-main .dc-gas-media-t { color: var(--dc-red-on-dark); }
.dc-gas-media > b { font-size: 38px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dc-gas-media > b small { font-size: 16px; letter-spacing: 0; opacity: .8; }
.dc-gas-media-v { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dc-gas-var { display: inline-flex; padding: 2px 8px; border-radius: var(--dc-pill); font-size: 12px; font-weight: 700; background: var(--dc-line-soft); color: var(--dc-ink-2); }
.dc-gas-var.is-up { background: var(--t-bad-bg); color: var(--t-bad); }
.dc-gas-var.is-down { background: var(--t-ok-bg); color: var(--t-ok); }
.dc-gas-media-r { margin: 0; font-size: 13px; line-height: 1.4; color: var(--dc-ink-2); }
.dc-gas-media.is-main .dc-gas-media-r { color: #E3DCDB; }
.dc-gas-media.is-main .dc-gas-media-r b { color: #FFF; }

.dc-gas-cerca { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s4); scroll-margin-top: 20px; }
body.dc .dc-gas-cerca h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--dc-fs-xl); }
.dc-gas-cerca-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
body.dc .dc-gas-cerca-f .dc-btn { min-height: 48px; border: 0; cursor: pointer; gap: 8px; font-family: var(--dc-font); }
.dc-gas-o { font-size: 13px; color: var(--dc-muted); }
body.dc .dc-gas-cerca-f input[type="search"] { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid #D9D4D3; border-radius: 12px; background: #FFF; font: 500 16px var(--dc-font); color: var(--dc-ink); box-sizing: border-box; }
body.dc .dc-gas-cerca-f input[type="search"]:focus { border-color: var(--dc-ink); outline: none; }
body.dc .dc-gas-sel select { height: 48px; padding: 0 12px; border: 1.5px solid #D9D4D3; border-radius: 12px; background: #FFF; font: 600 15px var(--dc-font); color: var(--dc-ink); cursor: pointer; }
.dc-gas-cerca-sum { margin: 0 0 var(--dc-s2); font-size: var(--dc-fs-md); color: var(--dc-ink-2); }

.dc-gas-rank { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s4); }
body.dc .dc-gas-rank h2 { margin: 0; font-size: var(--dc-fs-xl); }
.dc-gas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dc-gas-lista > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--dc-line-soft); }
.dc-gas-lista > li:first-child .dc-gas-pos { background: var(--t-ok); color: #FFF; }
.dc-gas-pos { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--dc-line-soft); font-size: 13px; font-weight: 700; color: var(--dc-ink-2); }
.dc-gas-est { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-gas-est b { font-size: var(--dc-fs-md); color: var(--dc-ink); }
.dc-gas-est span { font-size: 13px; color: var(--dc-ink-2); }
body.dc .dc-gas-est span a { color: var(--dc-red-text); }
.dc-gas-est small { font-size: 12px; color: var(--dc-muted); }
.dc-gas-precio { display: flex; flex-direction: column; align-items: flex-end; }
.dc-gas-precio b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--dc-ink); }
.dc-gas-precio small { font-size: 11px; color: var(--dc-muted); }
body.dc .dc-gas-ir { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--dc-line); border-radius: var(--dc-pill); font-size: 13px; font-weight: 700; color: var(--dc-ink); text-decoration: none; white-space: nowrap; }
body.dc .dc-gas-ir:hover { border-color: var(--dc-ink); }

.dc-gas-provs, .dc-gas-mun { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s3); scroll-margin-top: 20px; }
body.dc .dc-gas-provs h2, body.dc .dc-gas-mun h2 { margin: 0; font-size: var(--dc-fs-xl); }
.dc-gas-provs > p, .dc-gas-mun > p { margin: 0; color: var(--dc-ink-2); }
body.dc .dc-gas-tprov th a { color: var(--dc-ink); font-weight: 600; }
.dc-gas-tprov tr.is-down th, .dc-gas-tprov tr.is-down td { background: var(--t-ok-bg); }
.dc-gas-tprov tr.is-up th, .dc-gas-tprov tr.is-up td { background: var(--t-bad-bg); }
.dc-gas-evol-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
body.dc .dc-gas-evol-ctl button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: 700 13px var(--dc-font); color: var(--dc-ink-3); cursor: pointer; }
body.dc .dc-gas-evol-ctl button[aria-pressed="true"] { background: var(--dc-ink); color: #FFF; }
.dc-gas-viaje { padding: var(--dc-s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dc-s4) var(--dc-s7); align-items: start; scroll-margin-top: 20px; }
body.dc .dc-gas-viaje h2 { grid-column: 1 / -1; margin: 0; font-size: var(--dc-fs-xl); }
.dc-f-check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.dc-f-check input { width: 18px; height: 18px; accent-color: var(--dc-ink); margin: 0; }
.dc-gas-viaje .dc-calc-sub b { color: var(--t-ok); }
body.dc .dc-gas-todas h2 { margin: 0 0 var(--dc-s3); font-size: var(--dc-fs-xl); }
.dc-gas-todas .dc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1000px) { .dc-gas-medias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.dc-gas-media > b { font-size: 30px; }
	.dc-gas-cerca, .dc-gas-rank, .dc-gas-provs, .dc-gas-mun { padding: var(--dc-s4); }
	.dc-gas-viaje { grid-template-columns: minmax(0, 1fr); padding: var(--dc-s5); }
	.dc-gas-cerca-f .dc-btn { flex: 1 1 100%; }
	.dc-gas-o { display: none; }
	.dc-gas-sel { flex: 1 1 40%; }
	body.dc .dc-gas-sel select { width: 100%; }
	.dc-gas-lista > li { grid-template-columns: 28px minmax(0, 1fr) auto; }
	.dc-gas-lista .dc-gas-ir { grid-column: 2 / 4; justify-self: start; min-height: 32px; }
}
body.dc .dc-luz-tabla tbody th { text-transform: none; letter-spacing: 0; font-size: var(--dc-fs-sm); }
body.dc .dc-gas-rank h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--dc-muted); }
/* Gasolina: introducción y minigráficos */
.dc-gas-ctx { max-width: 860px; }
.dc-gas-ctx p { margin: 0 0 var(--dc-s3); font-size: var(--dc-fs-base); }
.dc-gas-ctx p:last-child { margin-bottom: 0; }
.dc-gas-ctx b { color: var(--dc-ink); }
body.dc .dc-gas-ctx a { color: var(--dc-red-text); }
.dc-gas-medias-t { grid-column: 1 / -1; margin: 0 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); }
.dc-gas-spark { display: block; width: 100%; height: 34px; margin: 4px 0 2px; overflow: visible; }
.dc-gas-spark polyline { fill: none; stroke: var(--dc-muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dc-gas-spark polygon { fill: currentColor; opacity: .08; }
.dc-gas-spark circle { fill: var(--dc-muted); }
.dc-gas-spark.is-up polyline { stroke: var(--t-bad); } .dc-gas-spark.is-up circle { fill: var(--t-bad); } .dc-gas-spark.is-up { color: var(--t-bad); }
.dc-gas-spark.is-down polyline { stroke: var(--t-ok); } .dc-gas-spark.is-down circle { fill: var(--t-ok); } .dc-gas-spark.is-down { color: var(--t-ok); }
.dc-gas-media.is-main .dc-gas-spark.is-up polyline { stroke: #FF8A99; } .dc-gas-media.is-main .dc-gas-spark.is-up circle { fill: #FF8A99; } .dc-gas-media.is-main .dc-gas-spark.is-up { color: #FF8A99; }
.dc-gas-media.is-main .dc-gas-spark.is-down polyline { stroke: #7FD9A0; } .dc-gas-media.is-main .dc-gas-spark.is-down circle { fill: #7FD9A0; } .dc-gas-media.is-main .dc-gas-spark.is-down { color: #7FD9A0; }

/* Gasolina: cadenas (barras horizontales) */
.dc-gas-cad { padding: var(--dc-s6); display: flex; flex-direction: column; gap: var(--dc-s3); }
body.dc .dc-gas-cad h2 { margin: 0; font-size: var(--dc-fs-xl); }
body.dc .dc-gas-cad h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--dc-muted); }
.dc-gas-cad-media { margin: 0 0 var(--dc-s2); font-size: 13px; color: var(--dc-ink-2); }
.dc-gas-cad-media .is-down, .dc-gas-cad-media .is-up { display: inline-flex; align-items: center; gap: 5px; }
.dc-gas-cad-media .is-down::before, .dc-gas-cad-media .is-up::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--t-ok); }
.dc-gas-cad-media .is-up::before { background: var(--t-bad); }
.dc-gas-cad-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dc-gas-cad-l > li { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) 92px; gap: 12px; align-items: center; }
.dc-gas-cad-n { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: var(--dc-ink); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.dc-gas-cad-n small { font-size: 11px; font-weight: 500; color: var(--dc-muted); }
.dc-gas-cad-b { position: relative; height: 22px; border-radius: 6px; background: var(--dc-bg); }
.dc-gas-cad-b::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: var(--media); width: 2px; background: var(--dc-ink); opacity: .55; border-radius: 1px; }
.dc-gas-cad-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--dc-muted); opacity: .85; }
.dc-gas-cad-l > li.is-down .dc-gas-cad-b i { background: var(--t-ok); }
.dc-gas-cad-l > li.is-up .dc-gas-cad-b i { background: var(--t-bad); }
.dc-gas-cad-v { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.dc-gas-cad-v b { font-size: 15px; color: var(--dc-ink); }
.dc-gas-cad-v small { font-size: 11px; font-weight: 700; color: var(--dc-muted); }
.dc-gas-cad-l > li.is-down .dc-gas-cad-v small { color: var(--t-ok); }
.dc-gas-cad-l > li.is-up .dc-gas-cad-v small { color: var(--t-bad); }
@media (max-width: 860px) {
	.dc-gas-cad { padding: var(--dc-s4); }
	.dc-gas-cad-l > li { grid-template-columns: minmax(0, 1fr) 78px; grid-template-areas: "n v" "b b"; gap: 4px 10px; }
	.dc-gas-cad-n { grid-area: n; }
	.dc-gas-cad-v { grid-area: v; }
	.dc-gas-cad-b { grid-area: b; height: 14px; }
}