/* ============================================================================
   Vistas del módulo "Gestión de Agentes" (Áreas de Negocio, Catálogo de Agentes,
   Servicios Externos, Proyectos, Reportes).
   Restaura el tamaño de botón del diseño original (padding 10px 22px). El resto
   de la app conserva el tamaño compacto que define soc-coaching-views.css
   ("misma guía en toda la app"). Scopeado a .agentes-view para no afectar
   Coaching / Networking / catálogos.
   ============================================================================ */

.agentes-view .btn-soc-primary.k-button,
.agentes-view button.btn-soc-primary:not(.k-button),
.agentes-view .btn.btn-soc-primary:not(.k-button),
.agentes-view input[type="submit"].btn-soc-primary,
.agentes-view .btn-soc-secondary.k-button,
.agentes-view button.btn-soc-secondary:not(.k-button),
.agentes-view .btn.btn-soc-secondary:not(.k-button),
.agentes-view .btn-soc-deactivate.k-button,
.agentes-view button.btn-soc-deactivate:not(.k-button),
.agentes-view .btn.btn-outline-secondary,
.agentes-view button.btn-outline-secondary {
    padding: 10px 22px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Botón "Editar" (Telerik) — mismo criterio, un poco más grande. */
.agentes-view .k-button.k-button-solid-primary.btn-soc-edit,
.agentes-view .k-button.btn-soc-edit,
.agentes-view button.btn-soc-edit {
    padding: 8px 18px !important;
    font-size: 14px !important;
}

/* Botones de acción azules ("Editar" y "🔑 Claves") — mismo azul primario y
   texto blanco, para verse consistentes con "+ Nuevo X" / "Solo activos". */
.agentes-view .k-button.k-button-solid-primary.btn-soc-edit,
.agentes-view .k-button.btn-soc-edit,
.agentes-view button.btn-soc-edit,
.agentes-view .k-button-solid-base {
    background-color: var(--soc-btn-primary) !important;
    border-color: var(--soc-btn-primary) !important;
    color: #ffffff !important;
}

.agentes-view .k-button.k-button-solid-primary.btn-soc-edit:hover:not(.k-disabled):not(:disabled),
.agentes-view .k-button.btn-soc-edit:hover:not(.k-disabled):not(:disabled),
.agentes-view button.btn-soc-edit:hover:not(:disabled),
.agentes-view .k-button-solid-base:hover:not(.k-disabled):not(:disabled) {
    background-color: var(--soc-btn-primary-hover) !important;
    border-color: var(--soc-btn-primary-hover) !important;
    color: #ffffff !important;
}

.agentes-view .k-button.k-button-solid-primary.btn-soc-edit.k-disabled,
.agentes-view .k-button.btn-soc-edit.k-disabled,
.agentes-view .k-button.btn-soc-edit:disabled,
.agentes-view .k-button-solid-base.k-disabled,
.agentes-view .k-button-solid-base:disabled {
    background-color: var(--soc-btn-primary-disabled-bg) !important;
    border-color: var(--soc-btn-primary-disabled-border) !important;
    color: #ffffff !important;
}

/* Texto blanco en los botones de fondo azul.
   soc-coaching-views.css aplica `color: var(--soc-btn-primary-fg)` a .btn-soc-primary sin
   scope, pero define ese token solo bajo `:root.coaches-theme`. Fuera de Coaching el token
   no existe, la declaración queda inválida y el color se hereda (gris oscuro del body):
   botón azul con texto oscuro. Lo mismo en el :hover de .btn-soc-secondary, que se rellena
   de azul (--soc-btn-secondary-border) pero deja el texto en --soc-btn-secondary-hover-fg
   (#1d4ed8, azul sobre azul). Definir los tokens aquí arregla ambos en todas las vistas
   del módulo, que cuelgan de .agentes-view. */
.agentes-view {
    --soc-btn-primary-fg: #ffffff;
    --soc-btn-secondary-hover-fg: #ffffff;
}

/* Respaldo explícito: si alguien vuelve a apuntar el color a un token que no exista fuera
   de Coaching, esta regla (más específica) mantiene el texto blanco. */
.agentes-view .btn-soc-primary.k-button,
.agentes-view button.btn-soc-primary:not(.k-button),
.agentes-view .btn.btn-soc-primary:not(.k-button),
.agentes-view input[type="submit"].btn-soc-primary,
.agentes-view button.btn-soc-secondary:not(.k-button):hover:not(:disabled),
.agentes-view .btn.btn-soc-secondary:not(.k-button):hover:not(:disabled),
.agentes-view .btn-soc-secondary.k-button:hover:not(.k-disabled):not(:disabled) {
    color: #ffffff !important;
}

/* ============================================================================
   Modal de proyecto — responsables y opciones.
   Cada responsable es una tarjeta: título + lo ya asignado (chips) + el
   selector para agregar. Antes los tres bloques flotaban sueltos en la misma
   fila y "+ Agregar" acababa lejos del control con el que se usa.
   ============================================================================ */

.agentes-view .soc-resp-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.agentes-view .soc-resp-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agentes-view .soc-resp-count {
    padding: 2px 9px;
    border-radius: 9999px;
    background: #eef2ff;
    color: #1e40af;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* min-height: mantiene alineadas las dos columnas aunque una no tenga chips. */
.agentes-view .soc-resp-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agentes-view .soc-resp-empty {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    color: #9ca3af;
    font-size: 12.5px;
    font-style: italic;
}

.agentes-view .soc-resp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 11px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* Interno y externo se distinguen por icono + color: el nombre solo no lo dice. */
.agentes-view .soc-resp-chip.is-internal {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1e3a8a;
}

.agentes-view .soc-resp-chip.is-external {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

.agentes-view .soc-resp-chip > .bx {
    font-size: 14px;
    opacity: 0.7;
}

.agentes-view .soc-resp-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}

.agentes-view .soc-resp-chip__remove:hover {
    background: rgba(15, 23, 42, 0.1);
    opacity: 1;
}

.agentes-view .soc-resp-chip__remove .bx {
    font-size: 15px;
}

/* Interno/Externo como control segmentado: son excluyentes, no dos botones. */
.agentes-view .soc-seg {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #f3f4f6;
}

.agentes-view .soc-seg__btn {
    padding: 5px 16px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.agentes-view .soc-seg__btn:hover:not(.is-active) {
    background: rgba(15, 23, 42, 0.05);
    color: #111827;
}

.agentes-view .soc-seg__btn.is-active {
    background: var(--soc-btn-primary);
    color: #ffffff;
}

.agentes-view .soc-seg__btn:focus-visible {
    outline: 2px solid var(--soc-btn-primary);
    outline-offset: 2px;
}

/* El campo y su botón, juntos: el botón deja de flotar a la derecha. */
.agentes-view .soc-resp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.agentes-view .soc-resp-row > .form-select,
.agentes-view .soc-resp-row > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.agentes-view button.btn-soc-primary.soc-resp-add {
    flex: 0 0 auto;
    gap: 2px;
    padding: 8px 16px !important;
    font-size: 13px !important;
    white-space: nowrap;
}

.agentes-view button.btn-soc-primary.soc-resp-add:disabled {
    cursor: not-allowed;
}

.agentes-view .soc-resp-add .bx {
    font-size: 15px;
}

/* ── Opciones del proyecto (Agente IA / Listo para desarrollo) ───────────── */
.agentes-view .soc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.agentes-view .soc-option {
    display: flex;
    flex: 1 1 280px;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.agentes-view .soc-option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agentes-view .soc-option__label {
    margin: 0;
    color: #111827;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.agentes-view .soc-option__hint {
    color: #6b7280;
    font-size: 12px;
}

.agentes-view .soc-option__state {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 9999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
}

.agentes-view .soc-option__state.is-on {
    background: #d7f0e5;
    color: #006d4e;
}

.agentes-view .soc-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    padding: 3px;
    border: none;
    border-radius: 9999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.18s ease;
}

.agentes-view .soc-switch.is-on {
    background: #006d4e;
}

.agentes-view .soc-switch:focus-visible {
    outline: 2px solid var(--soc-btn-primary);
    outline-offset: 2px;
}

.agentes-view .soc-switch__thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateX(0);
    transition: transform 0.18s ease;
}

.agentes-view .soc-switch.is-on .soc-switch__thumb {
    transform: translateX(20px);
}

.agentes-view .soc-option__check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    cursor: pointer;
}

.agentes-view .form-check-input:checked {
    background-color: var(--soc-btn-primary);
    border-color: var(--soc-btn-primary);
}

@media (prefers-reduced-motion: reduce) {
    .agentes-view .soc-switch,
    .agentes-view .soc-switch__thumb {
        transition: none;
    }
}

/* ── Tags por etapa del listado de requerimientos ─────────────────────────────
   Son excluyentes, así que se agrupan como control segmentado, igual que
   .soc-seg: un grupo compacto dice «elige uno de estos» mucho mejor que seis
   botones sueltos del mismo tamaño que el resto de la pantalla.

   Van a la derecha del buscador y en la misma fila, porque acompañan a la
   búsqueda; antes ocupaban un renglón propio por encima y competían con el
   título de la pantalla. */
.agentes-view .soc-tagbar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #f3f4f6;
}

