/* ============================================================
   ActivoMás — Design System v1.0
   site.dist.css

   Override layer on top of Sneat core.dist.css + demo.css.
   Loads last → highest specificity without touching vendor files.

   Objetivos
   ─────────
   • Interfaz minimalista, moderna y premium (referencia: Fintual)
   • 100 % paleta de marca existente (#004b97, #0D9394, #FFAB1D,
     #EB3D63, #2092EC)
   • 100 % funcionalidad conservada
   • Tipografía Public Sans (ya cargada) con jerarquía clara
   • Espaciado consistente y generoso
   • Botones, cards, forms, tablas, modales y estados rediseñados
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   0  DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Paleta de marca — evolución celeste/azul (rediseño 2026-08):
     el azul corporativo se mantiene; hover más vivo y rellenos celestes */
  --am-blue:         #004b97;
  --am-blue-hover:   #0f62b5;
  --am-blue-active:  #003166;
  --am-blue-subtle:  #e7f1fd;
  --am-blue-light:   #e7f1fd;
  --am-blue-mid:     rgba(32, 146, 236, 0.20);
  --am-teal:         #0D9394;
  --am-amber:        #FFAB1D;
  --am-red:          #EB3D63;
  --am-sky:          #2092EC;
  --am-sky-100:      #cfe5fb;
  --am-sky-50:       #e7f1fd;
  --am-ok:           #149a52;
  --am-ok-bg:        #e3f6ec;
  --am-warn:         #df8a00;
  --am-warn-bg:      #fdf1da;
  --am-bad:          #df3d63;
  --am-bad-bg:       #fde8ee;

  /* Cabeceras de tabla (celeste) */
  --am-head:         #e7f1fd;
  --am-head-text:    #2e6094;
  --am-row-hover:    #f6fafe;

  /* Forzar color primario antes de que cargue el JS customizer */
  --bs-primary:            #004b97;
  --bs-primary-rgb:        0, 75, 151;
  --bs-primary-text-emphasis: #00254c;
  --bs-primary-bg-subtle:  #e7f1fd;
  --bs-primary-border-subtle: #cfe4f9;
  --bs-link-color:         #004b97;
  --bs-link-hover-color:   #0f62b5;

  /* Superficies — fondo blanco azulado en vez de gris */
  --am-surface:      #ffffff;
  --am-surface-alt:  #eef4fb;
  --am-surface-hover:#e9f2fc;

  /* Bordes con tinte azul */
  --am-border:       rgba(13, 60, 110, 0.09);
  --am-border-mid:   rgba(13, 60, 110, 0.13);
  --am-border-strong:rgba(13, 60, 110, 0.18);

  /* Texto (gris azulado) */
  --am-text-1: #0f172a;   /* headings */
  --am-text-2: #33475e;   /* body */
  --am-text-3: #64778c;   /* muted */
  --am-text-4: #93a5b8;   /* placeholder / disabled */

  /* Escala de radios */
  --am-radius-xs: 4px;
  --am-radius-sm: 6px;
  --am-radius:    10px;
  --am-radius-lg: 14px;
  --am-radius-xl: 22px;

  /* Sombras con tinte azul */
  --am-shadow-xs: 0 1px 2px rgba(15,43,80,0.05);
  --am-shadow-sm: 0 1px 2px rgba(15,43,80,0.05), 0 4px 14px rgba(15,43,80,0.05);
  --am-shadow:    0 2px 10px rgba(15,43,80,0.07);
  --am-shadow-lg: 0 8px 28px rgba(15,43,80,0.10), 0 2px 8px rgba(15,43,80,0.05);

  /* Tipografía */
  --am-font: 'Public Sans', system-ui, -apple-system, sans-serif;
  --am-fw-normal: 400;
  --am-fw-medium: 500;
  --am-fw-semi:   600;
  --am-fw-bold:   700;
  --am-lh-tight:  1.25;
  --am-lh-snug:   1.4;
  --am-lh-normal: 1.6;

  /* Layout */
  --am-navbar-h:      60px;
  --am-content-px:    1.75rem;
}

/* Tokens en modo oscuro (azulados, coherentes con el rediseño celeste) */
[data-bs-theme="dark"] {
  --am-surface:       #141f30;
  --am-surface-alt:   #0d1522;
  --am-surface-hover: rgba(78, 163, 239, 0.07);
  --am-border:        rgba(140, 185, 235, 0.09);
  --am-border-mid:    rgba(140, 185, 235, 0.13);
  --am-border-strong: rgba(140, 185, 235, 0.18);
  --am-text-1:        #eef3fa;
  --am-text-2:        #c3d0e0;
  --am-text-3:        #8298b3;
  --am-text-4:        #536b88;
  --am-blue-subtle:   rgba(32, 146, 236, 0.14);
  --am-blue-light:    rgba(32, 146, 236, 0.12);
  --am-blue-mid:      rgba(32, 146, 236, 0.22);
  --am-sky-100:       rgba(32, 146, 236, 0.22);
  --am-sky-50:        rgba(32, 146, 236, 0.12);
  --am-ok-bg:         rgba(20, 154, 82, 0.16);
  --am-warn-bg:       rgba(223, 138, 0, 0.16);
  --am-bad-bg:        rgba(223, 61, 99, 0.16);
  --am-head:          #16233a;
  --am-head-text:     #7fa5cc;
  --am-row-hover:     rgba(32, 146, 236, 0.06);
}


/* ─────────────────────────────────────────────────────────────
   1  BASE / TIPOGRAFÍA
   ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--am-font);
  font-size: 0.9375rem;   /* 15 px — más legible que el 14 px de Sneat */
  line-height: var(--am-lh-normal);
  color: var(--am-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Jerarquía de encabezados */
h1, .h1 {
  font-size: 1.875rem;
  font-weight: var(--am-fw-bold);
  line-height: var(--am-lh-tight);
  color: var(--am-text-1);
  letter-spacing: -0.025em;
}
h2, .h2 {
  font-size: 1.5rem;
  font-weight: var(--am-fw-semi);
  line-height: var(--am-lh-tight);
  color: var(--am-text-1);
  letter-spacing: -0.02em;
}
h3, .h3 {
  font-size: 1.25rem;
  font-weight: var(--am-fw-semi);
  line-height: var(--am-lh-snug);
  color: var(--am-text-1);
  letter-spacing: -0.015em;
}
h4, .h4 {
  font-size: 1.0625rem;
  font-weight: var(--am-fw-semi);
  line-height: var(--am-lh-snug);
  color: var(--am-text-1);
  letter-spacing: -0.01em;
}
h5, .h5 {
  font-size: 0.9375rem;
  font-weight: var(--am-fw-semi);
  line-height: var(--am-lh-snug);
  color: var(--am-text-1);
}
h6, .h6 {
  font-size: 0.8125rem;
  font-weight: var(--am-fw-medium);
  line-height: var(--am-lh-snug);
  color: var(--am-text-1);
  letter-spacing: 0.005em;
}

/* Utilidades de texto */
.text-muted,
.text-body-secondary {
  color: var(--am-text-3) !important;
}

small, .small {
  font-size: 0.8125rem;
}

/* KPI / valores importantes */
.am-kpi-value {
  font-size: 1.75rem;
  font-weight: var(--am-fw-bold);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--am-text-1);
}

/* Labels de campo */
.am-label {
  font-size: 0.75rem;
  font-weight: var(--am-fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--am-text-3);
}

/* Enlace */
a { color: var(--am-blue); }
a:hover { color: var(--am-blue-hover); }


/* ─────────────────────────────────────────────────────────────
   2  LAYOUT GENERAL
   ───────────────────────────────────────────────────────────── */

/* Fondo de la zona de contenido */
.layout-page,
.content-wrapper {
  background-color: var(--am-surface-alt) !important;
}

/* Padding del contenido */
.container-p-y {
  padding-top:    var(--am-content-px) !important;
  padding-bottom: var(--am-content-px) !important;
}

/* ─── Sidebar ──────────────────────────────────────────────── */
#layout-menu {
  background: var(--am-surface) !important;
  border-right: 1px solid var(--am-border) !important;
  box-shadow: none !important;
}

/* Marca en sidebar */
.menu .app-brand.demo {
  border-bottom: 1px solid var(--am-border);
  margin-bottom: 0.25rem;
}

/* Grupo de menú */
.menu-inner .menu-header {
  margin-top: 1.375rem;
  margin-bottom: 0.25rem;
  padding: 0 1.25rem;
}

.menu-inner .menu-header .menu-header-text {
  font-size: 0.6875rem !important;
  font-weight: var(--am-fw-semi) !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--am-text-4) !important;
}

/* Ítem de menú */
.menu-vertical .menu-link {
  border-radius: var(--am-radius-sm) !important;
  margin: 1px 0.75rem;
  /*padding: 0.5625rem 0.875rem !important;*/
  font-size: 0.875rem !important;
  font-weight: var(--am-fw-medium) !important;
  color: var(--am-text-3) !important;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.menu-vertical .menu-link:hover {
  background-color: var(--am-surface-hover) !important;
  color: var(--am-text-1) !important;
}

/* Ítem activo: pastilla celeste + barrita indicadora al borde izquierdo */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item.active > .menu-link:hover {
  background-color: var(--am-blue-light) !important;
  color: var(--am-blue) !important;
  font-weight: var(--am-fw-semi) !important;
  position: relative;
}
.menu-vertical .menu-item.active > .menu-link::before {
  content: "";
  position: absolute;
  left: -0.5rem;                /* compensa el margin lateral del link (capa Attio: 0 .5rem) */
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--am-sky);
}
/* En ítems con submenú abierto la pastilla completa iría sobre el toggle;
   la barrita basta para marcar dónde estás sin un bloque pesado */
.menu-vertical .menu-item.active.open > .menu-toggle::before { display: none; }

/* Ícono del menú */
.menu-vertical .menu-icon {
  color: inherit !important;
  margin-right: 0.625rem;
  font-size: 1.125rem;
  opacity: 0.65;
  flex-shrink: 0;
}

.menu-vertical .menu-item.active > .menu-link .menu-icon {
  opacity: 1;
}

/* Submenú */
.menu-vertical .menu-sub .menu-link {
  font-size: 0.84rem !important;
  padding: 0.4375rem 0.875rem 0.4375rem 2.625rem !important;
}

.menu-vertical .menu-sub .menu-item.active > .menu-link {
  background-color: var(--am-blue-light) !important;
  color: var(--am-blue) !important;
}

/* ─── Navbar ───────────────────────────────────────────────── */
.layout-navbar {
  min-height: var(--am-navbar-h) !important;
  background-color: var(--am-surface) !important;
  border-bottom: 1px solid var(--am-border) !important;
  box-shadow: none !important;
}

/* Navbar detached (variante flotante del layout actual)
   NOTA: no sobreescribir width/margin-inline — Sneat calcula el
   inline-size según el estado del menú (expandido/colapsado) y
   con position:fixed un width % se resuelve contra el viewport. */
.layout-navbar.navbar-detached {
  border-radius: var(--am-radius-lg) !important;
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-shadow-sm) !important;
}

.layout-navbar .nav-link {
  color: var(--am-text-3);
  border-radius: var(--am-radius-sm);
  padding: 0.5rem !important;
  transition: color 0.14s, background-color 0.14s;
}

.layout-navbar .nav-link:hover {
  color: var(--am-text-1);
  background-color: var(--am-surface-alt);
}

.layout-navbar .dropdown-toggle.hide-arrow::after { display: none !important; }

/* Avatar del usuario en navbar */
.layout-navbar .avatar {
  width: 34px !important;
  height: 34px !important;
}


/* ─────────────────────────────────────────────────────────────
   3  CARDS
   ───────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-lg) !important;
  box-shadow: var(--am-shadow-sm) !important;
  background-color: var(--am-surface) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--am-border) !important;
  padding: 1.125rem 1.5rem !important;
}

.card-header h5, .card-header .h5,
.card-header h6, .card-header .h6 {
  margin-bottom: 0;
}

.card-body {
  padding: 1.5rem !important;
}

.card-header + .card-body {
  padding-top: 1.25rem !important;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--am-border) !important;
  padding: 1rem 1.5rem !important;
}

/* Card con datatable integrado */
.card-datatable {
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--am-radius-lg);
}

.card-datatable.table-responsive {
  overflow: auto;
}

/* Dominio cards (homepage - "Próximos dominios") */
.border.rounded.p-4 {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-color: var(--am-surface);
}

.border.rounded.p-4:hover {
  border-color: var(--am-border-mid) !important;
  box-shadow: var(--am-shadow-sm);
}

