/* =========================================================
   WIRTZ HUB · OPERACIONES
   MANTENIMIENTO Y SERVICIOS

   UBICACIÓN:
   frontend/src/pages/operaciones/mantenimiento-servicios/
   mantenimiento-servicios.css

   PARTE 1 DE 4

   BASE
   LAYOUT
   HEADER
   BOTONES
   MÉTRICAS
   TABS
   FILTROS
   LISTADO
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {
  --maintenance-bg:
    #f5f6f8;

  --maintenance-surface:
    #ffffff;

  --maintenance-surface-soft:
    #f8f9fb;

  --maintenance-surface-muted:
    #f1f3f5;

  --maintenance-border:
    #e2e5e9;

  --maintenance-border-strong:
    #d5d9df;

  --maintenance-text:
    #16181c;

  --maintenance-text-soft:
    #5f6670;

  --maintenance-text-muted:
    #8a919c;

  --maintenance-primary:
    #111317;

  --maintenance-primary-hover:
    #22262d;

  --maintenance-success:
    #218356;

  --maintenance-success-bg:
    #eaf7f0;

  --maintenance-warning:
    #a66a00;

  --maintenance-warning-bg:
    #fff5dd;

  --maintenance-danger:
    #b73838;

  --maintenance-danger-bg:
    #fff0f0;

  --maintenance-info:
    #3868b2;

  --maintenance-info-bg:
    #eef4ff;

  --maintenance-ai:
    #7252a5;

  --maintenance-ai-bg:
    #f4effb;

  --maintenance-radius-xs:
    6px;

  --maintenance-radius-sm:
    8px;

  --maintenance-radius-md:
    10px;

  --maintenance-radius-lg:
    14px;

  --maintenance-radius-xl:
    18px;

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


/* =========================================================
   02. DARK
   ========================================================= */

:root[data-theme="dark"],
html.dark,
body.dark {
  --maintenance-bg:
    #050505;

  --maintenance-surface:
    #0a0a0a;

  --maintenance-surface-soft:
    #0e0e0e;

  --maintenance-surface-muted:
    #121212;

  --maintenance-border:
    #202020;

  --maintenance-border-strong:
    #2b2b2b;

  --maintenance-text:
    #f5f5f5;

  --maintenance-text-soft:
    #b6b6b6;

  --maintenance-text-muted:
    #777777;

  --maintenance-primary:
    #f3f3f3;

  --maintenance-primary-hover:
    #ffffff;

  --maintenance-success:
    #66c58d;

  --maintenance-success-bg:
    #0d2016;

  --maintenance-warning:
    #e3ad52;

  --maintenance-warning-bg:
    #221908;

  --maintenance-danger:
    #ec7c7c;

  --maintenance-danger-bg:
    #240c0c;

  --maintenance-info:
    #77a9ff;

  --maintenance-info-bg:
    #0d1728;

  --maintenance-ai:
    #b294e4;

  --maintenance-ai-bg:
    #191223;
}


/* =========================================================
   03. BASE
   ========================================================= */

.maintenance-page,
.maintenance-page *,
.maintenance-modal-root,
.maintenance-modal-root * {
  box-sizing:
    border-box;

  font-family:
    var(
      --maintenance-font
    );

  font-synthesis:
    none;
}


.maintenance-page {
  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  padding:
    22px;

  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-bg
    );
}


.maintenance-page button,
.maintenance-page input,
.maintenance-page select,
.maintenance-page textarea,
.maintenance-modal-root button,
.maintenance-modal-root input,
.maintenance-modal-root select,
.maintenance-modal-root textarea {
  font:
    inherit;
}


.maintenance-page button,
.maintenance-modal-root button {
  border:
    0;

  cursor:
    pointer;
}


.maintenance-page input,
.maintenance-page select,
.maintenance-page textarea,
.maintenance-modal-root input,
.maintenance-modal-root select,
.maintenance-modal-root textarea {
  outline:
    none;
}


.maintenance-page .icon,
.maintenance-modal-root .icon {
  width:
    18px;

  height:
    18px;

  min-width:
    18px;

  stroke-width:
    1.8;
}


/* =========================================================
   04. PAGE HEADER
   ========================================================= */

.maintenance-page-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  width:
    100%;

  margin-bottom:
    20px;

  padding:
    22px;

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

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

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


.maintenance-page-head__identity {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    16px;

  min-width:
    0;
}


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

  align-items:
    center;

  justify-content:
    center;

  width:
    44px;

  height:
    44px;

  min-width:
    44px;

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

  border-radius:
    12px;

  color:
    var(
      --maintenance-text
    );

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


.maintenance-page-head__icon .icon {
  width:
    21px;

  height:
    21px;
}


.maintenance-page-head__copy {
  min-width:
    0;
}


.maintenance-page-head__eyebrow {
  display:
    block;

  margin-bottom:
    5px;

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

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    0.08em;
}


.maintenance-page-head h1 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    clamp(
      25px,
      2.2vw,
      34px
    );

  font-weight:
    700;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


.maintenance-page-head p {
  max-width:
    760px;

  margin:
    8px 0 0;

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

  font-size:
    14px;

  line-height:
    1.55;
}


.maintenance-page-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex-shrink:
    0;
}


/* =========================================================
   05. BOTONES
   ========================================================= */

.maintenance-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    40px;

  padding:
    9px 14px;

  border:
    1px solid
    var(
      --maintenance-border-strong
    ) !important;

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

  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-surface
    );

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    background-color
      0.15s ease,
    border-color
      0.15s ease,
    color
      0.15s ease,
    transform
      0.1s ease;
}


.maintenance-btn:hover {
  border-color:
    var(
      --maintenance-text-muted
    ) !important;

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


.maintenance-btn:active {
  transform:
    translateY(
      1px
    );
}


.maintenance-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    0.5;

  transform:
    none;
}


.maintenance-btn--primary {
  border-color:
    var(
      --maintenance-primary
    ) !important;

  color:
    var(
      --maintenance-surface
    );

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


:root[data-theme="dark"]
  .maintenance-btn--primary,
html.dark
  .maintenance-btn--primary,
body.dark
  .maintenance-btn--primary {
  color:
    #050505;
}


.maintenance-btn--primary:hover {
  border-color:
    var(
      --maintenance-primary-hover
    ) !important;

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


.maintenance-btn--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-danger
      )
      45%,
      transparent
    ) !important;

  color:
    var(
      --maintenance-danger
    );

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


.maintenance-btn--small {
  min-height:
    34px;

  padding:
    7px 10px;

  font-size:
    12px;
}


/* =========================================================
   06. MÉTRICAS
   ========================================================= */

.maintenance-metrics {
  display:
    grid;

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

  gap:
    12px;

  width:
    100%;

  margin-bottom:
    20px;
}


.maintenance-metric {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  min-width:
    0;

  min-height:
    112px;

  padding:
    16px;

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

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

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


.maintenance-metric__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  min-width:
    36px;

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

  border-radius:
    10px;

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

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


.maintenance-metric__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-metric__content small {
  margin-bottom:
    5px;

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

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.25;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}


.maintenance-metric__content strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    21px;

  font-weight:
    720;

  line-height:
    1.15;

  overflow-wrap:
    anywhere;
}


