@charset "UTF-8";
/* ============================================================================
   mitasa-ng — front.css
   Estilos públicos: portada de las 3 puertas, formularios de admisión,
   handoff al agente, reporte en solo lectura, pantalla de FIRMA, encuesta
   de satisfacción y bitácora del seguimiento por token.

   Dueño: módulo K:css. Clases fijadas en CONTRATO.md §14.

   REGLA DE ORO DE ESTE ARCHIVO: aquí NO se escribe un solo hex de marca.
   La paleta la emite el servidor con mng_css_vars() (inc/config.php) como
   custom properties --mng-primario, --mng-acento, --mng-gris, --mng-fondo,
   --mng-borde, --mng-texto y --mng-estado-<slug>. Cambiar un color del
   sistema = cambiarlo en config.php, en un solo lugar.

   Nota: la página de firma (inc/firma.php) es autocontenida y NO ejecuta
   wp_head(), así que lleva su propio <style> inline. Las reglas .mng-firma__*
   de aquí son las del CONTRATO §14 y sirven para cualquier otra plantilla que
   reutilice el bloque de firma (p. ej. el seguimiento por token).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS LOCALES
   Solo geometría, sombras y neutros puros. Los derivados de marca se calculan
   con color-mix() a partir de las vars del servidor; el valor previo es el
   fallback para navegadores viejos (hay tablets Android antiguas en planta).
   --------------------------------------------------------------------------- */
:root {
    --mng-blanco: #ffffff;

    /* Derivados de marca — fallback = el color base sin mezclar. */
    --mng-primario-osc: var(--mng-primario);
    --mng-primario-tenue: var(--mng-fondo);
    --mng-acento-osc: var(--mng-acento);
    --mng-borde-fuerte: var(--mng-borde);
    --mng-texto-2: var(--mng-gris);
    /* Tintes translúcidos de marca: sin color-mix se degradan a un neutro,
       nunca a un hex de marca escrito a mano. */
    --mng-anillo-color: var(--mng-borde-fuerte);
    --mng-acento-tenue: var(--mng-fondo);
    --mng-ok-tenue: var(--mng-fondo);
    --mng-ok-halo: transparent;

    /* Geometría: esquinas casi rectas. Es una herramienta de trabajo
       industrial, no un blog; el radio grande solo se usa en tarjetas. */
    --mng-r: 4px;
    --mng-r-lg: 10px;
    --mng-borde-ancho: 1px;

    /* Objetivo táctil mínimo: se opera de pie, con guantes o con el dedo
       sucio de aceite. 56px es el mínimo cómodo, no el ideal. */
    --mng-tap: 56px;

    /* Sombras en tinta neutra (no es color de marca, es profundidad). */
    --mng-sombra: 0 1px 2px rgba(2, 6, 23, .06), 0 6px 20px rgba(2, 6, 23, .06);
    --mng-sombra-alta: 0 2px 4px rgba(2, 6, 23, .08), 0 18px 40px rgba(2, 6, 23, .14);
    --mng-anillo: 0 0 0 3px var(--mng-anillo-color);

    /* Sin fuentes por CDN: stack del sistema (CONTRATO §14 / rendimiento en
       conexiones de planta). */
    --mng-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mng-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --mng-primario-osc: color-mix(in srgb, var(--mng-primario) 78%, #000);
        --mng-primario-tenue: color-mix(in srgb, var(--mng-primario) 7%, #fff);
        --mng-acento-osc: color-mix(in srgb, var(--mng-acento) 82%, #000);
        --mng-borde-fuerte: color-mix(in srgb, var(--mng-borde) 45%, var(--mng-gris));
        --mng-texto-2: color-mix(in srgb, var(--mng-texto) 62%, #fff);
        --mng-anillo-color: color-mix(in srgb, var(--mng-primario) 30%, transparent);
        --mng-acento-tenue: color-mix(in srgb, var(--mng-acento) 7%, #fff);
        --mng-ok-tenue: color-mix(in srgb, var(--mng-estado-aceptada) 9%, #fff);
        --mng-ok-halo: color-mix(in srgb, var(--mng-estado-aceptada) 22%, transparent);
    }
}

/* ---------------------------------------------------------------------------
   2. BASE
   Se toca lo mínimo fuera de los bloques .mng-*: este CSS se encola en todo
   el front y no debe pelearse con otras plantillas.
   --------------------------------------------------------------------------- */
[class*="mng-"] {
    box-sizing: border-box;
}
[class*="mng-"] *,
[class*="mng-"] *::before,
[class*="mng-"] *::after {
    box-sizing: inherit;
}

/* Varios bloques de este archivo declaran display:flex/grid, y eso GANA al
   [hidden] del navegador. El intake abre paneles y la caja de resultado con
   el atributo hidden, así que sin esta regla la portada mostraría los tres
   formularios a la vez. Especificidad (0,2,0): pisa a cualquier .mng-*. */
[class*="mng-"][hidden] {
    display: none;
}

/* Documento de la portada y del intake (body.mng-body de inc/intake.php). */
body.mng-body {
    margin: 0;
    background: var(--mng-fondo);
    color: var(--mng-texto);
    font-family: var(--mng-fuente);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.mng-portada,
.mng-form,
.mng-agente,
.mng-rst,
.mng-firma,
.mng-encuesta,
.mng-bitacora {
    font-family: var(--mng-fuente);
    color: var(--mng-texto);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
   3. BADGES DE ESTADO  (CONTRATO §14 · bloque "Estado")
   mng_badge() ya pinta el color inline porque es un DATO del catálogo; estas
   clases existen para que el markup que NO pasa por mng_badge() (plantillas,
   correos renderizados en pantalla, listados propios) salga igual.
   --------------------------------------------------------------------------- */
.mng-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mng-gris);
    color: var(--mng-blanco);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

/* Tronco común */
.mng-badge--nueva      { background: var(--mng-estado-nueva); }
.mng-badge--en-gestion { background: var(--mng-estado-en-gestion); }
/* Rama comercial */
.mng-badge--cotizada   { background: var(--mng-estado-cotizada); }
.mng-badge--ganada     { background: var(--mng-estado-ganada); }
.mng-badge--en-camino  { background: var(--mng-estado-en-camino); }
.mng-badge--entregada  { background: var(--mng-estado-entregada); }
/* Rama servicio técnico */
.mng-badge--asignada   { background: var(--mng-estado-asignada); }
.mng-badge--programada { background: var(--mng-estado-programada); }
.mng-badge--en-sitio   { background: var(--mng-estado-en-sitio); }
.mng-badge--reportada  { background: var(--mng-estado-reportada); }
.mng-badge--aceptada   { background: var(--mng-estado-aceptada); }
/* Terminales */
.mng-badge--cerrada    { background: var(--mng-estado-cerrada); }
.mng-badge--perdida    { background: var(--mng-estado-perdida); }
.mng-badge--cancelada  { background: var(--mng-estado-cancelada); }

/* Estados del REPORTE (borrador/enviado/firmado/anulado). mng_css_vars() no
   emite vars para ellos, y este archivo no inventa hex: se reutilizan las del
   catálogo de estados, que son exactamente los mismos colores en config.php. */
.mng-badge--borrador { background: var(--mng-estado-nueva); }
.mng-badge--enviado  { background: var(--mng-estado-en-sitio); }
.mng-badge--firmado  { background: var(--mng-estado-aceptada); }
.mng-badge--anulado  { background: var(--mng-estado-perdida); }

/* `aceptada` es el evento que libera la comisión: se le da peso visual. */
.mng-badge--aceptada,
.mng-badge--firmado {
    box-shadow: 0 0 0 2px var(--mng-ok-halo);
}

/* NOTA PARA QUIEN AUDITE LAS CLASES DEL MARKUP
   mng_badge() (inc/helpers.php) compone el modificador concatenando:

       '<span class="mng-badge mng-badge--' . str_replace('_','-',$slug) . '">'

   así que un grep del markup devuelve el fragmento `.mng-badge--'`, que NO es
   una clase. Los modificadores REALES que produce son los 14 slugs de
   mng_estados_colors() y los 4 de mng_estados_reporte() — todos cubiertos
   arriba, con el guion bajo ya convertido en guion (en_gestion → en-gestion). */

/* ---------------------------------------------------------------------------
   4. ADJUNTOS  (salida de mng_render_attachments_html(), helpers.php)
   --------------------------------------------------------------------------- */
.mng-adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}
.mng-adjuntos__img {
    display: block;
    line-height: 0;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r);
    overflow: hidden;
}
.mng-adjuntos__img img {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: cover;
}
.mng-adjuntos__doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 12px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
    color: var(--mng-primario);
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.mng-adjuntos__doc::before {
    content: "\1F4CE"; /* clip */
    font-size: 12px;
}
.mng-adjuntos__doc:hover,
.mng-adjuntos__img:hover {
    border-color: var(--mng-primario);
}

/* ---------------------------------------------------------------------------
   5. PORTADA — LAS 3 PUERTAS  (CONTRATO §13 y §14)
   Industria pesada: banda de marca sólida, tipografía condensada en
   mayúsculas, esquinas rectas, numeración estarcida sobre cada puerta.
   --------------------------------------------------------------------------- */
.mng-portada {
    min-height: 100vh;
    padding: 0 0 48px;
    background: var(--mng-fondo);
    /* Trama diagonal muy tenue: da textura de plano técnico sin ruido. */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(2, 6, 23, .022) 0 2px,
        transparent 2px 9px
    );
}

/* Filete superior azul/rojo: es la firma visual del talonario Nº 000156. */
.mng-portada::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(
        90deg,
        var(--mng-primario) 0 68%,
        var(--mng-acento) 68% 100%
    );
}

/* Encabezado. El markup de inc/intake.php es:
   header.mng-portada__head > p.__marca + p.__lema + h1.__titulo + p.__intro */
.mng-portada__head {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 20px 4px;
}
.mng-portada__head img,
.mng-portada__logo {
    max-width: 220px;
    height: auto;
}
.mng-portada__marca {
    margin: 0;
    color: var(--mng-primario);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mng-portada__lema {
    margin: 2px 0 0;
    color: var(--mng-acento);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.mng-portada__titulo {
    margin: 20px 0 8px;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.12;
    color: var(--mng-texto);
}
.mng-portada__intro {
    margin: 0;
    max-width: 62ch;
    color: var(--mng-texto-2);
    font-size: 1.02rem;
}

.mng-portada__puertas {
    counter-reset: mng-puerta;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 28px 20px 0;
}

/* La puerta es un <button> (inc/intake.php despliega el panel sin recargar):
   hay que apagar la apariencia nativa antes de vestirla de tarjeta. */
.mng-portada__puerta {
    counter-increment: mng-puerta;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 22px;
    background: var(--mng-blanco);
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-top: 5px solid var(--mng-primario);
    border-radius: var(--mng-r);
    box-shadow: var(--mng-sombra);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-top-color .16s ease;
}

/* Número estarcido de la puerta (01 · 02 · 03). Decorativo: va en ::after
   para que ningún lector de pantalla lo lea como contenido. */
.mng-portada__puerta::after {
    content: counter(mng-puerta, decimal-leading-zero);
    position: absolute;
    top: 6px;
    right: 14px;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mng-borde);
    letter-spacing: -.04em;
    pointer-events: none;
    user-select: none;
}

.mng-portada__puerta:hover,
.mng-portada__puerta:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--mng-sombra-alta);
    border-top-color: var(--mng-acento);
}
.mng-portada__puerta:focus-visible {
    outline: 3px solid var(--mng-primario);
    outline-offset: 2px;
}

.mng-portada__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: var(--mng-r);
    background: var(--mng-primario-tenue);
    color: var(--mng-primario);
    font-size: 28px;
    line-height: 1;
}
/* Los iconos son SVG de trazo (stroke="currentColor", fill="none"): NO se
   toca `fill` desde aquí o la hoja pisaría el atributo y saldrían manchones. */
