/* ══ Netebu · apartado Soporte ═════════════════════════════════ */
:root{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.16) 0%,rgba(123,92,246,0.16) 50%,rgba(232,64,152,0.16) 100%);
  --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85;
  --nb-line:#E9E4F3; --nb-line-2:#D8D0EC;
  --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE;
  --nb-violet-aa:#7656F6; --nb-ok:#0F9268; --nb-no:#C4453F;
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
}
.main-container{
  font-family:var(--nb-ff-b);
  padding-top:8px; padding-bottom:56px;
  /* Croster declara `body{color:#211b65}` y NADA dentro de estas
     pantallas vuelve a declararlo: todo el texto lo hereda. Basta con
     fijarlo aqui para que baje a todo, sin tocar ni un selector
     generico de `p`, `span` o `li`. */
  color:var(--nb-ink-2);
}
/* Croster declara h1..h4{color:#211b65} sobre el elemento */
.main-container h1,.main-container h2,.main-container h3,
.main-container h4,.main-container h5,
.main-container .h1,.main-container .h2,.main-container .h3{
  font-family:var(--nb-ff-d) !important; color:var(--nb-ink) !important;
  letter-spacing:-0.022em;
}
.main-container > .row > .primary-content > h4,
.main-container .section > h4{
  font-weight:700 !important; font-size:1.42rem !important;
  margin-bottom:10px !important;
}
.main-container p.desc,
.main-container p.text-muted{
  color:var(--nb-ink-2) !important; font-size:0.985rem; line-height:1.65;
  margin-bottom:26px;
}
.main-container .section{margin-bottom:38px}
.main-container a{color:var(--nb-violet-aa)}
.main-container a:hover{color:var(--nb-violet)}

/* Toda caja del tema, no solo la barra lateral: en movil aparece
   una `.card.d-block.d-md-none.bg-light` que NO lleva `.card-sidebar`
   y se quedaba con el gris azulado del tema. `.bg-light` de Bootstrap
   trae `!important`, asi que hay que responder con el mismo. */
.main-container .card{
  background:var(--nb-paper) !important;
  border-color:var(--nb-line) !important;
}
.main-container .card-header{
  background:var(--nb-paper-2) !important;
  border-color:var(--nb-line) !important;
}
.main-container .kbarticles,
.main-container .kbcat{
  border-color:var(--nb-line) !important;
}

/* El banner de cabecera vive ahora en netebu_banner.php: lo usan
   tambien las paginas legales y el area de cliente, asi que no
   puede depender del filtro de rutas de este hook. */

/* La barra lateral vive ahora en netebu_clientes.php: es el MISMO
   componente del tema (.card.card-sidebar) que usa el area de
   cliente, y no puede depender del filtro de rutas de este hook. */

/* ── abrir ticket: las tarjetas de departamento ───────────── */
.main-container .ticket-departments .row > [class*="col-"]{margin-bottom:18px}
.main-container .ticket-departments a{
  display:block; height:100%;
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:15px !important; padding:26px 24px !important;
  text-decoration:none !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.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}
.main-container .ticket-departments a:hover{
  transform:translateY(-4px); border-color:var(--nb-violet) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.05), 0 24px 48px -24px rgba(90,60,200,0.32);
}
.main-container .ticket-departments h5.name{
  font-family:var(--nb-ff-d) !important; font-weight:700 !important;
  font-size:1.12rem !important; color:var(--nb-ink) !important;
  margin-bottom:8px !important; display:flex; align-items:center; gap:11px;
}
.main-container .ticket-departments h5.name i{
  flex:0 0 20px; width:20px; text-align:center; font-size:1rem;
  color:var(--nb-violet) !important;
}
.main-container .ticket-departments .desc{
  color:var(--nb-ink-2) !important; font-size:0.94rem; line-height:1.6;
  display:block;
}

/* ── formulario de contacto y de ticket ───────────────────── */
/* el tema deja .TM-card en #EDF0F5 con borde #D5DCE5 */
.main-container .TM-card{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; padding:26px !important;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 14px 34px -22px rgba(20,17,31,0.18);
}
.main-container form .TM-card + .TM-card{margin-top:18px}
.main-container .form-group label,
.main-container .control-label{
  font-family:var(--nb-ff-d); font-weight:600;
  color:var(--nb-ink-2) !important; font-size:0.92rem;
  margin-bottom:7px;
}
.main-container .form-control,
.main-container select.form-control,
.main-container textarea.form-control{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line-2) !important;
  border-radius:10px !important; min-height:46px;
  font-family:var(--nb-ff-b); color:var(--nb-ink) !important;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.main-container .form-control:focus{
  border-color:var(--nb-violet) !important;
  box-shadow:0 0 0 3px rgba(123,92,246,0.14) !important;
}
.main-container .form-control::placeholder{color:var(--nb-ink-3) !important}
.main-container .form-actions{
  border-top:1px solid var(--nb-line) !important;
  margin-top:26px; padding-top:22px;
}

