/* ══ 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}
/* Y LOS PUNTOS DEL CARRUSEL SOBRAN, PORQUE YA NO HAY CARRUSEL.
   Las cuatro cifras venian en un Swiper que se deslizaba; aqui se
   pintan en una rejilla y se ven las cuatro a la vez, asi que su
   paginacion no lleva a ninguna parte. Y no es que estorbara de lejos:
   se dibujaba ENCIMA de las dos tarjetas de abajo, cuatro cuadraditos
   montados sobre «Tickets» y «Facturas Pendientes».
   Las flechas van con ellos, por lo mismo. */
.tiles .swiper-pagination,
.tiles .swiper-button-next,
.tiles .swiper-button-prev,
.tiles ~ .swiper-pagination{
  display:none !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))}
}
/* DOS POR DOS TAMBIEN EN EL MOVIL, Y MAS BAJAS.
   Aqui habia `grid-template-columns:1fr` por debajo de 575: las cuatro
   cifras en una sola columna, cada una con sus 150 px de alto minimo.
   Medido en un movil de 390: 651 px de pantalla para cuatro numeros y
   cuatro palabras, y el panel entero en 4.552.

   Cuatro cifras son para compararlas de un vistazo, y para eso tienen
   que verse a la vez. Puestas de dos en dos y con el alto que pide su
   contenido, el bloque baja a unos 215 px y entra entero en la primera
   pantalla, que es donde tiene que estar lo que resume tu cuenta. */
@media (max-width:575px){
  .tiles .swiper-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:11px !important;
  }
  .tiles .tile .stats,
  .tiles .tile .no-link{
    min-height:0 !important; padding:15px 10px !important;
    border-radius:14px !important;
  }
  .tiles .tile .stats .icon,
  .tiles .tile .no-link .icon{
    font-size:1.15rem !important; margin:0 0 6px !important;
  }
  .tiles .tile .stats .icon i{font-size:1.15rem !important}
  .tiles .tile .stats .stat,
  .tiles .tile .no-link .stat{font-size:1.6rem !important}
  .tiles .tile .stats .title,
  .tiles .tile .no-link .title{font-size:0.78rem !important; line-height:1.25}
}

/* ══ Y LAS CUATRO CIFRAS DEJAN DE PESAR LO MISMO ═══════════════
   Las cuatro se pintaban identicas: mismo negro, mismo tamano, mismo
   borde. Asi un «0 Tickets» —que es una buena noticia y no pide nada—
   gritaba igual que «2 Facturas Pendientes», que es lo unico de esa
   fila que hay que atender hoy. Un panel que lo destaca todo no
   destaca nada.

   Con `:has()` se distingue por el valor, sin tocar el marcado:

     · a cero  -> la cifra se apaga a gris. Sigue leyendose perfecta,
                  pero deja de reclamar la vista: no hay nada que hacer.
     · pendiente y con valor -> filo ambar a la izquierda y la cifra en
                  su color. Es la unica que pide algo.

   El ambar y no el rojo: una factura pendiente es un aviso, no un
   error. El rojo se reserva para lo que ya ha fallado. */
