/* ══ EL PANEL PRINCIPAL: LAS CUATRO CIFRAS ══════════════════
   LO QUE HACE EL TEMA, leido de assets/css/themes/style.min.css:

     .tiles .tile .stats{ border:1px solid #d5dce5; border-radius:4px;
                          flex-direction:row-reverse; overflow:hidden }
     .tiles .tile .stats .icon{ position:absolute; top:-60px; right:-20px;
                          font-size:110px; opacity:.1; transform:rotate(-20deg) }

   Dos consecuencias que explican lo que se veia:
   1. LA TARJETA ES `.stats`, NO `.tile`. Al poner yo el borde y el
      radio en `.tile`, el borde de 4 px de `.stats` seguia dentro y
      su esquina asomaba como un PICO dentro de la mia de 16 px.
   2. EL ICONO NO FALTABA: es decorativo, gigante (110 px), girado,
      al 10% de opacidad y colocado FUERA de la caja (top:-60px), que
      lo recorta con `overflow:hidden`. Por eso solo asomaba un trozo
      —el pulgar de Facturas— y los demas ni eso.

   Aqui se reconstruye `.stats` como la tarjeta y el icono vuelve al
   flujo, a tamano normal y opaco. */
.tiles{margin-bottom:22px !important}
.tiles .swiper-wrapper{
  display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px; transform:none !important;
}
.tiles .swiper-slide{width:auto !important; margin:0 !important}
.tiles .tile{
  background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  height:100%; padding:0 !important;
}
/* LA TARJETA de verdad */
.tiles .tile .stats,
.tiles .tile .no-link{
  flex-direction:column !important; justify-content:center !important;
  align-items:center !important; text-align:center;
  padding:24px 18px !important; margin:0 !important;
  height:100%; min-height:150px;
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  overflow:visible !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
  transition:transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.tiles .tile .stats:hover{
  transform:translateY(-3px); border-color:var(--nb-line-2) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.06), 0 26px 56px -24px rgba(90,60,200,0.30);
  text-decoration:none;
}
/* el icono, de adorno gigante recortado a icono de verdad */
.tiles .tile .stats .icon,
.tiles .tile .no-link .icon{
  position:static !important; top:auto !important; right:auto !important;
  transform:none !important; opacity:1 !important;
  font-size:1.9rem !important; line-height:1 !important;
  color:var(--nb-violet-aa) !important;
  width:auto !important; height:auto !important;
  margin:0 0 11px !important; order:0;
}
.tiles .tile .stats .icon i{
  font-size:1.9rem !important; color:var(--nb-violet-aa) !important;
}
.tiles .tile .stats .stat,
.tiles .tile .no-link .stat{
  font-family:var(--nb-ff-d) !important; font-weight:800 !important;
  font-size:2.1rem !important; line-height:1.05 !important;
  letter-spacing:-0.03em; margin:0 !important;
  color:var(--nb-ink) !important; font-variant-numeric:tabular-nums;
  order:1;
}
.tiles .tile .stats .title,
.tiles .tile .no-link .title{
  font-family:var(--nb-ff-b) !important; font-size:0.9rem !important;
  font-weight:500 !important; color:var(--nb-ink-3) !important;
  text-transform:none !important; letter-spacing:0;
  width:auto !important; margin:2px 0 0 !important; order:2;
}
@media (max-width:991px){
  .tiles .swiper-wrapper{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575px){
  .tiles .swiper-wrapper{grid-template-columns:1fr}
}

/* ══ TARJETAS (.TM-card) ════════════════════════════════════ */
.main-container .TM-card{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; padding:24px !important;
  margin-bottom:20px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
.main-container > h4,
.main-container .TM-card + h4{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.12rem !important; letter-spacing:-0.02em;
  color:var(--nb-ink) !important; margin:26px 0 12px !important;
}

/* ══ TABLAS: servicios, dominios y facturas ═════════════════
   Las tres plantillas usan la MISMA estructura, asi que una sola
   pasada las cubre. La tabla la monta DataTables. */
.main-container .table-container{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  /* NUNCA `overflow:hidden` aqui: el menu de "Administrar" de cada
     fila cuelga por debajo de la caja y quedaba CORTADO en seco. El
     redondeo se consigue en las celdas de las esquinas, mas abajo. */
  overflow:visible !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
/* como el contenedor ya no recorta, redondean las propias esquinas */
.main-container .table-container > .table-header:first-child{
  border-radius:15px 15px 0 0;
}
.main-container .table-container table.table tbody tr:last-child td:first-child{
  border-bottom-left-radius:15px;
}
.main-container .table-container table.table tbody tr:last-child td:last-child{
  border-bottom-right-radius:15px;
}
/* el menu de acciones de cada fila, por encima de todo */
.main-container .table-container .dropdown-menu{
  z-index:1050; box-shadow:0 6px 14px rgba(20,17,31,0.10),
                          0 24px 50px -20px rgba(20,17,31,0.38) !important;
}
/* El menu cuelga de SU boton. Se probo `position:static` en la celda
   para que no lo recortara la caja, pero ya no hace falta —el
   contenedor es `overflow:visible`— y lo unico que hacia era
   descolocarlo al extremo izquierdo de la tabla. */
.main-container .table-container table.table td .dropdown{position:relative}
.main-container .table-header{
  background:var(--nb-paper-2) !important;
  border-bottom:1px solid var(--nb-line) !important;
  padding:14px 18px !important;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.main-container .table-container table.table{
  margin:0 !important; width:100% !important;
}
.main-container .table-container table.table thead th{
  background:var(--nb-paper-2) !important;
  border-top:0 !important; border-bottom:1px solid var(--nb-line) !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.76rem !important; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--nb-ink-3) !important; padding:13px 16px !important;
  white-space:nowrap;
}
.main-container .table-container table.table tbody td{
  border-top:0 !important; border-bottom:1px solid var(--nb-line) !important;
  padding:15px 16px !important; vertical-align:middle;
  font-family:var(--nb-ff-b); font-size:0.94rem; color:var(--nb-ink-2) !important;
}
.main-container .table-container table.table tbody tr:last-child td{border-bottom:0 !important}
.main-container .table-container table.table-hover tbody tr:hover td{
  background:var(--nb-paper-2) !important;
}
.main-container .table-container table.table tbody td a{
  color:var(--nb-violet-aa) !important; font-weight:500;
}
.main-container .table-container table.table tbody td a:hover{text-decoration:underline}
/* las cifras, alineadas por la coma */
.main-container .table-container table.table td:last-child,
.main-container .table-container table.table th:last-child{text-align:right}
.main-container .table-container table.table td{font-variant-numeric:tabular-nums}

/* los controles que pinta DataTables */
.main-container .dataTables_wrapper .dataTables_filter input,
.main-container .table-header input[type="search"],
.main-container .table-header .form-control{
  border:1px solid var(--nb-line-2) !important; border-radius:10px !important;
  padding:8px 13px !important; height:auto !important;
  font-family:var(--nb-ff-b); font-size:0.92rem;
  background:var(--nb-paper) !important; color:var(--nb-ink) !important;
  box-shadow:none !important;
}
.main-container .dataTables_wrapper .dataTables_filter input:focus,
.main-container .table-header .form-control:focus{
  border-color:var(--nb-violet) !important;
  box-shadow:0 0 0 3px rgba(123,92,246,0.16) !important;
}
.main-container .dataTables_wrapper .dataTables_info,
.main-container .dataTables_wrapper .dataTables_length label{
  font-family:var(--nb-ff-b); font-size:0.88rem; color:var(--nb-ink-3) !important;
}
/* (Aqui hubo un primer intento de reestilizar la paginacion. Ese
   `opacity:0.45` sobre las flechas era, muy probablemente, LO QUE
   LAS HACIA INVISIBLES: seguia activo aunque yo creyera haber
   retirado el bloque nuevo. Fuera tambien: la paginacion se queda
   entera con los valores del tema.) */

/* el filtro de estado del encabezado */
.main-container .view-filter-btns > .btn,
.main-container .table-header .dropdown-toggle{
  border:1px solid var(--nb-line-2) !important; border-radius:10px !important;
  background:var(--nb-paper) !important; color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-d); font-weight:600; font-size:0.9rem;
  padding:8px 14px !important;
}

/* ══ ESTADO VACIO ═══════════════════════════════════════════ */
.main-container .alert-lg.no-data{
  background:var(--nb-paper-2) !important;
  border:1px dashed var(--nb-line-2) !important;
  border-radius:14px !important; padding:44px 24px !important;
  text-align:center; color:var(--nb-ink-3) !important;
}
.main-container .alert-lg.no-data .icon i{
  font-size:2.4rem; color:var(--nb-line-2) !important; margin-bottom:12px;
}
.main-container .alert-lg.no-data .text{
  font-family:var(--nb-ff-b); font-size:1rem; color:var(--nb-ink-3) !important;
}

/* ══ ETIQUETAS DE ESTADO ════════════════════════════════════
   WHMCS las pinta con `.label`/`.badge` mas un sufijo de color. */
.main-container .label, .main-container .badge,
.main-container .status{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.76rem !important; letter-spacing:0.02em;
  border-radius:999px !important; padding:5px 11px !important;
}
.main-container .label-success, .main-container .badge-success,
.main-container .status-active{
  background:rgba(22,138,90,0.12) !important; color:#137048 !important;
}
.main-container .label-warning, .main-container .badge-warning,
.main-container .status-pending{
  background:rgba(184,124,10,0.14) !important; color:#8A5B04 !important;
}
.main-container .label-danger, .main-container .badge-danger,
.main-container .status-overdue, .main-container .status-cancelled{
  background:rgba(196,69,63,0.12) !important; color:#A32F2A !important;
}
.main-container .label-info, .main-container .badge-info{
  background:rgba(74,144,217,0.14) !important; color:#215C90 !important;
}
/* Neutras ("Cerrado", "Cancelado"): el tema las pinta en blanco
   sobre gris medio, que se queda en 3,5:1. Van como las demas. */
.main-container .label-default, .main-container .badge-default,
.main-container .badge-secondary, .main-container .status-closed{
  background:rgba(20,17,31,0.08) !important; color:#4C4560 !important;
}

/* ══ FORMULARIOS ════════════════════════════════════════════ */
.main-container .form-group{margin-bottom:17px}
.main-container label.control-label{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.86rem !important; color:var(--nb-ink-2) !important;
  margin-bottom:7px; display:block;
}
.main-container .form-control,
.main-container select.form-control{
  border:1px solid var(--nb-line-2) !important; border-radius:11px !important;
  padding:11px 14px !important; height:auto !important;
  font-family:var(--nb-ff-b) !important; font-size:0.96rem !important;
  color:var(--nb-ink) !important; background:var(--nb-paper) !important;
  box-shadow:none !important; transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.main-container .form-control:focus{
  border-color:var(--nb-violet) !important;
  box-shadow:0 0 0 3px rgba(123,92,246,0.16) !important;
}
.main-container .form-control:disabled,
.main-container .form-control[readonly]{
  background:var(--nb-paper-2) !important; color:var(--nb-ink-3) !important;
}
.main-container .form-actions{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--nb-line);
}
/* Las etiquetas de Bootstrap 4 son `col-form-label`, no
   `control-label`: en "Anadir Fondos" salian con el azul de enlace
   del tema mientras las de "Datos de facturacion" ya iban bien. */
.main-container label.col-form-label{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.86rem !important; color:var(--nb-ink-2) !important;
  margin-bottom:7px; padding:0; display:block;
}
/* El desplegable pierde la flecha del sistema y lleva la suya, para
   que no dependa del navegador ni choque con el radio de marca. */
.main-container select.form-control,
.main-container .custom-select{
  appearance:none !important; -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-color:var(--nb-paper) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23726C85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:15px 15px !important;
  padding-right:40px !important; cursor:pointer;
}

/* ══ CAMPO CON BOTON (.input-group) ═════════════════════════
   clientareaaddfunds.tpl:
     .input-group > input.form-control
                  + .input-group-append > button.btn.btn-primary.btn-block

   Bootstrap solapa las dos piezas con `margin-left:-1px` y les quita
   el radio interior para que parezcan una sola. Con el radio de 11 px
   y el degradado de marca eso no se lee como una pieza: se lee como
   DOS CAJAS PEGADAS, con el degradado cortado en seco contra el
   borde del campo. Misma decision que en `.btn-group`: se separan y
   cada una vale por si misma.

   `btn-block` es `width:100%`, asi que dentro del grupo hay que
   devolverle el ancho de su contenido o se come la fila entera. */
.main-container .input-group{
  display:flex !important; flex-wrap:wrap; align-items:stretch;
  gap:11px; position:static;
}
.main-container .input-group > .form-control,
.main-container .input-group > .custom-select{
  flex:1 1 240px; min-width:0; width:auto !important;
  border-radius:11px !important; margin:0 !important;
}
.main-container .input-group-append,
.main-container .input-group-prepend{
  display:flex; margin:0 !important;
}
.main-container .input-group-append > .btn,
.main-container .input-group-prepend > .btn{
  width:auto !important; display:inline-flex !important;
  align-items:center; justify-content:center;
  white-space:nowrap; border-radius:11px !important; margin:0 !important;
}
.main-container .input-group-text{
  border:1px solid var(--nb-line-2) !important; border-radius:11px !important;
  background:var(--nb-paper-2) !important; color:var(--nb-ink-3) !important;
  font-family:var(--nb-ff-b) !important;
}
@media (max-width:575px){
  /* apilados, 11 px de separacion se leen como pegados: el boton
     ocupa toda la fila y necesita mas aire que en horizontal. */
  .main-container .input-group{gap:14px}
  .main-container .input-group > .form-control{flex:1 1 100%}
  .main-container .input-group-append{width:100%}
  .main-container .input-group-append > .btn{width:100% !important}
}

/* ══ CAJAS SUELTAS (.card) ══════════════════════════════════
   Varias paginas —anadir fondos, presupuestos, tarjeta— envuelven
   su formulario en un `.card > .card-body` pelado, que se quedaba
   con el borde gris y la esquina casi recta del tema mientras el
   resto del area ya iba con `.section` y `.TM-card`. Fuera quedan
   la barra lateral y los paneles de modulo, que ya tienen su trato
   propio mas arriba y no deben pisarse. */
.main-container .card:not(.card-sidebar):not(.panel){
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
  margin-bottom:20px;
}
.main-container .card:not(.card-sidebar):not(.panel) > .card-body{
  padding:22px !important;
}
.main-container .card:not(.card-sidebar):not(.panel) > .card-body > form > fieldset{
  border:0; padding:0; margin:0;
}
.main-container .card:not(.card-sidebar):not(.panel)
  .form-group:last-child{margin-bottom:0}

/* ══ AVISOS (.alert) ════════════════════════════════════════
   includes/alert.tpl los pinta con `.alert` mas el sufijo de color
   —y algun modulo anade el `.alert-block` de Bootstrap 2, que en el
   Bootstrap 4 del tema ya no pinta nada. Se atacan por el sufijo. */
.main-container .alert{
  border:1px solid transparent !important; border-radius:14px !important;
  padding:14px 18px !important; margin-bottom:18px;
  font-family:var(--nb-ff-b) !important;
  font-size:0.95rem !important; line-height:1.55;
}
.main-container .alert strong{font-family:var(--nb-ff-d); font-weight:600}
.main-container .alert ul{margin:7px 0 0; padding-left:20px}
.main-container .alert a{color:inherit !important; font-weight:600}
.main-container .alert-success{
  background:rgba(22,138,90,0.10) !important;
  border-color:rgba(22,138,90,0.26) !important; color:#0F5A3A !important;
}
.main-container .alert-danger, .main-container .alert-error{
  background:rgba(196,69,63,0.09) !important;
  border-color:rgba(196,69,63,0.26) !important; color:#8E2823 !important;
}
.main-container .alert-warning{
  background:rgba(184,124,10,0.11) !important;
  border-color:rgba(184,124,10,0.28) !important; color:#7A5004 !important;
}
.main-container .alert-info{
  background:rgba(74,144,217,0.10) !important;
  border-color:rgba(74,144,217,0.28) !important; color:#1D5285 !important;
}
/* el parrafo de apoyo que acompana a casi todos los formularios */
.main-container p.text-muted{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-3) !important;
  font-size:0.96rem !important; line-height:1.6;
}
.main-container p.text-muted .text-warning{color:#B87C0A !important}

/* Los titulos de las paginas de detalle (dominio y producto):
   `h3` de cabecera y el `h4` que abre cada pestana. Los dos iban
   sin clase y caian en la fuente del sistema. */
.main-container .section h3, .main-container .tab-pane h3,
.main-container .tab-content h3{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1.35rem !important; color:var(--nb-ink) !important;
}
.main-container .tab-pane > h4, .main-container .tab-content h4{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1.08rem !important; color:var(--nb-ink) !important;
}
.main-container .tab-pane > h4.border-bottom{
  border-bottom-color:var(--nb-line) !important;
}
/* la chapa de estado del dominio y del producto */
.main-container .status-sticker{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.8rem !important; letter-spacing:0.02em;
  border-radius:999px !important; padding:6px 14px !important;
}
.main-container .status-sticker.product-status-active{
  background:rgba(22,138,90,0.12) !important; color:#137048 !important;
}
.main-container .status-sticker.product-status-pending{
  background:rgba(184,124,10,0.14) !important; color:#8A5B04 !important;
}
.main-container .status-sticker.product-status-terminated,
.main-container .status-sticker.product-status-cancelled,
.main-container .status-sticker.product-status-suspended{
  background:rgba(196,69,63,0.12) !important; color:#A32F2A !important;
}
/* el nombre del dominio de la cabecera */
.main-container .domain-name, .main-container .product-name,
.main-container .section-header a{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important;
}

/* Los titulos de bloque de "Datos de facturacion" son `<h4>`
   pelados, y varias etiquetas van sin `control-label`: unos y otras
   caian en la fuente del sistema. */
.main-container form h4, .main-container .TM-card h4,
.main-container fieldset > h4{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1.05rem !important; color:var(--nb-ink) !important;
  margin:0 0 15px;
}
.main-container .form-group > label,
.main-container .checkbox label, .main-container .radio label{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.86rem !important; color:var(--nb-ink-2) !important;
}
.main-container .checkbox label, .main-container .radio label{
  font-family:var(--nb-ff-b) !important; font-weight:400 !important;
  font-size:0.94rem !important;
}
.main-container .help-block, .main-container small.form-text{
  font-family:var(--nb-ff-b) !important; font-size:0.83rem !important;
  color:var(--nb-ink-3) !important; line-height:1.5; display:block;
  margin-top:6px;
}
.main-container form p, .main-container fieldset > p{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  font-size:0.94rem; line-height:1.6;
}
/* el prefijo del telefono lo pinta intl-tel-input aparte */
.main-container .selected-dial-code,
.main-container .iti__country-list, .main-container .country-list{
  font-family:var(--nb-ff-b) !important; font-size:0.94rem !important;
  color:var(--nb-ink-2) !important;
}
/* los iconos de ayuda quedaban en 12 px, casi invisibles */
.main-container .fa-info-circle, .main-container .fa-question-circle{
  font-size:0.95rem !important; color:var(--nb-violet) !important;
}

/* ══ BOTONES ════════════════════════════════════════════════ */
.main-container .btn{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important; padding:10px 20px !important;
  font-size:0.94rem !important; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.main-container .btn-primary{
  background:var(--nb-grad) !important; border:0 !important; color:#fff !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.60);
}
.main-container .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(123,92,246,0.72);
}
.main-container .btn-default, .main-container .btn-secondary{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line-2) !important;
  color:var(--nb-ink-2) !important;
}
.main-container .btn-default:hover, .main-container .btn-secondary:hover{
  background:var(--nb-paper-2) !important; color:var(--nb-violet-aa) !important;
}
/* Los de color los usan los modulos (descargar mandato, reenviar,
   cancelar). Sin trato salian con el azul y el rojo de Bootstrap,
   ajenos a la marca; aqui van planos y con contraste suficiente. */
.main-container .btn-info{
  background:rgba(74,144,217,0.14) !important;
  border:1px solid rgba(74,144,217,0.30) !important;
  color:#1D5285 !important; box-shadow:none !important;
}
.main-container .btn-info:hover{
  background:rgba(74,144,217,0.22) !important; color:#164470 !important;
}
.main-container .btn-success{
  background:rgba(22,138,90,0.13) !important;
  border:1px solid rgba(22,138,90,0.30) !important;
  color:#0F5A3A !important; box-shadow:none !important;
}
.main-container .btn-success:hover{background:rgba(22,138,90,0.20) !important}
.main-container .btn-danger{
  background:rgba(196,69,63,0.12) !important;
  border:1px solid rgba(196,69,63,0.30) !important;
  color:#8E2823 !important; box-shadow:none !important;
}
.main-container .btn-danger:hover{background:rgba(196,69,63,0.19) !important}

/* ══ LISTAS DE DATOS (.list-heading / .list-text) ═══════════ */
.main-container .list-heading{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.84rem !important; color:var(--nb-ink-3) !important;
}
.main-container .list-text{
  font-family:var(--nb-ff-b) !important; font-size:0.96rem !important;
  color:var(--nb-ink) !important;
}

/* el foco SIEMPRE visible: aqui se navega mucho con teclado */
.main-container a:focus-visible,
.main-container .btn:focus-visible,
.main-container .form-control:focus-visible,
.main-container .tile:focus-within{
  outline:2px solid var(--nb-violet) !important; outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .tiles .tile,
  .main-container .btn{transition:none !important}
  .tiles .tile:hover,
  .main-container .btn-primary:hover{transform:none !important}
}
/* ══ PAGINAS DE DETALLE ═════════════════════════════════════
   clientareaproductdetails.tpl y clientareadomaindetails.tpl:
     .section > .section-header + .section-body
     pares .list-heading (etiqueta) / .list-text (valor)
     pestanas .nav-item + .tab-pane */
.main-container .section{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; overflow:visible;
  margin-bottom:20px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
.main-container .section-header{
  background:var(--nb-paper-2) !important;
  border-bottom:1px solid var(--nb-line) !important;
  padding:15px 20px !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1rem !important; color:var(--nb-ink) !important;
}
.main-container .section-body{padding:20px !important}
.main-container .separator{
  border:0; height:1px; background:var(--nb-line); margin:16px 0;
}
.main-container .desc{
  font-family:var(--nb-ff-b); font-size:0.9rem; color:var(--nb-ink-3) !important;
}
.main-container .section-body .list-heading,
.main-container .list-info .list-heading{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.78rem !important; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--nb-ink-3) !important; margin-bottom:3px;
}
.main-container .section-body .list-text,
.main-container .list-info .list-text{
  font-family:var(--nb-ff-b) !important; font-size:0.98rem !important;
  color:var(--nb-ink) !important; margin-bottom:15px;
  font-variant-numeric:tabular-nums;
}
/* ══ PESTAÑAS ═══════════════════════════════════════════════ */
.main-container .nav-tabs{border-bottom:1px solid var(--nb-line) !important; gap:4px}
.main-container .nav-tabs .nav-item .nav-link,
.main-container .nav-tabs .nav-link{
  border:0 !important; border-radius:10px 10px 0 0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.94rem !important; color:var(--nb-ink-3) !important;
  padding:11px 18px !important; background:transparent !important;
  border-bottom:2px solid transparent !important;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.main-container .nav-tabs .nav-link:hover{
  color:var(--nb-violet-aa) !important; background:var(--nb-paper-2) !important;
}
.main-container .nav-tabs .nav-link.active{
  color:var(--nb-ink) !important; background:transparent !important;
  border-bottom-color:var(--nb-violet) !important;
}
.main-container .tab-content{padding-top:20px}
/* ══ FACTURA (viewinvoice.tpl) ══════════════════════════════ */
.main-container .invoice-status{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:0.86rem !important; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:999px !important; padding:8px 18px !important; display:inline-block;
}
.main-container .invoice-status-paid, .main-container .invoice-status.paid{
  background:rgba(22,138,90,0.12) !important; color:#137048 !important;
}
.main-container .invoice-status-unpaid, .main-container .invoice-status.unpaid{
  background:rgba(184,124,10,0.14) !important; color:#8A5B04 !important;
}
.main-container .invoice-status-cancelled, .main-container .invoice-status-refunded{
  background:rgba(114,108,133,0.14) !important; color:var(--nb-ink-2) !important;
}
.main-container .total-row{
  font-family:var(--nb-ff-b); font-size:0.96rem; color:var(--nb-ink-2) !important;
  padding:9px 0; border-bottom:1px solid var(--nb-line);
  font-variant-numeric:tabular-nums;
}
.main-container .total-row:last-child, .main-container .total-row.total{
  border-bottom:0; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1.12rem !important;
  color:var(--nb-ink) !important; padding-top:14px;
}
.main-container .total-price{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink) !important; font-variant-numeric:tabular-nums;
}
.main-container .panel, .main-container .panel-sidebar{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:15px !important; overflow:hidden;
}
.main-container .panel-body{padding:18px !important}
/* al imprimir una factura: sin sombras ni fondos que gasten tinta */
@media print{
  .main-container .section, .main-container .TM-card,
  .main-container .table-container, .main-container .panel{
    box-shadow:none !important; border:1px solid #ccc !important;
  }
}
/* ══ LA PAGINA DE ACCESO ════════════════════════════════════
   login.tpl no pasa por el layout con navbar: es una pantalla
   completa con `body.login` y, de serie, la foto universo_netebu.jpg
   de fondo. Se sustituye por el mismo campo de red neuronal del
   resto del sitio. Estructura real:
     #wrapper > .container > .login-container
       .login-header > a > img.logo-light | img.logo-dark
       #login-box.login-box > h1 + p + hr + form */
body.login{
  background-image:none !important; background:#0B0A16 !important;
}
/* El tema pinta un `body.login::before` BLANCO OPACO para atenuar
   su foto de fondo. Ese velo tapaba el campo oscuro entero: el body
   computaba #0B0A16 pero en pantalla salia gris claro y el texto
   claro de la caja no se leia. Se apaga. */
body.login::before{
  background:transparent !important; background-color:transparent !important;
  z-index:-1 !important;
}
body.login .nb-campo-login{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
body.login .nb-campo-login .nb-net{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
body.login .nb-campo-login::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 460px at 14% 0%, rgba(74,144,217,0.20), transparent 64%),
    radial-gradient(760px 400px at 86% 100%, rgba(232,64,152,0.16), transparent 62%);
}
body.login #wrapper{position:relative; z-index:1}
body.login .login-container{max-width:440px; margin:0 auto}
body.login .login-header{text-align:center; margin-bottom:22px}
body.login .login-header img{max-height:38px; width:auto}
/* el logo claro es el que se lee sobre el campo oscuro */
body.login .login-header .logo-dark{display:inline-block !important}
body.login .login-header .logo-light{display:none !important}
body.login .login-box{
  background:rgba(255,255,255,0.055) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:20px !important; padding:30px !important;
  backdrop-filter:saturate(150%) blur(18px);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  box-shadow:0 30px 80px -32px rgba(0,0,0,0.85);
  position:relative; overflow:hidden;
}
body.login .login-box::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--nb-grad);
}
body.login .login-box h1{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:#F2F3FB !important; letter-spacing:0.06em;
}
body.login .login-box h1 i{color:var(--nb-violet) !important; margin-right:7px}
body.login .login-box .text-muted{color:#B9BEDD !important; font-family:var(--nb-ff-b)}
body.login .login-box hr{border-color:rgba(255,255,255,0.12) !important; margin:18px 0}
body.login .login-box label{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.86rem !important; color:#B9BEDD !important;
}
body.login .login-box .form-control{
  background:rgba(0,0,0,0.30) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-radius:11px !important; padding:12px 14px !important; height:auto !important;
  color:#F2F3FB !important; font-family:var(--nb-ff-b) !important;
  box-shadow:none !important;
}
body.login .login-box .form-control::placeholder{color:#8E94BC !important}
body.login .login-box .form-control:focus{
  border-color:rgba(123,92,246,0.85) !important;
  box-shadow:0 0 0 4px rgba(123,92,246,0.22) !important;
  background:rgba(0,0,0,0.40) !important;
}
body.login .login-box .btn-primary,
body.login .login-box button[type="submit"]{
  width:100%; background:var(--nb-grad) !important; border:0 !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important; border-radius:12px !important;
  padding:13px 20px !important; font-family:var(--nb-ff-d) !important;
  font-weight:700 !important; font-size:1rem !important;
  box-shadow:0 12px 30px -12px rgba(123,92,246,0.66);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
body.login .login-box .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -14px rgba(123,92,246,0.80);
}
body.login .login-box a{color:#B9BEDD !important}
body.login .login-box a:hover{color:#F2F3FB !important}
body.login .login-box .input-group-merge .input-group-append .input-group-text,
body.login .login-box .input-group-text{
  background:transparent !important; border:0 !important; color:#8E94BC !important;
}
body.login .login-box :focus-visible{
  outline:2px solid #A594FF !important; outline-offset:2px;
}
/* ══ EL BUSCADOR DE AYUDA DEL PANEL ═════════════════════════
   clientareahome.tpl:  .home-kb-search > input.form-control + i.fas.fa-search
   La lupa es HERMANA del campo, colocada en absoluto. Con el
   relleno normal del campo se montaba encima del texto de ayuda. */
/* `display:flex` hace que la columna mida EXACTAMENTE lo que el
   campo. Sin eso, el <form> y el .row le anadian alto por arriba,
   la lupa —anclada a la columna— se iba por encima del campo, y el
   desfase cambiaba segun lo que hubiera antes en la pagina. */
.main-container .home-kb-search{
  position:relative; display:flex; align-items:stretch;
}
.main-container .home-kb-search .form-control{
  flex:1 1 auto; min-width:0;
  padding-left:46px !important; height:52px !important; font-size:1rem !important;
  margin:0 !important;
}
/* La lupa se centra sobre EL CAMPO, no sobre la columna: el
   `col-md-12` que los envuelve es mas alto por sus margenes y con
   `top:50%` la lupa se iba por encima del campo. Anclada arriba y
   con la altura exacta del campo, cae siempre en su sitio. */
.main-container .home-kb-search > i.fa-search,
.main-container .home-kb-search > i{
  /* Anclada ABAJO, no arriba: la columna arrastra 30 px de alto por
     encima del campo (del <form> y del .row de Bootstrap), pero
     campo y columna terminan en la MISMA linea. Con `bottom:0` y la
     altura del campo, la lupa cae siempre centrada en el. */
  position:absolute; left:17px; bottom:0; top:auto; height:52px;
  display:flex; align-items:center;
  color:var(--nb-ink-3) !important; font-size:1rem; pointer-events:none;
  z-index:2;
}

/* ══ GRUPOS DE BOTONES ══════════════════════════════════════
   Bootstrap junta los botones de un `.btn-group` quitandoles el
   radio interior. Con el radio de marca quedaban como cajas
   pegadas unas a otras. Se separan y cada una vale por si misma. */
.main-container .btn-group{
  display:inline-flex !important; gap:9px; flex-wrap:wrap;
}
.main-container .btn-group > .btn,
.main-container .btn-group > .btn-group > .btn{
  border-radius:11px !important; margin:0 !important;
}
.main-container .btn-group > .btn-group{margin:0 !important}
.main-container .btn-group-sm > .btn{
  padding:9px 15px !important; font-size:0.9rem !important;
}
.main-container .btn-default i, .main-container .btn-group .btn i{
  margin-right:6px; color:var(--nb-violet-aa) !important;
}
/* los menus que cuelgan de esos botones */
.main-container .dropdown-menu{
  border:1px solid var(--nb-line) !important; border-radius:13px !important;
  padding:7px !important; margin-top:7px !important;
  box-shadow:0 4px 10px rgba(20,17,31,0.07),
             0 22px 48px -20px rgba(20,17,31,0.34) !important;
}
.main-container .dropdown-item{
  border-radius:9px !important; padding:9px 13px !important;
  font-family:var(--nb-ff-b) !important; font-size:0.94rem !important;
  color:var(--nb-ink-2) !important;
}
.main-container .dropdown-item:hover, .main-container .dropdown-item:focus{
  background:rgba(123,92,246,0.13) !important; color:#4C2FC0 !important;
}
.main-container .dropdown-item i{color:#5B3FD6 !important; margin-right:8px; width:16px}

/* ══ MENSAJES DE AYUDA DEL MEGAMENU ═════════════════════════
   La primera columna usa `a.item-heading` envolviendo el titulo, y
   WHMCS puede colgar un `.html-item` con texto suelto: ninguno de
   los dos se leia sobre el panel oscuro. */
#nav .dropdown-mega a.item-heading h4.menu-name{color:var(--nb-ink-3) !important}
body.nb-hero:not(.nb-scrolled) #nav .dropdown-mega a.item-heading h4.menu-name{
  color:var(--nb-on-3) !important;
}
#nav .dropdown-mega .html-item{
  font-family:var(--nb-ff-b); font-size:0.88rem; line-height:1.5;
  color:var(--nb-ink-3) !important; padding:2px 10px 8px;
}
body.nb-hero:not(.nb-scrolled) #nav .dropdown-mega .html-item{
  color:var(--nb-on-3) !important;
}
#nav .dropdown-mega .html-item a{color:var(--nb-violet-aa) !important}
body.nb-hero:not(.nb-scrolled) #nav .dropdown-mega .html-item a{color:#A594FF !important}
/* ══ LOS PANELES DEL PANEL DE GESTION ═══════════════════════
   clientareahome.tpl los pinta como `.client-home-panels` con un
   `.panel.panel-default` por bloque —Sitejet, Productos, Hosting
   cloud, Registrar Dominios, Tickets, Noticias—. El contenido de
   varios lo escupe un modulo con maquetacion de hace diez anos:
   `float`, `<br>` y estilos en el atributo. Se recompone por fuera.

   LA TIPOGRAFIA: casi todo ese contenido cae en la fuente del
   sistema porque las reglas de marca apuntan a clases que ahi no
   existen. Se cubren los nodos sueltos del cuerpo del panel. */
.main-container .panel-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1rem !important; color:var(--nb-ink) !important;
  margin:0; display:flex; align-items:center; gap:8px;
}
.main-container .panel-title i, .main-container .panel-title span{
  color:var(--nb-violet) !important; font-size:0.95em;
}
/* El enlace de accion (ver todo / abrir ticket) es el PRIMER hijo
   del titulo y se colocaba con `float-right`. Al pasar el titulo a
   flex el float deja de contar y el icono se plantaba delante del
   nombre del panel: se le devuelve el extremo derecho. */
.main-container .panel-title > .float-right,
.main-container .panel-title > .pull-right{
  order:9; margin-left:auto; float:none !important;
}
.main-container .panel-title > .float-right a{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px;
  transition:background 0.2s ease;
}
.main-container .panel-title > .float-right a:hover{
  background:rgba(123,92,246,0.12);
}
/* "Registrar Dominios" es el unico panel sin icono en su titulo:
   el globo que trae el modulo va suelto, de fondo. Se le pone uno
   con el mismo peso que los demas. */
.main-container #registerDomainPanel .panel-title::before{
  content:"\f0ac"; font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
  font-weight:900; color:var(--nb-violet); font-size:0.95em;
}
.main-container .panel-body{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  font-size:0.95rem; line-height:1.6;
}
.main-container .panel-body p,
.main-container .panel-body span,
.main-container .panel-body strong,
.main-container .panel-body em,
.main-container .panel-body div:not([class*="input"]):not(.form-group){
  font-family:var(--nb-ff-b) !important;
}
.main-container .panel-body strong{font-weight:600; color:var(--nb-ink) !important}
/* Los datos del cliente en "Su Informacion" NO cuelgan de un
   `.card-body`: van en `.card-sidebar > .collapsable-card-body >
   .user-profile > .px-3`, que es otro camino. */
