/* =====================================================================
   COMPLIANCE21 · REBRAND GLASSMORPHISM
   Archivo: rebrand-medios.css  ·  Área: BIBLIOTECA DE MEDIOS
   ---------------------------------------------------------------------
   Re-front en limpio de la pantalla de Medios (biblioteca_de_medios).
   Reutiliza los tokens de rebrand-base.css (--glass, --accent, --ink…).
   Selectores anclados a #contenedorImagenes / #datosImg / .medios-* para
   ganar la cascada al <style> inline de la vista SIN tocar el JS: se
   conservan todos los hooks (#drop_zone, #archivoImage, .iptSrch,
   .btnSrch, .showImage, .thumbnail, .seleccionada, #datosImg, campos y
   botones). Sólo actúa en esta pantalla: sus selectores no existen en
   otras vistas, así que es inocuo cargarlo global desde cabecera.
   ===================================================================== */

/* ===== 1 · BARRA SUPERIOR: subida + búsqueda ===== */
.content .medios-toolbar{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:14px;
  padding:14px; margin:0 0 16px;
  background:var(--glass);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* --- Zona de arrastre / doble clic --- */
.content .medios-dropzone{
  flex:1 1 340px; min-width:260px; margin:0; padding:0;
  border:1.5px dashed rgba(47,95,199,.34);
  border-radius:12px; background:var(--accent-soft);
  cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease;
  display:flex; align-items:center; justify-content:center;
}
.content .medios-dropzone:hover{
  border-color:var(--accent); background:rgba(47,95,199,.14); transform:translateY(-1px);
}
.content .medios-dropzone.dragover,
.content .medios-dropzone.dz-hover{
  border-color:var(--accent); background:rgba(47,95,199,.18);
}
.content .medios-dropzone .medios-dropzone-box{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px; margin:0; width:100%;
}
.content .medios-dropzone-icon{
  font-size:26px; line-height:1; color:var(--accent);
  width:46px; height:46px; flex:0 0 46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); box-shadow:var(--shadow-sm);
}
.content .medios-dropzone-txt{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.content .medios-dropzone-txt strong{ font-size:14px; font-weight:650; color:var(--ink); }
.content .medios-dropzone-txt span{ font-size:12.5px; color:var(--muted); }

/* --- Buscador --- */
.content .medios-toolbar-wrap{ margin-bottom:0; }
.content .medios-search{ flex:1 1 240px; min-width:200px; max-width:360px; display:flex; align-items:center; }
.content .medios-search .medios-search-box{
  position:relative; display:flex; align-items:center; width:100%;
  background:var(--glass-2); border:1px solid var(--border-in);
  border-radius:11px; padding:0; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(23,32,49,.04);
}
.content .medios-search input.iptSrch,
.content #search-category input.iptSrch{
  flex:1 1 auto; width:100%; min-width:0; height:44px; border:0; background:transparent;
  padding:0 6px 0 16px; font-size:13.5px; color:var(--ink); outline:none; box-shadow:none;
}
.content .medios-search input.iptSrch::placeholder{ color:var(--muted); }
.content .medios-search button.btnSrch,
.content #search-category button.btnSrch{
  flex:0 0 46px; width:46px; height:44px; margin:0; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; font-size:15px;
  color:#fff; background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-radius:0; transition:filter .15s ease;
}
.content .medios-search button.btnSrch:hover{ filter:brightness(1.06); }
.content .medios-search button.btnSrch i{ color:#fff; }

/* ===== 2 · GALERÍA (columna izquierda) ===== */
.content #contenedorImagenes.medios-galeria{
  height:648px; overflow:hidden auto; padding:16px !important;
  background:var(--glass) !important;
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  scrollbar-width:thin; scrollbar-color:rgba(47,95,199,.35) transparent;
}
.content #contenedorImagenes.medios-galeria::-webkit-scrollbar{ width:10px; }
.content #contenedorImagenes.medios-galeria::-webkit-scrollbar-thumb{
  background:rgba(47,95,199,.28); border-radius:8px; border:3px solid transparent; background-clip:content-box;
}
.content #contenedorImagenes.medios-galeria::-webkit-scrollbar-thumb:hover{ background:rgba(47,95,199,.45); background-clip:content-box; }

/* --- Rejilla flexible de miniaturas (neutraliza floats/margenes inline) --- */
.content #contenedorImagenes .showImage{
  display:flex; flex-wrap:wrap; gap:14px; margin:0;
}
.content #contenedorImagenes .showImage::before,
.content #contenedorImagenes .showImage::after{ content:none; }
.content #contenedorImagenes .showImage > div.thumbnail{
  float:none !important; margin:0 !important;
  width:142px !important; height:142px !important;
  border-radius:13px !important; overflow:hidden; position:relative;
  background:#eef2f7 !important; border:1px solid var(--border-in);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.content #contenedorImagenes .showImage > div.thumbnail:hover{
  transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(47,95,199,.4);
}
.content #contenedorImagenes .showImage > div.thumbnail img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  left:0 !important; top:0 !important; transform:none !important;
  border:0 !important; border-radius:0 !important; padding:0 !important; background:none;
}
.content #contenedorImagenes .showImage > div.thumbnail.img-thumbnail{ padding:0; }
/* miniatura de archivo (no imagen): icono + pie */
.content #contenedorImagenes .showImage > div.thumbnail .fa-file-text,
.content #contenedorImagenes .showImage > div.thumbnail .fa-file{
  color:#9aa6bb !important; font-size:340% !important;
}
.content #contenedorImagenes .showImage > div.thumbnail .pie{
  position:absolute; left:0; right:0; bottom:0; margin:0 !important; width:100%;
  padding:6px 8px; font-size:11px; line-height:1.25; text-align:center;
  color:#fff; background:linear-gradient(180deg,rgba(16,24,44,0),rgba(16,24,44,.82));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* estado seleccionado (el JS marca .seleccionada) */
.content #contenedorImagenes .showImage > div.thumbnail.seleccionada,
.content #contenedorImagenes .showImage > div.seleccionada{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft), var(--shadow) !important;
}

/* ===== 3 · PANEL DE DETALLE (columna derecha) ===== */
.content #datosImg.medios-panel{ overflow:visible; font-size:12px; }
.content #datosImg .medios-panel-card{
  height:648px; overflow:hidden auto; margin:0; padding:18px;
  background:var(--glass) !important;
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  scrollbar-width:thin; scrollbar-color:rgba(47,95,199,.35) transparent;
}
.content #datosImg .medios-panel-card::-webkit-scrollbar{ width:8px; }
.content #datosImg .medios-panel-card::-webkit-scrollbar-thumb{ background:rgba(47,95,199,.25); border-radius:8px; }

/* pestañas de idioma como pills */
.content #datosImg .nav-tabs.tabs{ border:0; display:flex; gap:6px; margin-bottom:14px; }
.content #datosImg .nav-tabs.tabs > li{ float:none; margin:0; }
.content #datosImg .nav-tabs.tabs > li > a{
  border:1px solid var(--border-in) !important; border-radius:9px !important;
  background:var(--glass-2); color:var(--ink-2) !important; padding:7px 13px !important;
  font-size:12.5px; font-weight:600; margin:0 !important; transition:all .15s ease;
}
.content #datosImg .nav-tabs.tabs > li > a:hover{ border-color:rgba(47,95,199,.4) !important; color:var(--accent) !important; }
.content #datosImg .nav-tabs.tabs > li.active > a,
.content #datosImg .nav-tabs.tabs > li > a[aria-expanded="true"]{
  background:linear-gradient(180deg,var(--accent-2),var(--accent)) !important;
  border-color:transparent !important; color:#fff !important;
}
.content #datosImg .nav-tabs.tabs > li > a i.fa-flag{ margin-right:5px; opacity:.9; }

/* ficha de metadatos */
.content #datosImg .tab-content{ box-shadow:none !important; background:transparent !important; padding:0 !important; }
.content #datosImg .form-group > .col-md-12 > label{
  display:block; font-size:12px; color:var(--muted); font-weight:600; margin:0 0 4px;
}
.content #datosImg .form-group > .col-md-12 > label > span{
  color:var(--ink) !important; font-weight:500 !important;
}
.content #datosImg hr{ border-top:1px solid var(--line); margin:14px 0; }

/* campos del formulario */
.content #datosImg .control-label{
  text-align:left; font-size:12px; color:var(--muted); font-weight:600;
  padding-top:9px; padding-left:0;
}
.content #datosImg .form-control{
  height:auto; min-height:38px; border-radius:10px;
  border:1px solid var(--border-in); background:var(--glass-2);
  font-size:13px; color:var(--ink); padding:8px 12px; box-shadow:none;
}
.content #datosImg .form-control:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--glass-hi);
}
.content #datosImg textarea.form-control{ min-height:70px; resize:vertical; }
.content #datosImg #urlImg[disabled]{ background:rgba(23,32,49,.05); color:var(--muted); }

/* botonera */
.content #datosImg .text-center{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.content #datosImg #btnBorrar,
.content #datosImg #btnEditar,
.content #datosImg #btnGuardar{
  margin-top:0 !important; border:0; border-radius:10px; padding:9px 16px;
  font-size:12.5px; font-weight:600; color:#fff; box-shadow:var(--shadow-sm);
  transition:filter .15s ease, transform .12s ease, opacity .15s ease;
}
.content #datosImg #btnBorrar:not([disabled]):hover,
.content #datosImg #btnEditar:not([disabled]):hover,
.content #datosImg #btnGuardar:not([disabled]):hover{ filter:brightness(1.06); transform:translateY(-1px); }
.content #datosImg #btnBorrar{ background:linear-gradient(180deg,#e35d5d,var(--crit)); }
.content #datosImg #btnEditar{ background:linear-gradient(180deg,#37b573,var(--low)); }
.content #datosImg #btnGuardar{ background:linear-gradient(180deg,var(--accent-2),var(--accent)); }
.content #datosImg .btn[disabled]{ opacity:.5; box-shadow:none; }

/* miniatura de vista previa dentro del panel (#img_select) */
.content #datosImg #img_select .thumbnail{
  border:1px solid var(--border-in); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-sm);
}

/* ===== 4 · BLOQUEADOR (overlay de carga) ===== */
#bloqueador{ background:rgba(16,24,44,.42) !important; border-radius:var(--radius); }

/* ===== 5 · MODAL DE RECORTE (cropper) ===== */
#cropperModal .modal-content{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--glass-hi);
  box-shadow:var(--shadow);
}
#cropperModal .modal-header{ border-bottom:1px solid var(--line); }
#cropperModal .modal-header .modal-title{ color:var(--ink); font-weight:650; letter-spacing:.2px; }

/* ===== 6 · RESPONSIVE ===== */
@media (max-width:991px){
  .content #contenedorImagenes.medios-galeria{ height:auto; max-height:520px; margin-bottom:16px; }
  .content #datosImg .medios-panel-card{ height:auto; }
}
@media (max-width:600px){
  .content .medios-toolbar{ flex-direction:column; }
  .content .medios-search{ flex:1 1 auto; }
  .content #contenedorImagenes .showImage{ justify-content:center; }
  .content #contenedorImagenes .showImage > div.thumbnail{ width:44% !important; height:auto !important; aspect-ratio:1/1; }
}