/* ══════════════════════════════════════════════════════════════
   InstruMedical Academy — Estilos
   Extraído do index.html monolítico para manutenibilidade
══════════════════════════════════════════════════════════════ */

/* ── Bloco 1 ──────────────────────────────────────────── */
:root {
  --im-blue:#1A3F8F;--im-blue2:#1E6BB8;--im-cyan:#00B4D8;--im-light:#E8F4FC;--im-lighter:#F4F9FE;
  --bg:#F5F7FA;--bg2:#FFFFFF;--bg3:#EDF1F7;
  --text:#0D1F35;--text2:#4A6080;--text3:#8A9DB5;--border:#D8E4F0;
  --primary:var(--im-blue);--card:var(--bg2);
  --success:#00B07A;--danger:#E8334A;--warn:#F59E0B;--gold:#B08D2E;
  --sb-bg:#0D1F35;--sb-bg2:#152A45;--sb-text:#A8BDD4;
  --radius:12px;--shadow:0 2px 16px rgba(26,78,138,.10);--shadow-lg:0 8px 32px rgba(26,78,138,.16);
  --sidebar:248px;--font:"DM Sans",system-ui,sans-serif;--font-display:"DM Serif Display",serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);}
a{color:inherit;text-decoration:none;}button{cursor:pointer;font-family:var(--font);}
input,textarea,select{font-family:var(--font);}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--bg3);}
::-webkit-scrollbar-thumb{background:var(--im-cyan);border-radius:3px;}
#app{height:100vh;display:flex;flex-direction:column;}
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--im-blue);padding:20px;position:fixed;inset:0;z-index:500;overflow-y:auto;}
#auth-screen::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
#main-layout{display:none;height:100vh;}#main-layout.active{display:flex;}
#sidebar{width:var(--sidebar);background:var(--sb-bg);border-right:1px solid #1E3558;display:flex;flex-direction:column;flex-shrink:0;}
#content{flex:1;overflow-y:auto;background:var(--bg);display:flex;flex-direction:column;align-items:stretch;}
.auth-card{background:#fff;border-radius:20px;padding:44px 40px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.25);position:relative;z-index:1;}
.auth-logo{text-align:center;margin-bottom:32px;}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:var(--im-blue);border-radius:18px;margin-bottom:14px;box-shadow:0 8px 24px rgba(26,78,138,.4);}
.logo-mark svg{width:36px;height:36px;fill:white;}
.auth-logo h1{font-family:var(--font-display);font-size:22px;color:var(--im-blue);letter-spacing:-.3px;}
.auth-logo p{color:var(--text2);font-size:13px;margin-top:4px;}
.auth-logo .tagline{font-size:11px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.08em;}
.auth-tabs{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:24px;}
.auth-tab{flex:1;padding:9px;text-align:center;border-radius:8px;font-size:13px;font-weight:600;color:var(--text2);border:none;background:none;transition:.2s;cursor:pointer;}
.auth-tab.active{background:var(--im-blue);color:#fff;box-shadow:0 2px 8px rgba(26,78,138,.3);}
.form-group{margin-bottom:16px;}.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}
.form-group input{width:100%;padding:12px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:.2s;}
.form-group input:focus{border-color:var(--im-cyan);background:#fff;box-shadow:0 0 0 3px rgba(0,163,217,.12);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;border:none;transition:.2s;white-space:nowrap;cursor:pointer;}
.btn-primary{background:var(--im-blue);color:#fff;box-shadow:0 2px 8px rgba(26,78,138,.3);}
.btn-primary:hover{background:var(--im-blue2);transform:translateY(-1px);}
.btn-cyan{background:var(--im-cyan);color:#fff;}.btn-cyan:hover{background:#0090C0;}
.btn-success{background:var(--success);color:#fff;}.btn-success:hover{background:#009668;}
.btn-danger{background:var(--danger);color:#fff;}.btn-danger:hover{background:#CC2A3E;}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--im-blue);}
.btn-gold{background:var(--gold);color:#fff;}
.btn-full{width:100%;justify-content:center;}
.error-msg{background:#FFF0F2;border:1px solid #FFCCD2;color:var(--danger);padding:10px 14px;border-radius:8px;font-size:13px;margin-top:12px;}
.sidebar-header{padding:20px 16px 16px;border-bottom:1px solid #1E3558;}
.sidebar-brand{display:flex;align-items:center;gap:10px;}
.brand-icon{width:38px;height:38px;background:var(--im-cyan);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-icon svg{width:22px;height:22px;fill:white;}
.sidebar-brand-text .name{font-family:var(--font-display);font-size:14px;color:#fff;line-height:1.2;}
.sidebar-brand-text .sub{font-size:10px;color:var(--sb-text);text-transform:uppercase;letter-spacing:.08em;}
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:700;color:#3A6080;text-transform:uppercase;letter-spacing:.1em;padding:10px 10px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--sb-text);font-size:13px;font-weight:500;cursor:pointer;transition:.15s;margin-bottom:2px;border:none;background:none;width:100%;text-align:left;}
.nav-item:hover{background:#1E3558;color:#fff;}.nav-item.active{background:var(--im-cyan);color:#fff;box-shadow:0 2px 10px rgba(0,163,217,.35);}
.nav-item .icon{width:20px;text-align:center;font-size:15px;}
.sidebar-user{padding:12px;border-top:1px solid #1E3558;}
.user-badge{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:#1A3050;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--im-cyan);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
.user-info{min-width:0;flex:1;}.user-info .name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-info .role{font-size:10px;color:var(--sb-text);}
.logout-btn{background:none;border:none;color:#3A6080;font-size:16px;cursor:pointer;padding:4px;border-radius:6px;transition:.15s;}
.logout-btn:hover{color:var(--danger);}
.sidebar-signature{padding:8px 16px;border-top:1px solid #1E3558;text-align:center;}
.sidebar-signature p{font-size:10px;color:#2A4060;}.sidebar-signature span{color:var(--im-cyan);font-weight:600;}
.page{display:none;padding:28px 32px;width:100%;box-sizing:border-box;}
.page.active{display:block;max-width:1240px;margin:0 auto;}
#page-player.active{display:flex;flex-direction:column;max-width:100% !important;margin:0 !important;padding:0 !important;}
#page-player.active .player-layout{flex:1;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap;}
.page-header h2{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.3px;}
.page-header p{color:var(--text2);font-size:13px;margin-top:4px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--bg2);border-radius:var(--radius);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--im-cyan);}
.stat-card .label{font-size:11px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.stat-card .value{font-size:30px;font-weight:700;margin-top:6px;color:var(--im-blue);font-family:var(--font-display);}
.stat-card .sub{font-size:12px;color:var(--text3);margin-top:4px;}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.course-card{background:var(--bg2);border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:.22s;cursor:pointer;box-shadow:var(--shadow);}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--im-cyan);}
.course-thumb{height:148px;background:linear-gradient(135deg,var(--im-blue) 0%,var(--im-cyan) 100%);position:relative;overflow:hidden;}
.course-thumb img{width:100%;height:100%;object-fit:cover;}
.course-thumb .thumb-overlay{position:absolute;inset:0;background:rgba(26,78,138,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;font-size:28px;}
.course-card:hover .thumb-overlay{opacity:1;}
.course-badge{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--success);color:#fff;}
.course-info{padding:16px;}.course-info h3{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--text);line-height:1.4;}
.course-info .meta{font-size:12px;color:var(--text2);display:flex;gap:10px;flex-wrap:wrap;}
.progress-bar{height:4px;background:var(--bg3);border-radius:2px;margin-top:12px;overflow:hidden;}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,var(--im-blue),var(--im-cyan));border-radius:2px;transition:width .4s ease;}
.player-layout{display:grid;grid-template-columns:1fr 310px;gap:0;}
.player-video{background:#000;width:100%;position:relative;}
.player-video video{width:100%;display:block;background:#000;}
.player-video .iframe-wrapper{position:relative;width:100%;padding-top:56.25%;/* 16:9 */}
.player-video .iframe-wrapper iframe,.player-video .iframe-wrapper>div{position:absolute;inset:0;width:100%;height:100%;border:none;}
.player-video .pdf-viewer{width:100%;height:70vh;border:none;display:block;}
.player-main{display:flex;flex-direction:column;min-width:0;}
.player-info{padding:20px 24px;background:var(--bg2);border-bottom:1px solid var(--border);}
.player-info h2{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--text);}
.player-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.player-sidebar{background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;height:calc(100vh - 60px);position:sticky;top:0;}
.player-sidebar-header{padding:16px;border-bottom:1px solid var(--border);background:var(--im-blue);}
.player-sidebar-header h3{font-size:13px;font-weight:600;color:#fff;}
.chapter-title{padding:10px 16px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;background:var(--bg);border-bottom:1px solid var(--border);}
.lesson-item{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:.15s;}
.lesson-item:hover{background:var(--im-lighter);}.lesson-item.active{background:var(--im-light);border-left:3px solid var(--im-cyan);}
.lesson-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;transition:.2s;}
.lesson-check.done{background:var(--success);border-color:var(--success);color:#fff;}
.lesson-item-info .title{font-size:13px;font-weight:500;color:var(--text);}
.lesson-item-info .sub{font-size:11px;color:var(--text3);margin-top:2px;}
.quiz-container{max-width:720px;margin:0 auto;padding:32px;}
.quiz-header{margin-bottom:28px;}.quiz-header h2{font-size:22px;font-weight:700;color:var(--im-blue);}
.question-card{background:var(--bg2);border-radius:14px;padding:24px;margin-bottom:18px;border:1px solid var(--border);box-shadow:var(--shadow);}
.question-card .q-num{font-size:11px;color:var(--im-cyan);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.question-card .q-text{font-size:16px;font-weight:600;margin-bottom:18px;line-height:1.5;color:var(--text);}
.option-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;transition:.15s;}
.option-item:hover{border-color:var(--im-cyan);background:var(--im-lighter);}
.option-item.selected{border-color:var(--im-blue);background:var(--im-light);}
.option-item.correct{border-color:var(--success);background:rgba(0,176,122,.08);}
.option-item.wrong{border-color:var(--danger);background:rgba(232,51,74,.08);}
.option-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:.15s;}
.option-item.selected .option-radio{background:var(--im-blue);border-color:var(--im-blue);}
.result-card{text-align:center;padding:48px 32px;background:var(--bg2);border-radius:20px;border:1px solid var(--border);max-width:500px;margin:0 auto;box-shadow:var(--shadow-lg);}
.result-icon{font-size:64px;margin-bottom:16px;}
.result-score{font-size:64px;font-weight:700;font-family:var(--font-display);}
.result-score.pass{color:var(--success);}.result-score.fail{color:var(--danger);}
.card{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow);}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.card-header h3{font-size:15px;font-weight:600;color:var(--text);}
table{width:100%;border-collapse:collapse;}
th{padding:11px 16px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg);}
td{padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text);}
tr:last-child td{border-bottom:none;}tr:hover td{background:var(--im-lighter);}
.badge{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.badge-admin{background:rgba(26,78,138,.12);color:var(--im-blue);}
.badge-editor{background:rgba(245,158,11,.12);color:#D97706;}
.badge-student{background:rgba(0,176,122,.12);color:var(--success);}.badge-funcionario{background:rgba(0,176,122,.12);color:var(--success);}.badge-cliente{background:rgba(0,163,217,.12);color:var(--im-cyan);}
.badge-published{background:rgba(0,176,122,.12);color:var(--success);}
.badge-draft{background:var(--bg3);color:var(--text3);}
.modal-overlay{position:fixed;inset:0;background:rgba(13,31,53,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;opacity:0;pointer-events:none;transition:.2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg2);border-radius:18px;border:1px solid var(--border);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;transform:translateY(20px) scale(.98);transition:.22s;box-shadow:var(--shadow-lg);}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1;}
.modal-header h3{font-size:16px;font-weight:700;color:var(--text);}
.modal-close{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.modal-close:hover{background:var(--bg3);}
.modal-body{padding:24px;}.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group select,.form-group textarea{width:100%;padding:11px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:.2s;}
.form-group select:focus,.form-group textarea:focus{border-color:var(--im-cyan);background:#fff;}
.form-group textarea{resize:vertical;min-height:90px;}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.cert-card{background:linear-gradient(135deg,var(--im-blue) 0%,var(--im-blue2) 100%);border-radius:16px;padding:28px;position:relative;overflow:hidden;color:white;}
.cert-card::after{content:'✚';position:absolute;right:18px;top:16px;font-size:28px;opacity:.2;}
.cert-card h3{font-size:15px;font-weight:700;margin-bottom:6px;position:relative;}
.cert-card p{font-size:12px;opacity:.75;margin-bottom:8px;position:relative;}
.cert-card .cert-date{font-size:11px;opacity:.6;position:relative;margin-bottom:16px;}
.filter-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.filter-bar select{padding:10px 14px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;outline:none;}
.search-box{position:relative;}
.search-box input{padding:10px 14px 10px 38px;background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;outline:none;transition:.2s;}
.search-box input:focus{border-color:var(--im-cyan);}
.search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;}
.empty-state{text-align:center;padding:64px 20px;color:var(--text2);}
.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:.6;}
.empty-state h3{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--text);}
.empty-state p{font-size:13px;}
.welcome-banner{background:linear-gradient(135deg,var(--im-blue) 0%,var(--im-cyan) 100%);border-radius:16px;padding:28px 32px;margin-bottom:24px;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;overflow:hidden;}
.welcome-banner::after{content:'✚';position:absolute;right:140px;top:-20px;font-size:120px;opacity:.06;color:white;pointer-events:none;}
.welcome-banner h3{font-family:var(--font-display);font-size:22px;margin-bottom:6px;}
.welcome-banner p{font-size:14px;opacity:.85;}
.welcome-action{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.4);color:white;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s;}
.welcome-action:hover{background:rgba(255,255,255,.3);}
#toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;color:#fff;animation:slideIn .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.2);max-width:320px;}
.toast.success{background:var(--success);}.toast.error{background:var(--danger);}.toast.info{background:var(--im-blue);}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.page-footer{
  text-align:center;padding:14px 20px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text3);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:auto;
}
.page-footer a{color:var(--im-cyan);font-weight:600;text-decoration:none;}
.page-footer a:hover{text-decoration:underline;}
/* ── MOBILE HAMBURGER BUTTON ─────────────────────────────────────────────── */
#mobile-menu-btn{display:none;position:fixed;top:12px;left:12px;z-index:201;
  width:42px;height:42px;background:var(--im-blue);border:none;border-radius:10px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
#mobile-menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;}
#mobile-overlay{display:none;position:fixed;inset:0;background:#0008;z-index:99;}

@media(max-width:768px){
  /* Prevent horizontal overflow on mobile */
  html,body{overflow-x:hidden;}

  /* Sidebar */
  #sidebar{position:fixed;left:-100%;z-index:100;height:100%;transition:.3s;box-shadow:4px 0 24px #0004;width:var(--sidebar);}
  #sidebar.open{left:0;}
  #mobile-menu-btn{display:flex;}
  #mobile-overlay.open{display:block;}

  /* Content area: prevent flex overflow + top padding for hamburger */
  #content{padding-top:66px;min-width:0;width:100%;}
  /* Hamburger button — keep above sidebar overlay */
  #mobile-menu-btn{z-index:200;}

  /* Auth card — reduce padding on mobile */
  .auth-card{padding:28px 20px;max-width:100%;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.2);}
  .auth-logo img{height:72px !important;}
  #auth-screen{padding:12px;}

  /* Pages */
  .page{padding:12px;}
  .form-row{grid-template-columns:1fr;}
  .welcome-banner{flex-direction:column;padding:20px 16px;}
  .welcome-banner h3{font-size:18px;}
  .welcome-banner p{font-size:13px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-card .value{font-size:22px;}
  .courses-grid{grid-template-columns:1fr;}
  .cert-grid{grid-template-columns:1fr;}

  /* Override inline fixed widths on inputs/selects for mobile */
  .search-box input,
  .filter-bar select,
  .filter-bar input,
  #catalog-search,
  #report-course-select,
  #report-user-select,
  #qz-filter-course{width:100% !important;min-width:0 !important;max-width:100% !important;}

  /* Dashboard grid — override inline minmax */
  #dash-courses-list{grid-template-columns:1fr !important;}

  /* ── PLAYER MOBILE — vídeo em cima, info no meio, lista embaixo ────── */
  .player-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr;
    height:auto;
  }
  .player-main{order:1;}
  .player-video{
    width:100%;
    position:sticky;
    top:0;
    z-index:10;
    background:#000;
  }
  .player-video video { max-height:40vh; }
  .player-video .iframe-wrapper { min-height: 200px; }
  .player-info{padding:14px 16px;}
  .player-info h2{font-size:16px;}
  .player-actions{gap:8px;}
  .player-actions .btn{font-size:12px;padding:8px 12px;flex:1;}
  .player-sidebar{
    order:2;
    border-left:none;
    border-top:3px solid var(--im-blue);
    height:auto;
    max-height:none;
    overflow:visible;
    position:relative;
  }

  /* Tables scroll horizontal */
  .card{overflow-x:auto;}
  table{min-width:500px;}

  /* Modais fullscreen no mobile */
  .modal{max-width:100% !important;margin:0;border-radius:16px 16px 0 0;
    position:fixed;bottom:0;left:0;right:0;max-height:92vh;}
  .modal-overlay{align-items:flex-end;padding:0;}

  /* Course editor mobile — override inline grid */
  #page-course-editor > div,
  #ce-grid{grid-template-columns:1fr !important;height:auto !important;}
  #ce-detail-panel{display:none;}

  /* Quiz */
  .quiz-container{padding:16px;}
  .question-card{padding:16px;}
  .question-card .q-text{font-size:14px;}

  /* Botões da tabela de usuários/cursos */
  td > div{flex-wrap:wrap;}

  /* Page headers */
  .page-header{flex-direction:column;align-items:flex-start;gap:10px;}
  .page-header h2{font-size:20px;}
  .page-header button{width:100%;}

  /* Filter bars */
  .filter-bar{flex-direction:column;gap:8px;}
  .filter-bar select,.filter-bar input{width:100% !important;}
  .search-box{width:100%;}
  .search-box input{width:100% !important;}

  /* Card headers */
  .card-header{flex-wrap:wrap;gap:8px;}

  /* Auth box */
  .auth-box{padding:24px 16px !important;}

  /* Report tabs */
  #report-tab-course,#report-tab-user{flex:1;font-size:12px;}

  /* Nav section labels */
  .nav-section{font-size:9px;}

  /* Notification panel — prevent overflow */
  #notif-panel{width:100% !important;max-width:100% !important;left:0 !important;right:0 !important;border-radius:0 0 14px 14px !important;}

  /* Toast container — center on mobile */
  #toast-container{left:12px;right:12px;bottom:16px;}
  .toast{max-width:100%;}

  /* Footer */
  .page-footer{flex-direction:column;gap:8px;padding:12px 16px;}
}

/* Extra small screens (phones < 480px) */
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr;}
  .page{padding:8px;}
  .modal{max-height:96vh;}
  .auth-card{padding:24px 16px;}
  .page-header h2{font-size:18px;}
  .stat-card .value{font-size:20px;}
  .stat-card{padding:14px;}
  .welcome-banner{padding:16px 12px;}
  .welcome-banner h3{font-size:16px;}
  .course-thumb{height:120px;}
  .course-info{padding:12px;}
  .course-info h3{font-size:13px;}
  #content{padding-top:60px;}
  .cert-card{padding:20px;}
  .result-card{padding:32px 16px;}
  .result-score{font-size:48px;}
}

/* ── COURSE EDITOR ───────────────────────────────────────────────────────── */
.ce-chapter { user-select: none; }
.ce-chapter.sortable-ghost { opacity: .4; }
.ce-lessons-list .sortable-ghost { opacity: .4; background: var(--im-light) !important; }
.ce-drag-handle, .ce-lesson-handle { user-select: none; }
.ce-tab { transition: color .15s, border-color .15s; }



/* ── TEMA ESCURO ─────────────────────────────────────────────────────────── */
body.dark-theme {
  --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;
  --text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;
  --border:#1e293b;
  --im-light:#1e3a5f;--im-lighter:#1a2f4a;
}
body.dark-theme #auth-screen { background: #0a1628; }
body.dark-theme .auth-card { background:#1e293b; border:1px solid #334155; }
body.dark-theme .auth-card input { background:#0f172a; border-color:#334155; color:#f1f5f9; }
body.dark-theme .auth-tabs { background:#0f172a; }
body.dark-theme table tr:hover td { background:#334155; }
body.dark-theme .modal { background:#1e293b; }
body.dark-theme .modal-header { background:#1e293b; }
body.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-theme select,
body.dark-theme textarea {
  background:#0f172a!important;color:#f1f5f9!important;border-color:#334155!important;
}
body.dark-theme .modal { background:#1e293b; color:#f1f5f9; }
body.dark-theme #modal-change-pass input,
body.dark-theme #modal-change-pass select,
body.dark-theme #modal-change-pass textarea {
  background:#0f172a !important; color:#f1f5f9 !important; border-color:#334155 !important;
}
body.dark-theme .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-theme .modal select,
body.dark-theme .modal textarea {
  background:#0f172a!important;color:#f1f5f9!important;border-color:#334155!important;
}
body.dark-theme .card { background:#1e293b;border-color:#334155; }
body.dark-theme .ce-chapter input {
  color:#f1f5f9 !important;
  background:transparent !important;
  border:none !important;
}
body.dark-theme .stat-card { background:#1e293b;border-color:#334155; }
body.dark-theme .course-card { background:#1e293b;border-color:#334155; }
body.dark-theme .cert-card { background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%); }
body.dark-theme .question-card { background:#1e293b; }
body.dark-theme .option-item { border-color:#334155; }
body.dark-theme .option-item:hover { background:#334155; }
body.dark-theme #ce-detail-panel { background:#0f172a; }
body.dark-theme footer { background:#1e293b!important;border-color:#334155!important; }

/* Botão de tema no sidebar */
.theme-toggle-btn {
  background:none;border:1.5px solid var(--bg3);border-radius:20px;
  color:var(--text2);font-size:12px;cursor:pointer;
  padding:5px 12px;display:flex;align-items:center;gap:6px;
  transition:.2s;width:100%;justify-content:center;
}
.theme-toggle-btn:hover { border-color:var(--im-cyan);color:var(--im-cyan); }



/* ── NOTIFICAÇÕES ─────────────────────────────────────────────────────── */
.notif-item { padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:.15s; }
.notif-item:hover { background:var(--bg3); }
.notif-item.unread { background:rgba(0,180,216,.07); }
.notif-item .notif-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.notif-item .notif-body { font-size:12px; color:var(--text2); }
.notif-item .notif-time { font-size:11px; color:var(--text3); margin-top:3px; }
/* ── AVATAR ───────────────────────────────────────────────────────────── */
.avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-upload-ring { cursor:pointer; position:relative; }
.avatar-upload-ring:hover::after { content:'📷'; position:absolute; inset:0; background:rgba(0,0,0,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; }




/* ── SKELETON LOADING ──────────────────────────────────────────── */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
.skeleton-card { background:var(--bg2); border-radius:14px; padding:16px; border:1px solid var(--border); }
.skeleton-line { height:12px; margin-bottom:8px; }
.skeleton-title { height:18px; width:60%; margin-bottom:12px; }
.skeleton-thumb { height:120px; margin-bottom:12px; border-radius:10px; }

/* ── PAGE TRANSITIONS ──────────────────────────────────────────── */
.page { transition: opacity .18s ease, transform .18s ease; }
.page:not(.active) { opacity:0; pointer-events:none; }
.page.active { animation: pageIn .2s ease forwards; }
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
#page-player.active { animation: pageIn .15s ease forwards; }

/* ── PROGRESS BAR NO PLAYER ───────────────────────────────────── */
.player-progress-bar { height:4px; background:var(--bg3); position:relative; }
.player-progress-fill { height:100%; background:var(--im-cyan); transition:width .5s linear; border-radius:0 2px 2px 0; }


body.dark-theme #modal-change-pass .modal,
body.dark-theme #modal-change-pass { background:#1e293b !important; }
body.dark-theme [id^="modal-"] input:not([type="checkbox"]):not([type="file"]),
body.dark-theme [id^="modal-"] select,
body.dark-theme [id^="modal-"] textarea {
  background:#0f172a !important; color:#f1f5f9 !important; border-color:#334155 !important;
}

/* ── COOKIE CONSENT TOGGLE ────────────────────────────────────── */
#modal-cookie-prefs input[type="checkbox"]:checked + span {
  background: var(--im-cyan);
}
#modal-cookie-prefs input[type="checkbox"] + span::before {
  content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
#modal-cookie-prefs input[type="checkbox"]:checked + span::before {
  transform: translateX(20px);
}
/* ── LGPD MODAL CONTENT ───────────────────────────────────────── */
#lgpd-modal-body h2.lgpd-h2 { margin-top:20px; }
body.dark-theme #cookie-banner { background:#0d1f35; }

/* ── LGPD STYLES (consolidado) ─────────────────────────────────────────── */
.lgpd-h2{font-size:18px;font-weight:700;color:var(--im-blue);margin:24px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--im-cyan);}
.lgpd-h3{font-size:14px;font-weight:700;color:var(--text);margin:16px 0 6px;}
.lgpd-p{margin:0 0 10px;color:var(--text2);line-height:1.7;}
.lgpd-ul{margin:0 0 12px;padding-left:20px;color:var(--text2);line-height:1.8;}
.lgpd-badge{display:inline-block;background:var(--im-cyan);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle;}
.lgpd-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12px;}
.lgpd-table th{background:var(--im-blue);color:#fff;padding:8px 12px;text-align:left;}
.lgpd-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text2);}
.lgpd-table tr:nth-child(even) td{background:var(--bg3);}

/* ── TEMA ESCURO ─────────────────────────────────────────────────────────── */


/* ── FIXES MOBILE ──────────────────────────────────────────────────────── */
/* Esconde hamburger enquanto auth-screen estiver ativo */
body:not(.app-ready) #mobile-menu-btn { display:none !important; }

/* Auth-screen como overlay fixed — impede scroll para o main-layout */
#auth-screen[style*="display: none"],
#auth-screen[style*="display:none"] { display:none !important; }

/* ── FIXES MOBILE ADICIONAIS ───────────────────────────────────────────── */

/* Dashboard: welcome banner e stats não quebram em coluna estranha */
@media(max-width:768px){
  /* Garante que o conteúdo principal ocupa toda a largura disponível */
  #content { width:100%; min-width:0; overflow-x:hidden; }

  /* Welcome banner: empilha verticalmente sem overflow */
  .welcome-banner {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:16px;
  }
  .welcome-banner > div:last-child { width:100%; }

  /* Cards de stat: 2 colunas em telas médias, 1 em telas pequenas */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap:10px; }

  /* Grade de cursos: 1 coluna */
  .courses-grid, #dash-courses-list {
    grid-template-columns: 1fr !important;
    gap:12px;
  }

  /* Modais: sheet bottom no mobile, sem corte de conteúdo */
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Inputs e selects dentro de modais: 100% de largura */
  .modal input,
  .modal select,
  .modal textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Botões de ação nos modais: lado a lado sem overflow */
  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-footer .btn { flex:1; min-width: 120px; }

  /* Player: vídeo sticky no topo, sidebar embaixo */
  .player-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .player-video { position: sticky; top: 0; z-index:10; }

  /* Tabelas com scroll horizontal dentro do card */
  .card { overflow-x: auto; }
  .card table { min-width: 480px; }

  /* Page: menos padding */
  .page { padding: 10px 12px; }

  /* Notificações: painel ocupa tela toda no mobile */
  #notif-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 14px 14px !important;
    top: 0 !important;
  }

  /* Evita que o sino de notificação fique fora dos limites */
  .sidebar-brand { padding: 8px 16px !important; }

  /* Toast centralizado */
  #toast-container { left:12px; right:12px; bottom:16px; }
  .toast { max-width:100%; }

  /* Botão tema dentro do sidebar — não aparece fora dele */
  .theme-toggle-btn { margin: 0 8px; }
}

@media(max-width:480px){
  .stats-grid { grid-template-columns: 1fr; }
  .page { padding: 8px; }
  .page-header h2 { font-size:17px; }
  .auth-card { padding:24px 16px; }
  .modal { max-height:96vh !important; }
}