/*
 * Modal otorgar reconocimiento — layout v2, base compartida por todos los themes.
 *
 * Portado de application/views/themes/ricoh2025/front/css/41.popup-reconocimientos.css,
 * donde nació junto con el validador de reconocimientos con IA. Todo cuelga de
 * .modal-reconocimientos-v2, que solo pone popup_reconocimientos_modal.php de default
 * (o un theme que adopte la v2): un theme con su propio modal clásico no lo ve.
 *
 * Se carga en el grupo 'pre' de esqueleto.php, antes que el CSS del theme
 * (getThemeCSS()): un theme pisa cualquier regla de acá repitiendo el mismo selector
 * en su CSS. Para adaptar los colores a la marca alcanza con redefinir las variables:
 *
 *     .modal-reconocimientos-v2 { --rec-v2-accent: #ee7421; ... }
 *
 * Las reglas de .modal-dialog, .modal-content, .rec-v2-textarea y .rec-v2-message-toggle
 * llevan además .modal: casi todos los themes tienen reglas genéricas con la misma
 * especificidad (.modal-reconocimientos .modal-dialog, .modal .modal-content,
 * .modal .form-control, .modal-reconocimientos .btn-link) que de otro modo las pisarían.
 */

:root {
    --rec-v2-accent: #399dac;
    --rec-v2-accent-light: #42aebe;
    --rec-v2-accent-dark: #2f8491;
    --rec-v2-accent-soft: rgba(57, 157, 172, 0.14);
    --rec-v2-accent-ring: rgba(57, 157, 172, 0.2);
    --rec-v2-text: #303030;
    --rec-v2-text-muted: #5e5763;
    --rec-v2-danger: #c62828;
    --rec-v2-warn-bg: #fff6e8;
    --rec-v2-warn-border: #f2c58a;
    --rec-v2-warn-text: #8a4b0f;
}

.modal.modal-reconocimientos-v2 .modal-dialog {
    width: 720px;
    max-width: calc(100vw - 24px);
    margin: 30px auto;
}

.modal.modal-reconocimientos-v2 .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(94, 87, 99, 0.22);
}

.modal-reconocimientos-v2 .rec-v2-modal-header {
    position: relative;
    border: none;
    padding: 24px 28px 8px;
    text-align: left;
}

/* La cruz va en la esquina, en la misma línea que el título */
.modal-reconocimientos-v2 .rec-v2-header-top {
    position: absolute;
    top: 22px;
    right: 22px;
    margin: 0;
    z-index: 1;
}

.modal-reconocimientos-v2 .rec-v2-kicker {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-right: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.modal-reconocimientos-v2 .rec-v2-step-summary {
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 190px;
    max-width: 100%;
    margin: 0 0 14px;
}

.modal-reconocimientos-v2.rec-v2-total-2 .rec-v2-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-reconocimientos-v2 .rec-v2-progress-segment {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: #dedee4;
    transition: background-color 0.2s ease;
}

.modal-reconocimientos-v2 .rec-v2-progress-segment--active,
.modal-reconocimientos-v2 .rec-v2-progress-segment--complete {
    background: var(--rec-v2-accent);
}

.modal-reconocimientos-v2 button.close.rec-v2-close {
    position: static;
    float: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rec-v2-text-muted);
    opacity: 1;
    line-height: 1;
    text-align: center;
    font-size: 14px;
    z-index: auto;
}

.modal-reconocimientos-v2 button.close.rec-v2-close span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.modal-reconocimientos-v2 button.close.rec-v2-close:hover {
    background: #f5f5f7;
}

.modal-reconocimientos-v2 .rec-v2-title {
    margin: 0;
    padding-right: 44px;
    text-align: left;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
}

.modal-reconocimientos-v2 .rec-v2-title span {
    font-size: inherit !important;
}

.modal-reconocimientos-v2 .rec-v2-modal-body {
    padding: 8px 28px 28px;
}

.modal-reconocimientos-v2 .rec-v2-step-heading {
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px;
    line-height: 1.4;
}