/* ── noticias ─────────────────────────────────────────────── */
.main-container .TM-card.annoucements{
  background:transparent !important; border:0 !important;
  padding:0 !important; box-shadow:none !important;
}
/* el tema escribe la clase sin la primera 'o' */
.main-container .annuncement-item,
.main-container .announcement-item{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:16px !important; padding:26px 28px !important;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 32px -22px rgba(20,17,31,0.16);
  transition:transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}
.main-container .annuncement-item:hover,
.main-container .announcement-item:hover{
  transform:translateY(-3px); border-color:var(--nb-line-2) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.05), 0 22px 46px -24px rgba(20,17,31,0.24);
}
/* .latest son las destacadas: el tema las tine de #EDF0F5 */
.main-container .annuncement-item.latest,
.main-container .announcement-item.latest{
  background:var(--nb-paper) !important;
  border-color:rgba(123,92,246,0.34) !important;
  position:relative; overflow:hidden;
}
.main-container .annuncement-item.latest::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--nb-grad);
}
.main-container .announcement-date{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:0.8rem !important; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--nb-violet-aa) !important; margin-bottom:9px !important;
}
.main-container .annuncement-item h2,
.main-container .annuncement-item .h3{
  font-weight:700 !important; font-size:1.32rem !important;
  line-height:1.28; margin-bottom:12px !important;
}
.main-container .annuncement-item h2 a{color:var(--nb-ink) !important}
.main-container .annuncement-item h2 a:hover{color:var(--nb-violet-aa) !important}
.main-container .annuncement-body,
.main-container .announcement-body{
  color:var(--nb-ink-2) !important; font-size:0.965rem; line-height:1.7;
}
.main-container .annuncement-footer,
.main-container .announcement-footer{
  border-top:1px solid var(--nb-line); margin-top:18px; padding-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.main-container .annuncement-footer .btn-link,
.main-container .announcement-footer .btn-link{
  background:transparent !important; border:0 !important; padding:0 !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  color:var(--nb-violet-aa) !important; font-size:0.94rem;
  text-decoration:none !important;
}
.main-container .annuncement-footer .btn-link:hover{color:var(--nb-violet) !important}
.main-container .announcement-details{
  color:var(--nb-ink-3) !important; font-size:0.86rem;
}

/* El tema oculta el «Leer Mas» con `visibility:hidden` y lo revela
   al pasar el raton. En movil no hay raton, y es la accion principal
   de la tarjeta: se deja visible siempre. Ademas asi el hueco de
   38 px que dejaba al pie deja de estar muerto. */
.main-container .annuncement-footer .btn-group,
.main-container .announcement-footer .btn-group,
.main-container .annuncement-footer .btn-link{
  visibility:visible !important;
}

/* ── preguntas frecuentes ─────────────────────────────────── */
.main-container .search-card,
.main-container .bg-checkered{
  background:var(--nb-grad-suave) !important;
  border:1px solid rgba(123,92,246,0.22) !important;
  border-radius:16px !important;
}
.main-container .kb-article{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:15px !important; padding:22px 24px !important;
  margin-bottom:18px; height:100%;
  font-family:var(--nb-ff-d); font-weight:600;
  color:var(--nb-ink) !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.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}
.main-container .kb-article:hover{
  transform:translateY(-4px); border-color:var(--nb-violet) !important;
  box-shadow:0 2px 4px rgba(20,17,31,0.05), 0 24px 48px -24px rgba(90,60,200,0.32);
}
.main-container .kb-article i{
  color:var(--nb-violet) !important; margin-right:9px; font-size:1.05rem;
}
.main-container .kb-article > span{
  color:var(--nb-ink-3) !important; font-family:var(--nb-ff-b);
  font-weight:400; font-size:0.88rem; margin-left:6px;
}
.main-container .kb-article p{
  color:var(--nb-ink-2) !important; font-family:var(--nb-ff-b);
  font-weight:400; font-size:0.925rem; line-height:1.6;
  margin:10px 0 0 !important;
}
/* REJILLA REAL, con grid. Antes habia aqui un `display:flex` sobre
   la columna para igualar alturas, y eso rompio los ANCHOS: en un
   flex el hijo toma su ancho del contenido, no el 100%. Medido: las
   tarjetas quedaban en 453, 453, 367 y 439 px dentro de columnas de
   483. En Descargas, donde esta hoja aun no llegaba, todas median
   453. Es decir: la regla estropeaba lo que ya estaba bien.
   Con grid, todas las celdas de una fila comparten ancho y altura. */
.main-container .kbcat > .row,
.main-container .kbarticles > .row,
.main-container .downloads > .row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;
  gap:18px; margin:0 !important;
}
.main-container .kbcat > .row > [class*="col-"],
.main-container .kbarticles > .row > [class*="col-"],
.main-container .downloads > .row > [class*="col-"]{
  width:auto !important; max-width:none !important;
  flex:none !important; padding:0 !important;
}
.main-container .kb-article{width:100%; height:100%; margin:0 !important}
/* `.kbarticles` NO tiene `.row`: los `.kb-article` cuelgan directos.
   El `margin:0` de la rejilla los dejaba pegados unos a otros. */
