@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ══════════════════════════════════════════════════════════════════════════════
   El eje de capas del sistema (z-index)
   ──────────────────────────────────────────────────────────────────────────────
   Hasta ahora cada componente elegía su número a mano y el resultado eran valores
   como 9999 para un desplegable, que lo dejaba POR ENCIMA de los modales (1055).
   Cuando una capa se tapa, la salida fácil es subirle el número al que falla; eso
   no arregla nada, mueve el problema al siguiente.

   Así que hay un orden, y es este. Los valores siguen la escala de Bootstrap para
   convivir con sus modales y sus tooltips sin pelear.

   El caso que importa entender: un desplegable se abre SIEMPRE desde la superficie
   que está arriba. Si está en la página, tiene que tapar la página; si está dentro
   de un modal, tiene que tapar el modal. Un solo valor, apenas por encima del
   modal, resuelve los dos — y queda por DEBAJO de los avisos y del velo de carga,
   que son los que tienen que verse igual pase lo que pase.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --fesv-z-barra-pegajosa: 20;      /* totales al pie de un panel, pie de tabla */
    --fesv-z-encabezado-pegajoso: 90; /* barra superior de la app, encabezados de tabla */
    --fesv-z-desplegable: 1060;       /* SearchableSelect y cualquier menú flotante */
    --fesv-z-aviso: 1080;             /* toasts, reconexión */
    --fesv-z-cargando: 9999;          /* velo de carga: tapa todo, siempre */
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Modal de reconexión personalizado (reemplaza el default de Blazor en inglés) ── */
.fesv-reconnect {
    position: fixed; inset: 0;
    display: none;
    background: rgba(15, 23, 42, .55);
    z-index: 1080;
    align-items: center; justify-content: center;
}
#components-reconnect-show .fesv-reconnect,
#components-reconnect-failed .fesv-reconnect,
#components-reconnect-refresh .fesv-reconnect,
.fesv-reconnect.components-reconnect-show,
.fesv-reconnect.components-reconnect-failed,
.fesv-reconnect.components-reconnect-refresh { display: flex !important; }
.fesv-reconnect-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.8rem 2.2rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-width: 420px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fesv-reconnect-spinner {
    width: 48px; height: 48px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: fesv-spin .9s linear infinite;
}
@keyframes fesv-spin { to { transform: rotate(360deg); } }
.fesv-reconnect-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: .5rem;
}
.fesv-reconnect-subtitle {
    font-size: .85rem;
    color: #475569;
    line-height: 1.45;
}
.fesv-reconnect-actions { margin-top: 1rem; }

/* Mostrar/ocultar subtítulos según estado de reconexión */
.fesv-show-on-rejoin, .fesv-show-on-failed, .fesv-show-on-refresh { display: none; }
.components-reconnect-show .fesv-show-on-rejoin,
#components-reconnect-modal.components-reconnect-show .fesv-show-on-rejoin { display: block; }
.components-reconnect-failed .fesv-show-on-failed,
#components-reconnect-modal.components-reconnect-failed .fesv-show-on-failed { display: block; }
.components-reconnect-failed .fesv-show-on-rejoin,
#components-reconnect-modal.components-reconnect-failed .fesv-show-on-rejoin { display: none; }
.components-reconnect-failed .fesv-reconnect-spinner { display: none; }
.components-reconnect-refresh .fesv-show-on-refresh,
#components-reconnect-modal.components-reconnect-refresh .fesv-show-on-refresh { display: block; }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

/* ─────────────────────────────────────────────────────────────────────────
   Listas de sugerencias / autocompletado (genérico, agnóstico de tema)
   Patrón:  <div class="fesv-suggest-wrap"> <input> <div class="fesv-suggest">
              <button class="fesv-suggest-item">…</button> …
   Sustituye al antipatrón de usar `.btn` como ítem de lista: `.btn` trae
   color hardcodeado (#212529 en Bootstrap 5.1) y, bajo v2, `display:inline-flex;
   justify-content:center`, lo que rompía color en oscuro y alineación en claro.
   ───────────────────────────────────────────────────────────────────────── */
.fesv-suggest-wrap { position: relative; }

.fesv-suggest {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 1060;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--fesv-surface-1, #ffffff);
    color: var(--fesv-text, #212529);
    border: 1px solid var(--fesv-border, #ced4da);
    border-radius: .375rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.fesv-suggest-item {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
    border-bottom: 1px solid var(--fesv-border-subtle, rgba(0, 0, 0, .075));
    border-radius: 0;
    padding: .3rem .6rem;
    font-size: .8125rem;
    line-height: 1.35;
    min-height: 0;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
}

    .fesv-suggest-item:last-child { border-bottom: 0; }

    .fesv-suggest-item:hover,
    .fesv-suggest-item:focus {
        background: var(--fesv-surface-2, #eef2f7);
        color: inherit;
        outline: none;
    }

    .fesv-suggest-item.active,
    .fesv-suggest-item[aria-selected="true"] {
        background: var(--fesv-primary, #0d6efd);
        color: #ffffff;
    }

        .fesv-suggest-item.active code,
        .fesv-suggest-item.active .text-muted,
        .fesv-suggest-item[aria-selected="true"] code,
        .fesv-suggest-item[aria-selected="true"] .text-muted { color: #ffffff !important; }

    .fesv-suggest-item code { color: inherit; }

.fesv-suggest-empty {
    padding: .5rem .6rem;
    font-size: .8125rem;
    opacity: .7;
}