:root {
    --violeta-elite: #bb6bd9;
    --rosa-elite: #e91e63;
    --rosa-claro-elite: #f8c8dc;
}

/* --- CENTRADO Y PROPORCIÓN PERFECTA PARA REGISTRO --- */
.register-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(ellipse at 60% 20%, #f8c8dc55 0%, #121212 100%);
    z-index: 0;
}

.register-main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.register-brand {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    color: #e91e63;
    text-align: center;
    margin-bottom: 28px;
    text-shadow: 1px 2px 12px #e91e6350, 0 1px 0 #fff;
    letter-spacing: 1px;
    width: 100%;
}

.register-form-container {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 22px 28px 22px;
    border-radius: 16px;
    border: 2px solid var(--rosa-elite, #e91e63);
    background: rgba(30, 30, 30, 0.96);
    box-shadow: 0 0 18px var(--rosa-elite, #e91e63)33, 0 8px 32px var(--violeta-elite, #bb6bd9)22;
}

@media (max-width: 600px) {
    .register-main-container {
        min-height: 100vh;
        padding: 0;
    }
    .register-form-container {
        max-width: 97vw;
        padding: 14px 1vw 16px 1vw;
    }
    .register-brand {
        font-size: 2.1rem;
        margin-bottom: 15px;
    }
}

/* --- RESTO DEL CSS ORIGINAL A PARTIR DE AQUÍ --- */
/* Gradiente en fondo principal */
body::before {
    background: radial-gradient(circle at 60% 20%, var(--rosa-elite) 0%, var(--violeta-elite) 22%, var(--rosa-claro-elite) 55%, #121212 100%);
    opacity: 0.6;
    filter: blur(0.8px);
    animation: moveBg 7s ease-in-out infinite alternate;
}

/* Glassmorphism cards y popups */
.sidebar-card,
.profile-story,
.story-box,
.register-form-container,
.modal-box,
.chart-container {
    background: rgba(30, 30, 30, 0.67);
    backdrop-filter: blur(7px) saturate(1.14);
    -webkit-backdrop-filter: blur(7px) saturate(1.14);
    box-shadow: 0 12px 38px var(--rosa-elite)44, 0 2px 18px #0005;
    border: 1.5px solid var(--violeta-elite);
    transition: box-shadow 0.27s, transform 0.22s, background 0.21s;
}

.sidebar-card:hover,
.profile-story:hover,
.story-box:hover,
.register-form-container:hover,
.modal-box:hover,
.chart-container:hover {
    background: rgba(30, 30, 30, 0.81);
    box-shadow: 0 0 32px var(--rosa-elite), 0 8px 36px var(--violeta-elite)70;
    transform: scale(1.023);
}

/* Gradiente en botones principales */
.login-form button,
.register-form-container .btn-success,
.ver-historia-btn,
.delete-confirm-btn,
.delete-cancel-btn,
.profile-btn,
.profile-btn-save,
#report-modal button[type="submit"],
#contactModal .btn {
    background: linear-gradient(90deg, var(--rosa-elite) 67%, var(--violeta-elite) 100%);
    box-shadow: 0 0 12px var(--rosa-elite)55;
    color: #fff;
    border: none;
    transition: background 0.23s, box-shadow 0.27s, transform 0.19s;
}

.login-form button:hover,
.register-form-container .btn-success:hover,
.ver-historia-btn:hover,
.delete-confirm-btn:hover,
.delete-cancel-btn:hover,
.profile-btn:hover,
.profile-btn-save:hover,
#report-modal button[type="submit"]:hover,
#contactModal .btn:hover {
    background: linear-gradient(90deg, var(--rosa-elite) 40%, var(--violeta-elite) 90%);
    box-shadow: 0 0 20px var(--rosa-elite), 0 0 12px var(--violeta-elite), 0 6px 26px var(--rosa-claro-elite)20;
    color: #fff;
    transform: scale(1.07);
}

/* Iconos e indicadores con violeta en hover */
.fa, .fas, .far, .fal, .fad, .fab,
.notification-bell,
.story-reactions .reaction-btn {
    transition: color 0.18s, box-shadow 0.19s, transform 0.17s;
}
.fa:hover, .fas:hover, .far:hover, .fal:hover, .fad:hover, .fab:hover,
.notification-bell:hover,
.story-reactions .reaction-btn:hover {
    color: var(--violeta-elite) !important;
    box-shadow: 0 0 16px var(--violeta-elite)55;
    transform: scale(1.13);
}

/* Neon effect en títulos y logo */
header h1 a, .register-brand, .story-title, .modal-box h3, #termsModal h3, #contactModal h3 {
    text-shadow:
      0 0 9px var(--rosa-elite),
      0 2px 17px var(--violeta-elite)33,
      0 1px 0 #fff;
    color: var(--rosa-elite);
    transition: text-shadow 0.22s;
}
header h1 a:hover, .register-brand:hover, .story-title:hover, .modal-box h3:hover {
    text-shadow:
      0 0 18px var(--rosa-elite),
      0 0 14px var(--violeta-elite),
      0 1px 0 #fff;
    color: var(--violeta-elite);
}

