/* Theming corporativo MesaHelpdesk AgentWorkspace */

html, body {
    margin: 0;
    padding: 0;
    background-color: #F7F8FA;
    color: #1E1E1E;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Login: tarjeta centrada con sombra suave. */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A3A5C 0%, #2E7D5E 100%);
    padding: 1rem;
}

.login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.20);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.login-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-brand h1 {
    color: #1A3A5C;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.login-brand p {
    color: #6B7280;
    font-size: 0.875rem;
    margin: 0.5rem 0 0 0;
}

/* ADR 0025: inicio de sesión con Google Workspace. */
.login-google {
    text-transform: none;
    font-weight: 500;
}

.login-hint {
    color: #6B7280;
    font-size: 0.75rem;
    text-align: center;
    margin: 0.5rem 0 0 0;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #6B7280;
    font-size: 0.75rem;
    margin: 1.25rem 0 1rem 0;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #E5E7EB;
}

.login-sso-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    padding: 1rem 0;
}

/* Chip de status. Colores parametrizados como CSS vars para evitar repetir literales. */
.status-chip {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* Timeline de comentarios en TicketDetail. */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.comment-bubble {
    background-color: #F1F4F8;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border-left: 3px solid #1A3A5C;
}

.comment-author {
    font-weight: 600;
    color: #1A3A5C;
}

.comment-time {
    color: #6B7280;
    font-size: 0.75rem;
}

/* IA preview (ADR 0018): badge discreto que identifica todo contenido generado por IA (transparencia, ADR 0008). */
.ai-badge {
    display: inline-block;
    padding: 0 0.4rem;
    margin-right: 0.35rem;
    border-radius: 4px;
    background-color: #2E7D5E;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4rem;
    vertical-align: middle;
}

.ai-suggestion {
    color: #374151;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ai-summary-card {
    border-left: 3px solid #2E7D5E;
    background-color: #F3F8F6;
}

.ai-summary-line {
    margin: 0 0 0.35rem 0;
}

/* Aviso de cierre por inactividad (SessionGuard, ADR 0021): esquina inferior, por encima del contenido. */
.session-idle-warning {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1500;
    max-width: 360px;
}

/* =====================================================================================================
   AgentWorkspace — shell y colas de tickets.
   Paleta corporativa: navy #1A3A5C, verde #2E7D5E. Todos los pares texto/fondo de chips y etiquetas
   cumplen WCAG 2.1 AA (>= 4.5:1, verificados); el foco usa un anillo de 2 px con contraste >= 3:1.
   Sin gradientes, sin sombras grandes: superficies planas con borde de 1 px.
   ===================================================================================================== */

:root {
    --aw-navy: #1A3A5C;
    --aw-navy-700: #24476B;
    --aw-navy-50: #E6EDF5;
    --aw-green: #2E7D5E;
    --aw-green-50: #E1F2EA;
    --aw-ink: #1E1E1E;
    --aw-muted: #5B6472;
    --aw-line: #E1E5EA;
    --aw-surface: #FFFFFF;
    --aw-canvas: #F6F7F9;
    --aw-focus: #2E7D5E;
    --aw-radius: 6px;
    --aw-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

html, body {
    background-color: var(--aw-canvas);
}

.aw-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Foco visible y consistente en todo lo interactivo propio. */
.aw-table tr[data-ticket-row]:focus-visible,
.aw-nav__link:focus-visible,
.aw-sort:focus-visible,
.aw-user:focus-visible,
.aw-brand:focus-visible,
.aw-breadcrumb a:focus-visible,
.aw-pagesize select:focus-visible,
.aw-skip-link:focus {
    outline: 2px solid var(--aw-focus);
    outline-offset: 2px;
}

.aw-skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 2000;
    background: var(--aw-surface);
    color: var(--aw-navy);
    padding: 8px 12px;
    border-radius: var(--aw-radius);
    font-weight: 600;
    text-decoration: none;
}

.aw-skip-link:focus {
    top: 8px;
}

/* ---------------------------------------------------------------- app bar */

.aw-appbar {
    border-bottom: 1px solid #0F2740;
}

.aw-appbar .mud-toolbar {
    gap: 12px;
}

.aw-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 4px;
}

.aw-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #FFFFFF;
    color: var(--aw-navy);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
}

.aw-brand__name {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.aw-tenant {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--aw-navy-700);
    color: #DCE7F2;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--aw-mono);
}

