/* ============================================================
   Panel movil (M5) — Comunicaciones: avisos (listado por dias, chips de familia, franja de nuevos, hojas de aviso),
   conversaciones de WhatsApp (fichas, filtros, franja de cambios), detalle de una conversacion (widget de LidIA a toda
   la altura util, ficha, pie) y la campana de la cabecera como panel a todo el ancho.
   REGLA DURA: todo dentro del @media (ver 01-carcasa.css).
   Spec: docs/superpowers/specs/2026-10-17-movil-m5-comunicaciones-design.md
   Prueba: scripts/test/e2e/movil/test_comunicaciones_fixture.js (fixture-comunicaciones.html lleva el marcado del
   contrato; si cambia una clase aqui, cambia alli).
   Diana visual: los mockups de M5 (m5-pantallas.html y el bloque «M5» de su estilos.css).
   Reutiliza sin copiar .vzt-hoja* y .vzt-cal-estado* (04-calendario.css). Las hojas de la ola envuelven su contenido
   en .vzt-com-hoja: nada de aqui alcanza a las hojas de M2a-M4.
   Campana (D8, P14): unicas reglas sin el prefijo vzt-com; cuelgan de #kt_menu_notifications.show y pisan con
   !important el estilo en linea que pone Popper al abrirlo (posicion y transform) y las utilidades w-*px del menu.
   Cuidado con la especificidad (leccion de M2b): ningun `.x.x { margin: 0 }`.
   Detalle (preflight B1): mide justo el alto bajo la cabecera general (sin el relleno de 20 px de .app-content) y el
   pie es el ultimo hijo de su columna flex, no sticky: sin desplazar la pagina, el pie acaba en el borde de la
   pantalla y el widget llega hasta el; en «Ficha» se desplaza el cuerpo por dentro.
   Campana (preflight B3): el panel es una columna con alto maximo y lo que se desplaza es la lista, no el panel.
   ============================================================ */

