/* DANER SOLAR · calc-mt.css
   SOLO los estilos del simulador de media tensión (/calculadora-media-tension).
   Sigue el patrón de la calculadora de bombeo (calc-bombeo.css): barra de pasos,
   un paso a la vez y panel lateral; aquí todo vive en un solo bloque (.mt-app) y
   el resultado aparece dentro de él, en lugar del formulario.
   La interfaz usa los tokens del sitio (daner.css). Va en archivo aparte para que
   solo la descargue esta página.

   Colores de las gráficas, validados con el revisor de paletas (contraste,
   daltonismo y separación) en claro y en oscuro (BITÁCORA 2026-10-15 (2)):
     --g-hoy     lo que se paga hoy a CFE (comparación)
     --g-sol     con paneles / generación solar (lo que se destaca)
     --g-ahorro  ahorro (verde del sitio)
   Rojo y verde nunca van juntos: un aumento se dibuja en --g-hoy con textura. */

:root {
  --g-hoy: #52657a;
  --g-sol: #fe9216;
  --g-ahorro: #1e9e6a;
  --g-rejilla: #e3edf5;
  --g-cero: #9fb2c3;
  --g-sup: #ffffff;
  --g-activo: #eef4fa;
  --g-alt: #3e95cf;      /* segunda curva del retorno (validada contra --g-sol) */
  --mt-tope: calc(var(--nav-h, 76px) + var(--sp-3));
}
:root[data-theme="dark"] {
  --g-hoy: #93a3b6;
  --g-sol: #cf760a;
  --g-ahorro: #2a9f6e;
  --g-rejilla: rgba(255, 255, 255, .09);
  --g-cero: rgba(255, 255, 255, .34);
  --g-sup: #0f2a44;
  --g-activo: rgba(255, 255, 255, .06);
  --g-alt: #4893c8;
}

.mt-oculto { display: none !important; }

/* ═══════ Cabecera: el personaje a la izquierda, señalando el texto ═══════ */
.pagina-head__inner.mt-hero { max-width: var(--contenido); }
.pagina-head { padding-bottom: var(--sp-6); }
.mt-hero { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--sp-5); align-items: center; }
.mt-hero__img { display: block; width: 100%; max-width: 330px; height: auto; justify-self: center; }
.mt-hero__texto { max-width: 46rem; }
.pagina-head .mt-hero__entrada { max-width: calc(60 * var(--ch)); }
.mt-ventajas { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .45rem; }
.mt-ventajas li { position: relative; padding-left: 1.4rem; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-ventajas li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 3px var(--sol-100); }
.mt-hero__cta { margin-top: var(--sp-4); }
@media (max-width: 900px) { .mt-hero { grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-4); } }
@media (max-width: 640px) {
  .pagina-head { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
  .mt-hero { grid-template-columns: 1fr; gap: var(--sp-2); }
  .mt-hero__img { max-width: 120px; justify-self: start; }
  .mt-hero__cta { width: 100%; }
}

/* ═══════ El bloque del simulador ═══════ */
.seccion.mt-seccion { padding-block: var(--sp-5) var(--sp-6); }
#simulador, #mt-app, #estudio { scroll-margin-top: var(--mt-tope); }
.mt-app { background: var(--blanco); border: var(--borde); border-radius: var(--r-xl); box-shadow: var(--sombra-md); overflow: hidden; }

/* Barra de pasos */
.mt-pasos { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1);
  background: var(--cielo-50); border-bottom: 1px solid var(--cielo-200); }
.mt-pasos button {
  width: 100%; display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--cielo-200); background: var(--blanco); color: var(--tinta-suave); font: inherit; font-size: var(--t-sm); font-weight: 500;
  cursor: pointer; text-align: left; transition: border-color var(--trans), box-shadow var(--trans), color var(--trans);
}
.mt-pasos button:disabled { cursor: not-allowed; opacity: .55; }
.mt-pasos button:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.mt-pasos__n { display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: var(--r-pill);
  background: var(--cielo-100); color: var(--tinta-suave); font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; }
