/* Aleph — piezas de proyectos, equipo, ajustes, acerca de y pantallas públicas */

/* Proyectos */
.roles-box { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); padding: 12px 16px; }
.roles-box summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.roles-box summary svg { width: 18px; height: 18px; color: var(--cyan); }
.roles-body { padding-top: 10px; }
.roles-domain { font-size: var(--fs-13); color: var(--ink-3); margin: 14px 0 6px; font-family: var(--font-ui); }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.role-card { border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; background: var(--bg); }
.role-card strong { color: var(--gold); font-family: var(--font-display); font-weight: 600; }
.tag-owner { color: var(--violet); border-color: rgba(162, 139, 250, .35); }
.real-badge { margin-top: 8px; padding: 8px 12px; font-size: var(--fs-13); }
.memory-list { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.memory-item { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); }
.memory-item p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tag.src-reviewer { color: var(--violet); }
.tag.src-agent { color: var(--cyan); }
.tag.src-human { color: var(--gold); }

/* Equipo */
.member-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.member-row h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-meta a { display: inline-flex; align-items: center; gap: 4px; }
.req-meta svg, .li-meta svg { width: 13px; height: 13px; }
.copy-row .input { flex: 1; }

/* Ajustes: seguridad */
.totp-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap-5); align-items: start; }
.qr { width: 220px; height: 220px; border-radius: var(--r-2); background: #fff; }
.recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.recovery code { padding: 6px 10px; border-radius: var(--r-1); background: var(--bg); border: 1px solid var(--line-2); text-align: center; color: var(--gold); }
.sessions .list-item { padding: 10px 14px; }

/* Acerca de */
.about-hero { display: flex; gap: var(--gap-5); align-items: center; margin-bottom: var(--gap-5); }
.about-mark { width: 84px; height: 84px; color: var(--cyan); flex: none; }
.about-mark svg { width: 84px; height: 84px; }
.about-hero h1 { font-size: var(--fs-36); letter-spacing: .04em; }
.about-diag { margin-top: var(--gap-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; }
.about-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }

/* Pantallas públicas */
.public-tag { font-family: var(--font-ui); font-size: 12px; letter-spacing: .01em; color: var(--ink-3); font-weight: 400; }
.public-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--gap-3); }
.status-hero { display: flex; align-items: center; gap: 10px; font-size: var(--fs-18); font-family: var(--font-display); }

@media (max-width: 720px) {
  .totp-grid { grid-template-columns: 1fr; justify-items: center; }
  .about-hero { flex-direction: column; align-items: flex-start; }
}

/* Créditos en pantallas públicas */
.public-credits { display: grid; gap: 2px; }
.public-credits p { margin: 0; }
.choice.is-disabled { opacity: .6; cursor: not-allowed; }
.choice.is-disabled:hover { border-color: var(--line-2); }

/* Habilidades */
.skills-bar { display: flex; align-items: center; gap: var(--gap-3); margin-bottom: var(--gap-4); }
.skills-bar .input { max-width: 420px; }
.skills { display: grid; gap: var(--gap-5); }
.skills-domain { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-16); margin-bottom: var(--gap-2); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.skill-card { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.skill-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.skill-head svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.skill-head h3 { font-size: var(--fs-14); font-family: var(--font-display); font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.skill-card p { margin: 0; }
.skill-card code { color: var(--ink-3); overflow-wrap: anywhere; }
.tag.src-aleph { color: var(--cyan); }
.tag.src-project { color: var(--gold); }
.skills-link { justify-self: start; }
@media (max-width: 720px) { .skills-bar { flex-wrap: wrap; } .skills-bar .input { max-width: none; } }
.skills-proj { max-width: 260px; }
.skill-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.skill-meta code { color: var(--ink-3); overflow-wrap: anywhere; }