/* Metric card (dashboard) */
.card.metric-card {
  border: 1px solid var(--am-border) !important;
  box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────────────
   4  BOTONES
   ───────────────────────────────────────────────────────────── */
.btn {
  font-size: 0.875rem !important;
  font-weight: var(--am-fw-medium) !important;
  border-radius: var(--am-radius-sm) !important;
  padding: 0.5rem 1rem !important;
  border-width: 1px !important;
  box-shadow: none !important;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease,
              transform 0.1s ease;
  line-height: 1.5;
}

/* Primary — acción principal (con sombra sutil para que destaque del fondo) */
.btn-primary {
  background-color: var(--am-blue)  !important;
  border-color:     var(--am-blue)  !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 75, 151, 0.18) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--am-blue-hover) !important;
  border-color:     var(--am-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 75, 151, 0.22) !important;
}
.btn-primary:active {
  background-color: var(--am-blue-active) !important;
  transform: translateY(0);
  box-shadow: none !important;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 75, 151, 0.28) !important;
}

/* Outline secondary — acción cancel / secundaria */
.btn-outline-secondary {
  color:            var(--am-text-3)       !important;
  border-color:     var(--am-border-strong)!important;
  background-color: transparent            !important;
}
.btn-outline-secondary:hover {
  color:            var(--am-text-1)       !important;
  background-color: var(--am-surface-alt)  !important;
  border-color:     var(--am-border-strong)!important;
  transform: translateY(-1px);
}
.btn-outline-secondary:active { transform: translateY(0); }

/* Outline primary */
.btn-outline-primary {
  color:            var(--am-blue)         !important;
  border-color:     var(--am-blue)         !important;
  background-color: transparent            !important;
}
.btn-outline-primary:hover {
  background-color: var(--am-blue-subtle)  !important;
  transform: translateY(-1px);
}
.btn-outline-primary:active { transform: translateY(0); }

/* Label buttons (variante sutil) */
.btn-label-primary {
  background-color: var(--am-blue-subtle) !important;
  color:            var(--am-blue)        !important;
  border-color:     transparent           !important;
}
.btn-label-primary:hover {
  background-color: var(--am-blue)  !important;
  color: #fff !important;
}

.btn-label-success {
  background-color: rgba(13,147,148,0.1) !important;
  color: var(--am-teal)                  !important;
  border-color: transparent              !important;
}
.btn-label-danger {
  background-color: rgba(235,61,99,0.1)  !important;
  color: var(--am-red)                   !important;
  border-color: transparent              !important;
}
.btn-label-warning {
  background-color: rgba(255,171,29,0.12)!important;
  color: #a87000                         !important;
  border-color: transparent              !important;
}

/* Danger */
.btn-danger {
  background-color: var(--am-red) !important;
  border-color:     var(--am-red) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #c52d51 !important;
  border-color:     #c52d51 !important;
  transform: translateY(-1px);
}

/* Botón solo ícono */
.btn-icon {
  width: 36px   !important;
  height: 36px  !important;
  padding: 0    !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.btn-icon > i {
  font-size: 1.125rem !important;
  line-height: 1 !important;
}
.btn-lg.btn-icon { width: 44px !important; height: 44px !important; }

/* Tamaños */
.btn-sm {
  padding: 0.3125rem 0.75rem !important;
  font-size: 0.8125rem !important;
}
.btn-lg {
  padding: 0.6875rem 1.375rem !important;
  font-size: 1rem !important;
}

/* Botón de ancho completo */
.btn.d-grid, .btn.w-100.d-grid {
  border-radius: var(--am-radius) !important;
  padding: 0.625rem 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: var(--am-fw-semi) !important;
}

/* Estado deshabilitado */
.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  transform: none !important;
  box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────────────
   5  FORMULARIOS
   ───────────────────────────────────────────────────────────── */

/* Labels */
.form-label {
  font-size: 0.8125rem !important;
  font-weight: var(--am-fw-medium) !important;
  color: var(--am-text-2) !important;
  margin-bottom: 0.375rem !important;
}

/* Inputs y selects */
.form-control,
.form-select {
  font-size: 0.9rem !important;
  color: var(--am-text-1) !important;
  background-color: var(--am-surface) !important;
  border: 1px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-sm) !important;
  padding: 0.5rem 0.875rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
  line-height: 1.5;
}

.form-control:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid),
.form-select:hover:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid) {
  border-color: rgba(0,75,151,0.35) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--am-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,75,151,0.13) !important;
  background-color: var(--am-surface) !important;
}

.form-control::placeholder {
  color: var(--am-text-4) !important;
  font-size: 0.875rem;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--am-surface-alt) !important;
  border-color: var(--am-border) !important;
  color: var(--am-text-3) !important;
  cursor: not-allowed;
}

/* Input groups */
.input-group-text {
  background-color: var(--am-surface-alt) !important;
  border-color: var(--am-border-strong) !important;
  color: var(--am-text-3) !important;
  font-size: 0.875rem;
  border-radius: var(--am-radius-sm) !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-right-color: transparent !important;
}

.input-group > .input-group-text + .form-control,
.input-group > .input-group-text + .form-select {
  border-left-color: transparent !important;
}

/* Validación */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--am-red) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(235,61,99,0.13) !important;
}

.invalid-feedback {
  font-size: 0.78rem;
  color: var(--am-red);
  margin-top: 0.25rem;
  font-weight: var(--am-fw-medium);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--am-teal) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(13,147,148,0.15) !important;
}

/* Checkboxes y radios */
.form-check-input {
  width: 1rem !important;
  height: 1rem !important;
  margin-top: 0.2em;
  border: 1.5px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-xs) !important;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
  cursor: pointer;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-check-input:checked {
  background-color: var(--am-blue) !important;
  border-color:     var(--am-blue) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0,75,151,0.15) !important;
  border-color: var(--am-blue) !important;
}

/* Switches */
.form-check.form-switch .form-check-input {
  width: 2.25rem !important;
  height: 1.25rem !important;
  border-radius: 100px !important;
}

.form-check-label {
  font-size: 0.875rem !important;
  color: var(--am-text-2) !important;
  cursor: pointer;
}

/* Texto de ayuda */
.form-text {
  font-size: 0.78rem !important;
  color: var(--am-text-3) !important;
  margin-top: 0.25rem !important;
}

/* Row de formulario con gap consistente */
.row.g-3 { --bs-gutter-y: 0.875rem; }


/* ─────────────────────────────────────────────────────────────
   6  TABLAS
   ───────────────────────────────────────────────────────────── */
.table {
  font-size: 0.875rem !important;
  color: var(--am-text-2) !important;
  border-color: var(--am-border) !important;
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-size: 0.72rem !important;
  font-weight: var(--am-fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--am-head-text) !important;
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid var(--am-border-mid) !important;
  white-space: nowrap;
  --bs-table-bg-state: var(--am-head);
  background-color: var(--am-head) !important;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--am-border) !important;
  color: var(--am-text-2);
}

.table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Hover */
.table-hover > tbody > tr:hover > td {
  background-color: var(--am-row-hover) !important;
  color: var(--am-text-1) !important;
}

/* Reset border-top innecesario del template */
.table.border-top { border-top: none !important; }

/* Columna de acciones alineada a la derecha */
.table th:last-child.text-end,
.table td:last-child { text-align: right; }

/* Fondo opaco para las DataTables: evita que encabezados y registros se mezclen. */
.card-datatable .table,
table.dataTable {
  --bs-table-bg: var(--am-surface);
  --bs-table-bg-state: var(--am-surface);
  background-color: var(--am-surface) !important;
}

.card-datatable .table > thead > tr > th,
table.dataTable > thead > tr > th {
  background-color: var(--am-head) !important;
}

.card-datatable .table > tbody > tr > td,
table.dataTable > tbody > tr > td {
  background-color: var(--am-surface) !important;
}

.card-datatable .table-hover > tbody > tr:hover > td,
table.dataTable.table-hover > tbody > tr:hover > td {
  background-color: var(--am-row-hover) !important;
}


/* ─────────────────────────────────────────────────────────────
   7  DATATABLES
   ───────────────────────────────────────────────────────────── */
.dataTables_wrapper {
  padding: 0;
  font-size: 0.875rem;
}

/* Barra de controles (search + length) */
.dataTables_filter,
.dataTables_length {
  padding: 1rem 1.25rem;
}

.dataTables_filter label,
.dataTables_length label {
  font-size: 0.8125rem;
  color: var(--am-text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.dataTables_filter input {
  border: 1px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-sm) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: var(--am-text-1) !important;
  background-color: var(--am-surface) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.dataTables_filter input:focus {
  border-color: var(--am-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,75,151,0.12) !important;
}

.dataTables_length select {
  border: 1px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-sm) !important;
  padding: 0.3125rem 0.625rem !important;
  font-size: 0.875rem !important;
  background-color: var(--am-surface) !important;
  color: var(--am-text-1) !important;
}

/* Paginación */
.dataTables_paginate {
  padding: 0.75rem 1.25rem !important;
  display: flex;
  align-items: center;
  gap: 2px;
}

.dataTables_paginate .paginate_button {
  border-radius: var(--am-radius-xs) !important;
  font-size: 0.8125rem !important;
  padding: 0.3rem 0.625rem !important;
  color: var(--am-text-2) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
  line-height: 1.4;
}

.dataTables_paginate .paginate_button:hover {
  background-color: var(--am-surface-hover) !important;
  color: var(--am-text-1) !important;
  border: none !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background-color: var(--am-blue) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: var(--am-fw-medium) !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.35;
  cursor: default;
  background: transparent !important;
  color: var(--am-text-4) !important;
}

.dataTables_info {
  font-size: 0.8125rem !important;
  color: var(--am-text-3) !important;
  padding: 0.75rem 1.25rem !important;
}


/* ─────────────────────────────────────────────────────────────
   8  MODALES
   ───────────────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-lg) !important;
  box-shadow: var(--am-shadow-lg) !important;
  background-color: var(--am-surface) !important;
}

.modal-header {
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid var(--am-border) !important;
  align-items: flex-start;
}

.modal-header .modal-title {
  font-size: 1rem !important;
  font-weight: var(--am-fw-semi) !important;
  color: var(--am-text-1) !important;
  line-height: 1.35;
}

.modal-header small,
.modal-header .text-muted {
  font-size: 0.8125rem !important;
  color: var(--am-text-3) !important;
  margin-top: 0.15rem;
  display: block;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--am-border) !important;
  gap: 0.5rem;
}

.btn-close {
  opacity: 0.35;
  transition: opacity 0.15s;
  width: .8rem;
  height: 1.2rem;
}
.btn-close:hover { opacity: 0.65; }

/* Overlay del modal */
.modal-backdrop {
  background-color: rgba(15,23,42,0.5) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


/* ─────────────────────────────────────────────────────────────
   9  BADGES
   ───────────────────────────────────────────────────────────── */
.badge {
  font-size: 0.7rem !important;
  font-weight: var(--am-fw-semi) !important;
  padding: 0.3em 0.75em !important;
  border-radius: 20px !important;   /* pastilla, como los estados del rediseño */
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.bg-label-primary {
  background-color: var(--am-blue-subtle) !important;
  color: var(--am-blue) !important;
}
.bg-label-success {
  background-color: rgba(13,147,148,0.1) !important;
  color: #0a6b6c !important;
}
.bg-label-warning {
  background-color: rgba(255,171,29,0.12) !important;
  color: #a07000 !important;
}
.bg-label-danger {
  background-color: rgba(235,61,99,0.1) !important;
  color: #b32747 !important;
}
.bg-label-info {
  background-color: rgba(32,146,236,0.1) !important;
  color: #0c5e99 !important;
}
.bg-label-secondary {
  background-color: rgba(100,116,139,0.1) !important;
  color: var(--am-text-3) !important;
}


/* ─────────────────────────────────────────────────────────────
   10  AVATARS
   ───────────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--am-radius-sm) !important;
  flex-shrink: 0;
}

.avatar-initial {
  font-size: 0.8rem !important;
  font-weight: var(--am-fw-semi) !important;
}

/* Tamaños */
.avatar.avatar-xs { width: 24px !important; height: 24px !important; }
.avatar.avatar-sm { width: 28px !important; height: 28px !important; }
.avatar.avatar-md { width: 36px !important; height: 36px !important; }
.avatar.avatar-lg { width: 44px !important; height: 44px !important; }
.avatar.avatar-xl { width: 56px !important; height: 56px !important; }


/* ─────────────────────────────────────────────────────────────
   11  ALERTS
   ───────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--am-radius) !important;
  font-size: 0.875rem !important;
  padding: 0.875rem 1.125rem !important;
  border-width: 1px !important;
}

.alert-success {
  background-color: rgba(13,147,148,0.07) !important;
  border-color:     rgba(13,147,148,0.22) !important;
  color: #0a6b6c !important;
}
.alert-danger {
  background-color: rgba(235,61,99,0.07)  !important;
  border-color:     rgba(235,61,99,0.22)  !important;
  color: #b32747 !important;
}
.alert-warning {
  background-color: rgba(255,171,29,0.07) !important;
  border-color:     rgba(255,171,29,0.25) !important;
  color: #9e6800 !important;
}
.alert-info {
  background-color: rgba(32,146,236,0.07) !important;
  border-color:     rgba(32,146,236,0.22) !important;
  color: #0c5e99 !important;
}

.alert-dismissible { padding-right: 3rem !important; }

/* Mensajes de resultado: al estar antes de una cabecera sticky, ésta ya no
   puede usar su margen negativo y superponerse sobre la alerta. */
.am-flash-messages {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.am-flash-messages .alert { margin-bottom: 0; }
.am-flash-messages + .am-page-header { margin-top: 0; }


/* ─────────────────────────────────────────────────────────────
   12  TABS Y PILLS
   ───────────────────────────────────────────────────────────── */

/* Nav tabs */
.nav-tabs {
  border-bottom: 1px solid var(--am-border) !important;
  gap: 0 !important;
}

.nav-tabs .nav-link {
  font-size: 0.875rem !important;
  font-weight: var(--am-fw-medium) !important;
  color: var(--am-text-3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.625rem 1rem !important;
  margin-bottom: -1px;
  background: transparent !important;
  transition: color 0.14s, border-color 0.14s !important;
}

.nav-tabs .nav-link:hover {
  color: var(--am-text-1) !important;
  border-bottom-color: var(--am-border-strong) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--am-blue) !important;
  border-bottom-color: var(--am-blue) !important;
  font-weight: var(--am-fw-semi) !important;
  background: transparent !important;
}

/* Ficha de cliente: selector de secciones contenido y legible. */
.client-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem !important;
  padding: 0.375rem;
  margin: 0;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-md);
  background: var(--bs-tertiary-bg);
}

.client-tabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: var(--am-radius-sm) !important;
  margin: 0 !important;
  padding: 0.55rem 0.875rem !important;
  color: var(--am-text-2) !important;
}

.client-tabs .nav-link:hover,
.client-tabs .nav-link:focus-visible {
  border-color: var(--am-border) !important;
  background: var(--bs-body-bg) !important;
  color: var(--am-text-1) !important;
}

.client-tabs .nav-link.active {
  border-color: var(--am-blue) !important;
  background: var(--am-blue) !important;
  color: #fff !important;
  box-shadow: 0 0.125rem 0.375rem rgba(32, 146, 236, 0.22);
}

.client-tabs .nav-link.active i { color: inherit !important; }

.client-tab-panel { border-radius: var(--am-radius-md) !important; }

/* Nav pills */
.nav-pills .nav-link {
  font-size: 0.875rem !important;
  font-weight: var(--am-fw-medium) !important;
  color: var(--am-text-3) !important;
  border-radius: var(--am-radius-sm) !important;
  padding: 0.5rem 1rem !important;
  transition: background-color 0.14s, color 0.14s;
}

.nav-pills .nav-link:hover {
  background-color: var(--am-surface-alt) !important;
  color: var(--am-text-1) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--am-blue)  !important;
  color: #ffffff !important;
}


