/* =========================================================
   PAINEL ADMIN — Instituto Educacional Copacabana
   ========================================================= */
:root{
  --primaria:#1d2a6b; --primaria-dark:#121b4a; --accent:#1fa863; --accent-dark:#0f7a46;
  --teal:#0ea5a0; --warn:#e0553f; --bg:#f1f3fa; --surface:#ffffff;
  --ink:#171a2b; --ink-soft:#5a5f7e; --line:#e3e6f0;
  --radius-sm:10px; --radius-md:16px;
  --shadow-sm:0 2px 10px rgba(23,26,60,.07); --shadow-md:0 12px 30px rgba(23,26,60,.14);
  --font-display:'Outfit','Poppins',sans-serif; --font-body:'Poppins',sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); min-height:100vh; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--font-display); color:var(--primaria); }
.hidden{ display:none !important; }

/* ---------- LOGIN ---------- */
#login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background: radial-gradient(circle at 20% 20%, #24327f 0%, var(--primaria-dark) 60%);
}
.login-card{
  background:var(--surface); border-radius:var(--radius-md); padding:38px 32px; width:100%; max-width:380px;
  box-shadow:var(--shadow-md); text-align:center;
}
.login-card img{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; }
.login-card h1{ font-size:1.3rem; margin-bottom:4px; }
.login-card p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:22px; }
.login-card input{
  width:100%; padding:12px 14px; margin-bottom:12px; border-radius:10px; border:1.5px solid var(--line); font-size:.95rem;
}
.login-card input:focus{ outline:none; border-color:var(--primaria); }
.login-card button{
  width:100%; padding:12px; border:none; border-radius:10px; background:var(--primaria); color:#fff;
  font-weight:600; font-size:.95rem; margin-top:6px; transition:background .2s ease;
}
.login-card button:hover{ background:var(--primaria-dark); }
.login-msg{ font-size:.82rem; margin-top:10px; min-height:18px; }
.login-msg.error{ color:var(--warn); }
.login-msg.ok{ color:var(--accent); }
.login-back{ display:inline-block; margin-top:16px; font-size:.82rem; color:var(--ink-soft); text-decoration:none; }

/* ---------- LAYOUT DASHBOARD ---------- */
#dashboard{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0; background:var(--primaria-dark); color:#fff;
  display:flex; flex-direction:column; padding: 22px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding: 6px 8px 22px; }
.sidebar .brand img{ width:38px; height:38px; border-radius:50%; }
.sidebar .brand strong{ font-family:var(--font-display); font-size:.95rem; }
.sidebar .brand span{ display:block; font-size:.68rem; color:rgba(255,255,255,.6); }

.side-link{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:rgba(255,255,255,.78);
  text-decoration:none; font-size:.9rem; font-weight:500; background:none; border:none; width:100%; text-align:left;
  transition: background .2s ease, color .2s ease;
}
.side-link .ico{ width:20px; text-align:center; }
.side-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-link.active{ background:var(--accent); color:#fff; }
.sidebar-footer{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }

.main-area{ flex:1; min-width:0; padding: 26px 22px 60px; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap;
}
.topbar h1{ font-size:1.4rem; }
.topbar .user-chip{
  display:flex; align-items:center; gap:10px; background:var(--surface); padding:8px 14px; border-radius:999px;
  box-shadow:var(--shadow-sm); font-size:.85rem; color:var(--ink-soft);
}

.panel{ display:none; }
.panel.active{ display:block; }

.card{
  background:var(--surface); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.card h2{ font-size:1.05rem; margin-bottom:6px; }
.card .card-sub{ color:var(--ink-soft); font-size:.85rem; margin-bottom:18px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; font-weight:600; font-size:.86rem;
  padding:10px 18px; border-radius:999px; cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ background:transparent; border:1.5px solid var(--line); color:var(--primaria); }
.btn-outline:hover{ border-color:var(--primaria); }
.btn-danger{ background:var(--warn); color:#fff; }
.btn-danger:hover{ background:#c8412d; }
.btn-sm{ padding:6px 12px; font-size:.76rem; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.83rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field .hint{ font-size:.75rem; color:var(--ink-soft); font-weight:400; margin-top:4px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=tel], .field input[type=url], .field textarea, .field input[type=number]{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--line); font-size:.9rem; font-family:inherit;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--primaria); }
.field textarea{ resize:vertical; min-height:90px; }
.two-col{ display:grid; grid-template-columns:1fr; gap:16px; }

/* Grid de mídia (carrossel/galeria/turmas) */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:14px; }
.media-item{
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1/1; background:#eef0f8; box-shadow:var(--shadow-sm);
}
.media-item img{ width:100%; height:100%; object-fit:cover; }
.media-item .media-caption{
  position:absolute; left:0; right:0; bottom:0; background:rgba(18,27,74,.75); color:#fff; font-size:.72rem;
  padding:5px 8px;
}
.media-item .media-del{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(224,85,63,.92); color:#fff; font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
.media-empty{ color:var(--ink-soft); font-size:.85rem; padding:10px 0; }

/* Upload + redimensionamento */
.upload-box{
  border:1.5px dashed var(--line); border-radius:12px; padding:18px; text-align:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.upload-box:hover{ border-color:var(--primaria); background:#f7f8fd; }
.upload-box input[type=file]{ display:none; }
.upload-box .up-icon{ font-size:1.6rem; margin-bottom:6px; }
.upload-box .up-text{ font-size:.85rem; color:var(--ink-soft); }

.resize-tool{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); display:none; }
.resize-tool.show{ display:block; }
.resize-tool .preview-wrap{
  display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; margin-top:12px;
}
.resize-tool canvas{ max-width:220px; border-radius:10px; box-shadow:var(--shadow-sm); background:#eef0f8; }
.resize-controls{ flex:1; min-width:200px; }
.resize-controls .row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.resize-controls .row label{ font-size:.8rem; width:110px; flex-shrink:0; color:var(--ink-soft); }
.resize-controls input[type=range]{ flex:1; }
.resize-controls input[type=number]{ width:80px; padding:7px 9px; border-radius:8px; border:1.5px solid var(--line); }
.resize-meta{ font-size:.76rem; color:var(--ink-soft); margin-top:4px; }

.noticia-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.noticia-row{
  display:flex; align-items:center; gap:14px; background:var(--bg); border-radius:12px; padding:10px 14px;
}
.noticia-row img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.noticia-row .info{ flex:1; min-width:0; }
.noticia-row .info strong{ display:block; font-size:.9rem; }
.noticia-row .info span{ font-size:.76rem; color:var(--ink-soft); }

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--primaria-dark); color:#fff; padding:13px 20px;
  border-radius:10px; font-size:.86rem; box-shadow:var(--shadow-md); z-index:5000; opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:none; }
.toast.error{ background:var(--warn); }
.toast.ok{ background:var(--accent-dark); }

/* ---------- responsivo ---------- */
@media (max-width: 860px){
  #dashboard{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; padding:12px; gap:4px; }
  .sidebar .brand{ display:none; }
  .side-link{ white-space:nowrap; }
  .sidebar-footer{ margin-top:0; border-top:none; }
  .main-area{ padding:18px 14px 50px; }
}

@media (min-width: 620px){
  .two-col{ grid-template-columns:1fr 1fr; }
}