Carpeta css
This commit is contained in:
Axel Axt
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user