/* TheGameHosting · client area pages. Base tokens and components live in custom.css. */

/* ---------- Comunes ---------- */
.tgh-area .tgh-muted{color:var(--tgh-muted2)}
.tgh-area .tgh-req{color:var(--tgh-bad)}
.tgh-area .tgh-help{display:block;font-size:13px;color:var(--tgh-muted2);margin-top:6px}
.tgh-area svg.tgh-i{width:18px;height:18px;flex:none;vertical-align:-3px}
.tgh-area .btn-link.tgh-danger-link{color:#FFB3C1;padding:0;font-weight:500;text-decoration:none}
.tgh-area .btn-link.tgh-danger-link:hover{text-decoration:underline}
.tgh-area .tgh-mt{margin-top:16px}
.tgh-area .tgh-card>h2.is-tight{margin-bottom:6px}
.tgh-stats.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tgh-area .card.tgh-stat{flex-direction:row;align-items:center;text-align:left}
.tgh-stat b{overflow-wrap:anywhere}
.tgh-area .card.tgh-svc-head{flex-direction:row}
.tgh-area .tgh-empty[hidden]{display:none}
.tgh-loc{display:inline-flex;align-items:center;gap:8px}

/* ---------- Tablas del área ---------- */
.tgh-area .table.tgh-resp td{vertical-align:middle}
.tgh-area .table .tgh-act{text-align:right;white-space:nowrap}
.tgh-area .table tr.is-unread a.rowlink::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tgh-yellow);margin-left:8px;vertical-align:2px}
.tgh-area .dataTables_wrapper .tgh-dt-top{display:flex;justify-content:flex-end;margin-bottom:12px}
.tgh-area .dataTables_wrapper .tgh-dt-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.tgh-area .dataTables_wrapper .dataTables_paginate .pagination{margin:0}
.tgh-area table.dataTable{margin:0!important}

