/* CAMBIO 21: Desafío — las alternativas largas se muestran completas.
   No se modifican las preguntas, el reloj, ni el comportamiento de respuesta.
   Se recupera el espacio reservado para avisos antes de responder, sin ocultar
   los mensajes de acierto/error cuando aparezcan. */
@layer silabasPiloto {
  @media (min-width:900px) and (min-height:600px) {
    /* Antes de contestar, no reservar 64 px para el aviso vacío. */
    #pantallaSilabasV1[data-modo="desafio"].sv-con-tiempo:has(> .sv-pie > .sv-aviso:empty) {
      grid-template-rows:58px 30px 51px minmax(0,1fr) 62px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"]:not(.sv-con-tiempo):has(> .sv-pie > .sv-aviso:empty) {
      grid-template-rows:58px 30px minmax(0,1fr) 62px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"]:has(> .sv-pie > .sv-aviso:empty) > .sv-pie {
      grid-template-rows:0 minmax(44px,1fr)!important;
      gap:0!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad {
      grid-template-rows:70px minmax(0,1fr)!important;
      gap:5px!important;
      padding:12px 14px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-zona {
      grid-template-columns:minmax(235px,.76fr) minmax(0,1.84fr)!important;
      gap:16px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-tablero {
      gap:7px!important;
      padding:2px!important;
      align-items:stretch!important;
      justify-content:center!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-con-boss .sv-tablero {
      gap:6px!important;
      justify-content:center!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-opciones-expertas {
      gap:8px!important;
      align-content:center!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-opciones-expertas .sv-opcion {
      font-size:clamp(14px,1.22vw,17px)!important;
      line-height:1.21!important;
      min-height:53px!important;
      padding:7px 10px!important;
      text-align:left!important;
      overflow-wrap:normal!important;
      word-break:normal!important;
      hyphens:auto!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-instruccion {
      line-height:1.18!important;
      font-size:13px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-titulo h1 {
      font-size:clamp(21px,2vw,28px)!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-contexto {
      padding:4px 6px 4px 0!important;
    }
  }
  /* En móviles verticales también damos prioridad a las alternativas. */
  @media (max-width:700px) and (min-height:620px) {
    #pantallaSilabasV1[data-modo="desafio"].sv-con-tiempo:has(> .sv-pie > .sv-aviso:empty) {
      grid-template-rows:50px 28px 45px minmax(0,1fr) 63px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"]:not(.sv-con-tiempo):has(> .sv-pie > .sv-aviso:empty) {
      grid-template-rows:50px 28px minmax(0,1fr) 63px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"]:has(> .sv-pie > .sv-aviso:empty) > .sv-pie {
      grid-template-rows:0 minmax(44px,1fr)!important;
      gap:0!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad {
      grid-template-rows:65px minmax(0,1fr)!important;
      padding:9px!important;
      gap:5px!important;
    }
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-zona {gap:5px!important;}
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-contexto {gap:4px!important;}
    #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-tablero {gap:4px!important;padding:1px!important;}
    #pantallaSilabasV1[data-modo="desafio"] .sv-opciones-expertas {gap:5px!important;}
    #pantallaSilabasV1[data-modo="desafio"] .sv-opciones-expertas .sv-opcion {
      font-size:12px!important;line-height:1.17!important;padding:6px 7px!important;
      overflow-wrap:break-word!important;word-break:normal!important;
    }
  }
  /* Horizontales muy bajos: conservar la barra de seguridad solo si una opción
     larga realmente no cabe; nunca recortar una alternativa ni Comprobar. */
  #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-tablero {
    scrollbar-gutter:stable!important;
  }
  #pantallaSilabasV1[data-modo="desafio"] .sv-actividad .sv-opciones-expertas .sv-opcion {
    white-space:normal!important;word-break:normal!important;
  }
}