/* ═══════════════════════════════════════════════════════════════════
   Motorhoy 2.0.42 · Masthead «Señales» (modo claro desde 2.0.44)
   El surtidor (combustible) · logo · el panel de mensaje variable de la DGT.
   Dos piezas gemelas: mismo ancho, alto, cabecera y pie; su canto interior
   cortado a 10° como la caja roja del logo, con un filo rojo.
   Solo escritorio (≥ 1025 px). Inter en todo.
   ═══════════════════════════════════════════════════════════════════ */
.et-hd__mast-in { gap: 28px; padding-top: 18px; padding-bottom: 18px; }

.mh-sg {
    --sk: 22px;                 /* el corte a 10° sobre 126 px de alto */
    --edge: 4px;                /* el filo rojo */
    --red: #FF3131; --ink: #0B0B0C; --green: #15A34A;
    --t1: #0B0B0C; --t2: #2B2B2E; --t3: #76767A; --t4: #A3A3A7;
    --scr: #FCFCFA; --line: #E4E3DE;
    --ease: cubic-bezier(.2, .7, .2, 1);
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    width: 100%; max-width: 404px; height: 126px;
    padding: 12px 16px 11px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--t1); text-decoration: none;
    background: transparent;
    border-radius: 6px;   /* 2.0.46 · esquinas algo redondeadas (las exteriores; el canto rojo sigue a 10°) */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.mh-sg::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--line);   /* 2.0.46 · fondo blanco con filo gris muy fino; el canto rojo sigue igual */
}
/* Surtidor (izquierda): canto derecho inclinado */
.mh-sg--fuel { grid-column: 1; justify-self: start; padding-right: calc(var(--sk) + 15px); clip-path: polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
.mh-sg--fuel::before { clip-path: polygon(0 0, calc(100% - var(--edge)) 0, calc(100% - var(--sk) - var(--edge)) 100%, 0 100%); --gx: 100%; }
/* Panel DGT (derecha): canto izquierdo inclinado, paralelo al otro (simetría de giro, como el logo) */
.mh-sg--dgt { grid-column: 3; justify-self: end; padding-left: calc(var(--sk) + 15px); clip-path: polygon(var(--sk) 0, 100% 0, 100% 100%, 0 100%); }
.mh-sg--dgt::before { clip-path: polygon(calc(var(--sk) + var(--edge)) 0, 100% 0, 100% 100%, var(--edge) 100%); --gx: 0%; }
/* El canto rojo: solo la franja inclinada (por debajo del blanco 2 px, sin halo en las esquinas redondeadas) */
.mh-sg::after { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--red); pointer-events: none; }
.mh-sg--fuel::after { clip-path: polygon(calc(100% - var(--edge) - 2px) 0, 100% 0, calc(100% - var(--sk)) 100%, calc(100% - var(--sk) - var(--edge) - 2px) 100%); }
.mh-sg--dgt::after { clip-path: polygon(var(--sk) 0, calc(var(--sk) + var(--edge) + 2px) 0, calc(var(--edge) + 2px) 100%, 0 100%); }
.et-hd a.mh-sg, .et-hd .mh-sg a { color: inherit; text-decoration: none; }

/* ── Cabecera de las piezas ── */
.mh-sg__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 13px; line-height: 1; white-space: nowrap; }
.mh-sg__t { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t1); }
.mh-sg__t em { display: inline-block; font-style: normal; color: var(--red); transform: skewX(-10deg); }
.mh-sg__src { font-size: 10.5px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.mh-sg__src b { font-weight: 800; color: var(--t1); }
.mh-sg__live { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 6px rgba(255, 49, 49, .55); }
.mh-sg__live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--red); opacity: 0; animation: mh-ping 2.2s var(--ease) infinite; }
@keyframes mh-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* ── La pantalla (común): hundida en el panel ── */
.mh-sg__scr {
    position: relative; display: block; overflow: hidden;
    height: 60px; margin-top: 9px;
    background: var(--scr);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 5px rgba(11, 11, 12, .06), 0 1px 0 #fff;
}