.modal-reconocimientos-v2 .rec-v2-limite-aviso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 20px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--rec-v2-accent-soft);
    color: var(--rec-v2-text);
    font-size: 13px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-limite-aviso i {
    color: var(--rec-v2-accent);
    font-size: 15px;
}

.modal-reconocimientos-v2 .rec-v2-limite-aviso--agotado {
    background: rgba(198, 40, 40, 0.10);
    color: var(--rec-v2-danger);
}

.modal-reconocimientos-v2 .rec-v2-limite-aviso--agotado i {
    color: var(--rec-v2-danger);
}

.modal-reconocimientos-v2 .row.otorgamiento {
    text-align: left;
}

.modal-reconocimientos-v2 .rec-v2-recipient {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.modal-reconocimientos-v2 .rec-v2-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #efeff3;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-reconocimientos-v2 .rec-v2-initials {
    font-size: 15px;
    font-weight: 700;
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-recipient-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--rec-v2-text);
    margin-bottom: 8px;
}

.modal-reconocimientos-v2 .rec-v2-rec-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.modal-reconocimientos-v2 .rec-v2-rec-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--rec-v2-accent-soft);
    font-size: 13px;
    font-weight: 600;
    max-width: 100%;
}

.modal-reconocimientos-v2 .rec-v2-info {
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.modal-reconocimientos-v2 .rec-v2-change-rec {
    font-size: 13px;
    font-weight: 600;
    color: var(--rec-v2-text-muted) !important;
    text-decoration: underline;
    border: none;
    background: none;
    padding: 0;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-change-rec,
.modal-reconocimientos-v2.rec-v2-type-locked .rec-v2-change-rec {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-btn-back,
.modal-reconocimientos-v2.rec-v2-type-locked .rec-v2-btn-back.disabled {
    pointer-events: none;
    opacity: 0.45;
}

.modal-reconocimientos-v2 .rec-v2-rec-desc {
    display: none;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--rec-v2-text-muted);
    text-align: left;
}

.modal-reconocimientos-v2 .rec-v2-divider {
    margin: 20px 0 22px;
    background: #e8e8ec;
    background-image: none;
    height: 1px;
}

.modal-reconocimientos-v2 .rec-v2-mensaje-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-mensaje-hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6f6f78;
    line-height: 1.45;
}

.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-mensaje-intro {
    display: none;
}

.modal-reconocimientos-v2 .rec-v2-current-message-head {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.modal-reconocimientos-v2 .rec-v2-current-message-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--rec-v2-text);
}

.modal.modal-reconocimientos-v2 .rec-v2-message-toggle {
    display: none;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--rec-v2-accent);
}

.modal.modal-reconocimientos-v2 .rec-v2-textarea {
    border-radius: 12px;
    border: 2px solid var(--rec-v2-accent);
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    min-height: 140px;
    box-shadow: none;
}

.modal.modal-reconocimientos-v2 .rec-v2-textarea.rec-v2-textarea--feedback {
    height: 96px;
    min-height: 96px;
    resize: none;
}

.modal.modal-reconocimientos-v2 .rec-v2-textarea:focus {
    border-color: var(--rec-v2-accent-light);
    outline: none;
    box-shadow: 0 0 0 3px var(--rec-v2-accent-ring);
}

.modal-reconocimientos-v2 .rec-v2-textarea-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #8a8a8a;
}

