/* Public index — sidebar + searchable card grid with live previews. */

:root {
  --ix-bg:       #f6f7f9;
  --ix-card:     #ffffff;
  --ix-ink:      #1c2024;
  --ix-muted:    #6b7280;
  --ix-line:     #e6e8ec;
  --ix-line-2:   #d6dae0;
  --ix-accent:   #ff8400;
  --ix-accent-d: #e57600;
  --ix-accent-sf:#fff3e6;
  --ix-shadow:   0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
  --ix-sidebar:  264px;
}

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

body {
  background: var(--ix-bg); color: var(--ix-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}

.ix-app { display: flex; min-height: 100vh; align-items: flex-start; }

/* ---- Sidebar ---- */
.ix-sidebar {
  width: var(--ix-sidebar); flex: none; position: sticky; top: 0; height: 100vh;
  background: var(--ix-card); border-right: 1px solid var(--ix-line);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.ix-brand { display: flex; align-items: center; gap: 10px; }
.ix-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ix-accent-d);
  background: var(--ix-accent-sf); padding: 4px 9px; border-radius: 7px;
}
.ix-brand strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }

.ix-search {
  width: 100%; padding: 10px 12px; font-size: 14px; color: var(--ix-ink);
  background: #fff; border: 1px solid var(--ix-line-2); border-radius: 9px;
}
.ix-search:focus { outline: none; border-color: var(--ix-accent); box-shadow: 0 0 0 3px rgba(255,132,0,.16); }

.ix-nav { display: flex; flex-direction: column; gap: 2px; }
.ix-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 9px 11px; border: none; background: transparent;
  border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--ix-ink);
}
.ix-nav-item:hover { background: #f2f4f7; }
.ix-nav-item.active { background: var(--ix-accent-sf); color: var(--ix-accent-d); font-weight: 700; }
.ix-nav-item.lvl1 { padding-left: 24px; font-size: 13px; color: var(--ix-muted); }
.ix-nav-item.lvl1.active { color: var(--ix-accent-d); }
.ix-nav-c { font-size: 11px; font-weight: 700; color: var(--ix-muted); background: #eef0f3; border-radius: 999px; padding: 1px 8px; }
.ix-nav-item.active .ix-nav-c { background: #fff; color: var(--ix-accent-d); }

/* ---- Main ---- */
.ix-main { flex: 1 1 auto; min-width: 0; padding: 32px 28px 64px; }
.ix-main-head { margin-bottom: 22px; }
.ix-main-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ix-main-head p { color: var(--ix-muted); margin-top: 4px; }

.ix-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px)  { .ix-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ix-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Card with preview ---- */
.ix-card {
  display: flex; flex-direction: column; background: var(--ix-card);
  border: 1px solid var(--ix-line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--ix-shadow); text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.ix-card:hover { transform: translateY(-2px); border-color: var(--ix-line-2); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px rgba(16,24,40,.12); }

.ix-prev {
  position: relative; height: 180px; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--ix-line);
}
.ix-prev iframe {
  position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0;
  transform: scale(.25); transform-origin: top left; pointer-events: none; background: #fff;
}
.ix-prev::after { content: ""; position: absolute; inset: 0; } /* swallow iframe hover */

.ix-card-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ix-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ix-card-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ix-muted); }
.ix-new { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--ix-accent); border-radius: 5px; padding: 2px 7px; }
/* Revisión del wireframe (v2, v3…). Neutra: informa, no compite con "nuevo". */
.ix-ver { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ix-muted); background: transparent; border: 1px solid var(--ix-line); border-radius: 5px; padding: 2px 7px; }

.ix-empty { color: var(--ix-muted); padding: 48px 4px; }

@media (max-width: 640px) {
  .ix-app { flex-direction: column; }
  .ix-sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--ix-line); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }