/* scrollbars */
div::-webkit-scrollbar {
    width: 8px;
}
 
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.5); 
    border-radius: 0px;
}
 
div::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(252, 163, 17);
}

.disabled {
        pointer-events: none; /* Desactiva clics */
        opacity: 0.5;         /* Reduce la opacidad */
        background-color: #a4c3b2 !important; /* Cambia el color del fondo */
        cursor: not-allowed;  /* Cambia el cursor a uno de "no permitido" */
    }

.trumbowyg-box {
      width: 1180px;
      height: 420px;
      overflow: hidden;
      margin: 0 auto;
    }
.trumbowyg-editor {
      height: calc(100% - 40px);
      overflow-y: auto;
}

/* === contenedor de cada ítem (foto o vídeo) ======================== */
.mediaItem {
    position: relative;          /* necesario para que los iconos se coloquen encima */
    display: inline-block;       /* o tu layout preferido */
    margin: 6px;
	overflow: hidden;
}

/* === botón-papelera ================================================= */
.btnDelete{
    position:absolute;
    top:2px;
    right:2px;
    width:18px;
    height:18px;
    background:url('images/papalera_N.svg') no-repeat center/contain;
    cursor:pointer;
    opacity:0.75;
    transition:opacity 0.2s;
}
.btnDelete:hover{ opacity:1; }

.mediaCasting{
    display:inline-block;  /* varios en la misma línea              */
    max-height:115px;      /* altura límite                          */
    height:115px;          /* fija la altura para IE/Edge Animate    */
    width:auto;            /* ancho proporcional                     */
    object-fit: cover;    /* alinea cuando hay filas de elementos   */
}

.mediaCasting_2{
    display:inline-block;  /* varios en la misma línea              */
    max-height:200px;      /* altura límite                          */
    height:200px;          /* fija la altura para IE/Edge Animate    */
    width:auto;            /* ancho proporcional                     */
    object-fit: cover;    /* alinea cuando hay filas de elementos   */
}

.mediaCastingVisor{
    display:inline-block;  /* varios en la misma línea              */
    max-height:165px;      /* altura límite                          */
    height:165px;          /* fija la altura para IE/Edge Animate    */
    width:auto;            /* ancho proporcional                     */
    vertical-align:top;    /* alinea cuando hay filas de elementos   */
}

/* Opcional: ajustes específicos */
.fotoCasting { margin:2px; }
.videoCasting{ margin:2px; }
.tituloVideo { font-size:12px; margin:0 2px 6px; text-align:center; }



/* ---------- Iconos superpuestos ---------- */
.iconOverlay{
    position:absolute; top:4px;
    width:24px; height:24px; line-height:24px; text-align:center;
    font-size:16px; color:#fff; background:rgba(0,0,0,.6);
    border-radius:50%; cursor:pointer; user-select:none;
}




.btnConvert480  { right:4px;  }

.progressLabel{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:'Montserrat',sans-serif; font-size:30px; font-weight:600;
    color:#fff; text-shadow:0 0 4px #000; pointer-events:none;
}

/* ─── 2) Duración+Tamaño: esquina superior IZQUIERDA ─── */
.durationSizeWrapper {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;        
  display: flex;       /* para que duración y tamaño queden juntos */
  gap: 8px;            /* espacio entre los dos spans */
}

/* ─── 3) Etiquetas Duración y Tamaño ─── */
.durationLabel,
.sizeLabel {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85em;   /* ajústalo si quieres texto más grande/pequeño */
  padding: 2px 6px;
  border-radius: 3px;
  font-family:'Montserrat',sans-serif;	
  white-space: nowrap; /* que no se rompa en dos líneas */
}

/* ─── 4) Botón de BORRAR: esquina superior DERECHA ─── */
.btnDeleteVideos {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  color: white;
  font-size: 1.1em;    /* ajusta si lo ves muy grande/pequeño */
  cursor: pointer;
  /* si quieres fondo semitransparente alrededor del “✖”:
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     padding: 2px 6px;
  */
}

.confirmOverlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.confirmBox {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  text-align: center;
  min-width: 260px;
  font-family:'Montserrat',sans-serif;			
}

.confirmBox .btn { margin: .5rem 1rem 0; padding: .4rem 1.2rem; cursor:pointer; }
.yes { background:#e53935; color:#fff; border:none; font-family:'Montserrat',sans-serif;	}
.no  { background:#9e9e9e; color:#fff; border:none; font-family:'Montserrat',sans-serif;	}




/* (opcional) pequeña pista visual al pasar el ratón */
.confirmBox .btn:hover{
  opacity:.85;
}


.dragOver { outline: 3px dashed #58a; }

.chkVisible { position:absolute; top:7px; right:35px; transform:scale(1.2); accent-color: #FCA311; }

.fc-bgevent.fc-busy { background-color:#E0E0E0 !important; }


table.lista-roles          { width:100%; border-collapse:collapse; font-family:Montserrat, sans-serif; }
table.lista-roles th,
table.lista-roles td       { padding:4px 8px; border:1px solid #ddd; font-size:12px; }
table.lista-roles .rol-header  { background:#14213D; color:#fff; text-align:left; }
table.lista-roles .rol-cita:nth-child(odd) { background:#f5f5f5; }