/* ─────────────────────────────────────────────────────────────
   13  DROPDOWNS
   ───────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow-lg) !important;
  padding: 0.375rem !important;
  font-size: 0.875rem !important;
  background-color: var(--am-surface) !important;
  min-width: 11rem;
}

.dropdown-item {
  border-radius: var(--am-radius-sm) !important;
  padding: 0.5rem 0.875rem !important;
  color: var(--am-text-2) !important;
  font-size: 0.875rem !important;
  font-weight: var(--am-fw-normal);
  transition: background-color 0.1s, color 0.1s;
  display: flex;
  align-items: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--am-surface-alt) !important;
  color: var(--am-text-1) !important;
}

.dropdown-item.active {
  background-color: var(--am-blue-light) !important;
  color: var(--am-blue) !important;
}

.dropdown-divider {
  border-color: var(--am-border) !important;
  margin: 0.25rem 0 !important;
}

.dropdown-header {
  font-size: 0.72rem !important;
  font-weight: var(--am-fw-semi) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--am-text-3) !important;
  padding: 0.5rem 0.875rem !important;
}


/* ─────────────────────────────────────────────────────────────
   14  PATRÓN DE ENCABEZADO DE PÁGINA
       Clase .d-flex.flex-wrap.justify-content-between usada
       en todas las pantallas de listado.
   ───────────────────────────────────────────────────────────── */

/* El mb-4 del patrón existente queda reducido a algo más limpio */
.d-flex.flex-wrap.justify-content-between.align-items-start.gap-3.mb-4 {
  margin-bottom: 1.25rem !important;
}

/* Subtítulo bajo el h4 */
.d-flex.flex-wrap.justify-content-between.align-items-start > div > p.text-muted.mb-0 {
  font-size: 0.875rem;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   15  ESTADOS VACÍOS / EMPTY STATES
   ───────────────────────────────────────────────────────────── */
.text-center.py-4 i.bx,
.text-center.py-5 i.bx,
.text-center.p-5  i.bx {
  color: var(--am-text-4);
  opacity: 0.7;
  display: block;
  margin-bottom: 0.75rem;
}

.text-center.py-4 h6,
.text-center.py-5 h6,
.text-center.p-5  h6 {
  font-size: 0.9375rem;
  color: var(--am-text-2);
  margin-bottom: 0.375rem;
}

.text-center.py-4 p,
.text-center.py-5 p,
.text-center.p-5  p {
  color: var(--am-text-3);
  font-size: 0.875rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Empty state en el dropdown de alertas del navbar */
.dropdown-menu .text-center.text-muted.p-5 i {
  color: var(--am-text-4);
}

.dropdown-menu .text-center.text-muted.p-5 span {
  font-size: 0.875rem;
  color: var(--am-text-3);
}


/* ─────────────────────────────────────────────────────────────
   16  LOADING / SPINNERS / SKELETONS
   ───────────────────────────────────────────────────────────── */
.spinner-border {
  border-width: 2px !important;
  color: var(--am-blue) !important;
}

.spinner-border-sm { border-width: 1.5px !important; }

.placeholder {
  background-color: var(--am-border-strong) !important;
  border-radius: var(--am-radius-xs) !important;
  opacity: 0.6;
}

/* Loading row en DataTables */
.dataTables_processing {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-sm) !important;
  font-size: 0.8125rem;
  color: var(--am-text-3);
  box-shadow: var(--am-shadow-sm) !important;
}


/* ─────────────────────────────────────────────────────────────
   17  PÁGINAS DE AUTENTICACIÓN
   ───────────────────────────────────────────────────────────── */
.authentication-wrapper {
  min-height: 100dvh;
  background-color: var(--am-surface-alt);
  display: flex;
  align-items: center;
}

.authentication-inner {
  max-width: 440px;
  width: 100%;
}

.authentication-wrapper .card {
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-shadow-lg) !important;
  border-radius: var(--am-radius-xl) !important;
}

.authentication-wrapper .card-body {
  padding: 2.5rem 2.25rem !important;
}

.authentication-wrapper h4 {
  font-size: 1.375rem !important;
  font-weight: var(--am-fw-bold) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.375rem !important;
}

.authentication-wrapper p.text-center.text-muted {
  font-size: 0.875rem !important;
  margin-bottom: 1.75rem !important;
}

/* Olvidaste tu contraseña — enlace inline */
.authentication-wrapper form a {
  font-size: 0.8125rem;
  font-weight: var(--am-fw-medium);
}

/* Auth brand centrada */
.app-brand.justify-content-center {
  margin-bottom: 1.75rem;
}


/* ─────────────────────────────────────────────────────────────
   18  DASHBOARD / KPIs
   ───────────────────────────────────────────────────────────── */

/* Tarjeta de bienvenida */
.card.metric-card .card-body {
  padding: 2rem 2rem !important;
}

/* Grupo de iconos KPI */
.avatar.bg-label-success,
.avatar.bg-label-primary,
.avatar.bg-label-warning,
.avatar.bg-label-info {
  border-radius: var(--am-radius) !important;
}

/* Icono de dominio (homepage) */
.border.rounded.p-4 > i.bx {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.border.rounded.p-4 > h6 {
  font-size: 0.9375rem;
  font-weight: var(--am-fw-semi);
  margin-bottom: 0.35rem;
}

.border.rounded.p-4 > p {
  font-size: 0.8125rem;
  color: var(--am-text-3);
  line-height: 1.5;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   19  CUSTOMIZADOR DEL TEMPLATE (discreción)
   ───────────────────────────────────────────────────────────── */

/* El personalizador queda disponible desde su engranaje flotante. */
.template-customizer-open-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1081 !important;
}

.template-customizer {
  border-left: 1px solid var(--am-border) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08) !important;
}

/* El CSS base reserva el engranaje detrás del panel. Se expone siempre
   mientras el panel está cerrado para que la personalización sea accesible. */
#template-customizer:not(.template-customizer-open) .template-customizer-open-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1081 !important;
  pointer-events: auto !important;
}


/* ─────────────────────────────────────────────────────────────
   20  OVERRIDES ESPECÍFICOS DE ESTRUCTURA SNEAT
   ───────────────────────────────────────────────────────────── */

/* Sombra interna del sidebar (efecto Sneat) — eliminar */
.menu-inner-shadow { display: none !important; }

/* Scrollbar del sidebar */
.ps-container > .ps-scrollbar-y-rail { opacity: 0 !important; }
.menu-vertical:hover .ps-scrollbar-y-rail { opacity: 0.3 !important; }

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--am-blue) !important;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none !important; }


/* ─────────────────────────────────────────────────────────────
   21  MODO OSCURO
   ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] body { color: var(--am-text-2); }

/* Sidebar oscuro */
[data-bs-theme="dark"] #layout-menu {
  background: #141f30 !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .menu .app-brand.demo {
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .menu-vertical .menu-link {
  color: var(--am-text-3) !important;
}
[data-bs-theme="dark"] .menu-vertical .menu-link:hover {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--am-text-1) !important;
}
[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link {
  background-color: var(--am-blue-mid) !important;
  color: #6baedd !important;
}
[data-bs-theme="dark"] .menu-inner .menu-header .menu-header-text {
  color: rgba(255,255,255,0.22) !important;
}

/* Navbar oscuro */
[data-bs-theme="dark"] .layout-navbar {
  background-color: #141f30 !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .layout-navbar.navbar-detached {
  border-color: rgba(255,255,255,0.08) !important;
}

/* Layout oscuro */
[data-bs-theme="dark"] .layout-page,
[data-bs-theme="dark"] .content-wrapper {
  background-color: #0d1522 !important;
}

/* Cards oscuro */
[data-bs-theme="dark"] .card {
  background-color: #141f30 !important;
  border-color: rgba(255,255,255,0.07) !important;
}
[data-bs-theme="dark"] .card-header {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .card-footer {
  border-top-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .border.rounded {
  border-color: rgba(255,255,255,0.07) !important;
  background-color: #141f30;
}

/* Formularios oscuro */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1a2941 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--am-text-1) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #6baedd !important;
  box-shadow: 0 0 0 3px rgba(107,174,221,0.15) !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--am-text-4) !important;
}
[data-bs-theme="dark"] .input-group-text {
  background-color: #1a2941 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--am-text-3) !important;
}
[data-bs-theme="dark"] .form-label { color: var(--am-text-2) !important; }
[data-bs-theme="dark"] .form-check-input {
  border-color: rgba(255,255,255,0.2) !important;
  background-color: transparent;
}
[data-bs-theme="dark"] .form-text { color: var(--am-text-3) !important; }

/* Tablas oscuro */
[data-bs-theme="dark"] .table { color: var(--am-text-2) !important; }
[data-bs-theme="dark"] .table > thead > tr > th {
  color: var(--am-head-text) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
[data-bs-theme="dark"] .table > tbody > tr > td {
  border-bottom-color: rgba(255,255,255,0.04) !important;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--am-text-1) !important;
}

/* Modales oscuro */
[data-bs-theme="dark"] .modal-content {
  background-color: #141f30 !important;
  border-color: rgba(255,255,255,0.09) !important;
}
[data-bs-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-bs-theme="dark"] .modal-footer { border-top-color:   rgba(255,255,255,0.06) !important; }
[data-bs-theme="dark"] .modal-backdrop { background-color: rgba(5,11,24,0.65) !important; }

/* Dropdowns oscuro */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1a2941 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: var(--am-text-2) !important; }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--am-text-1) !important;
}
[data-bs-theme="dark"] .dropdown-divider { border-color: rgba(255,255,255,0.06) !important; }

