/* ============================================================================
   Juicy — Dashboard Design System · UPDATE (aviso de versión nueva)
   ----------------------------------------------------------------------------
   La tarjeta flotante de "hay una versión nueva". La consume el front nuevo
   (juicy-app, `marco/AvisoDeVersion.tsx`) en los DOS mundos: el SaaS —donde se
   recarga— y la instalable —donde se reinicia—.

     <div class="update-card" role="status">
       <div class="update-card__linea">
         <span class="icon-chip icon-chip--sm icon-chip--round tone-secondary">
           <i class="fi fi-rr-refresh"></i>
         </span>
         <p class="update-card__titulo">Hay una versión nueva de Juicy</p>
         <button class="update-card__cerrar" aria-label="Ahora no">
           <i class="fi fi-rr-cross-small"></i>
         </button>
       </div>
       <p class="update-card__texto">Recarga para estrenarla.</p>
       <button class="btn tone-primary w-100">Recargar</button>
     </div>

   POR QUÉ NO ES UN `.toast`. El toast dura tres segundos y se va solo: es el
   canal de "ya está", no el de "te falta hacer algo". Un aviso que se borra
   antes de que el cajero levante la vista del mostrador no avisa de nada.

   POR QUÉ ABAJO A LA IZQUIERDA. La pila de toasts es `bottom: 20px; left: 50%`
   y el carrito del POS ocupa la derecha entera. Ésta es la esquina que no le
   quita el sitio a ninguno de los dos.
   ============================================================================ */

.update-card {
  position: fixed;
  z-index: 9998;                    /* bajo la pila de toasts (9999): un "ya está"
                                       es de ahora, esto puede esperar un segundo */
  bottom: 20px;
  left: 20px;
  width: 296px;
  max-width: calc(100vw - 40px);
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  box-shadow: var(--shadow-lg);
}

.update-card__linea {
  display: flex;
  align-items: center;
  gap: 8px;
}

.update-card__titulo {
  flex: 1;
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.update-card__cerrar {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.update-card__cerrar:hover {
  color: var(--text-primary);
}

.update-card__texto {
  margin: 4px 0 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
}