.tiles .tile .stats:has(.stat.nb-cero) .stat{
  color:var(--nb-ink-3) !important;
}
.tiles .tile .stats:has(.stat.nb-cero) .icon,
.tiles .tile .stats:has(.stat.nb-cero) .icon i{
  color:var(--nb-line-2, #D8D0EC) !important;
}
.tiles .tile .stats.nb-atencion{
  border-color:rgba(212,150,32,0.34) !important;
  box-shadow:inset 3px 0 0 0 #D49620,
             0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
.tiles .tile .stats.nb-atencion .icon,
.tiles .tile .stats.nb-atencion .icon i{color:#B87C10 !important}

/* ══ LA FRANJA DE LO URGENTE ════════════════════════════════
   Los dos paneles que avisan de algo, subidos y puestos juntos justo
   debajo de las cuatro cifras. Se leen como un bloque, no como dos
   tarjetas sueltas perdidas entre las informativas.

   En escritorio van a dos columnas iguales y CON LA MISMA ALTURA: es
   una rejilla con `align-items:stretch`, asi que aunque uno diga dos
   lineas y el otro cuatro, las dos cajas acaban a la misma altura y
   la fila cierra recta. Era justo lo que no pasaba antes, con cada
   panel en su columna y creciendo por su cuenta. */
.main-container .nb-urgente{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px; align-items:stretch;
  margin:0 0 22px;
}
.main-container .nb-urgente > *{
  width:auto !important; max-width:none !important;
  flex:none !important; padding:0 !important; margin:0 !important;
  display:flex; flex-direction:column;
}
.main-container .nb-urgente .panel,
.main-container .nb-urgente .card{
  margin:0 !important; height:100%;
  display:flex; flex-direction:column;
}
.main-container .nb-urgente .panel-body,
.main-container .nb-urgente .card-body{ flex:1 }

/* Filo ambar a la izquierda, el mismo que llevan las cifras que piden
   atencion: si dos cosas de la misma pantalla avisan de lo mismo, que
   se reconozcan entre ellas. */
.main-container .nb-urgente .panel,
.main-container .nb-urgente .card{
  border-color:rgba(212,150,32,0.30) !important;
  box-shadow:inset 3px 0 0 0 #D49620,
             0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16) !important;
}
.main-container .nb-urgente .panel-heading,
.main-container .nb-urgente .card-header{
  background:rgba(212,150,32,0.06) !important;
  border-bottom-color:rgba(212,150,32,0.20) !important;
}
.main-container .nb-urgente .panel-heading i,
.main-container .nb-urgente .card-header i{color:#B87C10 !important}

@media (max-width:575px){
  .main-container .nb-urgente{grid-template-columns:1fr; gap:12px; margin-bottom:16px}
}

/* ── el dato que la tabla escondia, bajo el nombre ───────────
   Va en pequeño y en gris: es contexto, no titular. La etiqueta se
   distingue del valor por peso y no por otro color, para no meter un
   tercer tono en una fila que ya tiene el nombre en violeta y el
   estado en verde. */
.nb-oculto{
  display:flex; flex-wrap:wrap; gap:2px 14px;
  margin-top:5px; line-height:1.45;
}
.nb-oculto .nb-od{
  font-family:var(--nb-ff-b); font-size:0.78rem; white-space:nowrap;
}
.nb-oculto .nb-od-r{
  color:var(--nb-ink-3); font-weight:500;
}
.nb-oculto .nb-od-v{
  color:var(--nb-ink-2); font-weight:600;
}
/* La pildora de estado tambien baja aqui en movil, y dentro de este
   bloque NO se parte: es lo contrario de lo que necesita la tabla. */
.nb-oculto .label,
.nb-oculto .badge,
.nb-oculto .status{
  white-space:nowrap !important; overflow-wrap:normal !important;
  word-break:normal !important; display:inline-block !important;
  padding:3px 10px !important; font-size:0.70rem !important;
  line-height:1.5 !important; height:auto !important; width:auto !important;
}
/* En una tabla ya completa no aparece nunca, pero si el navegador
   ensancha antes de que el JS repase, que no se quede a medias. */
@media (min-width:1200px){ .nb-oculto{display:none} }

/* ══ 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}
/* EL HUECO DEL EXPANSOR. Cuando DataTables esconde columnas —solo en
   movil— marca la tabla con `has-columns-hidden` y mete en la primera
   celda un `span.responsiveExpander`: una banda ABSOLUTA con fondo
   opaco, pegada al borde izquierdo y de altura completa.
   Croster le reservaba el sitio con
     .table-container .listtable .table.datatable.has-columns-hidden
       tbody tr td:first-child{padding-left:60px}      (0,5,3)
   y el `padding:15px 16px !important` de aqui arriba (0,3,2) se lo
   comia: menos especifico, pero con `!important` gana igual. El "+" se
   pintaba ENCIMA del texto y tapaba 28 px de CADA linea de la celda.
   Se leia "minios - Parking Dominio con S" por "Dominios - Parking
   Dominio con DNS", "2350" por "FN-2350" y "ebu: Transferencia de
   Dominio ada" por "Netebu: Transferencia de Dominio Completada", en
   servicios, dominios, facturas y correos a la vez.
   El hueco lleva `!important` porque pelea contra el nuestro, no
   contra el tema. Sin `has-columns-hidden` no hay expansor, asi que
   en escritorio ninguna de las dos reglas llega a aplicarse.

   El expansor se estrecha de los 44 px de Croster a 32: en una
   pantalla de 320 px aquellos eran el 14 % del ancho y los pagaba la
   columna del texto, que tiene que igualar el hueco. Con 32 el "+"
   sigue holgado —su icono son 19 px— y se separa con una linea en
   vez de con un bloque gris, que ademas quita el `#edf0f5`, color
   ajeno a la marca. Las dos reglas van JUNTAS a proposito: el ancho
   del expansor y el hueco que lo compensa son la misma decision, y
   separarlas invita a cambiar uno y romper el otro. */
.main-container .table-container .listtable table.datatable.has-columns-hidden tbody tr td span.responsiveExpander{
  width:32px; background-color:var(--nb-paper-2);
  border-right:1px solid var(--nb-line);
}
.main-container .table-container table.table.has-columns-hidden tbody tr td:first-child{
  padding-left:38px !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;
  /* SE AJUSTA AL TEXTO. Croster declara `.panel-body span{display:block}`
     y una pildora en bloque se estira a todo el ancho de su celda: en la
     tabla del detalle de servicio, «Activo» salia como una barra verde de
     539 px. Una pildora que ocupa la fila entera ya no es una pildora,
     es un fondo de color. */
  display:inline-block !important; width:auto !important;
  max-width:100% !important; vertical-align:middle;
}
.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;
}
/* LOS ESTADOS QUE WHMCS NOMBRA POR SU CUENTA. Las reglas de arriba van
   por el sufijo de Bootstrap (`label-danger`, `label-success`), pero
   WHMCS ademas escribe el suyo propio —`status-unpaid`, `status-paid`,
   `status-suspended`…— y esos NO llevan sufijo de Bootstrap, asi que
   se quedaban con el color crudo del tema.
   Se vio midiendo: «No Pagada» salia blanco sobre el rojo `#D9534F` de
   Bootstrap y daba 3,96:1, por debajo del 4,5 que pide la norma para
   texto de 12 px. Y no es un caso de laboratorio: es la etiqueta que
   marca las facturas que hay que pagar.
   Van agrupados por lo que significan, no por el nombre: si algo va
   mal, rojo; si hay que esperar, ambar; si esta bien, verde; si esta
   acabado, gris. */
.main-container .status-unpaid, .main-container .status-refunded,
.main-container .status-suspended, .main-container .status-terminated,
.main-container .status-fraud, .main-container .status-collections{
  background:rgba(196,69,63,0.12) !important; color:#A32F2A !important;
}
.main-container .status-paid, .main-container .status-completed,
.main-container .status-answered{
  background:rgba(22,138,90,0.12) !important; color:#137048 !important;
}
.main-container .status-draft, .main-container .status-onhold,
.main-container .status-on-hold, .main-container .status-inprogress,
.main-container .status-in-progress, .main-container .status-open,
.main-container .status-customer-reply{
  background:rgba(184,124,10,0.14) !important; color:#8A5B04 !important;
}
.main-container .status-expired, .main-container .status-inactive,
.main-container .label-placeholder{
  background:rgba(20,17,31,0.08) !important; color:#4C4560 !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;
}
/* Y LA `.label` A SECAS, SIN MODIFICADOR. Croster le da `#888` con
   texto blanco —3,5:1— y es la que WHMCS usa para el estado «Cerrado»
   de los tickets: en la lista salian todos en gris plano mientras
   «Activo» ya iba con el verde de la casa, el mismo dato con dos
   lenguajes distintos. Se apunta por descarte porque no hay clase que
   la nombre: es la que NO lleva sufijo de color. */
.main-container .label:not([class*="label-"]):not([class*="status-"]),
.main-container .badge:not([class*="badge-"]):not([class*="status-"]){
  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;
}
/* EL TELEFONO SE MONTABA ENCIMA DE SU PROPIA BANDERA.
   Reportado el 02-09-2026 en Detalles de la cuenta: el numero salia
   escrito debajo del selector de pais, ilegible.

   La culpa era de la regla de aqui arriba, no del tema. `intl-tel-input`
   dibuja la bandera y el prefijo en un contenedor ABSOLUTO sobre el
   borde izquierdo del campo, y se apoya en que el campo reserve hueco
   con `padding-left`. El tema lo reserva, y bien: nueve valores segun
   lo largo que sea el prefijo. Pero los declara SIN `!important`, y
   nuestro `padding:11px 14px !important` se los comia. El texto
   arrancaba en el pixel 14 con la bandera ocupando hasta el 80.

   Pasaba igual con Croster activo: el hook corre en los dos temas, asi
   que esto llevaba roto desde antes del cambio de tema.

   Se devuelven los MISMOS numeros que trae el tema, no unos inventados,
   para que el dia que se toque `intl-tel-input` siga cuadrando. Solo se
   toca el lado izquierdo: el vertical y el derecho siguen siendo los
   nuestros. Gana por especificidad, que es lo que decide cuando los dos
   lados llevan `!important`. */
.main-container .intl-tel-input.allow-dropdown input[type=tel],
.main-container .intl-tel-input.separate-dial-code input[type=tel]{
  padding-left:52px !important;
}
.main-container .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel]{padding-left:66px !important}
.main-container .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel]{padding-left:74px !important}
.main-container .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel]{padding-left:82px !important}
.main-container .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel]{padding-left:90px !important}
.main-container .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel]{padding-left:76px !important}
.main-container .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel]{padding-left:84px !important}
.main-container .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel]{padding-left:92px !important}
.main-container .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel]{padding-left:100px !important}

