/* Gestor STA — V22
   Padrão visual desktop 80%
   Objetivo: quando o navegador estiver em 100%, a versão computador deve parecer mais compacta,
   semelhante a trabalhar com zoom visual de 80%, sem afetar tablet/mobile. */

@media (min-width: 1041px) {
  :root {
    --sta-sidebar-collapsed: 48px;
    --sta-sidebar-expanded: 206px;
    --sta-sidebar-button: 34px;
    --sta-sidebar-icon: 17px;
    --inicio-radius: 13px;
    --inicio-shadow: 0 9px 24px rgba(7, 23, 59, .065);
  }

  /* Base desktop */
  body {
    font-size: 12.8px;
  }

  /* =========================
     SIDEBAR — desktop 80%
     ========================= */
  .inicio-main {
    margin-left: var(--sta-sidebar-collapsed) !important;
  }

  .inicio-sidebar {
    width: var(--sta-sidebar-collapsed) !important;
  }

  .inicio-sidebar:hover,
  .inicio-sidebar:focus-within {
    width: var(--sta-sidebar-expanded) !important;
  }

  .inicio-sidebar-content {
    padding: 14px 7px 14px !important;
  }

  .inicio-sidebar:not(:hover):not(:focus-within) .inicio-sidebar-content {
    padding: 12px 0 12px !important;
  }

  .inicio-sidebar-logo {
    height: 42px !important;
    min-height: 42px !important;
    margin-bottom: 14px !important;
  }

  .inicio-sidebar:not(:hover):not(:focus-within) .inicio-sidebar-logo {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-bottom: 10px !important;
  }

  .inicio-logo-icon {
    width: 27px !important;
    height: 27px !important;
  }

  .inicio-sidebar:not(:hover):not(:focus-within) .inicio-logo-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .inicio-logo-full {
    width: 146px !important;
    max-width: 146px !important;
  }

  .inicio-menu {
    gap: 7px !important;
  }

  .inicio-menu > .inicio-pressable,
  .inicio-submenu-toggle,
  .inicio-sidebar-action {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    grid-template-columns: 34px 0 0 !important;
    border-radius: 10px !important;
    font-size: 11.2px !important;
  }

  .inicio-sidebar:hover .inicio-menu > .inicio-pressable,
  .inicio-sidebar:focus-within .inicio-menu > .inicio-pressable,
  .inicio-sidebar:hover .inicio-submenu-toggle,
  .inicio-sidebar:focus-within .inicio-submenu-toggle,
  .inicio-sidebar:hover .inicio-sidebar-action,
  .inicio-sidebar:focus-within .inicio-sidebar-action {
    width: calc(var(--sta-sidebar-expanded) - 20px) !important;
    min-width: calc(var(--sta-sidebar-expanded) - 20px) !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    grid-template-columns: 24px 1fr 15px !important;
    gap: 7px !important;
    border-radius: 9px !important;
  }

  .inicio-menu svg,
  .inicio-sidebar-action svg,
  .inicio-submenu-toggle > svg:first-child {
    width: 17px !important;
    height: 17px !important;
  }

  .inicio-sidebar:hover .inicio-menu span,
  .inicio-sidebar:focus-within .inicio-menu span,
  .inicio-sidebar:hover .inicio-sidebar-action span,
  .inicio-sidebar:focus-within .inicio-sidebar-action span,
  .inicio-sidebar:hover .inicio-user-card strong,
  .inicio-sidebar:focus-within .inicio-user-card strong,
  .inicio-sidebar:hover .inicio-user-card span,
  .inicio-sidebar:focus-within .inicio-user-card span {
    max-width: 138px !important;
  }

  .inicio-submenu {
    margin: 6px 7px 8px 40px !important;
    padding: 7px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }

  .inicio-menu-group.is-open .inicio-submenu {
    width: calc(var(--sta-sidebar-expanded) - 56px) !important;
    max-height: 400px !important;
  }

  .inicio-submenu a {
    min-height: 28px !important;
    padding: 6px 8px !important;
    font-size: 10.4px !important;
    line-height: 1.18 !important;
    border-radius: 8px !important;
  }

  .inicio-sidebar-footer {
    gap: 7px !important;
    padding-top: 10px !important;
  }

  .inicio-user-card {
    min-height: 34px !important;
  }

  .inicio-user-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }

  .inicio-sidebar:hover .inicio-user-card,
  .inicio-sidebar:focus-within .inicio-user-card {
    width: calc(var(--sta-sidebar-expanded) - 20px) !important;
    grid-template-columns: 32px 1fr !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  .inicio-user-card strong { font-size: 11px !important; }
  .inicio-user-card span { font-size: 9.5px !important; }

  /* =========================
     TOPBAR — desktop 80%
     ========================= */
  .inicio-topbar {
    height: 44px !important;
    grid-template-columns: minmax(130px, 1fr) minmax(220px, 352px) auto !important;
    gap: 11px !important;
    padding: 0 18px !important;
  }

  .inicio-top-left h1 {
    font-size: 14.5px !important;
  }

  .inicio-search {
    height: 30px !important;
    grid-template-columns: 18px 1fr auto !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  .inicio-search svg {
    width: 15px !important;
    height: 15px !important;
  }

  .inicio-search input {
    font-size: 11px !important;
  }

  .inicio-search kbd {
    padding: 2px 6px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
  }

  .inicio-top-actions { gap: 6px !important; }

  .inicio-top-icon {
    width: 31px !important;
    height: 31px !important;
  }

  .inicio-top-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .inicio-badge {
    min-width: 14px !important;
    height: 14px !important;
    font-size: 8.5px !important;
  }

  .inicio-notification-popover {
    width: 218px !important;
    padding: 11px !important;
    border-radius: 11px !important;
  }

  .inicio-notification-popover strong { font-size: 12px !important; }
  .inicio-notification-popover p { font-size: 10.5px !important; }

  /* =========================
     DASHBOARD /INICIO — desktop 80%
     ========================= */
  .inicio-content {
    padding: 17px 19px 20px !important;
    gap: 12px !important;
  }

  .inicio-hero-row {
    gap: 12px !important;
  }

  .inicio-greeting h2 {
    font-size: clamp(22px, 2.25vw, 29px) !important;
    letter-spacing: -.05em !important;
  }

  .inicio-greeting p,
  .inicio-tagline {
    font-size: 11.5px !important;
  }

  .inicio-greeting p { margin-top: 5px !important; }

  .inicio-kpi-grid {
    gap: 11px !important;
  }

  .inicio-kpi-card {
    min-height: 76px !important;
    grid-template-columns: 38px 1fr 20px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  .inicio-kpi-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .inicio-kpi-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .inicio-kpi-body span {
    font-size: 10px !important;
  }

  .inicio-kpi-body strong {
    margin-top: 1px !important;
    font-size: 20px !important;
  }

  .inicio-kpi-body small {
    margin-top: 4px !important;
    font-size: 9.4px !important;
  }

  .inicio-card-menu {
    width: 21px !important;
    height: 21px !important;
    border-radius: 7px !important;
  }

  .inicio-card-menu svg {
    width: 15px !important;
    height: 15px !important;
  }

  .inicio-grid-main,
  .inicio-grid-bottom {
    gap: 12px !important;
  }

  .inicio-panel {
    border-radius: 13px !important;
  }

  .inicio-panel-header {
    min-height: 40px !important;
    padding: 10px 12px 5px !important;
    gap: 9px !important;
  }

  .inicio-panel-header h3 {
    font-size: 13px !important;
  }

  .inicio-select-button,
  .inicio-link-button {
    padding: 5px 8px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
  }

  .inicio-sales-chart {
    height: 197px !important;
    padding: 6px 16px 26px 35px !important;
  }

  .inicio-chart-grid-line {
    height: 34px !important;
    font-size: 9.5px !important;
  }

  .inicio-chart-grid-line span {
    left: 13px !important;
  }

  .inicio-chart-svg {
    inset: 40px 18px 37px 46px !important;
    width: calc(100% - 64px) !important;
    height: 116px !important;
  }

  .inicio-chart-svg .line {
    stroke-width: 3 !important;
  }

  .inicio-chart-svg circle {
    stroke-width: 3 !important;
  }

  .inicio-chart-tooltip {
    right: 56px !important;
    top: 67px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  .inicio-chart-tooltip strong {
    font-size: 13px !important;
  }

  .inicio-chart-days {
    left: 46px !important;
    right: 18px !important;
    bottom: 13px !important;
    font-size: 9.8px !important;
  }

  .inicio-payment-content {
    min-height: 197px !important;
    grid-template-columns: 150px 1fr !important;
    gap: 14px !important;
    padding: 6px 17px 17px !important;
  }

  .inicio-donut {
    width: 118px !important;
    height: 118px !important;
  }

  .inicio-donut::after {
    inset: 25px !important;
  }

  .inicio-donut span {
    font-size: 9.8px !important;
  }

  .inicio-donut strong {
    font-size: 13px !important;
  }

  .inicio-payment-list {
    gap: 10px !important;
  }

  .inicio-payment-list li {
    grid-template-columns: 10px 1fr auto !important;
    gap: 8px !important;
  }

  .inicio-payment-list i {
    width: 7px !important;
    height: 7px !important;
  }

  .inicio-payment-list strong {
    font-size: 11.5px !important;
  }

  .inicio-payment-list small {
    font-size: 9.8px !important;
  }

  .inicio-payment-list b {
    font-size: 17px !important;
  }

  .inicio-table-wrap {
    padding: 0 12px 12px !important;
  }

  .inicio-orders-table {
    font-size: 10px !important;
  }

  .inicio-orders-table th {
    padding: 8px 6px !important;
  }

  .inicio-orders-table td {
    padding: 7px 6px !important;
  }

  .inicio-status {
    min-height: 18px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
  }

  .inicio-products-list {
    gap: 5px !important;
    padding: 0 12px 12px !important;
  }

  .inicio-product-item {
    grid-template-columns: 16px 32px 1fr auto !important;
    gap: 8px !important;
    min-height: 35px !important;
  }

  .inicio-product-image {
    width: 29px !important;
    height: 29px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  .inicio-product-info strong,
  .inicio-product-value {
    font-size: 10.5px !important;
  }

  .inicio-product-info span {
    font-size: 9px !important;
  }

  .inicio-alerts-list {
    padding: 0 12px 12px !important;
  }

  .inicio-alert-item {
    min-height: 43px !important;
    grid-template-columns: 27px 1fr 16px !important;
    gap: 9px !important;
  }

  .inicio-alert-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
  }

  .inicio-alert-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .inicio-alert-text strong {
    font-size: 10.5px !important;
  }

  .inicio-alert-text span {
    font-size: 9.3px !important;
  }

  .inicio-alert-arrow {
    font-size: 19px !important;
  }

  /* =========================
     LOGIN — desktop 80%
     ========================= */
  .login-shell {
    min-height: 100svh !important;
  }

  .brand-panel {
    padding-top: clamp(18px, 2.45vw, 34px) !important;
    padding-bottom: clamp(18px, 2.45vw, 34px) !important;
  }

  .brand-content {
    transform-origin: center left;
  }

  .eyebrow {
    height: 29px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    font-size: 9.8px !important;
  }

  .eyebrow svg {
    width: 14px !important;
    height: 14px !important;
  }

  .brand-panel h1 {
    margin: 14px 0 8px !important;
    font-size: clamp(30px, 3.35vw, 46px) !important;
  }

  .hero-copy {
    max-width: 660px !important;
    margin-bottom: 16px !important;
    font-size: clamp(11.5px, .96vw, 13.6px) !important;
  }

  .stats-grid {
    gap: 8px !important;
  }

  .stat-card {
    min-height: 93px !important;
    padding: 10px 10px 7px !important;
    border-radius: 10px !important;
  }

  .stat-icon {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 5px !important;
  }

  .stat-icon::before {
    width: 7px !important;
    height: 7px !important;
    border-width: 1.2px !important;
  }

  .stat-card p,
  .chart-card h2,
  .ops-card h2 {
    font-size: 8px !important;
  }

  .stat-card strong {
    margin-top: 5px !important;
    font-size: clamp(11px, .86vw, 13.5px) !important;
  }

  .stat-card small {
    margin-top: 4px !important;
    font-size: 8px !important;
  }

  .sparkline {
    height: 14px !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }

  .charts-row {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .chart-card {
    min-height: 134px !important;
    padding: 10px 10px 9px !important;
    border-radius: 10px !important;
  }

  .chart-card header span {
    padding: 4px 6px !important;
    font-size: 8.5px !important;
    border-radius: 6px !important;
  }

  .bar-chart {
    height: 86px !important;
    gap: 9px !important;
    padding: 13px 9px 0 !important;
  }

  .bar-chart div {
    min-height: 22px !important;
    border-radius: 5px 5px 0 0 !important;
  }

  .bar-chart b {
    bottom: -16px !important;
    font-size: 8px !important;
  }

  .receivable-content {
    grid-template-columns: 78px 1fr !important;
    gap: 8px !important;
    margin-top: 11px !important;
  }

  .donut {
    width: 78px !important;
    height: 78px !important;
  }

  .donut::before {
    width: 48px !important;
    height: 48px !important;
  }

  .donut span {
    font-size: 10px !important;
  }

  .donut small {
    font-size: 7.2px !important;
  }

  .receivable-card ul {
    gap: 4px !important;
  }

  .receivable-card li {
    grid-template-columns: 7px 1fr auto !important;
    gap: 5px !important;
    font-size: 7.6px !important;
  }

  .receivable-card li i {
    width: 6px !important;
    height: 6px !important;
  }

  .ops-card {
    margin-top: 8px !important;
    padding: 10px 10px 10px !important;
    border-radius: 10px !important;
  }

  .ops-list {
    margin-top: 10px !important;
  }

  .ops-list span {
    min-height: 34px !important;
    gap: 3px !important;
    padding: 0 9px !important;
  }

  .ops-list b {
    font-size: clamp(11px, .84vw, 14.4px) !important;
  }

  .ops-list small {
    font-size: 7px !important;
  }

  .auth-card {
    width: min(100%, 324px) !important;
    padding: clamp(17px, 2.1vh, 24px) clamp(19px, 1.85vw, 27px) clamp(16px, 1.85vh, 22px) !important;
    border-radius: 10px !important;
  }

  .login-logo {
    width: min(76%, 208px) !important;
    max-height: 50px !important;
    margin-bottom: 14px !important;
  }

  .auth-title h2 {
    font-size: 18.5px !important;
    margin-bottom: 14px !important;
  }

  .field-label {
    margin: 9px 0 5px !important;
    font-size: 9.8px !important;
  }

  .input-shell {
    height: 34px !important;
    grid-template-columns: 31px 1fr auto !important;
    border-radius: 9px !important;
  }

  .input-shell > svg {
    width: 14px !important;
    height: 14px !important;
    margin-left: 11px !important;
  }

  .input-shell input {
    font-size: 10.8px !important;
  }

  .icon-button {
    width: 31px !important;
    height: 31px !important;
  }

  .icon-button svg {
    width: 16px !important;
    height: 16px !important;
  }

  .form-row {
    margin: 11px 0 16px !important;
  }

  .check-line,
  .text-link {
    font-size: 9.8px !important;
  }

  .check-line span {
    width: 17px !important;
    height: 17px !important;
    border-radius: 4px !important;
  }

  .primary-button {
    height: 36px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
  }

  .divider {
    margin: 13px 0 11px !important;
    font-size: 9.8px !important;
  }

  .secondary-button,
  .create-account-button {
    height: 31px !important;
    font-size: 9.8px !important;
    border-radius: 9px !important;
    gap: 6px !important;
  }

  .quick-actions {
    gap: 8px !important;
  }

  .create-account-block {
    margin-top: 11px !important;
  }

  .create-account-block p {
    margin-bottom: 6px !important;
    font-size: 9.2px !important;
  }

  .auth-footer {
    bottom: 10px !important;
    font-size: 9.5px !important;
  }

  /* =========================
     ENTRADA — desktop 80%
     ========================= */
  .entry-stage {
    transform: scale(.9) !important;
    transform-origin: center center !important;
  }

  .skip-entry {
    right: 18px !important;
    bottom: 18px !important;
    padding: 9px 13px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }

  /* =========================
     PÁGINA TEMPORÁRIA /MODULO — desktop 80%
     ========================= */
  .module-shell {
    transform: scale(.8);
    transform-origin: center top;
  }
}

@media (min-width: 1041px) and (max-width: 1439px) {
  .inicio-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .inicio-grid-main {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr) !important;
  }

  .inicio-grid-bottom {
    grid-template-columns: 1fr 1fr !important;
  }

  .inicio-grid-bottom .inicio-panel:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .inicio-alerts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
  }

  .login-shell {
    grid-template-columns: minmax(620px, 64vw) minmax(300px, 36vw) !important;
  }

  .auth-card {
    width: min(100%, 316px) !important;
  }

  .receivable-card,
  .ops-card {
    display: none !important;
  }

  .charts-row {
    grid-template-columns: 1fr !important;
  }
}

/* Gestor STA — V28
   Ajuste fino /inicio: retirar excesso de espaço dos 4 cards superiores no desktop/notebook. */
@media (min-width: 1200px) {
  .inicio-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .inicio-kpi-card {
    min-height: 56px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px 10px !important;
    border-radius: 11px !important;
  }

  .inicio-kpi-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .inicio-kpi-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .inicio-kpi-body span {
    font-size: 9.2px !important;
    line-height: 1.05 !important;
  }

  .inicio-kpi-body strong {
    margin-top: 1px !important;
    font-size: 17px !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  .inicio-kpi-body small {
    margin-top: 3px !important;
    font-size: 8.6px !important;
    line-height: 1.1 !important;
  }

  .inicio-card-menu {
    display: none !important;
  }
}

@media (min-width: 1041px) and (max-width: 1199px) {
  .inicio-kpi-grid {
    gap: 9px !important;
  }

  .inicio-kpi-card {
    min-height: 58px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }

  .inicio-kpi-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .inicio-kpi-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .inicio-kpi-body span {
    font-size: 9.3px !important;
  }

  .inicio-kpi-body strong {
    font-size: 17px !important;
  }

  .inicio-kpi-body small {
    margin-top: 3px !important;
    font-size: 8.7px !important;
  }

  .inicio-card-menu {
    display: none !important;
  }
}