/* ── Primitivas reutilizables (mismo enfoque por capas que el CRM) ───────── */

.btn-primary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--color-primary); color: var(--color-on-primary);
    border: none; border-radius: 8px; padding: 0.55rem 1rem;
    font-size: 0.9rem; cursor: pointer; transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; color: var(--color-on-primary); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--color-surface); color: var(--color-primary);
    border: 1px solid var(--color-border); border-radius: 8px; padding: 0.55rem 1rem;
    font-size: 0.9rem; cursor: pointer;
}
.btn-secondary:hover { background: var(--color-bg-hover); }

/* Desactivado y «trabajando». Sin esto un botón pulsado no cambiaba nada a la vista
   y parecía que no se estaba enviando (v0.63.0). */
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--color-primary); }
.btn-secondary:disabled:hover { background: var(--color-surface); }
.btn-primary[aria-busy="true"], .btn-secondary[aria-busy="true"],
.btn-primary:has(.spinner-border), .btn-secondary:has(.spinner-border) { opacity: 0.85; cursor: progress; }

/* Spinner dentro de un botón: hereda el color del texto (blanco en el primario,
   azul en el secundario). No usamos el CSS de Bootstrap, solo sus iconos. */
.spinner-border {
    display: inline-block; flex-shrink: 0;
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: sv-spin 0.75s linear infinite;
}
.spinner-border-sm { width: 0.85rem; height: 0.85rem; border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .spinner-border { animation-duration: 1.6s; } }

.btn-danger {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--color-danger); color: #fff;
    border: none; border-radius: 8px; padding: 0.55rem 1rem;
    font-size: 0.9rem; cursor: pointer;
}
.btn-danger:hover { filter: brightness(0.92); }
.btn-danger:disabled { opacity: 0.6; cursor: default; }

/* Selección múltiple en listados */
.selection-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.85rem; margin-bottom: 0.75rem; border-radius: 8px;
    background: var(--color-primary-light); color: var(--color-primary); font-weight: 600;
}
.selection-bar span { margin-right: auto; }
.col-check { width: 2.2rem; text-align: center; }
.col-check input { width: 1rem; height: 1rem; cursor: pointer; }
.row-selected td { background: var(--color-primary-light); }
.delete-list { max-height: 40vh; overflow-y: auto; margin: 0.5rem 0 0.75rem; padding-left: 1.1rem; font-size: 0.88rem; }

.field {
    border: 1px solid var(--color-border); border-radius: 6px;
    padding: 0.5rem 0.7rem; font-size: 0.9rem; width: 100%;
    background: var(--color-surface); color: var(--color-text);
}
.field:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); }
/* Campo de otro rol: se ve, no se toca. Fondo apagado y texto legible (el gris
   por defecto del navegador lo hacía ilegible). */
.field:disabled { background: var(--color-bg); color: var(--color-text); border-style: dashed; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--color-text); }

