/* ==========================================================================
   invoiceBin - Mercado (la venta cruzada: asistente, wizard de tienda,
   Explorar el mercado y Vender a la red).

   Todo cuelga de .mer y todas las clases van prefijadas con mer-. Las
   pantallas con sesion cargan ademas tienda.css y usan sus componentes
   (tda-card, tda-btn, tda-chip, tda-aviso, tda-metricas, tda-input): aqui
   solo esta lo que no existe ahi. Los tokens --mer-* valen lo mismo que los
   --tda-* de tienda.css para que las dos hojas se vean como una.

   TELEFONO PRIMERO. El proveedor abre su tienda desde el celular, en el
   portal de su cliente. Las reglas base son para pantallas angostas (una
   columna, botones de 48px, progreso siempre visible) y los @media de abajo
   ensanchan para escritorio.

   La seccion .mer-publico es la base minima de las paginas sin _Layout
   (asistente y wizard sin sesion): reset del body, cabecera ligera y pie.
   ========================================================================== */

.mer {
    --mer-tinta: #101828;
    --mer-tinta-2: #475467;
    --mer-gris: #98A2B3;
    --mer-linea: #EAECF0;
    --mer-fondo: #F7F8FA;
    --mer-superficie: #FFFFFF;
    --mer-marca: #0E7C86;
    --mer-marca-osc: #0B5F66;
    --mer-marca-suave: rgba(14,124,134,.10);
    --mer-azul: #1570EF;
    --mer-azul-osc: #175CD3;
    --mer-verde: #12B76A;
    --mer-verde-osc: #067647;
    --mer-ambar: #F79009;
    --mer-ambar-osc: #B54708;
    --mer-rojo: #F04438;
    --mer-rojo-osc: #B42318;
    --mer-oro: #F5B301;
    --mer-r-sm: 10px;
    --mer-r: 16px;
    --mer-sombra: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
    --mer-sombra-alta: 0 2px 6px rgba(16,24,40,.07), 0 18px 44px rgba(16,24,40,.10);

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', Helvetica, Arial, sans-serif;
    color: var(--mer-tinta);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

.mer, .mer *, .mer *:before, .mer *:after { box-sizing: border-box; }
.mer a { color: var(--mer-marca-osc); }
.mer a:hover { color: var(--mer-marca); }
.mer img { max-width: 100%; }
.mer .mer-oculto { display: none !important; }
.mer .mer-mono { font-family: Menlo, Consolas, 'Courier New', monospace; font-size: 12.5px; }
.mer .mer-nota { font-size: 13px; color: var(--mer-gris); line-height: 1.55; }
.mer .mer-nota b { color: var(--mer-tinta-2); }
.mer .mer-lienzo { max-width: 980px; margin: 0 auto; }
.mer .mer-lienzo--angosto { max-width: 720px; }
.mer .mer-centro { text-align: center; }
.mer .mer-espacio { margin-top: 14px; }
.mer .mer-espacio-2 { margin-top: 22px; }
.mer .mer-verde { color: var(--mer-verde-osc); }
.mer .mer-ambar { color: var(--mer-ambar-osc); }
.mer .mer-rojo { color: var(--mer-rojo-osc); }

/* ==========================================================================
   Base de las paginas publicas (sin _Layout)
   ========================================================================== */

body.mer-cuerpo { margin: 0; background: #F7F8FA; }

.mer.mer-publico { min-height: 100vh; background: var(--mer-fondo); }
.mer.mer-publico .tda-lienzo, .mer.mer-publico .mer-lienzo { padding: 18px 14px 96px; }

.mer-cabecera {
    background: #fff; border-bottom: 1px solid #EAECF0;
    position: sticky; top: 0; z-index: 20;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', Helvetica, Arial, sans-serif;
}
.mer-cabecera .mer-cabecera-in {
    max-width: 980px; margin: 0 auto; padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mer-cabecera .mer-logo {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-size: 16px; font-weight: 600; color: #101828; letter-spacing: -0.01em; white-space: nowrap;
}
.mer-cabecera .mer-logo i { color: #0E7C86; font-size: 18px; }
.mer-cabecera .mer-logo b { color: #0E7C86; font-weight: 700; }
.mer-cabecera .mer-cabecera-titulo { display: none; font-size: 13px; color: #98A2B3; }
.mer-cabecera .mer-cabecera-liga {
    font-size: 13px; font-weight: 600; color: #0B5F66; text-decoration: none;
    padding: 8px 12px; border-radius: 999px; background: rgba(14,124,134,.10); white-space: nowrap;
}
.mer-cabecera .mer-cabecera-liga:hover { background: rgba(14,124,134,.18); }

.mer-pie {
    max-width: 980px; margin: 0 auto; padding: 18px 14px 28px;
    font-size: 12.5px; color: #98A2B3; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', Helvetica, Arial, sans-serif;
}
.mer-pie a { color: #475467; text-decoration: none; }
.mer-pie a:hover { color: #0E7C86; }

/* ==========================================================================
   El wizard: progreso, cabecera de paso y acciones
   ========================================================================== */

.mer .mer-cab { margin-bottom: 14px; }
.mer .mer-cab h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.mer .mer-cab .mer-sub { font-size: 14px; color: var(--mer-gris); margin-top: 6px; line-height: 1.5; }
.mer .mer-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mer-gris); margin-bottom: 6px; }
.mer .mer-kicker a { color: inherit; text-decoration: none; }

/* La barra de seis pasos: siempre visible, se desliza en telefono. */
.mer .mer-progreso {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--mer-superficie); border-radius: var(--mer-r); box-shadow: var(--mer-sombra);
    border: 1px solid rgba(16,24,40,.04);
}
.mer .mer-progreso li { flex: 1 0 84px; min-width: 84px; position: relative; text-align: center; }
.mer .mer-progreso li > a, .mer .mer-progreso li > span {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px 10px; font-size: 10.5px; font-weight: 600; color: var(--mer-gris);
    text-decoration: none; line-height: 1.2;
}
.mer .mer-progreso li > a:hover { color: var(--mer-marca-osc); text-decoration: none; }
.mer .mer-progreso li i {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(16,24,40,.05); color: var(--mer-gris); font-size: 13px;
}
.mer .mer-progreso li.mer-hecho i { background: var(--mer-verde); color: #fff; }
.mer .mer-progreso li.mer-hecho > a, .mer .mer-progreso li.mer-hecho > span { color: var(--mer-tinta-2); }
.mer .mer-progreso li.mer-actual i { background: var(--mer-marca); color: #fff; box-shadow: 0 0 0 4px var(--mer-marca-suave); }
.mer .mer-progreso li.mer-actual > a, .mer .mer-progreso li.mer-actual > span { color: var(--mer-marca-osc); }
.mer .mer-progreso li.mer-actual:after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--mer-marca); }

.mer .mer-paso-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.mer .mer-paso-cab .mer-paso-ico {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; background: var(--mer-marca-suave); color: var(--mer-marca);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.mer .mer-paso-cab h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 4px; line-height: 1.2; }
.mer .mer-paso-cab .mer-porque { font-size: 14px; color: var(--mer-tinta-2); line-height: 1.5; }
.mer .mer-paso-cab .mer-porque b { color: var(--mer-marca-osc); }

/* Acciones del paso: fijas abajo en telefono, para que el boton grande siempre este a la mano. */
.mer .mer-acciones {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--mer-linea);
    box-shadow: 0 -6px 24px rgba(16,24,40,.08);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mer .mer-acciones .tda-btn { min-height: 48px; }
.mer .mer-acciones .mer-acciones-principal { flex: 1 1 auto; }
.mer .mer-acciones .mer-acciones-secundaria { flex: 0 0 auto; }
.mer .mer-acciones .mer-acciones-nota { display: none; font-size: 12.5px; color: var(--mer-gris); }

/* ---------- Numeros reales ---------- */

.mer .mer-numeros { display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); margin: 12px 0 16px; }
.mer .mer-numero {
    background: var(--mer-superficie); border-radius: var(--mer-r-sm); padding: 12px 14px;
    border: 1px solid var(--mer-linea); display: flex; gap: 12px; align-items: center;
}
.mer .mer-numero i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mer-marca-suave); color: var(--mer-marca); font-size: 15px; }
.mer .mer-numero b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--mer-tinta); }
.mer .mer-numero span { font-size: 12.5px; color: var(--mer-tinta-2); line-height: 1.35; }
.mer .mer-numero--verde i { background: rgba(18,183,106,.13); color: var(--mer-verde-osc); }
.mer .mer-numero--azul i { background: rgba(21,112,239,.10); color: var(--mer-azul-osc); }
.mer .mer-numero--ambar i { background: rgba(247,144,9,.14); color: var(--mer-ambar-osc); }
.mer .mer-claves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mer .mer-claves span { font-size: 11.5px; background: rgba(16,24,40,.05); border-radius: 6px; padding: 3px 8px; color: var(--mer-tinta-2); }
.mer .mer-claves span b { font-family: Menlo, Consolas, monospace; font-weight: 600; color: var(--mer-tinta); }

