/*
  Tema del panel harc360, basado en la plantilla TailwindAdmin (theme/theme.css: paleta, tipografía de la marca harc360, sombras y
  componentes .card/.sidebar-link/.caption). Aquí va el armazón (barra lateral, cabecera, contenido) y la adaptación de
  MudBlazor para que sus componentes se vean como los de la plantilla. Este archivo se carga DESPUÉS de MudBlazor.
*/

:root {
    --qhse-bg: #f4f6f9;
    --qhse-primary: #1b2b47;   /* azul marino de la marca harc360 */
    --qhse-primary-dark: #101a2e;
    --qhse-silver: #a0aab5;   /* plata de la marca: decorativo, no para texto (contraste bajo) */
    --qhse-slate: #4a5568;    /* gris pizarra de la marca */
    --qhse-dark: #1b2b47;
    --qhse-body: #4a5568;
    --qhse-muted: #5f6b7c;   /* texto de apoyo: contraste 5.2:1 sobre blanco */

    /* Escala tipografica: todo texto del panel usa uno de estos 7 tamanos */
    --fs-xs: .75rem;      /* 12 px  etiquetas, encabezados de tabla, pie */
    --fs-sm: .8125rem;    /* 13 px  ayudas, datos secundarios */
    --fs-md: .875rem;     /* 14 px  tablas, formularios, botones */
    --fs-base: .9375rem;  /* 15 px  texto corrido */
    --fs-lg: 1.125rem;    /* 18 px  titulo de tarjeta */
    --fs-xl: 1.375rem;    /* 22 px  titulo de pagina */
    --fs-2xl: 1.75rem;    /* 28 px  cifras destacadas */
    --qhse-border: #dde2e9;
    --qhse-shadow: rgba(16, 24, 22, .04) 0 1px 2px 0, rgba(16, 24, 22, .04) 0 4px 12px -2px;
    --qhse-radius: 14px;
    --qhse-tint: #e8ecf2;   /* fondo del elemento activo y de los hover */
}

/* Tarjetas: borde fino y sombra casi imperceptible (en vez de la sombra amplia de la plantilla) */
.card { background: #fff; border: 1px solid var(--qhse-border); border-radius: var(--qhse-radius); box-shadow: var(--qhse-shadow); }
:focus-visible { outline: 2px solid var(--qhse-primary); outline-offset: 2px; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

html, body {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--qhse-body);
    /* Letra nitida: suavizado en escala de grises, kerning y ligaduras activos */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 { color: var(--qhse-dark); line-height: 1.3; letter-spacing: -.01em; }
h1, h2, h3, h4, h5, h6, .page-title h1, .stat-tile .val, .money-figure, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: 'Montserrat', 'Roboto', 'Segoe UI', sans-serif; }

body { background: var(--qhse-bg); margin: 0; }

h1:focus, h2:focus, h3:focus, h4:focus { outline: none; }

/* ---------------- armazón ---------------- */
.qhse-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 264px;
    background: #fff;
    border-right: 1px solid var(--qhse-border);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.qhse-sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .15); }
.qhse-backdrop { position: fixed; inset: 0; background: rgba(42, 53, 71, .45); z-index: 1100; }

.qhse-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; text-decoration: none; }
.qhse-brand img { width: 34px; height: 34px; }
.qhse-brand .name { font-size: var(--fs-lg); font-weight: 700; color: var(--qhse-dark); letter-spacing: .2px; line-height: 1; }
.qhse-brand .tag { font-size: var(--fs-xs); color: var(--qhse-body); display: block; font-weight: 500; letter-spacing: 0; margin-top: 3px; }

/* El contenedor que envuelve al menú debe ocupar el resto de la barra y poder encogerse (min-height: 0); si no, el menú
   crece más que la pantalla y se recorta sin barra de desplazamiento. */