.form-alert { padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.88rem; margin-bottom: 0.75rem; }
.form-alert--info { background: var(--color-primary-light); color: var(--color-primary); }
.form-alert--success { background: #E7F6ED; color: var(--color-success); }
.form-alert--danger { background: #FBEAEA; color: var(--color-danger); }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.data-table thead th { background: var(--color-bg); text-align: left; padding: 0.7rem 0.9rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.data-table tbody td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.data-table tbody tr:hover { background: var(--color-bg-hover); }
.data-table tbody tr.row-link { cursor: pointer; }
/* Códigos que no se pueden confundir (M99340, R03, EAN, hashes). Plex Mono es de
   la misma familia que el texto, así que un código dentro de una frase ya no
   parece pegado de otra fuente. 0.88rem porque Plex Mono tiene la caja algo más
   pequeña que las monoespaciadas del sistema y a 0.85 se quedaba corto. */
.mono { font-family: var(--font-mono); font-size: 0.88rem; letter-spacing: -0.01em; }

/* ── Botones de icono (acciones en tablas) ──────────────────────────────── */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: transparent; border: 1px solid var(--color-border);
    color: var(--color-text-secondary); cursor: pointer; font-size: 1rem;
    transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: var(--color-bg-hover); color: var(--color-primary); }
.btn-icon--danger:hover { color: var(--color-danger); }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Celda de usuario + chips de acceso ─────────────────────────────────── */
.user-cell__name { font-weight: 600; }
.user-cell__email { color: var(--color-text-secondary); font-size: 0.82rem; }
.user-cell__actions { display: flex; gap: 0.35rem; }
.access-chip {
    display: inline-block; margin: 0.1rem 0.25rem 0.1rem 0;
    padding: 0.12rem 0.6rem; border-radius: 20px; font-size: 0.78rem;
    background: var(--color-primary-light); color: var(--color-primary);
}

/* ── Modal genérico ─────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(26, 29, 43, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
    background: var(--color-surface); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    width: 95vw; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column;
}
.modal__header, .modal__footer { display: flex; align-items: center; padding: 1rem 1.25rem; }
.modal__header { justify-content: space-between; border-bottom: 1px solid var(--color-border); }
.modal__footer { justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--color-border); }
.modal__title { font-size: 1.1rem; margin: 0; }
.modal__subtitle { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); margin: 1rem 0 0.5rem; }
.modal__body { padding: 1.25rem; overflow-y: auto; }

.access-list { list-style: none; margin: 0; padding: 0; }
.access-list li { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); }
.access-form { display: flex; flex-direction: column; gap: 0.75rem; }
.field-label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--color-text-secondary); }
.field-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text); cursor: pointer; }
.field-check input { width: auto; margin: 0; }

/* ── Banner de impersonación ────────────────────────────────────────────── */
.impersonation-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 1rem; background: var(--color-warning); color: #fff; font-size: 0.88rem; font-weight: 600;
}
.impersonation-bar__exit {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.5);
    border-radius: 8px; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.impersonation-bar__exit:hover { background: rgba(255,255,255,0.35); }

