/* =========================================================
   BLOCK: app-beca (Formulario Beca ELAR)
========================================================= */
.app-beca {
    max-width: 73.75rem;
    margin: 0 auto;
    padding: 0.5rem 0 6rem;
    color: #3d4f66;
}

.app-beca *,
.app-beca *::before,
.app-beca *::after{ box-sizing:border-box; }

/* ---------- Estado (éxito / convocatoria cerrada) ---------- */
.app-beca__state{
  max-width:34rem;
  margin:2.5rem auto 0;
  padding:3rem 2.75rem;
  background:#ffffff;
  border:1px solid #e3eaf1;
  border-radius:1.25rem;
  box-shadow:0 0.5rem 1.5rem rgba(7,28,54,0.06);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.app-beca__state-icon{
  width:3.5rem;
  height:3.5rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.25rem;
}

.app-beca__state-icon svg{
  width:1.75rem;
  height:1.75rem;
}

.app-beca__state--success .app-beca__state-icon{
  background:#e9f9ee;
  color:#16a34a;
}

.app-beca__state--closed .app-beca__state-icon{
  background:#eaf6ff;
  color:#0098ff;
}

.app-beca__state-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#0098ff;
  margin:0 0 0.75rem;
}

.app-beca__state-title{
  font-weight:600;
  font-size:1.6rem;
  line-height:1.25;
  color:#071c36;
  margin:0 0 0.875rem;
}

.app-beca__state-text{
  font-size:0.94rem;
  line-height:1.65;
  color:#748aa1;
  margin:0 0 1.75rem;
}

@media (max-width: 45rem){
  .app-beca__state{
    margin-top:1.5rem;
    padding:2.25rem 1.5rem;
  }
}

/* ---------- Encabezado simple (sin hero) ---------- */
.app-beca__intro{
  padding:0 3rem;
  margin-bottom:2.5rem;
  max-width:42.5rem;
}

.app-beca__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#0098ff;
  margin:0 0 0.875rem;
}

.app-beca__eyebrow::before{
  content:"";
  width:1.375rem;
  height:2px;
  background:#0098ff;
  display:inline-block;
}

.app-beca__title{
  font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.5rem);
  line-height:1.2;
  margin:0 0 0.875rem;
  color:#071c36;
}

.app-beca__subtitle{
  font-size:1rem;
  line-height:1.65;
  color:#748aa1;
  margin:0;
}

/* ---------- Layout: form ---------- */
.app-beca__body{
  padding:0 3rem;
}

/* ---------- Form shell ---------- */
.app-beca__form{
  background:#ffffff;
  border:1px solid #e3eaf1;
  border-radius:1.25rem;
  box-shadow:0 0.5rem 1.5rem rgba(7,28,54,0.06);
}

/* ---------- Section ---------- */
.app-beca__section{
  padding:2.25rem 2.75rem;
  border-bottom:1px solid #f2f6fa;
  scroll-margin-top:1.5rem;
}

.app-beca__section:last-of-type{
  border-bottom:none;
}

.app-beca__section-header{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.625rem;
}

.app-beca__section-number{
  flex:0 0 auto;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:#eaf6ff;
  color:#0098ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.86rem;
}

.app-beca__section-title{
  font-weight:700;
  font-size:1.4rem;
  color:#071c36;
  margin:0.125rem 0 0.375rem;
}

.app-beca__section-desc{
  font-size:0.88rem;
  color:#8ea3bd;
  margin:0;
  max-width:37.5rem;
  line-height:1.55;
}

/* ---------- Grid & fields ---------- */
.app-beca__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.375rem 1.625rem;
}

