/* ============================================================================
fact-mereba — capa propia sobre el tema MEREBA "Wimbledon".
Se carga DESPUES de mereba-theme.css. Aqui solo van las piezas propias de una
aplicacion de facturacion: importes, estados de remision a la AEAT, bloque de
QR tributario y la clase `has-background-cream`.
Nota de deuda heredada: merebapy4web/apps/_default/templates/backoffice_layout.html
usa `has-background-cream` sin que exista en ningun CSS. Aqui SI se define,
para que el del layout signifique algo.
========================================================================== */
.has-background-cream {
background-color: var(--mereba-cream);
}
/* ---------- Pie de pagina ----------
El tema pinta el footer en verde botella pero solo aclara el texto que lleva
`has-text-white`. Un
suelto queda verde sobre verde e ilegible. Aqui se
aclara todo el contenido del pie. */
.footer,
.footer p {
color: #F2EFE6;
}
/* Pie anclado abajo cuando el contenido no llena la ventana. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > main {
flex: 1 0 auto;
}
body > .footer {
flex: none;
}
.has-background-cream-soft {
background-color: var(--mereba-cream-soft);
}
/* ---------- Cifras y codigos ----------
Todo lo que sea importe, NIF, numero de factura, huella o CSV va en la
monoespaciada de marca: se comparan por columnas y deben alinearse. */
.dato-fiscal,
.importe,
.huella,
.csv {
font-family: var(--mereba-font-mono);
font-variant-numeric: tabular-nums;
}
.importe {
text-align: right;
white-space: nowrap;
}
/* La huella SHA-256 son 64 caracteres: se parte y se puede seleccionar entera. */
.huella {
word-break: break-all;
font-size: 0.8rem;
color: var(--mereba-ink);
}
/* ---------- Estado de remision a la AEAT ----------
Un color por estado del registro. `aceptado-con-errores` es AMBAR y no verde
a proposito: la AEAT SI registro la factura, pero algo no cuadro, y lo mas
probable es que sea un fallo en el calculo de la huella. Nunca debe parecer
un exito. */
.estado-aeat {
display: inline-flex;
align-items: center;
gap: var(--mereba-space-2);
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.estado-aeat::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: currentColor;
flex: none;
}
.estado-aeat.es-pendiente {
background: #EFEDE4;
color: #6B6A62;
}
.estado-aeat.es-enviando {
background: #E6E2F0;
color: var(--mereba-purple);
}
.estado-aeat.es-correcto {
background: #E2EFE7;
color: var(--mereba-green);
}
.estado-aeat.es-aceptado-con-errores {
background: #FBEFD8;
color: #94631A;
}
.estado-aeat.es-incorrecto {
background: #F7E1E1;
color: #A32222;
}
/* Estado indeterminado: la AEAT no respondio y no sabemos si le llego. */
.estado-aeat.es-desconocido {
background: #E7E9EC;
color: #4A5058;
}
/* ---------- Estado de la factura ---------- */
.estado-factura.es-borrador {
color: #6B6A62;
}
.estado-factura.es-emitida {
color: var(--mereba-green);
}
.estado-factura.es-anulada {
color: #A32222;
text-decoration: line-through;
}
.estado-factura.es-rectificada {
color: #94631A;
}
/* ---------- Aviso de entorno de pruebas ----------
Franja permanente para que nadie confunda una factura de pruebas con una real. */
.aviso-pruebas {
background: repeating-linear-gradient(
45deg,
#FBEFD8,
#FBEFD8 12px,
#F6E6C8 12px,
#F6E6C8 24px
);
border: 1px solid #E0CFA5;
border-radius: var(--mereba-radius-sm);
color: #7A5312;
font-weight: 700;
padding: var(--mereba-space-3) var(--mereba-space-4);
margin-bottom: var(--mereba-space-5);
}
/* ---------- Bloque del QR tributario ----------
Reproduce en pantalla lo que exige el art. 21 de la Orden HAC/1177/2024 para
la factura impresa: leyenda "QR tributario:" encima, QR entre 30 y 40 mm con
zona de silencio, y la mencion VERI*FACTU debajo. */
.qr-tributario {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--mereba-space-2);
padding: var(--mereba-space-3);
background: #FFFFFF;
border: 1px solid var(--mereba-line);
border-radius: var(--mereba-radius-sm);
}
.qr-tributario .qr-titulo,
.qr-tributario .qr-leyenda {
font-size: 0.78rem;
font-weight: 700;
text-align: center;
color: var(--mereba-ink);
}
.qr-tributario img {
width: 35mm;
height: 35mm;
display: block;
}
/* ---------- Tablas de facturas ---------- */
.tabla-facturas td,
.tabla-facturas th {
vertical-align: middle;
}
.tabla-facturas .col-importe {
text-align: right;
}
/* ---------- Impresion ---------- */
@media print {
.navbar,
.footer,
.aviso-pruebas,
.no-imprimir {
display: none !important;
}
}
/* ============================================================================
E12 — rediseño del panel: cabeceras de página, navegación, formularios
por secciones, paneles de alta plegables y la ficha de factura como hoja.
========================================================================== */
/* ---------- Navegación: sección activa ---------- */
.navbar.is-dark .navbar-item.es-actual {
box-shadow: inset 0 -3px 0 #FFFFFF;
color: #FFFFFF;
font-weight: 700;
}
.navbar .navbar-item .icon img {
filter: brightness(0) invert(1);
opacity: 0.85;
width: 1rem;
height: 1rem;
}
/* ---------- Cabecera de página ----------
Título a la izquierda, acciones a la derecha, y debajo el hilo de
navegación. Es el mismo bloque en todas las pantallas. */
.cabecera-pagina {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--mereba-space-4);
margin-bottom: var(--mereba-space-5);
padding-bottom: var(--mereba-space-4);
border-bottom: 1px solid var(--mereba-line);
}
.cabecera-pagina .title {
margin-bottom: 0.75rem;
line-height: 1.3;
}
.table.tabla-gestion td.importe,
.table.tabla-gestion .col-iva {
white-space: nowrap;
}
.cabecera-pagina .subtitle {
margin-top: 0;
margin-bottom: 0;
max-width: 64ch;
font-size: 1rem;
line-height: 1.5;
}
.cabecera-pagina .acciones {
display: flex;
flex-wrap: wrap;
gap: var(--mereba-space-2);
align-items: center;
}
.breadcrumb.is-small {
margin-bottom: var(--mereba-space-3);
}
/* ---------- Tarjetas quietas ----------
El tema hace que todas las tarjetas «salten» al pasar el ratón. En una
aplicación de gestión eso distrae: aquí solo se mueven las que son enlace. */
/* El tema estira todas las tarjetas a la altura de su columna
(`height: 100%`). Con dos tarjetas apiladas en una columna, la segunda
se sale del pie de página. Aquí las tarjetas miden lo que contienen. */
.mereba-card {
height: auto;
}
.table.tabla-gestion .col-momento,
.table.tabla-gestion .col-nowrap {
white-space: nowrap;
}
.mereba-card:not(.is-interactive):hover {
transform: none;
box-shadow: var(--mereba-shadow-sm);
}
.mereba-card .title.is-5,
.mereba-card .title.is-6 {
margin-bottom: var(--mereba-space-4);
}
/* ---------- Panel de alta plegable ---------- */
details.panel-alta {
background: var(--mereba-cream-soft);
border: 1px solid var(--mereba-line);
border-radius: var(--mereba-radius);
margin-bottom: var(--mereba-space-5);
box-shadow: var(--mereba-shadow-sm);
}
details.panel-alta > summary {
cursor: pointer;
list-style: none;
padding: var(--mereba-space-4) 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mereba-space-3);
font-weight: 700;
color: var(--mereba-green-dark);
}
details.panel-alta > summary::-webkit-details-marker {
display: none;
}
details.panel-alta > summary::after {
content: "";
width: 0.6rem;
height: 0.6rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--mereba-transition-fast);
flex: none;
}
details.panel-alta[open] > summary::after {
transform: rotate(-135deg);
}
details.panel-alta[open] > summary {
border-bottom: 1px solid var(--mereba-line);
}
details.panel-alta > .cuerpo {
padding: var(--mereba-space-5) 1.75rem;
}
/* ---------- Formularios por secciones ----------
Cada