/* ============================================================
   Panel movil (M2b) — Asistente de nueva reserva y edicion en 4 pasos
   (cliente, servicios y profesional, dia y hora, revisar), sus hojas
   (profesional, nuevo cliente) y el aviso tras guardar.
   REGLA DURA: todo dentro del @media (ver 01-carcasa.css).
   Spec: docs/superpowers/specs/2026-10-15-movil-m2b-reserva-crear-editar-design.md §4 y §7
   Prueba: scripts/test/e2e/movil/test_asistente_fixture.js (fixture-asistente.html
   lleva el marcado del contrato; si cambia una clase aqui, cambia alli).
   Diana visual: los mockups aprobados de M2b (m2b-pantallas.html).

   Las clases las pone Blazor, son estaticas. Reutiliza de 04-calendario.css la hoja
   (.vzt-hoja*). Letra y objetivos tactiles en px: la raiz de Metronic en movil no son 16 px.
   Los campos van a 16 px: con menos, iOS amplia la pagina al tocarlos.
   ============================================================ */

@media (max-width: 991.98px) {
  /* --- Contenedor ---------------------------------------------------------
     A todo el ancho, con el mismo margen negativo que .vzt-res (compensa el relleno lateral de
     #kt_app_content_container). El pie es fijo: el contenedor le deja su alto. */
  .vzt-asis {
    --vzt-cal-sangria: 20px;
    --vzt-res-protrusion: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 calc(-1 * var(--vzt-cal-sangria));
    min-height: calc(100dvh - 60px);
    box-sizing: border-box;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-cuerpo, inherit);
    font-size: 14px;
    line-height: 20px;
  }

  @media (max-width: 575.98px) {
    .vzt-asis {
      --vzt-cal-sangria: 12px;
    }
  }

  /* El asistente tapa la barra inferior y la fila de titulo de la cabecera general (D19 de M1).
     01-carcasa.css reservaba sitio para la barra: ya no hace falta. */
  body:has(.vzt-asis) .vzt-barra {
    display: none;
  }

  body:has(.vzt-asis) #kt_app_main {
    padding-bottom: 0;
  }

  body:has(.vzt-asis) #kt_app_header #kt_app_toolbar {
    display: none;
  }

  /* Al final de la pagina no queda nada bajo el pie pegado: ni el relleno inferior de los dos
     .app-content (el del layout y el de ReservaCrear/ReservaEditar, 20 px cada uno) ni el pie del
     layout con la version (52 px). En el panel real dejaban una franja de 92 px (T14). */
  body:has(.vzt-asis) .app-content:has(.vzt-asis) {
    padding-bottom: 0;
  }

  body:has(.vzt-asis) #kt_app_footer {
    display: none;
  }

  /* --- Cabecera y progreso ------------------------------------------------ */
  .vzt-asis-cab {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 4px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 6px 12px 6px 4px;
    background: var(--bs-body-bg);
  }

  .vzt-asis-cab__volver {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--bs-gray-900);
    font-size: 17px;
    line-height: 1;
    appearance: none;
  }

  .vzt-asis-cab__textos {
    min-width: 0;
  }

  .vzt-asis-cab__titulo {
    margin: 0;
    overflow: hidden;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-cab__paso {
    display: block;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 16px;
  }

  .vzt-asis-cab__extra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    appearance: none;
  }

  .vzt-asis-progreso {
    position: sticky;
    top: 56px;
    z-index: 5;
    height: 4px;
    overflow: hidden;
    background: var(--bs-gray-200);
  }

  .vzt-asis-progreso__barra {
    height: 100%;
    background: var(--bs-primary);
    transition: width 0.2s ease-out;
  }

  /* --- Cuerpo ------------------------------------------------------------- */
  .vzt-asis-cuerpo {
    flex: 1 0 auto;
    min-width: 0;
    padding: 12px 12px 0;
  }

  .vzt-asis-ayuda {
    margin: 8px 4px 12px;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-asis-seccion {
    margin: 14px 4px 8px;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
  }

  .vzt-asis-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 72px;
    color: var(--bs-text-muted);
    font-size: 14px;
  }

  .vzt-asis-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 16px;
    text-align: center;
  }

  .vzt-asis-vacio__icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-size: 24px;
    line-height: 1;
  }

  .vzt-asis-vacio__icono i {
    color: inherit;
    font-size: 24px;
  }

  .vzt-asis-vacio > :is(h2, h3, b, strong) {
    margin: 0;
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }

  .vzt-asis-vacio > p {
    margin: 6px 0 16px;
    color: var(--bs-text-muted);
    font-size: 14px;
    line-height: 20px;
  }

  /* --- Avisos ------------------------------------------------------------- */
  .vzt-asis-aviso {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--bs-warning-rgb), 0.12);
    color: var(--warning-text, var(--bs-gray-900));
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-asis-aviso--error {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
  }

  .vzt-asis-aviso--crm {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
  }

  .vzt-asis-aviso__accion {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    appearance: none;
  }

  /* --- Paso 1: cliente ---------------------------------------------------- */
  .vzt-asis-buscador {
    position: relative;
    margin: 0 0 4px;
  }

  .vzt-asis-buscador__icono {
    position: absolute;
    top: 0;
    left: 12px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 44px;
    color: var(--bs-text-muted);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
  }

  .vzt-asis-buscador__campo {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 44px 0 38px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 16px;
    line-height: 20px;
    outline: none;
    appearance: none;
  }

  .vzt-asis-buscador__campo:placeholder-shown {
    padding-right: 12px;
  }

  .vzt-asis-buscador__campo::placeholder {
    color: var(--bs-text-muted);
    opacity: 1;
  }

  .vzt-asis-buscador__campo::-webkit-search-cancel-button,
  .vzt-asis-buscador__campo::-webkit-search-decoration {
    appearance: none;
  }

  .vzt-asis-buscador__campo:focus {
    border-color: var(--bs-primary);
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
  }

  .vzt-asis-buscador__borrar {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--bs-text-muted);
    font-size: 16px;
    line-height: 1;
    appearance: none;
  }

  .vzt-asis-buscador__campo:placeholder-shown ~ .vzt-asis-buscador__borrar {
    display: none;
  }

  .vzt-asis-ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 2px;
    box-sizing: border-box;
    width: 100%;
    min-height: 60px;
    margin: 0 0 8px;
    padding: 8px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    text-align: left;
    appearance: none;
  }

  .vzt-asis-ficha:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
  }

  .vzt-asis-ficha__nombre {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-ficha__dato {
    min-width: 0;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-ficha__insignias {
    display: flex;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
  }

  .vzt-asis-ins.vzt-asis-ins {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    max-width: 100%;
    height: 18px;
    padding: 0 6px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-family: var(--vzt-font-cuerpo, inherit);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
  }

  .vzt-asis-ins.vzt-asis-ins--otro-centro {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--warning-text, #b45309);
  }

  .vzt-asis-ins.vzt-asis-ins--relacionado {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(var(--bs-primary-rgb), 0.09);
    background: color-mix(in srgb, var(--primary-hover, var(--bs-primary)) 13%, var(--bs-body-bg));
    color: var(--bs-primary);
  }

  .vzt-asis-nuevo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 4px 0 0;
    padding: 0 14px;
    border: 1px dashed var(--bs-primary);
    border-radius: 12px;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    appearance: none;
  }

  /* --- Paso 2: profesional y servicios ----------------------------------- */
  .vzt-asis-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0 0 10px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    appearance: none;
  }

  .vzt-asis-fila__rotulo {
    flex: 0 0 auto;
    color: var(--bs-text-muted);
  }

  .vzt-asis-fila__valor {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-servicio {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0 0 6px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    cursor: pointer;
  }

  .vzt-asis-servicio:has(.vzt-asis-servicio__casilla:checked) {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
  }

  .vzt-asis-servicio__casilla {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--bs-primary);
  }

  .vzt-asis-servicio__nombre {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-servicio__datos {
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* --- Pie fijo: resumen, boton principal y motivo ---------------------- */
  /* Pegado al fondo de la pantalla con sticky, dentro del flujo: no depende de una altura fija
     y nunca tapa el final del cuerpo, venga el motivo en una o en varias lineas. */
  .vzt-asis-pie {
    position: sticky;
    bottom: 0;
    z-index: 1035;
    box-sizing: border-box;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
  }

  /* Con el teclado abierto el pie pegado al fondo taparia el campo con foco (P20): se suelta. */
  .vzt-asis[data-teclado="abierto"] .vzt-asis-pie {
    position: static;
  }

  /* Resumen a la izquierda y un dato (cliente, «con Irene Soto») a la derecha, como el mockup. */
  .vzt-asis-resumen {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .vzt-asis-resumen__dato {
    min-width: 0;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-pie__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--bs-primary);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    appearance: none;
  }

  .vzt-asis-pie__boton:disabled {
    opacity: 0.5;
  }

  .vzt-asis-pie__motivo {
    margin: 4px 0 0;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
  }

  /* --- Paso 3: dia y hora ------------------------------------------------- */
  .vzt-asis-tira {
    display: flex;
    gap: 8px;
    margin: 0 -12px;
    padding: 4px 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .vzt-asis-tira::-webkit-scrollbar {
    display: none;
  }

  .vzt-asis-dia {
    display: flex;
    flex: 0 0 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 52px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    scroll-snap-align: center;
    appearance: none;
  }

  .vzt-asis-dia__semana {
    color: var(--bs-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  .vzt-asis-dia__numero {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
  }

  .vzt-asis-dia--hoy .vzt-asis-dia__numero {
    color: var(--bs-primary);
  }

  .vzt-asis-dia[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
  }

  .vzt-asis-dia[aria-pressed="true"] :is(.vzt-asis-dia__semana, .vzt-asis-dia__numero) {
    color: #fff;
  }

  .vzt-asis-mes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 4px 6px;
  }

  .vzt-asis-mes__titulo {
    margin: 0;
    color: var(--bs-gray-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
  }

  /* «Elegir fecha»: el selector nativo va encima, transparente, para que tocar el enlace lo abra. */
  .vzt-asis-fecha-enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    color: var(--bs-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  }

  /* Foco de teclado: el campo nativo es transparente y esta encima, asi que el anillo va en el enlace. */
  .vzt-asis-fecha-enlace:focus-within {
    border-radius: 10px;
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
  }

  .vzt-asis-fecha-enlace__campo {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }

  .vzt-asis-nuevo--solido {
    border-style: solid;
    border-color: var(--bs-border-color);
  }

  .vzt-asis-franja {
    margin: 14px 4px 8px;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
  }

  .vzt-asis-huecos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
  }

  .vzt-asis-huecos--con-profesional {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .vzt-asis-hueco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px 6px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    appearance: none;
  }

  .vzt-asis-hueco__hora {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
  }

  .vzt-asis-hueco__profesional {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-size: 11px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-asis-hueco[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
  }

  .vzt-asis-hueco[aria-pressed="true"] .vzt-asis-hueco__profesional {
    color: inherit;
  }

  .vzt-asis-otra {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 0;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  /* --- Paso 4: revisar ---------------------------------------------------- */
  .vzt-asis-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    line-height: 20px;
    text-align: left;
  }

  button.vzt-asis-tarjeta {
    min-height: 56px;
    appearance: none;
  }

  .vzt-asis-tarjeta > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .vzt-asis-tarjeta > :is(.vzt-asis-tarjeta__titulo, .vzt-asis-tarjeta__valor, .vzt-asis-tarjeta__dato) {
    grid-column: 1;
  }

  .vzt-asis-tarjeta__titulo {
    color: var(--bs-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  .vzt-asis-tarjeta__valor {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-asis-tarjeta__dato {
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-asis-tarjeta__cambiar {
    grid-column: 2;
    grid-row: 1 / span 3;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
  }

  /* Una linea por servicio: nombre a la izquierda, «30 min, 20 €» a la derecha. */
  .vzt-asis-tarjeta > .vzt-asis-tarjeta__linea {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .vzt-asis-tarjeta__linea-nombre {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-asis-tarjeta__linea-dato {
    flex: 0 0 auto;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  /* Precio y descuento: rotulo como el resto de tarjetas; la unidad (€, %) va dentro del campo. */
  .vzt-asis-tarjeta .vzt-asis-rejilla > label {
    color: var(--bs-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  .vzt-asis-unidad {
    position: relative;
    display: block;
  }

  .vzt-asis-unidad > .vzt-asis-campo.vzt-asis-campo {
    padding-right: 32px;
  }

  .vzt-asis-unidad::after {
    content: attr(data-unidad);
    position: absolute;
    top: 0;
    right: 12px;
    display: flex;
    align-items: center;
    height: 44px;
    color: var(--bs-text-muted);
    font-size: 16px;
    pointer-events: none;
  }

  .vzt-asis-tarjeta > .vzt-asis-ayuda,
  .vzt-asis-mas label > .vzt-asis-ayuda {
    margin: 4px 0 0;
  }

  .vzt-asis-ayuda--error {
    color: var(--bs-danger);
  }

  /* Titulos en h2 (Importe, Sala, Comentarios): como los de las tarjetas-boton. */
  h2.vzt-asis-tarjeta__titulo {
    margin: 0 0 4px;
    font-weight: 400;
  }

  /* Rotulo encima de cada campo de la tarjeta (sala por servicio, comentario) y de «Más opciones». */
  label.vzt-asis-tarjeta,
  .vzt-asis-tarjeta > label:not(.vzt-asis-interruptor),
  .vzt-asis-mas > label:not(.vzt-asis-interruptor) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: var(--bs-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  /* align-items: la tarjeta-boton centra en vertical (rejilla); en la etiqueta-tarjeta (columna)
     eso centraba el titulo «Comentario» en horizontal (T14). */
  label.vzt-asis-tarjeta {
    align-items: stretch;
    margin-bottom: 10px;
  }

  .vzt-asis-tarjeta > label:not(.vzt-asis-interruptor) + label {
    margin-top: 10px;
  }

  .vzt-asis-mas > label:not(.vzt-asis-interruptor) {
    margin: 0 14px 10px;
  }

  .vzt-asis-campo.vzt-asis-campo,
  select.vzt-asis-campo,
  input.vzt-asis-campo:is([type="number"], [type="date"], [type="time"], [type="tel"], [type="email"], [type="text"]) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 16px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
  }

  textarea.vzt-asis-campo.vzt-asis-campo {
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    resize: vertical;
  }

  .vzt-asis-campo:focus {
    border-color: var(--bs-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
  }

  .vzt-asis-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .vzt-asis-rejilla > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--bs-text-muted);
    font-size: 12px;
    line-height: 16px;
  }

  .vzt-asis-interruptor {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    color: var(--bs-gray-900);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
  }

  .vzt-asis-interruptor > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--bs-primary);
  }

  .vzt-asis-mas {
    margin: 0 0 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-asis-mas > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .vzt-asis-mas > summary::-webkit-details-marker {
    display: none;
  }

  .vzt-asis-mas > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--bs-text-muted);
    border-bottom: 2px solid var(--bs-text-muted);
    transform: rotate(45deg);
  }

  .vzt-asis-mas[open] > summary::after {
    transform: rotate(225deg);
  }

  /* El contenido de «Más opciones» deja 14 px a cada lado dentro de la tarjeta. */
  .vzt-asis-mas > :not(summary) {
    margin: 0 14px 10px;
  }

  /* Gana a .vzt-asis-campo.vzt-asis-campo (margin: 0, width: 100%). */
  .vzt-asis-mas > .vzt-asis-campo.vzt-asis-campo {
    width: calc(100% - 28px);
    margin: 0 14px 10px;
  }

  .vzt-asis-mas > :last-child,
  .vzt-asis-mas > .vzt-asis-campo.vzt-asis-campo:last-child {
    margin-bottom: 14px;
  }

  [data-testid="rev-precio-final"] {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
  }

  .vzt-asis-error {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-asis-error__accion {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    appearance: none;
  }

  /* --- Hojas: profesional y nuevo cliente --------------------------------- */
  .vzt-asis-opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: none;
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    appearance: none;
  }

  /* Campos de las hojas (nuevo cliente): uno bajo otro, con aire. */
  .vzt-hoja .vzt-asis-campo.vzt-asis-campo {
    margin-bottom: 10px;
  }

  .vzt-asis-duplicado {
    box-sizing: border-box;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.4);
    border-radius: 12px;
    background: rgba(var(--bs-warning-rgb), 0.12);
    color: var(--warning-text, var(--bs-gray-900));
    font-size: 14px;
    line-height: 20px;
  }

  .vzt-asis-duplicado button,
  .vzt-asis-duplicado__accion {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
  }

  /* --- Aviso tras guardar --------------------------------------------------
     Flota sobre la barra inferior (1039 < 1040) sin tapar la cabecera: los 15 px son lo que el
     «+» sobresale de la barra (--vzt-res-protrusion, medido en M2a). */
  /* La region (role=status) es fija y de alto 0 cuando esta vacia; no bloquea toques fuera del
     aviso. */
  .vzt-asis-toast-region {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--vzt-barra-alto) + 15px + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    pointer-events: none;
  }

  .vzt-asis-toast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: 4px;
    box-sizing: border-box;
    padding: 4px 4px 4px 14px;
    border-radius: 12px;
    background: var(--bs-gray-900);
    color: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    pointer-events: auto;
  }

  .vzt-asis-toast__texto {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-asis-toast__cerrar {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    appearance: none;
  }

  .vzt-asis-toast__accion {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 10px 6px 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  [data-bs-theme="dark"] .vzt-asis-toast {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-gray-100);
    color: var(--bs-gray-900);
  }

  [data-bs-theme="dark"] .vzt-asis-toast__accion {
    border-color: var(--bs-border-color);
  }

  @media (prefers-reduced-motion: reduce) {
    .vzt-asis *,
    .vzt-asis-toast-region,
    .vzt-asis-toast-region * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}