/* =====================================================================
   Expert OC · Tema visual
   Se carga después de Bootstrap y AdminLTE. Solo cambia el aspecto:
   no depende de ningún PHP ni JS de los módulos.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ex-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ex-bg:          #f4f6f9;
  --ex-surface:     #ffffff;
  --ex-surface-2:   #f9fafb;
  --ex-border:      #e5e8ee;
  --ex-border-soft: #eef0f4;
  --ex-text:        #1d2939;
  --ex-text-2:      #475467;
  --ex-muted:       #8a94a6;

  --ex-primary:       #24476b;   /* marino Bissell */
  --ex-primary-hover: #1b3753;
  --ex-primary-soft:  #eaf0f7;
  --ex-brand:         #e31e24;   /* rojo Bissell: solo como acento de marca */

  --ex-success: #1f7a4d;  --ex-success-soft: #e8f5ee;
  --ex-info:    #1d6fa5;  --ex-info-soft:    #e7f2fa;
  --ex-warning: #a15c07;  --ex-warning-soft: #fdf3e2;
  --ex-danger:  #b42318;  --ex-danger-soft:  #fdeceb;
  --ex-neutral: #5d6b82;  --ex-neutral-soft: #eef1f5;

  --ex-radius:    10px;
  --ex-radius-sm: 7px;
  --ex-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --ex-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  /* Bootstrap */
  --bs-body-font-family: var(--ex-font);
  --bs-body-font-size: .875rem;
  --bs-body-color: var(--ex-text);
  --bs-border-color: var(--ex-border);
  --bs-border-radius: var(--ex-radius-sm);
  --bs-border-radius-lg: var(--ex-radius);
  --bs-primary: var(--ex-primary);
  --bs-primary-rgb: 36, 71, 107;
  --bs-link-color: var(--ex-primary);
  --bs-link-color-rgb: 36, 71, 107;
  --bs-link-hover-color: var(--ex-primary-hover);
  --bs-secondary-color: var(--ex-muted);
  --bs-heading-color: var(--ex-text);
}

/* ---------- 2. Base ---------- */
body,
body.bg-body-tertiary,
.app-main {
  font-family: var(--ex-font);
  background-color: var(--ex-bg) !important;
  color: var(--ex-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h4 { font-weight: 600; letter-spacing: -.01em; color: var(--ex-text); }
.app-content h4:first-child { font-size: 1.3rem; }
.text-muted { color: var(--ex-muted) !important; }
a { text-decoration: none; }
.table a:not(.btn):hover { text-decoration: underline; }

.app-content { padding-top: 1.25rem; padding-bottom: 1.5rem; }

/* ---------- 3. Header ---------- */
.app-header {
  background: var(--ex-surface) !important;
  border-bottom: 1px solid var(--ex-border);
  box-shadow: none;
}
.app-header .nav-link { color: var(--ex-text-2); }
.app-header .nav-link:hover { color: var(--ex-primary); }
.app-header .navbar-badge { font-size: .65rem; font-weight: 600; }

/* ---------- 4. Sidebar ---------- */
.app-sidebar,
.app-sidebar.bg-body-secondary {
  background: var(--ex-surface) !important;
  border-right: 1px solid var(--ex-border) !important;
  box-shadow: none !important;
}
.app-sidebar .sidebar-brand { border-bottom: 1px solid var(--ex-border-soft); }
.app-sidebar .sidebar-user-panel .info a {
  color: var(--ex-text-2) !important;
  font-size: .8rem;
  font-weight: 500;
  padding: 0 1rem;
}
.app-sidebar .nav-sidebar .nav-link {
  color: var(--ex-text-2) !important;
  border-radius: var(--ex-radius-sm);
  margin: 1px .5rem;
  padding: .5rem .75rem;
  font-size: .85rem;
  font-weight: 500;
  border-left: 0 !important;
  position: relative;
}
.app-sidebar .nav-sidebar .nav-link { display: flex; align-items: center; gap: .65rem; }
.app-sidebar .nav-sidebar .nav-link > p { flex: 1; display: flex; align-items: center; }
.app-sidebar .nav-sidebar .nav-link .nav-icon { color: var(--ex-muted) !important; width: 1.1rem; text-align: center; margin: 0 !important; }
.app-sidebar .nav-sidebar .nav-link .nav-arrow {
  margin-left: auto;
  font-size: .7rem;
  color: var(--ex-muted);
  transform: rotate(0deg);
}
.app-sidebar .nav-sidebar .nav-item.menu-open > .nav-link .nav-arrow { transform: rotate(-90deg); }
.app-sidebar .nav-sidebar .nav-link:hover {
  background: var(--ex-surface-2) !important;
  color: var(--ex-text) !important;
}
.app-sidebar .nav-sidebar .nav-link.active {
  background: var(--ex-primary-soft) !important;
  color: var(--ex-primary) !important;
  font-weight: 600;
}
.app-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--ex-primary); }
.app-sidebar .nav-sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ex-brand);
}
.app-sidebar .nav-treeview .nav-link { font-weight: 400; font-size: .825rem; }
.app-sidebar .nav-treeview .nav-link .nav-icon { font-size: .45rem !important; }
.app-sidebar .nav-sidebar .nav-link .badge { font-size: .65rem; }

