/* =========================================================
   UBICACIÓN:
   frontend/src/pages/mi-gestion/control-armado/
   control-armado.css

   WIRTZ HUB · MI GESTIÓN · CONTROL DE ARMADO
   FRONTEND STYLES

   PARTE 1 DE 4

   RESPONSABILIDAD:
   - Layout general
   - Header
   - Tabs
   - Filtros
   - Botones
   - Inputs
   - Selects
   - Textarea
   - KPIs
   - Panels
   - Badges
   - Utilidades base
   ========================================================= */


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

.control-armado-page {
  --ca-bg:
    #f5f7fb;

  --ca-surface:
    #ffffff;

  --ca-surface-soft:
    #f8fafc;

  --ca-surface-hover:
    #f3f6fa;

  --ca-border:
    #e6eaf0;

  --ca-border-strong:
    #d9dee7;

  --ca-text:
    #121722;

  --ca-text-soft:
    #667085;

  --ca-text-muted:
    #8b95a7;

  --ca-primary:
    #111827;

  --ca-primary-hover:
    #1f2937;

  --ca-primary-contrast:
    #ffffff;

  --ca-success:
    #0f9f6e;

  --ca-success-soft:
    rgba(
      15,
      159,
      110,
      0.1
    );

  --ca-warning:
    #d68a00;

  --ca-warning-soft:
    rgba(
      214,
      138,
      0,
      0.12
    );

  --ca-danger:
    #d14343;

  --ca-danger-soft:
    rgba(
      209,
      67,
      67,
      0.1
    );

  --ca-info:
    #2563eb;

  --ca-info-soft:
    rgba(
      37,
      99,
      235,
      0.1
    );

  --ca-shadow-xs:
    0 1px 2px
    rgba(
      16,
      24,
      40,
      0.04
    );

  --ca-shadow-sm:
    0 6px 18px
    rgba(
      16,
      24,
      40,
      0.05
    );

  --ca-shadow-md:
    0 18px 48px
    rgba(
      16,
      24,
      40,
      0.12
    );

  --ca-radius-sm:
    8px;

  --ca-radius:
    10px;

  --ca-radius-lg:
    14px;

  --ca-radius-xl:
    18px;

  --ca-transition:
    160ms ease;

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  padding:
    0;

  margin:
    0;

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

  color:
    var(
      --ca-text
    );

  background:
    var(
      --ca-bg
    );

  overflow-x:
    hidden;
}


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

html[data-theme="dark"]
.control-armado-page,
body.dark
.control-armado-page,
body[data-theme="dark"]
.control-armado-page {
  --ca-bg:
    #050505;

  --ca-surface:
    #0a0a0a;

  --ca-surface-soft:
    #0f0f0f;

  --ca-surface-hover:
    #141414;

  --ca-border:
    #1b1b1b;

  --ca-border-strong:
    #282828;

  --ca-text:
    #f5f5f5;

  --ca-text-soft:
    #b8b8b8;

  --ca-text-muted:
    #858585;

  --ca-primary:
    #f5f5f5;

  --ca-primary-hover:
    #ffffff;

  --ca-primary-contrast:
    #050505;

  --ca-success:
    #32c58b;

  --ca-success-soft:
    rgba(
      50,
      197,
      139,
      0.11
    );

  --ca-warning:
    #e7a62d;

  --ca-warning-soft:
    rgba(
      231,
      166,
      45,
      0.11
    );

  --ca-danger:
    #ee6868;

  --ca-danger-soft:
    rgba(
      238,
      104,
      104,
      0.11
    );

  --ca-info:
    #6d9cff;

  --ca-info-soft:
    rgba(
      109,
      156,
      255,
      0.11
    );

  --ca-shadow-xs:
    none;

  --ca-shadow-sm:
    none;

  --ca-shadow-md:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      0.5
    );
}


/* =========================================================
   BOX SIZING
   ========================================================= */

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


/* =========================================================
   PAGE SHELL
   ========================================================= */

.ca-page-shell {
  width:
    100%;

  max-width:
    none;

  padding:
    14px 16px 24px;

  margin:
    0 auto;
}


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

.ca-page-header {
  width:
    100%;

  padding:
    14px 16px 0;
}


.ca-page-header__main {
  width:
    100%;

  padding:
    14px 16px;

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

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

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );
}


.ca-page-header__eyebrow {
  margin-bottom:
    4px;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

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


.ca-page-header__title-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;
}


.ca-page-header__title {
  margin:
    0;

  font-size:
    22px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

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


.ca-page-header__description {
  margin:
    5px 0 0;

  max-width:
    780px;

  font-size:
    12.5px;

  line-height:
    1.5;

  font-weight:
    550;

  color:
    var(
      --ca-text-soft
    );
}


.ca-page-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-shrink:
    0;
}


/* =========================================================
   BUTTON BASE
   ========================================================= */