/* ---------- Opciones grandes (casillas e interruptores) ---------- */

.mer .mer-opcion {
    display: flex; gap: 12px; align-items: flex-start; width: 100%;
    padding: 13px 14px; border: 1px solid var(--mer-linea); border-radius: 14px; background: #fff;
    cursor: pointer; margin: 0 0 10px; font-weight: 400; transition: border-color .16s ease, box-shadow .16s ease;
}
.mer .mer-opcion:hover { border-color: #BFD3E6; box-shadow: 0 6px 18px rgba(16,24,40,.06); }
.mer .mer-opcion input { margin: 3px 0 0; width: 20px; height: 20px; flex: 0 0 20px; accent-color: #0E7C86; }
.mer .mer-opcion .mer-opcion-nom { display: block; font-size: 15px; font-weight: 600; color: var(--mer-tinta); line-height: 1.3; }
.mer .mer-opcion .mer-opcion-des { display: block; font-size: 13px; color: var(--mer-gris); line-height: 1.45; margin-top: 2px; }
.mer .mer-opcion--marcada, .mer .mer-opcion:has(input:checked) { border-color: var(--mer-marca); box-shadow: 0 0 0 3px var(--mer-marca-suave); }

.mer .mer-ficha { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; }
.mer .mer-ficha .mer-ficha-etq { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mer-gris); margin-bottom: 2px; }
.mer .mer-ficha .mer-ficha-val { font-size: 14px; color: var(--mer-tinta); word-break: break-word; }
.mer .mer-ficha .mer-ficha-val.mer-vacia { color: var(--mer-gris); font-style: italic; }

.mer .mer-prefijo { display: flex; align-items: stretch; }
.mer .mer-prefijo span {
    display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--mer-linea); border-right: 0;
    border-radius: var(--mer-r-sm) 0 0 var(--mer-r-sm); background: rgba(16,24,40,.03); font-size: 12.5px; color: var(--mer-gris); white-space: nowrap;
}
.mer .mer-prefijo .tda-input { border-radius: 0 var(--mer-r-sm) var(--mer-r-sm) 0; }

