/* ════════════════════════════════════════════════════════════════════════════
   PROGRAMA DE RECONOCIMIENTOS — kw-rec-*

   ⚠ ESTE FICHERO ES DELIBERADAMENTE CORTO. La primera versión traía ~200 líneas
   con cabecera, tarjetas de cifras, raíles y chips propios: era el lenguaje del
   mockup traído tal cual, y por eso las pantallas no se parecían al resto de
   Kronos aunque usaran los colores correctos.

   Todo eso lo hace ya el sistema y se usa directamente en los .razor:
     · cabecera de sección    → kw-panel + kw-panel-header + kw-panel-title
     · cifras                 → kw-stat-glass + kw-stat-glass-item (g-blue, g-parts…)
     · rejillas               → kw-grid-enhanced + RadzenDataGrid
     · vacíos                 → kw-empty-state + kw-empty-state-icon / kw-doc-empty
     · botones, badges, tabs  → kw-btn-*, kw-badge-*, kw-daysoff-tabs

   Aquí SOLO queda lo que no existe en ninguna parte: el podio, la tarjeta con la
   cita, las píldoras de reacción, los avatares de iniciales y el botón cálido.
   Antes de añadir una regla nueva aquí, comprobar que no está ya en custom.css.

   Color: todo de las variables --kw-*, así que el módulo sigue el tema del
   cliente. El cálido (--kw-parts-lt-dark → --kw-parts) está reservado al GESTO de
   reconocer: botón, filo de la cita, primer puesto del podio e insignias.
   ════════════════════════════════════════════════════════════════════════════ */

/* Realce del widget cuando hay algo sin leer. Se pone SOBRE .kw-panel, no lo sustituye. */
.kw-rec-highlight { box-shadow: 0 0 0 2px var(--kw-parts-lt-dark), 0 2px 8px rgba(59,130,246,.05) !important; }

/* ── Rejilla del tablón: feed + raíl ─────────────────────────────────────── */
.kw-rec-board { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 16px; align-items: start; }
/* Cola de admin: lista + panel de revisión, como /schedulecheck. */
.kw-rec-triage { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 14px; align-items: start; }
/* Sin panel de revisión (sin permiso de gestión o sin fila elegida) la rejilla dejaba
   340px de hueco muerto a la derecha y todo salía descuadrado hacia la izquierda. */
.kw-rec-triage.kw-rec-triage-solo { grid-template-columns: minmax(0,1fr); }

/* Segmentado de ámbito y periodo. No hay equivalente en kw (kw-toggle es un on/off). */
.kw-rec-seg { display: inline-flex; background: var(--kw-secondary); border-radius: 7px; padding: 2px; gap: 2px; }
.kw-rec-seg button {
    font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 5px; border: none;
    background: transparent; color: var(--kw-secondary-text); cursor: pointer;
}
.kw-rec-seg button.active { background: #fff; color: var(--kw-primary); box-shadow: 0 1px 2px rgba(var(--kw-primary-rgb), .18); }

/* Fila de chips de filtro (Todos, tipos): pequeña separación entre ellos y wrap si no caben. */
.kw-rec-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Chip de tipo. Es un filtro pulsable con punto de color: ni kw-badge (no es pulsable)
   ni kw-btn (no lleva el punto y pesa demasiado en una tira de seis). */
.kw-rec-chip {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(var(--kw-primary-rgb), .14);
    background: #fff; color: #3b4761; white-space: nowrap; cursor: pointer;
}
.kw-rec-chip.active { background: var(--kw-primary); border-color: transparent; color: #fff; }
.kw-rec-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--kw-primary); }

/* Variante tintada: cada chip lleva su propio color vía --kw-chip-c (fallback secundario).
   Fondo al 13% de alpha, texto y punto en el color, sin borde. Al marcarse activo, se llena. */
