/*
/* Auto-contrast for GENERAL text depending on page surface (set by JS) */
body.ifollink-surface-dark .ifollink-microbio{
  --ifollink-text: #f5f5ff;
}
body.ifollink-surface-light .ifollink-microbio{
  --ifollink-text: #111111;
}

/* Topbar + secondary text tuned for light surface */
body.ifollink-surface-light .ifollink-topbar{
  color: rgba(0,0,0,.55);
}
body.ifollink-surface-light .ifollink-topbar a{
  color: rgba(0,0,0,.70);
}
body.ifollink-surface-light .ifollink-menu-btn{
  background: rgba(0,0,0,.05);
}

 Contenedor principal de la micro web */

.ifollink-microbio {
  /* Single background: el panel/card redondeado lo maneja el theme (o nada).
     Este contenedor ya NO pinta un fondo propio. */
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 24px;
  border-radius: 0;
  background: transparent;
  color: var(--ifollink-text, #111111);
  box-shadow: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* Evitar que nada se salga de los márgenes en el bio */
.ifollink-microbio,
.ifollink-main-btn {
  box-sizing: border-box;
}


/* Topbar con alias y menú */

.ifollink-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #b7b7d9;
  margin-bottom: 18px;
}

.ifollink-topbar-center {
  opacity: 0.85;
}

.ifollink-topbar-left {
  font-weight: 600;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifollink-topbar-right {
  position: relative;
}

.ifollink-menu-btn {
  background: rgba(10,10,35,0.7);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f5ff;
  font-size: 16px;
  padding: 4px 10px;
  cursor: pointer;
}

.ifollink-menu-panel {
  position: absolute;
  right: 0;
  margin-top: 8px;
  min-width: 210px;
  background: rgba(6,6,20,0.96);
  border-radius: 16px;
  padding: 6px 0;
  box-shadow: 0 18px 45px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  display: none;
  z-index: 20;
}

.ifollink-menu-panel.open {
  display: block;
}

.ifollink-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  font-size: 13px;
  color: #e5e5ff;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.ifollink-menu-item:hover {
  background: rgba(255,255,255,0.06);
}

/* Header con avatar + datos */

.ifollink-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ifollink-avatar-wrap {
  flex: 0 0 auto;
}

.ifollink-avatar,
.ifollink-avatar-placeholder {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
  background: radial-gradient(circle at 30% 20%, #ffffff, #ffb199, #ff0844);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #120c22;
  border: 2px solid rgba(255,255,255,0.75);
}

.ifollink-header-text h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.ifollink-alias {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ifollink-muted, #c2c2eb);
}

.ifollink-tagline {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ifollink-text, #ffffff);
  opacity: 0.92;
}

/* Acerca de mí inline */

.ifollink-about-inline {
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(5,5,25,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  color: var(--ifollink-text, #e7e7ff);
}

.ifollink-about-inline strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ifollink-muted, #b7b7d9);
  margin-bottom: 3px;
}

.ifollink-about-inline p {
  margin: 0;
}

/* Separador */

.ifollink-divider {
  height: 1px;
  margin: 16px 0 14px;
  background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
}

/* Botones principales tipo Linktree */

.ifollink-main-links {
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ifollink-main-btn {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.ifollink-main-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.4);
  background: linear-gradient(135deg, var(--ifollink-btn, #ff6b3d), #ffb199);
  color: #120c22;
}

/* Botón con color personalizado */

.ifollink-main-btn.has-custom-color {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), var(--ifollink-btn-item, #ff6b3d));
  border-color: rgba(255,255,255,0.4);
  color: #ffffff;
}

.ifollink-main-btn.has-custom-color:hover {
  background: linear-gradient(135deg, var(--ifollink-btn-item, #ff6b3d), #ffffff);
  color: #120c22;
}

/* Redes sociales en iconos */

.ifollink-socials {
  max-width: 420px;
  margin: 4px auto 4px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ifollink-social {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  color: #f5f5ff;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ifollink-social svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.ifollink-social span {
  transform: translateY(0.5px);
}

.ifollink-social:hover {
  background: var(--ifollink-btn, #ff6b3d);
  border-color: rgba(0,0,0,0.4);
  color: #120c22;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
  transform: translateY(-1px);
}

/* Artículos recientes */

.ifollink-section {
  margin-top: 18px;
}

.ifollink-section h2 {
  font-size: 17px;
  margin-bottom: 10px;
}

.ifollink-posts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ifollink-post {
  display: flex;
  gap: 12px;
  background: rgba(4,4,20,0.9);
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}

.ifollink-post-thumb img {
  display: block;
  border-radius: 12px;
  max-width: 120px;
  height: auto;
}

.ifollink-post-body h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.ifollink-post-body h3 a {
  color: #ffffff;
  text-decoration: none;
}

.ifollink-post-body h3 a:hover {
  text-decoration: underline;
}

.ifollink-post-meta {
  font-size: 11px;
  color: var(--ifollink-muted, #b8b8da);
  margin-bottom: 4px;
}

.ifollink-post-body p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ifollink-text, #e0e0ff);
}

/* Footer */

.ifollink-footer {
  margin-top: 22px;
  font-size: 12px;
  text-align: center;
  color: var(--ifollink-muted, #bfbfe5);
}

.ifollink-footer a {
  color: #ffb08c;
  text-decoration: none;
}

.ifollink-footer a:hover {
  text-decoration: underline;
}

.ifollink-footer span {
  color: #ff6b3d;
}

/* Formulario genérico */

.ifollink-form {
  max-width: 950px;
  margin: 20px auto;
  padding: 22px 18px 26px;
  border-radius: 22px;
  background: #000000;
  color: #f5f5ff;
  box-shadow: 0 20px 56px rgba(0,0,0,0.75);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ifollink-grid {
  display: grid;
  gap: 18px;
}

.ifollink-col h2 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
}

.ifollink-muted {
  font-size: 12px;
  color: #a3a3cf;
  margin-bottom: 12px;
}

.ifollink-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.ifollink-form input[type="text"],
.ifollink-form input[type="url"],
.ifollink-form input[type="email"],
.ifollink-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 7px 10px;
  font-size: 13px;
  background: rgba(3,3,12,0.95);
  color: #f5f5ff;
}

.ifollink-form input[type="file"] {
  font-size: 12px;
  margin-top: 3px;
}

.ifollink-form input[type="color"] {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
}

.ifollink-form textarea {
  resize: vertical;
}

.ifollink-color-row {
  display: flex;
  gap: 10px;
}

.ifollink-color-row > div {
  flex: 1;
}

.ifollink-article-toggle {
  margin-top: 20px;
  margin-bottom: 8px;
}

.ifollink-toggle-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.3);
  background: transparent;
  color: #f5f5ff;
  font-size: 13px;
  cursor: pointer;
}

.ifollink-article-form {
  margin-top: 12px;
  padding: 14px 12px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 50%),
              rgba(6,6,24,0.96);
  border: 1px solid rgba(255,255,255,0.12);
}

.ifollink-submit-row {
  margin-top: 20px;
  text-align: right;
}

.ifollink-submit-row-dual {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.ifollink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
}

.ifollink-btn-primary {
  background: linear-gradient(135deg, var(--ifollink-btn, #ff6b3d), #ffb199);
  color: #120c22;
  font-weight: 600;
}

.ifollink-btn-ghost {
  background: transparent;
  color: #f5f5ff;
  border: 1px solid rgba(255,255,255,0.22);
}

.ifollink-link {
  font-size: 13px;
  color: #ffb08c;
  text-decoration: none;
}

.ifollink-link:hover {
  text-decoration: underline;
}

.ifollink-alert {
  max-width: 950px;
  margin: 10px auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: #26131a;
  color: #ffd6d6;
  border: 1px solid #ff8ea1;
  font-size: 13px;
}

.ifollink-alert-success {
  background: #14281f;
  color: #bdf6ce;
  border-color: #5ed197;
}

.ifollink-card.ifollink-center {
  text-align: center;
}

.ifollink-card.ifollink-center h2 {
  margin-top: 0;
}

/* Enlaces dinámicos en formulario */

.ifollink-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.ifollink-link-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.ifollink-link-handle {
  cursor: move;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  user-select: none;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  touch-action: none;
}

.ifollink-link-row input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
}

.ifollink-link-row input[type="color"] {
  flex: 0 0 72px;
  max-width: 80px;
  padding: 0;
}

.ifollink-link-row-placeholder {
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.03);
  min-height: 38px;
}

.ifollink-link-color {
  width: 100%;
  padding: 0;
}


/* Blog global */

.ifollink-blog-list {
  max-width: 950px;
  margin: 20px auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ifollink-blog-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.ifollink-blog-thumb img {
  max-width: 160px;
  border-radius: 10px;
  display: block;
}

.ifollink-blog-body h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.ifollink-blog-body h2 a {
  text-decoration: none;
}

.ifollink-blog-body h2 a:hover {
  text-decoration: underline;
}

.ifollink-blog-meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.ifollink-pagination {
  margin-top: 14px;
}

/* Login form tweaks */
.ifollink-login h2 {
  margin-top: 0;
}
.ifollink-login h3 {
  margin-top: 0;
  font-size: 15px;
}

/* Fullscreen microbio (sin header ni footer del tema y sin título clásico) */

body.ifollink-microbio-fullscreen {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* Evitar fondos blancos del theme, dejando que el body pinte el fondo */
body.ifollink-microbio-fullscreen #page,
body.ifollink-microbio-fullscreen .site,
body.ifollink-microbio-fullscreen .site-main,
body.ifollink-microbio-fullscreen .content-area,
body.ifollink-microbio-fullscreen #primary {
  background: transparent !important;
}

body.ifollink-microbio-fullscreen .site-header,
body.ifollink-microbio-fullscreen header,
body.ifollink-microbio-fullscreen .site-footer,
body.ifollink-microbio-fullscreen footer,
body.ifollink-microbio-fullscreen .page-header,
body.ifollink-microbio-fullscreen .entry-header,
body.ifollink-microbio-fullscreen .entry-title,
body.ifollink-microbio-fullscreen h1.entry-title,
body.ifollink-microbio-fullscreen .page-title,
body.ifollink-microbio-fullscreen h1.page-title {
  display: none !important;
}

body.ifollink-microbio-fullscreen .site-content,
body.ifollink-microbio-fullscreen .content-area,
body.ifollink-microbio-fullscreen .entry-content,
body.ifollink-microbio-fullscreen #content,
body.ifollink-microbio-fullscreen #primary {
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive */

@media (min-width: 800px) {
  .ifollink-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

@media (max-width: 600px) {
  .ifollink-header {
    align-items: flex-start;
  }
  .ifollink-post {
    flex-direction: column;
  }
  .ifollink-blog-item {
    flex-direction: column;
  }
  .ifollink-link-row {
    grid-template-columns: 1fr;
  }
  .ifollink-microbio {
    max-width: 100%;
    margin: 7vh 10px 9vh;
    padding: 22px 16px 24px;
  }
}


/* Iconos SVG de redes */
.ifollink-social-ico{width:20px;height:20px;display:block;fill:currentColor;}


/* =========================
   PULIDO PRO (v1.4.3)
   - Mejor legibilidad en fondos claros
   - Alias oculto (se muestra el nombre)
   - Ajustes de botones e iconos sociales
   ========================= */

.ifollink-alias{ display:none !important; }

/* Iconos sociales: un poco más presentes */
.ifollink-social { width: 36px; height: 36px; }
.ifollink-social svg { width: 20px; height: 20px; }

/* Botones: presencia premium desde el inicio (no solo hover) */
.ifollink-main-btn{
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.ifollink-main-btn.has-custom-color{
  background: linear-gradient(135deg, var(--ifollink-btn-item, #ff6b3d), rgba(255,255,255,0.22));
  color: #ffffff;
}
.ifollink-main-btn.has-custom-color:hover{
  background: linear-gradient(135deg, var(--ifollink-btn-item, #ff6b3d), rgba(255,255,255,0.38));
  color: #120c22;
}

/* Fondos claros: mantenemos fondo elegido, pero creamos "capas" oscuras internas para legibilidad */
.ifollink-microbio.ifollink-bg-light{
  /* suaviza el brillo general */
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}

/* Acerca de mí y cards: siempre legibles */
.ifollink-microbio.ifollink-bg-light .ifollink-about,
.ifollink-microbio.ifollink-bg-light .ifollink-post,
.ifollink-microbio.ifollink-bg-light .ifollink-section,
.ifollink-microbio.ifollink-bg-light .ifollink-links{
  background: rgba(0,0,0,0.55) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Textos secundarios dentro de cards */
.ifollink-microbio.ifollink-bg-light .ifollink-about-label,
.ifollink-microbio.ifollink-bg-light .ifollink-post-body .ifollink-post-meta,
.ifollink-microbio.ifollink-bg-light .ifollink-post-body p{
  color: rgba(255,255,255,0.82) !important;
}

/* Títulos en fondos claros */
.ifollink-microbio.ifollink-bg-light .ifollink-section h2,
.ifollink-microbio.ifollink-bg-light .ifollink-post-body h3{
  color: #ffffff !important;
}

/* Botones en fondos claros: un poco más de sombra */
.ifollink-microbio.ifollink-bg-light .ifollink-main-btn{
  box-shadow: 0 14px 28px rgba(0,0,0,0.40);
  border-color: rgba(255,255,255,0.22);
}

/* Iconos sociales en fondos claros */
.ifollink-microbio.ifollink-bg-light .ifollink-social{
  background: rgba(0,0,0,0.22);
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.80);
}
.ifollink-microbio.ifollink-bg-light .ifollink-social:hover{
  color: #120c22;
}

/* ------------------------------------------------------------------
 * Avatar preview (Crear/Editar)
 * - No afecta el resto del layout.
 * - Se muestra solo cuando hay imagen (clase .is-visible) o al elegir archivo.
 * ------------------------------------------------------------------ */

.ifollink-avatar-preview{
  display:none;
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.14);
}

.ifollink-avatar-preview.is-visible{
  display:block;
}

.ifollink-avatar-preview img{
  display:block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
}

/* =========================================================
   iFOLLINK – AUTO CONTRASTE (FIX GLOBAL)
   Hace que el texto del botón se ajuste según el color elegido
   ========================================================= */

.ifollink-microbio .ifollink-main-btn{
  /* default */
  color: var(--ifollink-btn-text, #ffffff) !important;
}

/* Fondo claro → texto oscuro */
.ifollink-microbio .ifollink-main-btn[data-contrast="dark"]{
  --ifollink-btn-text: #111111;
  text-shadow: none !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* Fondo oscuro → texto blanco (por si el theme lo pisa) */
.ifollink-microbio .ifollink-main-btn[data-contrast="light"]{
  --ifollink-btn-text: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* Si el color elegido es casi blanco, agregamos borde sutil */
.ifollink-microbio .ifollink-main-btn[data-contrast-edge="true"]{
  border-color: rgba(0,0,0,0.14) !important;
}

/* Evitar hover 'blanco total' que mata el contraste */
.ifollink-microbio .ifollink-main-btn.has-custom-color:hover{
  background: linear-gradient(135deg, var(--ifollink-btn-item, #ff6b3d), rgba(255,255,255,0.28)) !important;
}