.mer .mer-logo-vista { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mer .mer-logo-vista img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 1px solid var(--mer-linea); background: #fff; }
.mer .mer-logo-vista .mer-logo-vacio { width: 64px; height: 64px; border-radius: 14px; background: var(--mer-marca-suave); color: var(--mer-marca); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.mer input[type=file].mer-archivo { font-size: 14px; }

/* ---------- Conceptos facturados (catalogo desde las facturas) ---------- */

.mer .mer-conceptos { list-style: none; margin: 0; padding: 0; }
.mer .mer-concepto {
    display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 6px 10px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--mer-linea);
}
.mer .mer-concepto:last-child { border-bottom: 0; }
.mer .mer-concepto input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0E7C86; }
.mer .mer-concepto .mer-concepto-nom { font-size: 14px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.mer .mer-concepto .mer-concepto-datos { font-size: 12px; color: var(--mer-gris); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mer .mer-concepto .mer-concepto-datos b { font-family: Menlo, Consolas, monospace; font-weight: 600; color: var(--mer-tinta-2); }
.mer .mer-concepto .mer-concepto-campos { grid-column: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 6px; }
.mer .mer-concepto .mer-concepto-campos .tda-input, .mer .mer-concepto .mer-concepto-campos .tda-select { min-height: 40px; font-size: 14px; padding: 6px 10px; }
.mer .mer-conceptos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--mer-gris); }
.mer .mer-conceptos-cab button { background: none; border: 0; color: var(--mer-marca-osc); font-weight: 600; cursor: pointer; min-height: 44px; padding: 10px 12px; font-size: 13px; }