.app-beca__field{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.app-beca__field--full{
  grid-column:1 / -1;
}

.app-beca__label{
  font-size:0.85rem;
  font-weight:600;
  color:#0d2949;
}

.app-beca__required{
  color:#0098ff;
  margin-left:0.125rem;
}

.app-beca__hint{
  font-size:0.78rem;
  color:#a6b6c6;
  margin-top:-0.125rem;
}

.app-beca__input,
.app-beca__select,
.app-beca__textarea{
  font-family:'DM Sans', sans-serif;
  font-size:0.94rem;
  color:#071c36;
  background:#fafcfe;
  border:1.5px solid #e3eaf1;
  border-radius:0.5rem;
  padding:0.75rem 0.875rem;
  width:100%;
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.app-beca__input::placeholder,
.app-beca__textarea::placeholder{
  color:#a6b6c6;
}

.app-beca__input:focus,
.app-beca__select:focus,
.app-beca__textarea:focus{
  outline:none;
  border-color:#0098ff;
  box-shadow:0 0 0 4px rgba(0,152,255,0.15);
  background:#ffffff;
}

.app-beca__select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a6b6c6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.875rem center;
  padding-right:2.25rem;
  cursor:pointer;
}

.app-beca__textarea{
  resize:vertical;
  min-height:6.875rem;
  line-height:1.6;
}

/* ---------- Dropdown de checkboxes (details/summary, sin JS) ---------- */
.app-beca__dropdown{
  position:relative;
}

.app-beca__dropdown-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  background:#fafcfe;
  border:1.5px solid #e3eaf1;
  border-radius:0.5rem;
  padding:0.75rem 0.875rem;
  font-size:0.94rem;
  color:#748aa1;
  cursor:pointer;
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.app-beca__dropdown-summary::-webkit-details-marker{
  display:none;
}

.app-beca__dropdown-summary::after{
  content:"";
  flex:0 0 auto;
  width:0.5rem;
  height:0.5rem;
  border-right:1.6px solid #a6b6c6;
  border-bottom:1.6px solid #a6b6c6;
  transform:rotate(45deg);
  transition:transform 180ms ease;
}

.app-beca__dropdown[open] .app-beca__dropdown-summary{
  border-color:#0098ff;
  box-shadow:0 0 0 4px rgba(0,152,255,0.15);
  background:#ffffff;
}

.app-beca__dropdown[open] .app-beca__dropdown-summary::after{
  transform:rotate(-135deg);
}

.app-beca__dropdown-panel{
  position:absolute;
  top:calc(100% + 0.5rem);
  left:0;
  right:0;
  background:#ffffff;
  border:1.5px solid #e3eaf1;
  border-radius:0.625rem;
  padding:0.5rem;
  box-shadow:0 0.5rem 1.5rem rgba(7,28,54,0.10);
  max-height:14rem;
  overflow-y:auto;
  z-index:20;
}

.app-beca__dropdown-option{
  display:flex;
  align-items:center;
  gap:0.625rem;
  padding:0.625rem 0.75rem;
  border-radius:0.5rem;
  font-size:0.9rem;
  color:#3d4f66;
  cursor:pointer;
  transition:background 180ms ease;
}

.app-beca__dropdown-option:hover{
  background:#eaf6ff;
}

.app-beca__dropdown-checkbox{
  width:1rem;
  height:1rem;
  flex:0 0 auto;
  accent-color:#0098ff;
  cursor:pointer;
}

/* ---------- File uploads ---------- */
.app-beca__files{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.app-beca__file{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  padding:1.125rem 1.25rem;
  border:1.5px dashed #e3eaf1;
  border-radius:0.875rem;
  background:#fafcfe;
  transition:border-color 180ms ease, background 180ms ease;
}

.app-beca__file:focus-within{
  border-color:#0098ff;
  background:#eaf6ff;
}

.app-beca__file-label{
  font-size:0.87rem;
  font-weight:600;
  color:#0d2949;
}

.app-beca__file-hint{
  font-size:0.78rem;
  color:#a6b6c6;
  margin:-0.125rem 0 0.125rem;
}

.app-beca__file-input{
  font-family:'DM Sans', sans-serif;
  font-size:0.86rem;
  color:#8ea3bd;
  width:100%;
}

.app-beca__file-input::file-selector-button{
  font-family:'Barlow', 'DM Sans', sans-serif;
  font-weight:500;
  font-size:0.82rem;
  color:#ffffff;
  background:linear-gradient(90deg, #0163ea 0%, #00bcf9 50%, #0163ea);
  background-size:200%, 1px;
  border:none;
  border-radius:5px;
  padding:0.625rem 1.125rem;
  margin-right:0.875rem;
  cursor:pointer;
  transition:background-position 200ms linear 0ms;
}

.app-beca__file-input::file-selector-button:hover{
  background-position:120%;
}

/* ---------- Toggle (si / no) ---------- */
.app-beca__toggle-group{
  display:flex;
  gap:0.75rem;
}

.app-beca__toggle{
  position:relative;
}

.app-beca__toggle-input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}

.app-beca__toggle-label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.75rem 1.625rem;
  border-radius:0.5rem;
  border:1.5px solid #e3eaf1;
  background:#fafcfe;
  font-weight:600;
  font-size:0.9rem;
  color:#3d4f66;
  cursor:pointer;
  transition:all 180ms ease;
}

.app-beca__toggle-input:checked + .app-beca__toggle-label{
  background:#0098ff;
  border-color:#0098ff;
  color:#ffffff;
}

.app-beca__toggle-input:focus-visible + .app-beca__toggle-label{
  box-shadow:0 0 0 4px rgba(0,152,255,0.15);
}

/* ---------- Footer / acciones ---------- */
.app-beca__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0rem 2.75rem 2.25rem;
    flex-wrap: wrap;
}