/* ── Badges de estado ───────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge--draft { background: #ECEEF4; color: var(--color-text-secondary); }
.badge--inprogress { background: var(--color-primary-light); color: var(--color-primary); }
.badge--inapproval { background: #FCF1DC; color: var(--color-warning); }
.badge--warning { background: #FCF1DC; color: var(--color-warning); }
.badge--approved { background: #E7F6ED; color: var(--color-success); }
.badge--archived { background: #ECEEF4; color: var(--color-text-secondary); }
.badge--draftapproved { background: var(--color-primary-light); color: var(--color-primary); }
.badge--withsupplier { background: #F3E9DC; color: var(--color-accent); }
.badge--finalreview { background: #FCF1DC; color: var(--color-warning); }
.badge--qualityreview { background: #FCF1DC; color: var(--color-warning); }

/* Encargo a un proveedor (SupplierAssignmentStatus) */
.badge--assign-withsupplier { background: #F3E9DC; color: var(--color-accent); }
.badge--assign-returned { background: #FBE6E6; color: var(--color-danger); }
.badge--assign-finalreview,
.badge--assign-qualityreview { background: #FCF1DC; color: var(--color-warning); }
.badge--assign-approved { background: #E7F6ED; color: var(--color-success); }
.badge--assign-cancelled { background: #ECEEF4; color: var(--color-text-secondary); }

/* Ciclo en curso (alta / cambio Regulatory / restyling) */
.badge--cycle-new { background: #ECEEF4; color: var(--color-text-secondary); }
.badge--cycle-regulatorychange { background: #FCF1DC; color: var(--color-warning); }
.badge--cycle-restyling { background: #F3E9DC; color: var(--color-accent); }

/* Recogida de información: un bloque por departamento */
.info-blocks { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .info-blocks { grid-template-columns: 1fr 1fr; } }
.info-block { border: 1px solid var(--color-border); border-radius: 12px; padding: 0.85rem 1rem; background: var(--color-surface); }
.info-block--done { border-color: var(--color-success); }
.info-block__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.badge--success { background: #E7F6ED; color: var(--color-success); }
.badge--danger { background: #FBE6E6; color: var(--color-danger); }
.badge--muted { background: #ECEEF4; color: var(--color-text-secondary); }

/* Estado de una versión de arte (ArtworkStatus) */
.badge--inreview { background: #FCF1DC; color: var(--color-warning); }
.badge--rejected { background: #FBE6E6; color: var(--color-danger); }
.badge--obsolete { background: #ECEEF4; color: var(--color-text-secondary); }

/* Clase de activo (AssetKind) */
.badge--kind-producto { background: var(--color-primary-light); color: var(--color-primary); }
.badge--kind-gama { background: #F3E9DC; color: var(--color-accent); }
.badge--kind-troquel { background: #ECEEF4; color: var(--color-text-secondary); }

/* Pista breve bajo un título de sección */
.detail-hint { color: var(--color-text-secondary); font-size: 0.85rem; margin: 0 0 0.75rem; }

/* Pestañas (modal de añadir usuario) */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1rem; }
.tab {
    background: none; border: none; cursor: pointer;
    padding: 0.55rem 0.9rem; font-size: 0.9rem; color: var(--color-text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--color-primary); }
.tab--active { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-primary); }

/* Fila de búsqueda (input + botón) */
.search-row { display: flex; gap: 0.4rem; }
.search-row .field { flex: 1 1 auto; }

/* Lista de resultados de búsqueda en el tenant */
.tenant-list { list-style: none; margin: 0.75rem 0 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 8px; }
.tenant-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.6rem 0.8rem; cursor: pointer; border-bottom: 1px solid var(--color-border);
}
.tenant-item:last-child { border-bottom: none; }
.tenant-item:hover { background: var(--color-bg-hover); }
.tenant-item--active { background: var(--color-primary-light); }
.tenant-item i { color: var(--color-primary); font-size: 1.1rem; }

/* Panel de ayuda (drawer lateral) */
.help-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.35); }
.help-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
    width: min(420px, 100vw);
    background: var(--color-surface); border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 28px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    animation: help-slide-in 0.18s ease-out;
}
@keyframes help-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .help-drawer { animation: none; } }
.help-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); flex: 0 0 auto;
}
.help-drawer__title { font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.help-drawer__title i { color: var(--color-primary); }
.help-drawer__body { padding: 1.25rem; overflow-y: auto; flex: 1 1 auto; }
.help-drawer__lead { color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.help-section { margin-bottom: 1.25rem; }
.help-section__title { font-size: 0.98rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--color-primary); }
.help-section__body { margin: 0; color: var(--color-text); font-size: 0.92rem; line-height: 1.5; }
.help-drawer__footer { border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 0.5rem; }
.help-drawer__version { color: var(--color-text-secondary); font-size: 0.8rem; margin: 0.75rem 0 0; }

/* Tarjetas de estado del sistema (panel de diagnóstico) */
.status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 0.75rem; }
.status-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border); border-radius: 12px;
    padding: 1.1rem 1.25rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.status-card--ok { border-left-color: var(--color-success); }
.status-card--down { border-left-color: var(--color-danger); }
.status-card--unknown { border-left-color: var(--color-text-secondary); }
.status-card__head { display: flex; align-items: center; gap: 0.6rem; }
.status-card__head i { font-size: 1.3rem; color: var(--color-primary); }
.status-card__title { font-weight: 700; }
.status-card__badge { margin-left: auto; }
.status-card__detail { margin: 0.6rem 0 0; color: var(--color-text); }
.status-card__latency { margin: 0.2rem 0 0; color: var(--color-text-secondary); font-size: 0.82rem; }

/* Enlace en línea dentro de una celda de tabla (no rompe el layout de la fila) */
.row-link-inline { color: var(--color-primary); text-decoration: none; }
.row-link-inline:hover { text-decoration: underline; }

/* ── Tarjeta genérica (paneles de Ajustes, secciones de contenido) ───────── */
.card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 1.25rem 1.4rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.card__title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: var(--color-primary); }
.card__footer { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ── Ajustes (perfil + avatar) ───────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; align-items: start; }
.settings-avatar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.settings-avatar__img {
    flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
    background: var(--color-bg); display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--color-border);
}
.settings-avatar__img img { width: 100%; height: 100%; object-fit: cover; }
.settings-avatar__img i { font-size: 2rem; color: var(--color-text-secondary); }
.settings-avatar__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.settings-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.settings-dl dt { color: var(--color-text-secondary); font-size: 0.85rem; }
.settings-dl dd { margin: 0; color: var(--color-text); font-size: 0.9rem; }

/* Lista de avisos de importación */
.import-warnings { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--color-text); font-size: 0.88rem; }
.import-warnings li { margin-bottom: 0.25rem; }

/* Lista INCI de una fórmula M99: orden de declaración normativo, en dos columnas
   cuando hay sitio. Compartida por el catálogo y el detalle de proyecto. */
.inci-list {
    margin: 0.25rem 0 0.75rem; padding-left: 1.3rem; font-size: 0.88rem;
    columns: 2; column-gap: 2rem;
}
.inci-list li { margin-bottom: 0.15rem; break-inside: avoid; }
@media (max-width: 768px) { .inci-list { columns: 1; } }

/* Texto INCI literal del Excel (la referencia legal, sin normalizar). */
.inci-raw {
    margin: 0.25rem 0 0; padding: 0.6rem 0.75rem;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
    font-size: 0.82rem; color: var(--color-text-secondary); word-break: break-word;
}

/* Aviso ámbar en una tarjeta de estado (p. ej. códigos M99 duplicados). */
.status-card--warn { border-left-color: var(--color-warning); }

/* Fila de listado que abre su ficha al pulsarla. */
/* Aviso de lo que falta para poder enviar a validar. */
.detail-hint--blocker { color: var(--color-warning); font-weight: 600; }

.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--color-bg); }
.pending-inline { margin-left: 0.45rem; }

/* Barra de progreso de la importación por carpeta */
.import-progress {
    height: 8px; border-radius: 4px; background: var(--color-border);
    overflow: hidden; margin: 0.75rem 0 0.35rem;
}
.import-progress__bar {
    height: 100%; background: var(--color-primary);
    transition: width 0.2s ease;
}

/* ── Campana de notificaciones (topbar) ─────────────────────────────────── */
.notif-btn { position: relative; }
.notif-badge {
    position: absolute; top: 1px; right: 1px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--color-danger); color: #fff;
    font-size: 0.64rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.notif-dropdown {
    position: fixed; top: calc(var(--topbar-height) + 6px); right: 1rem; z-index: 201;
    width: min(360px, calc(100vw - 2rem));
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; max-height: 70vh; overflow: hidden;
}
.notif-dropdown__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--color-border); flex: 0 0 auto;
}
.notif-dropdown__title { font-weight: 700; }
.notif-dropdown__markall {
    background: none; border: none; color: var(--color-primary);
    cursor: pointer; font-size: 0.8rem;
}
.notif-dropdown__markall:hover { text-decoration: underline; }
.notif-dropdown__body { overflow-y: auto; flex: 1 1 auto; }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-secondary); margin: 0; font-size: 0.9rem; }
.notif-item {
    display: flex; gap: 0.6rem; width: 100%; text-align: left;
    background: none; border: none; border-bottom: 1px solid var(--color-border);
    padding: 0.7rem 1rem; cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg-hover); }