.mt-pasos__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-pasos button[aria-current="step"] { border-color: var(--sol); color: var(--tinta); box-shadow: 0 0 0 3px var(--sol-100); }
.mt-pasos button[aria-current="step"] .mt-pasos__n { background: var(--sol-100); color: var(--sol-600); }
[data-theme="dark"] .mt-pasos button[aria-current="step"] .mt-pasos__n { color: var(--sol); }
.mt-pasos button.mt-pasos--ok .mt-pasos__n { background: var(--aval-100); color: var(--aval-texto); }

/* Formulario y panel lateral, separados por un divisor */
.mt-app__cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mt-form { padding: var(--sp-5); min-width: 0; }
.mt-panel { padding: var(--sp-5); border-left: 1px solid var(--cielo-200); background: var(--cielo-50); min-width: 0; }

.mt-paso__kicker { margin: 0 0 .35rem; color: var(--sol-600); font-weight: 700; font-size: var(--t-rotulo); letter-spacing: .06em; text-transform: uppercase; }
[data-theme="dark"] .mt-paso__kicker { color: var(--sol); }
.mt-paso__titulo { margin: 0 0 var(--sp-2); font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); line-height: 1.15; }
.mt-paso__intro { margin: 0 0 var(--sp-4); color: var(--tinta-suave); max-width: calc(62 * var(--ch)); }

/* Paso 1: tarjetas de tarifa */
.mt-tarifas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mt-tarifa { position: relative; display: flex; flex-direction: column; }
.mt-tarifa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-tarifa label {
  position: relative; display: grid; gap: .45rem; flex: 1; padding: var(--sp-4) var(--sp-4) var(--sp-3); border-radius: var(--r-lg) var(--r-lg) 0 0;
  border: 1.5px solid var(--cielo-200); border-bottom: 0; background: var(--blanco); cursor: pointer; transition: border-color var(--trans), box-shadow var(--trans);
}
.mt-tarifa label::after {
  content: ""; position: absolute; top: var(--sp-4); right: var(--sp-4); width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid var(--cielo-300); background: var(--blanco); transition: border-color var(--trans), box-shadow var(--trans);
}
.mt-tarifa__nombre { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); color: var(--noche); padding-right: 2rem; }
[data-theme="dark"] .mt-tarifa__nombre { color: #eef5fb; }
.mt-tarifa__sub { font-size: var(--t-sm); color: var(--tinta-suave); margin-top: -.3rem; }
.mt-tarifa__dato { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.5; }
.mt-tarifa__dato strong { color: var(--tinta); }
.mt-tarifa__guia {
  display: block; padding: .75rem var(--sp-4); min-height: 44px; border: 1.5px solid var(--cielo-200); border-top: 1px solid var(--cielo-200);
  border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--cielo-50); font-size: var(--t-sm); font-weight: 600; color: var(--sol-600);
  text-decoration: underline; text-underline-offset: 3px; transition: border-color var(--trans);
}
[data-theme="dark"] .mt-tarifa__guia { color: var(--sol); }
.mt-tarifa input:checked + label, .mt-tarifa input:checked + label + .mt-tarifa__guia { border-color: var(--sol); }
.mt-tarifa:has(input:checked) { border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--sol-100); }
.mt-tarifa input:checked + label::after { border-color: var(--sol); box-shadow: inset 0 0 0 4px var(--blanco), inset 0 0 0 10px var(--sol); }
.mt-tarifa input:focus-visible + label { outline: 2px solid var(--sol); outline-offset: 3px; }

