/* ============================================================================
   🧭 BAQUEANO — EDITOR DEL PERFIL (js/profile-editor.js)
   🎯 POR QUÉ: perfil.html no tenía dónde editar los datos (reporte del propietario 2026-10-07).
   ⚙️ CÓMO: <dialog> nativo centrado, campos de 48 px, foco visible, aviso flotante con
      aria-live y estados de intereses (aria-pressed).
   📦 QUÉ: .pe-dialog, .pe-field, .pe-btn, .pe-toast, .pe-photo-*.
   ============================================================================ */
.pe-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: 20px;
  padding: 24px; background: #FFFFFF; color: #0F172A; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); }
.pe-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.pe-dialog h2 { margin: 0 0 16px; font: 800 1.2rem/1.3 Montserrat, sans-serif; color: #0F172A; }
.pe-form { display: flex; flex-direction: column; gap: 14px; }
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field label { font-weight: 700; font-size: 0.9rem; color: #1E293B; }
.pe-field input, .pe-field textarea { min-height: 48px; padding: 10px 12px; border: 1.5px solid #CBD5E1; border-radius: 12px; font: inherit; color: #0F172A; background: #FFFFFF; }
.pe-field textarea { resize: vertical; }
.pe-field input:focus-visible, .pe-field textarea:focus-visible { outline: 3px solid #165D6F; outline-offset: 2px; border-color: #165D6F; }
.pe-field input:invalid:not(:placeholder-shown) { border-color: #B91C1C; }
.pe-hint { color: #475569; font-size: 0.8rem; }
.pe-note { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: #ECFDF5; border: 1px solid #A7F3D0; color: #14532D; font-size: 0.85rem; line-height: 1.5; }
.pe-error { margin: 0; min-height: 1em; color: #B91C1C; font-weight: 700; font-size: 0.88rem; }
.pe-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pe-btn { min-height: 48px; padding: 0 20px; border-radius: 999px; font: 800 0.92rem/1 Montserrat, sans-serif; cursor: pointer; border: 2px solid transparent; }
.pe-btn-primary { background: #165D6F; color: #FFFFFF; }
.pe-btn-primary:hover { background: #0E4A59; }
.pe-btn-primary:disabled { opacity: 0.6; cursor: progress; }
.pe-btn-ghost { background: #FFFFFF; color: #0E5566; border-color: rgba(22, 93, 111, 0.35); }
.pe-btn-danger { color: #B91C1C; border-color: rgba(185, 28, 28, 0.35); align-self: flex-start; }
.pe-btn:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }
.pe-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pe-photo-preview { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #E2E8F0; background: #F8FAFC; }
.pe-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2147482000; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px; background: #14532D; color: #FFFFFF; font-weight: 700; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease; }
.pe-toast.is-error { background: #991B1B; }
.pe-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.prof-pref-tag[data-interest] { cursor: pointer; }
.prof-pref-tag[data-interest]:focus-visible { outline: 3px solid #165D6F; outline-offset: 2px; }
.prof-pref-tag[aria-pressed="true"] { background: #165D6F; color: #FFFFFF; border-color: #165D6F; }
@media (prefers-reduced-motion: reduce) { .pe-toast { transition: none; } }