/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* El estilo de #blazor-error-ui vive en wwwroot/app.css (global, sin scope)
   porque el banner se renderiza en MainLayout y también en AppLayout.
   Ver la nota en app.css. Este archivo se mantiene por si MainLayout
   necesita estilos scopeados propios en el futuro. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibilidad de los mensajes según el estado (lo controla el framework). */
.components-reconnect-first-attempt-visible[b-panmnmltzy],
.components-reconnect-repeated-attempt-visible[b-panmnmltzy],
.components-reconnect-failed-visible[b-panmnmltzy],
.components-pause-visible[b-panmnmltzy],
.components-resume-failed-visible[b-panmnmltzy],
.components-rejoining-animation[b-panmnmltzy] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-retrying[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-failed[b-panmnmltzy],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-panmnmltzy] {
    display: block;
}

/* ── Aviso discreto: toast chico abajo a la derecha, SIN oscurecer la página ── */
#components-reconnect-modal[b-panmnmltzy] {
    position: fixed;
    inset: auto 16px 16px auto;   /* esquina inferior derecha */
    margin: 0;
    width: auto;
    max-width: 260px;
    padding: 10px 14px;
    background-color: var(--bg-card, #fff);
    color: var(--ink-800, #33302B);
    border: 1px solid var(--border, #E3DED4);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(60, 52, 40, 0.18);
    font-size: 12.5px;
    z-index: 10000;
}

/* Se muestra como diálogo NO modal (show()), así que no hay backdrop; por si
   algún estado usara showModal(), lo dejamos transparente igual. */
#components-reconnect-modal[b-panmnmltzy]::backdrop {
    background-color: transparent;
}

.components-reconnect-container[b-panmnmltzy] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#components-reconnect-modal p[b-panmnmltzy] { margin: 0; text-align: left; line-height: 1.35; }

#components-reconnect-modal button[b-panmnmltzy] {
    border: 0;
    background-color: var(--navy-500, #3d6fc4);
    color: white;
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 4px;
}
#components-reconnect-modal button:hover[b-panmnmltzy] { background-color: #2f5aa8; }

/* Spinner compacto (18px) */
.components-rejoining-animation[b-panmnmltzy] {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.components-rejoining-animation div[b-panmnmltzy] {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border: 2px solid var(--navy-500, #3d6fc4);
    border-color: var(--navy-500, #3d6fc4) transparent transparent transparent;
    border-radius: 50%;
    animation: components-recon-spin-b-panmnmltzy 0.9s linear infinite;
}
.components-rejoining-animation div:nth-child(2)[b-panmnmltzy] {
    animation-delay: -0.45s;
    opacity: 0.4;
}
@keyframes components-recon-spin-b-panmnmltzy {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/BuscadorTabla.razor.rz.scp.css */
.bt-wrap[b-pvhtxoexhf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 260px;
}

.bt-icon[b-pvhtxoexhf] {
    position: absolute;
    left: 9px;
    font-size: 14px;
    opacity: .45;
    pointer-events: none;
}

.bt-input[b-pvhtxoexhf] {
    width: 100%;
    padding: 6px 84px 6px 28px;
    border: 1px solid var(--border, #E3DED4);
    border-radius: 8px;
    font-size: 12.5px;
    background: var(--bg-input, #fff);
    transition: border-color .15s, box-shadow .15s;
}

.bt-input:focus[b-pvhtxoexhf] {
    outline: none;
    border-color: var(--navy-500, #3d6fc4);
    box-shadow: 0 0 0 3px rgba(61, 111, 196, .12);   /* mismo anillo de foco que app.css */
}

.bt-clear[b-pvhtxoexhf] {
    position: absolute;
    right: 62px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    opacity: .55;
    padding: 2px 4px;
}

.bt-clear:hover[b-pvhtxoexhf] { opacity: 1; }

.bt-count[b-pvhtxoexhf] {
    position: absolute;
    right: 8px;
    font-size: 10.5px;
    opacity: .55;
    pointer-events: none;
    white-space: nowrap;
}

.bt-sug[b-pvhtxoexhf] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #E3DED4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(60, 52, 40, .16);
    overflow: hidden;
    padding: 4px;
}

.bt-sug-item[b-pvhtxoexhf] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 6px;
    cursor: pointer;
    color: inherit;
}

/* Selección de sugerencia en neutro cálido: el azul tenue de antes era el único
   frío del panel y se leía como "fila deshabilitada" sobre la paleta nueva. */
.bt-sug-item:hover[b-pvhtxoexhf],
.bt-sug-item.sel[b-pvhtxoexhf] {
    background: var(--ink-50, #F1EFE9);
}

.bt-sug-item b[b-pvhtxoexhf] { font-weight: 700; }