:root{
  --bg:#4000ff;
  --panel:#05011ef8;
  --text:#e9e4ec;
  --muted:#00fffb;/*este color es para los border de los botones */
  --brand:#0067dc;
  --brand-2 :deepskyblue;
  --border:#00fffb;
}
  *{box-sizing:border-box}

  html,body{margin:0;
    padding:0;
      background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* capa oscura */
    url('../assets/pared-azul.png'); /* tu imagen */
      background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
    color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
  a{color:inherit;text-decoration:none}
  .container{width:min(980px,92%);margin-inline:auto}
  header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
  .logo{font-weight:800;font-size:1.1rem}
  .logo span{color:var(--brand)}
  .back{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px}

  main{padding:28px 0}
  h1{margin:0 0 10px}
  p.muted{color:var(--muted);margin:0 0 22px}

  form{display:grid;gap:14px;max-width:640px}
  .field{display:grid;gap:6px}
  .field label{font-weight:600}
  .field small{color:var(--muted)}
  input, textarea{
    width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
    background:#130d17;color:var(--text)
  }
  textarea{resize:vertical;min-height:140px}
  .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
  @media (max-width:720px){ .row{grid-template-columns:1fr} }

  .actions{display:flex;gap:10px;align-items:center}
  .btn{background:var(--brand);color:#fff;border:none;padding:10px 16px;border-radius:12px;font-weight:700;cursor:pointer}
  .btn.ghost{background:transparent;border:1px solid var(--border)}
  .msg{min-height:20px;font-size:.95rem}
  .msg.ok{color:var(--ok)}
  .msg.err{color:var(--err)}

  .card{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:16px}
  footer{padding:26px 0;border-top:1px solid var(--border);color:var(--muted);margin-top:28px}





  /* Evitar zoom en iOS al enfocar inputs */
input, select, textarea, button {
  font-size: 16px;         /* clave: 16px o más */
  line-height: 1.2;
}

/* Si usas rem/chica en mobile, fuerza 16px en pantallas pequeñas */
@media (max-width: 768px) {
  .form-control, 
  input, select, textarea, button {
    font-size: 16px !important;
  }
}