.kw-rec-chip-tinted {
    --kw-chip-c: #6c757d;
    background: color-mix(in srgb, var(--kw-chip-c) 13%, transparent);
    color: var(--kw-chip-c);
    border-color: color-mix(in srgb, var(--kw-chip-c) 45%, transparent);
}
.kw-rec-chip-tinted .kw-rec-dot { background: var(--kw-chip-c); }
.kw-rec-chip-tinted.active { background: var(--kw-chip-c); color: #fff; border-color: var(--kw-chip-c); }
.kw-rec-chip-tinted.active .kw-rec-dot { background: #fff; }

/* ── Tarjeta del muro ────────────────────────────────────────────────────── */
.kw-rec-card {
    position: relative; background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 12px;
    box-shadow: 0 0 0 1px rgba(100,116,139,.25), 0 2px 8px rgba(59,130,246,.05);
}
.kw-rec-card.destacado { box-shadow: 0 0 0 2px var(--kw-parts-lt-dark), 0 2px 8px rgba(59,130,246,.05); }
.kw-rec-top { display: flex; gap: 10px; padding: 13px 15px 0; align-items: center; }
.kw-rec-names { font-size: 13.5px; line-height: 1.45; flex: 1; min-width: 0; }
.kw-rec-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kw-parts-lt-dark); }
/* La cita: recuadro suave gris. El filo cálido original quedaba muy protagonista al ver el listado
   entero — para leer varias tarjetas seguidas el gris deja la mirada en el texto y no en el filete. */
