/* ===============================
Código para mejorar datatable de clientes
=============================== */
/* Botones de acción con look suave */
.btn-action {
  --btn-bg: rgba(13,110,253,.10);
  --btn-bd: rgba(13,110,253,.25);
  --btn-fg: #0d6efd;
  padding: .35rem .6rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .15s ease-in-out;
}
.btn-action i { font-size: .9rem; }
.btn-action:hover { background: var(--btn-fg); color: #fff; }
.btn-action-danger {
  --btn-bg: rgba(220,53,69,.10);
  --btn-bd: rgba(220,53,69,.25);
  --btn-fg: #dc3545;
}
/* Badge monoespaciado para tarjeta */
.badge-nfc {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
  font-weight: 500;
}
/* Cabecera pegada si hay scroll */
.table thead th {
  position: sticky;
  top: 2;
  background: #f31515;
  z-index: 1;
  color: white;
}
/* Ajustes compactos */
table.dataTable tbody td { vertical-align: middle; }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin: 10px 0; /* espacio vertical */
}

.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
}

/* Separa aún más */
.dataTables_wrapper .dataTables_length {
    margin-right: auto; /* empuja a la izquierda */
}

.dataTables_wrapper .dataTables_filter {
    margin-left: auto; /* empuja a la derecha */
}



/* ===============================
Código para mejorar formulario de clientes
=============================== */
/* ===== Colores (fallbacks si usas BS4) ===== */
:root {
  --bs-primary: var(--mb-primary, #0d6efd);
  --bs-primary-rgb: var(--mb-primary-rgb, 13, 110, 253);
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-border-color: #dee2e6;
}

/* ===== Botones estilo pill ===== */
.btn-pill { border-radius: 30px !important; }

/* ===== Tarjeta e inputs con radios suaves ===== */
.card { border-radius: 12px; }
.form-control { border-radius: 10px; }

/* ===== Campo tipo Material (línea inferior animada) ===== */
.mui-field { position: relative; }
.mui-field .form-label { display:block; font-weight: 500; margin-bottom: .35rem; }
.mui-control {
  border: 1px solid var(--bs-border-color);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Resalta al enfocar (outline suave + color primario) */
.mui-control:focus {
  border-color: rgb(var(--bs-primary-rgb));
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
  background-color: #fff;
}

/* Línea inferior animada (estilo Material) */
.mui-field::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;                /* ajusta según padding del input */
  height: 2px;
  background: linear-gradient(90deg, var(--bs-primary), #6610f2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  pointer-events: none;
}
.mui-field:focus-within::after { transform: scaleX(1); }

/* ===== Validación elegante (transiciones suaves) ===== */
.invalid-feedback,
.valid-feedback {
  display: block;          /* mantener flujo */
  opacity: 0;
  max-height: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, max-height .2s ease, transform .2s ease;
  margin-top: .25rem;
  font-size: .875rem;
}

/* Mostrar cuando aplique invalid/valid (en vivo o al enviar) */
.form-control.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback {
  opacity: 1; max-height: 80px; transform: translateY(0);
}

.form-control.is-valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-feedback {
  opacity: 1; max-height: 80px; transform: translateY(0);
}

/* Bordes por estado (más suaves) */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--bs-success);
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--bs-danger);
}

/* ===== Accesibilidad: foco visible para teclado ===== */
.mui-control:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), .35);
  outline-offset: 2px;
}