/* ======================= 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, .catalog-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; }
input, select, button {
  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: #131212; }

/* ======================= 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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f5f5; color: #333; }

.index-header {
  background-color: #002f6c; color: white; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.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; }

/* Botón Salir */
.logout-btn{
  background: linear-gradient(180deg, #2a5bd7, #0d47a1);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(13,71,161,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.logout-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 14px rgba(13,71,161,.35);
}
.logout-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 3px 8px rgba(13,71,161,.2);
}
.logout-btn:focus-visible{
  outline: 2px solid #bbdefb;
  outline-offset: 2px;
}

/* ===== Tema: MODO COMPACTO ===== */
.index-header .header-right{ display:flex; align-items:center; gap:10px; }
.index-header .theme-switcher{ gap:4px; font-size:11px; }
.index-header .theme-switcher label{ opacity:.8; }
.index-header #themeSelect{
  -webkit-appearance:none; appearance:none;
  font-size:11px; line-height:1.2;
  padding:3px 18px 3px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color:#fff; box-shadow:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='white' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center; background-size:10px;
}
.index-header #themeSelect:hover{ background: rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }
.index-header #themeSelect:focus-visible{ outline:2px solid #bbdefb; outline-offset:2px; }
.index-header #themeSelect option{ color:#111; background:#fff; }

.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 { margin-top:10px; width:100%; }

.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; }
  .catalog-grid { min-width: 720px; }
  .left { display: none; }
  .right { flex: 1 1 100%; padding: 16px; }
  .index-header h1 { font-size: 20px; }
  .index-header .header-right{ width: 100%; justify-content: space-between; gap: 12px; }
  .index-header .theme-switcher{ display: flex; flex-direction: row; align-items: center; gap: 6px; }
  .index-header .theme-switcher label{ display: inline !important; font-size: 13px; margin: 0 4px 0 0; opacity: 1; }
  .logout-btn{ padding: 6px 12px !important; font-size: 13px !important; }
}
@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:0; }
.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); }

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

