/* CAEAR | Gestión IT — estilos complementarios a MudBlazor */
:root {
    --caear-primary: #4F46E5;
    --caear-teal: #0F766E;
    --caear-bg: #F8FAFC;
    --caear-text: #0F172A;
    --caear-muted: #475569;
    --caear-border: #E2E8F0;
    --caear-surface: #FFFFFF;
    --caear-error-bg: #FEF2F2;
    --caear-error-text: #991B1B;
    --caear-info-bg: #EEF2FF;
    --caear-info-text: #3730A3;
}

body.caear-dark {
    --caear-primary: #A5B4FC;
    --caear-teal: #5EEAD4;
    --caear-bg: #0B1120;
    --caear-text: #F1F5F9;
    --caear-muted: #94A3B8;
    --caear-border: #1F2937;
    --caear-surface: #111827;
    --caear-error-bg: #3B1212;
    --caear-error-text: #FECACA;
    --caear-info-bg: #1E1B4B;
    --caear-info-text: #C7D2FE;
}

html, body { font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { background: var(--caear-bg); color: var(--caear-text); margin: 0; }

/* Foco visible para navegación por teclado */
:focus-visible { outline: 3px solid var(--caear-primary); outline-offset: 2px; }

.caear-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.caear-brand { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; margin-left: .25rem; }
.caear-brand-text { font-size: 1.05rem; white-space: nowrap; }
.caear-brand-sep { opacity: .5; margin: 0 .15rem; }
.caear-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
.caear-content { padding-top: 1.5rem; padding-bottom: 3rem; }
.caear-customer-selector { width: 300px; margin-right: .5rem; }
.caear-customer-selector .mud-input-control { margin-top: 0; }
.caear-agreement-selector { width: 220px; margin-right: .5rem; }
.caear-agreement-selector .mud-input-control { margin-top: 0; }
.caear-customer-chip { margin-right: .5rem; max-width: 260px; }
.caear-user-button { text-transform: none; }
.caear-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.caear-page-header { margin-bottom: 1.25rem; }
.caear-page-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; justify-content: space-between; }
.caear-page-title { font-weight: 600; }
.caear-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.caear-section-title { font-weight: 600; margin-bottom: .75rem; }
.caear-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.caear-results-bar { display: flex; justify-content: flex-end; min-height: 1.5rem; margin-bottom: .25rem; }
.caear-actions-cell { white-space: nowrap; }
.caear-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1rem; }
.caear-centered { display: flex; justify-content: center; align-items: center; min-height: 40vh; }
.caear-error-list { margin: .5rem 0 0 1.25rem; padding: 0; }
.caear-prewrap { white-space: pre-wrap; }
.caear-stat { height: 100%; }

.caear-dl { display: grid; grid-template-columns: minmax(130px, 35%) 1fr; gap: .5rem 1rem; margin: 0; }
.caear-dl dt { color: var(--mud-palette-text-secondary); font-size: .875rem; }
.caear-dl dd { margin: 0; }

.caear-lines { display: flex; flex-direction: column; gap: .5rem; }
.caear-line { display: grid; grid-template-columns: minmax(180px, 2fr) 110px minmax(150px, 2fr) auto; gap: .5rem; align-items: center;
              padding: .5rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.caear-line:has(.caear-line-date) { grid-template-columns: minmax(180px, 2fr) 110px 170px minmax(150px, 2fr) auto; }
.caear-form-actions { display: flex; justify-content: flex-end; gap: .75rem; position: sticky; bottom: 0; padding: .75rem 0;
                      background: var(--mud-palette-background); border-top: 1px solid var(--mud-palette-lines-default); z-index: 2; }

@media (max-width: 900px) {
    .caear-line, .caear-line:has(.caear-line-date) { grid-template-columns: 1fr 1fr; }
    .caear-line-title, .caear-line-notes { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .caear-brand-text { display: none; }
    .caear-customer-selector { width: 170px; }
    .caear-agreement-selector { width: 150px; }
    .caear-user-name { display: none; }
    .caear-dl { grid-template-columns: 1fr; }
    .caear-content { padding-left: 8px; padding-right: 8px; }
}

/* Páginas de cuenta (renderizado estático, sin componentes interactivos) */
.caear-account-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
                       padding: 1.5rem 1rem; background: linear-gradient(160deg, var(--caear-bg) 0%, var(--caear-info-bg) 100%); }
.caear-account-card { width: 100%; max-width: 420px; background: var(--caear-surface); color: var(--caear-text); border: 1px solid var(--caear-border);
                      border-radius: 14px; padding: 2rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); }
