/* ============================================================
   Panel movil (M7a) — Tickets: listado (resumen, chips de estado, buscador, fichas, «Nuevo ticket»), modo seleccion y
   cierre de varios (hoja de confirmar, avance y resultados), detalle (cabecera, descripcion, conversacion con notas
   internas y adjuntos, pie segun quien eres) y las hojas «Responder» y «Cambiar estado».
   REGLA DURA: todo dentro del @media (ver 01-carcasa.css). Prefijo vzt-tk en todos los selectores; NUNCA vzt-tk-sel
   (es la seleccion de ESCRITORIO, en css/tickets-seleccion.css).
   Spec: docs/superpowers/specs/2026-10-18-movil-m7a-tickets-design.md
   Prueba: scripts/test/e2e/movil/test_tickets_fixture.js (fixture-tickets.html lleva el marcado del contrato; si cambia
   una clase aqui, cambia alli).
   Diana visual: los mockups de M7a (m7a-pantallas.html y su estilos.css). Dos defectos del mockup que aqui NO estan: la
   cabecera de las hojas no desborda (titulo con min-width 0 y salto de linea) y el buscador mide 44 px, no 42.
   Reutiliza sin copiar .vzt-hoja* (04), la animacion vzt-cli-giro (07) y HojaConfirmarMovil. Las hojas de la ola envuelven su contenido en .vzt-tk-hoja.
   Cuidado con la especificidad (leccion de M2b): ningun `.x.x { margin: 0 }`.
   ============================================================ */

