/* ── Sistema de diseño Gobierno Central — COMPONENTES ────────────────
   Estilos canónicos de los partials Jinja2 en `app/templates/_components/`.
   Carga DESPUÉS de tokens.css. Las clases usan prefijo `bs-` (Biosamer)
   para no chocar con las utilities de Bootstrap (`btn-primary`,
   `card`, `badge`, etc.) que se siguen pudiendo usar libremente.

   Referencia visual: /inicio (Notion-like). No agregar gradientes,
   no agregar sombras pesadas, no agregar bordes coloreados de marca
   en los lados de las cards.
*/

/* ─────────────────────────── CARD ────────────────────────────── */

.bs-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: var(--color-text);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.bs-card--subtle {
    background: var(--color-bg-subtle);
    border-color: transparent;
    box-shadow: none;
}

.bs-card--soft {
    background: var(--color-bg-soft);
    border-color: transparent;
    box-shadow: none;
}

/* ── Acento lateral por color (información, no decoración) ──────────
   Banda de 3 px en el borde izquierdo. Usar SOLO cuando el color
   comunica algo: estado financiero (caja=success, deuda=danger),
   severidad (alerta=warning), área de la organización (calidad,
   producción, etc.). Si el color no significa nada, no usar.
   El color se controla con la variable --bs-card-accent o con uno
   de los modificadores semánticos / por categoría. */
.bs-card--accent {
    border-left: 3px solid var(--bs-card-accent, var(--color-border-strong));
}

/* Atajos por estado semántico */
.bs-card--accent-primary { border-left: 3px solid var(--color-primary); }
.bs-card--accent-success { border-left: 3px solid var(--color-success); }
.bs-card--accent-warning { border-left: 3px solid var(--color-warning); }
.bs-card--accent-danger  { border-left: 3px solid var(--color-danger); }
.bs-card--accent-info    { border-left: 3px solid var(--color-info); }
.bs-card--accent-neutral { border-left: 3px solid var(--color-border-strong); }

/* Atajos por categoría de actividad (alineados con EQUIPOS) */
.bs-card--accent-produccion    { border-left: 3px solid var(--color-cat-produccion); }
.bs-card--accent-calidad       { border-left: 3px solid var(--color-cat-calidad); }
.bs-card--accent-microbiologia { border-left: 3px solid var(--color-cat-microbiologia); }
.bs-card--accent-logistica     { border-left: 3px solid var(--color-cat-logistica); }
.bs-card--accent-abastecimiento{ border-left: 3px solid var(--color-cat-abastecimiento); }
.bs-card--accent-bioproduccion { border-left: 3px solid var(--color-cat-bioproduccion); }
.bs-card--accent-desarrollo    { border-left: 3px solid var(--color-cat-desarrollo); }
.bs-card--accent-comercial     { border-left: 3px solid var(--color-cat-comercial); }
.bs-card--accent-finanzas      { border-left: 3px solid var(--color-cat-finanzas); }
.bs-card--accent-rrhh          { border-left: 3px solid var(--color-cat-rrhh); }
.bs-card--accent-mantencion    { border-left: 3px solid var(--color-cat-mantencion); }

/* Mismo acento sobre los KPI tiles. */
.bs-kpi.bs-kpi--accent-primary { border-left: 3px solid var(--color-primary); }
.bs-kpi.bs-kpi--accent-success { border-left: 3px solid var(--color-success); }
.bs-kpi.bs-kpi--accent-warning { border-left: 3px solid var(--color-warning); }
.bs-kpi.bs-kpi--accent-danger  { border-left: 3px solid var(--color-danger); }
.bs-kpi.bs-kpi--accent-info    { border-left: 3px solid var(--color-info); }

.bs-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.bs-card--subtle .bs-card__head,
.bs-card--soft .bs-card__head {
    background: transparent;
    border-bottom-color: var(--color-border);
}

.bs-card__head-text {
    min-width: 0;
    flex: 1;
}

.bs-card__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--color-text-strong);
    line-height: 1.3;
}