/* Estadísticas rápidas con violeta en hover */
.quick-stats:hover, .quick-stats.right:hover, .quick-stats.left:hover {
    color: var(--violeta-elite);
    text-shadow: 0 0 8px var(--violeta-elite)44;
    transition: color 0.19s, text-shadow 0.23s;
}

/* Tags y labels con gradiente y violeta */
.profile-story-tag,
.sidebar-card a {
    background: linear-gradient(90deg, var(--rosa-elite) 88%, var(--violeta-elite) 100%);
    color: #fff !important;
    box-shadow: 0 0 8px var(--violeta-elite)33;
    border: none;
    transition: background 0.24s, color 0.18s, box-shadow 0.21s;
}
.profile-story-tag:hover,
.sidebar-card a:hover {
    background: linear-gradient(90deg, var(--violeta-elite) 60%, var(--rosa-elite) 100%);
    color: var(--rosa-claro-elite) !important;
    box-shadow: 0 0 14px var(--violeta-elite), 0 0 7px var(--rosa-elite)33;
}

/* Popups y modals con glassmorphism y neón */
.modal-box,
#report-modal .modal-box,
#delete-modal .modal-box,
#contactModal.modal-box,
#termsModal {
    background: rgba(36, 19, 38, 0.86);
    backdrop-filter: blur(9px) saturate(1.20);
    -webkit-backdrop-filter: blur(9px) saturate(1.20);
    border: 2.5px solid var(--violeta-elite);
    box-shadow: 0 0 32px var(--rosa-elite), 0 8px 32px var(--violeta-elite)55;
}

/* Efecto de gradiente en barra de footer */
footer {
    background: linear-gradient(90deg, var(--rosa-claro-elite) 60%, var(--violeta-elite) 100%);
    color: #221b24;
    box-shadow: 0 -3px 18px var(--rosa-elite)40;
}

/* --- El resto de tu CSS global sigue aquí, línea por línea... */
/* ... (mantén todos tus estilos, animaciones, media queries, para otros componentes, login, sidebar, modals, etc. tal como lo tenías) ... */

/* Importante: NO incluyas ningún bloque con `.register-main-container`, `.register-form-container`, `.register-brand` que tenga `position: absolute`, `width: 581px` o reglas duplicadas/conflictivas. Solo el bloque de registro del inicio debe existir. */