/* ---------- Captura rapida ---------- */

.mer .mer-alta { list-style: none; margin: 0; padding: 0; }
.mer .mer-alta li {
    display: grid; grid-template-columns: minmax(0,1fr); gap: 6px;
    padding: 10px 0; border-bottom: 1px solid var(--mer-linea);
}
.mer .mer-alta li:last-child { border-bottom: 0; }
.mer .mer-alta .mer-alta-fila { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap: 6px; }
.mer .mer-alta .tda-input, .mer .mer-alta .tda-select { min-height: 40px; font-size: 14px; padding: 6px 10px; }
.mer .mer-alta-num { font-size: 11px; color: var(--mer-gris); font-weight: 600; }
.mer .mer-alta-mas { margin-top: 8px; }

/* ---------- Lista de comprobacion (publicar) ---------- */

.mer .mer-lista-ok { list-style: none; margin: 0; padding: 0; }
.mer .mer-lista-ok li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--mer-linea); font-size: 14px; line-height: 1.45; }
.mer .mer-lista-ok li:last-child { border-bottom: 0; }
.mer .mer-lista-ok li i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.mer .mer-lista-ok li.mer-si i { background: rgba(18,183,106,.13); color: var(--mer-verde-osc); }
.mer .mer-lista-ok li.mer-no i { background: rgba(247,144,9,.14); color: var(--mer-ambar-osc); }
.mer .mer-lista-ok li.mer-opc i { background: rgba(16,24,40,.05); color: var(--mer-gris); }
.mer .mer-lista-ok li b { display: block; font-weight: 600; }
.mer .mer-lista-ok li span { color: var(--mer-gris); font-size: 13px; }
.mer .mer-lista-ok li a { font-weight: 600; }

/* ---------- Listo ---------- */

.mer .mer-listo { text-align: center; padding: 26px 16px 20px; }
.mer .mer-listo .mer-listo-ico { width: 72px; height: 72px; border-radius: 50%; background: rgba(18,183,106,.13); color: var(--mer-verde-osc); display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 14px; }
.mer .mer-listo h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.mer .mer-listo p { color: var(--mer-tinta-2); font-size: 14.5px; line-height: 1.55; max-width: 520px; margin: 0 auto 14px; }
.mer .mer-listo .mer-url { display: inline-block; font-family: Menlo, Consolas, monospace; font-size: 13px; background: rgba(16,24,40,.05); padding: 6px 12px; border-radius: 8px; word-break: break-all; margin-bottom: 16px; }
.mer .mer-siguientes { display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); text-align: left; margin-top: 8px; }
.mer .mer-siguiente { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--mer-linea); border-radius: 14px; background: #fff; text-decoration: none; color: var(--mer-tinta); transition: box-shadow .16s ease, border-color .16s ease; }
.mer .mer-siguiente:hover { text-decoration: none; border-color: #BFD3E6; box-shadow: 0 6px 18px rgba(16,24,40,.06); color: var(--mer-tinta); }
.mer .mer-siguiente i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--mer-marca-suave); color: var(--mer-marca); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mer .mer-siguiente b { display: block; font-size: 14px; font-weight: 600; }
.mer .mer-siguiente span { font-size: 12.5px; color: var(--mer-gris); line-height: 1.4; }
/* Lo que todavía no está (facturar sin plataforma de timbrado): se ve, no se pulsa. */
.mer .mer-siguiente--pronto { cursor: default; background: var(--mer-fondo); border-style: dashed; }
.mer .mer-siguiente--pronto:hover { box-shadow: none; border-color: var(--mer-linea); }
.mer .mer-siguiente--pronto i { background: rgba(16,24,40,.06); color: var(--mer-gris); }

/* ---------- Revisa tu correo ---------- */

.mer .mer-correo { text-align: center; padding: 20px 10px; }
.mer .mer-correo .mer-correo-ico { width: 64px; height: 64px; border-radius: 50%; background: rgba(21,112,239,.10); color: var(--mer-azul-osc); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 12px; }
.mer .mer-correo h3 { font-size: 19px; margin: 0 0 8px; }
.mer .mer-correo p { color: var(--mer-tinta-2); font-size: 14px; line-height: 1.55; max-width: 480px; margin: 0 auto 12px; }
.mer .mer-correo .mer-correo-dir { font-weight: 700; color: var(--mer-tinta); word-break: break-all; }

