/* SenpaiLive – herramientas del chat (menú de regalos, agradecimiento automático, ranking de fans) */
.hr{max-width:860px; margin:0 auto; padding-top:8px}
.hr-back{display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; font-size:14px; font-weight:600; color:#cdb8e6; text-decoration:none}
.hr-back:hover{color:#fff}

.hr-head{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:20px; padding:24px 28px; border-radius:24px; margin-bottom:18px;
  background:linear-gradient(135deg,#2d1250,#1a0b2e 70%); border:1.5px solid rgba(230,25,115,.4); box-shadow:0 0 28px rgba(90,25,168,.3);
}
.hr-head::before{content:''; position:absolute; top:-80px; right:-50px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(230,25,115,.3),transparent 70%); pointer-events:none}
.hr-ico{position:relative; width:62px; height:62px; flex:0 0 62px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; background:linear-gradient(135deg,#e61973,#5a19a8)}
.hr-tit{position:relative; flex:1; min-width:0}
.hr-tit h1{font-size:26px; font-weight:800; margin:0 0 4px}
.hr-tit p{margin:0; font-size:14px; line-height:1.55; color:#cdb8e6}
.hr-sw{position:relative; display:flex; align-items:center; gap:12px; flex:0 0 auto}
.hr-sw .st{font-size:13px; font-weight:700; color:#cdb8e6; min-width:58px; text-align:right}

/* Interruptor */
.hr-switch{position:relative; width:54px; height:30px; flex:0 0 54px; display:inline-block; margin:0}
.hr-switch input{position:absolute; opacity:0; width:0; height:0}
.hr-switch .track{position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.18); border:1.5px solid rgba(190,140,255,.45); cursor:pointer; transition:.2s}
.hr-switch .track::before{content:''; position:absolute; left:3px; top:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.2s}
.hr-switch input:checked + .track{background:#e61973; border-color:#e61973}
.hr-switch input:checked + .track::before{transform:translateX(24px)}

.hr-card{padding:26px 28px; border-radius:22px; background:linear-gradient(180deg,#27103f,#1a0b2e); border:1.5px solid rgba(190,140,255,.25); margin-bottom:18px}
.hr-card h2{font-size:18px; font-weight:700; margin:0 0 4px}
.hr-card .sub{margin:0 0 16px; font-size:13.5px; color:#a98bd6; line-height:1.55}
.hr-steps{margin:0 0 4px; padding:0; list-style:none; display:grid; gap:12px}
.hr-steps li{display:flex; gap:14px; font-size:14px; line-height:1.5; color:#e8dcf7}
.hr-steps li span{width:28px; height:28px; flex:0 0 28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#e61973; color:#fff}
.hr-warn{display:flex; gap:12px; margin-top:18px; padding:14px 16px; border-radius:16px; background:rgba(234,197,24,.1); border:1px solid rgba(234,197,24,.45); font-size:13.5px; line-height:1.55; color:#f3e7b0}
.hr-warn i{color:#eac518; margin-top:3px}

.hr-field{margin-bottom:18px}
.hr-field label, .hr-lbl{display:block; margin:0 0 7px; font-size:13px; font-weight:600; color:#e8dcf7}
.hr-field small{display:block; margin-top:6px; font-size:12.5px; color:#a98bd6; line-height:1.5}
.hr input[type=text], .hr input[type=number], .hr textarea{
  width:100%; padding:13px 14px; border-radius:12px; font-size:14.5px; color:#fff; font-family:inherit;
  background:rgba(255,255,255,.07); border:1.5px solid rgba(190,140,255,.35); outline:0; transition:.15s;
}
.hr textarea{min-height:110px; resize:vertical; line-height:1.5}
.hr input:focus, .hr textarea:focus{border-color:#e61973; box-shadow:0 0 0 3px rgba(230,25,115,.25)}
.hr input::placeholder, .hr textarea::placeholder{color:#a98bd6}
.hr-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}

.hr-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 24px; border-radius:12px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; text-decoration:none; color:#fff; transition:.15s; white-space:nowrap}
.hr-btn.pri{border:0; background:linear-gradient(135deg,#e61973,#ff3d95); box-shadow:0 0 18px rgba(230,25,115,.45)}
.hr-btn.pri:hover{filter:brightness(1.1)}
.hr-btn.alt, .btn-gris{background:transparent; border:2px solid rgba(255,255,255,.4)}
.hr-btn.alt:hover, .btn-gris:hover{background:rgba(255,255,255,.1)}
.btn-gris{display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:10px; color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer}
.hr-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px}
.hr-status{font-size:13px; color:#cdb8e6; margin-left:auto}
.hr-pill{display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:999px; font-size:12.5px; font-weight:600; background:rgba(234,197,24,.14); border:1px solid rgba(234,197,24,.5); color:#eac518}
.hr-note{margin-top:6px; padding:13px 16px; border-radius:14px; background:rgba(90,25,168,.25); border:1px solid rgba(190,140,255,.35); font-size:13.5px; color:#e8dcf7}
.hr-note b{color:#eac518}

/* Tabla del menú */
.hr table{width:100%; border-collapse:separate; border-spacing:0; margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid rgba(190,140,255,.25)}
.hr th{background:rgba(255,255,255,.08); text-align:left; font-size:12.5px; font-weight:600; color:#e8dcf7; padding:11px 14px}
.hr td{padding:10px 14px; border-top:1px solid rgba(190,140,255,.15)}
.hr td input{padding:10px 12px!important}

@media(max-width:700px){
  .hr-head{flex-wrap:wrap; padding:20px 18px; gap:14px}
  .hr-tit{flex:1 1 calc(100% - 80px)}
  .hr-sw{width:100%; justify-content:space-between; padding-top:4px; border-top:1px solid rgba(190,140,255,.25)}
  .hr-sw .st{text-align:left}
  .hr-card{padding:20px 16px}
  .hr-grid{grid-template-columns:1fr}
  .hr-actions .hr-btn{flex:1 1 100%}
  .hr-status{margin-left:0; width:100%}
  .hr table, .hr thead, .hr tbody, .hr tr, .hr td, .hr th{display:block}
  .hr thead{display:none}
  .hr tr{padding:12px; border-top:1px solid rgba(190,140,255,.2)}
  .hr td{border:0; padding:4px 0}
  .hr td input{width:100%!important}
}