/* GARAGEM88 — Configurações mobile aprovadas.
   Apenas dashboard de Configurações, sem alterar modais, dados ou desktop. */
@media(max-width:600px){
 body:has(#g88SettingsScreen:not([hidden])){background:#f1f6fb}
 body:has(#g88SettingsScreen:not([hidden])) .system{display:block!important;min-width:0!important}
 body:has(#g88SettingsScreen:not([hidden])) .system > .content{
   box-sizing:border-box;min-width:0!important;max-width:100%!important;
   padding:13px 12px 95px!important;
 }
 #g88SettingsScreen:has(> .gcfg-dashboard-v849){
   box-sizing:border-box;width:100%!important;min-width:0!important;
   max-width:100%!important;padding:0 0 24px!important;
   margin:0!important;overflow:visible!important;
 }
 #g88SettingsScreen > .gcfg-dashboard-v849 {
   width:100%!important;max-width:100%!important;min-width:0!important;
   margin:0!important;padding:0!important;background:transparent!important;
   box-sizing:border-box;overflow:visible!important;
   font-family:Inter,'Segoe UI',Arial,sans-serif;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-welcome{
   padding:0!important;margin:0 0 16px!important;background:transparent!important;
   border:0!important;box-shadow:none!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-title{
   display:block!important;margin:0 0 5px!important;padding:0!important;
   color:#072547!important;font:850 25px/1.15 Inter,'Segoe UI',Arial,sans-serif!important;
   letter-spacing:-.6px!important;text-align:left!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-sub{
   margin:0!important;padding:0!important;font:400 12px/1.5 Inter,'Segoe UI',Arial,sans-serif!important;
   color:#6a7e95!important;text-align:left!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-intro-note{
   box-sizing:border-box;display:flex!important;align-items:center!important;gap:10px!important;
   width:100%!important;min-width:0!important;min-height:0!important;
   margin:0 0 17px!important;padding:11px 12px!important;
   border:0!important;border-radius:13px!important;
   background:#e9f2ff!important;color:#174e9d!important;
   font:550 11px/1.4 Inter,'Segoe UI',Arial,sans-serif!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-intro-icon {
   display:grid!important;place-items:center!important;
   flex:0 0 24px!important;width:24px!important;height:24px!important;
   margin:0!important;padding:0!important;color:#066ce5!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-intro-icon svg {
   display:block!important;width:22px!important;height:22px!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tiles{
   box-sizing:border-box;display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   grid-auto-flow:row!important;grid-auto-rows:auto!important;
   gap:10px!important;width:100%!important;min-width:0!important;
   max-width:100%!important;align-items:stretch!important;
   margin:0!important;padding:0!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile,
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-notas{
   appearance:none;box-sizing:border-box;position:relative;
   display:grid!important;grid-column:1!important;grid-row:auto!important;
   grid-template-columns:48px minmax(0,1fr) 20px!important;
   grid-template-rows:auto!important;
   column-gap:12px!important;row-gap:0!important;
   align-items:center!important;align-content:center!important;
   width:100%!important;min-width:0!important;max-width:100%!important;
   min-height:84px!important;height:auto!important;
   margin:0!important;padding:13px 12px!important;
   background:#fff!important;border:1px solid #e2eaf5!important;
   border-radius:15px!important;box-shadow:0 4px 14px #193b5c0c!important;
   text-align:left!important;color:#102949!important;
   transform:none!important;overflow:visible!important;
   font-family:Inter,'Segoe UI',Arial,sans-serif!important;
   cursor:pointer;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile:hover{
   background:#fafdff!important;border-color:#a8cbfa!important;
   box-shadow:0 4px 15px #193b5c15!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile:active{
   background:#f3f8ff!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile:focus-visible{
   outline:3px solid #86bbff!important;outline-offset:2px!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-icon{
   box-sizing:border-box;display:grid!important;place-items:center!important;
   grid-column:1!important;grid-row:1!important;align-self:center!important;
   flex:none!important;width:48px!important;height:48px!important;
   min-width:48px!important;min-height:48px!important;
   margin:0!important;padding:0!important;border-radius:50%!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-icon svg {
   display:block!important;width:25px!important;height:25px!important;
   fill:none!important;stroke:currentColor!important;stroke-width:2.2!important;
   stroke-linecap:round!important;stroke-linejoin:round!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-main {
   box-sizing:border-box;display:flex!important;flex-direction:column!important;
   justify-content:center!important;align-self:center!important;
   grid-column:2!important;grid-row:1!important;
   width:100%!important;min-width:0!important;max-width:100%!important;
   margin:0!important;padding:0!important;
   overflow-wrap:break-word!important;white-space:normal!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-main strong {
   display:block!important;color:#0b2545!important;
   font:800 15px/1.28 Inter,'Segoe UI',Arial,sans-serif!important;
   letter-spacing:-.28px!important;
   margin:0!important;padding:0!important;white-space:normal!important;
   overflow-wrap:normal!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-main small {
   display:block!important;margin:4px 0 0!important;padding:0!important;
   color:#6a7e99!important;font:400 11px/1.35 Inter,'Segoe UI',Arial,sans-serif!important;
   white-space:normal!important;overflow-wrap:break-word!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-arrow,
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-pagamento .gcfg-tile-arrow{
   box-sizing:border-box;display:grid!important;place-items:center!important;
   grid-column:3!important;grid-row:1!important;align-self:center!important;
   justify-self:end!important;position:static!important;flex:none!important;
   width:20px!important;height:30px!important;min-width:20px!important;
   margin:0!important;padding:0!important;border:0!important;
   border-radius:0!important;background:transparent!important;
   color:#7487a3!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-arrow svg {
   display:block!important;width:19px!important;height:19px!important;
   stroke-width:2.3!important;stroke:currentColor!important;fill:none!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-detail {
   display:none!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-empresa .gcfg-tile-icon{background:#e3f8ee!important;color:#06936b!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-usuarios .gcfg-tile-icon{background:#e6f1ff!important;color:#0b74ee!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-servicos .gcfg-tile-icon{background:#f0eaff!important;color:#7354d7!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-agenda .gcfg-tile-icon{background:#fff4d9!important;color:#c88609!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-financeiro .gcfg-tile-icon{background:#ffe9ea!important;color:#cc2d3e!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-pagamento .gcfg-tile-icon{background:#e8f2ff!important;color:#0969e7!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-notas .gcfg-tile-icon{background:#efe8ff!important;color:#7950c8!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-meta .gcfg-tile-icon{background:#fff3e6!important;color:#dc7c15!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-preferencias .gcfg-tile-icon{background:#eef3f8!important;color:#486887!important}
}
@media(max-width:360px){
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile,
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-notas{
   grid-template-columns:43px minmax(0,1fr) 17px!important;
   gap:9px!important;padding:11px 9px!important;min-height:78px!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-icon{
   width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important;
 }
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-main strong{font-size:13.5px!important}
 #g88SettingsScreen .gcfg-dashboard-v849 .gcfg-tile-main small{font-size:10.5px!important}
}


/* GARAGEM88 mobile — quadros de proteção dos dados e cópia dos cadastros */
@media (max-width:600px) {
  /* Um ÚNICO cartão Backup e sincronização agrupa todos os controles e
     subseções sem recriar os botões, eventos ou dados. */
  #g88SettingsScreen .gcfg-backup-page > #g88DataSafetySettings:not([hidden]) {
    box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;
    gap:0!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:17px 0 22px!important;padding:17px 13px!important;
    border:1px solid #e0eaf5!important;border-radius:17px!important;
    background:#fff!important;color:#112d4e!important;
    box-shadow:0 5px 17px #12365e0c!important;font-family:Inter,'Segoe UI',Arial,sans-serif!important;
  }
  /* Título geral, descrição e botão da nuvem ficam DENTRO do cartão branco. */
  #g88SettingsScreen #g88DataSafetySettings > h2 {
    margin:0 0 6px!important;padding:0!important;
    font:800 18px/1.25 Inter,'Segoe UI',Arial,sans-serif!important;
    color:#0b294b!important;letter-spacing:-.25px;
  }
  #g88SettingsScreen #g88DataSafetySettings > p {
    margin:0 0 13px!important;padding:0!important;
    font:400 11.5px/1.5 Inter,'Segoe UI',Arial,sans-serif!important;
    color:#637c95!important;
  }
  #g88SettingsScreen #g88DataSafetySettings > #g88OpenCloudFromSettings {
    box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;width:100%!important;min-height:44px!important;
    padding:11px 12px!important;margin:0 0 14px!important;
    border:1px solid #096ce7!important;border-radius:11px!important;
    background:#0b6ee7!important;color:#fff!important;
    font:750 12px/1.3 Inter,'Segoe UI',Arial,sans-serif!important;
    text-align:center!important;box-shadow:0 3px 9px #0b6ee71a!important;
  }
  #g88SettingsScreen #g88DataSafetySettings > #g88BackupSettingsSlot {
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;
  }
  /* Cartão 1: Proteção dos dados, status e ações de sincronização. */
  #g88SettingsScreen #g88DataSafetySettings #g88BackupPanel:not([hidden]) {
    box-sizing:border-box!important;
    position:static!important;z-index:auto!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;gap:9px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:14px 11px!important;
    background:#f5f9ff!important;color:#173250!important;
    border:1px solid #deebfb!important;border-radius:12px!important;
    box-shadow:none!important;
    font-family:Inter,'Segoe UI',Arial,sans-serif!important;
  }
  #g88SettingsScreen #g88BackupPanel > strong {
    display:block!important;grid-column:1/-1!important;
    margin:0!important;color:#0b2a4d!important;
    font:800 16px/1.3 Inter,'Segoe UI',Arial,sans-serif!important;
  }
  #g88SettingsScreen #g88BackupPanel > #g88BackupStatus {
    box-sizing:border-box!important;display:block!important;grid-column:1/-1!important;
    margin:0 0 3px!important;padding:10px 12px!important;
    border-radius:9px!important;background:#eff5ff!important;
    color:#35658f!important;font:500 11.5px/1.4 Inter,'Segoe UI',Arial,sans-serif!important;
    overflow-wrap:anywhere!important;
  }
  #g88SettingsScreen #g88BackupPanel > button {
    box-sizing:border-box!important;display:flex!important;align-items:center!important;
    justify-content:center!important;min-width:0!important;
    width:100%!important;min-height:44px!important;height:auto!important;
    padding:9px 7px!important;margin:0!important;
    border:1px solid #c9dcf2!important;border-radius:10px!important;
    background:#f4f9ff!important;color:#125fad!important;
    font:750 11.3px/1.3 Inter,'Segoe UI',Arial,sans-serif!important;
    text-align:center!important;white-space:normal!important;
    overflow-wrap:break-word!important;cursor:pointer!important;
  }
  #g88SettingsScreen #g88BackupPanel > #g88BackupSave {
    background:#0870e9!important;border-color:#0870e9!important;color:#fff!important;
  }
  #g88SettingsScreen #g88BackupPanel > #g88BackupRecover {
    background:#edf5ff!important;color:#135cae!important;
  }
  #g88SettingsScreen #g88BackupPanel > #g88BackupLocal {
    grid-column:1/-1!important;background:#fff!important;
    border-color:#bfdbf7!important;color:#0b65c8!important;
  }
  #g88SettingsScreen #g88BackupPanel > p:not(#g88BackupStatus) {
    grid-column:1/-1!important;
    margin:3px 0 0!important;padding:0!important;
    font:400 10.5px/1.45 Inter,'Segoe UI',Arial,sans-serif!important;
    color:#7790a8!important;text-align:left!important;
  }
  /* Cópia dos cadastros: subseção DENTRO do mesmo cartão principal. */
  #g88SettingsScreen .gcfg-backup-page #g88CadastrosBackupPanel:not([hidden]) {
    box-sizing:border-box!important;display:block!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:15px 0 0!important;padding:16px 0 0!important;
    border:0!important;border-top:1px solid #dce7f4!important;border-radius:0!important;
    background:transparent!important;color:#173250!important;
    box-shadow:none!important;
    font-family:Inter,'Segoe UI',Arial,sans-serif!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > h2 {
    margin:0 0 8px!important;padding:0!important;
    color:#0b2a4d!important;font:800 16px/1.3 Inter,'Segoe UI',Arial,sans-serif!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > p {
    margin:0 0 13px!important;padding:0!important;
    font:400 11.5px/1.5 Inter,'Segoe UI',Arial,sans-serif!important;
    color:#647d96!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > div {
    box-sizing:border-box!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > div > button {
    box-sizing:border-box!important;display:flex!important;
    align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;min-height:44px!important;
    padding:9px 7px!important;margin:0!important;
    font:750 11.3px/1.3 Inter,'Segoe UI',Arial,sans-serif!important;
    text-align:center!important;white-space:normal!important;
    border:1px solid #c9dff7!important;border-radius:10px!important;
    background:#f4f9ff!important;color:#0d65c2!important;
    overflow-wrap:break-word!important;cursor:pointer!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > div > #g88BackupExport {
    background:#eaf3ff!important;border-color:#bdd9fc!important;
  }
  #g88SettingsScreen #g88CadastrosBackupPanel > div > #g88BackupImport {
    background:#fff!important;border-color:#a9c9f5!important;
  }
  #g88SettingsScreen #g88DataSafetySettings button:focus-visible,
  #g88SettingsScreen #g88CadastrosBackupPanel button:focus-visible {
    outline:3px solid #87bcff!important;outline-offset:2px!important;
  }
}
@media(max-width:350px){
  #g88SettingsScreen .gcfg-backup-page > #g88DataSafetySettings:not([hidden]){padding:14px 10px!important}
  #g88SettingsScreen #g88BackupPanel{padding:12px 8px!important}
  #g88SettingsScreen #g88CadastrosBackupPanel{padding:14px 0 0!important}
  #g88SettingsScreen #g88BackupPanel > button,
  #g88SettingsScreen #g88CadastrosBackupPanel > div > button{font-size:10.5px!important}
}


/* GARAGEM88 mobile — subpágina exclusiva de Backup e sincronização. */
@media(max-width:600px){
 #g88SettingsScreen:has(> .gcfg-backup-page){
   box-sizing:border-box;width:100%!important;max-width:100%!important;
   min-width:0!important;margin:0!important;padding:0 0 24px!important;
   overflow:visible!important;
 }
 #g88SettingsScreen > .gcfg-backup-page {
   box-sizing:border-box;display:flex;flex-direction:column;gap:0;
   width:100%;max-width:100%;min-width:0;margin:0;padding:0;
   font-family:Inter,'Segoe UI',Arial,sans-serif;
 }
 #g88SettingsScreen .gcfg-backup-page-head {
   display:flex;flex-direction:column;align-items:flex-start;
   gap:0;width:100%;min-width:0;margin:0;padding:0;
 }
 #g88SettingsScreen .gcfg-backup-back {
   display:inline-flex;align-items:center;justify-content:center;
   margin:0 0 17px;padding:9px 11px;min-height:39px;
   border:1px solid #cbdff6;border-radius:10px;
   background:#f0f6ff;color:#1261b6;cursor:pointer;
   font:750 11.5px/1.25 Inter,'Segoe UI',Arial,sans-serif;
 }
 #g88SettingsScreen .gcfg-backup-page-head h1 {
   margin:0 0 6px;padding:0;color:#082748;
   font:850 25px/1.15 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:-.7px;
 }
 #g88SettingsScreen .gcfg-backup-page-head > p {
   margin:0 0 2px;padding:0;font:400 12px/1.45 Inter,'Segoe UI',Arial,sans-serif;
   color:#637d98;
 }
 #g88SettingsScreen .gcfg-backup-page > #g88DataSafetySettings:not([hidden]){
   margin:13px 0 24px!important;
 }
 /* O nome já aparece no título da página, evitando repetição. */
 #g88SettingsScreen .gcfg-backup-page > #g88DataSafetySettings > h2 {
   display:none!important;
 }
 #g88SettingsScreen .gcfg-backup-page > #g88DataSafetySettings > p {
   margin:0 0 14px!important;
 }
 #g88SettingsScreen .gcfg-backup-page button:focus-visible{
   outline:3px solid #82b9ff!important;outline-offset:2px!important;
 }
}