/*
Theme Name: IT Services Management
Theme URI: https://www.titanthemes.net/products/free-it-company-wordpress-theme
Author: Titan Themes
Author URI: https://www.titanthemes.net/
Description: The IT Services Management WordPress Theme is designed for IT companies and technology solutions providers looking to showcase their IT services and expertise online. Perfect for businesses offering services such as IT consulting, network management, cloud computing, and cybersecurity services, this theme enables companies to create a professional and functional website. The theme allows IT service providers to display their portfolio, list their services, and share their expertise in areas like IT disaster recovery, cloud migration, and business automation. The IT Services Management WordPress Theme’s visual elements are clean, modern, and highly customizable, giving businesses the flexibility to build a professional online presence. It includes sections for IT company solutions, business IT consulting, and IT outsourcing services, making it easier to market services to clients in industries like healthcare, finance, and education. With integrated IT system management tools, businesses can effectively communicate their capabilities in data analytics, network security, digital security, and IT project management. Whether you provide IT consulting for small businesses or enterprise IT solutions, the IT Services Management WordPress Theme ensures your website looks great and functions seamlessly, helping you to attract clients looking for reliable IT services, such as remote IT support, cloud hosting services, and business technology solutions.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: it-services-management
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, translation-ready, sticky-post, threaded-comments, wide-blocks, block-styles, blog, portfolio, e-commerce
*/

.homepage-header {
  padding: 0 !important;
}

.homepage-header {
  position: relative;
  width: 100%;
}

.home .homepage-header {
  padding: 0 !important;
  position: absolute;
  width: 100%;
  left: 0px;
  right: 0px;
  z-index: 999;
  margin: 0 auto;
  background-color: transparent !important;
  border-radius: 0;
}

.homepage-header .wp-block-search__inside-wrapper {
  justify-content: end;
}

.homepage-header button.wp-block-search__button.has-text-color.has-base-color.has-background.has-icon.wp-element-button {
  padding: 0px;
}

.wp-site-blocks{
	padding: 0 !important;
}

.slider-banner {
  gap: 40px;
}

.slider-banner h2 span {
  background: var(--wp--preset--color--primary);
  padding: 0px 12px;
  margin-right: 10px;
}

.header-top p span {
  font-size: 22px;
  margin-right: 10px;
}

.project-box img {
  width: 100%;
}

.project-box .service-overlay {
  background-color: #00B7D7;
}

.project-box {
  box-shadow: 0 0px 8px #00000029;
}

.project-box:hover .service-overlay img {
  opacity: 0.3 !important;
}

.project-box:hover .project-content h4,
.project-box:hover .project-content p {
  color: #fff !important;
}

.project-box:hover .project-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  right: 0px;
}

.project-box:hover .service-btn {
  display: block !important;
  text-align: center;
}

.project-box {
  position: relative;
}

.project-box img {
  height: 400px;
  width: 100%;
}

.project-box:hover img {
  height: 513px;
  object-fit: cover;
}

.service-btn {
  display: none !important;
}

footer.wp-block-template-part {
  margin-top: 0;
}
@media screen and (max-width: 375px) {
  .main-header .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex{
    max-width: 100%;
  }
}