/* Campos */
.mt-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.mt-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.mt-campo { margin-bottom: var(--sp-4); min-width: 0; }
.mt-campo label, .mt-pregunta { display: block; margin-bottom: .4rem; font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.mt-campo select, .mt-campo input, .mt-isr input {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--cielo-300);
  background: var(--blanco); color: var(--tinta); font: inherit; font-size: var(--t-base); transition: border-color var(--trans), box-shadow var(--trans);
}
.mt-campo input[type="number"], .mt-isr input { font-family: var(--f-mono); }
.mt-campo select:focus-visible, .mt-campo input:focus-visible, .mt-isr input:focus-visible { outline: none; border-color: var(--sol); box-shadow: 0 0 0 3px var(--sol-100); }
.mt-campo select:disabled { opacity: .6; cursor: not-allowed; }
.mt-campo select option { background: var(--blanco); color: var(--tinta); }
.mt-campo input::placeholder, .mt-isr input::placeholder { color: var(--tinta-tenue); }
.mt-unidad { position: relative; }
.mt-unidad input { padding-right: 3.6rem; }
.mt-unidad span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: var(--t-sm); color: var(--tinta-suave); pointer-events: none; }
.mt-pista { margin: .4rem 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-suave); }
.mt-campo__error { margin: .4rem 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--rojo); }
.mt-campo--error select, .mt-campo--error input { border-color: var(--rojo); }

/* Botones de dos opciones (2 % de baja tensión, factor de potencia) */
.mt-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--cielo-100); }
.mt-seg label { position: relative; margin: 0; }
.mt-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mt-seg span { display: inline-block; min-width: 4.5rem; min-height: 40px; padding: .55rem 1rem; text-align: center; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.mt-seg input:checked + span { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-sm); }
.mt-seg input:focus-visible + span { outline: 2px solid var(--sol); outline-offset: 2px; }
.mt-seg--ancho { display: flex; }
.mt-seg--ancho label { flex: 1; }
.mt-seg--ancho span { width: 100%; }

