/* ==========================================================================
   BITECA CLEAN & MINIMALIST UI - ESTILO CATALOGO VEHICULOS / VIVIENDAS
   ========================================================================== */

:root {
  --biteca-bg: #f8fafc;
  --biteca-surface: #ffffff;
  --biteca-surface-alt: #f1f5f9;
  --biteca-border: #e2e8f0;
  --biteca-text: #0f172a;
  --biteca-text-muted: #64748b;
  --biteca-primary: #2563eb;
  --biteca-primary-soft: #eff6ff;
  --biteca-radius-lg: 16px;
  --biteca-radius-md: 12px;
  --biteca-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --biteca-shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
}

body {
  background-color: var(--biteca-bg) !important;
  color: var(--biteca-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Header & Navbar minimalista claro */
ds-header,
ds-themed-header,
header,
.header-navbar-wrapper,
ds-navbar,
ds-themed-navbar,
nav.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--biteca-border) !important;
  box-shadow: none !important;
}

ds-header a,
ds-navbar a,
.navbar-nav .nav-link,
.ds-menu-item {
  color: #334155 !important;
  font-weight: 500 !important;
}

ds-header a:hover,
ds-navbar a:hover,
.navbar-nav .nav-link:hover {
  color: var(--biteca-primary) !important;
}

/* Breadcrumbs limpios */
ds-breadcrumbs,
ds-themed-breadcrumbs,
.breadcrumb,
ol.breadcrumb {
  background: transparent !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.85rem !important;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--biteca-text-muted) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   VISTA DE DETALLE DE ITEM (ESTILO FICHA DE VEHICULO / VIVIENDA)
   ========================================================================== */

ds-item-page,
ds-themed-item-page {
  display: block;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

ds-item-page .container,
ds-themed-item-page .container {
  background: var(--biteca-surface);
  border: 1px solid var(--biteca-border);
  border-radius: var(--biteca-radius-lg);
  box-shadow: var(--biteca-shadow-md);
  padding: 2rem 2.25rem !important;
  margin-top: 0.75rem;
}

/* Titulo principal del item estilo portal inmobiliario/automotriz */
ds-item-page-title-field h1,
.item-page-title-field h1,
ds-item-page h1.dont-break-out {
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  color: var(--biteca-text) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 1.75rem !important;
  border-bottom: 1px solid var(--biteca-border) !important;
}

/* Columna izquierda: Galeria / Imagen y Archivos en tarjeta destacada */
ds-item-page .col-xs-12.col-md-4,
ds-themed-item-page .col-xs-12.col-md-4 {
  background: var(--biteca-bg);
  border: 1px solid var(--biteca-border);
  border-radius: var(--biteca-radius-md);
  padding: 1.25rem !important;
  align-self: flex-start;
}

ds-thumbnail img,
.thumbnail img {
  border-radius: 10px !important;
  border: 1px solid var(--biteca-border) !important;
  background: #ffffff !important;
  padding: 0.35rem !important;
  box-shadow: var(--biteca-shadow-sm) !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Columna derecha: Grilla de caracteristicas / especificaciones del item */
ds-item-page .col-xs-12.col-md-8,
ds-themed-item-page .col-xs-12.col-md-8 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 0.9rem !important;
  padding-left: 1.5rem !important;
  align-content: start !important;
}

@media (max-width: 768px) {
  ds-item-page .col-xs-12.col-md-8,
  ds-themed-item-page .col-xs-12.col-md-8 {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    margin-top: 1.25rem !important;
  }
}

/* Cada atributo/metadato como una tarjeta de especificacion (Ficha tecnica) */
ds-item-page .simple-view-element,
ds-themed-item-page .simple-view-element,
ds-generic-item-page-field .simple-view-element {
  background: var(--biteca-bg) !important;
  border: 1px solid var(--biteca-border) !important;
  border-radius: var(--biteca-radius-md) !important;
  padding: 0.95rem 1.15rem !important;
  margin-bottom: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

ds-item-page .simple-view-element:hover,
ds-themed-item-page .simple-view-element:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  box-shadow: var(--biteca-shadow-sm) !important;
}

/* El resumen / abstract o descripcion ocupa todo el ancho como en portales de inmuebles/vehiculos */
ds-item-page-abstract-field,
ds-generic-item-page-field:first-child {
  grid-column: 1 / -1 !important;
}

/* Etiqueta del atributo (ej. MARCA / AUTOR / FECHA / MODELO / UBICACION) */
.simple-view-element-header,
h2.simple-view-element-header,
h3.simple-view-element-header,
h4.simple-view-element-header,
h5.simple-view-element-header {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--biteca-text-muted) !important;
  margin-bottom: 0.35rem !important;
}

/* Valor del atributo */
.simple-view-element-body {
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  color: var(--biteca-text) !important;
  line-height: 1.45 !important;
}

ds-item-page-abstract-field .simple-view-element-body {
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.65 !important;
}

/* Listado de tarjetas en busquedas y home (Estilo listado de vehiculos/inmuebles) */
.card,
ds-listable-object-component-loader .row,
.item-list-preview {
  background: #ffffff !important;
  border: 1px solid var(--biteca-border) !important;
  border-radius: var(--biteca-radius-md) !important;
  box-shadow: var(--biteca-shadow-sm) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

ds-listable-object-component-loader .row {
  padding: 1rem !important;
  margin-bottom: 0.9rem !important;
}

ds-listable-object-component-loader .row:hover {
  transform: translateY(-2px);
  box-shadow: var(--biteca-shadow-md) !important;
  border-color: #cbd5e1 !important;
}

/* Badges y botones minimalistas */
.badge {
  background-color: var(--biteca-primary-soft) !important;
  color: var(--biteca-primary) !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 600 !important;
  padding: 0.35em 0.65em !important;
  border-radius: 6px !important;
}

.btn-primary,
.btn-outline-primary:hover {
  background-color: var(--biteca-primary) !important;
  border-color: var(--biteca-primary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.btn-outline-primary,
.btn-secondary,
.btn-light {
  background-color: #ffffff !important;
  border: 1px solid var(--biteca-border) !important;
  color: var(--biteca-text) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}