/* Pacote visual 2026-09-02: login, identidade 266 e experiência mobile. */

/* Login: rodapé único e aprovado para desktop/mobile. */
.auth-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid #e4ddd2;color:#6f685e;text-align:center}
.auth-credit{font-size:13px;line-height:1.35;color:#6f685e;margin-bottom:3px}
.auth-credit strong{color:#111;font-weight:700}
.auth-footer img{display:block;width:42px;height:auto;margin-top:2px}
.auth-footer small{font-size:11px;color:#8b7d72;margin-top:1px}

/* LOGIN DESKTOP: o painel de acesso ocupa toda a metade direita. */
@media (min-width:901px){
  .auth-main{padding:0;background:#fff;align-items:stretch;justify-items:stretch}
  .auth-card{width:100%;max-width:none;min-height:100vh;border:0;border-radius:0;box-shadow:none;padding:clamp(48px,6vw,96px);display:flex;align-items:center;justify-content:center;position:relative}
  .auth-card::before{position:absolute;top:0;left:0;right:0;margin:0;border-radius:0;height:5px}
  .auth-card-inner{width:min(540px,100%)}
  .auth-footer{margin-top:34px;padding-top:26px;gap:13px}
  .auth-credit{font-size:14px;margin-bottom:4px}
  .auth-footer img{width:46px;margin-top:3px}
}

/* Logo RMB 266. */
.auth-brand-mark{width:min(320px,82%)}
.auth-logo{object-fit:contain}

/* Painel de gravação aprovado: ícone central com instrução curta. */
.voice-panel{margin-top:18px;padding:30px 24px;border:1px solid #e4ddd2;border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fcfaf7 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 8px 24px rgba(55,53,52,.035)}
.mic.mic-icon-only{width:76px;height:76px;min-width:76px;padding:0;margin:0;border-radius:50%;display:inline-grid;place-items:center;background:transparent;color:var(--brand-terracotta);border:2px solid var(--brand-terracotta);box-shadow:none}
.mic.mic-icon-only:hover{background:rgba(168,89,75,.06);transform:translateY(-1px)}
.mic.mic-icon-only.recording{background:var(--brand-terracotta);color:#fff;border-color:var(--brand-terracotta);box-shadow:0 0 0 6px rgba(168,89,75,.12)}
.record-mic-svg{width:32px;height:32px;display:block}
.voice-panel-title{display:block;margin-top:18px;font-size:17px;line-height:1.3;color:var(--brand-charcoal)}
.voice-panel-text{max-width:440px;margin:9px 0 0;font-size:14px;line-height:1.5;color:#756b62}
.voice-panel .record-actions{width:100%;justify-content:center;margin:18px 0 0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* LISTAGEM MOBILE: substitui a tabela horizontal por cartões legíveis. */
@media (max-width:760px){
  .page-actions .primary{order:-10;flex:1 1 100%}
  .page-actions .secondary{flex:1 1 calc(50% - 5px);font-size:13px}
  .page-actions .danger{margin-top:2px}

  .table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
  .table-wrap table{min-width:0;display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:12px}
  .table-wrap tr{display:block;background:#fff;border:1px solid #e5ddd1;border-radius:15px;box-shadow:0 8px 24px rgba(55,53,52,.045);padding:15px 16px}
  .table-wrap td{display:grid;grid-template-columns:98px minmax(0,1fr);gap:10px;padding:8px 0;border:0;align-items:start;max-width:none;word-break:break-word}
  .table-wrap td::before{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#847362;padding-top:2px}
  .table-wrap td:nth-child(1)::before{content:"Código"}
  .table-wrap td:nth-child(2)::before{content:"Descrição"}
  .table-wrap td:nth-child(3)::before{content:"Avaliação"}
  .table-wrap td:nth-child(4)::before{content:"Status"}
  .table-wrap td:nth-child(5)::before{content:"Operador"}
  .table-wrap td:nth-child(6)::before{content:"Ações"}
  .table-wrap td:nth-child(6) a{color:#20505f;text-decoration:none}
  .table-wrap td.empty{display:block;text-align:center;padding:36px 16px}
  .table-wrap td.empty::before{content:none}
  .table-wrap tr:has(td.empty){padding:0}

  .users-table td:nth-child(1)::before{content:"Nome"}
  .users-table td:nth-child(2)::before{content:"E-mail"}
  .users-table td:nth-child(3)::before{content:"Perfil"}
  .users-table td:nth-child(4)::before{content:"Status"}
  .users-table td:nth-child(5)::before{content:"Ações"}
  .users-table td:nth-child(5) a{color:#20505f;text-decoration:none}

  /* Cadastro: reduz o vão visual e protege ações da barra inferior do aparelho. */
  .section-card+.section-card{margin-top:12px}
  .actions{position:static;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  #artwork-form input:not([type="hidden"]),#artwork-form textarea,#artwork-form select{scroll-margin-block:20px max(20px,env(safe-area-inset-bottom))}
  .voice-panel{padding:26px 18px}
  .mic.mic-icon-only{width:70px;height:70px;min-width:70px}
  .record-mic-svg{width:29px;height:29px}
  .voice-panel-title{font-size:16px}
  .voice-panel-text{font-size:13px}
}

/* LOGIN MOBILE: composição compacta aprovada. */
@media (max-width:900px){
  body.centered{min-height:100svh;padding:0;background:#faf7f2}
  .auth-shell{min-height:100svh}
  .auth-main{min-height:100svh;padding:12px;place-items:center}
  .auth-card{width:min(500px,100%);padding:20px 22px;border-radius:18px}
  .auth-card::before{margin:-20px -22px 16px;height:4px}
  .auth-card-inner{width:100%}
  .auth-card .auth-logo{display:block;width:min(190px,58%);margin:0 auto 14px}
  .auth-card .eyebrow{font-size:10px;letter-spacing:.11em}
  .auth-card h1{font-size:34px;line-height:1;margin:8px 0 8px}
  .auth-card .lead{font-size:14px;line-height:1.38;margin-bottom:12px}
  .auth-card form label{margin:12px 0 5px;font-size:14px}
  .auth-card input{padding:11px 12px;min-height:48px}
  .auth-card .primary{min-height:48px;margin-top:8px}
  .auth-footer{gap:9px;margin-top:16px;padding-top:15px}
  .auth-credit{font-size:11px;margin-bottom:2px}
  .auth-footer img{width:36px;margin-top:2px}
  .auth-footer small{font-size:10px}
}

@media (max-width:480px){
  .auth-main{padding:10px}
  .auth-card{padding:18px 20px}
  .auth-card::before{margin:-18px -20px 14px}
  .auth-card .auth-logo{width:min(175px,56%);margin-bottom:12px}
  .auth-card h1{font-size:32px}
  .auth-card .lead{font-size:13px}
  .auth-card input{min-height:46px;padding:10px 11px}
  .auth-card .primary{min-height:46px}
  .auth-footer{margin-top:14px;padding-top:13px;gap:8px}
  .auth-credit{font-size:10.5px}
  .auth-footer img{width:34px}
  .page-actions .secondary{flex-basis:calc(50% - 5px)}
  .table-wrap td{grid-template-columns:86px minmax(0,1fr)}
  .voice-panel{padding:24px 16px}
  .voice-panel-title{font-size:15px}
}