/* Big Sur Form UI v1.0 - Mobile First */

/* Variables de tema */
:root {
  --bs-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  --bs-radius: 14px;
  --bs-radius-sm: 10px;
  --bs-gap: 16px;
  --bs-pad: 24px;

  --bs-bg: #f7f7fa;
  --bs-card: #ffffff;
  --bs-text: #0f172a;
  --bs-muted: #6b7280;
  --bs-border: #e5e7eb;
  --bs-primary: #111827;
  --bs-primary-contrast: #ffffff;
  --bs-accent: #3730a3;

  --bs-focus: 2px solid #4f46e5;
  --bs-shadow: 0 10px 30px rgba(0,0,0,.06);

  --bs-bg-image: url('bg-pattern.svg'); 
  --bs-bg-size: 320px;
  --bs-bg-opacity: .35;
}

/* Modo oscuro opcional */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-bg:#0b0f1a;
    --bs-card:#0e1320;
    --bs-text:#e5e7eb;
    --bs-muted:#a1a1aa;
    --bs-border:#1f2937;
    --bs-primary:#e5e7eb;
    --bs-primary-contrast:#0b0f1a;
    --bs-shadow: 0 12px 36px rgba(0,0,0,.5);
    --bs-bg-opacity:.22;
  }
}

* { box-sizing:border-box }
html, body { height:100% }
body.bs-body {
  margin:0;
  font-family:var(--bs-font);
  color:var(--bs-text);
  background: var(--bs-bg);
  line-height:1.4;
}

.bs-bg {
  position:relative;
  min-height:100%;
}
.bs-bg::before {
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(79,70,229,var(--bs-bg-opacity)) 0, rgba(79,70,229,0) 40%),
    radial-gradient(circle at 90% 10%, rgba(2,132,199,var(--bs-bg-opacity)) 0, rgba(2,132,199,0) 40%),
    radial-gradient(circle at 10% 90%, rgba(236,72,153,var(--bs-bg-opacity)) 0, rgba(236,72,153,0) 40%),
    var(--bs-bg-image);
  background-size: 40% 40%, 45% 45%, 35% 35%, var(--bs-bg-size);
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  opacity: .6;
  pointer-events:none;
}

.bs-header {
  max-width:1080px; margin:0 auto; padding:20px var(--bs-pad) 8px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.bs-logo {
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.bs-logo img { height:36px; width:auto; display:block; }
.bs-logo .bs-title { font-weight:800; letter-spacing:.2px; color:var(--bs-text) }
.bs-badge {
  background:#eef2ff; color:var(--bs-accent);
  border-radius:999px; padding:3px 10px;
  font-size:12px; font-weight:700;
}

.bs-wrap { max-width:1080px; margin:0 auto; padding:10px var(--bs-pad) 48px; }
.bs-card {
  background:var(--bs-card); border:1px solid var(--bs-border); border-radius:var(--bs-radius);
  box-shadow:var(--bs-shadow); padding: clamp(18px, 3vw, 28px);
}
.bs-card h1 { margin:0 0 6px; font-size: clamp(20px, 2.6vw, 26px); }
.bs-muted { color:var(--bs-muted); margin:0 0 18px; }

.bs-grid { display:grid; gap:var(--bs-gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .bs-grid { grid-template-columns:1fr 1fr; } }
.bs-grid-1 { grid-template-columns:1fr; }

.bs-row { margin-bottom: 10px; }
.bs-label { display:block; font-weight:700; margin-bottom:6px; }
.bs-label.req::after { content:" *"; color:#ef4444; }

.bs-input, .bs-select, .bs-textarea {
  width:100%; border:1px solid var(--bs-border); border-radius:var(--bs-radius-sm);
  padding:12px 14px; font-size:14px; background:#2f2e2e; color:var(--bs-text);
  outline:none; transition: box-shadow .2s, border-color .2s;
}
.bs-textarea { min-height:130px; resize:vertical; }

.bs-input:focus, .bs-select:focus, .bs-textarea:focus {
  border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.18);
}

.bs-hint { color:var(--bs-muted); font-size:12px; margin-top:6px; }

.bs-file {
  border:1px dashed #c7cad1; border-radius:var(--bs-radius-sm); padding:14px; background:#fff;
}

.bs-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.bs-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--bs-radius-sm); padding:12px 16px; font-weight:700; cursor:pointer;
  background:#e5e7eb; color:#111827;
}
.bs-btn-primary { background:var(--bs-primary); color:var(--bs-primary-contrast); }
.bs-btn:focus-visible { outline: var(--bs-focus); outline-offset:2px; }
.bs-btn:active { transform: translateY(1px); }

.bs-alert {
  padding:12px 14px; border-radius:var(--bs-radius-sm);
  background:#fff7ed; border:1px solid #f59e0b; color:#92400e;
  margin-bottom:12px;
}

.bs-foot { color:#9ca3af; font-size:12px; margin-top:10px; }

.bs-hide { display:none !important }
.bs-center { text-align:center }
.bs-right { text-align:right }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}