/* ============================================================
   SPM Tool — Primitivos visuales
   Clases reutilizables con el prefijo `ds-` (design system).
   Dependen de design-system.css.
   ============================================================ */

/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */
.ds-card {
    background: #fff;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
}

.ds-card--flush { padding: 0; }

.ds-card__header {
    padding: var(--space-6) var(--space-7);
    border-bottom: 1px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.ds-card__title {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-navy-900);
}

.ds-card__subtitle {
    font-size: var(--fs-xs);
    color: var(--color-gray-700);
    margin-top: 2px;
}

/* ------------------------------------------------------------
   KPI Card
   ------------------------------------------------------------ */
.ds-kpi {
    position: relative;
    padding: var(--space-8);
    background: #fff;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.ds-kpi__icon {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: var(--fs-lg);
    background: color-mix(in srgb, var(--ds-kpi-color, var(--color-navy-700)) 8%, white);
    color: var(--ds-kpi-color, var(--color-navy-700));
}

.ds-kpi__label {
    font-size: var(--fs-caps);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-caps);
    font-weight: var(--fw-medium);
}

.ds-kpi__value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--color-navy-900);
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-tight);
    line-height: var(--lh-tight);
}

.ds-kpi__value--md { font-size: var(--fs-2xl); }

.ds-kpi__sub {
    font-size: var(--fs-xs);
    color: var(--color-gray-800);
    margin-top: var(--space-1);
}

.ds-kpi__delta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    margin-top: var(--space-2);
}
.ds-kpi__delta--up   { color: var(--color-success-fg); }
.ds-kpi__delta--down { color: var(--color-danger-fg);  }

/* Variantes de color del icono */
.ds-kpi--primary  { --ds-kpi-color: var(--color-navy-700); }
.ds-kpi--success  { --ds-kpi-color: var(--color-success); }
.ds-kpi--warning  { --ds-kpi-color: var(--color-warning); }
.ds-kpi--danger   { --ds-kpi-color: var(--color-danger); }
.ds-kpi--neutral  { --ds-kpi-color: var(--color-gray-800); }

/* ------------------------------------------------------------
   Badge (pequeno, tipo contador)
   ------------------------------------------------------------ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: var(--fw-medium);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ds-badge--info    { background: var(--color-navy-700); color: #fff; }
.ds-badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.ds-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.ds-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.ds-badge--neutral { background: var(--color-gray-200); color: var(--color-gray-850); }

/* ------------------------------------------------------------
   Status Pill
   ------------------------------------------------------------ */
.ds-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    white-space: nowrap;
}

.ds-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

.ds-status-pill--draft    { background: var(--color-gray-200); color: var(--color-gray-850); }
.ds-status-pill--pending  { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.ds-status-pill--approved { background: var(--color-success-bg); color: var(--color-success-fg); }
.ds-status-pill--changes  { background: #fff1e2; color: #8a4a00; }
.ds-status-pill--rejected { background: var(--color-danger-bg); color: var(--color-danger-fg); }

/* ------------------------------------------------------------
   Team Badge (dot + nombre)
   ------------------------------------------------------------ */
.ds-team-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-navy-900);
    white-space: nowrap;
}

.ds-team-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ds-team-color, var(--color-gray-700));
    flex-shrink: 0;
}

.ds-team-badge[data-team="admin"]        { --ds-team-color: var(--color-team-admin); }
.ds-team-badge[data-team="gender"]       { --ds-team-color: var(--color-team-gender); }
.ds-team-badge[data-team="gob"]          { --ds-team-color: var(--color-team-gob); }
.ds-team-badge[data-team="sdg"]          { --ds-team-color: var(--color-team-sdg); }
.ds-team-badge[data-team="inclu-growth"] { --ds-team-color: var(--color-team-inclu-growth); }
.ds-team-badge[data-team="drr"]          { --ds-team-color: var(--color-team-drr); }
.ds-team-badge[data-team="health"]       { --ds-team-color: var(--color-team-health); }
.ds-team-badge[data-team="hiv"]          { --ds-team-color: var(--color-team-hiv); }
.ds-team-badge[data-team="energy"]       { --ds-team-color: var(--color-team-energy); }
.ds-team-badge[data-team="consolidated"] { --ds-team-color: var(--color-team-consolidated); }

