:root {
    --primary:       #6366f1;
    --primary-dark:  #4f46e5;
    --primary-light: #eef2ff;
    --green:         #22c55e;
    --green-light:   #dcfce7;
    --red:           #ef4444;
    --red-light:     #fee2e2;
    --amber:         #f59e0b;
    --amber-light:   #fef3c7;
    --bg:            #f1f5f9;
    --card:          #ffffff;
    --text:          #1e293b;
    --text-dim:      #64748b;
    --border:        #e2e8f0;
    --shadow:        0 1px 3px rgba(0,0,0,.08);
    --radius:        8px;
}

*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html,body { height:100%; }
body { font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5; }

.hidden { display:none !important; }
.full   { width:100%; }

/* ── BANNER RESPONSÁVEL TÉCNICO ── */
.tech-lead-banner {
    background:linear-gradient(90deg,var(--primary),var(--primary-dark));
    color:#fff;
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:.55rem;padding:.45rem 1rem;
    font-size:.78rem;font-weight:500;
    letter-spacing:.02em;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    position:relative;z-index:101;
}
.tech-lead-label {
    text-transform:uppercase;
    font-size:.68rem;font-weight:600;letter-spacing:.08em;
    opacity:.85;
}
.tech-lead-name { font-weight:700;font-size:.85rem; }
.tech-lead-project {
    opacity:.85;font-size:.72rem;
    padding-left:.55rem;border-left:1px solid rgba(255,255,255,.35);
}
@media (max-width:480px) {
    .tech-lead-banner { font-size:.72rem;gap:.4rem;padding:.4rem .65rem; }
    .tech-lead-project { padding-left:.4rem; }
}

/* ── AUTH ── */
.screen { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem; }

.auth-card { background:var(--card);border-radius:14px;box-shadow:0 4px 28px rgba(0,0,0,.1);padding:2rem;width:100%;max-width:420px; }

.auth-logo { text-align:center;margin-bottom:1.5rem; }
.logo-icon { font-size:2.6rem;line-height:1; }
.auth-logo h1 { font-size:1.65rem;font-weight:700;color:var(--primary);margin-top:.3rem; }
.auth-logo p  { color:var(--text-dim);font-size:.82rem;margin-top:.2rem; }

.auth-tabs { display:flex;gap:.4rem;margin-bottom:1.5rem;background:var(--bg);border-radius:9px;padding:.25rem; }
.tab-btn { flex:1;padding:.5rem;border:none;background:transparent;cursor:pointer;border-radius:7px;font-size:.875rem;font-weight:500;color:var(--text-dim);transition:.18s;font-family:inherit; }
.tab-btn.active { background:var(--card);color:var(--primary);box-shadow:var(--shadow);font-weight:600; }

.auth-form { display:flex;flex-direction:column;gap:1rem; }
.auth-error { color:var(--red);font-size:.8rem;min-height:1.2em; }

.radio-group { display:flex;flex-direction:column;gap:.45rem; }
.radio-label { display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer; }
.radio-label input[type="radio"] { width:auto;accent-color:var(--primary); }
.badge-admin { font-size:.68rem;background:var(--primary-light);color:var(--primary);padding:.1rem .4rem;border-radius:4px;font-weight:600; }

/* ── FIELDS ── */
.field { display:flex;flex-direction:column;gap:.35rem; }
.field label { font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em; }
.field input,.field select,.field textarea {
    padding:.6rem .75rem;border:1.5px solid var(--border);border-radius:var(--radius);
    font-size:.9rem;font-family:inherit;color:var(--text);outline:none;transition:.18s;background:var(--card);
}
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary); }
.field input::placeholder { color:var(--text-dim); }