.notif-item--unread { background: var(--color-primary-light); }
.notif-item__icon { color: var(--color-primary); font-size: 1.05rem; margin-top: 2px; flex: 0 0 auto; }
.notif-item__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-item__title { font-weight: 600; font-size: 0.88rem; color: var(--color-text); }
.notif-item__body { font-size: 0.82rem; color: var(--color-text-secondary); }
.notif-item__time { font-size: 0.74rem; color: var(--color-text-secondary); }

/* Aviso emergente cuando llega una notificación nueva (bajo la campana) */
.notif-toast {
    position: fixed; top: calc(var(--topbar-height) + 6px); right: 1rem; z-index: 202;
    width: min(360px, calc(100vw - 2rem));
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.75rem 0.9rem; text-align: left; cursor: pointer;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    animation: notif-toast-in 0.2s ease-out;
}
.notif-toast__close {
    margin-left: auto; background: none; border: none; padding: 0 0.1rem;
    color: var(--color-text-secondary); cursor: pointer; font-size: 1rem; line-height: 1;
}
.notif-toast__more { font-size: 0.76rem; color: var(--color-primary); font-weight: 600; }
.notif-btn--ring .bi-bell { display: inline-block; animation: notif-ring 0.9s ease-in-out 2; }
@keyframes notif-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes notif-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .notif-toast, .notif-btn--ring .bi-bell { animation: none; }
}

/* ── Fichas y formularios ────────────────────────────────────────────────────
   Primitivas compartidas por el detalle de proyecto y el asistente "Nuevo
   proyecto" (antes vivían scoped en ProjectDetail.razor.css, donde el resto de
   páginas no las veía y los formularios salían descuadrados). */

.back-link {
    display: inline-block; margin-bottom: 0.3rem;
    color: var(--color-text-secondary); font-size: 0.85rem; text-decoration: none;
}
.back-link:hover { color: var(--color-primary); }

.detail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.25rem;
}
.detail-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.detail-card__title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.6rem; }
.detail-readonly {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: var(--color-text-secondary);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 20px; padding: 0.15rem 0.6rem;
}