/* Desplegables (mismo estilo que .cb-ayuda de bombeo) */
.mt-ayuda { border: 1px solid var(--cielo-200); background: var(--cielo-50); border-radius: var(--r-md); padding: .15rem var(--sp-3); margin-bottom: var(--sp-3); }
.mt-ayuda summary {
  cursor: pointer; list-style: none; position: relative; display: flex; align-items: center; min-height: 44px; padding: .6rem 1.6rem .6rem 0;
  font-weight: 600; font-size: var(--t-sm); color: var(--sol-600);
}
.mt-ayuda summary::-webkit-details-marker { display: none; }
.mt-ayuda summary::after {
  content: ""; position: absolute; right: .2rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.mt-ayuda[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.mt-ayuda[open] { padding-bottom: var(--sp-3); }
.mt-ayuda p { margin: 0 0 .5rem; font-size: var(--t-sm); color: var(--tinta-suave); }
[data-theme="dark"] .mt-ayuda summary { color: var(--sol); }
.mt-form .mt-ayuda .mt-campo { margin-bottom: var(--sp-3); }

.mt-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--cielo-200); }
.mt-nav .btn { min-height: 46px; }
.mt-nav .btn--sol { margin-left: auto; min-width: 12rem; }
.mt-estado { margin: var(--sp-2) 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-estado:empty { display: none; }

/* Panel lateral: guía del recibo y datos capturados */
.mt-panel__titulo { margin: 0; font-family: var(--f-display); font-size: var(--t-h3); }
.mt-panel__nota { margin: .3rem 0 var(--sp-3); font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-panel__pie { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-panel__sub { margin: var(--sp-4) 0 var(--sp-1); font-family: var(--f-display); font-size: var(--t-h4); }
.mt-recibo { border: 1px solid var(--cielo-200); border-radius: var(--r-md); background: var(--blanco); padding: var(--sp-3); font-size: var(--t-sm); }
.mt-recibo__cab { display: flex; justify-content: space-between; gap: var(--sp-2); padding-bottom: .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--cielo-200); font-family: var(--f-mono); color: var(--tinta-suave); }
.mt-recibo__cab strong { color: var(--tinta); font-family: var(--f-display); }
.mt-recibo__fila { display: flex; justify-content: space-between; gap: var(--sp-2); padding: .36rem .55rem; border-radius: var(--r-sm); color: var(--tinta-suave); transition: background var(--trans), color var(--trans); }
.mt-recibo__fila b { font-family: var(--f-mono); font-weight: 600; color: var(--tinta); white-space: nowrap; }
.mt-recibo__fila--activa { background: var(--sol-100); color: var(--tinta); box-shadow: inset 3px 0 0 var(--sol); }
.mt-recibo__sep { height: 1px; margin: .45rem 0; background: var(--cielo-200); }
.mt-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.mt-datos li { display: grid; gap: .1rem; padding: .55rem 0 .55rem 1rem; border-bottom: 1px solid var(--cielo-200); position: relative; min-width: 0; font-size: var(--t-sm); }
.mt-datos li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cielo-300); }
.mt-datos li.mt-dato--ok::before { background: var(--aval); }
.mt-datos span { color: var(--tinta-suave); }
.mt-datos strong { font-family: var(--f-mono); font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.mt-datos li:not(.mt-dato--ok) strong { font-family: var(--f-cuerpo); font-weight: 500; color: var(--tinta-suave); }

/* ═══════ Resultado (dentro del mismo bloque) ═══════ */
.mt-res { padding: var(--sp-5); }
.mt-res:focus { outline: none; } /* recibe el foco al mostrarse; no es un control */
.mt-res__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mt-res__titulo { margin: 0 0 var(--sp-2); font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.15; }
.mt-res__resumen { margin: 0; max-width: calc(72 * var(--ch)); color: var(--tinta-suave); }
.mt-res__resumen strong { color: var(--tinta); }
.mt-res__editar { flex: none; min-height: 46px; }

/* Cifras clave */
.mt-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.mt-cifra { display: grid; align-content: start; gap: .25rem; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--cielo-200); background: var(--cielo-50); text-align: center; }
.mt-cifra__v { font-family: var(--f-mono); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); line-height: 1.2; color: var(--sol-600); }
[data-theme="dark"] .mt-cifra__v { color: var(--sol); }
.mt-cifra__v--ahorro, [data-theme="dark"] .mt-cifra__v--ahorro { color: var(--aval-texto); }
.mt-cifra__t { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.mt-cifra__s { font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-cifra__s:empty { display: none; }

/* Panel de ajustes: tamaño, factor de potencia e ISR */
.mt-ajustes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--sp-3); border: 1px solid var(--cielo-200); border-radius: var(--r-lg); }
.mt-ajuste { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.mt-ajuste + .mt-ajuste { border-left: 1px solid var(--cielo-200); }
.mt-ajuste__cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem var(--sp-2); }
.mt-ajuste__t { font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.mt-ajuste__v { font-family: var(--f-mono); font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.mt-ajuste__nota { margin: 0; font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.5; }
.mt-ajuste__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--sp-2); font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.5; }
.mt-ajuste input[type="range"] { width: 100%; min-height: 32px; margin: 0; background: transparent; accent-color: var(--sol); -webkit-appearance: none; appearance: none; }
.mt-ajuste input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: linear-gradient(to right, var(--sol) 0 var(--avance, 0%), var(--cielo-200) var(--avance, 0%) 100%); }
.mt-ajuste input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--cielo-200); }
.mt-ajuste input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--sol); }
.mt-ajuste input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--sol); border: 3px solid var(--blanco); box-shadow: var(--sombra-sm); cursor: pointer; }
.mt-ajuste input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--sol); border: 3px solid var(--blanco); box-shadow: var(--sombra-sm); cursor: pointer; }
.mt-ajuste input[type="range"]:focus-visible { outline: 2px solid var(--sol); outline-offset: 4px; border-radius: var(--r-sm); }
.mt-boton-texto { padding: .4rem 0; min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--sol-600); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .mt-boton-texto { color: var(--sol); }