/* Encabezados oscuro */
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] h2,[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] h3,[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] h4,[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] h5,[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] h6,[data-bs-theme="dark"] .h6 { color: var(--am-text-1); }

/* Auth oscuro */
[data-bs-theme="dark"] .authentication-wrapper {
  background-color: #0d1522;
}
[data-bs-theme="dark"] .authentication-wrapper .card {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* DataTables oscuro */
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_length select {
  background-color: #1a2941 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--am-text-1) !important;
}
[data-bs-theme="dark"] .dataTables_info { color: var(--am-text-3) !important; }
[data-bs-theme="dark"] .dataTables_paginate .paginate_button { color: var(--am-text-3) !important; }
[data-bs-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--am-text-1) !important;
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current {
  background-color: var(--am-blue) !important;
  color: #ffffff !important;
}

/* Alerts oscuro */
[data-bs-theme="dark"] .alert-success {
  background-color: rgba(13,147,148,0.1)  !important;
  border-color:     rgba(13,147,148,0.2)  !important;
  color: #3dbfc0 !important;
}
[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(235,61,99,0.1)   !important;
  border-color:     rgba(235,61,99,0.2)   !important;
  color: #f08099 !important;
}
[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255,171,29,0.1)  !important;
  border-color:     rgba(255,171,29,0.2)  !important;
  color: #ffc244 !important;
}
[data-bs-theme="dark"] .alert-info {
  background-color: rgba(32,146,236,0.1)  !important;
  border-color:     rgba(32,146,236,0.2)  !important;
  color: #5db4f4 !important;
}

/* Btn oscuro (outline-secondary) */
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: rgba(255,255,255,0.15) !important;
  color: var(--am-text-3) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--am-text-1) !important;
}

/* Nav tabs oscuro */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--am-text-3) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--am-text-1) !important;
  border-bottom-color: rgba(255,255,255,0.2) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: #6baedd !important;
  border-bottom-color: #6baedd !important;
}


/* ─────────────────────────────────────────────────────────────
   22  RESPONSIVE / MOBILE
   ───────────────────────────────────────────────────────────── */

/* ≤ 1199 px — menú se convierte en overlay */
@media (max-width: 1199.98px) {
  .layout-navbar.navbar-detached {
    border-radius: var(--am-radius) !important;
  }
}

/* ≤ 991 px — tablet */
@media (max-width: 991.98px) {
  :root { --am-content-px: 1.25rem; }

  .card-body { padding: 1.25rem !important; }
  .card-header { padding: 1rem 1.25rem !important; }
  .card.metric-card .card-body { padding: 1.5rem !important; }

  .authentication-wrapper .card-body { padding: 2rem 1.75rem !important; }
}

/* ≤ 767 px — móvil */
@media (max-width: 767.98px) {
  :root { --am-content-px: 1rem; }

  /* Encabezado de página — apilar verticalmente */
  .d-flex.flex-wrap.justify-content-between.align-items-start.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Grupo de botones del encabezado — alinear izquierda */
  .d-flex.flex-wrap.justify-content-between.align-items-start.gap-3 > .d-flex.gap-2 {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* Cards — padding reducido */
  .card-body  { padding: 1rem !important; }
  .card-header{ padding: 0.875rem 1rem !important; }
  .card-footer{ padding: 0.875rem 1rem !important; }
  .card.metric-card .card-body { padding: 1.25rem !important; }
  .modal-body   { padding: 1.125rem !important; }
  .modal-header { padding: 1rem 1.125rem !important; }
  .modal-footer { padding: 0.875rem 1.125rem !important; }

  /* Botones cta de formulario dentro de modal */
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn { flex: 1; min-width: 100px; }

  /* Auth */
  .authentication-wrapper .card-body { padding: 1.75rem 1.25rem !important; }

  /* DataTables — controles uno sobre otro */
  .dataTables_filter,
  .dataTables_length {
    padding: 0.75rem 1rem;
    text-align: left !important;
  }

  .dataTables_filter label,
  .dataTables_length label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .dataTables_filter input { width: 100%; }

  /* Paginación más compacta */
  .dataTables_paginate { justify-content: center; padding: 0.75rem 1rem !important; }

  /* Tabla siempre con scroll horizontal en móvil */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Dominio cards en columna completa en xs */
  .border.rounded.p-4 { padding: 1.25rem !important; }

  /* Nav tabs — scroll horizontal en móvil */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ≤ 575 px — xs */
@media (max-width: 575.98px) {
  h3, .h3 { font-size: 1.125rem !important; }
  h4, .h4 { font-size: 1rem      !important; }

  /* Auth card — sin px adicional de Sneat */
  .authentication-wrapper .card.px-sm-6 { padding-left: 0 !important; padding-right: 0 !important; }

  /* Modal — ocupa casi toda la pantalla */
  .modal-dialog:not(.modal-sm):not(.modal-fullscreen-sm-down) {
    margin: 0.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   23  CORRECCIONES UX/UI — AUDIT v2.0
   Carga después de todas las secciones anteriores → mayor
   especificidad por posición. Corrige bugs visuales, actualiza
   a DataTables 2.x, y refina detalles de interacción.
   ═══════════════════════════════════════════════════════════════ */


/* ── B. FORM-SELECT — preservar padding-right para flecha SVG ─
   Sneat usa appearance:none + SVG background en .form-select con
   padding original de 2.625rem a la derecha. Nuestro override
   previo (0.5rem 0.875rem) eliminó ese espacio → texto se monta
   sobre la flecha. Restablecemos el padding correcto.
   ──────────────────────────────────────────────────────────── */
.form-select {
  padding-top:    0.5rem    !important;
  padding-bottom: 0.5rem    !important;
  padding-left:   0.875rem  !important;
  padding-right:  2.5rem    !important;  /* espacio para la flecha SVG */
}

/* form-select-sm hereda el padding-right de .form-select,
   solo sobreescribimos top/bottom/left */
.form-select.form-select-sm,
.input-group .form-select.form-select-sm {
  padding-top:    0.3125rem !important;
  padding-bottom: 0.3125rem !important;
  padding-left:   0.75rem   !important;
  padding-right:  2.25rem   !important;
}


/* ── C. DATATABLES LENGTH SELECT — fix chevron overlap ────────
   La sección 7 aplica padding: 0.3125rem 0.625rem que elimina el
   padding-right. La siguiente regla (mayor especificidad/posición)
   lo corrige para el select del length control.
   ──────────────────────────────────────────────────────────── */
.dataTables_length select,
div.dt-container .dt-length select {
  padding-top:    0.3125rem !important;
  padding-bottom: 0.3125rem !important;
  padding-left:   0.625rem  !important;
  padding-right:  2.25rem   !important;  /* nunca se monta el chevron */
  border: 1px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-sm)        !important;
  font-size: 0.8125rem                      !important;
  background-color: var(--am-surface)       !important;
  color: var(--am-text-1)                   !important;
}
.dataTables_length select:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--am-blue)                          !important;
  box-shadow: 0 0 0 3px rgba(0,75,151,0.12)             !important;
}


/* ── D. DATATABLES 2.x — CONTROLES SUPERIORES ─────────────────
   DataTables 2.x usa .dt-container, .dt-length, .dt-search,
   .dt-info, .dt-paging en lugar de los nombres 1.x.
   ──────────────────────────────────────────────────────────── */
div.dt-container {
  font-size: 0.875rem;
}

div.dt-container .dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
}

/* Primera fila (controles top) */
div.dt-container .dt-layout-row:first-child {
  border-bottom: 1px solid var(--am-border);
}

/* Última fila (info + paginación) */
div.dt-container .dt-layout-row:last-child {
  border-top: 1px solid var(--am-border);
}

/* Labels de length y search */
div.dt-container .dt-length label,
div.dt-container .dt-search label {
  font-size: 0.8125rem;
  color: var(--am-text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Input de búsqueda */
div.dt-container .dt-search input {
  border: 1px solid var(--am-border-strong) !important;
  border-radius: var(--am-radius-sm)        !important;
  padding: 0.375rem 0.75rem                 !important;
  font-size: 0.875rem                       !important;
  color: var(--am-text-1)                   !important;
  background-color: var(--am-surface)       !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  min-width: 180px;
}
div.dt-container .dt-search input:focus {
  border-color: var(--am-blue)              !important;
  box-shadow: 0 0 0 3px rgba(0,75,151,0.12) !important;
}

/* Texto informativo (ej: "Mostrando 1 a 10 de 100 registros") */
div.dt-container .dt-info {
  font-size:  0.8125rem        !important;
  color:      var(--am-text-3) !important;
  padding:    0                !important;
  white-space: nowrap;
}

/* Contenedor de paginación */
div.dt-container .dt-paging {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/* ── E. DATATABLES 2.x — PAGINACIÓN BOOTSTRAP 5 ───────────────
   DT 2.x + BS5 renderiza ul.pagination / .page-item / .page-link
   ──────────────────────────────────────────────────────────── */
div.dt-container .pagination {
  gap: 2px;
  margin: 0;
  flex-wrap: nowrap;
}

div.dt-container .page-link {
  border-radius: var(--am-radius-xs) !important;
  font-size:     0.8125rem           !important;
  padding:       0.3rem 0.625rem     !important;
  color:         var(--am-text-2)    !important;
  border:        none                !important;
  background:    transparent         !important;
  box-shadow:    none                !important;
  cursor:        pointer;
  transition:    background-color 0.1s, color 0.1s;
  line-height:   1.4;
  min-width:     30px;
  text-align:    center;
}

div.dt-container .page-item.active .page-link,
div.dt-container .page-item.active .page-link:hover,
div.dt-container .page-item.active .page-link:focus {
  background-color: var(--am-blue) !important;
  color:            #ffffff         !important;
  border:           none            !important;
  font-weight:      var(--am-fw-medium) !important;
  box-shadow:       none            !important;
}

div.dt-container .page-item:not(.active) .page-link:hover {
  background-color: var(--am-surface-hover) !important;
  color:            var(--am-text-1)         !important;
}

div.dt-container .page-item:not(.active) .page-link:focus {
  background-color: var(--am-surface-hover) !important;
  box-shadow:       0 0 0 3px rgba(0,75,151,0.12) !important;
}

div.dt-container .page-item.disabled .page-link {
  opacity:    0.35;
  cursor:     default;
  background: transparent          !important;
  color:      var(--am-text-4)     !important;
}


/* ── F. DATATABLES — INDICADORES DE ORDENAMIENTO ──────────────
   Los ▲ ▼ en span.dt-column-order deben ser discretos y
   visibles sólo al ordenar activamente.
   ──────────────────────────────────────────────────────────── */
table.dataTable thead > tr > th span.dt-column-order {
  opacity: 0.3;
  color: var(--am-text-3);
  font-size: 0.6rem;
}
table.dataTable thead > tr > th:hover span.dt-column-order {
  opacity: 0.55;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order {
  opacity: 1;
  color: var(--am-blue);
}


/* ── G. DATATABLES — ESTADO VACÍO / PROCESANDO ────────────────
   Texto "No hay registros disponibles." / "Cargando..."
   ──────────────────────────────────────────────────────────── */
div.dt-container table.dataTable td.dataTables_empty,
div.dt-container .dt-empty {
  text-align:  center     !important;
  color:       var(--am-text-3) !important;
  font-size:   0.875rem   !important;
  padding:     2.5rem 1rem !important;
  font-style:  normal      !important;
}

div.dt-container .dt-processing {
  background:    rgba(255,255,255,0.88) !important;
  border:        1px solid var(--am-border) !important;
  border-radius: var(--am-radius-sm)     !important;
  font-size:     0.8125rem               !important;
  color:         var(--am-text-3)        !important;
  box-shadow:    var(--am-shadow-sm)     !important;
  padding:       0.5rem 1rem             !important;
}


/* ── H. TABLA — columna acciones: sólo con .text-end ──────────
   El override anterior con :last-child era demasiado amplio y
   rompía la alineación de columnas que no son de acciones.
   ──────────────────────────────────────────────────────────── */
.table th:last-child,
.table td:last-child {
  text-align: inherit !important;  /* revertir override anterior */
}
/* Alinear a la derecha solo columnas explícitamente marcadas */
.table th.text-end,
.table td.text-end {
  text-align: right !important;
}


/* ── I. SIDEBAR TRANSITION — colapso suave ────────────────────
   Asegurar que el ancho del sidebar transicione suavemente.
   ──────────────────────────────────────────────────────────── */
#layout-menu {
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.menu-inner {
  transition: opacity 0.15s ease;
}

/* ── I2. SIDEBAR HOVER-EXPAND — empujar contenido, no cubrirlo ─
   Con el menú colapsado + hover, Sneat expande el sidebar como
   overlay sobre el contenido. Ajustamos el padding del área de
   contenido y el ancho de la navbar fija para que el layout se
   acomode al menú desplegado en lugar de quedar tapado.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .layout-menu-fixed.layout-menu-collapsed.layout-menu-hover .layout-page {
    padding-inline-start: var(--bs-menu-width) !important;
  }
  .layout-navbar-fixed.layout-menu-collapsed.layout-menu-hover .layout-navbar.navbar-detached {
    inline-size: calc(100% - 1.625rem * 2 - 16.25rem) !important;
    inset-inline-start: var(--bs-menu-width) !important;
  }
  /* Transiciones suaves del reacomodo */
  .layout-page {
    transition: padding-inline-start 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .layout-navbar.navbar-detached {
    transition: inline-size 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                inset-inline-start 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}


/* ── J. SIDEBAR SCROLLBAR — fino y discreto ───────────────────
   ──────────────────────────────────────────────────────────── */
#layout-menu .menu-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--am-border-mid) transparent;
}
#layout-menu .menu-inner::-webkit-scrollbar {
  width: 3px;
}
#layout-menu .menu-inner::-webkit-scrollbar-track {
  background: transparent;
}
#layout-menu .menu-inner::-webkit-scrollbar-thumb {
  background-color: var(--am-border-mid);
  border-radius: 100px;
}
#layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
  background-color: var(--am-border-strong);
}


