/* ShopFusion — registro_vendedor.css (tema claro + responsivo) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Orbitron:wght@700;800&display=swap');

:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#fafbff;
  --line:#e7eaf3;
  --text:#0f172a;
  --muted:#475569;
  --accent:#FF6A00;
  --accent-2:#FF9500;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --ring: rgba(255,106,0,.45);

  /* Tipografía escalable */
  --fs-h1: clamp(1.8rem, 3.4vw, 2.6rem);
  --fs-h2: clamp(1.1rem, 2vw, 1.4rem);
  --fs-body: clamp(.95rem, 1.1vw, 1rem);
  --fs-mini: clamp(.86rem, 1vw, .9rem);

  /* Alturas y gaps base */
  --pad-card: clamp(1.2rem, 2.2vw, 2rem);
  --gap: 14px;
  --gap-lg: 18px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255,106,0,.07), transparent 55%),
    radial-gradient(700px 420px at -10% 85%, rgba(255,149,0,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.65;
  font-size: var(--fs-body);
}

/* Header */
.rv-header{
  text-align:center;
  padding: clamp(2.2rem, 5vw, 4rem) 1rem 1.2rem;
}
.rv-header h1{
  font-family: Orbitron, Inter, sans-serif;
  font-weight:800;
  margin:0 0 .5rem;
  font-size: var(--fs-h1);
  letter-spacing:.4px;
}
.rv-header p{
  margin: 0 auto;
  max-width: 70ch;
  color: var(--muted);
}

/* Contenedor */
.rv-container{
  width:min(1100px, 92vw);
  margin: 0 auto 4rem;
}

/* Card */
.rv-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--pad-card);
  overflow: hidden;
}

/* Títulos */
.rv-card h2{
  font-family: Orbitron, Inter, sans-serif;
  font-weight:800;
  font-size: var(--fs-h2);
  margin: .25rem 0 1rem;
  color: var(--text);
  position: relative;
}
.rv-card h2::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:80px; height:2px; border-radius:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Formulario */
form{ margin-top: .5rem; }
.grid{
  display:grid; gap: var(--gap);
}
.grid.two{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px){
  .grid.two{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-weight:600; color:#0b1220;
}
.field input, .field select{
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: 500 14px/1 Inter, system-ui, sans-serif;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .06s ease;
  min-height: 44px; /* mejor toque móvil */
}
.field select{ cursor:pointer; }
.field input::placeholder{ color:#8a93a3; }
.field input:focus, .field select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,106,0,.12);
}
.field input:active{ transform: scale(.998); }

.hint{
  color: #64748b;
  font-size: var(--fs-mini);
}

/* Check */
.field-check{
  display:flex; align-items:flex-start; gap:10px; margin-top: 8px;
}
.field-check input{ margin-top: 2px; width: 18px; height: 18px; }
.field-check a{
  color: var(--accent);
  text-underline-offset: 2px;
}
.field-check a:hover{ color: var(--accent-2); }

/* Acciones */
.form-actions{
  display:flex; gap:10px; align-items:center; margin-top: 10px; flex-wrap: wrap;
}
.btn-primary{
  border: none;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#000;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(255,106,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
  min-height: 44px;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,106,0,.32); filter: brightness(1.02); }
.btn-primary:active{ transform: translateY(0) scale(.99); }
.btn-primary:focus-visible{ outline: none; box-shadow: 0 0 0 5px var(--ring); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:6px;
  padding: 11px 14px; border-radius: 12px;
  background: #fff; color:#0b1220; text-decoration:none;
  border:1px solid var(--line);
  transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
  min-height: 44px;
}
.btn-ghost:hover{ background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.06); }

.mini{
  margin-top: 6px; color:#64748b; font-size: var(--fs-mini);
}

/* Separador */
.hr{
  border:0; height:1px; background: var(--line);
  margin: 18px 0 16px;
}

/* Texto con gradiente (coherente) */
.fx-gradient-text{
  background: linear-gradient(90deg, #111, #8b5a2b 35%, #FFAE6B 60%, #FF6A00 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 14px rgba(255,106,0,.08);
}

/* ----- Estados de error / éxito (opcional si los usas con JS) ----- */
.is-error input, .is-error select{
  border-color: #e11d48; /* rose-600 */
  box-shadow: 0 0 0 4px rgba(225,29,72,.12);
}
.is-success input, .is-success select{
  border-color: #16a34a; /* green-600 */
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

/* ===========================
   R E S P O N S I V I D A D
   =========================== */

/* <= 1024px: respirar más y suavizar sombras */
@media (max-width: 1024px){
  .rv-container{ width: min(980px, 94vw); }
  .rv-card{ box-shadow: 0 8px 24px rgba(15,23,42,.07); }
  .form-actions{ gap: 8px; }
}

/* <= 820px: columna única y paddings más cómodos */
@media (max-width: 820px){
  :root{
    --pad-card: 1.1rem;
    --gap: 12px;
  }
  .rv-header{ padding-top: 1.8rem; }
  .rv-card{ border-radius: 18px; }
  .field input, .field select{ min-height: 46px; }
  .btn-primary, .btn-ghost{ width: 100%; justify-content: center; }
}

/* <= 640px: tipografías un poco más grandes y tap-targets XL */
@media (max-width: 640px){
  :root{
    --fs-body: 1rem;
    --fs-mini: .92rem;
  }
  body{ line-height: 1.7; }
  .rv-header p{ padding: 0 .4rem; }
  .rv-card h2::after{ width: 68px; }
  .field select, .field input{ padding: 13px 14px; }
  .form-actions{ margin-top: 14px; }
}

/* <= 480px: compactar márgenes y evitar scroll horizontal */
@media (max-width: 480px){
  .rv-container{ width: min(100%, 94vw); margin-bottom: 3rem; }
  .rv-header{ padding: 1.6rem .9rem 1rem; }
  .rv-card{ padding: 1rem; border-radius: 16px; }
  .rv-card h2{ margin-bottom: .85rem; }
  .hr{ margin: 14px 0; }
  .mini{ margin-top: 10px; }
}

/* Alto reducido (teclado móvil horizontal, etc.) */
@media (max-height: 640px){
  .rv-header{ padding: 1.4rem 1rem .6rem; }
  .rv-container{ margin-bottom: 2.2rem; }
}

/* Accesibilidad: preferencia de menos animación */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn-primary, .btn-ghost, .field input, .field select{ transition: none !important; }
}

/* Alto contraste (si el usuario lo solicita en el SO) */
@media (prefers-contrast: more){
  .field input, .field select{
    border-color: #0f172a;
  }
  .btn-ghost{ border-color: #0f172a; }
  .rv-card{ border-color: #0f172a; }
}

/* Focus visible siempre claro (teclado) */
:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(255,106,0,.22) !important;
  border-color: var(--accent) !important;
}