/* ======================= BASE GENERALES ======================= */
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; }

/* Tipografías por página */
.admin-body, .admin-login-body, .admin-list-body, .admin-acc-body, .index-body, .login-body {
  font-family: Arial, sans-serif;
}

/* ======================= ADMIN (panel) ======================= */
.admin-body { background-color: #f2f2f2; }
.admin-header {
  background-color: #002f6c; color: #fff; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.admin-header h1 { font-size: 18px; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions a {
  color: #fff; text-decoration: none; background: #1565c0;
  padding: 6px 12px; border-radius: 6px; font-size: 14px;
}
.actions a:hover { background: #1976d2; }

.admin-main { max-width: 820px; margin: 20px auto; padding: 0 12px 20px; }
.msg { padding:10px;background:#dff0d8;color:#3c763d;border-radius:5px;margin-bottom:12px; }

.card {
  background:#fff; padding:16px; border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1); margin-bottom:20px;
}
.card h3 { margin:0 0 12px 0; color:#002f6c; font-size:18px; }
.card small { display:block; color:#555; margin-bottom:10px; }

label { display: block; margin-top: 10px; font-weight: 600; }
/* Los controles del carrito se definen exclusivamente en pedido.css. */
input:not(.repuestos-cotizacion-item-qty):not(.repuestos-cotizacion-add-input):not(:where(.pedido-float *)), select, button:not(.logout-btn):not(.catalog-tab-btn):not(.rod-search-btn):not(.retmed-btn):not(#retenSearchBtn):not(#rodamientoSearchBtn):not(.panel-submit):not(.pedido-add-button):not(.pedido-nav-button):not(.pedido-action-secondary):not(.index-image-modal-close):not(.index-product-image-button):not(.index-product-image-switch):not(.repuestos-btn):not(.repuestos-cotizacion-nav-button):not(.repuestos-cotizacion-add-button):not(.repuestos-cotizacion-close):not(.repuestos-cotizacion-item-remove):not(.repuestos-cotizacion-secondary):not(.repuestos-cotizacion-clear):not(.repuestos-cotizacion-modal-cancel):not(.repuestos-cotizacion-modal-confirm):not(:where(.pedido-float *)) {
  width: 100%; padding: 8px; margin-top: 6px; border-radius: 6px;
  border: 1px solid #ccd3db; font-size: 14px;
}
button { background:#0d47a1;color:#fff;border:none;cursor:pointer; }
/*button:hover { filter: brightness(1.05); }*/

.grid-3 { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.readonly { background: #eef1f5; }

/* botones lado a lado para actualizar */
.import-actions { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.import-actions form { width: 100%; }
.import-actions button { width: 100%; padding: 10px; }

/* ======================= ADMIN LOGIN ======================= */
.admin-login-body {
  background: linear-gradient(135deg, #0d47a1, #546e7a);
  display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff;
}
.admin-login-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px 40px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  width: 350px; color: #333;
}
.admin-login-box h2 { text-align: center; margin-bottom: 25px; color: #0d47a1; }
.admin-login-box label { font-weight: bold; margin-bottom: 6px; display: block; }
.admin-login-box input[type=password] {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; margin-bottom: 15px;
}
.admin-login-box button {
  width: 100%; background: #0d47a1; color: white; padding: 10px; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background 0.3s ease;
}
.admin-login-box button:hover { background: #1565c0; }
.error {
  background: #ffcdd2; color: #b71c1c; padding: 8px; border-radius: 6px; text-align: center; margin-bottom: 15px;
}

/* ======================= ADMIN LIST ======================= */
.admin-list-body { background: #eceff1; }
.admin-list-header {
  background: #0d47a1; color: white; padding: 15px 30px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.admin-list-header h1 { margin: 0; font-size: 20px; }
.admin-list-header a {
  color: #fff; text-decoration: none; font-size: 14px; background: #1565c0; padding: 6px 12px; border-radius: 6px;
}
.admin-list-header a:hover { background: #1976d2; }
.admin-list-main { padding: 20px 30px; overflow-x: hidden; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.admin-table th, .admin-table td { padding: 10px; border-bottom: 1px solid #ddd; text-align: left; font-size: 14px; }
.admin-table th { background: #e3f2fd; color: #0d47a1; position: sticky; top: 0; }
.admin-table tr:hover { background: #f9f9f9; }
.badge { padding: 3px 8px; border-radius: 10px; font-size: 12px; }
.on { background: #c8e6c9; color: #1b5e20; }
.off { background: #ffcdd2; color: #b71c1c; }

/* ======================= ADMIN ACCESOS ======================= */
.admin-acc-body { background: #eceff1; }
.admin-acc-header {
  background: #0d47a1; color: white; padding: 15px 30px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.admin-acc-header h1 { margin: 0; font-size: 20px; }
.admin-acc-header a { color: #fff; text-decoration: none; font-size: 14px; background: #1565c0; padding: 6px 12px; border-radius: 6px; margin-left: 8px; }
.admin-acc-header a:hover { background: #1976d2; }
.admin-acc-main { padding: 20px 30px; }

.filtros {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end;
  background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 560px; margin-bottom: 16px;
}
.filtros label { font-weight: bold; margin-bottom: 6px; display: block; }
.filtros input[type=date] { padding: 8px; border: 1px solid #ccc; border-radius: 6px; }

/* ======================= INDEX (buscador) ======================= */
.index-body { margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f5f5f5; color: #333; }

.index-header {
  background: linear-gradient(135deg,#062a5f 0%,#0f4f9c 100%);
  color: #ffffff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 12px 28px rgba(5,28,66,.18);
}
.header-left { display: flex; align-items: center; }
.index-header img {
  height: 60px; margin-right: 20px; border-radius: 10px; background-color: gainsboro;
  padding: 4px; box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
.index-header h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: .01em; }

/* Botón Salir */
.index-header .logout-btn{
  width:auto;
  min-width:0;
  min-height:36px;
  margin:0;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#2b68b1 0%,#14559f 58%,#0b3f84 100%);
  color:#ffffff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  appearance:none;
  -webkit-appearance:none;
  background-clip:padding-box;
  box-shadow:0 7px 16px rgba(5,28,66,.22);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.index-header .logout-btn:hover,
.index-header .logout-btn:focus-visible{
  border:0;
  background:linear-gradient(135deg,#3175c8 0%,#1761b7 58%,#0e4a96 100%);
  box-shadow:0 9px 20px rgba(5,28,66,.26);
  transform:translateY(-1px);
}
.index-header .logout-btn:active{
  transform:translateY(0);
  box-shadow:0 5px 12px rgba(5,28,66,.20);
}
.index-header .logout-btn:focus-visible{
  outline:2px solid rgba(108,173,255,.42);
  outline-offset:2px;
}

/* ===== Header actions ===== */
.index-header .header-right{ display:flex; align-items:center; gap:10px; }

.index-container { display: flex; padding: 20px; gap: 20px; }
.sidebar {
  width: 310px; padding: 20px; background-color: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  border-radius: 5px;
}
.sidebar h3 { margin-top: 0; color: #002f6c; }

.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}
.results-col { min-width: 0; }
.result-count { margin-bottom: 10px; font-weight: bold; }

.product { background-color: #fff; padding: 10px; border-radius: 5px; margin-bottom: 10px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.product-title {
  font-weight: bold; font-size: 18px; color: #002f6c; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.product-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.product-price {
  font-weight: 800; font-size: 16px; line-height: 1; padding: 8px 12px;
  border-radius: 999px; background: linear-gradient(180deg, #1565c0, #0d47a1);
  color: #fff; box-shadow: 0 4px 10px rgba(13,71,161,0.25);
  border: 1px solid rgba(255,255,255,0.15); letter-spacing: 0.3px;
  white-space: nowrap; transform: translateZ(0);
}
.product:hover .product-price { transform: translateY(-1px); transition: transform .15s ease; }

.product-price.is-consulte {
  background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; box-shadow: none; font-weight: 700;
}

.product-description, .product-equivalencia { font-size: 12px; margin-top: 5px; text-transform: uppercase; }
.product-description strong, .product-equivalencia strong { font-weight: bold; }

.notice{
  background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:20px;
  border:1px solid #dbe7ff; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.notice-badge{
  display:inline-block; font-size:12px; font-weight:900; padding:3px 10px;
  border-radius:999px; background:linear-gradient(180deg,#2a5bd7,#0d47a1);
  color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 3px 10px rgba(13,71,161,.18); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:8px;
}
.notice-content{ color:#334155; }
.notice-content .notice-strong{
  color:#0b3a8c; font-weight:800; font-size:15.5px; margin:2px 0 6px 0;
}
.notice-content p{ margin:6px 0; font-size:12.5px; }

.empty-state{
  background:#e8f1ff; border:1px dashed #2a5bd7; color:#0b3a8c;
  font-weight:600; text-align:center; padding:12px 16px;
  border-radius:10px; margin-top:12px;
}
.empty-state .empty-action{
  display:inline-block; margin-left:8px; text-decoration:none;
  border:1px solid #2a5bd7; padding:4px 8px; border-radius:8px;
}
.empty-state .empty-action:hover{ background:#2a5bd7; color:#fff; }

input[type="text"], select { width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; }
.panel input[name="q"] { box-sizing: border-box; width: 100%; display: block; }

.descargas { margin-top: 20px; padding: 10px; background-color: #fff; border-radius: 5px;border: 1px solid #ccc; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.descargas h3 { font-size: 16px; margin-top: 0; color: #002f6c; }
.descargas ul { list-style-type: none; padding-left: 0; margin: 0; }
.descargas li { margin-bottom: 8px; }
.descargas a { text-decoration: none; color: #004080; font-size: 13px; }
.descargas a:hover { text-decoration: underline; }

.contacto { margin-top: 20px; padding: 10px; background-color: #fff; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.contacto h3 { font-size: 18px; color: #002f6c; margin-top: 0; }
.contacto ul { list-style: none; padding-left: 0; }
.contacto li { margin-bottom: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.contacto i { color: #004080; min-width: 16px; }
.contacto a { color: #004080; text-decoration: none; font-size: 13px; }
.contacto a:hover { text-decoration: underline; }

.panel { margin-top: 10px; margin-bottom: 20px; padding: 14px; background-color: #fff; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
.panel h3 { margin: 0 0 10px 0; font-size: 18px; color: #002f6c; display: flex; align-items: center; gap: 8px; }
.panel h3 i { opacity: 0.9; }
.descargas details summary { cursor: pointer; font-size: 16px; color: #002f6c; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.descargas details summary::-webkit-details-marker { display: none; }
.descargas details[open] summary { font-weight: 700; }
.descargas details ul { margin-top: 10px; }

.pagination { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pagination a, .pagination span { padding: 6px 10px; border-radius: 6px; text-decoration: none; font-size: 13px; border: 1px solid #cfd8dc; color: #1976d2; background: #fff; }
.pagination .active { background: #1976d2; color: #fff; border-color: #1976d2; }
.pagination .disabled { color: #9e9e9e; border-color: #e0e0e0; pointer-events: none; background: #fafafa; }

.index-body .result-mode{ margin: 6px 0 10px; font-size: 13px; color: #6b7280; font-style: italic; }
.index-body .result-mode strong{ font-weight: normal; }

.banner-col { position: sticky; top: 16px; }
.banner-box {
  background: #fff; border-radius: 10px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  padding: 8px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start;
  height: auto; position: relative;
}
.banner-box img{
  max-width: 100%; max-height: 100%; object-fit: contain;
  object-position: top center; display: block; transition: opacity .2s ease; border-radius: 8px;
}
.banner-caption{
  position: static; display: block; text-align: center; font-size: .85rem; color: #334155;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.06);
  border-radius: 8px; margin: 6px 1px 0; padding: 6px 10px;
}

@media (max-width: 980px) {
  .banner-col{ position: static; }
  .banner-box{ height: auto !important; }
  .index-container{ flex-direction: column; gap: 12px; }
  .sidebar{ width: 100%; max-width: 100%; }
  .main-content{ grid-template-columns: 1fr; gap: 12px; }
}

.panel-submit{
  width:100%;
  min-height:36px;
  margin-top:10px;
  padding:0 14px;
  border:1px solid rgba(129,180,238,.34);
  border-radius:999px;
  background:linear-gradient(135deg,#2b68b1 0%,#14559f 58%,#0b3f84 100%);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:0 4px 10px rgba(15,79,156,.18), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.panel-submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 7px 16px rgba(15,79,156,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.panel-submit:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(15,79,156,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.panel-submit:focus-visible{
  outline:2px solid rgba(116,181,255,.55);
  outline-offset:2px;
}



.site-footer{ width: 100%; padding: 12px 16px; font-size: .9rem; color: #666; text-align: center; background: transparent; }
.site-footer .inner{ max-width: 1200px; margin: 0 auto; }
.index-body{ min-height: 100vh; display: flex; flex-direction: column; }
.index-container{ flex: 1; }

/* ======================= LOGIN CLIENTES ======================= */
.login-body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; height: 100vh; }
.left { flex: 1; background: url("/static/login2.png") center center no-repeat; background-size: cover; background-color: #002f6c; }
.right { flex: 1; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; padding: 24px; flex-direction:column; }
.login-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 100%; max-width: 350px; }
.login-box h2 { color: #002f6c; margin-bottom: 20px; text-align: center; }
.logo-top { text-align: center; margin-bottom: 12px; }
.logo-top img { max-height: 60px; }
input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 15px; border-radius: 4px; border: 1px solid #ccc; }
.remember-row{ display: flex; align-items: center; gap: 8px; margin: 10px 0 15px; font-size: 14px; color: #333; user-select: none; white-space: nowrap; }
.remember-row input[type="checkbox"]{ width: auto !important; margin: 0; transform: translateY(1px) scale(1.05); }
.login-footer{ width:100%; max-width:520px; text-align:center; margin-top:14px; font-size:.9rem; color:#777; }
.help-box { text-align: center; margin-top: 16px; background: #eef5ff; border: 1px solid #cdddf7; padding: 10px; border-radius: 8px; font-size: 0.95rem; color: #0b2e52; }
.help-box a { color: #0a84ff; font-weight: bold; text-decoration: none; }
.help-box a:hover { text-decoration: underline; }

/* ======================= RESPONSIVE GLOBAL ======================= */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .admin-main, .admin-list-main, .admin-acc-main { padding: 16px; }
  .admin-login-box { width: 92%; padding: 24px; }
  .admin-list-main, .admin-acc-main { overflow-x: auto; }.left { display: none; }
  .right { flex: 1 1 100%; padding: 16px; }
  .index-header h1 { font-size: 20px; }
  .index-header .header-right{ width: 100%; justify-content: flex-end; gap: 12px; }
  .index-header .logout-btn{ width:auto; margin-top:0; padding:0 13px; font-size:13px; }
}
@media (max-width: 1024px) { .admin-main { padding: 0 12px 20px; } }
@media (hover: none) { a, button { -webkit-tap-highlight-color: transparent; } }

/* Fixes varios */
#resultados { scroll-margin-top: 80px; }
select[name="rubro"]{ margin-top:6px; }
.price-flags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px !important; margin-bottom:8px !important; }
.price-flag{ display:flex; align-items:center; gap:8px; font-size:13px; color:#333; user-select:none; line-height:1.2; }
.price-flag input{ width:16px; height:16px; margin:0; transform: translateY(1px) scale(1.05); }

.index-recargo-group{
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 12px;
  border: 1px solid #d7e3f8;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}
.index-recargo-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.index-recargo-label{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:#0b3a8c;
}
.index-recargo-help{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  color:#0d47a1;
  background:#e1edff;
  border:1px solid #bfd3ff;
  cursor:help;
  flex:0 0 auto;
}
.index-recargo-help:focus-visible{
  outline:2px solid #90caf9;
  outline-offset:2px;
}
.index-recargo-tooltip{
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(-4px);
  width:240px;
  padding:10px 12px;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 14px 28px rgba(15,23,42,.22);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:20;
}
.index-recargo-tooltip::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  width:12px;
  height:12px;
  background:#0f172a;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
}
.index-recargo-help:hover .index-recargo-tooltip,
.index-recargo-help:focus-visible .index-recargo-tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.index-recargo-input{
  width:100%;
  padding:10px 12px;
  margin:0;
  border-radius:10px;
  border:1px solid #bfd0ea;
  background:#fff;
  color:#0f172a;
  font-size:15px;
  font-weight:700;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
}
.index-recargo-hint{
  margin:8px 0 0;
  font-size:11.5px;
  color:#51627b;
}
.notice-recargo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:2px 0 8px;
  padding:6px 10px;
  border-radius:999px;
  background:#edf4ff;
  border:1px solid #cfe0ff;
  color:#184a9c;
  font-size:12px;
  font-weight:700;
}

.index-product{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #dbe7f8;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  column-gap:16px;
}
.index-product-content{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:16px;
}
.index-product-media{
  width:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.index-product-image-button,
.index-product-image-placeholder,
.index-product-image-switches,
.index-product-image-switch{
  -webkit-tap-highlight-color: transparent;
}
.index-product-image-button[hidden],
.index-product-image-placeholder[hidden],
.index-product-image-switches[hidden],
.index-product-image-switch[hidden]{
  display:none !important;
}
.index-product-image-switches:empty{
  display:none !important;
}
.index-product-image-button{
  all:unset;
  width:88px;
  height:88px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid #dbe7f8;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  overflow:hidden;
  cursor:pointer;
}
.index-product-image-button.is-visible{
  display:flex;
}
.index-product-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#ffffff;
}
.index-product-image-placeholder{
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px dashed #d7e3f8;
  background:#ffffff;
  color:#6b7b92;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:center;
}
.index-product-image-placeholder.is-hidden{
  display:none !important;
}
.index-product-image-switches{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  width:100%;
}
.index-product-image-switch{
  width:26px;
  height:26px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid #c7d7ef;
  background:#ffffff;
  color:#0d47a1;
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
}
.index-product-image-switch.is-active{
  background:linear-gradient(180deg, #1877f2 0%, #0d47a1 100%);
  border-color:#0d47a1;
  color:#ffffff;
}
.index-product-info{
  min-width:0;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:6px;
}
.index-product-title{
  display:block;
  margin-bottom:2px;
}
.index-product-main{
  display:block;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.16;
  letter-spacing:.15px;
}
.index-price-card{
  min-width:146px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #d7e3f8;
  background:linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow:0 10px 24px rgba(13,71,161,.08);
}
.index-image-modal[hidden]{
  display:none !important;
}
.index-image-modal{
  position:fixed;
  inset:0;
  z-index:1200;
}
.index-image-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.6);
}
.index-image-modal-dialog{
  position:relative;
  width:min(92vw, 980px);
  max-height:90vh;
  margin:4vh auto;
  padding:28px 28px 18px;
  border-radius:22px;
  background:#ffffff;
  box-shadow:0 28px 60px rgba(15,23,42,.30);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.index-image-modal-close{
  all:unset;
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid #d7e3f8;
  background:#ffffff;
  color:#0d2f69;
  font-family:Arial, sans-serif;
  font-size:28px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  z-index:2;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.index-image-modal-img{
  display:block;
  max-width:100%;
  max-height:calc(90vh - 98px);
  object-fit:contain;
  background:#ffffff;
  cursor:zoom-out;
}
.index-image-modal-caption{
  margin-top:12px;
  color:#0d2f69;
  font-size:15px;
  font-weight:700;
  text-align:center;
}
body.index-modal-open{
  overflow:hidden;
}
.index-price-card.is-consulte{
  background:linear-gradient(180deg, #fff8f8 0%, #fff1f1 100%);
  border-color:#f1cccc;
  box-shadow:none;
}
.index-price-eyebrow{
  display:block;
  width:100%;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  text-align:right;
  white-space:nowrap;
  color:#57739d;
}
.index-price-card.has-recargo{
  justify-content:flex-start;
  padding-top:9px;
}
.index-price-card.is-consulte .index-price-eyebrow{
  color:#a86969;
}
.index-price-value{
  font-size:24px;
  line-height:1;
  font-weight:800;
  color:#0d2f69;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.index-price-card.is-consulte .index-price-value{
  color:#a33f3f;
}
.index-price-meta{
  font-size:12px;
  line-height:1.2;
  color:#5c6f89;
  text-align:right;
  white-space:nowrap;
}
.index-product-description,
.index-product-equivalencia{
  margin-top:8px;
  font-size:12px;
  color:#314155;
}
.index-product-description strong,
.index-product-equivalencia strong{
  color:#0b3a8c;
}
@media (max-width: 980px){
  .index-recargo-tooltip{
    left:auto;
    right:0;
    top:calc(100% + 10px);
    transform:translateY(-4px);
    width:220px;
  }
  .index-recargo-tooltip::before{
    left:auto;
    right:8px;
    top:-6px;
    transform:rotate(45deg);
  }
  .index-recargo-help:hover .index-recargo-tooltip,
  .index-recargo-help:focus-visible .index-recargo-tooltip{
    transform:translateY(0);
  }
}
@media (max-width: 560px){
  .index-product{
    padding:12px;
    column-gap:14px;
    row-gap:6px;
    grid-template-columns:70px minmax(0,1fr);
    align-items:start;
  }
  .index-product-content{
    display:contents;
  }
  .index-product-media{
    width:70px;
    min-height:0;
    gap:6px;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:center;
  }
  .index-product-info{
    grid-column:2;
    min-height:0;
    padding-top:0;
    align-self:center;
  }
  .index-product-image-button,
  .index-product-image-placeholder{
    width:60px;
    height:60px;
    border-radius:8px;
  }
  .index-product-image-placeholder{
    font-size:9px;
    line-height:1.05;
    padding:4px;
  }
  .index-product-image-switches{
    gap:4px;
    min-height:22px;
  }
  .index-product-image-switch{
    width:22px;
    height:22px;
    border-radius:7px;
    font-size:12px;
  }
  .index-price-card{
    grid-column:2;
    min-width:0;
    width:auto;
    max-width:100%;
    justify-self:start;
    align-self:start;
    align-items:flex-start;
    margin:4px 0 0;
    padding:8px 10px;
    border-radius:12px;
  }
  .index-product:not(.index-product-has-switches) .index-price-card{
    margin-left:0;
  }
  .index-price-value{ font-size:19px; }
  .index-price-eyebrow{ width:auto; font-size:8px; letter-spacing:.03em; text-align:left; }
  .index-price-card.has-recargo .index-price-eyebrow{ font-size:7.1px; letter-spacing:.01em; }
  .index-price-meta{ font-size:9px; text-align:left; white-space:nowrap; }
  .index-product-description,
  .index-product-equivalencia{ margin-top:6px; }
  .index-recargo-group{ padding:10px; }
  .index-image-modal-dialog{
    width:min(94vw, 980px);
    padding:24px 16px 14px;
    border-radius:18px;
  }
  .index-image-modal-close{
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    font-size:24px;
  }
}

.prefix-row{
  margin-top:-2px;
  margin-bottom:14px;
}
.prefix-help-row{
  margin-bottom:0;
  align-items:center;
  gap:10px;
}
.prefix-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  color:#333;
  user-select:none;
  line-height:1.2;
  font-weight:normal;
  cursor:pointer;
}
.prefix-label-text{
  display:inline-block;
}
.prefix-help{
  margin-left:auto;
}
.prefix-label input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  transform: translateY(1px) scale(1.05);
}

.config-checkbox-row{ margin-top: 12px; }
.config-checkbox-row .checkbox-label{ display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: normal; cursor: pointer; }
.config-checkbox-row input[type="checkbox"]{ width: auto !important; margin: 0; transform: translateY(1px) scale(1.1); }
.grid-3 .full { grid-column: 1 / -1; }
.check-row { margin-top: 4px; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.check-inline input[type="checkbox"]{ width: auto; margin: 0; transform: translateY(1px) scale(1.05); }

/* ====== Cliente en encabezado ====== */
.brand-block { display: flex; flex-direction: column; }
.cliente-nombre { margin-top: 2px; font-size: 13px; line-height: 1.2; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(60vw, 520px); }
.cliente-text { font-weight: 600; }

@media (max-width: 600px) {
  .index-header img { height: 50px; margin-right: 12px; }
  .index-header h1 { font-size: 20px; }
  .cliente-nombre { font-size: 12px; max-width: 62vw; }
}

/* -------- BARRA DE NAVEGACION ARTICULOS - RODAMIENTOS POR APLICACION -------- */

/* Navbar: íconos por imagen (Catálogo Rodamientos) */
.catalog-nav-img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:inline-block;
  vertical-align:-3px;
  margin-right:-4px;
  flex:0 0 auto;
}

.catalog-nav {
  --catalog-nav-active-bg:#e3e8f0;
  background: linear-gradient(135deg,#0d448d 0%,#1b63b7 52%,#0f4f9c 100%);
  color:#fff;
  padding: 0 16px;
  font-family: Arial, Helvetica, sans-serif;
  border-top: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.catalog-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:16px;
}

.catalog-nav-item{ display:flex; }

.catalog-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  border-radius:10px 10px 0 0;
  white-space:nowrap;
  background: transparent;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;

}

.catalog-nav-link.active{
  position:relative;
  z-index:2;
  margin-bottom:0;
  color:#0d47a1;
  background:var(--catalog-nav-active-bg);
  font-weight:600;
  box-shadow:none;
}

.catalog-nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--catalog-nav-active-bg);
}

/* Hover glow para solapas NO activas (solo dispositivos con hover) */
@media (hover: hover){
  .catalog-nav-link:hover:not(.active){
    background: rgba(255,255,255,0.12);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
  .catalog-nav-link:active:not(.active){
    transform: translateY(0);
    filter: brightness(1.01);
    box-shadow: 0 3px 10px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .catalog-nav-link:focus-visible{
    outline: 2px solid #bbdefb;
    outline-offset: 2px;
  }
}



.catalog-nav-ico{ font-size:14px; }

/* Mobile: mantener look de SOLAPAS (no botones), pero compacto y sin romper */
@media (max-width: 600px){
  .catalog-nav{ padding:0 10px; }
  .catalog-nav-list{ justify-content:space-between; gap:10px; }
  .catalog-nav-item{ flex:1 1 0; }
  .catalog-nav-link{
    width:100%;
    flex-direction:column;
    gap:4px;
    padding:8px 6px;
    font-size:11px;
    line-height:1.05;
  }
  .catalog-nav-ico{ font-size:13px; }
}

.catalog-grid-card { overflow-x: auto; }
/* FIX: solapas del navbar SIEMPRE a la izquierda (desktop + mobile) */
.catalog-nav {
  text-align: left;
}

.catalog-nav .catalog-nav-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 16px;
  margin: 0;          /* por si algún CSS las centraba con auto */
  padding: 0;
  width: 100%;
}

/* evita que algún item se “auto-centre” */
.catalog-nav .catalog-nav-item {
  flex: 0 0 auto;
}

/* ===== Responsive header/navbar unificado v44 ===== */
@media (max-width: 600px){
  .index-header{
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px 12px;
  }

  .index-header .header-left{
    min-width:0;
    flex:1 1 auto;
  }

  .index-header .header-right{
    width:auto;
    flex:0 0 auto;
    justify-content:flex-end;
    gap:0;
  }

  .index-header img{
    height:48px;
    margin-right:10px;
    border-radius:9px;
  }

  .index-header h1{
    font-size:19px;
    line-height:1.05;
    white-space:nowrap;
  }

  .cliente-nombre{
    max-width:100%;
    font-size:11px;
    line-height:1.15;
  }

  .index-header .logout-btn{
    min-width:56px;
    width:auto;
    min-height:34px;
    margin-top:0;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    white-space:nowrap;
  }

  .catalog-nav{
    min-height:0;
    padding:0 8px;
  }

  .catalog-nav .catalog-nav-list{
    align-items:flex-end;
    justify-content:flex-start;
    gap:0;
    min-height:0;
    padding:0;
  }

  .catalog-nav .catalog-nav-item{
    flex:1 1 0;
    min-width:0;
    align-items:flex-end;
  }

  .catalog-nav .catalog-nav-link{
    width:100%;
    min-height:0;
    height:auto;
    margin-top:0;
    padding:8px 4px;
    border-radius:9px 9px 0 0;
    flex-direction:column;
    gap:4px;
    font-size:10.5px;
    line-height:1.05;
    text-align:center;
    white-space:normal;
  }

  .catalog-nav-img{
    width:16px;
    height:16px;
    margin-right:0;
  }

  .catalog-nav-ico{
    font-size:13px;
  }

  .panel-submit{
    display:flex;
    width:min(100%, 210px);
    max-width:210px;
    min-height:34px;
    margin:16px auto 0;
    padding:0 16px;
  }
}