:root {
    --violeta-elite: #bb6bd9;
    --rosa-elite: #e91e63;
    --rosa-claro-elite: #f8c8dc;
  }
  
  /* Gradiente en fondo principal */
  body::before {
      background: radial-gradient(circle at 60% 20%, var(--rosa-elite) 0%, var(--violeta-elite) 22%, var(--rosa-claro-elite) 55%, #121212 100%);
      opacity: 0.6;
      filter: blur(0.8px);
      animation: moveBg 7s ease-in-out infinite alternate;
  }
  
  /* Glassmorphism cards y popups */
  .sidebar-card,
  .profile-story,
  .story-box,
  .register-form-container,
  .modal-box,
  .chart-container {
      background: rgba(30, 30, 30, 0.67);
      backdrop-filter: blur(7px) saturate(1.14);
      -webkit-backdrop-filter: blur(7px) saturate(1.14);
      box-shadow: 0 12px 38px var(--rosa-elite)44, 0 2px 18px #0005;
      border: 1.5px solid var(--violeta-elite);
      transition: box-shadow 0.27s, transform 0.22s, background 0.21s;
  }
  
  .sidebar-card:hover,
  .profile-story:hover,
  .story-box:hover,
  .register-form-container:hover,
  .modal-box:hover,
  .chart-container:hover {
      background: rgba(30, 30, 30, 0.81);
      box-shadow: 0 0 32px var(--rosa-elite), 0 8px 36px var(--violeta-elite)70;
      transform: scale(1.023);
  }
  
  /* Gradiente en botones principales */
  .login-form button,
  .register-form-container .btn-success,
  .ver-historia-btn,
  .delete-confirm-btn,
  .delete-cancel-btn,
  .profile-btn,
  .profile-btn-save,
  #report-modal button[type="submit"],
  #contactModal .btn {
      background: linear-gradient(90deg, var(--rosa-elite) 67%, var(--violeta-elite) 100%);
      box-shadow: 0 0 12px var(--rosa-elite)55;
      color: #fff;
      border: none;
      transition: background 0.23s, box-shadow 0.27s, transform 0.19s;
  }
  
  .login-form button:hover,
  .register-form-container .btn-success:hover,
  .ver-historia-btn:hover,
  .delete-confirm-btn:hover,
  .delete-cancel-btn:hover,
  .profile-btn:hover,
  .profile-btn-save:hover,
  #report-modal button[type="submit"]:hover,
  #contactModal .btn:hover {
      background: linear-gradient(90deg, var(--rosa-elite) 40%, var(--violeta-elite) 90%);
      box-shadow: 0 0 20px var(--rosa-elite), 0 0 12px var(--violeta-elite), 0 6px 26px var(--rosa-claro-elite)20;
      color: #fff;
      transform: scale(1.07);
  }
  
  /* Iconos e indicadores con violeta en hover */
  .fa, .fas, .far, .fal, .fad, .fab,
  .notification-bell,
  .story-reactions .reaction-btn {
      transition: color 0.18s, box-shadow 0.19s, transform 0.17s;
  }
  .fa:hover, .fas:hover, .far:hover, .fal:hover, .fad:hover, .fab:hover,
  .notification-bell:hover,
  .story-reactions .reaction-btn:hover {
      color: var(--violeta-elite) !important;
      box-shadow: 0 0 16px var(--violeta-elite)55;
      transform: scale(1.13);
  }
  
  /* Neon effect en títulos y logo */
  header h1 a, .register-brand, .story-title, .modal-box h3, #termsModal h3, #contactModal h3 {
      text-shadow:
        0 0 9px var(--rosa-elite),
        0 2px 17px var(--violeta-elite)33,
        0 1px 0 #fff;
      color: var(--rosa-elite);
      transition: text-shadow 0.22s;
  }
  header h1 a:hover, .register-brand:hover, .story-title:hover, .modal-box h3:hover {
      text-shadow:
        0 0 18px var(--rosa-elite),
        0 0 14px var(--violeta-elite),
        0 1px 0 #fff;
      color: var(--violeta-elite);
  }
  
  /* Estadísticas rápidas con violeta en hover */
  .quick-stats:hover, .quick-stats.right:hover, .quick-stats.left:hover {
      color: var(--violeta-elite);
      text-shadow: 0 0 8px var(--violeta-elite)44;
      transition: color 0.19s, text-shadow 0.23s;
  }
  
  /* Tags y labels con gradiente y violeta */
  .profile-story-tag,
  .sidebar-card a {
      background: linear-gradient(90deg, var(--rosa-elite) 88%, var(--violeta-elite) 100%);
      color: #fff !important;
      box-shadow: 0 0 8px var(--violeta-elite)33;
      border: none;
      transition: background 0.24s, color 0.18s, box-shadow 0.21s;
  }
  .profile-story-tag:hover,
  .sidebar-card a:hover {
      background: linear-gradient(90deg, var(--violeta-elite) 60%, var(--rosa-elite) 100%);
      color: var(--rosa-claro-elite) !important;
      box-shadow: 0 0 14px var(--violeta-elite), 0 0 7px var(--rosa-elite)33;
  }
  
  /* Popups y modals con glassmorphism y neón */
  .modal-box,
  #report-modal .modal-box,
  #delete-modal .modal-box,
  #contactModal.modal-box,
  #termsModal {
      background: rgba(36, 19, 38, 0.86);
      backdrop-filter: blur(9px) saturate(1.20);
      -webkit-backdrop-filter: blur(9px) saturate(1.20);
      border: 2.5px solid var(--violeta-elite);
      box-shadow: 0 0 32px var(--rosa-elite), 0 8px 32px var(--violeta-elite)55;
  }
  
  /* Efecto de gradiente en barra de footer */
  footer {
      background: linear-gradient(90deg, var(--rosa-claro-elite) 60%, var(--violeta-elite) 100%);
      color: #221b24;
      box-shadow: 0 -3px 18px var(--rosa-elite)40;
  }
  
  /* Animación glass en hover de cards */
  .sidebar-card:hover, .profile-story:hover, .story-box:hover, .register-form-container:hover, .modal-box:hover, .chart-container:hover {
      background: rgba(36, 19, 38, 0.93);
      box-shadow: 0 0 38px var(--violeta-elite), 0 0 22px var(--rosa-elite)55;
      border-color: var(--rosa-elite);
  }

body {
    /* Tu background original se mantiene */
    position: relative;
}
body::before {
    content: "";
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(circle at 60% 20%, #e91e6322 0%, #f8c8dc44 20%, #121212 100%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
    animation: moveBg 7s ease-in-out infinite alternate;
    filter: blur(0.7px);
}
@keyframes moveBg {
    0% { background-position: 60% 20%; }
    100% { background-position: 40% 80%; }
}

/* --- Animación logo --- */
header h1 a, .register-brand {
    animation: logoFadeIn 1.5s cubic-bezier(.25,.8,.25,1) forwards;
    opacity: 0;
    transform: translateY(-45px) scale(0.95);
}
@keyframes logoFadeIn {
    from { opacity: 0; transform: translateY(-45px) scale(0.95);}
    60% { opacity: 1; transform: translateY(6px) scale(1.09);}
    to { opacity: 1; transform: translateY(0) scale(1);}
}
header h1 a:hover, .register-brand:hover {
    animation: logoPulse 0.50s;
}
@keyframes logoPulse {
    0% { transform: scale(1);}
    50% { transform: scale(1.08);}
    100% { transform: scale(1);}
}

/* --- Botones: animación y escala suave --- */
.login-form button,
.register-form-container .btn-success,
.ver-historia-btn,
.delete-confirm-btn,
.delete-cancel-btn,
.story-actions button,
.profile-btn,
.profile-btn-save,
.profile-edit-btn,
.profile-delete-btn,
#report-modal button[type="submit"],
#contactModal .btn {
    transition: background 0.3s, color 0.3s, transform 0.18s, box-shadow 0.23s;
    will-change: transform, box-shadow;
}
.login-form button:hover,
.register-form-container .btn-success:hover,
.ver-historia-btn:hover,
.story-actions button:hover,
.profile-btn:hover,
.profile-btn-save:hover,
.profile-edit-btn:hover,
.profile-delete-btn:hover,
.delete-confirm-btn:hover,
.delete-cancel-btn:hover,
#report-modal button[type="submit"]:hover,
#contactModal .btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 26px #e91e6340;
}