.main-container .user-profile,
.main-container .user-profile .px-3,
.main-container .card-sidebar .px-3{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  font-size:0.94rem !important; line-height:1.65;
}
.main-container .user-profile strong{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important; font-size:0.98rem !important;
}
.main-container .user-profile em{
  font-style:normal; color:var(--nb-ink-3) !important;
}
/* el "Ver mas..." del pie de Productos/Servicios */
/* El tema lo pinta de un rosa plano que no esta en la paleta. Es
   una accion terciaria: va como boton secundario. */
.main-container .btn-view-more{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.82rem !important; border-radius:9px !important;
  padding:6px 13px !important;
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line-2) !important;
  color:var(--nb-ink-2) !important; box-shadow:none !important;
}
.main-container .btn-view-more:hover{
  background:var(--nb-paper-2) !important; color:var(--nb-violet-aa) !important;
}
.main-container .btn-view-more.disabled{opacity:0.5; pointer-events:none}

/* ── REGISTRAR DOMINIOS: los dos botones iban pegados ────────
   El tema los aplasta a proposito con una regla de SEIS clases y
   `!important`:

     .client-home-panels .panel.panel-domain-register .panel-body
       .input-group .input-group-btn .btn{ border-radius:0 !important }

   Para ganarle sin subir la escalera de clases se entra por el ID
   del panel, que WHMCS ya pone: `#registerDomainPanel`. Y como en
   el resto del area, no se funden: se separan. */
