/* Portal del cliente → Proyectos (PM-F4-01): lista, proyecto y entregable. Solo tokens del tema (claro y oscuro los redefine
   design-system.css); nada de colores sueltos. */
.prj-portal { display: flex; flex-direction: column; gap: 14px; }
.prj-portal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prj-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-500); text-decoration: none; }
.prj-back:hover { color: var(--gold-700); }

.prj-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--gray-800); border: 1px solid var(--gray-200); }
.prj-card:hover, .prj-card:focus-visible { border-color: var(--gold-300); }
.prj-card:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.prj-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.prj-card__name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.prj-card__meta { font-size: 13px; color: var(--gray-500); }
.prj-card__pending { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold-700); }

.prj-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--gray-100); color: var(--gray-700);
    border: 1px solid var(--gray-200); }
.prj-progress { display: block; height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; border: 1px solid var(--gray-200); }
.prj-progress__bar { display: block; height: 100%; background: var(--gold-500); border-radius: 999px; transition: width .2s; }

.prj-section { display: flex; flex-direction: column; gap: 10px; }
.prj-section__title { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; color: var(--gray-800); }
.prj-section--pending { border: 1px solid var(--gold-300); background: var(--gold-100); }
.prj-section--pending .prj-section__title { color: var(--gold-700); }

.prj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800); text-decoration: none; }
a.prj-row:hover { background: var(--blue-50); }
.prj-row--pending { font-weight: 600; }
.prj-row__title { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.prj-row__meta, .prj-row__date { font-size: 12px; color: var(--gray-500); }
.prj-row__action { font-size: 13px; color: var(--gold-700); display: inline-flex; align-items: center; gap: 4px; }
.prj-key { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gray-500); }

.prj-state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--gray-100); color: var(--gray-700); }
.prj-state--doing { background: var(--gold-100); color: var(--gold-700); }
.prj-state--done { background: var(--green-100); color: var(--green-600); }

.prj-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.prj-confirm { display: flex; flex-direction: column; gap: 10px; }
.prj-confirm__question { margin: 0; font-weight: 600; color: var(--gray-800); }

.prj-comment { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 10px;
    color: var(--gray-800); overflow-wrap: anywhere; }
.prj-comment--mine { border-color: var(--gold-300); background: var(--gold-100); }
.prj-comment__head { font-size: 12px; color: var(--gray-500); }

@media (max-width: 600px) {
    .prj-actions { justify-content: stretch; }
    .prj-actions > * { flex: 1 1 auto; }
}