.modal-reconocimientos-v2 .rec-v2-char-min--pending,
.modal-reconocimientos-v2 .rec-v2-char-count--pending {
    color: var(--rec-v2-danger);
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-compose-guide {
    margin-top: 16px;
    margin-bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-compose-guide-title {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-compose-guide-list {
    margin: 0;
    padding-left: 19px;
    font-size: 13px;
    line-height: 1.5;
}

.modal-reconocimientos-v2 .rec-v2-compose-guide-list li+li {
    margin-top: 3px;
}

.modal-reconocimientos-v2.rec-v2-flow-step-2 .rec-v2-review {
    display: none !important;
}

.modal-reconocimientos-v2.rec-v2-flow-step-2.rec-v2-analyzing .rec-v2-review,
.modal-reconocimientos-v2.rec-v2-flow-step-2.rec-v2-has-result .rec-v2-review,
.modal-reconocimientos-v2.rec-v2-flow-step-3 .rec-v2-review {
    display: block !important;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-mensaje>.rec-v2-mensaje-intro,
.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-mensaje>.rec-v2-textarea-wrap,
.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-mensaje>.rec-v2-compose-guide,
.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-review>.rec-v2-review-intro,
.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-review>.rec-v2-review-list,
.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-review>#rec-v2-ai-outcome,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-textarea-wrap,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-compose-guide,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-review-intro,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-review-list,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-ai-outcome-head {
    display: none !important;
}

.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-ai-outcome {
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-ai-outcome::before,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-ai-outcome::after {
    display: none;
}

.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-ai-result {
    margin-top: 0;
}

.modal-reconocimientos-v2 .rec-v2-fix-progress {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.modal-reconocimientos-v2 .rec-v2-type-ask {
    padding: 4px 0 8px;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-lead {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-type-ask-name {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--rec-v2-accent-soft);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rec-v2-accent);
}

.modal-reconocimientos-v2 .rec-v2-type-ask-reason {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #6e6e78;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-question {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions .btn {
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-change-type {
    background: var(--rec-v2-accent);
    border: 1px solid var(--rec-v2-accent);
    color: #fff;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-change-type:hover,
.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-change-type:focus {
    background: var(--rec-v2-accent-light);
    border-color: var(--rec-v2-accent-light);
    color: #fff;
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-keep-type {
    background: #fff;
    border: 1px solid #d8d8de;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-keep-type:hover,
.modal-reconocimientos-v2 .rec-v2-type-ask-actions .rec-v2-btn-keep-type:focus {
    background: #f7f7f9;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-message-chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7f7f9;
}

.modal-reconocimientos-v2 .rec-v2-message-chip-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    color: var(--rec-v2-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.modal-reconocimientos-v2 .rec-v2-message-chip-body {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-reconocimientos-v2 .rec-v2-message-chip-label {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-message-chip-text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    color: var(--rec-v2-text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal-reconocimientos-v2 .rec-v2-message-quote {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f7f9;
}

.modal-reconocimientos-v2 .rec-v2-message-quote-text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-message-quote .rec-v2-btn-edit-message {
    flex-shrink: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-inline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-inline-check--ok {
    color: #2d7a46;
}

.modal-reconocimientos-v2 .rec-v2-inline-check--ok::before {
    content: '✓';
    margin-right: 6px;
}

.modal-reconocimientos-v2 .rec-v2-inline-check--warn {
    color: #9a5b20;
}

.modal-reconocimientos-v2 .rec-v2-inline-check--warn::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border-radius: 50%;
    background: #d48a42;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.modal-reconocimientos-v2 .rec-v2-ready-copy {
    margin: 12px 0 0;
}

.modal-reconocimientos-v2 .rec-v2-ai-recipient-note {
    margin: 12px 0 0;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card--choice {
    width: 100%;
    margin: 0;
    text-align: left;
    cursor: pointer;
    background: #fff;
    align-items: flex-start;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card--choice:hover,
.modal-reconocimientos-v2 .rec-v2-ai-rec-card--choice:focus {
    border-color: var(--rec-v2-accent);
    outline: none;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card--selected {
    border-color: var(--rec-v2-accent);
    box-shadow: 0 0 0 1px var(--rec-v2-accent);
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 2px solid #c5c5cc;
    border-radius: 50%;
    background: #fff;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card--selected .rec-v2-ai-rec-radio {
    border-color: var(--rec-v2-accent);
    box-shadow: inset 0 0 0 4px var(--rec-v2-accent);
}

.modal-reconocimientos-v2 .rec-v2-result-type .rec-v2-ai-rec-choice-label--suggested::before {
    display: none;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-processing-hint {
    display: none !important;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-ai-processing {
    margin-top: 24px;
    text-align: center;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-processing-status {
    justify-content: center;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-review {
    margin-top: 0;
}

.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-review {
    margin-top: 0;
}

.modal-reconocimientos-v2.rec-v2-flow-step-3 .rec-v2-compose-guide {
    display: none;
}

.modal-reconocimientos-v2 .rec-v2-counter-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.modal-reconocimientos-v2 .rec-v2-review {
    margin-top: 22px;
}

.modal-reconocimientos-v2 .rec-v2-review-label {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
    line-height: 1.4;
}

.modal-reconocimientos-v2 .rec-v2-review-intro {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rec-v2-text);
    line-height: 1.45;
}

.modal-reconocimientos-v2 .rec-v2-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e6;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.modal-reconocimientos-v2 .rec-v2-criterion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid #e8e8ee;
    background: #fff;
    font-size: 13px;
    color: var(--rec-v2-text-muted);
    line-height: 1.3;
    text-align: left;
}

.modal-reconocimientos-v2 .rec-v2-criterion:last-child {
    border-bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-criterion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-reconocimientos-v2 .rec-v2-criterion-title {
    font-weight: 700;
    color: var(--rec-v2-text);
    line-height: 1.25;
}

.modal-reconocimientos-v2 .rec-v2-criterion-desc {
    font-size: 12px;
    font-weight: 400;
    color: #6e6e78;
    line-height: 1.45;
    flex: 1 1 auto;
}

.modal-reconocimientos-v2 .rec-v2-criterion-status {
    flex-shrink: 0;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.modal-reconocimientos-v2 .rec-v2-criterion-feedback {
    display: none;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-criterion-feedback>p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
}

.modal-reconocimientos-v2 .rec-v2-criterion-feedback>p:last-child {
    margin-bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-criterion-status--pending {
    color: #6e6e78;
    background: #f0f0f4;
}

.modal-reconocimientos-v2 .rec-v2-criterion-status--ok {
    color: #2d7a46;
    background: #e3f4e8;
}

.modal-reconocimientos-v2 .rec-v2-criterion-status--warn {
    color: #9a5b20;
    background: #fceee0;
}

.modal-reconocimientos-v2 .rec-v2-criterion--ok {
    background: #f8fcf9;
}

.modal-reconocimientos-v2 .rec-v2-criterion--warn {
    background: #fffcf8;
}

.modal-reconocimientos-v2 .rec-v2-criterion--pending {
    background: #fafafa;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome {
    position: relative;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid #e0e0e6;
    border-radius: 12px;
    background: #fafafa;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome::before,
.modal-reconocimientos-v2 .rec-v2-ai-outcome::after {
    content: '';
    position: absolute;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome::before {
    top: -10px;
    border-bottom: 10px solid #e0e0e6;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome::after {
    top: -8px;
    border-bottom: 9px solid #fafafa;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--success {
    border-color: #b8e0c4;
    background: #eef8f1;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--success::before {
    border-bottom-color: #b8e0c4;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--success::after {
    border-bottom-color: #eef8f1;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--warn {
    border-color: #ecd0b0;
    background: #fdf6ee;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--warn::before {
    border-bottom-color: #ecd0b0;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--warn::after {
    border-bottom-color: #fdf6ee;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome-icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--success .rec-v2-ai-outcome-icon {
    background: #3d9a5c;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--success .rec-v2-ai-outcome-icon::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--warn .rec-v2-ai-outcome-icon {
    background: #d48a42;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome--warn .rec-v2-ai-outcome-icon::after {
    content: '!';
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--rec-v2-text);
    line-height: 1.3;
}

.modal-reconocimientos-v2 .rec-v2-ai-outcome-sub {
    margin: 0;
    font-size: 13px;
    color: #6e6e78;
    line-height: 1.45;
}

.modal-reconocimientos-v2 .rec-v2-ai-result {
    margin-top: 14px;
}

.modal-reconocimientos-v2 .rec-v2-ai-result:empty {
    display: none;
}

.modal-reconocimientos-v2 .rec-v2-ai-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e0e0e6;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #8a8a8a;
    white-space: nowrap;
}

.modal-reconocimientos-v2 .rec-v2-ai-result>.alert {
    margin-bottom: 12px;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel {
    padding: 18px;
    border-radius: 14px;
    border: 1px solid #ecd0b0;
    background: #fdf6ee;
    text-align: left;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel-head {
    margin-bottom: 10px;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #6b4423;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #ececf0;
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite-label {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9a5b20;
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite-text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite-text:last-child {
    margin-bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-pending-suggestion {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #ecd0b0;
    background: #fdf6ee;
    text-align: left;
}

.modal-reconocimientos-v2 .rec-v2-pending-suggestion-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #6b4423;
}

.modal-reconocimientos-v2 .rec-v2-pending-suggestion-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-btn-use-suggestion {
    background-color: var(--rec-v2-accent);
    border-color: var(--rec-v2-accent);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
}

.modal-reconocimientos-v2 .rec-v2-btn-use-suggestion:hover,
.modal-reconocimientos-v2 .rec-v2-btn-use-suggestion:focus {
    background-color: var(--rec-v2-accent-dark);
    border-color: var(--rec-v2-accent-dark);
    color: #fff;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-pending-suggestion,
.modal-reconocimientos-v2.rec-v2-has-result .rec-v2-pending-suggestion {
    display: none !important;
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rewrite-actions .btn-default {
    background: #3d3d45;
    border-color: #3d3d45;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-label {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #8a8a8a;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-suggestions {
    margin-top: 14px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-intro {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-list>li {
    min-width: 0;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e0e0e6;
    background: #fff;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card--current {
    border-color: #d8d8de;
    background: #fcfcfd;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-choice-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #8a8a8a;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-choice-label--suggested {
    color: #2d7a46;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-choice-label--suggested::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #57a670;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-artwork {
    display: flex;
    flex: 0 0 34%;
    align-items: center;
    justify-content: center;
    min-width: 76px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-artwork img,
.modal-reconocimientos-v2 .rec-v2-ai-rec-artwork svg {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-artwork-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0f0f4;
    color: var(--rec-v2-accent);
    font-size: 28px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-name {
    font-weight: 700;
    color: var(--rec-v2-text);
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #efeff3;
    color: var(--rec-v2-text-muted);
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-reason {
    font-size: 12px;
    line-height: 1.4;
    color: #6e6e78;
}

.modal-reconocimientos-v2 .rec-v2-btn-select-rec {
    width: 100%;
    margin-top: auto;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
}

.modal-reconocimientos-v2 .rec-v2-btn-keep-rec {
    width: 100%;
    margin-top: auto;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-actions,
.modal-reconocimientos-v2 .rec-v2-ai-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel-actions .btn-primary {
    background-color: var(--rec-v2-accent);
    border-color: var(--rec-v2-accent);
    border-radius: 10px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-ai-panel-actions .btn-link {
    font-weight: 600;
    color: var(--rec-v2-accent);
}

.modal-reconocimientos-v2 .rec-v2-ai-rec-actions .btn-default {
    background: #3d3d45;
    border-color: #3d3d45;
    color: #fff;
    border-radius: 10px;
}

.modal-reconocimientos-v2 .rec-v2-footer-hint--info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-reconocimientos-v2 .rec-v2-footer-hint--info::before {
    content: 'i';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #c5c5cc;
    font-size: 11px;
    font-style: italic;
    color: #8a8a8a;
    flex-shrink: 0;
}

.modal-reconocimientos-v2 .rec-v2-btn-primary-action.disabled {
    background-color: #ececf0 !important;
    border-color: #e0e0e6 !important;
    color: #a3a3ad !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-reconocimientos-v2 .rec-v2-btn-primary-action.rec-v2-can-send {
    pointer-events: auto;
    background-color: var(--rec-v2-accent) !important;
    border-color: var(--rec-v2-accent) !important;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-mensaje-hint {
    display: none;
}

.modal.modal-reconocimientos-v2 .rec-v2-textarea--locked {
    background-color: #f7f7f9;
    color: #6f6f78;
    cursor: default;
    border-color: #e0e0e6;
}

.modal-reconocimientos-v2 .rec-v2-ai-processing {
    margin-top: 28px;
    text-align: center;
}

.modal-reconocimientos-v2 .rec-v2-processing-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rec-v2-text);
    margin-bottom: 6px;
}

.modal-reconocimientos-v2 .rec-v2-processing-hint {
    margin: 0 0 18px;
    font-size: 13px;
    color: #6f6f78;
    line-height: 1.4;
}

.modal-reconocimientos-v2 .rec-v2-processing-spinner,
.modal-reconocimientos-v2 .rec-v2-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #d8d8de;
    border-top-color: var(--rec-v2-accent);
    border-radius: 50%;
    animation: rec-v2-spin 0.75s linear infinite;
    vertical-align: middle;
}

@keyframes rec-v2-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loader de la revisión con IA: tres destellos que titilan a destiempo */
.modal-reconocimientos-v2 .rec-v2-processing-sparkles {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.modal-reconocimientos-v2 .rec-v2-sparkle {
    position: absolute;
    fill: var(--rec-v2-accent);
    animation: rec-v2-sparkle 1.6s ease-in-out infinite;
}

.modal-reconocimientos-v2 .rec-v2-sparkle--lg {
    width: 20px;
    height: 20px;
    left: 0;
    bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-sparkle--sm {
    width: 11px;
    height: 11px;
    right: 1px;
    top: 0;
    fill: var(--rec-v2-accent-light);
    animation-delay: .4s;
}

.modal-reconocimientos-v2 .rec-v2-sparkle--xs {
    width: 7px;
    height: 7px;
    right: 3px;
    bottom: 3px;
    animation-delay: .8s;
}

@keyframes rec-v2-sparkle {
    0%, 100% {
        opacity: .35;
        transform: scale(.7) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(20deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-reconocimientos-v2 .rec-v2-sparkle {
        animation: none;
        opacity: 1;
    }
}

.modal-reconocimientos-v2 .rec-v2-skeleton-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    text-align: left;
    border: 1px solid #ececf0;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8fa;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 16px 18px;
    border-bottom: 1px solid #ececf0;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-row:last-child {
    border-bottom: 0;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e8e8ec 0%, #f5f5f8 50%, #e8e8ec 100%);
    background-size: 200% 100%;
    animation: rec-v2-shimmer 1.2s ease-in-out infinite;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar--title {
    width: 28%;
    max-width: 150px;
    height: 12px;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar--title-long {
    width: 38%;
    max-width: 205px;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar--status {
    width: 72px;
    height: 20px;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar--text {
    width: 66%;
    height: 8px;
}

.modal-reconocimientos-v2 .rec-v2-skeleton-bar--text-short {
    width: 55%;
}

@keyframes rec-v2-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.modal-reconocimientos-v2 .rec-v2-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e8e8ec;
}

.modal-reconocimientos-v2 .rec-v2-footer-note {
    display: none;
    margin: 0;
    flex: 1 1 200px;
    font-size: 13px;
    color: #8a8a8a;
    text-align: left;
}

.modal-reconocimientos-v2.rec-v2-analyzing .rec-v2-footer-note {
    display: block;
}

/* Aviso que bloquea o explica el envío (corchetes sin completar, mismo mensaje, etc.):
   más visible y con un destello suave cada tanto para que no pase desapercibido */
.modal-reconocimientos-v2 .rec-v2-footer-note.rec-v2-footer-hint--info {
    display: flex;
    flex: 0 1 auto;
    padding: 7px 12px;
    border: 1px solid var(--rec-v2-warn-border);
    border-radius: 10px;
    background: var(--rec-v2-warn-bg);
    color: var(--rec-v2-warn-text);
    font-weight: 600;
    animation: rec-v2-hint-flash 5s ease-in-out infinite;
}

.modal-reconocimientos-v2 .rec-v2-footer-note.rec-v2-footer-hint--info::before {
    border-color: var(--rec-v2-warn-text);
    color: var(--rec-v2-warn-text);
    font-weight: 700;
}

@keyframes rec-v2-hint-flash {
    0%, 70%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
    80% {
        box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.22);
    }
    90% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-reconocimientos-v2 .rec-v2-footer-note.rec-v2-footer-hint--info {
        animation: none;
    }
}

.modal-reconocimientos-v2 .rec-v2-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.modal-reconocimientos-v2 .rec-v2-footer .btnEnviar.rec-v2-btn-reviewing,
.modal-reconocimientos-v2 .rec-v2-footer .btnEnviar.rec-v2-btn-reviewing:hover,
.modal-reconocimientos-v2 .rec-v2-footer .btnEnviar.rec-v2-btn-reviewing:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 22px;
    background-color: #c5c5cc !important;
    border-color: #c5c5cc !important;
    color: #fff !important;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1 !important;
    pointer-events: none;
}

.modal-reconocimientos-v2 .rec-v2-btn-reviewing-label {
    display: inline-block;
}

.modal-reconocimientos-v2 .rec-v2-footer .btnEnviar.rec-v2-btn-reviewing .rec-v2-btn-spinner {
    flex-shrink: 0;
    margin-right: 4px;
}

.modal-reconocimientos-v2 .rec-v2-footer .btn-default {
    background: #fff;
    border: 1px solid #d8d8de;
    color: var(--rec-v2-text);
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 600;
}

.modal-reconocimientos-v2 .rec-v2-footer .btn-primary {
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 700;
}

.modal-reconocimientos-v2 .justificativo {
    text-align: left;
    margin-bottom: 20px;
}

.modal-reconocimientos-v2 .justificativo label {
    font-weight: 600;
    font-size: 14px;
}

.modal-reconocimientos-v2 .form-otorgamiento .otorgamiento-selector h4.rec-v2-mode-title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 16px;
}

.modal-reconocimientos-v2 .reconocimientos-list {
    text-align: left;
}

@media (max-width: 640px) {
    .modal.modal-reconocimientos-v2 .modal-dialog {
        width: auto;
        margin: 12px;
    }

    .modal-reconocimientos-v2 .rec-v2-modal-header,
    .modal-reconocimientos-v2 .rec-v2-modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .modal-reconocimientos-v2 .rec-v2-review-list,
    .modal-reconocimientos-v2 .rec-v2-skeleton-list {
        flex-direction: column;
    }

    .modal-reconocimientos-v2 .rec-v2-criterion,
    .modal-reconocimientos-v2 .rec-v2-skeleton-row {
        flex: 1 1 auto;
        width: 100%;
    }

    .modal-reconocimientos-v2 .rec-v2-criterion-head {
        flex-wrap: wrap;
    }

    .modal-reconocimientos-v2 .rec-v2-criterion-status {
        white-space: normal;
        text-align: right;
        max-width: 52%;
    }

    .modal.modal-reconocimientos-v2 .rec-v2-message-toggle {
        display: inline-block;
    }

    .modal-reconocimientos-v2 .rec-v2-message-collapsed:not(.rec-v2-message-expanded) .rec-v2-textarea--feedback,
    .modal-reconocimientos-v2 .rec-v2-message-collapsed:not(.rec-v2-message-expanded) .rec-v2-textarea-meta {
        display: none;
    }

    .modal-reconocimientos-v2 .rec-v2-ai-rec-list {
        grid-template-columns: 1fr;
    }

    .modal-reconocimientos-v2 .rec-v2-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-reconocimientos-v2 .rec-v2-footer-actions {
        flex-direction: column-reverse;
        width: 100%;
    }

    .modal-reconocimientos-v2 .rec-v2-footer .btn {
        width: 100%;
        text-align: center;
    }
}