/* quien centra el titulo es el `.panel-heading` (flex con
   `justify-content:center`), no el `h3`: se ataca al padre. */
.main-container #registerDomainPanel .panel-heading{
  justify-content:flex-start !important;
}
.main-container #registerDomainPanel .panel-title{
  justify-content:flex-start; text-align:left;
}
.main-container #registerDomainPanel .panel-body .input-group{
  gap:9px; padding:0 !important;
}
/* `align-items:stretch`: el secundario lleva borde de 1 px y sin
   esto quedaba 2 px mas alto que el principal. */
.main-container #registerDomainPanel .panel-body .input-group-btn{
  display:flex; gap:9px; margin:0 !important; align-items:stretch;
}
.main-container #registerDomainPanel .panel-body .input-group .input-group-btn .btn{
  border-radius:11px !important; width:auto !important;
  padding:10px 18px !important;
}
/* "Registrar" es la accion principal; "Transferir" la acompana */
.main-container #registerDomainPanel .input-group-btn .btn-success{
  background:var(--nb-grad) !important; border:0 !important;
  color:#fff !important; background-clip:padding-box;
  -webkit-background-clip:padding-box;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.60);
}
.main-container #registerDomainPanel .input-group-btn .btn-default{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line-2) !important;
  color:var(--nb-ink-2) !important;
}
/* la nota legal iba centrada y en la fuente del sistema */
.main-container #registerDomainPanel .panel-body > p{
  font-family:var(--nb-ff-b) !important; text-align:left !important;
  font-size:0.84rem !important; color:var(--nb-ink-3) !important;
  line-height:1.55; margin:12px 12px 0;
}
/* el globo decorativo del fondo, atenuado para que no compita */
.main-container #registerDomainPanel > span.fa-globe{opacity:0.06}
@media (max-width:991px){
  .main-container #registerDomainPanel .panel-body .input-group{flex-wrap:wrap}
  .main-container #registerDomainPanel .panel-body .input-group-btn{width:100%}
  .main-container #registerDomainPanel .input-group-btn .btn{flex:1 1 0}
}

