.perfil {padding:0;margin: 0 auto; max-width: var(--container-2);}
.perfil-top {height:100px;background:#555;}
.perfil-summary {display:flex;width: 100%;justify-content:center;}
.perfil-avatar {position:relative;margin-top:-70px;border-radius:9999px;}
.perfil-summary img {height:100px;width:100px;object-fit:cover;border:solid 3px white}
.perfil-avatar img {border-radius:9999px;}
.perfil-setting {display: flex; height: 40px; border-radius: var(--step-2-5); margin: 0 auto; padding: 0 var(--step-5); font-size: var(--step-3-4); align-items: center; text-decoration: none; border: var(--border-width) var(--border-style) var(--border-color-default);}
.perfil-biografia {max-width: 350px; text-align: center; margin: 0 auto;}
.perfil-data {display:flex;flex-direction:column;gap:var(--step-2);margin: var(--step-4) auto;align-items: center;}
.wrap-edit .perfil-data {gap:var(--step-6);}
.perfil-info {display:flex;width: 100%;gap:var(--step-1);align-items:center;column-gap:var(--step-2);flex-direction: column;}
.wrap-edit .perfil-info {gap:var(--step-4);}
.perfil-name h2 {margin:0;padding:0;}

/* ---------------------------------- PERFIL ------------------------------------------ */
.perfil-rango {flex-shrink:0;white-space:nowrap;margin:auto 0;}
.perfil-slug {flex-basis:100%;}
.perfil-item {display:flex;gap:var(--step-1);color:var(--neutral-600);align-items:center;}

.perfil-user-content {display: flex; flex-direction: column}
.perfil-tabs {display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--body-background); border-bottom: var(--border-width) var(--border-style) var(--neutral-border-subtle); user-select: none; z-index: 3}

.perfil-tabs .tab-item {flex: 1; display: flex; justify-content: center; align-items: center; height: 44px; cursor: pointer; color: var(--neutral-500); transition: color 0.3s ease, border-bottom 0.3s ease;}
.perfil-tabs .tab-item svg {fill: currentColor; width: var(--step-5); height: var(--step-5);}
.perfil-tabs .tab-item.active {color: var(--neutral-700); font-weight: 600; border-bottom: 3px solid var(--neutral-700);}

.tab-comments {padding:0;display:flex;gap:var(--step-4);flex-direction:column;}
.rss-button {display: flex; align-items: center; padding: var(--step-1) 0; gap: var(--step-1); justify-content: flex-end;}
.rss-button svg {height: var(--step-3);}
.comment-posts-list,.comment-posts-page {display:flex;flex-direction:column;gap:var(--step-4);max-width:35rem;margin:0 auto;}
.user-comment, .user-saved {display:flex;flex-direction:column;padding:var(--step-4);border-bottom:var(--border-width) var(--border-style) var(--neutral-border-subtle);}
.comment-datapost {display: flex; align-items: center; gap: var(--step-2);font-size: var(--step-3-4);}
.comment-header .post-main {display:flex;gap:var(--step-4);align-items:center;text-decoration:none;color:inherit;}
.comment-header .post-thumbnail {flex:1;}
.comment-header .post-thumbnail img {width:100%;height:auto;object-fit:cover;border-radius:var(--step-2-5);}
.comment-header .post-body {flex:4;}
.comment-header .post-header h2 {font-size:var(--step-4);font-weight:600;color:var(--neutral-700);margin:0;}
.perfil .comment-body {border-left:4px solid var(--border-color-default);padding-left:var(--step-4);color:inherit;margin: var(--step-4) 0;}
.comment-body p {margin:0;line-height:1.3;letter-spacing:.01em;}
.comment-post-preview {display:flex;gap:var(--step-2);align-items:center;font-size:var(--step-3-4);color:var(--neutral-600);}
.comment-link {color:inherit;text-decoration:none;}
.comment-link::before {content:"/ ";opacity:.6;margin-right:var(--step-2);}
.comments-inicio {display:flex;flex-direction:column;gap:var(--step-4);}
.perfil-user-content .comment-post-count {display:inline-flex;align-items: center;}
.comment-preview .post-main {display:flex;align-items:center;text-decoration:none;color:inherit;}
.comment-preview .post-thumbnail {flex:0 0 100px;height:60px;margin-right:10px;overflow:hidden;border-radius:var(--step-1);}
.comment-preview .post-thumbnail img {width:100%;height:100%;object-fit:cover;display:block;}
.comment-preview .post-body {flex:1;}
.comment-preview .post-header h2 {font-family: var(--font-family-aux); font-weight: 500; font-size: var(--step-4); margin: 0; line-height: 1.2;}

