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

.spix-calendar {
    height: calc(100vh - 260px);
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* FullCalendar visual tuning */
.fc {
    font-family: 'Segoe UI', sans-serif;
}

    .fc .fc-toolbar-title {
        font-size: 1.4rem;
        font-weight: 600;
        color: #333;
    }

    .fc .fc-button {
        background: #4285F4;
        border: none;
        border-radius: 4px;
        padding: 6px 12px;
        color: white;
    }

        .fc .fc-button:hover {
            background: #3367D6;
        }

        .fc .fc-button.fc-button-active {
            background: #0F9D58;
        }

    .fc .fc-daygrid-day {
        border: 1px solid #e6e6e6;
    }

    .fc .fc-daygrid-day-number {
        font-weight: 600;
        color: #444;
    }

    .fc .fc-daygrid-event {
        border-radius: 4px;
        padding: 2px 4px;
    }

        .fc .fc-daygrid-event:hover {
            filter: brightness(1.15);
            cursor: pointer;
        }

.btn-bor {
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    box-shadow: 5px 10px 8px #888888;
}

.btn-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fondo inicial */
    background-color: #ffffff;
    color: #000;
    /* Borde estilo Bootstrap */
    border: 1px solid #ced4da;
    /* SOMBRA flotante estilo tu botón original */
    box-shadow: 4px 6px 10px rgba(0,0,0,0.55);
    /* Transición estilo btn-dark */
    transition: background-color .25s ease, color .25s ease, transform .15s ease;
    padding: 0;
}

    /* Hover: blanco → negro */
    .btn-mini:hover {
        background-color: #000;
        color: #fff;
        transform: translateY(-2px); /* levita */
    }

    /* Active: más oscuro y baja */
    .btn-mini:active {
        background-color: #333;
        color: #fff;
        transform: translateY(0);
    }

