/* =========================
   MODAL GLASS DARK (MDB/Bootstrap)
========================= */

/* Backdrop más pro */
.modal-backdrop.show{
  opacity: 1;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

/* Contenido modal */
.modal-content{
  background: linear-gradient(180deg, rgba(10,18,34,.92), rgba(8,14,26,.88)) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Header/Footer */
.modal-header,
.modal-footer{
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03);
}

/* Título */
.modal-title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Botón X */
.modal-header .close,
.modal-header button.close{
  color: rgba(255,255,255,.85) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.modal-header .close:hover,
.modal-header button.close:hover{
  transform: scale(1.06);
}

/* Inputs dentro del modal heredan bien */
.modal-content .form-control,
.modal-content .dataTables_filter input,
.modal-content .dataTables_length select{
  background: linear-gradient(180deg, rgba(8,14,26,.70), rgba(8,14,26,.55)) !important;
  border-color: rgba(255,255,255,.12) !important;
}


/* =========================
   DARK GLASS — FORMS (MDB)
========================= */
:root{
  --x-bg: rgba(10,14,26,.72);
  --x-bg2: rgba(13,20,40,.78);
  --x-border: rgba(255,255,255,.10);
  --x-border2: rgba(255,255,255,.14);
  --x-text: rgba(255,255,255,.92);
  --x-muted: rgba(255,255,255,.65);
  --x-blue: rgba(72,136,255,.95);
}

/* Inputs generales MDB/BS */
input.form-control,
select.form-control,
textarea.form-control,
.dataTables_filter input,
.dataTables_length select{
/*  background: linear-gradient(180deg, var(--x-bg), rgba(8,14,26,.55)) !important;*/
  color: var(--x-text) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Placeholder */
.form-control::placeholder,
.dataTables_filter input::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* Focus (glow suave) */
.form-control:focus,
.dataTables_length select:focus,
.dataTables_filter input:focus{
  background: var(--x-bg2) !important;
  border-color: rgba(72,136,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(72,136,255,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Flecha de select (para Chrome/Edge) */
select.form-control,
.custom-select,
.dataTables_length select{
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px !important;
}

/* Opciones del select (cuando el navegador permite estilarlas) */
select option{
  background: #0b1224 !important;
  color: #fff !important;
}

/* =========================
   MDB "md-form" + prefix icon
========================= */

/* Si usas .md-form (MDB clásico) */
.md-form{
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

/* Icono prefix (i) centrado y con fondo */
.md-form .prefix{
  color: rgba(255,255,255,.70) !important;
  font-size: 1rem;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Empuja el input para que no se monte con el prefix */
.md-form .prefix ~ input,
.md-form .prefix ~ textarea,
.md-form .prefix ~ select{
  padding-left: 56px !important;
}

/* Labels en oscuro */
.md-form label{
  color: rgba(120,170,255,.9) !important;
  font-weight: 700;
}

/* =========================
   INPUT GROUP PREPEND (BS/MDB)
========================= */
.input-group-text{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.80) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 12px 0 0 12px !important;
  height: 42px;
  display:flex;
  align-items:center;
}

.input-group .form-control{
  height: 42px;
  border-radius: 0 12px 12px 0 !important;
}

/* =========================
   MODALS (MDB/BS)
========================= */
.modal-backdrop.show{
  opacity: .55 !important;
  backdrop-filter: blur(10px);
}

.modal-dialog{
  margin-top: 4.8vh;
}

.modal-content{
  background: rgba(12,18,34,.86) !important;
  color: var(--x-text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

.modal-header{
  background: linear-gradient(90deg, rgba(55,120,255,.45), rgba(55,120,255,.18));
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.modal-title{
  font-weight: 800;
}

.modal-footer{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Botón cerrar (la X) visible en oscuro */
.modal-header .close,
.modal-header button.close{
  color: rgba(255,255,255,.85) !important;
  text-shadow: none !important;
  opacity: .9 !important;
}

/* Si algo te tapa el modal por z-index (sidebar etc.) */
.modal{ z-index: 20050 !important; }
.modal-backdrop{ z-index: 20040 !important; }


.check-modern-text{
color: rgba(255,255,255,.86) !important
}

/* =========================
   INPUT GROUP (MDB/BS) — DARK GLASS
========================= */
:root{
  --x-bg: rgba(10,14,26,.72);
  --x-bg2: rgba(13,20,40,.80);
  --x-brd: rgba(255,255,255,.10);
  --x-brd2: rgba(255,255,255,.16);
  --x-txt: rgba(255,255,255,.92);
  --x-muted: rgba(255,255,255,.62);
  --x-glow: rgba(72,136,255,.18);
  --x-glow2: rgba(72,136,255,.42);
}

/* Unifica altura y alinea icono + control */
.input-group{
  align-items: stretch;
}

/* prepend (icono) */
.input-group-prepend .input-group-text{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.86) !important;
  border: 1px solid var(--x-brd) !important;
  border-right: 0 !important;
  height: 42px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px 0 0 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.input-group-prepend .input-group-text i{
  font-size: 14px;
  opacity: .95;
}

/* input */
.input-group .form-control{
  height: 42px;
  background: var(--x-bg) !important;
  color: var(--x-txt) !important;
  border: 1px solid var(--x-brd) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* select MDB "browser-default custom-select" */
.input-group .custom-select,
.input-group select.browser-default.custom-select{
  height: 42px;
  background: var(--x-bg) !important;
  color: var(--x-txt) !important;
  border: 1px solid var(--x-brd) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;

  /* flecha */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,.72) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Focus: glow suave */
.input-group .form-control:focus,
.input-group .custom-select:focus{
  background: var(--x-bg2) !important;
  border-color: var(--x-glow2) !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px var(--x-glow),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Opciones del select (cuando el navegador deja) */
select option{
  background: #0b1224 !important;
  color: #fff !important;
}

/* =========================
   SELECT2 — DARK GLASS THEME
========================= */

/* container */
.select2-container .select2-selection--single{
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--x-bg) !important;
  border: 1px solid var(--x-brd) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* texto dentro */
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--x-txt) !important;
  line-height: 42px !important;
  padding-left: 12px !important;
}

/* flecha */
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 42px !important;
  right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: rgba(255,255,255,.75) transparent transparent transparent !important;
}

/* placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* dropdown */
.select2-container--default .select2-dropdown{
  background: rgba(11,18,36,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

/* search box dentro dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  color: var(--x-txt) !important;
  outline: none !important;
}

/* opciones */
.select2-container--default .select2-results__option{
  color: rgba(255,255,255,.85) !important;
  padding: 10px 12px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(72,136,255,.18) !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]{
  background: rgba(72,136,255,.28) !important;
}

/* Fix z-index (modals + sidebar) */
.select2-container{
  z-index: 30000 !important;
}


/* =========================
   APPLE STYLE INPUTS (GLASS MINIMAL)
========================= */

:root{
  --x-input-bg: rgba(255,255,255,.03);
  --x-input-border: rgba(255,255,255,.08);
  --x-input-border-focus: rgba(120,170,255,.55);
  --x-input-glow: rgba(120,170,255,.25);
  --x-text: rgba(255,255,255,.90);
  --x-muted: rgba(255,255,255,.55);
}

/* INPUT GROUP */
.input-group{
  align-items: stretch;
}

/* PREPEND ICON */
.input-group-prepend .input-group-text{
  background: transparent !important;
  border: 1px solid var(--x-input-border) !important;
  border-right: 0 !important;
  height: 40px;
  min-width: 44px;
  border-radius: 12px 0 0 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--x-muted) !important;
  transition: .25s ease;
}

/* INPUT */
.input-group .form-control{
  height: 40px;
  background: var(--x-input-bg) !important;
  color: var(--x-text) !important;
  border: 1px solid var(--x-input-border) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  transition: all .25s ease;
}

/* SELECT */
.input-group select,
.input-group .custom-select{
  height: 40px;
  background: var(--x-input-bg) !important;
  color: var(--x-text) !important;
  border: 1px solid var(--x-input-border) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  transition: all .25s ease;
}

/* HOVER */
.input-group .form-control:hover,
.input-group select:hover{
  border-color: rgba(255,255,255,.15) !important;
}

/* FOCUS — estilo Apple */
.input-group .form-control:focus,
.input-group select:focus{
  background: rgba(255,255,255,.05) !important;
  border-color: var(--x-input-border-focus) !important;
  box-shadow:
      0 0 0 3px var(--x-input-glow);
  outline: none !important;
}

/* Cuando el input está activo, ilumina el icono */
.input-group:focus-within .input-group-text{
  border-color: var(--x-input-border-focus) !important;
  color: #ffffff !important;
}
.select2-container .select2-selection--single{
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--x-input-bg) !important;
  border: 1px solid var(--x-input-border) !important;
  transition: .25s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--x-text) !important;
  line-height: 40px !important;
}

.select2-container--default .select2-selection--single:focus{
  border-color: var(--x-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--x-input-glow) !important;
}

/* MODAL dark glass */
.x-dark .modal-content{
  background: rgba(10,18,35,.78) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92) !important;
}

.x-dark .modal-header,
.x-dark .modal-footer{
  border-color: rgba(255,255,255,.08) !important;
}

.x-dark .modal-backdrop.show{
  opacity: .65 !important;
}

/* Bootstrap / MDB: asegura stacking correcto */
.modal{
  z-index: 1055 !important;
}
.modal-backdrop{
  z-index: 1050 !important;
}

/* si algún wrapper está por encima del modal, bájalo */
.x-dashboard-bg::before,
.x-dashboard-bg::after{
  z-index: 0 !important;
}


/* =========================
   UPLOAD (Dark Glass)
========================= */

/* input-group container */
.x-ig{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15,23,42,.28);
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: .22s ease;
}

.x-ig:hover{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 4px rgba(59,130,246,.10), 0 14px 28px rgba(0,0,0,.26);
  transform: translateY(-1px);
}

/* icon left */
.x-ig-icon{
  background: rgba(59,130,246,.14) !important;
  border: 0 !important;
  color: rgba(226,232,240,.92) !important;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* custom-file */
.x-file{
  border: 0 !important;
}

.x-file-input{
  cursor: pointer;
}

/* label */
.x-file-label{
  background: transparent !important;
  border: 0 !important;
  color: rgba(226,232,240,.90) !important;
  height: 52px;
  display: flex;
  align-items: center;
  padding-left: 14px;
  font-weight: 600;
}

/* quita el “Browse” del custom-file (bootstrap) */
.x-file-label::after{
  content: "Elegir" !important;
  background: rgba(255,255,255,.08) !important;
  border: 0 !important;
  color: rgba(226,232,240,.92) !important;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 700;
}

/* focus apple */
.x-ig:focus-within{
  border-color: rgba(96,165,250,.85);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 18px 34px rgba(0,0,0,.30);
}

/* hint (reemplaza alert feo) */
.x-hint{
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-weight: 600;
  color: rgba(147,197,253,.95);

  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* preview */
.x-preview-wrap{
  margin-top: 10px;
  border-radius: 22px;
  padding: 12px;
  background: rgba(15,23,42,.22);
  border: 1px solid rgba(148,163,184,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: .25s ease;
}

.x-preview-wrap:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(59,130,246,.10), 0 24px 55px rgba(0,0,0,.32);
}

.x-preview{
  border-radius: 18px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: block;
}


.alert.alert-info{
  background: rgba(59,130,246,.10) !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  color: rgba(147,197,253,.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== FILE INPUT (MDB/BS4) FIX ===== */

/* contenedor */
.x-filegroup{
  display: flex;
  align-items: stretch;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
}

/* icono fijo */
.x-filegroup .x-ig-icon{
  height: 52px;
  min-width: 52px;
  border: 0 !important;
  border-right: 1px solid rgba(148,163,184,.14) !important;
}

/* custom-file debe ser flex y ocupar todo */
.x-filegroup .custom-file{
  flex: 1;
  height: 52px;
  margin: 0 !important;
}

/* input real */
.x-filegroup .custom-file-input{
  height: 52px;
  cursor: pointer;
}

/* label principal: que no se meta debajo del “Elegir” */
.x-filegroup .custom-file-label{
  height: 52px;
  border: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;

  padding-left: 14px !important;
  padding-right: 110px !important; /* espacio para botón */
  background: transparent !important;

  color: rgba(226,232,240,.92) !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BOTÓN “Elegir” bien alineado y glass */
.x-filegroup .custom-file-label::after{
  content: attr(data-btn);

  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  height: 34px;
  display: flex;
  align-items: center;

  padding: 0 14px;
  border-radius: 12px;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: rgba(226,232,240,.92) !important;

  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* hover suave tipo stripe */
.x-filegroup:hover .custom-file-label::after{
  background: rgba(59,130,246,.16) !important;
  border-color: rgba(59,130,246,.28) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.10);
}

/* focus apple */
.x-filegroup:focus-within{
  border: 1px solid rgba(96,165,250,.75) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18), 0 18px 34px rgba(0,0,0,.30);
}

/* Estado inicial por si no hay data-btn todavía */
.x-filegroup .custom-file-label{
  --btnText: "Elegir";
}
/* importante: evita que mdb/bs4 meta “line-height raro” */

.x-filegroup .custom-file-label::after{ content:"Elegir" !important; }
.x-filegroup .custom-file-input:valid ~ .custom-file-label::after{ content:"Cambiar" !important; }


/* =========================
   X Upload (File input) — Dark Glass Apple
========================= */

/* Contenedor del grupo */
.x-ig{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15,23,42,.22);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: .18s ease;
}
.x-ig:hover{
  border-color: rgba(59,130,246,.22);
  background: rgba(15,23,42,.30);
}
.x-ig:focus-within{
  border-color: rgba(96,165,250,.65);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.14),
    0 12px 26px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Icono izquierdo */
.x-ig-icon{
  min-width: 44px;
  justify-content: center;
  background: rgba(2,6,23,.25) !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(226,232,240,.85) !important;
}

/* El custom-file ocupa todo */
.x-file{
  display: flex;
  align-items: stretch;
}

/* Oculta el input real preventing weird UI */
.x-file-input{
  cursor: pointer;
}

/* Label tipo “input” */
.x-file-label{
  height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 92px; /* espacio para el botón */
  background: transparent !important;
  border: 0 !important;
  color: rgba(226,232,240,.92) !important;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón derecho (Elegir/Cambiar) */
.x-file-label::after{
  height: 100%;
  display: flex;
  align-items: center;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(226,232,240,.92) !important;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 0 18px;
  content: attr(data-btn);
  transition: .18s ease;
}

/* Hover botón */
.x-ig:hover .x-file-label::after{
  background: rgba(59,130,246,.14) !important;
  border-left-color: rgba(59,130,246,.20) !important;
}

/* Hint a la derecha */
.x-hint{
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0 14px;
  background: rgba(15,23,42,.22);
  border: 1px solid rgba(148,163,184,.14);
  color: rgba(226,232,240,.75);
  font-size: 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Preview */
.x-preview-wrap{
  padding: 10px;
  border-radius: 18px;
  background: rgba(15,23,42,.18);
  border: 1px solid rgba(148,163,184,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.x-preview{
  border-radius: 14px !important;
  background: rgba(2,6,23,.25) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* En mobile: evita que se deforme */
@media (max-width: 576px){
  .x-file-label{ padding-right: 88px; }
  .x-hint{ font-size: 12px; }
}
.custom-file-label::after{
  content: attr(data-btn) !important;
}


.modal-content{
  border-radius: 18px !important;
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(2,6,23,.20);
}
.modal-footer{
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(2,6,23,.12);
}
.modal-title{
  color: rgba(226,232,240,.95) !important;
}
.modal .close{
  color: rgba(226,232,240,.9) !important;
  text-shadow: none !important;
  opacity: .85;
}


/* =========================
   X Search Glass Input
========================= */

.x-search-group{
  position: relative;
  width: 100%;
}

.x-search-input{
  width: 100%;
  height: 46px;
  border-radius: 16px;
  padding: 10px 48px 10px 16px;
  background: rgba(15,23,42,.30);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(226,232,240,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.x-search-input::placeholder{
  color: rgba(226,232,240,.45);
  transition: .2s ease;
}

.x-search-input:hover{
  border-color: rgba(59,130,246,.25);
  background: rgba(15,23,42,.40);
}

.x-search-input:focus{
  outline: none;
  border-color: rgba(96,165,250,.70);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.15),
    0 12px 28px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

/* icono */
.x-search-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(226,232,240,.75);
  pointer-events: none;
  transition: .18s ease;
}

.x-search-group:focus-within .x-search-icon{
  color: rgba(147,197,253,.95);
  transform: translateY(-50%) scale(1.05);
}
  


/*  DATA INPUT PARA BUSCAR FALLAS*/

.x-ac-wrap{ position: relative; width:100%; }

.x-ac-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 9999;
  border-radius: 16px;
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  overflow: hidden;
  padding: 6px;
}

.x-ac-item{
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(226,232,240,.95);
  padding: 10px 12px;
  cursor: pointer;
  transition: .16s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.x-ac-item:hover{
  background: rgba(59,130,246,.16);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.22);
}

.x-ac-item strong{
  font-weight: 800;
  color: rgba(255,255,255,.98);
}

.x-ac-muted{
  color: rgba(226,232,240,.60);
  font-size: 12px;
}


/* =========================
   CHIP WRAP (glass)
========================= */
.x-chip-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 10px;

  border-radius: 18px;
  background: rgba(2,6,23,.22);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   CHIP (pill)
========================= */
.x-chip-wrap .chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(226,232,240,.95);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;

  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Hover glow sutil */
.x-chip-wrap .chip:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.30);
  box-shadow:
    0 18px 34px rgba(0,0,0,.28),
    0 0 0 3px rgba(59,130,246,.12),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================
   BOTÓN X
========================= */
.x-chip-wrap .chip button{
  width: 22px;
  height: 22px;
  border-radius: 999px;

  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
  color: rgba(226,232,240,.85);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  font-size: 16px;
  cursor: pointer;

  transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.x-chip-wrap .chip button:hover{
  transform: scale(1.06);
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}

.x-chip-wrap .chip button:active{
  transform: scale(.98);
}
#detalleContainer:empty{
  display: none;
}

#diagnosticoContainer:empty{
  display: none;
}

.x-infield{
  position: relative;
  width: 100%;
}

.x-infield-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(226,232,240,.70);
  opacity: .9;
  pointer-events: none;
  transition: .18s ease;
}

.x-infield-input{
  height: 44px;
  border-radius: 14px;
  padding-right: 44px; /* espacio para lupa */
  background: rgba(15,23,42,.38) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: rgba(226,232,240,.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.x-infield-input::placeholder{
  color: rgba(226,232,240,.45);
  transition: opacity .18s ease;
}

.x-infield-input:focus{
  outline: none !important;
  border-color: rgba(96,165,250,.75) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  background: rgba(2,6,23,.40) !important;
}

.x-infield:focus-within .x-infield-icon{
  color: rgba(147,197,253,.95);
  transform: translateY(-50%) scale(1.05);
}
  
  .btn-default{
  background: rgba(59,130,246,.18) !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  color: rgba(226,232,240,.95) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.btn-default:hover{
  background: rgba(59,130,246,.28) !important;
}


/* ======================================
   XPERTECH GLASS BUTTON SYSTEM
   Compatible con Bootstrap classes
====================================== */

.btn{
  border-radius: 14px !important;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 14px;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid transparent !important;
}

/* ================= PRIMARY ================= */

.btn-primary{
  background: rgba(13,110,253,.18) !important;
  border-color: rgba(13,110,253,.45) !important;
  color: rgba(219,234,254,.95) !important;

  
}

.btn-primary:hover{
  background: rgba(13,110,253,.28) !important;
  box-shadow:
    0 12px 30px rgba(13,110,253,.5);
  transform: translateY(-2px);
}

.btn-primary:active{
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(13,110,253,.25),
    inset 0 2px 6px rgba(0,0,0,.2);
}


/* ================= SUCCESS ================= */

.btn-success{
  background: rgba(25,135,84,.18) !important;
  border-color: rgba(25,135,84,.45) !important;
  color: rgba(187,247,208,.95) !important;

 
}

.btn-success:hover{
  background: rgba(25,135,84,.28) !important;
  box-shadow:
    0 12px 30px rgba(25,135,84,.45);
  transform: translateY(-2px);
}


/* ================= WARNING ================= */

.btn-warning{
  background: rgba(255,193,7,.20) !important;
  border-color: rgba(255,193,7,.55) !important;
  color: rgba(255,243,205,.95) !important;

  
}

.btn-warning:hover{
  background: rgba(255,193,7,.32) !important;
  box-shadow:
    0 12px 30px rgba(255,193,7,.45);
  transform: translateY(-2px);
}


/* ================= DANGER ================= */

.btn-danger{
  background: rgba(220,53,69,.18) !important;
  border-color: rgba(220,53,69,.45) !important;
  color: rgba(254,202,202,.95) !important;

  
}

.btn-danger:hover{
  background: rgba(220,53,69,.30) !important;
  box-shadow:
    0 8px 22px rgba(220,53,69,.5);
  transform: translateY(-5px);
}


/* ================= FOCUS UNIVERSAL ================= */

.btn:focus{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.15),
    0 8px 22px rgba(0,0,0,.4);
}


/* ================= ICON BTN GROUP FIX ================= */

.btn i{
  margin-right: 6px;
  font-size: 13px;
}

/* acciones datatable: separadas, centradas, sin “pegado” */
.btn-groupx-actions{
  display: inline-flex !important;
  gap: 10px;
  align-items: center;
}

/* rompe el comportamiento de “grupo” de bootstrap */
.btn-groupx-actions > .btn{
  border-radius: 14px !important;
  margin: 0 !important;
}

/* tamaño consistente para icon-buttons */
.btn-groupx-actions > .btn{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-groupx-actions > .btn i{
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

/* =========================
   COLOR GLOW - ACTION BUTTONS
========================= */

/* Quitamos sombras anteriores */
.btn-group.x-actions > .btn{
  box-shadow: none !important;
  transition: 
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* Hover base */
.btn-group.x-actions > .btn:hover{
  transform: translateY(-2px);
}

/* PRIMARY (azul imprimir) */
.btn-group.x-actions > .btn.primary-color:hover,
.btn-group.x-actions > .btn.btn-primary:hover{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.45),
    0 0 18px rgba(59,130,246,.35);
}

/* WARNING (amarillo editar) */
.btn-group.x-actions > .btn.btn-warning:hover{
  box-shadow:
    0 0 0 1px rgba(251,191,36,.45),
    0 0 18px rgba(251,191,36,.35);
}

/* DANGER (rojo eliminar) */
.btn-group.x-actions > .btn.btn-danger:hover{
  box-shadow:
    0 0 0 1px rgba(239,68,68,.45),
    0 0 18px rgba(239,68,68,.35);
}

/* SUCCESS (verde si usas alguno) */
.btn-group.x-actions > .btn.btn-success:hover{
  box-shadow:
    0 0 0 1px rgba(34,197,94,.45),
    0 0 18px rgba(34,197,94,.35);
}


/* ===== Badge Glass Base  PRIORIDAD REPARACIONES BADGE===== */

.x-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  transition:.2s ease;
}

/* ===== Danger (Vencido) ===== */
.x-badge-danger{
  background:rgba(239,68,68,.15);
  color:#ff6b6b;
  border:1px solid rgba(239,68,68,.35);
  box-shadow:0 0 18px rgba(239,68,68,.15);
}

/* Hover sutil */
.x-badge-danger:hover{
  background:rgba(239,68,68,.22);
  box-shadow:0 0 22px rgba(239,68,68,.25);
}



/* ===== SUCCESS (A tiempo) ===== */
.x-badge-success{
  background:rgba(16,185,129,.15);
  color:#34d399;
  border:1px solid rgba(16,185,129,.35);
  box-shadow:0 0 18px rgba(16,185,129,.15);
}

.x-badge-success:hover{
  box-shadow:0 0 22px rgba(16,185,129,.25);
}

/* ===== WARNING (Próximamente) ===== */
.x-badge-warning{
  background:rgba(245,158,11,.15);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.35);
  box-shadow:0 0 18px rgba(245,158,11,.15);
}

.x-badge-warning:hover{
  box-shadow:0 0 22px rgba(245,158,11,.25);
}

@keyframes softPulse {
  0% {
    box-shadow: 0 0 6px rgba(245,158,11,.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(245,158,11,.25);
  }
  100% {
    box-shadow: 0 0 6px rgba(245,158,11,.15);
  }
}

.x-badge-warning{
  animation: softPulse 3s infinite ease-in-out;
}