.bs-card__subtitle {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.bs-card__meta {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bs-card__body {
    padding: var(--space-4) var(--space-5);
}

/* Densidad alternativa para cards con listas internas. */
.bs-card--dense .bs-card__body {
    padding: var(--space-2);
}


/* ─────────────────────────── BADGE ───────────────────────────── */

.bs-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
    white-space: nowrap;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid transparent;
}

.bs-badge--md { font-size: var(--text-sm); padding: 3px 10px; }
.bs-badge--lg { font-size: var(--text-base); padding: 4px 12px; }

.bs-badge i { font-size: 0.9em; line-height: 1; }

.bs-badge--neutral {
    background: var(--color-bg-subtle);
    color: var(--color-text-strong);
    border-color: var(--color-border);
}

.bs-badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-color: transparent;
}

.bs-badge--success {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border-color: transparent;
}

.bs-badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    border-color: transparent;
}

.bs-badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: transparent;
}

.bs-badge--info {
    background: var(--color-info-soft);
    color: var(--color-info-text);
    border-color: transparent;
}

/* Badge tipo dot — solo el círculo coloreado + texto neutral. */
.bs-badge--dot {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding-left: 6px;
}

.bs-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-text-faint);
    flex-shrink: 0;
}

.bs-badge__dot--primary    { background: var(--color-primary); }
.bs-badge__dot--success    { background: var(--color-success); }
.bs-badge__dot--warning    { background: var(--color-warning); }
.bs-badge__dot--danger     { background: var(--color-danger); }
.bs-badge__dot--info       { background: var(--color-info); }

.bs-badge__dot--produccion    { background: var(--color-cat-produccion); }
.bs-badge__dot--calidad       { background: var(--color-cat-calidad); }
.bs-badge__dot--microbiologia { background: var(--color-cat-microbiologia); }
.bs-badge__dot--logistica     { background: var(--color-cat-logistica); }
.bs-badge__dot--abastecimiento{ background: var(--color-cat-abastecimiento); }
.bs-badge__dot--bioproduccion { background: var(--color-cat-bioproduccion); }
.bs-badge__dot--desarrollo    { background: var(--color-cat-desarrollo); }
.bs-badge__dot--comercial     { background: var(--color-cat-comercial); }
.bs-badge__dot--finanzas      { background: var(--color-cat-finanzas); }
.bs-badge__dot--rrhh          { background: var(--color-cat-rrhh); }
.bs-badge__dot--mantencion    { background: var(--color-cat-mantencion); }


/* ─────────────────────────── KPI ─────────────────────────────── */

.bs-kpi {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition), border-color var(--transition);
    min-width: 0;
}

a.bs-kpi:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
}

.bs-kpi__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-2);
    text-transform: none;
    letter-spacing: 0;
}

.bs-kpi__label i {
    color: var(--color-text-faint);
    font-size: 0.95em;
}

.bs-kpi__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-strong);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.bs-kpi--success .bs-kpi__value { color: var(--color-success-text); }
.bs-kpi--danger  .bs-kpi__value { color: var(--color-danger-text); }
.bs-kpi--warning .bs-kpi__value { color: var(--color-warning-text); }

.bs-kpi__detail {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.bs-kpi__trend {
    font-size: 1.1em;
    line-height: 1;
}
.bs-kpi__trend--up   { color: var(--color-success); }
.bs-kpi__trend--down { color: var(--color-danger); }
.bs-kpi__trend--flat { color: var(--color-text-faint); }


/* ─────────────────────────── BOTÓN ───────────────────────────── */

.bs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.bs-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bs-btn:disabled,
.bs-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bs-btn i { font-size: 1em; line-height: 1; }

.bs-btn--sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--radius); }
.bs-btn--md { padding: 8px 14px; font-size: var(--text-sm); }
.bs-btn--lg { padding: 11px 20px; font-size: var(--text-base); border-radius: var(--radius-md); }

/* ── primary ── azul Notion lleno (uno por sección lógica) */
.bs-btn--primary {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}
.bs-btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #ffffff;
}

/* ── secondary ── borde gris, texto oscuro */
.bs-btn--secondary {
    background: var(--color-bg);
    color: var(--color-text-strong);
    border-color: var(--color-border-strong);
}
.bs-btn--secondary:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
}

/* ── ghost ── sin borde, hover suave (acción terciaria habitual) */
.bs-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
}
.bs-btn--ghost:hover {
    background: var(--color-bg-soft);
    color: var(--color-text-strong);
}

