From ebc7efa4d78d5166deca9f2be0d5db8ad2ca0791 Mon Sep 17 00:00:00 2001 From: Axel Axt Date: Tue, 4 Aug 2026 19:45:02 -0300 Subject: [PATCH] Carpeta css --- public/css/chatbot.css | 120 ++++ public/css/styles.css | 975 +++++++++++++++++++++++++++++++++ public/css/stylesPDF.css | 433 +++++++++++++++ public/css/stylesRemitoPDF.css | 268 +++++++++ 4 files changed, 1796 insertions(+) create mode 100644 public/css/chatbot.css create mode 100644 public/css/styles.css create mode 100644 public/css/stylesPDF.css create mode 100644 public/css/stylesRemitoPDF.css diff --git a/public/css/chatbot.css b/public/css/chatbot.css new file mode 100644 index 0000000..b3856ed --- /dev/null +++ b/public/css/chatbot.css @@ -0,0 +1,120 @@ +.chatbot-body { + + height: 58vh; + + overflow-y: auto; + + padding: 1.5rem; + + background: + linear-gradient( + to bottom, + #f8f9fa, + #ffffff + ); + + display: flex; + + flex-direction: column; + + gap: 1rem; +} + +/* MENSAJES */ + +.mensaje-user, +.mensaje-bot { + + display: flex; + + width: 100%; +} + +.mensaje-user { + + justify-content: flex-end; +} + +.mensaje-bot { + + justify-content: flex-start; +} + +/* BURBUJAS */ + +.mensaje-contenido { + + max-width: 80%; + + padding: 0.85rem 1rem; + + border-radius: 16px; + + font-size: 0.95rem; + + line-height: 1.5; + + word-break: break-word; + + box-shadow: + 0 2px 10px rgba(0,0,0,0.06); +} + +/* USER */ + +.mensaje-user .mensaje-contenido { + + background: #198754; + + color: white; + + border-bottom-right-radius: 4px; +} + +/* BOT */ + +.mensaje-bot .mensaje-contenido { + + background: #f1f3f5; + + color: #212529; + + border-bottom-left-radius: 4px; +} + +/* FOOTER */ + +.chatbot-footer { + + background: white; +} + +/* INPUT */ + +.chatbot-footer .form-control { + + border-radius: 12px 0 0 12px; + + padding: 0.8rem 1rem; +} + +.chatbot-footer .btn { + + border-radius: 0 12px 12px 0; + + width: 60px; +} + +/* SCROLL */ + +.chatbot-body::-webkit-scrollbar { + + width: 8px; +} + +.chatbot-body::-webkit-scrollbar-thumb { + + background: rgba(0,0,0,0.15); + + border-radius: 20px; +} \ No newline at end of file diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..f7cb119 --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,975 @@ +/* ===== 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; +} \ No newline at end of file diff --git a/public/css/stylesPDF.css b/public/css/stylesPDF.css new file mode 100644 index 0000000..7943a33 --- /dev/null +++ b/public/css/stylesPDF.css @@ -0,0 +1,433 @@ +/* BODY */ + +body { + /* Fuente compatible con DomPDF */ + font-family: DejaVu Sans, sans-serif; + + /* Tamanio base del documento */ + font-size: 12px; + + /* Espacio inferior para que no se superponga con el footer */ + margin-bottom: 60px; +} + + + +/* HEADER GENERAL (layout principal del encabezado PDF)*/ + +.header-table { + /* Ocupa todo el ancho */ + width: 100%; + + /* Elimina espacios entre celdas */ + border-collapse: collapse; +} + +.header-left { + /* Columna principal */ + width: 65%; + + /* Alinea contenido arriba */ + vertical-align: top; +} + +.header-right { + /* Columna secundaria (mas chica) */ + width: 35%; + + /* Alineacion superior */ + vertical-align: top; + + /* DomPDF renderiza mejor alineado a la izquierda que a la derecha*/ + text-align: left; +} + + + +/* TABLA INTERNA EMPRESA (estructura de datos de la empresa)*/ + +.empresa-header { + width: 100%; + border-collapse: collapse; +} + +.empresa-left { + width: 65%; + vertical-align: top; +} + +.empresa-right { + width: 35%; + vertical-align: top; + font-size: 11px; + + /* Ajuste de legibilidad */ + line-height: 1.3; + + padding-left: 12px; + text-align: left; +} + + + +/* LOGO + MARCA */ + +.logo-marca { + /* Tamanio fijo del logo */ + width: 250px; + + /* Mantiene proporcion */ + height: auto; + + display: block; + margin-bottom: 8px; +} + + + +/* DATOS EMPRESA */ + +.empresa-datos { + font-size: 11px; + + /* Compacto */ + line-height: 1.1; + + margin-bottom: 0; +} + + + +/* PRESUPUESTO */ + +.presupuesto-titulo { + font-size: 16px; + font-weight: bold; + + /* Ajuste visual */ + margin-bottom: 0.5px; + + text-align: right; +} + +.presupuesto-datos { + font-size: 12px; + line-height: 1.2; + text-align: right; + margin-bottom: 10px; +} + + + +/* VENTA */ + +.venta-titulo { + font-size: 16px; + font-weight: bold; + margin-bottom: 0.5px; + text-align: right; +} + +.venta-titulo-intermedio { + font-size: 12px; + font-weight: bold; + margin-bottom: 0.5px; + + /* Evita que el texto se corte en dos lineas */ + white-space: nowrap; +} + +.venta-datos { + font-size: 12px; + line-height: 1.2; + text-align: right; + margin-bottom: 10px; +} + +.datos-fiscales { + font-size: 11px; + line-height: 1.2; + text-align: right; +} + + + +/* SEPARADOR VISUAL */ + +.separator { + margin-top: 10px; + + /* Linea divisora principal */ + border: 0; + border-top: 2px solid #000; +} + + + +/* BOX CLIENTE (contenedor con borde redondeado) */ + +.box-cliente { + width: 100%; + border: 1px solid #000; + + /* Borde redondeado */ + border-radius: 10px; + + border-collapse: separate; + border-spacing: 0; + + margin-top: 15px; + font-size: 11px; + + /* Evita que el contenedor se desborde */ + overflow: hidden; +} + +/* Celda contenedora general */ +.box-cliente td { + padding: 2px 6px; + vertical-align: top; +} + +/* Layout interno en dos columnas */ +.box-cliente-contenido { + width: 100%; + border-collapse: collapse; + margin-bottom: 2px; +} + +.box-cliente-left { + width: 60%; + padding-right: 10px; +} + +.box-cliente-right { + width: 40%; + padding-left: 10px; + text-align: left; +} + +/* Separador interno */ +.box-cliente-separador { + padding-top: 3px; + padding-bottom: 1px; +} + +.box-cliente-separador::after { + content: ""; + display: block; + border-top: 1px solid #000; +} + + + +/* TABLA DE PRODUCTOS */ + +.tabla-productos { + /* Tabla ocupa todo el ancho */ + width: 100%; + + /* Evita espacios entre celdas */ + border-collapse: collapse; + + /* Separacion respectoa a bloques anteriores */ + margin-top: 15px; + + /* Tamanio de fuente */ + font-size: 11px; + + /* Linea inferior de cierre */ + border-bottom: 1px solid #000; +} + +/* Cabecera de la tabla*/ +.tabla-productos th { + /* Bordes visibles */ + border-bottom: 1px solid #000; + border: 1px solid #000; + + /* Espacio interno */ + padding: 6px; + + /* Destaca titulos */ + font-weight: bold; +} + +/* Celdas de datos */ +.tabla-productos td { + /* Espaciado interno */ + padding: 6px; + + /* Sin bordes para visual mas limpio*/ + border: none +} + +/* Utilidades */ +.center { + text-align: center; +} + +.right { + text-align: right; +} + + + +/* BOXES (notas, totales, etc) */ + +.box-nota { + border: 1px solid #000; + border-radius: 6px; + overflow: hidden; + font-size: 11px; +} + +.box-titulo { + font-weight: bold; + padding: 6px; + border-bottom: 1px solid #000; +} + +.box-contenido { + padding: 8px; + line-height: 1.4; + font-size: 11px; +} + +.box-totales { + width: 100%; + border: 1px solid #000; + + border-radius: 10px; + border-collapse: separate; + border-spacing: 0; + + overflow: hidden; + font-size: 12px; +} + +/* Filas de totales */ +.box-totales td { + padding: 6px 8px; + + /* Separacion visual entre filas */ + border-bottom: 1px solid #ffffff; +} + +/* ultima fila sin nombre */ +.box-totales tr:last-child td { + border-bottom: none; +} + +/* Total final destacado */ +.total-final td { + font-weight: bold; + background-color: #f2f2f2; +} + + + +/* FOOTER (PDF) */ + +.footer-table { + width: 100%; + margin-top: 16px; + border-collapse: separate; + border-spacing: 0; + margin-top: 25px; +} + +.footer-left { + width: 65%; + vertical-align: top; + padding-right: 10px; +} + +.footer-right { + width: 35%; + vertical-align: top; +} + +.footer-pdf { + /* Fija el elemento en la pagina */ + position: fixed; + + /* Fijado en la parte inferior de la hoja */ + bottom: 5px; + left: 20px; + right: 20px; + + /* Alineacion del texto */ + text-align: left; + + /* Tamanio de footer */ + font-size: 10px; +} + +.footer-separator { + border: none; + border-top: 1px solid #000; + margin-bottom: 4px; +} + +.footer-text { + font-weight: bold; + letter-spacing: 1px; +} + + + +/* FOOTER CON FIRMAS */ + +.espacio-footer { + display: none; +} + +.footer-fixed { + position: fixed; + bottom: 0px; + + /* Ajuste para margenes */ + width: calc(100% - 60px); + + font-size: 11px; +} + +/* Linea superior */ +.footer-line { + border-top: 1px solid #000; + margin-top: 35px; + margin-bottom: 6px; +} + +/* Marca */ +.footer-brand { + text-align: left; + font-weight: bold; +} + +/* Layout */ +.footer-content { + width: 100%; + padding-top: 20px; +} + +/* Firmas */ +.footer-right { + width: 60%; +} + +.firma-row { + margin-bottom: 40px; +} + +.firma-row span { + display: block; + margin-bottom: 6px; +} + +.firma-line { + width: 85%; + border-bottom: 1px solid #000; + height: 25px; +} \ No newline at end of file diff --git a/public/css/stylesRemitoPDF.css b/public/css/stylesRemitoPDF.css new file mode 100644 index 0000000..334a6f7 --- /dev/null +++ b/public/css/stylesRemitoPDF.css @@ -0,0 +1,268 @@ +/* BODY */ + +body { + font-family: DejaVu Sans, sans-serif; + font-size: 12px; + margin-bottom: 0; +} + + + +/* HEADER REMITO */ + +.header-left { + width: 65%; + vertical-align: top; +} + +.header-center { + width: 10%; + vertical-align: top; + text-align: center; +} + +.header-right { + width: 25%; + vertical-align: top; + text-align: right; + padding-right: 0; +} + +.header-table { + width: 100%; + border-collapse: collapse; +} + +.header-table td { + padding: 0; +} + + + +/* LETRA REMITO */ + +.remito-letra-box { + display: inline-block; + width: 34px; + height: 34px; + border: 2px solid #000; + background-color: #f2f2f2; + font-size: 22px; + font-weight: bold; + font-family: DejaVu Sans, sans-serif; +} + + + +/* TABLA INTERNA EMPRESA */ + +.empresa-header { + width: 100%; + border-collapse: collapse; +} + +.empresa-left { + width: 65%; + vertical-align: top; +} + +.empresa-right { + width: 35%; + vertical-align: top; + font-size: 11px; + line-height: 1.3; + padding-left: 12px; + text-align: left; +} + + + +/* LOGO + MARCA */ + +.logo-marca { + width: 250px; + height: auto; + display: block; + margin-bottom: 8px; +} + + + +/* DATOS EMPRESA */ + +.empresa-datos { + font-size: 11px; + line-height: 1.1; + margin-bottom: 0; +} + + + +/* REMITO */ + +.remito-titulo { + font-size: 16px; + font-weight: bold; + margin-bottom: 0.5px; + text-align: right; +} + +.remito-datos { + font-size: 12px; + line-height: 1.2; + text-align: right; + margin-bottom: 10px; +} + +.datos-fiscales { + font-size: 11px; + line-height: 1.2; + text-align: right; + white-space: nowrap; +} + + + +/* CAJA */ + +.box-proveedor { + width: 100%; + border: 1px solid #000; + border-radius: 10px; + border-collapse: separate; + border-spacing: 0; + margin-top: 15px; + font-size: 11px; + overflow: hidden; +} + +/* Celda contenedora general */ + +.box-proveedor td { + padding: 2px 6px; + vertical-align: top; +} + +/* Layout interno en dos columnas */ + +.box-proveedor-contenido { + width: 100%; + border-collapse: collapse; + margin-bottom: 2px; +} + +.box-proveedor-left { + width: 60%; + padding-right: 10px; +} + +.box-proveedor-right { + width: 40%; + padding-left: 10px; + text-align: left; +} + + + +/* PRODUCTOS */ + +.tabla-productos { + width: 100%; + border-collapse: collapse; + margin-top: 15px; + font-size: 11px; + border-bottom: 1px solid #000; +} + +.tabla-productos th { + border-bottom: 1px solid #000; + border: 1px solid #000; + padding: 6px; + font-weight: bold; +} + +.tabla-productos td { + padding: 6px; + border: none +} + +.center { + text-align: center; +} + +.right { + text-align: right; +} + + + +/* FOOTER */ + +.espacio-footer { + display: none; +} + +.footer-fixed { + position: fixed; + bottom: 20px; + left: 30px; + width: calc(100% - 60px); + font-size: 11px; +} + +/* linea superior */ + +.footer-line { + border-top: 1px solid #000; + margin-bottom: 6px; +} + +/* Bytecenter */ + +.footer-brand { + text-align: left; + margin-bottom: 5px; + font-weight: bold; +} + +/* layout */ + +.footer-content { + display: table; + width: 100%; +} + +.footer-left, +.footer-right { + display: table-cell; + vertical-align: middle; + padding-top: 25px; +} + +.footer-left { + width: 60%; + font-style: italic; + padding-top: 25px; +} + +.footer-right { + width: 40%; +} + +/* firma */ + +.firma-row { + margin-bottom: 30px; +} + +.firma-row span { + display: inline-block; + width: 80px; +} + +.firma-line { + display: inline-block; + width: calc(100% - 90px); + border-bottom: 1px solid #000; + height: 18px; +} \ No newline at end of file