/* Secciones de un formulario largo (bloques de la ficha de producto) */
.detail-section {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-primary); font-weight: 700;
    margin: 1.3rem 0 0.6rem; padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-border);
}
.detail-section:first-of-type { margin-top: 0.5rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.8rem 1rem;
    /* Los campos se alinean arriba: si un rótulo ocupa dos líneas, el resto de
       la fila no se estira ni baja su input. */
    align-items: start;
}
.form-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    margin-top: 0.8rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.form-field > span {
    font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 600;
}
/* Una pista dentro de un campo no debe añadir hueco (descuadraría la fila). */
.form-field .detail-hint { margin: 0; font-size: 0.78rem; }

.form-actions { margin-top: 1.2rem; display: flex; justify-content: flex-end; }

.row-actions { display: flex; gap: 0.4rem; white-space: nowrap; flex-wrap: wrap; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }


/* ── Análisis automático de etiqueta ────────────────────────────────────────
   El color hace el trabajo: rojo = falta algo de la fórmula (lo grave), ámbar =
   sobra o hay un defecto de texto (lo revisable), verde = limpio. */
.analysis { margin-top: 0.5rem; }
.analysis__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.analysis__title { margin: 0; }
.analysis__summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; margin: 0.6rem 0 0.3rem; }
.analysis__stat { font-size: 0.85rem; color: var(--color-text-secondary); }
.analysis__stat strong { font-size: 1.05rem; color: var(--color-text); }
.analysis__stat--bad strong { color: var(--color-danger); }
.analysis__stat--warn strong { color: var(--color-warning); }
.analysis__meta { margin: 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.analysis__disclaimer {
    margin: 0.5rem 0 0.75rem; padding: 0.5rem 0.7rem; font-size: 0.8rem;
    background: var(--color-bg); border-left: 3px solid var(--color-warning); border-radius: 6px;
    color: var(--color-text-secondary);
}
.analysis__label { margin-top: 0.9rem; padding: 0.75rem 0.9rem; background: var(--color-bg); border-radius: 10px; }
.analysis__label-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.analysis__label-name { font-size: 0.95rem; }
.analysis__group-title { margin: 0.7rem 0 0.2rem; font-size: 0.85rem; font-weight: 700; }
.analysis__group-title--bad { color: var(--color-danger); }
.analysis__group-title--warn { color: var(--color-warning); }
/* Alérgenos declarables según Coptis (en el resultado del análisis). */
.analysis__allergens {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 0.6rem 0.9rem; margin: 0.75rem 0; background: var(--color-surface);
}
.analysis__allergens--bad { border-color: var(--color-danger); background: #FBEAEA; }
.analysis__allergens .analysis__list { list-style: none; padding-left: 0; margin: 0.3rem 0 0; }
.analysis__allergens .analysis__list li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; padding: 0.15rem 0; }
.analysis__allergens .bi-check-circle { color: var(--color-success); }
.analysis__missing { color: var(--color-danger); }
.analysis__missing .bi { color: var(--color-danger); }
.coptis-allergens { margin-top: 0.75rem; }
.analysis__list { margin: 0; padding-left: 1.4rem; font-size: 0.85rem; }
.analysis__list--bad li { color: var(--color-danger); }
.analysis__list--warn li { color: var(--color-text); }
.analysis__pos { margin-left: 0.4rem; color: var(--color-text-secondary); font-size: 0.78rem; }
.analysis__ok { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--color-success); }
.analysis__raw { margin-top: 0.7rem; font-size: 0.85rem; }
.analysis__raw summary { cursor: pointer; color: var(--color-primary); }

/* Pictogramas leídos en la etiqueta. */
.analysis__pictos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.picto {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
}
.picto i { font-size: 0.95rem; }
.picto__value { font-weight: 700; }
.picto--hazard { border-color: var(--color-danger); color: var(--color-danger); }
.picto--cosmetic { border-color: var(--color-primary); color: var(--color-primary); }
.picto--recycling { border-color: var(--color-success); color: var(--color-success); }
.picto--claim { border-color: var(--color-accent); color: var(--color-accent); }
.picto--unknown { border-style: dashed; color: var(--color-text-secondary); }


/* ── Revisión: el arte final y su análisis, lado a lado ─────────────────────
   En escritorio se mira el PDF y la lista de discrepancias a la vez; en móvil
   se apilan (el PDF primero, que es lo que se mira antes de decidir). */