.app-beca__consent{
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  font-size:0.82rem;
  color:#8ea3bd;
  max-width:27.5rem;
}

.app-beca__consent-input{
  margin-top:0.1875rem;
  accent-color:#0098ff;
  width:1rem;
  height:1rem;
  flex:0 0 auto;
}

.app-beca__actions{
  display:flex;
  gap:0.875rem;
}

.app-beca .text-danger{
  font-size:0.8rem;
}

/* ---------- in-btn-2 sobre <button> (la clase del sitio solo contempla <a>) ---------- */
.app-beca .in-btn-2 button{
  z-index:1;
  color:#fff;
  height:60px;
  width:200px;
  display:block;
  font-weight:500;
  line-height:60px;
  text-align:center;
  position:relative;
  background:transparent;
  border:none;
  font-family:'Barlow', sans-serif;
  font-size:1rem;
  cursor:pointer;
  padding:0;
}

.app-beca .in-btn-2 button:before,
.app-beca .in-btn-2 button:after{
  top:2px;
  left:2px;
  right:0;
  z-index:-2;
  width:196px;
  content:"";
  height:56px;
  border-radius:5px;
  position:absolute;
  background-color:#fff;
  transition:all 200ms linear 0ms;
}

.app-beca .in-btn-2 button:after{
  top:7px;
  left:7px;
  width:186px;
  height:46px;
  border-radius:5px;
  background:linear-gradient(90deg, #0163ea 0%, #00bcf9 50%, #0163ea);
  background-size:200%, 1px;
}

.app-beca .in-btn-2:hover button:before,
.app-beca .in-btn-2:hover button:after{
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.app-beca .in-btn-2:hover button:after{
  background-position:120%;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 61.25rem){
  .app-beca__body{
    padding:0 1.5rem;
  }

  .app-beca__intro{ padding:0 1.5rem; }
}

@media (max-width: 45rem){
  .app-beca__grid{ grid-template-columns:1fr; }
  .app-beca__section{ padding:1.75rem 1.375rem; }
  .app-beca__footer{ padding:1.625rem 1.375rem 2rem; flex-direction:column; align-items:stretch; }
  .app-beca__actions{ justify-content:stretch; }
  .app-beca__actions .in-btn-2,
  .app-beca__actions .in-btn-2 button{ width:100%; }
  .app-beca__title{ font-size:1.6rem; }
}

@media (prefers-reduced-motion: reduce){
  .app-beca *{ transition:none !important; }
}