/* ==========================================================================
   Explorar el mercado (comprador)
   ========================================================================== */

.mer .mer-buscador { display: grid; gap: 8px; grid-template-columns: minmax(0,1fr); align-items: center; margin-bottom: 16px; }
.mer .mer-buscador .tda-btn { min-height: 44px; }

.mer .mer-tira-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.mer .mer-tira-cab h3 { margin: 0; font-size: 16px; font-weight: 600; }
.mer .mer-tira-cab span { font-size: 12.5px; color: var(--mer-gris); }
.mer .mer-tira { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; margin-bottom: 14px; scroll-snap-type: x proximity; }
.mer .mer-tira > * { flex: 0 0 260px; scroll-snap-align: start; }

.mer .mer-rejilla { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); }

.mer .mer-tienda { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mer .mer-tienda-cab { display: flex; gap: 12px; align-items: flex-start; }
.mer .mer-tienda-logo {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: var(--mer-marca-suave);
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--mer-marca); font-size: 20px;
}
.mer .mer-tienda-logo img { width: 100%; height: 100%; object-fit: cover; }
.mer .mer-tienda-nombre { font-size: 16px; font-weight: 600; line-height: 1.25; word-break: break-word; }
.mer .mer-tienda-razon { font-size: 12.5px; color: var(--mer-gris); margin-top: 2px; word-break: break-word; }
.mer .mer-tienda-eslogan { font-size: 13.5px; color: var(--mer-tinta-2); line-height: 1.45; }
.mer .mer-tienda-pres { font-size: 13px; color: var(--mer-gris); line-height: 1.5; overflow: hidden; max-height: 4.5em; }
.mer .mer-tienda-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--mer-tinta-2); align-items: center; }
.mer .mer-tienda-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.mer .mer-tienda-cats span { font-size: 11.5px; background: rgba(16,24,40,.05); border-radius: 6px; padding: 3px 8px; color: var(--mer-tinta-2); }
.mer .mer-tienda-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.mer .mer-tienda-acciones form { display: inline; margin: 0; }
.mer .mer-tienda--conectada { border-color: rgba(18,183,106,.35); }

/* ==========================================================================
   Vender a la red (dueno de tienda)
   ========================================================================== */

.mer .mer-interruptor { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--mer-linea); }
.mer .mer-interruptor:last-child { border-bottom: 0; }
.mer .mer-interruptor input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 22px; accent-color: #0E7C86; cursor: pointer; }
.mer .mer-interruptor label { margin: 0; cursor: pointer; font-weight: 400; }
.mer .mer-interruptor .mer-int-nom { display: block; font-size: 15px; font-weight: 600; }
.mer .mer-interruptor .mer-int-des { display: block; font-size: 13px; color: var(--mer-gris); line-height: 1.45; margin-top: 2px; }
.mer .mer-casillas { display: grid; gap: 6px 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.mer .mer-casillas label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 400; margin: 0; padding: 6px 0; cursor: pointer; }
.mer .mer-casillas input { width: 18px; height: 18px; margin: 0; accent-color: #0E7C86; }
/* Un grupo de casillas es un fieldset con su legend (no un label suelto), con la misma pinta que una etiqueta de campo. */
.mer .mer-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mer .mer-fieldset legend { display: block; width: auto; font-size: 13px; font-weight: 600; color: var(--mer-tinta-2); margin: 0 0 6px; padding: 0; border: 0; line-height: 1.4; }
.mer .mer-estado-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }

/* ==========================================================================
   El asistente de ventas (publico, con la cabeza del landing)
   ========================================================================== */

.mer-asis { padding: 96px 0 56px; background: linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 62%); }
/* La cabecera del landing en fondo claro: SOLO en la página del asistente
   (body.mer-asis-pagina, que pone Asistente.cshtml), para no pisar el menú
   de ninguna otra pantalla que cargue esta hoja. */