/* Rejilla etiqueta/valor de las fichas (proyecto, revisión). Compartida: si se
   deja en el .razor.css de una página, en las demás la etiqueta y el valor salen
   pegados ("MarcaSaphirView"). */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 0.9rem 1.4rem;
}
.detail-grid > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.detail-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

/* Pasos del circuito de aprobación (ficha del proyecto y ficha de revisión) */
.circuit-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.circuit-step {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 0.6rem 0.8rem;
}
.circuit-step__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.circuit-step__role { font-weight: 600; }
.circuit-step__meta { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.circuit-step__comments { margin: 0.3rem 0 0; font-size: 0.85rem; font-style: italic; }
.circuit-step__decide { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: center; }
.circuit-step__decide .field { flex: 1 1 200px; }
.circuit-step__buttons { display: flex; gap: 0.4rem; }

/* Ficha de revisión: qué se está revisando */
.review-summary__file {
    display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0 1rem;
    padding: 0.7rem 0.85rem; border-radius: 8px; background: var(--color-bg);
    border: 1px solid var(--color-border);
}
.review-summary__file i { font-size: 1.4rem; color: var(--color-danger); flex: none; }
.review-summary__file span { font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.review-summary__head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.review-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin: 0.9rem 0; }
@media (max-width: 992px) { .review-split { grid-template-columns: 1fr; } }

.preview__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.preview__title { margin: 0; }
.preview__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.preview__frame {
    margin-top: 0.5rem; height: 420px; border: 1px solid var(--color-border);
    border-radius: 10px; overflow: hidden; background: var(--color-bg);
}
.preview__frame--tall { height: 80vh; }
.preview__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Fila de subida: selector de fichero / buscador + botón ────────────────── */
/* Vivía en el scoped de ProjectDetail, pero la comparten el volcado del catálogo
   M99, la importación y "Analizar etiqueta": es una primitiva, no de una página. */
.upload-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.upload-row .field { flex: 1 1 200px; }
.upload-row .btn-primary { white-space: nowrap; }

/* ── Recorte de la zona de la etiqueta en el análisis ───────────────────────── */
/* La imagen es ancha y baja (un bloque INCI enderezado): se muestra a ancho
   completo y se amplía al pulsarla, porque la letra ronda los 2 pt. */
.crop { margin: 0.7rem 0 0; }
.crop__img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface); cursor: zoom-in;
}
.crop__caption {
    margin-top: 0.3rem;
    font-size: 0.78rem; color: var(--color-text-secondary);
}

/* Ampliación a pantalla completa. */
.crop-zoom {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(26, 29, 43, 0.92);
    overflow: auto; cursor: zoom-out;
}
.crop-zoom__img {
    max-width: 100%; height: auto;
    border-radius: 8px; background: #fff;
    cursor: default;
}
.crop-zoom__close {
    position: fixed; top: 1rem; right: 1rem;
    width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
    background: var(--color-surface); color: var(--color-text);
    font-size: 1rem; cursor: pointer;
}

/* En móvil la imagen entra girada: se deja desplazar en horizontal para leerla. */
@media (max-width: 768px) {
    .crop-zoom { align-items: flex-start; }
    .crop-zoom__img { max-width: none; width: auto; height: auto; min-width: 100%; }
}

/* ── Histórico del proyecto ───────────────────────────────────────────────── */
/* El antes va apagado y tachado y el después en color: de un vistazo se lee la
   dirección del cambio sin tener que comparar dos textos iguales. */
.history-old { color: var(--color-text-secondary); text-decoration: line-through; }
.history-arrow { color: var(--color-text-secondary); }
.history-new { color: var(--color-text); font-weight: 600; }

/* Lista de proveedores con casillas (envío del AAFF a varios a la vez) */
.supplier-picker { display: grid; gap: 0.4rem; margin-bottom: 0.75rem; max-height: 16rem; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: 12px; padding: 0.6rem 0.8rem; background: var(--color-surface); }
.supplier-picker__item { align-items: flex-start; }
.supplier-picker__item--blocked { opacity: 0.6; }

/* ── Esencias / IFRA51 (DT-REG-04) ─────────────────────────────────────────
   Colores de fila como en el Excel: rojo discrepancia, naranja aviso de
   verificación, ámbar ingrediente que no está en la tabla madre. */