/* ---------- 5. Tarjetas ---------- */
.card {
  --bs-card-bg: var(--ex-surface);
  --bs-card-border-color: var(--ex-border);
  --bs-card-border-radius: var(--ex-radius);
  --bs-card-inner-border-radius: calc(var(--ex-radius) - 1px);
  --bs-card-cap-bg: var(--ex-surface);
  --bs-card-cap-padding-y: .85rem;
  --bs-card-cap-padding-x: 1.1rem;
  --bs-card-spacer-x: 1.1rem;
  border: 1px solid var(--ex-border);
  box-shadow: var(--ex-shadow);
  margin-bottom: 1.25rem;
}
/* Los encabezados de color de AdminLTE pasan a blanco con un punto de color */
.card[class*=card-]:not(.card-outline) > .card-header,
.card[class*=text-bg-]:not(.card-outline) > .card-header,
.card > .card-header {
  background: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  border-bottom: 1px solid var(--ex-border-soft);
}
.card.card-outline { border-top: 1px solid var(--ex-border) !important; }
.card-title { font-size: .95rem; font-weight: 600; color: var(--ex-text); }
.card-title > i:first-child, .card-title > .fas:first-child { color: var(--ex-muted); margin-right: .35rem; }
.card[class*=card-] > .card-header .card-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .55rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background: var(--ex-dot, var(--ex-primary));
}
.card-primary   { --ex-dot: var(--ex-primary); }
.card-info      { --ex-dot: var(--ex-info); }
.card-success   { --ex-dot: var(--ex-success); }
.card-warning   { --ex-dot: #e0a12b; }
.card-danger    { --ex-dot: var(--ex-danger); }
.card-secondary, .card-dark { --ex-dot: var(--ex-neutral); }
.card-footer { background: var(--ex-surface-2); border-top: 1px solid var(--ex-border-soft); }

/* ---------- 6. Tablas ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ex-text);
  --bs-table-border-color: var(--ex-border-soft);
  --bs-table-striped-bg: rgba(16, 24, 40, .018);
  --bs-table-hover-bg: rgba(36, 71, 107, .045);
  margin-bottom: 0;
}
.table > thead > tr > th,
.table > thead th {
  background: var(--ex-surface-2) !important;
  color: var(--ex-muted) !important;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ex-border) !important;
  vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .5rem .65rem; }
.table > tbody > tr > td { vertical-align: middle; }
.table-bordered > :not(caption) > * { border-color: var(--ex-border-soft); }
.table thead.table-dark th, .table thead.thead-dark th, .table-dark > thead > tr > th {
  background: var(--ex-surface-2) !important;
  color: var(--ex-muted) !important;
}

/* ---------- 7. Botones ---------- */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--ex-radius-sm);
  --bs-btn-font-size: .85rem;
  box-shadow: none !important;
}
.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-border-radius: 6px; }
.btn-primary {
  --bs-btn-bg: var(--ex-primary);
  --bs-btn-border-color: var(--ex-primary);
  --bs-btn-hover-bg: var(--ex-primary-hover);
  --bs-btn-hover-border-color: var(--ex-primary-hover);
  --bs-btn-active-bg: var(--ex-primary-hover);
  --bs-btn-active-border-color: var(--ex-primary-hover);
  --bs-btn-disabled-bg: var(--ex-primary);
  --bs-btn-disabled-border-color: var(--ex-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ex-primary);
  --bs-btn-border-color: #c9d5e3;
  --bs-btn-hover-bg: var(--ex-primary-soft);
  --bs-btn-hover-color: var(--ex-primary);
  --bs-btn-hover-border-color: #b7c7da;
  --bs-btn-active-bg: var(--ex-primary-soft);
  --bs-btn-active-color: var(--ex-primary);
}
.btn-secondary, .btn-light, .btn-default {
  --bs-btn-color: var(--ex-text-2);
  --bs-btn-bg: var(--ex-surface);
  --bs-btn-border-color: var(--ex-border);
  --bs-btn-hover-color: var(--ex-text);
  --bs-btn-hover-bg: var(--ex-surface-2);
  --bs-btn-hover-border-color: #d5dae2;
  --bs-btn-active-color: var(--ex-text);
  --bs-btn-active-bg: var(--ex-neutral-soft);
  --bs-btn-active-border-color: #d5dae2;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ex-text-2);
  --bs-btn-border-color: var(--ex-border);
  --bs-btn-hover-color: var(--ex-text);
  --bs-btn-hover-bg: var(--ex-surface-2);
  --bs-btn-hover-border-color: #d5dae2;
}
.btn-success {
  --bs-btn-bg: var(--ex-success); --bs-btn-border-color: var(--ex-success);
  --bs-btn-hover-bg: #186240; --bs-btn-hover-border-color: #186240;
  --bs-btn-active-bg: #186240; --bs-btn-active-border-color: #186240;
}
.btn-danger {
  --bs-btn-bg: var(--ex-danger); --bs-btn-border-color: var(--ex-danger);
  --bs-btn-hover-bg: #921c13; --bs-btn-hover-border-color: #921c13;
  --bs-btn-active-bg: #921c13; --bs-btn-active-border-color: #921c13;
}
.btn-warning {
  --bs-btn-color: #5c3a06; --bs-btn-bg: #f6d18b; --bs-btn-border-color: #f6d18b;
  --bs-btn-hover-color: #5c3a06; --bs-btn-hover-bg: #f2c46c; --bs-btn-hover-border-color: #f2c46c;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: var(--ex-info); --bs-btn-border-color: var(--ex-info);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #175a86; --bs-btn-hover-border-color: #175a86;
}

