.mensajes-wrapper { display:flex; flex-direction:column; gap:1rem; }
.mensajes-header h1 { margin:0; font-size:1.4rem; }
.controles { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.control-grupo { display:flex; flex-direction:column; font-size:.85rem; }
.control-grupo select, .control-grupo label { min-width:180px; }
#info-filtros { font-size:.85rem; color:#555; }

#tabla-container { width:100%; overflow-x:auto; }
.tabla-mensajes { width:100%; border-collapse:collapse; font-size:.85rem; }
.tabla-mensajes th, .tabla-mensajes td { padding:.45rem .55rem; border-bottom:1px solid #e2e2e2; vertical-align:top; }
.tabla-mensajes tr.fila-enviado { background:#eefaf0; }
.tabla-mensajes tr.fila-cancelado { background:#fdeaea; }
.tabla-mensajes tr.fila-rebotado { background:#fff6e0; }
.celda-atrasada { background:#fff3cd; }
/* Botones de acciones en una sola línea en vista grande */
@media (min-width: 801px) {
  .tabla-mensajes td.acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .tabla-mensajes td.acciones .btn-accion {
    display: inline-flex;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* Que los 3 botones ocupen todo el ancho del contenedor acciones */
.mensajes-wrapper .acciones {
  display: flex;
  width: 100%;
  gap: 6px;
}

.mensajes-wrapper .acciones .btn-accion {
  flex: 1 1 0;
  width: 100%;          /* asegura que cada uno se estire */
  text-align: center;
}

/* Opcional: que en la celda de la tabla no se comprima */
.tabla-mensajes td.acciones {
  min-width: 180px;
  padding: 4px;
}

/* Ajuste visual cuando están disabled */
.mensajes-wrapper .acciones .btn-accion:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* === Barra de selección y botones masivos === */
.seleccion-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:.4rem 0 .6rem; background:#f8fafc; padding:.5rem .75rem; border:1px solid #e2e8f0; border-radius:6px; }
.seleccion-botones { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.seleccion-contador { font-size:.75rem; font-weight:600; color:#334155; background:#e2e8f0; padding:.3rem .55rem; border-radius:999px; }
.acciones-multiples { display:flex; gap:.5rem; align-items:center; }

.btn-sel-base { font-size:.65rem; letter-spacing:.5px; font-weight:600; text-transform:uppercase; border:1px solid #64748b; background:#fff; color:#334155; padding:.45rem .7rem; border-radius:4px; cursor:pointer; line-height:1; display:inline-flex; gap:.35rem; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:.18s background,.18s color,.18s border-color,.18s box-shadow; }
.btn-sel-base:hover:not(:disabled) { background:#f1f5f9; }
.btn-sel-base:active:not(:disabled) { background:#e2e8f0; }
.btn-sel-base:disabled { opacity:.45; cursor:not-allowed; }

/* Botones específicos */
.btn-select-all { border-color:#2563eb; color:#1e3a8a; }
.btn-select-all:hover:not(:disabled){ background:#dbeafe; }
.btn-deselect-all { border-color:#dc2626; color:#991b1b; }
.btn-deselect-all:hover:not(:disabled){ background:#fee2e2; }

.btn-bulk-re { border-color:#9333ea; color:#6b21a8; }
.btn-bulk-re.activo { background:#f3e8ff; box-shadow:0 0 0 2px #f3e8ff inset; }
.btn-bulk-re:hover:not(:disabled){ background:#ede9fe; }

.btn-bulk-serv { border-color:#059669; color:#065f46; }
.btn-bulk-serv.activo { background:#d1fae5; box-shadow:0 0 0 2px #d1fae5 inset; }
.btn-bulk-serv:hover:not(:disabled){ background:#ccfbf1; }

/* Modo dark ajustes */
.dark .seleccion-toolbar { background:#1e293b; border-color:#334155; }
.dark .seleccion-contador { background:#334155; color:#e2e8f0; }
.dark .btn-sel-base { background:#1e293b; color:#e2e8f0; border-color:#475569; }
.dark .btn-sel-base:hover:not(:disabled){ background:#334155; }
.dark .btn-select-all:hover:not(:disabled){ background:#1d4ed8; color:#fff; }
.dark .btn-deselect-all:hover:not(:disabled){ background:#b91c1c; color:#fff; }
.dark .btn-bulk-re.activo { background:#5b21b6; color:#fff; }
.dark .btn-bulk-serv.activo { background:#047857; color:#fff; }

/* Separación mínima entre tarjetas (vista móvil) */
.mensajes-wrapper .tarjeta-mensaje {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  margin: 4px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Un poco más de respiro entre bloques sin exagerar */
.mensajes-wrapper .tarjeta-mensaje + .tarjeta-mensaje {
  margin-top: 6px;
}

/* Aumentar altura de los botones */
.mensajes-wrapper .acciones .btn-accion {
  padding: 10px 8px;      /* más alto */
  min-height: 40px;       /* garantiza altura mínima */
  line-height: 1.2;       /* evita texto aplastado */
  font-size: 0.8rem;      /* ajusta si quieres más grande */
}

/* Spinner de carga */
.loading { display:none; }
.loading.visible { display:block; }

/* Botón volver */
.acciones-header{margin:.4rem 0 .6rem;}
.mnu-top-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:.4rem}
.mnu-top-bar button{background:#2563eb;color:#fff;border:none;padding:.45rem .8rem;border-radius:4px;font-size:.7rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;line-height:1}
.mnu-top-bar button:hover:not([disabled]){background:#1d4ed8}

/* Si alguna regla previa fija height, forzar: */
/* .mensajes-wrapper .acciones .btn-accion { height: auto !important; } */