/* Tokens de Markettrax. Heredan la paleta "Solvrax Ledger" (Solvrax/CLAUDE.md §3.6.1): la
   suite HeyyySoft tiene que verse como un solo producto. Los mismos valores viven en
   TemaMarkettrax.cs para MudBlazor; si se cambia uno hay que cambiar el otro, porque
   MudBlazor pinta sus componentes desde su tema y no desde estas variables. */

:root {
    --mtx-primary:       #0E4D44;  /* teal fiscal — appbar, botones primarios, enlaces */
    --mtx-primary-claro: #1A6B5E;
    --mtx-bronce:        #B8860B;  /* acentos, filetes de sección, badges de atención */
    --mtx-papel:         #FAF8F4;  /* fondo general: cálido, no blanco puro */
    --mtx-tarjeta:       #FFFFFF;
    --mtx-tinta:         #1C2422;
    --mtx-tinta-suave:   #5C6B66;
    --mtx-filete:        #DCD6C9;
    --mtx-exito:         #2D7A4F;
    --mtx-aviso:         #B8860B;
    --mtx-peligro:       #9B2C2C;  /* terracota, no rojo semáforo */

    --mtx-fuente:        'Inter', -apple-system, 'Segoe UI', sans-serif;
    --mtx-fuente-titulo: 'Lexend', 'Inter', sans-serif;

    --mtx-radio: 4px;

    /* Curva de salida fuerte. Las de serie de CSS son demasiado flojas: no tienen el punch
       que hace que una transición se lea como intencional. */
    --mtx-salida: cubic-bezier(.23, 1, .32, 1);
}

html, body {
    font-family: var(--mtx-fuente);
    background: var(--mtx-papel);
    color: var(--mtx-tinta);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mtx-fuente-titulo);
}

/* Las cifras se alinean en columna. Sin esto, un 1 ocupa menos que un 8 y una lista de
   importes o de tasas de apertura queda con las unidades bailando. */
.mtx-cifra {
    font-variant-numeric: tabular-nums;
}

/* ── Pantalla de arranque ────────────────────────────────────────────────────
   Lo que se ve ANTES de que exista el WASM: no puede depender de MudBlazor ni de
   nada compilado. Usa los mismos colores para que el salto al cargar no se note. */

.arranque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100vh;
    background: var(--mtx-papel);
    font-family: var(--mtx-fuente);
}

.arranque-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mtx-radio);
    background: var(--mtx-primary);
    color: var(--mtx-papel);
    font-family: var(--mtx-fuente-titulo);
    font-size: 20px;
    font-weight: 600;
}

.arranque-nombre {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--mtx-tinta);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.arranque-estado {
    font-size: 0.875rem;
    color: var(--mtx-tinta-suave);
}

/* El cartel del framework, para fallos irrecuperables del WASM.
   ⚠️ El display:none es OBLIGATORIO y no es "ocultarlo": Blazor lo pone a display:block
   por JS cuando el runtime cae. Quitarlo de aquí lo deja visible siempre; lo que NO hay que
   hacer es dejarlo oculto sin contenido, porque entonces el fallo es completamente mudo —
   la pantalla se queda quieta y no hay ninguna señal de que algo reventó.
   Se le da forma para que se lea como parte del producto. Cuando exista el manejador propio
   de la robustez en 4 capas, este bloque se retira. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    padding: 0.875rem 1.25rem;
    background: var(--mtx-peligro);
    color: var(--mtx-papel);
    font-size: 0.875rem;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
}

#blazor-error-ui .reload {
    color: var(--mtx-papel);
    text-decoration: underline;
}

/* ── Reflejos de pulsación ───────────────────────────────────────────────────
   Un botón tiene que acusar recibo. El selector es largo a propósito: MudBlazor gana por
   especificidad con selectores de 4-5 clases, y un override de una sola clase se pierde
   EN SILENCIO — la regla aparece en document.styleSheets y parece correcta al leerla. */

.mud-button-root {
    transition: transform 160ms var(--mtx-salida),
                background-color 160ms var(--mtx-salida);
}

