/* =========================================================
   WIRTZ HUB · CAPITAL HUMANO · SANCIONES

   UBICACIÓN:
   frontend/src/pages/capital-humano/sanciones/sanciones.css

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


/* =========================================================
   VARIABLES
   ========================================================= */

.sanctions-page {
  --san-bg:
    #f7f7f7;

  --san-surface:
    #ffffff;

  --san-surface-soft:
    #fafafa;

  --san-surface-muted:
    #f2f2f2;

  --san-surface-hover:
    #f5f5f5;

  --san-border:
    #d8d8d8;

  --san-border-strong:
    #c2c2c2;

  --san-border-soft:
    #e7e7e7;

  --san-text:
    #121212;

  --san-text-strong:
    #000000;

  --san-text-secondary:
    #454545;

  --san-text-muted:
    #727272;

  --san-text-faint:
    #929292;

  --san-success:
    #18794e;

  --san-success-bg:
    #edf8f2;

  --san-success-border:
    #b9dfc8;

  --san-danger:
    #b42318;

  --san-danger-bg:
    #fff1f0;

  --san-danger-border:
    #efc0bb;

  --san-warning:
    #8a6200;

  --san-warning-bg:
    #fff8e3;

  --san-warning-border:
    #e2cf96;

  --san-info:
    #333333;

  --san-info-bg:
    #f2f2f2;

  --san-info-border:
    #d5d5d5;

  --san-radius-xs:
    5px;

  --san-radius-sm:
    7px;

  --san-radius-md:
    9px;

  --san-radius-lg:
    12px;

  --san-control-height:
    38px;

  --san-transition:
    140ms ease;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    20px;

  box-sizing:
    border-box;

  overflow-x:
    hidden;

  background:
    var(--san-bg);

  color:
    var(--san-text);

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


/* =========================================================
   RESET LOCAL
   ========================================================= */

.sanctions-page *,
.sanctions-page *::before,
.sanctions-page *::after {
  box-sizing:
    border-box;
}

.sanctions-page h1,
.sanctions-page h2,
.sanctions-page h3,
.sanctions-page h4,
.sanctions-page p,
.sanctions-page dl,
.sanctions-page dd,
.sanctions-page dt {
  margin:
    0;
}

.sanctions-page button,
.sanctions-page input,
.sanctions-page select,
.sanctions-page textarea {
  font:
    inherit;
}

.sanctions-page button {
  color:
    inherit;
}

.sanctions-page input,
.sanctions-page select,
.sanctions-page textarea {
  min-width:
    0;
}

.sanctions-page img,
.sanctions-page svg {
  max-width:
    100%;
}

.sanctions-page .icon {
  width:
    16px;

  height:
    16px;

  flex:
    0 0 auto;

  stroke-width:
    1.8;
}


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(.sanctions-page) {
  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}


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

.sanctions-head {
  display:
    grid;

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

  align-items:
    start;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    16px;

  padding-bottom:
    18px;

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


/* =========================================================
   BRAND
   ========================================================= */

.sanctions-brand {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  min-width:
    0;
}

.sanctions-brand__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

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

  border-radius:
    var(--san-radius-md);

  background:
    var(--san-surface);

  color:
    var(--san-text-strong);
}

.sanctions-brand__icon .icon {
  width:
    18px;

  height:
    18px;
}

.sanctions-brand > div {
  min-width:
    0;
}

.sanctions-brand > div > span {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.08em;
}

.sanctions-brand h2 {
  color:
    var(--san-text-strong);

  font-size:
    clamp(
      24px,
      2.2vw,
      31px
    );

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}

.sanctions-brand p {
  max-width:
    720px;

  margin-top:
    7px;

  color:
    var(--san-text-secondary);

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.5;
}


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

.sanctions-head__status {
  display:
    flex;

  align-items:
    stretch;

  gap:
    7px;

  min-width:
    0;
}

.sanctions-head-status {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    120px;

  min-height:
    40px;

  padding:
    7px 10px;

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

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

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

.sanctions-head-status > .icon {
  width:
    15px;

  height:
    15px;

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

.sanctions-head-status > span {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-head-status small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.2;
}

.sanctions-head-status strong {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.sanctions-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


/* =========================================================
   BOTONES
   ========================================================= */

.sanctions-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-width:
    0;

  min-height:
    var(--san-control-height);

  padding:
    0 13px;

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

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

  background:
    var(--san-surface);

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

  font-size:
    11px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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

.sanctions-btn span {
  color:
    inherit;
}

.sanctions-btn .icon {
  color:
    inherit;

  stroke:
    currentColor;
}

.sanctions-btn:hover:not(:disabled) {
  border-color:
    var(--san-text-muted);

  background:
    var(--san-surface-hover);
}

.sanctions-btn:focus-visible {
  outline:
    none;

  border-color:
    var(--san-text-strong);
}

.sanctions-btn:disabled {
  opacity:
    0.46;

  cursor:
    not-allowed;
}

.sanctions-btn--compact {
  min-height:
    32px;

  padding:
    0 9px;

  font-size:
    9px;
}


/* =========================================================
   BOTÓN OSCURO
   ========================================================= */

.sanctions-btn--dark {
  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}

.sanctions-btn--dark span,
.sanctions-btn--dark .icon {
  color:
    #ffffff !important;
}

.sanctions-btn--dark .icon {
  stroke:
    #ffffff !important;
}

.sanctions-btn--dark:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.sanctions-metrics {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    12px;

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

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

  background:
    var(--san-surface);

  overflow:
    hidden;
}

.sanctions-metric {
  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  min-height:
    84px;

  padding:
    12px;

  border:
    0;

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

  border-radius:
    0;

  background:
    var(--san-surface);

  color:
    var(--san-text);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
      var(--san-transition);
}

.sanctions-metric:last-child {
  border-right:
    0;
}

.sanctions-metric:hover,
.sanctions-metric.is-active {
  background:
    var(--san-surface-hover);
}

.sanctions-metric.is-active {
  box-shadow:
    inset 0 -2px 0
    var(--san-text-strong) !important;
}

.sanctions-metric__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

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

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

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

  color:
    var(--san-text-strong);
}

.sanctions-metric__icon .icon {
  width:
    15px;

  height:
    15px;
}

.sanctions-metric__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-metric__copy small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.2;
}

.sanctions-metric__copy strong {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1.05;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-metric__copy em {
  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(--san-text-secondary);

  font-size:
    8px;

  font-style:
    normal;

  font-weight:
    550;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-metric__arrow {
  width:
    13px;

  height:
    13px;

  color:
    var(--san-text-faint);
}


/* =========================================================
   PROCESS
   ========================================================= */

.sanctions-process {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    16px;

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

  border-radius:
    var(--san-radius-md);

  background:
    var(--san-surface);

  overflow:
    hidden;
}

.sanctions-process-card {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  min-height:
    60px;

  padding:
    10px;

  border:
    0;

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

  border-radius:
    0;

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

  color:
    var(--san-text);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
      var(--san-transition);
}

.sanctions-process-card:last-child {
  border-right:
    0;
}

.sanctions-process-card:not(:disabled):hover {
  background:
    var(--san-surface-hover);
}

.sanctions-process-card:disabled {
  opacity:
    1;

  cursor:
    default;
}

.sanctions-process-card > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

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

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

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

.sanctions-process-card > span .icon {
  width:
    13px;

  height:
    13px;
}

.sanctions-process-card > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-process-card small {
  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-process-card strong {
  margin-top:
    2px;

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

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.1;
}


/* =========================================================
   PANEL
   ========================================================= */

.sanctions-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--san-surface);

  overflow:
    hidden;
}


/* =========================================================
   FILTROS
   ========================================================= */

.sanctions-filters {
  width:
    100%;

  min-width:
    0;

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

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

.sanctions-filters__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  min-width:
    0;

  padding:
    14px 15px;
}

.sanctions-filters__title {
  min-width:
    0;
}

.sanctions-filters__title > span {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.07em;
}

.sanctions-filters__title > strong {
  display:
    block;

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

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.25;
}

.sanctions-filters__title p {
  max-width:
    700px;

  margin-top:
    4px;

  color:
    var(--san-text-secondary);

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;
}

.sanctions-filters__summary {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-width:
    0;
}

.sanctions-filters__summary > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    31px;

  padding:
    0 9px;

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

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

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

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    650;
}

.sanctions-filters__summary > span strong {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  border-radius:
    999px;

  background:
    var(--san-text-strong);

  color:
    var(--san-surface);

  font-size:
    8px;

  font-weight:
    800;
}


/* =========================================================
   BÚSQUEDA
   ========================================================= */

.sanctions-search-row {
  display:
    grid;

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

  gap:
    8px;

  min-width:
    0;

  padding:
    0 15px 14px;
}

.sanctions-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-width:
    0;
}

.sanctions-search > .icon {
  position:
    absolute;

  left:
    11px;

  z-index:
    2;

  width:
    14px;

  height:
    14px;

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

  pointer-events:
    none;
}

.sanctions-search input {
  width:
    100%;

  min-width:
    0;

  height:
    var(--san-control-height);

  padding:
    0 38px 0 34px;

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

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

  background:
    var(--san-surface);

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

  font-size:
    11px;

  font-weight:
    600;
}

.sanctions-search input:hover {
  border-color:
    var(--san-border-strong);
}

.sanctions-search input:focus {
  outline:
    none;

  border-color:
    var(--san-text-strong);
}

.sanctions-search > button {
  position:
    absolute;

  top:
    50%;

  right:
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  padding:
    0;

  transform:
    translateY(-50%);

  border:
    0;

  border-radius:
    5px;

  background:
    transparent;

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

  cursor:
    pointer;
}


/* =========================================================
   FILTER BODY
   ========================================================= */

.sanctions-filters__body {
  display:
    none;

  border-top:
    1px solid
    var(--san-border);

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

.sanctions-filters.is-open
.sanctions-filters__body {
  display:
    block;
}

.sanctions-filters-grid {
  display:
    grid;

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

  gap:
    9px;

  min-width:
    0;

  padding:
    13px 15px;
}

.sanctions-filter-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}

.sanctions-filter-field > span {
  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    750;
}

.sanctions-filter-field input,
.sanctions-filter-field select {
  width:
    100%;

  min-width:
    0;

  height:
    var(--san-control-height);

  padding:
    0 10px;

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

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

  background:
    var(--san-surface);

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

  font-size:
    10px;

  font-weight:
    600;
}

.sanctions-filter-field input:focus,
.sanctions-filter-field select:focus {
  outline:
    none;

  border-color:
    var(--san-text-strong);
}

.sanctions-filters__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    10px 15px;

  border-top:
    1px solid
    var(--san-border);

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

.sanctions-filters__footer > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

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

  font-size:
    9px;

  font-weight:
    550;
}


/* =========================================================
   TABLA
   ========================================================= */

.sanctions-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

.sanctions-table {
  width:
    100%;

  min-width:
    0;

  border-collapse:
    collapse;

  table-layout:
    fixed;
}

.sanctions-table thead {
  background:
    var(--san-surface-soft);
}

.sanctions-table th {
  height:
    36px;

  padding:
    0 8px;

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

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

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

  font-size:
    7.5px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    0.035em;

  text-align:
    left;

  text-transform:
    uppercase;
}

.sanctions-table th:last-child {
  border-right:
    0;
}

