@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body{
  font-family:'Poppins',sans-serif;
  background:#f5f5f5;
  margin:0;
  padding:0;
}

/* ================= HEADER ================= */
/* Escritorio: 3 columnas con el título centrado visualmente */
header{
  background:#ffffff;
  color:#1f2937;
  padding:26px 22px;
  display:grid;
  /* 1fr | auto | 1fr centra el medio al darle el mismo “peso” a los lados */
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  border-bottom:4px solid #7b1f2e;
}
header .logo-sep{ justify-self:start; }
header .logo-dgeti{ justify-self:end; }

header img{
  max-height:80px;            /* logos un poco más grandes en desktop */
  width:auto;
}

header .header-title-container{
  justify-self:center;        /* centra el bloque del título en la columna central */
  text-align:center;
  margin:0;
}

header h1{
  font-size:clamp(1.8rem, 2.6vw, 3.8rem);
  margin:0;
  line-height:1.15;
  color:#7b1f2e;
  font-weight:700;
}
header p{
  font-size:clamp(1rem, 1.5vw, 1.5rem);
  margin:8px 0 0;
  color:#6b7280;
  font-weight:600;
}

/* Tablet */
@media (max-width: 1024px){
  header img{ max-height:80px; }
  header{ gap:18px; padding:20px; }
}

/* Móvil: apilar SEP → título → DGETI */
@media (max-width: 640px){
  header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:16px 12px;
  }
  header img{ max-height:52px; }
  header .header-title-container{ margin:4px 0; }
  header h1{ font-size:1.6rem; }
  header p{ font-size:1rem; }
}

/* Móvil muy pequeño */
@media (max-width:380px){
  header img{ max-height:46px; }
  header h1{ font-size:1.4rem; }
  header p{ font-size:.95rem; }
}

/* FORM CONTAINER */
.form-container{
  background:#fff;
  max-width:900px;
  margin:30px auto;
  padding:40px;
  border-radius:15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

/* Instrucciones */
.instrucciones-container{
  background-color:#f8f9fa;
  border-left:5px solid #7b1f2e;
  padding:20px;
  margin-bottom:40px;
  border-radius:8px;
}
.instrucciones-container h2{
  margin-top:0;
  color:#7b1f2e;
  border-left:none;
  padding-left:0;
}
.instrucciones-container p,
.instrucciones-container li{
  color:#343a40;
  line-height:1.6;
}
.instrucciones-container ul{ padding-left:20px; }

.guia-link{
  display:inline-block;
  margin-top:15px;
  padding:10px 20px;
  background-color:#7b1f2e;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  border-radius:8px;
  transition:background-color .3s;
}
.guia-link:hover{ background-color:#9c2c3f; }

h2{
  color:#7b1f2e;
  margin-top:30px;
  border-left:6px solid #7b1f2e;
  padding-left:10px;
}

/* Campos */
.form-group{ margin-bottom:20px; }

label{
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

input,select{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:1em;
  box-sizing:border-box;
}

input[type="radio"]{ width:auto; }
.radio-group label{ font-weight:normal; margin-right:15px; }

input:focus,select:focus{
  border-color:#7b1f2e;
  outline:none;
  box-shadow:0 0 6px rgba(123,31,46,.4);
}

/* Botón enviar */
button[type="submit"]{
  width:100%;
  padding:15px;
  background:#7b1f2e;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:1.2em;
  font-weight:bold;
  cursor:pointer;
  margin-top:20px;
}
button[type="submit"]:hover{ background:#9c2c3f; }

/* Mensajes & ayudas */
.error{ color:red; font-size:.9em; }
.nota{ color:#666; font-size:.8em; }

/* CURP + botón */
.curp-input-group{ display:flex; align-items:center; }
.curp-input-group input{ flex-grow:1; }
.curp-button{
  margin-left:10px;
  padding:12px 20px;
  background:#5a5a5a;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.9em;
  cursor:pointer;
  flex-shrink:0;
}
.curp-button:hover{ background:#333; }

/* Campos condicionales */
.campo-condicional{ display:none; margin-top:10px; }

/* Mensaje de estado (fallback 10s) */
.status-hint{
  display:none;
  text-align:center;
  margin-top:12px;
  padding:10px 12px;
  background:#fff8db;
  border:1px solid #ffe58f;
  color:#333;
  border-radius:8px;
  font-size:1rem;
}