.btn-mini-danger {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #dc3545;
    border: 1px solid #ced4da;
    box-shadow: 4px 6px 10px rgba(0,0,0,0.55);
    transition: background-color .25s ease, color .25s ease, transform .15s ease;
    padding: 0;
}

    .btn-mini-danger:hover {
        background-color: #dc3545;
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-mini-danger:active {
        background-color: #b02a37;
        color: #fff;
        transform: translateY(0);
    }

.btn-mini-success {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #198754;
    border: 1px solid #ced4da;
    box-shadow: 4px 6px 10px rgba(0,0,0,0.55);
    transition: background-color .25s ease, color .25s ease, transform .15s ease;
    padding: 0;
}

    .btn-mini-success:hover {
        background-color: #198754;
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-mini-success:active {
        background-color: #146c43;
        color: #fff;
        transform: translateY(0);
    }



.modal-content {
    animation: modalFadeIn 0.18s ease-out;
}

@keyframes modalFadeIn {
    from {
        transform: scale(0.97);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-create-shadow {
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    border-radius: 10px;
}

/* Para que los Switches pasen a Verde cuando esten activos */
.form-switch .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

/* sobre poner el spinner en los modales */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* semitransparente */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1:focus {
    outline: none;
}

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

/* Para Checkbox se puedan ver */
.form-check-input {
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.4); /* sombra más profunda y amplia */
    outline: none;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Boton X para cerrar los Modal */
.btn-close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #212529; /* negro elegante */
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

    .btn-close-modal:hover {
        background-color: #000000;
        transform: scale(1.1);
    }

    .btn-close-modal:active {
        background-color: #121212;
        transform: scale(0.95);
    }

    .btn-close-modal i {
        color: white;
    }

/* Boton Danger para Index */
.btn-shadow-danger {
    background-color: #dc3545; /* rojo Bootstrap */
    color: white !important;
    font-size: 0.875rem; /* btn-sm */
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
}

    .btn-shadow-danger:hover {
        background-color: #bb2d3b; /* rojo más profundo al hover */
        box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
        transform: scale(1.02);
        color: white !important;
    }

    .btn-shadow-danger:active {
        background-color: #a12631; /* aún más profundo al click */
        transform: scale(0.97);
        box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
        color: white !important;
    }

    /* Forzar el ícono blanco */
    .btn-shadow-danger i {
        color: white !important;
    }

/* Boton Black para Index */
.btn-shadowText-black {
    background-color: #212529; /* negro Bootstrap */
    color: white !important;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
    min-width: 70px;
}

.btn-shadow-black:hover {
    background-color: #000000; /* negro intenso al hover */
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
    transform: scale(1.02);
    color: white !important;
}

.btn-shadow-black:active {
    background-color: #121212; /* negro profundo al click */
    transform: scale(0.97);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
    color: white !important;
}

.btn-shadow-black i {
    color: white !important;
}

/* Boton Black para Index */
.btn-shadow-black {
    background-color: #212529; /* negro Bootstrap */
    color: white !important;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
}

    .btn-shadow-black:hover {
        background-color: #000000; /* negro intenso al hover */
        box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
        transform: scale(1.02);
        color: white !important;
    }

    .btn-shadow-black:active {
        background-color: #121212; /* negro profundo al click */
        transform: scale(0.97);
        box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
        color: white !important;
    }

    .btn-shadow-black i {
        color: white !important;
    }

/* Boton Warning para Index */
.btn-shadow-warning {
    background-color: #ffc107; /* amarillo Bootstrap */
    color: white !important;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

    .btn-shadow-warning:hover {
        background-color: #e0a800; /* dorado intenso */
        box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.5);
        transform: scale(1.02);
        color: white !important;
    }

    .btn-shadow-warning:active {
        background-color: #b8860b; /* dorado profundo al click */
        transform: scale(0.97);
        box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
        color: white !important;
    }

    .btn-shadow-warning i {
        color: white !important;
    }

/* Fondo gris muy suave para el área principal */
.main-content {
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    min-height: 100vh; /* ocupa al menos toda la altura de la ventana */
    box-sizing: border-box; /* asegura que el padding no agregue overflow */
}

/* Primary */
.btn-gradient-primary {
    background: linear-gradient(to right, #6f42c1, #0d6efd);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-primary:hover {
        background: linear-gradient(to right, #4b2b89, #0a53be);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }

/* Secondary */
.btn-gradient-secondary {
    background: linear-gradient(to right, #6c757d, #adb5bd);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-secondary:hover {
        background: linear-gradient(to right, #545b62, #9099a1);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }

/* Success */
.btn-gradient-success {
    background: linear-gradient(to right, #198754, #51d88a);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-success:hover {
        background: linear-gradient(to right, #146c44, #3fba72);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }

/* Danger */
.btn-gradient-danger {
    background: linear-gradient(to right, #ff1e1e, #ffd1d1);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-danger:hover {
        background: linear-gradient(to right, #e60000, #ffaaaa);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.03);
    }

/* Warning */
.btn-gradient-warning {
    background: linear-gradient(to right, #ffc107, #ffdd57);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-warning:hover {
        background: linear-gradient(to right, #e6b106, #ffd13f);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }

/* Info */
.btn-gradient-info {
    background: linear-gradient(to right, #0dcaf0, #3dd5f3);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-info:hover {
        background: linear-gradient(to right, #0aa1c0, #2bb9d9);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.02);
    }

/* Black */
.btn-gradient-black {
    background: linear-gradient(to right, #212529, #6c757d);
    border: none;
    color: white !important;
    transition: all 0.3s ease;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.7);
}

    .btn-gradient-black:hover {
        background: linear-gradient(to right, #000000, #495057);
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.6);
        transform: scale(1.03);
    }

.btn-gradient-primary,
.btn-gradient-secondary,
.btn-gradient-success,
.btn-gradient-danger,
.btn-gradient-warning,
.btn-gradient-info,
.btn-gradient-black {
    box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.5); /* sombra más profunda */
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.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 {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.route-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 580px;
    margin: 4rem auto;
    padding: 3rem 2rem;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 38px rgba(14, 42, 94, .16), 0 4px 10px rgba(14, 42, 94, .1);
    backdrop-filter: blur(8px);
    text-align: center;
}

.route-not-found__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: .75rem;
    border-radius: 20px;
    background: #0e2a5e;
    color: #ffffff;
    font-size: 2rem;
}

.route-not-found__code {
    color: #0e7c86;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.route-not-found h1 {
    margin: .35rem 0 .75rem;
    color: #0e2a5e;
    font-size: 1.8rem;
    font-weight: 800;
}

.route-not-found p {
    max-width: 430px;
    margin-bottom: 1.5rem;
    color: #496174;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Encabezado estándar para todas las tablas de índices y detalles. */
.table-dark {
    --bs-table-color: #ffffff;
    --bs-table-bg: #0e2a5e;
    --bs-table-border-color: #1b4a92;
    --bs-table-striped-bg: #0e2a5e;
    --bs-table-striped-color: #ffffff;
    --bs-table-hover-bg: #12366f;
    --bs-table-hover-color: #ffffff;
}

/* Standard nested card used inside a parent surface. */
.card-floating-section {
    border: 1px solid rgba(45, 91, 160, .45);
    border-radius: 12px;
    box-shadow: 5px 6px 0 rgba(44, 95, 173, .24);
    overflow: hidden;
}

.card-floating-section .card-body {
    background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
}

/* ================================================================
   ACORDEON DE DOS NIVELES  (categoria -> hijos)  -- DISENO POR DEFECTO
   ----------------------------------------------------------------
   Estilo unico para todas las pantallas de acordeon. Hoy lo usan
   ProductCategory, Mark/MarkModel, ServiceCategory y PlanCategory.
   Para llevarlo a otro proyecto se copia este bloque completo.

   No poner estilos de acordeon en el .razor.css de cada pagina: se
   duplican y las pantallas terminan distintas entre si.

   Markup canonico (copiar tal cual al crear una pantalla nueva):

   <table class="table align-middle acc-table">
     <thead class="table-dark"> ... </thead>
     <tbody>
       <tr class="acc-row @(abierta ? "is-open" : null)">
         <td class="acc-toggle" @onclick="...">
           <button class="acc-disc" type="button"><i class="fa fa-chevron-right"></i></button>
         </td>
         <td><span class="acc-name">Nombre</span></td>
         <td><span class="acc-count @(n == 0 ? "is-zero" : null)">@n</span></td>
         <td><span class="acc-pill @(activo ? "is-on" : "is-off")">Activo</span></td>
         <td><div class="acc-actions"> ButtonEdit / ButtonDelete </div></td>
       </tr>

       <tr class="acc-expanded">
         <td colspan="5">
           <section class="acc-panel">
             <div class="acc-card card-floating-section">   <-- las DOS clases
               <div class="acc-card-bar"> boton "nuevo hijo" </div>
               <table class="acc-list"> ... </table>
               <!-- o, si no hay hijos: -->
               <div class="acc-empty">
                 <span class="acc-empty-glyph"><i class="fa fa-..."></i></span>
                 <strong>@Localizer["NoRecordsFound"]</strong>
                 <span>@Localizer[nameof(Resource.Accordion_EmptyHint)]</span>
               </div>
             </div>
           </section>
         </td>
       </tr>
     </tbody>
   </table>

   Reglas del patron:
   - El estado NUNCA es un checkbox deshabilitado: va en .acc-pill.
   - El contador de hijos va en .acc-count (gris con .is-zero).
   - El boton de "nuevo hijo" vive dentro de .acc-card-bar, no flotando.
   - Las acciones solo se alinean con .acc-actions: la forma la ponen
     los componentes Shared (.btn-mini / .btn-mini-danger).
   - Cifras que se comparan: .acc-num (+ .is-low / .is-none).
   ================================================================ */

/* --- Fila padre --- */
.acc-table > tbody > tr.acc-row > td {
    border-bottom: 1px solid #eef1f5;
    padding: .85rem 1rem;
    transition: background .15s ease;
}

.acc-table > tbody > tr.acc-row.is-open > td {
    background: #f5f8ff;
    border-bottom-color: transparent;
}

.acc-table > tbody > tr.acc-row.is-open > td:first-child {
    box-shadow: inset 3px 0 0 #3b3fd8;
}

.acc-table > tbody > tr.acc-row:hover > td {
    background: #fafbfe;
}

.acc-table > tbody > tr.acc-row.is-open:hover > td {
    background: #f5f8ff;
}

/* --- Disco que abre y cierra --- */
.acc-toggle {
    cursor: pointer;
    width: 3rem;
}

.acc-disc {
    align-items: center;
    background: #fff;
    border: 1px solid #d7dde7;
    border-radius: 50%;
    color: #41506b;
    display: inline-flex;
    font-size: .7rem;
    height: 2rem;
    justify-content: center;
    padding: 0;
    transition: transform .18s ease, background .18s ease, color .18s ease;
    width: 2rem;
}

.acc-row.is-open .acc-disc {
    background: #3b3fd8;
    border-color: #3b3fd8;
    color: #fff;
    transform: rotate(90deg);
}

/* --- Nombre de la categoria --- */
.acc-name {
    color: #152238;
    font-weight: 600;
}

.acc-sub {
    color: #7c8798;
    display: block;
    font-size: .78rem;
    font-weight: 400;
}

/* --- Conteo de hijos --- */
.acc-count {
    align-items: center;
    background: #eef1f8;
    border-radius: 999px;
    color: #33405a;
    display: inline-flex;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: .15rem .6rem;
}

.acc-count.is-zero {
    background: #f4f5f7;
    color: #8b95a5;
}

/* --- Estado (reemplaza al checkbox deshabilitado) --- */
.acc-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    gap: .4rem;
    padding: .15rem .65rem;
}

.acc-pill::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: .45rem;
    width: .45rem;
}

.acc-pill.is-on {
    background: #e7f5ee;
    color: #116b45;
}

.acc-pill.is-off {
    background: #f1f2f4;
    color: #79828f;
}

/* --- Acciones ---
   Solo se acomodan en fila. La forma la ponen los propios componentes Shared
   (.btn-mini y .btn-mini-danger ya son redondos de 30px): pisarlos desde aqui
   los dejaba distintos entre si. */
.acc-actions {
    align-items: center;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

/* --- Panel desplegado --- */
.acc-table > tbody > tr.acc-expanded > td {
    background: #f5f8ff;
    padding: 0;
}

.acc-panel {
    padding: 0 1rem 1.15rem;
}

/* El borde, el radio y el sombreado azul los pone .card-floating-section,
   el mismo estilo de "card dentro de card" que usa el resto del sistema. */
.acc-card {
    background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
    overflow: hidden;
}

.acc-card-bar {
    align-items: center;
    border-bottom: 1px solid #dfe8f5;
    display: flex;
    gap: .875rem;
    justify-content: flex-start;
    padding: .7rem .95rem;
}

.acc-card-title {
    color: #41506b;
    font-size: .83rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 0;
    text-transform: uppercase;
}

/* --- Tabla de hijos --- */
.acc-list {
    border-collapse: collapse;
    font-size: .9rem;
    margin: 0;
    width: 100%;
}

.acc-list th {
    background: #16305e;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    padding: .6rem .95rem;
    text-align: left;
    text-transform: uppercase;
}

.acc-list td {
    border-bottom: 1px solid #f2f5f9;
    padding: .6rem .95rem;
    vertical-align: middle;
}

.acc-list tr:last-child td {
    border-bottom: 0;
}

/* Zebra: fila blanca / fila gris azulada muy suave.
   Va ANTES del hover para que el hover gane (misma especificidad, manda el orden). */
.acc-list tbody tr:nth-child(odd) td {
    background: #ffffff;
}

.acc-list tbody tr:nth-child(even) td {
    background: #e9f0fb;
}

.acc-list tbody tr:hover td {
    background: #dae5f7;
}

.acc-item-name {
    color: #152238;
    font-weight: 500;
}

.acc-item-meta {
    color: #8b95a5;
    font-size: .76rem;
}

/* --- Numeros: el inventario critico salta a la vista --- */
.acc-num {
    color: #152238;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.acc-num.is-low {
    color: #8a5a06;
}

.acc-num.is-none {
    color: #a52218;
}

.acc-chip {
    background: #eef1f8;
    border-radius: .35rem;
    color: #41506b;
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .1rem .45rem;
}

.acc-chip.is-muted {
    background: #f4f5f7;
    color: #9aa3b0;
}

.acc-center {
    text-align: center;
}

/* --- Estado vacio: dice que falta y ofrece la accion --- */
.acc-empty {
    align-items: center;
    color: #8b95a5;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.9rem 1rem;
    text-align: center;
}

.acc-empty-glyph {
    align-items: center;
    background: #f1f4fa;
    border-radius: 50%;
    color: #9aa8c2;
    display: flex;
    font-size: 1rem;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}

.acc-empty strong {
    color: #41506b;
    font-size: .92rem;
    font-weight: 600;
}

.acc-empty span {
    font-size: .83rem;
}

@media (max-width: 768px) {
    .acc-panel {
        padding: 0 .5rem 1rem;
    }

    .acc-card-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-disc,
    .acc-table > tbody > tr.acc-row > td {
        transition: none;
    }
}

/* ================================================================
   ZEBRA ESTANDAR DE TODAS LAS TABLAS DE INDICE
   Mismo gris azulado del acordeon, para que las listas del sistema
   se vean iguales vengan de donde vengan. Bootstrap pinta la zebra
   con variables, asi que basta redefinirlas una vez aqui.
   No afecta al <thead class="table-dark">: ese trae sus propias
   variables mas arriba en este archivo.
   ================================================================ */
.table-striped {
    --bs-table-striped-bg: #e9f0fb;
    --bs-table-striped-color: inherit;
}

.table-hover {
    --bs-table-hover-bg: #dae5f7;
    --bs-table-hover-color: inherit;
}

/* ================================================================
   CAPA UNICA DE MODALES (ModalService)
   Todos los modales se montan en <ModalHost> al final del layout, FUERA de la pagina.
   La capa cubre TODA la pantalla, oscurece el fondo y BLOQUEA cualquier clic detras.
   ================================================================ */
.app-modal-host {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: block;
    background-color: rgba(3, 14, 39, .68);
    backdrop-filter: blur(4px) saturate(.72);
    -webkit-backdrop-filter: blur(4px) saturate(.72);
}

/* Cada modal trae su propio fondo/z-index en linea: dentro de la capa se anulan para no
   oscurecer dos veces, y el modal se centra sobre toda la pantalla. */
.app-modal-host .modal {
    inset: 0 !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: transparent !important;
}

.app-modal-host .modal-backdrop {
    display: none;
}

/* SweetAlert (confirmar/exito/error) se abre DESPUES del modal: debe quedar por encima de la capa. */
.swal2-container {
    z-index: 11000 !important;
}

/* La barra de error de Blazor ("Reload") debe verse aunque haya un modal abierto. */
#blazor-error-ui {
    z-index: 12000;
}

/* ============================================================================
   MODALES CREATE/EDIT — tonos azules (portado de Spix para estandarizar diseno)
   ----------------------------------------------------------------------------
   Encabezado con el degradado azul del layout y la X arriba a la derecha; cuerpo
   blanco con los campos en el azul gris; y pie BLANCO, para que los botones
   compartidos (morado-azul y negro) se lean.
   ============================================================================ */

/* El contenedor deja de tener padding parejo: el encabezado y el pie llegan a los
   bordes. El aire lateral vive aqui; encabezado y pie lo anulan con margen negativo. */
.modal-content.modal-create-shadow {
    padding: 0 20px !important;
    overflow: hidden;
    border: 1px solid #d5dfef;
    border-radius: 10px;
}

/* ---------- Encabezado ---------- */
.modal-content.modal-create-shadow .modal-header {
    position: relative;
    margin: 0 -20px 18px !important;
    padding: 14px 58px 14px 20px;
    background: linear-gradient(120deg, #081634 0%, #0f2c60 55%, #1d4a96 100%);
    border: 0;
    border-bottom: 2px solid #5b8de0;
}

    /* La barrita celeste a la izquierda del titulo */
    .modal-content.modal-create-shadow .modal-header::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 20px;
        width: 3px;
        height: 30px;
        margin-top: -15px;
        border-radius: 2px;
        background: #8ab4f8;
    }

.modal-content.modal-create-shadow .modal-title {
    margin: 0;
    padding-left: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

    .modal-content.modal-create-shadow .modal-title i {
        color: #8ab4f8;
    }

/* La X: cuadrada y translucida, para que se vea sobre el degradado */
.modal-content.modal-create-shadow .btn-close-modal {
    top: 50%;
    right: 16px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    color: #dce7f7;
    background-color: rgba(255, 255, 255, .12);
    border-radius: 6px;
    box-shadow: none;
}

    .modal-content.modal-create-shadow .btn-close-modal:hover {
        background-color: rgba(255, 255, 255, .24);
        transform: none;
    }

    .modal-content.modal-create-shadow .btn-close-modal:active {
        background-color: rgba(255, 255, 255, .3);
        transform: scale(.95);
    }

/* ---------- Los campos: etiqueta pegada, en el azul gris ---------- */
.modal-content.modal-create-shadow .input-group {
    border: 1px solid #cfdcef;
    border-radius: 6px;
    overflow: hidden;
}

    /* EXCEPCION: el autocompletar cuelga su lista DENTRO del input-group. Con overflow
       hidden esa lista se recorta. Se reconoce por .position-relative que le pone el
       autocompletar; aqui no se recorta y el redondeo se pone a mano en los extremos. */
    .modal-content.modal-create-shadow .input-group.position-relative {
        overflow: visible;
    }

        .modal-content.modal-create-shadow .input-group.position-relative > :first-child {
            border-radius: 5px 0 0 5px;
        }

        .modal-content.modal-create-shadow .input-group.position-relative > .form-control {
            border-radius: 0 5px 5px 0;
        }

.modal-content.modal-create-shadow .input-group-text {
    color: #33456b;
    font-size: 13px;
    background: #dbe6f8;
    border: 0;
    border-right: 1px solid #cfdcef;
    border-radius: 0;
}

.modal-content.modal-create-shadow .input-group > .form-control,
.modal-content.modal-create-shadow .input-group > .form-select {
    background: #e9f0fb;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    .modal-content.modal-create-shadow .input-group > .form-control:focus,
    .modal-content.modal-create-shadow .input-group > .form-select:focus {
        background: #fff;
        box-shadow: inset 0 0 0 2px #5b8de0;
    }

/* ---------- Pie ----------
   La fila de botones del formulario pasa a ser el pie: blanca, pegada a los bordes.
   Se busca por :has() para que aplique aunque el gap varie. Los botones de Dlabx son
   btn-gradient-primary (Guardar) y btn-gradient-black (Volver). */
.modal-content.modal-create-shadow .d-flex.justify-content-center:has(> .btn-gradient-blue),
.modal-content.modal-create-shadow .d-flex.justify-content-center:has(> .btn-gradient-green),
.modal-content.modal-create-shadow .d-flex.justify-content-center:has(> .btn-gradient-dark),
.modal-content.modal-create-shadow .d-flex.justify-content-center:has(> .btn-gradient-red),
.modal-content.modal-create-shadow .d-flex.justify-content-center:has(> .btn-gradient-purple) {
    flex-direction: row-reverse;
    gap: 12px;
    justify-content: flex-end !important;
    margin: 18px -20px 0 !important;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #e3e9f3;
}

/* ============================================================================
   BOTONES GRANDES — familia .btn-gradient-* (portado de Spix)
   ----------------------------------------------------------------------------
   Molde del escritorio (WPF): boton BLANCO con borde fino y esquina 8, una
   franja de color a la izquierda con el icono en blanco, y el texto en ese mismo
   color (no en blanco). La sombra va SOLIDA y sin difuminar, en gris azulado,
   porque estos botones tambien viven sobre el azul oscuro de las cabeceras.
   Los usan los componentes de SharedButtonForm.
   ============================================================================ */
.btn-gradient-blue,
.btn-gradient-green,
.btn-gradient-dark,
.btn-gradient-red,
.btn-gradient-purple {
    align-items: stretch;
    background: #fff;
    border: 1px solid #D7DEEC;
    border-radius: 8px;
    color: #16305E;
    display: inline-flex;
    font-weight: 500;
    gap: 0;
    height: 44px;
    min-width: 124px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    box-shadow: 2px 2px 0 #7C8CA8;
    transition: background .18s ease;
}

    /* La franja con el icono dentro */
    .btn-gradient-blue > i,
    .btn-gradient-green > i,
    .btn-gradient-dark > i,
    .btn-gradient-red > i,
    .btn-gradient-purple > i {
        align-items: center;
        color: #fff;
        display: flex;
        flex: 0 0 42px;
        font-size: 15px;
        justify-content: center;
        margin: 0 !important;
    }

    /* Sin icono la franja se encoge, pero no desaparece */
    .btn-gradient-blue:not(:has(i))::before,
    .btn-gradient-green:not(:has(i))::before,
    .btn-gradient-dark:not(:has(i))::before,
    .btn-gradient-red:not(:has(i))::before,
    .btn-gradient-purple:not(:has(i))::before {
        content: "";
        flex: 0 0 5px;
    }

    .btn-gradient-blue > span:not([class*="spinner"]),
    .btn-gradient-green > span:not([class*="spinner"]),
    .btn-gradient-dark > span:not([class*="spinner"]),
    .btn-gradient-red > span:not([class*="spinner"]),
    .btn-gradient-purple > span:not([class*="spinner"]) {
        align-self: center;
        flex: 1;
        padding: 0 18px;
        text-align: center;
    }

    /* Mientras guarda no hay icono: el girador necesita su propio aire */
    .btn-gradient-blue > [class*="spinner"],
    .btn-gradient-green > [class*="spinner"],
    .btn-gradient-dark > [class*="spinner"],
    .btn-gradient-red > [class*="spinner"],
    .btn-gradient-purple > [class*="spinner"] {
        align-self: center;
        margin-left: 14px;
    }

    /* Al pasar el mouse solo se tinta el fondo: el boton NO se mueve de sitio */
    .btn-gradient-blue:hover,
    .btn-gradient-green:hover,
    .btn-gradient-dark:hover,
    .btn-gradient-red:hover,
    .btn-gradient-purple:hover {
        background: #E8EEFA;
        text-decoration: none;
    }

    .btn-gradient-blue:active,
    .btn-gradient-green:active,
    .btn-gradient-dark:active,
    .btn-gradient-red:active,
    .btn-gradient-purple:active {
        opacity: .86;
    }

    .btn-gradient-blue:disabled,
    .btn-gradient-green:disabled,
    .btn-gradient-dark:disabled,
    .btn-gradient-red:disabled,
    .btn-gradient-purple:disabled {
        cursor: default;
        opacity: .55;
    }

/* Talla chica: para barras de accion de un panel. Se usa como "btn-gradient-green is-sm". */
.btn-gradient-blue.is-sm,
.btn-gradient-green.is-sm,
.btn-gradient-dark.is-sm,
.btn-gradient-red.is-sm,
.btn-gradient-purple.is-sm {
    height: 32px;
    min-width: 0;
    font-size: 12px;
}

    .btn-gradient-blue.is-sm > i,
    .btn-gradient-green.is-sm > i,
    .btn-gradient-dark.is-sm > i,
    .btn-gradient-red.is-sm > i,
    .btn-gradient-purple.is-sm > i {
        flex: 0 0 30px;
        font-size: 13px;
    }

    .btn-gradient-blue.is-sm > span:not([class*="spinner"]),
    .btn-gradient-green.is-sm > span:not([class*="spinner"]),
    .btn-gradient-dark.is-sm > span:not([class*="spinner"]),
    .btn-gradient-red.is-sm > span:not([class*="spinner"]),
    .btn-gradient-purple.is-sm > span:not([class*="spinner"]) {
        padding: 0 12px;
    }

/* Accion principal: crear, guardar */
.btn-gradient-blue {
    color: #16305E;
}

    .btn-gradient-blue > i,
    .btn-gradient-blue:not(:has(i))::before {
        background: #2C5FAD;
    }

/* Accion afirmativa: activar, aprobar */
.btn-gradient-green {
    color: #146C44;
}

    .btn-gradient-green > i,
    .btn-gradient-green:not(:has(i))::before {
        background: #198754;
    }

/* Accion secundaria: volver, procesos en bloque. Gris, para no competirle al principal. */
.btn-gradient-dark {
    color: #5B6B85;
}

    .btn-gradient-dark > i,
    .btn-gradient-dark:not(:has(i))::before {
        background: #8A96AB;
    }

/* Accion especial: provisionar. Morado para que no se confunda con guardar ni aprobar. */
.btn-gradient-purple {
    color: #4a2a85;
}

    .btn-gradient-purple > i,
    .btn-gradient-purple:not(:has(i))::before {
        background: #6f42c1;
    }

/* Accion destructiva en bloque */
.btn-gradient-red {
    color: #B02A37;
}

    .btn-gradient-red > i,
    .btn-gradient-red:not(:has(i))::before {
        background: #DC2626;
    }

/* ============================================================================
   ENCABEZADO DE INDEX — glifo + titulo + subtitulo (portado de Spix)
   Estandariza la cabecera de todos los index. Doble-clic en fila = abrir editar.
   ============================================================================ */
.idx-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}

.idx-glifo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 19px;
    background: linear-gradient(135deg, #0b1236 0%, #2f7bf6 100%);
    box-shadow: 4px 5px 10px rgba(10, 26, 63, .35);
}

.idx-head-text h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.idx-head-text p {
    margin: 4px 0 0;
    color: #5b6784;
    font-size: 14px;
}

/* Doble-clic en la fila abre Editar. */
.row-dbl {
    cursor: pointer;
    user-select: none;
}

    .row-dbl:hover {
        background-color: #dce8fa !important;
    }

/* Campo de usuario con revision en vivo: borde verde si esta libre, rojo si ya existe. */
.form-control.is-available {
    border-color: #198754;
}

.form-control.is-taken {
    border-color: #dc3545;
}

.username-status {
    min-width: 42px;
    justify-content: center;
    background: #ffffff;
}

.username-suggest {
    border-color: #cfd8ea;
}

.username-feedback {
    margin-top: 4px;
    font-size: 12px;
}

.username-suggestions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: #6b7690;
}

.username-chip {
    padding: 2px 9px;
    color: #0d6efd;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #b9d3ff;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
}

    .username-chip:hover {
        color: #ffffff;
        background: #0d6efd;
    }

/* ============================================================================
   KPI CARDS — tarjetas de resumen (Total/Pagado/Pendiente, etc.)
   Superficie azul gris, linea lateral de acento y sombra azul gris. Centralizado.
   Uso: <div class="kpi-card kpi-card--primary"> <div class="kpi-label">..</div>
        <div class="kpi-value">..</div> </div>  (modificadores: --primary/--success/--warning)
   ============================================================================ */
.kpi-card {
    height: 100%;
    background: #f5f8fd;
    border: 1px solid #e0e7f2;
    border-left: 4px solid #2C5FAD;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 2px 3px 12px rgba(10, 26, 63, .12);
}

    .kpi-card .kpi-label {
        color: #5b6784;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .kpi-card .kpi-value {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.1;
        color: #16305E;
    }

    .kpi-card .kpi-foot {
        color: #8a95a9;
        font-size: 12px;
        margin-top: 4px;
    }

.kpi-card--primary { border-left-color: #2C5FAD; }
    .kpi-card--primary .kpi-value { color: #16305E; }

.kpi-card--success { border-left-color: #198754; }
    .kpi-card--success .kpi-value { color: #146C44; }

.kpi-card--warning { border-left-color: #e0a800; }
    .kpi-card--warning .kpi-value { color: #8a5a00; }