/* Interruptor (ISR) */
.mt-switch { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; }
.mt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-switch__pista { position: relative; flex: none; width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--cielo-300); transition: background var(--trans); }
.mt-switch__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-sm); transition: transform var(--trans); }
.mt-switch input:checked + .mt-switch__pista { background: var(--sol); }
.mt-switch input:checked + .mt-switch__pista::after { transform: translateX(20px); }
.mt-switch input:focus-visible + .mt-switch__pista { outline: 2px solid var(--sol); outline-offset: 2px; }
.mt-isr label { display: block; margin-bottom: .35rem; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-unidad--chica { max-width: 9rem; }

/* Comprobación del recibo */
.mt-comprueba { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--cielo-200); border-left: 3px solid var(--aval); }
.mt-comprueba__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem var(--sp-3); }
.mt-comprueba__t { margin: 0; font-weight: 600; color: var(--tinta); }
.mt-comprueba__v { font-family: var(--f-mono); font-weight: 600; font-size: var(--t-h4); color: var(--tinta); }
.mt-comprueba__nota { margin: .35rem 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }

/* Detalles y tablas */
.mt-detalle summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: var(--t-sm); font-weight: 600; color: var(--sol-600); }
[data-theme="dark"] .mt-detalle summary { color: var(--sol); }
.mt-tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.mt-tabla th, .mt-tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--cielo-200); text-align: right; white-space: nowrap; }
.mt-tabla th:first-child, .mt-tabla td:first-child { text-align: left; }
.mt-tabla th { font-weight: 600; color: var(--tinta); }
.mt-tabla td { color: var(--tinta-suave); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.mt-tabla tfoot td, .mt-tabla tfoot th { font-weight: 600; color: var(--tinta); }

/* ═══════ Gráficas en pestañas: una a la vez ═══════ */
.mt-graficas { margin-top: var(--sp-4); border: 1px solid var(--cielo-200); border-radius: var(--r-lg); overflow: hidden; }
.mt-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2); background: var(--cielo-50); border-bottom: 1px solid var(--cielo-200); overflow-x: auto; scrollbar-width: thin; }
.mt-tabs button {
  flex: none; min-height: 44px; padding: .5rem 1rem; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent;
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave); cursor: pointer; white-space: nowrap;
}
.mt-tabs button[aria-selected="true"] { background: var(--blanco); border-color: var(--cielo-200); color: var(--tinta); box-shadow: var(--sombra-sm); }
.mt-tabs button:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.mt-tp { padding: var(--sp-4); }
.mt-tp__titulo { margin: 0; font-family: var(--f-display); font-size: var(--t-h4); font-weight: 600; }
.mt-tp__lee { margin: .4rem 0 0; max-width: calc(78 * var(--ch)); font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.55; }
.mt-tp__lee strong { color: var(--tinta); }
.mt-leyenda { display: flex; flex-wrap: wrap; gap: .4rem var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.mt-leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
.mt-leyenda i.mt-l-hoy { background: var(--g-hoy); }
.mt-leyenda i.mt-l-sol { background: var(--g-sol); }
.mt-leyenda i.mt-l-ahorro { background: var(--g-ahorro); }
.mt-leyenda i.mt-l-aumento { background: repeating-linear-gradient(135deg, var(--g-hoy) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--g-hoy); }
.mt-leyenda i.mt-l-linea { height: 3px; border-radius: 2px; background: var(--g-sol); }
.mt-leyenda i.mt-l-linea2 { height: 3px; border-radius: 2px; background: var(--g-alt); }
.mt-leyenda i.mt-l-ref { height: 2px; border-radius: 1px; background: var(--tinta-suave); }
.mt-graf__lienzo { position: relative; margin-top: var(--sp-3); }
.mt-graf__lienzo:focus-visible { outline: 2px solid var(--sol); outline-offset: 4px; border-radius: var(--r-sm); }
.mt-graf__lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }
.mt-tp .mt-detalle { margin-top: var(--sp-2); }

