/* ================================================================
 *  reclamos.css — Estilos propios del módulo de reclamos NETLATIN
 *
 *  Convención BEM con prefijo `rec-` para evitar choques con
 *  cualquier otro CSS del sistema.
 *
 *  Pensado para ser autosuficiente: no depende de Bootstrap.
 *  Ubicación recomendada: /css/reclamos.css  (sirve para cliente y staff)
 * ================================================================ */


/* === Variables (paleta del módulo) === */
:root {
    --rec-color-primary:        #0d6efd;
    --rec-color-primary-hover:  #0a58ca;
    --rec-color-primary-soft:   #E6F1FB;
    --rec-color-primary-dark:   #042C53;
    --rec-color-success:        #198754;
    --rec-color-success-bg:     #d1e7dd;
    --rec-color-success-soft:   #EAF3DE;
    --rec-color-warning:        #ffc107;
    --rec-color-warning-bg:     #fff3cd;
    --rec-color-warning-soft:   #FAEEDA;
    --rec-color-danger:         #dc3545;
    --rec-color-danger-bg:      #f8d7da;
    --rec-color-danger-soft:    #FCEBEB;
    --rec-color-info:           #0dcaf0;
    --rec-color-info-bg:        #cff4fc;
    --rec-color-critical:       #7c0000;
    --rec-color-critical-bg:    #ffe5e5;
    --rec-color-muted:          #6c757d;
    --rec-color-text:           #212529;
    --rec-color-text-soft:      #5F5E5A;
    --rec-color-border:         #dee2e6;
    --rec-color-border-soft:    #eef0f2;
    --rec-color-card-bg:        #ffffff;
    --rec-color-page-bg:        #f8f9fa;
    --rec-radius:               12px;
    --rec-radius-sm:            6px;
    --rec-radius-lg:            16px;
    --rec-spacing:              16px;
    --rec-spacing-sm:           8px;
    --rec-spacing-lg:           24px;
    --rec-font:                 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rec-shadow:               0 1px 2px rgba(0, 0, 0, 0.04);
}


/* === Layout (grid simple) === */
.rec-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rec-spacing);
    margin-bottom: var(--rec-spacing);
}
.rec-col      { flex: 1 1 100%; min-width: 0; }
.rec-col-half { flex: 1 1 calc(50% - var(--rec-spacing) / 2); min-width: 280px; }
.rec-col-4    { flex: 1 1 calc(33.33% - var(--rec-spacing) * 2/3); min-width: 240px; }
.rec-col-5    { flex: 1 1 calc(41.67% - var(--rec-spacing) / 2); min-width: 280px; }
.rec-col-7    { flex: 1 1 calc(58.33% - var(--rec-spacing) / 2); min-width: 280px; }
.rec-col-8    { flex: 1 1 calc(66.66% - var(--rec-spacing) * 1/3); min-width: 280px; }

@media (max-width: 768px) {
    .rec-col-half, .rec-col-7, .rec-col-5, .rec-col-4, .rec-col-8 { flex-basis: 100%; }
}


/* === Card === */
.rec-card {
    background: var(--rec-color-card-bg);
    border: 1px solid var(--rec-color-border-soft);
    border-radius: var(--rec-radius);
    box-shadow: var(--rec-shadow);
    overflow: hidden;
    font-family: var(--rec-font);
    color: var(--rec-color-text);
    margin-bottom: var(--rec-spacing);
}
.rec-card__header {
    padding: 12px var(--rec-spacing);
    border-bottom: 1px solid var(--rec-color-border-soft);
    font-weight: 500;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: var(--rec-spacing-sm);
    background: #fcfcfc;
}
.rec-card__header i {
    font-size: 1.1em;
    color: var(--rec-color-muted);
}
.rec-card__header-actions {
    margin-left: auto;
}
.rec-card__body {
    padding: var(--rec-spacing);
}
.rec-card__body--flush {
    padding: 0;
}
.rec-card__footer {
    padding: 12px var(--rec-spacing);
    border-top: 1px solid var(--rec-color-border-soft);
    background: #fcfcfc;
}