.user-saved .comment-preview {position: relative}
.user-saved .post-thumbnail {flex: 0 0 140px;height:75px;}
.user-saved .save-post {position: absolute; padding: 0 var(--step-2-5) var(--step-2) var(--step-1); border-bottom-right-radius: 40%; border-top: none; border-left: none; background-color: var(--neutral-100);}
.user-saved .save-post svg {width: 1.1rem;height: 1.1rem}

.notify-item {border-bottom:var(--border-width) var(--border-style) var(--border-color-default); opacity:0.6; transition:opacity 0.3s ease-in-out;}
.notify-item.unread {opacity:1;}
.tab-item.blob {position:relative;}
.tab-item.blob::after {display:none; content:""; position:absolute; width:var(--step-1); height:var(--step-1); top:20%; margin-left:var(--step-8); background-color:red; border-radius:50%;}
.tab-item.blob.has-unread-notifications::after {display:block;}
.notify-bar {display:flex; font-size:var(--step-3-4); gap:var(--step-4); padding:var(--step-2) var(--step-4); justify-content:center; background-color:var(--neutral-200)}
.notify-count {font-weight:bold;}
.notify-mark-all {cursor:pointer; text-decoration:underline;}

.notify-item:last-child {border-bottom:none;}
.notify-link {display:flex;align-items:center;gap:var(--step-4);padding:var(--step-4);text-decoration:none;color:inherit;}
.notify-link img {width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.notify-content {flex:1;font:var(--step-0)/1.5 var(--font-sans);color:var(--neutral-900);}
.notify-name {font-weight:600;color:var(--primary);}
.notify-time {margin-left:var(--step-2);font-size:var(--step-3-4);color:var(--neutral-500);}

/* ---------------------------------- EDITAR ------------------------------------------ */
.editar {max-width: var(--container-2);padding: 0; margin: auto var(--step-4)}
.avatar-edit {padding:0;border:none;background:none;}
.avatar-edit svg {position:absolute;top:50%;left:50%;height:var(--step-9);width:var(--step-9);background-color:rgba(15, 20, 25, 0.66);color:white;transform:translate(-50%, -50%);border-radius:100%;padding:var(--step-2);}
.input-wrapper {position:relative;width:100%;font-size:var(--step-4);margin-bottom:var(--step-6);}
.input-wrapper input, .input-wrapper textarea, .input-wrapper select {width:100%;padding:1.7rem var(--step-4) .6rem;border:var(--border-width) var(--border-style) var(--border-color-default);border-radius:var(--step-2-5);font-size:var(--step-4);appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.input-wrapper input:focus, .input-wrapper textarea:focus, .input-wrapper select:focus {border-color:var(--accent-200);outline:none;}
.input-wrapper label.floating-label {position:absolute;top:var(--step-4);left:var(--step-4);font-size:var(--step-4);color:var(--neutral-500);padding:0 var(--step-1);transition:all .2s ease-in-out;pointer-events:none;}
.input-wrapper input:focus + label, .input-wrapper input:not(:placeholder-shown) + label, .input-wrapper textarea:focus + label, .input-wrapper textarea:not(:placeholder-shown) + label, .input-wrapper select:focus + label, .input-wrapper select:not([value=""]) + label {top:var(--step-2);left:var(--step-3);font-size:var(--step-3);}
.input-wrapper textarea {min-height:125px;line-height:1.4;font-family:var(--font-family-aux), var(--font-family-base), sans-serif;resize:none;}
.guardar-perfil {display:flex;align-items:center;padding:var(--step-8) 0;justify-content:center;gap:var(--step-4);}
.guardar-perfil input {color:var(--neutral-100);padding:var(--step-2) var(--step-4);background-color:var(--neutral-900);border:none;border-radius:var(--step-2-5);cursor:pointer;}
.guardar-perfil input:hover {background-color:var(--neutral-600);}
.perfil-link-ajustes{display:inline-block;border-bottom:solid 1px var(--neutral-400);margin:1em auto;text-align:center;}
.perfil-link-ajustes-wrapper{text-align:center;}
.guardar-perfil a {text-decoration:none;border-bottom:solid 1px var(--neutral-400);color:var(--neutral-900);}
.select-options {display:flex;align-items:center;gap:var(--step-4);margin-bottom:var(--step-6);}
.select-options span {font-size:var(--step-3-4);color:var(--neutral-400);min-width:80px;}
.input-wrapper select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23777' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat:no-repeat;
  background-position:right var(--step-4) center;
  background-size:var(--step-4);
}

/* ---------------------------------- FOR YOU PAGE ------------------------------------------ */
.fyp-container{display:flex;flex-direction:column;gap:var(--step-4);margin:var(--step-4)}
.fyp-block{display:flex;flex-direction:column;gap:var(--step-4)}
.fyp-block-title{font-size:var(--step-5);padding:var(--step-2) 0;border-bottom:1px solid var(--border-color-default)}
.fyp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--step-4)}
.fyp-item article{width:100%}
.fyp-item article a{display:flex;gap:var(--step-3);align-items:flex-start;text-decoration:none;color:inherit}
.fyp-item img{width:6rem;height:6rem;object-fit:cover;border-radius:var(--radius-md)}
.fyp-item-content{flex:1}
.fyp-tag{display:inline-block;font-size:var(--step-3);background:var(--neutral-200);color:var(--neutral-700);padding:0 var(--step-2);border-radius:var(--radius-sm)}
.fyp-item h3 {max-width: 400px;font-family: var(--font-family-aux); font-size: var(--step-3-4); font-weight: 500; line-height: 1.3; color: var(--neutral-900); margin: var(--step-1) 0 var(--step-2);}
.fyp-item p{margin:0;font-size:var(--step-3);line-height:1.4;color:var(--neutral-600)}
.fyp-footer{text-align:center;margin-top:var(--step-16)}
.btn{display:inline-block;background:var(--neutral-900);color:var(--neutral-100);padding:var(--step-2) var(--step-6);border-radius:var(--radius-sm);text-decoration:none;font-size:var(--step-3)}
.fyp-avisos .fyp-item article a{flex-direction:column;align-items:flex-start;background:var(--neutral-200);border:1px solid var(--neutral-300);padding:var(--step-3);border-radius:var(--radius-md)}
.fyp-avisos .fyp-item img{display:none}
.fyp-avisos .fyp-item-content{margin:0}
.fyp-avisos .fyp-item h3{margin:var(--step-1) 0 var(--step-2)}
.fyp-avisos .fyp-item p{font-size:var(--step-3);color:var(--neutral-700)}
@media (max-width:319px){.fyp-item article a{flex-direction:column;align-items:flex-start}.fyp-item img{width:100%;height:auto}}

/* ---------------------------------- SUELTOS  ------------------------------------------ */
.empty-state {display:flex;justify-content:center;align-items:center;flex-direction:column;padding:var(--step-4);max-width:500px;margin:auto;gap:var(--step-2);text-align:center;}
.empty-state-message {padding:var(--step-6);text-align:center;max-width:500px;width:100%}
.empty-state h2 {font-size:var(--step-6);font-weight:600;color:var(--neutral-700);margin:var(--step-4)}
.empty-state p {font-size:var(--step-4);color:var(--neutral-600);line-height:var(--line-height-base);margin-bottom:var(--step-7)}
.btn-warning {cursor:pointer;text-decoration: underline;}
.btn-warning:hover {background:var(--neutral-600)}
.empty-state svg {width:var(--step-8);height:var(--step-8)}