/* =========================================================
   UBICACIÓN:
   frontend/src/pages/capital-humano/capacitacion/capacitacion.css

   WIRTZ HUB · CAPITAL HUMANO · CAPACITACIÓN
   ESTILO UNIFICADO CON MI PERFIL + SIDEBAR

   PARTE 1 DE 2
   ========================================================= */

/* =========================================================
   01. RESET LOCAL
   ========================================================= */

.capacitacion-mount,
.capacitacion-mount *,
.capacitacion-mount *::before,
.capacitacion-mount *::after,
.capacitacion-modal-backdrop,
.capacitacion-modal-backdrop *,
.capacitacion-modal-backdrop *::before,
.capacitacion-modal-backdrop *::after,
.capacitacion-toast,
.capacitacion-toast *,
.capacitacion-toast *::before,
.capacitacion-toast *::after {
  box-sizing: border-box;

  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.capacitacion-mount {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: hidden;
}

.capacitacion-mount button,
.capacitacion-mount input,
.capacitacion-mount select,
.capacitacion-mount textarea,
.capacitacion-modal-backdrop button,
.capacitacion-modal-backdrop input,
.capacitacion-modal-backdrop select,
.capacitacion-modal-backdrop textarea {
  font: inherit;
}

.capacitacion-mount button,
.capacitacion-modal-backdrop button {
  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
}

.capacitacion-mount .icon,
.capacitacion-mount svg,
.capacitacion-modal-backdrop .icon,
.capacitacion-modal-backdrop svg,
.capacitacion-toast .icon,
.capacitacion-toast svg {
  display: block;

  width: 14px;
  height: 14px;

  min-width: 14px;
  min-height: 14px;

  flex: 0 0 auto;

  color: currentColor;

  stroke: currentColor;
  fill: none;

  stroke-width: 1.9;

  pointer-events: none;
}

/* =========================================================
   02. VARIABLES
   ========================================================= */

.capacitacion-page,
.capacitacion-modal,
.capacitacion-action-modal,
.capacitacion-toast {
  --cap-page:
    #f5f5f5;

  --cap-surface:
    #ffffff;

  --cap-surface-elevated:
    #ffffff;

  --cap-surface-soft:
    #f7f7f7;

  --cap-surface-muted:
    #eeeeee;

  --cap-surface-strong:
    #e8e8e8;

  --cap-hover:
    #f2f2f2;

  --cap-active:
    #e9e9e9;

  --cap-text:
    #0a0a0a;

  --cap-text-strong:
    #000000;

  --cap-text-soft:
    #404040;

  --cap-text-muted:
    #737373;

  --cap-text-faint:
    #a3a3a3;

  --cap-border:
    #dddddd;

  --cap-border-soft:
    #ebebeb;

  --cap-border-strong:
    #bfbfbf;

  --cap-primary:
    #0a0a0a;

  --cap-primary-text:
    #ffffff;

  --cap-green:
    #15803d;

  --cap-green-soft:
    rgba(
      21,
      128,
      61,
      0.065
    );

  --cap-green-line:
    rgba(
      21,
      128,
      61,
      0.28
    );

  --cap-red:
    #dc2626;

  --cap-red-soft:
    rgba(
      220,
      38,
      38,
      0.065
    );

  --cap-red-line:
    rgba(
      220,
      38,
      38,
      0.28
    );

  --cap-yellow:
    #b45309;

  --cap-yellow-soft:
    rgba(
      180,
      83,
      9,
      0.065
    );

  --cap-yellow-line:
    rgba(
      180,
      83,
      9,
      0.28
    );

  --cap-neutral:
    #404040;

  --cap-neutral-soft:
    rgba(
      0,
      0,
      0,
      0.045
    );

  --cap-neutral-line:
    rgba(
      0,
      0,
      0,
      0.18
    );

  --cap-radius-xs:
    6px;

  --cap-radius-sm:
    8px;

  --cap-radius:
    9px;

  --cap-radius-lg:
    11px;

  --cap-radius-xl:
    14px;

  --cap-ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --cap-transition-fast:
    130ms ease;

  --cap-transition:
    220ms var(
      --cap-ease
    );

  --cap-transition-slow:
    340ms var(
      --cap-ease
    );
}

/* =========================================================
   03. DARK
   ========================================================= */

html[data-theme="dark"]
.capacitacion-page,
html[data-theme="dark"]
.capacitacion-modal,
html[data-theme="dark"]
.capacitacion-action-modal,
html[data-theme="dark"]
.capacitacion-toast,
body.dark
.capacitacion-page,
body.dark
.capacitacion-modal,
body.dark
.capacitacion-action-modal,
body.dark
.capacitacion-toast,
.dark
.capacitacion-page,
.dark
.capacitacion-modal,
.dark
.capacitacion-action-modal,
.dark
.capacitacion-toast {
  --cap-page:
    #080808;

  --cap-surface:
    #090909;

  --cap-surface-elevated:
    #0d0d0d;

  --cap-surface-soft:
    #111111;

  --cap-surface-muted:
    #181818;

  --cap-surface-strong:
    #1d1d1d;

  --cap-hover:
    #151515;

  --cap-active:
    #1c1c1c;

  --cap-text:
    #f5f5f5;

  --cap-text-strong:
    #ffffff;

  --cap-text-soft:
    #cccccc;

  --cap-text-muted:
    #8a8a8a;

  --cap-text-faint:
    #5f5f5f;

  --cap-border:
    #272727;

  --cap-border-soft:
    #1c1c1c;

  --cap-border-strong:
    #3f3f3f;

  --cap-primary:
    #f5f5f5;

  --cap-primary-text:
    #080808;

  --cap-green:
    #4ade80;

  --cap-green-soft:
    rgba(
      74,
      222,
      128,
      0.075
    );

  --cap-green-line:
    rgba(
      74,
      222,
      128,
      0.28
    );

  --cap-red:
    #f87171;

  --cap-red-soft:
    rgba(
      248,
      113,
      113,
      0.075
    );

  --cap-red-line:
    rgba(
      248,
      113,
      113,
      0.28
    );

  --cap-yellow:
    #fbbf24;

  --cap-yellow-soft:
    rgba(
      251,
      191,
      36,
      0.075
    );

  --cap-yellow-line:
    rgba(
      251,
      191,
      36,
      0.28
    );

  --cap-neutral:
    #d4d4d4;

  --cap-neutral-soft:
    rgba(
      255,
      255,
      255,
      0.055
    );

  --cap-neutral-line:
    rgba(
      255,
      255,
      255,
      0.18
    );
}

/* =========================================================
   04. APP CONTENT
   ========================================================= */

.app-content:has(
  .capacitacion-page
) {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;

  background:
    var(
      --cap-page
    ) !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body:has(
  .capacitacion-page
),
body:has(
  .capacitacion-page
)
.app-shell,
body:has(
  .capacitacion-page
)
.app-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: hidden;
}

body:has(
  .capacitacion-page
)
.app-footer,
body:has(
  .capacitacion-page
)
footer.app-footer {
  position: static !important;

  inset: auto !important;

  width: 100% !important;

  margin-top: 8px !important;

  transform: none !important;
}

/* =========================================================
   05. PAGE
   ========================================================= */

.capacitacion-page {
  position: relative;

  display: grid;

  grid-auto-rows:
    max-content;

  align-content: start;

  gap: 10px;

  width: 100%;
  max-width: none;
  min-width: 0;

  min-height:
    calc(
      100vh -
      var(
        --topbar-height,
        54px
      )
    );

  padding: 8px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-page
    );

  overflow-x: hidden;

  isolation: isolate;

  animation:
    capacitacionPageIn
    300ms
    var(
      --cap-ease
    )
    both;
}

/* =========================================================
   06. CABECERA
   ========================================================= */

.capacitacion-head {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 12px;

  width: 100%;
  min-width: 0;

  min-height: 108px;

  padding: 12px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-xl
    );

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );

  overflow: hidden;

  transition:
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-head::before {
  content: "";

  position: absolute;

  top: 0;
  left: 14px;
  right: 14px;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(
        --cap-border-strong
      ),
      transparent
    );

  opacity: 0.7;

  pointer-events: none;
}

.capacitacion-head::after {
  content: "";

  position: absolute;

  right: -65px;
  bottom: -65px;

  width: 160px;
  height: 160px;

  border:
    1px
    solid
    var(
      --cap-border-soft
    );

  border-radius: 50%;

  opacity: 0.65;

  pointer-events: none;
}

.capacitacion-head:hover {
  border-color:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   07. BRAND
   ========================================================= */

.capacitacion-brand {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    54px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 11px;

  min-width: 0;
}

.capacitacion-brand__icon {
  position: relative;

  display: grid;

  width: 52px;
  height: 52px;

  min-width: 52px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 13px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  overflow: hidden;

  transition:
    transform
      var(
        --cap-transition
      ),
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-brand__icon::before,
.capacitacion-brand__icon::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.65;

  pointer-events: none;
}

.capacitacion-brand__icon::before {
  top: 5px;
  left: 5px;

  border-top:
    1px
    solid
    var(
      --cap-text-muted
    );

  border-left:
    1px
    solid
    var(
      --cap-text-muted
    );
}

.capacitacion-brand__icon::after {
  right: 5px;
  bottom: 5px;

  border-right:
    1px
    solid
    var(
      --cap-text-muted
    );

  border-bottom:
    1px
    solid
    var(
      --cap-text-muted
    );
}

.capacitacion-head:hover
.capacitacion-brand__icon {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --cap-text
    );
}

.capacitacion-brand__icon .icon,
.capacitacion-brand__icon svg {
  width: 21px;
  height: 21px;
}

/* =========================================================
   08. BRAND CONTENT
   ========================================================= */