.essence-row--conflict td { background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); }
.essence-row--verify td { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)); }
.essence-row--new td { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface)); }
.essence-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 0.6rem; }
.essence-swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--color-border); margin-right: 0.3rem; }
.essence-swatch.essence-row--conflict { background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); }
.essence-swatch.essence-row--verify { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)); }
.essence-swatch.essence-row--new { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface)); }
.essence-table td { vertical-align: top; min-width: 6rem; }
.essence-table td:first-child { min-width: 12rem; }
/* Nº de fila (posición real, la del Excel): estrecha aunque sea la primera columna. */
.essence-table td.essence-idx { min-width: 0; width: 2.5rem; color: var(--color-text-secondary); }
.essence-table td.essence-idx + td { min-width: 12rem; }
.essence-actions { white-space: nowrap; }
.essence-log summary { cursor: pointer; color: var(--color-text-secondary); margin-top: 0.6rem; }
.essence-log pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.8rem; background: var(--color-bg); border-radius: 8px; padding: 0.75rem; max-height: 18rem; overflow: auto; }
.essence-pick { display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; margin-top: 0.4rem; cursor: pointer; }
.essence-pick:hover { background: var(--color-bg); }
.btn-link { background: none; border: none; padding: 0; color: var(--color-primary); text-align: left; cursor: pointer; text-decoration: underline; font: inherit; }
/* ── Documentos de Dirección Técnica ───────────────────────────────────────── */
/* Pantalla de generación de los PDF regulatorios (fórmula granel, conclusión,
   vigilancia, SED…). Vive aquí y no en un scoped porque la comparten la pantalla
   de documentos y la del archivo. */

/* Opciones del documento: firmante, PAO y unidades ya vendidas. Se reparten en
   columnas mientras quepan y se apilan en móvil. */
.dt-options { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; }
.dt-option {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 0.6rem 0.9rem 0.8rem; margin: 0; min-width: 190px;
}
.dt-option legend {
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-text-secondary);
    padding: 0 0.35rem; width: auto; margin: 0; float: none;
}
.dt-option .field-check { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem; }
.dt-option .field { margin-top: 0.5rem; }
.dt-option--wide { flex: 1 1 320px; }

/* Barra de resultados: recuento a la izquierda, acciones a la derecha. */
.dt-results-bar {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: center; justify-content: space-between;
    margin-top: 1.25rem;
}
.dt-notfound { color: var(--color-warning); }

/* Ficha de un producto encontrado. */
.dt-sheet { margin-top: 1rem; }
.dt-sheet__head {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: flex-start; justify-content: space-between;
}
.dt-sheet__head .card__title { margin: 0.1rem 0 0.2rem; }
.dt-sheet__codes { display: grid; grid-template-columns: auto auto; gap: 0.15rem 0.6rem; align-items: baseline; }
.dt-sheet__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

@media (max-width: 575.98px) {
    .dt-option { min-width: 100%; }
    .dt-sheet__codes { grid-template-columns: auto 1fr; }
}


