/* =========================================================
   WIRTZ HUB · IA
   CONFIGURACIÓN CENTRAL

   UBICACIÓN:
   frontend/src/pages/ia/configuracion/
   ia-configuracion.css

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


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

.ia-page {
  --ia-bg:
    #f7f7f7;

  --ia-surface:
    #ffffff;

  --ia-surface-soft:
    #fafafa;

  --ia-surface-muted:
    #f3f3f3;

  --ia-surface-hover:
    #f5f5f5;

  --ia-border:
    #d9d9d9;

  --ia-border-strong:
    #c4c4c4;

  --ia-border-soft:
    #e8e8e8;

  --ia-text:
    #111111;

  --ia-text-strong:
    #000000;

  --ia-text-secondary:
    #444444;

  --ia-text-muted:
    #6b6b6b;

  --ia-text-faint:
    #8a8a8a;

  --ia-primary:
    #111111;

  --ia-primary-hover:
    #252525;

  --ia-primary-text:
    #ffffff;

  --ia-success:
    #18794e;

  --ia-success-bg:
    #edf8f2;

  --ia-success-border:
    #bee4ce;

  --ia-danger:
    #b42318;

  --ia-danger-bg:
    #fff1f0;

  --ia-danger-border:
    #f3c7c3;

  --ia-warning:
    #9a6700;

  --ia-warning-bg:
    #fff8e6;

  --ia-warning-border:
    #ead7a0;

  --ia-working:
    #4b5563;

  --ia-working-bg:
    #f3f4f6;

  --ia-working-border:
    #d6d9df;

  --ia-radius-xs:
    5px;

  --ia-radius-sm:
    7px;

  --ia-radius-md:
    9px;

  --ia-radius-lg:
    12px;

  --ia-control-height:
    38px;

  --ia-transition:
    140ms ease;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  box-sizing:
    border-box;

  margin:
    0;

  padding:
    20px;

  color:
    var(--ia-text);

  background:
    var(--ia-bg);

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

  overflow-x:
    hidden;
}


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

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

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

.ia-page button {
  color:
    inherit;
}

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

.ia-page h1,
.ia-page h2,
.ia-page h3,
.ia-page h4,
.ia-page p {
  margin:
    0;
}

.ia-page button,
.ia-page input,
.ia-page select,
.ia-page textarea {
  outline:
    none;
}

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


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

.app-content:has(.ia-page) {
  min-width:
    0;

  max-width:
    100%;

  overflow-x:
    hidden;
}


/* =========================================================
   SCROLLBAR LOCAL
   ========================================================= */

.ia-page * {
  scrollbar-width:
    thin;

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

.ia-page *::-webkit-scrollbar {
  width:
    6px;

  height:
    6px;
}

.ia-page *::-webkit-scrollbar-track {
  background:
    transparent;
}

.ia-page *::-webkit-scrollbar-thumb {
  background:
    var(--ia-border-strong);

  border-radius:
    999px;
}


/* =========================================================
   ICONOS
   ========================================================= */

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

  height:
    16px;

  flex:
    0 0 auto;

  stroke-width:
    1.8;
}

.ia-page .is-spinning {
  animation:
    ia-spin
    0.8s
    linear
    infinite;
}

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


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

.ia-page-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    16px;

  padding:
    0 0 18px;

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

.ia-page-head__identity {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;

  min-width:
    0;
}

.ia-page-head__identity > div {
  min-width:
    0;
}

.ia-page-head__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

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

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

  background:
    var(--ia-surface);

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

.ia-page-head__icon .icon {
  width:
    19px;

  height:
    19px;
}

.ia-page-head__eyebrow {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.25;

  letter-spacing:
    0.08em;
}

.ia-page-head h1 {
  color:
    var(--ia-text-strong);

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

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}

.ia-page-head p {
  max-width:
    720px;

  margin-top:
    7px;

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

  font-size:
    13px;

  font-weight:
    500;

  line-height:
    1.55;
}

.ia-page-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex:
    0 0 auto;
}


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

.ia-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

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

  padding:
    0 13px;

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

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

  background:
    var(--ia-surface);

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

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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

.ia-btn:hover:not(:disabled) {
  background:
    var(--ia-surface-hover);

  border-color:
    var(--ia-text-muted);
}

.ia-btn:focus-visible {
  border-color:
    var(--ia-text-strong);
}

.ia-btn:disabled {
  opacity:
    0.5;

  cursor:
    not-allowed;
}

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

  background:
    var(--ia-primary);

  color:
    var(--ia-primary-text);
}

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

  background:
    var(--ia-primary-hover);

  color:
    var(--ia-primary-text);
}


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

.ia-metrics {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    16px;

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

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

  background:
    var(--ia-surface);

  overflow:
    hidden;
}

