:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}:root{--bg:#000;--panel:#101010;--panel2:#151515;--white:#fff;--soft:#eaeaea;--muted:#b8b8b8;--border:#2c2c2c}*{box-sizing:border-box}body{background:var(--bg);color:var(--white);margin:0;font-family:Calibri,Arial,sans-serif;font-weight:300}.loginPage{background:radial-gradient(circle at top,#ffffff21,#0000 34%),linear-gradient(#050505,#000);justify-content:center;align-items:center;min-height:100vh;padding:28px 18px;display:flex}.loginPanel{text-align:center;width:100%;max-width:390px}.logoFrame{border:1px solid var(--white);background:#030303;border-radius:34px;justify-content:center;align-items:center;width:170px;height:170px;margin:0 auto 16px;display:flex;overflow:hidden}.logoFrame img{width:138px;height:auto}.brandImage{width:245px;max-width:82%;margin:0 auto;display:block}.subtitle{color:var(--soft);margin:8px 0 28px;font-size:20px;font-weight:300}.loginCard{text-align:left;background:linear-gradient(180deg, var(--panel2), var(--panel));border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 18px 35px #00000073}label{color:var(--soft);margin:12px 0 7px;font-size:15px;font-weight:300;display:block}input{width:100%;height:50px;color:var(--white);background:#050505;border:1px solid #3a3a3a;border-radius:13px;outline:none;padding:0 14px;font-family:Calibri,Arial,sans-serif;font-size:20px;font-weight:300}input:focus{border-color:var(--white)}button{letter-spacing:1px;cursor:pointer;border-radius:14px;width:100%;height:52px;margin-top:20px;font-family:Calibri,Arial,sans-serif;font-size:17px;font-weight:400}.btnPrimary{background:var(--soft);color:#000;border:none}.version{color:#777;margin-top:22px;font-size:13px;font-weight:300}.brandSub{color:#fff;margin:-42px 0 4px;font-size:21px;font-weight:300}.subtitle{color:#b8b8b8;font-size:17px;font-weight:300;margin:0 0 14px!important}.subtitle{margin-top:2px!important}.brandSub{letter-spacing:1.8px;text-transform:uppercase;font-size:21px;font-weight:600;letter-spacing:1.2px!important;letter-spacing:.5px!important;font-family:Trajan Pro,"Trajan Pro 3",Times New Roman,serif!important;font-size:18px!important;font-weight:400!important}.portalText{color:#8f8f8f;letter-spacing:.6px;margin:-18px 0 22px;font-size:14px;font-weight:300}.errorBox{color:#ffb3b3;background:#ff00001f;border:1px solid #7a1f1f;border-radius:12px;margin-top:14px;padding:10px 12px;font-size:14px}button:disabled{opacity:.65;cursor:not-allowed}.mainPage{background:radial-gradient(circle at top,#ffffff21,#0000 34%),linear-gradient(#050505,#000);justify-content:center;align-items:center;min-height:100vh;padding:28px 18px;display:flex}.mainPanel{text-align:center;width:100%;max-width:420px}.mainLogo{width:160px;margin-bottom:10px}.mainPanel h1{margin:0;font-size:28px;font-weight:300}.mainText{margin:8px 0 2px;font-size:22px}.mainMuted{color:#aaa;margin:0 0 22px}.dashboardCard{text-align:left;background:linear-gradient(#151515,#101010);border:1px solid #2c2c2c;border-radius:22px;margin:20px 0;padding:20px}.dashboardCard h2{margin-top:0;font-size:20px}.trabajosPanel{max-width:520px}.topBar{text-align:left;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.topBar h1{margin:0;font-size:28px;font-weight:300}.topBar p{color:#aaa;margin:4px 0 0}.miniButton{color:#fff;background:0 0;border:1px solid #555;border-radius:12px;width:auto;height:38px;margin:0;padding:0 16px;font-size:14px}.trabajosList{gap:12px;margin-top:16px;display:grid}.trabajoCard{text-align:left;background:linear-gradient(#151515,#101010);border:1px solid #2c2c2c;border-radius:20px;padding:16px}.trabajoHeader{justify-content:space-between;align-items:center;gap:12px;display:flex}.trabajoHeader strong{font-size:18px;font-weight:400}.pillOk,.pillPendiente{border-radius:999px;padding:5px 10px;font-size:12px}.pillOk{color:#bfffd4;background:#2d7a452e;border:1px solid #2d7a45}.pillPendiente{color:#ddd;background:#ffffff0f;border:1px solid #555}.cliente{margin:12px 0 4px;font-size:19px}.servicio{color:#ddd;margin:0;font-size:15px}.trabajoMeta{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.trabajoMeta span{color:#aaa;border:1px solid #333;border-radius:999px;padding:4px 8px;font-size:13px}.menuGrid{gap:12px;margin:24px 0;display:grid}.menuCard{text-align:left;color:#fff;background:linear-gradient(#151515,#101010);border:1px solid #2c2c2c;border-radius:20px;width:100%;height:auto;margin:0;padding:18px}.menuCard span{margin-bottom:8px;font-size:28px;display:block}.menuCard strong{margin-bottom:4px;font-size:19px;font-weight:400;display:block}.menuCard small{color:#aaa;font-size:14px}.trabajoCompact{background:linear-gradient(#171717,#101010);border:1px solid #2c2c2c;border-radius:18px;grid-template-columns:190px 1fr 54px;align-items:center;gap:12px;min-height:112px;padding:14px 12px 14px 18px;display:grid;position:relative;overflow:hidden}.trabajoCompact:before{content:"";background:#777;width:6px;height:100%;position:absolute;top:0;left:0}.trabajoCompact.fichaOk:before{background:#38b54a}.trabajoCompact.fichaNo:before{background:#9a9a9a}.compactCols{grid-template-columns:repeat(3,1fr);height:78px;display:grid}.miniCol{text-align:center;border-right:1px solid #333;flex-direction:column;justify-content:center;display:flex}.miniCol:last-child{border-right:none}.miniCol span{color:#bdbdbd;letter-spacing:.7px;font-size:11px}.miniCol strong{color:#eaeaea;margin-top:6px;font-size:26px;font-weight:400}.fichaOk .miniCol strong{color:#62d45f}.fichaNo .miniCol strong{color:#9f9f9f}.compactInfo{text-align:left;min-width:0}.fechaMini{color:#9f9f9f;margin-bottom:5px;font-size:13px}.fichaOk .fechaMini{color:#62d45f}.servicioCompact{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:300;line-height:1.1;overflow:hidden}.clienteCompact{color:#bdbdbd;white-space:nowrap;text-overflow:ellipsis;margin-top:5px;font-size:14px;overflow:hidden}.fichaIcon{color:#aaa;background:rgba(exit q q cat >> src/styles/theme.css <<"EOF" .trabajoCompact { position: relative; display: grid; grid-template-columns: 190px 1fr 54px; gap: 12px; align-items: center; min-height: 112px; padding: 14px 12px 14px 18px; border: 1px solid #2c2c2c; border-radius: 18px; background: linear-gradient(180deg, #171717, #101010); overflow: hidden; } .trabajoCompact::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: #777; } .trabajoCompact.fichaOk::before { background: #38b54a; } .trabajoCompact.fichaNo::before { background: #9a9a9a; } .compactCols { display: grid; grid-template-columns: repeat(3, 1fr); height: 78px; } .miniCol { text-align: center; border-right: 1px solid #333; display: flex; flex-direction: column; justify-content: center; } .miniCol:last-child { border-right: none; } .miniCol span { color: #bdbdbd; font-size: 11px; letter-spacing: .7px; } .miniCol strong { margin-top: 6px; font-size: 26px; font-weight: 400; color: #eaeaea; } .fichaOk .miniCol strong { color: #62d45f; } .fichaNo .miniCol strong { color: #9f9f9f; } .compactInfo { min-width: 0; text-align: left; } .fechaMini { color: #9f9f9f; font-size: 13px; margin-bottom: 5px; } .fichaOk .fechaMini { color: #62d45f; } .servicioCompact { color: #fff; font-size: 20px; font-weight: 300; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clienteCompact { color: #bdbdbd; font-size: 14px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fichaIcon { width: 48px; height: 48px; border: 1px solid #555; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #aaa; background: #ffffff08; } .fichaOk .fichaIcon { border-color: #2d7a45; color: #62d45f; background: #2d7a451f; } .fichaNo .fichaIcon { border-color: #555; color: #aaa; } @media (max-width: 430px) { .trabajoCompact { grid-template-columns: 150px 1fr 46px; gap: 8px; padding: 12px 10px 12px 14px; min-height: 104px; } .compactCols { height: 72px; } .miniCol span { font-size: 10px; } .miniCol strong { font-size: 22px; } .servicioCompact { font-size: 17px; } .clienteCompact { font-size: 13px; } .fichaIcon { width: 42px; height: 42px; font-size: 22px; } } .trabajoCompact { position: relative; display: grid; grid-template-columns: 190px 1fr 54px; gap: 12px; align-items: center; min-height: 112px; padding: 14px 12px 14px 18px; border: 1px solid #2c2c2c; border-radius: 18px; background: linear-gradient(180deg, #171717, #101010); overflow: hidden; } .trabajoCompact::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: #777; } .trabajoCompact.fichaOk::before { background: #38b54a; } .trabajoCompact.fichaNo::before { background: #9a9a9a; } .compactCols { display: grid; grid-template-columns: repeat(3, 1fr); height: 78px; } .miniCol { text-align: center; border-right: 1px solid #333; display: flex; flex-direction: column; justify-content: center; } .miniCol:last-child { border-right: none; } .miniCol span { color: #bdbdbd; font-size: 11px; letter-spacing: .7px; } .miniCol strong { margin-top: 6px; font-size: 26px; font-weight: 400; color: #eaeaea; } .fichaOk .miniCol strong { color: #62d45f; } .fichaNo .miniCol strong { color: #9f9f9f; } .compactInfo { min-width: 0; text-align: left; } .fechaMini { color: #9f9f9f; font-size: 13px; margin-bottom: 5px; } .fichaOk .fechaMini { color: #62d45f; } .servicioCompact { color: #fff; font-size: 20px; font-weight: 300; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clienteCompact { color: #bdbdbd; font-size: 14px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fichaIcon { width: 48px; height: 48px; border: 1px solid #555; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #aaa; background: #ffffff08; } .fichaOk .fichaIcon { border-color: #2d7a45; color: #62d45f; background: #2d7a451f; } .fichaNo .fichaIcon { border-color: #555; color: #aaa; } @media (max-width: 430px) { .trabajoCompact { grid-template-columns: 150px 1fr 46px; gap: 8px; padding: 12px 10px 12px 14px; min-height: 104px; } .compactCols { height: 72px; } .miniCol span { font-size: 10px; } .miniCol strong { font-size: 22px; } .servicioCompact { font-size: 17px; } .clienteCompact { font-size: 13px; } .fichaIcon { width: 42px; height: 42px; font-size: 22px; } } .trabajoCompact { position: relative; display: grid; grid-template-columns: 160px 1fr 48px; gap: 10px; align-items: center; min-height: 98px; padding: 12px 10px 12px 16px; border: 1px solid #2c2c2c; border-radius: 18px; background: linear-gradient(180deg, #171717, #101010); overflow: hidden; } .trabajoCompact::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: #888; } .trabajoCompact.fichaOk::before { background: #38b54a; } .trabajoCompact.fichaNo::before { background: #9a9a9a; } .compactCols { display: grid; grid-template-columns: repeat(3, 1fr); height: 68px; } .miniCol { text-align: center; border-right: 1px solid #333; display: flex; flex-direction: column; justify-content: center; } .miniCol:last-child { border-right: none; } .miniCol span { color: #bdbdbd; font-size: 10px; letter-spacing: .6px; } .miniCol strong { margin-top: 5px; font-size: 22px; font-weight: 400; color: #ddd; } .fichaOk .miniCol strong { color: #62d45f; } .fichaNo .miniCol strong { color: #9f9f9f; } .compactInfo { min-width: 0; text-align: left; } .fechaMini { color: #9f9f9f; font-size: 13px; margin-bottom: 4px; } .fichaOk .fechaMini { color: #62d45f; } .servicioCompact { color: #fff; font-size: 17px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clienteCompact { color: #bdbdbd; font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fichaIcon { width: 42px; height: 42px; border: 1px solid #555; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; opacity: .9; } .fichaOk .fichaIcon { border-color: #2d7a45; background: #2d7a451f; } .fichaNo .fichaIcon { filter: grayscale(1); opacity: .55; }  @font-face { font-family: "Cinzel"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/cinzel-latin-ext-400-normal-XQK_CSAr.woff2) format("woff2"), url(/assets/cinzel-latin-ext-400-normal-DJ0Lq8y-.woff) format("woff"); unicode-range: U100-2BA,U2BD-02C5,U2C7-02CC,U2CE-02D7,U2DD-02FF,U304,U308,U329,U1D00-1DBF,U1-1000000000F,U1EF2-1EFF,U2020,U20A0-20AB,U20AD-20C0,U2113,U2C60-2C7F,U+A720-A7FF; }  @font-face { font-family: "Cinzel"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/cinzel-latin-400-normal-DnUIPmzd.woff2) format("woff2"), url(/assets/cinzel-latin-400-normal-C8jUSQqm.woff) format("woff"); unicode-range: U0-0FF,U131,U152-153,U2BB-02BC,U2C6,U2DA,U2DC,U304,U308,U329,U2000-206F,U20AC,U2122,U2191,U2193,U2212,U2215,U+FEFF,U+FFFD; } .fichaPreview { width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; cursor: pointer !important; flex-shrink: 0 !important; background: #151515 !important; font-size: 9px !important; text-align: center !important; line-height: 1.05 !important; font-weight: 700 !important; padding: 3px !important; box-sizing: border-box !important; white-space: normal !important; } .fichaPreview.sinFicha { border: 1px solid #777 !important; color: #bdbdbd !important; } .fichaPreview.conFicha { border: 2px solid #3cff5a !important; color: #3cff5a !important; } .fichaPreview.conFoto { border: 2px solid #3cff5a !important; padding: 0 !important; } .fichaMiniatura { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }  .filtrosTrabajos { display: grid !important; grid-template-columns: 1fr .72fr 1.35fr !important; gap: 10px !important; margin: 18px 0 14px 0 !important; align-items: end !important; } .filtroGrupo { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; } .filtroGrupo label { color: #cfcfcf !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-left: 4px !important; } .filtroControl { width: 100% !important; height: 44px !important; min-height: 44px !important; border-radius: 13px !important; border: 1px solid #555 !important; background: #050505 !important; color: #fff !important; padding: 0 12px !important; font-size: 14px !important; box-sizing: border-box !important; outline: none !important; appearance: auto !important; } .filtroControl::placeholder { color: #8f8f8f !important; } .filtroFecha { max-width: 190px !important; } .filtroServicio { min-width: 210px !important; } @media (max-width: 720px) { .filtrosTrabajos { grid-template-columns: 1fr !important; } .filtroFecha, .filtroServicio { max-width: none !important; min-width: 0 !important; } });border:1px solid #555;border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;font-size:26px;display:flex}
.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;

  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.hero {
  position: relative;

  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }

  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }

  .framework,
  .vite {
    position: absolute;
  }

  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }

  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
}

