/* _content/RGCloudsUI/Components/Comunes/Board.razor.rz.scp.css */
/* ---- Contenedor Principal con Degradado Suave ---- */
.dashboard-container-light[b-y52fvip1es] {
    padding: 24px;
    min-height: 100vh;
    /* El degradado suave morado */
    background: linear-gradient(135deg, #004e92, #009dff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Rejilla (Grid) del Dashboard ---- */
.dashboard-grid[b-y52fvip1es] {
    display: grid;
    /* Esto lo hace responsive: 2 columnas en pantallas grandes, 1 en pequeñas */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px; /* Espacio entre las tarjetas */
}

/* ---- Tarjeta / Widget (Estilo "Montado") ---- */
.dashboard-widget[b-y52fvip1es] {
    background-color: #ffffff;
    border-radius: 12px; /* Esquinas redondeadas */
    padding: 24px;
    /* Esta es la clave del efecto "montado": la sombra */
    /* Sombra suave con un ligero tinte morado para integrarse */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(124, 58, 237, 0.07);
    transition: all 0.3s ease; /* Transición suave para el hover */
}

    /* Efecto al pasar el mouse: se levanta un poco más */
    .dashboard-widget:hover[b-y52fvip1es] {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(124, 58, 237, 0.1);
    }

/* ---- Estilos de Texto dentro de las Tarjetas ---- */
.widget-header[b-y52fvip1es] {
    margin: 0 0 16px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #4c1d95; /* Morado oscuro para el título */
}

/* KPI (Key Performance Indicator) - El número grande */
.widget-kpi[b-y52fvip1es] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #7c3aed; /* Morado principal */
    margin-bottom: 16px;
    line-height: 1.1;
}

/* Lista de sub-datos */
.widget-sub-list[b-y52fvip1es] {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #6b7280; /* Gris para el texto secundario */
}

    .widget-sub-list li[b-y52fvip1es] {
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }

        .widget-sub-list li strong[b-y52fvip1es] {
            color: #374151; /* Gris más oscuro para el dato */
            font-weight: 600;
        }
/* _content/RGCloudsUI/Components/Comunes/CTBGridMov.razor.rz.scp.css */

/* Reemplaza: style="text-align:left;font-weight:bold; width:100%;color:blue" */
.summary-label-blue[b-v7n1zb3ya1] {
    text-align: left;
    font-weight: bold;
    width: 100%;
    color: blue;
}

/* Si 'AlignTextRight' y 'AlignTextRight2' no son clases de Bootstrap 
  y necesitas alinear a la derecha, usa 'text-end' (Bootstrap 5)
  o '.text-right' (Bootstrap 4)
*/
.text-end[b-v7n1zb3ya1] {
    text-align: right !important;
}

.w-100[b-v7n1zb3ya1] {
    width: 100%;
}






/*
.k-grid-header .k-header {
    font-family: 'Segoe UI';
    color: blue;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
    cursor: default;
}



.myclassTipoCuenta1 {
    background-color: #9edbf7;
    color: black;
}

.myclassTipoCuenta2 {
    background-color: #eccff7;
    color: black;
}

.myclassTipoCuenta3 {
    background-color: #f2f7b4;
    color: black;
}

.myclassTipoCuenta4 {
    background-color: #baf2ca;
    color: black;
}

.myclassTipoCuenta5 {
    background-color: #f2d2f2;
    color: black;
}


.myclassTipoCuenta6 {
    background-color: #f9d1e1;
    color: black;
}


.myclassBordeRequiereAplicacion {
    border: solid;
    border-color: red;
    color: black;
}

.myclassBordeDefaut {
    border: none;
    border-color: none;
    color: black;
}
*/
/* _content/RGCloudsUI/Components/Comunes/Empresas.razor.rz.scp.css */
/* Contenedor principal para las tarjetas (VERSIÓN GRID) */
.empresa-card-container[b-964ggaye3u] {
    display: grid;
    /* Crea columnas automáticas:
      - Mínimo de 180px de ancho.
      - Máximo de 1fr (se estiran para llenar el espacio).
    */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px; /* Espacio entre tarjetas */
    padding: 20px;
}

/* Estilo base de cada tarjeta */
.empresa-card[b-964ggaye3u] {
    /* Ya NO lleva 'width: 180px;' porque el Grid lo controla */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Asegura que el contenido respete el borde redondeado */
    background-color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column; /* Apila el logo y la info verticalmente */
}

    .empresa-card:hover[b-964ggaye3u] {
        transform: translateY(-5px); /* Efecto de levantar al pasar el mouse */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

/* Contenedor del logo */
.empresa-logo-wrapper[b-964ggaye3u] {
    height: 120px; /* Altura fija para el área del logo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Estilo del logo (imagen) */
.empresa-logo[b-964ggaye3u] {
    max-width: 100%;
    max-height: 90px; /* Altura máxima del logo */
    object-fit: contain; /* Asegura que el logo se vea completo sin deformarse */
}

/* Contenedor de la información (nombre) */
.empresa-info[b-964ggaye3u] {
    padding: 16px;
    text-align: center;
    font-family: Arial, sans-serif;
    /* MODIFICACIÓN: Asegura altura uniforme para todas las tarjetas */
    min-height: 3.2em; /* Espacio para aprox. 2 líneas de texto */
    /* Centra el texto verticalmente si solo hay 1 línea */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .empresa-info strong[b-964ggaye3u] {
        font-size: 1.1em;
        color: #333; /* Color de texto por defecto */
    }


/* --- LOS COLORES (15 Opciones Vivas) --- */

/* 1. Rojo */
.card-color-1[b-964ggaye3u] {
    background-color: #ffebee;
}

    .card-color-1 .empresa-info strong[b-964ggaye3u] {
        color: #c62828;
    }

/* 2. Rosa */
.card-color-2[b-964ggaye3u] {
    background-color: #fce4ec;
}

    .card-color-2 .empresa-info strong[b-964ggaye3u] {
        color: #ad1457;
    }

/* 3. Púrpura */
.card-color-3[b-964ggaye3u] {
    background-color: #f3e5f5;
}

    .card-color-3 .empresa-info strong[b-964ggaye3u] {
        color: #6a1b9a;
    }

/* 4. Púrpura Oscuro */
.card-color-4[b-964ggaye3u] {
    background-color: #ede7f6;
}

    .card-color-4 .empresa-info strong[b-964ggaye3u] {
        color: #4527a0;
    }

/* 5. Índigo */
.card-color-5[b-964ggaye3u] {
    background-color: #e8eaf6;
}

    .card-color-5 .empresa-info strong[b-964ggaye3u] {
        color: #283593;
    }

/* 6. Azul */
.card-color-6[b-964ggaye3u] {
    background-color: #e3f2fd;
}

    .card-color-6 .empresa-info strong[b-964ggaye3u] {
        color: #1565c0;
    }

/* 7. Azul Claro */
.card-color-7[b-964ggaye3u] {
    background-color: #e1f5fe;
}

    .card-color-7 .empresa-info strong[b-964ggaye3u] {
        color: #0277bd;
    }

/* 8. Cyan */
.card-color-8[b-964ggaye3u] {
    background-color: #e0f7fa;
}

    .card-color-8 .empresa-info strong[b-964ggaye3u] {
        color: #00838f;
    }

/* 9. Teal (Verde azulado) */
.card-color-9[b-964ggaye3u] {
    background-color: #e0f2f1;
}

    .card-color-9 .empresa-info strong[b-964ggaye3u] {
        color: #00695c;
    }

/* 10. Verde */
.card-color-10[b-964ggaye3u] {
    background-color: #e8f5e9;
}

    .card-color-10 .empresa-info strong[b-964ggaye3u] {
        color: #2e7d32;
    }

/* 11. Verde Claro */
.card-color-11[b-964ggaye3u] {
    background-color: #f1f8e9;
}

    .card-color-11 .empresa-info strong[b-964ggaye3u] {
        color: #558b2f;
    }

/* 12. Lima */
.card-color-12[b-964ggaye3u] {
    background-color: #f9fbe7;
}

    .card-color-12 .empresa-info strong[b-964ggaye3u] {
        color: #9e9d24;
    }

/* 13. Amarillo */
.card-color-13[b-964ggaye3u] {
    background-color: #fffde7;
}

    .card-color-13 .empresa-info strong[b-964ggaye3u] {
        color: #f9a825;
    }

/* 14. Ámbar */
.card-color-14[b-964ggaye3u] {
    background-color: #fff8e1;
}

    .card-color-14 .empresa-info strong[b-964ggaye3u] {
        color: #ff8f00;
    }

/* 15. Naranja */
.card-color-15[b-964ggaye3u] {
    background-color: #fff3e0;
}

    .card-color-15 .empresa-info strong[b-964ggaye3u] {
        color: #ef6c00;
    }
/* _content/RGCloudsUI/Components/Comunes/EmpresaV2.razor.rz.scp.css */


.empresa-card-container[b-89y7tkxs6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    background-color: #1f82d7;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* --- INICIO: Efecto Cuaderno --- */
    /* 1. Necesario para posicionar el "lomo" del cuaderno */
    position: relative;
    /* 2. Hacemos más espacio a la izquierda para los agujeros */
    /* Tu padding original era '1rem', lo aumentamos a '2.5rem' */
    padding-left: 2.5rem;
}

    /* 3. Creamos el "lomo" con los agujeros */
    .empresa-card-container[b-89y7tkxs6d]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        /* Ancho de la franja donde irán los agujeros */
        width: 1.6rem; /* Aprox. 25px */
        /* * 4. Dibuja los "agujeros" con un gradiente radial.
     * ¡IMPORTANTE! Asume que el fondo de tu PÁGINA es blanco (#fff).
     * Si el fondo de tu página es de otro color (ej. gris #f0f0f0),
     * cambia el '#fff' de abajo por ese color.
    */
        background-image: radial-gradient( circle at 0.8rem 1.5rem, /* Posición: X (centrado), Y (inicio) */
        #fff 5px, /* Color del agujero (blanco), 5px de radio */
        transparent 6px /* Fin del círculo */
        );
        /* 5. Repite el patrón de agujeros verticalmente */
        background-repeat: repeat-y;
        /* 6. Define el espaciado vertical entre agujeros */
        background-size: 1.6rem 2rem; /* Ancho del lomo, 2rem de espacio vertical */
        /* 7. Asegura que el lomo también tenga el borde redondeado */
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }



/* Tarjeta base */
.empresa-card[b-89y7tkxs6d] {
    width: 300px;
    height: 180px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
}

    /* Hover */
    .empresa-card:hover[b-89y7tkxs6d] {
        transform: scale(1.04);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    /* Brillo sutil */
    .empresa-card[b-89y7tkxs6d]::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(120deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.05) 100%);
        transform: rotate(25deg);
        transition: opacity 0.5s ease;
        opacity: 0;
        pointer-events: none;
    }

    .empresa-card:hover[b-89y7tkxs6d]::after {
        opacity: 1;
        animation: shine-b-89y7tkxs6d 1.2s ease forwards;
    }

@keyframes shine-b-89y7tkxs6d {
    0% {
        transform: translateX(-100%) rotate(25deg);
    }

    100% {
        transform: translateX(100%) rotate(25deg);
    }
}

/* Información */
.empresa-info[b-89y7tkxs6d] {
    z-index: 1;
    margin-bottom: 0.4rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

    /* Nombre de sucursal */
    .empresa-info strong:first-child[b-89y7tkxs6d] {
        font-size: 1.5rem;
        font-weight: 700;
        display: block;
        margin-bottom: 0.2rem;
    }

    /* Referencia */
    .empresa-info strong:last-child[b-89y7tkxs6d] {
        font-size: 1.1rem;
        font-weight: 500;
        color: #e0f0ff;
    }

/* Colores balanceados */
.card-color-1[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
}

.card-color-2[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.card-color-3[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #fc5c7d, #6a82fb);
}

.card-color-4[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #ff6a00, #ee0979);
}

.card-color-5[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #000000, #434343);
}

.card-color-6[b-89y7tkxs6d] {
    background: linear-gradient(45deg, #b22222 0%, #b22222 50%, #0f2027 50%, #0f2027 100%);
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.card-color-7[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #b34700, #ff7f50);
}

.card-color-8[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #f953c6, #b91d73);
}

.card-color-9[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #43cea2, #185a9d);
}

.card-color-10[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #6a0dad, #b57edc);
}

.card-color-11[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #14532d, #3f704d);
}

.card-color-12[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #14532d, #b6862c);
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.card-color-13[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

.card-color-14[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #b6862c, #f5d76e);
}

.card-color-15[b-89y7tkxs6d] {
    background: linear-gradient(135deg, #1a2980, #26d0ce);
}


.empresa-chip[b-89y7tkxs6d] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #dcdcdc, #aaaaaa);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.empresa-chip-logo[b-89y7tkxs6d] {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
    display:block;
}
/* _content/RGCloudsUI/Components/Comunes/Login.razor.rz.scp.css */
/* --- Configuración General --- */
html[b-6l598fn7xa], body[b-6l598fn7xa] {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Contenedor principal (fondo de la página) */
.login-container[b-6l598fn7xa] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #f4f7f6; /* Fondo sobrio */
    padding: 20px; /* Espacio para que no pegue en bordes móviles */
    box-sizing: border-box;
}

/* Layout principal de 2 columnas */
.login-layout[b-6l598fn7xa] {
    display: flex;
    width: 100%;
    max-width: 1100px; /* Ancho máximo del contenedor */
    min-height: 600px;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden; /* Clave para mantener los bordes redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- COLUMNA 1: Panel Informativo (Izquierda) --- */
.info-panel[b-6l598fn7xa] {
    flex-basis: 50%; /* Ocupa la mitad del espacio */
    background: linear-gradient(135deg, #004e92, #009dff);
    color: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    box-sizing: border-box;
    text-align: center; /* Centra todo el texto */
}

.info-logo[b-6l598fn7xa] {
    max-width: 180px; /* Tamaño por defecto para escritorio */
    margin-bottom: 25px;
    filter: brightness(0) invert(1); /* Convierte el logo azul en blanco */
    display: block; /* Asegura centrado */
    margin-left: auto;
    margin-right: auto;
}

.info-panel h2[b-6l598fn7xa] {
    font-weight: 600;
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.info-panel p[b-6l598fn7xa] {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.info-features[b-6l598fn7xa] {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left; /* Alinea el texto de la lista a la izquierda */
    max-width: 300px; /* Ancho máximo para la lista */
    margin-left: auto; /* Centra la lista */
    margin-right: auto; /* Centra la lista */
}

    .info-features li[b-6l598fn7xa] {
        display: flex;
        align-items: center;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .info-features .oi[b-6l598fn7xa] {
        margin-right: 10px;
        font-size: 0.9rem;
        color: #f1c40f; /* Un color de acento */
    }

.info-footer[b-6l598fn7xa] {
    margin-top: auto; /* Empuja esto al fondo del panel */
    padding-top: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
}


/* --- COLUMNA 2: Panel de Login (Derecha) --- */
.login-panel[b-6l598fn7xa] {
    flex-basis: 50%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Contenedor del formulario (ahora transparente) */
.login-card[b-6l598fn7xa] {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

    .login-card h4[b-6l598fn7xa] {
        margin-bottom: 25px;
        color: #333;
        font-weight: 600;
        font-size: 1.8rem;
    }

/* --- ESTILOS DEL FORMULARIO --- */

/* Grupo para el ícono y el campo de texto */
.input-group[b-6l598fn7xa] {
    position: relative;
    margin-bottom: 20px;
}

    /* Posición del ícono */
    .input-group i[b-6l598fn7xa] {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
        pointer-events: none;
        font-size: 1.1em;
    }

    /* Campos de texto redondeados tipo cápsula */
    .input-group .form-control[b-6l598fn7xa] {
        width: 100%;
        padding: 15px 25px 15px 50px; /* Padding para forma de cápsula e ícono */
        border: 1px solid #ccc;
        border-radius: 50px; /* Borde redondeado */
        font-size: 16px;
        transition: border-color 0.3s, box-shadow 0.3s;
        box-sizing: border-box;
        height: auto;
    }

        /* Efecto focus en los campos */
        .input-group .form-control:focus[b-6l598fn7xa] {
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
            outline: none;
        }

/* Mensajes de validación */
.validation-message[b-6l598fn7xa] {
    color: #dc3545;
    font-size: 14px;
    text-align: left;
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    padding-left: 5px;
}

/* Botón de Login (también redondeado) */
.btn-login[b-6l598fn7xa] {
    width: 100%;
    padding: 12px;
    background-color: #00529B;
    color: white;
    border: none;
    border-radius: 50px; /* Borde redondeado */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    .btn-login:hover[b-6l598fn7xa] {
        background-color: #004a8d;
        transform: translateY(-2px);
    }


/* --- RESPONSIVIDAD (MÓVILES) --- */
@media (max-width: 992px) {
    .login-layout[b-6l598fn7xa] {
        flex-direction: column; /* Apila las columnas */
        width: 95%;
        max-width: 500px;
        min-height: auto;
        margin: 20px auto; /* Centra el layout en pantallas pequeñas */
    }

    .info-panel[b-6l598fn7xa] {
        flex-basis: auto; /* Resetea la base */
        padding: 40px;
        text-align: center;
    }

    .info-logo[b-6l598fn7xa] {
        max-width: 140px; /* <-- LOGO MÁS PEQUEÑO PARA MÓVIL */
        margin-left: auto;
        margin-right: auto;
    }

    .info-features[b-6l598fn7xa] {
        text-align: left;
        max-width: 300px;
        margin: 20px auto 0 auto; /* Asegura el centrado de la lista en móvil */
    }

    .info-footer[b-6l598fn7xa] {
        margin-top: 30px;
    }

    .login-panel[b-6l598fn7xa] {
        flex-basis: auto;
        padding: 40px 30px; /* Menos padding lateral en móvil */
    }
}
/* _content/RGCloudsUI/Components/Comunes/Menuusuario.razor.rz.scp.css */
/*
    Estilos para NativeMenu.razor
*/
/*.native-menu-container {
    width: 100%;*/ /* Ancho del menú */
    /*height:100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #fdfdfd;*/
    /* 1. Altura máxima:
       No será más alto que el 100% de la altura de la ventana (vh). */
   /* max-height: 100vh;*/
    /* 2. Scroll automático:
       Añade un scroll vertical SÓLO si el contenido se desborda. */
    /*overflow-y: auto;*/
    /* Alternativa más robusta si tienes un cabezal de 60px */
    /*max-height: calc(100vh - 0px);
}*/

    /* Estilo para la lista raíz (ul).
    Eliminamos el padding por defecto para que se alinee con el contenedor.
*/
    /*.native-menu-container > ul {
        padding-left: 0;
        margin: 0;
    }*/


.native-menu-container[b-kfkqrd361o] {
    width: 100%;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(to bottom right, #ffffff, #f7f9fc);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    overflow-y: auto;
    max-height: calc(100vh - 0px);
    transition: box-shadow 0.3s ease;
}

    .native-menu-container:hover[b-kfkqrd361o] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .native-menu-container > ul[b-kfkqrd361o] {
        padding-left: 0;
        margin: 0;
    }
/* _content/RGCloudsUI/Components/Comunes/NativeMenuItem.razor.rz.scp.css */
/*
    Estilos para NativeMenuItem.razor
*/

/* 1. Estilo base para todos los 'li' (elimina viñetas) */
/*li {
    list-style-type: none;*/ /* Quita los puntos (bullets) */
    /*margin: 2px 0;
}*/

/* 2. Estilo para la lista anidada (indentación) */
/*ul {
    list-style-type: none;
    padding-left: 20px;*/ /* Esta es la indentación de los hijos */
    /*margin: 4px 0;
}*/

/* 3. Estilo para los items que son enlaces (hijos) */
/*a {
    display: block;*/ /* Ocupa todo el ancho */
    /*padding: 8px 12px;
    text-decoration: none;*/ /* Quita el subrayado */
    /*color: #0056b3;
    border-radius: 5px;
}

    a:hover {
        background-color: #f0f0f0;
        color: #000;
    }*/

/* 4. Estilo para los items que son padres (carpetas) */
/*summary {
    display: block;*/ /* Ocupa todo el ancho */
    /*padding: 8px 12px;
    font-weight: 600;*/ /* Letra en negrita */
    /*cursor: pointer;
    border-radius: 5px;
}

    summary:hover {
        background-color: #e9e9e9;
    }*/

    /* 5. Eliminamos el triángulo/marcador por defecto de <details> */
    /*summary::marker {
        display: none;*/ /* Chrome/Firefox */
    /*}

summary {
    list-style: none;*/ /* Safari */
/*}*/

    /* 6. (Opcional) Añadimos nuestro propio indicador (flecha) */
    /*summary::before {
        content: '► ';*/ /* Flecha colapsada */
        /*font-size: 0.8em;
        margin-right: 6px;
        transition: transform 0.1s ease-in-out;
        display: inline-block;
    }*/

/* Cuando el <details> está abierto, rota la flecha */
/*:host details[open] > summary::before {
    transform: rotate(90deg);
}*/
li[b-rkz9xsa1fx] {
    list-style-type: none;
    margin: 4px 0;
}

ul[b-rkz9xsa1fx] {
    list-style-type: none;
    padding-left: 20px;
    margin: 6px 0;
}

a[b-rkz9xsa1fx] {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: #1a73e8;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    a:hover[b-rkz9xsa1fx] {
        background-color: #e8f0fe;
        color: #0b3d91;
    }

summary[b-rkz9xsa1fx] {
    display: block;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    background-color: #f1f3f4;
    color: #202124;
    transition: background-color 0.2s ease;
}

    summary:hover[b-rkz9xsa1fx] {
        background-color: #e0e0e0;
    }

    summary[b-rkz9xsa1fx]::marker {
        display: none;
    }

summary[b-rkz9xsa1fx] {
    list-style: none;
}

    summary[b-rkz9xsa1fx]::before {
        content: '► ';
        font-size: 0.8em;
        margin-right: 6px;
        transition: transform 0.2s ease-in-out;
        display: inline-block;
        color: #5f6368;
    }

:host details[open] > summary[b-rkz9xsa1fx]::before {
    transform: rotate(90deg);
}
/* _content/RGCloudsUI/Components/Comunes/Pdfview.razor.rz.scp.css */
/* --- ESTILOS CSS PARA PdfModal.razor --- */

/* El fondo oscuro (overlay) */
.pdf-modal-overlay[b-9d9860pafy] {
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 1000; /* Se asegura de estar al frente */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
    /* Centra el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El contenido de la modal (la caja blanca) */
.pdf-modal-content[b-9d9860pafy] {
    background-color: #fefefe;
    border-radius: 8px;
    width: 80%; /* Ancho de la modal */
    height: 90%; /* Alto de la modal */
    max-width: 1000px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    /* Usamos flexbox para organizar el título/cierre y el visor */
    display: flex;
    flex-direction: column;
    padding: 20px; /* Añadimos padding para separar el botón de cierre */
}

/* El botón para cerrar (la "X") */
.pdf-modal-close[b-9d9860pafy] {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

    .pdf-modal-close:hover[b-9d9860pafy],
    .pdf-modal-close:focus[b-9d9860pafy] {
        color: black;
    }

/* Contenedor del visor PDF */
.pdf-viewer-container[b-9d9860pafy] {
    /* El visor crecerá para llenar el espacio vertical disponible */
    flex-grow: 1;
    width: 100%;
    height: calc(100% - 30px); /* Restamos espacio para el padding/botón de cierre */
    border: 1px solid #ccc;
    margin-top: 15px; /* Separación del botón de cierre */
}

    /* Hacemos que el iframe ocupe todo su contenedor */
    .pdf-viewer-container iframe[b-9d9860pafy] {
        width: 100%;
        height: 100%;
        border: none;
    }
/* _content/RGCloudsUI/Components/Comunes/Proximamente.razor.rz.scp.css */
/* Contenedor principal - Ocupa toda la pantalla */
.coming-soon-container[b-cbl1hqhqo5] {
    display: flex;
    justify-content: center;
    align-items: first baseline;
    min-height: 100vh;
    width: 100vw;
    /* Fondo con degradado azul-violeta para un toque moderno */

    position: fixed; /* Asegura que cubra toda la ventana */
    /*z-index: 9999;*/ /* Para que esté por encima de otros elementos si los hay */
}

/* Tarjeta de bienvenida - El efecto "translúcido" */
.welcome-card[b-cbl1hqhqo5] {
    background-color: rgba(255, 255, 255, 0.15); /* Blanco con 15% de opacidad */
    backdrop-filter: blur(10px); /* Efecto de desenfoque detrás del contenido */
    border-radius: 20px;
    padding: 40px 60px;
    text-align: center;
    color: #ffffff; /* Texto blanco para contrastar con el fondo translúcido */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); /* Sombra sutil para darle profundidad */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde suave */
    max-width: 600px;
    margin: 20px; /* Margen para pantallas más pequeñas */
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.welcome-title[b-cbl1hqhqo5] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra para el título */
}

.coming-soon-text[b-cbl1hqhqo5] {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.coming-soon-big-text[b-cbl1hqhqo5] {
    font-size: 2rem; /* Letras grandes para "Próximamente" */
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 20px;
    color: #ffffff; /* Blanco puro para destacar */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
}

.small-text[b-cbl1hqhqo5] {
    font-size: 1rem;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-title[b-cbl1hqhqo5] {
        font-size: 2.5rem;
    }

    .coming-soon-big-text[b-cbl1hqhqo5] {
        font-size: 3.5rem;
    }

    .welcome-card[b-cbl1hqhqo5] {
        padding: 30px 40px;
    }
}

@media (max-width: 480px) {
    .welcome-title[b-cbl1hqhqo5] {
        font-size: 2rem;
    }

    .coming-soon-big-text[b-cbl1hqhqo5] {
        font-size: 2.8rem;
    }

    .welcome-card[b-cbl1hqhqo5] {
        padding: 20px 30px;
    }
}






/*para nuevo eventos 2025-10-28*/
/* Contenedor principal para la sección de "Próximamente".
  Inspirado en tu 'coming-soon-container'.
*/
.features-container[b-cbl1hqhqo5] {
    max-width: 900px;
    margin: 40px auto; /* Centra el contenedor en la página */
    padding: 20px;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* Títulos */
.features-main-title[b-cbl1hqhqo5] {
    font-size: 2.5rem; /* 40px */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.features-subtitle[b-cbl1hqhqo5] {
    font-size: 1.125rem; /* 18px */
    color: #666;
    margin-bottom: 40px;
}

/* La cuadrícula que organiza las tarjetas.
  Es responsive: se ajusta automáticamente a pantallas más pequeñas.
*/
.features-grid[b-cbl1hqhqo5] {
    display: grid;
    /* Crea columnas que se ajustan solas:
       - Mínimo de 250px de ancho.
       - Máximo 1 fracción (1fr) del espacio disponible.
    */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Espacio entre las tarjetas */
}

/* Estilo de cada tarjeta individual.
  Inspirado en tu 'welcome-card'.
*/
.feature-card[b-cbl1hqhqo5] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

    .feature-card:hover[b-cbl1hqhqo5] {
        transform: translateY(-5px); /* Efecto sutil al pasar el mouse */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

/* Icono o imagen de la característica */
.feature-icon[b-cbl1hqhqo5] {
    font-size: 3rem; /* 48px */
    /* Un color de ejemplo (puedes cambiarlo) */
    color: #007bff;
    margin-bottom: 20px;
}

/* Título de la característica */
.feature-title[b-cbl1hqhqo5] {
    font-size: 1.3rem; /* 20px */
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

/* Descripción corta */
.feature-description[b-cbl1hqhqo5] {
    font-size: 0.95rem; /* 15px */
    color: #555;
    line-height: 1.5;
}

/* La nota al pie sobre los planes */
.features-footer-note[b-cbl1hqhqo5] {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9rem; /* 14px */
    font-style: italic;
    color: #888;
}

/* NOTA: Si usas Font Awesome para los iconos, 
   necesitas importarlo en tu <head> o _Layout.cshtml 
*/
/* _content/RGCloudsUI/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-uz5okve2c2] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-uz5okve2c2] {
    flex: 1;
}

.sidebar[b-uz5okve2c2] {
}

.top-row[b-uz5okve2c2] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-uz5okve2c2]  a, .top-row[b-uz5okve2c2]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-uz5okve2c2]  a:hover, .top-row[b-uz5okve2c2]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-uz5okve2c2]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-uz5okve2c2] {
        justify-content: space-between;
    }

        .top-row[b-uz5okve2c2]  a, .top-row[b-uz5okve2c2]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page[b-uz5okve2c2] {
        flex-direction: row;
    }

    .sidebar[b-uz5okve2c2] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-uz5okve2c2] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-uz5okve2c2]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-uz5okve2c2], article[b-uz5okve2c2] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

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



.texto-3d-navbar[b-uz5okve2c2] {
    Color principal del texto (oscuro, como en tu imagen) color: #333;
    font-weight: bold;
    font-size: 1.1rem;
    Ajusta el tama�o si es necesario Asegura que se alinee bien con el bot�n vertical-align: middle;
    Efecto 3D sutil: Una sombra blanca arriba (brillo) y una oscura abajo (sombra) text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), Brillo 1px 1px 2px rgba(0, 0, 0, 0.4);
    Sombra
}
/* _content/RGCloudsUI/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-aqrp06ijbc] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-aqrp06ijbc] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-aqrp06ijbc] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-aqrp06ijbc] {
    font-size: 1.1rem;
}

.bi[b-aqrp06ijbc] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-aqrp06ijbc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-aqrp06ijbc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-aqrp06ijbc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-aqrp06ijbc] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-aqrp06ijbc] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-aqrp06ijbc] {
        padding-bottom: 1rem;
    }

    .nav-item[b-aqrp06ijbc]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-aqrp06ijbc]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-aqrp06ijbc]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-aqrp06ijbc] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-aqrp06ijbc] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-aqrp06ijbc] {
        display: none;
    }

    .nav-scrollable[b-aqrp06ijbc] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/RGCloudsUI/Components/Plantilla/Ftpos.razor.rz.scp.css */
/* --- 1. Variables de Color (Basadas en tu imagen) --- */
:root[b-tsrlnwto0w] {
    --pos-bg-dark: #2a3f54; /* Fondo principal oscuro */
    --pos-header: #1e2d3b; /* Cabecera/Pie (más oscuro) */
    --pos-list-header: #3c5a78; /* Cabecera de la tabla */
    --pos-list-row: #4f7396; /* Filas de la tabla */
    --pos-total-box: #34495e; /* Caja de "Total Amount" */
    --pos-button-blue: #2980b9; /* Botones azules brillantes */
    --pos-keypad-bg: #ecf0f1; /* Fondo del "teclado" (área de pago) */
    --pos-text-light: #ffffff; /* Texto principal (blanco) */
    --pos-text-accent: #a0d4f6; /* Texto de acento (azul claro) */
}

/* --- 2. Layout Principal --- */
body[b-tsrlnwto0w] {
    background-color: var(--pos-bg-dark); /* Fondo oscuro para todo */
}

.pos-container[b-tsrlnwto0w] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 60px); /* Ajusta 60px si tu navbar es diferente */
    max-width: 1800px;
    margin: auto;
    color: var(--pos-text-light); /* Texto por defecto es blanco */
}

/* --- 3. Panel Izquierdo (Cliente, Búsqueda y Lista) --- */
.product-list-panel[b-tsrlnwto0w] {
    display: flex;
    flex-direction: column;
    gap: 0; /* Unimos las tarjetas */
    overflow: hidden;
    background-color: var(--pos-list-row); /* Fondo para todo el panel */
    border-radius: 8px;
}

/* --- 4. Estilo de Tarjetas (Reemplazo total) --- */
.card[b-tsrlnwto0w] {
    background-color: transparent; /* Fondo transparente */
    border: none;
    border-radius: 0;
    color: var(--pos-text-light);
    box-shadow: none;
    margin-bottom: 0;
}

/* Cabecera de la tarjeta (ej. "Información del Cliente") */
.card-header[b-tsrlnwto0w] {
    background-color: var(--pos-header);
    color: var(--pos-text-light);
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pos-list-header);
    border-radius: 0;
    padding: 1rem;
    font-size: 1.1rem;
    text-align: center;
}

/* Ocultamos la cabecera de "Cliente" para que "Escanear" sea la principal */
.product-list-panel .card:first-child .card-header[b-tsrlnwto0w] {
    display: none;
}

.product-list-panel .card:first-child .card-body[b-tsrlnwto0w] {
    background-color: var(--pos-header); /* Área de cliente más oscura */
    border-radius: 8px 8px 0 0;
}

.card-body[b-tsrlnwto0w] {
    padding: 1.25rem;
}

    /* Quitamos tu estilo en línea */
    .card-body[style*="CFE2FF"][b-tsrlnwto0w] {
        background-color: transparent !important;
    }

/* --- 5. Formularios (Estilo Oscuro) --- */
.form-label[b-tsrlnwto0w] {
    color: var(--pos-text-accent);
    font-weight: normal;
    font-size: 0.9rem;
}

.form-control[b-tsrlnwto0w], .form-select[b-tsrlnwto0w] {
    background-color: #5d7a98; /* Input más oscuro */
    border: 1px solid var(--pos-list-header);
    color: var(--pos-text-light);
    border-radius: 4px;
    padding: 10px 14px;
}

    .form-control[b-tsrlnwto0w]::placeholder {
        color: var(--pos-text-accent);
    }

    .form-control:focus[b-tsrlnwto0w], .form-select:focus[b-tsrlnwto0w] {
        background-color: #5d7a98;
        color: var(--pos-text-light);
        border-color: var(--pos-text-accent);
        box-shadow: none;
    }

/* --- 6. Lista de Productos (Tabla) --- */
.items-wrapper[b-tsrlnwto0w] {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--pos-list-row);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

    .items-wrapper .table[b-tsrlnwto0w] {
        color: var(--pos-text-light);
        margin-bottom: 0;
    }

.table-notebook thead[b-tsrlnwto0w] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-notebook th[b-tsrlnwto0w] { /* Cabecera de la tabla */
    background-color: var(--pos-list-header);
    color: var(--pos-text-light);
    text-transform: uppercase;
    font-size: 0.85rem;
    border: none;
    padding: 1rem;
}

.table-notebook td[b-tsrlnwto0w] { /* Celdas de la tabla */
    background-color: var(--pos-list-row);
    border: none;
    border-bottom: 1px solid var(--pos-list-header); /* Separador de fila */
    padding: 1rem;
    vertical-align: middle;
}

.table-notebook h6[b-tsrlnwto0w] { /* Nombre del producto */
    color: var(--pos-text-light);
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0;
}

/* --- 7. Panel Derecho (Resumen y Pago) --- */
.summary-and-payment-panel[b-tsrlnwto0w] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    height: 100%;
}

    /* Primera tarjeta (Resumen Agrupado y Total a Pagar) */
    .summary-and-payment-panel .card:first-child[b-tsrlnwto0w] {
        background-color: var(--pos-bg-dark); /* Fondo oscuro */
        border-radius: 8px;
        padding: 1rem;
    }

    /* Tabla de Resumen (Subtotal, ITBIS...) */
    .summary-and-payment-panel .table-sm[b-tsrlnwto0w] {
        color: var(--pos-text-light);
        margin-bottom: 1rem;
    }

        .summary-and-payment-panel .table-sm th[b-tsrlnwto0w],
        .summary-and-payment-panel .table-sm td[b-tsrlnwto0w],
        .summary-and-payment-panel .table-sm tfoot td[b-tsrlnwto0w] {
            border: none;
            padding: 0.3rem 0.5rem;
            font-size: 0.9rem;
        }

        .summary-and-payment-panel .table-sm thead[b-tsrlnwto0w] {
            display: none; /* Ocultamos la cabecera, no es necesaria */
        }

        .summary-and-payment-panel .table-sm tfoot td[b-tsrlnwto0w] {
            color: var(--pos-text-accent);
            text-transform: uppercase;
            font-weight: bold;
            padding-top: 10px;
            border-top: 1px solid var(--pos-list-header);
        }

    /* Estilo para "Descuento Total" */
    .summary-and-payment-panel .list-group-item.d-flex[b-tsrlnwto0w] {
        background: transparent;
        border: none;
        padding-left: 0.5rem;
        color: var(--pos-text-light);
    }

/* --- 8. Caja de "TOTAL A PAGAR" --- */
.list-group-item-primary.d-flex.justify-content-between[b-tsrlnwto0w] {
    background-color: var(--pos-total-box); /* Caja de total */
    border: none;
    border-radius: 10px;
    padding: 24px;
    flex-direction: column; /* Apilado vertical */
    align-items: center;
    margin-top: 0;
}

.list-group-item-primary h4:first-child[b-tsrlnwto0w] { /* "Total a Pagar:" */
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--pos-text-accent);
    text-transform: uppercase;
    align-self: center;
    margin-bottom: 10px;
}

.list-group-item-primary h4:last-child[b-tsrlnwto0w] { /* El monto "$7,630.27" */
    margin-bottom: 0;
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--pos-text-light);
}

/* --- 9. Área de Pago (Estilo "Teclado") --- */
.summary-and-payment-panel .card:last-child[b-tsrlnwto0w] {
    background-color: var(--pos-keypad-bg); /* Fondo CLARO */
    color: var(--pos-bg-dark); /* Texto OSCURO */
    border-radius: 8px;
    flex-grow: 1; /* Ocupa el espacio restante */
}

    .summary-and-payment-panel .card:last-child .card-body[b-tsrlnwto0w] {
        background-color: transparent;
        color: var(--pos-bg-dark);
    }

    /* Texto y etiquetas en el área de pago */
    .summary-and-payment-panel .card:last-child .form-label[b-tsrlnwto0w],
    .summary-and-payment-panel .card:last-child strong[b-tsrlnwto0w],
    .summary-and-payment-panel .card:last-child .col[b-tsrlnwto0w] {
        color: var(--pos-bg-dark);
    }

    /* Inputs en el área de pago */
    .summary-and-payment-panel .card:last-child .form-control[b-tsrlnwto0w],
    .summary-and-payment-panel .card:last-child .form-select[b-tsrlnwto0w] {
        background-color: #ffffff;
        border: 1px solid #bdc3c7;
        color: var(--pos-bg-dark);
    }

/* --- 10. Botones de Pago --- */
.btn-primary[b-tsrlnwto0w] {
    background-color: var(--pos-button-blue);
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem;
    font-size: 1.1rem;
}

    .btn-primary:hover[b-tsrlnwto0w] {
        background-color: #3498db;
    }

.btn-success[b-tsrlnwto0w] {
    background-color: #27ae60;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem;
    font-size: 1.1rem;
}

    .btn-success:hover[b-tsrlnwto0w] {
        background-color: #2ecc71;
    }

/* Botón de eliminar producto */
.table-notebook .k-button[b-tsrlnwto0w] {
    background-color: #e74c3c;
    color: white;
}
/* _content/RGCloudsUI/Components/Plantilla/HtmlDocFT.razor.rz.scp.css */
/* Estilos Generales */
body[b-ahup8p3eoi] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4;
}

.invoice-box[b-ahup8p3eoi] {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.invoice-header[b-ahup8p3eoi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.sender-details[b-ahup8p3eoi] {
    font-size: 0.9em;
    color: #555;
}

    .sender-details h1[b-ahup8p3eoi] {
        margin: 0 0 5px 0;
        font-size: 1.5em;
        color: #000;
    }

.invoice-details[b-ahup8p3eoi] {
    text-align: right;
}

    .invoice-details h2[b-ahup8p3eoi] {
        margin: 0 0 10px 0;
        font-size: 1.6em;
        color: #333;
    }

    .invoice-details strong[b-ahup8p3eoi] {
        display: inline-block;
        min-width: 80px;
    }

.customer-details[b-ahup8p3eoi] {
    margin-bottom: 25px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    background: #f9f9f9;
}

    .customer-details div[b-ahup8p3eoi] {
        margin-bottom: 5px;
    }

    .customer-details strong[b-ahup8p3eoi] {
        display: inline-block;
        min-width: 100px;
    }

.items-table[b-ahup8p3eoi] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .items-table thead th[b-ahup8p3eoi] {
        background-color: #f5f5f5;
        border-bottom: 2px solid #ddd;
        padding: 10px 8px;
        text-align: left;
        font-weight: bold;
    }

    .items-table tbody td[b-ahup8p3eoi] {
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
        vertical-align: top;
    }

    .items-table th.text-right[b-ahup8p3eoi], .items-table td.text-right[b-ahup8p3eoi] {
        text-align: right;
    }

.summary-container[b-ahup8p3eoi] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.payment-details[b-ahup8p3eoi], .summary-totals[b-ahup8p3eoi] {
    width: 48%;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

    .payment-details h3[b-ahup8p3eoi], .summary-totals h3[b-ahup8p3eoi] {
        margin: 0;
        padding: 12px 15px;
        background: #f9f9f9;
        border-bottom: 1px solid #e0e0e0;
        font-size: 1.1em;
    }

.summary-table[b-ahup8p3eoi] {
    width: 100%;
    border-collapse: collapse;
}

    .summary-table td[b-ahup8p3eoi] {
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .summary-table tr:last-child td[b-ahup8p3eoi] {
        border-bottom: none;
    }

    .summary-table .total-row td[b-ahup8p3eoi] {
        font-weight: bold;
        font-size: 1.1em;
        background: #f5f5f5;
    }

.invoice-footer[b-ahup8p3eoi] {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    font-size: 0.9em;
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.qr-code[b-ahup8p3eoi] {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
}

    .qr-code img[b-ahup8p3eoi], .qr-code canvas[b-ahup8p3eoi] {
        width: 100% !important;
        height: 100% !important;
    }

.footer-info[b-ahup8p3eoi] {
    text-align: left;
}

.print-button-container[b-ahup8p3eoi] {
    width: 100%;
    max-width: 800px;
    text-align: right;
    margin: 0 auto 15px;
}

    .print-button-container button[b-ahup8p3eoi] {
        padding: 12px 20px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        .print-button-container button:hover[b-ahup8p3eoi] {
            background-color: #0056b3;
        }

@page {
    size: A4;
    margin: 0;
}

@media print {
    body[b-ahup8p3eoi] {
        background-color: #fff;
        padding: 1cm;
    }

    .print-button-container[b-ahup8p3eoi] {
        display: none;
    }

    .invoice-box[b-ahup8p3eoi] {
        box-shadow: none;
        border: none;
        max-width: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Clientes/Allgrupoempresa.razor.rz.scp.css */
body[b-u33u2izvzm] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Clientes/Ciudadyzona.razor.rz.scp.css */
body[b-x2hoe3icj4] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Clientes/Clientes.razor.rz.scp.css */
body[b-26cnt9tum2] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgasignacionnumeroordelumnos.razor.rz.scp.css */
body[b-ogq1ri6f7d] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgasignamateriaacurso.razor.rz.scp.css */
body[b-fng3kclarh] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgasignamateriaaprofesorporcurso.razor.rz.scp.css */
body[b-6fg617rs1x] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgcursos.razor.rz.scp.css */
body[b-l66s40bjok] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgencargadocurso.razor.rz.scp.css */
.k-grid[b-zf9g537g1t] {
    border-width: 2px;
    border-radius: 3px;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgmaterias.razor.rz.scp.css */
body[b-i116da48c4] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/ClgNotaminimaparapasarcurso.razor.rz.scp.css */
body[b-9d1icymbln] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgparametros.razor.rz.scp.css */
body[b-4r8skpwq5z] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgplanespago.razor.rz.scp.css */
body[b-7jbm9nvdz1] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Clgprofesores.razor.rz.scp.css */
body[b-zg8nj5xuc6] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Colegio/Generacionplandepagov2.razor.rz.scp.css */
body[b-l811349oe1] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Contabilidad/Catalogocuenta.razor.rz.scp.css */
body[b-9wk7bg1u8n] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Contabilidad/Centrocosto.razor.rz.scp.css */
body[b-b71sbuomh6] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Contabilidad/MovimientoContabilidad.razor.rz.scp.css */
body[b-k3ry2ehior] {
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Facturacion/Facturacion.razor.rz.scp.css */

/* Estilos base para pantallas grandes (Desktop) */
.pos-container[b-pcht0r6htz] {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    height: calc(100vh - 80px); /* Altura fija para desktop */
    align-items: stretch;
}

.product-list-panel[b-pcht0r6htz] {
    flex: 1.5; /* Ocupa más espacio */
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
}

.items-wrapper[b-pcht0r6htz] {
    flex-grow: 1;
    overflow-y: auto; /* Scroll solo en la lista de items */
    min-height: 0;
}

.summary-and-payment-panel[b-pcht0r6htz] {
    flex: .5; /* Ocupa menos espacio */
    overflow-y: auto; /* Permite scroll si el contenido es mucho */
    padding: 0rem;
}

/* --- CAMBIOS PARA RESPONSIVE --- */
/* Media Query para tablets y móviles (pantallas de menos de 992px) */
@media (max-width: 991.98px) {
    .pos-container[b-pcht0r6htz] {
        flex-direction: column; /* Apila los paneles verticalmente */
        height: auto; /* Altura automática para permitir scroll */
    }

    .product-list-panel[b-pcht0r6htz], .summary-and-payment-panel[b-pcht0r6htz] {
        flex: 1 1 auto; /* Permite que los paneles se ajusten */
        overflow-y: visible; /* Quita el scroll individual */
        padding: 0.5rem; /* Menos padding en pantallas pequeñas */
    }

    .items-wrapper[b-pcht0r6htz] {
        /* En móvil, la altura no debe ser fija para evitar doble scroll */
        overflow-y: visible;
        min-height: 200px; /* Dale una altura mínima para que no colapse si está vacío */
    }
}


/* --- Estilo Hoja de Cuaderno (Mascota) --- */

.table-notebook tbody[b-pcht0r6htz] {
    /* Opcional: Un fondo de color papel muy sutil */
    background-color: #fefefd;
}

    /* Las líneas horizontales pálidas */
    .table-notebook tbody tr td[b-pcht0r6htz] {
        border-bottom: 1px solid #f0f0f0; /* Una línea gris muy pálida */
        padding-top: 0.8rem; /* Más espacio para que el texto "respire" */
        padding-bottom: 0.8rem;
    }

        /* La línea de margen roja a la izquierda */
        .table-notebook tbody tr td:first-child[b-pcht0r6htz] {
            border-left: 2px solid #f9cccc; /* Un rojo pálido como el margen */
            padding-left: 12px; /* Añade espacio después de la línea de margen */
        }

/* Ajusta la cabecera para que combine */
.table-notebook thead th[b-pcht0r6htz] {
    border-bottom-width: 2px; /* Línea más gruesa para la cabecera */
}

/* Evita la doble línea entre la cabecera y el cuerpo */
.table-notebook tbody[b-pcht0r6htz] {
    border-top: none;
}

.mi-input-grande .k-input-inner[b-pcht0r6htz] {
    font-weight: bold;
    font-size: medium; /* <-- Ajusta este valor al tamaño que quieras */
}
/* _content/RGCloudsUI/Components/rgcloudsApp/Facturacion/Maestraproducto.razor.rz.scp.css */
body[b-03syz31slm] {
}