/* =========================================================
   Deturnos — global.css
   Tokens: escala 8pt, grilla 4px, 3 radios, 2 grises
   ========================================================= */

/* ========================
   SIDEBAR OVERLAY (mobile)
   ======================== */
#dt-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1049;
}
#dt-sidebar-overlay.active {
  display: block;
}

@media (max-width: 960px) {
  .site-sidebar {
    width: 100% !important;
    z-index: 1050 !important;
  }
}

/* ========================
   TABLA BOOTSTRAP (.table)
   ======================== */
.table th,
.table td {
  padding: .6rem .75rem;
  vertical-align: middle;
  white-space: nowrap;
}
.table thead th {
  font-weight: 600;
  font-size: .82rem;
  background-color: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  color: #64748b;
}
.table tbody tr:hover { background-color: #f9fafb; }
.table td .btn { padding: .35rem .6rem; font-size: .82rem; line-height: 1.2; }
.table td .d-flex { gap: .35rem; }

@media (max-width: 576px) {
  .page-title-right { display: none !important; }
  td.text-right, th.text-right { text-align: left !important; }
  td.text-right .d-flex { justify-content: flex-start !important; flex-wrap: wrap; }
  .table th, .table td { padding: .5rem .6rem; white-space: normal; }
}

/* ========================
   CARD  (.dt-card)
   ======================== */
.dt-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.07);
  overflow: hidden;
}

.dt-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15,23,42,.07);
  background: linear-gradient(180deg, rgba(37,99,235,.05), rgba(37,99,235,0));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dt-card__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: #0f172a;
}

.dt-card__sub {
  margin-top: 4px;
  font-size: .82rem;
  color: #64748b;
}

.dt-card__body { padding: 20px; }
.dt-card__body--list { padding: 0; } /* listas full-bleed */

/* ========================
   TIPOGRAFÍA BASE
   ======================== */
html { font-size: 14px; }
body { line-height: 1.45; }

/* ========================
   BOTONES (.main-wrapper)
   ======================== */
.main-wrapper .btn,
.swal2-popup .btn {
  border-radius: 12px;
  padding: .48rem 1rem;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2px;
  border-width: 1px;
  box-shadow: none;
  transition: filter .12s ease, background .12s ease;
}

.main-wrapper .btn.btn-sm,
.swal2-popup .btn.btn-sm {
  padding: .34rem .8rem;
  font-size: .8rem;
}

/* Focus: solo teclado (no mouse) */
.main-wrapper .btn:focus-visible,
.swal2-popup .btn:focus-visible {
  outline: 2px solid rgba(37,99,235,.5);
  outline-offset: 2px;
  box-shadow: none !important;
}

.main-wrapper .btn:focus:not(:focus-visible),
.swal2-popup .btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none !important;
}