/* === Formularios === */
.rec-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875em;
    font-weight: 500;
    color: var(--rec-color-text);
}
.rec-label__hint {
    font-weight: normal;
    color: var(--rec-color-muted);
    font-size: 0.85em;
}
.rec-input,
.rec-textarea,
.rec-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95em;
    font-family: inherit;
    border: 1px solid var(--rec-color-border);
    border-radius: var(--rec-radius-sm);
    background: #fff;
    color: var(--rec-color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.rec-input:focus,
.rec-textarea:focus,
.rec-select:focus {
    outline: 0;
    border-color: var(--rec-color-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.rec-input--sm { padding: 4px 8px; font-size: 0.85em; }
.rec-textarea  { resize: vertical; min-height: 64px; line-height: 1.5; }
.rec-input[readonly], .rec-textarea[readonly] {
    background: #f8f9fa;
    color: var(--rec-color-muted);
}
.rec-field {
    margin-bottom: var(--rec-spacing);
}
.rec-field__help {
    margin-top: 4px;
    font-size: 0.82em;
    color: var(--rec-color-muted);
}
.rec-fieldset {
    margin-top: var(--rec-spacing);
    padding-top: var(--rec-spacing);
    border-top: 1px solid var(--rec-color-border-soft);
}
.rec-fieldset__title {
    text-transform: uppercase;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--rec-color-muted);
    margin: 0 0 var(--rec-spacing-sm);
}
.rec-counter {
    text-align: right;
    font-size: 0.78em;
    color: var(--rec-color-muted);
    margin-top: 2px;
}


/* === Botones === */
.rec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.92em;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: var(--rec-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.rec-btn:disabled,
.rec-btn[aria-busy="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}
.rec-btn--sm        { padding: 4px 12px; font-size: 0.82em; }
.rec-btn--block     { width: 100%; }
.rec-btn--primary   { background: var(--rec-color-primary); color: #fff; border-color: var(--rec-color-primary); }
.rec-btn--primary:hover { background: var(--rec-color-primary-hover); border-color: var(--rec-color-primary-hover); }
.rec-btn--success   { background: var(--rec-color-success); color: #fff; border-color: var(--rec-color-success); }
.rec-btn--danger    { background: var(--rec-color-danger);  color: #fff; border-color: var(--rec-color-danger); }
.rec-btn--ghost {
    background: transparent;
    color: var(--rec-color-text);
    border-color: var(--rec-color-border);
}
.rec-btn--ghost:hover { background: #f1f3f5; }
.rec-btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--rec-color-primary);
    padding: 4px 8px;
}
.rec-btn--link:hover { text-decoration: underline; }


/* === Alert / mensaje === */
.rec-alert {
    padding: 12px 16px;
    border-radius: var(--rec-radius-sm);
    border: 1px solid transparent;
    margin-bottom: var(--rec-spacing);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92em;
    line-height: 1.5;
}
.rec-alert i {
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 1px;
}
.rec-alert--info    { background: #E6F1FB; border-color: #B5D4F4; color: #0C447C; }
.rec-alert--success { background: #EAF3DE; border-color: #C0DD97; color: #27500A; }
.rec-alert--warning { background: #FAEEDA; border-color: #FAC775; color: #633806; }
.rec-alert--danger  { background: #FCEBEB; border-color: #F7C1C1; color: #791F1F; }


/* === Texto utilitario === */
.rec-text--muted    { color: var(--rec-color-muted); }
.rec-text--success  { color: var(--rec-color-success); }
.rec-text--warning  { color: #663d00; }
.rec-text--danger   { color: var(--rec-color-danger); }
.rec-text--small    { font-size: 0.85em; }
.rec-text--bold     { font-weight: 500; }
.rec-text--center   { text-align: center; }
.rec-text--right    { text-align: right; }


/* === Tabla === */
.rec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.rec-table thead th {
    background: #fcfcfc;
    text-align: left;
    padding: 10px 14px;
    font-weight: 500;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--rec-color-muted);
    border-bottom: 1px solid var(--rec-color-border-soft);
}
.rec-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rec-color-border-soft);
    vertical-align: middle;
}
.rec-table tbody tr:hover { background: #fafbfc; }
.rec-table tbody tr:last-child td { border-bottom: 0; }
.rec-table--scroll {
    overflow-x: auto;
}


/* === Badges === */
.rec-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.rec-badge--neutral   { background: #F1EFE8;  color: #5F5E5A; }
.rec-badge--pending   { background: #FAEEDA;  color: #854F0B; }
.rec-badge--process   { background: #E6F1FB;  color: #185FA5; }
.rec-badge--success   { background: #EAF3DE;  color: #3B6D11; }
.rec-badge--cancel    { background: #F1EFE8;  color: #5F5E5A; }
.rec-badge--danger    { background: #FCEBEB;  color: #A32D2D; }
.rec-badge--critical  { background: #FCEBEB;  color: #501313; font-weight: 600; }
.rec-badge--count {
    background: #F1EFE8;
    color: #5F5E5A;
    font-size: 0.72em;
    padding: 2px 8px;
}


/* === Definition list para datos === */
.rec-dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 12px;
    font-size: 0.92em;
    margin: 0;
}
.rec-dl dt {
    color: var(--rec-color-muted);
    font-weight: 400;
}
.rec-dl dd {
    margin: 0;
    color: var(--rec-color-text);
}


/* === Stacks === */
.rec-stack-h { display: flex; align-items: center; gap: var(--rec-spacing-sm); flex-wrap: wrap; }
.rec-stack-v { display: flex; flex-direction: column; gap: var(--rec-spacing-sm); }
.rec-divider {
    border: 0;
    border-top: 1px solid var(--rec-color-border-soft);
    margin: var(--rec-spacing) 0;
}


/* === Conversación (chat) === */
.rec-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--rec-spacing);
}
.rec-chat__msg {
    display: flex;
    max-width: 100%;
}
.rec-chat__msg--cliente  { justify-content: flex-start; }
.rec-chat__msg--staff    { justify-content: flex-end; }
.rec-chat__bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.92em;
    line-height: 1.5;
    max-width: 78%;
}
.rec-chat__msg--cliente .rec-chat__bubble {
    background: #f3f4f6;
    border-top-left-radius: 4px;
    color: var(--rec-color-text);
}
.rec-chat__msg--staff .rec-chat__bubble {
    background: var(--rec-color-primary-soft);
    border-top-right-radius: 4px;
    color: var(--rec-color-primary-dark);
}
.rec-chat__meta {
    font-size: 0.78em;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rec-chat__msg--staff .rec-chat__meta {
    color: var(--rec-color-primary);
}
.rec-chat__time {
    font-weight: 400;
    color: var(--rec-color-muted);
    margin-left: 6px;
}
.rec-chat__text {
    white-space: pre-wrap;
    word-break: break-word;
}
.rec-chat__empty {
    text-align: center;
    color: var(--rec-color-muted);
    padding: var(--rec-spacing) 0;
    font-size: 0.9em;
}


/* === Lista de adjuntos === */
.rec-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.rec-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--rec-color-border-soft);
    border-radius: var(--rec-radius-sm);
    text-decoration: none;
    color: var(--rec-color-text);
    transition: border-color 0.15s, background 0.15s;
}
.rec-attachment:hover {
    border-color: var(--rec-color-primary);
    background: #fafbfc;
}
.rec-attachment__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--rec-color-primary-soft);
    color: var(--rec-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    flex-shrink: 0;
}
.rec-attachment__body {
    min-width: 0;
    flex: 1;
}
.rec-attachment__name {
    font-size: 0.88em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-attachment__size {
    font-size: 0.78em;
    color: var(--rec-color-muted);
}


/* === Niveles de escalamiento === */
.rec-row-level-0 { /* normal */ }
.rec-row-level-1 { background: rgba(255, 193, 7, 0.08); }
.rec-row-level-2 { background: rgba(220, 53, 69, 0.10); }
.rec-row-level-3 { background: rgba(124, 0, 0, 0.13); font-weight: 500; }


/* === Empty state === */
.rec-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--rec-color-muted);
}
.rec-empty i {
    font-size: 2.5em;
    opacity: 0.4;
    display: block;
    margin-bottom: 8px;
}
.rec-empty__msg {
    margin: 0 0 4px;
}


/* === Page header === */
.rec-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rec-spacing);
    margin-bottom: var(--rec-spacing);
    flex-wrap: wrap;
}
.rec-page-actions__title {
    display: flex;
    align-items: center;
    gap: var(--rec-spacing-sm);
    font-size: 1.1em;
    font-weight: 500;
    margin: 0;
}
.rec-page-actions__actions {
    display: flex;
    gap: var(--rec-spacing-sm);
    align-items: center;
}

/* ============================================================
 *  AGREGAR AL FINAL de /css/reclamos.css
 *  Estilos para el timeline de notas internas
 * ============================================================ */


/* === Notas internas (timeline) === */
.rec-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rec-note {
    padding: 10px 14px;
    background: #fcfcfa;
    border-left: 3px solid #f4d35e;
    border-radius: 4px 8px 8px 4px;
    font-size: 0.92em;
}
.rec-note__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    margin-bottom: 4px;
    color: var(--rec-color-text-soft);
}
.rec-note__head i { font-size: 0.95em; }
.rec-note__author {
    font-weight: 500;
    color: var(--rec-color-text);
}
.rec-note__time {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--rec-color-muted);
}
.rec-note__body {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}
.rec-notes__empty {
    text-align: center;
    color: var(--rec-color-muted);
    padding: 16px 0;
    font-size: 0.9em;
    font-style: italic;
}
.rec-notes__divider {
    margin: 16px -16px 12px;
    border: 0;
    border-top: 1px solid var(--rec-color-border-soft);
}

/* ============================================================
 *  AGREGAR AL FINAL de /css/reclamos.css
 *
 *  Estilos para:
 *  - Campanita del staff (rec-bell-*)
 *  - Card de asignación / transferencia (rec-assign-*)
 * ============================================================ */


/* === Campanita de notificaciones (staff y cliente) === */
.rec-bell {
    position: relative;
    display: inline-block;
}
.rec-bell__btn {
    background: transparent;
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    position: relative;
    color: inherit;
    line-height: 1;
}
.rec-bell__btn:hover { opacity: 0.75; }
.rec-bell__btn i { font-size: 1.2em; }
.rec-bell__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--rec-color-danger);
    color: #fff;
    border-radius: 9px;
    font-size: 0.65em;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.rec-bell__badge--hidden { display: none; }

.rec-bell__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 340px;
    max-width: 90vw;
    max-height: 480px;
    background: #fff;
    border: 1px solid var(--rec-color-border);
    border-radius: var(--rec-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 1000;
    display: none;
    flex-direction: column;
}
.rec-bell--open .rec-bell__panel { display: flex; }
.rec-bell__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rec-color-border-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.rec-bell__head i { color: var(--rec-color-muted); }
.rec-bell__list {
    overflow-y: auto;
    flex: 1;
    min-height: 60px;
}
.rec-bell__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rec-color-border-soft);
    text-decoration: none;
    color: var(--rec-color-text);
    font-size: 0.88em;
    transition: background 0.1s;
}
.rec-bell__item:hover { background: #fafbfc; }
.rec-bell__item:last-child { border-bottom: 0; }
.rec-bell__item-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rec-bell__item-meta {
    font-size: 0.85em;
    color: var(--rec-color-muted);
}
.rec-bell__item-preview {
    font-size: 0.85em;
    color: var(--rec-color-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-bell__item-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.75em;
    font-weight: 500;
}
.rec-bell__item-pill--nuevo  { background: var(--rec-color-warning-bg); color: #854F0B; }
.rec-bell__item-pill--mensaje{ background: var(--rec-color-primary-soft); color: var(--rec-color-primary); }
.rec-bell__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--rec-color-muted);
    font-size: 0.88em;
}


/* === Card de asignación (lateral derecho) === */
.rec-assign__operator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    border-radius: var(--rec-radius-sm);
    margin-bottom: 10px;
}
.rec-assign__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rec-color-primary-soft);
    color: var(--rec-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    flex-shrink: 0;
}
.rec-assign__avatar--empty {
    background: var(--rec-color-warning-bg);
    color: #854F0B;
}
.rec-assign__info {
    flex: 1;
    min-width: 0;
}
.rec-assign__name {
    font-weight: 500;
    font-size: 0.95em;
}
.rec-assign__since {
    font-size: 0.82em;
    color: var(--rec-color-muted);
}


/* === Historial de transferencias (timeline simple) === */
.rec-transfer-log {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rec-color-border-soft);
    font-size: 0.82em;
}
.rec-transfer-log__title {
    text-transform: uppercase;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--rec-color-muted);
    margin: 0 0 6px;
}
.rec-transfer-log__item {
    color: var(--rec-color-text-soft);
    padding: 3px 0;
}
.rec-transfer-log__item i { color: var(--rec-color-muted); margin-right: 4px; }