/* ---- mobile ---- */
@media (max-width: 560px) {
  .wrap { padding: 14px 14px 32px; }
  .topbar { padding: 0 8px 0 14px; padding-top: env(safe-area-inset-top); flex-wrap: wrap; gap: 0 8px; }
  /* Marca, tema, usuario y Salir en un renglón: la marca se recorta antes que partir la barra. */
  .brand { font-size: 15px; min-height: 52px; align-items: center; flex: 1 1 auto; overflow: hidden; }
  .user-chip-link .muted { display: none; }
  .user-chip-link { font-size: 12.5px; padding: 8px; }
  /* En el celular queda un solo boton, el del tema actual; tocarlo pasa al siguiente. */
  .tema { border: 0; margin-right: 0; }
  .tema-btn { width: 44px; height: 44px; }
  .tema-btn:not([aria-pressed="true"]) { display: none; }
  .tema-btn[aria-pressed="true"] { background: transparent; }
  .topbar-nav { order: 3; width: 100%; margin: 0 -14px; padding: 0 6px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, .16); min-height: 44px; }
  /* Las tarjetas ya van separadas tambien en la PC; en el celular el contorno es el
     filete fino con la sombra leve de siempre. */
  .slot-grid .slot {
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  /* Tarjeta de slot: se lee parado y con una mano, asi que nada de lo que se lee
     baja de 14px y los botones miden 48px. Con los tamanos de escritorio la
     info quedaba apretada en un bloque gris de 13px. */
  .slot { padding: 16px; column-gap: 12px; }
  /* En el celular las acciones van en su renglón: el texto usa todo el ancho y la
     fila queda más baja que con los botones al costado. */
  .slot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .slot-actions { grid-column: 1; gap: 8px; margin-top: 14px; }
  .slot-actions .btn-primary { flex: 1; }
  .slot-actions .btn { min-height: 48px; font-size: 16px; }
  .slot-actions .btn-icon { min-width: 48px; }
  /* Menú del admin: siempre de a dos, así los botones quedan parejos a cualquier ancho. */
  .slot-mas-botones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-mas-baja .slot-mas-botones { grid-template-columns: minmax(0, 1fr); }
  .slot-mas-baja .btn { justify-content: center; }
  .slot-cuerpo { gap: 4px; }
  /* UID, placa entre paréntesis y estado general en el primer renglón; si no
     entran, el estado salta en vez de recortar el UID. */
  .slot-head { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .slot-name { flex: 0 0 auto; max-width: 100%; }
  .slot-id { font-size: 13px; }
  .slot-alerta { font-size: 14.5px; }
  .slot-alerta .ico { width: 18px; height: 18px; }
  /* Ficha: máquina y ubicación, un renglón cada una. */
  .slot-ficha { flex-direction: column; gap: 3px; margin-top: 4px; }
  .slot-ficha-linea { flex-shrink: 1; max-width: 100%; font-size: 15px; }
  .slot-ficha-maquina { font-size: 17px; }
  .slot-ficha-linea .ico { width: 17px; height: 17px; }
  .slot-estado { font-size: 14px; }
  /* Telemetría en grilla de dos columnas bajo un filete de borde a borde, como el
     tablero del modal. La alerta de máquina y el desvínculo van a todo el ancho. */
  .slot-telemetry {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
    font-size: 15px; margin: 8px -16px 0; padding: 10px 16px 0; border-top: 1px solid var(--line);
  }
  .slot-dato { gap: 8px; }
  .slot-dato .ico, .slot-desvinc .ico { width: 19px; height: 19px; }
  .slot-dato-maquina, .slot-desvinc { grid-column: 1 / -1; }
  .slot-senal { height: 14px; }
  .slot-senal span { width: 4px; }
  .slot-sync { font-size: 14px; gap: 8px; margin-top: 4px; }
  .slot-sync .ico { width: 19px; height: 19px; }
  /* El buscador se queda con su propio renglón y los tres filtros van de a dos:
     a un tercio del ancho el rótulo "Ubicación: todas" no entra. */
  .filtros-slots select { flex: 1 1 45%; max-width: none; font-size: 13.5px; padding: 9px 8px; }
  /* Los dos botones lado a lado (50% c/u) y mas compactos, en vez de apilados. */
  .toolbar { position: sticky; top: 0; flex-wrap: nowrap; gap: 8px; z-index: 4; }
  /* La franja de entorno es fija: sin esto la toolbar sticky queda tapada. */
  body.is-test-environment .toolbar { top: var(--env-bar-h); }
  .toolbar .btn { flex: 1 1 0; min-width: 0; font-size: 13.5px; padding: 11px 8px; }
  .seg { display: flex; }
  .seg-btn { flex: 1; padding: 8px 6px; }
  .filtros a.btn { margin-left: 0; flex: 1 1 auto; }
  .panel-cols, .perfil-cols { grid-template-columns: 1fr; }
  /* KPIs: el valor grande (ej. "$3.763.470,00") no entra a 22px en 2 columnas;
     escala con el ancho y baja el padding para que nunca desborde la tarjeta. */
  .kpi-grid { padding: 2px 14px; }
  /* En el celular el resumen salta de renglon: sin separadores, que quedarian sueltos. */
  .slot-summary .kpi { padding: 0 16px 0 0; border-left: 0; }
  .slot-summary .kpi-val { font-size: 16px; }
  .slot-summary .kpi-lbl { font-size: 12.5px; }
  .slot-name { font-size: 24px; }
  /* Cabecera del modal con los mismos tamaños que la tarjeta: UID, modelo, ubicación. */
  #modal-title { font-size: 24px; }
  .modal-maquina { font-size: 17px; }
  .modal-ubicacion { font-size: 15px; }
  /* INDETERMINADO ocupa tres renglones a este ancho: desde que se toca Cargar se
     reservan, asi el modal no salta. */
  .modal.carga-activa .tl-op > .modal-status { min-height: 72px; }
  /* Barras: menos ancho fijo de etiqueta/gap para dar aire al monto. */
  .chart { gap: 8px; }
  #btn-cargar { min-width: 104px; }

  /* Auditoría: tabla -> tarjetas apiladas (usa el data-lbl que emite el JS).
     Elimina el scroll horizontal en mobile (la .utable normal fuerza 640px). */
  .table-wrap-cards { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .utable-cards { min-width: 0; }
  .utable-cards thead { display: none; }
  .utable-cards tbody, .utable-cards tr, .utable-cards td { display: block; }
  .utable-cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 14px; margin-bottom: 8px; }
  .utable-cards tbody tr:hover { background: var(--surface); }
  .utable-cards td { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
  .utable-cards tr td:last-child { border-bottom: 0; }
  /* etiqueta a la izquierda; el valor (uno o varios elementos) se agrupa a la derecha */
  .utable-cards td::before { content: attr(data-lbl); flex: 0 0 auto; margin-right: auto; color: var(--muted); font-weight: 500; font-size: 12.5px; text-align: left; }
  /* fila de acciones (Usuarios): sin etiqueta, botones agrupados a la derecha */
  .utable-cards td.c-acc { justify-content: flex-end; align-items: center; gap: 4px; }
  .utable-cards td.c-acc::before { display: none; }
  /* Sin acciones posibles (la propia cuenta, un admin) la fila de acciones se omite. */
  .utable-cards td.c-acc:has(> .muted:only-child) { display: none; }
  .utable-cards td:has(+ td.c-acc > .muted:only-child) { border-bottom: 0; }
  /* Auditoría: resaltar el valor de Fecha/hora y Monto en cada tarjeta (la
     etiqueta ::before mantiene su peso). */
  .utable-cards td[data-lbl="Fecha"], .utable-cards td[data-lbl="Monto"] { font-weight: 600; }
  .utable-cards td[data-lbl="Monto"] { font-size: 16px; font-variant-numeric: tabular-nums; }

  /* Panel SU: una columna; el estado de las maquinas queda debajo del historial. */
  .psu-cols { grid-template-columns: 1fr; }
  #psu-detalle { scroll-margin-top: 112px; }
  .psu-salas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .psu-sala { padding: 8px 9px; }
  .psu-sala-nombre { font-size: 15px; }
  .psu-sala-placas { font-size: 26px; }
  .psu-modal { padding: 14px; }
  .psu-tabla-slots { min-width: 520px; }
}