/* Primary */
.main-wrapper .btn-primary,
.swal2-popup .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.main-wrapper .btn-primary:hover,
.swal2-popup .btn-primary:hover { filter: brightness(.93); color: #fff !important; }

/* Outline-primary */
.main-wrapper .btn-outline-primary,
.swal2-popup .btn-outline-primary {
  background: transparent !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}
.main-wrapper .btn-outline-primary:hover,
.swal2-popup .btn-outline-primary:hover {
  background: rgba(37,99,235,.06) !important;
}

/* Secondary / Outline-secondary */
.main-wrapper .btn-secondary,
.main-wrapper .btn-outline-secondary,
.swal2-popup .btn-secondary,
.swal2-popup .btn-outline-secondary {
  background: #fff !important;
  border-color: rgba(15,23,42,.16) !important;
  color: #0f172a !important;
}
.main-wrapper .btn-secondary:hover,
.main-wrapper .btn-outline-secondary:hover,
.swal2-popup .btn-secondary:hover,
.swal2-popup .btn-outline-secondary:hover {
  background: #f8fafc !important;
}

/* Light */
.main-wrapper .btn-light,
.swal2-popup .btn-light {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.main-wrapper .btn-light:hover,
.swal2-popup .btn-light:hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; }

/* Warning */
.main-wrapper .btn-warning,
.main-wrapper .btn-outline-warning,
.swal2-popup .btn-warning,
.swal2-popup .btn-outline-warning {
  background: transparent !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}
.main-wrapper .btn-warning:hover,
.main-wrapper .btn-outline-warning:hover,
.swal2-popup .btn-warning:hover,
.swal2-popup .btn-outline-warning:hover { background: rgba(245,158,11,.08) !important; }

/* Danger */
.main-wrapper .btn-danger,
.swal2-popup .btn-danger {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}
.main-wrapper .btn-danger:hover,
.swal2-popup .btn-danger:hover { filter: brightness(.93); color: #fff !important; }

/* Outline-danger */
.main-wrapper .btn-outline-danger,
.swal2-popup .btn-outline-danger {
  background: transparent !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}
.main-wrapper .btn-outline-danger:hover,
.swal2-popup .btn-outline-danger:hover { background: rgba(239,68,68,.07) !important; }

/* Disabled */
.main-wrapper .btn:disabled,
.main-wrapper .btn[disabled],
.swal2-popup .btn:disabled {
  opacity: .5;
  box-shadow: none !important;
  cursor: not-allowed;
  filter: none !important;
}

/* SweetAlert compact */
.swal2-popup .btn { padding: 6px 16px !important; font-size: .82rem !important; min-width: 90px; }

/* Pill (alias semántico) */
.btn-pill { border-radius: 999px !important; }

/* ========================
   TABLA DT  (.dt-table)
   ======================== */
.dt-table-wrap { padding: 0 16px 16px; }

.dt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.dt-table thead th {
  font-size: .78rem;
  font-weight: 700;
  text-transform: none;
  color: #64748b;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15,23,42,.09);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.dt-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.07);
  vertical-align: middle;
  font-size: .88rem;
  color: #0f172a;
  background: #fff;
}

.dt-table tbody tr:hover td { background: #f8fafc; }
.dt-table .text-right { text-align: right; }
.dt-muted { color: #64748b; }

/* Acciones desktop */
.dt-table td[data-label="Acciones"],
.dt-table .dt-actions-cell { white-space: nowrap; }

.dt-table td[data-label="Acciones"] .btn,
.dt-table .dt-actions-cell .btn {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: none;
  transition: background .12s ease, filter .12s ease;
}

.dt-table td[data-label="Acciones"] .btn + .btn,
.dt-table .dt-actions-cell .btn + .btn { margin-left: 6px; }

/* Colores en tabla desktop */
.dt-table .btn-primary,
.dt-table .btn-outline-primary {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
}
.dt-table .btn-primary:hover,
.dt-table .btn-outline-primary:hover { background: #1e40af; border-color: #1e40af; }

.dt-table .btn-warning,
.dt-table .btn-outline-warning {
  background: transparent;
  border: 1px solid #f59e0b;
  color: #b45309;
}
.dt-table .btn-warning:hover,
.dt-table .btn-outline-warning:hover { background: rgba(245,158,11,.08); }

.dt-table .btn-danger,
.dt-table .btn-outline-danger {
  background: transparent;
  border: 1px solid #ef4444;
  color: #dc2626;
}
.dt-table .btn-danger:hover,
.dt-table .btn-outline-danger:hover { background: rgba(239,68,68,.07); }

/* dt-actions (fuera de tabla) */
.dt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.dt-actions .btn { border-radius: 12px; }
@media (max-width: 768px) { .dt-actions { justify-content: flex-start; } }

/* ========================
   CABECERA DE LISTA
   (.dt-head-tools)
   ======================== */
.dt-head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 320px;
}
.dt-head-tools .dt-search { width: 300px; max-width: 40vw; }
.dt-head-tools .btn { border-radius: 12px; }

.dt-head-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.dt-head-list__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 320px;
}
.dt-head-list__search { width: 300px; max-width: 400px; }
.dt-head-list__sub { margin-top: 2px; color: #64748b; font-size: .88rem; }

@media (max-width: 768px) {
  .dt-card__head { align-items: flex-start; }
  .dt-head-tools { width: 100%; min-width: 0; justify-content: stretch; }
  .dt-head-tools .dt-search { width: 100%; max-width: 100%; }
  .dt-head-tools .btn { width: 100%; }
  .dt-head-list { flex-wrap: wrap; }
  .dt-head-list__right { width: 100%; min-width: 0; }
  .dt-head-list__search { flex: 1 1 220px; width: auto; max-width: none; }
}

/* ========================
   BUSCADOR  (.dt-search)
   ======================== */
/* Cuando dt-search envuelve un form-control Bootstrap */
.dt-card__head .dt-search,
.dt-head-tools .dt-search,
.dt-head-list__right .dt-search,
.dt-head-list__search {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.dt-card__head .dt-search .form-control,
.dt-head-tools .dt-search .form-control,
.dt-head-list__search .form-control {
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  box-shadow: none !important;
  outline: none !important;
  font-size: .88rem;
}

.dt-card__head .dt-search .form-control:focus,
.dt-head-tools .dt-search .form-control:focus,
.dt-head-list__search .form-control:focus { border-color: #2563eb; box-shadow: none !important; }

/* Buscador standalone */
.dt-search-input {
  width: 260px;
  max-width: 50vw;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  outline: none;
  font-size: .88rem;
}
.dt-search-input:focus { border-color: #2563eb; }

/* Input standalone antiguo (compatibilidad) */
#espSearch, .dt-search:not(:has(.form-control)) {
  width: 260px;
  max-width: 50vw;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  outline: none;
}
#espSearch:focus { border-color: #2563eb; }

/* ========================
   INPUTS  (.dt-field, .dt-card)
   ======================== */
.dt-field { margin-bottom: 14px; }

.dt-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: #0f172a;
}

.dt-help {
  margin-top: 5px;
  font-size: .78rem;
  color: #64748b;
  line-height: 1.4;
}

.dt-error {
  margin-top: 5px;
  font-size: .78rem;
  color: #dc2626;
}

/* Input base (dentro de .dt-field) */
.dt-field input[type="text"],
.dt-field input[type="email"],
.dt-field input[type="tel"],
.dt-field input[type="number"],
.dt-field input[type="password"],
.dt-field input[type="url"],
.dt-field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  outline: none;
  box-shadow: none;
  font-size: .88rem;
  color: #0f172a;
}

.dt-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  outline: none;
  box-shadow: none;
  min-height: 90px;
  font-size: .88rem;
  color: #0f172a;
}

.dt-field input:focus,
.dt-field select:focus,
.dt-field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

/* Inputs dentro de .dt-card (fuera de .dt-field) */
.dt-card input[type="text"],
.dt-card input[type="email"],
.dt-card input[type="tel"],
.dt-card input[type="number"],
.dt-card input[type="password"],
.dt-card input[type="url"],
.dt-card textarea,
.dt-card select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  outline: none;
  font-size: .88rem;
  color: #0f172a;
}
.dt-card textarea { height: auto; min-height: 90px; padding: 10px 12px; }

.dt-card input:focus,
.dt-card select:focus,
.dt-card textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

.dt-card input[disabled],
.dt-card select[disabled] {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 1;
}

/* Inputs globales (fuera de dt-card / dt-field, legado) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: .52rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
textarea { min-height: 90px; }
input[type="file"] { width: 100%; }

/* ========================
   CONTROLES AUXILIARES
   ======================== */
.dt-divider { height: 1px; background: #e5e7eb; margin: 16px 0; }

.dt-section-title {
  font-size: .88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}

.dt-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  font-weight: 600;
  color: #0f172a;
}
.dt-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }

.dt-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dt-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dt-count {
  font-size: .78rem;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  padding: .4rem .65rem;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: #fff;
}

/* ========================
   CHIPS / CHECKGRID
   ======================== */
.dt-checkgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  transition: background .1s ease, border-color .1s ease;
}
.dt-chip:hover { background: #f8fafc; }

.dt-chip input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }

.dt-chip__txt { font-size: .82rem; color: #0f172a; font-weight: 600; }

.dt-chip.is-checked { border-color: #2563eb; background: rgba(37,99,235,.06); }

/* ========================
   MULTISELECT
   ======================== */
.dt-multiselect {
  width: 100%;
  min-height: 130px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  outline: none;
}
.dt-multiselect option { padding: .35rem .5rem; }

/* ========================
   PANEL
   ======================== */
.dt-panel {
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 12px;
  padding: 14px;
}
.dt-panel-soft { background: #f8fafc; }
.dt-panel-title { font-weight: 700; font-size: .88rem; margin-bottom: 10px; color: #0f172a; }

/* ========================
   FOTO / DROPZONE
   ======================== */
.dt-dropzone {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.dt-thumb { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.dt-hint { text-align: center; padding: 10px; }
.dt-drag-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dt-photo-card {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}
.dt-photo-left { width: 160px; flex: 0 0 160px; }
.dt-photo-preview {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.09);
  display: block;
}
.dt-photo-empty {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  border: 1px dashed rgba(15,23,42,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: #f8fafc;
  font-weight: 600;
}
.dt-photo-right { flex: 1 1 280px; min-width: 240px; }

.dt-file {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}
.dt-file-name { margin-top: 6px; color: #64748b; font-size: .78rem; }

/* ========================
   CLEAR / OJO
   ======================== */
.dt-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.dt-clear span { color: #0f172a; font-weight: 700; }

.dt-clear--side { font-weight: 400; font-size: .85rem; color: #64748b; }
.dt-clear--side span { font-weight: 400 !important; color: #64748b; }
.dt-clear--side input { width: 16px; height: 16px; }

/* Password toggle */
.dt-pwd-wrap { position: relative; }
.dt-pwd-wrap input { padding-right: 48px; }

.dt-pwd-eye {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
  opacity: .55;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: opacity .15s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.dt-pwd-eye.is-hidden {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.8 21.8 0 0 1 5.06-6.94'/><path d='M1 1l22 22'/><path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/></svg>");
}
.dt-pwd-eye:hover { opacity: 1; }

/* Botón visible/ocultar (alternativo) */
.dt-pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: .78rem;
}
.dt-pwd-toggle:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }

/* ========================
   AVATAR / SWITCH
   ======================== */
.dt-avatar-actions .btn { height: 36px; padding: 0 14px; font-size: .85rem; border-radius: 12px; }
.dt-avatar-actions .btn-outline-secondary { background: #fff; }
.dt-avatar-actions .btn-danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.dt-avatar-actions .btn-danger:hover { background: #fee2e2; }

.dt-avatar-public-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.dt-avatar-public-label { display: flex; flex-direction: column; gap: 2px; }
.dt-avatar-public-title { font-size: .88rem; font-weight: 600; color: #0f172a; }
.dt-avatar-public-sub { font-size: .78rem; color: #64748b; }

/* Toggle switch */
.dt-switch { position: relative; width: 42px; height: 22px; }
.dt-switch input { opacity: 0; width: 0; height: 0; }
.dt-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 22px;
  transition: .22s;
}
.dt-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .22s;
}
.dt-switch input:checked + .dt-slider { background: #2563eb; }
.dt-switch input:checked + .dt-slider:before { transform: translateX(20px); }

/* ========================
   MISC
   ======================== */
.actions-cell .btn-view { opacity: 1 !important; pointer-events: auto !important; }

#btnEditLogo, #btnUseOriginal, #btnClearLogo { margin: 0; }

.password-help-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
}
.password-help-card--horizontal { display: flex; align-items: flex-start; gap: 28px; }
.password-help-card .help-image { flex: 0 0 52%; text-align: center; }
.password-help-card .help-image img { width: 100%; max-width: 320px; height: auto; }
.password-help-card .help-text { flex: 1; }
.password-help-card h5 { font-weight: 700; margin-bottom: 12px; }
.password-help-card p { font-size: .88rem; line-height: 1.6; margin-bottom: 10px; }
.password-help-card .muted { color: #64748b; margin-bottom: 0; }

.site-footer { font-size: .82rem; color: #64748b; }
.footer-version { margin-left: 8px; opacity: .7; font-weight: 500; }

/* ========================
   RESPONSIVE GENERAL
   ======================== */
@media (max-width: 576px) {
  .page-title-right { display: none !important; }
  .dt-dropzone { height: 180px !important; }
  .dt-card__head { padding: 14px; }
  .dt-card__body { padding: 14px; }
  .dt-checkgrid { gap: 6px; }
  .dt-search-input, #espSearch { width: 100%; max-width: 100%; }
  .dt-photo-left { width: 100%; flex: 1 1 100%; }
  .dt-photo-preview, .dt-photo-empty { width: 100%; height: 200px; }
  .dt-multiselect { min-height: 200px; }
  .dt-actions { gap: .5rem; }
}

@media (max-width: 768px) {
  #espSearch { width: 100%; max-width: 100%; }
  .dt-tools { width: 100%; }
}

/* ========================
   DT MODERN UI — Navbar + Sidebar
   Glassmorphism / gradiente suave
   ======================== */

/* --- NAVBAR (header) --- */
.navbar {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
  border-bottom: 0.5px solid rgba(15, 23, 42, 0.07) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Asegurar que los elementos internos del navbar respeten la altura */
.navbar .navbar-nav > li > a {
  line-height: 95px !important;
  color: #1e293b !important;
}

.navbar .sidebar-toggle a {
  line-height: 95px !important;
  color: #64748b !important;
}

.navbar .sidebar-toggle::after {
  background: rgba(15, 23, 42, 0.12) !important;
}

/* Nombre empresa en navbar */
.navbar-empresa {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.navbar-empresa .material-icons {
  color: #64748b !important;
}

.empresa-nombre {
  color: #1e293b !important;
}

/* --- SIDEBAR (aside) --- */
.site-sidebar {
  background: linear-gradient(160deg, #1a2744 0%, #0f1c38 55%, #0a1628 100%) !important;
  border-right: none !important;
}

/* Items del menú lateral */
.side-menu > li > a {
  color: rgba(255, 255, 255, 0.58) !important;
  border-left: 3px solid transparent !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s !important;
  border-radius: 0 10px 10px 0 !important;
  margin-right: 10px !important;
}

.side-menu > li > a:hover,
.side-menu > li > a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Ícono de los items */
.side-menu :not([class*="color-"]) > .list-icon {
  color: rgba(255, 255, 255, 0.4) !important;
  transition: color 0.15s !important;
}

.side-menu li:hover > a .list-icon,
.side-menu li.active > a .list-icon,
.side-menu li.current-page > a .list-icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Ítem activo */
.side-menu li.active,
.side-menu li:hover {
  background: transparent !important;
}

.side-menu > li.active > a,
.side-menu > li.current-page > a {
  background: linear-gradient(90deg, rgba(99, 130, 255, 0.22) 0%, rgba(99, 130, 255, 0.06) 100%) !important;
  color: #fff !important;
  border-left-color: #6382ff !important;
}

.side-menu > li.active > a .list-icon,
.side-menu > li.current-page > a .list-icon {
  color: #fff !important;
}

/* Separadores / grupos */
.side-menu li.list-divider {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  margin: 8px 0 !important;
}

/* Scrollbar del sidebar */
.site-sidebar::-webkit-scrollbar {
  width: 4px;
}
.site-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.site-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* Avatar del navbar — ajuste visual */
.dt-account__toggle .dt-nav-avatar,
.dt-account__toggle img.dt-nav-avatar {
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  background: #e2e8f0 !important;
}

/* Plan badge — mejora visual */
.dt-plan-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.dt-plan-basico   { background: rgba(99, 130, 255, 0.10); color: #3b5bdb; border: 1px solid rgba(99,130,255,0.25); }
.dt-plan-premium  { background: rgba(245, 158, 11, 0.10); color: #b45309; border: 1px solid rgba(245,158,11,0.25); }
.dt-plan-enterprise { background: rgba(16, 185, 129, 0.10); color: #065f46; border: 1px solid rgba(16,185,129,0.25); }

/* Mobile: sidebar sobre overlay sigue con el gradiente */
@media (max-width: 960px) {
  .site-sidebar {
    background: linear-gradient(160deg, #1a2744 0%, #0f1c38 55%, #0a1628 100%) !important;
  }
}

/* =========================================================
   DT REDESIGN — Navbar & Sidebar (glassmorphism / gradiente)
   Se aplica sobre el template sidebar-dark del framework base.
   ========================================================= */

/* ── NAVBAR (header superior) ─────────────────────────── */
.navbar {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
  border-bottom: none !important;
  height: 95px !important;
}

/* Empresa: nombre y subdominio */
.empresa-nombre {
  font-size: .88rem;
  font-weight: 600;
  color: #0f172a;
  padding-top: 0;
}

.navbar-empresa small a,
.navbar-empresa small {
  color: #64748b !important;
  font-size: .75rem;
}

.navbar-empresa img {
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

/* Icono hamburguesa */
.navbar .sidebar-toggle a {
  color: #475569 !important;
}
.navbar .sidebar-toggle a:hover {
  color: #0f172a !important;
}

/* Avatar del usuario */
.dt-nav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-nav-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
  object-fit: cover;
}

.dt-nav-avatar--icon {
  font-size: 32px !important;
  color: #64748b !important;
}

/* Separador sidebar-toggle */
.sidebar-toggle::after {
  background: rgba(15, 23, 42, .12) !important;
}

/* ── SIDEBAR ──────────────────────────────────────────── */
.site-sidebar {
  background: linear-gradient(160deg, #1a2744 0%, #0f1c38 60%, #0a1628 100%) !important;
  border-right: none !important;
}

/* Aura sutil en la esquina superior */
.site-sidebar::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 130, 255, .14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Ítems del menú ───────────────────────────────────── */
.sidebar-nav .side-menu {
  padding-top: 12px;
}

.side-menu > li > a {
  color: rgba(255, 255, 255, .55) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 1px 10px 1px 0 !important;
  padding-left: 14px !important;
  font-size: 1rem !important;
  line-height: 3em !important;
  font-weight: 400 !important;
  transition: background .15s ease, color .15s ease !important;
}

.side-menu > li > a:hover,
.side-menu > li > a:focus {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .9) !important;
}

/* Ítem activo */
.sidebar-dark .side-menu li.active,
.sidebar-dark .side-menu li:hover {
  background: transparent !important;
}

.sidebar-dark .side-menu li.active > a,
.side-menu > li.current-page > a {
  background: linear-gradient(90deg, rgba(99, 130, 255, .22) 0%, rgba(99, 130, 255, .07) 100%) !important;
  color: #fff !important;
  border-left-color: #6382ff !important;
  font-weight: 600 !important;
}

/* Iconos */
.sidebar-dark .side-menu :not([class*="color-"]) > .list-icon,
.side-menu .list-icon {
  color: rgba(255, 255, 255, .45) !important;
}

.sidebar-dark .side-menu li.active > a .list-icon,
.side-menu > li.current-page > a .list-icon {
  color: rgba(255, 255, 255, .95) !important;
}

.side-menu > li > a:hover .list-icon {
  color: rgba(255, 255, 255, .8) !important;
}

/* ── Separadores / grupos ─────────────────────────────── */
.side-menu li.list-divider {
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  margin: 8px 14px !important;
}

/* ── Contenedor de contenido ──────────────────────────── */
.content-wrapper {
  background: #f0f4f8 !important;
}

/* Ajuste de altura navbar en modo expandido */
@media (min-width: 961px) {
  .sidebar-expand .site-sidebar {
    height: calc(100vh - 95px) !important;
    top: 95px !important;
  }
  .content-wrapper .main-wrapper {
    padding-top: 95px !important;
  }
}

@media (max-width: 960px) {
  .navbar {
    height: 120px !important;
    min-height: 120px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1048 !important;
  }

  .content-wrapper .main-wrapper {
    padding-top: 190px !important;
  }

  .content-wrapper {
    margin-top: 120px !important;
  }

  .dt-account__toggle {
    height: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
  }

  .dt-nav-avatar img {
    width: 46px !important;
    height: 46px !important;
  }

  .dt-nav-avatar--icon {
    font-size: 46px !important;
  }

  .navbar .sidebar-toggle {
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar .sidebar-toggle a {
    height: 120px !important;
    line-height: 120px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ── Sombra sutil en el navbar ── */
.navbar {
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
}