.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 CAJA DEL PRODUCTO (detalle de servicio y de dominio) ──
   Se habia quedado entera de Croster, con sus tres colores ajenos:
     .product-holder{background:#edf0f5; border:1px solid #d5dce5; border-radius:4px}
     .product-image .fa-circle{color:#8f1faf; border:3px solid #fff;
                               border-radius:25px; transform:rotate(-20deg)}
   Ese icono es un circulo de 60 px GIRADO 20 grados con un borde
   blanco, que es lo que hace que la pantalla se vea de otra epoca. Se
   endereza y se pasa a los colores de la marca. */
.main-container .product-details .product-holder{
  background:var(--nb-paper-2) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  min-height:300px !important;
}
.main-container .product-details .product-holder .product-content .product-image .fa-circle{
  color:var(--nb-violet-aa) !important;
  border:0 !important; border-radius:50% !important;
  transform:none !important;                 /* fuera la rotacion */
}
.main-container .product-details .product-holder .product-footer{
  border-top:1px solid var(--nb-line) !important;
  font-family:var(--nb-ff-b) !important; font-size:0.86rem !important;
  color:var(--nb-ink-2) !important;
}
/* EL BADGE, DENTRO DE SU CAJA. Croster lo saca a proposito con
   `left:-10px` para que asome como un banderin con la esquina doblada.
   Con nuestra chapa redondeada eso ya no se lee como un adorno sino
   como un elemento que se sale, que es justo lo que se veia. */
.main-container .product-details .product-holder .status-sticker-wrapper{
  top:16px !important; left:16px !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;
}
/* Croster la marca con `.active` a secas ademas de con
   `.product-status-active`, y ahi le mete `background:#46a546` y
   `color:#fff`. Sin cubrir las dos, el verde del tema reaparece. */
.main-container .status-sticker.active{
  background:rgba(22,138,90,0.12) !important; color:#137048 !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.
   El `:not(.btn)` del tercer selector NO es adorno: la regla es para
   los enlaces de TEXTO de la cabecera, pero `a` es un selector de
   elemento y alcanzaba tambien a los `<a class="btn btn-primary">`
   que viven ahi. Con (0,2,1) le ganaba a `.main-container
   .btn-primary` (0,2,0) y les pintaba el texto de `--nb-ink` —casi
   negro— sobre el degradado de marca. Se veia en "Invitar Nuevo
   Usuario" de /account/users, negro sobre azul, mientras el resto de
   botones de la misma pagina salian en blanco. */
.main-container .domain-name, .main-container .product-name,
.main-container .section-header a:not(.btn){
  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;
}

/* LAS CASILLAS DE LAS TABLAS (plugin iCheck). Salian como un cuadrado
   MACIZO morado, y no por eleccion de nadie: Croster las dibuja con un
   glifo de "Font Awesome 5 Pro" —fuente de PAGO que este sitio no
   tiene— pidiendo `font-weight:300` (Light) para el cuadrado vacio y
   900 (Solid) para el marcado. Sin la Pro no existe el peso 300, el
   navegador cae al Solid y pinta el cuadrado relleno, ademas en
   `#8f1faf`, que no es de la marca:
     .icheckbox_square-blue:before{content:"\f0c8";font-weight:300;color:#8f1faf}
   Depender de un glifo que no esta es fragil, asi que la casilla se
   dibuja con CSS: caja blanca con borde, y el tic solo al marcarla.
   El tic si usa un glifo, pero `\f00c` en peso 900, que existe en la
   version Free que el sitio SI carga. */
.main-container .icheckbox_square-blue,
.main-container .iradio_square-blue{
  width:18px !important; height:18px !important;
  background:var(--nb-paper) !important;
  border:1.5px solid var(--nb-line-2) !important;
  border-radius:5px !important; position:relative;
  vertical-align:middle; cursor:pointer;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.main-container .iradio_square-blue{ border-radius:50% !important }
/* fuera el cuadrado macizo del tema, en los dos estados */
.main-container .icheckbox_square-blue:before,
.main-container .iradio_square-blue:before{ content:none !important }
.main-container .icheckbox_square-blue.hover,
.main-container .iradio_square-blue.hover{
  border-color:var(--nb-violet) !important;
  box-shadow:0 0 0 3px rgba(123,92,246,0.14) !important;
}
.main-container .icheckbox_square-blue.checked:before{
  content:"\f00c" !important;
  font-family:"Font Awesome 5 Free","Font Awesome 5 Pro","FontAwesome" !important;
  font-weight:900 !important; font-size:11px !important; line-height:1 !important;
  color:var(--nb-ink) !important;
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.main-container .iradio_square-blue.checked:before{
  content:"" !important; position:absolute; top:50%; left:50%;
  width:8px; height:8px; border-radius:50%;
  background:var(--nb-ink) !important; transform:translate(-50%,-50%);
}
.main-container .icheckbox_square-blue.disabled,
.main-container .iradio_square-blue.disabled{
  opacity:0.45; cursor:default;
}
.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;
}
/* ══ QUE NO SE PARTAN LAS PALABRAS ══════════════════════════
   `overflow-wrap:anywhere` es lo que hace caber las tablas en movil,
   pero es indiscriminado: parte DENTRO de una palabra aunque la
   palabra cupiera de sobra en su columna. Con un `Range` sobre cada
   palabra —midiendo la palabra y no la caja— salieron los sitios donde
   eso pasa de verdad.

   Un nombre de dominio, un importe o un identificador NO se parten
   nunca: se leen de una pieza o no se leen. `break-word` en vez de
   `anywhere` es justo esa diferencia — parte solo cuando la palabra
   sola no cabe, y ademas no arrastra hacia abajo el ancho minimo de la
   columna, que es lo que dejaba al nombre del dominio con 41 px. */
.main-container .table-container table.table a,
.main-container .table-container table.table .text-small,
.main-container .table-container table.table small,
.main-container .table-container table.table thead th,
.main-container .table-responsive > table.table thead th,
.main-container .table-responsive > table.table strong{
  overflow-wrap:break-word !important; word-break:normal !important;
}
/* Y los que no se parten en absoluto: dinero e identificadores. */
.main-container .nb-oculto .nb-od-v,
.main-container .table-container table.table .label,
.main-container .table-container table.table .badge{
  overflow-wrap:normal !important; word-break:normal !important;
}

/* ══ TICKETS RECIENTES (la caja lateral de «Abrir ticket») ══
   Su marcado es este, tal cual lo emite el tema:

     <small>
       <span class="pull-right float-right">hace 2 semanas</span>
       <span style="color:#888888">Cerrado</span>
     </small>

   Dos cosas mal, y las dos se arreglan aqui:

   1. `<small>` es `display:inline`, y un elemento en linea NO contiene
      a un `float`. Medido: el span de la fecha terminaba en 362 px
      cuando su propio padre acaba en 152, o sea 210 px fuera de su
      caja. Se resuelve dejando de usar el float: una fila flexible
      pone el estado a la izquierda y la fecha a la derecha, que es lo
      que el `pull-right` intentaba, y ademas se alinean por su base.

   2. El estado lleva el gris `#888888` de Croster EN UN ATRIBUTO
      `style`, y un estilo en linea gana a cualquier hoja externa por
      mucho que pese el selector: sin `!important` no hay forma de
      alcanzarlo. Es la unica manera de que ese texto deje de ser el
      unico gris ajeno que quedaba en el area. */
.main-container .recent-ticket small{
  display:flex !important; justify-content:space-between; align-items:baseline;
  gap:10px; width:100%;
}
.main-container .recent-ticket small .pull-right,
.main-container .recent-ticket small .float-right{
  float:none !important; margin-left:auto; white-space:nowrap;
  color:var(--nb-ink-3) !important;
}
.main-container .recent-ticket small span[style]{
  color:var(--nb-ink-2) !important; font-weight:600;
}

/* ══ LA TABLA DESNUDA DEL DETALLE DE SERVICIO ═══════════════
   En «Gestionar Custom plan», bajo las graficas, hay una tabla con lo
   que de verdad se va a mirar —estado, alta, forma de pago, cuota,
   proximo vencimiento, trafico— y salia SIN CAJA: filas rayadas en
   gris sobre el fondo de la pagina, mientras todo lo que tiene encima
   va en tarjeta blanca con borde y sombra. Parecia pegada de otra
   web, y es lo ultimo que se lee.

   Ninguna medicion lo veia: no desborda, no se solapa y contrasta de
   sobra. Salio mirando la pantalla entera de una vez.

   `border-collapse:separate` no es un capricho: con `collapse` el
   `border-radius` de una tabla no se aplica, y las esquinas salian en
   angulo recto dentro de una pantalla donde todo va redondeado.

   Y LA CAJA SOLO SI HAY DATOS (`:has(td)`). La primera version se la
   daba a toda tabla del panel, y en esta misma pantalla hay dos que
   no tienen ninguna fila: `#tbl_backups` y `#tbl_snapshots`, cuyo
   unico contenido es un boton que el modulo deja en `display:none`
   cuando el plan no admite copias. Estaban ahi desde siempre midiendo
   28 px de nada, invisibles; al ponerles borde y sombra aparecieron
   como dos cajones vacios al final de la pagina. Los saque yo, y se
   quitan pidiendo que la tabla tenga al menos una celda de datos. */
.main-container .tab-content table.table-striped:has(td),
.main-container #tabOverview table.table:has(td){
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important;
  border-collapse:separate !important; border-spacing:0 !important;
  overflow:hidden;
  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 .tab-content table.table-striped td,
.main-container #tabOverview table.table td{
  padding:13px 20px !important; vertical-align:middle !important;
  border-top:1px solid var(--nb-line) !important;
  font-family:var(--nb-ff-b); font-size:0.95rem;
}
.main-container .tab-content table.table-striped tr:first-child td,
.main-container #tabOverview table.table tr:first-child td{
  border-top:0 !important;
}
/* La primera celda es la etiqueta y la segunda el dato: se distinguen
   por peso y color, no por el rayado alterno, que aqui solo aportaba
   ruido sobre una caja que ya separa las filas con su linea. */
.main-container .tab-content table.table-striped tbody tr,
.main-container .tab-content table.table-striped tbody tr:nth-of-type(odd),
.main-container #tabOverview table.table tbody tr,
.main-container #tabOverview table.table tbody tr:nth-of-type(odd){
  background:transparent !important;
}
.main-container .tab-content table.table-striped td:first-child,
.main-container #tabOverview table.table td:first-child{
  color:var(--nb-ink-3) !important; font-weight:500 !important; width:38%;
}
.main-container .tab-content table.table-striped td:last-child,
.main-container #tabOverview table.table td:last-child{
  color:var(--nb-ink) !important; font-weight:600 !important;
  font-variant-numeric:tabular-nums;
}