.mng-portada__icono svg,
.mng-portada__icono img {
    display: block;
    width: 34px;
    height: 34px;
}

/* Título y descripción de cada puerta. Se cubre también .mng-portada__titulo
   dentro de una puerta por si otro markup usa el nombre corto del CONTRATO. */
.mng-portada__puerta-titulo,
.mng-portada__puerta .mng-portada__titulo {
    display: block;
    margin: 0;
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--mng-texto);
}

.mng-portada__puerta-desc,
.mng-portada__puerta p {
    display: block;
    margin: 0;
    color: var(--mng-texto-2);
    font-size: .95rem;
    line-height: 1.45;
}

/* Puerta abierta: el panel de su formulario está desplegado debajo. */
.mng-portada__puerta--activa {
    border-top-color: var(--mng-acento);
    box-shadow: inset 0 0 0 2px var(--mng-primario), var(--mng-sombra-alta);
}
.mng-portada__puerta--activa .mng-portada__icono {
    background: var(--mng-primario);
    color: var(--mng-blanco);
}

/* El CTA de cada puerta se ancla abajo para que las 3 tarjetas se vean
   alineadas aunque los textos tengan distinto largo. */
.mng-portada__puerta > a,
.mng-portada__puerta button {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--mng-r);
    background: var(--mng-primario);
    color: var(--mng-blanco);
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
}
.mng-portada__puerta > a:hover,
.mng-portada__puerta button:hover {
    background: var(--mng-primario-osc);
}

/* Panel del formulario de la puerta abierta. Ancla visual con la puerta:
   mismo filete superior azul y el mismo ancho de la rejilla. */