.maintenance-metric__content span {
  margin-top:
    5px;

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

  font-size:
    12px;

  line-height:
    1.35;
}


/* =========================================================
   07. WORKSPACE
   ========================================================= */

.maintenance-workspace {
  width:
    100%;

  min-width:
    0;

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

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

  overflow:
    hidden;

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


/* =========================================================
   08. TABS
   ========================================================= */

.maintenance-tabs {
  display:
    grid;

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

  width:
    100%;

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

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


.maintenance-tab {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    9px;

  min-width:
    0;

  min-height:
    64px;

  padding:
    10px 12px;

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

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

  background:
    transparent;

  text-align:
    left;

  transition:
    background-color
      0.15s ease,
    color
      0.15s ease;
}


.maintenance-tab:last-child {
  border-right:
    0 !important;
}


.maintenance-tab:hover {
  color:
    var(
      --maintenance-text
    );

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


.maintenance-tab.is-active {
  color:
    var(
      --maintenance-text
    );

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


.maintenance-tab.is-active::after {
  position:
    absolute;

  right:
    12px;

  bottom:
    0;

  left:
    12px;

  height:
    2px;

  border-radius:
    99px;

  background:
    var(
      --maintenance-primary
    );

  content:
    "";
}


.maintenance-tab__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;
}


.maintenance-tab__text {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-tab__text strong {
  overflow:
    hidden;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-tab__text small {
  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   09. ACTIVE TAB
   ========================================================= */

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

  min-width:
    0;
}


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

  min-width:
    0;

  padding:
    18px;
}


/* =========================================================
   10. FILTROS
   ========================================================= */

.maintenance-filters {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    100%;

  margin-bottom:
    14px;
}


.maintenance-filters__primary {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1.6fr
    )
    repeat(
      3,
      minmax(
        150px,
        0.7fr
      )
    )
    auto;

  gap:
    8px;

  width:
    100%;
}


.maintenance-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-width:
    0;
}


.maintenance-search .icon {
  position:
    absolute;

  left:
    12px;

  width:
    17px;

  height:
    17px;

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

  pointer-events:
    none;
}


.maintenance-search input {
  width:
    100%;

  height:
    40px;

  padding:
    0 12px
    0 38px;

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

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

  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-surface
    );

  font-size:
    13px;
}


.maintenance-search input::placeholder {
  color:
    var(
      --maintenance-text-muted
    );
}


.maintenance-select,
.maintenance-filters select,
.maintenance-field select,
.maintenance-field input,
.maintenance-field textarea {
  width:
    100%;

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

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

  color:
    var(
      --maintenance-text
    );

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


.maintenance-select,
.maintenance-filters select {
  min-height:
    40px;

  padding:
    0 11px;

  font-size:
    13px;
}


.maintenance-filters__advanced {
  display:
    grid;

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

  gap:
    10px;

  padding:
    14px;

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

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

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


.maintenance-filters__advanced[hidden] {
  display:
    none;
}


.maintenance-filters__actions {
  display:
    flex;

  align-items:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   11. FIELD
   ========================================================= */

.maintenance-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}


.maintenance-field > span {
  color:
    var(
      --maintenance-text-soft
    );

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.2;
}


.maintenance-field input,
.maintenance-field select {
  min-height:
    40px;

  padding:
    0 11px;

  font-size:
    13px;
}


.maintenance-field textarea {
  min-height:
    90px;

  padding:
    10px 11px;

  resize:
    vertical;

  font-size:
    13px;

  line-height:
    1.5;
}


.maintenance-field input:focus,
.maintenance-field select:focus,
.maintenance-field textarea:focus,
.maintenance-search input:focus,
.maintenance-filters select:focus {
  border-color:
    var(
      --maintenance-text-soft
    );
}


.maintenance-field--wide {
  grid-column:
    1 /
    -1;
}


/* =========================================================
   12. TOOLBAR
   ========================================================= */

.maintenance-list-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;

  padding:
    10px 12px;

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

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

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


.maintenance-list-toolbar__summary {
  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

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

  font-size:
    12px;
}


.maintenance-list-toolbar__summary strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;
}


.maintenance-list-toolbar__actions label {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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

  font-size:
    12px;
}


.maintenance-list-toolbar__actions select {
  height:
    34px;

  padding:
    0 8px;

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

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

  color:
    var(
      --maintenance-text
    );

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


/* =========================================================
   13. LIST
   ========================================================= */

.maintenance-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   14. RECORD
   ========================================================= */

.maintenance-record {
  width:
    100%;

  min-width:
    0;

  padding:
    15px;

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

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

  background:
    var(
      --maintenance-surface
    );

  transition:
    border-color
      0.15s ease,
    background-color
      0.15s ease;
}


.maintenance-record:hover {
  border-color:
    var(
      --maintenance-border-strong
    );

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


.maintenance-record.is-expired {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-danger
      )
      35%,
      var(
        --maintenance-border
      )
    );
}


.maintenance-record__main {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;
}


.maintenance-record__identity {
  min-width:
    0;
}


.maintenance-record__code-line {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.maintenance-record__code {
  color:
    var(
      --maintenance-text-soft
    );

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    0.04em;
}


.maintenance-record h3 {
  margin:
    8px 0 0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    16px;

  font-weight:
    700;

  line-height:
    1.3;
}


.maintenance-record__classification {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    8px;

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

  font-size:
    11px;
}


.maintenance-record__classification span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;
}


.maintenance-record__classification .icon {
  width:
    14px;

  height:
    14px;
}


.maintenance-record__indicators {
  display:
    flex;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


/* =========================================================
   15. BADGES
   ========================================================= */

.maintenance-badge,
.maintenance-indicator {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    25px;

  padding:
    4px 8px;

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

  border-radius:
    999px;

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

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

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;
}


.maintenance-badge .icon,
.maintenance-indicator .icon {
  width:
    13px;

  height:
    13px;
}


.maintenance-badge--success,
.maintenance-indicator.is-success {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-success
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-success
    );

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


.maintenance-badge--warning,
.maintenance-indicator.is-warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-warning
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-warning
    );

  background:
    var(
      --maintenance-warning-bg
    );
}


.maintenance-badge--danger,
.maintenance-indicator.is-danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-danger
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-danger
    );

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


.maintenance-badge--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-info
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-info
    );

  background:
    var(
      --maintenance-info-bg
    );
}


.maintenance-badge--working {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-info
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-info
    );

  background:
    var(
      --maintenance-info-bg
    );
}


.maintenance-badge--muted {
  color:
    var(
      --maintenance-text-soft
    );

  background:
    var(
      --maintenance-surface-muted
    );
}


.maintenance-indicator.is-ai {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-ai
      )
      30%,
      transparent
    );

  color:
    var(
      --maintenance-ai
    );

  background:
    var(
      --maintenance-ai-bg
    );
}


/* =========================================================
   16. RECORD GRID
   ========================================================= */