#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;

  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}

#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;

  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }

  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}

#docs {
  border-right: 1px solid var(--border);

  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;

  .logo {
    height: 18px;
  }

  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }

  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex: 1 1 calc(50% - 8px);
    }

    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}

/* FIX MOBILE SELECT SERVICIO */
@media (max-width: 700px) {
  .filtrosTrabajos {
    width: 100%;
    max-width: 100%;
  }

  .filtroGrupo {
    width: 100%;
    max-width: 260px;
  }

  .filtroControl {
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
  }

  .filtroServicio {
    width: 260px !important;
    max-width: 260px !important;
  }

  .filtroFecha {
    width: 260px !important;
    max-width: 260px !important;
  }
}

/* FIX DEFINITIVO MOBILE LISTADO TRABAJOS */
@media (max-width:700px){
  .topBar{
    display:grid!important;
    grid-template-columns:180px 1fr!important;
    gap:14px!important;
    align-items:start!important;
    overflow:visible!important;
  }

  .topBar > div:first-child{
    grid-column:1!important;
  }

  .filtrosTrabajos{
    grid-column:2!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    overflow:visible!important;
  }

  .filtroGrupo{
    width:100%!important;
    max-width:100%!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .miniButton{
    grid-column:2!important;
    width:100%!important;
    max-width:160px!important;
    justify-self:start!important;
    margin-top:6px!important;
    display:block!important;
  }
}

/* LAYOUT MOBILE LISTADO TRABAJOS - BOTONES BAJO TITULO */
.accionesTituloTrabajos{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
  max-width:210px;
}

.btnActualizarCompact{
  width:100%;
}

@media (max-width:700px){
  .topBar{
    display:grid!important;
    grid-template-columns:170px 1fr!important;
    gap:14px!important;
    align-items:start!important;
    overflow:visible!important;
  }

  .tituloTrabajosBox{
    grid-column:1!important;
  }

  .tituloTrabajosBox h1{
    font-size:42px!important;
    line-height:.95!important;
  }

  .tituloTrabajosBox p{
    font-size:24px!important;
  }

  .accionesTituloTrabajos .miniButton,
  .accionesTituloTrabajos .btnSecondary{
    width:150px!important;
    max-width:150px!important;
    padding:14px 10px!important;
    font-size:20px!important;
  }

  .filtrosTrabajos{
    grid-column:2!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
  }

  .filtroGrupo,
  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* FIX FINAL LISTADO TRABAJOS MOBILE V2 */
@media (max-width:700px){
  .topBar{
    display:grid!important;
    grid-template-columns:170px 1fr!important;
    gap:14px!important;
    align-items:start!important;
    overflow:hidden!important;
  }

  .tituloTrabajosBox{
    grid-column:1!important;
    width:170px!important;
    max-width:170px!important;
  }

  .accionesTituloTrabajos{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    margin-top:16px!important;
    width:140px!important;
    max-width:140px!important;
  }

  .accionesTituloTrabajos .miniButton,
  .accionesTituloTrabajos .btnActualizarCompact{
    display:block!important;
    width:140px!important;
    max-width:140px!important;
    min-width:140px!important;
    padding:12px 8px!important;
    font-size:20px!important;
    text-align:center!important;
  }

  .accionesTituloTrabajos .btnActualizarCompact{
    font-size:26px!important;
    line-height:1!important;
  }

  .filtrosTrabajos{
    grid-column:2!important;
    width:calc(100vw - 220px)!important;
    max-width:calc(100vw - 220px)!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    overflow:hidden!important;
  }

  .filtroGrupo{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* FIX MOBILE DEFINITIVO - UNA COLUMNA SIN DESBORDE */
@media (max-width:700px){
  html, body, #root {
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  main, section, .topBar {
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  .topBar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
  }

  .tituloTrabajosBox{
    width:100%!important;
    max-width:100%!important;
  }

  .accionesTituloTrabajos{
    display:flex!important;
    flex-direction:row!important;
    gap:10px!important;
    margin-top:14px!important;
    width:100%!important;
    max-width:100%!important;
  }

  .accionesTituloTrabajos .miniButton{
    width:130px!important;
    max-width:130px!important;
    min-width:130px!important;
  }

  .accionesTituloTrabajos .btnActualizarCompact{
    width:64px!important;
    max-width:64px!important;
    min-width:64px!important;
    font-size:26px!important;
    padding:12px 0!important;
  }

  .filtrosTrabajos{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    overflow:hidden!important;
  }

  .filtroGrupo{
    width:100%!important;
    max-width:100%!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* MOBILE LISTADO TRABAJOS - OVERRIDE FINAL LIMPIO */
@media (max-width:700px){
  html,body,#root{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .topBar{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .tituloTrabajosBox{
    width:100%!important;
    max-width:100%!important;
    margin-bottom:18px!important;
  }

  .accionesTituloTrabajos{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    width:120px!important;
    max-width:120px!important;
    margin-top:14px!important;
  }

  .accionesTituloTrabajos .miniButton,
  .accionesTituloTrabajos .btnActualizarCompact{
    width:120px!important;
    min-width:120px!important;
    max-width:120px!important;
    padding:12px 8px!important;
    font-size:18px!important;
    text-align:center!important;
  }

  .accionesTituloTrabajos .btnActualizarCompact{
    font-size:26px!important;
    line-height:1!important;
  }

  .filtrosTrabajos{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .filtroGrupo{
    width:100%!important;
    max-width:100%!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* HARD FIX MOBILE LISTADO */
@media (max-width:900px){
  body, #root, .app, main, section{
    width:100vw!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .topBar{
    display:grid!important;
    grid-template-columns:170px 1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:14px!important;
    overflow:hidden!important;
  }

  .tituloTrabajosBox{
    width:160px!important;
    max-width:160px!important;
  }

  .filtrosTrabajos{
    width:calc(100vw - 230px)!important;
    max-width:calc(100vw - 230px)!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:18px!important;
    box-sizing:border-box!important;
  }

  .accionesTituloTrabajos{
    width:90px!important;
    max-width:90px!important;
  }

  .accionesTituloTrabajos .miniButton{
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    font-size:18px!important;
    padding:10px 4px!important;
  }

  .accionesTituloTrabajos .btnActualizarCompact{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:52px!important;
    padding:0!important;
    font-size:34px!important;
    line-height:1!important;
  }
}

/* HARD FIX MOBILE LISTADO */
@media (max-width:900px){
  body, #root, .app, main, section{
    width:100vw!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .topBar{
    display:grid!important;
    grid-template-columns:170px 1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:14px!important;
    overflow:hidden!important;
  }

  .tituloTrabajosBox{
    width:160px!important;
    max-width:160px!important;
  }

  .filtrosTrabajos{
    width:calc(100vw - 230px)!important;
    max-width:calc(100vw - 230px)!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .filtroControl,
  .filtroFecha,
  .filtroServicio{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:18px!important;
    box-sizing:border-box!important;
  }

  .accionesTituloTrabajos{
    width:90px!important;
    max-width:90px!important;
  }

  .accionesTituloTrabajos .miniButton{
    width:90px!important;
    min-width:90px!important;
    max-width:90px!important;
    font-size:18px!important;
    padding:10px 4px!important;
  }

  .accionesTituloTrabajos .btnActualizarCompact{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:52px!important;
    padding:0!important;
    font-size:34px!important;
    line-height:1!important;
  }
}