@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Poppins:wght@400;500;600;700&display=swap');
/* Nota: la tipografía elegida por cada perfil (Playfair, Montserrat, Merriweather, etc.)
   se carga aparte, de forma dinámica, desde index.php según la selección guardada en la BD. */

:root{
    --acento:#3f5443;
    --fondo:#efe9df;
    --texto:#3a3a34;
    --gris:#7a786f;
}

*{box-sizing:border-box;}

body.perfil-body{
    margin:0;
    font-family:'Poppins',sans-serif;
    color:var(--texto);
    background:var(--fondo);
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding:0;
}

.perfil-wrap{
    width:100%;
    max-width:640px;
    background:var(--fondo);
    font-family:var(--fuente-texto, 'Poppins', sans-serif);
    position:relative;
    overflow:hidden;
    min-height:100vh;
}
.perfil-wrap.fondo-imagen{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
/* Capa clara sobre la imagen de fondo para que el texto siga siendo legible */
.perfil-wrap.fondo-imagen::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.6);
    z-index:0;
}

/* --- decoración de hojas (SVG de fondo) --- */
.hoja-superior{
    position:absolute;
    top:60px; left:-60px;
    width:220px; opacity:.55;
    pointer-events:none;
    z-index:0;
}
.hoja-inferior{
    position:absolute;
    right:-40px; bottom:170px;
    width:180px; opacity:.6;
    pointer-events:none;
    z-index:0;
}
.colina{
    position:absolute;
    left:0; bottom:0; width:55%;
    z-index:0;
    pointer-events:none;
}

.perfil-contenido{
    position:relative;
    z-index:1;
    padding:38px 34px 30px;
}

/* --- header --- */
.perfil-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid rgba(63,84,67,.18);
    padding-bottom:26px;
    margin-bottom:34px;
}
.header-izq{display:flex; align-items:center; gap:14px;}
.logo-circulo{
    width:56px; height:56px;
    border-radius:50%;
    border:1.5px solid var(--acento);
    display:flex; align-items:center; justify-content:center;
    font-size:26px;
    flex-shrink:0;
    overflow:hidden;
    background:rgba(255,255,255,.35);
}
.logo-circulo img{
    width:100%; height:100%;
    object-fit:cover;
}
.header-nombre h1{
    font-family:var(--fuente-titulo, 'Playfair Display', serif);
    font-weight:600;
    font-size:22px;
    margin:0 0 4px;
    color:#26311f;
}
.header-nombre p{
    margin:0;
    font-size:10.5px;
    letter-spacing:2px;
    color:var(--gris);
    font-weight:600;
}
.header-der{
    text-align:right;
    font-family:var(--fuente-titulo, 'Playfair Display', serif);
    font-style:italic;
    font-size:14px;
    color:#26311f;
    white-space:nowrap;
    padding-top:6px;
}
.header-der span{
    display:block;
    width:34px;
    height:1px;
    background:var(--acento);
    margin:8px 0 0 auto;
}

/* --- hero --- */
.hero{
    text-align:center;
    margin-bottom:34px;
}
.hero h2{
    font-family:var(--fuente-titulo, 'Playfair Display', serif);
    font-style:italic;
    font-weight:500;
    font-size:28px;
    line-height:1.35;
    color:#26311f;
    margin:0 0 18px;
}
.hero p{
    font-size:14.5px;
    line-height:1.7;
    color:#5b5b52;
    max-width:420px;
    margin:0 auto;
}