.agentes-view .soc-tagbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.agentes-view .soc-tagbar__btn:hover:not(.is-active) {
    background: rgba(15, 23, 42, 0.05);
    color: #111827;
}

.agentes-view .soc-tagbar__btn.is-active {
    background: var(--soc-btn-primary);
    color: #ffffff;
}

.agentes-view .soc-tagbar__btn:focus-visible {
    outline: 2px solid var(--soc-btn-primary);
    outline-offset: 2px;
}

/* El contador va dentro de la píldora y en tono, no como un badge aparte: es un
   dato secundario del tag, no una alerta. */
.agentes-view .soc-tagbar__count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.agentes-view .soc-tagbar__btn.is-active .soc-tagbar__count {
    background: rgba(255, 255, 255, 0.25);
}

/* Un tag vacío se atenúa en vez de desaparecer: que esté a cero es información. */
.agentes-view .soc-tagbar__btn.is-empty:not(.is-active) {
    color: #9ca3af;
}

/* Buscador y tags en una sola fila; en pantalla angosta los tags bajan enteros. */
.agentes-view .soc-listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ── Estatus del requerimiento, coloreado por avance ──────────────────────────
   De gris (nadie lo ha tomado) a verde (cerrado). El objetivo es que al recorrer
   el listado se vea DÓNDE está cada requerimiento sin leer los 15 nombres.

   Dos colores se salen de la progresión a propósito: «back» para las dos
   devoluciones (el requerimiento retrocedió, y eso no se lee en el nombre) y
   «paused» para lo que ni avanza ni se cerró. */