/* ── Panel por rol, avisos y asistente (fase 5) ─────────────────────────── */
.dash { margin: 1rem 0 1.5rem; }
.dash__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.dash-card { display: flex; flex-direction: column; gap: 0.2rem; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 0.8rem 1rem; box-shadow: 0 1px 3px rgba(26, 29, 43, 0.05); color: var(--color-text); text-decoration: none; }
a.dash-card:hover { border-color: var(--color-primary); }
.dash-card__num { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dash-card__label { font-size: 0.85rem; color: var(--color-text-secondary); }
.dash-card--danger { border-left: 4px solid var(--color-danger); }
.dash-card--warning { border-left: 4px solid var(--color-warning); }
.dash__bars { display: grid; gap: 0.35rem; margin-bottom: 1rem; max-width: 640px; }
.dash-bar { display: grid; grid-template-columns: 11rem 1fr 3rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.dash-bar__track { background: var(--color-bg); border-radius: 6px; height: 0.6rem; overflow: hidden; }
.dash-bar__fill { display: block; height: 100%; background: var(--color-primary); border-radius: 6px; }
.dash-bar__num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.35rem; }
.dash-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (max-width: 575px) { .dash-bar { grid-template-columns: 7rem 1fr 2.5rem; } }
.chat { display: grid; gap: 0.75rem; max-width: 900px; }
.chat__examples { display: grid; gap: 0.4rem; }
.chat__msg { display: flex; flex-direction: column; }
.chat__msg--user { align-items: flex-end; }
.chat__bubble { white-space: pre-wrap; padding: 0.7rem 0.9rem; border-radius: 12px; max-width: 90%; background: var(--color-surface); border: 1px solid var(--color-border); }
.chat__msg--user .chat__bubble { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.chat__tools { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.25rem; }

/* Texto de estado (no se carga Bootstrap: solo sus iconos). */
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

/* Resultado del botón «Probar» de la pantalla de IA. */
.ai-tests { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; display: grid; gap: 0.25rem; font-size: 0.88rem; }

/* Barra de proporción (espacio ocupado, memoria): estado del sistema. */
.usage-bar { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; margin-top: 0.3rem; }
.usage-bar > span { display: block; height: 100%; background: var(--color-primary); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* INCI todos juntos, separados por comas (ficha del proyecto). */
.inci-joined { margin-top: 0.75rem; }
.inci-joined__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }

/* Control segmentado (p. ej. «Diseño: Nuevo / Clásico» en el menú del avatar).
   Base común a los dos diseños; apple.css lo refina. */
.segmented { display: flex; gap: 2px; padding: 2px; margin: 0.25rem 0.75rem 0.35rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 9px; }
.segmented__item { flex: 1 1 0; min-height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 0.85rem; cursor: pointer; }
.segmented__item:hover { color: var(--color-text); }
.segmented__item.is-selected { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.design-apple .segmented { background: var(--color-fill); border-color: transparent; }
.design-apple .segmented__item.is-selected { background: var(--color-surface-raised); }

/* Progreso de una subida (UploadProgressBar, v0.67.0). Variables, así vale en los
   dos diseños y en oscuro. */
.upload-progress { margin-top: 0.6rem; }
.upload-progress__track { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.upload-progress__bar { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.15s linear; }
.upload-progress__bar--processing { background: var(--color-success); }
.upload-progress__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.upload-progress__text strong { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .upload-progress__bar { transition: none; } }

/* Firma personal (Ajustes, v0.69.0). El lienzo es blanco en los dos modos: la firma
   se dibuja en tinta oscura y va a un PDF de fondo blanco. */
.signature-preview { display: inline-flex; padding: 0.75rem 1rem; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 0.4rem; }
.signature-preview img { max-height: 90px; max-width: 100%; display: block; }
.signature-pad { width: 100%; height: 180px; background: #FFFFFF; border: 1px dashed var(--color-border); border-radius: 10px; cursor: crosshair; display: block; }
.signature-actions { flex-wrap: wrap; gap: 0.5rem; }

/* Qué lleva la etiqueta (alta y ficha, v0.70.0). */
.label-contents { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; border: 1px solid var(--color-border); border-radius: 10px; padding: 0.6rem 0.9rem 0.7rem; margin: 0.8rem 0; }
.label-contents legend { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); padding: 0 0.35rem; width: auto; float: none; margin: 0; }
.label-contents .detail-hint { flex-basis: 100%; margin: 0.2rem 0 0; }
/* Precauciones arriba, para Diseño (v0.70.0). */
.precautions-card { border-left: 3px solid var(--color-warning); }
.precautions-card__text { white-space: pre-wrap; margin: 0; }

/* Selector múltiple con buscador (países de la ficha, v0.71.0). */
.multiselect { position: relative; }
.multiselect__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; cursor: pointer; }
.multiselect__toggle:disabled { cursor: not-allowed; }
.multiselect__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect__backdrop { position: fixed; inset: 0; z-index: 210; }
.multiselect__panel { position: absolute; z-index: 211; left: 0; right: 0; top: calc(100% + 4px); min-width: 240px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 0.5rem; }
.multiselect__search { margin-bottom: 0.4rem; }
.multiselect__options { max-height: 240px; overflow-y: auto; display: grid; gap: 0.1rem; }
.multiselect__option { padding: 0.3rem 0.4rem; border-radius: 6px; }
.multiselect__option:hover { background: var(--color-bg-hover); }
.multiselect__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
.multiselect__foot .btn-secondary { margin-left: auto; }
.multiselect__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.multiselect__chip-x { background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 0 0.25rem; font-size: 1rem; line-height: 1; }
@media (max-width: 767.98px) { .multiselect__option { min-height: 40px; } }

/* Filtros avanzados del listado de proyectos (v0.72.0). */
.project-filters { margin-bottom: 1rem; }

/* Avisos por correo en Ajustes (v0.72.0). */
.email-notif__toggle { margin: 0.25rem 0 0.35rem; font-size: 0.95rem; }
.email-notif__toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); }