@media screen and (min-width: 320px) and (max-width: 599px) {
  .right-box ul li a{
    color: #ffffff !important;
  }

  span.wp-block-navigation-item__label {
    color: #ffffff;
  }

  .right-box ul li a:hover:after {
    display: none;
  }

  .banner-content{
    text-align: center;
  }

  .banner-btn {
    justify-content: center;
  }
}
@media screen and (min-width: 801px) {
  .menu-box {
    padding-left: 45px;
  }
}
@media screen and (min-width: 320px) and (max-width: 800px) {
	 .header-top p {
    justify-content: center;
  }

  .wp-header-search-social {
    justify-content: center;
  }

  .right-box ul {
    justify-content: center;
  }

  .home .homepage-header {
    position: relative;
    background: #000000 !important;
  }
  .header-top p{
    text-align: center;
  }

  .logo-box h1 {
    text-align: center;
  }
  .homepage-header .wp-block-search__inside-wrapper{
    justify-content: center;
  }
  .banner-content h2 {
    font-size: 17px !important;
  }
  .right-box {
    padding-right: 0px !important;
    border: 0px !important
  }

  .project-box:hover .project-content {
    left: 20px;
    right: 20px;
  }

  .right-box nav,
  .wp-block-search__inside-wrapper {
    justify-content: center;
  }

  .project-box img {
    height: 250px;
    width: 100%;
  }

  .project-box:hover img {
    height: 379px;
    object-fit: cover;
  }

  .banner-cover {
    min-height: 400px !important;
  }
}
@media screen and (min-width: 600px) and (max-width: 781px) {
  .service-box {
    display: grid !important;
    justify-content: center;
    grid-template-columns: auto auto !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .project-box img {
    height: 250px;
    width: 100%;
  }

  .project-box:hover img {
    height: 379px;
    object-fit: cover;
  }

  .project-content h4 {
    font-size: 16px !important;
  }

  .home .homepage-header {
    position: relative;
    background: #000000 !important;
  }

  .header-top-box {
    max-width: 95% !important;
  }

  .header-top-box p {
    font-size: 12px !important;
  }

  .main-box-service {
    max-width: 90%;
  }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {
  .slider-banner {
    max-width: 80% !important;
  }

  .topheader {
    gap: 0px !important;
  }

  .right-box nav ul {
    gap: 25px !important;
  }

  .logo-box {
    flex-basis: 20% !important;
  }

  .right-box {
    flex-basis: 80% !important;
  }

  .topheader p {
    font-size: 12px !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1500px) {
  .main-box-service {
    max-width: 80%;
  }

  .right-box nav ul {
    gap: 19px !important;
  }

  .slider-banner {
    max-width: 80% !important;
  }

  .header-top p {
    font-size: 14px !important;
  }

}

@media screen and (min-width: 320px) and (max-width: 800px) {

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
  ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    justify-content: center !important;
    gap: 30px !important;
  }
}
.greg-tech-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 15px;
}

.greg-tech-table th {
    font-weight: bold;
    color: #0a2a4a;
    width: 180px;
    white-space: nowrap;
}

.greg-tech-table td {
    color: #222;
}

.greg-tech-table tr {
    border-bottom: 1px solid #e2e2e2;
}

/* ============================================================
   SUPER TABLA PREMIUM — Moderno, profesional, ultra legible
   ============================================================ */

#tabla-personalizada-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
}

/*** ENCABEZADO ***/
#tabla-personalizada thead th {
    background: linear-gradient(90deg, #f7f9fc, #eef3f9);
    padding: 14px 12px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    color: #1f365c;
    letter-spacing: 0.6px;
    border-bottom: 3px solid #d8e3f1;
}

/*** FILAS COMO TARJETAS ELEVADAS ***/
#tabla-personalizada tbody tr {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(20,40,90,0.08);
    margin-bottom: 12px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#tabla-personalizada tbody tr:hover {
    transform: scale(1.007);
    box-shadow: 0 6px 16px rgba(20,40,90,0.15);
    background: #fbfdff;
}

/*** CELDAS ***/
#tabla-personalizada td {
    padding: 18px 14px;
    vertical-align: top;
    font-size: 15px;
}

/*** IMAGEN DEL PRODUCTO ***/
#tabla-personalizada td:first-child img {
    width: 90px;
    border-radius: 10px;
    border: 1px solid #e4e7ef;
    padding: 4px;
    background: #f9fafc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/*** NOMBRE DEL PRODUCTO — MUY DESTACADO ***/
#tabla-personalizada a {
    font-weight: 700;
    color: #0f2e75;
    font-size: 16px;
    text-decoration: none;
}

#tabla-personalizada a:hover {
    color: #08235a;
    text-decoration: underline;
}

