@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Nunito:wght@400;600;700;800&family=Rubik:wght@400;500;700&display=swap');

#lpmp-app {
  font-family: 'Nunito', sans-serif;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

#lpmp-welcome { max-width:460px; margin:0 auto; }

/* HERO */
.lpmp-hero { text-align:center; margin-bottom:2.4rem; padding-top:1rem; }
.lpmp-hero-eyebrow { display:block;font-family:'Rubik',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:20px; }
.lpmp-hero-title { font-family:'Goldman',sans-serif;font-size:clamp(1.6rem,4.5vw,2.3rem);font-weight:700;color:#fff;line-height:1.3;margin-bottom:.6rem;letter-spacing:.16em;text-transform:uppercase; }
.lpmp-hero-sub { font-size:.95rem;color:rgba(255,255,255,.45);line-height:1.6;margin:0;letter-spacing:.02em; }

/* TABS */
.lpmp-tabs { display:flex;background:#121215;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:5px;margin-bottom:1.5rem;gap:5px; }
.lpmp-tab { flex:1;background:transparent;border:none;color:rgba(255,255,255,.5);font-family:'Rubik',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1rem;border-radius:10px;cursor:pointer;transition:.2s; }
.lpmp-tab.active { background:#fff;color:#0A0A0A; }
.lpmp-tab:hover:not(.active) { background:#2a2a36;color:#fff; }
.lpmp-tab-content { display:none; }
.lpmp-tab-content.active { display:block; }

/* URL PREVIEW */
.lpmp-url-preview { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem 1.25rem;font-size:.95rem;margin-bottom:1.75rem;font-weight:700; }
.lpmp-url-base { color:#8888a0; }
#lpmp-slug-preview { color:#f0f0f2; }

/* FORM CARD */
.lpmp-form-card { background:#121215;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:2.4rem 2rem; }

/* FIELDS */
.lpmp-field-group { display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem; }
.lpmp-field { display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.25rem; }
.lpmp-field label { font-family:'Rubik',sans-serif;font-size:.64rem;font-weight:700;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.16em; }
.lpmp-field input,.lpmp-field textarea,.lpmp-field select { background:#0e0e11;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;font-family:'Nunito',sans-serif;font-size:1rem;padding:.95rem 1.15rem;outline:none;transition:.2s;width:100%;box-sizing:border-box; }
.lpmp-field input:focus,.lpmp-field textarea:focus { border-color:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.lpmp-field textarea { resize:vertical;min-height:130px;line-height:1.7; }
.lpmp-field small { font-size:.78rem;color:#666680;line-height:1.5; }

/* INPUT PREFIX */
.lpmp-input-prefix { display:flex;align-items:center;background:#13131a;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;transition:.2s; }
.lpmp-input-prefix:focus-within { border-color:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.lpmp-input-prefix span { background:#1e1e2a;color:#666680;font-size:.8rem;padding:.85rem .9rem;white-space:nowrap;border-right:1px solid rgba(255,255,255,.06); }
.lpmp-input-prefix input { background:transparent;border:none;border-radius:0;flex:1;padding:.85rem 1rem; }
.lpmp-input-prefix input:focus { box-shadow:none; }

/* TOGGLE */
.lpmp-toggle { display:flex;align-items:center;gap:.85rem;cursor:pointer;font-size:.95rem;color:#b0b0c8;padding:.5rem 0; }
.lpmp-toggle input[type="checkbox"] { display:none; }
.lpmp-toggle-track { width:44px;height:26px;background:#2a2a36;border-radius:100px;position:relative;transition:.2s;flex-shrink:0;border:1px solid rgba(255,255,255,.1); }
.lpmp-toggle-track::after { content:'';position:absolute;width:20px;height:20px;background:#666;border-radius:50%;top:2px;left:2px;transition:.2s; }
.lpmp-toggle input:checked + .lpmp-toggle-track { background:#f0f0f2; }
.lpmp-toggle input:checked + .lpmp-toggle-track::after { left:20px;background:#fff; }

/* BOTONES */
.lpmp-btn-primary { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#fff;color:#0A0A0A;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;padding:.95rem 2rem;border-radius:12px;border:none;cursor:pointer;transition:.18s;width:100%;margin-top:.5rem;letter-spacing:.06em;text-transform:uppercase; }
.lpmp-btn-primary:hover { background:#e6e6e9;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.35); }
.lpmp-btn-save { display:inline-flex;align-items:center;gap:.5rem;background:#f0f0f2;color:#0A0A0A;font-family:'Nunito',sans-serif;font-size:.88rem;font-weight:700;padding:.65rem 1.35rem;border-radius:10px;border:none;cursor:pointer;transition:.2s; }
.lpmp-btn-save:hover { background:#f23ba0;transform:translateY(-1px); }
.lpmp-btn-outline { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;color:#b0b0c8;font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:600;padding:.85rem 1.75rem;border-radius:14px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:.2s;text-decoration:none; }
.lpmp-btn-outline:hover { color:#fff;border-color:rgba(255,255,255,.3); }

/* WHATSAPP ADMIN */
.lpmp-wa-admin-wrap { margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.06);text-align:center; }
.lpmp-wa-text { font-size:.875rem;color:#666680;margin-bottom:.85rem; }
.lpmp-btn-wa-admin { display:inline-flex;align-items:center;gap:.6rem;background:#25D366;color:#fff;font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;padding:.75rem 1.5rem;border-radius:12px;text-decoration:none;transition:.2s;border:none;cursor:pointer; }
.lpmp-btn-wa-admin:hover { background:#1ebc58;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.3); }

/* TERMS */
.lpmp-terms { font-size:.78rem;color:#555570;text-align:center;margin-top:1rem;line-height:1.6; }
.lpmp-terms a { color:#fff;text-decoration:none; }

/* EDITOR HEADER */
.lpmp-editor-header { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap; }
.lpmp-editor-header h2 { font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:.3rem; }
.lpmp-link-perfil { font-size:.875rem;color:#f0f0f2;text-decoration:none;font-weight:600; }
.lpmp-link-perfil:hover { color:#fff; }

/* SECCIONES */
.lpmp-section { background:#1e1e26;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:2.25rem;margin-bottom:1.75rem; }
.lpmp-section-title { font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666680;margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem; }
.lpmp-section-title span { font-size:1rem; }
.lpmp-section-title::after { content:'';flex:1;height:1px;background:rgba(255,255,255,.06); }
.lpmp-section-desc { font-size:.875rem;color:#666680;margin-bottom:1.25rem;line-height:1.6; }

/* FOTO */
.lpmp-foto-row { display:flex;gap:2rem;align-items:flex-start; }
.lpmp-foto-wrap { display:flex;flex-direction:column;align-items:center;gap:.85rem;flex-shrink:0; }
.lpmp-foto-preview { width:110px;height:110px;border-radius:50%;background:#13131a;border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden; }
.lpmp-foto-preview img { width:100%;height:100%;object-fit:cover; }
.lpmp-foto-btn { font-size:.78rem;font-weight:700;color:#f0f0f2;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:.4rem .9rem;cursor:pointer;transition:.2s;white-space:nowrap; }
.lpmp-foto-btn:hover { background:rgba(255,255,255,.2); }
.lpmp-fields-col { flex:1; }

/* SAVE SECTION */
.lpmp-save-section { background:#1e1e26;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:2.25rem;display:flex;flex-direction:column;align-items:center;gap:.85rem; }
.lpmp-save-section .lpmp-btn-primary { width:100%;max-width:400px; }
.lpmp-save-section .lpmp-btn-outline { width:100%;max-width:400px; }

/* MENSAJES */
.lpmp-msg { border-radius:12px;padding:1rem 1.5rem;font-size:.95rem;font-weight:600;margin:1.25rem 0;text-align:center; }
.lpmp-msg.success { background:rgba(255,255,255,.12);color:#f0f0f2;border:1px solid rgba(255,255,255,.25); }
.lpmp-msg.error   { background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.25); }

/* LOADING */
#lpmp-loading { position:fixed;inset:0;background:rgba(13,13,18,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;z-index:9999;backdrop-filter:blur(6px); }
#lpmp-loading p { color:#b0b0c8;font-size:1rem;font-weight:600;font-family:'Nunito',sans-serif; }
.lpmp-spinner { width:48px;height:48px;border:3px solid rgba(255,255,255,.2);border-top-color:#ffffff;border-radius:50%;animation:lpmp-spin .8s linear infinite; }
@keyframes lpmp-spin { to { transform:rotate(360deg); } }

/* SLUG STATUS */
#slug-status { font-size:.78rem;font-weight:700;min-height:1.1em; }
#slug-status.ok    { color:#f0f0f2; }
#slug-status.taken { color:#f87171; }
#slug-status.check { color:#facc15; }

/* RESPONSIVE */
@media (max-width:680px) {
  #lpmp-app { padding:2rem 1.25rem 5rem; }
  .lpmp-field-group { grid-template-columns:1fr; }
  .lpmp-foto-row { flex-direction:column;align-items:center; }
  .lpmp-form-card,.lpmp-section,.lpmp-save-section { padding:1.5rem; }
  .lpmp-editor-header { flex-direction:column; }
  .lpmp-save-section .lpmp-btn-primary,.lpmp-save-section .lpmp-btn-outline { max-width:100%; }
}

/* ── AJUSTES v5 ── */

/* Formulario — colores REPRO style */
.lpmp-btn-primary { background:#ffffff; }
.lpmp-btn-primary:hover { background:#d0d0d4; box-shadow:0 10px 28px rgba(255,255,255,.3); }
.lpmp-btn-save { background:#ffffff; }
.lpmp-btn-save:hover { background:#d0d0d4; }

/* Tabs activo — cyan/verde */
.lpmp-tab.active { background:#ffffff; color:#0a0a0a; }

/* Focus — cyan */
.lpmp-field input:focus,
.lpmp-field textarea:focus,
.lpmp-input-prefix:focus-within { border-color:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.12); }

/* Toggle activo — verde */
.lpmp-toggle input:checked + .lpmp-toggle-track { background:#ffffff; }

/* Btn WhatsApp admin — fucsia */
.lpmp-btn-wa { background:#f0f0f2 !important; border-color:#f0f0f2 !important; color:#0A0A0A !important; }
.lpmp-btn-wa:hover { background:#d8d8dc !important; box-shadow:0 8px 24px rgba(255,255,255,.35) !important; }

/* Foto col — más información de medidas */
.lpmp-foto-btn { font-size:.72rem; padding:.45rem 1rem; }

/* Sección foto — layout más horizontal */
.lpmp-foto-row { flex-direction:row; align-items:flex-start; gap:1.5rem; }

/* Bio — más ancha, menos alta */
.lpmp-field textarea {
  min-height: 90px;
  max-height: 160px;
}

/* Secciones — más padding horizontal */
.lpmp-section { padding: 2rem 2.5rem; }
.lpmp-form-card { padding: 2rem 2.5rem; }

/* Save section */
.lpmp-save-section { padding: 2rem 2.5rem; }

/* URL preview con medidas de foto */
.lp-foto-hint {
  font-size:.7rem;
  color:#555570;
  text-align:center;
  margin-top:.35rem;
  line-height:1.5;
}

/* ── RUBIK — títulos y hero del formulario ── */
.lpmp-hero-title {
  font-family: 'Rubik', 'Nunito', sans-serif;
  font-weight: 800;
}
.lpmp-editor-header h2 {
  font-family: 'Rubik', 'Nunito', sans-serif;
  font-weight: 700;
}
.lpmp-section-title {
  font-family: 'Rubik', 'Nunito', sans-serif;
}

/* ── FOTOS GRID — 3 cuadradas ── */
.lpmp-fotos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.lpmp-foto-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.lpmp-foto-sq {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12px;
  background: #13131a;
  border: 1px dashed rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, background .2s;
  position: relative;
}
.lpmp-foto-sq:hover {
  border-color: rgba(255,255,255,.3);
  background: #14141e;
}
.lpmp-foto-sq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
}
.lpmp-foto-sq-icon {
  font-size: 1.6rem;
  font-weight: 200;
  color: rgba(255,255,255,.08);
  line-height: 1;
}
.lpmp-foto-sq-label {
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255,255,255,.12);
  letter-spacing: .05em;
  margin-top: .25rem;
}

.lpmp-foto-btn-sm {
  font-family: 'Nunito', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: .35rem .75rem;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
}
.lpmp-foto-btn-sm:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #ffffff;
}

/* Foto preview con imagen */
.lpmp-foto-sq.has-img .lpmp-foto-sq-icon,
.lpmp-foto-sq.has-img .lpmp-foto-sq-label { display: none; }

@media(max-width:600px) {
  .lpmp-fotos-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
}

/* ── Paleta L A P O R T A: toggle disponible en verde fluorescente ── */
.lpmp-toggle input:checked + .lpmp-toggle-track { background:#f0f0f2 !important; }
.lpmp-btn-primary, .lpmp-btn-save { background:#ffffff; color:#0a0a0a; }
.lpmp-btn-primary:hover, .lpmp-btn-save:hover { background:#f2f2f2; box-shadow:0 10px 28px rgba(255,255,255,.35); }
#lpmp-slug-preview { color:#ffffff; }
.lpmp-hero-badge { color:#f0f0f2; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }

/* ============================================================
   RESPONSIVE MÓVIL VERTICAL — formulario a prueba de balas
   ============================================================ */
@media (max-width:560px) {
  #lpmp-app { padding:1.5rem 1rem 4rem; }
  .lpmp-form-card, .lpmp-section, .lpmp-save-section { padding:1.25rem; }
  .lpmp-field-group { grid-template-columns:1fr; gap:0; }
  .lpmp-hero-title { font-size:1.75rem; }
  .lpmp-hero-sub { font-size:.92rem; }
  .lpmp-editor-header { flex-direction:column; align-items:stretch; }
  .lpmp-foto-row { flex-direction:column; align-items:center; }

  /* Fotos: 2 columnas tappables, centradas */
  .lpmp-fotos-grid { grid-template-columns:repeat(2,1fr); gap:.85rem; }
  .lpmp-foto-slot:nth-child(3) { grid-column:1 / -1; max-width:50%; margin:0 auto; }

  /* URL preview que no se desborda */
  .lpmp-url-preview { font-size:.82rem; padding:.85rem 1rem; word-break:break-all; line-height:1.5; }

  /* Prefijos sociales que no rompen el ancho */
  .lpmp-input-prefix span { font-size:.72rem; padding:.8rem .6rem; }
  .lpmp-input-prefix input { min-width:0; }

  /* Botones a ancho completo y cómodos */
  .lpmp-btn-save { width:100%; justify-content:center; }
}

/* Salvaguarda anti-desbordes en cualquier ancho */
#lpmp-app, #lpmp-app * { max-width:100%; }
#lpmp-app input, #lpmp-app textarea, #lpmp-app select { box-sizing:border-box; }
#lpmp-app img { height:auto; }

/* FINEPRINT minimalista (estilo disclaimer) */
.lpmp-fineprint{max-width:580px;margin:2.6rem auto 0;text-align:center;font-size:.6rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.28);line-height:2;}
.lpmp-fineprint a{color:rgba(255,255,255,.55);text-decoration:none;}
.lpmp-fineprint a:hover{color:#fff;}

/* ===== SISTEMA DE BOTONES LAPORTA 2.0 (autoritario) ===== */
/* FORMAL: blanco, cuadrado (esquinas), negrita */
.lpmp-btn-primary,.lpmp-btn-save{background:#fff;color:#0A0A0A;border-radius:3px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.lpmp-btn-primary:hover,.lpmp-btn-save:hover{background:#e6e6e9;box-shadow:0 8px 22px rgba(0,0,0,.35);}
.lpmp-tab.active{background:#fff;color:#0A0A0A;}
.lpmp-toggle input:checked + .lpmp-toggle-track{background:#f0f0f2 !important;}
#lpmp-slug-preview{color:#f0f0f2;}
.lpmp-spinner{border-color:rgba(255,255,255,.2);border-top-color:#fff;}