/*
==============================================================================
REDISEÑO 2026 — Capa de estilos monocromática (grises y negro)
==============================================================================
Este archivo NO modifica los CSS originales. Se carga después de ellos y
sobrescribe la presentación. Los archivos base siguen intactos:
- PortalFacturacion.css (flujo normal)
- PortalFacturacion_Refacturacion.css (ShowOptionToReInvoice = Y)
- PortalFacturacion_RegistroTickets.css (RegisterTicketWithoutSigning = Y)
- PortalFacturacion.LookAndFeel.css (rediseño anterior, en gris)
CÓMO HACER ROLLBACK (volver al diseño anterior):
En Views/Shared/_Layout.cshtml, dentro del bloque marcado
"INICIO REDISEÑO 2026 / FIN REDISEÑO 2026":
1) Comentar el de PortalFacturacion.Rediseno.css
2) Descomentar el de PortalFacturacion.LookAndFeel.css
3) Recargar con Ctrl+F5
No hace falta recompilar ni tocar este archivo.
NOTA: los tres flujos de configuración se distinguían entre sí por color
(gris / azul pizarra / azul claro). Al ser monocromático el rediseño, esa
distinción la da ahora el título del encabezado, que ya cambia por flujo:
"Facturación" / "Facturación y refacturación" / "Registro de tickets…"
==============================================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Onest:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
:root {
--rd-bg-a: #F5F5F7;
--rd-bg-b: #E6E6EA;
--rd-surface: #FFFFFF;
--rd-surface-2: #F2F2F4;
--rd-field: #F0F0F3;
--rd-field-focus: #E8E8EC;
--rd-ink: #0E0E10;
--rd-ink-2: #3A3A40;
--rd-muted: #71717A;
--rd-line: #DEDEE3;
--rd-line-soft: #EAEAEE;
--rd-on-ink: #FAFAFA;
--rd-sh-1: 0 1px 2px rgba(14,14,16,.04);
--rd-sh-2: 0 2px 6px rgba(14,14,16,.05), 0 12px 28px -12px rgba(14,14,16,.14);
--rd-sh-3: 0 4px 10px rgba(14,14,16,.06), 0 32px 60px -28px rgba(14,14,16,.28);
}
/*
TONALIDAD POR FLUJO
Los CSS originales distinguían cada modo de operación por color
(gris / azul pizarra / azul claro). Aquí se conserva esa distinción pero
dentro de la misma familia gris: cada flujo tiene su propia temperatura y
valor de gris, sin colores saturados.
La clase la coloca _Layout.cshtml en según el flujo activo:
.flujo-facturacion -> grafito neutro (ambos tags en N)
.flujo-refacturacion -> gris pizarra (ShowOptionToReInvoice = Y)
.flujo-registro -> gris acero claro (RegisterTicketWithoutSigning = Y)
*/
body.flujo-refacturacion {
--rd-bg-a: #F1F3F6;
--rd-bg-b: #DFE4EA;
--rd-surface-2: #EDF0F3;
--rd-field: #EAEEF2;
--rd-field-focus: #E1E7EC;
--rd-ink: #2C3742;
--rd-ink-2: #4A5661;
--rd-muted: #6C7884;
--rd-line: #D5DBE2;
--rd-line-soft: #E3E8ED;
}
body.flujo-registro {
--rd-bg-a: #EFF3F6;
--rd-bg-b: #DBE4EA;
--rd-surface-2: #EAF0F4;
--rd-field: #E8EEF3;
--rd-field-focus: #DEE7ED;
--rd-ink: #44555F;
--rd-ink-2: #5C6C77;
--rd-muted: #7A868F;
--rd-line: #D0DAE1;
--rd-line-soft: #E0E8ED;
}
/* ---------- Base ---------- */
html, body {
font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
color: var(--rd-ink);
background:
radial-gradient(900px 420px at 78% -10%, rgba(255,255,255,.55), transparent 65%),
linear-gradient(168deg, var(--rd-bg-a) 0%, var(--rd-bg-b) 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
h1, h2, h3, h4, h5 {
font-family: 'Schibsted Grotesk', ui-sans-serif, sans-serif;
letter-spacing: -.015em;
}
.container.body-content {
flex: 1 0 auto;
padding-top: 6px;
padding-bottom: 34px;
}
/* ---------- Encabezado ---------- */
.site-header {
background: transparent;
border-bottom: none;
box-shadow: none;
padding-top: 24px !important;
padding-bottom: 8px !important;
}
.site-header .container {
padding-top: 10px;
padding-bottom: 6px;
gap: 4px;
}
.site-header h2 {
font-size: clamp(1.7rem, 3.2vw, 2.3rem);
font-weight: 800;
letter-spacing: -.02em;
color: var(--rd-ink);
margin: 6px 0 6px;
text-wrap: balance;
}
.site-header h5 {
font-size: 1rem;
font-weight: 400;
color: var(--rd-ink-2);
line-height: 1.5;
max-width: 34rem;
margin: 0 auto;
}
/* Etiqueta de modo (flujos de configuración) */
.modo-chip {
display: inline-block;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: .66rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rd-ink-2);
background: var(--rd-surface-2);
border: 1px solid var(--rd-line);
border-radius: 999px;
padding: 4px 11px;
margin-bottom: 6px;
}
/* Placa clara para los logotipos: varias marcas son de arte oscuro. */
.logo-plate {
display: flex;
align-items: center;
gap: 26px;
background: var(--rd-surface);
border: 1px solid var(--rd-line);
border-radius: 20px;
padding: 18px 24px;
}
.img-brand {
width: auto;
height: 92px;
filter: none;
transition: none;
}
.img-brand:hover { transform: none; }
.logo-grupo-principal {
height: 92px;
width: auto;
max-width: 300px;
filter: none;
display: block;
}
.logos-grupo {
display: flex;
align-items: center;
gap: 0;
flex-wrap: nowrap;
}
.logos-grupo-divider {
width: 1px;
height: 66px;
background: var(--rd-line);
margin: 0 26px;
flex-shrink: 0;
}
.logos-grupo-marcas-logos {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
}
.logo-grupo-marca {
height: 74px;
width: auto;
opacity: 1;
display: block;
}
.logo-grupo-marca:hover { transform: none; }
/* ---------- Riel de pasos (antes: pestañas) ---------- */
.center-cont {
max-width: 940px;
animation: none;
}
.nav-tabs {
border: 0 !important;
display: flex;
align-items: center;
gap: 0;
background: transparent;
margin: 12px 0 20px;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.active {
flex: 1 1 0;
display: flex !important;
align-items: center;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
opacity: 1 !important;
transform: none !important;
cursor: default;
}
.nav-tabs .nav-link#nav-role1-tab { cursor: pointer; }
.nav-tabs .nav-link > div {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 0 0 auto;
}
.nav-tabs .nav-link h3 {
display: flex;
align-items: center;
gap: 11px;
margin: 0 !important;
font-size: 1rem;
letter-spacing: 0;
}
.paso-num {
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
display: grid;
place-items: center;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: .82rem;
font-weight: 500;
background: var(--rd-surface);
color: var(--rd-muted);
border: 1px solid var(--rd-line);
box-shadow: var(--rd-sh-1);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.paso-txt {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
font-size: .95rem;
color: var(--rd-muted);
white-space: nowrap;
transition: color .2s ease;
}
.nav-tabs .nav-link.active .paso-num {
background: var(--rd-ink);
color: var(--rd-on-ink);
border-color: var(--rd-ink);
}
.nav-tabs .nav-link.active .paso-txt { color: var(--rd-ink); }
.nav-tabs .nav-link:not(:last-child)::after {
content: "";
flex: 1 1 auto;
height: 1px;
min-width: 16px;
background: var(--rd-line);
margin: 0 14px;
}
/* ---------- Tarjeta ---------- */
.tab-content.card,
.card {
background-color: var(--rd-surface) !important;
border: 1px solid var(--rd-line-soft) !important;
border-radius: 26px !important;
box-shadow: var(--rd-sh-3);
overflow: visible;
}
.card-body {
padding: clamp(22px, 3.2vw, 38px) clamp(20px, 3.4vw, 42px) 10px;
overflow: visible;
}
.card-body form { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.card-footer {
background: transparent !important;
border-top: 1px solid var(--rd-line-soft) !important;
padding: 20px clamp(20px, 3.4vw, 42px) 26px !important;
margin-top: 16px;
}
/* Tarjetas internas del paso 3 */
.card .card {
border-radius: 18px !important;
border: 1px solid var(--rd-line-soft) !important;
background: var(--rd-surface-2) !important;
box-shadow: none;
height: 100%;
}
.card .card .card-body { padding: 24px; height: 100%; }
/* El campo de --rd-field es casi idéntico a --rd-surface-2 (fondo de estas
tarjetas anidadas): sin esto, el recuadro del input se pierde visualmente
contra el fondo de la tarjeta. Aquí se le da su propio fondo blanco y borde. */
.card .card .form-control {
background: var(--rd-surface);
border: 1px solid var(--rd-line);
}
.card .card .form-control:focus {
background: var(--rd-surface);
border-color: var(--rd-ink-2);
}
/* ---------- Formulario ---------- */
.col-form-label {
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rd-muted);
padding-top: 12px;
}
.form-control {
font-family: 'Onest', sans-serif;
font-size: .97rem;
color: var(--rd-ink);
background: var(--rd-field);
border: 1px solid transparent;
border-radius: 13px;
min-height: 46px;
padding: 12px 15px;
box-shadow: none;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus {
background: var(--rd-field-focus);
border-color: var(--rd-line);
box-shadow: 0 0 0 4px rgba(14,14,16,.06);
color: var(--rd-ink);
}
.form-control::placeholder { color: var(--rd-muted); opacity: .75; }
.form-control:disabled,
.form-control[disabled] { background: var(--rd-surface-2); color: var(--rd-muted); }
#txtRFC, #txtClienteRFC, #txtTicket, #txtCP, #txtFecha {
font-family: 'DM Mono', ui-monospace, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
#txtRFC, #txtClienteRFC { text-transform: uppercase; }
#txtRFC::placeholder, #txtClienteRFC::placeholder { text-transform: none; }
.form-control.not { border-color: #B4B4BC; background: #EDEDEF; }
.requered { color: var(--rd-muted) !important; font-size: .8rem; }
/* Avisos del formulario: en el diseño original eran texto rojo. Al ser
monocromático, el énfasis lo dan la caja, el borde y la tinta oscura. */
.card-body h6 { margin-bottom: 10px; }
/* :not(:empty) es necesario: el HTML original en "Reexpedición" anida un
dentro de un
, anidación inválida que el navegador
corrige dejando un
vacío suelto — sin este filtro,
ese párrafo vacío también recibía fondo/borde y se veía como un recuadro
fantasma sin texto. */
.card-body h6 p[style*="red"]:not(:empty),
.card-body p[style*="red"]:not(:empty) {
color: var(--rd-ink) !important;
background: var(--rd-surface-2);
border: 1px solid var(--rd-line);
border-radius: 12px;
padding: 11px 15px;
margin: 0;
font-size: .87rem;
font-weight: 500;
line-height: 1.5;
}
.card-body p[style*="red"]:empty { display: none; }
.card-body h6 p { font-size: .86rem; line-height: 1.5; }
/* ---------- Botones ---------- */
.btn-next,
.btn-next:not(:disabled):not(.disabled) {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
font-size: .94rem;
color: var(--rd-on-ink) !important;
background-color: var(--rd-ink) !important;
border: 1px solid var(--rd-ink) !important;
border-radius: 999px !important;
padding: 12px 26px;
box-shadow: var(--rd-sh-2);
transition: transform .15s ease, background-color .15s ease;
}
.btn-next:hover {
background-color: #000 !important;
border-color: #000 !important;
color: var(--rd-on-ink) !important;
transform: translateY(-1px);
}
.btn-secondary,
a.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
font-size: .92rem;
background: transparent !important;
background-image: none !important;
border: 1px solid var(--rd-line) !important;
color: var(--rd-ink) !important;
border-radius: 999px !important;
padding: 12px 24px;
box-shadow: none;
transition: background .15s ease, border-color .15s ease;
}
.btn-secondary:hover,
a.btn-secondary:hover {
background: var(--rd-surface-2) !important;
border-color: var(--rd-ink-2) !important;
color: var(--rd-ink) !important;
transform: none;
}
.btnCustom {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
font-size: .86rem;
background: var(--rd-surface) !important;
border: 1px solid var(--rd-line) !important;
color: var(--rd-ink) !important;
border-radius: 12px !important;
padding: 10px 16px;
box-shadow: var(--rd-sh-1);
}
.btnCustom:hover { border-color: var(--rd-ink) !important; background: var(--rd-surface) !important; }
/* Ícono inline (SVG), reemplaza a bi-filetype-xml/pdf: esas clases no existen
en la versión de Bootstrap Icons que carga el proyecto (1.8.1, se agregaron
hasta 1.9) y por eso no se veían — un SVG propio no depende de ningún CDN. */
.icono-archivo {
width: 14px;
height: 14px;
vertical-align: -2px;
}
.btnW150 { min-width: 158px; }
/* Botón "?" de ayuda */
button.btn-quest,
.btn-quest {
border-radius: 50% !important;
height: 24px !important;
width: 24px !important;
min-width: 24px !important;
line-height: 1 !important;
padding: 0 !important;
font-family: 'DM Mono', monospace !important;
font-size: 12px !important;
font-weight: 500 !important;
background: var(--rd-surface) !important;
border: 1px solid var(--rd-line) !important;
color: var(--rd-ink-2) !important;
box-shadow: var(--rd-sh-1) !important;
transform: none !important;
margin-top: 12px;
}
button.btn-quest:hover,
.btn-quest:hover {
background: var(--rd-surface-2) !important;
border-color: var(--rd-ink) !important;
color: var(--rd-ink) !important;
}
.btn-quests { background: var(--rd-ink); color: var(--rd-on-ink); }
.btn:focus-visible,
.btn-quest:focus-visible {
outline: 2px solid var(--rd-ink);
outline-offset: 3px;
}
/* ---------- Enlaces ---------- */
a { color: var(--rd-ink-2); }
a:hover { color: var(--rd-ink); }
/* ---------- Paso 3 ---------- */
/* ---------- Paso 3: layout de las dos columnas (Descargar/Reenviar vs Reexpedición) ---------- */
.card-body > .d-sm-flex {
gap: 22px;
align-items: stretch;
}
.w-45 {
width: 100%;
display: flex;
flex-direction: column;
}
.card-body table.w-45 {
width: 100%;
border-collapse: separate;
border-spacing: 0 18px;
margin-top: -18px;
margin-bottom: -18px;
}
.card-body table.w-45 tr { display: table-row; }
.card-body table.w-45 td { padding-bottom: 0; vertical-align: top; }
/* La tarjeta de Reexpedición trae mucho texto suelto; se apretó el espaciado
interno para que no se vea con tanto aire vacío comparada con la columna
de al lado. */
.card .card p { margin-bottom: 10px; line-height: 1.5; }
.card .card ul { margin: 6px 0 0; padding-left: 20px; }
.card .card li { margin-bottom: 4px; }
.card .card h6 { margin: 0; font-size: 1rem; }
.card-body h6.text-secondary {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: var(--rd-ink) !important;
letter-spacing: -.01em;
}
.uuid-mono {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: .9rem;
color: var(--rd-ink-2);
letter-spacing: .01em;
}
.font-weight-bold { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700 !important; }
/* ---------- Pie ---------- */
.footer { flex-shrink: 0; margin-top: auto; }
.site-footer {
background: transparent;
border-top: 1px solid var(--rd-line);
}
.site-cr { background: transparent; }
.site-cr p, .footer-font {
color: var(--rd-muted) !important;
font-size: 10px;
line-height: 1.6;
}
.footer .text-white, .site-cr .text-white { color: var(--rd-muted) !important; }
/* ---------- Cargando ---------- */
.loader { border-top-color: var(--rd-ink); }
.textoCargando {
color: #FFFFFF;
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
}
.fondoCargando {
background-color: rgba(14,14,16,.55);
backdrop-filter: blur(3px);
}
/* ---------- Modales / alertas ---------- */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }
.modal-dialog { margin: 1.75rem auto; max-width: 540px; }
.modal-content, .modal-radious {
border: 0;
border-radius: 22px !important;
overflow: hidden;
box-shadow: 0 32px 70px -30px rgba(14,14,16,.5);
background: var(--rd-surface);
}
.modal-header {
background: var(--rd-ink);
color: #fff;
border-bottom: 0;
padding: .9rem 1.1rem;
}
.modal-title {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
color: #fff;
margin: 0;
}
.modal-header .close,
.modal-header .close span { color: #fff !important; opacity: 1 !important; text-shadow: none !important; }
.modal-header .close:hover { opacity: .75 !important; }
.modal-body { padding: 1rem; background: var(--rd-surface); }
.modal-body img { display: block; width: 100%; height: auto; border-radius: 12px; }
.modal-footer {
border-top: 1px solid var(--rd-line-soft);
background: var(--rd-surface-2);
}
.alerts, .divAlerta {
font-family: 'Onest', sans-serif;
border-radius: 18px;
}
.alerts-title p, #pTitleError, #pTitleSuccess, #pTitleInfo, #pTitleWarning {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 700;
color: var(--rd-ink);
}
.alerts-p p, #subPError, #subPSuccess, #subPInfo, #subPWarning {
color: var(--rd-ink-2);
font-size: .93rem;
line-height: 1.55;
}
.alerts-footer .btn,
.alerts-footer .btn-outline-success,
.alerts-footer .btn-outline-danger,
.alerts-footer .btn-outline-warning,
.alerts-footer .btn-outline-secondary,
.alerts-footer .btn-alerta-ok {
font-family: 'Schibsted Grotesk', sans-serif;
font-weight: 600;
border-radius: 999px !important;
padding: 10px 26px;
background: var(--rd-ink) !important;
border: 1px solid var(--rd-ink) !important;
color: var(--rd-on-ink) !important;
}
.alerts-footer .btn:hover { background: #000 !important; color: var(--rd-on-ink) !important; }
.alerts-footer .btn-outline-secondary:last-child {
background: transparent !important;
color: var(--rd-ink) !important;
border-color: var(--rd-line) !important;
}
/* ---------- Aviso ---------- */
.warning-box {
background-color: var(--rd-surface);
border: 1px solid var(--rd-line);
border-radius: 16px;
color: var(--rd-ink-2);
padding: 18px 22px;
font-size: .9rem;
line-height: 1.55;
box-shadow: var(--rd-sh-1);
}
/* ---------- Mantenimiento ---------- */
.mantenimiento-box { border-radius: 22px; }
.mantenimiento-titulo { font-family: 'Schibsted Grotesk', sans-serif; }
.mantenimiento-icon { color: var(--rd-ink-2); }
/* ---------- Accesibilidad / responsive ---------- */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media (max-width: 920px) {
.img-brand { height: 62px; }
.logo-grupo-principal { height: 62px; }
.logo-grupo-marca { height: 52px; }
.logos-grupo-divider { height: 46px; margin: 0 18px; }
.site-header h5 { font-size: .92rem; }
}
@media (max-width: 680px) {
.logo-plate { flex-direction: column; align-items: center; gap: 16px; padding: 18px; }
.logos-grupo { flex-direction: column; align-items: center; }
.logos-grupo-divider { width: 100%; height: 1px; margin: 14px 0; }
.paso-txt { display: none; }
.nav-tabs .nav-link:not(:last-child)::after { margin: 0 8px; }
.btnW150 { min-width: 130px; }
.card-footer.d-flex { flex-wrap: wrap; gap: .7rem; }
.modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }
}