/* ========================================================================== 
   STEELCONTROL - AJUSTE FINAL DE APRESENTAÇÃO / LEGIBILIDADE
   Carregado por último em todas as páginas.
   Objetivo: tipografia consistente, componentes visíveis e modais que caibam
   em notebooks, projetores, tablets e telas menores sem quebrar o layout.
   ========================================================================== */

:root {
  --sc-readable-xs: 11px;
  --sc-readable-sm: 12px;
  --sc-readable-md: 14px;
  --sc-readable-lg: 16px;
  --sc-presentation-radius: 16px;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  line-height: 1.3;
}

button,
[role="button"],
input,
select {
  min-height: 40px;
}

textarea {
  min-height: 90px;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Evita texto quase ilegível na apresentação. */
.login-label,
.optional,
.trust-box p,
.face-button-content small,
.button-arrow,
.message,
.register-header span,
.company-register-box > p,
.register-benefits span,
.create-account-btn,
.signup-info strong,
.signup-info span,
.form-section-title,
.form-section-title span,
.back-login-btn,
.secure,
.industrial-badge,
.industrial-stats span,
.info-card span,
.info-card p,
.side-features > div,
.image-bottom,
.face-header p,
.camera-loading span,
.face-status span,
.face-security,
.face-flutter-kicker,
.face-auto-note,
.verification-heading p,
.verification-code-wrap label,
.registration-face-next strong,
.registration-face-next p,
.required-badge {
  font-size: var(--sc-readable-xs) !important;
  line-height: 1.4 !important;
}

/* Dashboard: rótulos pequenos passam a ser legíveis em projetor. */
.user-box span,
.industrial-label,
.industrial-live small,
.kpi-status,
.kpi-content > span,
.kpi-content p,
.panel-eyebrow,
.industrial-panel-header p,
.panel-live-badge,
.operation-status span,
.operation-info span,
.operation-info p,
.operation-details-btn,
.industrial-section-title span,
.industrial-quick-actions strong,
.industrial-quick-actions span,
.config-eyebrow,
.config-card-header p,
.config-item-title small,
.config-company-info > span,
.config-company-info p,
.company-active-badge,
.company-stat span,
.open-company-settings-btn,
.operation-overview-eyebrow,
.operation-overview-header p,
.operation-update-badge,
.factory-kpi-info span,
.factory-kpi-info small,
.factory-health-top p,
.health-legend span,
.factory-performance-grid span,
.factory-performance-grid small,
.header-machine-label,
.maintenance-admin-badge,
.maintenance-panel-heading p,
.maintenance-history-id,
.maintenance-history-meta span,
.maintenance-history-content p,
.simulation-mode-badge,
.audit-eyebrow,
.audit-kpi span,
.audit-kpi small,
.audit-item-heading time,
.audit-item-content p,
.audit-item summary,
.audit-item code,
.operation-badge-copy strong,
.operation-badge-copy small,
.runtime-diagnostics-head span,
.runtime-diag-item span,
.runtime-safety span,
.runtime-demo > div:first-child span,
.runtime-demo-actions button {
  font-size: var(--sc-readable-xs) !important;
  line-height: 1.4 !important;
}

/* Máquinas: esta tela tinha vários textos de 6px a 10px. */
.brand-text span,
.user-box strong,
.user-box span,
.logout-btn,
.tag,
.hero-features span,
.summary-card span,
.section-label,
.cadastro-header p,
.toggle-form-btn,
.form-info strong,
.form-info span,
.robot-preset strong,
.robot-preset span,
.robot-preset button,
.form-section-title,
.form-section-title span,
.form-group label,
.form-control input,
.form-control select,
.form-group textarea,
.cancel-machine-btn,
.save-machine-btn,
.mensagem-maquina,
.machines-section-header p,
.search-machine input,
.machine-filters select,
.status,
.machine-category,
.machine-sector,
.machine-description,
.machine-identification span,
.machine-identification strong,
.metric strong,
.metric span,
.machine-maintenance span,
.machine-maintenance strong,
.machine-card-btn,
.empty-machines p,
.machine-connection span,
.machine-connection strong,
.machine-connection-state {
  font-size: var(--sc-readable-xs) !important;
  line-height: 1.4 !important;
}

.form-control input,
.form-control select,
.form-group textarea,
.search-machine input,
.machine-filters select {
  font-size: var(--sc-readable-sm) !important;
}

/* Empresa. */
.role-badge,
.company-address-card span,
.company-top-copy small,
.field-help,
.verification-heading span,
.remove-logo-btn,
.employee-face-status p,
.camera-help,
.progress-info,
.consent-box span {
  font-size: var(--sc-readable-xs) !important;
  line-height: 1.45 !important;
}

/* Home: mantém a miniatura de dashboard compacta, mas ainda visível. */
.hero-badge,
.primary-btn,
.secondary-btn,
.hero-trust strong,
.preview-online,
.preview-user-avatar,
.preview-user div:last-child strong,
.preview-user div:last-child span,
.preview-menu,
.preview-kpi-top span,
.preview-kpi-top i,
.preview-kpis small,
.chart-header strong,
.chart-header span,
.chart-labels,
.preview-alerts > strong,
.alert-preview-item > i,
.alert-preview-item strong,
.alert-preview-item span,
.alert-preview-item small,
.preview-alerts button,
.numbers-grid span,
.section-label,
.about-card-header span,
.about-list div,
.about-list i,
.feature-card p,
.security-list p,
.technology-grid strong,
.technology-grid span,
.future-tags span,
.cta-container p,
.cta-primary,
.cta-secondary,
.footer-brand span,
.footer-column,
.footer-column strong,
.footer-bottom {
  font-size: max(9px, var(--sc-readable-xs)) !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Escala visual consistente
   -------------------------------------------------------------------------- */

.company-main-info h1 {
  font-size: clamp(28px, 3.4vw, 36px) !important;
  line-height: 1.08 !important;
}

.header h1,
.titulo-secao h2 {
  font-size: clamp(21px, 2.2vw, 26px) !important;
  line-height: 1.16 !important;
}

.kpi-content h2,
.card h2 {
  line-height: 1.1 !important;
}

.hero-icon-circle {
  font-size: clamp(44px, 5vw, 58px) !important;
}

/* --------------------------------------------------------------------------
   Modais genéricos: nunca ultrapassar a tela
   -------------------------------------------------------------------------- */

.modal {
  padding: clamp(10px, 2vw, 20px) !important;
  overflow: hidden;
}

.modal-card {
  width: min(600px, 100%) !important;
  max-height: calc(100dvh - 24px) !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.modal-header {
  margin-bottom: 16px !important;
}

.modal-header h2 {
  font-size: clamp(19px, 2vw, 24px) !important;
  line-height: 1.15 !important;
}

.modal-header p {
  font-size: var(--sc-readable-sm) !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Modal facial - versão compacta para notebook/projetor
   -------------------------------------------------------------------------- */

.face-modal-card {
  width: min(780px, calc(100vw - 24px)) !important;
  max-width: 780px !important;
  max-height: calc(100dvh - 20px) !important;
  padding: 18px !important;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(250px, 1fr);
  grid-template-areas:
    "header header"
    "camera name"
    "camera consent"
    "camera status"
    "camera progress"
    "camera help";
  gap: 10px 18px;
  align-items: start;
  overflow-y: auto !important;
}

.face-modal-card > .modal-header {
  grid-area: header;
  margin: 0 44px 2px 0 !important;
}

.face-modal-card > .face-sample-name-field {
  grid-area: name;
  margin: 0 !important;
}

.face-modal-card > .consent-box {
  grid-area: consent;
  margin: 0 !important;
  padding: 11px 12px !important;
}

.face-modal-card > .camera-container {
  grid-area: camera;
}

.face-modal-card > .camera-status {
  grid-area: status;
  margin: 0 !important;
  padding: 11px 12px !important;
}

.face-modal-card > .face-progress {
  grid-area: progress;
  margin: 2px 0 0 !important;
}

.face-modal-card > .camera-help {
  grid-area: help;
  margin: 2px 0 0 !important;
  text-align: left !important;
}

.face-modal-card .camera-container {
  width: 100% !important;
  max-width: 360px !important;
  max-height: min(54dvh, 420px) !important;
  margin: 0 auto !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 22px !important;
}

.face-modal-card .camera-status strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.face-modal-card .camera-status span {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.face-modal-card .modal-icon {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
}

.face-modal-card .close-modal {
  top: 14px !important;
  right: 14px !important;
}

.face-guide {
  width: 58% !important;
  height: 68% !important;
}

/* Funcionários: ações não estouram o card. */
.employee-card {
  min-width: 0;
}

.employee-info,
.employee-actions {
  min-width: 0;
}

.employee-actions {
  flex-wrap: wrap !important;
}

.employee-actions button {
  min-height: 38px;
  white-space: normal;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .face-modal-card {
    grid-template-columns: minmax(240px, 330px) minmax(220px, 1fr);
  }

  .face-modal-card .camera-container {
    max-height: min(50dvh, 390px) !important;
  }
}

@media (max-width: 700px) {
  .face-modal-card {
    display: block;
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 15px !important;
  }

  .face-modal-card > .modal-header,
  .face-modal-card > .face-sample-name-field,
  .face-modal-card > .consent-box,
  .face-modal-card > .camera-container,
  .face-modal-card > .camera-status,
  .face-modal-card > .face-progress,
  .face-modal-card > .camera-help {
    margin-bottom: 10px !important;
  }

  .face-modal-card .camera-container {
    width: min(100%, 330px) !important;
    height: min(42dvh, 340px) !important;
    aspect-ratio: auto !important;
  }

  .face-modal-card > .modal-header {
    margin-right: 40px !important;
  }

  .modal-card {
    border-radius: 18px !important;
  }
}

@media (max-height: 720px) and (min-width: 701px) {
  .face-modal-card {
    grid-template-columns: minmax(250px, 320px) minmax(250px, 1fr);
    padding: 14px !important;
    gap: 8px 14px;
  }

  .face-modal-card .camera-container {
    max-width: 310px !important;
    max-height: calc(100dvh - 120px) !important;
    aspect-ratio: 4 / 5 !important;
  }

  .face-modal-card .modal-header {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 560px) {
  .page {
    padding: 12px !important;
  }

  .topbar {
    padding: 14px !important;
  }

  .top-actions,
  .topbar-actions,
  .header-actions {
    gap: 8px !important;
  }

  .hero {
    padding: 22px !important;
  }

  .company-main-info h1 {
    font-size: 27px !important;
  }

  .sc-toast-region {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }
}

/* Projetores/notebooks com altura baixa: reduz excesso sem diminuir leitura. */
@media (max-height: 700px) {
  .modal-card:not(.face-modal-card) {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .modal-header {
    margin-bottom: 12px !important;
  }

  .form-group {
    margin-bottom: 11px !important;
  }
}

/* STEELCONTROL_TCC_READABILITY_V2 */
body{font-size:14px}button,input,select,textarea{font-size:14px}.menu-btn span{font-size:13px}.header p,.titulo-secao p{font-size:13px;line-height:1.5}