@media (max-width: 991.98px) {
  /* --- Variables ------------------------------------------------------------ */
  .vzt-tk,
  .vzt-tk-det,
  .vzt-tk-hoja {
    --vzt-tk-fondo: var(--bs-gray-100);
    --vzt-tk-borde: var(--bs-border-color);
    --vzt-tk-tenue: var(--bs-gray-700);   /* gray-600 se queda en 3,8:1 sobre blanco; 700 pasa de 4,5:1 */
    --vzt-tk-ok: var(--success-text, #15803d);
    --vzt-tk-war: #92400e;
    --vzt-tk-dan: var(--bs-danger-active, #b91c1c);
    --vzt-tk-info: var(--bs-info-active, #0369a1);
    --vzt-tk-pie-abajo: calc(var(--vzt-barra-alto, 64px) + env(safe-area-inset-bottom, 0px));
  }

  /* --- Contenedores (a todo el ancho, como .vzt-com) -------------------------- */
  .vzt-tk,
  .vzt-tk-det {
    --vzt-cal-sangria: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100dvh - var(--vzt-cab-alto, 56px) - env(safe-area-inset-top, 0px));
    margin: 0 calc(-1 * var(--vzt-cal-sangria));
    background: var(--vzt-tk-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-tk,
    .vzt-tk-det {
      --vzt-cal-sangria: 12px;
    }
  }

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

  /* Al final del documento solo queda el hueco de la barra: el pie de Metronic y su relleno
     extra alejarian el pie sticky de Tickets de la barra, aunque el contenedor llene la pantalla. */
  body:has(.vzt-tk, .vzt-tk-det) #kt_app_main {
    padding-bottom: calc(var(--vzt-barra-alto, 64px) + env(safe-area-inset-bottom, 0px));
  }

  body:has(.vzt-tk, .vzt-tk-det) .app-content:has(.vzt-tk, .vzt-tk-det) {
    padding-bottom: 0;
  }

  body:has(.vzt-tk, .vzt-tk-det) #kt_app_footer {
    display: none;
  }

  :is(.vzt-tk, .vzt-tk-det, .vzt-tk-hoja) :is(a, button, input, textarea, label):focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
  }

  /* --- Cabecera del listado (mockup m7a-1) ----------------------------------- */
  .vzt-tk-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    padding: 4px 12px 0 16px;
    background: var(--bs-body-bg);
  }

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

  .vzt-tk-enlace {
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
  }

  .vzt-tk-enlace:disabled {
    opacity: 0.5;
  }

  .vzt-tk-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: baseline;
    padding: 4px 16px 8px;
    background: var(--bs-body-bg);
    color: var(--vzt-tk-tenue);
    font-size: 13px;
  }

  .vzt-tk-resumen__dato b {
    margin-right: 3px;
    color: var(--bs-gray-900);
    font-size: 20px;
    font-weight: 700;
  }

  /* Chips de estado: uno a la vez, en dos filas a 390 px (mockup m7a-1). */
  .vzt-tk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 0 12px 8px;
    background: var(--bs-body-bg);
  }

  .vzt-tk-chip {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 24px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-800);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
  }

  .vzt-tk-chip[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-weight: 700;
  }

  /* Buscador fijo al desplazar; 44 px (no los 42 del mockup) y letra de 16 px (sin zoom en iOS). */
  .vzt-tk-buscador {
    position: sticky;
    top: var(--vzt-cli-top, 0px);
    z-index: 5;
    padding: 0 12px 10px;
    background: var(--bs-body-bg);
  }

  .vzt-tk-buscador__icono {
    position: absolute;
    top: 14px;
    left: 25px;
    color: var(--vzt-tk-tenue);
    font-size: 15px;
    pointer-events: none;
  }

  .vzt-tk-buscador__campo {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 44px 0 40px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 12px;
    background: var(--vzt-tk-fondo);
    color: var(--bs-gray-900);
    font-size: 16px;
    appearance: none;
  }

  .vzt-tk-buscador__borrar {
    position: absolute;
    top: 0;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--vzt-tk-tenue);
  }

  /* Modo seleccion (mockup m7a-2): la busqueda y los chips se apartan y salen estas herramientas. */
  .vzt-tk-herramientas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    padding: 0 10px 4px;
    background: var(--bs-body-bg);
  }

  .vzt-tk-ayuda {
    margin: 0;
    padding: 0 14px 8px;
    background: var(--bs-body-bg);
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    line-height: 18px;
  }

  /* --- Cuerpo y fichas ------------------------------------------------------- */
  .vzt-tk-cuerpo {
    flex: 1 1 auto;
    padding: 9px 12px 12px;
  }

  .vzt-tk-cargados {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 3px 6px;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
  }

  .vzt-tk-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .vzt-tk-ficha {
    display: flex;
    align-items: stretch;
    min-height: 100px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
    /* La vuelta del detalle enfoca la ficha: que no quede bajo la cabecera ni bajo el pie y la barra. */
    scroll-margin-top: calc(var(--vzt-cab-alto, 56px) + 12px);
    scroll-margin-bottom: calc(var(--vzt-tk-pie-abajo) + 96px);
  }

  .vzt-tk-ficha--marcada {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
  }

  .vzt-tk-ficha__cuerpo {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--bs-gray-900);
    font: inherit;
    text-align: left;
    text-decoration: none;
    scroll-margin-top: calc(var(--vzt-cab-alto, 56px) + 12px);
    scroll-margin-bottom: calc(var(--vzt-tk-pie-abajo) + 96px);
  }

  .vzt-tk-ficha--seleccion .vzt-tk-ficha__cuerpo {
    padding-left: 2px;
  }

  .vzt-tk-ficha__fila,
  .vzt-tk-ficha__meta {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .vzt-tk-ficha__fila {
    justify-content: space-between;
  }

  .vzt-tk-ficha__numero {
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }

  .vzt-tk-ficha__asunto {
    display: block;
    margin: 4px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .vzt-tk-ficha--seleccion .vzt-tk-ficha__asunto {
    font-size: 13px;
  }

  /* El Cerrado conserva sus datos y su contraste, sin reservar la altura de una ficha marcable. */
  .vzt-tk-ficha--cerrada {
    min-height: 87px;
  }

  .vzt-tk-ficha--cerrada .vzt-tk-ficha__cuerpo {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .vzt-tk-ficha--cerrada .vzt-tk-ficha__asunto {
    margin: 0;
    line-height: 18px;
  }

  .vzt-tk-ficha__asignado,
  .vzt-tk-ficha__fecha {
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    line-height: 18px;
  }

  .vzt-tk-ficha__fecha {
    display: block;
    margin-top: 4px;
  }

  .vzt-tk-ficha--cerrada .vzt-tk-ficha__fecha {
    margin-top: 0;
  }

  /* Casilla de 44 px separada del cuerpo; la caja visible, de 21 px. */
  .vzt-tk-casilla {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    margin: 0;
    cursor: pointer;
  }

  .vzt-tk-casilla--vacia {
    cursor: default;
  }

  .vzt-tk-casilla__control {
    position: relative;
    width: 21px;
    height: 21px;
    margin: 0;
    border: 1.5px solid var(--bs-gray-500);
    border-radius: 5px;
    background: var(--bs-body-bg);
    appearance: none;
  }

  .vzt-tk-casilla__control:checked {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
  }

  .vzt-tk-casilla__control:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--bs-primary-inverse, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .vzt-tk-casilla__control:disabled {
    opacity: 0.5;
  }

  /* --- Pastillas (tonos de EstadoBadgeMap) --------------------------------- */
  .vzt-tk-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
  }

  .vzt-tk-pastilla--prioridad {
    border-radius: 5px;
    padding: 0 6px;
  }

  .vzt-tk-pastilla--info {
    background: rgba(var(--bs-info-rgb), 0.08);
    color: var(--vzt-tk-info);
  }

  .vzt-tk-pastilla--warning {
    background: rgba(var(--bs-warning-rgb), 0.14);
    color: var(--vzt-tk-war);
  }

  .vzt-tk-pastilla--success {
    background: rgba(var(--bs-success-rgb), 0.12);   /* con 0,16 el verde de texto se queda en 4,47:1 */
    color: var(--vzt-tk-ok);
  }

  .vzt-tk-pastilla--neutral {
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
  }

  .vzt-tk-pastilla--danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--vzt-tk-dan);
  }

  /* --- Estados de lectura ---------------------------------------------------- */
  .vzt-tk-esqueleto {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .vzt-tk-esqueleto__fila {
    height: 100px;
    border-radius: 12px;
    background: var(--bs-gray-200);
  }

  .vzt-tk-alerta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(var(--bs-danger-rgb), 0.08);
    color: var(--vzt-tk-dan);
    font-size: 13px;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .vzt-tk-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 16px;
    color: var(--vzt-tk-tenue);
    text-align: center;
  }

  .vzt-tk-vacio__icono {
    font-size: 28px;
  }

  .vzt-tk-vacio b {
    color: var(--bs-gray-900);
    overflow-wrap: anywhere;
  }

  .vzt-tk-estado {
    margin: 12px 0 0;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    text-align: center;
  }

  .vzt-tk-centinela {
    height: 1px;
  }

  /* --- Botones --------------------------------------------------------------- */
  .vzt-tk-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 11px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
  }

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

  .vzt-tk-boton--suave {
    padding: 0 9px;
    border-color: var(--bs-gray-300);
    background: var(--bs-gray-100);
    font-size: 13px;
  }

  .vzt-tk-boton--ancho {
    width: 100%;
  }

  .vzt-tk-boton:disabled {
    opacity: 0.55;
  }

  /* --- Pie fijo sobre la barra inferior (mockups m7a-1, m7a-2 y m7a-6) -------- */
  .vzt-tk-pie {
    position: sticky;
    bottom: var(--vzt-tk-pie-abajo);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 9px 12px 12px;
    border-top: 1px solid var(--vzt-tk-borde);
    background: var(--bs-body-bg);
  }

  .vzt-tk-pie > .vzt-tk-boton {
    flex: 1 1 0;
    min-width: 0;
  }

  .vzt-tk-pie--seleccion > .vzt-tk-boton {
    flex: 0 0 142px;
  }

  .vzt-tk-pie__cuantos {
    flex: 1 1 auto;
    font-size: 14px;
    white-space: nowrap;
  }

  /* --- Detalle (mockups m7a-6 y m7a-6b) -------------------------------------- */
  .vzt-tk-det-cuerpo {
    flex: 1 1 auto;
    padding: 0 12px 12px;
  }

  .vzt-tk-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
  }

  .vzt-tk-det-numero {
    margin: 0 2px 3px;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
  }

  .vzt-tk-det-titulo {
    margin: 0 2px 8px;
    color: var(--bs-gray-900);
    font-family: var(--vzt-font-titulo, inherit);
    font-size: 21px;
    font-weight: 800;
    line-height: 27px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .vzt-tk-det-insignias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }

  .vzt-tk-det-categoria {
    color: var(--vzt-tk-tenue);
    font-size: 12px;
  }

  .vzt-tk-tarjeta {
    margin-bottom: 9px;
    padding: 11px 12px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-tk-tarjeta__titulo,
  .vzt-tk-det-seccion {
    margin: 0 0 6px;
    color: var(--bs-gray-900);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .vzt-tk-det-seccion {
    margin: 11px 3px 7px;
  }

  .vzt-tk-texto {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .vzt-tk-tarjeta__titulo + .vzt-tk-texto {
    margin-top: 0;
  }

  .vzt-tk-texto--tenue {
    color: var(--vzt-tk-tenue);
  }

  .vzt-tk-conversacion {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .vzt-tk-mensaje {
    padding: 9px 0;
    border-bottom: 1px solid var(--vzt-tk-borde);
  }

  .vzt-tk-mensaje:first-child {
    padding-top: 0;
  }

  .vzt-tk-conversacion .vzt-tk-mensaje:not(.vzt-tk-mensaje--nota) {
    padding-top: 0;
  }

  .vzt-tk-mensaje:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .vzt-tk-mensaje--nota {
    margin-top: 8px;
    padding: 9px 10px;
    border-bottom: 0;
    border-left: 3px solid var(--bs-warning);
    border-radius: 7px;
    background: rgba(var(--bs-warning-rgb), 0.08);
  }

  .vzt-tk-mensaje--nota .vzt-tk-pastilla {
    margin-bottom: 6px;
  }

  .vzt-tk-mensaje__autor {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }

  .vzt-tk-mensaje__autor b {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .vzt-tk-mensaje__autor small {
    margin-left: auto;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    white-space: nowrap;
  }

  .vzt-tk-adjuntos {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
  }

  .vzt-tk-adjunto {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
  }

  .vzt-tk-adjunto__nombre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-tk-adjunto small {
    flex: 0 0 auto;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
  }

  .vzt-tk-pie--detalle {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .vzt-tk-pie--detalle > .vzt-tk-boton {
    padding: 0 9px;
    font-size: 13px;
  }

  /* --- Hojas de la ola -------------------------------------------------------- */
  /* Mientras se cierran varios no hay cruz (mockup m7a-4); el velo no cierra (lo para TicketsMovil). */
  .vzt-hoja:has(.vzt-tk-hoja--cerrando) .vzt-hoja__cerrar {
    display: none;
  }

  .vzt-tk-hoja {
    font-size: 14px;
    line-height: 21px;
  }

  .vzt-tk-hoja__sub {
    margin: 0 0 8px;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .vzt-tk-hoja__texto {
    margin: 4px 0 12px;
    color: var(--bs-gray-700);
    font-size: 14px;
    line-height: 21px;
  }

  .vzt-tk-hoja__nota {
    margin: 6px 0 10px;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    line-height: 18px;
  }

  .vzt-tk-hoja__error {
    margin: 0 0 8px;
    color: var(--vzt-tk-dan);
    font-size: 13px;
  }

  .vzt-tk-nota-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 11px;
    background: var(--vzt-tk-fondo);
    color: var(--bs-gray-700);
    font-size: 13px;
    line-height: 20px;
  }

  .vzt-tk-nota-info i {
    margin-top: 3px;
    color: var(--bs-primary);
  }

  .vzt-tk-giro {
    display: block;
    width: 34px;
    height: 34px;
    margin: 8px auto 18px;
    border: 3px solid var(--bs-gray-200);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: vzt-cli-giro 0.9s linear infinite;   /* la animacion de 07-clientes.css, sin copiarla */
  }

  @media (prefers-reduced-motion: reduce) {
    .vzt-tk-giro {
      animation: none;
    }
  }

  .vzt-tk-avance {
    height: 6px;
    margin: 0 0 16px;
    border-radius: 4px;
    background: var(--bs-gray-200);
    overflow: hidden;
  }

  .vzt-tk-avance__barra {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: var(--bs-primary);
  }

  .vzt-tk-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .vzt-tk-paso {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--bs-gray-700);
    font-size: 13px;
  }

  .vzt-tk-paso .vzt-tk-pastilla {
    margin-left: auto;
  }

  .vzt-tk-paso--vuelo {
    color: var(--bs-gray-900);
    font-weight: 600;
  }

  .vzt-tk-titular {
    margin: 4px 0 12px;
    color: var(--bs-gray-900);
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
  }

  .vzt-tk-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    font-size: 14px;
  }

  .vzt-tk-linea--ok i {
    color: var(--vzt-tk-ok);
  }

  .vzt-tk-resultados {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }

  .vzt-tk-resultado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid var(--vzt-tk-borde);
  }

  .vzt-tk-resultado__enlace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-height: 44px;
    color: var(--bs-primary);
    text-decoration: none;
  }

  .vzt-tk-resultado__numero {
    font-size: 13px;
    font-weight: 600;
  }

  .vzt-tk-resultado__enlace i {
    font-size: 10px;
  }

  .vzt-tk-resultado__asunto {
    flex: 1 0 100%;
    font-size: 13px;
    line-height: 19px;
    overflow-wrap: anywhere;
  }

  .vzt-tk-resultado__motivo {
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    line-height: 18px;
  }

  .vzt-tk-acciones-una {
    margin-top: 12px;
  }

  .vzt-tk-campo__etiqueta {
    display: block;
    margin: 4px 0 6px;
    font-size: 14px;
    font-weight: 600;
  }

  .vzt-tk-campo__texto {
    box-sizing: border-box;
    width: 100%;
    min-height: 126px;
    padding: 11px;
    border: 1px solid var(--bs-gray-500);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font-size: 16px;
    line-height: 22px;
    resize: vertical;
  }

  /* «Añadir adjuntos»: el input de archivo, invisible, cubre la etiqueta (un toque abre el selector del sistema). */
  .vzt-tk-adjuntar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 9px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 11px;
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .vzt-tk-adjuntar__control {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .vzt-tk-archivos {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
  }

  .vzt-tk-archivo {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    margin-top: 6px;
    padding: 0 0 0 10px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 10px;
    font-size: 12px;
  }

  .vzt-tk-archivo__nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-tk-archivo__quitar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--vzt-tk-tenue);
  }

  .vzt-tk-nota {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    margin: 8px 0 12px;
    padding-top: 8px;
    border-top: 1px solid var(--vzt-tk-borde);
    cursor: pointer;
  }

  .vzt-tk-nota__control {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0 11px;
  }

  .vzt-tk-nota b {
    display: block;
    font-size: 14px;
  }

  .vzt-tk-nota small {
    display: block;
    color: var(--vzt-tk-tenue);
    font-size: 12px;
    line-height: 18px;
  }

  .vzt-tk-estados {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
  }

  .vzt-tk-estados .vzt-tk-estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0 12px;
    border: 1px solid var(--vzt-tk-borde);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
  }

  .vzt-tk-estados .vzt-tk-estado:disabled {
    opacity: 0.55;
  }
}