/* Botón de icono discreto (acciones dentro de tablas) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ex-muted);
  transition: background .15s, color .15s;
}
.btn-icon:hover, .btn-icon:focus-visible { background: var(--ex-primary-soft); color: var(--ex-primary); }

/* ---------- 8. Formularios ---------- */
.form-control, .form-select {
  border-color: var(--ex-border);
  border-radius: var(--ex-radius-sm);
  color: var(--ex-text);
  font-size: .875rem;
}
.form-control-sm, .form-select-sm { font-size: .8rem; border-radius: 6px; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #8fa7c2;
  box-shadow: 0 0 0 3px rgba(36, 71, 107, .12);
}
.form-control[readonly] { background-color: var(--ex-surface-2); }
.form-label, label { font-weight: 500; color: var(--ex-text-2); font-size: .8rem; }
.form-check-label { font-weight: 400; font-size: .875rem; color: var(--ex-text); }
.form-text { color: var(--ex-muted); font-size: .775rem; }
.form-check-input:checked { background-color: var(--ex-primary); border-color: var(--ex-primary); }
.input-group-text { background: var(--ex-surface-2); border-color: var(--ex-border); color: var(--ex-muted); }

/* ---------- 9. Etiquetas (badges) en tono suave ---------- */
.badge {
  font-weight: 600;
  font-size: .7rem;
  padding: .35em .65em;
  border-radius: 999px;
  letter-spacing: .01em;
}
.badge.bg-success,   .badge.text-bg-success   { background: var(--ex-success-soft) !important; color: var(--ex-success) !important; }
.badge.bg-info,      .badge.text-bg-info      { background: var(--ex-info-soft)    !important; color: var(--ex-info)    !important; }
.badge.bg-primary,   .badge.text-bg-primary   { background: var(--ex-primary-soft) !important; color: var(--ex-primary) !important; }
.badge.bg-warning,   .badge.text-bg-warning   { background: var(--ex-warning-soft) !important; color: var(--ex-warning) !important; }
.badge.bg-danger,    .badge.text-bg-danger    { background: var(--ex-danger-soft)  !important; color: var(--ex-danger)  !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-dark,      .badge.text-bg-dark,
.badge.bg-light,     .badge.text-bg-light     { background: var(--ex-neutral-soft) !important; color: var(--ex-neutral) !important; }
/* Contadores (campana y menú) se quedan sólidos para que se noten */
.navbar-badge.badge.text-bg-danger,
.navbar-badge.badge.bg-danger,
.nav-sidebar .badge.bg-danger { background: var(--ex-brand) !important; color: #fff !important; }

/* ---------- 10. Alertas ---------- */
.alert {
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--ex-radius-sm);
  font-size: .85rem;
}
.alert-success { background: var(--ex-success-soft); border-color: #cfe9da; border-left-color: var(--ex-success); color: #17583a; }
.alert-info    { background: var(--ex-info-soft);    border-color: #cfe3f2; border-left-color: var(--ex-info);    color: #164e74; }
.alert-warning { background: var(--ex-warning-soft); border-color: #f5e0b8; border-left-color: #d38a12;          color: #6e4207; }
.alert-danger  { background: var(--ex-danger-soft);  border-color: #f6d3d0; border-left-color: var(--ex-danger);  color: #8a1b12; }
.alert-secondary, .alert-light { background: var(--ex-neutral-soft); border-color: var(--ex-border); border-left-color: var(--ex-neutral); color: var(--ex-text-2); }

/* ---------- 11. Indicadores (small-box de AdminLTE) como tarjetas blancas ---------- */
.app-content .small-box,
.app-content .small-box[class*=bg-],
.app-content .small-box[class*=text-bg-] {
  background: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius);
  box-shadow: var(--ex-shadow);
  overflow: hidden;
  height: auto;
  min-height: 0;
}
.app-content .small-box .inner { padding: 1rem 1.1rem; }
.app-content .small-box .inner h3 {
  font-size: 1.75rem !important;
  font-weight: 600;
  margin: 0 0 .15rem 0;
  color: var(--ex-text);
}
.app-content .small-box .inner p { font-size: .8rem; color: var(--ex-muted); margin: 0; }
.app-content .small-box .icon,
.app-content .small-box .small-box-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem !important;
  opacity: 1 !important;
  background: var(--ex-sb-soft, var(--ex-primary-soft));
  color: var(--ex-sb, var(--ex-primary)) !important;
  transform: none !important;
}
.app-content .small-box .icon > i { font-size: 1rem !important; }
.app-content .small-box .small-box-footer {
  background: var(--ex-surface-2) !important;
  color: var(--ex-text-2) !important;
  border-top: 1px solid var(--ex-border-soft);
}
.app-content .small-box.bg-info,    .app-content .small-box.text-bg-info    { --ex-sb: var(--ex-info);    --ex-sb-soft: var(--ex-info-soft); }
.app-content .small-box.bg-success, .app-content .small-box.text-bg-success { --ex-sb: var(--ex-success); --ex-sb-soft: var(--ex-success-soft); }
.app-content .small-box.bg-warning, .app-content .small-box.text-bg-warning { --ex-sb: var(--ex-warning); --ex-sb-soft: var(--ex-warning-soft); }
.app-content .small-box.bg-danger,  .app-content .small-box.text-bg-danger  { --ex-sb: var(--ex-danger);  --ex-sb-soft: var(--ex-danger-soft); }
.app-content .small-box.bg-secondary, .app-content .small-box.text-bg-secondary { --ex-sb: var(--ex-neutral); --ex-sb-soft: var(--ex-neutral-soft); }

/* ---------- 12. Modales, menús desplegables, paginación, pestañas ---------- */
.modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: var(--ex-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--ex-border-soft); padding: 1rem 1.25rem; }
.modal-header.bg-primary, .modal-header.bg-info, .modal-header.bg-success,
.modal-header.bg-warning, .modal-header.bg-danger, .modal-header.bg-dark {
  background: var(--ex-surface) !important;
  color: var(--ex-text) !important;
}
.modal-header.bg-primary .close, .modal-header .close.text-white { color: var(--ex-muted) !important; }
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--ex-border-soft); background: var(--ex-surface-2); border-radius: 0 0 12px 12px; }