/*** PART NUMBER — estilo etiqueta PRO ***/
#tabla-personalizada td:nth-child(3) {
    font-weight: 700;
    color: #233d70;
    font-size: 15px;
}

/*** DESCRIPCIÓN — TIPOGRAFÍA PREMIUM ***/
.descripcion-col {
    font-size: 14.5px;
    line-height: 1.4;
    color: #243046;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

/*** TITULOS DE LA DESCRIPCION ***/
.descripcion-col strong {
    color: #122344;
    font-weight: 800;
}

/*** GRID de descripción — elegante ***/
/* GRID RESPONSIVO FLUIDO (las cajas se adaptan solas) */
.descripcion-col .greg-desc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ← CAMBIADO A DOS */
    gap: 12px 20px;
}

/* CADA CAJA NORMAL — se lee entera */
.descripcion-col .greg-desc-grid div {
    background: #f4f7fc;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f3;
    font-size: 15px;
    line-height: 1.4;
    white-space: normal; /* SE LEE ENTERO */
}


.descripcion-col .system-truncated {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* OPTIONAL — mejora visual */
.descripcion-col .system-truncated strong {
    color: #0e3a87;
}

/*** RESPONSIVE MAGIC ***/
@media (max-width: 900px) {
    #tabla-personalizada td { padding: 12px; }
    .descripcion-col { max-width: 450px; }
}

@media (max-width: 600px) {
    #tabla-personalizada { min-width: 900px; }
}
/* =============================
   GRID VIEW — PREMIUM DESIGN
   ============================= */

.wc-block-product-template li {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 16px;
    list-style: none;
    box-shadow: 0 4px 10px rgba(20, 40, 90, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    text-align: center;
    border: 1px solid #e3e9f2;
}

.wc-block-product-template li:hover {
    transform: scale(1.015);
    box-shadow: 0 6px 16px rgba(20, 40, 90, 0.15);
    background: #fbfdff;
}

/* Imagen */
.wc-block-product-template li img {
    max-height: 170px;
    width: auto;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 4px;
    background: #f8f9fb;
    border: 1px solid #e0e6f0;
}

/* Nombre del producto */
.wc-block-product-template li h3,
.wc-block-product-template li h3 a {
    font-size: 18px !important;
    font-weight: 800;
    color: #0f2e75 !important;
    margin-top: 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.wc-block-product-template li h3 a:hover {
    color: #072153 !important;
}

/* Part Number en grid */
.wc-block-components-product-summary p {
    font-size: 15px;
    font-weight: 600;
    color: #1a365d;
    margin: 6px 0 12px;
    padding: 6px 10px;
    display: inline-block;
    background: #eef3fb;
    border-radius: 6px;
    border: 1px solid #dfe7f3;
}

/* Botón 'Request a quote' */
.wc-block-product-template li .button,
.wc-block-product-template li button,
.wc-block-product-template li a.button {
    background: #123c7a;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    transition: background 0.15s ease, transform 0.12s ease;
}

.wc-block-product-template li .button:hover {
    background: #081f45;
    transform: scale(1.05);
}

/* Separación entre tarjetas */
.wc-block-product-template {
    gap: 28px !important;
}

/* Responsive */
@media (max-width: 900px) {
    .wc-block-product-template li {
        padding: 18px 12px;
    }
}


/* Un poco más de aire interno */
#tabla-personalizada td {
    padding-top: 18px;
    padding-bottom: 18px;
}
/* =====================================================
   LIST VIEW — AIRE VERTICAL EN DESCRIPCIÓN
   ===================================================== */

/* Más aire arriba y abajo SOLO en la columna Description */
#tabla-personalizada td.descripcion-col {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Opcional: ajustar el grid interno para que no se pegue */
#tabla-personalizada td.descripcion-col .greg-desc-grid {
    margin-top: 4px;
    margin-bottom: 4px;
}
/* =====================================================
   FIX FINAL — IMAGEN GRANDE + TEXTO CENTRADO LIMPIO
   ===================================================== */

/* --- IMAGEN: ahora SÍ más grande --- */
/* =====================================================
   LIST VIEW — IMAGEN AÚN MÁS GRANDE
   ===================================================== */

/* Celda de la imagen */
#tabla-personalizada tbody tr td:first-child {
    width: 240px !important;              /* ⬅ más espacio horizontal */
    text-align: center;
    vertical-align: middle;
}