.sanctions-table tbody tr {
  background:
    var(--san-surface);

  transition:
    background
      var(--san-transition);
}

.sanctions-table tbody tr:hover {
  background:
    var(--san-surface-hover);
}

.sanctions-table td {
  min-width:
    0;

  padding:
    9px 8px;

  border-right:
    1px solid
    var(--san-border-soft);

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

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  vertical-align:
    middle;
}

.sanctions-table td:last-child {
  border-right:
    0;
}

.sanctions-table tbody tr:last-child td {
  border-bottom:
    0;
}


/* =========================================================
   COLUMNAS TABLA
   ========================================================= */

.sanctions-table th:nth-child(1),
.sanctions-table td:nth-child(1) {
  width:
    15%;
}

.sanctions-table th:nth-child(2),
.sanctions-table td:nth-child(2) {
  width:
    10%;
}

.sanctions-table th:nth-child(3),
.sanctions-table td:nth-child(3) {
  width:
    18%;
}

.sanctions-table th:nth-child(4),
.sanctions-table td:nth-child(4) {
  width:
    8%;
}

.sanctions-table th:nth-child(5),
.sanctions-table td:nth-child(5) {
  width:
    8%;
}

.sanctions-table th:nth-child(6),
.sanctions-table td:nth-child(6),
.sanctions-table th:nth-child(7),
.sanctions-table td:nth-child(7),
.sanctions-table th:nth-child(8),
.sanctions-table td:nth-child(8),
.sanctions-table th:nth-child(9),
.sanctions-table td:nth-child(9) {
  width:
    5%;
}

.sanctions-table th:nth-child(10),
.sanctions-table td:nth-child(10) {
  width:
    11%;
}

.sanctions-table th:nth-child(11),
.sanctions-table td:nth-child(11) {
  width:
    10%;
}


/* =========================================================
   PERSONA
   ========================================================= */

.sanctions-person {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}

.sanctions-person__avatar {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

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

  border-radius:
    50%;

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

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

  font-size:
    9px;

  font-weight:
    800;
}

.sanctions-person > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-person strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-person small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   INCIDENT CELL
   ========================================================= */

.sanctions-incident-cell {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-incident-cell strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-incident-cell small {
  display:
    -webkit-box;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    500;

  line-height:
    1.3;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


/* =========================================================
   CELL
   ========================================================= */

.sanctions-cell-main,
.sanctions-date {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-width:
    0;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    700;
}

.sanctions-count .icon {
  width:
    11px;

  height:
    11px;
}


/* =========================================================
   NIVEL
   ========================================================= */

.sanctions-level {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}

.sanctions-level > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

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

  border-radius:
    6px;

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

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

  font-size:
    9px;

  font-weight:
    800;
}

.sanctions-level > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-level strong {
  color:
    var(--san-text-strong);

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.15;
}

.sanctions-level small {
  margin-top:
    1px;

  overflow:
    hidden;

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

  font-size:
    7px;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   NIVELES · COLORES SUTILES
   ========================================================= */

.sanctions-level--level-1 > span,
.sanctions-level-preview__number--level-1 {
  border-color:
    #b9dfc8;

  background:
    #edf8f2;

  color:
    #18794e;
}

.sanctions-level--level-2 > span,
.sanctions-level-preview__number--level-2 {
  border-color:
    #d8d09b;

  background:
    #fffbe8;

  color:
    #7c6500;
}

.sanctions-level--level-3 > span,
.sanctions-level-preview__number--level-3 {
  border-color:
    #e2c597;

  background:
    #fff5e8;

  color:
    #8a4f00;
}

.sanctions-level--level-4 > span,
.sanctions-level-preview__number--level-4 {
  border-color:
    #e5ada7;

  background:
    #fff0ee;

  color:
    #a02a20;
}

.sanctions-level--level-5 > span,
.sanctions-level-preview__number--level-5 {
  border-color:
    #d89a96;

  background:
    #fde8e7;

  color:
    #861d17;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.sanctions-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  max-width:
    100%;

  min-height:
    23px;

  padding:
    0 7px;

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

  border-radius:
    999px;

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

  color:
    var(--san-text-secondary);

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;
}

.sanctions-state .icon {
  width:
    10px;

  height:
    10px;
}

.sanctions-state--aprobada,
.sanctions-state--aplicada,
.sanctions-state--cumplida,
.sanctions-state--cerrada {
  border-color:
    var(--san-success-border);

  background:
    var(--san-success-bg);

  color:
    var(--san-success);
}

.sanctions-state--anulada {
  border-color:
    var(--san-danger-border);

  background:
    var(--san-danger-bg);

  color:
    var(--san-danger);
}

.sanctions-state--pendiente-firma,
.sanctions-state--pendiente-revision,
.sanctions-state--pendiente-capacitacion,
.sanctions-state--pendiente-resolucion,
.sanctions-state--pendiente-aprobacion {
  border-color:
    var(--san-warning-border);

  background:
    var(--san-warning-bg);

  color:
    var(--san-warning);
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.sanctions-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}

.sanctions-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  padding:
    0;

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

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

  background:
    var(--san-surface);

  color:
    var(--san-text-secondary);

  cursor:
    pointer;

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

.sanctions-icon-btn .icon {
  width:
    13px;

  height:
    13px;
}

.sanctions-icon-btn:hover {
  border-color:
    var(--san-border-strong);

  background:
    var(--san-surface-hover);

  color:
    var(--san-text-strong);
}

.sanctions-icon-btn--danger {
  color:
    var(--san-danger);
}

.sanctions-icon-btn--danger:hover {
  border-color:
    var(--san-danger-border);

  background:
    var(--san-danger-bg);

  color:
    var(--san-danger);
}


/* =========================================================
   TABLE MESSAGE
   ========================================================= */

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

.sanctions-loading,
.sanctions-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    6px;

  width:
    100%;

  min-height:
    210px;

  padding:
    24px;

  text-align:
    center;
}

.sanctions-loading > span,
.sanctions-empty > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

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

  border-radius:
    var(--san-radius-md);

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

.sanctions-loading strong,
.sanctions-empty strong {
  color:
    var(--san-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}

.sanctions-loading p,
.sanctions-empty p {
  max-width:
    440px;

  color:
    var(--san-text-secondary);

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.5;
}

.sanctions-empty--error > span {
  border-color:
    var(--san-danger-border);

  background:
    var(--san-danger-bg);

  color:
    var(--san-danger);
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.sanctions-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    10px 14px;

  border-top:
    1px solid
    var(--san-border);

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

.sanctions-pagination__info {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

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

  font-size:
    9px;

  font-weight:
    550;
}

.sanctions-pagination__info strong {
  color:
    var(--san-text-strong);

  font-weight:
    800;
}

.sanctions-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  min-width:
    0;
}

.sanctions-pagination__page {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

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

  font-size:
    9px;
}

.sanctions-pagination__page strong {
  color:
    var(--san-text-strong);

  font-weight:
    800;
}


/* =========================================================
   MODAL OPEN
   ========================================================= */

body.sanctions-modal-open {
  overflow:
    hidden !important;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.sanctions-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    99990;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    22px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

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


/* =========================================================
   MODAL
   ========================================================= */

.sanctions-modal {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      100%,
      1040px
    );

  max-width:
    100%;

  max-height:
    calc(
      100vh -
      44px
    );

  margin:
    auto;

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

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

  background:
    var(--san-surface);

  color:
    var(--san-text);

  overflow:
    hidden;
}

.sanctions-modal--medium {
  width:
    min(
      100%,
      760px
    );
}

.sanctions-modal--form {
  width:
    min(
      100%,
      980px
    );
}

.sanctions-modal--detail {
  width:
    min(
      100%,
      1120px
    );
}


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

.sanctions-modal__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  flex:
    0 0 auto;

  min-width:
    0;

  padding:
    14px 15px;

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

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

.sanctions-modal__brand {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  min-width:
    0;
}

.sanctions-modal__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

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

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

  color:
    var(--san-text-strong);
}

.sanctions-modal__brand > div {
  min-width:
    0;
}

.sanctions-modal__brand > div > span {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.07em;
}

.sanctions-modal__brand h3 {
  color:
    var(--san-text-strong);

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.015em;
}

.sanctions-modal__brand p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.4;
}

.sanctions-modal__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  padding:
    0;

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

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

  background:
    var(--san-surface);

  color:
    var(--san-text-secondary);

  cursor:
    pointer;
}

.sanctions-modal__close:hover {
  border-color:
    var(--san-border-strong);

  background:
    var(--san-surface-hover);

  color:
    var(--san-text-strong);
}


/* =========================================================
   FORM
   ========================================================= */

.sanctions-form {
  min-width:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}

.sanctions-form-section {
  min-width:
    0;

  padding:
    14px 15px;

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

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

.sanctions-form-section:last-of-type {
  border-bottom:
    0;
}


/* =========================================================
   FORM SECTION TITLE
   ========================================================= */

.sanctions-form-section__title {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  margin-bottom:
    12px;
}

.sanctions-form-section__title > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

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

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

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

.sanctions-form-section__title > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-form-section__title small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.06em;
}

.sanctions-form-section__title strong {
  margin-top:
    2px;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.sanctions-form-grid {
  display:
    grid;

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

  gap:
    10px;

  min-width:
    0;
}

.sanctions-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}

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

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

