/* =========================================================================
   Petición De Material MYEM · motor.css
   Estilos del formulario que ve el colaborador. Los usan la página pública
   (shortcode) y la vista previa del builder, para que se vean idénticos.

   - Todo cuelga de .pm para no tocar nada del resto de la web.
   - Claro por defecto; oscuro con data-tema="oscuro" (parámetro tema).
   - Los valores configurables (colores, radios, tamaños, botones…) llegan
     como variables CSS desde la configuración del formulario.
   - Blindaje frente al tema (Astra, Elementor): los botones y campos
     repiten sus colores en :hover, :focus y :active con selectores más
     específicos que los del tema, para que manden siempre los configurados.
   ========================================================================= */

.pm{--fuente:'Montserrat','Segoe UI',system-ui,sans-serif;
  --pm-fondo:#ffffff;--pm-tarjeta:#fafafa;--pm-borde:#e2e2e2;--pm-texto:#555555;--pm-sec:#666666;--pm-campo:#ffffff;--pm-borde-campo:#121212;
  background:var(--pm-fondo);color:var(--pm-texto);font-family:var(--fuente);font-size:var(--pm-tam,15px);line-height:1.6;padding:32px 20px;text-align:left}
.pm[data-tema="oscuro"]{--pm-fondo:#0e0e0e;--pm-tarjeta:#161616;--pm-borde:#2e2e2e;--pm-texto:#e8e8e8;--pm-sec:#9a9a9a;--pm-campo:#1e1e1e;--pm-borde-campo:#3a3a3a}
.pm *{box-sizing:border-box}
.pm-envoltura{max-width:var(--pm-ancho,760px);margin:0 auto;display:grid;gap:var(--pm-sep-modulos,40px)}
.pm .pm-titulo{margin:0;font-size:1.6em;font-weight:700;color:var(--pm-texto);font-family:var(--fuente);line-height:1.25}
.pm .pm-intro{margin:6px 0 0;color:var(--pm-sec);white-space:pre-line}
.pm-aviso{background:color-mix(in srgb,var(--pm-acento) 12%,var(--pm-fondo));border:1px solid var(--pm-acento);border-radius:6px;padding:12px 14px;font-size:.93em}
/* Contenedor de cada módulo (regla general MYEM 02/10/2026): título, instrucciones, campos y botón
   enmarcados como una unidad. Fondo, marco, margen y separación llegan de «Diseño» (o del módulo). */
.pm-mod{display:grid;gap:10px;
  background:color-mix(in srgb,var(--pm-c-fondo,#808080) var(--pm-c-fondo-op,6%),transparent);
  border:var(--pm-c-grosor,1px) solid color-mix(in srgb,var(--pm-c-borde,#808080) var(--pm-c-borde-op,30%),transparent);
  border-radius:var(--pm-c-radio,10px);padding:var(--pm-c-pad,18px)}
.pm-mod-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm .pm-mod-titulo{margin:0;font-size:1.12em;font-weight:700;color:var(--pm-texto);font-family:var(--fuente);line-height:1.3}
.pm-nuevo{background:var(--pm-acento);color:#121212;font-size:.7em;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em}
.pm-mod.es-nuevo{border-left:3px solid var(--pm-acento)}

/* Instrucciones desplegables: flechita + etiqueta a la derecha del título */
.pm .pm-instr-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:2px 4px;color:var(--pm-instr-color);
  font-weight:600;font-size:.85em;border-radius:4px;cursor:pointer;font-family:var(--fuente);box-shadow:none;text-transform:none;line-height:1.4}
.pm .pm-instr-btn:hover,.pm .pm-instr-btn:focus,.pm .pm-instr-btn:active{background:none;color:var(--pm-instr-color);box-shadow:none}
.pm .pm-instr-btn:focus-visible{outline:1px dashed var(--pm-instr-color);outline-offset:2px}
.pm-instr-flecha{display:inline-flex;animation:pm-bote var(--pm-vel,1.6s) ease-in-out infinite}
.pm-instr-flecha svg{transition:transform .3s}
.pm-instr-btn[aria-expanded="true"] .pm-instr-flecha svg{transform:rotate(180deg)}
.pm-instr-btn.visto .pm-instr-flecha,.pm.sin-anim .pm-instr-flecha{animation:none}
@keyframes pm-bote{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--pm-int,-4px))}}
/* «Reducir movimiento» del sistema operativo: la flecha no se mueve */
@media (prefers-reduced-motion: reduce){.pm-instr-flecha{animation:none!important}}
/* Despliegue suave con la técnica de la rejilla (0fr → 1fr), sin medir alturas */
.pm-plegable{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.pm-plegable>div{overflow:hidden}
.pm-plegable.abierto{grid-template-rows:1fr}
.pm-instr-texto{background:var(--pm-instr-fondo);border-radius:var(--pm-radio,8px);padding:12px 16px;font-size:.93em}
.pm-instr-texto p{margin:0 0 6px}
.pm-instr-texto ul,.pm-instr-texto ol{margin:4px 0;padding-left:20px}
.pm-instr-texto a{color:inherit;text-decoration:underline}

/* Texto con historial de versiones */
.pm-version{background:var(--pm-tarjeta);border:1px solid var(--pm-borde);border-radius:var(--pm-radio,8px);padding:10px 14px}
.pm-version-cab{display:flex;align-items:center;gap:8px;font-size:.78em;color:var(--pm-sec)}
.pm-version-cab .pm-fecha{flex:1}
.pm-version-texto{white-space:pre-wrap;max-height:1.6em;overflow:hidden;transition:max-height .35s ease;cursor:pointer;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.pm-version.abierta .pm-version-texto{-webkit-mask-image:none;mask-image:none}
.pm-version-texto:focus-visible{outline:1px dashed var(--pm-acento);outline-offset:3px}
.pm-chev{display:inline-block;width:7px;height:7px;border-right:2px solid var(--pm-sec);border-bottom:2px solid var(--pm-sec);transform:rotate(45deg);transition:transform .3s;margin:0 4px}
.pm-version.abierta .pm-chev,.pm-anteriores-btn[aria-expanded="true"] .pm-chev{transform:rotate(-135deg)}
.pm .pm-anteriores-btn{background:none;border:0;padding:0;color:var(--pm-sec);font-size:.85em;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--fuente);box-shadow:none;text-transform:none}
.pm .pm-anteriores-btn:hover,.pm .pm-anteriores-btn:focus,.pm .pm-anteriores-btn:active{color:var(--pm-texto);background:none;box-shadow:none}
.pm-anteriores-lista{display:grid;gap:8px;padding-top:8px;opacity:.75}
.pm-ultima-etq{font-size:.72em;font-weight:700;color:var(--pm-acento);text-transform:uppercase;letter-spacing:.05em}

/* Campos de escritura */
.pm textarea,.pm input[type=text],.pm input[type=email],.pm input[type=tel],.pm input[type=url],.pm input[type=date]{width:100%;background:var(--pm-campo);color:var(--pm-texto);
  border:1px solid var(--pm-borde-campo);border-radius:var(--pm-radio,8px);padding:10px 12px;font:inherit;box-shadow:none;margin:0;height:auto}
.pm textarea{min-height:130px;resize:vertical}
.pm textarea:focus,.pm input:focus{outline:none;border-color:var(--pm-acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--pm-acento) 25%,transparent);background:var(--pm-campo);color:var(--pm-texto)}
.pm-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pm-estado-borrador{font-size:.78em;color:var(--pm-sec)}

/* Botones principales (Enviar versión, Finalizar…): todo llega configurado desde «Botones» */
.pm .pm-btn{background:var(--pm-btn-fondo);color:var(--pm-btn-texto);border:var(--pm-btn-grosor) solid var(--pm-btn-borde);border-radius:var(--pm-btn-radio);
  padding:var(--pm-btn-pad);font-weight:var(--pm-btn-peso);font-size:var(--pm-btn-tam);text-transform:var(--pm-btn-mayus);letter-spacing:.02em;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;font-family:var(--fuente);line-height:1.3;box-shadow:none}
.pm .pm-btn:hover,.pm .pm-btn:focus,.pm .pm-btn:active{background:var(--pm-btn-fondo-h);color:var(--pm-btn-texto-h);border-color:var(--pm-btn-borde-h);box-shadow:none}
.pm .pm-btn[disabled]{opacity:.6;cursor:wait}
.pm .pm-btn-sec{background:none;color:var(--pm-texto);border:1px solid var(--pm-borde);border-radius:3px;padding:6px 12px;font-size:.82em;font-weight:600;cursor:pointer;font-family:var(--fuente);box-shadow:none;text-transform:none;line-height:1.3}
.pm .pm-btn-sec:hover,.pm .pm-btn-sec:focus,.pm .pm-btn-sec:active{background:none;color:var(--pm-texto);border-color:var(--pm-acento);box-shadow:none}
.pm-copiar-admin{margin-left:auto}
.pm-bloqueado{font-size:.85em;color:var(--pm-sec);font-style:italic;margin:0}

/* Subida de fotos y archivos */
.pm-drop{border:2px dashed var(--pm-borde);border-radius:var(--pm-radio,8px);padding:26px 16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;color:var(--pm-sec)}
.pm-drop:hover,.pm-drop.encima,.pm-drop:focus-visible{border-color:var(--pm-acento);background:color-mix(in srgb,var(--pm-acento) 6%,transparent);outline:none}
.pm-drop b{color:var(--pm-texto)}
.pm-drop small{display:block;margin-top:4px;font-size:.78em}
.pm-fotos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pm-foto{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--pm-tarjeta);border:1px solid var(--pm-borde);border-radius:var(--pm-radio,8px);padding:8px;margin:0}
.pm-mini{width:56px;height:56px;border-radius:6px;overflow:hidden;background:var(--pm-borde);display:grid;place-items:center;font-size:.65em;font-weight:700;color:var(--pm-sec)}
.pm-mini img{width:100%;height:100%;object-fit:cover}
.pm-foto-nombre{font-weight:600;font-size:.88em;word-break:break-all}
.pm-foto-info{font-size:.75em;color:var(--pm-sec)}
.pm-barra{height:5px;background:var(--pm-borde);border-radius:3px;overflow:hidden;margin-top:5px}
.pm-barra i{display:block;height:100%;background:var(--pm-acento);transition:width .15s}
.pm-foto-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pm-drive{font-size:.72em;padding:1px 6px;border-radius:8px;border:1px solid var(--pm-borde);white-space:nowrap}

/* Galería de muestra */
.pm-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pm .pm-galeria button{padding:0;border:0;border-radius:var(--pm-radio,8px);overflow:hidden;aspect-ratio:3/4;background:var(--pm-borde);cursor:zoom-in;box-shadow:none}
.pm .pm-galeria button:hover,.pm .pm-galeria button:focus{background:var(--pm-borde);box-shadow:none}
.pm-galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.pm-galeria button:hover img{transform:scale(1.04)}

/* Datos de contacto */
.pm-contacto{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-contacto label{display:grid;gap:4px;font-size:.85em;font-weight:600;margin:0;color:var(--pm-texto)}
.pm-contacto .ancho{grid-column:1/-1}
.pm-pista{font-weight:400;font-size:.85em;color:var(--pm-sec)}
.pm-tel{display:flex;gap:6px;position:relative}
.pm .pm-prefijo{flex-shrink:0;background:var(--pm-campo);color:var(--pm-texto);border:1px solid var(--pm-borde-campo);border-radius:var(--pm-radio,8px);padding:0 10px;display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer;font-family:var(--fuente);box-shadow:none}
.pm .pm-prefijo:hover,.pm .pm-prefijo:focus{background:var(--pm-campo);color:var(--pm-texto);box-shadow:none}
.pm-bandera{display:inline-block;font-size:.7em;background:var(--pm-borde);border-radius:3px;padding:1px 4px}
.pm-error{color:#c62828;font-size:.78em;font-weight:500}
/* Datos obligatorios: asterisco y resaltado del campo que falta al finalizar */
.pm-obl{color:var(--pm-acento);font-weight:700}
.pm .pm-falta,.pm .pm-falta:focus{border-color:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.2)}

/* Pie: finalizar y firma */
.pm-pie{border-top:1px solid var(--pm-borde);padding-top:20px;display:grid;gap:10px;justify-items:start}
.pm-firma{display:block;margin-top:10px}
.pm .pm-firma a,.pm .pm-firma a:hover,.pm .pm-firma a:focus{color:inherit;text-decoration:none;box-shadow:none}
/* Campo trampa antirrobots (honeypot): invisible para las personas */
.pm-trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Teléfono con intl-tel-input: el selector ocupa todo el ancho y respeta el diseño del formulario */
.pm .iti{width:100%;display:block}
.pm .iti__country-container button,.pm .iti__selected-country{background:none;box-shadow:none;border:0;color:var(--pm-texto)}
.pm .iti__selected-country:hover,.pm .iti__selected-country:focus{background:color-mix(in srgb,var(--pm-acento) 8%,transparent);color:var(--pm-texto)}
.pm .iti__search-input{border:1px solid var(--pm-borde);border-radius:6px;padding:6px 8px}

/* Desplegable del prefijo telefónico */
.pm select.pm-prefijo{width:auto;min-width:96px;padding:0 8px;height:auto;appearance:auto;-webkit-appearance:auto;font:inherit;font-weight:600;font-size:.9em}
.pm select.pm-prefijo:focus{outline:none;border-color:var(--pm-acento)}

/* Caja para entrar con el usuario (acceso con usuario de WordPress, sin sesión) */
.pm-acceso{background:var(--pm-tarjeta);border:1px solid var(--pm-borde);border-radius:var(--pm-radio,8px);padding:22px;display:grid;gap:14px;justify-items:start}
.pm-acceso p{margin:0}
.pm a.pm-btn,.pm a.pm-btn:hover,.pm a.pm-btn:focus{text-decoration:none;display:inline-block}

/* Ventana de confirmación (Finalizar…) */
.pm-modal{position:fixed;inset:0;z-index:999998;display:none;place-items:center;background:rgba(0,0,0,.5);padding:16px}
.pm-modal.visible{display:grid}
.pm-modal-caja{background:var(--pm-fondo);color:var(--pm-texto);border-radius:10px;max-width:440px;width:100%;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.pm .pm-modal-caja h3{margin:0 0 8px;font-size:1.15em;color:var(--pm-texto);font-family:var(--fuente)}
.pm-modal-caja p{margin:0}
.pm-modal-botones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}

/* Aviso GRANDE (faltan obligatorios / formulario incompleto): letra grande y franja de color arriba */
.pm-modal-grande .pm-modal-caja{max-width:640px;padding:30px 28px;border-top:8px solid #c62828}
.pm-modal-grande.pm-modal-incompleto .pm-modal-caja{border-top-color:#ffaa00}
.pm .pm-modal-grande .pm-modal-caja h3{font-size:1.7em;line-height:1.2;margin-bottom:14px}
.pm-modal-grande .pm-modal-caja p{font-size:1.25em;line-height:1.5;margin-bottom:12px}
.pm-modal-grande .pm-modal-caja p:last-of-type{font-weight:700}
.pm-modal-grande .pm-modal-botones{flex-direction:column-reverse;align-items:stretch}
.pm-modal-grande .pm-modal-botones button{font-size:1.1em;padding:14px 18px;width:100%}
@media(min-width:600px){.pm-modal-grande .pm-modal-botones{flex-direction:row;justify-content:flex-end}.pm-modal-grande .pm-modal-botones button{width:auto}}

/* Enlace personal dentro de la ventana, con su botón «Copiar» */
.pm-enlace{display:flex;gap:8px;margin-top:12px}
.pm .pm-enlace input{flex:1;min-width:0;font-size:.8em}

/* Aviso flotante (guardado, errores…) */
.pm-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);z-index:999999;background:#1a1a1a;color:#e8e8e8;border-left:3px solid var(--pm-acento,#ffaa00);
  padding:10px 16px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100% - 32px);font-family:var(--fuente)}
.pm-toast.visible{opacity:1;transform:translate(-50%,0)}

/* Aviso de vista previa (fase 1) */
.pm-previa{font-size:.8em;color:var(--pm-sec);border:1px dashed var(--pm-borde);border-radius:6px;padding:8px 12px}

/* Visor de fotos a pantalla completa (lightbox) */
.pm-lightbox{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);display:none;place-items:center}
.pm-lightbox.visible{display:grid}
.pm-lightbox img{max-width:92vw;max-height:88vh;border-radius:6px}
.pm-lightbox button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;padding:0;line-height:44px;box-shadow:none}
.pm-lightbox button:hover,.pm-lightbox button:focus{background:rgba(255,170,0,.85);color:#121212}
.pm-lightbox .pm-lb-cerrar{top:16px;right:16px}
.pm-lightbox .pm-lb-ant{left:16px;top:50%}
.pm-lightbox .pm-lb-sig{right:16px;top:50%}
.pm-lb-pie{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#ccc;font-size:13px;font-family:'Montserrat','Segoe UI',system-ui,sans-serif}

/* Móvil (en la vista previa del builder, «Móvil» añade la clase vista-movil porque no cambia la ventana) */
.pm.vista-movil .pm-mod{padding:var(--pm-c-pad-m,12px)}
@media (max-width:700px){
  .pm-mod{padding:var(--pm-c-pad-m,12px)}
  .pm{padding:22px 16px}
  .pm-contacto{grid-template-columns:1fr}
  .pm-foto{grid-template-columns:48px 1fr}
  .pm-foto-btns{grid-column:1/-1;justify-content:flex-start}
  .pm-mini{width:48px;height:48px}
}