body.mer-asis-pagina.landing-page .navbar-default { background-color: #fff; border-color: #fff; }
body.mer-asis-pagina.landing-page .navbar-wrapper .navbar { border-bottom: 1px solid #EDF1F6; }
body.mer-asis-pagina.landing-page .navbar-default .nav li a { color: #33475B; }
body.mer-asis-pagina.landing-page .navbar-default .nav li a:hover { color: #0aa2c0; }

.mer .mer-asis-ancho { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.mer .mer-asis-cab { text-align: center; margin-bottom: 20px; }
.mer .mer-asis-cab h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; }
.mer .mer-asis-cab p { font-size: 15px; line-height: 1.6; color: var(--mer-gris); margin: 0 auto; max-width: 560px; }
.mer .mer-asis-red { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--mer-tinta-2); }
.mer .mer-asis-red b { color: var(--mer-marca-osc); }

.mer .mer-asis-caja { background: #fff; border: 1px solid var(--mer-linea); border-radius: 18px; box-shadow: var(--mer-sombra-alta); overflow: hidden; }
.mer .mer-asis-chrome { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.mer .mer-asis-atras { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--mer-linea); background: #fff; color: var(--mer-tinta-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mer .mer-asis-atras[disabled] { opacity: .35; cursor: default; }
.mer .mer-asis-barra { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(16,24,40,.06); overflow: hidden; }
.mer .mer-asis-barra i { display: block; height: 100%; width: 0; background: var(--mer-marca); border-radius: 999px; transition: width .3s ease; }
.mer .mer-asis-cuenta { font-size: 12px; font-weight: 600; color: var(--mer-gris); white-space: nowrap; }

.mer .mer-asis-paso { display: none; padding: 22px 16px 18px; }
.mer .mer-asis-paso.mer-en { display: block; animation: merEntra .25s ease; }
@keyframes merEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mer .mer-asis-pregunta { margin-bottom: 16px; }
.mer .mer-asis-pregunta h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; line-height: 1.2; }
.mer .mer-asis-pregunta p { font-size: 14px; color: var(--mer-tinta-2); line-height: 1.55; margin: 0; }
.mer .mer-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mer-marca); }

.mer .mer-ops { display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); }
.mer .mer-op {
    display: flex; align-items: center; gap: 13px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left;
    background: #fff; border: 1px solid var(--mer-linea); border-radius: 14px; color: var(--mer-tinta); cursor: pointer; position: relative;
    font-family: inherit; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mer .mer-op:hover, .mer .mer-op:focus { border-color: #BFD3E6; box-shadow: 0 2px 5px rgba(16,24,40,.05), 0 12px 26px rgba(16,24,40,.08); transform: translateY(-2px); outline: 0; }
.mer .mer-op.mer-elegida { border-color: var(--mer-marca); box-shadow: 0 0 0 3px var(--mer-marca-suave); }
.mer .mer-op .mer-op-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--mer-marca-suave); color: var(--mer-marca); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.mer .mer-op .mer-op-nom { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.mer .mer-op .mer-op-des { display: block; font-size: 13px; color: var(--mer-gris); line-height: 1.4; margin-top: 2px; }
.mer .mer-op .mer-op-palo { margin-left: auto; color: var(--mer-marca); font-size: 18px; opacity: 0; transition: opacity .16s ease; }
.mer .mer-op.mer-elegida .mer-op-palo { opacity: 1; }

.mer .mer-asis-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mer .mer-asis-saltar { background: none; border: 0; color: var(--mer-gris); font-size: 13px; cursor: pointer; min-height: 44px; padding: 10px 12px; font-family: inherit; }
.mer .mer-asis-saltar:hover { color: var(--mer-tinta-2); text-decoration: underline; }
.mer .mer-asis-seguir {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px;
    border-radius: 999px; border: 0; background: var(--mer-marca); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 14px rgba(14,124,134,.26); font-family: inherit; transition: background .18s ease, transform .14s ease;
}
.mer .mer-asis-seguir:hover { background: var(--mer-marca-osc); transform: translateY(-1px); }
.mer .mer-asis-seguir[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.mer .mer-asis-campos { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); }
.mer .mer-asis-campo label { display: block; font-size: 13px; font-weight: 600; color: var(--mer-tinta-2); margin-bottom: 6px; }
.mer .mer-asis-campo .tda-ayuda { font-size: 12.5px; color: var(--mer-gris); margin-top: 6px; }
.mer .mer-asis-campo.mer-malo .tda-input { border-color: var(--mer-rojo); box-shadow: 0 0 0 3px rgba(240,68,56,.12); }
.mer .mer-asis-acepta { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--mer-tinta-2); line-height: 1.5; }
.mer .mer-asis-acepta input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: #0E7C86; }
.mer .mer-asis-errores { list-style: none; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(240,68,56,.07); border-left: 3px solid var(--mer-rojo); color: #912018; font-size: 13.5px; }
.mer .mer-asis-errores li { padding: 2px 0; }

.mer .mer-asis-espera, .mer .mer-asis-falla { padding: 48px 20px 52px; text-align: center; }
.mer .mer-giro { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(14,124,134,.18); border-top-color: var(--mer-marca); margin: 0 auto 14px; animation: merGira .8s linear infinite; }
@keyframes merGira { to { transform: rotate(360deg); } }
.mer .mer-asis-falla p { color: var(--mer-tinta-2); font-size: 14.5px; max-width: 460px; margin: 0 auto 16px; line-height: 1.55; }

/* El campo trampa: fuera de la pantalla y del tabulador. */
.mer .mer-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ---------- La propuesta ---------- */

.mer .mer-prop { padding: 22px 16px 20px; }
.mer .mer-prop h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; line-height: 1.2; }
.mer .mer-prop-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--mer-gris); margin-bottom: 14px; }
.mer .mer-prop-meta b { color: var(--mer-tinta); font-family: Menlo, Consolas, monospace; }
.mer .mer-prop-plan { border: 1px solid var(--mer-linea); border-radius: 14px; padding: 14px 16px; background: linear-gradient(180deg, rgba(14,124,134,.06), #fff); margin-bottom: 12px; }
.mer .mer-prop-plan .mer-prop-plan-nom { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.mer .mer-prop-plan .mer-prop-precios { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; align-items: baseline; }
.mer .mer-prop-plan .mer-prop-precios b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.mer .mer-prop-plan .mer-prop-precios small { font-size: 12.5px; color: var(--mer-gris); }
.mer .mer-prop-plan .mer-prop-ahorro { font-size: 13px; color: var(--mer-verde-osc); font-weight: 600; margin-top: 4px; }
.mer .mer-prop-plan .mer-prop-porque { font-size: 13.5px; color: var(--mer-tinta-2); line-height: 1.5; margin-top: 8px; }
.mer .mer-prop-prueba { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mer-verde-osc); background: rgba(18,183,106,.12); padding: 4px 10px; border-radius: 999px; margin-top: 8px; }
.mer .mer-prop-lineas { list-style: none; margin: 0 0 12px; padding: 0; }
.mer .mer-prop-linea { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--mer-linea); }
.mer .mer-prop-linea:last-child { border-bottom: 0; }
.mer .mer-prop-linea i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; background: var(--mer-marca-suave); color: var(--mer-marca); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.mer .mer-prop-linea .mer-prop-linea-nom { display: block; font-size: 14.5px; font-weight: 600; }
.mer .mer-prop-linea .mer-prop-linea-porque { display: block; font-size: 13px; color: var(--mer-gris); line-height: 1.5; margin-top: 2px; }
.mer .mer-prop-linea .mer-prop-linea-precio { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mer-verde-osc); white-space: nowrap; }
.mer .mer-prop-mensaje { font-size: 14px; color: var(--mer-tinta-2); line-height: 1.6; margin: 12px 0; }
.mer .mer-prop-avisos { list-style: none; margin: 0 0 14px; padding: 0; }
.mer .mer-prop-avisos li { font-size: 13px; color: var(--mer-tinta-2); padding: 6px 0 6px 22px; position: relative; line-height: 1.5; }
.mer .mer-prop-avisos li:before { content: '\f05a'; font-family: FontAwesome; position: absolute; left: 0; top: 7px; color: var(--mer-gris); }
.mer .mer-prop-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mer .mer-prop-otra { background: none; border: 0; color: var(--mer-gris); font-size: 13px; cursor: pointer; margin-top: 12px; min-height: 44px; padding: 10px 12px; font-family: inherit; text-decoration: underline; }