/* ── HOSTING CLOUD (SolusVM2): maquetado con float y <br> ────
   El modulo mete `<img style="float:left;padding-right:15px">` y
   deja el texto suelto detras. En una columna estrecha el texto
   rodea la imagen, se queda una palabra huerfana debajo y el boton
   cae descolgado. La imagen pasa a bloque: el texto ya no rodea
   nada y la caja se lee de arriba abajo a cualquier ancho. */
.main-container .panel[menuitemname="SolusVM2Panel"] .panel-body img{
  float:none !important; padding-right:0 !important;
  display:block; margin:0 0 14px; border-radius:12px;
  /* el atributo `height="100"` lo anulaba `height:auto`, y la
     imagen (790x600) se estiraba a 304 px de alto. */
  width:auto !important; max-width:100%; max-height:150px;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .panel-body > span{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1.08rem !important; color:var(--nb-ink) !important;
  display:block; margin-bottom:6px; line-height:1.3;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .panel-body .btn{
  display:inline-block; margin-top:14px;
}
/* ── SITEJET: el boton partia la palabra en dos lineas ───── */
.main-container #sitejetPromoPanel .mb-2,
.main-container [id*="sitejet"] .mb-2{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  font-size:0.94rem;
}
.main-container [id*="sitejet"] .btn{white-space:nowrap}

/* ── EL FILTRO "Ver" DE LAS TABLAS ──────────────────────────
   DataTables lo pinta como un `<label>` sin clase, asi que las
   reglas de `label.control-label` no lo alcanzaban. */
.main-container .dataTables_length label,
.main-container .table-header label,
.main-container .dataTables_filter label{
  font-family:var(--nb-ff-b) !important; font-weight:500 !important;
  font-size:0.9rem !important; color:var(--nb-ink-3) !important;
  display:flex; align-items:center; gap:8px; margin:0;
}
/* los iconos de estado de las tablas, legibles y no de 12 px */
.main-container table .fa-check, .main-container table .fa-times,
.main-container table .fa-fw{font-size:0.95rem !important}
.main-container table .text-success{color:#137048 !important}
.main-container table .text-danger{color:#A32F2A !important}

/* ── LA CAJA DE SALDO DE "ANADIR FONDOS" ────────────────────
   `.total > .total-text + .total-price`, con el icono DENTRO del
   precio. Tres cosas: el rotulo iba en la fuente del sistema, el
   `letter-spacing` negativo del tema pegaba el simbolo de euro al
   ultimo digito, y la cartera quedaba en 14 px y en color tinta,
   sin relacion visible con la cifra. */
.main-container .total-text{
  font-family:var(--nb-ff-b) !important; font-size:0.9rem !important;
  color:var(--nb-ink-3) !important; letter-spacing:0 !important;
}
.main-container .total-price{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  color:var(--nb-ink) !important;
  letter-spacing:0.015em !important;
  align-items:center; gap:10px;
}
.main-container .total-price i{
  font-size:1.15rem !important; color:var(--nb-violet) !important;
  opacity:0.85; letter-spacing:0 !important;
}

/* ══ PANELES DE MODULO (Sitejet, Plesk, cPanel) ═════════════
   modules/servers/plesk/templates/overview.tpl:
     .panel.card#PleskPackagePanel
       .panel-heading.card-header > h3.panel-title.card-title
       .panel-body.card-body.column > .row
         .col-sm-6 > img.card-img-top      <- la miniatura del sitio
         .col-sm-6.text-center.d-flex.flex-column > .plesk-package-details

   La caja crecia mucho mas que el bloque de la izquierda porque la
   columna de la miniatura reserva su alto aunque la imagen no
   cargue, y el `d-flex flex-column` estira la otra. Centrando las
   dos columnas y dejando que la vacia se colapse, la caja mide lo
   que mide su contenido. */
.main-container .panel.card,
.main-container #PleskPackagePanel{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
.main-container .panel-heading.card-header,
.main-container #PleskPackagePanel .card-header{
  background:var(--nb-paper-2) !important;
  border-bottom:1px solid var(--nb-line) !important;
  padding:15px 20px !important;
}
.main-container .panel-title.card-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1rem !important; color:var(--nb-ink) !important; margin:0 !important;
}
.main-container #PleskPackagePanel .card-body,
.main-container .panel.card > .card-body{padding:20px !important}
.main-container #PleskPackagePanel .card-body > .row{
  align-items:center !important;
}
.main-container #PleskPackagePanel .card-img-top{
  max-width:100%; height:auto; border-radius:12px;
  border:1px solid var(--nb-line);
}
/* la columna de texto deja de estirarse a lo alto */
.main-container #PleskPackagePanel .col-sm-6.d-flex{
  justify-content:center !important; gap:12px;
}
.main-container .plesk-package-details{
  font-family:var(--nb-ff-b); color:var(--nb-ink-2) !important; margin:0 0 14px;
}
.main-container .plesk-package-details a{color:var(--nb-violet-aa) !important}
/* si la miniatura no carga, su columna no reserva alto */
.main-container #PleskPackagePanel .col-sm-6:empty{display:none}
.main-container #PleskPackagePanel img[src=""],
.main-container #PleskPackagePanel img:not([src]){display:none}

