/* =========================================================
   BASE BANNERS (neutral)
   ========================================================= */
.banner img {
    display: block;
}

/* =========================================================
   TOP & BOTTOM BANNERS (decorativos, se recortan)
   ========================================================= */
.banner-top,
.banner-bottom {
    max-height: clamp(80px, 18vh, 160px);
	aspect-ratio: 10 / 1;
    margin: 2rem 0;
    overflow: hidden;
    border-radius: 0.5rem;
	align-self: self-start;
}

.banner-top img,
.banner-bottom img {
	height: auto;
	width: 100%;
    object-fit: contain;
}

.banner-top:not(:has(img)) {
    height: 0;
    margin-top: 20px;
}

.banner-bottom:not(:has(img)) {
    height: 0;
    margin-bottom: 20px;
}

/* =========================================================
   LEFT & RIGHT BANNERS (decorativos, se recortan)
   ========================================================= */
.banner-left,
.banner-right {
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1 / 3;
	height: auto;
    overflow: hidden;
    border-radius: 1rem;
    flex-shrink: 0;
	align-self: flex-start;
}

.banner-left {
    margin: 0 2rem 0 0;
}

.banner-right {
    margin: 0 0 0 2rem;
}

.banner-left img,
.banner-right img {
	height: auto;
	width: 100%;
    object-fit: contain;
}

.banner-left:not(:has(img)),
.banner-right:not(:has(img)) {
    display: none;
}

/* =========================================================
   MOBILE: ocultar laterales
   ========================================================= */
@media (max-width: 992px) {
    .banner-left,
    .banner-right {
        display: none;
    }
}

/* =========================================================
   LAYOUT CENTRAL
   ========================================================= */
.main-layout {
    display: flex;
    align-items: stretch;
}

.main-layout .content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.content-card {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    padding: 5rem 4rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


.form-consumer {
    max-width: 760px;
    margin: 0 auto;
}

.form-consumer .control-label {
    text-align: left;
    font-weight: 600;
    padding-top: 08px;
}

.form-consumer .form-control {
    height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 4px;
}

.form-consumer .form-group {
    margin-bottom: 14px;
	align-items: center;
}

.form-consumer .field-ruc {
    max-width: 280px;
}
.form-consumer .field-monto {
    max-width: 280px;
}
.form-consumer #serie {
    text-align: left;
}
.form-consumer #numero {
    text-align: left;
}

.form-consumer .field-fecha {
    max-width: 280px;
}

.form-consumer .input-group-addon {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.form-consumer .btn-primary {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
}

.form-consumer .form-group:last-child {
    margin-top: 24px;
}

@media (max-width: 768px) {

    .form-consumer {
        max-width: 100%;
        padding: 0 12px;
    }

    .form-consumer .field-ruc,
    .form-consumer .field-monto,
    .form-consumer .field-fecha {
        max-width: none;
        width: 100%;
    }

    .form-consumer .control-label {
        margin-bottom: 6px;
        padding-top: 0;
    }

    .form-consumer .form-group {
        margin-bottom: 18px;
    }
}