/* ==========================================================================
   29 · Media pantalla: el panel al lado de VectorPOS
   (7 de octubre de 2026, por Juan)
   ==========================================================================
   En la caja el panel vive en media pantalla, con VectorPOS en la otra mitad:
   una ventana de 640 a 1000 px de ancho, pero con RATÓN y con el alto entero
   del monitor. Las reglas de pantalla angosta se escribieron para el celular,
   donde el alto es lo que falta, y por eso escondían cosas —las pestañas detrás
   de una flecha, las fichas de la alarma, «En vivo», el estado del chat, el
   rótulo de «Tomar»—. En el computador no hay por qué esconderlas: se dejan a
   la vista y, si no caben en un renglón, bajan al siguiente.

   Todo va con `(hover: hover) and (pointer: fine)`: el celular y la tableta
   —dedo— siguen exactamente como estaban. Va al final de la cascada para
   ganarle a cada regla de pantalla angosta sin tocar su archivo.
   ========================================================================== */

/* --- Las pestañas, todas a la vista ----------------------------------------
   Es la regla del computador ancho (03-estructura.css) bajada a cualquier
   ancho: sin flechas, y lo que no quepa baja a una segunda fila. Detrás de la
   flecha quedaban Puntos y Domicilios, y nadie sabía que estaban ahí. */
@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nav__marco, .nav__marco[data-desborda="true"] { max-width: none; padding-inline: .5rem; }
  .nav__marco::before, .nav__marco::after, .nav__mas { display: none; }
  .nav__i { max-width: none; padding: 0; overflow: visible; flex-wrap: wrap;
            justify-content: center; gap: 0 .1rem; }
}
@media (min-width: 721px) and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tab { gap: .4em; padding-inline: .7rem; font-size: .88rem; }
  .tab .ico { font-size: 1.05rem; }
}
/* Las siete de la caja caben en un renglón hasta los 740 px. */
@media (min-width: 721px) and (max-width: 880px) and (hover: hover) and (pointer: fine) {
  .tab { gap: .3em; padding-inline: .45rem; font-size: .84rem; }
}

/* --- La barra de arriba ----------------------------------------------------
   Entre 721 y 900 px la marca escrita se partía en dos renglones y empujaba el
   nombre de quien entró a otros dos. Se va el nombre escrito —el logo al lado
   dice lo mismo, como ya pasa en el celular— y lo demás se queda entero. */
@media (min-width: 721px) and (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .barra__marca { display: none; }
  .quien__n { white-space: nowrap; }
}
/* Con ratón y desde 600 px sí cabe quién entró: en una caja compartida es lo
   que dice con qué cuenta se está trabajando, y en el menú de ajustes no lo ve
   nadie. */
@media (min-width: 600px) and (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .quien { display: block; }
  .quien__n { font-size: .84rem; white-space: nowrap; }
}

/* --- La alarma: las demás cosas que esperan --------------------------------
   En el celular se escondían para no comerse media pantalla; acá hay alto de
   sobra y cada ficha es un atajo a lo suyo. */
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .alarma__otros { display: flex; padding: 0 .9rem .65rem; }
}

/* --- Pedidos ---------------------------------------------------------------- */
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .pdx__cab .tbl-vivo { display: inline-flex; }
  .ped__no span, .ped__ed span { display: inline; }
}

/* --- WhatsApp --------------------------------------------------------------
   Con la lista y el chat lado a lado, la lista cede: el chat es donde se
   escribe. Y la cabecera del chat no esconde nada —ni «Kenji contesta» ni el
   rótulo de los botones—: si no cabe en un renglón, baja al siguiente. */
@media (min-width: 721px) and (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  .wag { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); gap: 10px; }
}

/* La lista, cuando queda angosta, no aplasta los avisos rojo y ámbar en cinco
   renglones: el botón baja debajo del texto. Se mide la COLUMNA y no la
   ventana, porque el ancho de la lista depende de las dos cosas. */
.wag__col { container-type: inline-size; }
@container (max-width: 330px) {
  .waurg__b { flex-wrap: wrap; row-gap: .5rem; }
  .waurg__t { flex: 1 1 10rem; }
  .waurg__ir { margin-left: calc(38px + .75rem); }
}
/* --- La cabecera del chat, ordenada en dos renglones -----------------------
   (8 de octubre de 2026, por Denisse). Con el chat angosto los botones se
   cortaban contra el borde, y después —cuando se les dejó encogerse— se comían
   el nombre del cliente. Se mide la COLUMNA del chat, no la ventana: el ancho
   depende también de la lista de al lado. Cuando no cabe en un renglón:
     arriba   ← · cliente (nombre y teléfono) · quién lo atiende
     debajo   el pedido · los botones · los tres puntos al final
   Con ratón no se esconde ningún rótulo; en el celular siguen solo los iconos
   (15-whatsapp.css), que es lo que cabe con el dedo. */
.wag__hilo { container-type: inline-size; }
.wah__quien { min-width: 7rem; }
@container (max-width: 820px) {
  .wah { flex-wrap: wrap; row-gap: .55rem; }
  .wah__quien { flex: 1 1 8rem; }
  .wah__acciones { order: 9; flex: 1 1 100%; flex-wrap: wrap; row-gap: .4rem; min-width: 0;
                   padding-top: .55rem; border-top: 1px solid var(--linea-sutil); }
  .wah__acciones .wamenu { margin-left: auto; }
}
/* --- …y con ratón, ese segundo renglón se DESPLIEGA al pasar por el perfil -
   (8 de octubre de 2026, por Denisse). Fijo, se comía el alto del chat en
   media pantalla. Ahora la cabecera es un renglón —el cliente y quién lo
   atiende— y al pasar el ratón por ella baja el panel de opciones POR ENCIMA
   del hilo, sin empujar los mensajes. Se queda abierto mientras el ratón esté
   en la cabecera o en el panel, con el foco del teclado adentro, o con el menú
   de los tres puntos abierto. El cheurón al lado del nombre dice que hay más.
   En el celular —sin ratón— sigue fijo, porque ahí no hay «pasar por encima». */
@media (hover: hover) and (pointer: fine) {
  @container (max-width: 820px) {
    .wah__quien strong::after {
      content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 0 .18em .45em;
      border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3);
      transform: rotate(45deg); transition: transform var(--d-rapido) var(--ease);
    }
    .wah:hover .wah__quien strong::after, .wah:focus-within .wah__quien strong::after {
      transform: translateY(.15em) rotate(-135deg);
    }
    .wah__acciones {
      position: absolute; left: 0; right: 0; top: 100%; z-index: 6;
      padding: .6rem .8rem .7rem .9rem; border-top: 1px solid var(--linea-sutil);
      background: var(--surface); box-shadow: 0 14px 28px rgba(22, 16, 13, .14);
      border-radius: 0 0 16px 16px;
      opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
      transition: opacity .16s var(--ease) .12s, transform .16s var(--ease) .12s, visibility 0s linear .28s;
    }
    .wah:hover .wah__acciones, .wah:focus-within .wah__acciones,
    .wah:has(.wamenu__lista:not([hidden])) .wah__acciones {
      opacity: 1; visibility: visible; transform: none; pointer-events: auto;
      transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s;
    }
  }
}
@media (hover: hover) and (pointer: fine) {
  .wah__estado { display: inline-flex; }
  .wah__acciones .btn span { display: inline; }
  .wah__acciones .btn { padding: .45rem .75rem; }
}
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .wab__canal small { display: inline; }
}