/* ---------- Los planes ---------- */

.mer .mer-planes { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr); margin-top: 16px; }
.mer .mer-plan { background: #fff; border: 1px solid var(--mer-linea); border-radius: 16px; padding: 18px 16px; box-shadow: var(--mer-sombra); display: flex; flex-direction: column; gap: 8px; }
.mer .mer-plan .mer-plan-nom { font-size: 17px; font-weight: 700; }
.mer .mer-plan .mer-plan-precio b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.mer .mer-plan .mer-plan-precio small { font-size: 12.5px; color: var(--mer-gris); }
.mer .mer-plan .mer-plan-anual { font-size: 13px; color: var(--mer-verde-osc); font-weight: 600; }
.mer .mer-plan .mer-plan-resumen { font-size: 13.5px; color: var(--mer-tinta-2); line-height: 1.5; }
.mer .mer-plan ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; color: var(--mer-tinta-2); }
.mer .mer-plan ul li { padding: 4px 0; display: flex; gap: 8px; align-items: center; }
.mer .mer-plan ul li i { color: var(--mer-verde-osc); font-size: 12px; }
.mer .mer-plan--destacado { border-color: var(--mer-marca); box-shadow: 0 0 0 3px var(--mer-marca-suave), var(--mer-sombra-alta); }
.mer .mer-plan .tda-btn { margin-top: auto; }