.capacitacion-brand__content {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-eyebrow {
  display: block;

  min-width: 0;

  margin: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-brand h1 {
  min-width: 0;

  margin: 2px 0 0;

  color:
    var(
      --cap-text-strong
    );

  font-size:
    clamp(
      24px,
      2.1vw,
      30px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.045em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-brand p {
  min-width: 0;

  max-width: 760px;

  margin: 2px 0 0;

  color:
    var(
      --cap-text-soft
    );

  font-size: 10px;
  font-weight: 650;

  line-height: 1.35;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   09. HEADER ACTIONS
   ========================================================= */

.capacitacion-head__actions {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}

/* =========================================================
   10. PERIOD
   ========================================================= */

.capacitacion-period {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  min-height: 34px;

  padding:
    0
    9px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-sm
    );

  color:
    var(
      --cap-text-soft
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 9px;
  font-weight: 750;

  white-space: nowrap;
}

.capacitacion-period .icon,
.capacitacion-period svg {
  width: 12px;
  height: 12px;

  color:
    var(
      --cap-text-muted
    );
}

/* =========================================================
   11. BUTTONS
   ========================================================= */

.capacitacion-btn,
.capacitacion-icon-btn,
.capacitacion-detail-panel__close,
.capacitacion-modal__close {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 0;

  min-height: 34px;

  padding:
    0
    10px;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius:
    var(
      --cap-radius-sm
    );

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );

  font-size: 9px;
  font-weight: 780;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  outline: 0;

  box-shadow: none;

  transition:
    color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      ),
    border-color
      var(
        --cap-transition-fast
      ),
    transform
      var(
        --cap-transition
      ),
    opacity
      var(
        --cap-transition-fast
      );
}

.capacitacion-btn:hover:not(
  :disabled
),
.capacitacion-icon-btn:hover:not(
  :disabled
),
.capacitacion-detail-panel__close:hover:not(
  :disabled
),
.capacitacion-modal__close:hover:not(
  :disabled
) {
  border-color:
    var(
      --cap-text
    );

  color:
    var(
      --cap-surface
    );

  background:
    var(
      --cap-text
    );

  transform:
    translateY(
      -1px
    );
}

.capacitacion-btn:active:not(
  :disabled
),
.capacitacion-icon-btn:active:not(
  :disabled
),
.capacitacion-detail-panel__close:active:not(
  :disabled
),
.capacitacion-modal__close:active:not(
  :disabled
) {
  transform:
    scale(
      0.97
    );
}

.capacitacion-btn:disabled,
.capacitacion-icon-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;

  transform: none;
}

.capacitacion-btn .icon,
.capacitacion-btn svg,
.capacitacion-icon-btn .icon,
.capacitacion-icon-btn svg,
.capacitacion-detail-panel__close .icon,
.capacitacion-detail-panel__close svg,
.capacitacion-modal__close .icon,
.capacitacion-modal__close svg {
  width: 12px;
  height: 12px;
}

/* =========================================================
   12. BUTTON PRIMARY
   ========================================================= */

.capacitacion-btn--primary {
  border-color:
    var(
      --cap-primary
    );

  color:
    var(
      --cap-primary-text
    );

  background:
    var(
      --cap-primary
    );
}

.capacitacion-btn--primary:hover:not(
  :disabled
) {
  border-color:
    var(
      --cap-primary
    );

  color:
    var(
      --cap-primary-text
    );

  background:
    var(
      --cap-primary
    );

  opacity: 0.86;
}

/* =========================================================
   13. BUTTON SECONDARY
   ========================================================= */

.capacitacion-btn--secondary {
  background:
    var(
      --cap-surface-soft
    );
}

/* =========================================================
   14. BUTTON DANGER
   ========================================================= */

.capacitacion-btn--danger {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-btn--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --cap-red
    );

  color: #ffffff;

  background:
    var(
      --cap-red
    );
}

/* =========================================================
   15. FOCUS
   ========================================================= */

.capacitacion-btn:focus-visible,
.capacitacion-icon-btn:focus-visible,
.capacitacion-detail-panel__close:focus-visible,
.capacitacion-modal__close:focus-visible {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(
        --cap-text
      )
      18%,
      transparent
    );

  outline-offset: 2px;
}

/* =========================================================
   16. MÉTRICAS
   ========================================================= */

.capacitacion-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );

  gap: 1px;

  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-xl
    );

  background:
    var(
      --cap-border
    );

  overflow: hidden;
}

/* =========================================================
   17. MÉTRICA
   ========================================================= */

.capacitacion-metric {
  position: relative;

  display: grid;

  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 72px;

  padding:
    8px
    9px;

  background:
    var(
      --cap-surface
    );

  overflow: hidden;

  transition:
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-metric::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 2px;
  height: 0;

  border-radius:
    0
    999px
    999px
    0;

  background:
    currentColor;

  opacity: 0;

  transform:
    translateY(
      -50%
    );

  transition:
    height
      var(
        --cap-transition
      ),
    opacity
      var(
        --cap-transition-fast
      );
}

.capacitacion-metric:hover {
  background:
    var(
      --cap-hover
    );
}

.capacitacion-metric:hover::before {
  height: 20px;

  opacity: 0.45;
}

.capacitacion-metric__icon {
  display: grid;

  width: 36px;
  height: 36px;

  min-width: 36px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 9px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  transition:
    transform
      var(
        --cap-transition
      ),
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-metric:hover
.capacitacion-metric__icon {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --cap-border-strong
    );
}

.capacitacion-metric__icon .icon,
.capacitacion-metric__icon svg {
  width: 16px;
  height: 16px;
}

.capacitacion-metric__content {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-metric__content > span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-metric__content strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 18px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.035em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-metric__content small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   18. MÉTRICAS SEMÁNTICAS
   ========================================================= */

.capacitacion-metric.is-planned
.capacitacion-metric__icon,
.capacitacion-metric.is-participants
.capacitacion-metric__icon {
  border-color:
    var(
      --cap-neutral-line
    );

  color:
    var(
      --cap-neutral
    );

  background:
    var(
      --cap-neutral-soft
    );
}

.capacitacion-metric.is-active
.capacitacion-metric__icon {
  border-color:
    var(
      --cap-yellow-line
    );

  color:
    var(
      --cap-yellow
    );

  background:
    var(
      --cap-yellow-soft
    );
}

.capacitacion-metric.is-success
.capacitacion-metric__icon {
  border-color:
    var(
      --cap-green-line
    );

  color:
    var(
      --cap-green
    );

  background:
    var(
      --cap-green-soft
    );
}

.capacitacion-metric.is-danger
.capacitacion-metric__icon {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

/* =========================================================
   19. WORKSPACE
   ========================================================= */

.capacitacion-workspace {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      300px,
      340px
    );

  align-items: start;

  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-xl
    );

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );

  overflow: hidden;
}

.capacitacion-workspace__main {
  display: grid;

  min-width: 0;

  border-right:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface
    );
}

/* =========================================================
   20. FILTER PANEL
   ========================================================= */

.capacitacion-filter-panel {
  display: grid;

  min-width: 0;

  border-bottom:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface
    );
}

/* =========================================================
   21. FILTER HEADER
   ========================================================= */

.capacitacion-filter-panel__head {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 10px;

  min-width: 0;

  min-height: 52px;

  padding:
    8px
    10px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-filter-panel__head > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-filter-panel__head > div > span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.085em;

  text-transform: uppercase;
}

.capacitacion-filter-panel__head > div > strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 13px;
  font-weight: 850;

  line-height: 1.1;
}

/* =========================================================
   22. RESULT COUNT
   ========================================================= */

.capacitacion-result-count {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 700;

  white-space: nowrap;
}

.capacitacion-result-count .icon,
.capacitacion-result-count svg {
  width: 11px;
  height: 11px;
}

.capacitacion-result-count strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 8.5px;
  font-weight: 850;
}

/* =========================================================
   23. PRIMARY FILTERS
   ========================================================= */

.capacitacion-primary-filters {
  display: grid;

  grid-template-columns:
    minmax(
      220px,
      1.6fr
    )
    minmax(
      120px,
      0.7fr
    )
    minmax(
      120px,
      0.7fr
    )
    minmax(
      130px,
      0.8fr
    )
    auto
    auto;

  align-items: end;

  gap: 6px;

  min-width: 0;

  padding:
    8px
    9px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface
    );
}

/* =========================================================
   24. SEARCH
   ========================================================= */

.capacitacion-search {
  display: grid;

  grid-template-columns:
    15px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 6px;

  width: 100%;
  min-width: 0;

  height: 36px;

  padding:
    0
    9px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-sm
    );

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface-soft
    );

  transition:
    border-color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-search:focus-within {
  border-color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-search .icon,
.capacitacion-search svg {
  width: 12px;
  height: 12px;
}

.capacitacion-search input {
  width: 100%;
  min-width: 0;

  height: 34px;

  padding: 0;

  border: 0;

  outline: 0;

  color:
    var(
      --cap-text
    );

  background: transparent;

  font-size: 9.5px;
  font-weight: 700;
}

.capacitacion-search input::placeholder {
  color:
    var(
      --cap-text-faint
    );
}

/* =========================================================
   25. FILTER CONTROL
   ========================================================= */

.capacitacion-filter-control {
  display: grid;

  gap: 4px;

  min-width: 0;
}

.capacitacion-filter-control > span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-filter-control input,
.capacitacion-filter-control select {
  width: 100%;
  min-width: 0;

  height: 36px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-sm
    );

  outline: 0;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 9.5px;
  font-weight: 700;

  transition:
    border-color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-filter-control input:focus,
.capacitacion-filter-control select:focus {
  border-color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );
}

html[data-theme="dark"]
.capacitacion-filter-control input,
html[data-theme="dark"]
.capacitacion-filter-control select {
  color-scheme: dark;
}

/* =========================================================
   26. ADVANCED TOGGLE
   ========================================================= */

.capacitacion-advanced-toggle {
  min-width: 150px;
}

.capacitacion-advanced-toggle b {
  display: inline-grid;

  min-width: 18px;
  height: 18px;

  place-items: center;

  padding:
    0
    5px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 999px;

  color:
    var(
      --cap-primary-text
    );

  background:
    var(
      --cap-primary
    );

  font-size: 7px;
  font-weight: 900;

  line-height: 1;
}

/* =========================================================
   27. ADVANCED FILTERS
   ========================================================= */

.capacitacion-advanced-filters {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  align-items: end;

  gap: 6px;

  min-width: 0;

  padding:
    8px
    9px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface-soft
    );

  animation:
    capacitacionFiltersIn
    220ms
    var(
      --cap-ease
    )
    both;
}

.capacitacion-advanced-filters[hidden] {
  display: none !important;
}

.capacitacion-advanced-filters
.capacitacion-btn {
  width: 100%;
}

/* =========================================================
   28. FILTER CHIPS
   ========================================================= */

.capacitacion-filter-chips {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;

  min-height: 38px;

  padding:
    6px
    9px;

  background:
    var(
      --cap-surface
    );
}

.capacitacion-filter-chips__label {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-filter-chips__empty {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;
}

.capacitacion-filter-chip {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-width: 0;
  max-width: 100%;

  min-height: 25px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 999px;

  color:
    var(
      --cap-text-soft
    );

  background:
    var(
      --cap-surface-soft
    );

  cursor: pointer;

  transition:
    color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      ),
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-filter-chip:hover {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-filter-chip > span,
.capacitacion-filter-chip > strong {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-filter-chip > span {
  font-size: 7.5px;
  font-weight: 650;
}

.capacitacion-filter-chip > strong {
  font-size: 7.5px;
  font-weight: 850;
}

.capacitacion-filter-chip .icon,
.capacitacion-filter-chip svg {
  width: 10px;
  height: 10px;
}

/* =========================================================
   29. TABLE PANEL
   ========================================================= */

.capacitacion-table-panel {
  display: grid;

  min-width: 0;

  background:
    var(
      --cap-surface
    );

  overflow: hidden;
}

/* =========================================================
   30. TABLE WRAP
   ========================================================= */

.capacitacion-table-wrap {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --cap-border-strong
    )
    transparent;
}

.capacitacion-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.capacitacion-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.capacitacion-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   31. TABLE
   ========================================================= */

.capacitacion-table {
  width: 100%;

  min-width: 1060px;

  border-collapse: collapse;

  table-layout: auto;

  background:
    var(
      --cap-surface
    );
}

.capacitacion-table th,
.capacitacion-table td {
  min-width: 0;

  padding:
    8px
    9px;

  border-right:
    1px
    solid
    var(
      --cap-border
    );

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  color:
    var(
      --cap-text
    );

  text-align: left;

  vertical-align: middle;
}

.capacitacion-table th:last-child,
.capacitacion-table td:last-child {
  border-right: 0;
}

.capacitacion-table thead th {
  position: sticky;

  top: 0;

  z-index: 3;

  height: 38px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 7.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.075em;

  text-transform: uppercase;

  white-space: nowrap;
}

.capacitacion-table td {
  font-size: 8.8px;
  font-weight: 650;
}

.capacitacion-table tbody tr {
  background:
    var(
      --cap-surface
    );

  cursor: pointer;

  outline: 0;

  transition:
    background
      var(
        --cap-transition-fast
      ),
    opacity
      var(
        --cap-transition-fast
      );
}

.capacitacion-table tbody tr:hover {
  background:
    var(
      --cap-hover
    );
}

.capacitacion-table tbody tr:focus-visible {
  outline:
    1px
    solid
    var(
      --cap-text
    );

  outline-offset: -1px;
}

.capacitacion-table tbody tr.is-selected {
  background:
    var(
      --cap-surface-muted
    );
}

.capacitacion-table tbody tr.is-selected
td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --cap-text
    );
}

.capacitacion-table tbody tr.is-inactive {
  opacity: 0.48;
}

.capacitacion-table tbody tr.is-inactive:hover {
  opacity: 0.7;
}

/* =========================================================
   32. TITLE CELL
   ========================================================= */

.capacitacion-title-cell {
  display: grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 8px;

  min-width: 200px;
}

.capacitacion-title-cell__icon {
  display: grid;

  width: 34px;
  height: 34px;

  min-width: 34px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 9px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 8px;
  font-weight: 900;
}

.capacitacion-title-cell__content {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-title-cell__content strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 10px;
  font-weight: 800;

  line-height: 1.1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-title-cell__content small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.7px;
  font-weight: 650;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-title-cell__content > span {
  min-width: 0;

  color:
    var(
      --cap-text-faint
    );

  font-size: 7.3px;
  font-weight: 650;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   33. BADGES
   ========================================================= */

.capacitacion-state,
.capacitacion-modality,
.capacitacion-participant-state,
.capacitacion-certificate-ok,
.capacitacion-certificate-pending {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-height: 24px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 999px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 7.7px;
  font-weight: 820;

  line-height: 1;

  white-space: nowrap;
}

.capacitacion-state--borrador {
  color:
    var(
      --cap-text-muted
    );
}

.capacitacion-state--planificada,
.capacitacion-modality,
.capacitacion-participant-state--asignado,
.capacitacion-participant-state--confirmado,
.capacitacion-participant-state--excusado {
  border-color:
    var(
      --cap-neutral-line
    );

  color:
    var(
      --cap-neutral
    );

  background:
    var(
      --cap-neutral-soft
    );
}

.capacitacion-state--en-curso {
  border-color:
    var(
      --cap-yellow-line
    );

  color:
    var(
      --cap-yellow
    );

  background:
    var(
      --cap-yellow-soft
    );
}

.capacitacion-state--completada,
.capacitacion-participant-state--presente,
.capacitacion-participant-state--aprobado,
.capacitacion-certificate-ok {
  border-color:
    var(
      --cap-green-line
    );

  color:
    var(
      --cap-green
    );

  background:
    var(
      --cap-green-soft
    );
}

.capacitacion-state--cancelada,
.capacitacion-participant-state--ausente,
.capacitacion-participant-state--desaprobado,
.capacitacion-participant-state--cancelado {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-certificate-pending {
  border-color:
    var(
      --cap-yellow-line
    );

  color:
    var(
      --cap-yellow
    );

  background:
    var(
      --cap-yellow-soft
    );
}

/* =========================================================
   34. SECONDARY CELLS
   ========================================================= */

.capacitacion-date-cell,
.capacitacion-instructor,
.capacitacion-count-cell,
.capacitacion-certificate-cell {
  display: grid;

  gap: 3px;

  min-width: 90px;
}

.capacitacion-date-cell {
  min-width: 125px;
}

.capacitacion-instructor {
  min-width: 110px;
}

.capacitacion-date-cell strong,
.capacitacion-instructor strong,
.capacitacion-count-cell strong,
.capacitacion-certificate-cell strong {
  min-width: 0;

  color:
    var(
      --cap-text
    );

  font-size: 9px;
  font-weight: 800;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-date-cell small,
.capacitacion-instructor small,
.capacitacion-count-cell small,
.capacitacion-certificate-cell small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-expired {
  color:
    var(
      --cap-red
    ) !important;

  font-weight: 850 !important;
}

.capacitacion-certificate-date {
  display: block;

  margin-top: 3px;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;
}

/* =========================================================
   35. ROW ACTIONS
   ========================================================= */

.capacitacion-row-actions {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 4px;

  min-width: 0;
}

.capacitacion-icon-btn,
.capacitacion-detail-panel__close,
.capacitacion-modal__close {
  width: 29px;
  height: 29px;

  min-width: 29px;
  min-height: 29px;

  flex:
    0 0 29px;

  padding: 0;

  border-radius: 7px;
}

.capacitacion-icon-btn--danger {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-icon-btn--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --cap-red
    );

  color: #ffffff;

  background:
    var(
      --cap-red
    );
}

/* =========================================================
   36. TABLE MESSAGES
   ========================================================= */

.capacitacion-table-message {
  padding: 0 !important;
}

.capacitacion-loading,
.capacitacion-empty {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 7px;

  min-height: 260px;

  padding: 24px;

  text-align: center;
}

.capacitacion-loading > .icon,
.capacitacion-loading > svg,
.capacitacion-empty > .icon,
.capacitacion-empty > svg {
  width: 24px;
  height: 24px;

  color:
    var(
      --cap-text-muted
    );
}

.capacitacion-loading strong,
.capacitacion-empty strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 11px;
  font-weight: 800;

  line-height: 1.2;
}

.capacitacion-loading span,
.capacitacion-empty span {
  max-width: 350px;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;

  line-height: 1.4;
}

.capacitacion-empty--error > .icon,
.capacitacion-empty--error > svg,
.capacitacion-empty--error strong {
  color:
    var(
      --cap-red
    );
}

.capacitacion-empty--compact {
  min-height: 130px;

  padding: 18px;
}

/* =========================================================
   37. PAGINATION
   ========================================================= */

.capacitacion-pagination {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

  min-height: 50px;

  padding:
    7px
    9px;

  border-top:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-pagination__info {
  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;
}

.capacitacion-pagination__info strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 8.5px;
  font-weight: 850;
}

.capacitacion-pagination__actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  min-width: 0;
}

.capacitacion-pagination__actions
.capacitacion-btn {
  min-height: 30px;

  padding:
    0
    8px;

  font-size: 8.5px;
}

.capacitacion-pagination__page {
  display: inline-flex;

  align-items: center;

  gap: 3px;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;

  white-space: nowrap;
}

.capacitacion-pagination__page strong {
  color:
    var(
      --cap-text-strong
    );

  font-weight: 850;
}

/* =========================================================
   38. DETAIL PANEL
   ========================================================= */

.capacitacion-detail-panel {
  position: sticky;

  top:
    calc(
      var(
        --topbar-height,
        54px
      )
      +
      8px
    );

  display: grid;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  width: 100%;
  min-width: 0;

  max-height:
    calc(
      100vh -
      var(
        --topbar-height,
        54px
      )
      -
      16px
    );

  background:
    var(
      --cap-surface
    );

  overflow: hidden;
}

/* =========================================================
   39. DETAIL HEADER
   ========================================================= */

.capacitacion-detail-panel__head {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 54px;

  padding:
    7px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-detail-panel__brand {
  display: grid;

  grid-template-columns:
    30px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.capacitacion-detail-panel__icon {
  display: grid;

  width: 30px;
  height: 30px;

  min-width: 30px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 7px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-detail-panel__icon .icon,
.capacitacion-detail-panel__icon svg {
  width: 13px;
  height: 13px;
}

.capacitacion-detail-panel__brand > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-detail-panel__brand span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-detail-panel__brand strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9.7px;
  font-weight: 800;

  line-height: 1.15;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-detail-panel__close {
  display: none;
}

/* =========================================================
   40. DETAIL BODY
   ========================================================= */

.capacitacion-detail-panel__body {
  min-width: 0;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --cap-border-strong
    )
    transparent;
}

.capacitacion-detail-panel__body::-webkit-scrollbar {
  width: 6px;
}

.capacitacion-detail-panel__body::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   41. DETAIL FOOTER
   ========================================================= */

.capacitacion-detail-panel__footer {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;

  min-height: 48px;

  padding:
    6px
    7px;

  border-top:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-detail-panel__footer[hidden] {
  display: none !important;
}

/* =========================================================
   42. DETAIL EMPTY / LOADING
   ========================================================= */

.capacitacion-detail-empty,
.capacitacion-detail-loading {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 7px;

  min-height: 350px;

  padding: 22px;

  text-align: center;
}

.capacitacion-detail-empty__icon {
  display: grid;

  width: 42px;
  height: 42px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 10px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-detail-empty__icon .icon,
.capacitacion-detail-empty__icon svg {
  width: 17px;
  height: 17px;
}

.capacitacion-detail-empty__eyebrow {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-detail-empty strong,
.capacitacion-detail-loading strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 10.5px;
  font-weight: 800;
}

.capacitacion-detail-empty p,
.capacitacion-detail-loading span {
  max-width: 270px;

  margin: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 8px;
  font-weight: 650;

  line-height: 1.4;
}

.capacitacion-detail-loading > .icon,
.capacitacion-detail-loading > svg {
  width: 22px;
  height: 22px;

  color:
    var(
      --cap-text
    );
}

/* =========================================================
   43. DETAIL PROFILE
   ========================================================= */

.capacitacion-detail-profile {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding:
    9px
    10px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-detail-profile__main {
  display: grid;

  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 8px;

  min-width: 0;
}

.capacitacion-detail-profile__avatar {
  display: grid;

  width: 36px;
  height: 36px;

  min-width: 36px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 9px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 8px;
  font-weight: 900;
}

.capacitacion-detail-profile__main > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-detail-profile__main > div > span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-detail-profile__main strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9.7px;
  font-weight: 800;

  line-height: 1.1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-detail-profile__main small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   44. DETAIL SECTIONS
   ========================================================= */

.capacitacion-detail-section {
  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-detail-section:last-child {
  border-bottom: 0;
}

.capacitacion-detail-section__head {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-height: 44px;

  padding:
    6px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-detail-section__head > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-detail-section__head span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-detail-section__head strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 9px;
  font-weight: 800;

  line-height: 1.15;
}

.capacitacion-detail-section__head > .icon,
.capacitacion-detail-section__head > svg {
  width: 12px;
  height: 12px;

  color:
    var(
      --cap-text-muted
    );
}

.capacitacion-detail-section__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  padding: 7px;

  border-top:
    1px
    solid
    var(
      --cap-border
    );
}

/* =========================================================
   45. DETAIL STATS
   ========================================================= */

.capacitacion-detail-stats {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}

.capacitacion-detail-stats article {
  display: grid;

  gap: 4px;

  min-width: 0;

  min-height: 60px;

  padding: 8px;

  border-right:
    1px
    solid
    var(
      --cap-border
    );

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );
}

.capacitacion-detail-stats article:nth-child(
  2n
) {
  border-right: 0;
}

.capacitacion-detail-stats article:nth-last-child(
  -n + 2
) {
  border-bottom: 0;
}

.capacitacion-detail-stats span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 650;
}

.capacitacion-detail-stats strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 14px;
  font-weight: 900;

  line-height: 1;
}

.capacitacion-detail-stats strong.is-danger {
  color:
    var(
      --cap-red
    );
}

.capacitacion-detail-stats small {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;
}

/* =========================================================
   46. DETAIL LIST
   ========================================================= */

.capacitacion-detail-list {
  display: grid;
}

.capacitacion-detail-list article {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 38px;

  padding:
    6px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );
}

.capacitacion-detail-list article:last-child {
  border-bottom: 0;
}

.capacitacion-detail-list span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 650;
}

.capacitacion-detail-list strong {
  max-width: 170px;

  color:
    var(
      --cap-text
    );

  font-size: 8px;
  font-weight: 800;

  text-align: right;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   47. DETAIL TEXT
   ========================================================= */

.capacitacion-detail-text {
  padding: 8px;
}

.capacitacion-detail-text p {
  margin: 0;

  color:
    var(
      --cap-text-soft
    );

  font-size: 8px;
  font-weight: 650;

  line-height: 1.45;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}

/* =========================================================
   48. DETAIL LINK
   ========================================================= */

.capacitacion-detail-link {
  padding: 8px;

  border-top:
    1px
    solid
    var(
      --cap-border
    );
}

.capacitacion-detail-link a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 5px;

  min-height: 32px;

  padding:
    0
    8px;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 7px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 8px;
  font-weight: 800;

  text-decoration: none;

  transition:
    color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      ),
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-detail-link a:hover {
  border-color:
    var(
      --cap-text
    );

  color:
    var(
      --cap-surface
    );

  background:
    var(
      --cap-text
    );
}

/* =========================================================
   49. PARTICIPANTS PREVIEW
   ========================================================= */

.capacitacion-participants-preview {
  display: grid;
}

.capacitacion-participant-preview {
  display: grid;

  grid-template-columns:
    30px
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 48px;

  padding:
    7px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );
}

