/* =============================================
   JurisParaguay — Estilos Principales
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-primary: #1a3a5c;
  --clr-primary-light: #2a5a8c;
  --clr-accent: #c8a84b;
  --clr-bg: #f4f6f9;
  --clr-card: #ffffff;
  --clr-text: #1e2a3a;
  --clr-text-muted: #5a6a7a;
  --clr-border: #dde3ea;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --transition: .2s ease;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Search Bar --- */
.search-bar {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.search-bar input {
  flex: 1; border: none; padding: .8rem 1.2rem;
  font-size: 1rem; color: var(--clr-text); outline: none;
}
.search-bar button {
  background: var(--clr-accent); color: #fff; border: none;
  padding: .8rem 1.4rem; cursor: pointer; font-size: .95rem;
  font-weight: 600; transition: background var(--transition);
}
.search-bar button:hover { background: #b8943b; }

/* --- Barra de progreso --- */
#jp-progress-wrap {
  background: var(--clr-primary);
  padding: .5rem 1.25rem .6rem;
  display: flex; align-items: center; gap: 1rem;
  transition: opacity .4s ease, max-height .5s ease, padding .5s ease;
  max-height: 60px; overflow: hidden;
}
#jp-progress-wrap.jp-progress--done { opacity:0; max-height:0; padding:0; pointer-events:none; }
#jp-progress-text { color:rgba(255,255,255,.85); font-size:.78rem; white-space:nowrap; min-width:240px; }
.jp-progress-track { flex:1; background:rgba(255,255,255,.2); border-radius:50px; height:6px; overflow:hidden; }
#jp-progress-bar { height:100%; background:var(--clr-accent); border-radius:50px; transition:width .35s ease; }

/* ============================================
   INDEX — Grid de categorías en columnas
   Usamos column-count (masonry) para que los
   grupos se apilen sin dejar huecos vacíos.
   ============================================ */

.categorias-grid {
  column-count: 3;
  column-gap: 1.25rem;
  padding: 1.5rem 0 2.5rem;
}
@media (max-width: 860px) { .categorias-grid { column-count: 2; } }
@media (max-width: 520px) { .categorias-grid { column-count: 1; } }

/* Columna de una categoría */
.cat-section {
  break-inside: avoid;     /* nunca parte un grupo entre columnas */
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;  /* espacio entre grupos dentro de la misma columna */
}

/* Etiqueta de color de la categoría */
.cat-section__title {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  padding: .3rem .8rem;
  border-radius: 3px;
  margin-bottom: .5rem;
  align-self: flex-start;
}

/* Contenedor de la lista de códigos */
.cat-list {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Lista de leyes — sin borde propio, se une visualmente con el divider */
.cat-list--leyes {
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}

/* Separador entre códigos y leyes */
.cat-list__divider {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a8a8a;
  padding: .55rem 1rem .3rem;
  border: 1px solid var(--clr-border);
  border-top: 1px dashed #e2e2e2;
  border-bottom: none;
  background: #fafafa;
  margin-top: 0;
}

/* Cada fila */
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .9rem;
  text-decoration: none;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}
.cat-item:last-child { border-bottom: none; }
.cat-item:hover { background: #f5f8ff; }

/* Filas de leyes: ligeramente más livianas */
.cat-item--ley {
  opacity: .88;
}
.cat-item--ley:hover { opacity: 1; }

.cat-item__nombre {
  font-size: .84rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.cat-item:hover .cat-item__nombre { color: var(--clr-primary-light); }

/* Badge para códigos (dorado) */
.cat-item__ley {
  flex-shrink: 0;
  font-size: .62rem;
  font-weight: 700;
  color: var(--clr-accent);
  background: rgba(200,168,75,.1);
  border: 1px solid rgba(200,168,75,.3);
  border-radius: 3px;
  padding: .1rem .38rem;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge para leyes (neutro/gris) */
.cat-item--ley .cat-item__ley {
  color: #6a6a6a;
  background: #f2ede2;
  border-color: #ddd;
  font-size: .6rem;
}

/* Botón "Ver N más" */
.cat-ver-mas {
  display: block;
  width: 100%;
  text-align: left;
  padding: .4rem 1rem;
  font-size: .76rem;
  color: var(--clr-primary);
  background: #f7f9fc;
  border: 1px solid var(--clr-border);
  border-top: 1px dashed #e2e2e2;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.cat-ver-mas:hover { background: #edf1f7; color: var(--clr-primary-light); }

/* ============================================
   RESULTADOS DE BÚSQUEDA
   ============================================ */

.jp-resultados-header { margin: 2rem 0 1rem; }
.jp-resultados-titulo {
  font-size: 1rem; color: var(--clr-primary);
  margin-bottom: .75rem; font-weight: 600; line-height: 1.5;
}
.jp-resultados-titulo strong { font-weight: 800; }
.jp-resultados-titulo em { font-style: italic; color: var(--clr-accent); }

.jp-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.jp-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--clr-primary); color:#fff;
  text-decoration:none; padding:.28rem .7rem;
  border-radius:50px; font-size:.75rem; font-weight:600;
  transition:background var(--transition);
}
.jp-chip:hover { background:var(--clr-primary-light); }
.jp-chip__count {
  background:var(--clr-accent); color:#fff;
  border-radius:50px; padding:.05rem .4rem;
  font-size:.7rem; font-weight:700;
}

.jp-search-loading { text-align:center; padding:1.5rem; color:var(--clr-text-muted); font-size:.92rem; }

.jp-grupo {
  background:var(--clr-card); border-radius:var(--radius);
  border:1px solid var(--clr-border); margin-bottom:1.2rem;
  overflow:hidden; box-shadow:var(--shadow);
}
.jp-grupo__header {
  background:var(--clr-primary); color:#fff;
  padding:.7rem 1rem; display:flex;
  align-items:center; justify-content:space-between; gap:.5rem;
}
.jp-grupo__nombre { font-weight:600; font-size:.95rem; }
.jp-grupo__meta { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.jp-grupo__count { font-size:.78rem; opacity:.75; }
.jp-grupo__link {
  color:var(--clr-accent); font-size:.8rem;
  text-decoration:none; white-space:nowrap;
  font-weight:600; transition:opacity var(--transition);
}
.jp-grupo__link:hover { opacity:.75; }

.jp-art-lista { display:flex; flex-direction:column; }
.jp-art-item {
  display:block; padding:.65rem 1rem;
  border-top:1px solid #f0f0f0;
  text-decoration:none; color:inherit;
  transition:background var(--transition);
}
.jp-art-item:hover { background:#f5f8ff; }
.jp-art-item__header {
  display:flex; align-items:baseline;
  gap:.5rem; flex-wrap:wrap; margin-bottom:.15rem;
}
.jp-art-item__num {
  font-size:.72rem; font-weight:800;
  color:var(--clr-primary); background:#e8f0fb;
  padding:.1rem .45rem; border-radius:4px;
  white-space:nowrap; flex-shrink:0;
}
.jp-art-item__epigrafe { font-size:.88rem; font-weight:600; color:var(--clr-text); }
.jp-art-item__snippet {
  font-size:.79rem; color:var(--clr-text-muted);
  line-height:1.6; margin-top:.2rem; padding-left:.1rem;
}
.jp-art-item__snippet + .jp-art-item__snippet {
  margin-top:.1rem; padding-top:.1rem; border-top:1px dashed #eaeaea;
}
.jp-art-item__snippet mark,
.jp-art-item__epigrafe mark,
.jp-resultados-titulo mark {
  background:rgba(200,168,75,.35); border-radius:2px;
  padding:0 2px; font-style:normal; font-weight:600; color:#7a5800;
}

.jp-ver-mas {
  width:100%; background:#f4f6f9; border:none;
  border-top:1px solid var(--clr-border); padding:.6rem 1rem;
  font-size:.8rem; color:var(--clr-primary); cursor:pointer;
  font-weight:600; text-align:left; transition:background var(--transition);
}
.jp-ver-mas:hover { background:#e8eef7; }

.empty-state { text-align:center; padding:3rem 1rem; color:var(--clr-text-muted); }

/* --- Footer --- */
.footer {
  background: var(--clr-primary);
  color: rgba(255,255,255,.8);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  font-size: .9rem;
  line-height: 1.8;
}

/* --- Diagnóstico flotante --- */
#jp-diag {
  position:fixed; bottom:1rem; right:1rem; z-index:9999;
  max-width:360px; font-size:.78rem; font-family:monospace;
  display:flex; flex-direction:column; gap:.3rem; pointer-events:none;
}
#jp-diag div {
  padding:.35rem .65rem; border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.3); color:#fff;
}

/* --- Responsive --- */
@media (max-width:600px) {
  #jp-progress-text { min-width:unset; font-size:.72rem; }
  .jp-chips { gap:.3rem; }
  .jp-chip { font-size:.7rem; }
}

/* --- Leyes resultados --- */
.jp-leyes-resultados { margin-top: 1.5rem; }
.jp-leyes-resultados h3 { font-size:.95rem; color:var(--clr-primary); margin-bottom:.75rem; }
.jp-ley-item {
  display:block; padding:.55rem .9rem;
  background:#fff; border:1px solid var(--clr-border);
  border-radius:6px; margin-bottom:.5rem;
  text-decoration:none; color:inherit;
  transition:background var(--transition);
}
.jp-ley-item:hover { background:#f5f8ff; }
.jp-ley-item__num { font-size:.72rem; font-weight:800; color:var(--clr-primary); margin-bottom:.1rem; }
.jp-ley-item__titulo { font-size:.86rem; font-weight:600; }
.jp-ley-item__meta { font-size:.75rem; color:var(--clr-text-muted); margin-top:.1rem; }
.jp-leyes-no-resultados { color:var(--clr-text-muted); font-size:.85rem; }
.jp-search-status { padding:2rem 0; color:var(--clr-text-muted); font-size:.9rem; }