/* el panel de Sitejet del panel principal, mismo trato */
.main-container [id*="sitejet"], .main-container [id*="Sitejet"]{
  border-radius:14px;
}
.main-container #sitejetAlert{
  border-radius:12px !important; font-family:var(--nb-ff-b);
}
/* ══ DOMICILIACION BANCARIA (index.php?m=adeudos_sepa) ══════
   modules/addons/adeudos_sepa/adeudos_sepa.default.tpl

     div[style="width:500px"] > .alert.alert-block.alert-danger
     form#ibanForm
       .row > .col-md-6.col-md-offset-3 > label + input.form-control
       p.text-center > button#saveIban.btn.btn-primary

   DOS COSAS QUE VENIAN DE FABRICA Y SE VEIAN:

   1. EL MODULO ES DE BOOTSTRAP 3. `col-md-offset-3` no existe en el
      Bootstrap 4 del tema, asi que los campos caian pegados a la
      izquierda mientras el aviso —centrado a mano con un `width:500px`
      en linea— se quedaba en medio. No se parchea el offset: se
      recompone la columna y se centra el formulario entero.

   2. Sus etiquetas van SUELTAS, sin `.form-group` ni `control-label`,
      separadas con `<br>`. Heredaban el azul de enlace del tema.

   El boton ya entra solo: es `.btn-primary` y lo coge el degradado.
   Lo que no entra solo es `assets/css/validate.css`, que pinta los
   errores con `#FF0000` (4:1 sobre blanco, por debajo de AA) y un
   borde de puntos. Se reescribe el estado de error completo. */