.maintenance-record__grid {
  display:
    grid;

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

  gap:
    10px;

  margin-top:
    14px;

  padding-top:
    14px;

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


.maintenance-record__field {
  min-width:
    0;
}


.maintenance-record__field small {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    650;
}


.maintenance-record__field strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-record__money {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   17. RECORD FOOTER
   ========================================================= */

.maintenance-record__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    14px;

  padding-top:
    12px;

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


.maintenance-record__secondary {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;

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

  font-size:
    11px;
}


.maintenance-record__secondary span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;
}


.maintenance-record__secondary .icon {
  width:
    14px;

  height:
    14px;
}


.maintenance-record__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


/* =========================================================
   18. LOADING / EMPTY / ERROR
   ========================================================= */

.maintenance-loading,
.maintenance-empty,
.maintenance-error-state {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  width:
    100%;

  min-height:
    140px;

  padding:
    24px;

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

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

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

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


.maintenance-empty {
  flex-direction:
    column;

  text-align:
    center;
}


.maintenance-empty__icon,
.maintenance-error-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    12px;

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


.maintenance-empty strong,
.maintenance-error-state strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;
}


.maintenance-empty p,
.maintenance-error-state p {
  margin:
    3px 0 0;

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

  font-size:
    12px;

  line-height:
    1.5;
}


.maintenance-error-state {
  justify-content:
    flex-start;
}


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


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


/* =========================================================
   19. PAGINACIÓN
   ========================================================= */

.maintenance-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    14px;
}


.maintenance-pagination__summary {
  color:
    var(
      --maintenance-text-soft
    );

  font-size:
    11px;
}


.maintenance-pagination__summary strong {
  color:
    var(
      --maintenance-text
    );
}


.maintenance-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.maintenance-pagination__button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    34px;

  height:
    34px;

  padding:
    0 9px;

  border:
    1px solid
    var(
      --maintenance-border-strong
    ) !important;

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

  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-surface
    );

  font-size:
    11px;

  font-weight:
    700;
}


.maintenance-pagination__button:hover:not(:disabled) {
  background:
    var(
      --maintenance-surface-soft
    );
}


.maintenance-pagination__button.is-active {
  border-color:
    var(
      --maintenance-primary
    ) !important;

  color:
    var(
      --maintenance-surface
    );

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


:root[data-theme="dark"]
  .maintenance-pagination__button.is-active,
html.dark
  .maintenance-pagination__button.is-active,
body.dark
  .maintenance-pagination__button.is-active {
  color:
    #050505;
}


.maintenance-pagination__button:disabled {
  cursor:
    default;

  opacity:
    0.35;
}


/* =========================================================
   20. ACCESO
   ========================================================= */

.maintenance-access-denied {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  width:
    min(
      680px,
      100%
    );

  min-height:
    360px;

  margin:
    40px auto;

  padding:
    32px;

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

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

  background:
    var(
      --maintenance-surface
    );

  text-align:
    center;
}


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

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  height:
    52px;

  margin-bottom:
    16px;

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

  border-radius:
    14px;
}


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

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.08em;
}


.maintenance-access-denied h1 {
  margin:
    8px 0 0;

  font-size:
    25px;
}


.maintenance-access-denied p {
  max-width:
    480px;

  margin:
    10px 0 0;

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

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================================================
   FIN PARTE 1 DE 4
   ========================================================= *//* =========================================================
   WIRTZ HUB · OPERACIONES
   MANTENIMIENTO Y SERVICIOS

   PARTE 2 DE 4

   MODALES
   FORMULARIOS
   SECCIONES
   SWITCHES
   CONFIRMACIONES
   DETALLE
   COSTOS
   HISTORIAL
   ========================================================= */


/* =========================================================
   21. MODAL ROOT
   ========================================================= */

.maintenance-modal-root {
  position:
    relative;

  z-index:
    1200;
}


body.maintenance-modal-open {
  overflow:
    hidden;
}


/* =========================================================
   22. MODAL BACKDROP
   ========================================================= */

.maintenance-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

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

  overflow:
    auto;

  z-index:
    1200;
}


/* =========================================================
   23. MODAL
   ========================================================= */

.maintenance-modal {
  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      760px,
      100%
    );

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

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

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

  background:
    var(
      --maintenance-surface
    );

  overflow:
    hidden;
}


.maintenance-modal--small {
  width:
    min(
      500px,
      100%
    );
}


.maintenance-modal--large {
  width:
    min(
      900px,
      100%
    );
}


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


/* =========================================================
   24. MODAL HEADER
   ========================================================= */

.maintenance-modal__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  flex-shrink:
    0;

  padding:
    18px 20px;

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

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


.maintenance-modal__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}


.maintenance-modal__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  min-width:
    38px;

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

  border-radius:
    10px;

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


.maintenance-modal__identity > div {
  min-width:
    0;
}


.maintenance-modal__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.2;

  letter-spacing:
    0.07em;
}


.maintenance-modal__header h2 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    20px;

  font-weight:
    720;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-modal__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  min-width:
    36px;

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

  border-radius:
    9px;

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

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


.maintenance-modal__close:hover {
  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-surface-muted
    );
}


/* =========================================================
   25. MODAL BODY
   ========================================================= */

.maintenance-modal__body {
  flex:
    1;

  min-height:
    0;

  padding:
    18px 20px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;
}


.maintenance-modal__body::-webkit-scrollbar {
  width:
    8px;
}


.maintenance-modal__body::-webkit-scrollbar-track {
  background:
    transparent;
}


.maintenance-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   26. MODAL FOOTER
   ========================================================= */

.maintenance-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-shrink:
    0;

  padding:
    14px 20px;

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

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


/* =========================================================
   27. FORM
   ========================================================= */

.maintenance-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;
}


/* =========================================================
   28. FORM SECTION
   ========================================================= */

.maintenance-form-section {
  width:
    100%;

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

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

  background:
    var(
      --maintenance-surface
    );

  overflow:
    hidden;
}


.maintenance-form-section__head {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    13px 14px;

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

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


.maintenance-form-section__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  min-width:
    32px;

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

  border-radius:
    8px;

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


.maintenance-form-section__icon .icon {
  width:
    16px;

  height:
    16px;
}


.maintenance-form-section__head > div {
  min-width:
    0;
}


.maintenance-form-section__head h3 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;

  font-weight:
    720;

  line-height:
    1.25;
}


.maintenance-form-section__head p {
  margin:
    3px 0 0;

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

  font-size:
    11px;

  line-height:
    1.4;
}


.maintenance-form-section__body {
  padding:
    14px;
}


/* =========================================================
   29. FORM GRID
   ========================================================= */

.maintenance-form-grid {
  display:
    grid;

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

  gap:
    12px;
}


.maintenance-form-grid--spaced {
  margin-top:
    14px;
}


/* =========================================================
   30. INPUTS DEL MODAL
   ========================================================= */

.maintenance-modal-root
  .maintenance-field
  input,
.maintenance-modal-root
  .maintenance-field
  select,
