/* Hoja de estilos propia del portal de cliente (sin Vite/npm). Prefijo kp-.
   Los colores usan las variables de Filament, que valen un color completo (oklch):
   var(--primary-600), var(--gray-200)... Las de "warning" solo existen si Filament las emite, de ahí el respaldo. */

.kp-stack { display: flex; flex-direction: column; gap: 1.5rem; }

.kp-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.kp-grid--3 { gap: 1rem; }
@media (min-width: 1024px) { .kp-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .kp-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.kp-muted { color: var(--gray-500); font-size: 0.875rem; }
.kp-small { font-size: 0.75rem; }
.kp-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; }
.kp-strong { font-weight: 600; margin: 0; }
.kp-text { white-space: pre-line; margin: 0; font-size: 0.875rem; }

/* Barra de fases */
.kp-phasebar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.kp-phasebar__pct { font-weight: 600; }
.kp-phasebar__segs { display: flex; flex-direction: row; gap: 0.5rem; }
.kp-phasebar__seg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.kp-phasebar__bar { height: 0.5rem; border-radius: 9999px; background: var(--gray-200); }
.kp-phasebar__seg--done .kp-phasebar__bar { background: var(--primary-600); }
.kp-phasebar__seg--in_progress .kp-phasebar__bar { background: var(--warning-400, #fbbf24); }
.kp-phasebar__seg--pending .kp-phasebar__bar { background: var(--gray-200); }
.kp-phasebar__name { font-size: 0.75rem; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-phasebar__status { font-size: 0.75rem; color: var(--gray-500); margin: 0; }
@media (max-width: 640px) {
    .kp-phasebar__segs { flex-direction: column; gap: 0.75rem; }
    .kp-phasebar__seg { flex-direction: row; align-items: center; gap: 0.75rem; }
    .kp-phasebar__bar { width: 2.5rem; flex-shrink: 0; }
}

/* Te toca a ti */
.kp-item { padding: 0.5rem 0; border-bottom: 1px solid var(--gray-200); }
.kp-item:last-child { border-bottom: 0; }
.kp-amber { color: var(--warning-600, #d97706); font-weight: 600; }

/* Cifras */
.kp-figure { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0.25rem 0; }
.kp-figure__unit { font-size: 1rem; font-weight: 400; color: var(--gray-500); }
.kp-trend { font-size: 1rem; margin-left: 0.25rem; }
.kp-trend--up { color: var(--success-600, #16a34a); }
.kp-trend--down { color: var(--danger-600, #dc2626); }
.kp-trend--flat { color: var(--gray-500); }

/* Fases (acordeón) */
.kp-acc__head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.75rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.kp-acc__meta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.kp-acc__chevron { display: inline-flex; transition: transform 0.15s; }
.kp-acc__icon { width: 1.25rem; height: 1.25rem; }
.kp-acc__chevron--open { transform: rotate(180deg); }
.kp-acc__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.kp-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.kp-grid--tight { gap: 1rem; margin-top: 0.5rem; }
.kp-evidence__img { max-width: 100%; border-radius: 0.5rem; border: 1px solid var(--gray-200); }
[x-cloak] { display: none !important; }

/* Resultados */
.kp-result { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.kp-result__comment { margin: 0; }

/* Consultas */
.kp-threadlink { display: block; text-decoration: none; color: inherit; }
.kp-chat { display: flex; flex-direction: column; gap: 1rem; }
.kp-msg { display: flex; align-items: flex-end; gap: 0.5rem; }
.kp-msg--client { justify-content: flex-end; }
.kp-msg--staff { justify-content: flex-start; }
.kp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9999px; background: var(--primary-600); color: #fff; font-size: 0.75rem; font-weight: 600; }
.kp-bubble { max-width: min(36rem, 85%); padding: 0.625rem 0.875rem; border-radius: 1rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-wrap: anywhere; }
.kp-bubble--client { background: var(--primary-600); color: #fff; border-bottom-right-radius: 0.25rem; }
.kp-bubble--client a, .kp-bubble--client a span { color: inherit; text-decoration: underline; }
.kp-bubble--staff { background: var(--gray-100); color: var(--gray-900); border-bottom-left-radius: 0.25rem; }
.kp-bubble__time { margin: 0; font-size: 0.6875rem; opacity: 0.7; text-align: right; }
.dark .kp-bubble--staff { background: var(--gray-800); color: var(--gray-100); }

/* Mejoras */
.kp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.kp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; height: 100%; }
.kp-price { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--primary-600); }
.dark .kp-price { color: var(--primary-400); }

/* Selector de proyecto y pie */
.kp-switcher { max-width: 20rem; margin-bottom: 1rem; }
.kp-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 1.5rem 1rem; color: var(--gray-500); font-size: 0.75rem; }
.kp-footer a { color: inherit; text-decoration: underline; }