/* --- Animación entrada suave para formularios --- */
.login-form, .register-form-container, .modal-box, .profile-info-form, .profile-story, .story-box {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    animation: fadeInForm 1.1s cubic-bezier(.31,.89,.42,1.14) forwards;
    animation-delay: 0.18s;
}
@keyframes fadeInForm {
    from { opacity: 0; transform: translateY(28px) scale(0.98);}
    70% { opacity: 1; transform: translateY(-4px) scale(1.01);}
    to { opacity: 1; transform: translateY(0) scale(1);}
}

/* --- Animaciones en links y cards --- */
a, .sidebar-card, .profile-story-tag, .story-reactions .reaction-btn {
    transition: color 0.19s, background 0.19s, box-shadow 0.21s, transform 0.17s;
}
a:hover, .sidebar-card:hover, .profile-story-tag:hover, .story-reactions .reaction-btn:hover {
    color: #ad1457 !important;
    box-shadow: 0 4px 22px #e91e632a;
    transform: scale(1.04);
}

/* --- Shadow y escala en los cards --- */
.sidebar-card, .profile-story, .story-box, .register-form-container, .modal-box {
    transition: box-shadow 0.27s, transform 0.22s;
}
.sidebar-card:hover, .profile-story:hover, .story-box:hover, .register-form-container:hover, .modal-box:hover {
    box-shadow: 0 12px 38px #e91e6344, 0 2px 18px #0005;
    transform: scale(1.017);
}

/* --- Efecto de entrada para toast --- */
#toast {
    animation: toastFadeIn 0.9s;
}
@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(32px);}
    to { opacity: 1; transform: translateY(0);}
}

/* --- Popups y modales animados --- */
#report-modal .modal-box,
#delete-modal .modal-box,
#contactModal.modal-box {
    animation: modalAppear 0.43s cubic-bezier(.36,.61,.23,1.09) forwards;
    opacity: 0;
    transform: scale(0.95) translateY(24px);
}
@keyframes modalAppear {
    0% { opacity: 0; transform: scale(0.95) translateY(24px);}
    80% { opacity: 1; transform: scale(1.03) translateY(-5px);}
    100% { opacity: 1; transform: scale(1) translateY(0);}
}

/* --- Preparado para FontAwesome y Chart.js --- */
/* Solo clases CSS, no se modifica HTML */
.fa, .fas, .far, .fal, .fad, .fab {
    transition: color 0.18s, transform 0.18s;
}
.fa:hover, .fas:hover, .far:hover, .fal:hover, .fad:hover, .fab:hover {
    color: #e91e63 !important;
    transform: scale(1.13);
}

/* --- Chart.js container --- */
.chart-container {
    width: 100%;
    max-width: 580px;
    margin: 36px auto;
    background: rgba(30,30,30,0.94);
    border-radius: 18px;
    box-shadow: 0 6px 22px #e91e6322;
    padding: 28px 34px 28px 34px;
    animation: fadeInForm 1.1s cubic-bezier(.31,.89,.42,1.14) forwards;
}

@media (max-width: 600px) {
    .chart-container {
        padding: 10px 0 18px 0;
        max-width: 97vw;
    }
}

/* --- Animaciones para estadísticas rápidas --- */
.quick-stats {
    animation: fadeStats 1.3s cubic-bezier(.17,.89,.37,1.14) forwards;
    opacity: 0;
    transform: scale(0.97) translateY(20px);
}
@keyframes fadeStats {
    from { opacity: 0; transform: scale(0.97) translateY(20px);}
    60% { opacity: 1; transform: scale(1.04) translateY(-2px);}
    to { opacity: 1; transform: scale(1) translateY(0);}
}

body {
    font-family: 'Quicksand', Arial, sans-serif;
    margin: -83px;
    padding: 0;
    box-sizing: border-box;
    background-color: #121212;
    color: #f5f5f5;
    transition: background 0.3s, color 0.3s;
    padding-top: 60px;
    padding-bottom: 50px;
}
body.dark-mode {
    background: #18171a !important;
    color: #f6d6e8 !important;
}
body.dark-mode .container,
body.dark-mode .profile-main {
    background: #221b24;
}
body.dark-mode input,
body.dark-mode textarea {
    background: #18171a !important;
    color: #f6d6e8 !important;
    border-color: #e91e63;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #b87ca1;
}
.theme-toggle-btn {
    position: absolute;
    right: 180px;
    top: 102px;
    background: #fff0;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #e91e63;
    z-index: 110;
    transition: color 0.2s;
}
.theme-toggle-btn:hover {
    color: #ad1457;
}
@media (max-width: 600px) {
    .theme-toggle-btn { top: 16px; right: 8px; }
}