/* ── K. NAVBAR — espaciado de íconos consistente ──────────────
   Los nav-items del navbar tienen me-2/me-3 inconsistentes en
   el HTML. Los reseteamos y usamos gap en el contenedor.
   ──────────────────────────────────────────────────────────── */
.layout-navbar .navbar-nav.flex-row {
  gap: 0.125rem;
}
.layout-navbar .navbar-nav.flex-row .nav-item {
  margin-right: 0 !important;
  margin-left:  0 !important;
}


/* ── L. BOTÓN SUBMIT — estado loading ─────────────────────────
   activomas-ui.js agrega spinner-border-sm + "Procesando..."
   al botón submit. El estado debe verse polido.
   ──────────────────────────────────────────────────────────── */
button[aria-busy="true"] {
  opacity: 0.75;
  cursor: wait !important;
  pointer-events: none;
}
button[aria-busy="true"] .spinner-border-sm {
  width:        1rem !important;
  height:       1rem !important;
  border-width: 1.5px !important;
  color:        #fff !important;
  vertical-align: -0.1em;
}


/* ── M. DROPDOWN NAVBAR — empty state alertas ─────────────────
   Mejorar el espacio del empty state en el dropdown de alertas.
   ──────────────────────────────────────────────────────────── */
.layout-navbar .dropdown-menu .text-center.text-muted.p-5 {
  padding: 2rem 1.5rem !important;
}
.layout-navbar .dropdown-menu .text-center.text-muted.p-5 i.bx {
  font-size: 1.75rem !important;
  margin-bottom: 0.5rem;
  display: block;
}
.layout-navbar .dropdown-menu .text-center.text-muted.p-5 span {
  font-size: 0.8125rem;
  color: var(--am-text-3);
}


/* ── N. DROPDOWN USUARIO — encabezado ─────────────────────────
   Reducir el espacio del nombre de usuario en el dropdown.
   ──────────────────────────────────────────────────────────── */
.dropdown-menu .dropdown-item-text {
  padding: 0.625rem 0.875rem !important;
}
.dropdown-menu .dropdown-item-text .fw-semibold {
  font-size: 0.875rem;
  color: var(--am-text-1);
}


/* ── O. NAV-TABS EN CARDS — variante compacta ─────────────────
   Tabs dentro de cards (ej: Inventory) necesitan menos padding
   y borde inferior alineado con el borde del card-header.
   ──────────────────────────────────────────────────────────── */
.card-header .nav-tabs {
  border-bottom: none !important;
  margin: -1.125rem -1.5rem -1.125rem !important;
}
.card-header .nav-tabs .nav-link {
  padding: 1.125rem 1.25rem !important;
}


/* ── P. FORM-CHECK / SWITCH — altura consistente con inputs ───
   Los switches en formularios deben alinearse bien con labels.
   ──────────────────────────────────────────────────────────── */
.form-check.form-switch {
  padding-left: 2.75rem;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0;
}
.form-check.form-switch .form-check-input {
  margin-left: -2.75rem;
  margin-top: 0;
  flex-shrink: 0;
}
.form-check.form-switch .form-check-label {
  line-height: 1.5;
}


/* ── Q. ALERT DISMISSIBLE — botón close alineado ──────────────
   ──────────────────────────────────────────────────────────── */
.alert-dismissible {
  padding-right: 2.75rem !important;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  margin: 0;
  padding: 0.25rem;
}


/* ── R. CARD-DATATABLE — borde superior de la tabla ───────────
   Cuando el card tiene sólo una tabla (sin card-header),
   el primer th no debe mostrar borde superior duplicado.
   ──────────────────────────────────────────────────────────── */
.card-datatable .table > thead > tr > th {
  border-top: none !important;
}


/* ── S. MENU PRIMER GRUPO — reducir margen superior ───────────
   El primer grupo de menú tiene margin-top de 1.375rem que
   genera demasiado espacio después del logo.
   ──────────────────────────────────────────────────────────── */
.menu-inner > li.menu-header:first-child {
  margin-top: 0.625rem !important;
}

/* Secciones plegables del menú lateral */
.menu-section-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  padding: 0;
  text-align: left;
  width: 100%;
}
.menu-section-toggle:hover .menu-header-text { color: var(--am-blue) !important; }
.menu-section-chevron {
  color: var(--am-text-4);
  font-size: .95rem;
  transition: transform .2s ease;
}
.menu-section-toggle[aria-expanded="false"] .menu-section-chevron { transform: rotate(-90deg); }
.layout-menu-collapsed:not(.layout-menu-hover) .menu-section-chevron { display: none; }

/* Orden personal del menú (arrastrar secciones e ítems) */
.menu-inner > li[draggable="true"] { cursor: grab; }
.menu-inner > li.am-arrastrando { opacity: .45; }
.menu-inner > li.am-drop-antes { box-shadow: 0 -2px 0 0 var(--am-blue); }
.menu-inner > li.am-drop-despues { box-shadow: 0 2px 0 0 var(--am-blue); }


/* ── T. MODO OSCURO — correcciones nuevos componentes ─────────
   ──────────────────────────────────────────────────────────── */

/* DataTables 2.x — dark */
[data-bs-theme="dark"] div.dt-container .dt-length select,
[data-bs-theme="dark"] div.dt-container .dt-search input,
[data-bs-theme="dark"] .dataTables_length select {
  background-color: #1a2941                   !important;
  border-color:     rgba(255,255,255,0.12)    !important;
  color:            var(--am-text-1)           !important;
}
[data-bs-theme="dark"] div.dt-container .dt-info {
  color: var(--am-text-3) !important;
}
[data-bs-theme="dark"] div.dt-container .page-link {
  color: var(--am-text-3) !important;
}
[data-bs-theme="dark"] div.dt-container .page-item:not(.active) .page-link:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--am-text-1)                  !important;
}
[data-bs-theme="dark"] div.dt-container .page-item.active .page-link {
  background-color: var(--am-blue)  !important;
  color:            #ffffff          !important;
}
[data-bs-theme="dark"] div.dt-container .dt-layout-row:first-child {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] div.dt-container .dt-layout-row:last-child {
  border-top-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] div.dt-container .dt-processing {
  background-color: rgba(26,32,50,0.92) !important;
}

/* Sidebar toggle — dark */
[data-bs-theme="dark"] .menu .app-brand .layout-menu-toggle {
  opacity: 0.55;
}

/* Form-select dark — asegurar que la flecha SVG sea visible */
[data-bs-theme="dark"] .form-select {
  padding-right: 2.5rem !important;  /* mantener el mismo espacio */
}


/* ── U. RESPONSIVE — correcciones nuevos componentes ──────────
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* DataTables 2.x — controles en columna en móvil */
  div.dt-container .dt-layout-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
  }
  div.dt-container .dt-layout-start,
  div.dt-container .dt-layout-end {
    width: 100%;
  }
  div.dt-container .dt-search input {
    min-width: unset !important;
    width: 100% !important;
  }
  div.dt-container .dt-paging {
    justify-content: center;
  }
  div.dt-container .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Sidebar toggle — misma visibilidad en móvil */
  .menu .app-brand .layout-menu-toggle {
    opacity: 0.7 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   V  KANBAN MODULE
   ───────────────────────────────────────────────────────────── */

/* Wrapper — horizontal scroll sin scroll vertical de página */
.kanban-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Board row */
.kanban-board {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: max-content;
  padding-bottom: 0.5rem;
}

/* Drop zone */
.kanban-drop-zone {
  min-height: 120px;
  border-radius: var(--am-radius);
  padding: 4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.kanban-drop-zone.drag-over {
  background-color: var(--am-blue-subtle);
  box-shadow: inset 0 0 0 2px var(--am-sky);
}

/* Card */
.kanban-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-sm) !important;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
  user-select: none;
  position: relative;
}

.kanban-card:hover {
  box-shadow: var(--am-shadow) !important;
  border-color: var(--am-border-mid) !important;
}

.kanban-card.kanban-dragging {
  opacity: 0.5;
  transform: rotate(1.5deg) scale(0.97);
  box-shadow: var(--am-shadow-lg) !important;
}

/* Column header */
.kanban-col-header {
  font-size: 0.8125rem;
  padding: 0 4px 6px;
}

/* Stage dot used in multiple places */
.kanban-stage-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Card ficha — tab layout */
.kanban-card-page .nav-tabs .nav-link {
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
}

/* Activity timeline */
.kanban-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.kanban-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--am-border);
}

.kanban-timeline-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 0;
  position: relative;
}

.kanban-timeline-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--am-surface-alt);
  border: 1px solid var(--am-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  z-index: 1;
}

.kanban-timeline-body {
  flex: 1;
  min-width: 0;
}

/* Chat messages */
.kanban-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.kanban-message {
  display: flex;
  gap: 0.5rem;
  max-width: 80%;
}

.kanban-message.own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.kanban-message-bubble {
  background: var(--am-surface-alt);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  word-break: break-word;
}

.kanban-message.own .kanban-message-bubble {
  background: var(--am-blue-subtle);
  border-color: var(--am-blue-mid);
}

.kanban-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--am-blue-subtle);
  color: var(--am-blue);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* File list items */
.kanban-file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--am-border);
}

.kanban-file-item:last-child {
  border-bottom: none;
}

.kanban-file-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--am-radius-xs);
  background: var(--am-surface-alt);
  border: 1px solid var(--am-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Field value display in card form */
.kanban-field-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--am-text-3);
  margin-bottom: 0.25rem;
}

/* History table */
.kanban-history-table td {
  vertical-align: top;
  font-size: 0.8125rem;
}

/* Responsive — stack columns on small screens */
@media (max-width: 575.98px) {
  .kanban-board {
    flex-direction: column;
    min-width: unset;
    align-items: stretch;
  }
  .kanban-column {
    width: 100%;
  }
  .kanban-wrapper {
    overflow-x: hidden;
  }
}

/* ─── v2: Column header redesign ─────────────────────────── */
.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  gap: 4px;
  overflow: hidden;
}

/* Vista de tabla del Espacio: cada celda en una sola línea. Un nombre largo se
   partía en varias y estiraba toda la fila a lo alto, volviendo la tabla difícil
   de recorrer. El texto que no cabe se corta y queda completo en el tooltip. */
#kanban-list-table td.kb-celda {
  max-width: 15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-col-header-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.kb-col-name {
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-col-count {
  background: var(--am-surface-alt);
  color: var(--am-text-3);
  border: 1px solid var(--am-border);
  font-size: 0.7rem;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* Collapsed label — shown only when column is collapsed */
.kb-col-collapsed-label {
  display: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--am-text-2);
  white-space: nowrap;
}

.kb-col-collapsed-label .kanban-stage-dot {
  flex-shrink: 0;
}

/* ─── v2: Collapsible column ─────────────────────────────── */
.kanban-column {
  transition: width 0.2s ease;
}

.kanban-column.kb-collapsed {
  width: 52px !important;
  cursor: pointer;
}

.kanban-column.kb-collapsed .kb-col-header-main,
.kanban-column.kb-collapsed .kanban-drop-zone,
.kanban-column.kb-collapsed .kb-add-card-btn {
  display: none !important;
}

.kanban-column.kb-collapsed .kanban-col-header {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 0;
  height: 100%;
}

.kanban-column.kb-collapsed .kb-collapsed-label {
  display: flex;
}

.kanban-column.kb-collapsed .kb-col-collapsed-label {
  display: flex;
}

.kanban-column.kb-collapsed .kb-collapse-btn i {
  transform: none;
}

/* ─── v2: Card internals ─────────────────────────────────── */
.kb-card-body {
  padding: 0.625rem 0.75rem;
}

.kb-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--am-text-1);
  margin-bottom: 0.375rem;
  cursor: pointer;
  line-height: 1.35;
}