/* ── danger ── texto rojo, hover fondo rojo suave */
.bs-btn--danger {
    background: transparent;
    color: var(--color-danger-text);
    border-color: transparent;
}
.bs-btn--danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}

/* ── link ── botón con apariencia de link inline */
.bs-btn--link {
    background: transparent;
    color: var(--color-primary);
    border-color: transparent;
    padding-left: 4px;
    padding-right: 4px;
}
.bs-btn--link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ── danger-strong ── acción destructiva primaria (descartar, eliminar
   con confirmación). Más visible que `--danger` pero coherente con el
   tono Notion: borde rojo grueso, texto rojo en negrita, fondo blanco.
   Hover invierte (fondo rojo, texto blanco). Usar en una sección lógica
   donde "descartar" es la única acción destructiva visible. */
.bs-btn--danger-strong {
    background: var(--color-bg);
    color: var(--color-danger-text);
    border: 1.5px solid var(--color-danger-text);
    font-weight: var(--font-semibold);
}
.bs-btn--danger-strong:hover,
.bs-btn--danger-strong:focus {
    background: var(--color-danger-text);
    color: #ffffff;
    border-color: var(--color-danger-text);
}

/* ── bold ── modifier ortogonal: aumenta peso y borde para que el botón
   "se note más" sin perder su variante semántica. Combinable con cualquier
   variante (`bs-btn--secondary bs-btn--bold`, etc.). */
.bs-btn--bold {
    font-weight: var(--font-semibold);
    border-width: 1.5px;
    padding-top: calc(8px - 0.5px);
    padding-bottom: calc(8px - 0.5px);
}
.bs-btn--bold.bs-btn--sm {
    padding-top: calc(5px - 0.5px);
    padding-bottom: calc(5px - 0.5px);
}


/* ─────────────────────────── LIST ITEM ───────────────────────── */

.bs-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.bs-list-item + .bs-list-item {
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}

a.bs-list-item:hover {
    background: var(--color-bg-soft);
}

.bs-list-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.bs-list-item__icon i { font-size: 1rem; line-height: 1; }

.bs-list-item__body {
    flex: 1;
    min-width: 0;
}

.bs-list-item__title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text-strong);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-list-item__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-list-item__meta {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: var(--font-medium);
    font-variant-numeric: tabular-nums;
}

.bs-list-item__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.bs-list-item:hover .bs-list-item__actions {
    opacity: 1;
}


/* ─────────────────────────── ACTION BTN (28x28) ──────────────── */

.bs-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

.bs-action-btn i { font-size: 0.95rem; line-height: 1; }

.bs-action-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.bs-action-btn:disabled,
.bs-action-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* hover por variante: el color sólo emerge al pasar el mouse */
.bs-action-btn--neutral:hover {
    background: var(--color-bg-soft);
    color: var(--color-text-strong);
}
.bs-action-btn--primary:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}
.bs-action-btn--success:hover {
    background: var(--color-success-soft);
    color: var(--color-success-text);
}
.bs-action-btn--warning:hover {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
}
.bs-action-btn--danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
}
.bs-action-btn--info:hover {
    background: var(--color-info-soft);
    color: var(--color-info-text);
}


/* ─────────────────────────── UTILIDADES DEL DS ───────────────── */

/* Stack vertical canónico — reemplaza patrones de `mb-3` repetidos. */
.bs-stack       { display: flex; flex-direction: column; gap: var(--space-3); }
.bs-stack--sm   { gap: var(--space-2); }
.bs-stack--lg   { gap: var(--space-5); }

/* Cluster horizontal con wrap — agrupa botones/badges con gap consistente. */
.bs-cluster     { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Toolbar — head de sección con título a la izq y acciones a la der. */
.bs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bs-toolbar__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-strong);
}


