/* =========================================================
   ESTILO CUSTOM — UNIMAYOR / Google Forms Style
   ========================================================= */

/* =========== Variables básicas ============ */
:root {
  --azul-institucional: #004884;
  --gris-suave: #e0e0e0;
  --texto-principal: #202124;
  --texto-secundario: #444;
  --borde-claro: #eee;
  --fondo-footer: #fafafa;
  --resalte: #1a73e8;
}

/* Espaciado entre preguntas */
.question-container {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde-claro);
}

/* Etiquetas */
label.ls-label-question,
.question-title {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  display: block;
  color: var(--texto-principal);
}

/* Radios y checkboxes */
.form-check {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.form-check input[type="radio"],
.form-check input[type="checkbox"] {
  margin-right: 0.6rem;
  transform: scale(1.2);
}

/* Barra de progreso */
.progress-bar {
  background-color: var(--azul-institucional) !important;
  transition: width 0.4s ease;
}

/* Footer institucional más limpio */
footer {
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
  border-top: 1px solid #ddd;
  background: var(--fondo-footer);
}

/* Responsive */
@media (max-width: 768px) {
  .outerframe-container,
  .outer-frame,
  #outerframeContainer {
    padding: 1.5rem;
    margin: 1rem;
  }
}

/* =================== Título encuesta ==================== */
h1#survey-name,
h1.survey-name,
.survey-name,
.large-heading {
  font-size: 1.5rem !important;
  font-weight: 600;
  color: var(--azul-institucional);
  text-align: center;
  margin-bottom: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

/* Descripción de la encuesta */
#survey-description,
.survey-description {
  font-size: 1rem;
  color: var(--texto-secundario);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* =================== Grupo de preguntas ==================== */
.group-title,
div.group-title,
h2.group-title,
.group-name {
  font-size: 1.15rem !important;
  font-weight: 500;
  color: var(--azul-institucional);
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gris-suave);
  line-height: 1.3;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Ícono decorativo */
.group-title::before {
  content: "▰";
  font-size: 0.9rem;
  color: var(--azul-institucional);
}

/* Descripción de grupo */
.group-description {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Elimina saltos de línea innecesarios */
.group-title br {
  display: none;
}

/* =================== Checkbox institucional ==================== */
label.datasecurity-checkbox-label {
  color: var(--azul-institucional) !important;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

/* Personalización del checkbox */
input[type="checkbox"]#datasecurity_accepted {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--azul-institucional);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #fff;
}

/* Estado marcado */
input[type="checkbox"]#datasecurity_accepted:checked {
  background-color: var(--azul-institucional);
  border-color: var(--azul-institucional);
}

/* Check visible */
input[type="checkbox"]#datasecurity_accepted:checked::after {
  content: '✔';
  position: absolute;
  color: white;
  font-size: 14px;
  left: 4px;
  top: 0;
  font-weight: bold;
}

/* =================== Botones ==================== */
.btn-primary,
.btn-default,
.btn,
.ls-button {
  background-color: var(--azul-institucional);
  border-color: var(--azul-institucional);
  color: #fff;
  padding: 0.6rem 1.3rem;
  font-size: 0.95rem;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn:hover,
.btn:focus,
.btn:active {
  background-color: #003766;
  border-color: #00335c;
  color: #fff;
}

/* =================== Campos de entrada ==================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--azul-institucional);
  box-shadow: 0 0 0 2px rgba(0, 72, 132, 0.2);
  outline: none;
}

/* Pantalla de encuesta expirada */
.expired-container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:1100px; margin:60px auto; padding:40px; background:#fff;
  border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.expired-text h1{ color:#004884; font-weight:700; font-size:2rem; margin-bottom:1rem; }
.expired-text p{ font-size:1.05rem; color:#202124; line-height:1.6; }
@media (max-width: 768px){
  .expired-container{ padding:28px; margin:30px auto; }
}

.expired-message{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  background:#fff;
  max-width:900px;
  margin:80px auto;
  padding:40px;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.expired-message h1{
  color:#004884;
  font-weight:700;
}
.expired-message p{
  color:#202124;
  line-height:1.6;
}
@media(max-width:768px){
  .expired-message{padding:28px;}
}

/* ===============================
   ENCUESTA EXPIRADA — GOV.CO STYLE
   =============================== */
.survey-closed{
  background-color:#f4f7fb;
  min-height:calc(100vh - 120px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.survey-closed-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  max-width:1100px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding:40px;
}
.survey-closed-text{
  flex:1 1 520px;
  padding-right:24px;
}
.survey-closed-text h1{
  color:#004884;
  font-weight:700;
  font-size:2rem;
  margin:0 0 12px;
}
.survey-closed-text p{
  color:#202124;
  font-size:1.05rem;
  line-height:1.6;
}
.survey-closed-contact{
  margin-top:1.2rem;
  padding:12px 16px;
  background:#eeeff7;
  border-left:5px solid #004884;
  border-radius:6px;
}
.survey-closed-contact a{
  color:#004884;
  text-decoration:none;
  font-weight:500;
}
.survey-closed-img{
  flex:1 1 360px;
  text-align:center;
}
.survey-closed-img img{
  max-width:340px;
  height:auto;
}
@media (max-width:768px){
  .survey-closed-card{
    flex-direction:column;
    text-align:center;
    padding:30px 24px;
  }
  .survey-closed-text{
    padding:0;
  }
  .survey-closed-img img{
    margin-top:24px;
    max-width:260px;
  }
}