/* ================================
   Forum News Admin — Layout base
   ================================ */

/* === Variables de layout === */
:root{
  --navbar-h: 64px;         /* altura de la barra principal (mainbar) */
  --sidebar-w: 255px;       /* ancho normal del sidebar */
  --sidebar-w-mini: 80px;   /* ancho en modo icon-only (colapsado) */

  /* Topbar opcional (tira con patrón) */
  --topbar-h: 70px;
  --bar-bg: #707070;
}

/* === Alturas base === */
html, body { height: 100%; }
.container-scroller{
  min-height: 100vh;
  height: 100%;
  overflow: hidden;              /* el scroll vive en .content-wrapper */
  display: flex;
  flex-direction: column;
}

/* ===================
   Barras superiores
   =================== */

/* TOPBAR (opcional, tira con patrón; no fixed) */
.topbar{
  height: var(--topbar-h);
  background-color: var(--bar-bg);
  background-image: url("../../public/images/forum/Forum-DataArtStrip.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  border: 0;
  box-shadow: none;
}

/* NAVBAR principal pegada arriba (sticky) */
.mainbar{
  position: sticky;
  top: 0;
  z-index: 1050;
  min-height: var(--navbar-h);
  background: var(--bar-bg);
  border: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.mainbar .navbar-menu-wrapper,
.mainbar .navbar-brand-wrapper{
  background: transparent !important;
}

/* ===================
   Sidebar + wrapper
   =================== */

/* Sidebar FIJA con scroll propio */
.sidebar,
.sidebar-offcanvas{
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1030;
}

/* Zona de trabajo a la derecha del sidebar */
.page-body-wrapper{
  margin-top: var(--navbar-h);
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--navbar-h));
  display: flex;                 /* contiene .main-panel */
  overflow: visible;             /* no cortes el footer ni overlays */
}

/* Panel principal y contenido con scroll interno */
.main-panel{
  flex: 1 1 auto;
  min-width: 0;                  /* evita desbordes en tablas/inputs */
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* el scroll vive abajo */
}
.content-wrapper{
  flex: 1 1 auto;
  min-height: 0;                 /* clave para que el hijo flex pueda scrollear */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer pegado al final del panel */
.footer{
  flex: 0 0 auto;
}

/* Estado icon-only (colapsado) */
body.sidebar-icon-only .sidebar,
body.sidebar-icon-only .sidebar-offcanvas{ width: var(--sidebar-w-mini); }
body.sidebar-icon-only .page-body-wrapper{ margin-left: var(--sidebar-w-mini); }

/* ================
   Responsivo
   ================ */

/* <992px: sidebar offcanvas; contenido ocupa 100% */
@media (max-width: 991.98px){
  .sidebar,
  .sidebar-offcanvas{
    position: fixed;
    transform: translateX(-100%);
    transition: transform .2s ease;
    width: var(--sidebar-w);
    box-shadow: 0 0 24px rgba(0,0,0,.18);
    background: #fff;
    z-index: 1040;
  }
  body.sidebar-open .sidebar,
  body.sidebar-open .sidebar-offcanvas{
    transform: none;
  }
  .page-body-wrapper{ margin-left: 0; }
  .navbar .navbar-brand-wrapper{ width: auto; flex: 0 0 auto; }
  .navbar .navbar-menu-wrapper{ width: 100%; }
}

/* >=1200px: tarjetas un poco más “amables” */
@media (min-width: 1200px){
  .content-wrapper .card{ border-radius: 14px; }
  .content-wrapper .card-body{ padding: 1.25rem 1.5rem; }
}

/* <1200px: paddings un poco más compactos */
@media (max-width: 1199.98px){
  .content-wrapper{ padding: 1rem; }
}

/* <768px: tipografías y rejillas más compactas */
@media (max-width: 767.98px){
  h1,.h1{ font-size: 1.5rem; }
  h2,.h2{ font-size: 1.25rem; }
  h3,.h3{ font-size: 1.1rem; }

  /* KPIs en 2 col */
  #kpis>[class*="col-"]{ flex: 0 0 50%; max-width: 50%; }

  #quick-actions{ gap: .5rem; }
  #quick-actions .btn{ flex: 1 1 100%; }

  .content-wrapper{ padding: .75rem; }
}

/* <576px: una columna y toques grandes */
@media (max-width: 575.98px){
  #kpis>[class*="col-"]{ flex: 0 0 100%; max-width: 100%; }
  .font-weight-bold.mb-1.d-flex{ flex-direction: column; gap: .25rem; }
  .form-control, .custom-select, .choices__inner{ min-height: 44px; }
  .card-body{ padding: .85rem; }
  .footer{ padding: .75rem 0; }
}

/* Reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation: none !important; transition: none !important; }
}

/* =================
   Utilidades
   ================= */
.container-fluid{ padding-left: 1rem; padding-right: 1rem; }
.table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video{ max-width: 100%; height: auto; }
.breadcrumb-clean{ background-color: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 0 !important; }
.usuario-nombre{ color: #fff; }
.navbar-toggler .icon-menu{ color: #fff; }

/* Select2 sobre modales */
.select2-container{ z-index: 2055; }

/* =================
   Fuentes: Outfit
   ================= */

/* Regular */
@font-face{
  font-family: 'Outfit';
  src: url('../../public/fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
/* Medium */
@font-face{
  font-family: 'Outfit';
  src: url('../../public/fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal;
}
/* SemiBold */
@font-face{
  font-family: 'Outfit';
  src: url('../../public/fonts/Outfit/static/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal;
}
/* Bold */
@font-face{
  font-family: 'Outfit';
  src: url('../../public/fonts/Outfit/static/Outfit-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
/* Black */
@font-face{
  font-family: 'Outfit';
  src: url('../../public/fonts/Outfit/static/Outfit-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body{ font-family: 'Outfit', sans-serif !important; }

/* ==========================
   Overlay de carga (CF video)
   ========================== */
#cf_vid_card { position: relative; }
.upload-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index: 10;
  backdrop-filter: blur(1px);
}
.upload-box{ color:#fff; text-align:center; }
.upload-box .spinner-border{ width:2.5rem; height:2.5rem; }
.upload-box .bars{
  display:flex; gap:6px; margin-top:10px; height:22px; align-items:flex-end;
}
.upload-box .bars span{
  width:6px; background:#fff; opacity:.9;
  animation: equalize 1.2s infinite ease-in-out;
  border-radius: 2px;
}
.upload-box .bars span:nth-child(1){ animation-delay: 0s; }
.upload-box .bars span:nth-child(2){ animation-delay: .1s; }
.upload-box .bars span:nth-child(3){ animation-delay: .2s; }
.upload-box .bars span:nth-child(4){ animation-delay: .3s; }
.upload-box .bars span:nth-child(5){ animation-delay: .4s; }
@keyframes equalize{
  0%,100%{ height:6px; opacity:.7; }
  50%{ height:22px; opacity:1; }
}


/* Asegura que SweetAlert2 flote sobre backdrop/headers fijos */
.swal2-container {
  z-index: 3000 !important; /* > 1060 de Bootstrap modal/backdrop */
}

.sweet-overlay, .sweet-alert { z-index: 3000 !important; }

/* “chevron” para la columna control */
#tbNoticias td.dtr-control::before,
#tbNoticias th.dtr-control::before{
  margin-right:.25rem;
  content:'›';           /* cerrado */
  transform:rotate(90deg);
  display:inline-block;
  opacity:.6;
}
#tbNoticias tr.parent td.dtr-control::before{
  content:'‹';           /* abierto */
  transform:rotate(-90deg);
  opacity:.9;
}

/* limita el ancho visual dentro del editor (no afecta al front si no lo incluyes allá) */
.note-editor .embed-responsive.mx-auto {
  max-width: 900px; /* ajusta a gusto o elimínalo */
}

/* Limita el ancho visual de videos dentro del editor (opcional) */
.note-editor .embed-responsive.mx-auto { max-width: 900px; }

/* Aplica a la zona editable de Summernote */
.note-editor .note-editable {
  font-family: "Outfit", Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
}

/* Puedes ponerlo en tu CSS global */
.form-editable input[disabled] {
  background: #f3f5f7;
  cursor: not-allowed;
}
.form-editable.editing input[disabled] {
  background: #fff;
}

.card .card-body + .card-footer {
  border-top: 1px solid rgba(0,0,0,.05);
}