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

/* Fuentes empaquetadas localmente (no dependen de Google Fonts/CDN externo:
   el cliente puede tener la red restringida sin salida a internet abierta).
   Son fuentes variables: un solo archivo cubre todo el rango de pesos. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/Inter.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/JetBrainsMono.woff2') format('woff2');
}

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --ink: #14161a;
    --ink-soft: #4b5563;
    --ink-muted: #6b7280;
    --ink-faint: #9ca3af;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-bg: #eef2ff;
    --accent-text: #4338ca;
    --line: #e5e7eb;
    --line-soft: #f0f1f3;
    --surface: #ffffff;
    --canvas: #f6f7f9;
}

html, body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Escala de títulos armonizada (antes: tamaños por defecto de Bootstrap,
   demasiado grandes para una UI administrativa densa). */
h1, .h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h2, .h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h3, .h3 { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
h4, .h4 { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
h5, .h5 { font-size: 1rem; font-weight: 600; color: var(--ink); }
h6, .h6 { font-size: .875rem; font-weight: 600; color: var(--ink); }

/* El hero de PaginaInicio usaba .display-4 de Bootstrap (~3.5rem): demasiado
   llamativo comparado con el resto de la UI, se restringe a la escala de h1. */
.jumbotron .display-4 {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Encabezados de tabla armonizados: mayúsculas pequeñas y espaciadas, en vez
   del tamaño de texto normal que hereda Bootstrap por defecto. */
.table thead th, table thead th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
}

a, .btn-link {
    color: #0366d6;
}

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

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.content {
    flex: 1;
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(245, 245, 245, 0.1);
}

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

.pcard {
    display: flex;
    height: calc(100% - 6px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: var(--surface);
    min-width: 108px;
    min-height: 104px;
    padding: 8px 6px;
    margin: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pcard:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 18px rgba(79, 70, 229, .12);
    transform: translateY(-2px);
}

.pcard__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink-soft);
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.pcard__link:hover,
.pcard__link:focus-visible {
    text-decoration: none;
    color: var(--accent-text);
}

.pcard__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pcard__frame {
    background-color: var(--accent-bg);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .18s ease, background-color .18s ease;
}

.pcard__link:hover .pcard__frame {
    background-color: var(--accent);
    transform: scale(1.06);
}

.pcard__img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    transition: transform .18s ease;
}

.pcard__link:hover .pcard__img {
    transform: scale(1.08);
}

.pcard__title {
    text-align: center;
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Agrupadores sutiles por concepto dentro de una misma tarjeta (PaginaInicio),
   mismo criterio que las secciones del navbar: una etiqueta pequeña en
   mayúsculas en vez de una tarjeta separada por grupo. */
.pcard-group {
    padding-top: .5rem;
}

.pcard-group + .pcard-group {
    border-top: 1px solid var(--line);
    margin-top: .5rem;
}

.pcard-group__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
    margin: 0 0 .5rem .25rem;
}

.textarea-section {
    color: #FFF;
    margin: 12px;
    padding: 8px;
    background-color: #333;
    border-radius: 8px;
}

.textarea-section__group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 16px;
}

.textarea-section__wrapper {
    width: 100%;
    position: relative;
}

.textarea-section__titulo {
    color: #FFF;
    background-color: #333;
    padding: 4px;
    border-radius: 8px;
    box-sizing:border-box;
    position: absolute;
    top: -15px;
    left: 20px;
    font-size: 15px;
}

.textarea-section__input {
    width: 100%;
    height: 350px;
    background-color: rgba(255,255,255,.02);
    color: #fff;
    outline: none;
    border: none;
    border-radius: 8px;
    padding: 12px;
    resize: none;
    flex: 1;
    transition: .5s;
    font-family: var(--font-mono);
    font-size: small;
}

.textarea-section__visualizer {
    width: 100%;
    height: 350px;
    background-color: #FFF;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: small;
    overflow: auto;
    white-space: nowrap;
    border: 1px solid #FFF;
    display: inline-block;
}

.textarea-section__input:focus {
    border: 1px solid #88c5f7;
}

.textarea-section__input::placeholder {
    text-align: center;
}

.textarea-section__input:read-only {
    border: none;
    font-size: medium;
    background-color: #444;
}

.textarea-section__select {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
}

.textarea-section__select option {
    background-color: #333;
}

.textarea-section__control {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.textarea-section__control--absolute {
    position: absolute;
    top: 0;
    right: 0;
}

.textarea-section__btn {
    outline: none;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    margin: 4px;
    text-transform: uppercase;
    font-size: small;
    font-weight: bold;
}

.textarea-section__btn:hover {
    border: 1px solid #d3d3d3;
    background-color: #444;
    color: #d3d3d3;
    cursor: default;
}

.textarea-section__btn:focus {
    outline: none;
}

.textarea-section__btn--md {
    font-size: 20px;
}

.textarea-section__panel {
    display: flex;
    flex-direction: column;
    background-color: rgba(255,255,255,.02);
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
}

.textarea-section__panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 6px 12px;
    border-bottom: 1px solid #444;
}

.textarea-section__panel-title {
    color: #FFF;
    font-size: 15px;
    font-weight: bold;
}

.textarea-section__panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.textarea-section__panel .textarea-section__input {
    border-radius: 0;
}

.xtb {
    display: table;
    font-family: var(--font-mono);
}

.xtc {
    display: table-cell;
}

.xmt {
    color: #0000CC;
    display: inline;
}

.xel {
    color: #990000;
    display: inline;
}

.xdt {
    color: #000000;
    display: inline;
}

.xat {
    color: #FF0000;
    display: inline;
}

.preloader {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 110;
    display: none;
}

.custom-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%,#F46600);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: s3 1s infinite linear;
}

