/**
 * Emissor Voucher PRO — Estilos do Formulário Front-end v8
 * Todos os seletores prefixados com #ev-app.
 * @package EmissorVoucherPRO
 */

/* ── Reset e base ── */
#ev-app.ev-wrap{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;width:100%;max-width:100%;margin:2rem auto;padding:0 1rem;color:#0f172a;line-height:1.5;box-sizing:border-box}
#ev-app *,#ev-app *::before,#ev-app *::after{box-sizing:border-box}
#ev-app fieldset{border:0;padding:0;margin:0;min-width:0}
#ev-app legend{padding:0;float:none;width:auto}
#ev-app h2,#ev-app h3,#ev-app p{margin:0}
#ev-app img{border:0}
#ev-app button{font-family:inherit}
#ev-app .ev-btn svg,#ev-app .ev-btn-search svg{display:block;flex-shrink:0;vertical-align:middle}

/* ── Header ── */
#ev-app .ev-header{display:flex;align-items:center;gap:1rem;margin:0 0 2rem;padding:1.5rem 2rem;background:linear-gradient(135deg,#3b82f6,#6366f1);border-radius:12px;color:#fff;box-shadow:0 4px 20px rgba(59,130,246,.3);flex-wrap:wrap}
#ev-app .ev-header-icon{flex-shrink:0;width:48px;height:48px;background:rgba(255,255,255,.2);border-radius:12px;display:grid;place-items:center}
#ev-app .ev-header-icon svg{width:26px;height:26px}
#ev-app .ev-title{font-size:1.4rem;font-weight:700;line-height:1.2;color:#fff}
#ev-app .ev-subtitle{font-size:.875rem;opacity:.85;margin-top:2px;font-weight:400;color:#fff}
/* Container do botao Consultar - desktop: alinhado a direita */
#ev-app .ev-header-actions{margin-left:auto;display:flex;gap:8px}
/* Botao Consultar */
#ev-app .ev-btn-search{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:.55rem 1.1rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
#ev-app .ev-btn-search:hover{background:rgba(255,255,255,.35)}

/* ── Toast ── */
#ev-app .ev-toast{position:fixed;top:1.5rem;right:1.5rem;display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;background:#065f46;color:#d1fae5;border-radius:8px;font-size:.875rem;font-weight:600;box-shadow:0 10px 25px rgba(0,0,0,.12);z-index:99999;transform:translateY(-20px);opacity:0;transition:all .3s ease}
#ev-app .ev-toast.ev-show{transform:translateY(0);opacity:1}
#ev-app .ev-toast-icon{width:20px;height:20px;flex-shrink:0}