.sanctions-field > span {
  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   INPUTS
   ========================================================= */

.sanctions-field input,
.sanctions-field select,
.sanctions-field textarea,
.sanctions-score-field select {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--san-surface);

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

  font-size:
    10px;

  font-weight:
    600;

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

.sanctions-field input,
.sanctions-field select,
.sanctions-score-field select {
  height:
    var(--san-control-height);

  padding:
    0 10px;
}

.sanctions-field textarea {
  min-height:
    76px;

  padding:
    9px 10px;

  resize:
    vertical;

  line-height:
    1.45;
}

.sanctions-field input:hover:not(:disabled),
.sanctions-field select:hover:not(:disabled),
.sanctions-field textarea:hover:not(:disabled),
.sanctions-score-field select:hover:not(:disabled) {
  border-color:
    var(--san-border-strong);
}

.sanctions-field input:focus,
.sanctions-field select:focus,
.sanctions-field textarea:focus,
.sanctions-score-field select:focus {
  outline:
    none;

  border-color:
    var(--san-text-strong);
}

.sanctions-field input:disabled,
.sanctions-field select:disabled,
.sanctions-field textarea:disabled {
  background:
    var(--san-surface-muted);

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

  cursor:
    not-allowed;
}

.sanctions-field input::placeholder,
.sanctions-field textarea::placeholder {
  color:
    var(--san-text-faint);

  opacity:
    1;
}


/* =========================================================
   LEVEL PREVIEW
   ========================================================= */

.sanctions-level-preview {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  margin-top:
    11px;

  padding:
    10px;

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

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

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

.sanctions-level-preview__number {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

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

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

  font-size:
    14px;

  font-weight:
    800;
}

.sanctions-level-preview > div {
  min-width:
    0;
}

.sanctions-level-preview strong {
  color:
    var(--san-text-strong);

  font-size:
    11px;

  font-weight:
    800;
}

.sanctions-level-preview p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.4;
}


/* =========================================================
   CHECK GRID
   ========================================================= */

.sanctions-check-grid {
  display:
    grid;

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

  gap:
    7px;

  min-width:
    0;

  margin-top:
    11px;
}

.sanctions-check {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  min-height:
    34px;

  padding:
    7px 9px;

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

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

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

  cursor:
    pointer;
}

.sanctions-check--standalone {
  width:
    fit-content;

  max-width:
    100%;

  margin-top:
    11px;
}

.sanctions-check input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

.sanctions-check > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

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

  border-radius:
    4px;

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

.sanctions-check > span .icon {
  width:
    11px;

  height:
    11px;

  opacity:
    0;
}

.sanctions-check input:checked + span {
  border-color:
    var(--san-text-strong);

  background:
    var(--san-text-strong);

  color:
    #ffffff;
}

.sanctions-check input:checked + span .icon {
  opacity:
    1;

  stroke:
    #ffffff;
}

.sanctions-check em {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-style:
    normal;

  font-weight:
    650;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SCORE GRID
   ========================================================= */

.sanctions-score-grid {
  display:
    grid;

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

  gap:
    9px;

  min-width:
    0;
}

.sanctions-score-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}

.sanctions-score-field > span {
  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.sanctions-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    11px 15px;

  border-top:
    1px solid
    var(--san-border);

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

.sanctions-modal__footer > div:last-child {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


/* =========================================================
   TOAST
   ========================================================= */

.sanctions-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    100000;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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

  padding:
    10px 12px;

  border:
    1px solid
    var(--san-success-border);

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

  background:
    var(--san-success-bg);

  color:
    var(--san-success);

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;

  opacity:
    0;

  transform:
    translateY(8px);

  pointer-events:
    none;

  transition:
    opacity
      140ms ease,
    transform
      140ms ease;
}

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

  transform:
    translateY(0);
}

.sanctions-toast--error {
  border-color:
    var(--san-danger-border);

  background:
    var(--san-danger-bg);

  color:
    var(--san-danger);
}

.sanctions-toast--warning {
  border-color:
    var(--san-warning-border);

  background:
    var(--san-warning-bg);

  color:
    var(--san-warning);
}

.sanctions-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;
}


/* =========================================================
   SPIN
   ========================================================= */

.sanctions-spin {
  animation:
    sanctions-spin
    0.8s
    linear
    infinite;
}

@keyframes sanctions-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.sanctions-page,
body[data-theme="dark"]
.sanctions-page,
.dark
.sanctions-page,
[data-theme="dark"]
.sanctions-page {
  --san-bg:
    #000000;

  --san-surface:
    #080808;

  --san-surface-soft:
    #0d0d0d;

  --san-surface-muted:
    #121212;

  --san-surface-hover:
    #141414;

  --san-border:
    #272727;

  --san-border-strong:
    #3a3a3a;

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

  --san-text:
    #ededed;

  --san-text-strong:
    #ffffff;

  --san-text-secondary:
    #c7c7c7;

  --san-text-muted:
    #979797;

  --san-text-faint:
    #777777;

  --san-success:
    #6ed6a1;

  --san-success-bg:
    #071a10;

  --san-success-border:
    #17482f;

  --san-danger:
    #ff8a80;

  --san-danger-bg:
    #1e0908;

  --san-danger-border:
    #54201c;

  --san-warning:
    #e5c463;

  --san-warning-bg:
    #1b1506;

  --san-warning-border:
    #534116;

  --san-info:
    #d6d6d6;

  --san-info-bg:
    #111111;

  --san-info-border:
    #333333;

  background:
    #000000;

  color:
    #ededed;
}


/* =========================================================
   DARK · APP
   ========================================================= */

