/* --- CONTENIDO EXISTENTE --- */
/* Body de la tarjeta virtual */
.nfc-card-body { font-family: Arial, sans-serif; background: #f6f6f6; margin: 0; padding: 20px; }
.nfc-card-wrapper { max-width: 420px; margin: 40px auto; background: #fff; border-radius: 12px; overflow: visible; box-shadow: 0 6px 20px rgba(0,0,0,0.08); position: relative; padding-top: 60px; }
.nfc-card-top { height: 100px; display: flex; justify-content: center; align-items: flex-end; background: #000; border-top-left-radius: 12px; border-top-right-radius: 12px; position: relative; }
.nfc-avatar { width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center; border: 6px solid #fff; margin-top: -60px; z-index: 2; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.nfc-card-main { padding: 18px 12px 24px; text-align: center; }
.nfc-name { margin: 70px 0 6px; font-size: 20px; color: #111; }
.nfc-desc { font-size: 14px; color: #666; margin-bottom: 12px; }
.nfc-buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.nfc-btn { display: inline-block; padding: 10px 18px; background: #000; color: #fff; border-radius: 30px; text-decoration: none; transition: background 0.3s; }
.nfc-btn:hover { background: #333; }

/* --- NUEVOS ESTILOS PARA ICONOS --- */
.nfc-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.nfc-social-icons .nfc-icon {
    width: 60px;
    height: 60px;
    background-color: #f0f0f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: -9999px; /* oculta texto */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s, background-color 0.3s;
}

.nfc-social-icons .nfc-icon:hover {
    transform: scale(1.1);
    background-color: #e0e0e0;
}

/* Imágenes de fondo por red social */
.nfc-social-icons .whatsapp { background-image: url('../assets/images/whatsappp.png'); }
.nfc-social-icons .telefono { background-image: url('../assets/images/telefonoo.png'); }
.nfc-social-icons .instagram { background-image: url('../assets/images/instagram.png'); }
.nfc-social-icons .linkedin { background-image: url('../assets/images/linkedin.png'); }
.nfc-social-icons .web { background-image: url('../assets/images/web.png'); }
.nfc-social-icons .google-review { background-image: url('../assets/images/google.png'); }

/* Iconos de redes sociales */
.nfc-icon {
    display: inline-block;
    margin: 6px;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f0f0f0;
    transition: background 0.3s;
}
.nfc-icon:hover {
    background: #e0e0e0;
}

/* Formularios de creación/edición */
.nfc-form-container {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.nfc-form-container label {
    display: block;
    margin-top: 10px;
    font-weight: 600;
}
.nfc-form-container input[type="text"],
.nfc-form-container textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.nfc-save-btn {
    margin-top: 12px;
    padding: 10px 16px;
    background: #111;
    color: #fff;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

/* Lista de tarjetas en perfil */
.nfc-list {
    list-style: none;
    padding-left: 0;
}
.nfc-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* Contenedor mis tarjetas */
.nfc-mis-tarjetas-container {
    max-width: 720px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.nfc-mis-tarjetas-container .nfc-list {
    text-align: left;
    display: inline-block;
}

/* Responsivo */
@media (max-width: 480px) {
    .nfc-card-wrapper { max-width: 90%; }
    .nfc-avatar { width: 100px; height: 100px; margin-top: -50px; }
    .nfc-name { margin-top: 60px; font-size: 18px; }
}