.maintenance-modal-root
  .maintenance-field
  textarea {
  border-color:
    var(
      --maintenance-border-strong
    );

  color:
    var(
      --maintenance-text
    );

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


.maintenance-modal-root
  .maintenance-field
  input::placeholder,
.maintenance-modal-root
  .maintenance-field
  textarea::placeholder {
  color:
    var(
      --maintenance-text-muted
    );
}


.maintenance-modal-root
  input[type="number"] {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   31. SWITCH GRID
   ========================================================= */

.maintenance-switch-grid {
  display:
    grid;

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

  gap:
    9px;
}


/* =========================================================
   32. SWITCH CARD
   ========================================================= */

.maintenance-switch-card {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  min-height:
    48px;

  padding:
    9px 11px;

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

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

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

  cursor:
    pointer;
}


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

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.maintenance-switch-card__control {
  position:
    relative;

  display:
    inline-flex;

  width:
    36px;

  height:
    20px;

  min-width:
    36px;

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

  border-radius:
    999px;

  background:
    var(
      --maintenance-surface
    );

  transition:
    background-color
      0.15s ease,
    border-color
      0.15s ease;
}


.maintenance-switch-card__control::after {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

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

  transition:
    transform
      0.15s ease,
    background-color
      0.15s ease;

  content:
    "";
}


.maintenance-switch-card
  input:checked +
  .maintenance-switch-card__control {
  border-color:
    var(
      --maintenance-primary
    );

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


.maintenance-switch-card
  input:checked +
  .maintenance-switch-card__control::after {
  transform:
    translateX(
      16px
    );

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


:root[data-theme="dark"]
  .maintenance-switch-card
  input:checked +
  .maintenance-switch-card__control::after,
html.dark
  .maintenance-switch-card
  input:checked +
  .maintenance-switch-card__control::after,
body.dark
  .maintenance-switch-card
  input:checked +
  .maintenance-switch-card__control::after {
  background:
    #050505;
}


.maintenance-switch-card__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-switch-card__copy strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.3;
}


.maintenance-switch-card__copy small {
  margin-top:
    2px;

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

  font-size:
    10px;

  line-height:
    1.35;
}


/* =========================================================
   33. CONFIRM
   ========================================================= */

.maintenance-confirm {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


.maintenance-confirm > p {
  margin:
    0;

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

  font-size:
    13px;

  line-height:
    1.55;
}


/* =========================================================
   34. DETAIL HEADER
   ========================================================= */

.maintenance-detail-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    16px;

  padding:
    16px;

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

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

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


.maintenance-detail-head > div:first-child {
  min-width:
    0;
}


.maintenance-detail-head__badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-bottom:
    8px;
}


.maintenance-detail-head__code {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    0.05em;
}


.maintenance-detail-head h2 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    clamp(
      20px,
      2vw,
      27px
    );

  font-weight:
    730;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}


.maintenance-detail-head p {
  margin:
    6px 0 0;

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

  font-size:
    12px;
}


.maintenance-detail-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  flex-shrink:
    0;
}


/* =========================================================
   35. DETAIL TABS
   ========================================================= */

.maintenance-detail-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  margin-bottom:
    14px;

  padding:
    4px;

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

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

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

  overflow-x:
    auto;
}


.maintenance-detail-tab {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  flex-shrink:
    0;

  min-height:
    34px;

  padding:
    7px 10px;

  border-radius:
    6px;

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

  background:
    transparent;

  font-size:
    11px;

  font-weight:
    700;
}


.maintenance-detail-tab:hover {
  color:
    var(
      --maintenance-text
    );

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


.maintenance-detail-tab.is-active {
  color:
    var(
      --maintenance-text
    );

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


/* =========================================================
   36. DETAIL CONTENT
   ========================================================= */

.maintenance-detail-content {
  width:
    100%;

  min-width:
    0;
}


.maintenance-detail-layout {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


/* =========================================================
   37. DETAIL CARD
   ========================================================= */

.maintenance-detail-card {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --maintenance-surface
    );

  overflow:
    hidden;
}


.maintenance-detail-card > header {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    11px 13px;

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

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


.maintenance-detail-card > header .icon {
  width:
    16px;

  height:
    16px;

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


.maintenance-detail-card > header h3 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    13px;

  font-weight:
    720;
}


/* =========================================================
   38. DETAIL GRID
   ========================================================= */

.maintenance-detail-grid {
  display:
    grid;

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

  gap:
    0;

  padding:
    4px;
}


.maintenance-detail-item {
  min-width:
    0;

  padding:
    10px;

  border:
    1px solid
    transparent;
}


.maintenance-detail-item--wide {
  grid-column:
    1 /
    -1;
}


.maintenance-detail-item small {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    650;
}


.maintenance-detail-item__value {
  min-width:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


.maintenance-detail-item__value.is-preformatted {
  white-space:
    pre-wrap;
}


/* =========================================================
   39. DETAIL TEXT
   ========================================================= */

.maintenance-detail-text {
  margin:
    0;

  padding:
    14px;

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

  font-size:
    12px;

  line-height:
    1.6;

  white-space:
    pre-wrap;
}


/* =========================================================
   40. COST SUMMARY
   ========================================================= */

.maintenance-cost-summary {
  display:
    grid;

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

  gap:
    0;

  padding:
    4px;
}


.maintenance-cost-summary > div {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    78px;

  padding:
    11px;

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


.maintenance-cost-summary > div:last-child {
  border-right:
    0;
}


.maintenance-cost-summary small {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.maintenance-cost-summary strong {
  margin-top:
    5px;

  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;

  font-weight:
    720;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


.maintenance-cost-summary
  .is-total {
  background:
    var(
      --maintenance-surface-soft
    );
}


.maintenance-cost-summary
  .is-total
  strong {
  font-size:
    16px;
}


/* =========================================================
   41. DETAIL STATE ACTIONS
   ========================================================= */

.maintenance-detail-state-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  width:
    100%;
}


/* =========================================================
   42. DOCUMENT LIST DETAIL
   ========================================================= */

.maintenance-document-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.maintenance-document-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

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

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

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


.maintenance-document-row__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  min-width:
    36px;

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

  border-radius:
    9px;

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


.maintenance-document-row__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-document-row__copy strong {
  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    12px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-document-row__copy span {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-document-row__status,
.maintenance-document-row__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


/* =========================================================
   43. TIMELINE
   ========================================================= */

.maintenance-timeline {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    0;
}


.maintenance-timeline__item {
  position:
    relative;

  display:
    grid;

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

  gap:
    10px;

  min-width:
    0;

  padding:
    0 0 18px;
}


.maintenance-timeline__item:last-child {
  padding-bottom:
    0;
}


.maintenance-timeline__item::before {
  position:
    absolute;

  top:
    13px;

  bottom:
    -2px;

  left:
    7px;

  width:
    1px;

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

  content:
    "";
}


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


.maintenance-timeline__dot {
  position:
    relative;

  z-index:
    1;

  display:
    block;

  width:
    15px;

  height:
    15px;

  margin-top:
    3px;

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

  border-radius:
    50%;

  background:
    var(
      --maintenance-text-muted
    );
}


.maintenance-timeline__content {
  min-width:
    0;

  padding:
    10px 12px;

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

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

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


.maintenance-timeline__content header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.maintenance-timeline__content strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    720;
}


.maintenance-timeline__content time {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    10px;
}


.maintenance-timeline__content p {
  margin:
    5px 0 0;

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

  font-size:
    11px;

  line-height:
    1.45;
}


/* =========================================================
   44. INFO BOX
   ========================================================= */

.maintenance-info-box {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  width:
    100%;

  padding:
    11px 12px;

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

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

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

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


.maintenance-info-box > .icon {
  flex-shrink:
    0;

  margin-top:
    1px;

  color:
    var(
      --maintenance-ai
    );
}


.maintenance-info-box > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-info-box strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    720;
}


.maintenance-info-box span {
  margin-top:
    3px;

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

  font-size:
    10px;

  line-height:
    1.4;
}


/* =========================================================
   45. TOAST
   ========================================================= */

.maintenance-toast {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    2000;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  width:
    min(
      380px,
      calc(
        100vw -
        32px
      )
    );

  padding:
    11px 13px;

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

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

  color:
    var(
      --maintenance-text
    );

  background:
    var(
      --maintenance-surface
    );

  font-family:
    var(
      --maintenance-font
    );

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.4;

  opacity:
    0;

  transform:
    translateY(
      10px
    );

  pointer-events:
    none;

  transition:
    opacity
      0.15s ease,
    transform
      0.15s ease;
}


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

  transform:
    translateY(
      0
    );
}


.maintenance-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;
}


.maintenance-toast.is-success {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-success
      )
      40%,
      var(
        --maintenance-border
      )
    );
}


.maintenance-toast.is-success
  .maintenance-toast__icon {
  color:
    var(
      --maintenance-success
    );
}


.maintenance-toast.is-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-danger
      )
      40%,
      var(
        --maintenance-border
      )
    );
}


.maintenance-toast.is-error
  .maintenance-toast__icon {
  color:
    var(
      --maintenance-danger
    );
}


/* =========================================================
   46. HIDDEN
   ========================================================= */

.maintenance-form [hidden],
.maintenance-modal-root [hidden] {
  display:
    none !important;
}


/* =========================================================
   FIN PARTE 2 DE 4
   ========================================================= *//* =========================================================
   WIRTZ HUB · OPERACIONES
   MANTENIMIENTO Y SERVICIOS

   PARTE 3 DE 4

   TABS DINÁMICOS
   PROGRAMACIÓN
   ACTIVOS
   PREVENTIVOS
   SERVICIOS EXTERNOS
   COSTOS
   HISTORIAL GLOBAL
   DOCUMENTOS
   ========================================================= */


/* =========================================================
   47. SECTION HEAD
   ========================================================= */

.maintenance-section-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    16px;
}


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


