/* ---------------- ESTILOS PARA LA SECCIÓN DE COMENTARIOS ---------------- */
/* Estos estilos controlan la apariencia del contenedor de comentarios,
   formularios de envío, botones de interacción y listados de comentarios. */

#comments {display:block;position:relative;margin:0 auto;max-width:700px;min-height:100px;padding-bottom: 10rem;}
.container-header {display:flex;align-items:center;justify-content:space-between;gap:var(--step-2);margin:0 var(--step-4);padding:var(--step-4);border-bottom:1px solid var(--neutral-200);}
.container-header h3 {margin:0;font-size:var(--step-5);font-weight:600;letter-spacing:.02em;color:var(--neutral-800);}
.comment-container {margin:var(--step-2);}
.comment-composer,.reply-composer {position:sticky;bottom:0;padding:10px;border-top:1px solid var(--neutral-300);background-color:var(--body-background);z-index:1;display:flex;align-items:center;gap:10px;}
.comment-composer.sticky,.reply-composer.sticky {left:0;right:0;width:100vw;margin-left:calc(-50vw + 50%);}

.comment-composer.fullscreen-mode,.reply-composer.fullscreen-mode {position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100dvh;z-index:10000;background:var(--neutral-100);flex-direction:column;padding:3rem var(--step-4) var(--step-4);box-sizing:border-box;justify-content:flex-start;align-items:stretch;padding-bottom:max(52px,var(--step-4))}
.composer-box textarea {height:auto;min-height:1.2em;line-height:1.2;overflow:hidden;outline:none;box-shadow:none;margin:var(--step-1) var(--step-1) var(--step-2);resize:none;}
.comment-composer.fullscreen-mode textarea,.reply-composer.fullscreen-mode textarea {flex:1;font-size:var(--step-4);padding:10px;overflow:auto;resize:none;}
.comment-composer.fullscreen-mode .composer-footer,.reply-composer.fullscreen-mode .composer-footer {display:flex;}


