/* Q6.9.7-HF.1.13 — comentarios / experiencias final */

.hf113-comments-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.hf113-comment-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(82px,1fr));
  gap:10px;
  min-width:min(100%,330px);
}

.hf113-comment-stats>div{
  padding:14px 16px;
  border:1px solid rgba(218,171,64,.22);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.hf113-comment-stats strong{
  display:block;
  color:#e4b84d;
  font-size:1.4rem;
}

.hf113-comment-stats span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.55);
  font-size:.78rem;
}

.hf113-comments-layout{
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:20px;
  margin-top:20px;
  align-items:start;
}

.hf113-comment-form{
  position:sticky;
  top:18px;
  display:grid;
  gap:14px;
}

.hf113-form-top,
.hf113-row-head,
.hf113-row-foot,
.hf113-list-tools,
.hf113-save-actions,
.hf113-list-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hf113-comment-form label{
  display:grid;
  gap:7px;
}

.hf113-comment-form label>span{
  font-size:.83rem;
  color:rgba(255,255,255,.68);
}

.hf113-comment-form input,
.hf113-comment-form textarea,
.hf113-list-actions input{
  width:100%;
  box-sizing:border-box;
}

.hf113-comment-form textarea{
  resize:vertical;
  min-height:150px;
}

.hf113-char-count{
  text-align:right;
  color:rgba(255,255,255,.42);
}

.hf113-advanced{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px 14px;
}

.hf113-advanced summary{
  cursor:pointer;
  color:rgba(255,255,255,.72);
}

.hf113-advanced[open] summary{
  margin-bottom:12px;
}

.hf113-form-status{
  min-height:20px;
  font-size:.86rem;
}

.hf113-form-status[data-state="success"]{
  color:#7bd7a5;
}

.hf113-form-status[data-state="error"]{
  color:#ff9797;
}

.hf113-form-status[data-state="loading"]{
  color:#e4b84d;
}

.hf113-comment-list{
  min-width:0;
}

.hf113-list-tools{
  margin-bottom:14px;
  align-items:flex-end;
}

.hf113-list-actions{
  min-width:min(100%,360px);
}

.hf113-list-actions input{
  min-width:180px;
}

.hf113-rows{
  display:grid;
  gap:12px;
}

.hf113-row{
  margin:0!important;
}

.hf113-row-person{
  display:grid;
  gap:2px;
}

.hf113-row-person span{
  color:rgba(255,255,255,.48);
  font-size:.8rem;
}

.hf113-state{
  flex:none;
  padding:6px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
}

.hf113-state.is-live{
  color:#9cf0bc;
  border:1px solid rgba(95,210,139,.28);
  background:rgba(60,180,105,.10);
}

.hf113-state.is-draft{
  color:#e6bd58;
  border:1px solid rgba(220,172,62,.28);
  background:rgba(220,172,62,.08);
}

.hf113-row-body{
  margin:16px 0;
  color:rgba(255,255,255,.78);
  line-height:1.65;
  white-space:pre-wrap;
}

.hf113-row-foot{
  align-items:flex-end;
}

.hf113-row-foot small{
  color:rgba(255,255,255,.4);
}

.hf113-row-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.hf113-empty,
.hf113-empty-search{
  text-align:center;
  color:rgba(255,255,255,.58);
}

.hf113-experience-more{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:26px;
}

.hf113-experience-more[hidden]{
  display:none!important;
}

.hf113-more-button{
  appearance:none;
  border:1px solid rgba(218,171,64,.48);
  border-radius:999px;
  padding:11px 20px;
  background:rgba(218,171,64,.06);
  color:#e5b94e;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.hf113-more-button:hover{
  transform:translateY(-1px);
  background:rgba(218,171,64,.12);
}

.hf113-experience-more small{
  color:rgba(255,255,255,.4);
}

@media(max-width:980px){
  .hf113-comments-head,
  .hf113-list-tools{
    align-items:stretch;
    flex-direction:column;
  }

  .hf113-comments-layout{
    grid-template-columns:1fr;
  }

  .hf113-comment-form{
    position:static;
  }

  .hf113-comment-stats{
    width:100%;
  }

  .hf113-list-actions{
    width:100%;
    max-width:none;
  }
}

@media(max-width:620px){
  .hf113-comment-stats{
    grid-template-columns:1fr 1fr 1fr;
  }

  .hf113-save-actions,
  .hf113-list-actions,
  .hf113-row-foot{
    align-items:stretch;
    flex-direction:column;
  }

  .hf113-save-actions .portal-btn,
  .hf113-list-actions .portal-btn{
    width:100%;
  }

  .hf113-list-actions input{
    min-width:0;
  }

  .hf113-row-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }

  .hf113-row-actions .portal-btn{
    width:100%;
  }
}