.maintenance-section-head > div:first-child > span {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.07em;
}


.maintenance-section-head h2 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    20px;

  font-weight:
    730;

  line-height:
    1.2;
}


.maintenance-section-head p {
  max-width:
    760px;

  margin:
    6px 0 0;

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

  font-size:
    12px;

  line-height:
    1.5;
}


.maintenance-section-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex-shrink:
    0;
}


/* =========================================================
   48. DYNAMIC TAB
   ========================================================= */

.maintenance-dynamic-tab {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   49. MINI METRICS
   ========================================================= */

.maintenance-mini-metrics {
  display:
    grid;

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

  gap:
    10px;

  margin-bottom:
    16px;
}


.maintenance-mini-metric {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  min-width:
    0;

  min-height:
    88px;

  padding:
    13px;

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

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

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


.maintenance-mini-metric__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  min-width:
    34px;

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

  border-radius:
    9px;

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

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


.maintenance-mini-metric > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-mini-metric small {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.2;
}


.maintenance-mini-metric strong {
  margin-top:
    4px;

  color:
    var(
      --maintenance-text
    );

  font-size:
    17px;

  font-weight:
    730;

  line-height:
    1.2;

  overflow-wrap:
    anywhere;
}


.maintenance-mini-metric span {
  margin-top:
    3px;

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

  font-size:
    10px;

  line-height:
    1.35;
}


/* =========================================================
   50. DYNAMIC LIST
   ========================================================= */

.maintenance-dynamic-list {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;
}


/* =========================================================
   51. COMPACT CARD
   ========================================================= */

.maintenance-compact-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    14px;

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

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

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


.maintenance-compact-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.maintenance-compact-card__header > div {
  min-width:
    0;
}


.maintenance-compact-card__code {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.05em;
}


.maintenance-compact-card h3 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;

  font-weight:
    710;

  line-height:
    1.3;
}


.maintenance-compact-card__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    10px;

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

  font-size:
    10px;
}


.maintenance-compact-card__meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;
}


.maintenance-compact-card__meta .icon {
  width:
    13px;

  height:
    13px;
}