.comment-avatar img {border-radius:50%;width:40px;height:40px;object-fit:cover;}
.composer-box {flex:1;border:1px solid var(--neutral-400);border-radius:var(--step-3);padding:5px 10px;display:flex;flex-direction:column;}
.composer-footer {display:none;justify-content:space-between;align-items:center;font-size:12px;color:var(--neutral-500);}
.composer-footer button {margin-bottom: .3rem;background:var(--neutral-400);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:not-allowed;transition:background .3s ease;}
.composer-footer button.active {background:#25d366;cursor:pointer;}
.composer-footer button svg {width:23px;height:23px;fill:var(--neutral-100);}
.close-fullscreen {display:none;position:absolute;top:15px;right:15px;background:transparent;border:none;cursor:pointer;}
.comment-composer.fullscreen-mode .close-fullscreen,.reply-composer.fullscreen-mode .close-fullscreen {display:block;}
.reply-composer {display:none;border-top:none;}
.reply-composer.active {display:flex;border-top:none;}

.comment-item {margin:var(--step-2) 0;}
.comment-content {padding:var(--step-2);}
.comment-header {display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--step-2);}
.comment-meta {display:flex;flex-direction:column;line-height:1.4;}
.comment-author {font-family:Roboto;display:flex;font-weight:500;}
.rank {display:block;color:var(--neutral-500);font-size:var(--step-2-5);text-transform:uppercase;}
.replies {margin: var(--step-2) 0;}
.reply .comment-author {font-size:var(--step-3-4);}
.reply .comment-avatar img {width:28px;height:28px;}
.comment-options button {background:transparent;border:none;cursor:pointer;}
.comment-options button svg {fill:var(--neutral-800);}
.comment-menu {display:flex;flex-direction:column;position:absolute;right:var(--step-4);width:180px;gap:var(--step-2);background:var(--neutral-100);border:1px solid var(--neutral-300);padding:var(--step-4);}
.comment-menu li {display:flex;gap:var(--step-2);align-items:center;}
.comment-body {margin-top:var(--step-1);margin-bottom:var(--step-1);}
.comment-item .comment-body p {margin-bottom:var(--step-2);margin-right: var(--step-3);}
.comment-footer {display:flex;flex-direction:column;}
.comment-actions {display:flex;align-items:center;gap:var(--step-2);font-size:var(--step-4);color:var(--neutral-600);margin-top: var(--step-1)}
.comment-actions span,.comment-reply-button {margin-right:var(--step-2);}
.comment-like-button {margin-left:auto;}
.reply {margin-left:var(--step-8);}
.comment-replies-actions {display:flex;align-items:center;font-size:var(--step-4);color:var(--neutral-600); margin-top: var(--step-3);}
.comment-replies-actions:has(.comment-hide-replies-button:not(.hidden)) {margin-left:var(--step-9);}
.comment-hide-replies-button {display:flex;}
.comment-hide-replies-button svg {transform:rotate(180deg);}
.comment-replies .comment-item {margin:var(--step-4) 0;}
.comment-footer .comment-actions button {display:flex;cursor:pointer;gap:var(--step-1);align-items:center}
.comment-like-button svg,.comment-load-replies-button svg,.comment-hide-replies-button svg {width:var(--step-6);height:var(--step-6);}
.liked svg {fill:red;}
.comment-load-replies-button {display:flex;align-items:center;margin-right:var(--step-4);}
.comment-replies-actions::before {content:"";display:inline-block;width:32px;height:1px;background:var(--neutral-600);margin-right:var(--step-2);}
.comment-status-message {display:flex;font-size:var(--step-3);margin:var(--step-2) 0;text-align:center;padding:var(--step-4);background:var(--neutral-200);text-transform:uppercase;color:var(--neutral-500);align-items:center;justify-content:center;}
.select-wrapper {position:relative;display:inline-flex;align-items:center;padding:0;border:1px solid var(--neutral-300);border-radius:var(--step-1);background:var(--neutral-200);}
.dropdown-toggle {width:180px;display:flex;align-items:center;padding:var(--step-2) var(--step-4);font-size:var(--step-4);font-family:inherit;color:var(--neutral-700);cursor:pointer;justify-content:space-between;}
.dropdown-toggle:focus {outline:none;}
.select-wrapper .icon {width:var(--step-5);height:var(--step-5);pointer-events:none;fill:var(--neutral-600);}
.dropdown-menu {position:absolute;top:100%;right:0;margin:var(--step-2) auto;padding:0;background:var(--neutral-100);border:1px solid var(--neutral-300);border-radius:var(--step-1);box-shadow:0 2px 5px rgba(0,0,0,0.1);width:220px;min-width:100%;display:none;z-index:2;}
.dropdown-menu li {padding:var(--step-2) var(--step-3);cursor:pointer;transition:background .2s;}
.dropdown-menu li:hover,.dropdown-menu li.active {background:var(--neutral-200);}
.select-wrapper.open .dropdown-menu {display:block;}

.highlight-comment {background-color:#e2ffed;animation:fadeHighlight 6s ease-out forwards;}

@keyframes fadeHighlight {0%{background-color:#e2ffed}100%{background-color:transparent;}}
@media(max-width:405px){.container-header{flex-direction:column;align-items:flex-start;gap:var(--step-2);}}
@media(min-width:700px){
#comments {display:grid;grid-template-areas:"header" "comment-status-message" "composer" "container" "loadmore";}
.container-header {grid-area:header;}
.comment-composer,.reply-composer {position:relative;bottom:auto;left:auto;right:auto;width:auto;margin-left:0;border-top:none;box-shadow:none;flex-direction:row;align-items:center;justify-content:flex-start;}
.comment-container {grid-area:container;}
.load-more {grid-area:loadmore;}
.comment-status-message {grid-area:comment-status-message;}
.comment-avatar {display:block;}
.comment-body,.comment-footer {margin-left:var(--step-11);}
.comment-replies-actions {margin-left:var(--step-12);}
.reply {margin-left:var(--step-16);}
.reply .comment-replies-actions {margin-left:var(--step-16);}
.container-header,.comment-item,.comment-status-message {margin:auto var(--step-8);}
.reply .comment-body,.reply .comment-footer {margin-left:var(--step-8);}
.comment-replies-actions:has(.comment-hide-replies-button:not(.hidden)) {margin-left:var(--step-16);}
.composer-footer {display:flex;}
.comment-composer {margin:auto var(--step-8);}
.close-fullscreen {display:none;}
}