/* Y sin caja siguen dejando su raya: `.table` de Bootstrap le da
   `border-top` a cada celda, asi que las dos tablas sin datos pintaban
   dos lineas horizontales sueltas al final de la pagina, colgando de
   nada. Sin filas no hay tabla que dibujar. */
.main-container #tabOverview table.table:not(:has(td)),
.main-container #tabOverview table.table:not(:has(td)) th,
.main-container #tabOverview table.table:not(:has(td)) tr,
.main-container .tab-content table.table-striped:not(:has(td)),
.main-container .tab-content table.table-striped:not(:has(td)) th,
.main-container .tab-content table.table-striped:not(:has(td)) tr{
  border:0 !important;
}

/* ══ 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}
/* Y LAS `nav-pills`, QUE NO SON `nav-tabs`. Las de arriba se quedan sin
   cubrir la pastilla activa de las pantallas de certificado —«Dominio»,
   en el detalle de un RapidSSL—, que Bootstrap pinta con el `primary` del
   tema: el #8F1FAF de Croster, a pantalla completa y con texto blanco
   encima. Se estuvo mirando como si fuera un SVG o una imagen y era esto.

   Violeta con contraste, no el de marca a secas: el texto va en blanco
   dentro de la pastilla, y sobre `--nb-violet` se queda en 4,3:1. Con
   `--nb-violet-aa` sube a 5,5:1. */
.main-container .nav-pills .nav-link.active,
.main-container .nav-pills .show > .nav-link{
  background-color:var(--nb-violet-aa) !important;
  color:#FFFFFF !important; border-radius:10px !important;
}
.main-container .nav-pills .nav-link:not(.active){
  color:var(--nb-ink-2) !important;
}
.main-container .nav-pills .nav-link:not(.active):hover{
  color:var(--nb-violet-aa) !important; background:var(--nb-paper-2) !important;
}
/* ══ BARRIDO DE COLORES AJENOS ══════════════════════════════
   Recorriendo el DOM de diecinueve pantallas del area y comparando el
   color CALCULADO de cada elemento visible contra la lista de colores
   de Croster salieron 39 puntos que se habian quedado sin cubrir.
   Van agrupados por color, que es como se encuentran.

   El barrido se hace con los dos filtros que evitan los falsos
   positivos: el `color` solo cuenta en elementos con un nodo de texto
   PROPIO —si no, es la herencia del body y no pinta nada— y el
   `border-color` solo si el borde existe de verdad, porque computa a
   `currentColor` aunque mida 0 px. */

/* ── #d5dce5, el borde gris azulado. El mas extendido: 24 veces solo
      en el buscador de las tablas, que sale en cinco pantallas.
      OJO con el buscador: NO cuelga de `.main-container` sino del
      HERO —`.hero-bg-wrap > .container > .page-title > .header-lined`—,
      asi que acotarlo al contenedor del area no le llega. Se nombra
      por su id, que es unico, y el hook ya filtra por ruta. ── */
#table-search,
.dataTables_length,
.dataTables_length select,
.dataTables_length label,
.main-container .panel-heading,
.main-container .selected-flag,
.main-container .card-footer,
.main-container .section.network-status,
.main-container .card-body.p-0{
  border-color:var(--nb-line) !important;
}
/* la tabla de la factura: bordes de celda y filas de totales */
.main-container .TM-card.invoice td,
.main-container .TM-card.invoice th,
.main-container .TM-card.invoice .total-row{
  border-color:var(--nb-line) !important;
}

/* ── #edf0f5, el gris de fondo ── */
.main-container .card-footer{
  background-color:var(--nb-paper-2) !important;
}

/* ── #211b65, el azul marino. Croster lo declara en `body` y estos
      elementos nunca lo vuelven a declarar, asi que se quedaron con
      el suyo. Son todos texto con nodo propio: pintan de verdad. ── */
.main-container .TM-card.invoice strong,
.main-container .TM-card.invoice address,
.main-container .TM-card.invoice span.title,
.main-container .user-list-item-profile-email,
.main-container .user-list-item-profile-lastlogin,
.main-container .user-list-item-profile-name,
.main-container .card-item-name,
.main-container .twofa-config-link,
.main-container .primary-content p,
.main-container strong.fw-500{
  color:var(--nb-ink-2) !important;
}
.main-container .primary-content h4,
.main-container .TM-card h4{
  color:var(--nb-ink) !important;
}

/* ── #8f1faf, el morado de Croster ── */
.main-container .text-domain{ color:var(--nb-violet-aa) !important }
/* el interruptor de las preferencias de «Detalles de la cuenta» */
.main-container .switch__container,
.main-container .switch input:checked + .switch__container{
  background:var(--nb-grad) !important;
  background-color:transparent !important;
}
/* la lista de «Añadir saldo» y el bloque de estado de servidores */
.main-container ul.list-info,
.main-container ul.list-info > li,
.section.network-status,
.section.network-status .panel,
.section.network-status .panel-body,
.section.network-status td,
.section.network-status th,
.main-container .panel-body{
  border-color:var(--nb-line) !important;
}
.main-container label.text-base,
.section.network-status label{
  color:var(--nb-ink-2) !important;
}