.main-container .kbarticles{display:grid; gap:14px}

/* Las noticias iban pegadas: 7 px entre las dos destacadas.
   OJO: `.annuncement-item` es a la vez COLUMNA (`col-md-6`, con
   flex-basis 50%) y TARJETA (con su fondo, borde y relleno). Separarlas
   con `padding` no vale: ese relleno es el que separa el texto del
   borde, y al usarlo para el hueco se pierde por dentro. Con `gap` en
   el contenedor flex la separacion es real y el interior no se toca;
   los anchos se recalculan restando el hueco.                      */
.main-container .annoucements > .row{
  margin-left:0 !important; margin-right:0 !important;
  gap:18px;
}
.main-container .annoucements > .row > .annuncement-item{
  padding:26px 28px !important; margin-bottom:0 !important;
}
.main-container .annoucements > .row > .col-md-6.annuncement-item{
  flex:0 0 calc(50% - 9px) !important; max-width:calc(50% - 9px) !important;
}
.main-container .annoucements > .row > .annuncement-item:not(.col-md-6){
  flex:0 0 100% !important; max-width:100% !important;
}

/* el buscador: la caja medía 936x106 para un campo de 48 px */
.main-container .search-card{padding:20px 22px !important}
.main-container .search-card .input-group,
.main-container .search-card form{max-width:100%}
.main-container .search-card .form-control{
  height:50px !important; border-radius:11px 0 0 11px !important;
  border-right:0 !important;
}
.main-container .search-card .btn,
.main-container .search-card input.btn{
  height:50px !important; border-radius:0 11px 11px 0 !important;
  background:var(--nb-grad) !important; border:0 !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
  color:#fff !important; font-family:var(--nb-ff-d); font-weight:600;
  padding:0 26px !important;
}
.main-container .search-card .btn:hover{
  transform:none !important; color:#fff !important;
}

/* ── remates ──────────────────────────────────────────────── */
/* En .kbarticles el icono es un <span class="far fa-file-alt">, no un
   <i>: la regla de arriba para `> span` —pensada para el contador
   «(9)»— lo alcanzaba y lo dejaba gris y pegado al titulo. */
.main-container .kb-article > span[class*="fa-"],
.main-container .kb-article > i[class*="fa-"]{
  color:var(--nb-violet) !important; margin-right:9px !important;
  font-size:1.05rem; font-weight:400;
}
/* El boton de previsualizar del editor de mensajes es un
   .btn-primary dentro de la barra de formato: ahi el degradado
   desentona al lado de los iconos de negrita, cursiva y demas. */
.main-container .btn-group .btn-primary.btn-sm{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line-2) !important;
  color:var(--nb-violet-aa) !important;
  box-shadow:none !important; transform:none !important;
  padding:6px 14px !important;
}
.main-container .btn-group .btn-primary.btn-sm:hover{
  border-color:var(--nb-violet) !important;
  transform:none !important; box-shadow:none !important;
}
/* El «Browse» del campo de adjuntos es un pseudoelemento de
   Bootstrap: `.custom-file-label::after`. */
.main-container .custom-file-label{
  border:1px solid var(--nb-line-2) !important; border-radius:10px !important;
  font-family:var(--nb-ff-b); color:var(--nb-ink-2) !important;
  height:46px; line-height:30px;
}
.main-container .custom-file-label::after{
  background:var(--nb-paper-2) !important;
  border-left:1px solid var(--nb-line-2) !important;
  color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-d); font-weight:600;
  height:44px; line-height:30px;
}
/* ── el campo de adjuntos ─────────────────────────────────
   Bootstrap monta esto como `.input-group`, que pega las piezas
   unas a otras con `margin-left:-1px` a proposito. Aqui quedaban
   «Selecciona el Fichero», «Browse» y «Anadir mas» montados sin
   respiro, y en movil el campo se quedaba en 189 px de ancho.   */
.main-container .attachment-group{
  display:flex !important; flex-wrap:wrap; gap:10px;
  align-items:stretch;
}
.main-container .attachment-group > .custom-file{
  flex:1 1 300px; min-width:0; margin:0 !important;
}
.main-container .attachment-group > .input-group-append{
  margin:0 !important; flex:0 0 auto;
}
/* El campo mide 46 px porque asi se le fijo arriba; el `.btn` de
   Bootstrap se queda en 38 por su propio relleno. Se igualan. */