.dropdown-menu {
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius);
  box-shadow: var(--ex-shadow-lg);
  font-size: .85rem;
}
.dropdown-item { border-radius: 6px; }
.dropdown-menu { padding: .35rem; }

.page-link { color: var(--ex-primary); border-color: var(--ex-border); }
.page-item.active .page-link { background: var(--ex-primary); border-color: var(--ex-primary); }

.nav-tabs { border-bottom-color: var(--ex-border); }
.nav-tabs .nav-link { color: var(--ex-text-2); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--ex-primary); border-bottom-color: var(--ex-primary); background: transparent; font-weight: 600; }
.nav-pills:not(.nav-sidebar) .nav-link.active { background: var(--ex-primary); }

/* ---------- 13. Footer ---------- */
.app-footer {
  background: transparent;
  border-top: 1px solid var(--ex-border);
  color: var(--ex-muted);
  font-size: .8rem;
}

/* ---------- 14. SweetAlert2 ---------- */
.swal2-popup { border-radius: 14px !important; font-family: var(--ex-font) !important; }
.swal2-styled.swal2-confirm { background-color: var(--ex-primary) !important; border-radius: var(--ex-radius-sm) !important; }
.swal2-styled.swal2-cancel  { border-radius: var(--ex-radius-sm) !important; }