/* ── Modal ── */
#ev-app .ev-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding-top:8vh}
#ev-app .ev-overlay[hidden]{display:none}
#ev-app .ev-modal{width:640px;max-width:calc(100% - 2rem);max-height:80vh;background:#fff;border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden}
#ev-app .ev-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e2e8f0}
#ev-app .ev-modal-hd h3{font-size:1.05rem;font-weight:700;color:#0f172a}
#ev-app .ev-modal-x{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;border:none!important;background:#f1f5f9!important;border-radius:8px!important;cursor:pointer;font-size:1.2rem;color:#64748b!important;display:grid!important;place-items:center;padding:0!important;margin:0!important;line-height:1!important;box-shadow:none!important;outline:none!important;text-decoration:none!important;appearance:none!important;-webkit-appearance:none!important}
#ev-app .ev-modal-x:hover{background:#fee2e2!important;color:#ef4444!important}
#ev-app .ev-modal-x:focus{outline:none!important;box-shadow:none!important}
#ev-app .ev-modal-x svg{width:16px!important;height:16px!important;flex-shrink:0;display:block}
#ev-app .ev-modal-srch{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.5rem;border-bottom:1px solid #e2e8f0}
#ev-app .ev-modal-srch input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:.95rem;color:#0f172a;padding:.4rem 0}
#ev-app .ev-modal-srch input::placeholder{color:#cbd5e1}
#ev-app .ev-modal-body{flex:1;overflow-y:auto;padding:1rem 1.5rem;min-height:200px}
#ev-app .ev-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1rem;color:#cbd5e1;text-align:center}
#ev-app .ev-empty p{font-size:.9rem}
#ev-app .ev-loading{text-align:center;padding:2rem;color:#64748b;font-size:.9rem}
#ev-app .ev-rc{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:.6rem;flex-wrap:wrap;background:#fff;transition:all .2s}
#ev-app .ev-rc:hover{border-color:#3b82f6;box-shadow:0 4px 12px rgba(0,0,0,.06)}
#ev-app .ev-rc-l{flex:1;min-width:180px}
#ev-app .ev-rc-n{font-size:.75rem;font-weight:700;color:#3b82f6}
#ev-app .ev-rc-name{font-size:.95rem;font-weight:600;color:#0f172a;margin-top:1px}
#ev-app .ev-rc-info{font-size:.78rem;color:#64748b;margin-top:3px;line-height:1.4}
#ev-app .ev-rc-btns{display:flex;gap:.35rem}
#ev-app .ev-rc-btns a,#ev-app .ev-rc-btns button{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .7rem;border-radius:6px;font-family:inherit;font-size:.72rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;color:#fff}
#ev-app .ev-rb-pdf{background:#3b82f6}
#ev-app .ev-rb-edit{background:#f59e0b}
#ev-app .ev-rb-del{background:#ef4444}

/* ── Secoes do formulario ── */
#ev-app .ev-section{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:1.5rem;margin:0 0 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);transition:box-shadow .2s}
#ev-app .ev-section:hover{box-shadow:0 10px 25px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.04)}
#ev-app .ev-legend{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0f172a;padding:0 .25rem;margin:0 0 1rem;flex-wrap:wrap;row-gap:.3rem}
#ev-app .ev-dot{width:10px;height:10px;border-radius:50%;background:var(--c,#3b82f6);flex-shrink:0;display:inline-block}
#ev-app .ev-readonly-badge{display:inline-flex;align-items:center;gap:3px;font-size:.65rem;font-weight:600;color:#94a3b8;background:#e2e8f0;padding:2px 8px;border-radius:20px;text-transform:none;letter-spacing:0}
#ev-app .ev-section-readonly{background:#f8fafc;border-color:#e2e8f0}
#ev-app .ev-section-readonly:hover{box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ── Grid ── */
#ev-app .ev-g{display:grid;gap:.875rem;margin-bottom:.25rem}
#ev-app .ev-g2{grid-template-columns:repeat(2,1fr)}
#ev-app .ev-g3{grid-template-columns:repeat(3,1fr)}
#ev-app .ev-g4{grid-template-columns:repeat(4,1fr)}
#ev-app .ev-g5{grid-template-columns:repeat(5,1fr)}
#ev-app .ev-s2{grid-column:span 2}
#ev-app .ev-s3{grid-column:span 3}

/* ── Campos ── */
#ev-app .ev-f label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#64748b;margin:0 0 .35rem}
#ev-app .ev-req{color:#ef4444}
#ev-app .ev-f input,#ev-app .ev-f textarea{width:100%;padding:.6rem .85rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:.875rem;color:#0f172a;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .2s,box-shadow .2s}
#ev-app .ev-f input:focus,#ev-app .ev-f textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
#ev-app .ev-f textarea{resize:vertical;min-height:80px}
#ev-app .ev-f input[type=number]{-moz-appearance:textfield}
#ev-app .ev-f input[type=number]::-webkit-outer-spin-button,#ev-app .ev-f input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
#ev-app .ev-input-ro{background:#f1f5f9!important;color:#475569!important;cursor:default!important;user-select:none}
#ev-app .ev-input-ro:focus{border-color:#e2e8f0!important;box-shadow:none!important}
#ev-app textarea.ev-input-ro{resize:none!important}
#ev-app .ev-logo-static{display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f8fafc;min-height:80px}
#ev-app .ev-logo-empty{flex-direction:column;gap:6px;color:#94a3b8;font-size:.78rem}
#ev-app .ev-logo-empty svg{opacity:.4}
#ev-app .ev-f input[readonly]{background:#eef2ff;color:#3b82f6;font-weight:700}
#ev-app .ev-logo{position:relative;width:100%;min-height:120px;border:2px dashed #e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
#ev-app .ev-logo:hover{border-color:#3b82f6;background:rgba(59,130,246,.04)}
#ev-app .ev-logo-ph{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#64748b;font-size:.8rem;pointer-events:none}
#ev-app .ev-logo-ph svg{width:32px;height:32px;opacity:.5}
#ev-app .ev-logo img{max-width:100%;max-height:120px;object-fit:contain;border-radius:4px}

