/* ===== Backtesting-only styles (scoped with .bt-*) ===== */

/* Util */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Layout del formulario ---- */
.bt-form-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  min-width: 0;
  margin-top: 6px;
}

/* Spans */
.bt-col-2 { grid-column: span 2; }
.bt-col-3 { grid-column: span 3; }
.bt-col-4 { grid-column: span 4; }
.bt-col-12{ grid-column: span 12; }

/* Responsive */
@media (max-width: 1200px){
  .bt-col-2, .bt-col-3 { grid-column: span 6; }
  .bt-col-4             { grid-column: span 12; }
}
@media (max-width: 700px){
  .bt-col-2, .bt-col-3, .bt-col-4, .bt-col-12 { grid-column: span 12; }
}

/* ---- Campos ---- */
.bt-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bt-label{
  font-size: 13px;
  color: var(--muted);
}

.bt-input, .bt-select{
  width: 100%;
  padding: 10px 12px;
  line-height: 1.2;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  outline: none;
  min-width: 0;
}

/* Select redondeado con flecha consistente (una sola línea, URL-encoded) */
.bt-select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23a9b0be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* Focus */
.bt-input:focus, .bt-select:focus{
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

/* Numeric spinners: limpiar flechas */
.bt-input[type="number"]::-webkit-outer-spin-button,
.bt-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.bt-input[type="number"]{
  appearance: textfield;        /* estándar (silencia el warning del linter) */
  -moz-appearance: textfield;   /* Firefox */
}

/* Date picker: icono más visible en dark */
.bt-input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(80%);
  opacity: .9;
}

/* ---- Preview ---- */
.bt-preview-dl{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 14px;
}

/* ---- Título ---- */
.bt-title{ margin: 6px 4px 14px 4px; }


/* ===== Combobox personalizado (reemplaza el desplegable nativo) ===== */

.cbx { position: relative; width: 100%; }

/* Botón que simula el select cerrado: reutiliza look de .bt-input */
.cbx-btn{
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  padding-right: 36px; /* espacio para la flecha */
  line-height: 1.2;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  outline: none;
  min-width: 0;
  position: relative;
}

/* Flecha */
.cbx-btn::after{
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23a9b0be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Focus ring */
.cbx-btn:focus-visible{
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

/* Menú */
.cbx-menu{
  position: absolute;
  z-index: 1000;
  left: 0; right: 0;
  top: calc(100% + 6px);
  max-height: 260px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;                /* <- redondeado */
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
}

/* Mostrar cuando está abierto */
.cbx[data-open="true"] .cbx-menu{ display: block; }

/* Opción */
.cbx-option{
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
.cbx-option:hover, .cbx-option:focus{
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.cbx-option[aria-selected="true"]{
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Ocultar visualmente el select original (sigue enviándose en el form) */
.cbx > select{ display: none; }