/* Tipografías (si existen en tu despliegue actual) */
    @font-face {font-family: Ubuntu;src: url(Ubuntu-R.ttf);}
    @font-face {font-family: UbuntuB;src: url(Ubuntu-B.ttf);}

    /* Sobrescribir look&feel de la app de colores para encajar con Jocarsa */
    :root{
      --bg:#ffffff;
      --card:#ffffff;
      --stroke:#e7e9f2;
      --text:#0f172a;
      --muted:#64748b;
      --shadow: 0 10px 30px rgba(15,23,42,.08);
      --r: 16px;
    }
    body{ background: var(--bg); font-family: Ubuntu, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

    /* Cabecera estilo Jocarsa */
    header.site{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      box-shadow:0px 2px 4px rgba(0,0,0,0.3);
      gap:20px;
      padding:10px;
      position:sticky;
      top:0;
      background:rgba(255,255,255,0.95);
      backdrop-filter:saturate(180%) blur(12px);
      z-index:10;
    }
    header.site img{width:30px;}
    header.site a{ text-decoration:none; color:indigo; font-size:11px; display:flex; gap:6px; align-items:center; padding:6px 10px; border-radius:10px; }
    header.site a:hover{ background: rgba(79,70,229,0.06); }
    header.site .brand{ gap:10px; padding:6px 8px; }
    header.site .brand h1{ font-size:14px; margin:0; font-family: UbuntuB, Ubuntu, sans-serif; }

    /* Ajustes del bloque superior para que no quede "en negro" */
    .top{ max-width:1200px; margin:18px auto 12px; padding:0 18px; color: var(--text); }
    .top p{ color: var(--muted); }

    /* Pequeño aire Jocarsa en cards */
    .card__header{ background: linear-gradient(180deg, rgba(79,70,229,0.05), rgba(79,70,229,0)); }
    .chip.is-active{ border-color: rgba(79,70,229,0.55); box-shadow: 0 10px 30px rgba(79,70,229,.12); }
    
    
    :root{
  --bg:#010101;
  --card:#ffffff;
  --stroke:#e7e9f2;
  --text:#0f172a;
  --muted:#64748b;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --r: 2px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}

.top{
  max-width:1200px;
  margin:32px auto 12px;
  padding:0 18px;
  color:white;
}

.top__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.top h1{
  margin:0 0 6px;
  font-size:22px;
  letter-spacing:.2px;
}

.top p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.top__right{
  display:flex;
  gap:10px;
  align-items:center;
}

.search{
  width:min(360px, 92vw);
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:#fff;
  box-shadow: var(--shadow);
  outline:none;
  font-size:13px;
  color:var(--text);
}
.search::placeholder{ color: #94a3b8; }
.search:focus{
  border-color:#cbd5e1;
}

/* category bubbles */
.chips{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  border:1px solid var(--stroke);
  background:#fff;
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  box-shadow: var(--shadow);
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

.chip__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--muted);
  font-size:11px;
  background:rgba(15,23,42,.02);
}

.chip:hover{
  border-color:#cbd5e1;
}

.chip.is-active{
  border-color:#94a3b8;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
}

.grid{
  max-width:100%;
  margin:0 auto 40px;
  padding:18px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.card{
  border:1px solid var(--stroke);
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:150px;
}

.card__header{
  padding:12px 14px;
  border-bottom:1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.card__title{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* body stays blank unless filled */
.card__body{
  flex:1;
  padding:14px;
  background:transparent;
}

/* only filled cards get a color fill */
.card.is-filled .card__body{
  background: var(--swatch);
}

/* description pill: only appears when filled */
.card__desc{
  margin:0;
  font-size:12px;
  line-height:1.35;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  max-width: 100%;
}

/* if the fill is very dark, improve readability automatically */
.card.is-filled{
  color: var(--text);
}
.card.is-filled .card__desc{
  color: inherit;
}

.empty{
  grid-column: 1 / -1;
  border:1px dashed var(--stroke);
  background:#fff;
  color:var(--muted);
  padding:18px;
  border-radius:12px;
}

.error{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#7f1d1d;
  padding:14px;
  border-radius:12px;
}
/* ---- animations ---- */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0); }
}

@keyframes cardOut {
  from { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0); }
  to   { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(6px); }
}

.card{
  will-change: transform, opacity, filter;
}

/* when entering */
.card.is-entering{
  animation: cardIn 260ms ease-out both;
}

/* when leaving */
.card.is-leaving{
  animation: cardOut 220ms ease-in both;
}

/* nicer stagger when many cards appear */
.card{
  animation-delay: var(--delay, 0ms);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card.is-entering, .card.is-leaving{ animation: none !important; }
}
/* ---- importance-driven spans ---- */
/* Enable spanning with auto-placement */
.grid{
  grid-auto-flow: dense;
}

/* base: 1 column */
.card{ grid-column: span 1; }

/* 2 columns */
.card.is-span-2{ grid-column: span 2; }

/* 3 columns (clamped) */
.card.is-span-3{ grid-column: span 3; }

/* Mobile: avoid over-wide cards */
@media (max-width: 520px){
  .card.is-span-2,
  .card.is-span-3{ grid-column: span 1; }
}