.qhse-nav-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qhse-nav { padding: 4px 12px 16px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9d0da transparent; }
.qhse-nav::-webkit-scrollbar { width: 6px; }
.qhse-nav::-webkit-scrollbar-thumb { background: #c9d0da; border-radius: 3px; }
.qhse-nav ul { list-style: none; margin: 0; padding: 0; }
.qhse-nav .caption { margin: 18px 0 4px; padding: 0 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--qhse-muted); }
.qhse-nav .caption:first-child { margin-top: 4px; }
#sidebarnav .sidebar-item .sidebar-link { color: var(--qhse-dark); font-weight: 500; font-size: var(--fs-md); padding: 8px 10px; margin-bottom: 1px; border-radius: 8px; gap: 10px; transition: background .15s, color .15s; }
#sidebarnav .sidebar-item .sidebar-link i { font-size: 1.15rem; flex-shrink: 0; color: var(--qhse-muted); transition: color .15s; }
#sidebarnav .sidebar-item .sidebar-link:hover { background: #eef1f5; color: var(--qhse-dark); }
#sidebarnav .sidebar-item .sidebar-link.active { background: var(--qhse-tint); color: var(--qhse-primary); font-weight: 600; box-shadow: none; }
#sidebarnav .sidebar-item .sidebar-link.active i { color: var(--qhse-primary); }

/* Pie de la barra: la persona conectada y su salida, como en el modelo (antes iban en la cabecera) */
.qhse-sidebar-foot { border-top: 1px solid var(--qhse-border); padding: 10px 12px; display: flex; align-items: center; gap: 6px; }
.qhse-sidebar-foot .user-chip { flex: 1; min-width: 0; padding: 4px; }
.qhse-sidebar-foot .user-chip .who { min-width: 0; }
.qhse-sidebar-foot .user-chip .who b, .qhse-sidebar-foot .user-chip .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qhse-sidebar-foot .logout-btn { padding: 8px; border: 0; background: transparent; color: var(--qhse-muted); }
.qhse-sidebar-foot .logout-btn:hover { background: #eef1f5; color: var(--qhse-dark); }
.qhse-sidebar-foot .logout-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }

.top-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
    min-height: 56px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--qhse-border);
}
.top-header .spacer { flex: 1; }
.icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--qhse-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.icon-btn:hover { background: #eef1f5; color: var(--qhse-dark); }
.icon-btn .count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e5694f;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; text-decoration: none; border-radius: 8px; }
a.user-chip:hover { background: #eef1f5; }
.user-chip .avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--qhse-tint);
    color: var(--qhse-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-chip .who { line-height: 1.2; }
.user-chip .who b { display: block; color: var(--qhse-dark); font-size: var(--fs-md); font-weight: 600; }
.user-chip .who span { font-size: var(--fs-xs); }
.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--qhse-border);
    background: #fff;
    color: var(--qhse-dark);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.logout-btn:hover { border-color: var(--qhse-primary); color: var(--qhse-primary); }

.qhse-content { padding: 24px; width: 100%; max-width: 1560px; margin: 0 auto; box-sizing: border-box; }

@media (min-width: 1300px) {
    .qhse-sidebar { transform: none; box-shadow: none; }
    .qhse-backdrop { display: none; }
    .page-wrapper { margin-left: 264px; }
    /* El botón del menú también está en pantalla ancha: oculta o muestra la barra lateral. */
    .page-wrapper { transition: margin-left .25s ease; }
    .qhse-sidebar { transition: transform .25s ease, visibility 0s; }
    #main-wrapper.menu-collapsed .qhse-sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
    #main-wrapper.menu-collapsed .page-wrapper { margin-left: 0; }
}
@media (max-width: 700px) {
    .top-header .user-chip .who { display: none; }
    .top-header, .qhse-content { padding-left: 14px; padding-right: 14px; }
}

