:root{ --kairan: rgb(125,25,25); }

/* =========================
   FACCIONES (solo esta sección)
   Requiere: codex.css (global)
   ========================= */
.facciones-toolbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:14px;
}
.facciones-toolbar .filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.facciones-card{
  border-radius:16px; border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  overflow:hidden;
}
.facciones-card .card-body{ padding:16px; }

.badge-kairan{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:900; border-radius:999px; padding:6px 10px;
  border:1px solid rgba(125,25,25,.35);
  background: rgba(125,25,25,.08);
  color: var(--kairan);
}

.faccion-logo{
  width:62px; height:62px; border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  object-fit:cover;
}
.faccion-logo-xl{
  width:110px; height:110px; border-radius:18px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  object-fit:cover;
}

.faccion-meta{ color: rgba(0,0,0,.65); font-weight:700; }
.faccion-desc{ color: rgba(0,0,0,.70); margin:10px 0 0; white-space:pre-wrap; }

.facciones-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:14px;
}

/* Detalle */
.faccion-header{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:16px;
}
.faccion-header .left{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.faccion-section{
  margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(0,0,0,.10);
}
.faccion-section h3{
  margin:0 0 10px; font-weight:900; color: rgba(0,0,0,.85);
}

/* Form */
.facciones-form-page .form-label{ font-weight:900; }
.facciones-form-page .help{
  color: rgba(0,0,0,.65);
  font-weight:700;
  font-size:13px;
}
.facciones-form-page .form-check{
  display:flex; align-items:center; gap:10px; padding-left:0;
}
.facciones-form-page .form-check .form-check-input{ margin-left:0; }
.facciones-form-page .form-control:focus,
.facciones-form-page .form-select:focus{
  box-shadow: 0 0 0 .20rem rgba(125,25,25,.18);
  border-color: rgba(125,25,25,.45);
}