/* Fuente del SISTEMA (como la maqueta: Segoe UI en Windows). Tamaño base 15px (≈ maqueta). */
html {
    font-size: 93.75%; /* 15px sobre 16px → texto un punto más pequeño, como la maqueta */
}
html, body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enlaces sueltos (no MudBlazor): usar el color de marca del tema (se adapta a claro/oscuro). */
a {
    color: var(--mud-palette-primary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: var(--mud-palette-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ── Presura: identidad visual ─────────────────────────────────────────── */
.presura-appbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.presura-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Login con estilos sensibles al tema (claro/oscuro) */
.login-card-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.login-logo {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.login-label {
    display: block;
    font-size: .85rem;
    margin-bottom: .3rem;
    color: var(--mud-palette-text-secondary);
}

.login-input {
    width: 100%;
    padding: .65rem .8rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
}

.login-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.login-btn {
    width: 100%;
    padding: .75rem;
    background: var(--mud-palette-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}

.login-btn:hover { filter: brightness(1.08); }

/* ── Listados modernos (MudTable / MudDataGrid) ─────────────────────────── */
.presura-grid {
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.presura-grid .mud-table-toolbar {
    min-height: 60px;
    padding-inline: .5rem;
}

.presura-grid thead .mud-table-cell,
.presura-grid .mud-table-head .mud-table-cell {
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: none;
}

/* Aire cómodo en las celdas (aunque la tabla sea densa): ~px-5 py-3 como la maqueta. */
.presura-grid .mud-table-cell {
    padding: 9px 16px;
}
.presura-grid .mud-table-toolbar .mud-table-cell {
    padding: 0;
}

.presura-grid .mud-table-row:hover .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

/* Importes y números: alineados a la derecha, sin partir, cifras tabulares */
.num-cell {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Utilidades reutilizables del rediseño ─────────────────────────────── */

/* Contenido anclado al sidebar (no centrado): en monitores muy anchos el hueco
   sobrante queda solo a la derecha. Va aquí (global) porque el CSS scoped no se
   estampa en el elemento raíz de un componente Mud (lección DT-03). */
.mud-container.contenido-izq { margin-left: 0; }

/* Migas de pan (MudBreadcrumbs es componente Mud: estilos globales, no scoped).
   Barra con presencia: contenedor en píldora tintada, tramos clicables con hover propio y el
   tramo actual en negrita — que se vea DÓNDE estás y por dónde se vuelve. */
.migas {
    display: inline-flex;
    padding: 4px 10px;
    margin: 0 0 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}
.migas .mud-breadcrumb-item { font-size: .84rem; font-weight: 600; }
.migas .mud-breadcrumb-separator {
    margin: 0 2px;
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    font-weight: 700;
}
.migas .mud-breadcrumb-item a {
    color: var(--mud-palette-primary);
    padding: 3px 9px;
    border-radius: 999px;
    transition: background-color .12s ease;
}
.migas .mud-breadcrumb-item a:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.migas .mud-breadcrumb-item.mud-disabled {
    color: var(--mud-palette-text-primary);
    font-weight: 800;
    padding: 3px 9px;
}

/* Píldora de estado: fondo tintado sutil + texto del color (vía --c) */
.pchip {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.5;
    color: var(--c, var(--mud-palette-text-secondary));
    background: color-mix(in srgb, var(--c, var(--mud-palette-text-secondary)) 14%, transparent);
}

/* Cifras del oficio: monoespaciadas tabulares (la firma del producto) */
.cifra {
    font-family: 'Cascadia Code', 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
}

/* Cabecera de página (título + subtítulo + CTA) y estado vacío. Globales para coherencia; las
   páginas también las redefinen en su CSS scoped con los mismos valores (sin conflicto). */
.lst-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.lst-cta { border-radius: 10px; font-weight: 600; text-transform: none; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); }
.lst-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 44px 16px; color: var(--mud-palette-text-secondary); text-align: center; }
.lst-empty .mud-icon-root { color: var(--mud-palette-text-secondary); opacity: .6; }
.cell-strong { font-weight: 600; }
/* ── Tour de primeros pasos (motor propio en js/editor.js) ──────────────────
   El recuadro resalta el objetivo y su sombra gigante atenúa el resto de la página. */
.ptour-caja {
    position: fixed; z-index: 1400; pointer-events: none;
    border-radius: 12px; border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 0 0 9999px color-mix(in srgb, #0E0F1A 55%, transparent);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.ptour-tip {
    position: fixed; z-index: 1401; max-width: 340px; padding: 16px 18px;
    border-radius: 14px; border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    box-shadow: 0 18px 44px -18px rgba(14, 15, 26, .55);
}
.ptour-titulo { font-weight: 700; font-size: .95rem; letter-spacing: -0.01em; margin-bottom: 4px; }
.ptour-texto { font-size: .85rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.ptour-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ptour-prog {
    font-size: .74rem; color: var(--mud-palette-text-secondary);
    font-family: 'Cascadia Code', ui-monospace, 'Consolas', monospace; font-variant-numeric: tabular-nums;
}
.ptour-botones { display: flex; align-items: center; gap: 6px; }
.ptour-btn {
    border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer; background: transparent; color: var(--mud-palette-text-secondary);
}
.ptour-btn:hover { color: var(--mud-palette-text-primary); }
.ptour-btn-pri { background: var(--mud-palette-primary); color: #fff; }
.ptour-btn-pri:hover { background: var(--mud-palette-primary-darken); color: #fff; }
.ptour-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── Sidebar en modo rail (HV-66 fase 1, maqueta minimal-split) ─────────────────
   La variable de MudBlazor gobierna a la vez el ancho del drawer, el margen de la
   appbar y el del contenido: cambiarla colapsa TODO el layout de una pieza. */
.presura-shell.shell--rail { --mud-drawer-width-left: 68px; }
.presura-shell .presura-sidebar { transition: width .18s ease; }
.presura-shell .mud-appbar,
.presura-shell .mud-main-content { transition: margin-left .18s ease, width .18s ease; }

/* Fila de cabecera de listado cuando el título vive en la topbar (fase 2): solo queda el CTA */
.lst-head--fin { justify-content: flex-end; }

/* La hamburguesa de la topbar es solo para el drawer temporal de móvil (fase 5) */
@media (min-width: 960px) { .presura-shell .top-menu-movil { display: none; } }

/* ── Pulido fase 5b (feedback en vivo) ─────────────────────────────────────────
   1) El badge de la campana se salía por arriba con la topbar densa (48px). */
.presura-appbar .mud-badge.mud-badge-top.mud-badge-overlap { top: 8px; }

/* 2) Scrollbar fantasma en los diálogos con MudGrid (Invitar usuario, wizard…): los márgenes
   negativos del spacing inflan el scrollHeight del contenido aunque todo cabe (comprobado por
   geometría: ningún elemento visible sobresale). OJO BUG-09: `overflow: hidden` DECAPITABA la
   etiqueta flotante de los campos outlined (se pinta medio fuera de la caja del control) →
   `overflow: clip` + `overflow-clip-margin`: sigue sin contribuir al scrollHeight (adiós
   scrollbar fantasma) pero deja PINTAR hasta N px fuera (la etiqueta se ve entera). */
.mud-dialog-content .mud-grid { overflow: clip; overflow-clip-margin: 12px; }
.mud-dialog-content .mud-input-control { overflow: clip; overflow-clip-margin: 12px; } /* fracciones subpixel: +1px de scroll */

/* ───────── Páginas de credenciales (HV-69: activar cuenta, olvido, restablecer, cambiar) ─────────
   Globales (no scoped): 4 páginas SSR comparten la tarjeta centrada. Variables Mud → claro/oscuro. */
.cred-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--mud-palette-background); }
.cred-card {
    width: min(430px, 100%); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 18px;
    padding: 30px 30px 24px; box-shadow: 0 24px 60px -30px rgba(14, 15, 26, .35);
}
.cred-marca { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }
.cred-mark {
    width: 27px; height: 27px; border-radius: 8px; background: var(--mud-palette-primary);
    color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .95rem;
}
.cred-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.cred-sub { color: var(--mud-palette-text-secondary); font-size: .9rem; line-height: 1.55; margin: 0 0 16px; }
.cred-field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; margin-bottom: 13px; }
.cred-field input {
    font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}
.cred-field input:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.cred-submit {
    width: 100%; margin-top: 4px; padding: 11px 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--mud-palette-primary); color: #fff; font: inherit; font-weight: 700;
}
.cred-submit:hover { filter: brightness(1.06); }
.cred-error, .cred-aviso, .cred-ok { border-radius: 10px; padding: 10px 14px; font-size: .86rem; font-weight: 600; margin-bottom: 14px; }
.cred-error { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.cred-aviso { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }
.cred-ok { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.cred-link { display: inline-block; margin-top: 14px; font-size: .85rem; color: var(--mud-palette-primary); text-decoration: none; }
.cred-link:hover { text-decoration: underline; }
.cred-salir { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; font-size: .85rem; }