/* ── Defensa contra workarea-light.css ────────────────────────────
   El tema activo es claro Notion-like (workarea-light.css). Aplica
   `color: var(--wa-text)` (oscuro) a TODO `<span>` / `<div>` / `<p>` /
   `<li>` / `<td>` / `<th>` / `<label>` dentro de `.content-area`
   (especificidad 0,2,0). Eso pisa los blancos que el DS pone en los
   hijos de wrappers con fondo coloreado (botones primary, avatares
   circulares) y altera la jerarquía tipográfica de cards/KPIs.

   El selector de links del tema (`.content-area a:not(.btn):...`)
   ya excluye `.bs-btn` y `.bs-action-btn`, así que los botones del
   DS quedan fuera de su alcance. Estas reglas restablecen los
   colores del DS con la misma especificidad (0,2,0) y, como
   components.css carga DESPUÉS de workarea-light.css, ganan por
   orden de cascada — sin !important. */

/* Botones del DS: los hijos heredan el color del wrapper. */
.content-area .bs-btn,
.content-area .bs-btn > *,
.content-area .bs-action-btn,
.content-area .bs-action-btn > * {
    color: inherit;
}

/* Variantes con fondo coloreado: blanco fijo (incluyendo hover). */
.content-area .bs-btn--primary,
.content-area .bs-btn--primary > *,
.content-area .bs-btn--primary:hover,
.content-area .bs-btn--primary:hover > * {
    color: #ffffff;
}

/* Variantes ghost / link: respetan el color de marca. */
.content-area .bs-btn--link,
.content-area .bs-btn--link > * {
    color: var(--color-primary);
}
.content-area .bs-btn--link:hover,
.content-area .bs-btn--link:hover > * {
    color: var(--color-primary-hover);
}
.content-area .bs-btn--danger,
.content-area .bs-btn--danger > * {
    color: var(--color-danger-text);
}

/* Card / KPI / List item: restablecer la jerarquía tipográfica. */
.content-area .bs-card__title,
.content-area .bs-kpi__value,
.content-area .bs-list-item__title {
    color: var(--color-text-strong);
}
.content-area .bs-card__subtitle,
.content-area .bs-card__meta,
.content-area .bs-kpi__label,
.content-area .bs-kpi__detail,
.content-area .bs-list-item__subtitle {
    color: var(--color-text-muted);
}
.content-area .bs-list-item__meta {
    color: var(--color-text);
}

/* Tone fuerte de KPI value (cuando el número POR SÍ es un estado). */
.content-area .bs-kpi--success .bs-kpi__value { color: var(--color-success-text); }
.content-area .bs-kpi--danger  .bs-kpi__value { color: var(--color-danger-text); }
.content-area .bs-kpi--warning .bs-kpi__value { color: var(--color-warning-text); }

/* Badges: cada variante mantiene su color de texto. */
.content-area .bs-badge,
.content-area .bs-badge > * {
    color: inherit;
}
.content-area .bs-badge--neutral { color: var(--color-text-strong); }
.content-area .bs-badge--primary { color: var(--color-primary-text); }
.content-area .bs-badge--success { color: var(--color-success-text); }
.content-area .bs-badge--warning { color: var(--color-warning-text); }
.content-area .bs-badge--danger  { color: var(--color-danger-text); }
.content-area .bs-badge--info    { color: var(--color-info-text); }
.content-area .bs-badge--dot     { color: var(--color-text); }

/* Avatares circulares con fondo coloreado: la inicial dentro del span
   se ve OSCURA contra el fondo azul porque `.content-area span` la
   pisa. Forzamos blanco con !important porque el card-body del
   workarea-light.css también usa !important.
   Cubre `.miembro-avatar`, `.miembro-avatar-sm` y `.avatar-mini`
   (avatares apilados en tareas de proyectos). */
.content-area .miembro-avatar,
.content-area .miembro-avatar > *,
.content-area .miembro-avatar-sm,
.content-area .miembro-avatar-sm > *,
.content-area .avatar-mini,
.content-area .avatar-mini > * {
    color: #ffffff !important;
}

/* Tooltips de Bootstrap: el `.tooltip-inner` se monta en <body>,
   pero algunos selectores genéricos pueden teñirlo. Forzamos
   blanco sobre fondo oscuro para garantizar legibilidad. */
.tooltip .tooltip-inner,
body .tooltip .tooltip-inner {
    color: #ffffff !important;
    background-color: #1f2937 !important;
}
.tooltip .tooltip-arrow::before,
body .tooltip .tooltip-arrow::before {
    border-color: #1f2937 !important;
}