html[data-theme="dark"]
.app-content:has(.sanctions-page),
body[data-theme="dark"]
.app-content:has(.sanctions-page),
.dark
.app-content:has(.sanctions-page),
[data-theme="dark"]
.app-content:has(.sanctions-page) {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · BOTONES OSCUROS
   ========================================================= */

html[data-theme="dark"]
.sanctions-btn--dark,
body[data-theme="dark"]
.sanctions-btn--dark,
.dark
.sanctions-btn--dark,
[data-theme="dark"]
.sanctions-btn--dark {
  border-color:
    #ffffff !important;

  background:
    #ffffff !important;

  color:
    #000000 !important;
}

html[data-theme="dark"]
.sanctions-btn--dark span,
body[data-theme="dark"]
.sanctions-btn--dark span,
.dark
.sanctions-btn--dark span,
[data-theme="dark"]
.sanctions-btn--dark span,
html[data-theme="dark"]
.sanctions-btn--dark .icon,
body[data-theme="dark"]
.sanctions-btn--dark .icon,
.dark
.sanctions-btn--dark .icon,
[data-theme="dark"]
.sanctions-btn--dark .icon {
  color:
    #000000 !important;

  stroke:
    #000000 !important;
}

html[data-theme="dark"]
.sanctions-btn--dark:hover:not(:disabled),
body[data-theme="dark"]
.sanctions-btn--dark:hover:not(:disabled),
.dark
.sanctions-btn--dark:hover:not(:disabled),
[data-theme="dark"]
.sanctions-btn--dark:hover:not(:disabled) {
  border-color:
    #e6e6e6 !important;

  background:
    #e6e6e6 !important;

  color:
    #000000 !important;
}


/* =========================================================
   DARK · CHECK
   ========================================================= */

html[data-theme="dark"]
.sanctions-check
input:checked + span,
body[data-theme="dark"]
.sanctions-check
input:checked + span,
.dark
.sanctions-check
input:checked + span,
[data-theme="dark"]
.sanctions-check
input:checked + span {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}

html[data-theme="dark"]
.sanctions-check
input:checked + span
.icon,
body[data-theme="dark"]
.sanctions-check
input:checked + span
.icon,
.dark
.sanctions-check
input:checked + span
.icon,
[data-theme="dark"]
.sanctions-check
input:checked + span
.icon {
  stroke:
    #000000;
}


/* =========================================================
   RESPONSIVE · 1280
   ========================================================= */

@media (
  max-width:
  1280px
) {
  .sanctions-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .sanctions-metric {
    border-bottom:
      1px solid
      var(--san-border);
  }

  .sanctions-metric:nth-child(3n) {
    border-right:
      0;
  }

  .sanctions-metric:nth-last-child(-n + 3) {
    border-bottom:
      0;
  }

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

  .sanctions-process-card {
    border-bottom:
      1px solid
      var(--san-border);
  }

  .sanctions-process-card:nth-child(3n) {
    border-right:
      0;
  }

  .sanctions-process-card:nth-last-child(-n + 3) {
    border-bottom:
      0;
  }

  .sanctions-head {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .sanctions-head__status {
    grid-column:
      1 / -1;

    grid-row:
      2;

    justify-content:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE · 1080
   ========================================================= */

@media (
  max-width:
  1080px
) {
  .sanctions-page {
    padding:
      16px;
  }

  .sanctions-table th,
  .sanctions-table td {
    padding-right:
      5px;

    padding-left:
      5px;
  }

  .sanctions-table th:nth-child(6),
  .sanctions-table td:nth-child(6),
  .sanctions-table th:nth-child(7),
  .sanctions-table td:nth-child(7),
  .sanctions-table th:nth-child(8),
  .sanctions-table td:nth-child(8),
  .sanctions-table th:nth-child(9),
  .sanctions-table td:nth-child(9) {
    font-size:
      8px;
  }

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

  .sanctions-field--wide {
    grid-column:
      span 1;
  }

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


/* =========================================================
   FIN PARTE 1 DE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · CAPITAL HUMANO · SANCIONES

   UBICACIÓN:
   frontend/src/pages/capital-humano/sanciones/sanciones.css

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


/* =========================================================
   DETALLE
   ========================================================= */

.sanctions-detail {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


/* =========================================================
   DETALLE · PERSONA
   ========================================================= */

.sanctions-detail-person {
  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  padding:
    13px 15px;

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

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

.sanctions-detail-person__avatar {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    50%;

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

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

  font-size:
    11px;

  font-weight:
    800;
}

.sanctions-detail-person__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-detail-person__copy > span {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.07em;
}

.sanctions-detail-person__copy > strong {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-detail-person__copy > p {
  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-detail-person__badges {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


/* =========================================================
   DETALLE · PROGRESO
   ========================================================= */

.sanctions-detail-progress {
  display:
    grid;

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

  align-items:
    center;

  gap:
    14px;

  min-width:
    0;

  padding:
    10px 15px;

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

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

.sanctions-detail-progress > div:first-child {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;
}

.sanctions-detail-progress > div:first-child > span {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}

.sanctions-detail-progress > div:first-child > strong {
  color:
    var(--san-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}

.sanctions-progress {
  width:
    100%;

  min-width:
    0;

  height:
    7px;

  overflow:
    hidden;

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

  border-radius:
    999px;

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

.sanctions-progress > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--san-text-strong);
}


/* =========================================================
   DETALLE · TABS
   ========================================================= */

.sanctions-detail-tabs {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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

.sanctions-detail-tab {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-width:
    0;

  min-height:
    43px;

  padding:
    7px 8px;

  border:
    0;

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

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

  border-radius:
    0;

  background:
    transparent;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}

.sanctions-detail-tab:nth-child(5n) {
  border-right:
    0;
}

.sanctions-detail-tab:hover {
  background:
    var(--san-surface-hover);

  color:
    var(--san-text-strong);
}

.sanctions-detail-tab.is-active {
  background:
    var(--san-surface);

  color:
    var(--san-text-strong);
}

.sanctions-detail-tab.is-active::after {
  content:
    "";

  position:
    absolute;

  right:
    9px;

  bottom:
    -1px;

  left:
    9px;

  height:
    2px;

  background:
    var(--san-text-strong);
}

.sanctions-detail-tab .icon {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 auto;
}

.sanctions-detail-tab span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DETALLE · CONTENIDO
   ========================================================= */

.sanctions-detail-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;

  padding:
    14px 15px;

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


/* =========================================================
   SUMMARY GRID
   ========================================================= */

.sanctions-summary-grid {
  display:
    grid;

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

  min-width:
    0;

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

  border-radius:
    var(--san-radius-md);

  overflow:
    hidden;
}

.sanctions-summary-grid article {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    10px;

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

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

.sanctions-summary-grid article:last-child {
  border-right:
    0;
}

.sanctions-summary-grid small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}

.sanctions-summary-grid strong {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DETAIL BLOCK
   ========================================================= */

.sanctions-detail-block {
  min-width:
    0;

  padding:
    12px;

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

  border-radius:
    var(--san-radius-md);

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

.sanctions-detail-block > header {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  margin-bottom:
    9px;

  padding-bottom:
    9px;

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

.sanctions-detail-block > header > span {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}

.sanctions-detail-block > header > strong {
  margin-top:
    2px;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;
}

.sanctions-detail-block > p {
  color:
    var(--san-text-secondary);

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.55;

  overflow-wrap:
    anywhere;
}

.sanctions-detail-block dl {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-detail-block dl > div {
  display:
    grid;

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

  gap:
    10px;

  min-width:
    0;

  padding:
    7px 0;

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

.sanctions-detail-block dl > div:last-child {
  border-bottom:
    0;
}

.sanctions-detail-block dt {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}

.sanctions-detail-block dd {
  min-width:
    0;

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

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   DETAIL COLUMNS
   ========================================================= */

.sanctions-detail-columns {
  display:
    grid;

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

  gap:
    12px;

  min-width:
    0;
}


/* =========================================================
   DETAIL LIST
   ========================================================= */

.sanctions-detail-list {
  display:
    grid !important;

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

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

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

  overflow:
    hidden;
}

.sanctions-detail-list > div {
  display:
    flex !important;

  flex-direction:
    column;

  gap:
    2px !important;

  padding:
    9px !important;

  border-right:
    1px solid
    var(--san-border) !important;

  border-bottom:
    0 !important;

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

.sanctions-detail-list > div:last-child {
  border-right:
    0 !important;
}


/* =========================================================
   IMPACT TAGS
   ========================================================= */

.sanctions-impact-tags {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;

  margin-top:
    10px;
}

.sanctions-impact-tags > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    22px;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

  color:
    var(--san-text-secondary);

  font-size:
    8px;

  font-weight:
    700;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.sanctions-result-card {
  display:
    grid;

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

  gap:
    10px;

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid
    var(--san-success-border);

  border-radius:
    var(--san-radius-md);

  background:
    var(--san-success-bg);
}

.sanctions-result-card > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  border:
    1px solid
    var(--san-success-border);

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

  background:
    var(--san-surface);

  color:
    var(--san-success);
}

.sanctions-result-card > div {
  min-width:
    0;
}

.sanctions-result-card small {
  display:
    block;

  color:
    var(--san-success);

  font-size:
    8px;

  font-weight:
    800;
}

.sanctions-result-card strong {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    11px;

  font-weight:
    800;
}

.sanctions-result-card p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;
}


/* =========================================================
   TAB HEAD
   ========================================================= */

.sanctions-tab-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding-bottom:
    11px;

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

.sanctions-tab-head > div {
  min-width:
    0;
}

.sanctions-tab-head > div > span {
  display:
    block;

  margin-bottom:
    2px;

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.sanctions-tab-head > div > strong {
  display:
    block;

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

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.3;
}

.sanctions-tab-head > div > p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;
}


/* =========================================================
   CARD LIST
   ========================================================= */

.sanctions-card-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}


/* =========================================================
   RECORD CARD
   ========================================================= */

.sanctions-record-card {
  display:
    grid;

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

  align-items:
    start;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px;

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

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

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

.sanctions-record-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

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

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

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

  color:
    var(--san-text-strong);
}

.sanctions-record-card__icon .icon {
  width:
    14px;

  height:
    14px;
}

.sanctions-record-card__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-record-card__copy > small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.03em;
}

.sanctions-record-card__copy > strong {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-record-card__copy > p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}

.sanctions-record-meta {
  display:
    inline-flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  margin-top:
    6px;

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

  font-size:
    8px;

  font-weight:
    600;
}

.sanctions-record-meta .icon {
  width:
    11px;

  height:
    11px;
}

.sanctions-record-card__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


/* =========================================================
   PLAN LIST
   ========================================================= */

.sanctions-plan-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

  min-width:
    0;
}

.sanctions-plan-card {
  min-width:
    0;

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

  border-radius:
    var(--san-radius-md);

  background:
    var(--san-surface);

  overflow:
    hidden;
}

.sanctions-plan-card > header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    11px;

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

.sanctions-plan-card > header > div:first-child {
  min-width:
    0;
}

.sanctions-plan-card > header small {
  display:
    block;

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

  font-size:
    8px;

  font-weight:
    800;
}

.sanctions-plan-card > header strong {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    11px;

  font-weight:
    800;
}

.sanctions-plan-card > header p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;
}

.sanctions-plan-card__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;

  flex:
    0 0 auto;
}

.sanctions-plan-meta {
  display:
    grid;

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

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

.sanctions-plan-meta > span {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    9px 11px;

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

.sanctions-plan-meta > span:first-child {
  border-right:
    1px solid
    var(--san-border);
}

.sanctions-plan-meta small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}

.sanctions-plan-meta strong {
  margin-top:
    2px;

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

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   OBJECTIVES
   ========================================================= */

.sanctions-objectives {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-objectives__empty {
  padding:
    12px;

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

  font-size:
    9px;

  text-align:
    center;
}

.sanctions-objective {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px 11px;

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

.sanctions-objective:last-child {
  border-bottom:
    0;
}

.sanctions-objective > div:first-child {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-objective > div:first-child > span {
  color:
    var(--san-text-muted);

  font-size:
    7px;

  font-weight:
    800;
}

.sanctions-objective > div:first-child > strong {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-objective > div:first-child > small {
  margin-top:
    2px;

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

  font-size:
    8px;
}

.sanctions-objective__progress {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}

.sanctions-objective__progress > strong {
  color:
    var(--san-text-strong);

  font-size:
    9px;

  font-weight:
    800;
}

.sanctions-objective__progress > span {
  display:
    block;

  width:
    100%;

  height:
    6px;

  overflow:
    hidden;

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

  border-radius:
    999px;

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

.sanctions-objective__progress > span > span {
  display:
    block;

  height:
    100%;

  background:
    var(--san-text-strong);
}

.sanctions-objective__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.sanctions-timeline {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-followup {
  position:
    relative;

  display:
    grid;

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

  gap:
    8px;

  min-width:
    0;

  padding-bottom:
    11px;
}

.sanctions-followup:last-child {
  padding-bottom:
    0;
}

.sanctions-followup::before {
  content:
    "";

  position:
    absolute;

  top:
    17px;

  bottom:
    -1px;

  left:
    7px;

  width:
    1px;

  background:
    var(--san-border);
}

.sanctions-followup:last-child::before {
  display:
    none;
}

.sanctions-followup__point {
  position:
    relative;

  z-index:
    1;

  display:
    block;

  width:
    15px;

  height:
    15px;

  margin-top:
    8px;

  border:
    4px solid
    var(--san-surface);

  border-radius:
    50%;

  background:
    var(--san-text-strong);
}

.sanctions-followup__content {
  min-width:
    0;

  padding:
    10px;

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

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

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

.sanctions-followup__content > header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  padding-bottom:
    8px;

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

.sanctions-followup__content > header > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-followup__content > header small {
  color:
    var(--san-text-muted);

  font-size:
    8px;

  font-weight:
    800;
}

.sanctions-followup__content > header strong {
  margin-top:
    2px;

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

  font-size:
    10px;

  font-weight:
    750;
}

.sanctions-followup__content > header > span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    22px;

  padding:
    0 7px;

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

  border-radius:
    999px;

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

  color:
    var(--san-text-secondary);

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;
}

.sanctions-followup__content > p {
  margin-top:
    8px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;
}

.sanctions-followup__note {
  margin-top:
    8px;

  padding:
    8px;

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

  border-radius:
    var(--san-radius-xs);

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

.sanctions-followup__note > strong {
  color:
    var(--san-text-strong);

  font-size:
    9px;

  font-weight:
    750;
}

.sanctions-followup__note > p {
  margin-top:
    3px;

  color:
    var(--san-text-secondary);

  font-size:
    8px;

  line-height:
    1.45;
}

.sanctions-followup__content > footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  margin-top:
    9px;

  padding-top:
    8px;

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

.sanctions-followup__content > footer > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;

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

  font-size:
    8px;
}

.sanctions-followup__content > footer > div {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  flex:
    0 0 auto;
}


/* =========================================================
   HISTORY
   ========================================================= */

.sanctions-history {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.sanctions-history-item {
  display:
    grid;

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

  gap:
    9px;

  min-width:
    0;

  padding:
    9px 0;

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

.sanctions-history-item:last-child {
  border-bottom:
    0;
}

.sanctions-history-item > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

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

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

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

.sanctions-history-item > div {
  min-width:
    0;
}

.sanctions-history-item header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;
}

.sanctions-history-item header strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sanctions-history-item header small {
  flex:
    0 0 auto;

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

  font-size:
    8px;
}

.sanctions-history-item p {
  margin-top:
    4px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}

.sanctions-history-item em {
  display:
    block;

  margin-top:
    3px;

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

  font-size:
    8px;

  font-style:
    normal;

  line-height:
    1.4;
}


/* =========================================================
   DETAIL EMPTY
   ========================================================= */

.sanctions-detail-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    6px;

  min-height:
    150px;

  padding:
    20px;

  border:
    1px dashed
    var(--san-border-strong);

  border-radius:
    var(--san-radius-md);

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

  text-align:
    center;
}

.sanctions-detail-empty > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

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

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

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

.sanctions-detail-empty > strong {
  color:
    var(--san-text-strong);

  font-size:
    11px;

  font-weight:
    800;
}

.sanctions-detail-empty > p {
  max-width:
    420px;

  color:
    var(--san-text-secondary);

  font-size:
    9px;

  line-height:
    1.45;
}


/* =========================================================
   DETAIL FOOTER
   ========================================================= */

.sanctions-detail-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;

  padding:
    10px 15px;

  border-top:
    1px solid
    var(--san-border);

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


/* =========================================================
   DARK · SUPERFICIES
   ========================================================= */

html[data-theme="dark"]
.sanctions-modal,
body[data-theme="dark"]
.sanctions-modal,
.dark
.sanctions-modal,
[data-theme="dark"]
.sanctions-modal {
  border-color:
    #383838;

  background:
    #080808;

  color:
    #ededed;
}

html[data-theme="dark"]
.sanctions-modal__head,
html[data-theme="dark"]
.sanctions-form-section,
html[data-theme="dark"]
.sanctions-detail-person,
html[data-theme="dark"]
.sanctions-detail-content,
body[data-theme="dark"]
.sanctions-modal__head,
body[data-theme="dark"]
.sanctions-form-section,
body[data-theme="dark"]
.sanctions-detail-person,
body[data-theme="dark"]
.sanctions-detail-content,
.dark
.sanctions-modal__head,
.dark
.sanctions-form-section,
.dark
.sanctions-detail-person,
.dark
.sanctions-detail-content,
[data-theme="dark"]
.sanctions-modal__head,
[data-theme="dark"]
.sanctions-form-section,
[data-theme="dark"]
.sanctions-detail-person,
[data-theme="dark"]
.sanctions-detail-content {
  background:
    #080808;

  border-color:
    #272727;
}

html[data-theme="dark"]
.sanctions-detail-progress,
html[data-theme="dark"]
.sanctions-detail-tabs,
html[data-theme="dark"]
.sanctions-modal__footer,
html[data-theme="dark"]
.sanctions-detail-footer,
body[data-theme="dark"]
.sanctions-detail-progress,
body[data-theme="dark"]
.sanctions-detail-tabs,
body[data-theme="dark"]
.sanctions-modal__footer,
body[data-theme="dark"]
.sanctions-detail-footer,
.dark
.sanctions-detail-progress,
.dark
.sanctions-detail-tabs,
.dark
.sanctions-modal__footer,
.dark
.sanctions-detail-footer,
[data-theme="dark"]
.sanctions-detail-progress,
[data-theme="dark"]
.sanctions-detail-tabs,
[data-theme="dark"]
.sanctions-modal__footer,
[data-theme="dark"]
.sanctions-detail-footer {
  background:
    #0d0d0d;

  border-color:
    #272727;
}


/* =========================================================
   DARK · CARDS
   ========================================================= */

html[data-theme="dark"]
.sanctions-detail-block,
html[data-theme="dark"]
.sanctions-record-card,
html[data-theme="dark"]
.sanctions-plan-card,
html[data-theme="dark"]
.sanctions-followup__content,
body[data-theme="dark"]
.sanctions-detail-block,
body[data-theme="dark"]
.sanctions-record-card,
body[data-theme="dark"]
.sanctions-plan-card,
body[data-theme="dark"]
.sanctions-followup__content,
.dark
.sanctions-detail-block,
.dark
.sanctions-record-card,
.dark
.sanctions-plan-card,
.dark
.sanctions-followup__content,
[data-theme="dark"]
.sanctions-detail-block,
[data-theme="dark"]
.sanctions-record-card,
[data-theme="dark"]
.sanctions-plan-card,
[data-theme="dark"]
.sanctions-followup__content {
  border-color:
    #2b2b2b;

  background:
    #080808;
}


/* =========================================================
   DARK · INPUTS
   ========================================================= */

html[data-theme="dark"]
.sanctions-field input,
html[data-theme="dark"]
.sanctions-field select,
html[data-theme="dark"]
.sanctions-field textarea,
html[data-theme="dark"]
.sanctions-score-field select,
body[data-theme="dark"]
.sanctions-field input,
body[data-theme="dark"]
.sanctions-field select,
body[data-theme="dark"]
.sanctions-field textarea,
body[data-theme="dark"]
.sanctions-score-field select,
.dark
.sanctions-field input,
.dark
.sanctions-field select,
.dark
.sanctions-field textarea,
.dark
.sanctions-score-field select,
[data-theme="dark"]
.sanctions-field input,
[data-theme="dark"]
.sanctions-field select,
[data-theme="dark"]
.sanctions-field textarea,
[data-theme="dark"]
.sanctions-score-field select {
  border-color:
    #333333;

  background:
    #0a0a0a;

  color:
    #ffffff;
}

html[data-theme="dark"]
.sanctions-field input:focus,
html[data-theme="dark"]
.sanctions-field select:focus,
html[data-theme="dark"]
.sanctions-field textarea:focus,
html[data-theme="dark"]
.sanctions-score-field select:focus,
body[data-theme="dark"]
.sanctions-field input:focus,
body[data-theme="dark"]
.sanctions-field select:focus,
body[data-theme="dark"]
.sanctions-field textarea:focus,
body[data-theme="dark"]
.sanctions-score-field select:focus,
.dark
.sanctions-field input:focus,
.dark
.sanctions-field select:focus,
.dark
.sanctions-field textarea:focus,
.dark
.sanctions-score-field select:focus,
[data-theme="dark"]
.sanctions-field input:focus,
[data-theme="dark"]
.sanctions-field select:focus,
[data-theme="dark"]
.sanctions-field textarea:focus,
[data-theme="dark"]
.sanctions-score-field select:focus {
  border-color:
    #ffffff;
}


/* =========================================================
   DARK · TABS
   ========================================================= */

html[data-theme="dark"]
.sanctions-detail-tab,
body[data-theme="dark"]
.sanctions-detail-tab,
.dark
.sanctions-detail-tab,
[data-theme="dark"]
.sanctions-detail-tab {
  color:
    #bfbfbf;
}

html[data-theme="dark"]
.sanctions-detail-tab.is-active,
body[data-theme="dark"]
.sanctions-detail-tab.is-active,
.dark
.sanctions-detail-tab.is-active,
[data-theme="dark"]
.sanctions-detail-tab.is-active {
  background:
    #080808;

  color:
    #ffffff;
}

html[data-theme="dark"]
.sanctions-detail-tab.is-active::after,
body[data-theme="dark"]
.sanctions-detail-tab.is-active::after,
.dark
.sanctions-detail-tab.is-active::after,
[data-theme="dark"]
.sanctions-detail-tab.is-active::after {
  background:
    #ffffff;
}


/* =========================================================
   DARK · PROGRESS
   ========================================================= */

html[data-theme="dark"]
.sanctions-progress,
html[data-theme="dark"]
.sanctions-objective__progress > span,
body[data-theme="dark"]
.sanctions-progress,
body[data-theme="dark"]
.sanctions-objective__progress > span,
.dark
.sanctions-progress,
.dark
.sanctions-objective__progress > span,
[data-theme="dark"]
.sanctions-progress,
[data-theme="dark"]
.sanctions-objective__progress > span {
  border-color:
    #333333;

  background:
    #111111;
}

html[data-theme="dark"]
.sanctions-progress > span,
html[data-theme="dark"]
.sanctions-objective__progress > span > span,
body[data-theme="dark"]
.sanctions-progress > span,
body[data-theme="dark"]
.sanctions-objective__progress > span > span,
.dark
.sanctions-progress > span,
.dark
.sanctions-objective__progress > span > span,
[data-theme="dark"]
.sanctions-progress > span,
[data-theme="dark"]
.sanctions-objective__progress > span > span {
  background:
    #ffffff;
}


/* =========================================================
   DARK · NIVEL
   ========================================================= */

html[data-theme="dark"]
.sanctions-level--level-1 > span,
html[data-theme="dark"]
.sanctions-level-preview__number--level-1,
body[data-theme="dark"]
.sanctions-level--level-1 > span,
body[data-theme="dark"]
.sanctions-level-preview__number--level-1,
.dark
.sanctions-level--level-1 > span,
.dark
.sanctions-level-preview__number--level-1,
[data-theme="dark"]
.sanctions-level--level-1 > span,
[data-theme="dark"]
.sanctions-level-preview__number--level-1 {
  border-color:
    #17482f;

  background:
    #071a10;

  color:
    #6ed6a1;
}

html[data-theme="dark"]
.sanctions-level--level-2 > span,
html[data-theme="dark"]
.sanctions-level-preview__number--level-2,
body[data-theme="dark"]
.sanctions-level--level-2 > span,
body[data-theme="dark"]
.sanctions-level-preview__number--level-2,
.dark
.sanctions-level--level-2 > span,
.dark
.sanctions-level-preview__number--level-2,
[data-theme="dark"]
.sanctions-level--level-2 > span,
[data-theme="dark"]
.sanctions-level-preview__number--level-2 {
  border-color:
    #4f431c;

  background:
    #191506;

  color:
    #e0c866;
}

html[data-theme="dark"]
.sanctions-level--level-3 > span,
html[data-theme="dark"]
.sanctions-level-preview__number--level-3,
body[data-theme="dark"]
.sanctions-level--level-3 > span,
body[data-theme="dark"]
.sanctions-level-preview__number--level-3,
.dark
.sanctions-level--level-3 > span,
.dark
.sanctions-level-preview__number--level-3,
[data-theme="dark"]
.sanctions-level--level-3 > span,
[data-theme="dark"]
.sanctions-level-preview__number--level-3 {
  border-color:
    #553515;

  background:
    #1d1006;

  color:
    #e5a55d;
}

html[data-theme="dark"]
.sanctions-level--level-4 > span,
html[data-theme="dark"]
.sanctions-level-preview__number--level-4,
body[data-theme="dark"]
.sanctions-level--level-4 > span,
body[data-theme="dark"]
.sanctions-level-preview__number--level-4,
.dark
.sanctions-level--level-4 > span,
.dark
.sanctions-level-preview__number--level-4,
[data-theme="dark"]
.sanctions-level--level-4 > span,
[data-theme="dark"]
.sanctions-level-preview__number--level-4 {
  border-color:
    #58251f;

  background:
    #1d0b09;

  color:
    #f08a80;
}

html[data-theme="dark"]
.sanctions-level--level-5 > span,
html[data-theme="dark"]
.sanctions-level-preview__number--level-5,
body[data-theme="dark"]
.sanctions-level--level-5 > span,
body[data-theme="dark"]
.sanctions-level-preview__number--level-5,
.dark
.sanctions-level--level-5 > span,
.dark
.sanctions-level-preview__number--level-5,
[data-theme="dark"]
.sanctions-level--level-5 > span,
[data-theme="dark"]
.sanctions-level-preview__number--level-5 {
  border-color:
    #64201c;

  background:
    #210706;

  color:
    #ff8a80;
}


/* =========================================================
   RESPONSIVE · 900
   ========================================================= */

@media (
  max-width:
  900px
) {
  .sanctions-head {
    grid-template-columns:
      1fr;
  }

  .sanctions-head__status,
  .sanctions-head__actions {
    grid-column:
      auto;

    grid-row:
      auto;

    justify-content:
      flex-start;
  }

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

  .sanctions-metric,
  .sanctions-process-card {
    border-right:
      1px solid
      var(--san-border);

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

  .sanctions-metric:nth-child(2n),
  .sanctions-process-card:nth-child(2n) {
    border-right:
      0;
  }

  .sanctions-metric:nth-last-child(-n + 2),
  .sanctions-process-card:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }

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

  .sanctions-table-wrap {
    overflow:
      hidden;
  }

  .sanctions-table {
    display:
      block;
  }

  .sanctions-table thead {
    display:
      none;
  }

  .sanctions-table tbody {
    display:
      grid;

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

    gap:
      9px;

    padding:
      9px;
  }

  .sanctions-table tbody tr {
    display:
      grid;

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

    min-width:
      0;

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

    border-radius:
      var(--san-radius-md);

    overflow:
      hidden;
  }

  .sanctions-table tbody td {
    position:
      relative;

    display:
      flex;

    align-items:
      center;

    min-width:
      0;

    width:
      auto !important;

    min-height:
      53px;

    padding:
      21px 8px 8px;

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

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

  .sanctions-table tbody td:nth-child(2n) {
    border-right:
      0;
  }

  .sanctions-table tbody td::before {
    position:
      absolute;

    top:
      6px;

    left:
      8px;

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

    font-size:
      7px;

    font-weight:
      800;

    line-height:
      1;

    letter-spacing:
      0.035em;

    text-transform:
      uppercase;
  }

  .sanctions-table tbody td:nth-child(1)::before {
    content:
      "Empleado";
  }

  .sanctions-table tbody td:nth-child(2)::before {
    content:
      "Nivel";
  }

  .sanctions-table tbody td:nth-child(3)::before {
    content:
      "Incidente";
  }

  .sanctions-table tbody td:nth-child(4)::before {
    content:
      "Sector";
  }

  .sanctions-table tbody td:nth-child(5)::before {
    content:
      "Fecha";
  }

  .sanctions-table tbody td:nth-child(6)::before {
    content:
      "Evidencias";
  }

  .sanctions-table tbody td:nth-child(7)::before {
    content:
      "Firmas";
  }

  .sanctions-table tbody td:nth-child(8)::before {
    content:
      "Capacitación";
  }

  .sanctions-table tbody td:nth-child(9)::before {
    content:
      "Seguimiento";
  }

  .sanctions-table tbody td:nth-child(10)::before {
    content:
      "Estado";
  }

  .sanctions-table tbody td:nth-child(11)::before {
    content:
      "Acciones";
  }

  .sanctions-table tbody td:nth-child(11) {
    grid-column:
      1 / -1;

    border-right:
      0;

    border-bottom:
      0;
  }

  .sanctions-table-message {
    grid-column:
      1 / -1 !important;
  }

  .sanctions-table-message::before {
    display:
      none;
  }

  .sanctions-detail-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .sanctions-detail-tab {
    border-right:
      1px solid
      var(--san-border);
  }

  .sanctions-detail-tab:nth-child(2n) {
    border-right:
      0;
  }

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

  .sanctions-summary-grid article {
    border-bottom:
      1px solid
      var(--san-border);
  }

  .sanctions-summary-grid article:nth-child(2n) {
    border-right:
      0;
  }

  .sanctions-summary-grid article:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }

  .sanctions-detail-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .sanctions-detail-list > div {
    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-detail-list > div:nth-child(2n) {
    border-right:
      0 !important;
  }

  .sanctions-detail-list > div:nth-last-child(-n + 2) {
    border-bottom:
      0 !important;
  }
}


/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
  760px
) {
  .sanctions-page {
    padding:
      10px;
  }

  .sanctions-head {
    gap:
      12px;

    margin-bottom:
      12px;

    padding-bottom:
      13px;
  }

  .sanctions-brand h2 {
    font-size:
      24px;
  }

  .sanctions-head__status {
    display:
      grid;

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

    width:
      100%;
  }

  .sanctions-head-status {
    width:
      100%;

    min-width:
      0;
  }

  .sanctions-head__actions {
    display:
      grid;

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

    width:
      100%;
  }

  .sanctions-head__actions .sanctions-btn {
    width:
      100%;
  }

  .sanctions-search-row {
    grid-template-columns:
      1fr;
  }

  .sanctions-search-row > .sanctions-btn {
    width:
      100%;
  }

  .sanctions-filters__head {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-filters__summary {
    justify-content:
      space-between;
  }

  .sanctions-pagination {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-pagination__info {
    justify-content:
      center;
  }

  .sanctions-pagination__actions {
    justify-content:
      center;

    flex-wrap:
      wrap;
  }

  .sanctions-modal-backdrop {
    padding:
      8px;
  }

  .sanctions-modal {
    width:
      100%;

    max-height:
      calc(
        100vh -
        16px
      );

    border-radius:
      var(--san-radius-md);
  }

  .sanctions-form-grid {
    grid-template-columns:
      1fr;
  }

  .sanctions-field--wide,
  .sanctions-field--full {
    grid-column:
      auto;
  }

  .sanctions-check-grid,
  .sanctions-score-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .sanctions-detail-person {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    align-items:
      start;
  }

  .sanctions-detail-person__badges {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;
  }

  .sanctions-detail-progress {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }

  .sanctions-detail-columns {
    grid-template-columns:
      1fr;
  }

  .sanctions-tab-head {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-tab-head > .sanctions-btn {
    width:
      100%;
  }

  .sanctions-record-card {
    grid-template-columns:
      34px
      minmax(0, 1fr);
  }

  .sanctions-record-card__actions {
    grid-column:
      2;

    justify-content:
      flex-start;
  }

  .sanctions-plan-card > header {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-plan-card__actions {
    justify-content:
      flex-start;
  }

  .sanctions-objective {
    grid-template-columns:
      1fr;

    align-items:
      stretch;
  }

  .sanctions-objective__actions {
    justify-content:
      flex-start;
  }

  .sanctions-followup__content > header,
  .sanctions-followup__content > footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-followup__content > footer > div {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE · 560
   ========================================================= */

@media (
  max-width:
  560px
) {
  .sanctions-page {
    padding:
      7px;
  }

  .sanctions-brand {
    gap:
      9px;
  }

  .sanctions-brand__icon {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }

  .sanctions-brand h2 {
    font-size:
      21px;
  }

  .sanctions-brand p {
    font-size:
      10px;
  }

  .sanctions-head__status,
  .sanctions-head__actions {
    grid-template-columns:
      1fr;
  }

  .sanctions-metrics,
  .sanctions-process {
    grid-template-columns:
      1fr;
  }

  .sanctions-metric,
  .sanctions-process-card {
    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-metric:last-child,
  .sanctions-process-card:last-child {
    border-bottom:
      0 !important;
  }

  .sanctions-filters-grid {
    grid-template-columns:
      1fr;
  }

  .sanctions-filters__footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-filters__footer > span {
    align-items:
      flex-start;
  }

  .sanctions-filters__footer .sanctions-btn {
    width:
      100%;
  }

  .sanctions-table tbody {
    grid-template-columns:
      1fr;

    padding:
      7px;
  }

  .sanctions-table tbody tr {
    grid-template-columns:
      1fr;
  }

  .sanctions-table tbody td {
    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-table tbody td:last-child {
    border-bottom:
      0 !important;
  }

  .sanctions-table tbody td:nth-child(11) {
    grid-column:
      auto;
  }

  .sanctions-person__avatar {
    width:
      29px;

    height:
      29px;

    flex-basis:
      29px;
  }

  .sanctions-row-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .sanctions-modal__head {
    padding:
      11px;
  }

  .sanctions-modal__brand {
    gap:
      8px;
  }

  .sanctions-modal__icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }

  .sanctions-modal__brand h3 {
    font-size:
      13px;
  }

  .sanctions-form-section {
    padding:
      11px;
  }

  .sanctions-check-grid,
  .sanctions-score-grid {
    grid-template-columns:
      1fr;
  }

  .sanctions-check em {
    white-space:
      normal;
  }

  .sanctions-modal__footer {
    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      9px 11px;
  }

  .sanctions-modal__footer > div:last-child {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }

  .sanctions-modal__footer .sanctions-btn {
    width:
      100%;
  }

  .sanctions-detail-content {
    padding:
      10px;
  }

  .sanctions-detail-person {
    padding:
      10px;
  }

  .sanctions-detail-tabs {
    grid-template-columns:
      1fr;
  }

  .sanctions-detail-tab {
    justify-content:
      flex-start;

    min-height:
      40px;

    padding:
      8px 10px;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-detail-tab:last-child {
    border-bottom:
      0 !important;
  }

  .sanctions-detail-tab.is-active::after {
    top:
      7px;

    right:
      auto;

    bottom:
      7px;

    left:
      -1px;

    width:
      2px;

    height:
      auto;
  }

  .sanctions-summary-grid {
    grid-template-columns:
      1fr;
  }

  .sanctions-summary-grid article {
    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-summary-grid article:last-child {
    border-bottom:
      0 !important;
  }

  .sanctions-detail-list {
    grid-template-columns:
      1fr;
  }

  .sanctions-detail-list > div {
    border-right:
      0 !important;

    border-bottom:
      1px solid
      var(--san-border) !important;
  }

  .sanctions-detail-list > div:last-child {
    border-bottom:
      0 !important;
  }

  .sanctions-detail-block dl > div {
    grid-template-columns:
      1fr;

    gap:
      3px;
  }

  .sanctions-record-card {
    grid-template-columns:
      1fr;
  }

  .sanctions-record-card__icon {
    width:
      31px;

    height:
      31px;
  }

  .sanctions-record-card__actions {
    grid-column:
      auto;

    justify-content:
      flex-start;
  }

  .sanctions-plan-meta {
    grid-template-columns:
      1fr;
  }

  .sanctions-plan-meta > span:first-child {
    border-right:
      0;

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

  .sanctions-followup {
    grid-template-columns:
      14px
      minmax(0, 1fr);

    gap:
      5px;
  }

  .sanctions-followup::before {
    left:
      6px;
  }

  .sanctions-followup__point {
    width:
      13px;

    height:
      13px;
  }

  .sanctions-history-item header {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      3px;
  }

  .sanctions-detail-footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .sanctions-detail-footer .sanctions-btn {
    width:
      100%;
  }

  .sanctions-toast {
    right:
      7px;

    bottom:
      7px;

    left:
      7px;

    max-width:
      none;
  }
}


/* =========================================================
   RESPONSIVE · 380
   ========================================================= */

@media (
  max-width:
  380px
) {
  .sanctions-page {
    padding:
      5px;
  }

  .sanctions-brand h2 {
    font-size:
      19px;
  }

  .sanctions-head-status {
    padding:
      6px 8px;
  }

  .sanctions-metric {
    min-height:
      72px;

    padding:
      10px;
  }

  .sanctions-process-card {
    min-height:
      54px;

    padding:
      8px;
  }

  .sanctions-filters__head,
  .sanctions-search-row,
  .sanctions-filters-grid,
  .sanctions-filters__footer {
    padding-right:
      9px;

    padding-left:
      9px;
  }

  .sanctions-modal-backdrop {
    padding:
      4px;
  }

  .sanctions-modal {
    max-height:
      calc(
        100vh -
        8px
      );
  }

  .sanctions-detail-content,
  .sanctions-form-section {
    padding:
      9px;
  }
}


/* =========================================================
   SEGURIDAD · OVERFLOW
   ========================================================= */

.sanctions-page,
.sanctions-head,
.sanctions-brand,
.sanctions-head__status,
.sanctions-head__actions,
.sanctions-metrics,
.sanctions-process,
.sanctions-panel,
.sanctions-filters,
.sanctions-filters__head,
.sanctions-search-row,
.sanctions-filters__body,
.sanctions-filters-grid,
.sanctions-table-wrap,
.sanctions-pagination,
.sanctions-modal,
.sanctions-modal__head,
.sanctions-modal__brand,
.sanctions-form,
.sanctions-form-section,
.sanctions-form-grid,
.sanctions-detail,
.sanctions-detail-person,
.sanctions-detail-person__copy,
.sanctions-detail-person__badges,
.sanctions-detail-progress,
.sanctions-detail-tabs,
.sanctions-detail-content,
.sanctions-summary-grid,
.sanctions-detail-columns,
.sanctions-detail-block,
.sanctions-card-list,
.sanctions-record-card,
.sanctions-record-card__copy,
.sanctions-plan-list,
.sanctions-plan-card,
.sanctions-objectives,
.sanctions-objective,
.sanctions-timeline,
.sanctions-followup,
.sanctions-followup__content,
.sanctions-history,
.sanctions-history-item {
  min-width:
    0;

  max-width:
    100%;
}

.sanctions-page {
  overflow-x:
    hidden;
}

html:has(.sanctions-page),
body:has(.sanctions-page),
.app-shell:has(.sanctions-page),
.app-main:has(.sanctions-page),
.app-content:has(.sanctions-page) {
  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}

.sanctions-page h1,
.sanctions-page h2,
.sanctions-page h3,
.sanctions-page h4,
.sanctions-page p,
.sanctions-page span,
.sanctions-page strong,
.sanctions-page small,
.sanctions-page em,
.sanctions-page dt,
.sanctions-page dd,
.sanctions-modal h1,
.sanctions-modal h2,
.sanctions-modal h3,
.sanctions-modal p,
.sanctions-modal span,
.sanctions-modal strong,
.sanctions-modal small,
.sanctions-modal em {
  max-width:
    100%;
}


/* =========================================================
   LEGIBILIDAD
   ========================================================= */

.sanctions-page h2,
.sanctions-page h3,
.sanctions-page strong,
.sanctions-modal h3,
.sanctions-modal strong {
  color:
    var(--san-text-strong);
}

.sanctions-page p,
.sanctions-modal p {
  color:
    var(--san-text-secondary);
}


/* =========================================================
   SIN GLOW / SIN SOMBRAS
   ========================================================= */

.sanctions-page *,
.sanctions-page *::before,
.sanctions-page *::after,
.sanctions-modal *,
.sanctions-modal *::before,
.sanctions-modal *::after {
  text-shadow:
    none !important;

  filter:
    none;
}

.sanctions-page *:not(.sanctions-metric.is-active),
.sanctions-modal *,
.sanctions-modal *::before,
.sanctions-modal *::after {
  box-shadow:
    none !important;
}


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

.sanctions-page button:focus-visible,
.sanctions-modal button:focus-visible {
  outline:
    2px solid
    var(--san-text-strong);

  outline-offset:
    2px;
}


/* =========================================================
   MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .sanctions-page *,
  .sanctions-page *::before,
  .sanctions-page *::after,
  .sanctions-modal *,
  .sanctions-modal *::before,
  .sanctions-modal *::after,
  .sanctions-toast {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

/* =========================================================
   SANCIONES · MODALES
   OVERRIDE FINAL LIMPIO

   IMPORTANTE:
   REEMPLAZA TODOS LOS FIX ANTERIORES DEL FINAL DEL ARCHIVO
   ========================================================= */


/* =========================================================
   MODAL
   ========================================================= */

.sanctions-modal {
  --san-modal-bg:
    #ffffff;

  --san-modal-bg-soft:
    #fafafa;

  --san-modal-line:
    #e1e1e1;

  --san-modal-line-soft:
    #ededed;

  --san-modal-control:
    #d3d3d3;

  --san-modal-control-hover:
    #b7b7b7;

  --san-modal-text:
    #111111;

  --san-modal-muted:
    #747474;

  width:
    min(
      100%,
      1040px
    ) !important;

  max-width:
    100% !important;

  max-height:
    calc(
      100vh -
      44px
    ) !important;

  margin:
    auto !important;

  border:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    10px !important;

  background:
    var(--san-modal-bg) !important;

  color:
    var(--san-modal-text) !important;

  overflow:
    hidden !important;

  box-shadow:
    none !important;
}


/* =========================================================
   TAMAÑOS
   ========================================================= */

.sanctions-modal--medium {
  width:
    min(
      100%,
      760px
    ) !important;
}

.sanctions-modal--form {
  width:
    min(
      100%,
      980px
    ) !important;
}

.sanctions-modal--detail {
  width:
    min(
      100%,
      1120px
    ) !important;
}


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

.sanctions-modal .sanctions-modal__head {
  flex:
    0 0 auto !important;

  margin:
    0 !important;

  padding:
    15px 18px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    var(--san-modal-line) !important;

  background:
    var(--san-modal-bg) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   CABECERA
   ========================================================= */

.sanctions-modal .sanctions-modal__brand {
  gap:
    10px !important;

  min-width:
    0 !important;
}

.sanctions-modal .sanctions-modal__icon {
  width:
    32px !important;

  height:
    32px !important;

  flex:
    0 0 32px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    var(--san-modal-text) !important;

  box-shadow:
    none !important;
}

.sanctions-modal
.sanctions-modal__brand > div > span {
  margin-bottom:
    3px !important;

  color:
    var(--san-modal-muted) !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.065em !important;
}

.sanctions-modal
.sanctions-modal__brand h3 {
  color:
    var(--san-modal-text) !important;

  font-size:
    15px !important;

  font-weight:
    800 !important;
}

.sanctions-modal
.sanctions-modal__brand p {
  margin-top:
    5px !important;

  color:
    var(--san-modal-muted) !important;

  font-size:
    10px !important;
}


/* =========================================================
   CERRAR
   ========================================================= */

.sanctions-modal
.sanctions-modal__close {
  width:
    30px !important;

  height:
    30px !important;

  flex:
    0 0 30px !important;

  border:
    0 !important;

  border-radius:
    6px !important;

  background:
    transparent !important;

  color:
    var(--san-modal-muted) !important;

  box-shadow:
    none !important;
}

.sanctions-modal
.sanctions-modal__close:hover {
  border:
    0 !important;

  background:
    var(--san-modal-bg-soft) !important;

  color:
    var(--san-modal-text) !important;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.sanctions-modal .sanctions-form {
  display:
    block !important;

  min-width:
    0 !important;

  padding:
    0 !important;

  background:
    var(--san-modal-bg) !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  box-shadow:
    none !important;
}


/* =========================================================
   SECCIONES
   NO SON CARDS
   ========================================================= */

.sanctions-modal
.sanctions-form-section {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px 18px 19px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    var(--san-modal-bg) !important;

  overflow:
    visible !important;

  box-shadow:
    none !important;
}


/* =========================================================
   DIVISIÓN ENTRE SECCIONES
   LÍNEA INSET
   ========================================================= */

.sanctions-modal
.sanctions-form-section +
.sanctions-form-section::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    18px;

  left:
    18px;

  height:
    1px;

  background:
    var(--san-modal-line-soft);

  pointer-events:
    none;
}


/* =========================================================
   ÚLTIMA SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section:last-of-type {
  border:
    0 !important;
}


/* =========================================================
   CABECERA DE CADA SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  min-width:
    0 !important;

  margin:
    0 0 14px !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* =========================================================
   ICONO DE SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title > span {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    30px !important;

  height:
    30px !important;

  flex:
    0 0 30px !important;

  border:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  color:
    var(--san-modal-text) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   TÍTULO SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title > div {
  min-width:
    0 !important;
}

.sanctions-modal
.sanctions-form-section__title small {
  color:
    var(--san-modal-muted) !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    0.055em !important;
}

.sanctions-modal
.sanctions-form-section__title strong {
  margin-top:
    2px !important;

  color:
    var(--san-modal-text) !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  line-height:
    1.25 !important;
}


/* =========================================================
   GRID
   ========================================================= */

.sanctions-modal
.sanctions-form-grid {
  width:
    100% !important;

  min-width:
    0 !important;

  gap:
    10px !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.sanctions-modal
.sanctions-field,
.sanctions-modal
.sanctions-score-field {
  min-width:
    0 !important;

  gap:
    5px !important;
}

.sanctions-modal
.sanctions-field > span,
.sanctions-modal
.sanctions-score-field > span {
  color:
    var(--san-modal-text) !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.sanctions-modal
.sanctions-field input,
.sanctions-modal
.sanctions-field select,
.sanctions-modal
.sanctions-field textarea,
.sanctions-modal
.sanctions-score-field select {
  width:
    100% !important;

  min-width:
    0 !important;

  border:
    1px solid
    var(--san-modal-control) !important;

  border-radius:
    6px !important;

  background:
    var(--san-modal-bg) !important;

  color:
    var(--san-modal-text) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   INPUT HOVER
   ========================================================= */

.sanctions-modal
.sanctions-field input:hover:not(:disabled),
.sanctions-modal
.sanctions-field select:hover:not(:disabled),
.sanctions-modal
.sanctions-field textarea:hover:not(:disabled),
.sanctions-modal
.sanctions-score-field select:hover:not(:disabled) {
  border-color:
    var(--san-modal-control-hover) !important;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

.sanctions-modal
.sanctions-field input:focus,
.sanctions-modal
.sanctions-field select:focus,
.sanctions-modal
.sanctions-field textarea:focus,
.sanctions-modal
.sanctions-score-field select:focus {
  border-color:
    #777777 !important;

  outline:
    none !important;

  box-shadow:
    none !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.sanctions-modal
.sanctions-field textarea {
  padding:
    10px 11px !important;

  resize:
    vertical !important;
}


/* =========================================================
   NIVEL
   ========================================================= */

.sanctions-modal
.sanctions-level-preview {
  margin:
    12px 0 0 !important;

  padding:
    11px !important;

  border:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    7px !important;

  background:
    var(--san-modal-bg-soft) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   CHECK GRID
   ========================================================= */

.sanctions-modal
.sanctions-check-grid {
  margin:
    12px 0 0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


/* =========================================================
   CHECK
   ========================================================= */

.sanctions-modal
.sanctions-check {
  border:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    6px !important;

  background:
    var(--san-modal-bg-soft) !important;

  box-shadow:
    none !important;
}

.sanctions-modal
.sanctions-check:hover {
  border-color:
    var(--san-modal-control) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    10px 18px !important;

  flex:
    0 0 auto !important;

  border:
    0 !important;

  border-top:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    0 !important;

  background:
    var(--san-modal-bg-soft) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   FOOTER ACTIONS
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer > div:last-child {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  flex-wrap:
    wrap !important;

  gap:
    7px !important;

  margin-left:
    auto !important;
}


/* =========================================================
   CANCELAR
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer
.sanctions-btn:not(.sanctions-btn--dark) {
  min-height:
    34px !important;

  border:
    1px solid
    transparent !important;

  background:
    transparent !important;

  color:
    var(--san-modal-text) !important;
}

.sanctions-modal
.sanctions-modal__footer
.sanctions-btn:not(.sanctions-btn--dark):hover {
  border-color:
    var(--san-modal-line) !important;

  background:
    var(--san-modal-bg) !important;
}


/* =========================================================
   PRINCIPAL
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark {
  min-height:
    34px !important;

  border:
    1px solid
    #111111 !important;

  background:
    #111111 !important;

  color:
    #ffffff !important;
}

.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark span,
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark .icon {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DETALLE
   ========================================================= */

.sanctions-modal
.sanctions-detail {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    0 !important;

  padding:
    0 !important;

  background:
    var(--san-modal-bg) !important;
}


/* =========================================================
   DETALLE PERSONA
   ========================================================= */

.sanctions-modal
.sanctions-detail-person {
  margin:
    0 !important;

  padding:
    14px 18px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    var(--san-modal-line-soft) !important;

  border-radius:
    0 !important;

  background:
    var(--san-modal-bg) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   DETALLE PROGRESO
   ========================================================= */

.sanctions-modal
.sanctions-detail-progress {
  margin:
    0 !important;

  padding:
    11px 18px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    var(--san-modal-line-soft) !important;

  border-radius:
    0 !important;

  background:
    var(--san-modal-bg-soft) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   DETALLE TABS
   ========================================================= */

.sanctions-modal
.sanctions-detail-tabs {
  margin:
    0 !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    0 !important;

  background:
    var(--san-modal-bg-soft) !important;

  overflow:
    hidden !important;
}

.sanctions-modal
.sanctions-detail-tab {
  border:
    0 !important;

  border-right:
    1px solid
    var(--san-modal-line-soft) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;
}

.sanctions-modal
.sanctions-detail-tab:last-child {
  border-right:
    0 !important;
}

.sanctions-modal
.sanctions-detail-tab.is-active {
  background:
    var(--san-modal-bg) !important;
}


/* =========================================================
   DETAIL CONTENT
   ========================================================= */

.sanctions-modal
.sanctions-detail-content {
  gap:
    10px !important;

  padding:
    14px 18px !important;

  background:
    var(--san-modal-bg) !important;
}


/* =========================================================
   DETAIL CARDS
   ========================================================= */

.sanctions-modal
.sanctions-detail-block,
.sanctions-modal
.sanctions-record-card,
.sanctions-modal
.sanctions-plan-card,
.sanctions-modal
.sanctions-followup__content,
.sanctions-modal
.sanctions-summary-grid {
  border:
    1px solid
    var(--san-modal-line) !important;

  border-radius:
    7px !important;

  background:
    var(--san-modal-bg) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.sanctions-modal,
body[data-theme="dark"]
.sanctions-modal,
.dark
.sanctions-modal,
[data-theme="dark"]
.sanctions-modal {
  --san-modal-bg:
    #080808;

  --san-modal-bg-soft:
    #0b0b0b;

  --san-modal-line:
    #282828;

  --san-modal-line-soft:
    #1c1c1c;

  --san-modal-control:
    #303030;

  --san-modal-control-hover:
    #454545;

  --san-modal-text:
    #f2f2f2;

  --san-modal-muted:
    #909090;

  border-color:
    #282828 !important;

  background:
    #080808 !important;
}


/* =========================================================
   DARK · INPUT
   ========================================================= */

html[data-theme="dark"]
.sanctions-modal
.sanctions-field input,
html[data-theme="dark"]
.sanctions-modal
.sanctions-field select,
html[data-theme="dark"]
.sanctions-modal
.sanctions-field textarea,
html[data-theme="dark"]
.sanctions-modal
.sanctions-score-field select,
body[data-theme="dark"]
.sanctions-modal
.sanctions-field input,
body[data-theme="dark"]
.sanctions-modal
.sanctions-field select,
body[data-theme="dark"]
.sanctions-modal
.sanctions-field textarea,
body[data-theme="dark"]
.sanctions-modal
.sanctions-score-field select,
.dark
.sanctions-modal
.sanctions-field input,
.dark
.sanctions-modal
.sanctions-field select,
.dark
.sanctions-modal
.sanctions-field textarea,
.dark
.sanctions-modal
.sanctions-score-field select,
[data-theme="dark"]
.sanctions-modal
.sanctions-field input,
[data-theme="dark"]
.sanctions-modal
.sanctions-field select,
[data-theme="dark"]
.sanctions-modal
.sanctions-field textarea,
[data-theme="dark"]
.sanctions-modal
.sanctions-score-field select {
  background:
    #0a0a0a !important;

  border-color:
    #303030 !important;

  color:
    #f2f2f2 !important;
}


/* =========================================================
   DARK · PRIMARY
   ========================================================= */

html[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark,
body[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark,
.dark
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark,
[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark {
  border-color:
    #ffffff !important;

  background:
    #ffffff !important;

  color:
    #000000 !important;
}

html[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark span,
html[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark .icon,
body[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark span,
body[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark .icon,
.dark
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark span,
.dark
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark .icon,
[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark span,
[data-theme="dark"]
.sanctions-modal
.sanctions-modal__footer
.sanctions-btn--dark .icon {
  color:
    #000000 !important;

  stroke:
    #000000 !important;
}


/* =========================================================
   SIN GLOW
   ========================================================= */

.sanctions-modal,
.sanctions-modal *,
.sanctions-modal *::before,
.sanctions-modal *::after {
  box-shadow:
    none !important;

  text-shadow:
    none !important;

  filter:
    none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .sanctions-modal
  .sanctions-form-section {
    padding:
      15px 12px 16px !important;
  }

  .sanctions-modal
  .sanctions-form-section +
  .sanctions-form-section::before {
    right:
      12px;

    left:
      12px;
  }

  .sanctions-modal
  .sanctions-modal__head {
    padding:
      12px !important;
  }

  .sanctions-modal
  .sanctions-modal__footer {
    padding:
      9px 12px !important;
  }

  .sanctions-modal
  .sanctions-detail-content {
    padding:
      12px !important;
  }
}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width:
  560px
) {
  .sanctions-modal
  .sanctions-form-section {
    padding:
      13px 10px 14px !important;
  }

  .sanctions-modal
  .sanctions-form-section +
  .sanctions-form-section::before {
    right:
      10px;

    left:
      10px;
  }
}/* =========================================================
   SANCIONES · FIX SECCIONES MODAL
   SIN LÍNEAS LARGAS / SIN CAJAS
   PEGAR AL FINAL DE sanciones.css
   ========================================================= */


/* =========================================================
   SECCIONES
   ========================================================= */

.sanctions-modal
.sanctions-form-section {
  position:
    relative !important;

  margin:
    0 !important;

  padding:
    18px 18px 20px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #080808 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   QUITAR DIVISIONES LARGAS ANTERIORES
   ========================================================= */

.sanctions-modal
.sanctions-form-section::before,
.sanctions-modal
.sanctions-form-section::after,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section::before,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section::after {
  display:
    none !important;

  content:
    none !important;
}


/* =========================================================
   SEPARACIÓN ENTRE BLOQUES
   ========================================================= */

.sanctions-modal
.sanctions-form-section +
.sanctions-form-section {
  margin-top:
    4px !important;

  padding-top:
    20px !important;
}


/* =========================================================
   CABECERA DE SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title {
  position:
    relative !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  margin:
    0 0 14px !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* =========================================================
   PEQUEÑA MARCA DE DIVISIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section +
.sanctions-form-section
.sanctions-form-section__title::before {
  content:
    "";

  position:
    absolute;

  top:
    -11px;

  left:
    0;

  width:
    32px;

  height:
    1px;

  background:
    #343434;

  border-radius:
    999px;

  pointer-events:
    none;
}


/* =========================================================
   ICONO
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title > span {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    30px !important;

  height:
    30px !important;

  flex:
    0 0 30px !important;

  border:
    1px solid
    #282828 !important;

  border-radius:
    7px !important;

  background:
    #0a0a0a !important;

  color:
    #d8d8d8 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   CABECERA · TEXTO
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title small {
  color:
    #808080 !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    0.055em !important;
}

.sanctions-modal
.sanctions-form-section__title strong {
  margin-top:
    2px !important;

  color:
    #f3f3f3 !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  line-height:
    1.25 !important;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.sanctions-modal
.sanctions-form {
  padding:
    0 !important;

  background:
    #080808 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   GRID
   ========================================================= */

.sanctions-modal
.sanctions-form-grid {
  gap:
    10px !important;

  width:
    100% !important;

  min-width:
    0 !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.sanctions-modal
.sanctions-field > span,
.sanctions-modal
.sanctions-score-field > span {
  margin-bottom:
    1px !important;

  color:
    #c7c7c7 !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.sanctions-modal
.sanctions-field input,
.sanctions-modal
.sanctions-field select,
.sanctions-modal
.sanctions-field textarea,
.sanctions-modal
.sanctions-score-field select {
  border:
    1px solid
    #2b2b2b !important;

  border-radius:
    6px !important;

  background:
    #090909 !important;

  color:
    #eeeeee !important;

  box-shadow:
    none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.sanctions-modal
.sanctions-field input:hover:not(:disabled),
.sanctions-modal
.sanctions-field select:hover:not(:disabled),
.sanctions-modal
.sanctions-field textarea:hover:not(:disabled),
.sanctions-modal
.sanctions-score-field select:hover:not(:disabled) {
  border-color:
    #3b3b3b !important;
}


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

.sanctions-modal
.sanctions-field input:focus,
.sanctions-modal
.sanctions-field select:focus,
.sanctions-modal
.sanctions-field textarea:focus,
.sanctions-modal
.sanctions-score-field select:focus {
  border-color:
    #555555 !important;

  outline:
    none !important;

  box-shadow:
    none !important;
}


/* =========================================================
   PREVIEW NIVEL
   ========================================================= */

.sanctions-modal
.sanctions-level-preview {
  margin-top:
    12px !important;

  border:
    1px solid
    #222222 !important;

  border-radius:
    7px !important;

  background:
    #0a0a0a !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer {
  margin:
    0 !important;

  padding:
    10px 18px !important;

  border:
    0 !important;

  border-top:
    1px solid
    #252525 !important;

  background:
    #090909 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   MODAL EXTERIOR
   ========================================================= */

.sanctions-modal {
  border:
    1px solid
    #292929 !important;

  border-radius:
    10px !important;

  background:
    #080808 !important;

  box-shadow:
    none !important;
}


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

.sanctions-modal
.sanctions-modal__head {
  border:
    0 !important;

  border-bottom:
    1px solid
    #252525 !important;

  background:
    #080808 !important;
}


/* =========================================================
   SIN GLOW
   ========================================================= */

.sanctions-modal,
.sanctions-modal *,
.sanctions-modal *::before,
.sanctions-modal *::after {
  box-shadow:
    none !important;

  text-shadow:
    none !important;

  filter:
    none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .sanctions-modal
  .sanctions-form-section {
    padding:
      15px 12px 17px !important;
  }

  .sanctions-modal
  .sanctions-form-section +
  .sanctions-form-section {
    padding-top:
      18px !important;
  }

  .sanctions-modal
  .sanctions-form-section +
  .sanctions-form-section
  .sanctions-form-section__title::before {
    top:
      -10px;

    width:
      26px;
  }
}/* =========================================================
   SANCIONES · MODAL
   QUITAR TODAS LAS DIVISIONES HORIZONTALES
   USAR SOLO ESPACIADO ENTRE SECCIONES
   ========================================================= */


/* =========================================================
   ELIMINAR PSEUDOELEMENTOS DE DIVISIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section::before,
.sanctions-modal
.sanctions-form-section::after,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section::before,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section::after,
.sanctions-modal
.sanctions-form-section__title::before,
.sanctions-modal
.sanctions-form-section__title::after,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section
.sanctions-form-section__title::before,
.sanctions-modal
.sanctions-form-section +
.sanctions-form-section
.sanctions-form-section__title::after {
  content:
    none !important;

  display:
    none !important;

  width:
    0 !important;

  height:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;
}


/* =========================================================
   SECCIONES
   SIN BORDES
   ========================================================= */

.sanctions-modal
.sanctions-form-section {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px 18px 20px !important;

  border:
    0 !important;

  border-top:
    0 !important;

  border-right:
    0 !important;

  border-bottom:
    0 !important;

  border-left:
    0 !important;

  border-radius:
    0 !important;

  background:
    #080808 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   SEPARACIÓN ENTRE SECCIONES
   SOLO ESPACIO
   ========================================================= */

.sanctions-modal
.sanctions-form-section +
.sanctions-form-section {
  margin-top:
    10px !important;

  padding-top:
    18px !important;

  border:
    0 !important;
}


/* =========================================================
   TÍTULO
   SIN DIVISIONES
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title {
  position:
    relative !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  margin:
    0 0 14px !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-top:
    0 !important;

  border-right:
    0 !important;

  border-bottom:
    0 !important;

  border-left:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


/* =========================================================
   ICONO DE SECCIÓN
   ========================================================= */

.sanctions-modal
.sanctions-form-section__title > span {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    30px !important;

  height:
    30px !important;

  flex:
    0 0 30px !important;

  border:
    1px solid
    #292929 !important;

  border-radius:
    7px !important;

  background:
    #0a0a0a !important;

  color:
    #d8d8d8 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.sanctions-modal
.sanctions-form {
  display:
    block !important;

  padding:
    0 !important;

  background:
    #080808 !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   HEADER DEL MODAL
   ========================================================= */

.sanctions-modal
.sanctions-modal__head {
  border:
    0 !important;

  border-bottom:
    1px solid
    #242424 !important;

  background:
    #080808 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sanctions-modal
.sanctions-modal__footer {
  border:
    0 !important;

  border-top:
    1px solid
    #242424 !important;

  background:
    #090909 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .sanctions-modal
  .sanctions-form-section {
    padding:
      15px 12px 17px !important;
  }

  .sanctions-modal
  .sanctions-form-section +
  .sanctions-form-section {
    margin-top:
      7px !important;

    padding-top:
      15px !important;
  }
}