.aw-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
    padding: 4px 6px 4px 4px;
    border-radius: var(--aw-radius);
    font: inherit;
}

.aw-user:hover {
    background: rgba(255, 255, 255, 0.08);
}

.aw-user__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.aw-user__name {
    font-size: 0.8125rem;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-user__role {
    font-size: 0.6875rem;
    color: #C9D7E6;
}

.aw-user-card {
    padding: 10px 16px 8px;
    min-width: 220px;
}

.aw-user-card__name {
    margin: 0;
    font-weight: 600;
    color: var(--aw-ink);
}

.aw-user-card__meta {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--aw-muted);
}

/* ---------------------------------------------------------------- drawer / navegación de colas */

.aw-drawer {
    border-right: 1px solid var(--aw-line);
}

.aw-nav {
    padding: 14px 10px 24px;
}

.aw-nav__heading {
    margin: 14px 10px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aw-muted);
}

.aw-nav__heading:first-child {
    margin-top: 0;
}

.aw-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aw-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--aw-radius);
    color: var(--aw-ink);
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
}

.aw-nav__link .mud-icon-root {
    color: var(--aw-muted);
}

.aw-nav__link:hover {
    background: var(--aw-canvas);
}

.aw-nav__link--active {
    background: var(--aw-navy-50);
    color: var(--aw-navy);
    font-weight: 600;
    border-left-color: var(--aw-navy);
}

.aw-nav__link--active .mud-icon-root {
    color: var(--aw-navy);
}

.aw-nav__link--disabled {
    color: var(--aw-muted);
    cursor: not-allowed;
}

.aw-nav__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-nav__count {
    min-width: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #ECEEF1;
    color: #3D4652;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.aw-nav__count--attention {
    background: var(--aw-green);
    color: #FFFFFF;
}

.aw-nav__soon {
    font-size: 0.6875rem;
    color: var(--aw-muted);
    background: #F0F2F5;
    border-radius: 4px;
    padding: 0 6px;
}

/* ---------------------------------------------------------------- página */

.aw-main {
    padding: 16px 24px 32px;
    outline: none;
    max-width: 1600px;
}

.aw-breadcrumb ol {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--aw-muted);
}

.aw-breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    color: #9AA3AE;
}

.aw-breadcrumb a {
    color: var(--aw-navy);
    text-decoration: none;
}

.aw-breadcrumb a:hover {
    text-decoration: underline;
}

.aw-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.aw-page-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--aw-ink);
    outline: none;
}

.aw-page-subtitle {
    margin: 2px 0 0;
    color: var(--aw-muted);
    font-size: 0.8125rem;
}

.aw-refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--aw-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.aw-refresh__warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #9F1C14;
}

/* ---------------------------------------------------------------- toolbar */

.aw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.aw-toolbar__search {
    flex: 1 1 360px;
    max-width: 520px;
    /* Los MudSelect con label "outlined" reservan 8 px arriba para la etiqueta; se alinea la búsqueda con ellos. */
    margin-top: 8px;
}

.aw-toolbar__filter {
    flex: 0 1 200px;
    min-width: 170px;
}

.aw-toolbar__clear {
    margin-top: 14px;
}

.aw-toolbar .mud-input-control {
    margin-top: 0;
}

.aw-toolbar .mud-input-outlined {
    background: var(--aw-surface);
}

.aw-toolbar .mud-input-helper-text {
    color: var(--aw-muted);
}

/* ---------------------------------------------------------------- productos (ADR 0023) */

.aw-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 12px;
}

.aw-products__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid #C5CCD5;
    border-radius: 16px;
    background: var(--aw-surface);
    color: var(--aw-ink);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.aw-products__chip:hover {
    border-color: var(--aw-navy);
}

.aw-products__chip:focus-visible {
    outline: 2px solid var(--aw-focus);
    outline-offset: 2px;
}

.aw-products__chip--on {
    background: var(--aw-navy);
    border-color: var(--aw-navy);
    color: #FFFFFF;
}

.aw-products__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--aw-navy-50);
    color: var(--aw-navy);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.aw-products__chip--on .aw-products__count {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.aw-product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: var(--aw-ink);
}

.aw-product__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-product--compact {
    font-size: 0.75rem;
}

.aw-product--unknown {
    color: var(--aw-muted);
    font-style: italic;
}

.aw-product__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--aw-muted);
}