.mud-button-root:active {
    transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
    .mud-button-root {
        transition: background-color 160ms var(--mtx-salida);
    }

    .mud-button-root:active {
        transform: none;
    }
}

/* ── El pliego del acceso ────────────────────────────────────────────────────
   Dos páginas enfrentadas: la estrecha lleva la identidad sobre campo teal macizo, la
   ancha lleva el formulario sobre papel. El filete de bronce entre ambas es el lomo. */

.mtx-pliego {
    display: grid;
    grid-template-columns: minmax(260px, 32%) 1fr;
    min-height: 100vh;
    /* En navegadores que lo soportan evita el salto de la barra de direcciones en móvil,
       donde 100vh se mide contra una ventana que aún no existe. */
    min-height: 100dvh;
}

.mtx-pliego-identidad {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 2.5rem;
    background: var(--mtx-primary);
    /* El lomo. Va en la página izquierda y no entre columnas, para que en móvil
       —cuando la franja pasa a ser cabecera— siga marcando la separación. */
    border-right: 3px solid var(--mtx-bronce);
}

.mtx-marca {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mtx-papel);
}

.mtx-marca-linea {
    margin: 0.75rem 0 0;
    max-width: 30ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    /* Teal aclarado, no blanco al 70%: la opacidad sobre un fondo de color desatura y
       ensucia en vez de aclarar. */
    color: #9FE1CB;
}

.mtx-pie-identidad {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mtx-primary-claro);
}

.mtx-pliego-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--mtx-papel);
}

.mtx-hoja {
    width: 100%;
    max-width: 380px;
}

.mtx-titulillo {
    margin: 0 0 2rem;
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--mtx-tinta);
}

/* Altura reservada aunque no haya error: sin esto el botón salta hacia abajo al fallar,
   justo cuando la persona vuelve a apuntar con el cursor. */
.mtx-ranura-error {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

.mtx-error {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mtx-peligro);
}

@media (max-width: 900px) {
    /* La franja de identidad deja de ser página y pasa a cabecera. El formulario se queda
       con toda la anchura, que es lo único que importa en un teléfono. */
    .mtx-pliego {
        grid-template-columns: 1fr;
    }

    .mtx-pliego-identidad {
        padding: 2rem 1.5rem;
        border-right: none;
        border-bottom: 3px solid var(--mtx-bronce);
    }

    .mtx-pliego-identidad .mtx-pie-identidad {
        display: none;
    }

    .mtx-marca-linea {
        max-width: none;
    }

    .mtx-pliego-formulario {
        padding: 2.5rem 1.5rem;
    }
}

/* ── Estados auxiliares (sin permiso, cargando) ──────────────────────────────
   Comparten planta para que pasar de uno a otro no mueva nada de sitio. */

.mtx-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 60vh;
    padding: 2rem;
    text-align: center;
}

.mtx-estado-marca {
    width: 40px;
    height: 40px;
    border-radius: var(--mtx-radio);
    background: var(--mtx-primary);
}

.mtx-estado-titulo {
    margin: 0;
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mtx-tinta);
}

.mtx-estado-texto {
    margin: 0;
    max-width: 46ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mtx-tinta-suave);
}

/* Latido del estado de carga. Solo opacidad: nada de escala, para que no parezca que algo
   se está montando cuando en realidad se está leyendo localStorage. */
@keyframes mtx-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.mtx-late {
    animation: mtx-latido 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mtx-late {
        animation: none;
        opacity: .7;
    }
}

/* ── Appbar ──────────────────────────────────────────────────────────────────
   Blanca con filete inferior. El selector lleva .mud-appbar delante porque MudBlazor
   pinta el fondo desde su propio tema con más especificidad que una clase suelta. */

.mud-appbar.mtx-appbar {
    background: var(--mtx-tarjeta);
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-appbar-marca {
    font-family: var(--mtx-fuente-titulo);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mtx-primary);
}

/* Tablas: una línea fina por fila y el hover. Sin Striped ni Bordered — con las tres
   afordancias encendidas la lista se lee como una hoja de cálculo. */