.maintenance-compact-card__grid {
  display:
    grid;

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

  gap:
    8px;

  margin-top:
    12px;

  padding-top:
    12px;

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


.maintenance-compact-card__grid > div {
  min-width:
    0;
}


.maintenance-compact-card__grid small {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    9px;

  font-weight:
    650;
}


.maintenance-compact-card__grid strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-compact-card__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    12px;

  padding-top:
    12px;

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


/* =========================================================
   52. ASSETS GRID
   ========================================================= */

.maintenance-assets-grid {
  display:
    grid;

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

  gap:
    10px;
}


/* =========================================================
   53. ASSET CARD
   ========================================================= */

.maintenance-asset-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    14px;

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

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

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


.maintenance-asset-card__header {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.maintenance-asset-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  min-width:
    38px;

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

  border-radius:
    10px;

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


.maintenance-asset-card__header > div {
  min-width:
    0;
}


.maintenance-asset-card__header span {
  display:
    block;

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

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.05em;
}


.maintenance-asset-card__header h3 {
  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;

  font-weight:
    710;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-asset-card__data {
  display:
    grid;

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

  gap:
    10px;

  margin-top:
    12px;

  padding-top:
    12px;

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


.maintenance-asset-card__data > div {
  min-width:
    0;
}


.maintenance-asset-card__data small {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    9px;

  font-weight:
    650;
}


.maintenance-asset-card__data strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-asset-card__footer {
  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    12px;

  padding-top:
    12px;

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


/* =========================================================
   54. DOCUMENTS GRID
   ========================================================= */

.maintenance-documents-grid {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;
}


/* =========================================================
   55. DOCUMENT CARD
   ========================================================= */

.maintenance-document-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    14px;

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

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

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


.maintenance-document-card__header {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;
}


.maintenance-document-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  min-width:
    42px;

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

  border-radius:
    11px;

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

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


.maintenance-document-card__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-document-card__copy > span {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.05em;
}


.maintenance-document-card__copy h3 {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    13px;

  font-weight:
    710;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-document-card__copy small {
  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-document-card__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    12px;

  padding-top:
    10px;

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

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

  font-size:
    9px;
}


.maintenance-document-card__meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;
}


.maintenance-document-card__meta .icon {
  width:
    12px;

  height:
    12px;
}


.maintenance-document-card__status {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    10px;
}


.maintenance-document-card__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    auto;

  padding-top:
    12px;
}


/* =========================================================
   56. COST DASHBOARD
   ========================================================= */

.maintenance-cost-dashboard {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      0.9fr
    )
    minmax(
      0,
      1.1fr
    );

  gap:
    12px;
}


/* =========================================================
   57. RANKING
   ========================================================= */

.maintenance-ranking {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  padding:
    4px;
}


.maintenance-ranking__row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px;

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

  color:
    var(
      --maintenance-text
    );

  background:
    transparent;

  text-align:
    left;
}


.maintenance-ranking__row:last-child {
  border-bottom:
    0 !important;
}


.maintenance-ranking__row:hover {
  background:
    var(
      --maintenance-surface-soft
    );
}


.maintenance-ranking__position {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

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

  border-radius:
    7px;

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

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

  font-size:
    10px;

  font-weight:
    750;
}


.maintenance-ranking__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-ranking__copy strong {
  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    680;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-ranking__copy small {
  margin-top:
    2px;

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

  font-size:
    9px;
}


.maintenance-ranking__value {
  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    720;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   58. GLOBAL HISTORY
   ========================================================= */

.maintenance-global-history {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  width:
    100%;
}


.maintenance-global-history__row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px 11px;

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

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

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


.maintenance-global-history__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  min-width:
    34px;

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

  border-radius:
    9px;

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

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


.maintenance-global-history__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-global-history__copy > span {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.05em;
}


.maintenance-global-history__copy strong {
  margin-top:
    2px;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    11px;

  font-weight:
    680;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-global-history__copy small {
  margin-top:
    2px;

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

  font-size:
    9px;
}


/* =========================================================
   59. TAB PANEL DYNAMIC
   ========================================================= */

.maintenance-tab-panel
  .maintenance-dynamic-tab {
  min-height:
    240px;
}


/* =========================================================
   60. HOVER UNIFICADO
   ========================================================= */

.maintenance-compact-card,
.maintenance-asset-card,
.maintenance-document-card,
.maintenance-mini-metric,
.maintenance-global-history__row {
  transition:
    border-color
      0.15s ease,
    background-color
      0.15s ease;
}


.maintenance-compact-card:hover,
.maintenance-asset-card:hover,
.maintenance-document-card:hover,
.maintenance-mini-metric:hover,
.maintenance-global-history__row:hover {
  border-color:
    var(
      --maintenance-border-strong
    );

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


/* =========================================================
   61. DOCUMENT STATUS DETAILS
   ========================================================= */

.maintenance-document-card
  .maintenance-indicator {
  max-width:
    100%;
}


.maintenance-document-card
  .maintenance-indicator
  span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   62. EMPTY EN GRIDS
   ========================================================= */

.maintenance-assets-grid
  > .maintenance-empty,
.maintenance-documents-grid
  > .maintenance-empty,
.maintenance-dynamic-list
  > .maintenance-empty {
  grid-column:
    1 /
    -1;
}


/* =========================================================
   63. NUMERIC ALIGN
   ========================================================= */

.maintenance-mini-metric strong,
.maintenance-ranking__value,
.maintenance-document-card__meta,
.maintenance-asset-card__data strong {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   64. SCROLL HORIZONTAL PROTECCIÓN
   ========================================================= */

.maintenance-dynamic-tab,
.maintenance-documents-grid,
.maintenance-assets-grid,
.maintenance-dynamic-list,
.maintenance-cost-dashboard,
.maintenance-global-history {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   65. DARK SPECIFIC
   ========================================================= */

:root[data-theme="dark"]
  .maintenance-ranking__row:hover,
:root[data-theme="dark"]
  .maintenance-document-card:hover,
:root[data-theme="dark"]
  .maintenance-compact-card:hover,
:root[data-theme="dark"]
  .maintenance-asset-card:hover,
html.dark
  .maintenance-ranking__row:hover,
html.dark
  .maintenance-document-card:hover,
html.dark
  .maintenance-compact-card:hover,
html.dark
  .maintenance-asset-card:hover,
body.dark
  .maintenance-ranking__row:hover,
body.dark
  .maintenance-document-card:hover,
body.dark
  .maintenance-compact-card:hover,
body.dark
  .maintenance-asset-card:hover {
  background:
    #0d0d0d;
}


/* =========================================================
   FIN PARTE 3 DE 4
   ========================================================= */
   /* =========================================================
   WIRTZ HUB · OPERACIONES
   MANTENIMIENTO Y SERVICIOS

   PARTE 4 DE 4

   UPLOAD
   DRAG & DROP
   IA
   PREVIEW IA
   JSON
   PROCESAMIENTO
   RESPONSIVE
   AJUSTES FINALES
   ========================================================= */


/* =========================================================
   66. UPLOAD ZONE
   ========================================================= */

.maintenance-upload-zone {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  min-height:
    210px;

  padding:
    20px;

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

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

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

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

  cursor:
    pointer;

  transition:
    border-color
      0.15s ease,
    background-color
      0.15s ease;
}


.maintenance-upload-zone:hover,
.maintenance-upload-zone:focus {
  border-color:
    var(
      --maintenance-text-muted
    );

  background:
    var(
      --maintenance-surface-muted
    );
}


.maintenance-upload-zone.is-dragging {
  border-style:
    solid;

  border-color:
    var(
      --maintenance-ai
    );

  background:
    var(
      --maintenance-ai-bg
    );
}


.maintenance-upload-zone.has-file {
  min-height:
    auto;

  padding:
    12px;

  border-style:
    solid;

  cursor:
    default;
}


/* =========================================================
   67. UPLOAD EMPTY
   ========================================================= */

.maintenance-upload-empty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  max-width:
    440px;

  text-align:
    center;
}


.maintenance-upload-empty > .icon {
  width:
    36px;

  height:
    36px;

  margin-bottom:
    12px;

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


.maintenance-upload-empty strong {
  color:
    var(
      --maintenance-text
    );

  font-size:
    14px;

  font-weight:
    720;
}


.maintenance-upload-empty span {
  margin-top:
    4px;

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

  font-size:
    12px;
}


.maintenance-upload-empty small {
  margin-top:
    8px;

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

  font-size:
    10px;
}


/* =========================================================
   68. UPLOAD FILE
   ========================================================= */

.maintenance-upload-file {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  width:
    100%;

  padding:
    12px;

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

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

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


.maintenance-upload-file__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  min-width:
    42px;

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

  border-radius:
    10px;

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

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


.maintenance-upload-file__copy {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.maintenance-upload-file__copy strong {
  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.maintenance-upload-file__copy span {
  margin-top:
    3px;

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

  font-size:
    10px;

  line-height:
    1.3;
}


.maintenance-upload-file__copy small {
  margin-top:
    4px;

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

  font-size:
    9px;

  line-height:
    1.4;
}


/* =========================================================
   69. IA PROCESSING
   ========================================================= */

.maintenance-ai-processing {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    320px;

  padding:
    32px;

  text-align:
    center;
}


.maintenance-ai-processing__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    54px;

  height:
    54px;

  margin-bottom:
    16px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --maintenance-ai
      )
      35%,
      var(
        --maintenance-border
      )
    );

  border-radius:
    15px;

  color:
    var(
      --maintenance-ai
    );

  background:
    var(
      --maintenance-ai-bg
    );
}


.maintenance-ai-processing__icon .icon {
  width:
    25px;

  height:
    25px;
}


.maintenance-ai-processing h3 {
  margin:
    0;

  color:
    var(
      --maintenance-text
    );

  font-size:
    18px;

  font-weight:
    730;
}


.maintenance-ai-processing p {
  max-width:
    580px;

  margin:
    7px 0 20px;

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

  font-size:
    12px;

  line-height:
    1.5;
}


.maintenance-ai-processing
  .maintenance-loading {
  min-height:
    90px;
}


/* =========================================================
   70. IA PREVIEW
   ========================================================= */

.maintenance-ai-preview {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   71. IA PREVIEW SUMMARY
   ========================================================= */

.maintenance-ai-preview__summary {
  display:
    grid;

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

  gap:
    9px;
}


.maintenance-ai-preview__summary article {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    12px;

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

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

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


.maintenance-ai-preview__summary small {
  color:
    var(
      --maintenance-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.maintenance-ai-preview__summary strong {
  margin-top:
    4px;

  overflow:
    hidden;

  color:
    var(
      --maintenance-text
    );

  font-size:
    13px;

  font-weight:
    720;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   72. IA JSON
   ========================================================= */

.maintenance-ai-json {
  width:
    100%;

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

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

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

  overflow:
    hidden;
}


.maintenance-ai-json summary {
  padding:
    11px 13px;

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

  font-size:
    11px;

  font-weight:
    700;

  cursor:
    pointer;

  user-select:
    none;
}


.maintenance-ai-json[open]
  summary {
  border-bottom:
    1px solid
    var(
      --maintenance-border
    );
}


.maintenance-ai-json pre {
  max-width:
    100%;

  max-height:
    380px;

  margin:
    0;

  padding:
    14px;

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

  background:
    var(
      --maintenance-surface
    );

  overflow:
    auto;

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

  font-size:
    10px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   73. IA COLOR DETAILS
   ========================================================= */

.maintenance-ai-preview
  .maintenance-info-box {
  border-color:
    color-mix(
      in srgb,
      var(
        --maintenance-ai
      )
      28%,
      var(
        --maintenance-border
      )
    );

  background:
    var(
      --maintenance-ai-bg
    );
}


.maintenance-ai-preview
  .maintenance-form-section__icon {
  color:
    var(
      --maintenance-ai
    );
}


/* =========================================================
   74. FOCUS ACCESSIBILITY
   ========================================================= */

.maintenance-btn:focus-visible,
.maintenance-tab:focus-visible,
.maintenance-detail-tab:focus-visible,
.maintenance-pagination__button:focus-visible,
.maintenance-modal__close:focus-visible,
.maintenance-ranking__row:focus-visible,
.maintenance-upload-zone:focus-visible {
  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --maintenance-info
      )
      65%,
      transparent
    );

  outline-offset:
    2px;
}


/* =========================================================
   75. SELECTION
   ========================================================= */

.maintenance-page ::selection,
.maintenance-modal-root ::selection {
  color:
    var(
      --maintenance-surface
    );

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


:root[data-theme="dark"]
  .maintenance-page ::selection,
:root[data-theme="dark"]
  .maintenance-modal-root ::selection,
html.dark
  .maintenance-page ::selection,
html.dark
  .maintenance-modal-root ::selection,
body.dark
  .maintenance-page ::selection,
body.dark
  .maintenance-modal-root ::selection {
  color:
    #050505;

  background:
    #f5f5f5;
}


/* =========================================================
   76. SELECT DARK
   ========================================================= */

:root[data-theme="dark"]
  .maintenance-page
  select,
:root[data-theme="dark"]
  .maintenance-modal-root
  select,
html.dark
  .maintenance-page
  select,
html.dark
  .maintenance-modal-root
  select,
body.dark
  .maintenance-page
  select,
body.dark
  .maintenance-modal-root
  select {
  color-scheme:
    dark;
}


/* =========================================================
   77. DATE INPUT DARK
   ========================================================= */

:root[data-theme="dark"]
  .maintenance-page
  input[type="date"],
:root[data-theme="dark"]
  .maintenance-page
  input[type="datetime-local"],
:root[data-theme="dark"]
  .maintenance-modal-root
  input[type="date"],
:root[data-theme="dark"]
  .maintenance-modal-root
  input[type="datetime-local"],
html.dark
  .maintenance-page
  input[type="date"],
html.dark
  .maintenance-page
  input[type="datetime-local"],
html.dark
  .maintenance-modal-root
  input[type="date"],
html.dark
  .maintenance-modal-root
  input[type="datetime-local"],
body.dark
  .maintenance-page
  input[type="date"],
body.dark
  .maintenance-page
  input[type="datetime-local"],
body.dark
  .maintenance-modal-root
  input[type="date"],
body.dark
  .maintenance-modal-root
  input[type="datetime-local"] {
  color-scheme:
    dark;
}


/* =========================================================
   78. RESPONSIVE · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {
  .maintenance-tabs {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .maintenance-tab:nth-child(
    4
  ) {
    border-right:
      0 !important;
  }


  .maintenance-tab:nth-child(
    -n + 4
  ) {
    border-bottom:
      1px solid
      var(
        --maintenance-border
      ) !important;
  }


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


/* =========================================================
   79. RESPONSIVE · 1280
   ========================================================= */

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


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


  .maintenance-filters__primary {
    grid-template-columns:
      minmax(
        250px,
        1fr
      )
      repeat(
        2,
        minmax(
          150px,
          0.55fr
        )
      );
  }


  .maintenance-filters__primary
    > :nth-child(
      4
    ) {
    grid-column:
      1 /
      2;
  }


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


  .maintenance-assets-grid,
  .maintenance-documents-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .maintenance-cost-dashboard {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   80. RESPONSIVE · 1050
   ========================================================= */

@media (
  max-width:
    1050px
) {
  .maintenance-page-head {
    flex-direction:
      column;
  }


  .maintenance-page-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .maintenance-dynamic-list {
    grid-template-columns:
      1fr;
  }


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


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


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


  .maintenance-cost-summary
    > div {
    border-right:
      0;

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


  .maintenance-cost-summary
    > div:last-child {
    grid-column:
      1 /
      -1;

    border-bottom:
      0;
  }
}


/* =========================================================
   81. RESPONSIVE · 900
   ========================================================= */

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


  .maintenance-tab {
    border-right:
      1px solid
      var(
        --maintenance-border
      ) !important;

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


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


  .maintenance-tab:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0 !important;
  }


  .maintenance-record__main {
    flex-direction:
      column;
  }


  .maintenance-record__indicators {
    justify-content:
      flex-start;
  }


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


  .maintenance-record__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .maintenance-record__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


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


  .maintenance-filters__primary
    > :nth-child(
      4
    ) {
    grid-column:
      auto;
  }


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


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


  .maintenance-detail-head {
    flex-direction:
      column;
  }


  .maintenance-detail-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .maintenance-document-row {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }


  .maintenance-document-row__status,
  .maintenance-document-row__actions {
    grid-column:
      2;
  }


  .maintenance-global-history__row {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      )
      auto;
  }


  .maintenance-global-history__row
    > .maintenance-btn {
    grid-column:
      2 /
      -1;

    justify-self:
      start;
  }
}


/* =========================================================
   82. RESPONSIVE · 720
   ========================================================= */

@media (
  max-width:
    720px
) {
  .maintenance-page {
    padding:
      12px;
  }


  .maintenance-page-head {
    padding:
      16px;

    border-radius:
      var(
        --maintenance-radius-lg
      );
  }


  .maintenance-page-head__identity {
    gap:
      11px;
  }


  .maintenance-page-head__icon {
    width:
      38px;

    height:
      38px;

    min-width:
      38px;
  }


  .maintenance-page-head h1 {
    font-size:
      24px;
  }


  .maintenance-page-head p {
    font-size:
      12px;
  }


  .maintenance-page-head__actions
    .maintenance-btn {
    flex:
      1;

    min-width:
      0;
  }


  .maintenance-metrics {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .maintenance-metric {
    min-height:
      90px;

    padding:
      13px;
  }


  .maintenance-tab-panel {
    padding:
      12px;
  }


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


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

    border-right:
      0 !important;

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


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


  .maintenance-tab.is-active::after {
    top:
      8px;

    right:
      auto;

    bottom:
      8px;

    left:
      0;

    width:
      2px;

    height:
      auto;
  }


  .maintenance-filters__primary,
  .maintenance-filters__advanced,
  .maintenance-form-grid,
  .maintenance-switch-grid,
  .maintenance-detail-grid,
  .maintenance-assets-grid,
  .maintenance-documents-grid,
  .maintenance-ai-preview__summary {
    grid-template-columns:
      1fr;
  }


  .maintenance-filters__primary
    > * {
    grid-column:
      auto;
  }


  .maintenance-record__grid {
    grid-template-columns:
      1fr;
  }


  .maintenance-record__field strong {
    white-space:
      normal;
  }


  .maintenance-list-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .maintenance-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .maintenance-pagination__controls {
    width:
      100%;

    overflow-x:
      auto;

    padding-bottom:
      3px;
  }


  .maintenance-modal-backdrop {
    align-items:
      flex-end;

    padding:
      0;
  }


  .maintenance-modal,
  .maintenance-modal--small,
  .maintenance-modal--large,
  .maintenance-modal--xlarge {
    width:
      100%;

    max-height:
      94vh;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

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


  .maintenance-modal__header {
    padding:
      14px;
  }


  .maintenance-modal__body {
    padding:
      13px;
  }


  .maintenance-modal__footer {
    padding:
      11px
      13px;

    flex-wrap:
      wrap;
  }


  .maintenance-modal__footer
    .maintenance-btn {
    flex:
      1;

    min-width:
      130px;
  }


  .maintenance-detail-tabs {
    justify-content:
      flex-start;
  }


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


  .maintenance-cost-summary
    > div,
  .maintenance-cost-summary
    > div:last-child {
    grid-column:
      auto;

    border-right:
      0;

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


  .maintenance-cost-summary
    > div:last-child {
    border-bottom:
      0;
  }


  .maintenance-compact-card__grid,
  .maintenance-asset-card__data {
    grid-template-columns:
      1fr;
  }


  .maintenance-upload-file {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }


  .maintenance-upload-file
    > .maintenance-btn {
    grid-column:
      1 /
      -1;

    justify-self:
      stretch;
  }


  .maintenance-section-head {
    flex-direction:
      column;
  }


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

    justify-content:
      flex-start;
  }


  .maintenance-section-head__actions
    .maintenance-btn {
    width:
      100%;
  }


  .maintenance-global-history__row {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }


  .maintenance-global-history__row
    > .maintenance-badge {
    grid-column:
      2;
  }


  .maintenance-global-history__row
    > .maintenance-btn {
    grid-column:
      2;
  }


  .maintenance-document-row {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }


  .maintenance-document-row__status,
  .maintenance-document-row__actions {
    grid-column:
      1 /
      -1;
  }


  .maintenance-document-row__actions
    .maintenance-btn {
    flex:
      1;
  }
}


/* =========================================================
   83. RESPONSIVE · 480
   ========================================================= */

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


  .maintenance-page-head {
    padding:
      13px;
  }


  .maintenance-page-head__actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


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


  .maintenance-metric__content strong {
    font-size:
      18px;
  }


  .maintenance-record {
    padding:
      12px;
  }


  .maintenance-record h3 {
    font-size:
      14px;
  }


  .maintenance-record__code-line {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .maintenance-record__actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .maintenance-record__actions
    .maintenance-btn {
    width:
      100%;
  }


  .maintenance-btn {
    min-height:
      40px;
  }


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


  .maintenance-detail-head h2 {
    font-size:
      20px;
  }


  .maintenance-detail-head__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .maintenance-detail-head__actions
    .maintenance-btn {
    width:
      100%;
  }


  .maintenance-detail-state-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .maintenance-detail-state-actions
    .maintenance-btn {
    width:
      100%;
  }


  .maintenance-document-card__footer {
    display:
      grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .maintenance-document-card__footer
    .maintenance-btn {
    width:
      100%;
  }


  .maintenance-upload-zone {
    min-height:
      180px;

    padding:
      14px;
  }


  .maintenance-upload-empty > .icon {
    width:
      30px;

    height:
      30px;
  }


  .maintenance-ai-processing {
    min-height:
      260px;

    padding:
      20px
      10px;
  }


  .maintenance-toast {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(
        100vw -
        20px
      );
  }
}


/* =========================================================
   84. REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .maintenance-page *,
  .maintenance-modal-root *,
  .maintenance-toast {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

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


/* =========================================================
   85. PRINT
   ========================================================= */

@media print {
  .maintenance-page {
    padding:
      0;

    color:
      #000000;

    background:
      #ffffff;
  }


  .maintenance-page-head__actions,
  .maintenance-tabs,
  .maintenance-filters,
  .maintenance-list-toolbar,
  .maintenance-pagination,
  .maintenance-record__actions,
  .maintenance-document-card__footer,
  .maintenance-section-head__actions,
  .maintenance-modal-root,
  .maintenance-toast {
    display:
      none !important;
  }


  .maintenance-page-head,
  .maintenance-workspace,
  .maintenance-record,
  .maintenance-metric,
  .maintenance-detail-card,
  .maintenance-compact-card,
  .maintenance-document-card {
    border-color:
      #cccccc;

    background:
      #ffffff;
  }
}


/* =========================================================
   86. AJUSTE FINAL · SIN SCROLL HORIZONTAL
   ========================================================= */

.maintenance-page,
.maintenance-workspace,
.maintenance-active-tab,
.maintenance-tab-panel,
.maintenance-list,
.maintenance-record,
.maintenance-dynamic-tab,
.maintenance-modal,
.maintenance-modal__body,
.maintenance-form,
.maintenance-form-section,
.maintenance-ai-preview {
  max-width:
    100%;

  min-width:
    0;
}


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


/* =========================================================
   87. AJUSTE FINAL · TEXT WRAP
   ========================================================= */

.maintenance-page h1,
.maintenance-page h2,
.maintenance-page h3,
.maintenance-page p,
.maintenance-modal-root h1,
.maintenance-modal-root h2,
.maintenance-modal-root h3,
.maintenance-modal-root p {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   88. AJUSTE FINAL · TEXTOS LEÍBLES
   ========================================================= */

.maintenance-page,
.maintenance-modal-root {
  font-size:
    14px;
}


.maintenance-page
  input,
.maintenance-page
  select,
.maintenance-page
  textarea,
.maintenance-modal-root
  input,
.maintenance-modal-root
  select,
.maintenance-modal-root
  textarea {
  font-size:
    13px;
}


/* =========================================================
   89. AJUSTE FINAL · TRUE BLACK DARK
   ========================================================= */

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


:root[data-theme="dark"]
  .maintenance-modal,
html.dark
  .maintenance-modal,
body.dark
  .maintenance-modal {
  background:
    #0a0a0a;
}


/* =========================================================
   90. AJUSTE FINAL · SIN GLOW / BLUR / SHADOW
   ========================================================= */

.maintenance-page *,
.maintenance-modal-root *,
.maintenance-toast {
  box-shadow:
    none !important;

  filter:
    none;
}


/* =========================================================
   FIN PARTE 4 DE 4
   ========================================================= */