header {
    position: fixed;
    width: 98vw;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #f8c8dc;
    color: #121212;
    padding: 0px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header h1 a {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5em;
    color: #e91e63;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 1px 2px 12px #e91e6350, 0 1px 0 #fff;
}
header h1 a:hover { color: #d81b60; }

header .user-info {
    position: absolute;
    right: 35px;
    top: 78%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    z-index: 110;
}
.avatar,
.user-avatar,
.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    background: #e91e63;
    color: #fff;
    font-size: 1.15em;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    margin-right: 8px;
    vertical-align: middle;
}
.avatar img,
.user-avatar img,
.comment-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.avatar svg,
.user-avatar svg,
.comment-avatar svg {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}
.notification-bell {
    font-size: 1.5em;
    color: #e91e63;
    cursor: pointer;
    margin-left: -22px;
    position: fixed;
    left: 1248px;
    top: 103px;
    z-index: 120;
    vertical-align: middle;
    transition: color 0.17s;
    display: inline-block;
}
.notification-bell:hover {
    color: #ad1457;
}
.notification-bell .notification-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e91e63;
    color: #fff;
    border-radius: 50%;
    font-size: 0.72em;
    font-weight: bold;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 6px #0003;
    border: 2px solid #fff;
    pointer-events: none;
}

header .user-info span {
    font-weight: bold;
    color: #121212;
}
header .user-info .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    background: #fff;
    border-radius: 7px;
    min-width: 150px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    z-index: 200;
    flex-direction: column;
    padding: 0;
}
header .user-info .dropdown-content a {
    color: #e91e63;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #eee;
    font-weight: 500;
    transition: background 0.18s;
}
header .user-info .dropdown-content a:last-child { border-bottom: none; }
header .user-info .dropdown-content a:hover { background: #f8c8dc; }

#toast {
    visibility: hidden;
    min-width: 220px;
    max-width: 80vw;
    margin-left: -110px;
    background-color: #e91e63;
    color: #fff;
    text-align: center;
    border-radius: 7px;
    padding: 15px 18px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 40px;
    font-size: 1.08rem;
    font-family: 'Quicksand', Arial, sans-serif;
    box-shadow: 0 8px 32px #0003;
    transition: visibility 0.3s, opacity 0.3s;
    opacity: 0;
}
#toast.show {
    visibility: visible;
    opacity: 1;
}
.sidebar-home {
    position: fixed;
    top: 144px;
    left: -7px;
    width: 265px;
    /* ... */
    height: calc(100vh - 60px);
    /* ... */
    overflow: visible;
}
.sidebar-card {
    background: rgba(30, 30, 30, 0.96);
    border-radius: 27px;
    box-shadow: 0 3px 18px #0009;
    padding: 42px 17px 24px 26px;
    color: #e91e63;
}
.sidebar-card h3,
.sidebar-card h4 {
    color: #e91e63;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 1.13em;
    letter-spacing: 0.01em;
}
.sidebar-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-card li {
    margin-bottom: 12px;
    color: #ffe3ef;
    font-weight: 500;
}
.sidebar-card a {
    color: #e91e63;
    background: rgba(248,200,220,0.13);
    padding: 4px 13px;
    border-radius: 7px;
    text-decoration: none;
}
.container.center-screen {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 10;
}
.container.right {
    margin-left: auto !important;
    margin-right: 30px !important;
    left: unset !important;
    right: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}
.container.left {
    margin-left: 30px !important;
    margin-right: auto !important;
    left: 0 !important;
    right: unset !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}
.container.center-h {
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}
.container.center-v {
    position: fixed !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10;
}
.container {
    margin-left: 197px;
    margin-top: 0px;
    margin-bottom: 40px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.23);
    box-sizing: border-box;
}
.page-center-content {
    width: 100%;
    max-width: 730px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
    min-width: 0;
}

@media (max-width: 1100px) {
    header {
        position: static;
        padding-top: 0;
    }
    body {
        padding-top: 0;
    }
    .sidebar-home {
        position: static;
        width: 100vw;
        height: auto;
        box-shadow: none;
        flex-direction: row;
        gap: 12vw;
        margin-bottom: 24px;
        top: 0;
        left: 0;
        overflow: visible;
    }
    .container {
        margin-left: 0;
        padding: 22px 2vw 22px 2vw;
        width: 100%;
        border-radius: 0;
    }
    .page-center-content {
        max-width: 97vw;
        padding: 0;
    }
}
@media (max-width: 600px) {
    .container {
        padding: 10px 0 18px 0;
        margin-top: 0;
        min-height: unset;
    }
    .page-center-content {
        max-width: 100vw;
        gap: 16px;
    }
}
#report-modal,
#delete-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #33111a88;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#delete-modal { z-index: 10000; }