.ia-metric {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  min-height:
    86px;

  padding:
    14px;

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

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

.ia-metric__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

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

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

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

.ia-metric__icon .icon {
  width:
    16px;

  height:
    16px;
}

.ia-metric__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-metric__content small {
  color:
    var(--ia-text-muted);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.25;
}

.ia-metric__content strong {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-metric__content > span {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.ia-workspace {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--ia-surface);

  overflow:
    hidden;
}

.ia-active-tab {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   TABS
   ========================================================= */

.ia-tabs {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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

.ia-tab {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  min-height:
    62px;

  padding:
    11px 15px;

  border:
    0;

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

  border-radius:
    0;

  background:
    transparent;

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

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
    var(--ia-transition),
    color
    var(--ia-transition);
}

.ia-tab:last-child {
  border-right:
    0;
}

.ia-tab:hover {
  background:
    var(--ia-surface-hover);

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

.ia-tab.is-active {
  background:
    var(--ia-surface);

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

.ia-tab.is-active::after {
  content:
    "";

  position:
    absolute;

  right:
    13px;

  bottom:
    -1px;

  left:
    13px;

  height:
    2px;

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

.ia-tab__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

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

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

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

.ia-tab__icon .icon {
  width:
    14px;

  height:
    14px;
}

.ia-tab__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-tab__content strong {
  overflow:
    hidden;

  color:
    inherit;

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-tab__content small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CONTENIDO TAB
   ========================================================= */

.ia-tab-panel {
  width:
    100%;

  min-width:
    0;

  padding:
    18px;
}

.ia-section-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  min-width:
    0;

  margin-bottom:
    16px;

  padding-bottom:
    15px;

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

.ia-section-head > div:first-child {
  min-width:
    0;
}

.ia-section-head > div:first-child > span,
.ia-panel-head > div > span {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.08em;
}

.ia-section-head h2 {
  color:
    var(--ia-text-strong);

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}

.ia-section-head p {
  max-width:
    720px;

  margin-top:
    5px;

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

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.5;
}

.ia-section-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-width:
    0;
}


/* =========================================================
   BADGE CONTADOR
   ========================================================= */

.ia-count-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    31px;

  height:
    26px;

  padding:
    0 9px;

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

  border-radius:
    999px;

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

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

  font-size:
    11px;

  font-weight:
    750;
}


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

.ia-panel-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  min-width:
    0;

  padding-bottom:
    13px;

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

.ia-panel-head > div {
  min-width:
    0;
}

.ia-panel-head h3 {
  overflow-wrap:
    anywhere;

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

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    -0.015em;
}

.ia-panel-head p {
  margin-top:
    4px;

  overflow-wrap:
    anywhere;

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

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.4;
}


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

.ia-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  width:
    fit-content;

  max-width:
    100%;

  min-height:
    23px;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;
}

.ia-status .icon {
  width:
    11px;

  height:
    11px;
}

.ia-status.is-success {
  border-color:
    var(--ia-success-border);

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

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

.ia-status.is-danger {
  border-color:
    var(--ia-danger-border);

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

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

.ia-status.is-warning {
  border-color:
    var(--ia-warning-border);

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

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

.ia-status.is-working {
  border-color:
    var(--ia-working-border);

  background:
    var(--ia-working-bg);

  color:
    var(--ia-working);
}

.ia-status.is-muted {
  border-color:
    var(--ia-border);

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

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


/* =========================================================
   MINI BADGE
   ========================================================= */

.ia-mini-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    21px;

  padding:
    0 7px;

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

  border-radius:
    999px;

  background:
    var(--ia-surface);

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


/* =========================================================
   CAPACIDADES
   ========================================================= */

.ia-capability {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    24px;

  max-width:
    100%;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

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

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;
}

.ia-capability .icon {
  width:
    11px;

  height:
    11px;
}

.ia-capability.is-muted {
  color:
    var(--ia-text-muted);
}


/* =========================================================
   EMPTY / LOADING / ERROR
   ========================================================= */

.ia-empty-state {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    6px;

  width:
    100%;

  min-height:
    190px;

  padding:
    24px;

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

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

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

  color:
    var(--ia-text);

  text-align:
    center;
}

.ia-empty-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    3px;

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

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

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

.ia-empty-state__icon .icon {
  width:
    17px;

  height:
    17px;
}

.ia-empty-state strong {
  color:
    var(--ia-text-strong);

  font-size:
    13px;

  font-weight:
    800;
}

.ia-empty-state p {
  max-width:
    430px;

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

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.5;
}

.ia-empty-state.is-error {
  border-color:
    var(--ia-danger-border);

  background:
    var(--ia-danger-bg);
}

.ia-empty-state.is-error
.ia-empty-state__icon {
  border-color:
    var(--ia-danger-border);

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


/* =========================================================
   ACCESO DENEGADO
   ========================================================= */

.ia-access-denied {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  width:
    min(
      100%,
      580px
    );

  min-height:
    320px;

  margin:
    50px auto;

  padding:
    32px;

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

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

  background:
    var(--ia-surface);

  text-align:
    center;
}

.ia-access-denied__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  margin-bottom:
    14px;

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

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

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

.ia-access-denied__icon .icon {
  width:
    20px;

  height:
    20px;
}

.ia-access-denied__eyebrow {
  color:
    var(--ia-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}

.ia-access-denied h1 {
  margin-top:
    7px;

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

  font-size:
    22px;

  font-weight:
    800;

  letter-spacing:
    -0.025em;
}

.ia-access-denied p {
  max-width:
    430px;

  margin-top:
    9px;

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

  font-size:
    12px;

  line-height:
    1.55;
}


/* =========================================================
   PROVEEDORES · LAYOUT
   ========================================================= */

.ia-providers-layout {
  display:
    grid;

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

  gap:
    14px;

  width:
    100%;

  min-width:
    0;
}

.ia-provider-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}

.ia-provider-detail {
  min-width:
    0;
}


/* =========================================================
   PROVEEDOR · CARD
   ========================================================= */

.ia-provider-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    13px;

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

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

  background:
    var(--ia-surface);

  color:
    var(--ia-text);

  text-align:
    left;

  cursor:
    pointer;

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

.ia-provider-card:hover {
  border-color:
    var(--ia-border-strong);

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

.ia-provider-card.is-selected {
  border-color:
    var(--ia-text-strong);

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

.ia-provider-card__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}

.ia-provider-card__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}

.ia-provider-card__identity > span:last-child {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-provider-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

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

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

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

.ia-provider-card__icon .icon {
  width:
    14px;

  height:
    14px;
}

.ia-provider-card__identity strong {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-provider-card__identity small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-provider-card__description {
  display:
    -webkit-box;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.ia-provider-card__stats {
  display:
    grid;

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

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

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

  overflow:
    hidden;
}

.ia-provider-card__stats > span {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    8px 9px;

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

.ia-provider-card__stats > span +
span {
  border-left:
    1px solid
    var(--ia-border);
}

.ia-provider-card__stats small {
  color:
    var(--ia-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}

.ia-provider-card__stats strong {
  margin-top:
    2px;

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

  font-size:
    13px;

  font-weight:
    800;
}

.ia-provider-card__capabilities {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


/* =========================================================
   PROVEEDOR · OVERVIEW
   ========================================================= */

.ia-provider-overview {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    13px;

  padding:
    14px;

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

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

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

.ia-provider-overview__capabilities {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    12px;
}

.ia-provider-overview__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  margin-top:
    12px;

  padding-top:
    12px;

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


/* =========================================================
   CONFIGURACIÓN PROVEEDOR
   ========================================================= */

.ia-provider-config-layout {
  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    13px;

  width:
    100%;

  min-width:
    0;
}

.ia-credentials-panel,
.ia-credential-editor {
  min-width:
    0;

  padding:
    14px;

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

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

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


/* =========================================================
   CREDENCIALES · LISTA
   ========================================================= */

.ia-credential-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  min-width:
    0;

  margin-top:
    12px;
}

.ia-credential-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    9px;

  width:
    100%;

  min-width:
    0;

  padding:
    10px;

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

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

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

  color:
    var(--ia-text);

  text-align:
    left;

  cursor:
    pointer;

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

.ia-credential-row:hover {
  border-color:
    var(--ia-border-strong);

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

.ia-credential-row.is-selected {
  border-color:
    var(--ia-text-strong);

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

.ia-credential-row__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}

.ia-credential-row__identity > span:last-child {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-credential-row__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

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

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

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

.ia-credential-row__identity strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-credential-row__identity small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    500;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-credential-row__aside {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;

  flex:
    0 0 auto;
}


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

.ia-form-card {
  min-width:
    0;

  margin-top:
    13px;
}

.ia-form-grid {
  display:
    grid;

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

  gap:
    12px;
}

.ia-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}

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

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

  font-size:
    10px;

  font-weight:
    750;
}

.ia-field__help {
  color:
    var(--ia-text-muted);

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.4;
}


/* =========================================================
   INPUT
   ========================================================= */

.ia-input {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}

.ia-input > .icon {
  position:
    absolute;

  left:
    11px;

  z-index:
    1;

  width:
    14px;

  height:
    14px;

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

  pointer-events:
    none;
}

.ia-input input {
  width:
    100%;

  min-width:
    0;

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

  padding:
    0 11px;

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

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

  background:
    var(--ia-surface);

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

  font-size:
    11px;

  font-weight:
    600;

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

.ia-input > .icon + input {
  padding-left:
    33px;
}

.ia-input input:hover:not(:disabled) {
  border-color:
    var(--ia-border-strong);
}

.ia-input input:focus {
  border-color:
    var(--ia-text-strong);

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

.ia-input input:disabled {
  background:
    var(--ia-surface-muted);

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

  cursor:
    not-allowed;
}

.ia-field textarea {
  width:
    100%;

  min-width:
    0;

  min-height:
    84px;

  padding:
    10px 11px;

  resize:
    vertical;

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

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

  background:
    var(--ia-surface);

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

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.45;
}

.ia-field textarea:hover {
  border-color:
    var(--ia-border-strong);
}

.ia-field textarea:focus {
  border-color:
    var(--ia-text-strong);
}

.ia-page input::placeholder,
.ia-page textarea::placeholder {
  color:
    var(--ia-text-faint);

  opacity:
    1;
}


/* =========================================================
   SWITCH
   ========================================================= */

.ia-switch-card {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  margin-top:
    12px;

  padding:
    10px;

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

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

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

  cursor:
    pointer;
}

.ia-switch-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

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

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

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

.ia-switch-card__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-switch-card__content strong {
  color:
    var(--ia-text-strong);

  font-size:
    11px;

  font-weight:
    750;
}

.ia-switch-card__content small {
  margin-top:
    2px;

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

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.35;
}

.ia-switch-card input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

.ia-switch-card > b {
  position:
    relative;

  display:
    block;

  width:
    38px;

  height:
    21px;

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

  border-radius:
    999px;

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

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

.ia-switch-card > b::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

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

  transition:
    transform
    var(--ia-transition),
    background
    var(--ia-transition);
}

.ia-switch-card input:checked + b {
  border-color:
    var(--ia-text-strong);

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

.ia-switch-card input:checked + b::after {
  transform:
    translateX(17px);

  background:
    #ffffff;
}


/* =========================================================
   INFO CREDENCIAL
   ========================================================= */

.ia-credential-info {
  display:
    grid;

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

  margin-top:
    12px;

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

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

  overflow:
    hidden;
}

.ia-credential-info article {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    10px;

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

.ia-credential-info article +
article {
  border-left:
    1px solid
    var(--ia-border);
}

.ia-credential-info small {
  color:
    var(--ia-text-muted);

  font-size:
    9px;

  font-weight:
    700;
}

.ia-credential-info strong {
  margin-top:
    3px;

  overflow-wrap:
    anywhere;

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

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;
}


/* =========================================================
   ACCIONES FORMULARIO
   ========================================================= */

.ia-form-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    13px;

  padding-top:
    13px;

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


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

.ia-model-filters {
  display:
    grid;

  grid-template-columns:
    minmax(180px, 1.35fr)
    minmax(135px, 0.8fr)
    minmax(115px, 0.65fr)
    minmax(115px, 0.65fr)
    auto
    auto;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    14px;

  padding:
    10px;

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

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

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

.ia-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-width:
    0;
}

.ia-search .icon {
  position:
    absolute;

  left:
    11px;

  z-index:
    1;

  width:
    14px;

  height:
    14px;

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

  pointer-events:
    none;
}

.ia-search input {
  width:
    100%;

  min-width:
    0;

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

  padding:
    0 11px 0 33px;

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

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

  background:
    var(--ia-surface);

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

  font-size:
    11px;

  font-weight:
    600;
}

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

.ia-search input:focus {
  border-color:
    var(--ia-text-strong);
}

.ia-page select {
  width:
    100%;

  min-width:
    0;

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

  padding:
    0 28px 0 10px;

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

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

  background:
    var(--ia-surface);

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

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;
}

.ia-page select:hover {
  border-color:
    var(--ia-border-strong);
}

.ia-page select:focus {
  border-color:
    var(--ia-text-strong);
}


/* =========================================================
   MODELOS · GRID
   ========================================================= */

.ia-model-grid {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   MODELO · CARD
   ========================================================= */

.ia-model-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    13px;

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

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

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

.ia-model-card__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;
}

.ia-model-card__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}

.ia-model-card__identity > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-model-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

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

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

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

.ia-model-card__identity strong {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-model-card__identity small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-model-card__description {
  display:
    -webkit-box;

  min-height:
    30px;

  margin-top:
    10px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.ia-model-card__meta {
  display:
    grid;

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

  margin-top:
    11px;

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

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

  overflow:
    hidden;
}

.ia-model-card__meta > span {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    8px;

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

.ia-model-card__meta > span +
span {
  border-left:
    1px solid
    var(--ia-border);
}

.ia-model-card__meta small {
  color:
    var(--ia-text-muted);

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.25;
}

.ia-model-card__meta strong {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-model-card__capabilities {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;

  margin-top:
    10px;
}


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

.ia-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    99999;

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

  padding:
    10px 13px;

  border:
    1px solid
    #bcbcbc;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #111111;

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

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.4;

  opacity:
    0;

  transform:
    translateY(8px);

  pointer-events:
    none;

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

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

  transform:
    translateY(0);
}

.ia-toast.is-success {
  border-color:
    #a9d8bc;

  background:
    #edf8f2;

  color:
    #12633f;
}

.ia-toast.is-error {
  border-color:
    #edbbb7;

  background:
    #fff1f0;

  color:
    #9f2118;
}


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

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

  --ia-surface:
    #080808;

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

  --ia-surface-muted:
    #121212;

  --ia-surface-hover:
    #141414;

  --ia-border:
    #262626;

  --ia-border-strong:
    #393939;

  --ia-border-soft:
    #1d1d1d;

  --ia-text:
    #ededed;

  --ia-text-strong:
    #ffffff;

  --ia-text-secondary:
    #c6c6c6;

  --ia-text-muted:
    #969696;

  --ia-text-faint:
    #777777;

  --ia-primary:
    #ffffff;

  --ia-primary-hover:
    #e5e5e5;

  --ia-primary-text:
    #000000;

  --ia-success:
    #6ed6a1;

  --ia-success-bg:
    #081a11;

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

  --ia-danger:
    #ff8a80;

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

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

  --ia-warning:
    #e9c46a;

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

  --ia-warning-border:
    #514015;

  --ia-working:
    #d1d1d1;

  --ia-working-bg:
    #111111;

  --ia-working-border:
    #353535;

  background:
    #000000;

  color:
    #ededed;
}

html[data-theme="dark"]
.ia-btn--primary,
body[data-theme="dark"]
.ia-btn--primary,
.dark
.ia-btn--primary,
[data-theme="dark"]
.ia-btn--primary {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}

html[data-theme="dark"]
.ia-btn--primary:hover:not(:disabled),
body[data-theme="dark"]
.ia-btn--primary:hover:not(:disabled),
.dark
.ia-btn--primary:hover:not(:disabled),
[data-theme="dark"]
.ia-btn--primary:hover:not(:disabled) {
  background:
    #e6e6e6;

  border-color:
    #e6e6e6;

  color:
    #000000;
}

html[data-theme="dark"]
.ia-switch-card
input:checked + b,
body[data-theme="dark"]
.ia-switch-card
input:checked + b,
.dark
.ia-switch-card
input:checked + b,
[data-theme="dark"]
.ia-switch-card
input:checked + b {
  border-color:
    #ffffff;

  background:
    #ffffff;
}

html[data-theme="dark"]
.ia-switch-card
input:checked + b::after,
body[data-theme="dark"]
.ia-switch-card
input:checked + b::after,
.dark
.ia-switch-card
input:checked + b::after,
[data-theme="dark"]
.ia-switch-card
input:checked + b::after {
  background:
    #000000;
}

html[data-theme="dark"] .ia-toast,
body[data-theme="dark"] .ia-toast,
.dark .ia-toast,
[data-theme="dark"] .ia-toast {
  border-color:
    #343434;

  background:
    #090909;

  color:
    #ffffff;
}

html[data-theme="dark"] .ia-toast.is-success,
body[data-theme="dark"] .ia-toast.is-success,
.dark .ia-toast.is-success,
[data-theme="dark"] .ia-toast.is-success {
  border-color:
    #17482f;

  background:
    #081a11;

  color:
    #6ed6a1;
}

html[data-theme="dark"] .ia-toast.is-error,
body[data-theme="dark"] .ia-toast.is-error,
.dark .ia-toast.is-error,
[data-theme="dark"] .ia-toast.is-error {
  border-color:
    #54201c;

  background:
    #1e0908;

  color:
    #ff8a80;
}


/* =========================================================
   RESPONSIVE · PRIMER NIVEL
   ========================================================= */

@media (
  max-width:
  1280px
) {
  .ia-page {
    padding:
      18px;
  }

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

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

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

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

  .ia-metric:nth-child(4) {
    border-right:
      1px solid
      var(--ia-border);
  }

  .ia-model-filters {
    grid-template-columns:
      minmax(180px, 1fr)
      repeat(
        3,
        minmax(130px, 0.6fr)
      );
  }

  .ia-model-filters .ia-btn {
    width:
      100%;
  }

  .ia-model-card__meta {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .ia-model-card__meta > span:nth-child(3) {
    border-left:
      0;

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

  .ia-model-card__meta > span:nth-child(4) {
    border-top:
      1px solid
      var(--ia-border);
  }
}


/* =========================================================
   RESPONSIVE · TABLET GRANDE
   ========================================================= */

@media (
  max-width:
  1050px
) {
  .ia-providers-layout {
    grid-template-columns:
      220px
      minmax(0, 1fr);
  }

  .ia-provider-config-layout {
    grid-template-columns:
      1fr;
  }

  .ia-model-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   FIN PARTE 1 DE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · IA
   CONFIGURACIÓN CENTRAL

   UBICACIÓN:
   frontend/src/pages/ia/configuracion/
   ia-configuracion.css

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


/* =========================================================
   PERFILES · LAYOUT
   ========================================================= */

.ia-profiles-layout {
  display:
    grid;

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

  gap:
    14px;

  width:
    100%;

  min-width:
    0;
}

.ia-profile-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}

.ia-profile-workspace {
  display:
    grid;

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

  gap:
    14px;

  min-width:
    0;
}


/* =========================================================
   PERFIL · CARD
   ========================================================= */

.ia-profile-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    13px;

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

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

  background:
    var(--ia-surface);

  color:
    var(--ia-text);

  text-align:
    left;

  cursor:
    pointer;

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

.ia-profile-card:hover {
  border-color:
    var(--ia-border-strong);

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

.ia-profile-card.is-selected {
  border-color:
    var(--ia-text-strong);

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

.ia-profile-card__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}

.ia-profile-card__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}

.ia-profile-card__identity > span:last-child {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-profile-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

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

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

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

.ia-profile-card__identity strong {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-profile-card__identity small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-profile-card__description {
  display:
    -webkit-box;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.ia-profile-card__meta {
  display:
    grid;

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

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

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

  overflow:
    hidden;
}

.ia-profile-card__meta > span {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    29px;

  padding:
    6px 7px;

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

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

  font-size:
    8px;

  font-weight:
    700;

  text-align:
    center;

  white-space:
    nowrap;
}

.ia-profile-card__meta > span +
span {
  border-left:
    1px solid
    var(--ia-border);
}

.ia-profile-card__capabilities {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


/* =========================================================
   PERFIL · DETALLE
   ========================================================= */

.ia-profile-detail,
.ia-create-profile {
  min-width:
    0;

  padding:
    14px;

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

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

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

.ia-profile-detail__description {
  margin-top:
    12px;

  padding-bottom:
    12px;

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

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

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.5;
}

.ia-profile-detail__grid {
  display:
    grid;

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

  margin-top:
    12px;

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

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

  overflow:
    hidden;
}

.ia-profile-detail__grid article {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    9px;

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

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

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

.ia-profile-detail__grid article:nth-child(3n) {
  border-right:
    0;
}

.ia-profile-detail__grid article:nth-last-child(-n + 3) {
  border-bottom:
    0;
}

.ia-profile-detail__grid small {
  color:
    var(--ia-text-muted);

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.2;
}

.ia-profile-detail__grid strong {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PERFIL · REQUISITOS
   ========================================================= */

.ia-profile-requirements {
  margin-top:
    12px;

  padding-top:
    12px;

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

.ia-profile-requirements > span {
  display:
    block;

  margin-bottom:
    7px;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.ia-profile-requirements > div {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


/* =========================================================
   PERFIL · MODELOS
   ========================================================= */

.ia-profile-models {
  margin-top:
    14px;

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

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

  overflow:
    hidden;
}

.ia-profile-models__head {
  padding:
    10px;

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

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

.ia-profile-models__head > div {
  display:
    flex;

  flex-direction:
    column;
}

.ia-profile-models__head span {
  color:
    var(--ia-text-muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.ia-profile-models__head strong {
  margin-top:
    2px;

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

  font-size:
    11px;

  font-weight:
    750;
}

.ia-profile-models__list {
  min-width:
    0;
}

.ia-profile-model-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  padding:
    9px 10px;

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

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

.ia-profile-model-row:last-child {
  border-bottom:
    0;
}

.ia-profile-model-row__priority {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

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

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

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

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

  font-size:
    10px;

  font-weight:
    800;
}

.ia-profile-model-row__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.ia-profile-model-row__content strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-profile-model-row__content small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   NUEVO PERFIL
   ========================================================= */

.ia-create-profile {
  align-self:
    start;
}

.ia-profile-options {
  display:
    grid;

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

  gap:
    7px;

  margin-top:
    12px;
}

.ia-profile-options label {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  min-height:
    34px;

  padding:
    7px 9px;

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

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

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

  cursor:
    pointer;
}

.ia-profile-options input {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 auto;

  margin:
    0;

  accent-color:
    #111111;
}

.ia-profile-options span {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EJECUCIONES · RESUMEN
   ========================================================= */

.ia-execution-summary {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    13px;

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

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

  background:
    var(--ia-surface);

  overflow:
    hidden;
}

.ia-execution-summary article {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    10px;

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

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

.ia-execution-summary article:last-child {
  border-right:
    0;
}

.ia-execution-summary small {
  color:
    var(--ia-text-muted);

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.2;
}

.ia-execution-summary strong {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EJECUCIONES · TABLA
   ========================================================= */

.ia-executions-table {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--ia-surface);

  overflow:
    hidden;
}

.ia-executions-table__head,
.ia-execution-row {
  display:
    grid;

  grid-template-columns:
    minmax(86px, 0.78fr)
    minmax(125px, 1.25fr)
    minmax(135px, 1.35fr)
    minmax(70px, 0.62fr)
    minmax(62px, 0.58fr)
    minmax(72px, 0.65fr)
    minmax(68px, 0.62fr)
    minmax(108px, 0.95fr);

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}

.ia-executions-table__head {
  min-height:
    35px;

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

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

.ia-executions-table__head > span {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  height:
    100%;

  padding:
    0 8px;

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

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.ia-executions-table__head > span:last-child {
  border-right:
    0;
}

.ia-executions-table__body {
  min-width:
    0;
}

.ia-execution-row {
  min-height:
    48px;

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

  background:
    var(--ia-surface);

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

.ia-execution-row:last-child {
  border-bottom:
    0;
}

.ia-execution-row:hover {
  background:
    var(--ia-surface-hover);
}

.ia-execution-row > span {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  min-height:
    48px;

  padding:
    7px 8px;

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

.ia-execution-row > span:last-child {
  border-right:
    0;
}

.ia-execution-row__profile,
.ia-execution-row__model {
  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    center;

  flex-direction:
    column;
}

.ia-execution-row__profile strong,
.ia-execution-row__model strong {
  width:
    100%;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-execution-row__profile small,
.ia-execution-row__model small {
  width:
    100%;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.ia-execution-row__type,
.ia-execution-row__tokens,
.ia-execution-row__cost,
.ia-execution-row__duration,
.ia-execution-row__date {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DARK MODE · AJUSTES ESPECÍFICOS
   ========================================================= */

html[data-theme="dark"]
.ia-profile-options input,
body[data-theme="dark"]
.ia-profile-options input,
.dark
.ia-profile-options input,
[data-theme="dark"]
.ia-profile-options input {
  accent-color:
    #ffffff;
}

html[data-theme="dark"]
.ia-profile-options label,
body[data-theme="dark"]
.ia-profile-options label,
.dark
.ia-profile-options label,
[data-theme="dark"]
.ia-profile-options label {
  background:
    #0d0d0d;

  border-color:
    #262626;
}

html[data-theme="dark"]
.ia-profile-card,
html[data-theme="dark"]
.ia-profile-detail,
html[data-theme="dark"]
.ia-create-profile,
html[data-theme="dark"]
.ia-executions-table,
html[data-theme="dark"]
.ia-execution-summary,
body[data-theme="dark"]
.ia-profile-card,
body[data-theme="dark"]
.ia-profile-detail,
body[data-theme="dark"]
.ia-create-profile,
body[data-theme="dark"]
.ia-executions-table,
body[data-theme="dark"]
.ia-execution-summary,
.dark
.ia-profile-card,
.dark
.ia-profile-detail,
.dark
.ia-create-profile,
.dark
.ia-executions-table,
.dark
.ia-execution-summary,
[data-theme="dark"]
.ia-profile-card,
[data-theme="dark"]
.ia-profile-detail,
[data-theme="dark"]
.ia-create-profile,
[data-theme="dark"]
.ia-executions-table,
[data-theme="dark"]
.ia-execution-summary {
  background:
    #080808;
}


/* =========================================================
   RESPONSIVE · 1180
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .ia-profile-workspace {
    grid-template-columns:
      1fr;
  }

  .ia-create-profile {
    width:
      100%;
  }

  .ia-execution-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .ia-execution-summary article {
    border-bottom:
      1px solid
      var(--ia-border);
  }

  .ia-execution-summary article:nth-child(3n) {
    border-right:
      0;
  }

  .ia-execution-summary article:nth-child(4),
  .ia-execution-summary article:nth-child(5) {
    border-bottom:
      0;
  }

  .ia-execution-summary article:nth-child(4) {
    border-right:
      1px solid
      var(--ia-border);
  }

  .ia-executions-table__head,
  .ia-execution-row {
    grid-template-columns:
      minmax(80px, 0.75fr)
      minmax(110px, 1.2fr)
      minmax(120px, 1.3fr)
      minmax(65px, 0.6fr)
      minmax(58px, 0.55fr)
      minmax(66px, 0.62fr)
      minmax(64px, 0.6fr)
      minmax(96px, 0.9fr);
  }

  .ia-executions-table__head > span,
  .ia-execution-row > span {
    padding-right:
      6px;

    padding-left:
      6px;
  }
}


/* =========================================================
   RESPONSIVE · 980
   ========================================================= */

@media (
  max-width:
  980px
) {
  .ia-page {
    padding:
      14px;
  }

  .ia-page-head {
    gap:
      14px;
  }

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

  .ia-metric {
    border-right:
      1px solid
      var(--ia-border);

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

  .ia-metric:nth-child(2n) {
    border-right:
      0;
  }

  .ia-metric:nth-child(3) {
    border-right:
      1px solid
      var(--ia-border);
  }

  .ia-metric:nth-child(4) {
    border-right:
      0;
  }

  .ia-metric:nth-child(5) {
    border-right:
      0;

    border-bottom:
      0;

    grid-column:
      1 / -1;
  }

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

  .ia-tab {
    border-bottom:
      1px solid
      var(--ia-border);
  }

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

  .ia-tab:nth-child(3),
  .ia-tab:nth-child(4) {
    border-bottom:
      0;
  }

  .ia-tab:nth-child(3) {
    border-right:
      1px solid
      var(--ia-border);
  }

  .ia-providers-layout,
  .ia-profiles-layout {
    grid-template-columns:
      1fr;
  }

  .ia-provider-list,
  .ia-profile-list {
    display:
      grid;

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

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

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

  .ia-executions-table {
    border:
      0;

    background:
      transparent;
  }

  .ia-executions-table__head {
    display:
      none;
  }

  .ia-executions-table__body {
    display:
      grid;

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

    gap:
      9px;
  }

  .ia-execution-row {
    display:
      grid;

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

    min-width:
      0;

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

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

    overflow:
      hidden;
  }

  .ia-execution-row > span {
    position:
      relative;

    display:
      flex;

    min-width:
      0;

    min-height:
      52px;

    padding:
      20px 9px 7px;

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

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

  .ia-execution-row > span:nth-child(2n) {
    border-right:
      0;
  }

  .ia-execution-row > span:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }

  .ia-execution-row > span::before {
    position:
      absolute;

    top:
      6px;

    left:
      9px;

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

    font-size:
      7px;

    font-weight:
      800;

    line-height:
      1;

    letter-spacing:
      0.04em;

    text-transform:
      uppercase;
  }

  .ia-execution-row__status::before {
    content:
      "Estado";
  }

  .ia-execution-row__profile::before {
    content:
      "Perfil";
  }

  .ia-execution-row__model::before {
    content:
      "Modelo";
  }

  .ia-execution-row__type::before {
    content:
      "Entrada";
  }

  .ia-execution-row__tokens::before {
    content:
      "Tokens";
  }

  .ia-execution-row__cost::before {
    content:
      "Costo";
  }

  .ia-execution-row__duration::before {
    content:
      "Tiempo";
  }

  .ia-execution-row__date::before {
    content:
      "Fecha";
  }
}


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

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

  .ia-page-head {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      12px;
  }

  .ia-page-head__actions {
    width:
      100%;
  }

  .ia-page-head__actions .ia-btn {
    width:
      100%;
  }

  .ia-page-head p {
    max-width:
      none;
  }

  .ia-tab-panel {
    padding:
      13px;
  }

  .ia-section-head {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .ia-section-head__actions {
    width:
      100%;

    justify-content:
      stretch;
  }

  .ia-section-head__actions > * {
    flex:
      1 1 140px;
  }

  .ia-provider-list,
  .ia-profile-list {
    grid-template-columns:
      1fr;
  }

  .ia-provider-config-layout {
    grid-template-columns:
      1fr;
  }

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

  .ia-field--full {
    grid-column:
      auto;
  }

  .ia-profile-detail__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .ia-profile-detail__grid article {
    border-right:
      1px solid
      var(--ia-border);

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

  .ia-profile-detail__grid article:nth-child(3n) {
    border-right:
      1px solid
      var(--ia-border);
  }

  .ia-profile-detail__grid article:nth-child(2n) {
    border-right:
      0;
  }

  .ia-profile-detail__grid article:nth-last-child(-n + 3) {
    border-bottom:
      1px solid
      var(--ia-border);
  }

  .ia-profile-detail__grid article:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }

  .ia-profile-options {
    grid-template-columns:
      1fr;
  }

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

  .ia-execution-summary article {
    border-right:
      1px solid
      var(--ia-border);

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

  .ia-execution-summary article:nth-child(3n) {
    border-right:
      1px solid
      var(--ia-border);
  }

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

  .ia-execution-summary article:nth-child(4) {
    border-right:
      0;

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

  .ia-execution-summary article:nth-child(5) {
    grid-column:
      1 / -1;

    border-right:
      0;

    border-bottom:
      0;
  }

  .ia-executions-table__body {
    grid-template-columns:
      1fr;
  }
}


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

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

  .ia-page-head {
    margin-bottom:
      10px;

    padding-bottom:
      13px;
  }

  .ia-page-head__identity {
    gap:
      9px;
  }

  .ia-page-head__icon {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }

  .ia-page-head__icon .icon {
    width:
      16px;

    height:
      16px;
  }

  .ia-page-head h1 {
    font-size:
      23px;
  }

  .ia-page-head p {
    font-size:
      11px;
  }

  .ia-metrics {
    grid-template-columns:
      1fr;
  }

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

    border-right:
      0 !important;

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

  .ia-metric:last-child {
    border-bottom:
      0 !important;
  }

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

  .ia-tab {
    min-height:
      52px;

    border-right:
      0 !important;

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

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

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

    right:
      auto;

    bottom:
      7px;

    left:
      -1px;

    width:
      2px;

    height:
      auto;
  }

  .ia-tab__content small {
    white-space:
      normal;
  }

  .ia-tab-panel {
    padding:
      10px;
  }

  .ia-section-head {
    margin-bottom:
      12px;

    padding-bottom:
      12px;
  }

  .ia-section-head h2 {
    font-size:
      16px;
  }

  .ia-provider-card__head,
  .ia-profile-card__head,
  .ia-model-card__head,
  .ia-panel-head {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .ia-provider-card__head > .ia-status,
  .ia-profile-card__head > .ia-status,
  .ia-model-card__head > .ia-status,
  .ia-panel-head > .ia-status {
    align-self:
      flex-start;
  }

  .ia-provider-card__stats {
    grid-template-columns:
      1fr
      1fr;
  }

  .ia-provider-overview__actions {
    justify-content:
      stretch;
  }

  .ia-provider-overview__actions .ia-btn {
    width:
      100%;
  }

  .ia-credential-row {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .ia-credential-row__aside {
    justify-content:
      flex-start;
  }

  .ia-credential-info {
    grid-template-columns:
      1fr;
  }

  .ia-credential-info article +
  article {
    border-top:
      1px solid
      var(--ia-border);

    border-left:
      0;
  }

  .ia-form-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .ia-form-actions .ia-btn {
    width:
      100%;
  }

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

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

  .ia-model-filters .ia-btn {
    width:
      100%;
  }

  .ia-model-card__meta {
    grid-template-columns:
      1fr;
  }

  .ia-model-card__meta > span {
    border-top:
      1px solid
      var(--ia-border);

    border-left:
      0 !important;
  }

  .ia-model-card__meta > span:first-child {
    border-top:
      0;
  }

  .ia-profile-card__meta {
    grid-template-columns:
      1fr;
  }

  .ia-profile-card__meta > span {
    border-top:
      1px solid
      var(--ia-border);

    border-left:
      0 !important;
  }

  .ia-profile-card__meta > span:first-child {
    border-top:
      0;
  }

  .ia-profile-detail__grid {
    grid-template-columns:
      1fr;
  }

  .ia-profile-detail__grid article {
    border-right:
      0 !important;

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

  .ia-profile-detail__grid article:last-child {
    border-bottom:
      0 !important;
  }

  .ia-profile-model-row {
    grid-template-columns:
      30px
      minmax(0, 1fr);

    align-items:
      start;
  }

  .ia-profile-model-row > .ia-status {
    grid-column:
      2;

    justify-self:
      start;
  }

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

  .ia-execution-summary article {
    border-right:
      0 !important;

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

  .ia-execution-summary article:last-child {
    grid-column:
      auto;

    border-bottom:
      0 !important;
  }

  .ia-execution-row {
    grid-template-columns:
      1fr;
  }

  .ia-execution-row > span {
    min-height:
      48px;

    border-right:
      0 !important;

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

  .ia-execution-row > span:last-child {
    border-bottom:
      0 !important;
  }

  .ia-toast {
    right:
      8px;

    bottom:
      8px;

    left:
      8px;

    max-width:
      none;

    text-align:
      center;
  }
}


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

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

  .ia-tab-panel {
    padding:
      8px;
  }

  .ia-provider-card,
  .ia-profile-card,
  .ia-model-card,
  .ia-provider-overview,
  .ia-credentials-panel,
  .ia-credential-editor,
  .ia-profile-detail,
  .ia-create-profile {
    padding:
      10px;
  }

  .ia-btn {
    padding:
      0 10px;
  }

  .ia-page-head__eyebrow {
    font-size:
      8px;
  }

  .ia-page-head h1 {
    font-size:
      21px;
  }

  .ia-section-head h2 {
    font-size:
      15px;
  }

  .ia-switch-card {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      36px;

    gap:
      7px;

    padding:
      8px;
  }

  .ia-switch-card__icon {
    width:
      28px;

    height:
      28px;
  }
}


/* =========================================================
   SEGURIDAD CONTRA OVERFLOW HORIZONTAL
   ========================================================= */

.ia-page,
.ia-workspace,
.ia-active-tab,
.ia-tab-panel,
.ia-providers-layout,
.ia-provider-detail,
.ia-provider-config-layout,
.ia-credentials-panel,
.ia-credential-editor,
.ia-model-grid,
.ia-model-card,
.ia-profiles-layout,
.ia-profile-list,
.ia-profile-workspace,
.ia-profile-detail,
.ia-create-profile,
.ia-profile-models,
.ia-execution-summary,
.ia-executions-table,
.ia-executions-table__body,
.ia-execution-row {
  max-width:
    100%;

  min-width:
    0;
}

.ia-provider-card,
.ia-profile-card,
.ia-model-card,
.ia-credential-row,
.ia-profile-model-row,
.ia-execution-row {
  overflow:
    hidden;
}

.ia-page strong,
.ia-page small,
.ia-page p,
.ia-page span,
.ia-page h1,
.ia-page h2,
.ia-page h3 {
  max-width:
    100%;
}

.ia-page h1,
.ia-page h2,
.ia-page h3,
.ia-page p {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .ia-page *,
  .ia-page *::before,
  .ia-page *::after,
  .ia-toast {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}


/* =========================================================
   FIN PARTE 2 DE 2
   ========================================================= *//* =========================================================
   FIX · BOTÓN GUARDAR
   ========================================================= */

.ia-btn--primary,
.ia-btn--primary span,
.ia-btn--primary .icon {
  color:
    #ffffff !important;
}

.ia-btn--primary .icon {
  stroke:
    #ffffff !important;
}

.ia-btn--primary {
  background:
    #111111 !important;

  border-color:
    #111111 !important;
}

.ia-btn--primary:hover:not(:disabled) {
  background:
    #000000 !important;

  border-color:
    #000000 !important;

  color:
    #ffffff !important;
}

.ia-btn--primary:hover:not(:disabled) span,
.ia-btn--primary:hover:not(:disabled) .icon {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .ia-btn--primary,
body[data-theme="dark"] .ia-btn--primary,
.dark .ia-btn--primary,
[data-theme="dark"] .ia-btn--primary {
  background:
    #ffffff !important;

  border-color:
    #ffffff !important;

  color:
    #000000 !important;
}

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

  stroke:
    #000000 !important;
}

html[data-theme="dark"] .ia-btn--primary:hover:not(:disabled),
body[data-theme="dark"] .ia-btn--primary:hover:not(:disabled),
.dark .ia-btn--primary:hover:not(:disabled),
[data-theme="dark"] .ia-btn--primary:hover:not(:disabled) {
  background:
    #e8e8e8 !important;

  border-color:
    #e8e8e8 !important;

  color:
    #000000 !important;
}