/* =====================================================================
   Componentes propios (ex-*) para las pantallas rediseñadas
   ===================================================================== */

/* Encabezado de página */
.ex-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ex-page-header h4, .ex-page-title { margin: 0; font-size: 1.3rem; font-weight: 600; }
.ex-page-subtitle { margin: .2rem 0 0; color: var(--ex-muted); font-size: .85rem; max-width: 70ch; }

/* Indicadores */
.ex-stat {
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius);
  box-shadow: var(--ex-shadow);
  padding: 1rem 1.1rem;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.ex-stat-label { color: var(--ex-muted); font-size: .78rem; font-weight: 500; }
.ex-stat-value { font-size: 1.65rem; font-weight: 600; line-height: 1.15; margin-top: .25rem; color: var(--ex-text); font-variant-numeric: tabular-nums; }
.ex-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  background: var(--ex-primary-soft);
  color: var(--ex-primary);
}
.ex-stat-icon.is-success { background: var(--ex-success-soft); color: var(--ex-success); }
.ex-stat-icon.is-warning { background: var(--ex-warning-soft); color: var(--ex-warning); }
.ex-stat-icon.is-danger  { background: var(--ex-danger-soft);  color: var(--ex-danger); }
.ex-stat-icon.is-neutral { background: var(--ex-neutral-soft); color: var(--ex-neutral); }