.mtx-tabla .mud-table-root {
    background: var(--mtx-tarjeta);
}

.mtx-tabla .mud-table-head .mud-table-cell {
    font-weight: 500;
    color: var(--mtx-tinta-suave);
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-vacio {
    color: var(--mtx-tinta-suave);
    font-size: 0.9375rem;
}

/* ── Cabecera de página ──────────────────────────────────────────────────────
   Pegada bajo la appbar. Si se fuera con el scroll, en una ventana baja la persona
   conmuta algo abajo y no encuentra cómo guardarlo: parece que la pantalla no tiene botón.
   Exige fondo opaco, o el contenido se ve pasar por debajo del título. */

.mtx-encabezado {
    position: sticky;
    top: 64px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0 1rem;
    background: var(--mtx-papel);
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-encabezado-titulo {
    margin: 0;
}

.mtx-encabezado-contexto {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--mtx-tinta-suave);
}

.mtx-encabezado-acciones {
    display: flex;
    gap: 0.5rem;
}

/* ── Barra de filtros ────────────────────────────────────────────────────────
   Sin botón "Filtrar": cada control recarga al cambiar. Un botón aparte solo añade un
   paso y deja dudas sobre si el filtro ya se aplicó. */

.mtx-barra-filtros {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mtx-buscador {
    max-width: 340px;
}

/* ── Celdas ──────────────────────────────────────────────────────────────────
   Dos niveles por celda: el dato que identifica arriba, el secundario debajo en menor
   jerarquía. Evita una fila de ocho columnas para mostrar lo mismo. */

.mtx-celda-principal {
    color: var(--mtx-tinta);
}

.mtx-celda-secundaria {
    font-size: 0.8125rem;
    color: var(--mtx-tinta-suave);
}

.mtx-acciones-fila {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.mtx-paginacion {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.mtx-vacio {
    display: block;
    padding: 2rem 1rem;
    color: var(--mtx-tinta-suave);
    font-size: 0.9375rem;
}

/* Rejilla de dos columnas para los formularios de diálogo. Colapsa a una en pantallas
   estrechas, donde dos campos por fila dejan cada uno ilegible. */
.mtx-rejilla-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

@media (max-width: 600px) {
    .mtx-rejilla-2 {
        grid-template-columns: 1fr;
    }

    .mtx-encabezado {
        position: static;
    }
}

/* El cajón comparte el filete del resto, sin sombra: la separación en este sistema se
   hace con línea, no con elevación. */
.mud-drawer.mtx-cajon {
    background: var(--mtx-tarjeta);
    border-right: 1px solid var(--mtx-filete);
}

/* ── Importación ─────────────────────────────────────────────────────────────
   Los conteos van primero y grandes: la decisión que se está tomando es "¿confirmo esto?",
   y esa se toma con cuatro números, no leyendo mil filas. */

.mtx-resumen-import {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin-bottom: 1.5rem;
    background: var(--mtx-filete);
    border: 1px solid var(--mtx-filete);
}

.mtx-dato {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--mtx-tarjeta);
}

.mtx-dato-valor {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mtx-tinta);
}

.mtx-dato-etiqueta {
    font-size: 0.8125rem;
    color: var(--mtx-tinta-suave);
}

.mtx-lectura {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--mtx-tinta-suave);
}

.mtx-zona-carga {
    max-width: 62ch;
    padding: 2rem 0;
}

.mtx-ayuda {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mtx-tinta-suave);
}

/* Vuelta al acceso tras cambiar la contraseña. Una línea en verde de "vigente", no un
   cartel con icono y fondo: el aviso pesaría más que el formulario al que acompaña. */
.mtx-ayuda-exito {
    margin-bottom: 0.5rem;
    color: var(--mtx-exito);
}

/* ── Constructor de segmentos ────────────────────────────────────────────────
   Cada condición es una fila de controles. El ancho de cada control es fijo por su papel
   —campo, comparación, valor— para que al leer varias condiciones las columnas se alineen
   y se puedan comparar de un vistazo. */