/* ── Botoes de acao (desktop) ── */
#ev-app .ev-acts{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-top:.5rem;padding-bottom:2rem}
#ev-app .ev-acts .ev-btn{flex:1}

/* ── Botao base ──
   IMPORTANTE: display:flex (nao inline-flex).
   inline-flex como filho de flex-container ignora flex:1 no Android Chromium. */
#ev-app .ev-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:.875rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;white-space:nowrap}
#ev-app .ev-btn-p{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.35)}
#ev-app .ev-btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,130,246,.45)}
#ev-app .ev-btn-p:disabled{opacity:.6;cursor:not-allowed;transform:none}
#ev-app .ev-btn-g{background:#f1f5f9;color:#475569;border:1.5px solid #e2e8f0}
#ev-app .ev-btn-g:hover{background:#e2e8f0;color:#0f172a;border-color:#94a3b8}

/* ════════════════════════════════
   MOBILE - ate 768px
════════════════════════════════ */
@media(max-width:768px){
  #ev-app.ev-wrap{margin:1rem auto;padding:0 .75rem}
  /* Header: Consultar ocupa linha propria, 100% da largura */
  #ev-app .ev-header{padding:1.25rem;row-gap:.875rem}
  #ev-app .ev-header-actions{margin-left:0;width:100%}
  #ev-app .ev-btn-search{width:100%;justify-content:center;padding:.7rem 1rem;border-radius:10px;font-size:.875rem}
  /* Grids 2 colunas */
  #ev-app .ev-g2,#ev-app .ev-g3,#ev-app .ev-g4,#ev-app .ev-g5{grid-template-columns:1fr 1fr}
  #ev-app .ev-s2,#ev-app .ev-s3{grid-column:span 2}
  #ev-app .ev-section{padding:1.25rem 1rem}
  /* Barra fixa de acoes no rodape */
  #ev-app .ev-acts{
    position:fixed;bottom:0;left:0;right:0;
    z-index:9999;
    background:#fff;
    border-top:1px solid #e2e8f0;
    box-shadow:0 -4px 20px rgba(0,0,0,.1);
    padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    margin:0;
    display:flex;flex-direction:row;align-items:stretch;gap:10px;flex-wrap:nowrap
  }
  #ev-app .ev-acts .ev-btn{flex:1 1 0;min-width:0;padding:.75rem .5rem;font-size:.85rem}
  #ev-app form{padding-bottom:88px}
}

/* ════════════════════════════════
   MOBILE PEQUENO - ate 480px
════════════════════════════════ */
@media(max-width:480px){
  #ev-app .ev-g2,#ev-app .ev-g3,#ev-app .ev-g4,#ev-app .ev-g5{grid-template-columns:1fr}
  #ev-app .ev-s2,#ev-app .ev-s3{grid-column:span 1}
  #ev-app .ev-title{font-size:1.2rem}
  #ev-app .ev-section{padding:1rem .875rem}
  #ev-app .ev-legend{font-size:.8rem}
  #ev-app .ev-header{gap:.75rem}
}