/* ================================
   Design Tokens (mismos que Form_benf/css/styles.css)
=================================== */
:root{
  /* Marca y énfasis */
  --color-brand:#1456a0;
  --color-accent:#f4b400;
  --color-accent-hover:#d89e00;

  /* Superficies */
  --bg-page:#e6e6e6;
  --bg-form:#f1f1f1;
  --bg-input:#cfd4da;
  --bg-input-focus:#dbe0e6;
  --bg-input-readonly:#bfc5cc;

  /* Texto */
  --text-900:#000;
  --text-800:#111;
  --text-700:#333;
  --text-danger:#c62828;
  --text-success:#1b5e20;

  /* Dimensiones y radios */
  --container-max:720px;
  --radius-form:8px;
  --radius-pill:30px;

  /* Control unify */
  --control-height:48px;
  --control-padding-x:18px;

  /* Tipografía y espacios */
  --font-ui:'Segoe UI','Roboto',Arial,Helvetica,sans-serif;
  --font-size-sm:13px;
  --font-size-md:14px;
  --font-size-lg:18px;

  --space-xxs:4px;
  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
}

/* ================================
   Base
=================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-page);
  font-family:var(--font-ui);
  padding:40px 24px;
  color:var(--text-800);
}

/* ================================
   Encabezado
=================================== */
.app-header{
  background:var(--color-accent);
  color:var(--text-900);
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
  height:56px;
  display:flex;
  align-items:center;
  border-radius:var(--radius-form) var(--radius-form) 0 0;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.app-header__title{font-weight:700;font-size:15px;}

/* ================================
   Contenedor de formulario
=================================== */
.form{
  background:var(--bg-form);
  max-width:var(--container-max);
  margin:0 auto 30px auto;
  padding:32px 40px 40px;
  border-radius:0 0 var(--radius-form) var(--radius-form);
}

fieldset{border:none;margin:0 0 20px 0;padding:0}
legend{
  font-size:var(--font-size-lg);
  font-weight:600;
  margin-bottom:var(--space-md);
  color:var(--text-900);
}

.form-group{display:flex;flex-direction:column}
.form-group label{
  font-size:var(--font-size-md);
  margin-bottom:var(--space-xs);
  color:var(--text-800);
}

/* ================================
   Controles
=================================== */
.input,
.select{
  width:100%;
  height:var(--control-height);
  padding:0 var(--control-padding-x);
  border:none;
  border-radius:var(--radius-pill);
  background:var(--bg-input);
  font-size:var(--font-size-md);
  line-height:1;
  outline:none;
  transition:background .2s ease, box-shadow .2s ease;
}
.input:focus,
.select:focus{
  background:var(--bg-input-focus);
  box-shadow:0 0 0 3px rgba(20,86,160,.12);
}
.input[readonly]{background:var(--bg-input-readonly);}

/* ================================
   Botones
=================================== */
.btn{
  height:var(--control-height);
  padding:0 32px;
  border:none;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:var(--font-size-md);
  color:var(--text-900);
  cursor:pointer;
  transition:background .2s ease, opacity .2s ease, box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.btn--primary{background:var(--color-accent);}
.btn--primary:hover{background:var(--color-accent-hover);}
.btn--ghost{
  background:transparent;
  color:var(--text-700);
  border:1.5px solid #cbd5e1;
}
.btn--ghost:hover{background:#e9edf2;border-color:#94a3b8;}
.btn:disabled{opacity:.6;cursor:not-allowed;}

/* ================================
   Fila de búsqueda por correo
=================================== */
.search-row{
  display:flex;
  gap:var(--space-sm);
  align-items:stretch;
}
.search-row .input{flex:1 1 auto;}
.search-row .btn{flex:0 0 auto;}

@media (max-width:520px){
  .search-row{flex-direction:column;}
}

/* ================================
   Datos del contacto (solo lectura)
=================================== */
.contact-card{
  background:#fff;
  border-radius:var(--radius-form);
  padding:16px 20px;
  margin-bottom:20px;
  border-left:4px solid var(--color-brand);
}
.contact-card__name{font-weight:700;font-size:15px;color:var(--text-900);}
.contact-card__email{font-size:13px;color:var(--text-700);margin-top:2px;}

/* ================================
   Filtro de opciones
=================================== */
.interest-toolbar{
  display:flex;
  gap:var(--space-sm);
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.interest-toolbar .input{height:40px;flex:1 1 220px;}
.interest-count{
  font-size:13px;
  color:var(--text-700);
  white-space:nowrap;
}

/* ================================
   Rejilla de intereses (checkboxes tipo chip)
=================================== */
.interests-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px 12px;
  max-height:460px;
  overflow:auto;
  padding:4px;
  background:#fff;
  border-radius:var(--radius-form);
}
.interest-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1.5px solid #d6dbe1;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  color:var(--text-800);
  transition:border-color .15s, background .15s;
  user-select:none;
}
.interest-item:hover{border-color:var(--color-brand);}
.interest-item input{
  width:16px;height:16px;
  accent-color:var(--color-brand);
  cursor:pointer;
  flex:0 0 auto;
}
.interest-item.is-checked{
  border-color:var(--color-brand);
  background:#eef2ff;
  font-weight:600;
}

/* ================================
   Acciones
=================================== */
.actions{display:flex;margin-top:var(--space-lg);gap:var(--space-sm)}
.actions--end{justify-content:flex-end}

/* ================================
   Mensajes / estados
=================================== */
.message{
  padding:12px 16px;
  border-radius:var(--radius-form);
  font-size:var(--font-size-md);
  margin-bottom:16px;
  display:none;
}
.message--error{background:#fdecea;color:var(--text-danger);}
.message--ok{background:#e8f5e9;color:var(--text-success);}
.message--info{background:#e7f0fb;color:var(--color-brand);}

.hint{font-size:var(--font-size-sm);color:var(--text-700);margin:0 0 14px;}

.loader{
  display:inline-block;
  width:18px;height:18px;
  border:2px solid rgba(20,86,160,.25);
  border-top-color:var(--color-brand);
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}