/* ==========================================================================
   Backoffice Mobelia — Claymorphism + Liquid Glass · Navy (#2c3e50) + Dourado (#c9a961)
   ========================================================================== */
:root {
  --navy:       #2c3e50;
  --navy-2:     #1a3a52;
  --navy-3:     #22303e;
  --gold:       #c9a961;
  --gold-2:     #b08f47;
  --gold-soft:  #f3ecdb;
  --light:      #f5f5f5;
  --ink:        #2c3e50;
  --ink-soft:   #55616e;
  --muted:      #8994a0;

  --glass:      rgba(255, 255, 255, .62);
  --glass-2:    rgba(255, 255, 255, .46);
  --glass-brd:  rgba(255, 255, 255, .78);
  --glass-blur: blur(20px) saturate(160%);

  --dark-brd:   rgba(255, 255, 255, .12);

  --clay:
     14px 14px 30px rgba(44, 62, 80, .14),
    -10px -10px 24px rgba(255, 255, 255, .85),
     inset 3px 3px 8px rgba(255, 255, 255, .55),
     inset -6px -6px 14px rgba(44, 62, 80, .06);
  --clay-sm:
     8px 8px 18px rgba(44, 62, 80, .12),
    -6px -6px 14px rgba(255, 255, 255, .80);
  --clay-gold:
     8px 8px 18px rgba(120, 96, 40, .28),
    -5px -5px 14px rgba(255, 255, 255, .30),
     inset 2px 2px 6px rgba(255, 255, 255, .35),
     inset -4px -4px 10px rgba(120, 96, 40, .26);

  --radius: 24px;
}

* { box-sizing: border-box; }

body.admin-body {
  margin: 0; color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 15px; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(at 10% 14%, rgba(201, 169, 97, .14) 0, transparent 45%),
    radial-gradient(at 88% 10%, rgba(44, 62, 80, .10) 0, transparent 45%),
    radial-gradient(at 82% 86%, rgba(201, 169, 97, .10) 0, transparent 48%),
    var(--light);
  background-attachment: fixed;
}
::selection { background: var(--gold); color: #fff; }

.admin-shell { display: flex; min-height: 100vh; }

/* ---------------- Sidebar (navy) ---------------- */
.admin-sidebar {
  width: 268px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: rgba(255,255,255,.82);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--dark-brd);
}
.admin-brand { padding: 28px 24px 20px; border-bottom: 1px solid var(--dark-brd); }
.admin-brand a {
  color: #fff; text-decoration: none;
  font-size: 1.55rem; font-weight: 800; letter-spacing: .01em; line-height: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.admin-brand .admin-logo { height: 46px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.admin-brand span { font-size: .56rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-top: 10px; font-weight: 600; }
.admin-nav { display: flex; flex-direction: column; padding: 16px 14px; gap: 5px; }
.admin-nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 14px;
  color: rgba(255,255,255,.72); text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: all .22s ease;
}
.admin-nav a i { font-size: 1.1rem; width: 22px; text-align: center; }
.admin-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.admin-nav a.active {
  color: var(--navy);
  background: linear-gradient(145deg, #d8bd7c, #b8973f);
  box-shadow: inset 2px 2px 6px rgba(255,255,255,.35), inset -3px -3px 8px rgba(120,96,40,.30);
}
.admin-nav a.active i { color: var(--navy); }
.badge-unread { margin-left: auto; background: #fff; color: var(--gold-2); font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.admin-nav-footer { margin-top: auto; padding: 18px; border-top: 1px solid var(--dark-brd); }
.admin-nav-footer a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .82rem; display: inline-flex; gap: 8px; align-items: center; transition: color .2s; }
.admin-nav-footer a:hover { color: var(--gold); }

/* ---------------- Main ---------------- */
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  height: 74px;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-brd);
  display: flex; align-items: center; gap: 16px; padding: 0 30px;
  position: sticky; top: 0; z-index: 20;
}
.admin-title { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--navy); }
.admin-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--navy); }
.admin-user { margin-left: auto; }
.admin-user-btn {
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-brd); border-radius: 999px;
  padding: 8px 16px; display: inline-flex; align-items: center; gap: 9px;
  color: var(--navy); font-size: .88rem; cursor: pointer; box-shadow: var(--clay-sm); transition: transform .2s;
}
.admin-user-btn:hover { transform: translateY(-1px); }
.admin-user-btn .bi-person-circle { color: var(--gold-2); font-size: 1.15rem; }
.dropdown-menu {
  border: 1px solid var(--glass-brd); border-radius: 16px; padding: 8px;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--clay);
}
.dropdown-item { border-radius: 10px; padding: 8px 12px; color: var(--navy); }
.dropdown-item:active { background: var(--gold); }

