.ds-bills{
  padding-top: 42px;
  padding-bottom: 56px;
}

/* Encabezado bonito */
.ds-head{
  margin-bottom: 16px;
  padding: 18px 18px 4px;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(1200px 420px at 10% -10%, rgba(227,179,65,.18), transparent 60%),
    radial-gradient(900px 380px at 90% 0%, rgba(67,97,238,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border: 1px solid rgba(0,0,0,.06);
}

.ds-head__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ds-blue-900);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
}

.ds-head h1{
  margin: 0 0 6px;
  letter-spacing: -.02em;
}

.ds-head p{
  margin: 0 0 10px;
  opacity: .9;
}

/* Card principal */
.ds-card{
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Form */
.ds-form{
  display:grid;
  gap:14px;
  padding: 18px;
}

.ds-form .row{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}

@media (min-width:720px){
  .ds-form .row{ grid-template-columns: 1fr 1fr; }
}

.ds-form label{
  display:grid;
  gap:6px;
  font-weight:700;
  color: var(--ds-blue-900);
}

.ds-form input,
.ds-form select{
  height:44px;
  border: 1px solid var(--ds-gray-300);
  border-radius: 12px;
  padding: 0 .9rem;
  font: inherit;
  background: rgba(255,255,255,.95);
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}

.ds-form input:focus,
.ds-form select:focus{
  outline: none;
  border-color: rgba(227,179,65,.85);
  box-shadow: 0 0 0 4px rgba(227,179,65,.18);
}

.ds-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 4px;
}

/* Botón primario con estado "loading" */
#btnBuscar{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-right: 16px;
  min-width: 150px;
  justify-content:center;
}

#btnBuscar .spin{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.65);
  border-top-color: rgba(255,255,255,1);
  display:none;
  animation: ds-rot .8s linear infinite;
}

#btnBuscar.is-loading .txt{ opacity: .92; }
#btnBuscar.is-loading .spin{ display:inline-block; }
#btnBuscar.is-loading{ pointer-events:none; filter: saturate(1.05); }

@keyframes ds-rot{
  to{ transform: rotate(360deg); }
}

/* Botón ghost (si no tienes ds-btn--ghost en base.css) */
.ds-btn--ghost{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--ds-blue-900);
}

.ds-btn--ghost:hover{
  background: rgba(255,255,255,.9);
}

.ds-hint{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.72);
  font-weight: 600;
}

.ds-hint .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(227,179,65,.9);
  box-shadow: 0 0 0 5px rgba(227,179,65,.18);
}

/* Resultados */
.ds-billresults{
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 16px 18px 18px;
  background: rgba(255,255,255,.70);
}

.ds-result__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--ds-blue-900);
}

.ds-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
}

.ds-muted{ opacity: .85; }

.ds-empty{
  display:grid;
  gap:10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.6);
}

.ds-empty .ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(227,179,65,.15);
  border: 1px solid rgba(227,179,65,.35);
  font-size: 22px;
}

.ds-empty h3{
  margin: 0;
  color: var(--ds-blue-900);
  letter-spacing: -.01em;
}

.ds-empty p{
  margin: 0;
  color: rgba(0,0,0,.74);
  font-weight: 600;
}

.ds-empty .actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 2px;
}


/* Más aire debajo del menú (header fijo) */
.ds-bills{
  /* si tu menú define --nav-h, lo usamos */
  padding-top: calc(var(--nav-h, 72px) + 28px) !important;
}

/* opcional: un poquito más de separación del bloque principal */
.ds-head{
  margin-top: 8px;
}