.product-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--aw-line);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-chip__none {
    color: var(--aw-muted);
    font-weight: 500;
}

/* ---------------------------------------------------------------- tarjeta + tabla */

.aw-card {
    background: var(--aw-surface);
    border: 1px solid var(--aw-line);
    border-radius: 8px;
    overflow: hidden;
}

.aw-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--aw-line);
    font-size: 0.8125rem;
    color: var(--aw-muted);
}

.aw-card__count {
    font-variant-numeric: tabular-nums;
}

.aw-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aw-pagesize select {
    font: inherit;
    color: var(--aw-ink);
    border: 1px solid #C5CCD5;
    border-radius: 4px;
    padding: 2px 6px;
    background: var(--aw-surface);
}

.aw-progress {
    height: 2px;
}

.aw-table-wrap {
    overflow-x: auto;
}

.aw-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
}

.aw-c-number { width: 60px; }
.aw-c-product { width: 150px; }
.aw-c-status { width: 150px; }
.aw-c-priority { width: 108px; }
.aw-c-age { width: 116px; }
.aw-c-ai { width: 176px; }
.aw-c-assignee { width: 136px; }
.aw-c-updated { width: 104px; }

.aw-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #FAFBFC;
    border-bottom: 1px solid var(--aw-line);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--aw-muted);
    white-space: nowrap;
}

.aw-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.aw-sort:hover {
    color: var(--aw-navy);
}

th[aria-sort="ascending"] .aw-sort,
th[aria-sort="descending"] .aw-sort {
    color: var(--aw-navy);
}

.aw-sort__icon {
    font-size: 0.8rem;
}

.aw-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #EEF0F3;
    vertical-align: middle;
    color: var(--aw-ink);
}