.mng-portada__panel {
    max-width: 1160px;
    margin: 18px auto 0;
    padding: 8px 20px 0;
}
.mng-portada__panel-titulo {
    max-width: 860px;
    margin: 0 auto;
    padding: 14px 20px;
    border-radius: var(--mng-r) var(--mng-r) 0 0;
    background: var(--mng-primario);
    color: var(--mng-blanco);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* El formulario cuelga del título: se pegan sin costura. */
.mng-portada__panel .mng-form {
    padding-top: 20px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-top: 0;
    border-radius: 0 0 var(--mng-r) var(--mng-r);
    background: var(--mng-blanco);
}

.mng-portada__pie {
    max-width: 1160px;
    margin: 36px auto 0;
    padding: 20px;
    border-top: var(--mng-borde-ancho) solid var(--mng-borde);
    color: var(--mng-texto-2);
    font-size: .82rem;
}
.mng-portada__pie p {
    margin: 0 0 2px;
}

/* Portada sin puertas configuradas: pasa si el catálogo queda vacío. */
.mng-portada--vacio {
    padding: 60px 20px;
    text-align: center;
    color: var(--mng-texto-2);
}

/* ---------------------------------------------------------------------------
   6. FORMULARIOS DE ADMISIÓN  (CONTRATO §14 · bloque "Formulario")
   Se usan tanto en escritorio (ejecutiva) como en el celular del cliente.
   --------------------------------------------------------------------------- */
.mng-form {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px 40px;
}
.mng-form > h1,
.mng-form > h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.mng-form__grupo {
    margin: 0 0 22px;
    padding: 18px 18px 6px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-left: 4px solid var(--mng-primario);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
}
.mng-form__grupo > legend {
    padding: 0 8px;
    margin-left: -4px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mng-primario);
}

.mng-form__campo {
    position: relative;
    margin: 0 0 16px;
}

.mng-form__label {
    display: block;
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mng-texto-2);
}

.mng-form__req {
    color: var(--mng-acento);
    font-weight: 800;
}

.mng-form__input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: var(--mng-borde-ancho) solid var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
    color: var(--mng-texto);
    /* 16px reales: por debajo de eso iOS hace zoom al enfocar y el cliente
       pierde de vista el formulario. */
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}
textarea.mng-form__input {
    min-height: 120px;
    resize: vertical;
}
select.mng-form__input {
    /* Alto uniforme con los inputs; el select nativo calcula distinto. */
    height: 48px;
    padding-right: 34px;
}
.mng-form__input:focus {
    outline: none;
    border-color: var(--mng-primario);
    box-shadow: var(--mng-anillo);
}
.mng-form__input:disabled,
.mng-form__input[readonly] {
    background: var(--mng-fondo);
    color: var(--mng-texto-2);
}

.mng-form__unidad {
    position: absolute;
    right: 12px;
    bottom: 13px;
    font-size: .82rem;
    color: var(--mng-texto-2);
    pointer-events: none;
}
/* Con unidad visible hay que dejarle sitio para no pisar el valor. */
.mng-form__campo:has(.mng-form__unidad) .mng-form__input {
    padding-right: 64px;
}

.mng-form__ayuda {
    margin: 6px 0 0;
    font-size: .82rem;
    color: var(--mng-texto-2);
}

.mng-form__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mng-form__opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 14px 8px 12px;
    border: var(--mng-borde-ancho) solid var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
    font-size: .95rem;
    cursor: pointer;
}
.mng-form__opcion input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--mng-primario);
}
.mng-form__opcion:hover {
    border-color: var(--mng-primario);
}
.mng-form__opcion:has(input:checked) {
    border-color: var(--mng-primario);
    background: var(--mng-primario-tenue);
    font-weight: 600;
}

.mng-form__error {
    display: block;
    margin: 6px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--mng-acento);
    background: var(--mng-acento-tenue);
    color: var(--mng-acento-osc);
    font-size: .88rem;
    font-weight: 600;
}
.mng-form__input[aria-invalid="true"] {
    border-color: var(--mng-acento);
}

/* Zona de adjuntos. En el intake es un <div> con label + input file + ayuda
   (no un label envolvente), así que se estila como caja, no como botón. */
.mng-form__dropzone {
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 2px dashed var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    background: var(--mng-fondo);
    color: var(--mng-texto-2);
    font-size: .92rem;
}
.mng-form__dropzone .mng-form__label::before {
    content: "\2191 "; /* flecha de subida */
    color: var(--mng-primario);
    font-weight: 800;
}
.mng-form__dropzone:hover,
.mng-form__dropzone:focus-within,
.mng-form__dropzone.is-dragover {
    border-color: var(--mng-primario);
    background: var(--mng-primario-tenue);
}
.mng-form__dropzone input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    border: var(--mng-borde-ancho) solid var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
    font-size: .9rem;
    cursor: pointer;
}
.mng-form__dropzone .mng-form__ayuda {
    margin-top: 8px;
}

/* Aceptación de condiciones: se guarda la VERSIÓN del texto (§6.2), así que
   el bloque tiene que leerse, no esconderse en letra menuda. */
.mng-form__terminos {
    margin: 18px 0;
    padding: 16px 18px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-left: 4px solid var(--mng-acento);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
    font-size: .9rem;
    color: var(--mng-texto-2);
}
.mng-form__terminos p {
    margin: 0 0 10px;
}
.mng-form__terminos label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    color: var(--mng-texto);
    font-weight: 600;
    cursor: pointer;
}
.mng-form__terminos input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--mng-primario);
}

/* Botonera del formulario. */
.mng-form__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 6px;
}
.mng-form__enviar,
.mng-form button[type="submit"] {
    min-height: var(--mng-tap);
    padding: 14px 28px;
    border: 0;
    border-radius: var(--mng-r);
    background: var(--mng-primario);
    color: var(--mng-blanco);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
}
.mng-form__enviar:hover,
.mng-form button[type="submit"]:hover {
    background: var(--mng-primario-osc);
}
.mng-form__enviar[disabled],
.mng-form button[type="submit"][disabled] {
    opacity: .55;
    cursor: progress;
}
/* El honeypot del intake NO se estila aquí a propósito: inc/intake.php lo
   oculta con estilo en línea porque ocultarlo es parte de la función del
   campo. Si viviera en esta hoja, un cambio mío lo volvería visible y los
   clientes lo llenarían. */

/* ---------------------------------------------------------------------------
   7. CONTACTAR UN AGENTE  (CONTRATO §13: botón presente en las 3 puertas)
   Es también la caja de resultado del intake: al crear la solicitud, intake.js
   la rellena con el número (SOL-00042), el mensaje y el enlace de WhatsApp, y
   esconde el formulario. Por eso el número tiene peso de titular: es el dato
   que el cliente tiene que poder leer y citar.
   --------------------------------------------------------------------------- */
