/*
Theme Name: NubeParts Elementor Ligero
Theme URI: https://nubeparts.com/
Author: OpenAI
Author URI: https://openai.com/
Description: Tema hijo de Hello Elementor para NubeParts. Mantiene la estética original de Elementor (sin sobre-escribir estilos globales) y agrega utilidades suaves para componentes NubeParts (APV, buscadores, tablas).
Version: 1.2.2
Template: hello-elementor
Text Domain: nubeparts-elementor
*/

/* =========================
   Variables (no invasivas)
   ========================= */
:root{
  --np-font-body:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --np-font-head:"Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --np-primary:#E40000;
  --np-primary-dark:#B80000;

  --np-ink:#0f172a;
  --np-text:#334155;
  --np-muted:#64748b;

  --np-bg:#ffffff;
  --np-surface:#ffffff;
  --np-line:rgba(15,23,42,.12);

  --np-radius:14px;
  --np-radius-sm:10px;

  --np-shadow:0 10px 28px rgba(2,8,23,.10);
  --np-shadow-soft:0 8px 20px rgba(2,8,23,.08);
}

/* =========================
   Ajustes muy suaves (Elementor friendly)
   ========================= */
body{
  color:var(--np-text);
  font-family:var(--np-font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}



/* =========================
   Tipografía (Poppins + Roboto)
   ========================= */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--np-font-head);
  letter-spacing:-.01em;
}

.elementor-button, button, .button, input[type="submit"]{
  font-family:var(--np-font-head);
}

nav a, .elementor-nav-menu a, .menu a{
  font-family:var(--np-font-head);
}
a{ color:var(--np-primary); }
a:hover{ color:var(--np-primary-dark); }

/* Evitar “bordes gruesos” en elementos nativos */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select{
  border:1px solid var(--np-line);
  border-radius:var(--np-radius-sm);
}

/* =========================
   Utilidades para Elementor / NubeParts
   (úsalas en clases CSS de Elementor o en widgets)
   ========================= */
.np-card{
  background:var(--np-surface);
  border:1px solid var(--np-line);
  border-radius:var(--np-radius);
  box-shadow:var(--np-shadow-soft);
}

.np-card--flat{
  box-shadow:none;
}

.np-section-title{
  font-weight:700;
  color:var(--np-ink);
}

.np-muted{ color:var(--np-muted); }

/* =========================
   Tabla “pro” para Compatibilidad Vehicular (Single Producto)
   Solo aplica a la sección de NubeParts
   ========================= */
.scrpc-compatibility,
.np-compatibility{
  margin-top:18px;
}

.scrpc-compatibility .scrpc-compat-wrap,
.np-compatibility .np-compat-wrap{
  background:var(--np-surface);
  border:1px solid var(--np-line);
  border-radius:var(--np-radius);
  box-shadow:var(--np-shadow-soft);
  overflow:hidden;
}

.scrpc-compatibility table,
.np-compatibility table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.scrpc-compatibility thead th,
.np-compatibility thead th{
  text-align:left;
  padding:12px 14px;
  background:rgba(2,8,23,.04);
  color:var(--np-ink);
  font-weight:700;
  border-bottom:1px solid var(--np-line);
}

.scrpc-compatibility tbody td,
.np-compatibility tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  color:var(--np-text);
  vertical-align:top;
}

.scrpc-compatibility tbody tr:nth-child(odd) td,
.np-compatibility tbody tr:nth-child(odd) td{
  background:rgba(2,8,23,.02);
}

.scrpc-compatibility tbody tr:hover td,
.np-compatibility tbody tr:hover td{
  background:rgba(228,0,0,.04);
}

.scrpc-compatibility .np-table-scroll,
.np-compatibility .np-table-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Badges suaves (opcional) */
.np-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(228,0,0,.08);
  border:1px solid rgba(228,0,0,.16);
  color:var(--np-primary-dark);
  font-weight:600;
  font-size:12px;
}

/* Footer credit bar (si la usas) */
.nubeparts-credit-bar{
  margin-top:20px;
  padding:12px 10px;
  text-align:center;
  font-size:13px;
  color:rgba(15,23,42,.70);
}
.nubeparts-credit-bar__title{ font-weight:700; }
.nubeparts-credit-bar__by{ margin-left:8px; }

/* Fallback: si Compatibilidad se renderiza como filas/divs (no tabla) */
.scrpc-compatibility .scrpc-compat-row,
.np-compatibility .np-compat-row{
  display:grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr .9fr 2fr;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.scrpc-compatibility .scrpc-compat-row--head,
.np-compatibility .np-compat-row--head{
  font-weight:700;
  background:rgba(2,8,23,.04);
  color:var(--np-ink);
  border-bottom:1px solid var(--np-line);
}
.scrpc-compatibility .scrpc-compat-row:nth-child(odd):not(.scrpc-compat-row--head),
.np-compatibility .np-compat-row:nth-child(odd):not(.np-compat-row--head){
  background:rgba(2,8,23,.02);
}
@media (max-width: 820px){
  .scrpc-compatibility .scrpc-compat-row,
  .np-compatibility .np-compat-row{
    min-width:760px;
  }
}

/* =========================
   Advanced Product Search (Header)
   Asegura el estilo “fila única” como en el diseño original,
   sin afectar otros formularios de Elementor.
   ========================= */
.aps-search-form.advanced-product-search-form-full,
.aps-search-form.advanced-product-search-form{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.aps-search-form.advanced-product-search-form-full .aps-form-group,
.aps-search-form.advanced-product-search-form .aps-form-group{ margin:0 !important; }
.aps-search-form.advanced-product-search-form-full .aps-form-group.aps-cat,
.aps-search-form.advanced-product-search-form .aps-form-group.aps-cat{ flex:0 0 300px !important; max-width:340px !important; }
.aps-search-form.advanced-product-search-form-full .aps-form-group.aps-q,
.aps-search-form.advanced-product-search-form .aps-form-group.aps-q{ flex:1 1 auto !important; min-width:240px !important; }

.aps-search-form.advanced-product-search-form-full select,
.aps-search-form.advanced-product-search-form select,
.aps-search-form.advanced-product-search-form-full input[type="search"],
.aps-search-form.advanced-product-search-form input[type="search"]{
  height:44px !important;
  line-height:44px !important;
  width:100% !important;
  padding:0 16px !important;
  border:1px solid rgba(15,23,42,.20) !important;
  border-radius:10px !important;
  background:#fff !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  outline:none !important;
}

.aps-search-form.advanced-product-search-form-full .aps-submit-button,
.aps-search-form.advanced-product-search-form .aps-submit-button{
  height:44px !important;
  line-height:44px !important;
  padding:0 22px !important;
  border-radius:10px !important;
  border:2px solid rgba(239,42,42,1) !important;
  background:#fff !important;
  color:rgba(239,42,42,1) !important;
  font-weight:800 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}
.aps-search-form.advanced-product-search-form-full .aps-submit-button:hover{ opacity:.95; }

@media(max-width:768px){
  .aps-search-form.advanced-product-search-form-full,
.aps-search-form.advanced-product-search-form{ flex-wrap:wrap !important; }
  .aps-search-form.advanced-product-search-form-full .aps-form-group.aps-cat,
.aps-search-form.advanced-product-search-form .aps-form-group.aps-cat{ flex:1 1 100% !important; max-width:none !important; }
  .aps-search-form.advanced-product-search-form-full .aps-submit-button,
.aps-search-form.advanced-product-search-form .aps-submit-button{ width:100% !important; }
}