/* Imagen del producto */
#tabla-personalizada tbody tr td:first-child img {
    max-width: 160px !important;   /* ⬅ MÁS GRANDE */
    max-height: 240px !important;
    width: auto !important;
    height: auto !important;

    padding: 10px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e1e8f4;
    box-shadow: 0 10px 26px rgba(15,40,90,0.18);
}


/* --- NOMBRE DEL PRODUCTO (CONTROLADO) --- */
#tabla-personalizada tbody tr td:nth-child(2) {
    text-align: center;
    vertical-align: middle;
}

#tabla-personalizada tbody tr td:nth-child(2) a {
    font-size: 15px !important;   /* ⬅ bajamos tamaño */
    font-weight: 800;
    color: #0d2a56;
    text-transform: uppercase;
    line-height: 1.3;
}

/* --- PART NUMBER: centrado SIN recuadro --- */
#tabla-personalizada tbody tr td:nth-child(3) {
    text-align: center;
    vertical-align: middle;

    background: none !important;   /* ❌ sin fondo */
    box-shadow: none !important;
    border-radius: 0 !important;

    font-weight: 700;
    color: #123c7a;
    letter-spacing: 0.4px;
    padding: 0 10px;
}
/* =====================================================
   LIST VIEW — COLUMNA PART NUMBER MÁS ANCHA
   ===================================================== */

/* Cabecera */
#tabla-personalizada thead th:nth-child(3) {
    width: 125px !important;     /* ⬅ más ancho */
    min-width: 155px !important;
}

/* Celdas */
#tabla-personalizada tbody tr td:nth-child(3) {
    width: 125px !important;
    min-width: 125px !important;

    white-space: nowrap !important;   /* ❌ no saltar línea */
    text-align: center;
}
/* =====================================================
   GRID / LIST TOGGLE — PROFESSIONAL UI
   ===================================================== */

.view-toggle {
    display: inline-flex;
    background: #eef3fb;
    border-radius: 14px;
    padding: 6px;
    gap: 6px;
    box-shadow: inset 0 0 0 1px #d7e2f2;
}

/* Botones base */
.view-toggle button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0f2e75;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

/* Iconos */
.view-toggle button::before {
    font-size: 18px;
    line-height: 1;
}

/* Grid icon */
#grid-view::before {
    content: "⬛";
}

/* List icon */
#list-view::before {
    content: "☰";
}

/* Hover */
.view-toggle button:hover {
    background: #dde7f6;
}

/* Estado activo */
.view-toggle button.active {
    background: linear-gradient(135deg, #0f3b7a, #154a9c);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15,59,122,0.35);
}

/* Icono activo */
.view-toggle button.active::before {
    filter: brightness(1.3);
}

/* Focus accesible */
.view-toggle button:focus-visible {
    outline: 2px solid #7aa2ff;
    outline-offset: 2px;
}
/* =====================================================
   PAGINATION — PROFESSIONAL / MODERN DESIGN
   ===================================================== */

.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 40px 0 20px;
    font-family: inherit;
}

/* Contenedor de números */
.wp-block-query-pagination-numbers {
    display: inline-flex;
    gap: 6px;
    background: #eef3fb;
    padding: 8px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px #d7e2f2;
}

/* Números base */
.wp-block-query-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #0f2e75;
    text-decoration: none;
    transition: all 0.18s ease;
    cursor: pointer;
}

/* Hover */
.wp-block-query-pagination .page-numbers:hover {
    background: #dde7f6;
}

