.clm-toast-container-front{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: min(92vw, 520px);
  pointer-events: none;
}

 .clm-frontend{max-width:900px}
.clm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.clm-table{border:1px solid #ccc;border-radius:8px;padding:10px;text-align:center;cursor:pointer}
.clm-table.red{background:#ffe5e5}
.clm-table.green{background:#e6ffe6}
.clm-table.blue{background:#e6f0ff}
#clm-worker-search{width:100%;margin-bottom:6px}
fieldset{border:1px solid #ddd;border-radius:8px;padding:8px;margin-bottom:8px}
.clm-table-detail{margin-top:10px}
#clm-msg{margin-top:8px}

/* Tooltip flotante mesas */
.clm-tooltip{position:absolute;background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:99999;max-width:280px}
.clm-tooltip h4{margin:0 0 6px;font-size:14px}
.clm-tooltip ul{margin:0;padding-left:18px}

/* Vista móvil: 1 columna, sin deformar */
@media (max-width: 640px){
  .clm-grid{grid-template-columns:1fr}
  .clm-table{width:100%;box-sizing:border-box}
}

/* Mismo ancho para los selects del formulario */
#clm-reg-form label { display:block; margin-bottom: 10px; }
#clm-reg-form select { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Si el autocompletado del empleado crea un input “clm-ts”, que ocupe todo */
.clm-ts { width: 100%; }
.clm-ts input[type="text"] { width: 100%; box-sizing: border-box; }

/* ----- Forzar formulario en una sola columna ----- */
#clm-reg-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100%;
}

/* Cada campo ocupa toda la fila */
#clm-reg-form .clm-field,
#clm-reg-form > label {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
}

/* Inputs/selects al 100% de ancho */
#clm-reg-form select,
#clm-reg-form input[type="text"],
#clm-reg-form .ts-wrapper,         /* TomSelect (si lo usas) */
#clm-reg-form .select2,            /* Select2 contenedor */
#clm-reg-form .select2-container   /* Select2 container */
{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* --- CLM Frontend Toasts (centrado arriba) --- */
.clm-toast-container{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: min(92vw, 520px);
  pointer-events: none;
}
.clm-toast{
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  background: #333;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  opacity: .98;
  transition: transform .25s ease, opacity .25s ease;
}
.clm-toast.success{ background: #16a34a; }
.clm-toast.error{ background: #dc2626; }
.clm-toast.out{ opacity: 0; transform: translateY(-10px); }
#clm-msg{ display:none !important; }