.agentes-view .soc-status {
    display: inline-block;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agentes-view .soc-status--idle      { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.agentes-view .soc-status--pm        { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.agentes-view .soc-status--dev       { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.agentes-view .soc-status--qa        { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.agentes-view .soc-status--almost    { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.agentes-view .soc-status--done      { background: #059669; border-color: #059669; color: #ffffff; }
.agentes-view .soc-status--cancelled { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.agentes-view .soc-status--back      { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.agentes-view .soc-status--paused    { background: #f8fafc; border-color: #cbd5e1; color: #475569; }

/* La manita en los renglones del listado: el renglón completo abre el detalle y
   sin esto no hay nada que lo insinúe. */
.agentes-view .k-grid tbody tr {
    cursor: pointer;
}

/* ── Selector de varios (responsable del proyecto) ────────────────────────────
   Mismo control que un combo normal, para que conviva con «Responsable por
   negocio», que va justo al lado y es un solo valor. Lo único que añade es el
   botón de agregar y la lista compacta de lo ya asignado. */
.agentes-view .soc-picker {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.agentes-view .soc-picker > .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

.agentes-view .soc-picker__add {
    flex: 0 0 auto;
    white-space: nowrap;
}

.agentes-view .soc-picked {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agentes-view .soc-picked__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 13px;
}

.agentes-view .soc-picked__item .bx {
    font-size: 15px;
    color: #6b7280;
}

.agentes-view .soc-picked__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentes-view .soc-picked__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
}

.agentes-view .soc-picked__remove:hover {
    color: #b91c1c;
}