* { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans'; }
body { margin: 0; background: #fafafa; color: #111; }
:root { --header: 56px; --gap: 16px; --actions-h: 140px; }

header {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 5;
}
.header-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.title { font-size: 18px; margin: 0 0 8px; margin-right: auto; }

.fila {
    display: flex;
    align-items: center;
    border: 2px solid #111;
    border-radius: 10px;
    padding: 6px 12px;
    background: #fff;
    min-width: 130px;
}

.fila-itens {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

#queueCount {
    font-weight: 700;
}

.name-input {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
    "label"
    "input";
    gap: 8px;
    align-items: center;
}
.name-input label[for="nameSelect"] {
    grid-area: label;
    margin: 0;
}
#nameSelect {
    grid-area: input;
    min-width: 220px;
    height: 36px;
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    padding: 12px 24px 16px 24px;
    align-items: stretch;
}

.viewer.card { grid-column: 1; grid-row: 1 / span 2; }
.actions-panel { grid-column: 2; height: var(--actions-h); display: grid; align-content: start; }

.card { background: #fff; border: 2px solid #111; border-radius: 12px; padding: 12px; }
.sections-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }

label { font-size: 12px; letter-spacing: .02em; color: #222; margin-bottom: 4px; }
input[type="text"], textarea, select {
    border: 2px solid #111;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
    width: 100%;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 28px;
}
select:disabled { background: #f3f3f3; color: #333; opacity: .8; cursor: not-allowed; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px; 
}

.chip {
    display: inline-flex;
    align-items: center;
    border: 2px solid #111;
    border-radius: 8px;
    background: #fff;
    padding: 0; 
}

.chip input {
    border: 0;
    outline: none;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.2;
    min-width: 120px;
    background: transparent;
}

.chip input:focus {
    outline: none;
}

.actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
button { border: 2px solid #111; background: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: transform .04s ease; }
button:active { transform: translateY(1px); }
.muted { font-size: 12px; color: #666; }

.viewer {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--header) - 40px);
    border: 2px solid #111;
    border-radius: 12px;
    background: #fff;
    display: grid;
    grid-template-rows: 1fr; 
    padding: 8px;
}

.stage {
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border-radius: 8px;
    height: 100%;
}

#imgView {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain; 
}

#pdfView {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
}

.stage.grabbing { cursor: grabbing; }
.stage:not(.grabbing) { cursor: grab; }

#formCard {
    height: calc(100vh - var(--header) - var(--actions-h) - var(--gap) - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#sections { padding-bottom: 72px; }

.actions-panel {
    min-height: var(--actions-h);
    height: auto;
}

#actionsPanel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "textarea actions";
    gap: 8px 16px;
    align-items: start;
}

#actionsPanel #deleteMsg {
    grid-area: textarea;
    width: 100%;
    min-height: 88px;
    resize: vertical;
    box-sizing: border-box;
}

#actionsPanel .actions {
    grid-area: actions;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: minmax(38px, auto);
    gap: 10px;
}

#actionsPanel .actions > #btnApagar,
#actionsPanel .actions > #btnEnviar {
    min-width: 0;
}

#actionsPanel .actions > #btnPausar {
    grid-column: 1 / -1; 
    width: 100%;
    margin-top: 0;
    align-self: start;
}

#recusaWrap {
    grid-area: textarea; 
    display: grid;
    gap: 8px;
    grid-template-rows: auto 1fr; 
}

#actionsPanel #deleteMsg {
    grid-area: unset;
}

#recusaWrap > * {
    width: 100%;
}

@media (max-width: 1200px) {
    main { grid-template-columns: 1fr; }
    .viewer { height: 85vh; }
}

@media (max-width: 900px) {
    .sections-grid { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}

@media (max-width: 700px) {
    #actionsPanel {
        grid-template-columns: 1fr;
        grid-template-areas:
          "textarea"
          "actions";
    }
    #actionsPanel .actions {
        justify-self: start;
        margin-top: 8px;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
}

.hidden { display: none !important; }
/* ---- Login / autenticação (minimalista) ---- */
.login-overlay{position:fixed;inset:0;background:#fafafa;display:flex;align-items:center;justify-content:center;z-index:1000;}
.login-card{display:flex;flex-direction:column;gap:12px;width:min(320px,88vw);}
.login-title{margin:0 0 8px;text-align:center;font-size:22px;font-weight:700;color:#111;}
.login-card input{padding:11px 12px;border:1px solid #d4d4d8;border-radius:8px;font-size:15px;}
.login-card input:focus{outline:none;border-color:#2563eb;}
.login-card button{margin-top:4px;padding:11px;border:0;border-radius:8px;background:#2563eb;color:#fff;font-weight:600;font-size:15px;cursor:pointer;}
.login-card button:hover{background:#1d4ed8;}
.login-error{color:#dc2626;font-size:13px;min-height:18px;margin:2px 0 0;text-align:center;}
.whoami{font-size:13px;color:#334155;font-weight:600;margin-right:8px;}
#btnLogout{padding:6px 12px;border:1px solid #d4d4d8;background:#fff;border-radius:8px;cursor:pointer;font-weight:600;}
#btnLogout:hover{background:#f4f4f5;}