.mtx-constructor {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-constructor-cabecera {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mtx-filete);
    font-size: 0.9375rem;
    color: var(--mtx-tinta-suave);
}

.mtx-selector-union {
    max-width: 240px;
}

.mtx-condicion {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.mtx-condicion-campo      { width: 180px; }
.mtx-condicion-comparador { width: 180px; }
.mtx-condicion-clave      { width: 180px; }
.mtx-condicion-valor      { width: 220px; }

.mtx-vista-previa {
    padding: 1.25rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-alcance {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    /* En pantalla estrecha los controles a lo ancho quedan ilegibles; cada uno toma la
       línea completa. Armar segmentos es trabajo de escritorio, pero revisarlos no. */
    .mtx-condicion-campo,
    .mtx-condicion-comparador,
    .mtx-condicion-clave,
    .mtx-condicion-valor {
        width: 100%;
    }
}

/* ── Páginas públicas ────────────────────────────────────────────────────────
   Una hoja centrada sobre el papel, sin navegación. Quien las abre es el destinatario de
   un correo: cuanto menos producto vea, mejor. */

.mtx-publico {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 1.5rem;
    background: var(--mtx-papel);
}

.mtx-publico-hoja {
    width: 100%;
    max-width: 46ch;
}

.mtx-publico-acciones {
    margin-top: 1.5rem;
}

/* El veredicto de cumplimiento: primero y grande, porque es la pregunta que trae aquí. */
.mtx-veredicto {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* La declaración de consentimiento de la importación. Va en su propia caja porque es una
   decisión aparte de las filas: se puede importar todo bien y aun así no poder escribirles. */
.mtx-consentimiento {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-consentimiento .mtx-ayuda {
    margin: 0.5rem 0 0;
}

/* ── Editor de plantillas ────────────────────────────────────────────────────
   Fuente y vista previa lado a lado: el valor de la pantalla es ver el resultado
   mientras se escribe, no después de guardar. */

.mtx-editor-plantilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.mtx-codigo textarea {
    font-family: var(--mtx-fuente-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.mtx-variables {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* La vista previa imita un correo: fondo blanco dentro del papel, para que se distinga
   del resto de la interfaz y se lea como lo que va a recibir la persona. */
.mtx-previa-correo {
    border: 1px solid var(--mtx-filete);
    background: var(--mtx-tarjeta);
}

.mtx-previa-cabecera {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mtx-filete);
    background: var(--mtx-papel);
}

.mtx-previa-cuerpo {
    padding: 1.25rem;
    min-height: 240px;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ── Audiencia de una campaña ────────────────────────────────────────────────
   Las dos cifras primero y grandes; el desglose de exclusiones debajo, porque es la
   respuesta a "¿por qué no le llega a todos?". */

.mtx-audiencia {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-audiencia-cifras {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mtx-exclusiones {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0 1rem;
    border-top: 1px solid var(--mtx-filete);
    font-size: 0.875rem;
}

.mtx-exclusion {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

/* ── Progreso de envío ────────────────────────────────────────────────────────
   Mismo pliego que la audiencia: tarjeta con filete, sin elevación. La barra es un
   FILETE que se llena, no una píldora con sombra — el sistema separa con filetes y una
   barra redondeada aquí sería vocabulario de otro producto. */

.mtx-envio {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-envio-cabecera {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.mtx-envio-titulo {
    font-family: var(--mtx-fuente-titulo);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mtx-tinta);
}

.mtx-envio-resumen {
    font-size: 0.875rem;
    color: var(--mtx-tinta-suave);
}

/* 3px, el mismo grosor que el lomo del acceso. */
.mtx-barra {
    position: relative;
    height: 3px;
    overflow: hidden;
    background: var(--mtx-filete);
}

/* Los tramos se superponen y se escalan; NO se les anima el ancho. Animar `width` obliga
   al navegador a recalcular la disposición en cada fotograma, y `transform` no toca el
   layout. Con --mtx-desde el segundo tramo arranca donde acaba el primero: el translate
   se aplica antes que el escalado, así que un tramo va de `desde` a `desde + avance`. */
.mtx-barra-tramo {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: translateX(calc(var(--mtx-desde, 0) * 100%)) scaleX(var(--mtx-avance, 0));
    transition: transform 240ms var(--mtx-salida);
}

@media (prefers-reduced-motion: reduce) {
    .mtx-barra-tramo {
        transition: none;
    }
}

.mtx-barra-enviado { background: var(--mtx-primary); }
.mtx-barra-fallido { background: var(--mtx-peligro); }

.mtx-envio-cifras {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

/* Los eventos son consecuencia de lo enviado, no otra cifra al mismo nivel: van debajo
   del filete y en cuerpo pequeño. Ponerlos como tarjetas iguales diría que entregar y
   recibir una queja pesan lo mismo. */
.mtx-envio-eventos {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--mtx-filete);
    font-size: 0.875rem;
}

.mtx-envio-evento {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

.mtx-envio-evento-malo { color: var(--mtx-peligro); }

@media (max-width: 900px) {
    .mtx-editor-plantilla {
        grid-template-columns: 1fr;
    }

    /* Consultar cómo va una campaña desde el teléfono es un uso declarado del producto:
       las cifras del envío se aprietan en vez de desbordarse. */
    .mtx-envio-cifras {
        gap: 1.75rem;
    }

    .mtx-envio-cifras .mtx-dato {
        padding: 0;
    }
}

/* ── Medición ────────────────────────────────────────────────────────────────
   Los colores de DATOS van aparte de los de marca y solo viven aquí: MudBlazor no pinta
   ninguna de estas piezas, así que —al contrario que el resto de la paleta— no tienen
   gemelo en TemaMarkettrax.cs.

   El teal de marca (#0E4D44) NO sirve como color de serie: medido, queda fuera de la banda
   de luminosidad y por debajo del mínimo de croma, así que junto a otra serie se lee como
   gris oscuro. La rampa arranca en él —el escalón mayor, el más oscuro— y sube hacia un
   teal con suficiente vida para distinguirse. Es extender el sistema donde el dominio lo
   pide, no contradecirlo: la familia y el bronce se conservan intactos.

   Comprobado con el validador de paletas: rampa ordinal monótona de un solo tono, y el par
   de series pasa separación para daltonismo (dE 11.3 protan) y contraste sobre papel. */

:root {
    --mtx-dato-1: #0E4D44;
    --mtx-dato-2: #146B5D;
    --mtx-dato-3: #0F8B77;
    --mtx-dato-4: #4FB3A0;

    --mtx-serie-apertura: #0F8B77;
    --mtx-serie-clic:     #B8860B;
}

/* Secciones separadas por filete, sin tarjetas: cada una responde una pregunta distinta y
   ponerlas en cajas iguales diría que se pueden leer en cualquier orden. */
.mtx-seccion {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-seccion:last-of-type {
    border-bottom: 0;
}

.mtx-seccion-titulo {
    margin: 0 0 1.25rem;
    font-family: var(--mtx-fuente-titulo);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mtx-tinta);
}

/* La letra pequeña que impide leer mal la cifra de al lado. No es ayuda opcional: sin ella
   una tasa de apertura se toma por un absoluto. */
.mtx-nota {
    max-width: 68ch;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--mtx-tinta-suave);
}

.mtx-nota-tabla {
    margin-top: 1.25rem;
}

/* ── El embudo ───────────────────────────────────────────────────────────────
   Cuatro escalones, cada uno un subconjunto del anterior. La barra se escala contra el
   PRIMER escalón, así que la caída se ve como longitud y no hay que restar cifras. */

.mtx-embudo {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.mtx-embudo-escalon {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) 92px minmax(140px, 190px);
    gap: 1rem;
    align-items: center;
}

.mtx-embudo-etiqueta {
    font-size: 0.875rem;
    color: var(--mtx-tinta);
}

.mtx-embudo-pista {
    height: 10px;
    background: var(--mtx-papel);
    border: 1px solid var(--mtx-filete);
}

/* Extremo redondeado solo en la punta del dato; el arranque es cuadrado porque es la línea
   base común de los cuatro. Se escala con transform y no con width: width recalcula el
   layout en cada fotograma. */
.mtx-embudo-barra {
    height: 100%;
    transform-origin: left;
    transform: scaleX(var(--mtx-ancho, 0));
    border-radius: 0 4px 4px 0;
    transition: transform 260ms var(--mtx-salida);
}

.mtx-embudo-1 { background: var(--mtx-dato-1); }
.mtx-embudo-2 { background: var(--mtx-dato-2); }
.mtx-embudo-3 { background: var(--mtx-dato-3); }
.mtx-embudo-4 { background: var(--mtx-dato-4); }

.mtx-embudo-cifra {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    text-align: right;
    color: var(--mtx-tinta);
}

.mtx-embudo-tasa {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
}

@media (prefers-reduced-motion: reduce) {
    .mtx-embudo-barra {
        transition: none;
    }
}

/* Consultar cómo fue una campaña desde el teléfono es un uso declarado del producto: el
   escalón se parte en filas en vez de comprimir la barra hasta que no se lee. */
@media (max-width: 760px) {
    .mtx-embudo-escalon {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 0.75rem;
    }

    .mtx-embudo-pista {
        grid-column: 1 / -1;
        order: 3;
    }

    .mtx-embudo-tasa {
        grid-column: 1 / -1;
        order: 4;
    }

    .mtx-embudo-cifra {
        font-size: 1.25rem;
    }
}

/* ── La curva ────────────────────────────────────────────────────────────────
   Dos series, así que la leyenda va siempre: la identidad no puede depender solo del color. */

/* Contenedor de consulta: lo que decide el tamaño del texto del eje NO es el ancho de la
   ventana sino el de esta figura. Con el cajón lateral abierto, un escritorio de 1000px deja
   aquí menos sitio que una tableta sin cajón, y un breakpoint de viewport se equivoca justo
   en ese caso. */
.mtx-curva {
    margin: 0;
    container-type: inline-size;
}

.mtx-curva-leyenda {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--mtx-tinta-suave);
}

.mtx-curva-serie {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.mtx-curva-muestra {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.mtx-curva-muestra-apertura { background: var(--mtx-serie-apertura); }
.mtx-curva-muestra-clic     { background: var(--mtx-serie-clic); }

/* El aspecto se fija al del viewBox para que la escala sea uniforme: así el texto del eje
   no sale estirado. El tope de 720px es el ancho a partir del cual la curva se dibuja 1:1
   —más ancha no informa mejor, solo separa los puntos— y el resto de la fila queda en aire. */
.mtx-curva-lienzo {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    aspect-ratio: 720 / 210;
}


.mtx-curva-rejilla {
    stroke: var(--mtx-filete);
    stroke-width: 1;
}

/* El texto nunca lleva el color del dato: la identidad la carga la marca de al lado. */
.mtx-curva-tick {
    font-family: var(--mtx-fuente);
    font-size: 11px;
    fill: var(--mtx-tinta-suave);
}

.mtx-curva-rotulo {
    font-family: var(--mtx-fuente-titulo);
    font-size: 12px;
    font-weight: 600;
    fill: var(--mtx-tinta);
}

.mtx-curva-linea {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mtx-curva-linea-apertura { stroke: var(--mtx-serie-apertura); }
.mtx-curva-linea-clic     { stroke: var(--mtx-serie-clic); }

/* Anillo del color del papel para que el punto siga leyéndose donde las series se cruzan. */
.mtx-curva-punto {
    stroke: var(--mtx-papel);
    stroke-width: 2;
}

.mtx-curva-punto-apertura { fill: var(--mtx-serie-apertura); }
.mtx-curva-punto-clic     { fill: var(--mtx-serie-clic); }

/* Por debajo de 720px el lienzo se reduce entero y las letras del eje se van con él: a
   343px de ancho, 11px se leen como 5. Se compensa subiendo el tamaño en unidades del
   viewBox, por tramos, de modo que el texto acabe siempre entre 10 y 15px reales.

   ⚠️ Estas reglas van DESPUÉS de las base, no antes. Con la misma especificidad gana la
   última declarada: una consulta colocada arriba coincide y aun así pierde, y en el
   inspector se ve aplicada mientras el texto sigue diminuto. */
@container (max-width: 719px) {
    .mtx-curva-tick   { font-size: 15px; }
    .mtx-curva-rotulo { font-size: 16px; }
}

@container (max-width: 479px) {
    .mtx-curva-tick   { font-size: 22px; }
    .mtx-curva-rotulo { font-size: 24px; }
}

/* 11px de radio invisible: el punto visible mide 3.5 y es imposible de apuntar con el ratón. */
.mtx-curva-blanco {
    fill: transparent;
    cursor: default;
}

/* ── Enlaces pulsados ────────────────────────────────────────────────────────── */

/* table-layout: fixed es obligatorio, no una preferencia. Con el reparto automático la
   celda de la URL crece hasta caber entera —lleva white-space: nowrap— y empuja la tabla
   más allá del ancho de la pantalla: en el móvil aparece un desplazamiento horizontal en
   TODA la página, no solo en la tabla. Con fixed, las columnas mandan y la URL se recorta. */
.mtx-enlaces {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.mtx-enlaces th {
    padding: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mtx-tinta-suave);
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-enlaces td {
    padding: 0.75rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--mtx-filete);
}

.mtx-enlaces-num {
    width: 110px;
    text-align: right;
}

/* La URL se recorta con puntos suspensivos y conserva el resto en el title: las de campaña
   llevan cola de seguimiento y el principio de dos enlaces distintos es idéntico. */
.mtx-enlaces-url {
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--mtx-tinta);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtx-enlaces-pista {
    height: 4px;
    max-width: 420px;
    margin-top: 0.5rem;
    background: var(--mtx-filete);
}

.mtx-enlaces-barra {
    height: 100%;
    transform-origin: left;
    transform: scaleX(var(--mtx-ancho, 0));
    background: var(--mtx-dato-3);
    border-radius: 0 4px 4px 0;
}

/* En el teléfono, las dos columnas de cifras se estrechan para dejarle sitio a la URL, que
   es lo que identifica la fila. */
@media (max-width: 780px) {
    .mtx-enlaces-num {
        width: 74px;
    }
}

/* ── Lo que costó ────────────────────────────────────────────────────────────
   Rebotes, quejas y bajas. Van juntos y en cuerpo menor que el embudo: son consecuencia
   del envío, no otra cifra del mismo rango. */

.mtx-costes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--mtx-filete);
    border: 1px solid var(--mtx-filete);
}

.mtx-coste {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.125rem;
    background: var(--mtx-tarjeta);
}

.mtx-coste-cifra {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mtx-tinta);
}

.mtx-coste-nombre {
    font-size: 0.875rem;
    color: var(--mtx-tinta);
}

.mtx-coste-tasa {
    display: flex;
    gap: 0.3rem;
}

/* El riesgo se marca con icono Y texto, nunca solo con color. */
.mtx-coste-riesgo .mtx-coste-cifra {
    color: var(--mtx-peligro);
}

.mtx-coste-aviso {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mtx-peligro);
}

/* ── Tasas en la comparativa ─────────────────────────────────────────────────
   Un solo color para toda la columna: teñir cada barra según su valor gastaría el canal de
   color en repetir lo que la longitud ya dice. */

.mtx-tasa {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.mtx-tasa-valor {
    font-size: 0.9375rem;
    color: var(--mtx-tinta);
}

.mtx-tasa-pista {
    height: 4px;
    max-width: 110px;
    background: var(--mtx-filete);
}

.mtx-tasa-barra {
    height: 100%;
    transform-origin: left;
    transform: scaleX(var(--mtx-ancho, 0));
    background: var(--mtx-dato-3);
    border-radius: 0 4px 4px 0;
}

.mtx-columna-riesgo {
    color: var(--mtx-peligro);
}

.mtx-envio-medicion {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* ── Inicio ──────────────────────────────────────────────────────────────────
   El siguiente paso es la pieza principal: es lo que responde la pregunta con la que se
   entra, y tiene que ganar sin gritar.

   Gana por tipografía, aire y por llevar la única acción primaria de la pantalla — NO por un
   filete de color a un lado. El lomo de bronce del sistema es estructural: separa las dos
   páginas enfrentadas del pliego del acceso. Traído aquí sería decoración, y un borde de
   acento en una caja es el atajo con el que se marca importancia cuando no se ha construido. */

.mtx-paso {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-paso-texto {
    max-width: 62ch;
}

.mtx-paso-titulo {
    margin: 0 0 0.5rem;
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mtx-tinta);
}

.mtx-paso-porque {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mtx-tinta-suave);
}

/* La acción no se encoge: en pantallas medias, dejar que el botón se estreche hasta partir
   su texto en dos líneas es peor que reservarle su ancho. */
.mtx-paso-accion {
    flex-shrink: 0;
}

/* Cifras en línea, no en tarjetas: los estados de una campaña son un desglose de lo mismo,
   y darles una caja a cada uno diría que son magnitudes independientes. */
.mtx-inicio-estados {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.mtx-inicio-estado {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.mtx-inicio-estado-cifra {
    font-family: var(--mtx-fuente-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mtx-tinta);
}

.mtx-inicio-ultima {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.125rem;
    margin-top: 1.5rem;
    background: var(--mtx-tarjeta);
    border: 1px solid var(--mtx-filete);
}

.mtx-inicio-ultima-nombre {
    margin: 0.15rem 0;
    font-family: var(--mtx-fuente-titulo);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mtx-tinta);
}

/* En el teléfono, el bloque del siguiente paso se apila y la acción pasa a todo el ancho:
   un botón a media línea junto a un párrafo largo se lee como un enlace perdido. */
@media (max-width: 760px) {
    .mtx-paso {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .mtx-inicio-estados {
        gap: 1.5rem;
    }

    .mtx-inicio-ultima {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
}

/* ── Contraseña temporal ─────────────────────────────────────────────────────
   Se enseña una sola vez y alguien la va a copiar a mano o a leerla en voz alta, así que va
   en monoespaciada y con aire: aquí el monoespaciado no es un disfraz de "técnico", es lo que
   evita confundir un 5 con una S al transcribirla. */

.mtx-password {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--mtx-papel);
    border: 1px solid var(--mtx-filete);
}

.mtx-password-valor {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--mtx-tinta);
    user-select: all;
}

/* ── Aviso de sesión de soporte ──────────────────────────────────────────────
   Terracota y fijo arriba del todo, empujando la appbar hacia abajo. No es una notificación
   que se cierra: mientras dure la sesión de soporte tiene que seguir ahí, porque su trabajo
   es impedir que alguien olvide en qué empresa está mirando. */

.mtx-soporte {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1400;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;

    /* ⚠️ Altura FIJA, y de ahí salen los desplazamientos de abajo. Con altura automática el
       aviso crece con el botón que lleva dentro y acaba tapando unos píxeles de la appbar:
       medido, 46px contra los 41 que se le habían reservado. */
    height: 48px;
    box-sizing: border-box;

    padding: 0.5rem 1rem;
    background: var(--mtx-peligro);
    color: var(--mtx-papel);
    font-size: 0.875rem;
}

.mtx-soporte-texto {
    max-width: 70ch;
}

/* La appbar y el cajón bajan para dejarle sitio: superponerse taparía el menú justo cuando
   hace falta salir. */
.mtx-soporte ~ .mud-layout .mud-appbar {
    top: 48px;
}

/* 48 del aviso + 64 de la appbar de MudBlazor. */
.mtx-soporte ~ .mud-layout .mud-drawer {
    top: 112px;
}

/* Apilado ocupa más, así que el aviso y los desplazamientos crecen a la par. */
@media (max-width: 760px) {
    .mtx-soporte {
        flex-direction: column;
        gap: 0.5rem;
        height: 104px;
        text-align: center;
    }

    .mtx-soporte ~ .mud-layout .mud-appbar { top: 104px; }
    .mtx-soporte ~ .mud-layout .mud-drawer { top: 168px; }
}