@media (max-width: 991.98px) {
  /* M8 D6: texto secundario con gray-700 de Metronic (AA en ambos temas); sin paleta propia. */
  /* --- Variables: en las raices de pagina y en las hojas de la ola ---------- */
  .vzt-com,
  .vzt-com-det,
  .vzt-com-hoja {
    --vzt-com-fondo: var(--bs-gray-100);
    --vzt-com-borde: var(--bs-border-color);
    --vzt-com-tenue: var(--bs-gray-700);
    --vzt-com-naranja: var(--bs-warning);
    --vzt-com-naranja-texto: var(--warning-text, #b45309);
    --vzt-com-info: var(--bs-info-active, #0369a1);
    --vzt-com-ok: var(--success-text, #15803d);
    --vzt-com-punto: #1d5fd6;
  }

  /* --- Contenedores (a todo el ancho, como .vzt-bo) -------------------------- */
  .vzt-com,
  .vzt-com-det {
    --vzt-cal-sangria: 20px;
    margin: 0 calc(-1 * var(--vzt-cal-sangria));
    background: var(--vzt-com-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-com,
    .vzt-com-det {
      --vzt-cal-sangria: 12px;
    }
  }

  .vzt-com-det {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100dvh - var(--vzt-cab-alto, 56px) - env(safe-area-inset-top, 0px));
  }

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

  /* P29: el detalle tapa la barra inferior (mockups 8 y 9). */
  body:has(.vzt-com-det) .vzt-barra,
  body:has(.vzt-com-det) #kt_app_footer {
    display: none;
  }

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

  /* B1: sin el relleno de arriba de .app-content, el detalle empieza justo bajo la cabecera general. */
  body:has(.vzt-com-det) .app-content:has(.vzt-com-det) {
    padding-top: 0;
    padding-bottom: 0;
  }

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

  /* Pastillas: 22 px como 08 y los tonos que 04 no tiene («Con una persona» azul, «Necesita a alguien» naranja). */
  :is(.vzt-com, .vzt-com-det) .vzt-cal-estado.vzt-cal-estado {
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    line-height: 22px;
  }

  :is(.vzt-com, .vzt-com-det) .vzt-cal-estado.vzt-cal-estado--info {
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--vzt-com-info);
  }

  :is(.vzt-com, .vzt-com-det) .vzt-cal-estado.vzt-cal-estado--naranja {
    background: var(--vzt-com-naranja);
    color: var(--bs-white);
    font-weight: 700;
  }

  .vzt-com-ia {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .vzt-com-ia--on {
    background: rgba(var(--bs-success-rgb), 0.15);
    color: var(--vzt-com-ok);
  }

  /* --- Cabecera, pestañas, buscador y chips (mockups 1 y 7) ------------------ */
  .vzt-com-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 2px 12px 4px 16px;
    background: var(--bs-body-bg);
  }

  .vzt-com-titulo {
    margin: 0;
    font: 800 22px/28px var(--vzt-font-titulo, inherit);
    letter-spacing: -0.01em;
  }

  .vzt-com-filtros {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .vzt-com-filtros__cuenta:not(:empty) {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
  }

  .vzt-com-pestanas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 3px;
    border-radius: 13px;
    background: var(--bs-gray-200);
  }

  .vzt-com > .vzt-com-pestanas {
    margin: 0 12px 8px;
  }

  .vzt-com-pestanas--conversaciones {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  }

  .vzt-com-pestanas--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
  }

  .vzt-com-pestana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-gray-700);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .vzt-com-pestana > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vzt-com-pestana[aria-selected="true"] {
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  }

  .vzt-com-pestana__cuenta {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
  }

  .vzt-com-pestana[aria-selected="false"] .vzt-com-pestana__cuenta {
    background: var(--bs-gray-300);
    color: var(--bs-gray-700);
  }

  /* Buscador fijo: la cabecera general no es fija en movil (--vzt-cli-top por si un dia lo fuera). */
  .vzt-com-buscador {
    position: sticky;
    top: var(--vzt-cli-top, 0px);
    z-index: 5;
    padding: 9px 12px;
    background: var(--bs-body-bg);
  }

  .vzt-com-buscador__icono {
    position: absolute;
    top: 9px;
    left: 26px;
    display: grid;
    place-items: center;
    height: 44px;
    color: var(--bs-gray-700);
    pointer-events: none;
  }

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

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

  .vzt-com-buscador__borrar {
    position: absolute;
    top: 9px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-gray-700);
  }

  .vzt-com-chips {
    display: flex;
    gap: 6px;
    padding: 0 12px 9px;
    overflow-x: auto;
    border-bottom: 1px solid var(--vzt-com-borde);
    background: var(--bs-body-bg);
    scrollbar-width: none;
  }

  .vzt-com-chips::-webkit-scrollbar {
    display: none;
  }

  .vzt-com-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 22px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-800);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .vzt-com-chip[aria-pressed="true"] {
    padding: 0 13px 0 10px;
    border: 2px solid var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    font-weight: 600;
  }

  /* --- Cuerpo del listado --------------------------------------------------- */
  .vzt-com-cuerpo {
    padding: 4px 12px 16px;
  }

  .vzt-com-fila-todos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin: 4px 0 0;
    padding: 0 0 0 4px;
  }

  .vzt-com-fila-todos > span {
    color: var(--vzt-com-tenue);
    font-size: 13px;
    white-space: nowrap;
  }

  .vzt-com-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-right: -4px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--bs-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .vzt-com-franja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    margin: 10px 0 8px;
    border: 0;
    border-radius: 12px;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 14px;
    font-weight: 600;
  }

  .vzt-com-franja > em {
    font-style: normal;
    opacity: 0.6;
  }

  .vzt-com-franja > u {
    font-weight: 700;
    text-decoration: none;
  }

  /* «Actualizando…» (T12/T13): la franja espera su hueco deshabilitada y con aria-busy. Mismo fondo, algo apagada y con
     cursor de espera, para que se note que el toque ya está en marcha. */
  .vzt-com-franja:disabled {
    opacity: 0.75;
    cursor: progress;
  }

  .vzt-com-push {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 10px 0 2px;
    padding: 12px;
    border: 1px solid rgba(var(--bs-info-rgb), 0.35);
    border-radius: 12px;
    background: rgba(var(--bs-info-rgb), 0.07);
  }

  .vzt-com-push__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--bs-info-rgb), 0.14);
    color: var(--vzt-com-info);
  }

  .vzt-com-push > p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--bs-gray-800);
    font-size: 14px;
    line-height: 20px;
  }

  /* Fallo al activar o desactivar el push (ronda T8): en su propia línea, bajo el texto y el interruptor. Vacío no
     ocupa nada (row-gap 0), y sigue en el DOM para que el role=status anuncie el texto cuando llegue. */
  .vzt-com-push--interruptor {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .vzt-com-push__estado {
    flex: 1 0 100%;
    color: var(--bs-danger);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-com-push__estado:not(:empty) {
    margin-top: 8px;
  }

  .vzt-com-interruptor {
    flex: none;
    position: relative;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .vzt-com-interruptor::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 52px;
    height: 26px;
    border-radius: 13px;
    background: var(--bs-gray-400);
  }

  .vzt-com-interruptor[aria-checked="true"]::before {
    background: var(--bs-primary);
  }

  .vzt-com-interruptor::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-white);
    transition: left 0.15s ease;
  }

  .vzt-com-interruptor[aria-checked="true"]::after {
    left: 29px;
  }

  .vzt-com-alerta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--bs-danger-rgb), 0.08);
    color: var(--bs-danger);
    font-size: 14px;
  }

  .vzt-com-alerta--ok {
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--vzt-com-ok);
  }

  .vzt-com-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    font-size: 15px;
    font-weight: 600;
  }

  .vzt-com-boton--ancho {
    width: 100%;
    min-height: 48px;
  }

  .vzt-com-esqueleto__fila {
    height: 76px;
    margin: 0 0 8px;
    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;
  }

  .vzt-com-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px;
    text-align: center;
  }

  .vzt-com-vacio__icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 18px;
    background: rgba(var(--bs-success-rgb), 0.16);
    color: var(--vzt-com-ok);
    font-size: 26px;
  }

  .vzt-com-vacio > b {
    font: 700 18px/24px var(--vzt-font-titulo, inherit);
  }

  .vzt-com-vacio > p {
    margin: 0;
    color: var(--vzt-com-tenue);
    font-size: 15px;
  }

  .vzt-com-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    color: var(--vzt-com-tenue);
    font-size: 14px;
  }

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

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

  /* --- Avisos (mockup 1) ------------------------------------------------------ */
  .vzt-com-grupo__titulo {
    margin: 14px 4px 8px;
    color: var(--bs-primary);
    font: 700 15px/20px var(--vzt-font-titulo, inherit);
  }

  .vzt-com-aviso {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    margin-bottom: 6px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-com-aviso--ocupado {
    opacity: 0.6;
  }

  /* C16 (mockup 2): la ficha cuya hoja está abierta, con el borde oscuro del primario. */
  .vzt-com-aviso--activa {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
  }

  .vzt-com-aviso__abrir {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    min-height: 60px;
    padding: 10px 0 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
  }

  .vzt-com-aviso__icono {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 20px;
  }

  .vzt-com-aviso__cab {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 20px;
  }

  .vzt-com-aviso__titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-com-aviso__punto {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vzt-com-punto);
  }

  .vzt-com-aviso__hora {
    flex: none;
    color: var(--vzt-com-tenue);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .vzt-com-aviso__mensaje {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: var(--bs-gray-700);
    font-size: 13.5px;
    line-height: 19px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .vzt-com-aviso--leido .vzt-com-aviso__titulo {
    font-weight: 500;
    color: var(--bs-gray-700);
  }

  .vzt-com-aviso--leido .vzt-com-aviso__mensaje {
    color: var(--vzt-com-tenue);
  }

  .vzt-com-aviso__mas {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vzt-com-tenue);
    font-size: 18px;
  }

  /* --- Conversaciones (mockup 7) ----------------------------------------------- */
  .vzt-com-conv {
    display: flex;
    gap: 11px;
    margin-bottom: 8px;
    padding: 11px 12px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
  }

  .vzt-com-conv--destacada {
    border-color: rgba(var(--bs-warning-rgb), 0.6);
    background: rgba(var(--bs-warning-rgb), 0.05);
  }

  .vzt-com-conv__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 13px;
    font-weight: 700;
  }

  .vzt-com-conv__avatar--wa {
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--vzt-com-ok);
    font-size: 20px;
  }

  .vzt-com-conv__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .vzt-com-conv__fila1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
  }

  .vzt-com-conv__nombre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-com-conv__hora {
    flex: none;
    color: var(--vzt-com-tenue);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

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

  .vzt-com-conv__canal,
  .vzt-com-conv__mensajes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--vzt-com-tenue);
    font-size: 13px;
    white-space: nowrap;
  }

  .vzt-com-conv__canal > .fa-whatsapp {
    color: var(--vzt-com-ok);
  }

  .vzt-com-conv__resumen {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--bs-gray-800);
    font-size: 13.5px;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-com-conv__fila3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
  }

  /* --- Detalle de conversacion (mockups 8 y 9) ----------------------------------- */
  .vzt-com-det-cab {
    flex: none;
    padding: 4px 16px 10px;
    border-bottom: 1px solid var(--vzt-com-borde);
    background: var(--bs-body-bg);
  }

  .vzt-com-det-cab__fila {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .vzt-com-volver {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-primary);
    font-size: 18px;
  }

  .vzt-com-det-cab__textos {
    min-width: 0;
  }

  .vzt-com-det-cab__nombre {
    margin: 0;
    overflow: hidden;
    font: 800 20px/26px var(--vzt-font-titulo, inherit);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vzt-com-det-cab__sub {
    margin: 0;
    color: var(--vzt-com-tenue);
    font-size: 14px;
  }

  .vzt-com-det-cab__pastillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
  }

  .vzt-com-ventana {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    color: var(--vzt-com-ok);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
  }

  .vzt-com-ventana--cerrada {
    color: var(--vzt-com-tenue);
  }

  .vzt-com-det-cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
  }

  .vzt-com-det-cuerpo > * {
    flex-shrink: 0;
  }

  .vzt-com-det-cuerpo > .vzt-com-franja {
    margin: 0;
  }

  /* Paneles de las pestañas del detalle (T11, ronda 1): los dos siempre montados para que el iframe no se recargue al
     cambiar de pestaña; el inactivo, con el atributo hidden. */
  .vzt-com-det-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .vzt-com-det-panel--conversacion {
    flex: 1 1 auto;
    min-height: 0;
  }

  .vzt-com-det-panel.vzt-com-det-panel[hidden] {
    display: none;
  }

  .vzt-com-widget.vzt-com-widget {
    display: flex;
    flex: 1 1 auto;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-com-widget__marco {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    border: 0;
  }

  .vzt-com-sec {
    padding: 10px 14px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
  }

  .vzt-com-sec__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .vzt-com-sec__titulo {
    margin: 0 0 6px;
    font: 700 15px/20px var(--vzt-font-titulo, inherit);
  }

  .vzt-com-sec__cuenta {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    background: var(--bs-gray-200);
    color: var(--bs-gray-700);
    font-size: 13px;
    line-height: 26px;
    text-align: center;
  }

  .vzt-com-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .vzt-com-etiqueta {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    background: var(--bs-gray-200);
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
  }

  .vzt-com-texto {
    margin: 0;
    color: var(--bs-gray-800);
    font-size: 14px;
    line-height: 20px;
  }

  .vzt-com-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
  }

  .vzt-com-linea > span {
    min-width: 0;
    color: var(--vzt-com-tenue);
  }

  .vzt-com-linea > b {
    flex: none;
    white-space: nowrap;
  }

  .vzt-com-nota {
    display: flex;
    gap: 10px;
    padding: 2px 0;
  }

  .vzt-com-nota + .vzt-com-nota {
    margin-top: 8px;
  }

  .vzt-com-nota__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vzt-com-info);
    color: var(--bs-white);
    font-size: 11px;
    font-weight: 700;
  }

  .vzt-com-nota__cab {
    display: flex;
    gap: 6px;
    align-items: baseline;
  }

  .vzt-com-nota__cab > span {
    color: var(--vzt-com-tenue);
    font-size: 13px;
  }

  .vzt-com-nota p {
    margin: 2px 0 0;
  }

  .vzt-com-agente {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .vzt-com-agente__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--vzt-com-ok);
  }

  .vzt-com-agente__textos {
    flex: 1 1 auto;
    min-width: 0;
  }

  .vzt-com-agente__textos > small,
  .vzt-com-agente__textos > b {
    display: block;
  }

  .vzt-com-agente__textos > small {
    color: var(--vzt-com-tenue);
    font-size: 13px;
  }

  .vzt-com-solo {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 0 4px;
    color: var(--vzt-com-tenue);
    font-size: 13px;
    line-height: 18px;
  }

  /* B1: ultimo hijo de la columna del detalle (no sticky): siempre en el borde de abajo, nunca tapa el widget. */
  .vzt-com-pie {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vzt-com-borde);
    background: var(--bs-body-bg);
  }

  .vzt-com-pie:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .vzt-com-pie__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 10px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-gray-900);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  /* --- Hojas de la ola (mockups 2, 3, 5 y 5b) ------------------------------------ */
  .vzt-com-hoja-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 10px;
    color: var(--vzt-com-tenue);
    font-size: 13.5px;
  }

  .vzt-com-familia {
    flex: none;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--vzt-com-info);
    font-size: 13px;
    font-weight: 600;
  }

  .vzt-com-mensaje {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--vzt-com-fondo);
    color: var(--bs-gray-900);
    font-size: 15px;
    line-height: 22px;
    white-space: pre-line;
  }

  .vzt-com-nota-hoja {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 14px;
    color: var(--vzt-com-tenue);
    font-size: 13px;
    line-height: 18px;
  }

  .vzt-com-nota-hoja > i {
    color: var(--vzt-com-ok);
  }

  .vzt-com-opciones {
    display: flex;
    flex-direction: column;
  }

  .vzt-com-opcion {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--vzt-com-borde);
    background: transparent;
    color: inherit;
    text-align: left;
  }

  .vzt-com-opcion:last-child {
    border-bottom: 0;
  }

  .vzt-com-opcion__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bs-gray-200);
    color: var(--bs-primary);
  }

  .vzt-com-opcion__textos > b,
  .vzt-com-opcion__textos > small {
    display: block;
  }

  .vzt-com-opcion__textos > b {
    font-size: 16px;
  }

  .vzt-com-opcion__textos > small {
    color: var(--vzt-com-tenue);
    font-size: 14px;
  }

  .vzt-com-datos {
    margin: 8px 0 12px;
    padding: 8px 0;
    border-top: 1px solid var(--vzt-com-borde);
    border-bottom: 1px solid var(--vzt-com-borde);
  }

  .vzt-com-datos > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
    min-height: 28px;
    align-items: center;
  }

  .vzt-com-datos dt {
    color: var(--vzt-com-tenue);
    font-weight: 400;
  }

  /* El destino de un aviso que sale del panel se lee entero (no se recorta: es lo que se va a abrir). */
  .vzt-com-datos dd {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .vzt-com-acciones-columna {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vzt-com-acciones-columna > .vzt-hoja__boton {
    width: 100%;
  }

  .vzt-com-enlace-copia {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--vzt-com-borde);
    border-radius: 12px;
    background: var(--vzt-com-fondo);
    font-size: 15px;
    overflow-wrap: anywhere;
    user-select: all;
    -webkit-user-select: all;
  }

  /* --- Campana en el movil (D8, P14; mockup 6) ----------------------------------- */
  /* M6 T13: cae bajo la fila 1 de la cabecera movil a medida (--vzt-cab-alto, 56 px + la muesca), no
     bajo --bs-app-header-height (60 px de Metronic, que ya no es el alto real). */
  #kt_menu_notifications.show {
    position: fixed !important;
    inset: calc(var(--vzt-cab-alto, 56px) + env(safe-area-inset-top, 0px)) 0 auto 0 !important;
    z-index: 1060 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    max-height: calc(100dvh - var(--vzt-cab-alto, 56px) - env(safe-area-inset-top, 0px) - var(--vzt-com-campana-barra) - 8px);
    overflow: hidden;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25), 0 0 0 100vmax rgba(15, 23, 42, 0.45);
  }

  /* Lo que ocupa la barra inferior, solo cuando se ve. Sin barra (no se pinto) o en las paginas que la ocultan
     (06, 07, 08 y el detalle de 09: si otra ola la oculta, se anade aqui) el panel no la descuenta. */
  #kt_menu_notifications.show {
    --vzt-com-campana-barra: calc(var(--vzt-barra-alto, 64px) + env(safe-area-inset-bottom, 0px));
  }

  body:not(:has(.vzt-barra)) #kt_menu_notifications.show,
  body:has(.vzt-asis, .vzt-cli-form, .vzt-bo-det, .vzt-bo-form, .vzt-com-det) #kt_menu_notifications.show {
    --vzt-com-campana-barra: 0px;
  }

  /* Ronda 1: con la campana abierta la pagina no se desplaza (si no, sobre el panel quedaba la pagina atenuada
     al irse la cabecera, que en el movil no es fija). Se libera al cerrarla (Metronic quita .show). */
  html:has(#kt_menu_notifications.show),
  body:has(#kt_menu_notifications.show) {
    overflow: hidden;
  }

  /* B3: cabecera, banner y pie fijos; la lista de la pestana activa ocupa lo que queda y se desplaza. */
  #kt_menu_notifications.show > :not(.tab-content) {
    flex: none;
  }

  #kt_menu_notifications.show > .tab-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  #kt_menu_notifications.show > .tab-content > .tab-pane.active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  #kt_menu_notifications.show > .tab-content > .tab-pane.active > .border-top {
    flex: none;
  }

  #kt_menu_notifications.show > .rounded-top {
    border-radius: 0 !important;
    background-image: none !important;
    background-color: var(--bs-primary);
  }

  #kt_menu_notifications.show .mt-10 {
    margin-top: 12px !important;
  }

  #kt_menu_notifications.show .px-9 {
    padding-right: 12px !important;
    padding-left: 16px !important;
  }

  #kt_menu_notifications.show .iconbtn,
  #kt_menu_notifications.show .btn-sm {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mockup 6: los botones de la cabecera del panel, claros sobre el azul (el «Activar» del banner no cambia). */
  #kt_menu_notifications.show > .rounded-top :is(.iconbtn, .btn-sm) {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.14);
    color: var(--bs-white);
  }

  /* R21: en el movil «Marcar todas» de la campana no se ofrece (no pide confirmacion ni avisa de que los generales se
     marcan para todo el equipo). Se hace desde la vista de avisos, con su hoja (D22). */
  #kt_menu_notifications.show [data-testid="notif-marcar-todas"] {
    display: none;
  }

  /* Mockup 6: las cinco pestanas repartidas a lo ancho y enteras (a 360 caben); si un dia no caben, se desplazan. */
  #kt_menu_notifications.show .nav-line-tabs {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #kt_menu_notifications.show .nav-line-tabs .nav-link {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
  }

  #kt_menu_notifications.show .scroll-y {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 8px 0 !important;
    padding: 0 10px !important;
  }

  #kt_menu_notifications.show [data-testid="notif-item"] {
    min-height: 60px;
  }

  /* Mockup 6: «Ver todas» azul y en negrita (el marcado lleva btn-color-gray-600, que es el de escritorio). */
  #kt_menu_notifications.show .border-top .btn,
  #kt_menu_notifications.show .border-top .btn > i {
    color: var(--bs-primary);
  }

  #kt_menu_notifications.show .border-top .btn {
    font-weight: 700;
    min-height: 44px;
  }
}