/* ── SOLO EN MOVIL. Estos dos no aparecen barriendo el escritorio,
      porque los elementos no existen ahi: los puntos del carrusel de
      cifras del inicio —que Croster pinta con su magenta `#e42fd2`—
      y el borde de la paginacion de las tablas. Es el recordatorio de
      que el barrido de color hay que pasarlo en TODOS los anchos, no
      solo en uno. ── */
.main-container .swiper-pagination-bullet{
  background:var(--nb-line-2) !important;
  border-color:var(--nb-line-2) !important; opacity:1;
}
.main-container .swiper-pagination-bullet-active{
  background:var(--nb-grad) !important;
  border-color:transparent !important;
}
.main-container .dataTables_paginate{
  border-color:var(--nb-line) !important;
}
/* el h4 de la factura llevaba el morado en el borde inferior */
.main-container .TM-card.invoice h4{
  border-color:var(--nb-line) !important;
}

/* ── EL TICKET ABIERTO (viewticket.tpl) ─────────────────────
   Esta pantalla se habia auditado con una URL invalida —WHMCS pide el
   `tid` Y el hash `c`, y sin el devuelve «No se encontro el ticket»—,
   asi que lo que se estaba midiendo era la pagina de error. Con un
   ticket de verdad salen cuatro puntos de Croster: la linea del
   asunto, su texto en negrita, y la cabecera de cada respuesta, que va
   sobre el gris azulado `#EDF0F5`. */
.main-container .primary-content .border-bottom,
.main-container .primary-content .border-bottom strong{
  color:var(--nb-ink) !important;
  border-color:var(--nb-line) !important;
}
.main-container .ticket-reply .posted-by,
.main-container .markdown-content .posted-by{
  background:var(--nb-paper-2) !important;
  border-bottom:1px solid var(--nb-line) !important;
}
/* Y lo que va dentro de esa cabecera: el nombre de quien escribe, la
   fecha y el circulo del avatar. No salian en el primer barrido porque
   el fondo de su contenedor los tapaba: al corregirlo aparecieron
   debajo. Es lo normal cuando se destapa una capa. */
.main-container .posted-by .posted-by-name,
.main-container .posted-by .posted-on,
.main-container .posted-by .name span{
  color:var(--nb-ink-2) !important;
}
.main-container .posted-by .posted-by-name{ color:var(--nb-ink) !important }
.main-container .user-avatar,
.main-container .user-avatar i,
.main-container .avatar-mid,
.main-container .avatar-mid i{
  border-color:var(--nb-line) !important; color:var(--nb-ink-3) !important;
}

/* Lo que queda de Croster en el ticket, sacado de una vez en vez de
   capa por capa: el cuerpo de cada respuesta, el titulo de «Responder»,
   los botones del editor de texto, el campo de adjuntos y el pie de esa
   caja. */
.main-container .ticket-reply .message,
.main-container .message.p-3,
.main-container #ticketReplyContainer .card-title,
.main-container .custom-file-label{
  color:var(--nb-ink) !important;
}
.main-container .custom-file-label,
.main-container .md-header .btn,
.main-container .md-header .btn-default,
.main-container .md-header .btn-sm{
  border-color:var(--nb-line) !important;
}
.main-container .md-footer{
  background:var(--nb-paper-2) !important;
  border-top:1px solid var(--nb-line) !important;
}

/* ── EL PRESUPUESTO (viewquote.tpl) ─────────────────────────
   Esta pantalla estaba fuera del filtro de rutas del hook, asi que no
   le llegaba NADA: su boton «Aceptar Presupuesto» salia con el morado
   de Croster. Añadido `viewquote` a la lista, el boton ya coge el
   degradado de la marca, pero quedan cuatro puntos que no alcanzan los
   selectores de la factura porque el presupuesto usa clases propias:
   el numero, los totales, los titulillos y la direccion. */
.main-container .quote-title .title,
.main-container .quote-info .title,
.main-container .text-right strong,
.main-container .quote-items strong{
  color:var(--nb-ink) !important;
}
.main-container address{
  color:var(--nb-ink-2) !important;
}
/* El titulillo real cuelga de `.TM-card.quote > .section`, no de la
   columna: apuntando a `.col-sm-7 h4` no le llegaba. Y el bloque de la
   propuesta va en un `.well`, que Croster pinta en su azul marino. */
.main-container .TM-card.quote h4,
.main-container .TM-card.quote .section h4,
.main-container .quote-info h4{
  color:var(--nb-ink) !important; border-color:var(--nb-line) !important;
}
.main-container .TM-card.quote .well,
.main-container .well{
  color:var(--nb-ink-2) !important;
  background:var(--nb-paper-2) !important;
  border:1px solid var(--nb-line) !important; border-radius:12px !important;
  /* Y EL RELLENO, QUE NO LO PONE NADIE. `.well` es de Bootstrap 3 y el
     tema va con el 4, donde esa clase ya no existe: no trae padding
     propio. Aqui arriba le dabamos fondo, borde y radio, asi que parecia
     una caja de verdad, pero el texto salia pegado a los cuatro bordes.
     Se ve en «Instalando su certificado» y en «Como utilizar el codigo
     del sello del sitio», las dos pantallas del modulo de SSL, que son
     las que todavia emiten `.well`. Los 22 px son los mismos que usan
     las demas cajas del area. */
  padding:22px 24px !important;
}

/* ── LO QUE QUEDABA EN LAS PANTALLAS DE DETALLE ──────────────
   Barriendo dominio por dominio y servicio por servicio a 390, 768 y
   1440 px salieron tres puntos que ningun selector de arriba alcanza,
   porque no cuelgan de `.table-container` ni de `.TM-card`.

   El nombre del dominio es el mas visible de los tres: es el titular
   de su propia pagina y salia en el azul marino de Croster mientras
   el resto del area ya iba en violeta. */
.main-container .product-content h4 a,
.main-container .product-content h4{
  color:var(--nb-violet-aa) !important;
}
.main-container .product-info,
.main-container .product-info + .product-info{
  border-color:var(--nb-line) !important;
}
/* Las tablas que pintan los modulos —la de copias de seguridad de
   SolusVM, por ejemplo— no pasan por `.table-container` y se quedaban
   con el gris azulado de Croster en cada celda. */
.main-container table td, .main-container table th,
.main-container table thead, .main-container table tbody,
.main-container table tfoot, .main-container table tr{
  border-color:var(--nb-line) !important;
}

/* ══ FACTURA (viewinvoice.tpl) ══════════════════════════════ */
/* AIRE DENTRO DE LAS CAJAS. Las `.section` de la factura traen borde y
   `border-radius:16px` de Croster pero `padding:0`, asi que su
   contenido tocaba el borde: medido, «Pagar a:» empezaba en 737 px y su
   caja en 735. Dos pixeles. Lo mismo en «Facturado a:» y en
   «Productos/Servicios», y el resultado es que todo se lee montado.
   Ademas los margenes eran asimetricos —60 px arriba y 20 abajo—, que
   separa los bloques de forma desigual segun se mire.
   Con relleno propio el aire pasa de 2 a 23 px. */
.main-container .TM-card.invoice .section{
  padding:22px 24px !important;
  margin:22px 0 0 !important;
}
.main-container .TM-card.invoice > .section:first-of-type{ margin-top:0 !important }
.main-container .TM-card.invoice .section > u,
.main-container .TM-card.invoice .section > strong{ margin-bottom:14px !important }