.modal-box {
    background: #121212;
    color: #222;
    border-radius: 18px;
    padding: 30px 28px 22px 28px;
    min-width: 290px;
    max-width: 92vw;
    box-shadow: 0 8px 40px #e91e6344;
    position: relative;
    border: 2.5px solid #e91e63;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: modalFadeIn 0.23s;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-box h3 {
    margin-top: 2px;
    color: #e91e63;
    font-family: 'Quicksand', cursive;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 13px;
    font-size: 1.3em;
    text-align: center;
}
.modal-box .close-btn {
    position: absolute;
    right: 17px;
    top: 11px;
    font-size: 1.7em;
    background: none;
    border: none;
    color: #e91e63;
    cursor: pointer;
    line-height: 1;
}
#report-modal label,
#report-modal select,
#report-modal textarea {
    font-family: inherit;
}
#report-modal label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: #e91e63;
}
#report-modal select,
#report-modal textarea {
    width: 100%;
    border-radius: 7px;
    padding: 10px 9px;
    font-size: 1em;
    border: 1.5px solid #f8c8dc;
    background: #f8c8dc22;
    color: #e91e63;
    margin-bottom: 14px;
    resize: vertical;
}
#report-modal textarea {
    min-height: 48px;
    margin-bottom: 16px;
}
#report-modal button[type="submit"] {
    background: linear-gradient(90deg, #e91e63 80%, #e91e63 100%);
    color: #fff;
    padding: 10px 0;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    font-size: 1.07em;
    box-shadow: 0 2px 10px #e91e6320;
    margin-top: 6px;
}

.delete-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 17px;
}
.delete-confirm-btn {
    background: linear-gradient(90deg, #e91e63 80%, #e91e63 100%);
    color: #fff;
    padding: 9px 33px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1.07em;
}
.delete-cancel-btn {
    background: none;
    color: #e91e63;
    border: 1.5px solid #e91e63;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1.07em;
}
body.dark-mode #report-modal .modal-box,
body.dark-mode #delete-modal .modal-box {
    background: #221b24;
    color: #f6d6e8;
    border-color: #e91e63;
}
body.dark-mode #report-modal select,
body.dark-mode #report-modal textarea {
    background: #18171a;
    color: #f6d6e8;
    border-color: #e91e63;
}
body.dark-mode #report-modal button[type="submit"] {
    background: linear-gradient(90deg,#e91e63 80%,#b87ca1 100%);
    color: #fff;
}
body.dark-mode .delete-modal-actions .delete-confirm-btn {
    background: linear-gradient(90deg,#e91e63 80%,#b87ca1 100%);
    color: #fff;
}
body.dark-mode .delete-modal-actions .delete-cancel-btn {
    background: none;
    color: #e91e63;
    border: 1.5px solid #e91e63;
}
.profile-pic {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #f8c8dc;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px #0002;
    display: block;
    background: #fff;
}
footer {
    width: 100vw;
    background: #f8c8dc;
    color: #221b24;
    text-align: center;
    padding: 0px 0 0px 0;
    font-size: 0.80em;
    letter-spacing: 0.01em;
    font-family: 'Quicksand', Arial, sans-serif;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 -3px 18px #e91e6340;
    z-index: 101;
}
footer a {
    color: #221b24;
    text-decoration: underline;
    font-weight: 600;
}
footer a:hover {
    color: #ff0048;
    text-decoration: none;
}
body.dark-mode footer {
    background: #b87ca1;
    color: #221b24;
}
.story {
    margin-bottom: 32px;
}
.quick-stats {
    margin-bottom: 0px;
    color: #f8c8dc;
    font-size: 1.30em;
    font-weight: 500;
    position: relative;
    display: block;
}
.quick-stats.center-h {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
}
.quick-stats.right {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
    text-align: right !important;
}
.quick-stats.left {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
    text-align: left !important;
}
.quick-stats.top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}
.quick-stats.bottom {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}
.story-title {
    color: #e91e63;
    font-size: 1.22em;
    font-weight: bold;
    margin-bottom: 55px;
}

.story-description {
    color: #f8c8dc;
    font-size: 1.02em;
    margin-bottom: 70px;
}

.ver-historia-btn {
    display: inline-block;
    background: #e91e63;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1em;
    padding: 7px 19px;
    box-shadow: 0 2px 10px #e91e6320;
    text-decoration: none;
    margin-bottom: 15px;
}
.story-actions button,
.report-btn,
.edit-story-btn,
.delete-story-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #e91e63 !important;
    font-size: 1.15em;
    border-radius: 6px;
    padding: 3px 7px;
    margin: 0 2px;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-actions button:hover,
