/* app/assets/stylesheets/backend.css */

/* =========================
   Base (tu body es class="be")
   ========================= */

:root{
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, .12);

  --sidebar-bg: #0b1224;
  --sidebar-border: rgba(148,163,184,.16);
  --sidebar-text: rgba(255,255,255,.92);
  --sidebar-muted: rgba(255,255,255,.70);
  --sidebar-hover: rgba(255,255,255,.08);

  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-soft: rgba(37,99,235,.12);
}

.be{
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* Layout shell */
.be-shell{
  display:flex;
  min-height:100vh;
}

/* =========================
   Sidebar
   ========================= */
.be-side{
  width: 260px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px){
  .be-side{ display:none; }
}

.be-brand{
  padding: 10px 12px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.be-logo{
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 18px;
  color: #fff;
}

.be-sub{
  font-size: 12px;
  color: var(--sidebar-muted);
  margin-top: 2px;
}

.be-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 8px 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) transparent;
}
.be-nav::-webkit-scrollbar{ width: 8px; }
.be-nav::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.45);
  border-radius: 999px;
}

.be-section{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  padding: 8px 6px 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.be-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--sidebar-text);
  text-decoration:none;
  border: 1px solid transparent;
}
.be-link i{ width:18px; text-align:center; opacity:.95; }

.be-link:hover{
  background: var(--sidebar-hover);
  border-color: rgba(148,163,184,.22);
  color:#fff;
  text-decoration:none;
}
.be-link.is-active{
  background: rgba(37,99,235,.22);
  border-color: rgba(147,197,253,.55);
  color: #fff;
}

.be-link--muted{ color: var(--sidebar-muted); }

.be-hr{ height:1px; background: rgba(255,255,255,.10); margin: 10px 6px; }

.be-profile{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px 8px 6px;
}
.be-profile__card{
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  padding: 10px;
}
.be-profile__name{
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}
.be-profile__email{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  margin-top: 2px;
}
.be-profile__actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.be-profile__actions .btn{
  flex: 1;
}

/* =========================
   Main / Topbar
   ========================= */
.be-main{ flex:1; min-width:0; }

.be-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.be-top__left{ display:flex; align-items:center; gap:12px; }
.be-top__title{
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.02em;
}

.be-content{
  padding: 18px 16px 40px;
}

/* =========================
   Cards
   ========================= */
.be-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.be-card-h{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.be-card-h h2, .be-card-h h3, .be-card-h strong{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}
.be-card-b{ padding: 16px; }

/* Toolbars / acciones */
.be-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.be-toolbar__group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.be .actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.be .actions .button_to{
  display: inline-block;
  margin: 0;
}

.be .actions .btn{
  min-height: 38px;
}

/* =========================
   Items (si los usas)
   ========================= */
.be-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.18);
  background: #ffffff;
  color: #0f172a;
}
.be-item + .be-item{ margin-top: 10px; }

.be-item__label{
  font-weight: 900;
  color: #0f172a;
}
.be-item__muted{
  color: var(--muted);
  font-weight: 700;
}

/* =========================
   FIX: botones Bootstrap (para que NO sean invisibles)
   ========================= */
.be .btn{
  font-weight: 800;
  border-radius: 12px;
  transition: all .18s ease;
}

/* En backend claro, el outline-light “desaparece”, lo forzamos a oscuro */
.be .btn-outline-light{
  color: #0f172a !important;
  border-color: rgba(15,23,42,.35) !important;
  background: #ffffff !important;
}
.be .btn-outline-light:hover,
.be .btn-outline-light:focus{
  color: #0f172a !important;
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.45) !important;
}

/* Primary: oscuro y legible */
.be .btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.28);
}
.be .btn-primary:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* (Opcional) outline-dark bonito si lo usas */
.be .btn-outline-dark{
  color: #1e40af !important;
  border-color: rgba(37,99,235,.35) !important;
  background: #eff6ff !important;
}
.be .btn-outline-dark:hover,
.be .btn-outline-dark:focus{
  color: #1d4ed8 !important;
  border-color: rgba(37,99,235,.55) !important;
  background: #dbeafe !important;
}
.be .btn-dark{
  color: #fff !important;
  border-color: #334155 !important;
  background: #334155 !important;
}
.be .btn-dark:hover,
.be .btn-dark:focus{
  border-color: #475569 !important;
  background: #475569 !important;
}
.be .btn-outline-secondary{
  color: #334155 !important;
  border-color: rgba(51,65,85,.30) !important;
  background: #fff !important;
}
.be .btn-outline-secondary:hover,
.be .btn-outline-secondary:focus{
  background: #f8fafc !important;
  border-color: rgba(51,65,85,.45) !important;
}