/* ── Surtidor: dos filas de monolito ── */
.mh-sg__rows { display: flex; flex-direction: column; }
.mh-sg__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px auto 40px; align-items: center; column-gap: 10px; height: 30px; padding: 0 10px 0 9px; }
.mh-sg__row + .mh-sg__row { box-shadow: inset 0 1px 0 var(--line); }
.mh-sg__tag { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: -.1px; color: var(--t1); border: 1.5px solid var(--ink); line-height: 1; }
.mh-sg__tag--e5 { border-radius: 50%; }            /* EN 16942: círculo, gasolina */
.mh-sg__tag--b7 { border-radius: 1px; width: 19px; height: 19px; }  /* EN 16942: cuadrado, gasóleo */
.mh-sg__name { font-size: 12.5px; font-weight: 600; letter-spacing: -.1px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-sg__spk { display: block; height: 18px; }
.mh-spk { display: block; overflow: visible; }
.mh-spk__a { fill: none; }
.mh-spk__l { fill: none; stroke: #9A9A9E; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.mh-spk__n { fill: var(--red); stroke: #fff; stroke-width: 1; }
.mh-sg__led { display: inline-flex; align-items: flex-end; gap: 4px; }
.mh-sg__led small { font-size: 9px; font-weight: 600; color: var(--t4); line-height: 1; margin-bottom: 1px; }
.mh-seg { display: block; overflow: visible; }
.mh-seg .l { fill: var(--red); transition: fill .3s; }
.mh-seg .o { fill: rgba(11, 11, 12, .055); }
.mh-sg--fuel:hover .mh-seg .l { fill: #E42626; }
.mh-sg__d { justify-self: end; font-size: 10.5px; font-weight: 800; letter-spacing: -.1px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t3); }
.mh-sg__d.is-down { color: var(--green); }
.mh-sg__d.is-up { color: var(--red); }

/* ── Panel de mensaje variable (DGT): matriz de puntos ámbar ── */
/* 2.0.45 · sin trama de puntos: texto y señales nítidos */
.mh-sg__pmv::before {   /* el brillo del cristal */
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(170deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 40%);
}
.mh-sg__msg { position: absolute; inset: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 0 12px 0 10px; visibility: hidden; }
.mh-sg__msg.is-on { visibility: visible; animation: mh-scan .44s steps(8, end) both; }
@keyframes mh-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mh-sg__pic { display: block; width: 44px; height: 44px; }
.mh-pic { display: block; width: 100%; height: 100%; overflow: visible; }
.mh-pic__ring { fill: #fff; stroke: var(--red); stroke-width: 4.4; stroke-linejoin: round; }
circle.mh-pic__ring { fill: var(--red); stroke: none; }
.mh-pic__bar { fill: #fff; }
.mh-pic__sym { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mh-sg__msg.is-on .mh-pic__ring { animation: mh-blink 1.5s steps(1) .44s 1 both; }
@keyframes mh-blink { 0%, 34%, 68% { opacity: 1; } 17%, 51% { opacity: .18; } 100% { opacity: 1; } }
.mh-sg__lines { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.mh-sg__lines b {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: clip;
    font-size: 14px; font-weight: 800; line-height: 1.1; letter-spacing: .6px;
    color: var(--ink);
}
.mh-sg__lines b + b { color: #4A4A4E; font-weight: 600; letter-spacing: .5px; }
.mh-sg__lines b.is-tight { letter-spacing: .1px !important; }
.mh-sg__lines b.is-tighter { letter-spacing: 0 !important; font-size: 12.5px !important; }
.mh-sg__pmv:hover .mh-sg__lines b:first-child { color: var(--red); }
.mh-sg__wait .mh-sg__lines { padding: 0 14px; }
.mh-sg__wait { font-size: 11.5px; line-height: 1.35; color: var(--t3); }
.mh-sg__rows ~ .mh-sg__wait, .mh-sg--fuel .mh-sg__wait { display: flex; align-items: center; padding: 0 12px; }

/* ── Pie de las piezas ── */
.mh-sg__ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 13px; margin-top: auto; font-size: 10.5px; font-weight: 500; line-height: 1; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mh-sg__ft > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mh-sg__ft b { font-weight: 700; color: var(--t1); }
.mh-sg__ft b.is-down { color: var(--green); }
.mh-sg__ft b.is-up { color: var(--red); }
.mh-sg__ft i { font-style: normal; margin: 0 6px; color: var(--t4); }
.mh-sg__go { flex: 0 0 auto; font-weight: 700; color: var(--t1); letter-spacing: .1px; }
.mh-sg__go span { display: inline-block; color: var(--red); transition: transform .25s var(--ease); }
.mh-sg--fuel:hover .mh-sg__go span, .mh-sg__go:hover span { transform: translateX(3px); }
.mh-sg__lv { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--t2); font-weight: 600; }
.mh-sg__lv > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mh-sg__lv i { width: 8px; height: 8px; border-radius: 1px; margin: 0; background: var(--lv, #9D9D9D); flex: 0 0 auto; }
.mh-sg__lv[data-lv="negro"] i { background: #0B0B0C; }
/* Barra partida de la rotación (como la de las video noticias) */
.mh-sg__pager { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.mh-sg__pager i { position: relative; display: block; width: 13px; height: 3px; margin: 0; background: #DCDBD6; overflow: hidden; transform: skewX(-10deg); }
.mh-sg__pager b { position: absolute; inset: 0; background: var(--t1); transform-origin: left; transform: scaleX(0); }
.mh-sg__pager i.is-done b { transform: scaleX(1); background: var(--ink); }
.mh-sg__pager i.is-on b { background: var(--red); animation: mh-fill var(--mh-dur, 6.5s) linear forwards; }
.mh-sg--dgt:hover .mh-sg__pager i.is-on b { animation-play-state: paused; }
@keyframes mh-fill { to { transform: scaleX(1); } }

/* ── Encendido del monolito (una vez por sesión): los segmentos se prueban y se asientan ── */
.mh-sg--fuel.is-boot .mh-seg .o { animation: mh-boot-o 1.15s steps(1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.mh-sg--fuel.is-boot .mh-seg .l { animation: mh-boot-l 1.15s steps(1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes mh-boot-o { 0% { fill: rgba(11, 11, 12, .055); } 12%, 58% { fill: var(--red); } 59%, 100% { fill: rgba(11, 11, 12, .055); } }
@keyframes mh-boot-l { 0% { fill: rgba(11, 11, 12, .055); } 12% { fill: var(--red); } 66% { fill: rgba(255, 49, 49, .25); } 72%, 100% { fill: var(--red); } }

/* ── Anchos intermedios ── */
@media (max-width: 1240px) {
    .mh-sg { max-width: 372px; }
    .et-hd__mast-in { gap: 22px; }
    .et-hd__mast-in > .et-pc-wordmark .et-pc-wordmark__img { height: 86px !important; }
    .mh-sg__row { grid-template-columns: 22px minmax(0, 1fr) auto 38px; column-gap: 9px; }
    .mh-sg__spk { display: none; }
    .mh-sg__lines b { font-size: 13px; letter-spacing: 1px; }
}
@media (max-width: 1140px) {
    .mh-sg { max-width: 352px; padding-left: 13px; }
    .et-hd__mast-in { gap: 18px; }
    .et-hd__mast-in > .et-pc-wordmark .et-pc-wordmark__img { height: 72px !important; }
    .mh-sg__lines b, .mh-sg__lines b + b { font-size: 12px; letter-spacing: .5px; }
    .mh-sg--fuel { padding-right: calc(var(--sk) + 12px); }
    .mh-sg--dgt { padding-left: calc(var(--sk) + 12px); padding-right: 13px; }
    .mh-sg__row { grid-template-columns: 22px minmax(0, 1fr) auto 36px; }
    .mh-sg__spk { display: none; }
    .mh-sg__src { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mh-sg__msg.is-on, .mh-sg__msg.is-on .mh-pic__ring, .mh-sg--fuel.is-boot .mh-seg .o, .mh-sg--fuel.is-boot .mh-seg .l, .mh-sg__live::after { animation: none !important; }
    .mh-sg__pager i.is-on b { animation-duration: 6.5s; }
}