/* forms.css - estilos para formularios del sitio PublicAudiovisual */
#colabForm{display:flex;flex-direction:column;gap:12px;margin-top:12px}
#colabForm label{font-weight:600;display:block;margin-top:8px;color:var(--text)}
#colabForm input[type="text"],
#colabForm input[type="email"],
#colabForm input[type="file"],
#colabForm select,
#colabForm textarea{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
  border-radius:8px;
  color:var(--text);
  width:100%;
  box-sizing:border-box;
}
#colabForm input[type="file"]{padding:6px}
#colabForm textarea{min-height:120px;resize:vertical}
#colabForm .muted.small{margin-top:6px}

input:focus, textarea:focus, select:focus{outline:none;box-shadow:0 0 0 4px rgba(110,231,183,0.08);border-color:var(--accent)}

/* Mapear clase .button usada en la página a estilo de llamada a la acción */
button.button, button.button.cta, .cta.button{background:var(--accent);color:#042023;border:none;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
button.button:hover, .cta:hover{opacity:0.96;transform:translateY(-1px);transition:0.15s}

@media(max-width:540px){
  .wrap{padding:16px;margin:20px}
  .card{padding:14px}
}

/* Pequeño ajuste para inputs de archivo en móviles */
@media(max-width:420px){
  #colabForm input[type="file"]{font-size:0.95rem}
}

/* Mejorar legibilidad del select y las opciones */
#colabForm select{
  background:rgba(255,255,255,0.02);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
  border-radius:8px;
  -webkit-appearance:none;
  appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Forzar color y fondo de las opciones (soporte depende del navegador) */
#colabForm option{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--text);
}

/* Ajuste de foco específico para select */
#colabForm select:focus{box-shadow:0 0 0 6px rgba(110,231,183,0.08);border-color:var(--accent)}

/* Fondo oscuro y alto contraste para el formulario en .hero */
.hero .card{
  background: rgba(4,32,35,0.86) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  padding: 22px;
  color: var(--text);
  position: relative;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Inputs y selects con mayor contraste */
#colabForm input[type="text"],
#colabForm input[type="email"],
#colabForm textarea,
#colabForm select{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
}

/* Select más oscuro en desplegado para legibilidad (soporte depende del navegador) */
#colabForm select{
  background: rgba(2,8,12,0.6);
  color: var(--text);
}
#colabForm option{
  background: #041017;
  color: var(--text);
}

/* Aumentar contraste del botón si fuese necesario */
button.button{box-shadow:0 6px 18px rgba(6,28,27,0.45)}