/* Página activa */
.wp-block-query-pagination .page-numbers.current {
    background: linear-gradient(135deg, #0f3b7a, #154a9c);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15,59,122,0.35);
}

/* Puntos (...) */
.wp-block-query-pagination .page-numbers.dots {
    cursor: default;
    color: #7a8fb5;
    background: transparent;
}

/* Botón NEXT */
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #d7e2f2;
    font-size: 15px;
    font-weight: 700;
    color: #0f3b7a;
    text-decoration: none;
    transition: all 0.18s ease;
    box-shadow: 0 4px 12px rgba(15,40,90,0.08);
}

/* Flecha NEXT */
.wp-block-query-pagination-next::after {
    content: "→";
    font-size: 16px;
}

/* Hover NEXT */
.wp-block-query-pagination-next:hover {
    background: #0f3b7a;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(15,59,122,0.35);
}

/* Responsive */
@media (max-width: 600px) {
    .wp-block-query-pagination {
        flex-wrap: wrap;
        gap: 12px;
    }

    .wp-block-query-pagination-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* =====================================================
   WOOF — INDUSTRIAL TECH PANEL (REFINED)
   ===================================================== */

/* =====================================================
   WOOF — PANEL LATERAL ESTILO HEADER (WIDE)
   ===================================================== */

.woof {
    width: 100%;
    max-width: 380px;          /* ⬅ ocupa casi toda la banda izquierda */
    min-height: 100%;
    
    background: linear-gradient(
        135deg,
        #7faec9 0%,
        #6fa1bf 35%,
        #4f88ad 65%,
        #2f5f87 100%
    );

    border-radius: 0 18px 18px 0;   /* ⬅ panel lateral, no tarjeta */
    padding: 32px 28px;
    margin: 0;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,0.25),
        8px 0 30px rgba(15,40,90,0.25);

    position: relative;
}

/* Línea técnica superior (igual que header) */
.woof::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
}


/* -----------------------------------------------------
   SEARCH (más compacto)
------------------------------------------------------ */
.woof_text_search_container input[type="search"] {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.woof_text_search_container input::placeholder {
    color: #7f9fc8;
}

/* -----------------------------------------------------
   TÍTULO ENGINES — MUCHO MÁS FUERTE
------------------------------------------------------ */
.woof_container h4 {
    font-size: 26px;              /* ⬅ MÁS GRANDE */
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #ffffff;
    margin: 26px 0 18px;
    text-transform: uppercase;
    position: relative;
}

/* Subrayado técnico */
.woof_container h4::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    margin-top: 8px;
    background: linear-gradient(
        90deg,
        #6fb6ff,
        #ffffff
    );
}

/* -----------------------------------------------------
   LISTA
------------------------------------------------------ */
.woof_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* BOTONES MÁS PEQUEÑOS */
.woof_list li {
    background: rgba(255,255,255,0.92);
    border-radius: 8px; /* ⬅ menos redondo */
    padding: 10px 14px; /* ⬅ más pequeño */
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: all 0.15s ease;
}

.woof_list li:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Checkbox minimal */
.woof_list input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid #0f3b7a;
    background: #ffffff;
}

.woof_list input[type="checkbox"]:checked {
    background: #0f3b7a;
}

.woof_list input[type="checkbox"]:checked::after {
    content: "";
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: block;
    margin: 1px 0 0 4px;
}

/* Texto */
.woof_checkbox_label {
    font-size: 15px;
    font-weight: 800;
    color: #0b2d57;
}

/* Contador */
.woof_checkbox_count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: #4d6f9f;
}

/* -----------------------------------------------------
   DISABLED
------------------------------------------------------ */
.woof_list li:has(input:disabled) {
    background: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.6);
    box-shadow: none;
    transform: none;
}

/* Limpieza */
.icheckbox_square-pink,
.iCheck-helper,
.woof_container_overlay_item {
    display: none !important;
}
.wpc-filters-main-wrap {
    background: red !important;
}