.capacitacion-participant-preview:last-child {
  border-bottom: 0;
}

.capacitacion-participant-preview__avatar {
  display: grid;

  width: 30px;
  height: 30px;

  min-width: 30px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 7px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 7.5px;
  font-weight: 900;
}

.capacitacion-participant-preview > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-participant-preview > div strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 8.5px;
  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-participant-preview > div small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-participants-more {
  display: block;

  padding:
    7px
    8px;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 800;

  text-align: center;
}

.capacitacion-participants-empty {
  display: grid;

  place-items: center;

  gap: 6px;

  min-height: 110px;

  padding: 16px;

  text-align: center;
}

.capacitacion-participants-empty .icon,
.capacitacion-participants-empty svg {
  width: 21px;
  height: 21px;

  color:
    var(
      --cap-text-muted
    );
}

.capacitacion-participants-empty strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 9px;
  font-weight: 800;
}

.capacitacion-participants-empty span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 650;
}

/* =========================================================
   50. SESSIONS / HISTORY
   ========================================================= */

.capacitacion-sessions,
.capacitacion-history {
  display: grid;

  gap: 6px;

  padding: 7px;
}

.capacitacion-session,
.capacitacion-history__item {
  display: grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    );

  gap: 7px;

  min-width: 0;

  padding: 7px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 8px;

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-session__icon,
.capacitacion-history__icon {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 7px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-session__icon .icon,
.capacitacion-session__icon svg,
.capacitacion-history__icon .icon,
.capacitacion-history__icon svg {
  width: 11px;
  height: 11px;
}

.capacitacion-session > div,
.capacitacion-history__item > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-session strong,
.capacitacion-history__item strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 8px;
  font-weight: 850;
}

.capacitacion-session small,
.capacitacion-history__item small {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 650;
}

.capacitacion-session p,
.capacitacion-history__item p {
  margin: 0;

  color:
    var(
      --cap-text-soft
    );

  font-size: 7.5px;
  font-weight: 650;

  line-height: 1.4;

  overflow-wrap: anywhere;
}

/* =========================================================
   51. SPIN
   ========================================================= */

.capacitacion-spin {
  animation:
    capacitacionSpin
    820ms
    linear
    infinite;
}

/* =========================================================
   CONTINÚA EN PARTE 2

   INCLUYE:
   - Modal principal
   - Modal acciones
   - Modal participante
   - Gestión de participantes
   - Formularios
   - Switches
   - Toast
   - Responsive desktop
   - Responsive tablet
   - Tabla a tarjetas en móvil
   - Panel lateral móvil
   - Cero scroll horizontal
   - Animaciones
   ========================================================= *//* =========================================================
   52. MODAL BACKDROP
   ========================================================= */

.capacitacion-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-items: center;

  padding: 10px;

  background:
    rgba(
      0,
      0,
      0,
      0.72
    );

  overflow-x: hidden;
  overflow-y: auto;

  animation:
    capacitacionBackdropIn
    180ms
    ease
    both;
}

/* =========================================================
   53. MODAL BASE
   ========================================================= */

.capacitacion-modal,
.capacitacion-action-modal {
  width:
    min(
      980px,
      100%
    );

  max-height:
    calc(
      100dvh -
      20px
    );

  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius:
    var(
      --cap-radius-xl
    );

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );

  box-shadow: none;

  overflow: hidden;

  animation:
    capacitacionModalIn
    220ms
    var(
      --cap-ease
    )
    both;
}

.capacitacion-action-modal {
  width:
    min(
      560px,
      100%
    );
}

.capacitacion-modal--participant {
  width:
    min(
      780px,
      100%
    );
}

.capacitacion-modal--participants-manager {
  width:
    min(
      1020px,
      100%
    );
}

/* =========================================================
   54. MODAL HEADER
   ========================================================= */

