:root{
      --font-main:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      --dark:#0e0a7d;
      --orange:#f4633a;
      --lightblue:#697eb7;
      --blue:#1651e7;
      --accent:#1ea9fc;
      --white:#ffffff;
      --border: rgba(14,10,125,.14);
      --shadow: 0 14px 34px rgba(0,0,0,.10);
    }

    html, body{ height:100%; }
    body{
      margin:0;
      font-family: var(--font-main);
      color:#111827;

      /* Fondo uniforme, sin repetición */
      background:
        radial-gradient(900px 420px at 15% 10%, rgba(30,169,252,.14), transparent 60%),
        radial-gradient(900px 420px at 85% 20%, rgba(244,99,58,.10), transparent 55%),
        #f6f8ff;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }

    button, input, select, textarea{ font-family: var(--font-main); }


    /* Quitar outline negro feo */
    button:focus, button:active, .btn:focus, .btn:active,
    input:focus, textarea:focus, select:focus, a:focus, a:active{
      outline:none !important;
      box-shadow:none !important;
    }

    .wrap{
      max-width: 980px;
      margin: 0 auto;
      padding: 22px 14px 40px;
    }

    .header{
      background: linear-gradient(135deg, var(--dark), #0a075f);
      border-radius: 16px;
      box-shadow: var(--shadow);
      color: var(--white);
      padding: 18px 18px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 260px;
    }

    .brand img{
      width:44px; height:44px;
      border-radius: 12px;
      background: rgba(255,255,255,.12);
      padding: 6px;
      border: 1px solid rgba(255,255,255,.16);
      object-fit: contain;
    }

    .brand h1{
      margin:0;
      font-size: 18px;
      font-weight: 900;
      letter-spacing:.2px;
    }

    .brand p{
      margin:2px 0 0 0;
      font-size: 12.5px;
      opacity:.9;
      line-height: 1.2;
    }

    .steps{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      font-size: 12px;
      color: rgba(255,255,255,.92);
      justify-content:flex-end;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      white-space: nowrap;
    }
    .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(30,169,252,.14); }

    .card{
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card-h{
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap: wrap;
    }
    .card-h .t{
      font-weight: 900;
      color: var(--dark);
    }
    .card-b{
      padding: 16px;
    }

    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media(max-width: 760px){
      .grid{ grid-template-columns: 1fr; }
      .steps{ justify-content:flex-start; }
      .card-b{ padding: 14px; }
    }

    label{
      display:block;
      font-size: 12px;
      font-weight: 800;
      color: rgba(14,10,125,.92);
      margin-bottom: 6px;
    }

    input[type="text"], input[type="email"], input[type="number"], select, textarea{
      width:100%;
      border-radius: 12px;
      border: 1px solid rgba(14,10,125,.16);
      padding: 10px 12px;
      font-size: 14px;
      background: #fbfcff;
    }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(30,169,252,.70);
      box-shadow: 0 0 0 3px rgba(30,169,252,.16) !important;
      background: #fff;
    }

    textarea{ min-height: 120px; resize:none; overflow-y:auto; }

    .btnrow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      margin-top: 12px;
      flex-wrap:wrap;
    }
    @media(max-width:760px){
      .btnrow{ justify-content:stretch; }
      .btnrow .btn{ flex: 1 1 auto; }
    }

    .btn{
      border:none;
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 900;
      cursor:pointer;
      transition: transform .06s ease, box-shadow .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

    .btn-primary{ background: linear-gradient(90deg, var(--orange), #ff7a55); color: var(--white); box-shadow: 0 12px 26px rgba(244,99,58,.22); }
    .btn-sec{ background: rgba(14,10,125,.08); color: var(--dark); border: 1px solid rgba(14,10,125,.14); }
    .btn-blue{ background: linear-gradient(90deg, var(--blue), #2d6bff); color: var(--white); box-shadow: 0 12px 26px rgba(22,81,231,.18); }

    .muted{ color: rgba(14,10,125,.70); font-size: 12.5px; margin-top: 6px; line-height: 1.3; }
    .hidden{ display:none !important; }

    .spin{
      width:16px;height:16px;border-radius:50%;
      border: 2px solid rgba(255,255,255,.45);
      border-top-color: rgba(255,255,255,.95);
      display:inline-block;
      vertical-align:-2px;
      margin-right:8px;
      animation: spin .8s linear infinite;
    }
    @keyframes spin{ to{ transform: rotate(360deg); } }

    /* Card datos personales sin inputs */
    .kv{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media(max-width:760px){
      .kv{ grid-template-columns: 1fr; }
    }
    .kv-item{
      border: 1px dashed rgba(14,10,125,.18);
      background: rgba(105,126,183,.08);
      border-radius: 12px;
      padding: 10px 12px;
    }
    .kv-k{
      font-size: 11.5px;
      font-weight: 900;
      color: rgba(14,10,125,.85);
      margin-bottom: 2px;
    }
    .kv-v{
      font-size: 14px;
      font-weight: 800;
      color: rgba(17,24,39,.92);
      word-break: break-word;
    }

    .status-msg{
      margin-top: 8px;
      font-size: 12.5px;
      font-weight: 800;
    }

  /* === PATCH BIENESTAR: inputs/cols consistentes === */
  .ff-grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  @media (max-width: 820px){
    .ff-grid-2{ grid-template-columns: 1fr; }
  }
  .ff-field label{ display:block; font-weight:800; margin-bottom:8px; color:#0e0a7d; }
  .ff-field input, .ff-field select, .ff-field textarea{
    width:100%;
    box-sizing:border-box;
    min-height:48px;
  }
  .ff-help{ margin-top:8px; font-size:13px; color:#697eb7; }


/* patch bienestar grid */
#formBienestar .grid > div { min-width: 0; }
#formBienestar input, #formBienestar select, #formBienestar textarea { width: 100%; box-sizing: border-box; }
#formBienestar .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){
  #formBienestar .grid { grid-template-columns: 1fr; }
}

/* patch aporte grid */
#formAporte .grid > div { min-width: 0; }
#formAporte input, #formAporte select, #formAporte textarea { width: 100%; box-sizing: border-box; }
#formAporte .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){
  #formAporte .grid { grid-template-columns: 1fr; }
}

  button:focus, button:active, .btn:focus, .btn:active,
    input:focus, textarea:focus, select:focus, a:focus, a:active{ outline:none!important; box-shadow:none!important; }

    .svcCard{ margin-top:10px; border-radius:14px; border:1px solid rgba(14,10,125,.14); background:#fff; overflow:hidden; }
    .svcTop{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-left:6px solid var(--svcColor, #f4633a); background:rgba(105,126,183,.06); }
    .svcIco{ width:26px;height:26px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:rgba(22,81,231,.10); color:#0e0a7d; font-weight:900; flex:0 0 auto; }
    .svcTxt{ font-size:12.8px; line-height:1.35; font-weight:800; color:rgba(14,10,125,.92); }
    .svcSub{ margin-top:2px; font-size:12px; font-weight:700; color:rgba(14,10,125,.68); }

    /* === NUEVO layout socio === */
    .socioWrap{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px;
      align-items:start;
    }
    @media (max-width: 760px){
      .socioWrap{ grid-template-columns: 1fr; }
    }
    .socioStack .line{
      font-size:13px;
      line-height:1.4;
      color: rgba(14,10,125,.92);
      margin: 6px 0;
      font-weight:800;
    }
    .socioStack .line span{
      font-weight:700;
      color: rgba(14,10,125,.86);
    }
    .miniInput{
      width:100%;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(14,10,125,.18);
      padding:0 12px;
      font-weight:800;
      color: rgba(14,10,125,.92);
      background:#fff;
      box-sizing:border-box;
    }
    .muted2{ margin-top:6px; font-size:12px; font-weight:700; color: rgba(14,10,125,.60); }
    .ffTextarea{
      width:100%;
      min-height:140px;
      border-radius:12px;
      border:1px solid rgba(14,10,125,.18);
      padding:12px;
      font-weight:700;
      color: rgba(14,10,125,.92);
      resize:none;
      overflow-y:auto;
      box-sizing:border-box;
    }

    /* === Protocolo Bienestar (destacado) === */
    .protoCard{
      position:relative;
      border-radius:16px;
      border:2px solid rgba(30,169,252,.55);
      background: linear-gradient(135deg, rgba(14,10,125,.10), rgba(22,81,231,.07) 38%, rgba(30,169,252,.08) 72%, rgba(255,255,255,.95));
      box-shadow: 0 18px 34px rgba(14,10,125,.14);
      overflow:hidden;
    }
    .protoInner{ padding-left:14px; }
    .protoTitleRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .protoTitle{ font-weight:900; color:#0e0a7d; letter-spacing:.2px; }
    .protoPill{
      font-size:11px;
      font-weight:900;
      color:#0e0a7d;
      background: rgba(244,99,58,.14);
      border: 1px solid rgba(244,99,58,.35);
      padding:4px 10px;
      border-radius:999px;
    }
    .protoSub{ color: rgba(14,10,125,.72) !important; font-weight:800; }

    #btnProtocolo.protoBtn{
      text-decoration:none;
      background:#f4633a;
      color:#fff;
      border:none;
      box-shadow: 0 12px 24px rgba(244,99,58,.26);
    }
    #btnProtocolo.protoBtn:hover{ filter: brightness(.98); }
    #btnProtocolo.protoBtn:active{ transform: translateY(1px); }