/* El modulo no envuelve su formulario en ninguna caja, asi que
   quedaba flotando en el blanco mientras el resto del area va en
   tarjetas. Se le da cuerpo con el mismo lenguaje que `.card`. */
#ibanForm{
  max-width:560px; margin:0 auto;
  background:var(--nb-paper); border:1px solid var(--nb-line);
  border-radius:16px; padding:24px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
#ibanForm .row{margin-left:0; margin-right:0}
#ibanForm .row:last-of-type > [class*="col-"]{margin-bottom:0}
#ibanForm .row > [class*="col-"]{
  flex:0 0 100%; max-width:100%; padding:0; margin-bottom:17px;
}
#ibanForm label:not(.error){
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.86rem !important; color:var(--nb-ink-2) !important;
  margin-bottom:7px; display:block;
}
/* la separacion la dan los margenes, no los saltos de linea */
#ibanForm br{display:none}
/* el boton necesita su aire: sin esto quedaba pegado al ultimo
   campo, que es justo lo que veniamos a quitar de esta pagina. */
#ibanForm p.text-center{margin:22px 0 0}
#ibanForm .btn{width:100%}
#ibanForm input[type="file"]{
  font-family:var(--nb-ff-b); font-size:0.92rem; color:var(--nb-ink-2);
}
/* el aviso lleva su ancho fijo en el atributo `style`, que en movil
   desborda: se le devuelve un ancho fluido con el mismo tope que el
   formulario para que los dos compartan eje. */
