/* ==========================================
   CREATORVERSE 3.0 — ESTILO GLOBAL
   ========================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at top left, #1b1030 0, transparent 55%),
        radial-gradient(circle at bottom right, #020617 0, #02010a 65%);
    color: #f9fafb;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Secciones generales */
.cv-section {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 20px;
}

.cv-section h2,
.cv-section h3,
.cv-section h4 {
    margin: 0 0 10px;
}

/* ==========================================
   HEADER
   ========================================== */

.cv-header {
    background: #020617dd;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(148,163,184,.4);
    position: sticky;
    top: 0;
    z-index: 50;
}

.cv-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cv-logo {
    font-size: 20px;
    font-weight: 700;
    color: #ff4fd8;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cv-nav a {
    margin-left: 18px;
    color: #e5e7eb;
    font-size: 14px;
    opacity: .8;
    position: relative;
}

.cv-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,#ff4fd8,#8b5cff);
    transition: width .18s ease;
}

.cv-nav a:hover {
    opacity: 1;
}

.cv-nav a:hover::after {
    width: 100%;
}


/* ==========================================
   BANNER PRINCIPAL (HOME + PERFIL)
   ========================================== */

.cv-banner {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cv-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.5);
    transform: scale(1.05);
}

.cv-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

/* Avatar grande */
.cv-avatar-big {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ff4fd8;
    box-shadow: 0 0 25px #ff4fd866;
}

/* Títulos banner */
.cv-title {
    font-size: 32px;
    font-weight: 700;
    margin-top: 12px;
}

.cv-sub {
    font-size: 14px;
    opacity: .8;
    margin-bottom: 18px;
}

/* ==========================================
   BOTONES CREATORVERSE
   ========================================== */

.cv-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.cv-btn-main,
.cv-btn-sec,
.cv-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

/* BOTÓN PRINCIPAL (rosa/morado) */
.cv-btn-main {
    background: linear-gradient(135deg, #ff4fd8, #8b5cff);
    color: #fff;
    box-shadow: 0 14px 35px rgba(139,92,255,.7);
}

.cv-btn-main:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(139,92,255,.9);
}

/* BOTÓN SECUNDARIO (borde morado) */
.cv-btn-sec {
    background: transparent;
    border: 1px solid #8b5cff;
    color: #8b5cff;
}

.cv-btn-sec:hover {
    background: rgba(139,92,255,.14);
}

/* BOTÓN GHOST (gris) */
.cv-btn-ghost {
    background: transparent;
    border: 1px solid rgba(148,163,184,.6);
    color: #e5e7eb;
}

.cv-btn-ghost:hover {
    background: rgba(15,23,42,.9);
}

/* ==========================================
   STATS PERFIL (debajo del banner)
   ========================================== */

.cv-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 6px;
    font-size: 13px;
}

.cv-stats div {
    opacity: .85;
}

.cv-stats strong {
    display: block;
    font-size: 16px;
    color: #ff4fd8;
}

/* ==========================================
   AUTENTICACIÓN (LOGIN / REGISTER)
   ========================================== */

.cv-auth-container {
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}

.cv-auth-box {
    width: 100%;
    max-width: 420px;
    padding: 22px 20px 24px;
    background: rgba(15,23,42,.85);
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.4);
    box-shadow: 0 20px 45px rgba(2,6,23,.9);
}

.cv-auth-box h2 {
    margin: 0 0 12px;
    font-size: 22px;
}

.cv-auth-box form {
    margin-top: 10px;
}

.cv-auth-box label {
    display: block;
    font-size: 13px;
    margin: 10px 0 4px;
    color: #cbd5f5;
}

.cv-auth-box input[type="email"],
.cv-auth-box input[type="password"],
.cv-auth-box input[type="text"] {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #f9fafb;
    font-size: 14px;
}

.cv-auth-box input:focus {
    outline: none;
    border-color: #ff4fd8;
}

.cv-auth-error {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(248,113,113,.7);
    color: #fecaca;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 10px;
}

.cv-auth-success {
    background: rgba(22,163,74,.1);
    border: 1px solid rgba(22,163,74,.7);
    color: #bbf7d0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 10px;
}

.cv-auth-link {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
    opacity: .85;
}

.cv-auth-link a {
    color: #ff4fd8;
}

/* ==========================================
   FEED (feed.php + posts en perfil)
   ========================================== */

.cv-post {
    background: rgba(15,23,42,.95);
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.4);
    padding: 12px 12px 12px;
    margin-bottom: 14px;
    box-shadow: 0 14px 28px rgba(15,23,42,.9);
}

.cv-post-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.cv-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(148,163,184,.7);
}

.cv-post-date {
    font-size: 11px;
    opacity: .7;
}

.cv-post-text {
    margin: 6px 0 8px;
    font-size: 14px;
    line-height: 1.4;
}