/* ------------------------------------------------------------
   Field (label + control)
   ------------------------------------------------------------ */
.ds-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ds-field__label {
    font-size: var(--fs-caps);
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-caps);
    font-weight: var(--fw-medium);
}

.ds-field__help {
    font-size: var(--fs-xs);
    color: var(--color-gray-800);
}

/* ------------------------------------------------------------
   Inputs / Select / Textarea
   ------------------------------------------------------------ */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--color-gray-350);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-md);
    color: var(--color-navy-900);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover { border-color: var(--color-gray-400); }

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    border-color: var(--color-navy-700);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-navy-700) 15%, transparent);
}

.ds-input--mono { font-family: var(--font-mono); }

.ds-textarea {
    min-height: 86px;
    resize: vertical;
    padding: 10px 12px;
}

.ds-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a90a2' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    padding: 8px 14px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.ds-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ds-btn--primary {
    background: var(--color-navy-700);
    color: #fff;
}
.ds-btn--primary:hover:not(:disabled) { background: var(--color-navy-600); }

.ds-btn--secondary {
    background: #fff;
    color: var(--color-navy-900);
    border-color: var(--color-gray-350);
}
.ds-btn--secondary:hover:not(:disabled) {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.ds-btn--ghost {
    background: transparent;
    color: var(--color-gray-800);
}
.ds-btn--ghost:hover:not(:disabled) {
    background: var(--color-gray-150);
    color: var(--color-navy-900);
}

.ds-btn--danger {
    background: var(--color-danger);
    color: #fff;
}
.ds-btn--danger:hover:not(:disabled) { background: var(--color-danger-fg); }

.ds-btn--sm { padding: 5px 10px; font-size: var(--fs-sm); }
.ds-btn--md { padding: 8px 14px; }
.ds-btn--lg { padding: 10px 18px; font-size: var(--fs-lg); }

/* ------------------------------------------------------------
   Segmented control (tabs de grupo)
   ------------------------------------------------------------ */
.ds-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-350);
    border-radius: var(--radius-md);
    gap: 0;
}

.ds-segmented__item {
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    padding: 4px 12px;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--color-gray-800);
    cursor: pointer;
    font-weight: var(--fw-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ds-segmented__item--active {
    background: #fff;
    color: var(--color-navy-900);
    box-shadow: var(--shadow-subtle);
    font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------
   Alert / Insight card
   ------------------------------------------------------------ */
.ds-alert {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.ds-alert::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background: currentColor;
}

.ds-alert__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

.ds-alert__body {
    font-size: var(--fs-xs);
    color: var(--color-gray-850);
    margin-top: 3px;
    line-height: var(--lh-normal);
}

.ds-alert--info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.ds-alert--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.ds-alert--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.ds-alert--danger  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }

/* ------------------------------------------------------------
   Stack / Grid helpers
   ------------------------------------------------------------ */
.ds-stack       { display: flex; flex-direction: column; gap: var(--space-5); }
.ds-stack--sm   { gap: var(--space-2); }
.ds-stack--lg   { gap: var(--space-7); }

.ds-row         { display: flex; gap: var(--space-5); align-items: center; }
.ds-row--wrap   { flex-wrap: wrap; }
.ds-row--end    { justify-content: flex-end; }

.ds-grid        { display: grid; gap: var(--space-5); }
.ds-grid--2     { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3     { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4     { grid-template-columns: repeat(4, 1fr); }
.ds-grid--6     { grid-template-columns: repeat(6, 1fr); }