/* Diseño mobile-first: el 100% del uso real es en teléfono, así que el
   layout de escritorio es solo "el mismo teléfono, centrado en la pantalla".
   Los colores viven en variables porque el perfil público los reemplaza en
   caliente según el tema que eligió el dueño (ver applyTheme en app.js). */

:root {
  --bg: #f5f4f2;
  --card-bg: #ffffff;
  --text: #17171a;
  --text-muted: #6b6b70;
  --accent: #17171a;
  --accent-contrast: #ffffff;
  --border: #e4e2de;
  --danger: #b3261e;
  --danger-bg: #fce8e6;
  --success: #1e6b3d;
  --success-bg: #e6f4ea;
  --radius: 16px;
  --max-width: 460px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 16px 48px;
}

.screen { width: 100%; max-width: var(--max-width); }

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px 20px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

h1 { font-size: 21px; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 12px; }
p { line-height: 1.5; }
.muted { color: var(--text-muted); font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
label:first-child { margin-top: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}
textarea { resize: vertical; min-height: 76px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  color: var(--text);
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-row { display: flex; gap: 10px; margin-top: 16px; }
.btn-row > * { flex: 1; }

.mode-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.mode-toggle button {
  flex: 1; background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); font-weight: 600;
}
.mode-toggle button.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; line-height: 1.45; }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
  display: inline-block; margin-right: 8px; opacity: 0.7;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Elección de modo (tarjetas grandes, no radio buttons chicos) --- */
.choice {
  display: block; width: 100%; text-align: left;
  padding: 18px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg);
  margin-bottom: 10px;
}
.choice.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice .choice-title { font-weight: 700; font-size: 15px; display: block; margin-bottom: 4px; }
.choice .choice-desc { font-weight: 400; font-size: 13px; color: var(--text-muted); line-height: 1.45; display: block; }

/* --- Progreso del asistente: barra fina, sin numeritos --- */
.progress { display: flex; gap: 6px; margin-bottom: 20px; }
.progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--border); }
.progress span.done { background: var(--accent); }

/* --- Perfil público --- */
.profile-card { padding: 0; overflow: hidden; }

.cover {
  height: 120px;
  background-color: var(--border);
  background-image: linear-gradient(155deg,
    color-mix(in srgb, var(--accent) 22%, var(--bg)),
    color-mix(in srgb, var(--accent) 6%, var(--bg)));
  background-size: cover; background-position: center;
}
.profile-body { padding: 0 20px 24px; }

.avatar-wrap { margin-top: -42px; margin-bottom: 14px; }
.profile-photo {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; display: block;
  background: var(--border);
  border: 3px solid var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
.avatar-fallback {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-contrast);
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  border: 3px solid var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.profile-name { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.profile-role { color: var(--text-muted); margin: 6px 0 0; font-size: 14px; line-height: 1.4; }

.contact-list { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.contact-btn {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 15px;
}
.contact-btn svg { width: 19px; height: 19px; flex: none; color: var(--text-muted); }
.contact-btn .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }

.share-back { margin-top: 6px; }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.consent-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.consent-row label { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--text-muted); line-height: 1.45; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Selector de tema: cada muestra es una mini tarjeta en ese tema --- */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-swatch {
  padding: 0; height: 70px; border-radius: 12px;
  border: 1px solid var(--border); cursor: pointer;
  /* align-items:stretch es necesario: la regla global de button pone
     align-items:center, que en columna encoge a los hijos al ancho del texto. */
  display: flex; flex-direction: column; align-items: stretch;
  overflow: hidden; width: 100%; background: var(--card-bg);
}
.theme-swatch.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch .fill { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.theme-swatch .mini {
  width: 80%; height: 48%; border-radius: 6px; border: 1px solid;
  display: flex; align-items: center; gap: 6px; padding: 0 6px;
}
.theme-swatch .mini-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.theme-swatch .mini-lines { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.theme-swatch .mini-line { height: 3px; border-radius: 2px; opacity: 0.6; }
.theme-swatch .name {
  font-size: 10.5px; font-weight: 600; padding: 5px 0;
  background: var(--card-bg); color: var(--text);
}

/* --- Inputs de archivo: el "Choose File" del navegador se ve sin terminar --- */
.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; width: auto;
}
.file-row { display: flex; align-items: center; gap: 12px; }
.file-row .filename { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Vista previa dentro del asistente --- */
.preview-frame {
  border-radius: 20px; padding: 18px 16px 20px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -12px rgba(0,0,0,0.28);
}
.preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 10px; }

.photo-picker { display: flex; align-items: center; gap: 14px; }
.photo-picker img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--border); flex: none; }
.photo-picker .empty-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px dashed var(--border);
}

/* --- Panel: contactos recibidos --- */
.contact-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.contact-item:last-child { border-bottom: none; }
.contact-item .who { font-weight: 700; font-size: 15px; }
.contact-item .when { color: var(--text-muted); font-size: 12px; }
.contact-item .detail { font-size: 13.5px; margin-top: 5px; line-height: 1.5; }
.contact-item a { color: var(--text); }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; padding: 11px; font-size: 14px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.tabs button.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* --- Admin --- */
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.admin-table th, table.admin-table td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tag-claimed { background: var(--success-bg); color: var(--success); }
.tag-unclaimed { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.top-bar h1 { margin: 0; }
.link-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; width: auto;
}

code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }