/* ---------------- COMENTARIOS: MOBILE FIRST ---------------- */
#comments {
  --comment-avatar-size:40px;
  --reply-avatar-size:28px;
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:calc(100dvh - var(--step-14));
  margin:var(--step-8) 0 0;
  padding:0 0 calc(var(--step-20) + var(--safe-area-bottom));
  scroll-margin-top:76px;
}

.container-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--step-3);
  padding:var(--step-4) 0;
  border-bottom:var(--border-width) var(--border-style) var(--border-color-default);
}
.container-header h2 {font-size:var(--step-5);font-weight:600;letter-spacing:.02em;}
.comment-container {margin:0;}
.comment-status-message {
  display:flex;
  align-items:center;
  justify-content:center;
  margin:var(--step-3) 0;
  padding:var(--step-3);
  background:var(--neutral-200);
  color:var(--neutral-600);
  font-size:var(--step-3);
  text-align:center;
  text-transform:uppercase;
}
.comment-status-message:empty {display:none;}

/* Compositor */
.comment-composer,.reply-composer {
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:var(--step-2);
  width:100%;
  margin-top:auto;
  padding:var(--step-4) 0 calc(var(--step-4) + var(--safe-area-bottom));
  border-top:var(--border-width) var(--border-style) var(--border-color-default);
  background:var(--body-background);
}
.reply-composer {display:none;border:0;}
.reply-composer.active {display:flex;}
.comment-avatar {flex:0 0 auto;line-height:0;}
.comment-avatar img {display:block;width:var(--comment-avatar-size);height:var(--comment-avatar-size);border-radius:50%;object-fit:cover;}
.composer-box {display:flex;flex:1;min-width:0;min-height:calc(var(--comment-avatar-size) + var(--step-1));flex-direction:column;padding:var(--step-2) var(--step-3);border:var(--border-width) var(--border-style) var(--neutral-400);border-radius:var(--step-3);}
.composer-box textarea {width:100%;min-height:1.4em;margin:var(--step-1) 0 var(--step-2);line-height:1.4;resize:none;overflow:hidden;outline:0;box-shadow:none;}
.composer-footer {display:none;align-items:center;justify-content:space-between;font-size:12px;color:var(--neutral-500);}
.composer-footer button {display:grid;place-items:center;width:36px;height:36px;margin-bottom:.3rem;border-radius:50%;background:var(--neutral-400);cursor:not-allowed;transition:background .2s 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:var(--step-3);right:var(--step-3);z-index:2;width:var(--step-11);height:var(--step-11);place-items:center;border-radius:50%;background:var(--neutral-200);color:var(--neutral-800);cursor:pointer;}
.close-fullscreen svg {width:var(--step-6);height:var(--step-6);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.close-fullscreen:focus-visible {outline:2px solid var(--focus-ring);outline-offset:2px;}
html.comment-composer-open,body.comment-composer-open {overflow:hidden;overscroll-behavior:none;}
body.comment-composer-open::before {content:"";position:fixed;inset:0;z-index:9999;background:color-mix(in srgb,var(--neutral-900) 14%,transparent);backdrop-filter:blur(var(--step-2));-webkit-backdrop-filter:blur(var(--step-2));}
.comment-composer.fullscreen-mode,.reply-composer.fullscreen-mode {
  position:fixed;
  top:var(--composer-viewport-top,0px);
  right:0;
  bottom:auto;
  left:0;
  z-index:10000;
  width:100%;
  height:var(--composer-viewport-height,100dvh);
  max-height:var(--composer-viewport-height,100dvh);
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:var(--step-12) var(--step-4) max(var(--step-4),var(--safe-area-bottom));
  border:0;
  background:var(--neutral-100);
  background:color-mix(in srgb,var(--neutral-100) 94%,transparent);
  backdrop-filter:blur(var(--step-1));
  -webkit-backdrop-filter:blur(var(--step-1));
  overflow:hidden;
}
.comment-composer.fullscreen-mode .composer-box,.reply-composer.fullscreen-mode .composer-box {flex:1 1 auto;min-height:0;}
.comment-composer.fullscreen-mode textarea,.reply-composer.fullscreen-mode textarea {flex:1;min-height:0;padding:var(--step-2);font-size:var(--step-4);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.comment-composer.fullscreen-mode .composer-footer,.reply-composer.fullscreen-mode .composer-footer {display:flex;flex:0 0 auto;}
.comment-composer.fullscreen-mode .close-fullscreen,.reply-composer.fullscreen-mode .close-fullscreen {display:grid;}

/* Comentario */
.comment-item {margin:0;border-bottom:var(--border-width) var(--border-style) var(--border-color-default);}
.comment-content {position:relative;padding:var(--step-4) 0;}
.comment-header {display:grid;grid-template-columns:var(--comment-avatar-size) minmax(0,1fr) auto;align-items:center;gap:var(--step-2);}
.comment-meta {display:flex;min-width:0;flex-direction:column;line-height:1.3;}
.comment-author {display:flex;min-width:0;gap:var(--step-1);font:700 var(--step-4)/1.2 var(--font-family-aux);}
.comment-author a {overflow-wrap:anywhere;}
.rank {color:var(--neutral-500);font-size:var(--step-2-5);text-transform:uppercase;}
.comment-body,.comment-footer {margin-left:calc(var(--comment-avatar-size) + var(--step-2));}
.comment-body {margin-top:var(--step-1);overflow-wrap:anywhere;}
.comment-item .comment-body p {margin:0 0 var(--step-2);letter-spacing:.3px;}
.comment-actions {display:flex;align-items:center;gap:var(--step-3);margin-top:var(--step-1);color:var(--neutral-600);font-size:var(--step-3-4);}
.comment-actions button {display:flex;align-items:center;gap:var(--step-1);cursor:pointer;}
.comment-like-button {margin-left:auto;}
.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;}

/* Menú contextual */
.comment-options {position:relative;}
.comment-options>button {cursor:pointer;}
.comment-options>button svg {fill:var(--neutral-800);}
.comment-menu {position:absolute;top:100%;right:0;z-index:4;display:flex;width:180px;flex-direction:column;gap:var(--step-2);padding:var(--step-4);border:var(--border-width) var(--border-style) var(--neutral-300);background:var(--neutral-100);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.comment-menu li {display:flex;align-items:center;gap:var(--step-2);cursor:pointer;}

/* Respuestas: una sola sangría estable, sin márgenes acumulativos de desktop */
.replies {margin:var(--step-2) 0 0 calc(var(--comment-avatar-size) + var(--step-2));}
.reply {margin:0;padding-left:var(--step-3);border-left:var(--border-width) var(--border-style) var(--neutral-300);}
.reply .comment-content {padding:var(--step-3) 0;}
.reply .comment-header {grid-template-columns:var(--reply-avatar-size) minmax(0,1fr) auto;}
.reply .comment-avatar img {width:var(--reply-avatar-size);height:var(--reply-avatar-size);}
.reply .comment-author {font-size:var(--step-3-4);}
.reply .comment-body,.reply .comment-footer {margin-left:calc(var(--reply-avatar-size) + var(--step-2));}
.comment-replies-actions {display:flex;align-items:center;margin:var(--step-3) 0 0 calc(var(--comment-avatar-size) + var(--step-2));color:var(--neutral-600);font-size:var(--step-3-4);}
.comment-replies-actions::before {content:"";width:24px;height:1px;margin-right:var(--step-2);background:var(--neutral-500);}
.comment-load-replies-button,.comment-hide-replies-button {display:flex;align-items:center;gap:var(--step-1);cursor:pointer;}
.comment-load-replies-button {margin-right:var(--step-3);}
.comment-hide-replies-button svg {transform:rotate(180deg);}

/* Selector */
.select-wrapper {position:relative;display:inline-flex;align-items:center;border:var(--border-width) var(--border-style) var(--neutral-300);border-radius:var(--step-1);background:var(--neutral-200);}
.dropdown-toggle {display:flex;align-items:center;justify-content:space-between;gap:var(--step-4);padding:var(--step-2) var(--step-3);color:var(--neutral-700);font-size:var(--step-3-4);cursor:pointer;}
.dropdown-toggle:focus-visible {outline:2px solid var(--focus-ring);outline-offset:2px;}
.select-wrapper .icon {width:var(--step-5);height:var(--step-5);fill:var(--neutral-600);pointer-events:none;}
.dropdown-menu {position:absolute;top:100%;right:0;z-index:4;display:none;width:220px;min-width:100%;margin-top:var(--step-1);padding:var(--step-1) 0;border:var(--border-width) var(--border-style) var(--neutral-300);border-radius:var(--step-1);background:var(--neutral-100);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.dropdown-menu li {padding:var(--step-2) var(--step-3);cursor:pointer;}
.dropdown-menu li:hover,.dropdown-menu li.active {background:var(--neutral-200);}
.select-wrapper.open .dropdown-menu {display:block;}

.highlight-comment {background:color-mix(in srgb,#25d366 16%,var(--body-background));animation:fadeHighlight 6s ease-out forwards;}
@keyframes fadeHighlight {to{background:transparent;}}

@media(max-width:405px){
  .container-header {align-items:flex-start;}
  .select-wrapper,.dropdown-toggle {width:100%;}
}

@media(min-width:700px){
  #comments {display:grid;min-height:0;padding-bottom:var(--step-8);grid-template-areas:"header" "status" "composer" "comments" "loadmore";}
  .container-header {grid-area:header;}
  .comment-status-message {grid-area:status;}
  .comment-composer {grid-area:composer;}
  .comment-container {grid-area:comments;}
  .load-more {grid-area:loadmore;}
  .comment-composer,.reply-composer {position:relative;bottom:auto;z-index:auto;margin-top:0;padding:var(--step-4) 0;border-top:0;}
  .composer-footer {display:flex;}
  .close-fullscreen {display:none;}
}