.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}

/* MIGRADO A templates/netebu/assets/css/netebu-navbar.css (F3.6): los mensajes de ayuda del megamenú.
   Era CSS de la barra viviendo en el hook del área de cliente, y con !important: ganaba a la hoja
   del tema y dejaba "Panel Principal" en violeta de enlace en vez de blanco. Un elemento, un sitio. */
/* ══ 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;
}
/* EL BOTON SE SALIA DEL PANEL. Medido: el panel acaba en el pixel
   1547 y el boton en el 1556, nueve fuera en escritorio y treinta y
   dos en movil, con la mitad del degradado cortada por el borde de la
   tarjeta. El modulo mete el boton DENTRO del parrafo de datos y ese
   parrafo hereda el relleno de abajo del cuerpo, que ya se habia
   gastado. Se le devuelve el aire al cuerpo y el boton pasa a bloque,
   con su propio margen. */
/* LO QUE SOBRABA ERA EL `max-height`, NO EL `overflow`. Y ponerlo al
   reves lo empeoro: el tema declara
   `.client-home-panels .panel .panel-body{max-height:323px; overflow:auto}`,
   o sea un scroll interno para que ningun panel crezca. Al forzar aqui
   `overflow:visible` sin tocar el limite de altura, se quedo el limite
   y se fue el scroll: el contenido dejo de poder desplazarse y empezo a
   derramarse por debajo del borde, con el boton medio cortado. Se
   levanta el limite, y entonces el panel crece a lo que mide su
   contenido y no hace falta scroll ninguno.
   El `overflow:hidden` del panel padre tambien se levanta: recortaba lo
   que asomara aunque el cuerpo ya lo dejara pasar. */
