/* =====================================================
   FORMULARIO PQRDS - CORPAMAG (pqr/PQR_Form.php)

   Diseño estándar de las páginas de CORPAMAG: encabezado azul centrado,
   introducción con borde verde, bloques blancos con borde verde y
   botones azules.
   Azul #00425E · Verde #84BB2F · Fondo claro #F5F9FC · Borde #D8E3EB

   Se carga DESPUÉS de templatePQR.css: este archivo manda en el aspecto;
   templatePQR.css sigue aportando el asterisco de los campos obligatorios
   (.oblig) y los colores del mensaje de estado (#userStatus.status-*).
   ===================================================== */

*{box-sizing:border-box}
body{margin:0;padding:10px 15px 45px;background:#FFFFFF;font-family:Arial,Helvetica,sans-serif;color:#111111;font-size:15px;line-height:1.6}

/* templatePQR.css limitaba la altura y ponía scroll interno: se quita */
.formulario{width:100%;max-width:1200px;max-height:none;overflow:visible;margin:0 auto;padding:0;
background:transparent;border:0;border-radius:0;box-shadow:none}

.formulario a{color:#00425E;font-weight:bold}
.formulario a:visited{color:#00425E}
.formulario a:hover{color:#84BB2F}


/* ---------- Encabezado ---------- */
.pqr-encabezado{background:#00425E;border-radius:28px;padding:42px 30px;margin-bottom:28px;
box-shadow:0 8px 25px rgba(0,66,94,.15);text-align:center}
.pqr-encabezado h1{margin:0;color:#FFFFFF;font-family:inherit;font-size:36px;line-height:1.2;font-weight:400}
.pqr-encabezado h1 strong{font-weight:bold}
.pqr-encabezado p{margin:18px auto 0;max-width:900px;color:#FFFFFF;font-size:17px;line-height:1.7}


/* ---------- Introducción ---------- */
.pqr-intro{background:#F5F9FC;border:1px solid #D8E3EB;border-left:5px solid #84BB2F;border-radius:16px;
padding:20px 24px;margin-bottom:22px;box-shadow:0 4px 14px rgba(0,66,94,.06)}
.pqr-intro p{margin:0;font-size:16px;line-height:1.75}
.pqr-intro strong{color:#00425E}
.required-asterisk{color:#D50000;font-weight:bold}


/* ---------- Tarjetas de ayuda e identificación reservada ---------- */
.pqr-accesos{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.pqr-tarjeta{flex:1 1 340px;display:flex;gap:14px;background:#FFFFFF;border:1px solid #D8E3EB;border-left:5px solid #84BB2F;
border-radius:12px;padding:16px 18px}
.pqr-tarjeta-icono{flex:0 0 40px;height:40px;line-height:40px;text-align:center;background:#00425E;color:#FFFFFF;
border-radius:9px;font-size:19px;font-weight:bold}
.pqr-tarjeta-titulo{color:#00425E;font-size:16px;font-weight:bold;line-height:1.4}
.pqr-tarjeta-texto{margin:4px 0 10px;color:#333F48;font-size:14px;line-height:1.55}
.pqr-botones{display:flex;flex-wrap:wrap;gap:8px}


/* ---------- Botones (azul, texto blanco) ---------- */
.formulario a.pqr-btn,
.pqr-btn{display:inline-block;background:#00425E;color:#FFFFFF;text-decoration:none;padding:9px 16px;border:1px solid #00425E;
border-radius:8px;font-weight:bold;font-size:14px;line-height:1.4;transition:background .2s}
.formulario a.pqr-btn:hover{background:#84BB2F;border-color:#84BB2F;color:#FFFFFF;text-decoration:none}
.formulario a.pqr-btn-borde{background:#FFFFFF;color:#00425E}
.formulario a.pqr-btn-borde:hover{background:#F5F9FC;border-color:#00425E;color:#00425E}


/* ---------- Bloques del formulario ---------- */
fieldset{border:1px solid #D8E3EB;border-left:5px solid #84BB2F;border-radius:16px;padding:20px 24px;margin:0 0 18px;
background:#FFFFFF;box-shadow:0 4px 12px rgba(0,66,94,.06);min-width:0}
fieldset h3{margin:0 0 16px;padding:0 0 0 12px;border-left:4px solid #84BB2F;color:#00425E;font-family:inherit;
font-size:19px;font-weight:bold;line-height:1.35}
fieldset p{margin:0 0 14px;color:#333F48;font-size:15px}

.form-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.form-row:last-child{margin-bottom:0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-group{display:flex;flex-direction:column;margin-bottom:14px}
.form-grid .form-group{margin-bottom:0}
.form-group.full-width{grid-column:1/-1}

.form-group label,
.form-row > label,
.captcha-input-area label{color:#00425E;font-weight:bold;font-size:14px;margin-bottom:6px}
.form-row > label{margin-bottom:0}


/* ---------- Campos ---------- */
input[type="text"],input[type="number"],input[type="email"],input[type="file"],select,textarea{
width:100%;min-height:44px;padding:10px 12px;border:1px solid #D8E3EB;border-radius:8px;background:#FFFFFF;
color:#111111;font-family:inherit;font-size:15px}
textarea{min-height:140px;resize:vertical}
input[type="file"]{padding:8px;background:#F5F9FC}
input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="file"]:focus,select:focus,textarea:focus{
outline:none;border-color:#00425E;box-shadow:0 0 0 3px rgba(0,66,94,.12)}
.form-row select{flex:1 1 280px;width:auto}

input[type="radio"],input[type="checkbox"]{accent-color:#00425E;width:17px;height:17px;margin:0}
.form-row input[type="radio"]{margin-left:8px}

/* Mensaje de estado del usuario (los colores vienen de templatePQR.css) */
#userStatus{margin:0 0 14px;border-radius:8px}


/* ---------- Casillas (autorización y política) ---------- */
.form-group-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.form-group-inline label{margin:0;font-weight:normal;color:#111111}
.pqr-politica{background:#F5F9FC;border:1px solid #D8E3EB;border-left:5px solid #84BB2F;border-radius:12px;padding:14px 18px;margin-bottom:18px}


/* ---------- CAPTCHA ---------- */
.captcha-container{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:16px;background:#F5F9FC;border:1px solid #D8E3EB;border-radius:12px}
.captcha-image{padding:8px;background:#FFFFFF;border:1px solid #D8E3EB;border-radius:8px}
.captcha-image img{display:block;max-width:220px;height:auto}
.captcha-input-area{flex:1 1 220px}
.captcha-input-area input{max-width:240px}


/* ---------- Pie con los botones Enviar y Cancelar ---------- */
.form-footer{padding:22px;background:#F5F9FC;border:1px solid #D8E3EB;border-radius:16px;text-align:center}
.form-footer p{max-width:900px;margin:0 auto 18px;color:#333F48;font-size:14px}
.form-footer input[type="submit"],
.form-footer input[type="reset"]{min-width:150px;padding:12px 24px;margin:5px;border:1px solid #00425E;border-radius:8px;
font-family:inherit;font-size:15px;font-weight:bold;cursor:pointer;transition:background .2s}
.form-footer input[type="submit"]{background:#00425E;color:#FFFFFF}
.form-footer input[type="submit"]:hover{background:#84BB2F;border-color:#84BB2F}
.form-footer input[type="reset"]{background:#FFFFFF;color:#00425E}
.form-footer input[type="reset"]:hover{background:#EDF4F9}


/* ---------- Celular ---------- */
@media(max-width:700px){
  .pqr-encabezado{padding:30px 20px;border-radius:22px}
  .pqr-encabezado h1{font-size:28px}
  .pqr-encabezado p{font-size:15px}
  .pqr-intro{padding:16px 18px}
  fieldset{padding:16px}
  .form-grid{grid-template-columns:1fr}
  .form-row{flex-direction:column;align-items:flex-start}
  .form-row select{width:100%}
  .form-row input[type="radio"]{margin-left:0}
  .captcha-input-area input{max-width:100%}
  .form-footer input[type="submit"],
  .form-footer input[type="reset"]{width:100%;margin:5px 0}
}