ByteCenter/public/css/styles.css

/* ===== BASE GLOBAL ===== */

/* Fondo vive en html */

html {
    min-height: 100%;
    
    background: linear-gradient(
        180deg,
        #667e8e 0%,
        #425870 25%,
        #24344d 65%,
        #0f172a 100%
    );

    background-repeat: no-repeat;
}

/* Body solo contenido */

body {
    min-height: 100vh;
    background: transparent;
    overflow-y: auto;
}

.container {
    height: auto;
    max-height: none;
    overflow: visible;
}

/* Evita selección de imágenes */
img { 
    user-select: none;
}

/* ===== NAVBAR ===== */

.navbar-dark {
    /* Sombra para separar del contenido */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}



/* ===== COMPONENTES (cards, headers, titulos ===== */

/* Cards */

.card-rounded {
    /* Bordes redondeados */
    border-radius: 20px;
}

.card-shadow {
    /* Sombra mas profunda */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.438);
}

.card {
    /* Evita desbordes internos */
    overflow: hidden;
}

/* Headers */

.header-dark {
    background-color: #212529;
    color: #fff;
}

.card-header {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Títulos */

.title-shadow {
    /* Sombra */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}



/* ===== BOTONES ===== */

.btn-soft-secondary {
    background-color: #6c757d;
    border: none;
}

.btn-soft-secondary:hover {
    background-color: #5a6268;
}

/* Animación global de botones */

.btn {
    /* Transiciones suaves para hover y click */
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.btn:hover {
    /* Efecto elevación */
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}



/* ===== FORMULARIOS – COMPACTO Y SIN NEGRITA ===== */

.form-control,
.form-select {
    font-size: 13.5px;
    padding: 5px 8px;
    border: 1.5px solid #b6c2cf;
    border-radius: 10px;

    /* No usa negrita */
    font-weight: 400;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Labels sin negrita */

.form-label {
    font-size: 12.8px;
    font-weight: 400;
    margin-bottom: 4px;
}

/* Focus sutil */

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: #b6c2cf;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}



/* ===== HOME - INICIO ===== */

.title-presence {
    font-size: 2.5rem !important;
    font-weight: 700 !important;

    /* Sombra para destacar sobre fondo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

    margin-bottom: 0.5rem !important;

    /* Centrado manual */
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.custom-margin-top {
    margin-top: 5rem !important;
}

/* CARDS */

.action-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.45);
    border: none;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.55);
}

/* Compacto */
.card-body-compact {
    padding: 1rem 0.9rem;
}

/* Tipografía */
.card-title {
    font-size: 1.1rem;
    margin-top: 8px;
}

.card-text {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ICONO SOFT (solo vista principal) */
.icon-box-soft {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* colores suaves */
.bg-primary-soft { background-color: rgba(13,110,253,0.15); }
.bg-success-soft { background-color: rgba(25,135,84,0.15); }
.bg-warning-soft { background-color: rgba(255,193,7,0.2); }
.bg-danger-soft { background-color: rgba(220,53,69,0.15); }
.bg-info-soft { background-color: rgba(13,202,240,0.15); }
.bg-secondary-soft { background-color: rgba(108,117,125,0.15); }

/* ICONO SOLIDO (vista negocio) */
.icon-box {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.icon-box i {
    color: #fff;
}

/* colores por modulo */
.bg-clientes { background: #0d6efd; }
.bg-ventas { background: #198754; }
.bg-servicios { background: #fd7e14; }
.bg-presupuestos { background: #6f42c1; }
.bg-productos { background: #20c997; }
.bg-proveedores { background: #dc3545; }
.bg-pedidos { background: #0dcaf0; }

/* animacion */
.action-card:hover .icon-box {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.action-card:hover .icon-box-soft {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}


/* ===== LOGIN ===== */

.bytecenter-gradient {
    /* Gradiente lateral decorativo */
    background: linear-gradient(
        135deg,
        #0f172a,
        #1e3a5f,
        #3b82b8
    );

    border-radius: 16px 0 0 16px;
    height: 100%;
}

.login-box {
    /* Se achica en pantallas angostas */
    max-width: min(1100px, 90vw);
    /* Se adapta a la altura disponible */
    min-height: min(600px, 80vh);
    width: 100%;

    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.438);
    background: white;
}

.login-box h1 a.fw-semibold {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.shadow-heading { 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.input-lg {
    font-size: 1.0rem;
    height: 3.2rem;
}

.form-floating > label {
    font-size: 0.95rem;
}



/* ===== TOAST (mensajes) ===== */

.toast-flotante {
    position: fixed !important;

    bottom: 25px !important;
    left: 25px !important;

    z-index: 1055;

    min-width: 320px;
    max-width: 420px;

    background: #ffffff;
    border-radius: 12px;
    padding: 14px 18px;

    /* Sombra más fuerte */
    box-shadow:
        0 10px 25px rgba(0,0,0,.25),
        0 20px 50px rgba(0,0,0,.35);

    animation: toastIn .35s ease forwards;
}

/* Animación de ENTRADA desde la izquierda */

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de SALIDA hacia la izquierda */

.toast-out {
    animation: toastOut .3s ease forwards;
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-60px);
    }
}



/* ===== FORMULARIO DE CREACIÓN DE VENTA ===== */

/* Labels más chicos */

.label-formventa {
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 1.2;
}

/* Inputs más compactos */

.card-body-scroll .form-control {
    font-size: 0.85rem;
    padding: 4px 8px;
}

.card-body-scroll .form-control-sm {
    font-size: 0.8rem;
    padding: 2px 6px;
}

/* Input de precio con símbolo $ */

.input-precio .input-group-text,
.input-precio .form-control {
    border-radius: 8px;
}

.input-precio .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-precio .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* ===== CHECKBOX DE VENTA ===== */

.form-check-input {
    width: 18px;
    height: 18px;
    border: 1.5px solid #b6c2cf;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Estado hover */

.form-check-input:hover {
    border-color: #86b7fe;
}

/* Estado focus */

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Estado checked */

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}



/* ===== LISTAS ===== */

/* Card */

.card-viewport > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.card-viewport {
    height: auto;
    max-height: none;
}

/* Body flexible */

.card-body-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Zona que scrollea solo si hace falta */

.table-scroll {
    max-height: clamp(100px, 14vh, 400px);
    overflow-y: auto;
}

.table-scroll-backup {
    max-height: clamp(120px, 40vh, 400px);
    overflow-y: auto;
}

.table-scroll-crear {
    max-height: clamp(120px, 21vh, 400px);
    overflow-y: auto;
}


/* ===== LOADER (pantalla de carga) ===== */

/* Overlay principal del loader */

#page-loader {

    /* Lo fija a toda la pantalla (top, right, bottom, left = 0) */
    position: fixed;
    inset: 0;

    /* Fondo oscuro que bloquea interacción */
    background: #0f172a;

    /* Centrado del contenido interno (spinner) */
    display: flex;
    align-items: center; /* centra vertical */
    justify-content: center; /* centra horizontal */

    /* Se asegura de estar por encima de todo */
    z-index: 9999;

    /* Estado inicial visible */
    opacity: 1;

    /* Permite transición suave al ocultarse */
    transition: opacity 0.3s ease;
}

/* Estado cuando el loader se está ocultando */

#page-loader.fade-out {

    /* Lo hace transparente (fade visual) */
    opacity: 0;

    /* Permite interactuar con la UI aunque el loader aún exista */
    pointer-events: none;
}

/* Spinner */

.spinner {

    /* Tamaño del loader */
    width: 48px;
    height: 48px;

    /* Borde circular base (semi transparente) */
    border: 4px solid rgba(255, 255, 255, 0.2);

    /* Borde circular base (semi transparente) */
    border-top-color: #ffffff;

    /* Hace que sea un círculo perfecto */
    border-radius: 50%;

    /* Animación continua de rotación */
    animation: spin 0.8s linear infinite;
}

/* Animación de rotación */

@keyframes spin {

    /* Rota 360 grados constantemente */
    to {
        transform: rotate(360deg);
    }
}



/* ===== DATATABLES ===== */

/* Quitar resaltado azul al hacer click en el paging */

.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: none;
    outline: none;
}

/* Ajustar colores del item activo */

.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #0d6efd; 
    border-color: #0d6efd;
    color: #fff;
}

/* Hover más suave */

.dataTables_wrapper .pagination .page-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
}

.dataTables_info {
    font-size: 13px;
    color: #6c757d;
    padding-top: 0.5rem !important;
}

.dataTables_paginate {
    font-size: 13px;
}



/* ===== INPUT DE PRESUPUESTO ===== */

/* Input porcentaje (recargo / descuento) */

.input-porcentaje {
    display: flex;
}

.input-porcentaje .form-control {
    font-size: 0.85rem;
    padding: 4.5px 8px;
    border-radius: 10px 0 0 10px;
}

.input-porcentaje .input-group-text {
    font-size: 0.85rem;
    padding: 4.5px 8px;
    border-radius: 0 10px 10px 0;
}



/* ===== INPUT DE SERVICIO ===== */

.input-moneda .form-control {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 0 10px 10px 0;
}

.input-moneda .input-group-text {
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 10px 0 0 10px;
}



/* SELECT INFORMES */

.form-select.custom-select.select-informe {
    font-size: 14px;
    padding: 6px 10px;
    padding-right: 1.6rem;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;

    background-position: right 0.5rem center;
    background-size: 12px 12px;

    min-width: 150px;
    transition: 0.2s ease;
}

.form-select.custom-select.select-informe:focus {
    outline: none;
    border-color: #2c2f48;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}



/* TABLAS */

table.dataTable {
    font-size: 14px;
}

table.dataTable thead th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

table.dataTable tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

table.dataTable tbody tr:hover {
    background-color: rgba(0,0,0,0.03);
}

/* Texto Buscar */

.dataTables_filter label {
    font-size: 13px;
}

/* Input de búsqueda */

.dataTables_filter input {
    font-size: 13px;
    padding: 4px 10px;
}

/* Select de columnas */

#columnFilter {
    font-size: 13px;
    padding: 4px 35px 4px 8px;
}

.dataTables_filter input:focus,
#columnFilter:focus {
    outline: none;
    border-color: #2c2f48;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}



/* TABLA RESUMEN VENTA */

.table-resumen-venta {
    font-size: 14px;
}

.table-resumen-venta thead th {
    font-size: 14px;
    font-weight: 600;
}

.table-resumen-venta tbody td {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}



/* README */

.readme-scroll{
    max-height: 70vh;
    overflow-y: auto;
}

/* Titulos dentro del readme */

.readme-container h1,
.readme-container h2,
.readme-container h3{
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Párrafos */

.readme-container p{
    margin-bottom: 10px;
}

/* Listas */

.readme-container ul{
    margin-bottom: 15px;
}

/* Scroll */

.readme-scroll::-webkit-scrollbar{
    width: 8px;
}

.readme-scroll::-webkit-scrollbar-thumb{
    background: #6c757d;
    border-radius: 4px;
}



/* CONTENIDO README */

.readme-scroll h1{
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 15px;
}

.readme-scroll h2{
    font-size: 18px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Borde izquierdo en h3 para darle estructura */
.readme-scroll h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
    border-left: 3px solid #3b82b8;
    padding-left: 8px;
}

/* h4 con color para diferenciarlo del h3 */
.readme-scroll h4 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
    color: #1e3a5f;
}

.readme-index {
    background: #f0f4ff; /* azulado suave */
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #3b82b8; /* borde izquierdo de color */
}

.readme-index ul{
    margin:0;
    padding-left:18px;
}

/* Más aire en el texto */
.readme-scroll p, 
.readme-scroll li {
    line-height: 1.75;
    color: #333;
}

.readme-index a{
    color:#000;
    text-decoration:none;
    font-size:14px;
}

.readme-index a:hover{
    text-decoration:underline;
}

.readme-scroll{
    max-height:70vh;
    overflow-y:auto;
    scroll-behavior:smooth;
}

.readme-index h5{
    color:#000;
    font-weight:700;
}

.readme-index > ul > li{
    margin-bottom:8px;
    font-weight:600;
}

.readme-index ul ul{
    margin-top:4px;
}

.readme-index ul ul li{
    font-weight:400;
}



/* MODALES */

.modal-content{
    border-radius:14px;
}

.modal-content{
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.modal-body{
    font-size:0.95rem;
    color:#4b5563;
}

/* Animación de apertura */

.modal.fade .modal-dialog{
    transform:scale(0.95);
    transition:transform .2s ease;
}

.modal.show .modal-dialog{
    transform:scale(1);
}

.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;

    transform: scale(1.25);
    transform-origin: center;

    width: 100vw;
    height: 100vh;
}




/* Acomoda layout en pantallas con otras resoluciónes */

/* Pantallas chicas */
@media (max-height: 750px) {
    body {
        zoom: 0.9;
    }

    .modal-backdrop {
        position: fixed;
        top: -10vh;
        left: -10vw;
        width: 120vw;
        height: 120vh;
    }
}

/* Pantallas más chicas */
@media (max-height: 650px) {
    body {
        zoom: 0.8;
    }

    .modal-backdrop {
        position: fixed;
        top: -10vh;
        left: -10vw;
        width: 120vw;
        height: 120vh;
    }
}



/* INPUTS NO EDITABLES */

/* Campo no editable */
.campo-readonly {
    cursor: not-allowed;
}

/* Color input desactivado */
select:disabled {
    background-color: #fff !important;
    color: #212529;
    opacity: 1;
    cursor: not-allowed;
}

.campo-readonly:focus {
    outline: none;
    box-shadow: none;
    caret-color: transparent;
}



/* OJO DE CONTRASENIA */
.btn-toggle-password {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    
    border: none;
    background: transparent;

    color: #6c757d;
    font-size: 15px;

    z-index: 10;
    cursor: pointer;

    transition: color 0.2s ease;
}

.btn-toggle-password:hover {
    color: #0d6efd;
}