/* =============================================================================
   Magma · piel de los formularios públicos de Flexform
   -----------------------------------------------------------------------------
   Se carga SOLO en el cliente público (Clientflexform::view), justo DESPUÉS de
   flexform.css, así que gana la cascada sin tocar el CSS del fabricante ni el
   panel de administración.

   El color de acento es el que cada formulario ya configura en su pestaña de
   diseño (submit_btn_bg_color); las vistas lo publican como --mf-accent.

   OJO con line-height en titulares: por debajo de ~1.15 la tilde de una
   mayúscula acentuada (PÚBLICAS) se mete debajo de la línea anterior y
   desaparece. Aquí el h1 va a 1.22 a propósito.
   ============================================================================= */

/* El acento por defecto va en :root, NUNCA en body.flexform_client.
   Cada formulario publica su color con un <style>:root{--mf-accent:#...}</style>
   que va despues en el documento y por tanto gana por orden. Si lo declarasemos en
   body.flexform_client (mas especifico) pisariamos el color configurado en el
   formulario y todos saldrian en negro. */
:root{
  --mf-accent:#0a0a0a;
}
body.flexform_client{
  --mf-ink:#161513;
  --mf-muted:#6f6a63;
  --mf-line:#e0dcd3;
  --mf-page:#f4f2ee;
  background:var(--mf-page);
  min-height:100vh;
  color:var(--mf-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- lienzo ---------- */
body.flexform_client #content > .container{
  width:100%;
  max-width:680px;
  padding:26px 18px 60px;
  margin:0 auto;
}
body.flexform_client .flexform-navigation{background:transparent;border:0;margin:0}

/* ---------- tarjeta del formulario ----------
   El CSS del fabricante trae «min-width:600px; max-width:70px; height:90vh»,
   que en pantalla estrecha es incoherente; aquí se deja fluido. */
body.flexform_client #flexform-client-block-container,
body.flexform_client .flexform-client-block-container{
  background:#fff;
  border:1px solid var(--mf-line);
  border-radius:18px;
  box-shadow:0 22px 50px -34px rgba(22,21,19,.5);
  overflow:hidden;
  position:relative;
  min-width:0;
  max-width:100%;
  height:auto;
  padding:0 0 28px;
  margin:0 auto;
}
body.flexform_client #flexform-client-block-container::before,
body.flexform_client .flexform-client-block-container::before{
  content:"";
  display:block;
  height:6px;
  background:var(--mf-accent);
}

/* ---------- cabecera / declaración ---------- */
body.flexform_client .ff-statement-wrapper{
  padding:28px 26px 8px;
  text-align:center;
}
body.flexform_client h1,
body.flexform_client .ff-statement-wrapper h1{
  font-size:clamp(23px,5.4vw,31px);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.015em;
  margin:0 0 10px;
  color:var(--mf-ink);
}
body.flexform_client .flexform-desc-preview{
  font-size:15px;
  line-height:1.6;
  color:var(--mf-muted);
  margin:0;
}
body.flexform_client hr.fsp-hr{
  border:0;
  border-top:1px solid var(--mf-line);
  margin:22px 26px 0;
}

/* ---------- cada campo ---------- */
body.flexform_client .flexform-single-page-each-block.fsp-padding{
  padding:0 26px;
  margin-top:24px;
}
body.flexform_client .flexform-title-preview{
  font-size:14.5px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.005em;
  margin:0 0 8px;
  color:var(--mf-ink);
}
body.flexform_client .form-group{margin-bottom:0}
body.flexform_client .text-danger,
body.flexform_client .flexform-title-preview .text-danger{color:var(--mf-accent)}

/* ---------- controles ---------- */
body.flexform_client input.form-control,
body.flexform_client select.form-control,
body.flexform_client textarea.form-control,
body.flexform_client .flexform-text-input,
body.flexform_client .flexform-textarea,
body.flexform_client .flexform-select,
body.flexform_client .form-control{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  font-size:15.5px;
  line-height:1.4;
  font-family:inherit;
  color:var(--mf-ink);
  background:#fff;
  border:1px solid var(--mf-line);
  /* flexform.css fuerza el diseno "solo subrayado" con !important
     (border-radius:0 / border-color / box-shadow). Hay que responder igual. */
  border-radius:11px !important;
  border-color:var(--mf-line) !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
body.flexform_client textarea.form-control,
body.flexform_client .flexform-textarea{min-height:124px;resize:vertical}
body.flexform_client input.form-control:focus,
body.flexform_client select.form-control:focus,
body.flexform_client textarea.form-control:focus,
body.flexform_client .flexform-text-input:focus,
body.flexform_client .flexform-textarea:focus{
  border-color:var(--mf-accent) !important;
  outline:0;
  box-shadow:0 0 0 3px rgba(10,10,10,.12) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mf-accent) 22%, transparent) !important;
}
body.flexform_client ::placeholder{color:#a9a49b;opacity:1}

/* ---------- opciones (radios / checks) ---------- */
body.flexform_client .ff-options-boxes{gap:10px}
body.flexform_client .ff-options-boxes.vertical{align-items:stretch}
body.flexform_client .ff-options-boxes .ff-option-box{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  margin:0;
  padding:13px 15px;
  font-size:15.5px;
  background:#fff;
  border:1px solid var(--mf-line);
  border-radius:11px;
  transition:border-color .15s ease, background .15s ease;
}
body.flexform_client .ff-options-boxes .ff-option-box:hover{border-color:var(--mf-accent)}
body.flexform_client .ff-options-boxes .ff-option-box label{
  width:auto;
  flex:1;
  margin:0;
  cursor:pointer;
}
body.flexform_client .ff-options-boxes .ff-option-box_checked{
  float:none;
  flex:none;
  font-weight:700;
  color:var(--mf-accent);
}
/* Marcado: :has() donde exista; si no, se queda con el hover (degradación limpia). */
body.flexform_client .ff-options-boxes .ff-option-box:has(input:checked){
  border-color:var(--mf-accent);
  background:#f7f5f2;
  background:color-mix(in srgb, var(--mf-accent) 7%, #fff);
  box-shadow:inset 0 0 0 1px var(--mf-accent);
}

/* ---------- botones ---------- */
body.flexform_client .ff-submit-button,
body.flexform_client button[type="submit"],
body.flexform_client input[type="submit"]{
  width:100%;
  min-height:54px;
  padding:14px 18px;
  border:0;
  border-radius:11px;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
}
body.flexform_client .flexform-footer-actions{position:static;padding:0 26px;margin-top:24px}
body.flexform_client .flexform-footer-actions button,
body.flexform_client .flexform-footer-actions .btn{
  border-radius:11px;
  min-height:48px;
  padding:12px 18px;
  font-weight:600;
}
body.flexform_client .flexform-progress-bar{height:4px;background:var(--mf-accent)}
body.flexform_client .ff-section_title{font-size:16px;font-weight:700;line-height:1.3}

@media (max-width:600px){
  body.flexform_client #content > .container{padding:16px 12px 48px}
  body.flexform_client .flexform-single-page-each-block.fsp-padding{padding:0 18px}
  body.flexform_client .ff-statement-wrapper{padding:22px 18px 6px}
  body.flexform_client hr.fsp-hr{margin-left:18px;margin-right:18px}
  body.flexform_client .flexform-footer-actions{padding:0 18px}
}

/* =====================================================================
   Remates de la piel (21-sep-2026)
   ===================================================================== */

/* 1) La losa gris detras de cada campo venia de .flexform-single-page-each-block;
      la quitamos para que la tarjeta respire en blanco. */
body.flexform_client .flexform-single-page-each-block{
  background:transparent !important;
}

/* 2) La cabecera de navegacion se quedaba en 121px vacios cuando el formulario
      no tiene logo. Se colapsa para que la tarjeta suba. */
body.flexform_client .flexform-navigation{
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}
/* OJO: aqui NO se anula el padding. Este .container es la rejilla Bootstrap del
   propio fabricante: su .navbar-header lleva margenes de -15px que solo quedan
   compensados con el padding de 15px del contenedor. Al ponerlo a 0, el header
   se sale 3px por cada lado y el documento se ensancha (390 -> 393). */
body.flexform_client .flexform-navigation .container{
  min-height:0;
}

/* 3) El widget de valoracion del fabricante son 10 estrellas de 34px (340px)
      dentro de una tarjeta de ~268px: se salian de la pantalla. Antes no se
      notaba porque el min-width:600px del fabricante obligaba a scroll lateral. */
body.flexform_client .flexform-rating__stars{
  max-width:100%;
  flex-wrap:wrap;
}
body.flexform_client .flexform-rating__stars label{
  font-size:clamp(15px,5.6vw,30px);
  line-height:1;
}

/* =====================================================================
   Widgets especiales del fabricante
   ---------------------------------------------------------------------
   Estos no pasan por .form-control, asi que hay que vestirlos aparte:
   la escala de opinion salia en gris #f2f4f6 con borde negro (fuera de la
   paleta) y el campo de archivo mostraba el control nativo crudo.
   ===================================================================== */

/* --- escala de opinion (1..N) --- */
body.flexform_client .flexform-opinion-scale .flexform-opionion-scale_inner{
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-bottom:10px;
}
body.flexform_client .flexform-opinion-scale .flexform_opinion_scale_label{
  flex:1;
  min-height:48px;
  margin:0;
  padding:10px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15.5px;
  font-weight:600;
  background:#fff;
  color:var(--mf-ink);
  border:1px solid var(--mf-line);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
body.flexform_client .flexform-opinion-scale .flexform_opinion_scale_label:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
}
body.flexform_client .flexform-opinion-scale .flexform-opionion-scale_inner input[type="radio"]:checked + .flexform_opinion_scale_label,
body.flexform_client .flexform-opinion-scale .flexform_opinion_scale_label.active{
  background:var(--mf-accent);
  border-color:var(--mf-accent);
  color:#fff;
}
body.flexform_client .flexform-opinion-scale .label_wrapper{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  color:var(--mf-muted);
}

/* --- campo de archivo --- */
body.flexform_client input[type="file"]{
  min-height:52px;
  padding:11px 12px;
  font-size:14.5px;
  color:var(--mf-muted);
  cursor:pointer;
}
body.flexform_client input[type="file"]::file-selector-button{
  -webkit-appearance:none;
  appearance:none;
  margin-right:12px;
  padding:9px 15px;
  border:0;
  border-radius:8px;
  background:var(--mf-accent);
  color:#fff;
  font-family:inherit;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  cursor:pointer;
}
body.flexform_client input[type="file"]::file-selector-button:hover{filter:brightness(.92)}

/* --- fecha/hora: el calendario va en un input-group, que no se desalinee --- */
body.flexform_client .input-group .form-control{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
body.flexform_client .input-group .input-group-addon,
body.flexform_client .input-group-addon{
  display:flex;
  align-items:center;
  border:1px solid var(--mf-line);
  border-left:0;
  border-radius:0 11px 11px 0;
  background:#fff;
  color:var(--mf-muted);
}

/* --- firma a mano: la caja venia con borde punteado gris y los botones
       Limpiar/Deshacer eran los .btn-xs nativos de Bootstrap --- */
body.flexform_client .ff-signature-wrapper{
  border:1.5px dashed var(--mf-line);
  border-radius:11px;
  background:#fff;
}
body.flexform_client .ff-signature-wrapper .btn,
body.flexform_client .ff-signature-wrapper button{
  border:1px solid var(--mf-line);
  border-radius:8px;
  background:#fff;
  color:var(--mf-ink);
  padding:6px 13px;
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  box-shadow:none;
  cursor:pointer;
}
body.flexform_client .ff-signature-wrapper .btn:hover{
  background:#fafafa;
  border-color:var(--mf-muted);
}
body.flexform_client .ff-signature-wrapper .dispay-block{
  display:flex;
  gap:6px;
  padding:6px 8px 2px;
}

/* --- desplegable (bootstrap-select) -----------------------------------------
   El fabricante monta el desplegable como un <button> dentro de un envoltorio
   .bootstrap-select.form-control, y en SU hoja pone ese envoltorio a padding:0.
   Mi regla general .form-control le metia 12px/14px de padding, con lo que el
   boton de dentro (width:100% del area de contenido) quedaba mas estrecho que su
   propio texto y la etiqueta se recortaba. Aqui se neutraliza el envoltorio y se
   viste el boton, que es el control de verdad. */
body.flexform_client .bootstrap-select.form-control{
  padding:0 !important;
  min-height:0;
  border:0 !important;
  background:transparent;
  box-shadow:none !important;
}
body.flexform_client .bootstrap-select > .dropdown-toggle{
  width:100%;
  min-height:50px;
  padding:12px 14px !important;
  font-family:inherit;
  font-size:15.5px !important;
  text-align:left;
  color:var(--mf-ink) !important;
  background:#fff !important;
  border:1px solid var(--mf-line) !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
body.flexform_client .bootstrap-select > .dropdown-toggle:focus,
body.flexform_client .bootstrap-select.open > .dropdown-toggle{
  border-color:var(--mf-accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mf-accent) 22%, transparent) !important;
}
/* por si alguna etiqueta es mas larga que la caja: puntos suspensivos, no corte seco */
body.flexform_client .bootstrap-select > .dropdown-toggle .filter-option-inner-inner{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.flexform_client .bootstrap-select .dropdown-menu{
  border:1px solid var(--mf-line);
  border-radius:11px;
  box-shadow:0 16px 34px -22px rgba(22,21,19,.5);
}