.capacitacion-modal__head,
.capacitacion-action-modal__head {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 9px;

  min-width: 0;

  min-height: 60px;

  padding:
    8px
    9px;

  border-bottom:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-modal__head::before,
.capacitacion-action-modal__head::before {
  content: "";

  position: absolute;

  top: 0;
  left: 10px;

  width: 26px;
  height: 1px;

  background:
    var(
      --cap-text
    );

  opacity: 0.24;
}

/* =========================================================
   55. MODAL BRAND
   ========================================================= */

.capacitacion-modal__brand,
.capacitacion-action-modal__brand {
  display: grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.capacitacion-modal__icon,
.capacitacion-action-modal__icon {
  display: grid;

  width: 33px;
  height: 33px;

  min-width: 33px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 8px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-modal__icon .icon,
.capacitacion-modal__icon svg,
.capacitacion-action-modal__icon .icon,
.capacitacion-action-modal__icon svg {
  width: 14px;
  height: 14px;
}

.capacitacion-modal__brand > div,
.capacitacion-action-modal__brand > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-modal__brand span,
.capacitacion-action-modal__brand span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.085em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-modal__brand h2,
.capacitacion-action-modal__brand h2 {
  min-width: 0;

  margin: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 13px;
  font-weight: 850;

  line-height: 1.1;

  letter-spacing: -0.025em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-modal__brand p,
.capacitacion-action-modal__brand p {
  min-width: 0;

  margin: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.7px;
  font-weight: 650;

  line-height: 1.25;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   56. MODAL CLOSE
   ========================================================= */

.capacitacion-modal__close {
  width: 29px;
  height: 29px;

  min-width: 29px;
  min-height: 29px;

  flex: 0 0 29px;

  padding: 0;
}

/* =========================================================
   57. FORM PRINCIPAL
   ========================================================= */

.capacitacion-form {
  display: grid;

  grid-template-rows:
    minmax(
      0,
      1fr
    )
    auto;

  min-width: 0;
  min-height: 0;

  max-height:
    calc(
      100dvh -
      80px
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-form__body {
  display: grid;

  align-content: start;

  gap: 7px;

  min-width: 0;
  min-height: 0;

  padding: 7px;

  background:
    var(
      --cap-page
    );

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --cap-border-strong
    )
    transparent;
}

.capacitacion-form__body::-webkit-scrollbar {
  width: 6px;
}

.capacitacion-form__body::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   58. FORM SECTION
   ========================================================= */

.capacitacion-form-section {
  display: grid;

  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-lg
    );

  background:
    var(
      --cap-surface
    );

  overflow: hidden;

  transition:
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-form-section:hover {
  border-color:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   59. FORM SECTION TITLE
   ========================================================= */

.capacitacion-form-section__title {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 42px;

  padding:
    6px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-form-section__title > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-form-section__title span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-form-section__title strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9.3px;
  font-weight: 800;

  line-height: 1.1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-form-section__title > .icon,
.capacitacion-form-section__title > svg {
  width: 12px;
  height: 12px;

  color:
    var(
      --cap-text-muted
    );
}

/* =========================================================
   60. FORM GRID
   ========================================================= */

.capacitacion-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  min-width: 0;
}

/* =========================================================
   61. FIELD
   ========================================================= */

.capacitacion-field,
.capacitacion-switch {
  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  min-height: 58px;

  padding:
    7px
    8px;

  border-right:
    1px
    solid
    var(
      --cap-border
    );

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  background:
    var(
      --cap-surface
    );

  transition:
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-field:hover,
.capacitacion-field:focus-within,
.capacitacion-switch:hover {
  background:
    var(
      --cap-hover
    );
}

.capacitacion-field:nth-child(
  3n
),
.capacitacion-switch:nth-child(
  3n
) {
  border-right: 0;
}

.capacitacion-field--wide {
  grid-column:
    span
    2;
}

.capacitacion-field--full {
  grid-column:
    1 /
    -1;

  border-right: 0;
}

.capacitacion-field[hidden] {
  display: none !important;
}

/* =========================================================
   62. FIELD LABEL
   ========================================================= */

.capacitacion-field > span {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   63. FIELD CONTROLS
   ========================================================= */

.capacitacion-field input,
.capacitacion-field select,
.capacitacion-field textarea {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 7px;

  outline: 0;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 9.2px;
  font-weight: 700;

  transition:
    border-color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-field input,
.capacitacion-field select {
  height: 32px;

  padding:
    0
    7px;
}

.capacitacion-field textarea {
  min-height: 66px;

  padding: 7px;

  line-height: 1.4;

  resize: vertical;
}

.capacitacion-field input:focus,
.capacitacion-field select:focus,
.capacitacion-field textarea:focus {
  border-color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-field input::placeholder,
.capacitacion-field textarea::placeholder {
  color:
    var(
      --cap-text-faint
    );
}

.capacitacion-field input:disabled,
.capacitacion-field select:disabled {
  opacity: 0.52;

  cursor: not-allowed;
}

html[data-theme="dark"]
.capacitacion-field input,
html[data-theme="dark"]
.capacitacion-field select,
html[data-theme="dark"]
.capacitacion-field textarea {
  color-scheme: dark;
}

/* =========================================================
   64. SWITCH
   ========================================================= */

.capacitacion-switch {
  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;
}

.capacitacion-switch > span {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-switch strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 9px;
  font-weight: 800;

  line-height: 1.15;
}

.capacitacion-switch small {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;

  line-height: 1.25;
}

.capacitacion-switch input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.capacitacion-switch b {
  position: relative;

  display: block;

  width: 34px;
  height: 19px;

  min-width: 34px;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 999px;

  background:
    var(
      --cap-surface-muted
    );

  cursor: pointer;

  transition:
    background
      var(
        --cap-transition-fast
      ),
    border-color
      var(
        --cap-transition-fast
      );
}

.capacitacion-switch b::before {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background:
    var(
      --cap-text-muted
    );

  transition:
    transform
      var(
        --cap-transition
      ),
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-switch
input:checked + b {
  border-color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-text
    );
}

.capacitacion-switch
input:checked + b::before {
  background:
    var(
      --cap-surface
    );

  transform:
    translateX(
      15px
    );
}

/* =========================================================
   65. MODAL FOOTER
   ========================================================= */

.capacitacion-modal__footer,
.capacitacion-action-modal__footer {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  min-width: 0;

  min-height: 48px;

  padding:
    6px
    7px;

  border-top:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-modal__footer
.capacitacion-btn,
.capacitacion-action-modal__footer
.capacitacion-btn {
  min-height: 30px;

  padding:
    0
    8px;

  font-size: 8.5px;
}

/* =========================================================
   66. ACTION MODAL
   ========================================================= */

.capacitacion-action-modal.is-danger
.capacitacion-action-modal__icon {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-action-form {
  display: grid;

  grid-template-rows:
    minmax(
      0,
      1fr
    )
    auto;

  min-width: 0;

  max-height:
    calc(
      100dvh -
      80px
    );
}

.capacitacion-action-form__body {
  display: grid;

  align-content: start;

  gap: 7px;

  min-width: 0;
  min-height: 0;

  padding: 7px;

  background:
    var(
      --cap-page
    );

  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================================================
   67. ACTION SUMMARY
   ========================================================= */

.capacitacion-action-summary {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding: 8px;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius:
    var(
      --cap-radius-lg
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-action-summary__main {
  display: grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.capacitacion-action-summary__avatar {
  display: grid;

  width: 34px;
  height: 34px;

  min-width: 34px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 8px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 8px;
  font-weight: 900;
}

.capacitacion-action-summary__main > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-action-summary__main small {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-action-summary__main strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9px;
  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-action-summary__main p {
  min-width: 0;

  margin: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   68. ACTION FIELDS
   ========================================================= */

.capacitacion-action-field {
  display: grid;

  gap: 4px;

  min-width: 0;
}

.capacitacion-action-field > span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.capacitacion-action-field input,
.capacitacion-action-field select,
.capacitacion-action-field textarea {
  width: 100%;
  min-width: 0;

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 7px;

  outline: 0;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 9.2px;
  font-weight: 700;

  transition:
    border-color
      var(
        --cap-transition-fast
      ),
    background
      var(
        --cap-transition-fast
      );
}

.capacitacion-action-field input,
.capacitacion-action-field select {
  height: 32px;

  padding:
    0
    7px;
}

.capacitacion-action-field textarea {
  min-height: 68px;

  padding: 7px;

  line-height: 1.4;

  resize: vertical;
}

.capacitacion-action-field input:focus,
.capacitacion-action-field select:focus,
.capacitacion-action-field textarea:focus {
  border-color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );
}

/* =========================================================
   69. ACTION WARNING
   ========================================================= */

.capacitacion-action-warning {
  display: grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    );

  align-items: start;

  gap: 7px;

  min-width: 0;

  padding: 8px;

  border:
    1px
    solid
    var(
      --cap-red-line
    );

  border-radius: 8px;

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-action-warning > .icon,
.capacitacion-action-warning > svg {
  width: 14px;
  height: 14px;

  margin-top: 1px;
}

.capacitacion-action-warning > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.capacitacion-action-warning strong {
  color: currentColor;

  font-size: 8.5px;
  font-weight: 850;
}

.capacitacion-action-warning p {
  margin: 0;

  color:
    var(
      --cap-text-soft
    );

  font-size: 7.5px;
  font-weight: 650;

  line-height: 1.4;
}

/* =========================================================
   70. ACTION DATA
   ========================================================= */

.capacitacion-action-data {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  border:
    1px
    solid
    var(
      --cap-border
    );

  border-radius: 8px;

  background:
    var(
      --cap-surface
    );

  overflow: hidden;
}

.capacitacion-action-data article {
  display: grid;

  gap: 4px;

  min-height: 58px;

  padding: 8px;

  border-right:
    1px
    solid
    var(
      --cap-border
    );
}

.capacitacion-action-data article:last-child {
  border-right: 0;
}

.capacitacion-action-data span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.5px;
  font-weight: 650;
}

.capacitacion-action-data strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 14px;
  font-weight: 900;
}

/* =========================================================
   71. PARTICIPANTS MANAGER
   ========================================================= */

.capacitacion-participants-manager {
  display: grid;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  min-width: 0;

  max-height:
    calc(
      100dvh -
      80px
    );

  background:
    var(
      --cap-surface
    );
}

.capacitacion-participants-manager__head {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 50px;

  padding:
    7px
    8px;

  border-bottom:
    1px
    solid
    var(
      --cap-border-strong
    );

  background:
    var(
      --cap-surface-soft
    );
}

.capacitacion-participants-manager__head > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-participants-manager__head span {
  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.capacitacion-participants-manager__head strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9.5px;
  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   72. PARTICIPANTS TABLE WRAP
   ========================================================= */

.capacitacion-participants-table-wrap {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --cap-border-strong
    )
    transparent;
}

.capacitacion-participants-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.capacitacion-participants-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    var(
      --cap-border-strong
    );
}

/* =========================================================
   73. PARTICIPANTS TABLE
   ========================================================= */

.capacitacion-participants-table {
  width: 100%;

  min-width: 860px;

  border-collapse: collapse;

  background:
    var(
      --cap-surface
    );
}

.capacitacion-participants-table th,
.capacitacion-participants-table td {
  padding:
    8px
    9px;

  border-right:
    1px
    solid
    var(
      --cap-border
    );

  border-bottom:
    1px
    solid
    var(
      --cap-border
    );

  color:
    var(
      --cap-text
    );

  text-align: left;

  vertical-align: middle;
}

.capacitacion-participants-table th:last-child,
.capacitacion-participants-table td:last-child {
  border-right: 0;
}

.capacitacion-participants-table thead th {
  position: sticky;

  top: 0;

  z-index: 2;

  height: 38px;

  color:
    var(
      --cap-text-muted
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 7.5px;
  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  white-space: nowrap;
}

.capacitacion-participants-table td {
  font-size: 8.5px;
  font-weight: 650;
}

/* =========================================================
   74. PARTICIPANT PERSON
   ========================================================= */

.capacitacion-participant-person {
  display: grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 7px;

  min-width: 190px;
}

.capacitacion-participant-person > span {
  display: grid;

  width: 32px;
  height: 32px;

  min-width: 32px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 8px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface-soft
    );

  font-size: 7.5px;
  font-weight: 900;
}

.capacitacion-participant-person > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-participant-person strong {
  min-width: 0;

  color:
    var(
      --cap-text-strong
    );

  font-size: 9px;
  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.capacitacion-participant-person small {
  min-width: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.3px;
  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   75. TOAST
   ========================================================= */

.capacitacion-toast {
  position: fixed;

  right: 12px;
  bottom: 12px;

  z-index: 12000;

  display: grid;

  grid-template-columns:
    30px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 7px;

  width:
    min(
      360px,
      calc(
        100vw -
        24px
      )
    );

  min-width: 0;

  min-height: 46px;

  padding:
    6px
    9px
    6px
    6px;

  border:
    1px
    solid
    var(
      --cap-border-strong
    );

  border-radius: 10px;

  color:
    var(
      --cap-text
    );

  background:
    var(
      --cap-surface
    );

  box-shadow: none;

  opacity: 0;

  transform:
    translateY(
      8px
    );

  pointer-events: none;

  transition:
    opacity
      var(
        --cap-transition
      ),
    transform
      var(
        --cap-transition
      );
}

.capacitacion-toast.is-visible {
  opacity: 1;

  transform:
    translateY(
      0
    );
}

.capacitacion-toast__icon {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px
    solid
    var(
      --cap-green-line
    );

  border-radius: 8px;

  color:
    var(
      --cap-green
    );

  background:
    var(
      --cap-green-soft
    );
}

.capacitacion-toast__icon .icon,
.capacitacion-toast__icon svg {
  width: 13px;
  height: 13px;
}

.capacitacion-toast__content {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.capacitacion-toast__content strong {
  color:
    var(
      --cap-text-strong
    );

  font-size: 8.7px;
  font-weight: 800;

  line-height: 1.2;
}

.capacitacion-toast__content p {
  min-width: 0;

  margin: 0;

  color:
    var(
      --cap-text-muted
    );

  font-size: 7.7px;
  font-weight: 650;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

.capacitacion-toast--error
.capacitacion-toast__icon {
  border-color:
    var(
      --cap-red-line
    );

  color:
    var(
      --cap-red
    );

  background:
    var(
      --cap-red-soft
    );
}

.capacitacion-toast--warning
.capacitacion-toast__icon {
  border-color:
    var(
      --cap-yellow-line
    );

  color:
    var(
      --cap-yellow
    );

  background:
    var(
      --cap-yellow-soft
    );
}

.capacitacion-toast--info
.capacitacion-toast__icon {
  border-color:
    var(
      --cap-neutral-line
    );

  color:
    var(
      --cap-neutral
    );

  background:
    var(
      --cap-neutral-soft
    );
}

/* =========================================================
   76. RESPONSIVE 1500
   ========================================================= */

@media (
  max-width:
  1500px
) {
  .capacitacion-primary-filters {
    grid-template-columns:
      minmax(
        220px,
        1.5fr
      )
      repeat(
        3,
        minmax(
          120px,
          0.8fr
        )
      );
  }

  .capacitacion-primary-filters
  .capacitacion-btn {
    width: 100%;
  }

  .capacitacion-advanced-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .capacitacion-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}

/* =========================================================
   77. RESPONSIVE 1250
   ========================================================= */

@media (
  max-width:
  1250px
) {
  .capacitacion-head {
    grid-template-columns:
      1fr;

    min-height: 0;
  }

  .capacitacion-head__actions {
    justify-content: flex-start;
  }

  .capacitacion-workspace {
    grid-template-columns:
      1fr;
  }

  .capacitacion-workspace__main {
    border-right: 0;
  }

  .capacitacion-detail-panel {
    position: fixed;

    top: 0;
    right: 0;

    z-index: 9998;

    width:
      min(
        390px,
        calc(
          100vw -
          20px
        )
      );

    height: 100dvh;

    max-height: none;

    border-left:
      1px
      solid
      var(
        --cap-border-strong
      );

    transform:
      translateX(
        105%
      );

    transition:
      transform
      var(
        --cap-transition
      );
  }

  .capacitacion-detail-panel.is-open {
    transform:
      translateX(
        0
      );
  }

  .capacitacion-detail-panel__close {
    display: inline-flex;
  }

  body.capacitacion-detail-open::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 9997;

    background:
      rgba(
        0,
        0,
        0,
        0.66
      );
  }

  body.capacitacion-detail-open {
    overflow: hidden;
  }
}

/* =========================================================
   78. RESPONSIVE 960
   ========================================================= */

@media (
  max-width:
  960px
) {
  .capacitacion-page {
    gap: 8px;

    padding: 6px;
  }

  .capacitacion-primary-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .capacitacion-search {
    grid-column:
      1 /
      -1;
  }

  .capacitacion-advanced-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .capacitacion-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .capacitacion-field:nth-child(
    3n
  ),
  .capacitacion-switch:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --cap-border
      );
  }

  .capacitacion-field:nth-child(
    2n
  ),
  .capacitacion-switch:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .capacitacion-field--full {
    grid-column:
      1 /
      -1;
  }

  .capacitacion-pagination {
    display: grid;

    justify-items: center;

    text-align: center;
  }

  .capacitacion-pagination__actions {
    width: 100%;

    justify-content: center;
  }
}

/* =========================================================
   79. RESPONSIVE 720
   ========================================================= */

@media (
  max-width:
  720px
) {
  .capacitacion-page {
    gap: 6px;

    padding: 5px;
  }

  /* =======================================================
     HEADER
     ======================================================= */

  .capacitacion-head {
    gap: 9px;

    min-height: 0;

    padding: 8px;
  }

  .capacitacion-brand {
    grid-template-columns:
      42px
      minmax(
        0,
        1fr
      );

    gap: 8px;
  }

  .capacitacion-brand__icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    border-radius: 10px;
  }

  .capacitacion-brand__icon .icon,
  .capacitacion-brand__icon svg {
    width: 17px;
    height: 17px;
  }

  .capacitacion-brand h1 {
    font-size: 21px;
  }

  .capacitacion-brand p {
    font-size: 9px;

    white-space: normal;
  }

  .capacitacion-head__actions {
    display: grid;

    grid-template-columns:
      1fr;

    width: 100%;
  }

  .capacitacion-period,
  .capacitacion-head__actions
  .capacitacion-btn {
    width: 100%;
  }

  /* =======================================================
     METRICS
     ======================================================= */

  .capacitacion-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .capacitacion-metric {
    min-height: 66px;
  }

  /* =======================================================
     FILTERS
     ======================================================= */

  .capacitacion-filter-panel__head {
    grid-template-columns:
      1fr;
  }

  .capacitacion-result-count {
    justify-content: flex-start;
  }

  .capacitacion-primary-filters,
  .capacitacion-advanced-filters {
    grid-template-columns:
      1fr;
  }

  .capacitacion-search {
    grid-column: auto;
  }

  .capacitacion-primary-filters
  .capacitacion-btn,
  .capacitacion-advanced-filters
  .capacitacion-btn {
    width: 100%;
  }

  .capacitacion-filter-chips {
    align-items: stretch;

    flex-direction: column;
  }

  .capacitacion-filter-chip {
    width: 100%;

    justify-content: flex-start;
  }

  /* =======================================================
     MAIN TABLE -> CARDS
     ======================================================= */

  .capacitacion-table-wrap {
    overflow-x: hidden;
  }

  .capacitacion-table {
    display: block;

    width: 100%;

    min-width: 0;
  }

  .capacitacion-table thead {
    display: none;
  }

  .capacitacion-table tbody {
    display: grid;

    gap: 6px;

    width: 100%;

    padding: 6px;
  }

  .capacitacion-table tbody tr {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width: 100%;
    min-width: 0;

    border:
      1px
      solid
      var(
        --cap-border
      );

    border-radius:
      var(
        --cap-radius-lg
      );

    background:
      var(
        --cap-surface
      );

    overflow: hidden;
  }

  .capacitacion-table td {
    display: grid;

    align-content: center;

    gap: 4px;

    width: auto !important;
    min-width: 0;

    min-height: 52px;

    padding: 7px;

    border-right:
      1px
      solid
      var(
        --cap-border
      );

    border-bottom:
      1px
      solid
      var(
        --cap-border
      );

    text-align: left;
  }

  .capacitacion-table td::before {
    content: "";

    color:
      var(
        --cap-text-muted
      );

    font-size: 7px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;
  }

  .capacitacion-table td:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .capacitacion-table td:nth-child(
    1
  ) {
    grid-column:
      1 /
      -1;

    border-right: 0;
  }

  .capacitacion-table td:nth-child(
    1
  )::before {
    content: "Capacitación";
  }

  .capacitacion-table td:nth-child(
    2
  )::before {
    content: "Estado";
  }

  .capacitacion-table td:nth-child(
    3
  )::before {
    content: "Modalidad";
  }

  .capacitacion-table td:nth-child(
    4
  )::before {
    content: "Inicio";
  }

  .capacitacion-table td:nth-child(
    5
  )::before {
    content: "Instructor";
  }

  .capacitacion-table td:nth-child(
    6
  )::before {
    content: "Participantes";
  }

  .capacitacion-table td:nth-child(
    7
  )::before {
    content: "Aprobados";
  }

  .capacitacion-table td:nth-child(
    8
  )::before {
    content: "Certificados";
  }

  .capacitacion-table td:nth-child(
    9
  ) {
    grid-column:
      1 /
      -1;

    border-right: 0;
    border-bottom: 0;
  }

  .capacitacion-table td:nth-child(
    9
  )::before {
    content: "Acciones";
  }

  .capacitacion-title-cell {
    min-width: 0;
  }

  .capacitacion-row-actions {
    justify-content: flex-start;
  }

  .capacitacion-table-message {
    display: block !important;

    grid-column:
      1 /
      -1;

    border: 0 !important;
  }

  .capacitacion-table-message::before {
    display: none;
  }

  /* =======================================================
     PAGINATION
     ======================================================= */

  .capacitacion-pagination__actions {
    display: grid;

    grid-template-columns:
      1fr;

    width: 100%;
  }

  .capacitacion-pagination__actions
  .capacitacion-btn {
    width: 100%;
  }

  .capacitacion-pagination__page {
    justify-content: center;

    order: -1;
  }

  /* =======================================================
     DETAIL PANEL
     ======================================================= */

  .capacitacion-detail-panel {
    width: 100vw;
    max-width: 100vw;

    border-left: 0;
  }

  .capacitacion-detail-panel__footer {
    display: grid;

    grid-template-columns:
      1fr;

    align-items: stretch;
  }

  .capacitacion-detail-panel__footer
  .capacitacion-btn {
    width: 100%;
  }

  /* =======================================================
     MODAL
     ======================================================= */

  .capacitacion-modal-backdrop {
    place-items: end center;

    padding: 0;
  }

  .capacitacion-modal,
  .capacitacion-action-modal,
  .capacitacion-modal--participant,
  .capacitacion-modal--participants-manager {
    width: 100%;

    max-height: 97dvh;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius:
      14px
      14px
      0
      0;
  }

  .capacitacion-modal__head,
  .capacitacion-action-modal__head {
    min-height: 54px;

    padding:
      7px
      8px;
  }

  .capacitacion-modal__brand p,
  .capacitacion-action-modal__brand p {
    display: none;
  }

  .capacitacion-form,
  .capacitacion-action-form,
  .capacitacion-participants-manager {
    max-height:
      calc(
        97dvh -
        54px
      );
  }

  .capacitacion-form__body,
  .capacitacion-action-form__body {
    padding: 6px;
  }

  .capacitacion-form-grid {
    grid-template-columns:
      1fr;
  }

  .capacitacion-field,
  .capacitacion-switch,
  .capacitacion-field--wide,
  .capacitacion-field--full {
    grid-column: auto;

    border-right: 0;
  }

  .capacitacion-field:nth-child(
    2n
  ),
  .capacitacion-field:nth-child(
    3n
  ),
  .capacitacion-switch:nth-child(
    2n
  ),
  .capacitacion-switch:nth-child(
    3n
  ) {
    border-right: 0;
  }

  .capacitacion-modal__footer,
  .capacitacion-action-modal__footer {
    display: grid;

    grid-template-columns:
      1fr;
  }

  .capacitacion-modal__footer
  .capacitacion-btn,
  .capacitacion-action-modal__footer
  .capacitacion-btn {
    width: 100%;
  }

  .capacitacion-action-summary {
    grid-template-columns:
      1fr;
  }

  .capacitacion-action-data {
    grid-template-columns:
      1fr;
  }

  .capacitacion-action-data article {
    border-right: 0;

    border-bottom:
      1px
      solid
      var(
        --cap-border
      );
  }

  .capacitacion-action-data article:last-child {
    border-bottom: 0;
  }

  /* =======================================================
     PARTICIPANTS TABLE -> CARDS
     ======================================================= */

  .capacitacion-participants-table-wrap {
    overflow-x: hidden;
  }

  .capacitacion-participants-table {
    display: block;

    width: 100%;

    min-width: 0;
  }

  .capacitacion-participants-table thead {
    display: none;
  }

  .capacitacion-participants-table tbody {
    display: grid;

    gap: 6px;

    padding: 6px;
  }

  .capacitacion-participants-table tbody tr {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    min-width: 0;

    border:
      1px
      solid
      var(
        --cap-border
      );

    border-radius:
      var(
        --cap-radius-lg
      );

    background:
      var(
        --cap-surface
      );

    overflow: hidden;
  }

  .capacitacion-participants-table td {
    display: grid;

    gap: 4px;

    min-width: 0;

    min-height: 50px;

    padding: 7px;

    border-right:
      1px
      solid
      var(
        --cap-border
      );

    border-bottom:
      1px
      solid
      var(
        --cap-border
      );
  }

  .capacitacion-participants-table td:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .capacitacion-participant-person {
    min-width: 0;
  }

  /* =======================================================
     TOAST
     ======================================================= */

  .capacitacion-toast {
    right: 7px;
    bottom: 7px;
    left: 7px;

    width: auto;
    max-width: none;
  }
}

/* =========================================================
   80. MOBILE 470
   ========================================================= */

@media (
  max-width:
  470px
) {
  .capacitacion-page {
    padding: 4px;
  }

  .capacitacion-head {
    padding: 7px;
  }

  .capacitacion-brand h1 {
    font-size: 19px;
  }

  .capacitacion-brand p {
    display: none;
  }

  .capacitacion-metrics {
    grid-template-columns:
      1fr;
  }

  .capacitacion-metric {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );

    min-height: 60px;

    padding:
      7px
      8px;
  }

  .capacitacion-metric__icon {
    width: 34px;
    height: 34px;

    min-width: 34px;
  }

  .capacitacion-metric__content strong {
    font-size: 16px;
  }

  /* =======================================================
     MAIN TABLE 1 COLUMN
     ======================================================= */

  .capacitacion-table tbody tr {
    grid-template-columns:
      1fr;
  }

  .capacitacion-table td,
  .capacitacion-table td:nth-child(
    2n
  ),
  .capacitacion-table td:nth-child(
    1
  ),
  .capacitacion-table td:nth-child(
    9
  ) {
    grid-column: auto;

    border-right: 0;
  }

  .capacitacion-table td {
    min-height: 48px;

    padding: 7px;
  }

  /* =======================================================
     DETAIL MOBILE
     ======================================================= */

  .capacitacion-detail-profile {
    grid-template-columns:
      1fr;
  }

  .capacitacion-detail-profile
  .capacitacion-state {
    justify-self: start;
  }

  .capacitacion-detail-stats {
    grid-template-columns:
      1fr;
  }

  .capacitacion-detail-stats article,
  .capacitacion-detail-stats article:nth-child(
    2n
  ),
  .capacitacion-detail-stats article:nth-last-child(
    -n + 2
  ) {
    border-right: 0;

    border-bottom:
      1px
      solid
      var(
        --cap-border
      );
  }

  .capacitacion-detail-stats article:last-child {
    border-bottom: 0;
  }

  .capacitacion-detail-list article {
    grid-template-columns:
      1fr;

    gap: 3px;
  }

  .capacitacion-detail-list strong {
    max-width: none;

    text-align: left;
  }

  .capacitacion-participant-preview {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      );
  }

  .capacitacion-participant-preview
  .capacitacion-participant-state {
    grid-column:
      1 /
      -1;

    justify-self: start;
  }

  /* =======================================================
     PARTICIPANTS TABLE 1 COLUMN
     ======================================================= */

  .capacitacion-participants-table tbody tr {
    grid-template-columns:
      1fr;
  }

  .capacitacion-participants-table td,
  .capacitacion-participants-table td:nth-child(
    2n
  ) {
    border-right: 0;
  }

  /* =======================================================
     MODAL
     ======================================================= */

  .capacitacion-modal__brand,
  .capacitacion-action-modal__brand {
    grid-template-columns:
      31px
      minmax(
        0,
        1fr
      );
  }

  .capacitacion-modal__icon,
  .capacitacion-action-modal__icon {
    width: 30px;
    height: 30px;

    min-width: 30px;
  }

  .capacitacion-modal__brand h2,
  .capacitacion-action-modal__brand h2 {
    font-size: 11px;
  }

  .capacitacion-form__body,
  .capacitacion-action-form__body {
    gap: 5px;

    padding: 5px;
  }

  .capacitacion-form-section {
    border-radius: 9px;
  }

  .capacitacion-form-section__title {
    min-height: 39px;

    padding:
      5px
      7px;
  }

  .capacitacion-field,
  .capacitacion-switch {
    min-height: 52px;

    padding:
      6px
      7px;
  }

  .capacitacion-field textarea {
    min-height: 58px;
  }

  .capacitacion-participants-manager__head {
    grid-template-columns:
      1fr;
  }

  .capacitacion-participants-manager__head
  .capacitacion-btn {
    width: 100%;
  }
}

/* =========================================================
   81. SHORT HEIGHT
   ========================================================= */

@media (
  max-height:
  780px
) {
  .capacitacion-modal-backdrop {
    padding: 5px;
  }

  .capacitacion-modal,
  .capacitacion-action-modal {
    max-height:
      calc(
        100dvh -
        10px
      );
  }

  .capacitacion-modal__head,
  .capacitacion-action-modal__head {
    min-height: 50px;

    padding:
      6px
      8px;
  }

  .capacitacion-form,
  .capacitacion-action-form,
  .capacitacion-participants-manager {
    max-height:
      calc(
        100dvh -
        60px
      );
  }

  .capacitacion-form__body,
  .capacitacion-action-form__body {
    gap: 5px;

    padding: 5px;
  }

  .capacitacion-form-section__title {
    min-height: 38px;

    padding:
      5px
      7px;
  }

  .capacitacion-field,
  .capacitacion-switch {
    min-height: 50px;

    padding:
      6px
      7px;
  }

  .capacitacion-field textarea {
    min-height: 54px;
  }

  .capacitacion-modal__footer,
  .capacitacion-action-modal__footer {
    min-height: 44px;

    padding: 5px;
  }
}

/* =========================================================
   82. ANIMATIONS
   ========================================================= */

@keyframes capacitacionPageIn {
  from {
    opacity: 0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes capacitacionFiltersIn {
  from {
    opacity: 0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes capacitacionBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes capacitacionModalIn {
  from {
    opacity: 0;

    transform:
      translateY(
        7px
      )
      scale(
        0.99
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

@keyframes capacitacionSpin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

/* =========================================================
   83. REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .capacitacion-page,
  .capacitacion-page *,
  .capacitacion-page *::before,
  .capacitacion-page *::after,
  .capacitacion-modal-backdrop,
  .capacitacion-modal-backdrop *,
  .capacitacion-modal-backdrop *::before,
  .capacitacion-modal-backdrop *::after,
  .capacitacion-toast,
  .capacitacion-toast *,
  .capacitacion-toast *::before,
  .capacitacion-toast *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   84. OVERFLOW SAFETY
   ========================================================= */

.capacitacion-page,
.capacitacion-head,
.capacitacion-brand,
.capacitacion-head__actions,
.capacitacion-metrics,
.capacitacion-metric,
.capacitacion-workspace,
.capacitacion-workspace__main,
.capacitacion-filter-panel,
.capacitacion-primary-filters,
.capacitacion-advanced-filters,
.capacitacion-filter-chips,
.capacitacion-table-panel,
.capacitacion-pagination,
.capacitacion-pagination__actions,
.capacitacion-detail-panel,
.capacitacion-detail-panel__head,
.capacitacion-detail-panel__body,
.capacitacion-detail-profile,
.capacitacion-detail-section,
.capacitacion-modal,
.capacitacion-action-modal,
.capacitacion-modal__head,
.capacitacion-action-modal__head,
.capacitacion-form,
.capacitacion-form__body,
.capacitacion-form-section,
.capacitacion-form-grid,
.capacitacion-field,
.capacitacion-switch,
.capacitacion-action-form,
.capacitacion-action-form__body,
.capacitacion-action-summary,
.capacitacion-participants-manager,
.capacitacion-participants-manager__head,
.capacitacion-participants-table-wrap {
  max-width: 100%;
  min-width: 0;
}

@media (
  max-width:
  720px
) {
  html,
  body,
  .app-shell,
  .app-main,
  .app-content,
  .capacitacion-mount,
  .capacitacion-page {
    max-width: 100%;

    overflow-x: hidden;
  }
}/* =========================================================
   CAPACITACIÓN · TIPOGRAFÍA MÁS GRANDE
   AGREGAR AL FINAL DEL CSS
   ========================================================= */

/* =========================================================
   HEADER
   ========================================================= */

.capacitacion-eyebrow {
  font-size: 9px;
}

.capacitacion-brand h1 {
  font-size: clamp(26px, 2.2vw, 32px);
}

.capacitacion-brand p {
  font-size: 11px;
}

.capacitacion-period {
  font-size: 10px;
}

/* =========================================================
   BOTONES
   ========================================================= */

.capacitacion-btn,
.capacitacion-icon-btn,
.capacitacion-detail-panel__close,
.capacitacion-modal__close {
  font-size: 10px;
}

/* =========================================================
   MÉTRICAS
   ========================================================= */

.capacitacion-metric__content > span {
  font-size: 8.5px;
}

.capacitacion-metric__content strong {
  font-size: 20px;
}

.capacitacion-metric__content small {
  font-size: 9px;
}

/* =========================================================
   FILTROS
   ========================================================= */

.capacitacion-filter-panel__head > div > span {
  font-size: 8.5px;
}

.capacitacion-filter-panel__head > div > strong {
  font-size: 14px;
}

.capacitacion-result-count {
  font-size: 9px;
}

.capacitacion-result-count strong {
  font-size: 9.5px;
}

.capacitacion-filter-control > span {
  font-size: 8px;
}

.capacitacion-search input,
.capacitacion-filter-control input,
.capacitacion-filter-control select {
  font-size: 10.5px;
}

.capacitacion-advanced-toggle b {
  font-size: 8px;
}

.capacitacion-filter-chips__label {
  font-size: 8px;
}

.capacitacion-filter-chips__empty {
  font-size: 9px;
}

.capacitacion-filter-chip > span,
.capacitacion-filter-chip > strong {
  font-size: 8.5px;
}

/* =========================================================
   TABLA
   ========================================================= */

.capacitacion-table thead th {
  font-size: 8.5px;
}

.capacitacion-table td {
  font-size: 9.8px;
}

.capacitacion-title-cell__icon {
  font-size: 9px;
}

.capacitacion-title-cell__content strong {
  font-size: 11px;
}

.capacitacion-title-cell__content small {
  font-size: 8.5px;
}

.capacitacion-title-cell__content > span {
  font-size: 8px;
}

.capacitacion-state,
.capacitacion-modality,
.capacitacion-participant-state,
.capacitacion-certificate-ok,
.capacitacion-certificate-pending {
  font-size: 8.5px;
}

.capacitacion-date-cell strong,
.capacitacion-instructor strong,
.capacitacion-count-cell strong,
.capacitacion-certificate-cell strong {
  font-size: 10px;
}

.capacitacion-date-cell small,
.capacitacion-instructor small,
.capacitacion-count-cell small,
.capacitacion-certificate-cell small,
.capacitacion-certificate-date {
  font-size: 8px;
}

/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.capacitacion-loading strong,
.capacitacion-empty strong {
  font-size: 12px;
}

.capacitacion-loading span,
.capacitacion-empty span {
  font-size: 9px;
}

/* =========================================================
   PAGINACIÓN
   ========================================================= */

.capacitacion-pagination__info,
.capacitacion-pagination__page {
  font-size: 9px;
}

.capacitacion-pagination__info strong {
  font-size: 9.5px;
}

.capacitacion-pagination__actions
.capacitacion-btn {
  font-size: 9.5px;
}

/* =========================================================
   PANEL LATERAL
   ========================================================= */

.capacitacion-detail-panel__brand span {
  font-size: 8px;
}

.capacitacion-detail-panel__brand strong {
  font-size: 10.5px;
}

.capacitacion-detail-empty__eyebrow {
  font-size: 8px;
}

.capacitacion-detail-empty strong,
.capacitacion-detail-loading strong {
  font-size: 11.5px;
}

.capacitacion-detail-empty p,
.capacitacion-detail-loading span {
  font-size: 9px;
}

.capacitacion-detail-profile__avatar {
  font-size: 9px;
}

.capacitacion-detail-profile__main > div > span {
  font-size: 8px;
}

.capacitacion-detail-profile__main strong {
  font-size: 10.5px;
}

.capacitacion-detail-profile__main small {
  font-size: 8.5px;
}

.capacitacion-detail-section__head span {
  font-size: 8px;
}

.capacitacion-detail-section__head strong {
  font-size: 10px;
}

.capacitacion-detail-stats span {
  font-size: 8.5px;
}

.capacitacion-detail-stats strong {
  font-size: 16px;
}

.capacitacion-detail-stats small {
  font-size: 8px;
}

.capacitacion-detail-list span {
  font-size: 8.5px;
}

.capacitacion-detail-list strong {
  font-size: 9px;
}

.capacitacion-detail-text p,
.capacitacion-detail-link a {
  font-size: 9px;
}

/* =========================================================
   PARTICIPANTES
   ========================================================= */

.capacitacion-participant-preview__avatar {
  font-size: 8.5px;
}

.capacitacion-participant-preview > div strong {
  font-size: 9.5px;
}

.capacitacion-participant-preview > div small {
  font-size: 8px;
}

.capacitacion-participants-more {
  font-size: 8.5px;
}

.capacitacion-participants-empty strong {
  font-size: 10px;
}

.capacitacion-participants-empty span {
  font-size: 8.5px;
}

.capacitacion-session strong,
.capacitacion-history__item strong {
  font-size: 9px;
}

.capacitacion-session small,
.capacitacion-history__item small {
  font-size: 8px;
}

.capacitacion-session p,
.capacitacion-history__item p {
  font-size: 8.5px;
}

/* =========================================================
   MODALES
   ========================================================= */

.capacitacion-modal__brand span,
.capacitacion-action-modal__brand span {
  font-size: 8px;
}

.capacitacion-modal__brand h2,
.capacitacion-action-modal__brand h2 {
  font-size: 14px;
}

.capacitacion-modal__brand p,
.capacitacion-action-modal__brand p {
  font-size: 8.5px;
}

.capacitacion-form-section__title span {
  font-size: 8px;
}

.capacitacion-form-section__title strong {
  font-size: 10.5px;
}

.capacitacion-field > span {
  font-size: 8px;
}

.capacitacion-field input,
.capacitacion-field select,
.capacitacion-field textarea {
  font-size: 10.3px;
}

.capacitacion-switch strong {
  font-size: 10px;
}

.capacitacion-switch small {
  font-size: 8px;
}

.capacitacion-modal__footer
.capacitacion-btn,
.capacitacion-action-modal__footer
.capacitacion-btn {
  font-size: 9.5px;
}

/* =========================================================
   MODAL ACCIONES
   ========================================================= */

.capacitacion-action-summary__main small {
  font-size: 8px;
}

.capacitacion-action-summary__main strong {
  font-size: 10px;
}

.capacitacion-action-summary__main p {
  font-size: 8px;
}

.capacitacion-action-field > span {
  font-size: 8px;
}

.capacitacion-action-field input,
.capacitacion-action-field select,
.capacitacion-action-field textarea {
  font-size: 10.3px;
}

.capacitacion-action-warning strong {
  font-size: 9.5px;
}

.capacitacion-action-warning p {
  font-size: 8.5px;
}

.capacitacion-action-data span {
  font-size: 8.5px;
}

.capacitacion-action-data strong {
  font-size: 16px;
}

/* =========================================================
   GESTIÓN DE PARTICIPANTES
   ========================================================= */

.capacitacion-participants-manager__head span {
  font-size: 8px;
}

.capacitacion-participants-manager__head strong {
  font-size: 10.5px;
}

.capacitacion-participants-table thead th {
  font-size: 8.5px;
}

.capacitacion-participants-table td {
  font-size: 9.5px;
}

.capacitacion-participant-person > span {
  font-size: 8.5px;
}

.capacitacion-participant-person strong {
  font-size: 10px;
}

.capacitacion-participant-person small {
  font-size: 8px;
}

/* =========================================================
   TOAST
   ========================================================= */

.capacitacion-toast__content strong {
  font-size: 9.5px;
}

.capacitacion-toast__content p {
  font-size: 8.5px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
  .capacitacion-brand h1 {
    font-size: 23px;
  }

  .capacitacion-brand p {
    font-size: 10px;
  }

  .capacitacion-table td::before {
    font-size: 8px;
  }
}

@media (max-width: 470px) {
  .capacitacion-brand h1 {
    font-size: 21px;
  }

  .capacitacion-eyebrow {
    font-size: 8px;
  }

  .capacitacion-table td {
    font-size: 9.5px;
  }
}/* =========================================================
   FIX · CAPACITACIÓN
   BOTÓN PRIMARIO + MODAL + SCROLL
   ========================================================= */

/* =========================================================
   BOTÓN PRIMARIO · MODO CLARO
   ========================================================= */

html:not([data-theme="dark"])
.capacitacion-btn--primary,
body:not(.dark)
.capacitacion-btn--primary {
  color: #ffffff !important;
  background: #0a0a0a !important;
  border-color: #0a0a0a !important;
}

html:not([data-theme="dark"])
.capacitacion-btn--primary span,
html:not([data-theme="dark"])
.capacitacion-btn--primary .icon,
html:not([data-theme="dark"])
.capacitacion-btn--primary svg,
body:not(.dark)
.capacitacion-btn--primary span,
body:not(.dark)
.capacitacion-btn--primary .icon,
body:not(.dark)
.capacitacion-btn--primary svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   MODAL · RESPETAR TOPBAR
   ========================================================= */

.capacitacion-modal-backdrop {
  top:
    var(
      --topbar-height,
      54px
    ) !important;

  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  height:
    calc(
      100dvh -
      var(
        --topbar-height,
        54px
      )
    ) !important;

  padding: 10px !important;

  place-items: start center !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* =========================================================
   MODAL PRINCIPAL · ALTURA REAL DISPONIBLE
   ========================================================= */

.capacitacion-modal {
  display: grid !important;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    );

  width:
    min(
      980px,
      100%
    ) !important;

  height:
    calc(
      100dvh -
      var(
        --topbar-height,
        54px
      )
      -
      20px
    ) !important;

  max-height:
    calc(
      100dvh -
      var(
        --topbar-height,
        54px
      )
      -
      20px
    ) !important;

  min-height: 0 !important;

  overflow: hidden !important;
}

/* =========================================================
   FORM · NO COMPRIMIR SECCIONES
   ========================================================= */

.capacitacion-form {
  display: grid !important;

  grid-template-rows:
    minmax(
      0,
      1fr
    )
    auto !important;

  height: 100% !important;
  max-height: none !important;

  min-height: 0 !important;

  overflow: hidden !important;
}

/* =========================================================
   BODY DEL FORM · SCROLL VERTICAL REAL
   ========================================================= */

.capacitacion-form__body {
  display: block !important;

  min-width: 0 !important;
  min-height: 0 !important;

  padding: 8px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain;

  scrollbar-width: thin;
}

/* separación entre bloques */

.capacitacion-form__body
.capacitacion-form-section {
  margin-bottom: 8px;
}

.capacitacion-form__body
.capacitacion-form-section:last-child {
  margin-bottom: 0;
}

/* =========================================================
   TÍTULOS DE SECCIÓN · EVITAR RECORTE
   ========================================================= */

.capacitacion-form-section__title {
  min-height: 48px !important;

  padding:
    8px
    9px !important;

  overflow: visible !important;
}

.capacitacion-form-section__title > div {
  min-height: 28px;

  align-content: center;
}

.capacitacion-form-section__title span {
  display: block;

  overflow: visible !important;

  text-overflow: clip !important;

  white-space: normal !important;

  line-height: 1.15 !important;
}

.capacitacion-form-section__title strong {
  display: block;

  overflow: visible !important;

  text-overflow: clip !important;

  white-space: normal !important;

  line-height: 1.25 !important;
}

/* =========================================================
   FOOTER · SIEMPRE VISIBLE
   ========================================================= */

.capacitacion-modal__footer {
  position: relative;

  flex: 0 0 auto;

  z-index: 2;

  background:
    var(
      --cap-surface-soft
    );
}