/* ── BUTTONS ── */
.btn-primary { background:var(--primary);color:#fff;border:none;border-radius:var(--radius);padding:.65rem 1.2rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-primary:disabled { opacity:.5;cursor:default; }

.btn-ghost { background:transparent;border:none;border-radius:var(--radius);padding:.6rem .9rem;font-size:.875rem;color:var(--text-dim);cursor:pointer;transition:.18s;font-family:inherit; }
.btn-ghost:hover { background:var(--bg);color:var(--text); }

.btn-outline { background:transparent;border:1.5px solid var(--border);border-radius:var(--radius);padding:.55rem 1rem;font-size:.875rem;color:var(--text);cursor:pointer;transition:.18s;font-family:inherit; }
.btn-outline:hover { border-color:var(--primary);color:var(--primary); }

.btn-sm   { padding:.38rem .75rem;font-size:.8rem; }
.btn-back { background:transparent;border:none;color:var(--primary);cursor:pointer;font-size:.875rem;font-weight:600;padding:.3rem 0;font-family:inherit;flex-shrink:0; }
.btn-back:hover { text-decoration:underline; }

/* ── NAVBAR ── */
#app { display:flex;flex-direction:column;min-height:100vh; }

.navbar {
    background:var(--card);border-bottom:1px solid var(--border);
    padding:.7rem 1.5rem;display:flex;align-items:center;gap:.75rem;
    flex-shrink:0;position:sticky;top:0;z-index:100;
}
.nav-logo  { font-size:1.15rem;flex-shrink:0; }
.nav-school-btn {
    background:transparent;border:1px solid var(--border);border-radius:6px;
    padding:.3rem .65rem;font-size:.8rem;font-weight:600;color:var(--text-dim);
    cursor:pointer;transition:.18s;font-family:inherit;max-width:180px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-school-btn:hover { border-color:var(--primary);color:var(--primary); }

.nav-center { display:flex;gap:.2rem;flex:1;justify-content:center; }
.nav-tab { background:transparent;border:none;padding:.48rem .85rem;border-radius:6px;font-size:.85rem;font-weight:500;color:var(--text-dim);cursor:pointer;transition:.18s;font-family:inherit; }
.nav-tab:hover  { background:var(--bg);color:var(--text); }
.nav-tab.active { background:var(--primary-light);color:var(--primary);font-weight:600; }

.nav-right { display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0; }
.nav-user  { font-size:.78rem;color:var(--text-dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ── MOBILE NAV ── */
.mobile-nav { display:none; }

/* ── VIEWS ── */
.view { flex:1;padding:1.5rem;max-width:1100px;margin:0 auto;width:100%; }

.view-header {
    display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.view-header h2 { font-size:1.35rem;font-weight:700; }
.view-date { color:var(--text-dim);font-size:.82rem;margin-top:.15rem; }
.header-actions { display:flex;gap:.5rem;align-items:center;margin-left:auto; }

/* ── DASHBOARD ── */
.shifts-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem; }
.shift-label { font-size:.78rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem; }
.class-list  { display:flex;flex-direction:column;gap:.55rem; }

.class-card {
    background:var(--card);border-radius:var(--radius);border:1.5px solid var(--border);
    padding:.95rem 1.1rem;cursor:pointer;transition:.18s;
    display:flex;align-items:center;gap:.75rem;
}
.class-card:hover           { border-color:var(--primary);box-shadow:0 2px 10px rgba(99,102,241,.12); }
.class-card.done            { border-color:var(--green);background:var(--green-light); }
.class-card.no-access       { cursor:default;opacity:.65; }
.class-card.no-access:hover { border-color:var(--border);box-shadow:none; }

.class-icon    { font-size:1.3rem;flex-shrink:0; }
.class-info    { flex:1;min-width:0; }
.class-name    { font-weight:700;font-size:.95rem; }
.class-teacher { font-size:.76rem;color:var(--text-dim);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.status-pill { flex-shrink:0;font-size:.74rem;font-weight:700;padding:.25rem .65rem;border-radius:20px; }
.status-done    { background:var(--green);color:#fff; }
.status-pending { background:var(--amber-light);color:#92400e; }
.status-locked  { background:var(--bg);color:var(--text-dim); }

/* ── ATTENDANCE ── */
.info-banner { background:var(--primary-light);color:var(--primary-dark);border-radius:var(--radius);padding:.75rem 1rem;font-size:.875rem;margin-bottom:1rem;border:1px solid #c7d2fe; }

.att-status-badge { font-size:.8rem;font-weight:700;padding:.3rem .85rem;border-radius:20px;background:var(--amber-light);color:#92400e; }
.att-status-badge.done { background:var(--green-light);color:#15803d; }

.att-toolbar { display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap; }

.student-list  { display:flex;flex-direction:column;gap:.45rem;padding-bottom:6rem; }
.student-row   { background:var(--card);border-radius:var(--radius);border:1.5px solid var(--border);padding:.8rem 1rem;display:flex;align-items:center;gap:.85rem;transition:.15s; }
.student-row.is-present { border-color:var(--green); }
.student-row.is-absent  { border-color:var(--red); }

.student-number { font-size:.76rem;color:var(--text-dim);width:1.6rem;flex-shrink:0;text-align:right; }
.student-name   { flex:1;font-weight:500;font-size:.9rem; }

.presence-toggle { display:flex;border-radius:6px;overflow:hidden;border:1.5px solid var(--border);flex-shrink:0; }
.presence-btn    { padding:.35rem .8rem;border:none;background:transparent;cursor:pointer;font-size:.76rem;font-weight:700;transition:.12s;font-family:inherit; }
.presence-btn:not(.active) { color:var(--text-dim); }
.presence-btn.present.active { background:var(--green);color:#fff; }
.presence-btn.absent.active  { background:var(--red);color:#fff; }

/* read-only attendance row status pill */
.ro-pill { font-size:.76rem;font-weight:700;padding:.25rem .65rem;border-radius:20px;flex-shrink:0; }
.ro-present { background:var(--green-light);color:#15803d; }
.ro-absent  { background:var(--red-light);color:#991b1b; }

.att-submit-bar { position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:50; }
.att-summary { font-size:.85rem;color:var(--text-dim); }
.att-summary strong { color:var(--text); }

/* ── FILTER BAR ── */
.filter-bar { display:flex;gap:.65rem;margin-bottom:1.5rem;flex-wrap:wrap;align-items:center; }
.filter-select,.filter-date {
    padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:var(--radius);
    font-size:.85rem;font-family:inherit;color:var(--text);background:var(--card);outline:none;cursor:pointer;transition:.15s;
}
.filter-select:focus,.filter-date:focus { border-color:var(--primary); }

/* ── HISTORY ── */
.history-list { display:flex;flex-direction:column;gap:.6rem; }
.history-card { background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden; }
.history-card-hdr { padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:.15s; }
.history-card-hdr:hover { background:var(--bg); }
.history-class-name { font-weight:700;font-size:.9rem; }
.history-date       { font-size:.78rem;color:var(--text-dim);margin-top:.1rem; }
.history-stats      { margin-left:auto;display:flex;gap:.6rem;font-size:.8rem; }
.stat-p { color:#15803d;font-weight:700; }
.stat-a { color:var(--red);font-weight:700; }
.history-detail { padding:.5rem 1rem 1rem;display:none; }
.history-detail.open { display:block; }
.detail-row { display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid var(--border);font-size:.82rem; }
.detail-row:last-child { border-bottom:none; }

/* ── DATA TABLE ── */
.data-table-wrap { background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;overflow-x:auto; }
.data-table { width:100%;border-collapse:collapse; }
.data-table th { padding:.7rem 1rem;text-align:left;font-size:.74rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--bg); }
.data-table td { padding:.72rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:#fafbff; }
.table-actions { display:flex;gap:.4rem; }
.btn-icon { background:transparent;border:1.5px solid var(--border);border-radius:5px;padding:.3rem .6rem;cursor:pointer;font-size:.78rem;transition:.15s;color:var(--text-dim);font-family:inherit; }
.btn-icon:hover        { border-color:var(--primary);color:var(--primary); }
.btn-icon.danger:hover { border-color:var(--red);color:var(--red); }

/* ── REPORTS ── */
.report-content { display:flex;flex-direction:column;gap:1rem; }
.report-card { background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden; }
.report-card-hdr { padding:.85rem 1rem;background:var(--primary-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem; }
.report-class-name { font-weight:700;color:var(--primary-dark); }
.report-overall { font-size:.8rem;font-weight:600;color:var(--primary); }
.report-table { width:100%;border-collapse:collapse; }
.report-table th { padding:.6rem 1rem;text-align:left;font-size:.73rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);background:var(--bg); }
.report-table td { padding:.6rem 1rem;font-size:.83rem;border-bottom:1px solid var(--border); }
.report-table tr:last-child td { border-bottom:none; }
.prog-wrap { background:var(--border);border-radius:4px;height:6px;width:72px;display:inline-block;vertical-align:middle; }
.prog-fill { height:100%;border-radius:4px;transition:.3s; }

/* ── MODALS ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem; }
.modal { background:var(--card);border-radius:14px;padding:1.5rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 10px 40px rgba(0,0,0,.18); }
.modal h3 { font-size:1.05rem;font-weight:700; }
.modal-actions { display:flex;gap:.5rem;justify-content:flex-end;margin-top:.25rem; }
.modal-label { font-size:.74rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em; }
.modal-value { font-weight:700;font-size:1rem; }
.code-display { font-size:1.8rem;font-weight:700;letter-spacing:.3em;text-align:center;padding:.75rem;background:var(--bg);border-radius:var(--radius);color:var(--primary);border:2px dashed var(--border);margin:.2rem 0; }

/* ── EMPTY / LOADING STATES ── */
.empty-state { text-align:center;padding:3rem 1rem;color:var(--text-dim); }
.empty-state-icon { font-size:2.5rem;margin-bottom:.75rem; }
.empty-state p { font-size:.9rem; }

/* ── TOAST ── */
.toast {
    position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(1rem);
    background:var(--text);color:#fff;
    padding:.65rem 1.25rem;border-radius:30px;font-size:.85rem;font-weight:500;
    opacity:0;transition:opacity .22s,transform .22s;
    z-index:999;white-space:nowrap;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.22);
}
.toast-visible { opacity:1;transform:translateX(-50%) translateY(0); }
.toast-success { background:#166534; }
.toast-error   { background:#991b1b; }
.toast-info    { background:#1e40af; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .nav-center { display:none; }
    .nav-user   { display:none; }
    .mobile-nav {
        display:flex;background:var(--card);border-top:1px solid var(--border);
        position:fixed;bottom:0;left:0;right:0;z-index:100;
    }
    .mn-tab { flex:1;padding:.55rem .25rem;border:none;background:transparent;font-size:.9rem;cursor:pointer;transition:.18s;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:.1rem;font-family:inherit; }
    .mn-tab span { font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em; }
    .mn-tab.active { color:var(--primary); }
    .view { padding:1rem;padding-bottom:5.5rem; }
    .shifts-grid { grid-template-columns:1fr; }
    .att-submit-bar {
        bottom:4rem;
        border-radius:var(--radius) var(--radius) 0 0;
        border-top:1px solid var(--border);
        padding:.85rem 1.5rem;
        z-index:101;
    }
    .student-list { padding-bottom:11rem; }
    .toast { bottom:5.5rem; }
}

@media (max-width:480px) {
    .auth-card { padding:1.5rem; }
    .filter-select,.filter-date { min-width:0; }
    .data-table th:nth-child(3),.data-table td:nth-child(3) { display:none; }
}

@media print {
    /* Ocultar toda a UI de navegação e interação */
    .navbar, .mobile-nav, #authScreen,
    .modal-overlay, .btn-primary, .btn-outline,
    .btn-ghost, .btn-back, .btn-sm,
    .filter-bar, .att-toolbar, .att-submit-bar,
    #btnRefreshDash, #btnPrint, #btnSignOut,
    #btnSchoolInfo { display: none !important; }

    body { background: #fff !important; color: #111 !important;
           font-family: Arial, Helvetica, sans-serif; margin: 0; }

    #app { display: block !important; }

    .view { display: none !important; }
    .view:not(.hidden) { display: block !important; }

    /* Painel */
    .shifts-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .shift-col { border: 1px solid #ccc; border-radius: 6px; padding: .75rem; }
    .shift-label { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }

    .class-card { border: 1px solid #ddd !important; background: #f9f9f9 !important;
                  border-radius: 6px; padding: .5rem .75rem; margin-bottom: .4rem;
                  page-break-inside: avoid; }

    /* Lista de presença */
    .student-list { display: block !important; }
    .student-row { border-bottom: 1px solid #eee; padding: .4rem 0;
                   display: flex; align-items: center; gap: .6rem; }

    /* Tabelas */
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: .35rem .6rem; font-size: .82rem; color: #111 !important; }
    th { background: #f0f0f0 !important; font-weight: 700; }

    /* Histórico */
    .history-list { display: block !important; }
    .history-item { border: 1px solid #ddd; border-radius: 6px; padding: .6rem .8rem;
                    margin-bottom: .5rem; page-break-inside: avoid; }

    /* Relatórios */
    .report-content { display: block !important; }

    h2 { font-size: 1.2rem; border-bottom: 2px solid #333; padding-bottom: .3rem; margin-bottom: .8rem; }

    a { color: #111 !important; text-decoration: none; }

    @page { margin: 1.5cm; size: A4; }
}