.main-container .attachment-group .btn{
  border-radius:10px !important; white-space:nowrap;
  height:46px !important; min-height:46px;
  display:inline-flex !important; align-items:center; justify-content:center;
  padding-top:0 !important; padding-bottom:0 !important;
}
.main-container .attachment-group > .input-group-append{align-items:stretch}
/* «Browse» es el pseudoelemento de Bootstrap y NO usa `data-browse`,
   asi que se traduce desde aqui sin tocar la plantilla. */
.main-container .custom-file-label::after{
  content:"Examinar" !important;
}
@media (max-width:575px){
  /* apilado: en movil el campo no cabe al lado del boton */
  .main-container .attachment-group > .custom-file,
  .main-container .attachment-group > .input-group-append{flex:1 1 100%}
  .main-container .attachment-group .btn{width:100%}
}

/* ── paginacion ───────────────────────────────────────────── */
.main-container .page-link{
  border:1px solid var(--nb-line) !important; border-radius:9px !important;
  margin:0 3px; color:var(--nb-ink-2) !important;
  font-family:var(--nb-ff-d); font-weight:600;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.main-container .page-link:hover{
  border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important;
  background:var(--nb-paper-2) !important;
}
.main-container .page-item.active .page-link{
  background:var(--nb-grad) !important; border:0 !important; color:#fff !important;
  background-clip:padding-box; -webkit-background-clip:padding-box;
}

/* ── botones y avisos ─────────────────────────────────────── */
.main-container .btn-primary{
  background:var(--nb-grad) !important; border:0 !important; color:#fff !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important; padding:11px 26px !important;
  box-shadow:0 10px 26px -12px rgba(123,92,246,0.5);
  transition:transform 0.22s ease, box-shadow 0.22s ease;
}
.main-container .btn-primary:hover,
.main-container .btn-primary:focus{
  transform:translateY(-2px); color:#fff !important;
  box-shadow:0 16px 32px -14px rgba(123,92,246,0.62);
}
.main-container .btn-default,
.main-container .btn-secondary{
  background:transparent !important;
  border:1.5px solid var(--nb-line-2) !important;
  color:var(--nb-ink) !important;
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  border-radius:11px !important;
}
.main-container .btn-default:hover,
.main-container .btn-secondary:hover{
  border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important;
  background:transparent !important;
}
.main-container .alert{
  border-radius:12px !important; font-family:var(--nb-ff-b);
  border:1px solid var(--nb-line) !important;
}
.main-container .alert-success{
  background:rgba(15,146,104,0.09) !important;
  border-color:rgba(15,146,104,0.3) !important; color:#0B6B4D !important;
}
.main-container .alert-danger{
  background:rgba(196,69,63,0.09) !important;
  border-color:rgba(196,69,63,0.3) !important; color:#8E2B27 !important;
}
.main-container .alert-info{
  background:var(--nb-grad-suave) !important;
  border-color:rgba(123,92,246,0.3) !important; color:var(--nb-ink-2) !important;
}
.main-container .breadcrumb{background:transparent !important; padding:0 0 14px !important}
.main-container .breadcrumb-item,
.main-container .breadcrumb-item a{color:var(--nb-ink-3) !important; font-size:0.88rem}
.main-container .breadcrumb-item a:hover{color:var(--nb-violet-aa) !important}
.main-container .breadcrumb-item.active{color:var(--nb-ink-2) !important; font-weight:500}

/* Los botones de la barra de formato conservaban el borde #d5dce5
   del tema pese al `!important` de la regla de arriba: algo con mas
   especificidad lo pisa. Se cierra apuntando al mismo sitio. */
.main-container .btn-group > .btn-default,
.main-container .btn.btn-default,
.main-container .btn.btn-sm{
  border-color:var(--nb-line-2) !important;
}
.main-container ul.pagination{border-color:var(--nb-line) !important}
/* el pie del editor de mensajes («lines: 0  words: 0  guardado») */
.main-container .md-footer{
  background:var(--nb-paper-2) !important;
  border-top:1px solid var(--nb-line) !important;
  color:var(--nb-ink-3) !important; font-family:var(--nb-ff-b);
}

/* el recorte del degradado, el ultimo */
.main-container .btn-primary,
.main-container .page-item.active .page-link{
  background-clip:padding-box; -webkit-background-clip:padding-box;
}

@media (max-width:767px){
  .main-container{padding-bottom:40px}
  .main-container .TM-card{padding:20px !important}
  .main-container .annuncement-item{padding:22px 20px !important}
}
@media (prefers-reduced-motion:reduce){
  .main-container *{transition:none !important}
}