/* ---------------- tarjetas de cifras ---------------- */
.stat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 24px; }
/* Cifra: tarjeta blanca; la etiqueta arriba, el número grande y el icono en un cuadro teñido a un lado */
.stat-tile { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.stat-tile > div { min-width: 0; }
.stat-tile .ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-tile .val { font-size: var(--fs-2xl); font-weight: 700; color: var(--qhse-dark); line-height: 1.15; letter-spacing: -.02em; }
.stat-tile .lbl { order: -1; font-size: var(--fs-sm); color: var(--qhse-muted); margin: 0 0 4px; }
.stat-tile > div { display: flex; flex-direction: column; }
.tone-primary .ico { background: rgba(27, 43, 71, .12); color: #1b2b47; }
.tone-success .ico { background: rgba(34, 160, 107, .14); color: #17794f; }
.tone-warning .ico { background: rgba(232, 163, 23, .18); color: #b87400; }
.tone-error .ico { background: rgba(229, 105, 79, .16); color: #c24a2c; }
.tone-info .ico { background: rgba(59, 130, 246, .14); color: #1f6fe0; }
.tone-secondary .ico { background: rgba(73, 190, 255, .16); color: #1783b8; }

.page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.page-title h1 { margin: 0; font-size: var(--fs-xl); line-height: 1.3; font-weight: 700; color: var(--qhse-dark); }
.page-sub { color: var(--qhse-body); margin: 0 0 22px; font-size: var(--fs-base); }

.apex-host { width: 100%; min-height: 260px; }
.card-pad { padding: 24px; }
.card h2, .card-title { margin: 0 0 14px; font-size: var(--fs-lg); font-weight: 700; color: var(--qhse-dark); }

/* ---------------- adaptación de MudBlazor ---------------- */
.mud-paper { border-radius: var(--qhse-radius); }
.mud-paper.mud-elevation-1, .mud-paper.mud-elevation-2 { box-shadow: var(--qhse-shadow); }
.mud-paper.mud-elevation-0 { box-shadow: none; }
.mud-main-content { background: transparent; }

.mud-typography-h4 { font-size: var(--fs-xl); font-weight: 700; color: var(--qhse-dark); }
.mud-typography-h5, .mud-typography-h6 { font-weight: 700; color: var(--qhse-dark); }
.mud-typography-h6 { font-size: var(--fs-lg); }
.mud-typography-subtitle1 { color: var(--qhse-dark); font-weight: 600; }
.mud-typography-body2 { font-size: var(--fs-md); }

.mud-button-root { text-transform: none; font-weight: 600; letter-spacing: 0; border-radius: 8px; }
.mud-button-filled { box-shadow: none; }
.mud-button-filled.mud-button-filled-primary { background: var(--qhse-primary); }
.mud-button-filled.mud-button-filled-primary:hover { background: var(--qhse-primary-dark); box-shadow: 0 6px 14px rgba(27, 43, 71, .35); }
.mud-button-outlined { border-width: 1px; }

.mud-input-outlined .mud-input-outlined-border { border-radius: 8px; border-color: #c9d0da; }
.mud-input-control > .mud-input-control-input-container > .mud-input-label { color: var(--qhse-body); }

.mud-table { border-radius: var(--qhse-radius); overflow: hidden; }
.mud-table-container { border-radius: var(--qhse-radius); }
.mud-table-head .mud-table-cell {
    background: #faf9f6;
    color: var(--qhse-dark);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--qhse-border);
    padding: 14px 16px;
}
.mud-table-body .mud-table-cell { border-bottom: 1px solid #eef1f5; padding: 14px 16px; color: var(--qhse-dark); font-size: var(--fs-md); }
.mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: rgba(27, 43, 71, .06); }
.mud-table-dense .mud-table-body .mud-table-cell, .mud-table-dense .mud-table-head .mud-table-cell { padding: 10px 14px; }

/* Etiquetas teñidas, como las insignias de la plantilla */
.mud-chip { font-weight: 600; border-radius: 8px; }
.mud-chip.mud-chip-filled.mud-chip-color-success { background: rgba(34, 160, 107, .16); color: #17794f; }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background: rgba(232, 163, 23, .2); color: #b87400; }
.mud-chip.mud-chip-filled.mud-chip-color-error { background: rgba(229, 105, 79, .2); color: #c24a2c; }
.mud-chip.mud-chip-filled.mud-chip-color-info { background: rgba(59, 130, 246, .18); color: #1f6fe0; }
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: rgba(27, 43, 71, .16); color: #1b2b47; }
.mud-chip.mud-chip-filled.mud-chip-color-secondary { background: rgba(73, 190, 255, .18); color: #1783b8; }
.mud-chip.mud-chip-filled.mud-chip-color-default { background: #eef1f5; color: var(--qhse-body); }

.mud-alert { border-radius: 10px; }
.mud-tabs-toolbar { border-bottom: 1px solid var(--qhse-border); }
.mud-tab { text-transform: none; font-weight: 600; }
.mud-dialog { border-radius: var(--qhse-radius); }
.mud-expansion-panel { border-radius: 10px; }
.mud-snackbar { border-radius: 10px; }
.mud-link { color: var(--qhse-primary); }

/* ---------------- ingreso ---------------- */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: #fff;
}
.auth-hero {
    background: linear-gradient(145deg, #1b2b47 0%, #16233b 55%, #0f1a2e 100%);
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth-hero::before, .auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.auth-hero::before { width: 520px; height: 520px; right: -180px; top: -160px; }
.auth-hero::after { width: 380px; height: 380px; left: -140px; bottom: -150px; }
.auth-hero .brand { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 700; z-index: 1; }
.auth-hero .brand img { width: 44px; height: 44px; background: #fff; border-radius: 12px; padding: 5px; }
.auth-hero h2 { font-size: 2.2rem; line-height: 1.2; margin: 0 0 14px; font-weight: 700; z-index: 1; position: relative; color: #fff; }
.auth-hero p { margin: 0; max-width: 470px; opacity: .9; font-size: 1.02rem; z-index: 1; position: relative; }
.auth-hero ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; z-index: 1; position: relative; }
.auth-hero li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.auth-hero li i { font-size: 1.3rem; background: rgba(255, 255, 255, .2); border-radius: 50%; padding: 4px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px; }
.auth-form .box { width: 100%; max-width: 410px; }
.auth-form h1 { margin: 0 0 6px; font-size: 1.7rem; color: var(--qhse-dark); font-weight: 700; }
.auth-form .sub { margin: 0 0 26px; color: var(--qhse-body); }
.auth-form label { display: block; font-weight: 600; color: var(--qhse-dark); margin: 16px 0 6px; font-size: var(--fs-md); }
.auth-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: inherit;
    border: 1px solid #c9d0da;
    border-radius: 8px;
    color: var(--qhse-dark);
    background: #fff;
}
.auth-form input:focus { outline: 0; border-color: var(--qhse-primary); box-shadow: 0 0 0 3px rgba(27, 43, 71, .2); }
.auth-form button {
    width: 100%;
    margin-top: 26px;
    padding: 13px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--qhse-primary);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.auth-form button:hover { background: var(--qhse-primary-dark); box-shadow: 0 8px 18px rgba(27, 43, 71, .35); }
.auth-alert { background: rgba(229, 105, 79, .16); color: #b23c1f; border-radius: 8px; padding: 11px 14px; margin-bottom: 6px; font-weight: 600; }
.auth-foot { margin-top: 28px; text-align: center; font-size: var(--fs-sm); color: var(--qhse-muted); }
@media (max-width: 900px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
}

/* ---------------- listas de ranking (barras finas) ---------------- */
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rank-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-md); color: var(--qhse-dark); margin-bottom: 6px; }
.rank-bar { height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.rank-bar span { display: block; height: 100%; border-radius: 4px; background: var(--qhse-primary); }

/* Especificidad suficiente para ganarle a las reglas de MudBlazor */
.mud-table .mud-table-root .mud-table-head .mud-table-cell {
    background: #faf9f6;
    color: var(--qhse-dark);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--qhse-border);
    padding: 14px 16px;
}
.mud-table .mud-table-root .mud-table-body .mud-table-cell { border-bottom: 1px solid #eef1f5; padding: 14px 16px; color: var(--qhse-dark); }
.mud-table .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.mud-table.mud-table-dense .mud-table-root .mud-table-cell { padding: 10px 14px; }
.mud-tabs { background: #fff; border-radius: var(--qhse-radius); box-shadow: var(--qhse-shadow); overflow: hidden; }
.mud-tabs .mud-tabs-panels { background: #fff; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat-tile .val { white-space: nowrap; }

/* ---- panel del operador ---- */
.money-figure { font-size: 1.9rem; font-weight: 700; color: var(--qhse-dark); margin: 4px 0 8px; }
.text-muted { color: var(--qhse-muted); font-size: var(--fs-sm); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.module-grid .module { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--qhse-border, #e5e4de); border-radius: 10px; padding: 8px 12px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.h-100 { height: 100%; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; }
.kv dt { color: var(--qhse-muted); font-size: var(--fs-sm); }
.kv dd { margin: 0; color: var(--qhse-dark); }
.pay-form { background: #f7f9fc; border: 1px solid var(--qhse-border); border-radius: 10px; padding: 16px; }
.plan-modules { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.plan-modules li { display: flex; gap: 8px; align-items: center; }
.plan-modules li i { color: var(--qhse-primary); }

/* ---- avisos: icono en cuadro teñido ---- */
.notice-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #eef1f5; color: #62615b; }
.notice-ico.unread { background: rgba(27, 43, 71, .16); color: var(--qhse-primary); }

/* ---- teléfono: cifras en dos columnas ---- */
@media (max-width: 600px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-tile { padding: 14px 12px; gap: 10px; }
    .stat-tile .ico { width: 40px; height: 40px; }
    .stat-tile .val { font-size: 1.35rem; }
    .stat-tile .lbl { font-size: .8rem; }
}

/* ---- escala tipografica en los componentes de MudBlazor ---- */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3 { font-weight: 700; color: var(--qhse-dark); line-height: 1.25; }
.mud-typography-h4 { line-height: 1.3; }
.mud-typography-h5 { font-size: var(--fs-lg); line-height: 1.35; }
.mud-typography-h6 { line-height: 1.35; }
.mud-typography-subtitle1 { font-size: var(--fs-base); line-height: 1.5; }
.mud-typography-subtitle2 { font-size: var(--fs-md); font-weight: 600; color: var(--qhse-dark); line-height: 1.5; }
.mud-typography-body1 { font-size: var(--fs-base); line-height: 1.55; }
.mud-typography-body2 { line-height: 1.5; }
.mud-typography-caption { font-size: var(--fs-xs); line-height: 1.4; letter-spacing: .01em; }
.mud-typography-overline { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; }
.mud-button-root { font-size: var(--fs-md); }
.mud-input, .mud-input-slot, .mud-select .mud-input-slot { font-size: var(--fs-base); }
.mud-input-label { font-size: var(--fs-base); }
.mud-chip { font-size: var(--fs-sm); }
.mud-list-item-text, .mud-nav-link-text, .mud-menu-item { font-size: var(--fs-md); }
.mud-tab { font-size: var(--fs-md); font-weight: 600; text-transform: none; letter-spacing: 0; }
.mud-alert-message { font-size: var(--fs-md); }
.mud-simple-table table * tr > td, .mud-simple-table table * tr th { font-size: var(--fs-md); }

/* ---------------- orden y respiro de las pantallas ----------------
   MudBlazor 9 ya no aplica PanelClass a las pestañas y deja el panel activo en "display: contents" (sin caja propia: un padding
   ahí no hace nada), así que el relleno va en el contenedor. Sin esto el contenido de cada pestaña toca el borde de la tarjeta. */
.mud-tabs .mud-tabs-panels { padding: 22px 24px 26px; }
.mud-tab-panel .mud-table, .mud-tab-panel .mud-simple-table { border: 1px solid var(--qhse-border); border-radius: var(--qhse-radius); }
.mud-tab-panel .mud-table-container, .mud-tab-panel .mud-simple-table table { background: #fff; }

/* Cifras: una fila de cinco ya no deja una tarjeta sola en la segunda línea. */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); }
.stat-grid + * { margin-top: 24px; }

/* Texto de apoyo bajo el título: ancho de lectura cómodo, no de lado a lado de la pantalla. */
.page-sub { max-width: 940px; line-height: 1.6; }

/* Títulos de sección dentro de la pantalla o de una pestaña: aire antes y poco después. */
.qhse-content > h6.mud-typography-h6, .mud-tab-panel > h6.mud-typography-h6 { margin-top: 30px; margin-bottom: 12px; }
.qhse-content > h6.mud-typography-h6:first-child, .mud-tab-panel > h6.mud-typography-h6:first-child { margin-top: 0; }
.mud-tab-panel > .mud-table + h6.mud-typography-h6, .mud-tab-panel > .mud-simple-table + h6.mud-typography-h6 { margin-top: 32px; }

/* Filtros y botones de una pestaña: en fila, alineados y con separación entre sí. */
.mud-tab-panel > .d-flex { gap: 12px; margin-bottom: 18px; }

/* Leyenda de los estados de la matriz del programa */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--qhse-muted); margin: 0 0 14px; }
.legend b { color: var(--qhse-dark); font-weight: 700; }

/* ---------------- ajuste fino al modelo (Nolvira): campos, botones, etiquetas y tarjetas ----------------
   Valores tomados del modelo: borde #c9d0da, radio 8 px, alto 36 px, etiquetas redondas de 12 px. */
:root { --qhse-border-strong: #c9d0da; --qhse-field: #f6f6f3; }
.card, .mud-paper.mud-elevation-1, .mud-paper.mud-elevation-2 { border-radius: 12px; box-shadow: rgba(20, 20, 15, .05) 0 1px 2px 0; }
.card { border: 1px solid var(--qhse-border); }
.mud-paper.mud-elevation-1, .mud-paper.mud-elevation-2 { border: 1px solid var(--qhse-border); }

/* Campos de texto, listas y fechas: 36 px de alto, fondo hueso y borde fino; al enfocar, anillo del color principal */
.mud-input-control .mud-input.mud-input-outlined { background: var(--qhse-field); border-radius: 8px; }
.mud-input-control .mud-input-outlined .mud-input-outlined-border { border-color: var(--qhse-border-strong); border-width: 1px; border-radius: 8px; }
.mud-input-control .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: #b9b7ad; }
.mud-input-control .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-control .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--qhse-primary); border-width: 1px; }
.mud-input-control .mud-input.mud-input-outlined:focus-within { box-shadow: 0 0 0 3px rgba(27, 43, 71, .18); }
.mud-input-control .mud-input.mud-input-outlined.mud-input-margin-dense > .mud-input-slot,
.mud-input-control .mud-input.mud-input-outlined > .mud-input-slot { font-size: var(--fs-md); }
.mud-input-control.mud-input-control-margin-dense .mud-input-outlined .mud-input-slot { padding-top: 8px; padding-bottom: 8px; }
.mud-input-control .mud-input-label { color: var(--qhse-muted); font-size: var(--fs-md); }
.mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol { font-weight: 500; }
.auth-form input { background: var(--qhse-field); border-color: var(--qhse-border-strong); }
.auth-form input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(27, 43, 71, .18); }

/* Botones: 36 px, radio 8, el principal sólido y el resto con borde fino */
.mud-button-root { border-radius: 8px; font-weight: 500; }
.mud-button-root.mud-button-filled-size-medium, .mud-button-root.mud-button-outlined-size-medium { min-height: 36px; }
.mud-button-outlined { border-color: var(--qhse-border-strong); color: var(--qhse-dark); background: #fff; }
.mud-button-outlined:hover { background: #eef1f5; border-color: var(--qhse-border-strong); }
.mud-button-filled.mud-button-filled-primary:hover { background: var(--qhse-primary-dark); box-shadow: none; }
.logout-btn { border-color: var(--qhse-border-strong); }

/* Etiquetas de estado: píldora de 12 px con colores suaves, igual que «Processing» y «Pending» del modelo */
.mud-chip { border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; height: 22px; }
.mud-chip.mud-chip-filled.mud-chip-color-info { background: #e1ecfa; color: #1d5fb4; }
.mud-chip.mud-chip-filled.mud-chip-color-warning { background: #fbf0d3; color: #8a5206; }
.mud-chip.mud-chip-filled.mud-chip-color-success { background: #dcf1e4; color: #166a3e; }
.mud-chip.mud-chip-filled.mud-chip-color-error { background: #fbe3dc; color: #b3361a; }
.mud-chip.mud-chip-filled.mud-chip-color-primary { background: #e8ecf2; color: #101a2e; }
.mud-chip.mud-chip-filled.mud-chip-color-default { background: #eef1f5; color: var(--qhse-muted); }

/* Tablas: encabezado discreto, sin mayúsculas, filas con línea fina */
.mud-table .mud-table-root .mud-table-head .mud-table-cell { background: #faf9f6; color: var(--qhse-muted); font-weight: 500; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
.mud-table-hover .mud-table-body .mud-table-row:hover { background: #faf9f6; }

/* Pestañas como control segmentado: fondo hueso, la activa blanca con sombra mínima */
.mud-tabs .mud-tabs-toolbar { background: transparent; }
.mud-tabs { box-shadow: rgba(20, 20, 15, .05) 0 1px 2px 0; border: 1px solid var(--qhse-border); }

/* Campos de variante «texto» (los de filtros): misma caja que los contorneados, sin la línea inferior de MudBlazor */
.mud-input.mud-input-underline { background: var(--qhse-field); border: 1px solid var(--qhse-border-strong); border-radius: 8px; padding: 0 10px; min-height: 36px; align-items: center; }
.mud-input.mud-input-underline:before, .mud-input.mud-input-underline:after { display: none; }
.mud-input.mud-input-underline:hover { border-color: #b9b7ad; }
.mud-input.mud-input-underline:focus-within { border-color: var(--qhse-primary); background: #fff; box-shadow: 0 0 0 3px rgba(27, 43, 71, .18); }
.mud-input.mud-input-underline > .mud-input-slot { padding: 6px 0; }
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-label-animated { position: static; transform: none; display: block; margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--qhse-dark); }
.mud-input-control > .mud-input-control-input-container { display: flex; flex-direction: column; }
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-label-animated { order: -1; }

/* Filas «campos + botón» (Organización y similares): los campos se reparten el ancho, el botón no se parte en dos líneas
   y todo se alinea por la base de la caja (la ayuda bajo un campo ya no desalinea la fila). */
.d-flex.align-end > .mud-input-control { flex: 1 1 0; min-width: 0; }
.d-flex.align-end > .mud-button-root { flex-shrink: 0; white-space: nowrap; }
.d-flex.align-end > .mud-input-control .mud-input-helper-text { position: absolute; }

/* ---------------- selector de contexto (rol por país) ---------------- */
.qhse-context { border-top: 1px solid var(--qhse-border); padding: 8px 12px; }
.qhse-context details { position: relative; }
.qhse-context summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; background: var(--qhse-tint); color: var(--qhse-primary); }
.qhse-context summary::-webkit-details-marker { display: none; }
.qhse-context summary i { font-size: 1.15rem; flex-shrink: 0; }
.qhse-context summary span { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.qhse-context summary small { font-size: var(--fs-xs); color: var(--qhse-muted); }
.qhse-context summary b { font-size: var(--fs-sm); font-weight: 600; color: var(--qhse-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qhse-context form { display: grid; gap: 2px; margin-top: 6px; }
.qhse-context form button { text-align: left; font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--qhse-dark); cursor: pointer; }
.qhse-context form button:hover:not(:disabled) { background: #eef1f5; }
.qhse-context form button.active { background: #fff; color: var(--qhse-primary); font-weight: 600; cursor: default; }

/* ---- ingreso: aviso de éxito, enlaces y notas ---- */
.auth-ok { background: rgba(34, 160, 107, .14); color: #166a3e; border-radius: 8px; padding: 11px 14px; margin-bottom: 6px; font-weight: 600; }
.auth-link { margin: 18px 0 0; text-align: center; font-size: var(--fs-sm); }
.auth-link a { color: var(--qhse-primary); font-weight: 600; text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }
.auth-form label .hint { font-weight: 400; color: var(--qhse-muted); font-size: var(--fs-xs); }

/* ---- mi cuenta: verificación en dos pasos ---- */
.mfa-qr { display: block; width: 220px; height: 220px; margin: 8px 0 12px; border: 1px solid var(--qhse-border); border-radius: 10px; padding: 8px; background: #fff; image-rendering: pixelated; }
.mfa-steps { margin: 0 0 4px; padding-left: 18px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-width: 520px; }
.recovery-codes code, .card code { background: #eef1f5; border-radius: 6px; padding: 4px 8px; font-size: var(--fs-md); letter-spacing: .04em; }

/* Lista de actividades con búsqueda dentro de una ventana (objetivos del programa). */
.objective-picker { max-height: 320px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px 8px; margin-top: 6px; }

/* Modo soporte (un operador mira la empresa en solo lectura): aviso fijo arriba de la página. */
.support-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffda6a; font-size: .9rem; }
.support-banner form { margin: 0; }
.support-banner button { border: 1px solid #664d03; background: transparent; color: inherit; border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; }
.support-reason { width: 100%; padding: 8px 10px; border: 1px solid var(--bs-border-color, #cbd5e1); border-radius: 6px; font: inherit; background: transparent; color: inherit; }

/* ---------------- marca harc360 ---------------- */
/* Logotipo en texto (Montserrat Bold): «harc» en azul marino y «360» en plata, como en el diseño de la marca. */
.wordmark { font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 700; letter-spacing: -.03em; color: var(--qhse-primary); line-height: 1; }
.wordmark b { font-weight: 700; color: var(--qhse-silver); }
.qhse-brand img { width: 38px; height: 38px; object-fit: contain; }
.qhse-brand .name { display: flex; flex-direction: column; gap: 5px; }
.qhse-brand .name .wordmark { font-size: 1.45rem; }
.qhse-brand .tag { font-family: 'Roboto', sans-serif; font-size: .5625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--qhse-slate); margin: 0; white-space: nowrap; }
.auth-hero .brand { gap: 14px; }
.auth-hero .brand img { width: 56px; height: 56px; padding: 0; background: transparent; border-radius: 0; object-fit: contain; }
.auth-hero .brand .wordmark { font-size: 2.1rem; color: #fff; }
.auth-hero .brand .wordmark b { color: var(--qhse-silver); }
.auth-hero h2 { font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 700; }

/* ---------------- ventana emergente de formularios (EditorPopup) ---------------- */
.editor-popup-backdrop {
    position: fixed; inset: 0; z-index: 1250; overflow-y: auto; overscroll-behavior: contain;
    display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px;
    background: rgba(20, 27, 45, .55);
}
.editor-popup-panel {
    position: relative; width: 100%; margin: auto 0; padding: 24px; border-radius: 12px;
    background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, inherit);
}
.editor-popup-sm { max-width: 480px; }
.editor-popup-md { max-width: 760px; }
.editor-popup-lg { max-width: 1080px; }
.editor-popup-close { position: absolute; top: 8px; right: 8px; }
@media (max-width: 600px) { .editor-popup-backdrop { padding: 12px 8px; } .editor-popup-panel { padding: 16px; } }

/* ---------------- logo de la empresa cliente (panel del operador) ---------------- */
.logo-preview {
    width: 200px; height: 66px; display: flex; align-items: center; justify-content: center; padding: 6px;
    border: 1px dashed var(--mud-palette-lines-inputs, #b8c2d0); border-radius: 8px; background: #fff;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }