/* Add here all your CSS customizations */
.select2-selection--multiple {
  overflow: hidden !important;
  height: auto !important;
}


#modal-response {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

#response-content .card {
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}


/* Fondo global con opacidad y degradado */
    body {
      background: linear-gradient(233deg, #373f4bff 43%, #535353ff 72%);
      /* background: linear-gradient(233deg, #535353ff 43%, #0066ffff 72%); */
      /* background: linear-gradient(233deg, #e2f0ff 43%, #00b0ff 72%); */
      min-height: 100vh;
      position: relative;
    }
    .body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(14, 24, 58, 0.81);
      /* background: rgba(179, 180, 180, 0.68); */
      z-index: 0;
      pointer-events: none;
    }

    .card-body{
      background-color: #dfdfdfff !important;
    }
    .card-body2{
      background-color: #ffffffff !important;
    }

    /* Tarjetas de video con efecto hover */
    .video-card {
      transition: transform 0.2s, box-shadow 0.2s;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(44,62,80,0.15);
      background: rgba(255,255,255,0.95);
      position: relative;
    }
    .video-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 8px 32px rgba(41,128,185,0.25);
      border: 2px solid #297fb96f;
    }
    .video-card .card-img-top {
      border-radius: 12px 12px 0 0;
      transition: filter 0.2s;
    }
    .video-card:hover .card-img-top {
      filter: brightness(0.85);
    }
    .ver-video {
      opacity: 0;
      transition: opacity 0.2s;
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }
    .video-card:hover .ver-video {
      opacity: 1;
    }

    /* Modal personalizado */
    .modal-content {
      border-radius: 16px;
      background: rgba(255,255,255,0.98);
      box-shadow: 0 8px 32px rgba(44,62,80,0.25);
    }
    .modal-header {
      border-bottom: none;
      background: linear-gradient(90deg, #2980b9 0%, #6dd5fa 100%);
      border-radius: 16px 16px 0 0;
    }
    .close {
      color: #fff;
      opacity: 1;
      font-size: 1.5rem;
    }
    .embed-responsive {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(44,62,80,0.12);
    }

    /* Títulos y textos */
    .card-title, .modal-title {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
    }
    .card-text, #videoDesc {
      color: #34495e;
      font-size: 1rem;
    }
    .color-black{
      color: #34495e !important;
    }
    .color-white{
      color: #e2f0ff !important;
    }