.cv-post-img {
    width: 100%;
    border-radius: 10px;
    margin-top: 8px;
    object-fit: cover;
}

/* ==========================================
   PREMIUM (viejo sistema .cv-premium-*)
   ========================================== */

.cv-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.cv-premium-card {
    background: radial-gradient(circle at top, rgba(248,113,255,.14), transparent 60%),
                #020617;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.5);
    box-shadow: 0 16px 34px rgba(15,23,42,.95);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cv-premium-thumb {
    position: relative;
    width: 100%;
    padding-top: 70%;
    background-size: cover;
    background-position: center;
}

/* BLUR cuando no está comprado */
.cv-blur {
    filter: blur(7px) brightness(.8);
}

.cv-premium-lock {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #020617cc;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    box-shadow: 0 0 0 1px rgba(248,250,252,.6);
}

.cv-premium-info {
    padding: 10px 11px 12px;
    font-size: 14px;
}

.cv-premium-info h3,
.cv-premium-info h4 {
    margin: 0 0 5px;
    font-size: 15px;
}

.cv-premium-price {
    color: #fbbf24;
    font-size: 13px;
    margin-bottom: 8px;
}

.cv-premium-owned {
    color: #4ade80;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ==========================================
   MENSAJES (messages.php)
   ========================================== */

.cv-msg-box {
    background: rgba(15,23,42,.95);
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.5);
    padding: 14px 14px 16px;
    margin-bottom: 24px;
    box-shadow: 0 18px 38px rgba(15,23,42,.95);
}

.cv-msg-box h3 {
    margin: 0 0 8px;
}

.cv-msg-input {
    width: 100%;
    min-height: 90px;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #f9fafb;
    padding: 8px 10px;
    resize: vertical;
}

.cv-msg-input:focus {
    outline: none;
    border-color: #ff4fd8;
}

.cv-msg-item {
    background: rgba(15,23,42,.95);
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.4);
    padding: 10px 11px 9px;
    margin-bottom: 10px;
    font-size: 14px;
    box-shadow: 0 12px 28px rgba(15,23,42,.9);
}

.cv-msg-item p {
    margin: 3px 0 4px;
}

.cv-msg-date {
    font-size: 11px;
    opacity: .7;
}

/* ==========================================
   NOTIFICACIONES (notifications.php)
   ========================================== */

.cv-notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(15,23,42,.98);
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.5);
    padding: 9px 11px;
    margin-bottom: 10px;
    font-size: 13px;
    box-shadow: 0 12px 28px rgba(15,23,42,.95);
}

.cv-notif-read {
    opacity: .7;
}

.cv-notif-icon {
    width: 22px;
    flex-shrink: 0;
    font-size: 17px;
    text-align: center;
}

.cv-notif-text p {
    margin: 0 0 4px;
}

.cv-notif-date {
    font-size: 11px;
    opacity: .65;
}

/* ==========================================
   DIAMANTES (comprar_diamantes.php)
   ========================================== */

.cv-diamond-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 16px;
    margin-top: 16px;
}

.cv-diamond-card {
    background: radial-gradient(circle at top, rgba(56,189,248,.16), transparent 60%),
                #020617;
    border-radius: 16px;
    border: 1px solid rgba(56,189,248,.7);
    box-shadow: 0 16px 40px rgba(15,23,42,.95);
    padding: 14px 13px 15px;
    text-align: center;
}

.cv-diamond-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.cv-diamond-price {
    margin: 0 0 10px;
    font-weight: 600;
}

/* ==========================================
   PANEL ADMIN (panel_admin.php)
   ========================================== */

.cv-admin-form {
    background: rgba(15,23,42,.97);
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.5);
    padding: 14px 13px 16px;
    margin-bottom: 24px;
    box-shadow: 0 18px 38px rgba(15,23,42,.98);
}

.cv-admin-form label {
    display: block;
    font-size: 13px;
    margin: 10px 0 4px;
    color: #cbd5f5;
}

.cv-admin-form input[type="text"],
.cv-admin-form input[type="number"],
.cv-admin-form input[type="file"],
.cv-admin-form select,
.cv-admin-form textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #f9fafb;
    padding: 8px 10px;
    font-size: 13px;
}

.cv-admin-form textarea {
    min-height: 80px;
    resize: vertical;
}

.cv-admin-form input:focus,
.cv-admin-form select:focus,
.cv-admin-form textarea:focus {
    outline: none;
    border-color: #ff4fd8;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 900px) {
    .cv-header-inner {
        padding-inline: 14px;
    }
    .cv-section {
        padding-inline: 14px;
    }
}

