/* detalle.css — secciones y formulario para oferta.php */

.portal-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Secciones de contenido (descripción, requisitos, beneficios) */
.portal-section {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--blue);
  border-radius: 10px;
  padding: 1.45rem 1.55rem;
}

.portal-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.portal-section-title svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; flex-shrink: 0; }

/* Mismo interlineado que el editor de la oferta (`assets/js/nueva_oferta.js`): quien escribe
   tiene que ver aqui lo que ya vio alli. Y los parrafos llevan margen declarado, porque el que
   trae el navegador por defecto —1em arriba y abajo— separaba mas que el propio alto de linea. */
.portal-section-body { font-size: .97rem; color: #334155; line-height: 1.6; }
.portal-section-body p { margin: 0 0 .6em; }
.portal-section-body ul,
.portal-section-body ol { margin: .3em 0 .7em; padding-left: 1.2em; }
.portal-section-body li { margin: 0 0 .25em; }
.portal-section-body > :first-child { margin-top: 0; }
.portal-section-body > :last-child { margin-bottom: 0; }
.portal-section-body h3 { color: var(--text); font-size: 1.08rem; margin: 1.1rem 0 .55rem; }
.portal-section-body ul { padding-left: 1.1rem; margin: .4rem 0; }
.portal-section-body li { margin-bottom: .4rem; }
.portal-section-body strong { color: #334155; }

/* Aviso de oferta expirada */
.portal-expired {
  background: var(--orange-lt);
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: .85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.portal-expired svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; flex-shrink: 0; margin-top: .1rem; }
.portal-expired strong { font-size: .72rem; color: var(--orange); display: block; margin-bottom: .15rem; }
.portal-expired p { font-size: .9rem; color: var(--orange); margin: 0; }

/* Formulario de postulación */
.portal-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--yellow);
  border-radius: 10px;
  padding: 1.45rem 1.55rem;
}

.application-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1rem;
}

.form-group { margin-bottom: .8rem; }
.application-form-grid .form-group { margin-bottom: 0; }
.form-group-full { grid-column: 1 / -1; }

.form-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: .3rem;
}
.form-label .req { color: var(--red); }

.form-input {
  width: 100%;
  padding: .62rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .95rem;
  color: var(--text);
  background: #f8fafc;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,36,125,.08);
  background: #fff;
}
select.form-input { min-height: 44px; }
textarea.form-input { min-height: 100px; resize: vertical; }
.form-group-full textarea.form-input { min-height: 150px; }

.file-zone {
  border: 1.5px dashed #cbd5e1;
  border-radius: 6px;
  min-height: 140px;
  padding: 1.25rem 1rem;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color .15s, background .15s;
}
.file-zone:hover { border-color: var(--blue); background: rgba(0,36,125,.03); }
.file-zone svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; display: block; margin: 0 auto .4rem; }
.file-zone p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.file-zone p strong { color: var(--text); display: block; margin-bottom: .1rem; }

.doc-type-indicator { margin-top: .35rem; min-height: 1.25rem; }

.consent-row { display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .55rem; }
.consent-check { width: 13px; height: 13px; flex-shrink: 0; margin-top: .15rem; accent-color: var(--blue); }
.consent-text { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.consent-text strong { color: #334155; }
.consent-text a { color: var(--blue); text-decoration: none; font-weight: 500; }
.consent-text a:hover { text-decoration: underline; }

/* El widget de Google trae su propio ancho fijo de 304px. En movil no cabe, y en vez de
   encogerlo —que lo rompe— se deja desbordar en horizontal solo esta fila. */
.recaptcha-row { margin: .9rem 0 1rem; max-width: 100%; overflow-x: auto; }
.recaptcha-missing {
  margin: 0;
  padding: .65rem .8rem;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: var(--red-lt);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.5;
}

.btn-submit {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding: .75rem;
  background: var(--yellow);
  color: var(--text);
  border: none;
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .9rem;
  margin-left: auto;
  transition: opacity .15s;
}
.btn-submit:hover { opacity: .9; }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; }
.btn-submit svg { width: 14px; height: 14px; stroke: var(--text); fill: none; }

/* Alertas de respuesta del formulario */
.portal-alert {
  border-radius: 7px;
  padding: .75rem 1rem;
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: .85rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.portal-alert svg { width: 15px; height: 15px; fill: none; flex-shrink: 0; margin-top: .1rem; }
.portal-alert--success {
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.2);
  color: var(--green);
}
.portal-alert--success svg { stroke: var(--green); }
.portal-alert--error {
  background: rgba(200,16,46,.06);
  border: 1px solid rgba(200,16,46,.15);
  color: var(--red);
}
.portal-alert--error svg { stroke: var(--red); }

@media (max-width: 639px) {
  .portal-content { padding: 1rem; gap: .75rem; }
  .portal-section,
  .portal-form-card { padding: 1rem 1.05rem; }
  .application-form-grid { grid-template-columns: 1fr; }
  .form-group-full { grid-column: auto; }
}

/* Layout de 2 columnas + sidebar sticky */
.portal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 1024px) {
  .portal-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
}

.portal-main {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

.portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .portal-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

.sidebar-offer-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  padding: 1.25rem 1.35rem;
}

.sidebar-offer-company {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}

.sidebar-offer-co-name {
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
}

.sidebar-offer-co-meta {
  margin-top: .1rem;
  color: var(--muted);
  font-size: .78rem;
}

.sidebar-offer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
}

.sidebar-offer-chip {
  padding: .28rem .65rem;
  border: 1px solid rgba(0, 36, 125, .12);
  border-radius: 9999px;
  background: rgba(0, 36, 125, .06);
  color: var(--blue);
  font-size: .75rem;
  font-weight: 600;
}

.sidebar-offer-cta {
  width: 100%;
  min-height: 44px;
  padding: .65rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: .625rem;
  background: var(--yellow);
  color: var(--text);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.sidebar-offer-cta:hover {
  background: #e6b800;
  transform: translateY(-1px);
}

@media (max-width: 639px) {
  .portal-sidebar { position: static; }
}