.mt-retorno { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.mt-lista { display: grid; gap: .1rem; margin: var(--sp-3) 0 0; }
.mt-lista div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: .55rem 0; border-bottom: 1px solid var(--cielo-200); }
.mt-lista dt { font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-lista dd { margin: 0; font-family: var(--f-mono); font-weight: 600; font-size: var(--t-sm); color: var(--tinta); white-space: nowrap; }

/* Marcas del SVG (los colores salen de los tokens: cambian con el tema) */
.mt-s-hoy { fill: var(--g-hoy); }
.mt-s-sol { fill: var(--g-sol); }
.mt-s-ahorro { fill: var(--g-ahorro); }
.mt-s-aumento { stroke: var(--g-hoy); stroke-width: 1; } /* el relleno (textura) lo pone el JS: url(#mt-trama-<gráfica>) */
.mt-trama-linea { stroke: var(--g-hoy); stroke-width: 1.5; }
.mt-s-linea { fill: none; stroke: var(--g-sol); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mt-s-linea2 { fill: none; stroke: var(--g-alt); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mt-s-area { fill: var(--g-sol); fill-opacity: .1; }
.mt-s-ref { stroke: var(--tinta-suave); stroke-width: 1.5; }
.mt-s-punto { fill: var(--g-sol); stroke: var(--g-sup); stroke-width: 2; }
.mt-s-punto2 { fill: var(--g-alt); stroke: var(--g-sup); stroke-width: 2; }
.mt-s-rejilla { stroke: var(--g-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.mt-s-cero { stroke: var(--g-cero); stroke-width: 1; shape-rendering: crispEdges; }
.mt-s-guia { stroke: var(--g-cero); stroke-width: 1; }
.mt-s-cruz { stroke: var(--g-cero); stroke-width: 1; }
.mt-s-texto { fill: var(--tinta-suave); font-family: var(--f-cuerpo); font-size: var(--t-sm); }
.mt-s-texto--fuerte { fill: var(--tinta); font-weight: 600; }
.mt-s-valor { fill: var(--tinta); font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; }
.mt-s-blanco { fill: transparent; }
.mt-s-fondo { fill: transparent; }
.mt-s-fondo.mt-s-cat--activa { fill: var(--g-activo); }

.mt-tip {
  position: absolute; z-index: 3; pointer-events: none; min-width: 9rem; max-width: 17rem; padding: .55rem .7rem;
  border-radius: var(--r-sm); background: var(--blanco); border: var(--borde); box-shadow: var(--sombra-md); font-size: var(--t-sm); color: var(--tinta-suave);
}
.mt-tip__t { margin-bottom: .25rem; font-weight: 600; color: var(--tinta); }
.mt-tip__f { display: flex; align-items: center; gap: .45rem; }
.mt-tip__f b { font-family: var(--f-mono); color: var(--tinta); }
.mt-tip__f i { display: inline-block; width: .8rem; height: 2px; border-radius: 2px; }
.mt-tip__f i.mt-l-hoy { background: var(--g-hoy); }
.mt-tip__f i.mt-l-sol, .mt-tip__f i.mt-l-linea { background: var(--g-sol); }
.mt-tip__f i.mt-l-ahorro { background: var(--g-ahorro); }
.mt-tip__f i.mt-l-linea2 { background: var(--g-alt); }
.mt-tip__f i.mt-l-ref { background: var(--tinta-suave); }

/* Supuestos y cierre */
.mt-supuestos-caja { margin-top: var(--sp-3); }
.mt-supuestos { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--tinta-suave); }
.mt-supuestos li + li { margin-top: .35rem; }
.mt-envio { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-4); align-items: center; margin-top: var(--sp-4);
  padding: var(--sp-4); border-radius: var(--r-lg); background: var(--sol-100); border: 1px solid rgba(254, 146, 22, .35); }
.mt-envio__img { display: block; width: 120px; height: auto; }
.mt-envio__titulo { margin: 0 0 .4rem; font-family: var(--f-display); font-size: var(--t-h4); }
.mt-envio__texto { margin: 0 0 var(--sp-3); font-size: var(--t-sm); color: var(--tinta-suave); max-width: calc(72 * var(--ch)); }
.mt-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mt-acciones .btn { min-height: 46px; }

/* ═══════ Cómo calcula (texto, sin recuadros) ═══════ */
.mt-como { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: var(--sp-6); align-items: center; }
.mt-como__img { display: block; width: 100%; max-width: 320px; height: auto; justify-self: center; }
.mt-como__texto { max-width: 46rem; }
.mt-como .lista-num { margin-top: var(--sp-4); }
.mt-fuentes { margin: var(--sp-3) 0 0; padding-left: 1.1rem; color: var(--tinta-suave); }
.mt-fuentes li + li { margin-top: .5rem; }

/* ═══════ Pantallas medianas ═══════ */
@media (max-width: 960px) {
  .mt-app__cuerpo { grid-template-columns: 1fr; }
  .mt-panel { border-left: 0; border-top: 1px solid var(--cielo-200); }
  /* En una columna, la guía del recibo solo hace falta en el paso 3. */
  .mt-app[data-paso="1"] .mt-panel, .mt-app[data-paso="2"] .mt-panel { display: none; }
  .mt-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-ajustes { grid-template-columns: 1fr; }
  .mt-ajuste + .mt-ajuste { border-left: 0; border-top: 1px solid var(--cielo-200); }
  .mt-retorno { grid-template-columns: 1fr; gap: 0; }
  .mt-como { grid-template-columns: 1fr; gap: var(--sp-4); }
  .mt-como__img { max-width: 180px; justify-self: start; }
}
@media (max-width: 760px) {
  .mt-pasos { padding: var(--sp-2); grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .mt-pasos button { padding: .35rem; gap: 0; width: auto; }
  .mt-pasos__t { display: none; }
  .mt-pasos button[aria-current="step"] .mt-pasos__t { display: inline; margin: 0 .4rem 0 .45rem; }
  .mt-tarifas { grid-template-columns: 1fr; }
  .mt-trio { grid-template-columns: 1fr; }
}

/* ═══════ Teléfono ═══════ */
@media (max-width: 640px) {
  .seccion.mt-seccion { padding-block: var(--sp-4) var(--sp-5); }
  .mt-app { border-radius: var(--r-lg); }
  .mt-form, .mt-panel, .mt-res { padding: var(--sp-4) var(--sp-3); }
  .mt-duo { grid-template-columns: 1fr; }
  .mt-tarifa label { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .mt-tarifa label::after { top: var(--sp-3); right: var(--sp-3); }
  .mt-tarifa__guia { padding: .75rem var(--sp-3); }
  .mt-nav .btn { flex: 1 1 0; min-width: 0; }
  .mt-nav .btn--sol { margin-left: 0; }
  .mt-res__cab { flex-direction: column; }
  .mt-res__editar { width: 100%; }
  .mt-ajuste { padding: var(--sp-3); }
  .mt-tp { padding: var(--sp-3); }
  .mt-envio { grid-template-columns: 1fr; padding: var(--sp-3); }
  .mt-envio__img { width: 96px; }
  .mt-acciones .btn { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .mt-cifra { padding: var(--sp-2); }
  .mt-cifra__v { font-size: 1.2rem; }
}
@media (max-width: 340px) {
  .mt-cifras { grid-template-columns: 1fr; }
  .mt-datos { grid-template-columns: 1fr; }
}

/* ═══════ Impresión: solo el análisis, con todas las gráficas ═══════ */
@media print {
  .site-header, .site-footer, .wa-float, .wa-fab, .aviso-cookies, .pagina-head, .mt-pasos, .mt-app__cuerpo, .mt-ajustes, .mt-acciones, .mt-tabs,
  .mt-res__editar, .mt-envio__img, .skip-link, #como-calcula, #faq, #estudio { display: none !important; }
  body::before, body::after { display: none !important; }
  .seccion.mt-seccion { padding: 0; background: none; }
  .mt-app { border: 0; box-shadow: none; }
  .mt-tp[hidden] { display: block !important; }
  .mt-tp, .mt-cifra, .mt-comprueba { break-inside: avoid; }
  .mt-detalle[open] summary { display: none; }
}