/* =========================================================
   BuscarView.css — Xiloteca (Modal 50/50)
   Estructura:
   0) Variables
   1) Contenedor modal (layout general)
   2) Header / Footer
   3) Columna izquierda (imágenes)
      3.1) Caja de imagen principal + caption
      3.2) Tira de miniaturas (thumbs)
   4) Columna derecha (cajas de texto)
   5) Estados / Utilidades
   6) Responsive
   ========================================================= */

/* ========== 0) Variables ========== */
:root{
  --xilo-gap: 8px;
  --xilo-panel-radius: 10px;
  --xilo-border: 1px solid rgba(0,0,0,.08);
  --xilo-shadow: 0 1px 2px rgba(0,0,0,.04);
  --xilo-bg-soft: #f8f9fa;

  --xilo-caption-bg: rgba(255,255,255,.9);
  --xilo-caption-color: #333;

  --xilo-title-accent: #0d6efd;
  --xilo-thumb-outline: rgba(13,110,253,.6);

  --xilo-main-padding: 10px; /* padding solicitado para la imagen principal */
}

/* ========== 1) Contenedor modal (layout general) ========== */
.modal-xilo{
  height: 100vh;
}
.modal.show .modal-body{
  overflow: hidden; /* evita scroll global; cada columna maneja su overflow */
}
.xilo-row-fill{
  /* Altura disponible = viewport - header aprox - footer aprox */
  height: calc(100vh - 56px - 64px);
}
.xilo-pane{
  height: 100%;
  overflow: hidden; /* contenedor sin scroll global */
}
.xilo-pane-left .xilo-left-wrap,
.xilo-pane-right .xilo-right-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ========== 2) Header / Footer ========== */
.modal-xilo-header{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: var(--xilo-border);
}
.xilo-especie{
  font-size: clamp(1.125rem, 2.2vw, 2rem);
}
.modal-xilo .modal-footer{
  border-top: var(--xilo-border);
}

/* ========== 3) Columna izquierda (imágenes) ========== */

/* 3.1) Caja de imagen principal + caption */
.xilo-mainimg-wrap{
  flex: 1 1 auto;
  background: var(--xilo-bg-soft);
  margin: var(--xilo-gap);
  padding: var(--xilo-main-padding);
  border: var(--xilo-border);
  border-radius: var(--xilo-panel-radius);
  overflow: hidden;
}
.xilo-imgbox{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;           
  display: flex;
  align-items: center;
  justify-content: center;
}
.xilo-mainimg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.xilo-imgcap{
  position: absolute;
  left: var(--xilo-main-padding);
  right: var(--xilo-main-padding);
  bottom: var(--xilo-main-padding);
  padding: 6px 10px;
  font-size: 0.9rem;
  line-height: 1.2;
  background: var(--xilo-caption-bg);
  color: var(--xilo-caption-color);
  border: var(--xilo-border);
  border-radius: var(--xilo-panel-radius);
  text-align: center;
  pointer-events: none;       
}

/* 3.2) Tira de miniaturas (thumbs) */
.xilo-thumbs{
  flex: 0 0 auto;
  padding: var(--xilo-gap);
  padding-top: 0;
  overflow-x: auto;
  display: flex;
  gap: calc(var(--xilo-gap) * 2);
  justify-content: center;
}
.xilo-thumb{
  min-width: 118px;         
  max-width: 196px; 
  border-radius: var(--xilo-panel-radius);
  border: var(--xilo-border);
  box-shadow: var(--xilo-shadow);
  background: #fff;
  flex: 0 0 auto;           
  
}
.xilo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* ========== 4) Columna derecha (cajas de texto) ========== */
.xilo-right-wrap{
  padding: 12px;
  overflow: auto;              
}
.info-box{
  background: #fff;
  border: var(--xilo-border);
  border-radius: var(--xilo-panel-radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--xilo-shadow);
}
.info-title{
  font-size: 1rem;
  margin: 0 0 6px;
  color: #333;
  border-left: 4px solid var(--xilo-title-accent);
  padding-left: 8px;
}
.info-content{
  font-size: 0.95rem;
  color: #444;
}

/* ========== 5) Estados / Utilidades ========== */
.xilo-thumb.active{
  outline: 3px solid var(--xilo-thumb-outline);
  outline-offset: 0;
}

/* ========== 6) Responsive ========== */
@media (max-width: 768px){
  .xilo-row-fill{
    height: calc(100vh - 56px - 64px);
  }
  .xilo-thumb{
    min-width: 98px;	
  }
}