.admin-content { padding: 34px 34px 56px; width: 100%; max-width: 100%; }

/* ---------------- KPI ---------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; margin-bottom: 32px; }
.kpi {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 26px; box-shadow: var(--clay);
  display: flex; flex-direction: column; gap: 8px; transition: transform .3s ease;
}
.kpi:hover { transform: translateY(-6px); }
.kpi .kpi-label { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.kpi .kpi-value { font-size: 2.7rem; font-weight: 800; line-height: 1; color: var(--navy); letter-spacing: -.02em; }
.kpi a { color: var(--gold-2) !important; text-decoration: none; font-weight: 600; font-size: .85rem; }

/* ---------------- Panels ---------------- */
.panel {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: var(--radius); box-shadow: var(--clay); overflow: hidden;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px; border-bottom: 1px solid var(--glass-brd); }
.panel-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--navy); }
.panel-body { padding: 26px; }

/* ---------------- Tables ---------------- */
.table { margin: 0; color: var(--ink); }
.table thead th { border-bottom: 1px solid var(--glass-brd); color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: 15px 26px; background: transparent; }
.table td { vertical-align: middle; padding: 15px 26px; border-color: rgba(44,62,80,.10); }
.table tbody tr { transition: background .18s; }
.table tbody tr:hover { background: rgba(255,255,255,.45); }
.thumb { width: 58px; height: 58px; object-fit: cover; border-radius: 14px; border: 1px solid var(--glass-brd); background: rgba(255,255,255,.5); box-shadow: var(--clay-sm); }