.mng-agente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    max-width: 860px;
    margin: 24px auto;
    padding: 18px 20px;
    border-radius: var(--mng-r);
    background: var(--mng-primario);
    color: var(--mng-blanco);
}
.mng-agente p,
.mng-agente strong {
    margin: 0;
    color: var(--mng-blanco);
}
.mng-agente p {
    flex: 1 1 240px;
    font-size: .95rem;
    opacity: .92;
}
.mng-agente__numero {
    flex: 1 0 100%;
    font-family: var(--mng-fuente-mono);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .06em;
    opacity: 1;
}
.mng-agente__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--mng-tap);
    padding: 14px 24px;
    border: 0;
    border-radius: var(--mng-r);
    /* Verde de WhatsApp: no existe en la paleta y este archivo no inventa
       hex, así que se reutiliza el verde del catálogo de estados. */
    background: var(--mng-estado-ganada);
    color: var(--mng-blanco);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.mng-agente__wa::before {
    content: "\260E"; /* teléfono */
    font-size: 1.1em;
}
.mng-agente__wa:hover {
    filter: brightness(.92);
    color: var(--mng-blanco);
}

/* ---------------------------------------------------------------------------
   8. REPORTE DE SERVICIO EN SOLO LECTURA  (CONTRATO §14 · bloque "Reporte")
   Es lo que el cliente LEE antes de firmar. Si no se lee, la firma no
   defiende a nadie: por eso prima la legibilidad sobre la densidad.
   --------------------------------------------------------------------------- */
.mng-rst {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mng-rst__seccion {
    padding: 16px 18px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
}
.mng-rst__seccion > h2,
.mng-rst__titulo {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mng-borde);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mng-primario);
}
.mng-rst__seccion > h3 {
    margin: 14px 0 4px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--mng-texto);
}

.mng-rst__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 20px;
}
.mng-rst__dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px dotted var(--mng-borde);
}
.mng-rst__dato > span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mng-texto-2);
}
.mng-rst__dato > b {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mng-texto);
    overflow-wrap: anywhere;
}

.mng-rst__texto {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-left: 3px solid var(--mng-borde-fuerte);
    background: var(--mng-fondo);
    border-radius: 0 var(--mng-r) var(--mng-r) 0;
    font-size: .98rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Las tablas anchas scrollean dentro de su caja, nunca la página. */
.mng-rst__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mng-rst__repuestos {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .92rem;
}
.mng-rst__repuestos th {
    padding: 9px 10px;
    background: var(--mng-fondo);
    border-bottom: 2px solid var(--mng-borde-fuerte);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mng-texto-2);
    white-space: nowrap;
}
.mng-rst__repuestos td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--mng-borde);
    vertical-align: top;
}
.mng-rst__repuestos tbody tr:nth-child(even) td {
    background: var(--mng-fondo);
}

.mng-rst__fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.mng-rst__fotos a,
.mng-rst__foto {
    display: block;
    margin: 0;
    line-height: 0;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r);
    overflow: hidden;
    background: var(--mng-fondo);
}
.mng-rst__fotos img,
.mng-rst__foto img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.mng-rst__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mng-rst__lista li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mng-borde);
}
.mng-rst__nota {
    margin: 6px 0;
    color: var(--mng-texto-2);
    font-size: .86rem;
}

/* ---------------------------------------------------------------------------
   9. PANTALLA DE FIRMA  (CONTRATO §12 y §14)
   Tablet en horizontal, de pie, en planta, con el cliente mirando:
   - el botón de firmar NUNCA queda debajo del pliegue,
   - el canvas es lo más grande que quepa,
   - alto contraste y objetivos táctiles de 56px hacia arriba.
   Mobile-first: en vertical el panel va debajo; desde 900px queda fijo a la
   derecha y solo scrollea la columna del documento.
   --------------------------------------------------------------------------- */
.mng-firma-body {
    margin: 0;
    background: var(--mng-fondo);
    font-family: var(--mng-fuente);
    color: var(--mng-texto);
}

.mng-firma__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: var(--mng-primario);
    color: var(--mng-blanco);
    border-bottom: 4px solid var(--mng-acento);
}
.mng-firma__marca {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.mng-firma__lema {
    font-size: .76rem;
    opacity: .82;
}
.mng-firma__num {
    padding: 6px 12px;
    border-radius: var(--mng-r);
    background: rgba(255, 255, 255, .16);
    font-family: var(--mng-fuente-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
}

/* Aviso a pantalla completa: token usado, reporte anulado o ya firmado. */
.mng-firma__aviso {
    max-width: 620px;
    margin: 40px auto;
    padding: 32px 26px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r-lg);
    background: var(--mng-blanco);
    box-shadow: var(--mng-sombra);
    text-align: center;
}
.mng-firma__aviso h1 {
    margin: 16px 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
}
.mng-firma__aviso p {
    margin: 0;
    color: var(--mng-texto-2);
    font-size: 1rem;
    line-height: 1.6;
}
.mng-firma__aviso-ic,
.mng-firma__ok-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mng-estado-en-sitio);
    color: var(--mng-blanco);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}
.mng-firma__aviso-ic--ok,
.mng-firma__ok-ic {
    background: var(--mng-estado-aceptada);
}

.mng-firma {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    align-items: start;
}
.mng-firma__doc {
    min-width: 0; /* sin esto, una tabla ancha estira el grid entero */
}

.mng-firma__panel {
    padding: 18px;
    border: 2px solid var(--mng-primario);
    border-radius: var(--mng-r-lg);
    background: var(--mng-blanco);
    box-shadow: var(--mng-sombra);
}
.mng-firma__panel-t {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mng-primario);
}
.mng-firma__legal {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--mng-acento);
    background: var(--mng-fondo);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--mng-texto-2);
}

.mng-firma__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.mng-firma__campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mng-firma__campo > span {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mng-texto-2);
}
.mng-firma__campo > span b {
    color: var(--mng-acento);
}
.mng-firma__campo input {
    min-height: 52px;
    padding: 12px 14px;
    border: var(--mng-borde-ancho) solid var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    font-family: inherit;
    font-size: 17px;
    color: var(--mng-texto);
    background: var(--mng-blanco);
}
.mng-firma__campo input:focus {
    outline: none;
    border-color: var(--mng-primario);
    box-shadow: var(--mng-anillo);
}

.mng-firma__canvas-wrap {
    position: relative;
    margin-bottom: 12px;
    border: 2px dashed var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    background: var(--mng-blanco);
}
/* La línea de firma del talonario, dibujada con un degradado para no meter
   markup extra. */