.report-btn:hover,
.edit-story-btn:hover,
.delete-story-btn:hover {
    background: #f8c8dc44 !important;
    color: #ad1457 !important;
}
.stories > h3 {
    margin-bottom: 44px !important;
    font-size: 1.42em !important;
}
body.page-index .container {
    max-width: 730px;
    margin: 78px auto;
}
body.page-story-detail .container {
    max-width: 800px;
    margin: 0 auto;
}
body.page-story-detail .story-box {
    max-width: 700px;
    margin: 0 auto;
    background: #181818;
    border-radius: 18px;
    padding: 32px 36px 26px 36px;
    margin-top: 91px;
    box-shadow: 0 4px 24px #e91e6320;
}
body.page-story-detail .story-title {
    font-size: 2em;
    color: #e91e63;
    font-weight: bold;
    margin-bottom: 10px;
}
body.page-story-detail .story-meta {
    color: #f8c8dc;
    font-size: 1.1em;
    margin-bottom: 15px;
}
body.page-story-detail .story-content {
    font-size: 1.15em;
    color: #fff;
    margin-bottom: 20px;
}
body.page-story-detail a {
    color: #e91e63;
    text-decoration: underline;
}
body.page-profile .container {
    max-width: 600px;
    margin: 172px auto;
}
body.page-about .container {
    max-width: 800px;
    margin: 200px auto;
}
body.page-login .container {
    max-width: 420px;
    margin: 30px auto 0 auto;
}
body.page-profile input,
body.page-profile textarea,
body.page-profile select {
    background: #181818 !important;
    color: #f5f5f5 !important;
    border: 1.5px solid #f8c8dc !important;
    border-radius: 7px !important;
    font-size: 1em;
    padding: 10px 14px;
    box-shadow: none !important;
    outline: none !important;
    transition: background 0.16s, border 0.16s;
}
body.page-profile input:focus,
body.page-profile textarea:focus,
body.page-profile select:focus {
    border-color: #e91e63 !important;
}

body.page-profile input[type="file"] {
    background: none !important;
    color: #e91e63 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 1em;
}
body.page-profile input[type="file"]::file-selector-button {
    background: #f8c8dc !important;
    color: #121212 !important;
    border: none !important;
    border-radius: 7px !important;
    font-weight: 600;
    font-size: 1em;
    padding: 8px 16px !important;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.17s, color 0.17s;
}
body.page-profile input[type="file"]::file-selector-button:hover {
    background: #e91e63 !important;
    color: #fff !important;
}
body.page-profile .profile-btn,
body.page-profile .profile-btn-save,
body.page-profile input[type="submit"] {
    background: #e91e63 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold;
    box-shadow: 0 2px 10px #e91e6320 !important;
    font-size: 1em !important;
    padding: 9px 19px !important;
    margin-top: 8px;
    transition: background 0.16s, color 0.16s;
}
body.page-profile .profile-btn:hover,
body.page-profile .profile-btn-save:hover,
body.page-profile input[type="submit"]:hover {
    background: #f8c8dc !important;
    color: #e91e63 !important;
}
body.page-profile .profile-info-form label {
    display: block;
    margin-top: 14px;
    margin-bottom: 5px;
    color: #f8c8dc;
    font-weight: 500;
}
body.page-profile .profile-info-form input:not([type="file"]),
body.page-profile .profile-info-form textarea,
body.page-profile .profile-info-form select {
    width: 100%;
    margin-bottom: 8px;
}
body.page-profile .profile-info-form button {
    margin-top: 14px;
    width: 100%;
}
body.page-profile .profile-info-form,
body.page-profile .profile-pic-form,
body.page-profile .profile-header {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
body.page-profile .profile-edit-btn,
body.page-profile .profile-delete-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #e91e63 !important;
    font-size: 1.22em !important;
    border-radius: 50%;
    padding: 4px !important;
    margin: 0 2px !important;
    cursor: pointer;
    transition: color 0.18s;
    outline: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body.page-profile .profile-edit-btn:hover,
body.page-profile .profile-delete-btn:hover {
    color: #ad1457 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

body.page-profile .profile-story {
    background: #181818;
    border-radius: 14px;
    padding: 22px 26px 14px 26px;
    margin-bottom: 18px;
    box-shadow: 0 3px 16px #e91e6311;
}
body.page-profile .profile-story-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.98em;
    color: #f8c8dc;
}
body.page-profile .profile-story-tags {
    margin-top: 8px;
}
body.page-profile .profile-story-tag {
    background: #f8c8dc33;
    color: #e91e63;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 0.96em;
    margin-right: 6px;
    margin-bottom: 3px;
    display: inline-block;
}
.story-reactions .reaction-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
    padding: 2px 7px;
    margin: 0 2px;
    font-size: 1.18em;
    cursor: pointer;
    outline: none;
    transition: transform 0.14s;
    border-radius: 99px;
}
.story-reactions .reaction-btn:hover,
.story-reactions .reaction-btn:focus {
    background: rgba(233,30,99, 0.08);
    transform: scale(1.14);
}
.story-reactions .reaction-count {
    font-size: 0.93em;
    margin-left: 3px;
    color: #e91e63;
    font-weight: 600;
}
.story-reactions {
    display: flex;
    gap: 2px;
    align-items: center;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    margin: 10px 0 4px 0;
}
body.page-login .container {
    max-width: 600px; 
    margin: 30px auto 0 auto;
}

.login-form {
    background: rgba(30,30,30,0.98);
    border-radius: 16px;
    box-shadow: 0 8px 32px #0005;
    padding: 40px 38px 32px 38px; 
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.row.justify-content-center.w-100 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .login-form {
        padding: 18px 6vw 20px 6vw;
        max-width: 98vw;
    }
    .row.justify-content-center.w-100 {
        max-width: 100vw;
    }
    body.page-login .container {
        max-width: 99vw;
        padding-left: 0;
        padding-right: 0;
    }
}