.kw-rec-quote {
    margin: 11px 15px 4px; padding: 10px 13px; border-radius: 8px;
    font-size: 14.5px; line-height: 1.6; color: #3b4761;
    border: 1px solid rgba(var(--kw-primary-rgb), .16);
    background: #fff;
}
.kw-rec-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: .25rem 15px;
    border-top: 1px solid rgba(var(--kw-primary-rgb), .07); background: var(--kw-secondary-light);
}
.kw-rec-seen { margin-left: auto; font-size: 11.5px; color: #93a0bb; display: flex; align-items: center; gap: 5px; }

/* Reacciones */
.kw-rec-reacts { display: flex; gap: 5px; flex-wrap: wrap; }
.kw-rec-react {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(var(--kw-primary-rgb), .14);
    background: #fff; color: var(--kw-secondary-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.kw-rec-react:hover { border-color: var(--kw-primary-light); }
.kw-rec-react.mine { border-color: var(--kw-primary); background: rgba(var(--kw-primary-rgb), .07); color: var(--kw-primary); }
.kw-rec-react em { font-style: normal; font-size: 13.5px; line-height: 1; }

/* Avatares de iniciales, en colores kw planos. */
.kw-rec-av {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    font-size: 13px; font-weight: 700; color: #fff; background: var(--kw-primary);
}
.kw-rec-av.sm { width: 27px; height: 27px; font-size: 10.5px; }
.kw-rec-av.xs { width: 22px; height: 22px; font-size: 9px; }
.kw-rec-av.lg { width: 50px; height: 50px; font-size: 16px; }
.kw-rec-av.c1 { background: var(--kw-primary); }
.kw-rec-av.c2 { background: var(--kw-info-dark); }
.kw-rec-av.c3 { background: var(--kw-process-dark); }
.kw-rec-av.c4 { background: var(--kw-parts-dark); }
.kw-rec-av.c5 { background: var(--kw-success-dark); }
.kw-rec-av.c6 { background: var(--kw-warning-dark); }

/* ── Podio ───────────────────────────────────────────────────────────────── */
.kw-rec-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 16px 14px 12px; }
.kw-rec-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 33%; }
.kw-rec-pod-bar { width: 100%; border-radius: 7px 7px 0 0; display: grid; place-items: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Solo el primer puesto lleva el cálido. Los otros dos, neutros. */
.kw-rec-pod.p1 .kw-rec-pod-bar { height: 58px; background: linear-gradient(180deg, var(--kw-parts), var(--kw-parts-lt-dark)); color: #fff; }
.kw-rec-pod.p2 .kw-rec-pod-bar { height: 44px; background: var(--kw-secondary-dark); color: #fff; }
.kw-rec-pod.p3 .kw-rec-pod-bar { height: 34px; background: var(--kw-secondary); color: #3b4761; }
.kw-rec-pod small { font-size: 11px; color: var(--kw-secondary-text); text-align: center; line-height: 1.3; font-weight: 600; }
.kw-rec-lb { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-top: 1px solid rgba(var(--kw-primary-rgb), .07); font-size: 13px; }
.kw-rec-lb .rk { width: 18px; font-weight: 800; color: #93a0bb; font-size: 12px; font-variant-numeric: tabular-nums; }
.kw-rec-lb .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cuatro cifras pequeñas de "Lo mío". kw-stat-glass es para la tira ancha de arriba;
   dentro de un panel del raíl queda enorme. */
.kw-rec-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(var(--kw-primary-rgb), .07); }
.kw-rec-mini > div { background: #fff; padding: 12px 14px; }
.kw-rec-mini b { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kw-rec-mini span { font-size: 11px; color: var(--kw-secondary-text); font-weight: 600; }

/* Insignias */
.kw-rec-badges { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid rgba(var(--kw-primary-rgb), .07); }
.kw-rec-badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
    padding: 5px 10px; border-radius: 999px; border: 1px solid transparent;
    background: rgba(var(--kw-parts-lt-rgb), .18); color: var(--kw-parts-lt-dark);
}
.kw-rec-badge.off { background: var(--kw-secondary-light); color: #93a0bb; border-color: rgba(var(--kw-primary-rgb), .12); }
.kw-rec-nudge {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    background: rgba(var(--kw-parts-lt-rgb), .16); border: 1px dashed var(--kw-parts-lt-dark); color: var(--kw-parts-lt-dark);
}

/* ── Cola de admin ───────────────────────────────────────────────────────── */
.kw-rec-qrow {
    display: flex; align-items: center; gap: 10px; padding: 10px 13px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid rgba(var(--kw-primary-rgb), .07);
}
.kw-rec-qrow:last-child { border-bottom: none; }
.kw-rec-qrow:hover { background: var(--kw-secondary-light); }
.kw-rec-qrow.active { background: rgba(var(--kw-primary-rgb), .07); box-shadow: inset 3px 0 0 var(--kw-primary); }
.kw-rec-state { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kw-rec-state.pend { background: rgba(var(--kw-warning-rgb), .16); color: var(--kw-warning-dark); }
.kw-rec-state.ok { background: rgba(var(--kw-success-rgb), .14); color: var(--kw-success-dark); }
.kw-rec-state.bad { background: rgba(var(--kw-danger-rgb), .11); color: var(--kw-danger); }
.kw-rec-diff { font-size: 12px; margin-top: 8px; color: var(--kw-secondary-text); }

/* ── "Mis reconocimientos" (diálogo del emisor/destinatario) ─────────────── */
/* Cabecera de sección dentro del diálogo (Pendientes / Publicados / Rechazados).
   Mismo look que kw-panel-header + kw-panel-title (fondo gris, padding, font-weight 500)
   sin usar la clase para no anidar paneles dentro del popup. Colapsable: clickable con
   chevron a la derecha. */
.kw-rec-group-head {
    display: flex; align-items: center; gap: 0.5rem;
    background: #f7f8f9; padding: 0.5rem 1rem; border-radius: 6px;
    font-size: 1rem; font-weight: 500; color: inherit;
    margin-bottom: 8px; cursor: pointer; user-select: none;
    transition: background .15s;
}
.kw-rec-group-head:hover { background: #eef0f2; }
/* Tarjeta de la lista personal: padding inferior igual al superior (13px de kw-rec-top).
   El estilo del quote ya es gris suave a nivel base — no hace falta override extra. */
.kw-rec-card.kw-rec-card-mine { padding-bottom: 13px; }
.kw-rec-card.kw-rec-card-mine .kw-rec-quote { margin-bottom: 0; }
.kw-rec-card.kw-rec-card-mine .kw-rec-reject-note { margin-bottom: 0; }
/* Rechazado: filete rojo suave, para que el estado se lea antes de leer nada. */
.kw-rec-card.kw-rec-card-rejected {
    border: 1px dashed rgba(var(--kw-danger-rgb), .35); background: rgba(var(--kw-danger-rgb), .04);
    box-shadow: none;
}
/* Motivo del rechazo dentro de la tarjeta. Es el ÚNICO sitio donde el emisor lo verá. */
.kw-rec-reject-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 11px 15px 0; padding: 8px 12px;
    border-radius: 6px; background: rgba(var(--kw-danger-rgb), .08); color: var(--kw-danger-dark);
    font-size: 12.5px; line-height: 1.5;
}
.kw-rec-reject-note i { margin-top: 3px; }

/* ⚠ 991.98px es un portátil normal, no un móvil: por debajo hay reglas globales con
   !important que reordenan cualquier barra de filtros. Aquí solo se colapsan las dos
   rejillas propias, sin tocar nada global. */
@media (max-width: 991.98px) {
    .kw-rec-board, .kw-rec-triage { grid-template-columns: 1fr; }
}