@media (max-width: 700px) {
    .cv-banner {
        height: 360px;
    }
    .cv-title {
        font-size: 26px;
    }
    .cv-stats {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

@media (max-width: 520px) {
    .cv-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .cv-nav a {
        margin-left: 0;
        margin-right: 14px;
        font-size: 13px;
    }
    .cv-avatar-big {
        width: 130px;
        height: 130px;
    }
    .cv-auth-box {
        max-width: 100%;
    }
}

/* ==========================================
   PREMIUM NUEVO (premium.php – tarjetas)
   ========================================== */

.premium-categories {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.cat-btn {
    background: #1b1b33;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.cat-btn.active {
    background: linear-gradient(135deg,#ff4fd8,#9b5cff);
    color: #000;
}

.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.premium-card {
    background: #0b0b1a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
    transition: transform .2s, box-shadow .2s;
}

.premium-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,.6);
}

.premium-thumb {
    position: relative;
    aspect-ratio: 3/4;
    background: radial-gradient(circle at top left,#ff4fd8,#9b5cff,#111);
    overflow: hidden;
}

/* IMAGEN BORROSA PERO RECONOCIBLE */
.premium-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(6px);
    transform: scale(1.08);
}

.premium-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,.8);
    background: rgba(0,0,0,.25);
}

.premium-info {
    padding: 12px;
    text-align: center;
}

.premium-info h4 {
    font-size: 14px;
    margin: 6px 0;
    color: #fff;
}

.price {
    display: block;
    font-size: 13px;
    opacity: .9;
    margin-bottom: 8px;
}

.buy-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg,#ff4fd8,#9b5cff);
    color: #000;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
}

/* Premium en móvil: 2 columnas */
@media (max-width: 768px) {
    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MINIATURAS PEQUEÑAS (solo para contenido comprado) */
.cv-premium-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

.cv-premium-card-small {
    background: #0b0b1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
    padding-bottom: 10px;
}

.cv-premium-thumb-small {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

.cv-premium-info-small h4 {
    font-size: 13px;
    text-align: center;
    margin-top: 6px;
}
.post-card{
    max-width:720px;
    margin:30px auto;
    background:rgba(20,20,40,.85);
    border-radius:18px;
    padding:20px;
    box-shadow:0 0 25px rgba(255,0,255,.2);
}
.post-card textarea{
    width:100%;
    min-height:90px;
    background:#0f1225;
    border:none;
    border-radius:12px;
    padding:15px;
    color:#fff;
    resize:none;
}
.post-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
}
.file-btn{
    background:#222;
    padding:8px 14px;
    border-radius:20px;
    cursor:pointer;
    font-size:.9rem;
}
.publish-btn{
    background:linear-gradient(135deg,#ff4fd8,#7c4dff);
    border:none;
    padding:10px 22px;
    border-radius:25px;
    color:white;
    cursor:pointer;
}
.post-item{
    max-width:720px;
    margin:25px auto;
    background:rgba(10,10,25,.8);
    border-radius:16px;
    padding:18px;
}
.post-img{
    width:100%;
    border-radius:14px;
    margin-top:10px;
}
.post-footer{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    opacity:.7;
}
.like-btn{
    background:none;
    border:none;
    color:#ff7adf;
    cursor:pointer;
}
.empty-feed{
    text-align:center;
    opacity:.6;
    margin-top:20px;
}
/* ===== Facebook-like Composer ===== */
.fb-composer{
  max-width:760px;
  margin:24px auto;
  background:#1a1d2e;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.fb-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.fb-avatar{
  width:44px;height:44px;border-radius:50%;
  border:2px solid #ff4fd8;object-fit:cover;
}
.fb-textarea{
  flex:1;
  min-height:64px;
  max-height:180px;
  resize:none;
  background:#0f1225;
  color:#fff;
  border:none;
  border-radius:999px; /* pill */
  padding:14px 18px;
  outline:none;
}
.fb-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,#2b2f55,transparent);
  margin:14px 0;
}
.fb-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.fb-action{
  background:#23264a;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
}
.fb-hint{
  opacity:.6;
  font-size:.8rem;
}
.fb-publish{
  margin-left:auto;
  background:linear-gradient(135deg,#ff4fd8,#7c4dff);
  border:none;
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  cursor:pointer;
}
.fb-preview{
  position:relative;
  margin-top:12px;
}
.fb-preview img{
  width:100%;
  border-radius:14px;
}
.fb-remove{
  position:absolute;
  top:8px; right:8px;
  background:rgba(0,0,0,.6);
  border:none; color:#fff;
  border-radius:50%;
  width:28px;height:28px;
  cursor:pointer;
}
.blur {
    filter: blur(6px);
}

.blur-strong {
    filter: blur(14px);
}
/* ===== MINIATURAS COMPACTAS BIBLIOTECA ===== */
.cv-premium-grid-small{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));
    gap:8px;
}

.cv-mini-thumb{
    display:block;
    width:100%;
    aspect-ratio:3/4;
    background-size:cover;
    background-position:center;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    transition:transform .15s, box-shadow .15s;
}

.cv-mini-thumb:hover{
    transform:scale(1.05);
    box-shadow:0 4px 14px rgba(255,79,216,.6);
}