:root {
    /* Mesa de servicio (American Data) · colores de docs/prototipo/LEEME.md */
    --navy: #08086F;
    --navy-2: #14147E;
    --navy-line: #23239A;
    --navy-text: #DDE2FF;
    --navy-muted: #AEB8F5;
    --blue: #0041FF;
    --link: #0036D6;
    --bg-side: #F7F8FA;
    --surface: #FFFFFF;
    --line: #E6E8EE;
    --line-soft: #F2F3F6;
    --field-line: #D5D9E4;
    --ink: #0E1030;
    --ink-2: #2A2E4A;
    --muted: #5B6078;
    --selected: #EEF3FF;
    --nav-active: #E8EEFF;
    --overdue: #B42318;
    --due-soon: #9A4A06;
    --due-soon-bar: #F59E0B;
    --on-shift: #16A34A;
    /* Fondos suaves para etiquetas y avisos (texto oscuro del mismo tono encima) */
    --ok: #146C34;
    --ok-soft: #E7F5EC;
    --warn-soft: #FEF3E2;
    --danger-soft: #FDECEA;
    --info-soft: #F3F6FF;
    --info-line: #C9D6FF;
    --note-bg: #FFF8EC;
    --note-line: #F3D3A6;
    --neutral-soft: #EEF0F4;
    --neutral-ink: #3F4560;
    --skeleton: #ECEEF3;
    /* Tipografía */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 22px;
    --fs-3xl: 26px;
    /* Espaciados (múltiplos de 4) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    /* Radios y sombras */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 14px;
    --r-pill: 99px;
    --shadow-sm: 0 1px 2px rgba(14, 16, 48, 0.08);
    --shadow-md: 0 8px 24px rgba(14, 16, 48, 0.12);
    --shadow-lg: 0 18px 48px rgba(14, 16, 48, 0.28);
    --focus-ring: 0 0 0 3px rgba(0, 65, 255, 0.35);
    /* Barra de estado del personal y pie del portal (con el logo de 28 px) */
    --bar-h: 38px;
    /* Nombres anteriores: apuntan a los nuevos para no romper los estilos existentes */
    --bg: var(--bg-side);
    --accent: var(--blue);
    --accent-dark: var(--navy);
    --accent-soft: var(--selected);
    --radius: var(--r-sm);
    --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --exito: #15803d;
    --error: #b91c1c;
}

body {
    font-family: var(--font);
    margin: 0 auto;
    color: var(--ink);
    background: var(--bg);
    font-size: 13px;
}



.btn-secondary {
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}



.split {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    min-height: calc(100vh - 73px);
}

#listPanel {
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#detailPanel {
    background: var(--surface);
    overflow-y: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 32px 40px;
}

#backToList {
    display: none;
    min-height: 44px;
}

.detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: 15px;
    margin: auto;
}

.list-filters {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.search-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.search-wrapper input {
    flex: 1;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.toggle-filters-btn {
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.toggle-filters-btn:hover {
    background: var(--line-soft);
}

.status-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.pill-btn {
    min-height: 44px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.pill-btn:hover {
    background: var(--line-soft);
}

.pill-btn[aria-pressed="true"],
.pill-btn.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

.more-filters {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.more-filters .form-group {
    flex: 1;
    margin-bottom: 0;
}

.more-filters label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 13px;
}

.more-filters select {
    min-height: 44px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.ticket-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.ticket-item {
    width: 100%;
    text-align: left;
    padding: 16px;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    cursor: pointer;
    font: inherit;
    box-sizing: border-box;
    min-height: 44px;
}

.ticket-item:hover {
    background: var(--bg);
}

.ticket-item.selected {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

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

main {
    padding-top: 0;
}

h2 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

section {
    margin-bottom: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 0;
}

.requester-group {
    margin-bottom: 15px;
}

.requester-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.requester-row input {
    flex: 1;
    min-width: 0;
}

.btn-small {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.form-group input,
.form-group select,
.assign-select {
    min-height: 44px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D5D9E0;
    border-radius: 8px;
    box-sizing: border-box;
    font: inherit;
}

.form-group textarea {
    border: 1px solid #D5D9E0;
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
    padding: 8px 12px;
    min-height: 80px;
    resize: vertical;
    width: 100%;
}

.btn-submit {
    min-height: 44px;
    padding: 10px 20px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font: inherit;
}

.btn-submit:hover {
    background-color: var(--accent-dark);
}

.error {
    background-color: #feb2b2;
    color: #c53030;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: none;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    margin: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 85%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-close-btn {
    align-self: flex-end;
    min-height: 44px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D5D9E0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    margin: 10px 15px 0 0;
    color: var(--ink);
}

.modal-close-btn:hover {
    background: var(--line-soft);
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 18px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 860px) {
    .split {
        grid-template-columns: 1fr;
    }
    
    #listPanel {
        border-right: none;
    }
    


    #backToList {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 20px;
    }

    #detailPanel {
        padding: 20px 16px;
        display: none;
    }

    #listPanel {
        display: flex;
    }

    .split.show-detail #listPanel {
        display: none;
    }

    .split.show-detail #detailPanel {
        display: flex;
    }
    
    .modal-content {
        width: calc(100% - 32px);
        margin: 16px;
        max-height: calc(100vh - 32px);
    }
}

.btn-action {
    min-height: 44px;
    padding: 8px 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 14px;
    font: inherit;
}

.btn-action:hover {
    background-color: var(--accent-dark);
}

.btn-assign {
    min-height: 44px;
    padding: 8px 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font: inherit;
}

.btn-assign:hover {
    background-color: var(--accent-dark);
}

.assign-select {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #D5D9E0;
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
}

.closed-msg {
    color: #c53030;
    font-style: italic;
    margin: 10px 0;
}

#errorMessage {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: #FDECEC;
    border: 1px solid #E5484D;
    color: #A3261B;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 6px;
}

.success {
    background-color: #c6f6d5;
    color: var(--exito);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: none;
}

#successMessage {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-new {
    background-color: #E8EEFB;
    color: #1F3F99;
}

.status-in_progress {
    background-color: #FDF0DC;
    color: #8A4B00;
}

.status-resolved {
    background-color: #E2F3EA;
    color: #1D6B43;
}

.status-closed {
    background-color: #ECEDEF;
    color: #4A505A;
}

.priority-1,
.priority-2 {
    color: var(--muted);
    background: transparent;
    font-weight: 500;
}

.priority-3 {
    color: #8A4B00;
    background: transparent;
    font-weight: 500;
}

.priority-4 {
    color: #A3261B;
    background: transparent;
    font-weight: 500;
}

/* Auth Screen Styles */
#authScreen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.auth-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: var(--surface);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--line);
}

.auth-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
}

.auth-form-panel[hidden],
.auth-notice[hidden],
.password-reveal[hidden],
.auth-links[hidden],
#activateForm[hidden],
#forgotEmailForm[hidden],
#forgotCodeForm[hidden],
#forgotPasswordFields[hidden] {
    display: none;
}

.auth-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.auth-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

.auth-link:hover,
.auth-link:focus-visible {
    text-decoration: underline;
}

.auth-link[hidden] {
    display: none;
}

.auth-link-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* ===== Opciones de inicio de sesión ===== */
.portal-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.portal-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portal-btn {
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.portal-btn:hover,
.portal-btn:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.portal-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.portal-link {
    padding-left: 4px;
    font-size: 14px;
}

.auth-notice {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--accent-soft);
}

.auth-notice p {
    margin: 0 0 8px;
}

.auth-secondary {
    width: 100%;
    margin-top: 12px;
}

.password-reveal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.password-reveal p {
    margin: 0;
}

.password-reveal-title {
    font-weight: 600;
    color: var(--exito);
}

.password-value {
    display: block;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 18px;
    overflow-wrap: anywhere;
    user-select: all;
}

.password-warning {
    color: #8A4B00;
    font-weight: 600;
}

.help-text {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

@media (max-width: 860px) {
    #authScreen {
        grid-template-columns: 1fr;
    }
}

/* ===== Panel izquierdo de inicio de sesión ===== */
.auth-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #0B1A4A;
  background-image: url("img/fondo-adn.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
}
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 40, 0.55) 0%, rgba(8, 10, 40, 0.15) 100%);
  pointer-events: none;
}
.auth-panel > * {
  position: relative;
}
.logo-plate {
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.logo-plate::before,
.logo-plate::after {
  content: none;
  display: none;
}
.auth-logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  margin: 0 auto;
}
.auth-kicker {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #5EE2F0;
}
.auth-tagline {
  margin: 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 860px) {
  .auth-panel {
    display: none;
  }
}

