.paquete{
  flex-direction:column;
}
/* --- Envase general --- */
.notice-container{
  display:flex;
  align-items:flex-start;          /* interruptor arriba a la izquierda */
  gap:1rem;
  padding:1.25rem 1.5rem;
  background:var(--blanco);              /* gris muy claro */
  border-bottom:1px solid #9ea3a8; /* línea fina como en la imagen */
  font-family:"Segoe UI",Arial,sans-serif;
}

/* --- Texto --- */
.parrafo a{
  color:#0047ff;                   /* enlace azul brillante */
  text-decoration:underline;
}

/* --- Toggle --- */
.toggle-wrapper{
  position:relative;
  display:inline-block;
  width:46px;                      /* proporción similar a la captura */
  height:26px;
  flex:0 0 46px;                  /* evita estirarse */
  cursor:pointer;
}
.toggle-wrapper input{
  opacity:0;                       /* ocultamos el checkbox nativo */
  width:0;
  height:0;
}
.toggle-slider{
  position:absolute;
  inset:0;
  background:var(--green-dark);
  border-radius:26px;
  transition:background .25s;
}
.toggle-slider::before{
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:18px;
  height:18px;
  background:var(--text-light);              
  border-radius:50%;
  transition:transform .25s;
}

/* Estado activado */
.toggle-wrapper input:checked + .toggle-slider{
  background:var(--text-dark);              
}
.toggle-wrapper input:checked + .toggle-slider::before{
  transform:translateX(20px);      /* mueve el círculo a la derecha */
}
.collapsible{
  background: var(--blanco);
  /* Oculto visual y físicamente */
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  /* Transición suave */
  transition: max-height 1.5s ease, padding 1.0s ease;
}
/* Al agregar la clase open se despliega */
.collapsible.open{
  /* un valor grande que nunca superará tu contenido;
     100vh suele bastar, adapta si tu sección es más alta */
  max-height: 1000vh;
  padding: 1rem 1.25rem;
}



/* Paleta y variables rápidas --------------------------------------- */
:root{
  --blue-700:#1d58b9;       /* cuadro de paso */
  --border:#dfe3eb;         /* contorno inputs */
  --help:#6d737c;           /* texto auxiliar gris */
}


/* Contenedor general ----------------------------------------------- */
.pqrs-form{
  max-width:1000px;
  margin-inline:auto;
}

/* Paso (número + texto) -------------------------------------------- */
.step{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.25rem;
}
.step-number{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-700);
  color:#fff;font-weight:700;font-size:1.25rem;
  border-radius:4px;
}
.step-title{
  font-size:1rem;font-weight:700;line-height:1.4;
}

/* Grid de campos (2 col) ------------------------------------------- */
.row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem 1.5rem;              /* filas / columnas */
  margin-bottom:2rem;
}
.field{display:flex;flex-direction:column}

/* Etiquetas, asterisco y ayuda ------------------------------------- */
label{font-weight:700;margin-bottom:0.25rem}
.required{color:red}
.help-text{
  font-size:.75rem;color:var(--help);margin:-.25rem 0 .5rem;
}

/* Inputs y selects -------------------------------------------------- */
input,select{
  padding:.75rem 1rem;
  font-size:1rem;
  border:1px solid var(--border);
  border-radius:2rem;          /* forma “pill” */
  background:#fcfcfc;
  outline:none;transition:border-color .2s;
}
input:focus,select:focus{border-color:var(--blue-700)}

/* Flecha personalizada para <select> ------------------------------- */
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236d737c' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6 6 6-6' stroke='%236d737c' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px;
}

/* Responsive: una columna bajo 620 px ------------------------------ */
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .step-number{width:40px;height:40px;font-size:1rem}
}

/* ─────────── Paso 3: reglas adicionales ─────────── */

/* <textarea> grande y con mismo look de los inputs */
textarea{
  padding:1rem;
  font-size:1rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:#fcfcfc;
  resize:vertical;            /* deja al usuario alargarlo */
  min-height:180px;           /* similar a la captura */
}

/* Checkbox “¿Deseas incluir archivos adjuntos?” alineado a la derecha */
.inline-checkbox{
  display:flex;
  align-items:center;
  gap:.5rem;                  /* espacio entre cuadrado y texto */
  justify-content:flex-end;   /* lo manda al borde derecho de la grid */
  font-weight:700;
  color:var(--text-dark);
}

/* Input de archivos estilo “pill” azul oscuro */
input[type="file"].file-upload{
  width:100%;
  padding:.75rem 1rem;
  color:#fff;
  background:#0b0d25;         /* azul marino */
  border:none;
  border-radius:2rem;
  font-size:1rem;
  cursor:pointer;
}

/* Oculta el botón nativo y muestra texto dentro (solo WebKit) */
input[type="file"].file-upload::-webkit-file-upload-button{
  visibility:hidden;
}
input[type="file"].file-upload::before{
  content:"Seleccionar archivos";
  display:inline-block;
  color:#fff;
}

/* Botón “Enviar solicitud” */
.btn-submit{
  display:inline-block;
  padding:.9rem 2.5rem;
  background:var(--blue-700);
  color:#fff;
  border:none;
  border-radius:2rem;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}
.btn-submit:hover{background:#16479a;}  /* oscurece al pasar el mouse */