/* === ESTILOS PARA COMPRAS Y LICITACIONES === */

#compras-juschubut {
  /* Paleta */
  --svc-primary: #1f385e;
  --svc-secondary: #cf9957;
  --svc-primary-10: rgba(31,56,94,.10);
  --svc-primary-15: rgba(31,56,94,.15);
  --svc-primary-20: rgba(31,56,94,.20);
  --svc-secondary-10: rgba(207,153,87,.10);
  --svc-secondary-15: rgba(207,153,87,.15);
  --svc-text: #1f2937;
  --svc-muted: #5b6476;
  --svc-card-bg: #ffffff;
  --svc-bg: #f6f8fb;

  /* UI */
  --svc-radius: 18px;
  --svc-shadow: 0 6px 22px rgba(0,0,0,.06);

  background: var(--svc-bg);
  padding: 8px 0 64px;
  color: var(--svc-text);
}

#compras-juschubut .svc-title{
  font-size: clamp(28px, 2.4vw, 40px);
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #0f213a;
}

#compras-juschubut .svc-header-logo {
  max-width: 400px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

#compras-juschubut .svc-subtitle{
  margin: 0 0 22px;
  color: var(--svc-muted);
  max-width: 70ch;
}

#compras-juschubut .svc-intro{
  margin-bottom: 24px;
  color: var(--svc-muted);
  line-height: 1.6;
}

#compras-juschubut .svc-intro p{
  margin-bottom: 12px;
}

#compras-juschubut .svc-intro a{
  color: var(--svc-primary);
  text-decoration: none;
  font-weight: 600;
}

#compras-juschubut .svc-intro a:hover{
  color: var(--svc-secondary);
  text-decoration: underline;
}

#compras-juschubut .svc-controls{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}

#compras-juschubut .svc-search{ position: relative; }

#compras-juschubut #svcSearch{
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 44px 12px 14px;
  font-size: 15px;
  background: #fff;
  outline: none;
}

#compras-juschubut #svcSearch:focus-visible{
  border-color: var(--svc-primary);
  box-shadow: 0 0 0 3px var(--svc-primary-10);
}

#compras-juschubut .svc-clear{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--svc-primary-10); cursor: pointer; font-size: 18px; line-height: 32px;
}
#compras-juschubut .svc-clear:hover{ background: var(--svc-primary-15); }
#compras-juschubut .svc-clear:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#compras-juschubut .svc-filters{
  display: flex; flex-wrap: wrap; gap: 8px;
}
#compras-juschubut .svc-chip{
  border: 1px solid #e5e7eb; background: #fff; color: var(--svc-text);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
#compras-juschubut .svc-chip:hover{ border-color: var(--svc-primary); background: var(--svc-primary-10); }
#compras-juschubut .svc-chip.is-active{
  border-color: var(--svc-primary);
  background: var(--svc-primary-10);
  color: #0f213a;
}
#compras-juschubut .svc-chip:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#compras-juschubut .svc-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

#compras-juschubut .svc-card{
  grid-column: span 12 / span 12;
  background: var(--svc-card-bg);
  border-radius: var(--svc-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--svc-shadow);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid #eef2f7;
}
#compras-juschubut .svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: #e3e8f2;
}

#compras-juschubut .svc-card-title{ font-size: 18px; margin: 0; color: #0f213a; }
#compras-juschubut .svc-card-desc{ color: var(--svc-muted); margin: 0 0 6px; }

#compras-juschubut .svc-card-actions{
  display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}

#compras-juschubut .svc-btn{
  display: inline-block; padding: 8px 14px; border-radius: 10px;
  background: var(--svc-primary); color: #fff; text-decoration: none; font-weight: 700;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#compras-juschubut .svc-btn:hover{
  background: #172b49;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31,56,94,.22);
}
#compras-juschubut .svc-btn:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#compras-juschubut .svc-tag{
  font-size: 12px; color: #334155; background: #f3f5f9; padding: 6px 10px; border-radius: 999px;
  border: 1px solid #e7ecf5;
}

/* Responsive columnas */
@media (min-width: 640px){
  #compras-juschubut .svc-card{ grid-column: span 6 / span 6; }
}
@media (min-width: 992px){
  #compras-juschubut .svc-controls{ grid-template-columns: 1fr auto; align-items: center; }
  #compras-juschubut .svc-card{ grid-column: span 4 / span 4; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #compras-juschubut .svc-card,
  #compras-juschubut .svc-btn,
  #compras-juschubut .svc-chip{
    transition: none !important;
  }
}

/* === ESTILOS PARA SERVICIOS (original) === */