.caear-account-brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.caear-account-brand-title { font-size: 1.15rem; }
.caear-account-brand-subtitle { font-size: .85rem; color: var(--caear-muted); }
.caear-account-title { font-size: 1.4rem; font-weight: 600; margin: 0 0 1rem; }
.caear-account-form { display: flex; flex-direction: column; gap: 1rem; }
.caear-field { display: flex; flex-direction: column; gap: .35rem; }
.caear-field label { font-weight: 500; font-size: .9rem; }
.caear-input { font: inherit; padding: .7rem .8rem; border-radius: 8px; border: 1px solid #94A3B8; background: var(--caear-surface); color: var(--caear-text); }
.caear-input:focus { border-color: var(--caear-primary); outline: 2px solid var(--caear-primary); outline-offset: 0; }
.caear-input.invalid { border-color: #B91C1C; }
.caear-field-error, .validation-message { color: #B91C1C; font-size: .85rem; }
body.caear-dark .caear-field-error, body.caear-dark .validation-message { color: #FCA5A5; }
.caear-field-hint { color: var(--caear-muted); font-size: .8rem; }
.caear-btn { display: inline-flex; justify-content: center; align-items: center; font: inherit; font-weight: 600; padding: .7rem 1.1rem; border-radius: 8px;
             border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.caear-btn-primary { background: #4F46E5; color: #FFFFFF; }
.caear-btn-primary:hover { background: #4338CA; }
.caear-btn-text { background: transparent; color: var(--caear-primary); }
.caear-account-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.caear-account-alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.caear-account-alert.is-error { background: var(--caear-error-bg); color: var(--caear-error-text); }
.caear-account-alert.is-info { background: var(--caear-info-bg); color: var(--caear-info-text); }
.caear-account-alert ul { margin: .5rem 0 0 1.1rem; padding: 0; }
.caear-account-help { color: var(--caear-muted); font-size: .85rem; margin-top: 1.25rem; }
.caear-account-footer { margin-top: 1.5rem; color: var(--caear-muted); font-size: .8rem; }

/* Reconexión del circuito Blazor */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex; position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, .45); align-items: center; justify-content: center;
}
.caear-reconnect-card { background: var(--caear-surface); color: var(--caear-text); padding: 1.25rem 1.5rem; border-radius: 12px; max-width: 360px; }
.caear-reconnect-card p { display: none; margin: 0; }
#components-reconnect-modal.components-reconnect-show .caear-reconnect-show-text,
#components-reconnect-modal.components-reconnect-retrying .caear-reconnect-show-text { display: block; }
#components-reconnect-modal.components-reconnect-failed .caear-reconnect-failed-text,
#components-reconnect-modal.components-reconnect-resume-failed .caear-reconnect-failed-text { display: block; }
#components-reconnect-modal.components-reconnect-rejected .caear-reconnect-rejected-text { display: block; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.caear-muted { color: var(--mud-palette-text-secondary) !important; }
.caear-nowrap { white-space: nowrap; }
h1:focus, h1:focus-visible { outline: none; }

/* Fichas públicas (QR) */
.caear-public-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; background: var(--caear-bg); }
.caear-public-card { width: 100%; max-width: 560px; background: var(--caear-surface); color: var(--caear-text); border: 1px solid var(--caear-border);
                     border-radius: 14px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .06); }
.caear-public-code { font-family: Consolas, "DejaVu Sans Mono", monospace; font-weight: 700; font-size: 1.05rem; color: var(--caear-primary); letter-spacing: .02em; }
.caear-public-dl { display: grid; grid-template-columns: 130px 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.caear-public-dl dt { color: var(--caear-muted); font-size: .9rem; }
.caear-public-dl dd { margin: 0; }
.caear-public-h2 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.caear-public-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--caear-border); }
.caear-public-list li { padding: .5rem 0; border-bottom: 1px solid var(--caear-border); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.caear-public-list small { color: var(--caear-muted); }
.caear-public-card a:not(.caear-btn) { color: var(--caear-primary); }
@media (max-width: 480px) { .caear-public-dl { grid-template-columns: 1fr; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.caear-line.caear-line-simple { grid-template-columns: 1fr auto; }

/* Tickets: texto con formato, novedades y solución destacada */
.caear-rich { overflow-wrap: anywhere; line-height: 1.55; }
.caear-rich img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--caear-border); }
.caear-rich pre { background: var(--caear-info-bg); color: var(--caear-text); padding: .6rem .8rem; border-radius: 6px; overflow-x: auto; }
.caear-rich blockquote { margin: .5rem 0; padding-left: .9rem; border-left: 3px solid var(--caear-border); color: var(--caear-muted); }
.caear-rich p { margin: 0 0 .5rem; }
.caear-rich a { color: var(--caear-primary); }
.caear-editor .ql-container { min-height: 200px; font-size: 1rem; font-family: inherit; }
.caear-editor .ql-editor { min-height: 200px; }
.caear-editor .ql-editor img { max-width: 100%; }
.caear-editor .ql-toolbar, .caear-editor .ql-container { border-color: var(--caear-border); background: var(--caear-surface); color: var(--caear-text); }
.caear-editor .ql-toolbar { border-radius: 8px 8px 0 0; }
.caear-editor .ql-container { border-radius: 0 0 8px 8px; }
.caear-editor .ql-editor.ql-blank::before { color: var(--caear-muted); font-style: normal; }
body.caear-dark .caear-editor .ql-stroke { stroke: var(--caear-text); }
body.caear-dark .caear-editor .ql-fill { fill: var(--caear-text); }
body.caear-dark .caear-editor .ql-picker { color: var(--caear-text); }
body.caear-dark .caear-editor .ql-picker-options { background: var(--caear-surface); }
.caear-editor:focus-within .ql-toolbar, .caear-editor:focus-within .ql-container { border-color: var(--caear-primary); }
.caear-comment { border: 1px solid var(--caear-border); border-radius: 10px; padding: .9rem 1rem; background: var(--caear-surface); }
.caear-comment-solution { border: 2px solid #15803D; background: #ECFDF5; color: #0F172A; }
.caear-comment-solution .caear-muted { color: #475569 !important; }
body.caear-dark .caear-comment-solution { border-color: #4ADE80; background: #052E1B; color: #F1F5F9; }
body.caear-dark .caear-comment-solution .caear-muted { color: #A7B4C4 !important; }
.caear-solution-badge { margin-right: .6rem; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .85rem; color: #166534; }
body.caear-dark .caear-solution-badge { color: #86EFAC; }
.caear-meta-dl { display: grid; grid-template-columns: 120px 1fr; gap: .45rem .75rem; margin: 0; }
.caear-meta-dl dt { color: var(--caear-muted); font-size: .88rem; }
.caear-meta-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Calendario de tickets */
.caear-cal-scroll { overflow-x: auto; }
.caear-cal-month { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 840px; border: 1px solid var(--caear-border); border-radius: 10px; overflow: hidden; background: var(--caear-surface); }
.caear-cal-head { padding: .4rem .6rem; font-weight: 600; font-size: .85rem; color: var(--caear-muted); text-transform: capitalize; border-bottom: 1px solid var(--caear-border); }
.caear-cal-cell { min-height: 110px; padding: .3rem; border-right: 1px solid var(--caear-border); border-bottom: 1px solid var(--caear-border); display: flex; flex-direction: column; gap: .2rem; }
.caear-cal-cell:nth-child(7n) { border-right: none; }
.caear-cal-out { background: var(--caear-bg); }
.caear-cal-out .caear-cal-daynum { color: var(--caear-muted); }
.caear-cal-today { outline: 2px solid var(--caear-primary); outline-offset: -2px; }
.caear-cal-daynum, .caear-cal-more, .caear-cal-colhead { background: none; border: none; cursor: pointer; font: inherit; color: var(--caear-text); text-align: left; padding: .1rem .2rem; border-radius: 4px; }
.caear-cal-daynum { font-weight: 600; font-size: .85rem; }
.caear-cal-more { font-size: .8rem; color: var(--caear-primary); }
.caear-cal-week { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: .5rem; min-width: 940px; }
.caear-cal-col { border: 1px solid var(--caear-border); border-radius: 10px; padding: .4rem; background: var(--caear-surface); display: flex; flex-direction: column; gap: .3rem; min-height: 180px; }
.caear-cal-colhead { font-weight: 700; text-transform: capitalize; }
.caear-cal-empty { padding: .2rem; }
.caear-cal-item { display: block; padding: .25rem .45rem; border-radius: 6px; border-left: 4px solid var(--caear-border); background: var(--caear-bg); color: var(--caear-text); text-decoration: none; font-size: .85rem; overflow-wrap: anywhere; }
.caear-cal-item:hover { background: var(--caear-info-bg); }
.caear-cal-compact { font-size: .8rem; }
.caear-cal-id { font-weight: 700; }
.caear-cal-date { font-weight: 700; margin-right: .4rem; }
.caear-cal-late { color: #B91C1C; font-weight: 600; }
body.caear-dark .caear-cal-late { color: #FCA5A5; }
.caear-cal-p1 { border-left: 4px solid #DC2626; }
.caear-cal-p2 { border-left: 4px solid #D97706; }
.caear-cal-p3 { border-left: 4px solid #2563EB; }
.caear-cal-p4 { border-left: 4px solid #64748B; }

/* IA: pistas del ticket y asistente */
.caear-hint { border-left: 3px solid var(--caear-primary); padding: .25rem .75rem; }
.caear-chat { display: flex; flex-direction: column; gap: .75rem; }
.caear-chat-msg { max-width: 92%; padding: .6rem .9rem; border-radius: 12px; border: 1px solid var(--caear-border); overflow-wrap: anywhere; }
.caear-chat-user { align-self: flex-end; background: var(--caear-info-bg); color: var(--caear-info-text); }
.caear-chat-assistant { align-self: flex-start; background: var(--caear-surface); color: var(--caear-text); }
.caear-chat-assistant p { margin: 0 0 .5rem; }
.caear-chat-assistant ul, .caear-chat-assistant ol { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.caear-chat-assistant a { color: var(--caear-primary); }

/* Mantenimiento: calendario (rojo = pendiente, verde = realizada; además llevan ícono y texto) */
.caear-mnt-entry { display: flex; align-items: flex-start; gap: .25rem; overflow-wrap: normal; }
.caear-mnt-entry .mud-icon-root { flex: none; margin-top: .1rem; }
.caear-mnt-entry .caear-mnt-text { min-width: 0; overflow-wrap: break-word; line-height: 1.2; }
.caear-mnt-pending { border-left-color: #B91C1C; background: #FEE2E2; color: #7F1D1D; }
.caear-mnt-done { border-left-color: #15803D; background: #DCFCE7; color: #14532D; }
.caear-mnt-pending:hover, .caear-mnt-done:hover { filter: brightness(.96); background: inherit; }
body.caear-dark .caear-mnt-pending { background: #450A0A; color: #FECACA; border-left-color: #F87171; }
body.caear-dark .caear-mnt-done { background: #052E16; color: #BBF7D0; border-left-color: #4ADE80; }
.caear-mnt-legend { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 6px; border-left: 4px solid; font-size: .85rem; }
.caear-mnt-pending-text { color: #B91C1C; font-weight: 600; }
.caear-mnt-done-text { color: #15803D; font-weight: 600; }
body.caear-dark .caear-mnt-pending-text { color: #FCA5A5; }
body.caear-dark .caear-mnt-done-text { color: #86EFAC; }
.caear-mnt-owed { background: #FEE2E2; color: #7F1D1D; font-weight: 700; padding: .1rem .5rem; border-radius: 6px; border: 1px solid #B91C1C; }
body.caear-dark .caear-mnt-owed { background: #450A0A; color: #FECACA; border-color: #F87171; }
.caear-mnt-card { border: 1px solid var(--caear-border); border-radius: 10px; padding: .75rem 1rem; background: var(--caear-surface); }
.caear-mnt-issue { border-left: 4px solid #B91C1C; }
.caear-file-btn { position: relative; display: inline-flex; overflow: hidden; }
.caear-file-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.caear-file-btn:focus-within { outline: 2px solid var(--caear-primary); outline-offset: 2px; }