Carpeta css

This commit is contained in:
Axel Axt
2026-08-04 19:45:02 -03:00
parent cf5d30a756
commit ebc7efa4d7
4 changed files with 1796 additions and 0 deletions
+120
View File
@@ -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;
}
+975
View File
@@ -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;
}
+433
View File
@@ -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;
}
+268
View File
@@ -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;
}