.main-container div[style*="width:500px"]{
  width:auto !important; max-width:560px !important;
  margin-left:auto !important; margin-right:auto !important;
}
/* estado de error, en vez del rojo puro y el borde de puntos */
#ibanForm label.error, .main-container label.error{
  font-family:var(--nb-ff-b) !important; font-weight:500 !important;
  font-size:0.86rem !important; color:#A32F2A !important;
  margin:7px 0 0 !important; display:block;
}
#ibanForm input.error, .main-container .form-control.error{
  border:1px solid #C4453F !important;
  box-shadow:0 0 0 3px rgba(196,69,63,0.14) !important;
}
/* los titulos de los mandatos (Particulares / Empresas) */
.main-container .alert h2, .main-container .alert h3{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1.02rem !important; color:inherit !important;
  margin:0 0 9px;
}
/* los enlaces de descarga del mandato son `.btn-info` con
   `color:#FFF` en linea: la hoja gana por `!important`. */
.main-container a.btn-info[style]{color:#1D5285 !important}

/* ══ VENTANAS MODALES ═══════════════════════════════════════
   includes/modal.tpl y las preguntas frecuentes del modulo de
   domiciliacion. Sin trato salen con la esquina y la sombra planas
   de Bootstrap, que ya no pegan con el resto. */
.main-container .modal-content, body > .modal .modal-content{
  border:1px solid var(--nb-line) !important; border-radius:18px !important;
  box-shadow:0 24px 70px -24px rgba(20,17,31,0.44) !important;
}
body > .modal .modal-header{
  border-bottom:1px solid var(--nb-line) !important; padding:17px 22px !important;
}
body > .modal .modal-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-ink) !important; font-size:1.05rem !important;
}
body > .modal .modal-body{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  padding:20px 22px !important; line-height:1.6;
}
body > .modal .modal-footer{
  border-top:1px solid var(--nb-line) !important; padding:15px 22px !important;
}

