/* _content/SiREI_2026/Components/Layout/MainLayout.razor.rz.scp.css */
/*
   MainLayout.razor.css
   Estilos específicos del layout principal.
   Los estilos globales están en wwwroot/app.css
*/

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* ELIMINAMOS .main-layout { display: block }
        Porque eso rompe la altura fija de 100vh que definimos en app.css
        Solo dejamos la lógica visual de ocultar/mostrar el sidebar */
    .sidebar[b-jbwqdtu8at] {
        display: none;
    }

    .sidebar.show-mobile[b-jbwqdtu8at] {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 206px;
        height: 100dvh;
        background: white;
        box-shadow: 5px 0 15px rgba(0,0,0,0.3);
        overflow: hidden;
        padding-bottom: 50px;
    }
}

/* ===== MODO MANTENIMIENTO (MTTO) ===== */
.sirei-mtto-overlay[b-jbwqdtu8at] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sirei-mtto-content[b-jbwqdtu8at] {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 90%;
}

.sirei-mtto-imagen[b-jbwqdtu8at] {
    width: 11.25rem;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(-8px -2px 4px rgba(0,0,0,0.5));
}

.sirei-mtto-box[b-jbwqdtu8at] {
    text-align: center;
    max-width: 24rem;
}

/* Responsive: en móvil apilar verticalmente */
@media (max-width: 768px) {
    .sirei-mtto-content[b-jbwqdtu8at] {
        flex-direction: column;
        gap: 1rem;
    }
}

.sirei-mtto-box h2[b-jbwqdtu8at] {
    color: #1a1a2e;
    font-size: var(--texto-16pt);             /* Tamaño 16pt */
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.sirei-mtto-box p[b-jbwqdtu8at] {
    color: #555;
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    margin: 0.5rem 0;
}

.sirei-mtto-mensaje[b-jbwqdtu8at] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 1rem 0 !important;
    color: #856404 !important;
    font-weight: 500;
}

.sirei-mtto-tiempo[b-jbwqdtu8at] {
    font-size: var(--texto-10pt) !important;  /* Tamaño 10pt */
    color: #888 !important;
}

/* Link discreto para administradores */
.sirei-mtto-admin-link[b-jbwqdtu8at] {
    background: transparent;
    border: none;
    color: #888;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-top: 1.5rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.5rem;
}

.sirei-mtto-admin-link:hover[b-jbwqdtu8at] {
    color: #333;
}

/* Mini-login form */
.sirei-mtto-login-form[b-jbwqdtu8at] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.sirei-mtto-input[b-jbwqdtu8at] {
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    width: 100%;
    box-sizing: border-box;
}

.sirei-mtto-input:focus[b-jbwqdtu8at] {
    outline: none;
    border-color: #0f3460;
    box-shadow: 0 0 0 2px rgba(15, 52, 96, 0.2);
}

.sirei-mtto-error[b-jbwqdtu8at] {
    color: #dc3545 !important;
    font-size: var(--texto-10pt) !important;  /* Tamaño 10pt */
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    padding: 0.5rem;
    margin: 0 !important;
}

.sirei-mtto-login-buttons[b-jbwqdtu8at] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.sirei-mtto-btn-cancel[b-jbwqdtu8at],
.sirei-mtto-btn-login[b-jbwqdtu8at] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.375rem;
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.sirei-mtto-btn-cancel[b-jbwqdtu8at] {
    background: #e9ecef;
    color: #495057;
}

.sirei-mtto-btn-cancel:hover[b-jbwqdtu8at] {
    background: #dee2e6;
}

.sirei-mtto-btn-login[b-jbwqdtu8at] {
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: white;
}

.sirei-mtto-btn-login:hover[b-jbwqdtu8at] {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
}

/* ===== CAMBIO DE PASSWORD OBLIGATORIO (estilo Login) ===== */
.sirei-cp-overlay[b-jbwqdtu8at] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.sirei-cp-box[b-jbwqdtu8at] {
    width: 300px;
    padding: 0.625rem;
    background: transparent;
}

.sirei-cp-title[b-jbwqdtu8at] {
    font-size: var(--texto-14pt);
    font-weight: bold;
    color: #444;
    margin-bottom: 0.625rem;
    text-align: center;
}

.sirei-cp-mensaje[b-jbwqdtu8at] {
    font-size: var(--texto-9pt);
    color: #666;
    margin-bottom: 1.5625rem;
    text-align: center;
}

.sirei-cp-grupo[b-jbwqdtu8at] {
    margin-bottom: 0.9375rem;
}

.sirei-cp-grupo label[b-jbwqdtu8at] {
    font-size: var(--texto-9pt);
    color: #666;
}

.sirei-cp-input[b-jbwqdtu8at] {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 0.3125rem 0;
    font-size: var(--texto-10pt);
    background: transparent;
    outline: none;
}

.sirei-cp-input:focus[b-jbwqdtu8at] {
    border-bottom: 2px solid #808080;
    background: transparent;
}

.sirei-cp-hint[b-jbwqdtu8at] {
    font-size: var(--texto-8pt);
    color: #888;
    margin-top: 0.3125rem;
}

.sirei-cp-error[b-jbwqdtu8at] {
    color: red;
    font-size: var(--texto-8pt);
    margin-top: 0.3125rem;
    margin-bottom: 0.625rem;
}

.sirei-cp-actions[b-jbwqdtu8at] {
    display: flex;
    justify-content: space-between;
    gap: 0.625rem;
    margin-top: 1rem;
}

/* Solo colores - la base viene de .boton en app.css */
.sirei-cp-btn-salir[b-jbwqdtu8at] {
    background-color: #888;
    color: white;
}

.sirei-cp-btn-salir:hover[b-jbwqdtu8at] {
    background-color: #666;
}

.sirei-cp-btn-guardar[b-jbwqdtu8at] {
    background-color: #444;
    color: white;
}

.sirei-cp-btn-guardar:hover[b-jbwqdtu8at] {
    background-color: #000;
}

/* _content/SiREI_2026/Components/Layout/NavMenu.razor.rz.scp.css */
/*
   NavMenu.razor.css
   Menú lateral de navegación con módulos y submenús.
   Colapsa en móvil, expande en escritorio.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.nav-menu-container[b-dm7xhxcyhr] {
    background-color: white;                  /* Fondo blanco */
    display: flex;                            /* Flexbox vertical */
    flex-direction: column;                   /* Apilado de arriba a abajo */
    height: 100%;                             /* Altura completa */
}

/* ===== CABECERA CON LOGO ===== */
.nav-header[b-dm7xhxcyhr] {
    background-color: white;                  /* Fondo blanco */
    padding: 0.5rem;                          /* Espaciado interno */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
    border-bottom: 1px solid var(--color-border); /* Línea gris clara */
    height: var(--topbar-height);             /* Misma altura que TopBar */
    flex-shrink: 0;                           /* No se encoge */
}

/* Link del logo */
.logo-area[b-dm7xhxcyhr] {
    text-decoration: none;                    /* Sin subrayado */
}

/* Logo en modo colapsado */
.logo-colapsado[b-dm7xhxcyhr] {
    width: 30px;                              /* Ancho fijo pequeño */
}

/* Logo en modo expandido */
.logo-expandido[b-dm7xhxcyhr] {
    max-height: 40px;                         /* Altura máxima */
    width: auto;                              /* Ancho proporcional */
}

/* ===== CONTENEDOR DE ITEMS (con scroll) ===== */
.nav-items-container[b-dm7xhxcyhr] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    flex-grow: 1;                             /* Ocupa espacio disponible */
    overflow-y: auto;                         /* Scroll vertical si necesario */
    overflow-x: hidden;                       /* Sin scroll horizontal */
}

/* ===== WRAPPER DE CADA MÓDULO ===== */
.nav-item-wrapper[b-dm7xhxcyhr] {
    margin-bottom: 0.25rem;                   /* Separación entre módulos */
}

/* ===== FILA DE MÓDULO PRINCIPAL ===== */
.nav-item-row[b-dm7xhxcyhr] {
    cursor: pointer;                          /* Cursor de mano */
    border-radius: 6px;                       /* Esquinas redondeadas */
    margin-left: 0.3125rem;                   /* Margen izquierdo (5px) */
    margin-right: 0.3125rem;                  /* Margen derecho (5px) */
    transition: all 0.2s ease;                /* Animación suave */
    border-left: 8px solid var(--modulo-color); /* Barra de color del módulo */
    background-color: transparent;            /* Sin fondo por defecto */
    padding: 0.5rem;                          /* Espaciado interno */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
}

/* Módulo activo/seleccionado */
.nav-item-row.active-item[b-dm7xhxcyhr] {
    background-color: color-mix(in srgb, var(--modulo-color), white 80%); /* Fondo tenue del color */
}

/* Contenedor del icono (modo colapsado) */
.nav-icon-container[b-dm7xhxcyhr] {
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* Centrado horizontal */
    width: 100%;                              /* Ancho completo */
}

/* Icono del módulo (modo colapsado) */
.nav-icon-mini[b-dm7xhxcyhr] {
    width: 28px;                              /* Ancho fijo */
    height: 28px;                             /* Alto fijo */
    object-fit: contain;                      /* Mantiene proporción */
}

/* Contenedor del texto (modo expandido) */
.nav-label-container[b-dm7xhxcyhr] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    width: 100%;                              /* Ancho completo */
}

/* Texto del nombre del módulo */
.nav-link-text[b-dm7xhxcyhr] {
    color: black;                             /* Negro */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

/* ===== SUBMENÚ (dentro de los módulos) ===== */
.submenu[b-dm7xhxcyhr] {
    margin-left: 0.125rem;                    /* Pequeña sangría (2px) */
    padding: 0.125rem 0;                      /* Espaciado vertical (2px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
}

/* Link de cada subitem */
.submenu-link[b-dm7xhxcyhr] {
    text-decoration: none;                    /* Sin subrayado */
    color: #666;                              /* Gris medio */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    padding: 0.25rem 0;                       /* Espaciado vertical (4px) */
}

.submenu-link:hover[b-dm7xhxcyhr] {
    color: var(--color-home);                 /* Verde al pasar mouse */
}

/* Bullet cuadrado (■) antes de cada subitem */
.bullet[b-dm7xhxcyhr] {
    margin-right: 0.25rem;                    /* Separación del texto (4px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* Texto del subitem */
.sub-label[b-dm7xhxcyhr] {
    /* font-weight se controla dinámicamente desde el HTML */
}

/* ===== FOOTER DEL MENÚ ===== */
.nav-footer-sirei[b-dm7xhxcyhr] {
    padding: 0.5rem;                          /* Espaciado interno */
    border-top: 1px solid var(--color-border); /* Línea gris clara */
    margin-top: auto;                         /* Empuja al fondo */
    flex-shrink: 0;                           /* No se encoge */
}

/* Links del footer (Preguntas, Legal, Contacto) */
.footer-links[b-dm7xhxcyhr] {
    padding-right: 0.625rem;                  /* Separación derecha (10px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: flex-end;                    /* Alineado a la derecha */
}

/* Estilo de links dentro del footer */
.footer-links[b-dm7xhxcyhr]  a {
    color: #666;                              /* Gris medio */
    text-decoration: none;                    /* Sin subrayado */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    transition: color 0.2s;                   /* Animación suave */
    display: block;                           /* Elemento de bloque */
    text-align: right;                        /* Alineado derecha */
}

.footer-links[b-dm7xhxcyhr]  a:hover {
    color: var(--color-home);                 /* Verde al pasar mouse */
    text-decoration: none;                    /* Sin subrayado */
}

/* ===== BOTÓN EXPANDIR/COLAPSAR ===== */
.nav-collapse-container[b-dm7xhxcyhr] {
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado a la derecha */
    width: 100%;                              /* Ancho completo */
    margin-top: 0.5rem;                       /* Separación superior */
}

.btn-expandir[b-dm7xhxcyhr] {
    transition: transform 0.2s;               /* Animación de escala */
    border: 0;                                /* Sin borde */
    background-color: transparent;            /* Sin fondo */
    padding: 0;                               /* Sin padding */
    cursor: pointer;                          /* Cursor de mano */
}

.btn-expandir:hover[b-dm7xhxcyhr] {
    transform: scale(1.1);                    /* Agranda 10% al hover */
}

/* Icono de la flecha */
.btn-expandir-icon[b-dm7xhxcyhr] {
    width: 25px;                              /* Ancho fijo */
    opacity: 0.6;                             /* Semitransparente */
}
/* _content/SiREI_2026/Components/Layout/TopBar.razor.rz.scp.css */
/*
   TopBar.razor.css
   Barra superior con identidad visual por módulo.
   Incluye: toggler para menú móvil, selector de idioma, botón login/logout.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.topbar-main[b-phjqaj6068] {
    grid-row: 1;                              /* Primera fila del grid */
    display: flex;                            /* Flexbox horizontal */
    align-items: center;                      /* Centrado vertical */
    justify-content: space-between;           /* Título izq, acciones der */
    height: var(--topbar-height);             /* Altura fija de barra */
    transition: background-color 0.3s ease;   /* Animación cambio de módulo */
    font-weight: bold;                        /* Texto en negritas */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
}

/* Título del módulo */
.topbar-title[b-phjqaj6068] {
    padding-left: 1.25rem;                    /* Separación del borde izq */
    text-transform: uppercase;                /* Todo mayúsculas */
}

/* Nombre del usuario logueado */
.topbar-user-name[b-phjqaj6068] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: inherit;                           /* Hereda color del tema */
    letter-spacing: 0.5px;                    /* Espaciado entre letras */
}

/* Contenedor de acciones (lado derecho) */
.topbar-actions[b-phjqaj6068] {
    display: flex;                            /* Flexbox horizontal */
    align-items: center;                      /* Centrado vertical */
    gap: 1rem;                                /* Espacio entre elementos */
    padding-right: 1.5rem;                    /* Separación del borde der */
}

/* ===== BOTÓN MENÚ MÓVIL (hamburguesa) ===== */
.sirei-menu-toggler[b-phjqaj6068] {
    padding: 0.25rem 0.75rem;                 /* Espaciado interno */
    font-size: 1.25rem;                       /* Icono hamburguesa, no es texto - no usar variable */
    line-height: 1;                           /* Altura de línea ajustada */
    background-color: transparent;            /* Sin fondo */
    border: 1px solid rgba(255,255,255,0.5);  /* Borde blanco semitransparente */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    transition: box-shadow 0.15s ease-in-out; /* Animación de focus */
    margin-left: 0.625rem;                    /* Separación del borde */
    display: block;                           /* Visible por defecto */
    cursor: pointer;                          /* Cursor de mano */
}

.sirei-menu-toggler:hover[b-phjqaj6068] {
    text-decoration: none;                    /* Sin subrayado */
}

.sirei-menu-toggler:focus[b-phjqaj6068] {
    text-decoration: none;                    /* Sin subrayado */
    outline: 0;                               /* Sin outline del navegador */
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.25); /* Glow blanco suave */
}

/* Icono hamburguesa (3 líneas) */
.sirei-menu-toggler-icon[b-phjqaj6068] {
    display: inline-block;                    /* Elemento en línea */
    width: 1.5em;                             /* Ancho del icono */
    height: 1.5em;                            /* Alto del icono */
    vertical-align: middle;                   /* Alineación vertical */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* SVG 3 líneas blancas */
    background-repeat: no-repeat;             /* Sin repetir */
    background-position: center;              /* Centrado */
    background-size: 100%;                    /* Tamaño completo */
}

/* En PC (642px+), ocultar hamburguesa */
@media (min-width: 642px) {
    .sirei-menu-toggler[b-phjqaj6068] {
        display: none;                        /* Oculto en escritorio */
    }
}

/* ===== SELECTOR DE IDIOMA ===== */
.sirei-selector[b-phjqaj6068] {
    display: block;                           /* Elemento de bloque */
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;  /* Espacio para flecha derecha */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: 400;                         /* Peso normal */
    line-height: 1.5;                         /* Altura de línea */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Flecha hacia abajo */
    background-repeat: no-repeat;             /* Sin repetir */
    background-position: right 0.75rem center; /* Flecha a la derecha */
    background-size: 16px 12px;               /* Tamaño de flecha */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Animación */
    -webkit-appearance: none;                 /* Quita estilo nativo Safari */
    -moz-appearance: none;                    /* Quita estilo nativo Firefox */
    appearance: none;                         /* Quita estilo nativo */
}

/* Estilo específico para el select de idioma */
.topbar-select[b-phjqaj6068] {
    width: auto;                              /* Ancho según contenido */
    background-color: rgba(255,255,255,0.2);  /* Fondo blanco semitransparente */
    color: inherit;                           /* Hereda color del tema */
    border: none;                             /* Sin borde */
}

/* Color del texto en las opciones del dropdown */
.sirei-selector option[b-phjqaj6068] {
    color: black;                             /* Negro para legibilidad */
}

/* ===== SEPARADOR VERTICAL ===== */
/* Nota: Actualmente deshabilitado (width:0), activar si se necesita */
.sirei-separador-vertical[b-phjqaj6068] {
    display: inline-block;                    /* Elemento en línea */
    align-self: stretch;                      /* Altura completa del padre */
    width: 0;                                 /* Ancho cero (deshabilitado) */
    min-height: 1em;                          /* Altura mínima */
    background-color: currentColor;           /* Color del texto actual */
    opacity: 0.5;                             /* Semitransparente */
    margin: 0;                                /* Sin márgenes */
}

/* ===== BOTÓN LOGIN/LOGOUT ===== */
.topbar-btn[b-phjqaj6068] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    padding: 0.25rem 0.75rem;                 /* Espaciado interno */
    font-weight: 500;                         /* Semi-negrita */
    background-color: transparent;            /* Sin fondo */
    color: inherit;                           /* Hereda color del tema */
    border: 1px solid currentColor;           /* Borde del color del texto */
    border-radius: 4px;                       /* Esquinas redondeadas */
    text-decoration: none;                    /* Sin subrayado (para <a>) */
    transition: all 0.2s ease-in-out;         /* Animación suave */
    cursor: pointer;                          /* Cursor de mano */
    display: inline-flex;                     /* Flex para centrar contenido */
    align-items: center;                      /* Centrado vertical */
}

/* Hover temas oscuros (Verde, Rojo, Azul, Morado) */
.tema-claro .topbar-btn:hover[b-phjqaj6068] {
    background-color: white;                  /* Fondo blanco */
    color: black;                             /* Texto negro */
    box-shadow: 0 0 12px rgba(255,255,255,0.4); /* Glow blanco */
}

/* Hover tema Requerimientos (Amarillo) */
.tema-oscuro .topbar-btn:hover[b-phjqaj6068] {
    background-color: black;                  /* Fondo negro */
    color: yellow;                            /* Texto amarillo */
    box-shadow: 0 0 12px rgba(0,0,0,0.2);     /* Sombra suave */
}

/* ===== VERSIÓN Y BUILD ===== */
.topbar-version-container[b-phjqaj6068] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: center;                      /* Centrado horizontal */
    margin-left: 1rem;                        /* Separación izquierda */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    line-height: 1.4;                         /* Altura de línea */
    opacity: 0.7;                             /* Semitransparente */
    user-select: none;                        /* No seleccionable */
}

.topbar-commit_fecha[b-phjqaj6068] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                       /* Sin Bold */
}

.topbar-commit_build[b-phjqaj6068] {
    font-size: var(--texto-8pt);              /* Tamaño 7pt */
    font-weight: normal;                       /* Sin Bold */
}
/* _content/SiREI_2026/Components/Pages/00Auth/Login.razor.rz.scp.css */
/*
   Login.razor.css
   Formulario de login minimalista.
   Diseño con inputs de línea inferior estilo Material Design.
*/

/* ===== FRANJA DE COLOR ===== */
/* Indica visualmente de qué módulo viene el usuario */
.franja-procedencia[b-1mkaxdmkp6] {
    width: 100%;                              /* Ancho completo */
    height: 7px;                              /* Altura fija de la franja */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Posición fija desde arriba para consistencia con Recovery */
.login-container[b-1mkaxdmkp6] {
    padding-top: 15vh;                        /* Posición fija desde arriba */
    padding-right: var(--padding-page-right); /* Padding derecho estándar */
    padding-bottom: var(--padding-page-bottom); /* Padding inferior estándar */
    margin-left: var(--margin-page-left);     /* Margen izquierdo estándar */
    width: calc(100% - var(--margin-page-left)); /* Ancho menos margen */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: center;                      /* Centrado horizontal */
    justify-content: flex-start;              /* Empieza arriba, crece hacia abajo */
}

/* ===== CAJA DEL FORMULARIO ===== */
.login-box[b-1mkaxdmkp6] {
    width: 300px;                             /* Ancho fijo del formulario */
    padding: 0.625rem;                        /* Espaciado interno (10px) */
    background: transparent;                  /* Sin fondo */
}

/* ===== TÍTULO ===== */
.login-title[b-1mkaxdmkp6] {
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
    font-weight: bold;                        /* Negritas */
    color: #444;                              /* Gris oscuro */
    margin-bottom: 1.5625rem;                 /* Separación inferior (25px) */
    text-align: center;                       /* Centrado */
}

/* ===== GRUPO DE CAMPO ===== */
.form-group[b-1mkaxdmkp6] {
    margin-bottom: 0.9375rem;                 /* Separación entre campos (15px) */
}

.form-group label[b-1mkaxdmkp6] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #666;                              /* Gris medio */
}

/* ===== INPUT CON LÍNEA INFERIOR ===== */
/* Estilo Material Design: solo borde inferior */
.login-input[b-1mkaxdmkp6] {
    width: 100%;                              /* Ancho completo */
    border: none;                             /* Sin bordes */
    border-bottom: 1px solid #ccc;            /* Línea gris clara */
    padding: 0.3125rem 0;                     /* Espaciado vertical (5px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    background: transparent;                  /* Sin fondo */
    outline: none;                            /* Sin outline de focus */
}

.login-input:focus[b-1mkaxdmkp6] {
    border-bottom: 2px solid #808080;         /* Línea gris más gruesa al focus */
    background: transparent;                  /* Mantiene sin fondo */
}

/* Evita que el autocompletado del navegador pinte el fondo */
.login-input:-webkit-autofill[b-1mkaxdmkp6],
.login-input:-webkit-autofill:hover[b-1mkaxdmkp6],
.login-input:-webkit-autofill:focus[b-1mkaxdmkp6] {
    -webkit-box-shadow: 0 0 0px 1000px white inset; /* Sombra blanca que cubre el fondo */
    box-shadow: 0 0 0px 1000px white inset;   /* Compatibilidad cross-browser */
    -webkit-text-fill-color: inherit;         /* Mantiene color de texto */
}

/* ===== MENSAJE DE ERROR ===== */
.error-message[b-1mkaxdmkp6] {
    color: red;                               /* Rojo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    margin-top: 0.3125rem;                    /* Separación superior (5px) */
}

/* ===== CONTENEDOR DEL BOTÓN ===== */
.login-actions[b-1mkaxdmkp6] {
    text-align: right;                        /* Alineado a la derecha */
}

/* ===== BOTÓN ENTRAR ===== */
/* Usa .boton de app.css (9pt) - aquí solo colores */
.btn-entrar[b-1mkaxdmkp6] {
    background-color: #444;                   /* Gris oscuro */
    color: white;                             /* Texto blanco */
    margin-top: 0.625rem;                     /* Separación superior (10px) */
}

.btn-entrar:hover[b-1mkaxdmkp6] {
    background-color: #000;                   /* Negro al pasar mouse */
}

/* ===== CONTENEDOR LINK RECUPERACIÓN ===== */
.login-recovery[b-1mkaxdmkp6] {
    text-align: center;                       /* Centrado */
}

/* ===== LINK DE RECUPERACIÓN ===== */
.recovery-link[b-1mkaxdmkp6] {
    display: block;                           /* Elemento de bloque */
    margin-top: 0.9375rem;                    /* Separación superior (15px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #888;                              /* Gris claro */
    text-decoration: none;                    /* Sin subrayado */
}

.recovery-link:hover[b-1mkaxdmkp6] {
    color: var(--color-home);                 /* Verde al pasar mouse */
}
/* _content/SiREI_2026/Components/Pages/00Auth/Recovery.razor.rz.scp.css */
/*
   Recovery.razor.css
   Estilos idénticos a Login.razor.css para consistencia visual.
   Solo agrega estilos para mensaje de éxito y nota de spam.
*/

/* ===== FRANJA DE COLOR ===== */
.franja-procedencia[b-abciz3xfzg] {
    width: 100%;
    height: 7px;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Posición fija desde arriba, crece hacia abajo */
.login-container[b-abciz3xfzg] {
    padding-top: 15vh;                            /* Mismo punto de inicio que login */
    padding-right: var(--padding-page-right);
    padding-bottom: var(--padding-page-bottom);
    margin-left: var(--margin-page-left);
    width: calc(100% - var(--margin-page-left));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;                  /* Empieza arriba, crece hacia abajo */
}

/* ===== CAJA DEL FORMULARIO ===== */
.login-box[b-abciz3xfzg] {
    width: 300px;
    padding: 0.625rem;
    background: transparent;
}

/* ===== TÍTULO ===== */
.login-title[b-abciz3xfzg] {
    font-size: var(--texto-14pt);
    font-weight: bold;
    color: #444;
    margin-bottom: 1.5625rem;
    text-align: center;
}

/* ===== GRUPO DE CAMPO ===== */
.form-group[b-abciz3xfzg] {
    margin-bottom: 0.9375rem;
}

.form-group label[b-abciz3xfzg] {
    font-size: var(--texto-9pt);
    color: #666;
}

/* ===== INPUT CON LÍNEA INFERIOR ===== */
.login-input[b-abciz3xfzg] {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 0.3125rem 0;
    font-size: var(--texto-10pt);
    background: transparent;
    outline: none;
}

.login-input:focus[b-abciz3xfzg] {
    border-bottom: 2px solid #808080;
    background: transparent;
}

.login-input:-webkit-autofill[b-abciz3xfzg],
.login-input:-webkit-autofill:hover[b-abciz3xfzg],
.login-input:-webkit-autofill:focus[b-abciz3xfzg] {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: inherit;
}

/* ===== MENSAJE DE ERROR ===== */
.error-message[b-abciz3xfzg] {
    color: red;
    font-size: var(--texto-8pt);
    margin-top: 0.3125rem;
}

/* ===== CONTENEDOR DEL BOTÓN ===== */
.login-actions[b-abciz3xfzg] {
    text-align: right;
}

/* ===== BOTÓN ENVIAR ===== */
.btn-entrar[b-abciz3xfzg] {
    background-color: #444;
    color: white;
    margin-top: 0.625rem;
    text-decoration: none;
    display: inline-block;
}

.btn-entrar:hover[b-abciz3xfzg] {
    background-color: #000;
    color: white;
}

/* ===== CONTENEDOR LINK REGRESAR ===== */
.login-recovery[b-abciz3xfzg] {
    text-align: center;
}

/* ===== LINK DE REGRESAR ===== */
.recovery-link[b-abciz3xfzg] {
    display: block;
    margin-top: 0.9375rem;
    font-size: var(--texto-8pt);
    color: #888;
    text-decoration: none;
}

.recovery-link:hover[b-abciz3xfzg] {
    color: var(--color-home);
}

/* ===== MENSAJE DE ÉXITO ===== */
.success-message[b-abciz3xfzg] {
    text-align: center;
}

.success-message label[b-abciz3xfzg] {
    font-size: var(--texto-14pt);
    font-weight: bold;
    color: var(--color-cco);
    display: block;
    margin-bottom: 0.5rem;
}

.success-message p[b-abciz3xfzg] {
    font-size: var(--texto-10pt);
    color: #444;
    margin: 0;
    margin-bottom: 0.5rem;
}

/* ===== NOTA SPAM ===== */
.nota-spam[b-abciz3xfzg] {
    background-color: #ffffff;
    padding: 0.625rem;
    border-radius: 4px;
    text-align: center;
}

.nota-spam label[b-abciz3xfzg] {
    color: #cc0000;
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}

.nota-spam span[b-abciz3xfzg] {
    font-size: var(--texto-8pt);
    color: #666;
}

/* ===== SPINNER ===== */
.btn-spinner[b-abciz3xfzg] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-abciz3xfzg 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes spin-b-abciz3xfzg {
    to { transform: rotate(360deg); }
}
/* _content/SiREI_2026/Components/Pages/01Pan/PanelEnc.razor.rz.scp.css */
/*
   PanelEnc.razor.css
   Panel de Encuestas con widgets de satisfacción y gráficas.
   4 widgets con componente SiREIgauge y tabs de navegación.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Pega la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-7kj3wpfrzc] {
    padding-top: 0;                           /* Sin padding superior */
    padding-bottom: 0;                        /* Sin padding inferior para evitar scroll */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-7kj3wpfrzc] {
    background-color: #ffefd5;                /* Durazno - color del módulo Panel */
}

.letra-8pt[b-7kj3wpfrzc] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MENSAJE DE CARGA ===== */
.loading-message[b-7kj3wpfrzc] {
    text-align: center;                       /* Centrado */
    padding: 1.25rem;                         /* Espaciado interno (20px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== CONTENEDOR DE WIDGETS (FLEXBOX) ===== */
.widgets-container[b-7kj3wpfrzc] {
    display: flex;                            /* Flexbox horizontal */
    flex-wrap: nowrap;                        /* Sin wrap en PC */
    gap: 0.5rem;                              /* Espacio entre widgets */
    background-color: transparent;            /* Sin fondo */
    width: 100%;                              /* Ancho completo responsive */
    margin-top: 1rem;                         /* Separación superior */
}

/* ===== WIDGET INDIVIDUAL ===== */
.widget[b-7kj3wpfrzc] {
    display: flex;                            /* Gauge + textos lado a lado */
    flex-direction: row;                      /* Horizontal */
    align-items: flex-start;                  /* Alineado arriba */
}

.widget-general[b-7kj3wpfrzc] {
    flex: 0 0 auto;                           /* No crece ni encoge */
}

.widget-cortesia[b-7kj3wpfrzc],
.widget-info[b-7kj3wpfrzc],
.widget-tiempo[b-7kj3wpfrzc] {
    flex: 1;                                  /* Crece para llenar espacio */
}

/* ===== COLUMNAS DE GAUGES ===== */
.widget-gauge[b-7kj3wpfrzc] {
    width: 6.25rem;                           /* Ancho fijo (100px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== COLUMNAS DE TEXTO ===== */
.widget-textos[b-7kj3wpfrzc] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    line-height: 1.8;                         /* Altura de línea */
    padding-left: 0.3125rem;                  /* Padding izquierdo (5px) */
}

/* ===== NIVELES DE SATISFACCIÓN ===== */
/* Nivel 4: Excelente/Mucho/Rápido - Morado */
.nivel-4[b-7kj3wpfrzc] {
    color: #800080;                           /* Morado */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.nivel-4 .metrica-link[b-7kj3wpfrzc] {
    color: #800080;                           /* Morado */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

/* Nivel 3: Bueno/Suficiente - Verde */
.nivel-3[b-7kj3wpfrzc] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.nivel-3 .metrica-link[b-7kj3wpfrzc] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

/* Nivel 2: Malo/Poco/Lento - Naranja */
.nivel-2[b-7kj3wpfrzc] {
    color: #FF8C00;                           /* Naranja oscuro */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.nivel-2 .metrica-link[b-7kj3wpfrzc] {
    color: #FF8C00;                           /* Naranja oscuro */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

/* Nivel 1: Pésimo/Nada/Tarde - Rojo */
.nivel-1[b-7kj3wpfrzc] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.nivel-1 .metrica-link[b-7kj3wpfrzc] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== LINKS DE MÉTRICAS ===== */
.metrica-link[b-7kj3wpfrzc] {
    cursor: pointer;                          /* Cursor de mano */
    text-decoration: none;                    /* Sin subrayado */
}

.metrica-link:hover[b-7kj3wpfrzc] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== TABS DE NAVEGACIÓN ===== */
.tabs-container[b-7kj3wpfrzc] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 100%;                              /* Ancho completo responsive */
    border-top: none;                         /* Sin borde superior */
    padding-top: 0.3125rem;                   /* Padding superior (5px) */
    border-collapse: collapse;                /* Bordes colapsados */
    table-layout: fixed;                      /* Layout fijo */
}

.tabs-row[b-7kj3wpfrzc] {
    height: 1.5625rem;                        /* Altura de fila (25px) */
    text-align: center;                       /* Centrado */
}

.tab-cell[b-7kj3wpfrzc] {
    border: none;                             /* Sin borde */
    border-top: 1px solid gray;               /* Borde superior gris */
    border-left: 1px solid gray;              /* Borde izquierdo gris */
    border-right: 1px solid gray;             /* Borde derecho gris */
}

.tab-activo[b-7kj3wpfrzc] {
    background-color: #F5F5F5;                /* Gris muy claro */
}

.tab-inactivo[b-7kj3wpfrzc] {
    background-color: #DCDCDC;                /* Gris claro (Gainsboro) */
}

.tab-width-1[b-7kj3wpfrzc],
.tab-width-2[b-7kj3wpfrzc],
.tab-width-3[b-7kj3wpfrzc],
.tab-width-4[b-7kj3wpfrzc] {
    width: 15%;                               /* Ancho de cada tab */
}

.tab-spacer[b-7kj3wpfrzc] {
    width: 2%;                                /* Espacio entre tabs */
}

.tab-link[b-7kj3wpfrzc] {
    text-decoration: none;                    /* Sin subrayado */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
    width: 100%;                              /* Ancho completo */
    height: 100%;                             /* Alto completo */
}

.tab-link-activo[b-7kj3wpfrzc] {
    color: #000000;                           /* Negro */
    font-weight: bold;                        /* Negritas */
}

.tab-link-inactivo[b-7kj3wpfrzc] {
    color: #696969;                           /* Gris oscuro (DimGray) */
    font-weight: normal;                      /* Sin negritas */
}

/* ===== GRÁFICA HISTÓRICA ===== */
.grafica-container[b-7kj3wpfrzc] {
    width: 100%;                              /* Ancho completo responsive */
    height: calc(100vh - 20.1rem);              /* Altura dinámica (pantalla - offset + aire) */
    min-height: 15rem;                        /* Mínimo 240px */
    background-color: #F5F5F5;                /* Gris muy claro */
    border: 1px solid #ddd;                   /* Borde gris claro */
    padding: 0.625rem;                        /* Espaciado interno (10px) */
}

/* ===== CLASES DE VISIBILIDAD PC/MÓVIL ===== */
.solo-movil[b-7kj3wpfrzc] {
    display: none;                            /* Oculto en PC */
}

.solo-pc[b-7kj3wpfrzc] {
    display: inline;                          /* Visible en PC */
}

/* ===== ENCABEZADO MÓVIL (título + promedio) ===== */
.encabezado-movil[b-7kj3wpfrzc] {
    font-weight: bold;
    font-size: var(--texto-9pt);
    color: #333;
    margin-bottom: 0.25rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Intercambiar visibilidad PC/Móvil */
    .solo-movil[b-7kj3wpfrzc] {
        display: inline;
    }

    .solo-pc[b-7kj3wpfrzc] {
        display: none;
    }

    /* Contenedor: wrap para 2 filas, centrado */
    .widgets-container[b-7kj3wpfrzc] {
        flex-wrap: wrap;                      /* Permite wrap */
        justify-content: center;              /* Centrar fila 2 */
    }

    /* Fila 1: en GENERAL ocupa 100% del ancho, centrado */
    .widget-general[b-7kj3wpfrzc] {
        flex: 0 0 100%;                       /* Ancho completo */
        justify-content: center;              /* Centrado horizontal */
        align-items: center;                  /* Centrado vertical */
    }

    /* Espacio entre gauge y textos en fila 1 */
    .widget-general .widget-gauge[b-7kj3wpfrzc] {
        margin-right: 1rem;                   /* 1rem de separación */
    }

    /* Fila 2: 3 columnas (Cort, Info, Tiem) */
    .widget-cortesia[b-7kj3wpfrzc],
    .widget-info[b-7kj3wpfrzc],
    .widget-tiempo[b-7kj3wpfrzc] {
        flex: 0 0 auto;                       /* No crecen, ancho natural */
    }

    /* Espacio para que respiren los widgets de fila 2 */
    .widget-info[b-7kj3wpfrzc] {
        margin: 0 2rem;                       /* 2rem a cada lado del widget central */
    }

    /* Textos más compactos en móvil */
    .widget-textos[b-7kj3wpfrzc] {
        font-size: var(--texto-8pt);
        line-height: 1.4;
        padding-left: 0;
    }

    /* Encabezado en fila 2: debe ser bloque para bajar los textos */
    .encabezado-movil.solo-movil[b-7kj3wpfrzc] {
        display: block !important;            /* Forzar bloque (no inline) */
    }

    .grafica-container[b-7kj3wpfrzc] {
        height: 18rem;                        /* 15rem + 20% */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-7kj3wpfrzc] {
    --spinner-color: var(--color-panel);
}
/* _content/SiREI_2026/Components/Pages/01Pan/PanelEva.razor.rz.scp.css */
/*
   ==========================================================================
   PanelEva.razor.css
   Panel de Evaluaciones - Dashboard con widgets de desempeño y gráficas
   ==========================================================================

   ESTRUCTURA:
   1. Contenedor principal y barra de filtros
   2. Panel de métricas (Grid → Flex móvil)
   3. Widget 1: Evaluación (Rey)
   4. Widget 2: Esfuerzo y Volumen (separados para móvil)
   5. Widget 3: Créditos y Faltas
   6. Widget 4: Inconformidades
   7. Tabs de navegación
   8. Gráfica histórica
   9. Utilidades
   10. Responsivo móvil
*/


/* ==========================================================================
   1. CONTENEDOR PRINCIPAL Y BARRA DE FILTROS
   ========================================================================== */

.contenedor-principal-sirei[b-px3dmp84yb] {
    padding-top: 0;                               /* Pega la barra de filtros arriba */
    padding-bottom: 0;                            /* Sin padding inferior para evitar scroll */
}

.barra-filtros[b-px3dmp84yb] {
    background-color: #ffefd5;                    /* Durazno - color del módulo Panel */
}


/* ==========================================================================
   2. PANEL DE MÉTRICAS (GRID → FLEX MÓVIL)
   ========================================================================== */

/*
   PC: CSS Grid con 5 columnas. Esfuerzo y Volumen comparten columna 3
   (apilados verticalmente) tal como estaban en la tabla original.
   br-movil es display:contents → sus hijos participan directo en el grid.

   Móvil: Se desactiva el grid (display:block) y los br-movil toman control
   (display:flex; width:100% desde app.css) creando 2 filas:
     Fila 1: Rey + Texto-Evaluación + Esfuerzo
     Fila 2: Volumen + Créditos/Faltas + Inconformidades (sin descripción)
*/
.panel-metricas[b-px3dmp84yb] {
    display: grid;
    grid-template-columns: 150px 9.375rem 22rem 13.125rem 10.3125rem;
    grid-template-rows: auto auto;
    justify-content: space-between;
    background-color: transparent;
    width: 100%;
    font-size: var(--texto-10pt);
    margin-top: 1rem;
}

/* Tablas internas sin bordes ni espaciado */
.tabla-widget[b-px3dmp84yb] {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Celdas de tablas internas */
.widget-icono-td[b-px3dmp84yb] {
    width: 2.8125rem;                             /* 45px */
}

.widget-texto-td[b-px3dmp84yb] {
    width: 15rem;                                 /* 240px - espacio para 3 valores */
}


/* ==========================================================================
   3. WIDGET 1: EVALUACIÓN (REY)
   ========================================================================== */

/* --- Contenedor del Rey --- */
.rey-container[b-px3dmp84yb] {
    width: 150px;
    height: 180px;
    text-align: center;
    grid-column: 1;
    grid-row: 1 / 3;
}

/* --- Columna de texto junto al Rey --- */
.widget-col-1-texto[b-px3dmp84yb] {
    width: 9.375rem;                              /* 150px */
    font-size: var(--texto-10pt);
    text-align: left;
    grid-column: 2;
    grid-row: 1 / 3;
}

/* --- Icono del Rey (imagen grande clickeable) --- */
.icono-evaluacion[b-px3dmp84yb] {
    height: 160px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* NOTA: drop-shadow deshabilitado porque pasa por encima del filter-bar al hacer scroll */
    filter: drop-shadow(-4px 4px 2px rgba(0,0,0,0.3));
    will-change: revert-layer;
}

.icono-evaluacion:hover[b-px3dmp84yb] {
    transform: scale(1.05);
    filter: drop-shadow(-7px 7px 2px rgba(0,0,0,0.25));
}

/* Estado después del click (500ms mostrando susto) */
.icono-evaluacion.icono-clicked[b-px3dmp84yb],
.icono-evaluacion.icono-clicked:hover[b-px3dmp84yb],
.icono-evaluacion.icono-clicked:active[b-px3dmp84yb] {
    height: 110px;
    margin-bottom: 20px;
}

/* --- Número grande de evaluación --- */
.evaluacion-numero[b-px3dmp84yb] {
    font-weight: bold;
    font-size: 1.75rem;                           /* 28pt aprox */
    cursor: pointer;
    text-decoration: none;
}

.evaluacion-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

.evaluacion-porcentaje[b-px3dmp84yb] {
    /* Hereda el color del contenedor padre */
}

.evaluacion-subtexto[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
    color: #a9a9a9;                               /* Gris medio */
}

/* --- Colores dinámicos de evaluación (según porcentaje) --- */
.evaluacion-color-rojo[b-px3dmp84yb] {
    color: #CC0000;                               /* < 95% */
}

.evaluacion-color-verde[b-px3dmp84yb] {
    color: #00FF00;                               /* >= 95% (Lime) */
}


/* ==========================================================================
   4. WIDGET 2: ESFUERZO Y VOLUMEN (separados para móvil)
   ========================================================================== */

/* --- Esfuerzo: columna 3 fila 1 del grid --- */
.widget-col-esfuerzo[b-px3dmp84yb] {
    font-size: var(--texto-10pt);
    grid-column: 3;
    grid-row: 1;
}

/* --- Volumen: columna 3 fila 2 del grid --- */
.widget-col-volumen[b-px3dmp84yb] {
    font-size: var(--texto-10pt);
    grid-column: 3;
    grid-row: 2;
}

/* --- Iconos pequeños clickeables --- */
.icono-pequeño[b-px3dmp84yb] {
    width: 2.8125rem;                             /* 45px */
    vertical-align: middle;
    margin-right: 0.6rem;                     /* Espacio a la derecha*/
}

.icono-clickeable[b-px3dmp84yb] {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* NOTA: drop-shadow deshabilitado porque pasa por encima del filter-bar al hacer scroll */
    filter: drop-shadow(-2px 2px 1px rgba(0,0,0,0.3));
}

.icono-clickeable:hover[b-px3dmp84yb] {
    transform: scale(1.1);
    filter: drop-shadow(-4px 4px 2px rgba(0,0,0,0.25));
}

.icono-clickeable:active[b-px3dmp84yb] {
    transform: scale(0.95);
}

/* --- Número de Esfuerzo --- */
.esfuerzo-numero[b-px3dmp84yb] {
    color: #008B8B;                               /* Cyan oscuro */
    font-weight: bold;
    font-size: var(--texto-12pt);
    cursor: pointer;
    text-decoration: none;
}

.esfuerzo-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

.esfuerzo-unidad[b-px3dmp84yb] {
    color: #008B8B;
}

/* --- Número de Volumen --- */
.volumen-numero[b-px3dmp84yb] {
    color: #6B8E23;                               /* Verde oliva */
    font-weight: bold;
    font-size: var(--texto-12pt);
    cursor: pointer;
    text-decoration: none;
}

.volumen-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

.volumen-unidad[b-px3dmp84yb] {
    color: #6B8E23;
}

/* --- Subtítulo "Global / Per Cápita" --- */
.widget-subtitulo[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
    color: #808080;                               /* Gris */
}

/* --- Separadores "/" entre valores --- */
.esfuerzo-separador[b-px3dmp84yb] {
    color: #008B8B;
    font-weight: normal;
    margin: 0 0.2rem;
}

.volumen-separador[b-px3dmp84yb] {
    color: #6B8E23;
    font-weight: normal;
    margin: 0 0.2rem;
}


/* ==========================================================================
   5. WIDGET 3: CRÉDITOS Y FALTAS
   ========================================================================== */

/* --- Columna contenedora --- */
.widget-col-3[b-px3dmp84yb] {
    width: 13.125rem;                             /* 210px */
    font-size: var(--texto-10pt);
    grid-column: 4;
    grid-row: 1 / 3;
}

/* --- Contenedor de Créditos (color verde) --- */
.creditos-contenedor[b-px3dmp84yb] {
    color: #228B22;                               /* Verde bosque */
}

.creditos-numero[b-px3dmp84yb] {
    color: #228B22;
    font-weight: bold;
    font-size: var(--texto-16pt);
    cursor: pointer;
    text-decoration: none;
}

.creditos-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

/* --- Contenedor de Faltas (color rojo) --- */
.faltas-contenedor[b-px3dmp84yb] {
    color: #CC0000;
}

.faltas-numero[b-px3dmp84yb] {
    color: #CC0000;
    font-weight: bold;
    font-size: var(--texto-16pt);
    cursor: pointer;
    text-decoration: none;
}

.faltas-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

/* --- Espaciador entre créditos y faltas --- */
.spacer-4pt[b-px3dmp84yb] {
    font-size: 0.25rem;                           /* 4pt */
}


/* ==========================================================================
   6. WIDGET 4: INCONFORMIDADES
   ========================================================================== */

/* --- Columna contenedora --- */
.widget-col-4[b-px3dmp84yb] {
    width: 10.3125rem;                            /* 165px */
    text-align: center;
    font-size: var(--texto-10pt);
    grid-column: 5;
    grid-row: 1 / 3;
}

/* --- Caja con fondo gris --- */
.inconf-box[b-px3dmp84yb] {
    background-color: #f5f5f5;
    text-align: center;
    padding: 0.3125rem;                           /* 5px */
}

/* --- Número de inconformidades --- */
.inconf-numero[b-px3dmp84yb] {
    color: #ff0000;
    font-weight: bold;
    font-size: var(--texto-14pt);
    cursor: pointer;
    text-decoration: none;
}

.inconf-numero:hover[b-px3dmp84yb] {
    text-decoration: underline;
}

/* --- Título y descripción --- */
.inconf-titulo[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
    color: #ff0000;
}

.inconf-descripcion[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
    color: #a9a9a9;                               /* Gris medio */
}


/* ==========================================================================
   7. TABS DE NAVEGACIÓN
   ========================================================================== */

.tabs-container[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
    width: 100%;
    border-top: none;
    padding-top: 0.3125rem;                       /* 5px */
    border-collapse: collapse;
    table-layout: fixed;
}

.tabs-row[b-px3dmp84yb] {
    height: 1.1875rem;                            /* 19px */
    text-align: center;
}

/* --- Celda de cada tab --- */
.tab-cell[b-px3dmp84yb] {
    border: none;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

.tab-activo[b-px3dmp84yb] {
    background-color: #F5F5F5;
}

.tab-inactivo[b-px3dmp84yb] {
    background-color: #DCDCDC;                    /* Gainsboro */
}

/* --- Anchos de tabs --- */
.tab-width-1[b-px3dmp84yb],
.tab-width-2[b-px3dmp84yb],
.tab-width-3[b-px3dmp84yb],
.tab-width-4[b-px3dmp84yb] {
    width: 18%;
}

.tab-width-5[b-px3dmp84yb] {
    width: 18%;
    overflow-wrap: break-word;
    word-break: break-all;
}

.tab-spacer[b-px3dmp84yb] {
    width: 2%;
}

/* --- Links dentro de tabs --- */
.tab-link[b-px3dmp84yb] {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tab-link-activo[b-px3dmp84yb] {
    color: #000000;
    font-weight: bold;
}

.tab-link-inactivo[b-px3dmp84yb] {
    color: #696969;                               /* DimGray */
    font-weight: normal;
}


/* ==========================================================================
   8. GRÁFICA HISTÓRICA
   ========================================================================== */

.grafica-container[b-px3dmp84yb] {
    position: relative;                           /* Para posicionar charts ocultos */
    width: 100%;
    height: calc(100vh - 23rem);                  /* Altura dinámica (ajustado para evitar scroll) */
    min-height: 15rem;                            /* 240px mínimo */
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    padding: 0.625rem;                            /* 10px */
}

/* --- Contenedor de cada chart (siempre ocupa 100%) --- */
.chart-wrapper[b-px3dmp84yb] {
    width: 100%;
    height: 100%;
}

/* --- Chart oculto (visibility para que ChartJS mantenga dimensiones) --- */
.chart-oculto[b-px3dmp84yb] {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* ==========================================================================
   9. UTILIDADES
   ========================================================================== */

/* Mensaje de carga inicial */
.loading-message[b-px3dmp84yb] {
    text-align: center;
    padding: 1.25rem;                             /* 20px */
    font-size: var(--texto-10pt);
}

/* Tamaño de letra 8pt para labels */
.letra-8pt[b-px3dmp84yb] {
    font-size: var(--texto-8pt);
}

/* Spinner del módulo */
.sirei-spinner[b-px3dmp84yb] {
    --spinner-color: var(--color-panel);
}


/* ==========================================================================
   10. RESPONSIVO MÓVIL
   ========================================================================== */

@media (max-width: 768px) {
    /*
       Grid desactivado → los br-movil (display:flex; width:100% en app.css)
       crean 2 filas de widgets automáticamente:
         Fila 1: Rey + Evaluación texto + Esfuerzo
         Fila 2: Volumen + Créditos/Faltas + Inconformidades
    */

    .panel-metricas[b-px3dmp84yb] {
        display: block;
    }

    /* --- Margen entre fila 1 y fila 2, y espacio antes de la gráfica --- */
    .panel-metricas .br-movil + .br-movil[b-px3dmp84yb] {
        margin-top: 0.5rem;
    }

    .panel-metricas[b-px3dmp84yb] {
        margin-bottom: 0.5rem;
    }

    /* --- Rey ~20% más pequeño --- */
    .rey-container[b-px3dmp84yb] {
        width: auto;
        height: auto;
    }

    .icono-evaluacion[b-px3dmp84yb] {
        height: 128px;                            /* 160px × 0.8 = 128px */
    }

    .icono-evaluacion.icono-clicked[b-px3dmp84yb],
    .icono-evaluacion.icono-clicked:hover[b-px3dmp84yb],
    .icono-evaluacion.icono-clicked:active[b-px3dmp84yb] {
        height: 88px;                             /* 110px × 0.8 = 88px */
    }

    /* --- Fila 1: Evaluación texto flexible, Esfuerzo crece --- */
    .widget-col-1-texto[b-px3dmp84yb] {
        width: auto;
        min-width: 5rem;
    }

    .widget-col-esfuerzo[b-px3dmp84yb] {
        flex: 1;
        min-width: 0;
    }

    /* --- Fila 2: Volumen crece, Créditos/Faltas e Inconf compactos --- */
    .widget-col-volumen[b-px3dmp84yb] {
        flex: 1;
        min-width: 0;
        margin-right: 1rem;
    }

    /* Créditos/Faltas: lado a lado, cada uno apilado verticalmente
       [icon]  [icon]
       [num]   [num]
       Créd    Faltas                                                    */
    .widget-col-3[b-px3dmp84yb] {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        margin-right: 1rem;
    }

    .creditos-contenedor[b-px3dmp84yb],
    .faltas-contenedor[b-px3dmp84yb] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        text-align: center;
    }

    /* Iconos de Créditos/Faltas 20% más chicos */
    .widget-col-3 .icono-pequeño[b-px3dmp84yb] {
        width: 2.25rem;                           /* 2.8125 × 0.8 = 2.25rem */
        margin-right: 0;
    }

    /* Inconformidades: compacto (~4 dígitos de ancho) */
    .widget-col-4[b-px3dmp84yb] {
        width: auto;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Números de Créditos/Faltas/Inconf: mismo tamaño que Esfuerzo/Volumen */
    .creditos-numero[b-px3dmp84yb],
    .faltas-numero[b-px3dmp84yb],
    .inconf-numero[b-px3dmp84yb] {
        font-size: var(--texto-12pt);
    }

    /* --- Tablas internas flexibles --- */
    .widget-texto-td[b-px3dmp84yb] {
        width: auto;
    }

    /* --- Gráfica en móvil (25% más alta que 12rem) --- */
    .grafica-container[b-px3dmp84yb] {
        height: 15rem;                            /* 12rem + 25% */
        min-height: 12rem;
    }
}
/* _content/SiREI_2026/Components/Pages/01Pan/PanelReq.razor.rz.scp.css */
/*
   PanelReq.razor.css
   Panel de Requerimientos con métricas y gráficas.
   Dashboard principal del módulo de requerimientos.
*/

/* ===========================================================================
   ANÁLISIS EXHAUSTIVO DE ESTRUCTURA HTML Y CSS
   Fecha: 2026-01-19
   ===========================================================================

   ESTRUCTURA HTML (de afuera hacia adentro, hasta los tabs):
   ============================================================

   NIVEL 1: <div class="contenedor-principal-sirei">
   ├── Definido en: app.css (global) + PanelReq.razor.css (override)
   ├── app.css define:
   │   - padding-top: var(--padding-page-top)
   │   - padding-right: var(--padding-page-right)
   │   - padding-bottom: var(--padding-page-bottom)
   │   - margin-left: var(--margin-page-left)
   │   - width: calc(100% - var(--margin-page-left))
   ├── PanelReq.razor.css SOBRESCRIBE:
   │   - padding-top: 0
   └── OBSERVACIÓN: El width depende de variables CSS globales

   NIVEL 2: <div class="barra-filtros">
   ├── Definido en: app.css (global) + PanelReq.razor.css (override)
   ├── app.css define:
   │   - display: flex
   │   - flex-wrap: wrap
   │   - align-items: center
   │   - gap: 0.31rem
   │   - padding: 0.4rem 0.5rem
   ├── PanelReq.razor.css SOBRESCRIBE:
   │   - background-color: #ffefd5 (durazno)
   └── Contiene: selects, labels, y un <div class="br-movil"> para radios

   NIVEL 2: <div class="panel-metricas">
   ├── Definido en: PanelReq.razor.css (líneas 23-29)
   ├── Propiedades:
   │   - display: flex
   │   - flex-wrap: wrap
   │   - gap: 0.5rem
   │   - margin-top: 1rem
   │   - width: 100%
   └── Contiene: 3 grupos de <div class="br-movil">

   NIVEL 3: <div class="br-movil"> (GRUPO 1, 2, 3)
   ├── Definido en: app.css (líneas 553-568)
   ├── EN PC:
   │   - display: contents
   │   - EFECTO: El div "desaparece" del layout
   │   - Los hijos se comportan como hijos directos de .panel-metricas
   ├── EN CELULAR (@media max-width: 767px):
   │   - display: flex
   │   - width: 100%
   │   - gap: 0.5rem
   │   - EFECTO: Cada grupo ocupa una línea completa
   └── OBSERVACIÓN: El breakpoint es 767px en app.css, pero 768px en este archivo

   ============================================================
   GRUPO 1: Pie Resumen + Textos Proceso + Pie 1
   ============================================================

   NIVEL 4.1: <div class="panel-col panel-col-pie"> (Pie Resumen)
   ├── Mismo estilo que los otros pies
   └── Contiene: Pie de Solicitados/EnProceso/Terminados/Cancelados/Rechazados

   ============================================================

   NIVEL 4.2: <div class="panel-col columna-textos-proceso">
   ├── CLASES APLICADAS: "panel-col" + "columna-textos-proceso"
   ├── .panel-col: flex-grow: 1
   ├── .columna-textos-proceso (líneas 71-77) SOBRESCRIBE:
   │   - min-width: 9.5rem
   │   - flex-grow: 2         ← Crece el DOBLE que otros
   │   - padding-right: 0.9375rem
   │   - line-height: 1.6
   │   - text-align: center
   ├── EN CELULAR (líneas 343-351):
   │   - min-width: 9.5rem
   │   - width: auto
   │   - padding: 0.5rem
   │   - padding-top: 0
   │   - margin-top: 0
   │   - line-height: 1
   └── OBSERVACIÓN: En celular mantiene min-width pero quita flex-grow

   ============================================================

   NIVEL 4.3: <div class="panel-col panel-col-pie">
   ├── CLASES APLICADAS: "panel-col" + "panel-col-pie"
   ├── .panel-col: flex-grow: 1
   ├── .panel-col-pie (líneas 44-46):
   │   - min-width: 8.125rem
   ├── EN CELULAR (líneas 360-362):
   │   - width: 6rem
   └── OBSERVACIÓN: Se reduce correctamente en celular

   NIVEL 5.3: <div class="grafica-pie-container">
   ├── EN PC:
   │   - width: 9rem
   │   - height: 9rem
   ├── EN CELULAR:
   │   - width: 6rem
   │   - height: 6rem
   └── NOTA: Sin position:relative para evitar conflicto con .fijador (sticky)

   ============================================================
   GRUPO 2: Textos Terminados + Pie 2
   ============================================================
   (Mismo patrón que Grupo 1, sin gráfica de barras)

   ============================================================
   GRUPO 3: Cuellos de Botella
   ============================================================

   NIVEL 4.6: <div class="panel-col panel-col-cdb">
   ├── CLASES APLICADAS: "panel-col" + "panel-col-cdb"
   ├── .panel-col: flex-grow: 1
   ├── .panel-col-cdb (líneas 48-51):
   │   - min-width: 9.375rem
   │   - text-align: center
   ├── EN CELULAR (líneas 370-375):
   │   - width: 4rem
   │   - display: flex
   │   - flex-direction: column
   │   - align-items: center
   └── OBSERVACIÓN: Muy estrecho (4rem) puede causar overflow de texto

   ============================================================
   PROBLEMAS PENDIENTES
   ============================================================

   BREAKPOINT ESTÁNDAR: @media (max-width: 768px)
   ─────────────────────────────────────────────────────────
   - Todos los archivos del sistema usan 768px como breakpoint móvil
   - Estandarizado el 2026-03-23

   =========================================================================== */

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Pega la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-0k0s18lipg] {
    padding-top: 0;                           /* Sin padding superior */
    padding-bottom: 0;                        /* Sin padding inferior para evitar scroll */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-0k0s18lipg] {
    background-color: #ffefd5;                /* Durazno - color del módulo Panel */
}

.letra-8pt[b-0k0s18lipg] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== CONTENEDOR DE MÉTRICAS (FLEX) ===== */
.panel-metricas[b-0k0s18lipg] {
    display: flex;                            /* Contenedor flex */
    flex-wrap: wrap;                          /* Permite wrap */
    gap: 0.5rem;                              /* Espacio entre elementos */
    margin-top: 1rem;                         /* Separación superior */
    width: 100%;                              /* Ocupa todo el ancho */
}

.panel-col[b-0k0s18lipg] {
    vertical-align: top;                      /* Alineado arriba */
    flex-grow: 1;                             /* Crece para llenar espacio en PC */
}

.panel-col-pie[b-0k0s18lipg] {
    min-width: 8.125rem;                      /* Mínimo 130px */
}

.panel-col-cdb[b-0k0s18lipg] {
    min-width: 9.375rem;                      /* Mínimo 150px */
    text-align: center;                       /* Centrado */
}

.grafica-pie-container[b-0k0s18lipg] {
    width: 9rem;                              /* 144px */
    height: 9rem;                             /* 144px */
}

/* ===== COLUMNAS DE MÉTRICAS ===== */
.columna-textos-proceso[b-0k0s18lipg] {
    min-width: 9.5rem;                        /* Mínimo 152px */
    flex-grow: 2;                             /* Crece más que gráficas en PC */
    padding-right: 0.9375rem;                 /* Separación derecha (15px) */
    line-height: 1.4;                         /* Altura de línea PC */
    text-align: center;                       /* Centrado */
}

.columna-textos-terminados[b-0k0s18lipg] {
    min-width: 9.5rem;                        /* Mínimo 152px */
    flex-grow: 2;                             /* Crece más que gráficas en PC */
    line-height: 1.4;                         /* Altura de línea PC */
    text-align: center;                       /* Centrado */
}

.metrica-seccion[b-0k0s18lipg] {
    margin-top: 0.125rem;                     /* Separación superior (2px) */
}

/* ===== MÉTRICAS - NUEVOS ===== */
.lbl-nuevos-metrica[b-0k0s18lipg] {
    color: #FFCC33;                           /* Amarillo dorado */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-nuevos-texto[b-0k0s18lipg] {
    color: #FFCC33;                           /* Amarillo dorado */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MÉTRICAS - POR AUTORIZAR ===== */
.lbl-xaut-metrica[b-0k0s18lipg] {
    color: #990066;                           /* Magenta oscuro */
    font-size: var(--texto-9pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-xaut-texto[b-0k0s18lipg] {
    color: #990066;                           /* Magenta oscuro */
    font-size: var(--texto-9pt);             /* Tamaño 11pt */
}

/* ===== MÉTRICAS - SIN ASIGNAR ===== */
.lbl-sinasignar-metrica[b-0k0s18lipg] {
    color: #A9A9A9;                           /* Gris medio */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.lbl-sinasignar-texto[b-0k0s18lipg] {
    color: #A9A9A9;                           /* Gris medio */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - EN PROCESO (línea individual) ===== */
.lbl-enproceso-metrica[b-0k0s18lipg] {
    color: #228B22;                           /* Verde */
    font-size: var(--texto-10pt);             /* Mismo tamaño que en Tiempo */
    font-weight: bold;                        /* Negritas */
}

.lbl-enproceso-texto[b-0k0s18lipg] {
    color: #228B22;                           /* Verde */
    font-size: var(--texto-10pt);             /* Mismo tamaño que en Tiempo */
}

/* ===== MÉTRICAS - PENDIENTES ===== */
.lbl-proceso-metrica[b-0k0s18lipg] {
    color: #363636;                           /* Gris oscuro */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-proceso-texto[b-0k0s18lipg] {
    color: #363636;                           /* Gris oscuro */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== MÉTRICAS - EN TIEMPO ===== */
.lbl-entiempo-metrica[b-0k0s18lipg] {
    color: #4169E1;                           /* Azul royal */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-entiempo-texto-en[b-0k0s18lipg] {
    color: #4169E1;                           /* Azul royal */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.lbl-entiempo-texto[b-0k0s18lipg] {
    color: #4169E1;                           /* Azul royal */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.lbl-entiempo-porcentaje[b-0k0s18lipg] {
    color: #4169E1;                           /* Azul royal */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - TARDE ===== */
.lbl-tarde-metrica[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-tarde-porcentaje[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - POR CONFIRMAR ===== */
.lbl-xconf-metrica[b-0k0s18lipg] {
    color: #20B2AA;                           /* Verde agua */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-xconf-texto[b-0k0s18lipg] {
    color: #20B2AA;                           /* Verde agua */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

/* ===== MÉTRICAS - TERMINADOS ===== */
.lbl-terminados-metrica[b-0k0s18lipg] {
    color: #000000;                           /* Negro */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-terminados-texto[b-0k0s18lipg] {
    color: #000000;                           /* Negro */
    font-size: var(--texto-12pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== MÉTRICAS - TERMINADOS SUPERIOR ===== */
.lbl-tsuper-metrica[b-0k0s18lipg] {
    color: #800080;                           /* Morado */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-tsuper-texto[b-0k0s18lipg] {
    color: #800080;                           /* Morado */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - TERMINADOS EN TIEMPO ===== */
.lbl-ttiempo-metrica[b-0k0s18lipg] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-ttiempo-texto-en[b-0k0s18lipg] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.lbl-ttiempo-texto[b-0k0s18lipg] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.lbl-ttiempo-porcentaje[b-0k0s18lipg] {
    color: #228B22;                           /* Verde bosque */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - TERMINADOS TARDE ===== */
.lbl-ttarde-metrica[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-ttarde-porcentaje[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== MÉTRICAS - CANCELADOS ===== */
.lbl-cancelados-metrica[b-0k0s18lipg] {
    color: #A9A9A9;                           /* Gris medio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-cancelados-texto[b-0k0s18lipg] {
    color: #A9A9A9;                           /* Gris medio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MÉTRICAS - RECHAZADOS ===== */
.lbl-rechazados-metrica[b-0k0s18lipg] {
    color: #FF8C00;                           /* Naranja oscuro */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-rechazados-texto[b-0k0s18lipg] {
    color: #FF8C00;                           /* Naranja oscuro */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

/* ===== MÉTRICAS - CUELLOS DE BOTELLA ===== */
.lbl-cdb-metrica[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
    font-weight: bold;                        /* Negritas */
}

.lbl-cdb-texto[b-0k0s18lipg] {
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
}

/* ===== UTILIDADES ===== */
.action-link[b-0k0s18lipg] {
    cursor: pointer;                          /* Cursor de mano */
    text-decoration: none;                    /* Sin subrayado */
}

.action-link:hover[b-0k0s18lipg] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== TABS DE GRÁFICA ===== */
.tabs-container[b-0k0s18lipg] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 100%;                              /* Ancho completo responsive */
    border-top: none;                         /* Sin borde superior */
    padding-top: 0.3125rem;                   /* Padding superior (5px) */
    border-collapse: collapse;                /* Bordes colapsados */
    table-layout: fixed;                      /* Layout fijo */
}

.tabs-row[b-0k0s18lipg] {
    height: 1.5625rem;                        /* Altura de fila (25px) */
    text-align: center;                       /* Centrado */
}

.tab-cell[b-0k0s18lipg] {
    border: none;                             /* Sin borde */
    border-top: 1px solid gray;               /* Borde superior gris */
    border-left: 1px solid gray;              /* Borde izquierdo gris */
    border-right: 1px solid gray;             /* Borde derecho gris */
}

.tab-width-1[b-0k0s18lipg],
.tab-width-2[b-0k0s18lipg],
.tab-width-3[b-0k0s18lipg] {
    width: 30%;                               /* Ancho de cada tab */
}

.tab-cell.tab-active[b-0k0s18lipg] {
    background-color: #F5F5F5;                /* Fondo tab activo */
}

.tab-cell.tab-inactive[b-0k0s18lipg] {
    background-color: Gainsboro;              /* Fondo tab inactivo */
}

.tab-link[b-0k0s18lipg] {
    text-decoration: none;                    /* Sin subrayado */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
    width: 100%;                              /* Ancho completo */
    height: 100%;                             /* Alto completo */
}

.tab-active .tab-link[b-0k0s18lipg] {
    color: Black;                             /* Texto tab activo */
    font-weight: bold;                        /* Negrita tab activo */
}

.tab-inactive .tab-link[b-0k0s18lipg] {
    color: DimGray;                           /* Texto tab inactivo */
    font-weight: normal;                      /* Normal tab inactivo */
}

.tab-spacer[b-0k0s18lipg] {
    width: 5%;                                /* Espacio entre tabs */
}

/* ===== GRÁFICA HISTÓRICA ===== */
.grafica-container[b-0k0s18lipg] {
    width: 100%;                              /* Ancho completo responsive */
    height: calc(100vh - 23.1rem);              /* Altura dinámica (pantalla - offset + aire) */
    min-height: 15rem;                        /* Mínimo 240px */
    background-color: #F5F5F5;                /* Gris muy claro */
    border: 1px solid #ddd;                   /* Borde gris claro */
    padding: 0.625rem;                        /* Espaciado interno (10px) */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Fila 1: Textos-Proceso está en MEDIO (entre 2 pies) → absorbe espacio */
    .columna-textos-proceso[b-0k0s18lipg] {
        min-width: 5rem;                      /* Reducido: textos abreviados ocupan menos */
        width: auto;                          /* Ancho automático */
        padding: 0.3rem;                      /* Padding compacto */
        padding-top: 0;                       /* Pegado arriba */
        margin-top: 0;                        /* Sin margen superior */
        line-height: 1;                       /* Interlineado compacto */
        flex-grow: 1;                         /* CRECE: está en medio de la fila 1 */
    }

    /* Fila 2: Textos-Terminados está a la IZQ → ancho fijo igual a CdB para centrar Pie-2 */
    .columna-textos-terminados[b-0k0s18lipg] {
        width: 7rem;                          /* Igual que CdB → Pie-2 centrado (ambos lados = 7.5rem) */
        min-width: 7rem;                      /* No se encoge */
        padding: 0.3rem;                      /* Padding compacto */
        padding-top: 0;                       /* Pegado arriba */
        margin-top: 0;                        /* Sin margen superior */
        line-height: 1;                       /* Interlineado compacto */
        flex-grow: 0;                         /* NO crece: ancho fijo para alinear */
    }

    /* Gráficas de pie: 40% más grandes que antes */
    .panel-col-pie[b-0k0s18lipg] {
        width: 5.5rem;                        /* 40% más grande (era 4rem) */
        min-width: 5.5rem;                    /* No se encoge más */
        flex-grow: 0;                         /* No crece (default) */
    }

    .grafica-pie-container[b-0k0s18lipg] {
        width: 5.5rem;                        /* 40% más grande (era 4rem) */
        height: 5.5rem;                       /* 40% más grande (era 4rem) */
    }

    /* Fila 2: Pie-2 está en MEDIO → absorbe espacio y centra la gráfica */
    .br-movil:last-child .panel-col-pie[b-0k0s18lipg] {
        flex-grow: 1;                         /* CRECE: está en medio de la fila 2 */
        display: flex;                        /* Flex para centrar el pie dentro */
        justify-content: center;              /* Centra la gráfica en el espacio */
    }

    /* Cuellos de Botella: mismo ancho que Textos-T → Pie-2 queda centrado */
    .panel-col-cdb[b-0k0s18lipg] {
        width: 7rem;                          /* Igual que Textos-T → Pie-2 centrado */
        min-width: 7rem;                      /* No se encoge más */
        display: flex;                        /* Flex para apilar */
        flex-direction: column;               /* Apilado vertical */
        align-items: center;                  /* Centrado horizontal */
        flex-grow: 0;                         /* No crece */
    }

    .img-cdb[b-0k0s18lipg] {
        width: 6rem;                          /* Más grande, cabe bien en 7rem de columna */
        height: auto;                         /* Mantiene proporción */
    }

    /* Gráfica histórica */
    .grafica-container[b-0k0s18lipg] {
        height: 15rem;                        /* Altura reducida en celular */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-0k0s18lipg] {
    --spinner-color: var(--color-panel);
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0000c.razor.rz.scp.css */
/*
   ID_0000c.razor.css
   Formulario base de captura.
   Usa estructura dato-row de ReqNuevoCaptura para alineación.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-27r02qv0c5] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    width: 100%;                              /* Ancho completo */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-27r02qv0c5] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== LABEL CON MÚLTIPLES LÍNEAS ===== */
.label-multilinea[b-27r02qv0c5] {
    vertical-align: top;                      /* Alineado arriba */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== TEXTO DE INSTRUCCIONES ===== */
.texto-instruccion[b-27r02qv0c5] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== TEXTO DE LÍMITE DE CARACTERES ===== */
.texto-limite[b-27r02qv0c5] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #999999;                           /* Gris medio */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-27r02qv0c5] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== TEXTAREA ESTILO SIREI ===== */
.textarea-sirei[b-27r02qv0c5] {
    width: 80%;                               /* Ancho 80% */
    min-height: 5.75rem;                      /* Altura mínima (92px) */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
    resize: vertical;                         /* Solo redimensiona vertical */
}

.textarea-sirei:focus[b-27r02qv0c5] {
    outline: none;                            /* Sin outline */
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.5); /* Sombra amarilla SiREI */
}

/* ===== VALIDACIÓN ===== */
.validation-error[b-27r02qv0c5] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-16pt);             /* Tamaño 16pt (x-large) */
    margin-left: 0.31rem;                     /* Margen izquierdo (5px) */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-27r02qv0c5] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-27r02qv0c5] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .textarea-sirei[b-27r02qv0c5] {
        width: 100%;                          /* Ancho completo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0000d.razor.rz.scp.css */
/*
   ID_0000d.razor.css
   Formulario de detalle base.
   Usa estructura dato-row de ReqNuevoCaptura para alineación.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-sr2oc0lzqi] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items (match ReqDetalle) */
    width: 100%;                              /* Ancho completo */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-sr2oc0lzqi] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-sr2oc0lzqi] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match ReqDetalle) */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== VALOR DE DETALLE (solo lectura) ===== */
.valor-detalle[b-sr2oc0lzqi] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match text-dato de ReqDetalle) */
    line-height: 1.4;                         /* Altura de línea */
    color: #333333;                           /* Gris oscuro */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-sr2oc0lzqi] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-sr2oc0lzqi] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0001c.razor.rz.scp.css */
/*
   ID_0001c.razor.css
   Formulario con Sucursal (Estado + Sucursal).
   Sistema de validación profesional con input-error y validation-message.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-65f3ki0kr4] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    width: 100%;                              /* Ancho completo */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-65f3ki0kr4] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== LABEL CON MÚLTIPLES LÍNEAS ===== */
.label-multilinea[b-65f3ki0kr4] {
    vertical-align: top;                      /* Alineado arriba */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== TEXTO DE INSTRUCCIONES ===== */
.texto-instruccion[b-65f3ki0kr4] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== TEXTO DE LÍMITE DE CARACTERES ===== */
.texto-limite[b-65f3ki0kr4] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #999999;                           /* Gris medio */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-65f3ki0kr4] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== SELECT ESTILO SIREI ===== */
.select-sirei[b-65f3ki0kr4] {
    padding: 0.25rem;                         /* Padding (4px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    min-width: 11rem;                         /* Ancho mínimo (176px) */
}

.select-sirei:focus[b-65f3ki0kr4] {
    outline: none;                            /* Sin outline */
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.5); /* Sombra amarilla SiREI */
}

/* ===== TEXTAREA ESTILO SIREI ===== */
.textarea-sirei[b-65f3ki0kr4] {
    width: 80%;                               /* Ancho 80% */
    min-height: 5.75rem;                      /* Altura mínima (92px) */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
    resize: vertical;                         /* Solo redimensiona vertical */
}

.textarea-sirei:focus[b-65f3ki0kr4] {
    outline: none;                            /* Sin outline */
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.5); /* Sombra amarilla SiREI */
}

/* ===== SISTEMA DE VALIDACIÓN PROFESIONAL ===== */

/* Input con error (borde rojo sutil) */
.input-error[b-65f3ki0kr4] {
    border-color: #DC3545 !important;         /* Rojo Bootstrap */
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25); /* Sombra roja sutil */
}

.input-error:focus[b-65f3ki0kr4] {
    border-color: #DC3545;                    /* Rojo Bootstrap */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); /* Sombra roja más intensa */
}

/* Asterisco de validación (pequeño y alineado) */
.validation-asterisk[b-65f3ki0kr4] {
    color: #DC3545;                           /* Rojo Bootstrap */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-left: 0.25rem;                     /* Margen izquierdo (4px) */
    vertical-align: middle;                   /* Alineado vertical medio */
}

/* Mensaje de error (OBLIGATORIO cuando hay error) */
.validation-message[b-65f3ki0kr4] {
    color: #DC3545;                           /* Rojo Bootstrap */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    margin-top: 0.25rem;                      /* Margen superior (4px) */
    margin-left: 0;                           /* Sin margen izquierdo */
}

/* DEPRECADO: .validation-error reemplazado por validation-asterisk + validation-message */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-65f3ki0kr4] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-65f3ki0kr4] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .textarea-sirei[b-65f3ki0kr4] {
        width: 100%;                          /* Ancho completo */
    }

    .select-sirei[b-65f3ki0kr4] {
        width: 100%;                          /* Ancho completo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0001d.razor.rz.scp.css */
/*
   ID_0001d.razor.css
   Formulario de detalle con Sucursal (Estado + Sucursal).
   Usa estructura dato-row de ReqNuevoCaptura para alineación.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-l2ywvi39be] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items (match ReqDetalle) */
    width: 100%;                              /* Ancho completo */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-l2ywvi39be] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-l2ywvi39be] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match ReqDetalle) */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== VALOR DE DETALLE (solo lectura) ===== */
.valor-detalle[b-l2ywvi39be] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match text-dato de ReqDetalle) */
    line-height: 1.4;                         /* Altura de línea */
    color: #333333;                           /* Gris oscuro */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-l2ywvi39be] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-l2ywvi39be] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0005c.razor.rz.scp.css */
/*
   ID_0005c.razor.css
   Formulario con Monto Solicitado.
   Sistema de validación profesional con input-error y validation-message.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-we7sz9vkal] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    width: 100%;                              /* Ancho completo */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-we7sz9vkal] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== LABEL CON MÚLTIPLES LÍNEAS ===== */
.label-multilinea[b-we7sz9vkal] {
    vertical-align: top;                      /* Alineado arriba */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== TEXTO DE INSTRUCCIONES ===== */
.texto-instruccion[b-we7sz9vkal] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== TEXTO DE LÍMITE DE CARACTERES ===== */
.texto-limite[b-we7sz9vkal] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #999999;                           /* Gris medio */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-we7sz9vkal] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== INPUT DE MONEDA (PROFESIONAL) ===== */
.input-moneda-container[b-we7sz9vkal] {
    display: inline-flex;                     /* Flex inline */
    align-items: center;                      /* Centrado vertical */
    gap: 0.25rem;                             /* Espacio (4px) */
}

.input-moneda-prefijo[b-we7sz9vkal] {
    font-weight: bold;                        /* Negritas */
    color: #333333;                           /* Gris oscuro */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.input-moneda[b-we7sz9vkal] {
    width: 10rem;                             /* Ancho (160px) */
    padding: 0.25rem 0.5rem;                  /* Padding (4px 8px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    text-align: right;                        /* Alineado derecha */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
}

.input-moneda:focus[b-we7sz9vkal] {
    outline: none;                            /* Sin outline */
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.5); /* Sombra amarilla SiREI */
}

/* ===== TEXTAREA ESTILO SIREI ===== */
.textarea-sirei[b-we7sz9vkal] {
    width: 80%;                               /* Ancho 80% */
    min-height: 5.75rem;                      /* Altura mínima (92px) */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
    resize: vertical;                         /* Solo redimensiona vertical */
}

.textarea-sirei:focus[b-we7sz9vkal] {
    outline: none;                            /* Sin outline */
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.5); /* Sombra amarilla SiREI */
}

/* ===== SISTEMA DE VALIDACIÓN PROFESIONAL ===== */

/* Input con error (borde rojo sutil) */
.input-error[b-we7sz9vkal] {
    border-color: #DC3545 !important;         /* Rojo Bootstrap */
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25); /* Sombra roja sutil */
}

.input-error:focus[b-we7sz9vkal] {
    border-color: #DC3545;                    /* Rojo Bootstrap */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); /* Sombra roja más intensa */
}

/* Asterisco de validación (pequeño y alineado) */
.validation-asterisk[b-we7sz9vkal] {
    color: #DC3545;                           /* Rojo Bootstrap */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-left: 0.25rem;                     /* Margen izquierdo (4px) */
    vertical-align: middle;                   /* Alineado vertical medio */
}

/* Mensaje de error (OBLIGATORIO cuando hay error) */
.validation-message[b-we7sz9vkal] {
    color: #DC3545;                           /* Rojo Bootstrap */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    margin-top: 0.25rem;                      /* Margen superior (4px) */
    margin-left: 0;                           /* Sin margen izquierdo */
}

/* DEPRECADO: .validation-error, .input-monto-sirei, .simbolo-moneda */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-we7sz9vkal] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-we7sz9vkal] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .textarea-sirei[b-we7sz9vkal] {
        width: 100%;                          /* Ancho completo */
    }

    .input-moneda[b-we7sz9vkal] {
        width: 100%;                          /* Ancho completo */
    }

    .input-moneda-container[b-we7sz9vkal] {
        width: 100%;                          /* Ancho completo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_0005d.razor.rz.scp.css */
/*
   ID_0005d.razor.css
   Formulario de detalle con Monto Solicitado.
   Usa estructura dato-row de ReqNuevoCaptura para alineación.
*/

/* ===== FILA DE DATOS (heredada de ReqNuevoCaptura) ===== */
.dato-row[b-iy7j2wk4a4] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items (match ReqDetalle) */
    width: 100%;                              /* Ancho completo */
}

/* ===== LABEL ALINEADA (heredada de ReqNuevoCaptura) ===== */
.label-alineada[b-iy7j2wk4a4] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-iy7j2wk4a4] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match ReqDetalle) */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== VALOR DE DETALLE (solo lectura) ===== */
.valor-detalle[b-iy7j2wk4a4] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (match text-dato de ReqDetalle) */
    line-height: 1.4;                         /* Altura de línea */
    color: #333333;                           /* Gris oscuro */
}

/* ===== VALOR DE MONEDA (formato especial) ===== */
.valor-moneda[b-iy7j2wk4a4] {
    font-weight: bold;                        /* Negritas */
    color: #006600;                           /* Verde oscuro (dinero) */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-iy7j2wk4a4] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-iy7j2wk4a4] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_1001c.razor.rz.scp.css */
/*
   ID_1001c.razor.css
   Formulario de captura: Solicitud de Costeo de Proyecto.
   Oportunidad de Odoo (búsqueda + selección) + Brief Consultivo (4 cajitas).
   CSS scoped: las clases de forma se redeclaran aquí (no se heredan de otro .razor.css).
*/

/* ===== FILA DE DATOS (calco del patrón de formularios) ===== */
.dato-row[b-rgonrrqlj1] {
    margin-bottom: 0.75rem;                   /* Margen inferior (12px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    width: 100%;                              /* Ancho completo */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== LABEL ALINEADA ===== */
.label-alineada[b-rgonrrqlj1] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== LABEL CON MÚLTIPLES LÍNEAS ===== */
.label-multilinea[b-rgonrrqlj1] {
    vertical-align: top;                      /* Alineado arriba */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== MICROTEXTO DE INSTRUCCIONES (letra chica bajo el label) ===== */
.texto-instruccion[b-rgonrrqlj1] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-rgonrrqlj1] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== INPUT DE TEXTO ESTILO SIREI ===== */
.input-sirei[b-rgonrrqlj1] {
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
}

.input-sirei:focus[b-rgonrrqlj1] {
    outline: none;                            /* Sin outline */
    border-color: var(--color-coti);          /* Borde azul Cotizador al enfocar */
}

/* ===== TEXTAREA ESTILO SIREI ===== */
.textarea-sirei[b-rgonrrqlj1] {
    width: 80%;                               /* Ancho 80% */
    min-height: 4.5rem;                       /* Altura mínima (72px) */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
    resize: vertical;                         /* Solo redimensiona vertical */
}

.textarea-sirei:focus[b-rgonrrqlj1] {
    outline: none;                            /* Sin outline */
    border-color: var(--color-coti);          /* Borde azul Cotizador al enfocar */
}

/* ===== SECCIÓN OPORTUNIDAD: BANNER ODOO NO CONFIGURADO ===== */
.opp-banner-aviso[b-rgonrrqlj1] {
    background-color: #FFF3E0;                              /* Naranja claro de aviso */
    border: 1px solid var(--color-coti-naranja-oscuro);    /* Borde naranja Cotizador */
    border-radius: 4px;                                    /* Bordes redondeados */
    padding: 0.4rem 0.6rem;                                /* Aire interno */
    font-size: var(--texto-8pt);                           /* Texto pequeño */
    color: var(--color-coti-naranja-texto);                /* Texto naranja oscuro Cotizador (#6B4500) */
    margin-bottom: 0.5rem;                                 /* Separación de la caja de búsqueda */
}

/* ===== CAJA DE BÚSQUEDA (input + botón) ===== */
.opp-busqueda[b-rgonrrqlj1] {
    display: flex;                            /* Input y botón en línea */
    flex-wrap: wrap;                          /* Wrap en pantallas chicas */
    gap: 0.4rem;                              /* Separación entre input y botón */
    align-items: center;                      /* Centrado vertical */
}

.opp-input[b-rgonrrqlj1] {
    flex: 0 0 auto;                           /* Caja angosta de ancho fijo (no se estira) */
    width: 9rem;                              /* Ancho cómodo para hasta 8 dígitos */
}

/* Botón "Buscar en Odoo": morado de marca de Odoo (#714B67).
   DEUDA: es color corporativo de Odoo (plataforma externa), NO del módulo
   Cotizador, y app.css no tiene variable para él → literal justificado.
   Si algún día se define --color-odoo-morado en app.css, migrar aquí. */
.btn-buscar-odoo[b-rgonrrqlj1] {
    background-color: #714B67;                /* Morado de marca Odoo */
    color: #FFFFFF;                           /* Texto blanco */
    margin-left: 0;                           /* Sobrescribe el margen de .boton */
}

.btn-buscar-odoo:hover[b-rgonrrqlj1] {
    background-color: #5C3D54;                /* Morado Odoo un tono más oscuro */
}

/* ===== MENSAJE DE ERROR DE LA BÚSQUEDA =====
   Canal único de errores de la oportunidad (no encontrada / captura el número /
   error técnico / Odoo no configurado). Todos son errores → rojo #DC3545, el
   mismo de .input-error/.validation-message en este archivo (no es color inventado). */
.opp-mensaje[b-rgonrrqlj1] {
    font-size: var(--texto-7pt);              /* Homologado a .validation-message (mismo canal de error rojo) */
    color: #DC3545;                           /* Rojo de error */
    margin-top: 0.4rem;                       /* Separación */
}

/* ===== OPORTUNIDAD ENCONTRADA: PALOMA VERDE JUNTO AL BOTÓN =====
   Reemplaza la antigua tira verde: el nombre/cliente/monto ya se vuelca al
   "Motivo del Req" (R8c), así que solo se confirma con una paloma. Calco del
   patrón vecino .opp-req-check de CreaNueva.razor.css (CSS scoped no se hereda).
   El verde #2E7D32 es el de confirmación que ya usa el módulo Cotizador
   (app.css no tiene variable verde → literal consistente con el módulo). */
.opp-check[b-rgonrrqlj1] {
    color: #2E7D32;                           /* Verde oscuro de confirmación (módulo Cotizador) */
    font-weight: bold;                        /* Resalta la paloma */
    font-size: var(--texto-12pt);             /* Mayor para que se note junto al botón */
    flex-shrink: 0;                           /* No encoge en la fila flex .opp-busqueda */
}

/* ===== CHIPS DE PERFIL DE COMPRA ===== */
.opp-chips[b-rgonrrqlj1] {
    display: flex;                            /* Chips en línea */
    flex-wrap: wrap;                          /* Wrap en chico */
    gap: 0.4rem;                              /* Separación entre chips */
}

.opp-chip[b-rgonrrqlj1] {
    display: inline-block;                    /* Pieza compacta */
    padding: 0.25rem 0.7rem;                  /* Aire interno */
    border: 1px solid #BDBDBD;                /* Borde gris (apagado por defecto) */
    border-radius: 1rem;                      /* Forma de píldora */
    font-size: var(--texto-8pt);              /* Texto pequeño */
    color: #616161;                           /* Gris (apagado por defecto) */
    background-color: #F5F5F5;                /* Fondo gris claro (apagado) */
    cursor: pointer;                          /* Manita: clicable */
    user-select: none;                        /* No se selecciona el texto */
}

.opp-chip:hover[b-rgonrrqlj1] {
    border-color: var(--color-coti);          /* Borde azul al flotar */
}

.opp-chip-sel[b-rgonrrqlj1] {
    font-weight: bold;                        /* El chip elegido resalta (color inline) */
}

/* ===== INPUT "OTRO" Y PLAZO ===== */
.opp-otro-input[b-rgonrrqlj1] {
    margin-top: 0.4rem;                       /* Separación de los chips */
    width: 80%;                               /* Ancho legible */
}

.opp-plazo-input[b-rgonrrqlj1] {
    width: 60%;                               /* Ancho legible */
}

/* ===== SISTEMA DE VALIDACIÓN ===== */
.input-error[b-rgonrrqlj1] {
    border-color: #DC3545;                    /* Rojo de error */
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25); /* Sombra roja sutil */
}

.input-error:focus[b-rgonrrqlj1] {
    border-color: #DC3545;                    /* Rojo de error */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); /* Sombra roja más intensa */
}

.validation-asterisk[b-rgonrrqlj1] {
    color: #DC3545;                           /* Rojo de error */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-left: 0.25rem;                     /* Margen izquierdo (4px) */
    vertical-align: middle;                   /* Alineado vertical medio */
}

.validation-message[b-rgonrrqlj1] {
    color: #DC3545;                           /* Rojo de error */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    margin-top: 0.25rem;                      /* Margen superior (4px) */
    margin-left: 0;                           /* Sin margen izquierdo */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-rgonrrqlj1] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-rgonrrqlj1] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .textarea-sirei[b-rgonrrqlj1],
    .opp-otro-input[b-rgonrrqlj1],
    .opp-plazo-input[b-rgonrrqlj1] {
        width: 100%;                          /* Ancho completo en móvil */
    }

    /* La caja de oportunidad NO se estira: es un número corto (hasta 8 dígitos).
       Forzar 100% en móvil se vería desproporcionado. Mantiene su ancho cómodo. */
    .opp-input[b-rgonrrqlj1] {
        width: 9rem;                          /* Ancho cómodo para un número */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_1001d.razor.rz.scp.css */
/*
   ID_1001d.razor.css
   Formulario de detalle: Solicitud de Costeo de Proyecto.
   Read-only: oportunidad de Odoo + Brief Consultivo + autor.
   CSS scoped: las clases de detalle se redeclaran aquí (no se heredan).
*/

/* ===== FILA DE DATOS (calco del patrón de detalle) ===== */
.dato-row[b-2uodexprpg] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items */
    width: 100%;                              /* Ancho completo */
}

/* ===== LABEL ALINEADA ===== */
.label-alineada[b-2uodexprpg] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-2uodexprpg] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== VALOR DE DETALLE (solo lectura) ===== */
.valor-detalle[b-2uodexprpg] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    line-height: 1.4;                         /* Altura de línea */
    color: #333333;                           /* Gris oscuro */
    overflow-wrap: anywhere;                  /* Texto largo sin espacios no desborda en móvil */
}

/* ===== CHIP DE PERFIL DE COMPRA (color del catálogo, inline) ===== */
.costeo-chip-perfil[b-2uodexprpg] {
    display: inline-block;                    /* Pieza compacta */
    padding: 0.2rem 0.7rem;                   /* Aire interno */
    border: 1px solid transparent;            /* El color del borde lo pone el estilo inline */
    border-radius: 1rem;                      /* Forma de píldora */
    font-size: var(--texto-8pt);              /* Texto pequeño */
    font-weight: bold;                        /* Negritas */
}

/* ===== MENSAJE SIN DATOS ===== */
.costeo-sin-datos[b-2uodexprpg] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #888888;                           /* Gris medio */
    font-style: italic;                       /* Cursiva: estado vacío */
}

/* ===== LIGA "CREAR COSTEO" (override de color sobre .boton) =====
   Acentúa con el azul del Cotizador para señalar que cruza al módulo de costeo. */
.btn-crear-costeo[b-2uodexprpg] {
    background-color: var(--color-coti);      /* Azul Cotizador */
    color: #FFFFFF;                           /* Texto blanco */
    margin-left: 0;                           /* Anula el margen izquierdo de .boton */
}

.btn-crear-costeo:hover[b-2uodexprpg] {
    background-color: var(--color-coti-oscuro); /* Azul Cotizador más oscuro al hover */
}

/* ===== BOTÓN "SOLICITAR LEVANTAMIENTO" (override de color sobre .boton) =====
   Mismo patrón visual que btn-crear-costeo, pero con el naranja del Cotizador para
   distinguir las dos acciones que cruzan al módulo (Costeo en azul, Levantamiento
   en naranja) y no dejar dos botones idénticos lado a lado. Conserva el margin-left
   por defecto de .boton para separarse del botón "Crear Costeo". */
.btn-solicitar-lev[b-2uodexprpg] {
    background-color: var(--color-coti-naranja); /* Naranja Cotizador */
    color: #FFFFFF;                              /* Texto blanco */
}

.btn-solicitar-lev:hover[b-2uodexprpg] {
    background-color: var(--color-coti-naranja-oscuro); /* Naranja Cotizador más oscuro al hover */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-2uodexprpg] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-2uodexprpg] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_1002c.razor.rz.scp.css */
/*
   ID_1002c.razor.css
   Formulario de captura: Solicitud de Levantamiento.
   Oportunidad de Odoo (búsqueda) + datos generales del sitio + instrucciones.
   CSS scoped: las clases de forma se redeclaran aquí (NO se heredan de otro
   .razor.css). Calco 1:1 de las clases reusadas de ID_1001c.razor.css.
*/

/* ===== FILA DE DATOS (calco del patrón de formularios) ===== */
.dato-row[b-5oy57ogz5b] {
    margin-bottom: 0.75rem;                   /* Margen inferior (12px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    width: 100%;                              /* Ancho completo */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== LABEL ALINEADA ===== */
.label-alineada[b-5oy57ogz5b] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== LABEL CON MÚLTIPLES LÍNEAS ===== */
.label-multilinea[b-5oy57ogz5b] {
    vertical-align: top;                      /* Alineado arriba */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== MICROTEXTO DE INSTRUCCIONES (letra chica bajo el label) ===== */
.texto-instruccion[b-5oy57ogz5b] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-5oy57ogz5b] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== INPUT DE TEXTO ESTILO SIREI ===== */
.input-sirei[b-5oy57ogz5b] {
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
}

.input-sirei:focus[b-5oy57ogz5b] {
    outline: none;                            /* Sin outline */
    border-color: var(--color-coti);          /* Borde azul Cotizador al enfocar */
}

/* ===== TEXTAREA ESTILO SIREI ===== */
.textarea-sirei[b-5oy57ogz5b] {
    width: 80%;                               /* Ancho 80% */
    min-height: 4.5rem;                       /* Altura mínima (72px) */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-family: inherit;                     /* Hereda fuente */
    resize: vertical;                         /* Solo redimensiona vertical */
}

.textarea-sirei:focus[b-5oy57ogz5b] {
    outline: none;                            /* Sin outline */
    border-color: var(--color-coti);          /* Borde azul Cotizador al enfocar */
}

/* ===== SECCIÓN OPORTUNIDAD: BANNER ODOO NO CONFIGURADO ===== */
.opp-banner-aviso[b-5oy57ogz5b] {
    background-color: #FFF3E0;                              /* Naranja claro de aviso */
    border: 1px solid var(--color-coti-naranja-oscuro);    /* Borde naranja Cotizador */
    border-radius: 4px;                                    /* Bordes redondeados */
    padding: 0.4rem 0.6rem;                                /* Aire interno */
    font-size: var(--texto-8pt);                           /* Texto pequeño */
    color: var(--color-coti-naranja-texto);                /* Texto naranja oscuro Cotizador (#6B4500) */
    margin-bottom: 0.5rem;                                 /* Separación de la caja de búsqueda */
}

/* ===== CAJA DE BÚSQUEDA (input + botón) ===== */
.opp-busqueda[b-5oy57ogz5b] {
    display: flex;                            /* Input y botón en línea */
    flex-wrap: wrap;                          /* Wrap en pantallas chicas */
    gap: 0.4rem;                              /* Separación entre input y botón */
    align-items: center;                      /* Centrado vertical */
}

.opp-input[b-5oy57ogz5b] {
    flex: 0 0 auto;                           /* Caja angosta de ancho fijo (no se estira) */
    width: 9rem;                              /* Ancho cómodo para hasta 8 dígitos */
}

/* Botón "Buscar en Odoo": morado de marca de Odoo (#714B67).
   DEUDA: es color corporativo de Odoo (plataforma externa), NO del módulo
   Cotizador, y app.css no tiene variable para él → literal justificado.
   Si algún día se define --color-odoo-morado en app.css, migrar aquí. */
.btn-buscar-odoo[b-5oy57ogz5b] {
    background-color: #714B67;                /* Morado de marca Odoo */
    color: #FFFFFF;                           /* Texto blanco */
    margin-left: 0;                           /* Sobrescribe el margen de .boton */
}

.btn-buscar-odoo:hover[b-5oy57ogz5b] {
    background-color: #5C3D54;                /* Morado Odoo un tono más oscuro */
}

/* ===== MENSAJE DE ERROR DE LA BÚSQUEDA =====
   Canal único de errores de la oportunidad. Todos son errores → rojo #DC3545,
   el mismo de .input-error/.validation-message en este archivo. */
.opp-mensaje[b-5oy57ogz5b] {
    font-size: var(--texto-7pt);              /* Homologado a .validation-message (mismo canal de error rojo) */
    color: #DC3545;                           /* Rojo de error */
    margin-top: 0.4rem;                       /* Separación */
}

/* ===== OPORTUNIDAD ENCONTRADA: PALOMA VERDE JUNTO AL BOTÓN =====
   El verde #2E7D32 es el de confirmación que ya usa el módulo Cotizador
   (app.css no tiene variable verde → literal consistente con el módulo). */
.opp-check[b-5oy57ogz5b] {
    color: #2E7D32;                           /* Verde oscuro de confirmación (módulo Cotizador) */
    font-weight: bold;                        /* Resalta la paloma */
    font-size: var(--texto-12pt);             /* Mayor para que se note junto al botón */
    flex-shrink: 0;                           /* No encoge en la fila flex .opp-busqueda */
}

/* ===== SELECT DE TIPO DE PROYECTO ===== */
.lev-select[b-5oy57ogz5b] {
    width: 60%;                               /* Ancho legible */
}

/* ===== INPUTS DE TEXTO (Ubicación / Contacto) ===== */
.lev-input[b-5oy57ogz5b] {
    width: 80%;                               /* Ancho legible */
}

/* ===== SISTEMA DE VALIDACIÓN ===== */
.input-error[b-5oy57ogz5b] {
    border-color: #DC3545;                    /* Rojo de error */
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25); /* Sombra roja sutil */
}

.input-error:focus[b-5oy57ogz5b] {
    border-color: #DC3545;                    /* Rojo de error */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25); /* Sombra roja más intensa */
}

.validation-asterisk[b-5oy57ogz5b] {
    color: #DC3545;                           /* Rojo de error */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-left: 0.25rem;                     /* Margen izquierdo (4px) */
    vertical-align: middle;                   /* Alineado vertical medio */
}

.validation-message[b-5oy57ogz5b] {
    color: #DC3545;                           /* Rojo de error */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    margin-top: 0.25rem;                      /* Margen superior (4px) */
    margin-left: 0;                           /* Sin margen izquierdo */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-5oy57ogz5b] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-5oy57ogz5b] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .textarea-sirei[b-5oy57ogz5b],
    .lev-select[b-5oy57ogz5b],
    .lev-input[b-5oy57ogz5b] {
        width: 100%;                          /* Ancho completo en móvil */
    }

    /* La caja de oportunidad NO se estira: es un número corto (hasta 8 dígitos). */
    .opp-input[b-5oy57ogz5b] {
        width: 9rem;                          /* Ancho cómodo para un número */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/Formularios/ID_1002d.razor.rz.scp.css */
/*
   ID_1002d.razor.css
   Formulario de detalle: Solicitud de Levantamiento.
   Read-only: oportunidad de Odoo + datos generales del sitio + instrucciones.
   CSS scoped: las clases de detalle se redeclaran aquí (NO se heredan).
   Calco 1:1 de las clases reusadas de ID_1001d.razor.css.
*/

/* ===== FILA DE DATOS (calco del patrón de detalle) ===== */
.dato-row[b-hgqq8tnpre] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items */
    width: 100%;                              /* Ancho completo */
}

/* ===== LABEL ALINEADA ===== */
.label-alineada[b-hgqq8tnpre] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* ===== CONTENEDOR DE VALOR ===== */
.text-dato[b-hgqq8tnpre] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
}

/* ===== VALOR DE DETALLE (solo lectura) ===== */
.valor-detalle[b-hgqq8tnpre] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    line-height: 1.4;                         /* Altura de línea */
    color: #333333;                           /* Gris oscuro */
    overflow-wrap: anywhere;                  /* Texto largo sin espacios no desborda en móvil */
}

/* ===== MENSAJE SIN DATOS ===== */
.costeo-sin-datos[b-hgqq8tnpre] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #888888;                           /* Gris medio */
    font-style: italic;                       /* Cursiva: estado vacío */
}

/* ===== LIGA "CAPTURAR LEVANTAMIENTO" (override de color sobre .boton) =====
   Acentúa con el azul del Cotizador para señalar que cruza al módulo de costeo. */
.btn-capturar-lev[b-hgqq8tnpre] {
    background-color: var(--color-coti);      /* Azul Cotizador */
    color: #FFFFFF;                           /* Texto blanco */
    margin-left: 0;                           /* Anula el margen izquierdo de .boton */
}

.btn-capturar-lev:hover[b-hgqq8tnpre] {
    background-color: var(--color-coti-oscuro); /* Azul Cotizador más oscuro al hover */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-hgqq8tnpre] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }

    .text-dato[b-hgqq8tnpre] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqConsulta.razor.rz.scp.css */
/*
   ReqConsulta.razor.css
   Consulta de requerimientos con filtros y listado.
   Muestra estado, prioridad y acciones disponibles.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-fq9k7x250v] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-fq9k7x250v] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== BARRA DE PAGINADOR ===== */
/* Se toma del app.css */

/* ===== LISTA DE REQUERIMIENTOS ===== */
.requerimientos-list[b-fq9k7x250v] {
    background-color: #FFFFFF;                /* Fondo blanco */
    padding: 0;                               /* Sin padding */
    margin: 0;                                /* Sin margen */
}

.req-item[b-fq9k7x250v] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0.6rem;                              /* Espacio entre elementos (~10px) */
    padding: 0.6rem 0;                        /* Padding vertical (~10px) */
    border-bottom: 1px solid #A9A9A9;         /* Borde inferior gris medio (DarkGray) */
    background-color: #FFFFFF;                /* Fondo blanco */
    line-height: var(--line-height-compacto); /* Altura de línea compacta */
}

.req-item:nth-child(even)[b-fq9k7x250v] {
    background-color: #FFFFFF;                /* Fondo blanco para pares */
}

.req-left-panel[b-fq9k7x250v] {
    text-align: center;                       /* Centrado horizontal */
    flex-shrink: 0;                           /* No encoge */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: center;                      /* Centrado horizontal */
    gap: 0.31rem;                             /* Espacio entre elementos (5px) */
}

.label-urge[b-fq9k7x250v] {
    padding: 0.19rem 1.31rem;                 /* Padding (3px 21px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 5rem;                              /* Ancho fijo (80px) */
    margin-top: 0.5rem;                       /* Margen superior (8px) */
}

.label-prioridad-small[b-fq9k7x250v] {
    margin-top: 0.4rem;                       /* Separación entre URGE y combo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.ddl-prioridad[b-fq9k7x250v] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 5rem;                              /* Ancho fijo (80px) */
}

/* ===== INFORMACIÓN DEL REQ ===== */
.req-content[b-fq9k7x250v] {
    flex: 1;                                  /* Ocupa espacio restante */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.req-header[b-fq9k7x250v] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

.req-motivo[b-fq9k7x250v] {
    margin-bottom: 0.3rem;                    /* Margen inferior (5px) */
}

.req-info[b-fq9k7x250v] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

.req-titulo[b-fq9k7x250v] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
    margin-right: 0.63rem;                    /* Margen derecho (10px) */
}

.req-titulo:hover[b-fq9k7x250v] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== LABELS DE ESTADO ===== */
.status-xautorizar[b-fq9k7x250v] {
    color: #990066;                           /* Magenta oscuro */
}

.status-autoriza[b-fq9k7x250v] {
    color: #990066;                           /* Magenta oscuro */
    margin-right: 0.5rem;                     /* Para que otra etiqueta (TARDE por ejem) no quede pegada */
}

.status-sin-asignar[b-fq9k7x250v] {
    color: #808080;                           /* Gris */
}

.status-en-proceso[b-fq9k7x250v] {
    color: var(--color-home);                 /* Verde - variable del sistema */
}

.status-terminado[b-fq9k7x250v] {
    background-color: #00C000;                /* Verde brillante */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-rechazado[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-cancelado[b-fq9k7x250v] {
    color: #FF0000;                           /* Rojo */
}

.status-super[b-fq9k7x250v] {
    background-color: #800080;                /* Morado (Purple) */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-tarde-proceso[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-tarde-terminado[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.link-devuelto[b-fq9k7x250v] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin-left: 0;                           /* Ajustar según página */
}

.link-confirmar[b-fq9k7x250v] {
    color: #C00000;                           /* Rojo oscuro */
    font-weight: bold;                        /* Negritas */
    text-decoration: none;                    /* Sin subrayado */
}

a.link-confirmar:hover[b-fq9k7x250v] {
    text-decoration: underline;               /* Subrayado al hover solo en links */
}

span.link-confirmar[b-fq9k7x250v] {
    cursor: default;                          /* Cursor normal para spans */
}

.label-small[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
}

.label-procesa[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.text-procesa[b-fq9k7x250v] {
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

/* ===== ACCIONES Y BOTONES ===== */
.req-actions[b-fq9k7x250v] {
    display: flex;                            /* Flexbox */
    gap: 0.5rem;                              /* Espacio entre botones (8px) */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Centrado vertical */
}

.link-log[b-fq9k7x250v] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
}

.link-depende[b-fq9k7x250v] {
    color: #0066CC;                           /* Azul link */
}

/* El formato general lo toma de app.css (boton-chico) */

.btn-autorizar[b-fq9k7x250v] {
    background-color: #990066;                /* Morado / Magenta Oscuro */
    color: #FFFFFF;                           /* Blanco */
}

.btn-asignar[b-fq9k7x250v] {
    background-color: #FADD75;                /* Amarillo Crema / Arena */
}

.btn-encadenar[b-fq9k7x250v] {
    background-color: #7581FA;                /* Azul Lavanda / Pervinca */
}

.btn-terminado[b-fq9k7x250v] {
    background-color: #72FA98;                /* Verde Menta Brillante */
}

.btn-rechazar[b-fq9k7x250v] {
    background-color: #FF7C80;                /* Coral / Rojo Suave */
}

.btn-cancelar[b-fq9k7x250v] {
    background-color: #66677A;                /* Gris Azulado / Pizarra */
    color: #FFFFFF;                           /* Blanco */
}

.btn-urge[b-fq9k7x250v] {
    background-color: #FF5757;                /* Rojo Intenso / Alerta */
    color: #FFFFFF;                           /* Blanco */
}

/* Spinner del módulo */
.sirei-spinner[b-fq9k7x250v] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqDetalle.razor.rz.scp.css */
/*
   ReqDetalle.razor.css
   Detalle de un requerimiento con estado y acciones.
   Colores exactos de ReqConsulta.
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-tlnfjub6ki]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-tlnfjub6ki]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-tlnfjub6ki] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-tlnfjub6ki] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-tlnfjub6ki] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== PANEL OK (Datos del req) ===== */
.panel-ok[b-tlnfjub6ki] {
    width: 100%;                              /* Ancho completo */
}

/* ===== LISTA DE CAUSAS (sin resultados) ===== */
.lista-causas[b-tlnfjub6ki] {
    display: inline-block;                    /* Bloque inline */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-tlnfjub6ki] {
    padding-left: 0.5rem;                     /* Sangría izquierda (8px) */
}

/* ===== ENCABEZADO: Título y descripción ===== */
.header-box[b-tlnfjub6ki] {
    border: 1px solid #DCF0DC;                /* Borde verde claro */
    padding: 0.5rem;                          /* Padding (8px) */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    margin-top: 1rem;                         /* Margen superior (16px) */
    background-color: #FFFFFF;                /* Fondo blanco */
    text-align: center;                       /* Centrado */
}

.titulo-req[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
    color: #000000;                           /* Negro */
}

.desc-req[b-tlnfjub6ki] {
    font-size: var(--texto-10pt);             /* Tamaño 11pt (igual que text-dato/Motivo) */
    color: #000000;                           /* Negro */
    margin-top: 0.31rem;                      /* Margen superior (5px) */
    white-space: pre-line;                    /* Respeta saltos de línea de BD */
}

/* ===== TIEMPO MÁXIMO DE ENTREGA ===== */
.tme-section[b-tlnfjub6ki] {
    margin-bottom: 1.5rem;                    /* Margen inferior (24px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt (+1pt) */
    text-align: center;                       /* Centrado */
}

.tme-label[b-tlnfjub6ki] {
    font-weight: normal;                      /* Sin negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-value[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-unit[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

/* ===== LINKS DE POLÍTICA Y EJEMPLO ===== */
.link-politica[b-tlnfjub6ki],
.link-ejemplo[b-tlnfjub6ki] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #0066CC;                           /* Azul link */
    text-decoration: none;                    /* Sin subrayado */
}

.link-politica:hover[b-tlnfjub6ki],
.link-ejemplo:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

.texto-deshabilitado[b-tlnfjub6ki] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #808080;                           /* Gris */
    cursor: default;                          /* Cursor normal */
}

/* ===== CONTROLES SECTION ===== */
.controles-section[b-tlnfjub6ki] {
    display: flex;                            /* Flexbox */
    align-items: flex-start;                  /* Alineado arriba */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
    margin-top: 0.94rem;                      /* Margen superior (15px) */
}

.left-controls[b-tlnfjub6ki] {
    width: 6.25rem;                           /* Ancho fijo (100px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: center;                      /* Centrado horizontal */
}

/* ===== LABEL URGE ===== */
.label-urge[b-tlnfjub6ki] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    padding: 0.19rem 1.31rem;                 /* Padding (3px 21px) */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt (Consulta=8pt +1pt) */
    text-align: center;                       /* Centrado */
    border: none;                             /* Sin borde */
    border-radius: 4px;                       /* Bordes redondeados */
    width: 6.25rem;                           /* Ancho (100px) */
}

.label-prioridad[b-tlnfjub6ki] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt (Consulta=8pt +1pt) */
    font-weight: normal;                      /* Sin negritas */
}

.ddl-prioridad[b-tlnfjub6ki] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt (Consulta=8pt +1pt) */
    padding: 0.125rem;                        /* Padding (2px) */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
}

/* ===== BOTONES DE ACCIONES ===== */
/* Usa .boton de app.css (9pt) - aquí solo se definen los colores */

.btn-autorizar[b-tlnfjub6ki] {
    background-color: #990066;                /* Magenta oscuro */
    color: #FFFFFF;                           /* Blanco */
}

.btn-asignar[b-tlnfjub6ki] {
    background-color: #FADD75;                /* Amarillo crema */
}

.btn-encadenar[b-tlnfjub6ki] {
    background-color: #7581FA;                /* Azul lavanda */
}

.btn-terminado[b-tlnfjub6ki] {
    background-color: #72FA98;                /* Verde menta */
}

.btn-rechazar[b-tlnfjub6ki] {
    background-color: #FA7575;                /* Rojo suave */
}

.btn-cancelar[b-tlnfjub6ki] {
    background-color: #66677A;                /* Gris azulado */
    color: #FFFFFF;                           /* Blanco */
}

.btn-urge[b-tlnfjub6ki] {
    background-color: #FF6969;                /* Rojo coral */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== ESTATUS SECTION ===== */
.label-estatus[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt (+1pt) */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
}

/* ===== ETIQUETAS DE ESTADO ===== */
.etiqueta[b-tlnfjub6ki] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    display: inline-block;                    /* Bloque inline */
    padding: 0.1rem 0.4rem;                   /* Padding ajustable */
}

.etiqueta-solo-texto[b-tlnfjub6ki] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
}

.status-xautorizar[b-tlnfjub6ki] {
    color: #990066;                           /* Magenta oscuro */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt, Detalle=+1pt) */
}

.status-sublabel[b-tlnfjub6ki] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt (+1pt) */
    color: #990066;                           /* Magenta oscuro */
}

.status-sin-asignar[b-tlnfjub6ki] {
    color: #808080;                           /* Gris */
}

.status-en-proceso[b-tlnfjub6ki] {
    color: var(--color-home);                 /* Verde - variable del sistema */
}

.status-terminado[b-tlnfjub6ki] {
    background-color: #00C000;                /* Verde brillante */
    color: #FFFFFF;                           /* Blanco */
}

.status-rechazado[b-tlnfjub6ki] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

.status-cancelado[b-tlnfjub6ki] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
}

.status-super[b-tlnfjub6ki] {
    background-color: #800080;                /* Morado (Purple) */
    color: #FFFFFF;                           /* Blanco */
}

.status-tarde-terminado[b-tlnfjub6ki] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

.link-devuelto[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
    color: #FF0000;                           /* Rojo */
    text-decoration: none;                    /* Sin subrayado */
}

.link-devuelto:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

.link-confirmar[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    color: #C00000;                           /* Rojo oscuro */
    text-decoration: none;                    /* Sin subrayado */
}

a.link-confirmar:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover solo en links */
}

span.link-confirmar[b-tlnfjub6ki] {
    cursor: default;                          /* Cursor normal para spans */
}

.link-ver-enc[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    color: #800080;                           /* Morado (Purple) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-ver-enc:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== GRUPO xAUTORIZAR (sin flex:1, solo agrupa) ===== */
.grupo-xaut[b-tlnfjub6ki] {
    display: inline-flex;                     /* Agrupa en línea */
    align-items: center;                      /* Alineado vertical */
    gap: 0.3rem;                              /* Espaciado interno entre spans */
    flex-wrap: wrap;                          /* Wrap en móvil */
}

/* ===== FECHA MAX AUTORIZAR ===== */
.label-fma[b-tlnfjub6ki] {
    color: #990066;                           /* Magenta oscuro */
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
}

.fecha-fma[b-tlnfjub6ki] {
    color: #990066;                           /* Magenta oscuro */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
}

/* ===== LINKS SECTION (Obstruye, Depende, Inconformidades) ===== */
.link-depende[b-tlnfjub6ki] {
    color: #0066CC;                           /* Azul link */
    text-decoration: none;                    /* Sin subrayado */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
}

.link-depende:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== DATOS SECTION ===== */
.datos-section[b-tlnfjub6ki] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
}

/* Oculta dato-row vacíos (cuando @if interno es false, el div queda vacío) */
.dato-row:empty[b-tlnfjub6ki] {
    display: none;                            /* No ocupa espacio */
}

.dato-row[b-tlnfjub6ki] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Alineado vertical centrado */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items (row col) */
    width: 100%;                              /* Ancho completo */
}

.label-alineada[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

.label-procesa[b-tlnfjub6ki] {
    color: #CC0000;                           /* Rojo */
}

.text-dato[b-tlnfjub6ki] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (Consulta=10pt +1pt) */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: middle;                   /* Alineado vertical medio */
}

.label-negociada[b-tlnfjub6ki] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt (+1pt) */
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    padding: 0.125rem 0.375rem;               /* Padding (2px 6px) */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
}

.link-log[b-tlnfjub6ki] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt (+1pt extra por legibilidad) */
    color: #696969;                           /* Gris oscuro (DimGray) */
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-log:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== FORMULARIO DINÁMICO ===== */
.formulario-dinamico[b-tlnfjub6ki] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    margin-bottom: 0rem;                   /* Margen inferior (15px) */
}
    .form-pendiente-creacion[b-tlnfjub6ki] {
        background-color: #FFFACD;                /* Amarillo pálido (LemonChiffon) */
        border: 2px dashed #FFA500;               /* Borde naranja punteado */
        padding: 0.94rem;                         /* Padding (15px) */
        text-align: center;                       /* Centrado */
        border-radius: 4px;                       /* Bordes redondeados */
    }
    .form-pendiente-creacion strong[b-tlnfjub6ki] {
        color: #FF8C00;                           /* Naranja oscuro (DarkOrange) */
        font-size: var(--texto-11pt);             /* Tamaño 11pt */
    }
    .form-pendiente-creacion p[b-tlnfjub6ki] {
        margin-bottom: 0;                         /* Quitar espacio extra abajo */
    }



/* ===== ANEXOS SECTION ===== */
.anexos-section[b-tlnfjub6ki] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
}

.anexos-lista[b-tlnfjub6ki] {
    display: inline;                          /* Inline */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (+1pt) */
}

.link-anexo[b-tlnfjub6ki] {
    color: #0000FF;                           /* Azul (Blue) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-anexo:hover[b-tlnfjub6ki] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== ESFUERZO Y RESOLUCIÓN ===== */
.esfuerzo-section[b-tlnfjub6ki] {
    margin-top: 0;                            /* Sin margen (el formulario-dinamico ya da separación) */
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
}

.label-esfuerzo[b-tlnfjub6ki] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.text-esfuerzo[b-tlnfjub6ki] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (+1pt) */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.resolucion-section[b-tlnfjub6ki] {
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
}

.text-resolucion[b-tlnfjub6ki] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (+1pt) */
}

/* ===== FILA OBS/DEP/INC ===== */
.row-links-content[b-tlnfjub6ki] {
    display: flex;                            /* Flexbox inline */
    flex-wrap: wrap;                          /* Wrap en móvil */
    align-items: center;                      /* Alineado vertical */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items */
}

.link-label-inline[b-tlnfjub6ki] {
    font-weight: bold;                        /* Negritas como label-alineada */
    font-size: var(--texto-9pt);              /* Mismo tamaño que label-alineada */
    flex-shrink: 0;                           /* No encoge */
}

.solo-en-celular[b-tlnfjub6ki] {
    display: none;                            /* Oculto en desktop */
}

/* ===== WRAPPER DEL COMPONENTE DE COMENTARIOS ===== */
/* Alinea el componente con los valores de los datos del req en desktop.
   El indent es: ancho del label (10rem) + margen derecho (0.625rem) = 10.625rem.
   En celular la media query quita este indent para que ocupe todo el ancho.
   IMPORTANTE: esta regla debe estar ANTES del @media para que la override
   del media query tome precedencia en pantallas chicas. */
.comentarios-wrapper[b-tlnfjub6ki] {
    margin-left: 10.625rem;                   /* 170px - alinea con .text-dato */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-tlnfjub6ki] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.125rem;              /* Margen inferior (2px) */
    }

    .text-dato[b-tlnfjub6ki] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    /* Obs/Dep/Inc: contenido fluye sin spacer en móvil */
    .row-links-content[b-tlnfjub6ki] {
        flex-wrap: nowrap;                    /* Sin wrap, todo en una línea */
    }

    .ocultar-en-celular[b-tlnfjub6ki] {
        display: none;                        /* Oculta texto largo */
    }

    .solo-en-celular[b-tlnfjub6ki] {
        display: inline;                      /* Muestra texto corto */
    }

    /* Botones: wrap con espaciado */
    .dato-row .boton[b-tlnfjub6ki] {
        margin-bottom: 0.25rem;               /* Espacio al hacer wrap */
    }

    /* Política y ejemplo juntos en nueva línea en celular */
    .tme-links[b-tlnfjub6ki] {
        display: block;                       /* Nueva línea */
        margin-top: 0.25rem;                  /* Separación vertical (4px) */
    }

    .tme-links .link-politica[b-tlnfjub6ki],
    .tme-links .texto-deshabilitado:first-child[b-tlnfjub6ki] {
        margin-left: 0;                       /* Sin margen izquierdo el primero */
    }

    .tme-links .link-ejemplo[b-tlnfjub6ki],
    .tme-links .texto-deshabilitado + .texto-deshabilitado[b-tlnfjub6ki] {
        margin-left: 0.5rem;                  /* Espacio entre elementos */
    }

    /* Comentarios: en celular ocupa todo el ancho sin indent */
    .comentarios-wrapper[b-tlnfjub6ki] {
        margin-left: 0;                       /* Sin indent en movil */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-tlnfjub6ki] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqDetalleRE.razor.rz.scp.css */
/*
   ReqDetalleRE.razor.css
   Detalle de requerimiento recurrente.
   Módulo: Requerimientos (color amarillo --color-reqs)
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-1j6u4edoe4]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-1j6u4edoe4]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-1j6u4edoe4] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-1j6u4edoe4] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-1j6u4edoe4] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== PANEL OK (contenedor de datos) ===== */
.panel-ok[b-1j6u4edoe4] {
    width: 100%;                              /* Ancho completo */
}

/* ===== ENCABEZADO: Título y descripción ===== */
.header-box[b-1j6u4edoe4] {
    border: 1px solid #DCF0DC;                /* Borde verde claro */
    padding: 0.5rem;                          /* Padding (8px) */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    margin-top: 1rem;                         /* Margen superior (16px) */
    background-color: #FFFFFF;                /* Fondo blanco */
    text-align: center;                       /* Centrado */
}

.titulo-req[b-1j6u4edoe4] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    color: #000000;                           /* Negro */
}

.desc-req[b-1j6u4edoe4] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt (igual que ReqDetalle) */
    color: #000000;                           /* Negro */
    margin-top: 0.31rem;                      /* Margen superior (5px) */
    white-space: pre-line;                    /* Respeta saltos de línea */
}

/* ===== TIEMPO MÁXIMO DE ENTREGA ===== */
.tme-section[b-1j6u4edoe4] {
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt (igual que ReqDetalle) */
    text-align: center;                       /* Centrado */
}

.tme-label[b-1j6u4edoe4] {
    font-weight: normal;                      /* Sin negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-value[b-1j6u4edoe4] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-unit[b-1j6u4edoe4] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

/* ===== LINKS DE POLÍTICA Y EJEMPLO ===== */
.link-politica[b-1j6u4edoe4],
.link-ejemplo[b-1j6u4edoe4] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #0066CC;                           /* Azul link */
    text-decoration: none;                    /* Sin subrayado */
}

.link-politica:hover[b-1j6u4edoe4],
.link-ejemplo:hover[b-1j6u4edoe4] {
    text-decoration: underline;               /* Subrayado al hover */
}

.texto-deshabilitado[b-1j6u4edoe4] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #808080;                           /* Gris */
    cursor: default;                          /* Cursor normal */
}

/* ===== FILAS DE DATOS ===== */
.dato-row[b-1j6u4edoe4] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    align-items: center;                      /* Alineado vertical centro (igual que ReqDetalle) */
    gap: 0.15rem 0.4rem;                      /* Espaciado entre items (row col, igual que ReqDetalle) */
    width: 100%;                              /* Ancho completo */
}

.dato-row:empty[b-1j6u4edoe4] {
    display: none;                            /* Oculta filas vacías (igual que ReqDetalle) */
}

/* ===== WRAPPER PARA LINKS DE TME ===== */
.tme-links[b-1j6u4edoe4] {
    display: inline;                          /* Inline (igual que ReqDetalle) */
}

.label-alineada[b-1j6u4edoe4] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

.label-estatus[b-1j6u4edoe4] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt (igual que ReqDetalle) */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
}

.label-procesa[b-1j6u4edoe4] {
    color: #CC0000;                           /* Rojo */
}

.label-recurrencia[b-1j6u4edoe4] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.label-motivo-inactivo[b-1j6u4edoe4] {
    color: #808080;                           /* Gris */
}

.text-dato[b-1j6u4edoe4] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt (igual que ReqDetalle) */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: middle;                   /* Alineado vertical medio */
}

.text-motivo-inactivo[b-1j6u4edoe4] {
    color: #808080;                           /* Gris */
    font-style: italic;                       /* Itálicas */
}

/* ===== ETIQUETAS DE ESTATUS ===== */
.etiqueta[b-1j6u4edoe4] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    display: inline-block;                    /* Bloque inline */
    padding: 0.1rem 0.4rem;                   /* Padding */
}

.status-activo[b-1j6u4edoe4] {
    background-color: #00C000;                /* Verde brillante */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    border-radius: 4px;                       /* Bordes redondeados */
}

.status-inactivo[b-1j6u4edoe4] {
    background-color: #808080;                /* Gris */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    border-radius: 4px;                       /* Bordes redondeados */
}

/* ===== LINK AL LOG ===== */
.link-log[b-1j6u4edoe4] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt (igual que ReqDetalle) */
    color: #696969;                           /* Gris oscuro (DimGray) */
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-log:hover[b-1j6u4edoe4] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== FORMULARIO DINÁMICO ===== */
.formulario-dinamico[b-1j6u4edoe4] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    margin-bottom: 0rem;                      /* Sin margen inferior (igual que ReqDetalle) */
}

.form-pendiente-creacion[b-1j6u4edoe4] {
    background-color: #FFFACD;                /* Amarillo pálido (LemonChiffon) */
    border: 2px dashed #FFA500;               /* Borde naranja punteado */
    padding: 0.94rem;                         /* Padding (15px) */
    text-align: center;                       /* Centrado */
    border-radius: 4px;                       /* Bordes redondeados */
}

.form-pendiente-creacion strong[b-1j6u4edoe4] {
    color: #FF8C00;                           /* Naranja oscuro (DarkOrange) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.form-pendiente-creacion p[b-1j6u4edoe4] {
    margin-bottom: 0;                         /* Quitar espacio extra abajo */
}








/* ===== ANEXOS ===== */
.anexos-section[b-1j6u4edoe4] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
}

.anexos-lista[b-1j6u4edoe4] {
    display: inline;                          /* Inline */
    font-size: var(--texto-11pt);             /* Tamaño 11pt (igual que ReqDetalle) */
}

.link-anexo[b-1j6u4edoe4] {
    color: #0000FF;                           /* Azul (Blue) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-anexo:hover[b-1j6u4edoe4] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== LISTA DE CAUSAS (mensaje de error) ===== */
.lista-causas[b-1j6u4edoe4] {
    display: inline-block;                    /* Bloque inline */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-1j6u4edoe4] {
    padding-left: 0.5rem;                     /* Sangría izquierda (8px) */
}

/* ===== BOTONES ===== */
.botones-section[b-1j6u4edoe4] {
    margin-top: 1.25rem;                      /* Margen superior (20px) */
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
    text-align: center;                       /* Centrado */
}

/* Usa .boton de app.css (9pt) - aquí solo colores */
.btn-desactivar[b-1j6u4edoe4] {
    background-color: #CC0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-1j6u4edoe4] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.125rem;              /* Margen inferior (2px) */
    }

    .text-dato[b-1j6u4edoe4] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    /* Política y ejemplo juntos en nueva línea en celular */
    .tme-links[b-1j6u4edoe4] {
        display: block;                       /* Nueva línea */
        margin-top: 0.25rem;                  /* Separación vertical (4px) */
    }

    .tme-links .link-politica[b-1j6u4edoe4],
    .tme-links .texto-deshabilitado:first-child[b-1j6u4edoe4] {
        margin-left: 0;                       /* Sin margen izquierdo el primero */
    }

    .tme-links .link-ejemplo[b-1j6u4edoe4],
    .tme-links .texto-deshabilitado + .texto-deshabilitado[b-1j6u4edoe4] {
        margin-left: 0.5rem;                  /* Espacio entre elementos */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-1j6u4edoe4] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqEncadena.razor.rz.scp.css */
/*
   ReqEncadena.razor.css
   Encadenamiento de requerimientos (dependencias).
   Listas violeta y amarilla para relaciones de dependencia.
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-j7s8fjl9dh]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-j7s8fjl9dh]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-j7s8fjl9dh] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-j7s8fjl9dh] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-j7s8fjl9dh] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== MENSAJE DE ERROR ===== */
.error-list[b-j7s8fjl9dh] {
    margin-top: 1.25rem;                      /* Margen superior (20px) */
    text-align: left;                         /* Alineado izquierda */
    display: inline-block;                    /* Bloque inline */
}

.error-item[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    gap: 0.94rem;                             /* Espacio entre elementos (15px) */
    margin-bottom: 1.25rem;                   /* Margen inferior (20px) */
}

.error-item span[b-j7s8fjl9dh] {
    font-weight: bold;                        /* Negritas */
    min-width: 1.875rem;                      /* Ancho mínimo (30px) */
}

.error-item p[b-j7s8fjl9dh] {
    margin: 0;                                /* Sin margen */
    max-width: 31.25rem;                      /* Ancho máximo (500px) */
}

/* ===== PAGINACIÓN (variantes específicas) ===== */
.barra-paginacion-dependen[b-j7s8fjl9dh],
.barra-paginacion-depende[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    padding: 0.5rem 0.625rem;                 /* Padding (8px 10px) */
    background-color: #FFFFFF;                /* Fondo blanco */
}

.contador-texto[b-j7s8fjl9dh] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #000000;                           /* Negro */
}

/* ===== LISTA VIOLETA (reqs que DEPENDEN de él) ===== */
.requerimientos-list-dependen[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0;                                   /* Sin espacio entre items */
}

.req-item-dependen[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    padding: 0.25rem 0;                       /* Padding compacto (4px 0) */
    border-bottom: solid 1px #808080;         /* Borde inferior gris */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    min-height: 2.5rem;                       /* Altura mínima (40px) */
    line-height: 1;                           /* Altura de línea */
}

.req-item-dependen:nth-child(odd)[b-j7s8fjl9dh] {
    background-color: #F7F6F3;                /* Beige claro */
    color: #333333;                           /* Gris oscuro */
}

.req-item-dependen:nth-child(even)[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Blanco */
    color: #284775;                           /* Azul oscuro */
}

.req-left-panel-dependen[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: flex-end;                    /* Alineado derecha */
    padding-right: 0.625rem;                  /* Padding derecho (10px) */
    min-width: 3.75rem;                       /* Ancho mínimo (60px) */
}

/* ===== BOTÓN QUITAR (violeta) ===== */
/* Usa .boton-chico de app.css - aquí solo colores */
.btn-quitar-dependen[b-j7s8fjl9dh] {
    background-color: #CC99FF;                /* Violeta */
}

/* ===== LISTA AMARILLA (reqs DE LOS QUE DEPENDE) ===== */
.requerimientos-list-depende[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0;                                   /* Sin espacio */
}

.req-item-depende[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    padding: 0.25rem 0;                       /* Padding compacto (4px 0) */
    border-bottom: solid 1px #808080;         /* Borde inferior gris */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    min-height: 2.5rem;                       /* Altura mínima (40px) */
    line-height: 1;                           /* Altura de línea */
}

.req-item-depende:nth-child(odd)[b-j7s8fjl9dh] {
    background-color: #F7F6F3;                /* Beige claro */
    color: #333333;                           /* Gris oscuro */
}

.req-item-depende:nth-child(even)[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Blanco */
    color: #284775;                           /* Azul oscuro */
}

.req-left-panel-depende[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: flex-end;                    /* Alineado derecha */
    padding-right: 0.625rem;                  /* Padding derecho (10px) */
    min-width: 3.75rem;                       /* Ancho mínimo (60px) */
}

/* ===== BOTÓN QUITAR (amarillo) ===== */
/* Usa .boton-chico de app.css - aquí solo colores */
.btn-quitar-depende[b-j7s8fjl9dh] {
    background-color: #FFD700;                /* Amarillo */
}

/* ===== CONTENIDO DEL REQUERIMIENTO (común) ===== */
.req-content[b-j7s8fjl9dh] {
    flex: 1;                                  /* Ocupa espacio restante */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0.188rem;                            /* Gap reducido (3px) */
}

.req-fecha[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Espacio (6px) */
}

.req-header[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio (8px) */
    flex-wrap: wrap;                          /* Permite wrap */
}

.req-titulo[b-j7s8fjl9dh] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.req-titulo:hover[b-j7s8fjl9dh] {
    text-decoration: underline;               /* Subrayado al hover */
}

.req-motivo[b-j7s8fjl9dh] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #333333;                           /* Gris oscuro */
}

.req-info[b-j7s8fjl9dh] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Espacio (6px) */
    flex-wrap: wrap;                          /* Permite wrap */
}

/* ===== LABELS Y LINKS ===== */
.label-small[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
}

.label-procesa[b-j7s8fjl9dh] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.text-procesa[b-j7s8fjl9dh] {
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.text-prioridad[b-j7s8fjl9dh] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
}

.label-urge-inline[b-j7s8fjl9dh] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    padding: 1px 4px;                         /* Padding */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    border-radius: 2px;                       /* Bordes redondeados */
}

.link-log[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
    text-decoration: none;                    /* Sin subrayado */
}

.link-log:hover[b-j7s8fjl9dh] {
    text-decoration: underline;               /* Subrayado al hover */
}

.link-depende[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #0066CC;                           /* Azul link */
    text-decoration: none;                    /* Sin subrayado */
}

.link-depende:hover[b-j7s8fjl9dh] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== LABELS DE ESTADO ===== */
.status-label[b-j7s8fjl9dh] {
    padding: 1px 0.375rem;                    /* Padding (1px 6px) */
    border-radius: 3px;                       /* Bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    white-space: nowrap;                      /* Sin wrap */
}

.status-sin-asignar[b-j7s8fjl9dh] {
    color: #808080;                           /* Gris */
}

.status-en-proceso[b-j7s8fjl9dh] {
    color: #00C000;                           /* Verde brillante */
}

.status-terminado[b-j7s8fjl9dh] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.status-rechazado[b-j7s8fjl9dh] {
    color: #B22222;                           /* Rojo ladrillo (FireBrick) */
}

.status-cancelado[b-j7s8fjl9dh] {
    color: #FF0000;                           /* Rojo */
}

.status-super[b-j7s8fjl9dh] {
    background-color: #800080;                /* Morado (Purple) */
    color: #FFFFFF;                           /* Blanco */
}

.status-tarde-proceso[b-j7s8fjl9dh] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

.status-tarde-terminado[b-j7s8fjl9dh] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

.link-devuelto[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #FF0000;                           /* Rojo */
    text-decoration: none;                    /* Sin subrayado */
}

.link-devuelto:hover[b-j7s8fjl9dh] {
    text-decoration: underline;               /* Subrayado al hover */
}

.link-confirmar[b-j7s8fjl9dh] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #C00000;                           /* Rojo oscuro */
    text-decoration: none;                    /* Sin subrayado */
}

.link-confirmar:hover[b-j7s8fjl9dh] {
    text-decoration: underline;               /* Subrayado al hover */
}

/* ===== MENSAJES VACÍOS ===== */
.mensaje-vacio-dependen[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Fondo blanco */
    padding: 0.94rem;                         /* Padding (15px) */
    text-align: center;                       /* Centrado */
    color: #800080;                           /* Morado (Purple) para "dependen" */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

.mensaje-vacio-dependen p[b-j7s8fjl9dh] {
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

.mensaje-vacio-depende[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Fondo blanco */
    padding: 0.94rem;                         /* Padding (15px) */
    text-align: center;                       /* Centrado */
    color: #FFA500;                           /* Naranja (Orange) para "depende" */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

.mensaje-vacio-depende p[b-j7s8fjl9dh] {
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

/* ===== BARRAS SEPARADORAS ===== */

/* Barra VIOLETA (para "dependen") */
.barra-separadora-dependen[b-j7s8fjl9dh] {
    background-color: #CC99FF;                /* Violeta exacto del legacy */
    padding: 0.125rem 0.94rem;                /* Padding (2px 15px) */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

/* Usa .boton-chico de app.css - aquí solo colores */
.btn-agregar-dependen[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* Barra AMARILLA (para "depende") */
.barra-separadora-depende[b-j7s8fjl9dh] {
    background-color: #FFD700;                /* Amarillo exacto del legacy */
    padding: 0.125rem 0.94rem;                /* Padding (2px 15px) */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

/* Usa .boton-chico de app.css - aquí solo colores */
.btn-agregar-depende[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== REQUERIMIENTO CENTRAL ===== */
.req-central[b-j7s8fjl9dh] {
    background-color: #FFFFFF;                /* Fondo blanco */
    border: 1px solid #DDDDDD;                /* Borde gris claro */
    padding: 0.625rem;                        /* Padding (10px) */
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

.req-central-content[b-j7s8fjl9dh] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0.188rem;                            /* Gap (3px) */
}

/* ===== LISTA DE CAUSAS ===== */
.lista-causas[b-j7s8fjl9dh] {
    display: inline-block;                    /* Bloque inline */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-j7s8fjl9dh] {
    padding-left: 0.5rem;                     /* Sangría izquierda (8px) */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .req-encadena-container[b-j7s8fjl9dh] {
        padding: 0.625rem;                    /* Padding (10px) */
    }

    .barra-separadora-dependen[b-j7s8fjl9dh],
    .barra-separadora-depende[b-j7s8fjl9dh] {
        flex-direction: column;               /* Apilado vertical en móvil */
        gap: 0.5rem;                          /* Espacio (8px) */
        text-align: center;                   /* Centrado */
    }

    .modal-content[b-j7s8fjl9dh] {
        width: 95%;                           /* Ancho casi completo */
    }

    .req-header[b-j7s8fjl9dh],
    .req-info[b-j7s8fjl9dh] {
        flex-direction: column;               /* Apilado vertical */
        align-items: flex-start;              /* Alineado izquierda */
        gap: 0.25rem;                         /* Espacio (4px) */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-j7s8fjl9dh] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqHistorial.razor.rz.scp.css */
/*
   ReqHistorial.razor.css
   Historial de eventos de un requerimiento.
   Lista cronológica de cambios con ejecutor y descripción.
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-nl0hts9jp2]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-nl0hts9jp2]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-nl0hts9jp2] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-nl0hts9jp2] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-nl0hts9jp2] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== LISTA DE EVENTOS ===== */
.log-list[b-nl0hts9jp2] {
    display: flex;                            /* Flexbox vertical */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0;                                   /* Sin espacio entre items */
}

.log-item[b-nl0hts9jp2] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0;                                   /* Sin espacio */
    padding: 0;                               /* Sin padding */
    border-bottom: solid 1px #808080;         /* Borde inferior gris */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    min-height: 3.125rem;                     /* Altura mínima (50px) */
}

/* ===== ALTERNANCIA DE COLORES ===== */
.log-item-normal[b-nl0hts9jp2] {
    background-color: #F7F6F3;                /* Beige claro */
    color: #333333;                           /* Gris oscuro */
}

.log-item-alterna[b-nl0hts9jp2] {
    background-color: #FFFFFF;                /* Blanco */
    color: #284775;                           /* Azul oscuro */
}

/* ===== COLUMNA DE FECHA ===== */
.log-fecha[b-nl0hts9jp2] {
    width: 6rem;                              /* Ancho para fecha apilada */
    text-align: right;                        /* Alineado derecha */
    vertical-align: top;                      /* Alineado arriba */
    padding: 0.5rem 0.625rem 0.5rem 0;        /* Padding (8px 10px 8px 0) */
    font-weight: normal;                      /* Sin negritas */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Fecha arriba, hora abajo */
}

.fecha-dia[b-nl0hts9jp2] {
    /* Fecha: 2026-02-05 */
}

.fecha-hora[b-nl0hts9jp2] {
    font-size: var(--texto-9pt);              /* Hora un poco más chica */
    color: #666;                              /* Gris para distinguir */
}

/* ===== SEPARADOR VISUAL ===== */
.log-separador[b-nl0hts9jp2] {
    width: 1.375rem;                          /* Ancho fijo (22px) */
    min-width: 1.375rem;                      /* Ancho mínimo (22px) */
}

/* ===== COLUMNA DE INFORMACIÓN ===== */
.log-info[b-nl0hts9jp2] {
    flex: 1;                                  /* Ocupa espacio restante */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: top;                      /* Alineado arriba */
    padding: 0.5rem 0.625rem;                 /* Padding (8px 10px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0.3125rem;                           /* Espacio entre elementos (5px) */
}

.log-ejecutor[b-nl0hts9jp2] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.log-evento[b-nl0hts9jp2] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== LISTA DE CAUSAS (sin resultados) ===== */
.lista-causas[b-nl0hts9jp2] {
    display: inline-block;                    /* Elemento inline-block */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-nl0hts9jp2] {
    padding-left: 0.5rem;                     /* Sangría izquierda */
}

/* Spinner del módulo */
.sirei-spinner[b-nl0hts9jp2] {
    --spinner-color: var(--color-reqs);
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    /* Separador más angosto en móvil */
    .log-separador[b-nl0hts9jp2] {
        width: 0.5rem;
        min-width: 0.5rem;
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqNuevo.razor.rz.scp.css */
/*
   ReqNuevo.razor.css
   Listado de tipos de requerimiento para crear nuevo.
   Muestra tipos disponibles con departamento y descripción.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-rdh6xj8lom] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-rdh6xj8lom] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== TEXTO DE INSTRUCCIÓN ===== */
.texto-instruccion[b-rdh6xj8lom] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque */
    margin-left: 5rem;                        /* Separación izquierda */
}

/* ===== LISTA DE REQUERIMIENTOS ===== */
.requerimientos-list[b-rdh6xj8lom] {
    background-color: white;                  /* Fondo blanco */
    padding: 0;                               /* Sin padding */
    margin: 0;                                /* Sin margin */
}

.req-item[b-rdh6xj8lom] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0.625rem;                            /* Espacio entre elementos (10px) */
    padding: 0.625rem 0;                      /* Padding vertical (10px) */
    border-bottom: solid 1px #000000;         /* Borde inferior negro */
    background-color: white;                  /* Fondo blanco */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== PANEL IZQUIERDO ===== */
.req-left-panel[b-rdh6xj8lom] {
    width: 6.25rem;                           /* Ancho fijo (100px) */
    text-align: right;                        /* Alineado derecha */
    flex-shrink: 0;                           /* No encoge */
    padding-top: 0.3125rem;                   /* Padding superior (5px) */
}

.req-depto[b-rdh6xj8lom] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: normal;                      /* Sin negritas */
    color: #8B0000;                           /* Rojo oscuro */
}

/* ===== CONTENIDO DEL REQ ===== */
.req-content[b-rdh6xj8lom] {
    flex: 1;                                  /* Ocupa espacio restante */
}

.req-titulo[b-rdh6xj8lom] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
    cursor: pointer;                          /* Cursor de mano */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.req-titulo:hover[b-rdh6xj8lom] {
    text-decoration: underline;               /* Subrayado al hover */
}

.req-descripcion[b-rdh6xj8lom] {
    font-weight: normal;                      /* Sin negritas */
    color: #808080;                           /* Gris */
    margin-top: 0.3125rem;                    /* Separación superior (5px) */
    display: block;                           /* Elemento de bloque */
}

/* Spinner del módulo */
.sirei-spinner[b-rdh6xj8lom] {
    --spinner-color: var(--color-reqs);
}

/* ===== RESPONSIVE: Móvil ===== */
@media (max-width: 768px) {
    .texto-instruccion[b-rdh6xj8lom] {
        display: none;
    }
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqNuevoCaptura.razor.rz.scp.css */
/*
   ReqNuevoCaptura.razor.css
   Crear nuevo requerimiento con formulario dinámico.
   Módulo: Requerimientos (color amarillo --color-reqs)
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-7ipdx6ru9h] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== PANEL OK (contenedor de datos) ===== */
.panel-ok[b-7ipdx6ru9h] {
    width: 100%;                              /* Ancho completo */
}

/* ===== ENCABEZADO: Título y descripción ===== */
.header-box[b-7ipdx6ru9h] {
    border: 1px solid #DCF0DC;                /* Borde verde claro */
    padding: 0.5rem;                          /* Padding (8px) */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    margin-top: 1rem;                         /* Margen superior (16px) */
    background-color: #FFFFFF;                /* Fondo blanco */
    text-align: center;                       /* Centrado */
}

.titulo-req[b-7ipdx6ru9h] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    color: #000000;                           /* Negro */
}

.desc-req[b-7ipdx6ru9h] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
    margin-top: 0.31rem;                      /* Margen superior (5px) */
    white-space: pre-line;                    /* Respeta saltos de línea */
}

/* ===== TIEMPO MÁXIMO DE ENTREGA (verde, centrado) ===== */
.tme-section[b-7ipdx6ru9h] {
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    text-align: center;                       /* Centrado */
}

.tme-label[b-7ipdx6ru9h] {
    font-weight: normal;                      /* Sin negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-value[b-7ipdx6ru9h] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

.tme-unit[b-7ipdx6ru9h] {
    font-weight: bold;                        /* Negritas */
    color: #228B22;                           /* Verde bosque (ForestGreen) */
}

/* ===== LINKS DE POLÍTICA Y EJEMPLO ===== */
.link-politica[b-7ipdx6ru9h],
.link-ejemplo[b-7ipdx6ru9h] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #0066CC;                           /* Azul link */
    text-decoration: none;                    /* Sin subrayado */
}

.link-politica:hover[b-7ipdx6ru9h],
.link-ejemplo:hover[b-7ipdx6ru9h] {
    text-decoration: underline;               /* Subrayado al hover */
}

.texto-deshabilitado[b-7ipdx6ru9h] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    color: #808080;                           /* Gris */
    cursor: default;                          /* Cursor normal */
}

/* ===== CAMPO URGENTE (alineado a la derecha) ===== */
.campo-urge[b-7ipdx6ru9h] {
    text-align: right;                        /* Alineado derecha */
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
    margin-right: 1.25rem;                    /* Margen derecho (20px) */
}

.campo-urge table[b-7ipdx6ru9h] {
    margin-left: auto;                        /* Empuja a la derecha */
    margin-right: 0;                          /* Sin margen derecho */
}

.campo-urge td[b-7ipdx6ru9h] {
    padding: 0.125rem;                        /* Padding (2px) */
}

.label-urge-normal[b-7ipdx6ru9h] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
}

.etiqueta[b-7ipdx6ru9h] {
    font-size: var(--texto-8pt);              /* Tamaño 9pt */
}

.nota-urge[b-7ipdx6ru9h] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #A9A9A9;                           /* Gris medio (DarkGray) */
    text-align: right;                        /* Alineado derecha */
    margin-top: 0.188rem;                     /* Margen superior (3px) */
}

/* ===== FILAS DE DATOS (estructura flex) ===== */
.dato-row[b-7ipdx6ru9h] {
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    width: 100%;                              /* Ancho completo */
    vertical-align: bottom;                   /* Alineado abajo */
}

.label-alineada[b-7ipdx6ru9h] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 10rem;                             /* Ancho fijo (160px) */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho (10px) */
    flex-shrink: 0;                           /* No encoge */
}

.label-procesa[b-7ipdx6ru9h] {
    color: #CC0000;                           /* Rojo */
}

.label-tiempo-entrega[b-7ipdx6ru9h] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #CC0000;                           /* Rojo */
    align-self: center;                       /* Alineado medio (flexbox) */
}

.label-obstrucciones[b-7ipdx6ru9h] {
    color: #CC0000;                           /* Rojo */
}

.text-dato[b-7ipdx6ru9h] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 12.5rem;                       /* Ancho mínimo (200px) */
    text-align: left;                         /* Alineado izquierda */
    vertical-align: middle;                   /* Alineado vertical medio */
}

.text-obstrucciones[b-7ipdx6ru9h] {
    color: #9400D3;                           /* Violeta oscuro (DarkViolet) */
    font-weight: bold;                        /* Negritas */
}

.nota-encadenado[b-7ipdx6ru9h] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris oscuro */
}

/* ===== COMBO DE USUARIOS (perfil CallService) ===== */
.combo-usuarios[b-7ipdx6ru9h] {
    padding: 0.25rem;                         /* Padding (4px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    min-width: 15rem;                         /* Ancho mínimo (240px) */
}

/* ===== LISTA MULTIDEPTO (CHECKBOXLIST EN 3 COLUMNAS) ===== */
.multi-depto-list[b-7ipdx6ru9h] {
    columns: 3;                               /* 3 columnas flujo arriba→abajo */
    column-gap: 0.5rem;                       /* Espacio entre columnas (8px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.multi-depto-item[b-7ipdx6ru9h] {
    break-inside: avoid;                      /* No cortar item entre columnas */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.31rem;                             /* Espacio (5px) */
    margin-bottom: 0.25rem;                   /* Espacio entre items (4px) */
}

.multi-depto-item input[type="checkbox"][b-7ipdx6ru9h] {
    margin: 0;                                /* Sin margen */
}

/* ===== FECHA DE SOLICITUD (calendario HTML5) ===== */
.input-fecha-calendario[b-7ipdx6ru9h] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.25rem;                         /* Padding (4px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
}

/* ===== BOTÓN RECURRENTE ===== */
/* Usa .boton-chico de app.css - aquí solo color */
.btn-recurrente[b-7ipdx6ru9h] {
    background-color: #F0F0F0;                /* Gris muy claro */
}

.texto-recurrencia[b-7ipdx6ru9h] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
}

/* ===== TEXTO PLAZO PENDIENTE (tipos especiales) ===== */
.texto-plazo-pendiente[b-7ipdx6ru9h] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    vertical-align: middle;                   /* Alineado vertical */
}

/* ===== TIEMPO DE ENTREGA (rojo oscuro) Y FECHA ESTIMADA (gris) ===== */
.tiempo-max-rojo[b-7ipdx6ru9h] {
    color: #CC0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.fecha-max-gris[b-7ipdx6ru9h] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
}

.texto-negociado[b-7ipdx6ru9h] {
    color: #CC0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
}

/* ===== BOTÓN NEGOCIÉ OTRO PLAZO ===== */
/* Usa .boton-chico de app.css - aquí solo colores */
/* Usa .boton-chico de app.css - aquí solo colores */
.btn-negociar[b-7ipdx6ru9h] {
    background-color: #FF7C80;                /* Coral / Rojo suave */
    color: #FFFFFF;                           /* Blanco */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
    vertical-align: middle;                   /* Alineado vertical */
}

/* ===== BOTÓN CANCELAR CAMBIO ===== */
/* Usa .boton-chico de app.css - aquí solo colores */
.btn-cancelar-plazo[b-7ipdx6ru9h] {
    background-color: #FF7C80;                /* Coral / Rojo suave */
    color: #404040;                           /* Gris oscuro */
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
}

/* ===== INPUT MOTIVO ===== */
.input-motivo[b-7ipdx6ru9h] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    padding: 0.25rem;                         /* Padding (4px) */
    width: 80%;                               /* Ancho 80% */
    max-width: 37.5rem;                       /* Ancho máximo (600px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 4px;                       /* Bordes redondeados */
}

/* ===== FORMULARIO DINÁMICO (alineado con labels) ===== */
.formulario-dinamico[b-7ipdx6ru9h] {
    width: 100%;                              /* Ancho completo */
}
    .form-pendiente-creacion[b-7ipdx6ru9h] {
        background-color: #FFFACD;                /* Amarillo pálido (LemonChiffon) */
        border: 2px dashed #FFA500;               /* Borde naranja punteado */
        padding: 0.94rem;                         /* Padding (15px) */
        text-align: center;                       /* Centrado */
        border-radius: 4px;                       /* Bordes redondeados */
    }
    .form-pendiente-creacion strong[b-7ipdx6ru9h] {
        color: #FF8C00;                           /* Naranja oscuro (DarkOrange) */
        font-size: var(--texto-11pt);             /* Tamaño 11pt */
    }
    .form-pendiente-creacion p[b-7ipdx6ru9h] {
        margin-bottom: 0;                         /* Quitar espacio extra abajo */
    }

/* ===== BOTÓN ANEXAR ARCHIVOS ===== */
/* Usa .boton-chico de app.css - aquí solo color */
.btn-anexos[b-7ipdx6ru9h] {
    background-color: #90D090;                /* Verde claro */
}

.texto-sin-anexos[b-7ipdx6ru9h] {
    color: #666666;                           /* Gris oscuro */
    font-style: italic;                       /* Itálicas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.lista-anexos[b-7ipdx6ru9h] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.anexo-item[b-7ipdx6ru9h] {
    font-weight: normal;                      /* Sin negritas */
}

/* ===== BOTÓN ENVIAR REQUERIMIENTO ===== */
/* Usa .boton de app.css (9pt) - aquí solo colores */
.btn-enviar-req[b-7ipdx6ru9h] {
    background-color: var(--color-reqs);      /* Amarillo del módulo */
    color: #000000;                           /* Negro */
    margin-left: 0;
}

/* ===== VALIDACIÓN ===== */
.validation-error[b-7ipdx6ru9h] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-16pt);             /* Tamaño 16pt (x-large) */
    margin-left: 0.31rem;                     /* Margen izquierdo (5px) */
    vertical-align: middle;                   /* Alineado vertical */
}

/* ===== PANEL DE ESPERA ===== */
.panel-wait[b-7ipdx6ru9h] {
    text-align: center;                       /* Centrado */
    padding: 2.5rem 1.25rem;                  /* Padding (40px 20px) */
    background-color: #FFFFFF;                /* Fondo blanco */
}

.panel-wait img[b-7ipdx6ru9h] {
    width: 3rem;                              /* Ancho (48px) */
    height: 3rem;                             /* Alto (48px) */
}

.mensaje-wait[b-7ipdx6ru9h] {
    color: #008000;                           /* Verde */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.detalle-wait[b-7ipdx6ru9h] {
    color: #008000;                           /* Verde */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

/* ===== PANEL DE MENSAJE (ÉXITO/ERROR) ===== */
.panel-mensaje[b-7ipdx6ru9h] {
    text-align: center;                       /* Centrado */
    padding: 1.875rem 1.25rem;                /* Padding (30px 20px) */
    margin-top: 1rem;                         /* Separado de la barra de filtros */
}

.panel-exito[b-7ipdx6ru9h] {
    background-color: #228B22;                /* Verde bosque (ForestGreen) */
    color: #FFFFFF;                           /* Blanco */
}

.panel-error[b-7ipdx6ru9h] {
    background-color: #8B0000;                /* Rojo oscuro (DarkRed) */
    color: #FFFFFF;                           /* Blanco */
}

.mensaje-texto[b-7ipdx6ru9h] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: normal;                      /* Sin negritas */
    margin-bottom: 1.25rem;                   /* Margen inferior (20px) */
    white-space: pre-line;                    /* Respeta saltos de línea */
}

.mensaje-botones[b-7ipdx6ru9h] {
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* Centrado horizontal */
    gap: 0.625rem;                            /* Espacio entre botones (10px) */
}

/* Usa .boton-chico de app.css (7pt) - aquí solo colores */
.btn-mensaje[b-7ipdx6ru9h] {
    margin-left: 0.625rem;                    /* Margen izquierdo (10px) */
    background-color: #f2f2f2;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-mensaje:first-child[b-7ipdx6ru9h] {
    margin-left: 0;                           /* Sin margen para el primero */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .label-alineada[b-7ipdx6ru9h] {
        text-align: left;                     /* Alineado izquierda en móvil */
        width: 100%;                          /* Ancho completo */
        margin-bottom: 0.125rem;              /* Margen inferior (2px) */
    }

    .text-dato[b-7ipdx6ru9h] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin ancho mínimo */
    }

    .multi-depto-list[b-7ipdx6ru9h] {
        columns: 2;                            /* 2 columnas en móvil */
    }

    .link-politica[b-7ipdx6ru9h],
    .link-ejemplo[b-7ipdx6ru9h],
    .texto-deshabilitado[b-7ipdx6ru9h] {
        display: block;                       /* Bloque en móvil */
        margin-left: 0;                       /* Sin margen izquierdo */
        margin-top: 0.25rem;                  /* Margen superior (4px) */
    }

    .input-motivo[b-7ipdx6ru9h] {
        width: 100%;                          /* Ancho completo */
    }

    .combo-usuarios[b-7ipdx6ru9h] {
        width: 100%;                          /* Ancho completo */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-7ipdx6ru9h] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/02Req/ReqRecurrentes.razor.rz.scp.css */
/*
   ReqRecurrentes.razor.css
   Listado de requerimientos recurrentes/programados.
   Muestra configuración de recurrencia y estado activo/inactivo.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-imvr0gmkpq] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-imvr0gmkpq] {
    background-color: #FFF7CC;                /* Amarillo - módulo Requerimientos */
}

/* ===== LISTA DE REQUERIMIENTOS ===== */
.reqs-list[b-imvr0gmkpq] {
    display: flex;                            /* Flexbox vertical */
    flex-direction: column;                   /* Apilado vertical */
    gap: 1px;                                 /* Espacio mínimo */
}

.req-item[b-imvr0gmkpq] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0.625rem;                            /* Espacio entre elementos (10px) */
    padding: 0.5rem;                          /* Padding (8px) */
    background-color: #FFFFFF;                /* Fondo blanco */
    border-bottom: 1px solid #808080;         /* Borde inferior gris */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.req-item.req-inactivo[b-imvr0gmkpq] {
    background-color: #F5F5F5;                /* Fondo gris claro para inactivos */
}

/* ===== COLUMNA DE BOTONES ===== */
.req-column-botones[b-imvr0gmkpq] {
    width: 6.25rem;                           /* Ancho fijo (100px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    align-items: center;                      /* Centrado horizontal */
    justify-content: flex-start;              /* Alineado arriba */
    gap: 0.3125rem;                           /* Espacio entre botones (5px) */
}

.label-inactivo[b-imvr0gmkpq] {
    width: 5rem;                              /* Ancho fijo (80px) */
    background-color: #808080;                /* Gris */
    color: #F5F5F5;                           /* Blanco humo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.boton-chico[b-imvr0gmkpq] {
    background-color: #FF7C80;                /* Coral / Rojo suave */
}

/* ===== COLUMNA DE INFORMACIÓN ===== */
.req-column-info[b-imvr0gmkpq] {
    flex: 1;                                  /* Ocupa espacio restante */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0.25rem;                             /* Espacio entre líneas (4px) */
}

/* ===== TÍTULO DEL REQ ===== */
.req-titulo[b-imvr0gmkpq] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #000000;                           /* Negro */
}

.req-titulo strong[b-imvr0gmkpq] {
    font-weight: bold;                        /* Negritas */
}

.req-titulo-link[b-imvr0gmkpq] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.req-titulo-link:hover[b-imvr0gmkpq] {
    text-decoration: underline;               /* Subrayado al hover */
}

.req-titulo-link strong[b-imvr0gmkpq] {
    font-weight: bold;                        /* Negritas */
}

/* ===== DETALLES ===== */
.req-detalle[b-imvr0gmkpq] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #000000;                           /* Negro */
    line-height: 1.3;                         /* Altura de línea */
}

.label-pequeno[b-imvr0gmkpq] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: normal;                      /* Sin negritas */
}

/* ===== LINK DE LOG ===== */
.link-log[b-imvr0gmkpq] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #696969;                           /* Gris oscuro (DimGray) */
    text-decoration: underline;               /* Subrayado */
    margin: 0 0.5rem;                         /* Márgenes laterales (8px) */
}

.link-log:hover[b-imvr0gmkpq] {
    color: #000000;                           /* Negro al hover */
}

/* ===== LABEL PROCESA ===== */
.label-procesa[b-imvr0gmkpq] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: bold;                        /* Negritas */
    margin-left: 0.5rem;                      /* Separación izquierda (8px) */
}

.valor-procesa[b-imvr0gmkpq] {
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: normal;                      /* Sin negritas */
}

/* ===== TEXTO DE RECURRENCIA ===== */
.req-recurrencia[b-imvr0gmkpq] {
    color: #00C000;                           /* Verde */
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-top: 0.3125rem;                    /* Separación superior (5px) */
    line-height: 1.3;                         /* Altura de línea */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .req-column-botones[b-imvr0gmkpq] {
        width: 4.5rem;                        /* Ancho reducido (72px) */
    }

    .label-inactivo[b-imvr0gmkpq] {
        width: 4rem;                          /* Ancho reducido (64px) */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-imvr0gmkpq] {
    --spinner-color: var(--color-reqs);
}
/* _content/SiREI_2026/Components/Pages/03Enc/EncConfirma.razor.rz.scp.css */
/*
   EncConfirma.razor.css
   Confirmación de encuestas de satisfacción.
   Módulo 03Enc (Morado).
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-bpgxart5mv]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-bpgxart5mv]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-bpgxart5mv] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Solo pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-bpgxart5mv] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Solo el color, lo demás viene del app.css */
.barra-filtros[b-bpgxart5mv] {
    background-color: #F5F5F5;                /* Gris claro - módulo 03Enc */
}

/* ===== CONTENEDOR DEL REQUERIMIENTO ===== */
/* Fondo amarillo para destacar */
.req-container[b-bpgxart5mv] {
    background-color: #FFFFC0;                /* Amarillo claro */
    padding: 0.63rem;                         /* Padding (10px) */
    margin-bottom: 0.63rem;                   /* Margen inferior (10px) */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
}

/* Info del requerimiento */
.req-info-fecha[b-bpgxart5mv] {
    margin-bottom: 0.31rem;                   /* Margen inferior (5px) */
    font-weight: bold;                        /* Negritas */
    padding-left: 1rem;                       /* Padding izquierdo (16px) */
}

.req-info-principal[b-bpgxart5mv] {
    margin-top: 0.63rem;                      /* Margen superior (10px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.req-link-requerimiento[b-bpgxart5mv] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.req-link-requerimiento:hover[b-bpgxart5mv] {
    text-decoration: underline;               /* Subrayado en hover */
}

.req-motivo-label[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.req-motivo[b-bpgxart5mv] {
    font-weight: normal;                      /* Sin negritas */
}

.req-info-general[b-bpgxart5mv] {
    font-weight: normal;                      /* Sin negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.req-procesa-label[b-bpgxart5mv] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.req-procesa-nombre[b-bpgxart5mv] {
    font-weight: normal;                      /* Sin negritas */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.req-prioridad-label[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* Log y Obstruye / Depende */
.req-log[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    margin-right: 1rem;                       /* Margen derecho (16px) */
}

.req-obs-text[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.req-obs[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* Resolución */
.req-resolucion-label[b-bpgxart5mv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.req-resolucion-texto[b-bpgxart5mv] {
    font-weight: normal;                      /* Sin negritas */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
}

/* ===== ETIQUETAS DE ESTADO DEL REQ ===== */
.label-terminado[b-bpgxart5mv] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-xconfirmar[b-bpgxart5mv] {
    color: #C00000;                           /* Rojo oscuro */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-tarde[b-bpgxart5mv] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    padding: 0.13rem 0.31rem;                 /* Padding (2px 5px) */
    border-radius: 4px;                       /* Bordes redondeados */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-super[b-bpgxart5mv] {
    background-color: #800080;                /* Morado (Purple) */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    padding: 0.13rem 0.31rem;                 /* Padding (2px 5px) */
    border-radius: 4px;                       /* Bordes redondeados */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-urge[b-bpgxart5mv] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-prioridad[b-bpgxart5mv] {
    color: #696969;                           /* Gris (DimGray) */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

/* ===== SECCIÓN DE DECISIÓN SI/NO ===== */
.decision-container[b-bpgxart5mv] {
    margin: 0.94rem 0;                        /* Margen vertical (15px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.decision-pregunta[b-bpgxart5mv] {
    max-width: 25rem;                         /* Ancho máximo (400px) */
}

.decision-flex[b-bpgxart5mv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 1.25rem;                             /* Gap (20px) */
    flex-wrap: wrap;                          /* Permite wrap */
}

/* RadioButtonList personalizado */
.radio-group[b-bpgxart5mv] {
    display: flex;                            /* Flexbox */
    flex-direction: row;                      /* Dirección horizontal */
    gap: 0.94rem;                             /* Gap (15px) */
}

.radio-group label[b-bpgxart5mv] {
    cursor: pointer;                          /* Cursor pointer */
}

.radio-horizontal[b-bpgxart5mv] {
    display: flex;                            /* Flexbox */
    flex-direction: row;                      /* Dirección fila */
    gap: 0.94rem;                             /* Gap (15px) */
    flex-wrap: wrap;                          /* Permite wrap */
}

.radio-horizontal label[b-bpgxart5mv] {
    cursor: pointer;                          /* Cursor pointer */
}

.radio-horizontal label.radio-disabled[b-bpgxart5mv] {
    opacity: 0.4;                             /* Gris tenue */
    cursor: not-allowed;                      /* Cursor no permitido */
}

/* ===== PANEL SI - MOSTRAR ENCUESTA ===== */
.panel-si[b-bpgxart5mv] {
    border-top: 2px solid #D8BFD8;            /* Borde morado (Thistle) */
    padding-top: 0.63rem;                     /* Padding superior (10px) */
    margin-top: 0.63rem;                      /* Margen superior (10px) */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.panel-si .texto-morado[b-bpgxart5mv] {
    color: #8B008B;                           /* Morado oscuro (DarkMagenta) */
}

/* Tabla de preguntas de encuesta */
.tabla-encuesta[b-bpgxart5mv] {
    width: 100%;                              /* Ancho completo */
    max-width: 50rem;                         /* Ancho máximo (800px) */
    margin: 0.63rem 0;                        /* Margen vertical (10px) */
}

.tabla-encuesta td[b-bpgxart5mv] {
    padding: 0.5rem 0.31rem;                  /* Padding (8px 5px) */
    vertical-align: top;                      /* Alineado arriba */
}

.tabla-encuesta td:first-child[b-bpgxart5mv] {
    width: 26.88rem;                          /* Ancho (430px) */
}

/* Comentarios adicionales */
.comentarios-label[b-bpgxart5mv] {
    margin-bottom: 0.31rem;                   /* Margen inferior (5px) */
}

/* Textarea para comentarios e inconformidad */
.textarea-comentarios[b-bpgxart5mv] {
    width: 95%;                               /* Ancho 95% */
    min-height: 3.69rem;                      /* Altura mínima (59px) */
    resize: vertical;                         /* Solo redimensiona vertical */
    padding: 0.31rem;                         /* Padding (5px) */
    border: 1px solid #CCCCCC;                /* Borde gris claro */
    border-radius: 4px;                       /* Bordes redondeados */
}

/* ===== PANEL NO - MOSTRAR INCONFORMIDAD ===== */
.panel-no[b-bpgxart5mv] {
    border-top: 2px solid #CC0033;            /* Borde rojo */
    padding-top: 0.63rem;                     /* Padding superior (10px) */
    margin-top: 0.63rem;                      /* Margen superior (10px) */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.panel-no .texto-rojo[b-bpgxart5mv] {
    color: #CC0033;                           /* Rojo */
}

.panel-no-subrayado[b-bpgxart5mv] {
    text-decoration: underline;               /* Subrayado */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css (9pt) - aquí solo colores y ancho */

/* Botón "Dar requerimiento por Terminado" */
.btn-terminado[b-bpgxart5mv] {
    width: 18.75rem;                          /* Ancho (300px) */
    background-color: #D8BFD8;                /* Morado claro (Thistle) */
    margin-left: 0;                           /* en este caso no lo ocupa*/
}

/* Botón "El requerimiento aún NO está Terminado" */
.btn-no-terminado[b-bpgxart5mv] {
    width: 18.75rem;                          /* Ancho (300px) */
    background-color: #C00000;                /* Rojo oscuro */
    color: #FFFFFF;                           /* Blanco */
    margin-left: 0;                           /* en este caso no lo ocupa*/
}

/* Botón "Continuar" */
/* Usa .boton-chico de app.css (7pt) - más pequeño */
.btn-continuar[b-bpgxart5mv] {
    background-color: #EAEAEA;                /* Gris claro */
}

/* Mensaje de validación de formulario */
.msg-validacion[b-bpgxart5mv] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin-top: 0.63rem;                      /* Margen superior (10px) */
}

/* ===== PANEL SIN RESULTADOS ===== */
.lista-causas[b-bpgxart5mv] {
    display: inline-block;                    /* Bloque inline */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-bpgxart5mv] {
    padding-left: 0.5rem;                     /* Padding izquierdo (8px) */
}

/* ===== PANEL DE ERROR DE ENVÍO ===== */
.panel-error-envio[b-bpgxart5mv] {
    background-color: #CC0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    padding: 1.25rem;                         /* Padding (20px) */
    text-align: center;                       /* Centrado */
}

/* ===== PANEL DE MENSAJE "ESPERA" ===== */
.panel-mensaje[b-bpgxart5mv] {
    text-align: center;                       /* Centrado */
    padding: 1.25rem;                         /* Padding (20px) */
}

.panel-mensaje .texto-verde[b-bpgxart5mv] {
    color: #008000;                           /* Verde */
    font-weight: bold;                        /* Negritas */
}

.panel-mensaje img[b-bpgxart5mv] {
    max-width: 3.13rem;                       /* Ancho máximo (50px) */
    height: auto;                             /* Altura automática */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .decision-flex[b-bpgxart5mv] {
        flex-direction: column;               /* Dirección columna */
        align-items: flex-start;              /* Alineado izquierda */
    }

    .decision-pregunta[b-bpgxart5mv] {
        max-width: 100%;                      /* Ancho completo */
    }

    .tabla-encuesta td:first-child[b-bpgxart5mv] {
        width: 100%;                          /* Ancho completo */
    }


    .radio-horizontal[b-bpgxart5mv] {
        gap: 0.5rem;                          /* Gap reducido */
    }

    .btn-terminado[b-bpgxart5mv],
    .btn-no-terminado[b-bpgxart5mv] {
        max-width: 100%;                      /* No se sale del contenedor */
    }

    .textarea-comentarios[b-bpgxart5mv] {
        width: 100%;                          /* Ancho completo */
    }
}

/* Responsive más pequeño: tabla en bloques */
@media (max-width: 768px) {
    .tabla-encuesta tr[b-bpgxart5mv] {
        display: block;                       /* Bloque */
        margin-bottom: 1.25rem;               /* Margen inferior (20px) */
        border-bottom: 1px solid #EEEEEE;     /* Borde gris claro */
        padding-bottom: 0.63rem;              /* Padding inferior (10px) */
    }

    .tabla-encuesta td[b-bpgxart5mv] {
        display: block;                       /* Bloque */
        width: 100% !important;               /* Ancho completo */
        padding: 0.31rem 0;                   /* Padding vertical (5px) */
    }

    .radio-horizontal[b-bpgxart5mv] {
        flex-wrap: wrap;                      /* Permite wrap si no caben */
        gap: 0.4rem;                          /* Gap compacto */
        margin-top: 0.63rem;                  /* Margen superior (10px) */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-bpgxart5mv] {
    --spinner-color: var(--color-encu);
}
/* _content/SiREI_2026/Components/Pages/03Enc/EncConsulta.razor.rz.scp.css */
/*
   EncConsulta.razor.css
   Consulta de encuestas de satisfacción.
   Módulo 03Enc (Morado).
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-sxq2khk46o] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Solo el color, lo demás viene del app.css */
.barra-filtros[b-sxq2khk46o] {
    background-color: #F5F5F5;                /* Gris claro - módulo 03Enc */
}

/* Segunda línea de filtros (calificaciones) */
.barra-filtros-calificaciones[b-sxq2khk46o] {
    border-top: 1px solid #E0E0E0;            /* Borde gris */
}

/* ===== LISTADO DE ENCUESTAS ===== */
.encuestas-list[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0;                                   /* Sin gap */
}

/* Cada item de encuesta */
.encuesta-item[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    padding: 0.5rem;                          /* Padding (8px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    border-bottom: solid 1px #B0B0B0;         /* Borde inferior gris */
}

/* Alternancia de colores */
/* ItemStyle (par/normal) → fondo #F7F6F3, texto #333333 */
.encuesta-item-normal[b-sxq2khk46o] {
    background-color: #F7F6F3;                /* Beige claro */
    color: #333333;                           /* Gris oscuro */
}

/* AlternatingItemStyle (impar) → fondo White, texto #284775 */
.encuesta-item-alterna[b-sxq2khk46o] {
    background-color: #FFFFFF;                /* Blanco */
    color: #284775;                           /* Azul oscuro */
}

/* ===== LÍNEA 1: REQ EVALUADO, FECHAS (todo el ancho) ===== */
.encuesta-linea1[b-sxq2khk46o] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-bottom: 0.15rem;                   /* Margen inferior mínimo */
}

/* ===== LÍNEA 2: PROCESADO + VALORES ===== */
.encuesta-linea2[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Info izq, valores der */
    align-items: baseline;                    /* Alineado en línea base */
    margin-bottom: 0.15rem;                   /* Margen inferior mínimo */
    gap: 0.5rem;                              /* Espacio entre info y valores */
}

.encuesta-linea2-info[b-sxq2khk46o] {
    flex: 1;                                  /* Ocupa espacio disponible */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    /* Sin padding-left: P alineada con R de Req. Evaluado */
}

/* Labels pequeños (XX-Small en original) */
.label-pequeno[b-sxq2khk46o] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: normal;                      /* Sin negritas */
    margin-left: 0.5rem;                      /* Margen izquierdo (8px) */
}

.label-pequeno:first-child[b-sxq2khk46o] {
    margin-left: 0;                           /* Sin margen en el primero */
}

/* Link al detalle del req */
.link-req[b-sxq2khk46o] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.link-req:hover[b-sxq2khk46o] {
    text-decoration: underline;               /* Subrayado en hover */
}

/* Label SUPER (morado) */
.label-super[b-sxq2khk46o] {
    color: #800080;                           /* Morado (Purple) */
    font-weight: bold;                        /* Negritas */
    margin: 0 0.25rem;                        /* Margen horizontal (4px) */
}

/* Label TARDE (rojo) */
.label-tarde[b-sxq2khk46o] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin: 0 0.25rem;                        /* Margen horizontal (4px) */
}

/* ===== LÍNEA 3: LABELS (alineados derecha) ===== */
.encuesta-linea3[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Labels a la derecha */
}

/* Procesado por (en rojo oscuro) */
.label-procesado[b-sxq2khk46o] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: bold;                        /* Negritas */
}

.valor-procesado[b-sxq2khk46o] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: normal;                      /* Sin negritas */
}

/* Fecha que no se parte */
.fecha-no-partir[b-sxq2khk46o] {
    white-space: nowrap;                      /* No permite que se parta */
}

/* ===== CALIFICACIONES - VALORES (línea 1) ===== */
.calificaciones-valores[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    gap: 0.625rem;                            /* Gap (10px) */
    flex-shrink: 0;                           /* No encoge */
}

.calificaciones-valores .calificacion-link[b-sxq2khk46o] {
    min-width: 4.5rem;                        /* Ancho mínimo (72px) */
    text-align: center;                       /* Centrado */
}

/* ===== CALIFICACIONES - LABELS (línea 2) ===== */
.calificaciones-labels[b-sxq2khk46o] {
    display: flex;                            /* Flexbox */
    gap: 0.625rem;                            /* Gap (10px) */
    flex-shrink: 0;                           /* No encoge */
}

/* Link de calificación (valores) */
.calificacion-link[b-sxq2khk46o] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.calificacion-link:hover[b-sxq2khk46o] {
    text-decoration: underline;               /* Subrayado solo en hover */
    color: #666666;                           /* Gris medio en hover */
}

/* Label de calificación */
.calificacion-label[b-sxq2khk46o] {
    min-width: 4.5rem;                        /* Ancho mínimo (72px) */
    text-align: center;                       /* Centrado */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #666666;                           /* Gris medio */
}

/* PC/Móvil: textos diferentes según dispositivo */
.solo-pc[b-sxq2khk46o] {
    display: inline;                          /* Visible en PC */
}

.solo-movil[b-sxq2khk46o] {
    display: none;                            /* Oculto en PC */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Línea 2: en columna en móvil */
    .encuesta-linea2[b-sxq2khk46o] {
        flex-direction: column;               /* Apilado vertical */
        align-items: stretch;                 /* Hijos ocupan ancho completo */
        gap: 0.3rem;                          /* Gap reducido */
    }

    /* Valores: centrados horizontalmente */
    .calificaciones-valores[b-sxq2khk46o] {
        align-self: center;                   /* Centra el div en el padre */
        flex-shrink: 1;                       /* Permite encogerse */
        gap: 0.4rem;                          /* Gap reducido */
    }

    /* Labels: centrados horizontalmente */
    .calificaciones-labels[b-sxq2khk46o] {
        align-self: center;                   /* Centra el div en el padre */
        flex-shrink: 1;                       /* Permite encogerse */
        gap: 0.4rem;                          /* Gap reducido */
    }

    /* Línea 3: centrar su contenido */
    .encuesta-linea3[b-sxq2khk46o] {
        justify-content: center;              /* Centrado */
    }

    .calificaciones-valores .calificacion-link[b-sxq2khk46o],
    .calificacion-label[b-sxq2khk46o] {
        min-width: 3.5rem;                    /* Ancho reducido (56px) */
    }

    /* Textos cortos en móvil */
    .solo-pc[b-sxq2khk46o] {
        display: none;                        /* Oculto en móvil */
    }

    .solo-movil[b-sxq2khk46o] {
        display: inline;                      /* Visible en móvil */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-sxq2khk46o] {
    --spinner-color: var(--color-encu);
}
/* _content/SiREI_2026/Components/Pages/03Enc/EncDetalle.razor.rz.scp.css */
/*
   EncDetalle.razor.css
   Detalle de encuesta con calificaciones.
   Módulo 03Enc (Morado).
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-rf1fltvxhw]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-rf1fltvxhw]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-rf1fltvxhw] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Solo pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-rf1fltvxhw] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Solo el color, lo demás viene del app.css */
.barra-filtros[b-rf1fltvxhw] {
    background-color: #F5F5F5;                /* Gris claro - módulo 03Enc */
}

/* ===== CONTENEDOR DEL REQUERIMIENTO ===== */
/* Fondo amarillo para destacar */
.req-container[b-rf1fltvxhw] {
    background-color: #FFFFC0;                /* Amarillo claro */
    padding: 0.63rem;                         /* Padding (10px) */
    margin-bottom: 0.63rem;                   /* Margen inferior (10px) */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
}

/* Info del requerimiento */
.req-info-fecha[b-rf1fltvxhw] {
    margin-bottom: 0.31rem;                   /* Margen inferior (5px) */
    font-weight: bold;                        /* Negritas */
    padding-left: 1rem;                       /* Padding izquierdo (16px) */
}

.req-info-principal[b-rf1fltvxhw] {
    margin-top: 0.63rem;                      /* Margen superior (10px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.req-link-requerimiento[b-rf1fltvxhw] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.req-link-requerimiento:hover[b-rf1fltvxhw] {
    text-decoration: underline;               /* Subrayado en hover */
}

.req-info-general[b-rf1fltvxhw] {
    font-weight: normal;                      /* Sin negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.req-procesa-label[b-rf1fltvxhw] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.req-procesa-nombre[b-rf1fltvxhw] {
    font-weight: normal;                      /* Sin negritas */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
}

.req-prioridad-label[b-rf1fltvxhw] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* Log y Obstruye / Depende */
.req-log[b-rf1fltvxhw] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    margin-right: 1rem;                       /* Margen derecho (16px) */
}

.req-obs-text[b-rf1fltvxhw] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.req-obs[b-rf1fltvxhw] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== ETIQUETAS DE ESTADO DEL REQ ===== */
.label-terminado[b-rf1fltvxhw] {
    color: #228B22;                           /* Verde bosque (ForestGreen) */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-tarde[b-rf1fltvxhw] {
    background-color: #FF0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    padding: 0.13rem 0.31rem;                 /* Padding (2px 5px) */
    border-radius: 4px;                       /* Bordes redondeados */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-super[b-rf1fltvxhw] {
    background-color: #800080;                /* Morado (Purple) */
    color: #FFFFFF;                           /* Blanco */
    font-weight: bold;                        /* Negritas */
    padding: 0.13rem 0.31rem;                 /* Padding (2px 5px) */
    border-radius: 4px;                       /* Bordes redondeados */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-urge[b-rf1fltvxhw] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

.label-prioridad[b-rf1fltvxhw] {
    color: #696969;                           /* Gris (DimGray) */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.3rem;                     /* Margen derecho */
}

/* ===== SECCIÓN DE RESULTADOS DE ENCUESTA ===== */
/* Contenedor principal de resultados de encuesta */
.encuesta-resultado[b-rf1fltvxhw] {
    border-top: 2px solid #D8BFD8;            /* Borde morado (Thistle) */
    border-bottom: 2px solid #D8BFD8;         /* Borde morado */
    padding: 0.63rem 0;                       /* Padding vertical (10px) */
    margin-top: 0.63rem;                      /* Margen superior (10px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
}

/* Texto descriptivo: quién solicitó, quién evaluó, fechas */
.encuesta-descripcion[b-rf1fltvxhw] {
    color: #8B008B;                           /* Morado oscuro (DarkMagenta) */
    margin-bottom: 1rem;                      /* Margen inferior (16px) */
}

/* Tabla de calificaciones de la encuesta */
.tabla-encuesta-resultado[b-rf1fltvxhw] {
    width: 100%;                              /* Ancho completo */
    max-width: 50rem;                         /* Ancho máximo (800px) */
    margin: 0.63rem 0;                        /* Margen vertical (10px) */
    border-collapse: collapse;                /* Bordes colapsados */
}

/* Celda de pregunta */
.pregunta-texto[b-rf1fltvxhw] {
    padding: 0.5rem 0.31rem;                  /* Padding (8px 5px) */
    vertical-align: top;                      /* Alineado arriba */
    width: 22.5rem;                           /* Ancho (360px) */
}

/* Celda de opciones */
.pregunta-opciones[b-rf1fltvxhw] {
    padding: 0.5rem 0.31rem;                  /* Padding (8px 5px) */
    vertical-align: top;                      /* Alineado arriba */
}

/* Opción NO seleccionada: texto pequeño y gris */
.opcion-normal[b-rf1fltvxhw] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #666666;                           /* Gris medio */
    margin-right: 1rem;                       /* Margen derecho (16px) */
}

/* Opción SELECCIONADA: texto grande y bold */
.opcion-seleccionada[b-rf1fltvxhw] {
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    margin-right: 1rem;                       /* Margen derecho (16px) */
}

/* Sección de comentario adicional */
.comentario-adicional[b-rf1fltvxhw] {
    margin-top: 1rem;                         /* Margen superior (16px) */
    padding-top: 0.5rem;                      /* Padding superior (8px) */
}

.comentario-label[b-rf1fltvxhw] {
    color: #A9A9A9;                           /* Gris (DarkGray) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

.comentario-texto[b-rf1fltvxhw] {
    margin-top: 0.5rem;                       /* Margen superior (8px) */
    line-height: var(--line-height-normal);   /* Altura de línea normal */
}

/* ===== PANEL DE ERROR ===== */
/* Cuando no se puede mostrar el req */
.lista-causas[b-rf1fltvxhw] {
    display: inline-block;                    /* Bloque inline */
    text-align: left;                         /* Alineado izquierda */
}

.lista-causas li[b-rf1fltvxhw] {
    padding-left: 0.5rem;                     /* Padding izquierdo (8px) */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pregunta-texto[b-rf1fltvxhw] {
        width: 100%;                          /* Ancho completo */
    }

    .tabla-encuesta-resultado[b-rf1fltvxhw] {
        font-size: var(--texto-9pt);          /* Tamaño reducido */
    }
}

/* Responsive más pequeño: convertir tabla en bloques */
@media (max-width: 768px) {
    .tabla-encuesta-resultado tr[b-rf1fltvxhw] {
        display: block;                       /* Bloque */
        margin-bottom: 1.25rem;               /* Margen inferior (20px) */
        border-bottom: 1px solid #EEEEEE;     /* Borde gris claro */
        padding-bottom: 0.63rem;              /* Padding inferior (10px) */
    }

    .tabla-encuesta-resultado td[b-rf1fltvxhw] {
        display: block;                       /* Bloque */
        width: 100% !important;               /* Ancho completo */
        padding: 0.31rem 0;                   /* Padding vertical (5px) */
    }

    .pregunta-opciones[b-rf1fltvxhw] {
        margin-top: 0.5rem;                   /* Margen superior (8px) */
        text-align: center;                   /* Centrado horizontal */
    }

    /* En móvil las opciones van horizontales centradas */
    .pregunta-opciones span[b-rf1fltvxhw] {
        display: inline-block;                /* Inline block */
        margin-right: 0.5rem;                 /* Margen derecho (8px) */
        margin-bottom: 0.25rem;               /* Margen inferior (4px) */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-rf1fltvxhw] {
    --spinner-color: var(--color-encu);
}
/* _content/SiREI_2026/Components/Pages/03Enc/EncInconf.razor.rz.scp.css */
/*
   EncInconf.razor.css
   Inconformidades de encuestas.
   Módulo 03Enc (Morado).
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.barra-filtros-input-req[b-3dzam2pugk]::-webkit-inner-spin-button,
.barra-filtros-input-req[b-3dzam2pugk]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.barra-filtros-input-req[b-3dzam2pugk] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Solo pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-3dzam2pugk] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Solo el color, lo demás viene del app.css */
.barra-filtros[b-3dzam2pugk] {
    background-color: #F5F5F5;                /* Gris claro - módulo 03Enc */
}

/* ===== LISTADO DE INCONFORMIDADES ===== */
.inconf-list[b-3dzam2pugk] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0;                                   /* Sin gap */
}

/* Cada item de inconformidad */
.inconf-item[b-3dzam2pugk] {
    display: flex;                            /* Flexbox */
    gap: 0;                                   /* Sin gap */
    padding: 0.5rem;                          /* Padding (8px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    min-height: 5rem;                         /* Altura mínima (80px) */
}

/* Alternancia de colores */
/* ItemStyle (par/normal) → fondo Linen (#FAF0E6), texto #333333 */
.inconf-item-normal[b-3dzam2pugk] {
    background-color: #FAF0E6;                /* Linen (beige rosado) */
    color: #333333;                           /* Gris oscuro */
}

/* AlternatingItemStyle (impar) → fondo White, texto #284775 */
.inconf-item-alterna[b-3dzam2pugk] {
    background-color: #FFFFFF;                /* Blanco */
    color: #284775;                           /* Azul oscuro */
}

/* ===== COLUMNA PRESENTADOR (20%) ===== */
.inconf-presentador[b-3dzam2pugk] {
    width: 20%;                               /* Ancho reducido */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0.25rem;                             /* Gap (4px) */
    padding-right: 0.625rem;                  /* Padding derecho (10px) */
}

.presentador-nombre[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: normal;                      /* Sin negritas */
}

.presentador-fecha[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: normal;                      /* Sin negritas */
}

/* ===== SEPARADOR VISUAL ===== */
.inconf-separador[b-3dzam2pugk] {
    width: 2%;                                /* Ancho 2% */
    min-width: 0.625rem;                      /* Mínimo (10px) */
}

/* ===== COLUMNA DETALLE (78%) ===== */
.inconf-detalle[b-3dzam2pugk] {
    width: 78%;                               /* Ancho aumentado */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0.25rem;                             /* Gap (4px) */
}

/* Labels pequeños (XX-Small en original) */
.label-pequeno[b-3dzam2pugk] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: normal;                      /* Sin negritas */
}

/* Link al detalle del req */
.detalle-req[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.link-req[b-3dzam2pugk] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
}

.link-req:hover[b-3dzam2pugk] {
    text-decoration: underline;               /* Subrayado en hover */
}

/* Procesado por (en rojo oscuro) */
.detalle-procesado[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.label-procesado[b-3dzam2pugk] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: bold;                        /* Negritas */
}

.valor-procesado[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #8B0000;                           /* Rojo oscuro (DarkRed) */
    font-weight: normal;                      /* Sin negritas */
}

/* Fechas: Solicitado y Terminado */
.detalle-fechas[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* Label SUPER (morado) */
.label-super[b-3dzam2pugk] {
    color: #800080;                           /* Morado (Purple) */
    font-weight: bold;                        /* Negritas */
    margin: 0 0.25rem;                        /* Margen horizontal (4px) */
}

/* Label TARDE (rojo) */
.label-tarde[b-3dzam2pugk] {
    color: #FF0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin: 0 0.25rem;                        /* Margen horizontal (4px) */
}

/* Separador punteado */
.separador-punteado[b-3dzam2pugk] {
    width: 100%;                              /* Ancho completo */
    height: 0.31rem;                          /* Altura (5px) */
    border-top: #A9A9A9 thin dashed;          /* Borde punteado gris */
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

/* Comentario de la inconformidad */
.detalle-comentario[b-3dzam2pugk] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: normal;                      /* Sin negritas */
    line-height: 1.4;                         /* Altura de línea */
}

/* Spinner del módulo */
.sirei-spinner[b-3dzam2pugk] {
    --spinner-color: var(--color-encu);
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    /* Apilar columnas verticalmente */
    .inconf-item[b-3dzam2pugk] {
        flex-direction: column;               /* Columna en móvil */
        gap: 0.5rem;                          /* Espacio entre secciones */
    }

    /* Presentador: ancho completo, todo en una línea */
    .inconf-presentador[b-3dzam2pugk] {
        width: 100%;                          /* Ancho completo */
        flex-direction: row;                  /* Horizontal en móvil */
        flex-wrap: wrap;                      /* Permite que baje si no cabe */
        align-items: baseline;                /* Alinear en la base del texto */
        gap: 0.25rem;                         /* Espacio entre elementos */
        padding-right: 0;                     /* Sin padding derecho */
        padding-bottom: 0.25rem;              /* Espacio abajo */
        border-bottom: 1px solid #DDD;        /* Línea separadora */
    }

    /* Nombre con espacio después */
    .presentador-nombre[b-3dzam2pugk] {
        margin-right: 0.5rem;                 /* Espacio después del nombre */
    }

    /* Fecha no se parte */
    .presentador-fecha[b-3dzam2pugk] {
        white-space: nowrap;                  /* No partir la fecha */
    }

    /* Ocultar separador visual */
    .inconf-separador[b-3dzam2pugk] {
        display: none;
    }

    /* Detalle: ancho completo abajo */
    .inconf-detalle[b-3dzam2pugk] {
        width: 100%;                          /* Ancho completo */
    }

    /* Terminado: sin margen izquierdo cuando baje de línea */
    .detalle-fechas .label-pequeno[style][b-3dzam2pugk] {
        margin-left: 0 !important;            /* Quita el margin inline */
    }
}
/* _content/SiREI_2026/Components/Pages/04Eva/EvaComis.razor.rz.scp.css */
/*
   EvaComis.razor.css
   Módulo de Comisiones - acordeones por agente con 3 bloques de cobranza.
   Módulo 04Eva (color eval).
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-i5n8j7o2g6] {
    padding-top: 0;                           /* Pega al SiREI (tiene fijador) */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-i5n8j7o2g6] {
    background-color: #E0F0FF;                /* Azul claro - módulo 04Eva (derivado de --color-eval) */
}

/* ═══════════════════════════════════════════════════════ */
/* BOTONES DE ACCIÓN (en la barra de filtros)             */
/* Usan .boton-chico de app.css — aquí color + tamaño de  */
/* letra 8pt para igualar el ALTO de [Filtrar Texto]      */
/* (mismo padding vertical, solo cambia la letra 7pt→8pt) */
/* ═══════════════════════════════════════════════════════ */
.comis-btn-revisado[b-i5n8j7o2g6] {
    background-color: #2E7D32;               /* Verde oscuro (aprobación) */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-8pt);             /* Alto y letra a juego con [Filtrar Texto] */
}

.comis-btn-pdf[b-i5n8j7o2g6] {
    background-color: #FF2400;               /* Rojo PDF */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-8pt);             /* Alto y letra a juego con [Filtrar Texto] */
}

.comis-btn-rrhh[b-i5n8j7o2g6] {
    background-color: #1565C0;               /* Azul RRHH */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-8pt);             /* Alto y letra a juego con [Filtrar Texto] */
}

/* Separador horizontal entre grupos de la barra de filtros */
.comis-separador-barra[b-i5n8j7o2g6] {
    display: inline-block;                   /* Bloque inline en desktop */
    width: 1.5rem;                            /* Ancho del separador */
}

/* ═══════════════════════════════════════════════════════ */
/* HEADER DE SECCIÓN ESPECIAL                              */
/* ═══════════════════════════════════════════════════════ */
.comis-seccion-especial-header[b-i5n8j7o2g6] {
    margin-top: 0.75rem;                     /* Espacio arriba */
    padding: 0.3rem 0.5rem;                  /* Padding */
    background-color: #000000;               /* Negro */
    font-size: var(--texto-9pt);             /* Tamano 9pt */
    font-weight: bold;                       /* Negritas */
    color: #E67E22;                          /* Naranja */
}

/* ═══════════════════════════════════════════════════════ */
/* AJUSTES MANUALES                                        */
/* ═══════════════════════════════════════════════════════ */
.comis-ajustes[b-i5n8j7o2g6] {
    padding: 0.25rem 0.5rem;                 /* Padding */
}

.comis-ajuste-linea[b-i5n8j7o2g6] {
    display: flex;                           /* Flexbox */
    justify-content: space-between;          /* Espacio entre */
    align-items: center;                     /* Centrado vertical */
    padding: 0.15rem 0;                      /* Padding vertical */
    font-size: var(--texto-8pt);             /* Tamano 8pt */
}

.comis-ajuste-positivo[b-i5n8j7o2g6] {
    color: #2E7D32;                          /* Verde */
}

.comis-ajuste-negativo[b-i5n8j7o2g6] {
    color: #B71C1C;                          /* Rojo */
}

.comis-ajuste-monto[b-i5n8j7o2g6] {
    font-weight: bold;                       /* Negritas */
    display: flex;                           /* Flexbox */
    align-items: center;                     /* Centrado */
    gap: 0.3rem;                             /* Espacio */
}

.comis-ajuste-confirmado[b-i5n8j7o2g6] {
    color: #2E7D32;                          /* Verde */
    font-weight: bold;                       /* Negritas */
}

.comis-ajuste-btn-ok[b-i5n8j7o2g6] {
    background: none;                        /* Sin fondo */
    border: none;                            /* Sin borde */
    color: #2E7D32;                          /* Verde */
    cursor: pointer;                         /* Manita */
    font-weight: bold;                       /* Negritas */
    font-size: var(--texto-9pt);             /* Tamano 9pt */
    padding: 0 0.2rem;                       /* Padding */
}

.comis-ajuste-btn-del[b-i5n8j7o2g6] {
    background: none;                        /* Sin fondo */
    border: none;                            /* Sin borde */
    color: #B71C1C;                          /* Rojo */
    cursor: pointer;                         /* Manita */
    font-weight: bold;                       /* Negritas */
    font-size: var(--texto-9pt);             /* Tamano 9pt */
    padding: 0 0.2rem;                       /* Padding */
}

.comis-ajuste-form[b-i5n8j7o2g6] {
    display: flex;                           /* Flexbox */
    flex-wrap: wrap;                         /* Wrap para celular */
    gap: 0.3rem;                             /* Espacio */
    padding: 0.3rem 0.5rem;                  /* Padding */
    align-items: center;                     /* Centrado */
}

.comis-ajuste-input-concepto[b-i5n8j7o2g6] {
    flex: 1;                                 /* Ocupa espacio */
    font-size: var(--texto-8pt);             /* Tamano 8pt */
    padding: 0.2rem 0.4rem;                  /* Padding */
    border: 1px solid #999;                  /* Borde gris */
}

.comis-ajuste-input-monto[b-i5n8j7o2g6] {
    width: 6rem;                             /* Ancho fijo */
    text-align: right;                       /* Alineado derecha */
    font-size: var(--texto-8pt);             /* Tamano 8pt */
    padding: 0.2rem 0.4rem;                  /* Padding */
    border: 1px solid #999;                  /* Borde gris */
}

.comis-btn-ajuste[b-i5n8j7o2g6] {
    background-color: #37474F;               /* Gris oscuro */
    color: #FFFFFF;                          /* Blanco */
}

/* ═══════════════════════════════════════════════════════ */
/* SEPARADOR (espacio entre fijador y contenido)          */
/* ═══════════════════════════════════════════════════════ */
.comis-separador-top[b-i5n8j7o2g6] {
    margin-top: 0.75rem;                      /* Espacio entre fijador y pendientes */
}

/* ═══════════════════════════════════════════════════════ */
/* MENSAJE DE IMPORTACIÓN                                 */
/* ═══════════════════════════════════════════════════════ */
.comis-importando[b-i5n8j7o2g6] {
    padding: 0.5rem 0.75rem;                  /* Padding */
    background-color: #E3F2FD;                /* Azul claro */
    color: #1565C0;                           /* Azul oscuro */
    border: 1px solid #90CAF9;                /* Borde azul */
    border-radius: 0.25rem;                   /* Esquinas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    margin-bottom: 0.5rem;                    /* Margen inferior */
}

/* ═══════════════════════════════════════════════════════ */
/* SIN DATOS — mensaje + botón IMPORTAR                   */
/* ═══════════════════════════════════════════════════════ */
.comis-sin-datos[b-i5n8j7o2g6] {
    display: flex;                                /* Flexbox */
    align-items: center;                          /* Centrado vertical */
    gap: 1rem;                                    /* Espacio entre texto y botón */
    padding: 1rem;                                /* Padding generoso */
    background-color: #FFF3E0;                    /* Naranja claro */
    color: #E65100;                               /* Naranja oscuro */
    border: 1px solid #FFB74D;                    /* Borde naranja */
    border-radius: 0.25rem;                       /* Esquinas */
    font-size: var(--texto-9pt);                  /* Tamaño 9pt */
    font-weight: bold;                            /* Negritas */
}

.comis-btn-importar[b-i5n8j7o2g6] {
    background-color: #714B67;                    /* Morado de marca Odoo */
    color: #FFFFFF;                               /* Blanco */
    white-space: nowrap;                           /* No cortar texto */
    font-size: var(--texto-8pt);                  /* Alto y letra a juego con [Filtrar Texto] */
}

.comis-btn-importar:disabled[b-i5n8j7o2g6] {
    background-color: #BDBDBD;                    /* Gris */
    cursor: not-allowed;                           /* Cursor no-permitido */
}

/* ═══════════════════════════════════════════════════════ */
/* PENDIENTES (siempre visibles)                          */
/* ═══════════════════════════════════════════════════════ */
.comis-pendientes[b-i5n8j7o2g6] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    border: 1px solid #F9A825;               /* Borde amarillo (son alertas) */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    background-color: #FFFDE7;               /* Fondo amarillo muy claro */
}

.comis-pendientes-titulo[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio entre título y botón */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.4rem 0.75rem;                  /* Padding */
    color: #F57F17;                           /* Amarillo oscuro */
    border-bottom: 1px solid #F9A825;        /* Borde inferior */
}

/* Botón + para agregar pendiente */
/* Usa .boton-chico de app.css — aquí solo color y tamaño */
.comis-btn-agregar[b-i5n8j7o2g6] {
    background-color: #F9A825;               /* Amarillo oscuro */
    color: #FFFFFF;                           /* Blanco */
}

.comis-btn-agregar-grande[b-i5n8j7o2g6] {
    font-size: var(--texto-14pt);             /* Tamaño grande para el + */
    font-weight: bold;                        /* Negritas */
    line-height: 1;                           /* Compacto vertical */
    padding: 0 0.5rem;                        /* Padding horizontal */
}

.comis-pendientes-vacio[b-i5n8j7o2g6] {
    padding: 0.4rem 0.75rem;                  /* Padding */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #999999;                           /* Gris */
    font-style: italic;                       /* Itálica */
}

.comis-pendientes .comis-tabla[b-i5n8j7o2g6] {
    background-color: #FFFFFF;                /* Fondo blanco para la tabla */
}

.comis-fila-pendiente[b-i5n8j7o2g6] {
    background-color: #FFFEF5;               /* Amarillo casi blanco */
}

.comis-pend-ref[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Referencia en negritas */
}

.comis-pend-monto[b-i5n8j7o2g6] {
    white-space: nowrap;                      /* No se parte */
    color: #555555;                           /* Gris medio */
}

/* Match encontrado: fila del pendiente resaltada */
.comis-fila-pendiente-con-match[b-i5n8j7o2g6] {
    background-color: #F3E5F5;               /* Morado muy claro (igual que factura con match) */
}

/* Indicador de match: "→ 28101 · Claudia García · Directa" */
.comis-pend-match[b-i5n8j7o2g6] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    color: #7B1FA2;                           /* Morado (mismo que bandera P#) */
}

/* Sin match: "(sin match)" discreto */
.comis-pend-sinmatch[b-i5n8j7o2g6] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: var(--texto-7pt);
    color: #AAAAAA;                           /* Gris claro */
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════ */
/* TÍTULO DE SECCIÓN (AGENTES)                            */
/* ═══════════════════════════════════════════════════════ */
.comis-seccion-titulo[b-i5n8j7o2g6] {
    background-color: var(--color-eval);      /* Color del módulo Eval */
    padding: 0.5rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espaciado */
    align-items: center;                      /* Centrado vertical */
    flex-wrap: wrap;                          /* Wrap para celular */
    gap: 0.5rem;                              /* Espacio cuando hay wrap */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba */
}

.comis-seccion-nombre[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #FFFFFF;                           /* Blanco */
}

.comis-seccion-resumen[b-i5n8j7o2g6] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #FFFFFF;                           /* Blanco */
}

/* ═══════════════════════════════════════════════════════ */
/* ESTADO DE REVISIONES (badges verdes de quien ya revisó) */
/* ═══════════════════════════════════════════════════════ */
.comis-revisiones-estado[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Wrap para celular */
    gap: 0.4rem;                              /* Espacio entre badges */
    padding: 0.4rem 0.5rem;                   /* Padding */
    margin-bottom: 0.5rem;                    /* Margen inferior */
    background-color: #E8F5E9;                /* Verde muy claro de fondo */
    border-left: 3px solid #2E7D32;           /* Borde verde a la izquierda */
}

.comis-revision-badge[b-i5n8j7o2g6] {
    display: inline-block;                    /* Bloque inline */
    padding: 0.15rem 0.5rem;                  /* Padding */
    background-color: #2E7D32;                /* Verde oscuro */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    border-radius: 0.2rem;                    /* Bordes redondeados */
}

/* ═══════════════════════════════════════════════════════ */
/* ACORDEONES POR AGENTE                                  */
/* ═══════════════════════════════════════════════════════ */
.comis-agente-bloque[b-i5n8j7o2g6] {
    border: 1px solid var(--color-border);    /* Borde gris */
    border-top: none;                         /* Se une al anterior */
}

.comis-agente-bloque:last-of-type[b-i5n8j7o2g6] {
    border-radius: 0 0 0.25rem 0.25rem;       /* Esquinas redondeadas abajo */
    margin-bottom: 0.75rem;                   /* Margen inferior */
}

.comis-agente-header[b-i5n8j7o2g6] {
    background-color: #f5f5f5;                /* Gris muy claro */
    padding: 0.5rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.75rem;                             /* Espacio entre elementos */
    cursor: pointer;                          /* Manita */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
}

.comis-agente-header:hover[b-i5n8j7o2g6] {
    background-color: #ebebeb;                /* Gris más oscuro al hover */
}

.comis-agente-header.abierto[b-i5n8j7o2g6] {
    background-color: #e8e8e8;                /* Gris cuando está abierto */
    border-bottom: 1px solid #d0d0d0;         /* Borde inferior */
}

.comis-agente-nombre[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    min-width: 12rem;                         /* Ancho mínimo para el nombre */
}

.comis-agente-cerrado[b-i5n8j7o2g6] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco */
    background-color: #2E7D32;               /* Verde oscuro */
    padding: 0.1rem 0.4rem;                  /* Padding */
    border-radius: 0.2rem;                   /* Bordes redondeados */
}

.comis-agente-dato[b-i5n8j7o2g6] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #555555;                           /* Gris medio */
    white-space: nowrap;                      /* No se parte */
    margin-left: auto;                        /* Empuja a la derecha */
}

.comis-agente-facturado[b-i5n8j7o2g6] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    white-space: nowrap;                      /* No se parte */
}

.comis-agente-comision[b-i5n8j7o2g6] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: bold;                        /* Negritas */
    color: #2E7D32;                           /* Verde oscuro */
    white-space: nowrap;                      /* No se parte */
}

.comis-agente-contenido[b-i5n8j7o2g6] {
    padding: 0.5rem;                          /* Padding */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ═══════════════════════════════════════════════════════ */
/* BLOQUES DE COBRANZA (3 por agente)                     */
/* ═══════════════════════════════════════════════════════ */
.comis-bloque[b-i5n8j7o2g6] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    border: 1px solid var(--color-border);    /* Borde */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.comis-bloque:last-of-type[b-i5n8j7o2g6] {
    margin-bottom: 0.5rem;                    /* Menos margen en el último */
}

/* Encabezados de bloque con colores por categoría */
.comis-bloque-header[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    flex-wrap: wrap;                          /* Wrap para celular */
    gap: 0.6rem;                              /* Espacio entre elementos */
    padding: 0.35rem 0.6rem;                  /* Padding */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas arriba */
    cursor: pointer;                          /* Clickeable */
}

.comis-bh-directa[b-i5n8j7o2g6] {
    background-color: #E8F5E9;               /* Verde muy claro */
    color: #1B5E20;                           /* Verde oscuro */
}

.comis-bh-referenciada[b-i5n8j7o2g6] {
    background-color: #FFF9C4;               /* Amarillo claro */
    color: #F57F17;                           /* Amarillo oscuro */
}

.comis-bh-sincomision[b-i5n8j7o2g6] {
    background-color: #FFCDD2;               /* Rojo claro */
    color: #B71C1C;                           /* Rojo oscuro */
}

.comis-bh-excluida[b-i5n8j7o2g6] {
    background-color: #E0E0E0;               /* Gris */
    color: #424242;                           /* Gris oscuro */
}

.comis-bloque-titulo[b-i5n8j7o2g6] {
    flex: 1;                                  /* Ocupa espacio restante */
}

.acordeon-flecha-bloque[b-i5n8j7o2g6] {
    font-size: var(--texto-7pt);              /* Flechita pequeña */
    width: 0.8rem;                            /* Ancho fijo */
}

.comis-bloque-count[b-i5n8j7o2g6] {
    font-weight: normal;                      /* Sin negritas */
    white-space: nowrap;                      /* No se parte */
}

.comis-bloque-subtotal-header[b-i5n8j7o2g6] {
    font-weight: normal;                      /* Sin negritas */
    white-space: nowrap;                      /* No se parte */
    margin-left: auto;                        /* Empuja a la derecha */
}

.comis-bloque-comision-header[b-i5n8j7o2g6] {
    white-space: nowrap;                      /* No se parte */
}

/* Pie del bloque: Total, % Comisión, Comisión a Cobrar */
.comis-bloque-pie[b-i5n8j7o2g6] {
    padding: 0.4rem 0.6rem;                   /* Padding */
    background-color: #FAFAFA;                /* Gris muy claro */
    border-top: 1px solid var(--color-border); /* Línea separadora */
}

.comis-bloque-linea[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado a la derecha */
    gap: 0.75rem;                             /* Espacio entre label y valor */
    padding: 0.1rem 0;                        /* Padding vertical */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.comis-bloque-valor[b-i5n8j7o2g6] {
    min-width: 6rem;                          /* Ancho mínimo */
    text-align: right;                        /* Alineado derecha */
    font-weight: bold;                        /* Negritas */
}

.comis-bloque-linea-total[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño un poco más grande */
    border-top: 1px solid #333333;            /* Línea arriba */
    padding-top: 0.25rem;                     /* Padding */
    margin-top: 0.15rem;                      /* Margen */
}

.comis-bloque-valor-total[b-i5n8j7o2g6] {
    min-width: 6rem;                          /* Ancho mínimo */
    text-align: right;                        /* Alineado derecha */
    color: #2E7D32;                           /* Verde oscuro */
    font-weight: bold;                        /* Negritas */
}

/* ═══════════════════════════════════════════════════════ */
/* TOTAL GENERAL DEL AGENTE                               */
/* ═══════════════════════════════════════════════════════ */
/* ── Descuentos (antes del total del agente) ── */
.comis-descuentos[b-i5n8j7o2g6] {
    padding: 0.3rem 0.6rem;                   /* Padding lateral */
}

.comis-descuento-linea[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Extremos */
    padding: 0.15rem 0;                       /* Espacio vertical mínimo */
    font-size: var(--texto-8pt);              /* Tamaño chico */
    color: #B71C1C;                           /* Rojo oscuro */
}

.comis-descuento-monto[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Negritas */
    min-width: 6rem;                          /* Ancho mínimo alineado con total */
    text-align: right;                        /* Derecha */
}

.comis-agente-gran-total[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado a la derecha */
    align-items: center;                      /* Centrado vertical */
    flex-wrap: wrap;                          /* Wrap para celular */
    gap: 1rem;                                /* Espacio */
    padding: 0.5rem 0.6rem;                   /* Padding */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    border-top: 2px solid #333333;            /* Línea doble arriba */
}

.comis-gran-total-monto[b-i5n8j7o2g6] {
    min-width: 6rem;                          /* Ancho mínimo */
    text-align: right;                        /* Alineado derecha */
    color: #2E7D32;                           /* Verde oscuro */
    font-size: var(--texto-12pt);             /* Tamaño grande */
}

/* ═══════════════════════════════════════════════════════ */
/* TABLA GENÉRICA (facturas, pendientes, log)             */
/* ═══════════════════════════════════════════════════════ */
.comis-tabla[b-i5n8j7o2g6] {
    width: 100%;                              /* Ancho completo */
    border-collapse: collapse;                /* Bordes colapsados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.comis-tabla th[b-i5n8j7o2g6],
.comis-tabla td[b-i5n8j7o2g6] {
    padding: 0.25rem 0.5rem;                  /* Padding */
    text-align: left;                         /* Default izquierda */
    border-bottom: 1px solid #EEEEEE;         /* Borde inferior sutil */
}

.comis-tabla th[b-i5n8j7o2g6] {
    background-color: #FAFAFA;                /* Gris muy claro */
    font-weight: bold;                        /* Negritas */
    border-bottom: 1px solid var(--color-border); /* Borde más visible */
}

/* Headers sorteables — cursor manita + indicador visual */
.comis-th-sort[b-i5n8j7o2g6] {
    cursor: pointer;                          /* Manita */
    user-select: none;                        /* No seleccionar texto */
    white-space: nowrap;                      /* No partir header */
}

.comis-th-sort:hover[b-i5n8j7o2g6] {
    background-color: #F0F0F0;               /* Gris al hover */
}

/* ── Alineación por columna ── */
.comis-td-factura[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Número de factura en negritas */
    white-space: nowrap;                      /* No se parte */
}

.comis-td-fecfac[b-i5n8j7o2g6],
.comis-td-fecvenc[b-i5n8j7o2g6],
.comis-td-regpago[b-i5n8j7o2g6] {
    white-space: nowrap;                      /* Fechas no se parten */
}

.comis-td-credito[b-i5n8j7o2g6] {
    white-space: nowrap;                      /* Crédito no se parte */
}

/* Prefijo .comis-tabla para ganar especificidad sobre .comis-tabla th */
.comis-tabla .comis-td-dias[b-i5n8j7o2g6] {
    text-align: center;                       /* Días vencida centrados */
}

.comis-tabla .comis-td-subtotal[b-i5n8j7o2g6] {
    text-align: right;                        /* Montos a la derecha */
    font-weight: bold;                        /* Negritas */
    white-space: nowrap;                      /* No se parte */
}

.comis-td-accion[b-i5n8j7o2g6] {
    width: 2rem;                              /* Columna estrecha */
    text-align: center;                       /* Centrado */
    padding: 0.15rem 0.25rem;                 /* Padding compacto */
}

/* Colores para filas según categoría */
.comis-fila-referenciada[b-i5n8j7o2g6] {
    background-color: #FFFDE7;               /* Amarillo muy claro */
}

.comis-fila-sincomision[b-i5n8j7o2g6] {
    background-color: #FFF8F8;               /* Rojo muy muy claro */
}

/* Días vencida: colores de alerta */
.comis-dias-vencido[b-i5n8j7o2g6] {
    color: #E65100;                           /* Naranja */
    font-weight: bold;                        /* Negritas */
}

.comis-dias-critico[b-i5n8j7o2g6] {
    color: #B71C1C;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
    background-color: #FFEBEE;               /* Fondo rojo muy claro para énfasis */
}

/* ═══════════════════════════════════════════════════════ */
/* ACORDEÓN GENÉRICO (Log)                                */
/* Mismo patrón que MinDetalle                            */
/* ═══════════════════════════════════════════════════════ */
.seccion-acordeon[b-i5n8j7o2g6] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    border: 1px solid var(--color-border);    /* Borde gris */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.acordeon-header[b-i5n8j7o2g6] {
    background-color: #e8e8e8;                /* Gris claro */
    padding: 0.4rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio entre elementos */
    cursor: pointer;                          /* Manita */
}

.acordeon-header:hover[b-i5n8j7o2g6] {
    background-color: #d8d8d8;                /* Gris más oscuro al hover */
}

.acordeon-header.abierto[b-i5n8j7o2g6] {
    background-color: #d0d0d0;                /* Gris cuando está abierto */
}

.acordeon-flecha[b-i5n8j7o2g6] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 1rem;                              /* Ancho fijo */
    color: #606060;                           /* Gris */
}

.acordeon-titulo[b-i5n8j7o2g6] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

.acordeon-contenido[b-i5n8j7o2g6] {
    padding: 0.5rem 0.75rem;                  /* Padding */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ═══════════════════════════════════════════════════════ */
/* LOG: columna de fecha                                  */
/* ═══════════════════════════════════════════════════════ */
.comis-log-fecha[b-i5n8j7o2g6] {
    white-space: nowrap;                      /* Fecha no se parte */
    color: #666666;                           /* Gris */
}

/* ═══════════════════════════════════════════════════════ */
/* FILA EXCLUIDA (gris)                                   */
/* ═══════════════════════════════════════════════════════ */
.comis-fila-excluida[b-i5n8j7o2g6] {
    background-color: #F5F5F5;                /* Gris muy claro */
}

/* ═══════════════════════════════════════════════════════ */
/* FILA CON MATCH DE PENDIENTE (morado claro)             */
/* ═══════════════════════════════════════════════════════ */
.comis-fila-pendiente-match[b-i5n8j7o2g6] {
    background-color: #F3E5F5;               /* Morado muy claro */
}

/* Bandera P# antes del número de factura */
.comis-bandera-pendiente[b-i5n8j7o2g6] {
    display: inline-block;
    background-color: #7B1FA2;               /* Morado */
    color: #FFFFFF;
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.05rem 0.3rem;
    border-radius: 0.2rem;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════ */
/* CHECKBOX DE SELECCIÓN (columna en tabla de facturas)    */
/* ═══════════════════════════════════════════════════════ */
.comis-td-check[b-i5n8j7o2g6] {
    width: 1.5rem;                            /* Columna estrecha */
    text-align: center;                       /* Centrado */
    padding: 0.15rem 0.25rem;                 /* Compacto */
}

.comis-td-check input[type="checkbox"][b-i5n8j7o2g6] {
    cursor: pointer;
    width: 0.9rem;
    height: 0.9rem;
}

/* ═══════════════════════════════════════════════════════ */
/* BOTÓN RECLASIFICAR EN LOTE (header del agente)         */
/* ═══════════════════════════════════════════════════════ */
.comis-btn-reclasificar-lote[b-i5n8j7o2g6] {
    background-color: #1976D2;               /* Azul */
    color: #FFFFFF;
    font-size: var(--texto-8pt);
    margin-left: 0.5rem;
}

.comis-btn-reclasificar-lote:hover[b-i5n8j7o2g6] {
    background-color: #1565C0;               /* Azul más oscuro */
}

/* ═══════════════════════════════════════════════════════ */
/* BOTONES DE ACCIÓN POR FACTURA (✓/✗ y editar)           */
/* ═══════════════════════════════════════════════════════ */
.comis-btn-accion[b-i5n8j7o2g6] {
    display: inline-flex;                     /* Flexbox inline */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
    width: 1.6rem;                            /* Ancho fijo */
    height: 1.4rem;                           /* Alto fijo */
    border: none;                             /* Sin borde */
    border-radius: 0.2rem;                    /* Esquinas redondeadas */
    cursor: pointer;                          /* Manita */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    line-height: 1;                           /* Compacto */
}

.comis-btn-propuesta[b-i5n8j7o2g6] {
    background-color: #D32F2F;               /* Rojo */
    color: #FFFFFF;                           /* Blanco */
}

.comis-btn-propuesta:hover[b-i5n8j7o2g6] {
    background-color: #B71C1C;               /* Rojo más oscuro */
}

.comis-btn-editar[b-i5n8j7o2g6] {
    background-color: #1976D2;               /* Azul */
    color: #FFFFFF;                           /* Blanco */
}

.comis-btn-editar:hover[b-i5n8j7o2g6] {
    background-color: #1565C0;               /* Azul más oscuro */
}

.comis-btn-confirmar[b-i5n8j7o2g6] {
    background-color: #2E7D32;               /* Verde oscuro */
    color: #FFFFFF;
}

.comis-btn-confirmar:hover[b-i5n8j7o2g6] {
    background-color: #1B5E20;               /* Verde más oscuro */
}

.comis-btn-rechazar[b-i5n8j7o2g6] {
    background-color: #D32F2F;               /* Rojo */
    color: #FFFFFF;
}

.comis-btn-rechazar:hover[b-i5n8j7o2g6] {
    background-color: #B71C1C;               /* Rojo más oscuro */
}

/* ═══════════════════════════════════════════════════════ */
/* BOTÓN CANCELAR PENDIENTE (✕ en tabla de pendientes)    */
/* ═══════════════════════════════════════════════════════ */
.comis-btn-cancelar-pend[b-i5n8j7o2g6] {
    background: none;                         /* Sin fondo */
    border: none;                             /* Sin borde */
    color: #D32F2F;                           /* Rojo */
    cursor: pointer;                          /* Manita */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: bold;                        /* Negritas */
    padding: 0 0.25rem;                       /* Padding mínimo */
}

.comis-btn-cancelar-pend:hover[b-i5n8j7o2g6] {
    color: #B71C1C;                           /* Rojo más oscuro */
}

/* ═══════════════════════════════════════════════════════ */
/* MODALES (patrón EST_05 con prefijo comis-)             */
/* ═══════════════════════════════════════════════════════ */
.comis-modal-overlay[b-i5n8j7o2g6] {
    position: fixed;                          /* Fijo */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);    /* Fondo oscuro semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
}

.comis-modal-contenedor[b-i5n8j7o2g6] {
    background-color: white;
    border-radius: 8px;                       /* Esquinas redondeadas */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;                         /* Modal compacto */
    max-height: 90vh;
    overflow-y: auto;
}

.comis-modal-header[b-i5n8j7o2g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;                    /* Padding compacto */
    border-bottom: 1px solid #e0e0e0;
}

.comis-modal-header h3[b-i5n8j7o2g6] {
    margin: 0;
    font-size: var(--texto-12pt);
}

.comis-modal-cerrar[b-i5n8j7o2g6] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #666666;
}

.comis-modal-body[b-i5n8j7o2g6] {
    padding: 1rem;
    font-size: var(--texto-9pt);
}

.comis-modal-campo[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    align-items: baseline;                    /* Alineado a baseline */
    gap: 0.5rem;                              /* Espacio */
    margin-bottom: 0.6rem;                    /* Margen inferior */
}

/* Variante para campos con textarea: alinea label al top en lugar del baseline */
.comis-modal-campo-textarea[b-i5n8j7o2g6] {
    align-items: flex-start;                  /* Label al tope, textarea expande hacia abajo */
}

.comis-modal-label[b-i5n8j7o2g6] {
    min-width: 6rem;                          /* Ancho mínimo para labels */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #333333;
}

.comis-modal-valor[b-i5n8j7o2g6] {
    font-size: var(--texto-9pt);
    color: #555555;
}

.comis-modal-select[b-i5n8j7o2g6] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.comis-modal-textarea[b-i5n8j7o2g6] {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.3rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    resize: vertical;
    font-family: inherit;
}

.comis-modal-error[b-i5n8j7o2g6] {
    color: #D32F2F;
    font-size: var(--texto-8pt);
    font-weight: bold;
    margin-top: 0.5rem;
}

.comis-modal-footer[b-i5n8j7o2g6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e0e0e0;
}

.comis-modal-btn-cancelar[b-i5n8j7o2g6] {
    background-color: #757575;               /* Gris */
    color: #FFFFFF;
}

.comis-modal-btn-confirmar[b-i5n8j7o2g6] {
    background-color: forestgreen;
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════ */
/* HEADERS DE COLOR - variantes (alerta roja, éxito verde, naranja) */
/* ═══════════════════════════════════════════════════════ */
.comis-modal-header-alerta[b-i5n8j7o2g6],
.comis-modal-header-exito[b-i5n8j7o2g6],
.comis-modal-header-naranja[b-i5n8j7o2g6] {
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Título a la izq, X a la der */
    align-items: center;                      /* Centrado vertical */
    padding: 0.6rem 1rem;                     /* Padding */
    color: #FFFFFF;                           /* Texto blanco */
}

.comis-modal-header-alerta[b-i5n8j7o2g6] {
    background-color: #CC0000;                /* Rojo de alerta */
}

.comis-modal-header-exito[b-i5n8j7o2g6] {
    background-color: #2E7D32;                /* Verde de confirmación */
}

.comis-modal-header-naranja[b-i5n8j7o2g6] {
    background-color: #E65100;                /* Naranja oscuro - Crear Pendiente */
}

.comis-modal-header-alerta h3[b-i5n8j7o2g6],
.comis-modal-header-exito h3[b-i5n8j7o2g6],
.comis-modal-header-naranja h3[b-i5n8j7o2g6] {
    margin: 0;                                /* Sin margen */
    color: #FFFFFF;                           /* Blanco forzado */
    font-size: var(--texto-12pt);             /* Mismo tamaño que .comis-modal-header h3 */
}

.comis-modal-header-alerta .comis-modal-cerrar[b-i5n8j7o2g6],
.comis-modal-header-exito .comis-modal-cerrar[b-i5n8j7o2g6],
.comis-modal-header-naranja .comis-modal-cerrar[b-i5n8j7o2g6] {
    color: #FFFFFF;                           /* X blanca sobre fondo de color */
}

.comis-modal-body-centrado[b-i5n8j7o2g6] {
    text-align: center;                       /* Texto centrado */
}

.comis-modal-revisores-lista[b-i5n8j7o2g6] {
    margin: 0.5rem 0;                         /* Margen vertical */
}

.comis-modal-footer-columna[b-i5n8j7o2g6] {
    flex-direction: column;                   /* Botones apilados verticalmente */
    gap: 0.4rem;                              /* Espacio entre botones */
}

.comis-modal-btn-ancho[b-i5n8j7o2g6] {
    width: 100%;                              /* Ancho completo */
    margin: 0;                                /* Reset margin-right heredado de .boton-chico */
}

.comis-modal-btn-peligro[b-i5n8j7o2g6] {
    background-color: #CC0000;                /* Rojo de peligro */
    color: #FFFFFF;                           /* Blanco */
}

/* ═══════════════════════════════════════════════════════ */
/* RESPONSIVE                                              */
/*                                                         */
/* Tabla de FACTURAS (.comis-tabla-facturas):              */
/*   Grid 6 columnas × 2 filas con minmax(0, ...) para     */
/*   permitir compresión y evitar overflow en celular.     */
/*                                                         */
/* Tablas AUXILIARES (Pendientes, Diferencias, Log):       */
/*   Filas convertidas en bloques verticales apilados      */
/*   (cada celda es una línea), para que no desborden.     */
/* ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Oculta separador en barra de filtros (el wrap natural toma su lugar) */
    .comis-separador-barra[b-i5n8j7o2g6] {
        display: none;
    }

    /* Agente header: nombre ocupa todo el ancho */
    .comis-agente-nombre[b-i5n8j7o2g6] {
        flex-basis: 100%;
        min-width: auto;
    }

    .comis-agente-comision[b-i5n8j7o2g6] {
        margin-left: 0;
    }

    /* ═══════════════════════════════════════════════════ */
    /* TABLA DE FACTURAS — grid de 6 columnas × 2 filas    */
    /* ═══════════════════════════════════════════════════ */
    .comis-tabla-facturas thead[b-i5n8j7o2g6] {
        display: none;                       /* Headers ocultos en celular */
    }

    .comis-tabla-facturas tbody[b-i5n8j7o2g6] {
        display: block;
    }

    .comis-tabla-facturas tbody tr[b-i5n8j7o2g6] {
        display: grid;
        /* minmax(0, X) permite que las columnas se compriman si no caben */
        grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
        grid-template-rows: auto auto;
        gap: 0.1rem 0.2rem;
        padding: 0.35rem 0.4rem;
        border-bottom: 1px solid #DDDDDD;
        align-items: center;
    }

    /* Reset del padding heredado de .comis-tabla td (96px en 6 cols) */
    .comis-tabla-facturas tbody td[b-i5n8j7o2g6] {
        padding: 0;
        border-bottom: none;
    }

    /* ═══ LÍNEA 1: Check | Factura | Cliente | Subtotal | Acción ═══ */
    .comis-tabla-facturas .comis-td-check[b-i5n8j7o2g6] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
    }

    .comis-tabla-facturas .comis-td-factura[b-i5n8j7o2g6] {
        grid-row: 1;
        grid-column: 2;
        font-size: var(--texto-8pt);
    }

    .comis-tabla-facturas .comis-td-cliente[b-i5n8j7o2g6] {
        grid-row: 1;
        grid-column: 3 / 5;                  /* Ocupa cols 3-4 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;                        /* Permite compresión */
        font-size: var(--texto-8pt);
    }

    .comis-tabla-facturas .comis-td-subtotal[b-i5n8j7o2g6] {
        grid-row: 1;
        grid-column: 5;
        font-size: var(--texto-8pt);
        text-align: right;
    }

    .comis-tabla-facturas .comis-td-accion[b-i5n8j7o2g6] {
        grid-row: 1;
        grid-column: 6;
        width: auto;
        display: flex;                       /* Flex para wrap interno */
        flex-wrap: wrap;                     /* Permite que los botones envuelvan si no caben */
        gap: 0.15rem;
        justify-content: flex-end;
        align-items: center;
    }

    /* ═══ LÍNEA 2: Fec.Fac | Fec.Venc | Crédito | Reg.Pago | Días ═══ */
    .comis-tabla-facturas .comis-td-fecfac[b-i5n8j7o2g6] {
        grid-row: 2;
        grid-column: 2;
        font-size: var(--texto-7pt);
        color: #777777;
    }

    .comis-tabla-facturas .comis-td-fecvenc[b-i5n8j7o2g6] {
        grid-row: 2;
        grid-column: 3;
        font-size: var(--texto-7pt);
        color: #777777;
    }

    .comis-tabla-facturas .comis-td-credito[b-i5n8j7o2g6] {
        grid-row: 2;
        grid-column: 4;
        font-size: var(--texto-7pt);
        color: #777777;
    }

    .comis-tabla-facturas .comis-td-regpago[b-i5n8j7o2g6] {
        grid-row: 2;
        grid-column: 5;
        font-size: var(--texto-7pt);
        color: #777777;
    }

    .comis-tabla-facturas .comis-td-dias[b-i5n8j7o2g6] {
        grid-row: 2;
        grid-column: 6;
        font-size: var(--texto-7pt);
        text-align: center;
    }

    /* ═══════════════════════════════════════════════════ */
    /* TABLAS AUXILIARES — Pendientes, Diferencias, Log    */
    /* Filas se vuelven bloques verticales (1 celda/línea) */
    /* ═══════════════════════════════════════════════════ */
    .comis-pendientes .comis-tabla thead[b-i5n8j7o2g6],
    .seccion-acordeon .comis-tabla thead[b-i5n8j7o2g6] {
        display: none;
    }

    .comis-pendientes .comis-tabla tbody[b-i5n8j7o2g6],
    .seccion-acordeon .comis-tabla tbody[b-i5n8j7o2g6] {
        display: block;
    }

    .comis-pendientes .comis-tabla tbody tr[b-i5n8j7o2g6],
    .seccion-acordeon .comis-tabla tbody tr[b-i5n8j7o2g6] {
        display: block;
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid #DDDDDD;
    }

    .comis-pendientes .comis-tabla tbody td[b-i5n8j7o2g6],
    .seccion-acordeon .comis-tabla tbody td[b-i5n8j7o2g6] {
        display: block;
        padding: 0.1rem 0;
        border-bottom: none;
        font-size: var(--texto-8pt);
        white-space: normal;                 /* Permite wrap a varias líneas */
    }

    /* Acción se alinea a la derecha y separa del contenido anterior */
    .comis-pendientes .comis-tabla tbody td.comis-td-accion[b-i5n8j7o2g6],
    .seccion-acordeon .comis-tabla tbody td.comis-td-accion[b-i5n8j7o2g6] {
        text-align: right;
        margin-top: 0.25rem;
        width: auto;
    }

    /* Modal: ancho completo en móvil */
    .comis-modal-contenedor[b-i5n8j7o2g6] {
        max-width: 95%;
    }

    .comis-modal-campo[b-i5n8j7o2g6] {
        flex-direction: column;
        gap: 0.2rem;
    }

    .comis-modal-label[b-i5n8j7o2g6] {
        min-width: auto;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* SPINNER                                                */
/* ═══════════════════════════════════════════════════════ */
.sirei-spinner[b-i5n8j7o2g6] {
    --spinner-color: var(--color-eval);       /* Color del módulo Evaluación */
}
/* _content/SiREI_2026/Components/Pages/04Eva/EvaConsulta.razor.rz.scp.css */
/*
   EvaConsulta.razor.css
   Consulta de evaluaciones de desempeño.
   Módulo 04Eva (Azul).
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-9fpamuhkw6] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Solo el color, lo demás viene del app.css */
.barra-filtros[b-9fpamuhkw6] {
    background-color: #E0F0FF;                /* Azul claro - módulo 04Eva (derivado de --color-eval) */
}

/* ===== ENCABEZADO DE COLUMNAS ===== */
.eval-header[b-9fpamuhkw6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    text-align: center;                       /* Texto centrado */
    width: 100%;                              /* Ancho completo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    border-bottom: 1px solid #DCDCDC;         /* Borde gris claro */
    background-color: #FFFFFF;                /* Blanco */
}

/* Estilos de encabezados por columna */
.eval-col-nomHeader[b-9fpamuhkw6] {
    flex: 4;                                  /* 4 partes del espacio */
    min-width: 9.375rem;                      /* Mínimo (150px) */
}

.eval-header .eval-col-eval[b-9fpamuhkw6] {
    flex: 1.25;                               /* Icono + Evaluación */
    min-width: 3.5rem;                        /* Mínimo (56px) */
}

.eval-header .eval-col-esf[b-9fpamuhkw6] {
    color: #008B8B;                           /* DarkCyan */
}

.eval-header .eval-col-vol[b-9fpamuhkw6] {
    color: #6B8E23;                           /* OliveDrab */
}

.eval-header .eval-col-cr[b-9fpamuhkw6] {
    color: #228B22;                           /* ForestGreen */
}

.eval-header .eval-col-fa[b-9fpamuhkw6] {
    color: #CC0000;                           /* Rojo oscuro */
    font-weight: bold;                        /* Negritas */
}

.eval-header .eval-col-inc[b-9fpamuhkw6] {
    color: #CC0000;                           /* Rojo oscuro */
    font-weight: bold;                        /* Negritas */
}

.eval-header .eval-col-cu[b-9fpamuhkw6] {
    color: #8B0000;                           /* DarkRed */
    font-weight: bold;                        /* Negritas */
}

/* Totales en encabezados */
.header-total[b-9fpamuhkw6] {
    display: block;                           /* En nueva línea */
    font-size: var(--texto-8pt);              /* Tamaño pequeño */
    font-weight: normal;                      /* Sin negritas */
    color: #666666;                           /* Gris */
}

.header-total-bold[b-9fpamuhkw6] {
    font-weight: bold;                        /* Negritas para Eval e Inc */
}

.header-total-rojo[b-9fpamuhkw6] {
    color: #CC0000;                           /* Rojo para Inconformidades */
}

/* ===== LISTADO DE EVALUACIONES ===== */
.eval-list[b-9fpamuhkw6] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0;                                   /* Sin gap */
}

/* ===== COLUMNAS ===== */
/* Contenedor de cada fila */
.eval-item[b-9fpamuhkw6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    width: 100%;                              /* Ancho completo */
    padding: 0.625rem 0;                      /* Padding vertical (10px) */
    border-bottom: 1px solid #EEEEEE;         /* Borde gris claro */
}

/* Columna de Nombre: La que más espacio ocupa */
.eval-col-nombre[b-9fpamuhkw6] {
    flex: 4;                                  /* 4 partes del espacio */
    min-width: 9.375rem;                      /* Mínimo (150px) */
    padding: 0 0.625rem;                      /* Padding horizontal (10px) */
}

/* Columnas de Datos: Reparto uniforme */
.eval-col-icono[b-9fpamuhkw6],
.eval-col-eval[b-9fpamuhkw6],
.eval-col-esf[b-9fpamuhkw6],
.eval-col-vol[b-9fpamuhkw6],
.eval-col-cr[b-9fpamuhkw6],
.eval-col-fa[b-9fpamuhkw6],
.eval-col-inc[b-9fpamuhkw6],
.eval-col-cu[b-9fpamuhkw6] {
    flex: 1;                                  /* Tamaño uniforme */
    text-align: center;                       /* Centrado */
    min-width: 2.8125rem;                     /* Mínimo (45px) */
}

/* Ajuste especial para el icono */
.eval-col-icono[b-9fpamuhkw6] {
    flex: 0.25;                               /* Más pequeño */
    min-width: 0.75rem;                       /* Mínimo (12px) */
    text-align: right;                        /* Alineado derecha */
}

.eval-col-eval[b-9fpamuhkw6] {
    font-weight: bold;                        /* Negritas */
}

/* Alternancia de colores */
.eval-item-normal[b-9fpamuhkw6] {
    color: #333333;                           /* Gris oscuro */
}

.eval-item-alterna[b-9fpamuhkw6] {
    color: #284775;                           /* Azul oscuro */
}

/* Sin actividad (Eval=0) - fondo gris claro, todos los valores en gris */
.eval-item-sinactividad[b-9fpamuhkw6] {
    background-color: #F0F0F0;                /* Gris claro */
    color: #999999;                           /* Texto gris */
}

.eval-item-sinactividad .valor-eval[b-9fpamuhkw6],
.eval-item-sinactividad .valor-esf[b-9fpamuhkw6],
.eval-item-sinactividad .valor-vol[b-9fpamuhkw6],
.eval-item-sinactividad .valor-cr[b-9fpamuhkw6],
.eval-item-sinactividad .valor-fa[b-9fpamuhkw6],
.eval-item-sinactividad .valor-inc[b-9fpamuhkw6],
.eval-item-sinactividad .valor-cu[b-9fpamuhkw6],
.eval-item-sinactividad .icono-eval[b-9fpamuhkw6] {
    color: #999999 !important;                /* Mismo gris para todos los valores */
}

/* ===== ICONOS DE EVALUACIÓN ===== */
.icono-eval[b-9fpamuhkw6] {
    font-size: var(--texto-16pt);             /* Tamaño grande (20px aprox) */
    font-weight: bold;                        /* Negritas */
    transform: scaleX(1.2);                   /* Expande horizontalmente 20% */
}

/* Rojo doble flecha abajo (< 70) */
.icono-r2[b-9fpamuhkw6] {
    color: #FF0000;                           /* Rojo */
}

/* Rojo flecha abajo (< 95) */
.icono-r1[b-9fpamuhkw6] {
    color: #FF0000;                           /* Rojo */
}

/* Verde flecha arriba (< 105) */
.icono-v1[b-9fpamuhkw6] {
    color: #00FF00;                           /* Verde limón (Lime) */
}

/* Verde doble flecha arriba (>= 105) */
.icono-v2[b-9fpamuhkw6] {
    color: #00FF00;                           /* Verde limón (Lime) */
}

/* ===== VALORES DE EVALUACIÓN ===== */
/* Evaluación (número grande) */
.valor-eval[b-9fpamuhkw6] {
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
    font-weight: bold;                        /* Negritas */
}

.valor-rojo[b-9fpamuhkw6] {
    color: #FF0000;                           /* Rojo */
}

.valor-verde[b-9fpamuhkw6] {
    color: #00FF00;                           /* Verde limón (Lime) */
}

/* Esfuerzo */
.valor-esf[b-9fpamuhkw6] {
    color: #008B8B;                           /* DarkCyan */
}

/* Volumen */
.valor-vol[b-9fpamuhkw6] {
    color: #6B8E23;                           /* OliveDrab */
}

/* Acreditadas */
.valor-cr[b-9fpamuhkw6] {
    color: #228B22;                           /* ForestGreen */
}

/* Faltas */
.valor-fa[b-9fpamuhkw6] {
    color: #CC0000;                           /* Rojo oscuro */
}

/* Inconformidades */
.valor-inc[b-9fpamuhkw6] {
    color: #CC0000;                           /* Rojo oscuro */
}

/* Cuellos de Botella */
.valor-cu[b-9fpamuhkw6] {
    color: #8B0000;                           /* DarkRed */
}

/* ===== RESPONSIVE ===== */
/* Por defecto (PC): Escondemos el texto corto */
.d-movil[b-9fpamuhkw6] {
    display: none;                            /* Oculto en PC */
}

@media (max-width: 768px) {
    /* Celular: Escondemos el largo y mostramos el corto */
    .d-pc[b-9fpamuhkw6] {
        display: none;                        /* Oculto en móvil */
    }

    .d-movil[b-9fpamuhkw6] {
        display: inline;                      /* Visible en móvil */
    }

    .eval-item[b-9fpamuhkw6] {
        flex-wrap: wrap;                      /* Permite wrap */
    }

    .eval-col-nombre[b-9fpamuhkw6] {
        width: 100%;                          /* Ancho completo */
        min-width: 100%;                      /* Sin mínimo */
        margin-bottom: 0.31rem;               /* Margen inferior (5px) */
    }

    .eval-col-nomHeader[b-9fpamuhkw6] {
        display: none;                        /* Oculto en móvil */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-9fpamuhkw6] {
    --spinner-color: var(--color-eval);
}
/* _content/SiREI_2026/Components/Pages/04Eva/EvaCreditos.razor.rz.scp.css */
/*
   EvaCreditos.razor.css
   Créditos y faltas de evaluaciones.
   Migrado de: SiREI_2009/04Eva/CreFal.aspx
   Módulo 04Eva (Azul --color-eval).

   Colores de fondo según tipo:
   - Créditos (IDCat < 50): Verde claro #F0FFF0 (honeydew)
   - Faltas (IDCat >= 50): Rosa claro #FFF0F5 (lavenderblush)
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Solo pegamos la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-f307lle72e] {
    padding-top: 0;                           /* Sin padding superior */
}

/* ===== BARRA DE FILTROS ===== */
/* Sobrescribe color de fondo para módulo Evaluaciones (azul claro) */
.barra-filtros[b-f307lle72e] {
    background-color: #E0F0FF;                /* Azul muy claro */
}

/* ===== LISTA DE EVALUACIONES ===== */
.lista-evaluaciones[b-f307lle72e] {
    background-color: #FFFFFF;                /* Blanco */
    padding: 0;                               /* Sin padding */
    margin: 0;                                /* Sin margen */
}

/* Cada item de evaluación (crédito o falta) */
.eva-item[b-f307lle72e] {
    display: flex;                            /* Flexbox */
    gap: 1rem;                                /* Gap (16px) */
    padding: 0.5rem 0.75rem;                  /* Padding (8px 12px) */
    border-bottom: 1px solid #808080;         /* Borde gris */
    font-family: Arial, sans-serif;           /* Fuente Arial */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    line-height: var(--line-height-compacto); /* Altura de línea compacta */
    align-items: center;                      /* Centrado vertical */
}

/* Color de fondo para CRÉDITOS (verde claro) */
.eva-credito[b-f307lle72e] {
    background-color: #F0FFF0;                /* Honeydew (verde muy claro) */
}

/* Color de fondo para FALTAS (rosa claro) */
.eva-falta[b-f307lle72e] {
    background-color: #FFF0F5;                /* Lavenderblush (rosa muy claro) */
}

/* ===== COLUMNAS DEL ITEM ===== */
/* Fecha - ancho fijo para alinear */
.eva-fecha[b-f307lle72e] {
    min-width: 6.5rem;                        /* Mínimo (104px) */
    flex-shrink: 0;                           /* No encoge */
    color: #333333;                           /* Gris oscuro */
}

/* Nombre del usuario + departamento - ancho flexible */
.eva-nombre[b-f307lle72e] {
    min-width: 18rem;                         /* Mínimo (288px) */
    flex-shrink: 0;                           /* No encoge */
    color: #333333;                           /* Gris oscuro */
}

/* Detalle: valor + descripción + link al req */
.eva-detalle[b-f307lle72e] {
    flex: 1;                                  /* Ocupa espacio restante */
    display: flex;                            /* Flexbox */
    gap: 0.3rem;                              /* Gap pequeño */
    flex-wrap: wrap;                          /* Permite wrap */
    align-items: baseline;                    /* Alineado a la base */
}

/* Valor (puntos) en negrita */
.eva-valor[b-f307lle72e] {
    font-weight: bold;                        /* Negritas */
    color: #333333;                           /* Gris oscuro */
}

/* Descripción de la evaluación */
.eva-descripcion[b-f307lle72e] {
    color: #333333;                           /* Gris oscuro */
}

/* Link al requerimiento */
.eva-link-req[b-f307lle72e] {
    color: #0000CD;                           /* Azul medio (MediumBlue) */
    text-decoration: none;                    /* Sin subrayado */
    margin-left: 0.25rem;                     /* Margen izquierdo (4px) */
}

.eva-link-req:hover[b-f307lle72e] {
    text-decoration: underline;               /* Subrayado en hover */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .eva-item[b-f307lle72e] {
        flex-direction: column;               /* Dirección columna */
        gap: 0.25rem;                         /* Gap reducido (4px) */
        align-items: flex-start;              /* Alineado izquierda */
    }

    .eva-fecha[b-f307lle72e] {
        min-width: auto;                      /* Sin mínimo */
        font-size: var(--texto-8pt);          /* Tamaño reducido */
        color: #666666;                       /* Gris medio */
    }

    .eva-nombre[b-f307lle72e] {
        min-width: auto;                      /* Sin mínimo */
        font-weight: bold;                    /* Negritas */
    }

    .eva-detalle[b-f307lle72e] {
        width: 100%;                          /* Ancho completo */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-f307lle72e] {
    --spinner-color: var(--color-eval);
}
/* _content/SiREI_2026/Components/Pages/05Uti/UtiAyuda.razor.rz.scp.css */
/*
   UtiAyuda.razor.css
   Documentación interna / Manual de usuario.
   Módulo 05Uti (Gris --color-tools).
   Creado: 2026-03-09
*/

/* ===== BARRA DE BÚSQUEDA ===== */
.busqueda-input[b-3f29cjg8pd] {
    width: 20rem;
    max-width: 100%;
}

.btn-limpiar[b-3f29cjg8pd] {
    background-color: #999999;
}

.btn-limpiar:hover[b-3f29cjg8pd] {
    background-color: #777777;
}

/* ===== TARJETAS DE NAVEGACIÓN ===== */
.tarjetas-navegacion[b-3f29cjg8pd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.tarjeta-nav[b-3f29cjg8pd] {
    background-color: var(--color-tools);
    color: #ffffff;
    border: none;
    border-radius: 0.25rem;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    text-align: center;
    font-size: var(--texto-9pt);
    font-weight: bold;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

.tarjeta-nav:hover[b-3f29cjg8pd] {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    transform: translateY(-0.0625rem);
}

.tarjeta-nav:active[b-3f29cjg8pd] {
    transform: translateY(0);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

.tarjeta-activa[b-3f29cjg8pd] {
    background-color: #404040;
}

.tarjeta-titulo[b-3f29cjg8pd] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: #ffffff;
}

.tarjeta-desc[b-3f29cjg8pd] {
    font-size: var(--texto-7pt);
    color: #dddddd;
    font-weight: normal;
}

/* ===== ÁREA DE CONTENIDO ===== */
.contenido-ayuda[b-3f29cjg8pd] {
    padding: 1rem;
    max-width: 60rem;
    margin: 0 auto;
}

.seccion-contenido[b-3f29cjg8pd] {
    padding: 0.5rem 0;
}

.seccion-titulo-principal[b-3f29cjg8pd] {
    font-size: var(--texto-14pt);
    font-weight: bold;
    color: var(--color-tools);
    border-bottom: 2px solid var(--color-tools);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.intro-texto[b-3f29cjg8pd] {
    font-size: var(--texto-10pt);
    color: #555555;
    margin-bottom: 1.5rem;
}

/* ===== PASOS (INICIO RÁPIDO) ===== */
.paso-container[b-3f29cjg8pd] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.paso-numero[b-3f29cjg8pd] {
    background-color: var(--color-tools);
    color: #ffffff;
    font-size: var(--texto-14pt);
    font-weight: bold;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.paso-contenido[b-3f29cjg8pd] {
    flex: 1;
}

.paso-titulo[b-3f29cjg8pd] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: #333333;
    margin: 0 0 0.5rem 0;
}

.paso-contenido p[b-3f29cjg8pd] {
    font-size: var(--texto-10pt);
    color: #555555;
    margin: 0 0 0.5rem 0;
}

.paso-detalle[b-3f29cjg8pd] {
    font-size: var(--texto-10pt);
    color: #555555;
    line-height: 1.5;
}

.paso-detalle ul[b-3f29cjg8pd],
.paso-detalle ol[b-3f29cjg8pd] {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.paso-detalle li[b-3f29cjg8pd] {
    margin-bottom: 0.25rem;
}

.paso-tip[b-3f29cjg8pd] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #f0f7ff;
    border-left: 3px solid var(--color-tools);
    font-size: var(--texto-9pt);
    color: #444444;
}

/* ===== SUBSECCIONES (MANUAL) ===== */
.subseccion[b-3f29cjg8pd] {
    margin-bottom: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
}

.subseccion-header[b-3f29cjg8pd] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f9f9f9;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--texto-11pt);
}

.subseccion-header:hover[b-3f29cjg8pd] {
    background-color: #f0f0f0;
}

.subseccion-icono[b-3f29cjg8pd] {
    font-size: var(--texto-9pt);
    color: #666666;
    width: 1rem;
}

.subseccion-titulo[b-3f29cjg8pd] {
    font-weight: bold;
    color: #333333;
}

.subseccion-contenido[b-3f29cjg8pd] {
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.subseccion-contenido p[b-3f29cjg8pd] {
    font-size: var(--texto-10pt);
    color: #555555;
    margin: 0;
}

/* ===== MANUAL - CONTENIDO ===== */
.manual-seccion[b-3f29cjg8pd] {
    font-size: var(--texto-10pt);
    color: #555555;
    line-height: 1.5;
}

.manual-seccion h4[b-3f29cjg8pd] {
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #333333;
    margin: 1rem 0 0.5rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid #e8e8e8;
}

.manual-seccion h4:first-child[b-3f29cjg8pd] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.manual-seccion p[b-3f29cjg8pd] {
    margin: 0.5rem 0;
}

.manual-seccion ul[b-3f29cjg8pd],
.manual-seccion ol[b-3f29cjg8pd] {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.manual-seccion li[b-3f29cjg8pd] {
    margin-bottom: 0.25rem;
}

/* Tabla de estados */
.tabla-estados[b-3f29cjg8pd] {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: var(--texto-9pt);
}

.tabla-estados th[b-3f29cjg8pd] {
    background-color: #f5f5f5;
    padding: 0.5rem;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

.tabla-estados td[b-3f29cjg8pd] {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Etiquetas de estado (mini badges) */
.estado-tag[b-3f29cjg8pd] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-size: var(--texto-8pt);
    font-weight: bold;
    white-space: nowrap;
}

/* Estados SOLO TEXTO (sin fondo) */
.estado-xaut[b-3f29cjg8pd] {
    color: #990066;
}

.estado-sinasignar[b-3f29cjg8pd] {
    color: #808080;
}

.estado-proceso[b-3f29cjg8pd] {
    color: #008000;
}

.estado-xconfirmar[b-3f29cjg8pd] {
    color: #C00000;
}

.estado-cancelado[b-3f29cjg8pd] {
    color: #FF0000;
}

/* Estados CON FONDO */
.estado-terminado[b-3f29cjg8pd] {
    background-color: #00C000;
    color: #ffffff;
}

.estado-rechazado[b-3f29cjg8pd] {
    background-color: #FF0000;
    color: #ffffff;
}

.estado-super[b-3f29cjg8pd] {
    background-color: #800080;
    color: #ffffff;
}

.estado-tarde[b-3f29cjg8pd] {
    background-color: #FF0000;
    color: #ffffff;
}

/* Tablas pequeñas del manual */
.tabla-encuesta[b-3f29cjg8pd],
.tabla-frecuencias[b-3f29cjg8pd] {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: var(--texto-9pt);
}

.tabla-encuesta td[b-3f29cjg8pd],
.tabla-frecuencias td[b-3f29cjg8pd] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.tabla-encuesta td:first-child[b-3f29cjg8pd],
.tabla-frecuencias td:first-child[b-3f29cjg8pd] {
    width: 6rem;
    font-weight: bold;
    color: #333333;
}

/* Nota importante */
.nota-importante[b-3f29cjg8pd] {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background-color: #fff8e6;
    border-left: 3px solid #f0ad4e;
    font-size: var(--texto-9pt);
}

/* ===== FAQ ===== */
.faq-item[b-3f29cjg8pd] {
    margin-bottom: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
}

.faq-pregunta[b-3f29cjg8pd] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #333333;
}

.faq-pregunta:hover[b-3f29cjg8pd] {
    background-color: #f9f9f9;
}

.faq-icono[b-3f29cjg8pd] {
    font-size: var(--texto-9pt);
    color: #666666;
    width: 1rem;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.faq-respuesta[b-3f29cjg8pd] {
    padding: 1rem;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
    font-size: var(--texto-10pt);
    color: #555555;
}

/* ===== GLOSARIO ===== */
.tabla-glosario[b-3f29cjg8pd] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-10pt);
}

.tabla-glosario th[b-3f29cjg8pd] {
    background-color: var(--color-tools);
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: var(--texto-10pt);
}

.tabla-glosario td[b-3f29cjg8pd] {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.tabla-glosario tr:hover[b-3f29cjg8pd] {
    background-color: #f9f9f9;
}

.termino-nombre[b-3f29cjg8pd] {
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    width: 10rem;
}

/* ===== RESULTADOS DE BÚSQUEDA ===== */
.sin-resultados[b-3f29cjg8pd] {
    text-align: center;
    padding: 2rem;
    font-size: var(--texto-11pt);
    color: #666666;
    background-color: #f9f9f9;
    border-radius: 0.25rem;
}

.lista-resultados[b-3f29cjg8pd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.resultado-item[b-3f29cjg8pd] {
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.25rem;
    cursor: pointer;
    background-color: #ffffff;
}

.resultado-item:hover[b-3f29cjg8pd] {
    background-color: #f5f5f5;
    border-color: var(--color-tools);
}

.resultado-seccion[b-3f29cjg8pd] {
    font-size: var(--texto-8pt);
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.resultado-titulo[b-3f29cjg8pd] {
    display: block;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #333333;
    margin: 0.25rem 0;
}

.resultado-fragmento[b-3f29cjg8pd] {
    font-size: var(--texto-9pt);
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== FILTRO ACTIVO (desde búsqueda) ===== */
.filtro-activo[b-3f29cjg8pd] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background-color: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
    color: #004085;
}

.btn-ver-todos[b-3f29cjg8pd] {
    padding: 0.25rem 0.75rem;
    font-size: var(--texto-8pt);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Tarjetas en 2 columnas en móvil */
    .tarjetas-navegacion[b-3f29cjg8pd] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }

    .tarjeta-nav[b-3f29cjg8pd] {
        padding: 0.5rem 0.75rem;
    }

    .tarjeta-titulo[b-3f29cjg8pd] {
        font-size: var(--texto-8pt);
    }

    .tarjeta-desc[b-3f29cjg8pd] {
        display: none;
    }

    /* Contenido */
    .contenido-ayuda[b-3f29cjg8pd] {
        padding: 0.75rem 0.5rem;
    }

    .seccion-titulo-principal[b-3f29cjg8pd] {
        font-size: var(--texto-12pt);
    }

    /* Pasos */
    .paso-container[b-3f29cjg8pd] {
        gap: 0.75rem;
    }

    .paso-numero[b-3f29cjg8pd] {
        width: 2rem;
        height: 2rem;
        font-size: var(--texto-12pt);
    }

    .paso-titulo[b-3f29cjg8pd] {
        font-size: var(--texto-11pt);
    }

    /* Glosario */
    .tabla-glosario th[b-3f29cjg8pd],
    .tabla-glosario td[b-3f29cjg8pd] {
        padding: 0.5rem;
    }

    .termino-nombre[b-3f29cjg8pd] {
        white-space: normal;
        width: auto;
    }

    /* Buscador */
    .busqueda-input[b-3f29cjg8pd] {
        width: 100%;
    }
}
/* _content/SiREI_2026/Components/Pages/05Uti/UtiDatos.razor.rz.scp.css */
/*
   UtiDatos.razor.css
   Modificación de datos de usuario.
   Migrado de: SiREI_2009/05Uti/DatoUsu.aspx
   Módulo 05Uti (Gris --color-tools).
   Actualizado: 2026-02-07 - Responsive + secciones
*/

/* ===== SECCIÓN DE LINKS ===== */
.links-section[b-c359yduack] {
    text-align: center;
    margin: 1.25rem 0;
}

.link-modificar[b-c359yduack] {
    background: none;
    border: none;
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--texto-10pt);
    padding: 0;
    margin: 0 0.625rem;
}

.link-modificar:hover[b-c359yduack] {
    color: #551A8B;
}

.mensaje-exito[b-c359yduack] {
    background-color: #FFC0C0;
    padding: 0.25rem 0.5rem;
    font-size: var(--texto-10pt);
    font-weight: normal;
    margin-left: 0.94rem;
}

/* ===== PANEL DE PASSWORD ===== */
.panel-password[b-c359yduack] {
    margin: 1.25rem auto;
    max-width: 100%;
    padding: 0 1rem;
}

/* ===== TÍTULOS DE SECCIÓN ===== */
.seccion-titulo[b-c359yduack] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: var(--color-tools);
    border-bottom: 2px solid var(--color-tools);
    padding-bottom: 0.25rem;
    margin: 1rem 0 0.75rem 0;
}

/* ===== SECCIÓN DATOS ADICIONALES ===== */
.seccion-adicionales[b-c359yduack] {
    margin: 1.25rem 0;
    text-align: left;
}

.link-toggle[b-c359yduack] {
    background: none;
    border: none;
    color: #0000EE;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--texto-10pt);
    padding: 0.25rem 0;
}

.link-toggle:hover[b-c359yduack] {
    color: #551A8B;
    text-decoration: underline;
}

.datos-adicionales-panel[b-c359yduack] {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ===== ESTRUCTURA DE FORMULARIOS ===== */
.form-row[b-c359yduack] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Label alineado (cambiamos de derecha a izquierda para mejor responsive) */
.form-label[b-c359yduack] {
    min-width: 10rem;
    max-width: 10rem;
    text-align: right;
    padding-right: 0.5rem;
    font-size: var(--texto-10pt);
    color: #000000;
    flex-shrink: 0;
}

/* Compatibilidad con clase anterior */
.form-label-derecha[b-c359yduack] {
    min-width: 10rem;
    max-width: 10rem;
    text-align: right;
    padding-right: 0.5rem;
    font-size: var(--texto-10pt);
    color: #000000;
    flex-shrink: 0;
}

.form-input-container[b-c359yduack] {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* ===== INPUTS Y CONTROLES ===== */
.form-input[b-c359yduack] {
    width: 100%;
    max-width: 18rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.form-input-wide[b-c359yduack] {
    width: 100%;
    max-width: 28rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.form-input-small[b-c359yduack] {
    width: 5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.form-select[b-c359yduack] {
    width: 100%;
    max-width: 18rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

/* Selects de fecha */
.form-select-fecha[b-c359yduack] {
    padding: 0.25rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
}

.fecha-container[b-c359yduack] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Checkbox */
.checkbox-label[b-c359yduack] {
    font-size: var(--texto-10pt);
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Radio buttons */
.radio-inline-container[b-c359yduack] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.radio-label[b-c359yduack] {
    font-weight: normal;
    font-size: var(--texto-10pt);
    color: #000000;
    cursor: pointer;
}

/* ===== TEXTOS DE AYUDA ===== */
.hint-text[b-c359yduack] {
    font-size: var(--texto-8pt);
    color: #666666;
    margin-top: 0.25rem;
}

.hint-text a[b-c359yduack] {
    color: #0000EE;
    text-decoration: underline;
}

.hint-text a:hover[b-c359yduack] {
    color: #551A8B;
}

/* ===== VALIDACIÓN ===== */
[b-c359yduack] .validator-asterisk {
    color: #FF0000;
    font-weight: bold;
    margin-left: 0.25rem;
    font-size: var(--texto-9pt);
}

[b-c359yduack] .validation-errors {
    color: #FF0000;
    font-weight: bold;
    margin: 0.625rem 0;
    font-size: var(--texto-9pt);
}

/* ===== BOTONES ===== */
.boton-guardar-row[b-c359yduack] {
    justify-content: center;
    margin-top: 1rem;
}

.btn-guardar[b-c359yduack] {
    background-color: var(--color-tools);
    color: #FFFFFF;
    padding: 0.5rem 2rem;
    border: none;
    cursor: pointer;
    font-size: var(--texto-10pt);
}

.btn-guardar:hover[b-c359yduack] {
    background-color: #505050;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Form rows en columna */
    .form-row[b-c359yduack] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    /* Labels a la izquierda y full width */
    .form-label[b-c359yduack],
    .form-label-derecha[b-c359yduack] {
        min-width: 100%;
        max-width: 100%;
        text-align: left;
        padding-right: 0;
        font-weight: bold;
    }

    .form-input-container[b-c359yduack] {
        width: 100%;
    }

    /* Inputs full width */
    .form-input[b-c359yduack],
    .form-input-wide[b-c359yduack],
    .form-select[b-c359yduack] {
        max-width: 100%;
        width: 100%;
    }

    .form-input-small[b-c359yduack] {
        width: 6rem;
    }

    /* Fecha en columna si no cabe */
    .fecha-container[b-c359yduack] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .form-select-fecha[b-c359yduack] {
        flex: 1;
        min-width: 4rem;
    }

    /* Panel password */
    .panel-password[b-c359yduack] {
        padding: 0 0.5rem;
    }

    /* Sección adicionales */
    .datos-adicionales-panel[b-c359yduack] {
        padding: 0.75rem;
    }

    /* Botón centrado con tamaño natural */
    .boton-guardar-row[b-c359yduack] {
        justify-content: center;
        align-items: center;
    }

    /* Links section */
    .links-section[b-c359yduack] {
        padding: 0 0.5rem;
    }

    .mensaje-exito[b-c359yduack] {
        display: block;
        margin: 0.5rem 0;
    }
}
/* _content/SiREI_2026/Components/Pages/05Uti/UtiLicencia.razor.rz.scp.css */
/*
   UtiLicencia.razor.css
   Página de licencia anual de uso del tenant.
   Usa contenedor-principal-sirei del app.css.
*/

/* ===== BARRA DECORATIVA DE COLORES (debajo del título, como subrayado) ===== */
.lic-colorbar[b-e0ibmhzeux] {
    display: block;                                     /* Elemento de bloque */
    width: 100%;                                        /* Ancho completo del contenedor */
    height: 0.375rem;                                   /* Altura fija (~6px) — NO proporcional */
    object-fit: fill;                                   /* Estira los colores sin mantener proporción */
    transform: scaleX(-1);                              /* Volteo horizontal: la barra inicia con el rojo a la izquierda */
    margin-bottom: 1.25rem;                             /* Separación con la cabecera de datos */
}

/* ===== TÍTULO PRINCIPAL ===== */
.lic-titulo[b-e0ibmhzeux] {
    font-size: var(--texto-16pt);                       /* Tamaño 16pt (título de página) */
    font-weight: bold;                                  /* Negritas */
    color: var(--color-text-primary);                   /* Negro del sistema (gris muy oscuro) */
    line-height: 1.3;                                   /* Altura de línea ajustada */
    margin: 0 0 0.375rem 0;                             /* Margen mínimo: la colorbar le sigue pegada */
    padding: 0;                                         /* Sin padding propio */
    text-align: left;                                   /* Alineado izquierda */
}

/* ===== CABECERA: licenciatario, vigencia, estatus ===== */
.lic-cabecera[b-e0ibmhzeux] {
    margin-bottom: 1.5rem;                              /* Separa de las secciones de viñetas */
}

.lic-fila[b-e0ibmhzeux] {
    display: flex;                                      /* Etiqueta + valor + (estatus) en línea */
    flex-wrap: wrap;                                    /* Permite saltos en pantallas chicas */
    align-items: center;                                /* Centrado vertical */
    gap: 0.5rem;                                        /* Separación entre piezas */
    margin-bottom: 0.5rem;                              /* Separación entre filas */
    font-size: var(--texto-10pt);                       /* Tamaño 10pt */
    color: var(--color-text-primary);                   /* Color de texto principal */
}

.lic-etiqueta[b-e0ibmhzeux] {
    font-weight: bold;                                  /* Negritas para los labels */
    min-width: 6.25rem;                                 /* Ancho mínimo (100px) para alineación */
}

.lic-valor[b-e0ibmhzeux] {
    font-weight: normal;                                /* Texto normal para los valores */
}

/* ===== ETIQUETA DE ESTATUS (VIGENTE / POR VENCER / VENCIDA) ===== */
/* El color de fondo se asigna inline desde el .razor con la variable --color-* */
.lic-estatus[b-e0ibmhzeux] {
    display: inline-block;                              /* Caja propia */
    color: white;                                       /* Letras blancas */
    font-weight: bold;                                  /* Negritas */
    font-size: var(--texto-9pt);                        /* Tamaño 9pt */
    letter-spacing: 0.0625rem;                          /* Espaciado entre letras (1px) */
    text-transform: uppercase;                          /* Mayúsculas */
    padding: 0.25rem 0.75rem;                           /* Espacio interno */
    border-radius: 0.25rem;                             /* Esquinas redondeadas */
    margin-left: 0.5rem;                                /* Separación del valor */
}

/* ===== WRAPPER DEL ÁREA DE ALCANCE ===== */
/* overflow:hidden establece un nuevo contexto de formato y "envuelve" el
   float del motherboard para que el contenedor padre no colapse. */
.lic-alcance[b-e0ibmhzeux] {
    overflow: hidden;                                   /* Contiene el float interno */
}

/* ===== IMAGEN DECORATIVA DE MOTHERBOARD ===== */
.lic-motherboard[b-e0ibmhzeux] {
    float: right;                                       /* Flota a la derecha del cuerpo */
    width: 16rem;                                       /* Ancho fijo (~256px) */
    height: auto;                                       /* Altura proporcional */
    margin: 0 0 0.625rem 1.25rem;                       /* Separación a la izquierda y abajo */
}

/* ===== TÍTULO DE SECCIÓN "Alcance del servicio:" ===== */
.lic-seccion-titulo[b-e0ibmhzeux] {
    font-size: var(--texto-12pt);                       /* Tamaño 12pt */
    font-weight: bold;                                  /* Negritas */
    color: var(--color-text-primary);                   /* Negro del sistema */
    margin: 0 0 0.75rem 0;                              /* Separación inferior */
}

/* ===== TÍTULOS DE SUB-SECCIONES (Implementación, Infraestructura, etc.) ===== */
.lic-subseccion-titulo[b-e0ibmhzeux] {
    font-size: var(--texto-10pt);                       /* Tamaño 10pt */
    font-weight: bold;                                  /* Negritas */
    color: var(--color-text-primary);                   /* Color de texto principal */
    margin: 0.875rem 0 0.375rem 0;                      /* Espacio antes y abajo */
}

/* ===== LISTA DE VIÑETAS ===== */
.lic-lista[b-e0ibmhzeux] {
    margin: 0 0 0.5rem 0;                               /* Separación inferior */
    padding-left: 1.5625rem;                            /* Sangría (25px) */
    font-size: var(--texto-9pt);                        /* Tamaño 9pt */
    color: var(--color-text-primary);                   /* Color de texto principal */
    line-height: 1.6;                                   /* Altura de línea amplia */
}

.lic-lista li[b-e0ibmhzeux] {
    margin-bottom: 0.1875rem;                           /* Separación entre viñetas (3px) */
}

/* ===== MENSAJE "SIN LICENCIA" ===== */
.lic-sin-licencia[b-e0ibmhzeux] {
    text-align: center;                                 /* Texto centrado */
    padding: 3rem 1.25rem;                              /* Espacio interno amplio */
    color: var(--color-text-primary);                   /* Color de texto principal */
}

.lic-sin-licencia-titulo[b-e0ibmhzeux] {
    font-size: var(--texto-16pt);                       /* Título grande (16pt) */
    font-weight: bold;                                  /* Negritas */
    color: var(--color-panel);                          /* Rojo para indicar advertencia */
    margin-bottom: 1.25rem;                             /* Separación inferior */
    text-transform: uppercase;                          /* Mayúsculas */
    letter-spacing: 0.125rem;                           /* Espaciado entre letras (2px) */
}

.lic-sin-licencia-texto[b-e0ibmhzeux] {
    font-size: var(--texto-11pt);                       /* Tamaño 11pt */
    margin-bottom: 0.5rem;                              /* Separación inferior */
    line-height: 1.5;                                   /* Altura de línea */
}

/* ===== RESPONSIVE: en celular el motherboard se acomoda abajo ===== */
@media (max-width: 642px) {
    .lic-motherboard[b-e0ibmhzeux] {
        float: none;                                    /* Sin flotar */
        display: block;                                 /* En su propia línea */
        margin: 1rem auto;                              /* Centrado horizontalmente */
        width: 12rem;                                   /* Más chico (~192px) */
    }

    .lic-etiqueta[b-e0ibmhzeux] {
        min-width: 0;                                   /* Quitar mínimo para que se ajuste */
    }

    .lic-fila[b-e0ibmhzeux] {
        font-size: var(--texto-9pt);                    /* Texto más chico en móvil */
    }
}
/* _content/SiREI_2026/Components/Pages/06Min/MinConsulta.razor.rz.scp.css */
/*
   MinConsulta.razor.css
   Consulta de minutas con filtros, listado y modal de envío.
   Muestra fecha, objetivo, asistentes y estado de envío.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-ytt818ki9j] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-ytt818ki9j] {
    background-color: #FFF7CC;                /* Mismo color que Reqs por ahora (pendiente definir color Minutas) */
}

/* ===== LISTA DE MINUTAS ===== */
.minutas-list[b-ytt818ki9j] {
    background-color: #FFFFFF;                /* Fondo blanco */
    padding: 0;                               /* Sin padding */
    margin: 0;                                /* Sin margen */
}

.min-item[b-ytt818ki9j] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0.6rem;                              /* Espacio entre elementos */
    padding: 0.6rem 0;                        /* Padding vertical */
    border-bottom: 1px solid var(--color-cancelado); /* Borde inferior gris */
    background-color: #FFFFFF;                /* Fondo blanco */
    line-height: var(--line-height-compacto); /* Altura de línea compacta */
}

.min-item:nth-child(even)[b-ytt818ki9j] {
    background-color: #FAFAFA;                /* Fondo alternado sutil */
}

/* ===== INFORMACIÓN DE LA MINUTA ===== */
.min-content[b-ytt818ki9j] {
    flex: 1;                                  /* Ocupa espacio restante */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.min-header[b-ytt818ki9j] {
    margin-bottom: 0.5rem;                    /* Margen inferior */
}

.min-lugar[b-ytt818ki9j] {
    margin-bottom: 0.3rem;                    /* Margen inferior */
}

.min-info[b-ytt818ki9j] {
    margin-bottom: 0.5rem;                    /* Margen inferior */
}

.min-titulo[b-ytt818ki9j] {
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado */
    margin-right: 0.63rem;                    /* Margen derecho */
}

.min-titulo:hover[b-ytt818ki9j] {
    text-decoration: underline;               /* Subrayado al hover */
}

.min-fecha[b-ytt818ki9j] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #666666;                           /* Gris */
    margin-right: 0.5rem;                     /* Margen derecho */
}

/* ===== LABELS DE ESTADO ===== */
.status-enviada[b-ytt818ki9j] {
    color: var(--color-home);                 /* Verde - letra sin fondo */
    font-size: var(--texto-9pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.status-pendiente[b-ytt818ki9j] {
    color: var(--color-panel);                           /* Rojo oscuro */
    font-size: var(--texto-9pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.status-borrador[b-ytt818ki9j] {
    color: var(--color-minu);                 /* Naranja - color del módulo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    margin-right: 0.5rem;                     /* Margen derecho (estándar responsive) */
}

.label-small[b-ytt818ki9j] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== ACCIONES Y BOTONES ===== */
.min-actions[b-ytt818ki9j] {
    display: flex;                            /* Flexbox */
    gap: 0.5rem;                              /* Espacio entre botones */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
    align-items: center;                      /* Centrado vertical */
}

.btn-enviar[b-ytt818ki9j] {
    background-color: var(--color-panel);                /* Rojo oscuro - urgente, no enviada */
    color: #FFFFFF;                           /* Blanco */
}

.btn-reenviar[b-ytt818ki9j] {
    background-color: #808080;                /* Gris - ya se envió una vez */
    color: #FFFFFF;                           /* Blanco */
}

.btn-pdf[b-ytt818ki9j] {
    background-color: #FF2400;                /* Rojo color PDF */
    color: #FFFFFF;                           /* Blanco */
}

.btn-ver[b-ytt818ki9j] {
    background-color: var(--color-minu);      /* Naranja - color del módulo */
    color: #FFFFFF;                           /* Blanco */
    text-decoration: none;                    /* Sin subrayado */
}

/* ===== AGRUPADOR STATUS + BOTÓN ===== */
.min-estado-grupo[b-ytt818ki9j] {
    display: contents;                    /* Invisible en desktop */
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    .min-fecha[b-ytt818ki9j] {
        white-space: nowrap;              /* Fecha no se parte */
    }

    .status-pendiente[b-ytt818ki9j],
    .status-enviada[b-ytt818ki9j] {
        white-space: nowrap;              /* Etiquetas no se parten */
    }

    .min-estado-grupo[b-ytt818ki9j] {
        display: inline-flex;             /* Agrupa status + botón */
        align-items: center;              /* Centrado vertical */
        gap: 0.3rem;                      /* Espacio entre elementos */
    }
}

/* ===== SPINNER ===== */
.sirei-spinner[b-ytt818ki9j] {
    --spinner-color: var(--color-minu);
}
/* _content/SiREI_2026/Components/Pages/06Min/MinDetalle.razor.rz.scp.css */
/*
   MinDetalle.razor.css
   Detalle de minuta con estructura: Tema → Acuerdos → Compromisos
   Secciones colapsables tipo acordeón + filtros de visualización.
   Módulo: Minutas (color naranja --color-minu)
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-zolgd55nvt] {
    padding-top: 0;                           /* Pega al SiREI */
}

/* ===== BARRA DE FILTROS ===== */
.barra-filtros[b-zolgd55nvt] {
    background-color: #FFF7CC;                /* Mismo color que Reqs por ahora (pendiente definir color Minutas) */
}

/* ===== PANEL MINUTA ===== */
.panel-minuta[b-zolgd55nvt] {
    width: 100%;                              /* Ancho completo */
    padding: 0.5rem;                          /* Padding interno */
}

/* ===== SECCIÓN DE DATOS BÁSICOS ===== */
.seccion-datos[b-zolgd55nvt] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding: 0.5rem;                          /* Padding */
    border: 1px solid var(--color-border);                /* Borde gris */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    background-color: #FAFAFA;                /* Fondo gris muy claro */
}

/* ===== FILAS DE DATOS ===== */
.dato-row[b-zolgd55nvt] {
    margin-bottom: 0.3rem;                    /* Margen inferior */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    align-items: center;                      /* Centrado vertical */
}

.label-alineada[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 5rem;                              /* Ancho fijo */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho */
    flex-shrink: 0;                           /* No encoge */
}

.text-dato[b-zolgd55nvt] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.objetivo-texto[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas para el objetivo */
}

.fecha-creacion[b-zolgd55nvt] {
    margin-left: 1rem;                        /* Margen izquierdo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #666666;                           /* Gris */
}

/* ===== ESTADO Y ACCIONES ===== */
.estado-acciones[b-zolgd55nvt] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 1rem;                                /* Espacio entre elementos */
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding: 0.4rem;                          /* Padding */
    background-color: #FAFAFA;                /* Gris muy claro */
    border: 1px solid var(--color-border);                /* Borde */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.status-enviada[b-zolgd55nvt] {
    background: none;                         /* Sin fondo */
    color: var(--color-home);                 /* Verde - letra sin fondo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.status-pendiente[b-zolgd55nvt] {
    color: #808080;                           /* Gris */
}

.status-borrador[b-zolgd55nvt] {
    color: var(--color-minu);                 /* Naranja - color del módulo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.fecha-envio[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #666666;                           /* Gris */
}

.btn-editar[b-zolgd55nvt] {
    background-color: var(--color-minu);      /* Naranja - color del módulo */
    color: #FFFFFF;                           /* Blanco */
    margin-left: auto;                        /* Empuja a la derecha */
}

.btn-enviar[b-zolgd55nvt] {
    background-color: #8B0000;                /* Rojo oscuro - urgente, no enviada */
    color: #FFFFFF;                           /* Blanco */
}

.btn-reenviar[b-zolgd55nvt] {
    background-color: #808080;                /* Gris - ya se envió una vez */
    color: #FFFFFF;                           /* Blanco */
}

.btn-pdf[b-zolgd55nvt] {
    background-color: #FF2400;                /* Rojo color PDF */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== FILTROS DE VISUALIZACIÓN ===== */
.filtros-vista[b-zolgd55nvt] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 1rem;                                /* Espacio entre elementos */
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding: 0.4rem 0.5rem;                   /* Padding */
    background-color: #f0f0f0;                /* Gris claro */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.filtros-label[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    color: #404040;                           /* Gris oscuro */
}

.filtro-check[b-zolgd55nvt] {
    display: inline-flex;                     /* Flex inline */
    align-items: center;                      /* Centrado vertical */
    gap: 0.25rem;                             /* Espacio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    cursor: pointer;                          /* Manita */
}

.filtro-check input[type="checkbox"][b-zolgd55nvt] {
    margin: 0;                                /* Sin margen */
    cursor: pointer;                          /* Manita */
}

/* ===== ACORDEÓN GENÉRICO ===== */
.seccion-acordeon[b-zolgd55nvt] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    border: 1px solid var(--color-border);                /* Borde gris */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.acordeon-header[b-zolgd55nvt] {
    background-color: #e8e8e8;                /* Gris claro */
    padding: 0.4rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio entre elementos */
    cursor: pointer;                          /* Manita */
}

.acordeon-header:hover[b-zolgd55nvt] {
    background-color: #d8d8d8;                /* Gris más oscuro al hover */
}

.acordeon-header.abierto[b-zolgd55nvt] {
    background-color: #d0d0d0;                /* Gris cuando está abierto */
}

.acordeon-flecha[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 1rem;                              /* Ancho fijo */
    color: #606060;                           /* Gris */
}

.acordeon-titulo[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

.acordeon-contenido[b-zolgd55nvt] {
    padding: 0.5rem 0.75rem;                  /* Padding */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== PARTICIPANTES ===== */
.participante-item[b-zolgd55nvt] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.75rem;                             /* Espacio */
    padding: 0.25rem 0;                       /* Padding vertical */
    border-bottom: 1px solid #f0f0f0;         /* Borde inferior sutil */
}

.participante-item:last-child[b-zolgd55nvt] {
    border-bottom: none;                      /* Sin borde en el último */
}

.participante-nombre[b-zolgd55nvt] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    min-width: 12rem;                         /* Ancho mínimo - más grande para incluir depto */
}

.participante-email[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #808080;                           /* Gris más claro */
    flex: 1;                                  /* Ocupa espacio restante */
}

.participante-asistio[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.asistio-si[b-zolgd55nvt] {
    color: var(--color-terminado);                           /* Verde */
}

.asistio-no[b-zolgd55nvt] {
    color: #808080;                           /* Gris */
}

/* ===== INPUT SIN FLECHAS ===== */
.input-sin-flechas[b-zolgd55nvt] {
    -moz-appearance: textfield;               /* Firefox */
}

.input-sin-flechas[b-zolgd55nvt]::-webkit-outer-spin-button,
.input-sin-flechas[b-zolgd55nvt]::-webkit-inner-spin-button {
    -webkit-appearance: none;                 /* Chrome, Safari, Edge */
    margin: 0;
}

/* ===== SECCIÓN DE TEMAS ===== */
.seccion-temas[b-zolgd55nvt] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
}

.temas-header[b-zolgd55nvt] {
    background-color: var(--color-minu);      /* Naranja - color del módulo */
    padding: 0.5rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espaciado */
    align-items: center;                      /* Centrado vertical */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba */
}

.temas-titulo[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== BLOQUE DE TEMA ===== */
.tema-bloque[b-zolgd55nvt] {
    border: 1px solid var(--color-border);                /* Borde gris */
    border-top: none;                         /* Sin borde superior (se une al anterior) */
    margin-bottom: 0;                         /* Sin margen */
}

.tema-bloque:last-child[b-zolgd55nvt] {
    border-radius: 0 0 0.25rem 0.25rem;       /* Esquinas redondeadas abajo */
}

.tema-header[b-zolgd55nvt] {
    background-color: #f5f5f5;                /* Gris muy claro */
    padding: 0.4rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio entre elementos */
    cursor: pointer;                          /* Manita */
}

.tema-header:hover[b-zolgd55nvt] {
    background-color: #ebebeb;                /* Gris más oscuro al hover */
}

.tema-header.abierto[b-zolgd55nvt] {
    background-color: #e8e8e8;                /* Gris cuando está abierto */
    border-bottom: 1px solid #d0d0d0;         /* Borde inferior */
}

.tema-numero[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: var(--color-minu);                 /* Naranja */
    width: 1.5rem;                            /* Ancho fijo */
}

.tema-texto[b-zolgd55nvt] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

.tema-contenido[b-zolgd55nvt] {
    padding: 0.5rem 0.75rem;                  /* Padding vertical y derecho */
    padding-left: 0;                          /* Sin indentación - números alineados */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== ACUERDOS DETALLE (Nivel 2) ===== */
.acuerdo-bloque-det[b-zolgd55nvt] {
    margin-bottom: 0.3rem;                    /* Margen inferior */
    border-left: 2px solid #d0d0d0;           /* Línea izquierda para jerarquía */
}

.acuerdo-header-det[b-zolgd55nvt] {
    display: flex;                            /* Flexbox */
    align-items: flex-start;                  /* Alineado arriba */
    gap: 0.5rem;                              /* Espacio igual que tema */
    padding: 0.2rem 0.75rem;                  /* Padding igual que tema */
    cursor: pointer;                          /* Manita */
    background-color: #f8f8f8;                /* Gris muy claro */
}

.acuerdo-header-det:hover[b-zolgd55nvt] {
    background-color: #f0f0f0;                /* Gris más oscuro al hover */
}

.acuerdo-header-det.abierto[b-zolgd55nvt] {
    background-color: #f0f0f0;                /* Gris cuando está abierto */
}

.acordeon-flecha-mini[b-zolgd55nvt] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt - igual que tema */
    width: 1rem;                              /* Ancho fijo - igual que tema */
    color: #606060;                           /* Gris */
    flex-shrink: 0;                           /* No encoge */
}

.acuerdo-numero-det[b-zolgd55nvt] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    color: var(--color-minu);                 /* Naranja */
    width: 2rem;                              /* Ancho fijo */
    flex-shrink: 0;                           /* No encoge */
}

.acuerdo-texto-det[b-zolgd55nvt] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

/* ===== COMPROMISOS DETALLE (Nivel 3) ===== */
.compromisos-contenido-det[b-zolgd55nvt] {
    padding: 0.3rem 0.75rem;                  /* Padding vertical y derecho */
    padding-left: 0;                          /* Sin indentación - números alineados */
    background-color: #FFFFFF;                /* Fondo blanco */
}

.compromiso-linea-det[b-zolgd55nvt] {
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    align-items: center;                      /* Centrado vertical */
    gap: 0.3rem;                              /* Espacio */
    margin-bottom: 0.25rem;                   /* Margen inferior */
    margin-left: 2.25rem;                     /* Alinea con acuerdo-numero */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.compromiso-numero-det[b-zolgd55nvt] {
    font-size: var(--texto-9pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    color: #808080;                           /* Gris */
    width: 2.5rem;                            /* Ancho fijo */
    flex-shrink: 0;                           /* No encoge */
}

.compromiso-descripcion-det[b-zolgd55nvt] {
    font-weight: bold;                        /* Negritas */
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 10rem;                         /* Ancho mínimo */
    margin-left: 0.4rem;                      /* Separación del número */
}

.texto-gris[b-zolgd55nvt] {
    color: #808080;                           /* Gris */
    flex: 1;                                  /* Mismo espacio que la descripción */
    min-width: 10rem;                         /* Mismo mínimo */
    margin-left: 0.4rem;                      /* Misma separación */
}

.label-mini[b-zolgd55nvt] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #606060;                           /* Gris */
}

.link-req[b-zolgd55nvt] {
    color: #0066CC;                           /* Azul link */
    margin-left: 0.5rem;                      /* Margen izquierdo */
}

/* ===== ETIQUETAS DE ESTATUS ===== */
.status-sin-asignar-tag[b-zolgd55nvt] {
    background-color: var(--color-cancelado);                /* Gris */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-en-proceso-tag[b-zolgd55nvt] {
    background-color: var(--color-home);      /* Verde */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-terminado-tag[b-zolgd55nvt] {
    background-color: var(--color-terminado);                /* Verde bosque */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-super[b-zolgd55nvt] {
    background-color: #800080;                /* Morado (Purple) */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
}

.status-tarde-proceso[b-zolgd55nvt] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt — fondo rojo viene de .etiqueta */
}

.status-tarde-terminado[b-zolgd55nvt] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt — fondo rojo viene de .etiqueta */
}

/* ===== TABLA DE LOG ===== */
.tabla-log[b-zolgd55nvt] {
    width: 100%;                              /* Ancho completo */
    border-collapse: collapse;                /* Bordes colapsados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.tabla-log th[b-zolgd55nvt],
.tabla-log td[b-zolgd55nvt] {
    padding: 0.25rem 0.5rem;                  /* Padding */
    text-align: left;                         /* Alineado izquierda */
    border-bottom: 1px solid var(--color-border);         /* Borde inferior */
}

.tabla-log th[b-zolgd55nvt] {
    background-color: #f5f5f5;                /* Gris muy claro */
    font-weight: bold;                        /* Negritas */
}

/* ===== TEXTOS AUXILIARES ===== */
.texto-vacio[b-zolgd55nvt] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-style: italic;                       /* Itálica */
    padding: 0.5rem 0;                        /* Padding */
}

.texto-vacio-mini[b-zolgd55nvt] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-style: italic;                       /* Itálica */
    padding: 0.2rem 0;                        /* Padding */
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    .dato-fecha[b-zolgd55nvt] {
        white-space: nowrap;              /* Fecha no se parte */
    }

    .fecha-envio[b-zolgd55nvt] {
        white-space: nowrap;              /* Fecha de envío no se parte */
    }

    .compromiso-linea-det .label-mini[b-zolgd55nvt] {
        display: none;                    /* Resp: innecesario en móvil */
    }

    .compromiso-descripcion-det[b-zolgd55nvt],
    .texto-gris[b-zolgd55nvt] {
        flex-basis: 100%;                 /* Ocupa todo el ancho → responsable baja a siguiente línea */
    }
}

/* ===== SPINNER ===== */
.sirei-spinner[b-zolgd55nvt] {
    --spinner-color: var(--color-minu);
}
/* _content/SiREI_2026/Components/Pages/06Min/MinNueva.razor.rz.scp.css */
/*
   MinNueva.razor.css
   Crear nueva minuta con estructura: Tema → Acuerdos → Compromisos
   Secciones colapsables tipo acordeón.
   Módulo: Minutas (color naranja --color-minu)
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-cv3mclrqvv] {
    padding-top: 0;                           /* Pega al SiREI */
}

/* ===== PANEL MINUTA ===== */
.panel-minuta[b-cv3mclrqvv] {
    width: 100%;                              /* Ancho completo */
    padding: 0.5rem;                          /* Padding interno */
}

/* ===== SECCIÓN DE DATOS BÁSICOS ===== */
.seccion-datos[b-cv3mclrqvv] {
    margin-bottom: 1rem;                      /* Margen inferior */
    padding: 0.5rem;                          /* Padding */
    border: 1px solid var(--color-border);                /* Borde gris */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    background-color: #FAFAFA;                /* Fondo gris muy claro */
}

/* ===== FILAS DE DATOS ===== */
.dato-row[b-cv3mclrqvv] {
    margin-bottom: 0.5rem;                    /* Margen inferior */
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    width: 100%;                              /* Ancho completo */
    align-items: center;                      /* Centrado vertical */
}

.dato-row-objetivo[b-cv3mclrqvv] {
    flex-wrap: wrap;                          /* Permite que botones bajen en móvil */
}

/* ===== BOTONES PRINCIPALES (arriba) ===== */
.botones-principales[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    gap: 0.5rem;                              /* Espacio entre botones */
    margin-left: auto;                        /* Alinea a la derecha */
    flex-shrink: 0;                           /* No encoge */
}

@media (max-width: 768px) {
    .botones-principales[b-cv3mclrqvv] {
        width: 100%;                          /* Ancho completo en móvil */
        justify-content: flex-end;            /* Alineado derecha */
        margin-top: 0.5rem;                   /* Margen superior */
    }
}

.label-alineada[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    width: 5rem;                              /* Ancho fijo */
    text-align: right;                        /* Alineado derecha */
    margin-right: 0.625rem;                   /* Margen derecho */
    flex-shrink: 0;                           /* No encoge */
}

.text-dato[b-cv3mclrqvv] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

.input-fecha[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.25rem;                         /* Padding */
}

.input-texto-largo[b-cv3mclrqvv] {
    width: 100%;                              /* Ancho completo */
    max-width: 35rem;                         /* Ancho máximo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.25rem;                         /* Padding */
}

/* ===== ACORDEÓN GENÉRICO ===== */
.seccion-acordeon[b-cv3mclrqvv] {
    margin-bottom: 1rem;                      /* Margen inferior */
    border: 1px solid var(--color-border);                /* Borde gris */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
}

.acordeon-header[b-cv3mclrqvv] {
    background-color: #e8e8e8;                /* Gris claro */
    padding: 0.4rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio entre elementos */
    cursor: pointer;                          /* Manita */
}

.acordeon-header:hover[b-cv3mclrqvv] {
    background-color: #d8d8d8;                /* Gris más oscuro al hover */
}

.acordeon-header.abierto[b-cv3mclrqvv] {
    background-color: #d0d0d0;                /* Gris cuando está abierto */
}

.acordeon-flecha[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    width: 0.8rem;                            /* Ancho fijo reducido */
    color: #606060;                           /* Gris */
    flex-shrink: 0;                           /* No encoge */
}

.acordeon-titulo[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    flex: 1;                                  /* Ocupa espacio restante */
}

.acordeon-contenido[b-cv3mclrqvv] {
    padding: 0.5rem 0.75rem;                  /* Padding */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== ASISTENTES ===== */
.asistente-item[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio */
    padding: 0.25rem 0;                       /* Padding vertical */
    border-bottom: 1px solid #f0f0f0;         /* Borde inferior sutil */
}

.asistente-item:last-child[b-cv3mclrqvv] {
    border-bottom: none;                      /* Sin borde en el último */
}

.asistente-contenido[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio */
    flex: 1;                                  /* Ocupa espacio restante */
    flex-wrap: wrap;                          /* Permite wrap en móvil */
}

.asistente-acciones[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    gap: 0.3rem;                              /* Espacio entre botones */
    flex-shrink: 0;                           /* No encoge */
}

.asistente-check[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.2rem;                              /* Espacio */
    cursor: pointer;                          /* Manita */
    min-width: 4rem;                          /* Ancho mínimo */
}

.asistente-check input[type="checkbox"][b-cv3mclrqvv] {
    cursor: pointer;                          /* Manita */
}

.check-label[b-cv3mclrqvv] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #606060;                           /* Gris */
}

.asistente-nombre[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    min-width: 10rem;                         /* Ancho mínimo */
}

.asistente-tipo[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #606060;                           /* Gris */
}

.asistente-email[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #808080;                           /* Gris más claro */
    flex: 1;                                  /* Ocupa espacio restante */
}

/* ===== ASISTENTES EN EDICIÓN ===== */
.select-asistente[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    min-width: 12rem;                         /* Ancho mínimo */
}

.input-asistente-nombre[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    width: 10rem;                             /* Ancho fijo */
}

.input-asistente-email[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    width: 12rem;                             /* Ancho fijo */
}

.input-asistente-puesto[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    width: 10rem;                             /* Ancho fijo */
}

.check-externo[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.2rem;                              /* Espacio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #606060;                           /* Gris */
    cursor: pointer;                          /* Manita */
}

.check-externo input[type="checkbox"][b-cv3mclrqvv] {
    cursor: pointer;                          /* Manita */
}

/* ===== BOTONES DE ACCIÓN ASISTENTES ===== */
.btn-accion[b-cv3mclrqvv] {
    width: 1.5rem;                            /* Ancho fijo */
    height: 1.5rem;                           /* Alto fijo */
    border: none;                             /* Sin borde */
    border-radius: 3px;                       /* Esquinas redondeadas */
    cursor: pointer;                          /* Manita */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
    font-size: var(--texto-9pt);              /* Tamaño icono */
}

.btn-accion:hover[b-cv3mclrqvv] {
    opacity: 0.8;                             /* Transparencia al hover */
}

.btn-editar-asist[b-cv3mclrqvv] {
    background-color: #1976d2;                /* Azul */
    color: white;                             /* Blanco */
}

.btn-confirmar-asist[b-cv3mclrqvv] {
    background-color: var(--color-terminado);                /* Verde */
    color: white;                             /* Blanco */
}

.btn-quitar-asist[b-cv3mclrqvv] {
    background-color: var(--color-panel);                /* Rojo */
    color: white;                             /* Blanco */
}

/* ===== RESPONSIVE ASISTENTES ===== */
@media (max-width: 768px) {
    .asistente-contenido[b-cv3mclrqvv] {
        min-width: 0;                         /* Permite que encoja */
    }

    .select-asistente[b-cv3mclrqvv] {
        min-width: 8rem;                      /* Reduce ancho mínimo */
        max-width: 10rem;                     /* Limita ancho */
    }

    .input-asistente-nombre[b-cv3mclrqvv] {
        width: 6rem;                          /* Reduce ancho */
    }

    .input-asistente-email[b-cv3mclrqvv] {
        width: 8rem;                          /* Reduce ancho */
    }

    .input-asistente-puesto[b-cv3mclrqvv] {
        width: 6rem;                          /* Reduce ancho */
    }

    .asistente-nombre[b-cv3mclrqvv] {
        min-width: 6rem;                      /* Reduce ancho mínimo */
    }
}

/* ===== SECCIÓN DE TEMAS ===== */
.seccion-temas[b-cv3mclrqvv] {
    margin-bottom: 1rem;                      /* Margen inferior */
}

.temas-header[b-cv3mclrqvv] {
    background-color: var(--color-minu);      /* Naranja - color del módulo */
    padding: 0.5rem 0.75rem;                  /* Padding */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.4rem;                              /* Espacio entre título y botón */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba */
}

.temas-titulo[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== BLOQUE DE TEMA ===== */
.tema-bloque[b-cv3mclrqvv] {
    border: 1px solid var(--color-border);                /* Borde gris */
    border-top: none;                         /* Sin borde superior (se une al anterior) */
    margin-bottom: 0;                         /* Sin margen */
}

.tema-bloque:last-child[b-cv3mclrqvv] {
    border-radius: 0 0 0.25rem 0.25rem;       /* Esquinas redondeadas abajo */
}

.tema-header[b-cv3mclrqvv] {
    background-color: #f5f5f5;                /* Gris muy claro */
    padding: 0.4rem 0.5rem;                   /* Padding reducido */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.25rem;                             /* Espacio reducido entre elementos */
    cursor: pointer;                          /* Manita */
}

.tema-header:hover[b-cv3mclrqvv] {
    background-color: #ebebeb;                /* Gris más oscuro al hover */
}

.tema-header.abierto[b-cv3mclrqvv] {
    background-color: #e8e8e8;                /* Gris cuando está abierto */
    border-bottom: 1px solid #d0d0d0;         /* Borde inferior */
}

.tema-numero[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: var(--color-minu);                 /* Naranja */
    width: 1.2rem;                            /* Ancho fijo reducido */
    flex-shrink: 0;                           /* No encoge */
}

.input-tema[b-cv3mclrqvv] {
    flex: 1;                                  /* Ocupa espacio restante */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    border: 1px solid #c0c0c0;                /* Borde */
}

.tema-contenido[b-cv3mclrqvv] {
    padding: 0.4rem 0.5rem 0.4rem 0;          /* Sin indentación izquierda - números alineados */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== ACUERDOS (Nivel 2) ===== */
.acuerdos-header[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.4rem;                              /* Espacio */
    margin-bottom: 0.3rem;                    /* Margen inferior */
}

.acuerdos-titulo[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #404040;                           /* Gris oscuro */
}

.acuerdo-bloque[b-cv3mclrqvv] {
    margin-bottom: 0.3rem;                    /* Margen inferior */
    border-left: 2px solid #d0d0d0;           /* Línea izquierda para jerarquía */
}

.acuerdo-header[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: flex-start;                  /* Alineado arriba */
    gap: 0.25rem;                             /* Espacio igual que tema */
    padding: 0.2rem 0.5rem;                   /* Padding igual que tema */
    cursor: pointer;                          /* Manita */
    background-color: #f8f8f8;                /* Gris muy claro */
}

.acuerdo-header:hover[b-cv3mclrqvv] {
    background-color: #f0f0f0;                /* Gris más oscuro al hover */
}

.acuerdo-header.abierto[b-cv3mclrqvv] {
    background-color: #f0f0f0;                /* Gris cuando está abierto */
}

.acordeon-flecha-mini[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt - igual que tema */
    width: 0.8rem;                            /* Ancho fijo - igual que tema */
    color: #606060;                           /* Gris */
    flex-shrink: 0;                           /* No encoge */
    padding-top: 0.3rem;                      /* Alinea con textarea */
}

.acuerdo-numero[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt - igual que tema */
    font-weight: bold;                        /* Negritas */
    color: var(--color-minu);                 /* Naranja */
    width: 2rem;                              /* Ancho fijo */
    flex-shrink: 0;                           /* No encoge */
    padding-top: 0.3rem;                      /* Alinea con textarea */
}

.textarea-acuerdo[b-cv3mclrqvv] {
    flex: 1;                                  /* Ocupa espacio restante */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.2rem 0.4rem;                   /* Padding */
    border: 1px solid #c0c0c0;                /* Borde */
    resize: vertical;                         /* Solo redimensiona vertical */
    min-height: 2.5rem;                       /* Altura mínima para 2 líneas */
}

.acuerdo-contenido[b-cv3mclrqvv] {
    padding: 0.3rem 0.3rem 0.3rem 0;          /* Sin indentación - números alineados */
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== COMPROMISOS (Nivel 3) ===== */
.compromisos-header[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.4rem;                              /* Espacio */
    margin-bottom: 0.2rem;                    /* Margen inferior */
}

.compromisos-titulo[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #606060;                           /* Gris */
}

.compromiso-linea[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    flex-wrap: wrap;                          /* Permite wrap */
    align-items: center;                      /* Centrado vertical */
    gap: 0.3rem;                              /* Espacio */
    margin-bottom: 0.25rem;                   /* Margen inferior */
    padding: 0.15rem 0.5rem 0.15rem 1.55rem;  /* padding-left = 0.5 + 0.8 (flecha) + 0.25 (gap) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt - igual que MinDetalle */
}

.compromiso-numero[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt - igual que tema */
    font-weight: bold;                        /* Negritas */
    color: #808080;                           /* Gris */
    width: 2.5rem;                            /* Ancho fijo */
    flex-shrink: 0;                           /* No encoge */
}

.input-compromiso[b-cv3mclrqvv] {
    flex: 1;                                  /* Ocupa espacio restante */
    min-width: 10rem;                         /* Ancho mínimo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt - igual que tema */
    padding: 0.15rem 0.3rem;                  /* Padding */
}

.label-mini[b-cv3mclrqvv] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    font-weight: bold;                        /* Negritas */
    color: #606060;                           /* Gris */
}

.select-responsable[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    padding: 0.1rem;                          /* Padding */
    max-width: 10rem;                         /* Ancho máximo */
}

.input-fecha-comp[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    padding: 0.1rem;                          /* Padding */
}

/* ===== LIGAR REQ EXISTENTE ===== */
/* Usa .boton-chico de app.css + solo color */
.btn-ligar-req[b-cv3mclrqvv] {
    background-color: var(--color-reqs);      /* Amarillo - color de Reqs */
    color: #000000;                           /* Negro */
}

.btn-cancelar-req[b-cv3mclrqvv] {
    background-color: #808080;                /* Gris */
    color: #FFFFFF;                           /* Blanco */
}

.input-req-ligado[b-cv3mclrqvv] {
    flex: 1;                                  /* Ocupa espacio */
    min-width: 10rem;                         /* Ancho mínimo */
    max-width: 20rem;                         /* Ancho máximo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.15rem 0.3rem;                  /* Padding */
    border: 2px solid var(--color-reqs);      /* Borde amarillo - color de Reqs */
}

.compromiso-req-fijo[b-cv3mclrqvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    color: var(--color-reqs-dark);            /* Color de Reqs oscuro */
    padding: 0.15rem 0.5rem;                  /* Padding */
    background-color: #f0f0f0;                /* Fondo gris claro */
    border-radius: 0.2rem;                    /* Esquinas redondeadas */
}

/* ===== BOTONES ===== */
.btn-agregar[b-cv3mclrqvv] {
    background-color: var(--color-minu);      /* Naranja */
    color: #FFFFFF;                           /* Blanco */
}

.boton-mini[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    padding: 0.1rem 0.4rem;                   /* Padding compacto */
    border: none;                             /* Sin borde */
    border-radius: 0.2rem;                    /* Esquinas redondeadas */
    cursor: pointer;                          /* Manita */
}

.boton-mini.btn-agregar[b-cv3mclrqvv] {
    background-color: var(--color-minu);      /* Naranja */
    color: #FFFFFF;                           /* Blanco */
}

.btn-quitar[b-cv3mclrqvv] {
    background-color: var(--color-panel);                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    border: none;                             /* Sin borde */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    padding: 0.1rem 0.5rem;                   /* Padding */
    cursor: pointer;                          /* Manita */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
}

.btn-quitar:hover[b-cv3mclrqvv] {
    background-color: #990000;                /* Rojo más oscuro */
}

.btn-quitar-mini[b-cv3mclrqvv] {
    background-color: var(--color-panel);                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    border: none;                             /* Sin borde */
    border-radius: 0.2rem;                    /* Esquinas redondeadas */
    padding: 0.05rem 0.35rem;                 /* Padding compacto */
    cursor: pointer;                          /* Manita */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
}

.btn-quitar-mini:hover[b-cv3mclrqvv] {
    background-color: #990000;                /* Rojo más oscuro */
}

.btn-borrador[b-cv3mclrqvv] {
    background-color: #808080;                /* Gris - acción secundaria */
    color: #FFFFFF;                           /* Blanco */
}

.texto-borrador-guardado[b-cv3mclrqvv] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: var(--color-home);                 /* Verde - confirmación */
    font-weight: bold;                        /* Negritas */
    margin-left: 0.5rem;                      /* Margen izquierdo */
    white-space: nowrap;                      /* No corta línea */
}

.btn-guardar[b-cv3mclrqvv] {
    background-color: var(--color-minu);      /* Naranja */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== TEXTOS AUXILIARES ===== */
.texto-vacio[b-cv3mclrqvv] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-style: italic;                       /* Itálica */
    padding: 0.5rem 0;                        /* Padding */
}

.texto-vacio-mini[b-cv3mclrqvv] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-style: italic;                       /* Itálica */
    padding: 0.2rem 0;                        /* Padding */
}

.texto-gris[b-cv3mclrqvv] {
    color: #808080;                           /* Gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt - igual que input-compromiso */
    flex: 1;                                  /* Mismo espacio que el input */
    min-width: 10rem;                         /* Mismo mínimo que el input */
}

/* ===== PANEL DE ERRORES ===== */
.panel-errores[b-cv3mclrqvv] {
    background-color: #FFF0F0;                /* Fondo rojo muy claro */
    border: 1px solid var(--color-panel);     /* Borde rojo */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    padding: 0.5rem 0.75rem;                  /* Padding */
    margin-bottom: 1rem;                      /* Margen inferior */
}

.errores-titulo[b-cv3mclrqvv] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: var(--color-panel);                /* Rojo */
}

.errores-lista[b-cv3mclrqvv] {
    margin: 0.3rem 0 0 1rem;                  /* Margen */
    padding: 0;                               /* Sin padding */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #990000;                           /* Rojo oscuro */
}

.errores-lista li[b-cv3mclrqvv] {
    margin-bottom: 0.2rem;                    /* Margen inferior */
}

/* ===== PANEL DE MENSAJE (ÉXITO/ERROR) - Mismo estilo que ReqNuevoCaptura ===== */
.panel-mensaje[b-cv3mclrqvv] {
    text-align: center;                       /* Centrado */
    padding: 1.875rem 1.25rem;                /* Padding (30px 20px) */
    margin-top: 1rem;                         /* Separado */
}

.panel-exito[b-cv3mclrqvv] {
    background-color: #228B22;                /* Verde bosque (ForestGreen) */
    color: #FFFFFF;                           /* Blanco */
}

.mensaje-texto[b-cv3mclrqvv] {
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: normal;                      /* Sin negritas */
    margin-bottom: 1.25rem;                   /* Margen inferior (20px) */
    white-space: pre-line;                    /* Respeta saltos de línea */
}

.mensaje-botones[b-cv3mclrqvv] {
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* Centrado horizontal */
    gap: 0.625rem;                            /* Espacio entre botones (10px) */
}

.btn-mensaje[b-cv3mclrqvv] {
    background-color: #f2f2f2;                /* Gris claro */
    color: #000000;                           /* Negro */
    text-decoration: none;                    /* Sin subrayado para links */
}

/* ===== AGRUPADOR LABEL + INPUT ===== */
.campo-grupo[b-cv3mclrqvv] {
    display: contents;                    /* Invisible en desktop */
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px) {
    .campo-grupo[b-cv3mclrqvv] {
        display: inline-flex;             /* Agrupa label + input */
        align-items: center;              /* Centrado vertical */
        gap: 0.2rem;                      /* Espacio entre elementos */
    }
}

/* ===== SPINNER ===== */
.sirei-spinner[b-cv3mclrqvv] {
    --spinner-color: var(--color-minu);
}
/* _content/SiREI_2026/Components/Pages/10CCO/AuthNivel.razor.rz.scp.css */
/*
   AuthNivel.razor.css
   Estilos para la página de administración de autorizaciones por nivel (escalera)
   Diseño: Panel TipoReq (izq) | Panel Autorizadores (der)
*/

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-4ypyy2r4p1] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE ACCIONES ===== */
.barra-acciones[b-4ypyy2r4p1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #d4e8c7;
}

.filtro-depto-container[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-depto-container label[b-4ypyy2r4p1] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.select-depto[b-4ypyy2r4p1] {
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 10rem;
}

.busqueda-container[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busqueda-container label[b-4ypyy2r4p1] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.input-busqueda[b-4ypyy2r4p1] {
    width: 12rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buscar-en[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-buscar[b-4ypyy2r4p1] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-9pt);
    cursor: pointer;
    white-space: nowrap;
}

.check-buscar input[type="checkbox"][b-4ypyy2r4p1] {
    margin-right: 0.2rem;
    cursor: pointer;
}

.botones-accion[b-4ypyy2r4p1] {
    display: flex;
    gap: 0.5rem;
}

.btn-buscar[b-4ypyy2r4p1] {
    background-color: #6c757d;
    color: white;
}

.btn-buscar:hover[b-4ypyy2r4p1] {
    background-color: #545b62;
}

.btn-consultar[b-4ypyy2r4p1] {
    background-color: #007bff;
    color: white;
}

.btn-consultar:disabled[b-4ypyy2r4p1] {
    background-color: #6cb2ff;
    color: #e8f4ff;
}

.btn-consultar:hover:not(:disabled)[b-4ypyy2r4p1] {
    background-color: #0056b3;
}

.btn-modificar[b-4ypyy2r4p1] {
    background-color: #8b0000;
    color: white;
}

.btn-modificar:disabled[b-4ypyy2r4p1] {
    background-color: #c96060;
    color: #f5e0e0;
}

.btn-modificar:hover:not(:disabled)[b-4ypyy2r4p1] {
    background-color: #5c0000;
}

.btn-grabar[b-4ypyy2r4p1] {
    background-color: #28a745;
    color: white;
}

.btn-grabar:disabled[b-4ypyy2r4p1] {
    background-color: #7dca91;
    color: #e8f5eb;
}

.btn-grabar:hover:not(:disabled)[b-4ypyy2r4p1] {
    background-color: #1e7e34;
}

/* ===== CONTENEDOR PRINCIPAL: 2 PANELES ===== */
.contenedor-principal[b-4ypyy2r4p1] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    height: calc(100vh - 10rem);
    min-height: 25rem;
}

/* ===== PANEL TIPOS DE REQ (izquierda) ===== */
.panel-tiporeq[b-4ypyy2r4p1] {
    width: 40%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

/* ===== PANEL AUTORIZADORES (derecha) ===== */
.panel-autoriza[b-4ypyy2r4p1] {
    width: 60%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.panel-header[b-4ypyy2r4p1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--texto-10pt);
    background-color: #333;
    color: white;
}

.panel-body[b-4ypyy2r4p1] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* ===== SELECTOR DE TIEMPO ===== */
.selector-tiempo[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.selector-tiempo label[b-4ypyy2r4p1] {
    font-size: var(--texto-9pt);
    font-weight: normal;
}

.selector-tiempo select[b-4ypyy2r4p1] {
    padding: 0.2rem 0.4rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
}

.selector-tiempo select:disabled[b-4ypyy2r4p1] {
    background-color: #e9ecef;
    color: #6c757d;
}

/* ===== FILTRO SOLO SELECCIONADOS ===== */
.filtro-seleccionados[b-4ypyy2r4p1] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    cursor: pointer;
}

.filtro-seleccionados input[type="checkbox"][b-4ypyy2r4p1] {
    margin-right: 0.3rem;
    cursor: pointer;
}

/* Items de tipos de req y usuarios */
.item-depto[b-4ypyy2r4p1],
.item-usuario[b-4ypyy2r4p1],
.item-tiporeq[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-depto:hover[b-4ypyy2r4p1],
.item-usuario:hover[b-4ypyy2r4p1],
.item-tiporeq:hover[b-4ypyy2r4p1] {
    background-color: #f0f0f0;
}

.checkbox-container[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-10pt);
    user-select: none;
}

.checkbox-container input[type="checkbox"][b-4ypyy2r4p1] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    cursor: pointer;
}

.item-texto[b-4ypyy2r4p1] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: var(--texto-10pt);
}

.depto-texto[b-4ypyy2r4p1] {
    font-weight: normal;
    color: #888;
}

/* Item usuario sin indentación (modo filtrado) */
.item-usuario-flat[b-4ypyy2r4p1] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-usuario-flat:hover[b-4ypyy2r4p1] {
    background-color: #f0f0f0;
}

.sin-datos[b-4ypyy2r4p1] {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    font-size: var(--texto-10pt);
}

/* Indentación por nivel */
.usuario-nivel-0[b-4ypyy2r4p1] { padding-left: 0; }
.usuario-nivel-1[b-4ypyy2r4p1] { padding-left: 1rem; }
.usuario-nivel-2[b-4ypyy2r4p1] { padding-left: 2rem; }
.usuario-nivel-3[b-4ypyy2r4p1] { padding-left: 3rem; }
.usuario-nivel-4[b-4ypyy2r4p1] { padding-left: 4rem; }

/* ===== SELECTOR DE NIVEL ===== */
.selector-nivel[b-4ypyy2r4p1] {
    width: 2.5rem;
    padding: 0.1rem 0.2rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 0.3rem;
    text-align: center;
}

.nivel-readonly[b-4ypyy2r4p1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: 0.1rem 0.2rem;
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: #555;
    margin-right: 0.3rem;
    text-align: center;
}

/* ===== INDICADORES VISUALES ===== */
.indicador[b-4ypyy2r4p1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 3px;
}

/* Paloma azul: Todos tienen este autorizador */
.paloma-azul[b-4ypyy2r4p1] {
    background-color: #0056b3;
    color: #fff;
    font-weight: 900;
}

/* Bolita celeste: Algunos tienen este autorizador */
.bolita-celeste[b-4ypyy2r4p1] {
    background-color: #5bc0de;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío */
.vacio[b-4ypyy2r4p1] {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

/* ===== INDICADORES PARA DEPARTAMENTOS (grises) ===== */
.indicador-depto[b-4ypyy2r4p1] {
    opacity: 0.7;
}

/* Paloma gris: Todos los usuarios del depto tienen autorización */
.paloma-gris[b-4ypyy2r4p1] {
    background-color: #6c757d;
    color: #fff;
    font-weight: 900;
}

/* Bolita gris: Algunos usuarios del depto tienen autorización */
.bolita-gris[b-4ypyy2r4p1] {
    background-color: #adb5bd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío gris para departamentos */
.vacio-gris[b-4ypyy2r4p1] {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
}

/* ===== MODAL ===== */
.modal-overlay[b-4ypyy2r4p1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-4ypyy2r4p1] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
    overflow: hidden;
}

.modal-header[b-4ypyy2r4p1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-cco);
    color: white;
}

.modal-header h3[b-4ypyy2r4p1] {
    margin: 0;
    font-size: var(--texto-12pt);
}

.boton-x[b-4ypyy2r4p1] {
    color: #ccc;
}

.boton-x:hover[b-4ypyy2r4p1] {
    color: white;
}

.modal-body[b-4ypyy2r4p1] {
    padding: 1rem;
    font-size: var(--texto-10pt);
}

.modal-body p[b-4ypyy2r4p1] {
    margin: 0.5rem 0;
}

.modal-footer[b-4ypyy2r4p1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.btn-cancelar[b-4ypyy2r4p1] {
    background-color: #6c757d;
    color: white;
}

.btn-cancelar:hover[b-4ypyy2r4p1] {
    background-color: #545b62;
}

.btn-confirmar[b-4ypyy2r4p1] {
    background-color: #28a745;
    color: white;
}

.btn-confirmar:hover[b-4ypyy2r4p1] {
    background-color: #1e7e34;
}

/* ===== MENSAJES ===== */
.mensaje[b-4ypyy2r4p1] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje-exito[b-4ypyy2r4p1] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error[b-4ypyy2r4p1] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenedor-principal[b-4ypyy2r4p1] {
        flex-direction: column;
        height: auto;
    }

    .panel-tiporeq[b-4ypyy2r4p1],
    .panel-autoriza[b-4ypyy2r4p1] {
        width: 100%;
        max-height: 20rem;
    }

    .barra-acciones[b-4ypyy2r4p1] {
        flex-direction: column;
        align-items: stretch;
    }

    .busqueda-container[b-4ypyy2r4p1] {
        flex-wrap: wrap;
    }

    .input-busqueda[b-4ypyy2r4p1] {
        width: 100%;
    }

    .botones-accion[b-4ypyy2r4p1] {
        justify-content: center;
    }

    .panel-header[b-4ypyy2r4p1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .selector-tiempo[b-4ypyy2r4p1] {
        margin-top: 0.3rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/AuthTipo.razor.rz.scp.css */
/*
   AuthTipo.razor.css
   Estilos para la página de administración de autorizaciones por usuario + tipo de req.
   Diseño: Panel Usuarios (izq) | Panel TipoReq (centro) | Panel Autoriza (der)
*/

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-ttl2f0ghok] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE ACCIONES ===== */
.barra-acciones[b-ttl2f0ghok] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #d4e8c7;
}

.filtro-depto-container[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-depto-container label[b-ttl2f0ghok] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.select-depto[b-ttl2f0ghok] {
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 10rem;
}

.busqueda-container[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busqueda-container label[b-ttl2f0ghok] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.input-busqueda[b-ttl2f0ghok] {
    width: 12rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buscar-en[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-buscar[b-ttl2f0ghok] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-9pt);
    cursor: pointer;
    white-space: nowrap;
}

.check-buscar input[type="checkbox"][b-ttl2f0ghok] {
    margin-right: 0.2rem;
    cursor: pointer;
}

.botones-accion[b-ttl2f0ghok] {
    display: flex;
    gap: 0.5rem;
}

.btn-buscar[b-ttl2f0ghok] {
    background-color: #6c757d;
    color: white;
}

.btn-buscar:hover[b-ttl2f0ghok] {
    background-color: #545b62;
}

.btn-consultar[b-ttl2f0ghok] {
    background-color: #007bff;
    color: white;
}

.btn-consultar:disabled[b-ttl2f0ghok] {
    background-color: #6cb2ff;
    color: #e8f4ff;
}

.btn-consultar:hover:not(:disabled)[b-ttl2f0ghok] {
    background-color: #0056b3;
}

.btn-modificar[b-ttl2f0ghok] {
    background-color: #8b0000;
    color: white;
}

.btn-modificar:disabled[b-ttl2f0ghok] {
    background-color: #c96060;
    color: #f5e0e0;
}

.btn-modificar:hover:not(:disabled)[b-ttl2f0ghok] {
    background-color: #5c0000;
}

.btn-grabar[b-ttl2f0ghok] {
    background-color: #28a745;
    color: white;
}

.btn-grabar:disabled[b-ttl2f0ghok] {
    background-color: #7dca91;
    color: #e8f5eb;
}

.btn-grabar:hover:not(:disabled)[b-ttl2f0ghok] {
    background-color: #1e7e34;
}

/* ===== CONTENEDOR PRINCIPAL: 3 PANELES ===== */
.contenedor-principal[b-ttl2f0ghok] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    height: calc(100vh - 10rem);
    min-height: 25rem;
}

/* ===== PANEL USUARIOS (izquierda) ===== */
.panel-usuarios[b-ttl2f0ghok] {
    width: 30%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

/* ===== PANEL TIPOS DE REQ (centro) ===== */
.panel-tiporeq[b-ttl2f0ghok] {
    width: 40%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

/* ===== PANEL AUTORIZA (derecha) ===== */
.panel-autoriza[b-ttl2f0ghok] {
    width: 30%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.panel-header[b-ttl2f0ghok] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--texto-10pt);
    background-color: #333;
    color: white;
}

.panel-body[b-ttl2f0ghok] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* ===== SELECTOR DE TIPO (Solicita/Procesa/Ambos) ===== */
.selector-tipo[b-ttl2f0ghok] {
    display: flex;
    gap: 0.25rem;
}

.opcion-tipo[b-ttl2f0ghok] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    background-color: #555;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.opcion-tipo:hover[b-ttl2f0ghok] {
    background-color: #666;
}

.opcion-tipo.activo[b-ttl2f0ghok] {
    background-color: #007bff;
}

.opcion-tipo input[type="radio"][b-ttl2f0ghok] {
    display: none;
}

/* ===== SELECTOR DE TIEMPO ===== */
.selector-tiempo[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.selector-tiempo label[b-ttl2f0ghok] {
    font-size: var(--texto-9pt);
    font-weight: normal;
}

.selector-tiempo select[b-ttl2f0ghok] {
    padding: 0.2rem 0.4rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
}

.selector-tiempo select:disabled[b-ttl2f0ghok] {
    background-color: #e9ecef;
    color: #6c757d;
}

/* ===== FILTRO SOLO SELECCIONADOS ===== */
.filtro-seleccionados[b-ttl2f0ghok],
.filtro-autorizados[b-ttl2f0ghok] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    cursor: pointer;
}

.filtro-seleccionados input[type="checkbox"][b-ttl2f0ghok],
.filtro-autorizados input[type="checkbox"][b-ttl2f0ghok] {
    margin-right: 0.3rem;
    cursor: pointer;
}

/* Items de usuarios y tipos de req */
.item-depto[b-ttl2f0ghok],
.item-usuario[b-ttl2f0ghok],
.item-tiporeq[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-depto:hover[b-ttl2f0ghok],
.item-usuario:hover[b-ttl2f0ghok],
.item-tiporeq:hover[b-ttl2f0ghok] {
    background-color: #f0f0f0;
}

.checkbox-container[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-10pt);
    user-select: none;
}

.checkbox-container input[type="checkbox"][b-ttl2f0ghok] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    cursor: pointer;
}

.item-texto[b-ttl2f0ghok] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: var(--texto-10pt);
}

.depto-texto[b-ttl2f0ghok] {
    font-weight: normal;
    color: #888;
}

/* Item usuario sin indentación (modo filtrado) */
.item-usuario-flat[b-ttl2f0ghok] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-usuario-flat:hover[b-ttl2f0ghok] {
    background-color: #f0f0f0;
}

.sin-datos[b-ttl2f0ghok] {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    font-size: var(--texto-10pt);
}

/* Indentación por nivel */
.usuario-nivel-0[b-ttl2f0ghok] { padding-left: 0; }
.usuario-nivel-1[b-ttl2f0ghok] { padding-left: 1rem; }
.usuario-nivel-2[b-ttl2f0ghok] { padding-left: 2rem; }
.usuario-nivel-3[b-ttl2f0ghok] { padding-left: 3rem; }
.usuario-nivel-4[b-ttl2f0ghok] { padding-left: 4rem; }

/* ===== INDICADORES VISUALES ===== */
.indicador[b-ttl2f0ghok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 3px;
}

/* Indicador clickeable en modo edición */
.indicador.clickeable[b-ttl2f0ghok] {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, opacity 0.1s;
}

.indicador.clickeable:hover[b-ttl2f0ghok] {
    transform: scale(1.2);
    opacity: 0.8;
}

.indicador.clickeable:active[b-ttl2f0ghok] {
    transform: scale(0.95);
}

/* Paloma azul: Todos tienen este autorizador */
.paloma-azul[b-ttl2f0ghok] {
    background-color: #0056b3;
    color: #fff;
    font-weight: 900;
}

/* Bolita celeste: Algunos tienen este autorizador */
.bolita-celeste[b-ttl2f0ghok] {
    background-color: #5bc0de;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío */
.vacio[b-ttl2f0ghok] {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

/* Vacío clickeable */
.indicador.clickeable.vacio:hover[b-ttl2f0ghok] {
    border-color: #007bff;
    background-color: #e8f4ff;
}

/* ===== INDICADORES PARA DEPARTAMENTOS (grises) ===== */
.indicador-depto[b-ttl2f0ghok] {
    opacity: 0.7;
}

/* Paloma gris: Todos los usuarios del depto tienen autorización */
.paloma-gris[b-ttl2f0ghok] {
    background-color: #6c757d;
    color: #fff;
    font-weight: 900;
}

/* Bolita gris: Algunos usuarios del depto tienen autorización */
.bolita-gris[b-ttl2f0ghok] {
    background-color: #adb5bd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío gris para departamentos */
.vacio-gris[b-ttl2f0ghok] {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
}

/* Vacío gris clickeable */
.indicador.clickeable.vacio-gris:hover[b-ttl2f0ghok] {
    border-color: #6c757d;
    background-color: #dee2e6;
}

/* ===== MODAL ===== */
.modal-overlay[b-ttl2f0ghok] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-ttl2f0ghok] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
    overflow: hidden;
}

.modal-header[b-ttl2f0ghok] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-cco);
    color: white;
}

.modal-header h3[b-ttl2f0ghok] {
    margin: 0;
    font-size: var(--texto-12pt);
}

.boton-x[b-ttl2f0ghok] {
    color: #ccc;
}

.boton-x:hover[b-ttl2f0ghok] {
    color: white;
}

.modal-body[b-ttl2f0ghok] {
    padding: 1rem;
    font-size: var(--texto-10pt);
}

.modal-body p[b-ttl2f0ghok] {
    margin: 0.5rem 0;
}

.modal-footer[b-ttl2f0ghok] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.btn-cancelar[b-ttl2f0ghok] {
    background-color: #6c757d;
    color: white;
}

.btn-cancelar:hover[b-ttl2f0ghok] {
    background-color: #545b62;
}

.btn-confirmar[b-ttl2f0ghok] {
    background-color: #28a745;
    color: white;
}

.btn-confirmar:hover[b-ttl2f0ghok] {
    background-color: #1e7e34;
}

/* ===== MENSAJES ===== */
.mensaje[b-ttl2f0ghok] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje-exito[b-ttl2f0ghok] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error[b-ttl2f0ghok] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenedor-principal[b-ttl2f0ghok] {
        flex-direction: column;
        height: auto;
    }

    .panel-usuarios[b-ttl2f0ghok],
    .panel-tiporeq[b-ttl2f0ghok],
    .panel-autoriza[b-ttl2f0ghok] {
        width: 100%;
        max-height: 15rem;
    }

    .barra-acciones[b-ttl2f0ghok] {
        flex-direction: column;
        align-items: stretch;
    }

    .busqueda-container[b-ttl2f0ghok] {
        flex-wrap: wrap;
    }

    .input-busqueda[b-ttl2f0ghok] {
        width: 100%;
    }

    .botones-accion[b-ttl2f0ghok] {
        justify-content: center;
    }

    .panel-header[b-ttl2f0ghok] {
        flex-direction: column;
        align-items: flex-start;
    }

    .selector-tipo[b-ttl2f0ghok] {
        margin-top: 0.3rem;
    }

    .selector-tiempo[b-ttl2f0ghok] {
        margin-top: 0.3rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/AuthUser.razor.rz.scp.css */
/*
   AuthUser.razor.css
   Estilos para la página de administración de autorizaciones por usuario.
   Diseño: Panel Usuarios (izq) | Panel Autoriza (der)
*/

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-rzsw7c2cge] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE ACCIONES ===== */
.barra-acciones[b-rzsw7c2cge] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #d4e8c7;
}

.filtro-depto-container[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-depto-container label[b-rzsw7c2cge] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.select-depto[b-rzsw7c2cge] {
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 10rem;
}

.busqueda-container[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busqueda-container label[b-rzsw7c2cge] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.input-busqueda[b-rzsw7c2cge] {
    width: 12rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buscar-en[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-buscar[b-rzsw7c2cge] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-9pt);
    cursor: pointer;
    white-space: nowrap;
}

.check-buscar input[type="checkbox"][b-rzsw7c2cge] {
    margin-right: 0.2rem;
    cursor: pointer;
}

.botones-accion[b-rzsw7c2cge] {
    display: flex;
    gap: 0.5rem;
}

.btn-buscar[b-rzsw7c2cge] {
    background-color: #6c757d;
    color: white;
}

.btn-buscar:hover[b-rzsw7c2cge] {
    background-color: #545b62;
}

.btn-consultar[b-rzsw7c2cge] {
    background-color: #007bff;
    color: white;
}

.btn-consultar:disabled[b-rzsw7c2cge] {
    background-color: #6cb2ff;
    color: #e8f4ff;
}

.btn-consultar:hover:not(:disabled)[b-rzsw7c2cge] {
    background-color: #0056b3;
}

.btn-modificar[b-rzsw7c2cge] {
    background-color: #8b0000;
    color: white;
}

.btn-modificar:disabled[b-rzsw7c2cge] {
    background-color: #c96060;
    color: #f5e0e0;
}

.btn-modificar:hover:not(:disabled)[b-rzsw7c2cge] {
    background-color: #5c0000;
}

.btn-grabar[b-rzsw7c2cge] {
    background-color: #28a745;
    color: white;
}

.btn-grabar:disabled[b-rzsw7c2cge] {
    background-color: #7dca91;
    color: #e8f5eb;
}

.btn-grabar:hover:not(:disabled)[b-rzsw7c2cge] {
    background-color: #1e7e34;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal[b-rzsw7c2cge] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    height: calc(100vh - 10rem);
    min-height: 25rem;
}

/* ===== PANEL USUARIOS (izquierda) ===== */
.panel-usuarios[b-rzsw7c2cge] {
    width: 50%;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.panel-header[b-rzsw7c2cge] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--texto-10pt);
    background-color: #333;
    color: white;
}

.panel-body[b-rzsw7c2cge] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* ===== PANEL AUTORIZA (derecha) ===== */
.panel-autoriza[b-rzsw7c2cge] {
    width: 50%;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

/* ===== SELECTOR DE TIPO (Solicita/Procesa/Ambos) ===== */
.selector-tipo[b-rzsw7c2cge] {
    display: flex;
    gap: 0.25rem;
}

.opcion-tipo[b-rzsw7c2cge] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    background-color: #555;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.opcion-tipo:hover[b-rzsw7c2cge] {
    background-color: #666;
}

.opcion-tipo.activo[b-rzsw7c2cge] {
    background-color: #007bff;
}

.opcion-tipo input[type="radio"][b-rzsw7c2cge] {
    display: none;
}

/* ===== SELECTOR DE TIEMPO ===== */
.selector-tiempo[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.selector-tiempo label[b-rzsw7c2cge] {
    font-size: var(--texto-9pt);
    font-weight: normal;
}

.selector-tiempo select[b-rzsw7c2cge] {
    padding: 0.2rem 0.4rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
}

.selector-tiempo select:disabled[b-rzsw7c2cge] {
    background-color: #e9ecef;
    color: #6c757d;
}

/* ===== FILTRO SOLO SELECCIONADOS ===== */
.filtro-seleccionados[b-rzsw7c2cge],
.filtro-autorizados[b-rzsw7c2cge] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    cursor: pointer;
}

.filtro-seleccionados input[type="checkbox"][b-rzsw7c2cge],
.filtro-autorizados input[type="checkbox"][b-rzsw7c2cge] {
    margin-right: 0.3rem;
    cursor: pointer;
}

/* Items de usuarios */
.item-depto[b-rzsw7c2cge],
.item-usuario[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-depto:hover[b-rzsw7c2cge],
.item-usuario:hover[b-rzsw7c2cge] {
    background-color: #f0f0f0;
}

.checkbox-container[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-10pt);
    user-select: none;
}

.checkbox-container input[type="checkbox"][b-rzsw7c2cge] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    cursor: pointer;
}

.item-texto[b-rzsw7c2cge] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: var(--texto-10pt);
}

.depto-texto[b-rzsw7c2cge] {
    font-weight: normal;
    color: #888;
}

/* Item usuario sin indentación (modo filtrado) */
.item-usuario-flat[b-rzsw7c2cge] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-usuario-flat:hover[b-rzsw7c2cge] {
    background-color: #f0f0f0;
}

.sin-datos[b-rzsw7c2cge] {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    font-size: var(--texto-10pt);
}

/* Indentación por nivel */
.usuario-nivel-0[b-rzsw7c2cge] { padding-left: 0; }
.usuario-nivel-1[b-rzsw7c2cge] { padding-left: 1rem; }
.usuario-nivel-2[b-rzsw7c2cge] { padding-left: 2rem; }
.usuario-nivel-3[b-rzsw7c2cge] { padding-left: 3rem; }
.usuario-nivel-4[b-rzsw7c2cge] { padding-left: 4rem; }

/* ===== INDICADORES VISUALES ===== */
.indicador[b-rzsw7c2cge] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 3px;
}

/* Indicador clickeable en modo edición */
.indicador.clickeable[b-rzsw7c2cge] {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, opacity 0.1s;
}

.indicador.clickeable:hover[b-rzsw7c2cge] {
    transform: scale(1.2);
    opacity: 0.8;
}

.indicador.clickeable:active[b-rzsw7c2cge] {
    transform: scale(0.95);
}

/* Paloma azul: Todos tienen este autorizador */
.paloma-azul[b-rzsw7c2cge] {
    background-color: #0056b3;
    color: #fff;
    font-weight: 900;
}

/* Bolita celeste: Algunos tienen este autorizador */
.bolita-celeste[b-rzsw7c2cge] {
    background-color: #5bc0de;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío */
.vacio[b-rzsw7c2cge] {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

/* Vacío clickeable */
.indicador.clickeable.vacio:hover[b-rzsw7c2cge] {
    border-color: #007bff;
    background-color: #e8f4ff;
}

/* ===== INDICADORES PARA DEPARTAMENTOS (grises) ===== */
.indicador-depto[b-rzsw7c2cge] {
    opacity: 0.7;
}

/* Paloma gris: Todos los usuarios del depto tienen autorización */
.paloma-gris[b-rzsw7c2cge] {
    background-color: #6c757d;
    color: #fff;
    font-weight: 900;
}

/* Bolita gris: Algunos usuarios del depto tienen autorización */
.bolita-gris[b-rzsw7c2cge] {
    background-color: #adb5bd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío gris para departamentos */
.vacio-gris[b-rzsw7c2cge] {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
}

/* Vacío gris clickeable */
.indicador.clickeable.vacio-gris:hover[b-rzsw7c2cge] {
    border-color: #6c757d;
    background-color: #dee2e6;
}

/* ===== MODAL ===== */
.modal-overlay[b-rzsw7c2cge] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-rzsw7c2cge] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
    overflow: hidden;
}

.modal-header[b-rzsw7c2cge] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-cco);
    color: white;
}

.modal-header h3[b-rzsw7c2cge] {
    margin: 0;
    font-size: var(--texto-12pt);
}

.boton-x[b-rzsw7c2cge] {
    color: #ccc;
}

.boton-x:hover[b-rzsw7c2cge] {
    color: white;
}

.modal-body[b-rzsw7c2cge] {
    padding: 1rem;
    font-size: var(--texto-10pt);
}

.modal-body p[b-rzsw7c2cge] {
    margin: 0.5rem 0;
}

.modal-footer[b-rzsw7c2cge] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.btn-cancelar[b-rzsw7c2cge] {
    background-color: #6c757d;
    color: white;
}

.btn-cancelar:hover[b-rzsw7c2cge] {
    background-color: #545b62;
}

.btn-confirmar[b-rzsw7c2cge] {
    background-color: #28a745;
    color: white;
}

.btn-confirmar:hover[b-rzsw7c2cge] {
    background-color: #1e7e34;
}

/* ===== MENSAJES ===== */
.mensaje[b-rzsw7c2cge] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje-exito[b-rzsw7c2cge] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error[b-rzsw7c2cge] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenedor-principal[b-rzsw7c2cge] {
        flex-direction: column;
        height: auto;
    }

    .panel-usuarios[b-rzsw7c2cge],
    .panel-autoriza[b-rzsw7c2cge] {
        width: 100%;
        max-height: 20rem;
    }

    .barra-acciones[b-rzsw7c2cge] {
        flex-direction: column;
        align-items: stretch;
    }

    .busqueda-container[b-rzsw7c2cge] {
        flex-wrap: wrap;
    }

    .input-busqueda[b-rzsw7c2cge] {
        width: 100%;
    }

    .botones-accion[b-rzsw7c2cge] {
        justify-content: center;
    }

    .panel-header[b-rzsw7c2cge] {
        flex-direction: column;
        align-items: flex-start;
    }

    .selector-tipo[b-rzsw7c2cge] {
        margin-top: 0.3rem;
    }

    .selector-tiempo[b-rzsw7c2cge] {
        margin-top: 0.3rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/BotMenu.razor.rz.scp.css */
/* =============================================================
   BotMenu.razor.css - Bot: Configuración y Estado
   Estilos del módulo Bot para administradores CCO.
   Tamaños alineados con Panel.razor.css del sistema.
   ============================================================= */

/* ===== TITULO ===== */
.bot-titulo-contenedor[b-3am20nt45k] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bot-titulo[b-3am20nt45k] {
    color: var(--color-cco);
    margin-bottom: 0;
    font-size: var(--texto-16pt);
}

.bot-reloj[b-3am20nt45k] {
    font-size: var(--texto-8pt);
    color: #888;
}

/* ===== SECCIONES (misma estructura que Panel CCO) ===== */
.panel-seccion[b-3am20nt45k] {
    background: white;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.panel-seccion h3[b-3am20nt45k] {
    color: #333;
    font-size: var(--texto-11pt);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--color-cco);
}

/* ===== TABLA GENERAL ===== */
.bot-tabla[b-3am20nt45k] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--texto-9pt);
}

/* ===== TABLA PROCESOS (divs flex/grid como CatEstados) ===== */
.proc-header[b-3am20nt45k] {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: normal;
    font-size: var(--texto-8pt);
}

.proc-list[b-3am20nt45k] {
    border: 1px solid #e0e0e0;
    border-top: none;
}

.proc-item[b-3am20nt45k] {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    font-size: var(--texto-9pt);
}

.proc-item:last-child[b-3am20nt45k] {
    border-bottom: none;
}

.col-proc-tarea[b-3am20nt45k] { width: 25%; }
.col-proc-estado[b-3am20nt45k] { width: 25%; text-align: center; }
.col-proc-fecha[b-3am20nt45k] { width: 30%; text-align: center; }
.col-proc-resultado[b-3am20nt45k] { width: 15%; }
.col-proc-accion[b-3am20nt45k] { width: 4.5rem; text-align: center; }

.bot-tabla thead th[b-3am20nt45k] {
    background-color: var(--color-cco);
    color: white;
    padding: 0.3rem 0.5rem;
    text-align: left;
    font-weight: normal;
    font-size: var(--texto-8pt);
}

.bot-tabla tbody td[b-3am20nt45k] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

/* Specificity .bot-tabla .col-centro (0,2,0,0) gana sobre .bot-tabla thead th (0,1,0,2) */
.bot-tabla .col-centro[b-3am20nt45k] {
    text-align: center;
}

/* Columna de valor: centrado para alinear header con datos */
.bot-tabla .col-valor[b-3am20nt45k] {
    text-align: center;
    width: 5rem;
    font-weight: bold;
}

/* Columna de acción: ancho para 2 botones en modo edición */
.col-accion[b-3am20nt45k] {
    width: 4.5rem;
    text-align: center;
}

/* ===== ETIQUETAS DE ESTADO ===== */
.etiqueta-libre[b-3am20nt45k] {
    color: #548C2E;
    font-weight: bold;
}

.etiqueta-corriendo[b-3am20nt45k] {
    color: #D4A017;
    font-weight: bold;
}

.etiqueta-pausado[b-3am20nt45k] {
    color: #CC0000;
    font-weight: bold;
}

/* ===== BOTONES DE ACCIÓN (patrón CatEstados) ===== */
.btn-accion[b-3am20nt45k] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-3am20nt45k] {
    opacity: 0.8;
}

.btn-editar[b-3am20nt45k] {
    background-color: #1976d2;
    color: white;
}

.btn-confirmar[b-3am20nt45k] {
    background-color: #548C2E;
    color: white;
}

.btn-cancelar[b-3am20nt45k] {
    background-color: #999;
    color: white;
    margin-left: 0.2rem;
}

.btn-liberar[b-3am20nt45k] {
    background-color: #CC0000;
    color: white;
}

.btn-pausar[b-3am20nt45k] {
    background-color: #D4A017;
    color: white;
}

.btn-reactivar[b-3am20nt45k] {
    background-color: #548C2E;
    color: white;
}

/* ===== INPUT DE EDICIÓN INLINE ===== */
.input-config[b-3am20nt45k] {
    padding: 0.2rem 0.3rem;
    font-size: var(--texto-9pt);
    border: 1px solid #1976d2;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    font-weight: bold;
}

/* ===== COLA DE EMAILS ===== */
.cola-grid[b-3am20nt45k] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.cola-card[b-3am20nt45k] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    text-align: center;
    min-width: 5rem;
}

.cola-numero[b-3am20nt45k] {
    font-size: var(--texto-12pt);
    font-weight: 700;
    color: #333;
}

.cola-reintento[b-3am20nt45k] { color: #D4A017; }
.cola-fallido[b-3am20nt45k] { color: #CC0000; }
.cola-enviado[b-3am20nt45k] { color: #548C2E; }

.cola-label[b-3am20nt45k] {
    font-size: var(--texto-8pt);
    color: #888;
}

.cola-acciones[b-3am20nt45k] {
    margin-top: 0.5rem;
}

.btn-reintentar[b-3am20nt45k] {
    background-color: #D4A017;
    color: white;
}

.btn-reintentar:hover[b-3am20nt45k] {
    background-color: #B8860B;
}

/* ===== PERMISOS PENDIENTES ===== */
.permisos-inline[b-3am20nt45k] {
    font-size: var(--texto-9pt);
    color: #8b0000;
    font-weight: bold;
    margin: 0;
    line-height: 1.6;
}

/* ===== TONALIDAD POR GRUPO DE CONFIGURACIÓN ===== */
.fila-procdia td[b-3am20nt45k] {
    background-color: #f5f0ff;
}

/* ===== MENSAJE DE CONFIRMACIÓN ===== */
.config-mensaje[b-3am20nt45k] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    padding: 0.3rem 0.5rem;
    margin-top: 0.5rem;
    border-radius: 3px;
    display: inline-block;
}

.mensaje-error[b-3am20nt45k] {
    color: maroon;
    background-color: #ffe6e6;
}

.mensaje-ok[b-3am20nt45k] {
    color: darkgreen;
    background-color: #e6ffe6;
}

/* ===== SPINNER DEL MÓDULO ===== */
.sirei-spinner[b-3am20nt45k] {
    --spinner-color: var(--color-cco);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .bot-titulo-contenedor[b-3am20nt45k] {
        flex-direction: column;
    }

    .cola-card[b-3am20nt45k] {
        min-width: 3.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* Tablas: todo más compacto, scroll si no cabe */
    .panel-seccion[b-3am20nt45k] {
        overflow-x: auto;
    }

    .proc-item[b-3am20nt45k] {
        font-size: var(--texto-8pt);
    }

    .bot-tabla[b-3am20nt45k] {
        font-size: var(--texto-8pt);
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatCalendarios.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CatCalendarios.razor.css - Estilos del Catálogo de Calendarios Laborales
   Módulo: CCO (Verde Militar)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   HEADER Y SELECTOR
   ═══════════════════════════════════════════════════════════════════ */
.seccion-header[b-aeyg18kb5r] {
    margin-bottom: 1rem;
}

.titulo-pagina[b-aeyg18kb5r] {
    font-size: var(--texto-12pt);
    color: var(--color-cco);
    margin: 0 0 0.75rem 0;
    font-weight: bold;
}

.selector-calendario[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.label-selector[b-aeyg18kb5r] {
    font-size: var(--texto-9pt);
    font-weight: bold;
}

.select-calendario[b-aeyg18kb5r] {
    font-size: var(--texto-9pt);
    padding: 0.3rem 0.5rem;
    min-width: 15rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.btn-nuevo[b-aeyg18kb5r] {
    background-color: var(--color-cco);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN DE DETALLE
   ═══════════════════════════════════════════════════════════════════ */
.seccion-detalle[b-aeyg18kb5r] {
    background-color: #fafafa;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.subseccion[b-aeyg18kb5r] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ddd;
}

.subseccion:last-of-type[b-aeyg18kb5r] {
    border-bottom: none;
    margin-bottom: 1rem;
}

.subtitulo[b-aeyg18kb5r] {
    font-size: var(--texto-12pt);
    color: var(--color-cco);
    margin: 0 0 0.75rem 0;
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════
   INFORMACIÓN GENERAL
   ═══════════════════════════════════════════════════════════════════ */
.fila-info[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.label-campo[b-aeyg18kb5r] {
    font-size: var(--texto-9pt);
    font-weight: bold;
}

.label-rango[b-aeyg18kb5r] {
    margin-left: 1rem;
}

.input-nombre[b-aeyg18kb5r] {
    font-size: var(--texto-9pt);
    padding: 0.3rem 0.5rem;
    width: 15rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.input-fecha[b-aeyg18kb5r] {
    font-size: var(--texto-9pt);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.nota-info[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLA DE JORNADA SEMANAL
   ═══════════════════════════════════════════════════════════════════ */
.total-semana[b-aeyg18kb5r] {
    font-weight: normal;
    font-size: var(--texto-9pt);
    color: #666;
}

.nota-jornada[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    color: #666;
    margin-bottom: 0.5rem;
}

.tabla-jornada[b-aeyg18kb5r] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.tabla-jornada th[b-aeyg18kb5r],
.tabla-jornada td[b-aeyg18kb5r] {
    padding: 0.4rem 0.5rem;
    text-align: center;
    border: 1px solid #ddd;
}

.tabla-jornada th[b-aeyg18kb5r] {
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
}

.tabla-jornada tbody tr:nth-child(even)[b-aeyg18kb5r] {
    background-color: #f5f5f5;
}

.tabla-jornada tbody tr:hover[b-aeyg18kb5r] {
    background-color: #e8f5e9;
}

.celda-dia[b-aeyg18kb5r] {
    font-weight: bold;
    text-align: left;
    width: 5.5rem;
}

.dia-largo[b-aeyg18kb5r] {
    display: inline;
}

.dia-corto[b-aeyg18kb5r] {
    display: none;
}

.celda-total[b-aeyg18kb5r] {
    font-weight: bold;
    color: var(--color-cco);
    width: 3rem;
    text-align: center;
}

.input-hora[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    padding: 0.2rem 0.3rem;
    width: 6rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   DÍAS FESTIVOS
   ═══════════════════════════════════════════════════════════════════ */
.nota-festivos[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    color: #666;
    margin-bottom: 0.5rem;
}

.nota-opcional[b-aeyg18kb5r] {
    color: #996600;
}

.lista-festivos[b-aeyg18kb5r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.checkbox-festivo[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--texto-8pt);
    padding: 0.3rem 0.6rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    cursor: pointer;
    min-width: 12rem;
}

.checkbox-festivo:hover[b-aeyg18kb5r] {
    background-color: #e8f5e9;
    border-color: var(--color-cco);
}

.checkbox-festivo input[type="checkbox"][b-aeyg18kb5r] {
    margin: 0;
    cursor: pointer;
}

.fecha-festivo[b-aeyg18kb5r] {
    font-weight: bold;
    color: var(--color-cco);
}

.nombre-festivo[b-aeyg18kb5r] {
    flex: 1;
}

.tag-movil[b-aeyg18kb5r] {
    font-size: var(--texto-7pt);
    color: #666;
    font-style: italic;
}

/* Botón de quitar para días específicos */
.btn-quitar-dia[b-aeyg18kb5r] {
    background: none;
    border: none;
    color: #c00;
    font-size: var(--texto-10pt);
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    margin-left: auto;
}

.btn-quitar-dia:hover[b-aeyg18kb5r] {
    color: #f00;
}

.dia-especifico-item[b-aeyg18kb5r] {
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════
   DÍAS ESPECÍFICOS ADICIONALES
   ═══════════════════════════════════════════════════════════════════ */
.fila-agregar-dia[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.input-descripcion-dia[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    padding: 0.3rem 0.5rem;
    width: 12rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.btn-agregar[b-aeyg18kb5r] {
    background-color: var(--color-cco);
    color: white;
    font-size: var(--texto-8pt);
}

.lista-dias-especificos[b-aeyg18kb5r] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dia-especifico[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
}

.fecha-dia[b-aeyg18kb5r] {
    font-weight: bold;
    color: var(--color-cco);
}

.desc-dia[b-aeyg18kb5r] {
    flex: 1;
    color: #666;
}

.btn-quitar[b-aeyg18kb5r] {
    color: #cc0000;
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    padding: 0;
    width: 1.2rem;
    height: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════
   MENSAJE DE RECORDATORIO
   ═══════════════════════════════════════════════════════════════════ */
.mensaje-recordatorio[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
    color: #856404;
    margin-bottom: 1rem;
}

.icono-alerta[b-aeyg18kb5r] {
    font-size: 1.2rem;                        /* Emoji/icono, no es texto - no usar variable */
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN
   ═══════════════════════════════════════════════════════════════════ */
.seccion-botones[b-aeyg18kb5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

.btn-guardar[b-aeyg18kb5r] {
    background-color: var(--color-cco);
    color: white;
}

.btn-guardar:disabled[b-aeyg18kb5r] {
    background-color: #aaa;
}

.btn-eliminar[b-aeyg18kb5r] {
    background-color: #cc0000;
    color: white;
}

.btn-cancelar[b-aeyg18kb5r] {
    background-color: #666;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   MENSAJES DE RESULTADO
   ═══════════════════════════════════════════════════════════════════ */
.mensaje-resultado[b-aeyg18kb5r] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
}

.mensaje-exito[b-aeyg18kb5r] {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

.mensaje-error[b-aeyg18kb5r] {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMACIÓN
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay[b-aeyg18kb5r] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-aeyg18kb5r] {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
}

.modal-header[b-aeyg18kb5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 0.5rem 0.5rem 0 0;
}

.modal-header h3[b-aeyg18kb5r] {
    margin: 0;
    font-size: var(--texto-12pt);
    color: #333;
}

.modal-body[b-aeyg18kb5r] {
    padding: 1rem;
    font-size: var(--texto-9pt);
}

.modal-body p[b-aeyg18kb5r] {
    margin: 0 0 0.5rem 0;
}

.nota-modal[b-aeyg18kb5r] {
    font-size: var(--texto-8pt);
    color: #666;
    font-style: italic;
}

.modal-footer[b-aeyg18kb5r] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 0 0 0.5rem 0.5rem;
}

.btn-cancelar-modal[b-aeyg18kb5r] {
    background-color: #666;
    color: white;
}

.btn-confirmar-eliminar[b-aeyg18kb5r] {
    background-color: #cc0000;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE - CELULAR
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .titulo-pagina[b-aeyg18kb5r] {
        font-size: var(--texto-11pt);
    }

    .selector-calendario[b-aeyg18kb5r] {
        flex-wrap: wrap;
    }

    .select-calendario[b-aeyg18kb5r] {
        flex: 1;
        min-width: 10rem;
    }

    .btn-nuevo[b-aeyg18kb5r] {
        flex: 0 0 auto;
    }

    .fila-info[b-aeyg18kb5r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .label-rango[b-aeyg18kb5r] {
        margin-left: 0;
    }

    .input-nombre[b-aeyg18kb5r] {
        width: 100%;
    }

    .input-fecha[b-aeyg18kb5r] {
        width: 100%;
    }

    /* Tabla de jornada en scroll horizontal */
    .tabla-jornada[b-aeyg18kb5r] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .dia-largo[b-aeyg18kb5r] {
        display: none;
    }

    .dia-corto[b-aeyg18kb5r] {
        display: inline;
    }

    .celda-dia[b-aeyg18kb5r] {
        width: 2rem;
    }

    .input-hora[b-aeyg18kb5r] {
        width: 4.5rem;
    }

    /* Festivos en columna */
    .lista-festivos[b-aeyg18kb5r] {
        flex-direction: column;
    }

    .checkbox-festivo[b-aeyg18kb5r] {
        width: 100%;
        min-width: unset;
    }

    .fila-agregar-dia[b-aeyg18kb5r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .input-descripcion-dia[b-aeyg18kb5r] {
        width: 100%;
    }

    .btn-agregar[b-aeyg18kb5r] {
        width: 100%;
        text-align: center;
    }

    .seccion-botones[b-aeyg18kb5r] {
        flex-direction: column;
    }

    .seccion-botones .boton[b-aeyg18kb5r],
    .seccion-botones .boton-grande[b-aeyg18kb5r] {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    .mensaje-recordatorio[b-aeyg18kb5r] {
        flex-direction: column;
        text-align: center;
    }

    .modal-contenedor[b-aeyg18kb5r] {
        margin: 1rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatCiudades.razor.rz.scp.css */
/* ============================================================
   CatCiudades.razor.css - Estilos para ABC de Ciudades
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-ym25uow3lx] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-ym25uow3lx] {
    background-color: #d4e8c7;
}

/* Select de estado */
.barra-filtros-select-estado[b-ym25uow3lx] {
    width: 10rem;
}

/* Checkbox de filtro */
.filtro-checkbox[b-ym25uow3lx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-ym25uow3lx] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-ym25uow3lx] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-ym25uow3lx] {
    background-color: #6a1b9a;
}

/* Tabla de catálogo */
.tabla-header[b-ym25uow3lx] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-ym25uow3lx] {
    display: none;
}

.cat-list[b-ym25uow3lx] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-ym25uow3lx] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-ym25uow3lx] {
    border-bottom: none;
}

.cat-item:hover[b-ym25uow3lx] {
    background-color: #f8f9fa;
}

.cat-item-baja[b-ym25uow3lx] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-estado[b-ym25uow3lx] {
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-ciudad[b-ym25uow3lx] {
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-estatus[b-ym25uow3lx] {
    width: 15%;
    text-align: center;
}

.col-acciones[b-ym25uow3lx] {
    width: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-ym25uow3lx] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-baja[b-ym25uow3lx] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-ym25uow3lx] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-ym25uow3lx] {
    opacity: 0.8;
}

.btn-editar[b-ym25uow3lx] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-ym25uow3lx] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-ym25uow3lx] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-ym25uow3lx] {
        display: none;
    }

    .tabla-header-movil[b-ym25uow3lx] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
    }

    .tabla-header-movil .col-izq[b-ym25uow3lx] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-ym25uow3lx] {
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-ym25uow3lx] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: CSS Grid */
    .cat-item[b-ym25uow3lx] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* Línea 1: Ciudad + Estatus */
    .col-ciudad[b-ym25uow3lx] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-estatus[b-ym25uow3lx] {
        grid-row: 1;
        grid-column: 2;
        width: auto;
        text-align: right;
    }

    /* Línea 2: Estado + Acciones */
    .col-estado[b-ym25uow3lx] {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-acciones[b-ym25uow3lx] {
        grid-row: 2;
        grid-column: 2;
        width: auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-ym25uow3lx] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatDeptos.razor.rz.scp.css */
/* ============================================================
   CatDeptos.razor.css - Estilos para ABC de Departamentos
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-g61qax2ks8] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-g61qax2ks8] {
    background-color: #d4e8c7;
}

/* Checkbox de filtro */
.filtro-checkbox[b-g61qax2ks8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-g61qax2ks8] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-g61qax2ks8] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-g61qax2ks8] {
    background-color: #6a1b9a;
}

/* Tabla de catálogo */
.tabla-header[b-g61qax2ks8] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-g61qax2ks8] {
    display: none;
}

.cat-list[b-g61qax2ks8] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-g61qax2ks8] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-g61qax2ks8] {
    border-bottom: none;
}

.cat-item:hover[b-g61qax2ks8] {
    background-color: #f8f9fa;
}

.cat-item-inactivo[b-g61qax2ks8] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-orden[b-g61qax2ks8] {
    width: 5%;
    text-align: center;
    font-family: monospace;
}

.col-id[b-g61qax2ks8] {
    width: 5%;
    text-align: center;
    font-family: monospace;
}

.col-depto[b-g61qax2ks8] {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-responsable[b-g61qax2ks8] {
    width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-usuarios[b-g61qax2ks8] {
    width: 5%;
    text-align: center;
}

.col-config[b-g61qax2ks8] {
    width: 8%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.col-estatus[b-g61qax2ks8] {
    width: 10%;
    text-align: center;
}

.col-acciones[b-g61qax2ks8] {
    width: 15%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Indentación de jerarquía */
.depto-indent[b-g61qax2ks8] {
    color: #999;
    font-family: monospace;
}

.depto-nombre[b-g61qax2ks8] {
    font-weight: 500;
}

.depto-hijos[b-g61qax2ks8] {
    color: #666;
    font-size: var(--texto-7pt);
    margin-left: 0.25rem;
}

/* Badges de configuración */
.config-badge[b-g61qax2ks8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 3px;
    font-size: var(--texto-7pt);
    font-weight: bold;
}

.config-recibe[b-g61qax2ks8] {
    background-color: #2196f3;
    color: white;
}

.config-acepta[b-g61qax2ks8] {
    background-color: #9c27b0;
    color: white;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-g61qax2ks8] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-inactivo[b-g61qax2ks8] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-g61qax2ks8] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-g61qax2ks8] {
    opacity: 0.8;
}

.btn-editar[b-g61qax2ks8] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-g61qax2ks8] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-g61qax2ks8] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   MODAL CONFIRMACIÓN
   ============================================================ */

.modal-overlay[b-g61qax2ks8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-g61qax2ks8] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
}

.modal-confirmar[b-g61qax2ks8] {
    background-color: #696969;
}

.modal-header[b-g61qax2ks8] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-g61qax2ks8] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.boton-x[b-g61qax2ks8] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-x:hover[b-g61qax2ks8] {
    opacity: 0.7;
}

.modal-body[b-g61qax2ks8] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-10pt);
    color: #FFFFFF;
}

.modal-body p[b-g61qax2ks8] {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.modal-footer[b-g61qax2ks8] {
    padding: 0.94rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-footer .boton:first-of-type[b-g61qax2ks8] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-footer .boton:first-of-type:hover[b-g61qax2ks8] {
    background-color: #666666;
}

.btn-confirmar[b-g61qax2ks8] {
    background-color: #ff9800;
    color: #000000;
}

.btn-confirmar:hover[b-g61qax2ks8] {
    background-color: #e68900;
}

/* Alerta de dependencias */
.alerta-dependencias[b-g61qax2ks8] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--texto-9pt);
    color: #000000;
}

.alerta-icono[b-g61qax2ks8] {
    color: #856404;
    font-size: 1.2rem;
}

.alerta-dependencias ul[b-g61qax2ks8] {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.alerta-dependencias li[b-g61qax2ks8] {
    margin: 0.25rem 0;
}

.alerta-dependencias p[b-g61qax2ks8] {
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

/* ============================================================
   MENSAJE DE ERROR
   ============================================================ */
.mensaje-error-usuario[b-g61qax2ks8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

.mensaje-error-usuario span[b-g61qax2ks8] {
    flex: 1;
    text-align: center;
}

.boton-cerrar-error[b-g61qax2ks8] {
    background: none;
    border: none;
    color: #721c24;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-cerrar-error:hover[b-g61qax2ks8] {
    opacity: 0.7;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-g61qax2ks8] {
        display: none;
    }

    .tabla-header-movil[b-g61qax2ks8] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-g61qax2ks8] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-g61qax2ks8] {
        flex: 0 0 auto;
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-g61qax2ks8] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: Flexbox con wrap para 2 líneas */
    .cat-item[b-g61qax2ks8] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem 0.5rem;
        padding: 0.5rem;
    }

    /* ========== LÍNEA 1: Ord ID Depto ... Estatus ========== */
    .col-orden[b-g61qax2ks8] {
        order: 1;
        flex: 0 0 auto;
        font-size: var(--texto-7pt);
    }

    .col-id[b-g61qax2ks8] {
        order: 2;
        flex: 0 0 auto;
        font-size: var(--texto-7pt);
    }

    .col-depto[b-g61qax2ks8] {
        order: 3;
        flex: 1 0 60%;
        min-width: 60%;
    }

    .col-estatus[b-g61qax2ks8] {
        order: 4;
        flex: 0 0 auto;
    }

    /* ========== LÍNEA 2: Responsable Usu:# [R][U] ... Acciones ========== */
    .col-responsable[b-g61qax2ks8] {
        order: 5;
        flex: 0 0 auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-usuarios[b-g61qax2ks8] {
        order: 6;
        flex: 0 0 auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-usuarios[b-g61qax2ks8]::before {
        content: "Usu:";
    }

    .col-config[b-g61qax2ks8] {
        order: 7;
        flex: 1 0 auto;
    }

    .col-acciones[b-g61qax2ks8] {
        order: 8;
        flex: 0 0 auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-g61qax2ks8] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }

}
/* _content/SiREI_2026/Components/Pages/10CCO/CatEstados.razor.rz.scp.css */
/* ============================================================
   CatEstados.razor.css - Estilos para ABC de Estados
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-k2vnhi7cgh] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-k2vnhi7cgh] {
    background-color: #d4e8c7;
}

/* Checkbox de filtro */
.filtro-checkbox[b-k2vnhi7cgh] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-k2vnhi7cgh] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-k2vnhi7cgh] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-k2vnhi7cgh] {
    background-color: #6a1b9a;
}

/* Tabla de catálogo */
.tabla-header[b-k2vnhi7cgh] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-k2vnhi7cgh] {
    display: none;
}

.cat-list[b-k2vnhi7cgh] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-k2vnhi7cgh] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-k2vnhi7cgh] {
    border-bottom: none;
}

.cat-item:hover[b-k2vnhi7cgh] {
    background-color: #f8f9fa;
}

.cat-item-baja[b-k2vnhi7cgh] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-id[b-k2vnhi7cgh] {
    width: 8%;
    text-align: center;
}

.col-nombre[b-k2vnhi7cgh] {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-ciudades[b-k2vnhi7cgh] {
    width: 12%;
    text-align: center;
}

.col-estatus[b-k2vnhi7cgh] {
    width: 15%;
    text-align: center;
}

.col-acciones[b-k2vnhi7cgh] {
    width: 15%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-k2vnhi7cgh] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-baja[b-k2vnhi7cgh] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-k2vnhi7cgh] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-k2vnhi7cgh] {
    opacity: 0.8;
}

.btn-editar[b-k2vnhi7cgh] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-k2vnhi7cgh] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-k2vnhi7cgh] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-k2vnhi7cgh] {
        display: none;
    }

    .tabla-header-movil[b-k2vnhi7cgh] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
    }

    .tabla-header-movil .col-izq[b-k2vnhi7cgh] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-k2vnhi7cgh] {
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-k2vnhi7cgh] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: CSS Grid */
    .cat-item[b-k2vnhi7cgh] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* Línea 1: ID + Nombre + Estatus */
    .col-id[b-k2vnhi7cgh] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-nombre[b-k2vnhi7cgh] {
        grid-row: 1;
        grid-column: 2;
        width: auto;
    }

    .col-estatus[b-k2vnhi7cgh] {
        grid-row: 1;
        grid-column: 3;
        width: auto;
        text-align: right;
    }

    /* Línea 2: Ciudades + Acciones */
    .col-ciudades[b-k2vnhi7cgh] {
        grid-row: 2;
        grid-column: 1 / 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
        text-align: left;
    }

    .col-ciudades[b-k2vnhi7cgh]::before {
        content: "Ciudades: ";
    }

    .col-acciones[b-k2vnhi7cgh] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-k2vnhi7cgh] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatFormas.razor.rz.scp.css */
/* ============================================================
   CatFormas.razor.css - Estilos para ABC de Formas
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-e7ern3oaf9] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-e7ern3oaf9] {
    background-color: #d4e8c7;
}

/* Checkbox de filtro */
.filtro-checkbox[b-e7ern3oaf9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-e7ern3oaf9] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-e7ern3oaf9] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-e7ern3oaf9] {
    background-color: #6a1b9a;
}

/* Tabla de catálogo */
.tabla-header[b-e7ern3oaf9] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-e7ern3oaf9] {
    display: none;
}

.cat-list[b-e7ern3oaf9] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-e7ern3oaf9] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-e7ern3oaf9] {
    border-bottom: none;
}

.cat-item:hover[b-e7ern3oaf9] {
    background-color: #f8f9fa;
}

.cat-item-baja[b-e7ern3oaf9] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-id[b-e7ern3oaf9] {
    width: 15%;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-descripcion[b-e7ern3oaf9] {
    width: 43%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-reqs[b-e7ern3oaf9] {
    width: 12%;
    text-align: center;
}

.col-estatus[b-e7ern3oaf9] {
    width: 15%;
    text-align: center;
}

.col-acciones[b-e7ern3oaf9] {
    width: 15%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-e7ern3oaf9] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-baja[b-e7ern3oaf9] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-e7ern3oaf9] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-e7ern3oaf9] {
    opacity: 0.8;
}

.btn-editar[b-e7ern3oaf9] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-e7ern3oaf9] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-e7ern3oaf9] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   MODAL - Estilos del modal inline
   ============================================================ */
.modal-catalogo-overlay[b-e7ern3oaf9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-catalogo-content[b-e7ern3oaf9] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 95%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
    overflow: hidden;
}

.modal-catalogo-header[b-e7ern3oaf9] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-catalogo-header h3[b-e7ern3oaf9] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.modal-catalogo-header .boton-x[b-e7ern3oaf9] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-catalogo-header .boton-x:hover[b-e7ern3oaf9] {
    opacity: 0.7;
}

.modal-catalogo-body[b-e7ern3oaf9] {
    padding: 0.75rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-catalogo-grupo[b-e7ern3oaf9] {
    margin-bottom: 0.75rem;
}

.modal-catalogo-grupo > label[b-e7ern3oaf9] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.modal-catalogo-input[b-e7ern3oaf9],
.modal-catalogo-select[b-e7ern3oaf9] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.modal-catalogo-readonly[b-e7ern3oaf9] {
    display: inline-block;
    padding: 0.5rem;
    background-color: #555555;
    color: #FFFFFF;
    font-size: var(--texto-9pt);
    font-family: monospace;
    font-weight: bold;
    border: 1px solid #888888;
    width: 100%;
    box-sizing: border-box;
}

.modal-catalogo-nota[b-e7ern3oaf9] {
    font-size: var(--texto-8pt);
    color: #FFCC00;
    display: block;
    margin-top: 0.25rem;
}

.modal-catalogo-error[b-e7ern3oaf9] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: #000000;
    font-size: var(--texto-9pt);
    margin-bottom: 0.75rem;
}

.modal-catalogo-footer[b-e7ern3oaf9] {
    padding: 0.94rem 0 0 0;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-catalogo-footer .boton:first-of-type[b-e7ern3oaf9] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-catalogo-footer .boton:first-of-type:hover[b-e7ern3oaf9] {
    background-color: #666666;
}

.modal-catalogo-footer .btn-guardar[b-e7ern3oaf9] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.modal-catalogo-footer .btn-guardar:hover[b-e7ern3oaf9] {
    background-color: #45A049;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-e7ern3oaf9] {
        display: none;
    }

    .tabla-header-movil[b-e7ern3oaf9] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
    }

    .tabla-header-movil .col-izq[b-e7ern3oaf9] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-e7ern3oaf9] {
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-e7ern3oaf9] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: CSS Grid */
    .cat-item[b-e7ern3oaf9] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* Línea 1: ID + Descripción + Estatus */
    .col-id[b-e7ern3oaf9] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-descripcion[b-e7ern3oaf9] {
        grid-row: 1;
        grid-column: 2;
        width: auto;
    }

    .col-estatus[b-e7ern3oaf9] {
        grid-row: 1;
        grid-column: 3;
        width: auto;
        text-align: right;
    }

    /* Línea 2: TiposReq + Acciones */
    .col-reqs[b-e7ern3oaf9] {
        grid-row: 2;
        grid-column: 1 / 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
        text-align: left;
    }

    .col-reqs[b-e7ern3oaf9]::before {
        content: "Tipos Req: ";
    }

    .col-acciones[b-e7ern3oaf9] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-e7ern3oaf9] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }

    /* Modal más ancho en móvil */
    .modal-catalogo-content[b-e7ern3oaf9] {
        max-width: 100%;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatReqs.razor.rz.scp.css */
/* ============================================================
   CatReqs.razor.css - Estilos para ABC de Tipos de Requerimiento
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-fljjupf4xo] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-fljjupf4xo] {
    background-color: #d4e8c7;
}

/* Checkbox de filtro */
.filtro-checkbox[b-fljjupf4xo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-fljjupf4xo] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-fljjupf4xo] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-fljjupf4xo] {
    background-color: #6a1b9a;
}

/* ============================================================
   TABLA DE CATÁLOGO
   ============================================================ */

.tabla-header[b-fljjupf4xo] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-fljjupf4xo] {
    display: none;
}

.cat-list[b-fljjupf4xo] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-fljjupf4xo] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-fljjupf4xo] {
    border-bottom: none;
}

.cat-item:hover[b-fljjupf4xo] {
    background-color: #f8f9fa;
}

.cat-item-baja[b-fljjupf4xo] {
    background-color: #f8f8f8;
    color: #888;
}

/* ============================================================
   COLUMNAS
   ============================================================ */

.col-id[b-fljjupf4xo] {
    width: 5%;
    text-align: center;
    font-family: monospace;
}

.col-req[b-fljjupf4xo] {
    width: 28%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-depto[b-fljjupf4xo] {
    width: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-tiempo[b-fljjupf4xo] {
    width: 15%;
    text-align: center;
    font-family: monospace;
}

.col-calendario[b-fljjupf4xo] {
    width: 14%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visibilidad condicional desktop/móvil */
.solo-desktop[b-fljjupf4xo] {
    display: inline;
}

.solo-movil[b-fljjupf4xo] {
    display: none;
}

.col-estatus[b-fljjupf4xo] {
    width: 8%;
    text-align: center;
}

.col-acciones[b-fljjupf4xo] {
    width: 12%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* ============================================================
   ELEMENTOS DE REQUERIMIENTO
   ============================================================ */

.req-nombre[b-fljjupf4xo] {
    font-weight: 500;
}

.req-activos[b-fljjupf4xo] {
    color: #1976d2;
    font-size: var(--texto-7pt);
    margin-left: 0.25rem;
}

/* Etiqueta MULTIDEPTO */
.etiqueta-multidepto[b-fljjupf4xo] {
    background-color: #9c27b0;
    color: white;
    font-size: var(--texto-7pt);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-fljjupf4xo] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-baja[b-fljjupf4xo] {
    background-color: #9e9e9e;
    color: white;
}

/* ============================================================
   BOTONES DE ACCIÓN
   ============================================================ */

.btn-accion[b-fljjupf4xo] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-fljjupf4xo] {
    opacity: 0.8;
}

.btn-editar[b-fljjupf4xo] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-fljjupf4xo] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-fljjupf4xo] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   MODAL CONFIRMACIÓN
   ============================================================ */

.modal-overlay[b-fljjupf4xo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-fljjupf4xo] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
}

.modal-confirmar[b-fljjupf4xo] {
    background-color: #696969;
}

.modal-header[b-fljjupf4xo] {
    padding: 0.625rem 0.94rem;
    border-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-fljjupf4xo] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.boton-x[b-fljjupf4xo] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-x:hover[b-fljjupf4xo] {
    opacity: 0.7;
}

.modal-body[b-fljjupf4xo] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-10pt);
    color: #FFFFFF;
}

.modal-body p[b-fljjupf4xo] {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.modal-footer[b-fljjupf4xo] {
    padding: 0.94rem;
    border-top: 0px;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-footer .boton:first-of-type[b-fljjupf4xo] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-footer .boton:first-of-type:hover[b-fljjupf4xo] {
    background-color: #666666;
}

.btn-confirmar[b-fljjupf4xo] {
    background-color: #ff9800;
    color: #000000;
}

.btn-confirmar:hover[b-fljjupf4xo] {
    background-color: #e68900;
}

/* Alerta de dependencias */
.alerta-dependencias[b-fljjupf4xo] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--texto-9pt);
    color: #000000;
    text-align: left;
    margin-top: 0.75rem;
}

.alerta-icono[b-fljjupf4xo] {
    color: #8B0000;
    font-size: 1.2rem;
}

/* ============================================================
   MENSAJE DE ERROR
   ============================================================ */

.mensaje-error-usuario[b-fljjupf4xo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

.mensaje-error-usuario span[b-fljjupf4xo] {
    flex: 1;
    text-align: center;
}

.boton-cerrar-error[b-fljjupf4xo] {
    background: none;
    border: none;
    color: #721c24;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-cerrar-error:hover[b-fljjupf4xo] {
    opacity: 0.7;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */

@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-fljjupf4xo] {
        display: none;
    }

    .tabla-header-movil[b-fljjupf4xo] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-fljjupf4xo] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-fljjupf4xo] {
        flex: 0 0 auto;
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-fljjupf4xo] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: CSS Grid */
    .cat-item[b-fljjupf4xo] {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* ========== LÍNEA 1: ID + Req + Estatus ========== */
    .col-id[b-fljjupf4xo] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        font-weight: bold;
    }

    .col-req[b-fljjupf4xo] {
        grid-row: 1;
        grid-column: 2 / 4;
        width: auto;
    }

    .col-estatus[b-fljjupf4xo] {
        grid-row: 1;
        grid-column: 4;
        width: auto;
        text-align: right;
    }

    /* ========== LÍNEA 2: Depto + Tiempo + Calendario + Acciones ========== */
    .col-depto[b-fljjupf4xo] {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-tiempo[b-fljjupf4xo] {
        grid-row: 2;
        grid-column: 2;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
        text-align: center;
    }

    .col-calendario[b-fljjupf4xo] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-acciones[b-fljjupf4xo] {
        grid-row: 2;
        grid-column: 4;
        width: auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-fljjupf4xo] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }

    .etiqueta-multidepto[b-fljjupf4xo] {
        font-size: var(--texto-6pt);
        padding: 0.1rem 0.25rem;
    }

    /* Invertir visibilidad en móvil */
    .solo-desktop[b-fljjupf4xo] {
        display: none;
    }

    .solo-movil[b-fljjupf4xo] {
        display: inline;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CatSucursales.razor.rz.scp.css */
/* ============================================================
   CatSucursales.razor.css - Estilos para ABC de Sucursales
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-78pb4fjk72] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-78pb4fjk72] {
    background-color: #d4e8c7;
}

/* Select de estado */
.barra-filtros-select-estado[b-78pb4fjk72] {
    width: 10rem;
}

/* Checkbox de filtro */
.filtro-checkbox[b-78pb4fjk72] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    white-space: nowrap;
}

.filtro-checkbox input[type="checkbox"][b-78pb4fjk72] {
    width: 1rem;
    height: 1rem;
}

/* Botón nuevo */
.btn-nuevo[b-78pb4fjk72] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-78pb4fjk72] {
    background-color: #6a1b9a;
}

/* Tabla de catálogo */
.tabla-header[b-78pb4fjk72] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 0;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-78pb4fjk72] {
    display: none;
}

.cat-list[b-78pb4fjk72] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.cat-item[b-78pb4fjk72] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.cat-item:last-child[b-78pb4fjk72] {
    border-bottom: none;
}

.cat-item:hover[b-78pb4fjk72] {
    background-color: #f8f9fa;
}

.cat-item-baja[b-78pb4fjk72] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-estado[b-78pb4fjk72] {
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-ciudad[b-78pb4fjk72] {
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-estatus[b-78pb4fjk72] {
    width: 15%;
    text-align: center;
}

.col-acciones[b-78pb4fjk72] {
    width: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-78pb4fjk72] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-baja[b-78pb4fjk72] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-78pb4fjk72] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-78pb4fjk72] {
    opacity: 0.8;
}

.btn-editar[b-78pb4fjk72] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-78pb4fjk72] {
    background-color: #ff9800;
    color: white;
}

.btn-reactivar[b-78pb4fjk72] {
    background-color: #4caf50;
    color: white;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-78pb4fjk72] {
        display: none;
    }

    .tabla-header-movil[b-78pb4fjk72] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 0;
    }

    .tabla-header-movil .col-izq[b-78pb4fjk72] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-78pb4fjk72] {
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-78pb4fjk72] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Item de catálogo: CSS Grid */
    .cat-item[b-78pb4fjk72] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* Línea 1: Sucursal + Estatus */
    .col-ciudad[b-78pb4fjk72] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-estatus[b-78pb4fjk72] {
        grid-row: 1;
        grid-column: 2;
        width: auto;
        text-align: right;
    }

    /* Línea 2: Estado + Acciones */
    .col-estado[b-78pb4fjk72] {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;
    }

    .col-acciones[b-78pb4fjk72] {
        grid-row: 2;
        grid-column: 2;
        width: auto;
    }

    /* Ajustar etiquetas para móvil */
    .col-estatus .etiqueta[b-78pb4fjk72] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/CotUsuarioRol.razor.rz.scp.css */
/*
   CotUsuarioRol.razor.css
   Estilos isolated de la pantalla de asignación de Rol del Cotizador por usuario.
   Reusa .contenedor-principal-sirei, .fijador, .barra-filtros, .boton-chico
   y .no-resultados de app.css. Patrón visual del Cotizador (mismo que CatTarifas).
*/

/* Pega la barra de filtros al topbar (mismo patrón que las pantallas del Cotizador) */
.contenedor-principal-sirei[b-3vhdiy88i0] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE FILTROS — color claro del Cotizador ===== */
.cot-filtros[b-3vhdiy88i0] {
    background-color: var(--color-coti-claro);   /* Azul claro del módulo Cotizador */
}

/* Empuja el contador de usuarios hacia la derecha */
.filtros-relleno[b-3vhdiy88i0] {
    flex: 1;
}

/* Contador de usuarios dentro de la barra de filtros */
.cot-contador[b-3vhdiy88i0] {
    font-size: var(--texto-8pt);
    color: #696969;                              /* Gris medio para texto secundario */
}

/* ===== MENSAJE DE RESULTADO ===== */
.cot-mensaje[b-3vhdiy88i0] {
    padding: 0.5rem 0.75rem;                     /* Aire interno cómodo */
    font-size: var(--texto-9pt);
    font-weight: bold;
    border-radius: 0.25rem;                      /* Esquinas suaves (equivale a 4px) */
    margin: 0.5rem;                              /* Separación del resto del contenido */
}

.cot-mensaje-exito[b-3vhdiy88i0] {
    background-color: #D4EDDA;                    /* Verde claro de confirmación */
    color: #155724;                               /* Verde oscuro para el texto */
    border: 1px solid #C3E6CB;                    /* Borde verde suave */
}

.cot-mensaje-error[b-3vhdiy88i0] {
    background-color: #F8D7DA;                    /* Rojo claro de error */
    color: #721C24;                               /* Rojo oscuro para el texto */
    border: 1px solid #F5C6CB;                    /* Borde rojo suave */
}

/* ===== TABLA ===== */
/* Contenedor que deja scrollear la tabla horizontalmente dentro de su caja
   (no la página) en anchos muy estrechos. Mismo patrón que .grilla-container
   de UserPermisos.razor.css. */
.cot-tabla-scroll[b-3vhdiy88i0] {
    overflow-x: auto;
}

.cot-tabla[b-3vhdiy88i0] {
    width: 100%;
    border-collapse: collapse;
    background-color: #FFFFFF;                    /* Fondo blanco de la tabla */
    font-size: var(--texto-9pt);
}

.cot-tabla thead tr[b-3vhdiy88i0] {
    background-color: #F0F0F0;                    /* Gris muy claro del encabezado */
}

.cot-tabla th[b-3vhdiy88i0] {
    text-align: left;
    padding: 0.31rem 0.5rem;                      /* Aire interno del encabezado */
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #696969;                               /* Gris medio del texto de encabezado */
    border-bottom: 1px solid #E0E0E0;             /* Línea divisoria del encabezado */
}

.cot-tabla td[b-3vhdiy88i0] {
    padding: 0.25rem 0.5rem;                      /* Aire interno de las celdas */
    border-bottom: 1px solid #EEEEEE;             /* Línea divisoria entre filas */
    vertical-align: middle;
}

.cot-tabla tbody tr:hover[b-3vhdiy88i0] {
    background-color: #F8F9FA;                     /* Resaltado gris claro al pasar el cursor */
}

/* Columna de índice numérico */
.col-num[b-3vhdiy88i0] {
    width: 2.5rem;
}

/* Nombre del usuario en negritas para destacarlo */
.col-usuario[b-3vhdiy88i0] {
    font-weight: bold;
}

/* Columna de asignación: bloque de checkboxes de roles + botón Guardar */
.col-asignar[b-3vhdiy88i0] {
    width: 22rem;
}

/* ===== ROLES ACTUALES ===== */
.cot-roles-actuales[b-3vhdiy88i0] {
    font-weight: bold;
    color: var(--color-coti);                      /* Azul del Cotizador para los roles asignados */
}

.cot-rol-sin[b-3vhdiy88i0] {
    font-style: italic;
    color: #999999;                                /* Gris para indicar "sin roles" */
}

/* ===== BLOQUE DE CHECKBOXES DE ROL (multi-selección) ===== */
.cot-roles-checks[b-3vhdiy88i0] {
    display: flex;
    flex-wrap: wrap;                               /* Los roles bajan de línea en anchos chicos */
    gap: 0.25rem 0.75rem;                          /* Aire vertical y horizontal entre roles */
    margin-bottom: 0.38rem;                        /* Separación del botón Guardar */
}

/* Cada rol: checkbox + código, área de toque cómoda (≥44px de alto y de ancho) */
.cot-rol-check[b-3vhdiy88i0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.75rem;                           /* Touch target ≥44px de alto (2.75rem) */
    min-width: 2.75rem;                            /* Touch target ≥44px de ancho para códigos cortos (3 letras) */
    font-size: var(--texto-8pt);
    cursor: pointer;
    user-select: none;
}

.cot-rol-check input[b-3vhdiy88i0] {
    cursor: pointer;
}

/* ===== BOTÓN GUARDAR (verde, solo visible si hay cambio pendiente) ===== */
.cot-boton-guardar-rol[b-3vhdiy88i0] {
    background-color: #2E7D32;                      /* Verde de acción de guardado */
    color: #FFFFFF;                                 /* Texto blanco */
}

.cot-boton-guardar-rol:hover:not(:disabled)[b-3vhdiy88i0] {
    background-color: #1B5E20;                      /* Verde más oscuro al pasar el cursor */
}

.cot-boton-guardar-rol:disabled[b-3vhdiy88i0] {
    background-color: #A5C7A7;                      /* Verde apagado cuando está deshabilitado */
    color: #ECF4ED;                                 /* Texto tenue cuando está deshabilitado */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .col-asignar[b-3vhdiy88i0] {
        width: auto;                                /* La columna se adapta al ancho disponible */
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/IniciaTablas.razor.rz.scp.css */
/* =============================================================
   CCOIniciaTablas.razor.css - Inicialización de Tablas SiREI
   Estilos para la página de inicialización del sistema.
   ============================================================= */

/* ===== HEADER CON FECHAS ===== */
.header-section[b-m1cmofsrid] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1rem;
}

.fechas-sistema[b-m1cmofsrid] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--texto-9pt);           /* Texto pequeño */
}

.fecha-label[b-m1cmofsrid] {
    color: #666;                           /* Gris medio */
}

.fecha-valor[b-m1cmofsrid] {
    color: #333;                           /* Gris oscuro */
    margin-right: 1rem;
}

/* ===== SECCIÓN DE DESCRIPCIÓN ===== */
.descripcion-section[b-m1cmofsrid] {
    font-size: var(--texto-10pt);          /* Texto contenido */
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
}

.descripcion-section p[b-m1cmofsrid] {
    margin: 0.3rem 0;
}

/* ===== OPCIONES DE RADIO ===== */
.opciones-section[b-m1cmofsrid] {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.75rem;
}

.radio-opcion[b-m1cmofsrid] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-12pt);          /* Tamaño mediano */
    cursor: pointer;
}

.radio-opcion input[type="radio"][b-m1cmofsrid] {
    margin-right: 0.5rem;
    cursor: pointer;
}

.radio-opcion span[b-m1cmofsrid] {
    vertical-align: middle;
}

/* ===== SECCIÓN DE ACTIVACIÓN ===== */
.activacion-section[b-m1cmofsrid] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.activacion-label[b-m1cmofsrid] {
    font-size: var(--texto-10pt);
}

.input-codigo[b-m1cmofsrid] {
    width: 12rem;                          /* Ancho del input */
    padding: 0.4rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;             /* Borde gris */
    border-radius: 4px;
    background-color: #CCCCFF;             /* Fondo azul claro */
}

/* Botón ejecutar */
.btn-ejecutar[b-m1cmofsrid] {
    background-color: #CC0000;             /* Rojo */
    color: white;
    padding: 0.4rem 1.5rem;
    min-width: 15rem;
}

.btn-ejecutar:hover:not(:disabled)[b-m1cmofsrid] {
    background-color: #990000;             /* Rojo más oscuro */
}

.btn-ejecutar:disabled[b-m1cmofsrid] {
    background-color: #CC0000;             /* Mismo rojo aunque esté deshabilitado */
    opacity: 1;
    cursor: not-allowed;
}

/* Botón siguiente paso */
.btn-siguiente[b-m1cmofsrid] {
    background-color: var(--color-cco);    /* Verde Militar CCO */
    color: white;
    padding: 0.4rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    display: inline-flex;
    align-items: center;
}

.btn-siguiente:hover[b-m1cmofsrid] {
    background-color: #3d6a1f;             /* Verde CCO más oscuro */
    color: white;
    text-decoration: none;
}

/* ===== MENSAJES DE ESTADO ===== */
.mensaje-estado[b-m1cmofsrid] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.mensaje-error[b-m1cmofsrid] {
    color: maroon;                         /* Texto vino */
    background-color: #ffe6e6;             /* Fondo rosa claro */
}

.mensaje-ok[b-m1cmofsrid] {
    color: darkgreen;                      /* Texto verde oscuro */
    background-color: #e6ffe6;             /* Fondo verde claro */
}

/* ===== RESULTADO ===== */
.resultado-section[b-m1cmofsrid] {
    margin-bottom: 1rem;
}

.textarea-resultado[b-m1cmofsrid] {
    width: 100%;
    max-width: 60rem;                      /* Ancho máximo */
    height: 25rem;                         /* Alto del textarea */
    padding: 0.5rem;
    font-size: var(--texto-9pt);
    font-family: Consolas, monospace;      /* Fuente monoespaciada */
    border: 1px solid #808080;
    border-radius: 4px;
    resize: vertical;                      /* Solo redimensionar verticalmente */
    background-color: #fafafa;             /* Fondo gris muy claro */
}

/* ===== PARÁMETROS DEL GENERADOR ===== */
.parametros-generador[b-m1cmofsrid] {
    background-color: #f5f5f5;          /* Fondo gris claro */
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
}

.parametros-generador h4[b-m1cmofsrid] {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    color: #333;
    font-size: var(--texto-11pt);
}

.parametro-row[b-m1cmofsrid] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--texto-10pt);
}

.parametro-row label[b-m1cmofsrid] {
    white-space: nowrap;
}

.parametro-row select[b-m1cmofsrid] {
    padding: 0.3rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;
    border-radius: 4px;
    background-color: white;
}

.parametro-row input[type="checkbox"][b-m1cmofsrid] {
    margin-right: 0.3rem;
}

.parametro-checks[b-m1cmofsrid] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-size: var(--texto-10pt);
}

.parametro-checks label[b-m1cmofsrid] {
    cursor: pointer;
}

.parametro-checks input[type="checkbox"][b-m1cmofsrid] {
    margin-right: 0.3rem;
}

.nota-generador[b-m1cmofsrid] {
    width: 100%;
    font-size: var(--texto-8pt);
    color: #666;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
}

/* ===== SPINNER CIRCULAR DENTRO DEL BOTÓN ===== */
.btn-spinner[b-m1cmofsrid] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin-b-m1cmofsrid 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

@keyframes btn-spin-b-m1cmofsrid {
    to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .header-section[b-m1cmofsrid] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .fechas-sistema[b-m1cmofsrid] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .activacion-section[b-m1cmofsrid] {
        flex-direction: column;
        align-items: flex-start;
    }

    .input-codigo[b-m1cmofsrid] {
        width: 100%;
    }

    .btn-ejecutar[b-m1cmofsrid] {
        max-width: 100%;                   /* No se sale del contenedor */
        margin-left: 0;                    /* en este caso no lo ocupa*/
    }

    .btn-siguiente[b-m1cmofsrid] {
        max-width: 100%;                   /* No se sale del contenedor */
        margin-left: 0;                 /* en este caso no lo ocupa*/
    }

    .textarea-resultado[b-m1cmofsrid] {
        height: 18rem;                     /* Más pequeño en móvil */
    }
}

/* Spinner del módulo */
.sirei-spinner[b-m1cmofsrid] {
    --spinner-color: var(--color-cco);
}
/* _content/SiREI_2026/Components/Pages/10CCO/LogSiREI.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   LogSiREI.razor.css - Estilos para la consulta del Log del Sistema
   Módulo: CCO (Verde Militar)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== CONTENEDOR PRINCIPAL ===== */
/* Pega la barra de filtros a la barra del SiREI */
.contenedor-principal-sirei[b-igooyasypy] {
    padding-top: 0;                           /* Sin padding superior */
    padding-bottom: 0;                        /* Sin padding inferior para evitar scroll */
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA DE FILTROS - Color del módulo CCO (verde claro)
   ═══════════════════════════════════════════════════════════════════════════ */
.barra-filtros[b-igooyasypy] {
    background-color: #d4e8c7;
}

/* Lista de registros del log */
.log-list[b-igooyasypy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
}

/* Item individual del log */
.log-item[b-igooyasypy] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: 1px solid #ddd;
}

.log-item:hover[b-igooyasypy] {
    background-color: #e8f5e9;
}

.log-item-expandido[b-igooyasypy] {
    background-color: #f5f5f5;
    border-left-color: var(--color-cco);
}

/* Columna de fecha */
.log-fecha[b-igooyasypy] {
    flex-shrink: 0;
    width: 10rem;
    font-size: var(--texto-8pt);
    color: #666;
    line-height: 1.4;
}

/* Columna de categoria (etiqueta) */
.log-categoria[b-igooyasypy] {
    flex-shrink: 0;
    width: 6rem;
    text-align: center;
    line-height: 1;
}

/* Columna de evento */
.log-evento[b-igooyasypy] {
    flex-grow: 1;
    font-size: var(--texto-9pt);
    word-break: break-word;
}

.evento-truncado[b-igooyasypy] {
    color: #333;
}

.evento-completo[b-igooyasypy] {
    color: #333;
    white-space: pre-wrap;
}

/* Etiquetas de categoria */
.etiqueta-procdia[b-igooyasypy] {
    background-color: var(--color-cco);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
    font-weight: 500;
}

.etiqueta-procdia-error[b-igooyasypy] {
    background-color: var(--color-panel);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
    font-weight: 500;
}

.etiqueta-info[b-igooyasypy] {
    background-color: var(--color-reqs);
    color: black;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
    font-weight: 500;
}

.etiqueta-info-error[b-igooyasypy] {
    background-color: var(--color-panel);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
    font-weight: 500;
}

/* Input type date en barra de filtros */
.barra-filtros-date[b-igooyasypy] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOX Y SELECCION
   ═══════════════════════════════════════════════════════════════════════════ */
.log-checkbox[b-igooyasypy] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.log-checkbox input[type="checkbox"][b-igooyasypy] {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
}

.log-item-seleccionado[b-igooyasypy] {
    background-color: #fff3cd;
    border-color: #ffc107;
}

/* Botón eliminar en barra de filtros */
.btn-eliminar[b-igooyasypy] {
    background-color: #cc0000;
    color: white;
    margin-left: auto;
}

.btn-eliminar:hover[b-igooyasypy] {
    background-color: #aa0000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL DE CONFIRMACION
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay[b-igooyasypy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-igooyasypy] {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
}

.modal-header[b-igooyasypy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 0.5rem 0.5rem 0 0;
}

.modal-header h3[b-igooyasypy] {
    margin: 0;
    font-size: var(--texto-12pt);
    color: #333;
}

.modal-body[b-igooyasypy] {
    padding: 1rem;
    font-size: var(--texto-9pt);
}

.modal-body p[b-igooyasypy] {
    margin: 0 0 0.5rem 0;
}

.nota-modal[b-igooyasypy] {
    font-size: var(--texto-8pt);
    color: #666;
    font-style: italic;
}

.modal-footer[b-igooyasypy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 0 0 0.5rem 0.5rem;
}

.btn-cancelar-modal[b-igooyasypy] {
    background-color: #666;
    color: white;
}

.btn-confirmar-eliminar[b-igooyasypy] {
    background-color: #cc0000;
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - Celulares
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .log-item[b-igooyasypy] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .log-checkbox[b-igooyasypy] {
        flex-shrink: 0;
    }

    .log-fecha[b-igooyasypy] {
        width: auto;
        flex-shrink: 0;
        font-size: var(--texto-7pt);
    }

    .log-categoria[b-igooyasypy] {
        width: auto;
        flex-shrink: 0;
        text-align: left;
    }

    .log-evento[b-igooyasypy] {
        width: 100%;
        font-size: var(--texto-8pt);
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/Panel.razor.rz.scp.css */
/*
   Panel.razor.css - Panel de Control del CCO
   Estilos para el panel de administracion con usuarios y mantenimiento.
*/

/* ===== TITULO ===== */
.panel-titulo-contenedor[b-0rg78hs47k] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.panel-titulo[b-0rg78hs47k] {
    color: var(--color-cco);
    margin-bottom: 0;
    font-size: var(--texto-16pt);
}

.panel-reloj[b-0rg78hs47k] {
    font-size: var(--texto-8pt);
    color: #888;
}

/* ===== SECCIONES ===== */
.panel-seccion[b-0rg78hs47k] {
    background: white;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.panel-seccion h3[b-0rg78hs47k] {
    color: #333;
    font-size: var(--texto-11pt);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--color-cco);
}

/* ===== USUARIOS ===== */
.usuarios-grid[b-0rg78hs47k] {
    display: flex;
    gap: 1rem;
}

.usuario-card[b-0rg78hs47k] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    text-align: center;
    min-width: 100px;
}

.usuario-numero[b-0rg78hs47k] {
    font-size: var(--texto-12pt);
    font-weight: 700;
    color: var(--color-cco);
}

.usuario-label[b-0rg78hs47k] {
    font-size: var(--texto-9pt);
    color: #666;
}

/* ===== TABLA DE USUARIOS ACTIVOS ===== */
.usuarios-tabla-contenedor[b-0rg78hs47k] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.usuarios-tabla[b-0rg78hs47k] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
}

.usuarios-tabla th[b-0rg78hs47k] {
    text-align: left;
    padding: 0.375rem 0.5rem;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-weight: 600;
}

.usuarios-tabla td[b-0rg78hs47k] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #e9ecef;
    color: #333;
}

.usuarios-tabla tbody tr:hover[b-0rg78hs47k] {
    background: #f8f9fa;
}

.usuarios-tabla .col-centro[b-0rg78hs47k] {
    text-align: center;
}

.usuarios-tabla .consultas-count[b-0rg78hs47k] {
    font-weight: 600;
    color: var(--color-cco);
}

/* ===== MANTENIMIENTO HEADER ===== */
.mtto-header[b-0rg78hs47k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mtto-header h3[b-0rg78hs47k] {
    margin: 0;
    padding: 0;
    border: none;
}

.estado-badge[b-0rg78hs47k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.estado-badge.estado-normal[b-0rg78hs47k] {
    background: #d4edda;
    color: #155724;
}

.estado-badge.estado-total[b-0rg78hs47k] {
    background: #f8d7da;
    color: #721c24;
}

.estado-badge.estado-operativo[b-0rg78hs47k] {
    background: #fff3cd;
    color: #856404;
}

.estado-badge.estado-analisis[b-0rg78hs47k] {
    background: #cce5ff;
    color: #004085;
}

.estado-icono[b-0rg78hs47k] {
    font-size: var(--texto-10pt);
}

/* ===== RADIO BUTTONS ===== */
.mtto-opciones[b-0rg78hs47k] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.mtto-radio[b-0rg78hs47k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: var(--texto-10pt);
}

.mtto-radio input[type="radio"][b-0rg78hs47k] {
    margin: 0;
    cursor: pointer;
}

.radio-label[b-0rg78hs47k] {
    font-weight: 600;
    color: #333;
}

.radio-desc[b-0rg78hs47k] {
    color: #666;
    font-size: var(--texto-9pt);
}

/* ===== DESCRIPCION ===== */
.mtto-descripcion[b-0rg78hs47k] {
    font-size: var(--texto-8pt);
    color: #888;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
    line-height: 1.5;
}

/* ===== CONTROLES ===== */
.mtto-controles[b-0rg78hs47k] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.input-mensaje[b-0rg78hs47k] {
    flex: 1;
    min-width: 200px;
    padding: 0.375rem 0.625rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
}

.btn-activar-mtto[b-0rg78hs47k] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #333;
    border: none;
    padding: 0.375rem 1rem;
    font-weight: 600;
    font-size: var(--texto-9pt);
}

.btn-activar-mtto:hover:not(:disabled)[b-0rg78hs47k] {
    background: linear-gradient(135deg, #e0a800 0%, #c69500 100%);
}

.btn-activar-mtto:disabled[b-0rg78hs47k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== ESTADO ACTIVO ===== */
.mtto-activo-info[b-0rg78hs47k] {
    font-size: var(--texto-10pt);
}

.mtto-activo-info p[b-0rg78hs47k] {
    margin: 0 0 0.5rem 0;
    color: #555;
}

.mtto-desde[b-0rg78hs47k] {
    color: #888;
    font-size: var(--texto-9pt);
}

.mtto-acceso[b-0rg78hs47k] {
    font-size: var(--texto-9pt);
}

.mtto-mensaje[b-0rg78hs47k] {
    font-style: italic;
    color: #666;
    font-size: var(--texto-9pt);
}

.btn-desactivar-mtto[b-0rg78hs47k] {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    border: none;
    padding: 0.375rem 1rem;
    font-weight: 600;
    font-size: var(--texto-9pt);
    margin-top: 0.5rem;
}

.btn-desactivar-mtto:hover[b-0rg78hs47k] {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .mtto-opciones[b-0rg78hs47k] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .usuarios-grid[b-0rg78hs47k] {
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/ProcesoDiario.razor.rz.scp.css */
/* =============================================================
   ProcesoDiario.razor.css - Proceso Diario Manual (CCO)
   Estilos para la ejecución manual del Proceso Diario.
   ============================================================= */

/* ===== FECHA DEL SISTEMA ===== */
.fecha-section[b-doyjfcmf8t] {
    margin-bottom: 1rem;                /* Espacio inferior */
}

.fecha-label[b-doyjfcmf8t] {
    font-size: var(--texto-10pt);       /* Texto contenido */
    color: #666;                        /* Gris medio */
}

.fecha-valor[b-doyjfcmf8t] {
    font-size: var(--texto-10pt);       /* Texto contenido */
    font-weight: bold;                  /* Negrita */
    color: #333;                        /* Gris oscuro */
    margin-left: 0.5rem;               /* Separación del label */
}

/* ===== SECCIÓN DE DÍAS DE DIFERENCIA ===== */
.dias-section[b-doyjfcmf8t] {
    display: flex;                      /* Flex horizontal */
    flex-wrap: wrap;                    /* Wrap en móvil */
    align-items: center;               /* Centrado vertical */
    gap: 0.75rem;                      /* Espacio entre elementos */
    margin-bottom: 1rem;               /* Espacio inferior */
}

.dias-label[b-doyjfcmf8t] {
    font-size: var(--texto-10pt);       /* Texto contenido */
}

.input-dias[b-doyjfcmf8t] {
    width: 4rem;                        /* Ancho compacto */
    padding: 0.4rem 0.5rem;            /* Espaciado interno */
    font-size: var(--texto-10pt);       /* Texto contenido */
    font-weight: bold;                  /* Negrita */
    text-align: center;                 /* Texto centrado */
    border: 1px solid #808080;          /* Borde gris */
    border-radius: 4px;                 /* Esquinas redondeadas */
}

/* Botón calcular fecha */
.btn-calcular[b-doyjfcmf8t] {
    background-color: #e0e0e0;          /* Gris claro */
    color: #333;                        /* Texto oscuro */
}

.btn-calcular:hover:not(:disabled)[b-doyjfcmf8t] {
    background-color: #c0c0c0;          /* Gris medio al hover */
}

/* ===== ADVERTENCIA (cuando ya corrió para esta fecha) ===== */
.advertencia-section[b-doyjfcmf8t] {
    background-color: #f8d7da;          /* Fondo rosa claro */
    border: 1px solid #f5c6cb;          /* Borde rosa */
    border-radius: 4px;                 /* Esquinas redondeadas */
    padding: 0.75rem 1rem;              /* Espaciado interno */
    margin-bottom: 0.75rem;             /* Espacio inferior */
    font-size: var(--texto-10pt);       /* Texto contenido */
    color: #721c24;                     /* Texto vino */
}

/* ===== SECCIÓN DE ACTIVACIÓN (cuando ya corrió para esta fecha) ===== */
.activacion-section[b-doyjfcmf8t] {
    display: flex;                      /* Flex horizontal */
    flex-wrap: wrap;                    /* Wrap en móvil */
    align-items: center;                /* Centrado vertical */
    gap: 0.75rem;                       /* Espacio entre elementos */
    margin-bottom: 1rem;                /* Espacio inferior */
}

.activacion-label[b-doyjfcmf8t] {
    font-size: var(--texto-10pt);       /* Texto contenido */
}

.input-codigo[b-doyjfcmf8t] {
    width: 12rem;                       /* Ancho del input */
    padding: 0.4rem 0.5rem;             /* Espaciado interno */
    font-size: var(--texto-10pt);       /* Texto contenido */
    border: 1px solid #808080;          /* Borde gris */
    border-radius: 4px;                 /* Esquinas redondeadas */
    background-color: #CCCCFF;          /* Fondo azul claro */
}

/* ===== SECCIÓN DE EJECUTAR ===== */
.ejecutar-section[b-doyjfcmf8t] {
    margin-bottom: 1rem;                /* Espacio inferior */
}

/* Botón ejecutar proceso */
.btn-ejecutar[b-doyjfcmf8t] {
    background-color: #548C2E;          /* Verde militar CCO */
    color: white;                       /* Texto blanco */
    padding: 0.4rem 1.5rem;             /* Espaciado interno */
    min-width: 20rem;                   /* Ancho mínimo */
    margin-left: 0;                     /* en este caso no lo ocupa*/
}

.btn-ejecutar:hover:not(:disabled)[b-doyjfcmf8t] {
    background-color: #3d6b1e;          /* Verde más oscuro al hover */
}

.btn-ejecutar:disabled[b-doyjfcmf8t] {
    background-color: #548C2E;          /* Mismo color deshabilitado */
    opacity: 0.5;                       /* Semitransparente cuando no disponible */
    cursor: not-allowed;                /* Cursor no permitido */
}

/* Cuando está ejecutando, opacidad completa */
.btn-ejecutar:disabled:has(.btn-spinner)[b-doyjfcmf8t] {
    opacity: 1;                         /* Opacidad completa con spinner */
}

/* ===== MENSAJES DE ESTADO ===== */
.mensaje-estado[b-doyjfcmf8t] {
    font-size: var(--texto-9pt);        /* Texto pequeño */
    font-weight: bold;                  /* Negrita */
    padding: 0.5rem;                    /* Espaciado interno */
    margin-bottom: 1rem;                /* Espacio inferior */
    border-radius: 4px;                 /* Esquinas redondeadas */
}

.mensaje-error[b-doyjfcmf8t] {
    color: maroon;                      /* Texto vino */
    background-color: #ffe6e6;          /* Fondo rosa claro */
}

.mensaje-ok[b-doyjfcmf8t] {
    color: darkgreen;                   /* Texto verde oscuro */
    background-color: #e6ffe6;          /* Fondo verde claro */
}

.tiempo-transcurrido[b-doyjfcmf8t] {
    font-weight: normal;                /* Peso normal */
    margin-left: 0.5rem;               /* Separación */
}

/* ===== LOG DE SALIDA ===== */
.log-section[b-doyjfcmf8t] {
    margin-bottom: 1rem;                /* Espacio inferior */
}

.log-section h4[b-doyjfcmf8t] {
    color: var(--color-cco);            /* Verde militar CCO */
    margin-bottom: 0.5rem;             /* Espacio inferior */
}

.log-output[b-doyjfcmf8t] {
    background-color: #f5f5f5;          /* Gris claro de fondo */
    border: 1px solid #ddd;             /* Borde gris */
    border-radius: 4px;                 /* Esquinas redondeadas */
    padding: 1rem;                      /* Espaciado interno */
    font-family: Consolas, monospace;   /* Fuente monoespaciada */
    font-size: var(--texto-9pt);        /* Texto pequeño */
    max-height: 30rem;                  /* Altura máxima */
    overflow-y: auto;                   /* Scroll vertical */
    white-space: pre-wrap;              /* Preservar espacios y saltos */
}

/* ===== SPINNER CIRCULAR DENTRO DEL BOTÓN ===== */
.btn-spinner[b-doyjfcmf8t] {
    display: inline-block;              /* Inline para alinear con texto */
    width: 1rem;                        /* Ancho del spinner */
    height: 1rem;                       /* Alto del spinner */
    border: 2px solid rgba(255, 255, 255, 0.4);  /* Borde semitransparente */
    border-top-color: white;            /* Parte superior blanca */
    border-radius: 50%;                 /* Circular */
    animation: btn-spin-b-doyjfcmf8t 0.7s linear infinite;     /* Animación continua */
    vertical-align: middle;             /* Alineación vertical */
    margin-right: 0.4rem;              /* Espacio antes del texto */
}

@keyframes btn-spin-b-doyjfcmf8t {
    to { transform: rotate(360deg); }
}

/* ===== SPINNER DEL MÓDULO ===== */
.sirei-spinner[b-doyjfcmf8t] {
    --spinner-color: var(--color-cco);  /* Verde militar CCO */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .dias-section[b-doyjfcmf8t] {
        flex-direction: column;         /* Vertical en móvil */
        align-items: flex-start;        /* Alinear a la izquierda */
    }

    .input-dias[b-doyjfcmf8t] {
        width: 5rem;                    /* Un poco más ancho en móvil */
    }

    .activacion-section[b-doyjfcmf8t] {
        flex-direction: column;         /* Vertical en móvil */
        align-items: flex-start;        /* Alinear a la izquierda */
    }

    .input-codigo[b-doyjfcmf8t] {
        width: 100%;                    /* Ancho completo en móvil */
    }

    .btn-ejecutar[b-doyjfcmf8t] {
        max-width: 100%;                /* No se sale del contenedor */
        min-width: auto;                /* Sin mínimo */
    }

    .btn-calcular[b-doyjfcmf8t] {
        max-width: 100%;                /* No se sale del contenedor */
        margin-left: 0;                 /* en este caso no lo ocupa*/
    }

    .log-output[b-doyjfcmf8t] {
        max-height: 20rem;              /* Más compacto en móvil */
        font-size: var(--texto-8pt);    /* Texto más pequeño */
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/Setup.razor.rz.scp.css */
/* ============================================================
   Setup.razor.css - Estilos para Configuracion Inicial
   Sigue el mismo patron que IniciaTablas.razor.css
   ============================================================ */

/* ===== SECCIONES BASICAS (compatibles con IniciaTablas) ===== */
.descripcion-section[b-4ecfawdm9b] {
    font-size: var(--texto-10pt);
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
}

.descripcion-section h3[b-4ecfawdm9b],
.descripcion-section h4[b-4ecfawdm9b] {
    font-size: var(--texto-14pt);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #333;
}

.descripcion-section p[b-4ecfawdm9b] {
    margin: 0.3rem 0;
}

.descripcion-section ul[b-4ecfawdm9b],
.descripcion-section ol[b-4ecfawdm9b] {
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0;
}

.descripcion-section li[b-4ecfawdm9b] {
    margin-bottom: 0.3rem;
}

.descripcion-section code[b-4ecfawdm9b] {
    background: #f0f0f0;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: Consolas, monospace;
}

/* ===== ADVERTENCIA ===== */
.advertencia-section[b-4ecfawdm9b] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-10pt);
    color: #856404;
}

.advertencia-section.advertencia-roja[b-4ecfawdm9b] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ===== NOTA ===== */
.nota-section[b-4ecfawdm9b] {
    background-color: #e7f3ff;
    border: 1px solid #0066cc;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-10pt);
    color: #004085;
}

.nota-section code[b-4ecfawdm9b] {
    background: #d0e8ff;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: Consolas, monospace;
}

/* ===== SECCION DE ACTIVACION (igual que IniciaTablas) ===== */
.activacion-section[b-4ecfawdm9b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.activacion-label[b-4ecfawdm9b] {
    font-size: var(--texto-10pt);
}

.input-codigo[b-4ecfawdm9b] {
    width: 12rem;
    padding: 0.4rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;
    border-radius: 4px;
    background-color: #CCCCFF;
}

/* ===== BOTONES (igual que IniciaTablas) ===== */
.btn-ejecutar[b-4ecfawdm9b] {
    background-color: #CC0000;
    color: white;
    padding: 0.4rem 1.5rem;
    min-width: 10rem;
}

.btn-ejecutar:hover:not(:disabled)[b-4ecfawdm9b] {
    background-color: #990000;
}

.btn-ejecutar:disabled[b-4ecfawdm9b] {
    background-color: #CC0000;
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-siguiente[b-4ecfawdm9b] {
    background-color: var(--color-cco);
    color: white;
    padding: 0.4rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    display: inline-flex;
    align-items: center;
}

.btn-siguiente:hover:not(:disabled)[b-4ecfawdm9b] {
    background-color: #3d6a1f;
    color: white;
    text-decoration: none;
}

.btn-siguiente:disabled[b-4ecfawdm9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secundario[b-4ecfawdm9b] {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #808080;
    padding: 0.4rem 1.5rem;
}

.btn-secundario:hover[b-4ecfawdm9b] {
    background-color: #e0e0e0;
}

/* ===== MENSAJES DE ESTADO (igual que IniciaTablas) ===== */
.mensaje-estado[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.mensaje-error[b-4ecfawdm9b] {
    color: maroon;
    background-color: #ffe6e6;
}

.mensaje-ok[b-4ecfawdm9b] {
    color: darkgreen;
    background-color: #e6ffe6;
}

.mensaje-ok p[b-4ecfawdm9b] {
    margin: 0 0 0.5rem 0;
}

.resultado-stats[b-4ecfawdm9b] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.texto-exito[b-4ecfawdm9b] {
    color: darkgreen;
}

/* ===== OPCIONES DE PLANTILLA (estilo card) ===== */
.opciones-section-vertical[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 35rem;
}

.radio-opcion-card[b-4ecfawdm9b] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.radio-opcion-card:hover[b-4ecfawdm9b] {
    border-color: var(--color-cco);
    background: #f9f9f9;
}

.radio-opcion-card.seleccionada[b-4ecfawdm9b] {
    border-color: var(--color-cco);
    background: #f0f7ec;
}

.radio-opcion-card.deshabilitada[b-4ecfawdm9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-opcion-card.deshabilitada:hover[b-4ecfawdm9b] {
    border-color: #ccc;
    background: #fff;
}

.radio-opcion-card input[type="radio"][b-4ecfawdm9b] {
    margin-right: 0.75rem;
    margin-top: 0.2rem;
    cursor: pointer;
}

.radio-opcion-card.deshabilitada input[type="radio"][b-4ecfawdm9b] {
    cursor: not-allowed;
}

.opcion-contenido[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.opcion-contenido strong[b-4ecfawdm9b] {
    font-size: var(--texto-11pt);
    color: #333;
}

.opcion-desc[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    color: #666;
}

.opcion-stats[b-4ecfawdm9b] {
    font-size: var(--texto-8pt);
    color: #999;
}

/* ===== SEPARADOR ===== */
.separador-texto[b-4ecfawdm9b] {
    display: flex;
    align-items: center;
    margin: 0.75rem 0;
    color: #999;
    font-size: var(--texto-9pt);
}

.separador-texto[b-4ecfawdm9b]::before,
.separador-texto[b-4ecfawdm9b]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ddd;
}

.separador-texto[b-4ecfawdm9b]::before {
    margin-right: 0.75rem;
}

.separador-texto[b-4ecfawdm9b]::after {
    margin-left: 0.75rem;
}

/* ===== RESUMEN DE PLANTILLA ===== */
.resumen-section[b-4ecfawdm9b] {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.resumen-grid[b-4ecfawdm9b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}

.resumen-item[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.resumen-numero[b-4ecfawdm9b] {
    font-size: var(--texto-18pt);
    font-weight: 700;
    color: var(--color-cco);
}

.resumen-etiqueta[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    color: #666;
}

/* ===== PROGRESO DE EJECUCION ===== */
.progreso-section[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
    max-width: 25rem;
}

.progreso-item[b-4ecfawdm9b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--texto-10pt);
}

.progreso-item.completado[b-4ecfawdm9b] {
    border-color: darkgreen;
    background: #e6ffe6;
}

.progreso-item.error[b-4ecfawdm9b] {
    border-color: #cc0000;
    background: #ffe6e6;
}

.progreso-item.error .progreso-icono[b-4ecfawdm9b] {
    color: #cc0000;
    background: #ffcccc;
}

.progreso-icono[b-4ecfawdm9b] {
    font-size: var(--texto-8pt);
    font-weight: 700;
    color: darkgreen;
    background: #c6efc6;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

/* ===== PREGUNTAS DE CONFIGURACION ===== */
.setup-pregunta[b-4ecfawdm9b] {
    margin-bottom: 1.25rem;
}

.setup-pregunta h4[b-4ecfawdm9b] {
    font-size: var(--texto-11pt);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #333;
}

.opciones-config[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.radio-config[b-4ecfawdm9b] {
    display: flex;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.radio-config:hover[b-4ecfawdm9b] {
    border-color: var(--color-cco);
    background: #f9f9f9;
}

.radio-config.seleccionada[b-4ecfawdm9b] {
    border-color: var(--color-cco);
    background: #f0f7ec;
}

.radio-config input[type="radio"][b-4ecfawdm9b] {
    margin-right: 0.6rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

.config-contenido[b-4ecfawdm9b] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.config-contenido strong[b-4ecfawdm9b] {
    font-size: var(--texto-10pt);
    color: #333;
}

.config-contenido span[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    color: #666;
}

.input-sucursales[b-4ecfawdm9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.input-sucursales label[b-4ecfawdm9b] {
    font-size: var(--texto-10pt);
    color: #333;
}

.input-sucursales input[type="number"][b-4ecfawdm9b] {
    width: 4rem;
    padding: 0.3rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;
    border-radius: 4px;
    text-align: center;
}

/* ===== SECCIONES DE SETUP (ORGANIGRAMA Y CATALOGO) ===== */
.setup-seccion[b-4ecfawdm9b] {
    margin-bottom: 1rem;
}

.setup-seccion h4[b-4ecfawdm9b] {
    font-size: var(--texto-11pt);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--color-cco);
    color: #333;
}

/* ===== ORGANIGRAMA ===== */
.setup-organigrama[b-4ecfawdm9b] {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem;
    max-height: 20rem;
    overflow-y: auto;
}

.setup-depto[b-4ecfawdm9b] {
    margin-bottom: 0.5rem;
}

.setup-depto.nivel-0[b-4ecfawdm9b] {
    padding-left: 0;
}

.setup-depto.nivel-1[b-4ecfawdm9b] {
    padding-left: 1rem;
}

.setup-depto.nivel-2[b-4ecfawdm9b] {
    padding-left: 2rem;
}

.setup-depto.nivel-3[b-4ecfawdm9b] {
    padding-left: 3rem;
}

.depto-nombre[b-4ecfawdm9b] {
    font-weight: 600;
    font-size: var(--texto-10pt);
    color: #333;
}

.depto-tag[b-4ecfawdm9b] {
    font-size: var(--texto-8pt);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.4rem;
}

.depto-tag.agrupador[b-4ecfawdm9b] {
    background: #f0f0f0;
    color: #666;
}

/* Etiquetas de perfil de usuario - ::deep para MarkupString dinámico */
[b-4ecfawdm9b] .etiqueta-perfil {
    font-size: var(--texto-8pt);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    font-weight: 600;
}

[b-4ecfawdm9b] .etiqueta-perfil.poweruser {
    background: #1976d2;
    color: white;
}

[b-4ecfawdm9b] .etiqueta-perfil.callservice {
    background: #ff9800;
    color: white;
}

.setup-usuario[b-4ecfawdm9b] {
    display: flex;
    gap: 0.5rem;
    padding: 0.15rem 0 0.15rem 1.2rem;
    font-size: var(--texto-9pt);
}

.usuario-nombre[b-4ecfawdm9b] {
    color: #444;
}

.usuario-puesto[b-4ecfawdm9b] {
    color: #888;
}

.setup-depto.proveedor .depto-nombre[b-4ecfawdm9b] {
    color: var(--color-cco);
}

.setup-separador[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    color: #999;
    padding: 0.5rem 0 0.3rem 0;
    margin-top: 0.5rem;
    border-top: 1px dashed #ccc;
    font-weight: 600;
}

/* ===== CATALOGO DE REQUERIMIENTOS ===== */
.setup-catalogo[b-4ecfawdm9b] {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem;
    max-height: 15rem;
    overflow-y: auto;
}

.setup-grupo-req[b-4ecfawdm9b] {
    margin-bottom: 0.6rem;
}

.grupo-nombre[b-4ecfawdm9b] {
    font-weight: 600;
    font-size: var(--texto-10pt);
    color: #333;
    display: block;
    margin-bottom: 0.2rem;
}

.setup-req[b-4ecfawdm9b] {
    display: flex;
    gap: 0.4rem;
    padding: 0.1rem 0 0.1rem 1rem;
    font-size: var(--texto-9pt);
}

.req-nombre[b-4ecfawdm9b] {
    color: #444;
}

.req-tag[b-4ecfawdm9b] {
    font-size: var(--texto-8pt);
    padding: 0 0.3rem;
    border-radius: 2px;
}

.req-tag.monto[b-4ecfawdm9b] {
    background: #e8f5e9;
    color: #2e7d32;
}

/* ===== PARAMETROS DEL GENERADOR (de IniciaTablas) ===== */
.parametros-generador[b-4ecfawdm9b] {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: center;
}

.parametros-generador h4[b-4ecfawdm9b] {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    color: #333;
    font-size: var(--texto-11pt);
}

.parametro-row[b-4ecfawdm9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--texto-10pt);
}

.parametro-row label[b-4ecfawdm9b] {
    white-space: nowrap;
}

.parametro-row select[b-4ecfawdm9b] {
    padding: 0.3rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;
    border-radius: 4px;
    background-color: white;
}

.parametro-checks[b-4ecfawdm9b] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-size: var(--texto-10pt);
}

.parametro-checks label[b-4ecfawdm9b] {
    cursor: pointer;
}

.parametro-checks input[type="checkbox"][b-4ecfawdm9b] {
    margin-right: 0.3rem;
}

.nota-generador[b-4ecfawdm9b] {
    width: 100%;
    font-size: var(--texto-8pt);
    color: #666;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
}

/* ===== RESULTADO DEMO ===== */
.resultado-section[b-4ecfawdm9b] {
    margin-bottom: 1rem;
}

.textarea-resultado[b-4ecfawdm9b] {
    width: 100%;
    max-width: 60rem;
    height: 20rem;
    padding: 0.5rem;
    font-size: var(--texto-9pt);
    font-family: Consolas, monospace;
    border: 1px solid #808080;
    border-radius: 4px;
    resize: vertical;
    background-color: #fafafa;
}

/* ===== VERIFICADOR DE HISTORIAL ===== */
.verificador-resultado[b-4ecfawdm9b] {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-size: var(--texto-10pt);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.verificador-resultado.verificador-ok[b-4ecfawdm9b] {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.verificador-resultado.verificador-error[b-4ecfawdm9b] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.verificador-detalle[b-4ecfawdm9b] {
    font-size: var(--texto-9pt);
    color: #666;
}

/* ===== SPINNER DENTRO DEL BOTON ===== */
.btn-spinner[b-4ecfawdm9b] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin-b-4ecfawdm9b 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

@keyframes btn-spin-b-4ecfawdm9b {
    to { transform: rotate(360deg); }
}

/* ===== VALIDACION DE PLANTILLA ===== */
.validacion-section[b-4ecfawdm9b] {
    margin-bottom: 1rem;
}

.validacion-ok[b-4ecfawdm9b] {
    color: darkgreen;
    font-weight: 600;
    font-size: var(--texto-10pt);
}

.mensaje-warning[b-4ecfawdm9b] {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.mensaje-estado ul.lista-validacion[b-4ecfawdm9b] {
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0;
    font-weight: normal;
    font-size: var(--texto-9pt);
}

.mensaje-estado ul.lista-validacion li[b-4ecfawdm9b] {
    margin-bottom: 0.2rem;
    font-family: Consolas, monospace;
}

.mensaje-estado p[b-4ecfawdm9b] {
    margin: 0.5rem 0 0 0;
    font-size: var(--texto-9pt);
}

.checkbox-warning[b-4ecfawdm9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e0c78b;
    font-weight: normal;
    font-size: var(--texto-10pt);
    cursor: pointer;
}

.checkbox-warning input[type="checkbox"][b-4ecfawdm9b] {
    cursor: pointer;
}

/* ===== MODO EXPERTO ===== */
.advertencia-amarilla[b-4ecfawdm9b] {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.advertencia-amarilla ul.lista-no-hagas[b-4ecfawdm9b] {
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0;
    font-size: var(--texto-9pt);
}

.advertencia-amarilla ul.lista-no-hagas li[b-4ecfawdm9b] {
    margin-bottom: 0.3rem;
}

.selector-plantilla-base[b-4ecfawdm9b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.selector-plantilla-base label[b-4ecfawdm9b] {
    font-size: var(--texto-10pt);
    font-weight: 600;
}

.selector-plantilla-base select[b-4ecfawdm9b] {
    padding: 0.4rem 0.5rem;
    font-size: var(--texto-10pt);
    border: 1px solid #808080;
    border-radius: 4px;
    background-color: white;
    min-width: 15rem;
}

.upload-section[b-4ecfawdm9b] {
    margin-bottom: 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .resumen-grid[b-4ecfawdm9b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .activacion-section[b-4ecfawdm9b] {
        flex-direction: column;
        align-items: flex-start;
    }

    .input-codigo[b-4ecfawdm9b] {
        width: 100%;
    }

    .resultado-stats[b-4ecfawdm9b] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .setup-organigrama[b-4ecfawdm9b],
    .setup-catalogo[b-4ecfawdm9b] {
        max-height: 15rem;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/SetupModulos.razor.rz.scp.css */
/*
   SetupModulos.razor.css
   Setup de Módulos Específicos.
   Página administrativa para instalar módulos GA_*.
*/

/* ===== TÍTULO ===== */
.smod-titulo[b-6nglfxpze5] {
    font-size: var(--texto-14pt);              /* Título principal */
    margin-bottom: 0.5rem;                     /* Margen inferior */
}

/* ===== DESCRIPCIÓN ===== */
.smod-descripcion[b-6nglfxpze5] {
    font-size: var(--texto-9pt);               /* Texto descriptivo */
    color: #555555;                            /* Gris medio */
    margin-bottom: 1rem;                       /* Margen inferior */
    line-height: 1.5;                          /* Interlineado */
}

/* ===== CÓDIGO DE ACTIVACIÓN ===== */
.smod-activacion[b-6nglfxpze5] {
    display: flex;                             /* Flexbox */
    align-items: center;                       /* Centrado vertical */
    gap: 0.5rem;                               /* Espacio */
    margin-bottom: 1rem;                       /* Margen inferior */
}

.smod-activacion-label[b-6nglfxpze5] {
    font-size: var(--texto-9pt);               /* Tamaño label */
    font-weight: bold;                         /* Negritas */
}

.smod-input-codigo[b-6nglfxpze5] {
    font-size: var(--texto-9pt);               /* Tamaño input */
    padding: 0.3rem 0.5rem;                    /* Padding */
    border: 1px solid #CCCCCC;                 /* Borde gris */
    border-radius: 0.25rem;                    /* Esquinas */
    width: 20rem;                              /* Ancho fijo */
}

/* ===== LISTA DE MÓDULOS ===== */
.smod-lista[b-6nglfxpze5] {
    margin-bottom: 1rem;                       /* Margen inferior */
}

.smod-modulo[b-6nglfxpze5] {
    display: flex;                             /* Flexbox */
    justify-content: space-between;            /* Espaciado */
    align-items: center;                       /* Centrado vertical */
    padding: 0.6rem 0.75rem;                   /* Padding */
    border: 1px solid var(--color-border);     /* Borde */
    border-radius: 0.25rem;                    /* Esquinas */
    margin-bottom: 0.5rem;                     /* Margen entre módulos */
    background-color: #FAFAFA;                 /* Fondo gris muy claro */
    flex-wrap: wrap;                           /* Wrap en móvil */
    gap: 0.5rem;                               /* Espacio entre elementos */
}

.smod-modulo-info[b-6nglfxpze5] {
    display: flex;                             /* Flexbox */
    align-items: center;                       /* Centrado vertical */
    gap: 0.75rem;                              /* Espacio */
    flex-wrap: wrap;                           /* Wrap en móvil */
}

.smod-modulo-prefijo[b-6nglfxpze5] {
    font-family: monospace;                    /* Monoespaciado */
    font-size: var(--texto-9pt);               /* Tamaño */
    font-weight: bold;                         /* Negritas */
    background-color: #E8E8E8;                 /* Fondo gris */
    padding: 0.15rem 0.4rem;                   /* Padding */
    border-radius: 0.2rem;                     /* Esquinas */
}

.smod-modulo-nombre[b-6nglfxpze5] {
    font-size: var(--texto-10pt);              /* Tamaño nombre */
    font-weight: bold;                         /* Negritas */
}

.smod-modulo-desc[b-6nglfxpze5] {
    font-size: var(--texto-8pt);               /* Tamaño descripción */
    color: #777777;                            /* Gris */
}

.smod-modulo-estado[b-6nglfxpze5] {
    display: flex;                             /* Flexbox */
    align-items: center;                       /* Centrado vertical */
    gap: 0.5rem;                               /* Espacio */
}

/* Estados del módulo */
.smod-estado-ok[b-6nglfxpze5] {
    font-size: var(--texto-8pt);               /* Tamaño */
    color: #2E7D32;                            /* Verde */
    font-weight: bold;                         /* Negritas */
}

.smod-estado-parcial[b-6nglfxpze5] {
    font-size: var(--texto-8pt);               /* Tamaño */
    color: #E65100;                            /* Naranja */
    font-weight: bold;                         /* Negritas */
}

.smod-estado-no[b-6nglfxpze5] {
    font-size: var(--texto-8pt);               /* Tamaño */
    color: #999999;                            /* Gris */
}

/* Botones de acción */
.smod-btn-instalar[b-6nglfxpze5] {
    background-color: #2E7D32;                 /* Verde (instalar) */
    color: #FFFFFF;                            /* Blanco */
}

.smod-btn-reinstalar[b-6nglfxpze5] {
    background-color: #E65100;                 /* Naranja (reinstalar) */
    color: #FFFFFF;                            /* Blanco */
}

/* ===== MENSAJES ===== */
.smod-mensaje[b-6nglfxpze5] {
    padding: 0.5rem 0.75rem;                   /* Padding */
    border-radius: 0.25rem;                    /* Esquinas */
    font-size: var(--texto-9pt);               /* Tamaño */
    margin-bottom: 0.75rem;                    /* Margen inferior */
}

.smod-mensaje-ok[b-6nglfxpze5] {
    background-color: #E8F5E9;                 /* Verde claro */
    color: #1B5E20;                            /* Verde oscuro */
    border: 1px solid #A5D6A7;                 /* Borde verde */
}

.smod-mensaje-error[b-6nglfxpze5] {
    background-color: #FFEBEE;                 /* Rojo claro */
    color: #B71C1C;                            /* Rojo oscuro */
    border: 1px solid #EF9A9A;                 /* Borde rojo */
}

/* ===== RESULTADO ===== */
.smod-resultado[b-6nglfxpze5] {
    margin-bottom: 1rem;                       /* Margen inferior */
}

.smod-textarea[b-6nglfxpze5] {
    width: 100%;                               /* Ancho completo */
    min-height: 6rem;                          /* Alto mínimo */
    font-family: monospace;                    /* Monoespaciado */
    font-size: var(--texto-8pt);               /* Tamaño */
    padding: 0.5rem;                           /* Padding */
    border: 1px solid var(--color-border);     /* Borde */
    border-radius: 0.25rem;                    /* Esquinas */
    background-color: #F5F5F5;                 /* Fondo gris */
    resize: vertical;                          /* Resize solo vertical */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .smod-modulo[b-6nglfxpze5] {
        flex-direction: column;                /* Vertical en móvil */
        align-items: flex-start;               /* Alineado izquierda */
    }

    .smod-input-codigo[b-6nglfxpze5] {
        width: 100%;                           /* Ancho completo */
    }

    .smod-activacion[b-6nglfxpze5] {
        flex-direction: column;                /* Vertical en móvil */
        align-items: flex-start;               /* Alineado izquierda */
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/Setup_Ayuda_ME.razor.rz.scp.css */
/* ============================================================
   Setup_Ayuda_ME.razor.css - Estilos de la Guia del Modo Experto

   Extraido de Setup.razor.css para encapsulacion del componente.
   ============================================================ */

/* ===== CONTENEDOR PRINCIPAL ===== */
.guia-experto-section[b-vfdg8fi8pg] {
    margin-bottom: 1rem;
}

.guia-experto-section h4[b-vfdg8fi8pg] {
    font-size: var(--texto-12pt);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #333;
}

.guia-experto-scroll[b-vfdg8fi8pg] {
    max-height: 25rem;
    overflow-y: auto;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem;
}

/* ===== SECCIONES ===== */
.guia-seccion[b-vfdg8fi8pg] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ccc;
}

.guia-seccion:last-child[b-vfdg8fi8pg] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.guia-seccion h5[b-vfdg8fi8pg] {
    font-size: var(--texto-11pt);
    font-weight: 600;
    color: var(--color-cco);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--color-cco);
}

.guia-seccion > p[b-vfdg8fi8pg] {
    font-size: var(--texto-10pt);
    margin: 0 0 0.75rem 0;
    color: #444;
}

/* ===== ADVERTENCIA (TIEMPOS EN MINUTOS) ===== */
.guia-advertencia[b-vfdg8fi8pg] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 2px solid #ffc107;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.guia-advertencia h5[b-vfdg8fi8pg] {
    color: #856404;
    border-bottom-color: #856404;
}

.guia-advertencia p[b-vfdg8fi8pg] {
    color: #664d03;
}

.guia-advertencia .tabla-guia[b-vfdg8fi8pg] {
    background: white;
}

/* ===== TABLAS ===== */
.tabla-guia[b-vfdg8fi8pg] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
    margin-bottom: 0.5rem;
}

.tabla-guia th[b-vfdg8fi8pg],
.tabla-guia td[b-vfdg8fi8pg] {
    border: 1px solid #ccc;
    padding: 0.3rem 0.5rem;
    text-align: left;
}

.tabla-guia th[b-vfdg8fi8pg] {
    background: #e8e8e8;
    font-weight: 600;
}

.tabla-guia td:first-child[b-vfdg8fi8pg] {
    font-family: Consolas, monospace;
    background: #f5f5f5;
    white-space: nowrap;
}

/* ===== COLUMNAS (DESCRIPCION DE CAMPOS) ===== */
.guia-columnas[b-vfdg8fi8pg] {
    margin-bottom: 0.75rem;
}

.guia-columnas > strong[b-vfdg8fi8pg] {
    font-size: var(--texto-10pt);
    display: block;
    margin-bottom: 0.3rem;
}

/* ===== REGLAS ===== */
.guia-reglas[b-vfdg8fi8pg] {
    margin-bottom: 0.75rem;
}

.guia-reglas > strong[b-vfdg8fi8pg] {
    font-size: var(--texto-10pt);
    display: block;
    margin-bottom: 0.3rem;
}

.guia-reglas ul[b-vfdg8fi8pg] {
    margin: 0 0 0.5rem 1.25rem;
    padding: 0;
    font-size: var(--texto-9pt);
}

.guia-reglas li[b-vfdg8fi8pg] {
    margin-bottom: 0.3rem;
}

.guia-reglas ul ul[b-vfdg8fi8pg] {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

/* ===== CONCEPTO (AGRUPADOR VS OPERATIVO) ===== */
.guia-concepto[b-vfdg8fi8pg] {
    background: #e7f3ff;
    border: 1px solid #0066cc;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.guia-concepto > strong[b-vfdg8fi8pg] {
    font-size: var(--texto-10pt);
    color: #004085;
    display: block;
    margin-bottom: 0.3rem;
}

.guia-concepto ul[b-vfdg8fi8pg] {
    margin: 0 0 0.5rem 1.25rem;
    padding: 0;
    font-size: var(--texto-9pt);
    color: #004085;
}

.guia-concepto li[b-vfdg8fi8pg] {
    margin-bottom: 0.3rem;
}

.guia-concepto p[b-vfdg8fi8pg] {
    margin: 0;
    font-size: var(--texto-9pt);
    color: #004085;
}

/* ===== PROHIBIDO ===== */
.guia-prohibido[b-vfdg8fi8pg] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    font-size: var(--texto-9pt);
    margin-top: 0.5rem;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Tests.razor.rz.scp.css */
/*
   Tests.razor.css
   Estilos para la página índice de tests
*/

.tests-descripcion[b-nkhexs9f9n] {
    font-size: var(--texto-9pt);
    color: #666;
    margin-bottom: 1.5rem;
}

.tests-lista[b-nkhexs9f9n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}

.test-card[b-nkhexs9f9n] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.test-card:hover[b-nkhexs9f9n] {
    background: #fff;
    border-color: var(--color-cco);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.test-card-icon[b-nkhexs9f9n] {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.test-card-content[b-nkhexs9f9n] {
    flex: 1;
}

.test-card-title[b-nkhexs9f9n] {
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
}

.test-card-desc[b-nkhexs9f9n] {
    font-size: var(--texto-9pt);
    color: #666;
    line-height: 1.4;
}

.test-card-ruta[b-nkhexs9f9n] {
    font-size: var(--texto-8pt);
    color: #999;
    font-family: monospace;
    margin-top: 0.5rem;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/Test.razor.rz.scp.css */
/*
   Test.razor.css
   Página de pruebas para encriptación (uso desarrollo).
   Formulario simple para probar cifrado/descifrado.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.test-container[b-20kwqo505q] {
    padding: 1.5rem;                          /* Espaciado interno */
    max-width: 500px;                         /* Ancho máximo */
    margin: auto;                             /* Centrado horizontal */
}

/* ===== GRUPO DE CAMPO ===== */
.test-form-group[b-20kwqo505q] {
    margin-bottom: 1rem;                      /* Separación entre campos */
}

.test-form-group label[b-20kwqo505q] {
    display: block;                           /* Elemento de bloque */
    margin-bottom: 0.25rem;                   /* Separación del input */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== INPUT DE TEXTO ===== */
.test-input[b-20kwqo505q] {
    width: 100%;                              /* Ancho completo */
    padding: 0.5rem;                          /* Espaciado interno */
    border: 1px solid var(--color-border);    /* Borde gris claro */
    border-radius: 4px;                       /* Esquinas redondeadas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== CONTENEDOR DE BOTONES ===== */
.test-actions[b-20kwqo505q] {
    display: flex;                            /* Flexbox horizontal */
    gap: 0.5rem;                              /* Espacio entre botones */
    margin-bottom: 1.5rem;                    /* Separación inferior */
}

/* ===== BOTÓN PRIMARIO (Cifrar) ===== */
/* Usa .boton de app.css (9pt) - aquí solo colores */
.test-btn-primary[b-20kwqo505q] {
    background-color: var(--color-home);      /* Verde SiREI */
    color: white;                             /* Texto blanco */
}

/* ===== BOTÓN SECUNDARIO (Descifrar) ===== */
/* Usa .boton de app.css (9pt) - aquí solo colores */
.test-btn-secondary[b-20kwqo505q] {
    background-color: #666;                   /* Gris medio */
    color: white;                             /* Texto blanco */
}

/* ===== ALERTA DE RESULTADO (Info) ===== */
.test-alert-info[b-20kwqo505q] {
    padding: 1rem;                            /* Espaciado interno */
    background-color: #d1ecf1;                /* Azul claro */
    border: 1px solid #bee5eb;                /* Borde azul suave */
    border-radius: 4px;                       /* Esquinas redondeadas */
    color: #0c5460;                           /* Texto azul oscuro */
}

.test-alert-info code[b-20kwqo505q] {
    word-break: break-all;                    /* Permite cortar texto largo */
}

/* ===== ALERTA DE ERROR ===== */
.test-alert-error[b-20kwqo505q] {
    padding: 1rem;                            /* Espaciado interno */
    background-color: #f8d7da;                /* Rojo claro */
    border: 1px solid #f5c6cb;                /* Borde rojo suave */
    border-radius: 4px;                       /* Esquinas redondeadas */
    color: #721c24;                           /* Texto rojo oscuro */
    font-size: 0.8rem;                        /* Tamaño pequeño */
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestLoading.razor.rz.scp.css */
/*
   TestLoading.razor.css
   Página de prueba para evaluar indicadores de carga (spinners).
   Muestra diferentes opciones de spinners para estandarizar el sistema.
*/

h2[b-wp3eamv3c2] {
    color: #333;
    margin-bottom: 0.5rem;
}

h3[b-wp3eamv3c2] {
    color: #666;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.25rem;
}

/* ===== PUNTO 0: SELECCION ===== */
.seccion-seleccion[b-wp3eamv3c2] {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #FFFFF0;
    border: 2px solid #DAA520;
    border-radius: 8px;
}

.seccion-seleccion h3[b-wp3eamv3c2] {
    color: #DAA520;
    margin-top: 0;
    border-bottom: 1px solid #DAA520;
}

.seleccion-grid[b-wp3eamv3c2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.seleccion-card[b-wp3eamv3c2] {
    border: 2px solid #999;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    background-color: #FFFFFF;
}

.seleccion-card h4[b-wp3eamv3c2] {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #666;
}

.seleccion-card-nuevo[b-wp3eamv3c2] {
    border-color: #228B22;
    background-color: #F0FFF0;
}

.seleccion-card-nuevo h4[b-wp3eamv3c2] {
    color: #228B22;
}

.seleccion-demo[b-wp3eamv3c2] {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.seleccion-texto[b-wp3eamv3c2] {
    font-size: .9rem;
    font-weight: bold;
    color: #228B22;
}

.origen[b-wp3eamv3c2] {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.seccion-test[b-wp3eamv3c2] {
    margin-bottom: 2rem;
}

.demo-container[b-wp3eamv3c2] {
    border: 2px dashed #ccc;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

.demo-blanco[b-wp3eamv3c2] {
    background-color: #FFFFFF;
}

.demo-gris[b-wp3eamv3c2] {
    background-color: #F5F5F5;
}

/* ===== TIPO 1: panel-wait (ReqNuevoCaptura) ===== */
.panel-wait-demo[b-wp3eamv3c2] {
    text-align: center;
    padding: 2.5rem 1.25rem;
    background-color: #FFFFFF;
}

.panel-wait-demo img[b-wp3eamv3c2] {
    width: 3rem;
    height: 3rem;
}

.mensaje-wait-demo[b-wp3eamv3c2] {
    color: #008000;
    font-weight: bold;
    font-size: 0.92rem;
}

/* ===== TIPO 2: procesando (IniciaTablas) ===== */
.procesando-demo[b-wp3eamv3c2] {
    text-align: left;
    padding: 1.5rem;
    font-size: 0.83rem;
    color: #228B22;
}

.procesando-demo img[b-wp3eamv3c2] {
    margin-bottom: 0.5rem;
}

.procesando-demo strong[b-wp3eamv3c2] {
    display: block;
    margin-bottom: 0.25rem;
}

/* ===== TIPO 3: procesando (ProcesoDiario) ===== */
.procesando-diario-demo[b-wp3eamv3c2] {
    text-align: center;
    padding: 2rem;
    color: #228B22;
}

/* ===== TIPO 4: panel-mensaje (EncConfirma) ===== */
.panel-mensaje-demo[b-wp3eamv3c2] {
    text-align: center;
    padding: 1.25rem;
}

.texto-verde-demo[b-wp3eamv3c2] {
    color: #008000;
    font-weight: bold;
}

.panel-mensaje-demo img[b-wp3eamv3c2] {
    max-width: 3.13rem;
    height: auto;
}

/* ===== TIPO 5: loading-message (PanelEnc/PanelEva) ===== */
.loading-message-demo[b-wp3eamv3c2] {
    text-align: center;
    padding: 1.25rem;
    font-size: 0.83rem;
    color: #666;
}

/* ===== TIPO 6: enviando (FooterContacto) ===== */
.enviando-demo[b-wp3eamv3c2] {
    text-align: center;
    padding: 1rem;
}

/* ===== TIPO 7-13: botones de modales ===== */
.btn-demo[b-wp3eamv3c2] {
    background-color: #4CAF50;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===== CONCLUSION ===== */
.conclusion[b-wp3eamv3c2] {
    background-color: #FFFFC0;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.conclusion ol[b-wp3eamv3c2] {
    margin-left: 1.5rem;
}

.conclusion li[b-wp3eamv3c2] {
    margin-bottom: 0.5rem;
}

.recomendacion[b-wp3eamv3c2] {
    background-color: #90EE90;
    padding: 0.5rem;
    margin-top: 1rem;
    border-radius: 4px;
}

.alerta[b-wp3eamv3c2] {
    background-color: #FFCCCC;
    color: #CC0000;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 4px;
    font-weight: bold;
}

.problema[b-wp3eamv3c2] {
    color: #CC0000;
}

/* ===== PAGINAS SIN INDICADOR ===== */
.sin-indicador[b-wp3eamv3c2] {
    background-color: #FFF0F0;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid #FFCCCC;
}

.tabla-paginas[b-wp3eamv3c2] {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.tabla-paginas th[b-wp3eamv3c2],
.tabla-paginas td[b-wp3eamv3c2] {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: left;
}

.tabla-paginas th[b-wp3eamv3c2] {
    background-color: #CC0000;
    color: white;
}

.tabla-paginas tr:nth-child(even)[b-wp3eamv3c2] {
    background-color: #FFF5F5;
}

.tabla-paginas tr:hover[b-wp3eamv3c2] {
    background-color: #FFE0E0;
}

.tabla-paginas tr.separador-modulo[b-wp3eamv3c2] {
    background-color: #FFDDDD;
}

.tabla-paginas tr.separador-modulo td[b-wp3eamv3c2] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ===== PROPUESTAS DE SPINNERS ===== */
.propuestas-grid[b-wp3eamv3c2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.propuesta-card[b-wp3eamv3c2] {
    border: 2px solid #228B22;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    background-color: #F0FFF0;
}

.propuesta-card h4[b-wp3eamv3c2] {
    margin: 0 0 1rem 0;
    color: #228B22;
    font-size: 0.9rem;
}

.propuesta-actual[b-wp3eamv3c2] {
    border-color: #999;
    background-color: #F5F5F5;
}

.propuesta-actual h4[b-wp3eamv3c2] {
    color: #666;
}

.demo-spinner[b-wp3eamv3c2] {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spinner-texto[b-wp3eamv3c2] {
    color: #228B22;
    font-size: 0.8rem;
    font-weight: bold;
}

.propuesta-desc[b-wp3eamv3c2] {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.propuesta-nota[b-wp3eamv3c2] {
    background-color: #E8F5E9;
    border: 1px solid #228B22;
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
}

.propuesta-nota ul[b-wp3eamv3c2] {
    margin: 0.5rem 0 0 1.5rem;
    font-size: 0.85rem;
}

.propuesta-nota li[b-wp3eamv3c2] {
    margin-bottom: 0.25rem;
}

/* ===== OPCION A: Spinner Circular ===== */
.spinner-circular[b-wp3eamv3c2] {
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid #C8E6C9;
    border-top-color: #228B22;
    border-radius: 50%;
    animation: spin-b-wp3eamv3c2 1s linear infinite;
}

@keyframes spin-b-wp3eamv3c2 {
    to { transform: rotate(360deg); }
}

/* ===== OPCION B: Puntos ===== */
.spinner-dots[b-wp3eamv3c2] {
    display: flex;
    gap: 0.4rem;
}

.spinner-dots .dot[b-wp3eamv3c2] {
    width: 0.6rem;
    height: 0.6rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: bounce-b-wp3eamv3c2 1.4s ease-in-out infinite;
}

.spinner-dots .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-dots .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.2s; }
.spinner-dots .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.4s; }

@keyframes bounce-b-wp3eamv3c2 {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== OPCION C: Pulso ===== */
.spinner-pulse[b-wp3eamv3c2] {
    width: 2rem;
    height: 2rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: pulse-b-wp3eamv3c2 1.5s ease-in-out infinite;
}

@keyframes pulse-b-wp3eamv3c2 {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

/* ===== OPCION D: Doble anillo ===== */
.spinner-dual[b-wp3eamv3c2] {
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid transparent;
    border-top-color: #228B22;
    border-bottom-color: #228B22;
    border-radius: 50%;
    animation: spin-b-wp3eamv3c2 1s linear infinite;
    position: relative;
}

.spinner-dual[b-wp3eamv3c2]::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 3px solid transparent;
    border-left-color: #66BB6A;
    border-right-color: #66BB6A;
    border-radius: 50%;
    animation: spin-b-wp3eamv3c2 0.8s linear infinite reverse;
}

/* ===== OPCION E: Barras ===== */
.spinner-bars[b-wp3eamv3c2] {
    display: flex;
    gap: 0.2rem;
    align-items: flex-end;
    height: 2rem;
}

.spinner-bars .bar[b-wp3eamv3c2] {
    width: 0.35rem;
    background-color: #228B22;
    border-radius: 2px;
    animation: bars-b-wp3eamv3c2 1s ease-in-out infinite;
}

.spinner-bars .bar:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-bars .bar:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.15s; }
.spinner-bars .bar:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.3s; }
.spinner-bars .bar:nth-child(4)[b-wp3eamv3c2] { animation-delay: 0.45s; }

@keyframes bars-b-wp3eamv3c2 {
    0%, 100% { height: 0.5rem; }
    50% { height: 2rem; }
}

/* ===== OPCION F: 5 Puntos ===== */
.spinner-dots5[b-wp3eamv3c2] {
    display: flex;
    gap: 0.3rem;
    margin-top: 2.2rem;
}

.spinner-dots5 .dot[b-wp3eamv3c2] {
    width: .8rem;
    height: .8rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: bounce-b-wp3eamv3c2 1.8s ease-in-out infinite;
}

.spinner-dots5 .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-dots5 .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.15s; }
.spinner-dots5 .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.3s; }
.spinner-dots5 .dot:nth-child(4)[b-wp3eamv3c2] { animation-delay: 0.45s; }
.spinner-dots5 .dot:nth-child(5)[b-wp3eamv3c2] { animation-delay: 0.6s; }

/* ===== OPCION G: Puntos en circulo ===== */
.spinner-dots-circle[b-wp3eamv3c2] {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    animation: spin-b-wp3eamv3c2 1.5s linear infinite;
}

.spinner-dots-circle .dot[b-wp3eamv3c2] {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    background-color: #228B22;
    border-radius: 50%;
}

.spinner-dots-circle .dot:nth-child(1)[b-wp3eamv3c2] { top: 0; left: 50%; transform: translateX(-50%); opacity: 1; }
.spinner-dots-circle .dot:nth-child(2)[b-wp3eamv3c2] { top: 15%; right: 15%; opacity: 0.875; }
.spinner-dots-circle .dot:nth-child(3)[b-wp3eamv3c2] { top: 50%; right: 0; transform: translateY(-50%); opacity: 0.75; }
.spinner-dots-circle .dot:nth-child(4)[b-wp3eamv3c2] { bottom: 15%; right: 15%; opacity: 0.625; }
.spinner-dots-circle .dot:nth-child(5)[b-wp3eamv3c2] { bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.5; }
.spinner-dots-circle .dot:nth-child(6)[b-wp3eamv3c2] { bottom: 15%; left: 15%; opacity: 0.375; }
.spinner-dots-circle .dot:nth-child(7)[b-wp3eamv3c2] { top: 50%; left: 0; transform: translateY(-50%); opacity: 0.25; }
.spinner-dots-circle .dot:nth-child(8)[b-wp3eamv3c2] { top: 15%; left: 15%; opacity: 0.125; }

/* ===== OPCION H: Rebote ===== */
.spinner-bounce[b-wp3eamv3c2] {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    height: 2rem;
}

.spinner-bounce .dot[b-wp3eamv3c2] {
    width: 0.6rem;
    height: 0.6rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: jumpBounce-b-wp3eamv3c2 0.6s ease-in-out infinite alternate;
}

.spinner-bounce .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-bounce .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.2s; }
.spinner-bounce .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.4s; }

@keyframes jumpBounce-b-wp3eamv3c2 {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1rem); }
}

/* ===== OPCION I: Onda ===== */
.spinner-wave[b-wp3eamv3c2] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.spinner-wave .dot[b-wp3eamv3c2] {
    width: 0.4rem;
    height: 0.4rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: wave-b-wp3eamv3c2 1.2s ease-in-out infinite;
}

.spinner-wave .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-wave .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.1s; }
.spinner-wave .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.2s; }
.spinner-wave .dot:nth-child(4)[b-wp3eamv3c2] { animation-delay: 0.3s; }
.spinner-wave .dot:nth-child(5)[b-wp3eamv3c2] { animation-delay: 0.4s; }

@keyframes wave-b-wp3eamv3c2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.8rem); }
}

/* ===== OPCION J: Fade ===== */
.spinner-fade[b-wp3eamv3c2] {
    display: flex;
    gap: 0.4rem;
}

.spinner-fade .dot[b-wp3eamv3c2] {
    width: 0.6rem;
    height: 0.6rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: fade-b-wp3eamv3c2 1.2s ease-in-out infinite;
}

.spinner-fade .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-fade .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.3s; }
.spinner-fade .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.6s; }
.spinner-fade .dot:nth-child(4)[b-wp3eamv3c2] { animation-delay: 0.9s; }

@keyframes fade-b-wp3eamv3c2 {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

/* ===== OPCION K: Typing ===== */
.spinner-typing[b-wp3eamv3c2] {
    display: flex;
    gap: 0.3rem;
    padding: 0.5rem 0.8rem;
    background-color: #E8F5E9;
    border-radius: 1rem;
}

.spinner-typing .dot[b-wp3eamv3c2] {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #228B22;
    border-radius: 50%;
    animation: typing-b-wp3eamv3c2 1.4s ease-in-out infinite;
}

.spinner-typing .dot:nth-child(1)[b-wp3eamv3c2] { animation-delay: 0s; }
.spinner-typing .dot:nth-child(2)[b-wp3eamv3c2] { animation-delay: 0.2s; }
.spinner-typing .dot:nth-child(3)[b-wp3eamv3c2] { animation-delay: 0.4s; }

@keyframes typing-b-wp3eamv3c2 {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-0.4rem); }
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestOdoo.razor.rz.scp.css */
/*
   TestOdoo.razor.css
   Página de prueba para conexión a Odoo vía JSON-RPC.
   Formulario de conexión + tabla de resultados.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.test-odoo-container[b-z3l0ve8i9z] {
    padding: 1.5rem;
    max-width: 55rem;
    margin: auto;
}

.test-odoo-desc[b-z3l0ve8i9z] {
    color: #666;
    font-size: var(--texto-9pt);
    margin-bottom: 1.5rem;
}

/* ===== FORMULARIO ===== */
.test-odoo-grupo[b-z3l0ve8i9z] {
    margin-bottom: 0.75rem;
}

.test-odoo-grupo label[b-z3l0ve8i9z] {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.test-odoo-input[b-z3l0ve8i9z] {
    width: 100%;
    max-width: 28rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

.test-odoo-input-corto[b-z3l0ve8i9z] {
    max-width: 14rem;
}

/* ===== BOTONES ===== */
.test-odoo-acciones[b-z3l0ve8i9z] {
    display: flex;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.test-odoo-btn-conectar[b-z3l0ve8i9z] {
    background-color: var(--color-home);
    color: white;
}

.test-odoo-btn-leer[b-z3l0ve8i9z] {
    background-color: var(--color-cco);
    color: white;
}

/* ===== MENSAJES ===== */
.test-odoo-mensajes[b-z3l0ve8i9z] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}

.test-odoo-msg-info[b-z3l0ve8i9z] {
    padding: 0.4rem 0.75rem;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    color: #0c5460;
    font-size: var(--texto-9pt);
}

.test-odoo-msg-error[b-z3l0ve8i9z] {
    padding: 0.4rem 0.75rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: var(--texto-9pt);
}

/* ===== TABLA DE FACTURAS ===== */
.test-odoo-tabla-scroll[b-z3l0ve8i9z] {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.test-odoo-tabla[b-z3l0ve8i9z] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
}

.test-odoo-tabla th[b-z3l0ve8i9z] {
    background-color: #f0f0f0;
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.test-odoo-tabla td[b-z3l0ve8i9z] {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.5rem;
}

.test-odoo-tabla tbody tr:hover[b-z3l0ve8i9z] {
    background-color: #f8f9fa;
}

.test-odoo-col-num[b-z3l0ve8i9z] {
    text-align: right;
}

/* ===== BADGES DE ESTADO DE PAGO ===== */
.test-odoo-badge[b-z3l0ve8i9z] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: var(--texto-8pt);
    font-weight: 600;
    white-space: nowrap;
}

.test-odoo-pago-pagada[b-z3l0ve8i9z] {
    background-color: #d4edda;
    color: #155724;
}

.test-odoo-pago-sinpagar[b-z3l0ve8i9z] {
    background-color: #f8d7da;
    color: #721c24;
}

.test-odoo-pago-parcial[b-z3l0ve8i9z] {
    background-color: #fff3cd;
    color: #856404;
}

.test-odoo-pago-enpago[b-z3l0ve8i9z] {
    background-color: #d1ecf1;
    color: #0c5460;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestOdooCobranza.razor.rz.scp.css */
/*
   TestOdooCobranza.razor.css
   Reporte de cobranza Odoo: selector de mes + tabla de 10 columnas.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.test-cob-container[b-zl8mrmkbp5] {
    padding: 1.5rem;
    padding-right: 2rem;
}

.test-cob-desc[b-zl8mrmkbp5] {
    color: #666;
    font-size: var(--texto-9pt);
    margin-bottom: 1.5rem;
}

/* ===== FILTROS (selector de mes) ===== */
.test-cob-filtros[b-zl8mrmkbp5] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.test-cob-grupo[b-zl8mrmkbp5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.test-cob-grupo label[b-zl8mrmkbp5] {
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.test-cob-select[b-zl8mrmkbp5] {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

/* ===== BOTONES ===== */
.test-cob-acciones[b-zl8mrmkbp5] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.test-cob-btn-obtener[b-zl8mrmkbp5] {
    background-color: var(--color-cco);
    color: white;
}

/* ===== MENSAJES ===== */
.test-cob-mensajes[b-zl8mrmkbp5] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}

.test-cob-msg-info[b-zl8mrmkbp5] {
    padding: 0.4rem 0.75rem;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    color: #0c5460;
    font-size: var(--texto-9pt);
}

.test-cob-msg-error[b-zl8mrmkbp5] {
    padding: 0.4rem 0.75rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: var(--texto-9pt);
}

/* ===== TABLA DE COBRANZA ===== */
.test-cob-tabla-scroll[b-zl8mrmkbp5] {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.test-cob-tabla[b-zl8mrmkbp5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
}

.test-cob-tabla th[b-zl8mrmkbp5] {
    background-color: #f0f0f0;
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.test-cob-tabla td[b-zl8mrmkbp5] {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}

.test-cob-tabla tbody tr:hover[b-zl8mrmkbp5] {
    background-color: #f8f9fa;
}

.test-cob-tabla .test-cob-col-num[b-zl8mrmkbp5] {
    text-align: right;
}

.test-cob-col-center[b-zl8mrmkbp5] {
    text-align: center;
}

/* ===== ENCABEZADOS ORDENABLES ===== */
.test-cob-th-sort[b-zl8mrmkbp5] {
    cursor: pointer;
    user-select: none;
}

.test-cob-th-sort:hover[b-zl8mrmkbp5] {
    background-color: #e0e0e0;
}

/* ===== FILA DE TOTAL ===== */
.test-cob-fila-total th[b-zl8mrmkbp5] {
    background-color: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
}

.test-cob-tabla .test-cob-total[b-zl8mrmkbp5] {
    font-weight: 700;
    font-size: var(--texto-10pt);
    color: #333;
    text-align: right;
}

/* ===== FILTROS DE TABLA ===== */
.test-cob-filtros-tabla[b-zl8mrmkbp5] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.test-cob-filtro-grupo[b-zl8mrmkbp5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.test-cob-filtro-label[b-zl8mrmkbp5] {
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.test-cob-multiselect[b-zl8mrmkbp5] {
    position: relative;
    display: inline-block;
}

.test-cob-multiselect-btn[b-zl8mrmkbp5] {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--texto-9pt);
    background-color: white;
    cursor: pointer;
    min-width: 10rem;
    text-align: left;
}

.test-cob-multiselect-btn:hover[b-zl8mrmkbp5] {
    background-color: #f8f9fa;
}

.test-cob-multiselect-opciones[b-zl8mrmkbp5] {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.4rem;
    min-width: 14rem;
    max-height: 15rem;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.test-cob-check-opcion[b-zl8mrmkbp5] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    font-size: var(--texto-9pt);
    cursor: pointer;
}

.test-cob-check-opcion:hover[b-zl8mrmkbp5] {
    background-color: #f0f0f0;
}

.test-cob-check-icono[b-zl8mrmkbp5] {
    font-size: var(--texto-10pt);
}

/* ===== ACORDEÓN POR VENDEDOR ===== */
.test-cob-acordeon-header[b-zl8mrmkbp5] {
    cursor: pointer;
    user-select: none;
}

.test-cob-acordeon-header td[b-zl8mrmkbp5] {
    background-color: #e8e8e8;
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-9pt);
    border: 1px solid var(--color-border);
}

.test-cob-acordeon-header:hover td[b-zl8mrmkbp5] {
    background-color: #ddd;
}

.test-cob-acordeon-flecha[b-zl8mrmkbp5] {
    margin-right: 0.4rem;
    font-size: var(--texto-8pt);
}

.test-cob-acordeon-count[b-zl8mrmkbp5] {
    color: #666;
    font-weight: normal;
    margin-left: 0.3rem;
    font-size: var(--texto-8pt);
}

/* ===== REFERENCIADA (highlight amarillo tenue) ===== */
.test-cob-ref td[b-zl8mrmkbp5] {
    background-color: #fffde7;
}

.test-cob-ref-cell[b-zl8mrmkbp5] {
    cursor: pointer;
}

/* ===== DÍAS VENCIDA (colores por severidad) ===== */
.test-cob-dias-vencido[b-zl8mrmkbp5] {
    color: #e67e22;
    font-weight: 600;
}

.test-cob-dias-critico[b-zl8mrmkbp5] {
    color: #c0392b;
    font-weight: 600;
}

/* ===== BADGES DE ESTATUS ===== */
.test-cob-badge[b-zl8mrmkbp5] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: var(--texto-8pt);
    font-weight: 600;
    white-space: nowrap;
}

.test-cob-estatus-pagado[b-zl8mrmkbp5] {
    background-color: #d4edda;
    color: #155724;
}

.test-cob-estatus-sinpagar[b-zl8mrmkbp5] {
    background-color: #f8d7da;
    color: #721c24;
}

.test-cob-estatus-parcial[b-zl8mrmkbp5] {
    background-color: #fff3cd;
    color: #856404;
}

.test-cob-estatus-enproceso[b-zl8mrmkbp5] {
    background-color: #d1ecf1;
    color: #0c5460;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestOdooCobranza2.razor.rz.scp.css */
/*
   TestOdooCobranza2.razor.css
   Cobranza v2: confiar en el ERP.
   Reutiliza el patrón visual de TestOdooCobranza + indicadores del mes.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.test-cob-container[b-v5zpb8qoct] {
    padding: 1.5rem;
    padding-right: 2rem;
}

.test-cob-desc[b-v5zpb8qoct] {
    color: #666;
    font-size: var(--texto-9pt);
    margin-bottom: 1.5rem;
}

/* ===== FILTROS (selector de mes) ===== */
.test-cob-filtros[b-v5zpb8qoct] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.test-cob-grupo[b-v5zpb8qoct] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.test-cob-grupo label[b-v5zpb8qoct] {
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.test-cob-select[b-v5zpb8qoct] {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

/* ===== BOTONES ===== */
.test-cob-acciones[b-v5zpb8qoct] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.test-cob-btn-obtener[b-v5zpb8qoct] {
    background-color: var(--color-cco);
    color: white;
}

/* ===== MENSAJES ===== */
.test-cob-mensajes[b-v5zpb8qoct] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}

.test-cob-msg-info[b-v5zpb8qoct] {
    padding: 0.4rem 0.75rem;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    color: #0c5460;
    font-size: var(--texto-9pt);
}

.test-cob-msg-error[b-v5zpb8qoct] {
    padding: 0.4rem 0.75rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    font-size: var(--texto-9pt);
}

/* ===== RESUMEN v2 ===== */
.test-cob2-resumen[b-v5zpb8qoct] {
    display: flex;
    gap: 2rem;
    padding: 0.6rem 1rem;
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    font-size: var(--texto-9pt);
    margin-bottom: 0.75rem;
}

/* ===== TABLA DE COBRANZA ===== */
.test-cob-tabla-scroll[b-v5zpb8qoct] {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.test-cob-tabla[b-v5zpb8qoct] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
}

.test-cob-tabla th[b-v5zpb8qoct] {
    background-color: #f0f0f0;
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.test-cob-tabla td[b-v5zpb8qoct] {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}

.test-cob-tabla tbody tr:hover[b-v5zpb8qoct] {
    background-color: #f8f9fa;
}

.test-cob-tabla .test-cob-col-num[b-v5zpb8qoct] {
    text-align: right;
}

.test-cob-col-center[b-v5zpb8qoct] {
    text-align: center;
}

/* ===== ENCABEZADOS ORDENABLES ===== */
.test-cob-th-sort[b-v5zpb8qoct] {
    cursor: pointer;
    user-select: none;
}

.test-cob-th-sort:hover[b-v5zpb8qoct] {
    background-color: #e0e0e0;
}

/* ===== FILA DE TOTAL ===== */
.test-cob-fila-total th[b-v5zpb8qoct] {
    background-color: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
}

.test-cob-tabla .test-cob-total[b-v5zpb8qoct] {
    font-weight: 700;
    font-size: var(--texto-10pt);
    color: #333;
    text-align: right;
}

/* ===== FILTROS DE TABLA ===== */
.test-cob-filtros-tabla[b-v5zpb8qoct] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.test-cob-filtro-grupo[b-v5zpb8qoct] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.test-cob-filtro-label[b-v5zpb8qoct] {
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.test-cob-multiselect[b-v5zpb8qoct] {
    position: relative;
    display: inline-block;
}

.test-cob-multiselect-btn[b-v5zpb8qoct] {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: var(--texto-9pt);
    background-color: white;
    cursor: pointer;
    min-width: 10rem;
    text-align: left;
}

.test-cob-multiselect-btn:hover[b-v5zpb8qoct] {
    background-color: #f8f9fa;
}

.test-cob-multiselect-opciones[b-v5zpb8qoct] {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.4rem;
    min-width: 14rem;
    max-height: 15rem;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.test-cob-check-opcion[b-v5zpb8qoct] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    font-size: var(--texto-9pt);
    cursor: pointer;
}

.test-cob-check-opcion:hover[b-v5zpb8qoct] {
    background-color: #f0f0f0;
}

.test-cob-check-icono[b-v5zpb8qoct] {
    font-size: var(--texto-10pt);
}

/* ===== ACORDEÓN POR VENDEDOR ===== */
.test-cob-acordeon-header[b-v5zpb8qoct] {
    cursor: pointer;
    user-select: none;
}

.test-cob-acordeon-header td[b-v5zpb8qoct] {
    background-color: #e8e8e8;
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-9pt);
    border: 1px solid var(--color-border);
}

.test-cob-acordeon-header:hover td[b-v5zpb8qoct] {
    background-color: #ddd;
}

.test-cob-acordeon-flecha[b-v5zpb8qoct] {
    margin-right: 0.4rem;
    font-size: var(--texto-8pt);
}

.test-cob-acordeon-count[b-v5zpb8qoct] {
    color: #666;
    font-weight: normal;
    margin-left: 0.3rem;
    font-size: var(--texto-8pt);
}

/* ===== DÍAS VENCIDA (colores por severidad) ===== */
.test-cob-dias-vencido[b-v5zpb8qoct] {
    color: #e67e22;
    font-weight: 600;
}

.test-cob-dias-critico[b-v5zpb8qoct] {
    color: #c0392b;
    font-weight: 600;
}

/* ===== BADGES DE ESTATUS ===== */
.test-cob-badge[b-v5zpb8qoct] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: var(--texto-8pt);
    font-weight: 600;
    white-space: nowrap;
}

.test-cob-estatus-pagado[b-v5zpb8qoct] {
    background-color: #d4edda;
    color: #155724;
}

.test-cob-estatus-sinpagar[b-v5zpb8qoct] {
    background-color: #f8d7da;
    color: #721c24;
}

.test-cob-estatus-parcial[b-v5zpb8qoct] {
    background-color: #fff3cd;
    color: #856404;
}

.test-cob-estatus-enproceso[b-v5zpb8qoct] {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* ===== v2: INDICADORES ¿DEL MES? ===== */
.test-cob2-si[b-v5zpb8qoct] {
    color: #155724;
    font-weight: 700;
}

.test-cob2-no[b-v5zpb8qoct] {
    color: #999;
    font-weight: 600;
}

/* Filas que NO son del mes: atenuadas */
.test-cob2-fila-fuera td[b-v5zpb8qoct] {
    color: #aaa;
    background-color: #fafafa;
}

.test-cob2-fila-fuera .test-cob-badge[b-v5zpb8qoct] {
    opacity: 0.5;
}

.test-cob2-fila-fuera .test-cob2-no[b-v5zpb8qoct] {
    color: #ccc;
}

/* Columna de nota */
.test-cob2-nota[b-v5zpb8qoct] {
    font-size: var(--texto-8pt);
    color: #888;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestOdooOportunidades.razor.rz.scp.css */
/*
   TestOdooOportunidades.razor.css
   Pantalla de prueba para la traída de oportunidades de Odoo.
   CSS scoped propio (el scoped NO se comparte): probar conexión,
   buscar/traer/guardar, tabla de resultados.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.testopp-container[b-ku9mmqq0aq] {
    padding: 1.5rem;
    max-width: 70rem;
    margin: auto;
}

.testopp-desc[b-ku9mmqq0aq] {
    color: #666;
    font-size: var(--texto-9pt);
    margin-bottom: 1.5rem;
}

/* ===== BANNER DE AVISO (ODOO NO CONFIGURADO) ===== */
.testopp-banner-aviso[b-ku9mmqq0aq] {
    padding: 0.6rem 0.9rem;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 0.25rem;
    color: #856404;
    font-size: var(--texto-9pt);
    margin-bottom: 1.25rem;
}

/* ===== GRUPOS DE FORMULARIO / ACCIÓN ===== */
.testopp-grupo[b-ku9mmqq0aq] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.testopp-label[b-ku9mmqq0aq] {
    display: block;
    width: 100%;
    margin-bottom: 0.2rem;
    font-size: var(--texto-9pt);
    font-weight: 600;
}

.testopp-input[b-ku9mmqq0aq] {
    width: 100%;
    max-width: 32rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
}

.testopp-hint[b-ku9mmqq0aq] {
    font-size: var(--texto-8pt);
    color: #666;
}

/* ===== BOTONES ===== */
.testopp-btn-conectar[b-ku9mmqq0aq] {
    background-color: var(--color-home);
    color: white;
}

.testopp-btn-traer[b-ku9mmqq0aq] {
    background-color: var(--color-cco);
    color: white;
}

/* ===== RESULTADO DE CONEXIÓN ===== */
.testopp-resultado[b-ku9mmqq0aq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
    margin-bottom: 1.25rem;
}

.testopp-resultado-ok[b-ku9mmqq0aq] {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.testopp-resultado-error[b-ku9mmqq0aq] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ===== MENSAJES ===== */
.testopp-mensaje[b-ku9mmqq0aq] {
    padding: 0.4rem 0.75rem;
    border-radius: 0.25rem;
    font-size: var(--texto-9pt);
    margin-bottom: 1.25rem;
}

.testopp-mensaje-info[b-ku9mmqq0aq] {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.testopp-mensaje-error[b-ku9mmqq0aq] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ===== TABLA DE OPORTUNIDADES ===== */
.testopp-tabla-scroll[b-ku9mmqq0aq] {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.testopp-tabla[b-ku9mmqq0aq] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt);
}

.testopp-tabla th[b-ku9mmqq0aq] {
    background-color: #f0f0f0;
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.testopp-tabla td[b-ku9mmqq0aq] {
    border: 1px solid var(--color-border);
    padding: 0.35rem 0.5rem;
}

.testopp-tabla tbody tr:hover[b-ku9mmqq0aq] {
    background-color: #f8f9fa;
}

.testopp-col-num[b-ku9mmqq0aq] {
    text-align: right;
}
/* _content/SiREI_2026/Components/Pages/10CCO/Test/TestRey.razor.rz.scp.css */
/*
   TestRey.razor.css
   Página de prueba para imágenes del personaje Rey
*/

/* Contenedor de la galería */
.galeria-rey[b-r62rhaevxz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
}

/* Cada caja (imagen + etiqueta) */
.rey-item[b-r62rhaevxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0.25rem;
    width: 100px;
    height: 180px;
}

/* Caja de muestra de Click.png */
.rey-item-click[b-r62rhaevxz] {
    background-color: #ffe4e1;
    border: 2px solid #ff6b6b;
}

/* Etiqueta del porcentaje */
.rey-label[b-r62rhaevxz] {
    font-size: 0.75rem;
    font-weight: bold;
    margin-top: 0.25rem;
}

/* *********************************************** */
/* ESTO ES LO QUE SE OCUPA EN LA PÁGINA PANEL EVA*/
/* *********************************************** */
/* Estado NORMAL */
.icono-rey[b-r62rhaevxz] {
    height: 160px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    filter: drop-shadow(-4px 4px 2px rgba(0,0,0,0.3));
    will-change: revert-layer;
}
/* Estado HOVER (mouse encima) */
.icono-rey:hover[b-r62rhaevxz] {
    transform: scale(1.05);
    filter: drop-shadow(-7px 7px 2px rgba(0,0,0,0.25));
}
/* Estado CLICKED (después del click, 500ms) */
.icono-rey.icono-clicked[b-r62rhaevxz],
.icono-rey.icono-clicked:hover[b-r62rhaevxz] {
    height: 110px;
    margin-bottom: 20px;
}
/* *********************************************** */
/* _content/SiREI_2026/Components/Pages/10CCO/UserABC.razor.rz.scp.css */
/* ============================================================
   UserABC.razor.css - Estilos para ABCC de Usuarios
   ============================================================ */

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-2qbd67n47p] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra de filtros - color del módulo CCO (verde claro) */
.barra-filtros[b-2qbd67n47p] {
    background-color: #d4e8c7;
}

/* Ajuste de filtros */
.barra-filtros-select-depto[b-2qbd67n47p] {
    width: 12rem;
}

.btn-nuevo[b-2qbd67n47p] {
    margin-left: auto;
    background-color: var(--color-cco);
    color: white;
}

.btn-nuevo:hover[b-2qbd67n47p] {
    background-color: #6a1b9a;
}

/* Contenedores de línea - invisibles en PC */
.filtros-linea[b-2qbd67n47p] {
    display: contents;
}

/* Tabla de usuarios */
.tabla-header[b-2qbd67n47p] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-cco);
    color: white;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-radius: 4px 4px 0 0;
    margin-top: 0.5rem;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-2qbd67n47p] {
    display: none;
}

.user-list[b-2qbd67n47p] {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.user-item[b-2qbd67n47p] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: var(--texto-8pt);
    transition: background-color 0.15s;
}

.user-item:last-child[b-2qbd67n47p] {
    border-bottom: none;
}

.user-item:hover[b-2qbd67n47p] {
    background-color: #f8f9fa;
}

.user-item-seleccionado[b-2qbd67n47p] {
    background-color: #e8f4fd;
}

.user-item-baja[b-2qbd67n47p] {
    background-color: #f8f8f8;
    color: #888;
}

/* Columnas */
.col-check[b-2qbd67n47p] {
    width: 3%;
    text-align: center;
}

.col-id[b-2qbd67n47p] {
    width: 4%;
    text-align: center;
}

.col-email[b-2qbd67n47p] {
    width: 21%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-nombre[b-2qbd67n47p] {
    width: 17%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-depto[b-2qbd67n47p] {
    width: 14%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-puesto[b-2qbd67n47p] {
    width: 14%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-perfil[b-2qbd67n47p] {
    width: 10%;
    text-align: center;
}

.col-estatus[b-2qbd67n47p] {
    width: 8%;
    text-align: center;
}

.col-acciones[b-2qbd67n47p] {
    width: 9%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* Etiquetas de perfil */
.etiqueta-master[b-2qbd67n47p] {
    background-color: #d32f2f;
    color: white;
}

.etiqueta-poweruser[b-2qbd67n47p] {
    background-color: #1976d2;
    color: white;
}

.etiqueta-callservice[b-2qbd67n47p] {
    background-color: #ff9800;
    color: white;
}

.etiqueta-user[b-2qbd67n47p] {
    background-color: #757575;
    color: white;
}

/* Etiquetas de estatus */
.etiqueta-activo[b-2qbd67n47p] {
    background-color: #4caf50;
    color: white;
}

.etiqueta-inactivo[b-2qbd67n47p] {
    background-color: #ff9800;
    color: white;
}

.etiqueta-baja[b-2qbd67n47p] {
    background-color: #9e9e9e;
    color: white;
}

/* Botones de acción */
.btn-accion[b-2qbd67n47p] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-accion:hover[b-2qbd67n47p] {
    opacity: 0.8;
}

.btn-editar[b-2qbd67n47p] {
    background-color: #1976d2;
    color: white;
}

.btn-desactivar[b-2qbd67n47p] {
    background-color: #ff9800;
    color: white;
}

.btn-desactivar:disabled[b-2qbd67n47p] {
    background-color: #bdbdbd;
    color: #757575;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-reactivar[b-2qbd67n47p] {
    background-color: #4caf50;
    color: white;
}

.btn-activar[b-2qbd67n47p] {
    background-color: #8bc34a;
    color: white;
}

.btn-eliminar[b-2qbd67n47p] {
    background-color: #d32f2f;
    color: white;
}

/* Botón desactivar en lote (en barra de filtros) */
.btn-desactivar-lote[b-2qbd67n47p] {
    background-color: #ff9800;
    color: white;
    margin-left: auto;
}

.btn-desactivar-lote:hover[b-2qbd67n47p] {
    background-color: #e68900;
}

/* Botón recargar permisos en lote (en barra de filtros) */
.btn-recargar-permisos[b-2qbd67n47p] {
    background-color: #1976d2;
    color: white;
}

.btn-recargar-permisos:hover[b-2qbd67n47p] {
    background-color: #1565c0;
}

/* ============================================================
   MODALES - Estilos base del sistema
   ============================================================ */

/* Overlay - fondo semitransparente que cubre toda la pantalla */
.modal-overlay[b-2qbd67n47p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor del modal */
.modal-content[b-2qbd67n47p] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
}

/* Header del modal */
.modal-header[b-2qbd67n47p] {
    padding: 0.625rem 0.94rem;
    border-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: inherit;
}

.modal-header h3[b-2qbd67n47p] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

/* Botón X para cerrar */
.boton-x[b-2qbd67n47p] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-x:hover[b-2qbd67n47p] {
    opacity: 0.7;
}

/* Body del modal */
.modal-body[b-2qbd67n47p] {
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-10pt);
    text-align: center;
    color: #FFFFFF;
}

.modal-body p[b-2qbd67n47p] {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Footer del modal */
.modal-footer[b-2qbd67n47p] {
    padding: 0.94rem;
    border-top: 0px;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    background-color: inherit;
    flex-wrap: wrap;
}

/* ============================================================
   MODAL DESACTIVAR - Gris (acción reversible)
   ============================================================ */
.modal-desactivar[b-2qbd67n47p] {
    background-color: #696969;
}

.btn-confirmar-desactivar[b-2qbd67n47p] {
    background-color: #FF6666;
    color: #000000;
}

.btn-confirmar-desactivar:hover[b-2qbd67n47p] {
    background-color: #FF4444;
}

/* ============================================================
   MODAL ELIMINAR - Rojo oscuro (acción destructiva)
   ============================================================ */
.modal-eliminar[b-2qbd67n47p] {
    background-color: #8B0000;
}

.btn-confirmar-eliminar[b-2qbd67n47p] {
    background-color: #FF4444;
    color: #FFFFFF;
}

.btn-confirmar-eliminar:hover[b-2qbd67n47p] {
    background-color: #FF2222;
}

/* Alerta de movimientos (dentro de modal eliminar) */
.alerta-movimientos[b-2qbd67n47p] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--texto-9pt);
    color: #000000;
    text-align: left;
}

.alerta-icono[b-2qbd67n47p] {
    color: #8B0000;
    font-size: 1.2rem;
}

/* ============================================================
   MODAL RESULTADO - Verde (éxito) o Rojo (error)
   ============================================================ */
.modal-exito[b-2qbd67n47p] {
    background-color: #2E7D32;
}

.modal-error[b-2qbd67n47p] {
    background-color: #C62828;
}

/* ============================================================
   MODAL USUARIO (Alta/Edición) - Más ancho, fondo blanco
   ============================================================ */
.modal-usuario[b-2qbd67n47p] {
    max-width: 32rem;
    background-color: #FFFFFF;
}

.modal-usuario .modal-header[b-2qbd67n47p] {
    background-color: var(--color-cco);
}

.modal-usuario .modal-body[b-2qbd67n47p] {
    color: #333333;
    text-align: left;
    padding: 1.25rem;
}

.modal-usuario .modal-footer[b-2qbd67n47p] {
    background-color: #F5F5F5;
}

/* Botón cancelar (gris claro) */
.btn-cancelar-modal[b-2qbd67n47p] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-cancelar-modal:hover[b-2qbd67n47p] {
    background-color: #B0B0B0;
}

/* Botón guardar (morado CCO) */
.btn-guardar[b-2qbd67n47p] {
    background-color: var(--color-cco);
    color: white;
}

.btn-guardar:hover[b-2qbd67n47p] {
    background-color: #6a1b9a;
}

/* ============================================================
   FORMULARIO DENTRO DE MODAL USUARIO
   ============================================================ */
.form-grupo[b-2qbd67n47p] {
    margin-bottom: 1rem;
}

.form-grupo label[b-2qbd67n47p] {
    display: block;
    font-weight: bold;
    margin-bottom: 0.25rem;
    font-size: var(--texto-8pt);
    color: #333333;
}

.form-input[b-2qbd67n47p],
.form-select[b-2qbd67n47p] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: var(--texto-9pt);
}

.form-input:disabled[b-2qbd67n47p],
.form-select:disabled[b-2qbd67n47p] {
    background-color: #f5f5f5;
    color: #666;
}

.form-row-2col[b-2qbd67n47p] {
    display: flex;
    gap: 1rem;
}

.form-row-2col .form-grupo[b-2qbd67n47p] {
    flex: 1;
}

.checkbox-container[b-2qbd67n47p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.nota-campo[b-2qbd67n47p] {
    display: block;
    font-size: var(--texto-7pt);
    color: #856404;
    margin-top: 0.25rem;
}

.validation-error[b-2qbd67n47p] {
    color: #d32f2f;
    font-size: var(--texto-7pt);
    margin-top: 0.25rem;
}

.mensaje-error[b-2qbd67n47p] {
    background-color: #ffebee;
    border: 1px solid #d32f2f;
    color: #d32f2f;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: var(--texto-8pt);
    margin-top: 0.5rem;
}

/* ============================================================
   RESPONSIVE - Celulares
   ============================================================ */
@media (max-width: 768px) {
    /* Encabezado: ocultar desktop, mostrar móvil */
    .tabla-header[b-2qbd67n47p] {
        display: none;
    }

    .tabla-header-movil[b-2qbd67n47p] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: var(--color-cco);
        color: white;
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-radius: 4px 4px 0 0;
        margin-top: 0.5rem;
    }

    .tabla-header-movil .col-check[b-2qbd67n47p] {
        width: auto;
        margin-right: 0.5rem;
    }

    .tabla-header-movil .col-izq[b-2qbd67n47p] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-2qbd67n47p] {
        text-align: right;
    }

    /* Barra de filtros: flexbox con wrap */
    .barra-filtros[b-2qbd67n47p] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Cada línea es flex independiente */
    .filtros-linea[b-2qbd67n47p] {
        display: flex;
        width: 100%;
        gap: 0.25rem;
        align-items: center;
    }

    /* Item de usuario: CSS Grid para control total */
    .user-item[b-2qbd67n47p] {
        display: grid;
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.25rem 0.375rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* ═══ LÍNEA 1: Check + Email + Nombre ═══ */
    .col-check[b-2qbd67n47p] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
    }

    .col-email[b-2qbd67n47p] {
        grid-row: 1;
        grid-column: 2 / 5;
        width: auto;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .col-nombre[b-2qbd67n47p] {
        grid-row: 1;
        grid-column: 5;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

    /* ═══ LÍNEA 2: Depto + Puesto ═══ */
    .col-depto[b-2qbd67n47p] {
        grid-row: 2;
        grid-column: 2 / 5;
        width: auto;
        font-size: var(--texto-7pt);
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .col-puesto[b-2qbd67n47p] {
        grid-row: 2;
        grid-column: 5;
        width: auto;
        font-size: var(--texto-7pt);
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
    }

    /* ═══ LÍNEA 3: Perfil + Estatus (juntos a la izquierda) + Acciones ═══ */
    .col-perfil[b-2qbd67n47p] {
        grid-row: 3;
        grid-column: 2;
        width: auto;
    }

    .col-estatus[b-2qbd67n47p] {
        grid-row: 3;
        grid-column: 3;
        width: auto;
    }

    .col-acciones[b-2qbd67n47p] {
        grid-row: 3;
        grid-column: 5;
        width: auto;
        justify-content: flex-end;
    }

    /* Ajustar etiquetas para móvil */
    .col-perfil .etiqueta[b-2qbd67n47p],
    .col-estatus .etiqueta[b-2qbd67n47p] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }

    /* Modal usuario más compacto */
    .form-row-2col[b-2qbd67n47p] {
        flex-direction: column;
        gap: 0;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/UserDeleg.razor.rz.scp.css */
/*
   UserDeleg.razor.css
   Estilos para la página de administración de delegaciones.
   Diseño: Panel Usuarios (izq) | Panel Delega a (der)
*/

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-d1sfbjtklf] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE ACCIONES ===== */
.barra-acciones[b-d1sfbjtklf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #d4e8c7;
}

.filtro-depto-container[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-depto-container label[b-d1sfbjtklf] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.select-depto[b-d1sfbjtklf] {
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 10rem;
}

.busqueda-container[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busqueda-container label[b-d1sfbjtklf] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.input-busqueda[b-d1sfbjtklf] {
    width: 12rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buscar-en[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-buscar[b-d1sfbjtklf] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-9pt);
    cursor: pointer;
    white-space: nowrap;
}

.check-buscar input[type="checkbox"][b-d1sfbjtklf] {
    margin-right: 0.2rem;
    cursor: pointer;
}

.botones-accion[b-d1sfbjtklf] {
    display: flex;
    gap: 0.5rem;
}

.btn-buscar[b-d1sfbjtklf] {
    background-color: #6c757d;
    color: white;
}

.btn-buscar:hover[b-d1sfbjtklf] {
    background-color: #545b62;
}

.btn-consultar[b-d1sfbjtklf] {
    background-color: #007bff;
    color: white;
}

.btn-consultar:disabled[b-d1sfbjtklf] {
    background-color: #6cb2ff;
    color: #e8f4ff;
}

.btn-consultar:hover:not(:disabled)[b-d1sfbjtklf] {
    background-color: #0056b3;
}

.btn-modificar[b-d1sfbjtklf] {
    background-color: #8b0000;
    color: white;
}

.btn-modificar:disabled[b-d1sfbjtklf] {
    background-color: #c96060;
    color: #f5e0e0;
}

.btn-modificar:hover:not(:disabled)[b-d1sfbjtklf] {
    background-color: #5c0000;
}

.btn-grabar[b-d1sfbjtklf] {
    background-color: #28a745;
    color: white;
}

.btn-grabar:disabled[b-d1sfbjtklf] {
    background-color: #7dca91;
    color: #e8f5eb;
}

.btn-grabar:hover:not(:disabled)[b-d1sfbjtklf] {
    background-color: #1e7e34;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal[b-d1sfbjtklf] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    height: calc(100vh - 10rem);
    min-height: 25rem;
}

/* ===== PANEL USUARIOS (izquierda) ===== */
.panel-usuarios[b-d1sfbjtklf] {
    width: 50%;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.panel-header[b-d1sfbjtklf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--texto-10pt);
    background-color: #333;
    color: white;
}

.panel-body[b-d1sfbjtklf] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* ===== PANEL DELEGA A (derecha) ===== */
.panel-delega[b-d1sfbjtklf] {
    width: 50%;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

/* Items de usuarios */
.item-depto[b-d1sfbjtklf],
.item-usuario[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-depto:hover[b-d1sfbjtklf],
.item-usuario:hover[b-d1sfbjtklf] {
    background-color: #f0f0f0;
}

.checkbox-container[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-10pt);
    user-select: none;
}

.checkbox-container input[type="checkbox"][b-d1sfbjtklf] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    cursor: pointer;
}

.item-texto[b-d1sfbjtklf] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-size: var(--texto-10pt);
}

.depto-texto[b-d1sfbjtklf] {
    font-weight: normal;
    color: #888;
}

/* ===== FILTRO SOLO SELECCIONADOS ===== */
.filtro-seleccionados[b-d1sfbjtklf],
.filtro-delegados[b-d1sfbjtklf] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    cursor: pointer;
}

.filtro-seleccionados input[type="checkbox"][b-d1sfbjtklf],
.filtro-delegados input[type="checkbox"][b-d1sfbjtklf] {
    margin-right: 0.3rem;
    cursor: pointer;
}

/* Item usuario sin indentación (modo filtrado) */
.item-usuario-flat[b-d1sfbjtklf] {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-usuario-flat:hover[b-d1sfbjtklf] {
    background-color: #f0f0f0;
}

.sin-datos[b-d1sfbjtklf] {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    font-size: var(--texto-10pt);
}

/* Indentación por nivel */
.usuario-nivel-0[b-d1sfbjtklf] { padding-left: 0; }
.usuario-nivel-1[b-d1sfbjtklf] { padding-left: 1rem; }
.usuario-nivel-2[b-d1sfbjtklf] { padding-left: 2rem; }
.usuario-nivel-3[b-d1sfbjtklf] { padding-left: 3rem; }
.usuario-nivel-4[b-d1sfbjtklf] { padding-left: 4rem; }

/* ===== INDICADORES VISUALES ===== */
.indicador[b-d1sfbjtklf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.4rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 3px;
}

/* Indicador clickeable en modo edición */
.indicador.clickeable[b-d1sfbjtklf] {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, opacity 0.1s;
}

.indicador.clickeable:hover[b-d1sfbjtklf] {
    transform: scale(1.2);
    opacity: 0.8;
}

.indicador.clickeable:active[b-d1sfbjtklf] {
    transform: scale(0.95);
}

/* Paloma azul: Todos le delegan */
.paloma-azul[b-d1sfbjtklf] {
    background-color: #0056b3;
    color: #fff;
    font-weight: 900;
}

/* Bolita celeste: Algunos le delegan */
.bolita-celeste[b-d1sfbjtklf] {
    background-color: #5bc0de;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío */
.vacio[b-d1sfbjtklf] {
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

/* Vacío clickeable */
.indicador.clickeable.vacio:hover[b-d1sfbjtklf] {
    border-color: #007bff;
    background-color: #e8f4ff;
}

/* ===== INDICADORES PARA DEPARTAMENTOS (grises) ===== */
.indicador-depto[b-d1sfbjtklf] {
    opacity: 0.7;
}

/* Paloma gris: Todos los usuarios del depto tienen delegación */
.paloma-gris[b-d1sfbjtklf] {
    background-color: #6c757d;
    color: #fff;
    font-weight: 900;
}

/* Bolita gris: Algunos usuarios del depto tienen delegación */
.bolita-gris[b-d1sfbjtklf] {
    background-color: #adb5bd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Vacío gris para departamentos */
.vacio-gris[b-d1sfbjtklf] {
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
}

/* Vacío gris clickeable */
.indicador.clickeable.vacio-gris:hover[b-d1sfbjtklf] {
    border-color: #6c757d;
    background-color: #dee2e6;
}

/* ===== MODAL ===== */
.modal-overlay[b-d1sfbjtklf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-d1sfbjtklf] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
    overflow: hidden;
}

.modal-header[b-d1sfbjtklf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-cco);
    color: white;
}

.modal-header h3[b-d1sfbjtklf] {
    margin: 0;
    font-size: var(--texto-12pt);
}

.boton-x[b-d1sfbjtklf] {
    color: #ccc;
}

.boton-x:hover[b-d1sfbjtklf] {
    color: white;
}

.modal-body[b-d1sfbjtklf] {
    padding: 1rem;
    font-size: var(--texto-10pt);
}

.modal-body p[b-d1sfbjtklf] {
    margin: 0.5rem 0;
}

.modal-footer[b-d1sfbjtklf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.btn-cancelar[b-d1sfbjtklf] {
    background-color: #6c757d;
    color: white;
}

.btn-cancelar:hover[b-d1sfbjtklf] {
    background-color: #545b62;
}

.btn-confirmar[b-d1sfbjtklf] {
    background-color: #28a745;
    color: white;
}

.btn-confirmar:hover[b-d1sfbjtklf] {
    background-color: #1e7e34;
}

/* ===== MENSAJES ===== */
.mensaje[b-d1sfbjtklf] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje-exito[b-d1sfbjtklf] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error[b-d1sfbjtklf] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenedor-principal[b-d1sfbjtklf] {
        flex-direction: column;
        height: auto;
    }

    .panel-usuarios[b-d1sfbjtklf],
    .panel-delega[b-d1sfbjtklf] {
        width: 100%;
        max-height: 20rem;
    }

    .barra-acciones[b-d1sfbjtklf] {
        flex-direction: column;
        align-items: stretch;
    }

    .busqueda-container[b-d1sfbjtklf] {
        flex-wrap: wrap;
    }

    .input-busqueda[b-d1sfbjtklf] {
        width: 100%;
    }

    .botones-accion[b-d1sfbjtklf] {
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/UserPermisos.razor.rz.scp.css */
/*
   UserPermisos.razor.css
   Estilos para la página de administración de permisos.
   Diseño: Panel Usuarios | Grilla de Permisos (Deptos × Menús)
*/

/* Contenedor principal - pega a la barra del SiREI */
.contenedor-principal-sirei[b-72k6mnh87v] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE ACCIONES ===== */
.barra-acciones[b-72k6mnh87v] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #d4e8c7;
}

.filtro-depto-container[b-72k6mnh87v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filtro-depto-container label[b-72k6mnh87v] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.select-depto[b-72k6mnh87v] {
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 10rem;
}

.busqueda-container[b-72k6mnh87v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.busqueda-container label[b-72k6mnh87v] {
    font-weight: bold;
    font-size: var(--texto-9pt);             /* Tamaño 10pt */
}

.input-busqueda[b-72k6mnh87v] {
    width: 15rem;
    padding: 0.375rem 0.5rem;
    font-size: var(--texto-9pt);             /* Tamaño 10pt */
    border: 1px solid #ccc;
    border-radius: 4px;
}

.buscar-en[b-72k6mnh87v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-buscar[b-72k6mnh87v] {
    display: inline-flex;
    align-items: center;
    font-size: var(--texto-9pt);
    cursor: pointer;
    white-space: nowrap;
}

.check-buscar input[type="checkbox"][b-72k6mnh87v] {
    margin-right: 0.2rem;
    cursor: pointer;
}

.filtro-seleccionados[b-72k6mnh87v] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    font-size: var(--texto-9pt);
    font-weight: normal;
    cursor: pointer;
}

.filtro-seleccionados input[type="checkbox"][b-72k6mnh87v] {
    margin-right: 0.3rem;
    cursor: pointer;
}

.botones-accion[b-72k6mnh87v] {
    display: flex;
    gap: 0.5rem;
}

/* .boton usa la clase estándar de app.css (9pt) */
/* Las clases .btn-* definen solo los colores */

.btn-buscar[b-72k6mnh87v] {
    background-color: #6c757d;
    color: white;
}

.btn-buscar:hover[b-72k6mnh87v] {
    background-color: #545b62;
}

.btn-consultar[b-72k6mnh87v] {
    background-color: #007bff;
    color: white;
}

.btn-consultar:disabled[b-72k6mnh87v] {
    background-color: #6cb2ff;
    color: #e8f4ff;
}

.btn-consultar:hover:not(:disabled)[b-72k6mnh87v] {
    background-color: #0056b3;
}

.btn-modificar[b-72k6mnh87v] {
    background-color: #8b0000;
    color: white;
}

.btn-modificar:disabled[b-72k6mnh87v] {
    background-color: #c96060;
    color: #f5e0e0;
}

.btn-modificar:hover:not(:disabled)[b-72k6mnh87v] {
    background-color: #5c0000;
}

.btn-grabar[b-72k6mnh87v] {
    background-color: #28a745;
    color: white;
}

.btn-grabar:disabled[b-72k6mnh87v] {
    background-color: #7dca91;
    color: #e8f5eb;
}

.btn-grabar:hover:not(:disabled)[b-72k6mnh87v] {
    background-color: #1e7e34;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal[b-72k6mnh87v] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    height: calc(100vh - 10rem);
    min-height: 25rem;
}

/* ===== PANEL USUARIOS (izquierda) ===== */
.panel-usuarios[b-72k6mnh87v] {
    width: 18rem;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.panel-header[b-72k6mnh87v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    background-color: #333;
    color: white;
}

.panel-body[b-72k6mnh87v] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Items de usuarios */
.item-depto[b-72k6mnh87v],
.item-usuario[b-72k6mnh87v] {
    padding: 0.2rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.1rem;
}

.item-depto:hover[b-72k6mnh87v],
.item-usuario:hover[b-72k6mnh87v] {
    background-color: #f0f0f0;
}

.checkbox-container[b-72k6mnh87v] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    user-select: none;
}

.checkbox-container input[type="checkbox"][b-72k6mnh87v] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.4rem;
    cursor: pointer;
}

.item-texto[b-72k6mnh87v] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}

.depto-texto[b-72k6mnh87v] {
    font-weight: normal;
    color: #888;
}

.sin-datos[b-72k6mnh87v] {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== PANEL GRILLA (derecha) ===== */
.panel-grilla[b-72k6mnh87v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.grilla-container[b-72k6mnh87v] {
    overflow: auto;
    flex: 1;
}

/* ===== TABLA GRILLA ===== */
.grilla-permisos[b-72k6mnh87v] {
    border-collapse: collapse;
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    white-space: nowrap;
}

.grilla-permisos th[b-72k6mnh87v],
.grilla-permisos td[b-72k6mnh87v] {
    border: 1px solid #ddd;
    padding: 0.25rem 0.4rem;
    text-align: center;
}

.grilla-permisos thead[b-72k6mnh87v] {
    position: sticky;
    top: 0;
}

.grilla-permisos thead th[b-72k6mnh87v] {
    background-color: #f5f5f5;
}

/* Columna de departamento (fija a la izquierda) */
.col-depto[b-72k6mnh87v] {
    background-color: #fafafa;
    position: sticky;
    left: 0;
    min-width: 10rem;
    font-weight: normal;
}

/* Título de columna departamento: centrado */
.grilla-permisos thead th.col-depto[b-72k6mnh87v] {
    text-align: center;
}

/* Datos de columna departamento: alineados a la izquierda */
.grilla-permisos tbody td.col-depto[b-72k6mnh87v] {
    text-align: left;
}

/* Indentación por nivel - Grilla de permisos */
.grilla-permisos td.depto-nivel-0[b-72k6mnh87v] { padding-left: 0.4rem; }
.grilla-permisos td.depto-nivel-1[b-72k6mnh87v] { padding-left: 1.2rem; }
.grilla-permisos td.depto-nivel-2[b-72k6mnh87v] { padding-left: 2.0rem; }
.grilla-permisos td.depto-nivel-3[b-72k6mnh87v] { padding-left: 2.8rem; }
.grilla-permisos td.depto-nivel-4[b-72k6mnh87v] { padding-left: 3.6rem; }

/* Fila especial "Solo su información" (ID_Depto = 0) */
/* Solo la celda del nombre tiene fondo rojizo siempre */
.grilla-permisos tr.fila-solo-info td.col-depto[b-72k6mnh87v] {
    background-color: #ffe0e0;
    color: #8b0000;
}

/* Las celdas de permisos solo tienen color rojizo cuando están marcadas */
.grilla-permisos tr.fila-solo-info td.celda-todos-explicito[b-72k6mnh87v],
.grilla-permisos tr.fila-solo-info td.celda-algunos-explicito[b-72k6mnh87v] {
    background-color: #fc4949;
}

/* Indentación por nivel - Panel de usuarios */
.usuario-nivel-0[b-72k6mnh87v] { padding-left: 0; }
.usuario-nivel-1[b-72k6mnh87v] { padding-left: 1rem; }
.usuario-nivel-2[b-72k6mnh87v] { padding-left: 2rem; }
.usuario-nivel-3[b-72k6mnh87v] { padding-left: 3rem; }
.usuario-nivel-4[b-72k6mnh87v] { padding-left: 4rem; }

.grilla-permisos thead .col-depto[b-72k6mnh87v] {
    background-color: #e9e9e9;
    font-weight: bold;
}

/* Columnas de menú principal */
.col-menu-principal[b-72k6mnh87v] {
    color: white;
    font-weight: bold;
    cursor: pointer;
    min-width: 4rem;
    transition: opacity 0.2s;
}

.col-menu-principal:hover[b-72k6mnh87v] {
    opacity: 0.85;
}

.col-menu-principal.colapsado[b-72k6mnh87v] {
    min-width: 4rem;
}

.col-menu-principal.expandido[b-72k6mnh87v] {
    min-width: 3rem;
}

.menu-icon[b-72k6mnh87v] {
    font-size: 0.6rem;
    margin-right: 0.2rem;
}

/* Colores de menú principal - especificidad aumentada para ganar sobre thead th */
.grilla-permisos thead th.menu-color-panel[b-72k6mnh87v] { background-color: var(--color-panel); }
.grilla-permisos thead th.menu-color-reqs[b-72k6mnh87v] { background-color: var(--color-reqs); }
.grilla-permisos thead th.menu-color-encu[b-72k6mnh87v] { background-color: var(--color-encu); }
.grilla-permisos thead th.menu-color-eval[b-72k6mnh87v] { background-color: var(--color-eval); }
.grilla-permisos thead th.menu-color-tools[b-72k6mnh87v] { background-color: var(--color-tools); }
.grilla-permisos thead th.menu-color-minu[b-72k6mnh87v] { background-color: var(--color-minu); }
.grilla-permisos thead th.menu-color-cot[b-72k6mnh87v] { background-color: var(--color-coti); }
.grilla-permisos thead th.menu-color-cco[b-72k6mnh87v] { background-color: var(--color-cco); }

/* Columnas de submenú */
.col-submenu[b-72k6mnh87v] {
    background-color: #f8f8f8;
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    min-width: 3rem;
    max-width: 5rem;
    font-weight: normal;
}

/* Bordes de submenú por color de menú - especificidad aumentada */
.grilla-permisos thead th.submenu-color-panel[b-72k6mnh87v] { border-top: 3px solid var(--color-panel); }
.grilla-permisos thead th.submenu-color-reqs[b-72k6mnh87v] { border-top: 3px solid var(--color-reqs); }
.grilla-permisos thead th.submenu-color-encu[b-72k6mnh87v] { border-top: 3px solid var(--color-encu); }
.grilla-permisos thead th.submenu-color-eval[b-72k6mnh87v] { border-top: 3px solid var(--color-eval); }
.grilla-permisos thead th.submenu-color-tools[b-72k6mnh87v] { border-top: 3px solid var(--color-tools); }
.grilla-permisos thead th.submenu-color-minu[b-72k6mnh87v] { border-top: 3px solid var(--color-minu); }
.grilla-permisos thead th.submenu-color-cot[b-72k6mnh87v] { border-top: 3px solid var(--color-coti); }
.grilla-permisos thead th.submenu-color-cco[b-72k6mnh87v] { border-top: 3px solid var(--color-cco); }

.submenu-label[b-72k6mnh87v] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: horizontal-tb;
}

/* ===== CELDAS DE PERMISOS ===== */
.celda-check[b-72k6mnh87v] {
    padding: 0.15rem;
}

/* Celda principal vs submenu */
.celda-principal[b-72k6mnh87v] {
    /* fondo controlado por clases de estado */
}

.celda-submenu[b-72k6mnh87v] {
    /* fondo controlado por clases de estado */
}

/* ===== INDICADORES VISUALES (5 estados) ===== */
.indicador[b-72k6mnh87v] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}

/* Indicador clickeable en modo edición */
.indicador.clickeable[b-72k6mnh87v] {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, opacity 0.1s;
}

.indicador.clickeable:hover[b-72k6mnh87v] {
    transform: scale(1.2);
    opacity: 0.8;
}

.indicador.clickeable:active[b-72k6mnh87v] {
    transform: scale(0.95);
}

/* Indicador vacío clickeable - mostrar placeholder */
.indicador.clickeable.vacio[b-72k6mnh87v] {
    border: 1px dashed #ccc;
    border-radius: 3px;
    opacity: 0.5;
}

.indicador.clickeable.vacio:hover[b-72k6mnh87v] {
    border-color: #007bff;
    opacity: 1;
}

/* Paloma azul: Todos tienen permiso explícito - blanca (celda tiene fondo) */
.paloma-azul[b-72k6mnh87v] {
    color: #fff;
    font-weight: 900;
}

/* Bolita celeste: Algunos tienen explícito - blanca (celda tiene fondo) */
.bolita-celeste[b-72k6mnh87v] {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
}

/* Paloma gris: Todos tienen permiso heredado */
.paloma-gris[b-72k6mnh87v] {
    color: #999;
}

/* Bolita gris: Algunos tienen heredado, otros no */
.bolita-gris[b-72k6mnh87v] {
    color: #aaa;
    font-size: 0.7rem;
}

/* Vacío */
.vacio[b-72k6mnh87v] {
    color: transparent;
}

/* Clases de celda para estados */
.celda-todos-explicito[b-72k6mnh87v] {
    background-color: #0056b3;
}

.celda-algunos-explicito[b-72k6mnh87v] {
    background-color: #5bc0de;
}

.celda-todos-heredado[b-72k6mnh87v],
.celda-algunos-heredado[b-72k6mnh87v] {
    background-color: #f8f8f8;
}

.celda-vacio[b-72k6mnh87v] {
    background-color: #fff;
}

/* ===== MODAL ===== */
.modal-overlay[b-72k6mnh87v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-contenedor[b-72k6mnh87v] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 25rem;
    width: 90%;
    overflow: hidden;
}

.modal-header[b-72k6mnh87v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--color-cco);
    color: white;
}

.modal-header h3[b-72k6mnh87v] {
    margin: 0;
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
}

/* .boton-x usa la clase estándar de app.css, solo cambia colores para fondo oscuro */
.boton-x[b-72k6mnh87v] {
    color: #ccc;
}

.boton-x:hover[b-72k6mnh87v] {
    color: white;
}

.modal-body[b-72k6mnh87v] {
    padding: 1rem;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.modal-body p[b-72k6mnh87v] {
    margin: 0.5rem 0;
}

.cambio-agregar[b-72k6mnh87v] {
    color: #28a745;
    font-weight: bold;
}

.cambio-quitar[b-72k6mnh87v] {
    color: #dc3545;
    font-weight: bold;
}

.modal-footer[b-72k6mnh87v] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.btn-cancelar[b-72k6mnh87v] {
    background-color: #6c757d;
    color: white;
}

.btn-cancelar:hover[b-72k6mnh87v] {
    background-color: #545b62;
}

.btn-confirmar[b-72k6mnh87v] {
    background-color: #28a745;
    color: white;
}

.btn-confirmar:hover[b-72k6mnh87v] {
    background-color: #1e7e34;
}

/* ===== MENSAJES ===== */
.mensaje[b-72k6mnh87v] {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje-exito[b-72k6mnh87v] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error[b-72k6mnh87v] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .contenedor-principal[b-72k6mnh87v] {
        flex-direction: column;
        height: auto;
    }

    .panel-usuarios[b-72k6mnh87v] {
        width: 100%;
        max-height: 15rem;
    }

    .panel-grilla[b-72k6mnh87v] {
        min-height: 20rem;
    }

    .barra-acciones[b-72k6mnh87v] {
        flex-direction: column;
        align-items: stretch;
    }

    .filtro-depto-container[b-72k6mnh87v] {
        width: 100%;
    }

    .select-depto[b-72k6mnh87v] {
        flex: 1;
    }

    .busqueda-container[b-72k6mnh87v] {
        flex-wrap: wrap;
        width: 100%;
    }

    .input-busqueda[b-72k6mnh87v] {
        flex: 1;
    }

    .botones-accion[b-72k6mnh87v] {
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/10CCO/VerificaHistEstatus.razor.rz.scp.css */
/* VerificaHistEstatus.razor.css */

.encabezado-verifica[b-04i84hejim] {
    margin-bottom: 1rem;
}

.encabezado-verifica h2[b-04i84hejim] {
    font-size: var(--texto-14pt, 1.05rem);
    margin: 0;
    color: var(--color-cco, #548C2E);
}

.subtitulo[b-04i84hejim] {
    font-size: var(--texto-9pt, 0.7rem);
    color: #888;
    margin: 0.2rem 0 0 0;
}

/* ---- Botones ---- */
.barra-acciones[b-04i84hejim] {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.boton-mediano[b-04i84hejim] {
    padding: 0.4rem 1.5rem;
    border-radius: 4px;
    font-size: var(--texto-10pt);
}

.boton-verificar[b-04i84hejim] {
    background-color: var(--color-cco, #548C2E);
    color: white;
    border: none;
    cursor: pointer;
}

.boton-verificar:hover[b-04i84hejim] {
    background-color: #3d6a1f;
}

.boton-corregir[b-04i84hejim] {
    background-color: var(--color-cco, #548C2E);
    color: white;
    border: none;
    cursor: pointer;
}

.boton-corregir:hover[b-04i84hejim] {
    background-color: #3d6a1f;
}

/* ---- Spinner ---- */
.procesando-area[b-04i84hejim] {
    text-align: center;
    padding: 2rem;
}

.procesando-area p[b-04i84hejim] {
    margin-top: 0.8rem;
    color: #666;
    font-size: var(--texto-10pt, 0.75rem);
}

/* ---- Resumen ---- */
.resumen-panel[b-04i84hejim] {
    padding: 0.8rem 1rem;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
}

.resumen-ok[b-04i84hejim] {
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
}

.resumen-error[b-04i84hejim] {
    background-color: #fce4ec;
    border-left: 4px solid #e53935;
}

.resumen-correccion[b-04i84hejim] {
    background-color: #e3f2fd;
    border-left: 4px solid #1976d2;
}

.resumen-titulo[b-04i84hejim] {
    font-size: var(--texto-11pt, 0.85rem);
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.resumen-detalle[b-04i84hejim] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ---- Chips ---- */
.chip[b-04i84hejim] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0.8rem;
    font-size: var(--texto-9pt, 0.7rem);
    font-weight: bold;
    color: white;
}

.chip-faltante[b-04i84hejim] { background-color: #ff9800; }
.chip-incorrecto[b-04i84hejim] { background-color: #e53935; }
.chip-sobrante[b-04i84hejim] { background-color: #757575; }
.chip-entiempo[b-04i84hejim] { background-color: #1565c0; }

.chip-mini[b-04i84hejim] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.6rem;
    font-size: var(--texto-8pt, 0.6rem);
    font-weight: bold;
    color: white;
}

/* ---- Leyenda ---- */
.leyenda-tabla[b-04i84hejim] {
    font-size: var(--texto-9pt, 0.7rem);
    color: #555;
    margin-bottom: 0.5rem;
}

.leyenda-tabla p[b-04i84hejim] {
    margin: 0.1rem 0;
}

/* ---- Tabla ---- */
.tabla-contenedor[b-04i84hejim] {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 0.3rem;
}

.tabla-discrepancias[b-04i84hejim] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-9pt, 0.7rem);
}

.tabla-discrepancias thead[b-04i84hejim] {
    position: sticky;
    top: 0;
}

.tabla-discrepancias th[b-04i84hejim] {
    background-color: var(--color-cco, #548C2E);
    color: white;
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: var(--texto-9pt, 0.7rem);
}

.tabla-discrepancias td[b-04i84hejim] {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #eee;
}

.col-req[b-04i84hejim] {
    font-weight: bold;
}

.fila-faltante[b-04i84hejim] { background-color: #fff8e1; }
.fila-incorrecto[b-04i84hejim] { background-color: #ffebee; }
.fila-sobrante[b-04i84hejim] { background-color: #f5f5f5; }
.fila-entiempo[b-04i84hejim] { background-color: #e3f2fd; }

/* ---- Mini estatus ---- */
.mini-estatus[b-04i84hejim] {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-size: var(--texto-8pt, 0.6rem);
    white-space: nowrap;
}

.est-5[b-04i84hejim]  { color: #990066; }
.est-10[b-04i84hejim] { color: #808080; }
.est-20[b-04i84hejim] { color: var(--color-home, #008000); }
.est-30[b-04i84hejim] { color: var(--color-home, #008000); font-style: italic; }
.est-40[b-04i84hejim] { color: #C00000; }
.est-50[b-04i84hejim] { background-color: #00C000; color: white; }
.est-80[b-04i84hejim] { background-color: #FF0000; color: white; }
.est-90[b-04i84hejim] { color: #FF0000; }

/* ---- Mini EnTiempo ---- */
.mini-et[b-04i84hejim] {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-size: var(--texto-8pt, 0.6rem);
    font-weight: bold;
    white-space: nowrap;
}

.et-0[b-04i84hejim] { color: #00C000; }
.et-1[b-04i84hejim] { color: #666; }
.et-2[b-04i84hejim] { color: #FF0000; }

.sin-dato[b-04i84hejim] {
    color: #ccc;
}

/* ---- Mensaje inicial ---- */
.mensaje-inicial[b-04i84hejim] {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.mensaje-inicial p[b-04i84hejim] {
    margin: 0.3rem 0;
}

.nota[b-04i84hejim] {
    font-size: var(--texto-8pt, 0.6rem);
    font-style: italic;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatActividades.razor.rz.scp.css */
/*
   CatActividades.razor.css
   Estilos isolated del catálogo de Actividades.
   Reusa .contenedor-principal-sirei, .barra-filtros, .boton-chico, .no-resultados de app.css.
*/

/* Pega la barra de filtros al topbar (mismo patrón que UserABC en CCO) */
.contenedor-principal-sirei[b-glpj94jv17] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE FILTROS — color claro del Cotizador ===== */
.cot-filtros[b-glpj94jv17] {
    background-color: var(--color-coti-claro);   /* Azul claro del módulo */
}

/* Cada grupo de filtro es transparente en PC (sus hijos fluyen en la barra flex) */
.filtros-linea[b-glpj94jv17] {
    display: contents;
}

.filtros-relleno[b-glpj94jv17] {
    flex: 1;
}

/* ===== BOTÓN NUEVO ===== */
.cot-boton-nuevo[b-glpj94jv17] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-nuevo:hover[b-glpj94jv17] {
    background-color: #1B5E20;
}

/* ===== CONTADOR ===== */
.cot-contador[b-glpj94jv17] {
    text-align: right;
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.25rem 0.5rem;
    background-color: #FAFAFA;
}

/* ===== ENCABEZADO DE TABLA (DESKTOP) ===== */
.tabla-header[b-glpj94jv17] {
    display: flex;
    align-items: center;
    padding: 0.31rem 0.5rem;
    background-color: #F0F0F0;                /* Gris muy claro (header de catálogo) */
    color: #696969;                           /* Gris medio */
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;         /* Línea separadora gris */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba (cierra la caja con .lista) */
    margin-top: 0.5rem;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-glpj94jv17] {
    display: none;
}

/* ===== LISTA Y FILAS ===== */
.lista[b-glpj94jv17] {
    border: 1px solid var(--color-border);   /* Caja Arquetipo 1 (igual a Artículos/Kits) */
    border-top: none;                         /* El borde superior lo da el header */
    border-radius: 0 0 0.25rem 0.25rem;       /* Esquinas redondeadas abajo (cierra la caja) */
    background-color: #FFFFFF;                /* Fondo blanco */
    font-size: var(--texto-9pt);
}

.fila-item[b-glpj94jv17] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;         /* Línea entre filas */
    transition: background-color 0.15s;
}

.fila-item:last-child[b-glpj94jv17] {
    border-bottom: none;
}

/* Filas hijas: fondo distinto para reforzar la jerarquía padre/hija */
.fila-item.fila-hija[b-glpj94jv17] {
    background-color: #FAFAFA;                /* Gris casi blanco */
}

/* En modo selector la fila es clickeable */
.fila-item.fila-seleccionable[b-glpj94jv17] {
    cursor: pointer;
}

.fila-item.fila-seleccionable:hover[b-glpj94jv17] {
    background-color: #E3F2FD;                /* Azul muy claro al pasar el mouse */
}

.fila-item:not(.fila-seleccionable):hover[b-glpj94jv17] {
    background-color: #F8F9FA;                /* Gris muy claro al pasar el mouse */
}

/* Filas de actividades inactivas (baja lógica) */
.fila-item.fila-inactiva[b-glpj94jv17] {
    opacity: 0.6;
}

/* ===== COLUMNAS (anchos en % que suman ~100) ===== */
.col-num[b-glpj94jv17] {
    width: 4%;
    text-align: center;
}

.col-codigo[b-glpj94jv17] {
    width: 10%;
    font-family: var(--fuente-codigos);       /* Monoespaciado para códigos */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-actividad[b-glpj94jv17] {
    width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-tipo[b-glpj94jv17] {
    width: 10%;
}

.col-tiempo[b-glpj94jv17] {
    width: 8%;
}

.col-unidad[b-glpj94jv17] {
    width: 9%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-proyecto[b-glpj94jv17] {
    width: 10%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-tarifa[b-glpj94jv17] {
    width: 9%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-datos[b-glpj94jv17] {
    width: 9%;
}

.col-estatus[b-glpj94jv17] {
    width: 8%;
    text-align: center;
}

.col-acciones[b-glpj94jv17] {
    width: 6%;
    white-space: nowrap;
    display: flex;
    gap: 0.25rem;
}

/* ===== JERARQUÍA PADRE/HIJA (celda Actividad) ===== */
.celda-padre[b-glpj94jv17] {
    font-weight: bold;
}

.celda-hija[b-glpj94jv17] {
    padding-left: 1.5rem;                     /* Sangría que marca la sub-actividad */
    font-weight: normal;
}

.prefijo-hijo[b-glpj94jv17] {
    color: #999999;                           /* Gris claro para el prefijo ". ." */
}

.celda-unidad[b-glpj94jv17] {
    font-size: var(--texto-8pt);
    color: #555555;                           /* Gris medio */
}

.celda-datos-reales[b-glpj94jv17] {
    font-size: var(--texto-8pt);
    color: #696969;                           /* Gris medio */
}

/* ===== ETIQUETAS DE TIPO (productivo / no productivo) ===== */
.tag-productivo[b-glpj94jv17] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.tag-no-productivo[b-glpj94jv17] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: #E8820C;
    color: #FFFFFF;
}

/* ===== BOTÓN REACTIVAR (✓ verde, solo visible en filas inactivas) ===== */
.cot-boton-reactivar[b-glpj94jv17] {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: var(--texto-10pt);
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.cot-boton-reactivar:hover[b-glpj94jv17] {
    color: #1B5E20;
}

/* ============================================================
   RESPONSIVE - Celulares (Arquetipo 1: flex → grid de líneas)
   La jerarquía padre/hija se conserva: la fila-hija lleva sangría
   y un borde de acento a la izquierda (no se aplana a lista plana).
   ============================================================ */
@media (max-width: 768px) {

    /* 1) Encabezado: ocultar el de columnas, mostrar el de izq/der */
    .tabla-header[b-glpj94jv17] {
        display: none;
    }

    .tabla-header-movil[b-glpj94jv17] {
        display: flex;
        align-items: center;
        padding: 0.31rem 0.5rem;
        background-color: #F0F0F0;            /* Gris muy claro (header de catálogo) */
        color: #696969;                       /* Gris medio */
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-bottom: 1px solid #E0E0E0;     /* Línea separadora gris */
        border-radius: 0.25rem 0.25rem 0 0;   /* Esquinas redondeadas arriba (cierra la caja con .lista) */
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-glpj94jv17] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-glpj94jv17] {
        text-align: right;
    }

    /* 2) Barra de filtros: cada grupo pasa a flex de ancho completo */
    .barra-filtros[b-glpj94jv17] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .filtros-linea[b-glpj94jv17] {
        display: flex;          /* de contents -> flex */
        width: 100%;            /* fuerza salto de línea por grupo */
        gap: 0.25rem;
        align-items: center;
    }

    /* 3) La fila: de flex a grid de 4 renglones por registro (10 columnas densas) */
    .fila-item[b-glpj94jv17] {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* Jerarquía padre/hija en móvil: la fila-hija se sangra y lleva un
       borde de acento a la izquierda para que se lea como sub-actividad */
    .fila-item.fila-hija[b-glpj94jv17] {
        padding-left: 1.25rem;                /* Sangría de la sub-actividad */
        border-left: 0.1875rem solid var(--color-coti-claro);   /* Acento azul claro */
    }

    /* ── LÍNEA 1: # + Actividad + Estatus ── */
    .col-num[b-glpj94jv17] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-actividad[b-glpj94jv17] {
        grid-row: 1;
        grid-column: 2 / 4;
        width: auto;
    }

    .col-estatus[b-glpj94jv17] {
        grid-row: 1;
        grid-column: 4;
        width: auto;
        text-align: right;
    }

    /* ── LÍNEA 2: Código + Tipo + Tiempo + Acciones ── */
    .col-codigo[b-glpj94jv17] {
        grid-row: 2;
        grid-column: 1 / 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-tipo[b-glpj94jv17] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
    }

    .col-acciones[b-glpj94jv17] {
        grid-row: 2;
        grid-column: 4;
        width: auto;
        justify-content: flex-end;
    }

    /* ── LÍNEA 3: Tiempo + Unidad + Proyecto (metadatos secundarios) ── */
    .col-tiempo[b-glpj94jv17] {
        grid-row: 3;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-unidad[b-glpj94jv17] {
        grid-row: 3;
        grid-column: 2;
        width: auto;
    }

    .col-proyecto[b-glpj94jv17] {
        grid-row: 3;
        grid-column: 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    /* ── LÍNEA 4: Tarifa + Datos Reales (metadatos secundarios) ── */
    .col-tarifa[b-glpj94jv17] {
        grid-row: 4;
        grid-column: 1 / 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-datos[b-glpj94jv17] {
        grid-row: 4;
        grid-column: 3 / 5;
        width: auto;
        text-align: right;
    }

    /* En móvil la sangría de celda-hija ya la da el borde de fila; se anula la del desktop */
    .celda-hija[b-glpj94jv17] {
        padding-left: 0;
    }

    /* Etiqueta de estatus más compacta */
    .col-estatus .etiqueta[b-glpj94jv17] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatArticulosDetalle.razor.rz.scp.css */
/*
   CatArticulosDetalle.razor.css
   Misma estética que CatArticulosLista:
     - .contenedor-principal-sirei pegado al topbar (padding-top:0)
     - .fijador + .barra-filtros .cot-filtros con el mensaje de estado + [Guardar]
     - Tabla de 1 fila con el header idéntico al de la lista (SKU/Desc/Cat/Prov/Costo/Fecha/Estatus)
     - Bloque .cad-extras debajo con campos que no están en la lista (Unidad, Desc. Cliente)
     - 3 acordeones con tamaño de letra homologado a la tabla
*/

/* Pega la barra de filtros al topbar (mismo patrón que la lista) */
.contenedor-principal-sirei[b-62icgw7h3g] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Wrapper cuando el componente vive embebido en un modal (ModalArticuloDetalle).
   Sin chrome — el modal ya provee fondo y padding. Permite que la barra de
   filtros / acordeones ocupen todo el ancho del modal y haga scroll vertical. */
.contenedor-embebido[b-62icgw7h3g] {
    padding: 0 1rem 1rem 1rem;
    overflow-y: auto;
    height: 100%;
    background-color: #FFFFFF;
}

/* ===== BARRA DE FILTROS (misma del listado, color claro Cotizador) ===== */
.cot-filtros[b-62icgw7h3g] {
    background-color: var(--color-coti-claro);
}

.filtros-relleno[b-62icgw7h3g] {
    flex: 1;
}

.cot-boton-guardar[b-62icgw7h3g] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-guardar:hover[b-62icgw7h3g] {
    background-color: #1B5E20;
}

/* Mensaje "✓ Cambios guardados" a la izquierda del botón Guardar.
   Se enciende tras un guardado exitoso (header, proveedor o quitar proveedor). */
.cad-mensaje-guardado[b-62icgw7h3g] {
    color: #2E7D32;
    font-size: var(--texto-9pt);
    font-weight: bold;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Mensaje "⚠ Cambios SIN guardar" en rojo — alerta cuando el usuario editó
   un campo del header pero aún no presionó Guardar. Comparación contra
   snapshot original (cambio real, no solo "tocó algo"). */
.cad-mensaje-sin-guardar[b-62icgw7h3g] {
    color: #C62828;
    font-size: var(--texto-9pt);
    font-weight: bold;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* ===== HEADER DEL ARTÍCULO — grid <div> (Arq.5, vara SecPuntosCctv) =====
   NO <table>, NO overflow-x. Encabezado + fila comparten el mismo grid en
   desktop; en ≤768px el encabezado se oculta y la fila colapsa a tarjeta. */
.cad-tabla[b-62icgw7h3g] {
    width: 100%;
    margin-top: 0.625rem;        /* despega del fijador */
    margin-bottom: 0.5rem;
    font-size: var(--texto-9pt);
}

.cad-thead[b-62icgw7h3g],
.cad-fila[b-62icgw7h3g] {
    display: grid;
    grid-template-columns:
        minmax(6rem, 0.9fr)    /* SKU */
        minmax(7rem, 1fr)      /* SKU Asercom */
        minmax(9rem, 1.6fr)    /* Descripción */
        minmax(6rem, 0.9fr)    /* Categoría */
        minmax(6rem, 0.9fr)    /* Proveedores */
        minmax(5rem, 0.7fr)    /* Costo Pref. */
        minmax(5rem, 0.7fr)    /* Últ. Act. */
        minmax(5rem, 0.7fr);   /* Estatus */
    gap: 0.5rem;
    align-items: center;
    padding: 0.31rem 0.5rem;
}

.cad-thead[b-62icgw7h3g] {
    background-color: #F0F0F0;
    color: #696969;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;
}

.cad-fila[b-62icgw7h3g] {
    border-bottom: 1px solid #EEEEEE;
    background-color: #FFFFFF;
}

.cad-celda[b-62icgw7h3g] {
    min-width: 0;
    overflow-wrap: break-word;
}

.col-sku[b-62icgw7h3g] {
    font-weight: bold;
    color: var(--color-coti);
}

.celda-pequena[b-62icgw7h3g] {
    font-size: var(--texto-8pt);
    color: #555555;
}

/* ===== TEXTO PLANO (modo Ver) =====
   Reemplaza a los inputs en modo Ver: mismo padding, mismo font-size, border
   transparente — el alto y ancho ocupado son idénticos al input para que el
   toggle Ver↔Editar no produzca layout shift visible. */
.cad-texto-plano[b-62icgw7h3g] {
    display: inline-block;
    padding: 0.15rem 0.35rem;
    border: 1px solid transparent;
    font-size: var(--texto-9pt);
    color: #000000;
    box-sizing: border-box;
    line-height: 1.4;
}

/* SKU en modo Ver — mismo estilo monospace bold azul que el input editable. */
.cad-texto-plano-sku[b-62icgw7h3g] {
    font-weight: bold;
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
}

/* Campo vacío (descripción, categoría, unidad o desc. cliente sin valor) —
   se muestra como guión largo gris itálica (patrón "—" estándar SiREI). */
.cad-texto-plano-vacio[b-62icgw7h3g] {
    color: #999999;
    font-style: italic;
}

/* Celda editable (inputs dentro de la tabla) — mismo tamaño de letra que las celdas */
.celda-input[b-62icgw7h3g] {
    width: 100%;
    padding: 0.15rem 0.35rem;
    border: 1px solid #C0C0C0;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.celda-input-sku[b-62icgw7h3g] {
    font-weight: bold;
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
}

.celda-input:focus[b-62icgw7h3g] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.celda-select[b-62icgw7h3g] {
    width: 100%;
    padding: 0.15rem 0.35rem;
    border: 1px solid #C0C0C0;
    font-size: var(--texto-8pt);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

/* Etiqueta naranja "Revisar" */
.etiqueta-revisar[b-62icgw7h3g] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    margin-left: 0.25rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: #E8820C;
    color: #FFFFFF;
}

/* ===== BLOQUE EXTRAS (Unidad + Desc. Cliente) — campos que no están en la lista ===== */
.cad-extras[b-62icgw7h3g] {
    display: flex;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.625rem;
    background-color: #FAFAFA;
    font-size: var(--texto-9pt);
    align-items: center;
}

.cad-extra-campo[b-62icgw7h3g] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cad-extra-campo-cliente[b-62icgw7h3g] {
    flex: 1;
}

.cad-extra-label[b-62icgw7h3g] {
    color: #696969;
    font-size: var(--texto-8pt);
    white-space: nowrap;
}

.cad-extra-input[b-62icgw7h3g] {
    flex: 1;
    padding: 0.15rem 0.35rem;
    border: 1px solid #C0C0C0;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
}

.cad-extra-input-chico[b-62icgw7h3g] {
    width: 12rem;
    flex: 0 0 auto;
}

.cad-extra-input:focus[b-62icgw7h3g] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

/* ===== GRIDS DE LOS ACORDEONES (Proveedores, Kits, Historial) — Arq.5 =====
   <div> grid (NO <table>, NO overflow-x). Encabezado + filas comparten el mismo
   grid en desktop; en ≤768px el encabezado se oculta y cada fila colapsa a tarjeta
   con data-rotulo. minmax(..,1fr) deja que el grid se comprima para caber sin scroll. */
.cad-grid[b-62icgw7h3g] {
    width: 100%;
    background-color: #FFFFFF;
    font-size: var(--texto-9pt);
}

.cad-ghead[b-62icgw7h3g],
.cad-grow[b-62icgw7h3g] {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.cad-ghead[b-62icgw7h3g] {
    background-color: #F0F0F0;
    color: #696969;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;
}

.cad-grow[b-62icgw7h3g] {
    border-bottom: 1px solid #EEEEEE;
}

.gcelda[b-62icgw7h3g] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Mensaje "sin datos": ocupa todo el ancho del grid. */
.cad-grow-vacio[b-62icgw7h3g] {
    padding: 0.5rem 0.625rem;
}

/* ── PROVEEDORES: 7 columnas (Ver) u 8 (Editar, con Acciones) ── */
.cad-grid-prov-ver .cad-ghead[b-62icgw7h3g],
.cad-grid-prov-ver .cad-grow[b-62icgw7h3g] {
    grid-template-columns:
        minmax(8rem, 1.6fr)   /* Proveedor */
        minmax(6rem, 1fr)     /* SKU Proveedor */
        minmax(5rem, 0.8fr)   /* Costo */
        minmax(5rem, 0.7fr)   /* Días entrega */
        minmax(6rem, 0.8fr)   /* Fecha Act. */
        minmax(4rem, 0.5fr)   /* Preferido */
        minmax(6rem, 1fr);    /* URL Ref. */
}

.cad-grid-prov-edit .cad-ghead[b-62icgw7h3g],
.cad-grid-prov-edit .cad-grow[b-62icgw7h3g] {
    grid-template-columns:
        minmax(7rem, 1.5fr)   /* Proveedor */
        minmax(5rem, 1fr)     /* SKU Proveedor */
        minmax(5rem, 0.8fr)   /* Costo */
        minmax(4rem, 0.6fr)   /* Días entrega */
        minmax(6rem, 0.8fr)   /* Fecha Act. */
        minmax(4rem, 0.5fr)   /* Preferido */
        minmax(5rem, 0.9fr)   /* URL Ref. */
        5rem;                 /* Acciones */
}

/* ── USADO EN KITS: 3 columnas ── */
.cad-grid-kits .cad-ghead[b-62icgw7h3g],
.cad-grid-kits .cad-grow[b-62icgw7h3g] {
    grid-template-columns:
        minmax(7rem, 0.8fr)   /* Código Kit */
        minmax(10rem, 2fr)    /* Nombre */
        minmax(6rem, 0.6fr);  /* Cant. por kit */
}

/* ── HISTORIAL: 5 columnas ── */
.cad-grid-hist .cad-ghead[b-62icgw7h3g],
.cad-grid-hist .cad-grow[b-62icgw7h3g] {
    grid-template-columns:
        minmax(6rem, 0.9fr)   /* Fecha */
        minmax(8rem, 1.4fr)   /* Proveedor */
        minmax(5rem, 0.8fr)   /* Anterior */
        minmax(5rem, 0.8fr)   /* Nuevo */
        minmax(5rem, 0.7fr);  /* Variación */
}

.gp-acc[b-62icgw7h3g] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    white-space: nowrap;
}

.gp-pref[b-62icgw7h3g] {
    text-align: center;
    color: #E8820C;
    font-size: var(--texto-11pt);
}

.celda-proveedor[b-62icgw7h3g] {
    font-weight: bold;
}

.celda-url[b-62icgw7h3g] {
    font-size: var(--texto-8pt);
    color: #4A90D9;
    text-decoration: underline;
    cursor: pointer;
}

.celda-codigo-kit[b-62icgw7h3g] {
    font-family: var(--fuente-codigos);
    color: var(--color-coti);
    font-size: var(--texto-8pt);
    font-weight: bold;
}

/* Pie del acordeón con botón [+ Agregar...] */
.acordeon-pie-acciones[b-62icgw7h3g] {
    padding: 0.375rem 0.5rem;
    text-align: left;
}

.cot-boton-agregar[b-62icgw7h3g] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.cot-boton-agregar:hover[b-62icgw7h3g] {
    background-color: var(--color-coti-oscuro);
}

/* Variación del historial */
.var-positiva[b-62icgw7h3g] {
    color: #CC0000;
    font-weight: bold;
}

.var-negativa[b-62icgw7h3g] {
    color: #2E7D32;
    font-weight: bold;
}

/* ===== HOMOLOGACIÓN DE TÍTULOS DE LOS ACORDEONES =====
   Por defecto el Acordeon.razor.css pone el título a 11pt — más grande que la
   tabla y los inputs. Eso hace que los acordeones "sobresalgan" más que el
   contenido editable. Bajamos el título a 10pt y el count a 8pt para que
   visualmente se sientan al mismo nivel que el header del artículo.
   ::deep es necesario porque el Acordeon es un componente con scope CSS propio.
*/
[b-62icgw7h3g] .acordeon-titulo {
    font-size: var(--texto-9pt);
}

[b-62icgw7h3g] .acordeon-count {
    font-size: var(--texto-7pt);
    font-weight: normal;
}

[b-62icgw7h3g] .acordeon-header {
    padding: 0.25rem 0.5rem;
}

[b-62icgw7h3g] .acordeon-flecha {
    font-size: var(--texto-7pt);
}

/* ===== VALIDACIONES ===== */
.cad-error-duplicado[b-62icgw7h3g] {
    background-color: #FFEBEE;
    border-left: 3px solid #C62828;
    color: #6B0000;
    padding: 0.5rem 0.625rem;
    margin: 0.25rem 0 0.5rem 0;
    font-size: var(--texto-9pt);
}

/* ===== MODAL QUITAR PROVEEDOR ===== */
.modal-overlay[b-62icgw7h3g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-62icgw7h3g] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-quitar-prov[b-62icgw7h3g] {
    background-color: #FFFFFF;
}

.modal-quitar-prov .modal-header[b-62icgw7h3g] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-quitar-prov .modal-header h3[b-62icgw7h3g] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-62icgw7h3g] .modal-quitar-prov .modal-header .boton-x {
    color: #FFFFFF;
}

[b-62icgw7h3g] .modal-quitar-prov .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.modal-quitar-prov .modal-body[b-62icgw7h3g] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-62icgw7h3g] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.proveedor-titulo[b-62icgw7h3g] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
    word-break: break-word;
}

.mensaje-advertencia[b-62icgw7h3g] {
    background-color: #FFF4E5;
    border-left: 3px solid #E8820C;
    color: #6B4500;
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

.mensaje-info[b-62icgw7h3g] {
    color: #696969;
    font-size: var(--texto-8pt);
    margin: 0;
    font-style: italic;
}

.modal-quitar-prov .modal-footer[b-62icgw7h3g] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-cancelar-modal[b-62icgw7h3g] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-desactivar-modal[b-62icgw7h3g] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-desactivar-modal:hover[b-62icgw7h3g] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE — reflow a tarjeta (Arq.5, cero scroll horizontal) ===== */
@media (max-width: 768px) {

    /* Barra de filtros: la base .barra-filtros (app.css) ya es flex-wrap.
       El spacer empuja la leyenda + [Guardar] a la derecha; en móvil fuerza el
       salto para que bajen a su propia línea sin comprimirse. */
    .filtros-relleno[b-62icgw7h3g] {
        flex-basis: 100%;        /* fuerza salto: la leyenda+botón bajan de línea */
    }

    /* ── Header del artículo: el encabezado de columnas fuera; la fila colapsa a
          tarjeta con rejilla uniforme. Cada celda muestra su rótulo (data-rotulo). ── */
    .cad-thead[b-62icgw7h3g] {
        display: none;
    }
    .cad-fila[b-62icgw7h3g] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }
    .cad-celda[b-62icgw7h3g] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .cad-celda[b-62icgw7h3g]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }
    /* SKU (título), SKU Asercom y Descripción ocupan renglón completo. */
    .cad-fila .col-sku[b-62icgw7h3g],
    .cad-fila .col-skuaser[b-62icgw7h3g],
    .cad-fila .col-desc[b-62icgw7h3g] {
        grid-column: 1 / -1;
    }

    /* ── Acordeones (Proveedores / Kits / Historial): encabezado fuera; cada fila
          colapsa a tarjeta con rejilla uniforme + rótulos. ── */
    .cad-ghead[b-62icgw7h3g] {
        display: none;
    }
    .cad-grow[b-62icgw7h3g] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }
    .gcelda[b-62icgw7h3g] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .gcelda[b-62icgw7h3g]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }
    /* Nombre del proveedor / del Kit: título de la tarjeta, renglón completo. */
    .cad-grow .gp-prov[b-62icgw7h3g],
    .cad-grow .gk-nom[b-62icgw7h3g] {
        grid-column: 1 / -1;
    }
    /* Acciones: renglón completo al pie, en fila (sin rótulo). */
    .cad-grow .gp-acc[b-62icgw7h3g] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }
    /* La celda de acciones no lleva rótulo (sus botones se explican solos). */
    .cad-grow .gp-acc[b-62icgw7h3g]::before {
        content: none;
    }
    .gp-pref[b-62icgw7h3g] {
        text-align: left;
    }

    /* Bloque Unidad + Desc. Cliente: apilar para que el input no se comprima. */
    .cad-extras[b-62icgw7h3g] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }
    .cad-extra-input-chico[b-62icgw7h3g] {
        width: 100%;             /* el select de unidad ocupa el ancho disponible */
    }

    /* Modal quitar proveedor: aprovecha la pantalla angosta. */
    .modal-content[b-62icgw7h3g] {
        width: 95%;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatArticulosLista.razor.rz.scp.css */
/*
   CatArticulosLista.razor.css
   Estilos isolated del catálogo de Artículos (lista).
*/

/* Pega la barra de filtros al topbar (mismo patrón que UserABC en CCO) */
.contenedor-principal-sirei[b-jj9k32drgs] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE FILTROS — color claro del Cotizador ===== */
.cot-filtros[b-jj9k32drgs] {
    background-color: var(--color-coti-claro);
}

/* Cada grupo de filtro: invisible en PC (sus hijos fluyen en la barra flex);
   en móvil pasa a flex de ancho completo (ver @media). Patrón P5 / vara UserABC. */
.filtros-linea[b-jj9k32drgs] {
    display: contents;
}

.filtros-relleno[b-jj9k32drgs] {
    flex: 1;
}

/* ===== BOTONES ===== */
.cot-boton-nuevo[b-jj9k32drgs] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-nuevo:hover[b-jj9k32drgs] {
    background-color: #1B5E20;
}

/* ===== PAGINACIÓN ===== */
.cot-paginacion[b-jj9k32drgs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #FAFAFA;
    font-size: var(--texto-8pt);
}

.cot-paginas[b-jj9k32drgs] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-paginacion[b-jj9k32drgs] {
    background: none;
    border: none;
    color: #696969;
    cursor: pointer;
    padding: 0.13rem 0.31rem;
}

.btn-paginacion:disabled[b-jj9k32drgs] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-pagina[b-jj9k32drgs] {
    background: none;
    border: none;
    color: #696969;
    cursor: pointer;
    text-decoration: underline;
    min-width: 1.56rem;
    text-align: center;
}

.btn-pagina-activo[b-jj9k32drgs] {
    font-weight: bold;
    color: #E8820C;
    text-decoration: none;
}

.contador-registros[b-jj9k32drgs] {
    color: #696969;
}

/* ===== HEADER DE LISTA (DESKTOP) — gris claro (homologado a las 4 listas).
   2 renglones por producto: el header replica el MISMO grid que la fila para
   que las columnas alineen. Renglón 1 = SKU·SKU Asercom·Descripción·Proveedor;
   renglón 2 = Categoría·Costo·Unidad·Últ.Act.·Estatus·Acciones. ===== */
.tabla-header[b-jj9k32drgs],
.fila-item[b-jj9k32drgs] {
    display: grid;
    grid-template-columns:
        minmax(7rem, 0.9fr)   /* col-sku / col-categoria */
        minmax(8rem, 1fr)     /* col-skuaser / col-costo */
        minmax(10rem, 1.6fr)  /* col-desc / col-unidad */
        minmax(9rem, 1.2fr)   /* col-proveedores / col-fecha */
        minmax(5rem, 0.8fr)   /* (vacío R1) / col-estatus */
        6rem;                 /* (vacío R1) / col-acciones */
    grid-template-rows: auto auto;
    gap: 0.15rem 0.6rem;
    align-items: center;
}

.tabla-header[b-jj9k32drgs] {
    padding: 0.4rem 0.5rem;
    background-color: #F0F0F0;                /* Gris muy claro (header de catálogo) */
    color: #696969;                           /* Gris medio */
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;         /* Línea separadora gris */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba (cierra la caja con .lista) */
    margin-top: 0.5rem;
}

/* Header móvil — oculto en desktop, entra en @media */
.tabla-header-movil[b-jj9k32drgs] {
    display: none;
}

/* ===== LISTA Y FILAS ===== */
.lista[b-jj9k32drgs] {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: #FFFFFF;
    font-size: var(--texto-9pt);
}

.fila-item[b-jj9k32drgs] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    transition: background-color 0.15s;
}

.fila-item:last-child[b-jj9k32drgs] {
    border-bottom: none;
}

.fila-seleccionable[b-jj9k32drgs] {
    cursor: pointer;
}

.fila-seleccionable:hover[b-jj9k32drgs] {
    background-color: #F8F9FA;
}

/* "Sin resultados": ocupa todo el ancho del grid (equivale al colspan) */
.lista .no-resultados[b-jj9k32drgs] {
    grid-column: 1 / -1;
    padding: 1rem 0.75rem;
}

/* ===== COLUMNAS — posición por renglón en el grid de 2 filas.
   Texto largo con ellipsis (P3). En el header las celdas R1 de la 5ª/6ª
   columna no existen (SKU/SKU Asercom/Desc/Prov caben en 4); el grid las deja
   vacías sin problema. ===== */

/* ── Renglón 1 ── */
.col-sku[b-jj9k32drgs] {
    grid-row: 1;
    grid-column: 1;
    font-weight: bold;
    color: var(--color-coti);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-skuaser[b-jj9k32drgs] {
    grid-row: 1;
    grid-column: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-desc[b-jj9k32drgs] {
    grid-row: 1;
    grid-column: 3;
    min-width: 0;
    white-space: normal;          /* la descripción envuelve, no ellipsis-1-línea */
    overflow-wrap: break-word;
}

.col-proveedores[b-jj9k32drgs] {
    grid-row: 1;
    grid-column: 4 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Renglón 2 ── */
.col-categoria[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-costo[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 2;
}

.col-unidad[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-fecha[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 4;
}

.col-estatus[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 5;
}

.col-acciones[b-jj9k32drgs] {
    grid-row: 2;
    grid-column: 6;
    display: flex;
    justify-content: flex-start;
    gap: 0.25rem;
    white-space: nowrap;
}

.celda-pequena[b-jj9k32drgs] {
    font-size: var(--texto-8pt);
    color: #555555;
}

/* Celda con valor faltante (ej. artículo sin unidad asignada) — guión largo
   gris itálica, patrón "—" estándar SiREI. */
.celda-vacia[b-jj9k32drgs] {
    color: #999999;
    font-style: italic;
}

/* Etiqueta naranja "Revisar" */
.etiqueta-revisar[b-jj9k32drgs] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    margin-left: 0.25rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: #E8820C;
    color: #FFFFFF;
}

/* Filas de artículos inactivos */
.fila-inactiva[b-jj9k32drgs] {
    opacity: 0.6;
}

/* Botón de reactivar (✓ verde, solo visible en filas inactivas) */
.cot-boton-reactivar[b-jj9k32drgs] {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: var(--texto-10pt);
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.cot-boton-reactivar:hover[b-jj9k32drgs] {
    color: #1B5E20;
}

/* ===== RESPONSIVE — Celulares: reflow a tarjeta (Arquetipo 5, vara SecPuntosCctv).
   El encabezado de columnas se oculta y cada producto colapsa a una TARJETA: los
   atributos fluyen en rejilla uniforme repeat(auto-fit, minmax(...,1fr)), cada celda
   muestra su rótulo (data-rotulo). SKU, descripción y acciones ocupan renglón completo.
   Cero scroll horizontal. ===== */
@media (max-width: 768px) {

    /* 1) Header desktop fuera; header móvil entra (agrupa izq/der) */
    .tabla-header[b-jj9k32drgs] {
        display: none;
    }

    .tabla-header-movil[b-jj9k32drgs] {
        display: flex;
        align-items: center;
        padding: 0.31rem 0.5rem;
        background-color: #F0F0F0;            /* Gris muy claro (header de catálogo) */
        color: #696969;                       /* Gris medio */
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-bottom: 1px solid #E0E0E0;     /* Línea separadora gris */
        border-radius: 0.25rem 0.25rem 0 0;   /* Esquinas redondeadas arriba (cierra la caja con .lista) */
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-jj9k32drgs] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-jj9k32drgs] {
        text-align: right;
    }

    /* 2) Barra de filtros: cada grupo pasa a flex de ancho completo */
    .barra-filtros[b-jj9k32drgs] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .filtros-linea[b-jj9k32drgs] {
        display: flex;          /* de contents -> flex */
        width: 100%;            /* fuerza salto de línea por grupo */
        gap: 0.25rem;
        align-items: center;
    }

    /* Paginación: red de seguridad para que botones/flechas/contador no se aprieten a 320px */
    .cot-paginacion[b-jj9k32drgs] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* 3) LA FILA: tarjeta. Los metadatos cortos fluyen en rejilla uniforme;
          caben tantas columnas de >=6.5rem como el ancho permita, todas iguales. */
    .fila-item[b-jj9k32drgs] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        grid-template-rows: none;
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    /* Cada celda: rótulo arriba (gris, pequeño) + valor abajo. */
    .col-sku[b-jj9k32drgs],
    .col-skuaser[b-jj9k32drgs],
    .col-desc[b-jj9k32drgs],
    .col-proveedores[b-jj9k32drgs],
    .col-categoria[b-jj9k32drgs],
    .col-costo[b-jj9k32drgs],
    .col-unidad[b-jj9k32drgs],
    .col-fecha[b-jj9k32drgs],
    .col-estatus[b-jj9k32drgs],
    .col-acciones[b-jj9k32drgs] {
        grid-row: auto;
        grid-column: auto;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        font-size: var(--texto-8pt);
    }

    .col-sku[b-jj9k32drgs]::before,
    .col-skuaser[b-jj9k32drgs]::before,
    .col-desc[b-jj9k32drgs]::before,
    .col-proveedores[b-jj9k32drgs]::before,
    .col-categoria[b-jj9k32drgs]::before,
    .col-costo[b-jj9k32drgs]::before,
    .col-unidad[b-jj9k32drgs]::before,
    .col-fecha[b-jj9k32drgs]::before,
    .col-estatus[b-jj9k32drgs]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* SKU: título de la tarjeta, renglón completo (sin rótulo). */
    .col-sku[b-jj9k32drgs] {
        grid-column: 1 / -1;
        font-size: var(--texto-9pt);
    }
    .col-sku[b-jj9k32drgs]::before {
        content: none;
    }

    /* Descripción: renglón completo, envuelve. */
    .col-desc[b-jj9k32drgs] {
        grid-column: 1 / -1;
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* SKU Asercom: identificador corto (ej. GA-ACC-00265) que el cliente quiere
       ver íntegro — a 320px el ellipsis lo cortaría. Se muestra completo. */
    .col-skuaser[b-jj9k32drgs] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Acciones: renglón completo al pie, en fila a la derecha (sin rótulo). */
    .col-acciones[b-jj9k32drgs] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }

    /* 4) Etiquetas más compactas */
    .col-estatus .etiqueta[b-jj9k32drgs] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }

    /* 5) Botón reactivar (✓): área táctil mínima 2.75rem (44px) para dedo. */
    .cot-boton-reactivar[b-jj9k32drgs] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatKitsDetalle.razor.rz.scp.css */
/*
   CatKitsDetalle.razor.css
   Misma estética que CatArticulosDetalle:
     - .contenedor-principal-sirei pegado al topbar (padding-top:0)
     - .fijador + .barra-filtros .cot-filtros con mensaje de estado + [Guardar]
     - Header del Kit con inputs editables siempre (3 líneas — código+nombre+chip,
       bloque+subbloque+variante, descripción)
     - 3 acordeones con tamaño de letra homologado al header
*/

/* Pega la barra de filtros al topbar (mismo patrón que la lista) */
.contenedor-principal-sirei[b-n1p61x5kbg] {
    padding-top: 0;
    padding-bottom: 0;
}

/* Wrapper cuando el componente vive embebido en ModalKitDetalle. Sin chrome
   — el modal ya provee fondo y padding. Scroll vertical interno. */
.contenedor-embebido[b-n1p61x5kbg] {
    padding: 0 1rem 1rem 1rem;
    overflow-y: auto;
    height: 100%;
    background-color: #FFFFFF;
}

/* ===== BARRA DE FILTROS (misma del listado, color claro Cotizador) ===== */
.cot-filtros[b-n1p61x5kbg] {
    background-color: var(--color-coti-claro);
}

.filtros-relleno[b-n1p61x5kbg] {
    flex: 1;
}

.cot-boton-guardar[b-n1p61x5kbg] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-guardar:hover[b-n1p61x5kbg] {
    background-color: #1B5E20;
}

/* Mensaje "✓ Cambios guardados" en verde — tras un guardado exitoso del
   header, contenido (nuevo renglón, edición de cantidad, baja). */
.ckd-mensaje-guardado[b-n1p61x5kbg] {
    color: #2E7D32;
    font-size: var(--texto-9pt);
    font-weight: bold;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Mensaje "🛑 Cambios SIN guardar" en rojo — alerta cuando el usuario editó
   un campo del header pero aún no presionó Guardar. Comparación contra
   snapshot original (cambio real, no solo "tocó algo"). */
.ckd-mensaje-sin-guardar[b-n1p61x5kbg] {
    color: #C62828;
    font-size: var(--texto-9pt);
    font-weight: bold;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* ===== TEXTO PLANO (modo Ver) =====
   Reemplaza a los inputs/selects/textarea en modo Ver. Sin border (transparente),
   mismo padding/font para no producir layout shift al alternar Ver ↔ Editar. */
.ckd-texto-plano[b-n1p61x5kbg] {
    display: inline-block;
    padding: 0.25rem 0.4rem;
    border: 1px solid transparent;
    font-size: var(--texto-9pt);
    color: #000000;
    box-sizing: border-box;
    line-height: 1.4;
}

/* Código del Kit en modo Ver — mismo estilo monospace bold azul que el input,
   pero SIN padding lateral para que arranque alineado al borde izquierdo del
   header (a la misma X que "Bloque:" y "Descripción:" de las líneas inferiores). */
.ckd-texto-plano-codigo[b-n1p61x5kbg] {
    font-family: var(--fuente-codigos);
    font-weight: bold;
    color: var(--color-coti);
    font-size: var(--texto-9pt);
    padding: 0.25rem 0;
}

/* Nombre del Kit en modo Ver — mismo tamaño y peso que el input editable. */
.ckd-texto-plano-nombre[b-n1p61x5kbg] {
    font-size: var(--texto-10pt);
    font-weight: bold;
}

/* Campo vacío — guión largo gris itálica (patrón "—" estándar SiREI). */
.ckd-texto-plano-vacio[b-n1p61x5kbg] {
    color: #999999;
    font-style: italic;
}

/* ===== VALIDACIONES Y ERRORES (rojo claro con borde) ===== */
.ckd-error-duplicado[b-n1p61x5kbg] {
    background-color: #FFEBEE;
    border-left: 3px solid #C62828;
    color: #6B0000;
    padding: 0.5rem 0.625rem;
    margin: 0.625rem 0 0.5rem 0;
    font-size: var(--texto-9pt);
}

/* ===== HEADER ===== */
.cot-header[b-n1p61x5kbg] {
    padding: 0.625rem 0;
    border-bottom: 1px solid #E0E0E0;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.header-linea1[b-n1p61x5kbg] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.header-codigo-input[b-n1p61x5kbg] {
    width: 22rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-family: var(--fuente-codigos);
    font-weight: bold;
    color: var(--color-coti);
    font-size: var(--texto-9pt);
}

.header-nombre-input[b-n1p61x5kbg] {
    flex: 1;
    min-width: 18rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
}

.header-codigo-input:focus[b-n1p61x5kbg],
.header-nombre-input:focus[b-n1p61x5kbg] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.header-linea2[b-n1p61x5kbg] {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.5rem;
    font-size: var(--texto-9pt);
    flex-wrap: wrap;
    align-items: center;
}

.header-linea3[b-n1p61x5kbg] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: var(--texto-9pt);
}

.header-dato[b-n1p61x5kbg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dato-label[b-n1p61x5kbg] {
    color: #696969;
}

.header-bloque-select[b-n1p61x5kbg] {
    padding: 0.2rem 0.4rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
}

.header-extra-input[b-n1p61x5kbg] {
    width: 9rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
}

.header-extra-input:focus[b-n1p61x5kbg],
.header-bloque-select:focus[b-n1p61x5kbg] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.header-desc-input[b-n1p61x5kbg] {
    flex: 1;
    padding: 0.25rem 0.4rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    font-family: inherit;
    background-color: #FFFFFF;
    resize: vertical;
    min-height: 2.5rem;
}

.header-desc-input:focus[b-n1p61x5kbg] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

/* ===== ACORDEÓN — CONTENIDO ===== */
.acordeon-botones-add[b-n1p61x5kbg] {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background-color: #F8F9FA;
}

.cot-boton-agregar[b-n1p61x5kbg] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.cot-boton-agregar:hover[b-n1p61x5kbg] {
    background-color: var(--color-coti-oscuro);
}

.contenido-mensaje-creacion[b-n1p61x5kbg] {
    padding: 0.75rem 0.625rem;
    background-color: #FFF9E6;
    border-left: 3px solid #E8820C;
    color: #6B4500;
    font-size: var(--texto-9pt);
    font-style: italic;
}

/* ===== GRIDS DE LOS ACORDEONES (Contenido, Vista Explotada) — Arq.5 =====
   <div> grid (NO <table>, NO overflow-x). Encabezado + filas comparten el mismo
   grid en desktop; en ≤768px el encabezado se oculta y cada fila colapsa a tarjeta
   con data-rotulo. minmax(..,1fr) deja que el grid se comprima para caber sin scroll. */
.ckd-grid[b-n1p61x5kbg] {
    width: 100%;
    background-color: #FFFFFF;
    font-size: var(--texto-9pt);
}

.ckd-ghead[b-n1p61x5kbg],
.ckd-grow[b-n1p61x5kbg] {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.ckd-ghead[b-n1p61x5kbg] {
    background-color: #F0F0F0;
    color: #696969;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;
}

.ckd-grow[b-n1p61x5kbg] {
    border-bottom: 1px solid #EEEEEE;
}

.gcelda[b-n1p61x5kbg] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Mensaje "sin datos": ocupa todo el ancho del grid. */
.ckd-grow-vacio[b-n1p61x5kbg] {
    padding: 0.5rem 0.625rem;
}

/* ── CONTENIDO: 5 columnas (Ver) o 6 (Editar, con Acciones) ── */
.ckd-grid-contenido-ver .ckd-ghead[b-n1p61x5kbg],
.ckd-grid-contenido-ver .ckd-grow[b-n1p61x5kbg] {
    grid-template-columns:
        minmax(3.5rem, 0.5fr)  /* Tipo */
        minmax(10rem, 2fr)     /* Contenido */
        minmax(4rem, 0.6fr)    /* Cant. */
        minmax(5rem, 0.8fr)    /* Costo U. */
        minmax(5rem, 0.8fr);   /* Subtotal */
}

.ckd-grid-contenido-edit .ckd-ghead[b-n1p61x5kbg],
.ckd-grid-contenido-edit .ckd-grow[b-n1p61x5kbg] {
    grid-template-columns:
        minmax(3.5rem, 0.5fr)  /* Tipo */
        minmax(8rem, 2fr)      /* Contenido */
        minmax(4rem, 0.6fr)    /* Cant. */
        minmax(5rem, 0.8fr)    /* Costo U. */
        minmax(5rem, 0.8fr)    /* Subtotal */
        5rem;                  /* Acciones */
}

/* ── VISTA EXPLOTADA: 5 columnas ── */
.ckd-grid-explotada .ckd-ghead[b-n1p61x5kbg],
.ckd-grid-explotada .ckd-grow[b-n1p61x5kbg] {
    grid-template-columns:
        minmax(6rem, 1fr)      /* Origen */
        minmax(3.5rem, 0.5fr)  /* Tipo */
        minmax(9rem, 2fr)      /* Descripción */
        minmax(4rem, 0.6fr)    /* Cant. */
        minmax(5rem, 0.8fr);   /* Costo / Hrs */
}

.gc-acc[b-n1p61x5kbg] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    white-space: nowrap;
}

.celda-nombre[b-n1p61x5kbg] {
    font-weight: bold;
}

.celda-subtotal[b-n1p61x5kbg] {
    font-weight: bold;
}

/* Renglón cuyo Articulo/Actividad/Kit referenciado fue desactivado después
   de agregarse al Kit. Se muestra apagado para invitar a revisar/reemplazar. */
.renglon-ref-inactiva[b-n1p61x5kbg] {
    opacity: 0.55;
}

.etiqueta-ref-inactiva[b-n1p61x5kbg] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: #C62828;
    color: #FFFFFF;
}

/* ===== PIE DE ACORDEÓN ===== */
.acordeon-pie-totales[b-n1p61x5kbg] {
    text-align: right;
    padding: 0.375rem 0.625rem;
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
    background-color: #FAFAFA;
    border-top: 1px solid #E0E0E0;
}

.separador[b-n1p61x5kbg] {
    margin: 0 0.5rem;
    color: #999999;
}

/* ===== VISTA EXPLOTADA ===== */
.nota-explotada[b-n1p61x5kbg] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.375rem 0.5rem;
    background-color: #FAFAFA;
}

.fila-art[b-n1p61x5kbg] {
    background-color: #F8FBFF;
}

.fila-act[b-n1p61x5kbg] {
    background-color: #FFF8F0;
}

.celda-origen[b-n1p61x5kbg] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* ===== USADO EN ===== */
.usado-en-linea[b-n1p61x5kbg] {
    padding: 0.375rem 0.625rem;
    font-size: var(--texto-9pt);
}

.placeholder-vacio[b-n1p61x5kbg] {
    color: #999999;
    font-style: italic;
    margin-left: 0.25rem;
}

.codigo-kit-link[b-n1p61x5kbg] {
    font-family: var(--fuente-codigos);
    color: var(--color-coti);
    font-size: var(--texto-8pt);
}

/* ===== HOMOLOGACIÓN DE TÍTULOS DE LOS ACORDEONES =====
   Por defecto el Acordeon.razor.css pone el título a 11pt — más grande que el
   contenido editable. Bajamos a 9pt/7pt como en CatArticulosDetalle.
*/
[b-n1p61x5kbg] .acordeon-titulo {
    font-size: var(--texto-9pt);
}

[b-n1p61x5kbg] .acordeon-count {
    font-size: var(--texto-7pt);
    font-weight: normal;
}

[b-n1p61x5kbg] .acordeon-header {
    padding: 0.25rem 0.5rem;
}

[b-n1p61x5kbg] .acordeon-flecha {
    font-size: var(--texto-7pt);
}

/* ===== MODAL QUITAR RENGLÓN (inline) ===== */
.modal-overlay[b-n1p61x5kbg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-n1p61x5kbg] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-quitar-renglon[b-n1p61x5kbg] {
    background-color: #FFFFFF;
}

.modal-quitar-renglon .modal-header[b-n1p61x5kbg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-quitar-renglon .modal-header h3[b-n1p61x5kbg] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-n1p61x5kbg] .modal-quitar-renglon .modal-header .boton-x {
    color: #FFFFFF;
}

[b-n1p61x5kbg] .modal-quitar-renglon .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.modal-quitar-renglon .modal-body[b-n1p61x5kbg] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-n1p61x5kbg] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.renglon-titulo[b-n1p61x5kbg] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
    word-break: break-word;
}

.mensaje-info[b-n1p61x5kbg] {
    color: #696969;
    font-size: var(--texto-8pt);
    margin: 0;
    font-style: italic;
}

.modal-quitar-renglon .modal-footer[b-n1p61x5kbg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-cancelar-modal[b-n1p61x5kbg] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-desactivar-modal[b-n1p61x5kbg] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-desactivar-modal:hover[b-n1p61x5kbg] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    /* Barra de filtros: la base .barra-filtros (app.css) ya es flex-wrap.
       El spacer empuja la leyenda + [Guardar] a la derecha; en móvil fuerza el
       salto para que bajen a su propia línea sin comprimirse. */
    .filtros-relleno[b-n1p61x5kbg] {
        flex-basis: 100%;        /* fuerza salto: la leyenda+botón bajan de línea */
    }

    /* Header del Kit (Arq.4): los inputs de ancho fijo se vuelven full-width
       para no desbordar el viewport en móvil. */
    .header-codigo-input[b-n1p61x5kbg] {
        width: 100%;             /* era 22rem fijo — desbordaba a 320px */
    }
    .header-nombre-input[b-n1p61x5kbg] {
        min-width: 0;            /* era 18rem — impedía comprimir */
        width: 100%;
    }
    .header-linea2[b-n1p61x5kbg] {
        gap: 0.5rem;             /* menos separación entre Bloque/Subbloque/Variante */
    }
    .header-extra-input[b-n1p61x5kbg] {
        width: 100%;             /* Subbloque/Variante ocupan el ancho de su línea */
    }
    .header-dato[b-n1p61x5kbg] {
        flex: 1;                 /* cada dato del header se reparte el ancho */
        min-width: 0;
    }

    /* ── Acordeones (Contenido / Vista Explotada): encabezado fuera; cada fila
          colapsa a tarjeta con rejilla uniforme + rótulos. Cero scroll horizontal. ── */
    .ckd-ghead[b-n1p61x5kbg] {
        display: none;
    }
    .ckd-grow[b-n1p61x5kbg] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }
    .gcelda[b-n1p61x5kbg] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .gcelda[b-n1p61x5kbg]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }
    /* Contenido/Descripción: título de la tarjeta, renglón completo. */
    .ckd-grow .gc-nom[b-n1p61x5kbg],
    .ckd-grow .ge-nom[b-n1p61x5kbg] {
        grid-column: 1 / -1;
    }
    /* Acciones: renglón completo al pie, en fila (sin rótulo). */
    .ckd-grow .gc-acc[b-n1p61x5kbg] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }
    /* La celda de acciones no lleva rótulo (sus botones se explican solos). */
    .ckd-grow .gc-acc[b-n1p61x5kbg]::before {
        content: none;
    }

    /* Botones [+ Artículo] [+ Actividad] [+ Kit]: que envuelvan sin desbordar. */
    .acordeon-botones-add[b-n1p61x5kbg] {
        flex-wrap: wrap;
    }

    /* Modal quitar renglón: aprovecha la pantalla angosta. */
    .modal-content[b-n1p61x5kbg] {
        width: 95%;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatKitsLista.razor.rz.scp.css */
/*
   CatKitsLista.razor.css
   Estilos isolated del catálogo de Kits (lista).
*/

/* Pega la barra de filtros al topbar (mismo patrón que UserABC en CCO) */
.contenedor-principal-sirei[b-e1rtcvdd8h] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE FILTROS — color claro del Cotizador ===== */
.cot-filtros[b-e1rtcvdd8h] {
    background-color: var(--color-coti-claro);
}

/* Cada grupo de filtro: invisible en PC (sus hijos fluyen en la barra flex);
   en móvil pasa a flex de ancho completo (ver @media). Patrón P5 / vara UserABC. */
.filtros-linea[b-e1rtcvdd8h] {
    display: contents;
}

.filtros-relleno[b-e1rtcvdd8h] {
    flex: 1;
}

/* ===== BOTÓN NUEVO ===== */
.cot-boton-nuevo[b-e1rtcvdd8h] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-nuevo:hover[b-e1rtcvdd8h] {
    background-color: #1B5E20;
}

/* ===== PAGINACIÓN ===== */
.cot-paginacion[b-e1rtcvdd8h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #FAFAFA;
    font-size: var(--texto-8pt);
}

.cot-paginas[b-e1rtcvdd8h] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-paginacion[b-e1rtcvdd8h] {
    background: none;
    border: none;
    color: #696969;
    cursor: pointer;
    padding: 0.13rem 0.31rem;
}

.btn-paginacion:disabled[b-e1rtcvdd8h] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-pagina[b-e1rtcvdd8h] {
    background: none;
    border: none;
    color: #696969;
    cursor: pointer;
    text-decoration: underline;
    min-width: 1.56rem;
    text-align: center;
}

.btn-pagina-activo[b-e1rtcvdd8h] {
    font-weight: bold;
    color: #E8820C;
    text-decoration: none;
}

.contador-registros[b-e1rtcvdd8h] {
    color: #696969;
}

/* ===== HEADER DE LISTA (DESKTOP) — gris claro (homologado a las 4 listas) ===== */
.tabla-header[b-e1rtcvdd8h] {
    display: flex;
    align-items: center;
    padding: 0.31rem 0.5rem;
    background-color: #F0F0F0;                /* Gris muy claro (header de catálogo) */
    color: #696969;                           /* Gris medio */
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;         /* Línea separadora gris */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba (cierra la caja con .lista) */
    margin-top: 0.5rem;
}

/* Header móvil — oculto en desktop, entra en @media */
.tabla-header-movil[b-e1rtcvdd8h] {
    display: none;
}

/* ===== LISTA Y FILAS ===== */
.lista[b-e1rtcvdd8h] {
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: #FFFFFF;
    font-size: var(--texto-9pt);
}

.fila-item[b-e1rtcvdd8h] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    transition: background-color 0.15s;
}

.fila-item:last-child[b-e1rtcvdd8h] {
    border-bottom: none;
}

.fila-seleccionable[b-e1rtcvdd8h] {
    cursor: pointer;
}

.fila-seleccionable:hover[b-e1rtcvdd8h] {
    background-color: #F8F9FA;
}

/* "Sin resultados": una sola celda full-width dentro de la lista (equivale al colspan) */
.lista .no-resultados[b-e1rtcvdd8h] {
    padding: 1rem 0.75rem;
}

/* ===== COLUMNAS — anchos en % (col-nombre flex absorbe el resto y el hueco de
   Acciones en modo selector). Texto largo con ellipsis (P3). ===== */
.col-num[b-e1rtcvdd8h] {
    width: 4%;
    text-align: left;
}

.col-codigo[b-e1rtcvdd8h] {
    width: 14%;
    font-family: var(--fuente-codigos);
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-nombre[b-e1rtcvdd8h] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-bloque[b-e1rtcvdd8h] {
    width: 9%;
}

.col-contenido[b-e1rtcvdd8h] {
    width: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-costo[b-e1rtcvdd8h] {
    width: 11%;
}

.col-estatus[b-e1rtcvdd8h] {
    width: 10%;
}

.col-acciones[b-e1rtcvdd8h] {
    width: 7%;
    display: flex;
    justify-content: flex-start;
    gap: 0.25rem;
    white-space: nowrap;
}

.celda-pequena[b-e1rtcvdd8h] {
    font-size: var(--texto-8pt);
    color: #555555;
}

/* Filas de Kits inactivos */
.fila-inactiva[b-e1rtcvdd8h] {
    opacity: 0.6;
}

/* Botón de reactivar (✓ verde, solo visible en filas inactivas) */
.cot-boton-reactivar[b-e1rtcvdd8h] {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: var(--texto-10pt);
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.cot-boton-reactivar:hover[b-e1rtcvdd8h] {
    color: #1B5E20;
}

/* ===== RESPONSIVE — Celulares (Arquetipo 1, vara UserABC) ===== */
@media (max-width: 768px) {

    /* 1) Header desktop fuera; header móvil entra (agrupa izq/der) */
    .tabla-header[b-e1rtcvdd8h] {
        display: none;
    }

    .tabla-header-movil[b-e1rtcvdd8h] {
        display: flex;
        align-items: center;
        padding: 0.31rem 0.5rem;
        background-color: #F0F0F0;            /* Gris muy claro (header de catálogo) */
        color: #696969;                       /* Gris medio */
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-bottom: 1px solid #E0E0E0;     /* Línea separadora gris */
        border-radius: 0.25rem 0.25rem 0 0;   /* Esquinas redondeadas arriba (cierra la caja con .lista) */
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-e1rtcvdd8h] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-e1rtcvdd8h] {
        text-align: right;
    }

    /* 2) Barra de filtros: cada grupo pasa a flex de ancho completo */
    .barra-filtros[b-e1rtcvdd8h] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .filtros-linea[b-e1rtcvdd8h] {
        display: flex;          /* de contents -> flex */
        width: 100%;            /* fuerza salto de línea por grupo */
        gap: 0.25rem;
        align-items: center;
    }

    /* Paginación: red de seguridad para que botones/flechas/contador no se aprieten a 320px */
    .cot-paginacion[b-e1rtcvdd8h] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* 3) LA FILA: de flex a GRID de 4 renglones (8 columnas).
          Col 1 = ancho contenido (#), col 2 = 1fr (texto), col 3 = derecha (estatus/acc). */
    .fila-item[b-e1rtcvdd8h] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.2rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* ── Renglón 1: # + Código + Estatus ── */
    .col-num[b-e1rtcvdd8h] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-codigo[b-e1rtcvdd8h] {
        grid-row: 1;
        grid-column: 2;
        width: auto;
    }

    .col-estatus[b-e1rtcvdd8h] {
        grid-row: 1;
        grid-column: 3;
        width: auto;
        text-align: right;
    }

    /* ── Renglón 2: Nombre (izq) + Costo (der) ── */
    .col-nombre[b-e1rtcvdd8h] {
        grid-row: 2;
        grid-column: 1 / 3;
        width: auto;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .col-costo[b-e1rtcvdd8h] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
        text-align: right;
        font-weight: bold;
    }

    /* ── Renglón 3: Bloque (izq) + Contenido (der) ── */
    .col-bloque[b-e1rtcvdd8h] {
        grid-row: 3;
        grid-column: 1;
        width: auto;
    }

    .col-contenido[b-e1rtcvdd8h] {
        grid-row: 3;
        grid-column: 2 / 4;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666666;
        white-space: normal;
        text-align: right;
    }

    /* ── Renglón 4: Acciones (der) ── */
    .col-acciones[b-e1rtcvdd8h] {
        grid-row: 4;
        grid-column: 3;
        width: auto;
        justify-content: flex-end;
    }

    /* 4) Etiquetas más compactas */
    .col-estatus .etiqueta[b-e1rtcvdd8h] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/CatTarifas.razor.rz.scp.css */
/*
   CatTarifas.razor.css
   Estilos isolated de la pantalla Catálogo de Tarifas.
   Reusa .contenedor-principal-sirei, .barra-filtros, .boton-chico y .no-resultados de app.css.
*/

/* Pega la barra de filtros al topbar (mismo patrón que UserABC en CCO) */
.contenedor-principal-sirei[b-koj5b5qg08] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BARRA DE FILTROS — color claro del Cotizador ===== */
.cot-filtros[b-koj5b5qg08] {
    background-color: var(--color-coti-claro);   /* Azul claro del módulo */
}

/* Cada grupo de filtro es transparente en PC (sus hijos fluyen en la barra flex) */
.filtros-linea[b-koj5b5qg08] {
    display: contents;
}

/* Empuja el botón de "Nuevo" hacia la derecha */
.filtros-relleno[b-koj5b5qg08] {
    flex: 1;
}

/* ===== BOTÓN NUEVO ===== */
.cot-boton-nuevo[b-koj5b5qg08] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.cot-boton-nuevo:hover[b-koj5b5qg08] {
    background-color: #1B5E20;
}

/* ===== CONTADOR DE REGISTROS ===== */
.cot-contador[b-koj5b5qg08] {
    text-align: right;
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.25rem 0.5rem;
    background-color: #FAFAFA;
}

/* ===== ENCABEZADO DE TABLA (DESKTOP) ===== */
.tabla-header[b-koj5b5qg08] {
    display: flex;
    align-items: center;
    padding: 0.31rem 0.5rem;
    background-color: #F0F0F0;                /* Gris muy claro (header de catálogo) */
    color: #696969;                           /* Gris medio */
    font-weight: bold;
    font-size: var(--texto-8pt);
    border-bottom: 1px solid #E0E0E0;         /* Línea separadora gris */
    border-radius: 0.25rem 0.25rem 0 0;       /* Esquinas redondeadas arriba (cierra la caja con .lista) */
    margin-top: 0.5rem;
}

/* Encabezado móvil (oculto en desktop) */
.tabla-header-movil[b-koj5b5qg08] {
    display: none;
}

/* ===== LISTA Y FILAS ===== */
.lista[b-koj5b5qg08] {
    border: 1px solid var(--color-border);   /* Caja Arquetipo 1 (igual a Artículos/Kits) */
    border-top: none;                         /* El borde superior lo da el header */
    border-radius: 0 0 0.25rem 0.25rem;       /* Esquinas redondeadas abajo (cierra la caja) */
    background-color: #FFFFFF;                /* Fondo blanco */
    font-size: var(--texto-9pt);
}

.fila-item[b-koj5b5qg08] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;         /* Línea entre filas */
    transition: background-color 0.15s;
}

.fila-item:last-child[b-koj5b5qg08] {
    border-bottom: none;
}

.fila-item:hover[b-koj5b5qg08] {
    background-color: #F8F9FA;                /* Gris muy claro al pasar el mouse */
}

/* Filas de tarifas inactivas (baja lógica) */
.fila-item.fila-inactiva[b-koj5b5qg08] {
    opacity: 0.6;
}

/* ===== COLUMNAS (anchos en % que suman ~100) ===== */
.col-num[b-koj5b5qg08] {
    width: 6%;
    text-align: center;
}

.col-tipo[b-koj5b5qg08] {
    width: 26%;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-costo[b-koj5b5qg08] {
    width: 14%;
}

.col-vigente[b-koj5b5qg08] {
    width: 16%;
}

.col-actualizado[b-koj5b5qg08] {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-estatus[b-koj5b5qg08] {
    width: 8%;
    text-align: center;
}

.col-acciones[b-koj5b5qg08] {
    width: 10%;
    white-space: nowrap;
    display: flex;
    gap: 0.25rem;
}

/* ===== BOTÓN REACTIVAR (✓ verde, solo visible en filas inactivas) ===== */
.cot-boton-reactivar[b-koj5b5qg08] {
    background: none;
    border: none;
    color: #2E7D32;
    font-size: var(--texto-10pt);
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.cot-boton-reactivar:hover[b-koj5b5qg08] {
    color: #1B5E20;
}

/* ============================================================
   RESPONSIVE - Celulares (Arquetipo 1: flex → grid de líneas)
   ============================================================ */
@media (max-width: 768px) {

    /* 1) Encabezado: ocultar el de columnas, mostrar el de izq/der */
    .tabla-header[b-koj5b5qg08] {
        display: none;
    }

    .tabla-header-movil[b-koj5b5qg08] {
        display: flex;
        align-items: center;
        padding: 0.31rem 0.5rem;
        background-color: #F0F0F0;            /* Gris muy claro (header de catálogo) */
        color: #696969;                       /* Gris medio */
        font-weight: bold;
        font-size: var(--texto-8pt);
        border-bottom: 1px solid #E0E0E0;     /* Línea separadora gris */
        border-radius: 0.25rem 0.25rem 0 0;   /* Esquinas redondeadas arriba (cierra la caja con .lista) */
        gap: 1rem;
    }

    .tabla-header-movil .col-izq[b-koj5b5qg08] {
        flex: 1;
    }

    .tabla-header-movil .col-der[b-koj5b5qg08] {
        text-align: right;
    }

    /* 2) Barra de filtros: cada grupo pasa a flex de ancho completo */
    .barra-filtros[b-koj5b5qg08] {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .filtros-linea[b-koj5b5qg08] {
        display: flex;          /* de contents -> flex */
        width: 100%;            /* fuerza salto de línea por grupo */
        gap: 0.25rem;
        align-items: center;
    }

    /* 3) La fila: de flex a grid de 2 renglones por registro */
    .fila-item[b-koj5b5qg08] {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 0.25rem 0.5rem;
        padding: 0.5rem;
        align-items: center;
    }

    /* ── LÍNEA 1: # + Tipo de Recurso + Estatus ── */
    .col-num[b-koj5b5qg08] {
        grid-row: 1;
        grid-column: 1;
        width: auto;
        font-weight: bold;
    }

    .col-tipo[b-koj5b5qg08] {
        grid-row: 1;
        grid-column: 2 / 4;
        width: auto;
    }

    .col-estatus[b-koj5b5qg08] {
        grid-row: 1;
        grid-column: 4;
        width: auto;
        text-align: right;
    }

    /* ── LÍNEA 2: Costo + Vigencia + Actualizado + Acciones ── */
    .col-costo[b-koj5b5qg08] {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-vigente[b-koj5b5qg08] {
        grid-row: 2;
        grid-column: 2;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-actualizado[b-koj5b5qg08] {
        grid-row: 2;
        grid-column: 3;
        width: auto;
        font-size: var(--texto-7pt);
        color: #666;                          /* Gris secundario */
    }

    .col-acciones[b-koj5b5qg08] {
        grid-row: 2;
        grid-column: 4;
        width: auto;
        justify-content: flex-end;
    }

    /* Etiqueta de estatus más compacta */
    .col-estatus .etiqueta[b-koj5b5qg08] {
        font-size: var(--texto-7pt);
        padding: 0.125rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalActividad.razor.rz.scp.css */
/*
   ModalActividad.razor.css
   Estilos isolated del modal de creación/edición de actividad.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-0co05zrr1h] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-0co05zrr1h] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-actividad[b-0co05zrr1h] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-0co05zrr1h] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-0co05zrr1h] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-0co05zrr1h] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-0co05zrr1h] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-0co05zrr1h] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.form-group[b-0co05zrr1h] {
    margin: 0.5rem 0;
    flex: 1;
}

.form-group label[b-0co05zrr1h] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #000000;
}

.form-control[b-0co05zrr1h] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-control:focus[b-0co05zrr1h] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

textarea.form-control[b-0co05zrr1h] {
    resize: vertical;
    min-height: 2.5rem;
}

/* Filas de 2 columnas */
.form-fila[b-0co05zrr1h] {
    display: flex;
    gap: 0.625rem;
}

/* Hint debajo del select de padre */
.hint-padre[b-0co05zrr1h] {
    font-size: var(--texto-7pt);
    color: #E8820C;
    margin-top: 0.2rem;
}

/* Hint cuando el select de padre está bloqueado (actividad con hijas) */
.hint-padre-bloqueado[b-0co05zrr1h] {
    font-size: var(--texto-7pt);
    color: #B71C1C;
    margin-top: 0.2rem;
    font-style: italic;
}

/* Caja gris de datos de calibración (read-only) */
.calibracion-box[b-0co05zrr1h] {
    padding: 0.5rem 0.625rem;
    background-color: #F0F0F0;
    border-radius: 0.1875rem;
    margin-top: 0.625rem;
    font-size: var(--texto-8pt);
    color: #696969;
}

/* ===== MENSAJES DE ERROR ===== */
/* Aviso de actividad duplicada (cuando el SP retorna 0) */
.ma-error-duplicado[b-0co05zrr1h] {
    background-color: #FDECEC;
    border-left: 3px solid #C62828;
    color: #B71C1C;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-9pt);
}

/* Error inline de validación local por campo */
.ma-error-campo[b-0co05zrr1h] {
    display: block;
    color: #B71C1C;
    font-size: var(--texto-8pt);
    margin-top: 0.25rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-0co05zrr1h] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-0co05zrr1h] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-0co05zrr1h] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-0co05zrr1h] {
    background-color: #1B5E20;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible. */
    .modal-content[b-0co05zrr1h] {
        width: 95%;
    }

    /* Las filas de 2 columnas (Código+Nombre, Tipo Tiempo+Tiempo Estándar,
       Unidad+Tipo Proyecto) se apilan en una sola columna para que cada
       campo tenga ancho legible. */
    .form-fila[b-0co05zrr1h] {
        flex-direction: column;
        gap: 0;
    }

    /* Los botones del footer bajan de línea si no caben. */
    .modal-footer[b-0co05zrr1h] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalArticulo.razor.rz.scp.css */
/*
   ModalArticulo.razor.css
   Modal de alta de artículo. Funciona en dos modos (parámetro EsAltaInline):
     - false (default): alta normal desde [+ Nuevo] del catálogo.
     - true           : alta inline desde el modo selector — agrega el banner "Revisar".
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-n15auo7eyg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-n15auo7eyg] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-articulo[b-n15auo7eyg] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-n15auo7eyg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-n15auo7eyg] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-n15auo7eyg] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-n15auo7eyg] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-n15auo7eyg] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.hint-revision[b-n15auo7eyg] {
    padding: 0.5rem 0.625rem;
    background-color: #FFF3E0;
    border-left: 3px solid #E8820C;
    border-radius: 0.1875rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-8pt);
    color: #5D4037;
}

.form-group[b-n15auo7eyg] {
    margin: 0.5rem 0;
    flex: 1;
}

.form-group label[b-n15auo7eyg] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #000000;
}

.form-control[b-n15auo7eyg] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-control:focus[b-n15auo7eyg] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.form-fila[b-n15auo7eyg] {
    display: flex;
    gap: 0.625rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-n15auo7eyg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-n15auo7eyg] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-n15auo7eyg] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-n15auo7eyg] {
    background-color: #1B5E20;
}

/* ===== VALIDACIONES ===== */
.ma-error-campo[b-n15auo7eyg] {
    display: block;
    color: #C62828;
    font-size: var(--texto-8pt);
    margin-top: 0.25rem;
}

.ma-error-duplicado[b-n15auo7eyg] {
    background-color: #FFEBEE;
    border-left: 3px solid #C62828;
    color: #6B0000;
    padding: 0.5rem 0.625rem;
    margin-top: 0.5rem;
    font-size: var(--texto-9pt);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible. */
    .modal-content[b-n15auo7eyg] {
        width: 95%;
    }

    /* Las filas de 2 columnas (SKU+Costo, Categoría+Proveedor) se apilan en
       una sola columna para que cada campo tenga ancho legible. */
    .form-fila[b-n15auo7eyg] {
        flex-direction: column;
        gap: 0;
    }

    /* Los botones del footer bajan de línea si no caben. */
    .modal-footer[b-n15auo7eyg] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalArticuloDetalle.razor.rz.scp.css */
/*
   ModalArticuloDetalle.razor.css
   Modal estándar SiREI (header banda azul + body scroll + footer botones).
   Ancho 63vw (30% menos que el experimento original de 90vw).
   Aparece desde 5rem arriba para que se vea la lista de fondo.
*/

.modal-overlay[b-sb69uj8540] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5rem;
}

.modal-content[b-sb69uj8540] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    width: 63vw;
    max-width: 56rem;
    max-height: 85vh;
    background-color: #FFFFFF;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-articulo-detalle[b-sb69uj8540] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-sb69uj8540] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-sb69uj8540] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-sb69uj8540] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-sb69uj8540] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* Agrupa el lápiz (Editar) y la X (Cerrar) del header con separación holgada
   para no parecer pegados. El lápiz solo aparece en modo Ver. */
.header-acciones[b-sb69uj8540] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Lápiz blanco sobre el header banda azul. Mismo tamaño visual que la X.
   Click activa edición (one-way; ver más arriba en el componente). */
.boton-lapiz[b-sb69uj8540] {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: var(--texto-14pt);
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.boton-lapiz:hover[b-sb69uj8540] {
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-sb69uj8540] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background-color: #FFFFFF;
}

/* ===== FOOTER ===== */
.modal-footer[b-sb69uj8540] {
    padding: 0.5rem 0.94rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid #E0E0E0;
    background-color: #FAFAFA;
}

.filtros-relleno[b-sb69uj8540] {
    flex: 1;
}

.mad-mensaje-guardado[b-sb69uj8540] {
    color: #2E7D32;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* Mensaje "⚠ Cambios SIN guardar" en rojo — alerta cuando el usuario editó
   un campo del header pero aún no presionó Guardar del footer. */
.mad-mensaje-sin-guardar[b-sb69uj8540] {
    color: #C62828;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-sb69uj8540] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-sb69uj8540] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-sb69uj8540] {
    background-color: #1B5E20;
}

/* [Cerrar] verde — reemplaza [Cancelar] cuando el estado es "Cambios guardados".
   Mismo verde institucional que [Guardar] para reforzar visualmente "operación
   exitosa, puedes irte con un click". */
.btn-cerrar-modal[b-sb69uj8540] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-cerrar-modal:hover[b-sb69uj8540] {
    background-color: #1B5E20;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En celular el modal abarca toda la pantalla (sin offset superior, sin
       ancho parcial). El header banda azul y el footer con botones se quedan
       fijos en sus posiciones; el body con scroll ocupa el espacio entre ambos.
       Patrón estándar mobile-first para modales grandes. */
    .modal-overlay[b-sb69uj8540] {
        padding-top: 0;
        align-items: stretch;
    }

    .modal-content[b-sb69uj8540] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalDesactivarActividad.razor.rz.scp.css */
/*
   ModalDesactivarActividad.razor.css
   Estilos del modal de confirmación de baja lógica.
   Reusa el patrón general de ModalActividad/ModalTarifa.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-h3kuual77d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-h3kuual77d] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-desactivar-act[b-h3kuual77d] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-h3kuual77d] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-h3kuual77d] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-h3kuual77d] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-h3kuual77d] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-h3kuual77d] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-h3kuual77d] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.actividad-titulo[b-h3kuual77d] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
    word-break: break-word;
}

.mensaje-advertencia[b-h3kuual77d] {
    background-color: #FFF4E5;
    border-left: 3px solid #E8820C;
    color: #6B4500;
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

.mensaje-info[b-h3kuual77d] {
    color: #696969;
    font-size: var(--texto-8pt);
    margin: 0;
    font-style: italic;
}

/* ===== FOOTER ===== */
.modal-footer[b-h3kuual77d] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-h3kuual77d] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-desactivar-modal[b-h3kuual77d] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-desactivar-modal:hover[b-h3kuual77d] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible.
       Es un modal de confirmación (texto + 2 botones), sin grid que colapsar. */
    .modal-content[b-h3kuual77d] {
        width: 95%;
    }

    /* Los botones del footer bajan de línea si no caben (a ~320px los dos
       botones podrían apretarse). */
    .modal-footer[b-h3kuual77d] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalDesactivarArticulo.razor.rz.scp.css */
/*
   ModalDesactivarArticulo.razor.css
   Estilos del modal de confirmación de baja lógica del artículo.
   Reusa el patrón general de ModalDesactivarActividad.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-8xd18kvbqg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-8xd18kvbqg] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-desactivar-art[b-8xd18kvbqg] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-8xd18kvbqg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-8xd18kvbqg] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-8xd18kvbqg] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-8xd18kvbqg] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-8xd18kvbqg] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-8xd18kvbqg] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.articulo-titulo[b-8xd18kvbqg] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
    word-break: break-word;
}

.mensaje-advertencia[b-8xd18kvbqg] {
    background-color: #FFF4E5;
    border-left: 3px solid #E8820C;
    color: #6B4500;
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

.mensaje-info[b-8xd18kvbqg] {
    color: #696969;
    font-size: var(--texto-8pt);
    margin: 0;
    font-style: italic;
}

/* ===== FOOTER ===== */
.modal-footer[b-8xd18kvbqg] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-8xd18kvbqg] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-desactivar-modal[b-8xd18kvbqg] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-desactivar-modal:hover[b-8xd18kvbqg] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible.
       Es un modal de confirmación (texto + 2 botones), sin grid que colapsar. */
    .modal-content[b-8xd18kvbqg] {
        width: 95%;
    }

    /* Los botones del footer bajan de línea si no caben (a ~320px los dos
       botones podrían apretarse). */
    .modal-footer[b-8xd18kvbqg] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalDesactivarKit.razor.rz.scp.css */
/*
   ModalDesactivarKit.razor.css
   Estilos del modal de confirmación de baja lógica del Kit.
   Reusa el patrón de ModalDesactivarArticulo / ModalDesactivarActividad.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-9nbuuzh9yw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-9nbuuzh9yw] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-desactivar-kit[b-9nbuuzh9yw] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-9nbuuzh9yw] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-9nbuuzh9yw] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-9nbuuzh9yw] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-9nbuuzh9yw] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-9nbuuzh9yw] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-9nbuuzh9yw] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.kit-titulo[b-9nbuuzh9yw] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.kit-codigo[b-9nbuuzh9yw] {
    font-family: var(--fuente-codigos);
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.125rem;
}

.kit-nombre[b-9nbuuzh9yw] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mensaje-advertencia[b-9nbuuzh9yw] {
    background-color: #FFF4E5;
    border-left: 3px solid #E8820C;
    color: #6B4500;
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

.mensaje-info[b-9nbuuzh9yw] {
    color: #696969;
    font-size: var(--texto-8pt);
    margin: 0;
    font-style: italic;
}

/* ===== FOOTER ===== */
.modal-footer[b-9nbuuzh9yw] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-9nbuuzh9yw] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-desactivar-modal[b-9nbuuzh9yw] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-desactivar-modal:hover[b-9nbuuzh9yw] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible.
       Es un modal de confirmación (texto + 2 botones), sin grid que colapsar. */
    .modal-content[b-9nbuuzh9yw] {
        width: 95%;
    }

    /* Los botones del footer bajan de línea si no caben (a ~320px los dos
       botones podrían apretarse). */
    .modal-footer[b-9nbuuzh9yw] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalEditarCantidad.razor.rz.scp.css */
/*
   ModalEditarCantidad.razor.css
   Modal mínimo de edición de cantidad de un renglón de Kit.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-uwmc41td1d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-uwmc41td1d] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 22rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-cantidad[b-uwmc41td1d] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-uwmc41td1d] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-uwmc41td1d] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-uwmc41td1d] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-uwmc41td1d] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-uwmc41td1d] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.renglon-info[b-uwmc41td1d] {
    padding: 0.5rem 0.625rem;
    background-color: #F0F0F0;
    border-radius: 0.1875rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-9pt);
}

.form-group[b-uwmc41td1d] {
    margin: 0.5rem 0;
}

.form-group label[b-uwmc41td1d] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #000000;
}

.form-control[b-uwmc41td1d] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-control:focus[b-uwmc41td1d] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.hint-cantidad[b-uwmc41td1d] {
    font-size: var(--texto-7pt);
    color: #696969;
    font-style: italic;
    margin-top: 0.3rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-uwmc41td1d] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-uwmc41td1d] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-uwmc41td1d] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-uwmc41td1d] {
    background-color: #1B5E20;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible.
       Es un modal mínimo de un solo campo vertical, sin grid que colapsar. */
    .modal-content[b-uwmc41td1d] {
        width: 95%;
    }

    /* Los botones del footer bajan de línea si no caben. */
    .modal-footer[b-uwmc41td1d] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalKitDetalle.razor.rz.scp.css */
/*
   ModalKitDetalle.razor.css
   Modal estándar SiREI (header banda azul + body scroll + footer botones).
   Patrón espejo de ModalArticuloDetalle.
*/

.modal-overlay[b-2a03yv4eix] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5rem;
}

.modal-content[b-2a03yv4eix] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    width: 63vw;
    max-width: 56rem;
    max-height: 85vh;
    background-color: #FFFFFF;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-kit-detalle[b-2a03yv4eix] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-2a03yv4eix] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-2a03yv4eix] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-2a03yv4eix] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-2a03yv4eix] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.header-acciones[b-2a03yv4eix] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.boton-lapiz[b-2a03yv4eix] {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: var(--texto-14pt);
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.boton-lapiz:hover[b-2a03yv4eix] {
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-2a03yv4eix] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background-color: #FFFFFF;
}

/* ===== FOOTER ===== */
.modal-footer[b-2a03yv4eix] {
    padding: 0.5rem 0.94rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid #E0E0E0;
    background-color: #FAFAFA;
}

.filtros-relleno[b-2a03yv4eix] {
    flex: 1;
}

.mkd-mensaje-guardado[b-2a03yv4eix] {
    color: #2E7D32;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

.mkd-mensaje-sin-guardar[b-2a03yv4eix] {
    color: #C62828;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-2a03yv4eix] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-2a03yv4eix] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-2a03yv4eix] {
    background-color: #1B5E20;
}

.btn-cerrar-modal[b-2a03yv4eix] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-cerrar-modal:hover[b-2a03yv4eix] {
    background-color: #1B5E20;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-overlay[b-2a03yv4eix] {
        padding-top: 0;
        align-items: stretch;
    }

    .modal-content[b-2a03yv4eix] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalProveedorArticulo.razor.rz.scp.css */
/*
   ModalProveedorArticulo.razor.css
   Modal de agregar/editar relación artículo-proveedor.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-3a8b3hsrk5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-3a8b3hsrk5] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 26rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-proveedor[b-3a8b3hsrk5] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-3a8b3hsrk5] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #5B6C5D;
}

.modal-header h3[b-3a8b3hsrk5] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-3a8b3hsrk5] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-3a8b3hsrk5] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-3a8b3hsrk5] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.form-group[b-3a8b3hsrk5] {
    margin: 0.5rem 0;
    flex: 1;
}

.form-group label[b-3a8b3hsrk5] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #000000;
}

.form-control[b-3a8b3hsrk5] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-control:focus[b-3a8b3hsrk5] {
    outline: 2px solid #5B6C5D;
    outline-offset: -2px;
}

.form-fila[b-3a8b3hsrk5] {
    display: flex;
    gap: 0.625rem;
}

/* Checkbox con label "Marcar como preferido" */
.check-line[b-3a8b3hsrk5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: normal;
    font-size: var(--texto-9pt);
    cursor: pointer;
}

.hint-preferido[b-3a8b3hsrk5] {
    font-size: var(--texto-7pt);
    color: #696969;
    font-style: italic;
    margin-top: 0.2rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-3a8b3hsrk5] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-3a8b3hsrk5] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-3a8b3hsrk5] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-3a8b3hsrk5] {
    background-color: #1B5E20;
}

/* ===== VALIDACIONES ===== */
.mp-error-campo[b-3a8b3hsrk5] {
    display: block;
    color: #C62828;
    font-size: var(--texto-8pt);
    margin-top: 0.25rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible. */
    .modal-content[b-3a8b3hsrk5] {
        width: 95%;
    }

    /* Las filas de 2 columnas (SKU Proveedor+Costo, URL+Tiempo entrega) se
       apilan en una sola columna para que cada campo tenga ancho legible. */
    .form-fila[b-3a8b3hsrk5] {
        flex-direction: column;
        gap: 0;
    }

    /* Los botones del footer bajan de línea si no caben. */
    .modal-footer[b-3a8b3hsrk5] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalSelectorActividad.razor.rz.scp.css */
/*
   ModalSelectorActividad.razor.css
   Modal selector — patrón idéntico a ModalSelectorArticulo.
*/

.modal-overlay[b-ei9r96rity] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
}

.modal-content[b-ei9r96rity] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    width: 72vw;
    max-width: 62rem;
    max-height: calc(100vh - 4rem);
    background-color: #FFFFFF;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-selector[b-ei9r96rity] {
    background-color: #FFFFFF;
}

.modal-header[b-ei9r96rity] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-ei9r96rity] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-ei9r96rity] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-ei9r96rity] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.modal-body[b-ei9r96rity] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background-color: #FFFFFF;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-overlay[b-ei9r96rity] {
        padding-top: 0;
        align-items: stretch;
    }

    .modal-content[b-ei9r96rity] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalSelectorArticulo.razor.rz.scp.css */
/*
   ModalSelectorArticulo.razor.css
   Modal selector — header banda azul + body con CatArticulosLista en
   modo selector. Compartido visualmente con ModalSelectorActividad y
   ModalSelectorKit (mismo CSS replicado para mantener cada archivo aislado).
*/

.modal-overlay[b-dokqu74z9b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
}

.modal-content[b-dokqu74z9b] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    width: 72vw;
    max-width: 62rem;
    max-height: calc(100vh - 4rem);
    background-color: #FFFFFF;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-selector[b-dokqu74z9b] {
    background-color: #FFFFFF;
}

.modal-header[b-dokqu74z9b] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-dokqu74z9b] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-dokqu74z9b] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-dokqu74z9b] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.modal-body[b-dokqu74z9b] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background-color: #FFFFFF;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-overlay[b-dokqu74z9b] {
        padding-top: 0;
        align-items: stretch;
    }

    .modal-content[b-dokqu74z9b] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalSelectorKit.razor.rz.scp.css */
/*
   ModalSelectorKit.razor.css
   Modal selector — patrón idéntico a ModalSelectorArticulo.
*/

.modal-overlay[b-63fdz5tq2w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
}

.modal-content[b-63fdz5tq2w] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    width: 72vw;
    max-width: 62rem;
    max-height: calc(100vh - 4rem);
    background-color: #FFFFFF;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-selector[b-63fdz5tq2w] {
    background-color: #FFFFFF;
}

.modal-header[b-63fdz5tq2w] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-63fdz5tq2w] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-63fdz5tq2w] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-63fdz5tq2w] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

.modal-body[b-63fdz5tq2w] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background-color: #FFFFFF;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-overlay[b-63fdz5tq2w] {
        padding-top: 0;
        align-items: stretch;
    }

    .modal-content[b-63fdz5tq2w] {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Catalogos/ModalTarifa.razor.rz.scp.css */
/*
   ModalTarifa.razor.css
   Estilos isolated del modal de creación/edición de tarifa.
   Replica el patrón de ModalCancelar/ModalRechazar de SiREI.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-036t9myen0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-036t9myen0] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-tarifa[b-036t9myen0] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-036t9myen0] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-036t9myen0] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-036t9myen0] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-036t9myen0] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-036t9myen0] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.form-group[b-036t9myen0] {
    margin: 0.75rem 0;
}

.form-group label[b-036t9myen0] {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #000000;
}

.form-control[b-036t9myen0] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid #808080;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-control:focus[b-036t9myen0] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

/* ===== FOOTER ===== */
.modal-footer[b-036t9myen0] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-036t9myen0] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-guardar-modal[b-036t9myen0] {
    background-color: #2E7D32;
    color: #FFFFFF;
}

.btn-guardar-modal:hover[b-036t9myen0] {
    background-color: #1B5E20;
}

/* ===== MENSAJES DE ERROR ===== */
/* Aviso de tarifa duplicada (cuando el SP retorna 0) */
.mt-error-duplicado[b-036t9myen0] {
    background-color: #FDECEC;
    border-left: 3px solid #C62828;
    color: #B71C1C;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-9pt);
}

/* Error inline de validación local por campo */
.mt-error-campo[b-036t9myen0] {
    display: block;
    color: #B71C1C;
    font-size: var(--texto-8pt);
    margin-top: 0.25rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* En pantalla angosta el modal aprovecha más ancho disponible.
       Los campos ya son verticales (label arriba / input width:100%),
       así que no hay grid que colapsar. */
    .modal-content[b-036t9myen0] {
        width: 95%;
    }

    /* Los botones del footer bajan de línea si no caben. */
    .modal-footer[b-036t9myen0] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/Acordeon.razor.rz.scp.css */
.acordeon[b-ewqfruro74] {
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.acordeon.level-2[b-ewqfruro74] {
    margin-left: 1rem;
    margin-bottom: 0.375rem;
}

.acordeon-header[b-ewqfruro74] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: filter 0.15s;
    flex-wrap: wrap;  /* T03 §3.7.4: en móvil los chips bajan sin desbordar */
}

.acordeon-header:hover[b-ewqfruro74] {
    filter: brightness(0.95);
}

/* T03 §3.6: flecha sube a 8pt para alinear con la jerarquía 8-12pt */
.acordeon-flecha[b-ewqfruro74] {
    font-size: var(--texto-8pt);
    line-height: var(--line-height-compacto);
}

.acordeon-num[b-ewqfruro74] {
    font-weight: bold;
    font-size: var(--texto-10pt);
    min-width: 2rem;
}

.acordeon-titulo[b-ewqfruro74] {
    font-weight: bold;
    font-size: var(--texto-11pt);
}

.acordeon-count[b-ewqfruro74] {
    font-size: var(--texto-9pt);
    font-weight: normal;
    opacity: 0.75;
}

/* ═══════════ Botones inline [+] y [×] junto al título ═══════════
   Patrón del wireframe (sec Accordion líneas 158-198):
   cajitas pequeñas, fondo translúcido en Level 1 / fondo distintivo en Level 2.
*/
.acordeon-btn-agregar[b-ewqfruro74],
.acordeon-btn-eliminar[b-ewqfruro74],
.acordeon-btn-editar[b-ewqfruro74] {
    padding: 0.0625rem 0.5rem;
    border-radius: 0.1875rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    line-height: var(--line-height-normal);
}

.acordeon.level-1 .acordeon-btn-agregar[b-ewqfruro74],
.acordeon.level-1 .acordeon-btn-eliminar[b-ewqfruro74],
.acordeon.level-1 .acordeon-btn-editar[b-ewqfruro74] {
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: var(--texto-10pt);
}

.acordeon.level-1 .acordeon-btn-agregar:hover[b-ewqfruro74],
.acordeon.level-1 .acordeon-btn-eliminar:hover[b-ewqfruro74],
.acordeon.level-1 .acordeon-btn-editar:hover[b-ewqfruro74] {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Lápiz en estado "editando": ✓ — se resalta para indicar modo activo. */
.acordeon.level-1 .acordeon-btn-editar.editando[b-ewqfruro74] {
    background-color: rgba(255, 255, 255, 0.5);
}

.acordeon.level-2 .acordeon-btn-agregar[b-ewqfruro74] {
    background-color: #546B85;
    color: #FFFFFF;
    font-size: var(--texto-8pt);
}

.acordeon.level-2 .acordeon-btn-agregar:hover[b-ewqfruro74] {
    background-color: #3D5269;
}

.acordeon.level-2 .acordeon-btn-eliminar[b-ewqfruro74] {
    background-color: #FEE2E2;
    color: #CC0000;
    font-size: var(--texto-8pt);
}

.acordeon.level-2 .acordeon-btn-eliminar:hover[b-ewqfruro74] {
    background-color: #FECACA;
}

/* Subtotal y horas al final del header (zona derecha) */
.acordeon-meta[b-ewqfruro74] {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    font-size: var(--texto-9pt);  /* T03 §3.6: unifica meta a 9pt (antes 10pt) */
}

.acordeon-horas[b-ewqfruro74] {
    font-weight: normal;
    opacity: 0.85;
}

.acordeon-subtotal[b-ewqfruro74] {
    font-weight: bold;
}

.acordeon-contenido[b-ewqfruro74] {
    background-color: #FFFFFF;
    padding: 0.5rem 0.75rem;
}

/* ═══════════ Responsive móvil — touch targets ≥44×44px ═══════════
   T03 §3.7.2: los botones inline [+] y [×] son hot zones críticos.
   En móvil hay que asegurar área mínima clickeable según lineamientos UX
   (Apple HIG 44pt, Android Material 48dp).
*/
@media (max-width: 768px) {
    .acordeon-btn-agregar[b-ewqfruro74],
    .acordeon-btn-eliminar[b-ewqfruro74],
    .acordeon-btn-editar[b-ewqfruro74] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.5rem 0.875rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/BannerCostoBajo.razor.rz.scp.css */
.costo-bajo-banner[b-964zuoo6o3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #FFF3E0;
    border: 1px solid #FFCC80;
    border-left: 4px solid #E8820C;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: var(--texto-10pt);
}

.cb-icon[b-964zuoo6o3] {
    color: #E8820C;
    font-size: var(--texto-14pt);
}

.cb-text[b-964zuoo6o3] {
    flex: 1;
    color: #5D4037;
}

.cb-link[b-964zuoo6o3] {
    color: #1565C0;
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
}

.cb-link:hover[b-964zuoo6o3] {
    color: #0D47A1;
}

.cb-close[b-964zuoo6o3] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #5D4037;
    font-size: var(--texto-10pt);
    padding: 0.125rem 0.375rem;
    border-radius: 0.1875rem;
}

.cb-close:hover[b-964zuoo6o3] {
    background-color: rgba(0, 0, 0, 0.08);
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/BarraFiltros.razor.rz.scp.css */
/* Color de fondo de la barra de filtros del Cotizador (azul claro institucional).
   El resto del estilo (padding, gap, display flex) viene de .barra-filtros en app.css. */
.cot-filtros[b-73f91of4ou] {
    background-color: var(--color-coti-claro);
}

/* Agrupador interno: label + checkboxes/select del mismo grupo. No existe globalmente. */
.bf-grupo[b-73f91of4ou] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ✕ pequeña pegada a la derecha del campo de texto "Buscar...". Limpia solo el texto.
   margin-left negativo para anular la separación que el textbox deja a su derecha
   vía el gap de la barra y quedar visualmente pegada al input. */
.bf-limpia-texto[b-73f91of4ou] {
    margin-left: -0.25rem;
    padding: 0 0.25rem;
    border: none;
    background: transparent;
    color: #696969;
    font-size: var(--texto-9pt);
    line-height: 1;
    cursor: pointer;
}

.bf-limpia-texto:hover[b-73f91of4ou] {
    color: var(--color-coti);
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/BotonEditar.razor.rz.scp.css */
/*
   BotonEditar — ícono ✎/✓ inline para tablas del Levantamiento.

   T03 §3.6: tamaño unificado a 10pt (antes 12pt) — alinea con BotonEliminar.
   T03 §3.7.2: touch target ≥44×44px en móvil para cumplir lineamiento Apple HIG / Android.
*/
.edit-pencil[b-wq0nxwd59z] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1565C0;
    font-size: var(--texto-10pt);
    padding: 0.125rem 0.25rem;
    line-height: var(--line-height-compacto);
    border-radius: 0.1875rem;
    transition: background-color 0.15s;
}

.edit-pencil:hover:not(:disabled)[b-wq0nxwd59z] {
    background-color: rgba(21, 101, 192, 0.1);
}

.edit-pencil.editando[b-wq0nxwd59z] {
    color: #2E7D32;
}

.edit-pencil.editando:hover:not(:disabled)[b-wq0nxwd59z] {
    background-color: rgba(46, 125, 50, 0.1);
}

.edit-pencil:disabled[b-wq0nxwd59z] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════ Responsive móvil — touch target ≥44×44px ═══════════ */
@media (max-width: 768px) {
    .edit-pencil[b-wq0nxwd59z] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/BotonEliminar.razor.rz.scp.css */
/*
   BotonEliminar — ícono ✕ rojo inline para tablas del Levantamiento.

   T03 §3.6: tamaño 10pt confirmado (alinea con BotonEditar).
   T03 §3.7.2: touch target ≥44×44px en móvil.
*/
.remove-btn[b-saz6ge4yw3] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #CC0000;
    font-size: var(--texto-10pt);
    font-weight: bold;
    padding: 0.125rem 0.25rem;
    line-height: var(--line-height-compacto);
    border-radius: 0.1875rem;
    transition: background-color 0.15s;
}

.remove-btn:hover:not(:disabled)[b-saz6ge4yw3] {
    background-color: rgba(204, 0, 0, 0.1);
}

.remove-btn:disabled[b-saz6ge4yw3] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Variante "cancelar edición": gris en lugar de rojo. No borra, solo descarta
   los cambios de un renglón que ya existía. */
.remove-btn.cancelar[b-saz6ge4yw3] {
    color: #6B6B6B;
}

.remove-btn.cancelar:hover:not(:disabled)[b-saz6ge4yw3] {
    background-color: rgba(107, 107, 107, 0.12);
}

/* ═══════════ Responsive móvil — touch target ≥44×44px ═══════════ */
@media (max-width: 768px) {
    .remove-btn[b-saz6ge4yw3] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/CeldaCalc.razor.rz.scp.css */
.calc-cell[b-7os0j6pdhc] {
    display: inline-block;
    padding: 0.0625rem 0.25rem;
    background-color: #F5F5F5;
    color: #424242;
    border-radius: 0.1875rem;
    font-family: inherit;
    cursor: help;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EngraneKit.razor.rz.scp.css */
.kit-gear[b-tyoosyrmyk] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #E8820C;
    font-size: var(--texto-12pt);
    padding: 0.125rem 0.25rem;
    line-height: var(--line-height-compacto);
    border-radius: 0.1875rem;
    transition: background-color 0.15s;
}

.kit-gear:hover[b-tyoosyrmyk] {
    background-color: rgba(232, 130, 12, 0.1);
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/Etiqueta.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css): border-radius, font-weight bold, text-align, padding, margin-right.
   El color de fondo/texto viene inline desde el Razor. */
.cot-etiqueta-generica[b-0rinx3xdru] {
    display: inline-block;
    font-size: var(--texto-9pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaACT.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css). Sobrescribe padding mas compacto y aplica colores ACT. */
.cot-etiqueta-act[b-dydwh1m7v0] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: var(--texto-7pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
    background-color: #FFF3E0;
    color: #E65100;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaART.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css). Sobrescribe padding mas compacto y aplica colores ART. */
.cot-etiqueta-art[b-e6ljmblbc6] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: var(--texto-7pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
    background-color: #E3F2FD;
    color: #1565C0;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaBloque.razor.rz.scp.css */
/* Chip de Bloque del Kit (CAM, NVR, CA, CAB, AV).
   Homologado al chip .cot-etiqueta-estatus para que todos los chips del módulo
   tengan exactamente el mismo alto/padding/border-radius y solo varíe el color
   de fondo. */
.cot-etiqueta-bloque[b-hi0xsbcdaq] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    white-space: nowrap;
    background-color: var(--color-coti);
    color: #FFFFFF;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaEstatus.razor.rz.scp.css */
/* Chip de estatus Activo/Inactivo del módulo Cotizador.
   Tamaño homologado al chip .tag-productivo de Actividades (var(--texto-7pt))
   para que no se vea desproporcionado frente a otros chips del módulo.
   Hereda border/font-weight de la clase global .etiqueta de app.css. */
.cot-etiqueta-estatus[b-mryuh7uz7f] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    white-space: nowrap;
    color: #FFFFFF;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaKit.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css). Sobrescribe padding mas compacto y aplica colores Kit (morado claro). */
.cot-etiqueta-kit[b-ozrapecl3e] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: var(--texto-7pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
    background-color: #F3E5F5;
    color: #7B1FA2;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaMod.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css). Sobrescribe padding mas compacto y aplica colores MOD (morado SiREI). */
.cot-etiqueta-mod[b-n2ocd90yy3] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: var(--texto-7pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
    background-color: #F3E5F5;
    color: #990066;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/EtiquetaOrigen.razor.rz.scp.css */
/* Hereda de .etiqueta global (app.css). Sobrescribe padding mas compacto. Bg y color vienen inline desde el Razor. */
.cot-etiqueta-origen[b-huw8mty8c1] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    font-size: var(--texto-7pt);
    line-height: var(--line-height-compacto);
    letter-spacing: 0.03em;
    white-space: nowrap;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/IndicadorEstatus.razor.rz.scp.css */
/*
   IndicadorEstatus — alineado al SPEC_levantamiento_v2 sec 7 y al wireframe (líneas 154-189).
   Wrapper inline-flex de 22x22. Símbolo o círculo dentro.
*/

.ind-estatus[b-dsahkwu6x4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.625rem;
    flex-shrink: 0;
    cursor: help;
}

/* complete / partial / empty = círculo coloreado de 22x22 con símbolo blanco */
.ind-circulo[b-dsahkwu6x4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: var(--texto-10pt);
    font-weight: bold;
    line-height: var(--line-height-compacto);
}

.ind-circulo-complete[b-dsahkwu6x4] {
    background-color: var(--color-terminado);
}

.ind-circulo-partial[b-dsahkwu6x4] {
    background-color: #F59E0B;
}

.ind-circulo-empty[b-dsahkwu6x4] {
    background-color: #A9A9A9;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/PuntoMod.razor.rz.scp.css */
.mod-dot[b-m61rei20zk] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #990066;
    margin-left: 0.25rem;
    vertical-align: middle;
    cursor: help;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/RenglonAtomico.razor.rz.scp.css */
.atom-row[b-60g1uhuvco] {
    transition: background-color 0.15s;
}

.atom-row:hover[b-60g1uhuvco] {
    background-color: #FAFAFA;
}

.atom-row.editando[b-60g1uhuvco] {
    background-color: #FFFDE7;
}

.ar-idx[b-60g1uhuvco] {
    color: #9E9E9E;
    font-size: var(--texto-9pt);
    font-family: var(--fuente-codigos);
    width: 2rem;
    text-align: right;
    padding-right: 0.5rem;
}

.ar-etiqueta[b-60g1uhuvco] {
    width: 2.5rem;
    white-space: nowrap;
}

.ar-descripcion[b-60g1uhuvco] {
    font-size: var(--texto-10pt);
    color: #212121;
}

.ar-acciones[b-60g1uhuvco] {
    text-align: right;
    white-space: nowrap;
    width: 4rem;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/RenglonKit.razor.rz.scp.css */
.kit-item[b-xq8inmj3f0] {
    border: 1px solid #E1F5FE;
    border-radius: 0.1875rem;
    margin: 0.25rem 0;
    background-color: #FAFCFE;
}

.kit-header[b-xq8inmj3f0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    user-select: none;
}

.kit-header:hover[b-xq8inmj3f0] {
    background-color: #F0F8FF;
}

.kit-flecha[b-xq8inmj3f0] {
    font-size: var(--texto-7pt);
    color: #1565C0;
}

.kit-codigo[b-xq8inmj3f0] {
    font-weight: bold;
    font-family: var(--fuente-codigos);
    font-size: var(--texto-10pt);
    color: #1565C0;
}

.kit-nombre[b-xq8inmj3f0] {
    flex: 1;
    font-size: var(--texto-10pt);
}

.kit-cantidad[b-xq8inmj3f0] {
    font-size: var(--texto-10pt);
    color: #616161;
    font-weight: bold;
}

.kit-subtotal[b-xq8inmj3f0] {
    font-weight: bold;
    font-size: var(--texto-10pt);
    color: #212121;
    min-width: 6rem;
    text-align: right;
}

.kit-acciones[b-xq8inmj3f0] {
    display: flex;
}

.kit-contenido[b-xq8inmj3f0] {
    padding: 0.25rem 0.5rem 0.375rem 1.5rem;
    background-color: #FFFFFF;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Componentes/TablaCompacta.razor.rz.scp.css */
.data-table[b-kg351jgmw6] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-10pt);
}

.data-table thead th[b-kg351jgmw6] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #BDBDBD;
}

.data-table tbody td[b-kg351jgmw6] {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #EEEEEE;
}

.data-table tbody tr:hover[b-kg351jgmw6] {
    background-color: #FAFAFA;
}

.sin-datos[b-kg351jgmw6] {
    text-align: center;
    color: #9E9E9E;
    font-style: italic;
    padding: 1rem !important;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/BriefConsultivo.razor.rz.scp.css */
/*
   BriefConsultivo.razor.css
   Tarjeta colapsable verde claro para el Brief Consultivo.
   SPEC sec 12 (líneas 1809-1961).
*/

.brief-tarjeta[b-kint5m4rtl] {
    margin-top: 0.625rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* ═══════════ Estado sin Brief (discreto, gris) ═══════════ */
.brief-cabecera-vacia[b-kint5m4rtl] {
    background-color: #F5F5F5;
    border: 1px solid #E0E0E0;
    padding: 0.375rem 0.625rem;
    font-size: var(--texto-9pt);
    border-radius: 0.25rem;
    user-select: none;
}

.brief-titulo-vacio[b-kint5m4rtl] {
    font-weight: bold;
    color: #696969;
}

/* ═══════════ Cabecera (siempre visible) ═══════════ */
.brief-cabecera[b-kint5m4rtl] {
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
    padding: 0.375rem 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: var(--texto-9pt);
    border-radius: 0.25rem;
    user-select: none;
}

.brief-cabecera-abierta[b-kint5m4rtl] {
    border-radius: 0.25rem 0.25rem 0 0;
    border-bottom: none;
}

.brief-cabecera:hover[b-kint5m4rtl] {
    background-color: #D7E9D9;
}

.brief-cabecera-izq[b-kint5m4rtl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brief-titulo[b-kint5m4rtl] {
    font-weight: bold;
    color: var(--color-coti);
}

.brief-badge-actualizado[b-kint5m4rtl] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.0625rem 0.375rem;
    background-color: #FFF3E0;             /* Crema muy claro, sin variable canónica. */
    border: 1px solid #FFB74D;             /* Naranja claro de borde, sin variable canónica. */
    color: var(--color-coti-naranja);      /* Unificación: aviso = naranja institucional del módulo. */
    border-radius: 0.5rem;
}

.brief-cabecera-der[b-kint5m4rtl] {
    color: #696969;
    font-size: var(--texto-8pt);
}

.brief-hint[b-kint5m4rtl] {
    color: #696969;
}

.brief-link-historial[b-kint5m4rtl] {
    color: var(--color-coti);
    cursor: pointer;
    text-decoration: underline dotted;
    font-size: var(--texto-7pt);
}

.brief-link-historial:hover[b-kint5m4rtl] {
    text-decoration: underline;
}

/* ═══════════ Cuerpo expandido ═══════════ */
.brief-cuerpo[b-kint5m4rtl] {
    padding: 0.625rem 0.75rem;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
    border: 1px solid #A5D6A7;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    color: #212121;
}

.brief-campo[b-kint5m4rtl] {
    margin-bottom: 0.625rem;
}

.brief-campo:last-child[b-kint5m4rtl] {
    margin-bottom: 0;
}

.brief-campo-label[b-kint5m4rtl] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.1875rem;
}

.brief-campo-valor[b-kint5m4rtl] {
    font-size: var(--texto-9pt);
    color: #212121;
    line-height: var(--line-height-holgado);
    white-space: pre-line;
}

/* ═══════════ Chip de perfil de compra ═══════════ */
.brief-chip-perfil[b-kint5m4rtl] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    font-size: var(--texto-8pt);
    font-weight: bold;
    border: 1px solid;
    border-radius: 0.75rem;
}

/* ═══════════ Responsive (EST_01) ═══════════ */
@media (max-width: 768px) {

    /* Cabecera colapsable: más alto vertical para acercarla al área táctil de 44px. */
    .brief-cabecera[b-kint5m4rtl] {
        padding: 0.75rem 0.625rem;
    }

    /* Link "Ver historial": padding para separarlo del título y darle área táctil. */
    .brief-link-historial[b-kint5m4rtl] {
        display: inline-block;
        padding: 0.375rem 0.25rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/DetalleCotizacion.razor.rz.scp.css */
/*
   DetalleCotizacion.razor.css
   Estilos isolated de la pantalla principal del Detalle del Cotizador.
   SPEC sec 6 (header) + sec 12 (brief — sub-componente con sus propios estilos).
*/

/* Pega la BarraFiltros al topbar (mismo patrón que ConsultaProcesa) */
.contenedor-principal-sirei[b-ht01wnaeua] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER DEL DETALLE — bloque blanco con borde
   SPEC sec 6.1
   ═══════════════════════════════════════════════════════════════ */
.cot-detalle-header[b-ht01wnaeua] {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.875rem 1.125rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ─── Fila 1 — Identificación + Versión + Botones ─── */
.cot-fila1[b-ht01wnaeua] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cot-fila1-izq[b-ht01wnaeua] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cot-id-titulo[b-ht01wnaeua] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: #212121;
}

.cot-version-texto[b-ht01wnaeua] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-left: 0.25rem;
}

.cot-etiqueta-version-wrap[b-ht01wnaeua] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--texto-9pt);
    color: #696969;
}

.cot-etiqueta-version-italic[b-ht01wnaeua] {
    font-style: italic;
    color: #696969;
}

.cot-etiqueta-version-placeholder[b-ht01wnaeua] {
    color: #BDBDBD;
    font-style: normal;
}

.cot-etiqueta-version-lapiz[b-ht01wnaeua] {
    cursor: pointer;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.125rem;
    color: var(--color-coti);
    font-size: var(--texto-8pt);
    user-select: none;
}

.cot-etiqueta-version-lapiz:hover[b-ht01wnaeua] {
    background-color: #E3F2FD;
}

.cot-etiqueta-version-sep[b-ht01wnaeua] {
    font-size: var(--texto-9pt);
    color: #696969;
}

.cot-etiqueta-version-input[b-ht01wnaeua] {
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    font-size: var(--texto-9pt);
    font-style: italic;
    width: 11.25rem;
    background-color: #FFFFFF;
    color: #212121;
}

.cot-etiqueta-version-input:focus[b-ht01wnaeua] {
    outline: none;
}

.cot-autoguardado[b-ht01wnaeua] {
    font-size: var(--texto-7pt);
    color: #008000;
    margin-left: 0.75rem;
}

/* ─── Lado derecho de la Fila 1 — Controles y botones ─── */
.cot-fila1-der[b-ht01wnaeua] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cot-preset-pdf[b-ht01wnaeua] {
    font-size: var(--texto-9pt);
    padding: 0.25rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    background-color: #FFFFFF;
    cursor: pointer;
}

.cot-margen-global[b-ht01wnaeua] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    background-color: #FFFFFF;
}

.cot-margen-global-label[b-ht01wnaeua] {
    font-size: var(--texto-8pt);
    color: #696969;
}

.cot-margen-global-input[b-ht01wnaeua] {
    width: 3.125rem;
    font-size: var(--texto-9pt);
    padding: 0.125rem 0.25rem;
    border: none;
    text-align: right;
    outline: none;
    background-color: transparent;
}

.cot-margen-global-pct[b-ht01wnaeua] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* ─── Botones del header ─── */
.cot-fila1-der .boton-chico[b-ht01wnaeua] {
    font-size: var(--texto-8pt);
}

.cot-boton-clonar[b-ht01wnaeua] {
    background-color: #FFFFFF;
    color: #424242;
    border: 1px solid #BDBDBD;
}

.cot-boton-clonar:hover[b-ht01wnaeua] {
    background-color: #F5F5F5;
}

/* M2 — Guardar = acción positiva primaria, verde institucional como Costeo Final / Ganada. */
.cot-boton-guardar[b-ht01wnaeua] {
    background-color: var(--color-home);
    color: #FFFFFF;
}

.cot-boton-guardar:hover[b-ht01wnaeua] {
    /* No existe --color-home-oscuro en app.css; hex literal documentado como deuda T16. */
    background-color: #006400;
}

/* M3 — Costeo Final = acción positiva (verde institucional). */
.cot-boton-costeo-final[b-ht01wnaeua] {
    background-color: var(--color-home);
    color: #FFFFFF;
}

.cot-boton-costeo-final:hover[b-ht01wnaeua] {
    background-color: #006400;
}

/* PDF = rojo Adobe (semántico). Se queda como hex literal — no es regresión. */
.cot-boton-pdf[b-ht01wnaeua] {
    background-color: #FF2400;
    color: #FFFFFF;
    border: 1px solid #C61E00;
    font-weight: bold;
}

.cot-boton-pdf:hover[b-ht01wnaeua] {
    background-color: #C61E00;
}

/* M3 — Ganada = acción positiva (verde institucional, mismo tono que Costeo Final). */
.cot-boton-ganada[b-ht01wnaeua] {
    background-color: var(--color-home);
    color: #FFFFFF;
}

.cot-boton-ganada:hover[b-ht01wnaeua] {
    background-color: #006400;
}

/* M3 — Perdida = acción negativa (rojo institucional). */
.cot-boton-perdida[b-ht01wnaeua] {
    background-color: var(--color-panel);
    color: #FFFFFF;
}

.cot-boton-perdida:hover[b-ht01wnaeua] {
    background-color: #990000;
}

/* H07 — Separador visual entre el grupo de captura del vendedor
   (Preset PDF / Margen Global / Solicitar Aut. Margen) y los botones de acción
   (Clonar / Guardar / Costeo Final / PDF / Ganada / Perdida). */
.cot-fila1-der-sep[b-ht01wnaeua] {
    display: inline-block;
    width: 1px;
    height: 1.5rem;
    background-color: var(--color-border);
    margin: 0 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════
   BANNER COSTO BAJO (wrapper para margin-top)
   ═══════════════════════════════════════════════════════════════ */
.cot-banner-wrap[b-ht01wnaeua] {
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   FILA 2 — Datos generales
   SPEC sec 6.4
   ═══════════════════════════════════════════════════════════════ */
.cot-fila2-datos[b-ht01wnaeua] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.5rem;
    font-size: var(--texto-9pt);
}

.cot-dato-label[b-ht01wnaeua] {
    color: #696969;
}

.cot-dato-origen[b-ht01wnaeua] {
    color: var(--color-coti);
}

.cot-dato-origen-tecnico[b-ht01wnaeua] {
    color: #696969;
    font-size: var(--texto-8pt);
}

.cot-dato-pendiente[b-ht01wnaeua] {
    color: var(--color-coti-naranja);   /* Naranja institucional — aviso de pendiente de reconciliar */
    font-style: italic;
    font-size: var(--texto-9pt);
}

/* Lista de causas del estado de error (id inválido / sin permisos).
   Mismo patrón visual que LevantamientoEstructurado. */
.lista-causas[b-ht01wnaeua] {
    display: inline-block;
    text-align: left;
    padding-left: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   FILA 3a — Banda azul COSTO TOTAL
   SPEC sec 6.5
   ═══════════════════════════════════════════════════════════════ */
.cot-banda-costo[b-ht01wnaeua] {
    display: flex;
    flex-wrap: wrap;                                    /* Defensa overflow en móvil ≤480px con monto grande + métricas. */
    row-gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--color-coti);
    border-radius: 0.25rem;
    color: #FFFFFF;
}

.cot-banda-monto[b-ht01wnaeua] {
    font-size: var(--texto-11pt);
    font-weight: bold;
}

.cot-banda-metricas[b-ht01wnaeua] {
    font-size: var(--texto-9pt);
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   FILA 3b — Banda naranja PRECIO TOTAL
   ═══════════════════════════════════════════════════════════════ */
.cot-banda-precio[b-ht01wnaeua] {
    display: flex;
    flex-wrap: wrap;                                    /* Defensa overflow en móvil ≤480px: badge alerta-margen + métricas. */
    row-gap: 0.25rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.375rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--color-coti-naranja);
    border-radius: 0.25rem;
    color: #FFFFFF;
}

.cot-banda-monto-precio[b-ht01wnaeua] {
    font-size: var(--texto-11pt);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cot-banda-alerta-margen[b-ht01wnaeua] {
    font-size: var(--texto-8pt);
    padding: 0.125rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.1875rem;
    font-weight: normal;
}

.cot-banda-metricas-precio[b-ht01wnaeua] {
    font-size: var(--texto-9pt);
    opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════════
   R2.3 — Barra delgada de resumen COSTO - MARGEN - PRECIO
   Sustituye a las 2 bandas individuales cuando el usuario tiene
   AMBOS permisos (PuedeVerCosto && PuedeVerPrecio). Una sola línea
   compacta, fondo azul institucional, texto blanco; el % de margen
   colorea verde claro / rojo claro / blanco según umbral.
   Las clases .cot-banda-costo / .cot-banda-precio siguen vivas
   para los usuarios mono-permiso.
   ═══════════════════════════════════════════════════════════════ */
.cot-banda-resumen[b-ht01wnaeua] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    padding: 0.5rem 0.875rem;
    border-radius: 0.25rem;
    font-size: var(--texto-11pt);
    margin: 0.5rem 0;
    line-height: var(--line-height-normal);
    overflow-wrap: break-word;                          /* Permite envolver en pantallas angostas. */
}

/* Margen ≥ umbral: verde claro Material — deuda T17 hasta canonizar
   --color-coti-verde-claro en app.css. */
.cot-banda-resumen .margen-ok[b-ht01wnaeua] {
    color: #E8F5E9;
}

/* Margen < umbral: rojo claro Material — deuda T17 hasta canonizar
   --color-coti-rojo-claro en app.css. */
.cot-banda-resumen .margen-alerta[b-ht01wnaeua] {
    color: #FFEBEE;
}

/* ═══════════════════════════════════════════════════════════════
   R1/P11 — Botón [Solicitar Aut. Margen]
   Vive en la fila 1 (cot-fila1-der) antes de [Clonar]. Color naranja
   institucional (mismo tono que la banda PRECIO TOTAL) para señalar que
   es un disparador asociado al precio, no al costo. Visible solo cuando
   el margen efectivo cae bajo 36% y el usuario tiene PuedeEditarPrecio.
   ═══════════════════════════════════════════════════════════════ */
.cot-boton-solicitar-aut[b-ht01wnaeua] {
    background-color: var(--color-coti-naranja);
    color: #FFFFFF;
    border: 1px solid var(--color-coti-naranja);
}

.cot-boton-solicitar-aut:hover[b-ht01wnaeua] {
    background-color: var(--color-coti-naranja-oscuro);
    border-color: var(--color-coti-naranja-oscuro);
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN + AGREGAR SECCIÓN (SPEC sec 7)
   ═══════════════════════════════════════════════════════════════ */
.cot-agregar-seccion-wrap[b-ht01wnaeua] {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    text-align: left;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cot-boton-agregar-seccion[b-ht01wnaeua] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
    font-size: var(--texto-8pt);
    padding: 0.375rem 0.875rem;
}

.cot-boton-agregar-seccion:hover[b-ht01wnaeua] {
    background-color: var(--color-coti-oscuro);
}

/* R5c — [Restaurar]: acción secundaria (no destructiva) junto a Agregar Sección.
   Estilo outline del módulo para diferenciarla del botón primario relleno. */
.cot-boton-restaurar-seccion[b-ht01wnaeua] {
    background-color: #FFFFFF;
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
    font-size: var(--texto-8pt);
    padding: 0.375rem 0.875rem;
}

.cot-boton-restaurar-seccion:hover[b-ht01wnaeua] {
    background-color: var(--color-coti-claro);
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN DE SOLUCIÓN VACÍA (P01) — estado sin renglones.
   Texto atenuado dentro del acordeón; los renglones llegan en P02.
   ═══════════════════════════════════════════════════════════════ */
.cot-seccion-vacia[b-ht01wnaeua] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL DE RENGLONES (P02)
   La grid de 12 columnas (KitTableHeader + RenglonListaPlana) mide ~51rem.
   El acordeón usa overflow:hidden, así que en pantallas ≤768px las columnas
   derechas (Total, Hrs y los botones ✎/✓/✕/🗑) quedaban recortadas e
   inalcanzables. Este contenedor habilita scroll horizontal controlado
   DENTRO del acordeón sin deformar la tabla densa (aceptable en tablas anchas).
   ═══════════════════════════════════════════════════════════════ */
.cot-renglones-scroll[b-ht01wnaeua] {
    overflow-x: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* La fila 1 del header apila identificación (izq) y controles/botones (der)
       para que no se compriman en pantallas chicas (≈360px). */
    .cot-fila1[b-ht01wnaeua] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .cot-fila1-der[b-ht01wnaeua] {
        justify-content: flex-start;
    }

    /* El input de etiqueta de versión no debe rebasar el ancho del header. */
    .cot-etiqueta-version-input[b-ht01wnaeua] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* R1/P11 — Touch targets ≥44px para controles del vendedor en móvil:
       dropdown Preset PDF, input Margen Global y botón [Solicitar Aut. Margen]. */
    .cot-preset-pdf[b-ht01wnaeua],
    .cot-margen-global-input[b-ht01wnaeua],
    .cot-boton-solicitar-aut[b-ht01wnaeua] {
        min-height: 2.75rem;
    }

    /* En móvil el header se apila vertical: el separador vertical pierde sentido. */
    .cot-fila1-der-sep[b-ht01wnaeua] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   F01 — Notas internas (bloque solo lectura del header en modo consulta).
   Se muestra entre el Brief y la banda PRECIO solo si la cotización
   tiene texto capturado. La edición vive en R5.
   ═══════════════════════════════════════════════════════════════ */
.cot-notas-internas[b-ht01wnaeua] {
    font-size: var(--texto-10pt);
    color: var(--color-text-primary);
    font-style: italic;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-coti-claro);
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    white-space: normal;
    line-height: var(--line-height-normal);
    overflow-wrap: break-word;                          /* Defensa para texto largo sin espacios (URLs, identificadores). */
}

.cot-notas-internas-label[b-ht01wnaeua] {
    display: block;
    font-style: normal;
    font-weight: bold;
    color: var(--color-coti);
    font-size: var(--texto-8pt);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

/* ═══════════════════════════════════════════════════════════════
   F21 — Banner "Requiere Autorización de Margen".
   Visible a quien ve el precio cuando la cotización está esperando
   aprobación. Vive entre la fila 2 de datos y la banda PRECIO TOTAL.
   ═══════════════════════════════════════════════════════════════ */
.cot-banner-aut-margen[b-ht01wnaeua] {
    background-color: #FFF4E5;                          /* Crema pálido, sin variable canónica. */
    border-left: 4px solid var(--color-coti-naranja-oscuro);
    color: var(--color-coti-naranja-texto);
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-10pt);
    border-radius: 0.25rem;
    margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   R5a — Título rico de la sección de solución en la cabecera del acordeón:
   «TIPO» (fijo, mayúsculas) - suffix, con ✎ para renombrar inline el suffix.
   El acordeón Level-1 pinta el header en color institucional con texto blanco,
   por eso el TIPO y el suffix se leen en blanco y el ✎ usa el patrón translúcido
   de los botones inline del acordeón.
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper inline-flex del título rico (calco de .cot-etiqueta-version-wrap). El span
   .acordeon-titulo que lo aloja es inline plano: sin este contenedor flex el input no
   tendría un ancho de referencia y el width:100% en móvil no surtiría. min-width:0
   permite que el input encoja por debajo de su contenido sin desbordar el header. */
.cot-seccion-titulo-wrap[b-ht01wnaeua] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.cot-seccion-titulo-tipo[b-ht01wnaeua] {
    font-weight: bold;
}

.cot-seccion-titulo-sep[b-ht01wnaeua] {
    margin: 0 0.25rem;
    opacity: 0.85;
}

.cot-seccion-titulo-suffix[b-ht01wnaeua] {
    font-weight: normal;
}

.cot-seccion-suffix-lapiz[b-ht01wnaeua] {
    cursor: pointer;
    padding: 0.0625rem 0.5rem;
    margin-left: 0.375rem;
    border-radius: 0.1875rem;
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: var(--texto-10pt);
    font-weight: bold;
    line-height: var(--line-height-normal);
    user-select: none;
}

.cot-seccion-suffix-lapiz:hover[b-ht01wnaeua] {
    background-color: rgba(255, 255, 255, 0.4);
}

.cot-seccion-suffix-input[b-ht01wnaeua] {
    padding: 0.125rem 0.375rem;
    border: 1px solid #FFFFFF;
    border-radius: 0.125rem;
    font-size: var(--texto-11pt);
    width: 11.25rem;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
    color: var(--color-text-primary);
}

.cot-seccion-suffix-input:focus[b-ht01wnaeua] {
    outline: none;
}

/* Aviso de choque (el par TIPO - suffix ya existe). Chip claro sobre el header oscuro. */
.cot-seccion-suffix-choque[b-ht01wnaeua] {
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.1875rem;
    background-color: #FEE2E2;
    color: #CC0000;
    font-size: var(--texto-8pt);
    font-weight: bold;
}

/* Flechas ▲▼ de reorden de sección (R5d.1) — calco del molde del ✎ (.cot-seccion-suffix-lapiz):
   chip translúcido blanco sobre el header azul, sin px estructural ni variable inventada. */
.cot-seccion-orden-flecha[b-ht01wnaeua] {
    cursor: pointer;
    padding: 0.0625rem 0.5rem;
    margin-left: 0.375rem;
    border-radius: 0.1875rem;
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: var(--texto-10pt);
    font-weight: bold;
    line-height: var(--line-height-normal);
    user-select: none;
}

.cot-seccion-orden-flecha:hover[b-ht01wnaeua] {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Deshabilitada (hay choque de nombre activo): se atenúa y no responde al cursor.
   Sin color nuevo — solo opacidad y cursor, sobre el mismo chip translúcido. */
.cot-seccion-orden-flecha-off[b-ht01wnaeua] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cot-seccion-orden-flecha-off:hover[b-ht01wnaeua] {
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
    /* En móvil el wrapper toma todo el ancho del header para que el input pueda crecer
       (sin esto su width:100% se mediría contra el contenido shrink-to-fit, no el header). */
    .cot-seccion-titulo-wrap[b-ht01wnaeua] {
        width: 100%;
    }

    /* El input del suffix llena el ancho del wrapper sin rebasar el header apilado. */
    .cot-seccion-suffix-input[b-ht01wnaeua] {
        width: 100%;
    }

    /* Touch target ≥44px para el lápiz de renombrar en móvil. */
    .cot-seccion-suffix-lapiz[b-ht01wnaeua] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Touch target ≥44px para las flechas de reorden en móvil (mismo molde que el ✎). */
    .cot-seccion-orden-flecha[b-ht01wnaeua] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EK1-a — Banner de resultado de la operación al Kit (Restaurar).
   Calco del molde de .cot-banner-aut-margen: borde-left con la variable
   canónica del módulo (verde terminado / rojo panel) + fondo claro
   literal (mismo criterio del banner de aut-margen, sin variable canónica
   de fondo). Verde = OK, rojo = error.
   ═══════════════════════════════════════════════════════════════ */
.cot-banner-operacion-ok[b-ht01wnaeua],
.cot-banner-operacion-error[b-ht01wnaeua] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;                                    /* Mensaje largo ≤360px envuelve, no comprime el span contra la ×. */
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: var(--texto-10pt);
    border-radius: 0.25rem;
}

.cot-banner-operacion-ok[b-ht01wnaeua] {
    background-color: #E6F4EA;                          /* Verde pálido, sin variable canónica de fondo. */
    border-left: 4px solid var(--color-terminado);
    color: var(--color-terminado);
}

/* Error = rojo de error del sistema (#CC0000), NO var(--color-panel) (esa variable es
   semántica del módulo Panel de Control, no rojo de error genérico — app.css:285-287).
   Mismo criterio de los modales hermanos: .opcion-warning de ModalEngraneKit y el chip
   de choque de este mismo archivo usan #CC0000 sobre fondo #FEE2E2. */
.cot-banner-operacion-error[b-ht01wnaeua] {
    background-color: #FEE2E2;                          /* Rojo pálido, sin variable canónica de fondo. */
    border-left: 4px solid #CC0000;
    color: #CC0000;
}

/* Botón × para cerrar el banner: hereda el color del banner, sin caja propia. */
.cot-banner-operacion-x[b-ht01wnaeua] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: var(--texto-12pt);
    font-weight: bold;
    line-height: var(--line-height-normal);
    padding: 0 0.25rem;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/KitTableHeader.razor.rz.scp.css */
/*
   KitTableHeader.razor.css
   Cabecera de columnas para la lista plana mezclada (Kits + AtomRows).
   SPEC sec 8.3.3 — define el orden visual de columnas.

   R1/P11 — 3 modos de grid coordinados 1:1 con RenglonListaPlana.razor.css y
   NodoKitArbol.razor.css. CSS scoped Blazor NO se hereda entre componentes
   hermanos (memoria feedback_css_scoped_no_compartido); por eso los 3 archivos
   declaran los MISMOS 3 grid-template-columns. Cualquier cambio de ancho en
   uno DEBE replicarse en los otros dos.

   Columnas base (siempre presentes): chevron, idx, origen, descripcion, sku,
   proveedor, variante, cantidad, acciones (9 columnas).
   Columnas costo: costou, total, hrs (3 columnas).
   Columnas precio: margen, preciou, totalprecio, visible (4 columnas).
*/

.kth[b-pqn9kiw1xe] {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    background-color: #F5F5F5;
    border-bottom: 2px solid #BDBDBD;
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: #424242;
}

/* ── Modo COSTO (default, retrocompatible con T01-T08) ── */
.kth-modo-costo[b-pqn9kiw1xe] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 5rem 6rem 3rem 3rem;
}

/* ── Modo PRECIO (solo vendedor sin permisos de costo) ── */
.kth-modo-precio[b-pqn9kiw1xe] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 4rem 5rem 6rem 3rem 3rem;
}

/* ── Modo AMBOS (Ing + Vta — lado a lado, spec §15.4) ── */
.kth-modo-ambos[b-pqn9kiw1xe] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 5rem 6rem 3rem 4rem 5rem 6rem 3rem 3rem;
}

.kth-idx[b-pqn9kiw1xe],
.kth-cantidad[b-pqn9kiw1xe],
.kth-costou[b-pqn9kiw1xe],
.kth-total[b-pqn9kiw1xe],
.kth-hrs[b-pqn9kiw1xe],
.kth-margen[b-pqn9kiw1xe],
.kth-preciou[b-pqn9kiw1xe],
.kth-totalprecio[b-pqn9kiw1xe] {
    text-align: right;
}

.kth-visible[b-pqn9kiw1xe] {
    text-align: center;
}

.kth-chevron[b-pqn9kiw1xe],
.kth-acciones[b-pqn9kiw1xe] {
    width: 100%;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalAgregarSeccion.razor.rz.scp.css */
/*
   ModalAgregarSeccion.razor.css
   Modal chico-mediano (~480px) — agregar sección con nombre, tipo y orden.

   CSS scoped NO se comparte entre componentes (feedback_css_scoped_no_compartido):
   el molde header/body/footer se REDECLARA aquí calcado 1:1 del molde canónico
   ModalRestaurarSeccion.razor.css (header azul + body con scroll + footer), NO se reusa.
*/

.modal-agregar-seccion[b-gw3lzo428f] {
    max-width: 30rem;
    width: 92%;
    background-color: #FFFFFF;          /* Fondo del modal blanco (header azul aparte) */
}

/* ===== HEADER (azul Cotizador, 1 renglón: título blanco + X blanca) ===== */
.modal-header[b-gw3lzo428f] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-gw3lzo428f] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

/* La X global es gris; sobre el header azul se pinta blanca con hover atenuado. */
[b-gw3lzo428f] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-gw3lzo428f] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY (scroll interno → el footer queda SIEMPRE visible) ===== */
.modal-body[b-gw3lzo428f] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
}

/* Subtítulo descriptivo: primera línea del body, compacto y gris. */
.modal-subtitulo[b-gw3lzo428f] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.625rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-gw3lzo428f] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Form */
.form-group[b-gw3lzo428f] {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.form-label[b-gw3lzo428f] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
}

.form-required[b-gw3lzo428f] {
    color: #CC0000;
    font-weight: normal;
}

.form-input[b-gw3lzo428f] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-input:focus[b-gw3lzo428f] {
    outline: none;
    border-color: var(--color-coti);
}

.form-hint[b-gw3lzo428f] {
    font-size: var(--texto-8pt);
    color: #696969;
}

.form-orden-row[b-gw3lzo428f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-input-orden[b-gw3lzo428f] {
    width: 5.625rem;
}

.form-orden-hint[b-gw3lzo428f] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* Bloque de aviso de choque de nombre (rojo) — el par (Tipo, suffix) ya existe.
   Recuadro en tono de error para indicar que bloquea el botón Crear. */
.bloque-choque-nombre[b-gw3lzo428f] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background-color: #FEE2E2;
    border: 1px solid #F5B7B1;
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-normal);
    color: #CC0000;
}

/* Hint de restauración (R5d): la elección es una estructural oculta → se restaura a su
   slot original. Recuadro informativo neutro (azul claro del módulo). */
.bloque-restaurar-hint[b-gw3lzo428f] {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.625rem;
    background-color: var(--color-coti-claro);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    color: #212121;
    line-height: var(--line-height-normal);
}

/* R5d.1: se eliminaron .bloque-existentes* / .seccion-orden / .seccion-nombre /
   .seccion-tipo / .seccion-auto / .bloque-nota — quedaron huérfanas al quitar del markup
   el listado "Secciones existentes" y la nota de Infraestructura. */

/* Botones */
.modal-btn-cancelar[b-gw3lzo428f] {
    background-color: #FFFFFF;
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
}

.modal-btn-cancelar:hover[b-gw3lzo428f] {
    background-color: #F5F5F5;
}

.modal-btn-crear[b-gw3lzo428f] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
}

.modal-btn-crear:hover:not(:disabled)[b-gw3lzo428f] {
    background-color: var(--color-coti-oscuro);
}

.modal-btn-crear:disabled[b-gw3lzo428f] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalAutorizacionMargen.razor.rz.scp.css */
/*
   ModalAutorizacionMargen.razor.css
   Modal mediano (~600px) — solicitar autorización de margen inferior.
*/

.modal-aut-margen[b-eibiimu9aq] {
    max-width: 38rem;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-eibiimu9aq] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-eibiimu9aq] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-eibiimu9aq] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.header-sub[b-eibiimu9aq] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.modal-body[b-eibiimu9aq] {
    overflow-y: auto;
    flex: 1;
}

/* Bloque de contexto */
.bloque-contexto[b-eibiimu9aq] {
    background-color: #F5F5F5;
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.875rem;
    font-size: var(--texto-8pt);
}

.bloque-label[b-eibiimu9aq] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.375rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bloque-meta[b-eibiimu9aq] {
    color: #696969;
    margin-top: 0.1875rem;
}

/* Bloque de margen */
.bloque-margen[b-eibiimu9aq] {
    background-color: #FFF0F0;
    border: 1px solid #F5C6CB;
    border-radius: 0.25rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.875rem;
}

.bloque-titulo[b-eibiimu9aq] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.5rem;
}

.margen-grid[b-eibiimu9aq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: var(--texto-8pt);
}

.margen-label[b-eibiimu9aq] {
    color: #696969;
    font-size: var(--texto-8pt);
}

.margen-valor[b-eibiimu9aq] {
    font-weight: bold;
    font-size: var(--texto-9pt);
}

.margen-actual-pct[b-eibiimu9aq] {
    font-weight: bold;
    color: #CC0000;
    font-size: var(--texto-12pt);
}

.margen-umbral[b-eibiimu9aq] {
    font-weight: bold;
    color: #212121;
    font-size: var(--texto-10pt);
}

.margen-detalle[b-eibiimu9aq] {
    margin-top: 0.625rem;
    padding-top: 0.5rem;
    border-top: 1px solid #F5C6CB;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-normal);
}

.margen-diff[b-eibiimu9aq] {
    color: #CC0000;
}

/* Form */
.form-group[b-eibiimu9aq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}

.form-label[b-eibiimu9aq] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
}

.form-required[b-eibiimu9aq] {
    color: #CC0000;
    font-weight: normal;
}

.form-hint[b-eibiimu9aq] {
    font-size: var(--texto-8pt);
    color: #696969;
    line-height: var(--line-height-normal);
}

.form-textarea[b-eibiimu9aq] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    resize: vertical;
    box-sizing: border-box;
}

.form-textarea:focus[b-eibiimu9aq] {
    outline: none;
    border-color: var(--color-coti);
}

/* Aviso */
.bloque-aviso[b-eibiimu9aq] {
    background-color: #FFF8F0;
    border: 1px solid #F5CBA7;
    border-radius: 0.1875rem;
    padding: 0.625rem 0.75rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-holgado);
}

.aviso-titulo[b-eibiimu9aq] {
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.25rem;
}

.bloque-aviso ul[b-eibiimu9aq] {
    margin: 0;
    padding-left: 1.125rem;
}

/* Botones */
.modal-btn-cancelar[b-eibiimu9aq] {
    background-color: #FFFFFF;
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
}

.modal-btn-cancelar:hover[b-eibiimu9aq] {
    background-color: #F5F5F5;
}

.modal-btn-solicitar[b-eibiimu9aq] {
    background-color: var(--color-coti-naranja);
    color: #FFFFFF;
    border: 1px solid var(--color-coti-naranja);
}

.modal-btn-solicitar:hover:not(:disabled)[b-eibiimu9aq] {
    background-color: var(--color-coti-naranja-oscuro);
}

.modal-btn-solicitar:disabled[b-eibiimu9aq] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalBriefHistory.razor.rz.scp.css */
/*
   ModalBriefHistory.razor.css
   Modal mediano (~720px) — solo-lectura, scrollable, 3 versiones del Brief.
*/

.modal-brief-history[b-tmf27k0xef] {
    max-width: 45rem;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-tmf27k0xef] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-tmf27k0xef] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-tmf27k0xef] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.header-sub[b-tmf27k0xef] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.muestra-cambio[b-tmf27k0xef] {
    background-color: #FFFDE7;
    padding: 0 0.25rem;
    border-left: 2px solid var(--color-coti-naranja);
}

.modal-body[b-tmf27k0xef] {
    overflow-y: auto;
    flex: 1;
    padding: 0.875rem 1rem;
}

.brief-hist-vacio[b-tmf27k0xef] {
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

.version-card[b-tmf27k0xef] {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 0.25rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1.125rem;
}

.version-card:last-child[b-tmf27k0xef] {
    margin-bottom: 0;
}

.version-card.version-actual[b-tmf27k0xef] {
    background-color: #E8F5E9;
    border-color: #A5D6A7;
}

.version-header[b-tmf27k0xef] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E0E0E0;
}

.version-header-izq[b-tmf27k0xef] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.version-titulo[b-tmf27k0xef] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: var(--color-coti);
}

.badge-actual[b-tmf27k0xef] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.125rem 0.5rem;
    background-color: #008000;
    color: #FFFFFF;
    border-radius: 0.625rem;
}

.badge-inicial[b-tmf27k0xef] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.125rem 0.5rem;
    background-color: #F5F5F5;
    color: #696969;
    border: 1px solid #E0E0E0;
    border-radius: 0.625rem;
}

.version-header-der[b-tmf27k0xef] {
    font-size: var(--texto-7pt);
    color: #696969;
}

.campo[b-tmf27k0xef] {
    margin-bottom: 0.625rem;
}

.campo.campo-cambio[b-tmf27k0xef] {
    padding: 0.375rem 0.5rem;
    background-color: #FFFDE7;
    border-left: 3px solid var(--color-coti-naranja);
    border-radius: 0.1875rem;
}

.campo-label[b-tmf27k0xef] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.1875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.badge-cambio[b-tmf27k0xef] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.0625rem 0.375rem;
    background-color: var(--color-coti-naranja);
    color: #FFFFFF;
    border-radius: 0.5rem;
}

.campo-valor[b-tmf27k0xef] {
    font-size: var(--texto-9pt);
    color: #212121;
    line-height: var(--line-height-holgado);
}

.campo-sin-captura[b-tmf27k0xef] {
    color: #696969;
    font-style: italic;
}

.chip-perfil[b-tmf27k0xef] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: var(--texto-8pt);
    font-weight: bold;
    border: 1px solid;
    border-radius: 0.625rem;
}

.modal-btn-cerrar[b-tmf27k0xef] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
}

.modal-btn-cerrar:hover[b-tmf27k0xef] {
    background-color: var(--color-coti-oscuro);
}

/* ═══════════ Responsive (EST_01) ═══════════ */
@media (max-width: 768px) {

    /* A ancho reducido la cabecera apila: el bloque "Versión N + badges" arriba y
       "Nombre · fecha" debajo, en vez de comprimirse en una sola fila. */
    .version-header[b-tmf27k0xef] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .version-header-der[b-tmf27k0xef] {
        text-align: left;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalCantidadKit.razor.rz.scp.css */
/*
   ModalCantidadKit.razor.css
   Modal pequeño de captura de cantidad del Kit (P04b).
   Reusa el patrón de ModalEliminarSeccion (header azul del módulo + footer de botones).
   Color del módulo Cotizador. Sin z-index, sin Bootstrap.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-19h0wslzst] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-19h0wslzst] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 22rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-cantidad-kit[b-19h0wslzst] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-19h0wslzst] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-19h0wslzst] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-19h0wslzst] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-19h0wslzst] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-19h0wslzst] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mck-kit-titulo[b-19h0wslzst] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.mck-kit-nombre[b-19h0wslzst] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mck-instruccion[b-19h0wslzst] {
    margin: 0 0 0.75rem 0;
    color: #333333;
}

.mck-campo[b-19h0wslzst] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mck-label[b-19h0wslzst] {
    font-size: var(--texto-8pt);
    color: #696969;
    font-weight: bold;
}

.mck-input[b-19h0wslzst] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    font-size: var(--texto-9pt);
    color: #212121;
    background-color: #FFFFFF;
    text-align: right;
}

.mck-input:focus[b-19h0wslzst] {
    outline: none;
    border-color: var(--color-coti);
}

.mck-error[b-19h0wslzst] {
    margin: 0.5rem 0 0 0;
    color: #CC0000;
    font-size: var(--texto-8pt);
}

/* ===== FOOTER ===== */
.modal-footer[b-19h0wslzst] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.mck-btn-cancelar[b-19h0wslzst] {
    background-color: #FFFFFF;
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
}

.mck-btn-cancelar:hover[b-19h0wslzst] {
    background-color: #F5F5F5;
}

.mck-btn-confirmar[b-19h0wslzst] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.mck-btn-confirmar:hover[b-19h0wslzst] {
    opacity: 0.9;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .mck-input[b-19h0wslzst] {
        min-height: 2.75rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalClonacionIngeniero.razor.rz.scp.css */
/*
   ModalClonacionIngeniero.razor.css
   Modal grande (~620px) — clonar cotización con rol Ingeniero.
*/

.modal-clonar-ing[b-6pdzvtyz52] {
    max-width: 38.75rem;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-6pdzvtyz52] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-6pdzvtyz52] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-6pdzvtyz52] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.header-sub[b-6pdzvtyz52] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.modal-body[b-6pdzvtyz52] {
    overflow-y: auto;
    flex: 1;
}

/* Bloque origen */
.bloque-origen[b-6pdzvtyz52] {
    background-color: #E8EEF4;
    border: 1px solid #B8C5D6;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-8pt);
}

.origen-fila1[b-6pdzvtyz52] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.origen-id[b-6pdzvtyz52] {
    color: var(--color-coti);
}

.origen-version[b-6pdzvtyz52] {
    color: #696969;
    font-size: var(--texto-7pt);
}

.origen-etiqueta-version[b-6pdzvtyz52] {
    font-style: italic;
}

.origen-meta[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* Form / radio cards */
.form-group[b-6pdzvtyz52] {
    margin-bottom: 0.875rem;
}

.form-label[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: #212121;
    margin-bottom: 0.25rem;
}

.form-required[b-6pdzvtyz52] {
    color: #CC0000;
}

.form-opcional[b-6pdzvtyz52] {
    color: #696969;
    font-weight: normal;
}

.form-hint[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.375rem;
    line-height: var(--line-height-normal);
}

.form-input[b-6pdzvtyz52] {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.form-input:focus[b-6pdzvtyz52] {
    outline: none;
    border-color: var(--color-coti);
}

.radio-card[b-6pdzvtyz52] {
    border: 1px solid #E0E0E0;
    background-color: #FFFFFF;
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    margin-bottom: 0.375rem;
}

.radio-card.radio-seleccionado[b-6pdzvtyz52] {
    border: 2px solid var(--color-coti);
    background-color: #F0F4F8;
    padding: 0.5625rem 0.6875rem;
}

.radio-row[b-6pdzvtyz52] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-dot[b-6pdzvtyz52] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
    background-color: #FFFFFF;
    flex-shrink: 0;
}

.radio-dot.radio-dot-on[b-6pdzvtyz52] {
    border-color: var(--color-coti);
    background-color: var(--color-coti);
}

.radio-titulo[b-6pdzvtyz52] {
    font-weight: bold;
    font-size: var(--texto-9pt);
    color: #212121;
}

.radio-descripcion[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.1875rem;
    line-height: var(--line-height-normal);
}

.busqueda-opp[b-6pdzvtyz52],
.manual-row[b-6pdzvtyz52] {
    margin-left: 1.375rem;
    margin-bottom: 0.5rem;
}

.lista-opps[b-6pdzvtyz52] {
    margin-top: 0.25rem;
    max-height: 6.875rem;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
}

.opp-fila[b-6pdzvtyz52] {
    padding: 0.3125rem 0.5rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    border-left: 3px solid transparent;
}

.opp-fila:hover[b-6pdzvtyz52] {
    background-color: #FAFAFA;
}

.opp-fila.opp-seleccionada[b-6pdzvtyz52] {
    background-color: #E8F5E9;
    border-left-color: #008000;
}

.opp-meta[b-6pdzvtyz52] {
    color: #696969;
    margin-left: 0.375rem;
}

.sin-resultados[b-6pdzvtyz52] {
    padding: 0.5rem 0.625rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* Bloque qué se copia */
.bloque-que-se-copia[b-6pdzvtyz52] {
    border: 1px solid #E0E0E0;
    border-radius: 0.25rem;
    background-color: #E3F2FD;
    padding: 0.5rem 0.625rem;
    font-size: var(--texto-8pt);
}

.que-se-copia-sub[b-6pdzvtyz52] {
    margin-bottom: 0.375rem;
    color: #696969;
}

.que-se-copia-grid[b-6pdzvtyz52] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.copia-titulo[b-6pdzvtyz52] {
    font-weight: bold;
    margin-bottom: 0.1875rem;
}

.copia-titulo-si[b-6pdzvtyz52] {
    color: #008000;
}

.copia-titulo-no[b-6pdzvtyz52] {
    color: #CC0000;
}

.bloque-que-se-copia ul[b-6pdzvtyz52] {
    margin: 0;
    padding-left: 0.875rem;
    line-height: var(--line-height-normal);
}

.bloque-que-se-copia li[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
}

/* Toggle MODs */
.bloque-mods[b-6pdzvtyz52] {
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.bloque-mods.mods-on[b-6pdzvtyz52] {
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
}

.bloque-mods.mods-off[b-6pdzvtyz52] {
    background-color: #FFF8F0;
    border: 1px solid #F5CBA7;
}

.mods-label[b-6pdzvtyz52] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.mods-label input[type="checkbox"][b-6pdzvtyz52] {
    margin-top: 0.125rem;
    flex-shrink: 0;
    cursor: pointer;
}

.mods-titulo[b-6pdzvtyz52] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: #212121;
    margin-bottom: 0.1875rem;
}

.mods-descripcion[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    color: #696969;
    line-height: var(--line-height-normal);
}

.mods-default[b-6pdzvtyz52] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.25rem;
    font-style: italic;
}

/* Trazabilidad */
.bloque-trazabilidad[b-6pdzvtyz52] {
    background-color: #E3F2FD;
    border: 1px solid #90CAF9;
    border-radius: 0.1875rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--texto-8pt);
}

.bloque-trazabilidad code[b-6pdzvtyz52] {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0 0.25rem;
    border-radius: 0.125rem;
    font-size: var(--texto-7pt);
}

/* Footer */
.modal-btn-cancelar[b-6pdzvtyz52] {
    background-color: #FFFFFF;
    color: #424242;
    border: 1px solid #E0E0E0;
}

.modal-btn-cancelar:hover[b-6pdzvtyz52] {
    background-color: #F5F5F5;
}

.modal-btn-confirmar[b-6pdzvtyz52] {
    background-color: #008000;
    color: #FFFFFF;
    border: 1px solid #008000;
}

.modal-btn-confirmar:hover:not(:disabled)[b-6pdzvtyz52] {
    background-color: #006400;
}

.modal-btn-confirmar:disabled[b-6pdzvtyz52] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalClonacionVendedor.razor.rz.scp.css */
/*
   ModalClonacionVendedor.razor.css
   Misma estructura visual que ModalClonacionIngeniero pero con bloque verde claro
   en "Qué se copia" (porque el vendedor SÍ copia precios y márgenes).
*/

.modal-clonar-vend[b-5du971mds2] {
    max-width: 38.75rem;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-5du971mds2] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-5du971mds2] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-5du971mds2] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.header-sub[b-5du971mds2] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.modal-body[b-5du971mds2] {
    overflow-y: auto;
    flex: 1;
}

.bloque-origen[b-5du971mds2] {
    background-color: #E8EEF4;
    border: 1px solid #B8C5D6;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--texto-8pt);
}

.origen-fila1[b-5du971mds2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.origen-id[b-5du971mds2] {
    color: var(--color-coti);
}

.origen-version[b-5du971mds2] {
    color: #696969;
    font-size: var(--texto-7pt);
}

.origen-etiqueta-version[b-5du971mds2] {
    font-style: italic;
}

.origen-meta[b-5du971mds2] {
    font-size: var(--texto-8pt);
    color: #696969;
}

.form-group[b-5du971mds2] {
    margin-bottom: 0.875rem;
}

.form-label[b-5du971mds2] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: #212121;
    margin-bottom: 0.25rem;
}

.form-required[b-5du971mds2] {
    color: #CC0000;
}

.form-opcional[b-5du971mds2] {
    color: #696969;
    font-weight: normal;
}

.form-hint[b-5du971mds2] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.375rem;
    line-height: var(--line-height-normal);
}

.form-input[b-5du971mds2] {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.form-input:focus[b-5du971mds2] {
    outline: none;
    border-color: var(--color-coti);
}

.radio-card[b-5du971mds2] {
    border: 1px solid #E0E0E0;
    background-color: #FFFFFF;
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    margin-bottom: 0.375rem;
}

.radio-card.radio-seleccionado[b-5du971mds2] {
    border: 2px solid var(--color-coti);
    background-color: #F0F4F8;
    padding: 0.5625rem 0.6875rem;
}

.radio-row[b-5du971mds2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-dot[b-5du971mds2] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
    background-color: #FFFFFF;
    flex-shrink: 0;
}

.radio-dot.radio-dot-on[b-5du971mds2] {
    border-color: var(--color-coti);
    background-color: var(--color-coti);
}

.radio-titulo[b-5du971mds2] {
    font-weight: bold;
    font-size: var(--texto-9pt);
    color: #212121;
}

.radio-descripcion[b-5du971mds2] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.1875rem;
    line-height: var(--line-height-normal);
}

.busqueda-opp[b-5du971mds2],
.manual-row[b-5du971mds2] {
    margin-left: 1.375rem;
    margin-bottom: 0.5rem;
}

.lista-opps[b-5du971mds2] {
    margin-top: 0.25rem;
    max-height: 6.875rem;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
}

.opp-fila[b-5du971mds2] {
    padding: 0.3125rem 0.5rem;
    font-size: var(--texto-8pt);
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    border-left: 3px solid transparent;
}

.opp-fila:hover[b-5du971mds2] {
    background-color: #FAFAFA;
}

.opp-fila.opp-seleccionada[b-5du971mds2] {
    background-color: #E8F5E9;
    border-left-color: #008000;
}

.opp-meta[b-5du971mds2] {
    color: #696969;
    margin-left: 0.375rem;
}

.sin-resultados[b-5du971mds2] {
    padding: 0.5rem 0.625rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* Bloque qué se copia — verde claro (Vendedor) */
.bloque-que-se-copia[b-5du971mds2] {
    border: 1px solid #E0E0E0;
    border-radius: 0.25rem;
    background-color: #E8F5E9;
    padding: 0.5rem 0.625rem;
    font-size: var(--texto-8pt);
}

.que-se-copia-sub[b-5du971mds2] {
    margin-bottom: 0.375rem;
    color: #696969;
}

.que-se-copia-grid[b-5du971mds2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.copia-titulo[b-5du971mds2] {
    font-weight: bold;
    margin-bottom: 0.1875rem;
}

.copia-titulo-si[b-5du971mds2] {
    color: #008000;
}

.copia-titulo-no[b-5du971mds2] {
    color: #CC0000;
}

.bloque-que-se-copia ul[b-5du971mds2] {
    margin: 0;
    padding-left: 0.875rem;
    line-height: var(--line-height-normal);
}

.bloque-que-se-copia li[b-5du971mds2] {
    font-size: var(--texto-8pt);
}

/* Toggle MODs */
.bloque-mods[b-5du971mds2] {
    padding: 0.625rem 0.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.bloque-mods.mods-on[b-5du971mds2] {
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
}

.bloque-mods.mods-off[b-5du971mds2] {
    background-color: #FFF8F0;
    border: 1px solid #F5CBA7;
}

.mods-label[b-5du971mds2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.mods-label input[type="checkbox"][b-5du971mds2] {
    margin-top: 0.125rem;
    flex-shrink: 0;
    cursor: pointer;
}

.mods-titulo[b-5du971mds2] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: #212121;
    margin-bottom: 0.1875rem;
}

.mods-descripcion[b-5du971mds2] {
    font-size: var(--texto-8pt);
    color: #696969;
    line-height: var(--line-height-normal);
}

.mods-default[b-5du971mds2] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.25rem;
    font-style: italic;
}

.bloque-trazabilidad[b-5du971mds2] {
    background-color: #E3F2FD;
    border: 1px solid #90CAF9;
    border-radius: 0.1875rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--texto-8pt);
}

.bloque-trazabilidad code[b-5du971mds2] {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0 0.25rem;
    border-radius: 0.125rem;
    font-size: var(--texto-7pt);
}

.modal-btn-cancelar[b-5du971mds2] {
    background-color: #FFFFFF;
    color: #424242;
    border: 1px solid #E0E0E0;
}

.modal-btn-cancelar:hover[b-5du971mds2] {
    background-color: #F5F5F5;
}

.modal-btn-confirmar[b-5du971mds2] {
    background-color: #008000;
    color: #FFFFFF;
    border: 1px solid #008000;
}

.modal-btn-confirmar:hover:not(:disabled)[b-5du971mds2] {
    background-color: #006400;
}

.modal-btn-confirmar:disabled[b-5du971mds2] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalConfirmacionPresetPdf.razor.rz.scp.css */
/*
   ModalConfirmacionPresetPdf.razor.css
   Modal de confirmación al cambiar de Preset PDF tras ajustes finos del vendedor.
   Calca el patrón de ModalEliminarSeccion (header del módulo Cotizador + 2 botones).

   CSS scoped Blazor NO se hereda entre componentes (memoria feedback_css_scoped_no_compartido):
   por eso este archivo redeclara overlay/content/header/footer 1:1 desde ModalEliminarSeccion
   en lugar de reusarlos. Si en el futuro hay un Modal genérico compartido, se reemplaza.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-y64q0wgncx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-y64q0wgncx] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-confirmacion-preset[b-y64q0wgncx] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-y64q0wgncx] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-y64q0wgncx] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-y64q0wgncx] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-y64q0wgncx] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-y64q0wgncx] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-y64q0wgncx] {
    margin: 0 0 0.75rem 0;
    color: #333333;
}

.seccion-titulo[b-y64q0wgncx] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.seccion-nombre[b-y64q0wgncx] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mensaje-advertencia[b-y64q0wgncx] {
    background-color: #FFF4E5;                              /* Crema pálido, sin variable canónica. */
    border-left: 3px solid var(--color-coti-naranja);
    color: var(--color-coti-naranja-texto);
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

/* ===== FOOTER ===== */
.modal-footer[b-y64q0wgncx] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-y64q0wgncx] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-aplicar-modal[b-y64q0wgncx] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.btn-aplicar-modal:hover[b-y64q0wgncx] {
    background-color: var(--color-coti-oscuro);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-content[b-y64q0wgncx] {
        width: 95%;
    }

    .btn-cancelar-modal[b-y64q0wgncx],
    .btn-aplicar-modal[b-y64q0wgncx] {
        min-height: 2.75rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalConfirmaOperacionKit.razor.rz.scp.css */
/*
   ModalConfirmaOperacionKit.razor.css
   Modal de confirmación de operaciones destructivas al Kit (EK1-a: Restaurar).
   Patrón espejo de ModalEliminarNodoKit (header del módulo + botón destructivo).
   CSS scoped NO se hereda entre componentes (feedback_css_scoped_no_compartido): las clases
   compartidas con ModalEliminarNodoKit se redeclaran aquí 1:1, no se reusan.
   Sin z-index, sin Bootstrap, variables de app.css.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-wcirg232lc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-wcirg232lc] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-confirma-operacion-kit[b-wcirg232lc] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-wcirg232lc] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-wcirg232lc] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-wcirg232lc] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-wcirg232lc] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
/* overflow-y:auto + flex:1 obligatorios: no hay .modal-body global; sin esto el body
   desbordado se come el footer (feedback_modal_body_overflow_contrato). */
.modal-body[b-wcirg232lc] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-wcirg232lc] {
    margin: 0 0 0.75rem 0;
    color: #333333;
    line-height: var(--line-height-normal);
}

/* Línea de advertencia roja: rojo de error consistente del sistema (#CC0000; no hay
   variable canónica de rojo de error en app.css — documentado ahí líneas 285-287). */
.mensaje-advertencia[b-wcirg232lc] {
    background-color: #FDE8E8;                              /* Rojo pálido de fondo, sin variable canónica. */
    border-left: 3px solid #CC0000;
    color: #CC0000;
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
    font-weight: bold;
    line-height: var(--line-height-normal);
}

/* ===== FOOTER ===== */
.modal-footer[b-wcirg232lc] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-wcirg232lc] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-confirmar-modal[b-wcirg232lc] {
    background-color: #C62828;                              /* Rojo acción destructiva (igual que ModalEliminarNodoKit). */
    color: #FFFFFF;
}

.btn-confirmar-modal:hover[b-wcirg232lc] {
    background-color: #B71C1C;                              /* Rojo más oscuro al hover. */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Sin ajustes específicos: el modal es fluido (90% / max-width en rem / 90vh). */
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalEliminarNodoKit.razor.rz.scp.css */
/*
   ModalEliminarNodoKit.razor.css
   Modal de confirmación de borrado de un nodo Kit/sub-Kit del árbol de explosión (P04b).
   Reusa el patrón de ModalEliminarSeccion (header del módulo + botón destructivo).
   Sin z-index, sin Bootstrap.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-3fkbtt3bvk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-3fkbtt3bvk] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-eliminar-nodo-kit[b-3fkbtt3bvk] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-3fkbtt3bvk] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-3fkbtt3bvk] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-3fkbtt3bvk] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-3fkbtt3bvk] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-3fkbtt3bvk] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-3fkbtt3bvk] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.nodo-titulo[b-3fkbtt3bvk] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.nodo-nombre[b-3fkbtt3bvk] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mensaje-advertencia[b-3fkbtt3bvk] {
    background-color: #FFF4E5;                              /* Crema pálido, sin variable canónica. */
    border-left: 3px solid var(--color-coti-naranja);
    color: var(--color-coti-naranja-texto);
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

/* ===== FOOTER ===== */
.modal-footer[b-3fkbtt3bvk] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-3fkbtt3bvk] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-eliminar-modal[b-3fkbtt3bvk] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-eliminar-modal:hover[b-3fkbtt3bvk] {
    background-color: #B71C1C;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Sin ajustes específicos: el modal es fluido (90% / max-width en rem / 90vh). */
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalEliminarRenglon.razor.rz.scp.css */
/*
   ModalEliminarRenglon.razor.css
   Modal de confirmación de borrado de un renglón del costeo (material/actividad).
   CALCO 1:1 de ModalEliminarSeccion.razor.css: el CSS scoped de Blazor NO se
   comparte entre componentes (feedback_css_scoped_no_compartido), así que se
   redeclaran aquí todas las clases para que el modal se vea idéntico.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-w4y194bvq8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-w4y194bvq8] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-eliminar-renglon[b-w4y194bvq8] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-w4y194bvq8] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-w4y194bvq8] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-w4y194bvq8] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-w4y194bvq8] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-w4y194bvq8] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-w4y194bvq8] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.renglon-titulo[b-w4y194bvq8] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.renglon-nombre[b-w4y194bvq8] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mensaje-advertencia[b-w4y194bvq8] {
    background-color: #FFF4E5;                              /* Crema pálido, sin variable canónica. */
    border-left: 3px solid var(--color-coti-naranja);
    color: var(--color-coti-naranja-texto);
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

/* ===== FOOTER ===== */
.modal-footer[b-w4y194bvq8] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-w4y194bvq8] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-eliminar-modal[b-w4y194bvq8] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-eliminar-modal:hover[b-w4y194bvq8] {
    background-color: #B71C1C;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalEliminarSeccion.razor.rz.scp.css */
/*
   ModalEliminarSeccion.razor.css
   Modal de confirmación de borrado de sección de solución.
   Reusa el patrón de ModalDesactivarKit (header del módulo + botón destructivo).
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-o5v10h8019] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-o5v10h8019] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-eliminar-seccion[b-o5v10h8019] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-o5v10h8019] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-o5v10h8019] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-o5v10h8019] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-o5v10h8019] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-o5v10h8019] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-confirmacion[b-o5v10h8019] {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: #333333;
}

.seccion-titulo[b-o5v10h8019] {
    background-color: #F0F0F0;
    border-left: 3px solid var(--color-coti);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.75rem 0;
    word-break: break-word;
}

.seccion-nombre[b-o5v10h8019] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.mensaje-advertencia[b-o5v10h8019] {
    background-color: #FFF4E5;                              /* Crema pálido, sin variable canónica. */
    border-left: 3px solid var(--color-coti-naranja);
    color: var(--color-coti-naranja-texto);
    padding: 0.5rem 0.625rem;
    margin: 0;
    font-size: var(--texto-9pt);
}

/* ===== FOOTER ===== */
.modal-footer[b-o5v10h8019] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-o5v10h8019] {
    background-color: #D0D0D0;
    color: #000000;
}

.btn-eliminar-modal[b-o5v10h8019] {
    background-color: #C62828;
    color: #FFFFFF;
}

.btn-eliminar-modal:hover[b-o5v10h8019] {
    background-color: #B71C1C;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalEngraneKit.razor.rz.scp.css */
/*
   ModalEngraneKit.razor.css
   Modal mediano (~600px) con 4 cards clickeables.
*/

.modal-engrane-kit[b-bjk8flwvxn] {
    max-width: 38rem;
    width: 92%;
}

/* Header con azul del módulo. El .modal-header azul NO es global y el CSS scoped no se hereda
   (feedback_css_scoped_no_compartido): se redeclara aquí 1:1 calcando ModalConfirmaOperacionKit.
   position:relative ancla la X absoluta; padding-right reserva el espacio para que el texto no
   quede bajo la X. */
.modal-header[b-bjk8flwvxn] {
    position: relative;
    padding: 0.625rem 2rem 0.625rem 0.94rem;
    background-color: var(--color-coti);
}

.modal-header h3[b-bjk8flwvxn] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

/* X de cierre anclada arriba-derecha del header, en blanco para contrastar con el azul. */
[b-bjk8flwvxn] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    color: #FFFFFF;
}

[b-bjk8flwvxn] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* Subtítulo con el nombre del Kit. Azul claro del módulo para legibilidad sobre el header azul. */
.kit-nombre[b-bjk8flwvxn] {
    font-size: var(--texto-9pt);
    color: var(--color-coti-claro);
    margin-top: 0.25rem;
}

.modal-body[b-bjk8flwvxn] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    overflow-y: auto;
    flex: 1;
}

.opcion-card[b-bjk8flwvxn] {
    border: 1px solid #E0E0E0;
    border-radius: 0.25rem;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    background-color: #FFFFFF;
    transition: border-color 0.15s, background-color 0.15s;
}

.opcion-card:hover[b-bjk8flwvxn] {
    border-color: var(--color-coti);
    background-color: #F5F8FF;
}

.opcion-titulo[b-bjk8flwvxn] {
    font-weight: bold;
    font-size: var(--texto-9pt);
    color: var(--color-coti);
}

.opcion-descripcion[b-bjk8flwvxn] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.25rem;
    line-height: var(--line-height-normal);
}

.opcion-warning[b-bjk8flwvxn] {
    color: #CC0000;                                       /* Rojo de error consistente (no hay variable canónica). */
}

/* EK1-a — Card deshabilitada: atenuada y sin interacción. No dispara Elegir (gateo en C#).
   Sobrescribe el hover de .opcion-card para que no parezca clickeable. */
.opcion-card-deshabilitada[b-bjk8flwvxn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.opcion-card-deshabilitada:hover[b-bjk8flwvxn] {
    border-color: #E0E0E0;                                /* Mantiene el borde base, sin acento azul. */
    background-color: #FFFFFF;                            /* Sin highlight de hover. */
}

/* El .modal-footer NO es global (solo existe .sec-modal-eliminar .* en app.css) y el CSS scoped
   no se hereda (feedback_css_scoped_no_compartido): se redeclara aquí 1:1 calcando
   ModalEliminarNodoKit, para alinear el botón Cancelar a la derecha sin pegarlo al borde. */
.modal-footer[b-bjk8flwvxn] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Cancelar homologado al estándar gris de ModalEliminarNodoKit (.btn-cancelar-modal),
   no a un tercer tono propio. */
.modal-btn-cancelar[b-bjk8flwvxn] {
    background-color: #D0D0D0;
    color: #000000;
}

.modal-btn-cancelar:hover[b-bjk8flwvxn] {
    background-color: #C0C0C0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Sin ajustes: modal fluido (92% / max-width en rem). */
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalMotivoDesviacion.razor.rz.scp.css */
/*
   ModalMotivoDesviacion.razor.css
   Modal chico (~480px) — captura motivo de desviación de catálogo.
*/

.modal-motivo-desviacion[b-g7a12p7c54] {
    max-width: 30rem;
    width: 92%;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-g7a12p7c54] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-g7a12p7c54] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-g7a12p7c54] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.renglon-info[b-g7a12p7c54] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.modal-body[b-g7a12p7c54] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    flex: 1;
}

/* Bloque comparativo (valores original vs nuevo) */
.bloque-comparativo[b-g7a12p7c54] {
    background-color: #FFF1E0;
    border: 1px solid #F5CBA7;
    border-radius: 0.25rem;
    padding: 0.625rem 0.75rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-holgado);
}

.bloque-titulo[b-g7a12p7c54] {
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.375rem;
}

.bloque-comparacion[b-g7a12p7c54] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.comparacion-label[b-g7a12p7c54] {
    color: #696969;
    font-size: var(--texto-8pt);
}

.comparacion-valor[b-g7a12p7c54] {
    font-weight: bold;
}

.comparacion-valor-nuevo[b-g7a12p7c54] {
    font-weight: bold;
    color: var(--color-coti-naranja);
}

.bloque-nota[b-g7a12p7c54] {
    margin-top: 0.5rem;
    font-size: var(--texto-8pt);
    color: #212121;
    font-style: italic;
}

/* Formulario */
.form-group[b-g7a12p7c54] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-label[b-g7a12p7c54] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: #212121;
}

.form-required[b-g7a12p7c54] {
    color: #CC0000;
    font-weight: normal;
}

.form-textarea[b-g7a12p7c54] {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    resize: vertical;
    box-sizing: border-box;
}

.form-textarea:focus[b-g7a12p7c54] {
    outline: none;
    border-color: var(--color-coti);
}

.form-hint[b-g7a12p7c54] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* Footer */
.modal-btn-cancelar[b-g7a12p7c54] {
    background-color: #FFFFFF;
    color: #424242;
    border: 1px solid #BDBDBD;
}

.modal-btn-cancelar:hover[b-g7a12p7c54] {
    background-color: #F5F5F5;
}

.modal-btn-guardar[b-g7a12p7c54] {
    background-color: #008000;
    color: #FFFFFF;
    border: 1px solid #008000;
}

.modal-btn-guardar:hover:not(:disabled)[b-g7a12p7c54] {
    background-color: #006400;
}

.modal-btn-guardar:disabled[b-g7a12p7c54] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalRestaurarSeccion.razor.rz.scp.css */
/*
   ModalRestaurarSeccion.razor.css
   Modal que lista las secciones OCULTAS del Detalle para restaurarlas (R5c).
   CSS scoped NO se comparte entre componentes (feedback_css_scoped_no_compartido):
   overlay/content/header/body/footer se REDECLARAN aquí (calco 1:1 de
   ModalEliminarSeccion.razor.css), NO se reusan.
   Acción NO destructiva → botón Restaurar en color del módulo, sin rojo.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-9uo11vyk5j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-9uo11vyk5j] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-restaurar-seccion[b-9uo11vyk5j] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-9uo11vyk5j] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-9uo11vyk5j] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-9uo11vyk5j] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-9uo11vyk5j] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
.modal-body[b-9uo11vyk5j] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.mensaje-intro[b-9uo11vyk5j] {
    margin: 0 0 0.75rem 0;
    color: #333333;
}

.mensaje-vacio[b-9uo11vyk5j] {
    margin: 0;
    text-align: center;
    color: #696969;
    font-style: italic;
}

/* ===== LISTA DE OCULTAS ===== */
.lista-ocultas[b-9uo11vyk5j] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fila-oculta[b-9uo11vyk5j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid var(--color-coti);
    background-color: #F0F0F0;
    margin-bottom: 0.5rem;
}

.fila-oculta:last-child[b-9uo11vyk5j] {
    margin-bottom: 0;
}

.fila-oculta-info[b-9uo11vyk5j] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    word-break: break-word;
}

.fila-oculta-clase[b-9uo11vyk5j] {
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    font-weight: bold;
    text-transform: uppercase;
}

.fila-oculta-nombre[b-9uo11vyk5j] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

/* Botón Restaurar por fila — acción del módulo, no destructiva. */
.btn-restaurar-fila[b-9uo11vyk5j] {
    flex-shrink: 0;
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.btn-restaurar-fila:hover[b-9uo11vyk5j] {
    background-color: var(--color-coti-oscuro);
}

/* ===== FOOTER ===== */
.modal-footer[b-9uo11vyk5j] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-cerrar-modal[b-9uo11vyk5j] {
    background-color: #D0D0D0;
    color: #000000;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalSelectorAgregar.razor.rz.scp.css */
/*
   ModalSelectorAgregar.razor.css
   Menú "¿Qué quieres agregar?" del [+] del header de una sección (R5e-3).
   CSS scoped NO se comparte entre componentes (feedback_css_scoped_no_compartido):
   overlay/content/header/body/footer se REDECLARAN aquí (calco 1:1 de
   ModalRestaurarSeccion.razor.css), NO se reusan.
   Sin Bootstrap, sin z-index (el modal-overlay ya va fixed al final del DOM), sin hex inventado.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-c3tyjd5tbd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-c3tyjd5tbd] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-selector-agregar[b-c3tyjd5tbd] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-c3tyjd5tbd] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-c3tyjd5tbd] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

[b-c3tyjd5tbd] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-c3tyjd5tbd] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY ===== */
/* feedback_modal_body_overflow_contrato: no hay .modal-body global; se redeclara
   overflow-y:auto + flex:1 aquí o el footer se pierde al desbordar. */
.modal-body[b-c3tyjd5tbd] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

/* ===== LISTA DE OPCIONES ===== */
.lista-opciones[b-c3tyjd5tbd] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-opciones li[b-c3tyjd5tbd] {
    margin-bottom: 0.5rem;
}

.lista-opciones li:last-child[b-c3tyjd5tbd] {
    margin-bottom: 0;
}

/* Cada opción es un botón de ancho completo (tarjeta clicable), estilo del módulo. */
.opcion-agregar[b-c3tyjd5tbd] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.75rem;
    background-color: #F0F0F0;
    border: none;
    border-left: 3px solid var(--color-coti);
    cursor: pointer;
}

.opcion-agregar:hover[b-c3tyjd5tbd] {
    background-color: var(--color-coti-claro);
}

.opcion-titulo[b-c3tyjd5tbd] {
    font-size: var(--texto-10pt);
    font-weight: bold;
    color: #000000;
}

.opcion-detalle[b-c3tyjd5tbd] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* Detalle en rojo oscuro de acción destructiva (calco de app.css:875 "Rojo acción
   destructiva" #C62828): solo en "Material manual", para DESINCENTIVAR su uso —
   captura SIN SKU, reservada a casos inusuales. Solo el color rojo, sin negrita. */
.opcion-detalle-alerta[b-c3tyjd5tbd] {
    color: #8B0000;
}

/* ===== FOOTER ===== */
.modal-footer[b-c3tyjd5tbd] {
    padding: 0.625rem 0.94rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-cerrar-modal[b-c3tyjd5tbd] {
    background-color: #D0D0D0;
    color: #000000;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Touch target accesible para cada opción. */
    .opcion-agregar[b-c3tyjd5tbd] {
        min-height: 2.75rem;
        padding: 0.75rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalSustitucion.razor.rz.scp.css */
/*
   ModalSustitucion.razor.css
   Modal grande (~720px) — sustituir material de la BOM en Compras.
*/

.modal-sustitucion[b-omdjmj43ip] {
    max-width: 45rem;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header con X de cierre arriba-derecha. position:relative ancla la X absoluta;
   padding-right reserva el espacio para que el texto no quede bajo la X. */
.modal-header[b-omdjmj43ip] {
    position: relative;
    padding-right: 2rem;
}

.modal-header h3[b-omdjmj43ip] {
    margin: 0;
}

/* X de cierre estándar (boton-x global, gris) anclada arriba-derecha del header. */
[b-omdjmj43ip] .modal-header .boton-x {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.header-sub[b-omdjmj43ip] {
    font-size: var(--texto-9pt);
    color: #696969;
    margin-top: 0.25rem;
}

.modal-body[b-omdjmj43ip] {
    overflow-y: auto;
    flex: 1;
}

/* Bloque renglón original */
.bloque-original[b-omdjmj43ip] {
    background-color: #F5F5F5;
    padding: 0.625rem;
    border-radius: 0.25rem;
    margin-bottom: 0.875rem;
    font-size: var(--texto-8pt);
}

.bloque-label[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.1875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bloque-meta[b-omdjmj43ip] {
    margin-top: 0.1875rem;
    color: #696969;
}

/* Bloque equivalentes */
.bloque-equivalentes[b-omdjmj43ip] {
    margin-bottom: 0.875rem;
}

.equivalentes-titulo[b-omdjmj43ip] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.375rem;
}

.equivalentes-sub[b-omdjmj43ip] {
    font-weight: normal;
    color: #696969;
    margin-left: 0.375rem;
}

.equivalente-card[b-omdjmj43ip] {
    cursor: pointer;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.375rem;
    background-color: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: var(--texto-8pt);
}

.equivalente-card:hover[b-omdjmj43ip] {
    border-color: var(--color-coti);
}

.equivalente-card.equivalente-seleccionado[b-omdjmj43ip] {
    background-color: #E8F5E9;
    border-color: #008000;
}

.equivalente-fila1[b-omdjmj43ip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge-seleccionado[b-omdjmj43ip] {
    color: #008000;
    font-size: var(--texto-7pt);
    font-weight: bold;
}

.equivalente-meta[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.1875rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.badge-no-catalogo[b-omdjmj43ip] {
    color: var(--color-coti-naranja);
    font-weight: bold;
}

.link-limpiar[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    cursor: pointer;
    text-decoration: underline dotted;
}

.link-limpiar:hover[b-omdjmj43ip] {
    text-decoration: underline;
}

/* Form */
.bloque-form-titulo[b-omdjmj43ip] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.375rem;
}

.form-titulo-sub[b-omdjmj43ip] {
    font-weight: normal;
    color: #696969;
    margin-left: 0.375rem;
}

.grid-2col[b-omdjmj43ip] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.grid-2col + .grid-2col[b-omdjmj43ip] {
    grid-template-columns: 1fr 1fr;
}

.form-group[b-omdjmj43ip] {
    margin-bottom: 0.5rem;
}

.form-label[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
}

.form-label-small[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: #696969;
    display: block;
    margin-bottom: 0.1875rem;
}

.form-required[b-omdjmj43ip] {
    color: #CC0000;
    font-weight: normal;
}

.form-input[b-omdjmj43ip] {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: var(--color-bg-body);
}

.form-input:focus[b-omdjmj43ip] {
    outline: none;
    border-color: var(--color-coti);
}

.form-textarea[b-omdjmj43ip] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    resize: vertical;
    box-sizing: border-box;
}

.form-textarea:focus[b-omdjmj43ip] {
    outline: none;
    border-color: var(--color-coti);
}

.form-hint[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: #696969;
    line-height: var(--line-height-normal);
    margin-top: 0.1875rem;
}

/* Bloque alta catálogo (amarillo claro) */
.bloque-alta-catalogo[b-omdjmj43ip] {
    background-color: #FFF8E1;
    border: 1px solid #FFD54F;
    border-radius: 0.1875rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-8pt);
}

.alta-label[b-omdjmj43ip] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.alta-label input[type="checkbox"][b-omdjmj43ip] {
    margin-top: 0.125rem;
}

.alta-titulo[b-omdjmj43ip] {
    font-weight: bold;
    color: #212121;
}

.alta-hint[b-omdjmj43ip] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.125rem;
    line-height: var(--line-height-normal);
}

/* Bloque aviso (naranja claro) */
.bloque-aviso[b-omdjmj43ip] {
    background-color: #FFF8F0;
    border: 1px solid #F5CBA7;
    border-radius: 0.1875rem;
    padding: 0.5rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-normal);
    color: #212121;
}

/* Bloque error de la persistencia. Aparece dentro del modal cuando el guardado falla
   (SPEC §9.3): el modal NO se cierra. Mismo tono de error inline ya aprobado en el módulo
   Operación (.sec-ev-error de SecEvidencia, T05): fondo #FDECEA, borde #C62828, texto #B71C1C.
   No hay variable de rojo de error en app.css; estos hex son el patrón vigente del módulo. */
.bloque-error[b-omdjmj43ip] {
    background-color: #FDECEA;
    border: 1px solid #C62828;
    border-radius: 0.1875rem;
    padding: 0.5rem;
    margin-top: 0.625rem;
    font-size: var(--texto-9pt);
    line-height: var(--line-height-normal);
    color: #B71C1C;
    font-weight: bold;
}

/* Botones */
.modal-btn-cancelar[b-omdjmj43ip] {
    background-color: var(--color-bg-body);
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
}

.modal-btn-cancelar:hover[b-omdjmj43ip] {
    background-color: #F5F5F5;
}

.modal-btn-confirmar[b-omdjmj43ip] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
}

.modal-btn-confirmar:hover:not(:disabled)[b-omdjmj43ip] {
    background-color: var(--color-coti-oscuro);
}

.modal-btn-confirmar:disabled[b-omdjmj43ip] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    .modal-sustitucion[b-omdjmj43ip] {
        width: 96%;
    }

    /* Las dos filas de captura (SKU+Proveedor / Costo+Cantidad) se apilan en celular. */
    .grid-2col[b-omdjmj43ip],
    .grid-2col + .grid-2col[b-omdjmj43ip] {
        grid-template-columns: 1fr;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Modales/ModalTrayectoria.razor.rz.scp.css */
/*
   ModalTrayectoria.razor.css (R5e-1)
   Modal chico-mediano (~480px) — captura/edición de una trayectoria o un columpio.

   CSS scoped NO se comparte entre componentes (feedback_css_scoped_no_compartido): el
   molde header/body/footer azul se RE-DECLARA aquí calcado 1:1 de ModalAgregarSeccion.razor.css
   (el molde canónico del módulo), NO se reusa. El body redeclara overflow-y:auto + flex:1
   para que el footer quede SIEMPRE visible aunque el contenido crezca
   (feedback_modal_body_overflow_contrato — no hay .modal-body global en app.css).
   Sin Bootstrap, sin z-index, sin hex inventado.
*/

.modal-trayectoria[b-p20fc61dwj] {
    max-width: 30rem;
    width: 92%;
    background-color: #FFFFFF;          /* Fondo del modal blanco (header azul aparte) */
}

/* ===== HEADER (azul Cotizador, 1 renglón: título blanco + X blanca) ===== */
.modal-header[b-p20fc61dwj] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-coti);
}

.modal-header h3[b-p20fc61dwj] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

/* La X global es gris; sobre el header azul se pinta blanca con hover atenuado. */
[b-p20fc61dwj] .modal-header .boton-x {
    color: #FFFFFF;
}

[b-p20fc61dwj] .modal-header .boton-x:hover {
    color: #FFFFFF;
    opacity: 0.7;
}

/* ===== BODY (scroll interno → el footer queda SIEMPRE visible) ===== */
.modal-body[b-p20fc61dwj] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
}

/* Subtítulo descriptivo: primera línea del body, compacto y gris. */
.modal-subtitulo[b-p20fc61dwj] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.625rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-p20fc61dwj] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== FORM ===== */
.form-group[b-p20fc61dwj] {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.form-label[b-p20fc61dwj] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: var(--color-coti);
}

.form-required[b-p20fc61dwj] {
    color: #CC0000;
    font-weight: normal;
}

.form-input[b-p20fc61dwj] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.form-input:focus[b-p20fc61dwj] {
    outline: none;
    border-color: var(--color-coti);
}

.form-hint[b-p20fc61dwj] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* Bloque de aviso de validación (rojo) — la captura aún no es válida para Guardar.
   Recuadro en tono de error para indicar que el botón Guardar está bloqueado. */
.bloque-validacion[b-p20fc61dwj] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background-color: #FEE2E2;
    border: 1px solid #F5B7B1;
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-normal);
    color: #CC0000;
}

/* ===== BOTONES ===== */
.modal-btn-cancelar[b-p20fc61dwj] {
    background-color: #FFFFFF;
    color: var(--color-coti);
    border: 1px solid var(--color-coti);
}

.modal-btn-cancelar:hover[b-p20fc61dwj] {
    background-color: #F5F5F5;
}

.modal-btn-guardar[b-p20fc61dwj] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
}

.modal-btn-guardar:hover:not(:disabled)[b-p20fc61dwj] {
    background-color: var(--color-coti-oscuro);
}

.modal-btn-guardar:disabled[b-p20fc61dwj] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}

/* ===== RESPONSIVE — touch target accesible en móvil para inputs ===== */
@media (max-width: 768px) {
    .form-input[b-p20fc61dwj] {
        min-height: 2.75rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/NodoKitArbol.razor.rz.scp.css */
/*
   NodoKitArbol.razor.css
   Estilos scoped del nodo recursivo de explosión de Kit (P04b).
   Color del módulo Cotizador (--color-coti / --color-coti-claro). Sin z-index,
   sin Bootstrap. La indentación por nivel es CUMULATIVA: cada sub-nodo vive dentro
   del .nka-contenido de su padre, que tiene padding-left propio.

   R1/P11 — Se agrega el control "Margen del Kit" en la cabecera (.nka-margen-kit-*).
   Las hojas se renderizan con <RenglonListaPlana> que tiene su propio CSS scoped
   (memoria feedback_css_scoped_no_compartido), así que aquí NO se duplica la grid
   de columnas: el padre pasa el Modo y RenglonListaPlana decide su grid.
*/

.nka-nodo[b-1chcrvjphc] {
    margin-bottom: 0.125rem;
}

/* ───── Cabecera del nodo ───── */
.nka-cabecera[b-1chcrvjphc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-coti-claro);
    border-left: 3px solid var(--color-coti);
    font-size: var(--texto-8pt);
    color: #212121;
}

.nka-chevron[b-1chcrvjphc] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--color-coti);
    font-size: var(--texto-9pt);
    line-height: 1;
    padding: 0.125rem 0.25rem;
    flex-shrink: 0;
}

.nka-chevron:hover[b-1chcrvjphc] {
    opacity: 0.7;
}

.nka-numeracion[b-1chcrvjphc] {
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
    font-weight: bold;
    flex-shrink: 0;
}

.nka-etiqueta-kit[b-1chcrvjphc] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    font-size: var(--texto-7pt);
    font-weight: bold;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.nka-codigo[b-1chcrvjphc] {
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
    color: #696969;
    flex-shrink: 0;
}

.nka-nombre[b-1chcrvjphc] {
    font-weight: bold;
    color: var(--color-coti);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.nka-cantidad[b-1chcrvjphc] {
    color: #212121;
    font-weight: bold;
    flex-shrink: 0;
}

.nka-inactivo[b-1chcrvjphc] {
    background-color: #FFF4E5;                              /* Crema pálido, sin variable canónica. */
    border: 1px solid var(--color-coti-naranja);
    color: var(--color-coti-naranja-texto);
    font-size: var(--texto-7pt);
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.125rem;
    flex-shrink: 0;
}

/* ───── EK2 — Subtotal del nodo en la cabecera ─────
   Σ CostoTotal recursivo del subárbol (ArbolRenglones.SubtotalNodo). Espejo del
   kit-subtotal del MOCK (RenglonKit): bold, alineado a la derecha, sin crecer. El
   tamaño se alinea a la tipografía de la cabecera del nodo real (--texto-8pt). */
.nka-subtotal[b-1chcrvjphc] {
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #212121;
    min-width: 6rem;
    text-align: right;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   R1/P11 — Control "Margen del Kit"
   Aplica el margen en BULK a todas las hojas del subárbol (spec §7.2).
   Visible si PuedeVerPrecio; editable si PuedeEditarPrecio.
   ═══════════════════════════════════════════════════════════════ */
.nka-margen-kit-wrap[b-1chcrvjphc] {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.0625rem 0.375rem;
    background-color: #FFFFFF;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.nka-margen-kit-label[b-1chcrvjphc] {
    font-size: var(--texto-7pt);
    color: var(--color-coti);
    font-weight: bold;
}

.nka-margen-kit-input[b-1chcrvjphc] {
    width: 2.5rem;
    border: none;
    background-color: transparent;
    text-align: right;
    font-size: var(--texto-8pt);
    color: #212121;
    outline: none;
}

.nka-margen-kit-pct[b-1chcrvjphc] {
    font-size: var(--texto-7pt);
    color: #696969;
}

.nka-margen-kit-readonly[b-1chcrvjphc] {
    font-size: var(--texto-8pt);
    color: #212121;
}

.nka-acciones[b-1chcrvjphc] {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}

.nka-btn[b-1chcrvjphc] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: var(--texto-9pt);
    line-height: 1;
    border-radius: 0.125rem;
}

.nka-btn:hover[b-1chcrvjphc] {
    background-color: rgba(255, 255, 255, 0.6);
}

.nka-btn-catalogo[b-1chcrvjphc] {
    color: var(--color-coti);
}

.nka-btn-eliminar[b-1chcrvjphc] {
    color: #CC0000;
}

/* ───── Contenido (hojas + sub-Kits) — indentación cumulativa por nivel ───── */
.nka-contenido[b-1chcrvjphc] {
    padding-left: 1rem;
    border-left: 1px dashed var(--color-coti-claro);
    margin-left: 0.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Touch targets accesibles para chevron / ⚙ / 🗑 en móvil. */
    .nka-chevron[b-1chcrvjphc],
    .nka-btn[b-1chcrvjphc] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .nka-acciones[b-1chcrvjphc] {
        gap: 0.25rem;
    }

    /* Input del Margen del Kit con altura táctil. */
    .nka-margen-kit-input[b-1chcrvjphc] {
        min-height: 2.75rem;
    }

    .nka-margen-kit-wrap[b-1chcrvjphc] {
        padding: 0.125rem 0.375rem;
    }

    /* Menos sangría en pantallas chicas para no comerse el ancho. */
    .nka-contenido[b-1chcrvjphc] {
        padding-left: 0.5rem;
        margin-left: 0.25rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/RenglonListaPlana.razor.rz.scp.css */
/*
   RenglonListaPlana.razor.css
   Renglón atómico inline en la lista plana del Detalle.

   R1/P11 — 3 modos de grid coordinados 1:1 con KitTableHeader.razor.css y
   NodoKitArbol.razor.css. CSS scoped Blazor NO se hereda entre componentes
   hermanos (memoria feedback_css_scoped_no_compartido); por eso los 3 archivos
   declaran los MISMOS 3 grid-template-columns. Cualquier cambio de ancho en
   uno DEBE replicarse en los otros dos.

   Columnas base (siempre presentes): chevron, idx, origen, descripcion, sku,
   proveedor, variante, cantidad, acciones (9 columnas).
   Columnas costo: costou, total, hrs (3 columnas).
   Columnas precio: margen, preciou, totalprecio, visible (4 columnas).
*/

.rlp[b-5hfuyatgnn] {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    font-size: var(--texto-8pt);
    color: #212121;
}

/* ── Modo COSTO (default, retrocompatible con T01-T08) ── */
.rlp-modo-costo[b-5hfuyatgnn] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 5rem 6rem 3rem 3rem;
}

/* ── Modo PRECIO (solo vendedor sin permisos de costo) ── */
.rlp-modo-precio[b-5hfuyatgnn] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 4rem 5rem 6rem 3rem 3rem;
}

/* ── Modo AMBOS (Ing + Vta — lado a lado, spec §15.4) ── */
.rlp-modo-ambos[b-5hfuyatgnn] {
    grid-template-columns: 1.5rem 2rem 3.5rem 1fr 7rem 6rem 4rem 3.5rem 5rem 6rem 3rem 4rem 5rem 6rem 3rem 3rem;
}

.rlp:hover[b-5hfuyatgnn] {
    background-color: #FAFAFA;
}

.rlp-idx[b-5hfuyatgnn] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
    text-align: right;
}

.rlp-origen[b-5hfuyatgnn] {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    flex-wrap: wrap;
}

.rlp-descripcion[b-5hfuyatgnn] {
    color: #212121;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rlp-sku[b-5hfuyatgnn],
.rlp-proveedor[b-5hfuyatgnn] {
    color: #696969;
    font-size: var(--texto-7pt);
    overflow: hidden;
    text-overflow: ellipsis;
}

.rlp-variante[b-5hfuyatgnn] {
    color: #BDBDBD;
    text-align: center;
}

.rlp-cantidad[b-5hfuyatgnn],
.rlp-costou[b-5hfuyatgnn],
.rlp-total[b-5hfuyatgnn],
.rlp-hrs[b-5hfuyatgnn],
.rlp-margen[b-5hfuyatgnn],
.rlp-preciou[b-5hfuyatgnn],
.rlp-totalprecio[b-5hfuyatgnn] {
    text-align: right;
    color: #212121;
}

.rlp-total[b-5hfuyatgnn],
.rlp-totalprecio[b-5hfuyatgnn] {
    font-weight: bold;
}

.rlp-hrs[b-5hfuyatgnn] {
    color: #696969;
    font-size: var(--texto-7pt);
}

/* R1/P11 — Margen mostrado como "(g) 36.00%" cuando viene del global default:
   color atenuado para distinguir el override propio del fallback global. */
.rlp-margen[b-5hfuyatgnn] {
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
}

.rlp-preciou[b-5hfuyatgnn] {
    color: var(--color-coti-naranja-texto);   /* Naranja oscuro acompasado con la banda PRECIO TOTAL */
}

.rlp-totalprecio[b-5hfuyatgnn] {
    color: var(--color-coti-naranja-texto);
}

.rlp-visible[b-5hfuyatgnn] {
    text-align: center;
    color: #696969;
}

.rlp-checkbox-visible[b-5hfuyatgnn] {
    cursor: pointer;
    margin: 0;
}

.rlp-acciones[b-5hfuyatgnn] {
    display: flex;
    gap: 0.125rem;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   MODO EDICIÓN (P02)
   ═══════════════════════════════════════════════════════════════ */

/* Fila resaltada mientras se edita (SPEC §9.3 — amarillo suave).
   app.css no tiene una variable para este resaltado; el hex queda documentado
   aquí igual que el resto del módulo usa hex puntuales. */
.rlp-editando[b-5hfuyatgnn] {
    background-color: #FFFBE6;        /* Amarillo muy suave — fila en edición (SPEC §9.3) */
    border-bottom: 1px solid #F0E6B0;
}

.rlp-editando:hover[b-5hfuyatgnn] {
    background-color: #FFFBE6;        /* No cambiar al pasar el mouse mientras se edita */
}

/* Inputs inline dentro de la grid */
.rlp-input[b-5hfuyatgnn] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.125rem 0.25rem;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    font-size: var(--texto-8pt);
    color: #212121;
    background-color: #FFFFFF;
}

.rlp-input:focus[b-5hfuyatgnn] {
    outline: none;
    border-color: var(--color-coti);
}

.rlp-input-num[b-5hfuyatgnn] {
    text-align: right;
}

.rlp-input-desc[b-5hfuyatgnn] {
    text-align: left;
}

/* Botones de acción (✎ / ✓ / ✕ / 🗑) — cajitas pequeñas, sin texto largo */
.rlp-btn[b-5hfuyatgnn] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: var(--texto-9pt);
    line-height: 1;
    border-radius: 0.125rem;
    /* Touch target accesible: se garantiza el mínimo en móvil vía @media abajo */
}

.rlp-btn:hover[b-5hfuyatgnn] {
    background-color: #F0F0F0;
}

.rlp-btn-editar[b-5hfuyatgnn] {
    color: var(--color-coti);
}

.rlp-btn-confirmar[b-5hfuyatgnn] {
    color: #008000;                   /* Verde — confirmar */
    font-weight: bold;
}

.rlp-btn-cancelar[b-5hfuyatgnn] {
    color: #CC0000;                   /* Rojo — cancelar */
    font-weight: bold;
}

.rlp-btn-eliminar[b-5hfuyatgnn] {
    color: #CC0000;                   /* Rojo — eliminar */
}

/* Atenuado cuando hay otro renglón en edición (regla un-renglón-a-la-vez) */
.rlp-btn-atenuado[b-5hfuyatgnn] {
    opacity: 0.35;
    cursor: not-allowed;
}

.rlp-btn-atenuado:hover[b-5hfuyatgnn] {
    background-color: transparent;
}

.rlp-btn:disabled[b-5hfuyatgnn] {
    cursor: not-allowed;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Touch targets ≥44px en móvil para los botones de acción inline. */
    .rlp-btn[b-5hfuyatgnn] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .rlp-acciones[b-5hfuyatgnn] {
        gap: 0.25rem;
    }

    /* Inputs inline a altura táctil (≥44px) en móvil; sin esto medían ~22px. */
    .rlp-input[b-5hfuyatgnn] {
        min-height: 2.75rem;
    }

    /* Checkbox de visibilidad también necesita touch target accesible. */
    .rlp-checkbox-visible[b-5hfuyatgnn] {
        width: 1.5rem;
        height: 1.5rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/BloqueTrayectorias.razor.rz.scp.css */
/*
   BloqueTrayectorias.razor.css (R5e-3)
   Sub-bloque L2 "Trayectorias y Definiciones" con dos tablas editables
   (Trayectorias / Columpios). CALCO 1:1 de SeccionInfraCompartida.razor.css (R5e-1).

   El CSS scoped es por componente: las clases rlp-btn-* / cot-seccion-vacia que usa el
   markup viven en OTROS componentes (SeccionCostosAdic, RenglonListaPlana,
   DetalleCotizacion) y NO aplican aquí (feedback_css_scoped_no_compartido). Por eso se
   RE-DECLARAN calcadas del patrón visual del módulo. Sin Bootstrap, sin z-index, sin hex
   inventado.

   Patrón canónico Arq.5: las dos tablas son <div> con display:grid que en móvil colapsa a
   tarjeta (repeat(auto-fit, minmax())), CERO scroll horizontal (feedback_responsive_tablas_consulta_real).
   Calcado de la vara real de reflow Operacion/Secciones/SecTroncos.razor.css.
*/

/* ═══════════════════════════════════════════════════════════════
   AVISO INTERNO (datos pre-costo del troncal — el motor los explota en R7)
   ═══════════════════════════════════════════════════════════════ */
.cot-infra-aviso[b-cfm1lm8vu9] {
    margin-bottom: 0.625rem;
    padding: 0.5rem 0.625rem;
    background-color: var(--color-coti-claro);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    line-height: var(--line-height-normal);
    color: #212121;
}

/* Título de cada parte (Trayectorias / Columpios) dentro del sub-bloque. */
.cot-infra-parte-titulo[b-cfm1lm8vu9] {
    margin: 0.625rem 0 0.25rem 0;
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: var(--color-coti);
}

/* ═══════════════════════════════════════════════════════════════
   TABLAS (patrón canónico Arq.5 — <div> grid → tarjeta en móvil)
   Vara: Operacion/Secciones/SecTroncos.razor.css. Encabezado y filas comparten el
   mismo grid-template-columns → columnas alineadas en desktop. SIN min-width ni
   overflow-x (eso era el scroll-wrapper retirado): minmax(..,1fr) deja que el grid
   se comprima para caber sin scroll horizontal.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tabla A — Trayectorias: 6 columnas (# · Tipo · Metros · Cables · Curvas · acc) ── */
.tray-tabla[b-cfm1lm8vu9] {
    width: 100%;
    font-size: var(--texto-8pt);
}

.tray-thead[b-cfm1lm8vu9],
.tray-fila[b-cfm1lm8vu9] {
    display: grid;
    grid-template-columns:
        3.5rem
        minmax(7rem, 1.6fr)
        minmax(4rem, 1fr)
        minmax(4rem, 1fr)
        minmax(4rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

/* ── Tabla B — Columpios: 4 columnas (# · Ancho · Cantidad · acc) ── */
.col-tabla[b-cfm1lm8vu9] {
    width: 100%;
    font-size: var(--texto-8pt);
}

.col-thead[b-cfm1lm8vu9],
.col-fila[b-cfm1lm8vu9] {
    display: grid;
    grid-template-columns:
        3.5rem
        minmax(5rem, 1fr)
        minmax(5rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

/* Encabezados de ambas tablas (gris claro, mismo tono de la vara). */
.tray-thead[b-cfm1lm8vu9],
.col-thead[b-cfm1lm8vu9] {
    background-color: #F3F4F6;
    border-bottom: 1px solid var(--color-border);
    color: #696969;
    font-weight: bold;
}

/* Filas de ambas tablas (línea divisoria gris sutil). */
.tray-fila[b-cfm1lm8vu9],
.col-fila[b-cfm1lm8vu9] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.tray-fila:hover[b-cfm1lm8vu9],
.col-fila:hover[b-cfm1lm8vu9] {
    background-color: #FAFAFA;
}

.tray-celda[b-cfm1lm8vu9] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Identificador (#): tipografía de códigos, igual que el viejo .col-idx. */
.tray-etq[b-cfm1lm8vu9] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
}

/* Columnas numéricas (alineadas a la derecha en desktop). */
.tray-num[b-cfm1lm8vu9] {
    text-align: right;
    white-space: nowrap;
}

/* Acciones (✎ / 🗑): a la derecha, sin partir. */
.tray-acc[b-cfm1lm8vu9] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ESTADO VACÍO (espejo de .cot-seccion-vacia del Detalle)
   ═══════════════════════════════════════════════════════════════ */
.cot-seccion-vacia[b-cfm1lm8vu9] {
    padding: 0.5rem 0.625rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN (✎ / 🗑) — cajitas pequeñas, mismo patrón que
   .rlp-btn de SeccionCostosAdic / RenglonListaPlana
   ═══════════════════════════════════════════════════════════════ */
.rlp-btn[b-cfm1lm8vu9] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: var(--texto-9pt);
    line-height: 1;
    border-radius: 0.125rem;
}

.rlp-btn:hover[b-cfm1lm8vu9] {
    background-color: #F0F0F0;
}

.rlp-btn-editar[b-cfm1lm8vu9] {
    color: var(--color-coti);
}

.rlp-btn-eliminar[b-cfm1lm8vu9] {
    color: #CC0000;                   /* Rojo — eliminar */
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ambas tablas colapsan a tarjeta apilada (Arq.5), CERO
   scroll horizontal. + touch targets ≥44px en móvil (mismo criterio que P02).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* El encabezado de columnas se va; cada celda muestra su rótulo (data-rotulo). */
    .tray-thead[b-cfm1lm8vu9],
    .col-thead[b-cfm1lm8vu9] {
        display: none;
    }

    /* La fila colapsa a tarjeta: los atributos fluyen uniformes y bajan de renglón
       sin huecos (auto-fit + minmax), sin scroll horizontal a 320px. */
    .tray-fila[b-cfm1lm8vu9],
    .col-fila[b-cfm1lm8vu9] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    /* Cada celda se rotula con su encabezado (data-rotulo → ::before). */
    .tray-celda[b-cfm1lm8vu9] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        text-align: left;        /* anula el text-align:right de .tray-num en tarjeta */
        white-space: normal;
    }

    .tray-celda[b-cfm1lm8vu9]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* Identificador (#) y acciones ocupan renglón completo, sin rótulo. */
    .tray-etq[b-cfm1lm8vu9] {
        grid-column: 1 / -1;
        flex-direction: row;
        color: var(--color-coti);
        font-size: var(--texto-9pt);
    }
    .tray-etq[b-cfm1lm8vu9]::before {
        content: none;
    }

    .tray-acc[b-cfm1lm8vu9] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }
    .tray-acc[b-cfm1lm8vu9]::before {
        content: none;
    }

    /* Touch targets ≥44px de los botones de acción. */
    .rlp-btn[b-cfm1lm8vu9] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionAudioVideo.razor.rz.scp.css */
/*
   SeccionAudioVideo.razor.css
   Maqueta del cascarón. Clases calcadas 1:1 de SeccionCableado.razor.css
   (el CSS scoped de Blazor NO se hereda entre componentes — hay que redeclarar).
*/

.bloque-interno-aviso[b-z70fh0zdco] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.bloque-placeholder[b-z70fh0zdco] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem;
    font-style: italic;
}

.lista-plana-placeholder[b-z70fh0zdco] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem 0.625rem;
    font-style: italic;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionBomManoObra.razor.rz.scp.css */
/*
   SeccionBomManoObra.razor.css
   BOM Mano de Obra consolidado: 2 sub-acordeones (productivo / no productivo) + total general.

   R1/P11 — Se añaden clases para las columnas de precio (col-margen, col-totalprecio).
   El min-width crece para acomodar las 3 columnas extra cuando aplica.
*/

/* Estado vacío del acordeón 8 (espejo de .cot-seccion-vacia del Detalle / SeccionCostosAdic). */
.cot-seccion-vacia[b-j9wuaml7mp] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* Scroll horizontal (lección P02): la tabla densa de hasta 12 columnas (cuando hay
   costo Y precio juntos) no debe recortar columnas en móvil. */
.cot-renglones-scroll[b-j9wuaml7mp] {
    overflow-x: auto;
}

.sec-tabla[b-j9wuaml7mp] {
    width: 100%;
    /* min-width subido a 64rem para acomodar costo + precio lado a lado (R1/P11):
       9 cols base + 3 cols precio extra. */
    min-width: 64rem;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-j9wuaml7mp] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-j9wuaml7mp] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.col-idx[b-j9wuaml7mp] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 3.5rem;
}

.col-num[b-j9wuaml7mp] {
    text-align: right;
    white-space: nowrap;
}

.col-total[b-j9wuaml7mp] {
    font-weight: bold;
}

.col-apariciones[b-j9wuaml7mp] {
    color: #696969;
    font-size: var(--texto-8pt);
}

/* R1/P11 — Columnas de precio: tonalidad naranja oscura acompasada con la banda
   PRECIO TOTAL del header (#E8820C). */
.col-margen[b-j9wuaml7mp] {
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
}

.col-totalprecio[b-j9wuaml7mp] {
    font-weight: bold;
    color: var(--color-coti-naranja-texto);
}

.bom-mo-total[b-j9wuaml7mp] {
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    background-color: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--texto-9pt);
    color: #212121;
}

.bom-mo-pct[b-j9wuaml7mp] {
    color: #696969;
}

/* EST_01: bloque responsive obligatorio al final. */
@media (max-width: 768px) {
    .sec-tabla thead th[b-j9wuaml7mp] {
        padding: 0.3125rem 0.375rem;
    }

    .sec-tabla tbody td[b-j9wuaml7mp] {
        padding: 0.25rem 0.375rem;
    }

    .bom-mo-total[b-j9wuaml7mp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionBomMateriales.razor.rz.scp.css */
/*
   SeccionBomMateriales.razor.css
   BOM materiales consolidado: banner amarillo + tablas anidadas read-only.

   R1/P11 — Se añaden clases para las columnas de precio (col-margen, col-totalprecio).
   El min-width crece para acomodar las 3 columnas extra cuando aplica.
*/

.bom-banner[b-zxh3mzfabw] {
    padding: 0.375rem 0.625rem;
    background-color: #FFFDE7;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    margin-bottom: 0.5rem;
    color: #5D4037;
}

.bom-placeholder[b-zxh3mzfabw] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem;
    font-style: italic;
}

/* Estado vacío del acordeón 7 (espejo de .cot-seccion-vacia del Detalle / SeccionCostosAdic). */
.cot-seccion-vacia[b-zxh3mzfabw] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* Scroll horizontal (lección P02): la tabla densa de hasta 11 columnas (cuando hay
   costo Y precio juntos) no debe recortar columnas en móvil; min-width fuerza el
   desbordamiento dentro del wrapper a ≤768px. */
.cot-renglones-scroll[b-zxh3mzfabw] {
    overflow-x: auto;
}

.sec-tabla[b-zxh3mzfabw] {
    width: 100%;
    /* min-width subido a 60rem para acomodar costo + precio lado a lado (R1/P11):
       8 cols base + 3 cols precio extra. Quien solo ve precio o solo costo no llena
       toda esa anchura; el wrapper habilita scroll natural. */
    min-width: 60rem;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-zxh3mzfabw] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-zxh3mzfabw] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.col-idx[b-zxh3mzfabw] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 3.5rem;
}

.col-num[b-zxh3mzfabw] {
    text-align: right;
    white-space: nowrap;
}

.col-total[b-zxh3mzfabw] {
    font-weight: bold;
}

/* R1/P11 — Columnas de precio: tonalidad naranja oscura acompasada con la banda
   PRECIO TOTAL del header (#E8820C). */
.col-margen[b-zxh3mzfabw] {
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
}

.col-totalprecio[b-zxh3mzfabw] {
    font-weight: bold;
    color: var(--color-coti-naranja-texto);
}

/* EST_01: bloque responsive obligatorio al final.
   Componente read-only sin touch targets; la tabla densa ya fluye vía
   .cot-renglones-scroll (min-width fuerza el desbordamiento dentro del wrapper).
   Único ajuste útil a ≤768px: compactar padding/banner para ganar ancho visible. */
@media (max-width: 768px) {
    .bom-banner[b-zxh3mzfabw] {
        padding: 0.3125rem 0.5rem;
    }

    .sec-tabla thead th[b-zxh3mzfabw] {
        padding: 0.3125rem 0.375rem;
    }

    .sec-tabla tbody td[b-zxh3mzfabw] {
        padding: 0.25rem 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionCableado.razor.rz.scp.css */
/*
   SeccionCableado.razor.css
   Bloque 3.0 con NODOS UTP + TRAYECTORIAS placeholder.
*/

.bloque-interno-aviso[b-nwxszan4gw] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.bloque-titulo[b-nwxszan4gw] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    color: var(--color-coti);
    padding: 0.5rem 0 0.25rem;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 0.375rem;
}

.bloque-titulo:first-of-type[b-nwxszan4gw] {
    padding-top: 0.25rem;
}

.bloque-placeholder[b-nwxszan4gw] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem;
    font-style: italic;
}

.sec-tabla[b-nwxszan4gw] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-nwxszan4gw] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-nwxszan4gw] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.col-idx[b-nwxszan4gw] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 3.5rem;
}

.col-num[b-nwxszan4gw] {
    text-align: right;
    white-space: nowrap;
}

.col-acciones[b-nwxszan4gw] {
    text-align: right;
    white-space: nowrap;
    width: 4rem;
}

.nodos-pie[b-nwxszan4gw] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.25rem;
    font-style: italic;
}

.lista-plana-placeholder[b-nwxszan4gw] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem 0.625rem;
    font-style: italic;
}

/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionCCTV.razor.rz.scp.css */
/*
   SeccionCCTV.razor.css
   Estilos del bloque 2.0 (verde olivo) + ayuda visual de la lista plana.
*/

.bloque-interno-aviso[b-0j1kae6kai] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.sec-tabla[b-0j1kae6kai] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
    margin-bottom: 0.25rem;
}

.sec-tabla thead th[b-0j1kae6kai] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-0j1kae6kai] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.col-idx[b-0j1kae6kai] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 3.5rem;
}

.col-num[b-0j1kae6kai] {
    text-align: right;
    white-space: nowrap;
}

.col-acciones[b-0j1kae6kai] {
    text-align: right;
    white-space: nowrap;
    width: 4rem;
}

.trayectorias-pie[b-0j1kae6kai] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.25rem;
    font-style: italic;
}

.kit-resumen-cerrado[b-0j1kae6kai] {
    font-size: var(--texto-7pt);
    color: #696969;
    font-style: italic;
    padding: 0.375rem 0.625rem;
}

.lista-plana-pie[b-0j1kae6kai] {
    font-size: var(--texto-7pt);
    color: #9E9E9E;
    font-style: italic;
    padding: 0.5rem 0.625rem;
    border-top: 1px solid #E0E0E0;
}

/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionControlAcceso.razor.rz.scp.css */
/*
   SeccionControlAcceso.razor.css
   Lista plana con 3 Kits + 2 actividades sueltas.
*/

.bloque-interno-aviso[b-vps9sj5xe9] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.bloque-placeholder[b-vps9sj5xe9] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem;
    font-style: italic;
}

.kit-resumen-cerrado[b-vps9sj5xe9] {
    font-size: var(--texto-7pt);
    color: #696969;
    font-style: italic;
    padding: 0.375rem 0.625rem;
}

/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionCostosAdic.razor.rz.scp.css */
/*
   SeccionCostosAdic.razor.css (P03 + R1/P11)
   Acordeón 5 — Costos Adicionales. CRUD real con edición inline propia.

   El CSS scoped es por componente: las clases sec-tabla/col-*/rlp-*/cot-*
   que usa el markup viven en otros componentes (RenglonListaPlana, DetalleCotizacion)
   y NO aplican aquí (memoria feedback_css_scoped_no_compartido). Por eso se
   re-declaran las que necesita esta pantalla[b-0ejvhuie4o], siguiendo el MISMO patrón visual
   del módulo. Sin Bootstrap[b-0ejvhuie4o], sin z-index.

   R1/P11 — Se añaden:
     • col-margen / col-totalprecio / col-visible para las columnas de precio.
     • cot-checkbox-visible para el toggle Visible al Cliente.
*/

/* ═══════════════════════════════════════════════════════════════
   TABLA (mismo patrón que SeccionDocumentos / el demo original)
   ═══════════════════════════════════════════════════════════════ */
.sec-tabla[b-0ejvhuie4o] {
    width: 100%;
    /* min-width subido a 50rem para acomodar costo + precio + visibilidad lado a lado:
       6 cols base + 3 cols precio + 1 col visibilidad + 1 col acciones (R1/P11). */
    min-width: 50rem;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-0ejvhuie4o] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-0ejvhuie4o] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.sec-tabla tbody tr:hover[b-0ejvhuie4o] {
    background-color: #FAFAFA;
}

.col-idx[b-0ejvhuie4o] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 2.5rem;
}

.col-num[b-0ejvhuie4o] {
    text-align: right;
    white-space: nowrap;
}

.col-total[b-0ejvhuie4o] {
    font-weight: bold;
}

.col-acciones[b-0ejvhuie4o] {
    white-space: nowrap;
    text-align: right;
    width: 4rem;
}

/* R1/P11 — Columnas de precio. */
.col-margen[b-0ejvhuie4o] {
    color: var(--color-coti);
    font-family: var(--fuente-codigos);
    white-space: nowrap;
}

.col-totalprecio[b-0ejvhuie4o] {
    font-weight: bold;
    color: var(--color-coti-naranja-texto);
}

.col-visible[b-0ejvhuie4o] {
    text-align: center;
    width: 3rem;
}

.cot-checkbox-visible[b-0ejvhuie4o] {
    cursor: pointer;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ESTADO VACÍO (espejo de .cot-seccion-vacia del Detalle)
   ═══════════════════════════════════════════════════════════════ */
.cot-seccion-vacia[b-0ejvhuie4o] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL (lección P02)
   ═══════════════════════════════════════════════════════════════ */
.cot-renglones-scroll[b-0ejvhuie4o] {
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FILA EN EDICIÓN (mismo amarillo suave que RenglonListaPlana — SPEC §9.3)
   ═══════════════════════════════════════════════════════════════ */
.fila-editando td[b-0ejvhuie4o] {
    background-color: #FFFBE6;        /* Amarillo muy suave — fila en edición */
    border-bottom: 1px solid #F0E6B0; /* Borde amarillo-oliva 1:1 con .rlp-editando (P02) */
}

.fila-editando:hover td[b-0ejvhuie4o] {
    background-color: #FFFBE6;        /* No cambiar al pasar el mouse mientras se edita */
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS INLINE (mismo patrón que .rlp-input de RenglonListaPlana)
   ═══════════════════════════════════════════════════════════════ */
.rlp-input[b-0ejvhuie4o] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.125rem 0.25rem;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    font-size: var(--texto-8pt);
    color: #212121;
    background-color: #FFFFFF;
}

.rlp-input:focus[b-0ejvhuie4o] {
    outline: none;
    border-color: var(--color-coti);
}

.rlp-input-num[b-0ejvhuie4o] {
    text-align: right;
}

.rlp-input-desc[b-0ejvhuie4o] {
    text-align: left;
}

/* Dropdown de categoría: hereda el estilo de input inline + flecha nativa */
.cot-cat-select[b-0ejvhuie4o] {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN (✎ / ✓ / ✕ / 🗑) — cajitas pequeñas, mismo
   patrón que .rlp-btn de RenglonListaPlana
   ═══════════════════════════════════════════════════════════════ */
.rlp-btn[b-0ejvhuie4o] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: var(--texto-9pt);
    line-height: 1;
    border-radius: 0.125rem;
}

.rlp-btn:hover[b-0ejvhuie4o] {
    background-color: #F0F0F0;
}

.rlp-btn-editar[b-0ejvhuie4o] {
    color: var(--color-coti);
}

.rlp-btn-confirmar[b-0ejvhuie4o] {
    color: #008000;                   /* Verde — confirmar */
    font-weight: bold;
}

.rlp-btn-cancelar[b-0ejvhuie4o] {
    color: #CC0000;                   /* Rojo — cancelar */
    font-weight: bold;
}

.rlp-btn-eliminar[b-0ejvhuie4o] {
    color: #CC0000;                   /* Rojo — eliminar */
}

/* Atenuado cuando hay otra fila en edición (regla una-fila-a-la-vez) */
.rlp-btn-atenuado[b-0ejvhuie4o] {
    opacity: 0.35;
    cursor: not-allowed;
}

.rlp-btn-atenuado:hover[b-0ejvhuie4o] {
    background-color: transparent;
}

.rlp-btn:disabled[b-0ejvhuie4o] {
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — touch targets ≥44px en móvil (mismo criterio que P02)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rlp-btn[b-0ejvhuie4o] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .rlp-input[b-0ejvhuie4o] {
        min-height: 2.75rem;
    }

    /* Checkbox de visibilidad con touch target accesible en móvil. */
    .cot-checkbox-visible[b-0ejvhuie4o] {
        width: 1.5rem;
        height: 1.5rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionDocumentos.razor.rz.scp.css */
/*
   SeccionDocumentos.razor.css (P07)
   Acordeón 0 — Documentos Adjuntos. CRUD real: tabla de documentos +
   subida por ModalAnexos + eliminar con MODAL ESTANDAR SiREI.

   B3 (2026-05-30): la subida pasó a ModalAnexos (rutina única de archivos);
   el botón "Anexar documento" ya no envuelve un <InputFile> inline, ahora es
   un <button> estándar que abre el modal — por eso se retiraron las reglas del
   InputFile oculto (::deep .doc-input-file) y .doc-btn-disabled.

   LECCIÓN P06 (feedback_css_scoped_no_compartido): el CSS scoped es POR
   componente. Las clases sec-tabla / col-* / cot-renglones-scroll /
   cot-seccion-vacia que usan otros componentes (SeccionCostosAdic,
   DetalleCotizacion) NO aplican aquí (su scope es de ellos). Por eso se
   re-declaran TODAS las que usa el markup de ESTA pantalla, con el MISMO
   patrón visual del módulo (mismos valores que el original) y variables CSS
   de app.css. Sin Bootstrap, sin z-index, sin hex inventado nuevo.

   Clases GLOBALES (app.css — NO redeclarar): boton, boton-chico,
   modal-overlay, modal-content, sec-modal-eliminar (aporta modal-header /
   modal-body / modal-footer del módulo), mensaje-confirmacion, mensaje-info,
   modal-btn-cancelar, modal-btn-eliminar.

   Componentes con scope propio (no viven en app.css): BotonEliminar (✕ rojo).
*/

/* ═══════════════════════════════════════════════════════════════
   TABLA (mismo patrón que SeccionCostosAdic / el cascarón original)
   ═══════════════════════════════════════════════════════════════ */
.sec-tabla[b-ci4ksonamc] {
    width: 100%;
    /* min-width fuerza el desbordamiento dentro de .cot-renglones-scroll en
       móvil: sin él la tabla 100% se comprime y el overflow-x:auto nunca activa
       scroll, dejando las 4 columnas + nombre largo ilegibles a ~360px. 30rem
       es el ancho cómodo de #/Documento/Tamaño/Fecha/✕. */
    min-width: 30rem;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-ci4ksonamc] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-ci4ksonamc] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.sec-tabla tbody tr:hover[b-ci4ksonamc] {
    background-color: #FAFAFA;
}

/* Columna # (índice 0.N) — gris tenue, fuente de códigos */
.col-idx[b-ci4ksonamc] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 2.5rem;
}

/* Columna numérica (Tamaño) — alineada a la derecha, sin quiebre de línea */
.col-num[b-ci4ksonamc] {
    text-align: right;
    white-space: nowrap;
}

/* Columna de acciones (✕) — a la derecha, angosta */
.col-acciones[b-ci4ksonamc] {
    white-space: nowrap;
    text-align: right;
    width: 3rem;
}

/* Nombre del documento — enlace de descarga (mismo estilo que el nombre de
   adjunto de SecEvidencia: color del módulo, recorte con ellipsis). */
.doc-nombre[b-ci4ksonamc] {
    color: var(--color-coti);
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.doc-nombre:hover[b-ci4ksonamc] {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   ESTADO VACÍO (espejo de .cot-seccion-vacia del Detalle)
   ═══════════════════════════════════════════════════════════════ */
.cot-seccion-vacia[b-ci4ksonamc] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL (lección P02: la tabla no debe recortar columnas
   en móvil; combinada con min-width de .sec-tabla)
   ═══════════════════════════════════════════════════════════════ */
.cot-renglones-scroll[b-ci4ksonamc] {
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   MENSAJE DE ERROR DE SUBIDA (archivo grande, fallo) — calco del
   .sec-ev-error de SecEvidencia, renombrado al prefijo del componente
   ═══════════════════════════════════════════════════════════════ */
.doc-error[b-ci4ksonamc] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
    background-color: #FDECEA;
    border: 1px solid #C62828;
    border-radius: 0.25rem;
    color: #B71C1C;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE SUBIDA — reusa .boton .boton-chico (globales) y abre
   ModalAnexos. Verde #4CAF50 igual que el "Agregar" de SecEvidencia /
   el "Seleccionar archivos" de ModalAnexos, para que la acción de subir
   sea consistente en todo el sistema. El estado deshabilitado mientras
   hay una subida en curso lo resuelve el atributo disabled del <button>
   (no una clase aparte).
   ═══════════════════════════════════════════════════════════════ */
.doc-boton-row[b-ci4ksonamc] {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.doc-btn-agregar[b-ci4ksonamc] {
    background-color: #4CAF50;
    color: #FFFFFF;
    margin-left: 0;
    margin-right: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — touch targets ≥44px en móvil (mismo criterio que P02/P03)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* El nombre no debe forzar un ancho que rompa el scroll en pantallas
       chicas; se recorta antes. */
    .doc-nombre[b-ci4ksonamc] {
        max-width: 12rem;
    }

    /* Touch target del botón "Anexar documento" (≥44px). */
    .doc-btn-agregar[b-ci4ksonamc] {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.5rem 0.875rem;
        display: inline-flex;
        align-items: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionInfraestructura.razor.rz.scp.css */
/*
   SeccionInfraestructura.razor.css
   Bloque 1.0 (verde olivo) con 3 partes + lista plana de actividades.
*/

.bloque-interno-aviso[b-zl8i4d5oox] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.parte-titulo[b-zl8i4d5oox] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    color: #3E4D3F;
    padding: 0.625rem 0.5rem 0.25rem;
}

.sec-tabla[b-zl8i4d5oox] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
    margin-bottom: 0.375rem;
}

.sec-tabla thead th[b-zl8i4d5oox] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-zl8i4d5oox] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.col-idx[b-zl8i4d5oox] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 3.5rem;
}

.col-num[b-zl8i4d5oox] {
    text-align: right;
    white-space: nowrap;
}

.col-acciones[b-zl8i4d5oox] {
    text-align: right;
    white-space: nowrap;
    width: 4rem;
}

/* Troncos compartidos — div con grid manual, fondo gris dasheado */
.troncos-wrap[b-zl8i4d5oox] {
    padding: 0.375rem 0.625rem;
    background-color: #FAFAFA;
    border-radius: 0.1875rem;
    border: 1px dashed #E0E0E0;
    margin-bottom: 0.375rem;
}

.troncos-aviso[b-zl8i4d5oox] {
    font-style: italic;
    color: #696969;
    margin-bottom: 0.375rem;
    font-size: var(--texto-7pt);
}

.troncos-tabla-header[b-zl8i4d5oox],
.troncos-tabla-fila[b-zl8i4d5oox] {
    display: grid;
    grid-template-columns: 4rem 5rem 1fr 5rem;
    gap: 0.5rem;
    padding: 0.1875rem 0;
    font-size: var(--texto-7pt);
}

.troncos-tabla-header[b-zl8i4d5oox] {
    border-bottom: 1px solid #E0E0E0;
    font-weight: bold;
    color: #696969;
}

.troncos-tabla-fila[b-zl8i4d5oox] {
    color: #212121;
}

.troncos-metros[b-zl8i4d5oox] {
    text-align: right;
}

.pie-nota[b-zl8i4d5oox] {
    font-size: var(--texto-7pt);
    color: #9E9E9E;
    font-style: italic;
    padding: 0.25rem 0.5rem;
}

.lista-plana-pie[b-zl8i4d5oox] {
    font-size: var(--texto-7pt);
    color: #9E9E9E;
    font-style: italic;
    padding: 0.5rem 0.625rem;
    border-top: 1px solid #E0E0E0;
}

/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionInstalacionEspecial.razor.rz.scp.css */
/*
   SeccionInstalacionEspecial.razor.css
   Maqueta del cascarón. Clases calcadas 1:1 de SeccionCableado.razor.css
   (el CSS scoped de Blazor NO se hereda entre componentes — hay que redeclarar).
*/

.bloque-interno-aviso[b-dlvdaerv90] {
    padding: 0.375rem 0.625rem;
    background-color: #F1F4F1;
    border-radius: 0.1875rem;
    font-size: var(--texto-7pt);
    margin-bottom: 0.5rem;
    color: #3E4D3F;
}

.bloque-placeholder[b-dlvdaerv90] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem;
    font-style: italic;
}

.lista-plana-placeholder[b-dlvdaerv90] {
    font-size: var(--texto-8pt);
    color: #696969;
    padding: 0.5rem 0.625rem;
    font-style: italic;
}
/* _content/SiREI_2026/Components/Pages/20Cot/Detalle/Secciones/SeccionNoIncluido.razor.rz.scp.css */
/*
   SeccionNoIncluido.razor.css (P06)
   Acordeón "No Incluido". CRUD real con edición inline propia.

   El CSS scoped es por componente: las clases sec-tabla/col-*/rlp-*/cot-*
   que usa el markup viven en otros componentes (RenglonListaPlana, DetalleCotizacion)
   y NO aplican aquí. Por eso se re-declaran las que necesita esta pantalla[b-0vekxdtx68],
   calcadas 1:1 del molde SeccionCostosAdic.razor.css (mismos valores, mismas
   variables de app.css). Sin Bootstrap[b-0vekxdtx68], sin z-index[b-0vekxdtx68], sin hex inventado nuevo.
*/

.sec-tabla[b-0vekxdtx68] {
    width: 100%;
    /* min-width fuerza el desbordamiento dentro de .cot-renglones-scroll en móvil:
       sin él, la tabla 100% se comprime y el overflow-x:auto nunca activa scroll.
       30rem (no 36rem como P03) porque P06 tiene solo 3 columnas de texto + acciones. */
    min-width: 30rem;
    border-collapse: collapse;
    font-size: var(--texto-8pt);
}

.sec-tabla thead th[b-0vekxdtx68] {
    background-color: #F5F5F5;
    color: #424242;
    font-weight: bold;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid #BDBDBD;
}

.sec-tabla tbody td[b-0vekxdtx68] {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid #EEEEEE;
    color: #212121;
}

.sec-tabla tbody tr:hover[b-0vekxdtx68] {
    background-color: #FAFAFA;
}

.col-idx[b-0vekxdtx68] {
    color: #9E9E9E;
    font-family: var(--fuente-codigos);
    width: 2.5rem;
}

.col-acciones[b-0vekxdtx68] {
    white-space: nowrap;
    text-align: right;
    width: 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   ESTADO VACÍO (espejo de .cot-seccion-vacia del Detalle)
   ═══════════════════════════════════════════════════════════════ */
.cot-seccion-vacia[b-0vekxdtx68] {
    padding: 0.75rem 0.875rem;
    font-size: var(--texto-9pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL HORIZONTAL (lección P02: la tabla densa con inputs inline
   no debe recortar columnas en móvil)
   ═══════════════════════════════════════════════════════════════ */
.cot-renglones-scroll[b-0vekxdtx68] {
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FILA EN EDICIÓN (mismo amarillo suave que RenglonListaPlana — SPEC §9.3)
   ═══════════════════════════════════════════════════════════════ */
.fila-editando td[b-0vekxdtx68] {
    background-color: #FFFBE6;        /* Amarillo muy suave — fila en edición */
    border-bottom: 1px solid #F0E6B0; /* Borde amarillo-oliva 1:1 con .rlp-editando (P02) */
}

.fila-editando:hover td[b-0vekxdtx68] {
    background-color: #FFFBE6;        /* No cambiar al pasar el mouse mientras se edita */
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS INLINE (mismo patrón que .rlp-input de RenglonListaPlana)
   ═══════════════════════════════════════════════════════════════ */
.rlp-input[b-0vekxdtx68] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.125rem 0.25rem;
    border: 1px solid var(--color-coti);
    border-radius: 0.125rem;
    font-size: var(--texto-8pt);
    color: #212121;
    background-color: #FFFFFF;
}

.rlp-input:focus[b-0vekxdtx68] {
    outline: none;
    border-color: var(--color-coti);
}

.rlp-input-desc[b-0vekxdtx68] {
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE ACCIÓN (✎ / ✓ / ✕ / 🗑) — cajitas pequeñas, mismo
   patrón que .rlp-btn de RenglonListaPlana
   ═══════════════════════════════════════════════════════════════ */
.rlp-btn[b-0vekxdtx68] {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    font-size: var(--texto-9pt);
    line-height: 1;
    border-radius: 0.125rem;
}

.rlp-btn:hover[b-0vekxdtx68] {
    background-color: #F0F0F0;
}

.rlp-btn-editar[b-0vekxdtx68] {
    color: var(--color-coti);
}

.rlp-btn-confirmar[b-0vekxdtx68] {
    color: #008000;                   /* Verde — confirmar */
    font-weight: bold;
}

.rlp-btn-cancelar[b-0vekxdtx68] {
    color: #CC0000;                   /* Rojo — cancelar */
    font-weight: bold;
}

.rlp-btn-eliminar[b-0vekxdtx68] {
    color: #CC0000;                   /* Rojo — eliminar */
}

/* Atenuado cuando hay otra fila en edición (regla una-fila-a-la-vez) */
.rlp-btn-atenuado[b-0vekxdtx68] {
    opacity: 0.35;
    cursor: not-allowed;
}

.rlp-btn-atenuado:hover[b-0vekxdtx68] {
    background-color: transparent;
}

.rlp-btn:disabled[b-0vekxdtx68] {
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — touch targets ≥44px en móvil (mismo criterio que P02)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rlp-btn[b-0vekxdtx68] {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .rlp-input[b-0vekxdtx68] {
        min-height: 2.75rem;
    }
}

/* _content/SiREI_2026/Components/Pages/20Cot/Flujo/ConsultaProcesa.razor.rz.scp.css */
/*
   ConsultaProcesa.razor.css
   Estilos isolated de la pantalla principal del Cotizador.
   Lista en formato CARD/BLOQUE (no tabla).
*/

/* Pega la barra de filtros al topbar */
.contenedor-principal-sirei[b-4iu3v2evjl] {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== BANNER MODO SELECTOR ===== */
.cot-banner-selector[b-4iu3v2evjl] {
    background-color: #E3F2FD;
    border: 1px solid #90CAF9;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--texto-9pt);
    color: var(--color-coti);
}

/* ===== BARRA DE FILTROS — color claro Cotizador ===== */
.cot-filtros[b-4iu3v2evjl] {
    background-color: var(--color-coti-claro);
}

.cot-boton-filtrar[b-4iu3v2evjl] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    margin-left: 0.5rem;
}

/* ✕ pequeña pegada a la derecha del campo de texto. Limpia solo el texto.
   margin-left negativo para anular la separación que el textbox deja a su
   derecha vía el gap de la barra y quedar visualmente pegada al input. */
.cot-limpia-texto[b-4iu3v2evjl] {
    margin-left: -0.25rem;
    padding: 0 0.25rem;
    border: none;
    background: transparent;
    color: #696969;
    font-size: var(--texto-9pt);
    line-height: 1;
    cursor: pointer;
}

.cot-limpia-texto:hover[b-4iu3v2evjl] {
    color: var(--color-coti);
}

.cot-boton-filtrar:hover[b-4iu3v2evjl] {
    background-color: var(--color-coti-oscuro);
}

/* La paginación usa .barra-paginacion / .paginacion-contenedor / .btn-paginacion /
   .btn-pagina / .btn-pagina-activo / .contador-registros de app.css (EST_03).
   NO se redefinen aquí. */

/* ===== LISTA DE BLOQUES (CARD) ===== */
.cot-lista-bloques[b-4iu3v2evjl] {
    background-color: #FFFFFF;
}

.cot-bloque[b-4iu3v2evjl] {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid #E0E0E0;
    background-color: #FFFFFF;
    font-size: var(--texto-9pt);
}

.cot-bloque.bloque-seleccionable[b-4iu3v2evjl] {
    cursor: pointer;
}

.cot-bloque.bloque-seleccionable:hover[b-4iu3v2evjl] {
    background-color: #E3F2FD;
}

/* Línea 1: header del bloque */
.bloque-linea1[b-4iu3v2evjl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.bloque-info[b-4iu3v2evjl] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex: 1;
}

.bloque-id[b-4iu3v2evjl] {
    font-weight: bold;
    color: var(--color-coti);
}

.bloque-separador[b-4iu3v2evjl] {
    color: #696969;
}

.bloque-opp[b-4iu3v2evjl] {
    font-weight: bold;
    color: #212121;
}

.bloque-separador-cliente[b-4iu3v2evjl] {
    color: #999999;
    margin: 0 0.25rem;
}

.bloque-cliente[b-4iu3v2evjl] {
    color: #696969;
}

.bloque-version[b-4iu3v2evjl] {
    margin-left: 0.5rem;
    font-size: var(--texto-8pt);
    color: #696969;
}

.bloque-etiqueta-version[b-4iu3v2evjl] {
    font-style: italic;
}

.bloque-acciones[b-4iu3v2evjl] {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cot-boton-detalle[b-4iu3v2evjl] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.cot-boton-detalle:hover[b-4iu3v2evjl] {
    background-color: var(--color-coti-oscuro);
}

.cot-boton-clonar[b-4iu3v2evjl] {
    background-color: #E8820C;
    color: #FFFFFF;
}

.cot-boton-clonar:hover[b-4iu3v2evjl] {
    background-color: #B36800;
}

/* Línea 2: metadatos */
.bloque-linea2[b-4iu3v2evjl] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: var(--texto-8pt);
    color: #696969;
    flex-wrap: wrap;
}

.bloque-linea2 .dato-label[b-4iu3v2evjl] {
    color: #696969;
}

.bloque-linea2 .dato-valor[b-4iu3v2evjl] {
    color: #212121;
}

.separador-meta[b-4iu3v2evjl] {
    color: #BDBDBD;
    margin: 0 0.25rem;
}

.dato-fecha[b-4iu3v2evjl] {
    color: #696969;
}

/* El mensaje de lista vacía usa la clase estándar .no-resultados de app.css (EST_04). */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* La línea 1 del bloque apila info y acciones para que los botones
       [Detalle]/[Clonar] no se compriman a anchos chicos (≈360px). */
    .bloque-linea1[b-4iu3v2evjl] {
        flex-direction: column;
        align-items: stretch;
    }

    .bloque-acciones[b-4iu3v2evjl] {
        margin-top: 0.375rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Flujo/CreaNueva.razor.rz.scp.css */
/* =============================================================
   CreaNueva.razor.css - Estilos de la pantalla de creación
   3 secciones verticales con [Crear Costeo] al final del flujo
   y validación inline por campo.
   ============================================================= */

/* ===== SUBTÍTULO DESCRIPTIVO ===== */
.cot-subtitulo[b-ktx1qnpeeq] {
    font-size: var(--texto-11pt);    /* 11pt - Texto explicativo principal */
    color: #696969;                  /* Gris medio */
    margin-bottom: 0.875rem;
    padding-top: 0.5rem;
}

/* ===== SECCIONES ===== */
.cot-seccion[b-ktx1qnpeeq] {
    background-color: #FFFFFF;       /* Fondo blanco */
    border: 1px solid #E0E0E0;       /* Borde gris claro */
    border-radius: 0.25rem;          /* Esquinas ligeramente redondeadas */
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.cot-seccion-header[b-ktx1qnpeeq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
    gap: 0.5rem;
}

.cot-seccion-titulo[b-ktx1qnpeeq] {
    margin: 0;
    font-size: var(--texto-14pt);    /* 14pt - Título de sección */
    font-weight: bold;
    color: var(--color-coti);        /* Azul institucional Cotizador */
}

.titulo-opcional[b-ktx1qnpeeq] {
    font-size: var(--texto-10pt);    /* 10pt - Etiqueta secundaria del título */
    color: #696969;                  /* Gris medio */
    font-weight: normal;
    margin-left: 0.25rem;
}

/* ===== SECCIÓN 1 — Oportunidad por # contra Odoo EN VIVO (widget de ID_1001c) =====
   Estas clases son CALCO 1:1 de ID_1001c.razor.css: el CSS scoped de Blazor NO se
   comparte entre componentes (feedback_css_scoped_no_compartido), así que se
   redeclaran aquí para que el widget se vea idéntico al de la forma de Solicitud. */

/* Microtexto de instrucción sobre la caja de búsqueda. */
.texto-instruccion-busqueda[b-ktx1qnpeeq] {
    font-size: var(--texto-8pt);     /* 8pt - instrucción secundaria */
    color: #696969;                  /* Gris medio */
    margin-bottom: 0.4rem;
}

/* Banner: Odoo no configurado para este tenant (calco de ID_1001c). */
.opp-banner-aviso[b-ktx1qnpeeq] {
    background-color: #FFF3E0;                              /* Naranja claro de aviso */
    border: 1px solid var(--color-coti-naranja-oscuro);    /* Borde naranja Cotizador */
    border-radius: 4px;                                    /* Bordes redondeados */
    padding: 0.4rem 0.6rem;                                /* Aire interno */
    font-size: var(--texto-8pt);                           /* Texto pequeño */
    color: var(--color-coti-naranja-texto);                /* Texto naranja oscuro Cotizador */
    margin-bottom: 0.5rem;                                 /* Separación de la caja de búsqueda */
}

/* Input de texto estilo SiREI (calco de ID_1001c). */
.input-sirei[b-ktx1qnpeeq] {
    padding: 0.31rem;                /* 5px */
    border: 1px solid #808080;       /* Borde gris */
    border-radius: 4px;              /* Bordes redondeados */
    font-size: var(--texto-9pt);     /* 9pt */
    font-family: inherit;            /* Hereda fuente */
}

.input-sirei:focus[b-ktx1qnpeeq] {
    outline: none;
    border-color: var(--color-coti); /* Borde azul Cotizador al enfocar */
}

/* Caja de búsqueda (input + botón) en línea (calco de ID_1001c). */
.opp-busqueda[b-ktx1qnpeeq] {
    display: flex;                   /* Input y botón en línea */
    flex-wrap: wrap;                 /* Wrap en pantallas chicas */
    gap: 0.4rem;                     /* Separación entre input y botón */
    align-items: center;             /* Centrado vertical */
}

.opp-input[b-ktx1qnpeeq] {
    flex: 0 0 auto;                  /* Caja angosta de ancho fijo (no se estira) */
    width: 9rem;                     /* Ancho cómodo para hasta 8 dígitos */
}

/* Botón "Buscar en Odoo": morado de marca de Odoo (#714B67).
   DEUDA: es color corporativo de Odoo (plataforma externa), NO del módulo
   Cotizador, y app.css no tiene variable para él → literal justificado (mismo
   criterio que ID_1001c.razor.css). */
.btn-buscar-odoo[b-ktx1qnpeeq] {
    background-color: #714B67;       /* Morado de marca Odoo */
    color: #FFFFFF;                  /* Texto blanco */
    margin-left: 0;                  /* Sobrescribe el margen de .boton */
}

.btn-buscar-odoo:hover[b-ktx1qnpeeq] {
    background-color: #5C3D54;       /* Morado Odoo un tono más oscuro */
}

/* Mensaje de error de la búsqueda: canal único rojo (calco de ID_1001c). */
.opp-mensaje[b-ktx1qnpeeq] {
    font-size: var(--texto-7pt);     /* Homologado al canal de error rojo */
    color: #DC3545;                  /* Rojo de error */
    margin-top: 0.4rem;              /* Separación */
}

/* Oportunidad encontrada: paloma verde junto al botón (calco de ID_1001c). */
.opp-check[b-ktx1qnpeeq] {
    color: #2E7D32;                  /* Verde oscuro de confirmación (módulo Cotizador) */
    font-weight: bold;               /* Resalta la paloma */
    font-size: var(--texto-12pt);    /* Mayor para que se note junto al botón */
    flex-shrink: 0;                  /* No encoge en la fila flex .opp-busqueda */
}

/* ===== SECCIÓN 1 — Oportunidad fija (desde una Solicitud de Costeo) =====
   Panel read-only: la oportunidad viene del req y no se puede cambiar aquí. */
.cot-opp-desde-req[b-ktx1qnpeeq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--color-coti-claro); /* Azul claro Cotizador - fondo informativo */
    border: 1px solid var(--color-coti);       /* Borde azul Cotizador */
    border-radius: 0.1875rem;
    font-size: var(--texto-10pt);    /* 10pt - Dato fijo legible */
    color: #212121;                  /* Casi negro */
}

.opp-req-check[b-ktx1qnpeeq] {
    color: #2E7D32;                  /* Verde oscuro - confirmación */
    font-weight: bold;
    flex-shrink: 0;
}

.opp-req-texto[b-ktx1qnpeeq] {
    overflow-wrap: anywhere;         /* Un nombre largo sin espacios no desborda */
}

/* F2d-A: panel de la oportunidad ENCONTRADA por búsqueda (modo NO desde-req).
   Reusa cot-opp-desde-req; solo añade el aire que lo separa de la caja de
   búsqueda y del mensaje de error (en desde-req es el único elemento y no lo
   necesita). */
.cot-opp-encontrada[b-ktx1qnpeeq] {
    margin-top: 0.5rem;
}

/* ===== BANNER DE AVISO (Req no resuelto al llegar con ?idReq=) ===== */
.cot-banner-naranja[b-ktx1qnpeeq] {
    padding: 0.5rem 0.75rem;
    background-color: #FFF3E0;       /* Naranja muy tenue - fondo de aviso */
    border: 1px solid #F5CBA7;       /* Naranja claro - borde de aviso */
    border-radius: 0.1875rem;
    font-size: var(--texto-10pt);    /* 10pt - Aviso con info crítica */
    color: #7A4A00;                  /* Café oscuro - texto del aviso */
    margin-bottom: 0.5rem;
}

/* ===== SECCIÓN 2 — Cards ===== */
.cot-card[b-ktx1qnpeeq] {
    border: 1px solid #E0E0E0;       /* Borde gris claro */
    background-color: #FFFFFF;
    border-radius: 0.25rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.cot-card.card-dasheada[b-ktx1qnpeeq] {
    border-style: dashed;
}

.cot-card.card-seleccionada-verde[b-ktx1qnpeeq] {
    border: 2px solid #2E7D32;       /* Verde oscuro - selección recomendada */
    background-color: #F1F8E9;       /* Verde muy tenue */
}

.cot-card.card-seleccionada-azul[b-ktx1qnpeeq] {
    border: 2px solid var(--color-coti); /* Azul Cotizador - selección Clonar */
    background-color: #F0F4F8;       /* Azul muy tenue */
}

.cot-card.card-seleccionada-gris[b-ktx1qnpeeq] {
    border: 2px dashed #696969;      /* Gris medio - selección En Blanco */
    background-color: #F5F5F5;       /* Gris muy tenue */
}

.card-header[b-ktx1qnpeeq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
}

.card-titulo[b-ktx1qnpeeq] {
    font-weight: bold;
    font-size: var(--texto-12pt);    /* 12pt - Título destacado de cada card */
}

.card-titulo-verde[b-ktx1qnpeeq] {
    color: #2E7D32;                  /* Verde oscuro */
}

.card-titulo-azul[b-ktx1qnpeeq] {
    color: var(--color-coti);        /* Azul Cotizador */
}

.card-titulo-gris[b-ktx1qnpeeq] {
    color: #696969;                  /* Gris medio */
}

.card-badge-recomendado[b-ktx1qnpeeq] {
    background-color: #E8F5E9;       /* Verde muy tenue */
    color: #2E7D32;                  /* Verde oscuro */
    font-size: var(--texto-7pt);     /* 7pt - Badge chico */
    padding: 0.125rem 0.375rem;
    border-radius: 0.125rem;
    margin-left: 0.375rem;
    font-weight: bold;
}

.card-subtitulo[b-ktx1qnpeeq] {
    font-size: var(--texto-10pt);    /* 10pt - Explicación de la card */
    color: #696969;                  /* Gris medio */
    margin-top: 0.25rem;
}

.card-meta[b-ktx1qnpeeq] {
    font-size: var(--texto-8pt);     /* 8pt - Contador secundario */
    color: #696969;                  /* Gris medio */
    white-space: nowrap;
    flex-shrink: 0;
}

/* Expansión de la card Levantamiento */
.card-expansion[b-ktx1qnpeeq] {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid #E0E0E0;
}

.card-hint[b-ktx1qnpeeq] {
    font-size: var(--texto-10pt);    /* 10pt - Texto guía */
    color: #696969;                  /* Gris medio */
    margin-bottom: 0.375rem;
}

.card-lista-vacia[b-ktx1qnpeeq] {
    padding: 0.625rem 0.75rem;
    font-style: italic;
    color: #696969;                  /* Gris medio */
    font-size: var(--texto-10pt);    /* 10pt - Mensaje informativo */
    text-align: center;
}

.lev-fila[b-ktx1qnpeeq] {
    display: grid;
    grid-template-columns: 5rem 1.5fr 1fr 5.625rem 5rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E0E0E0;
    background-color: #FAFAFA;       /* Gris casi blanco - fila levantamiento */
    border-radius: 0.1875rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    font-size: var(--texto-9pt);     /* 9pt - Fila de tabla */
    align-items: center;
}

.lev-fila:hover[b-ktx1qnpeeq] {
    background-color: #F0F0F0;
}

.lev-fila.lev-seleccionado[b-ktx1qnpeeq] {
    background-color: #E8F5E9;       /* Verde muy tenue cuando está seleccionada */
    border: 1px solid #2E7D32;
}

.lev-id[b-ktx1qnpeeq] {
    font-weight: bold;
    color: var(--color-coti);
}

.lev-cliente[b-ktx1qnpeeq] {
    color: #212121;                  /* Casi negro */
}

.lev-puntos[b-ktx1qnpeeq] {
    color: #696969;                  /* Gris medio */
}

.lev-fecha[b-ktx1qnpeeq] {
    color: #696969;                  /* Gris medio */
}

.lev-tecnico[b-ktx1qnpeeq] {
    color: #696969;                  /* Gris medio */
    text-align: right;
}

/* Botón [Ir a Consulta →] dentro de card-clonar — override de color sobre .boton-chico */
.cot-boton-ir-consulta[b-ktx1qnpeeq] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    flex-shrink: 0;
}

.cot-boton-ir-consulta:hover[b-ktx1qnpeeq] {
    background-color: var(--color-coti-oscuro);       /* Azul Cotizador oscuro al hover */
}

/* ===== SECCIÓN 3 — Nombre Alternativa ===== */
.cot-descripcion-corta[b-ktx1qnpeeq] {
    font-size: var(--texto-10pt);    /* 10pt - Texto explicativo */
    color: #696969;                  /* Gris medio */
    margin-bottom: 0.5rem;
}

.cot-input-alternativa[b-ktx1qnpeeq] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid #E0E0E0;       /* Borde gris claro */
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);     /* 9pt - Input */
    box-sizing: border-box;
}

/* ===== BANNER DE ERROR DE CREACIÓN ===== */
.cot-banner-error[b-ktx1qnpeeq] {
    padding: 0.5rem 0.75rem;
    background-color: #FDECEA;       /* Rojo muy tenue - fondo de error */
    border: 1px solid #F5C6C0;       /* Rojo claro - borde de error */
    border-radius: 0.1875rem;
    font-size: var(--texto-10pt);    /* 10pt - Mensaje de error */
    color: #CC0000;                  /* Rojo - texto del error */
    margin-bottom: 0.875rem;
    font-weight: bold;
}

/* ===== BOTÓN DE ACCIÓN AL FINAL DEL FLUJO ===== */
.cot-seccion-botones[b-ktx1qnpeeq] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Override de color sobre .boton-grande */
.cot-boton-crear[b-ktx1qnpeeq] {
    background-color: #2E7D32;       /* Verde oscuro - botón principal */
    color: #FFFFFF;
}

.cot-boton-crear:hover[b-ktx1qnpeeq] {
    background-color: #1B5E20;       /* Verde más oscuro al hover */
}

/* ===== VALIDACIÓN INLINE (mensaje de levantamiento de la Sección 2) ===== */
.cot-validacion-message[b-ktx1qnpeeq] {
    color: #CC0000;                  /* Rojo - error de validación */
    font-size: var(--texto-9pt);     /* 9pt - Mensaje de error */
    margin-top: 0.375rem;
    font-weight: bold;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Las secciones reducen su padding interno */
    .cot-seccion[b-ktx1qnpeeq] {
        padding: 0.625rem;
    }

    /* La fila de levantamiento se apila en pantallas chicas */
    .lev-fila[b-ktx1qnpeeq] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .lev-tecnico[b-ktx1qnpeeq] {
        text-align: left;
    }

    /* La caja de oportunidad NO se estira: es un número corto (hasta 8 dígitos).
       Mantiene su ancho cómodo (mismo criterio que ID_1001c.razor.css). */
    .opp-input[b-ktx1qnpeeq] {
        width: 9rem;
    }

    /* El botón de acción se centra en pantallas chicas */
    .cot-seccion-botones[b-ktx1qnpeeq] {
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Flujo/DiagramaProceso.razor.rz.scp.css */
/* =============================================================
   DiagramaProceso.razor.css — estilos scoped de la pantalla
   Réplica fiel del JSX de referencia (diagrama_proceso_v1.3.jsx).
   Toda la paleta institucional vive aquí; las variables de
   tipografía siguen siendo las del app.css global.
   ============================================================= */

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal-sirei[b-j6vzic1ccj] {
    padding-top: 0;                           /* Pega la barra de filtros al SiREI */
}

/* ===== CABECERA FIJA AL SCROLL (header + leyenda) =====
   Se usa la clase global .fijador (position: sticky; top: 0).
   El background opaco evita que el contenido se transparente al pasar por debajo. */
.dp-sticky-cabecera[b-j6vzic1ccj] {
    background-color: #FFFFFF;
}

/* ===== HEADER PRINCIPAL ===== */
.dp-header[b-j6vzic1ccj] {
    background-color: #1B3A5C;                          /* Azul navy oscuro — header del diagrama */
    color: #FFFFFF;
    padding: 0.75rem 1rem;
}

.dp-titulo[b-j6vzic1ccj] {
    font-size: var(--texto-14pt);                        /* 14pt - Título principal */
    font-weight: 700;
}

.dp-version[b-j6vzic1ccj] {
    font-size: var(--texto-10pt);                        /* 10pt - Versión inline */
    opacity: 0.6;
    font-weight: 400;
    margin-left: 0.5rem;
}

.dp-subtitulo[b-j6vzic1ccj] {
    font-size: var(--texto-10pt);                        /* 10pt - Subtítulo descriptivo */
    opacity: 0.7;
    margin-top: 0.125rem;
}

/* ===== LEYENDA (Sistemas + Indicadores) ===== */
.dp-legend[b-j6vzic1ccj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #F8F8F8;                           /* Gris muy claro */
    border-bottom: 1px solid #DDDDDD;
    font-size: var(--texto-10pt);
    margin-bottom: 0.125rem;
}

.dp-legend-label[b-j6vzic1ccj] {
    font-weight: 700;
    color: #333333;
}

.dp-legend-label-ind[b-j6vzic1ccj] {
    margin-left: 0.75rem;
}

.dp-legend-chip[b-j6vzic1ccj] {
    font-size: var(--texto-9pt);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.1875rem;
    border: 1px solid currentColor;
}

.dp-legend-chip-pendiente[b-j6vzic1ccj] {
    background-color: #FFF0F0;
    color: #CC0000;
}

.dp-legend-chip-decision[b-j6vzic1ccj] {
    background-color: #F8F6E9;
    color: #E8820C;
}

/* ===== BADGES DE SISTEMA ===== */
.dp-sys[b-j6vzic1ccj] {
    font-size: var(--texto-9pt);                         /* 9pt - badge compacto */
    padding: 0.0625rem 0.375rem;
    border-radius: 0.125rem;
    font-weight: 700;
    display: inline-block;
    margin-top: 0.125rem;
}

.dp-sys-odoo[b-j6vzic1ccj] {
    background-color: #F3EAF0;
    color: #714B67;
}

.dp-sys-sirei[b-j6vzic1ccj] {
    background-color: #FFF8E1;
    color: #8B6914;
}

.dp-sys-cotizador[b-j6vzic1ccj] {
    background-color: #E8EDF2;
    color: #1B3A5C;
}

.dp-sys-abasto[b-j6vzic1ccj] {
    background-color: #EFF5EE;
    color: #5B6C5D;
}

.dp-sys-campo[b-j6vzic1ccj] {
    background-color: #F5F5F5;
    color: #555555;
}

/* ===== ACORDEÓN DE FASE ===== */
.dp-fase[b-j6vzic1ccj] {
    margin-bottom: 0.125rem;
}

.dp-fase-header[b-j6vzic1ccj] {
    color: #FFFFFF;
    padding: 0.625rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--texto-11pt);
    font-weight: 600;
    user-select: none;
    border-left: 0.25rem solid transparent;
}

.dp-fase-header.dp-fase-pendiente[b-j6vzic1ccj] {
    border-left-color: #CC0000;
}

.dp-fase-label[b-j6vzic1ccj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dp-fase-flecha[b-j6vzic1ccj] {
    font-size: var(--texto-9pt);
    margin-right: 0.25rem;
}

.dp-fase-badge-pendiente[b-j6vzic1ccj] {
    background-color: #CC0000;
    color: #FFFFFF;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    font-weight: 700;
}

/* Colores por fase */
.dp-fase-1[b-j6vzic1ccj] { background-color: #714B67; }                /* Morado Odoo */
.dp-fase-2[b-j6vzic1ccj] { background-color: #1B3A5C; }                /* Azul cotizador */
.dp-fase-3[b-j6vzic1ccj] { background-color: #805AD5; }                /* Morado claro */
.dp-fase-4[b-j6vzic1ccj] { background-color: #E8820C; }                /* Naranja decisión */
.dp-fase-5[b-j6vzic1ccj] { background-color: #1B3A5C; }                /* Azul cotizador */
.dp-fase-6[b-j6vzic1ccj] { background-color: #5B6C5D; }                /* Verde olivo Abasto */
.dp-fase-7[b-j6vzic1ccj] { background-color: #555555; }                /* Gris */
.dp-fase-8[b-j6vzic1ccj] { background-color: #1C2942; }                /* Azul muy oscuro */

/* Cuerpo del acordeón de fase */
.dp-fase-cuerpo[b-j6vzic1ccj] {
    padding: 0.75rem 1rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    border-left-width: 0.25rem;
    border-left-style: solid;
}

.dp-fase-1-cuerpo[b-j6vzic1ccj] { border-left-color: #714B67; }
.dp-fase-2-cuerpo[b-j6vzic1ccj] { border-left-color: #1B3A5C; }
.dp-fase-3-cuerpo[b-j6vzic1ccj] { border-left-color: #805AD5; }
.dp-fase-4-cuerpo[b-j6vzic1ccj] { border-left-color: #E8820C; }
.dp-fase-5-cuerpo[b-j6vzic1ccj] { border-left-color: #1B3A5C; }
.dp-fase-6-cuerpo[b-j6vzic1ccj] { border-left-color: #5B6C5D; }
.dp-fase-7-cuerpo[b-j6vzic1ccj] { border-left-color: #555555; }
.dp-fase-8-cuerpo[b-j6vzic1ccj] { border-left-color: #1C2942; }

/* ===== STEP (renglón de paso) ===== */
.dp-step[b-j6vzic1ccj] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: var(--texto-10pt);
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    background-color: #FAFAFA;
    border-left: 0.1875rem solid #E0E0E0;
}

.dp-step-decision[b-j6vzic1ccj] {
    background-color: #F8F6E9;                           /* Amarillo pálido */
    border-left-color: #E8820C;                          /* Naranja decisión */
}

.dp-step-pendiente[b-j6vzic1ccj] {
    background-color: #FFF0F0;                           /* Rosa pálido */
    border-left-color: #CC0000;                          /* Rojo pendiente */
}

.dp-step-actor[b-j6vzic1ccj] {
    min-width: 6.25rem;                                  /* 100px aprox. para alinear actores */
}

.dp-actor-nombre[b-j6vzic1ccj] {
    font-weight: 600;
    color: #333333;
    font-size: var(--texto-9pt);
}

.dp-step-detalle[b-j6vzic1ccj] {
    flex: 1;
}

.dp-step-accion[b-j6vzic1ccj] {
    color: #333333;
}

.dp-step-resultado[b-j6vzic1ccj] {
    color: #666666;
    font-size: var(--texto-9pt);
    margin-top: 0.125rem;
}

.dp-step-pendiente-texto[b-j6vzic1ccj] {
    color: #CC0000;
    font-size: var(--texto-9pt);
    font-weight: 600;
    margin-top: 0.125rem;
}

/* ===== BRANCH (sub-flujo) ===== */
.dp-branch[b-j6vzic1ccj] {
    margin-left: 1.25rem;
    padding: 0.5rem 0 0.25rem 0;
    border-left-width: 0.125rem;
    border-left-style: solid;
}

.dp-branch-label[b-j6vzic1ccj] {
    font-size: var(--texto-9pt);
    font-weight: 700;
    margin-left: 0.75rem;
    margin-bottom: 0.25rem;
}

.dp-branch-cuerpo[b-j6vzic1ccj] {
    margin-left: 0.75rem;
}

/* Colores de Branch */
.dp-branch-vino[b-j6vzic1ccj]       { border-left-color: #8B0000; }
.dp-branch-label-vino[b-j6vzic1ccj] { color: #8B0000; }

.dp-branch-verde[b-j6vzic1ccj]       { border-left-color: #008000; }
.dp-branch-label-verde[b-j6vzic1ccj] { color: #008000; }

.dp-branch-naranja[b-j6vzic1ccj]       { border-left-color: #E8820C; }
.dp-branch-label-naranja[b-j6vzic1ccj] { color: #E8820C; }

.dp-branch-rojo[b-j6vzic1ccj]       { border-left-color: #CC0000; }
.dp-branch-label-rojo[b-j6vzic1ccj] { color: #CC0000; }

.dp-branch-cotizador[b-j6vzic1ccj]       { border-left-color: #1B3A5C; }
.dp-branch-label-cotizador[b-j6vzic1ccj] { color: #1B3A5C; }

.dp-branch-abasto[b-j6vzic1ccj]       { border-left-color: #5B6C5D; }
.dp-branch-label-abasto[b-j6vzic1ccj] { color: #5B6C5D; }

/* Separador interno (entre los 2 grupos de decisión de Fase 4) */
.dp-separador[b-j6vzic1ccj] {
    height: 0.5rem;
}

/* ===== MAPA DE COMPLEJIDAD ===== */
.dp-complexity[b-j6vzic1ccj] {
    padding: 0.75rem 1rem;
    background-color: #1A1A2E;                           /* Azul muy oscuro casi negro */
    margin-top: 0.125rem;
}

.dp-complexity-titulo[b-j6vzic1ccj] {
    font-size: var(--texto-10pt);
    font-weight: 700;
    color: #E8820C;                                      /* Naranja institucional */
    margin-bottom: 0.5rem;
}

.dp-complexity-lista[b-j6vzic1ccj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dp-complexity-fila[b-j6vzic1ccj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--texto-9pt);
}

.dp-complexity-label[b-j6vzic1ccj] {
    width: 13.75rem;                                     /* 220px aprox. */
    color: #CCCCCC;
    font-weight: 500;
}

.dp-complexity-bars[b-j6vzic1ccj] {
    display: flex;
    gap: 0.125rem;
}

.dp-complexity-bar[b-j6vzic1ccj] {
    width: 1.125rem;                                     /* 18px */
    height: 0.625rem;                                    /* 10px */
    border-radius: 0.125rem;
}

.bar-activa-alto[b-j6vzic1ccj]  { background-color: #CC0000; }         /* Rojo — nivel 4-5 */
.bar-activa-medio[b-j6vzic1ccj] { background-color: #E8820C; }         /* Naranja — nivel 3 */
.bar-activa-bajo[b-j6vzic1ccj]  { background-color: #008000; }         /* Verde — nivel 1-2 */
.bar-inactiva[b-j6vzic1ccj]     { background-color: rgba(255, 255, 255, 0.1); }

.dp-complexity-nota[b-j6vzic1ccj] {
    color: #888888;
    font-size: var(--texto-9pt);
}

/* ===== AJUSTES RESPONSIVE (móvil) ===== */
@media (max-width: 48rem) {                              /* 768px */
    .dp-step[b-j6vzic1ccj] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .dp-step-actor[b-j6vzic1ccj] {
        min-width: auto;
    }

    .dp-complexity-label[b-j6vzic1ccj] {
        width: auto;
        min-width: 9.375rem;                             /* 150px */
    }

    .dp-complexity-fila[b-j6vzic1ccj] {
        flex-wrap: wrap;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Flujo/ModalNuevaVersion.razor.rz.scp.css */
/*
   ModalNuevaVersion.razor.css
   Modal interceptor para crear la siguiente versión de una cotización post-PDF.
*/

/* ===== OVERLAY ===== */
.modal-overlay[b-up1a61fu5y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.modal-content[b-up1a61fu5y] {
    border: 1px solid #FFFFFF;
    border-radius: 0.375rem;
    box-shadow: -0.375rem 0.375rem 0.625rem rgba(0, 0, 0, 0.5);
    width: 92%;
    max-width: 30rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-nueva-version[b-up1a61fu5y] {
    background-color: #FFFFFF;
}

/* ===== HEADER ===== */
.modal-header[b-up1a61fu5y] {
    padding: 0.75rem 1.25rem 0.25rem 1.25rem;
}

.modal-header h3[b-up1a61fu5y] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: var(--color-coti);
}

/* ===== BODY ===== */
.modal-body[b-up1a61fu5y] {
    padding: 0.5rem 1.25rem 0.75rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.texto-explicacion[b-up1a61fu5y] {
    font-size: var(--texto-8pt);
    color: #696969;
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
}

.form-group[b-up1a61fu5y] {
    margin-bottom: 0.625rem;
}

.form-group label[b-up1a61fu5y] {
    display: block;
    font-weight: bold;
    font-size: var(--texto-8pt);
    color: #212121;
    margin-bottom: 0.25rem;
}

.form-control[b-up1a61fu5y] {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 0.1875rem;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.form-control:focus[b-up1a61fu5y] {
    outline: 2px solid var(--color-coti);
    outline-offset: -2px;
}

.hint-etiqueta[b-up1a61fu5y] {
    font-size: var(--texto-7pt);
    color: #888888;
    font-style: italic;
    margin-top: 0.25rem;
}

/* ===== FOOTER ===== */
.modal-footer[b-up1a61fu5y] {
    padding: 0.625rem 1.25rem 0.75rem 1.25rem;
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== BOTONES ===== */
.btn-saltar-modal[b-up1a61fu5y] {
    background-color: #FFFFFF;
    color: #696969;
    border: 1px solid #E0E0E0;
}

.btn-saltar-modal:hover[b-up1a61fu5y] {
    background-color: #F8F9FA;
}

.btn-crear-version[b-up1a61fu5y] {
    background-color: var(--color-coti);
    color: #FFFFFF;
}

.btn-crear-version:hover[b-up1a61fu5y] {
    background-color: var(--color-coti-oscuro);
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/CampoLev.razor.rz.scp.css */
/*
   CampoLev — wrapper de campo de formulario.
   Coincide con el patrón Field del wireframe_levantamiento_v2 (sec 9.1).

   T03 §3.6: labels y hint pasan de 7pt a 8pt para alinear con la jerarquía
   tipográfica del módulo (8-12pt, sin 7pt — verificado contra patrón CCO).
*/

.campo-lev[b-3dscczhybj] {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.campo-lev-full[b-3dscczhybj] {
    grid-column: 1 / -1;
}

.campo-lev-label[b-3dscczhybj] {
    font-size: var(--texto-8pt);
    color: #696969;
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}

.campo-lev-asterisco[b-3dscczhybj] {
    color: #CC0000;
    margin-left: 0.1875rem;
}

.campo-lev-hint[b-3dscczhybj] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-top: 0.1875rem;
    font-style: italic;
    line-height: var(--line-height-normal);
}

/* Valor del campo en modo consulta (texto, no input). Se muestra cuando la
   sección NO está en edición — el usuario lo lee, no lo captura.

   IMPORTANTE (::deep): el <div class="campo-lev-consulta"> NO se escribe en
   CampoLev, sino en el markup de cada sección padre (SecDatosGenerales,
   SecInfraSite, SecCondEspeciales) como ChildContent. En Blazor el ChildContent
   conserva el scope del PADRE, así que sin ::deep esta regla compilaría a
   .campo-lev-consulta[b-CampoLev] y NUNCA matchearía → el texto caería al tamaño
   default del navegador (se veía enorme). El ancla .campo-lev (sí scoped a
   CampoLev) + ::deep cruza el scope hacia el descendiente. */
.campo-lev[b-3dscczhybj]  .campo-lev-consulta {
    font-size: var(--texto-9pt);
    color: #212121;
    padding: 0.25rem 0;
    line-height: var(--line-height-normal);
    word-break: break-word;
}

/* Experimento 2026-06-04: emparejar el texto de las secciones de campos del
   Levantamiento al 8pt de las tablas. Los controles de captura usan
   .form-input/.form-textarea globales (9pt en app.css); este override scoped los
   baja a 8pt SOLO dentro de un CampoLev — no afecta otras pantallas del sistema.
   ::deep es necesario porque el control llega como ChildContent (vive en el
   scope del componente padre, no en el de CampoLev). */
.campo-lev[b-3dscczhybj]  .form-input,
.campo-lev[b-3dscczhybj]  .form-textarea {
    font-size: var(--texto-9pt);
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 768px) {
    /* Sin ajustes específicos — el campo ya es vertical (label arriba / input
       abajo) y trae min-width:0, así que no desborda. El colapso del grid de
       campos a una sola columna lo hace la sección contenedora (.sec-dg-grid /
       .sec-ce-grid), no el campo. El input usa .form-input/.form-textarea de
       app.css (width:100% + box-sizing). */
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/EtiquetaEstatusOperativo.razor.rz.scp.css */
/*
   EtiquetaEstatusOperativo — chip 4 estados.
   El color de fondo / borde / texto se inyecta inline desde CotConstants.
*/

.etiqueta-estatus-op[b-xpl4px0fe3] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    border-radius: 0.625rem;
    line-height: var(--line-height-normal);
    white-space: nowrap;
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 768px) {
    /* Sin ajustes específicos — chip inline (display:inline-block,
       white-space:nowrap) sin concern responsive: fluye junto al texto que lo
       contiene. Bloque presente por contrato normativo EST_01. */
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/HeaderCotizacionOperativa.razor.rz.scp.css */
/*
   HeaderCotizacionOperativa — header blanco con borde inferior, 2 filas.
*/

.hco-container[b-0z8ztmcmy6] {
    background-color: var(--color-bg-body);
    border-bottom: 1px solid var(--color-border);
    padding: 0.875rem 1.25rem;
    margin-bottom: 0.75rem;
}

.hco-fila1[b-0z8ztmcmy6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.hco-titulo[b-0z8ztmcmy6] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: var(--color-coti);
}

.hco-fila2[b-0z8ztmcmy6] {
    display: flex;
    gap: 1.125rem;
    font-size: var(--texto-9pt);
    color: #212121;
    flex-wrap: wrap;
}

.hco-label[b-0z8ztmcmy6] {
    color: #696969;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    .hco-container[b-0z8ztmcmy6] {
        padding: 0.625rem 0.75rem;
    }

    .hco-fila2[b-0z8ztmcmy6] {
        gap: 0.5rem 0.875rem;
        font-size: var(--texto-8pt);
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/KitCard.razor.rz.scp.css */
/*
   KitCard — card por tipo de Kit con barra de progreso (SPEC sec 8).
*/

.kc-card[b-t567uzefoo] {
    margin-bottom: 0.75rem;
    background-color: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
}

.kc-fila-principal[b-t567uzefoo] {
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.kc-toggle[b-t567uzefoo] {
    cursor: pointer;
    color: var(--color-coti);
    font-weight: bold;
    font-size: var(--texto-9pt);
    user-select: none;
}

.kc-toggle:hover[b-t567uzefoo] {
    text-decoration: underline;
}

.kc-flecha[b-t567uzefoo] {
    margin-right: 0.25rem;
    font-size: var(--texto-7pt);
}

.kc-cantidad[b-t567uzefoo] {
    font-size: var(--texto-7pt);
    color: #696969;
}

.kc-spacer[b-t567uzefoo] {
    flex: 1;
    min-width: 0.5rem;
}

.kc-avance[b-t567uzefoo] {
    font-size: var(--texto-7pt);
    color: #212121;
}

.kc-avance-parcial[b-t567uzefoo] {
    color: #212121;
}

.kc-avance-completo[b-t567uzefoo] {
    color: #008000;
}

/* ═══════════ Barra de progreso ═══════════ */
.kc-barra[b-t567uzefoo] {
    width: 6.25rem;
    height: 0.5rem;
    background-color: #F3F4F6;
    border-radius: 0.25rem;
    overflow: hidden;
}

.kc-barra-interna[b-t567uzefoo] {
    height: 100%;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.kc-barra-parcial[b-t567uzefoo] {
    background-color: #E8820C;
}

.kc-barra-completa[b-t567uzefoo] {
    background-color: #008000;
}

/* ═══════════ Botón Marcar armado ═══════════ */
.kc-btn[b-t567uzefoo] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
    font-weight: bold;
}

.kc-btn:hover:not(:disabled)[b-t567uzefoo] {
    background-color: var(--color-coti-oscuro);
    border-color: var(--color-coti-oscuro);
}

.kc-btn:disabled[b-t567uzefoo] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}

/* ═══════════ Sección expandida — tabla de contenido ═══════════ */
.kc-expandida[b-t567uzefoo] {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--color-border);
    background-color: #FAFAFA;
}

.kc-expandida-titulo[b-t567uzefoo] {
    font-size: var(--texto-7pt);
    font-weight: bold;
    color: var(--color-coti);
    margin-bottom: 0.375rem;
}

.kc-tabla[b-t567uzefoo] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-7pt);
}

.kc-tabla thead tr[b-t567uzefoo] {
    color: #696969;
}

.kc-tabla th[b-t567uzefoo] {
    padding: 0.375rem 0.5rem;
    text-align: center;
    font-size: var(--texto-7pt);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.kc-th-sku[b-t567uzefoo],
.kc-th-desc[b-t567uzefoo] {
    text-align: left;
}

.kc-tabla tbody tr[b-t567uzefoo] {
    border-top: 1px solid var(--color-border);
}

.kc-tabla td[b-t567uzefoo] {
    padding: 0.375rem 0.5rem;
    text-align: center;
    vertical-align: top;
    color: #212121;
}

.kc-td-sku[b-t567uzefoo] {
    text-align: left;
    font-family: var(--fuente-codigos);
}

.kc-td-desc[b-t567uzefoo] {
    text-align: left;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    .kc-fila-principal[b-t567uzefoo] {
        padding: 0.5rem 0.625rem;
        gap: 0.5rem;
    }

    /* El spacer no empuja en pantallas chicas: los elementos se acomodan por wrap. */
    .kc-spacer[b-t567uzefoo] {
        flex-basis: 100%;
        min-width: 0;
    }

    /* La barra crece para usar el ancho disponible; el botón pasa a ancho completo. */
    .kc-barra[b-t567uzefoo] {
        flex: 1;
        width: auto;
    }

    /* Touch target ≥44px de alto en móvil (T03 §3.7.2). Ya ocupa el ancho completo. */
    .kc-btn[b-t567uzefoo] {
        width: 100%;
        min-height: 2.75rem;
    }

    /* La tabla de contenido con scroll horizontal si no cabe. */
    .kc-expandida[b-t567uzefoo] {
        overflow-x: auto;
    }

    .kc-tabla[b-t567uzefoo] {
        min-width: 22rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/LevantamientoEstructurado.razor.rz.scp.css */
/*
   LevantamientoEstructurado — patrón ConsultaProcesa:
   - .fijador con .barra-filtros .cot-filtros (color claro azul cotizador).
   - .lev-info debajo (fuera del fijador) con datos del registro.
   - Banner cerrado + banner guardado + banner error + modal recordatorio.

   T03 §3.6: tipografía 8-12pt sin 7pt. Banners cerrado/guardado/error a 9pt.
             Chips Odoo/SiREI suben de 7 a 8pt. lev-info-fecha y autoguardado a 9pt.
   T03 §3.7.2: touch targets ≥44px en móvil para [Guardar] y [Cerrar].
   T03 §3.8:  margin-left fuera — el gap del .barra-filtros padre espacia.
   T03 §3.11: .modal-overlay/.modal-content ya en wwwroot/app.css; no se duplica.
   T03 §3.12: el modal recordatorio hereda overlay+content automáticamente.
   T03 §3.20: banner rojo de error.
   T03 §M1:   sin padding-bottom: 0 (rompía colchón inferior del .content).
   T03:       hex hardcoded → variables CSS (--color-coti-claro, --color-text-primary, --color-border).
*/

/* Pega la barra de filtros al topbar (patrón Cotizador) */
.contenedor-principal-sirei[b-d5jou3tknj] {
    padding-top: 0;
}

/* ═══════════ Barra de filtros — color claro Cotizador ═══════════ */
.cot-filtros[b-d5jou3tknj] {
    background-color: var(--color-coti-claro);
}

/* Botones de acción dentro de la barra — sin margin-left, el .barra-filtros
   tiene gap: 0.31rem que ya espacia. */
/* R2 M2 (2026-05-28): Guardar pasa a VERDE (acción positiva primaria, mismo
   verde que Costeo Final/Ganada del Detalle). El azul previo era incorrecto.
   Hover en hex #006400 literal porque --color-home-oscuro NO existe en app.css
   todavía (deuda anotada para futura ronda de paleta verde / T0X verde). */
.lev-btn-guardar[b-d5jou3tknj] {
    background-color: var(--color-home);
    color: #FFFFFF;
    margin-left: 1.5rem;
}

.lev-btn-guardar:hover:not(:disabled)[b-d5jou3tknj] {
    background-color: #006400;
}

.lev-btn-guardar:disabled[b-d5jou3tknj] {
    background-color: #CCCCCC;
    color: #FFFFFF;
    cursor: not-allowed;
}

.lev-btn-cerrar[b-d5jou3tknj] {
    background-color: #008000;
    color: #FFFFFF;
}

.lev-btn-cerrar:hover:not(:disabled)[b-d5jou3tknj] {
    background-color: #006400;
}

.lev-btn-cerrar:disabled[b-d5jou3tknj] {
    background-color: #CCCCCC;
    color: #FFFFFF;
    cursor: not-allowed;
}

/* ═══════════ Bloque info del registro (debajo de la barra) ═══════════ */
.lev-info[b-d5jou3tknj] {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.lev-info-fila1[b-d5jou3tknj] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.lev-info-titulo[b-d5jou3tknj] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: var(--color-text-primary);
}

.lev-titulo-nuevo[b-d5jou3tknj] {
    color: var(--color-coti);
    font-style: italic;
}

.lev-info-fecha[b-d5jou3tknj] {
    font-size: var(--texto-9pt);
    color: #696969;
}

.lev-info-autoguardado[b-d5jou3tknj] {
    font-size: var(--texto-9pt);
    color: #008000;
    font-weight: bold;
}

.lev-info-fila2[b-d5jou3tknj] {
    display: flex;
    gap: 1.5rem;
    font-size: var(--texto-9pt);
    color: var(--color-text-primary);
    flex-wrap: wrap;
    align-items: center;
}

.lev-info-label[b-d5jou3tknj] {
    color: #696969;
}

.lev-chip-odoo[b-d5jou3tknj] {
    color: #714B67;
    font-size: var(--texto-8pt);
    margin-left: 0.1875rem;
}

.lev-chip-sirei[b-d5jou3tknj] {
    color: #D4A017;
    font-size: var(--texto-8pt);
    margin-left: 0.1875rem;
}

.lev-info-captura[b-d5jou3tknj] {
    color: var(--color-coti);
    font-style: italic;
    font-size: var(--texto-9pt);
}

/* ═══════════ Banner cerrado (solo lectura) ═══════════ */
.lev-banner-cerrado[b-d5jou3tknj] {
    background-color: #F5F5F5;
    border: 1px solid #BDBDBD;
    border-radius: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    color: #696969;
    font-size: var(--texto-9pt);
    font-style: italic;
}

/* F2e (bocado A/D): el banner de instrucciones del solicitante (.lev-banner-instrucciones
   + .lev-instrucciones-titulo + .lev-instrucciones-texto) que F2d ponía fuera de los
   acordeones se retiró. Las instrucciones ahora son un campo read-only de Datos Generales
   (SecDatosGenerales), con estilo propio de esa sección — aquí no queda CSS de banner. */

/* ═══════════ Banner verde de confirmación post-guardado ═══════════ */
.lev-banner-guardado[b-d5jou3tknj] {
    background-color: #E7F5E9;
    border: 1px solid #2E7D32;
    border-radius: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    color: #1B5E20;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* ═══════════ Banner rojo de error (T03 §3.20) ═══════════ */
.lev-banner-error[b-d5jou3tknj] {
    background-color: #FDECEA;
    border: 1px solid #C62828;
    border-radius: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    color: #B71C1C;
    font-size: var(--texto-9pt);
    font-weight: bold;
}

/* ═══════════ Modal de recordatorio post-cierre ═══════════
   El overlay y el content vienen del MODAL ESTANDAR SiREI en app.css.
   Aquí solo se ajusta el ancho específico del recordatorio.
*/
.lev-modal-recordatorio[b-d5jou3tknj] {
    background-color: #FFFFFF;
    max-width: 32rem;
    width: 92%;
}

.lev-modal-recordatorio .modal-header[b-d5jou3tknj] {
    padding: 0.625rem 0.94rem;
    background-color: var(--color-coti);
}

.lev-modal-recordatorio .modal-header h3[b-d5jou3tknj] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.lev-modal-recordatorio .modal-body[b-d5jou3tknj] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
}

.lev-modal-recordatorio .modal-body p[b-d5jou3tknj] {
    margin: 0 0 0.625rem 0;
    line-height: var(--line-height-normal);
    font-size: var(--texto-9pt);
}

.lev-modal-recordatorio .modal-body p:last-child[b-d5jou3tknj] {
    margin-bottom: 0;
}

.lev-modal-recordatorio .modal-footer[b-d5jou3tknj] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ═══════════ Lista numerada de causas en "no resultados" ═══════════
   .no-resultados (app.css) centra el contenido con text-align:center.
   La <ol class="lista-causas"> default queda con markers (1., 2.) fuera
   del padding visible — el cliente reporta "no se ven" 2026-05-24.
   Fix: convertir la <ol> en inline-block centrado con texto izquierda
   interno + padding-left para que los markers caigan dentro del bloque.
*/
.lista-causas[b-d5jou3tknj] {
    display: inline-block;
    text-align: left;
    padding-left: 1.5rem;
}

/* ═══════════ Responsive: tablet ~768px y móvil ═══════════ */
@media (max-width: 768px) {
    .lev-info[b-d5jou3tknj] {
        padding: 0.625rem 0.75rem;
    }

    .lev-info-fila2[b-d5jou3tknj] {
        gap: 0.5rem 0.875rem;
        flex-direction: column;
        align-items: flex-start;
    }

    /* T03 §3.7.2: touch targets en botones del fijador. */
    .lev-btn-guardar[b-d5jou3tknj],
    .lev-btn-cerrar[b-d5jou3tknj] {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.5rem 0.875rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/ProveedorGrupo.razor.rz.scp.css */
/*
   ProveedorGrupo — acordeón por proveedor + tabla 8 columnas con renglón
   secundario amarillo para sustituciones (SPEC_compras_v2 sec 8 y 9).
*/

.pg-card[b-itphyl8kas] {
    margin-bottom: 0.75rem;
    background-color: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    overflow: hidden;
}

/* ═══════════ Header colapsable ═══════════ */
.pg-header[b-itphyl8kas] {
    cursor: pointer;
    padding: 0.5rem 0.875rem;
    background-color: #E8EDF2;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    user-select: none;
    flex-wrap: wrap;
}

.pg-header:hover[b-itphyl8kas] {
    background-color: #DDE4EE;
}

.pg-titulo[b-itphyl8kas] {
    font-weight: bold;
    color: var(--color-coti);
    font-size: var(--texto-9pt);
}

.pg-flecha[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    margin-right: 0.25rem;
}

.pg-metricas[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
}

/* ═══════════ Tabla ═══════════ */
.pg-tabla[b-itphyl8kas] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-7pt);
}

.pg-tabla thead tr[b-itphyl8kas] {
    background-color: #F5F5F5;
    color: #696969;
}

.pg-tabla th[b-itphyl8kas] {
    padding: 0.375rem 0.5rem;
    text-align: center;
    font-size: var(--texto-7pt);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.pg-th-lapiz[b-itphyl8kas] {
    width: 1.75rem;
}

.pg-th-desc[b-itphyl8kas] {
    text-align: left;
}

.pg-tabla tbody tr[b-itphyl8kas] {
    border-top: 1px solid var(--color-border);
}

.pg-tabla td[b-itphyl8kas] {
    padding: 0.375rem 0.5rem;
    text-align: center;
    vertical-align: top;
    color: #212121;
}

.pg-td-lapiz[b-itphyl8kas] {
    padding: 0.375rem 0.25rem !important;
}

.pg-td-desc[b-itphyl8kas] {
    text-align: left;
}

/* ═══════════ Lápiz de sustitución ═══════════ */
.pg-lapiz[b-itphyl8kas] {
    display: inline-block;
    cursor: pointer;
    color: var(--color-coti);
    font-weight: bold;
    font-size: var(--texto-10pt);
    line-height: var(--line-height-compacto);
    padding: 0.125rem 0.25rem;
    border-radius: 0.1875rem;
    user-select: none;
}

.pg-lapiz:hover[b-itphyl8kas] {
    background-color: #E8EDF2;
}

.pg-lapiz-rojo[b-itphyl8kas] {
    color: #FF2400;
}

.pg-lapiz-rojo:hover[b-itphyl8kas] {
    background-color: #FFEBEE;
}

/* ═══════════ Renglón principal ═══════════ */
.pg-sku[b-itphyl8kas] {
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
    color: #212121;
}

.pg-desc[b-itphyl8kas] {
    color: #212121;
}

.pg-tachado[b-itphyl8kas] {
    text-decoration: line-through;
    color: #696969;
}

.pg-stock-positivo[b-itphyl8kas] {
    color: #008000;
    font-weight: bold;
}

.pg-stock-cero[b-itphyl8kas] {
    color: #696969;
}

.pg-sustituido-info[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
}

.pg-oc-odoo[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.125rem;
}

/* ═══════════ Renglón secundario (sustitución) ═══════════ */
.pg-fila-sustitucion[b-itphyl8kas] {
    background-color: #FFFDE7;
}

.pg-sku-sustituto[b-itphyl8kas] {
    font-family: var(--fuente-codigos);
    font-size: var(--texto-7pt);
    color: var(--color-coti);
}

.pg-sustituto-meta[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.125rem;
}

.pg-alta-catalogo[b-itphyl8kas] {
    color: #008000;
    font-weight: bold;
}

.pg-sustituto-comentario[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.125rem;
}

.pg-sustituto-firma[b-itphyl8kas] {
    font-size: var(--texto-7pt);
    color: #696969;
    margin-top: 0.125rem;
}

.pg-chip-sustituido[b-itphyl8kas] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    font-size: var(--texto-7pt);
    font-weight: bold;
    background-color: #FFF9C4;
    border: 1px solid #FFE082;
    color: #7C5800;
    border-radius: 0.625rem;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    /* La tabla de 8 columnas no cabe en pantallas chicas: scroll horizontal
       dentro de la card en vez de romper el layout de toda la pantalla. */
    .pg-card[b-itphyl8kas] {
        overflow-x: auto;
    }

    .pg-tabla[b-itphyl8kas] {
        min-width: 40rem;
    }

    .pg-header[b-itphyl8kas] {
        padding: 0.5rem 0.625rem;
    }

    /* Touch target ≥44×44px en móvil (espejo de .edit-pencil, T03 §3.7.2). */
    .pg-lapiz[b-itphyl8kas] {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecCondEspeciales.razor.rz.scp.css */
/*
   SecCondEspeciales — grid responsive 1-2 columnas + grid de checkboxes EPP.

   T03 §3.7.1: grid 14rem + colapso 1fr en móvil.
   T03 §3.4:   grid de checkboxes para EPP múltiple.
*/

.sec-ce-grid[b-3r3fo5lie4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.875rem;
}

/* ═══════════ Grid de checkboxes para EPP (T03 §3.4 / D3) ═══════════
   Cada label es clickeable (no solo el checkbox).
   Mínimo 11rem por celda para que quepa "Botas dieléctricas" o
   "Chaleco reflectante" sin truncar. Si no caben, bajan en flex-wrap.
*/
.sec-ce-epp-grid[b-3r3fo5lie4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.375rem 0.75rem;
    padding: 0.375rem 0;
}

.sec-ce-epp-check[b-3r3fo5lie4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--texto-8pt);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

.sec-ce-epp-check input[type="checkbox"][b-3r3fo5lie4] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.sec-ce-epp-check input[type="checkbox"]:disabled[b-3r3fo5lie4] {
    cursor: not-allowed;
}

.sec-ce-epp-check input[type="checkbox"]:disabled + span[b-3r3fo5lie4] {
    color: #9E9E9E;
    cursor: not-allowed;
}

/* ═══════════ Responsive móvil ═══════════ */
@media (max-width: 768px) {
    .sec-ce-grid[b-3r3fo5lie4] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .sec-ce-epp-grid[b-3r3fo5lie4] {
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem 0.5rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecDatosGenerales.razor.rz.scp.css */
/*
   SecDatosGenerales — grid responsive.

   T03 §3.7.1: mínimo del grid baja de 17.5rem a 14rem para que en tablets
   pequeñas (≈800px) se vean 2 columnas sin desbordar. En móvil real
   (≤768px) se colapsa a una sola columna con gap reducido.
*/

.sec-dg-grid[b-zyywmafnyt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.875rem;
}

@media (max-width: 768px) {
    .sec-dg-grid[b-zyywmafnyt] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecEvidencia.razor.rz.scp.css */
/*
   SecEvidencia — Acordeón 8 del Levantamiento.

   T05 (2026-05-24): cableo a BD. Dos grupos de adjuntos (Fotografías /
   Croquis) con lista (thumbnail o ícono) y eliminar con modal estándar.
   B3 (2026-05-30): la subida pasó a ModalAnexos (rutina única de archivos);
   el botón "Agregar" ya no envuelve un <InputFile> inline, ahora es un
   <button> estándar que abre el modal — por eso se retiraron las reglas del
   InputFile oculto (::deep .sec-ev-input-file) y .sec-ev-btn-disabled.

   Reglas scoped propias en este archivo:
     • .sec-bloqueado-msg   (mensaje gris centrado cuando Id=0)
     • .sec-ev-*            (nota, grid, lista de adjuntos, botón agregar, error)

   Clases consumidas desde wwwroot/app.css (globales):
     • .boton / .boton-chico                       (botón estándar SiREI; el
                                                    botón "Agregar" lo reusa)
     • .modal-overlay / .modal-content             (modal eliminar)
     • .modal-header / .modal-body / .modal-footer (estructura del MODAL ESTANDAR)
     • .sec-modal-eliminar                         (variante del modal de confirmación)
     • .mensaje-confirmacion / .mensaje-info       (texto del body del modal)
     • .modal-btn-cancelar / .modal-btn-eliminar   (botones del footer)

   Componentes con scope propio (no viven en app.css):
     • CampoLev      (wrapper label + contenido del campo)
     • BotonEliminar (.remove-btn — ✕ rojo del módulo, mismo de las tablas)

   .sec-bloqueado-msg se replica scoped aquí (igual que CCTV/CA/Nodos/Troncos):
   en T04 se confirmó que NO es global. Promoverla a app.css queda como deuda
   transversal declarada para una T0X de pulido (no introducida por T05).
*/

/* ═══════════ Mensaje gris centrado (Id=0, sin levantamiento) ═══════════ */
.sec-bloqueado-msg[b-3adakphpry] {
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* ═══════════ Nota introductoria de la sección ═══════════ */
.sec-ev-nota[b-3adakphpry] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.625rem;
    font-style: italic;
}

/* ═══════════ Mensaje de error de subida (archivo grande, fallo) ═══════════ */
.sec-ev-error[b-3adakphpry] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
    background-color: #FDECEA;
    border: 1px solid #C62828;
    border-radius: 0.25rem;
    color: #B71C1C;
    font-size: var(--texto-8pt);
    font-weight: bold;
}

/* ═══════════ Grid de dos grupos (Fotografías / Croquis) ═══════════ */
.sec-ev-grid[b-3adakphpry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.875rem;
}

/* ═══════════ Mensaje "sin archivos" dentro de un grupo ═══════════ */
.sec-ev-vacio[b-3adakphpry] {
    padding: 0.5rem 0.625rem;
    background-color: #F3F4F6;
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    color: #696969;
    font-style: italic;
}

/* ═══════════ Lista de adjuntos del grupo ═══════════ */
.sec-ev-lista[b-3adakphpry] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Renglón de un adjunto: vista (thumb/ícono) + datos + botón eliminar. */
.sec-ev-item[b-3adakphpry] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background-color: #F9F9F9;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
}

/* Thumbnail de imagen — cuadrado pequeño con recorte. */
.sec-ev-thumb-link[b-3adakphpry] {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: var(--line-height-compacto);
}

.sec-ev-thumb[b-3adakphpry] {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 0.1875rem;
    border: 1px solid var(--color-border);
    display: block;
}

/* Datos del adjunto: nombre (enlace) + tamaño. Ocupa el espacio sobrante. */
.sec-ev-item-datos[b-3adakphpry] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sec-ev-item-nombre[b-3adakphpry] {
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sec-ev-item-nombre:hover[b-3adakphpry] {
    text-decoration: underline;
}

.sec-ev-item-tamano[b-3adakphpry] {
    font-size: var(--texto-8pt);
    color: #696969;
}

/* ═══════════ Fila del botón "Agregar" ═══════════ */
.sec-ev-boton-row[b-3adakphpry] {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* El botón "Agregar" reusa .boton .boton-chico y abre ModalAnexos. Verde
   #4CAF50 igual que .file-input-label ("Seleccionar archivos") de ModalAnexos,
   para que la acción de subir sea consistente con el modal de anexos canónico
   del sistema. El estado deshabilitado mientras hay una subida en curso lo
   resuelve el atributo disabled del <button> (no una clase aparte). */
.sec-ev-btn-agregar[b-3adakphpry] {
    background-color: #4CAF50;
    color: #FFFFFF;
    margin-left: 0;
    margin-right: 0;
}

/* ═══════════ Responsive móvil ═══════════ */
@media (max-width: 768px) {
    .sec-ev-grid[b-3adakphpry] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    /* Touch target del botón "Agregar" (≥44px), alineado con el resto del
       módulo (lev-btn-guardar, remove-btn). */
    .sec-ev-btn-agregar[b-3adakphpry] {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.5rem 0.875rem;
        display: inline-flex;
        align-items: center;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecInfraSite.razor.rz.scp.css */
/*
   SecInfraSite — banner NVR (azul claro) + grid responsive + grupo Energía.

   T03 §3.6: banner NVR sube a 9pt (antes 7pt) — legibilidad mínima de banner.
   T03 §3.7.1: grid 14rem + colapso 1fr en móvil.
   T03 §3.5.3: estilos del grupo de 3 checkboxes de Energía.
*/

.sec-is-banner-nvr[b-wrnpu7a68j] {
    padding: 0.625rem 0.75rem;
    background-color: #E8EEF4;
    border: 1px solid #BDD7EE;
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    margin-bottom: 0.75rem;
    line-height: var(--line-height-normal);
}

.sec-is-grid[b-wrnpu7a68j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.875rem;
}

/* ═══════════ Grupo de 3 checkboxes de Energía (T03 §3.5.3) ═══════════
   Decisión D4: la energía pasa de un <select> único a 3 bits independientes
   (110V / 220V / Regulada). Se renderizan inline en fila — si no caben,
   bajan flex-wrap. Cada label es clickeable (no solo el checkbox).
*/
.sec-is-energia-grupo[b-wrnpu7a68j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 1.25rem;
    padding: 0.375rem 0;
    align-items: center;
}

.sec-is-energia-check[b-wrnpu7a68j] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--texto-8pt);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

.sec-is-energia-check input[type="checkbox"][b-wrnpu7a68j] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.sec-is-energia-check input[type="checkbox"]:disabled[b-wrnpu7a68j] {
    cursor: not-allowed;
}

.sec-is-energia-check input[type="checkbox"]:disabled + span[b-wrnpu7a68j] {
    color: #9E9E9E;
    cursor: not-allowed;
}

/* ═══════════ Responsive móvil ═══════════ */
@media (max-width: 768px) {
    .sec-is-grid[b-wrnpu7a68j] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecNodosRed.razor.rz.scp.css */
/*
   SecNodosRed — tabla de nodos de red en <div> (NO <table>) para poder
   REFLOWEAR en móvil/tablet sin scroll horizontal.

   Mismo patrón canónico del Levantamiento que SecPuntosCctv (calcado de las
   Consulta de SiREI — EvaConsulta / UserABC):
   - Desktop: rejilla de columnas alineada (se ve como tabla); el .nr-thead
     nombra cada columna y las celdas no muestran rótulo.
   - Móvil (≤768px): el encabezado se oculta y cada nodo colapsa a una TARJETA;
     cada celda muestra su rótulo (data-rotulo) y los atributos fluyen en una
     rejilla uniforme repeat(auto-fit, minmax(...,1fr)) — sin huecos ni scroll
     horizontal. El único scroll en móvil es vertical.
*/

/* ═══════════ Tabla (contenedor div) ═══════════ */
.nr-tabla[b-th12sc8xwd] {
    width: 100%;
    font-size: var(--texto-8pt);
}

/* Encabezado y filas comparten EXACTAMENTE el mismo grid → las columnas alinean.
   6 columnas: # · Nombre/Ref · Tipo nodo · Ubicación · Metros · acciones. */
.nr-thead[b-th12sc8xwd],
.nr-fila[b-th12sc8xwd] {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(7rem, 1.6fr)
        minmax(6rem, 1fr)
        minmax(5rem, 1fr)
        minmax(6rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

.nr-thead[b-th12sc8xwd] {
    background-color: #F3F4F6;
    border-bottom: 1px solid var(--color-border);
    color: #696969;
    font-weight: bold;
}

.nr-fila[b-th12sc8xwd] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Celda base: no desborda su columna. */
.nr-celda[b-th12sc8xwd] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Acciones (✎ / ✕): juntas, a la derecha de su columna. */
.nr-acc[b-th12sc8xwd] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

/* Input/select dentro de una celda. El CSS scoped no se comparte entre
   componentes, por eso se declara aquí (feedback_css_scoped_no_compartido). */
.nr-input[b-th12sc8xwd] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.nr-input:focus[b-th12sc8xwd] {
    outline: none;
    border-color: var(--color-coti);
}

/* Patrón EST_05: borde rojo en input con error (.input-error global en app.css). */
.nr-input.input-error[b-th12sc8xwd] {
    border-color: #CC0000;
    box-shadow: 0 0 0 1px rgba(204, 0, 0, 0.25);
}

/* ═══════════ Mensaje gris centrado (Id=0, sin nodos, o cerrado) ═══════════ */
.sec-bloqueado-msg[b-th12sc8xwd] {
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* ═══════════ Responsive: tarjeta apilada uniforme (≤768px) ═══════════ */
@media (max-width: 768px) {
    /* El encabezado de columnas no aplica en móvil: cada celda lleva su rótulo. */
    .nr-thead[b-th12sc8xwd] {
        display: none;
    }

    /* Cada nodo es una tarjeta. Los atributos fluyen en una rejilla uniforme:
       caben tantas columnas de >=6.5rem como el ancho permita, todas iguales
       (1fr), y bajan de renglón sin dejar huecos. */
    .nr-fila[b-th12sc8xwd] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    /* En edición los controles necesitan más aire → columnas un poco más anchas. */
    .nr-fila-edit[b-th12sc8xwd] {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }

    /* Cada celda: rótulo arriba (gris, pequeño) + valor/control abajo. */
    .nr-celda[b-th12sc8xwd] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .nr-celda[b-th12sc8xwd]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* Etiqueta (N-1): badge identificador en su propio renglón, sin rótulo "#". */
    .nr-etq[b-th12sc8xwd] {
        grid-column: 1 / -1;
        flex-direction: row;
        color: var(--color-coti);
        font-size: var(--texto-9pt);
    }
    .nr-etq[b-th12sc8xwd]::before {
        content: none;
    }

    /* Nombre/Ref.: título de la tarjeta, ancho completo. */
    .nr-nom[b-th12sc8xwd] {
        grid-column: 1 / -1;
    }

    /* Acciones: renglón completo al pie, en fila y alineadas a la derecha. */
    .nr-acc[b-th12sc8xwd] {
        grid-column: 1 / -1;
        flex-direction: row;
        margin-top: 0.25rem;
    }
    .nr-acc[b-th12sc8xwd]::before {
        content: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecPuertasCa.razor.rz.scp.css */
/*
   SecPuertasCa — tabla de puertas de Control de Acceso en <div> (NO <table>)
   para poder REFLOWEAR en móvil/tablet sin scroll horizontal.

   Mismo patrón canónico del Levantamiento que SecPuntosCctv (calcado de las
   Consulta de SiREI — EvaConsulta / UserABC):
   - Desktop: rejilla de columnas alineada (se ve como tabla); el .pca-thead
     nombra cada columna y las celdas no muestran rótulo.
   - Móvil (≤768px): el encabezado se oculta y cada puerta colapsa a una TARJETA;
     cada celda muestra su rótulo (data-rotulo) y los atributos fluyen en una
     rejilla uniforme repeat(auto-fit, minmax(...,1fr)) — sin huecos ni scroll
     horizontal. El único scroll en móvil es vertical.
*/

/* ═══════════ Tabla (contenedor div) ═══════════ */
.pca-tabla[b-6u22c4v5mg] {
    width: 100%;
    font-size: var(--texto-8pt);
}

/* Encabezado y filas comparten EXACTAMENTE el mismo grid → las columnas alinean.
   8 columnas: # · Nombre/Ref · Tipo acceso · Tipo control · Material · Ubicación
   · Metros · acciones. minmax(..,1fr) deja que el grid se comprima sin scroll. */
.pca-thead[b-6u22c4v5mg],
.pca-fila[b-6u22c4v5mg] {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(7rem, 1.4fr)
        minmax(5rem, 1fr)
        minmax(6rem, 1fr)
        minmax(6rem, 1fr)
        minmax(5rem, 1fr)
        minmax(6rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

.pca-thead[b-6u22c4v5mg] {
    background-color: #F3F4F6;
    border-bottom: 1px solid var(--color-border);
    color: #696969;
    font-weight: bold;
}

.pca-fila[b-6u22c4v5mg] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Celda base: no desborda su columna. */
.pca-celda[b-6u22c4v5mg] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Acciones (✎ / ✕): juntas, a la derecha de su columna. */
.pca-acc[b-6u22c4v5mg] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

/* Input/select dentro de una celda. El CSS scoped no se comparte entre
   componentes, por eso se declara aquí (feedback_css_scoped_no_compartido). */
.pca-input[b-6u22c4v5mg] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.pca-input:focus[b-6u22c4v5mg] {
    outline: none;
    border-color: var(--color-coti);
}

/* Patrón EST_05: borde rojo en input con error (.input-error global en app.css). */
.pca-input.input-error[b-6u22c4v5mg] {
    border-color: #CC0000;
    box-shadow: 0 0 0 1px rgba(204, 0, 0, 0.25);
}

/* ═══════════ Mensaje gris centrado (Id=0, sin puertas, o cerrado) ═══════════ */
.sec-bloqueado-msg[b-6u22c4v5mg] {
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* ═══════════ Responsive: tarjeta apilada uniforme (≤768px) ═══════════ */
@media (max-width: 768px) {
    /* El encabezado de columnas no aplica en móvil: cada celda lleva su rótulo. */
    .pca-thead[b-6u22c4v5mg] {
        display: none;
    }

    /* Cada puerta es una tarjeta. Los atributos fluyen en una rejilla uniforme:
       caben tantas columnas de >=6.5rem como el ancho permita, todas iguales
       (1fr), y bajan de renglón sin dejar huecos. */
    .pca-fila[b-6u22c4v5mg] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    /* En edición los controles necesitan más aire → columnas un poco más anchas. */
    .pca-fila-edit[b-6u22c4v5mg] {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }

    /* Cada celda: rótulo arriba (gris, pequeño) + valor/control abajo. */
    .pca-celda[b-6u22c4v5mg] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .pca-celda[b-6u22c4v5mg]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* Etiqueta (P-1): badge identificador en su propio renglón, sin rótulo "#". */
    .pca-etq[b-6u22c4v5mg] {
        grid-column: 1 / -1;
        flex-direction: row;
        color: var(--color-coti);
        font-size: var(--texto-9pt);
    }
    .pca-etq[b-6u22c4v5mg]::before {
        content: none;
    }

    /* Nombre/Ref.: título de la tarjeta, ancho completo. */
    .pca-nom[b-6u22c4v5mg] {
        grid-column: 1 / -1;
    }

    /* Acciones: renglón completo al pie, en fila y alineadas a la derecha. */
    .pca-acc[b-6u22c4v5mg] {
        grid-column: 1 / -1;
        flex-direction: row;
        margin-top: 0.25rem;
    }
    .pca-acc[b-6u22c4v5mg]::before {
        content: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecPuntosCctv.razor.rz.scp.css */
/*
   SecPuntosCctv — tabla de puntos CCTV construida con <div> (NO <table>) para
   poder REFLOWEAR en móvil/tablet sin scroll horizontal.

   Patrón calcado de las pantallas Consulta de SiREI (EvaConsulta / UserABC):
   - Desktop: rejilla de columnas alineada (se ve como tabla). El encabezado
     .cctv-thead nombra cada columna; las celdas NO muestran rótulo.
   - Móvil (≤768px): el encabezado de columnas se oculta y cada punto colapsa a
     una TARJETA. Cada celda muestra su rótulo (data-rotulo). Los atributos fluyen
     en una rejilla UNIFORME repeat(auto-fit, minmax(...,1fr)): caben tantas
     columnas iguales como el ancho permita y bajan de renglón solas, sin huecos
     ni scroll horizontal. El único scroll en móvil es vertical.

   2026-06-04: patrón responsive canónico del Levantamiento. Aplicado a las 4
   tablas (CCTV, Puertas CA, Nodos, Troncos). Reemplazó al componente TablaLev
   (tabla con scroll horizontal), ya eliminado.
*/

/* ═══════════ Tabla (contenedor div) ═══════════ */
.cctv-tabla[b-7dr2u1xr8e] {
    width: 100%;
    font-size: var(--texto-8pt);
}

/* Encabezado y filas comparten EXACTAMENTE el mismo grid → las columnas alinean.
   minmax(..,1fr) deja que el grid se comprima para caber sin scroll; el nombre
   pesa más (1.4fr) y las acciones tienen ancho fijo. */
.cctv-thead[b-7dr2u1xr8e],
.cctv-fila[b-7dr2u1xr8e] {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(7rem, 1.4fr)
        minmax(5rem, 1fr)
        minmax(5rem, 1fr)
        minmax(5rem, 1fr)
        minmax(5rem, 1fr)
        minmax(6rem, 1fr)
        minmax(6rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

.cctv-thead[b-7dr2u1xr8e] {
    background-color: #F3F4F6;
    border-bottom: 1px solid var(--color-border);
    color: #696969;
    font-weight: bold;
}

.cctv-fila[b-7dr2u1xr8e] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* Celda base: no desborda su columna. */
.cc-celda[b-7dr2u1xr8e] {
    min-width: 0;
    overflow-wrap: break-word;
}

/* Acciones (✎ / ✕): juntas, a la derecha de su columna. */
.cc-acc[b-7dr2u1xr8e] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

/* Input/select dentro de una celda. El CSS scoped no se comparte entre
   componentes, por eso se declara aquí (feedback_css_scoped_no_compartido). */
.cc-input[b-7dr2u1xr8e] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.cc-input:focus[b-7dr2u1xr8e] {
    outline: none;
    border-color: var(--color-coti);
}

/* Patrón EST_05: borde rojo en input con error (.input-error global en app.css). */
.cc-input.input-error[b-7dr2u1xr8e] {
    border-color: #CC0000;
    box-shadow: 0 0 0 1px rgba(204, 0, 0, 0.25);
}

/* ═══════════ Mensaje gris centrado (Id=0, sin puntos, o cerrado) ═══════════ */
.sec-bloqueado-msg[b-7dr2u1xr8e] {
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* ═══════════ Responsive: tarjeta apilada uniforme (≤768px) ═══════════ */
@media (max-width: 768px) {
    /* El encabezado de columnas no aplica en móvil: cada celda lleva su rótulo. */
    .cctv-thead[b-7dr2u1xr8e] {
        display: none;
    }

    /* Cada punto es una tarjeta. Los atributos fluyen en una rejilla uniforme:
       caben tantas columnas de >=6.5rem como el ancho permita, todas iguales
       (1fr), y bajan de renglón sin dejar huecos. */
    .cctv-fila[b-7dr2u1xr8e] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    /* En edición los controles necesitan más aire → columnas un poco más anchas
       (caben menos por renglón, pero los <select> no se truncan). */
    .cctv-fila-edit[b-7dr2u1xr8e] {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }

    /* Cada celda: rótulo arriba (gris, pequeño) + valor/control abajo. */
    .cc-celda[b-7dr2u1xr8e] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .cc-celda[b-7dr2u1xr8e]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* Etiqueta (P-1): badge identificador en su propio renglón, sin rótulo "#". */
    .cc-etq[b-7dr2u1xr8e] {
        grid-column: 1 / -1;
        flex-direction: row;
        color: var(--color-coti);
        font-size: var(--texto-9pt);
    }
    .cc-etq[b-7dr2u1xr8e]::before {
        content: none;
    }

    /* Nombre/Ref.: título de la tarjeta, ancho completo. */
    .cc-nom[b-7dr2u1xr8e] {
        grid-column: 1 / -1;
    }

    /* Acciones: renglón completo al pie, en fila y alineadas a la derecha. */
    .cc-acc[b-7dr2u1xr8e] {
        grid-column: 1 / -1;
        flex-direction: row;
        margin-top: 0.25rem;
    }
    .cc-acc[b-7dr2u1xr8e]::before {
        content: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/Secciones/SecTroncos.razor.rz.scp.css */
/*
   SecTroncos — banner verde + tabla de troncos (div, reflow a tarjeta) + modal
   de captura (alta/edición de tronco) + mensaje de bloqueo.

   2026-06-04: la captura de tronco pasó de un bloque inline (que aparecía hasta
   el fondo y se perdía con tablas largas) a un MODAL ESTANDAR SiREI centrado al
   frente (.sec-modal-tronco). El renglón ya no muestra ✓ durante la captura.
*/

/* ═══════════ Banner verde claro arriba de la tabla ═══════════ */
.sec-tr-banner[b-sxizxs97bh] {
    padding: 0.5rem 0.625rem;
    background-color: #E8F5E9;
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    color: #1F5E1F;
    margin-bottom: 0.625rem;
    line-height: var(--line-height-normal);
}

/* ═══════════ Mensaje gris centrado (IdLevantamiento = 0 / bloqueado) ═══════════ */
.sec-bloqueado-msg[b-sxizxs97bh] {
    padding: 0.75rem 1rem;
    background-color: #F5F5F5;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* ═══════════ Tabla de troncos existentes (div, NO <table>) ═══════════
   Mismo patrón canónico del Levantamiento que SecPuntosCctv (calcado de las
   Consulta de SiREI): desktop = rejilla de columnas alineada; móvil = cada
   tronco colapsa a tarjeta con rótulos, sin scroll horizontal (ver @media). */
.trc-tabla[b-sxizxs97bh] {
    width: 100%;
    font-size: var(--texto-8pt);
}

/* Encabezado y filas comparten el mismo grid → columnas alineadas.
   5 columnas: # · Tronco · Puntos en el tronco · Metros compartidos · acciones. */
.trc-thead[b-sxizxs97bh],
.trc-fila[b-sxizxs97bh] {
    display: grid;
    grid-template-columns:
        2.75rem
        minmax(6rem, 1fr)
        minmax(10rem, 2fr)
        minmax(7rem, 1fr)
        4.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

.trc-thead[b-sxizxs97bh] {
    background-color: #F3F4F6;
    border-bottom: 1px solid var(--color-border);
    color: #696969;
    font-weight: bold;
}

.trc-fila[b-sxizxs97bh] {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.trc-celda[b-sxizxs97bh] {
    min-width: 0;
    overflow-wrap: break-word;
}

.trc-acc[b-sxizxs97bh] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}

/* ═══════════ Modal de captura de tronco ═══════════
   Variante ANCHA del MODAL ESTANDAR SiREI (el default 25rem es muy angosto para
   la lista de puntos). Hereda overlay/content/header/body/footer de app.css. */
.sec-modal-tronco[b-sxizxs97bh] {
    background-color: #FFFFFF;
    max-width: 38rem;
}

.sec-modal-tronco .modal-header[b-sxizxs97bh] {
    padding: 0.625rem 0.94rem;
    background-color: var(--color-coti);
}

.sec-modal-tronco .modal-header h3[b-sxizxs97bh] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.sec-modal-tronco .modal-body[b-sxizxs97bh] {
    padding: 0.94rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-9pt);
}

.sec-modal-tronco .modal-footer[b-sxizxs97bh] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ═══════════ Contenido del modal de captura ═══════════ */
.sec-tr-add-sub[b-sxizxs97bh] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.625rem;
}

/* Mensaje informativo cuando aún no hay puntos capturados */
.sec-tr-add-vacio[b-sxizxs97bh] {
    padding: 0.75rem 1rem;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    color: #696969;
    font-size: var(--texto-8pt);
    font-style: italic;
    text-align: center;
}

/* Grid de checkboxes de puntos — scroll vertical si son muchos */
.sec-tr-checks[b-sxizxs97bh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
    gap: 0.25rem;
    max-height: 13.75rem;
    overflow-y: auto;
    padding: 0.375rem;
    margin-bottom: 0.75rem;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
}

.sec-tr-check[b-sxizxs97bh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.125rem;
    cursor: pointer;
    font-size: var(--texto-8pt);
    background-color: transparent;
}

.sec-tr-check-disabled[b-sxizxs97bh] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sec-tr-check-seleccionado[b-sxizxs97bh] {
    background-color: #E8F5E9;
}

.sec-tr-check-id[b-sxizxs97bh] {
    color: #696969;
    font-weight: bold;
    min-width: 2.25rem;
}

.sec-tr-check-label[b-sxizxs97bh] {
    flex: 1;
}

.sec-tr-check-metros[b-sxizxs97bh] {
    color: #696969;
    font-size: var(--texto-8pt);
}

.sec-tr-check-en[b-sxizxs97bh] {
    font-size: var(--texto-8pt);
    color: #CC0000;
    font-weight: bold;
}

/* Campo Metros compartidos — acotado para que no se vea un input gigante. */
.sec-tr-add-metros[b-sxizxs97bh] {
    max-width: 14rem;
    margin-bottom: 0.5rem;
}

/* Contador de puntos seleccionados */
.sec-tr-add-info[b-sxizxs97bh] {
    font-size: var(--texto-8pt);
    color: #696969;
    margin-bottom: 0.25rem;
}

/* Input metros — clase scoped propia (la del componente CampoLev no aplica
   por el scoping [b-xxxxx] de Blazor; cada componente trae su propio scope). */
.sec-tr-metros-input[b-sxizxs97bh] {
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 0.1875rem;
    font-size: var(--texto-8pt);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.sec-tr-metros-input:focus[b-sxizxs97bh] {
    outline: none;
    border-color: var(--color-coti);
}

/* Botones del footer del modal */
.sec-tr-btn-cancelar[b-sxizxs97bh] {
    background-color: #888888;
    color: #FFFFFF;
    border-color: #888888;
}

.sec-tr-btn-cancelar:hover:not(:disabled)[b-sxizxs97bh] {
    background-color: #707070;
    border-color: #707070;
}

.sec-tr-btn-confirmar[b-sxizxs97bh] {
    background-color: #008000;
    color: #FFFFFF;
    border-color: #008000;
}

.sec-tr-btn-confirmar:hover:not(:disabled)[b-sxizxs97bh] {
    background-color: #006400;
    border-color: #006400;
}

/* ═══════════ Mensaje de error (validación cliente o SP) ═══════════ */
.sec-tr-error[b-sxizxs97bh] {
    color: #CC0000;
    font-size: var(--texto-8pt);
    margin-top: 0.25rem;
    font-weight: bold;
}

/* ═══════════ Responsive móvil ═══════════ */
@media (max-width: 768px) {
    /* ── Tabla de troncos: colapsa a tarjeta apilada uniforme ── */
    .trc-thead[b-sxizxs97bh] {
        display: none;
    }

    .trc-fila[b-sxizxs97bh] {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        gap: 0.4rem 0.6rem;
        padding: 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 0.25rem;
        align-items: start;
    }

    .trc-celda[b-sxizxs97bh] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .trc-celda[b-sxizxs97bh]::before {
        content: attr(data-rotulo);
        font-size: var(--texto-7pt);
        font-weight: bold;
        color: #696969;
    }

    /* Etiqueta (T-1): badge identificador en su propio renglón, sin rótulo "#". */
    .trc-etq[b-sxizxs97bh] {
        grid-column: 1 / -1;
        flex-direction: row;
        color: var(--color-coti);
        font-size: var(--texto-9pt);
    }
    .trc-etq[b-sxizxs97bh]::before {
        content: none;
    }

    /* Nombre del tronco y lista de puntos: ancho completo (la lista es larga). */
    .trc-nom[b-sxizxs97bh],
    .trc-puntos[b-sxizxs97bh] {
        grid-column: 1 / -1;
    }

    /* Acciones: renglón completo al pie, en fila y alineadas a la derecha. */
    .trc-acc[b-sxizxs97bh] {
        grid-column: 1 / -1;
        flex-direction: row;
        margin-top: 0.25rem;
    }
    .trc-acc[b-sxizxs97bh]::before {
        content: none;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/VistaAbasto.razor.rz.scp.css */
/*
   VistaAbasto — pantalla principal del sub-módulo Abasto.
   Banda resumen + grupos por proveedor (estilos delegados a ProveedorGrupo).

   T14 (2026-05-26): barra de filtros (patrón Levantamiento).
     - .contenedor-principal-sirei padding-top:0 → barra pegada al topbar.
     - .cot-filtros = color claro del módulo (var(--color-coti-claro)).
     - .lista-causas = lista de causas del estado de error (markers visibles).
   .fijador / .barra-filtros / .barra-filtros-label / .barra-filtros-input-req
   y .no-resultados viven en wwwroot/app.css (no se duplican aquí).
*/

/* Pega la barra de filtros al topbar (patrón Cotizador) */
.contenedor-principal-sirei[b-pnpqxuo3cd] {
    padding-top: 0;
}

/* Barra de filtros — color claro Cotizador */
.cot-filtros[b-pnpqxuo3cd] {
    background-color: var(--color-coti-claro);
}

/* Lista de causas del estado de error: inline-block centrado con texto a la
   izquierda + padding para que los markers (1., 2.) caigan dentro del bloque. */
.lista-causas[b-pnpqxuo3cd] {
    display: inline-block;
    text-align: left;
    padding-left: 1.5rem;
}

.vc-contenido[b-pnpqxuo3cd] {
    padding: 0 0.5rem;
}

.vc-banda[b-pnpqxuo3cd] {
    background-color: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vc-metricas[b-pnpqxuo3cd] {
    display: flex;
    gap: 1rem;
    font-size: var(--texto-7pt);
    color: #212121;
    flex-wrap: wrap;
}

.vc-label[b-pnpqxuo3cd] {
    color: #696969;
}

.vc-en-almacen[b-pnpqxuo3cd] {
    color: #008000;
}

.vc-spacer[b-pnpqxuo3cd] {
    flex: 1;
}

.vc-btn-ocs[b-pnpqxuo3cd] {
    background-color: var(--color-coti);
    color: #FFFFFF;
    border: 1px solid var(--color-coti);
    font-weight: bold;
}

.vc-btn-ocs:hover:not(:disabled)[b-pnpqxuo3cd] {
    background-color: var(--color-coti-oscuro);
    border-color: var(--color-coti-oscuro);
}

.vc-btn-ocs:disabled[b-pnpqxuo3cd] {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
    cursor: not-allowed;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    .vc-contenido[b-pnpqxuo3cd] {
        padding: 0 0.25rem;
    }

    .vc-banda[b-pnpqxuo3cd] {
        padding: 0.5rem 0.625rem;
    }

    .vc-metricas[b-pnpqxuo3cd] {
        gap: 0.625rem;
    }

    /* Neutraliza el spacer flex:1 en móvil: a flex-basis:100% deja de empujar
       el botón de OCs contra anchos chicos y fuerza el salto de línea, de modo
       que el botón (que abajo pasa a width:100%) baje limpio bajo las métricas. */
    .vc-spacer[b-pnpqxuo3cd] {
        flex-basis: 100%;
    }

    /* El botón de OCs pasa a ancho completo bajo las métricas en pantallas chicas. */
    .vc-btn-ocs[b-pnpqxuo3cd] {
        width: 100%;
    }
}
/* _content/SiREI_2026/Components/Pages/20Cot/Operacion/VistaArmadoKits.razor.rz.scp.css */
/*
   VistaArmadoKits — pantalla principal del sub-módulo Armado de Kits.
   Banda resumen (sin botón global, a diferencia de Compras) + cards por kit.

   T14 (2026-05-26): barra de filtros (patrón Levantamiento).
     - .contenedor-principal-sirei padding-top:0 → barra pegada al topbar.
     - .cot-filtros = color claro del módulo (var(--color-coti-claro)).
     - .lista-causas = lista de causas del estado de error (markers visibles).
   .fijador / .barra-filtros / .barra-filtros-label / .barra-filtros-input-req
   y .no-resultados viven en wwwroot/app.css (no se duplican aquí).
*/

/* Pega la barra de filtros al topbar (patrón Cotizador) */
.contenedor-principal-sirei[b-5o11wz0hq5] {
    padding-top: 0;
}

/* Barra de filtros — color claro Cotizador */
.cot-filtros[b-5o11wz0hq5] {
    background-color: var(--color-coti-claro);
}

/* Lista de causas del estado de error: inline-block centrado con texto a la
   izquierda + padding para que los markers (1., 2.) caigan dentro del bloque. */
.lista-causas[b-5o11wz0hq5] {
    display: inline-block;
    text-align: left;
    padding-left: 1.5rem;
}

.vak-contenido[b-5o11wz0hq5] {
    padding: 0 0.5rem;
}

.vak-banda[b-5o11wz0hq5] {
    background-color: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.vak-metricas[b-5o11wz0hq5] {
    display: flex;
    gap: 1rem;
    font-size: var(--texto-7pt);
    color: #212121;
    flex-wrap: wrap;
}

.vak-label[b-5o11wz0hq5] {
    color: #696969;
}

.vak-armados-parcial[b-5o11wz0hq5] {
    color: #212121;
}

.vak-armados-completo[b-5o11wz0hq5] {
    color: #008000;
}

/* ═══════════ Aviso "kit ya completo" (sin alert nativo — patrón SiREI) ═══════════ */
.vak-aviso[b-5o11wz0hq5] {
    background-color: var(--color-coti-claro);
    border: 1px solid var(--color-coti);
    border-radius: 0.25rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 0.75rem;
    font-size: var(--texto-8pt);
    color: var(--color-coti);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.vak-aviso-cerrar[b-5o11wz0hq5] {
    cursor: pointer;
    font-weight: bold;
    font-size: var(--texto-12pt);
    line-height: var(--line-height-compacto);
    user-select: none;
    padding: 0 0.25rem;
}

/* ═══════════ Responsive (celular) ═══════════ */
@media (max-width: 768px) {
    .vak-contenido[b-5o11wz0hq5] {
        padding: 0 0.25rem;
    }

    .vak-banda[b-5o11wz0hq5] {
        padding: 0.5rem 0.625rem;
    }

    .vak-metricas[b-5o11wz0hq5] {
        gap: 0.625rem;
    }
}
/* _content/SiREI_2026/Components/Pages/AccesoDenegado.razor.rz.scp.css */
/*
   AccesoDenegado.razor.css
   Overlay de acceso denegado - cubre toda la pantalla (igual que Mtto).
*/

/* ===== OVERLAY FIXED (cubre todo, incluyendo menu y topbar) ===== */
.noaccess-overlay[b-91kubd9wwc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.noaccess-content[b-91kubd9wwc] {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 90%;
}

.noaccess-imagen[b-91kubd9wwc] {
    width: 10rem;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(-8px -2px 4px rgba(0,0,0,0.5));
}

.noaccess-box[b-91kubd9wwc] {
    text-align: center;
    max-width: 24rem;
}

.noaccess-box h2[b-91kubd9wwc] {
    color: #1a1a2e;
    font-size: var(--texto-16pt);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.noaccess-box p[b-91kubd9wwc] {
    color: #555;
    font-size: var(--texto-12pt);
    margin: 0.5rem 0;
}

.noaccess-mensaje[b-91kubd9wwc] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 1rem 0 !important;
    color: #721c24 !important;
    font-weight: 500;
}

/* Boton - usa .boton de app.css como base */
.btn-noaccess[b-91kubd9wwc] {
    display: inline-block;
    background-color: var(--color-home);
    color: white;
    text-decoration: none;
    margin-top: 1rem;
    font-size: var(--texto-12pt);
}

.btn-noaccess:hover[b-91kubd9wwc] {
    background-color: #015c01;
    color: white;
}

/* ===== RESPONSIVE: Movil ===== */
@media (max-width: 768px) {
    .noaccess-content[b-91kubd9wwc] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* _content/SiREI_2026/Components/Pages/Error.razor.rz.scp.css */
/*
   Error.razor.css
   Página de error personalizada con estilo SiREI.
   Layout con imagen de Rey y texto al lado.
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.error-container[b-e8op6maci8] {
    padding-top: var(--padding-page-top);
    padding-right: var(--padding-page-right);
    padding-bottom: var(--padding-page-bottom);
    margin-left: var(--margin-page-left);
    width: calc(100% - var(--margin-page-left));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* ===== CONTENEDOR DEL CONTENIDO ===== */
.error-content[b-e8op6maci8] {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 600px;
}

/* ===== IMAGEN DE REY ===== */
.error-imagen[b-e8op6maci8] {
    flex-shrink: 0;
}

.error-imagen img[b-e8op6maci8] {
    width: 9.375rem;
    height: auto;
    filter: drop-shadow(-8px -2px 4px rgba(0,0,0,0.3));
}

/* ===== TEXTO ===== */
.error-texto[b-e8op6maci8] {
    text-align: left;
}

.error-texto h1[b-e8op6maci8] {
    font-size: var(--texto-14pt);
    font-weight: bold;
    color: #cc0000;
    margin: 0 0 0.75rem 0;
}

.error-texto p[b-e8op6maci8] {
    font-size: var(--texto-10pt);
    color: #555;
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
}

.error-mensaje[b-e8op6maci8] {
    font-size: var(--texto-11pt);
    color: #333;
}

.error-disculpa[b-e8op6maci8] {
    color: #888;
    font-style: italic;
    margin-top: 1rem;
}

/* ===== ACCIONES ===== */
.error-acciones[b-e8op6maci8] {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
}

.btn-error[b-e8op6maci8] {
    background-color: #444;
    color: white;
    text-decoration: none;
    padding: 0.4rem 1rem;
    font-size: var(--texto-9pt);
}

.btn-error:hover[b-e8op6maci8] {
    background-color: #000;
    color: white;
}

.btn-error-secondary[b-e8op6maci8] {
    background-color: transparent;
    color: #666;
    border: 1px solid #ccc;
    text-decoration: none;
    padding: 0.4rem 1rem;
    font-size: var(--texto-9pt);
}

.btn-error-secondary:hover[b-e8op6maci8] {
    background-color: #f5f5f5;
    color: #333;
}

/* ===== RESPONSIVE: Móvil ===== */
@media (max-width: 768px) {
    .error-container[b-e8op6maci8] {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }

    .error-content[b-e8op6maci8] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .error-texto[b-e8op6maci8] {
        text-align: center;
    }

    .error-acciones[b-e8op6maci8] {
        justify-content: center;
    }
}
/* _content/SiREI_2026/Components/Pages/FooterContacto.razor.rz.scp.css */
/*
   FooterContacto.razor.css
   Formulario de contacto con validaciones.
   Usa contenedor-principal-sirei del app.css.
*/

/* ===== INTRODUCCIÓN ===== */
.contacto-intro[b-xbu00hqcv6] {
    margin-bottom: 1.25rem;                   /* Separación inferior (20px) */
    line-height: 1.5;                         /* Altura de línea */
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== SECCIÓN DE CAMPO ===== */
.form-section[b-xbu00hqcv6] {
    margin-bottom: 0.9375rem;                 /* Separación inferior (15px) */
    width: 100%;                              /* Ancho completo */
    display: block;                           /* Elemento de bloque */
}

/* ===== ETIQUETA DE CAMPO ===== */
.form-label[b-xbu00hqcv6] {
    font-weight: bold;                        /* Negritas */
    display: block;                           /* Elemento de bloque */
    margin-bottom: 0.3125rem;                 /* Separación inferior (5px) */
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.form-sublabel[b-xbu00hqcv6] {
    font-weight: normal;                      /* Sin negritas */
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: gray;                              /* Gris */
}

/* ===== INPUT DE TEXTO ===== */
.form-input[b-xbu00hqcv6] {
    width: 17.6875rem;                        /* Ancho fijo (283px) */
    padding: 0.3125rem;                       /* Espaciado interno (5px) */
    border: 1px solid #ccc;                   /* Borde gris claro */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== LISTA DE RADIO BUTTONS ===== */
.radio-list[b-xbu00hqcv6] {
    margin: 0.3125rem 0;                      /* Márgenes verticales (5px) */
}

.radio-list label[b-xbu00hqcv6] {
    margin-right: 0.9375rem;                  /* Separación derecha (15px) */
    font-weight: normal;                      /* Sin negritas */
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== ÁREA DE TEXTO (MENSAJE) ===== */
/* Usamos ::deep para penetrar el componente InputTextArea */
[b-xbu00hqcv6] .form-textarea {
    width: 100% !important;                   /* Ancho completo */
    max-width: 38.125rem;                     /* Ancho máximo (610px) */
    height: 7.5rem;                           /* Altura (120px) */
    padding: 0.5rem;                          /* Espaciado interno (8px) */
    border: 1px solid #ccc;                   /* Borde gris claro */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    resize: vertical;                         /* Solo redimensiona vertical */
    display: block;                           /* Elemento de bloque */
}

/* ===== CONTENEDOR DEL MENSAJE ===== */
.mensaje-container[b-xbu00hqcv6] {
    display: block;                           /* Elemento de bloque */
    width: 100%;                              /* Ancho completo */
}

/* ===== BOTÓN ENVIAR ===== */
/* Usa .boton-grande de app.css - aquí solo color */
.boton-grande[b-xbu00hqcv6] {
    margin-top: 1rem;                         /* Separación superior */
    background-color: var(--color-home);      /* Verde SiREI */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== MENSAJE DE ERROR ===== */
.error-message[b-xbu00hqcv6] {
    color: red;                               /* Rojo */
    font-weight: bold;                        /* Negritas */
    margin: 0.625rem 0;                       /* Márgenes verticales (10px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* ===== RESUMEN DE VALIDACIÓN ===== */
.validation-summary[b-xbu00hqcv6] {
    color: red;                               /* Rojo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    margin: 0.625rem 0;                       /* Márgenes verticales (10px) */
    padding: 0.625rem;                        /* Espaciado interno (10px) */
    border: 0.9375rem solid white;            /* Borde blanco grueso (15px) */
    background-color: #ffe6e6;                /* Fondo rosa claro */
}

/* ===== PANEL DE ESPERA ===== */
.wait-panel[b-xbu00hqcv6] {
    text-align: center;                       /* Centrado */
    padding: 2.5rem;                          /* Espaciado interno (40px) */
    color: #008000;                           /* Verde SiREI */
}

.wait-panel img[b-xbu00hqcv6] {
    margin-bottom: 1.25rem;                   /* Separación inferior (20px) */
}

/* ===== PANEL DE CONFIRMACIÓN ===== */
.confirmation-panel[b-xbu00hqcv6] {
    text-align: center;                       /* Centrado */
    padding: 2.5rem;                          /* Espaciado interno (40px) */
}

.confirmation-title[b-xbu00hqcv6] {
    font-size: var(--texto-16pt);             /* Tamaño 16pt */
    font-weight: bold;                        /* Negritas */
    margin-bottom: 1.25rem;                   /* Separación inferior (20px) */
}

.confirmation-text[b-xbu00hqcv6] {
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
    margin-bottom: 1.875rem;                  /* Separación inferior (30px) */
}

.confirmation-footer[b-xbu00hqcv6] {
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-16pt);             /* Tamaño 16pt */
    font-weight: bold;                        /* Negritas */
}

/* Spinner del módulo */
.sirei-spinner[b-xbu00hqcv6] {
    --spinner-color: var(--color-home);
}
/* _content/SiREI_2026/Components/Pages/FooterFaq.razor.rz.scp.css */
/*
   FooterFaq.razor.css
   Página de preguntas frecuentes con búsqueda y paginación.
   Usa contenedor-principal-sirei del app.css.
*/

/* ===== ETIQUETA DE INSTRUCCIÓN ===== */
.sirei-label-instruccion[b-bvvzy0noxd] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    color: var(--color-home);                 /* Verde SiREI */
    display: block;                           /* Elemento de bloque */
    margin-bottom: 0.25rem;                   /* Separación inferior (4px) */
}

/* ===== TABLA DE PREGUNTAS ===== */
.sirei-table[b-bvvzy0noxd] {
    width: 100%;                              /* Ancho completo */
    border-collapse: collapse;                /* Bordes colapsados */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

/* Encabezado de tabla */
.sirei-table thead tr[b-bvvzy0noxd] {
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    text-align: left;                         /* Alineado izquierda */
    background-color: transparent;            /* Sin fondo */
    border-bottom: 1px solid #ccc;            /* Línea gris inferior */
}

.sirei-table th[b-bvvzy0noxd] {
    padding: 0.5rem;                          /* Espaciado interno (8px) */
    font-weight: normal;                      /* Sin negritas */
}

/* ===== INPUT DE BÚSQUEDA ===== */
.sirei-input-busqueda[b-bvvzy0noxd] {
    width: 28rem;                             /* Ancho fijo (450px aprox) */
    border: 1px solid #7F9DB9;                /* Borde azul grisáceo */
    height: 1.5rem;                           /* Altura (24px) */
    padding-left: 0.3125rem;                  /* Padding izquierdo (5px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== FILAS ALTERNADAS ===== */
.row-honeydew[b-bvvzy0noxd] {
    background-color: Honeydew;               /* Verde muy claro */
}

.row-white[b-bvvzy0noxd] {
    background-color: White;                  /* Blanco */
}

.sirei-table td[b-bvvzy0noxd] {
    padding: 0.25rem;                         /* Espaciado interno (4px) */
    color: #333333;                           /* Gris oscuro */
}

/* ===== PAGINADOR ===== */
.sirei-pager[b-bvvzy0noxd] {
    margin-top: 0.625rem;                     /* Separación superior (10px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: var(--color-home);                 /* Verde SiREI */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    user-select: none;                        /* No seleccionable */
}

.pager-item[b-bvvzy0noxd] {
    cursor: pointer;                          /* Cursor de mano */
    margin: 0 0.3125rem;                      /* Márgenes laterales (5px) */
}

.pager-link[b-bvvzy0noxd] {
    text-decoration: underline;               /* Subrayado */
}

.pager-active[b-bvvzy0noxd] {
    font-weight: bold;                        /* Negritas */
    text-decoration: none;                    /* Sin subrayado */
    cursor: default;                          /* Cursor normal */
}

/* ===== BOTONES DE NAVEGACIÓN ===== */
.btn-nav[b-bvvzy0noxd] {
    background: none;                         /* Sin fondo */
    border: none;                             /* Sin borde */
    color: var(--color-home);                 /* Verde SiREI */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    padding: 0;                               /* Sin padding */
    cursor: pointer;                          /* Cursor de mano */
}

.btn-nav:focus[b-bvvzy0noxd] {
    outline: none;                            /* Sin outline */
    box-shadow: none;                         /* Sin sombra */
}

.btn-nav:disabled[b-bvvzy0noxd] {
    opacity: 0.5;                             /* Semitransparente */
    cursor: not-allowed;                      /* Cursor no permitido */
    text-decoration: none;                    /* Sin subrayado */
}

/* ===== DETALLE DE PREGUNTA ===== */
.sirei-detalle-contenedor[b-bvvzy0noxd] {
    margin-top: 1.25rem;                      /* Separación superior (20px) */
}

.sirei-detalle-pregunta[b-bvvzy0noxd] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: bold;                        /* Negritas */
    color: var(--color-home);                 /* Verde SiREI */
    display: block;                           /* Elemento de bloque */
    margin-bottom: 0.625rem;                  /* Separación inferior (10px) */
}

.sirei-detalle-respuesta[b-bvvzy0noxd] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    font-weight: normal;                      /* Sin negritas */
    color: var(--color-home);                 /* Verde SiREI */
    display: block;                           /* Elemento de bloque */
}

/* ===== MENSAJE SIN RESULTADOS ===== */
.sirei-sin-resultados[b-bvvzy0noxd] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #666666;                           /* Gris */
}
/* _content/SiREI_2026/Components/Pages/FooterLegal.razor.rz.scp.css */
/*
   FooterLegal.razor.css
   Página de información legal y términos de uso.
   Usa contenedor-principal-sirei del app.css.
*/

/* ===== TÍTULO ===== */
.sirei-legal-titulo[b-c75w0nma6r] {
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    font-weight: bold;                        /* Negritas */
    color: var(--color-home);                 /* Verde SiREI */
    line-height: 1.4;                         /* Altura de línea */
    margin-bottom: 1.25rem;                   /* Separación inferior (20px) */
    text-align: left;                         /* Alineado izquierda */
}

/* ===== TEXTO LEGAL ===== */
.sirei-legal-texto[b-c75w0nma6r] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: normal;                      /* Sin negritas */
    color: var(--color-home);                 /* Verde SiREI */
    line-height: 1.6;                         /* Altura de línea amplia */
    margin-bottom: 0.9375rem;                 /* Separación inferior (15px) */
    text-align: justify;                      /* Justificado */
    hyphens: auto;                            /* Corte de palabras automático */
}

/* ===== ENLACES ===== */
.sirei-link[b-c75w0nma6r] {
    color: var(--color-home);                 /* Verde SiREI */
    text-decoration: underline;               /* Subrayado */
}

/* ===== LISTA DE VIÑETAS ===== */
ul.sirei-legal-texto[b-c75w0nma6r] {
    padding-left: 1.5625rem;                  /* Sangría izquierda (25px) */
    text-align: left;                         /* Alineado izquierda */
}

/* ===== LINK HEREDADO ===== */
.link-heredado[b-c75w0nma6r] {
    color: inherit;                           /* Hereda color del padre */
    cursor: pointer;                          /* Cursor de mano */
}
/* _content/SiREI_2026/Components/Pages/Home.razor.rz.scp.css */
/*
   Home.razor.css
   Página de bienvenida con lista de módulos del sistema.
   Usa contenedor-principal-sirei del app.css.
*/

/* ===== SECCIÓN DE BIENVENIDA ===== */
.welcome-section[b-i2jnktuqqy] {
    margin-top: 0;                            /* Sin margen superior */
    margin-bottom: 0.5rem;                    /* Separación inferior (8px) */
    text-align: center;                       /* Centrado */
}

.welcome-title[b-i2jnktuqqy] {
    color: #008000;                           /* Verde SiREI */
    font-weight: bold;                        /* Negritas */
    margin-bottom: 0.125rem;                  /* Separación mínima (2px) */
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
}

.welcome-text[b-i2jnktuqqy] {
    color: #008000;                           /* Verde SiREI */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    line-height: 1.2;                         /* Altura de línea compacta */
}

/* ===== LISTA DE MÓDULOS ===== */
.modules-list[b-i2jnktuqqy] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Apilado vertical */
    gap: 0.3125rem;                           /* Espacio entre filas (5px) */
}

/* ===== ITEM DE MÓDULO ===== */
.module-item[b-i2jnktuqqy] {
    display: flex;                            /* Flexbox horizontal */
    flex-wrap: nowrap;                        /* Sin wrap */
    align-items: flex-start;                  /* Alineado arriba */
    background-color: #ffffff;                /* Fondo blanco */
    padding: 0.3125rem 0.625rem;              /* Espaciado interno (5px 10px) */
    min-height: 4.375rem;                     /* Altura mínima (70px) */
}

/* ===== ICONO DEL MÓDULO ===== */
.module-icon[b-i2jnktuqqy] {
    flex: 0 0 4.375rem;                       /* Ancho fijo (70px), no crece ni encoge */
    text-align: center;                       /* Centrado */
    padding-right: 0.9375rem;                 /* Separación derecha (15px) */
    cursor: pointer;                          /* Cursor de mano */
    transition: all 0.2s ease-in-out;         /* Animación suave */
    filter: drop-shadow(-4px 4px 2px rgba(0,0,0,0.3)); /* Sombra que sigue la forma */
}

.module-icon img[b-i2jnktuqqy] {
    width: 2.8125rem;                         /* Ancho del icono (45px) */
    height: auto;                             /* Alto proporcional */
}

.module-icon:hover[b-i2jnktuqqy] {
    transform: scale(1.1);                    /* Agranda 10% al hover */
    filter: drop-shadow(-7px 7px 2px rgba(0,0,0,0.25)); /* Sombra más pronunciada */
}

.module-icon:active[b-i2jnktuqqy] {
    transform: scale(0.95);                   /* Reduce al click */
}

/* Ajustes específicos por módulo */
.icon-pan img[b-i2jnktuqqy] { }
.icon-req img[b-i2jnktuqqy] { }
.icon-enc img[b-i2jnktuqqy] { width: 2.5rem; }              /* Icono encuestas más pequeño (40px) */
.icon-eva img[b-i2jnktuqqy] { }
.icon-uti img[b-i2jnktuqqy] { transform: scaleX(-1); }      /* Volteado horizontal */
.icon-cco img[b-i2jnktuqqy] {
    transform: scaleX(-1);                    /* Volteado horizontal */
    width: 3.4375rem;                         /* Más grande (55px) */
    height: auto;                             /* Alto proporcional */
}

/* ===== INFO DEL MÓDULO ===== */
.module-info[b-i2jnktuqqy] {
    flex: 1;                                  /* Toma el espacio restante */
    min-width: 0;                             /* Evita que empuje hacia afuera */
}

.module-link[b-i2jnktuqqy] {
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-12pt);             /* Tamaño 12pt */
    text-decoration: none;                    /* Sin subrayado */
    display: block;                           /* Elemento de bloque */
    margin-bottom: 0.125rem;                  /* Separación inferior (2px) */
}

.module-info hr[b-i2jnktuqqy] {
    border: none;                             /* Sin borde */
    height: 2px;                              /* Grosor de línea */
    margin: 0.125rem 0 0.3125rem 0;           /* Márgenes (2px 0 5px 0) */
    opacity: 1;                               /* Opacidad completa */
}

.module-info p[b-i2jnktuqqy] {
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    line-height: 1.3;                         /* Altura de línea */
    color: #333;                              /* Gris oscuro */
    margin-bottom: 0;                         /* Sin margen inferior */
    overflow-wrap: break-word;                /* Corta palabras largas */
}

.module-sublink[b-i2jnktuqqy] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    text-decoration: none;                    /* Sin subrayado */
    margin-left: 0.3125rem;                   /* Separación izquierda (5px) */
}

/* ===== COLORES POR MÓDULO ===== */
/* Panel de Control - Rojo */
.modulo-panel .module-link[b-i2jnktuqqy],
.modulo-panel .module-sublink[b-i2jnktuqqy] { color: var(--color-panel); }
.modulo-panel hr[b-i2jnktuqqy] { background-color: var(--color-panel); }

/* Minutas - Naranja */
.modulo-minu .module-link[b-i2jnktuqqy],
.modulo-minu .module-sublink[b-i2jnktuqqy] { color: var(--color-minu); }
.modulo-minu hr[b-i2jnktuqqy] { background-color: var(--color-minu); }

/* Requerimientos - Amarillo */
.modulo-reqs .module-link[b-i2jnktuqqy],
.modulo-reqs .module-sublink[b-i2jnktuqqy] { color: var(--color-reqs); }
.modulo-reqs hr[b-i2jnktuqqy] { background-color: var(--color-reqs); }

/* Encuestas - Morado */
.modulo-encu .module-link[b-i2jnktuqqy],
.modulo-encu .module-sublink[b-i2jnktuqqy] { color: var(--color-encu); }
.modulo-encu hr[b-i2jnktuqqy] { background-color: var(--color-encu); }

/* Evaluación - Azul */
.modulo-eval .module-link[b-i2jnktuqqy],
.modulo-eval .module-sublink[b-i2jnktuqqy] { color: var(--color-eval); }
.modulo-eval hr[b-i2jnktuqqy] { background-color: var(--color-eval); }

/* Utilerías - Gris */
.modulo-tools .module-link[b-i2jnktuqqy],
.modulo-tools .module-sublink[b-i2jnktuqqy] { color: var(--color-tools); }
.modulo-tools hr[b-i2jnktuqqy] { background-color: var(--color-tools); }

/* CCO - Verde Militar */
.modulo-cco .module-link[b-i2jnktuqqy],
.modulo-cco .module-sublink[b-i2jnktuqqy] { color: var(--color-cco); }
.modulo-cco hr[b-i2jnktuqqy] { background-color: var(--color-cco); }

/* ===== OCULTAR ICONOS DUPLICADOS ===== */
/* Cuando el menú está colapsado y estamos en Home */
.nav-menu-container.collapsed.active-panel .menu-icon[b-i2jnktuqqy] {
    display: none;                            /* Oculta iconos repetidos */
}

/* ===== RESPONSIVE - MÓVIL ===== */
@media (max-width: 768px) {
    .module-item[b-i2jnktuqqy] {
        flex-direction: column;               /* Apilado vertical */
        align-items: center;                  /* Centrado horizontal */
        text-align: center;                   /* Texto centrado */
    }

    .module-icon[b-i2jnktuqqy] {
        flex: 0 0 auto;                       /* Tamaño automático */
        width: 100%;                          /* Ancho completo */
        padding-right: 0;                     /* Sin padding derecho */
        margin-bottom: 0.3125rem;             /* Separación inferior (5px) */
    }

    .module-info[b-i2jnktuqqy] {
        width: 100%;                          /* Ancho completo */
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ComentariosBox.razor.rz.scp.css */
/*
   ComentariosBox.razor.css
   Estilos del componente reutilizable de comentarios tipo chat.

   Usa 2 variables CSS locales inyectadas por style inline desde el
   parametro Color del componente:
     --comentarios-color-fondo  (el color del modulo donde vive)
     --comentarios-color-texto  (blanco o negro para contraste)

   El resto son variables ya existentes en app.css (--spacing-*, --texto-*,
   --color-border, --color-hover, --fuente-institucional, etc.)

   NO usa Bootstrap, NO usa z-index, NO inventa variables nuevas.
*/

/* ============================================================
   CONTENEDOR PRINCIPAL
   ============================================================ */
.comentarios-box[b-pwpmf5wpwe] {
    margin-top: var(--spacing-lg);                          /* Aire arriba respecto al contenido anterior */
    border: 0.0625rem solid var(--color-border);            /* 1px - borde fino gris */
    border-radius: 0.5rem;                                  /* 8px - esquinas redondeadas */
    background-color: #ffffff;                              /* Fondo blanco */
    font-family: var(--fuente-institucional);               /* Fuente Poppins del sistema */
    overflow: hidden;                                       /* Evita que bordes internos se desborden */
}

/* ============================================================
   HEADER: fondo del color del modulo, titulo + sobre de suscripcion
   ============================================================ */
.comentarios-header[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    align-items: center;                                    /* Centrado vertical */
    gap: var(--spacing-sm);                                 /* Separacion entre titulo y sobre */
    padding: 0.625rem 0.94rem;                              /* 10px 15px - estandar SiREI (ModalCancelar) */
    background-color: var(--comentarios-color-fondo);       /* Color del modulo */
    color: var(--comentarios-color-texto);                  /* Texto de contraste (negro sobre amarillo, blanco sobre morado) */
}

.comentarios-titulo[b-pwpmf5wpwe] {
    font-size: var(--texto-10pt);                           /* 10pt mas compacto que antes */
    font-weight: bold;                                      /* Negrita */
    color: var(--comentarios-color-texto);                  /* Hereda el contraste del header */
}

.comentarios-contador-header[b-pwpmf5wpwe] {
    font-weight: normal;                                    /* Sin negrita */
    opacity: 0.75;                                          /* Mas atenuado para que el "(N)" no destaque */
}

/* ============================================================
   BOTON DE SUSCRIPCION — sobre de carta con palomita o equis
   ============================================================ */
.comentarios-btn-notif[b-pwpmf5wpwe] {
    background-color: transparent;                          /* Transparente sobre el header de color */
    border: none;                                           /* Sin borde */
    cursor: pointer;                                        /* Manita */
    padding: 0.15rem 0.35rem;                               /* Aire interno minimo */
    border-radius: 0.25rem;                                 /* Esquinas ligeramente redondeadas */
    display: inline-flex;                                   /* Flex para alinear sobre + icono */
    align-items: center;                                    /* Centrado vertical */
    gap: 0.15rem;                                           /* Separacion minima sobre-icono */
    color: var(--comentarios-color-texto);                  /* Texto de contraste */
    font-family: var(--fuente-institucional);               /* Fuente del sistema */
    line-height: 1;                                         /* Sin padding vertical adicional */
    transition: background-color 0.15s;                     /* Cambio suave al flotar */
}

.comentarios-btn-notif:hover[b-pwpmf5wpwe] {
    background-color: rgba(255, 255, 255, 0.25);            /* Resaltado suave al flotar */
}

.comentarios-btn-notif:disabled[b-pwpmf5wpwe] {
    opacity: 0.5;                                           /* Apagado */
    cursor: not-allowed;                                    /* No permitido */
}

.comentarios-sobre[b-pwpmf5wpwe] {
    width: 1.15rem;                                         /* ~18px - acorde al tamaño del boton */
    height: 1.15rem;                                        /* Cuadrado */
    display: block;                                         /* Sin alineacion inline rara */
    color: #ffffff;                                         /* Blanco fijo (fill=currentColor del SVG lo toma) */
    flex-shrink: 0;                                         /* No se encoge */
    /* Sombra suave para dar definicion al sobre blanco en cualquier fondo
       (especialmente util en fondos claros tipo amarillo de Reqs). El
       drop-shadow solo aplica al path del sobre, no al bounding box. */
    filter: drop-shadow(0.5px 1px 1px rgba(0, 0, 0, 0.6));
}

.comentarios-check[b-pwpmf5wpwe] {
    color: #228B22;                                         /* Verde bosque - palomita de suscrito */
    font-weight: bold;                                      /* Negrita */
    font-size: var(--texto-11pt);                           /* Un poco mas chico que el sobre */
    line-height: 1;                                         /* Compacto */
}

.comentarios-equis[b-pwpmf5wpwe] {
    color: #CC0000;                                         /* Rojo - equis de NO suscrito */
    font-weight: bold;                                      /* Negrita */
    font-size: var(--texto-11pt);                           /* Un poco mas chico que el sobre */
    line-height: 1;                                         /* Compacto */
}

/* ============================================================
   LISTA DE COMENTARIOS — fondo blanco
   ============================================================ */
.comentarios-lista[b-pwpmf5wpwe] {
    max-height: 31.25rem;                                   /* 500px max, luego scroll */
    overflow-y: auto;                                       /* Scroll vertical si hay muchos */
    padding: var(--spacing-sm) var(--spacing-md);           /* Aire interno */
    background-color: #ffffff;                              /* Fondo blanco (contrasta con header) */
}

.comentarios-mensaje-estado[b-pwpmf5wpwe] {
    text-align: center;                                     /* Texto centrado */
    color: #888888;                                         /* Gris medio */
    padding: var(--spacing-lg);                             /* Aire generoso */
    font-style: italic;                                     /* Cursiva */
    font-size: var(--texto-9pt);                            /* 9pt */
}

/* ============================================================
   COMENTARIO INDIVIDUAL (fila)
   El separador (border-top) va en el PRIMER comentario de cada
   "grupo de autor". Los comentarios de continuacion (siguiente
   del mismo autor) no llevan borde y tienen padding top reducido
   para pegarse visualmente al comentario anterior.
   ============================================================ */
.comentario[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal avatar + cuerpo */
    gap: var(--spacing-sm);                                 /* Separacion entre avatar y texto */
    padding: var(--spacing-sm) 0;                           /* Aire vertical entre comentarios */
    border-top: 0.0625rem solid var(--color-border);        /* 1px separador arriba */
}

.comentario:first-child[b-pwpmf5wpwe] {
    border-top: none;                                       /* El primero no lleva separador */
    padding-top: 0.25rem;                                   /* Menos aire arriba */
}

.comentario.continuacion[b-pwpmf5wpwe] {
    border-top: none;                                       /* Sin separador con el anterior del mismo autor */
    padding-top: 0.1rem;                                    /* Aire minimo - pegado al anterior */
    padding-bottom: var(--spacing-xs);                      /* Aire abajo tambien reducido */
}

.comentario-avatar.oculto[b-pwpmf5wpwe] {
    visibility: hidden;                                     /* Mantiene el espacio, se ve vacio */
}


/* ========== AVATAR — 40% mas chicos que antes ========== */
.comentario-avatar[b-pwpmf5wpwe] {
    width: 1.5rem;                                          /* 24px (antes 40px = -40%) */
    height: 1.5rem;                                         /* 24px */
    border-radius: 50%;                                     /* Circulo */
    background-color: #d0d0d0;                              /* Gris claro por default (ajenos) */
    color: #555555;                                         /* Texto gris oscuro */
    display: flex;                                          /* Flex para centrar iniciales */
    align-items: center;                                    /* Centrado vertical */
    justify-content: center;                                /* Centrado horizontal */
    font-weight: bold;                                      /* Iniciales en negrita */
    font-size: var(--texto-7pt);                            /* 7pt - acorde al tamaño reducido */
    flex-shrink: 0;                                         /* No se encoge */
}

.comentario.propio .comentario-avatar[b-pwpmf5wpwe] {
    background-color: var(--comentarios-color-fondo);       /* Los propios con color del modulo */
    color: var(--comentarios-color-texto);                  /* Texto de contraste */
}

/* ========== CUERPO DEL COMENTARIO ========== */
.comentario-cuerpo[b-pwpmf5wpwe] {
    flex: 1;                                                /* Ocupa todo el espacio restante */
    min-width: 0;                                           /* Permite word-wrap correcto */
}

.comentario-meta[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    justify-content: space-between;                         /* Nombre izq, fecha der */
    align-items: baseline;                                  /* Alineado por baseline */
    gap: var(--spacing-sm);                                 /* Separacion */
    margin-bottom: 0.15rem;                                 /* Espacio antes del texto */
    flex-wrap: wrap;                                        /* Wrap en pantallas angostas */
}

.comentario-nombre[b-pwpmf5wpwe] {
    font-weight: bold;                                      /* Nombre en negrita */
    font-size: var(--texto-9pt);                            /* 9pt */
    color: var(--color-text-primary);                       /* Gris muy oscuro */
}

.comentario-fecha[b-pwpmf5wpwe] {
    font-size: var(--texto-8pt);                            /* 8pt mas pequeño */
    color: #888888;                                         /* Gris medio */
    margin-left: auto;                                      /* Empuja la fecha a la derecha siempre,
                                                               con o sin nombre al lado. Funciona tanto
                                                               en PC como en celular sin depender de
                                                               justify-content ni de clases extras. */
}

.comentario-texto[b-pwpmf5wpwe] {
    font-size: var(--texto-9pt);                            /* 9pt - acorde al tamaño general mas compacto */
    color: #333333;                                         /* Gris oscuro */
    line-height: var(--line-height-normal);                 /* 1.3 */
    word-wrap: break-word;                                  /* Corta palabras largas */
    white-space: pre-wrap;                                  /* Respeta saltos de linea */
}

/* ========== ESTILOS DE TEXTO FORMATEADO (HTML generado dinamicamente) ==========
   Uso de ::deep porque el parser SiREIformatoWA genera HTML con MarkupString
   y esos elementos no tienen el atributo de CSS isolation. */

.comentario-texto[b-pwpmf5wpwe]  strong {
    font-weight: bold;                                      /* Negrita del *bold* */
}

.comentario-texto[b-pwpmf5wpwe]  em {
    font-style: italic;                                     /* Cursiva del _italic_ */
}

.comentario-texto[b-pwpmf5wpwe]  a {
    color: var(--comentarios-color-fondo);                  /* Links del color del modulo */
    text-decoration: underline;                             /* Subrayados */
}

.comentario-texto[b-pwpmf5wpwe]  a:hover {
    text-decoration: none;                                  /* Sin subrayado al flotar */
}

.comentario-texto[b-pwpmf5wpwe]  .mencion {
    color: var(--comentarios-color-fondo);                  /* @mencion en color del modulo */
    font-weight: bold;                                      /* Negrita */
    background-color: #f5f5f5;                              /* Fondo tenue */
    padding: 0 0.2rem;                                      /* Aire horizontal minimo */
    border-radius: 0.2rem;                                  /* Bordes redondeados */
}

/* ========== COMENTARIO ELIMINADO (deja huella) ========== */
.comentario-eliminado[b-pwpmf5wpwe] {
    font-style: italic;                                     /* Cursiva */
    color: #999999;                                         /* Gris mas claro */
    font-size: var(--texto-8pt);                            /* 8pt */
}

/* ========== ACCIONES POR COMENTARIO (editar/borrar/confirmar) ========== */
.comentario-acciones[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    gap: var(--spacing-xs);                                 /* Separacion muy pequeña */
    margin-top: 0.25rem;                                    /* Espacio respecto al texto */
    align-items: center;                                    /* Centrado vertical */
}

.comentarios-btn-accion[b-pwpmf5wpwe] {
    background-color: transparent;                          /* Transparente */
    border: none;                                           /* Sin borde */
    color: #888888;                                         /* Gris medio */
    font-size: var(--texto-7pt);                            /* 7pt muy chico */
    cursor: pointer;                                        /* Manita */
    padding: 0.1rem 0.4rem;                                 /* Aire minimo */
    font-family: var(--fuente-institucional);               /* Fuente del sistema */
    transition: color 0.2s;                                 /* Cambio suave */
}

.comentarios-btn-accion:hover[b-pwpmf5wpwe] {
    color: var(--comentarios-color-fondo);                  /* Color del modulo al flotar */
}

.comentario-confirmar[b-pwpmf5wpwe] {
    font-size: var(--texto-7pt);                            /* 7pt */
    color: #cc0000;                                         /* Rojo alerta */
    font-weight: bold;                                      /* Negrita */
}

/* ============================================================
   EDITOR INLINE DE COMENTARIO EXISTENTE
   ============================================================ */
.comentario-editor-inline[b-pwpmf5wpwe] {
    margin-top: var(--spacing-xs);                          /* Pequeño aire arriba */
}

.comentario-editor-botones[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    gap: var(--spacing-xs);                                 /* Separacion */
    margin-top: var(--spacing-xs);                          /* Aire arriba */
    justify-content: flex-end;                              /* Botones a la derecha */
}

/* Color del boton "Guardar" del editor inline (usa .boton del sistema) */
.btn-mini-guardar[b-pwpmf5wpwe] {
    background-color: #ffffff;                              /* Fondo blanco */
    color: #000000;                                         /* Texto negro */
    border: 0.0625rem solid #808080;                        /* 1px borde gris */
}

/* Color del boton "Cancelar" del editor inline (usa .boton del sistema) */
.btn-mini-cancelar[b-pwpmf5wpwe] {
    background-color: #d0d0d0;                              /* Gris claro */
    color: #000000;                                         /* Texto negro */
}

/* ============================================================
   EDITOR DE COMENTARIO NUEVO (footer del componente)
   ============================================================ */
.comentarios-editor-nuevo[b-pwpmf5wpwe] {
    padding: 0.625rem 0.94rem;                              /* 10px 15px - estandar SiREI */
    background-color: var(--comentarios-color-fondo);       /* Color del modulo */
    position: relative;                                     /* Para el panel de menciones */
}

.comentarios-textarea[b-pwpmf5wpwe] {
    width: 100%;                                            /* Ancho completo */
    padding: var(--spacing-xs) var(--spacing-sm);           /* Aire interno reducido */
    border: 0.0625rem solid #808080;                        /* 1px borde gris */
    border-radius: 0.25rem;                                 /* 4px esquinas */
    font-family: var(--fuente-institucional);               /* Fuente del sistema */
    font-size: var(--texto-9pt);                            /* 9pt */
    resize: vertical;                                       /* Solo permite resize vertical (el usuario estira si quiere mas) */
    box-sizing: border-box;                                 /* Incluye padding/border en ancho */
    color: #333333;                                         /* Gris oscuro */
    line-height: var(--line-height-normal);                 /* 1.3 */
    background-color: #ffffff;                              /* Blanco */
    /* Sin min-height: el tamaño base lo da rows="2" del HTML. */
}

.comentarios-textarea:focus[b-pwpmf5wpwe] {
    outline: none;                                          /* Sin outline default */
    border-color: #000000;                                  /* Borde negro al enfocar */
}

.comentarios-textarea:disabled[b-pwpmf5wpwe] {
    background-color: #f5f5f5;                              /* Gris muy claro cuando disabled */
    cursor: not-allowed;                                    /* No permitido */
}

/* ========== FOOTER DEL EDITOR ==========
   Orden pedido por el usuario: [contador] [ayuda] ......... [Enviar]
   El contador y la ayuda van en el color de contraste con opacidad baja
   (simula "gris suave" sobre cualquier color de fondo). */
.comentarios-editor-footer[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    justify-content: space-between;                         /* Ayuda izq, boton der */
    align-items: center;                                    /* Centrado vertical */
    margin-top: 0.4rem;                                     /* Aire arriba */
    gap: var(--spacing-sm);                                 /* Separacion */
    flex-wrap: wrap;                                        /* Wrap en pantallas angostas */
}

.comentarios-ayuda[b-pwpmf5wpwe] {
    display: flex;                                          /* Flex horizontal */
    gap: 0.75rem;                                           /* Separacion generosa entre contador y texto */
    align-items: center;                                    /* Centrado vertical */
    font-size: var(--texto-7pt);                            /* 7pt - discreto */
    color: var(--comentarios-color-texto);                  /* Color de contraste */
    opacity: 0.75;                                          /* Atenuado para verse "gris suave" */
}

.comentarios-contador[b-pwpmf5wpwe] {
    font-variant-numeric: tabular-nums;                     /* Numeros monoespaciados */
    font-weight: normal;                                    /* Sin negrita */
}

.comentarios-contador.alerta[b-pwpmf5wpwe] {
    opacity: 1;                                             /* Opacidad completa cuando esta cerca del limite */
    font-weight: bold;                                      /* Negrita */
    color: #cc0000;                                         /* Rojo forzado */
}

.comentarios-ayuda-texto[b-pwpmf5wpwe] {
    font-style: italic;                                     /* Cursiva */
}

/* ========== BOTON ENVIAR ==========
   Usa .boton del sistema (app.css). Solo agregamos el color aqui. */
.btn-enviar[b-pwpmf5wpwe] {
    background-color: #ffffff;                              /* Blanco */
    color: #000000;                                         /* Texto negro */
    border: 0.0625rem solid #808080;                        /* 1px borde gris */
}

/* ============================================================
   PANEL DE AUTOCOMPLETE DE MENCIONES
   ============================================================ */
.comentarios-menciones-panel[b-pwpmf5wpwe] {
    background-color: #ffffff;                              /* Fondo blanco */
    border: 0.0625rem solid var(--color-border);            /* 1px borde gris */
    border-radius: 0.25rem;                                 /* 4px */
    margin-top: var(--spacing-xs);                          /* Aire arriba respecto al textarea */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);       /* Sombra suave */
    max-height: 15rem;                                      /* 240px max, luego scroll */
    overflow-y: auto;                                       /* Scroll vertical */
}

.comentarios-menciones-titulo[b-pwpmf5wpwe] {
    padding: var(--spacing-xs) var(--spacing-sm);           /* Aire interno */
    font-size: var(--texto-7pt);                            /* 7pt */
    color: #888888;                                         /* Gris medio */
    background-color: #f5f5f5;                              /* Gris muy claro */
    border-bottom: 0.0625rem solid var(--color-border);     /* 1px linea inferior */
}

.comentarios-mencion-item[b-pwpmf5wpwe] {
    padding: var(--spacing-xs) var(--spacing-sm);           /* Aire interno */
    cursor: pointer;                                        /* Manita */
    font-size: var(--texto-8pt);                            /* 8pt */
    color: #333333;                                         /* Gris oscuro */
    transition: background-color 0.1s;                      /* Cambio rapido */
    border-bottom: 0.0625rem solid #f0f0f0;                 /* 1px separador muy sutil */
}

.comentarios-mencion-item:last-child[b-pwpmf5wpwe] {
    border-bottom: none;                                    /* El ultimo sin separador */
}

.comentarios-mencion-item:hover[b-pwpmf5wpwe] {
    background-color: var(--color-hover);                   /* Fondo al flotar */
}

.comentarios-mencion-nombre[b-pwpmf5wpwe] {
    color: #888888;                                         /* Nombre en gris */
}

/* ============================================================
   RESPONSIVE - MOVIL
   En movil el footer del editor mantiene su layout horizontal
   (contador + ayuda a la izquierda, boton Enviar a la derecha).
   Si la pantalla es muy angosta, flex-wrap hace que la ayuda se
   baje a otra linea, pero el boton mantiene su tamaño natural.
   ============================================================ */
@media (max-width: 48rem) {                                 /* 768px */
    .comentarios-lista[b-pwpmf5wpwe] {
        max-height: 25rem;                                  /* 400px en movil */
        padding: var(--spacing-xs);                         /* Menos aire */
    }

    /* .comentario-meta NO se cambia a column en movil.
       Se queda como en PC: nombre a la izquierda, fecha a la derecha,
       en la misma linea. El flex-wrap: wrap del estilo base se encarga
       de bajar la fecha SOLO si de verdad no cabe. Asi no se desperdicia
       una linea extra en celular que es espacio valioso. */

    .comentarios-ayuda[b-pwpmf5wpwe] {
        flex-wrap: wrap;                                    /* Wrap si es muy angosto */
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalAnexos.razor.rz.scp.css */
/*
   ModalAnexos.razor.css
   Modal para subir y gestionar archivos anexos.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-r6aec1xiv0] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-r6aec1xiv0] {
    background-color: #F0F0F0;                /* Gris claro */
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 37.5rem;                       /* Máximo (600px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-anexos[b-r6aec1xiv0] {
    background-color: #F0F0F0;                /* Gris claro */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-r6aec1xiv0] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-r6aec1xiv0] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-r6aec1xiv0] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
}

.modal-body p[b-r6aec1xiv0] {
    margin: 0.125rem 0;                       /* Margen (2px) */
}

.modal-body p.help-text[b-r6aec1xiv0] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #666666;                           /* Gris */
    line-height: 1.4;                         /* Altura de línea */
}

/* ===== FILE INPUT ===== */
.file-input-container[b-r6aec1xiv0] {
    margin: 0.625rem 0;                       /* Margen (10px) */
    position: relative;                       /* Posición relativa */
}

/* Usamos ::deep para alcanzar el input generado por el componente InputFile */
/* Y con ello Ocultamos el INPUT de ARCHIVOS UPLOAD nativo de Blazor que NO es customizable */
[b-r6aec1xiv0] .file-input {
    opacity: 0;                               /* Invisible */
    width: 0.006rem;                          /* Ancho mínimo (0.1px) */
    height: 0.006rem;                         /* Alto mínimo (0.1px) */
    position: absolute;                       /* Posición absoluta */
    overflow: hidden;                         /* Oculta overflow */
}

/* Opcional: Aseguramos matar el botón interno de WebKit/Chrome por si acaso */
[b-r6aec1xiv0] .file-input::-webkit-file-upload-button {
    display: none;                            /* Oculto */
}

/* Botón moderno verde para seleccionar archivos (Como todos los botones la base es boton del SiREI) */
.file-input-label[b-r6aec1xiv0] {
    display: inline-flex;                     /* Inline flex */
    background-color: #4CAF50;                /* Verde */
    align-items: center;                      /* Centrado vertical */
    color: #FFFFFF;                           /* Blanco */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.file-icon[b-r6aec1xiv0] {
    font-size: var(--texto-14pt);             /* Tamaño 14pt */
}

/* ===== ARCHIVOS LISTA ===== */
.archivos-lista[b-r6aec1xiv0] {
    margin-top: 0.94rem;                      /* Margen superior (15px) */
    border: 1px solid #808080;                /* Borde gris */
    padding: 0.625rem;                        /* Padding (10px) */
    background-color: #FFFFFF;                /* Blanco */
    max-height: 15.625rem;                    /* Máximo (250px) */
    overflow-y: auto;                         /* Scroll vertical */
}

.archivos-lista h4[b-r6aec1xiv0] {
    margin: 0 0 0.625rem 0;                   /* Margen inferior (10px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

.archivo-item[b-r6aec1xiv0] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.625rem;                            /* Gap (10px) */
    padding: 0.5rem;                          /* Padding (8px) */
    border-bottom: 1px solid #E0E0E0;         /* Borde inferior gris claro */
    background-color: #F9F9F9;                /* Gris muy claro */
}

.archivo-item:last-child[b-r6aec1xiv0] {
    border-bottom: none;                      /* Sin borde en último */
}

.archivo-item.archivo-error[b-r6aec1xiv0] {
    background-color: #FFDDDD;                /* Rosa claro error */
    border-left: 3px solid #CC0000;           /* Borde izquierdo rojo */
}

.archivo-nombre[b-r6aec1xiv0] {
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #000000;                           /* Negro */
    word-break: break-all;                    /* Corta palabras largas */
}

.archivo-tamano[b-r6aec1xiv0] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris */
    min-width: 4.375rem;                      /* Mínimo (70px) */
    text-align: right;                        /* Alineado derecha */
}

.archivo-error-mensaje[b-r6aec1xiv0] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #CC0000;                           /* Rojo */
    font-weight: bold;                        /* Negritas */
}

/* Usa .boton-x de app.css - aquí color y hover rojo para eliminar */
.btn-eliminar-archivo[b-r6aec1xiv0] {
    color: #999999;                           /* Gris pardo */
}

.btn-eliminar-archivo:hover[b-r6aec1xiv0] {
    color: #CC0000;                           /* Rojo - indica eliminar */
}

/* ===== ERROR MESSAGE ===== */
.error-message[b-r6aec1xiv0] {
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.5rem;                          /* Padding (8px) */
    background-color: #FFDDDD;                /* Rosa claro */
    border: 1px solid #CC0000;                /* Borde rojo */
    border-radius: 0;                         /* Sin bordes redondeados */
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-r6aec1xiv0] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-r6aec1xiv0] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-confirmar-modal[b-r6aec1xiv0] {
    background-color: #90D090;                /* Verde claro */
    color: #000000;                           /* Negro */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalAsignar.razor.rz.scp.css */
/*
   ModalAsignar.razor.css
   Modal para asignar un requerimiento.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-qowo57bt0h] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-qowo57bt0h] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-asignar[b-qowo57bt0h] {
    background-color: #FFF7CC;                /* Amarillo muy claro */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-qowo57bt0h] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-qowo57bt0h] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-qowo57bt0h] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    line-height: 1.4;                         /* Altura de línea */
}

.modal-body p[b-qowo57bt0h] {
    margin: 0.375rem 0;                       /* Margen (6px) */
}

/* ===== FORM GROUP ===== */
.form-group[b-qowo57bt0h] {
    margin: 0.75rem 0;                        /* Margen (12px) */
}

.form-group label[b-qowo57bt0h] {
    display: block;                           /* Bloque */
    margin-bottom: 0.25rem;                   /* Margen inferior (4px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #000000;                           /* Negro */
}

.form-control[b-qowo57bt0h] {
    width: 100%;                              /* Ancho completo */
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    box-sizing: border-box;                   /* Box sizing */
    background-color: #FFFFFF;                /* Blanco */
}

.form-control:focus[b-qowo57bt0h] {
    outline: 1px solid #000000;               /* Outline negro */
    border-color: #000000;                    /* Borde negro */
}

textarea.form-control[b-qowo57bt0h] {
    resize: vertical;                         /* Solo redimensiona vertical */
    min-height: 5rem;                         /* Altura mínima (80px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-qowo57bt0h] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    gap: 0.5rem;                              /* Gap (8px) */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css - aquí solo colores */
.btn-cancelar-modal[b-qowo57bt0h] {
    background-color: #D0D0D0;                /* Gris claro */
}

.btn-confirmar-modal[b-qowo57bt0h] {
    background-color: #F1BF09;                /* Amarillo dorado */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalCancelar.razor.rz.scp.css */
/*
   ModalCancelar.razor.css
   Modal para cancelar un requerimiento.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-77dkmjok1f] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-77dkmjok1f] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-cancelar[b-77dkmjok1f] {
    background-color: #B2B3BE;                /* Gris azulado */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-77dkmjok1f] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-77dkmjok1f] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-77dkmjok1f] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.modal-body p[b-77dkmjok1f] {
    margin: 0.375rem 0;                       /* Margen (6px) */
}

/* ===== FORM GROUP ===== */
.form-group[b-77dkmjok1f] {
    margin: 0.75rem 0;                        /* Margen (12px) */
}

.form-group label[b-77dkmjok1f] {
    display: block;                           /* Bloque */
    margin-bottom: 0.25rem;                   /* Margen inferior (4px) */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #000000;                           /* Negro */
}

.form-control[b-77dkmjok1f] {
    width: 100%;                              /* Ancho completo */
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    box-sizing: border-box;                   /* Box sizing */
    background-color: #FFFFFF;                /* Blanco */
}

.form-control:focus[b-77dkmjok1f] {
    box-shadow: none !important;              /* Sin sombra Bootstrap */
}

textarea.form-control[b-77dkmjok1f] {
    resize: vertical;                         /* Solo redimensiona vertical */
    min-height: 5rem;                         /* Altura mínima (80px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-77dkmjok1f] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css - aquí solo colores */

.btn-cancelar-modal[b-77dkmjok1f] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-confirmar-modal[b-77dkmjok1f] {
    background-color: #66677A;                /* Gris azulado oscuro */
    color: #FFFFFF;                           /* Blanco */
    border: 1px solid #808080;                /* Borde gris */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalCatalogoSimple.razor.rz.scp.css */
/* ============================================================
   ModalCatalogoSimple.razor.css - Modal para catálogos simples
   ============================================================ */

.modal-catalogo-overlay[b-7lokmjmiaa] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-catalogo-content[b-7lokmjmiaa] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 22rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
    overflow: hidden;
}

.modal-catalogo-header[b-7lokmjmiaa] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-catalogo-header h3[b-7lokmjmiaa] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.modal-catalogo-header .boton-x[b-7lokmjmiaa] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-catalogo-header .boton-x:hover[b-7lokmjmiaa] {
    opacity: 0.7;
}

.modal-catalogo-body[b-7lokmjmiaa] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-catalogo-grupo[b-7lokmjmiaa] {
    margin-bottom: 0.75rem;
}

.modal-catalogo-grupo label[b-7lokmjmiaa] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.modal-catalogo-input[b-7lokmjmiaa],
.modal-catalogo-select[b-7lokmjmiaa] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.modal-catalogo-input:disabled[b-7lokmjmiaa],
.modal-catalogo-select:disabled[b-7lokmjmiaa] {
    background-color: #E0E0E0;
    color: #666666;
}

.modal-catalogo-nota[b-7lokmjmiaa] {
    font-size: var(--texto-8pt);
    color: #FFCC00;
    display: block;
    margin-top: 0.25rem;
}

.modal-catalogo-error[b-7lokmjmiaa] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: #000000;
    font-size: var(--texto-9pt);
    margin-bottom: 0.75rem;
}

.modal-catalogo-footer[b-7lokmjmiaa] {
    padding: 0.94rem 0 0 0;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-catalogo-footer .boton:first-of-type[b-7lokmjmiaa] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-catalogo-footer .boton:first-of-type:hover[b-7lokmjmiaa] {
    background-color: #666666;
}

.modal-catalogo-footer .btn-guardar[b-7lokmjmiaa] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.modal-catalogo-footer .btn-guardar:hover[b-7lokmjmiaa] {
    background-color: #45A049;
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalComisionPDF.razor.rz.scp.css */
/*
   ModalComisionPDF.razor.css
   Modal para descargar/enviar PDFs de comisiones.
   Modulo: Comisiones (color eval)
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-pxwqu6moly] {
    position: fixed;                          /* Posicion fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-pxwqu6moly] {
    border: 1px solid #FFFFFF;                /* Borde blanco */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra */
    width: 90%;                               /* Ancho 90% */
    max-width: 28rem;                         /* Maximo */
    max-height: 90vh;                         /* Maximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Direccion columna */
}

.modal-comision-pdf[b-pxwqu6moly] {
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-pxwqu6moly] {
    padding: 0.625rem 0.94rem;                /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: #FF2400;                /* Rojo PDF */
}

.modal-header h3[b-pxwqu6moly] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamano 11pt */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco */
}

.modal-header .boton-x[b-pxwqu6moly] {
    color: #FFFFFF;                           /* Blanco */
}

.modal-header .boton-x:hover[b-pxwqu6moly] {
    color: #FFFFFF;                           /* Blanco */
    opacity: 0.8;                             /* Ligeramente transparente */
}

/* ===== MODAL BODY ===== */
.modal-body[b-pxwqu6moly] {
    padding: 0.94rem;                         /* Padding */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
}

.modal-info[b-pxwqu6moly] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding-bottom: 0.5rem;                   /* Padding inferior */
    border-bottom: 1px solid var(--color-border); /* Borde inferior */
}

.modal-info strong[b-pxwqu6moly] {
    display: block;                           /* Bloque */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
}

.modal-seccion[b-pxwqu6moly] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
}

.modal-label[b-pxwqu6moly] {
    display: block;                           /* Bloque */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    margin-bottom: 0.5rem;                    /* Margen inferior */
}

.modal-check[b-pxwqu6moly] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    margin-bottom: 0.25rem;                   /* Margen inferior */
    cursor: pointer;                          /* Manita */
}

.modal-check input[type="checkbox"][b-pxwqu6moly] {
    cursor: pointer;                          /* Manita */
}

.modal-email[b-pxwqu6moly] {
    font-size: var(--texto-8pt);              /* Tamano chico */
    color: #808080;                           /* Gris */
}

.modal-destinatarios[b-pxwqu6moly] {
    margin-left: 1.5rem;                      /* Indentacion */
    margin-top: 0.5rem;                       /* Margen superior */
    padding: 0.5rem;                          /* Padding */
    background-color: #FAFAFA;                /* Fondo gris muy claro */
    max-height: 10rem;                        /* Altura maxima */
    overflow-y: auto;                         /* Scroll vertical */
}

.modal-error[b-pxwqu6moly] {
    padding: 0.5rem;                          /* Padding */
    color: #B71C1C;                           /* Rojo */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    font-weight: bold;                        /* Negritas */
}

.modal-exito[b-pxwqu6moly] {
    padding: 0.5rem;                          /* Padding */
    color: #2E7D32;                           /* Verde */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-pxwqu6moly] {
    padding: 0.625rem 0.94rem;                /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    gap: 0.5rem;                              /* Espacio entre botones */
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-pxwqu6moly] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-descargar-modal[b-pxwqu6moly] {
    background-color: #1565C0;                /* Azul */
    color: #FFFFFF;                           /* Blanco */
}

.btn-enviar-modal[b-pxwqu6moly] {
    background-color: var(--color-terminado); /* Verde */
    color: #FFFFFF;                           /* Blanco */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalComisionRRHH.razor.rz.scp.css */
/*
   ModalComisionRRHH.razor.css
   Modal para enviar resumen de comisiones a RRHH.
   Modulo: Comisiones (color eval)
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-ztrkmuuwke] {
    position: fixed;                          /* Posicion fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-ztrkmuuwke] {
    border: 1px solid #FFFFFF;                /* Borde blanco */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra */
    width: 90%;                               /* Ancho 90% */
    max-width: 22rem;                         /* Maximo */
    max-height: 90vh;                         /* Maximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Direccion columna */
}

.modal-comision-rrhh[b-ztrkmuuwke] {
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-ztrkmuuwke] {
    padding: 0.625rem 0.94rem;                /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: #2E7D32;                /* Verde comisiones */
}

.modal-header h3[b-ztrkmuuwke] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamano 11pt */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco */
}

.modal-header .boton-x[b-ztrkmuuwke] {
    color: #FFFFFF;                           /* Blanco */
}

.modal-header .boton-x:hover[b-ztrkmuuwke] {
    color: #FFFFFF;                           /* Blanco */
    opacity: 0.8;                             /* Ligeramente transparente */
}

/* ===== MODAL BODY ===== */
.modal-body[b-ztrkmuuwke] {
    padding: 0.94rem;                         /* Padding */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
}

.modal-info[b-ztrkmuuwke] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding-bottom: 0.5rem;                   /* Padding inferior */
    border-bottom: 1px solid var(--color-border); /* Borde inferior */
}

.modal-info strong[b-ztrkmuuwke] {
    display: block;                           /* Bloque */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
}

.rrhh-destino[b-ztrkmuuwke] {
    display: block;                           /* Bloque */
    font-size: var(--texto-8pt);              /* Tamano chico */
    color: #808080;                           /* Gris */
    margin-top: 0.25rem;                      /* Margen superior */
}

/* ===== TABLA ===== */
.rrhh-tabla[b-ztrkmuuwke] {
    width: 100%;                              /* Ancho completo */
    border-collapse: collapse;                /* Sin espacio entre celdas */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    margin-bottom: 0.75rem;                   /* Margen inferior */
}

.rrhh-tabla thead tr[b-ztrkmuuwke] {
    background-color: #2E7D32;                /* Verde */
    color: #FFFFFF;                           /* Blanco */
}

.rrhh-tabla th[b-ztrkmuuwke] {
    padding: 0.4rem 0.5rem;                   /* Padding */
    font-weight: bold;                        /* Negritas */
}

.rrhh-tabla td[b-ztrkmuuwke] {
    padding: 0.35rem 0.5rem;                  /* Padding */
    border-bottom: 1px solid #E0E0E0;         /* Borde inferior */
}

.rrhh-col-nombre[b-ztrkmuuwke] {
    text-align: right;                        /* Alineado derecha */
}

.rrhh-col-monto[b-ztrkmuuwke] {
    text-align: right;                        /* Alineado derecha */
    padding-right: 1.5rem !important;         /* Separacion del borde */
    width: 10rem;                             /* Ancho fijo */
}

.rrhh-tabla tbody tr:nth-child(even)[b-ztrkmuuwke] {
    background-color: #f5f5f5;                /* Sombreado alternado */
}

.rrhh-total[b-ztrkmuuwke] {
    background-color: #E8F5E9;                /* Verde claro */
    font-weight: bold;                        /* Negritas */
}

.rrhh-total td[b-ztrkmuuwke] {
    padding: 0.5rem;                          /* Padding */
    border-bottom: none;                      /* Sin borde */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
}

/* ===== MENSAJES ===== */
.modal-error[b-ztrkmuuwke] {
    padding: 0.5rem;                          /* Padding */
    color: #B71C1C;                           /* Rojo */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    font-weight: bold;                        /* Negritas */
}

.modal-exito[b-ztrkmuuwke] {
    padding: 0.5rem;                          /* Padding */
    color: #2E7D32;                           /* Verde */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    font-weight: bold;                        /* Negritas */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-ztrkmuuwke] {
    padding: 0.625rem 0.94rem;                /* Padding */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    gap: 0.5rem;                              /* Espacio entre botones */
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-ztrkmuuwke] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-enviar-modal[b-ztrkmuuwke] {
    background-color: var(--color-terminado); /* Verde */
    color: #FFFFFF;                           /* Blanco */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalDeptoABC.razor.rz.scp.css */
/* ============================================================
   ModalDeptoABC.razor.css - Modal para Departamentos
   ============================================================ */

.modal-depto-overlay[b-z34aezvl30] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-depto-content[b-z34aezvl30] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
    overflow: hidden;
}

.modal-depto-header[b-z34aezvl30] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-depto-header h3[b-z34aezvl30] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.modal-depto-header .boton-x[b-z34aezvl30] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-depto-header .boton-x:hover[b-z34aezvl30] {
    opacity: 0.7;
}

.modal-depto-body[b-z34aezvl30] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-depto-grupo[b-z34aezvl30] {
    margin-bottom: 0.75rem;
}

.modal-depto-grupo > label[b-z34aezvl30] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.modal-depto-input[b-z34aezvl30],
.modal-depto-select[b-z34aezvl30] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.modal-depto-input:disabled[b-z34aezvl30],
.modal-depto-select:disabled[b-z34aezvl30] {
    background-color: #E0E0E0;
    color: #666666;
}

.modal-depto-checkbox[b-z34aezvl30] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.modal-depto-checkbox input[type="checkbox"][b-z34aezvl30] {
    width: 1.1rem;
    height: 1.1rem;
}

.modal-depto-nota[b-z34aezvl30] {
    font-size: var(--texto-8pt);
    color: #FFCC00;
    display: block;
    margin-top: 0.25rem;
}

.modal-depto-error[b-z34aezvl30] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: #000000;
    font-size: var(--texto-9pt);
    margin-bottom: 0.75rem;
}

.modal-depto-footer[b-z34aezvl30] {
    padding: 0.94rem 0 0 0;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-depto-footer .boton:first-of-type[b-z34aezvl30] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-depto-footer .boton:first-of-type:hover[b-z34aezvl30] {
    background-color: #666666;
}

.modal-depto-footer .btn-guardar[b-z34aezvl30] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.modal-depto-footer .btn-guardar:hover[b-z34aezvl30] {
    background-color: #45A049;
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalDesactivar.razor.rz.scp.css */
/*
   ModalDesactivar.razor.css
   Modal para desactivar un requerimiento recurrente.
   Migrado de: SiREI_2009/02Req/ConsReqRE.aspx - Panel P_Inactiva
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-xs2furnrqh] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-xs2furnrqh] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 27.5rem;                       /* Máximo (440px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-desactivar[b-xs2furnrqh] {
    background-color: #696969;                /* Gris (DimGray) */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-xs2furnrqh] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-xs2furnrqh] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco (texto en fondo gris) */
}

/* ===== MODAL BODY ===== */
.modal-body[b-xs2furnrqh] {
    padding: 1.875rem 1.25rem;                /* Padding (30px 20px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    text-align: center;                       /* Centrado */
    color: #FFFFFF;                           /* Blanco */
}

/* Mensaje de confirmación */
.mensaje-confirmacion[b-xs2furnrqh] {
    margin: 0 0 0.94rem 0;                    /* Margen inferior (15px) */
    line-height: 1.5;                         /* Altura de línea */
}

/* Título del req a desactivar */
.req-titulo[b-xs2furnrqh] {
    width: 90%;                               /* Ancho 90% */
    margin: 0 auto 1.25rem auto;              /* Margen centrado (20px) */
    padding: 0.5rem;                          /* Padding (8px) */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco */
    background-color: #696969;                /* Mismo fondo (DimGray) */
    text-align: center;                       /* Centrado */
    border: 0;                                /* Sin borde */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

/* Mensaje de advertencia */
.mensaje-advertencia[b-xs2furnrqh] {
    margin: 0.94rem 0 0 0;                    /* Margen superior (15px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-xs2furnrqh] {
    padding: 0.94rem;                         /* Padding (15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor estandar blanco */
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* centrado */
    gap: 0.5rem;                              /* Gap (8px) */
    background-color: inherit;                /* Hereda fondo */
    flex-wrap: wrap;                          /* Wrap */
}

/* ===== BOTONES ===== */
.btn-desactivar-modal[b-xs2furnrqh] {
    background-color: #FF6666;                /* Rojo claro (acción destructiva) */
    color: #000000;                           /* Negro */
}

.btn-cancelar-modal[b-xs2furnrqh] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalEncadena.razor.rz.scp.css */
/*
   ModalEncadena.razor.css
   Modal para encadenar requerimientos.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-ymjqe58zvv] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-ymjqe58zvv] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 21.875rem;                     /* Máximo (350px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    background-color: #7581FA;                /* Azul violeta (mismo del botón en ReqConsulta) */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-ymjqe58zvv] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-ymjqe58zvv] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-ymjqe58zvv] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
}

.modal-body p[b-ymjqe58zvv] {
    margin: 0.125rem;                         /* Margen (2px) */
    line-height: 1.4;                         /* Altura de línea */
}

/* Título especial del negocio */
.titulo-negocio[b-ymjqe58zvv] {
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

/* ===== OPCIONES CONTAINER ===== */
.opciones-container[b-ymjqe58zvv] {
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    align-items: center;                      /* Centrado horizontal */
    gap: 0.625rem;                            /* Gap (10px) */
}

/* ===== BOTONES DE OPCIÓN ===== */
/* Usa .boton de app.css - aquí solo colores y ancho */
.boton[b-ymjqe58zvv] { margin-left: 0;}  /* le quitamos el margen dado que aquí no lo ocupa */

.btn-crear[b-ymjqe58zvv] {
    background-color: #FFFF99;                /* Amarillo claro */
    width: 100%;                              /* Ancho completo */
}

/* Texto secundario dentro de botones */
.btn-texto-secundario[b-ymjqe58zvv] {
    display: block;                           /* Bloque */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: normal;                      /* Sin negritas */
    color: #555555;                           /* Gris oscuro */
    margin-top: 0.125rem;                     /* Margen superior (2px) */
}

/* Usa .boton de app.css - aquí solo colores y ancho */
.btn-encadenar[b-ymjqe58zvv] {
    background-color: #B0E0E6;                /* Azul polvo (PowderBlue) */
    width: 100%;                              /* Ancho completo */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-ymjqe58zvv] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha (como los demás modales) */
}

/* ===== BOTONES FOOTER ===== */
.btn-cancelar-modal[b-ymjqe58zvv] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalEncadenaAgregar.razor.rz.scp.css */
/*
   ModalEncadenaAgregar.razor.css
   Modal para agregar una dependencia de cadena.
   Dos variantes: violeta (dependen) y amarillo (depende).
*/

/* ===== INPUT NUMBER SIN FLECHAS ===== */
.input-req-modal[b-ij99je9yi2]::-webkit-inner-spin-button,
.input-req-modal[b-ij99je9yi2]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-req-modal[b-ij99je9yi2] {
    -moz-appearance: textfield;                   /* Firefox */
}

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-ij99je9yi2] {
    position: fixed;                          /* Posicion fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-ij99je9yi2] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 27.5rem;                       /* Maximo (440px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Direccion columna */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
}

/* ===== VARIANTES DE COLOR ===== */
/* Violeta: reqs que dependen de el */
.modal-dependen[b-ij99je9yi2] {
    background-color: #CC99FF;                /* Violeta solido */
}

/* Amarillo: reqs de los que depende */
.modal-depende[b-ij99je9yi2] {
    background-color: #FFD700;                /* Amarillo solido */
}

/* ===== MODAL BODY ===== */
.modal-body[b-ij99je9yi2] {
    padding: 1.56rem 1.125rem;                /* Padding (25px 18px) */
    text-align: center;                       /* Centrado */
}

.modal-body p[b-ij99je9yi2] {
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

.texto-modal-tipo[b-ij99je9yi2] {
    font-weight: normal;                      /* Sin negritas */
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

.req-numero-fijo[b-ij99je9yi2] {
    font-weight: bold;                        /* Negritas */
    padding: 0.375rem;                        /* Padding (6px) */
    margin: 0.5rem auto;                      /* Margen centrado (8px) */
    max-width: 18.75rem;                      /* Ancho maximo (300px) */
}

.input-req-modal[b-ij99je9yi2] {
    width: 6.25rem;                           /* Ancho (100px) */
    padding: 0.31rem;                         /* Padding (5px) */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
    text-align: center;                       /* Centrado */
    border: 1px solid #999999;                /* Borde gris */
    border-radius: 3px;                       /* Bordes redondeados */
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

/* ===== MENSAJES DE ERROR ===== */
.mensaje-error-modal[b-ij99je9yi2] {
    color: #FF0000;                           /* Rojo */
    background-color: #FFF5F5;                /* Rosa muy claro */
    padding: 0.5rem;                          /* Padding (8px) */
    margin: 0.75rem 0 0.25rem;                /* Margen (12px 0 4px) */
    border: 1px solid #FFCCCC;                /* Borde rosa */
    border-radius: 4px;                       /* Bordes redondeados */
}

.mensaje-verificar[b-ij99je9yi2] {
    color: #FF0000;                           /* Rojo */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

/* ===== VISTA PREVIA ===== */
.vista-previa-req[b-ij99je9yi2] {
    background-color: #FFFFFF;                /* Fondo blanco */
    padding: 0.75rem;                         /* Padding (12px) */
    margin: 0.75rem 0;                        /* Margen vertical (12px) */
    border: 1px solid #DDDDDD;                /* Borde gris claro */
    border-radius: 4px;                       /* Bordes redondeados */
    text-align: left;                         /* Alineado izquierda */
}

.separador[b-ij99je9yi2] {
    text-align: center;                       /* Centrado */
    color: #666666;                           /* Gris oscuro */
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

.req-titulo-preview[b-ij99je9yi2] {
    font-weight: bold;                        /* Negritas */
    text-align: center;                       /* Centrado */
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

.status-preview[b-ij99je9yi2] {
    text-align: center;                       /* Centrado */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-8pt);              /* Tamano 8pt */
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
    color: #666666;                           /* Gris oscuro */
}

.req-info-preview[b-ij99je9yi2] {
    text-align: center;                       /* Centrado */
    font-size: var(--texto-9pt);              /* Tamano 9pt */
    margin: 0.25rem 0;                        /* Margen vertical (4px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-ij99je9yi2] {
    padding: 0.94rem;                         /* Padding (15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* Alineado cenrado */
    gap: 0.94rem;                             /* Espacio entre botones (15px) */
    background-color: inherit;                /* Hereda color del modal */
}

/* ===== BOTONES ===== */
.btn-confirmar[b-ij99je9yi2] {
    background-color: var(--color-home);      /* Verde */
    color: white;
}

.btn-cancelar[b-ij99je9yi2] {
    background-color: #D0D0D0;                /* Gris claro */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-content[b-ij99je9yi2] {
        width: 95%;                           /* Ancho casi completo */
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalEncadenaQuitar.razor.rz.scp.css */
/*
   ModalEncadenaQuitar.razor.css
   Modal para quitar una dependencia de cadena.
   Dos variantes: violeta (dependen) y amarillo (depende).
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-r97ncw5ic3] {
    position: fixed;                          /* Posicion fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-r97ncw5ic3] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 27.5rem;                       /* Maximo (440px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Direccion columna */
    font-size: var(--texto-10pt);             /* Tamano 10pt */
}

/* ===== VARIANTES DE COLOR ===== */
/* Violeta: reqs que dependen de el */
.modal-dependen[b-r97ncw5ic3] {
    background-color: #CC99FF;                /* Violeta solido */
}

/* Amarillo: reqs de los que depende */
.modal-depende[b-r97ncw5ic3] {
    background-color: #FFD700;                /* Amarillo solido */
}

/* ===== MODAL BODY ===== */
.modal-body[b-r97ncw5ic3] {
    padding: 1.56rem 1.125rem;                /* Padding (25px 18px) */
    text-align: center;                       /* Centrado */
}

.modal-body p[b-r97ncw5ic3] {
    margin: 0.5rem 0;                         /* Margen vertical (8px) */
}

.req-numero[b-r97ncw5ic3] {
    font-weight: bold;                        /* Negritas */
    padding: 0.375rem;                        /* Padding (6px) */
    margin: 0.5rem auto;                      /* Margen centrado (8px) */
    max-width: 18.75rem;                      /* Ancho maximo (300px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-r97ncw5ic3] {
    padding: 0.94rem;                         /* Padding (15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: center;                  /* Alineado cenrado */
    gap: 0.94rem;                             /* Espacio entre botones (15px) */
    background-color: inherit;                /* Hereda color del modal */
}

/* ===== BOTONES ===== */
.btn-confirmar[b-r97ncw5ic3] {
    background-color: var(--color-home);      /* Verde */
    color: white;
}

.btn-cancelar[b-r97ncw5ic3] {
    background-color: #D0D0D0;                /* Gris claro */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .modal-content[b-r97ncw5ic3] {
        width: 95%;                           /* Ancho casi completo */
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalMinutaEnviar.razor.rz.scp.css */
/*
   ModalMinutaEnviar.razor.css
   Modal para enviar/reenviar una minuta a los asistentes.
   Módulo: Minutas (color naranja --color-minu)
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-f30n3qpo45] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-f30n3qpo45] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-enviar-minuta[b-f30n3qpo45] {
    background-color: #FFFFFF;                /* Fondo blanco */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-f30n3qpo45] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: var(--color-minu);      /* Naranja - color del módulo */
}

.modal-header h3[b-f30n3qpo45] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #FFFFFF;                           /* Blanco */
}

.modal-header .boton-x[b-f30n3qpo45] {
    color: #FFFFFF;                           /* Blanco sobre fondo naranja */
}

.modal-header .boton-x:hover[b-f30n3qpo45] {
    color: #FFFFFF;                           /* Blanco al hover */
    opacity: 0.8;                             /* Ligeramente transparente */
}

/* ===== MODAL BODY ===== */
.modal-body[b-f30n3qpo45] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
}

.modal-info[b-f30n3qpo45] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
    padding-bottom: 0.5rem;                   /* Padding inferior */
    border-bottom: 1px solid var(--color-border); /* Borde inferior */
}

.modal-info strong[b-f30n3qpo45] {
    display: block;                           /* Bloque */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    margin-bottom: 0.25rem;                   /* Margen inferior */
}

.modal-fecha[b-f30n3qpo45] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #666666;                           /* Gris */
}

.modal-seccion[b-f30n3qpo45] {
    margin-bottom: 0.75rem;                   /* Margen inferior */
}

.modal-label[b-f30n3qpo45] {
    display: block;                           /* Bloque */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    margin-bottom: 0.5rem;                    /* Margen inferior */
}

.modal-check[b-f30n3qpo45] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.5rem;                              /* Espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    margin-bottom: 0.25rem;                   /* Margen inferior */
    cursor: pointer;                          /* Manita */
}

.modal-check input[type="checkbox"][b-f30n3qpo45] {
    cursor: pointer;                          /* Manita */
}

.modal-destinatarios[b-f30n3qpo45] {
    margin-left: 1.5rem;                      /* Indentación */
    margin-top: 0.5rem;                       /* Margen superior */
    padding: 0.5rem;                          /* Padding */
    background-color: #FAFAFA;                /* Fondo gris muy claro */
    border-radius: 0.25rem;                   /* Esquinas redondeadas */
    max-height: 10rem;                        /* Altura máxima */
    overflow-y: auto;                         /* Scroll vertical */
}

.modal-textarea[b-f30n3qpo45] {
    width: 100%;                              /* Ancho completo */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    padding: 0.5rem;                          /* Padding */
    border: 1px solid #808080;                /* Borde gris */
    background-color: #FFFFFF;                /* Blanco */
    resize: vertical;                         /* Solo redimensiona vertical */
    box-sizing: border-box;                   /* Box sizing */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-f30n3qpo45] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    gap: 0.5rem;                              /* Espacio entre botones */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css - aquí solo colores */

.btn-cancelar-modal[b-f30n3qpo45] {
    background-color: #D0D0D0;                /* Gris claro */
    color: #000000;                           /* Negro */
}

.btn-confirmar-modal[b-f30n3qpo45] {
    background-color: var(--color-terminado); /* Verde */
    color: #FFFFFF;                           /* Blanco */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalPlazo.razor.rz.scp.css */
/*
   ModalPlazo.razor.css
   Modal para modificar el plazo de entrega de un requerimiento.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-cvr5bp02ih] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-cvr5bp02ih] {
    background-color: #FFFFFF;                /* Blanco */
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    max-height: 70vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-plazo[b-cvr5bp02ih] {
    background-color: #FFFFFF;                /* Blanco */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-cvr5bp02ih] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-cvr5bp02ih] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-cvr5bp02ih] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
}

.modal-body p[b-cvr5bp02ih] {
    margin: 0.375rem 0;                       /* Margen (6px) */
}

/* ===== ADVERTENCIA ===== */
.advertencia[b-cvr5bp02ih] {
    background-color: #CC0000;                /* Rojo */
    color: #FFFFFF;                           /* Blanco */
    padding: 0.75rem;                         /* Padding (12px) */
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
    font-size: var(--texto-10pt);             /* Tamaño 10pt */
    line-height: 1.4;                         /* Altura de línea */
}

.advertencia strong[b-cvr5bp02ih] {
    font-weight: bold;                        /* Negritas */
    display: block;                           /* Bloque */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
}

/* ===== INSTRUCCION ===== */
.instruccion[b-cvr5bp02ih] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    color: #CC0000;                           /* Rojo */
    margin: 0.94rem 0 0.625rem 0;             /* Margen (15px 0 10px 0) */
}

/* ===== OPCIONES ===== */
.opcion-container[b-cvr5bp02ih] {
    margin-bottom: 1.25rem;                   /* Margen inferior (20px) */
}

.opcion-header[b-cvr5bp02ih] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.625rem;                            /* Gap (10px) */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
}

.radio-label[b-cvr5bp02ih] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
    cursor: pointer;                          /* Cursor pointer */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.radio-label input[type="radio"][b-cvr5bp02ih] {
    cursor: pointer;                          /* Cursor pointer */
}

.radio-text[b-cvr5bp02ih] {
    font-weight: bold;                        /* Negritas */
    min-width: 7.5rem;                        /* Mínimo (120px) */
}

.input-fecha[b-cvr5bp02ih] {
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
}

.input-dias[b-cvr5bp02ih] {
    width: 3.75rem;                           /* Ancho (60px) */
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
    text-align: right;                        /* Alineado derecha */
}

.label-dias[b-cvr5bp02ih] {
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #000000;                           /* Negro */
}

.opcion-descripcion[b-cvr5bp02ih] {
    margin-left: 1.25rem;                     /* Margen izquierdo (20px) */
    padding-left: 0.625rem;                   /* Padding izquierdo (10px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #696969;                           /* Gris (DimGray) */
    line-height: 1.3;                         /* Altura de línea */
}

/* ===== ERROR MESSAGE ===== */
.error-message[b-cvr5bp02ih] {
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.5rem;                          /* Padding (8px) */
    background-color: #FFDDDD;                /* Rosa claro */
    border: 1px solid #CC0000;                /* Borde rojo */
    border-radius: 0;                         /* Sin bordes redondeados */
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-cvr5bp02ih] {
    padding: 0.94rem;                         /* Padding (15px) */
    border-top: 1px solid #D0D0D0;            /* Divisor estandar Gris claro */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha (como los demás modales) */
    gap: 0.5rem;                              /* Gap (8px) */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css - aquí solo colores */

.btn-cancelar-modal[b-cvr5bp02ih] {
    background-color: #D0D0D0;                /* Gris claro */
}

.btn-confirmar-modal[b-cvr5bp02ih] {
    background-color: #CC0000;                /* Verde claro */
    color: white;
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalRechazar.razor.rz.scp.css */
/*
   ModalRechazar.razor.css
   Modal para rechazar un requerimiento.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-yc4kwo0fgy] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-yc4kwo0fgy] {
    border: 1px solid #FFFFFF;                /* Borde blanco */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    background-color: #FF7C80;                /* Rosa salmón */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-yc4kwo0fgy] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Borde inferior gris */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-yc4kwo0fgy] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-yc4kwo0fgy] {
    padding: 0.94rem;                         /* Padding (15px) */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
    overflow-y: auto;                         /* Scroll si es necesario */
    flex: 1;                                  /* Ocupa espacio disponible */
}

.modal-body p[b-yc4kwo0fgy] {
    margin: 0.375rem 0;                       /* Margen entre párrafos (6px) */
}

/* ===== FORM GROUP ===== */
.form-group[b-yc4kwo0fgy] {
    margin: 0.75rem 0;                        /* Margen (12px) */
}

.form-group label[b-yc4kwo0fgy] {
    display: block;                           /* Bloque */
    margin-bottom: 0.25rem;                   /* Margen inferior (4px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.form-control[b-yc4kwo0fgy] {
    width: 100%;                              /* Ancho completo */
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    box-sizing: border-box;                   /* Box sizing */
    background-color: #FFFFFF;                /* Blanco */
}

.form-control:focus[b-yc4kwo0fgy] {
    box-shadow: none;                         /* Sin sombra Bootstrap */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-yc4kwo0fgy] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Borde superior gris */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
.btn-cancelar-modal[b-yc4kwo0fgy] {
    background-color: #D0D0D0;                /* Gris claro */
}

.btn-confirmar-modal[b-yc4kwo0fgy] {
    background-color: #8B0000;                /* Rojo oscuro (DarkRed) */
    color: #FFFFFF;                           /* Blanco */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalRecurre.razor.rz.scp.css */
/*
   ModalRecurre.razor.css
   Modal para configurar recurrencia de requerimientos.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-ch2jluagz6] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-ch2jluagz6] {
    background-color: #FFFFFF;                /* Blanco */
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 37.5rem;                       /* Máximo (600px) */
    max-height: 90vh;                         /* Máximo 90% viewport */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
}

.modal-recurre[b-ch2jluagz6] {
    background-color: #FFFFFF;                /* Blanco */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-ch2jluagz6] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-ch2jluagz6] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-ch2jluagz6] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== SECCIONES ===== */
.seccion[b-ch2jluagz6] {
    margin-bottom: 0.94rem;                   /* Margen inferior (15px) */
}

.seccion-titulo[b-ch2jluagz6] {
    margin: 0 0 0.5rem 0;                     /* Margen inferior (8px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    font-weight: bold;                        /* Negritas */
    color: #008B8B;                           /* Cian oscuro (DarkCyan) */
}

.seccion-contenido[b-ch2jluagz6] {
    border: 1px solid #DCF0DC;                /* Borde verde claro */
    padding: 0.625rem;                        /* Padding (10px) */
    background-color: #FFFFFF;                /* Blanco */
}

/* ===== FRECUENCIA ===== */
.frecuencia-selector[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    gap: 0.625rem;                            /* Gap (10px) */
}

.frecuencia-opciones[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0.5rem;                              /* Gap (8px) */
    min-width: 5.625rem;                      /* Mínimo (90px) */
    padding-right: 0.625rem;                  /* Padding derecho (10px) */
    border-right: 1px solid #DCF0DC;          /* Borde derecho verde claro */
}

.frecuencia-detalle[b-ch2jluagz6] {
    flex: 1;                                  /* Ocupa espacio */
    padding-left: 0.625rem;                   /* Padding izquierdo (10px) */
}

.panel-frecuencia[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0.625rem;                            /* Gap (10px) */
}

.row-input[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
}

/* ===== DÍAS DE LA SEMANA ===== */
.dias-semana[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    gap: 0.5rem;                              /* Gap (8px) */
    flex-wrap: wrap;                          /* Wrap */
    margin-top: 0.5rem;                       /* Margen superior (8px) */
}

.checkbox-label[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.25rem;                             /* Gap (4px) */
    cursor: pointer;                          /* Cursor pointer */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.checkbox-label input[type="checkbox"][b-ch2jluagz6] {
    cursor: pointer;                          /* Cursor pointer */
}

/* ===== OPCIONES MENSUAL/ANUAL ===== */
.opcion-mensual[b-ch2jluagz6],
.opcion-anual[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
    margin-bottom: 0.625rem;                  /* Margen inferior (10px) */
    flex-wrap: wrap;                          /* Wrap */
}

/* ===== RANGO ===== */
.rango-opciones[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    gap: 0.625rem;                            /* Gap (10px) */
}

.rango-opcion[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
}

/* ===== RADIO LABELS ===== */
.radio-label[b-ch2jluagz6] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
    cursor: pointer;                          /* Cursor pointer */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.radio-label input[type="radio"][b-ch2jluagz6] {
    cursor: pointer;                          /* Cursor pointer */
}

.radio-label-inline[b-ch2jluagz6] {
    display: inline-flex;                     /* Inline flex */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
    cursor: pointer;                          /* Cursor pointer */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.radio-label-inline input[type="radio"][b-ch2jluagz6] {
    cursor: pointer;                          /* Cursor pointer */
}

/* ===== INPUTS ===== */
.input-num[b-ch2jluagz6] {
    width: 3.125rem;                          /* Ancho (50px) */
    padding: 0.125rem 0.25rem;                /* Padding (2px 4px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
    text-align: right;                        /* Alineado derecha */
}

.input-fecha[b-ch2jluagz6] {
    padding: 0.125rem 0.25rem;                /* Padding (2px 4px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
}

/* ===== SELECTS ===== */
.select-sm[b-ch2jluagz6] {
    width: 3.125rem;                          /* Ancho (50px) */
    padding: 0.125rem;                        /* Padding (2px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
}

.select-md[b-ch2jluagz6] {
    width: 5.625rem;                          /* Ancho (90px) */
    padding: 0.125rem;                        /* Padding (2px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
}

.select-lg[b-ch2jluagz6] {
    width: 7.5rem;                            /* Ancho (120px) */
    padding: 0.125rem;                        /* Padding (2px) */
    border: 1px solid #808080;                /* Borde gris */
    border-radius: 0;                         /* Sin bordes redondeados */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    background-color: #FFFFFF;                /* Blanco */
}

/* ===== ERROR MESSAGE ===== */
.error-message[b-ch2jluagz6] {
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.5rem;                          /* Padding (8px) */
    background-color: #FFDDDD;                /* Rosa claro */
    border: 1px solid #CC0000;                /* Borde rojo */
    border-radius: 0;                         /* Sin bordes redondeados */
    color: #CC0000;                           /* Rojo */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-ch2jluagz6] {
    padding: 0.94rem;                         /* Padding (15px) */
    border-top: 0px solid #D0D0D0;            /* Divisor estandar Gris claro */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha (como los demás modales) */
    gap: 0.5rem;                              /* Gap (8px) */
    background-color: inherit;                /* Hereda fondo */
    flex-wrap: wrap;                          /* Wrap */
}

/* ===== BOTONES ===== */
/* Usa .boton de app.css - aquí solo colores */

.btn-cancelar-modal[b-ch2jluagz6] {
    background-color: #D0D0D0;                /* Gris claro */
}

.btn-confirmar-modal[b-ch2jluagz6] {
    background-color: #90D090;                /* Verde claro */
}

.btn-borrar-modal[b-ch2jluagz6] {
    background-color: #FF8080;                /* Rojo claro */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalReqABC.razor.rz.scp.css */
/* ============================================================
   ModalReqABC.razor.css - Modal para Tipos de Requerimiento
   ============================================================ */

.modal-req-overlay[b-0u69iu9o8b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-req-content[b-0u69iu9o8b] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 95%;
    max-width: 36rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
    overflow: hidden;
}

.modal-req-header[b-0u69iu9o8b] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-req-header h3[b-0u69iu9o8b] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.modal-req-header .boton-x[b-0u69iu9o8b] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-req-header .boton-x:hover[b-0u69iu9o8b] {
    opacity: 0.7;
}

.modal-req-body[b-0u69iu9o8b] {
    padding: 0.75rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ═══ SECCIONES ═══ */
.modal-req-seccion[b-0u69iu9o8b] {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #888888;
}

.modal-req-seccion:last-of-type[b-0u69iu9o8b] {
    border-bottom: none;
}

.modal-req-seccion-titulo[b-0u69iu9o8b] {
    font-size: var(--texto-9pt);
    font-weight: bold;
    color: #FFCC00;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* ═══ GRUPOS DE CAMPOS ═══ */
.modal-req-grupo[b-0u69iu9o8b] {
    margin-bottom: 0.625rem;
}

.modal-req-grupo > label[b-0u69iu9o8b] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.modal-req-row[b-0u69iu9o8b] {
    display: flex;
    gap: 1rem;
}

.modal-req-grupo-medio[b-0u69iu9o8b] {
    flex: 1;
}

/* ═══ INPUTS Y SELECTS ═══ */
.modal-req-input[b-0u69iu9o8b],
.modal-req-select[b-0u69iu9o8b] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.modal-req-input:disabled[b-0u69iu9o8b],
.modal-req-select:disabled[b-0u69iu9o8b],
.modal-req-input[readonly][b-0u69iu9o8b] {
    background-color: #E0E0E0;
    color: #666666;
    cursor: not-allowed;
}

.modal-req-input-corto[b-0u69iu9o8b] {
    max-width: 8rem;
}

/* ═══ ID COMO TEXTO PLANO ═══ */
.modal-req-id-readonly[b-0u69iu9o8b] {
    display: inline-block;
    padding: 0.5rem;
    background-color: #555555;
    color: #FFFFFF;
    font-size: var(--texto-9pt);
    font-family: monospace;
    font-weight: bold;
    border: 1px solid #888888;
}

.modal-req-textarea[b-0u69iu9o8b] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
    resize: vertical;
    min-height: 4rem;
}

/* ═══ RADIO BUTTONS ═══ */
.modal-req-radio[b-0u69iu9o8b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
    margin-bottom: 0.25rem;
}

.modal-req-radio input[type="radio"][b-0u69iu9o8b] {
    width: 1.1rem;
    height: 1.1rem;
}

/* ═══ LISTA DE DEPARTAMENTOS PARA MULTIDEPTO ═══ */
.modal-req-deptos-lista[b-0u69iu9o8b] {
    max-height: 12rem;
    overflow-y: auto;
    background-color: #555555;
    padding: 0.5rem;
    border: 1px solid #888888;
}

.modal-req-depto-agrupador[b-0u69iu9o8b] {
    font-size: var(--texto-8pt);
    font-weight: bold;
    color: #FFCC00;
    padding: 0.25rem 0;
    white-space: pre;
}

.modal-req-checkbox-depto[b-0u69iu9o8b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: var(--texto-8pt);
    color: #FFFFFF;
    padding: 0.2rem 0.25rem;
    white-space: pre;
}

.modal-req-checkbox-depto:hover[b-0u69iu9o8b] {
    background-color: #666666;
}

.modal-req-checkbox-depto input[type="checkbox"][b-0u69iu9o8b] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ═══ NOTAS ═══ */
.modal-req-nota[b-0u69iu9o8b] {
    font-size: var(--texto-8pt);
    color: #FFCC00;
    display: block;
    margin-top: 0.25rem;
}

/* ═══ SUBIDA DE ARCHIVOS ═══ */
.modal-req-archivo-row[b-0u69iu9o8b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.link-archivo[b-0u69iu9o8b] {
    color: #4FC3F7;
    text-decoration: none;
    font-size: var(--texto-9pt);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.link-archivo:hover[b-0u69iu9o8b] {
    text-decoration: underline;
}

.sin-archivo[b-0u69iu9o8b] {
    color: #999999;
    font-size: var(--texto-9pt);
    font-style: italic;
}

.btn-seleccionar-archivo[b-0u69iu9o8b] {
    font-size: var(--texto-8pt);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* Usa .boton-x de app.css - aquí solo color y hover rojo para quitar */
.btn-quitar-archivo[b-0u69iu9o8b] {
    color: #FF6666;
}

.btn-quitar-archivo:hover[b-0u69iu9o8b] {
    color: #FF0000;
}

/* ═══ ERROR ═══ */
.modal-req-error[b-0u69iu9o8b] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: #000000;
    font-size: var(--texto-9pt);
    margin-bottom: 0.75rem;
}

/* ═══ FOOTER ═══ */
.modal-req-footer[b-0u69iu9o8b] {
    padding: 0.94rem 0 0 0;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-req-footer .boton:first-of-type[b-0u69iu9o8b] {
    background-color: #808080;
    color: #FFFFFF;
}

.modal-req-footer .boton:first-of-type:hover[b-0u69iu9o8b] {
    background-color: #666666;
}

.modal-req-footer .btn-guardar[b-0u69iu9o8b] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.modal-req-footer .btn-guardar:hover[b-0u69iu9o8b] {
    background-color: #45A049;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .modal-req-content[b-0u69iu9o8b] {
        max-width: 100%;
        max-height: 95vh;
    }

    .modal-req-row[b-0u69iu9o8b] {
        flex-direction: column;
        gap: 0;
    }

    .modal-req-deptos-lista[b-0u69iu9o8b] {
        max-height: 10rem;
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalTerminado.razor.rz.scp.css */
/*
   ModalTerminado.razor.css
   Modal para marcar un requerimiento como terminado.
*/

/* ===== MODAL OVERLAY ===== */
.modal-overlay[b-25zd7cpu7b] {
    position: fixed;                          /* Posición fija */
    top: 0;                                   /* Arriba */
    left: 0;                                  /* Izquierda */
    right: 0;                                 /* Derecha */
    bottom: 0;                                /* Abajo */
    background-color: rgba(0, 0, 0, 0.4);     /* Fondo semi-transparente */
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    justify-content: center;                  /* Centrado horizontal */
}

/* ===== MODAL CONTENT ===== */
.modal-content[b-25zd7cpu7b] {
    border: 1px solid #FFFFFF;                /* Borde blanco estandar */
    border-radius: 0;                         /* Sin bordes redondeados */
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5); /* Sombra estandar */
    width: 90%;                               /* Ancho 90% */
    max-width: 31.25rem;                      /* Máximo (500px) */
    display: flex;                            /* Flexbox */
    flex-direction: column;                   /* Dirección columna */
    background-color: #90EE90;                /* Verde claro (LightGreen) */
}

.modal-large[b-25zd7cpu7b] {
    max-width: 43.75rem;                      /* Máximo (700px) */
}

/* ===== MODAL HEADER ===== */
.modal-header[b-25zd7cpu7b] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-bottom: 0px solid #808080;         /* Sin divisor */
    display: flex;                            /* Flexbox */
    justify-content: space-between;           /* Espacio entre elementos */
    align-items: center;                      /* Centrado vertical */
    background-color: inherit;                /* Hereda fondo */
}

.modal-header h3[b-25zd7cpu7b] {
    margin: 0;                                /* Sin margen */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    font-weight: bold;                        /* Negritas */
    color: #000000;                           /* Negro */
}

/* ===== MODAL BODY ===== */
.modal-body[b-25zd7cpu7b] {
    padding: 0.94rem;                         /* Padding (15px) */
    overflow-y: auto;                         /* Scroll vertical */
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    color: #000000;                           /* Negro */
    line-height: 1.1;                         /* Altura de línea compacta */
}

.modal-body p[b-25zd7cpu7b] {
    margin: 0.125rem 0;                       /* Margen (2px) */
}

/* ===== FORM GROUP ===== */
.form-group[b-25zd7cpu7b] {
    margin: 0.75rem 0;                        /* Margen (12px) */
}

.form-group label[b-25zd7cpu7b] {
    display: block;                           /* Bloque */
    margin-bottom: 0.25rem;                   /* Margen inferior (4px) */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
}

.form-control[b-25zd7cpu7b] {
    width: 100%;                              /* Ancho completo */
    margin-top: 0.625rem;                     /* Margen superior (10px) */
    padding: 0.25rem 0.375rem;                /* Padding (4px 6px) */
    border: 1px solid #808080;                /* Borde gris */
    font-size: var(--texto-9pt);              /* Tamaño 9pt */
    box-sizing: border-box;                   /* Box sizing */
    background-color: #FFFFFF;                /* Blanco */
}

/* Eliminar el resplandor azul/morado de Bootstrap al hacer focus */
.form-control:focus[b-25zd7cpu7b] {
    box-shadow: none !important;              /* Sin sombra Bootstrap */
}

textarea.form-control[b-25zd7cpu7b] {
    resize: vertical;                         /* Solo redimensiona vertical */
    min-height: 5rem;                         /* Altura mínima (80px) */
}

/* ===== MODAL FOOTER ===== */
.modal-footer[b-25zd7cpu7b] {
    padding: 0.625rem 0.94rem;                /* Padding (10px 15px) */
    border-top: 0px solid #FFFFFF;            /* Divisor blanco estandar */
    display: flex;                            /* Flexbox */
    justify-content: flex-end;                /* Alineado derecha */
    background-color: inherit;                /* Hereda fondo */
}

/* ===== BOTONES ===== */
.btn-anexar-modal[b-25zd7cpu7b] {
    background-color: #E0E0FF;                /* Lavanda claro */
}

.btn-cancelar-modal[b-25zd7cpu7b] {
    background-color: #D0D0D0;                /* Gris claro */
}

.btn-confirmar-modal[b-25zd7cpu7b] {
    background-color: var(--color-home);      /* Verde del módulo Home */
    color: #FFFFFF;                           /* Blanco */
}

/* ===== ARCHIVOS ANEXADOS ===== */
.archivos-anexados-lista[b-25zd7cpu7b] {
    border: 1px solid #808080;                /* Borde gris */
    padding: 0.5rem;                          /* Padding (8px) */
    background-color: #FFFFFF;                /* Blanco */
    max-height: 7.5rem;                       /* Máximo (120px) */
    overflow-y: auto;                         /* Scroll vertical */
}

.archivo-anexado-item[b-25zd7cpu7b] {
    display: flex;                            /* Flexbox */
    align-items: center;                      /* Centrado vertical */
    gap: 0.375rem;                            /* Gap (6px) */
    padding: 0.25rem;                         /* Padding (4px) */
    border-bottom: 1px solid #E0E0E0;         /* Borde inferior gris claro */
    background-color: #F9F9F9;                /* Gris muy claro */
}

.archivo-anexado-item:last-child[b-25zd7cpu7b] {
    border-bottom: none;                      /* Sin borde en último */
}

.archivo-anexado-item .archivo-nombre[b-25zd7cpu7b] {
    flex: 1;                                  /* Ocupa espacio */
    font-size: var(--texto-8pt);              /* Tamaño 8pt */
    color: #228B22;                           /* Verde (ForestGreen) */
    font-weight: normal;                      /* Sin negritas */
    word-break: break-all;                    /* Corta palabras largas */
}

.archivo-anexado-item .archivo-tamano[b-25zd7cpu7b] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris */
    white-space: nowrap;                      /* Sin salto de línea */
}

/* ===== TEXTO DE AYUDA PEQUEÑO ===== */
.texto-ayuda-pequeño[b-25zd7cpu7b] {
    font-size: var(--texto-7pt);              /* Tamaño 7pt */
    color: #666666;                           /* Gris */
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalUsuarioABC.razor.rz.scp.css */
/* ============================================================
   MODAL USUARIO ABC - Alta/Edicion de Usuario

   Dos layouts:
   - POPUP: usa .para-popup-* como prefijo
   - INLINE (UtiDatos): usa .para-inline-* como prefijo
   ============================================================ */

/* ============================================================
   SECCION 1: POPUP
   ============================================================ */

.para-popup-overlay[b-3s49lbj8ot] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.para-popup-content[b-3s49lbj8ot] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background-color: #696969;
    overflow: hidden;
}

.para-popup-header[b-3s49lbj8ot] {
    padding: 0.625rem 0.94rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.para-popup-header h3[b-3s49lbj8ot] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.para-popup-header .boton-x[b-3s49lbj8ot] {
    color: #FFFFFF;
}

.para-popup-header .boton-x:hover[b-3s49lbj8ot] {
    color: #FFFFFF;
    opacity: 0.7;
}

.para-popup-body[b-3s49lbj8ot] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.para-popup-footer[b-3s49lbj8ot] {
    padding: 0.94rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.para-popup-footer .boton:first-of-type[b-3s49lbj8ot] {
    background-color: #808080;
    color: #FFFFFF;
}

.para-popup-footer .boton:first-of-type:hover[b-3s49lbj8ot] {
    background-color: #666666;
}

.para-popup-footer .boton:last-of-type[b-3s49lbj8ot] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.para-popup-footer .boton:last-of-type:hover[b-3s49lbj8ot] {
    background-color: #45A049;
}

.para-popup-grupo[b-3s49lbj8ot] {
    margin-bottom: 0.75rem;
}

.para-popup-grupo label[b-3s49lbj8ot] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.para-popup-input[b-3s49lbj8ot],
.para-popup-select[b-3s49lbj8ot],
.para-popup-input-small[b-3s49lbj8ot],
.para-popup-select-fecha[b-3s49lbj8ot] {
    padding: 0.5rem;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    font-size: var(--texto-9pt);
    box-sizing: border-box;
}

.para-popup-input[b-3s49lbj8ot],
.para-popup-select[b-3s49lbj8ot] {
    width: 100%;
}

.para-popup-input-small[b-3s49lbj8ot] {
    width: 6rem;
}

.para-popup-select-fecha[b-3s49lbj8ot] {
    width: auto;
}

.para-popup-input:disabled[b-3s49lbj8ot],
.para-popup-select:disabled[b-3s49lbj8ot],
.para-popup-input-small:disabled[b-3s49lbj8ot],
.para-popup-select-fecha:disabled[b-3s49lbj8ot] {
    background-color: #E0E0E0;
    color: #666666;
}

.para-popup-row-2col[b-3s49lbj8ot] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.para-popup-checkbox[b-3s49lbj8ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.para-popup-checkbox input[type="checkbox"][b-3s49lbj8ot] {
    width: 1.1rem;
    height: 1.1rem;
}

.para-popup-checkbox span[b-3s49lbj8ot] {
    font-size: var(--texto-9pt);
    color: #FFFFFF;
}

.para-popup-radio-container[b-3s49lbj8ot] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.para-popup-radio-label[b-3s49lbj8ot] {
    font-weight: normal;
    font-size: var(--texto-9pt);
    color: #FFFFFF;
    cursor: pointer;
}

.para-popup-fecha[b-3s49lbj8ot] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.para-popup-datos-adicionales[b-3s49lbj8ot] {
    margin-top: 0.5rem;
}

.para-popup-nota[b-3s49lbj8ot] {
    font-size: var(--texto-8pt);
    color: #FFCC00;
    display: block;
    margin-top: 0.25rem;
}

.para-popup-error[b-3s49lbj8ot] {
    color: #FF6666;
    font-size: var(--texto-8pt);
    display: block;
    margin-top: 0.25rem;
}

/* Contenedor de errores POPUP - arriba del footer */
.para-popup-errores[b-3s49lbj8ot] {
    margin: 0.5rem 0;
}

/* Solo mostrar estilos cuando hay errores visibles */
.para-popup-errores:has(li)[b-3s49lbj8ot],
.para-popup-errores:has(div)[b-3s49lbj8ot] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    color: #000000;
    font-size: var(--texto-9pt);
    text-align: left;
}

.para-popup-errores ul[b-3s49lbj8ot] {
    margin: 0;
    padding-left: 1.25rem;
}

.para-popup-errores li[b-3s49lbj8ot] {
    margin: 0;
}

.para-popup-errores > div[b-3s49lbj8ot] {
    margin: 0;
}


/* --- Responsive POPUP --- */
@media (max-width: 768px) {
    .para-popup-row-2col[b-3s49lbj8ot] {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SECCION 2: INLINE (UtiDatos)
   ============================================================ */

.para-inline-panel[b-3s49lbj8ot] {
    margin: 1.25rem auto;
    max-width: 100%;
    padding: 0 1rem;
}

.para-inline-titulo[b-3s49lbj8ot] {
    font-size: var(--texto-12pt);
    font-weight: bold;
    color: var(--color-tools);
    border-bottom: 2px solid var(--color-tools);
    padding-bottom: 0.25rem;
    margin: 1rem 0 0.75rem 0;
}

.para-inline-row[b-3s49lbj8ot] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    align-items: flex-start;
    gap: 0.5rem;
}

.para-inline-label[b-3s49lbj8ot] {
    min-width: 10rem;
    max-width: 10rem;
    text-align: right;
    padding-right: 0.5rem;
    font-size: var(--texto-10pt);
    color: #000000;
    flex-shrink: 0;
}

.para-inline-input-container[b-3s49lbj8ot] {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.para-inline-input[b-3s49lbj8ot],
.para-inline-select[b-3s49lbj8ot] {
    width: 100%;
    max-width: 28rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.para-inline-input-wide[b-3s49lbj8ot] {
    width: 100%;
    max-width: 28rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.para-inline-input-small[b-3s49lbj8ot] {
    width: 5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
    box-sizing: border-box;
}

.para-inline-select-fecha[b-3s49lbj8ot] {
    padding: 0.25rem;
    border: 1px solid #808080;
    font-size: var(--texto-10pt);
}

.para-inline-fecha[b-3s49lbj8ot] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.para-inline-checkbox[b-3s49lbj8ot] {
    font-size: var(--texto-10pt);
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.para-inline-radio-container[b-3s49lbj8ot] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.para-inline-radio-label[b-3s49lbj8ot] {
    font-weight: normal;
    font-size: var(--texto-10pt);
    color: #000000;
    cursor: pointer;
}

.para-inline-hint[b-3s49lbj8ot] {
    font-size: var(--texto-8pt);
    color: #666666;
    margin-top: 0.25rem;
}

.para-inline-hint a[b-3s49lbj8ot] {
    color: #0000EE;
    text-decoration: underline;
}

.para-inline-asterisk[b-3s49lbj8ot] {
    color: #FF0000;
    font-weight: bold;
    margin-left: 0.25rem;
    font-size: var(--texto-10pt);
}

.para-inline-boton-row[b-3s49lbj8ot] {
    margin-top: 1rem;
}

.para-inline-boton[b-3s49lbj8ot] {
    background-color: var(--color-tools);
    color: #FFFFFF;
    padding: 0.5rem 2rem;
    border: none;
    cursor: pointer;
    font-size: var(--texto-10pt);
}

.para-inline-boton:hover[b-3s49lbj8ot] {
    background-color: #505050;
}

/* Contenedor de errores INLINE - letra roja sin fondo */
.para-inline-errores[b-3s49lbj8ot] {
    margin: 0.75rem 0;
    margin-left: 10.5rem;
    color: #FF0000;
    font-weight: bold;
    font-size: var(--texto-10pt);
}

.para-inline-errores ul[b-3s49lbj8ot] {
    margin: 0;
    padding-left: 1.25rem;
}

.para-inline-errores li[b-3s49lbj8ot] {
    margin: 0;
}

.para-inline-errores > div[b-3s49lbj8ot] {
    margin: 0;
}

/* --- Responsive INLINE --- */
@media (max-width: 768px) {
    .para-inline-row[b-3s49lbj8ot] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .para-inline-label[b-3s49lbj8ot] {
        min-width: 100%;
        max-width: 100%;
        text-align: left;
        padding-right: 0;
        font-weight: bold;
    }

    .para-inline-input-container[b-3s49lbj8ot] {
        width: 100%;
    }

    .para-inline-input-wide[b-3s49lbj8ot] {
        max-width: 100%;
        width: 100%;
    }

    .para-inline-input-small[b-3s49lbj8ot] {
        width: 6rem;
    }

    .para-inline-select-fecha[b-3s49lbj8ot] {
        flex: 1;
        min-width: 4rem;
    }
}
/* _content/SiREI_2026/Components/Pages/Modulos/ModalUsuarioOnOff.razor.rz.scp.css */
/* ============================================================
   MODAL USUARIO ON/OFF - Desactivar/Activar/Baja/Reactivar/Eliminar
   ============================================================ */

.modal-overlay[b-cfttuf2q55] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content[b-cfttuf2q55] {
    border: 1px solid #FFFFFF;
    border-radius: 0;
    box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 25rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cfttuf2q55] {
    padding: 0.625rem 0.94rem;
    border-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: inherit;
}

.modal-header h3[b-cfttuf2q55] {
    margin: 0;
    font-size: var(--texto-11pt);
    font-weight: bold;
    color: #FFFFFF;
}

.boton-x[b-cfttuf2q55] {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.boton-x:hover[b-cfttuf2q55] {
    opacity: 0.7;
}

.modal-body[b-cfttuf2q55] {
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    font-size: var(--texto-10pt);
    text-align: center;
    color: #FFFFFF;
}

.modal-body p[b-cfttuf2q55] {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.modal-footer[b-cfttuf2q55] {
    padding: 0.94rem;
    border-top: 0px;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    background-color: inherit;
    flex-wrap: wrap;
}

/* ============================================================
   VARIANTES DE MODAL
   ============================================================ */

/* Gris - acciones reversibles (desactivar, activar) */
.modal-desactivar[b-cfttuf2q55] {
    background-color: #696969;
}

/* Naranja oscuro - baja lógica */
.modal-baja[b-cfttuf2q55] {
    background-color: #8B4513;
}

/* Rojo oscuro - eliminar */
.modal-eliminar[b-cfttuf2q55] {
    background-color: #8B0000;
}

/* ============================================================
   ALERTAS
   ============================================================ */

.alerta-movimientos[b-cfttuf2q55] {
    background-color: #FFCCCC;
    border: 1px solid #FF6666;
    border-radius: 4px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--texto-9pt);
    color: #000000;
    text-align: left;
    margin-bottom: 1rem;
}

.alerta-icono[b-cfttuf2q55] {
    color: #8B0000;
    font-size: 1.2rem;
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn-cancelar-modal[b-cfttuf2q55] {
    background-color: #808080;
    color: #FFFFFF;
}

.btn-cancelar-modal:hover[b-cfttuf2q55] {
    background-color: #666666;
}

.btn-confirmar-desactivar[b-cfttuf2q55] {
    background-color: #FF6666;
    color: #000000;
}

.btn-confirmar-desactivar:hover[b-cfttuf2q55] {
    background-color: #FF4444;
}

.btn-confirmar-activar[b-cfttuf2q55] {
    background-color: #4CAF50;
    color: #FFFFFF;
}

.btn-confirmar-activar:hover[b-cfttuf2q55] {
    background-color: #45A049;
}

.btn-confirmar-eliminar[b-cfttuf2q55] {
    background-color: #FF4444;
    color: #FFFFFF;
}

.btn-confirmar-eliminar:hover[b-cfttuf2q55] {
    background-color: #FF2222;
}

.btn-cancelar-modal:disabled[b-cfttuf2q55],
.btn-confirmar-desactivar:disabled[b-cfttuf2q55],
.btn-confirmar-activar:disabled[b-cfttuf2q55],
.btn-confirmar-eliminar:disabled[b-cfttuf2q55] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* _content/SiREI_2026/gadgets/SiREIgauge.razor.rz.scp.css */
/*
   SiREIgauge.razor.css
   Componente de gauge (medidor) tipo velocímetro para dashboards.
*/

/* ===== CONTENEDOR EXTERNO ===== */
.gauge-external-wrapper[b-s77vbjgfyz] {
    margin: auto;                             /* Centrado automático */
    text-align: center;                       /* Texto centrado */
    display: inline-block;                    /* Inline block */
}

/* ===== TÍTULO DEL GAUGE ===== */
.gauge-title[b-s77vbjgfyz] {
    display: block;                           /* Bloque */
    margin-bottom: 0.5rem;                    /* Margen inferior (8px) */
    font-size: var(--texto-11pt);             /* Tamaño 11pt */
    color: #444444;                           /* Gris oscuro */
}

/* ===== SVG ===== */
.gauge-svg[b-s77vbjgfyz] {
    width: 100%;                              /* Ancho completo */
    display: block;                           /* Bloque */
}

/* ===== ARCOS ===== */
/* Estilo común para los dos arcos (fondo y valor) */
.gauge-path-base[b-s77vbjgfyz] {
    fill: none;                               /* Sin relleno */
    stroke-width: 12;                         /* Grosor de trazo SVG */
    stroke-linecap: round;                    /* Extremos redondeados */
}

/* Solo para el arco gris de fondo */
.gauge-track[b-s77vbjgfyz] {
    stroke: #E0E0E0;                          /* Gris claro */
}

/* Solo para el arco que se anima */
.gauge-bar[b-s77vbjgfyz] {
    transition: stroke-dasharray 1s ease-out, stroke 0.6s ease; /* Animación suave */
}

/* ===== TEXTO CENTRAL ===== */
.gauge-value-text[b-s77vbjgfyz] {
    text-anchor: middle;                      /* Anclaje centrado */
    font-weight: bold;                        /* Negritas */
    font-size: var(--texto-10pt);             /* Tamaño 10pt (~14px) */
    fill: #333333;                            /* Gris oscuro */
}