.mer .mer-como { display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); }
.mer .mer-como-paso { display: flex; gap: 12px; align-items: flex-start; }
.mer .mer-como-paso i { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px; background: var(--mer-marca-suave); color: var(--mer-marca); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.mer .mer-como-paso b { display: block; font-size: 14.5px; }
.mer .mer-como-paso span { font-size: 13px; color: var(--mer-gris); line-height: 1.45; }

/* ==========================================================================
   Escritorio y tabletas
   ========================================================================== */

@media (min-width: 640px) {
    .mer .mer-numeros { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .mer .mer-prop-botones { flex-direction: row; flex-wrap: wrap; }
    .mer .mer-ops--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mer .mer-asis-campos--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mer .mer-siguientes { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mer .mer-buscador { grid-template-columns: minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) auto; }
    .mer .mer-rejilla { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mer .mer-como { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mer .mer-alta li { grid-template-columns: 22px minmax(0,1fr); align-items: start; }
    .mer .mer-alta .mer-alta-fila { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); }
    .mer .mer-concepto .mer-concepto-campos { grid-template-columns: 150px minmax(0,1fr); }
}

@media (min-width: 768px) {
    .mer.mer-publico .tda-lienzo, .mer.mer-publico .mer-lienzo { padding: 30px 24px 80px; }
    .mer-cabecera .mer-cabecera-in { padding: 12px 24px; }
    .mer-cabecera .mer-cabecera-titulo { display: inline; }
    .mer .mer-cab h1 { font-size: 28px; }
    .mer .mer-progreso li { flex: 1 1 0; }
    .mer .mer-progreso li > a, .mer .mer-progreso li > span { font-size: 12px; padding: 14px 8px 12px; }
    .mer .mer-progreso li i { width: 34px; height: 34px; font-size: 14px; }
    .mer .mer-paso-cab h2 { font-size: 23px; }
    .mer .mer-acciones { position: static; background: transparent; border: 0; box-shadow: none; padding: 18px 0 0; justify-content: flex-end; }
    .mer .mer-acciones .mer-acciones-principal { flex: 0 0 auto; min-width: 240px; }
    .mer .mer-acciones .mer-acciones-nota { display: inline; margin-right: auto; }
    .mer .mer-asis-cab h1 { font-size: 32px; }
    .mer .mer-asis-paso { padding: 28px 28px 24px; }
    .mer .mer-asis-chrome { padding: 18px 28px 0; }
    .mer .mer-prop { padding: 28px 28px 24px; }
    .mer .mer-planes { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .mer .mer-casillas { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .mer .mer-ficha { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1200px) {
    .mer .mer-rejilla { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media print {
    .mer .mer-acciones, .mer-cabecera, .mer-pie, .mer .mer-asis-chrome, .mer .mer-prop-botones, .mer .mer-prop-otra { display: none !important; }
    .mer .mer-asis-caja, .mer .tda-card { box-shadow: none; border: 1px solid #ccc; }
}