/* Ayni · formularios modernos y elegantes para TODAS las landings de clientes.
 * Se activa solo en el diseño base: si el cliente eligió un tema artístico (body.tema-*), manda el tema.
 * Toma el color de la marca de cada plantilla (--azul / --c) sin tocar su lógica ni su maquetación. */
body:not([class*="tema-"]){
  --fx:var(--azul,var(--c,#0d6b5f));
  --fx-suave:color-mix(in srgb,var(--fx) 7%,#f5f6f8);
  --fx-aro:color-mix(in srgb,var(--fx) 20%,transparent);
  --fx-tinta:#1d2430;--fx-gris:#6b7380;
}
/* contenedores de formulario (tarjeta suave) */
body:not([class*="tema-"]) .ar,
body:not([class*="tema-"]) .modal{
  border:1px solid rgba(20,28,45,.07);border-radius:24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 28px 56px -28px rgba(16,24,40,.26);
}
/* etiquetas */
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fx-gris);margin:0 0 6px;
}
body:not([class*="tema-"]) :is(.bk,#f) label{margin-top:15px}
body:not([class*="tema-"]) :is(.bk,#f) label:first-child{margin-top:0}
/* campos */
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),select,textarea){
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--fx-tinta);
  background:var(--fx-suave);border:1.5px solid transparent;border-radius:14px;padding:13px 16px;
  transition:border-color .18s,background .18s,box-shadow .18s;-webkit-appearance:none;appearance:none;
}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7380' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) textarea{min-height:92px;resize:vertical;line-height:1.5}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(input,select,textarea)::placeholder{color:#a3aab5}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(input,select,textarea):hover{border-color:color-mix(in srgb,var(--fx) 28%,transparent)}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(input,select,textarea):focus{
  outline:none;background:#fff;border-color:var(--fx);box-shadow:0 0 0 4px var(--fx-aro);
}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--fx-suave) inset;-webkit-text-fill-color:var(--fx-tinta)}
/* casillas */
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) input[type=checkbox],
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) input[type=radio]{width:18px;height:18px;accent-color:var(--fx);flex:none;margin:0 8px 0 0;vertical-align:-3px}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) label:has(input[type=checkbox]),
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) label.chk{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:500;color:var(--fx-gris);line-height:1.45}
/* botón principal: píldora con sombra de marca (los secundarios .sec y los chicos no cambian de tamaño) */
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(.btn:not(.sec):not(.chico),button[type=submit],#env){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:15px 28px;font:inherit;font-size:1rem;font-weight:700;letter-spacing:.01em;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--fx) 92%,#fff),var(--fx));
  box-shadow:0 10px 24px -12px var(--fx),0 1px 0 rgba(255,255,255,.25) inset;transition:transform .15s,box-shadow .15s,filter .15s;
}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(.btn:not(.sec):not(.chico),button[type=submit],#env):hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px var(--fx);filter:saturate(1.05)}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(.btn:not(.sec):not(.chico),button[type=submit],#env):active{transform:none}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(.btn,button[type=submit],#env):disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) .btn.sec:not(.chico){border-radius:999px;padding:13px 24px;font-weight:600;border-width:1.5px;transition:background .15s}
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar,#f) :is(.btn,button):focus-visible{outline:3px solid var(--fx-aro);outline-offset:2px}
/* opciones tipo tarjeta del cuestionario previo */
body:not([class*="tema-"]) #reservar .motivo{border-radius:16px;transition:border-color .15s,box-shadow .15s,transform .15s}
body:not([class*="tema-"]) #reservar .motivo:hover{transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(16,24,40,.35)}
/* avisos y mensajes */
body:not([class*="tema-"]) :is(#reservar,.modal,.bk,.ar) :is(.msg,.aviso){border-radius:14px;padding:12px 16px;font-size:.92rem}
/* rejilla de campos más respirada */
body:not([class*="tema-"]) :is(#reservar,.modal) .campo{margin-bottom:16px}
body:not([class*="tema-"]) .ar .ar-form{gap:14px 16px}
@media(max-width:560px){body:not([class*="tema-"]) .modal{border-radius:20px}}
@media(prefers-reduced-motion:reduce){body:not([class*="tema-"]) *{transition:none!important}}