/* responsive.css - ajustes globais para telas menores que 370px (inclui 320px) */
@media (max-width: 23.125em) {
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  body {
    overflow-x: hidden;
  }

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

  :root {
    --page-pad: 12px;
    --top-gap: 4px;
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 19px;
    --font-size-2xl: 21px;
    --font-size-3xl: 24px;
    --font-size-4xl: 26px;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
  }

  html[data-theme='dark'] {
    --page-pad: 12px;
    --top-gap: 4px;
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 19px;
    --font-size-2xl: 21px;
    --font-size-3xl: 24px;
    --font-size-4xl: 26px;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
  }

  /* Titulos mais compactos */
  h1 {
    font-size: var(--font-size-2xl);
  }
  h2 {
    font-size: var(--font-size-xl);
  }
  h3 {
    font-size: var(--font-size-lg);
  }

  /* Titulo leitura menor */
  #titulo-leitura {
    font-size: var(--font-size-xl);
  }

  /* Leituras (Genesis 5 etc) - texto maior */
  .leituras li {
    font-size: 1em;
  }

  /* Linha de leitura um pouco maior */
  .linha-leitura span {
    font-size: 1.1em;
  }

  /* Badge status menor */
  .status-badge {
    font-size: 0.8em;
  }

  /* Titulos e textos de modais menores */
  .modal .modal-title,
  .hinario-modal-overlay .modal-title,
  #hinario-alert-modal .modal-title,
  #hinario-custom-modal .modal-title {
    font-size: 0.95em;
  }

  .modal .modal-text,
  .hinario-modal-overlay .modal-text,
  #hinario-alert-modal .modal-text,
  #hinario-custom-modal .modal-text {
    font-size: 0.9em;
  }

  /* Privacy page - texto menor em telas pequenas */
  .topo h1 {
    font-size: 1.6em;
  }

  .subtitulo {
    font-size: 0.85em;
  }

  .bloco {
    font-size: 0.92em;
  }

  .rodape {
    font-size: 0.8em;
  }

  /* Reset plano/apagar tudo - texto menor, titulo normal */
  #modal-reset .modal-text,
  #modal-reset-plano .modal-text {
    font-size: 0.9em;
  }

  #modal-reset .modal-title,
  #modal-reset-plano .modal-title {
    font-size: 1em;
  }

  /* Botao LER menor */
  .btn-ler {
    font-size: 0.9em;
  }

  /* Texto base do reader (Biblia/Hinario) */
  #reader,
  #reader .verso-texto,
  #reader .versiculo,
  #reader .hinario-lyrics,
  #reader pre.hinario-lyrics,
  #hinario,
  #hinario .hinario-lyrics {
    font-size: 0.95em;
  }

  /* Botoes e labels menores */
  button,
  .btn-principal,
  .btn-secundario,
  .btn-modal,
  .btn-editor,
  .btn-config,
  .nav-modo-btn,
  .btn-biblia-voltar,
  .hinario-filter-btn,
  .fav-action-btn,
  .navegacao button {
    font-size: 0.95em;
  }

  /* Painel config - fontes e botoes */
  #painel-config,
  #painel-config button,
  #painel-config label,
  #painel-config input,
  #painel-config select,
  #painel-config textarea,
  .painel-config .ts-control,
  .painel-config .ts-control .item,
  .painel-config .ts-control input,
  .painel-config .ts-dropdown .option {
    font-size: 0.95em;
  }

  /* Icones Lucide proporcionais (geral) */
  .btn-config .lucide,
  .nav-modo-btn .lucide,
  .navegacao button .lucide,
  .btn-biblia-voltar .lucide,
  .hinario-filter-btn .lucide,
  .btn-tool .lucide,
  .btn-pdf-action .lucide,
  .fav-action-btn .lucide,
  button .lucide {
    width: 16px;
    height: 16px;
  }

  /* Icones maiores para btn-config e fav/player/fonte */
  #btn-config .lucide,
  #btn-favoritos-global .lucide,
  #btn-player-toggle .lucide,
  #btn-fonte .lucide {
    width: 18px;
    height: 18px;
  }

  /* Navegacao - texto e icones um pouco maiores */
  .navegacao button {
    font-size: 1em;
  }

  .navegacao button .lucide {
    width: 18px;
    height: 18px;
  }

  /* Tela inicial - botoes um pouco menores */
  .inicio .botao-principal,
  body.modo-home:not(.modo-leitura) .botao-principal {
    font-size: 0.92em;
  }

  /* Logo menor */
  .logo {
    width: 78px;
  }

  /* Editor e PDF - evitar overflow no header */
  html[data-theme] body #hinario-editor .editor-header,
  html[data-theme] body .hinario-pdf-container .pdf-header {
    width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  html[data-theme] body #hinario-editor .editor-title,
  html[data-theme] body .hinario-pdf-container .pdf-title {
    font-size: var(--font-size-lg);
    flex: 1 1 auto;
    min-width: 0;
  }

  html[data-theme] body #hinario-editor .editor-toolbar,
  html[data-theme] body .hinario-pdf-container .pdf-actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* PDF header - altura auto para nao cortar */
  html[data-theme] body .hinario-pdf-container .pdf-header {
    height: auto;
    min-height: 56px;
    padding-top: 4px;
    min-height: calc(56px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 4px);
    padding-bottom: 6px;
    align-items: center;
  }

  /* PDF actions - botoes menores para caber em 1 linha */
  html[data-theme] body .hinario-pdf-container .btn-pdf-action,
  html[data-theme] body .hinario-pdf-container .btn-close-pdf {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  html[data-theme] body .hinario-pdf-container .btn-pdf-action.pdf-zoom-label {
    min-width: 54px;
    padding: 0 8px;
    font-size: 0.9em;
  }
}

/* Hinario editor - ajustes para telas menores que 440px */
@media (max-width: 27.5em) {
  html[data-theme] body #hinario-editor .editor-header {
    width: 100%;
    box-sizing: border-box;
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
    flex-wrap: wrap;
  }

  html[data-theme] body #hinario-editor .editor-title {
    font-size: var(--font-size-lg);
    flex: 1 1 auto;
    min-width: 0;
  }

  html[data-theme] body #hinario-editor .editor-toolbar {
    gap: 8px;
    flex-wrap: wrap;
  }
}