/* ---------- Detalle de servicio ---------- */
.tgh-module{overflow-x:auto}
.tgh-module .btn{margin:4px 4px 4px 0}
/* Module output (game panel module) must fit the card: no stray horizontal scrollbar */
.tgh-module .row{margin-left:0;margin-right:0}
.tgh-module .ptero-content{min-width:0}
.tgh-module img,.tgh-module video,.tgh-module iframe,.tgh-module table{max-width:100%}
.tgh-module .nav-tabs{flex-wrap:wrap}
.tgh-module,.tgh-pay-btn{overflow-wrap:anywhere}
.tgh-module pre{white-space:pre-wrap}
.tgh-pay-btn iframe,.tgh-pay-btn table,.tgh-pay-btn input[type=image]{max-width:100%}
.tgh-pay-btn input[type=image]{height:auto}
@media (max-width:600px){ .tgh-module .row>.col{flex-basis:100%;max-width:100%} .tgh-module .row>.col+.col{margin-top:12px} }
.tgh-actions-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tgh-actions-list a{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--tgh-line);border-radius:10px;background:var(--tgh-bg2);color:#fff;font-size:14px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.tgh-actions-list a:hover,.tgh-actions-list a:focus{color:#fff;text-decoration:none}
.tgh-actions-list a.disabled{opacity:.55;pointer-events:none}
.tgh-actions-list a.active{border-color:var(--tgh-yellow);box-shadow:var(--tgh-sel-y)}
.tgh-actions-list .badge{margin-left:auto}
.tgh-actions-list i{width:18px;text-align:center;color:var(--tgh-accent)}
.tgh-addons{display:grid;gap:12px}
.tgh-addon{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:12px;padding:14px}
.tgh-addon b{color:#fff}
.tgh-addon small{display:block;color:var(--tgh-muted2)}

/* ---------- Factura (viewinvoice: página propia, sin cabecera del tema) ---------- */
.tgh-inv-bar{position:relative;z-index:2;border-bottom:1px solid var(--tgh-line);background:rgba(10,12,34,.86)}
.tgh-inv-bar .tgh-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;flex-wrap:wrap}
.tgh-inv-logo{max-width:180px;max-height:56px;margin-bottom:14px}
.tgh-inv-addr address{margin:0;font-style:normal;line-height:1.6}
.tgh-inv-notes{margin-top:20px;font-size:14px}
.tgh-inv-tx{margin-top:24px}
.tgh-inv-tx h2{font-size:17px;margin:0 0 10px}
.tgh-inv-pay .tgh-pay-btn{margin-top:16px}
.tgh-inv-pay .tgh-pay-btn img{max-width:100%;height:auto}
.tgh-inv-pay .custom-select{width:100%;max-width:none}
.tgh-inv-pay .tgh-inv-gw{margin-bottom:12px}
/* Botón crudo de una pasarela (p. ej. «Pay Now» de cripto sin clase .btn): mismo aspecto que .btn-primary */
.tgh-inv-pay .tgh-pay-btn input[type=submit]:not(.btn),.tgh-inv-pay .tgh-pay-btn input[type=button]:not(.btn),.tgh-inv-pay .tgh-pay-btn button:not(.btn):not([class*=paypal]):not([class*=stripe]){-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:100%;padding:0 22px;margin:4px 0;border-radius:10px;border:1px solid var(--tgh-yellow);background:var(--tgh-yellow);color:var(--tgh-yellow-ink);font:600 15px/1.2 var(--tgh-f-text);cursor:pointer;transition:background .15s,border-color .15s}
.tgh-inv-pay .tgh-pay-btn input[type=submit]:not(.btn):hover,.tgh-inv-pay .tgh-pay-btn input[type=submit]:not(.btn):focus,.tgh-inv-pay .tgh-pay-btn input[type=button]:not(.btn):hover,.tgh-inv-pay .tgh-pay-btn input[type=button]:not(.btn):focus,.tgh-inv-pay .tgh-pay-btn button:not(.btn):not([class*=paypal]):not([class*=stripe]):hover,.tgh-inv-pay .tgh-pay-btn button:not(.btn):not([class*=paypal]):not([class*=stripe]):focus{background:#ffcb45;border-color:#ffcb45;color:var(--tgh-yellow-ink)}
.tgh-inv-pay .tgh-pay-btn input[type=submit]:not(.btn):focus-visible,.tgh-inv-pay .tgh-pay-btn input[type=button]:not(.btn):focus-visible,.tgh-inv-pay .tgh-pay-btn button:not(.btn):focus-visible{outline:2px solid #fff;outline-offset:2px}
.tgh-inv-pay .tgh-pay-btn input[type=text],.tgh-inv-pay .tgh-pay-btn input[type=number],.tgh-inv-pay .tgh-pay-btn select:not(.custom-select):not(.form-control){max-width:100%;min-height:40px;padding:6px 10px;border-radius:8px;border:1px solid var(--tgh-line);background:var(--tgh-bg2);color:#fff}

/* ---------- Tickets ---------- */
.tgh-msg .tgh-attach a{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--tgh-line);border-radius:8px;background:var(--tgh-bg2);color:#fff}
.tgh-msg .tgh-msg-body p+p{margin-top:10px}
.tgh-msg .tgh-msg-body ol,.tgh-msg .tgh-msg-body ul{margin:10px 0 0;padding-left:20px}
.tgh-msg .tgh-msg-body pre{white-space:pre-wrap;color:var(--tgh-text)}
.tgh-msg-rate{margin-top:12px;font-size:13px;color:var(--tgh-muted2)}
.tgh-msg-rate a{color:var(--tgh-accent-light)}
/* Estrellas de valoración: twenty-one usa solo «Font Awesome 5 Pro»; si no está, la estrella regular de la Free */
.tgh-msg-rate.ticket-reply .rating span.star,.tgh-msg-rate.ticket-reply .rating-done span.star{font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:400;min-width:1em;line-height:1}
.tgh-msg-rate.ticket-reply .rating-done span.star.active:before,.tgh-msg-rate.ticket-reply .rating span.star:hover:before,.tgh-msg-rate.ticket-reply .rating span.star:hover~span.star:before{color:var(--tgh-yellow)}
.tgh-msg-rate.ticket-reply .rating-done .rated{color:var(--tgh-muted2)}
/* Editor markdown de WHMCS (mensaje de ticket): su CSS pone el cuadro blanco/gris y el tema pone el texto blanco
   → no se veía lo que se escribe. Se pinta oscuro con texto claro (el modo pantalla completa lo deja WHMCS en blanco con texto oscuro). */
.tgh .md-editor{background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:10px;overflow:hidden}
.tgh .md-editor.active{border-color:var(--tgh-accent);box-shadow:0 0 0 3px rgba(110,123,255,.25)}
.tgh .md-editor>.md-header,.tgh .md-editor .md-footer{background:var(--tgh-surface);color:var(--tgh-muted2)}
/* theme.min.css de twenty-one lo fuerza con !important (fondo #fff y bordes #ddd): hace falta !important aquí también */
.tgh .md-editor>textarea.md-input,.tgh .md-editor>textarea.md-input:focus{background-color:var(--tgh-bg2)!important;color:var(--tgh-text);caret-color:#fff;padding:12px 14px!important;border-top:1px solid var(--tgh-line)!important;border-bottom:1px solid var(--tgh-line)!important;font-family:var(--tgh-f-text)}
.tgh .md-editor>.md-preview{background-color:var(--tgh-bg2)!important;color:var(--tgh-text);padding:12px 14px!important;border-top:1px solid var(--tgh-line)!important;border-bottom:1px solid var(--tgh-line)!important}
.tgh .md-editor.md-fullscreen-mode>textarea.md-input,.tgh .md-editor.md-fullscreen-mode>.md-preview{background-color:#fff!important;color:#333}
/* Adjuntos de tickets (custom-file de Bootstrap salía blanco) */
.tgh-area .custom-file-label{background:var(--tgh-bg2);border-color:var(--tgh-line);color:var(--tgh-text)}
.tgh-area .custom-file-label::after{background:var(--tgh-raised);color:#fff;border-left:1px solid var(--tgh-line)}
.tgh-area .custom-file-input:focus~.custom-file-label{border-color:var(--tgh-accent);box-shadow:0 0 0 3px rgba(110,123,255,.25)}

/* ---------- Formularios ---------- */
.tgh-checks{display:grid;gap:12px}
.tgh-choices.is-1{grid-template-columns:1fr}
.tgh-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tgh-form-actions.is-end{justify-content:flex-end}

/* Menú lateral de la cuenta (perfil, contraseña, correos) */
.tgh-grid-side{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.tgh-grid-side>.tgh-side-card{padding:12px}
.tgh-side-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.tgh-side-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--tgh-text);font-size:14px;font-weight:500;text-decoration:none}
.tgh-side-list a:hover,.tgh-side-list a:focus{background:var(--tgh-bg2);color:#fff;text-decoration:none}
.tgh-side-list a[aria-current]{background:var(--tgh-bg2);color:#fff;box-shadow:inset 3px 0 0 var(--tgh-yellow)}
.tgh-side-list svg,.tgh-side-list i{width:18px;height:18px;color:var(--tgh-accent);flex:none;text-align:center}

/* ---------- Ayuda ---------- */
.tgh-kb-search .form-control{padding-right:120px}
.tgh-kb-search .btn{position:absolute;right:8px;top:8px;height:40px;min-height:40px;z-index:4}
.tgh-cat .tgh-cat-n{margin-top:auto;padding-top:6px;font-size:12px}
.tgh-article-body{margin-top:20px;overflow-wrap:anywhere}
.tgh-article-body h3{margin:22px 0 8px;font-size:17px}
.tgh-article-body p+p{margin-top:12px}
.tgh-article-body ol,.tgh-article-body ul{padding-left:22px;display:grid;gap:8px;margin:10px 0}
.tgh-article-body img{max-width:100%;height:auto;border-radius:10px}
.tgh-article-body a{color:var(--tgh-accent-light);text-decoration:underline;text-underline-offset:2px}
.tgh-article-body pre{background:var(--tgh-bg2);border:1px solid var(--tgh-line);border-radius:10px;padding:12px;color:#fff;overflow-x:auto}
.tgh-helpful{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--tgh-line)}
.tgh-helpful p{color:#fff;margin:0}
.tgh-helpful form{display:inline-flex;gap:10px;flex-wrap:wrap}
.tgh-news-body p+p{margin-top:10px}
.tgh-news-body a{color:var(--tgh-accent-light)}
.tgh-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:600;color:var(--tgh-accent-light)}
.tgh-more svg{width:16px;height:16px}

/* ---------- Hover amarillo (solo con ratón) ---------- */
@media (hover:hover){
  .tgh-actions-list a:hover{border-color:var(--tgh-yellow);box-shadow:var(--tgh-hover-y)}
}

/* ---------- Adaptable ---------- */
@media (max-width:860px){
  .tgh-grid-side{grid-template-columns:1fr}
  .tgh-grid-side .tgh-side-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .tgh-stats.is-3{grid-template-columns:1fr 1fr}
  .tgh-area .table.tgh-resp td.tgh-act{grid-column:1/-1;text-align:left}
  .tgh-area .table.tgh-resp td.dataTables_empty{grid-column:1/-1}
  .tgh-kb-search .form-control{padding-right:14px}
  .tgh-kb-search .btn{position:static;margin-top:10px;width:100%}
}

/* ---------- Barra lateral heredada (twenty-one) ---------- */
/* El ítem activo no se vuelve gris (#666 de twenty-one) al pasar el ratón o con foco, ni gris claro al pulsar */
.tgh .sidebar .list-group-item.active,.tgh .sidebar .list-group-item.active:hover,.tgh .sidebar .list-group-item.active:focus,.tgh .card-sidebar .list-group-item.active:hover,.tgh .card-sidebar .list-group-item.active:focus{background:var(--tgh-bg2);border-color:var(--tgh-line);color:#fff;box-shadow:inset 3px 0 0 var(--tgh-yellow)}
.tgh .list-group-item-action:active{background:var(--tgh-bg2);color:#fff}
/* Con margen lateral, width:100% (de twenty-one) sacaba el ítem 5 px por la derecha de la tarjeta */
.tgh .tgh-con-barra .card-sidebar .list-group-item.list-group-item-action{width:auto}

/* ---------- Impresión de la factura ---------- */
@media print{
  .tgh-inv-bar{display:none!important}
  body.tgh-tpl-viewinvoice .tgh-grid-2{display:block}
  html,body.tgh-tpl-viewinvoice{background:#fff!important}
  body.tgh-tpl-viewinvoice .tgh-notice{background:#fff!important;border-color:#ccc!important}
}