.kb-card-client {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--am-text-3);
  margin: -0.25rem 0 0.375rem;
}
.kb-card-client i {
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.kb-card-client a:hover {
  color: var(--am-blue);
}

.kb-card-title:hover {
  color: var(--am-blue);
}

.kb-card-field {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
  line-height: 1.3;
}

.kb-field-label {
  font-size: 0.7rem;
  color: var(--am-text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.kb-field-label::after { content: ':'; }

.kb-field-value {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--am-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--am-border);
}

.kb-card-time {
  font-size: 0.7rem;
  color: var(--am-text-3);
}

.kb-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--am-blue-subtle);
  color: var(--am-blue);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ─── v2: Side panel ─────────────────────────────────────── */
.kb-side-panel {
  position: fixed;
  top: var(--am-navbar-h);
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: calc(100vh - var(--am-navbar-h));
  background: var(--am-surface);
  border-left: 1px solid var(--am-border);
  box-shadow: -4px 0 20px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  z-index: 1040;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.75rem;
}

.kb-side-panel.kb-panel-open {
  transform: translateX(0);
}

.kb-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.2);
  z-index: 1039;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.kb-panel-overlay.kb-panel-overlay-show {
  opacity: 1;
  pointer-events: auto;
}

.kb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}

.kb-panel-stage-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--am-text-2);
  font-weight: 500;
}

.kb-panel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kb-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--am-text-1);
  line-height: 1.3;
  flex-shrink: 0;
}

.kb-panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.kb-panel-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--am-text-2);
}

.kb-panel-meta-item i {
  font-size: 0.95rem;
  color: var(--am-text-3);
}

.kb-panel-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.kb-panel-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-panel-field-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--am-text-3);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.kb-panel-field-value {
  font-size: 0.875rem;
  color: var(--am-text-1);
  font-weight: 500;
}

.kb-panel-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ─── v2: Responsive panel ───────────────────────────────── */
@media (max-width: 767.98px) {
  .kb-side-panel {
    width: 100vw;
    border-left: none;
    border-top: 1px solid var(--am-border);
    height: 80vh;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    border-radius: var(--am-radius) var(--am-radius) 0 0;
  }
  .kb-side-panel.kb-panel-open {
    transform: translateY(0);
  }
}

/* --- v3: Board columns — professional SaaS separation --- */
.kanban-board {
  gap: 1rem;
  padding: 0.25rem 0 1rem;
  align-items: flex-start;
}

.kanban-column {
  width: 285px;
  flex-shrink: 0;
  background: var(--am-surface-alt, #f8f9fa);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.kanban-column.kb-collapsed {
  width: 52px !important;
  min-height: 200px;
}

.kanban-col-header {
  padding: 0.625rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--am-border);
  border-radius: var(--am-radius) var(--am-radius) 0 0;
  background: transparent;
}

.kanban-drop-zone {
  padding: 0.5rem;
  min-height: 140px;
  flex: 1;
  border-radius: 0 0 var(--am-radius) var(--am-radius);
}

.kanban-card {
  margin-bottom: 0.375rem;
}

/* --- v3: Sidebar toggle — ghost neutro, siempre visible --- */
.menu .app-brand .layout-menu-toggle,
.layout-menu .layout-menu-toggle {
    opacity: 1 !important;
    background: var(--am-surface) !important;
    border: 1px solid var(--am-border-mid) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--am-shadow-xs) !important;
    transition: opacity 0.18s ease, background-color 0.15s ease, border-color 0.15s ease !important;
    color: var(--am-text-3) !important;
}

/* Sneat oculta este enlace durante algunos estados hover/colapsado.
   Lo mantenemos accesible como control persistente del sidebar. */
#layout-menu .app-brand > .layout-menu-toggle {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.menu .app-brand .layout-menu-toggle:hover,
.layout-menu .layout-menu-toggle:hover {
  background:   var(--am-surface-hover)  !important;
  border-color: var(--am-border-strong)  !important;
  color:        var(--am-text-2)         !important;
  box-shadow:   var(--am-shadow-sm)      !important;
}

.menu .app-brand .layout-menu-toggle i,
.layout-menu .layout-menu-toggle i {
  display: inline-block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  color: var(--am-text-1) !important;
}

/* Modo oscuro */
[data-bs-theme="dark"] .menu .app-brand .layout-menu-toggle {
  background:    rgba(255,255,255,0.04) !important;
  border-color:  rgba(255,255,255,0.10) !important;
  color:         var(--am-text-1)       !important;
}
[data-bs-theme="dark"] .menu .app-brand .layout-menu-toggle:hover {
  background:   rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color:        var(--am-text-1)       !important;
}


/* ═══════════════════════════════════════════════════════════════
   W  CENTRADO GLOBAL DE MODALES
   Aplica comportamiento modal-dialog-centered a todos los modales
   sin necesidad de agregar la clase en cada template.
   ═══════════════════════════════════════════════════════════════ */

/* Todos los modales se centran verticalmente */
.modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
}

/* Modales scrollable: vuelven a stretch para llenar el alto */
.modal-dialog.modal-dialog-scrollable {
  align-items: stretch;
  min-height: 0;
  height: calc(100% - 3.5rem);
}

/* XS: margen reducido, ya ajustado en sec. 22 para < 575px */
@media (max-width: 575.98px) {
  .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
    min-height: calc(100% - 1rem);
  }
  .modal-dialog.modal-dialog-scrollable {
    height: calc(100% - 1rem);
  }
}


/* ═══════════════════════════════════════════════════════════════
   X  MEJORAS ADICIONALES UX
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb consistente ─────────────────────────────────── */
.breadcrumb {
  font-size: 0.8125rem;
  margin-bottom: 0;
  align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--am-text-4);
}
.breadcrumb-item a {
  color: var(--am-text-3);
  text-decoration: none;
  transition: color 0.14s;
}
.breadcrumb-item a:hover {
  color: var(--am-blue);
}
.breadcrumb-item.active {
  color: var(--am-text-2);
}

/* ── Toast (notificaciones emergentes) ─────────────────────── */
.toast {
  background: var(--am-surface) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: var(--am-shadow-lg) !important;
  font-size: 0.875rem !important;
}
.toast-header {
  background: transparent !important;
  border-bottom: 1px solid var(--am-border) !important;
  color: var(--am-text-1) !important;
  font-weight: var(--am-fw-medium) !important;
}
.toast-body {
  color: var(--am-text-2) !important;
}

/* ── Listado: acción contextual visible solo en hover ───────── */
.table tbody tr .btn-icon.row-action {
  opacity: 0;
  transition: opacity 0.15s;
}
.table tbody tr:hover .btn-icon.row-action {
  opacity: 1;
}

/* ── Encabezado de página con separador sutil ───────────────── */
.page-header-separator {
  border-bottom: 1px solid var(--am-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* ── Etiqueta de campo requerido ────────────────────────────── */
.form-label .text-danger {
  font-size: 0.875em;
  margin-left: 2px;
}

/* ── Input search en toolbar: borde izquierdo unido al ícono ── */
.input-group .form-control.border-start-0:focus {
  border-left-color: transparent !important;
}
.input-group:focus-within .input-group-text {
  border-color: var(--am-blue) !important;
}
.input-group:focus-within .form-control.border-start-0 {
  border-color: var(--am-blue) !important;
  box-shadow: none !important;
}
.input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(0,75,151,0.13);
  border-radius: var(--am-radius-sm);
}

/* ── Modo oscuro: toast ─────────────────────────────────────── */
[data-bs-theme="dark"] .toast {
  background: #1a2941 !important;
  border-color: rgba(255,255,255,0.09) !important;
}
[data-bs-theme="dark"] .toast-header {
  border-bottom-color: rgba(255,255,255,0.07) !important;
  color: var(--am-text-1) !important;
}

/* ── Modo oscuro: breadcrumb ────────────────────────────────── */
[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--am-text-3);
}
[data-bs-theme="dark"] .breadcrumb-item a:hover {
  color: #6baedd;
}
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--am-text-4);
}

/* ─────────────────────────────────────────────────────────────
   24  SELECTOR MÚLTIPLE — respuesta (ficha de cliente)
   ───────────────────────────────────────────────────────────── */
.kb-multi-select {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.kb-option-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  background: var(--am-surface);
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.kb-option-tile:hover {
  border-color: var(--am-border-strong);
  background: var(--am-surface-hover);
}
.kb-option-tile.is-selected {
  border-color: var(--am-blue);
  background: var(--am-blue-light);
}
.kb-option-tile.is-selected:hover {
  background: var(--am-blue-mid);
}
.kb-option-tile.is-saving {
  opacity: .65;
}
.kb-option-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.kb-option-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--am-border-strong);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--am-surface);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kb-option-check i {
  font-size: .85rem;
  line-height: 1;
}
.kb-option-tile.is-selected .kb-option-check {
  background: var(--am-blue);
  border-color: var(--am-blue);
  color: #fff;
}
.kb-option-label {
  font-size: .8125rem;
  color: var(--am-text-2);
  flex: 1 1 auto;
  line-height: 1.35;
}
.kb-option-tile.is-selected .kb-option-label {
  color: var(--am-text-1);
  font-weight: var(--am-fw-medium);
}
.kb-option-tile:has(.kb-option-checkbox:focus-visible) {
  outline: 2px solid var(--am-blue);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────
   25  EDITOR DE ALTERNATIVAS — administrador de campos
   ───────────────────────────────────────────────────────────── */
.km-option-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-sm);
  background: var(--am-surface);
  margin-bottom: 0.5rem;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.km-option-row:focus-within {
  border-color: var(--am-blue);
  box-shadow: 0 0 0 3px var(--am-blue-light);
}
.km-option-row.km-option-dragging {
  opacity: .4;
}
.km-option-drag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--am-text-4);
  font-size: 1.05rem;
  cursor: grab;
  touch-action: none;
}
.km-option-drag:active {
  cursor: grabbing;
}
.km-option-row .km-option-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .25rem .125rem !important;
  flex: 1 1 auto;
}
.km-option-row .km-option-input:focus {
  outline: none;
}
.km-option-remove {
  flex: 0 0 auto;
}

/* ═════════════════════════════════════════════════════════════
   26  SKIN ATTIO (EXPERIMENTAL)
   Rediseño visual estilo Attio manteniendo la paleta de marca.
   REVERTIBLE: eliminar esta sección completa (o git revert del
   commit que la introdujo) restaura el aspecto anterior.
   Solo estilo: cero cambios de lógica, markup o JS.
   ═════════════════════════════════════════════════════════════ */

/* Tokens (solo tema claro; el modo oscuro conserva sus tokens actuales).
   Valores alineados al rediseño celeste — la capa 27 los re-declara igual. */
[data-bs-theme="light"] {
  --am-surface-alt:    #eef4fb;
  --am-surface-hover:  #e9f2fc;
  --am-border:         #d6e3f2;
  --am-border-mid:     #c2d7ec;
  --am-border-strong:  #a8c4e2;
  --am-text-1:         #0f172a;
  --am-text-2:         #33475e;
  --am-text-3:         #64778c;
  --am-text-4:         #93a5b8;
  --am-radius-xs: 4px;
  --am-radius-sm: 7px;
  --am-radius:    9px;
  --am-radius-lg: 11px;
  --am-shadow-xs: 0 1px 2px rgba(15, 43, 80, 0.05);
  --am-shadow-sm: 0 1px 2px rgba(15, 43, 80, 0.05), 0 4px 14px rgba(15, 43, 80, 0.05);
  --am-shadow:    0 2px 8px rgba(15, 43, 80, 0.06);
  --am-shadow-lg: 0 10px 28px rgba(15, 43, 80, 0.10);
}