.ca-button {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    34px;

  padding:
    7px 11px;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  font:
    inherit;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    700;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

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


.ca-button:hover {
  transform:
    translateY(
      -1px
    );
}


.ca-button:active {
  transform:
    translateY(
      0
    );
}


.ca-button:disabled {
  opacity:
    0.48;

  pointer-events:
    none;

  transform:
    none;
}


/* =========================================================
   BUTTON PRIMARY
   ========================================================= */

.ca-button--primary {
  border-color:
    var(
      --ca-primary
    );

  background:
    var(
      --ca-primary
    );

  color:
    var(
      --ca-primary-contrast
    );
}


.ca-button--primary:hover {
  border-color:
    var(
      --ca-primary-hover
    );

  background:
    var(
      --ca-primary-hover
    );
}


/* =========================================================
   BUTTON SECONDARY
   ========================================================= */

.ca-button--secondary {
  border-color:
    var(
      --ca-border-strong
    );

  background:
    var(
      --ca-surface
    );

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


.ca-button--secondary:hover {
  background:
    var(
      --ca-surface-hover
    );
}


/* =========================================================
   BUTTON GHOST
   ========================================================= */

.ca-button--ghost {
  border-color:
    transparent;

  background:
    transparent;

  color:
    var(
      --ca-text-soft
    );
}


.ca-button--ghost:hover {
  border-color:
    var(
      --ca-border
    );

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

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


/* =========================================================
   BUTTON DANGER GHOST
   ========================================================= */

.ca-button--danger-ghost {
  border-color:
    rgba(
      209,
      67,
      67,
      0.22
    );

  background:
    transparent;

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


.ca-button--danger-ghost:hover {
  background:
    var(
      --ca-danger-soft
    );
}


/* =========================================================
   TEXT BUTTON
   ========================================================= */

.ca-text-button {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    4px 0;

  border:
    0;

  background:
    transparent;

  font:
    inherit;

  font-size:
    11.5px;

  font-weight:
    750;

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

  cursor:
    pointer;

  transition:
    color
      var(
        --ca-transition
      );
}


.ca-text-button:hover {
  color:
    var(
      --ca-text
    );
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.ca-icon-button {
  appearance:
    none;

  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(
      --ca-surface
    );

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

  cursor:
    pointer;

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


.ca-icon-button:hover {
  border-color:
    var(
      --ca-border-strong
    );

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

  color:
    var(
      --ca-text
    );

  transform:
    translateY(
      -1px
    );
}


.ca-icon-button:disabled {
  opacity:
    0.42;

  pointer-events:
    none;
}


.ca-icon-button--danger {
  color:
    var(
      --ca-danger
    );
}


.ca-icon-button--danger:hover {
  border-color:
    rgba(
      209,
      67,
      67,
      0.3
    );

  background:
    var(
      --ca-danger-soft
    );

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


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

.ca-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    12px;

  padding:
    4px;

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

  border-radius:
    10px;

  background:
    var(
      --ca-surface
    );

  overflow-x:
    auto;

  scrollbar-width:
    thin;
}


.ca-tab {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  flex:
    0 0 auto;

  min-height:
    32px;

  padding:
    7px 10px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  font:
    inherit;

  font-size:
    11.5px;

  font-weight:
    700;

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

  cursor:
    pointer;

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


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

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


.ca-tab.is-active {
  background:
    var(
      --ca-primary
    );

  color:
    var(
      --ca-primary-contrast
    );
}


/* =========================================================
   SUBTABS
   ========================================================= */

.ca-subtabs {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    3px;

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

  border-radius:
    8px;

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


.ca-subtab {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    28px;

  padding:
    5px 8px;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  font:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;

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

  cursor:
    pointer;

  transition:
    all
    var(
      --ca-transition
    );
}


.ca-subtab:hover {
  color:
    var(
      --ca-text
    );
}


.ca-subtab.is-active {
  background:
    var(
      --ca-surface
    );

  color:
    var(
      --ca-text
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );
}


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

.ca-filters {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    12px;

  padding:
    12px;

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

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

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );
}


.ca-filters__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    10px;
}


.ca-date-presets {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.ca-date-preset {
  appearance:
    none;

  min-height:
    28px;

  padding:
    5px 9px;

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

  border-radius:
    7px;

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

  font:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;

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

  cursor:
    pointer;

  transition:
    all
    var(
      --ca-transition
    );
}


.ca-date-preset:hover {
  border-color:
    var(
      --ca-border-strong
    );

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

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


/* =========================================================
   FILTER GRID
   ========================================================= */

.ca-filters__grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      190px,
      1.5fr
    )
    repeat(
      8,
      minmax(
        120px,
        1fr
      )
    );

  gap:
    8px;

  align-items:
    end;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   FIELDS
   ========================================================= */

.ca-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}


.ca-field--search {
  min-width:
    180px;
}


.ca-field--span-2 {
  grid-column:
    span 2;
}


.ca-field__label {
  display:
    block;

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    750;

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

  white-space:
    nowrap;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */

.ca-input,
.ca-select,
.ca-textarea {
  width:
    100%;

  min-width:
    0;

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

  outline:
    none;

  border-radius:
    8px;

  background:
    var(
      --ca-surface
    );

  color:
    var(
      --ca-text
    );

  font:
    inherit;

  font-size:
    11.5px;

  font-weight:
    600;

  transition:
    border-color
      var(
        --ca-transition
      ),
    box-shadow
      var(
        --ca-transition
      ),
    background
      var(
        --ca-transition
      );
}


.ca-input,
.ca-select {
  height:
    34px;

  padding:
    0 9px;
}


.ca-textarea {
  min-height:
    76px;

  padding:
    9px 10px;

  line-height:
    1.45;

  resize:
    vertical;
}


.ca-input:hover,
.ca-select:hover,
.ca-textarea:hover {
  border-color:
    var(
      --ca-border-strong
    );
}


.ca-input:focus,
.ca-select:focus,
.ca-textarea:focus {
  border-color:
    var(
      --ca-info
    );

  box-shadow:
    0 0 0 3px
    var(
      --ca-info-soft
    );
}


.ca-input::placeholder,
.ca-textarea::placeholder {
  color:
    var(
      --ca-text-muted
    );

  opacity:
    0.75;
}


/* =========================================================
   SELECT
   ========================================================= */

.ca-select {
  appearance:
    auto;

  cursor:
    pointer;
}


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

.ca-input-icon {
  position:
    relative;

  width:
    100%;
}


.ca-input-icon > svg,
.ca-input-icon > i {
  position:
    absolute;

  left:
    9px;

  top:
    50%;

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;

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


.ca-input-icon .ca-input {
  padding-left:
    31px;
}


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

.ca-input-suffix {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;
}


.ca-input-suffix .ca-input {
  padding-right:
    42px;
}


.ca-input-suffix > span {
  position:
    absolute;

  right:
    9px;

  top:
    50%;

  transform:
    translateY(
      -50%
    );

  font-size:
    10px;

  font-weight:
    700;

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

  pointer-events:
    none;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.ca-checkbox-field {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    32px;

  font-size:
    11.5px;

  font-weight:
    650;

  color:
    var(
      --ca-text
    );

  cursor:
    pointer;
}


.ca-checkbox-field input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    var(
      --ca-primary
    );

  cursor:
    pointer;
}


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

.ca-content {
  width:
    100%;

  min-width:
    0;
}


.ca-tab-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


.ca-tab-content--secondary {
  margin-top:
    0;
}


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

.ca-metrics-grid {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   METRIC CARD
   ========================================================= */

.ca-metric-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  min-height:
    104px;

  padding:
    11px 12px;

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

  border-radius:
    var(
      --ca-radius
    );

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );

  overflow:
    hidden;
}


.ca-metric-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0 auto 0 0;

  width:
    2px;

  background:
    transparent;
}


.ca-metric-card.is-success::before {
  background:
    var(
      --ca-success
    );
}


.ca-metric-card.is-warning::before {
  background:
    var(
      --ca-warning
    );
}


.ca-metric-card.is-danger::before {
  background:
    var(
      --ca-danger
    );
}


.ca-metric-card.is-info::before {
  background:
    var(
      --ca-info
    );
}


.ca-metric-card__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.ca-metric-card__label {
  min-width:
    0;

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    750;

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

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ca-metric-card__icon {
  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    7px;

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

  color:
    var(
      --ca-text-soft
    );
}


.ca-metric-card__value {
  min-width:
    0;

  font-size:
    20px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

  color:
    var(
      --ca-text
    );

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ca-metric-card__secondary {
  min-width:
    0;

  font-size:
    9.5px;

  line-height:
    1.3;

  font-weight:
    600;

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

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.ca-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );

  overflow:
    hidden;
}


.ca-panel__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    52px;

  padding:
    11px 13px;

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


.ca-panel__header h2,
.ca-panel__header h3 {
  margin:
    0;

  font-size:
    13px;

  line-height:
    1.25;

  font-weight:
    800;

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


.ca-panel__header p {
  margin:
    3px 0 0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;

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


.ca-panel__header--with-subtabs {
  align-items:
    center;
}


.ca-panel__header--config {
  min-height:
    58px;
}


.ca-panel__body {
  width:
    100%;

  min-width:
    0;

  padding:
    12px 13px;
}


.ca-panel__body--flush {
  padding:
    0;
}


.ca-panel__body--config-tabs {
  padding:
    8px;
}


.ca-panel-counter {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    26px;

  height:
    24px;

  padding:
    0 7px;

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

  border-radius:
    999px;

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

  font-size:
    10px;

  font-weight:
    800;

  color:
    var(
      --ca-text-soft
    );
}


/* =========================================================
   DASHBOARD GRIDS
   ========================================================= */

.ca-dashboard-grid {
  display:
    grid;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


.ca-dashboard-grid--main {
  grid-template-columns:
    minmax(
      0,
      2.1fr
    )
    minmax(
      280px,
      0.9fr
    );
}


.ca-dashboard-grid--three {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


.ca-dashboard-grid--idle {
  grid-template-columns:
    minmax(
      0,
      2fr
    )
    minmax(
      260px,
      0.8fr
    );
}


.ca-dashboard-grid--alerts {
  grid-template-columns:
    minmax(
      0,
      2fr
    )
    minmax(
      260px,
      0.8fr
    );
}


.ca-dashboard-grid--full {
  grid-template-columns:
    minmax(
      280px,
      420px
    );
}


/* =========================================================
   BADGES
   ========================================================= */

.ca-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    21px;

  max-width:
    100%;

  padding:
    3px 7px;

  border:
    1px solid
    transparent;

  border-radius:
    999px;

  font-size:
    9.5px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.ca-badge.is-success {
  border-color:
    rgba(
      15,
      159,
      110,
      0.18
    );

  background:
    var(
      --ca-success-soft
    );

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


.ca-badge.is-warning {
  border-color:
    rgba(
      214,
      138,
      0,
      0.22
    );

  background:
    var(
      --ca-warning-soft
    );

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


.ca-badge.is-danger {
  border-color:
    rgba(
      209,
      67,
      67,
      0.22
    );

  background:
    var(
      --ca-danger-soft
    );

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


.ca-badge.is-info {
  border-color:
    rgba(
      37,
      99,
      235,
      0.18
    );

  background:
    var(
      --ca-info-soft
    );

  color:
    var(
      --ca-info
    );
}


.ca-badge.is-muted {
  border-color:
    var(
      --ca-border
    );

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

  color:
    var(
      --ca-text-soft
    );
}


/* =========================================================
   CHANNEL BADGE
   ========================================================= */

.ca-channel-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    22px;

  padding:
    3px 7px;

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

  border-radius:
    999px;

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

  font-size:
    9.5px;

  font-weight:
    800;

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

  white-space:
    nowrap;
}


.ca-channel-badge[data-channel="FULL"] {
  border-color:
    rgba(
      37,
      99,
      235,
      0.2
    );

  background:
    var(
      --ca-info-soft
    );

  color:
    var(
      --ca-info
    );
}


.ca-channel-badge[data-channel="ML_FLEX"] {
  border-color:
    rgba(
      214,
      138,
      0,
      0.22
    );

  background:
    var(
      --ca-warning-soft
    );

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


.ca-channel-badge[data-channel="ML_COLECTA"] {
  border-color:
    rgba(
      15,
      159,
      110,
      0.2
    );

  background:
    var(
      --ca-success-soft
    );

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


.ca-channel-badge[data-channel="WEB"],
.ca-channel-badge[data-channel="MAYORISTA"] {
  border-color:
    var(
      --ca-border-strong
    );

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

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


/* =========================================================
   EMPTY STATE
   ========================================================= */

.ca-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  width:
    100%;

  min-height:
    120px;

  padding:
    20px;
}


.ca-empty__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

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


.ca-empty__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}


.ca-empty__body strong {
  font-size:
    12px;

  font-weight:
    800;

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


.ca-empty__body span {
  font-size:
    10.5px;

  line-height:
    1.4;

  font-weight:
    600;

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


/* =========================================================
   ERROR STATE
   ========================================================= */

.ca-error-state {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  width:
    100%;

  min-height:
    100px;

  padding:
    14px;

  border:
    1px solid
    rgba(
      209,
      67,
      67,
      0.2
    );

  border-radius:
    10px;

  background:
    var(
      --ca-danger-soft
    );
}


.ca-error-state__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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


.ca-error-state__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ca-error-state__body strong {
  font-size:
    12px;

  font-weight:
    800;

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


.ca-error-state__body span {
  font-size:
    10.5px;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    var(
      --ca-text-soft
    );
}


/* =========================================================
   LOADING
   ========================================================= */

.ca-loading {
  position:
    fixed;

  top:
    14px;

  left:
    50%;

  z-index:
    4000;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    34px;

  padding:
    7px 11px;

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

  border-radius:
    999px;

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-md
    );

  transform:
    translateX(
      -50%
    );

  font-size:
    10.5px;

  font-weight:
    700;

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


.ca-loading[hidden] {
  display:
    none;
}


.ca-loading__spinner {
  width:
    14px;

  height:
    14px;

  border:
    2px solid
    var(
      --ca-border-strong
    );

  border-top-color:
    var(
      --ca-text
    );

  border-radius:
    50%;

  animation:
    ca-spin
    0.75s
    linear
    infinite;
}


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


/* =========================================================
   GENERAL TEXT HELPERS
   ========================================================= */

.ca-muted {
  color:
    var(
      --ca-text-muted
    );
}


.ca-mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    650;
}


.ca-duration-value {
  font-variant-numeric:
    tabular-nums;

  font-weight:
    750;

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


.ca-cell-main {
  font-weight:
    700;

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


.ca-cell-stack {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ca-cell-stack strong,
.ca-cell-stack small {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ca-table-text {
  display:
    block;

  max-width:
    220px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SVG
   ========================================================= */

.control-armado-page svg {
  display:
    block;

  flex-shrink:
    0;
}


/* =========================================================
   FOCUS VISIBLE
   ========================================================= */

.control-armado-page button:focus-visible,
.control-armado-page input:focus-visible,
.control-armado-page select:focus-visible,
.control-armado-page textarea:focus-visible {
  outline:
    2px solid
    var(
      --ca-info
    );

  outline-offset:
    2px;
}


/* =========================================================
   DISABLED
   ========================================================= */

.control-armado-page input:disabled,
.control-armado-page select:disabled,
.control-armado-page textarea:disabled {
  opacity:
    0.58;

  cursor:
    not-allowed;
}


/* =========================================================
   SELECTION
   ========================================================= */

.control-armado-page ::selection {
  background:
    var(
      --ca-info-soft
    );

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


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

.control-armado-page * {
  scrollbar-width:
    thin;

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


.control-armado-page *::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


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


.control-armado-page *::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    var(
      --ca-border-strong
    );

  background-clip:
    padding-box;
}


/* =========================================================
   PARTE 1 DE 4 FINALIZADA
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · MI GESTIÓN · CONTROL DE ARMADO
   FRONTEND STYLES

   PARTE 2 DE 4

   RESPONSABILIDAD:
   - Tablas
   - Usuarios
   - Ranking
   - Progress bars
   - Actividad horaria
   - Timeline
   - Comparaciones
   - Canales
   - FULL
   ========================================================= */


/* =========================================================
   TABLE WRAP
   ========================================================= */

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

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


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

.ca-table {
  width:
    100%;

  min-width:
    920px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  font-size:
    10.5px;

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


.ca-table thead th {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  min-height:
    34px;

  padding:
    9px 10px;

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

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

  font-size:
    9.5px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.015em;

  text-align:
    left;

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

  white-space:
    nowrap;
}


.ca-table tbody td {
  padding:
    9px 10px;

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

  vertical-align:
    middle;

  font-size:
    10.5px;

  line-height:
    1.35;

  font-weight:
    600;

  color:
    var(
      --ca-text-soft
    );
}


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


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

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


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


.ca-table tbody td strong {
  color:
    var(
      --ca-text
    );

  font-weight:
    750;
}


.ca-table__actions {
  width:
    1%;

  white-space:
    nowrap;

  text-align:
    right;
}


.ca-table thead
.ca-table__actions {
  text-align:
    right;
}


/* =========================================================
   USERS TABLE
   ========================================================= */

.ca-table--users {
  min-width:
    1380px;
}


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

.ca-row-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


/* =========================================================
   USER LINK
   ========================================================= */

.ca-user-link {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  max-width:
    220px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  font:
    inherit;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.ca-user-link:hover
.ca-user-link__body strong,
.ca-user-link:hover > strong {
  color:
    var(
      --ca-info
    );
}


.ca-user-link--compact {
  gap:
    6px;

  max-width:
    180px;
}


/* =========================================================
   USER AVATAR
   ========================================================= */

.ca-user-avatar {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;

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


.ca-user-avatar--large {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  border-radius:
    11px;

  font-size:
    15px;
}


/* =========================================================
   USER LINK BODY
   ========================================================= */

.ca-user-link__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ca-user-link__body strong,
.ca-user-link--compact > strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  line-height:
    1.25;

  font-weight:
    800;

  color:
    var(
      --ca-text
    );

  transition:
    color
    var(
      --ca-transition
    );
}


.ca-user-link__body small {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    600;

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


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

.ca-productivity-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  width:
    110px;
}


.ca-productivity-cell__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    5px;
}


.ca-productivity-cell__header strong {
  font-size:
    10px;

  font-weight:
    800;

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


.ca-productivity-cell[data-status="warning"]
.ca-productivity-cell__header strong {
  color:
    var(
      --ca-warning
    );
}


.ca-productivity-cell[data-status="danger"]
.ca-productivity-cell__header strong {
  color:
    var(
      --ca-danger
    );
}


/* =========================================================
   PROGRESS
   ========================================================= */

.ca-progress {
  position:
    relative;

  display:
    block;

  width:
    100%;

  height:
    5px;

  border-radius:
    999px;

  background:
    var(
      --ca-border
    );

  overflow:
    hidden;
}


.ca-progress__fill {
  display:
    block;

  height:
    100%;

  min-width:
    0;

  border-radius:
    inherit;

  background:
    var(
      --ca-text
    );

  transition:
    width
    260ms
    ease;
}


.ca-productivity-cell[data-status="warning"]
.ca-progress__fill {
  background:
    var(
      --ca-warning
    );
}


.ca-productivity-cell[data-status="danger"]
.ca-progress__fill {
  background:
    var(
      --ca-danger
    );
}


.ca-progress--large {
  height:
    7px;
}


/* =========================================================
   RANKING
   ========================================================= */

.ca-ranking-list {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;
}


.ca-ranking-row {
  appearance:
    none;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  padding:
    9px 0;

  border:
    0;

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

  background:
    transparent;

  font:
    inherit;

  text-align:
    left;

  color:
    inherit;

  cursor:
    pointer;
}


.ca-ranking-row:last-child {
  border-bottom:
    0;
}


.ca-ranking-row:hover
.ca-ranking-row__header strong {
  color:
    var(
      --ca-info
    );
}


.ca-ranking-row__position {
  width:
    24px;

  height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    7px;

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

  font-size:
    9.5px;

  font-weight:
    850;

  color:
    var(
      --ca-text-soft
    );
}


.ca-ranking-row__main {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}


.ca-ranking-row__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}


.ca-ranking-row__header strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    800;

  color:
    var(
      --ca-text
    );

  transition:
    color
    var(
      --ca-transition
    );
}


.ca-ranking-row__header > span {
  flex-shrink:
    0;

  font-size:
    9.5px;

  font-weight:
    750;

  color:
    var(
      --ca-text-soft
    );
}


.ca-ranking-row__meta {
  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    600;

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


/* =========================================================
   ACTIVITY HOURLY
   ========================================================= */

.ca-hourly-chart {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  width:
    100%;

  padding:
    10px 12px;
}


.ca-hourly-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-height:
    38px;

  padding:
    4px 0;

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


.ca-hourly-row:last-child {
  border-bottom:
    0;
}


.ca-hourly-row__hour {
  font-size:
    10px;

  font-weight:
    800;

  font-variant-numeric:
    tabular-nums;

  color:
    var(
      --ca-text-soft
    );
}


.ca-hourly-row__graph {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}


.ca-hourly-row__bar {
  position:
    relative;

  width:
    100%;

  height:
    6px;

  border-radius:
    999px;

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

  overflow:
    hidden;
}


.ca-hourly-row__bar > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --ca-info
    );

  opacity:
    0.78;
}


.ca-hourly-row__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.ca-hourly-row__meta span {
  font-size:
    9px;

  font-weight:
    650;

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


/* =========================================================
   PEAK HOUR
   ========================================================= */

.ca-peak-hour {
  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  width:
    100%;
}


.ca-peak-hour__time {
  min-width:
    88px;

  font-size:
    26px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    -0.03em;

  font-variant-numeric:
    tabular-nums;

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


.ca-peak-hour__stats {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;
}


.ca-peak-hour__stats > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    9px 10px;

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

  border-radius:
    8px;

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


.ca-peak-hour__stats span {
  font-size:
    9px;

  font-weight:
    700;

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


.ca-peak-hour__stats strong {
  font-size:
    14px;

  font-weight:
    850;

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


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

.ca-timeline {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;
}


.ca-timeline__item {
  display:
    grid;

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

  gap:
    8px;

  min-height:
    58px;
}


.ca-timeline__time {
  padding-top:
    2px;

  font-size:
    9.5px;

  line-height:
    1.2;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;

  color:
    var(
      --ca-text-soft
    );
}


.ca-timeline__line {
  position:
    relative;

  display:
    flex;

  justify-content:
    center;
}


.ca-timeline__line::before {
  content:
    "";

  position:
    absolute;

  top:
    8px;

  bottom:
    -4px;

  left:
    50%;

  width:
    1px;

  background:
    var(
      --ca-border-strong
    );

  transform:
    translateX(
      -50%
    );
}


.ca-timeline__item:last-child
.ca-timeline__line::before {
  display:
    none;
}


.ca-timeline__line > span {
  position:
    relative;

  z-index:
    1;

  width:
    8px;

  height:
    8px;

  margin-top:
    3px;

  border:
    2px solid
    var(
      --ca-surface
    );

  border-radius:
    50%;

  background:
    var(
      --ca-info
    );

  box-shadow:
    0 0 0 1px
    var(
      --ca-info
    );
}


.ca-timeline__item.has-gap
.ca-timeline__line > span {
  background:
    var(
      --ca-warning
    );

  box-shadow:
    0 0 0 1px
    var(
      --ca-warning
    );
}


.ca-timeline__content {
  min-width:
    0;

  padding:
    0 0 12px;
}


.ca-timeline__header {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


.ca-timeline__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    5px;

  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    600;

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


.ca-timeline__gap {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    6px;

  padding:
    4px 7px;

  border:
    1px solid
    rgba(
      214,
      138,
      0,
      0.22
    );

  border-radius:
    7px;

  background:
    var(
      --ca-warning-soft
    );

  font-size:
    9px;

  font-weight:
    700;

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


/* =========================================================
   COMPARISON
   ========================================================= */

.ca-comparison-list {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;
}


.ca-comparison-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-height:
    38px;

  padding:
    7px 0;

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


.ca-comparison-row:last-child {
  border-bottom:
    0;
}


.ca-comparison-row__label {
  font-size:
    10px;

  font-weight:
    700;

  color:
    var(
      --ca-text-soft
    );
}


.ca-comparison-row__current {
  font-size:
    11px;

  font-weight:
    850;

  text-align:
    right;

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


.ca-comparison-row__historical {
  font-size:
    10px;

  font-weight:
    700;

  text-align:
    right;

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


.ca-comparison-row__variation {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  font-size:
    9.5px;

  font-weight:
    800;

  text-align:
    right;

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


.ca-comparison-row__variation[data-direction="up"] {
  color:
    var(
      --ca-success
    );
}


.ca-comparison-row__variation[data-direction="down"] {
  color:
    var(
      --ca-danger
    );
}


/* =========================================================
   JORNADA BREAKDOWN
   ========================================================= */

.ca-jornada-breakdown {
  display:
    grid;

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

  gap:
    7px;
}


.ca-jornada-breakdown__item {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    9px;

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

  border-radius:
    8px;

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


.ca-jornada-breakdown__item span {
  font-size:
    8.5px;

  font-weight:
    700;

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


.ca-jornada-breakdown__item strong {
  font-size:
    12px;

  font-weight:
    850;

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


/* =========================================================
   CHANNEL GRID
   ========================================================= */

.ca-channel-grid {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;
}


.ca-channel-grid--large {
  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );
}


/* =========================================================
   CHANNEL CARD
   ========================================================= */

.ca-channel-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    9px;

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


.ca-channel-card--large {
  min-height:
    160px;

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


.ca-channel-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.ca-channel-card__header > span:not(
  .ca-channel-badge
) {
  font-size:
    9px;

  font-weight:
    750;

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


.ca-channel-card__orders {
  font-size:
    9px;

  font-weight:
    700;

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


.ca-channel-card__main-value {
  display:
    flex;

  align-items:
    baseline;

  gap:
    6px;
}


.ca-channel-card__main-value strong {
  font-size:
    24px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    -0.035em;

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


.ca-channel-card__main-value span {
  font-size:
    9px;

  font-weight:
    700;

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


/* =========================================================
   CHANNEL CARD METRICS
   ========================================================= */

.ca-channel-card__metrics {
  display:
    grid;

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

  gap:
    6px;
}


.ca-channel-card--large
.ca-channel-card__metrics {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


.ca-channel-card__metrics > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ca-channel-card__metrics span {
  min-width:
    0;

  font-size:
    8.5px;

  line-height:
    1.2;

  font-weight:
    650;

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

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ca-channel-card__metrics strong {
  min-width:
    0;

  font-size:
    11px;

  font-weight:
    800;

  color:
    var(
      --ca-text
    );

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   FULL SUMMARY
   ========================================================= */

.ca-full-summary {
  display:
    grid;

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

  gap:
    8px;
}


.ca-full-summary__metric {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;

  padding:
    9px;

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

  border-radius:
    8px;

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


.ca-full-summary__metric--wide {
  grid-column:
    1 /
    -1;
}


.ca-full-summary__metric span {
  font-size:
    8.5px;

  font-weight:
    700;

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


.ca-full-summary__metric strong {
  font-size:
    15px;

  font-weight:
    850;

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


/* =========================================================
   FULL COMPLIANCE
   ========================================================= */

.ca-full-compliance {
  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  width:
    100%;
}


.ca-full-compliance__value {
  min-width:
    92px;

  font-size:
    28px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -0.04em;

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


.ca-full-compliance__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  width:
    100%;

  min-width:
    0;
}


.ca-full-compliance__body strong {
  font-size:
    11px;

  font-weight:
    800;

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


.ca-full-compliance__body > span:not(
  .ca-progress
) {
  font-size:
    9px;

  font-weight:
    650;

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


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

.ca-inline-filters {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.ca-inline-filters
.ca-field {
  min-width:
    130px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.ca-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    48px;

  padding:
    8px 10px;

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

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


.ca-pagination--single {
  justify-content:
    flex-end;
}


.ca-pagination__summary {
  font-size:
    9.5px;

  font-weight:
    650;

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


.ca-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


.ca-pagination__page {
  appearance:
    none;

  min-width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

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

  border-radius:
    7px;

  background:
    var(
      --ca-surface
    );

  font:
    inherit;

  font-size:
    9.5px;

  font-weight:
    750;

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

  cursor:
    pointer;
}


.ca-pagination__page:hover {
  border-color:
    var(
      --ca-border-strong
    );

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

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


.ca-pagination__page.is-active {
  border-color:
    var(
      --ca-primary
    );

  background:
    var(
      --ca-primary
    );

  color:
    var(
      --ca-primary-contrast
    );
}


.ca-pagination__ellipsis {
  min-width:
    22px;

  text-align:
    center;

  font-size:
    10px;

  font-weight:
    700;

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


/* =========================================================
   DARK MODE TABLE ENHANCEMENT
   ========================================================= */

html[data-theme="dark"]
.ca-table thead th,
body.dark
.ca-table thead th,
body[data-theme="dark"]
.ca-table thead th {
  background:
    #0d0d0d;
}


html[data-theme="dark"]
.ca-table tbody tr:hover,
body.dark
.ca-table tbody tr:hover,
body[data-theme="dark"]
.ca-table tbody tr:hover {
  background:
    #111111;
}


/* =========================================================
   TABLE RESPONSIVE WIDTHS
   ========================================================= */

@media (
  max-width:
  1600px
) {
  .ca-channel-grid--large {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ca-peak-hour__stats {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  1360px
) {
  .ca-table {
    min-width:
      980px;
  }


  .ca-table--users {
    min-width:
      1320px;
  }


  .ca-channel-grid--large {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   PARTE 2 DE 4 FINALIZADA
   CONTINÚA EN PARTE 3
   ========================================================= *//* =========================================================
   WIRTZ HUB · MI GESTIÓN · CONTROL DE ARMADO
   FRONTEND STYLES

   PARTE 3 DE 4

   RESPONSABILIDAD:
   - Alertas
   - Modales
   - Formularios modales
   - Configuración
   - Switches
   - Secciones config
   - Config tabs
   ========================================================= */


/* =========================================================
   ALERT LIST
   ========================================================= */

.ca-alert-list,
.ca-alerts-page-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   ALERT ITEM RESUMEN
   ========================================================= */

.ca-alert-item {
  display:
    grid;

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

  gap:
    9px;

  width:
    100%;

  padding:
    9px;

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

  border-radius:
    9px;

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


.ca-alert-item[data-severity="CRITICA"] {
  border-color:
    rgba(
      209,
      67,
      67,
      0.22
    );

  background:
    var(
      --ca-danger-soft
    );
}


.ca-alert-item[data-severity="ADVERTENCIA"] {
  border-color:
    rgba(
      214,
      138,
      0,
      0.22
    );

  background:
    var(
      --ca-warning-soft
    );
}


.ca-alert-item[data-severity="INFO"] {
  border-color:
    rgba(
      37,
      99,
      235,
      0.18
    );

  background:
    var(
      --ca-info-soft
    );
}


.ca-alert-item__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

  background:
    var(
      --ca-surface
    );

  color:
    var(
      --ca-text-soft
    );
}


.ca-alert-item[data-severity="CRITICA"]
.ca-alert-item__icon {
  color:
    var(
      --ca-danger
    );
}


.ca-alert-item[data-severity="ADVERTENCIA"]
.ca-alert-item__icon {
  color:
    var(
      --ca-warning
    );
}


.ca-alert-item[data-severity="INFO"]
.ca-alert-item__icon {
  color:
    var(
      --ca-info
    );
}


.ca-alert-item__body {
  min-width:
    0;
}


.ca-alert-item__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.ca-alert-item__header strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    800;

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


.ca-alert-item__body p {
  margin:
    5px 0 0;

  font-size:
    9.5px;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    var(
      --ca-text-soft
    );
}


.ca-alert-item__user {
  appearance:
    none;

  margin-top:
    7px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  font:
    inherit;

  font-size:
    9.5px;

  font-weight:
    750;

  color:
    var(
      --ca-info
    );

  cursor:
    pointer;
}


/* =========================================================
   ALERT CARD
   ========================================================= */

.ca-alert-card {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    10px;

  background:
    var(
      --ca-surface
    );

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


.ca-alert-card:hover {
  border-color:
    var(
      --ca-border-strong
    );

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


.ca-alert-card[data-severity="CRITICA"] {
  border-left:
    3px solid
    var(
      --ca-danger
    );
}


.ca-alert-card[data-severity="ADVERTENCIA"] {
  border-left:
    3px solid
    var(
      --ca-warning
    );
}


.ca-alert-card[data-severity="INFO"] {
  border-left:
    3px solid
    var(
      --ca-info
    );
}


.ca-alert-card__icon {
  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

  color:
    var(
      --ca-text-soft
    );
}


.ca-alert-card[data-severity="CRITICA"]
.ca-alert-card__icon {
  background:
    var(
      --ca-danger-soft
    );

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


.ca-alert-card[data-severity="ADVERTENCIA"]
.ca-alert-card__icon {
  background:
    var(
      --ca-warning-soft
    );

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


.ca-alert-card[data-severity="INFO"]
.ca-alert-card__icon {
  background:
    var(
      --ca-info-soft
    );

  color:
    var(
      --ca-info
    );
}


.ca-alert-card__body {
  min-width:
    0;
}


.ca-alert-card__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.ca-alert-card__badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.ca-alert-card__top h3 {
  margin:
    7px 0 0;

  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    850;

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


.ca-alert-card__value {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  flex-shrink:
    0;
}


.ca-alert-card__value strong {
  font-size:
    16px;

  line-height:
    1;

  font-weight:
    850;

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


.ca-alert-card__value span {
  font-size:
    8.5px;

  font-weight:
    700;

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


.ca-alert-card__message {
  margin:
    7px 0 0;

  font-size:
    10px;

  line-height:
    1.5;

  font-weight:
    600;

  color:
    var(
      --ca-text-soft
    );
}


.ca-alert-card__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    9px;

  padding-top:
    8px;

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


/* =========================================================
   ALERT TYPES SUMMARY
   ========================================================= */

.ca-alert-type-list {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;
}


.ca-alert-type-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 0;

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


.ca-alert-type-row:last-child {
  border-bottom:
    0;
}


.ca-alert-type-row > div:first-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ca-alert-type-row strong {
  font-size:
    10px;

  font-weight:
    800;

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


.ca-alert-type-row > div:first-child span {
  font-size:
    9px;

  font-weight:
    600;

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


.ca-alert-type-row__badges {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    4px;
}


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

.ca-modal-layer {
  position:
    fixed;

  inset:
    0;

  z-index:
    9000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  padding:
    18px;
}


.ca-modal-layer.is-open {
  display:
    flex;
}


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

.ca-modal-backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(
      4px
    );

  -webkit-backdrop-filter:
    blur(
      4px
    );
}


html[data-theme="dark"]
.ca-modal-backdrop,
body.dark
.ca-modal-backdrop,
body[data-theme="dark"]
.ca-modal-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.72
    );
}


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

.ca-modal {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      100%,
      680px
    );

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

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

  border-radius:
    14px;

  background:
    var(
      --ca-surface
    );

  box-shadow:
    var(
      --ca-shadow-md
    );

  overflow:
    hidden;

  animation:
    ca-modal-in
    160ms
    ease;
}


.ca-modal--md {
  width:
    min(
      100%,
      620px
    );
}


.ca-modal--lg {
  width:
    min(
      100%,
      840px
    );
}


.ca-modal--xl {
  width:
    min(
      100%,
      1180px
    );
}


@keyframes ca-modal-in {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      )
      scale(
        0.99
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


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

.ca-modal__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  flex-shrink:
    0;

  padding:
    13px 14px;

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

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


.ca-modal__header h2 {
  margin:
    0;

  font-size:
    16px;

  line-height:
    1.25;

  font-weight:
    850;

  letter-spacing:
    -0.02em;

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


.ca-modal__header p {
  margin:
    4px 0 0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;

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


.ca-modal__eyebrow {
  display:
    block;

  margin-bottom:
    4px;

  font-size:
    8.5px;

  font-weight:
    850;

  letter-spacing:
    0.12em;

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


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

.ca-modal__body {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


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

.ca-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin:
    15px -14px -14px;

  padding:
    10px 14px;

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

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


.ca-modal__footer-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


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

.ca-modal-user {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}


.ca-modal-user > div:last-child {
  min-width:
    0;
}


.ca-modal-user h2,
.ca-modal-user p {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.ca-modal-loading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    180px;

  font-size:
    10.5px;

  font-weight:
    700;

  color:
    var(
      --ca-text-soft
    );
}


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

.ca-modal-metrics {
  display:
    grid;

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

  gap:
    7px;

  margin-bottom:
    12px;
}


.ca-modal-metrics
.ca-metric-card {
  min-height:
    94px;

  padding:
    9px;
}


.ca-modal-metrics
.ca-metric-card__value {
  font-size:
    17px;
}


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

.ca-modal-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.25fr
    )
    minmax(
      0,
      0.75fr
    );

  gap:
    10px;

  width:
    100%;
}


/* =========================================================
   INTERVAL SUMMARY
   ========================================================= */

.ca-interval-summary {
  display:
    grid;

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

  gap:
    7px;

  margin-bottom:
    12px;
}


.ca-interval-summary > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    9px;

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

  border-radius:
    8px;

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


.ca-interval-summary span {
  font-size:
    8.5px;

  font-weight:
    700;

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


.ca-interval-summary strong {
  font-size:
    11.5px;

  font-weight:
    850;

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


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

.ca-form-grid {
  display:
    grid;

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

  gap:
    10px;
}


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


.ca-form-grid--three {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


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

.ca-config-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  width:
    100%;

  padding:
    3px;

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

  border-radius:
    9px;

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

  overflow-x:
    auto;
}


.ca-config-tab {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  flex:
    0 0 auto;

  min-height:
    29px;

  padding:
    5px 9px;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    750;

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

  cursor:
    pointer;

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


.ca-config-tab:hover {
  color:
    var(
      --ca-text
    );
}


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

  color:
    var(
      --ca-text
    );

  box-shadow:
    var(
      --ca-shadow-xs
    );
}


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

.ca-config-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;
}


/* =========================================================
   CONFIG SECTION
   ========================================================= */

.ca-config-section {
  width:
    100%;

  padding:
    12px;

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

  border-radius:
    10px;

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


.ca-config-section__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    11px;
}


.ca-config-section__header h3 {
  margin:
    0;

  font-size:
    11.5px;

  line-height:
    1.25;

  font-weight:
    850;

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


.ca-config-section__header p {
  margin:
    3px 0 0;

  font-size:
    9.5px;

  line-height:
    1.4;

  font-weight:
    600;

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


/* =========================================================
   CONFIG SWITCHES
   ========================================================= */

.ca-config-switches {
  display:
    grid;

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

  gap:
    7px;
}


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

.ca-switch-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    60px;

  padding:
    10px;

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

  border-radius:
    9px;

  background:
    var(
      --ca-surface
    );

  cursor:
    pointer;
}


.ca-switch-row__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ca-switch-row__body strong {
  font-size:
    10.5px;

  line-height:
    1.3;

  font-weight:
    800;

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


.ca-switch-row__body > span {
  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    600;

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


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

.ca-switch {
  position:
    relative;

  display:
    inline-flex;

  flex:
    0 0 auto;
}


.ca-switch input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.ca-switch__track {
  position:
    relative;

  display:
    block;

  width:
    34px;

  height:
    19px;

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

  border-radius:
    999px;

  background:
    var(
      --ca-border
    );

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


.ca-switch__thumb {
  position:
    absolute;

  top:
    2px;

  left:
    2px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    var(
      --ca-surface
    );

  box-shadow:
    0 1px 4px
    rgba(
      0,
      0,
      0,
      0.15
    );

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


.ca-switch input:checked +
.ca-switch__track {
  border-color:
    var(
      --ca-success
    );

  background:
    var(
      --ca-success
    );
}


.ca-switch input:checked +
.ca-switch__track
.ca-switch__thumb {
  transform:
    translateX(
      15px
    );
}


.ca-switch input:focus-visible +
.ca-switch__track {
  outline:
    2px solid
    var(
      --ca-info
    );

  outline-offset:
    2px;
}


/* =========================================================
   CONFIG ACTIONS
   ========================================================= */

.ca-config-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  width:
    100%;

  padding-top:
    2px;
}


/* =========================================================
   CONFIG LIST
   ========================================================= */

.ca-config-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   CONFIG TOOLBAR
   ========================================================= */

.ca-config-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;
}


.ca-config-toolbar > div:first-child {
  min-width:
    0;
}


.ca-config-toolbar h3 {
  margin:
    0;

  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    850;

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


.ca-config-toolbar p {
  margin:
    3px 0 0;

  font-size:
    9.5px;

  line-height:
    1.4;

  font-weight:
    600;

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


/* =========================================================
   CONFIG TABLES
   ========================================================= */

.ca-tab-content--config
.ca-table {
  min-width:
    980px;
}


.ca-tab-content--config
.ca-table tbody td {
  vertical-align:
    middle;
}


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

html[data-theme="dark"]
.ca-modal,
body.dark
.ca-modal,
body[data-theme="dark"]
.ca-modal {
  background:
    #090909;
}


html[data-theme="dark"]
.ca-modal__header,
body.dark
.ca-modal__header,
body[data-theme="dark"]
.ca-modal__header {
  background:
    #090909;
}


html[data-theme="dark"]
.ca-modal__footer,
body.dark
.ca-modal__footer,
body[data-theme="dark"]
.ca-modal__footer {
  background:
    #0d0d0d;
}


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

html[data-theme="dark"]
.ca-input,
html[data-theme="dark"]
.ca-select,
html[data-theme="dark"]
.ca-textarea,
body.dark
.ca-input,
body.dark
.ca-select,
body.dark
.ca-textarea,
body[data-theme="dark"]
.ca-input,
body[data-theme="dark"]
.ca-select,
body[data-theme="dark"]
.ca-textarea {
  color-scheme:
    dark;

  background:
    #0b0b0b;

  color:
    #f5f5f5;
}


html[data-theme="dark"]
.ca-select option,
body.dark
.ca-select option,
body[data-theme="dark"]
.ca-select option {
  background:
    #0b0b0b;

  color:
    #f5f5f5;
}


/* =========================================================
   DARK MODE CONFIG SECTION
   ========================================================= */

html[data-theme="dark"]
.ca-config-section,
body.dark
.ca-config-section,
body[data-theme="dark"]
.ca-config-section {
  background:
    #0c0c0c;
}


html[data-theme="dark"]
.ca-switch-row,
body.dark
.ca-switch-row,
body[data-theme="dark"]
.ca-switch-row {
  background:
    #090909;
}


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

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


  .ca-modal-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


@media (
  max-width:
  900px
) {
  .ca-form-grid--three {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ca-config-switches {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


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


@media (
  max-width:
  680px
) {
  .ca-modal-layer {
    align-items:
      flex-end;

    padding:
      0;
  }


  .ca-modal,
  .ca-modal--md,
  .ca-modal--lg,
  .ca-modal--xl {
    width:
      100%;

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

    border-radius:
      14px
      14px
      0
      0;
  }


  .ca-modal__header {
    padding:
      12px;
  }


  .ca-modal__body {
    padding:
      12px;
  }


  .ca-modal__footer {
    margin:
      14px -12px -12px;

    padding:
      10px 12px;
  }


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


  .ca-form-grid,
  .ca-form-grid--two,
  .ca-form-grid--three {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-field--span-2 {
    grid-column:
      auto;
  }


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


  .ca-config-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-config-toolbar
  .ca-button {
    width:
      100%;
  }


  .ca-alert-card__top {
    flex-direction:
      column;
  }


  .ca-alert-card__value {
    align-items:
      flex-start;
  }


  .ca-alert-card__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-modal__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .ca-modal__footer-actions {
    width:
      100%;
  }


  .ca-modal__footer-actions
  .ca-button {
    flex:
      1;
  }
}


/* =========================================================
   PARTE 3 DE 4 FINALIZADA
   CONTINÚA EN PARTE 4
   ========================================================= *//* =========================================================
   WIRTZ HUB · MI GESTIÓN · CONTROL DE ARMADO
   FRONTEND STYLES

   PARTE 4 DE 4

   RESPONSABILIDAD:
   - Responsive completo
   - Ajustes de ancho
   - Mobile
   - Dark mode final
   - Estados hover/focus
   - Correcciones visuales
   - Sin scroll horizontal de página
   ========================================================= */


/* =========================================================
   ROOT OVERFLOW SAFETY
   ========================================================= */

html,
body {
  max-width:
    100%;
}


.control-armado-page {
  max-width:
    100%;

  overflow-x:
    clip;
}


.control-armado-page
> * {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   CONTENT SAFETY
   ========================================================= */

.ca-page-shell,
.ca-content,
.ca-tab-content,
.ca-dashboard-grid,
.ca-panel,
.ca-panel__body,
.ca-panel__header,
.ca-filters,
.ca-filters__grid,
.ca-metrics-grid {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   TABLE ONLY SCROLLS INTERNALLY
   ========================================================= */

.ca-table-wrap {
  max-width:
    100%;

  overflow-x:
    auto;

  overscroll-behavior-x:
    contain;
}


.ca-table-wrap::-webkit-scrollbar {
  height:
    7px;
}


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

@media (
  max-width:
  1280px
) {
  .ca-page-header__title-row {
    align-items:
      flex-start;
  }


  .ca-page-header__actions {
    flex-wrap:
      wrap;
  }
}


@media (
  max-width:
  900px
) {
  .ca-page-header {
    padding:
      10px 10px 0;
  }


  .ca-page-header__main {
    padding:
      12px;
  }


  .ca-page-header__title-row {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      12px;
  }


  .ca-page-header__actions {
    justify-content:
      flex-start;
  }


  .ca-page-shell {
    padding:
      10px 10px 18px;
  }
}


@media (
  max-width:
  560px
) {
  .ca-page-header__title {
    font-size:
      19px;
  }


  .ca-page-header__description {
    font-size:
      11px;
  }


  .ca-page-header__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .ca-page-header__actions
  .ca-button {
    width:
      100%;
  }
}


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

@media (
  max-width:
  1000px
) {
  .ca-tabs {
    justify-content:
      flex-start;
  }


  .ca-tab {
    min-width:
      max-content;
  }
}


@media (
  max-width:
  560px
) {
  .ca-tabs {
    margin-bottom:
      9px;

    padding:
      3px;
  }


  .ca-tab {
    min-height:
      30px;

    padding:
      6px 8px;

    font-size:
      10px;
  }


  .ca-tab svg {
    width:
      14px;

    height:
      14px;
  }
}


/* =========================================================
   FILTER RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1700px
) {
  .ca-filters__grid {
    grid-template-columns:
      minmax(
        180px,
        1.4fr
      )
      repeat(
        4,
        minmax(
          120px,
          1fr
        )
      );
  }
}


@media (
  max-width:
  1180px
) {
  .ca-filters__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ca-field--search {
    grid-column:
      span 2;
  }
}


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


  .ca-filters__top {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


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


  .ca-field--search {
    grid-column:
      span 2;
  }
}


@media (
  max-width:
  500px
) {
  .ca-filters__grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-field--search {
    grid-column:
      auto;
  }


  .ca-date-presets {
    width:
      100%;
  }


  .ca-date-preset {
    flex:
      1;
  }


  .ca-filters__top
  .ca-button {
    width:
      100%;
  }
}


/* =========================================================
   METRIC GRID RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1650px
) {
  .ca-metrics-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  900px
) {
  .ca-metrics-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  470px
) {
  .ca-metrics-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-metric-card {
    min-height:
      90px;
  }
}


/* =========================================================
   DASHBOARD GRID RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .ca-dashboard-grid--main,
  .ca-dashboard-grid--idle,
  .ca-dashboard-grid--alerts {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-dashboard-grid--three {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  760px
) {
  .ca-dashboard-grid--three {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-dashboard-grid--full {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


/* =========================================================
   PANEL HEADER RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .ca-panel__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-panel__header--with-subtabs {
    align-items:
      stretch;
  }


  .ca-panel__header
  .ca-subtabs {
    width:
      100%;

    overflow-x:
      auto;
  }


  .ca-panel__header
  .ca-inline-filters {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .ca-panel__header
  .ca-inline-filters
  .ca-field {
    flex:
      1;
  }
}


/* =========================================================
   TABLE RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .ca-table {
    font-size:
      10px;
  }


  .ca-table thead th {
    padding:
      8px;

    font-size:
      9px;
  }


  .ca-table tbody td {
    padding:
      8px;

    font-size:
      10px;
  }


  .ca-table-wrap {
    border-radius:
      0 0
      var(
        --ca-radius-lg
      )
      var(
        --ca-radius-lg
      );
  }
}


/* =========================================================
   USERS TABLE WIDTH
   ========================================================= */

@media (
  max-width:
  900px
) {
  .ca-table--users {
    min-width:
      1240px;
  }
}


/* =========================================================
   CHANNEL RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1100px
) {
  .ca-channel-grid,
  .ca-channel-grid--large {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  580px
) {
  .ca-channel-grid,
  .ca-channel-grid--large {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


/* =========================================================
   FULL RESPONSIVE
   ========================================================= */

@media (
  max-width:
  560px
) {
  .ca-full-compliance {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-full-compliance__value {
    min-width:
      0;
  }


  .ca-full-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ca-full-summary__metric--wide {
    grid-column:
      auto;
  }
}


/* =========================================================
   PEAK HOUR RESPONSIVE
   ========================================================= */

@media (
  max-width:
  720px
) {
  .ca-peak-hour {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-peak-hour__stats {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
  420px
) {
  .ca-peak-hour__stats {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


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

@media (
  max-width:
  520px
) {
  .ca-timeline__item {
    grid-template-columns:
      48px
      14px
      minmax(
        0,
        1fr
      );

    gap:
      6px;
  }


  .ca-timeline__time {
    font-size:
      8.5px;
  }
}


/* =========================================================
   COMPARISON RESPONSIVE
   ========================================================= */

@media (
  max-width:
  620px
) {
  .ca-comparison-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      62px
      62px;
  }


  .ca-comparison-row__historical {
    display:
      none;
  }
}


/* =========================================================
   PAGINATION RESPONSIVE
   ========================================================= */

@media (
  max-width:
  620px
) {
  .ca-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-pagination__controls {
    width:
      100%;

    overflow-x:
      auto;

    padding-bottom:
      2px;
  }
}


/* =========================================================
   CONFIG RESPONSIVE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .ca-config-tabs {
    overflow-x:
      auto;
  }


  .ca-config-section {
    padding:
      10px;
  }


  .ca-config-switches {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


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

@media (
  max-width:
  480px
) {
  .ca-switch-row {
    gap:
      10px;

    min-height:
      56px;

    padding:
      9px;
  }
}


/* =========================================================
   MODAL SAFE HEIGHT
   ========================================================= */

.ca-modal {
  max-height:
    min(
      calc(
        100vh -
        28px
      ),
      920px
    );
}


@supports (
  height:
  100dvh
) {
  .ca-modal {
    max-height:
      min(
        calc(
          100dvh -
          28px
        ),
        920px
      );
  }
}


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

.ca-modal__header {
  position:
    sticky;

  top:
    0;

  z-index:
    4;
}


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

.ca-modal__footer {
  position:
    sticky;

  bottom:
    -14px;

  z-index:
    4;
}


/* =========================================================
   MODAL MOBILE FULL WIDTH
   ========================================================= */

@media (
  max-width:
  680px
) {
  .ca-modal-layer {
    z-index:
      9999;
  }


  .ca-modal {
    max-height:
      calc(
        100dvh -
        8px
      );
  }


  .ca-modal__header h2 {
    font-size:
      14px;
  }


  .ca-modal__body {
    overscroll-behavior:
      contain;
  }
}


/* =========================================================
   CONFIG FORM MOBILE
   ========================================================= */

@media (
  max-width:
  520px
) {
  .ca-config-actions
  .ca-button {
    width:
      100%;
  }
}


/* =========================================================
   ALERT RESPONSIVE
   ========================================================= */

@media (
  max-width:
  520px
) {
  .ca-alert-item {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      );

    gap:
      7px;
  }


  .ca-alert-item__icon {
    width:
      28px;

    height:
      28px;
  }


  .ca-alert-card {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );

    gap:
      8px;

    padding:
      9px;
  }


  .ca-alert-card__icon {
    width:
      32px;

    height:
      32px;
  }


  .ca-alert-type-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ca-alert-type-row__badges {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   RANKING RESPONSIVE
   ========================================================= */

@media (
  max-width:
  480px
) {
  .ca-ranking-row {
    grid-template-columns:
      24px
      minmax(
        0,
        1fr
      );

    gap:
      7px;
  }


  .ca-ranking-row
  > .ca-badge {
    grid-column:
      2;

    justify-self:
      start;
  }
}


/* =========================================================
   HOVER ONLY WHEN POINTER EXISTS
   ========================================================= */

@media (
  hover:
  hover
) {
  .ca-panel {
    transition:
      border-color
      var(
        --ca-transition
      ),
      box-shadow
      var(
        --ca-transition
      );
  }


  .ca-panel:hover {
    border-color:
      var(
        --ca-border-strong
      );
  }


  .ca-metric-card {
    transition:
      border-color
      var(
        --ca-transition
      ),
      transform
      var(
        --ca-transition
      );
  }


  .ca-metric-card:hover {
    border-color:
      var(
        --ca-border-strong
      );

    transform:
      translateY(
        -1px
      );
  }
}


/* =========================================================
   DARK MODE TRUE BLACK POLISH
   ========================================================= */

html[data-theme="dark"]
.control-armado-page,
body.dark
.control-armado-page,
body[data-theme="dark"]
.control-armado-page {
  background:
    #050505;
}


html[data-theme="dark"]
.ca-page-header__main,
html[data-theme="dark"]
.ca-filters,
html[data-theme="dark"]
.ca-tabs,
html[data-theme="dark"]
.ca-panel,
html[data-theme="dark"]
.ca-metric-card,
body.dark
.ca-page-header__main,
body.dark
.ca-filters,
body.dark
.ca-tabs,
body.dark
.ca-panel,
body.dark
.ca-metric-card,
body[data-theme="dark"]
.ca-page-header__main,
body[data-theme="dark"]
.ca-filters,
body[data-theme="dark"]
.ca-tabs,
body[data-theme="dark"]
.ca-panel,
body[data-theme="dark"]
.ca-metric-card {
  background:
    #090909;
}


html[data-theme="dark"]
.ca-surface,
body.dark
.ca-surface,
body[data-theme="dark"]
.ca-surface {
  background:
    #090909;
}


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

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

  color:
    #050505;
}


html[data-theme="dark"]
.ca-tab:hover:not(
  .is-active
),
body.dark
.ca-tab:hover:not(
  .is-active
),
body[data-theme="dark"]
.ca-tab:hover:not(
  .is-active
) {
  background:
    #121212;
}


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

html[data-theme="dark"]
.ca-button--primary,
body.dark
.ca-button--primary,
body[data-theme="dark"]
.ca-button--primary {
  border-color:
    #f4f4f4;

  background:
    #f4f4f4;

  color:
    #050505;
}


html[data-theme="dark"]
.ca-button--primary:hover,
body.dark
.ca-button--primary:hover,
body[data-theme="dark"]
.ca-button--primary:hover {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"]
.ca-button--secondary,
html[data-theme="dark"]
.ca-icon-button,
body.dark
.ca-button--secondary,
body.dark
.ca-icon-button,
body[data-theme="dark"]
.ca-button--secondary,
body[data-theme="dark"]
.ca-icon-button {
  background:
    #0b0b0b;
}


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

html[data-theme="dark"]
.ca-channel-card,
html[data-theme="dark"]
.ca-full-summary__metric,
html[data-theme="dark"]
.ca-peak-hour__stats > div,
html[data-theme="dark"]
.ca-jornada-breakdown__item,
html[data-theme="dark"]
.ca-interval-summary > div,
body.dark
.ca-channel-card,
body.dark
.ca-full-summary__metric,
body.dark
.ca-peak-hour__stats > div,
body.dark
.ca-jornada-breakdown__item,
body.dark
.ca-interval-summary > div,
body[data-theme="dark"]
.ca-channel-card,
body[data-theme="dark"]
.ca-full-summary__metric,
body[data-theme="dark"]
.ca-peak-hour__stats > div,
body[data-theme="dark"]
.ca-jornada-breakdown__item,
body[data-theme="dark"]
.ca-interval-summary > div {
  background:
    #0d0d0d;
}


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

html[data-theme="dark"]
.ca-table tbody tr,
body.dark
.ca-table tbody tr,
body[data-theme="dark"]
.ca-table tbody tr {
  background:
    #090909;
}


html[data-theme="dark"]
.ca-table tbody tr:hover,
body.dark
.ca-table tbody tr:hover,
body[data-theme="dark"]
.ca-table tbody tr:hover {
  background:
    #101010;
}


/* =========================================================
   DARK MODE SEARCH INPUT AUTOFILL
   ========================================================= */

html[data-theme="dark"]
.control-armado-page
input:-webkit-autofill,
html[data-theme="dark"]
.control-armado-page
input:-webkit-autofill:hover,
html[data-theme="dark"]
.control-armado-page
input:-webkit-autofill:focus,
body.dark
.control-armado-page
input:-webkit-autofill,
body.dark
.control-armado-page
input:-webkit-autofill:hover,
body.dark
.control-armado-page
input:-webkit-autofill:focus,
body[data-theme="dark"]
.control-armado-page
input:-webkit-autofill,
body[data-theme="dark"]
.control-armado-page
input:-webkit-autofill:hover,
body[data-theme="dark"]
.control-armado-page
input:-webkit-autofill:focus {
  -webkit-text-fill-color:
    #f5f5f5;

  box-shadow:
    0 0 0 1000px
    #0b0b0b
    inset;

  transition:
    background-color
    9999s
    ease-in-out
    0s;
}


/* =========================================================
   DATE/TIME CONTROLS DARK
   ========================================================= */

html[data-theme="dark"]
.control-armado-page
input[type="date"],
html[data-theme="dark"]
.control-armado-page
input[type="time"],
body.dark
.control-armado-page
input[type="date"],
body.dark
.control-armado-page
input[type="time"],
body[data-theme="dark"]
.control-armado-page
input[type="date"],
body[data-theme="dark"]
.control-armado-page
input[type="time"] {
  color-scheme:
    dark;
}


/* =========================================================
   COLOR CONSISTENCY
   ========================================================= */

.ca-panel,
.ca-metric-card,
.ca-channel-card,
.ca-alert-card,
.ca-alert-item,
.ca-config-section,
.ca-switch-row,
.ca-modal {
  color:
    var(
      --ca-text
    );
}


/* =========================================================
   FONT WEIGHT CONSISTENCY
   ========================================================= */

.ca-table,
.ca-input,
.ca-select,
.ca-textarea,
.ca-button,
.ca-tab,
.ca-subtab,
.ca-config-tab {
  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


/* =========================================================
   NO LARGE TYPOGRAPHY
   ========================================================= */

.ca-page-header__title,
.ca-metric-card__value,
.ca-channel-card__main-value strong,
.ca-full-compliance__value,
.ca-peak-hour__time {
  text-rendering:
    geometricPrecision;
}


/* =========================================================
   POINTER
   ========================================================= */

.ca-tab,
.ca-subtab,
.ca-config-tab,
.ca-button,
.ca-icon-button,
.ca-user-link,
.ca-ranking-row,
.ca-date-preset,
.ca-alert-item__user {
  -webkit-tap-highlight-color:
    transparent;
}


/* =========================================================
   TOUCH TARGETS
   ========================================================= */

@media (
  pointer:
  coarse
) {
  .ca-button {
    min-height:
      38px;
  }


  .ca-icon-button {
    width:
      34px;

    height:
      34px;
  }


  .ca-tab {
    min-height:
      35px;
  }


  .ca-subtab,
  .ca-config-tab {
    min-height:
      33px;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .control-armado-page {
    background:
      #ffffff !important;

    color:
      #000000 !important;

    overflow:
      visible !important;
  }


  .ca-page-header__actions,
  .ca-tabs,
  .ca-filters,
  .ca-pagination,
  .ca-modal-layer,
  .ca-button,
  .ca-icon-button,
  .ca-text-button {
    display:
      none !important;
  }


  .ca-page-shell,
  .ca-page-header {
    padding:
      0 !important;
  }


  .ca-panel,
  .ca-metric-card,
  .ca-page-header__main {
    border:
      1px solid
      #cccccc !important;

    box-shadow:
      none !important;

    break-inside:
      avoid;
  }


  .ca-table-wrap {
    overflow:
      visible !important;
  }


  .ca-table {
    min-width:
      0 !important;

    width:
      100% !important;
  }


  .ca-table thead th {
    position:
      static !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   FINAL WIDTH FIX
   ========================================================= */

.control-armado-page
.ca-table-wrap,
.control-armado-page
.ca-panel,
.control-armado-page
.ca-content,
.control-armado-page
.ca-tab-content {
  width:
    100%;
}


.control-armado-page
.ca-panel--wide {
  min-width:
    0;
}


/* =========================================================
   FINAL MOBILE SPACING
   ========================================================= */

@media (
  max-width:
  500px
) {
  .ca-page-shell {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .ca-page-header {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .ca-panel__header {
    padding:
      10px;
  }


  .ca-panel__body {
    padding:
      10px;
  }


  .ca-panel__body--flush {
    padding:
      0;
  }


  .ca-metric-card {
    padding:
      10px;
  }


  .ca-metric-card__value {
    font-size:
      18px;
  }


  .ca-button {
    font-size:
      11px;
  }
}


/* =========================================================
   FINAL TRUE BLACK
   ========================================================= */

html[data-theme="dark"]
.control-armado-page,
body.dark
.control-armado-page,
body[data-theme="dark"]
.control-armado-page {
  background-color:
    #050505 !important;
}


html[data-theme="dark"]
.ca-page-header__main,
html[data-theme="dark"]
.ca-tabs,
html[data-theme="dark"]
.ca-filters,
html[data-theme="dark"]
.ca-panel,
html[data-theme="dark"]
.ca-modal,
body.dark
.ca-page-header__main,
body.dark
.ca-tabs,
body.dark
.ca-filters,
body.dark
.ca-panel,
body.dark
.ca-modal,
body[data-theme="dark"]
.ca-page-header__main,
body[data-theme="dark"]
.ca-tabs,
body[data-theme="dark"]
.ca-filters,
body[data-theme="dark"]
.ca-panel,
body[data-theme="dark"]
.ca-modal {
  background-color:
    #090909;
}



.ca-page-section {
  width: 100%;
  min-width: 0;

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


.ca-page-section--header {
  padding:
    0 0 12px;

  margin-bottom:
    12px;
}


.ca-page-section--navigation {
  padding-bottom:
    12px;

  margin-bottom:
    12px;
}


.ca-page-section--filters {
  padding-bottom:
    12px;

  margin-bottom:
    12px;
}


.ca-page-section--content {
  padding-top:
    2px;

  border-bottom:
    0;
}


.ca-page-header {
  padding:
    0;
}


.ca-page-header__main {
  border-color:
    var(
      --ca-border-strong
    );

  border-radius:
    10px;

  box-shadow:
    none;
}


.ca-page-shell {
  padding:
    0;
}


.ca-tabs {
  margin-bottom:
    0;

  border-color:
    var(
      --ca-border-strong
    );

  box-shadow:
    none;
}


.ca-filters {
  margin-bottom:
    0;

  border-color:
    var(
      --ca-border-strong
    );

  box-shadow:
    none;
}


.ca-panel {
  border-color:
    var(
      --ca-border-strong
    );

  box-shadow:
    none;
}


.ca-panel__header {
  border-bottom:
    1px solid
    var(
      --ca-border-strong
    );
}


.ca-metric-card {
  border-color:
    var(
      --ca-border-strong
    );

  box-shadow:
    none;
}


.ca-table-wrap {
  border:
    1px solid
    var(
      --ca-border-strong
    );

  border-radius:
    10px;

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


.ca-table thead th {
  border-bottom:
    1px solid
    var(
      --ca-border-strong
    );

  font-size:
    10px;

  font-weight:
    900;

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


.ca-table tbody td {
  font-size:
    11px;

  font-weight:
    700;

  color:
    var(
      --ca-text-soft
    );
}


.ca-table tbody tr {
  transition:
    background-color
    80ms
    linear;
}


.ca-page-header__eyebrow {
  font-weight:
    900;
}


.ca-page-header__title {
  font-weight:
    900;
}


.ca-page-header__description {
  font-weight:
    650;
}


.ca-tab {
  font-weight:
    800;

  transition:
    background-color
      80ms
      linear,
    color
      80ms
      linear;
}


.ca-subtab,
.ca-config-tab {
  font-weight:
    800;

  transition:
    background-color
      80ms
      linear,
    color
      80ms
      linear;
}


.ca-field__label {
  font-weight:
    850;

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


.ca-input,
.ca-select,
.ca-textarea {
  font-weight:
    700;

  transition:
    border-color
      80ms
      linear,
    box-shadow
      80ms
      linear,
    background-color
      80ms
      linear;
}


.ca-button {
  font-weight:
    800;

  transition:
    background-color
      80ms
      linear,
    border-color
      80ms
      linear,
    color
      80ms
      linear;
}


.ca-text-button {
  font-weight:
    800;

  transition:
    color
    80ms
    linear;
}


.ca-icon-button {
  transition:
    background-color
      80ms
      linear,
    border-color
      80ms
      linear,
    color
      80ms
      linear;
}


.ca-metric-card__label {
  font-weight:
    850;

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


.ca-metric-card__value {
  font-weight:
    900;
}


.ca-metric-card__secondary {
  font-weight:
    700;
}


.ca-panel__header h2,
.ca-panel__header h3 {
  font-weight:
    900;
}


.ca-panel__header p {
  font-weight:
    700;
}


.ca-badge,
.ca-channel-badge {
  font-weight:
    900;
}


.ca-ranking-row__header strong {
  font-weight:
    900;
}


.ca-ranking-row__meta {
  font-weight:
    700;
}


.ca-user-link__body strong {
  font-weight:
    900;
}


.ca-user-link__body small {
  font-weight:
    700;
}


.ca-cell-main,
.ca-duration-value {
  font-weight:
    850;
}


.ca-alert-item__header strong,
.ca-alert-card__top h3 {
  font-weight:
    900;
}


.ca-alert-item__body p,
.ca-alert-card__message {
  font-weight:
    700;
}


.ca-config-section {
  border-color:
    var(
      --ca-border-strong
    );
}


.ca-switch-row {
  border-color:
    var(
      --ca-border-strong
    );
}


.ca-switch-row__body strong {
  font-weight:
    900;
}


.ca-switch-row__body > span {
  font-weight:
    700;
}


.ca-config-toolbar h3,
.ca-config-section__header h3 {
  font-weight:
    900;
}


.ca-config-toolbar p,
.ca-config-section__header p {
  font-weight:
    700;
}


.ca-progress__fill {
  transition:
    width
    100ms
    linear;
}


.ca-modal {
  border-color:
    var(
      --ca-border-strong
    );

  box-shadow:
    0 12px 32px
    rgba(
      0,
      0,
      0,
      0.16
    );

  animation:
    none;
}


.ca-modal-backdrop {
  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ca-loading__spinner {
  animation-duration:
    0.55s;
}


.control-armado-page *,
.control-armado-page *::before,
.control-armado-page *::after {
  animation-duration:
    100ms;

  transition-duration:
    80ms;
}


html[data-theme="dark"]
.ca-page-section,
body.dark
.ca-page-section,
body[data-theme="dark"]
.ca-page-section {
  border-bottom-color:
    #2a2a2a;
}


html[data-theme="dark"]
.ca-page-header__main,
html[data-theme="dark"]
.ca-tabs,
html[data-theme="dark"]
.ca-filters,
html[data-theme="dark"]
.ca-panel,
html[data-theme="dark"]
.ca-metric-card,
html[data-theme="dark"]
.ca-table-wrap,
body.dark
.ca-page-header__main,
body.dark
.ca-tabs,
body.dark
.ca-filters,
body.dark
.ca-panel,
body.dark
.ca-metric-card,
body.dark
.ca-table-wrap,
body[data-theme="dark"]
.ca-page-header__main,
body[data-theme="dark"]
.ca-tabs,
body[data-theme="dark"]
.ca-filters,
body[data-theme="dark"]
.ca-panel,
body[data-theme="dark"]
.ca-metric-card,
body[data-theme="dark"]
.ca-table-wrap {
  border-color:
    #2a2a2a;
}


html[data-theme="dark"]
.ca-panel__header,
body.dark
.ca-panel__header,
body[data-theme="dark"]
.ca-panel__header {
  border-bottom-color:
    #2a2a2a;
}


html[data-theme="dark"]
.ca-table thead th,
body.dark
.ca-table thead th,
body[data-theme="dark"]
.ca-table thead th {
  border-bottom-color:
    #2a2a2a;

  color:
    #f5f5f5;
}


html[data-theme="dark"]
.ca-table tbody td,
body.dark
.ca-table tbody td,
body[data-theme="dark"]
.ca-table tbody td {
  border-bottom-color:
    #202020;

  color:
    #d0d0d0;
}


html[data-theme="dark"]
.ca-field__label,
body.dark
.ca-field__label,
body[data-theme="dark"]
.ca-field__label {
  color:
    #e8e8e8;
}


html[data-theme="dark"]
.ca-metric-card__label,
body.dark
.ca-metric-card__label,
body[data-theme="dark"]
.ca-metric-card__label {
  color:
    #dedede;
}


@media (
  max-width:
  900px
) {
  .ca-page-section--header,
  .ca-page-section--navigation,
  .ca-page-section--filters {
    padding-bottom:
      10px;

    margin-bottom:
      10px;
  }
}