/* ══ EL OJO DE LA CONTRASEÑA Y EL "RECORDAR" ════════════════
   login.tpl:
     .input-group-append > button.btn.btn-default.btn-reveal-pw > i.fa-eye
     .footer-warp > label > input.rememberme + span.labels
   El boton heredaba el `btn-default` claro —un bloque blanco pegado
   al campo oscuro— y la casilla salia con el morado del navegador. */
body.login .login-box .input-group-append{margin:0}
body.login .login-box .btn-reveal-pw,
body.login .login-box .input-group-append .btn{
  background:rgba(0,0,0,0.30) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  border-left:0 !important;
  border-radius:0 11px 11px 0 !important;
  color:#8E94BC !important; box-shadow:none !important;
  padding:0 15px !important; height:auto !important;
  transition:color 0.2s ease, background 0.2s ease;
}
body.login .login-box .btn-reveal-pw:hover{
  color:#F2F3FB !important; background:rgba(255,255,255,0.08) !important;
}
/* el campo con boton pierde su esquina derecha, para que encajen */
body.login .login-box .input-group .form-control{
  border-right:0 !important; border-radius:11px 0 0 11px !important;
}
body.login .login-box .input-group > .form-control:only-child{
  border-right:1px solid rgba(255,255,255,0.14) !important;
  border-radius:11px !important;
}
/* la casilla de recordar: dibujada, no la del navegador */
body.login .footer-warp label{
  display:flex; align-items:center; gap:9px;
  margin:16px 0 18px; cursor:pointer;
  font-family:var(--nb-ff-b); font-size:0.92rem; color:#B9BEDD !important;
}
body.login .footer-warp input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex:0 0 18px; margin:0;
  border:1px solid rgba(255,255,255,0.28) !important;
  border-radius:5px; background:rgba(0,0,0,0.30);
  cursor:pointer; position:relative;
  transition:background 0.2s ease, border-color 0.2s ease;
}
body.login .footer-warp input[type="checkbox"]:hover{
  border-color:rgba(255,255,255,0.45) !important;
}
body.login .footer-warp input[type="checkbox"]:checked{
  background:var(--nb-grad) !important; border-color:transparent !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
}
body.login .footer-warp input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
body.login .footer-warp input[type="checkbox"]:focus-visible{
  outline:2px solid #A594FF; outline-offset:2px;
}
body.login .footer-warp .labels{color:#B9BEDD !important}

/* ══ PAGINACION ═════════════════════════════════════════════
   El marcado real, leido del inspector (no de suposiciones):

     ul.pagination
       li.paginate_button.page-item.previous.disabled > a
       li.paginate_button.page-item.active            > a.page-link
       li.paginate_button.page-item.next.disabled     > a

   LA CLAVE: el <li> lleva LAS DOS clases —`paginate_button` Y
   `page-item`—. Yo tenia reglas para `.paginate_button` y para
   `.page-link` creyendo que eran el mismo boton en dos librerias
   distintas; en realidad la primera cae en el <li> CONTENEDOR y la
   segunda en el <a> de dentro. De ahi las dos cajas superpuestas.

   Y del CSS del tema:
     .page-link{ margin-left:-1px; color:#8f1faf; border:1px solid #dee2e6 }
     .page-item.active .page-link{ background-color:#8f1faf }
   Ese `margin-left:-1px` es el solape de Bootstrap, y el #8f1faf el
   morado que no es de la marca.

   Ahora: el <li> NO pinta nada y todo el estilo va en el <a>. */
.main-container ul.pagination{
  display:inline-flex !important; align-items:center; gap:7px;
  padding:0 !important; margin:0 !important; list-style:none;
}
.main-container ul.pagination li.page-item,
.main-container ul.pagination li.paginate_button{
  background:none !important; background-color:transparent !important;
  border:0 !important; padding:0 !important; margin:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}
/* el boton de verdad: el <a> */
.main-container ul.pagination li.page-item > a,
.main-container ul.pagination li.page-item > .page-link{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px !important;
  margin-left:0 !important;
  border:1px solid var(--nb-line-2) !important; border-radius:10px !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.9rem !important; line-height:1 !important;
  color:var(--nb-ink-2) !important;
  background-color:var(--nb-paper) !important; background-image:none !important;
  text-decoration:none !important;
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.main-container ul.pagination li.page-item:not(.disabled) > a:hover{
  background-color:var(--nb-paper-2) !important;
  border-color:var(--nb-violet) !important;
  color:var(--nb-violet-aa) !important;
}
/* la pagina actual */
.main-container ul.pagination li.page-item.active > a,
.main-container ul.pagination li.page-item.active > .page-link{
  background-image:var(--nb-grad) !important;
  background-color:transparent !important;
  border-color:transparent !important; color:#fff !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  box-shadow:0 8px 20px -10px rgba(123,92,246,0.55) !important;
}
/* las flechas cuando no se pueden usar: atenuadas PERO visibles */
.main-container ul.pagination li.page-item.disabled > a{
  color:var(--nb-ink-3) !important;
  background-color:var(--nb-paper-2) !important;
  border-color:var(--nb-line) !important;
  cursor:default; opacity:1;
}