.main-container .panel[menuitemname="SolusVM2Panel"]{
  overflow:visible !important;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .panel-body{
  max-height:none !important; height:auto !important;
  overflow:visible !important;
  padding-bottom:20px !important;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .solusvm2-home-block{
  margin-bottom:0 !important; overflow:visible !important;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .panel-body .btn{
  display:block !important; width:100%; text-align:center;
  margin:16px 0 0 !important;
}

/* EL AVISO, CON EL COLOR DE LA CASA Y NO EL AZUL DE BOOTSTRAP.
   Venia como `.alert-info`, con el azul generico del framework y
   esquinas de bocadillo de chat: parecia un mensaje de ayuda y no un
   aviso de cobro. Es lo mismo que dicen las dos tarjetas de arriba, y
   ahora se reconoce como tal: mismo ambar, mismo filo a la izquierda.

   NO se oculta aunque repita, porque dice algo que las otras no: que
   la cuenta tiene restricciones puestas. Eso no lo cuenta nadie mas. */
.main-container .panel[menuitemname="SolusVM2Panel"] .alert-info{
  background:rgba(212,150,32,0.08) !important;
  border:1px solid rgba(212,150,32,0.26) !important;
  border-left:3px solid #D49620 !important;
  border-radius:12px !important;
  color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-b) !important; font-size:0.92rem !important;
  padding:13px 15px !important; margin:0 0 14px !important;
}

/* Los tres datos del servicio, como pares y no como un parrafo con
   saltos de linea. El modulo los escribe «Estado: active<br>Servidores
   activos:1/1<br>Uso del periodo actual:17,84€» —sin espacio tras los
   dos puntos, ademas— y quedaban como un bloque de texto corrido. */
.main-container .panel[menuitemname="SolusVM2Panel"] .solusvm2-home-block{
  font-family:var(--nb-ff-b) !important; color:var(--nb-ink-2) !important;
  font-size:0.94rem !important; line-height:2 !important;
}
.main-container .panel[menuitemname="SolusVM2Panel"] .solusvm2-home-block b,
.main-container .panel[menuitemname="SolusVM2Panel"] .solusvm2-home-block strong{
  color:var(--nb-ink) !important; font-weight:700 !important;
}

/* ── 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;
}

/* ══ MOVIL: QUE TODO QUEPA EN LA PANTALLA ═══════════════════
   Medido a 390 y a 320 px, con sesion de cliente. Las tablas del
   area no caben porque DataTables deja hasta cuatro columnas y
   NINGUNA puede encoger: el badge de estado va con `nowrap`, las
   cabeceras tambien, y el relleno lateral son 16 px por celda.
   Facturas medía 457 px dentro de 358 disponibles. */
@media (max-width:575px){
  /* Menos relleno lateral: 16 -> 10 px. No hace falta repetir aqui el
     hueco del expansor: su selector es (0,5,4) y este (0,3,3), asi que
     gana el de arriba aunque vaya antes en la hoja. */
  .main-container .table-container table.table thead th,
  .main-container .table-container table.table tbody td{
    padding-left:10px !important; padding-right:10px !important;
  }
  /* las cabeceras pueden partirse: "Factura Nº" en dos lineas ocupa
     la mitad y la columna deja de empujar al resto */
  .main-container .table-container table.table thead th{
    white-space:normal !important;
  }
  /* Y QUE LAS PALABRAS PUEDAN PARTIRSE. Esto es lo que de verdad
     hace caber la tabla: sin ello, el numero de factura mas largo
     ("RFN2026004") fija el ancho minimo de su columna y no hay
     relleno que recortar que lo compense. Medido a 320 px: la tabla
     pasa de 357 a 288 —el ancho exacto del hueco— en facturas,
     servicios y dominios a la vez, y sin tocar el tamaño de letra.
     `anywhere` y no `break-word`: solo `anywhere` cuenta para el
     ancho minimo de la columna, que es el numero que manda aqui.
     Parte dentro de una palabra unicamente cuando esa palabra sola
     no cabe; mientras haya espacios, parte por los espacios. */
  /* SOLO LA PRIMERA COLUMNA ABSORBE.
     `anywhere` es lo que hace caber la tabla, pero es lo unico del CSS
     que ademas REDUCE el ancho minimo de una columna hasta un caracter:
     donde se pone, el navegador se cree con permiso para estrecharla
     todo lo que quiera y partir por dentro. Puesto en todas las celdas
     partia lo que no debe partirse nunca: «11» en una columna de 36 px
     donde cabe de sobra, «spv86.netebu.eu» y una IPv6 en la factura.

     La que tiene que ceder es la primera, que es la del nombre y la que
     lleva el bloque de datos; las demas se quedan con `break-word`, que
     parte solo cuando la palabra sola no entra y no arrastra el minimo
     hacia abajo. Medido despues: las tablas siguen cabiendo en 320. */
  .main-container .table-container table.table thead th,
  .main-container .table-container table.table tbody td{
    overflow-wrap:break-word;
  }
  .main-container .table-container table.table thead th:first-child,
  .main-container .table-container table.table tbody td:first-child{
    overflow-wrap:anywhere;
  }
  /* PERO LOS IMPORTES NO SE PARTEN. `anywhere` es indiscriminado y en
     la columna de Total dejaba "-311,07€" partido como "-311,0" y
     "7€" en la linea siguiente. Un numero de dinero roto no es feo:
     es que se lee mal, y aqui son facturas. Se le devuelve el
     `nowrap` a esa columna y la tabla sigue cabiendo —medido a 390,
     360 y 320 px, sobra 0 en los tres—, porque el reparto lo absorbe
     la primera columna, que si puede partir.
     Acotado a facturas y dentro de esta media query a proposito: en
     este rango DataTables deja cuatro columnas y la segunda es
     siempre Total. */
  .main-container #tableInvoicesList thead th:nth-child(2),
  .main-container #tableInvoicesList tbody td:nth-child(2){
    overflow-wrap:normal !important; white-space:nowrap !important;
  }
  /* EL RELLENO DE LAS CELDAS, DE VERDAD.
     Arriba hay una regla que baja el relleno lateral a 10 px, pero
     medido a 320 seguia dando 20: la pisa el selector del expansor de
     DataTables, que pesa (0,5,4) contra los (0,3,3) de aquella. Se
     repite con el peso suficiente en vez de subirle el peso a la otra,
     que sirve para mas cosas. Son 20 px por celda y a 320 px eso es la
     diferencia entre caber y no caber. */
  .main-container .table-container table.table thead th,
  .main-container .table-container table.table tbody td{
    padding-left:10px !important; padding-right:10px !important;
  }
  /* Y QUE LA TABLA NUNCA PASE DE SU HUECO. En «Mis Dominios» a 320 px
     sobraba UN pixel: el reparto de anchos de la tabla lo calcula el
     navegador y a veces redondea hacia arriba. Un pixel no se ve, pero
     enciende la barra de scroll horizontal de toda la pagina, que si
     se nota. Con esto la tabla no puede pasar de su contenedor pase lo
     que pase con el redondeo. */
  .main-container .table-container table.table{
    max-width:100% !important;
  }

  /* EN LAS PANTALLAS MAS ESTRECHAS, EL BLOQUE PUEDE PARTIR.
     `.nb-od` va en `nowrap` para que el rotulo y su valor no se
     separen nunca —«Vence» arriba y la fecha abajo no se lee—, y eso
     le da a cada trozo un ancho indivisible: «Registrado 19/05/2026»
     mide 134 px y fijaba la columna del nombre en 174.

     En «Mis Dominios» eso no cabe a 320: su primera celda lleva DOS
     controles, el expansor y la casilla de seleccion, y necesita sus
     50 px; con los 81 de la columna de acciones quedaban 288 para
     repartir y hacian falta 307.

     Por debajo de 400 px se le deja partir. Se pierde el renglon
     limpio, pero el dato entero se sigue leyendo, que es lo que
     importa: mas vale «Registrado» y la fecha en dos lineas que la
     tabla saliendose de la pantalla. */
  @media (max-width:400px){
    .main-container .nb-oculto .nb-od{ white-space:normal !important }
    .main-container .nb-oculto{ gap:2px 10px }
  }

  /* A 360 Y POR DEBAJO, UN PUNTO MAS DE APRIETE.
     En «Mis Dominios» a 320 px la tabla acababa en 320,7: se pasaba
     SIETE DECIMAS. No se ve, pero enciende la barra de scroll
     horizontal de la pagina entera, y eso si se nota al arrastrar.
     `max-width` no lo arregla —una tabla no encoge por debajo de su
     ancho minimo intrinseco, y ese minimo es la suma de lo que sus
     celdas no pueden ceder—, asi que se cede donde de verdad hay
     margen: en el relleno. Quedan 20 px para el expansor, que mide 22
     y va absoluto, y 6 a cada lado en el resto de celdas. */
  @media (max-width:360px){
    /* Se nombran tambien las clases que el tema le pone a cada celda
       —`col-small`, `center`, `expand`— porque con ellas hay reglas mas
       especificas que las genericas y el relleno se quedaba en 20 px
       pese a pedir 6. Es el mismo tropiezo del hueco del expansor: aqui
       no vale con acertar el elemento, hay que igualar el peso. */
    .main-container .table-container table.table thead th,
    .main-container .table-container table.table tbody td,
    .main-container .table-container table.table thead th.col-small,
    .main-container .table-container table.table tbody td.col-small,
    .main-container .table-container table.table tbody td.center,
    .main-container .table-container table.table tbody td.col-small.center{
      padding-left:6px !important; padding-right:6px !important;
    }
    .main-container .table-container table.table.has-columns-hidden tbody tr td:first-child{
      padding-left:20px !important;
    }
    .main-container .table-container table.table td .btn-link,
    .main-container .table-container table.table td .action-buttons .btn,
    .main-container .table-container table.table td form .btn{
      padding-left:7px !important; padding-right:7px !important;
    }
  }

  /* EL HUECO DEL EXPANSOR, MAS ESTRECHO EN MOVIL.
     La regla de arriba no llegaba a la primera celda y costo encontrar
     por que: la pisa esta otra, tambien nuestra, que reserva sitio al
     «+» de DataTables con `…table.has-columns-hidden tbody tr
     td:first-child{padding-left:38px}` — cinco clases y cuatro tipos,
     (0,5,4), contra los (0,3,3) de aquella. Entre dos `!important`
     manda la mas especifica, y la media query no añade peso ninguno.

     Asi que se repite el MISMO selector aqui dentro: mismo peso, y al
     ir despues en la hoja gana. 38 px es el hueco comodo del escritorio;
     a 320 px son 38 px que no estan. Con 26 el «+» sigue cabiendo —mide
     32 y va absoluto, no empuja— y su area pulsable no cambia. */
  .main-container .table-container table.table.has-columns-hidden tbody tr td:first-child{
    padding-left:26px !important;
  }
  .main-container .table-container table.table.has-columns-hidden tbody tr td:first-child
    .responsiveExpander{
    width:22px !important;
  }

  /* LOS CONTROLES, CON SU AREA DE 24 px.
     La casilla de seleccion de «Mis Dominios» mide 13x13 reales y los
     iconos de accion 15x23: por debajo de los 24x24 que pide la norma
     para un objetivo tactil. No se agrandan —el dibujo esta bien como
     esta y agrandarlo descuadraria la fila—, se les pone debajo un
     area transparente centrada, que es lo que se pulsa. Es la misma
     solucion que ya llevan los puntos del carrusel. */
  .main-container .table-container table.table td .icheckbox_square-blue,
  .main-container .table-container table.table td .btn-link,
  .main-container .table-container table.table td .action-buttons a,
  .main-container .table-container table.table td form .btn{
    position:relative;
  }
  .main-container .table-container table.table td .icheckbox_square-blue::after,
  .main-container .table-container table.table td .btn-link::after,
  .main-container .table-container table.table td .action-buttons a::after,
  .main-container .table-container table.table td form .btn::after{
    content:""; position:absolute; top:50%; left:50%;
    width:24px; height:24px; transform:translate(-50%,-50%);
  }
  /* Y los enlaces de la fila —el nombre del dominio, el numero de
     factura— llegan a 24 de alto con relleno propio, sin cambiar de
     tamaño de letra. */
  .main-container .table-container table.table td > a,
  .main-container .table-container table.table td > .text-small,
  .main-container .table-container table.table td > .text-domain{
    display:inline-block; padding-top:3px; padding-bottom:3px;
  }

  /* LAS CELDAS DE CONTROL NO SON CELDAS DE TEXTO.
     Medido en «Mis Dominios» a 320 px: la columna de la casilla de
     seleccion ocupaba 58 px —40 de relleno para un cuadradito de 18— y
     la del boton «...» otros 101, de los cuales 40 son relleno de la
     celda y 40 mas del propio boton, para un icono. Entre las dos se
     llevaban 159 de los 288 disponibles y la tabla se iba 31 px fuera.
     Lo mismo en Servicios y en Presupuestos.

     El relleno de 20 px esta para que un texto respire dentro de su
     celda; una casilla y un icono no respiran. Se les deja 8, que sigue
     separandolos del borde, y el area pulsable del boton no baja de los
     24 px que pide la norma porque el icono ya mide 16 y le quedan 10
     de relleno a cada lado.

     Se apuntan por lo que CONTIENEN (`:has()`) y no por su posicion: la
     columna de acciones esta la ultima en Facturas, la primera en
     Dominios y en medio en Presupuestos. */
  .main-container .table-container table.table td:has(> .icheckbox_square-blue),
  .main-container .table-container table.table td:has(> .action-buttons),
  .main-container .table-container table.table td:has(> .dropdown-menu),
  .main-container .table-container table.table td:has(> .btn-link),
  .main-container .table-container table.table td:has(> form){
    padding-left:8px !important; padding-right:8px !important;
  }
  .main-container .table-container table.table td .btn-link,
  .main-container .table-container table.table td .action-buttons .btn,
  .main-container .table-container table.table td form .btn{
    padding-left:10px !important; padding-right:10px !important;
  }

  /* LA COLUMNA DE ESTADO NO CABE, Y NO ES CUESTION DE ENSANCHARLA.
     Medido a 390 px en Facturas: la tabla ocupaba 415 px dentro de
     358 —57 fuera— con cuatro columnas de 245+79+47+45. La de Estado
     mide 47 px, y con el `overflow-wrap:anywhere` de aqui arriba
     —que es justo lo que hace caber el resto— "No Pagada" se partia
     LETRA A LETRA: la pildora quedaba en 27 px de ancho por 184 de
     alto y estiraba la fila entera a 215. Diez filas asi no son una
     tabla, son una pantalla ilegible. La cabecera igual: "EST ADO".

     Se saca de la tabla en vez de estrecharla: el JS clona la pildora
     dentro del bloque que ya va bajo el numero de factura, junto a
     las fechas, y aqui se esconde su columna. Quedan tres columnas y
     la tabla cabe. Y de paso el estado se lee al lado de su fecha,
     que es como se mira una factura.

     La clase la pone el JS por fila; el `th` se marca por su indice. */
  .main-container .table-container table.table th.nb-col-estado,
  .main-container .table-container table.table td.nb-col-estado{
    display:none !important;
  }

  /* EL BADGE DE ESTADO. Era `nowrap` y `display:block`, asi que
     "Pago Devuelto" fijaba el solo 105 px de columna. Acotado a la
     tabla: el mismo `.label` se usa en otras pantallas del area. */
  .main-container .table-container table.table .label,
  .main-container .table-container table.table .badge,
  .main-container .table-container table.table .status{
    white-space:normal !important; display:inline-block !important;
    padding:4px 9px !important; font-size:0.70rem !important;
  }
  /* LA PAGINACION. Mis E-Mails tiene 20 paginas y la fila entera
     medía 403 px: que pase a la linea siguiente en vez de salirse.
     No se toca el margen de los `li`, que lo fija el bloque de
     arriba; solo el hueco entre filas. */
  .main-container ul.pagination{
    flex-wrap:wrap !important; justify-content:center; row-gap:6px;
  }
  .main-container ul.pagination li.page-item > a,
  .main-container ul.pagination li.page-item > .page-link{
    padding:0 9px !important;
  }
  /* GESTION DE USUARIOS. `.user-list` es un flex `nowrap` con dos
     mitades; la segunda —etiqueta "Propietario" y botones— se salia
     hasta los 405 px y la tarjeta la recortaba con `overflow:auto`.
     Y los correos largos no rompian: `overflow-wrap` estaba en
     `normal` y una direccion no tiene donde partirse. */
  .main-container .user-list{ flex-wrap:wrap !important; gap:8px }
  .main-container .user-list > *{ min-width:0 }
  .main-container .user-list-item-actions{ margin-left:auto }
  /* `break-word` y no `anywhere`: «comunicacion@attiva.es» mide 150 px
     y cabe en 320, pero con `anywhere` se partia igual. Que parta solo
     cuando de verdad no entre. */
  .main-container .user-list-item-profile-email,
  .main-container .user-list-item-profile-name{ overflow-wrap:break-word }

  /* LA FACTURA. Sus dos tablas cuelgan de `.table-responsive`, no de
     `.table-container`, asi que nada de lo de arriba les llegaba. La
     de transacciones medía 459 px dentro de 308: Bootstrap le da
     scroll horizontal propio, de modo que la pagina no se rompe
     —`document.scrollWidth` daba 390 y parecia sana— pero el cliente
     ve "ID Tra..." y "Bal..." y tiene que arrastrar dentro de la
     tabla para leer su propia factura. Y a 320 px desbordaba tambien
     la de lineas, 19 px.
     Con esto las dos caben enteras: 308, 278 y 238 px de ancho segun
     la pantalla, sin scroll interno. */
  .main-container .table-responsive > table.table th,
  .main-container .table-responsive > table.table td{
    overflow-wrap:break-word !important;
    padding-left:9px !important; padding-right:9px !important;
  }
  /* La de lineas son DOS columnas y caben (134 + 88 = 222 justos), asi
     que aqui NO hace falta que nada ceda: con `anywhere` se partia
     «spv86.netebu.eu» y una IPv6 dentro de la descripcion, cuando hay
     espacios de sobra por donde cortar. Se queda en `break-word`. */
  /* y la columna del dinero, otra vez sin partir. El `:not([colspan])`
     no es adorno: la fila "No se encontraron transacciones
     relacionadas" es un `td` con colspan y ES a la vez el ultimo de
     su fila, asi que el `nowrap` la estiraba a 347 px y devolvia el
     desborde que acababamos de quitar. */
  .main-container .table-responsive > table.table th:last-child:not([colspan]),
  .main-container .table-responsive > table.table td:last-child:not([colspan]){
    overflow-wrap:normal !important; white-space:nowrap !important;
  }
  /* en movil, 24 px de relleno se comen la mitad del ancho util */
  .main-container .TM-card.invoice{ padding:16px !important }
  .main-container .TM-card.invoice .section{
    padding:16px !important; margin-top:16px !important;
  }
  /* EL PANEL DE SERVICIOS DEL INICIO. El nombre del servicio se salia
     13 px de su tarjeta con nombres largos («Server Sync Tool
     Auto-Created Products - Custom plan…»).
     Y `overflow-wrap` SOLO no basta: `.div-service-name` es un flex con
     `min-width:auto`, y ese es el valor que impide a un item encoger por
     debajo de su contenido. Medido: 369 px de hijo dentro de un padre de
     323. Hace falta `min-width:0` en la cadena para que el wrap pueda
     siquiera entrar en juego. Es la misma trampa de flex que documenta
     la skill netebu-design. */
  .main-container .div-service-name,
  .main-container .div-service-item{
    min-width:0 !important;
  }
  /* Y lo que de verdad lo impedia: los hijos van con
     `white-space:nowrap`, y con eso NO rompe por mucho `overflow-wrap`
     que se le ponga —`nowrap` prohibe todo salto, y `anywhere` solo
     dice DONDE partir cuando se puede partir—. Hay que levantar las
     tres cosas a la vez: poder encoger, poder romper, y donde. */
  .main-container .div-service-name,
  .main-container .div-service-name > *,
  .main-container .text-domain{
    white-space:normal !important;
    overflow-wrap:anywhere; min-width:0;
  }
}