/* ============================================================
   Panel movil (M3) — Clientes: listado con buscador fijo, hoja de filtros, ficha (cabecera,
   acciones, citas, bonos, comentarios, historial, datos, relacionados, preferencias), hoja
   «Más» y panel de eliminar con historial, ficha fusionada, formulario de alta y edicion
   (una columna, pie fijo) e historial completo por meses.
   REGLA DURA: todo dentro del @media (ver 01-carcasa.css).
   Spec: docs/superpowers/specs/2026-10-16-movil-m3-clientes-design.md §4 y §7
   Prueba: scripts/test/e2e/movil/test_clientes_fixture.js (fixture-clientes.html lleva el
   marcado del contrato; si cambia una clase aqui, cambia alli).
   Diana visual: los mockups aprobados de M3 (m3-pantallas.html). Donde el plan y el mockup
   chocan manda el mockup.

   Las clases las pone Blazor, son estaticas. Reutiliza de 04-calendario.css la hoja (.vzt-hoja*)
   y la pastilla de estado (.vzt-cal-estado*), y de 05-reservas.css los interruptores
   (.vzt-res-interruptor) y el pie de la hoja de filtros (.vzt-res-pie). Las insignias de aqui
   (.vzt-cli-ins) son propias: en 04 y 05 cuelgan de la tarjeta de una cita.
   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.
   Cuidado con la especificidad (leccion de M2b): ningun `.x.x { margin: 0 }`; los campos llenan
   su caja de lado a lado y el fixture lo mide (asimetricos).
   ============================================================ */