/* Estado con punto */
.ex-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ex-text-2);
  white-space: nowrap;
}
.ex-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ex-neutral);
}
.ex-status.is-success::before { background: #2fa36b; }
.ex-status.is-warning::before { background: #e0a12b; }
.ex-status.is-danger::before  { background: #d9483b; }
.ex-status.is-neutral::before { background: #b3bccb; }

/* Píldora discreta (etiquetas del encabezado) */
.ex-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--ex-border);
  background: var(--ex-surface);
  color: var(--ex-text-2);
  font-size: .75rem;
  font-weight: 500;
}
.ex-pill .ex-dot { width: 7px; height: 7px; border-radius: 50%; background: #b3bccb; }
.ex-pill .ex-dot.is-on   { background: #2fa36b; }
.ex-pill .ex-dot.is-warn { background: #e0a12b; }

/* Barra de herramientas dentro de una tarjeta */
.ex-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--ex-border-soft);
}
.ex-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ex-search > i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ex-muted);
  font-size: .8rem;
  pointer-events: none;
}
.ex-search .form-control { padding-left: 2.1rem; }

/* Grupo de filtros segmentado */
.ex-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--ex-neutral-soft);
  gap: 2px;
}
.ex-segmented button {
  border: 0;
  background: transparent;
  color: var(--ex-text-2);
  font-size: .78rem;
  font-weight: 500;
  padding: .3rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.ex-segmented button:hover { color: var(--ex-text); }
.ex-segmented button.active { background: var(--ex-surface); color: var(--ex-text); box-shadow: var(--ex-shadow); }
.ex-segmented .ex-count { color: var(--ex-muted); font-weight: 400; margin-left: .2rem; }

/* Tabla con encabezado fijo dentro de la tarjeta */
.ex-table-scroll { max-height: calc(100vh - 330px); overflow: auto; }
.ex-table-scroll thead th { position: sticky; top: 0; z-index: 2; }
.ex-cell-main { font-weight: 500; color: var(--ex-text); }
.ex-cell-sub  { font-size: .76rem; color: var(--ex-muted); margin-top: 1px; }
.ex-empty { padding: 2.25rem 1rem; text-align: center; color: var(--ex-muted); font-size: .85rem; }
.ex-empty i { display: block; font-size: 1.4rem; margin-bottom: .5rem; color: #c4cbd6; }

/* Aviso con borde lateral */
.ex-callout {
  display: flex;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border: 1px solid #f3dfb9;
  border-left: 3px solid #e0a12b;
  border-radius: var(--ex-radius-sm);
  background: #fffaf0;
  margin-bottom: 1.25rem;
}
.ex-callout > i { color: #c98611; margin-top: .15rem; }
.ex-callout-title { font-weight: 600; font-size: .875rem; color: #6e4207; }
.ex-callout ul { margin: .4rem 0 0; padding-left: 1rem; font-size: .825rem; color: var(--ex-text-2); }

/* Lista de ajustes (interruptores) */
.ex-setting { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ex-border-soft); }
.ex-setting:first-child { padding-top: 0; }
.ex-setting:last-of-type { border-bottom: 0; }
.ex-setting-title { font-weight: 500; font-size: .875rem; }
.ex-setting-desc { color: var(--ex-muted); font-size: .775rem; margin-top: .15rem; }
.ex-setting .form-switch { padding-left: 2.5em; margin: 0; }
.ex-setting .form-switch .form-check-input { width: 2.25em; height: 1.25em; margin-left: -2.5em; cursor: pointer; }

/* Avatar con iniciales */
.ex-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ex-primary-soft);
  color: var(--ex-primary);
  font-size: .7rem;
  font-weight: 600;
}
.ex-person { display: flex; align-items: center; gap: .6rem; }

/* Código / ID en tablas */
.ex-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  background: var(--ex-neutral-soft);
  color: var(--ex-text-2);
  padding: .1rem .4rem;
  border-radius: 5px;
}