/* Heredar estilo institucional de #servicios-juschubut */
#servicios-juschubut {
  /* Paleta */
  --svc-primary: #1f385e;               /* base */
  --svc-secondary: #cf9957;             /* secundario */
  --svc-primary-10: rgba(31,56,94,.10); /* tint para fondos */
  --svc-primary-15: rgba(31,56,94,.15);
  --svc-primary-20: rgba(31,56,94,.20);
  --svc-secondary-10: rgba(207,153,87,.10);
  --svc-secondary-15: rgba(207,153,87,.15);
  --svc-text: #1f2937;
  --svc-muted: #5b6476;
  --svc-card-bg: #ffffff;
  --svc-bg: #f6f8fb;

  /* UI */
  --svc-radius: 18px;
  --svc-shadow: 0 6px 22px rgba(0,0,0,.06);

  background: var(--svc-bg);
  padding: 8px 0 64px;
  color: var(--svc-text);
}

#servicios-juschubut .svc-title{
  font-size: clamp(28px, 2.4vw, 40px);
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #0f213a;
}

#servicios-juschubut .svc-header-logo {
  max-width: 400px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

#servicios-juschubut .svc-subtitle{
  margin: 0 0 22px;
  color: var(--svc-muted);
  max-width: 70ch;
}

#servicios-juschubut .svc-intro{
  margin-bottom: 24px;
  color: var(--svc-muted);
  line-height: 1.6;
}

#servicios-juschubut .svc-intro p{
  margin-bottom: 12px;
}

#servicios-juschubut .svc-intro a{
  color: var(--svc-primary);
  text-decoration: none;
  font-weight: 600;
}

#servicios-juschubut .svc-intro a:hover{
  color: var(--svc-secondary);
  text-decoration: underline;
}

#servicios-juschubut .svc-controls{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}

#servicios-juschubut .svc-search{ position: relative; }

#servicios-juschubut #svcSearch{
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 44px 12px 14px;
  font-size: 15px;
  background: #fff;
  outline: none;
}
#servicios-juschubut #svcSearch:focus-visible{
  border-color: var(--svc-primary);
  box-shadow: 0 0 0 3px var(--svc-primary-10);
}

#servicios-juschubut .svc-clear{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--svc-primary-10); cursor: pointer; font-size: 18px; line-height: 32px;
}
#servicios-juschubut .svc-clear:hover{ background: var(--svc-primary-15); }
#servicios-juschubut .svc-clear:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#servicios-juschubut .svc-filters{
  display: flex; flex-wrap: wrap; gap: 8px;
}
#servicios-juschubut .svc-chip{
  border: 1px solid #e5e7eb; background: #fff; color: var(--svc-text);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
#servicios-juschubut .svc-chip:hover{ border-color: var(--svc-primary); background: var(--svc-primary-10); }
#servicios-juschubut .svc-chip.is-active{
  border-color: var(--svc-primary);
  background: var(--svc-primary-10);
  color: #0f213a;
}
#servicios-juschubut .svc-chip:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#servicios-juschubut .svc-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

#servicios-juschubut .svc-card{
  grid-column: span 12 / span 12;
  background: var(--svc-card-bg);
  border-radius: var(--svc-radius);
  padding: 18px 18px 16px;
  box-shadow: var(--svc-shadow);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid #eef2f7;
}
#servicios-juschubut .svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: #e3e8f2;
}

#servicios-juschubut .svc-card-title{ font-size: 18px; margin: 0; color: #0f213a; }
#servicios-juschubut .svc-card-desc{ color: var(--svc-muted); margin: 0 0 6px; }

#servicios-juschubut .svc-card-actions{
  display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
}

#servicios-juschubut .svc-btn{
  display: inline-block; padding: 8px 14px; border-radius: 10px;
  background: var(--svc-primary); color: #fff; text-decoration: none; font-weight: 700;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
#servicios-juschubut .svc-btn:hover{
  background: #172b49; /* oscuro de la base */
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31,56,94,.22);
}
#servicios-juschubut .svc-btn:focus-visible{
  outline: 2px solid var(--svc-primary);
  outline-offset: 2px;
}

#servicios-juschubut .svc-tag{
  font-size: 12px; color: #334155; background: #f3f5f9; padding: 6px 10px; border-radius: 999px;
  border: 1px solid #e7ecf5;
}

/* Responsive columnas */
@media (min-width: 640px){
  #servicios-juschubut .svc-card{ grid-column: span 6 / span 6; }
}
@media (min-width: 992px){
  #servicios-juschubut .svc-controls{ grid-template-columns: 1fr auto; align-items: center; }
  #servicios-juschubut .svc-card{ grid-column: span 4 / span 4; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #servicios-juschubut .svc-card,
  #servicios-juschubut .svc-btn,
  #servicios-juschubut .svc-chip{
    transition: none !important;
  }
}