.mng-firma__canvas-wrap::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 34px;
    height: 1px;
    background: var(--mng-borde-fuerte);
    pointer-events: none;
}
.mng-firma__canvas {
    display: block;
    width: 100%;
    height: 220px;
    /* touch-action:none es obligatorio: sin esto el navegador interpreta el
       trazo como scroll y la firma sale cortada. */
    touch-action: none;
    cursor: crosshair;
    border-radius: var(--mng-r);
    background: transparent;
}
.mng-firma__canvas-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    text-align: center;
    color: var(--mng-texto-2);
    font-size: .9rem;
    letter-spacing: .04em;
    pointer-events: none;
    transition: opacity .2s ease;
}
.mng-firma__canvas-hint[hidden] {
    display: none;
}

.mng-firma__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.mng-firma__check input {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--mng-primario);
}

.mng-firma__msg {
    margin-bottom: 10px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mng-acento);
    min-height: 1.2em;
}

.mng-firma__acciones {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}
.mng-firma__limpiar,
.mng-firma__aceptar {
    min-height: 66px;
    padding: 14px 18px;
    border-radius: var(--mng-r);
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    touch-action: manipulation;
}
.mng-firma__limpiar {
    border: 2px solid var(--mng-borde-fuerte);
    background: var(--mng-blanco);
    color: var(--mng-texto-2);
}
.mng-firma__limpiar:hover {
    border-color: var(--mng-acento);
    color: var(--mng-acento);
}
.mng-firma__aceptar {
    border: 0;
    /* Verde de "aceptada": este botón ES el estado que libera la comisión. */
    background: var(--mng-estado-aceptada);
    color: var(--mng-blanco);
    box-shadow: 0 4px 0 rgba(2, 6, 23, .18);
}
.mng-firma__aceptar:hover {
    filter: brightness(.94);
}
.mng-firma__aceptar:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(2, 6, 23, .18);
}
.mng-firma__aceptar[disabled] {
    background: var(--mng-gris);
    box-shadow: none;
    cursor: not-allowed;
}

.mng-firma__ok {
    max-width: 620px;
    margin: 40px auto;
    padding: 32px 26px;
    border: 2px solid var(--mng-estado-aceptada);
    border-radius: var(--mng-r-lg);
    background: var(--mng-blanco);
    text-align: center;
}
.mng-firma__ok-meta {
    margin-top: 12px;
    color: var(--mng-texto-2);
    font-size: .9rem;
}

.mng-firma__foot {
    padding: 14px 18px 22px;
    text-align: center;
    color: var(--mng-texto-2);
    font-size: .8rem;
}

/* ---------------------------------------------------------------------------
   10. ENCUESTA DE SATISFACCIÓN  (CONTRATO §12 y §14 · inc/encuesta.php)
   Las «estrellitas» que pidió la clienta. Se contestan desde el celular, casi
   siempre de una sola pasada: objetivos táctiles grandes y estado claro.

   Igual que inc/firma.php, inc/encuesta.php es una página AUTOCONTENIDA: no
   ejecuta wp_head(), así que lleva su propio <style> en línea con estas mismas
   clases. Las reglas de aquí son la versión canónica y PALETIZADA del bloque
   (§14: nada de hex a mano) y son las que se aplican en cualquier plantilla
   que sí encole front.css. Misma excepción documentada arriba para .mng-firma__*.
   --------------------------------------------------------------------------- */

/* Documento de la encuesta: una sola tarjeta centrada, nada más en pantalla.
   dvh además de vh porque en el celular la barra del navegador se mueve. */
.mng-encuesta-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--mng-fondo);
    color: var(--mng-texto);
    font-family: var(--mng-fuente);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

.mng-encuesta {
    max-width: 560px;
    margin: 40px auto;
    padding: 28px 24px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-top: 5px solid var(--mng-primario);
    border-radius: var(--mng-r-lg);
    background: var(--mng-blanco);
    box-shadow: var(--mng-sombra);
    text-align: center;
}

/* Cuando la encuesta trae su propia cabecera de marca (inc/encuesta.php), la
   tarjeta pasa a ser solo el marco: el relleno se va al cuerpo para que la
   banda azul sangre de borde a borde. */
.mng-encuesta:has(.mng-encuesta__head) {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top-width: var(--mng-borde-ancho);
    overflow: hidden;
    text-align: left;
}

.mng-encuesta h1,
.mng-encuesta h2 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    font-weight: 800;
}
.mng-encuesta p {
    margin: 0 0 18px;
    color: var(--mng-texto-2);
}

/* Cabecera de marca: el cliente tiene que saber de quién es esta página antes
   de calificar nada. Filete rojo abajo, como en la pantalla de firma. */
.mng-encuesta__head {
    padding: 22px 24px;
    background: var(--mng-primario);
    border-bottom: 4px solid var(--mng-acento);
    color: var(--mng-blanco);
    text-align: center;
}
.mng-encuesta__marca {
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: .01em;
}
.mng-encuesta__lema {
    margin-top: 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .82;
}
/* RST-00042 · Empresa: el dato que permite al cliente saber QUÉ servicio
   está calificando. Monoespaciado, como todos los números de registro. */