.aw-row[data-ticket-row] {
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.aw-row[data-ticket-row]:hover {
    background: #F7F9FB;
}

.aw-row--selected,
.aw-row[data-ticket-row]:focus-visible {
    background: #EAF1F8;
}

.aw-row[data-ticket-row]:focus-visible {
    outline-offset: -2px;
}

.aw-row--urgent td:first-child {
    box-shadow: inset 3px 0 0 #B42318;
}

.aw-row--fresh {
    background: #F1F8F4;
}

.aw-row--fresh td:first-child {
    box-shadow: inset 3px 0 0 var(--aw-green);
}

.aw-cell-number {
    font-family: var(--aw-mono);
    font-size: 0.75rem;
    color: var(--aw-muted);
    font-variant-numeric: tabular-nums;
}

.aw-cell-subject {
    overflow: hidden;
}

.aw-subject {
    display: block;
    color: var(--aw-ink);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-subject:hover {
    color: var(--aw-navy);
    text-decoration: underline;
}

.aw-customer {
    display: inline-block;
    max-width: 100%;
    color: var(--aw-muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.aw-fresh-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--aw-green-50);
    color: #1D5E45;
    font-size: 0.6875rem;
    font-weight: 600;
    vertical-align: middle;
}

.aw-muted {
    color: var(--aw-muted);
}

.aw-table time {
    color: var(--aw-muted);
    white-space: nowrap;
}

/* chips */

.aw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.aw-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.aw-status--new { color: #1A3A5C; background: #E6EDF5; }
.aw-status--open { color: #0B4F82; background: #E1EFFA; }
.aw-status--progress { color: #7A4A00; background: #FDF0D5; }
.aw-status--awaiting { color: #5B3A8C; background: #F0EAF8; }
.aw-status--resolved { color: #1D5E45; background: #E1F2EA; }
.aw-status--closed { color: #3D4652; background: #ECEEF1; }

.aw-priority--urgent { color: #FFFFFF; background: #B42318; }
.aw-priority--high { color: #8A3A0A; background: #FDEAD8; }
.aw-priority--normal { color: #1A3A5C; background: #E6EDF5; }
.aw-priority--low { color: #4A5361; background: #F0F2F5; }

.aw-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 10px;
}

.aw-bars__bar {
    width: 3px;
    background: currentColor;
    opacity: 0.25;
}

.aw-bars__bar:nth-child(1) { height: 4px; }
.aw-bars__bar:nth-child(2) { height: 6px; }
.aw-bars__bar:nth-child(3) { height: 8px; }
.aw-bars__bar:nth-child(4) { height: 10px; }

.aw-bars__bar--on {
    opacity: 1;
}

/* antigüedad */

.aw-age {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aw-age--normal { color: var(--aw-muted); }

.aw-age--warning,
.aw-age--critical {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.aw-age--warning { color: #7A4A00; background: #FDF0D5; }
.aw-age--critical { color: #9F1C14; background: #FDE7E5; }

.aw-age__icon.mud-icon-size-small {
    font-size: 0.95rem;
}

/* IA */

.aw-ai {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.aw-ai__text {
    color: #374151;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* responsable */

.aw-assignee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.aw-assignee__label {
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-assignee--none .aw-assignee__label {
    color: var(--aw-muted);
}

.aw-avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ECEEF1;
    color: #3D4652;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.aw-avatar .mud-icon-size-small {
    font-size: 0.95rem;
}

.aw-avatar--me {
    background: var(--aw-navy);
    color: #FFFFFF;
}

.aw-avatar--appbar {
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    color: var(--aw-navy);
    font-size: 0.6875rem;
}

.aw-avatar--empty {
    background: transparent;
    border: 1.5px dashed #9AA3AE;
}

/* estados vacío / error */

.aw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px 56px;
    text-align: center;
}

.aw-empty__icon {
    font-size: 2.25rem !important;
    color: #9AA3AE;
}

.aw-empty__title {
    margin: 4px 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--aw-ink);
}

.aw-empty__text {
    margin: 0 0 10px;
    max-width: 440px;
    color: var(--aw-muted);
}

.aw-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    color: #9F1C14;
}

.aw-error > div {
    flex: 1;
}

.aw-error__title {
    margin: 0;
    font-weight: 600;
}

.aw-error__text {
    margin: 2px 0 0;
    color: var(--aw-ink);
}

.aw-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--aw-line);
}

/* Laptop 1366 px con drawer abierto: ~1100 px útiles. Se compactan columnas secundarias. */
@media (max-width: 1440px) {
    .aw-c-ai { width: 112px; }
    .aw-c-status { width: 136px; }
    .aw-c-assignee { width: 130px; }
    .aw-c-age { width: 112px; }
    .aw-c-updated { width: 112px; }
    .aw-table td, .aw-table thead th { padding-left: 10px; padding-right: 10px; }
    .aw-main { padding: 14px 18px 28px; }
}

@media (max-width: 1180px) {
    .aw-col-ai, .aw-c-ai { display: none; }
}

@media (max-width: 959.98px) {
    .aw-user__text, .aw-tenant { display: none; }
    .aw-page-header { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 960px) {
    .aw-appbar__menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aw-row[data-ticket-row] { transition: none; }
}

/* ===========================================================================================================
   Sesión 4 (ADR 0019) — Línea de tiempo del ticket, composer y nivel de soporte.
   Regla de diseño: lo que ve el cliente y lo que no se distinguen por etiqueta + ícono + forma, no solo por color.
   Contrastes AA sobre blanco: #1A3A5C (11.6:1), #7A4B00 (7.4:1), #4B5563 (7.6:1).
   =========================================================================================================== */

.level-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid #1A3A5C;
    border-radius: 4px;
    color: #1A3A5C;
    font-size: 0.75rem;
    font-weight: 600;
}

.tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tl {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.75rem;
    border-left: 2px solid #E3E7ED;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tl-item {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 1px solid #D5DCE5;
}

/* Mensaje del cliente: neutro, borde gris azulado a la izquierda. */
.tl-public-in {
    border-left: 4px solid #6B7C93;
}

/* Respuesta pública del agente: azul marino corporativo, fondo azul muy tenue. */
.tl-public-out {
    border-left: 4px solid #1A3A5C;
    background: #F2F6FA;
}

/* Nota interna: ámbar con borde punteado; jamás debe parecer un mensaje al cliente. */
.tl-internal {
    border: 1px dashed #B7791F;
    border-left: 4px solid #B7791F;
    background: #FFF8E6;
}

.tl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tl-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
}

.tl-public-in .tl-tag {
    color: #374151;
    background: #EEF1F5;
}

.tl-public-out .tl-tag {
    color: #FFFFFF;
    background: #1A3A5C;
}

.tl-internal .tl-tag {
    color: #7A4B00;
    background: #FDEBC8;
}

.tl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #E3E7ED;
    color: #1A3A5C;
    font-size: 0.7rem;
    font-weight: 700;
}

.tl-author {
    font-weight: 600;
    color: #1E1E1E;
}

.tl-role,
.tl-channel,
.tl-via {
    color: #4B5563;
    font-size: 0.75rem;
}

.tl-time {
    margin-left: auto;
    color: #4B5563;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Texto plano del cliente/agente: se respetan saltos de línea y se cortan palabras largas (URLs). */
.tl-body {
    margin-top: 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tl-attachments {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tl-size {
    margin-left: 0.35rem;
    color: #4B5563;
    font-size: 0.7rem;
    text-transform: none;
}

.tl-event {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: #374151;
    font-size: 0.85rem;
}

.tl-event-text {
    display: flex;
    flex-direction: column;
}

.tl-escalation {
    border-left: 3px solid #2E7D5E;
    background: #F3F8F6;
    border-radius: 4px;
    padding: 0.5rem;
}

.tl-note {
    color: #1E1E1E;
    font-style: italic;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.composer {
    border: 1px solid #D5DCE5;
}

.composer-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.composer-internal .composer-hint {
    color: #7A4B00;
}

.composer-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.composer-file-list {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.composer-file-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.composer-file-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.composer-file-error {
    color: #B42318;
    font-size: 0.75rem;
}

.composer-progress {
    max-width: 160px;
}

.composer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* Foco visible para navegación con teclado en los elementos propios. */
.tl-item:focus-within,
.composer:focus-within {
    outline: 2px solid #2E7D5E;
    outline-offset: 2px;
}

/* ADR 0024 (b) — urgencia y sentimiento sugeridos por IA. Pares texto/fondo >= 4.5:1; texto + símbolo además del color. */
.aw-ai-signals {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.aw-urgency--critical { color: #FFFFFF; background: #8E1B12; }
.aw-urgency--high { color: #7A2E05; background: #FDE3CF; }
.aw-urgency--normal { color: #1A3A5C; background: #E6EDF5; }
.aw-urgency--low { color: #374151; background: #F0F2F5; }

.aw-sentiment--angry { color: #FFFFFF; background: #6B2C91; }
.aw-sentiment--negative { color: #5B2479; background: #F1E6F8; }
.aw-sentiment--neutral { color: #374151; background: #F0F2F5; }
.aw-sentiment--positive { color: #1E5B43; background: #E3F4EC; }

/* ADR 0026 — clasificación de respuesta al cliente. Pares texto/fondo AA (>= 4.5:1); además del color, cada chip
   lleva texto e ícono. */
.aw-response { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.aw-response__icon { font-size: 14px !important; }
.aw-response--none { color: #7A1F1F; background: #FBE4E4; }
.aw-response--system { color: #7A2E05; background: #FDE3CF; }
.aw-response--system-waiting { color: #1A3A5C; background: #E6EDF5; }
.aw-response--system-resolved { color: #1E5B43; background: #E3F4EC; }
.aw-response--executive { color: #14532D; background: #DCFCE7; }

/* ADR 0026 — respuestas internas entre niveles y participantes del ticket. */
.tl-internal-response { border-left: 3px solid #5B2479; }
.aw-participants { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.aw-participants th, .aw-participants td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #E5E7EB; }
.aw-participants .aw-num { text-align: right; }

/* ADR 0024 (c) — borrador de respuesta con IA: aviso visible mientras el agente no lo edite. */
.ai-draft-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid #2E7D5E;
    background: #F2F8F5;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #1E5B43;
}

/* ADR 0024 (a) — traducción IA: siempre junto al original, nunca en su lugar. */
.ai-translation {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #2E7D5E;
    background: #F2F8F5;
    border-radius: 4px;
}

.ai-translation__head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E5B43;
    margin-bottom: 0.25rem;
}

.ai-translation__line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    min-height: 1em;
}

.ai-translation__note {
    font-size: 0.7rem;
    color: #4A5361;
    margin-top: 0.25rem;
}

.tl-translate {
    margin-top: 0.25rem;

/* Canal de correo (ADR 0022): estado de entrega y distintivos. Ícono + texto, nunca solo color. */
.tl-channel-icon {
    vertical-align: middle;
    margin-right: 0.15rem;
}

.tl-mail {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tl-mail-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    border: 1px solid transparent;
}

.tl-mail-ok {
    color: #1F5F46;
    background: #E6F4EE;
    border-color: #2E7D5E;
}

.tl-mail-pending {
    color: #374151;
    background: #EEF1F5;
    border-color: #6B7C93;
}

.tl-mail-error {
    color: #8A1C1C;
    background: #FDECEC;
    border-color: #B42318;
    font-weight: 600;
}

.tl-mail-warning {
    color: #7A4B00;
    background: #FFF4DB;
    border-color: #B7791F;
}

.tl-mail-info {
    color: #1A3A5C;
    background: #EAF1F8;
    border-color: #1A3A5C;
}

.tl-original {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #D5DCE5;
    color: #4B5563;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 24rem;
    overflow-y: auto;
}

.tl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Incidentes masivos (ADR 0024 d): alerta del shell y detalle. Estado en texto + ícono, nunca solo color. */
.aw-incident-alerts {
    margin-bottom: 0.75rem;
}

.aw-incident-alert__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.aw-incident-alert__status {
    font-weight: 700;
}

.aw-incident-alert__symptom code {
    font-family: var(--aw-mono);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.aw-incident-alert__link {
    font-weight: 600;
    color: var(--aw-navy);
    text-decoration: underline;
}

.aw-incident-row--removed td {
    color: var(--aw-muted);
    text-decoration: line-through;
}

/* ===========================================================================================================
   ADR 0027 — Notificaciones a agentes: campana, lista, preferencias, menciones y ajustes de móvil.
   Estado por texto + ícono + forma (punto, etiqueta "Crítico"), no solo por color. Contrastes AA sobre blanco.
   =========================================================================================================== */

.aw-bell {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
}

.aw-bell:hover {
    background: var(--aw-navy-700);
}

.aw-bell:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.aw-notifications {
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
}

.aw-notifications__header,
.aw-notifications__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
}

.aw-notifications__header {
    border-bottom: 1px solid var(--aw-line);
}

.aw-notifications__footer {
    border-top: 1px solid var(--aw-line);
}

.aw-notifications__title {
    font-weight: 700;
    color: var(--aw-ink);
}

.aw-notifications__action {
    border: 0;
    background: transparent;
    color: var(--aw-navy);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
}

.aw-notifications__link {
    color: var(--aw-navy);
    font-size: 0.8125rem;
    font-weight: 600;
}

.aw-notifications__empty {
    margin: 0;
    padding: 20px 14px;
    color: var(--aw-muted);
}

.aw-notifications__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.aw-notification + .aw-notification {
    border-top: 1px solid var(--aw-line);
}

.aw-notification__button {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--aw-ink);
    cursor: pointer;
    font: inherit;
}

.aw-notification__button:hover,
.aw-notification__button:focus-visible {
    background: var(--aw-canvas);
}

.aw-notification--unread .aw-notification__button {
    background: var(--aw-navy-50);
}

.aw-notification--unread .aw-notification__text {
    font-weight: 600;
}

.aw-notification__icon {
    margin-top: 2px;
    color: var(--aw-navy);
}

.aw-notification__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.aw-notification__text {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.aw-notification__meta {
    font-size: 0.75rem;
    color: var(--aw-muted);
}

.aw-notification__critical {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border: 1px solid #B42318;
    border-radius: 4px;
    color: #B42318;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.aw-notification__dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--aw-navy);
}

/* Preferencias */
.aw-prefs-card {
    border: 1px solid var(--aw-line);
    max-width: 880px;
}

.aw-prefs-table {
    display: flex;
    flex-direction: column;
}

.aw-prefs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 72px;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--aw-line);
}

.aw-prefs-row--head {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--aw-muted);
    text-transform: uppercase;
}

.aw-prefs-row__label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aw-prefs-row__name {
    font-weight: 600;
}

.aw-prefs-row__hint {
    font-size: 0.75rem;
    color: var(--aw-muted);
}

.aw-quiet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0;
}

.aw-prefs-actions {
    display: flex;
    justify-content: flex-end;
    max-width: 880px;
    margin-bottom: 24px;
}

.aw-push-enable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--aw-radius);
    background: var(--aw-navy);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.aw-push-enable:hover {
    background: var(--aw-navy-700);
}

.aw-push-enable:focus-visible {
    outline: 2px solid var(--aw-focus);
    outline-offset: 2px;
}

.aw-push-enable:disabled {
    opacity: 0.6;
    cursor: default;
}

.aw-devices {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.aw-devices li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.aw-devices__meta {
    font-size: 0.75rem;
    color: var(--aw-muted);
}

/* Menciones en la nota interna */
.composer-mentions {
    margin-top: 0.5rem;
}

.composer-mention-role {
    margin-left: 4px;
    color: var(--aw-muted);
    font-size: 0.75rem;
}

.composer-mention-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.composer-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ticket-subject,
.ticket-customer {
    overflow-wrap: anywhere;
}

.ticket-jump-to-reply {
    display: none;
}

/* Teléfono: detalle del ticket y composer cómodos con el pulgar, sin scroll horizontal. */
@media (max-width: 599.98px) {
    .aw-main {
        padding: 10px 10px 24px;
    }

    .aw-main .mud-grid {
        margin: 0;
        width: 100%;
    }

    .aw-main .mud-grid > .mud-grid-item {
        padding-left: 0;
        padding-right: 0;
    }

    .aw-main .mud-paper.pa-4 {
        padding: 12px !important;
    }

    .ticket-header .mud-typography-h5 {
        font-size: 1.25rem;
    }

    .ticket-jump-to-reply {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        padding: 8px 12px;
        border: 1px solid var(--aw-navy);
        border-radius: var(--aw-radius);
        color: var(--aw-navy);
        font-weight: 600;
        text-decoration: none;
    }

    .tl {
        padding-left: 0.5rem;
    }

    .tl-item {
        padding: 0.6rem 0.7rem;
    }

    .composer.pa-3 {
        padding: 8px !important;
    }

    .composer .mud-tabs-tabbar .mud-tab {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.8125rem;
    }

    .composer-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .composer-actions .mud-button-root {
        width: 100%;
        min-height: 44px;
    }

    .composer-files {
        flex-direction: column;
        align-items: flex-start;
    }

    .aw-prefs-row {
        grid-auto-columns: 52px;
        gap: 4px;
    }

    .aw-quiet-grid {
        grid-template-columns: 1fr;
    }

    .aw-prefs-actions .mud-button-root,
    .aw-push-enable {
        width: 100%;
        justify-content: center;
    }
}

/* Instalada como app (PWA): respeta las áreas seguras del teléfono (muesca, barra de gestos). */
@media (display-mode: standalone) {
    .aw-main {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ADR 0028: "Escalado a DTI" (área de escalamiento fuera de soporte). Texto + ícono; contraste AA (#4A2C7A sobre #F1ECF8). */
.aw-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid #4A2C7A;
    border-radius: 4px;
    background: #F1ECF8;
    color: #4A2C7A;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.aw-area-chip--waiting {
    border-style: dashed;
}

.aw-area-chip__detail {
    font-weight: 400;
}

.aw-area-actions {
    border: 1px solid #4A2C7A;
    border-radius: var(--aw-radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: #FAF8FD;
}

/* Canal de WhatsApp (ADR 0029): canal, ventana de 24 h, avisos del composer y "palomitas" de entrega.
   Ícono + texto siempre (nunca solo color); contraste AA sobre fondos claros. */
.wa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid #1F6E43;
    border-radius: 4px;
    color: #1F6E43;
    background: #EAF6EF;
    font-size: 0.75rem;
    font-weight: 600;
}

.wa-window {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 0.75rem;
}

.wa-window-open {
    color: #1F5F46;
    background: #E6F4EE;
    border-color: #2E7D5E;
}

.wa-window-closed {
    color: #7A4B00;
    background: #FFF4DB;
    border-color: #B7791F;
}

.wa-optout {
    color: #8A1C1C;
    font-weight: 600;
}

.wa-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-left: 3px solid #1A3A5C;
    border-radius: 4px;
    font-size: 0.8rem;
}

.wa-notice-info {
    color: #1A3A5C;
    background: #EAF1F8;
}

.wa-notice-warning {
    color: #7A4B00;
    background: #FFF4DB;
    border-left-color: #B7791F;
}

.wa-notice-error {
    color: #8A1C1C;
    background: #FDECEC;
    border-left-color: #B42318;
    font-weight: 600;
}

/* "Leído" (✓✓ azul, como en WhatsApp) además del texto. */
.tl-mail-read {
    color: #0B4A8B;
    background: #E8F1FB;
    border-color: #1565C0;
}

/* ADR 0030: Google Chat (obligatorio), Slack y WhatsApp en Preferencias. */
.aw-ext-channels {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aw-ext-channels li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--aw-line);
}

.aw-ext-channels__name {
    font-weight: 600;
    min-width: 96px;
}

.aw-ext-channels__state {
    color: var(--aw-muted);
    font-size: 0.8125rem;
}