.register-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(ellipse at 60% 20%, #f8c8dc55 0%, #121212 100%);
    z-index: 0;
}


}

.register-brand {
    font-family: 'Great Vibes', cursive;
    font-size: 5.3rem;
    color: #e91e63;
    text-align: center;
    margin-bottom: -3px;
    text-shadow: 1px 2px 12px #e91e6350, 0 1px 0 #fff;
    letter-spacing: 1px;
}

.register-form-container {
    background: rgba(30,30,30,0.98);
    border-radius: 16px;
    box-shadow: 0 8px 32px #0005;
    padding: 8px 51px 28px 24px;
    position: relative;
    z-index: 2;
}

.register-form-container h2 {
    color: #f8c8dc;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin-bottom: 26px;
}

.register-form-container label {
    color: #f8c8dc;
    font-weight: 500;
    font-size: 1.02rem;
}

.register-form-container .form-control {
    background: #232323;
    border: 1.5px solid #f8c8dc;
    color: #f5f5f5;
    border-radius: 7px;
    padding: 10px 14px;
    width: 100%;
    font-size: 1rem;
}

.register-form-container .form-control:focus {
    border: 1.5px solid #e91e63;
    background: #181818;
}

.register-form-container .btn-success {
    background: #f8c8dc;
    color: #121212;
    border: none;
    font-weight: bold;
    border-radius: 7px;
    font-size: 1.14rem;
    box-shadow: 0 2px 10px #e91e6320;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 8px;
    transition: background 0.16s;
    width: 100%;
}

.register-form-container .btn-success:hover {
    background: #e91e63;
    color: #fff;
}

.register-form-container .alert {
    font-size: 1rem;
    border-radius: 7px;
    margin-bottom: 18px;
}

.register-form-container p,
.register-form-container a {
    color: #f8c8dc;
}
.register-form-container a:hover {
    color: #e91e63;
    text-decoration: underline;
}

.register-form-container .mb-3 {
    margin-bottom: 22px;
}

#termsOverlay {
    display: none;
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    background: #221b24cc;
    z-index: 1201;
}

#termsModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 92vw;
    max-width: 440px;
    max-height: 82vh;
    transform: translate(-50%, -50%);
    background: #232323;
    z-index: 1300;
    border-radius: 16px;
    box-shadow: 0 8px 30px #e91e6340;
    padding: 22px 20px 18px 20px;
    overflow: auto;
}

#termsModal h3 {
    color: #e91e63;
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 12px;
}
.terms-content {
    max-height: 52vh;
    overflow-y: auto;
    font-size: 1.05em;
    color: #e91e63;
    background: #232323;
    padding: 13px 0px;
    border-radius: 7px;
    text-align: left;
}

#termsModal .close-btn {
    position: absolute;
    right: 16px; top: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #e91e63;
    cursor: pointer;
    z-index: 2;
}
#termsModal .close-btn:hover {
    color: #b87ca1;
}
.terms-content p {
    margin-bottom: 14px;
    line-height: 1.6;
}
.contact-link {
    color: #e91e63;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s;
}
.contact-link:hover {
    color: #b87ca1;
}

#contactOverlay {
    display: none;
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    background: #221b24cc;
    z-index: 1201;
}

#contactModal.modal-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 92vw;
    max-width: 440px;
    max-height: 82vh;
    transform: translate(-50%, -50%);
    background: #232323;
    z-index: 1300;
    border-radius: 16px;
    box-shadow: 0 8px 30px #f8c8dc;
    padding: 30px 40px 21px 20px;
    overflow: auto;
}

#contactModal h3 {
    color: #e91e63;
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 12px;
}
#contactModal .form-group {
    margin-bottom: 13px;
}
#contactModal label {
    font-weight: 500;
    color: #e91e63;
    margin-bottom: 2px;
    display: block;
}
#contactModal input,
#contactModal textarea {
    width: 100%;
    border: 1px solid #e91e63;
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 1em;
    margin-bottom: 2px;
    background: #232323;
    color: #e91e63;
}

#contactModal textarea {
    resize: vertical;
    min-height: 70px;
}

#contactModal .btn {
    background: #e91e63;
    color: #232323;
    border: none;
    padding: 9px 13px;
    border-radius: 7px;
    font-size: 1.08em;
    transition: background 0.18s;
    margin-top: 4px;
}
#contactModal .btn:hover {
    background: #b87ca1;
}

#contactModal .close-btn {
    position: absolute;
    right: 16px; top: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #e91e63;
    cursor: pointer;
    z-index: 2;
}
#contactModal .close-btn:hover {
    color: #b87ca1;
}

#contactModal .alert {
    border-radius: 6px;
    padding: 7px 12px;
    margin-top: 10px;
    font-size: 1em;
    text-align: center;
    display: none;
}
#contactModal .alert-success {
    background: #d6ffd9;
    color: #249340;
    border: 1px solid #b9f0be;
}
#contactModal .alert-danger {
    background: #ffd6e7;
    color: #d32f2f;
    border: 1px solid #e4b9be;
}