.mng-encuesta__num {
    display: inline-block;
    max-width: 100%;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-family: var(--mng-fuente-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.mng-encuesta__cuerpo {
    padding: 26px 24px;
}

.mng-encuesta__form {
    margin: 0;
    text-align: center;
}
/* Compuestos a propósito: el título es un <h1> y la entradilla un <p>, así que
   compiten con `.mng-encuesta h1` y `.mng-encuesta p` de arriba, que tienen un
   tipo de elemento en el selector y ganarían a la clase suelta. */
.mng-encuesta .mng-encuesta__titulo {
    margin: 0 0 8px;
    font-size: 1.24rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mng-texto);
    text-align: center;
}
.mng-encuesta .mng-encuesta__intro {
    margin: 0 0 20px;
    color: var(--mng-texto-2);
    font-size: .92rem;
    text-align: center;
}

/* Nota bajo las estrellas: «Regular», «Excelente»… la escribe el JS al elegir.
   Reserva su alto para que el botón no salte cuando aparece el texto. */
.mng-encuesta__nota {
    min-height: 22px;
    margin: 0 0 18px;
    color: var(--mng-texto-2);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

/* Comentario opcional: <label> envolvente con <span> + <textarea>. */
.mng-encuesta__campo {
    display: block;
    margin: 0 0 14px;
    text-align: left;
}
.mng-encuesta__campo > span {
    display: block;
    margin-bottom: 6px;
    color: var(--mng-texto-2);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Mensaje de error del envío (rol=alert). Reserva alto por el mismo motivo. */
.mng-encuesta__msg {
    min-height: 20px;
    margin: 0 0 10px;
    color: var(--mng-acento-osc);
    font-size: .88rem;
    font-weight: 700;
    text-align: center;
}
.mng-encuesta__msg:not(:empty) {
    padding: 8px 12px;
    border-left: 3px solid var(--mng-acento);
    background: var(--mng-acento-tenue);
    text-align: left;
}

.mng-encuesta__enviar {
    width: 100%;
    min-height: var(--mng-tap);
    margin-top: 14px;
    border: 0;
    border-radius: var(--mng-r);
    background: var(--mng-primario);
    color: var(--mng-blanco);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.mng-encuesta__enviar:hover {
    background: var(--mng-primario-osc);
}
.mng-encuesta__enviar[disabled] {
    background: var(--mng-gris);
    cursor: not-allowed;
}

/* Enlace inválido, «todavía no», y el acuse tras enviar. Los tres son la misma
   caja centrada; solo cambia el icono. */
.mng-encuesta__aviso,
.mng-encuesta__gracias {
    padding: 10px 0;
    text-align: center;
}
.mng-encuesta__aviso h1,
.mng-encuesta__gracias h1 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 800;
}
.mng-encuesta__aviso p,
.mng-encuesta__gracias p {
    margin: 0;
    color: var(--mng-texto-2);
    font-size: .95rem;
    line-height: 1.6;
}
.mng-encuesta__aviso-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    /* Ámbar del catálogo de estados: es un aviso, no un error rojo. */
    background: var(--mng-estado-en-sitio);
    color: var(--mng-blanco);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.mng-encuesta__foot {
    padding: 14px;
    border-top: var(--mng-borde-ancho) solid var(--mng-borde);
    color: var(--mng-texto-2);
    font-size: .72rem;
    text-align: center;
}

.mng-encuesta__estrellas {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 18px;
    /* Sin dirección invertida: el hover se resuelve por JS con la clase
       --activa, que es lo que el markup del módulo de encuesta emite. */
}
/* 58×58 reales: bien por encima del mínimo de 44px de objetivo táctil. Se
   califica de pie, con el teléfono en una mano. */
.mng-encuesta__estrella {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--mng-r);
    background: transparent;
    color: var(--mng-borde-fuerte);
    font-family: inherit;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, color .12s ease;
    touch-action: manipulation;
    /* Sin el flash azul de Android al tocar: aquí el estado lo da --activa. */
    -webkit-tap-highlight-color: transparent;
}
/* El JS pinta la vista previa con --activa al pasar el dedo/ratón; este hover
   es el respaldo si el script todavía no cargó. */
.mng-encuesta__estrella:hover {
    transform: scale(1.12);
    color: var(--mng-estado-en-sitio);
}
.mng-encuesta__estrella:focus-visible {
    outline: 3px solid var(--mng-primario);
    outline-offset: 2px;
}
.mng-encuesta__estrella--activa {
    /* Ámbar del catálogo de estados: no se inventa un hex de "dorado". */
    color: var(--mng-estado-en-sitio);
    transform: scale(1.06);
}

/* Versión de SOLO LECTURA: la encuesta ya fue respondida y esto es un dato,
   no un control. No es tocable y no lo aparenta.
   El color lo pinta inline mng_encuesta_color() (rojo/ámbar/verde según la
   nota) y gana a propósito a esta regla: la nota ES el color. */
.mng-encuesta__estrellas--fija {
    gap: 0;
    margin-bottom: 14px;
    color: var(--mng-estado-en-sitio);
    font-size: 2.1rem;
    line-height: 1.2;
    letter-spacing: .1em;
    cursor: default;
    user-select: none;
}

.mng-encuesta textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border: var(--mng-borde-ancho) solid var(--mng-borde-fuerte);
    border-radius: var(--mng-r);
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}
.mng-encuesta textarea:focus {
    outline: none;
    border-color: var(--mng-primario);
    box-shadow: var(--mng-anillo);
}
.mng-encuesta button[type="submit"] {
    width: 100%;
    min-height: var(--mng-tap);
    margin-top: 14px;
    border: 0;
    border-radius: var(--mng-r);
    background: var(--mng-primario);
    color: var(--mng-blanco);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
}
.mng-encuesta button[type="submit"]:hover {
    background: var(--mng-primario-osc);
}

/* ---------------------------------------------------------------------------
   11. BITÁCORA  (CONTRATO §14 · bloque "Bitácora")
   En el front se ve en el seguimiento por token; el color del tipo lo pone
   el servidor inline porque es un dato del catálogo (config.php).
   --------------------------------------------------------------------------- */
.mng-bitacora {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mng-bitacora__item {
    padding: 10px 14px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-left: 4px solid var(--mng-gris);
    border-radius: 0 var(--mng-r) var(--mng-r) 0;
    background: var(--mng-blanco);
}
.mng-bitacora__meta {
    margin-bottom: 4px;
    font-size: .78rem;
    color: var(--mng-texto-2);
}
.mng-bitacora__autor {
    font-weight: 700;
    color: var(--mng-texto);
}
.mng-bitacora__fecha {
    font-family: var(--mng-fuente-mono);
    font-size: .74rem;
}
.mng-bitacora__texto,
.mng-bitacora__accion {
    font-size: .95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
/* Punto de la línea de tiempo del seguimiento por token. */
.mng-bitacora__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--mng-primario);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   11 bis. SEGUIMIENTO PÚBLICO POR TOKEN  (inc/track.php · /?mng_track=…)

   La cara del sistema hacia AFUERA. Quien abre esto no tiene cuenta, llega
   desde un correo y casi siempre desde el celular. Mitasa representa maquinaria
   industrial: la página tiene que leerse seria y sobria —esquinas casi rectas,
   banda de marca sólida, cero adorno—, no como una entrada de blog.

   Como la encuesta y la firma, inc/track.php es autocontenida (no ejecuta
   wp_head) y lleva su propio <style>. Estas reglas son la versión canónica y
   paletizada del bloque: aquí no hay un solo hex escrito a mano.

   El bloque .mng-bitacora se reutiliza tal cual (§14) y se ajusta al final de
   esta sección para el contexto del seguimiento.
   --------------------------------------------------------------------------- */
.mng-track-body {
    margin: 0;
    background: var(--mng-fondo);
    color: var(--mng-texto);
    font-family: var(--mng-fuente);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

/* Banda de marca. Mismo filete rojo inferior que la pantalla de firma: las
   dos son páginas públicas y deben reconocerse como la misma casa. */
.mng-track__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: var(--mng-primario);
    border-bottom: 4px solid var(--mng-acento);
    color: var(--mng-blanco);
}
.mng-track__marca {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
}
.mng-track__lema {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .82;
}
/* SOL-00042: el dato que el cliente cita por teléfono. Monoespaciado, como
   todos los números de registro del sistema. */
.mng-track__num {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-family: var(--mng-fuente-mono);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
}

.mng-track {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 14px 8px;
}
.mng-track__card {
    padding: 22px 20px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-top: 4px solid var(--mng-primario);
    border-radius: var(--mng-r-lg);
    background: var(--mng-blanco);
    box-shadow: var(--mng-sombra);
}

/* Encabezado de la tarjeta: tipo de solicitud + empresa a la izquierda,
   .mng-badge del estado a la derecha (lo pinta mng_badge(), color inline). */
.mng-track__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.mng-track__titulo {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--mng-primario);
}
.mng-track__sub {
    margin-top: 3px;
    color: var(--mng-texto-2);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* --- LÍNEA DE TIEMPO -------------------------------------------------------
   Lo único que el cliente vino a ver: dónde va lo mío y qué falta.
   Mobile-first VERTICAL: con 7 etapas, un stepper horizontal en un teléfono de
   360px deja las etiquetas en 9px o lo manda a scroll lateral, y entonces deja
   de responder a la pregunta. Desde 560px se pone horizontal (§12).
   El riel se dibuja con ::before del propio paso y se pinta de verde cuando ese
   paso ya está cumplido: el avance se lee sin contar círculos. */
.mng-track__pasos {
    display: flex;
    flex-direction: column;
    margin: 0 0 22px;
}
.mng-track__paso {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 2px 0;
}
/* Riel hasta el paso siguiente. Con los pasos pegados (sin gap) y de alto
   uniforme, `top:50%; height:100%` va justo de centro a centro. */
.mng-track__paso::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    background: var(--mng-borde);
}
.mng-track__paso:last-child::before {
    display: none;
}

.mng-track__paso-c {
    position: relative; /* por encima del riel */
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 3px solid var(--mng-borde);
    border-radius: 50%;
    background: var(--mng-blanco);
    color: var(--mng-texto-2);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}
.mng-track__paso-l {
    position: relative;
    z-index: 1;
    color: var(--mng-texto-2);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Cumplido: verde de `aceptada`, el mismo que en toda la aplicación significa
   «esto ya pasó y quedó bien». */
.mng-track__paso--hecho .mng-track__paso-c {
    border-color: var(--mng-estado-aceptada);
    background: var(--mng-estado-aceptada);
    color: var(--mng-blanco);
}
.mng-track__paso--hecho .mng-track__paso-l {
    color: var(--mng-texto);
}
.mng-track__paso--hecho::before {
    background: var(--mng-estado-aceptada);
}

/* Aquí voy. Es el único paso con halo y con la etiqueta en azul: si el cliente
   solo mira un segundo, este es el que tiene que ver. */
.mng-track__paso--actual .mng-track__paso-c {
    border-color: var(--mng-primario);
    background: var(--mng-primario);
    color: var(--mng-blanco);
    box-shadow: 0 0 0 4px var(--mng-anillo-color);
}
.mng-track__paso--actual .mng-track__paso-l {
    color: var(--mng-primario);
    font-weight: 800;
}

/* Todavía no. Círculo hueco y gris: se lee como «falta», no como «falló». */
.mng-track__paso--pendiente .mng-track__paso-c {
    background: var(--mng-blanco);
    color: var(--mng-texto-2);
}

/* El caso feo: perdida o cancelada. No puede confundirse con un paso que
   simplemente todavía no ha llegado, así que además del círculo rojo lleva
   franja tenue de acento y la etiqueta en versalitas. */
.mng-track__paso--neg {
    padding: 6px 10px;
    border-radius: var(--mng-r);
    background: var(--mng-acento-tenue);
}
.mng-track__paso--neg .mng-track__paso-c {
    border-color: var(--mng-acento);
    background: var(--mng-acento);
    color: var(--mng-blanco);
}
.mng-track__paso--neg .mng-track__paso-l {
    color: var(--mng-acento-osc);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Rama muerta: solo dos pasos (Recibida → No concretada/Cancelada). */
.mng-track__pasos--fin .mng-track__paso {
    min-height: 40px;
}

/* Motivo del cierre. Es la explicación de por qué no siguió: se lee, no se
   esconde. */
.mng-track__motivo {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-left: 4px solid var(--mng-acento);
    border-radius: 0 var(--mng-r) var(--mng-r) 0;
    background: var(--mng-acento-tenue);
    color: var(--mng-acento-osc);
    font-size: .92rem;
    overflow-wrap: anywhere;
}

/* --- DATOS DE CABECERA ---------------------------------------------------- */
.mng-track__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.mng-track__dato {
    min-width: 0;
    padding: 10px 12px;
    border: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: var(--mng-r);
    background: var(--mng-fondo);
}
.mng-track__dato > span {
    display: block;
    color: var(--mng-texto-2);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.mng-track__dato > b {
    display: block;
    margin-top: 2px;
    font-size: .92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* --- BLOQUES DE LA TARJETA ------------------------------------------------ */
.mng-track__bloque {
    margin-top: 14px;
    padding-top: 14px;
    border-top: var(--mng-borde-ancho) solid var(--mng-borde);
}
.mng-track__bloque-t {
    margin-bottom: 8px;
    color: var(--mng-texto-2);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.mng-track__texto {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--mng-texto);
    overflow-wrap: anywhere;
}

/* --- REPORTES DE SERVICIO DE LA SOLICITUD --------------------------------- */
.mng-track__reportes {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mng-track__reporte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: var(--mng-borde-ancho) solid var(--mng-borde);
}
.mng-track__reporte:last-child {
    border-bottom: 0;
}
.mng-track__reporte > div > b {
    font-family: var(--mng-fuente-mono);
    font-size: .92rem;
    letter-spacing: .04em;
}
.mng-track__reporte-f {
    margin-left: 8px;
    color: var(--mng-texto-2);
    font-size: .8rem;
}
.mng-track__reporte-acc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* Calificación ya dada: ★★★★☆ como texto plano. Mismo ámbar del catálogo de
   estados que usan las estrellas de la encuesta. */
.mng-track__estrellas {
    color: var(--mng-estado-en-sitio);
    font-size: 1.05rem;
    letter-spacing: .12em;
    white-space: nowrap;
}
/* «Califique el servicio»: la única acción de toda la página. Va en acento
   para que no compita con el azul de la marca, y con 44px de alto para el dedo. */
.mng-track__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--mng-r);
    background: var(--mng-acento);
    color: var(--mng-blanco);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
}
.mng-track__cta:hover,
.mng-track__cta:focus {
    background: var(--mng-acento-osc);
    color: var(--mng-blanco);
}
.mng-track__cta:focus-visible {
    outline: 3px solid var(--mng-primario);
    outline-offset: 2px;
}

/* --- ENLACE INVÁLIDO O REGISTRO NO DISPONIBLE ----------------------------- */
.mng-track__vacio {
    padding: 44px 24px;
    text-align: center;
}
.mng-track__vacio-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    /* Ámbar: es un «no lo encontramos», no un error del cliente. */
    background: var(--mng-estado-en-sitio);
    color: var(--mng-blanco);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}
.mng-track__vacio h1 {
    margin: 0 0 8px;
    font-size: 1.24rem;
    font-weight: 800;
}
.mng-track__vacio p {
    margin: 0;
    color: var(--mng-texto-2);
    font-size: .92rem;
    line-height: 1.6;
}

.mng-track__nota {
    max-width: 46ch;
    margin: 16px auto 0;
    color: var(--mng-texto-2);
    font-size: .8rem;
    text-align: center;
}
.mng-track__foot {
    padding: 16px 14px 24px;
    color: var(--mng-texto-2);
    font-size: .72rem;
    text-align: center;
}

/* --- BITÁCORA DENTRO DEL SEGUIMIENTO --------------------------------------
   Aquí la bitácora es un <ul> compacto con punto a la izquierda, no la lista
   de fichas con filete de color del escritorio: el cliente ve una versión ya
   filtrada (mng_track_bitacora_publica) y lo que importa es la secuencia. */
.mng-track .mng-bitacora {
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mng-track .mng-bitacora__item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border: 0;
    border-bottom: var(--mng-borde-ancho) solid var(--mng-borde);
    border-radius: 0;
    background: transparent;
}
.mng-track .mng-bitacora__item:last-child {
    border-bottom: 0;
}
.mng-track .mng-bitacora__dot {
    width: 9px;
    height: 9px;
    margin: 7px 0 0;
}
.mng-track .mng-bitacora__accion {
    font-size: .88rem;
}
.mng-track .mng-bitacora__fecha {
    color: var(--mng-texto-2);
    font-size: .72rem;
}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE
   --------------------------------------------------------------------------- */

/* La línea de tiempo del seguimiento pasa de vertical a horizontal. 560px es
   el punto en que caben 7 etiquetas sin bajar de 11px ni recortar palabras;
   por debajo se queda en columna, que es donde de verdad se lee en el celular. */
@media (min-width: 560px) {
    .mng-track__pasos {
        flex-direction: row;
        align-items: flex-start;
    }
    .mng-track__paso {
        flex: 1 1 0;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        min-height: 0;
        padding: 0;
        text-align: center;
    }
    /* El riel se acuesta: de centro a centro del círculo siguiente. */
    .mng-track__paso::before {
        left: 50%;
        right: -50%;
        top: 15px; /* mitad del círculo de 32px, menos el grosor del riel */
        width: auto;
        height: 3px;
        transform: none;
    }
    .mng-track__paso-l {
        font-size: .7rem;
        letter-spacing: .01em;
    }
    /* La rama muerta son solo dos pasos: sin esto se estirarían a media
       pantalla cada uno y el riel quedaría larguísimo. */
    .mng-track__pasos--fin .mng-track__paso {
        flex: 0 1 150px;
    }
    .mng-track__paso--neg {
        padding: 6px 4px;
    }
}

/* Tablet vertical y móvil grande */
@media (min-width: 640px) {
    .mng-portada__puertas {
        grid-template-columns: repeat(2, 1fr);
    }
    .mng-firma__canvas {
        height: 240px;
    }
    .mng-track {
        padding: 26px 20px 8px;
    }
    .mng-track__card {
        padding: 28px 26px;
    }
    .mng-track__titulo {
        font-size: 1.32rem;
    }
}

/* Tablet horizontal — el caso de uso de la firma en planta.
   El documento scrollea en su columna y el panel queda pegado: el botón
   "Firmar y aceptar" siempre visible, cero scroll para llegar a firmar. */
@media (min-width: 900px) {
    .mng-portada__puertas {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
    .mng-portada__puerta {
        padding: 30px 26px 26px;
    }

    .mng-firma {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 18px;
        padding: 18px;
        /* 100dvh evita que la barra del navegador de la tablet se coma el
           botón de firmar; la línea previa es el respaldo para navegadores
           que no conocen dvh (tablets Android viejas de planta). */
        height: calc(100vh - 120px);
        height: calc(100dvh - 120px);
    }
    .mng-firma__doc {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }
    .mng-firma__panel {
        position: sticky;
        top: 18px;
        max-height: 100%;
        overflow-y: auto;
    }
    .mng-firma__canvas {
        height: 200px;
    }
}

@media (min-width: 1200px) {
    .mng-firma {
        grid-template-columns: minmax(0, 1fr) 440px;
    }
    .mng-firma__canvas {
        height: 230px;
    }
}

/* Tablet horizontal de poca altura: prioridad absoluta al canvas. */
@media (orientation: landscape) and (max-height: 620px) {
    .mng-firma__legal {
        max-height: 4.5em;
        overflow-y: auto;
    }
    .mng-firma__canvas {
        height: 170px;
    }
    .mng-firma__limpiar,
    .mng-firma__aceptar {
        min-height: 58px;
    }
}

/* ---------------------------------------------------------------------------
   13. ACCESIBILIDAD Y MEDIOS
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mng-portada__puerta,
    .mng-encuesta__estrella,
    .mng-firma__canvas-hint {
        transition: none;
    }
    .mng-portada__puerta:hover,
    .mng-encuesta__estrella:hover,
    .mng-encuesta__estrella--activa {
        transform: none;
    }
}

/* Alto contraste forzado (Windows / modo de contraste del sistema). */
@media (forced-colors: active) {
    .mng-portada__puerta,
    .mng-firma__panel,
    .mng-form__grupo,
    .mng-track__card,
    .mng-track__dato {
        border: 1px solid CanvasText;
    }
    /* En contraste forzado el relleno del círculo se pierde: el paso actual y
       el negativo se distinguen entonces por el grosor del borde. */
    .mng-track__paso--actual .mng-track__paso-c,
    .mng-track__paso--neg .mng-track__paso-c {
        outline: 2px solid CanvasText;
        outline-offset: 1px;
    }
}

/* El reporte firmado se imprime tal cual como respaldo en papel: se cae el
   panel de firma interactivo y el fondo, y las secciones no se parten. */
@media print {
    .mng-firma__panel,
    .mng-firma__foot,
    .mng-agente,
    .mng-form__dropzone,
    /* En papel, el botón de calificar no lleva a ninguna parte. */
    .mng-track__cta {
        display: none;
    }
    .mng-firma-body,
    .mng-portada,
    .mng-track-body,
    .mng-encuesta-body {
        background: #fff;
    }
    .mng-track__card {
        box-shadow: none;
    }
    .mng-track__bloque {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .mng-firma {
        display: block;
        height: auto;
        padding: 0;
    }
    .mng-firma__doc {
        height: auto;
        overflow: visible;
    }
    .mng-rst__seccion {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
    }
    .mng-rst__scroll {
        overflow: visible;
    }
    .mng-rst__repuestos {
        min-width: 0;
    }
}