/* Texto largo en una línea, completo en el tooltip */
.ex-truncate { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-person .ex-cell-main { white-space: nowrap; }

/* =====================================================================
   Acciones dentro de tablas: botones suaves y compactos
   (aplica a todos los módulos sin tocar su HTML)
   ===================================================================== */
.table td .btn:where(:not(.btn-link, .btn-tool, .btn-icon)) {
  --bs-btn-padding-y: .22rem;
  --bs-btn-padding-x: .55rem;
  --bs-btn-font-size: .76rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 6px;
  --bs-btn-border-width: 0;
  --bs-btn-color: var(--ex-text-2);
  --bs-btn-bg: var(--ex-neutral-soft);
  --bs-btn-hover-color: var(--ex-text);
  --bs-btn-hover-bg: #e3e7ee;
  --bs-btn-active-color: var(--ex-text);
  --bs-btn-active-bg: #dde2ea;
  line-height: 1.35;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.table td .btn:where(:not(.btn-link, .btn-tool, .btn-icon)) i { font-size: .72rem; }
.table td .btn-primary, .table td .btn-outline-primary {
  --bs-btn-color: var(--ex-primary);      --bs-btn-bg: var(--ex-primary-soft);
  --bs-btn-hover-color: var(--ex-primary); --bs-btn-hover-bg: #dbe5f1;
  --bs-btn-active-color: var(--ex-primary); --bs-btn-active-bg: #d0dcec;
}
.table td .btn-success, .table td .btn-outline-success {
  --bs-btn-color: var(--ex-success);      --bs-btn-bg: var(--ex-success-soft);
  --bs-btn-hover-color: var(--ex-success); --bs-btn-hover-bg: #d6eee1;
  --bs-btn-active-color: var(--ex-success); --bs-btn-active-bg: #c9e8d7;
}
.table td .btn-danger, .table td .btn-outline-danger {
  --bs-btn-color: var(--ex-danger);       --bs-btn-bg: var(--ex-danger-soft);
  --bs-btn-hover-color: var(--ex-danger);  --bs-btn-hover-bg: #fadad7;
  --bs-btn-active-color: var(--ex-danger); --bs-btn-active-bg: #f7cdc9;
}
.table td .btn-warning, .table td .btn-outline-warning {
  --bs-btn-color: var(--ex-warning);      --bs-btn-bg: var(--ex-warning-soft);
  --bs-btn-hover-color: var(--ex-warning); --bs-btn-hover-bg: #fbe8c6;
  --bs-btn-active-color: var(--ex-warning); --bs-btn-active-bg: #f8dfb2;
}
.table td .btn-info, .table td .btn-outline-info {
  --bs-btn-color: var(--ex-info);         --bs-btn-bg: var(--ex-info-soft);
  --bs-btn-hover-color: var(--ex-info);    --bs-btn-hover-bg: #d6e9f5;
  --bs-btn-active-color: var(--ex-info);   --bs-btn-active-bg: #c9e1f1;
}

/* La celda de acciones no se parte en renglones; los botones van en línea */
.table td:has(> .btn, > form > .btn, > .btn-group, > form > .btn-group, > .d-inline > .btn, > .btn-icon, > form > .btn-icon) { white-space: nowrap; }
.table td > .btn + .btn,
.table td > .btn + form,
.table td > form + .btn,
.table td > form + form,
.table td > .d-inline + .d-inline { margin-left: .25rem; }
.table td form.d-inline, .table td form.form-inline:not(:has(input[type=text], textarea, select)) { display: inline; }

/* Grupos de botones (ej. Autorizar / Rechazar) separados y sin esquinas pegadas */
.table td .btn-group { gap: .25rem; }
.table td .btn-group > .btn { border-radius: 6px !important; margin-left: 0 !important; }

/* =====================================================================
   Encabezados de tabla fijos: la lista se desplaza dentro de su tarjeta
   ===================================================================== */
.app-content .table-responsive:not(.modal .table-responsive) {
  max-height: calc(100vh - 230px);
  overflow: auto;
}
.app-content .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--ex-border);
}
.table-responsive { scrollbar-width: thin; scrollbar-color: #cdd3dd transparent; }
.table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cdd3dd; border-radius: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table td > .btn-icon + .btn-icon,
.table td > .btn-icon + form,
.table td > form + .btn-icon { margin-left: .1rem; }

/* =====================================================================
   Login
   ===================================================================== */
body.login-page, body.ex-login-body {
  display: block !important;
  min-height: 100vh;
  background: var(--ex-bg) !important;
  font-family: var(--ex-font);
}
.ex-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.ex-login-shell {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--ex-surface);
  border: 1px solid var(--ex-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .10);
  overflow: hidden;
}
.ex-login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.75rem 2.5rem;
  color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 45%),
    linear-gradient(160deg, #2b5580 0%, #1b3753 100%);
}
.ex-login-brand::after {
  content: "";
  position: absolute;
  left: 2.5rem;
  top: 0;
  width: 44px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--ex-brand);
}
.ex-login-brand-tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: .9rem;
}
.ex-login-brand h1 {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .75rem;
  letter-spacing: -.02em;
}
.ex-login-brand p { color: rgba(255, 255, 255, .78); font-size: .95rem; margin: 0; max-width: 32ch; }
.ex-login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ex-login-points li { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .88); font-size: .85rem; }
.ex-login-points i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  font-size: .8rem;
}
.ex-login-panel { padding: 2.5rem 2.75rem 1.75rem; display: flex; flex-direction: column; }
.ex-login-logo { height: 56px; width: auto; align-self: flex-start; margin-bottom: 1.75rem; }
.ex-login-title { font-size: 1.35rem; font-weight: 600; margin: 0 0 .3rem; }
.ex-login-subtitle { color: var(--ex-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.ex-login-field { position: relative; }
.ex-login-field > i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ex-muted);
  font-size: .85rem;
  pointer-events: none;
}
.ex-login-field .form-control { height: 44px; padding-left: 2.4rem; padding-right: 2.6rem; }
.ex-login-eye {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ex-muted);
}
.ex-login-eye:hover { color: var(--ex-primary); background: var(--ex-primary-soft); }
.ex-login-submit { height: 44px; font-weight: 600; }
.ex-login-link { color: var(--ex-muted); font-size: .85rem; }
.ex-login-link:hover { color: var(--ex-primary); }
.ex-login-footer { margin-top: auto; padding-top: 2rem; text-align: center; color: var(--ex-muted); font-size: .75rem; }

@media (max-width: 767.98px) {
  .ex-login-shell { grid-template-columns: 1fr; max-width: 420px; }
  .ex-login-brand { display: none; }
  .ex-login-panel { padding: 2rem 1.5rem 1.5rem; }
}

/* Marca Expert-TI (pie de página y login) */
.ex-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ex-muted);
  font-size: .75rem;
  text-decoration: none;
}
.ex-footer-brand img { height: 24px; width: auto; opacity: .85; transition: opacity .15s; }
.ex-footer-brand:hover { color: var(--ex-text-2); }
.ex-footer-brand:hover img { opacity: 1; }
.ex-login-brand-logo { height: 38px; width: auto; display: block; margin-bottom: 1.75rem; }
.ex-login-brand-credit {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .65);
  font-size: .78rem;
}
.ex-login-brand-credit strong { color: #fff; font-weight: 600; }
a.ex-login-brand-credit { display: block; text-decoration: none; }
a.ex-login-brand-credit:hover { color: rgba(255, 255, 255, .9); }