/* ---------------- Badges ---------------- */
.pill { display: inline-block; padding: 4px 13px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.pill-on  { background: #e3f0e8; color: #2f7d4f; }
.pill-off { background: #e9edf1; color: #6c7884; }
.pill-role { background: var(--gold-soft); color: var(--gold-2); text-transform: capitalize; }

/* ---------------- Buttons ---------------- */
.btn { border-radius: 13px; font-weight: 600; transition: all .22s ease; border: 0; }
.btn-mb { background: linear-gradient(145deg, #d8bd7c, #b8973f); color: #fff; box-shadow: var(--clay-gold); }
.btn-mb:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.05); }
.btn-outline-mb { background: rgba(255,255,255,.7); color: var(--navy); box-shadow: var(--clay-sm); }
.btn-outline-mb:hover { color: var(--navy); background: #fff; transform: translateY(-2px); }
.btn-outline-danger { border-radius: 13px; background: rgba(255,255,255,.7); border: 1px solid rgba(192,72,58,.4); color: #b33f31; box-shadow: var(--clay-sm); }
.btn-outline-danger:hover { background: #c0483a; color: #fff; }
.btn-sm { padding: .4rem .8rem; border-radius: 11px; }

/* ---------------- Forms ---------------- */
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: 8px; color: var(--ink-soft); }
.form-control, .form-select { border-radius: 13px; border: 1px solid rgba(44,62,80,.16); padding: .66rem .9rem; background: rgba(255,255,255,.72); font-size: .95rem; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,97,.18); background: #fff; }
.form-text { color: var(--muted); font-size: .82rem; }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 4px rgba(201,169,97,.18); border-color: var(--gold); }
code { color: var(--gold-2); background: var(--gold-soft); padding: 1px 7px; border-radius: 7px; font-size: .85em; }

/* ---------------- Gallery ---------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.gallery-item { position: relative; border: 1px solid var(--glass-brd); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.5); box-shadow: var(--clay-sm); transition: transform .25s; }
.gallery-item:hover { transform: translateY(-4px); }
.gallery-item img { width: 100%; height: 130px; object-fit: cover; display: block; }
.gallery-item .gallery-actions { display: flex; gap: 6px; padding: 8px; }
.gallery-item .is-cover { position: absolute; top: 8px; left: 8px; background: linear-gradient(145deg, #d8bd7c, #b8973f); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; box-shadow: var(--clay-sm); }

/* ---------------- Alerts ---------------- */
.alert { border: 1px solid var(--glass-brd); border-radius: 16px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--clay-sm); }
.alert-success { color: #235c39; }
.alert-danger { color: #8f2f24; }

/* ---------------- Empty state ---------------- */
.empty-state { text-align: center; padding: 58px 20px; color: var(--muted); }
.empty-state i { font-size: 2.8rem; display: block; margin-bottom: 12px; color: rgba(44,62,80,.25); }

/* ---------------- Login ---------------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(at 18% 18%, rgba(201,169,97,.26) 0, transparent 42%),
    radial-gradient(at 84% 12%, rgba(26,58,82,.60) 0, transparent 46%),
    radial-gradient(at 72% 88%, rgba(201,169,97,.16) 0, transparent 48%),
    linear-gradient(155deg, #2c3e50 0%, #1a3a52 55%, #16283a 100%);
}
.login-wrap::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  top: -170px; right: -130px; pointer-events: none;
  background: radial-gradient(circle, rgba(201,169,97,.22) 0, transparent 68%);
}

.login-card {
  position: relative; width: 100%; max-width: 430px; text-align: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 26px; padding: 48px 44px 38px; overflow: hidden;
  box-shadow: 0 40px 80px -28px rgba(8, 18, 32, .72), 0 2px 6px rgba(8,18,32,.20), inset 0 1px 0 rgba(255,255,255,.8);
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #b8973f, #e6cf94, #b8973f);
}

.login-logo { margin-bottom: 22px; }
.login-logo img { max-height: 62px; width: auto; }

.login-title { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; letter-spacing: -.01em; }
.login-subtitle { color: var(--muted); font-size: .92rem; margin: 0 0 28px; }

.login-field { position: relative; margin-bottom: 14px; text-align: left; }
.login-field i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gold-2); font-size: 1.05rem; pointer-events: none;
}
.login-field .form-control {
  height: 52px; padding-left: 46px; border-radius: 14px;
  background: #fbfaf7; border: 1px solid rgba(44,62,80,.14);
}
.login-field .form-control:focus { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,97,.16); }

.login-card .btn-mb {
  height: 52px; margin-top: 6px; border-radius: 14px; width: 100%;
  letter-spacing: .1em; text-transform: uppercase; font-size: .84rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.login-foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(44,62,80,.10);
  color: var(--gold-2); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
}

/* CAPTCHA de imagem no login */
.cap-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.login-card .cap-block { text-align: left; }
.login-card .cap-label { display: block; font-weight: 600; font-size: .78rem; color: var(--ink-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.login-card .cap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.login-card .cap-img { height: 52px; width: 172px; border-radius: 12px; border: 1px solid rgba(44,62,80,.14); background: #f6f6f8; flex-shrink: 0; }
.login-card .cap-refresh { border: 1px solid rgba(44,62,80,.14); background: #fff; color: var(--ink-soft); width: 50px; height: 50px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.login-card .cap-refresh:hover { color: var(--gold-2); border-color: var(--gold); }
.login-card .cap-input { flex: 1 1 100%; height: 50px; padding-left: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.login-card .cap-hint { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
  .admin-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .24s ease; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-toggle { display: inline-flex; align-items: center; }
  .admin-content { padding: 24px 18px 44px; }
}