/* --- botones de redes --- */
.lista-redes{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:40px;
}
.boton-red{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 20px;
    border-radius:var(--radio-boton, 50px);
    text-decoration:none;
    color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:transform .15s ease, box-shadow .15s ease;
}
.boton-red:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.13);
}
.icono-red{
    width:40px; height:40px;
    border-radius:var(--radio-icono, 50%);
    background:rgba(255,255,255,.22);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.icono-red svg{color:#fff;}
.texto-red{flex:1; min-width:0;}
.texto-red strong{
    display:block;
    font-size:16px;
    font-weight:600;
    line-height:1.25;
}
.texto-red span{
    display:block;
    font-size:12px;
    opacity:.85;
    font-weight:400;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.flecha-red{
    width:30px; height:30px;
    border-radius:var(--radio-icono, 50%);
    background:rgba(255,255,255,.22);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.flecha-red svg{width:14px; height:14px; color:#fff;}

/* --- footer --- */
.perfil-footer{
    text-align:center;
    position:relative;
    z-index:1;
    padding-bottom:16px;
}
.frase-cursiva{
    font-family:'Sacramento',cursive;
    font-size:30px;
    color:#26311f;
    margin:0 0 10px;
}
.separador{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:18px;
}
.separador span{
    width:60px; height:1px;
    background:rgba(63,84,67,.4);
}
.separador .corazon{width:auto; height:auto; color:var(--acento); font-size:13px;}
.tags-footer{
    font-size:10.5px;
    letter-spacing:2px;
    color:var(--gris);
    font-weight:600;
    margin:0;
}

@media (max-width:480px){
    .perfil-contenido{padding:28px 22px 24px;}
    .hero h2{font-size:23px;}
    .header-nombre h1{font-size:19px;}
}

/* ============================================================
   Estilos del panel de administración
   ============================================================ */
body.admin-body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#f2f1ec;
    color:#2c2c28;
}
.admin-topbar{
    background:#2f3b30;
    color:#fff;
    padding:14px 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.admin-topbar a{color:#fff; text-decoration:none; font-size:14px; opacity:.85;}
.admin-topbar a:hover{opacity:1;}
.admin-topbar .marca{font-weight:600; font-size:16px;}
.admin-wrap{max-width:960px; margin:0 auto; padding:30px 20px 60px;}
.admin-card{
    background:#fff;
    border-radius:14px;
    padding:26px 28px;
    box-shadow:0 3px 14px rgba(0,0,0,.06);
    margin-bottom:24px;
}
.admin-card h2{margin-top:0; font-size:19px;}
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.admin-grid.full{grid-template-columns:1fr;}
label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#4a4a42;}
input[type=text], input[type=url], input[type=password], input[type=color], textarea, select{
    width:100%;
    padding:10px 12px;
    border:1px solid #dcd9cf;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    margin-bottom:14px;
    background:#fbfaf7;
}
textarea{resize:vertical; min-height:70px;}
.btn{
    display:inline-block;
    background:var(--acento);
    color:#fff;
    border:none;
    padding:11px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
}
.btn:hover{opacity:.9;}
.btn.secundario{background:#e4e1d6; color:#3a3a34;}
.btn.peligro{background:#b03a3a;}
.btn.pequeno{padding:6px 14px; font-size:12.5px;}
table.admin-tabla{width:100%; border-collapse:collapse; margin-top:6px;}
table.admin-tabla th, table.admin-tabla td{
    text-align:left; padding:10px 8px; border-bottom:1px solid #edece5; font-size:14px;
}
.badge{
    display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge.on{background:#e1f3e6; color:#1e7a3d;}
.badge.off{background:#f4e1e1; color:#a33131;}
.url-copiar{
    display:flex; align-items:center; gap:8px; background:#fbfaf7; border:1px solid #dcd9cf;
    border-radius:8px; padding:8px 12px; font-size:13px; margin-bottom:14px; word-break:break-all;
}
.acciones-fila{display:flex; gap:8px; flex-wrap:wrap;}
.login-box{
    max-width:360px; margin:80px auto; background:#fff; padding:34px; border-radius:14px;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.login-box h1{font-size:20px; text-align:center; margin-bottom:22px;}
.alerta{
    background:#fdecec; color:#a33131; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px;
}
.alerta.ok{background:#e6f6ea; color:#1e7a3d;}
.icono-preview{width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff;}