/* Densidad general */
body { font-size: 0.875rem; }
.card {
  box-shadow: var(--am-shadow-sm) !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-lg) !important;
}
.card .card-header { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* Botones: planos, compactos, radio 7px */
.btn {
  font-size: 0.8125rem !important;
  border-radius: var(--am-radius-sm) !important;
  box-shadow: none !important;
}
.btn-primary { background: var(--am-blue) !important; border-color: var(--am-blue) !important; }
.btn-outline-secondary {
  border-color: var(--am-border-mid) !important;
  color: var(--am-text-2) !important;
}
.btn-outline-secondary:hover { background: var(--am-surface-hover) !important; }

/* Formularios compactos */
.form-control, .form-select {
  font-size: 0.8125rem !important;
  border-radius: var(--am-radius-sm) !important;
}
.form-label { font-size: 0.75rem !important; color: var(--am-text-3) !important; margin-bottom: 0.25rem !important; }

/* Tablas: densidad compacta con cabecera celeste del rediseño */
.table { font-size: 0.8125rem !important; }
.table thead th {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: var(--am-head-text) !important;
  background: var(--am-head) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 1px solid var(--am-border-mid) !important;
}
.table tbody td { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
[data-bs-theme="light"] .table-hover tbody tr:hover td { background: var(--am-row-hover) !important; }
.table td, .table th { font-variant-numeric: tabular-nums; }

/* Badges → pills con punto de estado */
.badge[class*="bg-label-"] {
  border-radius: 999px !important;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem !important;
  font-weight: 550 !important;
}
.badge[class*="bg-label-"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
  margin-top: -2px;
}

/* Sidebar: fondo blanco, ítem activo como pastilla celeste */
[data-bs-theme="light"] .layout-menu,
[data-bs-theme="light"] .bg-menu-theme {
  background: #ffffff !important;
  border-right: 1px solid var(--am-border);
}
.menu-vertical .menu-item .menu-link {
  font-size: 0.8125rem !important;
  border-radius: var(--am-radius-sm) !important;
  margin: 0 0.5rem !important;
}
[data-bs-theme="light"] .menu-vertical .menu-item.active > .menu-link,
[data-bs-theme="light"] .menu-vertical .menu-item .menu-link.active {
  background: var(--am-sky-50) !important;
  color: var(--am-blue) !important;
  box-shadow: none !important;
}
.menu-vertical .menu-header {
  font-size: 0.625rem !important;
  letter-spacing: 0.1em !important;
  color: var(--am-text-4) !important;
}

/* Navbar: hairline, sin sombra */
.layout-navbar.navbar-detached {
  box-shadow: none !important;
  border: 1px solid var(--am-border) !important;
}

/* Kanban: tarjetas hairline, hover sutil */
.kanban-card {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius) !important;
  box-shadow: none !important;
}
.kanban-card:hover {
  border-color: var(--am-border-strong) !important;
  box-shadow: 0 2px 8px rgba(10, 20, 40, 0.06) !important;
}
.kb-card-title { font-size: 0.8125rem !important; }
.kb-card-client { font-size: 0.75rem; }
[data-bs-theme="light"] .kanban-column { background: transparent; }
.kb-col-name { font-size: 0.75rem !important; font-weight: 600 !important; }
.kb-col-count {
  font-size: 0.65rem !important;
  background: var(--am-surface-alt) !important;
  color: var(--am-text-3) !important;
}

/* Modales y dropdowns: bordes finos, sombra contenida */
.modal-content {
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-shadow-lg) !important;
  border-radius: var(--am-radius-lg) !important;
}
.dropdown-menu {
  border: 1px solid var(--am-border) !important;
  box-shadow: var(--am-shadow-lg) !important;
  border-radius: var(--am-radius) !important;
  font-size: 0.8125rem !important;
}

/* Breadcrumbs y títulos de página: jerarquía silenciosa */
.breadcrumb { font-size: 0.75rem !important; }
h4 { font-size: 1.125rem !important; font-weight: 650 !important; letter-spacing: -0.01em; }

/* ── Attio capa 2: sin navbar en desktop; notificaciones/usuario en la sidebar ── */
@media (min-width: 1200px) {
  .layout-navbar { display: none !important; }
  /* Debe superar a demo.css (.layout-navbar-fixed .layout-wrapper:not(...):not(...) .layout-page,
     especificidad 0,5,0 !important) y al <style> que inyecta helpers.js */
  html.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page,
  html.layout-navbar-fixed .layout-page {
    padding-top: 0 !important;
  }
  /* La cabecera de página parte a ras del borde superior, en la misma línea
     visual que la marca del menú lateral. */
  .layout-page .content-wrapper { padding-top: 0; }
  /* Franja con backdrop-blur que Sneat fija bajo la navbar: sin navbar queda
     huérfana y hace ver borroso el tope de la página */
  html.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before {
    display: none !important;
    content: none !important;
  }
}

/* Pie de la sidebar (notificaciones + usuario) */
.menu-footer {
  margin-top: auto;
  border-top: 1px solid var(--am-border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: inherit;
}
.menu-footer .dropup { position: relative; }
.menu-footer-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: var(--am-radius-sm);
  padding: 7px 10px;
  font-size: 0.8125rem;
  color: var(--am-text-2);
  text-align: left;
  cursor: pointer;
}
.menu-footer-item:hover { background: var(--am-surface-hover); }
.menu-footer-item i.bx-bell { font-size: 1rem; color: var(--am-text-3); }
.menu-footer-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-footer .dropdown-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 4px;
  top: auto;
  font-size: 0.8125rem !important;
}
/* Sidebar colapsada: solo íconos en el pie */
.layout-menu-collapsed:not(.layout-menu-hover) .menu-footer .mf-text,
.layout-menu-collapsed:not(.layout-menu-hover) .menu-footer .menu-footer-name,
.layout-menu-collapsed:not(.layout-menu-hover) .menu-footer .bx-chevron-up {
  display: none;
}
.layout-menu-collapsed:not(.layout-menu-hover) .menu-footer-item { justify-content: center; padding: 7px 0; }

/* Encabezado Attio de los flujos */
.kb-crumb-sec { font-size: 0.8125rem; color: var(--am-text-3); }
.kb-crumb-sep { color: var(--am-text-4); font-size: 0.8125rem; }
.kb-crumb-current { font-size: 0.9375rem; font-weight: 650; color: var(--am-text-1); }
.kb-flow-select {
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--am-text-1);
  padding: 3px 22px 3px 6px;
  border-radius: var(--am-radius-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2367758B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.kb-flow-select:hover { background-color: var(--am-surface-hover); }

/* Tabs de vista segmentados */
.kb-toolbar { border-bottom: 1px solid var(--am-border); padding-bottom: 8px; }
.kb-vtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--am-text-3);
  padding: 5px 11px;
  border-radius: var(--am-radius-sm);
  text-decoration: none;
}
.kb-vtab i { font-size: 0.9375rem; }
.kb-vtab:hover { color: var(--am-text-1); background: var(--am-surface-hover); }
.kb-vtab.on {
  background: var(--am-surface-alt);
  color: var(--am-text-1);
  box-shadow: inset 0 0 0 1px var(--am-border-mid);
}

/* ── Header estándar de página (todas las secciones del menú) ──
   Fila 1: breadcrumb "Grupo / Página" + acciones a la derecha. FIJA al hacer
   scroll. Fila 2 (donde aplique): tabs de vista + buscar + filtros. */
.am-page-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--am-border);
  padding: 0.9rem 1.625rem;
  margin: -1.75rem -1.625rem 1rem;
}
@media (max-width: 1199.98px) {
  /* En móvil la navbar sigue visible: el header no necesita ser sticky */
  .am-page-header { position: static; margin-top: 0; }
}

/* Chip "Flujo ▾" del breadcrumb */
.kb-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--am-text-2);
  border: 1px solid var(--am-border-mid);
  background: var(--am-surface);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
}
.kb-flow-chip:hover { background: var(--am-surface-hover); border-color: var(--am-border-strong); }
.kb-flow-chip i { font-size: 0.875rem; }

/* Header de workspace en la sidebar */
.kb-ws { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kb-ws-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.kb-ws-text { display: flex; flex-direction: column; line-height: 1.25; }
.kb-ws-text b { font-size: 0.875rem; font-weight: 650; color: var(--am-text-1); }
.kb-ws-text small { font-size: 0.6875rem; color: var(--am-text-3); font-weight: 400; }
.layout-menu-collapsed:not(.layout-menu-hover) .kb-ws-text { display: none; }

/* Chips de filtros activos */
.kb-fchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  border: 1px solid var(--am-border-mid);
  background: var(--am-surface);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--am-text-2);
  text-decoration: none;
  cursor: pointer;
}
.kb-fchip b { font-weight: 600; color: var(--am-blue); }
.kb-fchip .x { color: var(--am-text-4); margin-left: 2px; }
.kb-fchip:hover { border-color: var(--am-border-strong); color: var(--am-text-1); }
.kb-fchip:hover .x { color: var(--am-red); }
.kb-fchip.add { border-style: dashed; color: var(--am-text-3); }
.kb-fchip.add i { font-size: 0.8125rem; }

/* ── Pizarra a alto completo: encabezados fijos, scroll interno por columna ──
   El alto del wrapper lo fija kanban-board.js (alto de ventana − posición). */
@media (min-width: 1200px) {
  .kanban-wrapper.kb-fixed-height {
    overflow-y: hidden;
    padding-bottom: 0 !important;
  }
  .kanban-wrapper.kb-fixed-height .kanban-board {
    height: 100%;
    align-items: stretch;
  }
  .kanban-wrapper.kb-fixed-height .kanban-column {
    max-height: 100%;
    min-height: 0;
  }
  .kanban-wrapper.kb-fixed-height .kanban-col-header {
    flex-shrink: 0;
    background: var(--am-surface-alt);
  }
  [data-bs-theme="light"] .kanban-wrapper.kb-fixed-height .kanban-col-header { background: transparent; }
  .kanban-wrapper.kb-fixed-height .kanban-drop-zone {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }
}

/* ── Panel de filtros estilo Jira (am-filterbar) ── */
.am-fp-root { position: relative; }
.am-fp-bar { display: flex; align-items: center; gap: 6px; }
.am-fp-toggle.on { border-color: var(--am-blue) !important; color: var(--am-blue) !important; }
.am-fp-count {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--am-blue-subtle);
  color: var(--am-blue);
  border-radius: 5px;
  padding: 0 6px;
  margin-left: 2px;
}
.am-fp-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1050;
  width: min(560px, 92vw);
  background: var(--am-surface);
  border: 1px solid var(--am-border-mid);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-lg);
}
.am-fp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.am-fp-fields {
  border-right: 1px solid var(--am-border);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
}
.am-fp-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  border-radius: var(--am-radius-sm);
  padding: 7px 10px;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--am-text-2);
  cursor: pointer;
}
.am-fp-field:hover { background: var(--am-surface-hover); color: var(--am-text-1); }
.am-fp-field.on { background: var(--am-blue-light); color: var(--am-blue); font-weight: 550; }
.am-fp-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--am-blue-subtle);
  color: var(--am-blue);
  border-radius: 5px;
  padding: 0 6px;
}
.am-fp-values { padding: 10px 12px; }
.am-fp-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--am-border-mid);
  border-radius: var(--am-radius-sm);
  padding: 5px 10px;
  margin-bottom: 8px;
}
.am-fp-search i { font-size: 0.875rem; color: var(--am-text-4); }
.am-fp-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  width: 100%;
  color: var(--am-text-1);
}
.am-fp-options { max-height: 230px; overflow-y: auto; }
.am-fp-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--am-radius-sm);
  font-size: 0.8125rem;
  color: var(--am-text-1);
  cursor: pointer;
  margin-bottom: 0;
}
.am-fp-option:hover { background: var(--am-surface-hover); }
.am-fp-option.on { background: var(--am-surface-alt); }
.am-fp-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--am-blue);
  flex-shrink: 0;
}
.am-fp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--am-border);
  padding: 8px 12px;
  font-size: 0.75rem;
}
.am-fp-footer-right { display: flex; align-items: center; gap: 12px; }
.am-fp-link {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  color: var(--am-text-3);
  cursor: pointer;
}
.am-fp-link:hover { color: var(--am-text-1); }
.am-fp-tally { color: var(--am-text-4); }

/* ── Homologación tipográfica: una sola letra en toda la plataforma ──
   Familia única (la de los flujos: Public Sans vía --am-font) forzada en
   todos los componentes, y el menú alineado al mismo tamaño/peso/tinta
   que usa el contenido. */
body,
.menu,
.layout-menu,
.menu-vertical .menu-link,
.menu-header,
.btn,
.form-control,
.form-select,
input,
select,
textarea,
table,
.table,
.dropdown-menu,
.dropdown-item,
.modal-content,
.nav,
.badge,
.tooltip,
.popover,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--am-font) !important;
}

/* Menú: misma escala y tinta que el contenido de los flujos */
.menu-vertical .menu-item .menu-link {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--am-text-2) !important;
  letter-spacing: 0 !important;
}
.menu-vertical .menu-item .menu-link .menu-icon { font-size: 1rem !important; }
[data-bs-theme="light"] .menu-vertical .menu-item.active > .menu-link,
[data-bs-theme="light"] .menu-vertical .menu-item .menu-link.active {
  font-weight: 550 !important;
}
.menu-vertical .menu-header .menu-header-text {
  font-family: var(--am-font) !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--am-text-4) !important;
}
.menu-footer-item, .menu-footer-name { font-family: var(--am-font) !important; }

/* Encabezados: misma tinta que los títulos de los flujos */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--am-text-1);
  font-weight: 600;
}

/* ═════ FIN SKIN ATTIO (EXPERIMENTAL) ═════ */

/* ═════════════════════════════════════════════════════════════
   27  ACTIVO MÁS VISUAL SYSTEM
   La capa anterior compactaba toda la aplicación en exceso. Esta
   capa recupera jerarquía, usa el color de marca de forma semántica
   y entrega patrones reutilizables para listas, fichas y paneles.
   ═════════════════════════════════════════════════════════════ */

:root {
  --am-blue-strong: #004b97;
  --am-blue-soft: #e7f1fd;
  --am-teal-soft: #e8f7f5;
  --am-amber-soft: #fdf1da;
  --am-red-soft: #fde8ee;
  --am-sky-soft: #e2f1fd;
  --am-page-max: 1440px;
}

/* Capa final de tokens claros — rediseño celeste/azul: fondos blanco-azulados,
   bordes con tinte azul y sombras frías. Es la que gana la cascada. */
[data-bs-theme="light"] {
  --am-surface-alt: #eef4fb;
  --am-surface-hover: #e9f2fc;
  --am-border: #d6e3f2;
  --am-border-mid: #c2d7ec;
  --am-border-strong: #a8c4e2;
  --am-text-1: #0f172a;
  --am-text-2: #33475e;
  --am-text-3: #64778c;
  --am-text-4: #93a5b8;
  --am-shadow-xs: 0 1px 2px rgba(15, 43, 80, 0.05);
  --am-shadow-sm: 0 1px 2px rgba(15, 43, 80, 0.05), 0 4px 14px rgba(15, 43, 80, 0.05);
  --am-shadow: 0 6px 18px rgba(15, 43, 80, 0.08);
  --am-shadow-lg: 0 18px 42px rgba(15, 43, 80, 0.14);
}

body { font-size: 0.9375rem; }

/* El azul guía la acción; los demás colores comunican estado, no decoran. */
.btn {
  font-size: 0.875rem !important;
  padding: 0.5rem 0.9375rem !important;
}
.btn-primary {
  background: var(--am-blue-strong) !important;
  border-color: var(--am-blue-strong) !important;
  box-shadow: 0 2px 5px rgba(0, 75, 151, 0.13) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--am-blue-hover) !important;
  border-color: var(--am-blue-hover) !important;
  box-shadow: 0 6px 14px rgba(0, 75, 151, 0.2) !important;
}
.btn-success {
  background: var(--am-teal) !important;
  border-color: var(--am-teal) !important;
}
.btn-warning {
  background: var(--am-amber) !important;
  border-color: var(--am-amber) !important;
  color: #5c3b00 !important;
}

.bg-label-primary { background: var(--am-blue-soft) !important; color: var(--am-blue-strong) !important; }
.bg-label-success { background: var(--am-teal-soft) !important; color: #087a78 !important; }
.bg-label-warning { background: var(--am-amber-soft) !important; color: #9a6200 !important; }
.bg-label-danger { background: var(--am-red-soft) !important; color: #bd3151 !important; }
.bg-label-info { background: var(--am-sky-soft) !important; color: #126fae !important; }

/* Contenedor y cabecera: misma presencia visual en todo módulo. */
.container-xxl { max-width: var(--am-page-max); }
.am-page-header {
  min-height: 64px;
  padding: 1rem 1.625rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--am-surface) 0%, var(--am-blue-soft) 180%);
  border-bottom: 1px solid var(--am-border-mid);
}
.am-page-header::before {
  content: '';
  inline-size: 3px;
  align-self: stretch;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--am-blue) 0%, var(--am-teal) 100%);
  margin-right: 2px;
}
.am-page-header .kb-crumb-current {
  font-size: 1rem;
  font-weight: 700;
  color: var(--am-text-1);
}
.am-page-header .kb-crumb-sec { color: var(--am-text-3); }

/* Componentes de contenido. Se usan cuando la página necesita más
   énfasis sin introducir un tema independiente. */
.am-surface-card {
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-lg) !important;
  box-shadow: var(--am-shadow-sm) !important;
}
.am-card-accent {
  position: relative;
  overflow: hidden;
}
.am-card-accent::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--am-blue);
}
.am-card-accent.am-accent-teal::before { background: var(--am-teal); }
.am-card-accent.am-accent-amber::before { background: var(--am-amber); }
.am-card-accent.am-accent-sky::before { background: var(--am-sky); }

.am-kpi-card {
  min-height: 142px;
  border: 0 !important;
  color: #fff;
  background: linear-gradient(135deg, #004b97 0%, #0a6cac 62%, #0d9394 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 75, 151, 0.2) !important;
}
.am-kpi-card .am-kpi-overline {
  color: rgba(255,255,255,.74);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.am-kpi-card h1,
.am-kpi-card h2,
.am-kpi-card h3,
.am-kpi-card h4,
.am-kpi-card h5,
.am-kpi-card p { color: #fff !important; }
.am-kpi-card .text-muted { color: rgba(255,255,255,.8) !important; }

.am-section-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.am-section-heading::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--am-teal);
  box-shadow: 0 0 0 4px var(--am-teal-soft);
}
.am-section-heading h5,
.am-section-heading h6 { margin: 0; }
.am-section-heading small { color: var(--am-text-3); }

/* Listados: la barra dirige la operación y la tabla conserva legibilidad. */
.kb-toolbar,
.am-data-toolbar {
  min-height: 44px;
  padding: .35rem .5rem;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow-xs);
}
#clients-search-wrap { width: min(280px, 100%); }
.card-datatable .table > thead > tr > th,
table.dataTable > thead > tr > th {
  background: var(--am-head) !important;
  color: var(--am-head-text) !important;
  border-bottom-color: var(--am-border-mid) !important;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--am-blue-soft) !important;
  color: var(--am-text-1) !important;
}

/* Fichas: las tabs quedan unidas a la ficha y los datos se escanean rápido. */
.client-tabs,
.kanban-card-page .nav-tabs {
  gap: .25rem;
  padding: .35rem;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  background: var(--am-surface);
}
.client-tabs .nav-link,
.kanban-card-page .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: var(--am-radius-sm) !important;
  color: var(--am-text-3);
  font-size: .875rem;
}
.client-tabs .nav-link.active,
.kanban-card-page .nav-tabs .nav-link.active {
  color: var(--am-blue-strong);
  background: var(--am-blue-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 75, 151, .1);
}
.am-detail-label {
  margin-bottom: .75rem;
  color: var(--am-text-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.am-detail-list dt { color: var(--am-text-3); font-weight: 500; }
.am-detail-list dd { color: var(--am-text-1); font-weight: 600; }
.am-detail-link { text-decoration: none; }
.am-detail-meta { color: var(--am-text-3); font-size: .875rem; }
.am-activity-time,
.am-file-meta { color: var(--am-text-3); font-size: .75rem; }
.am-empty-icon { font-size: 2rem; }
.am-file-avatar { background-color: var(--am-surface-alt); }

/* Formularios recuperan aire y una señal de foco más propia. */
.form-control,
.form-select { font-size: .875rem !important; }
.form-label { color: var(--am-text-2) !important; }
.form-control:focus,
.form-select:focus { box-shadow: 0 0 0 3px rgba(32, 146, 236, .16) !important; }

@media (max-width: 1199.98px) {
  .am-page-header { margin-inline: 0; border-radius: var(--am-radius); }
}

@media (max-width: 575.98px) {
  .am-page-header { min-height: auto; padding: .875rem 1rem; }
  .am-page-header::before { display: none; }
  .kb-toolbar, .am-data-toolbar { padding: .35rem; }
}

/* Patrón de estructura obligatorio para los módulos operativos.
   La misma geometría sirve para títulos, acciones y filtros, sin importar
   si el contenido final es una tabla, un tablero o una ficha. */
.am-page-header--standard {
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1200px) {
  /* Coincide con la altura de la franja de marca del menú lateral. */
  .am-page-header--standard {
    min-height: 80px;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
  /* El brand lateral comienza 6 px más abajo; compensamos ese desfase para
     centrar el control sobre la franja superior común de 80 px. */
  #layout-menu .app-brand.demo > .layout-menu-toggle {
    top: calc(40px - .375rem);
  }
  .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) #layout-menu .app-brand.demo > .layout-menu-toggle {
    /* Al colapsar, el centro del control queda exactamente sobre el borde
       entre el menú y el contenido, independiente del ancho del sidebar. */
    inset-inline-start: 100% !important;
    transform: translate(-50%, -50%);
  }
}
.am-page-heading { min-width: 0; }
.am-page-eyebrow {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .2rem;
  color: var(--am-text-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.am-page-eyebrow i { color: var(--am-teal); font-size: .95rem; }
.am-page-title {
  margin: 0;
  color: var(--am-text-1);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.am-page-subtitle {
  margin: .3rem 0 0;
  color: var(--am-text-3);
  font-size: .875rem;
  line-height: 1.45;
}
.am-page-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.am-page-flow { margin-left: auto; }
.am-page-flow + .am-page-actions { margin-left: 0; }
.am-primary-action { min-height: 38px; font-weight: 600 !important; }

.am-data-card {
  overflow: hidden;
  border-color: var(--am-border-mid) !important;
  box-shadow: var(--am-shadow-sm) !important;
}
.am-filter-panel {
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, var(--am-surface-alt), var(--am-surface));
  border-bottom: 1px solid var(--am-border-mid);
}
.am-filter-panel .form-label {
  margin-bottom: .35rem !important;
  color: var(--am-text-3) !important;
  font-size: .725rem !important;
  font-weight: 700 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.am-filter-panel .form-control,
.am-filter-panel .form-select { min-height: 38px; }
.am-filter-panel .input-group .btn { min-height: 38px; }

/* DataTables no debe inventar una segunda barra visual: sus controles
   pasan a ser la misma toolbar del resto de los listados. */
.am-data-card .dt-layout-row:first-child,
.am-data-card .dataTables_wrapper > .row:first-child {
  align-items: center;
  min-height: 64px;
  margin: 0 !important;
  padding: .75rem 1.25rem;
  background: var(--am-surface);
  border-bottom: 1px solid var(--am-border);
}
.am-data-card .dt-layout-cell,
.am-data-card .dataTables_length,
.am-data-card .dataTables_filter { padding: 0 !important; }
.am-data-card .dataTables_filter input,
.am-data-card .dt-input {
  min-height: 36px;
  background: var(--am-surface-alt) !important;
}
.am-data-card .dt-layout-row:last-child,
.am-data-card .dataTables_wrapper > .row:last-child {
  align-items: center;
  margin: 0 !important;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--am-border);
}
.am-data-card .table .btn,
.am-data-card .table .btn-group > .btn {
  min-height: 34px;
  padding: .375rem .7rem !important;
  font-size: .8125rem !important;
}
.am-data-card .table .btn-outline-primary { color: var(--am-blue) !important; border-color: rgba(0, 75, 151, .42) !important; }
.am-data-card .table .btn-outline-danger { color: var(--am-red) !important; border-color: rgba(235, 61, 99, .48) !important; }

/* Los estilos globales de .btn se declaran más arriba y más abajo en este
   archivo. Esta regla final evita que su padding rectángular afecte a los
   botones de acción que sólo contienen un icono. */
.btn.btn-icon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn.btn-icon > i {
  font-size: 1.125rem !important;
  line-height: 1 !important;
}
.am-data-card .table .btn-group { box-shadow: none; }

.am-module-tabs {
  display: flex;
  gap: .25rem;
  padding: .35rem;
  overflow-x: auto;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
}
.am-module-tabs .nav-link {
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: var(--am-radius-sm) !important;
  color: var(--am-text-3);
  font-size: .8125rem;
  font-weight: 600;
  padding: .45rem .75rem;
}
.am-module-tabs .nav-link:hover { background: var(--am-surface-hover); color: var(--am-text-1); }
.am-module-tabs .nav-link.active { background: var(--am-blue-soft); color: var(--am-blue); }

[data-bs-theme="dark"] {
  --am-blue-soft: rgba(32, 146, 236, .14);
  --am-teal-soft: rgba(13, 147, 148, .14);
  --am-amber-soft: rgba(255, 171, 29, .14);
  --am-red-soft: rgba(235, 61, 99, .14);
  --am-sky-soft: rgba(32, 146, 236, .16);
}
[data-bs-theme="dark"] .am-page-header {
  background: linear-gradient(90deg, var(--am-surface-alt), rgba(25, 43, 73, .72));
  border-bottom-color: var(--am-border-mid);
}
[data-bs-theme="dark"] .am-filter-panel { background: linear-gradient(90deg, rgba(255,255,255,.025), transparent); }