@keyframes s3 {
    to {
        transform: rotate(1turn)
    }
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .main > div,
    .main > .bc {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* Toast: tarjeta compacta con acento de color por nivel (borde izquierdo +
   ícono) en vez del bloque sólido de Bootstrap, siguiendo el mismo lenguaje
   visual minimalista que el resto de la UI (superficie clara, borde sutil,
   sombra suave, tipografía del sitio). */
.cs-toast {
    display: none;
    align-items: flex-start;
    gap: .65rem;
    position: fixed;
    /* Debajo de la topbar (.top-row, 3.5rem de alto, sticky) en vez de
       superpuesto: así nunca tapa el usuario/badge de la esquina superior. */
    top: calc(3.5rem + .75rem);
    right: 1.25rem;
    z-index: 1080;
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: .8rem .9rem;
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
    font-family: var(--font-sans);
}

.cs-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .8rem;
    color: #fff;
    background-color: var(--ink-faint);
}

.cs-toast-body {
    flex: 1;
    min-width: 0;
}

    .cs-toast-body h5 {
        margin: 0 0 .1rem;
        font-size: .8rem;
        font-weight: 600;
        color: var(--ink);
    }

    .cs-toast-body p {
        margin-bottom: 0;
        font-size: .8rem;
        line-height: 1.4;
        color: var(--ink-soft);
        word-break: break-word;
    }

.cs-toast-visible {
    display: flex;
    animation: cs-toast-in .2s ease;
}

.cs-toast--success { border-left-color: #16a34a; }
.cs-toast--success .cs-toast-icon {
    background-color: #16a34a;
    position: relative;
    animation: cs-toast-pop .38s cubic-bezier(.34, 1.56, .64, 1);
}

/* Anillo que se expande y se desvanece detrás del ícono, para que un "guardado" se
   sienta como una confirmación (ej. tras Ctrl+S) y no solo como un mensaje más. */
.cs-toast--success .cs-toast-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #16a34a;
    animation: cs-toast-ring .5s ease-out .05s;
}

@keyframes cs-toast-pop {
    0% { transform: scale(.4); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes cs-toast-ring {
    0% {
        opacity: .6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-toast--success .cs-toast-icon,
    .cs-toast--success .cs-toast-icon::after {
        animation: none;
    }
}

.cs-toast--danger { border-left-color: #dc2626; }
.cs-toast--danger .cs-toast-icon { background-color: #dc2626; }

.cs-toast--warning { border-left-color: #d97706; }
.cs-toast--warning .cs-toast-icon { background-color: #d97706; }

.cs-toast--info { border-left-color: #0284c7; }
.cs-toast--info .cs-toast-icon { background-color: #0284c7; }

/* Atajos de teclado: botón flotante + modal con el diccionario de atajos.
   Genérico para toda la aplicación (Shared/Shortcuts/AppKeyboardShortcuts.razor,
   montado una sola vez en MainLayout), no depende de ningún módulo en particular. */
.cs-shortcuts-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La barra inferior del centralizado (.bc) queda pegada abajo; el botón sube para no taparla. */
body:has(.bc) .cs-shortcuts-fab {
    bottom: calc(2.4rem + 1.25rem);
}

.cs-shortcuts-fab:hover,
.cs-shortcuts-fab:focus-visible {
    background: var(--accent-hover);
    outline: 3px solid var(--accent-bg);
    outline-offset: 2px;
}

.cs-shortcuts-backdrop {
    z-index: 1070;
    overflow-y: auto;
    padding: 1rem;
    background-color: rgba(0, 0, 0, .5);
}

.cs-shortcuts-dialog {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.cs-shortcuts-content {
    position: relative;
    pointer-events: auto;
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}

.cs-shortcuts-group + .cs-shortcuts-group {
    margin-top: 1rem;
}

.cs-shortcuts-group-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}

.cs-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.cs-shortcuts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cs-shortcuts-row dt {
    flex-shrink: 0;
    white-space: nowrap;
}

.cs-shortcuts-row dd {
    margin: 0;
    color: var(--ink-soft);
    text-align: right;
}

/* Keycap "profesional": bisel sutil (borde claro arriba, sombra abajo) para que se
   sienta como una tecla física en vez de una etiqueta plana. Las teclas con ícono
   (ver wwwroot/img/keys/*.svg + KeyIconProvider) usan el mismo keycap, centrando el
   SVG en vez de texto — letras/números/"Alt"/"Ctrl"/"Esc" no tienen ícono estándar,
   así que muestran el texto tal cual. */
.cs-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .5rem;
    margin-right: .25rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--ink-soft);
    background: linear-gradient(180deg, var(--surface), var(--canvas));
    border: 1px solid var(--line);
    border-radius: .4rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 1px 0 var(--line),
        0 2px 3px rgba(0, 0, 0, .06);
}

.cs-kbd--icon {
    padding: 0 .4rem;
}

.cs-kbd svg {
    width: 12px;
    height: 12px;
}

/* Hint de atajo dentro de un botón (ej. "Confirmar Alt+Enter") — texto plano y
   discreto, no un ícono de tecla en caja, siguiendo el mismo lenguaje que usan los
   prompts de confirmación de Claude Code/Desktop. */
.cs-confirm-btn-hint {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    font-size: .72rem;
    font-weight: 500;
    opacity: .8;
}

.cs-confirm-icon {
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
    top: .5px;
}

.cs-confirm-icon svg {
    width: 11px;
    height: 11px;
}

/* Paleta de comandos (Alt+K): buscador rápido de secciones de la aplicación.
   Shared/Shortcuts/AppCommandPalette.razor, montado una sola vez en MainLayout. */
.cs-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1075;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background-color: rgba(0, 0, 0, .5);
}

.cs-palette-dialog {
    width: 100%;
    max-width: 480px;
    margin: 0 1rem;
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.cs-palette-input {
    width: 100%;
    padding: .9rem 1rem;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    outline: none;
}

.cs-palette-list {
    list-style: none;
    margin: 0;
    padding: .4rem;
    max-height: 320px;
    overflow-y: auto;
}

.cs-palette-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border-radius: 6px;
    cursor: pointer;
}

.cs-palette-item span {
    font-weight: 500;
}

.cs-palette-item small {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.cs-palette-item--active {
    background: var(--accent-bg);
}

.cs-palette-item--active span {
    color: var(--accent-text);
}

.cs-palette-empty {
    padding: .9rem 1rem;
    color: var(--ink-muted);
    text-align: center;
}

/* Confirmación de atajos que crean o modifican datos (ej. Ctrl+S). Compacto y
   minimalista a propósito: es una interrupción breve, no una pantalla — sin header,
   sin ícono, un mensaje y dos botones. Mismo componente para toda la aplicación
   (Shared/Shortcuts/AppKeyboardShortcuts.razor). */
.cs-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .45);
    padding: 1rem;
}

.cs-confirm-dialog {
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    padding: 1rem 1.1rem .9rem;
}

.cs-confirm-message {
    margin: 0 0 .9rem;
    font-size: .875rem;
    line-height: 1.4;
}

.cs-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.cs-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
}

.cs-confirm-btn--ghost {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
}

.cs-confirm-btn--ghost:hover {
    background: var(--canvas);
}

.cs-confirm-btn--primary {
    background: var(--accent);
    color: #fff;
}

.cs-confirm-btn--primary:hover {
    background: var(--accent-hover);
}

@keyframes cs-toast-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Alertas (resúmenes de validación en formularios): Bootstrap 5 ya usa
   colores "subtle" (pasteles), solo se compacta el padding/radio/tipografía
   para que combine con el resto de tarjetas del sitio. */
.alert {
    padding: .65rem .9rem;
    border-radius: 8px;
    font-size: .85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

    .alert ul {
        margin-bottom: 0;
        padding-left: 1.1rem;
    }

.alert-heading {
    font-size: .9rem;
    font-weight: 600;
}

.child-table-container {
    max-height: 250px; /* Altura máxima antes del scroll */
    overflow-y: auto; /* Scroll vertical si es necesario */
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.child-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #333;
}

    .child-table th,
    .child-table td {
        padding: 8px 12px;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

    .child-table th {
        background-color: #f5f5f5;
        font-weight: 600;
    }

    .child-table tr:hover {
        background-color: #f0f0f0;
    }

.text-center {
    text-align: center !important;
}

.search-input {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.modern-form {
    color: #333;
}

.form-field {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

    .form-field label {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #444;
    }

    .form-field input[type="text"],
    .form-field input[type="number"],
    .form-field select {
        padding: 0.5rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
        background-color: #fdfdfd;
        transition: border 0.2s ease, box-shadow 0.2s ease;
    }

        .form-field input:focus,
        .form-field select:focus {
            border-color: #5a9fff;
            box-shadow: 0 0 0 2px rgba(90, 159, 255, 0.2);
            outline: none;
        }

.checkbox-field {
    margin-top: 1.5rem;
}

    .checkbox-field label {
        display: flex;
        align-items: center;
        font-weight: 500;
    }

    .checkbox-field input[type="checkbox"] {
        margin-right: 0.5rem;
    }

.ficha-empresa {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    color: #333;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

    .ficha-empresa tr {
        border-bottom: 1px solid #eee;
    }

    .ficha-empresa td {
        padding: 0.70rem 1rem;
        font-size: 0.80rem;
        vertical-align: top;
    }

        .ficha-empresa td.label {
            font-weight: 600;
            color: #555;
            width: 25%;
            background-color: #f5f5f5;
        }

    .ficha-empresa tr:last-child {
        border-bottom: none;
    }

.sticky-header {
    position: sticky;
    top: 0;
    background-color: #fafafa;
    padding: 10px;
    z-index: 10;
    border-bottom: 1px solid #ddd;
}

    .sticky-header h6 {
        margin: 0 0 0.5rem 0;
    }

/* Contenedor principal */
.pantalla-inhabilitar {
    background-color: #f7f9fb;
    color: #2e2e2e;
    padding: 2rem;
}

/* Título principal */
.titulo {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #222;
}

/* Subtítulo o mensaje de advertencia */
.subtitulo {
    font-weight: 400;
    margin-top: 1rem;
    color: #444;
}

/* Línea divisoria */
.linea-divisoria {
    border: none;
    height: 1px;
    background-color: #e0e0e0;
    margin-bottom: 1.5rem;
}

/* Grupo de formularios */
.formulario {
    margin-bottom: 1rem;
}

/* Etiquetas de datos */
.etiqueta {
    display: block;
    font-size: 1rem;
    color: #555;
    padding: 0.5rem 0;
}

.popup-info {
    position: absolute;
    background: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 6px;
    z-index: 1000;
    font-size: 14px;
    max-width: 300px;
    display: none;
}

.badge-role {
    display: inline-block;
    margin-right: 8px;
}

.badge-role__label {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

.badge-role__label--admin {
    background-color: #d32f2f; /* rojo oscuro */
}

.badge-role__label--user {
    background-color: #1976d2; /* azul */
}

.properties-section {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.05);
}

    .properties-section:hover {
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
    }

form input,
form select {
    border-radius: 0.375rem;
}

form label {
    font-weight: 500;
}

form .form-check-label {
    cursor: pointer;
}

.sidebar {
    /* Paleta oscura propia del navbar: redefine las variables de color solo
       dentro de .sidebar (herencia de custom properties), así el resto de la
       página se mantiene claro pero el navbar conserva el modo oscuro con el
       mismo tratamiento de acento/bordes que el resto de la UI. */
    --surface: #1a1d24;
    --canvas: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .08);
    --ink: #f1f3f5;
    --ink-soft: #ced4da;
    --ink-muted: #9aa3ad;
    --ink-faint: #6b7280;
    --accent: #818cf8;
    --accent-bg: rgba(79, 70, 229, .28);
    --accent-text: #c7c9ff;

    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* min-width/max-width también deben animar: si solo "width" transiciona,
       al expandir min-width salta a 260px de inmediato y anula la animación
       (el ancho usado es max(width, min-width), así que se ve un salto en
       vez de un deslizamiento). */
    transition: width .18s ease, min-width .18s ease, max-width .18s ease;
    background-color: var(--surface);
    border-right: 1px solid var(--line);
}

/* Modo colapsado (solo escritorio): angosta el sidebar y deja solo los íconos.
   El texto se oculta vía .sidebar__link-text en vez de recortarlo, para que
   siga existiendo en el DOM (accesibilidad, título del NavLink como tooltip).
   min-width es necesario: como flex item, .sidebar tiene min-width:auto por
   defecto y no se encoge más allá del contenido interno sin esto, aunque
   "width" ya haya ganado la cascada. */
.sidebar--collapsed {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

/* El texto (nav links y título del logo) se desvanece y se encoge con
   transition en vez de display:none, para que el paso a modo "solo íconos"
   se vea como una animación continua y no como un salto. overflow:hidden
   hace que el ancho automático mínimo del flex-item sea 0, así max-width:0
   sí logra colapsarlo del todo (evita la trampa de min-width:auto en flex). */
.sidebar__link-text {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: max-width .18s ease, opacity .12s ease;
}

.sidebar--collapsed .sidebar__link-text {
    max-width: 0;
    opacity: 0;
    transition: max-width .18s ease, opacity .08s ease;
}

/* El logo permanece en una posición horizontal fija (el padding-left del
   header no cambia entre estados) calculada para quedar centrado en los
   72px del modo colapsado; así no necesita animarse porque nunca se mueve.
   El botón de colapsar es siempre position:absolute (en ambos estados) y solo
   se anima su tamaño/posición, para no competir por espacio con el logo en
   los 72px disponibles ni provocar saltos de layout al cambiar de flujo. */
.sidebar--collapsed .sidebar__link,
.sidebar--collapsed .sidebar__link--logout {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar__collapse-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ink-muted);
    padding: .25rem .5rem;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: right .18s ease, padding .18s ease, font-size .18s ease;
}

.sidebar--collapsed .sidebar__collapse-toggle {
    right: 3px;
    padding: .2rem .3rem;
    font-size: .6rem;
}

.sidebar__collapse-toggle:hover {
    color: var(--ink);
}

.sidebar__collapse-toggle i {
    transition: transform .18s ease;
}

.sidebar--collapsed .sidebar__collapse-toggle i {
    transform: rotate(180deg);
}

/* Header */
.sidebar__header {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 56px;
    /* !important necesario: la utilidad .px-3 de Bootstrap declara su
       padding con !important, así que un override normal no la vence. */
    padding-left: 21px !important;
    border-bottom: 1px solid var(--line);
}

.sidebar__brand {
    display: flex;
    align-items: center;
}

.sidebar__title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
}

/* Body */
.sidebar__body {
    flex: 1;
    display: flex;
    flex-direction: column; /* siempre columna */
    overflow-y: auto; /* scroll vertical */
    overflow-x: hidden; /* nada horizontal */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
}

.sidebar__nav {
    width: 100%;
}

/* Agrupadores por concepto (Administración, Configuración, Operación, Módulos).
   Cada grupo es un ítem colapsable/expandible (el "subnivel"); expandido por
   defecto. En modo colapsado (solo íconos) el encabezado se oculta y el
   contenido del grupo siempre se muestra completo, sin importar el estado del
   acordeón, separado por una línea sutil entre grupos. */
.sidebar__group {
    margin-top: .75rem;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition: margin-top .18s ease, padding-top .18s ease, border-color .18s ease;
}

.sidebar__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-height: 40px;
    padding: .35rem .75rem;
    background: transparent;
    border: none;
    color: var(--ink-faint);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height .18s ease, opacity .12s ease, padding .18s ease, visibility 0s linear 0s;
}

    .sidebar__group-header:hover {
        color: var(--ink-muted);
    }

.sidebar__group-chevron {
    font-size: .65rem;
    transition: transform .15s ease;
}

.sidebar__group-chevron--collapsed {
    transform: rotate(-90deg);
}

.sidebar__group-body {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar__group-body--collapsed {
    display: none;
}

.sidebar--collapsed .sidebar__group {
    border-color: var(--line);
    margin-top: .5rem;
    padding-top: .5rem;
}

.sidebar--collapsed .sidebar__group-header {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height .18s ease, opacity .12s ease, padding .18s ease, visibility 0s linear .18s;
}

.sidebar--collapsed .sidebar__group-body,
.sidebar--collapsed .sidebar__group-body--collapsed {
    display: block !important;
}

/* Links */
.sidebar__link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .75rem;
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
    font-size: .875rem;
    gap: .1rem;
    border-left: 3px solid transparent;
    transition: padding .18s ease, background-color .15s ease, color .15s ease;
}

    .sidebar__link img {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .sidebar__link:hover {
        background-color: var(--canvas);
        color: var(--ink);
    }

    .sidebar .sidebar__nav .sidebar__link.active {
        background-color: var(--accent-bg);
        border-left-color: var(--accent);
        color: var(--accent-text);
        font-weight: 600;
    }

/* Footer */
.sidebar__footer {
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid var(--line);
}

.sidebar__link--logout {
    background-color: rgba(220, 53, 69, .18);
    color: #fca5a5;
}

    .sidebar__link--logout:hover {
        background-color: rgba(220, 53, 69, .3);
        color: #fecaca;
    }

.sidebar__version {
    text-align: center;
    font-size: .7rem;
    color: var(--ink-faint);
    padding-bottom: .25rem;
}

/* Scrollbar */
.sidebar__body::-webkit-scrollbar {
    width: 6px;
}

.sidebar__body::-webkit-scrollbar-thumb {
    background-color: var(--line);
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar,
    .sidebar--collapsed {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        position: sticky;
        top: 0; /* siempre en la parte superior */
        z-index: 100; /* encima del contenido principal */
    }

    /* El modo "solo íconos" es exclusivo de escritorio; en móvil el sidebar
       usa su propio show/hide completo (botón hamburger). */
    .sidebar--collapsed .sidebar__link-text {
        max-width: 200px;
        opacity: 1;
    }

    .sidebar--collapsed .sidebar__link,
    .sidebar--collapsed .sidebar__link--logout {
        justify-content: flex-start;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .sidebar__body.collapse {
        display: none;
    }
    
    .sidebar__body.collapse.show {
        display: block;
        max-height: 50vh;
        overflow-y: auto;
        background-color: var(--surface);
        transition: all 0.3s ease;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .sidebar__footer {
        position: relative;
    }

    .sidebar__footer .sidebar__link--logout {
        justify-content: center;
        background-color: rgba(220, 53, 69, .18);
        color: #fca5a5;
    }

    .sidebar__footer .sidebar__link--logout img {
        display: none;
    }
}

/* LoginDisplay */
.login-display__user {
    display: flex;
    align-items: center;
    white-space: nowrap; /* evita que el nombre se rompa */
}

.login-display__name {
    font-weight: bold;
    font-size: 1rem;
    color: #000; /* texto visible sobre barra gris oscuro */
    max-width: 200px; /* opcional: evita que el nombre se salga del contenedor */
    overflow: hidden;
    text-overflow: ellipsis; /* agrega "..." si es muy largo */
}

/* Avatar */
.login-display__avatar {
    border-radius: 50%;
    border: 2px solid #f8f9fa;
}

/* Responsive */
@media (max-width: 768px) {
    .login-display__name {
        font-size: 0.9rem;
        max-width: 120px;
    }

    .badge-role__label {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    .login-display__avatar {
        width: 30px;
        height: 30px;
    }
}

/* Filter Container */
.filter-container {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-bottom: 1px solid #e0e0e0;
}

.filter-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-header .btn {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.filter-header .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.filter-body {
    padding: 1.5rem;
}

.section-subtitle {
    color: #495057;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.25rem;
}

.form-control-sm,
.form-select-sm {
    border-radius: 4px;
    border: 1px solid #ced4da;
    transition: all 0.2s ease;
}

.form-control-sm:focus,
.form-select-sm:focus {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.15);
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.filter-actions .btn {
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-actions .btn-primary {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    border: none;
}

.filter-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(73, 80, 87, 0.4);
}

.filter-actions .btn i {
    margin-right: 0.25rem;
}

.row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Skeleton Loader Styles */
.table-skeleton {
    animation: fadeIn 0.3s ease-in;
}

.skeleton-header,
.skeleton-cell {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    height: 20px;
}

.skeleton-header {
    height: 24px;
    margin: 4px 0;
}

.skeleton-cell {
    height: 18px;
    margin: 6px 0;
}

/* Estilos específicos para columnas de iconos (30px) */
.skeleton-cell-icon {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    border-radius: 3px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@media (max-width: 768px) {
    .filter-body {
        padding: 1rem;
    }

    .filter-actions {
        flex-direction: column;
    }

    .filter-actions .btn {
        width: 100%;
    }
}

/* Pagination Styles - Professional Design */

/* Wrapper principal - Layout vertical centrado */
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Información de registros - Centrada arriba */
.pagination-info {
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

.pagination-info strong {
    color: #212529;
    font-weight: 600;
}

/* Contenedor de navegación - Centrado abajo */
.pagination-wrapper nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Contenedor de paginación */
.pagination {
    margin-bottom: 0;
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Items de paginación */
.pagination .page-item {
    margin: 0;
}

/* Links/Botones de página */
.pagination .page-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
}

.pagination .page-link:hover:not(:disabled) {
    color: #212529;
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.pagination .page-link:focus {
    z-index: 3;
    color: #212529;
    background-color: #e9ecef;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.2);
}

.pagination .page-link:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Página activa */
.pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    border-color: #343a40;
    box-shadow: 0 4px 12px rgba(73, 80, 87, 0.35);
    cursor: default;
    pointer-events: none;
}

/* Estado deshabilitado */
.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    pointer-events: none;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #e9ecef;
    opacity: 0.65;
    box-shadow: none;
}

/* Botones de navegación (primera, anterior, siguiente, última) */
.pagination .page-item-nav .page-link {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    font-weight: 600;
}

.pagination .page-item-nav .page-link:hover:not(:disabled) {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    border-color: #545b62;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.pagination .page-item-nav.disabled .page-link {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #adb5bd;
}

/*Texto en los botones de navegación */
.pagination .page-link-text {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Ajustar espaciado cuando hay texto + icono */
.pagination .page-item-nav .page-link {
    padding: 0.5rem 0.85rem;
    min-width: auto;
}

/* Iconos dentro de los botones */
.pagination .page-link i {
    font-size: 0.875rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Puntos suspensivos */
.pagination .page-item.disabled .page-link[aria-disabled="true"] {
    background-color: transparent;
    border-color: transparent;
    color: #6c757d;
    cursor: default;
    pointer-events: none;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pagination-wrapper {
    animation: fadeIn 0.3s ease-out;
}

/* Estilos para el control de paginación mejorado */
.pagination-wrapper {
    margin-top: 1rem;
}

.pagination-wrapper.pagination-top {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
    animation: slideDown 0.3s ease-out;
}

.pagination-wrapper.pagination-bottom {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #dee2e6;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pagination-wrapper .pagination-info {
    text-align: center;
}

.pagination-wrapper .form-select-sm {
    min-width: 70px;
}

/* Estilos para la barra de exportación y selector de registros */
.panel-body .d-flex.justify-content-between {
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    .panel-body .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .panel-body .d-flex.justify-content-between > div {
        width: 100%;
        justify-content: space-between;
    }
    
    .pagination-wrapper .pagination-info {
        text-align: left;
    }
}

/* ===== DISEÑO MINIMALISTA PARA FORMULARIOS ===== */
.modern-form-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.modern-form-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.form-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-header h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.02em;
}

.form-header p {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
}

.form-section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.modern-form-group {
    margin-bottom: 1.5rem;
}

.modern-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.required-indicator {
    color: #dc2626;
    margin-left: 0.25rem;
}

.modern-input,
.modern-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #1f2937;
    background-color: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    transition: all 0.2s ease;
    outline: none;
}

.modern-input:focus,
.modern-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modern-input:hover:not(:focus),
.modern-select:hover:not(:focus) {
    border-color: #9ca3af;
}

.modern-input::placeholder {
    color: #9ca3af;
}

.validation-message {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #dc2626;
}

.validation-summary {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.validation-summary ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #dc2626;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.btn-modern {
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.btn-modern-primary {
    background-color: #3b82f6;
    color: #ffffff;
}

.btn-modern-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-modern-secondary {
    background-color: #f3f4f6;
    color: #374151;
}

.btn-modern-secondary:hover {
    background-color: #e5e7eb;
}

.btn-modern:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid mejorado para formularios */
.modern-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.compact-form-container {
    max-width: 1400px;
    margin: 1rem auto;
    padding: 0 1rem;
}

.compact-form-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

.compact-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.compact-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
}

.compact-header p {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.compact-section {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
}

.compact-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.compact-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.compact-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.compact-form-group {
    display: flex;
    flex-direction: column;
}

.compact-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.required-mark {
    color: #dc2626;
    margin-left: 0.15rem;
}

.compact-input,
.compact-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.15s ease;
    outline: none;
}

.compact-input:focus,
.compact-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.compact-input:hover:not(:focus),
.compact-select:hover:not(:focus) {
    border-color: #9ca3af;
}

.compact-input::placeholder {
    color: #9ca3af;
    font-size: 0.825rem;
}

.compact-validation {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 0.25rem;
}

.compact-validation-summary {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.compact-validation-summary ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: #dc2626;
}

.compact-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn-compact {
    padding: 0.55rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.btn-compact i {
    font-size: 1rem;
}

.btn-compact-primary {
    background-color: #3b82f6;
    color: #ffffff;
}

.btn-compact-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    color: #ffffff;
}

.btn-compact-secondary {
    background-color: #e5e7eb;
    color: #374151;
}

.btn-compact-secondary:hover {
    background-color: #d1d5db;
}

.btn-compact-success {
    background-color: #10b981;
    color: #ffffff;
}

.btn-compact-success:hover {
    background-color: #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-compact-danger {
    background-color: #ef4444;
    color: #ffffff;
}

.btn-compact-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== TOOLBAR COMPACTA ===== */
.toolbar-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ===== FILTROS COMPACTOS ===== */
.filter-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.filter-compact-header h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-compact-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-section {
    background: #ffffff;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f3f4f6;
}

.filter-actions-compact {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.btn-icon {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    transition: color 0.15s;
}

.btn-icon:hover {
    color: #1f2937;
}

/* ===== CONTROLES DE TABLA ===== */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.table-info {
    display: flex;
    align-items: center;
}

.records-badge {
    background-color: #3b82f6;
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.table-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-pagesize label {
    font-size: 0.85rem;
    color: #374151;
    margin: 0;
}

/* ===== PAGINACIÓN COMPACTA ===== */
.pagination-wrapper-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pagination-info-compact {
    font-size: 0.85rem;
    color: #6b7280;
}

.pagination-sm .page-link {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.page-link-text {
    display: inline;
}

/* Responsive para toolbar */
@media (max-width: 1200px) {
    .compact-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .compact-form-card {
        padding: 1rem;
    }

    .compact-grid,
    .compact-grid-3,
    .compact-grid-4 {
        grid-template-columns: 1fr;
    }

    .compact-actions {
        flex-direction: column-reverse;
    }

    .btn-compact {
        width: 100%;
    }

    .toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        justify-content: center;
    }

    .filter-actions-compact {
        flex-direction: column;
    }

    .table-controls {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .pagination-wrapper-compact {
        flex-direction: column;
        align-items: center;
    }

    .page-link-text {
        display: none;
    }
}

.module-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: #6c757d;
    border-radius: 0.375rem;
    margin: 0.15rem;
    white-space: nowrap;
}

.modules-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 300px;
    max-height: 60px;
    overflow: hidden;
    position: relative;
    align-items: flex-start;
}

.modules-container-scrollable {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 300px;
    max-height: 60px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    align-items: flex-start;
}

    .modules-container-scrollable::-webkit-scrollbar {
        width: 6px;
    }

    .modules-container-scrollable::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .modules-container-scrollable::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        .modules-container-scrollable::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.module-count-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background-color: #495057;
    border-radius: 0.375rem;
    margin: 0.15rem;
    cursor: help;
}

.no-modules-text {
    color: #6c757d;
    font-style: italic;
    font-size: 0.875rem;
}

.admin-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-type-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25em 0.5em;
    font-size: 0.813rem;
    font-weight: 600;
    color: #dc3545;
    background-color: transparent;
    border: 1.5px solid #dc3545;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.user-type-usuario {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25em 0.5em;
    font-size: 0.813rem;
    font-weight: 600;
    color: #0d6efd;
    background-color: transparent;
    border: 1.5px solid #0d6efd;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

    .user-type-admin i,
    .user-type-usuario i {
        font-size: 0.9em;
    }

/*
    ESTILOS PARA MODULO DE AUDITORIA
*/

/* Estilos para la tabla expandida de detalles */
.detalle-expandido {
    background-color: #f8f9fa;
    padding: 0px 15px;
    max-width: 100%;
    max-height: 500px;
    overflow-x: auto;
}

    .detalle-expandido .table-responsive {
        margin: 0;
        max-width: 100%;
        overflow-x: auto;
    }

    .detalle-expandido table {
        margin-bottom: 0;
        table-layout: fixed;
        width: 100%;
        background-color: white;
    }

    .detalle-expandido thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #e9ecef;
    }

    /* Mejoras para celdas de la tabla de detalles */
    .detalle-expandido td {
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 12px;
    }

    .detalle-expandido .badge {
        min-width: 70px;
        display: inline-block;
        white-space: nowrap;
    }

    /* Estilo específico para la celda de observaciones */
    .detalle-expandido td.col-observaciones {
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        cursor: help;
    }

        /* Tooltip mejorado para ver texto completo en hover */
        .detalle-expandido td.col-observaciones:hover {
            background-color: #fffbcc;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: all 0.2s ease;
        }

    /* Ancho fijo para columnas específicas */
    .detalle-expandido th.col-fecha,
    .detalle-expandido td.col-fecha {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .detalle-expandido th.col-operacion,
    .detalle-expandido td.col-operacion {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        text-align: center;
    }

    .detalle-expandido th.col-usuario,
    .detalle-expandido td.col-usuario {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    .detalle-expandido th.col-ip,
    .detalle-expandido td.col-ip {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    .detalle-expandido th.col-observaciones {
        width: auto;
        min-width: 200px;
    }

    .detalle-expandido td.col-observaciones {
        width: auto;
        min-width: 200px;
    }

    .detalle-expandido th.col-detalles,
    .detalle-expandido td.col-detalles {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

/* Asegurar que el wrapper no cause overflow */
#tblAuditoria tbody tr.shown + tr td {
    padding: 0 !important;
}

/* Scroll horizontal suave */
.detalle-expandido::-webkit-scrollbar,
.detalle-expandido .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.detalle-expandido::-webkit-scrollbar-track,
.detalle-expandido .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.detalle-expandido::-webkit-scrollbar-thumb,
.detalle-expandido .table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .detalle-expandido::-webkit-scrollbar-thumb:hover,
    .detalle-expandido .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Hint visual para indicar que hay más texto */
.detalle-expandido td.col-observaciones small {
    display: block;
}

.detalle-expandido td.col-observaciones:after {
    content: " 💬";
    opacity: 0.5;
    font-size: 0.7em;
    margin-left: 4px;
}

.detalle-expandido .mb-3 {
    position: sticky;
    top: 0;
    z-index: 11;
    background-color: #f8f9fa;
    margin: -15px -15px 15px -15px;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
}

/* Centralizado: título discreto en la barra superior y barra inferior de estado */
.titulo-centralizado {
    margin-right: auto;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4a5866;
}

.bc {
    /* Parte del layout, como la topbar: ocupa el ancho del contenido (no del sidebar) y queda pegada abajo al hacer scroll. */
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.1rem;
    min-height: 2.4rem;
    padding: .35rem 1rem;
    background: #1e2832;
    color: #e6ecf2;
    font-size: .8rem;
    text-decoration: none;
    border-top: 1px solid #2d3946;
}

.bc:hover { color: #e6ecf2; text-decoration: none; }
a.bc--central:hover { background: #243140; }

.bc__titulo { font-weight: 700; letter-spacing: .12em; font-size: .7rem; color: #8794a1; }
.bc__item { display: inline-flex; align-items: center; gap: .4rem; }
.bc__item--aviso { color: #f0b64f; }
.bc__chip { padding: 0 .55rem; border: 1px solid #2d3946; border-radius: 99px; color: #b0bcc8; }
.bc__detalle { color: #b0bcc8; }

.bc__punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #8794a1; }
/* Roll vertical: al cambiar un valor, Blazor crea el elemento nuevo (por @key); entra desde abajo y destella un momento para que se note. */
.bc__roll { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.5; }
.bc__valor { display: inline-block; animation: bc-roll 1s cubic-bezier(.22, .9, .3, 1), bc-destello 2s ease-out; }
@keyframes bc-roll {
    0% { transform: translateY(120%); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes bc-destello {
    0% { color: #ffd166; }
}
.bc__punto { transition: background-color .6s ease; }
@media (prefers-reduced-motion: reduce) { .bc__valor { animation: none; } .bc__punto { transition: none; } }
.bc__punto--ok { background: #4fd18b; }
.bc__punto--off { background: #8794a1; }
.bc__punto--aviso { background: #f0b64f; }
.bc__punto--error { background: #ef6b6b; }

.bc__boton {
    margin-left: auto;
    padding: .15rem .8rem;
    font-size: .78rem;
    color: #e6ecf2;
    background: transparent;
    border: 1px solid #5a6b7c;
    border-radius: .3rem;
    cursor: pointer;
}
.bc__boton:hover { background: #2d3946; }

/* ============================================================
   Centralizado › Locales
   Minimalista: resumen arriba, lista de tarjetas con lo esencial
   y el resto (IP, versión, sincronización por scope) en el detalle.
   ============================================================ */
.loc { max-width: 1240px; }
.loc-head { margin-bottom: 1rem; }
.loc-head h2 { margin: 0 0 .15rem; }
.loc-head p { margin: 0; color: var(--ink-muted); }

.loc-dot { flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ink-faint); display: inline-block; }
.loc-dot--on { background: #22a06b; animation: loc-pulso 2.4s ease-out infinite; }
.loc-dot--aviso { background: #d99a1b; }
.loc-dot--off { background: #cbd0d6; }
@keyframes loc-pulso {
    0% { box-shadow: 0 0 0 0 rgba(34, 160, 107, .45); }
    70%, 100% { box-shadow: 0 0 0 .45rem rgba(34, 160, 107, 0); }
}

/* Resumen */
.loc-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.loc-stat { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); text-align: left; }
.loc-stat__num { font-size: 1.35rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.loc-stat__lbl { color: var(--ink-muted); }
.loc-stat--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.loc-stat--link:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(79, 70, 229, .12); }
.loc-stat--aviso { background: #fffbeb; border-color: #f3d98b; }

/* Pestañas */
.loc-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); }
.loc-tab { margin-bottom: -1px; padding: .6rem .9rem; background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-weight: 500; color: var(--ink-muted); cursor: pointer; }
.loc-tab:hover { color: var(--ink); }
.loc-tab--activa { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.loc-tab__n { display: inline-block; min-width: 1.4rem; margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; background: var(--line-soft); color: var(--ink-soft); font-size: .75rem; font-weight: 600; text-align: center; }
.loc-tab__n--aviso { background: #fde68a; color: #92400e; }

/* Barra de herramientas */
.loc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 .5rem; }
.loc-input { height: 2.2rem; padding: 0 .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); }
.loc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.loc-input--busqueda { flex: 1 1 18rem; min-width: 12rem; }
.loc-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.loc-seg__op { padding: 0 .85rem; height: 2.1rem; background: none; border: 0; border-right: 1px solid var(--line); font: inherit; color: var(--ink-soft); cursor: pointer; }
.loc-seg__op:last-child { border-right: 0; }
.loc-seg__op:hover { background: var(--canvas); }
.loc-seg__op--activa { background: var(--accent-bg); color: var(--accent-text); font-weight: 600; }
.loc-count { margin: 0 0 .5rem; font-size: .8rem; color: var(--ink-muted); }

/* Lista */
.loc-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.loc-toolbar + .loc-count + .loc-list, .loc-count + .loc-list { margin-top: 0; }
.loc-row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: box-shadow .15s, border-color .15s; }
.loc-row:hover { border-color: #d3d8df; box-shadow: 0 1px 6px rgba(20, 22, 26, .06); }
.loc-row--pendiente { border-color: #f3d98b; }
.loc-row--cerrado { background: #fbfbfc; }
.loc-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; }
.loc-row__id { flex: 1 1 14rem; min-width: 0; }
.loc-row__nombre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.loc-row__estado { flex: 0 0 9.5rem; min-width: 0; }
.loc-row__sync { flex: 0 0 8.5rem; min-width: 0; }
.loc-row__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; margin-left: auto; }
.loc-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--ink-muted); }
/* Badge de conexión: punto lleno con pulso (en línea) o anillo vacío (sin conexión), además del color y del texto. */
.loc-estado { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .7rem .15rem .55rem; border: 1px solid; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4; white-space: nowrap; animation: loc-estado-in .35s ease-out; }
.loc-estado__punto { flex: none; width: .55rem; height: .55rem; border-radius: 50%; box-sizing: border-box; }
.loc-estado--on { background: #e8f7ef; border-color: #bfe6d0; color: #166a45; }
.loc-estado--on .loc-estado__punto { background: #22a06b; animation: loc-pulso 2.4s ease-out infinite; }
.loc-estado--off { background: #f4f5f7; border-color: #e1e4e8; color: var(--ink-soft); }
.loc-estado--off .loc-estado__punto { border: 2px solid #9aa3af; background: transparent; }
@keyframes loc-estado-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.loc-motivo { max-width: 14rem; font-style: italic; }
.loc-mono { font-family: var(--font-mono); font-size: .8rem; }

/* Etiquetas */
.loc-pill { display: inline-block; min-width: 5.2rem; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; text-align: center; text-transform: capitalize; }
.loc-pill--prod { background: #fee2e2; color: #b91c1c; }
.loc-pill--prueba { background: #e0f2fe; color: #0369a1; }
.loc-pill--cerrado { background: #f3f4f6; color: var(--ink-soft); min-width: 0; }
.loc-sync { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.loc-sync--ok { background: #dcfce7; color: #166534; }
.loc-sync--atrasada { background: #fef3c7; color: #92400e; }
.loc-sync--error { background: #fee2e2; color: #b91c1c; }
.loc-sync--nunca { color: var(--ink-faint); padding-left: 0; font-weight: 500; }

/* Botones */
.loc-btn { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.loc-btn:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
.loc-btn:focus-visible, .loc-tab:focus-visible, .loc-seg__op:focus-visible, .loc-stat--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loc-btn:disabled { opacity: .5; cursor: not-allowed; }
.loc-btn--primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.loc-btn--primario:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.loc-btn--peligro { color: #b91c1c; border-color: #fecaca; }
.loc-btn--peligro:hover:not(:disabled) { background: #fef2f2; color: #991b1b; }
.loc-btn--peligro-solido { background: #dc2626; border-color: #dc2626; color: #fff; }
.loc-btn--peligro-solido:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.loc-btn--ghost { border-color: transparent; background: transparent; }
.loc-btn--texto-peligro { border-color: transparent; background: transparent; color: #b91c1c; font-size: .8rem; padding: 0 .5rem; }
.loc-btn--texto-peligro:hover:not(:disabled) { background: #fef2f2; color: #991b1b; }
.loc-chevron { width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease; }
.loc-chevron--abierto { transform: rotate(-135deg) translate(-1px, -1px); }

/* Detalle desplegable */
.loc-detail { padding: 1rem 1.1rem 1.1rem; background: #fafbfc; border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; animation: loc-entrada .2s ease-out; }
@keyframes loc-entrada { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.loc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem 1.5rem; margin: 0; }
.loc-kv dt { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.loc-kv dd { margin: .1rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.loc-detail__titulo { margin: 1.1rem 0 .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.loc-sync-tabla { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow-x: auto; }
.loc-sync-tabla__fila { display: grid; grid-template-columns: minmax(7rem, 1.2fr) minmax(5.5rem, 1fr) minmax(7rem, 1.2fr) minmax(4rem, .7fr) minmax(4rem, .7fr) minmax(4.5rem, .8fr); gap: .5rem; align-items: center; padding: .45rem .75rem; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.loc-sync-tabla__fila:last-child { border-bottom: 0; }
.loc-sync-tabla__fila--cab { background: var(--canvas); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.loc-sync-tabla__msg { grid-column: 1 / -1; color: #b91c1c; font-size: .8rem; overflow-wrap: anywhere; }
.loc-detail__pie { display: flex; justify-content: flex-end; margin-top: .75rem; }

/* Confirmación en la propia tarjeta */
.loc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; background: #fff7ed; border-top: 1px solid #fed7aa; border-radius: 0 0 12px 12px; animation: loc-entrada .2s ease-out; }
.loc-confirm__txt { flex: 1 1 18rem; margin: 0; color: var(--ink-soft); }
.loc-confirm__motivo { flex: 0 1 16rem; }
.loc-confirm__botones { display: flex; gap: .35rem; }

/* Vacío */
.loc-empty { margin-top: 1rem; padding: 2.5rem 1rem; background: var(--surface); border: 1px dashed #d3d8df; border-radius: 12px; text-align: center; }
.loc-empty strong { display: block; margin-bottom: .25rem; }
.loc-empty p { max-width: 46ch; margin: 0 auto .75rem; color: var(--ink-muted); }

@media (min-width: 901px) {
    .loc-row__acciones { min-width: 22rem; }
}
@media (max-width: 900px) {
    .loc-row__estado, .loc-row__sync { flex: 1 1 8rem; }
    .loc-row__acciones { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .loc-dot--on, .loc-detail, .loc-confirm, .loc-estado, .loc-estado--on .loc-estado__punto { animation: none; }
    .loc-chevron, .loc-btn, .loc-row { transition: none; }
}

/* ============================================================
   Local activo: selector de la barra superior (estado de la sesión)
   El borde inferior de la barra repite el ambiente del local sobre el que se está actuando.
   ============================================================ */
.main .top-row.la-barra--prod { box-shadow: inset 0 -3px 0 #ef4444; }
.main .top-row.la-barra--prueba { box-shadow: inset 0 -3px 0 #38bdf8; }

.la { position: relative; margin-right: auto; margin-left: 1.25rem; }
.la__chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .3rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.la__chip:hover { border-color: #c4cad3; }
.la__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.la__chip--vacio { border-style: dashed; border-color: #e0b44c; background: #fffbeb; color: #92400e; font-weight: 600; }
.la__chip--prod { border-color: #fca5a5; background: #fff5f5; }
.la__chip--prueba { border-color: #7dd3fc; background: #f0f9ff; }
.la__etiqueta { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.la__nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.la__codigo { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted); }
.la__sin-conexion { padding: 0 .5rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 600; }
.la__punto { flex: none; width: .55rem; height: .55rem; border-radius: 50%; box-sizing: border-box; border: 2px solid #9aa3af; background: transparent; }
.la__punto--on { border: 0; background: #22a06b; }

.la__fondo { position: fixed; inset: 0; z-index: 1055; }
.la__panel { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 1060; width: 24rem; max-width: calc(100vw - 2rem); padding: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(20, 22, 26, .16); animation: loc-entrada .15s ease-out; }
.la__buscar { width: 100%; margin-bottom: .4rem; }
.la__lista { max-height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
.la__item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; background: none; border: 1px solid transparent; border-radius: 8px; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.la__item:hover { background: var(--canvas); }
.la__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.la__item--activo { background: var(--accent-bg); border-color: #c7d2fe; }
.la__item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la__item-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.la__item-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.la__vacio-lista { margin: 0; padding: 1rem .5rem; text-align: center; color: var(--ink-muted); }
.la__pie { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line-soft); }
.la__confirm p { margin: 0 0 .6rem; color: var(--ink-soft); }
.la__confirm-botones { display: flex; gap: .35rem; }

/* Locales: marca del local activo y acción para usarlo */
.loc-activo-tag { padding: .1rem .55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent-text); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.loc-row--activo { border-color: #c7d2fe; box-shadow: 0 0 0 1px #c7d2fe; }

@media (max-width: 900px) { .la { margin-left: .5rem; } .la__etiqueta { display: none; } }
@media (prefers-reduced-motion: reduce) { .la__panel { animation: none; } }

.titulo-centralizado:has(+ .la) { margin-right: 0; }