/* Header theme-switcher layout */
@media (min-width: 769px){
  .index-header .theme-switcher{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
  .index-header .theme-switcher label{ display:block !important; margin:0 0 2px 0; font-size:13px; }
}

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


/* ======================= CATÁLOGO POR APLICACIÓN ======================= */
.catalog-body { background:#f4f6fb; }
.catalog-main { max-width: 1200px; margin: 0 auto; padding: 16px; }

.catalog-header { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.catalog-header h2 { margin:0; font-size: 22px; color:#0d47a1; }
.catalog-header p { margin:0; font-size:13px; color:#546e7a; }

.catalog-header-main { display:flex; align-items:center; gap:12px; }
.catalog-header-icon {
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#0d47a1,#1976d2);
  box-shadow:0 2px 6px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.catalog-header-icon i { font-size:22px; color:#fff; }
.catalog-header-text h2 { margin:0; }
.catalog-header-text p { margin:0; }

.catalog-nav { background:#0d47a1; color:#fff; padding: 0 16px; }
.catalog-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.catalog-nav a { display:inline-block; padding:10px 12px; color:#bbdefb; text-decoration:none; font-size:14px; border-radius:8px 8px 0 0; }
.catalog-nav a.active { color:#0d47a1; background:#e3e7f0; font-weight:600; }

.catalog-filters { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.catalog-filters label { font-size:13px; font-weight:600; color:#37474f; }
.catalog-filters select { width:100%; }

.catalog-layout { display:grid; grid-template-columns: minmax(0,2.8fr) minmax(0,1.4fr); gap:16px; align-items:flex-start; }

/* === CAMBIO CLAVE: Eliminar estilos de tarjetas hijas para unificar === */
.catalog-grid-card, .catalog-detail-card, .catalog-precios-card {
  background: transparent; /* Sin fondo */
  border-radius: 0;
  box-shadow: none; /* Sin sombra */
  padding: 0;
  margin-bottom: 20px;
}
.catalog-grid-card h3, .catalog-detail-card h3, .catalog-precios-card h3 {
  margin:0 0 8px 0; font-size:15px; color:#0d47a1;
}

.catalog-grid { width:100%; border-collapse:collapse; font-size:13px; }
.catalog-grid th, .catalog-grid td { padding:6px 8px; border-bottom:1px solid #e3e8ef; text-align:left; }
.catalog-grid th { background:#e3f2fd; color:#0d47a1; position:sticky; top:0; z-index:1; }
.catalog-grid tbody tr { cursor:pointer; }
.catalog-grid tbody tr:nth-child(even) { background:#fafbff; }
.catalog-grid tbody tr:hover { background:#e8f0fe; }
.catalog-grid tbody tr.selected { background:#c5cae9; }
.catalog-grid .codigo-cell { font-weight:600; color:#1a237e; }

.catalog-detail { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap:12px; }
.catalog-detail dt { font-size:12px; font-weight:600; color:#607d8b; }
.catalog-detail dd { margin:0 0 4px 0; font-size:13px; color:#263238; }

.catalog-medidas { margin-top:8px; padding-top:8px; border-top:1px dashed #cfd8dc; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; }
.catalog-imagenes { display:flex; flex-direction:column; gap:8px; align-items:center; }
.catalog-imagen-main {
  width:100%; max-width:220px; aspect-ratio:4/3; border-radius:8px; border:1px solid #cfd8dc;
  background:#eceff1; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.catalog-imagen-main img { width:100%; height:100%; object-fit:contain; }
.catalog-imagen-placeholder { font-size:12px; color:#78909c; }

.catalog-imagen-thumbs { display:flex; gap:6px; }
.catalog-imagen-thumbs button { width:28px; height:28px; border-radius:999px; font-size:12px; padding:0; }
.catalog-imagen-thumbs button.active { background:#ffca28; color:#263238; }

.catalog-precios-list { margin-top:4px; font-size:13px; }
.catalog-precios-item { padding:8px 10px; border-bottom:1px solid #eceff1; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:8px; }
.catalog-precios-item:last-child { border-bottom:none; }
.catalog-precios-main { flex:1 1 auto; }
.catalog-precios-main .art { font-weight:600; color:#1a237e; margin-bottom:2px; }
.catalog-precios-main .sub { font-size:12px; color:#607d8b; }

.catalog-precios-price {
  flex:0 0 auto; min-width:110px; text-align:center; font-size:14px; font-weight:700; border-radius:999px; padding:6px 12px;
}
.catalog-precios-price.monto { background:#0d47a1; color:#fff; }
.catalog-precios-price.consulte { background:#ffebee; color:#c62828; }

/* === TABS UNIFICADAS === */
.catalog-tabs-rail {
  margin: 16px 0 0 0;
  padding: 0 10px;
  background: transparent;
  border-bottom: 1px solid #c3d2eb;
  box-shadow: none;
  /* IMPORTANTE: El riel se pega visualmente al panel de abajo */
  position: relative;
  z-index: 5;
}

.catalog-tabs {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  gap: 4px;
  justify-content: flex-start;
}

.catalog-tab-btn {
  flex: 0 1 auto;
  width: auto;
  min-width: 150px;
  border: 1px solid #c3d2eb;
  background: linear-gradient(180deg, #e9f1ff 0%, #e3ecff 100%);
  color: #325b9c;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  margin-bottom: -1px; /* Pisa la línea */
  z-index: 0;
  white-space: nowrap;
}

.catalog-tab-btn:hover:not(.active) {
  background: linear-gradient(180deg, #e4edff 0%, #dce7ff 100%);
}

.catalog-tab-btn.active {
  background: #ffffff; /* BLANCO PURO para fundirse con el panel */
  color: #0d47a1;
  border-color: #c3d2eb;
  border-bottom-color: #ffffff; /* Borra la línea divisoria */
  z-index: 10; /* Encima de todo */
  box-shadow: none;
}

.catalog-tab-btn.active::after { display: none; }

/* === EL PANEL PRINCIPAL (La "Carpeta" blanca) === */
.catalog-tab-panel {
  display:none;
  /* Estilo de carpeta unificada */
  background: #ffffff;
  border: 1px solid #c3d2eb;
  border-top: none; /* Se une con el riel */
  border-radius: 0 0 12px 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(13,71,161,0.08);
  margin-bottom: 24px;
}
.catalog-tab-panel.is-active { display:block; }

.catalog-sub { margin:4px 0 0; color:#546e7a; }

/* === Buscador rodamiento (SIN estilos de tarjeta propia) === */
.rodamiento-search {
  margin-bottom: 24px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.rodamiento-search-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.rod-search-title h3 { margin:0; }

.rod-search-box { min-width:320px; flex:1.2; max-width:720px; }
.rod-search-inline { display:flex; gap:12px; align-items:stretch; flex-wrap:nowrap; }

.rod-search-input-wrap {
  position:relative; flex:1; min-width:260px; height:46px; border:1px solid #cfd8e6; border-radius:12px;
  background:#f8fbff; /* Fondo sutil para el input container */
  box-shadow: inset 0 1px 2px rgba(13, 71, 161, 0.05); display:flex; align-items:center; padding:0 14px;
}
.rod-search-input-wrap input {
  border:none; outline:none; width:100%; height:100%; font-size:16px; background:transparent; padding-right:26px; color:#0f172a;
}
.rod-search-input-wrap i { position:absolute; right:12px; color:#5c6c8b; font-size:15px; }

.rod-search-inline button {
  display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border:1px solid #0d47a1;
  background:#0d47a1; color:#fff; border-radius:12px; padding:0 22px; font-weight:800; letter-spacing:0.1px;
  box-shadow:0 4px 12px rgba(13,71,161,0.2); min-width:120px;
}
.rod-search-inline button i { font-size:14px; }
.rod-search-box label { font-weight:800; color:#0d47a1; display:block; margin:0 0 6px; }
.rod-search-hint { margin-top:6px; font-size:13px; color:#5c6c8b; }

.rodamiento-layout { display:grid; grid-template-columns: minmax(0,2.3fr) minmax(0,1fr); gap:16px; align-items:flex-start; }

/* Paneles internos sin borde para unificar */
.rodamiento-left .panel {
  margin:0 0 14px 0; padding:0; background:transparent; border:none; box-shadow:none;
}

/* Tablas con estilo limpio dentro de la carpeta */
.rod-table, .admin-table { background: #fff; border: 1px solid #e3e8ef; }

.panel-title { margin:0 0 8px 0; font-size:15px; color:#0d47a1; font-weight:700; }
.table-wrapper { overflow:auto; border-radius: 8px; border: 1px solid #e3e8ef; }

.rod-table { width:100%; border-collapse:collapse; font-size:13px; }
.rod-table th, .rod-table td { padding:6px 8px; border-bottom:1px solid #e3e8ef; text-align:left; }
.rod-table th { background:#e8f1fc; color:#0d47a1; position:sticky; top:0; z-index:1; }
.rod-table tbody tr:nth-child(even) { background:#f8f9fc; }
.rod-table tbody tr:hover { background:#e9f2ff; }
.rod-row.selected { background:#e3f2fd; color:#0d47a1; font-weight:700; }

.pager { margin-top:8px; }
.pager-buttons { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pager-buttons button { padding:6px 12px; border-radius:8px; border:1px solid #0d47a1; background:#fff; color:#0d47a1; cursor:pointer; }
.pager-buttons button:disabled { opacity:0.5; cursor:not-allowed; }
.pager-status { font-weight:600; color:#37474f; }

/* Detalle rodamiento a la derecha - este sí puede tener un borde sutil o unificarse */
.rodamiento-detail-card {
  background: #fdfeff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 12px;
}
.rod-table-main td:first-child { font-weight:700; }
.rod-table-main td:nth-child(2) { min-width:200px; }
.catalog-empty { font-size:13px; color:#78909c; padding:6px 0; }

.cp-desc, .cp-eq { font-size:13px; color:#455a64; }
.cp-desc { margin-bottom:2px; }
.cp-label { font-weight:600; text-transform:uppercase; font-size:11px; color:#607d8b; }

@media (max-width: 640px){
  .catalog-filters { grid-template-columns: minmax(0,1fr); }
  .catalog-precios-main .art { font-size: 14px; white-space: normal !important; word-break: break-word; line-height: 1.25; max-width: 66%; }
  .catalog-precios-price { min-width: 90px !important; font-size: 13px !important; padding: 6px 10px !important; }
  .catalog-precios-card .product-title{ align-items: flex-start; gap: 6px; }
  .catalog-precios-card .product-main{ font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .catalog-precios-card .product-price{ font-size: 13px; padding: 6px 10px; min-width: 90px; }
}

@media (max-width: 900px){
  .catalog-layout{ grid-template-columns: minmax(0,1fr); }
  .catalog-detail-card, .catalog-precios-card{ margin-top:12px; }
  .rodamiento-layout{ grid-template-columns: minmax(0,1fr); }
  .rod-search-inline{ flex-wrap:wrap; }
  .rod-search-input-wrap{ min-width: 100%; }
  .rod-search-inline button{ width:100%; }
  .rodamiento-detail-card{ margin-top:12px; }
}

/* === FIX RESPONSIVE RODAMIENTOS POR APLICACIÓN (MÓVIL) === */
@media (max-width: 768px) {
  .catalog-main { max-width: 100%; width: 100%; margin: 0 auto; }
  .catalog-grid-card { overflow-x: auto; }
  .catalog-grid-wrapper { max-height: 420px; overflow-y: auto; }
  .catalog-grid { min-width: 720px; }
}