@media (max-width: 991.98px) {
  /* --- Contenedores ------------------------------------------------------
     A todo el ancho de la pantalla, con el mismo margen negativo que .vzt-res (compensa el
     relleno lateral de #kt_app_content_container: 20 px, y 12 px por debajo de 576). Fondo gris
     claro (el de la lista): las cabeceras, el buscador y el pie son blancos. Al final de la
     pagina no hace falta relleno: 01-carcasa.css ya reserva el sitio de la barra inferior. */
  .vzt-cli,
  .vzt-cli-det,
  .vzt-cli-form,
  .vzt-cli-hist {
    --vzt-cal-sangria: 20px;
    --vzt-cli-fondo: var(--bs-gray-100);
    /* Alto de la cabecera .vzt-cli-cab (titulo y subtitulo en una linea cada uno): de ella cuelga
       el `top` de los meses del historial. */
    --vzt-cli-cab-alto: 64px;
    margin: 0 calc(-1 * var(--vzt-cal-sangria));
    background: var(--vzt-cli-fondo);
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-cuerpo, inherit);
    font-size: 14px;
    line-height: 20px;
  }

  @media (max-width: 575.98px) {
    .vzt-cli,
    .vzt-cli-det,
    .vzt-cli-form,
    .vzt-cli-hist {
      --vzt-cal-sangria: 12px;
    }
  }

  /* La cabecera general no repite titulo ni miga: el layout pintaria el <h1> vacio y la miga
     «Inicio» en una fila suelta (D19 de M1). */
  body:has(.vzt-cli, .vzt-cli-det, .vzt-cli-form, .vzt-cli-hist) #kt_app_header #kt_app_toolbar {
    display: none;
  }

  /* El formulario tapa la barra inferior (su pie ocupa su sitio), como el asistente de M2b. Al
     final no queda nada bajo el pie pegado: ni el relleno inferior del .app-content ni el pie del
     layout con la version (en el panel real dejaban una franja de 92 px, T14 de M2b). */
  body:has(.vzt-cli-form) .vzt-barra {
    display: none;
  }

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

  body:has(.vzt-cli-form) .app-content:has(.vzt-cli-form) {
    padding-bottom: 0;
  }

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

  :is(.vzt-cli, .vzt-cli-det, .vzt-cli-form, .vzt-cli-hist) :is(a, button, summary):focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
  }

  /* --- Cabecera del listado: titulo, «Filtros» y «Nuevo» ------------------ */
  .vzt-cli-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 4px 12px 4px 16px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-titulo {
    min-width: 0;
    margin: 0;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: -0.01em;
  }

  .vzt-cli-cabecera__acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .vzt-cli-filtros,
  .vzt-cli-nuevo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
  }

  /* «Nuevo» (mockup): el borde en el azul de marca, sin relleno. */
  .vzt-cli-nuevo {
    gap: 5px;
    padding: 0 13px 0 10px;
    border-color: rgba(var(--bs-primary-rgb), 0.3);
  }

  .vzt-cli-filtros i,
  .vzt-cli-nuevo i {
    color: inherit;
    font-size: 15px;
    line-height: 1;
  }

  .vzt-cli-filtros__cuenta {
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bs-primary);
    color: var(--bs-primary-inverse, #fff);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
  }

  .vzt-cli-filtros__cuenta:empty {
    display: none;
  }

  /* --- Buscador (fijo) ----------------------------------------------------
     Se pega al borde de la pantalla al bajar la lista: la cabecera general NO es fija en movil
     (04-calendario.css), asi que va a 0 (--vzt-cli-top por si un dia lo fuera). Fondo opaco, el
     blanco de la cabecera: nada se transparenta al pasar la lista por debajo. Letra de 16 px:
     con menos, iOS amplia la pagina al tocar el campo. */
  .vzt-cli-buscador {
    position: sticky;
    top: var(--vzt-cli-top, 0px);
    z-index: 5;
    padding: 3px 12px 9px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
  }

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

  .vzt-cli-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-cli-buscador__campo:placeholder-shown {
    padding-right: 12px;
  }

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

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

  .vzt-cli-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-cli-buscador:has(.vzt-cli-buscador__campo:focus) .vzt-cli-buscador__icono {
    color: var(--bs-primary);
  }

  .vzt-cli-buscador__borrar {
    position: absolute;
    top: 3px;
    right: 12px;
    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;
  }

  /* Con el campo vacio no hay nada que borrar. */
  .vzt-cli-buscador__campo:placeholder-shown ~ .vzt-cli-buscador__borrar {
    display: none;
  }

  /* --- Resultado, lista, avisos y estados --------------------------------- */
  .vzt-cli-resultado {
    margin: 0;
    padding: 10px 16px 0;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-cli-lista {
    padding: 10px 12px 8px;
  }

  .vzt-cli-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 36px;
    margin: 0;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
  }

  .vzt-cli-estado__giro {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 2px solid var(--bs-gray-300);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: vzt-cli-giro 0.8s linear infinite;
  }

  /* Lo vigila clientes-movil.js: ni caja ni aire, solo un punto de referencia en la lista. */
  .vzt-cli-centinela {
    height: 1px;
  }

  .vzt-cli-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    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;
    text-align: center;
    text-decoration: none;
    appearance: none;
  }

  .vzt-cli-boton:disabled {
    opacity: 0.5;
  }

  .vzt-cli-boton--principal {
    min-height: 48px;
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-primary-inverse, #fff);
  }

  .vzt-cli-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-cli-aviso--error {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
  }

  .vzt-cli-aviso > .vzt-cli-boton {
    margin-top: 8px;
    color: var(--bs-gray-900);
  }

  .vzt-cli-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 28px 0;
    text-align: center;
  }

  .vzt-cli-vacio__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-size: 26px;
  }

  .vzt-cli-vacio > b {
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
  }

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

  .vzt-cli-vacio > .vzt-cli-boton {
    width: auto;
    padding: 0 22px;
  }

  .vzt-cli-esqueleto__fila {
    height: 72px;
    margin: 0 0 6px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-100) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: vzt-cli-brillo 1.4s linear infinite;
  }

  /* --- Ficha de un resultado -----------------------------------------------
     Toda la ficha es un enlace a la ficha del cliente (__abrir) salvo los botones: Llamar y
     WhatsApp, de 44 x 44, solo si hay telefono (si no, el enlace se queda con todo el ancho). */
  .vzt-cli-ficha {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 72px;
    margin: 0 0 6px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-ficha__abrir {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 56px;
    color: inherit;
    text-decoration: none;
  }

  /* Avatar con iniciales: el azul de marca, como el de los mockups. */
  :is(.vzt-cli-ficha__avatar, .vzt-cli-det-cab__avatar, .vzt-cli-rel__avatar, .vzt-cli-duplicado__avatar) {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-primary-inverse, #fff);
    font-family: var(--vzt-font-titulo, inherit);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .vzt-cli-ficha__avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .vzt-cli-ficha__textos {
    display: block;
    min-width: 0;
  }

  .vzt-cli-ficha__nombre {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-ficha__dato {
    display: block;
    overflow: hidden;
    color: var(--bs-gray-600);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-ficha__insignias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 5px;
    min-width: 0;
    margin-top: 4px;
  }

  .vzt-cli-ficha__accion {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
  }

  .vzt-cli-ficha__accion--whatsapp {
    border-color: rgba(var(--bs-success-rgb), 0.5);
    background: rgba(var(--bs-success-rgb), 0.14);
    background: color-mix(in srgb, #25d366 14%, transparent);
    color: var(--success-text, #15803d);
  }

  /* Inactivo: el texto se apaga y el avatar se vuelve gris; los botones siguen vivos. */
  .vzt-cli-ficha--inactivo :is(.vzt-cli-ficha__nombre, .vzt-cli-ficha__dato) {
    opacity: 0.6;
  }

  .vzt-cli-ficha--inactivo .vzt-cli-ficha__avatar {
    background: var(--bs-gray-500);
  }

  /* --- Insignias -----------------------------------------------------------
     Una linea, 18 px de alto, 11 px de letra. «Relacionado de …» se corta con puntos suspensivos
     antes de salirse de la ficha. Inactivo es neutro (mockup), no rojo. */
  .vzt-cli-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;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .vzt-cli-ins--inactivo {
    background: rgba(100, 116, 139, 0.16);
    color: var(--bs-gray-700);
  }

  .vzt-cli-ins--activo {
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--success-text, #15803d);
  }

  .vzt-cli-ins--aviso {
    background: rgba(var(--bs-warning-rgb), 0.18);
    color: var(--warning-text, #b45309);
  }

  .vzt-cli-ins--principal,
  .vzt-cli-ins--relacionado {
    /* D25 de M2a: el 9 % del azul marino sobre blanco se leia gris. El azul del hover (mas
       saturado) al 13 % sobre el fondo, con el texto en el primario. */
    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-cli-ins--relacionado {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Ficha: cabecera ------------------------------------------------------
     Primera fila: «‹ Clientes» y «Más» (44 px). Segunda: avatar y, a su derecha, el nombre (hasta
     dos lineas) con la pastilla de estado y «Cliente desde …». */
  .vzt-cli-det {
    padding: 0 12px 12px;
  }

  .vzt-cli-det-cab {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 0 4px 14px;
  }

  .vzt-cli-det-cab__volver {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 0 0 -4px;
    padding: 0 10px 0 4px;
    color: var(--bs-primary);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
  }

  .vzt-cli-det-cab__volver i {
    font-size: 15px;
  }

  .vzt-cli-det-cab__mas {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 14px 0 16px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    appearance: none;
  }

  .vzt-cli-det-cab__mas i {
    color: inherit;
    font-size: 14px;
  }

  .vzt-cli-det-cab__avatar {
    grid-column: 1;
    grid-row: 2;
    width: 58px;
    height: 58px;
    font-size: 19px;
  }

  .vzt-cli-det-cab__textos {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
  }

  .vzt-cli-det-cab__nombre {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .vzt-cli-det-cab__datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin: 0;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  /* Ficha apagada (fusionada): el avatar se vuelve gris. */
  .vzt-cli-det-cab--apagada .vzt-cli-det-cab__avatar {
    background: var(--bs-gray-500);
  }

  /* Cabecera compacta: aparece cuando la grande sale por arriba (data-compacta en .vzt-cli-det, lo
     pone clientes-movil.js con vigilarCabecera). Por debajo de la barra inferior (1039) y de las
     hojas (1056). */
  .vzt-cli-det-pega {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: none;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    height: 52px;
    padding: env(safe-area-inset-top, 0px) 14px 0 4px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  }

  .vzt-cli-det[data-compacta="true"] .vzt-cli-det-pega {
    display: flex;
  }

  .vzt-cli-det-pega__volver {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--bs-primary);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
  }

  .vzt-cli-det-pega__nombre {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
    overflow: hidden;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Con «Más» del menu abierto (drawer a pantalla completa) la compacta (1030) quedaria encima. */
  body:has(#kt_app_sidebar.drawer-on) .vzt-cli-det .vzt-cli-det-pega {
    display: none;
  }

  /* --- Ficha: acciones ------------------------------------------------------
     Reparten el ancho entre los que haya (sin telefono, solo «Nueva reserva»). Icono encima. */
  .vzt-cli-acciones {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 6px;
  }

  .vzt-cli-acciones__boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 6px 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
  }

  .vzt-cli-acciones__boton i {
    font-size: 19px;
    line-height: 1;
  }

  .vzt-cli-acciones__boton--whatsapp {
    color: var(--success-text, #15803d);
  }

  .vzt-cli-acciones__boton--principal {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-primary-inverse, #fff);
  }

  /* --- Ficha: secciones -------------------------------------------------------
     Una tarjeta por seccion; `--suelta` no es tarjeta: lleva su titulo suelto sobre el fondo y
     cada elemento (cita, bono) es su propia tarjeta. Las secciones no se anidan: sirven igual
     en la ficha, el formulario y el historial. */
  .vzt-cli-sec {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-sec--suelta {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .vzt-cli-sec__cab {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    margin: 0 0 6px;
  }

  .vzt-cli-sec--suelta > .vzt-cli-sec__cab {
    margin: 14px 2px 6px;
  }

  .vzt-cli-sec__titulo {
    min-width: 0;
    margin: 0;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  .vzt-cli-sec__cuenta {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
  }

  /* El enlace del titulo («Ver todas») mide 44 px pero no estira la fila: margenes negativos. */
  .vzt-cli-sec__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    min-height: 44px;
    margin: -12px -6px -12px auto;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
  }

  /* Al pie de la tarjeta («Ver historial completo», «Vincular contacto»): a todo el ancho, con una
     raya encima. */
  .vzt-cli-sec__enlace--pie {
    display: flex;
    width: calc(100% + 28px);
    min-height: 46px;
    margin: 2px -14px -12px;
    padding: 0 14px;
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 12px 12px;
    font-size: 14px;
  }

  .vzt-cli-sec__enlace--pie i {
    font-size: 12px;
  }

  .vzt-cli-sec__nota,
  .vzt-cli-sec__vacio {
    margin: 0 2px 8px;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  /* --- Fecha (recuadro de 48 px) -------------------------------------------- */
  .vzt-cli-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
  }

  .vzt-cli-fecha__mes {
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
  }

  .vzt-cli-fecha__dia {
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 17px;
    font-weight: 800;
    line-height: 20px;
  }

  /* Cita pasada: gris. Orden: verde, con el icono de recibo. */
  .vzt-cli-fecha--pasada {
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
  }

  .vzt-cli-fecha--orden {
    background: rgba(var(--bs-success-rgb), 0.16);
    color: var(--success-text, #15803d);
    font-size: 22px;
  }

  /* Tono info de la pastilla de estado («Confirmada», mockup m3-4): 04-calendario.css no lo tiene y
     no se toca; aqui solo dentro de clientes. */
  :is(.vzt-cli-det, .vzt-cli-hist) .vzt-cal-estado.vzt-cal-estado--info {
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--bs-info-active, #0369a1);
  }

  /* --- Cita (proximas citas de la ficha) -------------------------------------
     `button`, toda la tarjeta se toca: fecha, «servicio» y «hora, profesional», pastilla de estado
     a la derecha. Desactivada (sin permiso para abrirla) no se atenua: solo no se toca. */
  .vzt-cli-cita {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    margin: 0 0 6px;
    padding: 8px 12px;
    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-cli-cita:disabled {
    color: var(--bs-gray-900);
    opacity: 1;
  }

  .vzt-cli-cita__cuerpo {
    display: block;
    min-width: 0;
  }

  .vzt-cli-cita__titulo,
  .vzt-cli-item__titulo {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-cita__detalle,
  .vzt-cli-item__detalle {
    display: block;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dentro de la tarjeta «Historial»: filas planas separadas por una raya, con la fecha en texto. */
  .vzt-cli-cita--lista {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .vzt-cli-cita--lista + .vzt-cli-cita--lista {
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-cli-cita--lista .vzt-cli-cita__titulo {
    font-size: 14px;
    line-height: 19px;
  }

  .vzt-cli-cita__fecha {
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
  }

  /* --- Bono -------------------------------------------------------------------
     Enlace al bono: nombre y caducidad arriba, barra de uso, «Quedan N de M sesiones» y «Usadas N». */
  .vzt-cli-bono {
    display: block;
    box-sizing: border-box;
    min-height: 56px;
    margin: 0 0 6px;
    padding: 12px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    text-decoration: none;
  }

  /* M4 (T15, ronda 1): con caducidad y pago pendiente a la vez (dos pastillas, R19) el nombre no se aplasta: tiene
     160 px de base y crece; si no caben, las pastillas bajan a su fila, juntas a la izquierda, enteras y sin partir. */
  .vzt-cli-bono__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
  }

  .vzt-cli-bono__cab > .vzt-cli-ins {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .vzt-cli-bono__nombre {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .vzt-cli-bono__barra {
    display: block;
    height: 8px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bs-gray-200);
  }

  .vzt-cli-bono__progreso {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--bs-success);
  }

  .vzt-cli-bono__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .vzt-cli-bono__saldo {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
  }

  .vzt-cli-bono__dato {
    flex: 0 0 auto;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  /* --- Dato (Telefono, Email, ...) --------------------------------------------
     Rotulo a la izquierda, valor a la derecha; un valor largo (correo, direccion) se parte. */
  .vzt-cli-dato {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-height: 32px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 20px;
  }

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

  .vzt-cli-dato__valor {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-align: right;
  }

  /* Revision final (8): un dato largo (el correo) apila la fila: rotulo arriba y valor debajo, a la
     izquierda. El valor solo se parte entre trozos (tras «@» y «.», con <wbr>): cada trozo va sin
     cortes por dentro; un trozo demasiado largo ya llega partido en piezas desde la ficha. */
  .vzt-cli-dato--apilado {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }

  .vzt-cli-dato--apilado .vzt-cli-dato__valor {
    overflow-wrap: normal;
    text-align: left;
  }

  .vzt-cli-dato__trozo {
    white-space: nowrap;
  }

  /* --- Plegado («Datos personales», «Más datos») -------------------------------- */
  .vzt-cli-plegado {
    box-sizing: border-box;
    margin: 0 0 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-plegado__resumen {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 14px;
    list-style: none;
    cursor: pointer;
  }

  .vzt-cli-plegado__resumen::-webkit-details-marker {
    display: none;
  }

  .vzt-cli-plegado__resumen::marker {
    content: "";
  }

  .vzt-cli-plegado__textos {
    flex: 1 1 auto;
    min-width: 0;
  }

  .vzt-cli-plegado__titulo {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  .vzt-cli-plegado__sub {
    display: block;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 17px;
  }

  .vzt-cli-plegado__flecha {
    flex: 0 0 auto;
    color: var(--bs-text-muted);
    font-size: 14px;
    transition: transform 0.15s ease-out;
  }

  .vzt-cli-plegado[open] > .vzt-cli-plegado__resumen .vzt-cli-plegado__flecha {
    transform: rotate(180deg);
  }

  .vzt-cli-plegado__cuerpo {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--bs-border-color);
  }

  /* --- Contactos relacionados ---------------------------------------------------- */
  .vzt-cli-rel {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 54px;
  }

  .vzt-cli-rel + .vzt-cli-rel {
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-cli-rel__abrir {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    color: inherit;
    text-decoration: none;
  }

  .vzt-cli-rel__avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .vzt-cli-rel__textos {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
  }

  .vzt-cli-rel__dato {
    display: block;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 17px;
  }

  .vzt-cli-rel__nombre {
    display: block;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-rel__ir {
    flex: 0 0 auto;
    color: var(--bs-primary);
    font-size: 13.5px;
    font-weight: 600;
  }

  .vzt-cli-rel__mas {
    flex: 0 0 auto;
    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;
  }

  /* --- Preferencias (solo lectura en la ficha) --------------------------------- */
  .vzt-cli-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .vzt-cli-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 30px;
    padding: 0 11px 0 9px;
    border-radius: 15px;
    background: var(--bs-gray-200);
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
  }

  .vzt-cli-chip i {
    font-size: 12px;
  }

  .vzt-cli-chip--activo {
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--success-text, #15803d);
  }

  /* --- Comentarios ------------------------------------------------------------------
     Es ComentariosClienteTimeline tal cual (R19), restilizado solo dentro de la ficha para que se
     parezca a m3-5: avatar de iniciales de 30 px, autor y fecha en una fila, texto debajo; arriba, el
     campo de 16 px (iOS) con el boton de enviar de 44 x 44 a su lado (el texto «Añadir» sigue ahi
     para lectores de pantalla, solo se pinta una flecha). Los selectores ganan (0,2,0) a las reglas
     en rem del propio componente (un <style> suyo). Dentro de la ficha los .btn miden 44 px. */
  .vzt-cli-det .btn {
    min-width: 44px;
    min-height: 44px;
  }

  .vzt-cli-det .alert {
    margin: 0 0 12px;
    border-radius: 12px;
  }

  .vzt-cli-det div:has(> textarea.form-control) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    gap: 8px;
  }

  .vzt-cli-det div > textarea.form-control {
    box-sizing: border-box;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-gray-100);
    font-size: 16px;
    line-height: 22px;
    resize: none;
  }

  .vzt-cli-det div:has(> textarea.form-control) > .btn {
    position: relative;
    grid-column: 2;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
  }

  .vzt-cli-det div:has(> textarea.form-control) > .btn::before {
    content: "\2192";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
  }

  .vzt-cli-det .comentarios-reserva-lista {
    gap: 0;
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }

  .vzt-cli-det .comentario-reserva-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
  }

  .vzt-cli-det .comentario-reserva-item + .comentario-reserva-item {
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-cli-det .comentario-reserva-avatar {
    width: 30px;
    height: 30px;
    background: var(--bs-primary);
    color: var(--bs-primary-inverse, #fff);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .vzt-cli-det .comentario-reserva-contenido {
    min-width: 0;
    font-size: 13.5px;
    line-height: 19px;
  }

  .vzt-cli-det .comentario-reserva-contenido time {
    color: var(--bs-text-muted);
    font-size: 13px;
  }

  .vzt-cli-det .comentario-reserva-contenido p {
    margin: 1px 0 0;
    font-size: 13.5px;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  /* --- Ficha fusionada ----------------------------------------------------------------
     Solo lectura: aviso con la salida a la ficha vigente y la seccion Datos. */
  .vzt-cli-fusion {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid rgba(var(--bs-info-rgb), 0.4);
    border-radius: 12px;
    background: rgba(var(--bs-info-rgb), 0.08);
  }

  .vzt-cli-fusion__titulo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--bs-info-active, #0369a1);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  .vzt-cli-fusion__titulo i {
    flex: 0 0 auto;
    margin-top: 2px;
  }

  .vzt-cli-fusion__texto {
    margin: 6px 0 12px 28px;
    color: var(--bs-gray-700);
    font-size: 14px;
    line-height: 20px;
  }

  /* --- Hoja «Más» y panel de eliminar --------------------------------------------------- */
  .vzt-cli-opcion {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--bs-gray-900);
    font: inherit;
    text-align: left;
    text-decoration: none;
    appearance: none;
  }

  .vzt-cli-opcion + .vzt-cli-opcion {
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-cli-opcion__icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-size: 17px;
  }

  .vzt-cli-opcion__textos {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
  }

  .vzt-cli-opcion__titulo {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
  }

  .vzt-cli-opcion__sub {
    display: block;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
  }

  .vzt-cli-opcion--peligro .vzt-cli-opcion__icono {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
  }

  .vzt-cli-opcion--peligro .vzt-cli-opcion__titulo {
    color: var(--bs-danger);
  }

  /* Aviso de la hoja (con icono) y motivo que da la API: el mismo amarillo de aviso. */
  .vzt-cli-alerta,
  .vzt-cli-motivo {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.5);
    border-radius: 12px;
    background: rgba(var(--bs-warning-rgb), 0.12);
    color: var(--bs-gray-900);
    font-size: 14px;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .vzt-cli-alerta {
    display: flex;
    gap: 10px;
  }

  .vzt-cli-alerta i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--warning-text, #b45309);
  }

  .vzt-cli-desglose {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 18px;
    margin: 0 0 12px;
    padding: 11px 0;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 14px;
    line-height: 22px;
  }

  .vzt-cli-desglose > dt {
    margin: 0;
    color: var(--bs-text-muted);
    font-weight: 400;
  }

  .vzt-cli-desglose > dd {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  /* --- Cabecera de formulario e historial ------------------------------------------------
     Pegada arriba, blanca: «‹» de 44 px, titulo de una linea y subtitulo (el cliente). */
  .vzt-cli-cab {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    box-sizing: border-box;
    min-height: var(--vzt-cli-cab-alto);
    padding: 6px 12px 6px 4px;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
  }

  .vzt-cli-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-primary);
    font-size: 17px;
    line-height: 1;
    appearance: none;
  }

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

  .vzt-cli-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-cli-cab__sub {
    display: block;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Formulario ----------------------------------------------------------------------------
     Una columna. El contenedor ocupa al menos la pantalla y el pie, pegado (sticky) al fondo,
     queda abajo del todo aunque el contenido sea corto; sin altura fija, asi un error de varias
     lineas lo agranda sin tapar nada. */
  .vzt-cli-form {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100dvh - 60px);
  }

  .vzt-cli-form-cuerpo {
    flex: 1 1 auto;
    padding: 12px 12px 16px;
  }

  .vzt-cli-campo {
    display: block;
    margin: 0 0 10px;
  }

  .vzt-cli-campo__rotulo {
    display: block;
    margin: 0 2px 4px;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-cli-campo__entrada {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    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: 16px;
    line-height: 22px;
    text-align: left;
    appearance: none;
  }

  select.vzt-cli-campo__entrada {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
  }

  .vzt-cli-campo__entrada::placeholder {
    color: var(--bs-gray-500);
    opacity: 1;
  }

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

  .vzt-cli-campo__entrada[aria-invalid="true"] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.1);
  }

  .vzt-cli-campo__error {
    display: block;
    margin: 4px 2px 0;
    color: var(--bs-danger);
    font-size: 13px;
    line-height: 18px;
  }

  /* Una columna en el telefono; dos (nombre y apellidos, codigo postal y ciudad) en una tableta. */
  .vzt-cli-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 10px;
  }

  @media (min-width: 600px) {
    .vzt-cli-rejilla {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Aviso de duplicado: tarjeta amarilla con las fichas parecidas y «Ver esta ficha» (44 px). */
  .vzt-cli-duplicado {
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.5);
    border-radius: 12px;
    background: rgba(var(--bs-warning-rgb), 0.1);
  }

  .vzt-cli-duplicado__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--warning-text, #b45309);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .vzt-cli-duplicado__ficha {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 64px;
    margin: 0 0 8px;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-duplicado__avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .vzt-cli-duplicado__textos {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
  }

  .vzt-cli-duplicado__nombre {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-duplicado__dato {
    display: block;
    overflow: hidden;
    color: var(--bs-text-muted);
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-cli-duplicado__ver {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    margin: 0 0 10px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
  }

  .vzt-cli-duplicado > .vzt-cli-campo:last-child {
    margin-bottom: 0;
  }

  /* Pie: pegado al fondo (sticky, en el flujo: nunca tapa el final del cuerpo), blanco, con el
     error de guardado encima del boton de 48 px a todo el ancho. */
  .vzt-cli-form-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);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.05);
  }

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

  .vzt-cli-form-pie__error {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
  }

  .vzt-cli-form-pie__error:empty {
    display: none;
  }

  .vzt-cli-form-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: var(--bs-primary-inverse, #fff);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    appearance: none;
  }

  .vzt-cli-form-pie__boton:disabled {
    opacity: 0.5;
  }

  /* --- Historial completo -----------------------------------------------------------------------
     Un grupo por mes con su titulo pegado bajo la cabecera (fondo opaco, el de la pagina). Citas y
     ordenes son tarjetas que se despliegan (aria-expanded); la orden lleva sus pagos. */
  .vzt-cli-mes {
    padding: 0 12px;
  }

  .vzt-cli-mes__cab {
    position: sticky;
    top: var(--vzt-cli-cab-alto);
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -12px;
    padding: 10px 16px 6px;
    background: var(--vzt-cli-fondo);
  }

  .vzt-cli-mes__titulo {
    min-width: 0;
    margin: 0;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

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

  .vzt-cli-item {
    margin: 0 0 6px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-cli-item--abierto,
  .vzt-cli-item:has(> .vzt-cli-item__abrir[aria-expanded="true"]) {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.12);
  }

  .vzt-cli-item__abrir {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--bs-gray-900);
    font: inherit;
    text-align: left;
    appearance: none;
  }

  .vzt-cli-item__textos {
    display: block;
    min-width: 0;
  }

  .vzt-cli-item__lado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .vzt-cli-item__importe {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }

  .vzt-cli-item__flecha {
    flex: 0 0 auto;
    color: var(--bs-text-muted);
    font-size: 14px;
    transition: transform 0.15s ease-out;
  }

  .vzt-cli-item__abrir[aria-expanded="true"] .vzt-cli-item__flecha {
    transform: rotate(180deg);
  }

  .vzt-cli-item__cuerpo {
    margin: 0 12px;
    padding: 4px 0 8px;
    border-top: 1px solid var(--bs-border-color);
  }

  .vzt-cli-item__rotulo {
    margin: 0;
    padding-top: 8px;
    color: var(--bs-text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
  }

  .vzt-cli-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    font-size: 14px;
    line-height: 20px;
  }

  .vzt-cli-linea__texto {
    min-width: 0;
    color: var(--bs-text-muted);
    overflow-wrap: anywhere;
  }

  .vzt-cli-linea__dato {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* Un pago anulado se ve tachado y apagado: sigue en la lista, pero no suma. */
  .vzt-cli-linea--anulada :is(.vzt-cli-linea__texto, .vzt-cli-linea__dato) {
    color: var(--bs-text-muted);
    text-decoration: line-through;
  }

  .vzt-cli-linea--total {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px solid var(--bs-border-color);
  }

  /* --- Animaciones ------------------------------------------------------------------------------ */
  @keyframes vzt-cli-giro {
    to { transform: rotate(360deg); }
  }

  @keyframes vzt-cli-brillo {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .vzt-cli *,
    .vzt-cli-det *,
    .vzt-cli-form *,
    .vzt-cli-hist * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}