/* ===== Barra superior (opción 2) ===== */
.topbar {
  display: flex;
  align-items: stretch;
  min-height: 64px;
  background: #FFFFFF;
  border-top: 3px solid #2E55C9;
  border-bottom: 1px solid #E3E6EB;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}
.topbar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}
.topbar-logo { border-right: 1px solid #E3E6EB; padding: 0 24px; }
.topbar-logo img { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.topbar-title { border-right: 1px solid #E3E6EB; gap: 8px; }
.topbar-app { font-weight: 600; }
.topbar-sub { font-size: 12px; color: #5A6270; }
.topbar-nav { display: flex; align-items: stretch; gap: 8px; padding: 0 16px; }
.topbar-tab {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: none;
  background: transparent;
  font: inherit;
  color: #5A6270;
  cursor: pointer;
}
.topbar-tab.active { color: #2E55C9; font-weight: 600; box-shadow: inset 0 -3px 0 #2E55C9; }
.topbar-action { margin-left: auto; border-left: 1px solid #E3E6EB; }
.topbar-user { border-left: 1px solid #E3E6EB; padding: 0 24px; }
.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EEF2FC;
  color: #1F3F99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}
.topbar-user-text { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-name { font-weight: 500; }
.topbar-user-role { font-size: 12px; color: #5A6270; }

/* ===== Panel de la lista con color ===== */
#listPanel { background: #EEF2FC; border-right: 1px solid #D3DCF3; }
#listPanel .ticket-item {
  margin: 8px;
  width: calc(100% - 16px);
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.6);
}
#listPanel .ticket-item:hover { background: #FFFFFF; }
#listPanel .ticket-item.selected { background: #FFFFFF; border-color: #2E55C9; box-shadow: none; }

@media (max-width: 860px) {
  .topbar-title { display: none; }
  .topbar-section { padding: 0 12px; }
  /* Pestañas en su propia fila; si no caben, se desplazan de lado sin desbordar la página */
  .topbar-nav {
    order: 10;
    flex: 1 0 100%;
    min-width: 0;
    overflow-x: auto;
    padding: 0 8px;
    border-top: 1px solid #E3E6EB;
    scrollbar-width: thin;
  }
  .topbar-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
}



/* ===== Verificación en dos pasos ===== */
#verifyScreen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background-color: #0B2A6F;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  color: #FFFFFF;
}
#verifyScreen[hidden] { display: none; }
.verify-column {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.verify-title { margin: 8px 0 0; font-size: 26px; font-weight: 600; }
.verify-hint { margin: 0 0 12px; font-size: 15px; opacity: 0.85; }
.verify-form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.verify-form[hidden] { display: none; }
.verify-digits { display: flex; justify-content: center; gap: 8px; }
.code-digit {
  width: 52px;
  height: 60px;
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 26px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  caret-color: #5EE2F0;
}
.code-digit:focus { outline: none; border-color: #5EE2F0; box-shadow: 0 0 0 2px rgba(94, 226, 240, 0.35); }
.verify-digits.shake { animation: verify-shake 300ms ease-in-out; }
.verify-error {
  padding: 10px 12px;
  background: #FDECEC;
  color: #A3261B;
  font-weight: 600;
  border-radius: 8px;
}
.verify-error[hidden] { display: none; }
.form-error { margin: 0; font-size: 14px; color: var(--error); overflow-wrap: anywhere; }
.form-error[hidden] { display: none; }
.verify-submit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0B2A6F;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.verify-submit:disabled { opacity: 0.6; cursor: default; }
.verify-submit:focus-visible, .verify-link:focus-visible { outline: 2px solid #5EE2F0; outline-offset: 2px; }
.verify-success { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8px 0; }
.verify-success[hidden] { display: none; }
.verify-check {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: verify-pop 300ms ease-out;
}
.verify-success-text { margin: 0; font-size: 22px; font-weight: 600; }
.verify-timer { margin: 4px 0 0; font-size: 14px; opacity: 0.85; }
.verify-link {
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.verify-link[hidden] { display: none; }
.verify-link:disabled { opacity: 0.6; text-decoration: none; cursor: default; }
.verify-notice { margin: 0; min-height: 20px; font-size: 14px; color: #86EFAC; }
@keyframes verify-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
@keyframes verify-pop {
  from { transform: scale(0.6); }
  to { transform: scale(1); }
}
@media (max-width: 400px) {
  .verify-digits { gap: 6px; }
  .code-digit { width: 44px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .verify-digits.shake, .verify-check { animation: none; }
}

/* ===== Dar seguimiento ===== */
.detail-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 12px 0;
}
.detail-title-row h1 { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.follow-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 240px; }
.follow-btn {
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid #D5D9E0;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.follow-btn:hover { background: var(--bg); }
.follow-btn.following {
  background: #EEF2FC;
  border-color: #2E55C9;
  color: #1F3F99;
  font-weight: 600;
}
.follow-btn:disabled { opacity: 0.6; cursor: default; }
.follow-btn:focus-visible { outline: 2px solid #2E55C9; outline-offset: 2px; }
.follow-hint { margin: 0; font-size: 12px; color: var(--muted); text-align: right; }
.follow-hint[hidden] { display: none; }
@media (max-width: 860px) {
  .follow-box { align-items: flex-start; max-width: none; }
  .follow-hint { text-align: left; }
}

/* ===== Directorio y Administración ===== */
.page-view { padding: 28px 32px; box-sizing: border-box; width: 100%; }
.page-view[hidden], .topbar-tab[hidden] { display: none; }
.view-title { font-size: 24px; font-weight: 600; margin: 0 0 20px; }
.view-note { color: var(--muted); font-size: 13px; margin: 20px 0 0; }
.view-note[hidden] { display: none; }
.directory-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.directory-filters input,
.directory-filters select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  box-sizing: border-box;
}
.directory-filters input { flex: 1 1 260px; max-width: 420px; }
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.directory-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.directory-table th,
.directory-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.directory-table th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); }
.directory-table tbody tr:last-child td { border-bottom: none; }
.directory-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.directory-table .admin-only-col[hidden] { display: none; }
.directory-table select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
.id-cell { display: flex; align-items: center; gap: 8px; }
.id-cell .id-value { font-family: var(--mono); font-size: 13px; }
.link-btn { min-height: 32px; padding: 0 6px; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.state-active { color: #1D6B43; font-weight: 600; }
.state-inactive { color: var(--muted); }
.state-locked { display: block; color: #8A4B00; font-size: 12px; font-weight: 600; }

/* ===== Acciones sobre cuentas ===== */
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-actions select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
#accountsView .account-section + .account-section { margin-top: 24px; }
.comment-internal { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FFF4E0; color: #8A4B00; font-size: 12px; font-weight: 600; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.admin-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.admin-card h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; border-bottom: none; padding-bottom: 0; }
.admin-card-wide { grid-column: 1 / -1; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-card-head h2 { margin: 0; }
.admin-text { margin: 0 0 16px; color: var(--ink); line-height: 1.5; }
.admin-status { margin: 0; display: grid; gap: 12px; }
.admin-status dt { font-size: 12px; color: var(--muted); }
.admin-status dd { margin: 2px 0 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-dot.ok { background: #16A34A; }
.status-dot.bad { background: #B91C1C; }
.status-error { color: #B91C1C; overflow-wrap: anywhere; }
.status-sub { display: block; font-size: 13px; color: var(--muted); }
.count-list { list-style: none; margin: 0; padding: 0; }
.count-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.count-list li:last-child { border-bottom: none; }
.count-list .count { font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-ai-accuracy { margin: 12px 0 0; font-weight: 600; }

/* Borradores de correos */
.tab-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #B91C1C; color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.tab-badge[hidden] { display: none; }
.drafts-intro { margin: -8px 0 20px; }
.drafts-layout { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 20px; align-items: start; }
.drafts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.draft-item { width: 100%; text-align: left; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit; cursor: pointer; display: grid; gap: 4px; }
.draft-item:hover { border-color: #2E55C9; }
.draft-item[aria-current="true"] { border-color: #2E55C9; box-shadow: inset 3px 0 0 #2E55C9; }
.draft-item-subject { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.draft-item-meta { font-size: 13px; color: var(--muted); }
.draft-detail { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
.draft-detail .view-note { margin: 0; }
.draft-subject { font-size: 20px; margin: 0 0 4px; overflow-wrap: anywhere; }
.draft-meta { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.draft-section { font-size: 14px; margin: 16px 0 8px; color: var(--muted); }
.draft-body { margin: 0; padding: 12px; max-height: 280px; overflow: auto; background: #F6F7F9; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; }
.draft-ai { display: grid; gap: 8px; margin-bottom: 16px; }
.draft-ai p { margin: 0; line-height: 1.5; }
.draft-form { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.draft-actions .btn-submit { width: auto; }
.draft-actions [hidden] { display: none; }
@media (max-width: 860px) {
  .drafts-layout { grid-template-columns: 1fr; }
}

/* Análisis de la IA en el detalle del ticket */
.ai-card { background: #FFFFFF; border: 1px solid #E3E6EB; border-radius: 10px; padding: 16px; margin: 0 0 28px 0; display: grid; gap: 10px; }
.ai-card h2 { font-size: 15px; margin: 0; }
.ai-card p { margin: 0; line-height: 1.5; }
.ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-level { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #EEF0F3; color: #3F4752; }
.ai-level-4 { background: #FDE8E8; color: #B91C1C; }
.ai-level-3 { background: #FFEDD5; color: #9A3412; }
.ai-level-2 { background: #E0E9FB; color: #1F3F99; }
.ai-muted { color: var(--muted); }
.ai-overdue { color: #B91C1C; font-weight: 600; }
.ai-review { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #FEF3C7; color: #8A4B00; }
.ai-correct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ai-correct select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--surface); }
.admin-logs {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: #0F172A;
  color: #E2E8F0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
}
@media (max-width: 860px) {
  .page-view { padding: 20px 16px; }
}

/* ===== Asistente ===== */
/* Espacio al final para que el botón flotante no tape el último contenido */
#detailPanel, .page-view { padding-bottom: 96px; }
.ticket-list { padding-bottom: 88px; }
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #2E55C9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(15, 30, 74, 0.3);
  cursor: pointer;
}
.chat-fab:hover { background: #1F3F99; }
.chat-fab:focus-visible { outline: 3px solid #5EE2F0; outline-offset: 2px; }
.chat-fab[hidden], .chat-panel[hidden], .chat-suggestions[hidden] { display: none; }
/* El ícono se arrastra con el puntero (mouse o táctil); al soltarlo se acomoda al borde más cercano */
.chat-fab { touch-action: none; user-select: none; -webkit-user-select: none; }
.chat-fab.is-dragging { cursor: grabbing; }
.chat-fab.is-settling { transition: left 0.18s ease, top 0.18s ease; }
@media (prefers-reduced-motion: reduce) {
  .chat-fab.is-settling { transition: none; }
}
.chat-reset {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.9;
}
.chat-reset:hover { opacity: 1; }
.chat-reset:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 900;
  width: 360px;
  height: 520px;
  max-height: calc(100vh - 116px);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 30, 74, 0.25);
  overflow: hidden;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: #2E55C9;
  color: #FFFFFF;
}
.chat-title { margin: 0; padding: 0; border: none; font-size: 16px; font-weight: 600; color: #FFFFFF; }
.chat-role { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.chat-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.15); }
.chat-close:focus-visible { outline: 2px solid #FFFFFF; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.user { align-self: flex-end; background: #2E55C9; color: #FFFFFF; border-bottom-right-radius: 4px; }
.chat-msg.model { align-self: flex-start; background: #F1F3F6; color: #16191D; border-bottom-left-radius: 4px; }
.chat-msg.pending { align-self: flex-start; background: #F1F3F6; color: #5A6270; font-style: italic; }
.chat-msg.notice { align-self: flex-start; background: #F1F3F6; color: #8A4B00; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chat-suggestion {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #C9D4F2;
  border-radius: 999px;
  background: #EEF2FC;
  color: #1F3F99;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.chat-suggestion:hover { border-color: #2E55C9; }
.chat-suggestion:disabled { opacity: 0.6; cursor: default; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.chat-form textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
.chat-form textarea:focus { outline: none; border-color: #2E55C9; box-shadow: 0 0 0 2px rgba(46, 85, 201, 0.2); }
.chat-send {
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: #2E55C9;
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.chat-send:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 767px) {
  /* En celular el chat ocupa toda la pantalla */
  .chat-panel {
    inset: 0 !important;
    width: 100%;
    height: 100%;
    max-height: none !important;
    border-radius: 0;
    z-index: 950;
  }
}

/* ===== Perfil del solicitante ===== */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin-top: 20px;
}

.profile-form input[readonly] {
    background: var(--bg);
    color: var(--muted);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-actions .btn-submit {
    width: auto;
    min-width: 140px;
}

.help-text[hidden],
.profile-actions [hidden] {
    display: none;
}

/* Mientras el perfil esté incompleto solo se ve esa pantalla */
.profile-required .topbar-tab,
.profile-required #openNewTicket,
.profile-required #chatToggle {
    display: none !important;
}

.draft-reason {
    margin: -8px 0 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #FFF4E5;
    color: #8A4B00;
    font-size: 13px;
    font-weight: 600;
}

.draft-reason[hidden] {
    display: none;
}

/* ===== Invitaciones del personal ===== */
.invites-section {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}

.invites-section h3 {
    margin: 0;
}

.invites-section h4 {
    margin: 16px 0 8px;
}

.invite-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
    margin-top: 12px;
}

.invite-form .btn-action {
    min-height: 44px;
}

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

.invites-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.invites-table th,
.invites-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    overflow-wrap: anywhere;
}

.invites-table th {
    background: #F0F2F5;
}

/* ===== Mi cuenta ===== */
.account-section { margin-top: 28px; max-width: 480px; }
.account-section[hidden], .profile-form[hidden], .session-notice[hidden] { display: none; }
.account-title { font-size: 16px; font-weight: 600; margin: 0; }
.account-section .profile-form { margin-top: 12px; }
.account-current { margin: 8px 0 0; overflow-wrap: anywhere; }
.session-notice { margin: 0 0 16px; }

/* ===== Registro de cambios ===== */
.changes-list { list-style: none; margin: 0; padding: 0; }
.change-item { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.change-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.change-time { color: var(--muted); font-size: 13px; }
.change-line { font-size: 14px; }
.change-label { color: var(--muted); }
.changes-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.changes-pager .btn-secondary { min-height: 44px; }

/* ===== Disponibilidad, identidad y reportes (solo personal) ===== */
.account-tag { display: inline-block; margin: 4px 6px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; }
.tag-away { background: #FFF4E0; color: #8A4B00; }
.tag-reported { background: #FDE8E8; color: #9B1C1C; }
.tag-identity-match { background: #E6F4EA; color: #1E6B34; }
.tag-identity-mismatch { background: #FDE8E8; color: #9B1C1C; }
.tag-identity-not_found { background: #FFF4E0; color: #8A4B00; }
.tag-identity-unverified { background: var(--line-soft); color: var(--muted); }
.requester-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.requester-tags[hidden] { display: none; }
.requester-tag-list { display: inline-flex; flex-wrap: wrap; }
#accountAvailability[hidden], #ownAvailabilityReturnGroup[hidden], #availabilityReturnGroup[hidden] { display: none; }

.app-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-sizing: border-box; overflow-y: auto; }
.app-dialog::backdrop { background: rgba(22, 25, 29, 0.45); }
.app-dialog .modal-title { margin: 0 0 4px; }
.app-dialog select, .app-dialog textarea, .app-dialog input[type="date"] { width: 100%; box-sizing: border-box; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dialog-actions .btn-submit { width: auto; }
.dialog-error { margin: 0; color: #9B1C1C; font-weight: 600; }
.dialog-error[hidden] { display: none; }

@media (max-width: 480px) {
    .dialog-actions { flex-direction: column-reverse; }
    .dialog-actions button { width: 100%; min-height: 44px; }
}
.report-existing { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FFF4E0; color: #8A4B00; }
.report-existing[hidden] { display: none; }
.report-existing p { margin: 0 0 4px; font-weight: 600; }
.report-others { margin: 4px 0 0; color: #8A4B00; font-weight: 600; overflow-wrap: anywhere; }
.reports-account-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.reports-account-filter[hidden] { display: none; }
.tag-review { background: var(--accent-soft); color: var(--accent-dark); }
.report-waiting { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* ===== Horarios y asignación automática ===== */
.schedule-summary { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tag-on-shift { background: #E6F4EA; color: #1E6B34; }
.tag-off-shift { background: var(--line-soft); color: var(--muted); }
.tag-auto { background: var(--accent-soft); color: var(--accent-dark); margin-left: 6px; }
.assigned-auto { display: inline-flex; flex-wrap: wrap; align-items: center; color: var(--ink); }
#accountSchedule[hidden] { display: none; }
.schedule-view { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.schedule-view li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.schedule-day { font-weight: 600; }
.schedule-rows { display: grid; gap: 8px; }
.schedule-row { display: grid; grid-template-columns: 7.5em auto 1fr; align-items: center; gap: 8px; margin: 0; padding: 8px 0; border: none; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.schedule-row legend { float: left; padding: 0; }
.schedule-works-label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 400; }
.schedule-times { display: flex; flex-wrap: wrap; gap: 8px; }
.schedule-times label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; }
.schedule-times input[type="time"] { min-height: 36px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.schedule-times input:disabled { opacity: 0.5; }

@media (max-width: 480px) {
    /* Día y casilla en una línea, las horas debajo */
    .schedule-row { grid-template-columns: 1fr auto; }
    .schedule-times { grid-column: 1 / -1; }
    .schedule-times label { flex: 1 1 120px; }
    .schedule-times input[type="time"] { flex: 1; min-width: 0; }
}

/* ===== Mesa de servicio: estructura del personal ===== */
.tabular, .nav-count { font-variant-numeric: tabular-nums; }

.topbar {
  min-height: 52px;
  background: var(--navy);
  border: none;
  color: #FFFFFF;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  box-sizing: border-box;
}
.topbar-section { padding: 0; border: none; }
.topbar-action, .topbar-user { border: none; padding: 0; }
.topbar-action { margin-left: auto; }
.topbar-brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--blue);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}
.brand-name { font-weight: 600; font-size: 14px; }
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: transparent;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none !important; }
.topbar-tab { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.topbar-tab.active { color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--blue); }
.topbar .btn-primary { background: var(--blue); border-color: var(--blue); min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: 4px; }
.topbar .btn-secondary {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}
.topbar-avatar { width: 28px; height: 28px; font-size: 12px; background: rgba(255, 255, 255, 0.15); color: #FFFFFF; }
.topbar-user-name { font-size: 13px; }
.topbar-user-role { color: rgba(255, 255, 255, 0.7); font-size: 11px; }
.topbar-availability { font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.topbar-availability.is-active { color: #86EFAC; }
.topbar-availability[hidden] { display: none; }

.global-result {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.global-result:hover, .global-result:focus-visible { background: var(--selected); }

/* El personal usa el menú lateral en lugar de las pestañas */
body.staff-shell .topbar-nav { display: none; }
body.staff-shell .chat-fab { bottom: calc(var(--bar-h) + 14px); }
body.staff-shell .chat-panel { bottom: calc(var(--bar-h) + 82px); }

.side-nav {
  position: fixed;
  top: 52px;
  bottom: var(--bar-h);
  left: 0;
  width: 220px;
  background: var(--bg-side);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 40;
  box-sizing: border-box;
}
.side-nav[hidden] { display: none; }
.side-nav-groups { padding: 8px 0; }
.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 6px 14px;
  min-height: 32px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: var(--line-soft); }
.nav-item.active { background: var(--nav-active); color: var(--link); font-weight: 600; box-shadow: inset 3px 0 0 var(--blue); }
.nav-count { font-size: 12px; color: var(--muted); min-width: 16px; text-align: right; }
.nav-count.is-alert { color: var(--overdue); font-weight: 600; }
.nav-count.is-warn { color: var(--due-soon); font-weight: 600; }


.side-nav-backdrop { display: none; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #A0A4B8; }
.status-logo { height: 28px; width: auto; margin-left: auto; flex: 0 0 auto; }
.status-logo[hidden] { display: none; }

body.staff-shell main { padding-bottom: var(--bar-h); }

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .brand-name { display: none; }
  .topbar-user-text { display: none; }
  .topbar-action .btn-primary { font-size: 0; width: 32px; padding: 0; }
  .topbar-action .btn-primary::before { content: '+'; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.staff-shell .side-nav { transition: none; }
}

/* ===== Mesa de servicio: cola de tickets y panel de detalle ===== */
.account-tag { border-radius: 4px; font-size: 11px; padding: 0 6px; }
.queue-panel { display: none; }
body.staff-shell #listPanel { display: none; }
body.staff-shell .queue-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
body.staff-shell .split { grid-template-columns: minmax(0, 1fr) 380px; }
body.staff-shell #detailPanel { padding: 16px; font-size: 13px; }

.queue-head { padding: 12px 16px 8px; border-bottom: 1px solid var(--line); }
.queue-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.queue-title { font-size: 16px; font-weight: 600; margin: 0; }
.queue-total { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.queue-updated { font-size: 11px; color: var(--muted); margin-left: auto; }
.queue-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.queue-filters select {
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  padding: 0 6px;
}
.queue-filters select[hidden] { display: none; }
.queue-sort { font-size: 11px; color: var(--muted); margin-left: auto; }

.queue-table-wrap { flex: 1; overflow: auto; }
.queue-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.queue-table th {
  position: sticky;
  top: 0;
  background: var(--bg-side);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.queue-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.queue-row { cursor: pointer; }
.queue-row:hover { background: var(--bg-side); }
.queue-row.selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.queue-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.col-num { width: 60px; color: var(--muted); font-variant-numeric: tabular-nums; }
.col-status { width: 96px; }
.col-owner { width: 160px; }
.col-due { width: 130px; font-variant-numeric: tabular-nums; }
.queue-subject { font-weight: 500; color: var(--ink); }
.queue-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.queue-flag-reported { color: var(--overdue); font-weight: 600; margin-left: 6px; }
.queue-flag-auto { margin-left: 6px; font-style: italic; }
.queue-flag-incident { margin-left: 6px; }
.queue-owner.is-unassigned, .is-unassigned { color: var(--due-soon); font-weight: 500; }
.queue-note { font-size: 11px; color: var(--due-soon); margin-top: 2px; }
.queue-empty { padding: 24px 16px; color: var(--muted); margin: 0; }
.queue-empty[hidden] { display: none; }
.queue-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); }
.queue-pager .btn-secondary { min-height: 28px; padding: 2px 10px; font-size: 12px; border-radius: 4px; }
.queue-page { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.state-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.state-new { background: var(--selected); color: var(--link); }
.state-in_progress { background: #FFF4E0; color: var(--due-soon); }
.state-resolved { background: #E6F4EA; color: #1E6B34; }
.state-closed { background: var(--line-soft); color: var(--muted); }

.due-text-overdue { color: var(--overdue); font-weight: 600; }
.due-text-due_soon { color: var(--due-soon); font-weight: 600; }
.due-text-on_time { color: var(--ink); }
.due-text-none { color: var(--muted); }
.due-bar { height: 3px; background: var(--line-soft); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.due-fill { display: block; height: 100%; }
.due-fill.due-overdue { background: var(--overdue); }
.due-fill.due-due_soon { background: var(--due-soon-bar); }
.due-fill.due-on_time { background: var(--blue); }

.sd-head { margin-bottom: 12px; }
.sd-meta { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sd-title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.3; }
.sd-title-row .follow-box { flex: 0 0 auto; }
.sd-title-row .follow-btn { min-height: 28px; font-size: 12px; padding: 2px 8px; }
.sd-client { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.sd-client .account-tag { margin: 0; }
.sd-client-name { font-weight: 500; }
.sd-client .link-btn { min-height: 24px; font-size: 12px; padding: 0; }
.sd-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid #F5D9A8;
  background: #FFF8EC;
  color: var(--due-soon);
  border-radius: 4px;
}
.sd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sd-field dt { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.sd-field dd { margin: 0; min-width: 0; }
.sd-field select { width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; background: var(--surface); }
.sd-due-date { font-size: 11px; color: var(--muted); }
.sd-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 12px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
}
.sd-suggestion .btn-small { min-height: 26px; font-size: 12px; border-radius: 4px; }
.sd-description { margin: 0 0 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#detailPanel .ai-card { margin-bottom: 12px; }
.sd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.sd-tab {
  border: none;
  background: transparent;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}
.sd-tab[aria-selected="true"] { color: var(--link); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }
.sd-events { max-height: none; }
.sd-events ol { padding: 0 !important; }
.sd-composer { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.sd-reply {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.sd-composer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.sd-composer .btn-small, .sd-notice .btn-small { min-height: 30px; border-radius: 4px; }
.sd-composer .btn-primary, .sd-notice .btn-primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.sd-composer .btn-primary:disabled, .sd-composer .btn-secondary:disabled { opacity: 0.6; cursor: default; }
.sd-muted { color: var(--muted); margin: 0; }

@media (max-width: 860px) {
  body.staff-shell .split { grid-template-columns: 1fr; }
  body.staff-shell .split.show-detail .queue-panel { display: none; }
}
@media (max-width: 767px) {
  /* La tabla se convierte en tarjetas */
  .queue-table thead { display: none; }
  .queue-table, .queue-table tbody, .queue-table tr, .queue-table td { display: block; width: auto; }
  .queue-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .queue-table td { border: none; padding: 0; }
  .queue-row .col-num { grid-row: span 1; }
  .queue-row .col-subject { grid-column: 2; }
  .queue-row .col-status, .queue-row .col-owner, .queue-row .col-due { grid-column: 2; }
  .queue-row td[data-label]:not(.col-num):not(.col-subject)::before {
    content: attr(data-label) ": ";
    font-size: 11px;
    color: var(--muted);
  }
  .queue-sort, .queue-updated { margin-left: 0; }
  /* El detalle se abre en pantalla completa con el botón para volver */
  body.staff-shell .split.show-detail #detailPanel {
    position: fixed;
    inset: 52px 0 var(--bar-h) 0;
    z-index: 45;
    overflow-y: auto;
  }
  .sd-fields { grid-template-columns: 1fr; }
}

/* ===== Admin › Cuentas ===== */
.admin-accounts-view { display: grid; grid-template-columns: minmax(0, 1fr) 360px; padding: 0; min-height: calc(100vh - 52px - var(--bar-h)); }
.aa-main { padding: 16px; min-width: 0; display: flex; flex-direction: column; }
.aa-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.aa-head .view-title { margin: 0; font-size: 16px; }
.aa-search { flex: 1; min-width: 160px; max-width: 320px; height: 30px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; font: inherit; font-size: 13px; }
.aa-search:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.aa-head .btn-primary { margin-left: auto; }
/* Filtros rápidos: uno activo a la vez */
.aa-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.aa-quick-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12px; cursor: pointer;
}
.aa-quick-btn:hover { background: var(--bg-side); }
.aa-quick-btn[aria-pressed="true"] { background: var(--nav-active); border-color: var(--blue); color: var(--link); font-weight: 600; }
.aa-quick-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.aa-quick-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.aa-quick-count.is-warn { color: var(--due-soon); font-weight: 600; }
.aa-quick-count.is-alert { color: var(--overdue); font-weight: 600; }
.aa-head .btn-primary { background: var(--blue); border: 1px solid var(--blue); color: #FFFFFF; border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer; }
.aa-filters { margin: 4px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aa-filters input[type="search"] { height: 28px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; font: inherit; font-size: 12px; min-width: 200px; }
.aa-table { border-top: 1px solid var(--line); table-layout: fixed; }
.aa-col-type { width: 96px; }
.aa-col-state { width: 132px; }
.aa-col-identity { width: 132px; }
.aa-col-open { width: 72px; }
/* El nombre nunca se corta: salta de línea */
.aa-cell-name .queue-subject { white-space: normal; overflow-wrap: anywhere; }
.aa-cell-name .queue-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-table td .account-tag { margin: 0 4px 2px 0; }
.aa-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aa-panel-titles { min-width: 0; }
.aa-panel-titles .aa-name { overflow-wrap: anywhere; }
.aa-actions-btn { flex-shrink: 0; min-height: 30px; border-radius: 4px; }
.aa-ticket { min-height: 24px; padding: 0; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.account-menu-group { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* "Ver sus tickets": la cola filtrada por un cliente */
.queue-requester { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ink); }
.queue-requester[hidden] { display: none; }
.queue-requester .link-btn { min-height: 24px; padding: 0; font-size: 12px; }
.aa-panel { border-left: 1px solid var(--line); background: var(--surface); padding: 16px; overflow-y: auto; font-size: 13px; }
.aa-back { display: none; margin-bottom: 8px; }
.aa-name { font-size: 16px; font-weight: 600; margin: 0 0 2px; border: none; padding: 0; }
.aa-subtitle { font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.aa-account .sd-fields { margin-top: 10px; }
.aa-alerts, .aa-changes { list-style: none; margin: 0; padding: 0; }
.aa-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: 1px solid #F5D9A8;
  background: #FFF8EC;
  color: var(--due-soon);
  border-radius: 4px;
}
.aa-alert .btn-small { min-height: 26px; font-size: 12px; border-radius: 4px; }
.aa-alert .link-btn { min-height: 24px; padding: 0; font-size: 12px; }
.aa-account .account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.aa-account .account-actions .btn-small, .aa-role .btn-small, .aa-resend { min-height: 30px; border-radius: 4px; }
.aa-role { display: flex; gap: 6px; }
.aa-role select { height: 30px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; }
.aa-changes li { padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.aa-change-date { color: var(--muted); }
.acc-active { background: #E6F4EA; color: #1E6B34; }
.acc-locked { background: #FDE8E8; color: var(--overdue); }
.acc-inactive { background: var(--line-soft); color: var(--muted); }
.acc-vacation, .acc-away { background: #FFF4E0; color: var(--due-soon); }
.acc-invited { background: var(--selected); color: var(--link); }

@media (max-width: 767px) {
  .admin-accounts-view { grid-template-columns: 1fr; }
  .aa-panel { display: none; border-left: none; }
  .admin-accounts-view.show-detail .aa-main { display: none; }
  /* El panel ocupa la pantalla completa, con "Volver a la lista" */
  .admin-accounts-view.show-detail .aa-panel {
    display: block;
    position: fixed;
    inset: 52px 0 var(--bar-h) 0;
    z-index: 45;
  }
  .aa-back { display: inline-flex; }
  .aa-search { max-width: none; }
  /* Tarjetas: una columna, cada dato con su etiqueta */
  .aa-table .queue-row { grid-template-columns: 1fr; }
  .aa-table .queue-row td { grid-column: 1; }
}

/* ===== Portal del solicitante: Centro de Soporte ===== */
.portal-panel { display: none; }
body.requester-portal #listPanel { display: none; }
body.requester-portal .portal-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
body.requester-portal .split { grid-template-columns: 440px minmax(0, 1fr); min-height: calc(100vh - 52px - var(--bar-h)); }
body.requester-portal main { padding-bottom: var(--bar-h); }
body.requester-portal #detailPanel { padding: 20px 24px; font-size: 13px; }
body.requester-portal .chat-fab { bottom: calc(var(--bar-h) + 14px); }
body.requester-portal .chat-panel { bottom: calc(var(--bar-h) + 82px); }
.portal-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.portal-title { font-size: 16px; font-weight: 600; margin: 0; }
.portal-total { font-size: 12px; color: var(--muted); }
.portal-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.portal-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.portal-item:hover { background: var(--bg-side); }
.portal-item.selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.portal-item-title { font-weight: 500; }
.portal-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.portal-empty { padding: 24px 16px; color: var(--muted); margin: 0; }
.portal-empty[hidden] { display: none; }
.portal-detail-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.portal-steps { list-style: none; display: flex; gap: 0; margin: 0 0 16px; padding: 0; }
.portal-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 12px; color: var(--muted); }
.portal-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.portal-step.is-done:not(:first-child)::before, .portal-step.is-current:not(:first-child)::before { background: var(--blue); }
.portal-step-dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--muted);
}
.portal-step.is-done .portal-step-dot { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.portal-step.is-current .portal-step-dot { border-color: var(--blue); color: var(--link); }
.portal-step.is-current .portal-step-label { color: var(--link); font-weight: 600; }
.portal-step.is-done .portal-step-label { color: var(--ink); }
.portal-subtitle { font-size: 13px; font-weight: 600; margin: 16px 0 8px; border: none; padding: 0; }
.portal-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-message { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.portal-message.is-own { background: var(--selected); border-color: var(--nav-active); }
.portal-message-meta { margin: 0 0 2px; font-size: 11px; color: var(--muted); }
.portal-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-side);
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  z-index: 40;
  box-sizing: border-box;
}
.portal-footer[hidden] { display: none; }

@media (max-width: 860px) {
  body.requester-portal .split { grid-template-columns: 1fr; }
  body.requester-portal .split.show-detail .portal-panel { display: none; }
}
@media (max-width: 767px) {
  /* Detalle en pantalla completa; se vuelve con "Volver a la lista" */
  body.requester-portal .split.show-detail #detailPanel {
    position: fixed;
    inset: 0 0 var(--bar-h) 0;
    z-index: 55;
    overflow-y: auto;
    background: var(--surface);
  }
  body.requester-portal #detailPanel { padding: 16px; }
}

/* ===== Una sola sección por opción del menú ===== */
[data-account-section][hidden], [data-admin-section][hidden] { display: none !important; }
/* El título de la vista ya nombra la sección: el h2 queda solo para lectores de pantalla */
#accountsView > .account-section > .account-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ===== Tabla de personal (Equipo y Horarios): anchos fijos, sin barra horizontal ===== */
.team-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.team-col-role { width: 110px; }
.team-col-open { width: 96px; }
.team-col-state { width: 170px; }
.team-col-today { width: 190px; }
.team-col-actions { width: 124px; }
.team-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 12px;
  background: var(--bg-side);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-table td {
  min-height: 44px;
  height: 44px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  overflow: hidden;
}
/* Abiertos a la derecha, con un margen claro antes de Estado */
.team-table .num { text-align: right; padding-right: 28px; }
.team-on-shift { color: var(--on-shift); }
.team-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-name-main { font-weight: 500; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* Ancho completo: las secciones de Mi cuenta son angostas, esta tabla no */
#accountsView > .account-section { max-width: none; }
.team-email { font-size: 11px; color: var(--muted); }
.team-state-alert { color: var(--overdue); }
.team-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.team-actions .btn-small { min-height: 28px; padding: 2px 10px; font-size: 12px; border-radius: 4px; }
.row-menu-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.row-menu-btn:hover, .row-menu-btn[aria-expanded="true"] { background: var(--selected); }
.row-menu-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.row-menu {
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(16, 19, 46, 0.12);
}
.row-menu[hidden] { display: none; }
.row-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.row-menu-item:hover, .row-menu-item:focus { background: var(--selected); outline: none; }
.row-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.row-menu-item.is-danger { color: var(--overdue); }
.row-menu-sep { height: 1px; margin: 4px 0; background: var(--line); }

@media (max-width: 767px) {
  /* Cada persona es una tarjeta con las mismas acciones */
  .team-table, .team-table tbody, .team-table tr, .team-table td { display: block; width: auto; }
  .team-table thead, .team-table colgroup { display: none; }
  .team-row { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .team-table td { height: auto; padding: 2px 0; border: none; }
  .team-table td.num { text-align: left; }
  .team-table td[data-label]:not(.team-name)::before {
    content: attr(data-label) ": ";
    font-size: 11px;
    color: var(--muted);
  }
  .team-table td[data-label] > .team-trunc { display: inline; }
  .team-table td[data-label="Acciones"]::before { content: none; }
  .team-actions { margin-top: 6px; }
}

/* ===== Admin › Cuentas: filtro por horario ===== */
.aa-schedule-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); cursor: pointer; }
.aa-schedule-toggle input { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; }
.aa-schedule-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: -4px 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-side);
  font-size: 12px;
}
.aa-schedule-fields[hidden] { display: none; }
.aa-schedule-fields label { color: var(--muted); }
.aa-schedule-fields select, .aa-schedule-fields input {
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.aa-schedule-fields input:focus-visible, .aa-schedule-fields select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.aa-schedule-note { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); font-size: 11px; }

/* =====================================================================
   Sistema de diseño (rediseño 2026, docs/prototipo)
   Componentes reutilizables con prefijo ui- para no chocar con los estilos
   existentes. Los colores, espacios y radios salen de las variables de :root.
   ===================================================================== */

/* Foco visible en todo control que no tenga uno propio */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ----- Botones ----- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.ui-btn-primary { background: var(--blue); color: #FFFFFF; }
.ui-btn-primary:hover:not(:disabled) { background: var(--link); }
.ui-btn-secondary { background: var(--surface); border-color: var(--field-line); color: var(--ink); }
.ui-btn-secondary:hover:not(:disabled) { background: var(--bg-side); }
.ui-btn-danger { background: var(--overdue); color: #FFFFFF; }
.ui-btn-danger:hover:not(:disabled) { background: #912018; }
/* Acción delicada sin relleno, como "Descartar" */
.ui-btn-quiet-danger { background: transparent; color: var(--overdue); }
.ui-btn-quiet-danger:hover:not(:disabled) { background: var(--danger-soft); }
.ui-btn-navy { background: var(--navy); color: #FFFFFF; }
.ui-btn-navy:hover:not(:disabled) { background: var(--navy-2); }
.ui-btn-sm { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: 7px; }
.ui-btn-icon { width: 30px; min-height: 30px; padding: 0; }
.ui-link { color: var(--link); text-decoration: none; font-weight: 500; }
.ui-link:hover { color: var(--navy); text-decoration: underline; }

/* ----- Campos ----- */
.ui-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--ink); }
.ui-input {
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0 var(--sp-3);
    border: 1px solid var(--field-line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
}
textarea.ui-input { min-height: 84px; padding: 10px var(--sp-3); line-height: 1.5; resize: vertical; }
.ui-input:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.ui-input[aria-invalid="true"] { border-color: var(--overdue); }
.ui-input::placeholder { color: #80859E; }
.ui-help { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.ui-field-error { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--overdue); }
.ui-field-error[hidden] { display: none; }

/* ----- Pestañas ----- */
/* Segmentadas (vistas de la cola, periodo) */
.ui-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: 10px; background: #ECEEF3; }
.ui-tab {
    min-height: 30px;
    padding: 0 var(--sp-3);
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
}
.ui-tab[aria-selected="true"], .ui-tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.ui-tab-count { margin-left: var(--sp-1); font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
/* Subrayadas (compositor del ticket) */
.ui-tabs-line { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--line-soft); }
.ui-tab-line {
    min-height: 34px;
    padding: 0 var(--sp-3);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.ui-tab-line[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--blue); font-weight: 600; }

/* ----- Etiquetas de estado y urgencia ----- */
.ui-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--neutral-ink);
}
.ui-tag.is-info { background: var(--nav-active); color: var(--link); }
.ui-tag.is-ok { background: var(--ok-soft); color: var(--ok); }
.ui-tag.is-warn { background: var(--warn-soft); color: var(--due-soon); }
.ui-tag.is-danger { background: var(--danger-soft); color: var(--overdue); }
.ui-tag.is-navy { background: var(--navy); color: #FFFFFF; }
.ui-tag.is-mono { font-family: var(--mono); font-weight: 500; }
/* Urgencia por vencimiento: texto y barra */
.ui-due { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ui-due.is-overdue { color: var(--overdue); }
.ui-due.is-soon { color: var(--due-soon); }
.ui-bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--neutral-soft); overflow: hidden; }
.ui-bar > span { display: block; height: 100%; background: var(--blue); }
.ui-bar.is-overdue > span { background: var(--overdue); }
.ui-bar.is-soon > span { background: var(--due-soon-bar); }

/* ----- Tarjetas ----- */
.ui-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ui-card-pad { padding: 14px var(--sp-4); }
.ui-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.ui-card-title { margin: 0; font-size: var(--fs-md); font-weight: 600; }
/* Título pequeño en mayúsculas ("PROPIEDADES", "CLIENTE") */
.ui-kicker { margin: 0; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ui-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4) 18px; }
.ui-stat-label { font-size: var(--fs-sm); color: var(--muted); }
.ui-stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

/* ----- Tablas ----- */
.ui-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.ui-table th {
    height: 38px;
    padding: 0 var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
}
.ui-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr.is-clickable { cursor: pointer; }
.ui-table tbody tr.is-clickable:hover, .ui-table tbody tr[aria-selected="true"] { background: var(--selected); }
.ui-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ----- Avisos ----- */
.ui-notice {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 14px;
    border: 1px solid var(--info-line);
    border-radius: 10px;
    background: var(--info-soft);
    color: var(--ink);
    line-height: 1.45;
}
.ui-notice > :first-child { flex: 1; margin: 0; }
.ui-notice.is-warn { border-color: var(--note-line); background: var(--note-bg); }
.ui-notice.is-danger { border-color: #F1B8B0; background: var(--danger-soft); color: #7A1B12; }
.ui-notice.is-ok { border-color: #A7D8B5; background: var(--ok-soft); color: #0F4F26; }
.ui-notice[hidden] { display: none; }

/* ----- Modales (<dialog>) ----- */
.ui-modal {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: var(--sp-5) 22px;
    border: none;
    border-radius: var(--r-xl);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    overflow-y: auto;
}
.ui-modal::backdrop { background: rgba(14, 16, 48, 0.38); }
.ui-modal-title { margin: 0 0 var(--sp-1); font-size: 17px; font-weight: 600; }
.ui-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
@media (max-width: 480px) {
    .ui-modal-actions { flex-direction: column-reverse; }
    .ui-modal-actions .ui-btn { width: 100%; min-height: 44px; }
}

/* ----- Carga: filas grises ----- */
.ui-skeleton {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--skeleton) 0%, #F5F6F9 50%, var(--skeleton) 100%);
    background-size: 200% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
}
.ui-skeleton.is-soft { background: var(--line-soft); animation: none; }
.ui-skeleton-row td { height: 32px; }
.ui-skeleton-line { display: flex; flex-direction: column; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
@keyframes ui-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; }
}

/* ----- Estados vacíos y de error ----- */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px var(--sp-5);
    text-align: center;
    color: var(--muted);
}
.ui-empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ui-empty-text { margin: 0; max-width: 46ch; line-height: 1.5; }
.ui-empty .ui-btn { margin-top: 6px; }
.ui-empty.is-error .ui-empty-title { color: var(--overdue); }

/* ----- Avisos breves (toast) ----- */
.ui-toast-region {
    position: fixed;
    left: 28px;
    /* Por encima de la barra de estado del personal y del pie del portal */
    bottom: calc(var(--bar-h) + 14px);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(520px, calc(100vw - 32px));
    pointer-events: none;
}
.ui-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px 11px var(--sp-4);
    border-radius: 10px;
    background: var(--ink);
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(14, 16, 48, 0.3);
    line-height: 1.4;
    pointer-events: auto;
}
.ui-toast.is-error { background: #7A1B12; }
.ui-toast-text { flex: 1; }
.ui-toast-action {
    min-height: 28px;
    padding: 0 var(--sp-3);
    border: none;
    border-radius: 7px;
    background: var(--navy-line);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.ui-toast-action:hover { background: var(--blue); }
.ui-toast-close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--navy-muted);
    font: inherit;
    cursor: pointer;
}
.ui-toast-close:hover { color: #FFFFFF; }
.ui-toast :focus-visible { outline-color: #FFFFFF; }
@media (max-width: 600px) {
    .ui-toast-region { left: 16px; right: 16px; bottom: calc(var(--bar-h) + 10px); max-width: none; }
}

/* ----- Ajustes de los componentes existentes al sistema nuevo ----- */
.btn-submit, .btn-primary { font-weight: 500; }
.btn-submit:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-secondary { border-color: var(--field-line); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-side); }
.app-dialog { border: none; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.app-dialog::backdrop { background: rgba(14, 16, 48, 0.38); }
.state-new { background: var(--nav-active); color: var(--link); }
.state-in_progress { background: var(--warn-soft); color: var(--due-soon); }
.state-resolved { background: var(--ok-soft); color: var(--ok); }
.state-closed { background: var(--neutral-soft); color: var(--neutral-ink); }
#errorMessage { background-color: var(--danger-soft); border-color: #F1B8B0; color: var(--overdue); border-radius: 10px; box-shadow: var(--shadow-md); }

/* =====================================================================
   Navegación por módulos (N1)
   Barra superior fija azul marino de 56 px y menú blanco de 236 px con los
   módulos del rol. En el celular el menú es un panel que se abre con ☰.
   ===================================================================== */
body.staff-shell { --nav-w: 236px; --top-h: 56px; }
@media (max-width: 767px) {
  body.staff-shell { --nav-w: 0px; }
}
body.staff-shell main { margin-left: var(--nav-w); }
body.staff-shell .split { min-height: calc(100vh - var(--top-h) - var(--bar-h)); }
body.staff-shell .admin-accounts-view { min-height: calc(100vh - var(--top-h) - var(--bar-h)); }

/* ----- Barra superior ----- */
body.staff-shell .topbar {
  position: sticky;
  top: 0;
  height: var(--top-h);
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  padding: 0 20px 0 18px;
  background: var(--navy);
  color: #FFFFFF;
  z-index: 60;
}
body.staff-shell .topbar-brand { width: 202px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
body.staff-shell .brand-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--blue); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-sub { display: none; }
body.staff-shell .brand-name { font-weight: 600; color: #FFFFFF; font-size: 14px; }
body.staff-shell .brand-sub { display: block; font-size: 11px; color: var(--navy-muted); }
.top-search, .top-profile-box, .topbar .nav-bell { display: none; }
body.staff-shell .top-search {
  flex: 1 1 auto;
  max-width: 460px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #2A2AA0;
  border-radius: 9px;
  background: var(--navy-2);
  color: var(--navy-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
body.staff-shell .top-search:hover { border-color: #4B4BC4; color: #FFFFFF; }
.top-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search-kbd { font-family: var(--mono); font-size: 11px; color: var(--navy-muted); }
body.staff-shell .topbar-action { margin-left: auto; }
body.staff-shell #openNewTicket {
  height: 34px; padding: 0 14px; border: none; border-radius: 8px; background: var(--blue); color: #FFFFFF;
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
body.staff-shell .topbar .nav-bell {
  position: relative; flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--navy-text); cursor: pointer;
}
body.staff-shell .topbar .nav-bell:hover { background: var(--navy-2); color: #FFFFFF; }
body.staff-shell .topbar-user { display: none; }
body.staff-shell .top-profile-box { display: block; position: relative; flex: 0 0 auto; }
.top-profile {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: none; border-radius: 9px;
  background: transparent; color: #FFFFFF; font: inherit; text-align: left; cursor: pointer;
}
.top-profile:hover, .top-profile[aria-expanded="true"] { background: var(--navy-2); }
.top-profile-avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill); background: #2B2BA6; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.top-profile-text { display: flex; flex-direction: column; line-height: 1.2; }
.top-profile-name { font-weight: 500; font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-profile-role { font-size: 11px; color: var(--navy-muted); }
.profile-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; z-index: 90;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.profile-menu[hidden] { display: none; }
.profile-menu-item {
  padding: 8px 10px; border: none; border-radius: 6px; background: none; color: var(--ink);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.profile-menu-item:hover, .profile-menu-item:focus-visible { background: #EEF3FF; color: var(--link); outline: none; }
body.staff-shell .topbar :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
body.staff-shell .nav-toggle { display: none; }
/* La campana abre su panel debajo, a la derecha */
body.staff-shell .bell-panel { left: auto; right: 16px; top: calc(var(--top-h) + 8px); bottom: auto; }

/* ----- Menú por módulos ----- */
body.staff-shell .side-nav {
  position: fixed;
  top: var(--top-h);
  bottom: 0;
  left: 0;
  width: 236px;
  padding: 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  background: #FFFFFF;
  border-right: 1px solid var(--line);
  color: var(--ink);
  overflow-y: auto;
  z-index: 50;
}
/* Del menú viejo: quedan en la página hasta la limpieza (N5), pero no se muestran */
body.staff-shell .side-nav-groups { flex: 1 1 auto; min-height: 0; padding: 0; }
.nav-modules-title { margin: 0; padding: 0 10px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8A90A8; }
.nav-modules, .nav-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-sections { margin: 2px 0 6px; padding-left: 26px; }
.nav-sections[hidden] { display: none; }
.nav-module {
  width: 100%; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: none; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
.nav-module:hover { background: #F2F4F8; }
.nav-module.is-active, .nav-module.active { background: #EEF3FF; color: var(--link); }
.nav-module-caret { margin-left: auto; font-size: 11px; color: #8A90A8; }
body.staff-shell .nav-item {
  width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: none; border-radius: 8px;
  background: none; color: #5B6078; font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: none;
}
body.staff-shell .nav-item:hover { background: #F2F4F8; color: var(--ink); }
body.staff-shell .nav-item.active { background: #EEF3FF; color: var(--link); font-weight: 500; }
.nav-icon { flex: 0 0 auto; }
.nav-item-label { flex: 1; min-width: 0; text-align: left; }
body.staff-shell .nav-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: #8A90A8; }
body.staff-shell .nav-count.is-warn { color: #9A4A06; font-weight: 600; }
body.staff-shell .nav-count.is-alert { color: #B42318; font-weight: 600; }
.side-nav :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Abajo: turno (o estado del sistema) y Mi cuenta */
body.staff-shell .nav-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.nav-shift { margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.nav-shift[hidden] { display: none; }
.nav-shift.is-on { background: #F2FBF5; color: #146C34; }
.nav-shift.is-off { background: #F2F4F8; color: #5B6078; }
.nav-shift.is-warn { background: #FFF4E0; color: #9A4A06; }
.nav-shift-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: 0 0 auto; }
.nav-foot-links { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: #5B6078; }
.nav-foot-link { padding: 0; border: none; background: none; color: #5B6078; font: inherit; cursor: pointer; }
.nav-foot-link:hover, .nav-foot-link.active { color: var(--link); text-decoration: underline; }

/* ----- Cabecera de la página ----- */
.page-head { padding: 20px 32px 0; display: flex; flex-direction: column; gap: 4px; }
.page-head[hidden] { display: none; }
body.staff-shell.ticket-open .page-head { display: none; }
.page-crumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #8A90A8; }
.page-crumb-item + .page-crumb-item::before { content: "›"; margin-right: 6px; }
.page-title-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.page-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.page-context { margin: 0; color: #5B6078; }
.page-context[hidden] { display: none; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-actions:empty { display: none; }
/* Lo que ya dice la cabecera no se repite dentro de la vista */
body.staff-shell #queueHeading,
body.staff-shell #queueTitle,
body.staff-shell .queue-sort,
body.staff-shell #queueNewTicket,
body.staff-shell #draftsTitle,
body.staff-shell #accountsTitle,
body.staff-shell #adminTitle,
body.staff-shell #adminAccountsTitle,
body.staff-shell #invitesTitle,
body.staff-shell #reportsTitle { display: none; }

/* ----- Celular: barra compacta y menú en un panel con ☰ ----- */
@media (max-width: 767px) {
  body.staff-shell .topbar { gap: 8px; padding: 0 12px; }
  body.staff-shell .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
    border: none; border-radius: 9px; background: transparent; color: #FFFFFF; font-size: 18px; cursor: pointer;
  }
  body.staff-shell .topbar-brand { width: auto; }
  body.staff-shell .brand-text { display: none; }
  body.staff-shell .top-search { flex: 0 0 auto; width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  body.staff-shell .top-search-text, body.staff-shell .top-search-kbd { display: none; }
  body.staff-shell #openNewTicket { width: 36px; padding: 0; }
  body.staff-shell .top-profile-text { display: none; }
  body.staff-shell .side-nav { width: 264px; transform: translateX(-100%); transition: transform 0.15s ease; z-index: 70; }
  body.staff-shell.nav-open .side-nav { transform: none; }
  body.staff-shell.nav-open .side-nav-backdrop {
    display: block; position: fixed; inset: var(--top-h) 0 0 0; background: rgba(14, 16, 48, 0.45); z-index: 65;
  }
  .page-head { padding: 14px 16px 0; }
  .page-title { font-size: 20px; }
  body.staff-shell .bell-panel { left: 16px; right: 16px; width: auto; }
}


/* ----- Página del ticket ----- */
.ticket-bar[hidden] { display: none; }
body.staff-shell.ticket-open .split { display: block; }
body.staff-shell.ticket-open .split.show-detail .queue-panel { display: none; }
body.staff-shell .split:not(.show-detail) #detailPanel { display: none; }
body.staff-shell .split { grid-template-columns: minmax(0, 1fr); }
body.staff-shell #backToList { display: none; }
body.staff-shell.ticket-open #detailPanel {
  display: flex;
  position: static;
  min-height: calc(100vh - var(--top-h) - var(--bar-h));
  padding: 0;
  background: var(--bg-side);
}
body.staff-shell.ticket-open #detailContent {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--sp-5) 28px;
  box-sizing: border-box;
}
.ticket-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.ticket-bar-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--navy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.ticket-bar-crumb { margin-left: 6px; }
.ticket-bar-link {
  margin-left: 10px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.ticket-bar-link:hover { color: var(--navy); text-decoration: underline; }
.ticket-bar-steps { margin-left: auto; display: flex; gap: 6px; }
@media (max-width: 767px) {
  /* En el celular la barra superior también se oculta: la del ticket tiene "Volver" */
  .ticket-bar { padding: 10px 16px; }
  .ticket-bar-mark, .ticket-bar-crumb, .ticket-bar-link { display: none; }
  body.staff-shell.ticket-open #detailContent { padding: 16px; }
  body.staff-shell .split.show-detail #detailPanel { position: static; inset: auto; }
}

/* ----- Encabezado de la cola: botón "Nuevo ticket" ----- */
.queue-title-row #queueNewTicket { margin-left: var(--sp-2); }
.queue-title-row #queueNewTicket[hidden] { display: none; }

/* ----- Inicio ----- */
.home-view { display: flex; flex-direction: column; gap: 22px; padding: 28px 36px; }
.home-view[hidden] { display: none; }
.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4) 18px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.home-card:hover { border-color: var(--info-line); box-shadow: var(--shadow-sm); }
.home-card-value { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.home-card-detail { font-size: var(--fs-sm); color: var(--muted); }
.ui-stat-value.is-warn { color: var(--due-soon); }
.ui-stat-value.is-alert { color: var(--overdue); }
.ui-stat-value.is-ok { color: var(--ok); }
@media (max-width: 960px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home-view { padding: 20px 16px; }
}

/* =====================================================================
   Inicio de sesión (rediseño, Fase 3): una sola columna sobre el fondo
   de circuitos (img/fondo-adn.avif), logo sin placa y tarjeta oscura.
   ===================================================================== */
#authScreen {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  /* 20 px entre el texto y la tarjeta; cabe sin desplazamiento a 800 px de alto */
  gap: 20px;
  min-height: 100vh;
  padding: 34px 16px 24px;
  box-sizing: border-box;
  background-color: #020A26;
  background-image:
    radial-gradient(ellipse at 50% 38%, rgba(7, 37, 102, 0.35) 0%, rgba(3, 18, 58, 0.6) 45%, rgba(2, 10, 38, 0.85) 100%),
    url("img/fondo-adn.avif");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}
#authScreen .auth-panel {
  min-height: 0;
  padding: 0;
  gap: 0;
  background: none;
  overflow: visible;
}
#authScreen .auth-panel::before { content: none; }
#authScreen .auth-panel > .auth-hex {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 640px;
  height: 420px;
  max-width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}
#authScreen .auth-logo {
  width: 420px;
  max-width: 86vw;
  max-height: none;
  /* El SVG trae espacio vacío arriba (~56 px a 420 px de ancho) y abajo (~41 px): se recorta con
     márgenes negativos para que el login quepa en 800 px de alto sin cambiar cómo se ve el logo */
  margin: -44px 0 -31px;
  /* Contorno claro suave: el logo azul marino se distingue sobre el fondo oscuro sin usar placa */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(28, 200, 195, 0.3));
}
#authScreen .auth-kicker {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: #2FD9D3;
}
#authScreen .auth-tagline { margin-top: 6px; font-size: 18px; color: #DCE6FF; }

/* La tarjeta */
#authScreen .auth-card-container { padding: 0; background: none; width: 100%; max-width: 450px; }
#authScreen .auth-card {
  max-width: none;
  padding: 30px 36px;
  border: 1px solid rgba(28, 200, 195, 0.28);
  border-radius: 16px;
  background: rgba(5, 18, 56, 0.72);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
}
#authScreen .auth-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
#authScreen .auth-title { margin: 0 0 14px; font-size: 25px; line-height: 1.2; letter-spacing: -0.02em; color: #FFFFFF; }
#authScreen .auth-head .auth-title { margin: 0; }
#authScreen .auth-subtitle { margin: 0; font-size: 15px; color: #9FB3E6; }
#authScreen .help-text { color: #9FB3E6; }
#authScreen p.help-text { font-size: 15px; }
#authScreen .auth-form,
#authScreen form { display: flex; flex-direction: column; gap: 14px; }
#authScreen form[hidden] { display: none; }
#authScreen .form-group { margin: 0 !important; }
#authScreen .form-group label { margin-bottom: 6px; font-size: 14px; line-height: 1.2; font-weight: 500; color: #DCE6FF; }
#authScreen .form-group input {
  height: 50px;
  min-height: 50px;
  border: 1px solid #22396F;
  border-radius: 10px;
  background: #071A47;
  color: #FFFFFF;
  font-size: 15px;
}
#authScreen .form-group input::placeholder { color: #5D74AE; }
#authScreen .form-group input:focus { outline: none; border-color: #5EEAE4; box-shadow: 0 0 0 3px rgba(94, 234, 228, 0.25); }
#authScreen .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#authScreen .auth-label-row label { margin-bottom: 6px; }

/* Pestañas Cliente / Personal / Administración */
.login-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 9px; background: #06153D; }
.login-tab {
  flex: 1;
  min-height: 38px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #9FB3E6;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.login-tab:hover { color: #FFFFFF; }
.login-tab[aria-selected="true"] { background: var(--blue); color: #FFFFFF; font-weight: 600; }

/* Botones y enlaces sobre fondo oscuro */
#authScreen .btn-submit {
  min-height: 52px;
  font-size: 16px;
  border-radius: 9px;
  background: var(--blue);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 65, 255, 0.35);
}
#authScreen .btn-submit:hover { background: #2A5CFF; }
#authScreen .btn-secondary { background: transparent; border-color: #22396F; color: #DCE6FF; border-radius: 9px; }
#authScreen .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
#authScreen .btn-secondary:disabled { opacity: 0.6; }
#authScreen .auth-secondary { margin-top: 0; }
#authScreen .auth-link { color: #5EEAE4; font-size: 14px; }
#authScreen .auth-link:hover { color: #FFFFFF; }
#authScreen .auth-link-small { min-height: 0; font-size: 14px; font-weight: 400; line-height: 1.2; }
#authScreen .auth-link-inline { display: inline; min-height: 0; }
#authScreen :focus-visible { outline: 2px solid #5EEAE4; outline-offset: 2px; }
#authScreen .auth-links { margin-top: 18px; padding-top: 14px; border-top-color: rgba(159, 179, 230, 0.2); }
.login-extra { margin: 14px 0 0; font-size: 14px; text-align: center; color: #9FB3E6; }

/* Botón "Entrar con Microsoft": colores, logo y letra de la guía de marca de Microsoft (tema claro) */
.ms-login { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ms-login[hidden] { display: none; }
.ms-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 41px;
  padding: 0 12px;
  border: 1px solid #8C8C8C;
  border-radius: 0;
  background: #FFFFFF;
  color: #5E5E5E;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ms-signin:hover { background: #F3F3F3; color: #5E5E5E; }
.ms-signin-logo { flex: none; }
#authScreen .ms-emergency { align-self: center; color: #9FB3E6; font-size: 13px; }
#authScreen .ms-emergency[hidden] { display: none; }
.login-extra[hidden] { display: none; }

/* Avisos y contraseña generada */
#authScreen .auth-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #1F4BD1;
  border-radius: 9px;
  background: rgba(0, 65, 255, 0.14);
  color: #DCE6FF;
  font-size: 14px;
  line-height: 1.45;
}
#authScreen #confirmEmailNotice, #authScreen #sessionNotice { margin-bottom: 14px; }
#authScreen #confirmEmailNotice { margin: 14px 0 0; }
#authScreen .password-reveal, #authScreen .password-warning { font-size: 14px; }
#authScreen .password-reveal-title { color: #4ADE80; }
#authScreen .password-value { border-color: #22396F; background: #071A47; color: #FFFFFF; }
#authScreen .password-warning { color: #FBBF24; }

@media (max-width: 860px) {
  /* Antes se ocultaba el panel del logo en pantallas angostas; ahora siempre se ve */
  #authScreen .auth-panel { display: flex; }
}
@media (max-width: 480px) {
  #authScreen { padding: 28px 16px 24px; }
  #authScreen .auth-logo { width: 290px; margin: -30px 0 -21px; }
  #authScreen .auth-kicker { font-size: 13px; }
  #authScreen .auth-tagline { font-size: 16px; }
  #authScreen .auth-card { padding: 24px 18px; }
  /* "Administración" a 14 px no cabe en un tercio de 375 px */
  .login-tab { font-size: 13px; }
}

/* ----- Verificación por código: mismo fondo y tarjeta oscura ----- */
#verifyScreen {
  background-color: #020A26;
  background-image:
    radial-gradient(ellipse at 50% 38%, rgba(7, 37, 102, 0.35) 0%, rgba(3, 18, 58, 0.6) 45%, rgba(2, 10, 38, 0.85) 100%),
    url("img/fondo-adn.avif");
  background-size: cover, cover;
  background-position: center, center;
}
#verifyScreen .verify-column {
  max-width: 380px;
  padding: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(28, 200, 195, 0.28);
  border-radius: 16px;
  background: rgba(5, 18, 56, 0.72);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#verifyScreen .verify-title { font-size: 20px; letter-spacing: -0.02em; }
#verifyScreen .verify-hint { color: #9FB3E6; opacity: 1; font-size: var(--fs-md); }
#verifyScreen .verify-digits { gap: 6px; }
#verifyScreen .code-digit { width: 44px; height: 54px; border: 1px solid #22396F; border-radius: 9px; background: #071A47; font-size: 22px; }
#verifyScreen .code-digit:focus { border-color: #5EEAE4; box-shadow: 0 0 0 3px rgba(94, 234, 228, 0.25); }
#verifyScreen .verify-submit { height: 44px; border-radius: 9px; background: var(--blue); color: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 65, 255, 0.35); }
#verifyScreen .verify-timer { color: #9FB3E6; opacity: 1; }
#verifyScreen .verify-link { color: #5EEAE4; }
@media (max-width: 380px) {
  #verifyScreen .verify-column { padding: 22px 14px; }
  #verifyScreen .code-digit { width: 38px; height: 48px; }
}

/* ----- Barra de estado compacta al pie de la barra lateral ----- */
body.staff-shell { --bar-h: 0px; }
body.staff-shell .status-dot { background: #6B74C9; }

/* Logo de la empresa al pie del contenido del personal */
.staff-footer { display: flex; justify-content: flex-end; padding: 8px 32px 20px; }
.staff-footer[hidden] { display: none; }
.staff-logo { height: 26px; width: auto; opacity: 0.9; }
.staff-logo[hidden] { display: none; }

/* =====================================================================
   Fase 4 · Tickets (P-Tickets)
   ===================================================================== */
body.staff-shell .queue-panel { background: var(--bg-side); border-right: none; padding: 26px 32px 18px; gap: 16px; }
#queuePanel .queue-head { padding: 0; border: none; display: flex; flex-direction: column; gap: 14px; }
#queuePanel .queue-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.queue-heading { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
#queuePanel .queue-title { font-size: var(--fs-base); font-weight: 500; color: var(--ink); }
#queuePanel .queue-sort { color: var(--muted); margin-left: -6px; }
.queue-help { font-family: var(--mono); }
.queue-help[hidden] { display: none; }
#queuePanel #queueNewTicket { margin-left: auto; }
.queue-views { align-self: flex-start; }
.ui-tab-count.is-warn { color: var(--due-soon); font-weight: 600; }
.ui-tab-count.is-alert { color: var(--overdue); font-weight: 600; }
#queuePanel .queue-filters { margin: 0; gap: var(--sp-2); }
/* Filtros como chips: punteados sin valor, azules con valor */
#queuePanel .queue-chip {
  width: auto;
  min-height: 30px;
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px dashed #C9CEDB;
  border-radius: var(--r-md);
  background-color: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
#queuePanel .queue-chip.is-set { border-style: solid; border-color: var(--blue); background-color: var(--nav-active); color: var(--link); font-weight: 600; }
#queuePanel .queue-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#queuePanel .queue-requester { margin: 0; padding: 4px 10px; border-radius: var(--r-md); background: var(--nav-active); color: var(--link); font-weight: 500; }
#queuePanel .queue-updated { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.queue-new-banner { padding: 9px 14px; color: var(--link); background: var(--nav-active); }
.queue-new-banner::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--blue); flex: 0 0 auto; }

/* Tarjeta con la tabla */
.queue-card { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
#queuePanel .queue-table-wrap { overflow: auto; }
#queuePanel .queue-table { table-layout: fixed; font-size: var(--fs-base); }
#queuePanel col.col-num { width: 72px; }
#queuePanel col.col-level { width: 72px; }
#queuePanel col.col-owner { width: 200px; }
#queuePanel col.col-due { width: 150px; }
#queuePanel .queue-table th {
  height: 38px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
#queuePanel .queue-table td { height: 56px; padding: 8px 14px; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
#queuePanel .queue-row:hover { background: var(--bg-side); }
#queuePanel .queue-row.selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
#queuePanel .col-num { font-size: var(--fs-sm); color: var(--muted); }
#queuePanel .queue-subject { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#queuePanel .queue-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.queue-owner-box { display: flex; align-items: center; gap: 8px; min-width: 0; }
.queue-owner-text { display: flex; flex-direction: column; min-width: 0; }
#queuePanel .queue-owner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#queuePanel .queue-note { margin: 0; }
.owner-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--nav-active);
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.owner-avatar.is-unassigned { border: 1px dashed #D9A35B; background: var(--note-bg); color: var(--due-soon); }
#queuePanel .col-due .ui-bar { margin-top: 5px; }
#queuePanel .queue-empty { padding: 0; }
#queuePanel .queue-pager { justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--muted); }
.queue-pager-buttons { display: flex; align-items: center; gap: 6px; }
.ui-skeleton-row td { padding: 0 14px; }

@media (max-width: 767px) {
  body.staff-shell .queue-panel { padding: 16px; }
  #queuePanel #queueNewTicket { margin-left: 0; }
  .queue-views { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .queue-views .ui-tab { white-space: nowrap; }
  #queuePanel .queue-table { table-layout: auto; }
  #queuePanel .queue-table td { height: auto; padding: 0; }
  #queuePanel .queue-row .col-level, #queuePanel .queue-row .col-owner, #queuePanel .queue-row .col-due { grid-column: 2; }
  #queuePanel .queue-subject { white-space: normal; }
  #queuePanel .queue-updated { margin-left: 0; flex-basis: 100%; }
  #queuePanel .queue-pager { flex-wrap: wrap; gap: 8px; }
}

/* =====================================================================
   Fase 4 · Detalle del ticket (P-Ticket)
   ===================================================================== */
body.staff-shell.ticket-open #detailContent { max-width: none; padding: 0; font-size: var(--fs-base); }
.td-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.td-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.td-title { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.td-head .follow-box { flex-direction: row; align-items: center; max-width: none; }
.td-head .follow-btn { min-height: 34px; font-size: var(--fs-sm); border-radius: var(--r-md); }
.td-status-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.td-status-label select, .td-props select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
}
.td-props select { width: 100%; font-weight: 400; }
.td-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.td-tags .state-tag { font-size: var(--fs-sm); padding: 3px 8px; border-radius: var(--r-sm); }
.td-tags .ui-tag { font-size: var(--fs-sm); padding: 3px 8px; }
.td-tags-meta { margin-right: -4px; }

.td-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; padding: 20px 28px; align-items: start; }
.td-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.td-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Mensajes y línea de tiempo */
.td-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.td-message.is-internal { background: var(--note-bg); border-color: var(--note-line); }
.td-message.is-internal .td-message-kind { color: var(--due-soon); font-weight: 500; }
.td-message.is-internal .td-message-body { color: #3A2A10; }
.td-message-meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.td-message-meta strong { color: var(--ink); font-weight: 600; }
.td-message-body { margin: 0; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.td-filter { align-self: flex-start; margin-top: 6px; }
.td-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.td-event { margin: 0; padding-left: 2px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.td-event strong { color: var(--ink); font-weight: 600; }
.td-event-arrow { color: var(--muted); }
.td-events .ui-empty { padding: 24px 16px; }

/* Compositor */
.td-composer { overflow: hidden; margin-top: 4px; }
.td-composer .ui-tab-line.is-note[aria-selected="true"] { border-bottom-color: #D97706; color: var(--due-soon); }
.td-reply {
  display: block;
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: none;
  resize: vertical;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.td-reply:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.td-composer.is-internal .td-reply { background: var(--note-bg); }
.td-composer.is-internal .td-reply:focus-visible { outline-color: #D97706; }
.td-composer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.td-composer-hint { flex: 1 1 200px; font-size: var(--fs-sm); color: var(--muted); }
.td-composer.is-internal .td-composer-hint { color: var(--due-soon); font-weight: 500; }
.td-send-note { background: #B45309; color: #FFFFFF; }
.td-send-note:hover:not(:disabled) { background: #92400E; }
.td-composer .ui-btn:disabled { opacity: 0.6; cursor: default; }
.td-composer-closed { margin: 0; padding: 14px 16px; color: var(--muted); }

/* Columna derecha */
.td-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.td-props { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: 9px; column-gap: 8px; align-items: center; }
.td-props .sd-field { display: contents; }
.td-props dt { color: var(--muted); font-size: var(--fs-base); }
.td-props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.td-props .sd-due { display: flex; flex-direction: column; gap: 4px; }
.td-suggestion { background: var(--info-soft); border-color: var(--info-line); }
.td-suggestion .ui-kicker { color: var(--navy); }
.td-suggestion-text { margin: 0; line-height: 1.5; }
.td-suggestion .ui-btn { align-self: flex-start; }
.td-client-row { display: flex; align-items: center; gap: 10px; }
.td-client-avatar { width: 30px; height: 30px; font-size: var(--fs-xs); }
.td-client-name { font-weight: 500; }
.td-client-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.td-client-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.td-client-links .ticket-bar-link { margin: 0; padding: 2px 0; font-size: var(--fs-sm); }
.td-side .sd-notice { justify-content: space-between; }
#detailPanel .td-side .ai-card { margin: 0; padding: 14px 16px; border-color: var(--line); border-radius: var(--r-lg); gap: 8px; }
#detailPanel .td-side .ai-card h2 { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
#detailPanel .td-side .ai-card p { color: var(--ink-2); }

@media (max-width: 1100px) {
  .td-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .td-grid { grid-template-columns: minmax(0, 1fr); }
  /* En pantallas angostas los datos del ticket van primero */
  .td-side { order: -1; }
}
@media (max-width: 767px) {
  .td-head { padding: 14px 16px; }
  .td-grid { padding: 16px; }
  .td-title { flex-basis: 100%; font-size: 18px; }
}

/* ----- Inicio (P-Inicio) ----- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.home-panel { overflow: hidden; }
.home-panel[hidden] { display: none; }
.home-list { list-style: none; margin: 0; padding: 0; }
.home-list > li { border-bottom: 1px solid var(--line-soft); }
.home-list > li:last-child { border-bottom: none; }
.home-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.home-row:hover { background: var(--bg-side); }
.home-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.home-row-id { width: 44px; flex: 0 0 auto; font-size: var(--fs-sm); color: var(--muted); }
.home-row-id.is-report { color: var(--overdue); }
.home-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-row-title { font-weight: 500; overflow-wrap: anywhere; }
.home-row-title.is-muted { color: var(--muted); }
.home-row-sub { font-size: var(--fs-sm); color: var(--muted); }
.home-row-sub.is-warn { color: var(--due-soon); }
.home-team-count { font-size: var(--fs-sm); color: var(--muted); }
.home-team-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.home-team-avatar { width: 30px; height: 30px; font-size: var(--fs-xs); }
.home-team-avatar.is-away { background: var(--line-soft); color: var(--muted); }
.home-load { width: 64px; height: 6px; flex: 0 0 auto; }
.home-panel-foot { margin: 0; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--muted); }
.home-list .ui-empty { padding: 28px 18px; }
@media (max-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Fase 5 · Nuevo ticket (P-Nuevo): con la barra superior y el menú por módulos (N1)
   ===================================================================== */
.new-ticket-view { padding: 0; background: var(--bg-side); min-height: calc(100vh - var(--top-h, 0px)); }
.new-ticket-view[hidden] { display: none; }
.new-ticket-bar { position: static; }
.new-ticket-bar b { color: var(--ink); font-weight: 500; }
/* El portal del solicitante tiene su propia barra superior */
body:not(.staff-shell) .new-ticket-bar .ticket-bar-mark { display: none; }
.new-ticket-layout {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 26px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
body:not(.staff-shell) .new-ticket-layout { grid-template-columns: minmax(0, 720px); justify-content: center; }
.new-ticket-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-xl); }
.new-ticket-head { display: flex; flex-direction: column; gap: 4px; }
.new-ticket-title { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
.new-ticket-intro { margin: 0; color: var(--muted); }
.new-ticket-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.new-ticket-form .requester-group[hidden] { display: none; }
.new-ticket-form .requester-row { display: flex; gap: 8px; }
.new-ticket-form .requester-row .ui-input { flex: 1; }
.new-ticket-form .ui-input[readonly] { background: var(--bg-side); color: var(--muted); }
.new-ticket-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.new-ticket-aside { display: flex; flex-direction: column; gap: 12px; }
.new-ticket-aside[hidden] { display: none; }
.new-ticket-open { overflow: hidden; }
.new-ticket-open-title { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.new-ticket-open-row { padding: 11px 16px; }
.new-ticket-advice { margin: 0; padding: 0 4px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.new-ticket-client-link { align-self: flex-start; margin: 0; padding: 0 4px; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .new-ticket-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .new-ticket-row { grid-template-columns: minmax(0, 1fr); }
  .new-ticket-form { padding: 18px 16px; }
  .new-ticket-actions { flex-direction: column-reverse; }
  .new-ticket-actions .ui-btn { width: 100%; min-height: 44px; }
}

/* =====================================================================
   Fase 5 · Cuentas (P-Cliente): lista a la izquierda y ficha a la derecha
   ===================================================================== */
.admin-accounts-view { grid-template-columns: 340px minmax(0, 1fr); background: var(--bg-side); }
.aa-main { padding: 22px 0 0; background: var(--surface); border-right: 1px solid var(--line); gap: 12px; }
.aa-main > .aa-head, .aa-main > .aa-quick, .aa-main > .aa-filters, .aa-main > .aa-schedule-fields { margin: 0; padding: 0 18px; }
.aa-head .view-title { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.aa-head #aaInvite { margin-left: auto; }
.aa-search { order: 3; flex-basis: 100%; max-width: none; height: 34px; min-height: 34px; background: var(--bg-side); border-color: var(--line); }
.aa-quick-btn {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--neutral-ink);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.aa-quick-btn[aria-pressed="true"] { border-color: var(--blue); background: var(--nav-active); color: var(--link); font-weight: 600; }
.aa-quick-count { font-family: var(--mono); font-size: var(--fs-xs); margin-left: 2px; }
.aa-main > .aa-filters { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.aa-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.aa-list > .ui-skeleton-line { padding: 14px 18px; }
.aa-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.aa-row:hover { background: var(--bg-side); }
.aa-row.selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.aa-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.aa-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--nav-active);
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.aa-avatar.is-client { background: var(--neutral-soft); color: var(--neutral-ink); }
.aa-avatar-lg { width: 52px; height: 52px; font-size: 17px; background: var(--nav-active); color: var(--link); }
.aa-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aa-row-name { font-weight: 500; overflow-wrap: anywhere; }
.aa-row-sub { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-row .ui-tag { font-size: 10px; }
.aa-empty[hidden] { display: none; }

.aa-panel { border-left: none; background: var(--bg-side); padding: 24px 30px; font-size: var(--fs-base); }
.aa-account { display: flex; flex-direction: column; gap: 18px; }
.aa-panel-head { align-items: center; justify-content: flex-start; gap: 14px; margin: 0; }
.aa-panel-titles { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.aa-name { font-size: var(--fs-2xl); letter-spacing: -0.02em; margin: 0; }
.aa-panel-meta { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); }
.aa-actions-btn { min-height: 36px; border-radius: var(--r-md); }
.aa-alerts { display: flex; flex-direction: column; gap: 8px; }
.aa-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 14px; border: 1px solid var(--note-line); border-radius: 10px; background: var(--note-bg); color: var(--ink); line-height: 1.45; font-size: var(--fs-base); }
.aa-alert > span { flex: 1 1 240px; }
.aa-alert .ticket-bar-link { margin: 0; white-space: nowrap; }
.aa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aa-stat { padding: 14px 16px; gap: 4px; }
.aa-stat-value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.aa-section { overflow: hidden; }
.aa-section .ui-card-head { padding: 13px 16px; }
.aa-section .home-row { padding: 12px 16px; }
.aa-section .aa-changes { padding: 4px 16px 8px; }
.aa-section .aa-changes li { padding: 8px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.aa-section .ui-empty { padding: 24px 16px; }

@media (max-width: 1100px) {
  .admin-accounts-view { grid-template-columns: 300px minmax(0, 1fr); }
  .aa-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .admin-accounts-view { grid-template-columns: 1fr; }
  .aa-main { padding-top: 16px; border-right: none; }
  .aa-main > .aa-head, .aa-main > .aa-quick, .aa-main > .aa-filters, .aa-main > .aa-schedule-fields { padding: 0 16px; }
  .aa-panel { padding: 16px; }
  .admin-accounts-view.show-detail .aa-panel { inset: var(--top-h, 52px) 0 0 0; overflow-y: auto; }
  .aa-panel-head { flex-wrap: wrap; }
  .aa-actions-btn { width: 100%; }
}

/* =====================================================================
   Fase 5 · Equipo y turnos (P-Equipo)
   ===================================================================== */
#accountsView { background: var(--bg-side); }
#accountsView .view-title { margin: 0 0 4px; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.team-week-section { display: flex; flex-direction: column; gap: 16px; border: none; padding: 0; background: none; }
.team-week-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.team-week-label { margin: 0; color: var(--muted); }
.team-week-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.team-body { display: flex; flex-direction: column; gap: 16px; }
.team-week { overflow-x: auto; }
.team-week-grid { min-width: 820px; }
.team-week-grid > .ui-skeleton-line { padding: 18px; }
.team-week-row { display: grid; grid-template-columns: 220px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); min-height: 64px; }
.team-week-row:last-child { border-bottom: none; }
.team-week-header { min-height: 0; border-bottom-color: var(--line-soft); }
.team-week-person-head, .team-week-day { padding: 10px 8px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; color: var(--muted); }
.team-week-person-head { padding-left: 16px; }
.team-week-day { font-family: var(--mono); text-align: center; border-left: 1px solid var(--line-soft); }
.team-week-day.is-today { color: var(--link); font-weight: 600; background: var(--info-soft); }
.team-week-person { display: flex; }
.team-person {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.team-person:hover { background: var(--bg-side); }
.team-person[aria-pressed="true"] { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.team-person:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.team-person-status { font-size: var(--fs-sm); color: var(--muted); }
.team-person-status.is-ok { color: var(--ok); }
.team-person-status.is-warn { color: var(--due-soon); }
.team-person-status.is-alert { color: var(--overdue); }
.team-week-cell { display: flex; align-items: center; justify-content: center; padding: 8px 6px; border-left: 1px solid var(--line-soft); }
.team-week-cell.is-today { background: #F7F9FF; }
.team-shift {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 4px;
  border-radius: 7px;
  background: var(--nav-active);
  color: var(--link);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  text-align: center;
}
.team-shift.is-coordinator { background: var(--line-soft); color: var(--neutral-ink); border: 1px dashed #C9CEDB; }
.team-shift.is-away { background: var(--warn-soft); color: var(--due-soon); font-family: var(--font); }
.team-shift.is-empty { background: none; color: #A3A8B8; }
.team-selected { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 16px 18px; }
.team-selected[hidden] { display: none; }
.team-selected-info { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-selected-name { margin: 0; font-size: 15px; font-weight: 600; }
.team-selected-detail { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.team-selected-numbers { margin: 0; color: var(--muted); }
.team-selected-numbers b { color: var(--ink); font-weight: 600; }
.team-selected-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.team-week-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.aa-alert { margin: 0; }
@media (max-width: 767px) {
  .team-selected-actions { width: 100%; }
  .team-selected-actions .ui-btn { flex: 1 1 auto; min-height: 40px; }
}

/* =====================================================================
   Fase 5 · Borradores de correo (P-Borradores)
   ===================================================================== */
.drafts-view { padding: 0; background: var(--bg-side); }
.drafts-view .drafts-layout { grid-template-columns: 380px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - var(--top-h, 0px)); }
.drafts-side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.drafts-side-head { padding: 22px 18px 14px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.drafts-title { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
.drafts-intro { margin: 0; color: var(--muted); }
.drafts-view .drafts-list { list-style: none; margin: 0; padding: 0; display: block; }
.drafts-view .draft-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--surface);
}
.drafts-view .draft-item:hover { background: var(--bg-side); border-color: var(--line-soft); }
.drafts-view .draft-item[aria-current="true"] { background: var(--selected); box-shadow: inset 3px 0 0 var(--blue); }
.draft-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.draft-item-top { display: flex; justify-content: space-between; gap: 8px; }
.draft-item-from { font-weight: 600; color: var(--ink); }
.draft-item-time { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.drafts-view .draft-item-subject { font-weight: 500; }
.draft-item-snippet { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-item .ui-tag { align-self: flex-start; }
.drafts-view .draft-detail { background: none; border: none; border-radius: 0; padding: 24px 32px; }
.draft-content { display: flex; flex-direction: column; gap: 16px; }
.draft-content[hidden] { display: none; }
.draft-head { display: flex; align-items: flex-start; gap: 14px; }
.draft-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.draft-number { margin: 0; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.drafts-view .draft-subject { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
.drafts-view .draft-meta { margin: 0; }
.drafts-view .draft-meta b { font-weight: 500; color: var(--ink); }
.draft-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.draft-flags[hidden] { display: none; }
.draft-flags .ticket-bar-link { margin: 0; }
.drafts-view .draft-reason { margin: 0; }
.drafts-view .draft-body { margin: 0; max-height: 320px; padding: 18px 20px; background: var(--surface); line-height: 1.6; color: var(--ink-2); font-size: var(--fs-base); }
.draft-ai-box { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--info-line); border-radius: var(--r-lg); background: var(--info-soft); }
.draft-ai-title { margin: 0; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.05em; color: var(--navy); }
.drafts-view .draft-ai { margin: 0; gap: 10px; }
.draft-ai-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.draft-ai-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.draft-ai-facts dt { font-size: var(--fs-sm); color: var(--muted); }
.draft-ai-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.draft-ai-note { margin: 0; line-height: 1.5; }
.drafts-view .draft-form { border-top: none; padding: 18px 20px; gap: 14px; }
.draft-form-title { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.drafts-view .draft-actions { align-items: center; }
.draft-actions-hint { flex: 1 1 260px; text-align: right; font-size: var(--fs-sm); color: var(--muted); }
.draft-actions-hint[hidden] { display: none; }
.draft-placeholder[hidden] { display: none; }
@media (max-width: 900px) {
  .drafts-view .drafts-layout { grid-template-columns: minmax(0, 1fr); }
  .drafts-side { border-right: none; border-bottom: 1px solid var(--line); }
  .drafts-view .draft-detail { padding: 16px; }
  .draft-ai-facts { grid-template-columns: minmax(0, 1fr); }
  .draft-actions-hint { text-align: left; }
}

/* =====================================================================
   Fase 5 · Reportes de cuentas y Revisión (P-Reporte)
   ===================================================================== */
.reports-view { background: var(--bg-side); }
.reports-view .view-title { margin: 0 0 4px; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.reports-intro { margin: 0 0 16px; }
.reports-filters .ui-input { width: auto; min-width: 180px; }
.reports-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.reports-list > .ui-skeleton-line { background: var(--surface); border-radius: var(--r-lg); }
.report-item { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.report-item-head { display: flex; align-items: flex-start; gap: 12px; }
.report-item-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.report-item-name { font-weight: 600; overflow-wrap: anywhere; }
.report-item-meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.report-item-comment { margin: 0; line-height: 1.5; color: var(--ink-2); }
.report-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.report-item-actions .ticket-bar-link { margin: 0; }
.report-item-actions .report-review-btn { margin-left: auto; }
.report-others { font-size: var(--fs-sm); color: var(--overdue); }
.report-waiting { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.reports-empty[hidden], .report-review[hidden], .reports-pane[hidden] { display: none; }
.reports-empty .ui-empty { max-width: 900px; }

.reports-view:has(.report-review:not([hidden])) { padding: 0; }
.report-review-bar { position: static; }
.report-review-bar b { color: var(--ink); font-weight: 500; }
.report-review-layout {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 24px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}
.report-review-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.report-review-head { display: flex; flex-direction: column; gap: 6px; }
.report-review-kicker { margin: 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--overdue); }
.report-review-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.report-review-by { margin: 0; color: var(--muted); }
.report-review-by b { color: var(--ink); font-weight: 500; }
.report-review-text { margin: 0; line-height: 1.55; }
.report-fact.is-danger { color: var(--overdue); font-weight: 600; }
.report-fact.is-ok { color: var(--ok); font-weight: 600; }
.report-review-history { overflow: hidden; }
.report-review-history-title { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.report-history-row { cursor: default; }
.report-history-row:hover { background: none; }
.report-decision { padding: 18px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.report-decision-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.report-decision-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.report-choice {
  min-height: 40px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.report-choice[hidden] { display: none; }
.report-choice[data-decision="confirm"][aria-checked="true"] { border-color: var(--overdue); background: var(--danger-soft); color: var(--overdue); }
.report-choice[data-decision="dismiss"][aria-checked="true"] { border-color: var(--blue); background: var(--nav-active); color: var(--link); }
.report-choice:only-of-type, .report-decision-choices:has(.report-choice[hidden]) { grid-template-columns: minmax(0, 1fr); }
.report-deactivate { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; cursor: pointer; }
.report-deactivate[hidden] { display: none; }
.report-deactivate input { margin-top: 3px; accent-color: var(--overdue); width: 16px; height: 16px; }
.report-deactivate small { color: var(--muted); font-size: var(--fs-sm); }
.report-decision-foot { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
@media (max-width: 900px) {
  .report-review-layout { grid-template-columns: minmax(0, 1fr); }
  .report-decision { position: static; }
}

/* =====================================================================
   Fase 5 · Mi cuenta (P-Cuenta)
   ===================================================================== */
.account-view { background: var(--bg-side); display: flex; justify-content: center; padding: 30px 32px; }
.account-view[hidden] { display: none; }
.account-layout { width: min(900px, 100%); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.account-aside { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 24px; }
.account-who { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; }
.account-avatar { width: 40px; height: 40px; font-size: var(--fs-sm); }
.account-who-text { display: flex; flex-direction: column; min-width: 0; }
.account-who-name { font-weight: 600; overflow-wrap: anywhere; }
.account-who-role { font-size: var(--fs-sm); color: var(--muted); }
.account-tabs { display: flex; flex-direction: column; gap: 2px; }
.account-tabs[hidden] { display: none; }
.account-tab {
  min-height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.account-tab[hidden] { display: none; }
.account-tab:hover { background: var(--line-soft); }
.account-tab[aria-current="page"] { background: var(--nav-active); color: var(--link); font-weight: 600; }
.account-home { margin: 16px 0 0; padding: 0 10px; text-align: left; font-size: var(--fs-sm); }
.account-home[hidden] { display: none; }
.account-logout { margin-top: 18px; color: var(--overdue); border-color: var(--line); }
.account-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.account-main .view-title { margin: 0; font-size: var(--fs-xl); }
.account-main #profileIntro { margin: 0; }
.account-view .account-section {
  margin: 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.account-view .account-section[hidden] { display: none; }
.account-view .account-title { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 600; border: none; padding: 0; }
.account-view .account-current { margin: 0 0 14px; color: var(--muted); }
.account-facts { max-width: 420px; }
.account-view .form-group label { font-weight: 500; }
.account-view .form-group input, .account-view .form-group select {
  min-height: 38px;
  border-color: var(--field-line);
  border-radius: var(--r-md);
}
.account-view .profile-actions { display: flex; justify-content: flex-end; gap: 8px; }
.account-view .btn-submit { width: auto; min-height: 36px; padding: 0 16px; }
@media (max-width: 767px) {
  .account-view { padding: 16px; }
  .account-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .account-aside { position: static; }
  .account-tabs { flex-direction: row; flex-wrap: wrap; }
  .account-who { padding-bottom: 6px; }
  .account-logout { margin-top: 6px; }
  .account-view .account-section { padding: 18px 16px; }
}

/* =====================================================================
   Fase 5 · Invitaciones, Administración y Directorio
   ===================================================================== */
.invites-view, #adminView, #directoryView { background: var(--bg-side); }
.invites-view .view-title, #adminView .view-title, #directoryView .view-title { margin: 0 0 4px; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.invites-intro { margin: 0 0 18px; }
.invites-host { max-width: 960px; }
.invites-view .invites-section { margin: 0 0 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.invites-view .invites-section .help-text { margin: 4px 0 14px; font-size: var(--fs-base); }
.invites-view .invite-form { align-items: end; }
.invites-view .invite-form input, .invites-view .invite-form select { min-height: 38px; border: 1px solid var(--field-line); border-radius: var(--r-md); padding: 0 10px; font: inherit; }
.invites-table-title { margin: 20px 0 8px; font-size: var(--fs-md); font-weight: 600; }
.invites-view .invites-table th { font-size: var(--fs-xs); }
.users-details { max-width: 960px; padding: 0; overflow: hidden; }
.users-summary { padding: 14px 18px; font-weight: 600; cursor: pointer; }
.users-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.users-list { list-style: none; margin: 0; padding: 0 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.users-list-item { padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-side); overflow-wrap: anywhere; }

#adminView .admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; padding: 16px 18px; }
#adminView .admin-card h2 { font-size: var(--fs-md); font-weight: 600; }
#adminView .admin-logs { border-radius: var(--r-md); }
#adminView .changes-list > li, .reports-view .changes-list > li { border-color: var(--line-soft); }
#directoryView .table-scroll { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
#directoryView .directory-table th { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
#directoryView .directory-table td { border-color: var(--line-soft); }
#directoryView .directory-filters input, #directoryView .directory-filters select,
#adminView .directory-filters input, #adminView .directory-filters select { min-height: 38px; border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--surface); }
@media (max-width: 767px) {
  .invites-view .invites-section { padding: 16px; }
}

/* =====================================================================
   Fase 5 · Portal del solicitante (una columna en el celular)
   ===================================================================== */
body.requester-portal { background: var(--bg-side); }
body.requester-portal .topbar { border-bottom: none; }
body.requester-portal .portal-panel { background: var(--surface); }
body.requester-portal .portal-head { padding: 20px 18px 14px; border-bottom-color: var(--line-soft); }
body.requester-portal .portal-title { font-size: var(--fs-xl); letter-spacing: -0.02em; }
body.requester-portal .portal-item { gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.portal-item-title { overflow-wrap: anywhere; }
.portal-item-progress { display: flex; align-items: center; gap: 10px; }
.portal-item-progress .ui-bar { width: 80px; flex: 0 0 auto; }
.portal-item-step { font-size: var(--fs-sm); color: var(--muted); }
.portal-empty .ui-empty { padding: 32px 18px; }
body.requester-portal #detailPanel { background: var(--bg-side); padding: 24px 28px; }
body.requester-portal #detailContent { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.portal-detail-meta { margin: 0; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
body.requester-portal .portal-detail-title { margin: 0; font-size: var(--fs-2xl); letter-spacing: -0.02em; overflow-wrap: anywhere; }
body.requester-portal .portal-steps { margin: 4px 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.portal-owner { margin: 0; }
.portal-original { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
body.requester-portal .portal-subtitle { margin: 6px 0 0; font-size: var(--fs-md); }
body.requester-portal .portal-message { padding: 12px 14px; border-radius: 10px; background: var(--surface); }
body.requester-portal .portal-message.is-own { background: var(--selected); border-color: var(--info-line); }
body.requester-portal .portal-message-meta { font-size: var(--fs-sm); }
body.requester-portal .portal-message-text { line-height: 1.55; }
.portal-composer { overflow: hidden; }
.portal-composer .sd-reply { width: 100%; min-height: 92px; box-sizing: border-box; padding: 12px 14px; border: none; resize: vertical; font: inherit; }
.portal-composer .sd-reply:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.portal-composer .sd-composer-actions { display: flex; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
body.requester-portal .portal-footer { background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  body.requester-portal #detailPanel { padding: 16px; }
  body.requester-portal .portal-detail-title { font-size: var(--fs-xl); }
  .portal-step-label { font-size: var(--fs-xs); text-align: center; }
}

/* =====================================================================
   Fase 6 · Paleta de comandos, hoja de atajos y botón "Buscar…"
   ===================================================================== */

.palette {
  width: min(560px, calc(100vw - 32px));
  margin-top: 110px;
  padding: 0;
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; max-height: calc(100vh - 160px); }
.palette-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.palette-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.palette-esc {
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-side);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  cursor: pointer;
}
.palette-list { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.palette-group { padding: 8px 10px 6px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; color: var(--muted); }
.palette-item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink); cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--selected); box-shadow: inset 0 0 0 1px var(--info-line); }
.palette-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-hint { font-size: var(--fs-sm); color: var(--muted); }
.palette-kbd {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  padding: 2px 7px;
  border: 1px solid var(--field-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-side);
  color: var(--ink);
}
.palette-foot { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }

.shortcuts { width: min(520px, calc(100vw - 32px)); }
.shortcuts-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shortcuts-head .ui-modal-title { flex: 1; margin: 0; }
.shortcuts-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.shortcuts-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.shortcuts-row dt { margin: 0; }
.shortcuts-row dd { margin: 0; }
.shortcuts-foot { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 600px) {
  .palette { margin-top: 16px; }
  .shortcuts-list { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Disponibilidad automática: periodos de vacaciones e incapacidad ----- */
.availability-now { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.availability-subtitle { margin: 16px 0 8px; font-size: var(--fs-md); font-weight: 600; }
.periods-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.period-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg-side); }
.period-text { flex: 1 1 200px; overflow-wrap: anywhere; }
.periods-empty { color: var(--muted); }
.period-form { margin-top: 4px; }
#availabilityDialog .periods-list { margin-top: 6px; }

/* ----- Cancelar tickets ----- */
.state-cancelled { background: var(--danger-soft); color: var(--overdue); }
.queue-bulk { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.queue-bulk[hidden] { display: none; }
.queue-bulk-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.queue-bulk-count { color: var(--muted); }
.queue-bulk #queueBulkCancel { margin-left: auto; }
.queue-check { margin: 0 8px 0 0; vertical-align: middle; cursor: pointer; }
.cancel-reasons { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; padding: 0; border: none; }
.cancel-reasons legend { margin-bottom: 6px; font-weight: 600; }
.cancel-reasons label, .cancel-notify { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.cancel-notify { margin: 4px 0 12px; }
.td-cancel { margin-left: var(--sp-2); }
.td-cancelled { display: flex; align-items: flex-start; gap: 12px; background: var(--danger-soft); color: var(--overdue); }
.td-cancelled-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-cancelled-by { font-size: 12px; }
.td-cancelled-note { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
/* Agrupación: fusiones y tickets relacionados */
.td-group.is-incident { border-color: #F1B8B0; }
.td-group.is-incident .ui-kicker { color: var(--overdue); }
.td-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.td-group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.td-group-title { flex: 1 1 120px; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.td-group-separate { margin-left: auto; }
.home-incidents { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.home-incidents[hidden] { display: none; }
.home-incident > :first-child { overflow-wrap: anywhere; }
.portal-merged { margin: 8px 0 12px; }
@media (max-width: 767px) {
  .queue-bulk { flex-wrap: wrap; padding: 8px 12px; }
}

/* ----- Avisos de vencimiento (campana) ----- */
.nav-bell { position: relative; width: 34px; height: 34px; border-radius: var(--r-md); }
.nav-bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--r-pill); background: #DC2626; color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--navy);
}
.nav-bell-count[hidden] { display: none; }
.bell-panel {
  position: fixed; left: calc(var(--nav-w, 232px) + 8px); bottom: 16px; z-index: 80;
  width: min(380px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 32px)); overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-title { margin: 0; padding: 0; border: none; font-size: 15px; }
.bell-read-all { font-size: 12px; }
.bell-list { list-style: none; margin: 0; padding: 4px 0; }
.bell-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.bell-item:last-child { border-bottom: none; }
.bell-open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0; border: none; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bell-open:hover .bell-text { text-decoration: underline; }
.bell-item.is-unread .bell-text { font-weight: 600; }
.bell-item.is-unread .bell-text::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #DC2626; vertical-align: middle; }
.bell-item.is-unread:not(.is-urgent) .bell-text::before { background: var(--due-soon-bar); }
.bell-empty { padding: 16px 14px; color: var(--muted); font-size: 13px; }
@media (max-width: 767px) {
  .bell-panel { left: 16px; right: 16px; width: auto; }
}

/* ----- Reporte de vencimiento: con la barra superior y el menú por módulos (N1) ----- */
.od-view { padding: 0 0 32px; }
.od-content { padding: 20px 32px 0; display: flex; flex-direction: column; gap: 16px; }
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.od-titles { min-width: 0; }
.od-kicker { margin: 0; color: var(--muted); font-size: 13px; }
.od-title { margin: 2px 0 8px; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.od-tags { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.od-meta { color: var(--muted); font-size: 13px; }
.od-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.od-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.od-card { padding: 12px 14px; }
.od-card .ui-kicker { margin: 0 0 4px; }
.od-card-value { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.od-card-sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.od-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.od-section { padding: 14px 16px; }
.od-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.od-event { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.od-event-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.od-event-actor { color: var(--muted); }
.od-event.is-overdue .od-event-text { color: var(--overdue); font-weight: 600; }
.od-cause-current { margin: 6px 0 0; font-weight: 600; }
.od-cause-note { margin: 4px 0 0; overflow-wrap: anywhere; }
.od-cause-pending { margin: 6px 0 0; color: var(--due-soon); font-weight: 600; }
.od-cause-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.od-cause-form label { font-size: 12px; color: var(--muted); }
.od-cause-form .ui-btn { align-self: flex-start; margin-top: 4px; }
.td-overdue-report { margin-left: 4px; }
@media (max-width: 767px) {
  .od-content { padding: 16px 16px 0; }
  .od-grid { grid-template-columns: minmax(0, 1fr); }
  .od-event { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Adjuntos de los comentarios */
.att-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.portal-composer .att-picker { padding: 8px 0 0; border-top: none; }
.att-limits { flex: 1 1 200px; font-size: var(--fs-sm); color: var(--muted); }
.att-pending { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; }
.att-pending:empty { display: none; }
.att-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
.att-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.att-chip-size { flex: none; color: var(--muted); }
.att-progress { flex: 0 1 90px; width: 90px; height: 6px; }
.att-remove { flex: none; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.att-remove:hover:not(:disabled) { background: var(--line-soft); color: var(--ink); }
.att-remove:disabled { opacity: 0.4; cursor: default; }
.sd-composer.is-dragging { outline: 2px dashed var(--accent); outline-offset: -2px; }

.att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.att-thumb { display: block; width: 96px; height: 96px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line-soft); cursor: zoom-in; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-thumb.is-broken { cursor: default; }
.att-card { display: flex; align-items: center; gap: 8px; max-width: 260px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.att-card:hover { border-color: var(--accent); }
.att-card-icon { flex: none; font-size: 20px; }
.att-card-text { display: flex; flex-direction: column; min-width: 0; }
.att-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.att-card-size { font-size: var(--fs-xs); color: var(--muted); }
.att-thumb:focus-visible, .att-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.att-viewer { width: min(900px, calc(100vw - 32px)); }
.att-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.att-viewer-head .modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); }
.att-viewer-image { display: block; max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; object-fit: contain; }

@media (max-width: 480px) {
  .att-card { max-width: 100%; }
  .att-progress { width: 60px; flex-basis: 60px; }
}

/* Adjuntos del correo en Borradores */
.draft-attachments { margin: 8px 0 12px; }
.draft-attachments .att-list { margin-top: 0; }
.att-note { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ----- Borradores con dueño (fase 1) ----- */
.draft-item-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.draft-assignee { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.drafts-filter { margin-top: 8px; }
.drafts-filter select, .draft-reassign select { width: 100%; }
.draft-reassign { max-width: 360px; margin: 0 0 16px; }
.draft-not-yours { margin: 0 0 12px; }
.draft-actions[hidden], .drafts-filter[hidden], .draft-reassign[hidden], .draft-not-yours[hidden] { display: none; }

/* =====================================================================
   N2 · Técnico: Mi trabajo
   ===================================================================== */
body.staff-shell .split.has-aside { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
body.staff-shell.ticket-open .queue-aside { display: none; }
.queue-aside { display: flex; flex-direction: column; gap: 14px; padding: 16px 32px 24px 0; }
.queue-aside[hidden] { display: none; }
.queue-aside-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.queue-aside-card .ui-kicker { margin: 0; }
.queue-aside-big { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.queue-aside-text, .queue-aside-note { margin: 0; color: #5B6078; font-size: 13px; }
.queue-aside-note { font-size: 12px; }
.queue-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.queue-aside-list li + li { border-top: 1px solid var(--line-soft); }
.queue-aside-draft {
  width: 100%; padding: 10px 0; border: none; background: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.queue-aside-draft-title { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.queue-aside-draft-meta { font-size: 12px; color: #5B6078; }
.queue-aside-draft-go { font-size: 12px; font-weight: 500; color: var(--link); }
.queue-aside-draft:hover .queue-aside-draft-go { text-decoration: underline; }
.queue-aside-empty { padding: 8px 0; color: #5B6078; font-size: 13px; }
.queue-overdue-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.queue-overdue-notice[hidden] { display: none; }
.queue-views[hidden] { display: none; }
.td-subtitle { margin: 2px 0 0; color: #5B6078; font-size: 13px; }
.td-props-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); color: #5B6078; font-size: 12px; }
/* La marca ya está en la barra superior */
body.staff-shell .ticket-bar-mark { display: none; }
@media (max-width: 860px) {
  body.staff-shell .split.has-aside { grid-template-columns: minmax(0, 1fr); }
  .queue-aside { padding: 0 16px 24px; }
}

/* =====================================================================
   N3 · Coordinador: Inicio, Vencidos con causa, Incidentes, Carga y Disponibilidad
   ===================================================================== */
/* El saludo y "Enviar resumen ahora" van en la cabecera de la página */
.home-team-load { min-width: 24px; text-align: right; font-size: 12px; color: #5B6078; }
.home-row-tag { flex: 0 0 auto; }
/* Columna Causa: solo en Vencidos del coordinador */
.queue-table:not(.with-cause) .col-cause { display: none; }
#queuePanel col.col-cause { width: 190px; }
.col-cause .ui-tag { margin-right: 6px; }
.queue-report-link { font-size: 12px; white-space: nowrap; }
@media (max-width: 767px) {
  .queue-table.with-cause .col-cause { display: block; grid-column: 2; }
}
.aa-quick[hidden], #aaInvite[hidden] { display: none; }

.list-view { padding: 16px 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.list-view[hidden] { display: none; }
.list-view-card { padding: 0; overflow: hidden; }
.list-view-note { margin: 0; color: #5B6078; font-size: 12px; }
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line-soft); }
.list-row:first-child { border-top: none; }
.list-row-button {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: none; background: none;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.list-row-button:hover .list-row-title { text-decoration: underline; }
.list-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row-title { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.list-row-sub { font-size: 12px; color: #5B6078; }
.list-row-go { color: var(--link); font-size: 12px; font-weight: 500; white-space: nowrap; }
.list-member { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.list-load-bar { flex: 1 1 160px; max-width: 260px; }
.list-load-numbers { flex: 0 0 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.list-load-numbers b { font-size: 16px; }
.list-periods { flex: 2 1 260px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 767px) {
  .list-view { padding: 12px 16px 24px; }
  .list-row { flex-wrap: wrap; padding: 12px 14px; }
  .list-load-numbers { flex: 0 0 auto; align-items: flex-start; }
}

/* =====================================================================
   N4 · Administración
   ===================================================================== */
.aa-section-note { margin: 0 0 8px; padding: 0 16px; color: #5B6078; font-size: 12px; }
.aa-ticket-go { margin-left: auto; color: var(--link); font-size: 12px; font-weight: 500; white-space: nowrap; }
.aa-ticket:hover .aa-ticket-go { text-decoration: underline; }
.changes-quick { margin: 0 0 12px; }
.changes-note { margin-top: 12px; font-size: 12px; }